feat: 添加代码语法高亮功能和 HTML 格式化依赖

- 集成 react-syntax-highlighter 实现代码高亮显示
  - 新增 code-highlighter UI 组件和 syntax-helpers 工具
  - 添加 HTML/XML 格式化相关 Rust 依赖(minify-html、markup_fmt 等)
  - 在开发指南中整合 Rust-TS 跨语言命名规范
  - 移除冗余的 Tauri_Naming_Conventions.md 文档
  - 更新 Claude Code 配置添加工具命令权限

src/components/features/HtmlFormatter/HtmlFormatterPage.tsx

@@ -3,7 +3,8 @@ import { invoke } from '@tauri-apps/api/core';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Copy, Check, FileCode, Sparkles, Minimize2, CheckCircle2, XCircle, Upload } from 'lucide-react';
+import { CodeHighlighter } from '@/components/ui/code-highlighter';
+import { Copy, Check, FileCode, Sparkles, Minimize2, CheckCircle2, XCircle, Upload, ChevronLeft, ChevronRight } from 'lucide-react';
 import type { HtmlFormatConfig, HtmlFormatResult, HtmlValidateResult } from '@/types/html';
 
 export function HtmlFormatterPage() {
@@ -16,6 +17,7 @@ export function HtmlFormatterPage() {
   });
   const [copied, setCopied] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
+  const [isInputCollapsed, setIsInputCollapsed] = useState(false);
 
   // 监听输入变化，自动验证
   useEffect(() => {
@@ -58,6 +60,8 @@ export function HtmlFormatterPage() {
 
       if (result.success) {
         setOutput(result.result);
+        // 格式化成功后自动收起输入区域
+        setIsInputCollapsed(true);
       } else {
         setOutput(result.error || '格式化失败');
       }
@@ -187,8 +191,29 @@ export function HtmlFormatterPage() {
           </Card>
 
           {/* 输入输出区域 */}
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 relative">
+            {/* 收起/展开切换按钮 */}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setIsInputCollapsed(!isInputCollapsed)}
+              className="absolute left-1/2 -translate-x-1/2 -top-3 z-10 gap-1 shadow-md"
+            >
+              {isInputCollapsed ? (
+                <>
+                  <ChevronRight className="w-4 h-4" />
+                  显示输入
+                </>
+              ) : (
+                <>
+                  <ChevronLeft className="w-4 h-4" />
+                  隐藏输入
+                </>
+              )}
+            </Button>
+
             {/* 输入区域 */}
+            {!isInputCollapsed && (
             <Card>
               <CardHeader>
                 <div className="flex items-center justify-between">
@@ -288,9 +313,10 @@ export function HtmlFormatterPage() {
                 </div>
               </CardContent>
             </Card>
+            )}
 
             {/* 输出区域 */}
-            <Card>
+            <Card className={isInputCollapsed ? 'lg:col-span-2' : ''}>
               <CardHeader>
                 <div className="flex items-center justify-between">
                   <div>
@@ -320,15 +346,14 @@ export function HtmlFormatterPage() {
                 </div>
               </CardHeader>
               <CardContent>
-                <div className="relative">
-                  <pre className="w-full h-96 p-4 font-mono text-sm bg-muted rounded-lg overflow-auto">
-                    {output || (
-                      <span className="text-muted-foreground">
-                        格式化结果将显示在这里...
-                      </span>
-                    )}
-                  </pre>
-                </div>
+                <CodeHighlighter
+                  code={output}
+                  language="html"
+                  className="w-full"
+                  maxHeight="24rem"
+                  showLineNumbers={true}
+                  wrapLongLines={false}
+                />
 
                 {/* 统计信息 */}
                 {output && (