feat: menu部分调整

.env.development

@@ -0,0 +1,11 @@
+# 页面标题
+VITE_APP_TITLE = LibraAI智能体运营平台
+
+# 开发环境配置
+VITE_APP_ENV = 'development'
+
+# 管理系统/开发环境
+VITE_APP_BASE_API =  http://10.0.0.28:8001/
+
+VITE_APP_BASE_TEST = http://10.0.0.28:8080/
+VITE_APP_BASE_PROD = http://192.168.9.54:8080/

.env.production

@@ -0,0 +1,14 @@
+# 页面标题
+VITE_APP_TITLE = LibraAI智能体运营平台
+
+# 生产环境配置
+VITE_APP_ENV = 'production'
+
+# 管理系统/生产环境
+VITE_APP_BASE_API = 'http://192.168.40.18:8080'
+
+# 是否在打包时开启压缩，支持 gzip 和 brotli
+VITE_BUILD_COMPRESS = gzip
+
+VITE_APP_BASE_TEST = http://10.0.0.28:8080/
+VITE_APP_BASE_PROD = http://192.168.9.54:8080/

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+**/*.log
+
+tests/**/coverage/
+tests/e2e/reports
+selenium-debug.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.local
+
+package-lock.json
+yarn.lock

package.json

@@ -7,8 +7,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build:prod": "vite build",
-    "build:stage": "vite build --mode staging",
+    "build:prod": "vite build --mode production",
     "preview": "vite preview"
   },
   "repository": {
@@ -34,11 +33,12 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "5.0.5",
+    "naive-ui": "^2.40.1",
     "sass": "1.77.5",
     "unplugin-auto-import": "0.17.6",
+    "unplugin-vue-setup-extend-plus": "1.0.1",
     "vite": "5.3.2",
     "vite-plugin-compression": "0.5.1",
-    "vite-plugin-svg-icons": "2.0.1",
-    "unplugin-vue-setup-extend-plus": "1.0.1"
+    "vite-plugin-svg-icons": "2.0.1"
   }
 }

src/api/login.js

@@ -6,7 +6,8 @@ export function login(username, password, code, uuid) {
     username,
     password,
     code,
-    uuid
+    uuid,
+    type: 1
   }
   return request({
     url: '/login',

src/assets/icons/svg/analyse-active.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M15.375 2.25H2.625C2.00368 2.25 1.5 2.75368 1.5 3.375V12.375C1.5 12.9963 2.00368 13.5 2.625 13.5H15.375C15.9963 13.5 16.5 12.9963 16.5 12.375V3.375C16.5 2.75368 15.9963 2.25 15.375 2.25Z" fill="#165DFF" stroke="#165DFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 13.5V16.125" stroke="#165DFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 5.25L6 10.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3.75 16.125H14.25" stroke="#165DFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5.625 7.5C6.24632 7.5 6.75 6.99632 6.75 6.375C6.75 5.75368 6.24632 5.25 5.625 5.25C5.00368 5.25 4.5 5.75368 4.5 6.375C4.5 6.99632 5.00368 7.5 5.625 7.5Z" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12.375 10.5C12.9963 10.5 13.5 9.99632 13.5 9.375C13.5 8.75368 12.9963 8.25 12.375 8.25C11.7537 8.25 11.25 8.75368 11.25 9.375C11.25 9.99632 11.7537 10.5 12.375 10.5Z" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icons/svg/analyse.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M15.375 2.25H2.625C2.00368 2.25 1.5 2.75368 1.5 3.375V12.375C1.5 12.9963 2.00368 13.5 2.625 13.5H15.375C15.9963 13.5 16.5 12.9963 16.5 12.375V3.375C16.5 2.75368 15.9963 2.25 15.375 2.25Z" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 13.5V16.125" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 5.25L6 10.5" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3.75 16.125H14.25" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5.625 7.5C6.24632 7.5 6.75 6.99632 6.75 6.375C6.75 5.75368 6.24632 5.25 5.625 5.25C5.00368 5.25 4.5 5.75368 4.5 6.375C4.5 6.99632 5.00368 7.5 5.625 7.5Z" stroke="#4E5969" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12.375 10.5C12.9963 10.5 13.5 9.99632 13.5 9.375C13.5 8.75368 12.9963 8.25 12.375 8.25C11.7537 8.25 11.25 8.75368 11.25 9.375C11.25 9.99632 11.7537 10.5 12.375 10.5Z" stroke="#4E5969" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg> 

src/assets/icons/svg/call-active.svg

@@ -0,0 +1,5 @@
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M15.6674 7.72748C15.7622 7.09155 15.7311 6.44051 15.5741 5.81453C15.3668 4.98758 14.9397 4.20443 14.293 3.55774C13.6463 2.91105 12.8632 2.48403 12.0363 2.27668C11.4103 2.11971 10.7592 2.08863 10.1233 2.18342" stroke="#165DFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12.8211 7.42633C12.9227 6.7451 12.7112 6.02623 12.1868 5.50183C11.6624 4.97743 10.9435 4.76596 10.2623 4.86751" stroke="#165DFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5.39076 3.29785C5.66323 3.29785 5.91426 3.44561 6.04648 3.68382L6.96392 5.33638C7.08403 5.55275 7.08966 5.81447 6.979 6.03583L6.0952 7.80343C6.0952 7.80343 6.35132 9.12024 7.42322 10.1921C8.49512 11.264 9.80751 11.5157 9.80751 11.5157L11.5748 10.6321C11.7964 10.5213 12.0583 10.5271 12.2747 10.6474L13.9319 11.5688C14.1699 11.7011 14.3175 11.952 14.3175 12.2243V14.1268C14.3175 15.0957 13.4176 15.7955 12.4995 15.4857C10.6141 14.8495 7.6873 13.6382 5.83225 11.7831C3.97716 9.92806 2.76583 7.0013 2.12963 5.11584C1.81987 4.1978 2.51966 3.29785 3.48853 3.29785H5.39076Z" fill="#165DFF" stroke="#165DFF" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

src/assets/icons/svg/call.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M15.6674 7.72748C15.7622 7.09155 15.7311 6.44051 15.5741 5.81453C15.3668 4.98758 14.9397 4.20443 14.293 3.55774C13.6463 2.91105 12.8632 2.48403 12.0363 2.27668C11.4103 2.11971 10.7592 2.08863 10.1233 2.18342" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12.821 7.4263C12.9225 6.74507 12.7111 6.0262 12.1867 5.5018C11.6623 4.9774 10.9434 4.76593 10.2622 4.86748" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5.39076 3.29785C5.66323 3.29785 5.91426 3.44561 6.04648 3.68382L6.96392 5.33638C7.08403 5.55275 7.08966 5.81447 6.979 6.03583L6.0952 7.80343C6.0952 7.80343 6.35132 9.12024 7.42322 10.1921C8.49512 11.264 9.80751 11.5157 9.80751 11.5157L11.5748 10.6321C11.7964 10.5213 12.0583 10.5271 12.2747 10.6474L13.9319 11.5688C14.1699 11.7011 14.3175 11.952 14.3175 12.2243V14.1268C14.3175 15.0957 13.4176 15.7955 12.4995 15.4857C10.6141 14.8495 7.6873 13.6382 5.83225 11.7831C3.97716 9.92806 2.76583 7.0013 2.12963 5.11584C1.81987 4.1978 2.51966 3.29785 3.48853 3.29785H5.39076Z" stroke="#4E5969" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

src/assets/icons/svg/notice-active.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M9 2.625L6 5.625H12L9 2.625Z" fill="#165DFF" stroke="#165DFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15.75 5.625H2.25C1.83579 5.625 1.5 5.96079 1.5 6.375V14.625C1.5 15.0392 1.83579 15.375 2.25 15.375H15.75C16.1642 15.375 16.5 15.0392 16.5 14.625V6.375C16.5 5.96079 16.1642 5.625 15.75 5.625Z" fill="#165DFF" stroke="#165DFF" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M4.5 9H11.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4.5 12H7.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icons/svg/notice.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M15.75 5.625H2.25C1.83579 5.625 1.5 5.96079 1.5 6.375V14.625C1.5 15.0392 1.83579 15.375 2.25 15.375H15.75C16.1642 15.375 16.5 15.0392 16.5 14.625V6.375C16.5 5.96079 16.1642 5.625 15.75 5.625Z" stroke="#4E5969" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M9 2.625L6 5.625H12L9 2.625Z" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4.5 9H11.25" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4.5 12H7.5" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg> 

src/assets/icons/svg/services-active.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M1.5 15.75H16.5" stroke="#165DFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M6.75 8.25H3.75C3.33579 8.25 3 8.58579 3 9V15C3 15.4142 3.33579 15.75 3.75 15.75H6.75C7.16421 15.75 7.5 15.4142 7.5 15V9C7.5 8.58579 7.16421 8.25 6.75 8.25Z" fill="#165DFF" stroke="#165DFF" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M14.25 1.5H8.25C7.83579 1.5 7.5 1.83579 7.5 2.25V15C7.5 15.4142 7.83579 15.75 8.25 15.75H14.25C14.6642 15.75 15 15.4142 15 15V2.25C15 1.83579 14.6642 1.5 14.25 1.5Z" fill="#165DFF" stroke="#165DFF" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M10.5 12.0031H12" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.5 8.62811H12" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.5 5.25311H12" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icons/svg/services.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M1.5 15.75H16.5" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M6.75 8.25H3.75C3.33579 8.25 3 8.58579 3 9V15C3 15.4142 3.33579 15.75 3.75 15.75H6.75C7.16421 15.75 7.5 15.4142 7.5 15V9C7.5 8.58579 7.16421 8.25 6.75 8.25Z" stroke="#4E5969" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M14.25 1.5H8.25C7.83579 1.5 7.5 1.83579 7.5 2.25V15C7.5 15.4142 7.83579 15.75 8.25 15.75H14.25C14.6642 15.75 15 15.4142 15 15V2.25C15 1.83579 14.6642 1.5 14.25 1.5Z" stroke="#4E5969" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M10.5 12.0031H12" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.5 8.62811H12" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.5 5.25311H12" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg> 

src/assets/icons/svg/setting.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M4.125 6V15.75" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 10.875V15.75" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 7.125V2.25" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M13.875 2.25V12" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4.125 6C5.16052 6 6 5.16052 6 4.125C6 3.08947 5.16052 2.25 4.125 2.25C3.08947 2.25 2.25 3.08947 2.25 4.125C2.25 5.16052 3.08947 6 4.125 6Z" stroke="#4E5969" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M9 10.875C10.0355 10.875 10.875 10.0355 10.875 9C10.875 7.96448 10.0355 7.125 9 7.125C7.96448 7.125 7.125 7.96448 7.125 9C7.125 10.0355 7.96448 10.875 9 10.875Z" stroke="#4E5969" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M13.875 15.75C14.9105 15.75 15.75 14.9105 15.75 13.875C15.75 12.8395 14.9105 12 13.875 12C12.8395 12 12 12.8395 12 13.875C12 14.9105 12.8395 15.75 13.875 15.75Z" stroke="#4E5969" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

src/assets/icons/svg/workbench-active.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="blue">
+  <path d="M4.5 12.375H1.5V2.625H16.5V12.375H13.5H4.5Z" fill="#165DFF" stroke="#165DFF" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M6 8.25V9.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 12.375V14.625" stroke="#165DFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 6.75V9.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 5.25V9.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4.5 15.375H13.5" stroke="#165DFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg> 

src/assets/icons/svg/workbench.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M4.5 12.375H1.5V2.625H16.5V12.375H13.5H4.5Z" stroke="#4E5969" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M6 8.25V9.75" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 12.375V14.625" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 6.75V9.75" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 5.25V9.75" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4.5 15.375H13.5" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/styles/sidebar.scss

@@ -1,3 +1,8 @@
+@mixin activeMenuBg() {
+  border-radius: 6px;
+  background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
+}
+
 #app {
 
   .main-container {
@@ -24,8 +29,8 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    // -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    // box-shadow: 2px 0 6px rgba(0,21,41,.35);
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -62,6 +67,7 @@
 
     .svg-icon {
       margin-right: 16px;
+      font-size: 18px;
     }
 
     .el-menu {
@@ -74,6 +80,8 @@
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
+      font-size: 13px;
+      font-weight: bold;
     }
 
     .el-menu-item .el-menu-tooltip__trigger {
@@ -84,7 +92,7 @@
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        @include activeMenuBg();
       }
     }
 
@@ -95,18 +103,25 @@
     & .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
       min-width: $base-sidebar-width !important;
-
+      &.is-active {
+        .menu-title {
+          font-weight: bold;
+          color: #1D2129;
+        }
+        @include activeMenuBg();
+      }
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        // background-color: rgba(0, 0, 0, 0.06) !important;
+        // background: blue;
       }
     }
 
     & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .theme-dark .el-sub-menu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
