Tatta/DadaoTask
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): 知识正文按阅读字号排版，重写 Markdown 样式
CI / backend (push) Canceled after 0s
Details

Browse Source 
- 正文从 14px 提到 16px / 1.85，不再比编辑器（0.9rem）还小
- 标题靠字重与留白分层，h2 加细分隔线；行内代码、代码块、引用、表格、图片统一重排
- 正文限宽 42rem 居中，长段落不用来回扫行
- 评论与工单说明走 prose-dadao--sm（14px），抽屉里不喧宾夺主
This commit is contained in:
steven
2026-11-02 14:29:35 +08:00
parent 684b9b2604
commit 288e27e465
4 changed files with 154 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/index.css
+141 -37
View File
@@ -164,49 +164,98 @@
}
/* Markdown 渲染样式：不引 @tailwindcss/typography（它会把行距和字重改得不像我们的界面），
这里只针对我们真正会渲染的标签写一遍，保持与组件库同一套色板与节奏。 */
这里只针对我们真正会渲染的标签写一遍，保持与组件库同一套色板与节奏。
阅读区按 16px / 1.85 排：看的时候字号不该比编辑时（0.9rem）还小。 */
.prose-dadao {
color: theme("colors.ink.800");
font-size: 1rem;
line-height: 1.85;
letter-spacing: 0.01em;
overflow-wrap: break-word;
}
.prose-dadao > :first-child {
margin-top: 0;
}
.prose-dadao > * + * {
margin-top: 0.6em;
margin-top: 0.85em;
}
.prose-dadao p {
margin: 0;
}
/* 抽屉里的短文本（评论、工单处理说明）不需要阅读区那么大的字号 */
.prose-dadao--sm {
font-size: 0.875rem;
line-height: 1.7;
}
/* 标题分层靠字重与上方留白，不靠颜色 */
.prose-dadao h1,
.prose-dadao h2,
.prose-dadao h3,
.prose-dadao h4 {
.prose-dadao h4,
.prose-dadao h5,
.prose-dadao h6 {
font-family: theme("fontFamily.display");
color: theme("colors.ink.900");
line-height: 1.35;
margin-top: 1.1em;
line-height: 1.4;
letter-spacing: 0;
scroll-margin-top: 4rem;
}
.prose-dadao h1 {
font-size: 1.25rem;
font-size: 1.55em;
font-weight: 700;
margin-top: 1.7em;
}
.prose-dadao h2 {
font-size: 1.1rem;
font-size: 1.28em;
font-weight: 600;
margin-top: 1.6em;
padding-bottom: 0.35em;
border-bottom: 1px solid theme("colors.line.100");
}
.prose-dadao h3,
.prose-dadao h4 {
font-size: 1rem;
.prose-dadao h3 {
font-size: 1.1em;
font-weight: 600;
margin-top: 1.35em;
}
.prose-dadao h4,
.prose-dadao h5,
.prose-dadao h6 {
font-size: 1em;
font-weight: 600;
margin-top: 1.2em;
color: theme("colors.ink.700");
}
.prose-dadao strong {
.prose-dadao strong,
.prose-dadao b {
font-weight: 600;
color: theme("colors.ink.900");
}
/* 中文里斜体不好认，强调改成"荧光笔"底纹 */
.prose-dadao em {
font-style: normal;
background: linear-gradient(transparent 62%, theme("colors.primary.100") 0);
padding: 0 0.1em;
}
.prose-dadao a {
color: theme("colors.primary.700");
text-decoration: underline;
text-decoration-color: theme("colors.primary.300");
text-underline-offset: 2px;
text-underline-offset: 0.22em;
}
.prose-dadao a:hover {
color: theme("colors.primary.800");
text-decoration-color: theme("colors.primary.500");
background: theme("colors.primary.50");
border-radius: 3px;
}
.prose-dadao ul,
.prose-dadao ol {
padding-left: 1.15rem;
padding-left: 1.4em;
}
.prose-dadao ul {
list-style: disc;
@@ -215,50 +264,72 @@
list-style: decimal;
}
.prose-dadao li::marker {
color: theme("colors.ink.300");
color: theme("colors.primary.400");
}
.prose-dadao li + li {
margin-top: 0.2em;
margin-top: 0.3em;
}
.prose-dadao li > ul,
.prose-dadao li > ol {
margin-top: 0.3em;
padding-left: 1.2em;
}
.prose-dadao input[type="checkbox"] {
margin-right: 0.45em;
vertical-align: middle;
}
.prose-dadao blockquote {
border-left: 2px solid theme("colors.primary.300");
padding-left: 0.75rem;
color: theme("colors.ink.600");
margin: 1.1em 0;
padding: 0.75em 1em;
border-left: 3px solid theme("colors.primary.300");
border-radius: 0 10px 10px 0;
background: theme("colors.paper.100");
color: theme("colors.ink.700");
}
.prose-dadao blockquote > * + * {
margin-top: 0.5em;
}
.prose-dadao blockquote p {
margin: 0;
}
.prose-dadao code {
font-family: theme("fontFamily.mono");
font-size: 0.86em;
font-size: 0.875em;
background: theme("colors.paper.200");
border-radius: 4px;
padding: 0.1em 0.35em;
color: theme("colors.ink.900");
border-radius: 5px;
padding: 0.12em 0.4em;
}
.prose-dadao pre {
background: theme("colors.ink.900");
color: theme("colors.paper.50");
border-radius: 10px;
padding: 0.7rem 0.85rem;
border-radius: 12px;
padding: 0.9rem 1rem;
overflow-x: auto;
font-size: 0.82em;
line-height: 1.6;
font-size: 0.86em;
line-height: 1.7;
}
.prose-dadao pre code {
background: transparent;
padding: 0;
color: inherit;
font-size: inherit;
}
.prose-dadao hr {
border: 0;
border-top: 1px solid theme("colors.line.200");
margin: 2em 0;
}
.prose-dadao img {
max-width: 100%;
border-radius: 8px;
border-radius: 10px;
border: 1px solid theme("colors.line.100");
box-shadow: theme("boxShadow.card");
}
/* 表格：宽表横向滚动（不撑破抽屉），窄表铺满 */
@@ -268,29 +339,62 @@
min-width: 100%;
max-width: 100%;
overflow-x: auto;
border-collapse: collapse;
font-size: 0.9em;
margin: 0.6rem 0;
border: 1px solid theme("colors.line.200");
border-collapse: separate;
border-spacing: 0;
border-radius: 10px;
font-size: 0.94em;
margin: 1.1em 0;
}
.prose-dadao th,
.prose-dadao td {
border: 1px solid theme("colors.line.200");
padding: 0.4rem 0.6rem;
border-bottom: 1px solid theme("colors.line.100");
padding: 0.5em 0.8em;
text-align: left;
white-space: nowrap;
}
.prose-dadao th {
background: theme("colors.paper.200");
.prose-dadao thead th {
background: theme("colors.paper.100");
border-bottom: 1px solid theme("colors.line.200");
font-weight: 600;
color: theme("colors.ink.800");
color: theme("colors.ink.700");
}
.prose-dadao tbody tr:nth-child(even) td {
.prose-dadao tbody tr:last-child td {
border-bottom: 0;
}
.prose-dadao tbody tr:hover td {
background: theme("colors.paper.50");
}
.prose-compact {
font-size: 0.8rem;
line-height: 1.5;
font-size: 0.8125rem;
line-height: 1.7;
letter-spacing: 0;
}
.prose-compact > * + * {
margin-top: 0.55em;
}
.prose-compact h1 {
font-size: 1.2em;
margin-top: 1em;
}
.prose-compact h2 {
font-size: 1.08em;
margin-top: 1em;
}
.prose-compact h3,
.prose-compact h4 {
font-size: 1em;
margin-top: 0.9em;
}
.prose-compact pre {
font-size: 0.82em;
padding: 0.6rem 0.75rem;
border-radius: 8px;
}
.prose-compact blockquote {
margin: 0.7em 0;
padding: 0.55em 0.8em;
}
/* ---- Vditor 富文本：只做"贴合本产品"的覆写，不改它的行为 ---- */