diff --git a/frontend/package.json b/frontend/package.json index aa46dcb..fb2bdf2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,8 +15,6 @@ "dependencies": { "@element-plus/icons-vue": "^2.3.1", "@vueuse/core": "^10.4.1", - "@wangeditor/editor": "^5.1.23", - "@wangeditor/editor-for-vue": "^5.1.12", "axios": "^1.7.3", "crypto-js": "^4.2.0", "dayjs": "^1.11.9", diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 20968af..323e4e5 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,54 +1,54 @@ - diff --git a/frontend/src/components/SelectIcon/index.scss b/frontend/src/components/SelectIcon/index.scss new file mode 100644 index 0000000..dbceb64 --- /dev/null +++ b/frontend/src/components/SelectIcon/index.scss @@ -0,0 +1,39 @@ +.icon-box { + width: 100%; + .el-button { + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + color: var(--el-text-color-regular); + } + :deep(.el-dialog__body) { + padding: 25px 20px 20px; + .el-input { + margin-bottom: 10px; + } + .icon-list { + display: grid; + grid-template-columns: repeat(auto-fill, 115px); + justify-content: space-evenly; + max-height: 70vh; + .icon-item { + display: flex; + flex-direction: column; + align-items: center; + width: 42px; + padding: 20px 30px; + cursor: pointer; + transition: all 0.2s; + &:hover { + transform: scale(1.3); + } + span { + margin-top: 5px; + line-height: 20px; + text-align: center; + } + } + } + } +} diff --git a/frontend/src/components/SelectIcon/index.vue b/frontend/src/components/SelectIcon/index.vue new file mode 100644 index 0000000..169f5b1 --- /dev/null +++ b/frontend/src/components/SelectIcon/index.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 96e15a0..5c339ca 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -25,7 +25,7 @@ import * as Icons from "@element-plus/icons-vue"; // custom directives import directives from "@/directives/index"; // vue Router -import Router from "@/routers"; +import router from "@/routers"; // vue i18n import I18n from "@/languages/index"; // pinia store @@ -48,13 +48,13 @@ const setupAll = async () => { app .use(ElementPlus) .use(directives) - .use(Router) // 使用路由 + .use(router) // 使用路由 .use(I18n) .use(pinia) .use(registerGlobComp) // 使用全局自定义组件 //待路由初始化完毕后,挂载app - await Router.isReady() + await router.isReady() } //挂载app diff --git a/frontend/src/routers/index.ts b/frontend/src/routers/index.ts index 0daccb6..2770e5a 100644 --- a/frontend/src/routers/index.ts +++ b/frontend/src/routers/index.ts @@ -1,17 +1,17 @@ -import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"; -import { useUserStore } from "@/stores/modules/user"; -import { useAuthStore } from "@/stores/modules/auth"; -import { LOGIN_URL, ROUTER_WHITE_LIST } from "@/config"; -import { initDynamicRouter } from "@/routers/modules/dynamicRouter"; -import { staticRouter, errorRouter } from "@/routers/modules/staticRouter"; -import NProgress from "@/config/nprogress"; +import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router' +import { useUserStore } from '@/stores/modules/user' +import { useAuthStore } from '@/stores/modules/auth' +import { LOGIN_URL, ROUTER_WHITE_LIST } from '@/config' +import { initDynamicRouter } from '@/routers/modules/dynamicRouter' +import { staticRouter, errorRouter } from '@/routers/modules/staticRouter' +import NProgress from '@/config/nprogress' -const mode = import.meta.env.VITE_ROUTER_MODE; +const mode = import.meta.env.VITE_ROUTER_MODE const routerMode = { hash: () => createWebHashHistory(), - history: () => createWebHistory() -}; + history: () => createWebHistory(), +} /** * @description 📚 路由参数配置简介 @@ -31,77 +31,76 @@ const routerMode = { * */ const router = createRouter({ history: routerMode[mode](), - routes: [...staticRouter, ...errorRouter], + routes: [...staticRouter], // 不区分路由大小写,非严格模式下提供了更宽松的路径匹配 strict: false, // 页面刷新时,滚动条位置还原 - scrollBehavior: () => ({ left: 0, top: 0 }) -}); + scrollBehavior: () => ({ left: 0, top: 0 }), +}) /** * @description 路由拦截 beforeEach * */ router.beforeEach(async (to, from, next) => { - const userStore = useUserStore(); - const authStore = useAuthStore(); - + const userStore = useUserStore() + const authStore = useAuthStore() // 1.NProgress 开始 - NProgress.start(); + NProgress.start() // 2.动态设置标题 - const title = import.meta.env.VITE_GLOB_APP_TITLE; - document.title = to.meta.title ? `${to.meta.title} - ${title}` : title; + const title = import.meta.env.VITE_GLOB_APP_TITLE + document.title = to.meta.title ? `${to.meta.title} - ${title}` : title // 3.判断是访问登陆页,有 Token 就在当前页面,没有 Token 重置路由到登陆页 if (to.path.toLocaleLowerCase() === LOGIN_URL) { - if (userStore.token) return next(from.fullPath); - resetRouter(); - return next(); + if (userStore.token) return next(from.fullPath) + resetRouter() + return next() } // 4.判断访问页面是否在路由白名单地址(静态路由)中,如果存在直接放行 - if (ROUTER_WHITE_LIST.includes(to.path)) return next(); + if (ROUTER_WHITE_LIST.includes(to.path)) return next() // 5.判断是否有 Token,没有重定向到 login 页面 - if (!userStore.token) return next({ path: LOGIN_URL, replace: true }); + if (!userStore.token) return next({ path: LOGIN_URL, replace: true }) // 6.如果没有菜单列表,就重新请求菜单列表并添加动态路由 if (!authStore.authMenuListGet.length) { - await initDynamicRouter(); - return next({ ...to, replace: true }); + await initDynamicRouter() + return next({ ...to, replace: true }) } // 7.存储 routerName 做按钮权限筛选 - authStore.setRouteName(to.name as string); + authStore.setRouteName(to.name as string) // 8.正常访问页面 - next(); -}); + next() +}) /** * @description 重置路由 * */ export const resetRouter = () => { - const authStore = useAuthStore(); + const authStore = useAuthStore() authStore.flatMenuListGet.forEach(route => { - const { name } = route; - if (name && router.hasRoute(name)) router.removeRoute(name); - }); -}; + const { name } = route + if (name && router.hasRoute(name)) router.removeRoute(name) + }) +} /** * @description 路由跳转错误 * */ router.onError(error => { - NProgress.done(); - console.warn("路由错误", error.message); -}); + NProgress.done() + console.warn('路由错误', error.message) +}) /** * @description 路由跳转结束 * */ router.afterEach(() => { - NProgress.done(); -}); + NProgress.done() +}) -export default router; +export default router diff --git a/frontend/src/routers/modules/staticRouter.ts b/frontend/src/routers/modules/staticRouter.ts index 64366b7..27e1303 100644 --- a/frontend/src/routers/modules/staticRouter.ts +++ b/frontend/src/routers/modules/staticRouter.ts @@ -41,50 +41,38 @@ export const staticRouter: RouteRecordRaw[] = [ isKeepAlive: false, }, }, + // 错误页面路由 + { + path: "/403", + name: "403", + component: () => import("@/components/ErrorMessage/403.vue"), + meta: { + title: "403页面", + }, + }, + { + path: "/404", + name: "404", + component: () => import("@/components/ErrorMessage/404.vue"), + meta: { + title: "404页面", + }, + }, + { + path: "/500", + name: "500", + component: () => import("@/components/ErrorMessage/500.vue"), + meta: { + title: "500页面", + }, + }, + // Resolve refresh page, route warnings + { + path: "/:pathMatch(.*)*", + component: () => import("@/components/ErrorMessage/404.vue"), + }, ], }, ], }, ]; - -/** - * errorRouter (错误页面路由) - */ -export const errorRouter = [ - { - path: "/layout", - name: "layout", - component: Layout, - children: [ - { - path: "/403", - name: "403", - component: () => import("@/components/ErrorMessage/403.vue"), - meta: { - title: "403页面", - }, - }, - { - path: "/404", - name: "404", - component: () => import("@/components/ErrorMessage/404.vue"), - meta: { - title: "404页面", - }, - }, - { - path: "/500", - name: "500", - component: () => import("@/components/ErrorMessage/500.vue"), - meta: { - title: "500页面", - }, - }, - // Resolve refresh page, route warnings - { - path: "/:pathMatch(.*)*", - component: () => import("@/components/ErrorMessage/404.vue"), - }, - ], - }, -]; diff --git a/frontend/src/views/home/components/tree.vue b/frontend/src/views/home/components/tree.vue index 96dd15c..df366dd 100644 --- a/frontend/src/views/home/components/tree.vue +++ b/frontend/src/views/home/components/tree.vue @@ -1,26 +1,28 @@