diff --git a/package.json b/package.json
index 4300e39..0793cc9 100644
--- 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",
diff --git a/src/layout/adder/CustomAdder.tsx b/src/layout/adder/CustomAdder.tsx
index d8a2f9d..15ac15f 100644
--- 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({
}}
>
- {props.text ? props.text.substring(0, 2) : 'A'}
+ {props.text
+ ? props.text.substring(0, 2)
+ : props.name.substring(0, 2).toLocaleUpperCase() || 'A'}
{props.value === 1 && (
{
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(() => {
+ {form.type === 1 && (
+ <>
+
+
+
+
+
+
+
+
+
+ >
+ )}
- }>
+ }
+ 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)
+ }}
+ >
确定
diff --git a/src/layout/adder/useLink.ts b/src/layout/adder/useLink.ts
index ee39fcd..773ce93 100644
--- a/src/layout/adder/useLink.ts
+++ b/src/layout/adder/useLink.ts
@@ -22,8 +22,6 @@ export default function useLink(url: Ref) {
(val) => {
if (!val) return
const tag = val.match(/(?<=http(s?):\/\/)[^/]*/g)?.[0] || val
- console.log(tag);
-
request('GET', `/api/app/pic/info/${tag}`).then((res) => {
Object.assign(info, res)
})
diff --git a/src/layout/header/search/SearchPage.tsx b/src/layout/header/search/SearchPage.tsx
index d909aad..9112441 100644
--- 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={}
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)
diff --git a/src/layout/useLayoutStore.ts b/src/layout/useLayoutStore.ts
index c6d5987..44d45dd 100644
--- 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
}
})
diff --git a/src/main.ts b/src/main.ts
index e65afbc..6c56604 100644
--- 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)
diff --git a/src/user/UserPage.tsx b/src/user/UserPage.tsx
index 1ff0b22..335d157 100644
--- 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('已退出登录')
}
})
}}
diff --git a/src/utils/ImageUploader.tsx b/src/utils/ImageUploader.tsx
index 060e515..070d580 100644
--- 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) => {