v1.4.4 — 蓝图改为 Tab 筛选+明细列表

- 顶栏六板块卡片只显示统计数
- 新增立志/责善/勤学/全部四个 Tab
- 明细列表显示每条记录的板块+类型+内容
- 类型标签颜色区分（立志黄/责善红/勤学绿）

static/app.js

@@ -1009,34 +1009,82 @@
      Blueprint — 蓝图六板块
      ================================================================ */
 
+  var blueprintData = null;
+  var blueprintFilter = 'all';
+
   function loadBlueprint() {
     apiGetStats(function(err, data) {
       if (err || !data || !data.pillar_breakdown) return;
-      var pb = data.pillar_breakdown;
+      blueprintData = data.pillar_breakdown;
-      PILLARS.forEach(function(p){
+      renderBlueprintPillars(blueprintData);
-        var el = document.getElementById('bp-count-' + p.name);
+      renderBlueprintList();
-        var info = pb[p.name] || {};
-        var m = info.morning || 0, e = info.evening || 0, s = info.study || 0;
-        if (el) el.textContent = '立志' + m + ' · 责善' + e + ' · 勤学' + s;
-        // 显示详情列表
-        var detailEl = document.getElementById('bp-detail-' + p.name);
-        if (detailEl) {
-          var html = '';
-          (info.morning_items || []).forEach(function(mi){
-            html += '<div class="bp-item" data-type="morning">🥼 ' + esc(mi.text) + '</div>';
-          });
-          (info.evening_items || []).forEach(function(ei){
-            html += '<div class="bp-item" data-type="evening">🔍 ' + esc(ei.mistake || ei.improvement) + '</div>';
-          });
-          (info.study_items || []).forEach(function(si){
-            html += '<div class="bp-item" data-type="study">📚 ' + esc(si.name) + '</div>';
-          });
-          detailEl.innerHTML = html || '<div class="bp-empty">暂无记录</div>';
-        }
-      });
     });
   }
 
+  function renderBlueprintPillars(pb) {
+    var container = document.getElementById('blueprint-pillars');
+    if (!container) return;
+    var html = '';
+    PILLARS.forEach(function(p){
+      var info = pb[p.name] || {};
+      var m = info.morning || 0, e = info.evening || 0, s = info.study || 0;
+      var total = m + e + s;
+      html += '<div class="blueprint-pillar" data-pillar="' + p.name + '">' +
+        '<div class="bp-icon">' + p.emoji + '</div>' +
+        '<div class="bp-name">' + p.name + '</div>' +
+        '<div class="bp-count">' +
+          (m ? '<span class="bp-type morning">🥼' + m + '</span>' : '') +
+          (e ? '<span class="bp-type evening">🔍' + e + '</span>' : '') +
+          (s ? '<span class="bp-type study">📚' + s + '</span>' : '') +
+          (total === 0 ? '<span class="bp-type">—</span>' : '') +
+        '</div>' +
+      '</div>';
+    });
+    container.innerHTML = html;
+  }
+
+  function renderBlueprintList() {
+    var list = document.getElementById('bp-list');
+    var empty = document.getElementById('bp-list-empty');
+    if (!list || !blueprintData) return;
+    var items = [];
+    PILLARS.forEach(function(p){
+      var info = blueprintData[p.name] || {};
+      if (blueprintFilter === 'all' || blueprintFilter === 'morning') {
+        (info.morning_items || []).forEach(function(mi){ items.push({pillar: p, text: mi.text, type: 'morning'}); });
+      }
+      if (blueprintFilter === 'all' || blueprintFilter === 'evening') {
+        (info.evening_items || []).forEach(function(ei){ items.push({pillar: p, text: ei.mistake || ei.improvement, type: 'evening'}); });
+      }
+      if (blueprintFilter === 'all' || blueprintFilter === 'study') {
+        (info.study_items || []).forEach(function(si){ items.push({pillar: p, text: si.name, type: 'study', done: si.done}); });
+      }
+    });
+    if (items.length === 0) {
+      list.innerHTML = '';
+      if (empty) empty.style.display = 'block';
+      return;
+    }
+    if (empty) empty.style.display = 'none';
+    var typeLabels = {morning: '立志', evening: '责善', study: '勤学'};
+    var html = '';
+    items.forEach(function(item){
+      html += '<div class="bp-list-item">' +
+        '<span class="bp-item-pillar">' + item.pillar.emoji + ' ' + 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>' +
+      '</div>';
+    });
+    list.innerHTML = html;
+  }
+
+  window.filterBlueprint = function(btn) {
+    blueprintFilter = btn.dataset.filter;
+    document.querySelectorAll('.bp-tab').forEach(function(t){ t.classList.remove('active'); });
+    btn.classList.add('active');
+    renderBlueprintList();
+  };
+
   /* ================================================================
      Init
      ================================================================ */

static/style.css

@@ -1461,25 +1461,84 @@ body {
 .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: 13px; font-weight: 600; color: var(--primary); }
+.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); }
 