+      // background-color: $base-sub-menu-background !important;
 
       &:hover {
-        background-color: $base-sub-menu-hover !important;
+        // background-color: $base-sub-menu-hover !important;
       }
     }
   }
@@ -211,9 +226,15 @@
 
   .nest-menu .el-sub-menu>.el-sub-menu__title,
   .el-menu-item {
+    &.is-active {
+      @include activeMenuBg();
+      .menu-title {
+        color: #1D2129;
+      }
+    }
     &:hover {
       // you can use $sub-menuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      @include activeMenuBg();
     }
   }
 

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,32 +1,3 @@
-<template>
-  <div v-if="!item.hidden">
-    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
-          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
-          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
-        </el-menu-item>
-      </app-link>
-    </template>
-
-    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
-      <template v-if="item.meta" #title>
-        <svg-icon :icon-class="item.meta && item.meta.icon" />
-        <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>
-      </template>
-
-      <sidebar-item
-        v-for="(child, index) in item.children"
-        :key="child.path + index"
-        :is-nest="true"
-        :item="child"
-        :base-path="resolvePath(child.path)"
-        class="nest-menu"
-      />
-    </el-sub-menu>
-  </div>
-</template>
-
 <script setup>
 import { isExternal } from '@/utils/validate'
 import AppLink from './Link'
