rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: 优化 MarkdownToHtml 预览样式，剥离 CSS 变量回退值并增强 iframe 暗色模式自适应

Browse Source
This commit is contained in:
雨霖铃
2026-05-22 22:46:13 +08:00
parent 539f9648b1
commit 272bcae904
1 changed files with 62 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/MarkdownToHtml/index.tsx
+62 -36
View File
@@ -4,7 +4,7 @@ import { useLazyTranslation } from '@/utils/useLazyTranslation';
import PageHeader from '@/components/PageHeader'; import PageHeader from '@/components/PageHeader';
import CopyButton from '@/components/CopyButton'; import CopyButton from '@/components/CopyButton';
import SwitchButtonGroup from '@/components/SwitchButtonGroup'; import SwitchButtonGroup from '@/components/SwitchButtonGroup';
import { Button } from '@/components/ui/button'; // 💡 1. 全面回归原子组件规范 import { Button } from '@/components/ui/button';
import { useStorageState } from '@/utils/useStorageState'; import { useStorageState } from '@/utils/useStorageState';
import type { MarkdownToHtmlPreviewMode } from '@/types/storage'; import type { MarkdownToHtmlPreviewMode } from '@/types/storage';
import { import {
@@ -19,41 +19,43 @@ import { cn } from '@/lib/utils';
const isValidPreviewMode = (val: unknown): val is MarkdownToHtmlPreviewMode => const isValidPreviewMode = (val: unknown): val is MarkdownToHtmlPreviewMode =>
typeof val === 'string' && ['split', 'preview', 'html'].includes(val); typeof val === 'string' && ['split', 'preview', 'html'].includes(val);
// 💡 2. 样式超进化：将实色系全部改为标准 rgba 通道，确保在 iframe 内部能跟随宿主主题自适应混色 // 💡 规范回归：保持最纯净的通用选择器集合，内部变量全部交由全局 :root 驱动
const PREVIEW_STYLES = ` const PREVIEW_STYLES = `
.markdown-body { .markdown-body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6; line-height: 1.6;
color: var(--md-foreground, #1f2328); color: var(--md-foreground);
background-color: transparent; background-color: transparent;
font-size: 14px;
} }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { .markdown-body h1, .markdown-body h2, .markdown-body h3 {
margin-top: 24px; margin-top: 24px;
margin-bottom: 16px; margin-bottom: 16px;
font-weight: 600; font-weight: 600;
line-height: 1.25; line-height: 1.25;
color: var(--md-foreground);
} }
.markdown-body h1 { font-size: 1.6em; border-bottom: 1px solid var(--md-border, rgba(128,128,128,0.2)); padding-bottom: 0.3em; } .markdown-body h1 { border-bottom: 1px solid var(--md-border); padding-bottom: 0.3em; font-size: 1.6em; }
.markdown-body h2 { font-size: 1.35em; border-bottom: 1px solid var(--md-border, rgba(128,128,128,0.2)); padding-bottom: 0.3em; } .markdown-body h2 { border-bottom: 1px solid var(--md-border); padding-bottom: 0.3em; font-size: 1.35em; }
.markdown-body p { margin-top: 0; margin-bottom: 16px; font-size: 14px; } .markdown-body p { margin-top: 0; margin-bottom: 16px; }
.markdown-body a { color: #2563eb; text-decoration: none; } .markdown-body a { color: #3b82f6; text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; } .markdown-body a:hover { text-decoration: underline; }
.markdown-body code { .markdown-body code {
background-color: var(--md-code-bg, rgba(128,128,128,0.08)); background-color: var(--md-code-bg);
border-radius: 4px; border-radius: 4px;
font-size: 85%; font-size: 85%;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
font-family: Menlo, Consolas, monospace; font-family: Menlo, Consolas, monospace;
} }
.markdown-body pre { .markdown-body pre {
background-color: var(--md-pre-bg, rgba(128,128,128,0.05)); background-color: var(--md-pre-bg);
border-radius: 8px; border-radius: 8px;
font-size: 85%; font-size: 85%;
line-height: 1.45; line-height: 1.45;
overflow: auto; overflow: auto;
padding: 16px; padding: 16px;
margin: 0 0 16px; margin: 0 0 16px;
border: 1px solid var(--md-border, rgba(128,128,128,0.15)); border: 1px solid var(--md-border);
} }
.markdown-body pre code { .markdown-body pre code {
background-color: transparent; background-color: transparent;
@@ -61,8 +63,8 @@ const PREVIEW_STYLES = `
padding: 0; padding: 0;
} }
.markdown-body blockquote { .markdown-body blockquote {
border-left: 0.25em solid var(--md-quote-line, rgba(128,128,128,0.3)); border-left: 0.25em solid var(--md-quote-line);
color: var(--md-muted, rgba(128,128,128,0.6)); color: var(--md-muted);
margin: 0 0 16px; margin: 0 0 16px;
padding: 0 1em; padding: 0 1em;
} }
@@ -73,11 +75,11 @@ const PREVIEW_STYLES = `
font-size: 13px; font-size: 13px;
} }
.markdown-body table th, .markdown-body table td { .markdown-body table th, .markdown-body table td {
border: 1px solid var(--md-border, rgba(128,128,128,0.2)); border: 1px solid var(--md-border);
padding: 6px 13px; padding: 6px 13px;
} }
.markdown-body table tr:nth-child(2n) { background-color: var(--md-code-bg, rgba(128,128,128,0.03)); } .markdown-body table tr:nth-child(2n) { background-color: var(--md-code-bg); }
.markdown-body table th { font-weight: 600; background-color: var(--md-code-bg, rgba(128,128,128,0.05)); } .markdown-body table th { font-weight: 600; background-color: var(--md-code-bg); }
`; `;
export default function MarkdownToHtmlPage() { export default function MarkdownToHtmlPage() {
@@ -93,42 +95,62 @@ export default function MarkdownToHtmlPage() {
const result = useMemo(() => markdownToHtml(markdown), [markdown]); const result = useMemo(() => markdownToHtml(markdown), [markdown]);
const error = result.hasError ? (result.error ?? null) : null; const error = result.hasError ? (result.error ?? null) : null;
// 💡 3. 沙箱暗黑模式自适应守卫（Sandbox Dark Mode Synchronizer）： // 💡 自适应大总管：以极高严谨度拼装明暗大闸，用标准换行切断粘连风险
// 根据宿主最外层的 HTML 是否包含 .dark 类名，动态向 iframe 注入对应的明暗模式 CSS 变量色轴
useEffect(() => { useEffect(() => {
const iframe = iframeRef.current; const iframe = iframeRef.current;
if (!iframe) return; if (!iframe) return;
const isDarkMode = document.documentElement.classList.contains('dark'); const isDarkMode = document.documentElement.classList.contains('dark');
const themeVariables = isDarkMode const themeVariables = isDarkMode
? `:root { ? `:root {
--md-bg: #090d16;
--md-foreground: #e6edf3; --md-foreground: #e6edf3;
--md-border: rgba(255,255,255,0.15); --md-border: rgba(255,255,255,0.15);
--md-code-bg: rgba(255,255,255,0.1); --md-code-bg: rgba(255,255,255,0.12);
--md-pre-bg: rgba(255,255,255,0.05); --md-pre-bg: rgba(255,255,255,0.04);
--md-muted: #8b949e; --md-muted: #8b949e;
--md-quote-line: rgba(255,255,255,0.25);
}` }`
: `:root { : `:root {
--md-bg: #ffffff;
--md-foreground: #1f2328; --md-foreground: #1f2328;
--md-border: rgba(128,128,128,0.2); --md-border: rgba(128,128,128,0.2);
--md-code-bg: rgba(128,128,128,0.08); --md-code-bg: rgba(128,128,128,0.08);
--md-pre-bg: rgba(128,128,128,0.04); --md-pre-bg: rgba(128,128,128,0.03);
--md-muted: #636c76; --md-muted: #4b5563;
--md-quote-line: rgba(128,128,128,0.3);
}`; }`;
// 💡 3. 核心大清洗：将全局基础树（html, body）与派生样式完全独立硬编码，杜绝任何语法踩踏
const baseGlobalStyles = `
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: var(--md-bg);
color: var(--md-foreground);
}
body {
padding: 16px;
box-sizing: border-box;
}
`;
iframe.srcdoc = `<!DOCTYPE html> iframe.srcdoc = `<!DOCTYPE html>
<html lang="zh"> <html lang="zh" style="background-color: ${isDarkMode ? '#090d16' : '#ffffff'};">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<style> <style>
${themeVariables}, ${themeVariables}
${PREVIEW_STYLES}, ${PREVIEW_STYLES}
body { margin: 0; background-color: transparent; } ${baseGlobalStyles}
</style> </style>
</head> </head>
<body class="markdown-body">${result.html}</body> <body class="markdown-body">${result.html}</body>
</html>`; </html>`;
}, [result.html, previewMode]); // 当切换预览模式或 HTML 改变时，自发刷新沙箱 }, [result.html, previewMode]);
const handleModeChange = useCallback( const handleModeChange = useCallback(
(newMode: MarkdownToHtmlPreviewMode) => { (newMode: MarkdownToHtmlPreviewMode) => {
@@ -159,10 +181,11 @@ export default function MarkdownToHtmlPage() {
title={t('pageTitle')} title={t('pageTitle')}
subtitle={t('pageSubtitle')} subtitle={t('pageSubtitle')}
icon={<Code className="h-4 w-4" />} icon={<Code className="h-4 w-4" />}
className="pb-1"
/> />
<div className="flex flex-col gap-4"> <div className="flex flex-col space-y-4">
{/* 工具集成控制护栏 */} {/* 工具集成控制中枢 */}
<div className="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center bg-secondary/40 rounded-xl border border-border/60 px-1.5 py-1.5 sm:h-12"> <div className="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center bg-secondary/40 rounded-xl border border-border/60 px-1.5 py-1.5 sm:h-12">
<SwitchButtonGroup <SwitchButtonGroup
value={previewMode} value={previewMode}
@@ -211,7 +234,10 @@ export default function MarkdownToHtmlPage() {
{/* 错误拦截提示框 */} {/* 错误拦截提示框 */}
{error && ( {error && (
<div className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-destructive text-xs font-semibold tracking-wide animate-in shake duration-300"> <div
role="alert"
className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-destructive text-xs font-semibold tracking-wide animate-in shake duration-300"
>
{error} {error}
</div> </div>
)} )}
@@ -219,13 +245,13 @@ export default function MarkdownToHtmlPage() {
{/* 主框架多栏联动排版轴 */} {/* 主框架多栏联动排版轴 */}
<div <div
className={cn( className={cn(
'grid gap-4 min-h-[460px] w-full', 'grid gap-4 min-h-[480px] w-full',
showInput && showPreview ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1', showInput && showPreview ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1',
)} )}
> >
{/* Markdown 输入翼终端 */} {/* Markdown 输入翼终端 */}
{showInput && ( {showInput && (
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col transition-all duration-200 focus-within:ring-1 focus-within:ring-ring focus-within:border-ring"> <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col transition-all duration-200 focus-within:ring-1 focus-within:ring-ring focus-within:border-ring animate-in fade-in">
<div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none"> <div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider"> <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
{t('inputLabel')} {t('inputLabel')}
@@ -238,14 +264,14 @@ export default function MarkdownToHtmlPage() {
value={markdown} value={markdown}
onChange={(e) => setMarkdown(e.target.value)} onChange={(e) => setMarkdown(e.target.value)}
placeholder={t('inputPlaceholder')} placeholder={t('inputPlaceholder')}
className="flex-1 min-h-[380px] p-4 bg-transparent font-mono text-xs leading-relaxed resize-none focus:outline-none text-foreground/90 select-text" className="flex-1 min-h-[390px] p-4 bg-transparent font-mono text-xs leading-relaxed resize-none focus:outline-none text-foreground/90 select-text"
/> />
</div> </div>
)} )}
{/* 实时 HTML/Iframe 预览翼终端 */} {/* 实时 HTML/Iframe 预览翼终端 */}
{showPreview && ( {showPreview && (
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col"> <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col animate-in fade-in">
<div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none"> <div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider"> <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
{(previewMode as string) === 'html' ? t('htmlOutputLabel') : t('previewLabel')} {(previewMode as string) === 'html' ? t('htmlOutputLabel') : t('previewLabel')}
@@ -265,14 +291,14 @@ export default function MarkdownToHtmlPage() {
<textarea <textarea
value={result.html} value={result.html}
readOnly readOnly
className="flex-1 min-h-[380px] p-4 font-mono text-xs leading-relaxed resize-none focus:outline-none bg-muted/30 dark:bg-muted/10 text-foreground/80 select-text" className="flex-1 min-h-[390px] p-4 font-mono text-xs leading-relaxed resize-none focus:outline-none bg-muted/30 dark:bg-muted/10 text-foreground/80 select-text"
/> />
) : ( ) : (
<div className="flex-1 p-4 min-h-[380px] overflow-auto bg-transparent"> <div className="flex-1 min-h-[390px] overflow-hidden bg-transparent">
<iframe <iframe
ref={iframeRef} ref={iframeRef}
title="markdown-preview" title="markdown-preview"
className="w-full h-full min-h-[350px] border-none bg-transparent" className="w-full h-full min-h-[360px] border-none bg-transparent"
/> />
</div> </div>
)} )}