From 9650c891d9f280513eea951e3e299f4ac9368f3e Mon Sep 17 00:00:00 2001
From: taiyi <shuobo1224@qq.com>
Date: Fri, 5 Jun 2026 13:28:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=EF=BC=8C?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=A2=9E=E5=8A=A0=E6=9C=80=E5=B0=8F=E5=AE=BD?=
 =?UTF-8?q?=E5=BA=A6=E5=92=8C=E9=97=B4=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/web-admin/src/views/OrdersPage.vue | 86 ++++++++++++++++++++-
 1 file changed, 85 insertions(+), 1 deletion(-)

diff --git a/frontend/web-admin/src/views/OrdersPage.vue b/frontend/web-admin/src/views/OrdersPage.vue
index 8c1a47c..0196130 100644
--- a/frontend/web-admin/src/views/OrdersPage.vue
+++ b/frontend/web-admin/src/views/OrdersPage.vue
@@ -214,5 +214,89 @@ onMounted(() => { handleSearch(); });
 </script>
 
 <style scoped>
-.page{padding:0;display:grid;gap:16px}.page-header{display:flex;justify-content:space-between;gap:12px;align-items:center}.subline{margin:0;color:#64748b}.status{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:600}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.summary-card,.panel{border:1px solid #dbe3ef;border-radius:18px;padding:16px;background:#fff}.summary-card span{display:block;color:#64748b;margin-bottom:8px}.summary-card strong{font-size:24px}.split-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:16px}.panel-header{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.panel-header h3{margin:0}.panel-header span{color:#64748b;font-size:13px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.full-width{grid-column:1/-1}.toolbar{display:grid;gap:12px;margin-bottom:16px;align-items:end}.toolbar-4{grid-template-columns:repeat(3,minmax(0,1fr)) auto}.toolbar label{display:grid;gap:6px}.toolbar span{color:#475569;font-size:13px;font-weight:600}.toolbar-actions{display:flex;gap:10px;align-items:end}.table-wrap{overflow:auto}.actions{display:flex;gap:8px;flex-wrap:wrap}.money{font-weight:700}.loading{margin:0;color:#6b7280}.empty-state{padding:24px;border:1px dashed #cbd5e1;border-radius:16px;color:#64748b;text-align:center}.link-btn,.ghost-btn,.primary-btn,input,select,textarea{border-radius:12px;border:1px solid #cbd5e1;padding:10px 12px;background:#fff;font-size:14px}.primary-btn{background:#2563eb;color:#fff;border-color:#2563eb}.ghost-btn,.link-btn{background:#f8fafc;color:#334155}.link-btn{cursor:pointer;padding:6px 10px}.link-btn:disabled{color:#9ca3af;cursor:not-allowed}.action-row{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.action-row.split{justify-content:space-between}.rule-note{margin-top:12px;padding:12px;border:1px solid #dbe3ef;border-radius:14px;background:#f8fbff}.rule-note strong{display:block;margin-bottom:4px}.rule-note p{margin:0;color:#475569;line-height:1.6}.modal-mask{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,23,42,0.48);backdrop-filter:blur(2px)}.modal-panel{width:min(560px,100%);max-height:min(80vh,600px);overflow:auto;border-radius:20px;border:1px solid #dbe3ef;background:#fff;padding:24px;box-shadow:0 24px 80px rgba(15,23,42,0.24)}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}.modal-header h4{margin:0 0 6px;font-size:18px}.modal-header span{color:#64748b;font-size:13px}.modal-close{width:36px;height:36px;border:1px solid #d1d5db;background:#f8fafc;font-size:22px;line-height:1;color:#334155;border-radius:12px;cursor:pointer}@media(max-width:980px){.split-layout{grid-template-columns:1fr}.toolbar,.form-grid{grid-template-columns:1fr}.page-header,.panel-header{flex-direction:column;align-items:flex-start}}
+.page { padding: 0; display: grid; gap: 16px; }
+.page-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
+.page-header h2 { margin: 0 0 4px; font-size: 24px; }
+.subline { margin: 0; color: #64748b; font-size: 14px; }
+
+.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
+.summary-card {
+  border: 1px solid #dbe3ef; border-radius: 16px; padding: 18px 20px; background: #fff;
+  display: grid; gap: 6px;
+}
+.summary-card span { color: #64748b; font-size: 13px; }
+.summary-card strong { font-size: 26px; color: #0f172a; margin: 0; }
+
+.panel {
+  border: 1px solid #dbe3ef; border-radius: 18px; padding: 20px; background: #fff;
+}
+.panel-header {
+  display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 16px;
+}
+.panel-header h3 { margin: 0; font-size: 16px; }
+.panel-header span { color: #64748b; font-size: 13px; }
+
+.toolbar { display: grid; gap: 12px; margin-bottom: 16px; align-items: end; }
+.toolbar-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
+.toolbar label { display: grid; gap: 6px; }
+.toolbar span { color: #475569; font-size: 13px; font-weight: 600; }
+.toolbar input, .toolbar select {
+  border: 1px solid #d1d5db; border-radius: 10px; padding: 10px 12px; background: #fff; font-size: 14px;
+}
+.toolbar-actions { display: flex; gap: 10px; align-items: end; }
+
+.table-wrap { overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; min-width: 900px; }
+th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #e5e7eb; }
+th { background: #f8fafc; font-size: 13px; font-weight: 600; color: #334155; white-space: nowrap; }
+td { font-size: 14px; }
+
+.status {
+  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
+  background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 600; white-space: nowrap;
+}
+.money { font-weight: 700; color: #0f172a; }
+.actions { display: flex; gap: 8px; flex-wrap: wrap; white-space: nowrap; }
+
+.link-btn, .ghost-btn, .primary-btn {
+  border-radius: 10px; border: 1px solid #d1d5db; padding: 8px 14px;
+  background: #fff; font-size: 13px; cursor: pointer; text-decoration: none; color: #334155;
+}
+.primary-btn { background: #2563eb; color: #fff; border-color: #2563eb; }
+.link-btn { background: none; border: none; color: #2563eb; padding: 4px 8px; }
+.link-btn:disabled { color: #9ca3af; cursor: not-allowed; }
+
+.loading { margin: 0; color: #6b7280; }
+.empty-state { padding: 32px; border: 1px dashed #cbd5e1; border-radius: 16px; color: #64748b; text-align: center; }
+
+.modal-mask {
+  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
+  padding: 24px; background: rgba(15, 23, 42, 0.48); backdrop-filter: blur(2px);
+}
+.modal-panel {
+  width: min(560px, 100%); max-height: min(80vh, 600px); overflow: auto;
+  border-radius: 20px; border: 1px solid #dbe3ef; background: #fff; padding: 24px;
+  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
+}
+.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
+.modal-header h4 { margin: 0 0 6px; font-size: 18px; }
+.modal-header span { color: #64748b; font-size: 13px; }
+.modal-close {
+  width: 36px; height: 36px; border: 1px solid #d1d5db; background: #f8fafc;
+  font-size: 22px; border-radius: 12px; cursor: pointer; color: #334155;
+}
+
+.form-grid { display: grid; gap: 12px; }
+.form-grid label { display: grid; gap: 6px; }
+.form-grid span { color: #475569; font-size: 13px; font-weight: 600; }
+.full-width { grid-column: 1 / -1; }
+textarea { border: 1px solid #d1d5db; border-radius: 12px; padding: 10px 12px; width: 100%; box-sizing: border-box; }
+
+.action-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
+.action-row.split { justify-content: space-between; }
+
+@media (max-width: 980px) {
+  .toolbar { grid-template-columns: 1fr; }
+  .page-header, .panel-header { flex-direction: column; align-items: flex-start; }
+}
 </style>