├── LICENSE
├── .modified
├── src
    ├── ai
    │   ├── dev.ts
    │   └── genkit.ts
    ├── app
    │   ├── favicon.ico
    │   ├── layout.tsx
    │   ├── login
    │   │   └── page.tsx
    │   ├── globals.css
    │   └── page.tsx
    ├── lib
    │   ├── types.ts
    │   ├── utils.ts
    │   ├── actions.ts
    │   └── data-storage.ts
    ├── components
    │   ├── ui
    │   │   ├── skeleton.tsx
    │   │   ├── textarea.tsx
    │   │   ├── label.tsx
    │   │   ├── input.tsx
    │   │   ├── separator.tsx
    │   │   ├── progress.tsx
    │   │   ├── toaster.tsx
    │   │   ├── checkbox.tsx
    │   │   ├── slider.tsx
    │   │   ├── switch.tsx
    │   │   ├── badge.tsx
    │   │   ├── tooltip.tsx
    │   │   ├── popover.tsx
    │   │   ├── avatar.tsx
    │   │   ├── radio-group.tsx
    │   │   ├── password-input.tsx
    │   │   ├── alert.tsx
    │   │   ├── scroll-area.tsx
    │   │   ├── tabs.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── accordion.tsx
    │   │   ├── calendar.tsx
    │   │   ├── table.tsx
    │   │   ├── dialog.tsx
    │   │   ├── sheet.tsx
    │   │   ├── form.tsx
    │   │   ├── alert-dialog.tsx
    │   │   ├── toast.tsx
    │   │   ├── select.tsx
    │   │   ├── dropdown-menu.tsx
    │   │   ├── menubar.tsx
    │   │   └── chart.tsx
    │   ├── theme-provider.tsx
    │   ├── domain-card.tsx
    │   ├── settings-dialog.tsx
    │   └── add-edit-domain-dialog.tsx
    └── hooks
    │   ├── use-mobile.tsx
    │   └── use-toast.ts
├── .vscode
    └── settings.json
├── postcss.config.mjs
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
    └── pull_request_template.md
├── components.json
├── next.config.js
├── .gitignore
├── tsconfig.json
├── docs
    ├── blueprint.md
    ├── build.md
    └── deployment.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── .idx
    └── dev.nix
├── vps-autostart.sh
├── deploy.sh
├── package.json
├── deploy-pm2.sh
├── nginx-node-deploy.sh
├── README.md
├── tailwind.config.ts
└── 0001-NPM-URL.patch


/LICENSE:
--------------------------------------------------------------------------------
1 |  


--------------------------------------------------------------------------------
/.modified:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/ai/dev.ts:
--------------------------------------------------------------------------------
1 | // Flows will be imported for their side effects in this file.
2 | 


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LeoJyenn/DomainMonitoring/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "IDX.aI.enableInlineCompletion": true,
3 |     "IDX.aI.enableCodebaseIndexing": true
4 | }


--------------------------------------------------------------------------------
/src/lib/types.ts:
--------------------------------------------------------------------------------
1 | 
2 | export interface DomainInfo {
3 |   id: string;
4 |   name: string;
5 |   expirationDate: Date;
6 |   dateAdded: Date;
7 | }
8 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | 
2 | import { clsx, type ClassValue } from "clsx"
3 | import { twMerge } from "tailwind-merge"
4 | 
5 | export function cn(...inputs: ClassValue[]) {
6 |   return twMerge(clsx(inputs))
7 | }
8 | 


--------------------------------------------------------------------------------
/src/ai/genkit.ts:
--------------------------------------------------------------------------------
1 | import {genkit} from 'genkit';
2 | import {googleAI} from '@genkit-ai/googleai';
3 | 
4 | export const ai = genkit({
5 |   plugins: [googleAI()],
6 |   model: 'googleai/gemini-2.0-flash',
7 | });
8 | 


--------------------------------------------------------------------------------
/src/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | 
 3 | function Skeleton({
 4 |   className,
 5 |   ...props
 6 | }: React.HTMLAttributes<HTMLDivElement>) {
 7 |   return (
 8 |     <div
 9 |       className={cn("animate-pulse rounded-md bg-muted", className)}
10 |       {...props}
11 |     />
12 |   )
13 | }
14 | 
15 | export { Skeleton }
16 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: 功能请求
 3 | about: 为该项目提出您的想法
 4 | title: "[功能] "
 5 | labels: enhancement
 6 | assignees: ''
 7 | ---
 8 | 
 9 | ## 您的功能请求是否与问题有关？请描述
10 | 简明扼要地描述问题所在。例如，当[...]时我总是感到沮丧。
11 | 
12 | ## 描述您希望的解决方案
13 | 清晰简洁地描述您希望发生的事情。
14 | 
15 | ## 描述您考虑过的替代方案
16 | 清晰简洁地描述您考虑过的任何替代解决方案或功能。
17 | 
18 | ## 预期用例
19 | 描述此功能的主要使用场景和受益用户。
20 | 
21 | ## 其他信息
22 | 在此处添加有关功能请求的任何其他信息或截图。 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug报告
 3 | about: 创建Bug报告以帮助我们改进
 4 | title: "[BUG] "
 5 | labels: bug
 6 | assignees: ''
 7 | ---
 8 | 
 9 | ## 描述Bug
10 | 清晰简洁地描述该Bug是什么。
11 | 
12 | ## 复现步骤
13 | 复现该行为的步骤：
14 | 1. 前往 '...'
15 | 2. 点击 '....'
16 | 3. 滚动到 '....'
17 | 4. 查看错误
18 | 
19 | ## 预期行为
20 | 清晰简洁地描述您期望发生的事情。
21 | 
22 | ## 截图
23 | 如果适用，添加截图以帮助解释您的问题。
24 | 
25 | ## 环境信息
26 |  - 操作系统: [例如: Windows 10, Ubuntu 20.04]
27 |  - 浏览器 [例如: Chrome, Safari]
28 |  - 版本 [例如: 22]
29 |  - 部署方式 [例如: Docker, PM2]
30 | 
31 | ## 其他信息
32 | 在此处添加关于该问题的任何其他信息。 


--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
 1 | ## 描述
 2 | 
 3 | 请描述您的更改以及它们解决了什么问题。请链接到任何相关的问题。
 4 | 
 5 | 修复 #(issue编号)
 6 | 
 7 | ## 更改类型
 8 | 
 9 | - [ ] 修复Bug
10 | - [ ] 新功能
11 | - [ ] 代码样式更新（格式，重命名）
12 | - [ ] 重构（没有功能变化，没有api变化）
13 | - [ ] 构建相关更改
14 | - [ ] 文档内容更改
15 | - [ ] 其他（请描述）
16 | 
17 | ## 测试
18 | 
19 | 请描述您的测试方法以及如何验证您的更改。
20 | 
21 | ## 截图
22 | 
23 | 如果适用，请添加截图以帮助解释您的更改。
24 | 
25 | ## 检查清单
26 | 
27 | - [ ] 我的代码遵循该项目的编码风格
28 | - [ ] 我已经自我审查了我的代码
29 | - [ ] 我已经更新了文档（如果适用）
30 | - [ ] 我的更改不会生成新的警告
31 | - [ ] 我添加了测试（如果适用）
32 | - [ ] 所有新旧测试都通过
33 | 
34 | ## 其他信息
35 | 
36 | 提供有关您的PR的任何其他信息。 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | const nextConfig = {
 2 |   /* config options here */
 3 |   typescript: {
 4 |     ignoreBuildErrors: true,
 5 |   },
 6 |   eslint: {
 7 |     ignoreDuringBuilds: true,
 8 |   },
 9 |   images: {
10 |     remotePatterns: [
11 |       {
12 |         protocol: 'https',
13 |         hostname: 'placehold.co',
14 |         port: '',
15 |         pathname: '/**',
16 |       },
17 |     ],
18 |   },
19 |   output: 'standalone',
20 |   // 指定输出端口为9769
21 |   experimental: {
22 |     serverComponentsExternalPackages: [],
23 |   },
24 | };
25 | 
26 | module.exports = nextConfig;
27 | 