@@ -45,6 +16,10 @@ const props = defineProps({
   basePath: {
     type: String,
     default: ''
+  },
+  activeKey: {
+    type: String,
+    default: ''
   }
 })
 
@@ -99,4 +74,45 @@ function hasTitle(title){
     return "";
   }
 }
+
+function getIconPath (iconName) {
+  const whitelist = ['workbench', 'call', 'notice', 'analyse','services'];
+  return whitelist.includes(iconName) ? iconName + '-active' : iconName;
+}
 </script>
+<template>
+  <li v-if="!item.hidden" class="menu-item__inner">
+    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
+          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" v-show="activeKey !== resolvePath(onlyOneChild.path)"/>
+          <svg-icon :icon-class="getIconPath(onlyOneChild.meta.icon || (item.meta && item.meta.icon))" v-show="activeKey == resolvePath(onlyOneChild.path)"/>
+          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
+      <template v-if="item.meta" #title>
+        <svg-icon :icon-class="item.meta && item.meta.icon" />
+        <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>
+      </template>
+
+      <sidebar-item
+        v-for="(child, index) in item.children"
+        :key="child.path + index"
+        :is-nest="true"
+        :item="child"
+        :base-path="resolvePath(child.path)"
+        :active-key="activeKey"
+        class="nest-menu"
+      />
+    </el-sub-menu>
+  </li>
+</template>
+
+<style>
+.menu-item__inner:not(:last-child) {
+  margin-bottom: 5px;
+}
+</style>

src/layout/components/Sidebar/index.vue

@@ -1,46 +1,16 @@
-<template>
-  <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
-    <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
-      <el-menu
-        :default-active="activeMenu"
-        :collapse="isCollapse"
-        :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
-        :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
-        :unique-opened="true"
-        :active-text-color="theme"
-        :collapse-transition="false"
-        mode="vertical"
-      >
-        <sidebar-item
-          v-for="(route, index) in sidebarRouters"
-          :key="route.path + index"
-          :item="route"
-          :base-path="route.path"
-        />
-      </el-menu>
-    </el-scrollbar>
-  </div>
-</template>
-
 <script setup>
-import Logo from './Logo'
 import SidebarItem from './SidebarItem'
-import variables from '@/assets/styles/variables.module.scss'
-import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
 
 const route = useRoute();