-.bp-detail {
+/* Tab 筛选 */
-  margin-top: 10px;
+.bp-tabs {
-  text-align: left;
+  display: flex;
-  font-size: 11px;
+  gap: 4px;
-  max-height: 120px;
+  margin-bottom: 16px;
-  overflow-y: auto;
+  border-bottom: 1.5px solid var(--border);
-  border-top: 1px solid var(--border);
+  padding-bottom: 0;
-  padding-top: 8px;
 }
-.bp-item {
+.bp-tab {
-  padding: 2px 0;
+  padding: 8px 16px;
+  border: none;
+  background: none;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-dim);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1.5px;
+  transition: all 0.15s;
+  font-family: inherit;
+}
+.bp-tab:hover { color: var(--text); }
+.bp-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
+
+/* 明细列表 */
+.bp-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.bp-list-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: var(--card);
+  border-bottom: 0.5px solid var(--border);
+  transition: background 0.15s;
+}
+.bp-list-item:hover { background: var(--bg); }
+.bp-item-pillar {
+  font-size: 12px;
   color: var(--text-dim);
   white-space: nowrap;
+  min-width: 80px;
+}
+.bp-item-type {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 8px;
+  white-space: nowrap;
+}
+.bp-item-type.morning { background: var(--warning-light); color: #D97706; }
+.bp-item-type.evening { background: var(--danger-light); color: var(--danger); }
+.bp-item-type.study { background: var(--success-light); color: var(--success); }
+.bp-item-text {
+  flex: 1;
+  font-size: 13px;
+  color: var(--text);
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.bp-empty { color: var(--text-muted); text-align: center; padding: 6px 0; }
+.bp-list-empty {
+  font-size: 13px;
+  color: var(--text-muted);
+  text-align: center;
+  padding: 32px 0;
+}
+
+/* 移除旧样式 */
 
 @media (max-width: 900px) {
   .blueprint-pillars { grid-template-columns: repeat(2, 1fr); }

templates/index.html

@@ -281,50 +281,18 @@
       <div class="blueprint-mission">
         一辈子，干成一件事 — 用 AI 重构医疗全链路
       </div>
-      <div class="blueprint-pillars" id="blueprint-pillars">
+      <!-- 六板块卡片 -->
-        <div class="blueprint-pillar" data-pillar="医疗服务">
+      <div class="blueprint-pillars" id="blueprint-pillars"></div>
-          <div class="bp-icon">🥼</div>
+      <!-- Tab 筛选 -->
-          <div class="bp-name">医疗服务</div>
+      <div class="bp-tabs">
-          <div class="bp-desc">诊疗能力 · 临床路径 · 医疗质量</div>
+        <button class="bp-tab active" data-filter="all" onclick="filterBlueprint(this)">全部</button>
-          <div class="bp-count" id="bp-count-医疗服务">—</div>
+        <button class="bp-tab" data-filter="morning" onclick="filterBlueprint(this)">🥼 立志</button>
-          <div class="bp-detail" id="bp-detail-医疗服务"></div>
+        <button class="bp-tab" data-filter="evening" onclick="filterBlueprint(this)">🔍 责善</button>
-        </div>
+        <button class="bp-tab" data-filter="study" onclick="filterBlueprint(this)">📚 勤学</button>
-        <div class="blueprint-pillar" data-pillar="医药营销">
-          <div class="bp-icon">💊</div>
-          <div class="bp-name">医药营销</div>
-          <div class="bp-desc">科普 · 科研 · 学术会议 · 患者管理</div>
-          <div class="bp-count" id="bp-count-医药营销">—</div>
-          <div class="bp-detail" id="bp-detail-医药营销"></div>
-        </div>
-        <div class="blueprint-pillar" data-pillar="医疗支付">
-          <div class="bp-icon">🛡️</div>
-          <div class="bp-name">医疗支付</div>
-          <div class="bp-desc">医保 · 商保 · 支付闭环</div>
-          <div class="bp-count" id="bp-count-医疗支付">—</div>
-          <div class="bp-detail" id="bp-detail-医疗支付"></div>
-        </div>
-        <div class="blueprint-pillar" data-pillar="AI 智能">
-          <div class="bp-icon">🤖</div>
-          <div class="bp-name">AI 智能</div>
-          <div class="bp-desc">数字人 · 智能平台 · AI 赋能</div>
-          <div class="bp-count" id="bp-count-AI 智能">—</div>
-          <div class="bp-detail" id="bp-detail-AI 智能"></div>
-        </div>
-        <div class="blueprint-pillar" data-pillar="公司治理">
-          <div class="bp-icon">🏛️</div>
-          <div class="bp-name">公司治理</div>
-          <div class="bp-desc">组织 · 人才 · 制度 · 文化</div>
-          <div class="bp-count" id="bp-count-公司治理">—</div>
-          <div class="bp-detail" id="bp-detail-公司治理"></div>
-        </div>
-        <div class="blueprint-pillar" data-pillar="个人修养">
-          <div class="bp-icon">🎯</div>
-          <div class="bp-name">个人修养</div>
-          <div class="bp-desc">立志 · 责善 · 改过 · 勤学</div>
-          <div class="bp-count" id="bp-count-个人修养">—</div>
-          <div class="bp-detail" id="bp-detail-个人修养"></div>
-        </div>
       </div>
+      <!-- 明细列表 -->
+      <div class="bp-list" id="bp-list"></div>
+      <div class="bp-list-empty" id="bp-list-empty" style="display:none">暂无记录</div>
     </section>
 
   </main>