优化前端ui
This commit is contained in:
@@ -4,8 +4,7 @@
|
|||||||
各页面自行覆盖颜色、圆角、主题属性
|
各页面自行覆盖颜色、圆角、主题属性
|
||||||
============================================================ */
|
============================================================ */
|
||||||
|
|
||||||
/* ---------- 面板头部 & 分区标题 ---------- */
|
/* ---------- 分区标题 ---------- */
|
||||||
.panel-header,
|
|
||||||
.section-title-row {
|
.section-title-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -13,30 +12,15 @@
|
|||||||
align-items: flex-start;
|
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 {
|
.section-title-row h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-header p,
|
|
||||||
.panel-header-copy p,
|
|
||||||
.section-title-row p {
|
.section-title-row p {
|
||||||
margin: 6px 0 0;
|
margin: 6px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------- 头部工具 ---------- */
|
/* ---------- 头部工具 ---------- */
|
||||||
.header-tags,
|
|
||||||
.header-actions,
|
|
||||||
.section-header-tools,
|
.section-header-tools,
|
||||||
.section-mini-stats,
|
.section-mini-stats,
|
||||||
.section-action-group {
|
.section-action-group {
|
||||||
@@ -46,7 +30,6 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-actions,
|
|
||||||
.section-header-tools {
|
.section-header-tools {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
@@ -245,16 +228,6 @@
|
|||||||
color: #027a48;
|
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 {
|
.binding-collapsed-preview {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
@@ -268,15 +241,9 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------- 复选框 ---------- */
|
|
||||||
.checkbox-line {
|
|
||||||
display: inline-flex;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------- 工具栏提示 ---------- */
|
/* ---------- 工具栏提示 ---------- */
|
||||||
.toolbar-hint {
|
.toolbar-hint {
|
||||||
margin: 10px 0 0;
|
margin: 10px 0 0;
|
||||||
font-size: var(--text-xs);
|
font-size: var(--text-xs);
|
||||||
}
|
}
|
||||||
|
.mt-4 { margin-top: 16px; }
|
||||||
|
|||||||
@@ -306,3 +306,4 @@
|
|||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.mt-4 { margin-top: 16px; }
|
||||||
|
|||||||
@@ -115,3 +115,5 @@
|
|||||||
.el-empty__description {
|
.el-empty__description {
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mt-4 { margin-top: 16px; }
|
||||||
|
|||||||
@@ -137,11 +137,11 @@ onMounted(loadAuditLogs)
|
|||||||
type="error"
|
type="error"
|
||||||
show-icon
|
show-icon
|
||||||
:closable="false"
|
:closable="false"
|
||||||
style="margin-top: 16px"
|
class="mt-4"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 表格 -->
|
<!-- 表格 -->
|
||||||
<el-card shadow="never" class="table-card" style="margin-top: 16px">
|
<el-card shadow="never" class="table-card mt-4">
|
||||||
<el-table
|
<el-table
|
||||||
:data="items"
|
:data="items"
|
||||||
stripe
|
stripe
|
||||||
|
|||||||
@@ -40,10 +40,10 @@ const cards = [
|
|||||||
type="error"
|
type="error"
|
||||||
show-icon
|
show-icon
|
||||||
:closable="false"
|
:closable="false"
|
||||||
style="margin-top: 16px"
|
class="mt-4"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<el-skeleton v-if="loading" :rows="12" animated style="margin-top: 16px" />
|
<el-skeleton v-if="loading" :rows="12" animated class="mt-4" />
|
||||||
|
|
||||||
<div v-else class="summary-grid">
|
<div v-else class="summary-grid">
|
||||||
<el-card v-for="card in cards" :key="card.key" shadow="never" class="stat-card">
|
<el-card v-for="card in cards" :key="card.key" shadow="never" class="stat-card">
|
||||||
|
|||||||
@@ -124,6 +124,7 @@
|
|||||||
.admin-panel :deep(.el-textarea__inner),
|
.admin-panel :deep(.el-textarea__inner),
|
||||||
.admin-panel :deep(.el-select__wrapper) {
|
.admin-panel :deep(.el-select__wrapper) {
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
|
border: 0;
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
background: rgba(255, 255, 255, 0.96);
|
background: rgba(255, 255, 255, 0.96);
|
||||||
box-shadow: 0 0 0 1px rgba(86, 108, 138, 0.18) inset;
|
box-shadow: 0 0 0 1px rgba(86, 108, 138, 0.18) inset;
|
||||||
@@ -244,7 +245,6 @@
|
|||||||
响应式
|
响应式
|
||||||
============================================== */
|
============================================== */
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.panel-header,
|
|
||||||
.section-title-row,
|
.section-title-row,
|
||||||
.section-header-tools,
|
.section-header-tools,
|
||||||
.binding-actions,
|
.binding-actions,
|
||||||
|
|||||||
@@ -282,6 +282,7 @@
|
|||||||
.admin-panel :deep(.el-textarea__inner),
|
.admin-panel :deep(.el-textarea__inner),
|
||||||
.admin-panel :deep(.el-select__wrapper) {
|
.admin-panel :deep(.el-select__wrapper) {
|
||||||
min-height: 36px;
|
min-height: 36px;
|
||||||
|
border: 0;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
box-shadow: 0 0 0 1px var(--panel-line) inset;
|
box-shadow: 0 0 0 1px var(--panel-line) inset;
|
||||||
|
|||||||
@@ -575,7 +575,7 @@ onMounted(async () => {
|
|||||||
type="error"
|
type="error"
|
||||||
show-icon
|
show-icon
|
||||||
:closable="false"
|
:closable="false"
|
||||||
style="margin-top: 16px"
|
class="mt-4"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<el-card
|
<el-card
|
||||||
@@ -778,7 +778,7 @@ onMounted(async () => {
|
|||||||
:page-size="pagination.pageSize"
|
:page-size="pagination.pageSize"
|
||||||
:total="pagination.total"
|
:total="pagination.total"
|
||||||
layout="total, prev, pager, next"
|
layout="total, prev, pager, next"
|
||||||
style="margin-top: 16px; justify-content: center"
|
class="mt-4" style="justify-content: center"
|
||||||
@current-change="loadInventoryItems"
|
@current-change="loadInventoryItems"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -178,7 +178,7 @@ onMounted(loadMessageDeliveries)
|
|||||||
type="error"
|
type="error"
|
||||||
show-icon
|
show-icon
|
||||||
:closable="false"
|
:closable="false"
|
||||||
style="margin-top: 16px"
|
class="mt-4"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 列表 -->
|
<!-- 列表 -->
|
||||||
@@ -274,7 +274,7 @@ onMounted(loadMessageDeliveries)
|
|||||||
:page-size="pagination.pageSize"
|
:page-size="pagination.pageSize"
|
||||||
:total="pagination.total"
|
:total="pagination.total"
|
||||||
layout="total, prev, pager, next"
|
layout="total, prev, pager, next"
|
||||||
style="margin-top: 16px; justify-content: center"
|
class="mt-4" style="justify-content: center"
|
||||||
@current-change="loadMessageDeliveries"
|
@current-change="loadMessageDeliveries"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -224,7 +224,7 @@ onMounted(() => {
|
|||||||
type="error"
|
type="error"
|
||||||
show-icon
|
show-icon
|
||||||
:closable="false"
|
:closable="false"
|
||||||
style="margin-top: 16px"
|
class="mt-4"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<el-card
|
<el-card
|
||||||
@@ -338,7 +338,7 @@ onMounted(() => {
|
|||||||
:page-size="pagination.pageSize"
|
:page-size="pagination.pageSize"
|
||||||
:total="pagination.total"
|
:total="pagination.total"
|
||||||
layout="total, prev, pager, next"
|
layout="total, prev, pager, next"
|
||||||
style="margin-top: 16px; justify-content: center"
|
class="mt-4" style="justify-content: center"
|
||||||
@current-change="applyFilters"
|
@current-change="applyFilters"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
+3
-3
@@ -234,10 +234,10 @@ defineProps<Props>()
|
|||||||
type="error"
|
type="error"
|
||||||
show-icon
|
show-icon
|
||||||
:closable="false"
|
:closable="false"
|
||||||
style="margin-top: 16px"
|
class="mt-4"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="result-grid" style="margin-top: 16px">
|
<div class="result-grid mt-4">
|
||||||
<AdminResultCard label="短信发送" :value="cloudtentaclesSmsResult ? '成功' : '未执行'">
|
<AdminResultCard label="短信发送" :value="cloudtentaclesSmsResult ? '成功' : '未执行'">
|
||||||
<p v-if="cloudtentaclesSmsResult">
|
<p v-if="cloudtentaclesSmsResult">
|
||||||
{{ cloudtentaclesSmsResult.phoneMasked }},{{
|
{{ cloudtentaclesSmsResult.phoneMasked }},{{
|
||||||
@@ -333,7 +333,7 @@ defineProps<Props>()
|
|||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<pre v-if="cloudtentaclesDebugResult" class="debug-pre" style="margin-top: 16px">{{
|
<pre v-if="cloudtentaclesDebugResult" class="debug-pre mt-4">{{
|
||||||
cloudtentaclesDebugResult
|
cloudtentaclesDebugResult
|
||||||
}}</pre>
|
}}</pre>
|
||||||
<el-empty
|
<el-empty
|
||||||
|
|||||||
+2
-2
@@ -296,7 +296,7 @@ defineProps<Props>()
|
|||||||
type="error"
|
type="error"
|
||||||
show-icon
|
show-icon
|
||||||
:closable="false"
|
:closable="false"
|
||||||
style="margin-top: 16px"
|
class="mt-4"
|
||||||
/>
|
/>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
@@ -411,7 +411,7 @@ defineProps<Props>()
|
|||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="result-grid" style="margin-top: 16px">
|
<div class="result-grid mt-4">
|
||||||
<AdminResultCard
|
<AdminResultCard
|
||||||
label="详情查询"
|
label="详情查询"
|
||||||
:value="
|
:value="
|
||||||
|
|||||||
+2
-2
@@ -177,7 +177,7 @@ function bindDurationUnit(job: EditableScheduledJob, key: 'intervalSeconds' | 'c
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<el-table :data="notificationRecipients" stripe size="small" style="margin-top: 16px">
|
<el-table :data="notificationRecipients" stripe size="small" class="mt-4">
|
||||||
<el-table-column label="接收人" min-width="150">
|
<el-table-column label="接收人" min-width="150">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-input v-model="row.name" placeholder="例如:客服A" size="small" />
|
<el-input v-model="row.name" placeholder="例如:客服A" size="small" />
|
||||||
@@ -411,7 +411,7 @@ function bindDurationUnit(job: EditableScheduledJob, key: 'intervalSeconds' | 'c
|
|||||||
:data="notificationTestResult.results"
|
:data="notificationTestResult.results"
|
||||||
stripe
|
stripe
|
||||||
size="small"
|
size="small"
|
||||||
style="margin-top: 16px"
|
class="mt-4"
|
||||||
>
|
>
|
||||||
<el-table-column label="接收人">
|
<el-table-column label="接收人">
|
||||||
<template #default="{ row }">{{
|
<template #default="{ row }">{{
|
||||||
|
|||||||
@@ -226,7 +226,7 @@ function resetFilters() {
|
|||||||
type="error"
|
type="error"
|
||||||
show-icon
|
show-icon
|
||||||
:closable="false"
|
:closable="false"
|
||||||
style="margin-top: 16px"
|
class="mt-4"
|
||||||
/>
|
/>
|
||||||
<el-alert
|
<el-alert
|
||||||
v-if="lastClaimUrl"
|
v-if="lastClaimUrl"
|
||||||
@@ -234,7 +234,7 @@ function resetFilters() {
|
|||||||
type="info"
|
type="info"
|
||||||
show-icon
|
show-icon
|
||||||
:closable="false"
|
:closable="false"
|
||||||
style="margin-top: 16px"
|
class="mt-4"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<el-card
|
<el-card
|
||||||
@@ -398,7 +398,7 @@ function resetFilters() {
|
|||||||
:page-size="pagination.pageSize"
|
:page-size="pagination.pageSize"
|
||||||
:total="pagination.total"
|
:total="pagination.total"
|
||||||
layout="total, prev, pager, next"
|
layout="total, prev, pager, next"
|
||||||
style="margin-top: 16px; justify-content: center"
|
class="mt-4" style="justify-content: center"
|
||||||
@current-change="loadTasks"
|
@current-change="loadTasks"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -286,7 +286,7 @@ onMounted(loadUsers)
|
|||||||
type="error"
|
type="error"
|
||||||
show-icon
|
show-icon
|
||||||
:closable="false"
|
:closable="false"
|
||||||
style="margin-top: 16px"
|
class="mt-4"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<el-card shadow="never" class="section-card">
|
<el-card shadow="never" class="section-card">
|
||||||
@@ -396,7 +396,7 @@ onMounted(loadUsers)
|
|||||||
:page-size="pagination.pageSize"
|
:page-size="pagination.pageSize"
|
||||||
:total="pagination.total"
|
:total="pagination.total"
|
||||||
layout="total, prev, pager, next"
|
layout="total, prev, pager, next"
|
||||||
style="margin-top: 16px; justify-content: center"
|
class="mt-4" style="justify-content: center"
|
||||||
@current-change="loadUsers"
|
@current-change="loadUsers"
|
||||||
/>
|
/>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|||||||
@@ -241,7 +241,7 @@ onMounted(() => {
|
|||||||
type="error"
|
type="error"
|
||||||
show-icon
|
show-icon
|
||||||
:closable="false"
|
:closable="false"
|
||||||
style="margin-top: 16px"
|
class="mt-4"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 列表 -->
|
<!-- 列表 -->
|
||||||
@@ -348,7 +348,7 @@ onMounted(() => {
|
|||||||
:page-size="pagination.pageSize"
|
:page-size="pagination.pageSize"
|
||||||
:total="pagination.total"
|
:total="pagination.total"
|
||||||
layout="total, prev, pager, next"
|
layout="total, prev, pager, next"
|
||||||
style="margin-top: 16px; justify-content: center"
|
class="mt-4" style="justify-content: center"
|
||||||
@current-change="applyFilters"
|
@current-change="applyFilters"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user