refactor(clinical-web): 重构医护端布局与路由结构

clinical-web/README.md

@@ -84,4 +84,21 @@ TanStack Vue Query、PDF 预览、报表图表、自动化测试和签字板适
 
 ## 当前状态
 
-已完成 Vite 基础初始化、路由、Pinia、医护端布局和第一版页面骨架。当前工作台、签署任务、文书库、报表和设置页面均使用演示数据，尚未接入真实后端。
+已完成 Vite 基础初始化、路由、Pinia、原型主题 CSS 和医护端整体布局。当前所有业务 View 暂时保留文字占位，尚未接入真实后端。
+
+## 当前路由结构
+
+```text
+ClinicalLayout
+├─ 工作台
+│  ├─ /workbench/home              首页
+│  └─ /workbench/signing           签署工作台
+└─ 管理
+   ├─ /management/documents        文档库管理
+   ├─ /management/reports          报表分析
+   ├─ /management/users            用户与权限
+   ├─ /management/document-permissions  文档权限
+   └─ /management/settings         系统设置
+```
+
+布局拆分为 `Menu`、`Header` 和 `Container` 三个公共组件，页面内容由各自的 View 负责。

clinical-web/src/components/Container.vue

@@ -0,0 +1,5 @@
+<template>
+  <main class="clinical-container">
+    <slot />
+  </main>
+</template>

clinical-web/src/components/Header.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { useAppStore } from '@/stores/app'
+
+const route = useRoute()
+const appStore = useAppStore()
+
+const campuses = ['本部院区', '东院区', '西院区']
+const selectedCampus = ref(campuses[0])
+
+const pageTitle = computed(() => String(route.meta.title ?? '首页'))
+const pageGroup = computed(() => String(route.meta.group ?? '工作台'))
+</script>
+
+<template>
+  <header class="clinical-header">
+    <div class="header-page">
+      <span class="header-title">{{ pageTitle }}</span>
+      <span class="header-breadcrumb">{{ pageGroup }} / {{ pageTitle }}</span>
+    </div>
+    <span class="header-spacer" />
+    <label class="campus-selector">
+      <span class="campus-label">院区</span>
+      <select v-model="selectedCampus" aria-label="选择院区">
+        <option v-for="campus in campuses" :key="campus" :value="campus">{{ campus }}</option>
+      </select>
+    </label>
+    <span class="environment-badge">{{ appStore.environment }}</span>
+  </header>
+</template>

clinical-web/src/components/Menu.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+
+import { useAppStore } from '@/stores/app'
+
+interface MenuItem {
+  path: string
+  label: string
+}
+
+interface MenuGroup {
+  label: string
+  items: MenuItem[]
+}
+
+const appStore = useAppStore()
+
+const menuGroups: MenuGroup[] = [
+  {
+    label: '工作台',
+    items: [
+      { path: '/workbench/home', label: '首页' },
+      { path: '/workbench/signing', label: '签署工作台' },
+    ],
+  },
+  {
+    label: '管理',
+    items: [
+      { path: '/management/documents', label: '文档库管理' },
+      { path: '/management/reports', label: '报表分析' },
+      { path: '/management/users', label: '用户与权限' },
+      { path: '/management/document-permissions', label: '文档权限' },
+      { path: '/management/settings', label: '系统设置' },
+    ],
+  },
+]
+</script>
+
+<template>
+  <aside class="clinical-menu">
+    <div class="menu-brand">
+      <div class="menu-brand-icon" aria-hidden="true">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M14 3v5h5M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z"
+            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>
+      </div>
+    </div>
+
+    <nav class="menu-nav" aria-label="主导航">
+      <div v-for="group in menuGroups" :key="group.label" class="menu-group">
+        <div class="menu-group-title">{{ group.label }}</div>
+        <RouterLink
+          v-for="item in group.items"
+          :key="item.path"
+          :to="item.path"
+          class="menu-item"
+          active-class="is-active"
+        >
+          <span class="menu-dot" aria-hidden="true" />
+          <span>{{ item.label }}</span>
+        </RouterLink>
+      </div>
+    </nav>
+
+    <div class="menu-profile">
+      <div class="menu-profile-avatar">{{ appStore.userName.slice(0, 1) }}</div>
+      <div class="menu-profile-copy">
+        <strong>{{ appStore.userName }}</strong>
+        <span>{{ appStore.department }}</span>
+      </div>
+      <button class="menu-logout" type="button">退出</button>
+    </div>
+  </aside>
+</template>

clinical-web/src/layouts/ClinicalLayout.vue

@@ -1,73 +1,19 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { RouterView } from 'vue-router'
-import { RouterView, useRoute, useRouter } from 'vue-router'
 
-import { useAppStore } from '@/stores/app'
+import Container from '@/components/Container.vue'
-
+import Header from '@/components/Header.vue'
-const route = useRoute()
+import Menu from '@/components/Menu.vue'
-const router = useRouter()
-const appStore = useAppStore()
-
-const menuItems = [
-  { path: '/dashboard', label: '工作台' },
-  { path: '/consent-tasks', label: '签署任务' },
-  { path: '/documents', label: '文书库' },
-  { path: '/reports', label: '统计报表' },
-  { path: '/settings', label: '系统设置' },
-]
-
-const activeMenu = computed(() => route.path)
-const pageTitle = computed(() => String(route.meta.title ?? '医签通'))
-
-function handleMenuSelect(path: string) {
-  if (path !== route.path) {
-    void router.push(path)
-  }
-}
 </script>
 
 <template>
