快速开始
标准 NPM 单包发布,内部子路径导出。在 Nuxt 4 中注册模块即可获得组件与 composables 全自动按需导入;在纯 Vue 3 项目中按需显式导入即可。
Nuxt 4 模块
自动导入全部组件、useTheme 与 useToast。
// nuxt.config.ts
export default defineNuxtConfig({
modules: [['@recloudstudio/ui/nuxt', { prefix: '' }]],
css: ['@recloudstudio/ui/style.css']
})
// 任意 .vue 中直接使用,无需 import
;<Button variant="solid">部署集群</Button>Vue 3 显式导入
配合 Vite 或任意构建工具使用。
# 安装
bun add @recloudstudio/ui
// main.ts
import '@recloudstudio/ui/style.css'
// 组件与图标按需导入
import { Button, useToast } from '@recloudstudio/ui'
import { Cloud } from '@recloudstudio/ui/icons'组件总览
按使用场景分组,点击进入每个组件的文档与交互示例。
Design Tokens
通用
表单
Checkbox 复选框布尔开关复选项。Combobox 组合框可搜索的下拉选择。DatePicker 日期选择单日期与日期范围筛选。Editable 行内编辑点击即改的文本。Field / Form 表单布局统一关联标签、说明、错误信息与表单间距。Input 输入框带标签、提示与错误态的文本输入。Label 标签表单控件关联标签。MultiSelect 多选带搜索和标签的多值选择。NumberField 数字输入步进增减数字。PinInput 验证码OTP 分段输入。RadioGroup 单选组带描述的选项组。Rating 评分星级评分组件。Select 选择器无障碍下拉选择。Slider 滑块单值/区间滑动输入。Switch 开关即时生效的切换开关。TagInput 标签输入可添加、删除与粘贴多个标签。Textarea 文本域多行文本输入。Toggle / ToggleGroup按压态工具按钮与分组。