@yh-ui/nuxt 0.1.17 → 0.1.22

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