From 0ee835ba25a350a85cc7d4b82aec57b6e765c2e6 Mon Sep 17 00:00:00 2001 From: anweat Date: Mon, 8 Jun 2026 00:00:48 +0800 Subject: [PATCH 1/2] Polish attachment and assignment UI --- frontend/src/styles.css | 119 ++++++++++++++++++++++ frontend/src/views/ContractCreateView.vue | 39 ++++++- frontend/src/views/ContractDetailView.vue | 102 +++++++++++++++---- 3 files changed, 237 insertions(+), 23 deletions(-) diff --git a/frontend/src/styles.css b/frontend/src/styles.css index b56ea0a..84ad9e2 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -323,6 +323,125 @@ th { flex-wrap: wrap; } +.assignment-panel { + display: grid; + gap: 18px; + margin-bottom: 18px; +} + +.assign-section { + display: grid; + gap: 10px; +} + +.assign-section-head { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 12px; +} + +.assign-section-head h3 { + margin: 0; + font-size: 16px; +} + +.people-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); + gap: 10px; +} + +.person-option { + min-height: 64px; + display: grid; + gap: 4px; + justify-items: start; + padding: 10px 12px; + border: 1px solid #d8e1ea; + border-radius: 6px; + background: #fff; + color: #26364d; + text-align: left; +} + +.person-option span { + font-weight: 800; +} + +.person-option small { + color: #64748b; +} + +.person-option.selected { + border-color: #126f67; + background: #edf7f5; + color: #126f67; +} + +.attachment-box { + display: grid; + gap: 12px; + padding: 14px; + border: 1px dashed #bfd0dd; + border-radius: 8px; + background: #f8fafc; +} + +.attachment-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; +} + +.attachment-head p { + margin: 4px 0 0; +} + +.attach-trigger { + cursor: pointer; +} + +.attachment-list { + display: grid; + gap: 8px; +} + +.attachment-item { + min-height: 42px; + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto auto; + align-items: center; + gap: 10px; + padding: 8px 10px; + border: 1px solid #e2e8f0; + border-radius: 6px; + background: #fff; +} + +.attachment-item span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: 700; +} + +.attachment-item small, +.empty-hint { + color: #64748b; +} + +.empty-hint { + margin: 0; +} + +.icon.mini { + width: 30px; + height: 30px; + min-height: 30px; +} + .link-button { width: auto; min-height: auto; diff --git a/frontend/src/views/ContractCreateView.vue b/frontend/src/views/ContractCreateView.vue index 23f42f7..4cfbc7b 100644 --- a/frontend/src/views/ContractCreateView.vue +++ b/frontend/src/views/ContractCreateView.vue @@ -1,7 +1,7 @@ @@ -85,10 +95,29 @@ onMounted(loadCustomers)