mirror of
https://github.com/handsomezhuzhu/personal-navigation-site.git
synced 2026-02-20 19:50:16 +00:00
f07ca66f3f
Assign pink for FoxCloud Japan and violet for FoxCloud US. Co-authored-by: Simon <85533298+handsomezhuzhu@users.noreply.github.com>
416 lines
13 KiB
TypeScript
416 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
|
|
import { useState } from "react"
|
|
import { ExternalLink, Globe, Server, Mail, Zap, Shield, Code, FileText, Search } from "lucide-react"
|
|
|
|
interface Site {
|
|
domain: string
|
|
name: string
|
|
server: string
|
|
cdn: string
|
|
url: string
|
|
}
|
|
|
|
interface Category {
|
|
title: string
|
|
icon: React.ReactNode
|
|
sites: Site[]
|
|
}
|
|
|
|
const categories: Category[] = [
|
|
{
|
|
title: "博客与主页",
|
|
icon: <FileText className="size-5" />,
|
|
sites: [
|
|
{
|
|
domain: "zhuzihan.com",
|
|
name: "个人博客",
|
|
server: "EdgeOne Pages",
|
|
cdn: "EdgeOne Pages并加速",
|
|
url: "https://zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "blog.zhuzihan.com",
|
|
name: "个人博客备份",
|
|
server: "阿里云Pages",
|
|
cdn: "ESA加速",
|
|
url: "https://blog.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "www.zhuzihan.com",
|
|
name: "个人主页",
|
|
server: "阿里云",
|
|
cdn: "无加速",
|
|
url: "https://www.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "home.zhuzihan.com",
|
|
name: "导航页",
|
|
server: "EdgeOne Pages",
|
|
cdn: "EdgeOne Pages并加速",
|
|
url: "https://home.zhuzihan.com",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "AI 与 API 服务",
|
|
icon: <Zap className="size-5" />,
|
|
sites: [
|
|
{
|
|
domain: "ai.zhuzihan.com",
|
|
name: "OpenWebUI",
|
|
server: "DigitalOcean",
|
|
cdn: "EdgeOne加速",
|
|
url: "https://ai.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "api.zhuzihan.com",
|
|
name: "New-API",
|
|
server: "DigitalOcean",
|
|
cdn: "无加速",
|
|
url: "https://api.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "load.zhuzihan.com",
|
|
name: "GPT-Load",
|
|
server: "狐蒂云-日本",
|
|
cdn: "EdgeOne加速",
|
|
url: "https://load.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "api-proxy.zhuzihan.com",
|
|
name: "AI API转发",
|
|
server: "狐蒂云-美国",
|
|
cdn: "ESA API加速",
|
|
url: "https://api-proxy.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "ai-proxy.zhuzihan.com",
|
|
name: "AI API转发",
|
|
server: "狐蒂云-美国",
|
|
cdn: "ESA API加速",
|
|
url: "https://ai-proxy.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "crs.zhuzihan.com",
|
|
name: "Claude轮训",
|
|
server: "Azure",
|
|
cdn: "无加速",
|
|
url: "https://crs.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "api-test.zhuzihan.com",
|
|
name: "API批量测试",
|
|
server: "GitHub Pages",
|
|
cdn: "EdgeOne加速",
|
|
url: "https://api-test.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "health.zhuzihan.com/status/ai",
|
|
name: "AI服务状态查询",
|
|
server: "青竹云",
|
|
cdn: "ESA加速",
|
|
url: "https://health.zhuzihan.com/status/ai",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "云服务管理后台",
|
|
icon: <Server className="size-5" />,
|
|
sites: [
|
|
{
|
|
domain: "admin.zhuzihan.com",
|
|
name: "DigitalOcean管理后台",
|
|
server: "DigitalOcean",
|
|
cdn: "无加速",
|
|
url: "https://admin.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "azure.zhuzihan.com",
|
|
name: "Azure管理后台",
|
|
server: "Azure",
|
|
cdn: "无加速",
|
|
url: "https://azure.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "huawei.zhuzihan.com",
|
|
name: "华为云管理后台",
|
|
server: "华为云",
|
|
cdn: "无加速",
|
|
url: "https://huawei.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "ali.zhuzihan.com",
|
|
name: "阿里云管理后台",
|
|
server: "阿里云",
|
|
cdn: "无加速",
|
|
url: "https://ali.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "qzy.zhuzihan.com",
|
|
name: "青竹云管理后台",
|
|
server: "青竹云",
|
|
cdn: "无加速",
|
|
url: "https://qzy.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "hdy.zhuzihan.com",
|
|
name: "狐蒂云-日本管理后台",
|
|
server: "狐蒂云-日本",
|
|
cdn: "无加速",
|
|
url: "https://hdy.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "hdy2.zhuzihan.com",
|
|
name: "狐蒂云-美国管理后台",
|
|
server: "狐蒂云-美国",
|
|
cdn: "无加速",
|
|
url: "https://hdy2.zhuzihan.com",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "项目与工具",
|
|
icon: <Code className="size-5" />,
|
|
sites: [
|
|
{
|
|
domain: "qquiz.zhuzihan.com",
|
|
name: "QQuiz项目",
|
|
server: "火山云",
|
|
cdn: "ESA加速",
|
|
url: "https://qquiz.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "wwords.zhuzihan.com",
|
|
name: "WWords项目",
|
|
server: "火山云",
|
|
cdn: "ESA加速",
|
|
url: "https://wwords.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "code.zhuzihan.com",
|
|
name: "代码小项目",
|
|
server: "EdgeOne Pages",
|
|
cdn: "EdgeOne Pages并加速",
|
|
url: "https://code.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "state.zhuzihan.com",
|
|
name: "探针服务器状态检测",
|
|
server: "华为云",
|
|
cdn: "EdgeOne加速",
|
|
url: "https://state.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "yummy.zhuzihan.com",
|
|
name: "倒计时",
|
|
server: "EdgeOne Pages",
|
|
cdn: "EdgeOne Pages并加速",
|
|
url: "https://yummy.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "file.zhuzihan.com",
|
|
name: "文件快递柜",
|
|
server: "华为云",
|
|
cdn: "无加速",
|
|
url: "https://file.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "2fa.zhuzihan.com",
|
|
name: "纯前端2FA",
|
|
server: "EdgeOne Pages",
|
|
cdn: "EdgeOne Pages并加速",
|
|
url: "https://2fa.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "ieee.zhuzihan.com",
|
|
name: "IEEE 754二进制计算演示",
|
|
server: "EdgeOne Pages",
|
|
cdn: "EdgeOne Pages并加速",
|
|
url: "https://ieee.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "bcj.zhuzihan.com",
|
|
name: "并查集算法演示",
|
|
server: "EdgeOne Pages",
|
|
cdn: "EdgeOne Pages并加速",
|
|
url: "https://bcj.zhuzihan.com",
|
|
},
|
|
{
|
|
domain: "page.zhuzihan.com",
|
|
name: "搜索页/起始页",
|
|
server: "EdgeOne Pages",
|
|
cdn: "EdgeOne Pages并加速",
|
|
url: "https://page.zhuzihan.com",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "邮箱服务",
|
|
icon: <Mail className="size-5" />,
|
|
sites: [
|
|
{ domain: "@zhuzihan.com", name: "个人顶级邮箱", server: "网易企业邮箱", cdn: "-", url: "https://qiye.163.com" },
|
|
{
|
|
domain: "@mail.zhuzihan.com",
|
|
name: "个人邮箱",
|
|
server: "阿里企业邮箱",
|
|
cdn: "-",
|
|
url: "https://qiye.aliyun.com",
|
|
},
|
|
{
|
|
domain: "@webmail.zhuzihan.com",
|
|
name: "个人备用邮箱",
|
|
server: "阿里企业邮箱",
|
|
cdn: "-",
|
|
url: "https://qiye.aliyun.com",
|
|
},
|
|
],
|
|
},
|
|
]
|
|
|
|
function getCdnBadgeStyle(cdn: string) {
|
|
if (cdn.includes("EdgeOne")) return "bg-emerald-500/20 text-emerald-400"
|
|
if (cdn.includes("ESA")) return "bg-sky-500/20 text-sky-400"
|
|
if (cdn.includes("Vercel")) return "bg-foreground/10 text-foreground"
|
|
return "bg-muted text-muted-foreground"
|
|
}
|
|
|
|
function getServerBadgeStyle(server: string) {
|
|
if (server.includes("DigitalOcean")) return "bg-blue-500/20 text-blue-400"
|
|
if (server.includes("Azure")) return "bg-sky-500/20 text-sky-400"
|
|
if (server.includes("华为")) return "bg-red-500/20 text-red-400"
|
|
if (server.includes("阿里")) return "bg-orange-500/20 text-orange-400"
|
|
if (server.includes("火山")) return "bg-amber-500/20 text-amber-400"
|
|
if (server.includes("Vercel") || server.includes("v0")) return "bg-foreground/10 text-foreground"
|
|
if (server.includes("GitHub")) return "bg-foreground/10 text-foreground"
|
|
if (server.includes("EdgeOne")) return "bg-emerald-500/20 text-emerald-400"
|
|
if (server.includes("网易") || server.includes("企业邮箱")) return "bg-red-500/20 text-red-400"
|
|
if (server.includes("狐蒂云-日本")) return "bg-pink-500/20 text-pink-400"
|
|
if (server.includes("狐蒂云-美国")) return "bg-violet-500/20 text-violet-400"
|
|
return "bg-muted text-muted-foreground"
|
|
}
|
|
|
|
export function SiteNavigation() {
|
|
const [searchQuery, setSearchQuery] = useState("")
|
|
|
|
const filteredCategories = categories
|
|
.map((category) => ({
|
|
...category,
|
|
sites: category.sites.filter(
|
|
(site) =>
|
|
site.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
site.domain.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
site.server.toLowerCase().includes(searchQuery.toLowerCase()),
|
|
),
|
|
}))
|
|
.filter((category) => category.sites.length > 0)
|
|
|
|
return (
|
|
<div className="min-h-screen px-4 py-12 md:px-8 lg:px-16">
|
|
<div className="mx-auto max-w-6xl">
|
|
{/* Header */}
|
|
<header className="mb-12">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<Globe className="size-8 text-primary" />
|
|
<h1 className="text-3xl font-bold tracking-tight text-foreground">站点导航</h1>
|
|
</div>
|
|
<p className="text-muted-foreground text-lg">zhuzihan.com 全部站点与服务管理</p>
|
|
</header>
|
|
|
|
{/* Search */}
|
|
<div className="relative mb-10">
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 size-5 text-muted-foreground" />
|
|
<input
|
|
type="text"
|
|
placeholder="搜索站点、域名或服务器..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full bg-card border border-border rounded-lg py-3 pl-12 pr-4 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all"
|
|
/>
|
|
</div>
|
|
|
|
{/* Categories */}
|
|
<div className="space-y-10">
|
|
{filteredCategories.map((category) => (
|
|
<section key={category.title}>
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<span className="text-primary">{category.icon}</span>
|
|
<h2 className="text-xl font-semibold text-foreground">{category.title}</h2>
|
|
<span className="text-sm text-muted-foreground ml-2">({category.sites.length})</span>
|
|
</div>
|
|
|
|
<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
|
|
{category.sites.map((site) => (
|
|
<a
|
|
key={site.domain}
|
|
href={site.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="group flex flex-col gap-3 p-4 bg-card border border-border rounded-lg hover:border-primary/50 hover:bg-card/80 transition-all"
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-medium text-foreground group-hover:text-primary transition-colors truncate">
|
|
{site.name}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground font-mono truncate mt-1">{site.domain}</p>
|
|
</div>
|
|
<ExternalLink className="size-4 text-muted-foreground group-hover:text-primary transition-colors flex-shrink-0 ml-2" />
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
<span
|
|
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${getServerBadgeStyle(site.server)}`}
|
|
>
|
|
<Server className="size-3" />
|
|
{site.server}
|
|
</span>
|
|
{site.cdn !== "-" && (
|
|
<span
|
|
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${getCdnBadgeStyle(site.cdn)}`}
|
|
>
|
|
<Shield className="size-3" />
|
|
{site.cdn}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<footer className="mt-16 pt-8 border-t border-border">
|
|
<div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
|
|
<span>Copyright © 2019 - 2025</span>
|
|
<a
|
|
href="https://beian.miit.gov.cn/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="hover:text-foreground transition-colors"
|
|
>
|
|
滇ICP备2025074424号
|
|
</a>
|
|
<a
|
|
href="https://beian.mps.gov.cn"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
|
|
>
|
|
<img src="/images/beian.png" alt="备案图标" className="size-4" />
|
|
滇公网安备53250402000233号
|
|
</a>
|
|
</div>
|
|
<p className="text-center text-sm text-muted-foreground mt-4">
|
|
共 {categories.reduce((acc, cat) => acc + cat.sites.length, 0)} 个站点 · 个人使用
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|