采用全局提示框

2024-09-18 16:27:43 +08:00 · 2024-09-18 16:27:43 +08:00 · 61efb86514
parent c2ba7f26af
commit 61efb86514
8 changed files with 98 additions and 20 deletions
--- a/package.json
+++ b/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",
--- a/src/layout/adder/CustomAdder.tsx
+++ b/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',
-    color: 'rgba(255,255,255,1)',
+    background: 'rgb(247,169,78)',
+    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>
--- a/src/layout/adder/useLink.ts
+++ b/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)
      })
--- a/src/layout/header/search/SearchPage.tsx
+++ b/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)
--- a/src/layout/useLayoutStore.ts
+++ b/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
  }
 })
--- a/src/main.ts
+++ b/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)
--- a/src/user/UserPage.tsx
+++ b/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('已退出登录')
                  }
                })
              }}
--- a/src/utils/ImageUploader.tsx
+++ b/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) => {