采用全局提示框

package.json

@@ -31,7 +31,9 @@
     "uuid": "^10.0.0",
     "v-viewer": "^3.0.13",
     "viewerjs": "^1.11.6",
-    "vue": "^3.4.29"
+    "vue": "^3.4.29",
+    "vue-toastification": "^2.0.0-rc.5",
+    "vue3-colorpicker": "^2.3.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",

src/layout/adder/CustomAdder.tsx

@@ -6,6 +6,11 @@ import { MdUpload, MdImage, MdCheck } from 'oh-vue-icons/icons'
 import ImageUploader from '@/utils/ImageUploader'
 import useLink from './useLink'
 import { CheckOutlined } from '@ant-design/icons-vue'
+import { v4 as uuid } from 'uuid'
+import type { Block } from '../layout.types'
+import { ColorPicker } from 'vue3-colorpicker'
+import 'vue3-colorpicker/style.css'
+import { globalToast } from '@/main'
 
 addIcons(MdUpload, MdImage, MdCheck)
 
@@ -30,6 +35,10 @@ const TypeSelector = defineComponent({
     background: {
       type: String,
       default: ''
+    },
+    name: {
+      type: String,
+      default: ''
     }
   },
   emits: {
@@ -74,12 +83,14 @@ const TypeSelector = defineComponent({
             }}
           >
             <span
-              class="text-[20px]"
+              class="text-[16px]"
               style={{
                 color: props.color
               }}
             >
-              {props.text ? props.text.substring(0, 2) : 'A'}
+              {props.text
+                ? props.text.substring(0, 2)
+                : props.name.substring(0, 2).toLocaleUpperCase() || 'A'}
             </span>
             {props.value === 1 && (
               <div
@@ -114,8 +125,8 @@ export default defineComponent(() => {
     link: '',
     name: '',
     text: '',
-    background: '#f7a94e',
+    background: 'rgb(247,169,78)',
-    color: 'rgba(255,255,255,1)',
+    color: 'rgb(255,255,255)',
     icon: '',
     type: 0 // 0 默认，1 文字
   })
@@ -134,11 +145,8 @@ export default defineComponent(() => {
   )
 
   const info = useLink(debounced)
-  console.log(info)
 
   watch(info, (val) => {
-    console.log(val)
-
     if (val.name) form.name = val.name
     if (val.icon) form.icon = val.icon
   })
@@ -167,13 +175,62 @@ export default defineComponent(() => {
           <TypeSelector
             v-model:value={form.type}
             v-model:icon={form.icon}
+            name={form.name}
             text={form.text}
             color={form.color}
             background={form.background}
           />
         </Form.Item>
+        {form.type === 1 && (
+          <>
+            <Form.Item label="文字颜色">
+              <ColorPicker
+                class="shadow-lg"
+                format="rgb"
+                shape="square"
+                v-model:pureColor={form.color}
+              />
+            </Form.Item>
+            <Form.Item label="图标背景">
+              <ColorPicker
+                class="shadow-lg"
+                format="rgb"
+                shape="square"
+                v-model:pureColor={form.background}
+              />
+            </Form.Item>
+            <Form.Item label="图标文字">
+              <Input v-model:value={form.text} maxlength={2} />
+            </Form.Item>
+          </>
+        )}
         <Form.Item label=" " colon={false}>
-          <Button type="primary" size="large" icon={<CheckOutlined />}>
+          <Button
+            type="primary"
+            size="large"
+            icon={<CheckOutlined />}
+            onClick={() => {
+              if (form.type === 1 && !form.text && !form.name) {
+                globalToast.error('文字图标请至少填写文字或者名称')
+                return
+              }
+              const id = uuid()
+              const data: Block = {
+                link: form.link,
+                name: '',
+                icon: form.type === 0 ? info.icon : '',
+                background: form.type === 0 ? '' : form.background,
+                color: form.type === 0 ? '' : form.color,
+                text:
+                  form.type === 0 ? '' : form.text || form.name.substring(0, 2).toLocaleUpperCase(),
+                label: form.name,
+                extra: {
+                  id
+                }
+              }
+              layout.addBlock(data)
+            }}
+          >
             确定
           </Button>
         </Form.Item>

src/layout/adder/useLink.ts

@@ -22,8 +22,6 @@ export default function useLink(url: Ref<string>) {
     (val) => {
       if (!val) return
       const tag = val.match(/(?<=http(s?):\/\/)[^/]*/g)?.[0] || val
-      console.log(tag);
-      
       request<LinkInfo>('GET', `/api/app/pic/info/${tag}`).then((res) => {
         Object.assign(info, res)
       })

src/layout/header/search/SearchPage.tsx

@@ -1,9 +1,10 @@
 import { defineComponent, ref } from 'vue'
-import { Button, Checkbox, Divider, message, Modal } from 'ant-design-vue'
+import { Button, Checkbox, Divider, Modal } from 'ant-design-vue'
 import useSearchConfigStore from './useSearchConfigStore'
 import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
 import asyncLoader from '@/utils/asyncLoader'
 import ThemeProvider from '@/utils/ThemeProvider'
+import { globalToast } from '@/main'
 const SearchAdder = asyncLoader(() => import('./SearchAdder'))
 const SearchItem = defineComponent({
   props: {
@@ -67,7 +68,7 @@ const SearchItem = defineComponent({
             onChange={(e) => {
               const checked = e.target.checked
               if (!checked && props.url === searchConfig.current.url) {
-                message.warning('不可隐藏当前使用搜索引擎')
+                globalToast.warning('不可隐藏当前使用搜索引擎')
               } else {
                 ctx.emit('update:modelValue', e.target.checked)
               }
@@ -96,7 +97,7 @@ const SearchItem = defineComponent({
                 icon={<DeleteOutlined />}
                 onClick={() => {
                   if (props.url === searchConfig.current.url) {
-                    message.warning('不可删除当前使用搜索引擎')
+                    globalToast.warning('不可删除当前使用搜索引擎')
                   } else {
                     const idx = searchConfig.customList.findIndex((el) => el.url === props.url)
                     searchConfig.customList.splice(idx, 1)

src/layout/useLayoutStore.ts

@@ -1,8 +1,9 @@
 import { defineStore } from 'pinia'
-import type { Layout } from './layout.types'
+import type { Block, Layout } from './layout.types'
 import { computed, reactive, ref, toRaw, watch } from 'vue'
 import db from '@/db'
 import useResource from './background/useResource'
+import { globalToast } from '@/main'
 
 const defaultLayout: Layout = {
   content: [
@@ -57,12 +58,26 @@ export default defineStore('layout', () => {
   )
   // 是让时间和搜索改变位置，使画面更紧凑 —— @/layout/grid
   const isCompact = ref(false)
+
+  // 添加图标
+  const addBlock = (block: Block, _page: number = -1) => {
+    const page = _page >= 0 ? _page : state.currentPage
+    console.log(state.content[state.current].pages[page])
+    if (!state.content[state.current].pages[page]) {
+      globalToast.warning('请先添加页面')
+      return
+    }
+    const pageList = state.content[state.current].pages[page].list
+    pageList.push(block)
+    globalToast.success('添加成功')
+  }
   return {
     state,
     ready,
     currentMode,
     currentPage,
     isCompact,
-    background
+    background,
+    addBlock
   }
 })

src/main.ts

@@ -7,14 +7,18 @@ import App from './App.vue'
 import getFp from './utils/getFp'
 import vOutsideClick from './utils/vOutsideClick'
 import dayjs from 'dayjs'
+import Toast, { useToast, type PluginOptions } from 'vue-toastification'
+import 'vue-toastification/dist/index.css'
 import 'dayjs/locale/zh-cn'
 dayjs.locale('zh-cn')
 
 const app = createApp(App)
+export const globalToast = useToast()
 
 // ! persist 利用 localstorage，请不要在大量数据时使用
 // 大量数据（扩张内容，文件），清直接使用 ./db.ts
 app.use(createPinia().use(persist))
+app.use(Toast)
 app.directive('outside-click', vOutsideClick)
 getFp().then((fp) => {
   console.info('fp:', fp)

src/user/UserPage.tsx

@@ -1,9 +1,10 @@
 import useRouterStore from '@/useRouterStore'
-import { Button, message, Modal, Tag, Tooltip } from 'ant-design-vue'
+import { Button, Modal, Tag } from 'ant-design-vue'
 import { defineComponent } from 'vue'
 import AvatarCircle from './AvatarCircle'
 import useUserStore from './useUserStore'
 import { EditOutlined, LoginOutlined, LogoutOutlined } from '@ant-design/icons-vue'
+import { globalToast } from '@/main'
 
 const labelStyle = 'w-16 text-black/60'
 
@@ -59,7 +60,7 @@ export default defineComponent(() => {
                   onOk: () => {
                     router.path = ''
                     user.logout()
-                    message.success('已退出登录')
+                    globalToast.success('已退出登录')
                   }
                 })
               }}

src/utils/ImageUploader.tsx

@@ -1,10 +1,10 @@
 import { defineComponent } from 'vue'
 import { OhVueIcon, addIcons } from 'oh-vue-icons'
 import { MdUpload, FaEye } from 'oh-vue-icons/icons'
-import { message } from 'ant-design-vue'
 import upload from './upload'
 import 'viewerjs/dist/viewer.css'
 import { api as showViewer } from 'v-viewer'
+import { globalToast } from '@/main'
 
 addIcons(MdUpload, FaEye)
 
@@ -47,7 +47,7 @@ export default defineComponent({
             if (!file) return
             console.log(file.size, props.size)
             if (file.size > props.size * 1000 * 1000) {
-              message.warn(`大小不得超过${props.size}mb`)
+              globalToast.warning(`大小不得超过${props.size}mb`)
               return
             }
             upload(file, 'test').then((res) => {