first commit

2026-01-30 16:57:44 +08:00
commit 3d175d75af
119 changed files with 35834 additions and 0 deletions
--- a/app/ascii-art/page.tsx
+++ b/app/ascii-art/page.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import figlet from "figlet";
+// @ts-ignore
+import standardFont from "figlet/importable-fonts/Standard.js";
+// @ts-ignore
+import ghostFont from "figlet/importable-fonts/Ghost.js";
+// @ts-ignore
+import slantFont from "figlet/importable-fonts/Slant.js";
+// @ts-ignore
+import bubbleFont from "figlet/importable-fonts/Bubble.js";
+// @ts-ignore
+import bannerFont from "figlet/importable-fonts/Banner.js";
+// @ts-ignore
+import bigFont from "figlet/importable-fonts/Big.js";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Terminal, Copy } from "lucide-react";
+import { toast } from "sonner";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+
+// Register fonts
+figlet.parseFont("Standard", standardFont);
+figlet.parseFont("Ghost", ghostFont);
+figlet.parseFont("Slant", slantFont);
+figlet.parseFont("Bubble", bubbleFont);
+figlet.parseFont("Banner", bannerFont);
+figlet.parseFont("Big", bigFont);
+
+const FONTS = ["Standard", "Ghost", "Slant", "Bubble", "Banner", "Big"];
+
+export default function AsciiArtPage() {
+  const [text, setText] = useState("i-Tools");
+  const [font, setFont] = useState("Standard");
+  const [output, setOutput] = useState("");
+
+  useEffect(() => {
+    figlet.text(
+      text,
+      {
+        font: font as any,
+        horizontalLayout: "default",
+        verticalLayout: "default",
+        width: 80,
+        whitespaceBreak: true,
+      },
+      function (err, data) {
+        if (err) {
+          console.log("Something went wrong...");
+          console.dir(err);
+          return;
+        }
+        setOutput(data || "");
+      }
+    );
+  }, [text, font]);
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(output);
+      toast.success("已复制到剪贴板");
+    } catch {
+      toast.error("复制失败");
+    }
+  };
+
+  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-emerald-600 to-green-700 shadow-lg">
+          <Terminal className="h-6 w-6 text-white" />
+        </div>
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">ASCII 艺术生成</h1>
+          <p className="text-muted-foreground">将文本转换为复古的字符画风格</p>
+        </div>
+      </div>
+
+      <div className="grid gap-6">
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex items-center gap-2">设置</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                <div className="grid gap-4 sm:grid-cols-2">
+                    <div className="space-y-2">
+                        <Label>输入文本</Label>
+                        <Input 
+                            value={text} 
+                            onChange={(e) => setText(e.target.value)} 
+                            placeholder="Type something..."
+                            maxLength={20}
+                        />
+                    </div>
+                    <div className="space-y-2">
+                        <Label>字体风格</Label>
+                        <Select value={font} onValueChange={setFont}>
+                            <SelectTrigger>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {FONTS.map(f => (
+                                    <SelectItem key={f} value={f}>{f}</SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+
+        <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+                <CardTitle>预览结果</CardTitle>
+                <Button variant="outline" size="sm" onClick={copyToClipboard} disabled={!output}>
+                    <Copy className="h-4 w-4 mr-2" />
+                    复制
+                </Button>
+            </CardHeader>
+            <CardContent>
+                <div className="relative rounded-lg bg-black p-4 overflow-x-auto">
+                    <pre className="text-green-500 font-mono text-sm leading-none whitespace-pre select-all">
+                        {output || "Generating..."}
+                    </pre>
+                </div>
+            </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}