u

code/container-ocr/ocr-vue/src/layout/components/menu.vue

@@ -44,6 +44,10 @@ const menuList = ref([
         label: "字段配置",
         path: "/system/field",
       },
+      {
+        label: "权限配置",
+        path: "/system/permission",
+      },
     ],
   },
 ]);
@@ -151,6 +155,7 @@ function handleMenuChange(val) {
     }
     .el-menu-item {
       padding-left: 48px !important;
+      margin-bottom: 4px;
     }
     &.is-active {
       .el-sub-menu__title {

code/container-ocr/ocr-vue/src/layout/components/topbar.vue

@@ -1,4 +1,9 @@
 <script lang="js" setup>
+import { useUserStore } from "@/store/user";
+import { useTabStore } from "@/store/tab";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+
 const props = defineProps({
   collapse: {
     type: Boolean,
@@ -8,9 +13,23 @@ const props = defineProps({
 
 const emits = defineEmits(["collapse"]);
 
+const router = useRouter();
+
+const tabStore = useTabStore();
+const userStore = useUserStore();
+
 function onCollapse() {
   emits("collapse");
 }
+
+function logout() {
+  userStore.resetUserInfo();
+  tabStore.resetTabs();
+
+  ElMessage.success("已成功退出");
+
+  router.push("/login");
+}
 </script>
 
 <template>
@@ -18,24 +37,29 @@ function onCollapse() {
     <div class="g3-topbar-left">
       <div class="g3-action-icon" @click="onCollapse()">
         <G3Icon
-          :icon="
-            props.collapse
-              ? 'lucide:list-indent-increase'
-              : 'lucide:list-indent-decrease'
-          "
+          :icon="props.collapse ? 'lucide:list-indent-increase' : 'lucide:list-indent-decrease'"
         />
       </div>
     </div>
 
     <div class="g3-topbar-right">
-      <div class="user-card compact">
-        <G3Icon icon="lucide:circle-user-round" size="18" />
-        <div class="user-info">
-          <span class="user-name">001</span>
-          <!-- <span class="divider">·</span>
-          <span class="user-org">g3cd</span> -->
+      <el-dropdown>
+        <div class="user-card compact">
+          <G3Icon icon="lucide:circle-user-round" size="18" />
+          <div class="user-info">
+            <span class="user-name">
+              {{ userStore.userInfo.username || userStore.userInfo.userid || "空" }}
+            </span>
+          </div>
         </div>
-      </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item> 个人信息 </el-dropdown-item>
+            <el-dropdown-item> 修改密码 </el-dropdown-item>
+            <el-dropdown-item divided @click="logout"> 退出登录 </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </div>
   </div>
 </template>