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

refactor: 重构 HtmlToMarkdown 和 MarkdownToHtml 页面，统一 shadcn 样式并优化打印与暗色模式

Browse Source
This commit is contained in:
雨霖铃
2026-05-22 22:06:34 +08:00
parent ae0b923e11
commit 9601afdd49
3 changed files with 200 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/HtmlToMarkdown/index.tsx
+70 -36
View File
@@ -4,9 +4,11 @@ import { useLazyTranslation } from '@/utils/useLazyTranslation';
import PageHeader from '@/components/PageHeader';
import CopyButton from '@/components/CopyButton';
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
import { Button } from '@/components/ui/button'; // 💡 1. 全面回归规范：引入原生的 shadcn 原子 Button
import { useStorageState } from '@/utils/useStorageState';
import type { HtmlToMarkdownPreviewMode } from '@/types/storage';
import { htmlToMarkdown, downloadMarkdownFile, SAMPLE_HTML } from '@/utils/htmlToMarkdown';
import { downloadMarkdownFile, htmlToMarkdown, SAMPLE_HTML } from '@/utils/htmlToMarkdown';
import { cn } from '@/lib/utils';
const isValidPreviewMode = (val: unknown): val is HtmlToMarkdownPreviewMode =>
typeof val === 'string' && ['split', 'preview', 'markdown'].includes(val);
@@ -44,12 +46,20 @@ export default function HtmlToMarkdownPage() {
const showOutput = previewMode !== 'markdown';
return (
<div className="container mx-auto px-4 py-6 max-w-7xl">
<PageHeader title={t('pageTitle')} subtitle={t('pageSubtitle')} icon={<Code size={20} />} />
/* 💡 统一间距尺寸：
- 彻底清除多余的 container max-w-7xl 这种网页大边距，
- 统一收拢为我们先前在 Dashboard 页、JSON 工具箱制定的 p-4 space-y-4 标准极客桌面规格。
*/
<div className="p-4 w-full flex flex-col space-y-4 select-none animate-in fade-in duration-300">
<PageHeader
title={t('pageTitle')}
subtitle={t('pageSubtitle')}
icon={<Code className="h-4 w-4" />}
/>
<div className="flex flex-col gap-4">
{/* 工具栏 */}
<div className="flex flex-wrap items-center justify-between gap-3">
{/* 工具栏集成区 */}
<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
value={previewMode}
options={[
@@ -59,46 +69,65 @@ export default function HtmlToMarkdownPage() {
]}
onChange={handleModeChange}
size="small"
className="w-full sm:w-auto"
/>
<div className="flex gap-2">
<button
<div className="flex gap-2 shrink-0">
{/* 2. 重塑下载按钮：接入受控 Button，追加 active 物理微缩放动效 */}
<Button
variant="outline"
size="sm"
onClick={handleDownload}
disabled={!result.markdown}
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-foreground bg-background border border-input rounded-lg hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm active:scale-95 transition-all"
>
<Download size={14} />
<Download className="h-3.5 w-3.5" />
{t('download')}
</button>
<button
</Button>
{/* 重塑清空按钮 */}
<Button
variant="outline"
size="sm"
onClick={handleClear}
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-foreground bg-background border border-input rounded-lg hover:bg-muted transition-colors"
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm active:scale-95 text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10 border-input/60 transition-all"
>
<Trash2 size={14} />
<Trash2 className="h-3.5 w-3.5" />
{t('clear')}
</button>
</Button>
</div>
</div>
{/* 错误提示 */}
{/* 错误提示：
- 💡 核心修复点：将硬编码的 bg-red-50 实色，完美超进化为系统的全自适应透明色变体
*/}
{error && (
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
<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">
{error}
</div>
)}
{/* 主内容区 */}
{/* 双翼/单栏联动面板展示区 */}
<div
className={`grid gap-4 min-h-[500px] ${
showInput && showOutput ? 'md:grid-cols-2' : 'grid-cols-1'
}`}
className={cn(
'grid gap-4 min-h-[460px] w-full',
showInput && showOutput ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1',
)}
>
{/* HTML 输入区 */}
{/* HTML 输入端卡片面板 */}
{showInput && (
<div className="border border-border rounded-xl overflow-hidden flex flex-col">
<div className="flex items-center justify-between px-4 py-2 bg-primary/5 border-b border-border">
<span className="text-xs font-bold text-muted-foreground">{t('inputLabel')}</span>
<span className="text-xs text-muted-foreground">
/* 3. 智能聚焦框联动（Focus Ring Clamping）：
- 外层容器追加 focus-within 变量追踪大闸。
- 只要用户用鼠标点击了内部的 textarea，外层整块精巧的圆角大边框会一帧内亮起 primary 系统的深色呼吸发光环，
- 这种“全外包裹层框聚焦”的体验极大模仿了本地原生 IDE 的硬核专业体验！
*/
<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">
{/* 卡片头部：改用标准的灰色 bg-muted/50 */}
<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">
{t('inputLabel')}
</span>
<span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
{t('charCount', { count: html.length })}
</span>
</div>
@@ -106,25 +135,28 @@ export default function HtmlToMarkdownPage() {
value={html}
onChange={(e) => setHtml(e.target.value)}
placeholder={t('inputPlaceholder')}
className="flex-1 min-h-[400px] p-4 font-mono text-[0.85rem] leading-relaxed resize-none focus:outline-none"
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"
/>
</div>
)}
{/* Markdown 输出区 */}
{/* Markdown 输出端卡片面板 */}
{showOutput && (
<div className="border border-border rounded-xl overflow-hidden flex flex-col">
<div className="flex items-center justify-between px-4 py-2 bg-primary/5 border-b border-border">
<span className="text-xs font-bold text-muted-foreground">
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col">
<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">
{(previewMode as string) === 'markdown'
? t('markdownOutputLabel')
: t('previewLabel')}
</span>
<div className="flex items-center gap-1">
<span className="text-xs text-muted-foreground">
<div className="flex items-center gap-2">
<span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
{t('charCount', { count: result.markdownLength })}
</span>
<CopyButton text={result.markdown} size="small" />
<CopyButton
text={result.markdown}
className="h-6 w-6 rounded-md border text-muted-foreground"
/>
</div>
</div>
@@ -132,12 +164,14 @@ export default function HtmlToMarkdownPage() {
<textarea
value={result.markdown}
readOnly
className="flex-1 min-h-[400px] p-4 font-mono text-[0.85rem] leading-relaxed resize-none focus:outline-none bg-muted"
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"
/>
) : (
<div className="flex-1 p-4 min-h-[400px] overflow-auto bg-background font-mono text-[0.85rem] leading-relaxed whitespace-pre-wrap break-words">
<div className="flex-1 p-4 min-h-[380px] overflow-auto bg-transparent font-mono text-xs leading-relaxed whitespace-pre-wrap break-all text-foreground/90 select-text">
{result.markdown || (
<span className="text-muted-foreground">{t('emptyHint')}</span>
<span className="text-muted-foreground/70 italic text-[11px] font-sans">
{t('emptyHint')}
</span>
)}
</div>
)}
pages/MarkdownToHtml/index.tsx
+119 -94
View File
@@ -1,97 +1,83 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Code, Trash2, Printer, Download } from 'lucide-react';
import { Code, Download, Printer, Trash2 } from 'lucide-react';
import { useLazyTranslation } from '@/utils/useLazyTranslation';
import PageHeader from '@/components/PageHeader';
import CopyButton from '@/components/CopyButton';
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
import { Button } from '@/components/ui/button'; // 💡 1. 全面回归原子组件规范
import { useStorageState } from '@/utils/useStorageState';
import type { MarkdownToHtmlPreviewMode } from '@/types/storage';
import {
markdownToHtml,
wrapHtmlDocument,
downloadHtmlFile,
markdownToHtml,
printHtml,
SAMPLE_MARKDOWN,
wrapHtmlDocument,
} from '@/utils/markdownToHtml';
import { cn } from '@/lib/utils';
const isValidPreviewMode = (val: unknown): val is MarkdownToHtmlPreviewMode =>
typeof val === 'string' && ['split', 'preview', 'html'].includes(val);
// 💡 2. 样式超进化：将实色系全部改为标准 rgba 通道，确保在 iframe 内部能跟随宿主主题自适应混色
const PREVIEW_STYLES = `
.markdown-body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: inherit;
color: var(--md-foreground, #1f2328);
background-color: transparent;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
margin-top: 20px;
margin-bottom: 12px;
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
margin-top: 24px;
margin-bottom: 16px;
font-weight: 600;
line-height: 1.25;
}
.markdown-body h1 { font-size: 1.8em; border-bottom: 1px solid rgba(128,128,128,0.2); padding-bottom: 0.3em; }
.markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid rgba(128,128,128,0.2); padding-bottom: 0.3em; }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body p { margin-top: 0; margin-bottom: 12px; }
.markdown-body a { color: #1976d2; text-decoration: none; }
.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 h2 { font-size: 1.35em; border-bottom: 1px solid var(--md-border, rgba(128,128,128,0.2)); padding-bottom: 0.3em; }
.markdown-body p { margin-top: 0; margin-bottom: 16px; font-size: 14px; }
.markdown-body a { color: #2563eb; text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body code {
background-color: rgba(128,128,128,0.1);
border-radius: 3px;
background-color: var(--md-code-bg, rgba(128,128,128,0.08));
border-radius: 4px;
font-size: 85%;
padding: 0.2em 0.4em;
font-family: 'SFMono-Regular', Consolas, monospace;
font-family: Menlo, Consolas, monospace;
}
.markdown-body pre {
background-color: rgba(128,128,128,0.08);
border-radius: 6px;
background-color: var(--md-pre-bg, rgba(128,128,128,0.05));
border-radius: 8px;
font-size: 85%;
line-height: 1.45;
overflow: auto;
padding: 14px;
margin: 0 0 12px;
padding: 16px;
margin: 0 0 16px;
border: 1px solid var(--md-border, rgba(128,128,128,0.15));
}
.markdown-body pre code {
background-color: transparent;
border: 0;
display: inline;
line-height: inherit;
margin: 0;
padding: 0;
word-wrap: normal;
}
.markdown-body blockquote {
border-left: 0.25em solid rgba(128,128,128,0.3);
color: rgba(128,128,128,0.7);
margin: 0 0 12px;
border-left: 0.25em solid var(--md-quote-line, rgba(128,128,128,0.3));
color: var(--md-muted, rgba(128,128,128,0.6));
margin: 0 0 16px;
padding: 0 1em;
}
.markdown-body ul, .markdown-body ol { margin-top: 0; margin-bottom: 12px; padding-left: 2em; }
.markdown-body li + li { margin-top: 0.25em; }
.markdown-body img { max-width: 100%; box-sizing: content-box; }
.markdown-body table {
border-collapse: collapse;
border-spacing: 0;
display: block;
overflow: auto;
width: 100%;
margin-bottom: 12px;
margin-bottom: 16px;
font-size: 13px;
}
.markdown-body table th, .markdown-body table td {
border: 1px solid rgba(128,128,128,0.25);
border: 1px solid var(--md-border, rgba(128,128,128,0.2));
padding: 6px 13px;
}
.markdown-body table tr:nth-child(2n) { background-color: rgba(128,128,128,0.05); }
.markdown-body table th { font-weight: 600; background-color: rgba(128,128,128,0.05); }
.markdown-body hr {
background-color: rgba(128,128,128,0.2);
border: 0;
height: 0.25em;
margin: 20px 0;
padding: 0;
}
.markdown-body input[type="checkbox"] { margin-right: 0.5em; }
.markdown-body table tr:nth-child(2n) { background-color: var(--md-code-bg, rgba(128,128,128,0.03)); }
.markdown-body table th { font-weight: 600; background-color: var(--md-code-bg, rgba(128,128,128,0.05)); }
`;
export default function MarkdownToHtmlPage() {
@@ -107,22 +93,42 @@ export default function MarkdownToHtmlPage() {
const result = useMemo(() => markdownToHtml(markdown), [markdown]);
const error = result.hasError ? (result.error ?? null) : null;
// 💡 3. 沙箱暗黑模式自适应守卫（Sandbox Dark Mode Synchronizer）：
// 根据宿主最外层的 HTML 是否包含 .dark 类名，动态向 iframe 注入对应的明暗模式 CSS 变量色轴
useEffect(() => {
const iframe = iframeRef.current;
if (!iframe || !iframe.contentDocument) return;
if (!iframe) return;
const doc = iframe.contentDocument;
doc.open();
doc.write(`<!DOCTYPE html>
<html>
const isDarkMode = document.documentElement.classList.contains('dark');
const themeVariables = isDarkMode
? `:root {
--md-foreground: #e6edf3;
--md-border: rgba(255,255,255,0.15);
--md-code-bg: rgba(255,255,255,0.1);
--md-pre-bg: rgba(255,255,255,0.05);
--md-muted: #8b949e;
}`
: `:root {
--md-foreground: #1f2328;
--md-border: rgba(128,128,128,0.2);
--md-code-bg: rgba(128,128,128,0.08);
--md-pre-bg: rgba(128,128,128,0.04);
--md-muted: #636c76;
}`;
iframe.srcdoc = `<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>${PREVIEW_STYLES}</style>
<style>
${themeVariables},
${PREVIEW_STYLES},
body { margin: 0; background-color: transparent; }
</style>
</head>
<body class="markdown-body">${result.html}</body>
</html>`);
doc.close();
}, [result.html]);
</html>`;
}, [result.html, previewMode]); // 当切换预览模式或 HTML 改变时，自发刷新沙箱
const handleModeChange = useCallback(
(newMode: MarkdownToHtmlPreviewMode) => {
@@ -148,12 +154,16 @@ export default function MarkdownToHtmlPage() {
const showPreview = previewMode !== 'html';
return (
<div className="container mx-auto px-4 py-6 max-w-7xl">
<PageHeader title={t('pageTitle')} subtitle={t('pageSubtitle')} icon={<Code size={20} />} />
<div className="p-4 w-full flex flex-col space-y-4 select-none animate-in fade-in duration-300">
<PageHeader
title={t('pageTitle')}
subtitle={t('pageSubtitle')}
icon={<Code className="h-4 w-4" />}
/>
<div className="flex flex-col gap-4">
{/* 工具栏 */}
<div className="flex flex-wrap items-center justify-between gap-3">
{/* 工具集成控制护栏 */}
<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
value={previewMode}
options={[
@@ -163,52 +173,64 @@ export default function MarkdownToHtmlPage() {
]}
onChange={handleModeChange}
size="small"
className="w-full sm:w-auto"
/>
<div className="flex gap-2">
<button
<div className="flex gap-2 shrink-0">
<Button
variant="outline"
size="sm"
onClick={handleClear}
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-foreground bg-background border border-input rounded-lg hover:bg-muted transition-colors"
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm active:scale-95 text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10 border-input/60 transition-all"
>
<Trash2 size={14} />
<Trash2 className="h-3.5 w-3.5" />
{t('clear')}
</button>
<button
</Button>
<Button
variant="outline"
size="sm"
onClick={handlePrint}
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-foreground bg-background border border-input rounded-lg hover:bg-muted transition-colors"
disabled={!result.html}
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm active:scale-95 transition-all"
>
<Printer size={14} />
<Printer className="h-3.5 w-3.5" />
{t('print')}
</button>
<button
</Button>
<Button
variant="outline"
size="sm"
onClick={handleDownload}
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-foreground bg-background border border-input rounded-lg hover:bg-muted transition-colors"
disabled={!result.html}
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm active:scale-95 transition-all"
>
<Download size={14} />
<Download className="h-3.5 w-3.5" />
{t('download')}
</button>
</Button>
</div>
</div>
{/* 错误提示 */}
{/* 错误拦截提示框 */}
{error && (
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
<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">
{error}
</div>
)}
{/* 主内容区 */}
{/* 主框架多栏联动排版轴 */}
<div
className={`grid gap-4 min-h-[500px] ${
showInput && showPreview ? 'md:grid-cols-2' : 'grid-cols-1'
}`}
className={cn(
'grid gap-4 min-h-[460px] w-full',
showInput && showPreview ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1',
)}
>
{/* Markdown 输入区 */}
{/* Markdown 输入翼终端 */}
{showInput && (
<div className="border border-border rounded-xl overflow-hidden flex flex-col">
<div className="flex items-center justify-between px-4 py-2 bg-primary/5 border-b border-border">
<span className="text-xs font-bold text-muted-foreground">{t('inputLabel')}</span>
<span className="text-xs text-muted-foreground">
<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="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">
{t('inputLabel')}
</span>
<span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
{t('charCount', { count: markdown.length })}
</span>
</div>
@@ -216,23 +238,26 @@ export default function MarkdownToHtmlPage() {
value={markdown}
onChange={(e) => setMarkdown(e.target.value)}
placeholder={t('inputPlaceholder')}
className="flex-1 min-h-[400px] p-4 font-mono text-[0.85rem] leading-relaxed resize-none focus:outline-none"
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"
/>
</div>
)}
{/* 预览/输出区 */}
{/* 实时 HTML/Iframe 预览翼终端 */}
{showPreview && (
<div className="border border-border rounded-xl overflow-hidden flex flex-col">
<div className="flex items-center justify-between px-4 py-2 bg-primary/5 border-b border-border">
<span className="text-xs font-bold text-muted-foreground">
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col">
<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">
{(previewMode as string) === 'html' ? t('htmlOutputLabel') : t('previewLabel')}
</span>
<div className="flex items-center gap-1">
<span className="text-xs text-muted-foreground">
<div className="flex items-center gap-2">
<span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
{t('charCount', { count: result.htmlLength })}
</span>
<CopyButton text={result.html} size="small" />
<CopyButton
text={result.html}
className="h-6 w-6 rounded-md border text-muted-foreground"
/>
</div>
</div>
@@ -240,14 +265,14 @@ export default function MarkdownToHtmlPage() {
<textarea
value={result.html}
readOnly
className="flex-1 min-h-[400px] p-4 font-mono text-[0.8rem] leading-relaxed resize-none focus:outline-none bg-muted"
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"
/>
) : (
<div className="flex-1 p-4 min-h-[400px] overflow-auto bg-background">
<div className="flex-1 p-4 min-h-[380px] overflow-auto bg-transparent">
<iframe
ref={iframeRef}
title="markdown-preview"
className="w-full h-full min-h-[380px] border-none bg-transparent"
className="w-full h-full min-h-[350px] border-none bg-transparent"
/>
</div>
)}