refactor(ui): 重构侧边栏导航结构并更新组件配置

- 移除嵌套子菜单结构，简化为平铺式菜单项
- 添加首页路由导航项，优化导航体验
- 更新 .gitignore 文件，忽略 package-lock.json
- 注释掉 AboutView 中的动态按钮渲染逻辑
- 在组件声明文件中添加 ElSubItem 组件类型定义
- 调整侧边栏样式，固定宽度为 200px 并优化高度计算

.gitignore

@@ -2,3 +2,4 @@ download
 .venv
 flask-ui/node_modules
 .idea
+flask-ui/package-lock.json

flask-ui/components.d.ts

@@ -35,6 +35,7 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSplitter: typeof import('element-plus/es')['ElSplitter']
     ElSplitterPanel: typeof import('element-plus/es')['ElSplitterPanel']
+    ElSubItem: typeof import('element-plus/es')['ElSubItem']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
@@ -69,6 +70,7 @@ declare global {
   const ElSelect: typeof import('element-plus/es')['ElSelect']
   const ElSplitter: typeof import('element-plus/es')['ElSplitter']
   const ElSplitterPanel: typeof import('element-plus/es')['ElSplitterPanel']
+  const ElSubItem: typeof import('element-plus/es')['ElSubItem']
   const ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
   const RouterLink: typeof import('vue-router')['RouterLink']
   const RouterView: typeof import('vue-router')['RouterView']

flask-ui/src/layout/components/Sidebar/index.vue

@@ -17,30 +17,12 @@ const iconComponent = ref("location")
         :collapse="isCollapse"
         class="el-menu-vertical-demo"
         router>
-        <el-sub-menu index="1">
+        <el-menu-item index="1" route="index">
-          <template #title>
           <el-icon>
-              <component :is="iconComponent"></component>
+            <Menu/>
           </el-icon>
-            <span>Navigator One</span>
+          <span>首页</span>
-          </template>
-          <el-menu-item-group title="Group One">
-            <el-menu-item index="1-1">
-              <el-icon>
-                <location/>
-              </el-icon>
-              item one
         </el-menu-item>
-            <el-menu-item index="1-2">item two</el-menu-item>
-          </el-menu-item-group>
-          <el-menu-item-group title="Group Two">
-            <el-menu-item index="1-3">item three</el-menu-item>
-          </el-menu-item-group>
-          <el-sub-menu index="1-4">
-            <template #title>item four</template>
-            <el-menu-item index="1-4-1">item one</el-menu-item>
-          </el-sub-menu>
-        </el-sub-menu>
         <el-menu-item index="2" route="about">
           <el-icon>
             <Menu/>
@@ -66,10 +48,9 @@ const iconComponent = ref("location")
 
 <style scoped lang="scss">
 .el-aside {
-  width: auto;
+  width: 200px;
 }
-
+:deep(.el-menu.el-menu--vertical) {
-:deep(.el-scrollbar__wrap) {
+  min-height: calc(100vh - 60px);
-  max-height: calc(100vh - 60px);
 }
 </style>

flask-ui/src/views/AboutView.vue

@@ -37,9 +37,12 @@ const getThirdLevelOptions = () => {
   <el-main>
     <el-card shadow="never">
       <template #default>
-        <div v-for="(v,i) in getSecondLevelOptions()">
+<!--        <div v-for="(v,i) in getSecondLevelOptions()">-->
-          <div>{{i}}</div>
+<!--          <div>{{i}}</div>-->
-          <el-button v-for="(v2,i2) in v" :key="i2">{{ v2 }}</el-button>
+<!--          <el-button v-for="(v2,i2) in v" :key="i2">{{ v2 }}</el-button>-->
+<!--        </div>-->
+        <div>
+          <el-button v-for="(v,i) in aa" :key="i">{{ i }}</el-button>
         </div>
       </template>
       <template #footer>