优化前端ui

This commit is contained in:
yml2213
2026-05-17 08:28:27 +08:00
parent 3ca71b782b
commit d8c411d67f
18 changed files with 54 additions and 49 deletions
@@ -146,25 +146,12 @@
font-size: var(--text-sm);
}
/* ---------- 数据表 ---------- */
/* ---------- 数据表 (用于 el-table,具体单元格样式见各页面 :deep() 规则) ---------- */
.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;
+14 -1
View File
@@ -116,4 +116,17 @@
color: var(--text-muted);
}
.mt-4 { margin-top: 16px; }
/* ---- 通用工具类 ---- */
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.w-full { width: 100%; }
.text-muted-xs { font-size: var(--text-xs); color: var(--text-muted); }
.fw-600 { font-weight: 600; }
.text-danger { color: var(--color-danger); }
.ml-2 { margin-left: var(--space-2); }
.pagination-center {
margin-top: var(--space-4);
display: flex;
justify-content: center;
}
.filter-col-160 { width: 160px; }
+1 -1
View File
@@ -3,7 +3,7 @@
background:
radial-gradient(circle at top left, rgba(44, 133, 247, 0.22), transparent 32%),
radial-gradient(circle at top right, rgba(114, 184, 255, 0.18), transparent 26%),
linear-gradient(180deg, #eef4ff 0%, #f7fbff 100%);
linear-gradient(180deg, var(--bg-page) 0%, #f7fbff 100%);
font-family: var(--font-sans);
line-height: 1.5;
font-weight: 400;
@@ -93,10 +93,10 @@ onMounted(loadAuditLogs)
v-model="actorUsername"
placeholder="操作账号"
clearable
style="width: 160px"
class="filter-col-160"
@keyup.enter="handlePageChange"
/>
<el-select v-model="action" placeholder="动作" clearable style="width: 160px">
<el-select v-model="action" placeholder="动作" clearable class="filter-col-160">
<el-option
v-for="opt in adminAuditActionOptions"
:key="opt.value"
@@ -104,7 +104,7 @@ onMounted(loadAuditLogs)
:value="opt.value"
/>
</el-select>
<el-select v-model="targetType" placeholder="目标类型" clearable style="width: 160px">
<el-select v-model="targetType" placeholder="目标类型" clearable class="filter-col-160">
<el-option
v-for="opt in adminAuditTargetTypeOptions"
:key="opt.value"
@@ -117,14 +117,14 @@ onMounted(loadAuditLogs)
type="date"
placeholder="开始日期"
value-format="YYYY-MM-DD"
style="width: 160px"
class="filter-col-160"
/>
<el-date-picker
v-model="dateTo"
type="date"
placeholder="结束日期"
value-format="YYYY-MM-DD"
style="width: 160px"
class="filter-col-160"
/>
<el-button type="primary" @click="handlePageChange">查询</el-button>
</div>
@@ -778,7 +778,7 @@ onMounted(async () => {
:page-size="pagination.pageSize"
:total="pagination.total"
layout="total, prev, pager, next"
class="mt-4" style="justify-content: center"
class="pagination-center"
@current-change="loadInventoryItems"
/>
</template>
@@ -274,7 +274,7 @@ onMounted(loadMessageDeliveries)
:page-size="pagination.pageSize"
:total="pagination.total"
layout="total, prev, pager, next"
class="mt-4" style="justify-content: center"
class="pagination-center"
@current-change="loadMessageDeliveries"
/>
</template>
@@ -313,6 +313,9 @@ function formatTaskAutoDeliveryReason(task: AdminOrderDetail['tasks'][number]) {
</details>
</section>
</template>
<el-empty v-else description="订单不存在或已被删除" />
</section>
</template>
@@ -338,7 +338,7 @@ onMounted(() => {
:page-size="pagination.pageSize"
:total="pagination.total"
layout="total, prev, pager, next"
class="mt-4" style="justify-content: center"
class="pagination-center"
@current-change="applyFilters"
/>
</template>
@@ -232,7 +232,7 @@ onMounted(loadConfigs)
type="error"
show-icon
:closable="false"
style="margin-bottom: 16px"
class="mb-4"
/>
<!-- 加载态 -->
@@ -168,7 +168,7 @@ defineProps<Props>()
<template #default="{ row }">
<div>
<div>{{ row.displayShopName || row.shopId }}</div>
<div style="font-size: var(--text-xs); color: var(--text-muted)">
<div class="text-muted-xs">
ID: {{ row.shopId }}
</div>
</div>
@@ -174,7 +174,7 @@ defineProps<Props>()
v-model="cloudtentaclesForm.vnId"
:min="0"
controls-position="right"
style="width: 100%"
class="w-full"
/>
</el-form-item>
</el-col>
@@ -186,7 +186,7 @@ defineProps<Props>()
v-model="cloudtentaclesForm.skuId"
:min="0"
controls-position="right"
style="width: 100%"
class="w-full"
/>
</el-form-item>
</el-col>
@@ -196,7 +196,7 @@ defineProps<Props>()
v-model="cloudtentaclesForm.skuCount"
:min="1"
controls-position="right"
style="width: 100%"
class="w-full"
/>
</el-form-item>
</el-col>
@@ -213,7 +213,7 @@ defineProps<Props>()
v-model="cloudtentaclesForm.deviceType"
:min="0"
controls-position="right"
style="width: 100%"
class="w-full"
/>
</el-form-item>
</el-col>
@@ -332,7 +332,7 @@ defineProps<Props>()
<el-select
v-model="kuaishouEticketForm.selectedShopId"
placeholder="请选择店铺"
style="width: 100%"
class="w-full"
>
<el-option
v-for="shop in kuaishouEticketShops"
@@ -357,7 +357,7 @@ defineProps<Props>()
v-model="kuaishouEticketForm.num"
:min="1"
controls-position="right"
style="width: 100%"
class="w-full"
/>
</el-form-item>
</el-col>
@@ -374,7 +374,7 @@ defineProps<Props>()
<template #header>
<div>
<span class="card-title">自动回填参数</span>
<span class="text-muted" style="margin-left: 8px">查询后生成</span>
<span class="text-muted ml-2">查询后生成</span>
</div>
</template>
<el-form label-width="auto" label-position="top">
@@ -82,7 +82,7 @@ defineProps<Props>()
type="error"
show-icon
:closable="false"
style="margin-bottom: 16px"
class="mb-4"
/>
<el-table
@@ -95,8 +95,8 @@ defineProps<Props>()
<el-table-column label="订单" min-width="180">
<template #default="{ row }">
<div>
<div style="font-weight: 600">{{ row.orderNo }}</div>
<div style="font-size: var(--text-xs); color: var(--text-muted)">
<div class="fw-600">{{ row.orderNo }}</div>
<div class="text-muted-xs">
{{ row.outTradeNo || '-' }}
</div>
</div>
@@ -105,11 +105,11 @@ defineProps<Props>()
<el-table-column label="商品" min-width="180">
<template #default="{ row }">
<div>
<div style="font-weight: 600">{{ row.productName || row.productNo || '-' }}</div>
<div style="font-size: var(--text-xs); color: var(--text-muted)">
<div class="fw-600">{{ row.productName || row.productNo || '-' }}</div>
<div class="text-muted-xs">
productNo: {{ row.productNo || '-' }}
</div>
<div style="font-size: var(--text-xs); color: var(--text-muted)">
<div class="text-muted-xs">
数量:{{ row.buyNum || 0 }}
</div>
</div>
@@ -119,12 +119,12 @@ defineProps<Props>()
<template #default="{ row }">
<div>
<el-tag size="small">{{ row.orderStatus }}</el-tag>
<div style="font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px">
<div class="text-muted-xs" style="margin-top: 4px">
任务 {{ row.taskCount }}
</div>
<div
v-if="row.failReason"
style="font-size: var(--text-xs); color: var(--color-danger)"
class="text-xs text-danger"
>
{{ row.failReason }}
</div>
@@ -162,7 +162,7 @@ function bindDurationUnit(job: EditableScheduledJob, key: 'intervalSeconds' | 'c
type="error"
show-icon
:closable="false"
style="margin-bottom: 16px"
class="mb-4"
/>
<el-form label-width="auto" label-position="top" inline>
@@ -172,7 +172,7 @@ function bindDurationUnit(job: EditableScheduledJob, key: 'intervalSeconds' | 'c
<el-form-item
><el-switch v-model="notificationForm.barkEnabled" active-text="启用 Bark 通道"
/></el-form-item>
<el-form-item label="Bark 服务地址" style="width: 100%">
<el-form-item label="Bark 服务地址" class="w-full">
<el-input v-model="notificationForm.barkServerUrl" placeholder="https://api.day.app" />
</el-form-item>
</el-form>
@@ -237,7 +237,7 @@ function bindDurationUnit(job: EditableScheduledJob, key: 'intervalSeconds' | 'c
<el-table-column label="任务" min-width="200">
<template #default="{ row: job }">
<div>
<div style="font-weight: 600">{{ formatJobType(job.type) }}</div>
<div class="fw-600">{{ formatJobType(job.type) }}</div>
<el-switch
v-model="job.enabled"
size="small"
@@ -998,6 +998,9 @@ onBeforeUnmount(clearScreenshotPreview)
/>
</section>
</template>
<el-empty v-else description="任务不存在或已被删除" />
</section>
</template>
@@ -398,7 +398,7 @@ function resetFilters() {
:page-size="pagination.pageSize"
:total="pagination.total"
layout="total, prev, pager, next"
class="mt-4" style="justify-content: center"
class="pagination-center"
@current-change="loadTasks"
/>
</template>
@@ -300,8 +300,7 @@ onMounted(loadUsers)
size="small"
v-loading="loading"
element-loading-text="用户列表加载中"
class="users-table data-table"
style="width: 100%"
class="users-table data-table w-full"
>
<el-table-column prop="userId" label="ID" width="52" align="center" />
<el-table-column prop="username" label="账号" width="112" show-overflow-tooltip />
@@ -396,7 +395,7 @@ onMounted(loadUsers)
:page-size="pagination.pageSize"
:total="pagination.total"
layout="total, prev, pager, next"
class="mt-4" style="justify-content: center"
class="pagination-center"
@current-change="loadUsers"
/>
</el-card>
@@ -348,7 +348,7 @@ onMounted(() => {
:page-size="pagination.pageSize"
:total="pagination.total"
layout="total, prev, pager, next"
class="mt-4" style="justify-content: center"
class="pagination-center"
@current-change="applyFilters"
/>
</template>