diff --git a/src/assets/images/expand.svg b/src/assets/images/expand.svg new file mode 100644 index 0000000..3e62d10 --- /dev/null +++ b/src/assets/images/expand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/n_debug.svg b/src/assets/images/menuIcon/n_debug.svg new file mode 100644 index 0000000..d889929 --- /dev/null +++ b/src/assets/images/menuIcon/n_debug.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/n_expe.svg b/src/assets/images/menuIcon/n_expe.svg new file mode 100644 index 0000000..ea31df4 --- /dev/null +++ b/src/assets/images/menuIcon/n_expe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/n_home.svg b/src/assets/images/menuIcon/n_home.svg new file mode 100644 index 0000000..af15d9d --- /dev/null +++ b/src/assets/images/menuIcon/n_home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/n_liquid.svg b/src/assets/images/menuIcon/n_liquid.svg new file mode 100644 index 0000000..016e6a3 --- /dev/null +++ b/src/assets/images/menuIcon/n_liquid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/n_liquid_config.svg b/src/assets/images/menuIcon/n_liquid_config.svg new file mode 100644 index 0000000..5e8da40 --- /dev/null +++ b/src/assets/images/menuIcon/n_liquid_config.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/n_log.svg b/src/assets/images/menuIcon/n_log.svg new file mode 100644 index 0000000..d6a4535 --- /dev/null +++ b/src/assets/images/menuIcon/n_log.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/n_ore.svg b/src/assets/images/menuIcon/n_ore.svg new file mode 100644 index 0000000..0f09f4a --- /dev/null +++ b/src/assets/images/menuIcon/n_ore.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/n_setting.svg b/src/assets/images/menuIcon/n_setting.svg new file mode 100644 index 0000000..73a9a45 --- /dev/null +++ b/src/assets/images/menuIcon/n_setting.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/n_user.svg b/src/assets/images/menuIcon/n_user.svg new file mode 100644 index 0000000..84a6b4a --- /dev/null +++ b/src/assets/images/menuIcon/n_user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/s_debug.svg b/src/assets/images/menuIcon/s_debug.svg new file mode 100644 index 0000000..f7cf8b0 --- /dev/null +++ b/src/assets/images/menuIcon/s_debug.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/s_expe.svg b/src/assets/images/menuIcon/s_expe.svg new file mode 100644 index 0000000..2b7f644 --- /dev/null +++ b/src/assets/images/menuIcon/s_expe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/s_home.svg b/src/assets/images/menuIcon/s_home.svg new file mode 100644 index 0000000..a627913 --- /dev/null +++ b/src/assets/images/menuIcon/s_home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/s_liquid.svg b/src/assets/images/menuIcon/s_liquid.svg new file mode 100644 index 0000000..eac9765 --- /dev/null +++ b/src/assets/images/menuIcon/s_liquid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/s_liquid_config.svg b/src/assets/images/menuIcon/s_liquid_config.svg new file mode 100644 index 0000000..c9f96f9 --- /dev/null +++ b/src/assets/images/menuIcon/s_liquid_config.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/s_log.svg b/src/assets/images/menuIcon/s_log.svg new file mode 100644 index 0000000..bdb7726 --- /dev/null +++ b/src/assets/images/menuIcon/s_log.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/s_ore.svg b/src/assets/images/menuIcon/s_ore.svg new file mode 100644 index 0000000..8879f90 --- /dev/null +++ b/src/assets/images/menuIcon/s_ore.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/s_setting.svg b/src/assets/images/menuIcon/s_setting.svg new file mode 100644 index 0000000..8cd6722 --- /dev/null +++ b/src/assets/images/menuIcon/s_setting.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/menuIcon/s_user.svg b/src/assets/images/menuIcon/s_user.svg new file mode 100644 index 0000000..3bde347 --- /dev/null +++ b/src/assets/images/menuIcon/s_user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layouts/default.vue b/src/layouts/default.vue index f48f08e..dcab73d 100644 --- a/src/layouts/default.vue +++ b/src/layouts/default.vue @@ -26,6 +26,7 @@ onUnmounted(() => {
@@ -53,10 +54,16 @@ onUnmounted(() => {
- -
- - {{ item.meta!.title }} + +
+ + {{ item.meta!.title }}
@@ -96,6 +103,15 @@ onUnmounted(() => { img { height: 100%; } + .expand-icon { + height: 15px; + transition: all 0.3s; + } + .fold-icon { + height: 15px; + transform: rotate(90deg); + transition: all 0.3s; + } } .header-right { display: flex; @@ -129,13 +145,13 @@ onUnmounted(() => { } } .aside { - width: 150px; + width: 170px; overflow: auto; padding-left: 10px; + //transition: width 0.05s ease; .aside-item { width: 100%; height: 50px; - background: #fff; border-radius: 10px; color: #1989FA; margin: 10px 0; @@ -146,12 +162,29 @@ onUnmounted(() => { height: 80%; margin-right: 20px; } + .text { + transition: opacity 0.3s ease; + } } .aside-item-active { background: #1989FA; color: #fff; } } + +.aside-off { + width: 70px; + //transition: width 0.05s ease; + .aside-item { + .text { + opacity: 0 + } + } + .aside-item-active { + background: rgba(0,0,0,0); + color: #fff; + } +} .user-dropdown-item { display: flex; align-items: center; diff --git a/src/router/routes.ts b/src/router/routes.ts index d73496b..ba52e80 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -1,5 +1,24 @@ import type { RouteRecordRaw } from 'vue-router' +import n_debug from 'assets/images/menuIcon/n_debug.svg' +import n_expe from 'assets/images/menuIcon/n_expe.svg' +import n_home from 'assets/images/menuIcon/n_home.svg' +import n_liquid from 'assets/images/menuIcon/n_liquid.svg' +import n_liquid_config from 'assets/images/menuIcon/n_liquid_config.svg' +import n_log from 'assets/images/menuIcon/n_log.svg' +import n_ore from 'assets/images/menuIcon/n_ore.svg' +import n_setting from 'assets/images/menuIcon/n_setting.svg' +import n_user from 'assets/images/menuIcon/n_user.svg' +import s_debug from 'assets/images/menuIcon/s_debug.svg' +import s_expe from 'assets/images/menuIcon/s_expe.svg' +import s_home from 'assets/images/menuIcon/s_home.svg' +import s_liquid from 'assets/images/menuIcon/s_liquid.svg' +import s_liquid_config from 'assets/images/menuIcon/s_liquid_config.svg' +import s_log from 'assets/images/menuIcon/s_log.svg' +import s_ore from 'assets/images/menuIcon/s_ore.svg' +import s_setting from 'assets/images/menuIcon/s_setting.svg' +import s_user from 'assets/images/menuIcon/s_user.svg' + const authRoutes: RouteRecordRaw[] = [ { path: '/home', @@ -7,27 +26,101 @@ const authRoutes: RouteRecordRaw[] = [ component: () => import('views/home/index.vue'), meta: { isDefault: true, - title: '首页', + title: '实验操作', + icon: n_home, + activeIcon: s_home, }, }, { - path: '/craft', - name: 'craft', - component: () => import('views/craft/index.vue'), + path: '/systemLog', + name: 'systemLog', + component: () => import('views/home/index.vue'), meta: { isDefault: true, - title: '工艺', + title: '日志记录', + icon: n_log, + activeIcon: s_log, + }, + }, + { + path: '/experimentLog', + name: 'experimentLog', + component: () => import('views/home/index.vue'), + meta: { + isDefault: true, + title: '实验记录', + icon: n_expe, + activeIcon: s_expe, + }, + }, + { + path: '/liquid', + name: 'liquid', + component: () => import('views/home/index.vue'), + meta: { + isDefault: true, + title: '加液配置', + icon: n_liquid, + activeIcon: s_liquid, + }, + }, + { + path: '/solution', + name: 'solution', + component: () => import('views/home/index.vue'), + meta: { + isDefault: true, + title: '溶液管理', + icon: n_liquid_config, + activeIcon: s_liquid_config, + }, + }, + { + path: '/ore', + name: 'ore', + component: () => import('views/home/index.vue'), + meta: { + isDefault: true, + title: '矿石管理', + icon: n_ore, + activeIcon: s_ore, + }, + }, + { + path: '/user', + name: 'user', + component: () => import('views/home/index.vue'), + meta: { + isDefault: true, + title: '用户管理', + icon: n_user, + activeIcon: s_user, + }, + }, + { + path: '/setting', + name: 'setting', + component: () => import('views/home/index.vue'), + meta: { + isDefault: true, + title: '系统管理', + icon: n_setting, + activeIcon: s_setting, }, }, { path: '/debug', name: 'debug', - component: () => import('views/debug/index.vue'), + component: () => import('views/home/index.vue'), meta: { + isDefault: true, title: '调试', + icon: n_debug, + activeIcon: s_debug, }, }, ] + const routes: RouteRecordRaw[] = [ { path: '/login', diff --git a/src/stores/systemStore.ts b/src/stores/systemStore.ts index c39d226..e561dcd 100644 --- a/src/stores/systemStore.ts +++ b/src/stores/systemStore.ts @@ -9,6 +9,7 @@ export const useSystemStore = defineStore('system', { systemUser: { username: '', }, + menuExpand: true, isDebug: import.meta.env.FT_NODE_ENV === 'dev', streamVisible: false, systemList: [], @@ -17,6 +18,9 @@ export const useSystemStore = defineStore('system', { updateStreamVisible(bool: boolean) { this.streamVisible = bool }, + updateMenuExpand() { + this.menuExpand = !this.menuExpand + }, updateSystemUser(data: System.SystemUser) { this.systemUser = data }, diff --git a/src/types/System.d.ts b/src/types/System.d.ts index a99d015..cea7769 100644 --- a/src/types/System.d.ts +++ b/src/types/System.d.ts @@ -4,6 +4,7 @@ declare namespace System { systemList: Socket.NotificationData[] streamVisible: boolean isDebug: boolean + menuExpand: boolean systemUser: SystemUser } interface SystemUser {