style(page-title): 补漏——战略地图看板页标题弱化 + KPIListView 标题 emoji 清零
ci/woodpecker/push/main Pipeline was successful

- StrategyMap.vue: 页内 h2 19px/600/深色(与路由标题「战略地图看板」基本同名)降为
  div.page-subtitle 14px/500/#64748B(保留地图名+版本+状态等增量信息,不再充当 H1)
- KPIListView.vue: 组件 h3 图标默认值 '📊' 置空(v-if 渲染),分类标题与明细卡头
  '📋' 改为 Lucide 内联 SVG(clipboard-list,18/16px,#64748B)
- 仅模板与样式:不动 MainLayout、不改接口/数据/路由 key、不碰 MapCanvas.vue
This commit is contained in:
wecom-fullstack
2026-10-19 04:34:35 +08:00
parent bf641d8d31
commit 0fc2c6109e
2 changed files with 10 additions and 8 deletions
+6 -4
View File
@@ -3,7 +3,7 @@
<!-- 页头 -->
<div class="page-header" :class="{ 'no-title': hideTitle }">
<h3 v-if="!hideTitle">
<span class="dim-icon">{{ icon }}</span>
<span class="dim-icon" v-if="icon">{{ icon }}</span>
{{ title }}
</h3>
<div class="header-actions">
@@ -88,7 +88,7 @@
<template v-if="hasCategories">
<div v-for="cat in categories" :key="cat.key" class="capital-section">
<div class="capital-title" :style="{ color: cat.color || '#409EFF' }">
{{ cat.icon || '📋' }} {{ cat.label }}
<svg v-if="!cat.icon" class="ttl-svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M9 12h6"/><path d="M9 16h6"/></svg><span v-else>{{ cat.icon }}</span> {{ cat.label }}
<span class="capital-subtitle" v-if="cat.subtitle">{{ cat.subtitle }}</span>
</div>
<div class="kpi-card-grid">
@@ -157,7 +157,7 @@
<el-card shadow="never" class="section-card">
<template #header>
<div class="card-header-flex">
<span>📋 {{ title }}明细</span>
<span class="card-ttl"><svg class="ttl-svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>{{ title }}明细</span>
<el-button size="small" @click="exportCSV">导出CSV</el-button>
</div>
</template>
@@ -306,7 +306,7 @@ const props = withDefaults(defineProps<{
formTitleEdit?: string
readOnly?: boolean
}>(), {
icon: '📊',
icon: '',
statLabels: () => ({ total: '指标总数', green: '达标', yellow: '预警', red: '未达标', noData: '无数据' }),
templates: () => [],
categories: () => [],
@@ -490,6 +490,8 @@ onMounted(() => loadData())
}
.page-header h3 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 6px; }
.dim-icon { font-size: 20px; }
.ttl-svg { flex: none; display: inline-block; vertical-align: -3px; }
.card-ttl { display: inline-flex; align-items: center; gap: 6px; }
.page-header.no-title { justify-content: flex-end; }
.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.loading-state { padding: 40px; }
+4 -4
View File
@@ -2,12 +2,12 @@
<div class="strategy-map-page" ref="pageRef">
<!-- ── 页头:地图标题 + 版本 + 数据截止期 + 期间切换(只读页,无任何写入口)── -->
<div class="page-header">
<h2 class="page-title">
<div class="page-subtitle">
<el-icon class="title-icon"><DataBoard /></el-icon>
<span>{{ board?.map?.title || '战略地图' }}</span>
<el-tag v-if="board?.map?.version" size="small" effect="plain">{{ board.map.version }}</el-tag>
<el-tag v-if="board?.map?.status" size="small" type="info" effect="plain">{{ board.map.status }}</el-tag>
</h2>
</div>
<div class="header-right">
<span class="asof">
<el-icon><Clock /></el-icon>
@@ -356,8 +356,8 @@ function doPrint() {
.strategy-map-page { padding: 16px; background: #f5f7fa; min-height: 100%; }
.page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.page-title { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 600; color: #1f2d3d; margin: 0; }
.title-icon { color: #409eff; }
.page-subtitle { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #64748B; margin: 0; }
.title-icon { color: #64748B; font-size: 16px; }
.header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.asof { font-size: 13px; color: #606266; display: inline-flex; align-items: center; gap: 4px; }