@yh-ui/nuxt 0.1.17 → 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 CHANGED
@@ -1,140 +1,204 @@
1
1
  # @yh-ui/nuxt
2
2
 
3
- YH-UI 的 Nuxt 模块,提供开箱即用的 SSR 支持和组件自动导入。
3
+ <p align="center">
4
+ <img src="https://raw.githubusercontent.com/1079161148/yh-ui/main/docs/public/logo.svg" width="100" height="100" alt="YH-UI Logo">
5
+ </p>
4
6
 
5
- ## 特性
7
+ <h3 align="center">YH-UI Nuxt 模块</h3>
6
8
 
7
- **完整的 SSR 支持** - 解决了 Hydration Mismatch 问题
8
- **组件自动导入** - 无需手动注册组件
9
- ✅ **Composables 自动导入** - 直接使用 `useNamespace`、`useId` 等
10
- ✅ **样式自动注入** - 自动加载主题样式
11
- ✅ **TypeScript 支持** - 完整的类型提示
12
- ✅ **Nuxt 3 & 4 兼容** - 支持最新的 Nuxt 4.x
9
+ <p align="center">
10
+ 开箱即用的 Nuxt 3/4 集成 · 组件自动导入 · SSR/Hydration 完全兼容 · 零配置启用
11
+ </p>
13
12
 
14
- ## 安装
13
+ <p align="center">
14
+ <a href="https://www.npmjs.com/package/@yh-ui/nuxt">
15
+ <img src="https://img.shields.io/npm/v/@yh-ui/nuxt.svg?style=flat-square&colorB=409eff" alt="npm version">
16
+ </a>
17
+ <a href="https://www.npmjs.com/package/@yh-ui/nuxt">
18
+ <img src="https://img.shields.io/npm/dm/@yh-ui/nuxt.svg?style=flat-square&colorB=409eff" alt="npm downloads">
19
+ </a>
20
+ <a href="https://github.com/1079161148/yh-ui/blob/main/LICENSE">
21
+ <img src="https://img.shields.io/npm/l/@yh-ui/nuxt.svg?style=flat-square" alt="license">
22
+ </a>
23
+ </p>
24
+
25
+ ---
26
+
27
+ ## ✨ 特性
28
+
29
+ - ✅ **完整 SSR 支持** — 工业级验证,解决所有 Hydration Mismatch 问题
30
+ - 🔄 **组件自动导入** — 所有 YhXxx 组件无需手动 `import`,开箱即用
31
+ - 🪝 **Composable 自动导入** — `useNamespace`、`useLocale`、`useZIndex` 等自动可用
32
+ - 🎨 **样式自动注入** — 主题样式在正确的时机注入,避免 FOUC
33
+ - 🌍 **i18n 配置** — 一行配置默认语言,支持 67 种语言
34
+ - 🔒 **TypeScript 完整类型** — 模块配置选项均有类型提示
35
+ - ⚡ **Nuxt 3 & 4 兼容** — 支持最新 Nuxt 4.x RC
36
+
37
+ ---
38
+
39
+ ## 📦 安装
15
40
 
16
41
  ```bash
17
42
  pnpm add @yh-ui/nuxt
43
+
44
+ # npm
45
+ npm install @yh-ui/nuxt
18
46
  ```
19
47
 
20
- ## 快速开始
48
+ **依赖要求**:Nuxt `>=3.11.0 || ^4.0.0-rc.1`,Node.js `>=18.0.0`
21
49
 
22
- ### 1. 注册模块
50
+ ---
23
51
 
24
- `nuxt.config.ts` 中添加模块:
52
+ ## 🔨 快速开始
25
53
 
26
- ```typescript
54
+ ### 第 1 步:注册模块
55
+
56
+ ```ts
57
+ // nuxt.config.ts
27
58
  export default defineNuxtConfig({
28
- modules: [
29
- '@yh-ui/nuxt'
30
- ],
31
-
32
- // 可选配置
59
+ modules: ['@yh-ui/nuxt'],
60
+
33
61
  yhUI: {
34
- importStyle: true // 是否自动导入样式,默认为 true
62
+ importStyle: true, // 自动注入主题样式,默认 true
63
+ locale: 'zh-CN' // 默认语言,支持 67 种语言代码
35
64
  }
36
65
  })
