v1.5.0 — 蓝图 VI 统一

- 移除头部 mission 文字和六板块卡片
- Tab 改用 SVG 图标(bolt/放大镜/书本/列表)
- 板块用彩色圆点标识(六色 VI)
- 整体风格对齐天机阁设计系统
This commit is contained in:
mac
2026-06-04 16:43:08 +08:00
parent 5300ee426d
commit fc338f426a
3 changed files with 33 additions and 56 deletions

View File

@@ -1016,7 +1016,6 @@
apiGetStats(function(err, data) {
if (err || !data || !data.pillar_breakdown) return;
blueprintData = data.pillar_breakdown;
renderBlueprintPillars(blueprintData);
renderBlueprintList();
});
}
@@ -1058,11 +1057,17 @@
}
if (empty) empty.style.display = 'none';
var typeLabels = {morning: '立志', evening: '责善', study: '勤学'};
var pillarColors = {
'医疗服务': '#4A6CF7', '医药营销': '#D97706', '医疗支付': '#059669',
'AI 智能': '#7C3AED', '公司治理': '#DC2626', '个人修养': '#0891B2'
};
var html = '';
items.forEach(function(item){
var dot = '<span class="bp-pillar-dot" style="background:' + (pillarColors[item.pillar.name] || '#94A3B8') + '"></span>';
var noteHtml = item.type === 'study' && item.note ? '<span class="bp-item-note">' + esc(item.note) + '</span>' : '';
html += '<div class="bp-list-item">' +
'<span class="bp-item-pillar">' + item.pillar.emoji + ' ' + item.pillar.name + '</span>' +
dot +
'<span class="bp-item-pillar">' + item.pillar.name + '</span>' +
'<span class="bp-item-type ' + item.type + '">' + (typeLabels[item.type] || item.type) + '</span>' +
'<span class="bp-item-text">' + esc(item.text) + '</span>' +
noteHtml +

View File

@@ -1428,54 +1428,18 @@ body {
Blueprint Panel
═══════════════════════════════════════════ */
.blueprint-mission {
font-size: 15px;
font-weight: 600;
color: var(--primary);
margin-bottom: 24px;
padding: 12px 16px;
background: var(--primary-light);
border-radius: var(--radius);
text-align: center;
}
.blueprint-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.blueprint-pillar {
background: var(--card);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 20px 16px;
text-align: center;
transition: border-color 0.2s, box-shadow 0.2s;
}
.blueprint-pillar:hover {
border-color: var(--primary);
box-shadow: 0 4px 16px rgba(74,108,247,0.08);
}
.bp-icon { font-size: 32px; margin-bottom: 8px; }
.bp-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.bp-desc { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
.bp-count { font-size: 12px; font-weight: 600; color: var(--primary); display: flex; gap: 10px; justify-content: center; }
.bp-type { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.bp-type.morning { color: var(--warning); }
.bp-type.evening { color: var(--danger); }
.bp-type.study { color: var(--success); }
/* Tab 筛选 */
.bp-tabs {
display: flex;
gap: 4px;
margin-bottom: 16px;
margin-bottom: 20px;
border-bottom: 1.5px solid var(--border);
padding-bottom: 0;
}
.bp-tab {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 16px;
border: none;
background: none;
@@ -1488,8 +1452,10 @@ body {
transition: all 0.15s;
font-family: inherit;
}
.bp-tab .icon-sm { opacity: 0.6; }
.bp-tab:hover { color: var(--text); }
.bp-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.bp-tab.active .icon-sm { opacity: 1; }
/* 明细列表 */
.bp-list {
@@ -1507,11 +1473,16 @@ body {
transition: background 0.15s;
}
.bp-list-item:hover { background: var(--bg); }
.bp-pillar-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.bp-item-pillar {
font-size: 12px;
color: var(--text-dim);
white-space: nowrap;
min-width: 80px;
}
.bp-item-type {
font-size: 11px;
@@ -1543,8 +1514,6 @@ body {
padding: 32px 0;
}
/* 移除旧样式 */
@media (max-width: 900px) {
.blueprint-pillars { grid-template-columns: repeat(2, 1fr); }
.quad-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
}

View File

@@ -276,19 +276,22 @@
<!-- ── 蓝图面板 ── -->
<section class="panel" id="panel-blueprint">
<div class="panel-header">
<h2>蓝图 · 数字医疗集团</h2>
<h2>蓝图</h2>
</div>
<div class="blueprint-mission">
一辈子,干成一件事 — 用 AI 重构医疗全链路
</div>
<!-- 六板块卡片 -->
<div class="blueprint-pillars" id="blueprint-pillars"></div>
<!-- Tab 筛选 -->
<div class="bp-tabs">
<button class="bp-tab active" data-filter="all" onclick="filterBlueprint(this)">全部</button>
<button class="bp-tab" data-filter="morning" onclick="filterBlueprint(this)">🥼 立志</button>
<button class="bp-tab" data-filter="evening" onclick="filterBlueprint(this)">🔍 责善</button>
<button class="bp-tab" data-filter="study" onclick="filterBlueprint(this)">📚 勤学</button>
<button class="bp-tab active" data-filter="all" onclick="filterBlueprint(this)">
<svg class="icon-sm"><use href="#icon-list-bullet"/></svg> 全部
</button>
<button class="bp-tab" data-filter="morning" onclick="filterBlueprint(this)">
<svg class="icon-sm"><use href="#icon-bolt"/></svg> 立志
</button>
<button class="bp-tab" data-filter="evening" onclick="filterBlueprint(this)">
<svg class="icon-sm"><use href="#icon-magnifying-glass"/></svg> 责善
</button>
<button class="bp-tab" data-filter="study" onclick="filterBlueprint(this)">
<svg class="icon-sm"><use href="#icon-book-open"/></svg> 勤学
</button>
</div>
<!-- 明细列表 -->
<div class="bp-list" id="bp-list"></div>