feat: 使用瀑布流布局展示模型列表 (#502)

Author: ayangweb

package.json

@@ -46,7 +46,8 @@
     "tauri-plugin-macos-permissions-api": "^2.3.0",
     "vue": "^3.5.16",
     "vue-markdown-render": "^2.2.1",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "vue3-masonry-css": "^1.0.7"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.13.3",

pnpm-lock.yaml

@@ -86,7 +86,7 @@ watch(selectPaths, async (paths) => {
 <template>
   <div
     ref="drop"
-    class="size-full flex flex-col cursor-pointer items-center justify-center gap-4 b b-color-1 rounded-lg b-dashed bg-color-8 transition hover:border-primary"
+    class="h-40 w-full flex flex-col cursor-pointer items-center justify-center gap-4 b b-color-1 rounded-lg b-dashed bg-color-8 transition hover:border-primary"
     :class="{ 'border-primary': dragenter }"
     @click="handleUpload"
   >

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

@@ -1,11 +1,11 @@
 <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'
 import { revealItemInDir } from '@tauri-apps/plugin-opener'
-import { Card, Col, message, Popconfirm, Row } from 'ant-design-vue'
+import { Card, message } from 'ant-design-vue'
+import { MasonryGrid, MasonryGridItem } from 'vue3-masonry-css'
 
 import FloatMenu from './components/float-menu/index.vue'
 import Upload from './components/upload/index.vue'
@@ -15,13 +15,6 @@ 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
 
@@ -42,15 +35,17 @@ async function handleDelete(item: Model) {
 </script>
 
 <template>
-  <Row :gutter="[16, 16]">
-    <Col v-bind="colProps">
+  <MasonryGrid
+    :columns="{ 992: 3, 1200: 4, 1600: 6, default: 8 }"
+    :gutter="16"
+  >
+    <MasonryGridItem>
       <Upload />
-    </Col>
+    </MasonryGridItem>
 
-    <Col
+    <MasonryGridItem
       v-for="item in modelStore.models"
       :key="item.id"
-      v-bind="colProps"
     >
       <Card
         hoverable
@@ -90,8 +85,8 @@ async function handleDelete(item: Model) {
           </template>
         </template>
       </Card>
-    </Col>
-  </Row>
+    </MasonryGridItem>
+  </MasonryGrid>
 
   <FloatMenu />
 </template>

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

@@ -61,6 +61,7 @@ const menus = [
         <div class="b b-color-2 rounded-2xl b-solid">
           <img
             class="size-15"
+            data-tauri-drag-region
             src="/logo.png"
           >
         </div>