diff --git a/vue-admin-wonderful-next/.env b/vue-admin-wonderful-next/.env index 5bd9290..dcc98b3 100644 --- a/vue-admin-wonderful-next/.env +++ b/vue-admin-wonderful-next/.env @@ -1,5 +1,5 @@ # port 端口号 -VITE_PORT = 9000 +VITE_PORT = 10000 # open 运行 npm run dev 时自动打开浏览器 VITE_OPEN = false diff --git a/vue-admin-wonderful-next/source.d.ts b/vue-admin-wonderful-next/source.d.ts index f96d72e..d618613 100644 --- a/vue-admin-wonderful-next/source.d.ts +++ b/vue-admin-wonderful-next/source.d.ts @@ -2,4 +2,5 @@ declare const React: string; declare module '*.json'; declare module '*.png'; declare module '*.jpg'; -declare module '*.scss'; \ No newline at end of file +declare module '*.scss'; +declare module '*.ts'; \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/router/index.ts b/vue-admin-wonderful-next/src/router/index.ts index c261377..627d978 100644 --- a/vue-admin-wonderful-next/src/router/index.ts +++ b/vue-admin-wonderful-next/src/router/index.ts @@ -1,6 +1,6 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router" -const dynamicRoutes = [ +export const dynamicRoutes = [ { path: '/', component: () => import('/@/views/layout/index.vue'), @@ -11,185 +11,187 @@ const dynamicRoutes = [ isHide: false, icon: 'iconfont icon-shouye' }, - children: [{ - path: '/home', - component: () => import('/@/views/home/index.vue'), - meta: { - title: '首页', - isLink: '', - isHide: false, - icon: 'iconfont icon-shouye' - } - }, - { - path: '/system', - component: () => import('/@/views/docs/index.vue'), - redirect: '/system/menu', - meta: { - title: '系统设置', - isLink: '', - isHide: false, - icon: 'iconfont icon-xitongshezhi' - }, - children: [ - { - path: '/system/menu', - component: () => import('/@/views/docs/index.vue'), - meta: { - title: '菜单管理', - isLink: '', - isHide: false, - icon: 'iconfont icon-caidan' - } - }, - { - path: '/system/user', - component: () => import('/@/views/docs/index.vue'), - meta: { - title: '用户管理', - isLink: '', - isHide: false, - icon: 'iconfont icon-icon-' - } + children: [ + { + path: '/home', + component: () => import('/@/views/home/index.vue'), + meta: { + title: '首页', + isLink: '', + isHide: false, + icon: 'iconfont icon-shouye' } - ] + } + ] + }, + { + path: '/system', + component: () => import('/@/views/layout/index.vue'), + redirect: '/system/menu', + meta: { + title: '系统设置', + isLink: '', + isHide: false, + icon: 'iconfont icon-xitongshezhi' }, - { - path: '/limits', - component: () => import('/@/views/docs/index.vue'), - redirect: '/limits/frontEnd', - meta: { - title: '权限管理', - isLink: '', - isHide: false, - icon: 'iconfont icon-quanxian' + children: [ + { + path: '/system/menu', + component: () => import('/@/views/system/menu/index.vue'), + meta: { + title: '菜单管理', + isLink: '', + isHide: false, + icon: 'iconfont icon-caidan' + } }, - children: [ - { - path: '/limits/frontEnd', - component: () => import('/@/views/docs/index.vue'), - redirect: '/limits/frontEnd/page', - meta: { - title: '前端控制', - isLink: '', - isHide: false - }, - children: [ - { - path: '/limits/frontEnd/page', - component: () => import('/@/views/docs/index.vue'), - meta: { - title: '页面权限', - isLink: '', - isHide: false - } - }, - { - path: '/limits/frontEnd/btn', - component: () => import('/@/views/docs/index.vue'), - meta: { - title: '按钮权限', - isLink: '', - isHide: false - } + { + path: '/system/user', + component: () => import('/@/views/system/user/index.vue'), + meta: { + title: '用户管理', + isLink: '', + isHide: false, + icon: 'iconfont icon-icon-' + } + } + ] + }, + { + path: '/limits', + component: () => import('/@/views/docs/index.vue'), + redirect: '/limits/frontEnd', + meta: { + title: '权限管理', + isLink: '', + isHide: false, + icon: 'iconfont icon-quanxian' + }, + children: [ + { + path: '/limits/frontEnd', + component: () => import('/@/views/docs/index.vue'), + redirect: '/limits/frontEnd/page', + meta: { + title: '前端控制', + isLink: '', + isHide: false + }, + children: [ + { + path: '/limits/frontEnd/page', + component: () => import('/@/views/docs/index.vue'), + meta: { + title: '页面权限', + isLink: '', + isHide: false + } + }, + { + path: '/limits/frontEnd/btn', + component: () => import('/@/views/docs/index.vue'), + meta: { + title: '按钮权限', + isLink: '', + isHide: false } - ] - }, - { - path: '/limits/backEnd', - component: () => import('/@/views/docs/index.vue'), - meta: { - title: '后端控制', - isLink: '', - isHide: false } + ] + }, + { + path: '/limits/backEnd', + component: () => import('/@/views/docs/index.vue'), + meta: { + title: '后端控制', + isLink: '', + isHide: false } - ] - }, - { - path: '/fun', - component: () => import('/@/views/docs copy 1/index.vue'), - meta: { - title: '功能', - isLink: '', - isHide: false, - icon: 'iconfont icon-crew_feature' } - }, - { - path: '/pages', - component: () => import('/@/views/docs copy 1/index.vue'), - meta: { - title: '页面', - isLink: '', - isHide: false, - icon: 'iconfont icon-fuzhiyemian' - } - }, - { - path: '/components', - component: () => import('/@/views/docs copy 1/index.vue'), - meta: { - title: '组件', - isLink: '', - isHide: false, - icon: 'iconfont icon-zujian' - } - }, - { - path: '/chart', - component: () => import('/@/views/docs copy 1/index.vue'), - meta: { - title: '大数据图表', - isLink: '', - isHide: false, - icon: 'iconfont icon-ico_shuju' - } - }, - { - path: '/docs1', - component: () => import('/@/views/docs copy 1/index.vue'), - meta: { - title: '个人中心', - isLink: '', - isHide: false, - icon: 'iconfont icon-gerenzhongxin' - } - }, - { - path: '/docs2', - component: () => import('/@/views/docs copy 2/index.vue'), - meta: { - title: '工具类集合', - isLink: '', - isHide: false, - icon: 'iconfont icon-gongju' - } - }, - { - path: '/docs3', - component: () => import('/@/views/docs copy 3/index.vue'), - meta: { - title: '外链', - isLink: '', - isHide: false, - icon: 'iconfont icon-caozuo-wailian' - } - }, - { - path: '/iframe', - component: () => import('/@/views/docs copy 3/index.vue'), - meta: { - title: '内嵌 iframe', - isLink: '', - isHide: false, - icon: 'iconfont icon-neiqianshujuchucun' - } - }] + ] + }, + { + path: '/fun', + component: () => import('/@/views/docs copy 1/index.vue'), + meta: { + title: '功能', + isLink: '', + isHide: false, + icon: 'iconfont icon-crew_feature' + } + }, + { + path: '/pages', + component: () => import('/@/views/docs copy 1/index.vue'), + meta: { + title: '页面', + isLink: '', + isHide: false, + icon: 'iconfont icon-fuzhiyemian' + } + }, + { + path: '/components', + component: () => import('/@/views/docs copy 1/index.vue'), + meta: { + title: '组件', + isLink: '', + isHide: false, + icon: 'iconfont icon-zujian' + } + }, + { + path: '/chart', + component: () => import('/@/views/docs copy 1/index.vue'), + meta: { + title: '大数据图表', + isLink: '', + isHide: false, + icon: 'iconfont icon-ico_shuju' + } + }, + { + path: '/docs1', + component: () => import('/@/views/docs copy 1/index.vue'), + meta: { + title: '个人中心', + isLink: '', + isHide: false, + icon: 'iconfont icon-gerenzhongxin' + } + }, + { + path: '/docs2', + component: () => import('/@/views/docs copy 2/index.vue'), + meta: { + title: '工具类集合', + isLink: '', + isHide: false, + icon: 'iconfont icon-gongju' + } + }, + { + path: '/docs3', + component: () => import('/@/views/docs copy 3/index.vue'), + meta: { + title: '外链', + isLink: '', + isHide: false, + icon: 'iconfont icon-caozuo-wailian' + } + }, + { + path: '/iframe', + component: () => import('/@/views/docs copy 3/index.vue'), + meta: { + title: '内嵌 iframe', + isLink: '', + isHide: false, + icon: 'iconfont icon-neiqianshujuchucun' + } } ] -const staticRoutes: Array = [ +export const staticRoutes: Array = [ { path: '/login', component: () => import('/@/views/login/index.vue'), diff --git a/vue-admin-wonderful-next/src/store/index.ts b/vue-admin-wonderful-next/src/store/index.ts index c31144e..a980000 100644 --- a/vue-admin-wonderful-next/src/store/index.ts +++ b/vue-admin-wonderful-next/src/store/index.ts @@ -1,6 +1,7 @@ import { InjectionKey } from 'vue' import { createStore, useStore as baseUseStore, Store } from 'vuex' -import themeConfig from '../utils/themeConfig' +import themeConfig from '/@/utils/themeConfig.ts' +import { dynamicRoutes } from '/@/router/index.ts' export interface RootStateTypes { themeConfig: { isDrawer: boolean, @@ -40,23 +41,31 @@ export interface RootStateTypes { animation: string, columnsAsideStyle: string, layout: string - } + }, + routes: Array } export const key: InjectionKey> = Symbol() export const store = createStore({ state: { - themeConfig + themeConfig, + routes: [] }, mutations: { getThemeConfig(state: any, data: object) { state.themeConfig = Object.assign({}, data) + }, + getRoutes(state: any, data: Array) { + state.routes = data } }, actions: { setThemeConfig({ commit }, data: object) { commit('getThemeConfig', data) + }, + async setRoutes({ commit }) { + commit('getRoutes', dynamicRoutes) } } }) diff --git a/vue-admin-wonderful-next/src/theme/common/transition.scss b/vue-admin-wonderful-next/src/theme/common/transition.scss index 5dde045..6c62a73 100644 --- a/vue-admin-wonderful-next/src/theme/common/transition.scss +++ b/vue-admin-wonderful-next/src/theme/common/transition.scss @@ -37,15 +37,16 @@ ------------------------------- */ .breadcrumb-enter-active, .breadcrumb-leave-active { - will-change: transform; - transition: all 0.3s ease; - position: absolute; - opacity: 0; + transition: all 0.3s; } .breadcrumb-enter-from, -.breadcrumb-leave-to { +.breadcrumb-leave-active { + opacity: 0; transform: translateX(20px); } +.breadcrumb-leave-active { + position: absolute; +} /* logo 过渡动画 ------------------------------- */ diff --git a/vue-admin-wonderful-next/src/theme/mixins/mixins.scss b/vue-admin-wonderful-next/src/theme/mixins/mixins.scss index 6e0b0d7..41b660c 100644 --- a/vue-admin-wonderful-next/src/theme/mixins/mixins.scss +++ b/vue-admin-wonderful-next/src/theme/mixins/mixins.scss @@ -16,3 +16,29 @@ -webkit-line-clamp: $line; -webkit-box-orient: vertical; } + +/* 滚动条(页面未使用) div 中使用: + ------------------------------- */ +// .test { +// @include scrollBar; +// } +@mixin scrollBar { + // 滚动条凹槽的颜色,还可以设置边框属性 + &::-webkit-scrollbar-track-piece { + background-color: #f8f8f8; + } + // 滚动条的宽度 + &::-webkit-scrollbar { + width: 9px; + height: 9px; + } + // 滚动条的设置 + &::-webkit-scrollbar-thumb { + background-color: #dddddd; + background-clip: padding-box; + min-height: 28px; + } + &::-webkit-scrollbar-thumb:hover { + background-color: #bbb; + } +} diff --git a/vue-admin-wonderful-next/src/utils/setIconfont.ts b/vue-admin-wonderful-next/src/utils/setIconfont.ts index 872ba01..0e1f7a9 100644 --- a/vue-admin-wonderful-next/src/utils/setIconfont.ts +++ b/vue-admin-wonderful-next/src/utils/setIconfont.ts @@ -1,5 +1,5 @@ // 字体图标 url -const urlArr = ["//at.alicdn.com/t/font_2298093_0pyjdtieuwp.css"] +const urlArr = ["//at.alicdn.com/t/font_2298093_anmim41evr5.css"] // 动态设置字体图标 export function setIconfont() { diff --git a/vue-admin-wonderful-next/src/views/home/index.vue b/vue-admin-wonderful-next/src/views/home/index.vue index 6fb071d..a34de58 100644 --- a/vue-admin-wonderful-next/src/views/home/index.vue +++ b/vue-admin-wonderful-next/src/views/home/index.vue @@ -1,89 +1,101 @@ \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/views/layout/component/aside.vue b/vue-admin-wonderful-next/src/views/layout/component/aside.vue index 01e8bbd..af44d40 100644 --- a/vue-admin-wonderful-next/src/views/layout/component/aside.vue +++ b/vue-admin-wonderful-next/src/views/layout/component/aside.vue @@ -17,7 +17,6 @@ import { ref, onBeforeMount, } from "vue"; -import { useRouter } from "vue-router"; import { useStore } from "/@/store/index.ts"; import Logo from "/@/views/layout/logo/index.vue"; import Vertical from "/@/views/layout/navMenu/vertical.vue"; @@ -26,20 +25,14 @@ export default { components: { Logo, Vertical }, setup() { const { proxy } = getCurrentInstance(); - const router = useRouter(); const store = useStore(); const state = reactive({ menuList: [], }); // 设置/过滤路由(非静态路由/是否显示在菜单中) const setFilterRoutes = () => { - const routesList = router.getRoutes(); - routesList.map((route) => { - if (route.path === "/") { - state.menuList = filterRoutesFun(route.children); - console.log(filterRoutesFun(route.children)); - } - }); + store.dispatch("setRoutes"); + state.menuList = filterRoutesFun(store.state.routes); }; // 路由过滤递归函数 const filterRoutesFun = (arr: Array) => { diff --git a/vue-admin-wonderful-next/src/views/layout/component/main.vue b/vue-admin-wonderful-next/src/views/layout/component/main.vue index 0be83c9..cf7626c 100644 --- a/vue-admin-wonderful-next/src/views/layout/component/main.vue +++ b/vue-admin-wonderful-next/src/views/layout/component/main.vue @@ -2,15 +2,7 @@ - - -
- - - -
-
-
+