Feat resize model card (#104)

* feat: Use setting definition card size

* refactor: Optimize computed value of the list items

- Add useContainerResize hooks
- Remove v-resize
- Change cols to computed

* refactor(ModelCard): Optimize style

- Control the display of button or name in difference sizes
- Add name tooltip when hiding name

* feat: Add i18n

* pref: optimize style code structure

* feat: add quick resize card size

* feat: add custom size tooltip

* feat: optimize card tool button display judgment

src/hooks/config.ts

@@ -21,9 +21,19 @@ export const useConfig = defineStore('config', (store) => {
     window.removeEventListener('resize', checkDeviceType)
   })
 
+  const cardSize = ref({
+    width:
+      app.ui?.settings.getSettingValue<number>('ModelManager.UI.CardWidth') ??
+      240,
+    height:
+      app.ui?.settings.getSettingValue<number>('ModelManager.UI.CardHeight') ??
+      310,
+  })
+
   const config = {
     isMobile,
     gutter: 16,
+    cardSize,
     cardWidth: 240,
     aspect: 7 / 9,
   }
@@ -99,6 +109,39 @@ function useAddConfigSettings(store: import('hooks/store').StoreProvider) {
       defaultValue: undefined,
     })
 
+    // UI settings
+    app.ui?.settings.addSetting({
+      id: 'ModelManager.UI.CardWidth',
+      category: [t('modelManager'), t('setting.ui'), 'CardWidth'],
+      name: t('setting.cardWidth'),
+      type: 'slider',
+      defaultValue: 240,
+      attrs: {
+        min: 80,
+        max: 320,
+        step: 10,
+      },
+      onChange(value) {
+        store.config.cardSize.value.width = value
+      },
+    })
+
+    app.ui?.settings.addSetting({
+      id: 'ModelManager.UI.CardHeight',
+      category: [t('modelManager'), t('setting.ui'), 'CardHeight'],
+      name: t('setting.cardHeight'),
+      type: 'slider',
+      defaultValue: 320,
+      attrs: {
+        min: 80,
+        max: 320,
+        step: 10,
+      },
+      onChange(value) {
+        store.config.cardSize.value.height = value
+      },
+    })
+
     // Scan information
     app.ui?.settings.addSetting({
       id: 'ModelManager.ScanFiles.Full',