From e7aa4843b7ff2bc874b0e024697f3928e9e9becc Mon Sep 17 00:00:00 2001
From: yelan <wzqf99@foxmail.com>
Date: Thu, 27 Aug 2026 16:47:31 +0800
Subject: [PATCH] feat(documents): implement document library management

---
 .../components/DocumentFilterTabs.vue         | 122 +++++++
 .../components/DocumentLibraryHeader.vue      | 148 ++++++++
 .../components/DocumentPreviewDialog.vue      | 320 ++++++++++++++++++
 .../components/DocumentTemplateCard.vue       | 216 ++++++++++++
 .../src/views/management/documents/index.vue  | 295 +++++++++++++++-
 .../src/views/management/documents/mock.ts    | 240 +++++++++++++
 .../src/views/management/documents/types.ts   |  54 ++-
 7 files changed, 1378 insertions(+), 17 deletions(-)
 create mode 100644 clinical-web/src/views/management/documents/components/DocumentFilterTabs.vue
 create mode 100644 clinical-web/src/views/management/documents/components/DocumentLibraryHeader.vue
 create mode 100644 clinical-web/src/views/management/documents/components/DocumentPreviewDialog.vue
 create mode 100644 clinical-web/src/views/management/documents/components/DocumentTemplateCard.vue
 create mode 100644 clinical-web/src/views/management/documents/mock.ts