-const appStore = useAppStore()
 const settingsStore = useSettingsStore()
 const permissionStore = usePermissionStore()
 
 const sidebarRouters =  computed(() => permissionStore.sidebarRouters);
-const showLogo = computed(() => settingsStore.sidebarLogo);
-const sideTheme = computed(() => settingsStore.sideTheme);
+
 const theme = computed(() => settingsStore.theme);
-const isCollapse = computed(() => !appStore.sidebar.opened);
+const activeKey = ref(route.path);
 
 const activeMenu = computed(() => {
   const { meta, path } = route;
@@ -51,4 +21,39 @@ const activeMenu = computed(() => {
   return path;
 })
 
+const menuResetTheme = {
+  '--el-menu-bg-color' : '#EFF1F8',
+  '--el-menu-text-color' : '#4E5969',
+  '--el-menu-active-color' : '#165DFF',
+  '--el-menu-item-height': '48px'
+}
+
+const handleSelect = (key) => {
+  activeKey.value = key;
+}
+
 </script>
+<template>
+  <div :style="{ backgroundColor: '#EFF1F8' }">
+    <el-scrollbar :class="theme" wrap-class="scrollbar-wrapper">
+      <div style="padding: 0 20px;">
+        <el-menu
+          :style="menuResetTheme"
+          :default-active="activeMenu"
+          :unique-opened="true"
+          :collapse-transition="false"
+          mode="vertical"
+          @select="handleSelect"
+        >
+          <sidebar-item
+            v-for="(route, index) in sidebarRouters"
+            :key="route.path + index"
+            :item="route"
+            :base-path="route.path"
+            :active-key="activeKey"
+          />
+        </el-menu>
+      </div>
+    </el-scrollbar> 
+  </div>
+</template>

src/layout/index.vue

@@ -31,8 +31,8 @@ const needTagsView = computed(() => settingsStore.tagsView);
 const fixedHeader = computed(() => settingsStore.fixedHeader);
 
 const classObj = computed(() => ({
-  hideSidebar: !sidebar.value.opened,
-  openSidebar: sidebar.value.opened,
+  // hideSidebar: !sidebar.value.opened,
+  // openSidebar: sidebar.value.opened,
   withoutAnimation: sidebar.value.withoutAnimation,
   mobile: device.value === 'mobile'
 }))

src/router/index.js

@@ -57,19 +57,19 @@ export const constantRoutes = [
     component: () => import('@/views/error/401'),
     hidden: true
   },
-  {
-    path: '',
-    component: Layout,
-    redirect: '/index',
-    children: [
-      {
-        path: '/index',
-        component: () => import('@/views/index'),
-        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
-      }
-    ]
-  },
+  // {
+  //   path: '',
+  //   component: Layout,
+  //   redirect: '/index',
+  //   children: [
+  //     {
+  //       path: '/index',
+  //       component: () => import('@/views/index'),
+  //       name: 'Index',
+  //       meta: { title: '首页', icon: 'dashboard', affix: true }
+  //     }
+  //   ]
+  // },
   {
     path: '/user',
     component: Layout,

src/settings.js

@@ -6,7 +6,7 @@ export default {
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
    */
-  sideTheme: 'theme-dark',
+  sideTheme: 'theme-light',
   /**
    * 是否系统布局配置
    */

src/views/voice/analyse/index.vue

@@ -0,0 +1,9 @@
+<template>
+
+  <h1> 运营分析 </h1>
+  
+</template>
+
+<script setup>
+
+</script>

src/views/voice/call/index.vue

@@ -0,0 +1,9 @@
+<template>
+
+  <h1> 通话记录 </h1>
+  
+</template>
+
+<script setup>
+
+</script>

src/views/voice/notice/index.vue

@@ -0,0 +1,9 @@
+<template>
+
+  <h1> 停水公告 </h1>
+  
+</template>
+
+<script setup>
+
+</script>

src/views/voice/services/index.vue

@@ -0,0 +1,9 @@
+<template>
+
+  <h1> 服务小区 </h1>
+  
+</template>
+
+<script setup>
+
+</script>

src/views/voice/workbench/index.vue

@@ -0,0 +1,9 @@
+<template>
+
+  <h1> 这个是工作台界面 </h1>
+  
+</template>
+
+<script setup>
+
+</script>