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

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>
               )}