优化流程

2026-10-05 01:26:37 +08:00 · 2025-07-02 15:40:14 +08:00
parent d7339af37b
commit 94e01ae63b
66 changed files with 5973 additions and 1988 deletions
@@ -0,0 +1,68 @@
+import * as React from "react";
+
+import { IconSvgProps } from "@/types";
+
+export const Logo: React.FC<IconSvgProps> = ({
+  size = 36,
+  height,
+  ...props
+}) => (
+  <svg
+    fill="none"
+    height={size || height}
+    viewBox="0 0 32 32"
+    width={size || height}
+    {...props}
+  >
+    <path
+      clipRule="evenodd"
+      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </svg>
+);
+
+export const MoonFilledIcon = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const SunFilledIcon = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+    </g>
+  </svg>
+);
@@ -0,0 +1,32 @@
+import { Link } from "@heroui/link";
+import {
+  Navbar as HeroUINavbar,
+  NavbarBrand,
+  NavbarContent,
+} from "@heroui/navbar";
+
+import { ThemeSwitch } from "@/components/theme-switch";
+import { Logo } from "@/components/icons";
+
+export const Navbar = () => {
+  return (
+    <HeroUINavbar maxWidth="xl" position="sticky">
+      <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
+        <NavbarBrand className="gap-3 max-w-fit">
+          <Link
+            className="flex justify-start items-center gap-1"
+            color="foreground"
+            href="/"
+          >
+            <Logo />
+            <p className="font-bold text-inherit">GOST</p>
+          </Link>
+        </NavbarBrand>
+      </NavbarContent>
+
+      <NavbarContent className="basis-1/5 sm:basis-full" justify="end">
+        <ThemeSwitch />
+      </NavbarContent>
+    </HeroUINavbar>
+  );
+};
@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react';
+import AdminLayout from '@/layouts/admin';
+
+interface PageWrapperProps {
+  children: React.ReactNode;
+  title: string;
+  description?: string;
+  className?: string;
+}
+
+export default function PageWrapper({ 
+  children, 
+  title, 
+  description, 
+  className = "container mx-auto max-w-7xl px-3 lg:px-6 py-8" 
+}: PageWrapperProps) {
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    // 使用短暂的延迟确保组件完全加载，避免闪烁
+    const timer = setTimeout(() => {
+      setIsReady(true);
+    }, 50);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!isReady) {
+    return (
+      <AdminLayout>
+        <div className="container mx-auto max-w-7xl px-3 lg:px-6 py-8">
+          <div className="flex items-center justify-center h-64">
+            <div className="flex items-center gap-3">
+              <div className="animate-spin h-5 w-5 border-2 border-primary border-t-transparent rounded-full"></div>
+              <span className="text-default-600">正在加载页面...</span>
+            </div>
+          </div>
+        </div>
+      </AdminLayout>
+    );
+  }
+
+  return (
+    <AdminLayout>
+      <div className={className}>
+        <div className="mb-6">
+          <h1 className="text-2xl font-bold mb-2 text-foreground">{title}</h1>
+          {description && (
+            <p className="text-default-600">{description}</p>
+          )}
+        </div>
+        {children}
+      </div>
+    </AdminLayout>
+  );
+} 
@@ -0,0 +1,41 @@
+import { tv } from "tailwind-variants";
+
+export const title = tv({
+  base: "tracking-tight inline font-semibold",
+  variants: {
+    color: {
+      violet: "from-[#FF1CF7] to-[#b249f8]",
+      yellow: "from-[#FF705B] to-[#FFB457]",
+      blue: "from-[#5EA2EF] to-[#0072F5]",
+      cyan: "from-[#00b7fa] to-[#01cfea]",
+      green: "from-[#6FEE8D] to-[#17c964]",
+      pink: "from-[#FF72E1] to-[#F54C7A]",
+      foreground: "dark:from-[#FFFFFF] dark:to-[#4B4B4B]",
+    },
+    size: {
+      sm: "text-3xl lg:text-4xl",
+      md: "text-[2.3rem] lg:text-5xl leading-9",
+      lg: "text-4xl lg:text-6xl",
+    },
+    fullWidth: {
+      true: "w-full block",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+  compoundVariants: [
+    {
+      color: [
+        "violet",
+        "yellow",
+        "blue",
+        "cyan",
+        "green",
+        "pink",
+        "foreground",
+      ],
+      class: "bg-clip-text text-transparent bg-gradient-to-b",
+    },
+  ],
+});
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useTheme } from '@heroui/use-theme';
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    // 确保主题与HTML class同步
+    const updateThemeClass = (currentTheme: string) => {
+      if (currentTheme === 'dark') {
+        document.documentElement.classList.add('dark');
+        document.documentElement.style.colorScheme = 'dark';
+      } else {
+        document.documentElement.classList.remove('dark');
+        document.documentElement.style.colorScheme = 'light';
+      }
+      // 保存到localStorage
+      localStorage.setItem('heroui-theme', currentTheme);
+    };
+
+    // 初始化时检查localStorage
+    const savedTheme = localStorage.getItem('heroui-theme');
+    if (savedTheme && savedTheme !== theme) {
+      setTheme(savedTheme);
+    }
+
+    // 监听主题变化
+    updateThemeClass(theme);
+  }, [theme, setTheme]);
+
+  return <>{children}</>;
+}; 
@@ -0,0 +1,82 @@
+import { FC, useState, useEffect } from "react";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { SwitchProps, useSwitch } from "@heroui/switch";
+import clsx from "clsx";
+import { useTheme } from "@heroui/use-theme";
+
+import { SunFilledIcon, MoonFilledIcon } from "@/components/icons";
+
+export interface ThemeSwitchProps {
+  className?: string;
+  classNames?: SwitchProps["classNames"];
+}
+
+export const ThemeSwitch: FC<ThemeSwitchProps> = ({
+  className,
+  classNames,
+}) => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  const { theme, setTheme } = useTheme();
+
+  const {
+    Component,
+    slots,
+    isSelected,
+    getBaseProps,
+    getInputProps,
+    getWrapperProps,
+  } = useSwitch({
+    isSelected: theme === "light",
+    onChange: () => setTheme(theme === "light" ? "dark" : "light"),
+  });
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, [isMounted]);
+
+  // Prevent Hydration Mismatch
+  if (!isMounted) return <div className="w-6 h-6" />;
+
+  return (
+    <Component
+      aria-label={isSelected ? "Switch to dark mode" : "Switch to light mode"}
+      {...getBaseProps({
+        className: clsx(
+          "px-px transition-opacity hover:opacity-80 cursor-pointer",
+          className,
+          classNames?.base,
+        ),
+      })}
+    >
+      <VisuallyHidden>
+        <input {...getInputProps()} />
+      </VisuallyHidden>
+      <div
+        {...getWrapperProps()}
+        className={slots.wrapper({
+          class: clsx(
+            [
+              "w-auto h-auto",
+              "bg-transparent",
+              "rounded-lg",
+              "flex items-center justify-center",
+              "group-data-[selected=true]:bg-transparent",
+              "!text-default-500",
+              "pt-px",
+              "px-0",
+              "mx-0",
+            ],
+            classNames?.wrapper,
+          ),
+        })}
+      >
+        {isSelected ? (
+          <MoonFilledIcon size={22} />
+        ) : (
+          <SunFilledIcon size={22} />
+        )}
+      </div>
+    </Component>
+  );
+};