From a029da8c6d7c15a6e2683cefa2a784b77e374372 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Thu, 14 May 2026 20:25:58 +0800
Subject: [PATCH] =?UTF-8?q?ui=E4=BC=98=E5=8C=96-3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/AdminFulfillmentBindingsView.vue    |  42 +++----
 .../AdminKuaishouCloudFulfillmentView.vue     | 108 +++++++++---------
 .../views/admin/AdminWebhookEventsView.vue    |   2 +-
 3 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/apps/frontend/src/views/admin/AdminFulfillmentBindingsView.vue b/apps/frontend/src/views/admin/AdminFulfillmentBindingsView.vue
index ef9ba7e8..4cebc7c5 100644
--- a/apps/frontend/src/views/admin/AdminFulfillmentBindingsView.vue
+++ b/apps/frontend/src/views/admin/AdminFulfillmentBindingsView.vue
@@ -954,11 +954,11 @@ onMounted(loadConfigs)
   align-items: center;
   min-height: 28px;
   padding: 0 10px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: rgba(37, 89, 167, 0.08);
   border: 1px solid rgba(37, 89, 167, 0.12);
   color: var(--color-primary-dark);
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 700;
   letter-spacing: 0.04em;
 }
@@ -973,7 +973,7 @@ onMounted(loadConfigs)
 .empty-block,
 .error-copy {
   padding: 16px;
-  border-radius: 20px;
+  border-radius: var(--radius-xl);
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid rgba(86, 108, 138, 0.1);
 }
@@ -1013,14 +1013,14 @@ onMounted(loadConfigs)
   display: grid;
   gap: 4px;
   padding: 12px 14px;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   background: #f8fafc;
   border: 1px solid rgba(148, 163, 184, 0.14);
 }
 
 .overview-stat span {
   color: var(--text-secondary);
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 700;
 }
 
@@ -1041,10 +1041,10 @@ onMounted(loadConfigs)
   align-items: center;
   min-height: 32px;
   padding: 0 12px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: rgba(15, 23, 42, 0.04);
   color: var(--text-secondary);
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 600;
 }
 
@@ -1085,7 +1085,7 @@ onMounted(loadConfigs)
 .toolbar-hint {
   margin: 10px 0 0;
   color: var(--text-secondary);
-  font-size: 12px;
+  font-size: var(--text-xs);
 }
 
 .lookup-summary {
@@ -1097,7 +1097,7 @@ onMounted(loadConfigs)
   display: grid;
   gap: 6px;
   padding: 12px 14px;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   background: #f8fafc;
   border: 1px solid rgba(148, 163, 184, 0.14);
 }
@@ -1109,7 +1109,7 @@ onMounted(loadConfigs)
 .binding-card {
   margin-top: 12px;
   padding: 14px;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   background: #f8fafc;
   border: 1px solid rgba(148, 163, 184, 0.18);
 }
@@ -1142,17 +1142,17 @@ onMounted(loadConfigs)
 
 .binding-subtle {
   color: var(--text-secondary);
-  font-size: 13px;
+  font-size: var(--text-sm);
 }
 
 .binding-status-chip {
   display: inline-flex;
   align-items: center;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   padding: 2px 10px;
   background: #fff1f2;
   color: #be123c;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 700;
 }
 
@@ -1165,7 +1165,7 @@ onMounted(loadConfigs)
   border: 1px solid rgba(86, 108, 138, 0.18);
   background: rgba(255, 255, 255, 0.96);
   color: var(--text-primary);
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   padding: 7px 12px;
   font: inherit;
   cursor: pointer;
@@ -1175,7 +1175,7 @@ onMounted(loadConfigs)
   display: grid;
   gap: 6px;
   color: var(--text-secondary);
