优化前端ui
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
|
||||
<!-- 加载态 -->
|
||||
|
||||
+1
-1
@@ -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>
|
||||
|
||||
+4
-4
@@ -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>
|
||||
|
||||
+3
-3
@@ -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">
|
||||
|
||||
+8
-8
@@ -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>
|
||||
|
||||
+3
-3
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user