--------------------------------------------------------------------------------
/src/hooks/use-mobile.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | const MOBILE_BREAKPOINT = 768
 4 | 
 5 | export function useIsMobile() {
 6 |   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
 7 | 
 8 |   React.useEffect(() => {
 9 |     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
10 |     const onChange = () => {
11 |       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
12 |     }
13 |     mql.addEventListener("change", onChange)
14 |     setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
15 |     return () => mql.removeEventListener("change", onChange)
16 |   }, [])
17 | 
18 |   return !!isMobile
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # vercel
34 | .vercel
35 | 
36 | # typescript
37 | *.tsbuildinfo
38 | next-env.d.ts
39 | 
40 | .genkit/*
41 | .env*
42 | 
43 | # firebase
44 | firebase-debug.log
45 | firestore-debug.log


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | 
 2 | {
 3 |   "compilerOptions": {
 4 |     "target": "ES2017",
 5 |     "lib": ["dom", "dom.iterable", "esnext"],
 6 |     "allowJs": true,
 7 |     "skipLibCheck": true,
 8 |     "strict": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "bundler",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "plugins": [
18 |       {
19 |         "name": "next"
20 |       }
21 |     ],
22 |     "paths": {
23 |       "@/*": ["./src/*"]
24 |     }
25 |   },
26 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 |   "exclude": ["node_modules"]
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import {cn} from '@/lib/utils';
 4 | 
 5 | const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'textarea'>>(
 6 |   ({className, ...props}, ref) => {
 7 |     return (
 8 |       <textarea
 9 |         className={cn(
10 |           'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
11 |           className
12 |         )}
13 |         ref={ref}
14 |         {...props}
15 |       />
16 |     );
17 |   }
18 | );
19 | Textarea.displayName = 'Textarea';
20 | 
21 | export {Textarea};
22 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 6 |   ({ className, type, ...props }, ref) => {
 7 |     return (
 8 |       <input
 9 |         type={type}
10 |         className={cn(
11 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |           className
13 |         )}
14 |         ref={ref}
15 |         {...props}
16 |       />
17 |     )
18 |   }
19 | )
20 | Input.displayName = "Input"
21 | 
22 | export { Input }
23 | 


--------------------------------------------------------------------------------
/docs/blueprint.md:
--------------------------------------------------------------------------------
 1 | # **App Name**: Domain Watch
 2 | 
 3 | ## Core Features:
 4 | 
 5 | - Domain Addition: Allow users to manually add domains and their expiration dates.
 6 | - Domain List: Display a clear, sortable list of monitored domains with their expiration dates.
 7 | - Expiration Alerts: Provide visual cues (e.g., color-coding) to indicate domains expiring soon.
 8 | - Domain Management: Enable users to edit or delete domains from their watch list.
 9 | 
10 | ## Style Guidelines:
11 | 
12 | - Primary color: Deep blue (#3F51B5) to convey trust and reliability.
13 | - Background color: Light gray (#F0F0F0) for a clean and professional look.
14 | - Accent color: Orange (#FF9800) to highlight important alerts and call-to-actions.
15 | - Use a clear, sans-serif font for optimal readability.
16 | - A clean, card-based layout for easy scanning of domain information.
17 | - Subtle transitions and animations when adding or editing domains.


--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Separator = React.forwardRef<
 9 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11 | >(
12 |   (
13 |     { className, orientation = "horizontal", decorative = true, ...props },
14 |     ref
15 |   ) => (
16 |     <SeparatorPrimitive.Root
17 |       ref={ref}
18 |       decorative={decorative}
19 |       orientation={orientation}
20 |       className={cn(
21 |         "shrink-0 bg-border",
22 |         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   )
28 | )
29 | Separator.displayName = SeparatorPrimitive.Root.displayName
30 | 
31 | export { Separator }
32 | 


--------------------------------------------------------------------------------
/src/components/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Progress = React.forwardRef<
 9 |   React.ElementRef<typeof ProgressPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
11 | >(({ className, value, ...props }, ref) => (
12 |   <ProgressPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
16 |       className
17 |     )}
18 |     {...props}
19 |   >
20 |     <ProgressPrimitive.Indicator
21 |       className="h-full w-full flex-1 bg-primary transition-all"
22 |       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
23 |     />
24 |   </ProgressPrimitive.Root>
25 | ))
26 | Progress.displayName = ProgressPrimitive.Root.displayName
27 | 
28 | export { Progress }
29 | 


--------------------------------------------------------------------------------
/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useToast } from "@/hooks/use-toast"
 4 | import {
 5 |   Toast,
 6 |   ToastClose,
 7 |   ToastDescription,
 8 |   ToastProvider,
 9 |   ToastTitle,
10 |   ToastViewport,
11 | } from "@/components/ui/toast"
12 | 
13 | export function Toaster() {
14 |   const { toasts } = useToast()
15 | 
16 |   return (
17 |     <ToastProvider>
18 |       {toasts.map(function ({ id, title, description, action, ...props }) {
19 |         return (
20 |           <Toast key={id} {...props}>
21 |             <div className="grid gap-1">
22 |               {title && <ToastTitle>{title}</ToastTitle>}
23 |               {description && (
24 |                 <ToastDescription>{description}</ToastDescription>
25 |               )}
26 |             </div>
27 |             {action}
28 |             <ToastClose />
29 |           </Toast>
30 |         )
31 |       })}
32 |       <ToastViewport />
33 |     </ToastProvider>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from 'next';
 2 | import { Geist, Geist_Mono } from 'next/font/google';
 3 | import './globals.css';
 4 | import { Toaster } from '@/components/ui/toaster';
 5 | import { ThemeProvider } from '@/components/theme-provider';
 6 | 
 7 | const geistSans = Geist({
 8 |   variable: '--font-geist-sans',
 9 |   subsets: ['latin'],
10 | });
11 | 
12 | const geistMono = Geist_Mono({
13 |   variable: '--font-geist-mono',
14 |   subsets: ['latin'],
15 | });
16 | 
17 | export const metadata: Metadata = {
18 |   title: '域名监控',
19 |   description: '轻松监控您的域名到期日期。',
20 |   icons: null,
21 | };
22 | 
23 | export default function RootLayout({
24 |   children,
25 | }: Readonly<{
26 |   children: React.ReactNode;
27 | }>) {
28 |   return (
29 |     <html lang="zh-CN" className="h-full">
30 |       <body className={`${geistSans.variable} ${geistMono.variable} antialiased h-full bg-background text-foreground`}>
31 |         <ThemeProvider />
32 |         {children}
33 |         <Toaster />
34 |       </body>
35 |     </html>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # 贡献者公约
 2 | 
 3 | ## 我们的承诺
 4 | 
 5 | 为了营造一个开放和欢迎的环境，我们作为贡献者和维护者承诺让参与我们的项目和社区的每个人都不受到骚扰，无论年龄、体型、身体残疾、民族、性别特征、性别认同和表达、经验水平、教育程度、社会经济地位、国籍、个人外表、种族、宗教或性取向和认同如何。
 6 | 
 7 | ## 我们的标准
 8 | 
 9 | 有助于创造积极环境的行为包括：
10 | 
11 | * 使用欢迎和包容的语言
12 | * 尊重不同的观点和经验
13 | * 优雅地接受建设性批评
14 | * 关注对社区最有利的事物
15 | * 对其他社区成员表示同理心
16 | 
17 | 参与者不可接受的行为包括：
18 | 
19 | * 使用性暗示的语言或图像以及不受欢迎的性关注或挑逗
20 | * 发表贬损、侮辱/贬低的评论，以及人身或政治攻击
21 | * 公开或私下骚扰
22 | * 未经明确许可发布他人的私人信息，如实际或电子地址
23 | * 在专业环境中可合理认为不适当的其他行为
24 | 
25 | ## 我们的责任
26 | 
27 | 项目维护者有责任阐明可接受行为的标准，并期望对任何不可接受行为的实例采取适当和公平的纠正措施。
28 | 
29 | 项目维护者有权利和责任删除、编辑或拒绝不符合本行为准则的评论、提交、代码、wiki编辑、问题和其他贡献，或者暂时或永久禁止任何贡献者进行他们认为不适当、威胁、冒犯或有害的其他行为。
30 | 
31 | ## 范围
32 | 
33 | 当个人代表项目或其社区时，本行为准则适用于项目空间和公共空间。代表项目或社区的例子包括使用官方项目电子邮件地址、通过官方社交媒体账户发布，或在在线或离线事件中担任指定代表。项目维护者可以进一步定义和阐明项目的表示。
34 | 
35 | ## 执行
36 | 
37 | 可以通过联系项目团队在 [INSERT EMAIL ADDRESS] 报告辱骂、骚扰或其他不可接受的行为。所有投诉将被审查和调查，并将导致被认为必要和适合具体情况的回应。项目团队有义务对事件报告者保密。具体执行政策的进一步细节可能会单独发布。
38 | 
39 | 不真诚遵守或执行《行为准则》的项目维护者可能会面临由项目领导层其他成员确定的临时或永久性后果。
40 | 
41 | ## 归属
42 | 
43 | 本行为准则改编自[贡献者公约](https://www.contributor-covenant.org)，版本1.4，可在https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 获取。 


--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 5 | import { Check } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const Checkbox = React.forwardRef<
10 |   React.ElementRef<typeof CheckboxPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
12 | >(({ className, ...props }, ref) => (
13 |   <CheckboxPrimitive.Root
14 |     ref={ref}
15 |     className={cn(
16 |       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
17 |       className
18 |     )}
19 |     {...props}
20 |   >
21 |     <CheckboxPrimitive.Indicator
22 |       className={cn("flex items-center justify-center text-current")}
23 |     >
24 |       <Check className="h-4 w-4" />
25 |     </CheckboxPrimitive.Indicator>
26 |   </CheckboxPrimitive.Root>
27 | ))
28 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
29 | 
30 | export { Checkbox }
31 | 


--------------------------------------------------------------------------------
/src/components/ui/slider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SliderPrimitive from "@radix-ui/react-slider"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Slider = React.forwardRef<
 9 |   React.ElementRef<typeof SliderPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SliderPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex w-full touch-none select-none items-center",
16 |       className
17 |     )}
18 |     {...props}
19 |   >
20 |     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
21 |       <SliderPrimitive.Range className="absolute h-full bg-primary" />
22 |     </SliderPrimitive.Track>
23 |     <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
24 |   </SliderPrimitive.Root>
25 | ))
26 | Slider.displayName = SliderPrimitive.Root.displayName
27 | 
28 | export { Slider }
29 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # 贡献指南
 2 | 
 3 | 非常感谢您对域名监控系统的兴趣！这个项目旨在提供一个简单易用的域名到期监控工具。我们欢迎任何形式的贡献，包括功能请求、bug报告、代码贡献和文档改进。
 4 | 
 5 | ## 如何贡献
 6 | 
 7 | ### 报告Bug或提出功能建议
 8 | 
 9 | 1. 确保该Bug或功能请求尚未在[Issues](https://github.com/LeoJyenn/DomainMonitoring/issues)中被提出
10 | 2. 提交一个新的issue，并尽可能详细地描述问题或建议
11 | 3. 对于Bug报告，请提供复现步骤和相关环境信息
12 | 
13 | ### 提交代码
14 | 
15 | 1. Fork本仓库
16 | 2. 创建您的功能分支 (`git checkout -b feature/amazing-feature`)
17 | 3. 提交您的更改 (`git commit -m 'Add some amazing feature'`)
18 | 4. 推送到分支 (`git push origin feature/amazing-feature`)
19 | 5. 提交Pull Request
20 | 
21 | ### Pull Request规范
22 | 
23 | - 清晰描述您的更改内容和目的
24 | - 确保您的代码符合项目的编码风格
25 | - 更新相关文档
26 | - 确保所有测试通过
27 | 
28 | ## 开发环境设置
29 | 
30 | 1. 克隆仓库:
31 | ```bash
32 | git clone https://github.com/YourUsername/DomainMonitoring.git
33 | cd DomainMonitoring
34 | ```
35 | 
36 | 2. 安装依赖:
37 | ```bash
38 | npm install
39 | ```
40 | 
41 | 3. 启动开发服务器:
42 | ```bash
43 | npm run dev
44 | ```
45 | 
46 | ## 代码规范
47 | 
48 | - 使用TypeScript类型
49 | - 遵循ESLint规则
50 | - 组件使用函数式组件和React Hooks
51 | - 尽量使用现有的UI组件和工具函数
52 | 
53 | ## 版本命名规则
54 | 
55 | 我们遵循[语义化版本](https://semver.org/)，格式为 `主版本号.次版本号.修订号`：
56 | 
57 | - 主版本号：当进行不兼容的API更改时
58 | - 次版本号：当添加向后兼容的功能时
59 | - 修订号：当进行向后兼容的bug修复时
60 | 
61 | ## 许可证
62 | 
63 | 本项目采用MIT许可证，详情请见[LICENSE](LICENSE)文件。通过贡献代码，您同意您的贡献将在相同的许可下发布。 


--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SwitchPrimitives from "@radix-ui/react-switch"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Switch = React.forwardRef<
 9 |   React.ElementRef<typeof SwitchPrimitives.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SwitchPrimitives.Root
13 |     className={cn(
14 |       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
15 |       className
16 |     )}
17 |     {...props}
18 |     ref={ref}
19 |   >
20 |     <SwitchPrimitives.Thumb
21 |       className={cn(
22 |         "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
23 |       )}
24 |     />
25 |   </SwitchPrimitives.Root>
26 | ))
27 | Switch.displayName = SwitchPrimitives.Root.displayName
28 | 
29 | export { Switch }
30 | 


--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: "default",
22 |     },
23 |   }
24 | )
25 | 
26 | export interface BadgeProps
27 |   extends React.HTMLAttributes<HTMLDivElement>,
28 |     VariantProps<typeof badgeVariants> {}
29 | 
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 |   return (
32 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
33 |   )
34 | }
35 | 
36 | export { Badge, badgeVariants }
37 | 


--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const TooltipProvider = TooltipPrimitive.Provider
 9 | 
10 | const Tooltip = TooltipPrimitive.Root
11 | 
12 | const TooltipTrigger = TooltipPrimitive.Trigger
13 | 
14 | const TooltipContent = React.forwardRef<
15 |   React.ElementRef<typeof TooltipPrimitive.Content>,
16 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 |   <TooltipPrimitive.Content
19 |     ref={ref}
20 |     sideOffset={sideOffset}
21 |     className={cn(
22 |       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |       className
24 |     )}
25 |     {...props}
26 |   />
27 | ))
28 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
29 | 
30 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
31 | 


--------------------------------------------------------------------------------
/.idx/dev.nix:
--------------------------------------------------------------------------------
 1 | # To learn more about how to use Nix to configure your environment
 2 | # see: https://firebase.google.com/docs/studio/customize-workspace
 3 | {pkgs}: {
 4 |   # Which nixpkgs channel to use.
 5 |   channel = "stable-24.11"; # or "unstable"
 6 |   # Use https://search.nixos.org/packages to find packages
 7 |   packages = [
 8 |     pkgs.nodejs_20
 9 |     pkgs.zulu
10 |   ];
11 |   # Sets environment variables in the workspace
12 |   env = {};
13 |   # This adds a file watcher to startup the firebase emulators. The emulators will only start if
14 |   # a firebase.json file is written into the user's directory
15 |   services.firebase.emulators = {
16 |     detect = true;
17 |     projectId = "demo-app";
18 |     services = ["auth" "firestore"];
19 |   };
20 |   idx = {
21 |     # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
22 |     extensions = [
23 |       # "vscodevim.vim"
24 |     ];
25 |     workspace = {
26 |       onCreate = {
27 |         default.openFiles = [
28 |           "src/app/page.tsx"
29 |         ];
30 |       };
31 |     };
32 |     # Enable previews and customize configuration
33 |     previews = {
34 |       enable = true;
35 |       previews = {
36 |         web = {
37 |           command = ["npm" "run" "dev" "--" "--port" "$PORT" "--hostname" "0.0.0.0"];
38 |           manager = "web";
39 |         };
40 |       };
41 |     };
42 |   };
43 | }
44 | 


--------------------------------------------------------------------------------
/vps-autostart.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | echo "=== 域名监控系统 - 创建系统服务 ==="
 4 | echo "此脚本将创建系统服务以便应用在服务器重启后自动启动"
 5 | 
 6 | # 获取当前目录的绝对路径
 7 | APP_DIR=$(pwd)
 8 | APP_USER=$(whoami)
 9 | 
10 | # 创建服务文件
11 | SERVICE_FILE="domain-monitor.service"
12 | cat >$SERVICE_FILE <<EOF
13 | [Unit]
14 | Description=Domain Monitoring System
15 | After=network.target
16 | 
17 | [Service]
18 | Type=simple
19 | User=$APP_USER
20 | WorkingDirectory=$APP_DIR
21 | ExecStart=/usr/bin/npm run start
22 | Restart=on-failure
23 | RestartSec=10
24 | StandardOutput=syslog
25 | StandardError=syslog
26 | SyslogIdentifier=domain-monitor
27 | 
28 | [Install]
29 | WantedBy=multi-user.target
30 | EOF
31 | 
32 | echo "服务文件已创建: $SERVICE_FILE"
33 | 
34 | # 复制服务文件并启用服务
35 | echo "复制服务文件到系统目录并启用服务（需要sudo权限）"
36 | sudo cp $SERVICE_FILE /etc/systemd/system/
37 | sudo systemctl daemon-reload
38 | sudo systemctl enable domain-monitor.service
39 | 
40 | echo "启动服务..."
41 | sudo systemctl start domain-monitor.service
42 | 
43 | echo "========================================================"
44 | echo "系统服务已创建并启用!"
45 | echo "服务状态: sudo systemctl status domain-monitor.service"
46 | echo "启动服务: sudo systemctl start domain-monitor.service"
47 | echo "停止服务: sudo systemctl stop domain-monitor.service"
48 | echo "重启服务: sudo systemctl restart domain-monitor.service"
49 | echo "查看日志: sudo journalctl -u domain-monitor.service"
50 | echo "========================================================"
51 | 


--------------------------------------------------------------------------------
/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | "use client"
 3 | 
 4 | import * as React from "react"
 5 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const Popover = PopoverPrimitive.Root
10 | 
11 | const PopoverTrigger = PopoverPrimitive.Trigger
12 | 
13 | const PopoverContent = React.forwardRef<
14 |   React.ElementRef<typeof PopoverPrimitive.Content>,
15 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
16 | >(({ className, align = "center", sideOffset = 4, collisionPadding = 10, ...props }, ref) => ( // Added collisionPadding
17 |   <PopoverPrimitive.Portal>
18 |     <PopoverPrimitive.Content
19 |       ref={ref}
20 |       align={align}
21 |       sideOffset={sideOffset}
22 |       collisionPadding={collisionPadding} // Added collisionPadding
23 |       className={cn(
24 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
25 |         className
26 |       )}
27 |       {...props}
28 |     />
29 |   </PopoverPrimitive.Portal>
30 | ))
31 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
32 | 
33 | export { Popover, PopoverTrigger, PopoverContent }
34 | 


--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | echo "=== 域名监控系统 - 直接部署 ==="
 4 | echo "确保您的服务器已安装Node.js v18或更高版本"
 5 | 
 6 | # 创建数据目录
 7 | echo "创建数据目录..."
 8 | mkdir -p data
 9 | 
10 | # 设置npm镜像
11 | echo "设置npm镜像为淘宝镜像..."
12 | npm config set registry https://registry.npmmirror.com
13 | 
14 | # 安装依赖
15 | echo "安装依赖（这可能需要几分钟时间）..."
16 | npm install --registry=https://registry.npmmirror.com
17 | if [ $? -ne 0 ]; then
18 |     echo "依赖安装失败，尝试使用CNPM..."
19 |     npm install -g cnpm --registry=https://registry.npmmirror.com
20 |     cnpm install
21 | 
22 |     # 如果仍然失败，尝试使用国内CDN安装next
23 |     if [ $? -ne 0 ]; then
24 |         echo "使用CNPM安装失败，尝试直接安装关键依赖..."
25 |         npm install next@15.2.3 react@18.3.1 react-dom@18.3.1 --registry=https://registry.npmmirror.com
26 |     fi
27 | fi
28 | 
29 | # 手动检查next命令是否可用，如果不可用则使用npx
30 | NEXT_CMD="./node_modules/.bin/next"
31 | if [ ! -f "$NEXT_CMD" ]; then
32 |     echo "使用npx构建应用..."
33 |     npx next build
34 | else
35 |     # 构建应用
36 |     echo "构建应用..."
37 |     npm run build
38 | fi
39 | 
40 | # 检查端口是否被占用
41 | if lsof -Pi :9769 -sTCP:LISTEN -t >/dev/null; then
42 |     echo "警告: 端口9769已被占用，尝试关闭现有进程..."
43 |     kill $(lsof -t -i:9769) 2>/dev/null || true
44 |     sleep 2
45 | fi
46 | 
47 | # 启动应用
48 | echo "启动应用..."
49 | nohup npm run start >app.log 2>&1 &
50 | 
51 | # 等待服务启动
52 | echo "等待服务启动..."
53 | sleep 5
54 | 
55 | # 输出IP地址信息
56 | SERVER_IP=$(hostname -I | awk '{print $1}')
57 | echo "==============================================="
58 | echo "应用已在后台启动!"
59 | echo "访问地址: http://$SERVER_IP:9769"
60 | echo "日志保存在: $(pwd)/app.log"
61 | echo "==============================================="
62 | echo "要查看日志，请运行: tail -f app.log"
63 | 


--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Avatar.displayName = AvatarPrimitive.Root.displayName
22 | 
23 | const AvatarImage = React.forwardRef<
24 |   React.ElementRef<typeof AvatarPrimitive.Image>,
25 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26 | >(({ className, ...props }, ref) => (
27 |   <AvatarPrimitive.Image
28 |     ref={ref}
29 |     className={cn("aspect-square h-full w-full", className)}
30 |     {...props}
31 |   />
32 | ))
33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 | 
35 | const AvatarFallback = React.forwardRef<
36 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
37 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38 | >(({ className, ...props }, ref) => (
39 |   <AvatarPrimitive.Fallback
40 |     ref={ref}
41 |     className={cn(
42 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ))
48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 | 
50 | export { Avatar, AvatarImage, AvatarFallback }
51 | 


--------------------------------------------------------------------------------
/src/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 5 | import { Circle } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const RadioGroup = React.forwardRef<
10 |   React.ElementRef<typeof RadioGroupPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
12 | >(({ className, ...props }, ref) => {
13 |   return (
14 |     <RadioGroupPrimitive.Root
15 |       className={cn("grid gap-2", className)}
16 |       {...props}
17 |       ref={ref}
18 |     />
19 |   )
20 | })
21 | RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
22 | 
23 | const RadioGroupItem = React.forwardRef<
24 |   React.ElementRef<typeof RadioGroupPrimitive.Item>,
25 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
26 | >(({ className, ...props }, ref) => {
27 |   return (
28 |     <RadioGroupPrimitive.Item
29 |       ref={ref}
30 |       className={cn(
31 |         "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
32 |         className
33 |       )}
34 |       {...props}
35 |     >
36 |       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
37 |         <Circle className="h-2.5 w-2.5 fill-current text-current" />
38 |       </RadioGroupPrimitive.Indicator>
39 |     </RadioGroupPrimitive.Item>
40 |   )
41 | })
42 | RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
43 | 
44 | export { RadioGroup, RadioGroupItem }
45 | 


--------------------------------------------------------------------------------
/src/components/ui/password-input.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import { Eye, EyeOff } from "lucide-react";
 5 | import { cn } from "@/lib/utils";
 6 | import { Button } from "@/components/ui/button";
 7 | import { Input } from "@/components/ui/input";
 8 | 
 9 | export interface PasswordInputProps
10 |     extends React.InputHTMLAttributes<HTMLInputElement> { }
11 | 
12 | const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
13 |     ({ className, ...props }, ref) => {
14 |         const [showPassword, setShowPassword] = React.useState(false);
15 | 
16 |         return (
17 |             <div className="relative">
18 |                 <Input
19 |                     type={showPassword ? "text" : "password"}
20 |                     className={cn("pr-10", className)}
21 |                     ref={ref}
22 |                     {...props}
23 |                 />
24 |                 <Button
25 |                     type="button"
26 |                     variant="ghost"
27 |                     size="sm"
28 |                     className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
29 |                     onClick={() => setShowPassword((prev) => !prev)}
30 |                     tabIndex={-1}
31 |                 >
32 |                     {showPassword ? (
33 |                         <EyeOff className="h-4 w-4 text-muted-foreground" />
34 |                     ) : (
35 |                         <Eye className="h-4 w-4 text-muted-foreground" />
36 |                     )}
37 |                 </Button>
38 |             </div>
39 |         );
40 |     }
41 | );
42 | 
43 | PasswordInput.displayName = "PasswordInput";
44 | 
45 | export { PasswordInput }; 


--------------------------------------------------------------------------------
/src/components/ui/alert.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const alertVariants = cva(
 7 |   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "bg-background text-foreground",
12 |         destructive:
13 |           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14 |       },
15 |     },
16 |     defaultVariants: {
17 |       variant: "default",
18 |     },
19 |   }
20 | )
21 | 
22 | const Alert = React.forwardRef<
23 |   HTMLDivElement,
24 |   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25 | >(({ className, variant, ...props }, ref) => (
26 |   <div
27 |     ref={ref}
28 |     role="alert"
29 |     className={cn(alertVariants({ variant }), className)}
30 |     {...props}
31 |   />
32 | ))
33 | Alert.displayName = "Alert"
34 | 
35 | const AlertTitle = React.forwardRef<
36 |   HTMLParagraphElement,
37 |   React.HTMLAttributes<HTMLHeadingElement>
38 | >(({ className, ...props }, ref) => (
39 |   <h5
40 |     ref={ref}
41 |     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42 |     {...props}
43 |   />
44 | ))
45 | AlertTitle.displayName = "AlertTitle"
46 | 
47 | const AlertDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <div
52 |     ref={ref}
53 |     className={cn("text-sm [&_p]:leading-relaxed", className)}
54 |     {...props}
55 |   />
56 | ))
57 | AlertDescription.displayName = "AlertDescription"
58 | 
59 | export { Alert, AlertTitle, AlertDescription }
60 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const ScrollArea = React.forwardRef<
 9 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
11 | >(({ className, children, ...props }, ref) => (
12 |   <ScrollAreaPrimitive.Root
13 |     ref={ref}
14 |     className={cn("relative overflow-hidden", className)}
15 |     {...props}
16 |   >
17 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
18 |       {children}
19 |     </ScrollAreaPrimitive.Viewport>
20 |     <ScrollBar />
21 |     <ScrollAreaPrimitive.Corner />
22 |   </ScrollAreaPrimitive.Root>
23 | ))
24 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
25 | 
26 | const ScrollBar = React.forwardRef<
27 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
28 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
29 | >(({ className, orientation = "vertical", ...props }, ref) => (
30 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
31 |     ref={ref}
32 |     orientation={orientation}
33 |     className={cn(
34 |       "flex touch-none select-none transition-colors",
35 |       orientation === "vertical" &&
36 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
37 |       orientation === "horizontal" &&
38 |         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
39 |       className
40 |     )}
41 |     {...props}
42 |   >
43 |     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
44 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
45 | ))
46 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
47 | 
48 | export { ScrollArea, ScrollBar }
49 | 


--------------------------------------------------------------------------------
/src/lib/actions.ts:
--------------------------------------------------------------------------------
 1 | 'use server';
 2 | 
 3 | import { loadDomains, saveDomains, addDomain as addDomainToFile, updateDomain as updateDomainInFile, deleteDomain as deleteDomainFromFile } from './data-storage';
 4 | import { DomainInfo } from './types';
 5 | 
 6 | // 获取所有域名
 7 | export async function getAllDomains(): Promise<DomainInfo[]> {
 8 |     const domains = await loadDomains();
 9 |     return domains.map((domain: any) => ({
10 |         id: domain.id,
11 |         name: domain.name,
12 |         expirationDate: new Date(domain.expirationDate),
13 |         dateAdded: new Date(domain.dateAdded || domain.createdAt || Date.now())
14 |     }));
15 | }
16 | 
17 | // 添加新域名
18 | export async function addDomain(domain: { name: string; expirationDate: Date }): Promise<DomainInfo> {
19 |     const newDomain = await addDomainToFile({
20 |         name: domain.name,
21 |         expirationDate: domain.expirationDate.toISOString(),
22 |         dateAdded: new Date().toISOString()
23 |     });
24 | 
25 |     return {
26 |         id: newDomain.id,
27 |         name: newDomain.name,
28 |         expirationDate: new Date(newDomain.expirationDate),
29 |         dateAdded: new Date(newDomain.dateAdded || newDomain.createdAt)
30 |     };
31 | }
32 | 
33 | // 更新域名
34 | export async function updateDomain(id: string, domainData: { name: string; expirationDate: Date }): Promise<DomainInfo | null> {
35 |     const updatedDomain = await updateDomainInFile(id, {
36 |         name: domainData.name,
37 |         expirationDate: domainData.expirationDate.toISOString(),
38 |     });
39 | 
40 |     if (!updatedDomain) return null;
41 | 
42 |     return {
43 |         id: updatedDomain.id,
44 |         name: updatedDomain.name,
45 |         expirationDate: new Date(updatedDomain.expirationDate),
46 |         dateAdded: new Date(updatedDomain.dateAdded || updatedDomain.createdAt)
47 |     };
48 | }
49 | 
50 | // 删除域名
51 | export async function deleteDomain(id: string): Promise<string> {
52 |     return await deleteDomainFromFile(id);
53 | } 


--------------------------------------------------------------------------------
/docs/build.md:
--------------------------------------------------------------------------------
  1 | # 域名监控系统构建指南
  2 | 
  3 | 本文档详细说明了如何构建域名监控系统的生产版本。
  4 | 
  5 | ## 前提条件
  6 | 
  7 | - Node.js 18.x 或更高版本
  8 | - npm 8.x 或更高版本
  9 | - 如需Docker构建，需要安装Docker和Docker Compose
 10 | 
 11 | ## 标准构建流程
 12 | 
 13 | ### 1. 安装依赖
 14 | 
 15 | ```bash
 16 | npm install
 17 | ```
 18 | 
 19 | ### 2. 生成生产构建
 20 | 
 21 | ```bash
 22 | npm run build
 23 | ```
 24 | 
 25 | 构建成功后，将在`.next`目录中生成生产文件。
 26 | 
 27 | ### 3. 启动生产服务器
 28 | 
 29 | ```bash
 30 | npm run start
 31 | ```
 32 | 
 33 | 服务将在http://localhost:9769上启动。
 34 | 
 35 | ## Docker构建流程
 36 | 
 37 | ### 1. 标准Docker构建
 38 | 
 39 | 使用Docker Compose构建镜像:
 40 | 
 41 | ```bash
 42 | docker-compose build
 43 | ```
 44 | 
 45 | 启动Docker容器:
 46 | 
 47 | ```bash
 48 | docker-compose up -d
 49 | ```
 50 | 
 51 | ### 2. 多架构构建
 52 | 
 53 | 本项目支持构建适用于不同CPU架构的Docker镜像:
 54 | 
 55 | #### Linux/Mac:
 56 | 
 57 | ```bash
 58 | chmod +x build-multiarch.sh
 59 | ./build-multiarch.sh
 60 | docker-compose up -d
 61 | ```
 62 | 
 63 | #### Windows:
 64 | 
 65 | ```cmd
 66 | build-multiarch.bat
 67 | docker-compose up -d
 68 | ```
 69 | 
 70 | 多架构构建支持:
 71 | - x86_64 (AMD64) - 适用于大多数服务器和VPS
 72 | - ARMv7 - 适用于树莓派等ARM设备
 73 | 
 74 | ## 构建自定义
 75 | 
 76 | ### 修改端口
 77 | 
 78 | 如需更改默认的9769端口:
 79 | 
 80 | 1. 修改`package.json`中的开发和启动脚本
 81 | 2. 修改`Dockerfile`中的`PORT`环境变量
 82 | 3. 修改`docker-compose.yml`中的端口映射
 83 | 
 84 | ### 环境变量
 85 | 
 86 | 构建时可使用的环境变量:
 87 | 
 88 | - `PORT`: 应用监听端口
 89 | - `NODE_ENV`: 环境模式（development/production）
 90 | - `DATA_PATH`: 数据存储路径
 91 | 
 92 | 例如:
 93 | 
 94 | ```bash
 95 | PORT=8080 npm run build
 96 | PORT=8080 npm run start
 97 | ```
 98 | 
 99 | Docker中使用环境变量:
100 | 
101 | ```bash
102 | # 修改docker-production.env文件
103 | PORT=8080
104 | ```
105 | 
106 | ## 常见问题
107 | 
108 | ### 构建失败：内存不足
109 | 
110 | 增加Node.js可用内存:
111 | 
112 | ```bash
113 | NODE_OPTIONS=--max_old_space_size=4096 npm run build
114 | ```
115 | 
116 | ### 构建缓慢
117 | 
118 | 确保使用的是生产模式构建:
119 | 
120 | ```bash
121 | NODE_ENV=production npm run build
122 | ```
123 | 
124 | ### 网络问题
125 | 
126 | 如果npm安装依赖时遇到网络问题，可尝试:
127 | 
128 | ```bash
129 | npm install --registry=https://registry.npmmirror.com
130 | ``` 


--------------------------------------------------------------------------------
/src/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useEffect, useState } from 'react';
 4 | 
 5 | export function ThemeProvider() {
 6 |     const [mounted, setMounted] = useState(false);
 7 | 
 8 |     useEffect(() => {
 9 |         // 添加过渡样式到documentElement
10 |         document.documentElement.classList.add('transition-colors');
11 |         document.documentElement.style.transitionDuration = '500ms';
12 | 
13 |         const theme = localStorage.getItem('theme');
14 |         if (theme === 'dark') {
15 |             document.documentElement.classList.add('dark');
16 |         } else if (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches) {
17 |             // 如果系统偏好深色模式，可取消下行注释以跟随系统
18 |             // document.documentElement.classList.add('dark');
19 |             document.documentElement.classList.remove('dark');
20 |         } else {
21 |             document.documentElement.classList.remove('dark');
22 |         }
23 | 
24 |         // 监听系统主题变化
25 |         const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
26 |         const handleSystemThemeChange = (e: MediaQueryListEvent) => {
27 |             const currentTheme = localStorage.getItem('theme');
28 |             // 仅当用户未设置主题偏好时，跟随系统设置
29 |             if (!currentTheme) {
30 |                 if (e.matches) {
31 |                     // 可取消注释以跟随系统自动切换
32 |                     // document.documentElement.classList.add('dark');
33 |                 } else {
34 |                     document.documentElement.classList.remove('dark');
35 |                 }
36 |             }
37 |         };
38 | 
39 |         mediaQuery.addEventListener('change', handleSystemThemeChange);
40 |         setMounted(true);
41 | 
42 |         return () => {
43 |             mediaQuery.removeEventListener('change', handleSystemThemeChange);
44 |             // 清理过渡样式
45 |             document.documentElement.classList.remove('transition-colors');
46 |             document.documentElement.style.transitionDuration = '';
47 |         };
48 |     }, []);
49 | 
50 |     // 仅在客户端渲染后返回内容
51 |     if (!mounted) return null;
52 | 
53 |     return null;
54 | } 


--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Tabs = TabsPrimitive.Root
 9 | 
10 | const TabsList = React.forwardRef<
11 |   React.ElementRef<typeof TabsPrimitive.List>,
12 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
13 | >(({ className, ...props }, ref) => (
14 |   <TabsPrimitive.List
15 |     ref={ref}
16 |     className={cn(
17 |       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
18 |       className
19 |     )}
20 |     {...props}
21 |   />
22 | ))
23 | TabsList.displayName = TabsPrimitive.List.displayName
24 | 
25 | const TabsTrigger = React.forwardRef<
26 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
27 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
28 | >(({ className, ...props }, ref) => (
29 |   <TabsPrimitive.Trigger
30 |     ref={ref}
31 |     className={cn(
32 |       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
33 |       className
34 |     )}
35 |     {...props}
36 |   />
37 | ))
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
39 | 
40 | const TabsContent = React.forwardRef<
41 |   React.ElementRef<typeof TabsPrimitive.Content>,
42 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
43 | >(({ className, ...props }, ref) => (
44 |   <TabsPrimitive.Content
45 |     ref={ref}
46 |     className={cn(
47 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
48 |       className
49 |     )}
50 |     {...props}
51 |   />
52 | ))
53 | TabsContent.displayName = TabsPrimitive.Content.displayName
54 | 
55 | export { Tabs, TabsList, TabsTrigger, TabsContent }
56 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLDivElement,
34 |   React.HTMLAttributes<HTMLDivElement>
35 | >(({ className, ...props }, ref) => (
36 |   <div
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLDivElement,
49 |   React.HTMLAttributes<HTMLDivElement>
50 | >(({ className, ...props }, ref) => (
51 |   <div
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 | 


--------------------------------------------------------------------------------
/src/lib/data-storage.ts:
--------------------------------------------------------------------------------
 1 | 'use server';
 2 | 
 3 | import fs from 'fs';
 4 | import path from 'path';
 5 | 
 6 | const DATA_DIR = path.join(process.cwd(), 'data');
 7 | const DOMAINS_FILE = path.join(DATA_DIR, 'domains.json');
 8 | 
 9 | // 确保数据目录存在
10 | export async function ensureDataDir() {
11 |     if (!fs.existsSync(DATA_DIR)) {
12 |         fs.mkdirSync(DATA_DIR, { recursive: true });
13 |     }
14 | 
15 |     if (!fs.existsSync(DOMAINS_FILE)) {
16 |         fs.writeFileSync(DOMAINS_FILE, JSON.stringify({ domains: [] }), 'utf8');
17 |     }
18 | }
19 | 
20 | // 保存域名数据
21 | export async function saveDomains(domains: any[]) {
22 |     await ensureDataDir();
23 |     fs.writeFileSync(DOMAINS_FILE, JSON.stringify({ domains }, null, 2), 'utf8');
24 |     return domains;
25 | }
26 | 
27 | // 读取域名数据
28 | export async function loadDomains() {
29 |     await ensureDataDir();
30 |     try {
31 |         const data = fs.readFileSync(DOMAINS_FILE, 'utf8');
32 |         return JSON.parse(data).domains || [];
33 |     } catch (error) {
34 |         console.error('Error loading domains:', error);
35 |         return [];
36 |     }
37 | }
38 | 
39 | // 添加域名
40 | export async function addDomain(domain: any) {
41 |     const domains = await loadDomains();
42 |     const newDomain = {
43 |         id: Date.now().toString(),
44 |         ...domain,
45 |         createdAt: new Date().toISOString(),
46 |     };
47 |     domains.push(newDomain);
48 |     await saveDomains(domains);
49 |     return newDomain;
50 | }
51 | 
52 | // 更新域名
53 | export async function updateDomain(id: string, domainData: any) {
54 |     const domains = await loadDomains();
55 |     const index = domains.findIndex((d: any) => d.id === id);
56 |     if (index !== -1) {
57 |         domains[index] = {
58 |             ...domains[index],
59 |             ...domainData,
60 |             updatedAt: new Date().toISOString(),
61 |         };
62 |         await saveDomains(domains);
63 |         return domains[index];
64 |     }
65 |     return null;
66 | }
67 | 
68 | // 删除域名
69 | export async function deleteDomain(id: string) {
70 |     const domains = await loadDomains();
71 |     const filteredDomains = domains.filter((d: any) => d.id !== id);
72 |     await saveDomains(filteredDomains);
73 |     return id;
74 | } 


--------------------------------------------------------------------------------
/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AccordionPrimitive from "@radix-ui/react-accordion"
 5 | import { ChevronDown } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const Accordion = AccordionPrimitive.Root
10 | 
11 | const AccordionItem = React.forwardRef<
12 |   React.ElementRef<typeof AccordionPrimitive.Item>,
13 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14 | >(({ className, ...props }, ref) => (
15 |   <AccordionPrimitive.Item
16 |     ref={ref}
17 |     className={cn("border-b", className)}
18 |     {...props}
19 |   />
20 | ))
21 | AccordionItem.displayName = "AccordionItem"
22 | 
23 | const AccordionTrigger = React.forwardRef<
24 |   React.ElementRef<typeof AccordionPrimitive.Trigger>,
25 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26 | >(({ className, children, ...props }, ref) => (
27 |   <AccordionPrimitive.Header className="flex">
28 |     <AccordionPrimitive.Trigger
29 |       ref={ref}
30 |       className={cn(
31 |         "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
32 |         className
33 |       )}
34 |       {...props}
35 |     >
36 |       {children}
37 |       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
38 |     </AccordionPrimitive.Trigger>
39 |   </AccordionPrimitive.Header>
40 | ))
41 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
42 | 
43 | const AccordionContent = React.forwardRef<
44 |   React.ElementRef<typeof AccordionPrimitive.Content>,
45 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46 | >(({ className, children, ...props }, ref) => (
47 |   <AccordionPrimitive.Content
48 |     ref={ref}
49 |     className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
50 |     {...props}
51 |   >
52 |     <div className={cn("pb-4 pt-0", className)}>{children}</div>
53 |   </AccordionPrimitive.Content>
54 | ))
55 | 
56 | AccordionContent.displayName = AccordionPrimitive.Content.displayName
57 | 
58 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
59 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "domain-monitor",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack -p 9769",
 7 |     "genkit:dev": "genkit start -- tsx src/ai/dev.ts",
 8 |     "genkit:watch": "genkit start -- tsx --watch src/ai/dev.ts",
 9 |     "build": "next build",
10 |     "start": "next start -p 9769",
11 |     "lint": "next lint",
12 |     "typecheck": "tsc --noEmit"
13 |   },
14 |   "dependencies": {
15 |     "@genkit-ai/googleai": "^1.8.0",
16 |     "@genkit-ai/next": "^1.8.0",
17 |     "@hookform/resolvers": "^4.1.3",
18 |     "@radix-ui/react-accordion": "^1.2.3",
19 |     "@radix-ui/react-alert-dialog": "^1.1.6",
20 |     "@radix-ui/react-avatar": "^1.1.3",
21 |     "@radix-ui/react-checkbox": "^1.1.4",
22 |     "@radix-ui/react-dialog": "^1.1.6",
23 |     "@radix-ui/react-dropdown-menu": "^2.1.6",
24 |     "@radix-ui/react-label": "^2.1.2",
25 |     "@radix-ui/react-menubar": "^1.1.6",
26 |     "@radix-ui/react-popover": "^1.1.6",
27 |     "@radix-ui/react-progress": "^1.1.2",
28 |     "@radix-ui/react-radio-group": "^1.2.3",
29 |     "@radix-ui/react-scroll-area": "^1.2.3",
30 |     "@radix-ui/react-select": "^2.1.6",
31 |     "@radix-ui/react-separator": "^1.1.2",
32 |     "@radix-ui/react-slider": "^1.2.3",
33 |     "@radix-ui/react-slot": "^1.1.2",
34 |     "@radix-ui/react-switch": "^1.1.3",
35 |     "@radix-ui/react-tabs": "^1.1.3",
36 |     "@radix-ui/react-toast": "^1.2.6",
37 |     "@radix-ui/react-tooltip": "^1.1.8",
38 |     "@tanstack-query-firebase/react": "^1.0.5",
39 |     "@tanstack/react-query": "^5.66.0",
40 |     "class-variance-authority": "^0.7.1",
41 |     "clsx": "^2.1.1",
42 |     "date-fns": "^3.6.0",
43 |     "dotenv": "^16.5.0",
44 |     "firebase": "^11.7.3",
45 |     "genkit": "^1.8.0",
46 |     "lucide-react": "^0.475.0",
47 |     "next": "15.2.3",
48 |     "patch-package": "^8.0.0",
49 |     "react": "^18.3.1",
50 |     "react-day-picker": "^8.10.1",
51 |     "react-dom": "^18.3.1",
52 |     "react-hook-form": "^7.54.2",
53 |     "recharts": "^2.15.1",
54 |     "tailwind-merge": "^3.0.1",
55 |     "tailwindcss-animate": "^1.0.7",
56 |     "zod": "^3.24.2"
57 |   },
58 |   "devDependencies": {
59 |     "@types/node": "^20",
60 |     "@types/react": "^18",
61 |     "@types/react-dom": "^18",
62 |     "genkit-cli": "^1.8.0",
63 |     "postcss": "^8",
64 |     "tailwindcss": "^3.4.1",
65 |     "typescript": "^5"
66 |   }
67 | }


--------------------------------------------------------------------------------
/docs/deployment.md:
--------------------------------------------------------------------------------
  1 | # 域名监控系统部署指南
  2 | 
  3 | 本文档提供了域名监控系统的详细部署步骤，包括Docker部署和手动部署方式。
  4 | 
  5 | ## Docker部署（推荐）
  6 | 
  7 | ### 前提条件
  8 | 
  9 | - 已安装Docker (20.10.0+)
 10 | - 已安装Docker Compose (2.0.0+)
 11 | - 服务器至少1GB内存
 12 | 
 13 | ### 步骤
 14 | 
 15 | 1. **克隆代码仓库**
 16 | 
 17 |    ```bash
 18 |    git clone <仓库URL>
 19 |    cd 域名监控
 20 |    ```
 21 | 
 22 | 2. **单架构部署**
 23 | 
 24 |    如果您只需要在单一架构上部署（例如只在x86_64上），可以直接使用docker-compose:
 25 | 
 26 |    ```bash
 27 |    docker-compose build
 28 |    docker-compose up -d
 29 |    ```
 30 | 
 31 | 3. **多架构部署**
 32 | 
 33 |    如果您需要同时支持x86_64和ARMv7架构，请使用提供的多架构构建脚本:
 34 | 
 35 |    **Linux/Mac OS:**
 36 |    ```bash
 37 |    chmod +x build-multiarch.sh
 38 |    ./build-multiarch.sh
 39 |    docker-compose up -d
 40 |    ```
 41 | 
 42 |    **Windows:**
 43 |    ```cmd
 44 |    build-multiarch.bat
 45 |    docker-compose up -d
 46 |    ```
 47 | 
 48 | 4. **验证部署**
 49 | 
 50 |    访问 `http://<服务器IP>:9769` 验证系统是否已成功部署。
 51 |    默认登录凭据:
 52 |    - 用户名: admin
 53 |    - 密码: admin
 54 | 
 55 | 5. **持久化数据**
 56 | 
 57 |    所有数据都存储在Docker卷`domain_data`中。即使容器重启，数据也会保留。
 58 |    如需备份数据:
 59 | 
 60 |    ```bash
 61 |    # 查找卷的位置
 62 |    docker volume inspect domain_data
 63 |    
 64 |    # 使用位置路径进行备份
 65 |    ```
 66 | 
 67 | ## 手动部署
 68 | 
 69 | 如果您不想使用Docker，也可以手动部署:
 70 | 
 71 | 1. **安装Node.js**
 72 | 
 73 |    确保您安装了Node.js 18或更高版本。
 74 | 
 75 | 2. **克隆代码并安装依赖**
 76 | 
 77 |    ```bash
 78 |    git clone <仓库URL>
 79 |    cd 域名监控
 80 |    npm install
 81 |    ```
 82 | 
 83 | 3. **构建生产版本**
 84 | 
 85 |    ```bash
 86 |    npm run build
 87 |    ```
 88 | 
 89 | 4. **启动服务**
 90 | 
 91 |    ```bash
 92 |    npm run start
 93 |    ```
 94 | 
 95 | 5. **系统守护（可选）**
 96 | 
 97 |    在生产环境中，建议使用PM2等工具让应用持续运行:
 98 | 
 99 |    ```bash
100 |    npm install -g pm2
101 |    pm2 start npm --name "domain-monitor" -- start
102 |    pm2 save
103 |    ```
104 | 
105 | ## 故障排除
106 | 
107 | 1. **端口冲突**
108 | 
109 |    如果9769端口已被占用，请修改以下文件中的端口:
110 |    - `docker-compose.yml`
111 |    - `Dockerfile` (环境变量)
112 |    - `package.json` (start脚本)
113 | 
114 | 2. **Docker权限问题**
115 | 
116 |    Linux系统中可能需要sudo权限运行Docker命令，或将用户添加到docker组:
117 |    
118 |    ```bash
119 |    sudo usermod -aG docker $USER
120 |    # 需要重新登录才能生效
121 |    ```
122 | 
123 | 3. **内存不足**
124 | 
125 |    如果在构建过程中出现内存不足错误，可以增加服务器/Docker的可用内存，或尝试:
126 |    
127 |    ```bash
128 |    NODE_OPTIONS=--max_old_space_size=2048 npm run build
129 |    ``` 


--------------------------------------------------------------------------------
/deploy-pm2.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | echo "=== 域名监控系统 - PM2部署 ==="
 4 | echo "确保您的服务器已安装Node.js v18或更高版本"
 5 | 
 6 | # 创建数据目录
 7 | echo "创建数据目录..."
 8 | mkdir -p data
 9 | 
10 | # 设置npm镜像
11 | echo "设置npm镜像为淘宝镜像..."
12 | npm config set registry https://registry.npmmirror.com
13 | 
14 | # 安装PM2（如果需要）
15 | if ! command -v pm2 &>/dev/null; then
16 |     echo "安装PM2..."
17 |     npm install -g pm2 --registry=https://registry.npmmirror.com
18 | 
19 |     # 如果安装失败，可能需要sudo权限
20 |     if ! command -v pm2 &>/dev/null; then
21 |         echo "尝试使用sudo安装PM2（可能需要输入密码）..."
22 |         sudo npm install -g pm2 --registry=https://registry.npmmirror.com
23 |     fi
24 | fi
25 | 
26 | # 检查PM2是否安装成功
27 | if ! command -v pm2 &>/dev/null; then
28 |     echo "错误: PM2安装失败，请手动安装后重试"
29 |     echo "  sudo npm install -g pm2 --registry=https://registry.npmmirror.com"
30 |     exit 1
31 | fi
32 | 
33 | # 安装依赖
34 | echo "安装依赖（这可能需要几分钟时间）..."
35 | npm install --registry=https://registry.npmmirror.com
36 | if [ $? -ne 0 ]; then
37 |     echo "依赖安装失败，尝试使用CNPM..."
38 |     npm install -g cnpm --registry=https://registry.npmmirror.com
39 |     cnpm install
40 | 
41 |     # 如果仍然失败，尝试使用国内CDN安装next
42 |     if [ $? -ne 0 ]; then
43 |         echo "使用CNPM安装失败，尝试直接安装关键依赖..."
44 |         npm install next@15.2.3 react@18.3.1 react-dom@18.3.1 --registry=https://registry.npmmirror.com
45 |     fi
46 | fi
47 | 
48 | # 手动检查next命令是否可用，如果不可用则使用npx
49 | NEXT_CMD="./node_modules/.bin/next"
50 | if [ ! -f "$NEXT_CMD" ]; then
51 |     echo "使用npx构建应用..."
52 |     npx next build
53 | else
54 |     # 构建应用
55 |     echo "构建应用..."
56 |     npm run build
57 | fi
58 | 
59 | # 检查是否已有运行的实例
60 | if pm2 list | grep -q "domain-monitor"; then
61 |     echo "检测到已有运行实例，正在停止..."
62 |     pm2 stop domain-monitor
63 |     pm2 delete domain-monitor
64 | fi
65 | 
66 | # 使用PM2启动应用
67 | echo "使用PM2启动应用..."
68 | pm2 start npm --name "domain-monitor" -- run start
69 | 
70 | # 保存PM2配置以便开机自启
71 | echo "保存PM2配置..."
72 | pm2 save
73 | 
74 | # 添加开机自启说明
75 | echo "====================================================="
76 | echo "应用已通过PM2启动!"
77 | SERVER_IP=$(hostname -I | awk '{print $1}')
78 | echo "访问地址: http://$SERVER_IP:9769"
79 | echo "====================================================="
80 | echo "PM2管理命令:"
81 | echo "  - 查看日志: pm2 logs domain-monitor"
82 | echo "  - 停止应用: pm2 stop domain-monitor"
83 | echo "  - 重启应用: pm2 restart domain-monitor"
84 | echo "  - 查看状态: pm2 status"
85 | echo
86 | echo "设置开机自启:"
87 | echo "  运行: pm2 startup"
88 | echo "  然后按照提示运行显示的命令"
89 | 


--------------------------------------------------------------------------------
/src/components/ui/calendar.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | "use client"
 3 | 
 4 | import * as React from "react"
 5 | import { ChevronLeft, ChevronRight } from "lucide-react"
 6 | import { DayPicker } from "react-day-picker"
 7 | 
 8 | import { cn } from "@/lib/utils"
 9 | import { buttonVariants } from "@/components/ui/button"
10 | 
11 | export type CalendarProps = React.ComponentProps<typeof DayPicker>
12 | 
13 | function Calendar({
14 |   className,
15 |   classNames,
16 |   showOutsideDays = true,
17 |   ...props
18 | }: CalendarProps) {
19 |   return (
20 |     <DayPicker
21 |       showOutsideDays={showOutsideDays}
22 |       fixedWeeks // Add this prop to stabilize height
23 |       className={cn("p-2", className)} // Reduced padding
24 |       classNames={{
25 |         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
26 |         month: "space-y-3", // Slightly reduced space
27 |         caption: "flex items-center justify-between pt-1 w-full",
28 |         caption_label: "text-xs font-medium", // Reduced font size
29 |         nav: "space-x-1 flex items-center",
30 |         nav_button: cn(
31 |           buttonVariants({ variant: "outline" }),
32 |           "h-6 w-6 bg-transparent p-0 opacity-50 hover:opacity-100" // Reduced size
33 |         ),
34 |         nav_button_previous: "",
35 |         nav_button_next: "",
36 |         table: "w-full border-collapse space-y-1",
37 |         head_row: "flex",
38 |         head_cell:
39 |           "text-muted-foreground rounded-md w-8 font-normal text-[0.7rem]", // Reduced size and font size
40 |         row: "flex w-full mt-1", // Reduced margin
41 |         cell: "h-8 w-8 text-center text-xs p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", // Reduced size and font size
42 |         day: cn(
43 |           buttonVariants({ variant: "ghost" }),
44 |           "h-8 w-8 p-0 font-normal aria-selected:opacity-100" // Reduced size
45 |         ),
46 |         day_range_end: "day-range-end",
47 |         day_selected:
48 |           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
49 |         day_today: "bg-accent text-accent-foreground",
50 |         day_outside:
51 |           "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground", // Added opacity for outside days
52 |         day_disabled: "text-muted-foreground opacity-50",
53 |         day_range_middle:
54 |           "aria-selected:bg-accent aria-selected:text-accent-foreground",
55 |         day_hidden: "invisible",
56 |         ...classNames,
57 |       }}
58 |       components={{
59 |         IconLeft: ({ className: iconClassName, ...restProps }) => (
60 |           <ChevronLeft className={cn("h-3.5 w-3.5", iconClassName)} {...restProps} /> // Reduced icon size
61 |         ),
62 |         IconRight: ({ className: iconClassName, ...restProps }) => (
63 |           <ChevronRight className={cn("h-3.5 w-3.5", iconClassName)} {...restProps} /> // Reduced icon size
64 |         ),
65 |       }}
66 |       {...props}
67 |     />
68 |   )
69 | }
70 | Calendar.displayName = "Calendar"
71 | 
72 | export { Calendar }
73 | 


--------------------------------------------------------------------------------
/nginx-node-deploy.sh:
--------------------------------------------------------------------------------
  1 | #!/bin/bash
  2 | 
  3 | echo "=== 域名监控系统 - Nginx+Node部署 ==="
  4 | echo "确保您的服务器已安装Node.js v18和Nginx"
  5 | 
  6 | # 检查Nginx是否安装
  7 | if ! command -v nginx &>/dev/null; then
  8 |     echo "错误: 未检测到Nginx，请先安装Nginx"
  9 |     echo "  Ubuntu/Debian: sudo apt install nginx"
 10 |     echo "  CentOS/RHEL: sudo yum install nginx"
 11 |     exit 1
 12 | fi
 13 | 
 14 | # 创建数据目录
 15 | echo "创建数据目录..."
 16 | mkdir -p data
 17 | 
 18 | # 设置npm镜像
 19 | echo "设置npm镜像为淘宝镜像..."
 20 | npm config set registry https://registry.npmmirror.com
 21 | 
 22 | # 安装依赖
 23 | echo "安装依赖（这可能需要几分钟时间）..."
 24 | npm install --registry=https://registry.npmmirror.com
 25 | if [ $? -ne 0 ]; then
 26 |     echo "依赖安装失败，尝试使用CNPM..."
 27 |     npm install -g cnpm --registry=https://registry.npmmirror.com
 28 |     cnpm install
 29 | 
 30 |     # 如果仍然失败，尝试使用国内CDN安装next
 31 |     if [ $? -ne 0 ]; then
 32 |         echo "使用CNPM安装失败，尝试直接安装关键依赖..."
 33 |         npm install next@15.2.3 react@18.3.1 react-dom@18.3.1 --registry=https://registry.npmmirror.com
 34 |     fi
 35 | fi
 36 | 
 37 | # 手动检查next命令是否可用，如果不可用则使用npx
 38 | NEXT_CMD="./node_modules/.bin/next"
 39 | if [ ! -f "$NEXT_CMD" ]; then
 40 |     echo "使用npx构建应用..."
 41 |     npx next build
 42 | else
 43 |     # 构建应用
 44 |     echo "构建应用..."
 45 |     npm run build
 46 | fi
 47 | 
 48 | # 获取服务器IP
 49 | SERVER_IP=$(hostname -I | awk '{print $1}')
 50 | 
 51 | # 创建Nginx配置
 52 | echo "配置Nginx..."
 53 | cat >domain-monitor.conf <<EOF
 54 | server {
 55 |     listen 80;
 56 |     server_name _;
 57 | 
 58 |     location / {
 59 |         proxy_pass http://localhost:9769;
 60 |         proxy_http_version 1.1;
 61 |         proxy_set_header Upgrade \$http_upgrade;
 62 |         proxy_set_header Connection 'upgrade';
 63 |         proxy_set_header Host \$host;
 64 |         proxy_cache_bypass \$http_upgrade;
 65 |     }
 66 | }
 67 | EOF
 68 | 
 69 | echo "将Nginx配置复制到/etc/nginx/conf.d/ (需要sudo权限)"
 70 | sudo cp domain-monitor.conf /etc/nginx/conf.d/
 71 | 
 72 | # 检查配置是否有效
 73 | echo "检查Nginx配置..."
 74 | sudo nginx -t
 75 | 
 76 | if [ $? -ne 0 ]; then
 77 |     echo "Nginx配置检查失败，请检查配置文件"
 78 |     exit 1
 79 | fi
 80 | 
 81 | echo "重启Nginx (需要sudo权限)"
 82 | sudo systemctl restart nginx
 83 | 
 84 | # 检查端口是否被占用
 85 | if lsof -Pi :9769 -sTCP:LISTEN -t >/dev/null; then
 86 |     echo "警告: 端口9769已被占用，尝试关闭现有进程..."
 87 |     kill $(lsof -t -i:9769) 2>/dev/null || true
 88 |     sleep 2
 89 | fi
 90 | 
 91 | # 启动Node应用
 92 | echo "启动Node应用..."
 93 | nohup npm run start >app.log 2>&1 &
 94 | 
 95 | # 等待服务启动
 96 | echo "等待服务启动..."
 97 | sleep 5
 98 | 
 99 | echo "======================================================================================================================="
100 | echo "应用已通过Nginx部署成功!"
101 | echo "通过以下地址访问:"
102 | echo "  - http://$SERVER_IP"
103 | echo "  - http://您的域名 (如果已配置DNS)"
104 | echo "======================================================================================================================="
105 | echo "Node应用运行在后台，日志保存在: $(pwd)/app.log"
106 | echo "Nginx配置文件位置: /etc/nginx/conf.d/domain-monitor.conf"
107 | echo
108 | echo "如需配置HTTPS，请使用Let's Encrypt:"
109 | echo "  sudo apt install certbot python3-certbot-nginx"
110 | echo "  sudo certbot --nginx -d 您的域名"
111 | echo
112 | echo "服务器重启后，您需要手动重启应用程序:"
113 | echo "  cd $(pwd) && ./nginx-node-deploy.sh"
114 | echo
115 | echo "建议: 考虑使用PM2进行进程管理，以实现自动重启: ./deploy-pm2.sh"
116 | 


--------------------------------------------------------------------------------
/src/components/ui/table.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | 
  3 | import { cn } from "@/lib/utils"
  4 | 
  5 | const Table = React.forwardRef<
  6 |   HTMLTableElement,
  7 |   React.HTMLAttributes<HTMLTableElement>
  8 | >(({ className, ...props }, ref) => (
  9 |   <div className="relative w-full overflow-auto">
 10 |     <table
 11 |       ref={ref}
 12 |       className={cn("w-full caption-bottom text-sm", className)}
 13 |       {...props}
 14 |     />
 15 |   </div>
 16 | ))
 17 | Table.displayName = "Table"
 18 | 
 19 | const TableHeader = React.forwardRef<
 20 |   HTMLTableSectionElement,
 21 |   React.HTMLAttributes<HTMLTableSectionElement>
 22 | >(({ className, ...props }, ref) => (
 23 |   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 24 | ))
 25 | TableHeader.displayName = "TableHeader"
 26 | 
 27 | const TableBody = React.forwardRef<
 28 |   HTMLTableSectionElement,
 29 |   React.HTMLAttributes<HTMLTableSectionElement>
 30 | >(({ className, ...props }, ref) => (
 31 |   <tbody
 32 |     ref={ref}
 33 |     className={cn("[&_tr:last-child]:border-0", className)}
 34 |     {...props}
 35 |   />
 36 | ))
 37 | TableBody.displayName = "TableBody"
 38 | 
 39 | const TableFooter = React.forwardRef<
 40 |   HTMLTableSectionElement,
 41 |   React.HTMLAttributes<HTMLTableSectionElement>
 42 | >(({ className, ...props }, ref) => (
 43 |   <tfoot
 44 |     ref={ref}
 45 |     className={cn(
 46 |       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
 47 |       className
 48 |     )}
 49 |     {...props}
 50 |   />
 51 | ))
 52 | TableFooter.displayName = "TableFooter"
 53 | 
 54 | const TableRow = React.forwardRef<
 55 |   HTMLTableRowElement,
 56 |   React.HTMLAttributes<HTMLTableRowElement>
 57 | >(({ className, ...props }, ref) => (
 58 |   <tr
 59 |     ref={ref}
 60 |     className={cn(
 61 |       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
 62 |       className
 63 |     )}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | TableRow.displayName = "TableRow"
 68 | 
 69 | const TableHead = React.forwardRef<
 70 |   HTMLTableCellElement,
 71 |   React.ThHTMLAttributes<HTMLTableCellElement>
 72 | >(({ className, ...props }, ref) => (
 73 |   <th
 74 |     ref={ref}
 75 |     className={cn(
 76 |       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | ))
 82 | TableHead.displayName = "TableHead"
 83 | 
 84 | const TableCell = React.forwardRef<
 85 |   HTMLTableCellElement,
 86 |   React.TdHTMLAttributes<HTMLTableCellElement>
 87 | >(({ className, ...props }, ref) => (
 88 |   <td
 89 |     ref={ref}
 90 |     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
 91 |     {...props}
 92 |   />
 93 | ))
 94 | TableCell.displayName = "TableCell"
 95 | 
 96 | const TableCaption = React.forwardRef<
 97 |   HTMLTableCaptionElement,
 98 |   React.HTMLAttributes<HTMLTableCaptionElement>
 99 | >(({ className, ...props }, ref) => (
100 |   <caption
101 |     ref={ref}
102 |     className={cn("mt-4 text-sm text-muted-foreground", className)}
103 |     {...props}
104 |   />
105 | ))
106 | TableCaption.displayName = "TableCaption"
107 | 
108 | export {
109 |   Table,
110 |   TableHeader,
111 |   TableBody,
112 |   TableFooter,
113 |   TableHead,
114 |   TableRow,
115 |   TableCell,
116 |   TableCaption,
117 | }
118 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 域名监控系统
  2 | 
  3 | ![License](https://img.shields.io/github/license/LeoJyenn/DomainMonitoring)
  4 | ![Issues](https://img.shields.io/github/issues/LeoJyenn/DomainMonitoring)
  5 | ![Stars](https://img.shields.io/github/stars/LeoJyenn/DomainMonitoring)
  6 | 
  7 | 域名监控系统是一个用于跟踪和管理域名到期时间的应用程序。它可以帮助您避免域名过期带来的问题
  8 | 
  9 | ## 功能特点
 10 | 
 11 | - 域名到期时间监控
 12 | - 简洁美观的用户界面
 13 | - 支持添加、编辑和删除域名
 14 | - 数据持久化存储
 15 | 
 16 | ## 技术栈
 17 | 
 18 | - Next.js 15
 19 | - React 18
 20 | - TypeScript
 21 | - Tailwind CSS
 22 | 
 23 | ## 快速开始
 24 | 
 25 | 所有部署方法的前置步骤：
 26 | 
 27 | 1. 克隆仓库:
 28 |    ```bash
 29 |    git clone https://github.com/LeoJyenn/DomainMonitoring.git
 30 |    ```
 31 | 
 32 | 2. 进入项目目录:
 33 |    ```bash
 34 |    cd DomainMonitoring  
 35 |    ```
 36 | 
 37 | ### VPS部署选项
 38 | 
 39 | #### 1. 使用PM2进程管理器部署（推荐）
 40 | 
 41 | PM2是Node.js应用程序的进程管理器，可以保持应用程序持续运行。
 42 | 
 43 | 1. 确保系统已安装Node.js (推荐v18或更高版本)
 44 | 
 45 | 2. 为脚本添加执行权限:
 46 |    ```bash
 47 |    chmod +x deploy-pm2.sh
 48 |    ```
 49 | 
 50 | 3. 运行PM2部署脚本:
 51 |    ```bash
 52 |    ./deploy-pm2.sh
 53 |    ```
 54 | 
 55 | 4. 访问应用:
 56 |    浏览器中打开 `http://服务器IP:9769`
 57 | 
 58 | **PM2管理命令:**
 59 | - 查看日志: `pm2 logs domain-monitor`
 60 | - 停止应用: `pm2 stop domain-monitor`
 61 | - 重启应用: `pm2 restart domain-monitor`
 62 | - 设置开机自启: `pm2 startup` 然后按提示执行命令，最后 `pm2 save`
 63 | 
 64 | #### 2. 使用Nginx+Node部署
 65 | 
 66 | 适合需要配置域名访问的生产环境。
 67 | 
 68 | 1. 确保系统已安装Node.js和Nginx
 69 | 
 70 | 2. 为脚本添加执行权限:
 71 |    ```bash
 72 |    chmod +x nginx-node-deploy.sh
 73 |    ```
 74 | 
 75 | 3. 运行Nginx部署脚本:
 76 |    ```bash
 77 |    ./nginx-node-deploy.sh
 78 |    ```
 79 | 
 80 | 4. 访问应用:
 81 |    浏览器中打开服务器IP地址或配置的域名
 82 | 
 83 | **注意：** 如果需要配置HTTPS，请修改生成的Nginx配置文件，添加SSL证书配置。
 84 | 
 85 | #### 3. 直接部署（简单方式）
 86 | 
 87 | 适合临时测试或个人使用。
 88 | 
 89 | 1. 确保系统已安装Node.js (推荐v18或更高版本)
 90 | 
 91 | 2. 为脚本添加执行权限:
 92 |    ```bash
 93 |    chmod +x deploy.sh
 94 |    ```
 95 | 
 96 | 3. 运行部署脚本:
 97 |    ```bash
 98 |    ./deploy.sh
 99 |    ```
100 | 
101 | 4. 访问应用:
102 |    浏览器中打开 `http://服务器IP:9769`
103 | 
104 | **注意：** 此方法在终端关闭后会继续在后台运行，日志保存在app.log文件中。
105 | 
106 | #### 4. 使用系统服务实现自启动（适用于大多数Linux服务器）
107 | 
108 | 在VPS中设置系统服务，实现服务器重启后自动启动应用：
109 | 
110 | 1. 确保系统已安装Node.js (推荐v18或更高版本)
111 | 
112 | 2. 为脚本添加执行权限:
113 |    ```bash
114 |    chmod +x vps-autostart.sh
115 |    ```
116 | 
117 | 3. 运行自启动配置脚本:
118 |    ```bash
119 |    ./vps-autostart.sh
120 |    ```
121 | 
122 | 4. 访问应用:
123 |    浏览器中打开 `http://服务器IP:9769`
124 | 
125 | **系统服务管理命令:**
126 | - 检查状态: `sudo systemctl status domain-monitor.service`
127 | - 启动服务: `sudo systemctl start domain-monitor.service`
128 | - 停止服务: `sudo systemctl stop domain-monitor.service`
129 | - 查看日志: `sudo journalctl -u domain-monitor.service`
130 | 
131 | ### 手动开发/运行
132 | 
133 | 1. 安装依赖:
134 |    ```bash
135 |    npm install
136 |    ```
137 | 
138 | 2. 开发模式:
139 |    ```bash
140 |    npm run dev
141 |    ```
142 | 
143 | 3. 构建生产版本:
144 |    ```bash
145 |    npm run build
146 |    ```
147 | 
148 | 4. 启动生产服务器:
149 |    ```bash
150 |    npm run start
151 |    ```
152 | 
153 | ## 数据持久化
154 | 
155 | 系统使用文件系统存储域名数据，确保数据不会丢失。数据文件保存在项目根目录的`data`文件夹中。
156 | 
157 | ## 支持的架构
158 | 
159 | - x86_64 (大多数VPS和服务器)
160 | - ARMv7 (如Raspberry Pi等ARM设备)
161 | 
162 | ## 端口配置
163 | 
164 | 默认情况下，应用运行在`9769`端口。如需修改，请更新以下文件:
165 | - `package.json`中的开发和启动脚本
166 | - 如果使用Nginx，需更新Nginx配置中的代理端口
167 | 
168 | ## 配置
169 | 
170 | 默认用户名/密码为:
171 | - 用户名: admin
172 | - 密码: admin
173 | 
174 | 首次登录后，请在设置中修改密码。
175 | 
176 | ## 参与贡献
177 | 
178 | 我们欢迎任何形式的贡献！如果您想要贡献代码，请查看 [贡献指南](CONTRIBUTING.md)。
179 | 
180 | ## 路线图
181 | 
182 | - [ ] 添加邮件提醒功能
183 | - [ ] 支持批量导入域名
184 | - [ ] 添加更多自定义设置选项
185 | - [ ] 支持API集成
186 | 
187 | ## 许可证
188 | 
189 | 该项目采用 MIT 许可证 - 详情请查看 [LICENSE](LICENSE) 文件
190 | 
191 | ## 联系方式
192 | 
193 | 如有任何问题或建议，请通过 GitHub Issues 联系我们。
194 | 
195 | ## 致谢
196 | 
197 | 感谢所有为本项目做出贡献的开发者！
198 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { X } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <X className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogClose,
116 |   DialogTrigger,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


--------------------------------------------------------------------------------
/src/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SheetPrimitive from "@radix-ui/react-dialog"
  5 | import { cva, type VariantProps } from "class-variance-authority"
  6 | import { X } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | 
 10 | const Sheet = SheetPrimitive.Root
 11 | 
 12 | const SheetTrigger = SheetPrimitive.Trigger
 13 | 
 14 | const SheetClose = SheetPrimitive.Close
 15 | 
 16 | const SheetPortal = SheetPrimitive.Portal
 17 | 
 18 | const SheetOverlay = React.forwardRef<
 19 |   React.ElementRef<typeof SheetPrimitive.Overlay>,
 20 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 21 | >(({ className, ...props }, ref) => (
 22 |   <SheetPrimitive.Overlay
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |     ref={ref}
 29 |   />
 30 | ))
 31 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 32 | 
 33 | const sheetVariants = cva(
 34 |   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 35 |   {
 36 |     variants: {
 37 |       side: {
 38 |         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 39 |         bottom:
 40 |           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 41 |         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
 42 |         right:
 43 |           "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 44 |       },
 45 |     },
 46 |     defaultVariants: {
 47 |       side: "right",
 48 |     },
 49 |   }
 50 | )
 51 | 
 52 | interface SheetContentProps
 53 |   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 54 |     VariantProps<typeof sheetVariants> {}
 55 | 
 56 | const SheetContent = React.forwardRef<
 57 |   React.ElementRef<typeof SheetPrimitive.Content>,
 58 |   SheetContentProps
 59 | >(({ side = "right", className, children, ...props }, ref) => (
 60 |   <SheetPortal>
 61 |     <SheetOverlay />
 62 |     <SheetPrimitive.Content
 63 |       ref={ref}
 64 |       className={cn(sheetVariants({ side }), className)}
 65 |       {...props}
 66 |     >
 67 |       {children}
 68 |       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
 69 |         <X className="h-4 w-4" />
 70 |         <span className="sr-only">Close</span>
 71 |       </SheetPrimitive.Close>
 72 |     </SheetPrimitive.Content>
 73 |   </SheetPortal>
 74 | ))
 75 | SheetContent.displayName = SheetPrimitive.Content.displayName
 76 | 
 77 | const SheetHeader = ({
 78 |   className,
 79 |   ...props
 80 | }: React.HTMLAttributes<HTMLDivElement>) => (
 81 |   <div
 82 |     className={cn(
 83 |       "flex flex-col space-y-2 text-center sm:text-left",
 84 |       className
 85 |     )}
 86 |     {...props}
 87 |   />
 88 | )
 89 | SheetHeader.displayName = "SheetHeader"
 90 | 
 91 | const SheetFooter = ({
 92 |   className,
 93 |   ...props
 94 | }: React.HTMLAttributes<HTMLDivElement>) => (
 95 |   <div
 96 |     className={cn(
 97 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 98 |       className
 99 |     )}
100 |     {...props}
101 |   />
102 | )
103 | SheetFooter.displayName = "SheetFooter"
104 | 
105 | const SheetTitle = React.forwardRef<
106 |   React.ElementRef<typeof SheetPrimitive.Title>,
107 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
108 | >(({ className, ...props }, ref) => (
109 |   <SheetPrimitive.Title
110 |     ref={ref}
111 |     className={cn("text-lg font-semibold text-foreground", className)}
112 |     {...props}
113 |   />
114 | ))
115 | SheetTitle.displayName = SheetPrimitive.Title.displayName
116 | 
117 | const SheetDescription = React.forwardRef<
118 |   React.ElementRef<typeof SheetPrimitive.Description>,
119 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
120 | >(({ className, ...props }, ref) => (
121 |   <SheetPrimitive.Description
122 |     ref={ref}
123 |     className={cn("text-sm text-muted-foreground", className)}
124 |     {...props}
125 |   />
126 | ))
127 | SheetDescription.displayName = SheetPrimitive.Description.displayName
128 | 
129 | export {
130 |   Sheet,
131 |   SheetPortal,
132 |   SheetOverlay,
133 |   SheetTrigger,
134 |   SheetClose,
135 |   SheetContent,
136 |   SheetHeader,
137 |   SheetFooter,
138 |   SheetTitle,
139 |   SheetDescription,
140 | }
141 | 


--------------------------------------------------------------------------------
/src/hooks/use-toast.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | "use client"
  3 | 
  4 | // Inspired by react-hot-toast library
  5 | import * as React from "react"
  6 | 
  7 | import type {
  8 |   ToastActionElement,
  9 |   ToastProps,
 10 | } from "@/components/ui/toast"
 11 | 
 12 | const TOAST_LIMIT = 1
 13 | const TOAST_REMOVE_DELAY = 5000 // Changed from 1000000 to 5000
 14 | 
 15 | type ToasterToast = ToastProps & {
 16 |   id: string
 17 |   title?: React.ReactNode
 18 |   description?: React.ReactNode
 19 |   action?: ToastActionElement
 20 | }
 21 | 
 22 | const actionTypes = {
 23 |   ADD_TOAST: "ADD_TOAST",
 24 |   UPDATE_TOAST: "UPDATE_TOAST",
 25 |   DISMISS_TOAST: "DISMISS_TOAST",
 26 |   REMOVE_TOAST: "REMOVE_TOAST",
 27 | } as const
 28 | 
 29 | let count = 0
 30 | 
 31 | function genId() {
 32 |   count = (count + 1) % Number.MAX_SAFE_INTEGER
 33 |   return count.toString()
 34 | }
 35 | 
 36 | type ActionType = typeof actionTypes
 37 | 
 38 | type Action =
 39 |   | {
 40 |       type: ActionType["ADD_TOAST"]
 41 |       toast: ToasterToast
 42 |     }
 43 |   | {
 44 |       type: ActionType["UPDATE_TOAST"]
 45 |       toast: Partial<ToasterToast>
 46 |     }
 47 |   | {
 48 |       type: ActionType["DISMISS_TOAST"]
 49 |       toastId?: ToasterToast["id"]
 50 |     }
 51 |   | {
 52 |       type: ActionType["REMOVE_TOAST"]
 53 |       toastId?: ToasterToast["id"]
 54 |     }
 55 | 
 56 | interface State {
 57 |   toasts: ToasterToast[]
 58 | }
 59 | 
 60 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 61 | 
 62 | const addToRemoveQueue = (toastId: string) => {
 63 |   if (toastTimeouts.has(toastId)) {
 64 |     return
 65 |   }
 66 | 
 67 |   const timeout = setTimeout(() => {
 68 |     toastTimeouts.delete(toastId)
 69 |     dispatch({
 70 |       type: "REMOVE_TOAST",
 71 |       toastId: toastId,
 72 |     })
 73 |   }, TOAST_REMOVE_DELAY)
 74 | 
 75 |   toastTimeouts.set(toastId, timeout)
 76 | }
 77 | 
 78 | export const reducer = (state: State, action: Action): State => {
 79 |   switch (action.type) {
 80 |     case "ADD_TOAST":
 81 |       return {
 82 |         ...state,
 83 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 84 |       }
 85 | 
 86 |     case "UPDATE_TOAST":
 87 |       return {
 88 |         ...state,
 89 |         toasts: state.toasts.map((t) =>
 90 |           t.id === action.toast.id ? { ...t, ...action.toast } : t
 91 |         ),
 92 |       }
 93 | 
 94 |     case "DISMISS_TOAST": {
 95 |       const { toastId } = action
 96 | 
 97 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 98 |       // but I'll keep it here for simplicity
 99 |       if (toastId) {
100 |         addToRemoveQueue(toastId)
101 |       } else {
102 |         state.toasts.forEach((toast) => {
103 |           addToRemoveQueue(toast.id)
104 |         })
105 |       }
106 | 
107 |       return {
108 |         ...state,
109 |         toasts: state.toasts.map((t) =>
110 |           t.id === toastId || toastId === undefined
111 |             ? {
112 |                 ...t,
113 |                 open: false,
114 |               }
115 |             : t
116 |         ),
117 |       }
118 |     }
119 |     case "REMOVE_TOAST":
120 |       if (action.toastId === undefined) {
121 |         return {
122 |           ...state,
123 |           toasts: [],
124 |         }
125 |       }
126 |       return {
127 |         ...state,
128 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
129 |       }
130 |   }
131 | }
132 | 
133 | const listeners: Array<(state: State) => void> = []
134 | 
135 | let memoryState: State = { toasts: [] }
136 | 
137 | function dispatch(action: Action) {
138 |   memoryState = reducer(memoryState, action)
139 |   listeners.forEach((listener) => {
140 |     listener(memoryState)
141 |   })
142 | }
143 | 
144 | type Toast = Omit<ToasterToast, "id">
145 | 
146 | function toast({ ...props }: Toast) {
147 |   const id = genId()
148 | 
149 |   const update = (props: ToasterToast) =>
150 |     dispatch({
151 |       type: "UPDATE_TOAST",
152 |       toast: { ...props, id },
153 |     })
154 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
155 | 
156 |   dispatch({
157 |     type: "ADD_TOAST",
158 |     toast: {
159 |       ...props,
160 |       id,
161 |       open: true,
162 |       onOpenChange: (open) => {
163 |         if (!open) dismiss()
164 |       },
165 |     },
166 |   })
167 | 
168 |   return {
169 |     id: id,
170 |     dismiss,
171 |     update,
172 |   }
173 | }
174 | 
175 | function useToast() {
176 |   const [state, setState] = React.useState<State>(memoryState)
177 | 
178 |   React.useEffect(() => {
179 |     listeners.push(setState)
180 |     return () => {
181 |       const index = listeners.indexOf(setState)
182 |       if (index > -1) {
183 |         listeners.splice(index, 1)
184 |       }
185 |     }
186 |   }, [state])
187 | 
188 |   return {
189 |     ...state,
190 |     toast,
191 |     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
192 |   }
193 | }
194 | 
195 | export { useToast, toast }
196 | 


--------------------------------------------------------------------------------
/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as LabelPrimitive from "@radix-ui/react-label"
  5 | import { Slot } from "@radix-ui/react-slot"
  6 | import {
  7 |   Controller,
  8 |   FormProvider,
  9 |   useFormContext,
 10 |   type ControllerProps,
 11 |   type FieldPath,
 12 |   type FieldValues,
 13 | } from "react-hook-form"
 14 | 
 15 | import { cn } from "@/lib/utils"
 16 | import { Label } from "@/components/ui/label"
 17 | 
 18 | const Form = FormProvider
 19 | 
 20 | type FormFieldContextValue<
 21 |   TFieldValues extends FieldValues = FieldValues,
 22 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 23 | > = {
 24 |   name: TName
 25 | }
 26 | 
 27 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 28 |   {} as FormFieldContextValue
 29 | )
 30 | 
 31 | const FormField = <
 32 |   TFieldValues extends FieldValues = FieldValues,
 33 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 34 | >({
 35 |   ...props
 36 | }: ControllerProps<TFieldValues, TName>) => {
 37 |   return (
 38 |     <FormFieldContext.Provider value={{ name: props.name }}>
 39 |       <Controller {...props} />
 40 |     </FormFieldContext.Provider>
 41 |   )
 42 | }
 43 | 
 44 | const useFormField = () => {
 45 |   const fieldContext = React.useContext(FormFieldContext)
 46 |   const itemContext = React.useContext(FormItemContext)
 47 |   const { getFieldState, formState } = useFormContext()
 48 | 
 49 |   const fieldState = getFieldState(fieldContext.name, formState)
 50 | 
 51 |   if (!fieldContext) {
 52 |     throw new Error("useFormField should be used within <FormField>")
 53 |   }
 54 | 
 55 |   const { id } = itemContext
 56 | 
 57 |   return {
 58 |     id,
 59 |     name: fieldContext.name,
 60 |     formItemId: `${id}-form-item`,
 61 |     formDescriptionId: `${id}-form-item-description`,
 62 |     formMessageId: `${id}-form-item-message`,
 63 |     ...fieldState,
 64 |   }
 65 | }
 66 | 
 67 | type FormItemContextValue = {
 68 |   id: string
 69 | }
 70 | 
 71 | const FormItemContext = React.createContext<FormItemContextValue>(
 72 |   {} as FormItemContextValue
 73 | )
 74 | 
 75 | const FormItem = React.forwardRef<
 76 |   HTMLDivElement,
 77 |   React.HTMLAttributes<HTMLDivElement>
 78 | >(({ className, ...props }, ref) => {
 79 |   const id = React.useId()
 80 | 
 81 |   return (
 82 |     <FormItemContext.Provider value={{ id }}>
 83 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 84 |     </FormItemContext.Provider>
 85 |   )
 86 | })
 87 | FormItem.displayName = "FormItem"
 88 | 
 89 | const FormLabel = React.forwardRef<
 90 |   React.ElementRef<typeof LabelPrimitive.Root>,
 91 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 92 | >(({ className, ...props }, ref) => {
 93 |   const { error, formItemId } = useFormField()
 94 | 
 95 |   return (
 96 |     <Label
 97 |       ref={ref}
 98 |       className={cn(error && "text-destructive", className)}
 99 |       htmlFor={formItemId}
100 |       {...props}
101 |     />
102 |   )
103 | })
104 | FormLabel.displayName = "FormLabel"
105 | 
106 | const FormControl = React.forwardRef<
107 |   React.ElementRef<typeof Slot>,
108 |   React.ComponentPropsWithoutRef<typeof Slot>
109 | >(({ ...props }, ref) => {
110 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
111 | 
112 |   return (
113 |     <Slot
114 |       ref={ref}
115 |       id={formItemId}
116 |       aria-describedby={
117 |         !error
118 |           ? `${formDescriptionId}`
119 |           : `${formDescriptionId} ${formMessageId}`
120 |       }
121 |       aria-invalid={!!error}
122 |       {...props}
123 |     />
124 |   )
125 | })
126 | FormControl.displayName = "FormControl"
127 | 
128 | const FormDescription = React.forwardRef<
129 |   HTMLParagraphElement,
130 |   React.HTMLAttributes<HTMLParagraphElement>
131 | >(({ className, ...props }, ref) => {
132 |   const { formDescriptionId } = useFormField()
133 | 
134 |   return (
135 |     <p
136 |       ref={ref}
137 |       id={formDescriptionId}
138 |       className={cn("text-sm text-muted-foreground", className)}
139 |       {...props}
140 |     />
141 |   )
142 | })
143 | FormDescription.displayName = "FormDescription"
144 | 
145 | const FormMessage = React.forwardRef<
146 |   HTMLParagraphElement,
147 |   React.HTMLAttributes<HTMLParagraphElement>
148 | >(({ className, children, ...props }, ref) => {
149 |   const { error, formMessageId } = useFormField()
150 |   const body = error ? String(error?.message ?? "") : children
151 | 
152 |   if (!body) {
153 |     return null
154 |   }
155 | 
156 |   return (
157 |     <p
158 |       ref={ref}
159 |       id={formMessageId}
160 |       className={cn("text-sm font-medium text-destructive mt-1.5", className)}
161 |       {...props}
162 |     >
163 |       {body}
164 |     </p>
165 |   )
166 | })
167 | FormMessage.displayName = "FormMessage"
168 | 
169 | export {
170 |   useFormField,
171 |   Form,
172 |   FormItem,
173 |   FormLabel,
174 |   FormControl,
175 |   FormDescription,
176 |   FormMessage,
177 |   FormField,
178 | }
179 | 


--------------------------------------------------------------------------------
/src/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | import { buttonVariants } from "@/components/ui/button"
  8 | 
  9 | const AlertDialog = AlertDialogPrimitive.Root
 10 | 
 11 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 12 | 
 13 | const AlertDialogPortal = AlertDialogPrimitive.Portal
 14 | 
 15 | const AlertDialogOverlay = React.forwardRef<
 16 |   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
 17 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 18 | >(({ className, ...props }, ref) => (
 19 |   <AlertDialogPrimitive.Overlay
 20 |     className={cn(
 21 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 22 |       className
 23 |     )}
 24 |     {...props}
 25 |     ref={ref}
 26 |   />
 27 | ))
 28 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 29 | 
 30 | const AlertDialogContent = React.forwardRef<
 31 |   React.ElementRef<typeof AlertDialogPrimitive.Content>,
 32 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 33 | >(({ className, ...props }, ref) => (
 34 |   <AlertDialogPortal>
 35 |     <AlertDialogOverlay />
 36 |     <AlertDialogPrimitive.Content
 37 |       ref={ref}
 38 |       className={cn(
 39 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 40 |         className
 41 |       )}
 42 |       {...props}
 43 |     />
 44 |   </AlertDialogPortal>
 45 | ))
 46 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 47 | 
 48 | const AlertDialogHeader = ({
 49 |   className,
 50 |   ...props
 51 | }: React.HTMLAttributes<HTMLDivElement>) => (
 52 |   <div
 53 |     className={cn(
 54 |       "flex flex-col space-y-2 text-center sm:text-left",
 55 |       className
 56 |     )}
 57 |     {...props}
 58 |   />
 59 | )
 60 | AlertDialogHeader.displayName = "AlertDialogHeader"
 61 | 
 62 | const AlertDialogFooter = ({
 63 |   className,
 64 |   ...props
 65 | }: React.HTMLAttributes<HTMLDivElement>) => (
 66 |   <div
 67 |     className={cn(
 68 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 69 |       className
 70 |     )}
 71 |     {...props}
 72 |   />
 73 | )
 74 | AlertDialogFooter.displayName = "AlertDialogFooter"
 75 | 
 76 | const AlertDialogTitle = React.forwardRef<
 77 |   React.ElementRef<typeof AlertDialogPrimitive.Title>,
 78 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 79 | >(({ className, ...props }, ref) => (
 80 |   <AlertDialogPrimitive.Title
 81 |     ref={ref}
 82 |     className={cn("text-lg font-semibold", className)}
 83 |     {...props}
 84 |   />
 85 | ))
 86 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 87 | 
 88 | const AlertDialogDescription = React.forwardRef<
 89 |   React.ElementRef<typeof AlertDialogPrimitive.Description>,
 90 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 91 | >(({ className, ...props }, ref) => (
 92 |   <AlertDialogPrimitive.Description
 93 |     ref={ref}
 94 |     className={cn("text-sm text-muted-foreground", className)}
 95 |     {...props}
 96 |   />
 97 | ))
 98 | AlertDialogDescription.displayName =
 99 |   AlertDialogPrimitive.Description.displayName
100 | 
101 | const AlertDialogAction = React.forwardRef<
102 |   React.ElementRef<typeof AlertDialogPrimitive.Action>,
103 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
104 | >(({ className, ...props }, ref) => (
105 |   <AlertDialogPrimitive.Action
106 |     ref={ref}
107 |     className={cn(buttonVariants(), className)}
108 |     {...props}
109 |   />
110 | ))
111 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
112 | 
113 | const AlertDialogCancel = React.forwardRef<
114 |   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
115 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
116 | >(({ className, ...props }, ref) => (
117 |   <AlertDialogPrimitive.Cancel
118 |     ref={ref}
119 |     className={cn(
120 |       buttonVariants({ variant: "outline" }),
121 |       "mt-2 sm:mt-0",
122 |       className
123 |     )}
124 |     {...props}
125 |   />
126 | ))
127 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
128 | 
129 | export {
130 |   AlertDialog,
131 |   AlertDialogPortal,
132 |   AlertDialogOverlay,
133 |   AlertDialogTrigger,
134 |   AlertDialogContent,
135 |   AlertDialogHeader,
136 |   AlertDialogFooter,
137 |   AlertDialogTitle,
138 |   AlertDialogDescription,
139 |   AlertDialogAction,
140 |   AlertDialogCancel,
141 | }
142 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
  1 | import type { Config } from "tailwindcss";
  2 | 
  3 | export default {
  4 | 	darkMode: ["class"],
  5 | 	content: [
  6 | 		"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
  7 | 		"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
  8 | 		"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  9 | 	],
 10 | 	theme: {
 11 | 		extend: {
 12 | 			fontFamily: {
 13 | 				sans: ['var(--font-geist-sans)', 'system-ui', '-apple-system', 'BlinkMacSystemFont', "Segoe UI", 'Roboto', "Helvetica Neue", 'Arial', "Noto Sans", 'sans-serif', "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"],
 14 | 				mono: ['var(--font-geist-mono)', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace'],
 15 | 			},
 16 | 			colors: {
 17 | 				background: 'hsl(var(--background))',
 18 | 				foreground: 'hsl(var(--foreground))',
 19 | 				card: {
 20 | 					DEFAULT: 'hsl(var(--card))',
 21 | 					foreground: 'hsl(var(--card-foreground))'
 22 | 				},
 23 | 				popover: {
 24 | 					DEFAULT: 'hsl(var(--popover))',
 25 | 					foreground: 'hsl(var(--popover-foreground))'
 26 | 				},
 27 | 				primary: {
 28 | 					DEFAULT: 'hsl(var(--primary))',
 29 | 					foreground: 'hsl(var(--primary-foreground))'
 30 | 				},
 31 | 				secondary: {
 32 | 					DEFAULT: 'hsl(var(--secondary))',
 33 | 					foreground: 'hsl(var(--secondary-foreground))'
 34 | 				},
 35 | 				muted: {
 36 | 					DEFAULT: 'hsl(var(--muted))',
 37 | 					foreground: 'hsl(var(--muted-foreground))'
 38 | 				},
 39 | 				accent: {
 40 | 					DEFAULT: 'hsl(var(--accent))',
 41 | 					foreground: 'hsl(var(--accent-foreground))'
 42 | 				},
 43 | 				destructive: {
 44 | 					DEFAULT: 'hsl(var(--destructive))',
 45 | 					foreground: 'hsl(var(--destructive-foreground))'
 46 | 				},
 47 | 				success: { // Added success color
 48 | 					DEFAULT: 'hsl(var(--success))',
 49 | 					foreground: 'hsl(var(--success-foreground))'
 50 | 				},
 51 | 				border: 'hsl(var(--border))',
 52 | 				input: 'hsl(var(--input))',
 53 | 				ring: 'hsl(var(--ring))',
 54 | 				chart: {
 55 | 					'1': 'hsl(var(--chart-1))',
 56 | 					'2': 'hsl(var(--chart-2))',
 57 | 					'3': 'hsl(var(--chart-3))',
 58 | 					'4': 'hsl(var(--chart-4))',
 59 | 					'5': 'hsl(var(--chart-5))'
 60 | 				},
 61 | 				sidebar: {
 62 | 					DEFAULT: 'hsl(var(--sidebar-background))',
 63 | 					foreground: 'hsl(var(--sidebar-foreground))',
 64 | 					primary: 'hsl(var(--sidebar-primary))',
 65 | 					'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
 66 | 					accent: 'hsl(var(--sidebar-accent))',
 67 | 					'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
 68 | 					border: 'hsl(var(--sidebar-border))',
 69 | 					ring: 'hsl(var(--sidebar-ring))'
 70 | 				}
 71 | 			},
 72 | 			borderRadius: {
 73 | 				lg: 'var(--radius)',
 74 | 				md: 'calc(var(--radius) - 2px)',
 75 | 				sm: 'calc(var(--radius) - 4px)'
 76 | 			},
 77 | 			keyframes: {
 78 | 				'accordion-down': {
 79 | 					from: {
 80 | 						height: '0'
 81 | 					},
 82 | 					to: {
 83 | 						height: 'var(--radix-accordion-content-height)'
 84 | 					}
 85 | 				},
 86 | 				'accordion-up': {
 87 | 					from: {
 88 | 						height: 'var(--radix-accordion-content-height)'
 89 | 					},
 90 | 					to: {
 91 | 						height: '0'
 92 | 					}
 93 | 				},
 94 | 				'fade-in': {
 95 | 					'0%': { opacity: '0' },
 96 | 					'100%': { opacity: '1' }
 97 | 				},
 98 | 				'fade-out': {
 99 | 					'0%': { opacity: '1' },
100 | 					'100%': { opacity: '0' }
101 | 				},
102 | 				'scale-in': {
103 | 					'0%': { opacity: '0', transform: 'scale(0.95)' },
104 | 					'100%': { opacity: '1', transform: 'scale(1)' }
105 | 				},
106 | 				'scale-out': {
107 | 					'0%': { opacity: '1', transform: 'scale(1)' },
108 | 					'100%': { opacity: '0', transform: 'scale(0.95)' }
109 | 				},
110 | 				'slide-in-top': {
111 | 					'0%': { opacity: '0', transform: 'translateY(-10px)' },
112 | 					'100%': { opacity: '1', transform: 'translateY(0)' }
113 | 				},
114 | 				'slide-out-top': {
115 | 					'0%': { opacity: '1', transform: 'translateY(0)' },
116 | 					'100%': { opacity: '0', transform: 'translateY(-10px)' }
117 | 				}
118 | 			},
119 | 			animation: {
120 | 				'accordion-down': 'accordion-down 0.2s ease-out',
121 | 				'accordion-up': 'accordion-up 0.2s ease-out',
122 | 				'fade-in': 'fade-in 0.2s ease-in',
123 | 				'fade-out': 'fade-out 0.15s ease-out',
124 | 				'scale-in': 'scale-in 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
125 | 				'scale-out': 'scale-out 0.15s cubic-bezier(0.7, 0, 0.84, 0)',
126 | 				'slide-in-top': 'slide-in-top 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
127 | 				'slide-out-top': 'slide-out-top 0.15s cubic-bezier(0.7, 0, 0.84, 0)'
128 | 			},
129 | 			transitionTimingFunction: {
130 | 				'ease-in-out-smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
131 | 				'ease-out-smooth': 'cubic-bezier(0.16, 1, 0.3, 1)',
132 | 				'ease-in-smooth': 'cubic-bezier(0.7, 0, 0.84, 0)'
133 | 			}
134 | 		}
135 | 	},
136 | 	safelist: [
137 | 		{
138 | 			pattern: /bg-(?:muted|destructive|success)/,
139 | 			variants: ["hover"],
140 | 		},
141 | 		{
142 | 			pattern: /animate-(?:fade-in|fade-out|scale-in|scale-out|slide-in-top|slide-out-top)/,
143 | 		}
144 | 	],
145 | 	plugins: [require("tailwindcss-animate")],
146 | } satisfies Config;
147 | 


--------------------------------------------------------------------------------
/0001-NPM-URL.patch:
--------------------------------------------------------------------------------
  1 | From 0fd6bd2da1cca986cd28c170ddf5684c67431fe1 Mon Sep 17 00:00:00 2001
  2 | From: LeoJyenn <77463167+LeoJyenn@users.noreply.github.com>
  3 | Date: Wed, 21 May 2025 17:17:48 +0800
  4 | Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=83=A8=E7=BD=B2=E8=84=9A?=
  5 |  =?UTF-8?q?=E6=9C=AC=EF=BC=8C=E8=A7=A3=E5=86=B3NPM=E4=BE=9D=E8=B5=96?=
  6 |  =?UTF-8?q?=E5=92=8CURL=E9=97=AE=E9=A2=98=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
  7 |  =?UTF-8?q?=E5=9B=BD=E5=86=85=E9=95=9C=E5=83=8F=E6=94=AF=E6=8C=81?=
  8 | MIME-Version: 1.0
  9 | Content-Type: text/plain; charset=UTF-8
 10 | Content-Transfer-Encoding: 8bit
 11 | 
 12 | ---
 13 |  deploy-pm2.sh        | 36 +++++++++++++++++++++++++++++-------
 14 |  deploy.sh            | 30 ++++++++++++++++++++++++++----
 15 |  nginx-node-deploy.sh | 32 +++++++++++++++++++++++++++-----
 16 |  3 files changed, 82 insertions(+), 16 deletions(-)
 17 | 
 18 | diff --git a/deploy-pm2.sh b/deploy-pm2.sh
 19 | index 2c05b33..8b539c4 100644
 20 | --- a/deploy-pm2.sh
 21 | +++ b/deploy-pm2.sh
 22 | @@ -7,32 +7,54 @@ echo "确保您的服务器已安装Node.js v18或更高版本"
 23 |  echo "创建数据目录..."
 24 |  mkdir -p data
 25 |  
 26 | +# 设置npm镜像
 27 | +echo "设置npm镜像为淘宝镜像..."
 28 | +npm config set registry https://registry.npmmirror.com
 29 | +
 30 |  # 安装PM2（如果需要）
 31 |  if ! command -v pm2 &>/dev/null; then
 32 |      echo "安装PM2..."
 33 | -    npm install -g pm2
 34 | +    npm install -g pm2 --registry=https://registry.npmmirror.com
 35 |  
 36 |      # 如果安装失败，可能需要sudo权限
 37 |      if ! command -v pm2 &>/dev/null; then
 38 |          echo "尝试使用sudo安装PM2（可能需要输入密码）..."
 39 | -        sudo npm install -g pm2
 40 | +        sudo npm install -g pm2 --registry=https://registry.npmmirror.com
 41 |      fi
 42 |  fi
 43 |  
 44 |  # 检查PM2是否安装成功
 45 |  if ! command -v pm2 &>/dev/null; then
 46 |      echo "错误: PM2安装失败，请手动安装后重试"
 47 | -    echo "  sudo npm install -g pm2"
 48 | +    echo "  sudo npm install -g pm2 --registry=https://registry.npmmirror.com"
 49 |      exit 1
 50 |  fi
 51 |  
 52 |  # 安装依赖
 53 |  echo "安装依赖（这可能需要几分钟时间）..."
 54 | -npm install
 55 | +npm install --registry=https://registry.npmmirror.com
 56 | +if [ $? -ne 0 ]; then
 57 | +    echo "依赖安装失败，尝试使用CNPM..."
 58 | +    npm install -g cnpm --registry=https://registry.npmmirror.com
 59 | +    cnpm install
 60 |  
 61 | -# 构建应用
 62 | -echo "构建应用..."
 63 | -npm run build
 64 | +    # 如果仍然失败，尝试使用国内CDN安装next
 65 | +    if [ $? -ne 0 ]; then
 66 | +        echo "使用CNPM安装失败，尝试直接安装关键依赖..."
 67 | +        npm install next@15.2.3 react@18.3.1 react-dom@18.3.1 --registry=https://registry.npmmirror.com
 68 | +    fi
 69 | +fi
 70 | +
 71 | +# 手动检查next命令是否可用，如果不可用则使用npx
 72 | +NEXT_CMD="./node_modules/.bin/next"
 73 | +if [ ! -f "$NEXT_CMD" ]; then
 74 | +    echo "使用npx构建应用..."
 75 | +    npx next build
 76 | +else
 77 | +    # 构建应用
 78 | +    echo "构建应用..."
 79 | +    npm run build
 80 | +fi
 81 |  
 82 |  # 检查是否已有运行的实例
 83 |  if pm2 list | grep -q "domain-monitor"; then
 84 | diff --git a/deploy.sh b/deploy.sh
 85 | index 856b3d9..32c55af 100644
 86 | --- a/deploy.sh
 87 | +++ b/deploy.sh
 88 | @@ -7,13 +7,35 @@ echo "确保您的服务器已安装Node.js v18或更高版本"
 89 |  echo "创建数据目录..."
 90 |  mkdir -p data
 91 |  
 92 | +# 设置npm镜像
 93 | +echo "设置npm镜像为淘宝镜像..."
 94 | +npm config set registry https://registry.npmmirror.com
 95 | +
 96 |  # 安装依赖
 97 |  echo "安装依赖（这可能需要几分钟时间）..."
 98 | -npm install
 99 | +npm install --registry=https://registry.npmmirror.com
100 | +if [ $? -ne 0 ]; then
101 | +    echo "依赖安装失败，尝试使用CNPM..."
102 | +    npm install -g cnpm --registry=https://registry.npmmirror.com
103 | +    cnpm install
104 | +
105 | +    # 如果仍然失败，尝试使用国内CDN安装next
106 | +    if [ $? -ne 0 ]; then
107 | +        echo "使用CNPM安装失败，尝试直接安装关键依赖..."
108 | +        npm install next@15.2.3 react@18.3.1 react-dom@18.3.1 --registry=https://registry.npmmirror.com
109 | +    fi
110 | +fi
111 |  
112 | -# 构建应用
113 | -echo "构建应用..."
114 | -npm run build
115 | +# 手动检查next命令是否可用，如果不可用则使用npx
116 | +NEXT_CMD="./node_modules/.bin/next"
117 | +if [ ! -f "$NEXT_CMD" ]; then
118 | +    echo "使用npx构建应用..."
119 | +    npx next build
120 | +else
121 | +    # 构建应用
122 | +    echo "构建应用..."
123 | +    npm run build
124 | +fi
125 |  
126 |  # 检查端口是否被占用
127 |  if lsof -Pi :9769 -sTCP:LISTEN -t >/dev/null; then
128 | diff --git a/nginx-node-deploy.sh b/nginx-node-deploy.sh
129 | index 38a7d87..8a62747 100644
130 | --- a/nginx-node-deploy.sh
131 | +++ b/nginx-node-deploy.sh
132 | @@ -15,13 +15,35 @@ fi
133 |  echo "创建数据目录..."
134 |  mkdir -p data
135 |  
136 | +# 设置npm镜像
137 | +echo "设置npm镜像为淘宝镜像..."
138 | +npm config set registry https://registry.npmmirror.com
139 | +
140 |  # 安装依赖
141 |  echo "安装依赖（这可能需要几分钟时间）..."
142 | -npm install
143 | +npm install --registry=https://registry.npmmirror.com
144 | +if [ $? -ne 0 ]; then
145 | +    echo "依赖安装失败，尝试使用CNPM..."
146 | +    npm install -g cnpm --registry=https://registry.npmmirror.com
147 | +    cnpm install
148 | +
149 | +    # 如果仍然失败，尝试使用国内CDN安装next
150 | +    if [ $? -ne 0 ]; then
151 | +        echo "使用CNPM安装失败，尝试直接安装关键依赖..."
152 | +        npm install next@15.2.3 react@18.3.1 react-dom@18.3.1 --registry=https://registry.npmmirror.com
153 | +    fi
154 | +fi
155 |  
156 | -# 构建应用
157 | -echo "构建应用..."
158 | -npm run build
159 | +# 手动检查next命令是否可用，如果不可用则使用npx
160 | +NEXT_CMD="./node_modules/.bin/next"
161 | +if [ ! -f "$NEXT_CMD" ]; then
162 | +    echo "使用npx构建应用..."
163 | +    npx next build
164 | +else
165 | +    # 构建应用
166 | +    echo "构建应用..."
167 | +    npm run build
168 | +fi
169 |  
170 |  # 获取服务器IP
171 |  SERVER_IP=$(hostname -I | awk '{print $1}')
172 | @@ -60,7 +82,7 @@ echo "重启Nginx (需要sudo权限)"
173 |  sudo systemctl restart nginx
174 |  
175 |  # 检查端口是否被占用
176 | -if lsof -Pi :9769 -sTCP:LISTEN -t >/dev/null ; then
177 | +if lsof -Pi :9769 -sTCP:LISTEN -t >/dev/null; then
178 |      echo "警告: 端口9769已被占用，尝试关闭现有进程..."
179 |      kill $(lsof -t -i:9769) 2>/dev/null || true
180 |      sleep 2
181 | -- 
182 | 2.49.0.windows.1
183 | 
184 | 


--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | 
  2 | "use client"
  3 | 
  4 | import * as React from "react"
  5 | import * as ToastPrimitives from "@radix-ui/react-toast"
  6 | import { cva, type VariantProps } from "class-variance-authority"
  7 | import { X } from "lucide-react"
  8 | 
  9 | import { cn } from "@/lib/utils"
 10 | 
 11 | const ToastProvider = ToastPrimitives.Provider
 12 | 
 13 | const ToastViewport = React.forwardRef<
 14 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 15 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 16 | >(({ className, ...props }, ref) => (
 17 |   <ToastPrimitives.Viewport
 18 |     ref={ref}
 19 |     className={cn(
 20 |       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 21 |       className
 22 |     )}
 23 |     {...props}
 24 |   />
 25 | ))
 26 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 27 | 
 28 | const toastVariants = cva(
 29 |   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
 30 |   {
 31 |     variants: {
 32 |       variant: {
 33 |         default: "border bg-background text-foreground",
 34 |         destructive:
 35 |           "destructive group border-destructive bg-destructive text-destructive-foreground",
 36 |         success: // Added success variant
 37 |           "success group border-success bg-success text-success-foreground",
 38 |       },
 39 |     },
 40 |     defaultVariants: {
 41 |       variant: "default",
 42 |     },
 43 |   }
 44 | )
 45 | 
 46 | const Toast = React.forwardRef<
 47 |   React.ElementRef<typeof ToastPrimitives.Root>,
 48 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 49 |     VariantProps<typeof toastVariants>
 50 | >(({ className, variant, ...props }, ref) => {
 51 |   return (
 52 |     <ToastPrimitives.Root
 53 |       ref={ref}
 54 |       className={cn(toastVariants({ variant }), className)}
 55 |       {...props}
 56 |     />
 57 |   )
 58 | })
 59 | Toast.displayName = ToastPrimitives.Root.displayName
 60 | 
 61 | const ToastAction = React.forwardRef<
 62 |   React.ElementRef<typeof ToastPrimitives.Action>,
 63 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 64 | >(({ className, ...props }, ref) => (
 65 |   <ToastPrimitives.Action
 66 |     ref={ref}
 67 |     className={cn(
 68 |       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive group-[.success]:border-muted/40 group-[.success]:hover:border-success/30 group-[.success]:hover:bg-success group-[.success]:hover:text-success-foreground group-[.success]:focus:ring-success",
 69 |       className
 70 |     )}
 71 |     {...props}
 72 |   />
 73 | ))
 74 | ToastAction.displayName = ToastPrimitives.Action.displayName
 75 | 
 76 | const ToastClose = React.forwardRef<
 77 |   React.ElementRef<typeof ToastPrimitives.Close>,
 78 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 79 | >(({ className, ...props }, ref) => (
 80 |   <ToastPrimitives.Close
 81 |     ref={ref}
 82 |     className={cn(
 83 |       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.success]:text-green-300 group-[.success]:hover:text-green-50 group-[.success]:focus:ring-green-400 group-[.success]:focus:ring-offset-green-600",
 84 |       className
 85 |     )}
 86 |     toast-close=""
 87 |     {...props}
 88 |   >
 89 |     <X className="h-4 w-4" />
 90 |   </ToastPrimitives.Close>
 91 | ))
 92 | ToastClose.displayName = ToastPrimitives.Close.displayName
 93 | 
 94 | const ToastTitle = React.forwardRef<
 95 |   React.ElementRef<typeof ToastPrimitives.Title>,
 96 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 97 | >(({ className, ...props }, ref) => (
 98 |   <ToastPrimitives.Title
 99 |     ref={ref}
100 |     className={cn("text-sm font-semibold", className)}
101 |     {...props}
102 |   />
103 | ))
104 | ToastTitle.displayName = ToastPrimitives.Title.displayName
105 | 
106 | const ToastDescription = React.forwardRef<
107 |   React.ElementRef<typeof ToastPrimitives.Description>,
108 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
109 | >(({ className, ...props }, ref) => (
110 |   <ToastPrimitives.Description
111 |     ref={ref}
112 |     className={cn("text-sm opacity-90", className)}
113 |     {...props}
114 |   />
115 | ))
116 | ToastDescription.displayName = ToastPrimitives.Description.displayName
117 | 
118 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
119 | 
120 | type ToastActionElement = React.ReactElement<typeof ToastAction>
121 | 
122 | export {
123 |   type ToastProps,
124 |   type ToastActionElement,
125 |   ToastProvider,
126 |   ToastViewport,
127 |   Toast,
128 |   ToastTitle,
129 |   ToastDescription,
130 |   ToastClose,
131 |   ToastAction,
132 | }
133 | 


--------------------------------------------------------------------------------
/src/app/login/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import type React from "react";
  4 | import { useState, useEffect } from "react";
  5 | import { useRouter } from "next/navigation";
  6 | import { Button } from "@/components/ui/button";
  7 | import { Input } from "@/components/ui/input";
  8 | import { Label } from "@/components/ui/label";
  9 | import {
 10 |   Card,
 11 |   CardContent,
 12 |   CardDescription,
 13 |   CardFooter,
 14 |   CardHeader,
 15 |   CardTitle,
 16 | } from "@/components/ui/card";
 17 | import { LogIn, AlertCircle } from "lucide-react";
 18 | import { PasswordInput } from "@/components/ui/password-input";
 19 | 
 20 | export default function LoginPage() {
 21 |   const [username, setUsername] = useState("");
 22 |   const [password, setPassword] = useState("");
 23 |   const [error, setError] = useState("");
 24 |   const router = useRouter();
 25 | 
 26 |   useEffect(() => {
 27 |     // This effect runs on mount to clean up potentially inconsistent states
 28 |     const storedCredentialsString = localStorage.getItem("userCredentials");
 29 |     if (storedCredentialsString) {
 30 |       try {
 31 |         // Try to parse to see if it's valid JSON. Content validation happens during login attempt.
 32 |         JSON.parse(storedCredentialsString);
 33 |       } catch (e) {
 34 |         // If credentials string is not valid JSON, it's corrupted.
 35 |         localStorage.removeItem("userCredentials");
 36 |         localStorage.removeItem("sessionActive"); // Also clear session if creds are corrupted
 37 |       }
 38 |     }
 39 |     // If session is marked active but there are no userCredentials, the session is invalid.
 40 |     if (localStorage.getItem("sessionActive") === "true" && !localStorage.getItem("userCredentials")) {
 41 |       localStorage.removeItem("sessionActive");
 42 |     }
 43 | 
 44 |     // Clear input fields when component mounts, especially important after logout
 45 |     setUsername("");
 46 |     setPassword("");
 47 |   }, []);
 48 | 
 49 |   const handleLogin = (e: React.FormEvent) => {
 50 |     e.preventDefault();
 51 |     setError("");
 52 | 
 53 |     const storedCredentialsString = localStorage.getItem("userCredentials");
 54 | 
 55 |     if (storedCredentialsString) {
 56 |       try {
 57 |         const creds = JSON.parse(storedCredentialsString);
 58 | 
 59 |         // Crucially, check if creds.password is a string and exists
 60 |         if (creds && typeof creds.username === 'string' && typeof creds.password === 'string' && creds.password.length > 0) {
 61 |           // Stored credentials have a valid format (username and password are strings)
 62 |           if (username === creds.username && password === creds.password) {
 63 |             localStorage.setItem("sessionActive", "true"); // Mark session as active
 64 |             router.push("/");
 65 |           } else {
 66 |             setError("无效的用户名或密码。");
 67 |           }
 68 |         } else {
 69 |           // Stored credentials format is incorrect (e.g., password missing, not a string, or empty)
 70 |           setError("存储的凭据格式不正确。请尝试使用默认凭据重新登录。");
 71 |           localStorage.removeItem("userCredentials"); // Clear corrupted credentials
 72 |           localStorage.removeItem("sessionActive");  // Ensure session is marked inactive
 73 |         }
 74 |       } catch (parseError) {
 75 |         // JSON.parse failed for storedCredentialsString
 76 |         setError("凭据读取错误，请重试。");
 77 |         localStorage.removeItem("userCredentials");
 78 |         localStorage.removeItem("sessionActive");
 79 |       }
 80 |     } else {
 81 |       // No credentials stored in localStorage (e.g., first time user, or after credentials were cleared)
 82 |       if (username === "admin" && password === "admin") {
 83 |         // Save default credentials ONLY if none existed
 84 |         localStorage.setItem("userCredentials", JSON.stringify({ username: "admin", password: "admin" }));
 85 |         localStorage.setItem("sessionActive", "true");
 86 |         router.push("/");
 87 |       } else {
 88 |         setError("无效的用户名或密码。如首次使用，请用 'admin'/'admin' 登录。");
 89 |       }
 90 |     }
 91 |   };
 92 | 
 93 |   return (
 94 |     <div className="flex items-center justify-center min-h-screen bg-background p-4">
 95 |       <Card className="w-full max-w-md shadow-2xl">
 96 |         <CardHeader className="text-center">
 97 |           <div className="mx-auto mb-4 p-3 bg-primary/10 rounded-full inline-block">
 98 |             <LogIn className="h-10 w-10 text-primary" />
 99 |           </div>
100 |           <CardTitle className="text-3xl font-bold">欢迎回来</CardTitle>
101 |           <CardDescription>请输入您的凭据以继续。</CardDescription>
102 |         </CardHeader>
103 |         <CardContent>
104 |           <form onSubmit={handleLogin} className="space-y-6">
105 |             <div className="space-y-2">
106 |               <Label htmlFor="username">用户名</Label>
107 |               <Input
108 |                 id="username"
109 |                 type="text"
110 |                 placeholder=""
111 |                 value={username}
112 |                 onChange={(e) => setUsername(e.target.value)}
113 |                 required
114 |                 className="text-base"
115 |               />
116 |             </div>
117 |             <div className="grid gap-2">
118 |               <Label htmlFor="password">密码</Label>
119 |               <PasswordInput
120 |                 id="password"
121 |                 value={password}
122 |                 onChange={(e) => setPassword(e.target.value)}
123 |               />
124 |             </div>
125 |             {error && (
126 |               <div className="flex items-center p-3 text-sm text-destructive bg-destructive/10 border border-destructive/30 rounded-md">
127 |                 <AlertCircle className="h-5 w-5 mr-2 flex-shrink-0" />
128 |                 <p>{error}</p>
129 |               </div>
130 |             )}
131 |             <Button type="submit" className="w-full text-lg py-6">
132 |               <LogIn className="mr-2 h-5 w-5" />
133 |               登录
134 |             </Button>
135 |           </form>
136 |         </CardContent>
137 |         <CardFooter className="text-center text-xs text-muted-foreground mt-4">
138 |           <p>请输入正确的账号密码登录系统</p>
139 |         </CardFooter>
140 |       </Card>
141 |     </div>
142 |   );
143 | }
144 | 


--------------------------------------------------------------------------------
/src/components/domain-card.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { differenceInDays, format, isPast, isToday, isValid } from "date-fns";
  4 | import { zhCN } from "date-fns/locale/zh-CN";
  5 | import { Edit2, Trash2, AlertTriangle, CheckCircle2, Clock, CalendarDays } from "lucide-react";
  6 | 
  7 | import { Button } from "@/components/ui/button";
  8 | import {
  9 |   Card,
 10 |   CardContent,
 11 |   CardHeader,
 12 |   CardTitle,
 13 |   CardFooter,
 14 | } from "@/components/ui/card";
 15 | import type { DomainInfo } from "@/lib/types";
 16 | import {
 17 |   AlertDialog,
 18 |   AlertDialogAction,
 19 |   AlertDialogCancel,
 20 |   AlertDialogContent,
 21 |   AlertDialogDescription,
 22 |   AlertDialogFooter,
 23 |   AlertDialogHeader,
 24 |   AlertDialogTitle,
 25 |   AlertDialogTrigger,
 26 | } from "@/components/ui/alert-dialog";
 27 | import { cn } from "@/lib/utils";
 28 | 
 29 | interface DomainCardProps {
 30 |   domain: DomainInfo;
 31 |   onEdit: (domain: DomainInfo) => void;
 32 |   onDelete: (domainId: string) => void;
 33 | }
 34 | 
 35 | export function DomainCard({ domain, onEdit, onDelete }: DomainCardProps) {
 36 |   const today = new Date();
 37 |   today.setHours(0, 0, 0, 0);
 38 | 
 39 |   // 确保过期日期是有效的Date对象
 40 |   const isValidExpDate = isValid(domain.expirationDate);
 41 |   const expiration = isValidExpDate ? domain.expirationDate : new Date();
 42 |   expiration.setHours(0, 0, 0, 0);
 43 | 
 44 |   const daysUntilExpiration = isValidExpDate ? differenceInDays(expiration, today) : 0;
 45 |   const expired = isValidExpDate ? (isPast(expiration) && !isToday(expiration)) : false;
 46 | 
 47 |   let statusText = `剩余 ${daysUntilExpiration} 天到期`;
 48 |   let statusColor: "destructive" | "warning" | "success" = "success";
 49 |   let StatusIcon = CheckCircle2;
 50 | 
 51 |   if (!isValidExpDate) {
 52 |     statusText = "日期无效";
 53 |     statusColor = "destructive";
 54 |     StatusIcon = AlertTriangle;
 55 |   } else if (expired) {
 56 |     statusText = `${Math.abs(daysUntilExpiration)} 天前已过期`;
 57 |     statusColor = "destructive";
 58 |     StatusIcon = AlertTriangle;
 59 |   } else if (daysUntilExpiration === 0) {
 60 |     statusText = "今天到期";
 61 |     statusColor = "destructive";
 62 |     StatusIcon = AlertTriangle;
 63 |   } else if (daysUntilExpiration < 7) {
 64 |     statusText = `剩余 ${daysUntilExpiration} 天到期`;
 65 |     statusColor = "destructive";
 66 |     StatusIcon = AlertTriangle;
 67 |   } else if (daysUntilExpiration < 30) {
 68 |     statusText = `剩余 ${daysUntilExpiration} 天到期`;
 69 |     statusColor = "warning";
 70 |     StatusIcon = Clock;
 71 |   }
 72 | 
 73 |   if (statusColor === 'success' && daysUntilExpiration > 0) {
 74 |     statusText = `剩余 ${daysUntilExpiration} 天到期`;
 75 |   }
 76 | 
 77 | 
 78 |   const dateDisplayClasses = cn(
 79 |     "inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-semibold shadow mb-1 transition-all duration-200",
 80 |     {
 81 |       'bg-destructive text-destructive-foreground': statusColor === 'destructive',
 82 |       'bg-accent text-accent-foreground': statusColor === 'warning',
 83 |       'bg-green-500 text-white': statusColor === 'success',
 84 |     }
 85 |   );
 86 | 
 87 |   const statusTextClasses = cn(
 88 |     "text-xs transition-opacity duration-200",
 89 |     {
 90 |       'text-destructive': statusColor === 'destructive',
 91 |       'text-yellow-700 dark:text-yellow-400': statusColor === 'warning',
 92 |       'text-green-700 dark:text-green-400': statusColor === 'success',
 93 |       'text-muted-foreground': statusColor !== 'destructive' && statusColor !== 'warning' && statusColor !== 'success',
 94 |     }
 95 |   );
 96 | 
 97 |   return (
 98 |     <Card className="w-full shadow-md transition-all duration-200 hover:shadow-xl hover:scale-105 flex flex-col group">
 99 |       <CardHeader className="pb-3">
100 |         <div className="flex items-start justify-between">
101 |           <CardTitle className="text-xl font-semibold text-primary break-all mr-2">
102 |             {domain.name}
103 |           </CardTitle>
104 |           <div className="flex gap-1 flex-shrink-0">
105 |             <Button variant="ghost" size="icon" onClick={() => onEdit(domain)} aria-label={`编辑域名 ${domain.name}`}>
106 |               <Edit2 className="h-5 w-5" />
107 |             </Button>
108 |             <AlertDialog>
109 |               <AlertDialogTrigger asChild>
110 |                 <Button variant="ghost" size="icon" className="text-destructive hover:text-destructive hover:bg-destructive/20" aria-label={`删除域名 ${domain.name}`}>
111 |                   <Trash2 className="h-5 w-5" />
112 |                 </Button>
113 |               </AlertDialogTrigger>
114 |               <AlertDialogContent>
115 |                 <AlertDialogHeader>
116 |                   <AlertDialogTitle>您确定吗？</AlertDialogTitle>
117 |                   <AlertDialogDescription>
118 |                     此操作无法撤销。这将从您的列表中永久删除域名 "{domain.name}"。
119 |                   </AlertDialogDescription>
120 |                 </AlertDialogHeader>
121 |                 <AlertDialogFooter>
122 |                   <AlertDialogCancel>取消</AlertDialogCancel>
123 |                   <AlertDialogAction onClick={() => onDelete(domain.id)}>
124 |                     删除
125 |                   </AlertDialogAction>
126 |                 </AlertDialogFooter>
127 |               </AlertDialogContent>
128 |             </AlertDialog>
129 |           </div>
130 |         </div>
131 |       </CardHeader>
132 | 
133 |       <CardContent className="flex-grow pt-0 pb-3 px-6">
134 |         <div className="text-xs text-muted-foreground flex items-center gap-1.5">
135 |           <CalendarDays className="h-3.5 w-3.5" />
136 |           <span>添加于: {isValid(domain.dateAdded) ? format(domain.dateAdded, "PPP", { locale: zhCN }) : '日期无效'}</span>
137 |         </div>
138 |       </CardContent>
139 | 
140 |       <CardFooter className="flex flex-col items-center justify-center pt-3 pb-4 border-t">
141 |         <div className={dateDisplayClasses}>
142 |           <StatusIcon className="h-4 w-4" />
143 |           到期时间：{isValidExpDate ? format(expiration, "PPP", { locale: zhCN }) : '日期无效'}
144 |         </div>
145 |         <p className={statusTextClasses}>
146 |           {isValidExpDate ? statusText : '日期无效'}
147 |         </p>
148 |       </CardFooter>
149 |     </Card>
150 |   );
151 | }
152 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer base {
  6 | 
  7 |   html,
  8 |   body {
  9 |     @apply h-full;
 10 |   }
 11 | 
 12 |   body {
 13 |     @apply bg-background text-foreground font-sans flex flex-col;
 14 |     /* Ensure body is a flex column and takes full height */
 15 |   }
 16 | 
 17 |   /* 自定义滚动条样式 */
 18 |   .scrollbar-thin::-webkit-scrollbar {
 19 |     width: 6px;
 20 |     height: 6px;
 21 |   }
 22 | 
 23 |   .scrollbar-thin::-webkit-scrollbar-track {
 24 |     background: transparent;
 25 |   }
 26 | 
 27 |   .scrollbar-thin::-webkit-scrollbar-thumb {
 28 |     background: #cccccc;
 29 |     border-radius: 3px;
 30 |   }
 31 | 
 32 |   .dark .scrollbar-thin::-webkit-scrollbar-thumb {
 33 |     background: #444444;
 34 |   }
 35 | 
 36 |   .scrollbar-thin::-webkit-scrollbar-thumb:hover {
 37 |     background: #aaaaaa;
 38 |   }
 39 | 
 40 |   .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
 41 |     background: #666666;
 42 |   }
 43 | 
 44 |   .scrollbar-thin {
 45 |     scrollbar-width: thin;
 46 |     scrollbar-color: #cccccc transparent;
 47 |   }
 48 | 
 49 |   .dark .scrollbar-thin {
 50 |     scrollbar-color: #444444 transparent;
 51 |   }
 52 | 
 53 |   /* 全局过渡效果优化 */
 54 |   * {
 55 |     @apply transition-colors duration-200 ease-in-out;
 56 |   }
 57 | 
 58 |   /* 优化动画性能 - 提示浏览器使用GPU加速 */
 59 |   .animate-gpu {
 60 |     transform: translateZ(0);
 61 |     backface-visibility: hidden;
 62 |     perspective: 1000px;
 63 |   }
 64 | 
 65 |   /* 优化对话框和弹出层动画 */
 66 |   [data-state="open"][data-radix-dialog-content],
 67 |   [data-state="open"][data-radix-popover-content] {
 68 |     animation-duration: 200ms;
 69 |     animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 70 |   }
 71 | 
 72 |   [data-state="closed"][data-radix-dialog-content],
 73 |   [data-state="closed"][data-radix-popover-content] {
 74 |     animation-duration: 150ms;
 75 |     animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
 76 |   }
 77 | 
 78 |   /* 禁用对静态元素应用过渡效果 */
 79 |   .no-transition {
 80 |     transition: none !important;
 81 |   }
 82 | 
 83 |   :root {
 84 |     --background: 0 0% 94%;
 85 |     /* Light Gray #F0F0F0 */
 86 |     --foreground: 0 0% 20%;
 87 |     /* Darker text for better contrast on light gray */
 88 |     --card: 0 0% 100%;
 89 |     /* White */
 90 |     --card-foreground: 0 0% 3.9%;
 91 |     --popover: 0 0% 100%;
 92 |     --popover-foreground: 0 0% 3.9%;
 93 |     --primary: 231 48% 48%;
 94 |     /* Deep Blue #3F51B5 */
 95 |     --primary-foreground: 0 0% 98%;
 96 |     /* White */
 97 |     --secondary: 0 0% 85%;
 98 |     /* Slightly darker gray */
 99 |     --secondary-foreground: 0 0% 9%;
100 |     --muted: 0 0% 85%;
101 |     --muted-foreground: 0 0% 45.1%;
102 |     --accent: 36 100% 50%;
103 |     /* Orange #FF9800 */
104 |     --accent-foreground: 0 0% 98%;
105 |     /* White text on orange for better contrast */
106 |     --destructive: 0 84.2% 60.2%;
107 |     --destructive-foreground: 0 0% 98%;
108 |     --success: 145 63% 42%;
109 |     /* Green for success */
110 |     --success-foreground: 0 0% 98%;
111 |     /* White text for success */
112 |     --border: 0 0% 80%;
113 |     --input: 0 0% 80%;
114 |     --ring: 231 48% 48%;
115 |     /* Deep Blue for ring */
116 |     --chart-1: 12 76% 61%;
117 |     --chart-2: 173 58% 39%;
118 |     --chart-3: 197 37% 24%;
119 |     --chart-4: 43 74% 66%;
120 |     --chart-5: 27 87% 67%;
121 |     --radius: 0.5rem;
122 | 
123 |     /* Sidebar specific colors - can be adjusted if sidebar is used, otherwise defaults are fine */
124 |     --sidebar-background: 0 0% 98%;
125 |     --sidebar-foreground: 240 5.3% 26.1%;
126 |     --sidebar-primary: 240 5.9% 10%;
127 |     --sidebar-primary-foreground: 0 0% 98%;
128 |     --sidebar-accent: 240 4.8% 95.9%;
129 |     --sidebar-accent-foreground: 240 5.9% 10%;
130 |     --sidebar-border: 220 13% 91%;
131 |     --sidebar-ring: 217.2 91.2% 59.8%;
132 |   }
133 | 
134 |   .dark {
135 |     --background: 0 0% 3.9%;
136 |     --foreground: 0 0% 98%;
137 |     --card: 0 0% 3.9%;
138 |     --card-foreground: 0 0% 98%;
139 |     --popover: 0 0% 3.9%;
140 |     --popover-foreground: 0 0% 98%;
141 |     --primary: 231 48% 58%;
142 |     /* Lighter Deep Blue for dark mode */
143 |     --primary-foreground: 0 0% 98%;
144 |     --secondary: 0 0% 14.9%;
145 |     --secondary-foreground: 0 0% 98%;
146 |     --muted: 0 0% 14.9%;
147 |     --muted-foreground: 0 0% 63.9%;
148 |     --accent: 36 100% 55%;
149 |     /* Lighter Orange for dark mode */
150 |     --accent-foreground: 0 0% 3.9%;
151 |     --destructive: 0 70% 50%;
152 |     /* Adjusted destructive for dark mode */
153 |     --destructive-foreground: 0 0% 98%;
154 |     --success: 145 50% 52%;
155 |     /* Lighter Green for success in dark mode */
156 |     --success-foreground: 0 0% 10%;
157 |     /* Darker text for success in dark mode */
158 |     --border: 0 0% 14.9%;
159 |     --input: 0 0% 14.9%;
160 |     --ring: 231 48% 58%;
161 |     /* Lighter Deep Blue for ring in dark mode */
162 |     --chart-1: 220 70% 50%;
163 |     --chart-2: 160 60% 45%;
164 |     --chart-3: 30 80% 55%;
165 |     --chart-4: 280 65% 60%;
166 |     --chart-5: 340 75% 55%;
167 | 
168 |     --sidebar-background: 240 5.9% 10%;
169 |     --sidebar-foreground: 240 4.8% 95.9%;
170 |     --sidebar-primary: 224.3 76.3% 48%;
171 |     --sidebar-primary-foreground: 0 0% 100%;
172 |     --sidebar-accent: 240 3.7% 15.9%;
173 |     --sidebar-accent-foreground: 240 4.8% 95.9%;
174 |     --sidebar-border: 240 3.7% 15.9%;
175 |     --sidebar-ring: 217.2 91.2% 59.8%;
176 |   }
177 | }
178 | 
179 | @layer base {
180 |   * {
181 |     @apply border-border;
182 |   }
183 | 
184 |   /* body is handled above with h-full and flex properties */
185 | }
186 | 
187 | /* 添加一些自定义平滑过渡动画 */
188 | @layer utilities {
189 |   .transition-all-smooth {
190 |     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
191 |   }
192 | 
193 |   .fade-in {
194 |     opacity: 0;
195 |     animation: fadeIn 0.2s ease-in forwards;
196 |   }
197 | 
198 |   @keyframes fadeIn {
199 |     from {
200 |       opacity: 0;
201 |     }
202 | 
203 |     to {
204 |       opacity: 1;
205 |     }
206 |   }
207 | 
208 |   .fade-out {
209 |     opacity: 1;
210 |     animation: fadeOut 0.15s ease-out forwards;
211 |   }
212 | 
213 |   @keyframes fadeOut {
214 |     from {
215 |       opacity: 1;
216 |     }
217 | 
218 |     to {
219 |       opacity: 0;
220 |     }
221 |   }
222 | }


