diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
index 0db5fe9..e120967 100644
--- a/src/pages/about/index.tsx
+++ b/src/pages/about/index.tsx
@@ -1,33 +1,15 @@
-import { Card, Descriptions, Space, Tag } from 'antd';
import TypeIt from 'typeit';
import type { Options } from 'typeit';
import type { El } from 'typeit/dist/types';
import pkg from '~/package.json';
-
-interface PkgVersionInfo {
- name: string;
- version: string;
-}
-
-interface PkgJson {
- name: string;
- version: string;
- dependencies: PkgVersionInfo[];
- devDependencies: PkgVersionInfo[];
-}
+import type { CardInfo, PkgJson, PkgVersionInfo } from './modules/shared';
+import { transformVersionData } from './modules/shared';
+import HeaderDescription from './modules/header-description';
const latestBuildTime = BUILD_TIME;
const { name, version, dependencies, devDependencies } = pkg;
-function transformVersionData(tuple: [string, string]): PkgVersionInfo {
- const [$name, $version] = tuple;
- return {
- name: $name,
- version: $version
- };
-}
-
const pkgJson: PkgJson = {
name,
version,
@@ -35,11 +17,24 @@ const pkgJson: PkgJson = {
devDependencies: Object.entries(devDependencies).map(transformVersionData)
};
-export function Component() {
- const { t } = useTranslation();
+const TagItem = (item: PkgVersionInfo) => {item.nameOrHref};
+
+const Link = (item: PkgVersionInfo) => (
+
+ {item.label}
+
+);
+function useGetTypeit() {
const textRef = useRef(null);
+ const { t } = useTranslation();
+
function init() {
if (!textRef.current) return;
@@ -58,104 +53,75 @@ export function Component() {
init();
});
+ return textRef;
+}
+
+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
+ }
+ ];
+
+ const cardInfo: CardInfo[] = [
+ {
+ title: t('page.about.projectInfo.title'),
+ content: packageInfo
+ },
+ {
+ title: t('page.about.prdDep'),
+ content: pkgJson.dependencies
+ },
+ {
+ title: t('page.about.devDep'),
+ content: pkgJson.dependencies
+ }
+ ];
+ return cardInfo;
+}
+
+export function Component() {
+ const { t } = useTranslation();
+
+ const cardInfo = useGetCardInfo();
+
+ const textRef = useGetTypeit();
+
return (
-
-
-
+
-
-
-
- {pkgJson.version}
-
-
- {latestBuildTime}
-
-
-
- {t('page.about.projectInfo.githubLink')}
-
-
-
-
- {t('page.about.projectInfo.previewLink')}
-
-
-
-
-
-
-
- {pkgJson.dependencies.map(item => (
-
- {item.version}
-
- ))}
-
-
-
-
-
- {pkgJson.devDependencies.map(item => (
-
- {item.version}
-
- ))}
-
-
-
+ {cardInfo.map(HeaderDescription)}
+
);
}
diff --git a/src/pages/about/modules/header-description.tsx b/src/pages/about/modules/header-description.tsx
new file mode 100644
index 0000000..f470656
--- /dev/null
+++ b/src/pages/about/modules/header-description.tsx
@@ -0,0 +1,30 @@
+import type { CardInfo } from './shared';
+
+const HeaderDescription = (item: CardInfo) => {
+ return (
+
+
+ {item.content.map(pkgInfo => (
+
+ {pkgInfo.render ? pkgInfo.render(pkgInfo) : pkgInfo.nameOrHref}
+
+ ))}
+
+
+ );
+};
+
+export default HeaderDescription;
diff --git a/src/pages/about/modules/shared.ts b/src/pages/about/modules/shared.ts
new file mode 100644
index 0000000..3153007
--- /dev/null
+++ b/src/pages/about/modules/shared.ts
@@ -0,0 +1,31 @@
+export interface PkgVersionInfo {
+ label: string;
+ nameOrHref: string;
+ render?: (record: PkgVersionInfo) => JSX.Element;
+}
+
+export interface CardInfo {
+ title: string;
+ content: PkgVersionInfo[];
+}
+
+export interface PkgJson {
+ name: string;
+ version: string;
+ dependencies: PkgVersionInfo[];
+ devDependencies: PkgVersionInfo[];
+}
+
+export interface PackageInfo {
+ label: string;
+ titleOrHref: string;
+ isLink: boolean;
+}
+
+export function transformVersionData(tuple: [string, string]): PkgVersionInfo {
+ const [$name, $version] = tuple;
+ return {
+ label: $name,
+ nameOrHref: $version
+ };
+}