最终版

src/components/Header.vue

@@ -2,7 +2,7 @@
   <div class="header">
     <div class="header-content">
       <div class="system-info">
-        <h1>病历管理系统</h1>
+        <h1>医院管理系统</h1>
         <div class="subtitle">Medical Record Management System</div>
       </div>
       <div class="user-info">
@@ -16,8 +16,8 @@
           </span>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item>
-                <el-icon><UserFilled /></el-icon>个人信息
+              <el-dropdown-item  @click="showUserInfoDialog">
+                <el-icon><UserFilled/></el-icon>个人信息
               </el-dropdown-item>
               <el-dropdown-item>
                 <el-icon><Setting /></el-icon>设置
@@ -31,16 +31,43 @@
       </div>
     </div>
   </div>
+  <el-dialog title="个人信息" v-model="userInfoDialogVisible">
+    <div>
+      <p><strong>用户名：</strong>{{ userInfo.username }}</p>
+      <p><strong>邮箱：</strong>{{ userInfo.email }}</p>
+      <p><strong>年龄：</strong>{{ userInfo.age }}</p>
+      <p><strong>性别：</strong>{{ userInfo.gender }}</p>
+      <p><strong>权限：</strong>{{ userInfo.permission }}</p>
+    </div>
+  </el-dialog>
   <router-view />
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import {computed, ref} from 'vue'
 import { User, CaretBottom, UserFilled, Setting, SwitchButton } from '@element-plus/icons-vue'
 import router from "@/router/index.js";
 
+const userInfoDialogVisible = ref(false);
+const showUserInfoDialog = () => {
+  userInfoDialogVisible.value = true;
+};
+const roleDisplay = computed(() => {
+  switch (sessionStorage.getItem('permission')) {
+    case '0':
+      return '医生管理员';
+    case '1':
+      return '医生';
+    default:
+      return '未登录';
+  }
+});
 const userInfo = ref({
   username: sessionStorage.getItem('username') || '未登录',
+  email: sessionStorage.getItem('email') || '未登录',
+  age: sessionStorage.getItem('age') || '未登录',
+  gender: sessionStorage.getItem('gender') || '未登录',
+  permission: roleDisplay.value
 })
 const logout = () => {
   // 清空 sessionStorage
@@ -114,10 +141,6 @@ const logout = () => {
   color: #606266;
 }
 
-.el-dropdown-menu {
-  padding: 5px 0;
-}
-
 .el-dropdown-menu .el-icon {
   margin-right: 8px;
   vertical-align: middle;

src/views/login/Index.vue

@@ -50,12 +50,12 @@ export default {
         const { data } = response;
         if (data.code === 200) {
           alert('用户登录成功');
-          const token = data.data;
-          const username = data.username;
-          const permission = data.permission;
-          sessionStorage.setItem('token', token);
-          sessionStorage.setItem('username', username);
-          sessionStorage.setItem('permission', permission);
+          sessionStorage.setItem('token', data.data);
+          sessionStorage.setItem('username', data.username);
+          sessionStorage.setItem('permission', data.permission);
+          sessionStorage.setItem('age',data.age);
+          sessionStorage.setItem('gender',data.gender);
+          sessionStorage.setItem('email',data.email);
           await router.push('/home');
         } else {
           alert(data.message);
@@ -96,7 +96,8 @@ export default {
     border-radius: 10px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     text-align: center;
-
+    position: relative;
+    right: 320px;
     h1 {
       margin-bottom: 20px;
       color: #333;
@@ -139,6 +140,7 @@ export default {
           color: #333;
           pointer-events: none;
           transition: 0.5s;
+
         }
       }
     }

src/views/user/User.vue

@@ -330,15 +330,15 @@ const showTreatmentInfo = (info) => {
   <el-card class="page-container">
     <template #header>
       <div class="header">
-        <h2><span>用户信息管理表</span></h2>
+        <h2><span>患者信息管理表</span></h2>
       </div>
       <!--功能按钮-->
       <div class="box">
         <el-button type="primary" :icon="Share" @click="exportUser()">数据导出</el-button>
-        <el-button type="primary" :icon="Upload" @click="dialogVisibleAdd = true">新增用户</el-button>
-        <el-button type="success" :icon="Search" @click="dialogVisibleSelect = true">查询用户</el-button>
+        <el-button type="primary" :icon="Upload" @click="dialogVisibleAdd = true">新增患者</el-button>
+        <el-button type="success" :icon="Search" @click="dialogVisibleSelect = true">查询患者</el-button>
         <el-button type="danger" :icon="Delete" :disabled="tableChecked.length === 0"
-                   @click="deleteByIdsUser(tableChecked)">批量删除用户
+                   @click="deleteByIdsUser(tableChecked)">批量删除患者
         </el-button>
       </div>
     </template>
@@ -524,4 +524,8 @@ h2 {
   -ms-transform: translateX(65%);
   -webkit-transform: translateX(25%);
 }
+
+ .box > .el-button:not(:last-child) {
+   margin-right: 10px;
+ }
 </style>