From 61721d7102e84277e5de9d45250314dc90a42875 Mon Sep 17 00:00:00 2001 From: zzh Date: Mon, 24 Nov 2025 09:30:08 +0800 Subject: [PATCH] =?UTF-8?q?=20=E6=96=B0=E5=A2=9E=E7=89=A9=E6=96=99?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E7=95=8C=E9=9D=A2=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/assets/styles.css | 394 +++++++++++++++++++++++++++ frontend/index.html | 18 +- frontend/js/app.js | 15 +- frontend/js/router.js | 15 +- server/app.py | 535 ++++++++++++++++++++++++++++++++++++- 用户.svg | 1 - 6 files changed, 958 insertions(+), 20 deletions(-) delete mode 100644 用户.svg diff --git a/frontend/assets/styles.css b/frontend/assets/styles.css index d1a3a50..160a583 100644 --- a/frontend/assets/styles.css +++ b/frontend/assets/styles.css @@ -684,3 +684,397 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover{ /* 确认按钮样式 */ .btn-icon.btn-confirm{color:#fb923c} .btn-icon.btn-confirm:hover{background:rgba(251,146,60,.15);color:#fb923c} + +/* 物料清单-采购页面样式 */ +.page-container { + max-width: 100%; + margin: 0 auto; +} + +.page-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + padding-bottom: 16px; + border-bottom: 1px solid var(--border); +} + +.page-header h2 { + margin: 0; + font-size: 24px; + font-weight: 600; + color: var(--text); +} + +.page-actions { + display: flex; + gap: 12px; +} + +.filter-section { + background: var(--surface); + border: 1px solid var(--border); + border-radius: 12px; + padding: 16px; + margin-bottom: 20px; +} + +.filter-row { + display: flex; + gap: 12px; + align-items: center; + flex-wrap: wrap; +} + +.input-field { + background: var(--bg); + color: var(--text); + border: 1px solid var(--border); + border-radius: 8px; + padding: 10px 12px; + font-size: 14px; + min-width: 200px; +} + +.input-field:focus { + outline: 2px solid var(--primary); + outline-offset: 0; +} + +[data-theme="light"] .input-field { + background: #ffffff; +} + +.table-container { + background: var(--surface); + border: 1px solid var(--border); + border-radius: 12px; + overflow-x: auto; + margin-bottom: 20px; +} + +.data-table { + width: 100%; + border-collapse: collapse; + font-size: 14px; +} + +.data-table thead { + background: var(--surface-2); + position: sticky; + top: 0; + z-index: 10; +} + +.data-table th { + padding: 12px 16px; + text-align: left; + font-weight: 600; + color: var(--text); + border-bottom: 2px solid var(--border); + white-space: nowrap; +} + +.data-table td { + padding: 12px 16px; + border-bottom: 1px solid var(--border); + color: var(--text); + white-space: nowrap; +} + +.data-table tbody tr:hover { + background: rgba(79, 140, 255, 0.08); +} + +.badge { + display: inline-block; + padding: 4px 10px; + border-radius: 12px; + font-size: 12px; + font-weight: 500; + white-space: nowrap; +} + +.badge-success { + background: rgba(34, 197, 94, 0.15); + color: #22c55e; +} + +.badge-warning { + background: rgba(245, 158, 11, 0.15); + color: #f59e0b; +} + +.badge-danger { + background: rgba(239, 68, 68, 0.15); + color: #ef4444; +} + +.badge-info { + background: rgba(79, 140, 255, 0.15); + color: #4f8cff; +} + +.badge-default { + background: rgba(107, 114, 128, 0.15); + color: var(--text-2); +} + +.btn-icon { + background: transparent; + border: none; + cursor: pointer; + font-size: 16px; + padding: 4px 8px; + border-radius: 4px; + transition: background 0.2s; +} + +.btn-icon:hover { + background: rgba(79, 140, 255, 0.12); +} + +.pagination { + display: flex; + justify-content: center; + align-items: center; + gap: 16px; + padding: 16px; +} + +#page-info { + color: var(--text-2); + font-size: 14px; +} + +/* 模态框样式 */ +.modal { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.6); + z-index: 1000; + align-items: center; + justify-content: center; + padding: 20px; +} + +.modal-content { + background: var(--surface); + border: 1px solid var(--border); + border-radius: 12px; + width: 100%; + max-width: 600px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 24px; + border-bottom: 1px solid var(--border); +} + +.modal-header h3 { + margin: 0; + font-size: 18px; + font-weight: 600; + color: var(--text); +} + +.modal-close { + background: transparent; + border: none; + font-size: 28px; + color: var(--text-2); + cursor: pointer; + padding: 0; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + transition: all 0.2s; +} + +.modal-close:hover { + background: rgba(239, 68, 68, 0.15); + color: #ef4444; +} + +.modal-body { + padding: 24px; + max-height: 60vh; + overflow-y: auto; +} + +.modal-footer { + display: flex; + justify-content: flex-end; + gap: 12px; + padding: 16px 24px; + border-top: 1px solid var(--border); +} + +.form-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 6px; +} + +.form-group label { + font-size: 13px; + font-weight: 500; + color: var(--text-2); +} + +.required { + color: #ef4444; +} + +.btn-text { + background: transparent; + border: none; + color: var(--primary); + cursor: pointer; + padding: 6px 12px; + border-radius: 6px; + font-size: 14px; + font-weight: 500; + transition: background 0.2s; +} + +.btn-text:hover { + background: rgba(79, 140, 255, 0.12); +} + +/* 响应式调整 */ +@media (max-width: 768px) { + .form-grid { + grid-template-columns: 1fr; + } + + .filter-row { + flex-direction: column; + align-items: stretch; + } + + .input-field { + min-width: 100%; + } + + .page-header { + flex-direction: column; + align-items: flex-start; + gap: 12px; + } +} + +/* 导出字段选择样式 */ +.export-fields-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 12px; + max-height: 50vh; + overflow-y: auto; + padding: 8px; + background: var(--bg); + border: 1px solid var(--border); + border-radius: 8px; +} + +.export-field-item { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 12px; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 6px; + cursor: pointer; + transition: all 0.2s; + user-select: none; +} + +.export-field-item:hover { + background: var(--surface-2); + border-color: var(--primary); +} + +.export-field-item input[type="checkbox"] { + cursor: pointer; + width: 16px; + height: 16px; + accent-color: var(--primary); +} + +.export-field-item span { + font-size: 13px; + color: var(--text); + flex: 1; +} + +.export-field-item:has(input:checked) { + background: rgba(79, 140, 255, 0.1); + border-color: var(--primary); +} + +@media (max-width: 768px) { + .export-fields-grid { + grid-template-columns: 1fr; + } +} + +/* 选择信息样式 */ +.selection-info { + display: inline-block; + margin-left: 16px; + padding: 4px 12px; + background: rgba(79, 140, 255, 0.15); + color: var(--primary); + border-radius: 12px; + font-size: 13px; + font-weight: 500; +} + +/* 表格复选框样式 */ +.data-table input[type="checkbox"] { + cursor: pointer; + width: 16px; + height: 16px; + accent-color: var(--primary); +} + +/* 全选复选框的半选状态 */ +#select-all-checkbox:indeterminate { + opacity: 0.6; +} + +/* 批量删除按钮样式(仅用于实心按钮) */ +.btn.btn-danger { + background: #ef4444; + color: #ffffff; +} + +.btn.btn-danger:hover { + background: #dc2626; +} + +/* 页面头部调整 */ +.page-header > div:first-child { + display: flex; + align-items: center; + gap: 12px; +} diff --git a/frontend/index.html b/frontend/index.html index 49b8388..dc65174 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -90,6 +90,22 @@ +