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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
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>
)
}
|
