668 lines
20 KiB
TypeScript
668 lines
20 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useMemo } from "react";
|
||
import Link from "next/link";
|
||
import {
|
||
Code,
|
||
Zap,
|
||
Clock,
|
||
Lock,
|
||
Link as LinkIcon,
|
||
Hash,
|
||
Scissors,
|
||
QrCode,
|
||
FileText,
|
||
Car,
|
||
CloudDownload,
|
||
Search,
|
||
LayoutGrid,
|
||
Diff,
|
||
FileJson,
|
||
FileCode,
|
||
Database,
|
||
Braces,
|
||
Type,
|
||
Binary,
|
||
Languages,
|
||
ImageIcon,
|
||
Calculator,
|
||
FileSpreadsheet,
|
||
ImagePlus,
|
||
Network,
|
||
Barcode,
|
||
Terminal,
|
||
FerrisWheel,
|
||
CircleDollarSign,
|
||
Palette,
|
||
Timer,
|
||
Monitor,
|
||
Keyboard,
|
||
Volume2,
|
||
Users,
|
||
Tally5,
|
||
Hourglass,
|
||
Watch,
|
||
KeySquare,
|
||
ShieldAlert,
|
||
CaseSensitive,
|
||
Trophy,
|
||
TestTube,
|
||
} from "lucide-react";
|
||
|
||
// --- Data Definitions ---
|
||
|
||
interface Tool {
|
||
id: string;
|
||
title: string;
|
||
description: string;
|
||
icon: React.ReactNode;
|
||
href: string;
|
||
color: string;
|
||
isPlanned?: boolean;
|
||
}
|
||
|
||
interface Category {
|
||
id: string;
|
||
name: string;
|
||
icon: React.ReactNode;
|
||
tools: Tool[];
|
||
}
|
||
|
||
const categories: Category[] = [
|
||
{
|
||
id: "oi-tools",
|
||
name: "信奥工具",
|
||
icon: <Trophy className="h-4 w-4" />,
|
||
tools: [
|
||
{
|
||
id: "testcase-generator",
|
||
title: "测试点生成",
|
||
description: "生成算法竞赛测试用例数据",
|
||
icon: <TestTube className="h-6 w-6" />,
|
||
href: "/testcase-generator",
|
||
color: "text-purple-500",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "dev-tools",
|
||
name: "开发工具",
|
||
icon: <Code className="h-4 w-4" />,
|
||
tools: [
|
||
{
|
||
id: "json-formatter",
|
||
title: "JSON 格式化",
|
||
description: "JSON 数据格式化、压缩和验证",
|
||
icon: <Code className="h-6 w-6" />,
|
||
href: "/json-formatter",
|
||
color: "text-blue-500",
|
||
},
|
||
{
|
||
id: "diff",
|
||
title: "文本 Diff 对比",
|
||
description: "使用 Monaco 显示文本差异",
|
||
icon: <Diff className="h-6 w-6" />,
|
||
href: "/diff",
|
||
color: "text-slate-500",
|
||
},
|
||
{
|
||
id: "yaml-formatter",
|
||
title: "YAML 格式化",
|
||
description: "YAML 数据格式化和验证",
|
||
icon: <FileJson className="h-6 w-6" />,
|
||
href: "/yaml-formatter",
|
||
color: "text-amber-600",
|
||
},
|
||
{
|
||
id: "html-formatter",
|
||
title: "HTML 格式化",
|
||
description: "HTML 代码格式化和美化",
|
||
icon: <FileCode className="h-6 w-6" />,
|
||
href: "/html-formatter",
|
||
color: "text-orange-600",
|
||
},
|
||
{
|
||
id: "markdown",
|
||
title: "Markdown 编辑",
|
||
description: "Markdown 实时预览和导出",
|
||
icon: <FileText className="h-6 w-6" />,
|
||
href: "/markdown",
|
||
color: "text-blue-600",
|
||
},
|
||
{
|
||
id: "sql-formatter",
|
||
title: "SQL 格式化",
|
||
description: "SQL 语句格式化和美化",
|
||
icon: <Database className="h-6 w-6" />,
|
||
href: "/sql-formatter",
|
||
color: "text-indigo-600",
|
||
},
|
||
{
|
||
id: "html-escape",
|
||
title: "HTML 转义",
|
||
description: "HTML 实体编码/解码",
|
||
icon: <Braces className="h-6 w-6" />,
|
||
href: "/html-escape",
|
||
color: "text-emerald-600",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "text-tools",
|
||
name: "文本工具",
|
||
icon: <Scissors className="h-4 w-4" />,
|
||
tools: [
|
||
{
|
||
id: "text-formatter",
|
||
title: "文字格式化",
|
||
description: "清理文本中的多余空格和格式",
|
||
icon: <Scissors className="h-6 w-6" />,
|
||
href: "/text-formatter",
|
||
color: "text-pink-500",
|
||
},
|
||
{
|
||
id: "case-converter",
|
||
title: "大小写转换",
|
||
description: "大写、小写、驼峰等格式转换",
|
||
icon: <CaseSensitive className="h-6 w-6" />,
|
||
href: "/case-converter",
|
||
color: "text-violet-500",
|
||
},
|
||
{
|
||
id: "lorem-ipsum",
|
||
title: "Lorem Ipsum",
|
||
description: "占位文本生成工具",
|
||
icon: <Type className="h-6 w-6" />,
|
||
href: "/lorem-ipsum",
|
||
color: "text-zinc-500",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "encoding-tools",
|
||
name: "编码工具",
|
||
icon: <Binary className="h-4 w-4" />,
|
||
tools: [
|
||
{
|
||
id: "base64",
|
||
title: "Base64 编解码",
|
||
description: "Base64 编码与解码转换工具",
|
||
icon: <Lock className="h-6 w-6" />,
|
||
href: "/base64",
|
||
color: "text-emerald-500",
|
||
},
|
||
{
|
||
id: "base58",
|
||
title: "Base58 编解码",
|
||
description: "常用于比特币地址等场景",
|
||
icon: <Binary className="h-6 w-6" />,
|
||
href: "/base58",
|
||
color: "text-amber-500",
|
||
},
|
||
{
|
||
id: "base32",
|
||
title: "Base32 编解码",
|
||
description: "常用于 TOTP 等场景",
|
||
icon: <Binary className="h-6 w-6" />,
|
||
href: "/base32",
|
||
color: "text-orange-500",
|
||
},
|
||
{
|
||
id: "unicode",
|
||
title: "Unicode 转换",
|
||
description: "Unicode 字符与编码相互转换",
|
||
icon: <Languages className="h-6 w-6" />,
|
||
href: "/unicode",
|
||
color: "text-blue-500",
|
||
},
|
||
{
|
||
id: "url-encode",
|
||
title: "URL 编解码",
|
||
description: "URL 参数编码与解码处理",
|
||
icon: <LinkIcon className="h-6 w-6" />,
|
||
href: "/url-encode",
|
||
color: "text-cyan-500",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "conversion-tools",
|
||
name: "转换工具",
|
||
icon: <Clock className="h-4 w-4" />,
|
||
tools: [
|
||
{
|
||
id: "timestamp",
|
||
title: "时间戳转换",
|
||
description: "时间戳与日期时间互相转换",
|
||
icon: <Clock className="h-6 w-6" />,
|
||
href: "/timestamp",
|
||
color: "text-orange-500",
|
||
},
|
||
{
|
||
id: "image-to-pixel",
|
||
title: "图片转像素画",
|
||
description: "将图片转换为像素艺术风格",
|
||
icon: <ImageIcon className="h-6 w-6" />,
|
||
href: "/image-to-pixel",
|
||
color: "text-pink-600",
|
||
},
|
||
{
|
||
id: "radix-converter",
|
||
title: "进制转换器",
|
||
description: "二/八/十/十六进制互转",
|
||
icon: <Calculator className="h-6 w-6" />,
|
||
href: "/radix-converter",
|
||
color: "text-indigo-500",
|
||
},
|
||
{
|
||
id: "csv-json",
|
||
title: "CSV/JSON 互转",
|
||
description: "CSV 与 JSON 格式互相转换",
|
||
icon: <FileSpreadsheet className="h-6 w-6" />,
|
||
href: "/csv-json",
|
||
color: "text-green-600",
|
||
},
|
||
{
|
||
id: "image-base64",
|
||
title: "图片 Base64",
|
||
description: "图片与 Base64 字符串互转",
|
||
icon: <ImagePlus className="h-6 w-6" />,
|
||
href: "/image-base64",
|
||
color: "text-purple-600",
|
||
},
|
||
{
|
||
id: "ip-radix",
|
||
title: "IP 地址转换",
|
||
description: "IP 在不同进制间相互转换",
|
||
icon: <Network className="h-6 w-6" />,
|
||
href: "/ip-radix",
|
||
color: "text-cyan-600",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "generation-tools",
|
||
name: "生成工具",
|
||
icon: <QrCode className="h-4 w-4" />,
|
||
tools: [
|
||
{
|
||
id: "uuid",
|
||
title: "UUID 生成",
|
||
description: "生成 UUID/GUID 唯一标识符",
|
||
icon: <FileText className="h-6 w-6" />,
|
||
href: "/uuid",
|
||
color: "text-indigo-500",
|
||
},
|
||
{
|
||
id: "random-string",
|
||
title: "随机密码生成",
|
||
description: "生成安全的随机密码",
|
||
icon: <Zap className="h-6 w-6" />,
|
||
href: "/random-string",
|
||
color: "text-purple-500",
|
||
},
|
||
{
|
||
id: "qrcode",
|
||
title: "二维码生成",
|
||
description: "快速生成自定义样式的二维码",
|
||
icon: <QrCode className="h-6 w-6" />,
|
||
href: "/qrcode",
|
||
color: "text-green-500",
|
||
},
|
||
{
|
||
id: "barcode",
|
||
title: "条形码生成",
|
||
description: "生成各种格式的条形码",
|
||
icon: <Barcode className="h-6 w-6" />,
|
||
href: "/barcode",
|
||
color: "text-zinc-700",
|
||
},
|
||
{
|
||
id: "ascii-art",
|
||
title: "ASCII 艺术",
|
||
description: "将文本转换为字符艺术",
|
||
icon: <Terminal className="h-6 w-6" />,
|
||
href: "/ascii-art",
|
||
color: "text-emerald-700",
|
||
},
|
||
{
|
||
id: "wheel",
|
||
title: "大转盘抽奖",
|
||
description: "随机抽奖决策工具",
|
||
icon: <FerrisWheel className="h-6 w-6" />,
|
||
href: "/wheel",
|
||
color: "text-rose-500",
|
||
},
|
||
{
|
||
id: "coin-flip",
|
||
title: "抛硬币",
|
||
description: "随机正反面决策",
|
||
icon: <CircleDollarSign className="h-6 w-6" />,
|
||
href: "/coin-flip",
|
||
color: "text-amber-600",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "utility-tools",
|
||
name: "实用工具",
|
||
icon: <LayoutGrid className="h-4 w-4" />,
|
||
tools: [
|
||
{
|
||
id: "color-picker",
|
||
title: "颜色选择器",
|
||
description: "HEX/RGB/HSL 格式互转",
|
||
icon: <Palette className="h-6 w-6" />,
|
||
href: "/color-picker",
|
||
color: "text-pink-500",
|
||
},
|
||
{
|
||
id: "regex",
|
||
title: "正则测试器",
|
||
description: "测试和调试正则表达式",
|
||
icon: <Code className="h-6 w-6" />,
|
||
href: "/regex",
|
||
color: "text-blue-600",
|
||
},
|
||
{
|
||
id: "cron",
|
||
title: "Cron 解析器",
|
||
description: "解析和验证 Cron 表达式",
|
||
icon: <Timer className="h-6 w-6" />,
|
||
href: "/cron",
|
||
color: "text-orange-600",
|
||
},
|
||
{
|
||
id: "user-agent",
|
||
title: "UA 解析器",
|
||
description: "解析浏览器 UA 字符串",
|
||
icon: <Monitor className="h-6 w-6" />,
|
||
href: "/user-agent",
|
||
color: "text-slate-600",
|
||
},
|
||
{
|
||
id: "keyboard",
|
||
title: "键盘检测器",
|
||
description: "检测键盘按键事件详情",
|
||
icon: <Keyboard className="h-6 w-6" />,
|
||
href: "/keyboard",
|
||
color: "text-zinc-600",
|
||
},
|
||
{
|
||
id: "tts",
|
||
title: "文字转语音",
|
||
description: "将文本转换为语音播放",
|
||
icon: <Volume2 className="h-6 w-6" />,
|
||
href: "/tts",
|
||
color: "text-cyan-600",
|
||
},
|
||
{
|
||
id: "random-group",
|
||
title: "随机分组",
|
||
description: "快速公平地生成随机团队",
|
||
icon: <Users className="h-6 w-6" />,
|
||
href: "/random-group",
|
||
color: "text-indigo-600",
|
||
},
|
||
{
|
||
id: "scoreboard",
|
||
title: "记分板",
|
||
description: "红蓝双方比分记录",
|
||
icon: <Tally5 className="h-6 w-6" />,
|
||
href: "/scoreboard",
|
||
color: "text-rose-600",
|
||
},
|
||
{
|
||
id: "pomodoro",
|
||
title: "番茄钟",
|
||
description: "番茄工作法计时器",
|
||
icon: <Timer className="h-6 w-6" />,
|
||
href: "/pomodoro",
|
||
color: "text-red-500",
|
||
},
|
||
{
|
||
id: "counter",
|
||
title: "计数器",
|
||
description: "简单的计数工具",
|
||
icon: <Hash className="h-6 w-6" />,
|
||
href: "/counter",
|
||
color: "text-zinc-500",
|
||
},
|
||
{
|
||
id: "countdown",
|
||
title: "倒数计时器",
|
||
description: "设置倒计时到时提醒",
|
||
icon: <Hourglass className="h-6 w-6" />,
|
||
href: "/countdown",
|
||
color: "text-amber-500",
|
||
},
|
||
{
|
||
id: "stopwatch",
|
||
title: "秒表",
|
||
description: "精确计时支持记圈",
|
||
icon: <Watch className="h-6 w-6" />,
|
||
href: "/stopwatch",
|
||
color: "text-blue-500",
|
||
},
|
||
{
|
||
id: "ip-calc",
|
||
title: "IP 地址计算",
|
||
description: "子网掩码与网络划分计算",
|
||
icon: <Network className="h-6 w-6" />,
|
||
href: "/ip-calc",
|
||
color: "text-blue-600",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "crypto-tools",
|
||
name: "加密工具",
|
||
icon: <Lock className="h-4 w-4" />,
|
||
tools: [
|
||
{
|
||
id: "hash",
|
||
title: "MD5/SHA 哈希",
|
||
description: "计算 MD5、SHA1/256/512 哈希",
|
||
icon: <Hash className="h-6 w-6" />,
|
||
href: "/hash",
|
||
color: "text-rose-500",
|
||
},
|
||
{
|
||
id: "jwt",
|
||
title: "JWT 解码器",
|
||
description: "解析和查看 JWT 内容",
|
||
icon: <KeySquare className="h-6 w-6" />,
|
||
href: "/jwt",
|
||
color: "text-purple-600",
|
||
},
|
||
{
|
||
id: "aes-des",
|
||
title: "AES/DES 加密",
|
||
description: "对称加密解密工具",
|
||
icon: <ShieldAlert className="h-6 w-6" />,
|
||
href: "/aes-des",
|
||
color: "text-red-600",
|
||
},
|
||
{
|
||
id: "bcrypt",
|
||
title: "Bcrypt 哈希",
|
||
description: "生成和验证 Bcrypt 密码",
|
||
icon: <Lock className="h-6 w-6" />,
|
||
href: "/bcrypt",
|
||
color: "text-slate-700",
|
||
},
|
||
],
|
||
},
|
||
// {
|
||
// id: "life-tools",
|
||
// name: "生活工具",
|
||
// icon: <Car className="h-4 w-4" />,
|
||
// tools: [
|
||
// {
|
||
// id: "move-car",
|
||
// title: "挪车码牌",
|
||
// description: "生成专属挪车码牌，支持微信推送",
|
||
// icon: <Car className="h-6 w-6" />,
|
||
// href: "/move-car",
|
||
// color: "text-yellow-500",
|
||
// },
|
||
// {
|
||
// id: "alipan-tv-token",
|
||
// title: "阿里云盘 Token",
|
||
// description: "获取阿里云盘 TV 端授权令牌",
|
||
// icon: <CloudDownload className="h-6 w-6" />,
|
||
// href: "/alipan-tv-token",
|
||
// color: "text-teal-500",
|
||
// },
|
||
// ],
|
||
// },
|
||
];
|
||
|
||
// --- Main Layout Component ---
|
||
|
||
export default function HomePage() {
|
||
const [searchQuery, setSearchQuery] = useState("");
|
||
const [activeCategory, setActiveCategory] = useState("all");
|
||
|
||
// Flatten tools for easier filtering
|
||
const allTools = useMemo(() => {
|
||
return categories.flatMap((cat) =>
|
||
cat.tools.map((tool) => ({ ...tool, categoryId: cat.id }))
|
||
);
|
||
}, []);
|
||
|
||
// Filter Logic
|
||
const filteredTools = useMemo(() => {
|
||
let tools = allTools;
|
||
|
||
// 1. Category Filter
|
||
if (activeCategory !== "all") {
|
||
tools = tools.filter((tool) => tool.categoryId === activeCategory);
|
||
}
|
||
|
||
// 2. Search Filter
|
||
if (searchQuery.trim()) {
|
||
const query = searchQuery.toLowerCase();
|
||
tools = tools.filter(
|
||
(tool) =>
|
||
tool.title.toLowerCase().includes(query) ||
|
||
tool.description.toLowerCase().includes(query)
|
||
);
|
||
}
|
||
|
||
return tools;
|
||
}, [allTools, activeCategory, searchQuery]);
|
||
|
||
return (
|
||
<div className="flex flex-col space-y-6 pb-10">
|
||
{/* Hero Section */}
|
||
<section className="flex flex-col items-center pt-8 pb-4 text-center space-y-4 md:pt-12 lg:pt-16 animate-in fade-in slide-in-from-bottom-5 duration-700">
|
||
<div className="space-y-2 max-w-3xl px-4">
|
||
<h1 className="text-3xl font-extrabold tracking-tight sm:text-4xl md:text-5xl text-foreground">
|
||
信奥工具箱
|
||
</h1>
|
||
<p className="mx-auto max-w-175 text-muted-foreground text-base sm:text-lg">
|
||
简约、高效的在线信奥学习工具集合。
|
||
</p>
|
||
</div>
|
||
|
||
{/* Search Input */}
|
||
<div className="w-full max-w-lg px-4 relative mt-2">
|
||
<div className="relative">
|
||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
||
<input
|
||
type="text"
|
||
placeholder="搜索工具，例如：JSON、二维码..."
|
||
className="w-full h-12 pl-12 pr-4 rounded-full border border-input bg-background/50 hover:bg-accent/50 focus:bg-background transition-all ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 shadow-xs text-base"
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Main Content Area */}
|
||
<div className="container max-w-6xl mx-auto px-4 space-y-8">
|
||
{/* Category Navigation */}
|
||
<div className="flex flex-wrap items-center justify-center gap-2 animate-in fade-in slide-in-from-bottom-6 duration-700 delay-100">
|
||
<button
|
||
onClick={() => setActiveCategory("all")}
|
||
className={`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
activeCategory === "all"
|
||
? "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90"
|
||
: "bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground"
|
||
}`}
|
||
>
|
||
<LayoutGrid className="h-4 w-4" />
|
||
全部
|
||
</button>
|
||
{categories.map((cat) => (
|
||
<button
|
||
key={cat.id}
|
||
onClick={() => setActiveCategory(cat.id)}
|
||
className={`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
activeCategory === cat.id
|
||
? "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90"
|
||
: "bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground"
|
||
}`}
|
||
>
|
||
{cat.icon}
|
||
{cat.name}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Tools Grid */}
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-200">
|
||
{filteredTools.length > 0 ? (
|
||
filteredTools.map((tool) => (
|
||
<Link
|
||
key={tool.id}
|
||
href={tool.isPlanned ? "#" : tool.href}
|
||
className={`group block h-full ${tool.isPlanned ? "cursor-not-allowed" : ""}`}
|
||
onClick={(e) => tool.isPlanned && e.preventDefault()}
|
||
>
|
||
<div className={`relative h-full overflow-hidden rounded-xl border bg-card text-card-foreground transition-all duration-300 ${!tool.isPlanned && "hover:shadow-md hover:-translate-y-1 hover:border-primary/20 group-hover:bg-accent/5"}`}>
|
||
<div className="p-5 flex items-center gap-4 text-left h-full">
|
||
<div
|
||
className={`relative shrink-0 flex h-12 w-12 items-center justify-center rounded-xl ${tool.color} transition-transform duration-300 ${!tool.isPlanned && "group-hover:scale-110 group-hover:rotate-3"}`}
|
||
>
|
||
<div className="absolute inset-0 bg-current opacity-10 rounded-xl" />
|
||
{tool.icon}
|
||
</div>
|
||
<div className="space-y-1 flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<h3 className="font-bold tracking-tight text-base">
|
||
{tool.title}
|
||
</h3>
|
||
{tool.isPlanned && (
|
||
<span className="text-[10px] px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground font-medium">
|
||
敬请期待
|
||
</span>
|
||
)}
|
||
</div>
|
||
<p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">
|
||
{tool.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
))
|
||
) : (
|
||
<div className="col-span-full py-16 text-center">
|
||
<div className="inline-flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
|
||
<Search className="h-8 w-8 text-muted-foreground" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold">未找到相关工具</h3>
|
||
<p className="text-muted-foreground mt-2">
|
||
换个关键词试试，或者浏览其他分类。
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|