refactor: adjusting the model list to a responsive layout (#405)

Author: ayangweb

src/pages/preference/components/model/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Model } from '@/stores/model'
+import type { ColProps } from 'ant-design-vue'
 
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { remove } from '@tauri-apps/plugin-fs'
@@ -13,6 +14,13 @@ import { join } from '@/utils/path'
 
 const modelStore = useModelStore()
 
+const colProps: ColProps = {
+  xs: 12,
+  md: 8,
+  lg: 6,
+  xl: 4,
+}
+
 async function handleDelete(item: Model) {
   const { id, path } = item
 
@@ -34,14 +42,14 @@ async function handleDelete(item: Model) {
 
 <template>
   <Row :gutter="[16, 16]">
-    <Col :span="8">
+    <Col v-bind="colProps">
       <Upload />
     </Col>
 
     <Col
       v-for="item in modelStore.models"
       :key="item.id"
-      :span="8"
+      v-bind="colProps"
     >
       <Card
         hoverable