From 9601afdd4939f7d8607d48ecf48cfe1cb188d57c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 22 May 2026 22:06:34 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20HtmlToMarkdown?=
 =?UTF-8?q?=20=E5=92=8C=20MarkdownToHtml=20=E9=A1=B5=E9=9D=A2=EF=BC=8C?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=20shadcn=20=E6=A0=B7=E5=BC=8F=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=89=93=E5=8D=B0=E4=B8=8E=E6=9A=97=E8=89=B2?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/HtmlToMarkdown/index.tsx | 106 ++++++++++------
 pages/MarkdownToHtml/index.tsx | 213 ++++++++++++++++++---------------
 utils/markdownToHtml.ts        |  16 ++-
 3 files changed, 200 insertions(+), 135 deletions(-)

diff --git a/pages/HtmlToMarkdown/index.tsx b/pages/HtmlToMarkdown/index.tsx
index 6070675..a2d2001 100644
--- a/pages/HtmlToMarkdown/index.tsx
+++ b/pages/HtmlToMarkdown/index.tsx
@@ -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>
               )}
diff --git a/pages/MarkdownToHtml/index.tsx b/pages/MarkdownToHtml/index.tsx
index a0e5ac0..3e9b346 100644
--- a/pages/MarkdownToHtml/index.tsx
+++ b/pages/MarkdownToHtml/index.tsx
@@ -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>
               )}
diff --git a/utils/markdownToHtml.ts b/utils/markdownToHtml.ts
index 7ba3508..50de09b 100644
--- a/utils/markdownToHtml.ts
+++ b/utils/markdownToHtml.ts
@@ -195,16 +195,17 @@ export function downloadHtmlFile(content: string, filename: string = 'export.htm
  * @param title - 打印窗口标题
  */
 export function printHtml(html: string, title: string = 'Markdown Preview'): void {
-  const printWindow = window.open('', '_blank', 'width=800,height=600');
+  const doc = wrapHtmlDocument(html, title);
+  const blob = new Blob([doc], { type: 'text/html;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+
+  const printWindow = window.open(url, '_blank', 'width=800,height=600');
   if (!printWindow) {
+    URL.revokeObjectURL(url);
     console.error('无法打开打印窗口，请检查浏览器弹窗拦截设置');
     return;
   }
 
-  const doc = wrapHtmlDocument(html, title);
-  printWindow.document.write(doc);
-  printWindow.document.close();
-
   // 等待样式加载完成后打印
   let printed = false;
   printWindow.onload = () => {
@@ -220,6 +221,11 @@ export function printHtml(html: string, title: string = 'Markdown Preview'): voi
       printWindow.print();
     }
   }, 500);
+
+  // 打印完成后释放 Blob URL（浏览器标签页关闭后也会自动回收）
+  setTimeout(() => {
+    URL.revokeObjectURL(url);
+  }, 60000);
 }
 
 /**