first commit

2026-01-30 16:57:44 +08:00
commit 3d175d75af
119 changed files with 35834 additions and 0 deletions
--- a/app/csv-json/page.tsx
+++ b/app/csv-json/page.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { useState } from "react";
+import { FileSpreadsheet, Copy, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { toast } from "sonner";
+
+export default function CsvJsonPage() {
+  const [input, setInput] = useState("");
+  const [output, setOutput] = useState("");
+
+  const copyToClipboard = async (text: string) => {
+    if (!text) return;
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success("已复制到剪贴板");
+    } catch {
+      toast.error("复制失败");
+    }
+  };
+
+  const csvToJson = () => {
+    try {
+      if (!input.trim()) return;
+      const lines = input.trim().split('\n');
+      if (lines.length < 2) {
+        toast.error("请输入至少包含标题和一行数据的 CSV");
+        return;
+      }
+      
+      const headers = lines[0].split(',').map(h => h.trim());
+      const result = lines.slice(1).map(line => {
+        const values = line.split(',');
+        const obj: any = {};
+        headers.forEach((header, i) => {
+          obj[header] = values[i]?.trim() || "";
+        });
+        return obj;
+      });
+      
+      setOutput(JSON.stringify(result, null, 2));
+      toast.success("转换成功");
+    } catch {
+      toast.error("CSV 格式错误");
+    }
+  };
+
+  const jsonToCsv = () => {
+    try {
+      if (!input.trim()) return;
+      const data = JSON.parse(input);
+      if (!Array.isArray(data) || data.length === 0) {
+        toast.error("JSON 必须是包含对象的数组");
+        return;
+      }
+      
+      const headers = Object.keys(data[0]);
+      const csvLines = [
+        headers.join(','),
+        ...data.map(row => headers.map(h => row[h]).join(','))
+      ];
+      
+      setOutput(csvLines.join('\n'));
+      toast.success("转换成功");
+    } catch {
+      toast.error("JSON 格式错误或不是对象数组");
+    }
+  };
+
+  const clearAll = () => {
+    setInput("");
+    setOutput("");
+  };
+
+  return (
+    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
+      <div className="flex items-center space-x-4 border-b pb-4">
+        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-linear-to-br from-green-500 to-emerald-600 shadow-lg">
+          <FileSpreadsheet className="h-6 w-6 text-white" />
+        </div>
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">CSV / JSON 互转</h1>
+          <p className="text-muted-foreground">表格数据与 JSON 格式相互转换</p>
+        </div>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-base font-medium">输入区域</CardTitle>
+            <Button variant="ghost" size="sm" onClick={clearAll} className="text-destructive">
+               <Trash2 className="h-4 w-4" />
+            </Button>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <Textarea
+              placeholder="请在此粘贴 CSV (逗号分隔) 或 JSON 数组..."
+              className="min-h-75 font-mono text-sm resize-none bg-muted/30"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+            />
+            <div className="flex gap-4">
+               <Button onClick={csvToJson} className="flex-1 gap-2">
+                 CSV &rarr; JSON
+               </Button>
+               <Button onClick={jsonToCsv} variant="outline" className="flex-1 gap-2">
+                 JSON &rarr; CSV
+               </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-base font-medium">输出结果</CardTitle>
+            <Button variant="ghost" size="sm" onClick={() => copyToClipboard(output)} disabled={!output}>
+               <Copy className="h-4 w-4" />
+            </Button>
+          </CardHeader>
+          <CardContent>
+            <Textarea
+              readOnly
+              placeholder="转换结果将显示在这里..."
+              className="min-h-87 font-mono text-sm resize-none bg-muted/30"
+              value={output}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm">使用说明</CardTitle>
+        </CardHeader>
+        <CardContent className="text-sm text-muted-foreground space-y-2">
+           <p>1. <strong>CSV &rarr; JSON</strong>: 第一行将被视为标题（Key），后续行为数据内容。</p>
+           <p>2. <strong>JSON &rarr; CSV</strong>: JSON 必须是一个对象数组，第一个对象的属性名将作为 CSV 的标题。</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}