1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
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>
)
}
|
