Commit 251f27d3 by luoqi

fix(助手): 标题改回"更大更粗更黑",撤掉限行长 —— 第一版把层级做反了

产品指出两处:
① **标题比正文还小、还不加粗**。第一版 h3 做成了 12px/slate-500 的"小节标签",
   结果句中那个 font-medium 的加粗反而比标题更抢眼 —— 层级是**反的**。
   ⇒ h3 = 14px semibold slate-900(比正文 13.5 大半号),h1/h2 顺次放大。
    别再改回小灰字:那是**卡片小节**的写法,不是**对话正文标题**的写法 ——
     这段文字里标题是扫视的落脚点,它得是这一屏最重的东西。
② **一行断在半路、右边空一大片**:上一版加的 `max-w-[34em]`(限中文行长 25–35 字)
   在助手窗口放大后看起来像渲染坏了。⇒ 撤掉。
   窄窗本来就只有 ~28 字/行,行长问题只在放大时出现,而放大正是主管要"看得多"的时候;
    真要限行长得连用户气泡一起收进居中的对话栏(整块布局的事),别只勒住助手这一半。

实测(强制模型输出 ###):h3 = 14px/600/slate-900,正文 = 13.5px/400/slate-700,
段距 14px,容器 maxWidth: none。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
parent e5b0f01f
...@@ -104,29 +104,38 @@ function toolMeta(tool: string) { ...@@ -104,29 +104,38 @@ function toolMeta(tool: string) {
* ② **加粗不再身兼三职**:原来 `strong` 是 `semibold + slate-900`(字重与对比度同时跳), * ② **加粗不再身兼三职**:原来 `strong` 是 `semibold + slate-900`(字重与对比度同时跳),
* 模型又拿它当标题使 —— 一屏 7 处黑块,等于没有重点。 * 模型又拿它当标题使 —— 一屏 7 处黑块,等于没有重点。
* 现在 strong 降成 `font-medium`,**标题交给 h3**(见下)。 * 现在 strong 降成 `font-medium`,**标题交给 h3**(见下)。
* ③ **标题与正文靠字号/颜色分层,不靠字重**:h3 = 12.5px slate-500 的小节标签 * ③ **标题就要比正文更重、更大、更黑**(2026-08-11 第二轮返工)。
* (「要您定的」「已排好」),⛔ 别做成"更大更黑的一行" —— 那会跟句中加粗抢。 * 第一版把 h3 做成了 12px/slate-500 的"小节标签",结果**标题比正文还弱** ——
* ④ **限行长 + 数字等宽**:13.5px 中文在宽面板里一行能排 50+ 字(舒适区 25–35), * 句中那个 `font-medium` 的加粗反而比标题更抢眼,层级是反的,产品一眼就指出来了。
* `max-w-[34em]` 收住;`tabular-nums` 让数字竖着对齐,扫视时自己跳出来。 * ⇒ h3 = 14px semibold slate-900(比正文 13.5 大半号)。
* ⛔ 别再改回"小灰字标签":那是**卡片小节**的写法,不是**对话正文标题**的写法 ——
* 这段文字里标题是扫视的落脚点,它必须是这一屏最重的东西。
* ④ **数字等宽**:`tabular-nums` 让数字竖着对齐,扫视时自己跳出来。
* ⚠️ 曾经加过 `max-w-[34em]` 限行长(中文舒适区 25–35 字),**已撤**:
* 助手窗口放大后文字在半路断行、右边空一大片,看起来像渲染坏了。
* 窄窗本来就只有 ~28 字/行,行长问题只在放大时出现,而放大正是主管要"看得多"的时候。
* ⛔ 要限行长就得连用户气泡一起收进一个居中的对话栏(整块布局的事),
* 别只勒住助手这一半。
* ⛔ 别把这些值改回去而不改提示词:样式与「模型输出什么结构」是一对 * ⛔ 别把这些值改回去而不改提示词:样式与「模型输出什么结构」是一对
* (见 assistant-prompts 的「怎么写」一节)。 * (见 assistant-prompts 的「怎么写」一节)。
*/ */
function Markdown({ text }: { text: string }) { function Markdown({ text }: { text: string }) {
return ( return (
<div className="max-w-[34em] text-[13.5px] leading-relaxed text-slate-700 [font-variant-numeric:tabular-nums]"> <div className="text-[13.5px] leading-relaxed text-slate-700 [font-variant-numeric:tabular-nums]">
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm]}
components={{ components={{
h1: ({ children }) => <h1 className="mb-1.5 mt-4 text-[14px] font-semibold text-slate-900">{children}</h1>, h1: ({ children }) => <h1 className="mb-1.5 mt-5 text-[15px] font-semibold text-slate-900 first:mt-0">{children}</h1>,
h2: ({ children }) => <h2 className="mb-1.5 mt-4 text-[13.5px] font-semibold text-slate-900">{children}</h2>, h2: ({ children }) => <h2 className="mb-1.5 mt-5 text-[14.5px] font-semibold text-slate-900 first:mt-0">{children}</h2>,
/** /**
* ⭐ h3 是**模型实际会用的那一档**(提示词让它用 `###` 分块)。 * ⭐ h3 是**模型实际会用的那一档**(提示词让它用 `###` 分块)。
* 做成**小节标签**:比正文小半号 + 次级色 + 加字距,与正文拉开的是**字号和颜色**。 * 比正文大半号 + semibold + 最深的字色 —— 它是这段文字里**最重**的东西。
* ⛔ 别做成"更大更黑" —— 那跟句中加粗是同一种编码,又会糊成一片。 * ⚠️ `mt-5` 是段落成块的另一半:标题上方的空白才是"新的一块开始了"的信号;
* ⚠️ `mt-4` 是段落成块的另一半:标题上方的空白才是"新的一块开始了"的信号。 * `first:mt-0` 防止第一块顶部多出一截空白。
* ⛔ 别做成小灰字标签(第一版就是那样,结果标题比正文还弱,句中加粗比标题更抢眼)。
*/ */
h3: ({ children }) => ( h3: ({ children }) => (
<h3 className="mb-1 mt-4 text-[12px] font-semibold tracking-wide text-slate-500 first:mt-0"> <h3 className="mb-1.5 mt-5 text-[14px] font-semibold text-slate-900 first:mt-0">
{children} {children}
</h3> </h3>
), ),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment