# 💡 Summary
## 零、前置了解
简单了解下markdown的常用语法和效果
## 一、UI 与前端沟通
定义语法的统一呈现规则，而不是 case by case 定义样式，第三部分样例集有一些回复可以用来实际参考
```Java
常见改法速查（你想实现 → 修改哪里）
1) 正文字号更大/更小 → .markdown-body { font-size }
2) 行距更疏/更紧 → .markdown-body { line-height }
3) 段落间距调节 → .markdown-body p { margin }
4) 链接颜色/下划线 → .markdown-body a { color / text-decoration }
5) 标题整体更小/更大 → .markdown-body h1/h2/h3 { font-size }；标题上下间距 → h1~h6 { margin-top / margin-bottom }
6) 引用块更轻/更重 → .markdown-body blockquote { border-left / background / padding }
7) 列表缩进/项间距 → .markdown-body ul, ol { padding-left / margin }；.markdown-body li { margin }
8) 任务列表对齐/间距 → .markdown-body input[type="checkbox"] { vertical-align / margin-right }
9) 图片圆角/间距 → .markdown-body img { border-radius / margin }
10) 行内代码视觉（小灰底） → .markdown-body :not(pre) > code { background / padding / border-radius }
11) 代码块主题（浅/深） → .markdown-body pre { background / border / color }；并在 src/app.jsx 切换 highlight 主题：
- 浅色：import 'highlight.js/styles/github.css'
- 深色：import 'highlight.js/styles/github-dark.css'
12) 表格（边框、斑马纹、滚动） → .markdown-body table/th/td 与 tr:nth-child(even)
13) 水平线样式 → .markdown-body hr { border-top / margin }
设计令牌（推荐优先改）
- --md-text：正文主文本颜色
- --md-muted：次要文字颜色
- --md-accent：链接/强调色
- --md-border：边框色（表格、分隔线等）
- --md-soft-bg：柔和背景色（可用于块级背景）
- --md-code-bg：行内代码 & 浅色代码块底色
```
### 举例子
- 对照样例集，准备 10–20 条“典型 AI 回复”（含列表、表格、代码、图片、长段落、嵌套引用等），放在一个“样式实验页”集中
预览（或用当前 chat mock）。每次改动 overrides 都能肉眼快速回归。
- 设备覆盖
- iOS/Android WebView 下看一次，主要观察行高、滚动、字体渲染差异。
- 截图回归（可选）
- 若有时间，可加简单的可视回归（不强制），至少记录几套截图对比，避免微调把其它场景带崩。
## 二、前端思路
本质是“用 `github-markdown-css` 当底座 + 全局引入一份自己的 overrides 做统一定制”，
1. `github-markdown-css/github-markdown.css` 整体打底
2. 全局维度统一调整样式 ` src/assets/markdown-overrides.css（已经创建并全局加载）。 `
3. `markdown-overrides`全局应用于任何其他组件，只需确保 Markdown 容器加` className="markdown-body"` 和相同的 ReactMarkdown 配置，局部差异：某些页要特别风格时，用更具体外层类名包住（如.aiMessage.markdown-body...）写局部覆盖；结构性问题继续用 ReactMarkdown components 处理。（最好不要局部修改！！！）
4. 需要注意 - rehype-raw 允许在 Markdown 中使用原始 HTML；如果任何内容是不可信的，我们可以添加 rehype-sanitize 或在上游进行清理。
### `markdown-overrides.css`的写法
```Java
- 文字与标题
- .markdown-body h1 { font-size: 1.25rem }
- .markdown-body h2 { font-size: 1.125rem }
- .markdown-body h3 { font-size: 1.0625rem }
- 各标题 margin 控制为“上大下小”（如 1em/.6em），贴近聊天节奏。
- 引用
- blockquote { border-left: 4px solid #e5e7eb; background: #fafafa; padding: .5em 1em }
- 列表
- ul, ol { padding-left: 1.25em; margin: .5em 0 }
- li { margin: .25em 0 }
- 任务列表：为 input[type=checkbox] 加对齐与禁用态样式。
- 代码
- code { background:#f6f8fa; padding:0 .25em; border-radius:4px }
- pre { background:#0f172a; color:#e2e8f0; border-radius:8px; padding:12px; overflow:auto }
- 或者选浅底（和 GitHub 一致）；关键是“全项目统一一种风格”。
- 表格
- table { display:block; overflow-x:auto; border-collapse: collapse }
常见改法速查（你想实现 → 修改哪里）
1) 正文字号更大/更小 → .markdown-body { font-size }
2) 行距更疏/更紧 → .markdown-body { line-height }
3) 段落间距调节 → .markdown-body p { margin }
4) 链接颜色/下划线 → .markdown-body a { color / text-decoration }
5) 标题整体更小/更大 → .markdown-body h1/h2/h3 { font-size }；标题上下间距 → h1~h6 { margin-top / margin-bottom }
6) 引用块更轻/更重 → .markdown-body blockquote { border-left / background / padding }
7) 列表缩进/项间距 → .markdown-body ul, ol { padding-left / margin }；.markdown-body li { margin }
8) 任务列表对齐/间距 → .markdown-body input[type="checkbox"] { vertical-align / margin-right }
9) 图片圆角/间距 → .markdown-body img { border-radius / margin }
10) 行内代码视觉（小灰底） → .markdown-body :not(pre) > code { background / padding / border-radius }
11) 代码块主题（浅/深） → .markdown-body pre { background / border / color }；并在 src/app.jsx 切换 highlight 主题：
- 浅色：import 'highlight.js/styles/github.css'
- 深色：import 'highlight.js/styles/github-dark.css'
12) 表格（边框、斑马纹、滚动） → .markdown-body table/th/td 与 tr:nth-child(even)
13) 水平线样式 → .markdown-body hr { border-top / margin }
```
## 三、对照样例集
UI 针对的是统一语法的关系，而不是具体的文字内容
```Java
# 问一问
## 2. 武康路
*类型*：道路 ｜ *片区*：湖南路 ｜ *距离*：8.8km ｜ **40% 人推荐**
**亮点**
- 老洋房与文艺小店聚集，梧桐树下氛围感拉满，适合拍照打卡。
**玩法**
- “逛 30+ 历史建筑，路过巴金故居、黄兴旧居，累了坐路边咖啡馆喝杯‘拿铁’。”
**注意**
- 人流量大，建议避开高峰时段，选择清晨或傍晚游览。
**相册（共 6 张）**
`好评 102` `中立 63` `吐槽 42`
---
## 3. 陆家嘴
*类型*：商圈/地标 ｜ *位置*：陆家嘴 ｜ *距离*：14.8km ｜ **34% 人推荐**
（此处可补充亮点/玩法/注意等内容）
**相册（占位）**
`好评` `中立` `吐槽`
```
___
```Java
> 下面是最快的启动方式（已 npm install 成功的前提下）：
- H5（浏览器）开发
- 建议 Node 版本：nvm use 16（>=16.18 更稳）
- 启动：npm run dev:h5
- 访问：http://localhost:10086/#/pages/tripChat/index（会自动打开浏览器）
其他可选启动方式（按端）：
- 微信小程序：npm run dev:weapp:mysub 或 npm run dev:weapp:mysub2
- 用微信开发者工具打开编译输出目录 dist/mysub 或 dist/mysub2
- 支付宝小程序：npm run dev:alipay:mysub 或 npm run dev:alipay:mysub2
- React Native（QRN）：npm run dev:qrn（需本机已装 iOS/Android RN 开发环境）
```
```Java
Short answer: 可以。用 github-markdown-css 当“底座”，再用一份很小的覆盖样式按移动端需求微调，是最省
事、最稳的做法。
Current status
- 渲染链路已就位：react-markdown + remark-gfm + rehype-raw + rehype-highlight。
- 已引入样式：
- 包内样式：github-markdown-css/github-markdown.css (AICommonResult/index.js:12)
- 本地样式：src/assets/github-markdown.css (AICommonResult/index.js:8)
- 代码高亮：highlight.js/styles/github-dark.css (AICommonResult/index.js:13)
- 需注意的两点：
- ReactMarkdown 仍渲染的是 testText 而不是接口返回的 text（src/pages/tripChat/component/
AICommonResult/index.js:419）。
- ReactMarkdown 被包在了 <Text> 里（src/pages/tripChat/component/AICommonResult/index.js:399-
421），不利于块级元素在 H5 正常布局，建议直接放在容器 <div> 内。
Recommended approach
- b 打底：保留 github-markdown-css 作为基础样式。
- 创建一个更小的覆盖样式文件（建议命名 src/assets/markdown-overrides.css），在基础样式之后引入，覆
盖移动端要紧的点（字号、行高、表格滚动、图片自适应、代码块滚动等）。
- React 部分做两个小清理：
- 不再把 ReactMarkdown 放到 <Text> 里面，改为只放在 markdown-body 容器里。
- 用真实的 markdownText 渲染（替换掉 demo 的 testText）。
Minimal cleanup plan
- 只保留一个 GitHub 基础样式来源二选一：
- 方案 1（推荐）：继续使用包内样式（AICommonResult/index.js:12），删掉或改名你现在的本地副本
（AICommonResult/index.js:8），新建 markdown-overrides.css。
- 方案 2：只保留本地 src/assets/github-markdown.css（已拷贝并可改动），删掉包内样式引入
（AICommonResult/index.js:12）。
- 在 src/pages/tripChat/component/AICommonResult/index.js:398-421 把 <Text> 包裹去掉，直接渲染：
- 用法示例
- <div className="markdown-body">
- <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw, rehypeHighlight]}
linkTarget="_blank" components={{ table: (p) => <div style={{overflowX:'auto'}}><table {...p} /></
div>, img: (p) => <img style={{maxWidth:'100%',height:'auto'}} {...p} /> }}>
- {markdownText}
- </ReactMarkdown>
- </div>
- 新建并在基础样式之后引入 src/assets/markdown-overrides.css（命名可自定），内容示例：
- .markdown-body { font-size: 16px; line-height: 1.6; color: #262626; word-break: break-word;
-webkit-font-smoothing: antialiased; }
- .markdown-body img, .markdown-body video { max-width: 100%; height: auto; }
- .markdown-body table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-
scrolling: touch; }
- .markdown-body pre { overflow: auto; padding: 12px; border-radius: 8px; }
- .markdown-body code { font-size: 85%; }
- .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body
h5, .markdown-body h6 { line-height: 1.35; margin-top: 1em; margin-bottom: .5em; }
- .markdown-body ul, .markdown-body ol { padding-left: 1.25em; margin: .5em 0; }
- .markdown-body blockquote { margin: .5em 0; padding: .5em 1em; border-left: 4px solid
#e5e6eb; background: #fafafa; }
Nice-to-haves
- 换行更贴近聊天文本：加 remark-breaks（把单换行当 <br>），对 AI 回复可读性更好。
- 安全：如果 Markdown 来自不可信端（用户/AI），考虑加 rehype-sanitize 或提前做 HTML 白名单过滤。
- 链接：linkTarget="_blank" + rel="noreferrer noopener"（ReactMarkdown 的 linkTarget + components.a
可设置）。
Want me to apply the cleanup now (remove <Text> 包裹、切换为渲染 markdownText、只保留一种基础样式并
加一个 overrides 文件)?
```
# 🧩 Cues
# 🪞Notes