149 lines
2.7 KiB
Vue
149 lines
2.7 KiB
Vue
<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>
|