--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SelectPrimitive from "@radix-ui/react-select"
  5 | import { Check, ChevronDown, ChevronUp } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Select = SelectPrimitive.Root
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group
 12 | 
 13 | const SelectValue = SelectPrimitive.Value
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ))
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 34 | 
 35 | const SelectScrollUpButton = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 38 | >(({ className, ...props }, ref) => (
 39 |   <SelectPrimitive.ScrollUpButton
 40 |     ref={ref}
 41 |     className={cn(
 42 |       "flex cursor-default items-center justify-center py-1",
 43 |       className
 44 |     )}
 45 |     {...props}
 46 |   >
 47 |     <ChevronUp className="h-4 w-4" />
 48 |   </SelectPrimitive.ScrollUpButton>
 49 | ))
 50 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 51 | 
 52 | const SelectScrollDownButton = React.forwardRef<
 53 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 54 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 55 | >(({ className, ...props }, ref) => (
 56 |   <SelectPrimitive.ScrollDownButton
 57 |     ref={ref}
 58 |     className={cn(
 59 |       "flex cursor-default items-center justify-center py-1",
 60 |       className
 61 |     )}
 62 |     {...props}
 63 |   >
 64 |     <ChevronDown className="h-4 w-4" />
 65 |   </SelectPrimitive.ScrollDownButton>
 66 | ))
 67 | SelectScrollDownButton.displayName =
 68 |   SelectPrimitive.ScrollDownButton.displayName
 69 | 
 70 | const SelectContent = React.forwardRef<
 71 |   React.ElementRef<typeof SelectPrimitive.Content>,
 72 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 73 | >(({ className, children, position = "popper", ...props }, ref) => (
 74 |   <SelectPrimitive.Portal>
 75 |     <SelectPrimitive.Content
 76 |       ref={ref}
 77 |       className={cn(
 78 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 79 |         position === "popper" &&
 80 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 81 |         className
 82 |       )}
 83 |       position={position}
 84 |       {...props}
 85 |     >
 86 |       <SelectScrollUpButton />
 87 |       <SelectPrimitive.Viewport
 88 |         className={cn(
 89 |           "p-1",
 90 |           position === "popper" &&
 91 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 92 |         )}
 93 |       >
 94 |         {children}
 95 |       </SelectPrimitive.Viewport>
 96 |       <SelectScrollDownButton />
 97 |     </SelectPrimitive.Content>
 98 |   </SelectPrimitive.Portal>
 99 | ))
