@yh-ui/yh-ui 1.0.7 → 1.0.8
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/LICENSE +1 -1
- package/README.md +42 -239
- package/dist/full.mjs +2 -51025
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +7 -6
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,91 +1,38 @@
|
|
|
1
1
|
# @yh-ui/yh-ui
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
<img src="https://raw.githubusercontent.com/1079161148/yh-ui/main/docs/public/logo.svg" width="120" height="120" alt="YH-UI Logo">
|
|
5
|
-
</p>
|
|
3
|
+
YH-UI 的完整入口包，面向 Vue 3.5+ 项目提供组件、主题、Hooks、工具函数和国际化能力。它适合希望一次安装就获得完整设计系统能力的应用，也保留了按需导入和自动导入的使用方式。
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
[Documentation](https://1079161148.github.io/yh-ui/) | [Releases](https://github.com/1079161148/yh-ui/releases) | [GitHub](https://github.com/1079161148/yh-ui)
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
基于 Vue 3.5+ 的现代企业级组件库 · 行业领先主题系统 · 67 种国际化语言 · 原生 Nuxt 3 支持
|
|
11
|
-
</p>
|
|
7
|
+
## Highlights
|
|
12
8
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
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>
|
|
9
|
+
- 完整 Vue 3 组件体系：基础组件、表单、反馈、导航、数据展示、业务组件、AI 组件和 Table 能力都从同一入口导出。
|
|
10
|
+
- 面向真实业务的自有能力：AI 对话界面、思维链展示、附件卡片、代码块、业务地址解析、SKU、优惠券、抽奖、瀑布流、甘特图等不止停留在基础 UI。
|
|
11
|
+
- 主题系统内置：预设主题、暗色模式、密度、色盲友好模式、CSS 变量和运行时切换可以统一管理。
|
|
12
|
+
- 国际化就绪：语言包由 `@yh-ui/locale` 提供，可通过 `YhConfigProvider` 或插件安装参数注入。
|
|
13
|
+
- TypeScript 友好：组件、Hooks、工具函数、主题和语言包都提供类型声明。
|
|
14
|
+
- 支持现代构建方式：ESM、按需导入、自动导入 resolver、Nuxt 模块和 SSR 场景。
|
|
27
15
|
|
|
28
|
-
|
|
29
|
-
<a href="https://1079161148.github.io/yh-ui/">📖 文档</a> ·
|
|
30
|
-
<a href="https://1079161148.github.io/yh-ui/guide/quickstart">🚀 快速开始</a> ·
|
|
31
|
-
<a href="https://github.com/1079161148/yh-ui/releases">📝 更新日志</a>
|
|
32
|
-
</p>
|
|
33
|
-
|
|
34
|
-
---
|
|
35
|
-
|
|
36
|
-
## ✨ 为什么选择 YH-UI？
|
|
37
|
-
|
|
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
|
-
---
|
|
54
|
-
|
|
55
|
-
## 📦 安装
|
|
16
|
+
## Install
|
|
56
17
|
|
|
57
18
|
```bash
|
|
58
|
-
# pnpm（推荐）
|
|
59
19
|
pnpm add @yh-ui/yh-ui
|
|
60
|
-
|
|
61
|
-
# npm
|
|
62
|
-
npm install @yh-ui/yh-ui
|
|
63
|
-
|
|
64
|
-
# yarn
|
|
65
|
-
yarn add @yh-ui/yh-ui
|
|
66
20
|
```
|
|
67
21
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
---
|
|
71
|
-
|
|
72
|
-
## 🔨 快速开始
|
|
22
|
+
Peer requirements: Vue `>=3.5.0`, Node.js `>=18.0.0`.
|
|
73
23
|
|
|
74
|
-
|
|
24
|
+
## Full Import
|
|
75
25
|
|
|
76
26
|
```ts
|
|
77
|
-
// main.ts
|
|
78
27
|
import { createApp } from 'vue'
|
|
79
28
|
import YhUI from '@yh-ui/yh-ui'
|
|
80
|
-
import '@yh-ui/yh-ui/css'
|
|
29
|
+
import '@yh-ui/yh-ui/css'
|
|
81
30
|
import App from './App.vue'
|
|
82
31
|
|
|
83
|
-
|
|
84
|
-
app.use(YhUI)
|
|
85
|
-
app.mount('#app')
|
|
32
|
+
createApp(App).use(YhUI).mount('#app')
|
|
86
33
|
```
|
|
87
34
|
|
|
88
|
-
|
|
35
|
+
## On-Demand Import
|
|
89
36
|
|
|
90
37
|
```vue
|
|
91
38
|
<script setup lang="ts">
|
|
@@ -93,15 +40,15 @@ import { YhButton, YhInput, YhTable } from '@yh-ui/yh-ui'
|
|
|
93
40
|
</script>
|
|
94
41
|
|
|
95
42
|
<template>
|
|
96
|
-
<YhButton type="primary"
|
|
97
|
-
<YhInput
|
|
43
|
+
<YhButton type="primary">Submit</YhButton>
|
|
44
|
+
<YhInput clearable placeholder="Search" />
|
|
45
|
+
<YhTable :data="rows" :columns="columns" />
|
|
98
46
|
</template>
|
|
99
47
|
```
|
|
100
48
|
|
|
101
|
-
|
|
49
|
+
## Auto Import
|
|
102
50
|
|
|
103
51
|
```ts
|
|
104
|
-
// vite.config.ts
|
|
105
52
|
import Components from 'unplugin-vue-components/vite'
|
|
106
53
|
import { YhUIResolver } from '@yh-ui/yh-ui/resolver'
|
|
107
54
|
|
|
@@ -114,188 +61,44 @@ export default {
|
|
|
114
61
|
}
|
|
115
62
|
```
|
|
116
63
|
|
|
117
|
-
|
|
64
|
+
The resolver can inject component styles automatically, so most Vite projects can use components without hand-written style imports.
|
|
118
65
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
## 🎨 主题系统
|
|
66
|
+
## Theme
|
|
122
67
|
|
|
123
68
|
```ts
|
|
124
|
-
import {
|
|
69
|
+
import { ThemePlugin } from '@yh-ui/yh-ui'
|
|
125
70
|
|
|
126
|
-
|
|
127
|
-
preset: '
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
followSystem: true, // 跟随系统暗色
|
|
132
|
-
transition: true, // 丝滑切换动画
|
|
133
|
-
persist: true // 持久化到 localStorage
|
|
71
|
+
app.use(ThemePlugin, {
|
|
72
|
+
preset: 'default',
|
|
73
|
+
followSystem: true,
|
|
74
|
+
persist: true,
|
|
75
|
+
algorithm: 'vibrant'
|
|
134
76
|
})
|
|
135
|
-
|
|
136
|
-
app.use(theme)
|
|
137
77
|
```
|
|
138
78
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
```vue
|
|
142
|
-
<script setup lang="ts">
|
|
143
|
-
import { useTheme } from '@yh-ui/yh-ui'
|
|
144
|
-
const { setPreset, toggleDark, setDensity, isDark } = useTheme()
|
|
145
|
-
</script>
|
|
146
|
-
|
|
147
|
-
<template>
|
|
148
|
-
<YhButton @click="toggleDark()">{{ isDark ? '亮色' : '暗色' }}</YhButton>
|
|
149
|
-
<YhButton @click="setPreset('ocean')">Ocean 主题</YhButton>
|
|
150
|
-
</template>
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
---
|
|
154
|
-
|
|
155
|
-
## 🌍 国际化
|
|
79
|
+
## Locale
|
|
156
80
|
|
|
157
81
|
```ts
|
|
158
82
|
import YhUI from '@yh-ui/yh-ui'
|
|
159
|
-
import
|
|
160
|
-
import enUS from '@yh-ui/yh-ui/locale/en'
|
|
161
|
-
|
|
162
|
-
// 初始化时指定
|
|
163
|
-
app.use(YhUI, { locale: zhCN })
|
|
164
|
-
```
|
|
165
|
-
|
|
166
|
-
动态切换语言：
|
|
167
|
-
|
|
168
|
-
```vue
|
|
169
|
-
<script setup lang="ts">
|
|
170
|
-
import { ref } from 'vue'
|
|
171
|
-
import { YhConfigProvider } from '@yh-ui/yh-ui'
|
|
172
|
-
import zhCN from '@yh-ui/yh-ui/locale/zh-CN'
|
|
173
|
-
import enUS from '@yh-ui/yh-ui/locale/en'
|
|
174
|
-
|
|
175
|
-
const locale = ref(zhCN)
|
|
176
|
-
</script>
|
|
177
|
-
|
|
178
|
-
<template>
|
|
179
|
-
<YhConfigProvider :locale="locale">
|
|
180
|
-
<App />
|
|
181
|
-
</YhConfigProvider>
|
|
182
|
-
<button @click="locale = enUS">English</button>
|
|
183
|
-
</template>
|
|
184
|
-
```
|
|
83
|
+
import zhCn from '@yh-ui/locale/lang/zh-cn'
|
|
185
84
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
## 📊 企业级 Table
|
|
189
|
-
|
|
190
|
-
```vue
|
|
191
|
-
<YhTable
|
|
192
|
-
:data="tableData"
|
|
193
|
-
:columns="columns"
|
|
194
|
-
:virtual-config="{ enabled: true, rowHeight: 40 }"
|
|
195
|
-
:drag-config="{ row: true, column: true }"
|
|
196
|
-
:toolbar-config="{ export: true, print: true, columnSetting: true }"
|
|
197
|
-
:selection-config="{ type: 'checkbox' }"
|
|
198
|
-
:summary-config="{ method: sumMethod }"
|
|
199
|
-
height="600px"
|
|
200
|
-
border
|
|
201
|
-
stripe
|
|
202
|
-
/>
|
|
85
|
+
app.use(YhUI, { locale: zhCn })
|
|
203
86
|
```
|
|
204
87
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
## 🤖 AI 组件套件
|
|
208
|
-
|
|
209
|
-
```vue
|
|
210
|
-
<script setup lang="ts">
|
|
211
|
-
import { ref } from 'vue'
|
|
212
|
-
import { YhAiProvider, YhAiBubble, YhAiSender } from '@yh-ui/yh-ui'
|
|
213
|
-
import { useAIChat } from '@yh-ui/ai-sdk/vue'
|
|
214
|
-
|
|
215
|
-
const { messages, input, isLoading, sendMessage } = useAIChat({ api: '/api/chat' })
|
|
216
|
-
</script>
|
|
217
|
-
|
|
218
|
-
<template>
|
|
219
|
-
<YhAiProvider :token="apiKey">
|
|
220
|
-
<div class="chat-container">
|
|
221
|
-
<YhAiBubble
|
|
222
|
-
v-for="msg in messages"
|
|
223
|
-
:key="msg.id"
|
|
224
|
-
:role="msg.role"
|
|
225
|
-
:content="msg.content"
|
|
226
|
-
streaming
|
|
227
|
-
stream-mode="word"
|
|
228
|
-
/>
|
|
229
|
-
</div>
|
|
230
|
-
<YhAiSender v-model="input" :loading="isLoading" @send="sendMessage" />
|
|
231
|
-
</YhAiProvider>
|
|
232
|
-
</template>
|
|
233
|
-
```
|
|
234
|
-
|
|
235
|
-
---
|
|
236
|
-
|
|
237
|
-
## 🔌 Nuxt 3 集成
|
|
238
|
-
|
|
239
|
-
```ts
|
|
240
|
-
// nuxt.config.ts
|
|
241
|
-
export default defineNuxtConfig({
|
|
242
|
-
modules: ['@yh-ui/nuxt'],
|
|
243
|
-
yhUI: {
|
|
244
|
-
importStyle: true, // 默认即为 true：自动注入 CSS；只有关闭后才需要显式恢复
|
|
245
|
-
locale: 'zh-CN' // 默认语言
|
|
246
|
-
}
|
|
247
|
-
})
|
|
248
|
-
```
|
|
249
|
-
|
|
250
|
-
注册模块后，所有组件和 composable 自动导入，无需手动 `import`：
|
|
251
|
-
|
|
252
|
-
```vue
|
|
253
|
-
<template>
|
|
254
|
-
<!-- 直接使用，无需导入 -->
|
|
255
|
-
<YhButton type="primary">按钮</YhButton>
|
|
256
|
-
<YhTable :data="data" :columns="columns" />
|
|
257
|
-
</template>
|
|
258
|
-
|
|
259
|
-
<script setup>
|
|
260
|
-
// useNamespace、useLocale 等也自动导入
|
|
261
|
-
const ns = useNamespace('my-comp')
|
|
262
|
-
</script>
|
|
263
|
-
```
|
|
264
|
-
|
|
265
|
-
---
|
|
266
|
-
|
|
267
|
-
## 📦 包说明
|
|
268
|
-
|
|
269
|
-
`@yh-ui/yh-ui` 是整合包，包含：
|
|
270
|
-
|
|
271
|
-
| 子包 | 说明 |
|
|
272
|
-
| ------------------- | --------------------- |
|
|
273
|
-
| `@yh-ui/components` | 77+ 核心 UI 组件 |
|
|
274
|
-
| `@yh-ui/hooks` | Composition API Hooks |
|
|
275
|
-
| `@yh-ui/theme` | 主题系统 |
|
|
276
|
-
| `@yh-ui/utils` | 工具函数 |
|
|
277
|
-
|
|
278
|
-
其他可选包（按需安装）：
|
|
279
|
-
|
|
280
|
-
| 包名 | 说明 |
|
|
281
|
-
| ---------------- | ------------------- |
|
|
282
|
-
| `@yh-ui/nuxt` | Nuxt 3 模块 |
|
|
283
|
-
| `@yh-ui/ai-sdk` | AI SDK 集成 |
|
|
284
|
-
| `@yh-ui/locale` | 67 种语言包 |
|
|
285
|
-
| `@yh-ui/icons` | 图标系统（Iconify） |
|
|
286
|
-
| `@yh-ui/flow` | 流程图 / 节点编辑器 |
|
|
287
|
-
| `@yh-ui/request` | 企业级请求 Hooks |
|
|
88
|
+
## Package Scope
|
|
288
89
|
|
|
289
|
-
|
|
90
|
+
This package re-exports the public APIs from:
|
|
290
91
|
|
|
291
|
-
|
|
92
|
+
| Package | What it provides |
|
|
93
|
+
| ------------------- | ---------------------------------------------------------- |
|
|
94
|
+
| `@yh-ui/components` | Vue components, AI UI, table, business widgets |
|
|
95
|
+
| `@yh-ui/hooks` | Composition API utilities used by components and apps |
|
|
96
|
+
| `@yh-ui/theme` | Theme manager, tokens, dark mode and runtime CSS variables |
|
|
97
|
+
| `@yh-ui/locale` | Locale files and language types |
|
|
98
|
+
| `@yh-ui/utils` | Shared type, DOM, style and common utilities |
|
|
292
99
|
|
|
293
|
-
-
|
|
294
|
-
- [🚀 快速开始](https://1079161148.github.io/yh-ui/guide/quickstart)
|
|
295
|
-
- [📦 GitHub 仓库](https://github.com/1079161148/yh-ui)
|
|
296
|
-
- [📝 更新日志](https://github.com/1079161148/yh-ui/blob/main/CHANGELOG.md)
|
|
297
|
-
- [🐛 问题反馈](https://github.com/1079161148/yh-ui/issues)
|
|
100
|
+
Install specialized packages such as `@yh-ui/nuxt`, `@yh-ui/request`, `@yh-ui/flow`, `@yh-ui/icons`, or `@yh-ui/ai-sdk` when you want a smaller or more focused integration.
|
|
298
101
|
|
|
299
|
-
##
|
|
102
|
+
## License
|
|
300
103
|
|
|
301
|
-
MIT
|
|
104
|
+
MIT
|