-  font-size: 13px;
+  font-size: var(--text-sm);
 }
 
 .binding-grid {
@@ -1201,13 +1201,13 @@ onMounted(loadConfigs)
 
 .field-block span {
   color: var(--text-secondary);
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 700;
 }
 
 .field-help {
   color: var(--text-secondary);
-  font-size: 12px;
+  font-size: var(--text-xs);
   line-height: 1.5;
 }
 
@@ -1243,7 +1243,7 @@ onMounted(loadConfigs)
 .binding-inline-error {
   margin: 10px 0 0;
   color: var(--color-danger);
-  font-size: 13px;
+  font-size: var(--text-sm);
   font-weight: 600;
 }
 
@@ -1279,7 +1279,7 @@ onMounted(loadConfigs)
 
 .data-table th {
   color: var(--text-secondary);
-  font-size: 13px;
+  font-size: var(--text-sm);
 }
 
 .cell-stack {
@@ -1289,7 +1289,7 @@ onMounted(loadConfigs)
 
 .cell-subtle {
   color: var(--text-secondary);
-  font-size: 12px;
+  font-size: var(--text-xs);
 }
 
 .empty-block,
@@ -1301,7 +1301,7 @@ onMounted(loadConfigs)
   color: var(--color-danger);
 }
 
-@media (max-width: 980px) {
+@media (max-width: 900px) {
   .panel-header,
   .section-title-row,
   .section-header-tools,
diff --git a/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillmentView.vue b/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillmentView.vue
index c0cb73e2..64c1ec30 100644
--- a/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillmentView.vue
+++ b/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillmentView.vue
@@ -1153,7 +1153,7 @@ onMounted(loadConfigs)
 }
 
 .hero-copy h1 {
-  font-size: 24px;
+  font-size: var(--text-2xl);
   line-height: 1.2;
 }
 
@@ -1162,7 +1162,7 @@ onMounted(loadConfigs)
 }
 
 .pane-heading h3 {
-  font-size: 14px;
+  font-size: var(--text-base);
 }
 
 .hero-copy p {
@@ -1190,10 +1190,10 @@ onMounted(loadConfigs)
   min-height: 34px;
   padding: 0 10px;
   border: 1px solid var(--panel-border);
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   background: #fff;
   color: var(--panel-ink);
-  font-size: 13px;
+  font-size: var(--text-sm);
   font-weight: 700;
 }
 
@@ -1207,7 +1207,7 @@ onMounted(loadConfigs)
   min-width: 0;
   padding: 12px;
   border: 1px solid rgba(31, 42, 55, 0.08);
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   background: rgba(255, 255, 255, 0.82);
 }
 
@@ -1218,14 +1218,14 @@ onMounted(loadConfigs)
 .rule-footer,
 .field-help {
   color: var(--panel-muted);
-  font-size: 12px;
+  font-size: var(--text-xs);
 }
 
 .status-strip strong {
   display: block;
   margin-top: 5px;
   color: var(--panel-ink);
-  font-size: 24px;
+  font-size: var(--text-2xl);
   line-height: 1;
 }
 
@@ -1235,7 +1235,7 @@ onMounted(loadConfigs)
   overflow: hidden;
   color: var(--panel-ink);
   font-family: var(--font-mono);
-  font-size: 12px;
+  font-size: var(--text-xs);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -1253,10 +1253,10 @@ onMounted(loadConfigs)
 
 .sample-metrics span {
   padding: 6px 10px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: #eef7f5;
   color: var(--accent-strong);
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 800;
 }
 
@@ -1265,7 +1265,7 @@ onMounted(loadConfigs)
   gap: 12px;
   padding: 14px;
   border: 1px solid var(--panel-line);
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   background: linear-gradient(180deg, #f8fafc, #ffffff);
 }
 
@@ -1325,7 +1325,7 @@ onMounted(loadConfigs)
   gap: 14px;
   padding: 14px;
   border: 1px solid var(--panel-line);
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   background: #fff;
 }
 
@@ -1359,7 +1359,7 @@ onMounted(loadConfigs)
   display: block;
   overflow: hidden;
   color: var(--panel-ink);
-  font-size: 14px;
+  font-size: var(--text-base);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -1371,7 +1371,7 @@ onMounted(loadConfigs)
   margin-top: 4px;
   overflow: hidden;
   color: var(--panel-muted);
-  font-size: 12px;
+  font-size: var(--text-xs);
   line-height: 1.45;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1381,10 +1381,10 @@ onMounted(loadConfigs)
   display: inline-flex;
   justify-content: center;
   padding: 8px 10px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   background: #eaf7f0;
   color: #067647;
