diff options
Diffstat (limited to 'src/pages/AboutPage.tsx')
| -rw-r--r-- | src/pages/AboutPage.tsx | 202 |
1 files changed, 202 insertions, 0 deletions
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx new file mode 100644 index 0000000..5f2aec2 --- /dev/null +++ b/src/pages/AboutPage.tsx @@ -0,0 +1,202 @@ +import { CodeBlock } from '@astryxdesign/core/CodeBlock' +import { Divider } from '@astryxdesign/core/Divider' +import { Grid } from '@astryxdesign/core/Grid' +import { Heading } from '@astryxdesign/core/Heading' +import { Icon } from '@astryxdesign/core/Icon' +import { List, ListItem } from '@astryxdesign/core/List' +import { Text } from '@astryxdesign/core/Text' +import { VStack } from '@astryxdesign/core/VStack' +import { + ArrowRight, + Atom, + Blocks, + BookOpen, + ExternalLink, + Palette, + Route, + Shapes, + Zap, +} from 'lucide-react' +import { Page, PageHeader } from '../components/Page' + +const COMMANDS = `npm run dev # 启动开发服务器 +npm run build # 类型检查并构建生产版本 +npm run lint # 运行 oxlint +npm run preview # 预览生产构建 + +npm run astryx -- component Button # 查看 Astryx 组件文档` + +const PROJECT_TREE = `src/ + components/ + AppLayout.tsx 应用外壳、顶部导航、侧边导航 + Page.tsx 共用页面框架与页头 + pages/ + HomePage.tsx + ComponentsPage.tsx + AboutPage.tsx + NotFoundPage.tsx + theme/ + ThemeMode.tsx 明暗主题提供者 + astryx-themes.ts 生成的主题注册表 + router.tsx React Router 路由表 + App.tsx 提供者与路由 + main.tsx 入口文件` + +const STACK = [ + { + name: 'React', + version: '19.3', + icon: Atom, + description: '界面运行时与 Hooks', + }, + { + name: 'Vite', + version: '8.3', + icon: Zap, + description: '开发服务器与生产构建工具', + }, + { + name: 'React Router', + version: '7.18', + icon: Route, + description: '基于数据路由的客户端路由，可在 hash 与 history 模式间切换', + }, + { + name: 'Astryx', + version: '0.7.2', + icon: Palette, + description: '设计系统、组件与 neutral 主题', + }, +] + +export function AboutPage() { + return ( + <Page> + <VStack gap={8}> + <PageHeader + eyebrow="关于" + title="是起点，不是框架。" + description="项目把每一部分都保持得小而可见：一张路由表、一套布局、一个主题提供者，以及普通的 React 组件。你可以直接替换需要改的部分，而不用和隐藏的约定较劲。" + /> + + <Divider /> + + <Grid columns={{ minWidth: 320, max: 2 }} gap={8}> + <VStack gap={4}> + <Heading level={2}>技术栈</Heading> + <List hasDividers> + {STACK.map(({ name, version, icon, description }) => ( + <ListItem + key={name} + label={name} + description={description} + startContent={ + <Icon icon={icon} size="sm" color="secondary" /> + } + endContent={ + <Text type="supporting" size="sm"> + {version} + </Text> + } + /> + ))} + </List> + </VStack> + + <VStack gap={4}> + <Heading level={2}>常用命令</Heading> + <CodeBlock + code={COMMANDS} + language="bash" + title="终端" + size="sm" + hasLanguageLabel={false} + width="100%" + /> + <Text type="supporting" size="sm"> + Vite 8 需要 Node 20.19+。 + </Text> + </VStack> + </Grid> + + <Divider /> + + <VStack gap={4} maxWidth={920}> + <Heading level={2}>项目结构</Heading> + <Text type="body" color="secondary" as="p"> + 在 <Text type="code">src/pages</Text> 下新建页面，然后在{' '} + <Text type="code">src/router.tsx</Text> 中注册路由，并在{' '} + <Text type="code">src/components/AppLayout.tsx</Text>{' '} + 中添加对应的导航项。 + </Text> + <CodeBlock + code={PROJECT_TREE} + language="plaintext" + title="项目结构" + width="100%" + /> + </VStack> + + <Divider /> + + <VStack gap={4}> + <Heading level={2}>继续探索</Heading> + <List hasDividers> + <ListItem + label="组件" + description="浏览全部 173 个组件的实时交互示例。" + href="/components" + startContent={<Icon icon={Blocks} size="sm" color="secondary" />} + endContent={<Icon icon={ArrowRight} size="sm" color="secondary" />} + /> + <ListItem + label="图标" + description="浏览 Astryx 语义图标和 Lucide 图标库。" + href="/icons" + startContent={<Icon icon={Shapes} size="sm" color="secondary" />} + endContent={<Icon icon={ArrowRight} size="sm" color="secondary" />} + /> + <ListItem + label="Astryx 文档" + description="组件接口、主题、布局指南和页面模板。" + href="https://astryx.atmeta.com" + target="_blank" + startContent={<Icon icon={BookOpen} size="sm" color="secondary" />} + endContent={ + <Icon icon={ExternalLink} size="sm" color="secondary" /> + } + /> + <ListItem + label="React Router 文档" + description="路由、数据加载、动作和导航。" + href="https://reactrouter.com" + target="_blank" + startContent={<Icon icon={Route} size="sm" color="secondary" />} + endContent={ + <Icon icon={ExternalLink} size="sm" color="secondary" /> + } + /> + </List> + </VStack> + + <Divider /> + + <VStack gap={2}> + <Heading level={3}>主题</Heading> + <Text type="body" color="secondary" as="p"> + 自动生成的 <Text type="code">src/astryx-themes.ts</Text>{' '} + 文件注册了 neutral 主题。可以运行{' '} + <Text type="code">npm run astryx -- theme add <slug></Text>{' '} + 添加其他主题包，然后在{' '} + <Text type="code">src/theme/ThemeMode.tsx</Text>{' '} + 中把它传给主题提供者。 + </Text> + <Text type="supporting" size="sm"> + Astryx 自带预构建 CSS，因此这个应用不需要 StyleX、PostCSS 或 Babel + 插件。 + </Text> + </VStack> + </VStack> + </Page> + ) +} |