shenjianZ/tauri-shadcn-vite-project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加 HTML、XML 和多语言代码格式化功能

Browse Source 
新增三个格式化工具（HTML/XML/代码），支持美化和压缩模式。
  修复 XML 验证器无法正确解析带属性标签的问题。
  修复代码中未使用变量的警告，优化 HTML script/style 标签处理逻辑。
This commit is contained in:
shenjianZ
2026-02-10 20:24:21 +08:00
parent 825b650542
commit bf5d056811
26 changed files with 3199 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

318
src/components/features/CodeFormatter/CodeFormatterPage.tsx Normal file
View File

@@ -0,0 +1,318 @@
import { useState, useCallback, useEffect } from 'react';
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, Code, Sparkles, CheckCircle2, XCircle, Upload } from 'lucide-react';
import type { CodeFormatConfig, CodeFormatResult, CodeValidateResult, CodeLanguage } from '@/types/code';
const LANGUAGES: { value: CodeLanguage; label: string }[] = [
{ value: 'java', label: 'Java' },
{ value: 'cpp', label: 'C++' },
{ value: 'rust', label: 'Rust' },
{ value: 'python', label: 'Python' },
{ value: 'sql', label: 'SQL' },
{ value: 'javascript', label: 'JavaScript' },
{ value: 'typescript', label: 'TypeScript' },
{ value: 'html', label: 'HTML' },
{ value: 'css', label: 'CSS' },
{ value: 'json', label: 'JSON' },
{ value: 'xml', label: 'XML' },
];
export function CodeFormatterPage() {
const [input, setInput] = useState('');
const [output, setOutput] = useState('');
const [validation, setValidation] = useState<CodeValidateResult | null>(null);
const [config, setConfig] = useState<CodeFormatConfig>({
language: 'javascript',
indent: 4,
useTabs: false,
mode: 'pretty',
});
const [copied, setCopied] = useState(false);
const [isProcessing, setIsProcessing] = useState(false);
useEffect(() => {
if (input.trim()) {
validateCode();
} else {
setValidation(null);
}
}, [input, config.language]);
const validateCode = useCallback(async () => {
if (!input.trim()) {
setValidation(null);
return;
}
try {
const result = await invoke<CodeValidateResult>('validate_code', {
input,
language: config.language,
});
setValidation(result);
} catch (error) {
console.error('验证失败:', error);
}
}, [input, config.language]);
const formatCode = useCallback(async () => {
if (!input.trim()) return;
setIsProcessing(true);
try {
const result = await invoke<CodeFormatResult>('format_code', {
input,
config,
});
if (result.success) {
setOutput(result.result);
} else {
setOutput(result.error || '格式化失败');
}
} catch (error) {
console.error('格式化失败:', error);
setOutput('错误: ' + String(error));
} finally {
setIsProcessing(false);
}
}, [input, config]);
const copyToClipboard = useCallback(async () => {
if (!output) return;
try {
await navigator.clipboard.writeText(output);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (error) {
console.error('复制失败:', error);
}
}, [output]);
const clearInput = useCallback(() => {
setInput('');
setOutput('');
setValidation(null);
}, []);
const loadExample = useCallback(() => {
const examples: Record<CodeLanguage, string> = {
javascript: 'function test(){const x=1;return x*2;}',
typescript: 'function test():number{const x:number=1;return x*2;}',
java: 'public class Test{public int test(){int x=1;return x*2;}}',
cpp: 'int test(){int x=1;return x*2;}',
rust: 'fn test()->i32{let x=1;x*2}',
python: 'def test():\n\tx=1\n\treturn x*2',
sql: 'SELECT*FROM users WHERE id=1',
html: '<div><span>test</span></div>',
css: '.test{color:red;font-size:14px}',
json: '{"name":"test","value":123}',
xml: '<root><item>test</item></root>',
};
setInput(examples[config.language] || examples.javascript);
}, [config.language]);
return (
<div className="flex flex-col h-screen bg-background">
<header className="border-b bg-background/95 backdrop-blur flex-shrink-0">
<div className="container mx-auto px-4 py-4">
<div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => window.history.back()}>
← 返回
</Button>
<div className="flex items-center gap-2">
<Code className="w-6 h-6 text-primary" />
<h1 className="text-xl font-bold">代码格式化工具</h1>
</div>
</div>
</div>
</header>
<main className="flex-1 container mx-auto px-4 py-6 overflow-y-auto">
<div className="max-w-6xl mx-auto space-y-6">
<Card>
<CardHeader>
<CardTitle className="text-lg">配置选项</CardTitle>
<CardDescription>自定义代码格式化行为</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex flex-wrap items-center gap-4">
<label className="text-sm font-medium">编程语言:</label>
<div className="flex flex-wrap gap-1">
{LANGUAGES.map((lang) => (
<Button
key={lang.value}
size="sm"
variant={config.language === lang.value ? 'default' : 'outline'}
onClick={() => setConfig({ ...config, language: lang.value })}
>
{lang.label}
</Button>
))}
</div>
</div>
<div className="flex flex-wrap items-center gap-6">
<div className="flex items-center gap-3">
<label className="text-sm font-medium">缩进:</label>
<div className="flex gap-1">
{[2, 4, 8].map((spaces) => (
<Button
key={spaces}
size="sm"
variant={config.indent === spaces ? 'default' : 'outline'}
onClick={() => setConfig({ ...config, indent: spaces })}
>
{spaces} 空格
</Button>
))}
</div>
</div>
<div className="flex items-center gap-3">
<label className="text-sm font-medium">使用 Tab:</label>
<Button
size="sm"
variant={config.useTabs ? 'default' : 'outline'}
onClick={() => setConfig({ ...config, useTabs: !config.useTabs })}
>
{config.useTabs ? '开启' : '关闭'}
</Button>
</div>
</div>
</div>
</CardContent>
</Card>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle className="text-lg">输入代码</CardTitle>
<CardDescription>粘贴或输入代码</CardDescription>
</div>
<div className="flex gap-2">
<Button size="sm" variant="outline" onClick={loadExample}>
<Upload className="w-4 h-4 mr-1" />
示例
</Button>
{input && (
<Button size="sm" variant="ghost" onClick={clearInput}>
清空
</Button>
)}
</div>
</div>
</CardHeader>
<CardContent>
<div className="relative">
<textarea
value={input}
onChange={(e) => setInput(e.target.value)}
className="w-full h-96 p-4 font-mono text-sm bg-muted rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-primary"
placeholder={`在此输入 ${LANGUAGES.find(l => l.value === config.language)?.label || '代码'}...`}
spellCheck={false}
/>
{validation && (
<div className="absolute top-2 right-2">
{validation.isValid ? (
<Badge variant="default" className="gap-1 bg-green-500 hover:bg-green-600">
<CheckCircle2 className="w-3 h-3" />
有效
</Badge>
) : (
<Badge variant="destructive" className="gap-1">
<XCircle className="w-3 h-3" />
无效
</Badge>
)}
</div>
)}
</div>
{validation && !validation.isValid && validation.errorMessage && (
<div className="mt-3 p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
<p className="text-sm text-destructive font-medium">{validation.errorMessage}</p>
</div>
)}
<div className="flex gap-2 mt-4">
<Button
onClick={formatCode}
disabled={!input.trim() || isProcessing}
className="flex-1 gap-2"
>
{isProcessing ? (
<>
<Sparkles className="w-4 h-4 animate-spin" />
处理中...
</>
) : (
<>
<Sparkles className="w-4 h-4" />
格式化
</>
)}
</Button>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle className="text-lg">格式化结果</CardTitle>
<CardDescription>格式化后的代码</CardDescription>
</div>
{output && (
<Button size="sm" variant="outline" onClick={copyToClipboard} className="gap-2">
{copied ? (
<>
<Check className="w-4 h-4" />
已复制
</>
) : (
<>
<Copy className="w-4 h-4" />
复制
</>
)}
</Button>
)}
</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>
{output && (
<div className="flex gap-4 mt-4 text-sm text-muted-foreground">
<span>字符数: {output.length}</span>
<span>行数: {output.split('\n').length}</span>
</div>
)}
</CardContent>
</Card>
</div>
<Card>
<CardHeader>
<CardTitle>使用说明</CardTitle>
</CardHeader>
<CardContent className="space-y-2 text-sm text-muted-foreground">
<p>1. 选择编程语言</p>
<p>2. 在左侧输入框中粘贴或输入代码</p>
<p>3. 配置缩进选项：空格数或使用 Tab</p>
<p>4. 点击"格式化"按钮美化代码</p>
<p>5. 点击"复制"按钮将结果复制到剪贴板</p>
<p className="text-xs text-muted-foreground">注意：此工具提供基础格式化功能，复杂代码可能需要专业格式化工具</p>
</CardContent>
</Card>
</div>
</main>
</div>
);
}