-  font-size: 13px;
+  font-size: var(--text-sm);
   font-weight: 800;
 }
 
@@ -1401,7 +1401,7 @@ onMounted(loadConfigs)
 .filter-chip,
 .collapse-button {
   border: 1px solid var(--panel-border);
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   background: #fff;
   color: var(--panel-ink);
   cursor: pointer;
@@ -1414,13 +1414,13 @@ onMounted(loadConfigs)
   gap: 8px;
   min-height: 34px;
   padding: 0 11px;
-  font-size: 13px;
+  font-size: var(--text-sm);
   font-weight: 800;
 }
 
 .filter-chip strong {
   color: var(--panel-muted);
-  font-size: 12px;
+  font-size: var(--text-xs);
 }
 
 .filter-chip--active {
@@ -1435,7 +1435,7 @@ onMounted(loadConfigs)
 
 .rule-card {
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
 }
 
 .rule-card[data-invalid='true'] {
@@ -1468,10 +1468,10 @@ onMounted(loadConfigs)
   width: 34px;
   height: 34px;
   place-items: center;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   background: #182230;
   color: #fff;
-  font-size: 13px;
+  font-size: var(--text-sm);
   font-weight: 900;
 }
 
@@ -1492,8 +1492,8 @@ onMounted(loadConfigs)
   min-height: 28px;
   padding: 0 9px;
   overflow: hidden;
-  border-radius: 999px;
-  font-size: 12px;
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
   font-weight: 800;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1524,7 +1524,7 @@ onMounted(loadConfigs)
   min-height: 28px;
   padding: 0 9px;
   color: var(--accent-strong);
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 800;
 }
 
@@ -1540,7 +1540,7 @@ onMounted(loadConfigs)
   gap: 12px;
   padding: 14px;
   border: 1px solid var(--panel-line);
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   background: #fbfcfe;
 }
 
@@ -1563,13 +1563,13 @@ onMounted(loadConfigs)
   min-height: 72px;
   padding: 11px;
   border: 1px solid var(--panel-line);
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   background: #fff;
 }
 
 .switch-tile > span {
   color: #344054;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 800;
 }
 
@@ -1582,7 +1582,7 @@ onMounted(loadConfigs)
 .message-box,
 .loading-band {
   padding: 14px 16px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   color: var(--panel-muted);
 }
 
@@ -1617,7 +1617,7 @@ onMounted(loadConfigs)
 
 .admin-panel :deep(.el-button) {
   min-height: 34px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-weight: 800;
 }
 
@@ -1632,7 +1632,7 @@ onMounted(loadConfigs)
 .admin-panel :deep(.el-textarea__inner),
 .admin-panel :deep(.el-select__wrapper) {
   min-height: 36px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   background: #fff;
   box-shadow: 0 0 0 1px var(--panel-line) inset;
 }
@@ -1666,7 +1666,7 @@ onMounted(loadConfigs)
   background-color: var(--accent);
 }
 
