diff --git a/web/src/components/Markdown.tsx b/web/src/components/Markdown.tsx index de5106c..d367127 100644 --- a/web/src/components/Markdown.tsx +++ b/web/src/components/Markdown.tsx @@ -27,11 +27,7 @@ export function Markdown({ source, compact = false, className = "", resources }: return (
); diff --git a/web/src/components/TaskDetail.tsx b/web/src/components/TaskDetail.tsx index 21d8f7b..15f6c66 100644 --- a/web/src/components/TaskDetail.tsx +++ b/web/src/components/TaskDetail.tsx @@ -619,7 +619,11 @@ export function TaskDetail({ )}
- +

{new Date(c.created_at).toLocaleString("zh-CN")}

diff --git a/web/src/index.css b/web/src/index.css index 81fbfff..e89394f 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -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 富文本:只做"贴合本产品"的覆写,不改它的行为 ---- */ diff --git a/web/src/pages/Knowledge.tsx b/web/src/pages/Knowledge.tsx index db4f09a..1716016 100644 --- a/web/src/pages/Knowledge.tsx +++ b/web/src/pages/Knowledge.tsx @@ -1056,8 +1056,13 @@ function KnowledgeDrawer({ {/* 看的时候就是渲染后的样子:标题、列表、表格、图片都按 Markdown 显示。 要改再点「编辑」,进来才是编辑器——两者不该混在同一个界面里。 */} -
- +
+ {/* 正文限宽到约 42 个字:整行拉满 1150px 时眼睛要来回扫,反而不好读 */} +
{attachments.length > 0 && (