100 | SelectContent.displayName = SelectPrimitive.Content.displayName
101 | 
102 | const SelectLabel = React.forwardRef<
103 |   React.ElementRef<typeof SelectPrimitive.Label>,
104 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
105 | >(({ className, ...props }, ref) => (
106 |   <SelectPrimitive.Label
107 |     ref={ref}
108 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
109 |     {...props}
110 |   />
111 | ))
112 | SelectLabel.displayName = SelectPrimitive.Label.displayName
113 | 
114 | const SelectItem = React.forwardRef<
115 |   React.ElementRef<typeof SelectPrimitive.Item>,
116 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
117 | >(({ className, children, ...props }, ref) => (
118 |   <SelectPrimitive.Item
119 |     ref={ref}
120 |     className={cn(
121 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
122 |       className
123 |     )}
124 |     {...props}
125 |   >
126 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
127 |       <SelectPrimitive.ItemIndicator>
128 |         <Check className="h-4 w-4" />
129 |       </SelectPrimitive.ItemIndicator>
130 |     </span>
131 | 
132 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
133 |   </SelectPrimitive.Item>
134 | ))
135 | SelectItem.displayName = SelectPrimitive.Item.displayName
136 | 
137 | const SelectSeparator = React.forwardRef<
138 |   React.ElementRef<typeof SelectPrimitive.Separator>,
139 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
140 | >(({ className, ...props }, ref) => (
141 |   <SelectPrimitive.Separator
142 |     ref={ref}
143 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
144 |     {...props}
145 |   />
146 | ))
147 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
148 | 
149 | export {
150 |   Select,
151 |   SelectGroup,
152 |   SelectValue,
153 |   SelectTrigger,
154 |   SelectContent,
155 |   SelectLabel,
156 |   SelectItem,
157 |   SelectSeparator,
158 |   SelectScrollUpButton,
159 |   SelectScrollDownButton,
160 | }
161 | 


