feat(documents): 文档归属改为卡片式复选框网格并优化通用项样式

This commit is contained in:
yelan
2026-10-06 19:11:50 +08:00
parent b3210c5fac
commit a520f73c49
@@ -177,16 +177,19 @@ function submit() {
<div class="form-field span-2">
<span>文档归属 <i>*</i></span>
<div class="ownership">
<button
<label
v-for="option in ownershipOptions"
:key="option"
type="button"
class="ownership-chip"
:class="{ 'is-on': form.ownership.includes(option) }"
@click="toggleOwnership(option)"
class="ownership-option"
:class="{ 'is-general': option === GENERAL_OWNERSHIP }"
>
{{ option }}
</button>
<input
type="checkbox"
:checked="form.ownership.includes(option)"
@change="toggleOwnership(option)"
/>
<span>{{ option }}</span>
</label>
</div>
<p class="field-tip">
勾选科室设置可见范围,支持多科室与通用(全院)。勾选「通用(全院)」后各科室均可见。
@@ -382,31 +385,63 @@ function submit() {
box-sizing: border-box;
}
/*
* 文档归属:原型 V10.2 的 .cg-dept —— 卡片式复选框网格。
* 容器是浅底带框的 3 列网格,每项一张白卡(原生 checkbox + 科室名),
* 「通用(全院)」独占一行并用浅蓝底区分(原型 grid-column:1/-1)。
* 科室名过长时截断:原型同一处就是 nowrap + ellipsis。
*/
.ownership {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ownership-chip {
padding: 4px 11px;
color: var(--mut);
font-size: 12px;
background: #f4f8fa;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 12px 14px;
background: #f7fafb;
border: 1px solid var(--line);
border-radius: 14px;
border-radius: 10px;
}
.ownership-chip:hover {
color: var(--brand);
border-color: var(--brand);
.ownership-option {
display: flex;
gap: 5px;
align-items: center;
min-width: 0;
padding: 8px 12px;
color: var(--ink);
font-size: 12.5px;
background: #fff;
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
transition:
border-color 0.15s,
box-shadow 0.15s;
}
.ownership-chip.is-on {
color: var(--brand-d);
font-weight: 700;
background: var(--brand-l);
.ownership-option:hover {
border-color: var(--brand);
box-shadow: 0 2px 8px rgb(15 60 80 / 8%);
}
.ownership-option.is-general {
grid-column: 1 / -1;
background: #eef6f9;
border-color: #bcd9e4;
}
/* 必须盖掉 .form-field input 的整宽与内边距,否则复选框会被拉成一个方块 */
.ownership-option input[type='checkbox'] {
flex: none;
width: auto;
padding: 0;
margin: 0;
accent-color: var(--brand);
}
.ownership-option > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.field-tip {