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/XmlFormatter/XmlFormatterPage.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 { XmlFormatConfig, XmlFormatResult, XmlValidateResult } from '@/types/xml';
 
 export function XmlFormatterPage() {
@@ -16,6 +17,7 @@ export function XmlFormatterPage() {
   });
   const [copied, setCopied] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
+  const [isInputCollapsed, setIsInputCollapsed] = useState(false);
 
   useEffect(() => {
     if (input.trim()) {
@@ -47,6 +49,8 @@ export function XmlFormatterPage() {
       const result = await invoke<XmlFormatResult>('format_xml', { input, config });
       if (result.success) {
         setOutput(result.result);
+        // 格式化成功后自动收起输入区域
+        setIsInputCollapsed(true);
       } else {
         setOutput(result.error || '格式化失败');
       }
@@ -158,7 +162,28 @@ export function XmlFormatterPage() {
             </CardContent>
           </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">
@@ -230,8 +255,9 @@ export function XmlFormatterPage() {
                 </div>
               </CardContent>
             </Card>
+            )}
 
-            <Card>
+            <Card className={isInputCollapsed ? 'lg:col-span-2' : ''}>
               <CardHeader>
                 <div className="flex items-center justify-between">
                   <div>
@@ -256,9 +282,14 @@ export function XmlFormatterPage() {
                 </div>
               </CardHeader>
               <CardContent>
-                <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>
+                <CodeHighlighter
+                  code={output}
+                  language="xml"
+                  className="w-full"
+                  maxHeight="24rem"
+                  showLineNumbers={true}
+                  wrapLongLines={false}
+                />
                 {output && (
                   <div className="flex gap-4 mt-4 text-sm text-muted-foreground">
                     <span>字符数: {output.length}</span>