优化订单列表ui-2

This commit is contained in:
yml2213
2026-05-14 21:34:14 +08:00
parent a554fee36e
commit 3b75eac87f
2 changed files with 17 additions and 19 deletions
-3
View File
@@ -21,7 +21,6 @@ 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']
@@ -44,7 +43,6 @@ 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']
@@ -52,7 +50,6 @@ 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']
@@ -114,8 +114,7 @@ onMounted(loadOrders)
</template>
</AdminPageHeader>
<!-- 筛选 -->
<el-card shadow="never" class="filter-card">
<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>
@@ -136,7 +135,7 @@ onMounted(loadOrders)
<el-button round type="primary" @click="loadOrders(1)">查询</el-button>
</div>
</div>
</el-card>
</section>
<!-- 摘要 -->
<div v-if="!loading && items.length > 0" class="summary-strip">
@@ -149,8 +148,7 @@ onMounted(loadOrders)
<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="订单列表加载中">
<section class="orders-section" v-loading="loading" element-loading-text="订单列表加载中">
<template v-if="items.length === 0 && !loading">
<el-empty description="当前筛选条件下暂无订单" :image-size="60" />
</template>
@@ -244,7 +242,7 @@ onMounted(loadOrders)
@current-change="loadOrders"
/>
</template>
</el-card>
</section>
</div>
</template>
@@ -264,7 +262,10 @@ onMounted(loadOrders)
align-items: center;
}
.filter-card { margin-top: var(--space-4); }
.filter-panel {
margin-top: var(--space-4);
padding: 0;
}
.filter-grid {
display: grid;
@@ -280,13 +281,9 @@ onMounted(loadOrders)
display: flex;
align-items: center;
gap: var(--space-2);
min-height: 46px;
padding: 8px 12px;
min-height: 38px;
padding: 0;
margin-top: var(--space-4);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.74);
box-shadow: var(--shadow-sm);
flex-wrap: wrap;
}
@@ -318,7 +315,10 @@ onMounted(loadOrders)
.summary-metric[data-tone='warning'] { color: var(--color-warning-dark); background: var(--color-warning-light); border-color: #fed7aa; }
.summary-metric[data-tone='muted'] { color: var(--text-secondary); background: #f8fafc; border-color: var(--border-default); }
.table-card { margin-top: var(--space-4); overflow: visible; }
.orders-section {
margin-top: var(--space-4);
overflow: visible;
}
.orders-toolbar { margin-bottom: var(--space-3); }
.orders-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
@@ -331,14 +331,15 @@ onMounted(loadOrders)
gap: 12px;
padding: 12px 14px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.84);
background: rgba(247, 250, 255, 0.42);
border: 1px solid var(--border-default);
transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.order-card:hover {
border-color: var(--border-hover);
box-shadow: var(--shadow-sm);
background: rgba(247, 250, 255, 0.68);
box-shadow: 0 1px 4px rgba(30, 49, 78, 0.04);
}
.order-card-top {