polish(admin): 各页空态与文案轻量打磨
- 会话列表/推送日志表空态给动作指引(empty-text,不再落 Element 默认「暂无数据」) - 统计六图空态文案经 useChart 新增 emptyText 参数下发「暂无数据——产生会话后展示分析」 (textContent 替代 innerHTML,缺省值不变,其余消费方零影响) - 平台设置存储总览空表指引「暂无设置项——从上方推荐键开始」 - 租户详情站点表空态指引「暂无站点——点右上角「新建站点」创建」 - CredsPane 邮件测试 hint 的字面 **已保存** 星号改 <b>(模板不吃 markdown) - 品牌预览卡右侧副标去掉与新增副标题重复的「本地简化」字样 - 仪表盘/租户列表/会话页既有 ElEmpty 已是动作指引文案,核对后无需改动 Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
@@ -447,9 +447,9 @@ export function useChart(options: UseChartOptions = {}) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 空状态管理器
|
// 空状态管理器(emptyText 可自定义空态文案,缺省「暂无数据」)
|
||||||
const emptyStateManager = {
|
const emptyStateManager = {
|
||||||
create: () => {
|
create: (emptyText?: string) => {
|
||||||
if (!chartRef.value || emptyStateDiv) return
|
if (!chartRef.value || emptyStateDiv) return
|
||||||
|
|
||||||
emptyStateDiv = document.createElement('div')
|
emptyStateDiv = document.createElement('div')
|
||||||
@@ -468,7 +468,9 @@ export function useChart(options: UseChartOptions = {}) {
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
`
|
`
|
||||||
emptyStateDiv.innerHTML = `<span>暂无数据</span>`
|
const emptyLabel = document.createElement('span')
|
||||||
|
emptyLabel.textContent = emptyText ?? '暂无数据'
|
||||||
|
emptyStateDiv.appendChild(emptyLabel)
|
||||||
|
|
||||||
// 确保父容器有相对定位
|
// 确保父容器有相对定位
|
||||||
if (
|
if (
|
||||||
@@ -495,8 +497,8 @@ export function useChart(options: UseChartOptions = {}) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化图表
|
// 初始化图表(emptyText = 空态文案,缺省「暂无数据」)
|
||||||
const initChart = (options: EChartsOption = {}, isEmpty: boolean = false) => {
|
const initChart = (options: EChartsOption = {}, isEmpty: boolean = false, emptyText?: string) => {
|
||||||
if (!chartRef.value || isDestroyed) return
|
if (!chartRef.value || isDestroyed) return
|
||||||
|
|
||||||
const mergedOptions = { ...initOptions, ...options }
|
const mergedOptions = { ...initOptions, ...options }
|
||||||
@@ -507,7 +509,7 @@ export function useChart(options: UseChartOptions = {}) {
|
|||||||
if (chart) {
|
if (chart) {
|
||||||
chart.clear()
|
chart.clear()
|
||||||
}
|
}
|
||||||
emptyStateManager.create()
|
emptyStateManager.create(emptyText)
|
||||||
return
|
return
|
||||||
} else {
|
} else {
|
||||||
// 有数据时移除空状态div
|
// 有数据时移除空状态div
|
||||||
|
|||||||
@@ -101,7 +101,7 @@
|
|||||||
</ElButton>
|
</ElButton>
|
||||||
</div>
|
</div>
|
||||||
<p class="test-hint">
|
<p class="test-hint">
|
||||||
系统用**已保存**的邮件配置真发一封(主题「[all-kefu] SMTP 测试邮件」)
|
系统用<b>已保存</b>的邮件配置真发一封(主题「[all-kefu] SMTP 测试邮件」)
|
||||||
——改完先保存再测试;SMTP 未配置时返回 400。
|
——改完先保存再测试;SMTP 未配置时返回 400。
|
||||||
</p>
|
</p>
|
||||||
<ElAlert
|
<ElAlert
|
||||||
|
|||||||
@@ -285,7 +285,7 @@
|
|||||||
<span class="card-title">挂件预览</span>
|
<span class="card-title">挂件预览</span>
|
||||||
<p class="card-subtitle">本地简化预览(真机效果以嵌入站点为准)</p>
|
<p class="card-subtitle">本地简化预览(真机效果以嵌入站点为准)</p>
|
||||||
</div>
|
</div>
|
||||||
<span class="card-sub">本地简化模拟,随表单即时变化</span>
|
<span class="card-sub">随表单即时变化</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -102,7 +102,13 @@
|
|||||||
<ElAlert v-if="listError" type="error" :closable="false" :title="listError" class="load-error">
|
<ElAlert v-if="listError" type="error" :closable="false" :title="listError" class="load-error">
|
||||||
<ElButton size="small" :loading="listLoading" @click="reloadList">重试</ElButton>
|
<ElButton size="small" :loading="listLoading" @click="reloadList">重试</ElButton>
|
||||||
</ElAlert>
|
</ElAlert>
|
||||||
<ElTable v-else v-loading="listLoading" :data="listRows" row-key="id">
|
<ElTable
|
||||||
|
v-else
|
||||||
|
v-loading="listLoading"
|
||||||
|
:data="listRows"
|
||||||
|
row-key="id"
|
||||||
|
empty-text="暂无会话——客户开始聊天后会出现在这里"
|
||||||
|
>
|
||||||
<ElTableColumn label="时间" width="150">
|
<ElTableColumn label="时间" width="150">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<span>{{ formatDateTime(row.created_at) }}</span>
|
<span>{{ formatDateTime(row.created_at) }}</span>
|
||||||
@@ -203,7 +209,13 @@
|
|||||||
<ElAlert v-if="logsError" type="error" :closable="false" :title="logsError" class="load-error">
|
<ElAlert v-if="logsError" type="error" :closable="false" :title="logsError" class="load-error">
|
||||||
<ElButton size="small" :loading="logsLoading" @click="reloadLogs">重试</ElButton>
|
<ElButton size="small" :loading="logsLoading" @click="reloadLogs">重试</ElButton>
|
||||||
</ElAlert>
|
</ElAlert>
|
||||||
<ElTable v-else v-loading="logsLoading" :data="logRows" row-key="id">
|
<ElTable
|
||||||
|
v-else
|
||||||
|
v-loading="logsLoading"
|
||||||
|
:data="logRows"
|
||||||
|
row-key="id"
|
||||||
|
empty-text="暂无推送记录——产生线索推送后会出现在这里"
|
||||||
|
>
|
||||||
<ElTableColumn label="时间" width="150">
|
<ElTableColumn label="时间" width="150">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<span>{{ formatDateTime(row.created_at) }}</span>
|
<span>{{ formatDateTime(row.created_at) }}</span>
|
||||||
|
|||||||
@@ -122,7 +122,7 @@
|
|||||||
<p class="table-hint">
|
<p class="table-hint">
|
||||||
密钥键值一律脱敏展示;推荐键之外的键(历史脚本 / API 写入)暂不提供界面编辑。
|
密钥键值一律脱敏展示;推荐键之外的键(历史脚本 / API 写入)暂不提供界面编辑。
|
||||||
</p>
|
</p>
|
||||||
<ElTable :data="items" size="small" border>
|
<ElTable :data="items" size="small" border empty-text="暂无设置项——从上方推荐键开始">
|
||||||
<ElTableColumn prop="key" label="键" min-width="180" />
|
<ElTableColumn prop="key" label="键" min-width="180" />
|
||||||
<ElTableColumn label="值" min-width="260">
|
<ElTableColumn label="值" min-width="260">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
|
|||||||
@@ -280,6 +280,9 @@
|
|||||||
const { chartRef: countryRef } = countryChart
|
const { chartRef: countryRef } = countryChart
|
||||||
const { isDark } = trendChart
|
const { isDark } = trendChart
|
||||||
|
|
||||||
|
/** 图表空态文案(spec §7:空态给动作指引,不写「暂无数据」了事) */
|
||||||
|
const CHART_EMPTY_TEXT = '暂无数据——产生会话后展示分析'
|
||||||
|
|
||||||
/** 重绘单图:有数据先 clear 再 setOption(类目数变化不残留旧轴),空数据走空态 */
|
/** 重绘单图:有数据先 clear 再 setOption(类目数变化不残留旧轴),空数据走空态 */
|
||||||
function render(
|
function render(
|
||||||
chart: ReturnType<typeof useChart>,
|
chart: ReturnType<typeof useChart>,
|
||||||
@@ -287,7 +290,7 @@
|
|||||||
empty: boolean
|
empty: boolean
|
||||||
): void {
|
): void {
|
||||||
if (!empty) chart.getChartInstance()?.clear()
|
if (!empty) chart.getChartInstance()?.clear()
|
||||||
chart.initChart(option, empty)
|
chart.initChart(option, empty, CHART_EMPTY_TEXT)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 名义类目条目截断上限(Top10;超出在卡片 sub 标注总数) */
|
/** 名义类目条目截断上限(Top10;超出在卡片 sub 标注总数) */
|
||||||
|
|||||||
@@ -163,7 +163,12 @@
|
|||||||
<!-- 站点列表 -->
|
<!-- 站点列表 -->
|
||||||
<section class="detail-section">
|
<section class="detail-section">
|
||||||
<h4 class="section-title">站点({{ detail.sites.length }})</h4>
|
<h4 class="section-title">站点({{ detail.sites.length }})</h4>
|
||||||
<ElTable :data="detail.sites" row-key="slug" size="small">
|
<ElTable
|
||||||
|
:data="detail.sites"
|
||||||
|
row-key="slug"
|
||||||
|
size="small"
|
||||||
|
empty-text="暂无站点——点右上角「新建站点」创建"
|
||||||
|
>
|
||||||
<ElTableColumn label="站点" width="110" show-overflow-tooltip>
|
<ElTableColumn label="站点" width="110" show-overflow-tooltip>
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<span class="mono">{{ row.slug }}</span>
|
<span class="mono">{{ row.slug }}</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user