feat: 模型管理页面新增悬浮操作菜单 (#408)

Author: ayangweb

src/pages/preference/components/model/components/float-menu/index.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { EditOutlined, MenuOutlined, UnorderedListOutlined } from '@ant-design/icons-vue'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { FloatButton, FloatButtonGroup } from 'ant-design-vue'
+</script>
+
+<template>
+  <FloatButtonGroup
+    class="bottom-4 right-4"
+    trigger="click"
+    type="primary"
+  >
+    <template #icon>
+      <MenuOutlined />
+    </template>
+
+    <FloatButton
+      tooltip="如何制作模型？"
+      @click="openUrl('https://juejin.cn/spost/7509872655802269731')"
+    >
+      <template #icon>
+        <EditOutlined />
+      </template>
+    </FloatButton>
+
+    <FloatButton
+      tooltip="更多模型"
+      @click="openUrl('https://github.com/ayangweb/Awesome-BongoCat')"
+    >
+      <template #icon>
+        <UnorderedListOutlined />
+      </template>
+    </FloatButton>
+  </FloatButtonGroup>
+</template>

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

@@ -7,6 +7,7 @@ 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 FloatMenu from './components/float-menu/index.vue'
 import Upload from './components/upload/index.vue'
 
 import { useModelStore } from '@/stores/model'
@@ -88,4 +89,6 @@ async function handleDelete(item: Model) {
       </Card>
     </Col>
   </Row>
+
+  <FloatMenu />
 </template>