style(page-title): 补漏——战略地图看板页标题弱化 + KPIListView 标题 emoji 清零
ci/woodpecker/push/main Pipeline was successful
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:
@@ -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; }
|
||||
|
||||
@@ -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; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user