-  <el-container class="clinical-layout">
+  <div class="clinical-layout">
-    <el-aside width="236px" class="clinical-sidebar">
+    <Menu />
-      <div class="brand">
+    <div class="clinical-main">
-        <div class="brand-mark">签</div>
+      <Header />
-        <div>
+      <Container>
-          <strong>医签通</strong>
-          <span>medical-sign</span>
-        </div>
-      </div>
-
-      <el-menu :default-active="activeMenu" class="clinical-menu" @select="handleMenuSelect">
-        <el-menu-item v-for="item in menuItems" :key="item.path" :index="item.path">
-          <span class="menu-dot" />
-          <span>{{ item.label }}</span>
-        </el-menu-item>
-      </el-menu>
-
-      <div class="sidebar-footer">
-        <span class="status-dot" />
-        <span>演示环境运行中</span>
-      </div>
-    </el-aside>
-
-    <el-container>
-      <el-header class="clinical-header">
-        <div>
-          <p class="header-kicker">电子知情同意管理平台</p>
-          <h1>{{ pageTitle }}</h1>
-        </div>
-        <div class="user-context">
-          <div class="user-avatar">{{ appStore.userName.slice(0, 1) }}</div>
-          <div>
-            <strong>{{ appStore.userName }}</strong>
-            <span>{{ appStore.department }}</span>
-          </div>
-        </div>
-      </el-header>
-
-      <el-main class="clinical-main">
         <RouterView />
-      </el-main>
+      </Container>
-    </el-container>
+    </div>
-  </el-container>
+  </div>
 </template>

clinical-web/src/router/index.ts

@@ -3,9 +3,11 @@ import { createRouter, createWebHistory } from 'vue-router'
 import ClinicalLayout from '@/layouts/ClinicalLayout.vue'
 import ConsentTasksView from '@/views/consent-tasks/ConsentTasksView.vue'
 import DashboardView from '@/views/dashboard/DashboardView.vue'
+import DocumentPermissionsView from '@/views/document-permissions/DocumentPermissionsView.vue'
 import DocumentsView from '@/views/documents/DocumentsView.vue'
 import ReportsView from '@/views/reports/ReportsView.vue'
 import SettingsView from '@/views/settings/SettingsView.vue'
+import UserPermissionsView from '@/views/users/UserPermissionsView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -13,39 +15,63 @@ const router = createRouter({
     {
       path: '/',
       component: ClinicalLayout,
-      redirect: '/dashboard',
+      redirect: '/workbench/home',
       children: [
         {
-          path: 'dashboard',
+          path: 'workbench',
-          component: DashboardView,
+          redirect: '/workbench/home',
-          meta: { title: '工作台' },
+          children: [
+            {
+              path: 'home',
+              component: DashboardView,
+              meta: { title: '首页', group: '工作台' },
+            },
+            {
+              path: 'signing',
+              component: ConsentTasksView,
+              meta: { title: '签署工作台', group: '工作台' },
+            },
+          ],
         },
         {
-          path: 'consent-tasks',
+          path: 'management',
-          component: ConsentTasksView,
+          redirect: '/management/documents',
-          meta: { title: '签署任务' },
+          children: [
-        },
+            {
-        {
+              path: 'documents',
-          path: 'documents',
+              component: DocumentsView,
-          component: DocumentsView,
+              meta: { title: '文档库管理', group: '管理' },
-          meta: { title: '文书库' },
+            },
-        },
+            {
-        {
+              path: 'reports',
-          path: 'reports',
+              component: ReportsView,
-          component: ReportsView,
+              meta: { title: '报表分析', group: '管理' },
-          meta: { title: '统计报表' },
+            },
-        },
+            {
-        {
+              path: 'users',
-          path: 'settings',
+              component: UserPermissionsView,
-          component: SettingsView,
+              meta: { title: '用户与权限', group: '管理' },
-          meta: { title: '系统设置' },
+            },
+            {
+              path: 'document-permissions',
+              component: DocumentPermissionsView,
+              meta: { title: '文档权限', group: '管理' },
+            },
+            {
+              path: 'settings',
+              component: SettingsView,
+              meta: { title: '系统设置', group: '管理' },
+            },
+          ],
         },
       ],
     },
-    {
+    { path: '/dashboard', redirect: '/workbench/home' },
-      path: '/:pathMatch(.*)*',
+    { path: '/consent-tasks', redirect: '/workbench/signing' },
-      redirect: '/dashboard',
+    { path: '/documents', redirect: '/management/documents' },
-    },
+    { path: '/reports', redirect: '/management/reports' },
+    { path: '/settings', redirect: '/management/settings' },
+    { path: '/:pathMatch(.*)*', redirect: '/workbench/home' },
   ],
 })
 

clinical-web/src/stores/app.ts

@@ -2,8 +2,8 @@ import { defineStore } from 'pinia'
 
 export const useAppStore = defineStore('app', {
   state: () => ({
-    userName: '演示医生',
+    userName: '张文静',
-    department: '儿科急诊',
+    department: '医务管理 · 主任医师',
-    environment: '演示环境',
+    environment: '原型演示环境',
   }),
 })

clinical-web/src/styles/index.css

@@ -1,572 +1,367 @@
+@import './theme.css';
+
 :root {
-  font-family:
+  font-family: var(--font-sans);
-    Inter,
+  color: var(--ink);
-    ui-sans-serif,
+  background: var(--bg);
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    sans-serif;
-  color: #1d2939;
-  background: #f5f7fa;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 * {
   box-sizing: border-box;
 }
 