diff --git a/clinical-web/src/views/management/documents/components/DocumentFilterTabs.vue b/clinical-web/src/views/management/documents/components/DocumentFilterTabs.vue
new file mode 100644
index 0000000..9b2f410
--- /dev/null
+++ b/clinical-web/src/views/management/documents/components/DocumentFilterTabs.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { DepartmentTab, DocumentStatus, StatusTab } from '../types'
+
+defineProps<{
+  department: string | null
+  status: DocumentStatus
+  departments: DepartmentTab[]
+  statuses: StatusTab[]
+}>()
+
+const emit = defineEmits<{
+  'update:department': [value: string | null]
+  'update:status': [value: DocumentStatus]
+}>()
+</script>
+
+<template>
+  <div class="filter-card">
+    <div class="department-tabs" role="tablist" aria-label="按科室筛选">
+      <button
+        v-for="tab in departments"
+        :key="tab.key ?? 'all'"
+        type="button"
+        class="department-tab"
+        :class="{ active: department === tab.key }"
+        :aria-selected="department === tab.key"
+        role="tab"
+        @click="emit('update:department', tab.key)"
+      >
+        {{ tab.label }}（{{ tab.count }}）
+      </button>
+    </div>
+
+    <div class="status-tabs" role="tablist" aria-label="按状态筛选">
+      <button
+        v-for="tab in statuses"
+        :key="tab.key"
+        type="button"
+        class="status-tab"
+        :class="{ active: status === tab.key }"
+        :aria-selected="status === tab.key"
+        role="tab"
+        @click="emit('update:status', tab.key)"
+      >
+        {{ tab.label }}<span v-if="tab.count"> · {{ tab.count }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.filter-card {
+  padding: 12px 16px;
+  margin-bottom: 12px;
+  background: var(--card);
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+}
+
+.department-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.department-tab {
+  padding: 5px 12px;
+  color: var(--mut);
+  font-size: 12.5px;
+  background: #f4f8fa;
+  border: 1px solid transparent;
+  border-radius: 16px;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.department-tab:hover {
+  color: var(--brand);
+  background: #eaf2f5;
+}
+
+.department-tab.active {
+  color: #fff;
+  font-weight: 700;
+  background: var(--brand);
+}
+
+.status-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding-top: 10px;
+  border-top: 1px dashed var(--line);
+}
+
+.status-tab {
+  padding: 4px 10px;
+  color: var(--mut);
+  font-size: 12px;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.status-tab:hover {
+  color: var(--brand);
+  border-color: var(--brand);
+}
+
+.status-tab.active {
+  color: var(--brand-d);
+  font-weight: 700;
+  background: var(--brand-l);
+  border-color: var(--brand);
+}
+</style>
diff --git a/clinical-web/src/views/management/documents/components/DocumentLibraryHeader.vue b/clinical-web/src/views/management/documents/components/DocumentLibraryHeader.vue
new file mode 100644
index 0000000..5138e52
--- /dev/null
+++ b/clinical-web/src/views/management/documents/components/DocumentLibraryHeader.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: string
+  total: number
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  add: []
+  export: []
+}>()
+
+function handleInput(event: Event) {
+  emit('update:modelValue', (event.target as HTMLInputElement).value)
+}
+</script>
+
+<template>
+  <div class="library-header">
+    <div class="library-title">
+      <h2>文档库管理</h2>
+      <p>
+        按科室分类的知情同意书模板库，支持预览、编辑与版本管理。
+        <span>共 {{ total }} 份模板</span>
+      </p>
+    </div>
+
+    <div class="library-tools">
+      <input
+        :value="props.modelValue"
+        class="library-search"
+        type="search"
+        placeholder="搜索模板名称 / 编号 / 科室"
+        aria-label="搜索模板名称、编号或科室"
+        @input="handleInput"
+      />
+      <button type="button" class="tool-button primary" @click="emit('add')">
+        <span aria-hidden="true">＋</span>
+        新增文档
+      </button>
+      <button type="button" class="tool-button secondary" @click="emit('export')">
+        导出模板包
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.library-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+
+.library-title {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.library-title h2 {
+  margin: 0;
+  color: var(--ink);
+  font-size: 17px;
+  line-height: 1.4;
+}
+
+.library-title p {
+  margin: 0;
+  color: var(--mut);
+  font-size: 12.5px;
+}
+
+.library-title p span {
+  margin-left: 8px;
+  color: var(--brand);
+  font-weight: 700;
+}
+
+.library-tools {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+
+.library-search {
+  width: 240px;
+  padding: 6px 12px;
+  color: var(--ink);
+  font-size: 12.5px;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+
+.library-search:focus {
+  outline: none;
+  border-color: var(--brand);
+  box-shadow: 0 0 0 3px rgb(14 110 140 / 10%);
+}
+
+.tool-button {
+  padding: 7px 13px;
+  font-size: 12px;
+  font-weight: 700;
+  border-radius: 7px;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.tool-button.primary {
+  color: #fff;
+  background: var(--brand);
+  border: 1px solid var(--brand);
+}
+
+.tool-button.primary:hover {
+  background: var(--brand-d);
+  border-color: var(--brand-d);
+}
+
+.tool-button.secondary {
+  color: var(--brand);
+  background: #fff;
+  border: 1px solid var(--brand);
+}
+
+.tool-button.secondary:hover {
+  background: var(--brand-l);
+}
+
+@media (max-width: 760px) {
+  .library-tools {
+    width: 100%;
+  }
+
+  .library-search {
+    flex: 1;
+    min-width: 180px;
+  }
+}
+</style>
diff --git a/clinical-web/src/views/management/documents/components/DocumentPreviewDialog.vue b/clinical-web/src/views/management/documents/components/DocumentPreviewDialog.vue
new file mode 100644
index 0000000..4624197
--- /dev/null
+++ b/clinical-web/src/views/management/documents/components/DocumentPreviewDialog.vue
@@ -0,0 +1,320 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { documentStatusLabels } from '../mock'
+import type { DocumentTemplate } from '../types'
+
+const props = defineProps<{
+  visible: boolean
+  template: DocumentTemplate | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  use: [template: DocumentTemplate]
+}>()
+
+const statusLabel = computed(() => {
+  if (!props.template) {
+    return ''
+  }
+
+  return documentStatusLabels[props.template.status]
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="visible && template"
+      class="dialog-mask"
+      role="presentation"
+      @click.self="emit('close')"
+    >
+      <section
+        class="preview-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="document-preview-title"
+      >
+        <header class="dialog-header">
+          <div class="dialog-title">
+            <h2 id="document-preview-title">{{ template.name }}</h2>
+            <span class="word-badge">类 Word 版式</span>
+            <span class="status-badge">{{ statusLabel }}</span>
+          </div>
+          <button type="button" class="close-button" aria-label="关闭预览" @click="emit('close')">
+            ×
+          </button>
+        </header>
+
+        <div class="dialog-body">
+          <article class="preview-paper">
+            <h3>{{ template.name }}</h3>
+            <p class="paper-number">模板编号：{{ template.code }} · 版本 {{ template.version }}</p>
+            <p>
+              患者：<strong>｛患者姓名｝</strong> · 性别：<strong>｛性别｝</strong> · 年龄：<strong
+                >｛年龄｝</strong
+              >
+            </p>
+            <p>
+              门诊/住院号：<strong>｛就诊号｝</strong> · 科室：<strong>{{
+                template.department
+              }}</strong>
+              · 日期：<strong>｛签署日期｝</strong>
+            </p>
+            <p>
+              医务人员已就本项检查、治疗的适应证、禁忌证、医疗风险、替代方案及可能出现的不良后果向本人（或授权委托人）充分说明，本人已完全理解上述内容，自愿接受并签署确认。
+            </p>
+            <p>
+              本文档采用电子方式签署，患者手写签名图片将合成至下方签名域，文档原件与签名原图双留存。
+            </p>
+
+            <div class="signature-area">
+              <div>
+                <span>患者 / 授权委托人签名：</span>
+                <div class="signature-line">签名域（自动合成）</div>
+              </div>
+              <div>
+                <span>日期：</span>
+                <div class="signature-line date-line">自动填充</div>
+              </div>
+            </div>
+          </article>
+        </div>
+
+        <footer class="dialog-footer">
+          <p>占位符由系统在签署时自动填充，当前仅用于原型演示。</p>
+          <button type="button" class="footer-button secondary" @click="emit('close')">关闭</button>
+          <button type="button" class="footer-button primary" @click="emit('use', template)">
+            用此模板发起签署
+          </button>
+        </footer>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.dialog-mask {
+  position: fixed;
+  z-index: 20;
+  inset: 0;
+  display: flex;
+  padding: 16px;
+  overflow-y: auto;
+  background: rgb(9 40 52 / 45%);
+}
+
+.preview-dialog {
+  display: flex;
+  flex-direction: column;
+  width: 720px;
+  max-width: 96vw;
+  max-height: calc(100vh - 32px);
+  margin: auto;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: var(--sh-modal);
+  animation: dialog-pop 0.18s ease;
+}
+
+@keyframes dialog-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.dialog-header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.dialog-title {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.dialog-title h2 {
+  margin: 0;
+  overflow: hidden;
+  color: var(--ink);
+  font-size: 15px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.word-badge,
+.status-badge {
+  padding: 3px 9px;
+  font-size: 11px;
+  font-weight: 700;
+  border-radius: 12px;
+}
+
+.word-badge {
+  color: var(--brand);
+  background: var(--brand-l);
+}
+
+.status-badge {
+  color: var(--ok);
+  background: var(--ok-l);
+}
+
+.close-button {
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--mut);
+  font-size: 20px;
+  line-height: 1;
+  background: transparent;
+}
+
+.close-button:hover {
+  color: var(--ink);
+}
+
+.dialog-body {
+  min-height: 0;
+  padding: 12px 18px;
+  overflow-y: auto;
+}
+
+.preview-paper {
+  min-height: 420px;
+  padding: 26px 34px;
+  color: var(--ink);
+  font-size: 13px;
+  line-height: 1.9;
+  background: #fff;
+  border: 1px solid #eef4f6;
+  box-shadow: 0 1px 5px rgb(13 62 81 / 5%);
+}
+
+.preview-paper h3 {
+  margin: 0 0 6px;
+  color: var(--ink);
+  font-size: 17px;
+  text-align: center;
+  letter-spacing: 2px;
+}
+
+.preview-paper p {
+  margin: 0 0 7px;
+  text-indent: 2em;
+  text-align: justify;
+}
+
+.preview-paper .paper-number {
+  margin-bottom: 18px;
+  color: var(--mut);
+  font-size: 12px;
+  text-align: center;
+  text-indent: 0;
+}
+
+.signature-area {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+  align-items: flex-end;
+  margin-top: 22px;
+}
+
+.signature-area > div > span {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--mut);
+  font-size: 12.5px;
+}
+
+.signature-line {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 200px;
+  min-height: 64px;
+  color: var(--mut);
+  border-bottom: 2px dashed var(--line);
+}
+
+.signature-line.date-line {
+  min-width: 130px;
+}
+
+.dialog-footer {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 18px;
+  background: #f8fbfc;
+  border-top: 1px solid var(--line);
+}
+
+.dialog-footer p {
+  max-width: 46%;
+  margin: 0;
+  overflow: hidden;
+  color: var(--mut);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.footer-button {
+  padding: 7px 13px;
+  font-size: 12px;
+  font-weight: 700;
+  border-radius: 7px;
+}
+
+.footer-button.secondary {
+  margin-left: auto;
+  color: var(--brand);
+  background: #fff;
+  border: 1px solid var(--brand);
+}
+
+.footer-button.primary {
+  color: #fff;
+  background: var(--brand);
+  border: 1px solid var(--brand);
+}
+
+.footer-button:hover {
+  filter: brightness(0.96);
+}
+
+@media (max-width: 680px) {
+  .preview-paper {
+    padding: 22px 18px;
+  }
+
+  .dialog-footer {
+    flex-wrap: wrap;
+  }
+
+  .dialog-footer p {
+    width: 100%;
+    max-width: none;
+  }
+
+  .footer-button.secondary {
+    margin-left: 0;
+  }
+}
+</style>
diff --git a/clinical-web/src/views/management/documents/components/DocumentTemplateCard.vue b/clinical-web/src/views/management/documents/components/DocumentTemplateCard.vue
new file mode 100644
index 0000000..016ba1a
--- /dev/null
+++ b/clinical-web/src/views/management/documents/components/DocumentTemplateCard.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { documentStatusLabels } from '../mock'
+import type { DocumentTemplate } from '../types'
+
+const props = defineProps<{
+  template: DocumentTemplate
+}>()
+
+const emit = defineEmits<{
+  preview: [template: DocumentTemplate]
+  edit: [template: DocumentTemplate]
+  initiate: [template: DocumentTemplate]
+}>()
+
+const statusLabel = computed(() => documentStatusLabels[props.template.status])
+</script>
+
+<template>
+  <article class="template-card">
+    <div class="template-head">
+      <h3 :title="template.name">{{ template.name }}</h3>
+      <span class="template-status" :class="'status-' + template.status">
+        <i aria-hidden="true" />
+        {{ statusLabel }}
+      </span>
+    </div>
+
+    <p class="template-meta">
+      {{ template.code }} · {{ template.version }} · {{ template.department }}
+    </p>
+    <p class="template-description">{{ template.description }}</p>
+
+    <div class="template-footer">
+      <span class="department-tag">
+        <i aria-hidden="true" />
+        {{ template.department }}
+      </span>
+      <div class="template-actions">
+        <button type="button" class="card-button" @click="emit('preview', template)">预览</button>
+        <button type="button" class="card-button" @click="emit('edit', template)">编辑</button>
+        <button type="button" class="card-button primary" @click="emit('initiate', template)">
+          发起
+        </button>
+      </div>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.template-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  padding: 16px;
+  background: var(--card);
+  border: 1px solid transparent;
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    transform 0.15s ease;
+}
+
+.template-card:hover {
+  border-color: var(--brand);
+  box-shadow: var(--sh-hover);
+  transform: translateY(-1px);
+}
+
+.template-head {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.template-head h3 {
+  display: -webkit-box;
+  flex: 1;
+  margin: 0;
+  overflow: hidden;
+  color: var(--ink);
+  font-size: 14px;
+  line-height: 1.4;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.template-status {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 5px;
+  align-items: center;
+  padding: 3px 9px;
+  font-size: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+  border-radius: 12px;
+}
+
+.template-status i {
+  width: 6px;
+  height: 6px;
+  background: currentColor;
+  border-radius: 50%;
+}
+
+.status-enabled {
+  color: var(--ok);
+  background: var(--ok-l);
+}
+
+.status-draft {
+  color: #8a9aa3;
+  background: #eceef0;
+}
+
+.status-archived {
+  color: #8a9aa3;
+  background: #eceef0;
+}
+
+.status-review {
+  color: var(--warn);
+  background: var(--warn-l);
+}
+
+.template-meta {
+  margin: 0;
+  overflow: hidden;
+  color: var(--mut);
+  font-size: 11.5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.template-description {
+  flex: 1;
+  display: -webkit-box;
+  min-height: 58px;
+  margin: 0;
+  overflow: hidden;
+  color: var(--mut);
+  font-size: 12px;
+  line-height: 1.6;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.template-footer {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 4px;
+}
+
+.department-tag {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 5px;
+  align-items: center;
+  padding: 3px 9px;
+  color: var(--brand);
+  font-size: 11px;
+  font-weight: 700;
+  background: var(--brand-l);
+  border-radius: 12px;
+}
+
+.department-tag i {
+  width: 5px;
+  height: 5px;
+  background: currentColor;
+  border-radius: 50%;
+}
+
+.template-actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: 6px;
+}
+
+.card-button {
+  padding: 4px 9px;
+  color: var(--brand);
+  font-size: 12px;
+  background: #fff;
+  border: 1px solid var(--brand);
+  border-radius: 5px;
+}
+
+.card-button:hover {
+  background: var(--brand-l);
+}
+
+.card-button.primary {
+  color: #fff;
+  background: var(--brand);
+}
+
+.card-button.primary:hover {
+  background: var(--brand-d);
+}
+
+@media (max-width: 680px) {
+  .template-footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/clinical-web/src/views/management/documents/index.vue b/clinical-web/src/views/management/documents/index.vue
index 707c6de..69d6b34 100644
--- a/clinical-web/src/views/management/documents/index.vue
+++ b/clinical-web/src/views/management/documents/index.vue
@@ -1,12 +1,293 @@
 <script setup lang="ts">
-import PagePlaceholder from '@/components/PagePlaceholder.vue'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+import DocumentFilterTabs from './components/DocumentFilterTabs.vue'
+import DocumentLibraryHeader from './components/DocumentLibraryHeader.vue'
+import DocumentPreviewDialog from './components/DocumentPreviewDialog.vue'
+import DocumentTemplateCard from './components/DocumentTemplateCard.vue'
+import { documentLibrary, documentStatusOptions } from './mock'
+import type {
+  DepartmentTab,
+  DocumentDepartment,
+  DocumentFilterForm,
+  DocumentTemplate,
+  StatusTab,
+} from './types'
+
+const loading = ref(true)
+const library = ref<DocumentDepartment[]>([])
+const selectedTemplate = ref<DocumentTemplate | null>(null)
+
+const filters = reactive<DocumentFilterForm>({
+  keyword: '',
+  department: null,
+  status: 'enabled',
+})
+
+const allTemplates = computed<DocumentTemplate[]>(() =>
+  library.value.flatMap((department) =>
+    department.categories.flatMap((category) =>
+      category.documents.map((template) => ({
+        ...template,
+        departmentKey: department.key,
+        department: department.name,
+        category: category.name,
+      })),
+    ),
+  ),
+)
+
+const departmentTabs = computed<DepartmentTab[]>(() => [
+  { key: null, label: '全部', count: allTemplates.value.length },
+  ...library.value.map((department) => ({
+    key: department.key,
+    label: department.name,
+    count: allTemplates.value.filter((template) => template.departmentKey === department.key)
+      .length,
+  })),
+])
+
+const statusTabs = computed<StatusTab[]>(() =>
+  documentStatusOptions.map((option) => ({
+    ...option,
+    count: allTemplates.value.filter((template) => template.status === option.key).length,
+  })),
+)
+
+const filteredTemplates = computed(() => {
+  const keyword = filters.keyword.trim().toLowerCase()
+
+  return allTemplates.value.filter((template) => {
+    const matchesDepartment = !filters.department || template.departmentKey === filters.department
+    const matchesStatus = template.status === filters.status
+    const matchesKeyword =
+      !keyword ||
+      [template.name, template.code, template.department].join(' ').toLowerCase().includes(keyword)
+
+    return matchesDepartment && matchesStatus && matchesKeyword
+  })
+})
+
+async function loadLibrary() {
+  loading.value = true
+  await Promise.resolve()
+  library.value = documentLibrary
+  loading.value = false
+}
+
+function handlePreview(template: DocumentTemplate) {
+  selectedTemplate.value = template
+}
+
+function closePreview() {
+  selectedTemplate.value = null
+}
+
+function showAddMessage() {
+  ElMessage.info('原型演示：新增文档模板（类 Word 在线编辑器）')
+}
+
+function showExportMessage() {
+  ElMessage.info('原型演示：导出模板包（ZIP）')
+}
+
+function showEditMessage(template: DocumentTemplate) {
+  ElMessage.info('原型演示：编辑模板《' + template.name + '》')
+}
+
+function showInitiateMessage(template: DocumentTemplate) {
+  ElMessage.info('已选择《' + template.name + '》，签署工作台暂未实现')
+}
+
+function clearFilters() {
+  filters.keyword = ''
+  filters.department = null
+}
+
+function useTemplate(template: DocumentTemplate) {
+  closePreview()
+  ElMessage.info('原型演示：从模板《' + template.name + '》发起签署')
+}
+
+onMounted(loadLibrary)
 </script>
 
 <template>
-  <PagePlaceholder
-    group="管理"
-    title="文档库管理"
-    icon="▤"
-    description="文档库管理页面占位，待根据 Web 端需求实现。"
-  />
+  <section class="documents-page">
+    <DocumentLibraryHeader
+      v-model="filters.keyword"
+      :total="filteredTemplates.length"
+      @add="showAddMessage"
+      @export="showExportMessage"
+    />
+
+    <DocumentFilterTabs
+      v-model:department="filters.department"
+      v-model:status="filters.status"
+      :departments="departmentTabs"
+      :statuses="statusTabs"
+    />
+
+    <div v-if="loading" class="template-grid" aria-label="正在加载文档模板">
+      <div v-for="index in 8" :key="index" class="template-skeleton">
+        <span class="skeleton-title" />
+        <span class="skeleton-line wide" />
+        <span class="skeleton-line" />
+        <span class="skeleton-line short" />
+        <span class="skeleton-footer" />
+      </div>
+    </div>
+
+    <div v-else-if="filteredTemplates.length" class="template-grid">
+      <DocumentTemplateCard
+        v-for="template in filteredTemplates"
+        :key="template.id"
+        :template="template"
+        @preview="handlePreview"
+        @edit="showEditMessage"
+        @initiate="showInitiateMessage"
+      />
+    </div>
+
+    <div v-else class="empty-state">
+      <div class="empty-icon" aria-hidden="true">⌕</div>
+      <p>没有符合条件的模板</p>
+      <button
+        v-if="filters.keyword || filters.department"
+        type="button"
+        class="reset-button"
+        @click="clearFilters"
+      >
+        清除筛选
+      </button>
+    </div>
+
+    <DocumentPreviewDialog
+      :visible="Boolean(selectedTemplate)"
+      :template="selectedTemplate"
+      @close="closePreview"
+      @use="useTemplate"
+    />
+  </section>
 </template>
+
+<style scoped>
+.documents-page {
+  width: 100%;
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+.template-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.template-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 206px;
+  padding: 16px;
+  background: var(--card);
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+}
+
+.template-skeleton span {
+  display: block;
+  background: linear-gradient(90deg, #edf3f5 25%, #f7fafb 37%, #edf3f5 63%);
+  background-size: 400% 100%;
+  border-radius: 6px;
+  animation: skeleton-shimmer 1.4s ease infinite;
+}
+
+.skeleton-title {
+  width: 70%;
+  height: 20px;
+}
+
+.skeleton-line {
+  width: 90%;
+  height: 12px;
+}
+
+.skeleton-line.wide {
+  width: 100%;
+}
+
+.skeleton-line.short {
+  width: 62%;
+}
+
+.skeleton-footer {
+  width: 100%;
+  height: 26px;
+  margin-top: auto;
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+.empty-state {
+  padding: 56px 24px;
+  color: var(--mut);
+  text-align: center;
+  background: var(--card);
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+}
+
+.empty-icon {
+  margin-bottom: 8px;
+  color: var(--brand);
+  font-size: 38px;
+  opacity: 0.55;
+}
+
+.empty-state p {
+  margin: 0;
+  font-size: 13px;
+}
+
+.reset-button {
+  padding: 6px 12px;
+  margin-top: 14px;
+  color: var(--brand);
+  font-size: 12px;
+  background: #fff;
+  border: 1px solid var(--brand);
+  border-radius: 6px;
+}
+
+.reset-button:hover {
+  background: var(--brand-l);
+}
+
+@media (max-width: 1400px) {
+  .template-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1100px) {
+  .template-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 680px) {
+  .template-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/clinical-web/src/views/management/documents/mock.ts b/clinical-web/src/views/management/documents/mock.ts
new file mode 100644
index 0000000..ac499fe
--- /dev/null
+++ b/clinical-web/src/views/management/documents/mock.ts
@@ -0,0 +1,240 @@
+import type { DocumentDepartment, DocumentStatus, LibraryDocument } from './types'
+
+const documentStatusLabels: Record<DocumentStatus, string> = {
+  enabled: '启用中',
+  draft: '草稿',
+  archived: '归档',
+  review: '需复审',
+}
+
+export const documentStatusOptions = Object.entries(documentStatusLabels).map(([key, label]) => ({
+  key: key as DocumentStatus,
+  label,
+}))
+
+export { documentStatusLabels }
+
+function createDocument(
+  id: string,
+  name: string,
+  code: string,
+  version: string,
+  description: string,
+  status: DocumentStatus = 'enabled',
+): LibraryDocument {
+  return { id, name, code, version, description, status }
+}
+
+export const documentLibrary: DocumentDepartment[] = [
+  {
+    key: 'radiology',
+    name: '放射科',
+    campus: 'all',
+    categories: [
+      {
+        name: '核磁相关',
+        documents: [
+          createDocument(
+            'doc-rad-mri-001',
+            'MRI磁共振检查知情同意书',
+            'TPL-RAD-MRI-001',
+            'v2.3.1',
+            '适用于 MRI 检查前风险告知，含幽闭恐惧症、金属植入物、造影剂过敏等注意事项。',
+          ),
+          createDocument(
+            'doc-rad-mri-002',
+            '磁共振安全风险告知书',
+            'TPL-RAD-MRI-002',
+            'v1.8.0',
+            '磁共振室安全筛查及禁忌证告知，适用于所有进入磁体间人员。',
+          ),
+          createDocument(
+            'doc-rad-mri-003',
+            '造影剂注射知情同意书',
+            'TPL-RAD-CM-001',
+            'v2.1.0',
+            '含碘、钆造影剂使用风险、过敏史询问及肾功能评估要求。',
+          ),
+        ],
+      },
+      {
+        name: 'CT相关',
+        documents: [
+          createDocument(
+            'doc-rad-ct-001',
+            'CT增强检查知情同意书',
+            'TPL-RAD-CT-001',
+            'v2.0.1',
+            'CT 增强扫描造影剂风险、注意事项及不良反应处理告知。',
+          ),
+          createDocument(
+            'doc-rad-ct-002',
+            'CT检查辐射告知书',
+            'TPL-RAD-CT-002',
+            'v1.5.0',
+            'CT 检查电离辐射风险说明，覆盖孕妇、儿童等特殊人群注意事项。',
+            'review',
+          ),
+        ],
+      },
+      {
+        name: '普放相关',
+        documents: [
+          createDocument(
+            'doc-rad-xr-001',
+            'X线检查告知书',
+            'TPL-RAD-XR-001',
+            'v1.2.0',
+            '普通 X 线检查注意事项及辐射防护告知。',
+          ),
+        ],
+      },
+    ],
+  },
+  {
+    key: 'cardiology',
+    name: '心内科',
+    campus: 'all',
+    categories: [
+      {
+        name: '介入手术',
+        documents: [
+          createDocument(
+            'doc-cvd-iv-001',
+            '心脏介入手术知情同意书',
+            'TPL-CVD-IV-001',
+            'v2.4.0',
+            '冠状动脉造影、PCI 等介入操作风险、并发症及替代方案告知。',
+          ),
+          createDocument(
+            'doc-cvd-cag-001',
+            '冠状动脉造影知情同意书',
+            'TPL-CVD-CAG-001',
+            'v2.2.1',
+            '冠脉造影检查适应证、禁忌证、术中术后风险及造影剂相关风险。',
+          ),
+        ],
+      },
+      {
+        name: '常规诊疗',
+        documents: [
+          createDocument(
+            'doc-cvd-pc-001',
+            '心包穿刺知情同意书',
+            'TPL-CVD-PC-001',
+            'v1.9.0',
+            '心包穿刺操作风险、可能并发症及配合事项告知。',
+            'draft',
+          ),
+        ],
+      },
+    ],
+  },
+  {
+    key: 'orthopedics',
+    name: '骨科',
+    campus: '本部院区',
+    categories: [
+      {
+        name: '手术相关',
+        documents: [
+          createDocument(
+            'doc-ort-op-001',
+            '骨科手术知情同意书',
+            'TPL-ORT-OP-001',
+            'v2.1.0',
+            '骨科手术麻醉方式、术中术后风险、内固定材料及术后康复说明。',
+          ),
+          createDocument(
+            'doc-ort-ane-001',
+            '麻醉知情同意书',
+            'TPL-ORT-ANE-001',
+            'v1.7.0',
+            '麻醉方式选择、麻醉风险、术后镇痛及可能出现的不良反应。',
+            'draft',
+          ),
+          createDocument(
+            'doc-ort-bt-001',
+            '输血治疗同意书',
+            'TPL-ORT-BT-001',
+            'v1.4.0',
+            '输血适应证、输血反应及经血传播疾病风险告知。',
+          ),
+        ],
+      },
+    ],
+  },
+  {
+    key: 'health-management',
+    name: '健康管理中心',
+    campus: '东院区',
+    categories: [
+      {
+        name: '体检告知',
+        documents: [
+          createDocument(
+            'doc-pe-rpt-001',
+            '体检报告发放及知情同意书',
+            'TPL-PE-RPT-001',
+            'v1.6.0',
+            '体检报告领取方式、隐私保护、异常结果随访告知。',
+          ),
+          createDocument(
+            'doc-pe-pre-001',
+            '检前告知书',
+            'TPL-PE-PRE-001',
+            'v1.3.0',
+            '体检前准备事项、空腹要求及特殊检查注意事项。',
+          ),
+        ],
+      },
+    ],
+  },
+  {
+    key: 'general',
+    name: '全院通用',
+    campus: 'all',
+    categories: [
+      {
+        name: '入院告知',
+        documents: [
+          createDocument(
+            'doc-gen-adm-001',
+            '住院须知及告知书',
+            'TPL-GEN-ADM-001',
+            'v2.0.0',
+            '住院期间权利义务、探视制度、费用结算及安全注意事项。',
+          ),
+          createDocument(
+            'doc-gen-crit-001',
+            '病危通知书签收单',
+            'TPL-GEN-CRIT-001',
+            'v1.5.0',
+            '病危、病重病情告知、家属签收及医患沟通记录。',
+            'review',
+          ),
+        ],
+      },
+      {
+        name: '授权委托',
+        documents: [
+          createDocument(
+            'doc-gen-pow-001',
+            '患者授权委托书',
+            'TPL-GEN-POW-001',
+            'v2.1.0',
+            '患者授权委托代理人办理医疗相关事务及签署文件的授权书。',
+            'archived',
+          ),
+          createDocument(
+            'doc-gen-ref-001',
+            '拒绝检查治疗告知书',
+            'TPL-GEN-REF-001',
+            'v1.8.0',
+            '患者或代理人拒绝推荐检查、治疗时的风险告知及签字确认。',
+          ),
+        ],
+      },
+    ],
+  },
+]
diff --git a/clinical-web/src/views/management/documents/types.ts b/clinical-web/src/views/management/documents/types.ts
index 425fc1f..687d82c 100644
--- a/clinical-web/src/views/management/documents/types.ts
+++ b/clinical-web/src/views/management/documents/types.ts
@@ -1,16 +1,50 @@
-export type DocumentFilterStatus = 'all' | 'draft' | 'published' | 'archived'
+export type DocumentStatus = 'enabled' | 'draft' | 'archived' | 'review'
+
+export type DocumentFilterStatus = 'all' | DocumentStatus
+
+export type DocumentCampus = 'all' | '本部院区' | '东院区' | '西院区'
+
+export interface LibraryDocument {
+  id: string
+  name: string
+  code: string
+  version: string
+  status: DocumentStatus
+  description: string
+}
+
+export interface DocumentCategory {
+  name: string
+  documents: LibraryDocument[]
+}
+
+export interface DocumentDepartment {
+  key: string
+  name: string
+  campus: DocumentCampus
+  categories: DocumentCategory[]
+}
+
+export interface DocumentTemplate extends LibraryDocument {
+  departmentKey: string
+  department: string
+  category: string
+}
 
 export interface DocumentFilterForm {
   keyword: string
-  status: DocumentFilterStatus
+  department: string | null
+  status: DocumentStatus
 }
 
-export interface DocumentTableRow {
-  id: string
-  name: string
-  category: string
-  version: string
-  status: DocumentFilterStatus
-  updatedBy: string
-  updatedAt: string
+export interface DepartmentTab {
+  key: string | null
+  label: string
+  count: number
+}
+
+export interface StatusTab {
+  key: DocumentStatus
+  label: string
+  count: number
 }