37
66
  ```
38
67
 
39
- ### 2. 直接使用组件
68
+ ### 2 步:直接使用组件
40
69
 
41
- 组件会自动导入,无需手动注册:
70
+ 注册模块后,**所有 YhXxx 组件和 composable 自动导入**,无需任何额外配置:
42
71
 
43
72
  ```vue
73
+ <!-- pages/index.vue -->
44
74
  <template>
45
75
  <div>
46
- <YhButton type="primary">Click Me</YhButton>
47
- <YhInput v-model="value" placeholder="Enter text" />
76
+ <YhButton type="primary" size="large">开始使用</YhButton>
77
+ <YhInput v-model="keyword" clearable placeholder="搜索..." />
78
+ <YhTable :data="tableData" :columns="columns" />
48
79
  </div>
49
80
  </template>
50
81
 
51
- <script setup>
52
- const value = ref('')
82
+ <script setup lang="ts">
83
+ // 无需 import!
84
+ const keyword = ref('')
85
+ const tableData = ref([{ id: 1, name: 'YH-UI' }])
86
+ const columns = [{ prop: 'name', label: '名称' }]
53
87
  </script>
54
88
  ```
55
89
 
56
- ### 3. 使用 Composables
57
-
58
- Hooks 也会自动导入:
90
+ ### Composable 自动导入
59
91
 
60
92
  ```vue
61
- <script setup>
62
- // 直接使用,无需导入
63
- const ns = useNamespace('my-component')
64
- const id = useId()
65
- const { nextZIndex } = useZIndex()
93
+ <script setup lang="ts">
94
+ // 以下 composable 均无需 import,直接使用
95
+ const ns = useNamespace('my-component') // BEM 类名
96
+ const id = useId() // 稳定唯一 ID
97
+ const { nextZIndex } = useZIndex() // z-index 管理
98
+ const { t } = useLocale() // i18n 翻译
66
99
  </script>
67
100
  ```
68
101
 
69
- ### 4. 使用全局方法
102
+ ### 使用全局方法
70
103
 
71
104
  ```vue
