143 lines
4.7 KiB
TypeScript
143 lines
4.7 KiB
TypeScript
"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>
|
|
);
|
|
}
|