+html,
+body,
+#app {
+  width: 100%;
+  min-height: 100%;
+}
+
 body {
-  min-width: 1100px;
+  min-width: 1024px;
   min-height: 100vh;
   margin: 0;
-  background: #f5f7fa;
+  color: var(--ink);
+  background: var(--bg);
+  font-size: 14px;
+  line-height: 1.5;
 }
 
 button,
-input {
+input,
+select,
+textarea {
   font: inherit;
 }
 
 button {
   cursor: pointer;
+  border: 0;
 }
 
-.clinical-layout {
+a {
-  min-height: 100vh;
+  color: inherit;
 }
 
-.clinical-sidebar {
+::-webkit-scrollbar {
-  position: relative;
+  width: 8px;
-  display: flex;
+  height: 8px;
-  flex-direction: column;
-  color: #d6e4ff;
-  background: #11243e;
 }
 
-.brand {
+::-webkit-scrollbar-thumb {
-  display: flex;
+  background: #c3d4db;
-  gap: 12px;
+  border-radius: 4px;
-  align-items: center;
-  height: 88px;
-  padding: 0 24px;
-  border-bottom: 1px solid rgb(255 255 255 / 8%);
 }
 
-.brand-mark {
+::-webkit-scrollbar-track {
-  display: grid;
-  width: 38px;
-  height: 38px;
-  color: #11243e;
-  font-size: 20px;
-  font-weight: 800;
-  place-items: center;
-  border-radius: 12px;
-  background: #93d8ca;
-}
-
-.brand strong,
-.brand span {
-  display: block;
-}
-
-.brand strong {
-  color: #fff;
-  font-size: 18px;
-  letter-spacing: 2px;
-}
-
-.brand span {
-  margin-top: 3px;
-  color: #8fa5c1;
-  font-size: 10px;
-  letter-spacing: 1.2px;
-  text-transform: uppercase;
-}
-
-.clinical-menu {
-  flex: 1;
-  padding: 18px 12px;
-  border-right: 0;
   background: transparent;
 }
 
-.clinical-menu .el-menu-item {
+/* 主框架：侧边菜单 + 顶部 header + 内容 container */
-  height: 48px;
+.clinical-layout {
-  margin: 4px 0;
-  color: #a8bad2;
-  border-radius: 10px;
-}
-
-.clinical-menu .el-menu-item:hover {
-  color: #fff;
-  background: rgb(255 255 255 / 8%);
-}
-
-.clinical-menu .el-menu-item.is-active {
-  color: #fff;
-  background: #274765;
-}
-
-.menu-dot {
-  width: 6px;
-  height: 6px;
-  margin-right: 12px;
-  border-radius: 50%;
-  background: currentcolor;
-}
-
-.sidebar-footer {
   display: flex;
-  gap: 8px;
+  width: 100%;
-  align-items: center;
+  min-height: 100vh;
-  padding: 22px 24px;
+  background: var(--bg);
-  color: #8fa5c1;
-  font-size: 12px;
-}
-
-.status-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: #73d5a5;
-  box-shadow: 0 0 0 4px rgb(115 213 165 / 12%);
-}
-
-.clinical-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 88px;
-  padding: 0 34px;
-  background: #fff;
-  border-bottom: 1px solid #e8edf3;
-}
-
-.header-kicker,
-.eyebrow {
-  margin: 0 0 6px;
-  color: #7e91a8;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 1.3px;
-  text-transform: uppercase;
-}
-
-.clinical-header h1 {
-  margin: 0;
-  color: #172b4d;
-  font-size: 22px;
-}
-
-.user-context {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.user-avatar {
-  display: grid;
-  width: 36px;
-  height: 36px;
-  color: #176b67;
-  font-weight: 700;
-  place-items: center;
-  border-radius: 50%;
-  background: #d9f1ec;
-}
-
-.user-context strong,
-.user-context span {
-  display: block;
-}
-
-.user-context strong {
-  color: #263b59;
-  font-size: 13px;
-}
-
-.user-context span {
-  margin-top: 2px;
-  color: #91a0b3;
-  font-size: 11px;
 }
 
 .clinical-main {
-  padding: 32px 34px 48px;
-}
-
-.page-section {
-  max-width: 1440px;
-  margin: 0 auto;
-}
-
-.page-heading {
   display: flex;
-  align-items: flex-end;
+  flex: 1;
-  justify-content: space-between;
+  flex-direction: column;
-  margin-bottom: 24px;
+  min-width: 0;
+  min-height: 100vh;
 }
 
-.page-heading h2,
+.clinical-menu {
-.welcome-panel h2 {
-  margin: 0;
-  color: #172b4d;
-  font-size: 28px;
-  line-height: 1.25;
-}
-
-.page-heading p:not(.eyebrow) {
-  margin: 8px 0 0;
-  color: #8090a5;
-  font-size: 13px;
-}
-
-.welcome-panel {
   display: flex;
-  align-items: flex-end;
+  flex: 0 0 var(--sidebar-width);
-  justify-content: space-between;
+  flex-direction: column;
-  min-height: 190px;
+  width: var(--sidebar-width);
-  margin-bottom: 20px;
+  color: #c8dde6;
-  padding: 30px 34px;
+  background: var(--side);
-  overflow: hidden;
-  color: #e8f3f5;
-  border-radius: 18px;
-  background:
-    radial-gradient(circle at 84% 18%, rgb(147 216 202 / 24%), transparent 28%),
-    linear-gradient(125deg, #173958, #195d69);
 }
 
-.welcome-panel h2 {
+.menu-brand {
-  max-width: 570px;
-  color: #fff;
-  font-size: 27px;
-}
-
-.welcome-copy {
-  max-width: 600px;
-  margin: 14px 0 0;
-  color: #b9d1d9;
-  font-size: 14px;
-  line-height: 1.7;
-}
-
-.primary-button,
-.secondary-button {
-  min-height: 40px;
-  padding: 0 18px;
-  color: #123148;
-  font-size: 13px;
-  font-weight: 700;
-  border: 0;
-  border-radius: 9px;
-  background: #9bdfd0;
-}
-
-.primary-button:hover {
-  background: #b3ebde;
-}
-
-.secondary-button {
-  color: #176b67;
-  border: 1px solid #bfe2dc;
-  background: #eefaf7;
-}
-
-.stats-row {
-  margin-bottom: 16px;
-}
-
-.stat-card,
-.content-card {
-  border: 1px solid #e9eef4;
-  border-radius: 14px;
-}
-
-.stat-card {
-  min-height: 132px;
-}
-
-.stat-card .el-card__body {
-  padding: 20px;
-}
-
-.stat-topline {
   display: flex;
+  flex-shrink: 0;
+  gap: 10px;
   align-items: center;
-  justify-content: space-between;
+  padding: 18px 16px 16px;
-  color: #7f91a8;
+  border-bottom: 1px solid rgb(255 255 255 / 8%);
-  font-size: 12px;
 }
 
-.stat-indicator {
+.menu-brand-icon {
-  width: 8px;
+  display: grid;
-  height: 8px;
+  flex-shrink: 0;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border-radius: 9px;
+  background: linear-gradient(135deg, #18a0c0, var(--brand));
+}
+
+.menu-brand-copy strong,
+.menu-brand-copy span {
+  display: block;
+}
+
+.menu-brand-copy strong {
+  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%;
 }
 
-.is-orange {
+.menu-item.is-active .menu-dot {
-  background: #f5b45e;
+  background: #5ee0a8;
 }
 
-.is-green {
+.menu-profile {
-  background: #68c795;
-}
-
-.is-red {
-  background: #eb8d8d;
-}
-
-.is-blue {
-  background: #78aee5;
-}
-
-.stat-card strong {
-  display: block;
-  margin: 12px 0 4px;
-  color: #193453;
-  font-size: 27px;
-  letter-spacing: -0.5px;
-}
-
-.stat-card small {
-  color: #91a0b3;
-  font-size: 11px;
-}
-
-.dashboard-grid {
-  margin-bottom: 16px;
-}
-
-.content-card .el-card__header {
-  padding: 20px 22px;
-  border-bottom: 1px solid #edf1f5;
-}
-
-.content-card .el-card__body {
-  padding: 0 22px;
-}
-
-.card-heading {
   display: flex;
+  flex-shrink: 0;
+  gap: 10px;
   align-items: center;
-  justify-content: space-between;
+  padding: 14px 16px;
+  border-top: 1px solid rgb(255 255 255 / 8%);
 }
 
-.card-heading h3 {
+.menu-profile-avatar {
-  margin: 0;
-  color: #203957;
-  font-size: 16px;
-}
-
-.text-button {
-  color: #267d78;
-  font-size: 12px;
-  border: 0;
-  background: transparent;
-}
-
-.task-item {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  min-height: 72px;
-  border-bottom: 1px solid #f0f3f6;
-}
-
-.task-item:last-child {
-  border-bottom: 0;
-}
-
-.task-avatar {
   display: grid;
+  flex-shrink: 0;
   width: 34px;
   height: 34px;
-  color: #456786;
+  color: #fff;
-  font-size: 13px;
+  font-size: 14px;
+  font-weight: 700;
   place-items: center;
-  border-radius: 10px;
+  border-radius: 50%;
-  background: #eaf1f6;
+  background: #18a0c0;
 }
 
-.task-main {
+.menu-profile-copy {
-  flex: 1;
   min-width: 0;
 }
 
-.task-main strong,
+.menu-profile-copy strong,
-.task-main span {
+.menu-profile-copy span {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.task-main strong {
+.menu-profile-copy strong {
-  color: #304968;
+  color: #fff;
   font-size: 13px;
 }
 
-.task-main span {
+.menu-profile-copy span {
-  margin-top: 5px;
+  margin-top: 2px;
-  color: #91a0b3;
+  color: #8fb3c2;
   font-size: 11px;
 }
 
-.reminder-list {
+.menu-logout {
-  margin: 0;
+  flex-shrink: 0;
-  padding: 2px 0 8px;
+  margin-left: auto;
-  list-style: none;
+  padding: 0;
+  color: #8fb3c2;
+  font-size: 11px;
+  background: transparent;
 }
 
-.reminder-list li {
+.menu-logout:hover {
+  color: #fff;
+}
+
+/* 原型中的顶部 header */
+.clinical-header {
   display: flex;
-  gap: 12px;
+  flex-shrink: 0;
-  padding: 16px 0;
+  gap: 14px;
-  border-bottom: 1px solid #f0f3f6;
+  align-items: center;
+  height: var(--header-height);
+  padding: 0 20px;
+  background: #fff;
+  border-bottom: 1px solid var(--line);
 }
 
-.reminder-list li:last-child {
+.header-page {
-  border-bottom: 0;
+  display: flex;
+  gap: 14px;
+  align-items: baseline;
+  min-width: 0;
 }
 
-.reminder-number {
+.header-title {
-  color: #62aa9f;
+  flex-shrink: 0;
-  font-size: 12px;
+  color: var(--ink);
+  font-size: 16px;
   font-weight: 700;
 }
 
-.reminder-list strong,
+.header-breadcrumb {
-.reminder-list span {
+  overflow: hidden;
-  display: block;
+  color: var(--mut);
-}
-
-.reminder-list strong {
-  color: #304968;
   font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.reminder-list div span {
+.header-spacer {
-  margin-top: 5px;
+  flex: 1;
-  color: #91a0b3;
-  font-size: 11px;
-  line-height: 1.5;
 }
 
-.table-card .el-card__body {
+.campus-selector {
-  padding: 22px;
-}
-
-.filter-bar {
   display: flex;
-  gap: 10px;
+  flex-shrink: 0;
-  margin-bottom: 18px;
+  gap: 6px;
-}
-
-.filter-bar .el-input {
-  width: 300px;
-}
-
-.filter-bar .el-select {
-  width: 150px;
-}
-
-.detail-grid {
-  display: grid;
-  grid-template-columns: 90px 1fr;
-  gap: 16px 12px;
   align-items: center;
-  color: #8797aa;
-  font-size: 13px;
 }
 
-.detail-grid strong {
+.campus-label {
-  color: #304968;
+  color: var(--mut);
-  font-weight: 600;
-}
-
-.report-card {
-  min-height: 142px;
-}
-
-.report-card > .el-card__body > span {
-  color: #7f91a8;
   font-size: 12px;
 }
 
-.report-card > .el-card__body > strong {
+.campus-selector select {
-  margin-top: 15px;
+  width: auto;
+  padding: 4px 8px;
+  color: var(--brand-d);
+  font-size: 12.5px;
+  font-weight: 700;
+  background: var(--brand-l);
+  border: 1px solid var(--brand);
+  border-radius: 6px;
 }
 
-.report-placeholder {
+.environment-badge {
-  min-height: 330px;
+  flex-shrink: 0;
+  padding: 3px 8px;
+  color: var(--warn);
+  font-size: 11px;
+  background: var(--warn-l);
+  border-radius: 20px;
 }
 
-.empty-chart {
+/* container 只负责滚动和内边距，页面内容由各 View 提供 */
-  display: grid;
+.clinical-container {
-  min-height: 280px;
+  flex: 1;
-  color: #8797aa;
+  min-height: 0;
+  padding: 18px 20px;
+  overflow-y: auto;
+}
+
+.page-section {
+  width: 100%;
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+.page-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 380px;
+  padding: 48px 32px;
   text-align: center;
-  place-items: center;
+  background: var(--card);
-  align-content: center;
+  border-radius: var(--r);
+  box-shadow: var(--sh);
 }
 
-.chart-icon {
+.placeholder-mark {
   display: grid;
-  width: 52px;
+  width: 54px;
-  height: 52px;
+  height: 54px;
-  margin-bottom: 12px;
+  margin-bottom: 18px;
-  color: #2f8d83;
+  color: var(--brand);
   font-size: 24px;
   place-items: center;
-  border-radius: 16px;
+  background: var(--brand-l);
-  background: #e8f7f3;
+  border-radius: 14px;
 }
 
-.empty-chart h3 {
+.eyebrow {
+  margin-bottom: 6px;
+  color: var(--brand);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+
+.placeholder-title {
   margin: 0;
-  color: #304968;
+  color: var(--ink);
-  font-size: 15px;
+  font-size: 22px;
 }
 
-.empty-chart p {
+.placeholder-copy {
-  margin: 8px 0 0;
+  margin-top: 10px;
-  font-size: 12px;
+  color: var(--mut);
-}
-
-.settings-card {
-  max-width: 780px;
-}
-
-.settings-card .el-card__body {
-  padding: 8px 24px;
-}
-
-.setting-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 86px;
-  border-bottom: 1px solid #f0f3f6;
-}
-
-.setting-row:last-child {
-  border-bottom: 0;
-}
-
-.setting-row strong,
-.setting-row span {
-  display: block;
-}
-
-.setting-row strong {
-  color: #304968;
   font-size: 13px;
 }
 
-.setting-row span {
+@media (max-width: 1200px) {
-  margin-top: 6px;
+  .clinical-container {
-  color: #91a0b3;
+    padding: 16px;
-  font-size: 11px;
+  }
 }

clinical-web/src/styles/theme.css

@@ -0,0 +1,28 @@
+:root {
+  --brand: #0e6e8c;
+  --brand-d: #0a4f66;
+  --brand-l: #e3f0f4;
+  --side: #0a3d51;
+  --bg: #f1f5f7;
+  --card: #ffffff;
+  --ink: #1d3b4a;
+  --mut: #687f8b;
+  --line: #dce7ec;
+  --ok: #0f9d6c;
+  --ok-l: #e2f5ec;
+  --warn: #d9821f;
+  --warn-l: #fbf0dd;
+  --err: #d0534f;
+  --err-l: #fbe9e8;
+  --info: #3a7bd5;
+  --info-l: #e7effb;
+  --r: 10px;
+  --sh: 0 2px 10px rgb(13 62 81 / 7%);
+  --sh-hover: 0 6px 20px rgb(14 110 140 / 18%);
+  --sh-modal: 0 20px 60px rgb(0 0 0 / 30%);
+  --font-sans:
+    'Microsoft YaHei', 'PingFang SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    sans-serif;
+  --sidebar-width: 200px;
+  --header-height: 54px;
+}

clinical-web/src/views/consent-tasks/ConsentTasksView.vue

@@ -1,139 +1,10 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-import type { ConsentTask, ConsentTaskStatus } from '@/types/consent'
-
-const statusLabel: Record<ConsentTaskStatus, string> = {
-  pending: '待签署',
-  signed: '已完成',
-  rejected: '已拒签',
-  expired: '已过期',
-}
-
-const statusType: Record<ConsentTaskStatus, 'success' | 'warning' | 'danger' | 'info'> = {
-  pending: 'warning',
-  signed: 'success',
-  rejected: 'danger',
-  expired: 'info',
-}
-
-const tasks: ConsentTask[] = [
-  {
-    id: 'CT-20260827-001',
-    patientName: '张*',
-    visitNo: 'MZ20260827018',
-    documentName: '儿科急诊特殊检查知情同意书',
-    source: '儿科急诊 · 门诊',
-    status: 'pending',
-    updatedAt: '刚刚',
-  },
-  {
-    id: 'CT-20260827-002',
-    patientName: '李*',
-    visitNo: 'MZ20260827012',
-    documentName: '消化内镜检查知情同意书',
-    source: '消化内科 · 门诊',
-    status: 'signed',
-    updatedAt: '8 分钟前',
-  },
-  {
-    id: 'CT-20260827-003',
-    patientName: '王*',
-    visitNo: 'ZY20260826009',
-    documentName: '麻醉知情同意书',
-    source: '消化内科 · 住院',
-    status: 'pending',
-    updatedAt: '21 分钟前',
-  },
-  {
-    id: 'CT-20260827-004',
-    patientName: '赵*',
-    visitNo: 'MZ20260827003',
-    documentName: '气管插管知情同意书',
-    source: '儿科急诊 · 门诊',
-    status: 'rejected',
-    updatedAt: '今天 09:42',
-  },
-]
-
-const selectedTask = ref<ConsentTask | null>(null)
-const isDetailVisible = ref(false)
-
-function getStatusLabel(status: string) {
-  return statusLabel[status as ConsentTaskStatus] ?? '未知状态'
-}
-
-function getStatusType(status: string) {
-  return statusType[status as ConsentTaskStatus] ?? 'info'
-}
-
-function openTask(task: ConsentTask) {
-  selectedTask.value = task
-  isDetailVisible.value = true
-}
-</script>
-
 <template>
   <section class="page-section">
-    <div class="page-heading">
+    <div class="page-placeholder">
-      <div>
+      <div class="placeholder-mark" aria-hidden="true">✍</div>
-        <p class="eyebrow">任务中心</p>
+      <p class="eyebrow">工作台</p>
-        <h2>签署任务</h2>
+      <h2 class="placeholder-title">签署工作台</h2>
-        <p>按患者、就诊和文书任务查看当前签署进度。</p>
+      <p class="placeholder-copy">签署工作台页面占位，待根据 Web 端需求实现。</p>
-      </div>
-      <button class="primary-button" type="button">新建签署任务</button>
     </div>
-
-    <el-card shadow="never" class="content-card table-card">
-      <div class="filter-bar">
-        <el-input placeholder="搜索患者、门诊号或任务编号" clearable />
-        <el-select placeholder="全部状态" clearable>
-          <el-option label="待签署" value="pending" />
-          <el-option label="已完成" value="signed" />
-          <el-option label="已拒签" value="rejected" />
-          <el-option label="已过期" value="expired" />
-        </el-select>
-        <el-button>筛选</el-button>
-      </div>
-
-      <el-table :data="tasks" stripe>
-        <el-table-column prop="id" label="任务编号" min-width="160" />
-        <el-table-column prop="patientName" label="患者" width="90" />
-        <el-table-column prop="visitNo" label="就诊号" min-width="150" />
-        <el-table-column prop="documentName" label="文书" min-width="270" />
-        <el-table-column prop="source" label="来源" min-width="160" />
-        <el-table-column label="状态" width="110">
-          <template #default="{ row }">
-            <el-tag :type="getStatusType(row.status)" effect="plain">
-              {{ getStatusLabel(row.status) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="updatedAt" label="更新时间" width="120" />
-        <el-table-column label="操作" width="90" fixed="right">
-          <template #default="{ row }">
-            <el-button link type="primary" @click="openTask(row)">查看</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-
-    <el-dialog v-model="isDetailVisible" title="签署任务详情" width="520px">
-      <template v-if="selectedTask">
-        <div class="detail-grid">
-          <span>任务编号</span><strong>{{ selectedTask.id }}</strong> <span>患者</span
-          ><strong>{{ selectedTask.patientName }}</strong> <span>就诊号</span
-          ><strong>{{ selectedTask.visitNo }}</strong> <span>文书</span
-          ><strong>{{ selectedTask.documentName }}</strong>
-          <span>当前状态</span>
-          <el-tag :type="statusType[selectedTask.status]">
-            {{ statusLabel[selectedTask.status] }}
-          </el-tag>
-        </div>
-      </template>
-      <template #footer>
-        <el-button @click="isDetailVisible = false">关闭</el-button>
-      </template>
-    </el-dialog>
   </section>
 </template>

clinical-web/src/views/dashboard/DashboardView.vue

@@ -1,123 +1,10 @@
-<script setup lang="ts">
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-
-const stats = [
-  { label: '待签署任务', value: '12', hint: '较昨日 +3', tone: 'orange' },
-  { label: '今日已完成', value: '86', hint: '完成率 91%', tone: 'green' },
-  { label: '待回传记录', value: '2', hint: '需要关注', tone: 'red' },
-  { label: '本月签署量', value: '2,486', hint: '较上月 +12%', tone: 'blue' },
-]
-
-const recentTasks = [
-  { patient: '张*', document: '儿科急诊特殊检查知情同意书', status: '待签署', time: '刚刚' },
-  { patient: '李*', document: '消化内镜检查知情同意书', status: '已完成', time: '8 分钟前' },
-  { patient: '王*', document: '麻醉知情同意书', status: '待回传', time: '21 分钟前' },
-]
-
-function goToTasks() {
-  void router.push('/consent-tasks')
-}
-</script>
-
 <template>
   <section class="page-section">
-    <div class="welcome-panel">
+    <div class="page-placeholder">
-      <div>
+      <div class="placeholder-mark" aria-hidden="true">⌂</div>
-        <p class="eyebrow">今日概览</p>
+      <p class="eyebrow">工作台</p>
-        <h2>把每一次知情同意，准确关联到本次就诊。</h2>
+      <h2 class="placeholder-title">首页</h2>
-        <p class="welcome-copy">
+      <p class="placeholder-copy">首页页面占位，待根据 Web 端需求实现。</p>
-          从电子病历发起签署任务，实时查看患者签署状态，并为后续回传和审计保留证据。
-        </p>
-      </div>
-      <button class="primary-button" type="button" @click="goToTasks">查看签署任务</button>
     </div>
-
-    <el-row :gutter="16" class="stats-row">
-      <el-col v-for="stat in stats" :key="stat.label" :xs="24" :sm="12" :lg="6">
-        <el-card shadow="never" class="stat-card">
-          <div class="stat-topline">
-            <span>{{ stat.label }}</span>
-            <span class="stat-indicator" :class="'is-' + stat.tone" />
-          </div>
-          <strong>{{ stat.value }}</strong>
-          <small>{{ stat.hint }}</small>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="16" class="dashboard-grid">
-      <el-col :xs="24" :lg="15">
-        <el-card shadow="never" class="content-card">
-          <template #header>
-            <div class="card-heading">
-              <div>
-                <p class="eyebrow">实时动态</p>
-                <h3>最近签署任务</h3>
-              </div>
-              <button class="text-button" type="button" @click="goToTasks">查看全部</button>
-            </div>
-          </template>
-          <div class="task-list">
-            <div v-for="task in recentTasks" :key="task.patient + task.time" class="task-item">
-              <div class="task-avatar">{{ task.patient.slice(0, 1) }}</div>
-              <div class="task-main">
-                <strong>{{ task.document }}</strong>
-                <span>{{ task.patient }} · {{ task.time }}</span>
-              </div>
-              <el-tag
-                :type="
-                  task.status === '已完成'
-                    ? 'success'
-                    : task.status === '待回传'
-                      ? 'warning'
-                      : 'info'
-                "
-                effect="plain"
-              >
-                {{ task.status }}
-              </el-tag>
-            </div>
-          </div>
-        </el-card>
-      </el-col>
-
-      <el-col :xs="24" :lg="9">
-        <el-card shadow="never" class="content-card">
-          <template #header>
-            <div class="card-heading">
-              <div>
-                <p class="eyebrow">下一步</p>
-                <h3>今日提醒</h3>
-              </div>
-            </div>
-          </template>
-          <ul class="reminder-list">
-            <li>
-              <span class="reminder-number">01</span>
-              <div>
-                <strong>2 条签署结果待回传</strong>
-                <span>请确认电子病历历史记录是否更新。</span>
-              </div>
-            </li>
-            <li>
-              <span class="reminder-number">02</span>
-              <div>
-                <strong>签署一项文书版本</strong>
-                <span>消化内镜文书有一个待审核版本。</span>
-              </div>
-            </li>
-            <li>
-              <span class="reminder-number">03</span>
-              <div>
-                <strong>设备状态正常</strong>
-                <span>护士站签字板最近一次心跳在 1 分钟前。</span>
-              </div>
-            </li>
-          </ul>
-        </el-card>
-      </el-col>
-    </el-row>
   </section>
 </template>

clinical-web/src/views/document-permissions/DocumentPermissionsView.vue

@@ -0,0 +1,10 @@
+<template>
+  <section class="page-section">
+    <div class="page-placeholder">
+      <div class="placeholder-mark" aria-hidden="true">⊞</div>
+      <p class="eyebrow">管理</p>
+      <h2 class="placeholder-title">文档权限</h2>
+      <p class="placeholder-copy">文档权限页面占位，待根据 Web 端需求实现。</p>
+    </div>
+  </section>
+</template>

clinical-web/src/views/documents/DocumentsView.vue

@@ -1,60 +1,10 @@
-<script setup lang="ts">
-const documents = [
-  {
-    name: '儿科急诊特殊检查知情同意书',
-    department: '儿科急诊',
-    version: 'V1.2',
-    status: '使用中',
-    updatedAt: '2026-08-26',
-  },
-  {
-    name: '消化内镜检查知情同意书',
-    department: '消化内科',
-    version: 'V2.0',
-    status: '使用中',
-    updatedAt: '2026-08-25',
-  },
-  {
-    name: '息肉切除术知情同意书',
-    department: '消化内科',
-    version: 'V1.0',
-    status: '待审核',
-    updatedAt: '2026-08-24',
-  },
-]
-</script>
-
 <template>
   <section class="page-section">
-    <div class="page-heading">
+    <div class="page-placeholder">
-      <div>
+      <div class="placeholder-mark" aria-hidden="true">▤</div>
-        <p class="eyebrow">模板中心</p>
+      <p class="eyebrow">管理</p>
-        <h2>文书库</h2>
+      <h2 class="placeholder-title">文档库管理</h2>
-        <p>维护知情同意文书、版本和适用科室。</p>
+      <p class="placeholder-copy">文档库管理页面占位，待根据 Web 端需求实现。</p>
-      </div>
-      <button class="primary-button" type="button">新建文书</button>
     </div>
-
-    <el-card shadow="never" class="content-card table-card">
-      <el-table :data="documents" stripe>
-        <el-table-column prop="name" label="文书名称" min-width="300" />
-        <el-table-column prop="department" label="适用科室" width="140" />
-        <el-table-column prop="version" label="版本" width="100" />
-        <el-table-column label="状态" width="120">
-          <template #default="{ row }">
-            <el-tag :type="row.status === '使用中' ? 'success' : 'warning'" effect="plain">
-              {{ row.status }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="updatedAt" label="更新时间" width="140" />
-        <el-table-column label="操作" width="160">
-          <template #default>
-            <el-button link type="primary">预览</el-button>
-            <el-button link>版本记录</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
   </section>
 </template>

clinical-web/src/views/reports/ReportsView.vue

@@ -1,38 +1,10 @@
-<script setup lang="ts">
-const reportCards = [
-  { label: '本月签署总量', value: '2,486', note: '覆盖 18 个科室' },
-  { label: '手机签署占比', value: '78.6%', note: '试运行统计' },
-  { label: '平均签署耗时', value: '2m 18s', note: '从发起到完成' },
-]
-</script>
-
 <template>
   <section class="page-section">
-    <div class="page-heading">
+    <div class="page-placeholder">
-      <div>
+      <div class="placeholder-mark" aria-hidden="true">↗</div>
-        <p class="eyebrow">数据观察</p>
+      <p class="eyebrow">管理</p>
-        <h2>统计报表</h2>
+      <h2 class="placeholder-title">报表分析</h2>
-        <p>查看签署量、渠道、科室和异常任务统计。</p>
+      <p class="placeholder-copy">报表分析页面占位，待根据 Web 端需求实现。</p>
-      </div>
-      <button class="secondary-button" type="button">导出报表</button>
     </div>
-
-    <el-row :gutter="16" class="stats-row">
-      <el-col v-for="card in reportCards" :key="card.label" :xs="24" :sm="8">
-        <el-card shadow="never" class="stat-card report-card">
-          <span>{{ card.label }}</span>
-          <strong>{{ card.value }}</strong>
-          <small>{{ card.note }}</small>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <el-card shadow="never" class="content-card report-placeholder">
-      <div class="empty-chart">
-        <div class="chart-icon">↗</div>
-        <h3>趋势图表将在接入真实数据后展示</h3>
-        <p>当前页面用于确认报表入口和信息层级，暂使用演示数据。</p>
-      </div>
-    </el-card>
   </section>
 </template>

clinical-web/src/views/settings/SettingsView.vue

@@ -1,45 +1,10 @@
-<script setup lang="ts">
-import { reactive } from 'vue'
-
-const settings = reactive({
-  enableSms: true,
-  enableAutoReturn: true,
-  enableAuditReminder: true,
-})
-</script>
-
 <template>
   <section class="page-section">
-    <div class="page-heading">
+    <div class="page-placeholder">
-      <div>
+      <div class="placeholder-mark" aria-hidden="true">⚙</div>
-        <p class="eyebrow">平台配置</p>
+      <p class="eyebrow">管理</p>
-        <h2>系统设置</h2>
+      <h2 class="placeholder-title">系统设置</h2>
-        <p>管理签署渠道、回传策略和审计提醒。</p>
+      <p class="placeholder-copy">系统设置页面占位，待根据 Web 端需求实现。</p>
-      </div>
     </div>
-
-    <el-card shadow="never" class="content-card settings-card">
-      <div class="setting-row">
-        <div>
-          <strong>启用手机短信签署</strong>
-          <span>允许患者通过短信链接打开签署页面。</span>
-        </div>
-        <el-switch v-model="settings.enableSms" />
-      </div>
-      <div class="setting-row">
-        <div>
-          <strong>签署完成后自动回传</strong>
-          <span>签署成功后，将状态和文件回传电子病历。</span>
-        </div>
-        <el-switch v-model="settings.enableAutoReturn" />
-      </div>
-      <div class="setting-row">
-        <div>
-          <strong>启用异常审计提醒</strong>
-          <span>对拒签、过期和回传失败任务生成提醒。</span>
-        </div>
-        <el-switch v-model="settings.enableAuditReminder" />
-      </div>
-    </el-card>
   </section>
 </template>

clinical-web/src/views/users/UserPermissionsView.vue

@@ -0,0 +1,10 @@
+<template>
+  <section class="page-section">
+    <div class="page-placeholder">
+      <div class="placeholder-mark" aria-hidden="true">◉</div>
+      <p class="eyebrow">管理</p>
+      <h2 class="placeholder-title">用户与权限</h2>
+      <p class="placeholder-copy">用户与权限页面占位，待根据 Web 端需求实现。</p>
+    </div>
+  </section>
+</template>