-@media (max-width: 1280px) {
+@media (max-width: 1200px) {
   .lookup-grid {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
@@ -1680,7 +1680,7 @@ onMounted(loadConfigs)
   }
 }
 
-@media (max-width: 980px) {
+@media (max-width: 900px) {
   .hero-main,
   .section-heading,
   .rules-heading,
@@ -1787,10 +1787,10 @@ onMounted(loadConfigs)
   align-items: center;
   min-height: 30px;
   padding: 0 12px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: rgba(15, 93, 216, 0.08);
   color: #175cd3;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 700;
 }
 
@@ -1832,7 +1832,7 @@ onMounted(loadConfigs)
 
 .overview-label {
   color: #64748b;
-  font-size: 12px;
+  font-size: var(--text-xs);
 }
 
 .overview-file code {
@@ -1863,12 +1863,12 @@ onMounted(loadConfigs)
 
 .overview-stat span {
   color: #64748b;
-  font-size: 12px;
+  font-size: var(--text-xs);
 }
 
 .overview-stat strong {
   color: #1d3555;
-  font-size: 24px;
+  font-size: var(--text-2xl);
   line-height: 1;
 }
 
@@ -1901,7 +1901,7 @@ onMounted(loadConfigs)
 
 .field-block span {
   color: #1d3555;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 700;
 }
 
@@ -1945,7 +1945,7 @@ onMounted(loadConfigs)
 .toolbar-hint,
 .cell-subtle {
   color: #64748b;
-  font-size: 12px;
+  font-size: var(--text-xs);
   line-height: 1.45;
 }
 
@@ -1966,7 +1966,7 @@ onMounted(loadConfigs)
   border-radius: 14px;
   background: #fff5f4;
   border: 1px solid rgba(180, 35, 24, 0.14);
-  font-size: 13px;
+  font-size: var(--text-sm);
 }
 
 .data-table {
@@ -1985,7 +1985,7 @@ onMounted(loadConfigs)
 
 .data-table th {
   color: #64748b;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 700;
 }
 
@@ -2041,17 +2041,17 @@ onMounted(loadConfigs)
 
 .binding-subtle {
   color: #64748b;
-  font-size: 13px;
+  font-size: var(--text-sm);
 }
 
 .binding-status-chip {
   display: inline-flex;
   align-items: center;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   padding: 2px 10px;
   background: #fff1f2;
   color: #be123c;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 700;
 }
 
@@ -2064,7 +2064,7 @@ onMounted(loadConfigs)
   border: 1px solid rgba(86, 108, 138, 0.18);
   background: rgba(255, 255, 255, 0.96);
   color: #1d3555;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   padding: 7px 12px;
   cursor: pointer;
 }
@@ -2076,7 +2076,7 @@ onMounted(loadConfigs)
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.78);
   color: #64748b;
-  font-size: 12px;
+  font-size: var(--text-xs);
 }
 
 .binding-grid {
@@ -2124,7 +2124,7 @@ onMounted(loadConfigs)
 
 .mapping-panel-head span {
   color: #64748b;
-  font-size: 12px;
+  font-size: var(--text-xs);
 }
 
 .mapping-grid,
@@ -2138,7 +2138,7 @@ onMounted(loadConfigs)
   display: grid;
   place-items: center;
   color: #175cd3;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 700;
 }
 
@@ -2149,7 +2149,7 @@ onMounted(loadConfigs)
   min-height: 30px;
   min-width: 54px;
   padding: 0 10px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: rgba(15, 93, 216, 0.08);
   border: 1px solid rgba(15, 93, 216, 0.14);
 }
@@ -2165,7 +2165,7 @@ onMounted(loadConfigs)
   align-items: center;
   gap: 8px;
   color: #1d3555;
-  font-size: 13px;
+  font-size: var(--text-sm);
 }
 
 .binding-actions {
@@ -2175,7 +2175,7 @@ onMounted(loadConfigs)
 
 .admin-panel :deep(.el-button) {
   min-height: 34px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
 }
 
 .admin-panel :deep(.el-button--primary) {
@@ -2185,7 +2185,7 @@ onMounted(loadConfigs)
   --el-button-hover-border-color: #0f5dd8;
 }
 
-@media (max-width: 1100px) {
+@media (max-width: 900px) {
   .overview-stats,
   .lookup-toolbar,
   .binding-grid,
@@ -2202,7 +2202,7 @@ onMounted(loadConfigs)
   }
 }
 
-@media (max-width: 720px) {
+@media (max-width: 640px) {
   .panel-header,
   .section-title-row,
   .section-header-tools,
diff --git a/apps/frontend/src/views/admin/AdminWebhookEventsView.vue b/apps/frontend/src/views/admin/AdminWebhookEventsView.vue
index e69fc660..571ffd0d 100644
--- a/apps/frontend/src/views/admin/AdminWebhookEventsView.vue
+++ b/apps/frontend/src/views/admin/AdminWebhookEventsView.vue
@@ -409,7 +409,7 @@ onMounted(loadEvents)
   gap: 6px;
   min-width: 0;
   padding: 10px 11px;
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   background: rgba(255, 255, 255, 0.78);
   border: 1px solid var(--border-default);
 }