72
- <script setup>
73
- // Message Notification 自动导入
74
- const showMessage = () => {
105
+ <script setup lang="ts">
106
+ const showSuccess = () => {
75
107
  YhMessage.success('操作成功!')
76
108
  }
77
109
 
78
110
  const showNotification = () => {
79
111
  YhNotification({
80
- title: '提示',
81
- message: '这是一条通知消息'
112
+ title: '系统通知',
113
+ message: '您有一条新消息',
114
+ type: 'info'
82
115
  })
83
116
  }
84
117
  </script>
85
118
  ```
86
119
 
87
- ## SSR 注意事项
120
+ ---
121
+
122
+ ## ⚙️ 配置选项
123
+
124
+ ```ts
125
+ // nuxt.config.ts
126
+ export default defineNuxtConfig({
127
+ modules: ['@yh-ui/nuxt'],
128
+ yhUI: {
129
+ importStyle: true, // 是否自动注入样式,默认 true
130
+ locale: 'zh-CN' // 默认语言代码
131
+ }
132
+ })
133
+ ```
134
+
135
+ | 选项 | 类型 | 默认值 | 说明 |
136
+ | ------------- | --------- | --------- | ------------------------- |
137
+ | `importStyle` | `boolean` | `true` | 是否自动注入组件样式 |
138
+ | `locale` | `string` | `'zh-CN'` | 默认语言代码(67 种可选) |
139
+
140
+ ---
88
141
 
89
- 本模块已经处理了以下 SSR 相关问题:
142
+ ## 🌐 SSR 问题说明
90
143
 
91
- 1. **ID 生成** - 使用 Vue 3.5 原生 `useId()`,确保服务端和客户端生成的 ID 一致
92
- 2. **Z-Index 管理** - 通过 provide/inject 为每个请求提供独立的计数器
93
- 3. **DOM 访问** - 所有 DOM 操作都已经用 `isClient` 保护
144
+ 本模块已系统性地处理 Nuxt SSR 中的常见问题:
94
145
 
95
- ## 自动导入的组件
146
+ | 问题 | 解决方案 |
147
+ | -------------------------------- | -------------------------------------------------- |
148
+ | ID 不一致导致 Hydration Mismatch | 使用 Vue 3.5 原生 `useId()`,服务端/客户端生成一致 |
149
+ | z-index 状态污染 | 通过 provide/inject 为每个请求隔离计数器 |
150
+ | DOM 操作在服务端报错 | 所有 DOM 访问均使用 `isClient` 防护 |
151
+ | 样式注入时机不对(FOUC) | 在 Nuxt 正确的生命周期钩子注入样式 |
96
152
 
97
- 以下组件可以直接使用,无需导入:
153
+ ---
98
154
 
99
- - `YhButton`
100
- - `YhInput` / `YhInputNumber` / `YhInputTag`
101
- - `YhCheckbox` / `YhCheckboxGroup`
102
- - `YhRadio` / `YhRadioGroup` / `YhRadioButton`
103
- - `YhSelect` / `YhOption`
104
- - `YhCascader` / `YhCascaderPanel`
105
- - `YhSwitch` / `YhRate` / `YhSlider`
106
- - `YhTimeSelect` / `YhTransfer` / `YhTreeSelect`
107
- - `YhForm` / `YhFormItem` / `YhFormSchema`
108
- - `YhRow` / `YhCol`
109
- - `YhCard` / `YhBadge` / `YhDivider` / `YhTag`
110
- - `YhIcon`
111
- - `YhConfigProvider`
155
+ ## 🔄 自动导入的组件(部分)
112
156
 
113
- ## 自动导入的 Composables
157
+ 以下组件开箱即用,无需手动 `import`:
114
158
 
115
- - `useNamespace` - BEM 类名生成
116
- - `useId` - 唯一 ID 生成
117
- - `useZIndex` - Z-Index 管理
118
- - `useLocale` - 国际化
119
- - `useFormItem` - 表单项集成
120
- - `useGlobalNamespace` - 全局命名空间
159
+ ```
160
+ YhButton YhInput YhInputNumber YhInputTag
161
+ YhSelect YhOption YhCascader YhCascaderPanel
162
+ YhCheckbox YhCheckboxGroup YhRadio YhRadioGroup
163
+ YhSwitch YhRate YhSlider YhDatePicker
164
+ YhTimePicker YhColorPicker YhUpload YhTransfer
165
+ YhTreeSelect YhForm YhFormItem YhFormSchema
166
+ YhTable YhTree YhList YhCard
167
+ YhBadge YhTag YhAvatar YhImage
168
+ YhDialog YhDrawer YhTooltip YhPopover
169
+ YhPopconfirm YhMessage YhNotification YhAlert
170
+ YhProgress YhSkeleton YhLoading YhPagination
171
+ YhMenu YhTabs YhBreadcrumb YhSteps
172
+ YhRow YhCol YhDivider YhSpace
173
+ YhIcon YhConfigProvider YhChart YhGantt
174
+ YhAiBubble YhAiSender YhAiProvider ... 共 77+ 个
175
+ ```
176
+
177
+ ## 🪝 自动导入的 Composable
178
+
179
+ ```
180
+ useNamespace useId useZIndex useLocale
181
+ useFormItem useConfig useCache useClickOutside
182
+ useEventListener useScrollLock useCountdown useSKU
183
+ useVirtualScroll useAI
184
+ ```
121
185
 
122
- ## 配置选项
186
+ ---
123
187
 
124
- | 选项 | 类型 | 默认值 | 说明 |
125
- |------|------|--------|------|
126
- | `importStyle` | `boolean` | `true` | 是否自动导入样式文件 |
188
+ ## ⚠️ 注意事项
127
189
 
128
- ## 兼容性
190
+ 1. **样式引入顺序**:若与其他 CSS 框架共存,注意样式的加载顺序,避免优先级冲突
191
+ 2. **Flow 组件**:`@yh-ui/flow` 流程图组件依赖浏览器 Canvas API,需用 `<ClientOnly>` 包裹
192
+ 3. **Nuxt 4 兼容**:Nuxt 4.x 对 `auto-imports` 规则有变化,本模块已做对应适配
129
193
 
130
- - Nuxt: `^3.0.0` 或 `^4.0.0-rc.1`
131
- - Vue: `^3.5.0`
132
- - Node.js: `>=18.0.0`
194
+ ---
133
195
 
134
- ## 示例项目
196
+ ## 🔗 相关资源
135
197
 
136
- 查看 [playground](../../playground-nuxt) 目录获取完整示例。
198
+ - [📖 Nuxt 集成文档](https://1079161148.github.io/yh-ui/guide/nuxt)
199
+ - [🎮 Nuxt Playground](https://github.com/1079161148/yh-ui/tree/main/playground-nuxt)
200
+ - [📦 GitHub 仓库](https://github.com/1079161148/yh-ui)
137
201
 
138
- ## License
202
+ ## 📄 开源协议
139
203
 
140
- MIT
204
+ MIT License © 2024-present YH-UI Team
package/dist/module.cjs CHANGED
@@ -149,6 +149,8 @@ const yhNuxtModule = kit.defineNuxtModule({
149
149
  "AiSender",
150
150
  "AiThoughtChain",
151
151
  "AiCodeBlock",
152
+ "AiCodeEditor",
153
+ "AiCodeRunner",
152
154
  "AiThinking",
153
155
  "AiWelcome",
154
156
  "AiActionGroup",
@@ -161,7 +163,26 @@ const yhNuxtModule = kit.defineNuxtModule({
161
163
  "AiAgentCard",
162
164
  "AiSources",
163
165
  "AiProvider",
164
- "AiMention"
166
+ "AiMention",
167
+ "AiBubbleList",
168
+ // New AI Components (Phase 6)
169
+ "AiFileCard",
170
+ "AiAttachments",
171
+ "AiMermaid",
172
+ "Carousel",
173
+ "CarouselItem",
174
+ "Scrollbar",
175
+ "GanttChart",
176
+ "SkuSelector",
177
+ "Price",
178
+ "ProductCard",
179
+ "ImageMagnifier",
180
+ "CouponCard",
181
+ "LuckyDraw",
182
+ "FilterBar",
183
+ "SubmitBar",
184
+ "CategoryNav",
185
+ "SmartAddress"
165
186
  ];
166
187
  components.forEach((name) => {
167
188
  kit.addComponent({
@@ -187,11 +208,31 @@ const yhNuxtModule = kit.defineNuxtModule({
187
208
  "useAiChat",
188
209
  "useAiStream",
189
210
  "useAiConversations",
211
+ "useAiRequest",
212
+ "useAiVoice",
213
+ "useAiPersistence",
190
214
  // Adapters / parsers
191
215
  "openaiParser",
216
+ "claudeParser",
217
+ "geminiParser",
192
218
  "ernieParser",
193
219
  "qwenParser",
194
- "plainTextParser"
220
+ "plainTextParser",
221
+ "useSKU",
222
+ "useCountdown",
223
+ // Utils and Keys
224
+ "getNextZIndex",
225
+ "resetZIndex",
226
+ "useIdInjection",
227
+ "getDayjsLocale",
228
+ "setDayjsLocale",
229
+ "setDayjsLocaleSync",
230
+ "updateDayjsMonths",
231
+ "namespaceContextKey",
232
+ "configProviderContextKey",
233
+ "idInjectionKey",
234
+ "zIndexContextKey",
235
+ "zIndexCounterKey"
195
236
  ];
196
237
  hooks.forEach((name) => {
197
238
  kit.addImports({
@@ -205,7 +246,8 @@ const yhNuxtModule = kit.defineNuxtModule({
205
246
  "YhNotification",
206
247
  "YhMessageBox",
207
248
  "YhDialogMethod",
208
- "YhLoading"
249
+ "YhLoading",
250
+ "useAddressParser"
209
251
  ];
210
252
  globalMethods.forEach((name) => {
211
253
  kit.addImports({
package/dist/module.mjs CHANGED
@@ -142,6 +142,8 @@ const yhNuxtModule = defineNuxtModule({
142
142
  "AiSender",
143
143
  "AiThoughtChain",
144
144
  "AiCodeBlock",
145
+ "AiCodeEditor",
146
+ "AiCodeRunner",
145
147
  "AiThinking",
146
148
  "AiWelcome",
147
149
  "AiActionGroup",
@@ -154,7 +156,26 @@ const yhNuxtModule = defineNuxtModule({
154
156
  "AiAgentCard",
155
157
  "AiSources",
156
158
  "AiProvider",
157
- "AiMention"
159
+ "AiMention",
160
+ "AiBubbleList",
161
+ // New AI Components (Phase 6)
162
+ "AiFileCard",
163
+ "AiAttachments",
164
+ "AiMermaid",
165
+ "Carousel",
166
+ "CarouselItem",
167
+ "Scrollbar",
168
+ "GanttChart",
169
+ "SkuSelector",
170
+ "Price",
171
+ "ProductCard",
172
+ "ImageMagnifier",
173
+ "CouponCard",
174
+ "LuckyDraw",
175
+ "FilterBar",
176
+ "SubmitBar",
177
+ "CategoryNav",
178
+ "SmartAddress"
158
179
  ];
159
180
  components.forEach((name) => {
160
181
  addComponent({
@@ -180,11 +201,31 @@ const yhNuxtModule = defineNuxtModule({
180
201
  "useAiChat",
181
202
  "useAiStream",
182
203
  "useAiConversations",
204
+ "useAiRequest",
205
+ "useAiVoice",
206
+ "useAiPersistence",
183
207
  // Adapters / parsers
184
208
  "openaiParser",
209
+ "claudeParser",
210
+ "geminiParser",
185
211
  "ernieParser",
186
212
  "qwenParser",
187
- "plainTextParser"
213
+ "plainTextParser",
214
+ "useSKU",
215
+ "useCountdown",
216
+ // Utils and Keys
217
+ "getNextZIndex",
218
+ "resetZIndex",
219
+ "useIdInjection",
220
+ "getDayjsLocale",
221
+ "setDayjsLocale",
222
+ "setDayjsLocaleSync",
223
+ "updateDayjsMonths",
224
+ "namespaceContextKey",
225
+ "configProviderContextKey",
226
+ "idInjectionKey",
227
+ "zIndexContextKey",
228
+ "zIndexCounterKey"
188
229
  ];
189
230
  hooks.forEach((name) => {
190
231
  addImports({
@@ -198,7 +239,8 @@ const yhNuxtModule = defineNuxtModule({
198
239
  "YhNotification",
199
240
  "YhMessageBox",
200
241
  "YhDialogMethod",
201
- "YhLoading"
242
+ "YhLoading",
243
+ "useAddressParser"
202
244
  ];
203
245
  globalMethods.forEach((name) => {
204
246
  addImports({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yh-ui/nuxt",
3
- "version": "0.1.17",
3
+ "version": "0.1.21",
4
4
  "description": "Nuxt module for YH-UI",
5
5
  "type": "module",
6
6
  "main": "./dist/module.cjs",
@@ -18,8 +18,8 @@
18
18
  ],
19
19
  "dependencies": {
20
20
  "@nuxt/kit": "^3.11.0 || ^4.0.0",
21
- "@yh-ui/components": "0.1.17",
22
- "@yh-ui/theme": "0.1.17"
21
+ "@yh-ui/components": "0.1.21",
22
+ "@yh-ui/theme": "0.1.21"
23
23
  },
24
24
  "devDependencies": {
25
25
  "@nuxt/schema": "^3.11.0 || ^4.0.0",
@@ -43,9 +43,16 @@
43
43
  "module"
44
44
  ],
45
45
  "homepage": "https://1079161148.github.io/yh-ui/",
46
+ "author": "YH-UI Team",
46
47
  "license": "MIT",
48
+ "engines": {
49
+ "node": ">=18.0.0",
50
+ "pnpm": ">=9.0.0"
51
+ },
47
52
  "scripts": {
48
53
  "build": "unbuild",
49
- "dev": "unbuild --stub"
54
+ "dev": "unbuild --stub",
55
+ "typecheck": "vue-tsc --noEmit",
56
+ "lint": "eslint ."
50
57
  }
51
58
  }