@cregis/ui
v0.2.6
Published
基于 **Vue 3**、**TypeScript** 与 **Vite** 构建的 UI 组件库，提供可在业务项目中按需引入的表单与布局类组件。
Readme
@cregis/ui
基于 Vue 3、TypeScript 与 Vite 构建的 UI 组件库，提供可在业务项目中按需引入的表单与布局类组件。
技术栈
- Vue 3（Composition API）
- TypeScript
- Vite（ES / UMD 双产物构建）
环境要求
- Node.js（建议使用当前 LTS）
- 与库版本兼容的 Vue 3.5+
安装
npm install @cregis/ui vue @cregis/icon
# 或
pnpm add @cregis/ui vue @cregis/icon
# 或
yarn add @cregis/ui vue @cregis/iconvue 与 @cregis/icon 为 peerDependencies，请确保在业务项目中显式安装并与文档中的版本范围一致。
引入样式
在应用入口（如 main.ts）中引入一次全量样式：
import '@cregis/ui/dist/index.css'白天与黑夜模式
组件的视觉令牌（颜色、背景、边框等）由 CSS 变量 定义：默认在 :root 下为白天模式；在祖先节点上存在 .dark 类名 时，变量会切换为黑夜模式（见源码中 src/styles/color.css、src/styles/vars.css）。
在业务项目中切换主题
推荐挂在 根元素 <html> 上，保证整页组件主题一致：
// 进入黑夜模式
document.documentElement.classList.add('dark')
// 恢复白天模式
document.documentElement.classList.remove('dark')在 Vue 中也可配合响应式状态，在用户操作或持久化设置（如 localStorage）变化时调用上述逻辑。示例（与仓库内 App.vue 演示一致）：
function setTheme(mode: 'light' | 'dark') {
if (mode === 'dark') {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
}库不会自动监听系统 prefers-color-scheme。若需跟随系统深浅色，请在应用内自行 matchMedia('(prefers-color-scheme: dark)') 订阅并调用 setTheme。
使用方式
按组件引入（推荐，利于 Tree-Shaking）
<script setup lang="ts">
import { Button, Input, Popover } from '@cregis/ui'
</script>
<template>
<Button type="primary">确定</Button>
<Input v-model="value" placeholder="请输入" />
<Popover trigger="click" placement="bottom">
<template #reference>
<Button type="secondary">说明</Button>
</template>
<div>浮层内自定义内容</div>
</Popover>
</template>单组件注册到应用
各组件实例上带有 install 方法，可按需注册：
import type { App } from 'vue'
import { Button } from '@cregis/ui'
export function setupComponents(app: App) {
app.use(Button)
}之后在任意 SFC 中可直接使用对应标签名（如 <Button />）。
UMD / 浏览器全局变量
UMD 构建会将 vue 映射为全局 Vue，将 @cregis/icon 映射为全局 CregisIcon。在通过 <script> 引入 Vue、图标库及本库 UMD 文件后，请同时保证样式文件已加载。
组件一览
| 组件 | 说明 |
| -------- | -------- |
| Button | 按钮 |
| Input | 输入框 |
| Checkbox | 复选框 |
| Radio | 单选 |
| Divider | 分割线 |
| Tabs / TabPane | 标签页 |
| Select / Option | 下拉选择 |
| Cascader | 级联选择 |
| Progress | 进度条 |
| Popover | 浮层弹出（hover / click 触发，Popper 定位；默认插槽为浮层内容） |
| Message | 函数式轻提示 |
| Notification | 函数式通知（标题、类型、按钮文案等） |
Message 与 Notification 为 函数式 API（在脚本中调用），不是用于模板注册的 SFC 组件。
类型定义随构建输出至 dist/types，支持在 TS 项目中直接获得类型提示。
本地开发
克隆仓库并安装依赖后：
npm install
npm run dev默认使用 Vite 开发服务器（具体端口与行为见 vite.config.ts），用于调试文档站或示例应用。
构建发布产物
npm run build该命令会：
- 并行构建 ES 模块 与 UMD（分别见
vite.es.config.ts、vite.umd.config.ts） - 将样式整理为
dist/index.css
产物字段与 package.json 中的 main / module / types / exports 一致，便于在 CommonJS 与 ESM 项目中引用。
仓库脚本说明
| 脚本 | 作用 |
| --------------- | ----------------------- |
| npm run dev | 本地开发 |
| npm run build | 完整构建（ES + UMD + 样式） |
| npm run build-only | 仅构建 JS 双格式 |
| npm run preview | 预览构建结果 |
版本
当前包版本见仓库根目录 package.json 中的 version 字段。