diff --git a/apps/frontend/src/styles/admin-config-pages.css b/apps/frontend/src/styles/admin-config-pages.css
new file mode 100644
index 00000000..08727357
--- /dev/null
+++ b/apps/frontend/src/styles/admin-config-pages.css
@@ -0,0 +1,282 @@
+/* ============================================================
+   管理员配置页面共享结构样式
+   引入: AdminFulfillmentBindings.css, AdminKuaishouCloudFulfillment.css
+   各页面自行覆盖颜色、圆角、主题属性
+   ============================================================ */
+
+/* ---------- 面板头部 & 分区标题 ---------- */
+.panel-header,
+.section-title-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.panel-header {
+  flex-wrap: wrap;
+}
+
+.panel-header-copy {
+  min-width: 280px;
+  flex: 1;
+}
+
+.panel-header h1,
+.panel-header-copy h1,
+.section-title-row h3 {
+  margin: 0;
+}
+
+.panel-header p,
+.panel-header-copy p,
+.section-title-row p {
+  margin: 6px 0 0;
+}
+
+/* ---------- 头部工具 ---------- */
+.header-tags,
+.header-actions,
+.section-header-tools,
+.section-mini-stats,
+.section-action-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.header-actions,
+.section-header-tools {
+  justify-content: flex-end;
+}
+
+/* ---------- 卡片容器 ---------- */
+.overview-card,
+.table-card,
+.empty-block,
+.error-copy {
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(86, 108, 138, 0.1);
+}
+
+.table-card--dense {
+  padding: 14px 16px 16px;
+}
+
+.overview-card {
+  display: grid;
+  gap: 12px;
+}
+
+/* ---------- 概览文件 & 统计 ---------- */
+.overview-file {
+  display: grid;
+  gap: 6px;
+}
+
+.overview-file code {
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+  padding: 8px 12px;
+  border-radius: 14px;
+  word-break: break-all;
+}
+
+.overview-stats {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.overview-stat {
+  display: grid;
+  gap: 4px;
+  padding: 12px 14px;
+  background: #f8fafc;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+}
+
+.overview-stat span {
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.overview-stat strong {
+  line-height: 1.1;
+}
+
+.overview-notes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* ---------- 分区工具 ---------- */
+.section-title-row--tight {
+  align-items: center;
+}
+
+/* ---------- 字段块 ---------- */
+.field-block {
+  min-width: 0;
+  display: grid;
+  gap: 6px;
+}
+
+.field-block span {
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.field-block--action {
+  align-content: end;
+}
+
+.field-block--action :deep(.el-button) {
+  width: 100%;
+}
+
+.field-help {
+  font-size: var(--text-xs);
+  line-height: 1.5;
+}
+
+/* ---------- 文本输入 ---------- */
+.text-input {
+  width: 100%;
+  border-radius: 14px;
+}
+
+/* ---------- 校验 & 错误 ---------- */
+.validation-banner,
+.binding-inline-error {
+  margin: 10px 0 0;
+  padding: 10px 12px;
+  border-radius: 14px;
+  font-weight: 600;
+}
+
+.binding-inline-error {
+  font-size: var(--text-sm);
+}
+
+/* ---------- 数据表 ---------- */
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 12px;
+}
+
+.data-table th,
+.data-table td {
+  text-align: left;
+  border-bottom: 1px solid rgba(86, 108, 138, 0.08);
+  vertical-align: top;
+}
+
+.data-table th {
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.cell-stack {
+  display: grid;
+  gap: 4px;
+}
+
+.cell-subtle {
+  font-size: var(--text-xs);
+}
+
+/* ---------- 绑定卡片 ---------- */
+.binding-card {
+  margin-top: 12px;
+  padding: 14px;
+  background: #f8fafc;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.binding-card--invalid {
+  border-color: rgba(220, 38, 38, 0.3);
+  box-shadow: 0 0 0 4px rgba(254, 226, 226, 0.85);
+}
+
+.binding-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: flex-start;
+  margin-bottom: 10px;
+}
+
+.binding-summary {
+  display: grid;
+  gap: 4px;
+}
+
+.binding-title-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.binding-subtle {
+  font-size: var(--text-sm);
+}
+
+/* ---------- 状态标签 ---------- */
+.binding-status-chip {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--radius-full);
+  padding: 2px 10px;
+  background: #fff1f2;
+  color: #be123c;
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.binding-status-chip--done {
+  background: #ecfdf3;
+  color: #027a48;
+}
+
+/* ---------- 折叠 ---------- */
+.collapse-button {
+  border: 1px solid rgba(86, 108, 138, 0.18);
+  background: rgba(255, 255, 255, 0.96);
+  border-radius: var(--radius-full);
+  padding: 7px 12px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.binding-collapsed-preview {
+  display: grid;
+  gap: 6px;
+}
+
+/* ---------- 操作栏 ---------- */
+.binding-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+}
+
+/* ---------- 复选框 ---------- */
+.checkbox-line {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* ---------- 工具栏提示 ---------- */
+.toolbar-hint {
+  margin: 10px 0 0;
+  font-size: var(--text-xs);
+}
diff --git a/apps/frontend/src/views/admin/AdminFulfillmentBindings.css b/apps/frontend/src/views/admin/AdminFulfillmentBindings.css
index a6898ddb..8798215f 100644
--- a/apps/frontend/src/views/admin/AdminFulfillmentBindings.css
+++ b/apps/frontend/src/views/admin/AdminFulfillmentBindings.css
@@ -1,45 +1,28 @@
+@import '../../styles/admin-config-pages.css';
+
+/* ============================================================
+   AdminFulfillmentBindings — 绿色主题覆盖 & 页面特有样式
+   ============================================================ */
+
 .admin-panel {
   display: grid;
   gap: 12px;
 }
 
-.panel-header,
-.section-title-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  align-items: flex-start;
-}
-
+/* ---------- 主题：标题文字 ---------- */
 .panel-header h1,
+.panel-header-copy h1,
 .section-title-row h3 {
-  margin: 0;
   color: var(--text-primary);
 }
 
 .panel-header p,
+.panel-header-copy p,
 .section-title-row p {
-  margin: 6px 0 0;
   color: var(--text-secondary);
 }
 
-.panel-header {
-  align-items: flex-start;
-  flex-wrap: wrap;
-}
-
-.panel-header-copy {
-  min-width: 280px;
-  flex: 1;
-}
-
-.header-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
+/* ---------- 主题：标签 chip (绿色) ---------- */
 .header-tag,
 .section-note-chip,
 .mini-stat-chip,
@@ -58,79 +41,7 @@
   letter-spacing: 0.04em;
 }
 
-.header-actions {
-  display: flex;
-  gap: 10px;
-}
-
-.overview-card,
-.table-card,
-.empty-block,
-.error-copy {
-  padding: 16px;
-  border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(86, 108, 138, 0.1);
-}
-
-.table-card--dense {
-  padding: 14px 16px 16px;
-}
-
-.overview-card {
-  display: grid;
-  gap: 12px;
-}
-
-.overview-file {
-  display: grid;
-  gap: 6px;
-}
-
-.overview-file code {
-  display: inline-flex;
-  width: 100%;
-  max-width: 100%;
-  padding: 8px 12px;
-  border-radius: 14px;
-  background: rgba(15, 23, 42, 0.05);
-  color: var(--text-primary);
-  word-break: break-all;
-}
-
-.overview-stats {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 10px;
-}
-
-.overview-stat {
-  display: grid;
-  gap: 4px;
-  padding: 12px 14px;
-  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: var(--text-xs);
-  font-weight: 700;
-}
-
-.overview-stat strong {
-  color: var(--text-primary);
-  font-size: 22px;
-  line-height: 1.1;
-}
-
-.overview-notes {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
+/* ---------- 主题：概览标签 ---------- */
 .overview-note {
   display: inline-flex;
   align-items: center;
@@ -143,25 +54,39 @@
   font-weight: 600;
 }
 
-.section-title-row--tight {
-  align-items: center;
+/* ---------- 主题覆写：header-actions 间距 ---------- */
+.header-actions {
+  gap: 10px;
 }
 
-.section-header-tools {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  justify-content: flex-end;
-  align-items: center;
+/* ---------- 主题覆写：卡片圆角 ---------- */
+.overview-card,
+.table-card,
+.empty-block,
+.error-copy {
+  border-radius: var(--radius-xl);
 }
 
-.section-mini-stats,
-.section-action-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+.overview-file code {
+  background: rgba(15, 23, 42, 0.05);
+  color: var(--text-primary);
 }
 
+/* ---------- 主题覆写：概览统计 ---------- */
+.overview-stat {
+  border-radius: var(--radius-lg);
+}
+
+.overview-stat span {
+  color: var(--text-secondary);
+}
+
+.overview-stat strong {
+  color: var(--text-primary);
+  font-size: 22px;
+}
+
+/* ---------- 查询工具栏 (本页特有) ---------- */
 .lookup-toolbar,
 .lookup-summary {
   display: grid;
@@ -173,16 +98,6 @@
   align-items: end;
 }
 
-.field-block--action :deep(.el-button) {
-  width: 100%;
-}
-
-.toolbar-hint {
-  margin: 10px 0 0;
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-}
-
 .lookup-summary {
   margin-top: 14px;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -201,120 +116,23 @@
   color: var(--text-primary);
 }
 
-.binding-card {
-  margin-top: 12px;
-  padding: 14px;
-  border-radius: var(--radius-lg);
-  background: #f8fafc;
-  border: 1px solid rgba(148, 163, 184, 0.18);
-}
-
-.binding-card--invalid {
-  border-color: rgba(220, 38, 38, 0.3);
-  box-shadow: 0 0 0 4px rgba(254, 226, 226, 0.85);
-}
-
-.binding-header {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: flex-start;
-  margin-bottom: 10px;
-}
-
-.binding-summary {
-  display: grid;
-  gap: 4px;
-}
-
-.binding-title-row {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  flex-wrap: wrap;
-  color: var(--text-primary);
-}
-
-.binding-subtle {
-  color: var(--text-secondary);
-  font-size: var(--text-sm);
-}
-
-.binding-status-chip {
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--radius-full);
-  padding: 2px 10px;
-  background: #fff1f2;
-  color: #be123c;
-  font-size: var(--text-xs);
-  font-weight: 700;
-}
-
-.binding-status-chip--done {
-  background: #ecfdf3;
-  color: #027a48;
-}
-
-.collapse-button {
-  border: 1px solid rgba(86, 108, 138, 0.18);
-  background: rgba(255, 255, 255, 0.96);
-  color: var(--text-primary);
-  border-radius: var(--radius-full);
-  padding: 7px 12px;
-  font: inherit;
-  cursor: pointer;
-}
-
-.binding-collapsed-preview {
-  display: grid;
-  gap: 6px;
-  color: var(--text-secondary);
-  font-size: var(--text-sm);
-}
-
-.binding-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 12px;
-}
-
-.validation-banner {
-  margin: 12px 0 0;
-  padding: 10px 12px;
-  border-radius: 14px;
-  background: #fff4f2;
-  border: 1px solid rgba(244, 63, 94, 0.18);
-  color: var(--color-danger);
-  font-weight: 600;
-}
-
-.field-block {
-  display: grid;
-  gap: 6px;
-}
-
+/* ---------- 主题覆写：字段块 ---------- */
 .field-block span {
   color: var(--text-secondary);
-  font-size: var(--text-xs);
-  font-weight: 700;
 }
 
 .field-help {
   color: var(--text-secondary);
-  font-size: var(--text-xs);
-  line-height: 1.5;
 }
 
 .field-wide {
   grid-column: 1 / -1;
 }
 
+/* ---------- 主题覆写：文本输入 ---------- */
 .text-input {
-  width: 100%;
   min-height: 40px;
   padding: 0 12px;
-  border-radius: 14px;
   border: 1px solid rgba(86, 108, 138, 0.18);
   background: rgba(255, 255, 255, 0.96);
 }
@@ -335,56 +153,15 @@
   background: rgba(148, 163, 184, 0.08);
 }
 
-.binding-inline-error {
-  margin: 10px 0 0;
+/* ---------- 主题覆写：校验/错误/空状态 ---------- */
+.validation-banner {
+  background: #fff4f2;
+  border: 1px solid rgba(244, 63, 94, 0.18);
   color: var(--color-danger);
-  font-size: var(--text-sm);
-  font-weight: 600;
 }
 
-.binding-actions {
-  margin-top: 10px;
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: center;
-}
-
-.checkbox-line {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  color: var(--text-secondary);
-}
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 12px;
-}
-
-.data-table th,
-.data-table td {
-  padding: 12px 10px;
-  text-align: left;
-  border-bottom: 1px solid rgba(86, 108, 138, 0.08);
-  color: var(--text-primary);
-  vertical-align: top;
-}
-
-.data-table th {
-  color: var(--text-secondary);
-  font-size: var(--text-sm);
-}
-
-.cell-stack {
-  display: grid;
-  gap: 4px;
-}
-
-.cell-subtle {
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
+.binding-inline-error {
+  color: var(--color-danger);
 }
 
 .empty-block,
@@ -392,10 +169,62 @@
   color: var(--text-secondary);
 }
 
-.error-copy {
-  color: var(--color-danger);
+/* ---------- 主题覆写：表格 ---------- */
+.data-table th,
+.data-table td {
+  padding: 12px 10px;
+  color: var(--text-primary);
 }
 
+.data-table th {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+}
+
+.cell-subtle {
+  color: var(--text-secondary);
+}
+
+/* ---------- 主题覆写：绑定卡片 ---------- */
+.binding-card {
+  border-radius: var(--radius-lg);
+}
+
+.binding-title-row {
+  color: var(--text-primary);
+}
+
+.binding-subtle {
+  color: var(--text-secondary);
+}
+
+.binding-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 12px;
+}
+
+/* ---------- 主题覆写：折叠/操作/复选框 ---------- */
+.binding-collapsed-preview {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+}
+
+.collapse-button {
+  color: var(--text-primary);
+}
+
+.checkbox-line {
+  color: var(--text-secondary);
+}
+
+.toolbar-hint {
+  color: var(--text-secondary);
+}
+
+/* ==============================================
+   响应式
+   ============================================== */
 @media (max-width: 900px) {
   .panel-header,
   .section-title-row,
diff --git a/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillment.css b/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillment.css
index e3d1ceef..de70f352 100644
--- a/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillment.css
+++ b/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillment.css
@@ -1,3 +1,5 @@
+@import '../../styles/admin-config-pages.css';
+
 .admin-panel {
   --panel-ink: var(--text-primary);
   --panel-muted: var(--text-secondary);
@@ -651,8 +653,336 @@
   }
 }
 
+/* ============================================================
+   从 admin-config-pages.css 继承的共享结构样式，本页仅覆盖主题
+   ============================================================ */
 
-.panel-header,
+/* ---------- 主题覆写：标题颜色 ---------- */
+.panel-header h1,
+.panel-header-copy h1,
+.section-title-row h3 {
+  color: #1d3555;
+}
+
+.panel-header p,
+.panel-header-copy p,
+.section-title-row p {
+  color: #64748b;
+  line-height: 1.55;
+}
+
+/* ---------- 主题覆写：chip 标签 (蓝色) ---------- */
+.header-tag,
+.mini-stat-chip,
+.overview-note {
+  color: #175cd3;
+}
+
+/* ---------- 主题覆写：卡片圆角 ---------- */
+.overview-card,
+.table-card,
+.empty-block,
+.error-copy {
+  border-radius: 20px;
+  box-shadow: none;
+}
+
+.overview-file code {
+  background: rgba(15, 23, 42, 0.05);
+  color: #1d3555;
+}
+
+/* ---------- 主题覆写：概览统计 ---------- */
+.overview-stat {
+  border-radius: 16px;
+}
+
+.overview-stat span {
+  color: #64748b;
+}
+
+.overview-stat strong {
+  color: #1d3555;
+  font-size: var(--text-2xl);
+}
+
+/* ---------- 查询工具栏 (本页特有) ---------- */
+.lookup-toolbar {
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) 110px 130px 180px;
+  gap: 12px;
+  align-items: end;
+}
+
+/* ---------- 字段块 ---------- */
+.field-block span {
+  color: #1d3555;
+}
+
+.field-help,
+.toolbar-hint,
+.cell-subtle {
+  color: #64748b;
+}
+
+.field-wide {
+  grid-column: span 2;
+}
+
+/* ---------- 文本输入 (蓝色聚焦环) ---------- */
+.text-input {
+  min-height: 36px;
+  padding: 8px 12px;
+  border: 1px solid rgba(86, 108, 138, 0.22);
+  background: #fff;
+  color: #1d3555;
+  outline: none;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.text-input:focus {
+  border-color: rgba(15, 93, 216, 0.42);
+  box-shadow: 0 0 0 4px rgba(15, 93, 216, 0.08);
+}
+
+.text-input--readonly,
+.text-input:disabled {
+  background: #f8fafc;
+  color: #64748b;
+}
+
+.textarea-input {
+  min-height: 72px;
+  resize: vertical;
+}
+
+/* ---------- 主题覆写：校验/错误 ---------- */
+.validation-banner,
+.binding-inline-error {
+  background: #fff5f4;
+  border: 1px solid rgba(180, 35, 24, 0.14);
+  color: #b42318;
+  font-size: var(--text-sm);
+}
+
+.error-copy {
+  color: #b42318;
+}
+
+/* ---------- 主题覆写：表格 ---------- */
+.data-table th,
+.data-table td {
+  padding: 11px 10px;
+}
+
+.data-table th {
+  color: #64748b;
+  font-size: var(--text-xs);
+}
+
+.cell-stack strong {
+  color: #1d3555;
+}
+
+/* ---------- 主题覆写：绑定卡片 ---------- */
+.binding-card {
+  border-radius: 16px;
+  box-shadow: none;
+}
+
+.binding-title-row {
+  color: #1d3555;
+}
+
+.binding-subtle {
+  color: #64748b;
+}
+
+.binding-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.collapse-button {
+  color: #1d3555;
+  cursor: pointer;
+}
+
+.binding-collapsed-preview {
+  padding: 10px 12px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.78);
+  color: #64748b;
+  font-size: var(--text-xs);
+}
+
+.checkbox-line {
+  color: #1d3555;
+  font-size: var(--text-sm);
+}
+
+.binding-actions {
+  margin-top: 12px;
+}
+
+.toolbar-hint {
+  margin: 10px 0 0;
+}
+
+.empty-inline {
+  padding: 14px;
+  color: #64748b;
+  text-align: center;
+}
+
+/* ---------- 映射编辑 (本页特有) ---------- */
+.mapping-editor {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
+  gap: 12px;
+  align-items: stretch;
+}
+
+.mapping-panel {
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.mapping-panel--external {
+  background: rgba(239, 246, 255, 0.72);
+}
+
+.mapping-panel--internal {
+  background: rgba(255, 255, 255, 0.86);
+  border-color: rgba(15, 93, 216, 0.16);
+}
+
+.mapping-panel-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: baseline;
+}
+
+.mapping-panel-head strong {
+  color: #1d3555;
+  font-size: 15px;
+}
+
+.mapping-panel-head span {
+  color: #64748b;
+  font-size: var(--text-xs);
+}
+
+.mapping-grid,
+.mapping-extra {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 12px;
+}
+
+.mapping-arrow {
+  display: grid;
+  place-items: center;
+  color: #175cd3;
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.mapping-arrow span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 30px;
+  min-width: 54px;
+  padding: 0 10px;
+  border-radius: var(--radius-full);
+  background: rgba(15, 93, 216, 0.08);
+  border: 1px solid rgba(15, 93, 216, 0.14);
+}
+
+.mapping-extra {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px dashed rgba(86, 108, 138, 0.18);
+}
+
+/* ---------- mini-stat-chip 交互态 (本页特有) ---------- */
+.mini-stat-chip--button {
+  border: 1px solid rgba(15, 93, 216, 0.12);
+  cursor: pointer;
+  font: inherit;
+}
+
+.mini-stat-chip--active {
+  border-color: rgba(15, 93, 216, 0.32);
+  background: rgba(15, 93, 216, 0.14);
+}
+
+.overview-label {
+  color: #64748b;
+  font-size: var(--text-xs);
+}
+
+/* ---------- Element Plus 蓝色主题覆盖 ---------- */
+.admin-panel :deep(.el-button) {
+  min-height: 34px;
+  border-radius: var(--radius-full);
+}
+
+.admin-panel :deep(.el-button--primary) {
+  --el-button-bg-color: #3a91f7;
+  --el-button-border-color: #3a91f7;
+  --el-button-hover-bg-color: #0f5dd8;
+  --el-button-hover-border-color: #0f5dd8;
+}
+
+/* ---------- 响应式 ---------- */
+@media (max-width: 900px) {
+  .overview-stats,
+  .lookup-toolbar,
+  .binding-grid,
+  .mapping-editor {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .mapping-arrow {
+    display: none;
+  }
+
+  .field-wide {
+    grid-column: span 2;
+  }
+}
+
+@media (max-width: 640px) {
+  .panel-header,
+  .section-title-row,
+  .section-header-tools,
+  .binding-actions,
+  .binding-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .overview-stats,
+  .lookup-toolbar,
+  .binding-grid,
+  .mapping-editor,
+  .mapping-grid,
+  .mapping-extra {
+    grid-template-columns: 1fr;
+  }
+
+  .field-wide {
+    grid-column: auto;
+  }
+}
 .section-title-row {
   display: flex;
   justify-content: space-between;
diff --git a/apps/frontend/src/views/admin/AdminMessageDeliveriesView.vue b/apps/frontend/src/views/admin/AdminMessageDeliveriesView.vue
index f907dcd1..b3ac3cc7 100644
--- a/apps/frontend/src/views/admin/AdminMessageDeliveriesView.vue
+++ b/apps/frontend/src/views/admin/AdminMessageDeliveriesView.vue
@@ -71,15 +71,6 @@ function resetFilters() {
   void loadMessageDeliveries(1)
 }
 
-function formatResponse(item: AdminMessageDeliveryListItem) {
-  if (item.responseStatus <= 0 && !item.errorMessage) return '-'
-  const parts = []
-  if (item.responseStatus > 0) parts.push(`HTTP ${item.responseStatus}`)
-  const msg = String(item.response?.Error_Msg || item.response?.msg || item.response?.message || item.response?.error || '').trim()
-  if (msg) parts.push(msg)
-  return parts.join(' · ') || item.errorMessage || '-'
-}
-
 onMounted(loadMessageDeliveries)
 </script>
 
@@ -92,21 +83,24 @@ onMounted(loadMessageDeliveries)
     </AdminPageHeader>
 
     <!-- 筛选 -->
-    <el-card shadow="never" class="filter-card">
+    <el-card shadow="never" class="section-card">
+      <template #header>
+        <div class="card-header">
+          <span class="card-title">筛选消息</span>
+          <span class="card-desc">按服务商、平台、发送状态、店铺等条件筛选。</span>
+        </div>
+      </template>
       <div class="filter-grid">
-        <el-input v-model="provider" placeholder="服务商，如 agiso" clearable @keyup.enter="loadMessageDeliveries(1)" />
-        <el-input v-model="platform" placeholder="业务平台，如 xianyu" clearable @keyup.enter="loadMessageDeliveries(1)" />
-        <el-select v-model="status" placeholder="发送状态" clearable>
+        <el-input v-model="provider" class="filter-control" placeholder="服务商，如 agiso" clearable @keyup.enter="loadMessageDeliveries(1)" />
+        <el-input v-model="platform" class="filter-control" placeholder="业务平台，如 xianyu" clearable @keyup.enter="loadMessageDeliveries(1)" />
+        <el-select v-model="status" class="filter-control" placeholder="发送状态" clearable>
           <el-option v-for="opt in adminMessageDeliveryStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
         </el-select>
-        <el-input v-model="shopId" placeholder="店铺 ID（精确匹配）" clearable @keyup.enter="loadMessageDeliveries(1)" />
-        <el-input v-model="platformOrderId" placeholder="平台订单号" clearable @keyup.enter="loadMessageDeliveries(1)" />
-        <el-input v-model="taskNo" placeholder="任务编号" clearable @keyup.enter="loadMessageDeliveries(1)" />
-        <el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
-        <el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
-      </div>
-      <div class="filter-actions">
-        <span class="filter-hint">消息体、Claim 链接、接口回执和失败原因都已经拆分展示，查问题会更直观。</span>
+        <el-input v-model="shopId" class="filter-control" placeholder="店铺 ID（精确匹配）" clearable @keyup.enter="loadMessageDeliveries(1)" />
+        <el-input v-model="platformOrderId" class="filter-control" placeholder="平台订单号" clearable @keyup.enter="loadMessageDeliveries(1)" />
+        <el-input v-model="taskNo" class="filter-control" placeholder="任务编号" clearable @keyup.enter="loadMessageDeliveries(1)" />
+        <el-date-picker v-model="dateFrom" class="filter-control" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
+        <el-date-picker v-model="dateTo" class="filter-control" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
         <div class="filter-buttons">
           <el-button round @click="resetFilters">重置</el-button>
           <el-button round type="primary" @click="loadMessageDeliveries(1)">查询</el-button>
@@ -115,102 +109,76 @@ onMounted(loadMessageDeliveries)
     </el-card>
 
     <!-- 摘要 -->
-    <div v-if="!loading && items.length > 0" class="summary-grid">
-      <el-card shadow="never" class="summary-card summary-card--success">
-        <span class="summary-label">当前页成功</span>
-        <strong class="summary-value">{{ summary.successCount }}</strong>
-        <span class="summary-meta">消息已被平台受理或发送完成</span>
-      </el-card>
-      <el-card shadow="never" class="summary-card summary-card--danger">
-        <span class="summary-label">当前页失败</span>
-        <strong class="summary-value">{{ summary.failedCount }}</strong>
-        <span class="summary-meta">优先查看失败原因和接口返回</span>
-      </el-card>
-      <el-card shadow="never" class="summary-card summary-card--warning">
-        <span class="summary-label">当前页等待</span>
-        <strong class="summary-value">{{ summary.pendingCount }}</strong>
-        <span class="summary-meta">等待发送或等待外部回调更新</span>
-      </el-card>
+    <div v-if="!loading && items.length > 0" class="summary-strip">
+      <span class="summary-title">当前页</span>
+      <span class="summary-metric" data-tone="success">发送成功 <strong>{{ summary.successCount }}</strong></span>
+      <span class="summary-metric" data-tone="danger">发送失败 <strong>{{ summary.failedCount }}</strong></span>
+      <span class="summary-metric" data-tone="warning">等待中 <strong>{{ summary.pendingCount }}</strong></span>
     </div>
 
     <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
 
     <!-- 列表 -->
-    <el-card shadow="never" class="table-card" v-loading="loading" element-loading-text="消息发送记录加载中">
+    <el-card shadow="never" class="section-card" v-loading="loading" element-loading-text="消息发送记录加载中">
       <template v-if="items.length === 0 && !loading">
         <el-empty description="当前筛选下还没有消息发送记录。" :image-size="60" />
       </template>
 
       <template v-else>
-        <div class="records-toolbar">
+        <div class="orders-toolbar">
           <strong>发送明细</strong>
           <span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
         </div>
 
-        <div class="record-list">
-          <article v-for="item in items" :key="item.deliveryId" class="record-card">
-            <div class="record-top">
-              <div class="record-identity">
-                <span class="record-id">#{{ item.deliveryId }}</span>
-                <div class="record-source-line">
-                  <span class="source-pill">{{ item.provider || '-' }}</span>
-                  <span class="source-separator">/</span>
-                  <span class="source-pill">{{ item.platform || '-' }}</span>
-                  <span class="source-chip">{{ item.shopName || item.shopId || '-' }}</span>
-                  <span class="source-chip source-chip--muted">{{ item.channel || '-' }}</span>
+        <el-table :data="items" stripe size="small" class="orders-table">
+          <el-table-column label="消息ID" width="100">
+            <template #default="{ row }">
+              <span class="order-no">#{{ row.deliveryId }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="接收者" min-width="160">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-title">{{ row.recipientKey || row.shopName || row.shopId || '-' }}</span>
+                <span class="cell-subline">{{ row.shopName || row.shopId || '-' }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="消息类型" min-width="140">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-title">{{ row.channel || '-' }}</span>
+                <div class="cell-meta-row">
+                  <span class="compact-chip">{{ row.provider || '-' }}</span>
+                  <span class="compact-chip">{{ row.platform || '-' }}</span>
                 </div>
               </div>
-              <AdminStatusTag :status="item.status" />
-            </div>
-
-            <div class="record-grid">
-              <section class="record-section">
-                <span class="section-label">订单 / 任务</span>
-                <div class="cell-stack">
-                  <div class="cell-title">{{ item.platformOrderId || '-' }}</div>
-                  <div class="meta-chip-row">
-                    <span v-if="item.orderId" class="meta-chip">
-                      订单
-                      <RouterLink class="inline-link" :to="`/admin/orders/${item.orderId}`">{{ item.orderId }}</RouterLink>
-                    </span>
-                    <span v-if="item.taskId" class="meta-chip">
-                      任务
-                      <RouterLink class="inline-link" :to="`/admin/tasks/${item.taskId}`">{{ item.taskNo || item.taskId }}</RouterLink>
-                    </span>
-                  </div>
-                  <div v-if="item.taskStatus" class="tag-row">
-                    <AdminStatusTag :status="item.taskStatus" />
-                  </div>
-                </div>
-              </section>
-
-              <section class="record-section record-section-message">
-                <span class="section-label">消息内容</span>
-                <div class="message-cell" :title="item.messageContent">{{ item.messageContent || '-' }}</div>
-                <a v-if="item.claimUrl" class="claim-link" :href="item.claimUrl" target="_blank" rel="noreferrer">打开 Claim 链接</a>
-              </section>
-
-              <section class="record-section">
-                <span class="section-label">接口结果</span>
-                <div class="cell-stack">
-                  <div class="cell-title">{{ formatResponse(item) }}</div>
-                  <div class="cell-subtle">HTTP {{ item.responseStatus || 0 }}</div>
-                  <div v-if="item.requestUrl" class="cell-subtle cell-subtle-break">{{ item.requestUrl }}</div>
-                  <div v-if="item.errorMessage" class="error-inline">{{ item.errorMessage }}</div>
-                </div>
-              </section>
-
-              <section class="record-section">
-                <span class="section-label">时间</span>
-                <div class="cell-stack">
-                  <div class="cell-title">创建 {{ formatAdminDateTime(item.createdAt) }}</div>
-                  <div class="cell-subtle">发送 {{ formatAdminDateTime(item.sentAt) }}</div>
-                  <div class="cell-subtle">更新 {{ formatAdminDateTime(item.updatedAt) }}</div>
-                </div>
-              </section>
-            </div>
-          </article>
-        </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="100">
+            <template #default="{ row }">
+              <AdminStatusTag :status="row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" min-width="160">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-title">{{ formatAdminDateTime(row.createdAt) }}</span>
+                <span v-if="row.sentAt" class="cell-subline">发送 {{ formatAdminDateTime(row.sentAt) }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" min-width="140">
+            <template #default="{ row }">
+              <div class="action-stack">
+                <a v-if="row.claimUrl" class="detail-link" :href="row.claimUrl" target="_blank" rel="noreferrer">Claim 链接</a>
+                <RouterLink v-if="row.orderId" class="detail-link" :to="`/admin/orders/${row.orderId}`">订单 #{{ row.orderId }}</RouterLink>
+                <RouterLink v-if="row.taskId" class="detail-link" :to="`/admin/tasks/${row.taskId}`">任务 {{ row.taskNo || row.taskId }}</RouterLink>
+                <span v-if="!row.claimUrl && !row.orderId && !row.taskId" class="cell-subline">-</span>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
 
         <el-pagination
           v-if="pagination.total > 0"
@@ -230,187 +198,147 @@ onMounted(loadMessageDeliveries)
 .deliveries-page { display: grid; gap: 0; }
 
 .total-badge {
-  min-height: 34px;
-  padding: 0 14px;
-  border-radius: var(--radius-full);
-  background: var(--bg-surface);
-  border: 1px solid var(--border-default);
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  font-weight: 700;
   display: inline-flex;
   align-items: center;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 1px solid rgba(37, 89, 167, 0.14);
+  border-radius: var(--radius-full);
+  background: rgba(37, 89, 167, 0.08);
+  color: #2559a7;
+  font-size: var(--text-xs);
+  font-weight: 700;
 }
 
-.filter-card { margin-top: var(--space-4); }
+.section-card { margin-top: var(--space-4); }
+
+.card-header { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-end; }
+.card-title { color: var(--text-primary); font-size: var(--text-lg); font-weight: 600; }
+.card-desc { color: var(--text-secondary); font-size: var(--text-sm); }
 
 .filter-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: var(--space-3);
+  align-items: center;
 }
 
-.filter-actions {
+.filter-control { width: 100%; min-width: 0; }
+.filter-buttons { display: flex; gap: 10px; min-width: 156px; justify-content: flex-end; }
+
+.summary-strip {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  margin-top: var(--space-3);
-}
-
-.filter-hint { color: var(--text-secondary); font-size: var(--text-xs); }
-.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
-
-.summary-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--space-3);
-  margin-top: var(--space-4);
-}
-
-.summary-card { position: relative; overflow: hidden; }
-.summary-card::after {
-  content: '';
-  position: absolute;
-  inset: auto -26px -26px auto;
-  width: 96px;
-  height: 96px;
-  border-radius: var(--radius-full);
-  opacity: 0.14;
-}
-.summary-card--success::after { background: var(--color-success); }
-.summary-card--danger::after { background: var(--color-danger); }
-.summary-card--warning::after { background: var(--color-warning); }
-
-.summary-label { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; }
-.summary-value { font-size: var(--text-3xl); line-height: 1; color: var(--text-primary); }
-.summary-meta { color: var(--text-muted); font-size: var(--text-xs); }
-
-.table-card { margin-top: var(--space-4); overflow: visible; }
-
-.records-toolbar { margin-bottom: var(--space-3); }
-.records-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
-.records-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
-
-.record-list { display: grid; gap: var(--space-3); }
-
-.record-card {
-  display: grid;
-  gap: 14px;
-  padding: 14px;
-  border-radius: var(--radius-lg);
-  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
-  border: 1px solid var(--border-default);
-}
-
-.record-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
-.record-identity { display: grid; gap: var(--space-2); min-width: 0; }
-
-.record-id {
-  display: inline-flex;
-  align-items: center;
-  width: fit-content;
-  min-height: 24px;
-  padding: 0 10px;
-  border-radius: var(--radius-full);
-  background: var(--color-primary-light);
-  color: var(--color-primary-dark);
-  font-size: var(--text-xs);
-  font-weight: 800;
-}
-
-.record-source-line { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
-
-.source-pill, .source-chip {
-  display: inline-flex;
-  align-items: center;
-  min-height: 28px;
-  max-width: 100%;
-  padding: 0 10px;
-  border-radius: var(--radius-full);
-  font-size: var(--text-xs);
-  font-weight: 600;
-}
-.source-pill { background: #f1f6ff; color: var(--color-primary-dark); }
-.source-chip { background: #f4f7fb; color: var(--text-secondary); }
-.source-chip--muted { color: var(--text-muted); }
-.source-separator { color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
-
-.record-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
-  gap: var(--space-3);
-}
-
-.record-section {
-  display: grid;
   gap: var(--space-2);
-  min-width: 0;
-  padding: var(--space-3);
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.78);
-  border: 1px solid var(--border-default);
-}
-.record-section-message { grid-column: span 2; }
-
-.section-label { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
-
-.cell-stack { display: grid; gap: 6px; min-width: 0; }
-.cell-title { color: var(--text-primary); font-weight: 700; word-break: break-word; }
-.cell-subtle { color: var(--text-secondary); font-size: var(--text-xs); }
-.cell-subtle-break { word-break: break-all; }
-
-.message-cell {
-  white-space: pre-wrap;
-  word-break: break-word;
-  line-height: 1.6;
-  color: #334155;
-  font-size: var(--text-sm);
-  min-height: 72px;
+  min-height: 38px;
+  padding: 0;
+  margin-top: var(--space-4);
+  flex-wrap: wrap;
 }
 
-.claim-link, .inline-link { color: var(--color-primary-dark); text-decoration: none; }
-.claim-link {
+.summary-title { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; margin-right: 2px; }
+.summary-metric {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: fit-content;
-  min-height: 34px;
-  padding: 0 14px;
+  gap: 5px;
+  min-height: 28px;
+  padding: 0 10px;
   border-radius: var(--radius-full);
-  background: var(--color-primary-light);
-  border: 1px solid rgba(23, 92, 211, 0.16);
+  border: 1px solid transparent;
+  color: var(--text-secondary);
+  background: #f8fafc;
   font-size: var(--text-xs);
   font-weight: 700;
 }
+.summary-metric strong { color: var(--text-primary); font-size: var(--text-base); line-height: 1; }
+.summary-metric[data-tone='success'] { color: var(--color-success-dark); background: var(--color-success-light); border-color: #bbf7d0; }
+.summary-metric[data-tone='danger'] { color: var(--color-danger-dark); background: var(--color-danger-light); border-color: #fecaca; }
+.summary-metric[data-tone='warning'] { color: var(--color-warning-dark); background: var(--color-warning-light); border-color: #fed7aa; }
 
-.meta-chip-row, .tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
-.meta-chip {
+.orders-toolbar { margin-bottom: var(--space-3); }
+.orders-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
+.orders-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
+
+.orders-table {
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  --el-table-bg-color: transparent;
+  --el-table-tr-bg-color: transparent;
+  --el-table-header-bg-color: rgba(239, 246, 255, 0.72);
+  --el-table-row-hover-bg-color: rgba(239, 246, 255, 0.72);
+  --el-table-border-color: rgba(86, 108, 138, 0.1);
+}
+.orders-table :deep(.el-table__inner-wrapper::before) { display: none; }
+.orders-table :deep(th.el-table__cell) {
+  height: 42px;
+  background: var(--el-table-header-bg-color);
+  color: var(--text-secondary);
+  font-weight: 700;
+}
+
+.cell-stack { display: grid; gap: 5px; }
+
+.order-no {
+  display: inline-block;
+  max-width: 100%;
+  font-size: var(--text-base);
+  font-weight: 800;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.cell-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+
+.compact-chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  max-width: 240px;
+  padding: 0 9px;
+  border-radius: var(--radius-full);
+  background: #f4f7fb;
+  border: 1px solid var(--border-default);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.cell-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
+.cell-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
+
+.action-stack { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+
+.detail-link {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
   min-height: 28px;
   padding: 0 10px;
   border-radius: var(--radius-full);
-  background: #f5f8fc;
-  color: #304866;
+  border: 1px solid var(--border-default);
+  color: var(--color-primary-dark);
+  background: var(--color-primary-light);
   font-size: var(--text-xs);
+  font-weight: 700;
+  text-decoration: none;
 }
+.detail-link:hover { border-color: var(--border-hover); background: #dbeafe; }
 
-.error-inline { color: var(--color-danger); line-height: 1.6; font-size: var(--text-xs); }
-
-@media (max-width: 1200px) { .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+@media (max-width: 1200px) {
+  .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
 @media (max-width: 900px) {
-  .filter-grid,
-  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .record-section-message { grid-column: span 1; }
-  .filter-actions { flex-direction: column; align-items: flex-start; }
+  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .filter-buttons { justify-content: flex-start; }
 }
 @media (max-width: 640px) {
-  .filter-grid,
-  .summary-grid { grid-template-columns: 1fr; }
+  .filter-grid { grid-template-columns: 1fr; }
   .filter-buttons { width: 100%; }
   .filter-buttons :deep(.el-button) { flex: 1 1 auto; }
-  .record-top { flex-direction: column; align-items: flex-start; }
+  .order-no { font-size: var(--text-base); }
 }
 </style>
diff --git a/apps/frontend/src/views/admin/AdminOrdersView.vue b/apps/frontend/src/views/admin/AdminOrdersView.vue
index 7d908e57..9690b8e2 100644
--- a/apps/frontend/src/views/admin/AdminOrdersView.vue
+++ b/apps/frontend/src/views/admin/AdminOrdersView.vue
@@ -63,10 +63,6 @@ function resolveBuyerLabel(item: AdminOrderListItem) {
   return item.buyerName || item.buyerId || '未识别'
 }
 
-function resolveContactLabel(item: AdminOrderListItem) {
-  return item.receiverContact || '未提供'
-}
-
 function resolveShopLabel(item: AdminOrderListItem) {
   return item.shopName || item.shopId || '未识别店铺'
 }
diff --git a/apps/frontend/src/views/admin/AdminPlatformShopsView.vue b/apps/frontend/src/views/admin/AdminPlatformShopsView.vue
index e87265c0..83feb35a 100644
--- a/apps/frontend/src/views/admin/AdminPlatformShopsView.vue
+++ b/apps/frontend/src/views/admin/AdminPlatformShopsView.vue
@@ -2,6 +2,7 @@
 import { onMounted, ref } from 'vue'
 import { RefreshRight } from '@element-plus/icons-vue'
 
+import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
 import AdminPlatformAgisoSection from '@/components/admin/AdminPlatformAgisoSection.vue'
 import AdminPlatformCloudtentaclesSection from '@/components/admin/AdminPlatformCloudtentaclesSection.vue'
 import AdminPlatformNinetyoneSection from '@/components/admin/AdminPlatformNinetyoneSection.vue'
@@ -202,13 +203,8 @@ onMounted(loadConfigs)
 
 <template>
   <div class="platform-page">
-    <!-- 页面头部 -->
-    <div class="page-header">
-      <div>
-        <h1>平台配置</h1>
-        <p>按平台分别管理来源接入、凭据与店铺能力。</p>
-      </div>
-      <div class="header-actions">
+    <AdminPageHeader title="平台配置" description="按平台分别管理来源接入、凭据与店铺能力。">
+      <template #extra>
         <el-button circle title="刷新全部配置" @click="loadConfigs">
           <template #icon><el-icon><RefreshRight /></el-icon></template>
         </el-button>
@@ -219,8 +215,8 @@ onMounted(loadConfigs)
         >
           新增 Agiso 店铺
         </el-button>
-      </div>
-    </div>
+      </template>
+    </AdminPageHeader>
 
     <!-- 权限不足 -->
     <el-result
@@ -416,31 +412,6 @@ onMounted(loadConfigs)
   gap: var(--space-4);
 }
 
-/* 页面头部 */
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--space-3);
-}
-
-.page-header h1 {
-  margin: 0;
-  font-size: var(--text-3xl);
-  color: var(--text-primary);
-}
-
-.page-header p {
-  margin: var(--space-2) 0 0;
-  color: var(--text-secondary);
-}
-
-.header-actions {
-  display: flex;
-  gap: var(--space-2);
-  flex-shrink: 0;
-}
-
 /* 概览卡片网格 */
 .overview-grid {
   display: grid;
@@ -488,10 +459,6 @@ onMounted(loadConfigs)
 }
 
 @media (max-width: 900px) {
-  .page-header {
-    flex-direction: column;
-  }
-
   .overview-grid {
     grid-template-columns: repeat(2, 1fr);
   }
diff --git a/apps/frontend/src/views/admin/AdminUsersView.vue b/apps/frontend/src/views/admin/AdminUsersView.vue
index ce90c0a5..12a1402c 100644
--- a/apps/frontend/src/views/admin/AdminUsersView.vue
+++ b/apps/frontend/src/views/admin/AdminUsersView.vue
@@ -140,7 +140,7 @@ onMounted(loadUsers)
 
       <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
 
-      <section class="users-table-section">
+      <el-card shadow="never" class="section-card">
         <div class="users-table-toolbar">
           <strong>用户列表</strong>
           <span>共 {{ pagination.total }} 个账号</span>
@@ -200,7 +200,7 @@ onMounted(loadUsers)
           style="margin-top: 16px; justify-content: center"
           @current-change="loadUsers"
         />
-      </section>
+      </el-card>
     </template>
   </div>
 </template>
@@ -228,10 +228,7 @@ onMounted(loadUsers)
 .filter-control--role,
 .filter-control--status { width: 128px; }
 .filter-control--password { width: 210px; }
-.users-table-section {
-  margin-top: var(--space-5);
-  overflow: visible;
-}
+.section-card { margin-top: var(--space-4); }
 .users-table-toolbar {
   display: flex;
   align-items: center;
diff --git a/apps/frontend/src/views/admin/AdminWebhookEventsView.vue b/apps/frontend/src/views/admin/AdminWebhookEventsView.vue
index 571ffd0d..7db431df 100644
--- a/apps/frontend/src/views/admin/AdminWebhookEventsView.vue
+++ b/apps/frontend/src/views/admin/AdminWebhookEventsView.vue
@@ -90,17 +90,6 @@ function resetFilters() {
   void loadEvents(1)
 }
 
-function formatRequestTimestamp(value: string) {
-  const normalized = String(value || '').trim()
-  if (!/^\d{10,13}$/.test(normalized)) return normalized || '-'
-  const epochMs = normalized.length === 13 ? Number(normalized) : Number(normalized) * 1000
-  return formatAdminDateTime(new Date(epochMs).toISOString())
-}
-
-function formatAmount(item: AdminWebhookEventListItem) {
-  return item.totalAmount ? `${item.totalAmount} ${item.currency}` : '-'
-}
-
 function formatVisibilityLabel(value: string) {
   return value === 'ignored' ? '已忽略' : '重要'
 }
@@ -117,23 +106,26 @@ onMounted(loadEvents)
     </AdminPageHeader>
 
     <!-- 筛选 -->
-    <el-card shadow="never" class="filter-card">
+    <el-card shadow="never" class="section-card">
+      <template #header>
+        <div class="card-header">
+          <span class="card-title">筛选 Webhook</span>
+          <span class="card-desc">按服务商、平台、处理状态、可见级别等条件筛选。</span>
+        </div>
+      </template>
       <div class="filter-grid">
-        <el-input v-model="provider" placeholder="服务商，如 agiso" clearable @keyup.enter="loadEvents(1)" />
-        <el-input v-model="platform" placeholder="业务平台，如 xianyu / taobao" clearable @keyup.enter="loadEvents(1)" />
-        <el-select v-model="processed" placeholder="处理结果" clearable>
+        <el-input v-model="provider" class="filter-control" placeholder="服务商，如 agiso" clearable @keyup.enter="loadEvents(1)" />
+        <el-input v-model="platform" class="filter-control" placeholder="业务平台，如 xianyu / taobao" clearable @keyup.enter="loadEvents(1)" />
+        <el-select v-model="processed" class="filter-control" placeholder="处理结果" clearable>
           <el-option v-for="opt in adminWebhookProcessedOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
         </el-select>
-        <el-select v-model="visibility" placeholder="可见级别" clearable>
+        <el-select v-model="visibility" class="filter-control" placeholder="可见级别" clearable>
           <el-option v-for="opt in adminWebhookVisibilityOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
         </el-select>
-        <el-input v-model="platformOrderId" placeholder="平台订单号" clearable @keyup.enter="loadEvents(1)" />
-        <el-input v-model="relatedOrderId" placeholder="后台订单 ID" clearable @keyup.enter="loadEvents(1)" />
-        <el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
-        <el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
-      </div>
-      <div class="filter-actions">
-        <span class="filter-hint">Webhook 事件已拆成来源、摘要、订单、验签、请求来源几个信息块，排查会更直观。</span>
+        <el-input v-model="platformOrderId" class="filter-control" placeholder="平台订单号" clearable @keyup.enter="loadEvents(1)" />
+        <el-input v-model="relatedOrderId" class="filter-control" placeholder="后台订单 ID" clearable @keyup.enter="loadEvents(1)" />
+        <el-date-picker v-model="dateFrom" class="filter-control" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
+        <el-date-picker v-model="dateTo" class="filter-control" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
         <div class="filter-buttons">
           <el-button round @click="resetFilters">重置</el-button>
           <el-button round type="primary" @click="loadEvents(1)">查询</el-button>
@@ -142,134 +134,89 @@ onMounted(loadEvents)
     </el-card>
 
     <!-- 摘要 -->
-    <div v-if="!loading && items.length > 0" class="summary-grid">
-      <el-card shadow="never" class="summary-card summary-card--success">
-        <span class="summary-label">当前页处理成功</span>
-        <strong class="summary-value">{{ summary.processedCount }}</strong>
-        <span class="summary-meta">已通过处理链路，通常无需人工介入</span>
-      </el-card>
-      <el-card shadow="never" class="summary-card summary-card--danger">
-        <span class="summary-label">当前页异常 / 失败</span>
-        <strong class="summary-value">{{ summary.failedCount }}</strong>
-        <span class="summary-meta">优先查看验签、处理错误和请求来源</span>
-      </el-card>
-      <el-card shadow="never" class="summary-card summary-card--primary">
-        <span class="summary-label">当前页重要事件</span>
-        <strong class="summary-value">{{ summary.importantCount }}</strong>
-        <span class="summary-meta">仅重要模式下更适合日常排查</span>
-      </el-card>
+    <div v-if="!loading && items.length > 0" class="summary-strip">
+      <span class="summary-title">当前页</span>
+      <span class="summary-metric" data-tone="success">处理成功 <strong>{{ summary.processedCount }}</strong></span>
+      <span class="summary-metric" data-tone="danger">异常/失败 <strong>{{ summary.failedCount }}</strong></span>
+      <span class="summary-metric" data-tone="primary">重要事件 <strong>{{ summary.importantCount }}</strong></span>
     </div>
 
     <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
 
     <!-- 列表 -->
-    <el-card shadow="never" class="table-card" v-loading="loading" element-loading-text="Webhook 列表加载中">
+    <el-card shadow="never" class="section-card" v-loading="loading" element-loading-text="Webhook 列表加载中">
       <template v-if="items.length === 0 && !loading">
         <el-empty description="当前筛选条件下暂无 Webhook 事件" :image-size="60" />
       </template>
 
       <template v-else>
-        <div class="events-toolbar">
+        <div class="orders-toolbar">
           <strong>Webhook 列表</strong>
           <span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
         </div>
 
-        <div class="event-list">
-          <article v-for="item in items" :key="item.eventId" class="event-card">
-            <div class="event-card-top">
-              <div class="event-identity">
-                <RouterLink :to="`/admin/webhook-events/${item.eventId}`" class="event-no">
-                  #{{ item.eventId }} · {{ formatAdminWebhookEventType(item.eventType) }}
+        <el-table :data="items" stripe size="small" class="orders-table">
+          <el-table-column label="事件ID" width="100">
+            <template #default="{ row }">
+              <RouterLink :to="`/admin/webhook-events/${row.eventId}`" class="order-no">
+                #{{ row.eventId }}
+              </RouterLink>
+            </template>
+          </el-table-column>
+          <el-table-column label="事件类型" min-width="200">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-title">{{ formatAdminWebhookEventType(row.eventType) }}</span>
+                <div class="cell-meta-row">
+                  <span class="compact-chip">{{ row.provider || '-' }}</span>
+                  <span class="compact-chip">{{ row.platform || '-' }}</span>
+                  <span class="compact-chip compact-chip--muted">{{ row.shopName || row.shopId || '-' }}</span>
+                </div>
+                <span v-if="row.aopic" class="cell-subline">aopic {{ row.aopic }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="平台订单号" min-width="180">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-title">{{ row.platformOrderId || '-' }}</span>
+                <span v-if="row.totalAmount" class="cell-subline">{{ row.totalAmount }} {{ row.currency }}</span>
+                <span v-if="row.buyerName || row.buyerId" class="cell-subline">买家 {{ row.buyerName || row.buyerId }}</span>
+                <RouterLink v-if="row.relatedOrderId" class="inline-link" :to="`/admin/orders/${row.relatedOrderId}`">
+                  关联订单 #{{ row.relatedOrderId }}
                 </RouterLink>
-                <div class="event-meta-row">
-                  <span class="compact-chip">{{ item.provider || '-' }}</span>
-                  <span class="compact-chip">{{ item.platform || '-' }}</span>
-                  <span v-if="item.shopName || item.shopId" class="compact-chip compact-chip--muted">{{ item.shopName || item.shopId }}</span>
-                </div>
               </div>
-              <div class="event-top-actions">
-                <span class="compact-chip compact-chip--muted">{{ formatVisibilityLabel(item.visibilityLevel) }}</span>
-                <el-button v-if="canReplay" :loading="actionLoadingId === item.eventId" size="small" @click="submitReplay(item)">重放</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" min-width="150">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <div class="status-stack">
+                  <AdminStatusTag :status="row.processed ? 'success' : 'failed'" />
+                  <AdminStatusTag :status="row.signatureValid ? 'success' : 'failed'" />
+                </div>
+                <span class="cell-subline">{{ formatVisibilityLabel(row.visibilityLevel) }}</span>
+                <span v-if="row.processError" class="error-inline">{{ row.processError }}</span>
               </div>
-            </div>
-
-            <div class="event-grid">
-              <section class="event-section">
-                <span class="section-label">来源</span>
-                <div class="cell-stack">
-                  <div class="cell-title">{{ item.provider }} / {{ item.platform }}</div>
-                  <div v-if="item.platformRaw && item.platformRaw !== item.platform" class="cell-subtle">原始平台 {{ item.platformRaw }}</div>
-                  <div class="meta-chip-row">
-                    <span class="meta-chip">店铺 {{ item.shopName || item.shopId || '-' }}</span>
-                    <span v-if="item.shopId" class="meta-chip">ID {{ item.shopId }}</span>
-                  </div>
-                </div>
-              </section>
-
-              <section class="event-section">
-                <span class="section-label">事件摘要</span>
-                <div class="cell-stack">
-                  <div class="cell-title">{{ formatAdminWebhookEventType(item.eventType) }}</div>
-                  <div v-if="item.messageText" class="cell-subtle">{{ item.messageText }}</div>
-                  <div class="meta-chip-row">
-                    <span v-if="item.aopic" class="meta-chip">aopic {{ item.aopic }}</span>
-                    <span v-if="item.itemCount" class="meta-chip">商品 {{ item.itemCount }}</span>
-                  </div>
-                  <div class="mono-inline event-key" :title="item.eventKey">Key: {{ item.eventKey }}</div>
-                </div>
-              </section>
-
-              <section class="event-section">
-                <span class="section-label">订单与店铺</span>
-                <div class="cell-stack">
-                  <div class="cell-title">平台单 {{ item.platformOrderId || '-' }}</div>
-                  <div class="cell-subtle">买家 {{ item.buyerName || item.buyerId || '-' }}</div>
-                  <div class="cell-subtle">金额 {{ formatAmount(item) }}</div>
-                  <div class="meta-chip-row">
-                    <span class="meta-chip">
-                      关联订单
-                      <template v-if="item.relatedOrderId">
-                        <RouterLink class="inline-link" :to="`/admin/orders/${item.relatedOrderId}`">{{ item.relatedOrderId }}</RouterLink>
-                      </template>
-                      <template v-else>-</template>
-                    </span>
-                    <span class="meta-chip">任务 {{ item.taskCount }}</span>
-                  </div>
-                </div>
-              </section>
-
-              <section class="event-section">
-                <span class="section-label">验签与处理</span>
-                <div class="cell-stack">
-                  <div class="tag-row">
-                    <AdminStatusTag :status="item.signatureValid ? 'success' : 'failed'" />
-                    <AdminStatusTag :status="item.processed ? 'success' : 'failed'" />
-                  </div>
-                  <div class="cell-subtle" :title="item.requestSign || '-'">签名 {{ item.requestSign || '-' }}</div>
-                  <div v-if="item.processError" class="error-inline">{{ item.processError }}</div>
-                </div>
-              </section>
-
-              <section class="event-section">
-                <span class="section-label">请求来源</span>
-                <div class="cell-stack">
-                  <div class="cell-title">{{ item.sourceHost || '-' }}</div>
-                  <div class="cell-subtle">IP {{ item.sourceIp || '-' }}</div>
-                  <div class="cell-subtle line-clamp-2">UA {{ item.userAgent || '-' }}</div>
-                  <div class="cell-subtle">请求时间 {{ formatRequestTimestamp(item.requestTimestamp) }}</div>
-                </div>
-              </section>
-
-              <section class="event-section">
-                <span class="section-label">时间</span>
-                <div class="cell-stack">
-                  <div class="cell-title">{{ formatAdminDateTime(item.createdAt) }}</div>
-                  <div class="cell-subtle">事件 ID #{{ item.eventId }}</div>
-                </div>
-              </section>
-            </div>
-          </article>
-        </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" min-width="160">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-title">{{ formatAdminDateTime(row.createdAt) }}</span>
+                <span class="cell-subline">#{{ row.eventId }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="130" align="center">
+            <template #default="{ row }">
+              <div class="action-stack">
+                <RouterLink :to="`/admin/webhook-events/${row.eventId}`" class="detail-link">详情</RouterLink>
+                <el-button v-if="canReplay" :loading="actionLoadingId === row.eventId" size="small" @click="submitReplay(row)">重放</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
 
         <el-pagination
           v-if="pagination.total > 0"
@@ -289,87 +236,92 @@ onMounted(loadEvents)
 .webhooks-page { display: grid; gap: 0; }
 
 .total-badge {
-  min-height: 34px;
-  padding: 0 14px;
-  border-radius: var(--radius-full);
-  background: var(--bg-surface);
-  border: 1px solid var(--border-default);
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  font-weight: 700;
   display: inline-flex;
   align-items: center;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 1px solid rgba(37, 89, 167, 0.14);
+  border-radius: var(--radius-full);
+  background: rgba(37, 89, 167, 0.08);
+  color: #2559a7;
+  font-size: var(--text-xs);
+  font-weight: 700;
 }
 
-.filter-card { margin-top: var(--space-4); }
+.section-card { margin-top: var(--space-4); }
+
+.card-header { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-end; }
+.card-title { color: var(--text-primary); font-size: var(--text-lg); font-weight: 600; }
+.card-desc { color: var(--text-secondary); font-size: var(--text-sm); }
 
 .filter-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: var(--space-3);
+  align-items: center;
 }
 
-.filter-actions {
+.filter-control { width: 100%; min-width: 0; }
+.filter-buttons { display: flex; gap: 10px; min-width: 156px; justify-content: flex-end; }
+
+.summary-strip {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  margin-top: var(--space-3);
-}
-
-.filter-hint { color: var(--text-secondary); font-size: var(--text-xs); }
-.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
-
-.summary-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--space-3);
+  gap: var(--space-2);
+  min-height: 38px;
+  padding: 0;
   margin-top: var(--space-4);
+  flex-wrap: wrap;
 }
 
-.summary-card { position: relative; overflow: hidden; }
-.summary-card::after {
-  content: '';
-  position: absolute;
-  inset: auto -26px -26px auto;
-  width: 96px;
-  height: 96px;
+.summary-title { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; margin-right: 2px; }
+.summary-metric {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 28px;
+  padding: 0 10px;
   border-radius: var(--radius-full);
-  opacity: 0.14;
+  border: 1px solid transparent;
+  color: var(--text-secondary);
+  background: #f8fafc;
+  font-size: var(--text-xs);
+  font-weight: 700;
 }
-.summary-card--success::after { background: var(--color-success); }
-.summary-card--danger::after { background: var(--color-danger); }
-.summary-card--primary::after { background: var(--color-primary); }
+.summary-metric strong { color: var(--text-primary); font-size: var(--text-base); line-height: 1; }
+.summary-metric[data-tone='success'] { color: var(--color-success-dark); background: var(--color-success-light); border-color: #bbf7d0; }
+.summary-metric[data-tone='danger'] { color: var(--color-danger-dark); background: var(--color-danger-light); border-color: #fecaca; }
+.summary-metric[data-tone='primary'] { color: var(--color-primary-dark); background: var(--color-primary-light); border-color: #bfdbfe; }
 
-.summary-label { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; }
-.summary-value { font-size: var(--text-3xl); line-height: 1; color: var(--text-primary); }
-.summary-meta { color: var(--text-muted); font-size: var(--text-xs); }
+.orders-toolbar { margin-bottom: var(--space-3); }
+.orders-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
+.orders-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
 
-.table-card { margin-top: var(--space-4); overflow: visible; }
-
-.events-toolbar { margin-bottom: var(--space-3); }
-.events-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
-.events-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
-
-.event-list { display: grid; gap: var(--space-3); }
-
-.event-card {
-  display: grid;
-  gap: 14px;
-  padding: 14px;
-  border-radius: var(--radius-lg);
-  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
+.orders-table {
+  width: 100%;
+  overflow: hidden;
   border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  --el-table-bg-color: transparent;
+  --el-table-tr-bg-color: transparent;
+  --el-table-header-bg-color: rgba(239, 246, 255, 0.72);
+  --el-table-row-hover-bg-color: rgba(239, 246, 255, 0.72);
+  --el-table-border-color: rgba(86, 108, 138, 0.1);
+}
+.orders-table :deep(.el-table__inner-wrapper::before) { display: none; }
+.orders-table :deep(th.el-table__cell) {
+  height: 42px;
+  background: var(--el-table-header-bg-color);
+  color: var(--text-secondary);
+  font-weight: 700;
 }
 
-.event-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
-.event-identity { min-width: 0; display: grid; gap: var(--space-2); }
+.cell-stack { display: grid; gap: 5px; }
 
-.event-no {
+.order-no {
   display: inline-block;
   max-width: 100%;
-  font-size: var(--text-xl);
-  line-height: 1.1;
+  font-size: var(--text-base);
   font-weight: 800;
   color: var(--text-primary);
   overflow: hidden;
@@ -377,17 +329,16 @@ onMounted(loadEvents)
   white-space: nowrap;
   text-decoration: none;
 }
-.event-no:hover { color: var(--color-primary-dark); }
+.order-no:hover { color: var(--color-primary-dark); }
 
-.event-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
-.event-top-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
+.cell-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
 
 .compact-chip {
   display: inline-flex;
   align-items: center;
-  min-height: 28px;
-  max-width: 100%;
-  padding: 0 10px;
+  min-height: 24px;
+  max-width: 240px;
+  padding: 0 9px;
   border-radius: var(--radius-full);
   background: #f4f7fb;
   border: 1px solid var(--border-default);
@@ -397,69 +348,45 @@ onMounted(loadEvents)
 }
 .compact-chip--muted { color: var(--text-muted); }
 
-.event-grid {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 10px;
-  min-width: 0;
-}
+.cell-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
+.cell-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
 
-.event-section {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-  padding: 10px 11px;
-  border-radius: var(--radius-md);
-  background: rgba(255, 255, 255, 0.78);
-  border: 1px solid var(--border-default);
-}
+.status-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
+.status-stack :deep(.el-tag) { max-width: 100%; }
 
-.section-label { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
+.error-inline { display: block; color: var(--color-danger); font-size: var(--text-xs); }
 
-.cell-stack { display: grid; gap: 6px; min-width: 0; }
-.cell-title { color: var(--text-primary); font-weight: 700; line-height: 1.4; word-break: break-word; }
-.cell-subtle { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.5; word-break: break-word; }
+.inline-link { color: var(--color-primary-dark); font-size: var(--text-xs); font-weight: 700; text-decoration: none; }
+.inline-link:hover { text-decoration: underline; }
 
-.meta-chip-row, .tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
-.meta-chip {
+.action-stack { display: flex; flex-direction: column; align-items: center; gap: 6px; }
+
+.detail-link {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  min-height: 24px;
-  padding: 0 8px;
+  min-height: 28px;
+  padding: 0 10px;
   border-radius: var(--radius-full);
-  color: #475467;
-  background: #f8fafc;
-  border: 1px solid rgba(148, 163, 184, 0.24);
+  border: 1px solid var(--border-default);
+  color: var(--color-primary-dark);
+  background: var(--color-primary-light);
   font-size: var(--text-xs);
+  font-weight: 700;
+  text-decoration: none;
 }
-
-.inline-link { color: var(--color-primary-dark); font-weight: 700; text-decoration: none; }
-
-.mono-inline { color: #344054; font-size: var(--text-xs); line-height: 1.6; font-family: var(--font-mono); overflow-wrap: anywhere; }
-.event-key { color: var(--text-muted); font-size: 10px; line-height: 1.4; }
-
-.error-inline { display: block; color: var(--color-danger); font-size: var(--text-xs); line-height: 1.5; }
-
-.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.detail-link:hover { border-color: var(--border-hover); background: #dbeafe; }
 
 @media (max-width: 1200px) {
   .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-  .event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 }
 @media (max-width: 900px) {
   .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .filter-actions { flex-direction: column; align-items: flex-start; }
+  .filter-buttons { justify-content: flex-start; }
 }
 @media (max-width: 640px) {
-  .filter-grid,
-  .summary-grid,
-  .event-grid { grid-template-columns: 1fr; }
+  .filter-grid { grid-template-columns: 1fr; }
   .filter-buttons { width: 100%; }
   .filter-buttons :deep(.el-button) { flex: 1 1 auto; }
-  .event-card-top { flex-direction: column; align-items: flex-start; }
-  .event-no { font-size: 18px; }
+  .order-no { font-size: var(--text-base); }
 }
 </style>