feat(布局): 重构侧边栏、顶栏与页面布局样式

clinical-web/README.md

@@ -96,17 +96,19 @@ TanStack Vue Query、PDF 预览、报表图表、自动化测试和签字板适
 
 ClinicalLayout
 ├─ 工作台
-│  ├─ /workbench/home              首页
+│  ├─ /workbench/home              首页总览
-│  └─ /workbench/signing           签署工作台
+│  ├─ /workbench/signing           签署工作台
+│  ├─ /management/documents        文档库管理
+│  └─ /management/reports          报表分析
 └─ 管理
-   ├─ /management/documents        文档库管理
-   ├─ /management/reports          报表分析
    ├─ /management/users            用户与权限
    ├─ /management/document-permissions  文档权限
    └─ /management/settings         系统设置
 ```
 
-布局拆分为 `Menu`、`Header` 和 `Container` 三个公共组件，页面内容由各自的 View 负责。
+菜单分组按原型呈现，与路由 path 前缀不完全对应：文档库管理和报表分析归入侧边栏「工作台」分栏，但路径仍保留在 `/management` 下。
+
+布局拆分为 `Menu`、`Header` 和 `Container` 三个公共组件，页面内容由各自的 View 负责；侧边栏与顶栏共用 `components/layout/AppIcon.vue` 提供图标。
 
 页面目录按业务域组织：`auth` 保留登录页；工作台页面位于 `views/workbench`；管理页面位于 `views/management`。每个具体页面目录都有 `index.vue` 入口和 `components` 目录，用于继续拆分当前页面组件。
 

clinical-web/src/components/layout/AppIcon.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * 布局层图标组件。
+ * 图标节点与新版原型保持一致，采用 lucide 图标数据（24 视图框、描边风格），
+ * 避免引入额外依赖，同时保证侧边栏与顶栏的图标细节可以逐像素对齐原型。
+ */
+type IconNode = readonly [string, Record<string, string | number>]
+
+const icons: Record<string, readonly IconNode[]> = {
+  'layout-dashboard': [
+    ['rect', { width: 7, height: 9, x: 3, y: 3, rx: 1 }],
+    ['rect', { width: 7, height: 5, x: 14, y: 3, rx: 1 }],
+    ['rect', { width: 7, height: 9, x: 14, y: 12, rx: 1 }],
+    ['rect', { width: 7, height: 5, x: 3, y: 16, rx: 1 }],
+  ],
+  'file-pen-line': [
+    [
+      'path',
+      {
+        d: 'M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z',
+      },
+    ],
+    ['path', { d: 'M14.487 7.858A1 1 0 0 1 14 7V2' }],
+    [
+      'path',
+      {
+        d: 'M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516',
+      },
+    ],
+    ['path', { d: 'M8 18h1' }],
+  ],
+  'clipboard-check': [
+    ['rect', { width: 8, height: 4, x: 8, y: 2, rx: 1, ry: 1 }],
+    ['path', { d: 'M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2' }],
+    ['path', { d: 'm9 14 2 2 4-4' }],
+  ],
+  activity: [
+    [
+      'path',
+      {
+        d: 'M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2',
+      },
+    ],
+  ],
+  'users-round': [
+    ['path', { d: 'M18 21a8 8 0 0 0-16 0' }],
+    ['circle', { cx: 10, cy: 8, r: 5 }],
+    ['path', { d: 'M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3' }],
+  ],
+  'lock-keyhole': [
+    ['circle', { cx: 12, cy: 16, r: 1 }],
+    ['rect', { x: 3, y: 10, width: 18, height: 12, rx: 2 }],
+    ['path', { d: 'M7 10V7a5 5 0 0 1 10 0v3' }],
+  ],
+  settings: [
+    [
+      'path',
+      {
+        d: 'M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915',
+      },
+    ],
+    ['circle', { cx: 12, cy: 12, r: 3 }],
+  ],
+  stethoscope: [
+    ['path', { d: 'M11 2v2' }],
+    ['path', { d: 'M5 2v2' }],
+    ['path', { d: 'M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1' }],
+    ['path', { d: 'M8 15a6 6 0 0 0 12 0v-3' }],
+    ['circle', { cx: 20, cy: 10, r: 2 }],
+  ],
+  ellipsis: [
+    ['circle', { cx: 12, cy: 12, r: 1 }],
+    ['circle', { cx: 19, cy: 12, r: 1 }],
+    ['circle', { cx: 5, cy: 12, r: 1 }],
+  ],
+  bell: [
+    ['path', { d: 'M10.268 21a2 2 0 0 0 3.464 0' }],
+    [
+      'path',
+      {
+        d: 'M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326',
+      },
+    ],
+  ],
+  'building-2': [
+    ['path', { d: 'M10 12h4' }],
+    ['path', { d: 'M10 8h4' }],
+    ['path', { d: 'M14 21v-3a2 2 0 0 0-4 0v3' }],
+    ['path', { d: 'M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2' }],
+    ['path', { d: 'M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16' }],
+  ],
+  'chevron-down': [['path', { d: 'm6 9 6 6 6-6' }]],
+}
+
+const props = defineProps<{ name: string }>()
+
+const nodes = computed(() => icons[props.name] ?? [])
+</script>
+
+<template>
+  <svg
+    class="app-icon"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.85"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    width="24"
+    height="24"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <component :is="node[0]" v-for="(node, index) in nodes" :key="index" v-bind="node[1]" />
+  </svg>
+</template>
+
+<style scoped>
+.app-icon {
+  display: block;
+  flex-shrink: 0;
+}
+</style>

clinical-web/src/components/layout/Container.vue

@@ -8,13 +8,13 @@
 .clinical-container {
   flex: 1;
   min-height: 0;
-  padding: 18px 20px;
+  padding: 18px 30px;
   overflow-y: auto;
 }
 
 @media (max-width: 1200px) {
   .clinical-container {
-    padding: 16px;
+    padding: 16px 20px;
   }
 }
 </style>

clinical-web/src/components/layout/Header.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
 
+import AppIcon from '@/components/layout/AppIcon.vue'
 import { useAppStore } from '@/stores/app'
 
 const route = useRoute()
@@ -21,6 +23,17 @@ const campusPlaceholder = computed(() => {
   return appStore.campusLoadFailed ? '院区加载失败' : '暂无可用院区'
 })
 
+const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+const todayText = computed(() => {
+  const now = new Date()
+
+  return `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${weekdays[now.getDay()]}`
+})
+
+function handleMessages() {
+  ElMessage.info('暂无新消息')
+}
+
 onMounted(() => {
   void appStore.loadCampuses()
 })
@@ -29,12 +42,13 @@ onMounted(() => {
 <template>
   <header class="clinical-header">
     <div class="header-page">
-      <span class="header-title">{{ pageTitle }}</span>
+      <p class="header-subtitle">{{ pageGroup }} · 医签通平台</p>
-      <span class="header-breadcrumb">{{ pageGroup }} / {{ pageTitle }}</span>
+      <h1 class="header-title">{{ pageTitle }}</h1>
     </div>
-    <span class="header-spacer" />
+
-    <label class="campus-selector">
+    <div class="header-actions">
-      <span class="campus-label">院区</span>
+      <label class="campus-scope">
+        <AppIcon name="building-2" class="scope-icon" />
         <select
           v-model="selectedCampusId"
           :disabled="appStore.campusLoading || !appStore.campusRecords.length"
@@ -47,8 +61,15 @@ onMounted(() => {
             {{ campus.name }}
           </option>
         </select>
+        <AppIcon name="chevron-down" class="scope-arrow" />
       </label>
-    <span class="environment-badge">{{ appStore.environment }}</span>
+
+      <button class="icon-button" type="button" aria-label="查看消息" @click="handleMessages">
+        <AppIcon name="bell" class="icon-button-icon" />
+      </button>
+
+      <span class="header-date">{{ todayText }}</span>
+    </div>
   </header>
 </template>
 
@@ -56,69 +77,109 @@ onMounted(() => {
 .clinical-header {
   display: flex;
   flex-shrink: 0;
-  gap: 14px;
   align-items: center;
+  justify-content: space-between;
   height: var(--header-height);
-  padding: 0 20px;
+  padding: 0 30px;
-  background: #fff;
+  background: rgb(255 255 255 / 93%);
   border-bottom: 1px solid var(--line);
+  backdrop-filter: blur(14px);
 }
 
 .header-page {
-  display: flex;
-  gap: 14px;
-  align-items: baseline;
   min-width: 0;
 }
 
-.header-title {
+.header-subtitle {
-  flex-shrink: 0;
+  margin: 0;
-  color: var(--ink);
+  color: #82969f;
-  font-size: 16px;
+  font-size: 10px;
-  font-weight: 700;
 }
 
-.header-breadcrumb {
+.header-title {
+  margin: 3px 0 0;
   overflow: hidden;
-  color: var(--mut);
+  color: var(--ink);
-  font-size: 12px;
+  font-size: 17px;
+  font-weight: 700;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.header-spacer {
+.header-actions {
-  flex: 1;
-}
-
-.campus-selector {
   display: flex;
   flex-shrink: 0;
+  gap: 14px;
+  align-items: center;
+  color: #6e828b;
+  font-size: 11px;
+}
+
+.campus-scope {
+  display: flex;
   gap: 6px;
   align-items: center;
+  height: 32px;
+  padding: 0 9px;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 9px;
 }
 
-.campus-label {
+.scope-icon {
-  color: var(--mut);
+  width: 14px;
-  font-size: 12px;
+  height: 14px;
 }
 
-.campus-selector select {
+.scope-arrow {
+  width: 11px;
+  height: 11px;
+}
+
+.campus-scope select {
   width: auto;
-  padding: 4px 8px;
+  max-width: 150px;
-  color: var(--brand-d);
+  padding: 0;
-  font-size: 12.5px;
+  overflow: hidden;
-  font-weight: 700;
+  color: #4d6873;
-  background: var(--brand-l);
+  font-size: 11px;
-  border: 1px solid var(--brand);
+  text-overflow: ellipsis;
-  border-radius: 6px;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  appearance: none;
 }
 
-.environment-badge {
+.campus-scope select:disabled {
-  flex-shrink: 0;
+  color: #9aabb3;
-  padding: 3px 8px;
+}
-  color: var(--warn);
+
+.icon-button {
+  position: relative;
+  display: grid;
+  width: 34px;
+  height: 34px;
+  color: #506c77;
+  place-items: center;
+  background: #edf4f6;
+  border: 0;
+  border-radius: 9px;
+  transition: all 0.2s;
+}
+
+.icon-button:hover {
+  color: #08788d;
+  background: #def0f3;
+  transform: translateY(-1px);
+}
+
+.icon-button-icon {
+  width: 17px;
+  height: 17px;
+}
+
+.header-date {
+  color: #6e828b;
   font-size: 11px;
-  background: var(--warn-l);
-  border-radius: 20px;
 }
 </style>

clinical-web/src/components/layout/Menu.vue

@@ -1,43 +1,56 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
 
+import AppIcon from '@/components/layout/AppIcon.vue'
+import { useAppStore } from '@/stores/app'
 import { useLoginStore } from '@/stores/login'
 
 interface MenuItem {
   path: string
   label: string
+  icon: string
   permission?: string
 }
 
 interface MenuGroup {
   label: string
+  ariaLabel: string
   items: MenuItem[]
 }
 
 const loginStore = useLoginStore()
+const appStore = useAppStore()
 const router = useRouter()
 
 const menuGroups: MenuGroup[] = [
   {
     label: '工作台',
+    ariaLabel: '主要导航',
     items: [
-      { path: '/workbench/home', label: '首页' },
+      { path: '/workbench/home', label: '首页总览', icon: 'layout-dashboard' },
-      { path: '/workbench/signing', label: '签署工作台' },
+      { path: '/workbench/signing', label: '签署工作台', icon: 'file-pen-line' },
+      { path: '/management/documents', label: '文档库管理', icon: 'clipboard-check' },
+      { path: '/management/reports', label: '报表分析', icon: 'activity' },
     ],
   },
   {
     label: '管理',
+    ariaLabel: '管理导航',
     items: [
-      { path: '/management/documents', label: '文档库管理' },
+      {
-      { path: '/management/reports', label: '报表分析' },
+        path: '/management/users',
-      { path: '/management/users', label: '用户与权限', permission: 'system:user:query' },
+        label: '用户与权限',
+        icon: 'users-round',
+        permission: 'system:user:query',
+      },
       {
         path: '/management/document-permissions',
         label: '文档权限',
+        icon: 'lock-keyhole',
         permission: 'sign:template:permission:query',
       },
-      { path: '/management/settings', label: '系统设置' },
+      { path: '/management/settings', label: '系统设置', icon: 'settings' },
     ],
   },
 ]
@@ -53,7 +66,28 @@ const visibleMenuGroups = computed(() =>
     .filter((group) => group.items.length),
 )
 
+const avatarText = computed(() => loginStore.userName.slice(0, 1))
+const userMenuOpen = ref(false)
+
+function toggleUserMenu() {
+  userMenuOpen.value = !userMenuOpen.value
+}
+
+function closeUserMenu() {
+  userMenuOpen.value = false
+}
+
+function handleDocumentClick(event: MouseEvent) {
+  const target = event.target as HTMLElement | null
+
+  if (target && !target.closest('.menu-user')) {
+    closeUserMenu()
+  }
+}
+
 async function handleLogout() {
+  closeUserMenu()
+
   try {
     await loginStore.logout()
   } catch {
@@ -62,57 +96,70 @@ async function handleLogout() {
     await router.push('/login')
   }
 }
+
+onMounted(() => {
+  document.addEventListener('click', handleDocumentClick)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleDocumentClick)
+})
 </script>
 
 <template>
   <aside class="clinical-menu">
-    <div class="menu-brand">
+    <div class="brand-lockup">
-      <div class="menu-brand-icon" aria-hidden="true">
+      <span class="brand-mark">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+        <AppIcon name="stethoscope" class="brand-mark-icon" />
-          <path
+      </span>
-            d="M14 3v5h5M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z"
+      <div class="brand-copy">
-            stroke="#fff"
-            stroke-width="1.7"
-            stroke-linejoin="round"
-          />
-          <path
-            d="m9 13.5 2.5 2.5 4-4.5"
-            stroke="#fff"
-            stroke-width="1.7"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </div>
-      <div class="menu-brand-copy">
         <strong>医签通</strong>
-        <span>MEDISIGN</span>
+        <small>MEDISIGN V2.0</small>
       </div>
     </div>
 
-    <nav class="menu-nav" aria-label="主导航">
+    <div class="menu-scroll">
       <div v-for="group in visibleMenuGroups" :key="group.label" class="menu-group">
-        <div class="menu-group-title">{{ group.label }}</div>
+        <p class="nav-caption">{{ group.label }}</p>
+        <nav class="menu-nav" :aria-label="group.ariaLabel">
           <RouterLink
             v-for="item in group.items"
             :key="item.path"
             :to="item.path"
-          class="menu-item"
+            class="nav-item"
             active-class="is-active"
           >
-          <span class="menu-dot" aria-hidden="true" />
+            <AppIcon :name="item.icon" class="nav-icon" />
-          <span>{{ item.label }}</span>
+            <span class="nav-label">{{ item.label }}</span>
           </RouterLink>
-      </div>
         </nav>
-
-    <div class="menu-profile">
-      <div class="menu-profile-avatar">{{ loginStore.userName.slice(0, 1) }}</div>
-      <div class="menu-profile-copy">
-        <strong>{{ loginStore.userName }}</strong>
-        <span>{{ loginStore.department }}</span>
       </div>
-      <button class="menu-logout" type="button" @click="handleLogout">退出</button>
+    </div>
+
+    <div class="connection">
+      <i aria-hidden="true" />
+      <span>{{ appStore.environment }}</span>
+    </div>
+
+    <div class="menu-user">
+      <button
+        class="user-card"
+        type="button"
+        :aria-expanded="userMenuOpen"
+        aria-haspopup="menu"
+        @click="toggleUserMenu"
+      >
+        <span class="user-avatar">{{ avatarText }}</span>
+        <div class="user-copy">
+          <strong>{{ loginStore.userName }}</strong>
+          <small>{{ loginStore.department }}</small>
+        </div>
+        <AppIcon name="ellipsis" class="user-more" />
+      </button>
+
+      <div v-if="userMenuOpen" class="user-pop" role="menu">
+        <button type="button" role="menuitem" @click="handleLogout">退出登录</button>
+      </div>
     </div>
   </aside>
 </template>
@@ -123,152 +170,237 @@ async function handleLogout() {
   flex: 0 0 var(--sidebar-width);
   flex-direction: column;
   width: var(--sidebar-width);
-  color: #c8dde6;
+  padding: 21px 13px 14px;
-  background: var(--side);
+  color: #d8edf3;
+  background: linear-gradient(#0b455a 0%, #072e3e 100%);
+  box-shadow: 8px 0 32px rgb(5 37 49 / 7%);
 }
 
-.menu-brand {
+.brand-lockup {
   display: flex;
   flex-shrink: 0;
-  gap: 10px;
+  gap: 11px;
   align-items: center;
-  padding: 18px 16px 16px;
+  padding: 0 8px 20px;
-  border-bottom: 1px solid rgb(255 255 255 / 8%);
+  border-bottom: 1px solid rgb(255 255 255 / 9%);
 }
 
-.menu-brand-icon {
+.brand-mark {
   display: grid;
   flex-shrink: 0;
-  width: 34px;
+  width: 40px;
-  height: 34px;
+  height: 40px;
+  color: #fff;
   place-items: center;
-  border-radius: 9px;
+  background: linear-gradient(145deg, #0f7590, #18a6a6);
-  background: linear-gradient(135deg, #18a0c0, var(--brand));
+  border: 1px solid rgb(255 255 255 / 20%);
+  border-radius: 11px;
+  box-shadow: 0 8px 20px rgb(0 21 31 / 33%);
 }
 
-.menu-brand-copy strong,
+.brand-mark-icon {
-.menu-brand-copy span {
+  width: 22px;
-  display: block;
+  height: 22px;
 }
 
-.menu-brand-copy strong {
+.brand-copy {
-  color: #fff;
-  font-size: 16px;
-  letter-spacing: 1px;
-}
-
-.menu-brand-copy span {
-  color: #8fb3c2;
-  font-size: 10px;
-  letter-spacing: 1px;
-}
-
-.menu-nav {
-  flex: 1;
-  padding: 12px 10px;
-  overflow-y: auto;
-}
-
-.menu-group-title {
-  padding: 10px 10px 6px;
-  color: #7ba2b3;
-  font-size: 11px;
-  letter-spacing: 1px;
-}
-
-.menu-item {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  margin-bottom: 2px;
-  padding: 10px 12px;
-  color: #c8dde6;
-  font-size: 13.5px;
-  text-decoration: none;
-  border-radius: 8px;
-  transition:
-    color 0.15s ease,
-    background 0.15s ease;
-}
-
-.menu-item:hover {
-  color: #fff;
-  background: rgb(255 255 255 / 7%);
-}
-
-.menu-item.is-active {
-  color: #fff;
-  font-weight: 700;
-  background: var(--brand);
-}
-
-.menu-dot {
-  flex-shrink: 0;
-  width: 6px;
-  height: 6px;
-  background: transparent;
-  border-radius: 50%;
-}
-
-.menu-item.is-active .menu-dot {
-  background: #5ee0a8;
-}
-
-.menu-profile {
-  display: flex;
-  flex-shrink: 0;
-  gap: 10px;
-  align-items: center;
-  padding: 14px 16px;
-  border-top: 1px solid rgb(255 255 255 / 8%);
-}
-
-.menu-profile-avatar {
-  display: grid;
-  flex-shrink: 0;
-  width: 34px;
-  height: 34px;
-  color: #fff;
-  font-size: 14px;
-  font-weight: 700;
-  place-items: center;
-  border-radius: 50%;
-  background: #18a0c0;
-}
-
-.menu-profile-copy {
   min-width: 0;
 }
 
-.menu-profile-copy strong,
+.brand-copy strong {
-.menu-profile-copy span {
   display: block;
+  color: #fff;
+  font-size: 18px;
+  letter-spacing: 0.08em;
+}
+
+.brand-copy small {
+  display: block;
+  margin-top: 2px;
+  color: #8fb7c4;
+  font-size: 9px;
+  letter-spacing: 0.1em;
+}
+
+.menu-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.nav-caption {
+  margin: 0;
+  padding: 17px 12px 6px;
+  color: #759ba8;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+}
+
+.menu-nav {
+  display: grid;
+  gap: 4px;
+}
+
+.nav-item {
+  position: relative;
+  display: flex;
+  gap: 11px;
+  align-items: center;
+  height: 42px;
+  padding: 0 12px;
+  color: #bcd3db;
+  font-size: 14px;
+  text-align: left;
+  text-decoration: none;
+  border-radius: 10px;
+  transition: all 0.22s;
+}
+
+.nav-item:hover {
+  color: #fff;
+  background: rgb(255 255 255 / 5%);
+  transform: translateX(2px);
+}
+
+.nav-item.is-active {
+  color: #fff;
+  background: linear-gradient(90deg, #137f98, #0f6a82);
+  box-shadow: 0 8px 20px rgb(0 20 30 / 25%);
+}
+
+.nav-item.is-active::before {
+  position: absolute;
+  left: -13px;
+  width: 3px;
+  height: 22px;
+  background: #65d9d0;
+  border-radius: 0 3px 3px 0;
+  content: '';
+}
+
+.nav-icon {
+  width: 17px;
+  height: 17px;
+}
+
+.nav-label {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.menu-profile-copy strong {
+.connection {
-  color: #fff;
+  display: flex;
-  font-size: 13px;
-}
-
-.menu-profile-copy span {
-  margin-top: 2px;
-  color: #8fb3c2;
-  font-size: 11px;
-}
-
-.menu-logout {
   flex-shrink: 0;
-  margin-left: auto;
+  gap: 7px;
-  padding: 0;
+  align-items: center;
-  color: #8fb3c2;
+  min-width: 0;
-  font-size: 11px;
+  margin: auto 0 12px 8px;
-  background: transparent;
+  color: #79a8b5;
+  font-size: 9px;
 }
 
-.menu-logout:hover {
+.connection i {
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  background: #45d4a5;
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px rgb(69 212 165 / 11%);
+}
+
+.connection span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.menu-user {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.user-card {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  width: 100%;
+  padding: 10px 9px;
+  color: inherit;
+  text-align: left;
+  background: rgb(255 255 255 / 3%);
+  border: 1px solid rgb(255 255 255 / 7%);
+  border-radius: 11px;
+  transition: all 0.2s;
+}
+
+.user-card:hover {
+  background: rgb(255 255 255 / 6%);
+}
+
+.user-avatar {
+  display: grid;
+  flex-shrink: 0;
+  width: 34px;
+  height: 34px;
   color: #fff;
+  font-weight: 700;
+  place-items: center;
+  background: #18a5a6;
+  border-radius: 50%;
+}
+
+.user-copy {
+  min-width: 0;
+}
+
+.user-copy strong {
+  display: block;
+  color: #fff;
+  font-size: 12px;
+}
+
+.user-copy small {
+  display: block;
+  overflow: hidden;
+  margin-top: 2px;
+  color: #8fb7c4;
+  font-size: 9px;
+  letter-spacing: 0.1em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-more {
+  flex-shrink: 0;
+  width: 15px;
+  height: 15px;
+  margin-left: auto;
+  color: #78a0ac;
+}
+
+.user-pop {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 8px);
+  left: 0;
+  padding: 6px;
+  background: #fff;
+  border-radius: 11px;
+  box-shadow: 0 18px 45px rgb(3 25 34 / 45%);
+}
+
+.user-pop button {
+  width: 100%;
+  padding: 9px 10px;
+  color: #25505f;
+  font-size: 12px;
+  text-align: left;
+  background: transparent;
+  border-radius: 8px;
+}
+
+.user-pop button:hover {
+  background: #eef6f8;
 }
 </style>

clinical-web/src/router/index.ts

@@ -36,7 +36,7 @@ const router = createRouter({
               path: 'home',
               name: 'workbench-home',
               component: DashboardView,
-              meta: { title: '首页', group: '工作台' },
+              meta: { title: '首页总览', group: '工作台' },
             },
             {
               path: 'signing',

clinical-web/src/styles/theme.css

@@ -26,6 +26,6 @@
   --font-sans:
     'Microsoft YaHei', 'PingFang SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
     sans-serif;
-  --sidebar-width: 200px;
+  --sidebar-width: 220px;
-  --header-height: 54px;
+  --header-height: 72px;
 }