# 介绍

astryx-vue 是用 Vue 3 重新实现的开源组件库，视觉规范来自 Meta 的 [Astryx](https://github.com/facebook/astryx) 设计系统。原版文档在 <https://astryx.atmeta.com>，用 React 19 和 StyleX 开发。本项目由开源社区独立维护，让 Vue 开发者不用换技术栈，就能直接用上这套现代界面。

## 我们是怎么做的

我们并不是在 React 组件外面套一层壳，而是用 Vue 3 把整套界面的质感、排版与工程规范从底层重新做了一遍。组件库严格对齐原版的四个基础：

1. **设计变量（Tokens）**：统一间距、圆角和字号，改一处地方，所有组件都跟着生效。
2. **CSS 变量系统**：原生支持 `light-dark()`，不用写两套样式表，就能在浅色和深色之间切换，也方便层层覆盖。
3. **动效（Motion）**：带有自然的过渡节奏；用户在系统里开启「减少动效」时，会自动收起大幅位移，保护阅读体验。
4. **常用组件**：从小按钮、图标，到整套 AI 对话窗口和后台布局，常用的界面都有准备。

所有组件完全按照 Vue 3 的标准习惯来写：支持标准的 Props、事件、插槽、`v-model` 和组合式函数（Composables）。不需要任何多余的转换胶水层，代码打包出来干净小巧。

## 两个包各司其职

项目拆成了两个清晰的包，各管各的事：

- `@astryx-vue/core`：核心组件库，里面是所有 Vue 组件、常用工具函数（Composables）和组件骨架样式。
- `@astryx-vue/themes`：主题包，提供 Neutral 等配色变量和字体排版规则。

所有样式都用现代标准 CSS 编写，你的项目不需要引入 StyleX，也不需要配置专门的 CSS 编译器。

## 图标与成套界面

组件库本身不强行捆绑任何一套体积庞大的图标库。像 `IconButton`（图标按钮）或 `NavItem`（导航项）这样需要放图标的地方，支持直接传 CSS 类名。你可以选择自己喜欢的方案，无论是 UnoCSS `presetIcons`、Tailwind、Iconify 还是自己手写的 SVG，都能放进去。

对于平时常用的 AI 与协作界面，我们还准备好了成套的组合模式。比如 `Chat`（连续对话流）、`Citation`（参考来源标记）和 `Markdown`（长文排版渲染），不用你再从零开始到处拼装零件。

## 和原版的差别

绝大部分组件和原版一一对应。下面是本仓库额外加的、原版没有的能力。它们都默认关闭，或者不影响原有行为。

| 特性 | 入口 | 说明 |
| --- | --- | --- |
| 自绘滚动条 | [`ScrollbarsProvider`](/components/scrollbars-provider) | 在应用外层套一层，滚动组件就从原生滚动条换成覆盖式的细滚动条。不套就没有任何变化，也不会多打包任何代码。 |

以后新增扩展能力，会继续加在这张表里。

---

当前所有公开可用的功能，请以仓库实际导出的内容为准。核心样式与组件都遵循原生 Web 标准与现代 Vue 3 规范打造。