LingandRX
42d3fedbaa
* fix(ci): fix release workflow artifact upload issue - Split artifact upload into 3 separate steps (Chrome, Firefox, Source) - Update download steps to match new artifact names - Add if-no-files-found: error for better error handling - Fix Node.js 20 compatibility issue with upload-artifact@v4 glob pattern * docs: 更新 AGENTS.md，添加测试工具和翻译文件结构说明 * docs: 更新 AGENTS.md，完善 CI 步骤和存储键名格式说明 * fix: remove unnecessary animations from StorageCleaner page - Remove entrance animations (animate-in, fade-in, zoom-in) from all components - Remove scale effect (active:scale-[0.99]) from clean button - Remove transition effects (transition-all, transition-colors) from OptionItem, StorageOptionsGrid, AutoRefreshToggle - Remove bouncing animation from error icon - Remove pulsing animation from warning banner - Keep animate-spin on button loading spinner as functional indicator * fix: remove unnecessary animations from RightClickRestorer page * fix: remove all unnecessary animations from all pages - Remove dead code animations (animate-in, fade-in, slide-in, zoom-in, shake) from tailwindcss-animate plugin (not installed) - Remove decorative transition effects (transition-all, transition-colors) from all page components - Remove scale effects (active:scale-95) from buttons - Remove bounce animations (animate-bounce) from icons - Keep functional animate-spin on loading spinners as they provide essential loading feedback Affected pages: Dashboard, Timestamp, Jwt, JsonTools, Base64Converter, HtmlToMarkdown, MarkdownToHtml, QrCode, TextStatistics --------- Co-authored-by: Ubuntu <ubuntu@localhost.localdomain>
304 lines
11 KiB
TypeScript
304 lines
11 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { Download, Printer, Trash2 } from 'lucide-react';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
import CopyButton from '@/components/CopyButton';
|
|
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useStorageState } from '@/utils/useStorageState';
|
|
import type { MarkdownToHtmlPreviewMode } from '@/types/storage';
|
|
import {
|
|
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);
|
|
|
|
// 💡 规范回归：保持最纯净的通用选择器集合，内部变量全部交由全局 :root 驱动
|
|
const PREVIEW_STYLES = `
|
|
.markdown-body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
line-height: 1.6;
|
|
color: var(--md-foreground);
|
|
background-color: transparent;
|
|
font-size: 14px;
|
|
}
|
|
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
|
|
margin-top: 24px;
|
|
margin-bottom: 16px;
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
color: var(--md-foreground);
|
|
}
|
|
.markdown-body h1 { border-bottom: 1px solid var(--md-border); padding-bottom: 0.3em; font-size: 1.6em; }
|
|
.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; }
|
|
.markdown-body a { color: #3b82f6; text-decoration: none; }
|
|
.markdown-body a:hover { text-decoration: underline; }
|
|
.markdown-body code {
|
|
background-color: var(--md-code-bg);
|
|
border-radius: 4px;
|
|
font-size: 85%;
|
|
padding: 0.2em 0.4em;
|
|
font-family: Menlo, Consolas, monospace;
|
|
}
|
|
.markdown-body pre {
|
|
background-color: var(--md-pre-bg);
|
|
border-radius: 8px;
|
|
font-size: 85%;
|
|
line-height: 1.45;
|
|
overflow: auto;
|
|
padding: 16px;
|
|
margin: 0 0 16px;
|
|
border: 1px solid var(--md-border);
|
|
}
|
|
.markdown-body pre code {
|
|
background-color: transparent;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
.markdown-body blockquote {
|
|
border-left: 0.25em solid var(--md-quote-line);
|
|
color: var(--md-muted);
|
|
margin: 0 0 16px;
|
|
padding: 0 1em;
|
|
}
|
|
.markdown-body table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin-bottom: 16px;
|
|
font-size: 13px;
|
|
}
|
|
.markdown-body table th, .markdown-body table td {
|
|
border: 1px solid var(--md-border);
|
|
padding: 6px 13px;
|
|
}
|
|
.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); }
|
|
`;
|
|
|
|
export default function MarkdownToHtmlPage() {
|
|
const { t } = useLazyTranslation('markdownToHtml');
|
|
const [previewMode, setPreviewMode] = useStorageState(
|
|
'markdownToHtml/previewMode',
|
|
'split' as MarkdownToHtmlPreviewMode,
|
|
isValidPreviewMode,
|
|
);
|
|
const [markdown, setMarkdown] = useState(SAMPLE_MARKDOWN);
|
|
const iframeRef = useRef<HTMLIFrameElement>(null);
|
|
|
|
const result = useMemo(() => markdownToHtml(markdown), [markdown]);
|
|
const error = result.hasError ? (result.error ?? null) : null;
|
|
|
|
// 💡 自适应大总管：以极高严谨度拼装明暗大闸，用标准换行切断粘连风险
|
|
useEffect(() => {
|
|
const iframe = iframeRef.current;
|
|
if (!iframe) return;
|
|
|
|
const isDarkMode = document.documentElement.classList.contains('dark');
|
|
|
|
const themeVariables = isDarkMode
|
|
? `:root {
|
|
--md-bg: #090d16;
|
|
--md-foreground: #e6edf3;
|
|
--md-border: rgba(255,255,255,0.15);
|
|
--md-code-bg: rgba(255,255,255,0.12);
|
|
--md-pre-bg: rgba(255,255,255,0.04);
|
|
--md-muted: #8b949e;
|
|
--md-quote-line: rgba(255,255,255,0.25);
|
|
}`
|
|
: `:root {
|
|
--md-bg: #ffffff;
|
|
--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.03);
|
|
--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>
|
|
<html lang="zh" style="background-color: ${isDarkMode ? '#090d16' : '#ffffff'};">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
${themeVariables}
|
|
${PREVIEW_STYLES}
|
|
${baseGlobalStyles}
|
|
</style>
|
|
</head>
|
|
<body class="markdown-body">${result.html}</body>
|
|
</html>`;
|
|
}, [result.html, previewMode]);
|
|
|
|
const handleModeChange = useCallback(
|
|
(newMode: MarkdownToHtmlPreviewMode) => {
|
|
setPreviewMode(newMode);
|
|
},
|
|
[setPreviewMode],
|
|
);
|
|
|
|
const handleClear = useCallback(() => {
|
|
setMarkdown('');
|
|
}, []);
|
|
|
|
const handlePrint = useCallback(() => {
|
|
printHtml(result.html, t('pageTitle'));
|
|
}, [result.html, t]);
|
|
|
|
const handleDownload = useCallback(() => {
|
|
const doc = wrapHtmlDocument(result.html, t('pageTitle'));
|
|
downloadHtmlFile(doc, 'markdown-export.html');
|
|
}, [result.html, t]);
|
|
|
|
const showInput = previewMode !== 'preview';
|
|
const showPreview = previewMode !== 'html';
|
|
|
|
return (
|
|
<div className="p-4 w-full flex flex-col space-y-4 select-none">
|
|
<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">
|
|
<SwitchButtonGroup
|
|
value={previewMode}
|
|
options={[
|
|
{ value: 'split', label: t('splitMode') },
|
|
{ value: 'preview', label: t('previewMode') },
|
|
{ value: 'html', label: t('htmlMode') },
|
|
]}
|
|
onChange={handleModeChange}
|
|
size="small"
|
|
className="w-full sm:w-auto"
|
|
/>
|
|
|
|
<div className="flex gap-2 shrink-0">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleClear}
|
|
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10 border-input/60"
|
|
>
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|
{t('clear')}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handlePrint}
|
|
disabled={!result.html}
|
|
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
|
|
>
|
|
<Printer className="h-3.5 w-3.5" />
|
|
{t('print')}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleDownload}
|
|
disabled={!result.html}
|
|
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
|
|
>
|
|
<Download className="h-3.5 w-3.5" />
|
|
{t('download')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 错误拦截提示框 */}
|
|
{error && (
|
|
<div
|
|
role="alert"
|
|
className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-destructive text-xs font-semibold tracking-wide"
|
|
>
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* 主框架多栏联动排版轴 */}
|
|
<div
|
|
className={cn(
|
|
'grid gap-4 min-h-[480px] w-full',
|
|
showInput && showPreview ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1',
|
|
)}
|
|
>
|
|
{/* Markdown 输入翼终端 */}
|
|
{showInput && (
|
|
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col 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>
|
|
<textarea
|
|
value={markdown}
|
|
onChange={(e) => setMarkdown(e.target.value)}
|
|
placeholder={t('inputPlaceholder')}
|
|
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>
|
|
)}
|
|
|
|
{/* 实时 HTML/Iframe 预览翼终端 */}
|
|
{showPreview && (
|
|
<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-2">
|
|
<span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
|
|
{t('charCount', { count: result.htmlLength })}
|
|
</span>
|
|
<CopyButton
|
|
text={result.html}
|
|
className="h-6 w-6 rounded-md border text-muted-foreground"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{(previewMode as string) === 'html' ? (
|
|
<textarea
|
|
value={result.html}
|
|
readOnly
|
|
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 min-h-[390px] overflow-hidden bg-transparent">
|
|
<iframe
|
|
ref={iframeRef}
|
|
title="markdown-preview"
|
|
className="w-full h-full min-h-[360px] border-none bg-transparent"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|