fix: AI诊断摘要正则提取 + 仪表盘排序/宽度修复

- DiagnosisSummary extractSection 改为正则模糊匹配,兼容 DeepSeek 不同标题格式
- 仪表盘近12期柱状图改为从左到右按播出时间升序
- 全局内容区宽度参数定位:.app-content max-width 1190px + width 100%(修复 Ant Design flex 下 margin auto shrink-to-fit)
- Dashboard.css 去除多余 max-width 限制

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
simonkoson
2026-07-06 20:38:33 +08:00
parent 7eb6511169
commit 7a48af3e9e
5 changed files with 38 additions and 19 deletions
+5 -2
View File
@@ -13,8 +13,8 @@
## 🔖 状态栏(每次结束 session 前必须更新这三行)
- **最后更新**Claude(顾问+动手)| 2026-07-03
- **当前状态一句话**L4 AI 诊断报告已实现(DeepSeek V4 Pro 生成、摘要块+详情页、三档自适应、22期内容摘要卡已入库)。收视分析看板 L1-L4 全部完成
- **最后更新**Claude Opus(顾问+动手)| 2026-07-06
- **当前状态一句话**Bug 修复轮完成——AI 诊断摘要块正则提取、仪表盘柱状图排序、全局页面宽度参数定位并调优(1190px)。收视分析看板 L1-L4 + 仪表盘均已就绪
- **下一个动手的人从这里开始**:见下方「⏩ 交接备注」
---
@@ -84,6 +84,7 @@
## 4. 已完成(只追加,最新在上)
- [2026-07-06] **三处 Bug 修复 + 全局宽度调优**:① AI 诊断摘要块 `extractSection` 从硬编码 `indexOf` 改为正则模糊匹配,解决 DeepSeek 返回标题格式不一致导致干条不显示的问题;② 仪表盘近 12 期柱状图加 `.reverse()` 改为从左到右按播出时间升序;③ 全局内容区宽度:定位到 `.app-content``AppLayout.css`)的 `max-width` 是唯一有效参数(必须搭配 `width: 100%`,否则 Ant Design flex 布局下 `margin: 0 auto` 会触发 shrink-to-fit),最终定为 **1190px**
- [2026-07-03] **L4 AI 诊断报告**:① Prompt 4(内容摘要卡,MiMo 生成)+ Prompt 5(诊断报告,DeepSeek V4 Pro)撰写完成;② 22 期文稿摘要卡批量生成并导入 episodes.content_digest004 迁移);③ 后端 POST /api/analytics/diagnosis-report 端点(组装数据+调 DeepSeek+内存缓存);④ 前端摘要块 DiagnosisSummary(左右两块、三档自适应色调、可滚动、粗体渲染)+ 详情页 DiagnosisReportreact-markdown 渲染+重新生成+免责声明);⑤ 话题性(社交货币)三维框架设计(大众认知度/降维切口/惊奇密度)。模型选型:DeepSeek V4 Pro 胜出(vs Qwen-Max 对比测试)。
- [2026-07-03] **收视分析看板 React 前端实现(L1–L3)**:① 指标卡 5 列(均值/基础达标率/摸高完成率含四档动画/期次数/年度目标);② 走势折线图(dataZoom 滑块+确认按钮范围过滤,下游模块联动);③ 双列对比区(左列季度+编导、右列题材饼图+条形图);④ 双引擎象限图(题材热度×叙事结构散点,气泡编码份额/三色/钩子强度)。附带:25 期真实收视+AI 标签数据导入、侧边栏 fixed 定位、滑块滚轮冲突修复。后端 analytics API 增返 4 个 AI 标签字段。
- [2026-07-03] 看板升级子项目原型阶段收工:L2 打标流水线就绪(GT v0.6.0 / 25 期 / 三个 Prompt 可用)+ L3 HTML 原型验证通过(双引擎象限图+5 模块+视觉定稿)+ 003 迁移已执行(episodes +7 AI 标签列)。交付清单见寄存条。
@@ -131,6 +132,7 @@
- **L4 摘要块视觉**:左块固定粉红色系(`#c0584f`),右块跟 tier 三档变色(绿/蓝/红)。两块均可滚动查看完整内容。
- **L4 话题性框架**:社交货币理论三维(大众认知度/降维切口/惊奇密度),写入摘要卡不作为独立 AI 标签字段。
- **L4 prompt5 约束**:① 提及期次必须用「第X期《节目名》」格式;② 话题性必须独立分析段;③ 军事装备分类须准确(枪械≠冷兵器)。
- **全局页面内容区宽度**:唯一有效参数是 `frontend/src/components/Layout/AppLayout.css``.app-content``max-width`(当前 **1190px**)。**必须保留 `width: 100%` + `box-sizing: border-box`**,不能单独用 `margin: 0 auto`Ant Design flex 布局下会触发 shrink-to-fit,宽度锁死无法调节)。制片人直接说"调这个参数"即可。
---
@@ -149,6 +151,7 @@
3. **已验证好用的布局别为对齐整体重构**(flex 改 Grid 连坏两轮);样式微调优先。
4. Cline 报告自相矛盾时,**把源码发给 Opus 一眼定位**胜过让 Cline 反复试错。
5. 像素级打磨边际收益递减,**见好就收**,记 backlog 改天连视觉规范统一弄。
6. **页面宽度问题**Ant Design `Layout > Content` 是 flex 子元素,`margin: 0 auto` 不搭配显式 `width` 会导致元素缩到内容宽度(shrink-to-fit),改 `max-width` 数值完全无效。必须同时写 `width: 100%`
---
@@ -10,18 +10,29 @@ import { generateDiagnosisReport } from '../../services/analyticsService'
* - 从 markdown 提取核心发现和行动建议
*/
/** 从 markdown 中提取指定章节内容 */
function extractSection(markdown, startMarker, endMarkers) {
/** 从 markdown 中提取指定章节内容(正则模糊匹配) */
function extractSection(markdown, keyword, endKeywords) {
if (!markdown) return ''
const startIdx = markdown.indexOf(startMarker)
if (startIdx === -1) return ''
const afterStart = startIdx + startMarker.length
// 找最近的结束标记
// 用正则匹配:任意数量的 # 开头,后面包含关键词的行
const startRegex = new RegExp(`^#{1,6}\\s*.*${keyword}.*$`, 'm')
const match = markdown.match(startRegex)
if (!match) return ''
const afterStart = match.index + match[0].length
// 找最近的结束标记(下一个同级或更高级标题)
let endIdx = markdown.length
for (const marker of endMarkers) {
const idx = markdown.indexOf(marker, afterStart)
if (idx !== -1 && idx < endIdx) {
endIdx = idx
if (endKeywords && endKeywords.length > 0) {
for (const kw of endKeywords) {
const endRegex = new RegExp(`^#{1,6}\\s*.*${kw}.*$`, 'm')
const endMatch = markdown.substring(afterStart).match(endRegex)
if (endMatch && (afterStart + endMatch.index) < endIdx) {
endIdx = afterStart + endMatch.index
}
}
} else {
// 没有 endKeywords 时,找下一个同级标题作为结束
const nextHeading = markdown.substring(afterStart).match(/^#{1,6}\s+/m)
if (nextHeading) {
endIdx = afterStart + nextHeading.index
}
}
return markdown.substring(afterStart, endIdx).trim()
@@ -156,10 +167,10 @@ function DiagnosisSummary({ episodes, yearlyTarget, selectedYear }) {
// 提取核心发现和行动建议
const markdown = report?.report_markdown || ''
// 核心发现:从 "#### 二、核心发现" 到 "#### 三、"
let coreFindings = extractSection(markdown, '#### 二、核心发现', ['#### 三、'])
// 行动建议:从 "#### 四、行动建议" 到末尾
let actions = extractSection(markdown, '#### 四、行动建议', [])
// 核心发现:关键词匹配"核心发现",到"深度分析"或"三、"
let coreFindings = extractSection(markdown, '核心发现', ['深度分析', '三、'])
// 行动建议:关键词匹配"行动建议"到末尾
let actions = extractSection(markdown, '行动建议', [])
const coreLines = parseMarkdownLines(coreFindings)
const actionLines = parseMarkdownLines(actions)
+5 -1
View File
@@ -18,6 +18,8 @@
.app-main {
min-height: 100vh;
margin-left: 220px;
width: calc(100vw - 220px);
overflow-x: hidden;
}
.app-header {
@@ -35,6 +37,8 @@
padding: 24px;
background: var(--color-bg-cream);
min-height: calc(100vh - 64px);
max-width: 1400px;
width: 100%;
max-width: 1190px;
margin: 0 auto;
box-sizing: border-box;
}
+2 -2
View File
@@ -1,6 +1,6 @@
.dashboard {
max-width: 1200px;
padding: 12px;
padding: 12px 0;
box-sizing: border-box;
}
/* ===== Banner ===== */
@@ -86,6 +86,7 @@ function Dashboard() {
const displayEpisodes = episodes
.filter(e => e.audience_share != null)
.slice(0, 12)
.reverse()
const bestEpisode = [...displayEpisodes].sort((a, b) => Number(b.audience_share) - Number(a.audience_share))[0]