feat(documents): implement document library management

2026-08-27 16:47:31 +08:00
parent 24d8a9ece1
commit e7aa4843b7
7 changed files with 1378 additions and 17 deletions
@@ -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>