feat: 添加关于页面

Ohh-889 · Ohh-889 · commit d727eafc77ab · 2025-03-03T15:06:22.000+08:00
diff --git a/src/components/TypingAnimation.tsx b/src/components/TypingAnimation.tsx
@@ -0,0 +1,87 @@
+import clsx from 'clsx';
+import type { MotionProps } from 'motion/react';
+import { motion } from 'motion/react';
+import { useEffect, useRef, useState } from 'react';
+
+interface TypingAnimationProps extends MotionProps {
+  as?: React.ElementType;
+  children: string;
+  className?: string;
+  delay?: number;
+  duration?: number;
+  startOnView?: boolean;
+}
+
+export function TypingAnimation({
+  as: Component = 'div',
+  children,
+  className,
+  delay = 0,
+  duration = 50,
+  startOnView = false,
+  ...props
+}: TypingAnimationProps) {
+  const MotionComponent = motion.create(Component, {
+    forwardMotionProps: true
+  });
+
+  const [displayedText, setDisplayedText] = useState<string>('');
+  const [started, setStarted] = useState(false);
+  const elementRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!startOnView) {
+      const startTimeout = setTimeout(() => {
+        setStarted(true);
+      }, delay);
+      return () => clearTimeout(startTimeout);
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setTimeout(() => {
+            setStarted(true);
+          }, delay);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (elementRef.current) {
+      observer.observe(elementRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [delay, startOnView]);
+
+  useEffect(() => {
+    if (!started) return;
+
+    let i = 0;
+    const typingEffect = setInterval(() => {
+      if (i < children.length) {
+        setDisplayedText(children.substring(0, i + 1));
+        i += 1;
+      } else {
+        clearInterval(typingEffect);
+      }
+    }, duration);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      clearInterval(typingEffect);
+    };
+  }, [children, duration, started]);
+
+  return (
+    <MotionComponent
+      className={clsx('tracking-[-0.02em]', className)}
+      ref={elementRef}
+      {...props}
+    >
+      {displayedText}
+    </MotionComponent>
+  );
+}
diff --git a/src/pages/(base)/about/index.tsx b/src/pages/(base)/about/index.tsx
@@ -0,0 +1,113 @@
+import { TypingAnimation } from '@/components/TypingAnimation';
+import pkg from '~/package.json';
+
+import HeaderDescription from './modules/header-description';
+import type { CardInfo, PkgJson, PkgVersionInfo } from './modules/shared';
+import { transformVersionData } from './modules/shared';
+
+const latestBuildTime = BUILD_TIME;
+
+// 解构 package.json 数据
+const { dependencies, devDependencies, name, version } = pkg;
+
+// 格式化 package.json 数据
+const pkgJson: PkgJson = {
+  dependencies: Object.entries(dependencies).map(transformVersionData),
+  devDependencies: Object.entries(devDependencies).map(transformVersionData),
+  name,
+  version
+};
+
+// 抽离渲染组件
+const TagItem = ({ nameOrHref }: PkgVersionInfo) => <ATag color="blue">{nameOrHref}</ATag>;
+
+const Link = ({ label, nameOrHref }: PkgVersionInfo) => (
+  <a
+    className="text-primary"
+    href={nameOrHref}
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    {label}
+  </a>
+);
+
+// 获取卡片信息的自定义 Hook
+function useGetCardInfo(): CardInfo[] {
+  const { t } = useTranslation();
+
+  // 项目基本信息
+  const packageInfo: PkgVersionInfo[] = [
+    {
+      label: t('page.about.projectInfo.version'),
+      nameOrHref: pkgJson.version,
+      render: TagItem
+    },
+    {
+      label: t('page.about.projectInfo.latestBuildTime'),
+      nameOrHref: latestBuildTime,
+      render: TagItem
+    },
+    {
+      label: t('page.about.projectInfo.githubLink'),
+      nameOrHref: pkg.homepage,
+      render: Link
+    },
+    {
+      label: t('page.about.projectInfo.previewLink'),
+      nameOrHref: pkg.website,
+      render: Link
+    }
+  ];
+
+  // 卡片信息配置
+  return [
+    {
+      content: packageInfo,
+      title: t('page.about.projectInfo.title')
+    },
+    {
+      content: pkgJson.dependencies,
+      title: t('page.about.prdDep')
+    },
+    {
+      content: pkgJson.devDependencies, // 修复之前使用错误的 dependencies
+      title: t('page.about.devDep')
+    }
+  ];
+}
+
+// 主组件
+const About = () => {
+  const { t } = useTranslation();
+
+  const cardInfo = useGetCardInfo();
+
+  return (
+    <ASpace
+      className="w-full"
+      direction="vertical"
+      size={16}
+    >
+      <ACard
+        className="card-wrapper"
+        size="small"
+        title={t('page.about.title')}
+        variant="borderless"
+      >
+        <TypingAnimation className="h-54px text-12px">{t('page.about.introduction')}</TypingAnimation>
+      </ACard>
+
+      {cardInfo.map(HeaderDescription)}
+    </ASpace>
+  );
+};
+
+export const handle = {
+  i18nKey: 'route.about',
+  icon: 'fluent:book-information-24-regular',
+  order: 9,
+  title: 'about'
+};
+
+export default About;
diff --git a/src/pages/(base)/about/modules/header-description.tsx b/src/pages/(base)/about/modules/header-description.tsx
@@ -0,0 +1,30 @@
+import type { CardInfo } from './shared';
+
+const HeaderDescription = (item: CardInfo) => {
+  return (
+    <ACard
+      bordered={false}
+      className="card-wrapper"
+      key={item.title}
+      size="small"
+      title={item.title}
+    >
+      <ADescriptions
+        bordered
+        column={{ lg: 2, md: 2, sm: 2, xl: 2, xs: 1, xxl: 2 }}
+        size="small"
+      >
+        {item.content.map(pkgInfo => (
+          <ADescriptions.Item
+            key={pkgInfo.label}
+            label={pkgInfo.label}
+          >
+            {pkgInfo.render ? pkgInfo.render(pkgInfo) : pkgInfo.nameOrHref}
+          </ADescriptions.Item>
+        ))}
+      </ADescriptions>
+    </ACard>
+  );
+};
+
+export default HeaderDescription;
diff --git a/src/pages/(base)/about/modules/shared.ts b/src/pages/(base)/about/modules/shared.ts
@@ -0,0 +1,31 @@
+export interface PkgVersionInfo {
+  label: string;
+  nameOrHref: string;
+  render?: (record: PkgVersionInfo) => JSX.Element;
+}
+
+export interface CardInfo {
+  content: PkgVersionInfo[];
+  title: string;
+}
+
+export interface PkgJson {
+  dependencies: PkgVersionInfo[];
+  devDependencies: PkgVersionInfo[];
+  name: string;
+  version: string;
+}
+
+export interface PackageInfo {
+  isLink: boolean;
+  label: string;
+  titleOrHref: string;
+}
+
+export function transformVersionData(tuple: [string, string]): PkgVersionInfo {
+  const [$name, $version] = tuple;
+  return {
+    label: $name,
+    nameOrHref: $version
+  };
+}
diff --git a/src/pages/(base)/function/index.tsx b/src/pages/(base)/function/index.tsx
@@ -0,0 +1,12 @@
+const Function = () => {
+  return null;
+};
+
+export const handle = {
+  i18nKey: 'route.function',
+  icon: 'icon-park-outline:all-application',
+  order: 6,
+  title: 'function'
+};
+
+export default Function;
diff --git a/src/router/elegant/imports.ts b/src/router/elegant/imports.ts
@@ -17,6 +17,9 @@ export const layouts: Record<string, () => Promise<any>> = {
 };
 
 export const pages: Record<string, () => Promise<any>> = {
+"(base)_about": () => import("@/pages/(base)/about/index.tsx"),
+"(base)_function_event-bus": () => import("@/pages/(base)/function/event-bus/index.tsx"),
+"(base)_function": () => import("@/pages/(base)/function/index.tsx"),
 "(base)_home": () => import("@/pages/(base)/home/index.tsx"),
 "(base)_manage": () => import("@/pages/(base)/manage/index.tsx"),
 "(base)_manage_menu": () => import("@/pages/(base)/manage/menu/index.tsx"),
@@ -25,6 +28,8 @@ export const pages: Record<string, () => Promise<any>> = {
 "(base)_multi-menu_first": () => import("@/pages/(base)/multi-menu/first/index.tsx"),
 "(base)_multi-menu": () => import("@/pages/(base)/multi-menu/index.tsx"),
 "(base)_multi-menu_second_child_home": () => import("@/pages/(base)/multi-menu/second/child/home/index.tsx"),
+"(base)_multi-menu_second_child": () => import("@/pages/(base)/multi-menu/second/child/index.tsx"),
+"(base)_multi-menu_second": () => import("@/pages/(base)/multi-menu/second/index.tsx"),
 "(base)_projects_[pid]_edit_[id]": () => import("@/pages/(base)/projects/[pid]/edit/[id].tsx"),
 "(base)_projects_[pid]_edit": () => import("@/pages/(base)/projects/[pid]/edit/index.tsx"),
 "(base)_projects_[pid]": () => import("@/pages/(base)/projects/[pid]/index.tsx"),
diff --git a/src/router/elegant/routeMap.ts b/src/router/elegant/routeMap.ts
@@ -28,6 +28,9 @@ export const routeMap: RouteMap = {
  "document_procomponents": "/document/procomponents",
  "document_antd": "/document/antd",
  "logout": "/logout",
+ "(base)_about": "/about",
+ "(base)_function": "/function",
+ "(base)_function_event-bus": "/function/event-bus",
  "(base)_home": "/home",
  "(base)_manage": "/manage",
  "(base)_manage_menu": "/manage/menu",
diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts
@@ -17,6 +17,23 @@ export const generatedRoutes = [
         name: '(base)',
         path: null,
         children: [
+          {
+            matchedFiles: [null, '/src/pages/(base)/about/index.tsx', null, null],
+            name: '(base)_about',
+            path: '/about'
+          },
+          {
+            matchedFiles: [null, '/src/pages/(base)/function/index.tsx', null, null],
+            name: '(base)_function',
+            path: '/function',
+            children: [
+              {
+                matchedFiles: [null, '/src/pages/(base)/function/event-bus/index.tsx', null, null],
+                name: '(base)_function_event-bus',
+                path: '/function/event-bus'
+              }
+            ]
+          },
           { matchedFiles: [null, '/src/pages/(base)/home/index.tsx', null, null], name: '(base)_home', path: '/home' },
           {
             matchedFiles: [null, '/src/pages/(base)/manage/index.tsx', null, null],
@@ -53,12 +70,12 @@ export const generatedRoutes = [
                 ]
               },
               {
-                matchedFiles: [null, null, null, null],
+                matchedFiles: [null, '/src/pages/(base)/multi-menu/second/index.tsx', null, null],
                 name: '(base)_multi-menu_second',
                 path: '/multi-menu/second',
                 children: [
                   {
-                    matchedFiles: [null, null, null, null],
+                    matchedFiles: [null, '/src/pages/(base)/multi-menu/second/child/index.tsx', null, null],
                     name: '(base)_multi-menu_second_child',
                     path: '/multi-menu/second/child',
                     children: [
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
@@ -12,6 +12,7 @@ declare global {
   const ACol: typeof import('antd')['Col']
   const AColorPicker: typeof import('antd')['ColorPicker']
   const AConfigProvider: typeof import('antd')['ConfigProvider']
+  const ADescriptions: typeof import('antd')['Descriptions']
   const ADivider: typeof import('antd')['Divider']
   const ADrawer: typeof import('antd')['Drawer']
   const ADropdown: typeof import('antd')['Dropdown']
@@ -27,7 +28,9 @@ declare global {
   const ASpace: typeof import('antd')['Space']
   const AStatistic: typeof import('antd')['Statistic']
   const ASwitch: typeof import('antd')['Switch']
+  const ATag: typeof import('antd')['Tag']
   const ATooltip: typeof import('antd')['Tooltip']
+  const ATypography: typeof import('antd')['Typography']
   const AWatermark: typeof import('antd')['Watermark']
   const BetterScroll: typeof import('../components/BetterScroll')['default']
   const BeyondHiding: typeof import('../components/BeyondHiding')['default']
@@ -37,7 +40,9 @@ declare global {
   const FilpText: typeof import('../components/FilpText')['default']
   const FullScreen: typeof import('../components/FullScreen')['default']
   const IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined.tsx')['default']
+  const IconAntDesignInboxOutlined: typeof import('~icons/ant-design/inbox-outlined.tsx')['default']
   const IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined.tsx')['default']
+  const IconAntDesignSendOutlined: typeof import('~icons/ant-design/send-outlined.tsx')['default']
   const IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen.tsx')['default']
   const IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit.tsx')['default']
   const IconLocalBanner: typeof import('~icons/local/banner.tsx')['default']
diff --git a/src/types/elegant-router.d.ts b/src/types/elegant-router.d.ts
