feat: optimize resize card size (#129)

src/components/DialogManager.vue

@@ -28,7 +28,7 @@
               :items="sortOrderOptions"
             ></ResponseSelect>
             <ResponseSelect
-              v-model="currentCardSize"
+              v-model="cardSizeFlag"
               :items="cardSizeOptions"
             ></ResponseSelect>
           </div>
@@ -77,7 +77,14 @@ import { genModelKey } from 'utils/model'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-const { isMobile, gutter, cardSize } = useConfig()
+const {
+  isMobile,
+  gutter,
+  cardSize,
+  cardSizeMap,
+  cardSizeFlag,
+  dialog: settings,
+} = useConfig()
 
 const { data, folders } = useModels()
 const { t } = useI18n()
@@ -198,48 +205,24 @@ const contentStyle = computed(() => ({
   paddingRight: `1rem`,
 }))
 
-const currentCardSize = computed({
-  get: () => {
-    const options = cardSizeOptions.value.map((item) => item.value)
-    const current = [cardSize.value.width, cardSize.value.height].join('x')
-    if (options.includes(current)) {
-      return current
-    }
-    return 'custom'
-  },
-  set: (val) => {
-    if (val === 'custom') {
-      app.ui?.settings.show(t('size.customTip'))
-      return
-    }
-
-    const [width, height] = val.split('x')
-    app.ui?.settings.setSettingValue(
-      'ModelManager.UI.CardWidth',
-      parseInt(width),
-    )
-    app.ui?.settings.setSettingValue(
-      'ModelManager.UI.CardHeight',
-      parseInt(height),
-    )
-  },
-})
-
 const cardSizeOptions = computed(() => {
-  const defineOptions = {
-    extraLarge: '240x320',
-    large: '180x240',
-    medium: '120x160',
-    small: '80x120',
-    custom: 'custom',
+  const customSize = 'size.custom'
+
+  const customOptionMap = {
+    ...cardSizeMap.value,
+    [customSize]: 'custom',
   }
 
-  return Object.entries(defineOptions).map(([key, value]) => {
+  return Object.keys(customOptionMap).map((key) => {
     return {
-      label: t(`size.${key}`),
-      value,
-      command() {
-        currentCardSize.value = value
+      label: t(key),
+      value: key,
+      command: () => {
+        if (key === customSize) {
+          settings.showCardSizeSetting()
+        } else {
+          cardSizeFlag.value = key
+        }
       },
     }
   })

src/components/SettingCardSize.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="flex h-full flex-col">
+    <div class="flex-1 px-4">
+      <DataTable :value="sizeList">
+        <Column field="name" :header="$t('name')">
+          <template #body="{ data, field }">
+            {{ $t(data[field]) }}
+          </template>
+        </Column>
+        <Column field="width" :header="$t('width')" class="min-w-36">
+          <template #body="{ data, field }">
+            <span class="flex items-center gap-4">
+              <Slider
+                v-model="data[field]"
+                class="flex-1"
+                v-bind="sizeStint"
+              ></Slider>
+              <span>{{ data[field] }}</span>
+            </span>
+          </template>
+        </Column>
+        <Column field="height" :header="$t('height')" class="min-w-36">
+          <template #body="{ data, field }">
+            <span class="flex items-center gap-4">
+              <Slider
+                v-model="data[field]"
+                class="flex-1"
+                v-bind="sizeStint"
+              ></Slider>
+              <span>{{ data[field] }}</span>
+            </span>
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+    <div class="flex justify-between px-4">
+      <div></div>
+      <div class="flex gap-2">
+        <Button
+          icon="pi pi-refresh"
+          :label="$t('reset')"
+          @click="handleReset"
+        ></Button>
+        <Button :label="$t('cancel')" @click="handleCancelEditor"></Button>
+        <Button :label="$t('save')" @click="handleSaveSizeMap"></Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useConfig } from 'hooks/config'
+import { useDialog } from 'hooks/dialog'
+import Button from 'primevue/button'
+import Column from 'primevue/column'
+import DataTable from 'primevue/datatable'
+import Slider from 'primevue/slider'
+import { onMounted, ref } from 'vue'
+
+const { cardSizeMap, defaultCardSizeMap } = useConfig()
+const dialog = useDialog()
+
+const sizeList = ref()
+
+const sizeStint = {
+  step: 10,
+  min: 80,
+  max: 320,
+}
+
+const resolveSizeMap = (sizeMap: Record<string, string>) => {
+  return Object.entries(sizeMap).map(([key, value]) => {
+    const [width, height] = value.split('x')
+    return {
+      id: key,
+      name: key,
+      width: parseInt(width),
+      height: parseInt(height),
+    }
+  })
+}
+
+const resolveSizeList = (
+  sizeList: { name: string; width: number; height: number }[],
+) => {
+  return Object.fromEntries(
+    sizeList.map(({ name, width, height }) => {
+      return [name, [width, height].join('x')]
+    }),
+  )
+}
+
+onMounted(() => {
+  sizeList.value = resolveSizeMap(cardSizeMap.value)
+})
+
+const handleReset = () => {
+  sizeList.value = resolveSizeMap(defaultCardSizeMap)
+}
+
+const handleCancelEditor = () => {
+  sizeList.value = resolveSizeMap(cardSizeMap.value)
+  dialog.close()
+}
+
+const handleSaveSizeMap = () => {
+  cardSizeMap.value = resolveSizeList(sizeList.value)
+  dialog.close()
+}
+</script>