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/HomePage.tsx | 219 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 219 insertions(+)
 create mode 100644 src/pages/HomePage.tsx

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

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000..a1e7668
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,219 @@
+import { Button } from '@astryxdesign/core/Button'
+import { Card } from '@astryxdesign/core/Card'
+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 { HStack } from '@astryxdesign/core/HStack'
+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,
+  Check,
+  ExternalLink,
+  Layers,
+  Moon,
+  Palette,
+  Route,
+  Sparkles,
+  Terminal,
+  Zap,
+} from 'lucide-react'
+import { Page } from '../components/Page'
+
+const STACK = [
+  {
+    name: 'Vite',
+    version: '8.x',
+    icon: Zap,
+    description: '极速开发服务器、快速热更新，以及经过优化的生产构建。',
+  },
+  {
+    name: 'React',
+    version: '19.x',
+    icon: Atom,
+    description: '现代 Hooks 与全应用共享的组件模型。',
+  },
+  {
+    name: 'React Router',
+    version: '7.x',
+    icon: Route,
+    description: '嵌套路由、持续存在的应用外壳，以及类型安全的导航。',
+  },
+  {
+    name: 'Astryx',
+    version: '0.7',
+    icon: Palette,
+    description: '无障碍组件、设计令牌、主题与深色模式。',
+  },
+]
+
+const QUICK_START = `npm install
+npm run dev`
+
+const BUILT_IN = [
+  {
+    label: '应用外壳',
+    description:
+      '顶部导航、可折叠侧边栏和移动端抽屉都已替你处理好。',
+    icon: Layers,
+  },
+  {
+    label: '客户端路由',
+    description:
+      '所有页面共用一套布局，可在根目录配置中切换 hash 与 history 路由。',
+    icon: Route,
+  },
+  {
+    label: '明暗主题',
+    description:
+      'Astryx neutral 主题可切换模式，并记住你的选择。',
+    icon: Moon,
+  },
+  {
+    label: '完整组件目录',
+    description:
+      '全部 173 个 Astryx 组件，按基础、表单和弹层分类。',
+    icon: Sparkles,
+  },
+]
+
+export function HomePage() {
+  return (
+    <Page>
+      <VStack gap={10}>
+        <VStack gap={5} maxWidth={860}>
+          <Text type="label" color="accent">
+            Vite + React + React Router + Astryx
+          </Text>
+          <VStack gap={3}>
+            <Heading level={1} type="display-2" textWrap="balance">
+              为你的下一个 React 应用，准备更好的起点。
+            </Heading>
+            <Text type="large" color="secondary" as="p" textWrap="pretty">
+              Vite 让反馈循环保持飞快，React Router
+              给应用真正的结构，Astryx 提供无障碍组件与主题。所有部分都已经连接好。
+            </Text>
+          </VStack>
+          <HStack gap={3} wrap="wrap">
+            <Button
+              label="浏览组件"
+              variant="primary"
+              href="/components"
+              endContent={<Icon icon={ArrowRight} size="sm" color="inherit" />}
+            />
+            <Button
+              label="Astryx 文档"
+              variant="secondary"
+              href="https://astryx.atmeta.com"
+              target="_blank"
+              rel="noreferrer"
+              endContent={
+                <Icon icon={ExternalLink} size="sm" color="inherit" />
+              }
+            />
+          </HStack>
+        </VStack>
+
+        <Divider />
+
+        <VStack gap={5}>
+          <VStack gap={2} maxWidth={680}>
+            <Text type="label" color="accent">
+              技术栈
+            </Text>
+            <Heading level={2}>四件工具，已经连接好。</Heading>
+            <Text type="body" color="secondary" as="p">
+              无需构建插件，也无需额外配置 CSS。Astryx
+              直接提供预构建样式，项目里能看到的导入就是全部配置。
+            </Text>
+          </VStack>
+          <Grid columns={{ minWidth: 230, max: 4 }} gap={6}>
+            {STACK.map(({ name, version, icon, description }) => (
+              <HStack key={name} gap={3} vAlign="start">
+                <Icon icon={icon} size="md" color="accent" />
+                <VStack gap={1}>
+                  <HStack gap={2} vAlign="center" wrap="wrap">
+                    <Text type="label">{name}</Text>
+                    <Text type="supporting" size="sm">
+                      {version}
+                    </Text>
+                  </HStack>
+                  <Text type="supporting" size="sm" as="p">
+                    {description}
+                  </Text>
+                </VStack>
+              </HStack>
+            ))}
+          </Grid>
+        </VStack>
+
+        <Divider />
+
+        <Grid columns={{ minWidth: 320, max: 2 }} gap={8}>
+          <VStack gap={4}>
+            <VStack gap={1}>
+              <Heading level={2}>已经接好的能力</Heading>
+              <Text type="body" color="secondary" as="p">
+                一些方便替换、能随应用一起成长的小默认值。
+              </Text>
+            </VStack>
+            <List hasDividers>
+              {BUILT_IN.map(({ label, description, icon }) => (
+                <ListItem
+                  key={label}
+                  label={label}
+                  description={description}
+                  startContent={
+                    <Icon icon={icon} size="sm" color="secondary" />
+                  }
+                  endContent={
+                    <Icon icon={Check} size="sm" color="success" />
+                  }
+                />
+              ))}
+            </List>
+          </VStack>
+
+          <Card padding={6} elevation="low">
+            <VStack gap={4}>
+              <VStack gap={1}>
+                <Heading level={2}>快速开始</Heading>
+                <Text type="body" color="secondary" as="p">
+                  安装依赖、启动 Vite，然后编辑{' '}
+                  <Text type="code">src/</Text> 下的任意文件。
+                </Text>
+              </VStack>
+              <CodeBlock
+                code={QUICK_START}
+                language="bash"
+                title="终端"
+                hasLanguageLabel={false}
+                width="100%"
+              />
+              <HStack gap={2} vAlign="center">
+                <Icon icon={Terminal} size="sm" color="secondary" />
+                <Text type="supporting" size="sm">
+                  需要 Node 20.19+ 和 npm 10+。
+                </Text>
+              </HStack>
+            </VStack>
+          </Card>
+        </Grid>
+
+        <Divider />
+
+        <HStack gap={2} vAlign="center">
+          <Icon icon={Sparkles} size="sm" color="accent" />
+          <Text type="supporting" size="sm">
+            基于 Astryx v0.7.2 和 neutral 主题构建。可在
+            src/astryx-themes.ts 中更改主题。
+          </Text>
+        </HStack>
+      </VStack>
+    </Page>
+  )
+}
-- 
cgit v1.2.3