--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  5 | import { Check, ChevronRight, Circle } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const DropdownMenu = DropdownMenuPrimitive.Root
 10 | 
 11 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 12 | 
 13 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 14 | 
 15 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 16 | 
 17 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 18 | 
 19 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 20 | 
 21 | const DropdownMenuSubTrigger = React.forwardRef<
 22 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 23 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 24 |     inset?: boolean
 25 |   }
 26 | >(({ className, inset, children, ...props }, ref) => (
 27 |   <DropdownMenuPrimitive.SubTrigger
 28 |     ref={ref}
 29 |     className={cn(
 30 |       "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 31 |       inset && "pl-8",
 32 |       className
 33 |     )}
 34 |     {...props}
 35 |   >
 36 |     {children}
 37 |     <ChevronRight className="ml-auto" />
 38 |   </DropdownMenuPrimitive.SubTrigger>
 39 | ))
 40 | DropdownMenuSubTrigger.displayName =
 41 |   DropdownMenuPrimitive.SubTrigger.displayName
 42 | 
 43 | const DropdownMenuSubContent = React.forwardRef<
 44 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 45 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 46 | >(({ className, ...props }, ref) => (
 47 |   <DropdownMenuPrimitive.SubContent
 48 |     ref={ref}
 49 |     className={cn(
 50 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 51 |       className
 52 |     )}
 53 |     {...props}
 54 |   />
 55 | ))
 56 | DropdownMenuSubContent.displayName =
 57 |   DropdownMenuPrimitive.SubContent.displayName
 58 | 
 59 | const DropdownMenuContent = React.forwardRef<
 60 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 61 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 62 | >(({ className, sideOffset = 4, ...props }, ref) => (
 63 |   <DropdownMenuPrimitive.Portal>
 64 |     <DropdownMenuPrimitive.Content
 65 |       ref={ref}
 66 |       sideOffset={sideOffset}
 67 |       className={cn(
 68 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 69 |         className
 70 |       )}
 71 |       {...props}
 72 |     />
 73 |   </DropdownMenuPrimitive.Portal>
 74 | ))
 75 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 76 | 
 77 | const DropdownMenuItem = React.forwardRef<
 78 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 79 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 80 |     inset?: boolean
 81 |   }
 82 | >(({ className, inset, ...props }, ref) => (
 83 |   <DropdownMenuPrimitive.Item
 84 |     ref={ref}
 85 |     className={cn(
 86 |       "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 87 |       inset && "pl-8",
 88 |       className
 89 |     )}
 90 |     {...props}
 91 |   />
 92 | ))
 93 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 94 | 
 95 | const DropdownMenuCheckboxItem = React.forwardRef<
 96 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 97 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 98 | >(({ className, children, checked, ...props }, ref) => (
 99 |   <DropdownMenuPrimitive.CheckboxItem
100 |     ref={ref}
101 |     className={cn(
102 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
103 |       className
104 |     )}
105 |     checked={checked}
106 |     {...props}
107 |   >
108 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
109 |       <DropdownMenuPrimitive.ItemIndicator>
110 |         <Check className="h-4 w-4" />
111 |       </DropdownMenuPrimitive.ItemIndicator>
112 |     </span>
113 |     {children}
114 |   </DropdownMenuPrimitive.CheckboxItem>
115 | ))
116 | DropdownMenuCheckboxItem.displayName =
117 |   DropdownMenuPrimitive.CheckboxItem.displayName
118 | 
119 | const DropdownMenuRadioItem = React.forwardRef<
120 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
121 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
122 | >(({ className, children, ...props }, ref) => (
123 |   <DropdownMenuPrimitive.RadioItem
124 |     ref={ref}
125 |     className={cn(
126 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
127 |       className
128 |     )}
129 |     {...props}
130 |   >
131 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
132 |       <DropdownMenuPrimitive.ItemIndicator>
133 |         <Circle className="h-2 w-2 fill-current" />
134 |       </DropdownMenuPrimitive.ItemIndicator>
135 |     </span>
136 |     {children}
137 |   </DropdownMenuPrimitive.RadioItem>
138 | ))
139 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
140 | 
141 | const DropdownMenuLabel = React.forwardRef<
142 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
143 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
144 |     inset?: boolean
145 |   }
146 | >(({ className, inset, ...props }, ref) => (
147 |   <DropdownMenuPrimitive.Label
148 |     ref={ref}
149 |     className={cn(
150 |       "px-2 py-1.5 text-sm font-semibold",
151 |       inset && "pl-8",
152 |       className
153 |     )}
154 |     {...props}
155 |   />
156 | ))
157 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
158 | 
159 | const DropdownMenuSeparator = React.forwardRef<
160 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
161 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
162 | >(({ className, ...props }, ref) => (
163 |   <DropdownMenuPrimitive.Separator
164 |     ref={ref}
165 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
166 |     {...props}
167 |   />
168 | ))
169 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
170 | 
171 | const DropdownMenuShortcut = ({
172 |   className,
173 |   ...props
174 | }: React.HTMLAttributes<HTMLSpanElement>) => {
175 |   return (
176 |     <span
177 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
178 |       {...props}
179 |     />
180 |   )
181 | }
182 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
183 | 
184 | export {
185 |   DropdownMenu,
186 |   DropdownMenuTrigger,
187 |   DropdownMenuContent,
188 |   DropdownMenuItem,
189 |   DropdownMenuCheckboxItem,
190 |   DropdownMenuRadioItem,
191 |   DropdownMenuLabel,
192 |   DropdownMenuSeparator,
193 |   DropdownMenuShortcut,
194 |   DropdownMenuGroup,
195 |   DropdownMenuPortal,
196 |   DropdownMenuSub,
197 |   DropdownMenuSubContent,
198 |   DropdownMenuSubTrigger,
199 |   DropdownMenuRadioGroup,
200 | }
201 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as MenubarPrimitive from "@radix-ui/react-menubar"
  5 | import { Check, ChevronRight, Circle } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | function MenubarMenu({
 10 |   ...props
 11 | }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
 12 |   return <MenubarPrimitive.Menu {...props} />
 13 | }
 14 | 
 15 | function MenubarGroup({
 16 |   ...props
 17 | }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
 18 |   return <MenubarPrimitive.Group {...props} />
 19 | }
 20 | 
 21 | function MenubarPortal({
 22 |   ...props
 23 | }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
 24 |   return <MenubarPrimitive.Portal {...props} />
 25 | }
 26 | 
 27 | function MenubarRadioGroup({
 28 |   ...props
 29 | }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
 30 |   return <MenubarPrimitive.RadioGroup {...props} />
 31 | }
 32 | 
 33 | function MenubarSub({
 34 |   ...props
 35 | }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
 36 |   return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
 37 | }
 38 | 
 39 | const Menubar = React.forwardRef<
 40 |   React.ElementRef<typeof MenubarPrimitive.Root>,
 41 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
 42 | >(({ className, ...props }, ref) => (
 43 |   <MenubarPrimitive.Root
 44 |     ref={ref}
 45 |     className={cn(
 46 |       "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
 47 |       className
 48 |     )}
 49 |     {...props}
 50 |   />
 51 | ))
 52 | Menubar.displayName = MenubarPrimitive.Root.displayName
 53 | 
 54 | const MenubarTrigger = React.forwardRef<
 55 |   React.ElementRef<typeof MenubarPrimitive.Trigger>,
 56 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
 57 | >(({ className, ...props }, ref) => (
 58 |   <MenubarPrimitive.Trigger
 59 |     ref={ref}
 60 |     className={cn(
 61 |       "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
 62 |       className
 63 |     )}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
 68 | 
 69 | const MenubarSubTrigger = React.forwardRef<
 70 |   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
 71 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
 72 |     inset?: boolean
 73 |   }
 74 | >(({ className, inset, children, ...props }, ref) => (
 75 |   <MenubarPrimitive.SubTrigger
 76 |     ref={ref}
 77 |     className={cn(
 78 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
 79 |       inset && "pl-8",
 80 |       className
 81 |     )}
 82 |     {...props}
 83 |   >
 84 |     {children}
 85 |     <ChevronRight className="ml-auto h-4 w-4" />
 86 |   </MenubarPrimitive.SubTrigger>
 87 | ))
 88 | MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
 89 | 
 90 | const MenubarSubContent = React.forwardRef<
 91 |   React.ElementRef<typeof MenubarPrimitive.SubContent>,
 92 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
 93 | >(({ className, ...props }, ref) => (
 94 |   <MenubarPrimitive.SubContent
 95 |     ref={ref}
 96 |     className={cn(
 97 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 98 |       className
 99 |     )}
100 |     {...props}
101 |   />
102 | ))
103 | MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
104 | 
105 | const MenubarContent = React.forwardRef<
106 |   React.ElementRef<typeof MenubarPrimitive.Content>,
107 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
108 | >(
109 |   (
110 |     { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
111 |     ref
112 |   ) => (
113 |     <MenubarPrimitive.Portal>
114 |       <MenubarPrimitive.Content
115 |         ref={ref}
116 |         align={align}
117 |         alignOffset={alignOffset}
118 |         sideOffset={sideOffset}
119 |         className={cn(
120 |           "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
121 |           className
122 |         )}
123 |         {...props}
124 |       />
125 |     </MenubarPrimitive.Portal>
126 |   )
127 | )
128 | MenubarContent.displayName = MenubarPrimitive.Content.displayName
129 | 
130 | const MenubarItem = React.forwardRef<
131 |   React.ElementRef<typeof MenubarPrimitive.Item>,
132 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
133 |     inset?: boolean
134 |   }
135 | >(({ className, inset, ...props }, ref) => (
136 |   <MenubarPrimitive.Item
137 |     ref={ref}
138 |     className={cn(
139 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
140 |       inset && "pl-8",
141 |       className
142 |     )}
143 |     {...props}
144 |   />
145 | ))
146 | MenubarItem.displayName = MenubarPrimitive.Item.displayName
147 | 
148 | const MenubarCheckboxItem = React.forwardRef<
149 |   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
150 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
151 | >(({ className, children, checked, ...props }, ref) => (
152 |   <MenubarPrimitive.CheckboxItem
153 |     ref={ref}
154 |     className={cn(
155 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
156 |       className
157 |     )}
158 |     checked={checked}
159 |     {...props}
160 |   >
161 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
162 |       <MenubarPrimitive.ItemIndicator>
163 |         <Check className="h-4 w-4" />
164 |       </MenubarPrimitive.ItemIndicator>
165 |     </span>
166 |     {children}
167 |   </MenubarPrimitive.CheckboxItem>
168 | ))
169 | MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
170 | 
171 | const MenubarRadioItem = React.forwardRef<
172 |   React.ElementRef<typeof MenubarPrimitive.RadioItem>,
173 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
174 | >(({ className, children, ...props }, ref) => (
175 |   <MenubarPrimitive.RadioItem
176 |     ref={ref}
177 |     className={cn(
178 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
179 |       className
180 |     )}
181 |     {...props}
182 |   >
183 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
184 |       <MenubarPrimitive.ItemIndicator>
185 |         <Circle className="h-2 w-2 fill-current" />
186 |       </MenubarPrimitive.ItemIndicator>
187 |     </span>
188 |     {children}
189 |   </MenubarPrimitive.RadioItem>
190 | ))
191 | MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
192 | 
193 | const MenubarLabel = React.forwardRef<
194 |   React.ElementRef<typeof MenubarPrimitive.Label>,
195 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
196 |     inset?: boolean
197 |   }
198 | >(({ className, inset, ...props }, ref) => (
199 |   <MenubarPrimitive.Label
200 |     ref={ref}
201 |     className={cn(
202 |       "px-2 py-1.5 text-sm font-semibold",
203 |       inset && "pl-8",
204 |       className
205 |     )}
206 |     {...props}
207 |   />
208 | ))
209 | MenubarLabel.displayName = MenubarPrimitive.Label.displayName
210 | 
211 | const MenubarSeparator = React.forwardRef<
212 |   React.ElementRef<typeof MenubarPrimitive.Separator>,
213 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
214 | >(({ className, ...props }, ref) => (
215 |   <MenubarPrimitive.Separator
216 |     ref={ref}
217 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
218 |     {...props}
219 |   />
220 | ))
221 | MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
222 | 
223 | const MenubarShortcut = ({
224 |   className,
225 |   ...props
226 | }: React.HTMLAttributes<HTMLSpanElement>) => {
227 |   return (
228 |     <span
229 |       className={cn(
230 |         "ml-auto text-xs tracking-widest text-muted-foreground",
231 |         className
232 |       )}
233 |       {...props}
234 |     />
235 |   )
236 | }
237 | MenubarShortcut.displayname = "MenubarShortcut"
238 | 
239 | export {
240 |   Menubar,
241 |   MenubarMenu,
242 |   MenubarTrigger,
243 |   MenubarContent,
244 |   MenubarItem,
245 |   MenubarSeparator,
246 |   MenubarLabel,
247 |   MenubarCheckboxItem,
248 |   MenubarRadioGroup,
249 |   MenubarRadioItem,
250 |   MenubarPortal,
251 |   MenubarSubContent,
252 |   MenubarSubTrigger,
253 |   MenubarGroup,
254 |   MenubarSub,
255 |   MenubarShortcut,
256 | }
257 | 


