优化订单列表ui-3

apps/frontend/src/App.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+import { ElConfigProvider } from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+</script>
+
 <template>
-  <RouterView />
+  <ElConfigProvider :locale="zhCn">
+    <RouterView />
+  </ElConfigProvider>
 </template>

apps/frontend/src/components.d.ts

@@ -21,6 +21,7 @@ declare module 'vue' {
     AdminStatusTag: typeof import('./components/admin/AdminStatusTag.vue')['default']
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -43,6 +44,7 @@ declare module 'vue' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
@@ -50,6 +52,7 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElStatistic: typeof import('element-plus/es')['ElStatistic']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']

apps/frontend/src/styles/element-overrides.css

@@ -60,19 +60,31 @@
 
 /* ---- Inputs & Selects ---- */
 .el-input .el-input__wrapper,
-.el-select .el-select__wrapper {
+.el-select .el-select__wrapper,
+.el-date-editor.el-input__wrapper {
   border-radius: var(--radius-md);
   box-shadow: none;
   border: 1px solid var(--border-default);
 }
 
+.el-date-editor.el-input__wrapper {
+  border: 0;
+  box-shadow: 0 0 0 1px var(--border-default) inset;
+}
+
 .el-input .el-input__wrapper:hover,
-.el-select .el-select__wrapper:hover {
+.el-select .el-select__wrapper:hover,
+.el-date-editor.el-input__wrapper:hover {
   border-color: var(--border-hover);
 }
 
+.el-date-editor.el-input__wrapper:hover {
+  box-shadow: 0 0 0 1px var(--border-hover) inset;
+}
+
 .el-input.is-focus .el-input__wrapper,
-.el-select.is-focus .el-select__wrapper {
+.el-select.is-focus .el-select__wrapper,
+.el-date-editor.el-input__wrapper.is-active {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 1px var(--color-primary) inset;
 }

apps/frontend/src/views/admin/AdminOrdersView.vue

@@ -116,14 +116,26 @@ onMounted(loadOrders)
 
     <section class="filter-panel">
       <div class="filter-grid">
-        <el-input v-model="platformOrderId" placeholder="平台订单号（模糊匹配）" clearable @keyup.enter="loadOrders(1)" />
-        <el-select v-model="payStatus" placeholder="支付状态" clearable>
+        <el-input
+          v-model="platformOrderId"
+          class="filter-control filter-control--order"
+          placeholder="平台订单号（模糊匹配）"
+          clearable
+          @keyup.enter="loadOrders(1)"
+        />
+        <el-select v-model="payStatus" class="filter-control filter-control--status" placeholder="支付状态" clearable>
           <el-option v-for="opt in adminPayStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
         </el-select>
-        <el-input v-model="skuCode" placeholder="SKU，如 dnf-cdk-a" clearable @keyup.enter="loadOrders(1)" />
+        <el-input
+          v-model="skuCode"
+          class="filter-control filter-control--sku"
+          placeholder="SKU，如 dnf-cdk-a"
+          clearable
+          @keyup.enter="loadOrders(1)"
+        />
         <el-date-picker
           v-model="dateRange"
-          class="date-range-filter"
+          class="filter-control date-range-filter"
           type="daterange"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
@@ -269,13 +281,22 @@ onMounted(loadOrders)
 
 .filter-grid {
   display: grid;
-  grid-template-columns: minmax(220px, 1.1fr) minmax(170px, 0.8fr) minmax(220px, 1fr) minmax(280px, 1.2fr) auto;
+  grid-template-columns: minmax(220px, 1.25fr) minmax(136px, 0.6fr) minmax(220px, 1fr) minmax(390px, 1.55fr) auto;
   gap: var(--space-3);
   align-items: center;
 }
 
-.date-range-filter { width: 100%; }
-.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
+.filter-control { width: 100%; min-width: 0; }
+.date-range-filter {
+  width: 100%;
+  min-width: 0;
+}
+.filter-buttons {
+  display: flex;
+  gap: 10px;
+  min-width: 156px;
+  justify-content: flex-end;
+}
 
 .summary-strip {
   display: flex;
@@ -462,8 +483,9 @@ onMounted(loadOrders)
 .follow-up-chip[data-tone='danger'] { color: var(--color-danger-dark); background: var(--color-danger-light); border-color: #fecaca; }
 
 @media (max-width: 1200px) {
-  .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-  .date-range-filter { grid-column: span 2; }
+  .filter-grid {
+    grid-template-columns: minmax(200px, 1fr) minmax(132px, 0.56fr) minmax(200px, 0.9fr) minmax(340px, 1.25fr) auto;
+  }
   .filter-buttons { justify-content: flex-end; }
   .order-row-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 }