From bfe5541e56f68b74fd41974c804f8e7ac1ff9f2a Mon Sep 17 00:00:00 2001
From: shu <nvcsadjkojf@outlook.com>
Date: Thu, 22 Oct 2026 13:03:06 +0800
Subject: feat: 初始化 Astryx React 应用模板
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

基于 Vite 8、React 19、TypeScript 6、React Router 7 和 Astryx 0.7.2
搭建完整的中文应用起始模板，包含可直接运行的应用外壳与示例页面。

主要变更：
- 使用 Astryx 构建 AppShell、顶部导航、可折叠侧边栏和响应式移动端抽屉。
- 接入 Astryx neutral 主题与中文语言包，支持明暗主题切换并持久化偏好。
- 新增概览、组件、图标、关于和 404 页面，统一使用共享页面框架。
- 将页面路由、侧边栏名称、图标和active状态合并到 app-routes.tsx，
  路由与导航由同一份配置生成，避免重复维护。
- 新增根目录 app.config.ts，可在 browser/history 与 hash 路由模式之间切换；
  当前保留 hash 模式配置。
- 组件页提供 14 个可交互组合场景，覆盖全部 173 个 Astryx 组件，
  包含按钮、表单、表格、导航、聊天、对话框、菜单、命令面板和 Toast 等。
- 新增图标页面，支持浏览 29 个 Astryx 语义图标和 1903 个 Lucide 图标，
  提供搜索、分页、图标集切换和点击复制用法。
- 对组件页和图标页实施路由级懒加载，并按 React、React Router 拆分 vendor
  chunk，降低首屏入口体积并改善长期缓存。
- 接入 React Router 的 LinkProvider，保证 Astryx 链接、导航和按钮在两种
  路由模式下均使用客户端导航。
- 配置 pnpm 供应链策略例外与依赖构建许可，锁定可以正常安装的依赖版本。
- 补充 README，记录项目结构、脚本、组件展厅、图标页、路由模式与构建策略。

验证结果：
- pnpm build 通过
- pnpm lint 0 warnings
- browser 与 hash 两种路由模式的页面和侧边栏导航均已验证
---
 src/pages/AboutPage.tsx | 202 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 202 insertions(+)
 create mode 100644 src/pages/AboutPage.tsx

(limited to 'src/pages/AboutPage.tsx')

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 &lt;slug&gt;</Text>{' '}
+            添加其他主题包，然后在{' '}
+            <Text type="code">src/theme/ThemeMode.tsx</Text>{' '}
+            中把它传给主题提供者。
+          </Text>
+          <Text type="supporting" size="sm">
+            Astryx 自带预构建 CSS，因此这个应用不需要 StyleX、PostCSS 或 Babel
+            插件。
+          </Text>
+        </VStack>
+      </VStack>
+    </Page>
+  )
+}
-- 
cgit v1.2.3