Implement color palette in Vue (#2047)

Co-authored-by: github-actions <github-actions@github.com>

src/components/dialog/content/SettingDialogContent.vue

@@ -32,6 +32,7 @@
           <template #header>
             <CurrentUserMessage v-if="tabValue === 'Comfy'" />
             <FirstTimeUIMessage v-if="tabValue === 'Comfy'" />
+            <ColorPaletteMessage v-if="tabValue === 'Appearance'" />
           </template>
           <SettingsPanel :settingGroups="sortedGroups(category)" />
         </PanelTemplate>
@@ -77,6 +78,7 @@ import PanelTemplate from './setting/PanelTemplate.vue'
 import AboutPanel from './setting/AboutPanel.vue'
 import FirstTimeUIMessage from './setting/FirstTimeUIMessage.vue'
 import CurrentUserMessage from './setting/CurrentUserMessage.vue'
+import ColorPaletteMessage from './setting/ColorPaletteMessage.vue'
 import { flattenTree } from '@/utils/treeUtil'
 import { isElectron } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'

src/components/dialog/content/setting/ColorPaletteMessage.vue

@@ -0,0 +1,63 @@
+<template>
+  <Message severity="info" icon="pi pi-palette" pt:text="w-full">
+    <div class="flex items-center justify-between">
+      <div>
+        {{ $t('settingsCategories.ColorPalette') }}
+      </div>
+      <div class="actions">
+        <Select
+          class="w-44"
+          v-model="activePaletteId"
+          :options="palettes"
+          optionLabel="name"
+          optionValue="id"
+        />
+        <Button
+          icon="pi pi-download"
+          text
+          :title="$t('g.download')"
+          @click="colorPaletteService.exportColorPalette(activePaletteId)"
+        />
+        <Button
+          icon="pi pi-upload"
+          text
+          :title="$t('g.import')"
+          @click="importCustomPalette"
+        />
+        <Button
+          icon="pi pi-trash"
+          severity="danger"
+          text
+          :title="$t('g.delete')"
+          @click="colorPaletteService.deleteCustomColorPalette(activePaletteId)"
+          :disabled="!colorPaletteStore.isCustomPalette(activePaletteId)"
+        />
+      </div>
+    </div>
+  </Message>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Message from 'primevue/message'
+import Select from 'primevue/select'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { useColorPaletteService } from '@/services/colorPaletteService'
+import { storeToRefs } from 'pinia'
+import { watch } from 'vue'
+
+const colorPaletteStore = useColorPaletteStore()
+const colorPaletteService = useColorPaletteService()
+const { palettes, activePaletteId } = storeToRefs(colorPaletteStore)
+
+const importCustomPalette = async () => {
+  const palette = await colorPaletteService.importColorPalette()
+  if (palette) {
+    colorPaletteService.loadColorPalette(palette.id)
+  }
+}
+
+watch(activePaletteId, () => {
+  colorPaletteService.loadColorPalette(activePaletteId.value)
+})
+</script>