--------------------------------------------------------------------------------
/src/components/ui/chart.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as RechartsPrimitive from "recharts"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | // Format: { THEME_NAME: CSS_SELECTOR }
  9 | const THEMES = { light: "", dark: ".dark" } as const
 10 | 
 11 | export type ChartConfig = {
 12 |   [k in string]: {
 13 |     label?: React.ReactNode
 14 |     icon?: React.ComponentType
 15 |   } & (
 16 |     | { color?: string; theme?: never }
 17 |     | { color?: never; theme: Record<keyof typeof THEMES, string> }
 18 |   )
 19 | }
 20 | 
 21 | type ChartContextProps = {
 22 |   config: ChartConfig
 23 | }
 24 | 
 25 | const ChartContext = React.createContext<ChartContextProps | null>(null)
 26 | 
 27 | function useChart() {
 28 |   const context = React.useContext(ChartContext)
 29 | 
 30 |   if (!context) {
 31 |     throw new Error("useChart must be used within a <ChartContainer />")
 32 |   }
 33 | 
 34 |   return context
 35 | }
 36 | 
 37 | const ChartContainer = React.forwardRef<
 38 |   HTMLDivElement,
 39 |   React.ComponentProps<"div"> & {
 40 |     config: ChartConfig
 41 |     children: React.ComponentProps<
 42 |       typeof RechartsPrimitive.ResponsiveContainer
 43 |     >["children"]
 44 |   }
 45 | >(({ id, className, children, config, ...props }, ref) => {
 46 |   const uniqueId = React.useId()
 47 |   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
 48 | 
 49 |   return (
 50 |     <ChartContext.Provider value={{ config }}>
 51 |       <div
 52 |         data-chart={chartId}
 53 |         ref={ref}
 54 |         className={cn(
 55 |           "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
 56 |           className
 57 |         )}
 58 |         {...props}
 59 |       >
 60 |         <ChartStyle id={chartId} config={config} />
 61 |         <RechartsPrimitive.ResponsiveContainer>
 62 |           {children}
 63 |         </RechartsPrimitive.ResponsiveContainer>
 64 |       </div>
 65 |     </ChartContext.Provider>
 66 |   )
 67 | })
 68 | ChartContainer.displayName = "Chart"
 69 | 
 70 | const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 71 |   const colorConfig = Object.entries(config).filter(
 72 |     ([, config]) => config.theme || config.color
 73 |   )
 74 | 
 75 |   if (!colorConfig.length) {
 76 |     return null
 77 |   }
 78 | 
 79 |   return (
 80 |     <style
 81 |       dangerouslySetInnerHTML={{
 82 |         __html: Object.entries(THEMES)
 83 |           .map(
 84 |             ([theme, prefix]) => `
 85 | ${prefix} [data-chart=${id}] {
 86 | ${colorConfig
 87 |   .map(([key, itemConfig]) => {
 88 |     const color =
 89 |       itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
 90 |       itemConfig.color
 91 |     return color ? `  --color-${key}: ${color};` : null
 92 |   })
 93 |   .join("\n")}
 94 | }
 95 | `
 96 |           )
 97 |           .join("\n"),
 98 |       }}
 99 |     />
100 |   )
101 | }
102 | 
103 | const ChartTooltip = RechartsPrimitive.Tooltip
104 | 
105 | const ChartTooltipContent = React.forwardRef<
106 |   HTMLDivElement,
107 |   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
108 |     React.ComponentProps<"div"> & {
109 |       hideLabel?: boolean
110 |       hideIndicator?: boolean
111 |       indicator?: "line" | "dot" | "dashed"
112 |       nameKey?: string
113 |       labelKey?: string
114 |     }
115 | >(
116 |   (
117 |     {
118 |       active,
119 |       payload,
120 |       className,
121 |       indicator = "dot",
122 |       hideLabel = false,
123 |       hideIndicator = false,
124 |       label,
125 |       labelFormatter,
126 |       labelClassName,
127 |       formatter,
128 |       color,
129 |       nameKey,
130 |       labelKey,
131 |     },
132 |     ref
133 |   ) => {
134 |     const { config } = useChart()
135 | 
136 |     const tooltipLabel = React.useMemo(() => {
137 |       if (hideLabel || !payload?.length) {
138 |         return null
139 |       }
140 | 
141 |       const [item] = payload
142 |       const key = `${labelKey || item.dataKey || item.name || "value"}`
143 |       const itemConfig = getPayloadConfigFromPayload(config, item, key)
144 |       const value =
145 |         !labelKey && typeof label === "string"
146 |           ? config[label as keyof typeof config]?.label || label
147 |           : itemConfig?.label
148 | 
149 |       if (labelFormatter) {
150 |         return (
151 |           <div className={cn("font-medium", labelClassName)}>
152 |             {labelFormatter(value, payload)}
153 |           </div>
154 |         )
155 |       }
156 | 
157 |       if (!value) {
158 |         return null
159 |       }
160 | 
161 |       return <div className={cn("font-medium", labelClassName)}>{value}</div>
162 |     }, [
163 |       label,
164 |       labelFormatter,
165 |       payload,
166 |       hideLabel,
167 |       labelClassName,
168 |       config,
169 |       labelKey,
170 |     ])
171 | 
172 |     if (!active || !payload?.length) {
173 |       return null
174 |     }
175 | 
176 |     const nestLabel = payload.length === 1 && indicator !== "dot"
177 | 
178 |     return (
179 |       <div
180 |         ref={ref}
181 |         className={cn(
182 |           "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
183 |           className
184 |         )}
185 |       >
186 |         {!nestLabel ? tooltipLabel : null}
187 |         <div className="grid gap-1.5">
188 |           {payload.map((item, index) => {
189 |             const key = `${nameKey || item.name || item.dataKey || "value"}`
190 |             const itemConfig = getPayloadConfigFromPayload(config, item, key)
191 |             const indicatorColor = color || item.payload.fill || item.color
192 | 
193 |             return (
194 |               <div
195 |                 key={item.dataKey}
196 |                 className={cn(
197 |                   "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
198 |                   indicator === "dot" && "items-center"
199 |                 )}
200 |               >
201 |                 {formatter && item?.value !== undefined && item.name ? (
202 |                   formatter(item.value, item.name, item, index, item.payload)
203 |                 ) : (
204 |                   <>
205 |                     {itemConfig?.icon ? (
206 |                       <itemConfig.icon />
207 |                     ) : (
208 |                       !hideIndicator && (
209 |                         <div
210 |                           className={cn(
211 |                             "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
212 |                             {
213 |                               "h-2.5 w-2.5": indicator === "dot",
214 |                               "w-1": indicator === "line",
215 |                               "w-0 border-[1.5px] border-dashed bg-transparent":
216 |                                 indicator === "dashed",
217 |                               "my-0.5": nestLabel && indicator === "dashed",
218 |                             }
219 |                           )}
220 |                           style={
221 |                             {
222 |                               "--color-bg": indicatorColor,
223 |                               "--color-border": indicatorColor,
224 |                             } as React.CSSProperties
225 |                           }
226 |                         />
227 |                       )
228 |                     )}
229 |                     <div
230 |                       className={cn(
231 |                         "flex flex-1 justify-between leading-none",
232 |                         nestLabel ? "items-end" : "items-center"
233 |                       )}
234 |                     >
235 |                       <div className="grid gap-1.5">
236 |                         {nestLabel ? tooltipLabel : null}
237 |                         <span className="text-muted-foreground">
238 |                           {itemConfig?.label || item.name}
239 |                         </span>
240 |                       </div>
241 |                       {item.value && (
242 |                         <span className="font-mono font-medium tabular-nums text-foreground">
243 |                           {item.value.toLocaleString()}
244 |                         </span>
245 |                       )}
246 |                     </div>
247 |                   </>
248 |                 )}
249 |               </div>
250 |             )
251 |           })}
252 |         </div>
253 |       </div>
254 |     )
255 |   }
256 | )
257 | ChartTooltipContent.displayName = "ChartTooltip"
258 | 
259 | const ChartLegend = RechartsPrimitive.Legend
260 | 
261 | const ChartLegendContent = React.forwardRef<
262 |   HTMLDivElement,
263 |   React.ComponentProps<"div"> &
264 |     Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
265 |       hideIcon?: boolean
266 |       nameKey?: string
267 |     }
268 | >(
269 |   (
270 |     { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
271 |     ref
272 |   ) => {
273 |     const { config } = useChart()
274 | 
275 |     if (!payload?.length) {
276 |       return null
277 |     }
278 | 
279 |     return (
280 |       <div
281 |         ref={ref}
282 |         className={cn(
283 |           "flex items-center justify-center gap-4",
284 |           verticalAlign === "top" ? "pb-3" : "pt-3",
285 |           className
286 |         )}
287 |       >
288 |         {payload.map((item) => {
289 |           const key = `${nameKey || item.dataKey || "value"}`
290 |           const itemConfig = getPayloadConfigFromPayload(config, item, key)
291 | 
292 |           return (
293 |             <div
294 |               key={item.value}
295 |               className={cn(
296 |                 "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
297 |               )}
298 |             >
299 |               {itemConfig?.icon && !hideIcon ? (
300 |                 <itemConfig.icon />
301 |               ) : (
302 |                 <div
303 |                   className="h-2 w-2 shrink-0 rounded-[2px]"
304 |                   style={{
305 |                     backgroundColor: item.color,
306 |                   }}
307 |                 />
308 |               )}
309 |               {itemConfig?.label}
310 |             </div>
311 |           )
312 |         })}
313 |       </div>
314 |     )
315 |   }
316 | )
317 | ChartLegendContent.displayName = "ChartLegend"
318 | 
319 | // Helper to extract item config from a payload.
320 | function getPayloadConfigFromPayload(
321 |   config: ChartConfig,
322 |   payload: unknown,
323 |   key: string
324 | ) {
325 |   if (typeof payload !== "object" || payload === null) {
326 |     return undefined
327 |   }
328 | 
329 |   const payloadPayload =
330 |     "payload" in payload &&
331 |     typeof payload.payload === "object" &&
332 |     payload.payload !== null
333 |       ? payload.payload
334 |       : undefined
335 | 
336 |   let configLabelKey: string = key
337 | 
338 |   if (
339 |     key in payload &&
340 |     typeof payload[key as keyof typeof payload] === "string"
341 |   ) {
342 |     configLabelKey = payload[key as keyof typeof payload] as string
343 |   } else if (
344 |     payloadPayload &&
345 |     key in payloadPayload &&
346 |     typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
347 |   ) {
348 |     configLabelKey = payloadPayload[
349 |       key as keyof typeof payloadPayload
350 |     ] as string
351 |   }
352 | 
353 |   return configLabelKey in config
354 |     ? config[configLabelKey]
355 |     : config[key as keyof typeof config]
356 | }
357 | 
358 | export {
359 |   ChartContainer,
360 |   ChartTooltip,
361 |   ChartTooltipContent,
362 |   ChartLegend,
363 |   ChartLegendContent,
364 |   ChartStyle,
365 | }
366 | 


--------------------------------------------------------------------------------
/src/components/settings-dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React from "react";
  4 | import { zodResolver } from "@hookform/resolvers/zod";
  5 | import { useForm } from "react-hook-form";
  6 | import { z } from "zod";
  7 | import { Button } from "@/components/ui/button";
  8 | import {
  9 |   Dialog,
 10 |   DialogContent,
 11 |   DialogDescription,
 12 |   DialogFooter,
 13 |   DialogHeader,
 14 |   DialogTitle,
 15 |   DialogClose,
 16 | } from "@/components/ui/dialog";
 17 | import {
 18 |   Form,
 19 |   FormControl,
 20 |   FormField,
 21 |   FormItem,
 22 |   FormLabel,
 23 |   FormMessage,
 24 | } from "@/components/ui/form";
 25 | import { Input } from "@/components/ui/input";
 26 | import { Label } from "@/components/ui/label";
 27 | import { Switch } from "@/components/ui/switch";
 28 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 29 | import { KeyRound, Palette, Loader2, RotateCcw } from "lucide-react";
 30 | import { useToast } from "@/hooks/use-toast";
 31 | import { PasswordInput } from "@/components/ui/password-input";
 32 | 
 33 | const passwordFormSchema = z
 34 |   .object({
 35 |     currentPassword: z.string().min(1, "当前密码为必填项。"),
 36 |     newPassword: z.string().min(6, "新密码至少需要6个字符。"),
 37 |     confirmPassword: z.string().min(1, "确认密码为必填项。"),
 38 |   })
 39 |   .refine((data) => data.newPassword === data.confirmPassword, {
 40 |     message: "新密码和确认密码不匹配。",
 41 |     path: ["confirmPassword"],
 42 |   });
 43 | 
 44 | type PasswordFormValues = z.infer<typeof passwordFormSchema>;
 45 | 
 46 | interface SettingsDialogProps {
 47 |   open: boolean;
 48 |   onOpenChange: (open: boolean) => void;
 49 |   currentPassword?: string;
 50 |   onPasswordChange: (newPassword: string) => boolean;
 51 |   currentTheme: "light" | "dark";
 52 |   onThemeChange: (theme: "light" | "dark") => void;
 53 | }
 54 | 
 55 | export function SettingsDialog({
 56 |   open,
 57 |   onOpenChange,
 58 |   currentPassword,
 59 |   onPasswordChange,
 60 |   currentTheme,
 61 |   onThemeChange,
 62 | }: SettingsDialogProps) {
 63 |   const { toast } = useToast();
 64 |   const [isPasswordPending, setIsPasswordPending] = React.useState(false);
 65 |   const [isResetPending, setIsResetPending] = React.useState(false);
 66 |   const [activeTab, setActiveTab] = React.useState("password");
 67 |   const [passwordButtonEnabled, setPasswordButtonEnabled] = React.useState(false);
 68 |   const [passwordsMatch, setPasswordsMatch] = React.useState<boolean | null>(null);
 69 | 
 70 |   const passwordForm = useForm<PasswordFormValues>({
 71 |     resolver: zodResolver(passwordFormSchema),
 72 |     defaultValues: {
 73 |       currentPassword: "",
 74 |       newPassword: "",
 75 |       confirmPassword: "",
 76 |     },
 77 |     mode: "onChange", // 实时验证
 78 |   });
 79 | 
 80 |   // 监听表单值变化以启用/禁用按钮
 81 |   React.useEffect(() => {
 82 |     const subscription = passwordForm.watch((formValues) => {
 83 |       const { currentPassword: current, newPassword: newPass, confirmPassword: confirm } = formValues;
 84 |       const allFieldsFilled = Boolean(current) && Boolean(newPass) && Boolean(confirm);
 85 |       const passwordsDoMatch = newPass === confirm;
 86 | 
 87 |       // 检查密码匹配状态
 88 |       if (confirm) {
 89 |         setPasswordsMatch(passwordsDoMatch);
 90 |       } else {
 91 |         setPasswordsMatch(null);
 92 |       }
 93 | 
 94 |       // 当所有字段都有值且新密码与确认密码匹配时启用按钮
 95 |       setPasswordButtonEnabled(allFieldsFilled && passwordsDoMatch);
 96 |     });
 97 | 
 98 |     return () => subscription.unsubscribe();
 99 |   }, [passwordForm]);
100 | 
101 |   React.useEffect(() => {
102 |     if (open) {
103 |       passwordForm.reset();
104 |       setActiveTab("password");
105 |       setPasswordButtonEnabled(false);
106 |       setPasswordsMatch(null);
107 |     }
108 |   }, [open, passwordForm]);
109 | 
110 |   // 监听密码变化以显示不匹配提示
111 |   React.useEffect(() => {
112 |     const subscription = passwordForm.watch((value, { name }) => {
113 |       // 清除手动错误
114 |       if (passwordForm.formState.errors.currentPassword?.type === 'manual') {
115 |         passwordForm.clearErrors('currentPassword');
116 |       }
117 | 
118 |       // 检查密码是否匹配并通过toast通知
119 |       if (name === 'confirmPassword' || name === 'newPassword') {
120 |         const newPassword = value.newPassword;
121 |         const confirmPassword = value.confirmPassword;
122 | 
123 |         if (confirmPassword &&
124 |           confirmPassword.length > 0 &&
125 |           newPassword &&
126 |           newPassword !== confirmPassword) {
127 |           // 不立即显示toast，因为用户可能正在输入
128 |         }
129 |       }
130 |     });
131 |     return () => subscription.unsubscribe();
132 |   }, [passwordForm]);
133 | 
134 |   const handlePasswordSubmit = async (data: PasswordFormValues) => {
135 |     // 再次验证密码匹配
136 |     if (data.newPassword !== data.confirmPassword) {
137 |       toast({
138 |         title: "密码不匹配",
139 |         description: "新密码和确认密码不匹配，请重新输入。",
140 |         variant: "destructive",
141 |       });
142 |       return;
143 |     }
144 | 
145 |     setIsPasswordPending(true);
146 |     if (data.currentPassword !== currentPassword) {
147 |       toast({
148 |         title: "密码错误",
149 |         description: "当前密码不正确，请重新输入。",
150 |         variant: "destructive",
151 |       });
152 |       setIsPasswordPending(false);
153 |       return;
154 |     }
155 | 
156 |     const success = onPasswordChange(data.newPassword);
157 |     if (success) {
158 |       passwordForm.reset();
159 |       onOpenChange(false);
160 |     }
161 |     setIsPasswordPending(false);
162 |   };
163 | 
164 |   const handleResetPassword = async () => {
165 |     if (!window.confirm("确定要将密码重置为默认密码吗？")) {
166 |       return;
167 |     }
168 | 
169 |     setIsResetPending(true);
170 |     const success = onPasswordChange("admin");
171 |     setIsResetPending(false);
172 | 
173 |     if (success) {
174 |       toast({
175 |         title: "密码已重置",
176 |         description: "您的密码已重置为默认密码。",
177 |         variant: "success",
178 |       });
179 |       passwordForm.reset();
180 |     }
181 |   };
182 | 
183 |   return (
184 |     <Dialog open={open} onOpenChange={onOpenChange}>
185 |       <DialogContent className="sm:max-w-[480px] p-0 max-h-[90vh] flex flex-col min-h-[480px]">
186 |         <DialogHeader className="px-6 pt-6 pb-4 border-b">
187 |           <DialogTitle>设置</DialogTitle>
188 |           <DialogDescription>管理您的账户设置和应用偏好。</DialogDescription>
189 |         </DialogHeader>
190 | 
191 |         <div className="flex-1 overflow-hidden flex flex-col">
192 |           <Tabs
193 |             defaultValue="password"
194 |             value={activeTab}
195 |             onValueChange={setActiveTab}
196 |             className="flex-1 flex flex-col overflow-hidden"
197 |           >
198 |             <div className="border-b">
199 |               <div className="px-6 py-2">
200 |                 <TabsList className="grid w-full grid-cols-2">
201 |                   <TabsTrigger
202 |                     value="password"
203 |                     className="flex items-center z-10"
204 |                     onClick={() => setActiveTab("password")}
205 |                   >
206 |                     <KeyRound className="mr-2 h-4 w-4" />
207 |                     修改密码
208 |                   </TabsTrigger>
209 |                   <TabsTrigger
210 |                     value="appearance"
211 |                     className="flex items-center z-10"
212 |                     onClick={() => setActiveTab("appearance")}
213 |                   >
214 |                     <Palette className="mr-2 h-4 w-4" />
215 |                     外观
216 |                   </TabsTrigger>
217 |                 </TabsList>
218 |               </div>
219 |             </div>
220 | 
221 |             <div className="flex-1 overflow-y-auto">
222 |               <div className="px-6 py-4 min-h-[320px]">
223 |                 {activeTab === "password" && (
224 |                   <div className="h-full flex flex-col">
225 |                     <Form {...passwordForm}>
226 |                       <form
227 |                         id="password-form"
228 |                         onSubmit={passwordForm.handleSubmit(handlePasswordSubmit)}
229 |                         className="space-y-4 flex-1 flex flex-col"
230 |                       >
231 |                         <div className="space-y-4 flex-1">
232 |                           <FormField
233 |                             control={passwordForm.control}
234 |                             name="currentPassword"
235 |                             render={({ field }) => (
236 |                               <FormItem>
237 |                                 <FormLabel>当前密码</FormLabel>
238 |                                 <FormControl>
239 |                                   <PasswordInput {...field} />
240 |                                 </FormControl>
241 |                               </FormItem>
242 |                             )}
243 |                           />
244 |                           <FormField
245 |                             control={passwordForm.control}
246 |                             name="newPassword"
247 |                             render={({ field }) => (
248 |                               <FormItem>
249 |                                 <FormLabel>新密码</FormLabel>
250 |                                 <FormControl>
251 |                                   <PasswordInput {...field} />
252 |                                 </FormControl>
253 |                               </FormItem>
254 |                             )}
255 |                           />
256 |                           <FormField
257 |                             control={passwordForm.control}
258 |                             name="confirmPassword"
259 |                             render={({ field }) => (
260 |                               <FormItem>
261 |                                 <FormLabel>确认新密码</FormLabel>
262 |                                 <FormControl>
263 |                                   <PasswordInput {...field} />
264 |                                 </FormControl>
265 |                                 {passwordsMatch === false && (
266 |                                   <p className="text-sm text-destructive mt-1">密码不匹配</p>
267 |                                 )}
268 |                                 {passwordsMatch === true && (
269 |                                   <p className="text-sm text-green-500 mt-1">密码匹配</p>
270 |                                 )}
271 |                               </FormItem>
272 |                             )}
273 |                           />
274 |                         </div>
275 |                         <div className="pt-2 border-t mt-2">
276 |                           <Button
277 |                             type="button"
278 |                             variant="outline"
279 |                             className="w-full mt-4 flex items-center justify-center text-destructive border-destructive/30 hover:bg-destructive/10"
280 |                             onClick={handleResetPassword}
281 |                             disabled={isResetPending}
282 |                           >
283 |                             {isResetPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <RotateCcw className="mr-2 h-4 w-4" />}
284 |                             重置为默认密码
285 |                           </Button>
286 |                           <p className="text-xs text-muted-foreground text-center mt-2">
287 |                             此操作将使您的密码重置为默认密码
288 |                           </p>
289 |                         </div>
290 |                       </form>
291 |                     </Form>
292 |                   </div>
293 |                 )}
294 | 
295 |                 {activeTab === "appearance" && (
296 |                   <div className="space-y-4 h-full flex flex-col">
297 |                     <div className="flex-1">
298 |                       <h3 className="text-lg font-medium mb-4">主题</h3>
299 |                       <div className="flex items-center justify-between rounded-lg border p-4 w-full">
300 |                         <div className="flex flex-col space-y-1 pr-4 max-w-[70%]">
301 |                           <span className="font-medium">深色模式</span>
302 |                           <span className="font-normal leading-snug text-muted-foreground">
303 |                             切换应用到深色主题。
304 |                           </span>
305 |                         </div>
306 |                         <div className="flex-shrink-0 ml-auto">
307 |                           <Switch
308 |                             id="dark-mode-switch"
309 |                             checked={currentTheme === "dark"}
310 |                             onCheckedChange={(checked) =>
311 |                               onThemeChange(checked ? "dark" : "light")
312 |                             }
313 |                             aria-label="切换深色模式"
314 |                           />
315 |                         </div>
316 |                       </div>
317 |                     </div>
318 |                   </div>
319 |                 )}
320 |               </div>
321 |             </div>
322 |           </Tabs>
323 |         </div>
324 | 
325 |         <div className="border-t px-6 py-4 flex flex-row items-center justify-between gap-4 bg-background">
326 |           <DialogClose asChild>
327 |             <Button type="button" variant="outline" className="flex-shrink-0">
328 |               关闭
329 |             </Button>
330 |           </DialogClose>
331 | 
332 |           <div className="flex justify-end">
333 |             {activeTab === 'password' && (
334 |               <Button
335 |                 form="password-form"
336 |                 type="submit"
337 |                 className="flex-shrink-0"
338 |                 disabled={isPasswordPending || !passwordButtonEnabled}
339 |               >
340 |                 {isPasswordPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
341 |                 保存密码
342 |               </Button>
343 |             )}
344 |           </div>
345 |         </div>
346 |       </DialogContent>
347 |     </Dialog>
348 |   );
349 | }
350 | 


--------------------------------------------------------------------------------
/src/components/add-edit-domain-dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React from "react";
  4 | import { zodResolver } from "@hookform/resolvers/zod";
  5 | import { format, parse, isValid } from "date-fns";
  6 | import { zhCN } from "date-fns/locale/zh-CN";
  7 | import { CalendarIcon, Loader2 } from "lucide-react";
  8 | import { useForm } from "react-hook-form";
  9 | import { z } from "zod";
 10 | 
 11 | import { Button } from "@/components/ui/button";
 12 | import { Calendar } from "@/components/ui/calendar";
 13 | import {
 14 |   Dialog,
 15 |   DialogContent,
 16 |   DialogDescription,
 17 |   DialogFooter,
 18 |   DialogHeader,
 19 |   DialogTitle,
 20 | } from "@/components/ui/dialog";
 21 | import {
 22 |   Form,
 23 |   FormControl,
 24 |   FormField,
 25 |   FormItem,
 26 |   FormLabel,
 27 |   FormMessage,
 28 | } from "@/components/ui/form";
 29 | import { Input } from "@/components/ui/input";
 30 | import {
 31 |   Popover,
 32 |   PopoverContent,
 33 |   PopoverTrigger,
 34 | } from "@/components/ui/popover";
 35 | import { cn } from "@/lib/utils";
 36 | import type { DomainInfo } from "@/lib/types";
 37 | 
 38 | const domainFormSchema = z.object({
 39 |   name: z.string().min(1, "域名为必填项。").refine(value => {
 40 |     try {
 41 |       // Ensure a scheme is present for URL parsing, default to http if not.
 42 |       const urlValue = value.includes('://') ? value : `http://${value}`;
 43 |       const url = new URL(urlValue);
 44 |       // Check if the hostname is what we expect (e.g., not a path of a larger URL)
 45 |       // and if it contains a period, which is typical for valid domains.
 46 |       return url.hostname === (value.includes('://') ? url.hostname : value) && value.includes('.');
 47 |     } catch (_) {
 48 |       return false;
 49 |     }
 50 |   }, "域名格式无效。应为例如 'example.com'。"),
 51 |   expirationDate: z.date({
 52 |     required_error: "到期日期为必填项。",
 53 |     invalid_type_error: "日期格式无效。",
 54 |   }).refine(date => {
 55 |     const today = new Date();
 56 |     today.setHours(0, 0, 0, 0); // Compare with the beginning of today
 57 |     return date >= today;
 58 |   }, { message: "到期日期不能早于今天。" }),
 59 | });
 60 | 
 61 | type DomainFormValues = z.infer<typeof domainFormSchema>;
 62 | 
 63 | interface AddEditDomainDialogProps {
 64 |   open: boolean;
 65 |   onOpenChange: (open: boolean) => void;
 66 |   onSubmit: (data: DomainFormValues) => Promise<void> | void;
 67 |   initialData?: DomainInfo | null;
 68 |   isPending?: boolean;
 69 | }
 70 | 
 71 | export function AddEditDomainDialog({
 72 |   open,
 73 |   onOpenChange,
 74 |   onSubmit,
 75 |   initialData,
 76 |   isPending = false,
 77 | }: AddEditDomainDialogProps) {
 78 |   const form = useForm<DomainFormValues>({
 79 |     resolver: zodResolver(domainFormSchema),
 80 |     defaultValues: {
 81 |       name: "",
 82 |       expirationDate: undefined,
 83 |     },
 84 |   });
 85 | 
 86 |   const [dateInputValue, setDateInputValue] = React.useState<string>("");
 87 |   const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
 88 |   const dateInputRef = React.useRef<HTMLInputElement>(null);
 89 |   const [cursor, setCursor] = React.useState<number | null>(null);
 90 | 
 91 | 
 92 |   React.useEffect(() => {
 93 |     if (dateInputRef.current && cursor !== null) {
 94 |       dateInputRef.current.setSelectionRange(cursor, cursor);
 95 |       setCursor(null);
 96 |     }
 97 |   }, [dateInputValue, cursor]);
 98 | 
 99 | 
100 |   React.useEffect(() => {
101 |     if (open) {
102 |       const name = initialData?.name || "";
103 |       let expDate: Date | undefined = undefined;
104 |       let expDateString = "";
105 | 
106 |       if (initialData?.expirationDate) {
107 |         const parsedInitDate = new Date(initialData.expirationDate);
108 |         if (isValid(parsedInitDate)) {
109 |           expDate = parsedInitDate;
110 |           expDateString = format(parsedInitDate, "yyyy-MM-dd");
111 |         }
112 |       }
113 | 
114 |       form.reset({
115 |         name: name,
116 |         expirationDate: expDate,
117 |       });
118 |       setDateInputValue(expDateString);
119 |       form.clearErrors();
120 |     }
121 |   }, [open, initialData, form]);
122 | 
123 | 
124 |   const handleFormSubmit = async (data: DomainFormValues) => {
125 |     await onSubmit(data);
126 |   };
127 | 
128 |   const dialogTitle = initialData ? "编辑域名" : "添加新域名";
129 |   const dialogDescription = initialData
130 |     ? "更新您的域名信息。"
131 |     : "请输入域名及其到期日期。";
132 | 
133 |   return (
134 |     <Dialog open={open} onOpenChange={(isOpen) => {
135 |       onOpenChange(isOpen);
136 |       if (!isOpen) {
137 |         setIsCalendarOpen(false);
138 |       }
139 |     }}>
140 |       <DialogContent className="sm:max-w-[425px] shadow-xl max-h-[90vh] my-4 flex flex-col">
141 |         <DialogHeader className="border-b pb-4">
142 |           <DialogTitle>{dialogTitle}</DialogTitle>
143 |           <DialogDescription>{dialogDescription}</DialogDescription>
144 |         </DialogHeader>
145 | 
146 |         <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent">
147 |           <Form {...form}>
148 |             <form
149 |               id="domain-form"
150 |               onSubmit={form.handleSubmit(handleFormSubmit)}
151 |               className="space-y-8 px-6 py-4"
152 |             >
153 |               <FormField
154 |                 control={form.control}
155 |                 name="name"
156 |                 render={({ field }) => (
157 |                   <FormItem>
158 |                     <FormLabel>域名</FormLabel>
159 |                     <FormControl>
160 |                       <Input placeholder="example.com" {...field} />
161 |                     </FormControl>
162 |                     <FormMessage />
163 |                   </FormItem>
164 |                 )}
165 |               />
166 |               <FormField
167 |                 control={form.control}
168 |                 name="expirationDate"
169 |                 render={({ field }) => {
170 |                   return (
171 |                     <FormItem className="flex flex-col">
172 |                       <FormLabel>到期日期</FormLabel>
173 |                       <div className="flex items-center gap-2">
174 |                         <FormControl>
175 |                           <Input
176 |                             ref={dateInputRef}
177 |                             placeholder="YYYY-MM-DD"
178 |                             value={dateInputValue}
179 |                             maxLength={10}
180 |                             onChange={(e) => {
181 |                               const input = e.target;
182 |                               let value = input.value;
183 |                               const selectionStart = input.selectionStart;
184 | 
185 |                               let digits = value.replace(/[^\d]/g, "");
186 | 
187 |                               let formattedValue = "";
188 |                               if (digits.length > 0) {
189 |                                 formattedValue = digits.substring(0, 4);
190 |                               }
191 |                               if (digits.length > 4) {
192 |                                 formattedValue += "-" + digits.substring(4, 6);
193 |                               }
194 |                               if (digits.length > 6) {
195 |                                 formattedValue += "-" + digits.substring(6, 8);
196 |                               }
197 | 
198 |                               setDateInputValue(formattedValue);
199 | 
200 |                               if (selectionStart !== null) {
201 |                                 let nonHyphenOriginal = 0;
202 |                                 for (let i = 0; i < selectionStart; i++) if (value[i] !== '-' && /\d/.test(value[i])) nonHyphenOriginal++;
203 | 
204 |                                 let nonHyphenFormatted = 0;
205 |                                 let finalCursorPos = 0;
206 |                                 for (let i = 0; i < formattedValue.length; i++) {
207 |                                   if (formattedValue[i] !== '-' && /\d/.test(formattedValue[i])) nonHyphenFormatted++;
208 |                                   finalCursorPos++;
209 |                                   if (nonHyphenFormatted >= nonHyphenOriginal && value.length <= formattedValue.length) break;
210 |                                   if (nonHyphenFormatted > nonHyphenOriginal && value.length > formattedValue.length) break;
211 |                                 }
212 | 
213 |                                 if (value.length > formattedValue.length && selectionStart > 0) {
214 |                                   if (value[selectionStart - 1] === '-' && formattedValue.length >= selectionStart - 1) {
215 |                                     finalCursorPos = Math.max(0, selectionStart - 1);
216 |                                   } else {
217 |                                     let digitsBeforeOriginalCursor = 0;
218 |                                     const prevCharWasDigit = selectionStart > 0 && /\d/.test(value[selectionStart - 1]);
219 |                                     for (let i = 0; i < (selectionStart - (prevCharWasDigit ? 1 : 0)); i++) {
220 |                                       if (/\d/.test(value[i])) digitsBeforeOriginalCursor++;
221 |                                     }
222 | 
223 |                                     let currentDigitsInFormatted = 0;
224 |                                     finalCursorPos = 0;
225 |                                     for (let i = 0; i < formattedValue.length; i++) {
226 |                                       if (/\d/.test(formattedValue[i])) currentDigitsInFormatted++;
227 |                                       finalCursorPos++;
228 |                                       if (currentDigitsInFormatted === digitsBeforeOriginalCursor) break;
229 |                                     }
230 |                                     if (selectionStart - 1 === 0 && digits.length === 0) finalCursorPos = 0;
231 |                                     else if (digits.length > 0 && finalCursorPos === 0 && currentDigitsInFormatted < digitsBeforeOriginalCursor) finalCursorPos = formattedValue.length;
232 | 
233 | 
234 |                                   }
235 |                                 } else if (selectionStart === value.length && value.length <= formattedValue.length) {
236 |                                   finalCursorPos = formattedValue.length;
237 |                                 }
238 |                                 setCursor(finalCursorPos);
239 |                               }
240 | 
241 | 
242 |                               if (formattedValue === "") {
243 |                                 field.onChange(undefined);
244 |                               } else {
245 |                                 const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
246 |                                 if (dateRegex.test(formattedValue)) {
247 |                                   const parsedDate = parse(formattedValue, "yyyy-MM-dd", new Date());
248 |                                   if (isValid(parsedDate)) {
249 |                                     field.onChange(parsedDate);
250 |                                   } else {
251 |                                     field.onChange(undefined);
252 |                                   }
253 |                                 } else {
254 |                                   field.onChange(undefined);
255 |                                 }
256 |                               }
257 |                               if (formattedValue.length === 10 || formattedValue === "") {
258 |                                 form.trigger("expirationDate");
259 |                               }
260 |                             }}
261 |                             onBlur={() => {
262 |                               field.onBlur();
263 |                               const formValueDate = form.getValues('expirationDate');
264 |                               if (formValueDate && isValid(formValueDate)) {
265 |                                 const formattedRHFDate = format(formValueDate, 'yyyy-MM-dd');
266 |                                 if (dateInputValue !== formattedRHFDate) {
267 |                                   setDateInputValue(formattedRHFDate);
268 |                                 }
269 |                               } else if (!formValueDate && dateInputValue !== "" && !/^\d{4}(-\d{0,2}(-\d{0,2})?)?$/.test(dateInputValue)) {
270 |                                 // Keep invalid user input
271 |                               } else if (!formValueDate && dateInputValue === "") {
272 |                                 // All good
273 |                               }
274 |                               form.trigger("expirationDate");
275 |                             }}
276 |                             className="flex-grow"
277 |                           />
278 |                         </FormControl>
279 |                         <Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
280 |                           <PopoverTrigger asChild>
281 |                             <Button
282 |                               variant={"outline"}
283 |                               className={cn(
284 |                                 "w-auto p-2 shrink-0",
285 |                                 !field.value && dateInputValue === "" && "text-muted-foreground"
286 |                               )}
287 |                               aria-label="打开日历"
288 |                             >
289 |                               <CalendarIcon className="h-4 w-4" />
290 |                             </Button>
291 |                           </PopoverTrigger>
292 |                           <PopoverContent className="w-auto p-0" align="start">
293 |                             <Calendar
294 |                               locale={zhCN}
295 |                               mode="single"
296 |                               selected={field.value}
297 |                               onSelect={(date) => {
298 |                                 if (date && isValid(date)) {
299 |                                   field.onChange(date);
300 |                                   setDateInputValue(format(date, "yyyy-MM-dd"));
301 |                                 } else {
302 |                                   field.onChange(undefined);
303 |                                 }
304 |                                 setIsCalendarOpen(false);
305 |                                 form.trigger("expirationDate");
306 |                               }}
307 |                               disabled={(date) => {
308 |                                 const currentDisabledToday = new Date();
309 |                                 currentDisabledToday.setHours(0, 0, 0, 0);
310 |                                 return date < currentDisabledToday;
311 |                               }}
312 |                               initialFocus
313 |                               fixedWeeks
314 |                             />
315 |                           </PopoverContent>
316 |                         </Popover>
317 |                       </div>
318 |                       <FormMessage />
319 |                     </FormItem>
320 |                   );
321 |                 }}
322 |               />
323 |             </form>
324 |           </Form>
325 |         </div>
326 | 
327 |         <DialogFooter className="p-6 pt-4 border-t flex flex-row w-full">
328 |           <div className="mr-auto">
329 |             <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>
330 |               取消
331 |             </Button>
332 |           </div>
333 |           <Button
334 |             type="submit"
335 |             form="domain-form"
336 |             onClick={() => form.handleSubmit(handleFormSubmit)()}
337 |             disabled={isPending || !form.formState.isValid || (!!initialData && !form.formState.isDirty)}
338 |           >
339 |             {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
340 |             {initialData ? "保存更改" : "添加新域名"}
341 |           </Button>
342 |         </DialogFooter>
343 |       </DialogContent>
344 |     </Dialog>
345 |   );
346 | }
347 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import type React from "react";
  4 | import { useEffect, useState, useTransition } from "react";
  5 | import { PlusCircle, ListChecks, SearchX, LogOut, Cog } from "lucide-react";
  6 | import { Button } from "@/components/ui/button";
  7 | import { AddEditDomainDialog } from "@/components/add-edit-domain-dialog";
  8 | import { SettingsDialog } from "@/components/settings-dialog";
  9 | import { DomainCard } from "@/components/domain-card";
 10 | import type { DomainInfo } from "@/lib/types";
 11 | import { useToast } from "@/hooks/use-toast";
 12 | import { Input } from "@/components/ui/input";
 13 | import { useRouter } from "next/navigation";
 14 | 
 15 | // Stricter type for user credentials
 16 | type UserCredentials = {
 17 |   username: string;
 18 |   password: string; // Password is now non-optional
 19 | };
 20 | 
 21 | export default function HomePage() {
 22 |   const [domains, setDomains] = useState<DomainInfo[]>([]);
 23 |   const [isAddEditDialogOpen, setIsAddEditDialogOpen] = useState(false);
 24 |   const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false);
 25 |   const [editingDomain, setEditingDomain] = useState<DomainInfo | null>(null);
 26 |   const [searchTerm, setSearchTerm] = useState("");
 27 |   const [currentTime, setCurrentTime] = useState<string | null>(null);
 28 |   const [isLoadingAuth, setIsLoadingAuth] = useState(true);
 29 |   const [currentUser, setCurrentUser] = useState<UserCredentials | null>(null);
 30 |   const [theme, setTheme] = useState<'light' | 'dark'>('light');
 31 | 
 32 |   const { toast } = useToast();
 33 |   const [isPending, startTransition] = useTransition();
 34 |   const router = useRouter();
 35 | 
 36 |   useEffect(() => {
 37 |     if (typeof window !== "undefined") {
 38 |       const sessionActive = localStorage.getItem("sessionActive");
 39 | 
 40 |       if (sessionActive === "true") {
 41 |         const storedCredentialsString = localStorage.getItem("userCredentials");
 42 |         if (storedCredentialsString) {
 43 |           try {
 44 |             const creds = JSON.parse(storedCredentialsString);
 45 |             // Ensure creds.password is a non-empty string
 46 |             if (creds && creds.username && typeof creds.password === 'string' && creds.password.length > 0) {
 47 |               setCurrentUser(creds as UserCredentials);
 48 |             } else {
 49 |               // Corrupted or incomplete credentials (e.g. password missing or empty)
 50 |               localStorage.removeItem("userCredentials");
 51 |               localStorage.removeItem("sessionActive");
 52 |               router.replace("/login");
 53 |             }
 54 |           } catch (e) {
 55 |             // Error parsing credentials
 56 |             localStorage.removeItem("userCredentials");
 57 |             localStorage.removeItem("sessionActive");
 58 |             router.replace("/login");
 59 |           }
 60 |         } else {
 61 |           // Session active but no credentials (should ideally not happen with proper login/logout)
 62 |           localStorage.removeItem("sessionActive"); // Clear invalid session state
 63 |           router.replace("/login");
 64 |         }
 65 |       } else {
 66 |         // Session not active or flag missing
 67 |         router.replace("/login");
 68 |       }
 69 |       setIsLoadingAuth(false);
 70 | 
 71 |       const storedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
 72 |       if (storedTheme) {
 73 |         setTheme(storedTheme);
 74 |         document.documentElement.classList.toggle('dark', storedTheme === 'dark');
 75 |       } else {
 76 |         // Default to light if no theme set or if system preference is not desired
 77 |         document.documentElement.classList.remove('dark');
 78 |         setTheme('light');
 79 |       }
 80 |     }
 81 |   }, [router]);
 82 | 
 83 |   useEffect(() => {
 84 |     if (isLoadingAuth) return;
 85 |     const storedDomains = localStorage.getItem("domains");
 86 |     if (storedDomains) {
 87 |       try {
 88 |         const parsedDomains: DomainInfo[] = JSON.parse(storedDomains).map((domain: any) => {
 89 |           let expDateObj: Date;
 90 |           const tempExpDate = new Date(domain.expirationDate);
 91 |           if (domain.expirationDate === null || domain.expirationDate === undefined || domain.expirationDate === "" || isNaN(tempExpDate.getTime())) {
 92 |             expDateObj = new Date(NaN); // Consistent Invalid Date
 93 |           } else {
 94 |             expDateObj = tempExpDate;
 95 |           }
 96 | 
 97 |           let dateAddedObj: Date;
 98 |           const tempDateAdded = new Date(domain.dateAdded);
 99 |           if (domain.dateAdded === null || domain.dateAdded === undefined || domain.dateAdded === "" || isNaN(tempDateAdded.getTime())) {
100 |             dateAddedObj = new Date(NaN); // Consistent Invalid Date
101 |           } else {
102 |             dateAddedObj = tempDateAdded;
103 |           }
104 | 
105 |           return {
106 |             ...domain,
107 |             id: domain.id || crypto.randomUUID(), // Ensure ID exists
108 |             name: domain.name || "Unnamed Domain",
109 |             expirationDate: expDateObj,
110 |             dateAdded: dateAddedObj,
111 |           };
112 |         });
113 |         setDomains(parsedDomains);
114 |       } catch (error) {
115 |         console.error("Failed to parse domains from localStorage", error);
116 |         localStorage.removeItem("domains");
117 |       }
118 |     }
119 |   }, [isLoadingAuth]);
120 | 
121 |   useEffect(() => {
122 |     if (isLoadingAuth) return;
123 |     if (domains.length > 0 || localStorage.getItem("domains")) { // Only save if there are domains or if there was something to clear
124 |       localStorage.setItem("domains", JSON.stringify(domains));
125 |     }
126 |   }, [domains, isLoadingAuth]);
127 | 
128 |   useEffect(() => {
129 |     if (isLoadingAuth) return; // Don't run timer if auth is still loading
130 |     const updateBeijingTime = () => {
131 |       const now = new Date();
132 |       // Ensure 'Asia/Shanghai' is a valid time zone for toLocaleString, might need polyfill for older envs
133 |       const beijingTime = new Date(now.toLocaleString('en-US', { timeZone: 'Asia/Shanghai' }));
134 |       setCurrentTime(beijingTime.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }));
135 |     };
136 | 
137 |     updateBeijingTime();
138 |     const timer = setInterval(updateBeijingTime, 1000);
139 | 
140 |     return () => clearInterval(timer);
141 |   }, [isLoadingAuth]);
142 | 
143 |   const handleLogout = () => {
144 |     localStorage.setItem("sessionActive", "false"); // Mark session as inactive
145 |     // Do NOT remove userCredentials, so changed password persists
146 |     setCurrentUser(null); // Clear local user state
147 | 
148 |     // Force page reload to ensure login form fields are reset properly
149 |     router.push("/login");
150 |   };
151 | 
152 |   const handleAddDomain = (data: { name: string; expirationDate: Date }) => {
153 |     startTransition(() => {
154 |       const newDomain: DomainInfo = {
155 |         id: crypto.randomUUID(),
156 |         ...data,
157 |         dateAdded: new Date(),
158 |       };
159 |       setDomains((prev) => [...prev, newDomain]);
160 |       toast({
161 |         title: "域名已添加",
162 |         description: `${data.name} 已添加到您的观察列表。`,
163 |         variant: "success",
164 |       });
165 |       setIsAddEditDialogOpen(false);
166 |     });
167 |   };
168 | 
169 |   const handleEditDomain = (data: { name: string; expirationDate: Date }) => {
170 |     if (!editingDomain) return;
171 |     startTransition(() => {
172 |       setDomains((prev) =>
173 |         prev.map((d) => (d.id === editingDomain.id ? { ...editingDomain, ...data } : d))
174 |       );
175 |       toast({
176 |         title: "域名已更新",
177 |         description: `${data.name} 已更新。`,
178 |         variant: "success",
179 |       });
180 |       setIsAddEditDialogOpen(false);
181 |       setEditingDomain(null);
182 |     });
183 |   };
184 | 
185 |   const handleDeleteDomain = (domainId: string) => {
186 |     startTransition(() => {
187 |       const domainToDelete = domains.find(d => d.id === domainId);
188 |       setDomains((prev) => prev.filter((d) => d.id !== domainId));
189 |       if (domainToDelete) {
190 |         toast({
191 |           title: "域名已删除",
192 |           description: `${domainToDelete.name} 已从您的观察列表中移除。`,
193 |           variant: "destructive",
194 |         });
195 |       }
196 |     });
197 |   };
198 | 
199 |   const openAddDialog = () => {
200 |     setEditingDomain(null);
201 |     setIsAddEditDialogOpen(true);
202 |   };
203 | 
204 |   const openEditDialog = (domain: DomainInfo) => {
205 |     setEditingDomain(domain);
206 |     setIsAddEditDialogOpen(true);
207 |   };
208 | 
209 |   const handlePasswordChange = (newPassword: string) => {
210 |     if (currentUser) {
211 |       // Explicitly construct the object to ensure correct fields and types
212 |       const updatedCredentials: UserCredentials = {
213 |         username: currentUser.username,
214 |         password: newPassword, // newPassword is validated by Zod in SettingsDialog to be min 6 chars
215 |       };
216 |       localStorage.setItem("userCredentials", JSON.stringify(updatedCredentials));
217 |       setCurrentUser(updatedCredentials); // Update local state for current session
218 |       toast({
219 |         title: "密码已更新",
220 |         description: "您的密码已成功更改。",
221 |         variant: "success",
222 |       });
223 |       return true;
224 |     }
225 |     toast({
226 |       title: "密码更新失败",
227 |       description: "无法找到当前用户信息。",
228 |       variant: "destructive",
229 |     });
230 |     return false;
231 |   };
232 | 
233 |   const handleThemeChange = (newTheme: 'light' | 'dark') => {
234 |     setTheme(newTheme);
235 |     localStorage.setItem('theme', newTheme);
236 |     document.documentElement.classList.toggle('dark', newTheme === 'dark');
237 |     toast({
238 |       title: "主题已切换",
239 |       description: `已切换到${newTheme === 'dark' ? '深色' : '浅色'}模式。`,
240 |       variant: "default"
241 |     });
242 |   };
243 | 
244 |   const filteredAndSortedDomains = domains
245 |     .filter(domain => domain.name.toLowerCase().includes(searchTerm.toLowerCase()))
246 |     .sort((a, b) => {
247 |       // Primary sort: Expiration Date (soonest first, invalids last)
248 |       const aExpDate = a.expirationDate;
249 |       const bExpDate = b.expirationDate;
250 |       const aExpIsValid = aExpDate && !isNaN(aExpDate.getTime());
251 |       const bExpIsValid = bExpDate && !isNaN(bExpDate.getTime());
252 | 
253 |       if (aExpIsValid && bExpIsValid) {
254 |         if (aExpDate.getTime() !== bExpDate.getTime()) {
255 |           return aExpDate.getTime() - bExpDate.getTime();
256 |         }
257 |       } else if (aExpIsValid && !bExpIsValid) {
258 |         return -1; // Valid dates come before invalid dates
259 |       } else if (!aExpIsValid && bExpIsValid) {
260 |         return 1;  // Invalid dates go after valid dates
261 |       }
262 |       // If expiration dates are same or both invalid, secondary sort: Date Added (newest first, invalids last)
263 |       const aDateAdded = a.dateAdded;
264 |       const bDateAdded = b.dateAdded;
265 |       const aAddedIsValid = aDateAdded && !isNaN(aDateAdded.getTime());
266 |       const bAddedIsValid = bDateAdded && !isNaN(bDateAdded.getTime());
267 | 
268 |       if (aAddedIsValid && bAddedIsValid) {
269 |         return bDateAdded.getTime() - aDateAdded.getTime(); // Newest added first
270 |       } else if (aAddedIsValid && !bAddedIsValid) {
271 |         return -1;
272 |       } else if (!aAddedIsValid && bAddedIsValid) {
273 |         return 1;
274 |       }
275 |       return 0; // If all dates are same or all invalid, keep original order relative to each other
276 |     });
277 | 
278 |   if (isLoadingAuth) {
279 |     return (
280 |       <div className="flex items-center justify-center h-full">
281 |         <p className="text-lg text-muted-foreground">正在加载...</p>
282 |       </div>
283 |     );
284 |   }
285 | 
286 |   return (
287 |     <div className="h-full bg-background text-foreground flex flex-col">
288 |       <header className="bg-primary text-primary-foreground shadow-md">
289 |         <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col sm:flex-row justify-between items-center">
290 |           <div className="flex items-center gap-2 mb-4 sm:mb-0">
291 |             <ListChecks className="h-8 w-8 sm:h-10 sm:w-10" />
292 |             <h1 className="text-2xl sm:text-3xl font-bold">域名监控</h1>
293 |           </div>
294 |           <div className="flex gap-2 items-center">
295 |             <Button onClick={openAddDialog} className="bg-accent hover:bg-accent/90 text-accent-foreground">
296 |               <PlusCircle className="mr-2 h-5 w-5" /> 添加新域名
297 |             </Button>
298 |             <Button
299 |               variant="outline"
300 |               size="icon"
301 |               onClick={() => setIsSettingsDialogOpen(true)}
302 |               className="bg-primary-foreground/10 hover:bg-primary-foreground/20 text-primary-foreground border-primary-foreground/30"
303 |               aria-label="打开设置"
304 |             >
305 |               <Cog className="h-5 w-5" />
306 |             </Button>
307 |             <Button
308 |               onClick={handleLogout}
309 |               variant="outline"
310 |               size="icon"
311 |               className="bg-primary-foreground/10 hover:bg-primary-foreground/20 text-primary-foreground border-primary-foreground/30"
312 |               aria-label="登出"
313 |             >
314 |               <LogOut className="h-5 w-5" />
315 |             </Button>
316 |           </div>
317 |         </div>
318 |       </header>
319 | 
320 |       <main className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-grow overflow-y-auto">
321 |         <div className="mb-8 p-6 bg-card rounded-lg shadow">
322 |           <div className="flex flex-col sm:flex-row gap-4 items-center">
323 |             <div className="text-sm font-semibold whitespace-nowrap p-2 rounded-md border bg-background h-10 flex items-center justify-center text-foreground">
324 |               {currentTime !== null ? currentTime : '加载时间中...'}
325 |             </div>
326 |             <Input
327 |               type="search"
328 |               placeholder="搜索域名..."
329 |               value={searchTerm}
330 |               onChange={(e) => setSearchTerm(e.target.value)}
331 |               className="flex-grow"
332 |             />
333 |           </div>
334 |         </div>
335 | 
336 |         {filteredAndSortedDomains.length > 0 ? (
337 |           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
338 |             {filteredAndSortedDomains.map((domain) => (
339 |               <DomainCard
340 |                 key={domain.id}
341 |                 domain={domain}
342 |                 onEdit={openEditDialog}
343 |                 onDelete={handleDeleteDomain}
344 |               />
345 |             ))}
346 |           </div>
347 |         ) : (
348 |           <div className="text-center py-16">
349 |             <SearchX className="mx-auto h-24 w-24 text-muted-foreground mb-6" />
350 |             <h2 className="text-2xl font-semibold mb-2 text-card-foreground">未找到域名</h2>
351 |             <p className="text-muted-foreground">
352 |               {domains.length === 0 ? '您还没有添加任何域名。点击"添加新域名"开始。' : '没有域名符合您的搜索条件。'}
353 |             </p>
354 |             {domains.length > 0 && searchTerm && (
355 |               <Button variant="link" onClick={() => setSearchTerm("")} className="mt-4">清除搜索</Button>
356 |             )}
357 |           </div>
358 |         )}
359 |       </main>
360 | 
361 |       <AddEditDomainDialog
362 |         open={isAddEditDialogOpen}
363 |         onOpenChange={setIsAddEditDialogOpen}
364 |         onSubmit={editingDomain ? handleEditDomain : handleAddDomain}
365 |         initialData={editingDomain}
366 |         isPending={isPending}
367 |       />
368 | 
369 |       {currentUser && currentUser.password && (
370 |         <SettingsDialog
371 |           open={isSettingsDialogOpen}
372 |           onOpenChange={setIsSettingsDialogOpen}
373 |           currentPassword={currentUser.password}
374 |           onPasswordChange={handlePasswordChange}
375 |           currentTheme={theme}
376 |           onThemeChange={handleThemeChange}
377 |         />
378 |       )}
379 | 
380 |       <footer className="py-8 border-t border-border">
381 |         <div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
382 |           &copy; {new Date().getFullYear()} 域名监控。关注您的域名状态。
383 |         </div>
384 |       </footer>
385 |     </div>
386 |   );
387 | }
388 | 


--------------------------------------------------------------------------------