完成固定边栏的开发

src/i18n/language/en.js

@@ -14,4 +14,18 @@ export default {
         passwordHolder: "Please enter your password.",
         passwordError: "Please enter a password of at least 4 characters",
     },
+    menu: {
+        App: "Website",
+        AppUser: "User",
+        AppDept: "Department",
+        AppRole: "Role",
+        AppResource: "Resource",
+        AppPermission: "Permission",
+        Sys: "System",
+        SysUser: "User",
+        SysNotice: "Notice",
+        Logs: "Logs",
+        LogsVisit: "Visits",
+        LogsOperation: "Operations",
+    },
 }

src/i18n/language/zh-cn.js

@@ -12,5 +12,19 @@ export default {
         password: "密码",
         passwordHolder: "请输入密码",
         passwordError: "至少输入4个字符的密码",
-    }
+    },
+    menu: {
+        App: "应用管理",
+        AppUser: "用户管理",
+        AppDept: "机构管理",
+        AppRole: "角色管理",
+        AppResource: "资源管理",
+        AppPermission: "授权管理",
+        Sys: "系统管理",
+        SysUser: "用户管理",
+        SysNotice: "公告管理",
+        Logs: "审计管理",
+        LogsVisit: "访问日志",
+        LogsOperation: "操作日志",
+    },
 }

src/layout/components/PageSiderbar.vue

@@ -1,11 +1,62 @@
+<template>
+  <div class="page-sidebar">
+    <el-menu :default-active="defaultActive" router class="sidemenu" :collapse="isCollapse">
+      <el-sub-menu v-for="(item,i) in treeData" :key="i" :index="item.path">
+        <template #title>
+          <el-icon v-if="item.icon">
+            <component :is="item.icon"></component>
+          </el-icon>
+          <span>{{ t(`menu.${item.name}`) }}</span>
+        </template>
+        <template v-for="(child, ci) in item.children" :key="ci">
+          <el-menu-item :index="child.path">
+            <el-icon>
+              <component :is="child.icon"></component>
+            </el-icon>
+            {{ t(`menu.${child.name}`) }}
+          </el-menu-item>
+        </template>
+      </el-sub-menu>
+    </el-menu>
+  </div>
+</template>
+
 <script setup>
+import {menuTreeData} from "@/mock/data.js";
+import {useRoute} from "vue-router";
+import {useI18n} from "vue-i18n";
+import {ref, computed} from "vue";
+
+
+const route = useRoute();
+const {t} = useI18n();
 
+const treeData = menuTreeData;
+const defaultActive = computed(() => route.path || treeData.value[0].path);
+
+const isCollapse = ref(false)
 </script>
 
-<template>
-  <div>这是侧边栏组件</div>
-</template>
+<style lang="scss">
+$side-width: 200px;
+
+.page-sidebar {
+  .sidemenu.el-menu,
+  .sidemenu .el-sub-menu > .el-menu {
+    --el-menu-text-color: #ccc;
+    --el-menu-hover-bg-color: #060251;
+    --el-menu-border-color: transparnet;
+    --el-menu-bg-color: #000;
 
-<style scoped>
+    .el-menu-item {
+      &.is-active {
+        background-color: var(--el-menu-hover-bg-color);
+      }
+    }
+  }
+  .sidemenu .el-menu:not(.el-menu--colapse) {
+    width: $side-width;
+  }
+}
 
 </style>