@yh-ui/yh-ui 0.1.16 → 0.1.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +247 -9
- package/package.json +10 -7
package/README.md
CHANGED
|
@@ -14,47 +14,285 @@
|
|
|
14
14
|
<a href="https://www.npmjs.com/package/@yh-ui/yh-ui">
|
|
15
15
|
<img src="https://img.shields.io/npm/v/@yh-ui/yh-ui.svg?style=flat-square&colorB=409eff" alt="npm version">
|
|
16
16
|
</a>
|
|
17
|
+
<a href="https://github.com/1079161148/yh-ui/actions/workflows/ci.yml">
|
|
18
|
+
<img src="https://img.shields.io/github/actions/workflow/status/1079161148/yh-ui/ci.yml?style=flat-square&label=CI&colorB=67c23a" alt="CI Status">
|
|
19
|
+
</a>
|
|
20
|
+
<a href="https://www.npmjs.com/package/@yh-ui/yh-ui">
|
|
21
|
+
<img src="https://img.shields.io/npm/dm/@yh-ui/yh-ui.svg?style=flat-square&colorB=409eff" alt="npm downloads">
|
|
22
|
+
</a>
|
|
23
|
+
<a href="https://github.com/1079161148/yh-ui/blob/main/LICENSE">
|
|
24
|
+
<img src="https://img.shields.io/npm/l/@yh-ui/yh-ui.svg?style=flat-square" alt="license">
|
|
25
|
+
</a>
|
|
26
|
+
</p>
|
|
27
|
+
|
|
28
|
+
<p align="center">
|
|
17
29
|
<a href="https://1079161148.github.io/yh-ui/">📖 文档</a> ·
|
|
18
|
-
<a href="https://1079161148.github.io/yh-ui/guide/quickstart">🚀 快速开始</a>
|
|
30
|
+
<a href="https://1079161148.github.io/yh-ui/guide/quickstart">🚀 快速开始</a> ·
|
|
31
|
+
<a href="https://github.com/1079161148/yh-ui/releases">📝 更新日志</a>
|
|
19
32
|
</p>
|
|
20
33
|
|
|
21
34
|
---
|
|
22
35
|
|
|
23
|
-
## ✨
|
|
36
|
+
## ✨ 为什么选择 YH-UI？
|
|
24
37
|
|
|
25
|
-
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
38
|
+
| 特性 | YH-UI | Element Plus | Naive UI |
|
|
39
|
+
| --------------- | ------------------- | ------------ | -------- |
|
|
40
|
+
| 预设主题数 | **12 种** | 1 种 | 有限 |
|
|
41
|
+
| 色盲友好模式 | ✅ **4 种** | ❌ | ❌ |
|
|
42
|
+
| 国际化语言数 | **67 种** | 43 种 | 25 种 |
|
|
43
|
+
| Nuxt 3 原生模块 | ✅ **官方级** | ❌ | ❌ |
|
|
44
|
+
| WCAG 无障碍 | ✅ **自动校验** | 手动 | 手动 |
|
|
45
|
+
| 主题切换动画 | ✅ | ❌ | ❌ |
|
|
46
|
+
| 密度配置 | ✅ **3 档** | ❌ | ❌ |
|
|
47
|
+
| Table 虚拟滚动 | ✅ | 部分 | 部分 |
|
|
48
|
+
| Table 打印/导出 | ✅ **CSV/XLSX/PDF** | ❌ | ❌ |
|
|
49
|
+
| **AI 交互套件** | ✅ **16 个组件** | ❌ | ❌ |
|
|
50
|
+
| 工业级甘特图 | ✅ | ❌ | ❌ |
|
|
51
|
+
| 节点流程编辑器 | ✅ | ❌ | ❌ |
|
|
52
|
+
|
|
53
|
+
---
|
|
30
54
|
|
|
31
55
|
## 📦 安装
|
|
32
56
|
|
|
33
57
|
```bash
|
|
34
|
-
# pnpm
|
|
58
|
+
# pnpm（推荐）
|
|
35
59
|
pnpm add @yh-ui/yh-ui
|
|
36
60
|
|
|
37
61
|
# npm
|
|
38
62
|
npm install @yh-ui/yh-ui
|
|
63
|
+
|
|
64
|
+
# yarn
|
|
65
|
+
yarn add @yh-ui/yh-ui
|
|
39
66
|
```
|
|
40
67
|
|
|
68
|
+
**环境要求**：Node.js `>=18.0.0`，Vue `>=3.5.0`
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
41
72
|
## 🔨 快速开始
|
|
42
73
|
|
|
74
|
+
### 完整引入
|
|
75
|
+
|
|
43
76
|
```ts
|
|
77
|
+
// main.ts
|
|
44
78
|
import { createApp } from 'vue'
|
|
45
79
|
import YhUI from '@yh-ui/yh-ui'
|
|
46
|
-
import '@yh-ui/yh-ui/css'
|
|
80
|
+
import '@yh-ui/yh-ui/css' // 引入样式（含主题变量）
|
|
81
|
+
import App from './App.vue'
|
|
47
82
|
|
|
48
83
|
const app = createApp(App)
|
|
49
84
|
app.use(YhUI)
|
|
50
85
|
app.mount('#app')
|
|
51
86
|
```
|
|
52
87
|
|
|
88
|
+
### 按需引入（推荐，完美 Tree-shaking）
|
|
89
|
+
|
|
90
|
+
```vue
|
|
91
|
+
<script setup lang="ts">
|
|
92
|
+
import { YhButton, YhInput, YhTable } from '@yh-ui/yh-ui'
|
|
93
|
+
</script>
|
|
94
|
+
|
|
95
|
+
<template>
|
|
96
|
+
<YhButton type="primary" @click="submit">提交</YhButton>
|
|
97
|
+
<YhInput v-model="keyword" clearable placeholder="请输入..." />
|
|
98
|
+
</template>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### 自动导入（配合 unplugin-vue-components）
|
|
102
|
+
|
|
103
|
+
```ts
|
|
104
|
+
// vite.config.ts
|
|
105
|
+
import Components from 'unplugin-vue-components/vite'
|
|
106
|
+
import { YhUIResolver } from '@yh-ui/yh-ui/resolver'
|
|
107
|
+
|
|
108
|
+
export default {
|
|
109
|
+
plugins: [
|
|
110
|
+
Components({
|
|
111
|
+
resolvers: [YhUIResolver()]
|
|
112
|
+
})
|
|
113
|
+
]
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
## 🎨 主题系统
|
|
120
|
+
|
|
121
|
+
```ts
|
|
122
|
+
import { createYhTheme } from '@yh-ui/yh-ui'
|
|
123
|
+
|
|
124
|
+
const theme = createYhTheme({
|
|
125
|
+
preset: 'purple', // 12 种预设主题
|
|
126
|
+
algorithm: 'vibrant', // 4 种颜色算法
|
|
127
|
+
density: 'compact', // 3 档密度：compact | default | comfortable
|
|
128
|
+
colorBlindMode: 'protanopia', // 4 种色盲友好模式
|
|
129
|
+
followSystem: true, // 跟随系统暗色
|
|
130
|
+
transition: true, // 丝滑切换动画
|
|
131
|
+
persist: true // 持久化到 localStorage
|
|
132
|
+
})
|
|
133
|
+
|
|
134
|
+
app.use(theme)
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
在组件中动态切换：
|
|
138
|
+
|
|
139
|
+
```vue
|
|
140
|
+
<script setup lang="ts">
|
|
141
|
+
import { useTheme } from '@yh-ui/yh-ui'
|
|
142
|
+
const { setPreset, toggleDark, setDensity, isDark } = useTheme()
|
|
143
|
+
</script>
|
|
144
|
+
|
|
145
|
+
<template>
|
|
146
|
+
<YhButton @click="toggleDark()">{{ isDark ? '亮色' : '暗色' }}</YhButton>
|
|
147
|
+
<YhButton @click="setPreset('ocean')">Ocean 主题</YhButton>
|
|
148
|
+
</template>
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
## 🌍 国际化
|
|
154
|
+
|
|
155
|
+
```ts
|
|
156
|
+
import YhUI from '@yh-ui/yh-ui'
|
|
157
|
+
import zhCN from '@yh-ui/yh-ui/locale/zh-CN'
|
|
158
|
+
import enUS from '@yh-ui/yh-ui/locale/en'
|
|
159
|
+
|
|
160
|
+
// 初始化时指定
|
|
161
|
+
app.use(YhUI, { locale: zhCN })
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
动态切换语言：
|
|
165
|
+
|
|
166
|
+
```vue
|
|
167
|
+
<script setup lang="ts">
|
|
168
|
+
import { ref } from 'vue'
|
|
169
|
+
import { YhConfigProvider } from '@yh-ui/yh-ui'
|
|
170
|
+
import zhCN from '@yh-ui/yh-ui/locale/zh-CN'
|
|
171
|
+
import enUS from '@yh-ui/yh-ui/locale/en'
|
|
172
|
+
|
|
173
|
+
const locale = ref(zhCN)
|
|
174
|
+
</script>
|
|
175
|
+
|
|
176
|
+
<template>
|
|
177
|
+
<YhConfigProvider :locale="locale">
|
|
178
|
+
<App />
|
|
179
|
+
</YhConfigProvider>
|
|
180
|
+
<button @click="locale = enUS">English</button>
|
|
181
|
+
</template>
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
---
|
|
185
|
+
|
|
186
|
+
## 📊 企业级 Table
|
|
187
|
+
|
|
188
|
+
```vue
|
|
189
|
+
<YhTable
|
|
190
|
+
:data="tableData"
|
|
191
|
+
:columns="columns"
|
|
192
|
+
:virtual-config="{ enabled: true, rowHeight: 40 }"
|
|
193
|
+
:drag-config="{ row: true, column: true }"
|
|
194
|
+
:toolbar-config="{ export: true, print: true, columnSetting: true }"
|
|
195
|
+
:selection-config="{ type: 'checkbox' }"
|
|
196
|
+
:summary-config="{ method: sumMethod }"
|
|
197
|
+
height="600px"
|
|
198
|
+
border
|
|
199
|
+
stripe
|
|
200
|
+
/>
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
---
|
|
204
|
+
|
|
205
|
+
## 🤖 AI 组件套件
|
|
206
|
+
|
|
207
|
+
```vue
|
|
208
|
+
<script setup lang="ts">
|
|
209
|
+
import { ref } from 'vue'
|
|
210
|
+
import { YhAiProvider, YhAiBubble, YhAiSender } from '@yh-ui/yh-ui'
|
|
211
|
+
import { useAIChat } from '@yh-ui/ai-sdk/vue'
|
|
212
|
+
|
|
213
|
+
const { messages, input, isLoading, sendMessage } = useAIChat({ api: '/api/chat' })
|
|
214
|
+
</script>
|
|
215
|
+
|
|
216
|
+
<template>
|
|
217
|
+
<YhAiProvider :token="apiKey">
|
|
218
|
+
<div class="chat-container">
|
|
219
|
+
<YhAiBubble
|
|
220
|
+
v-for="msg in messages"
|
|
221
|
+
:key="msg.id"
|
|
222
|
+
:role="msg.role"
|
|
223
|
+
:content="msg.content"
|
|
224
|
+
streaming
|
|
225
|
+
stream-mode="word"
|
|
226
|
+
/>
|
|
227
|
+
</div>
|
|
228
|
+
<YhAiSender v-model="input" :loading="isLoading" @send="sendMessage" />
|
|
229
|
+
</YhAiProvider>
|
|
230
|
+
</template>
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
---
|
|
234
|
+
|
|
235
|
+
## 🔌 Nuxt 3 集成
|
|
236
|
+
|
|
237
|
+
```ts
|
|
238
|
+
// nuxt.config.ts
|
|
239
|
+
export default defineNuxtConfig({
|
|
240
|
+
modules: ['@yh-ui/nuxt'],
|
|
241
|
+
yhUI: {
|
|
242
|
+
importStyle: true, // 自动注入样式
|
|
243
|
+
locale: 'zh-CN' // 默认语言
|
|
244
|
+
}
|
|
245
|
+
})
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
注册模块后，所有组件和 composable 自动导入，无需手动 `import`：
|
|
249
|
+
|
|
250
|
+
```vue
|
|
251
|
+
<template>
|
|
252
|
+
<!-- 直接使用，无需导入 -->
|
|
253
|
+
<YhButton type="primary">按钮</YhButton>
|
|
254
|
+
<YhTable :data="data" :columns="columns" />
|
|
255
|
+
</template>
|
|
256
|
+
|
|
257
|
+
<script setup>
|
|
258
|
+
// useNamespace、useLocale 等也自动导入
|
|
259
|
+
const ns = useNamespace('my-comp')
|
|
260
|
+
</script>
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
---
|
|
264
|
+
|
|
265
|
+
## 📦 包说明
|
|
266
|
+
|
|
267
|
+
`@yh-ui/yh-ui` 是整合包，包含：
|
|
268
|
+
|
|
269
|
+
| 子包 | 说明 |
|
|
270
|
+
| ------------------- | --------------------- |
|
|
271
|
+
| `@yh-ui/components` | 77+ 核心 UI 组件 |
|
|
272
|
+
| `@yh-ui/hooks` | Composition API Hooks |
|
|
273
|
+
| `@yh-ui/theme` | 主题系统 |
|
|
274
|
+
| `@yh-ui/utils` | 工具函数 |
|
|
275
|
+
|
|
276
|
+
其他可选包（按需安装）：
|
|
277
|
+
|
|
278
|
+
| 包名 | 说明 |
|
|
279
|
+
| ---------------- | ------------------- |
|
|
280
|
+
| `@yh-ui/nuxt` | Nuxt 3 模块 |
|
|
281
|
+
| `@yh-ui/ai-sdk` | AI SDK 集成 |
|
|
282
|
+
| `@yh-ui/locale` | 67 种语言包 |
|
|
283
|
+
| `@yh-ui/icons` | 图标系统（Iconify） |
|
|
284
|
+
| `@yh-ui/flow` | 流程图 / 节点编辑器 |
|
|
285
|
+
| `@yh-ui/request` | 企业级请求 Hooks |
|
|
286
|
+
|
|
287
|
+
---
|
|
288
|
+
|
|
53
289
|
## 🔗 相关资源
|
|
54
290
|
|
|
55
291
|
- [📖 官方文档](https://1079161148.github.io/yh-ui/)
|
|
292
|
+
- [🚀 快速开始](https://1079161148.github.io/yh-ui/guide/quickstart)
|
|
56
293
|
- [📦 GitHub 仓库](https://github.com/1079161148/yh-ui)
|
|
57
294
|
- [📝 更新日志](https://github.com/1079161148/yh-ui/blob/main/CHANGELOG.md)
|
|
295
|
+
- [🐛 问题反馈](https://github.com/1079161148/yh-ui/issues)
|
|
58
296
|
|
|
59
297
|
## 📄 开源协议
|
|
60
298
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yh-ui/yh-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.21",
|
|
4
4
|
"description": "YH-UI - A Modern Vue 3 Component Library",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.mjs",
|
|
@@ -9,21 +9,24 @@
|
|
|
9
9
|
"exports": {
|
|
10
10
|
".": {
|
|
11
11
|
"types": "./dist/index.d.ts",
|
|
12
|
-
"import": "./dist/index.mjs"
|
|
12
|
+
"import": "./dist/index.mjs",
|
|
13
|
+
"require": "./dist/index.cjs"
|
|
13
14
|
},
|
|
14
15
|
"./css": "./dist/style.css",
|
|
15
16
|
"./*": {
|
|
16
|
-
"
|
|
17
|
+
"types": "./dist/*.d.ts",
|
|
18
|
+
"import": "./dist/*.mjs",
|
|
19
|
+
"require": "./dist/*.cjs"
|
|
17
20
|
}
|
|
18
21
|
},
|
|
19
22
|
"files": [
|
|
20
23
|
"dist"
|
|
21
24
|
],
|
|
22
25
|
"dependencies": {
|
|
23
|
-
"@yh-ui/
|
|
24
|
-
"@yh-ui/theme": "0.1.
|
|
25
|
-
"@yh-ui/
|
|
26
|
-
"@yh-ui/utils": "0.1.
|
|
26
|
+
"@yh-ui/hooks": "0.1.21",
|
|
27
|
+
"@yh-ui/theme": "0.1.21",
|
|
28
|
+
"@yh-ui/components": "0.1.21",
|
|
29
|
+
"@yh-ui/utils": "0.1.21"
|
|
27
30
|
},
|
|
28
31
|
"peerDependencies": {
|
|
29
32
|
"vue": "^3.5.27"
|