@zl-ui-kit/components 0.7.0 → 0.7.1
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 +32 -20
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -26,6 +26,9 @@ ZL UI 业务组件库 —— Element Plus 体系，`Zl` 前缀，47 个业务组
|
|
|
26
26
|
2. **数据型组件走 `useRequest`** —— 表格/卡片分页/树/图表等组件统一通过 `useRequest` 体系请求数据，与线上请求链路同构。
|
|
27
27
|
3. **样式变量双体系** —— 业务层 `--zl-*` 与 Element Plus 层 `--el-*` 协同，主题切换对两类组件同时生效。
|
|
28
28
|
|
|
29
|
+
> **只想知道「怎么接到自己项目里」？** 直接跳 **§1.2 宿主接入清单**（8 步 + 可直接粘贴的 `main.ts` / `App.vue` + 症状对照表），
|
|
30
|
+
> 或打开 playground 的 `/#/guide` 页面（代码块可一键复制）。后面章节是按能力的参考手册。
|
|
31
|
+
|
|
29
32
|
### 1.1 在业务项目中安装（npm 发布版）
|
|
30
33
|
|
|
31
34
|
```bash
|
|
@@ -34,9 +37,17 @@ npm i @zl-ui-kit/components @zl-ui-kit/composables @zl-ui-kit/utils
|
|
|
34
37
|
npm i @zl-ui-kit/theme
|
|
35
38
|
|
|
36
39
|
# peer 依赖（组件库不打包它们，需宿主提供）
|
|
37
|
-
npm i vue element-plus @vueuse/core
|
|
40
|
+
npm i vue element-plus @vueuse/core vue-i18n
|
|
38
41
|
```
|
|
39
42
|
|
|
43
|
+
> **`vue-i18n` 是必需 peer，不是可选。** `@zl-ui-kit/composables` 的产物里是**静态** `import ... from 'vue-i18n'`
|
|
44
|
+
> （`useLocale` / `createZlI18n` / `useZlT` 都用它），漏装的表现是构建期直接失败：
|
|
45
|
+
> Vite 8 / rolldown 报 `failed to resolve import "vue-i18n"`，Vite 5/6 也只是在有 optional-peer stub 时才降成告警。
|
|
46
|
+
> 版本用 `^11`（`legacy: false` / `useI18n({ useScope: 'global' })` 均适用）。
|
|
47
|
+
>
|
|
48
|
+
> 若 `npm i` 报 `ERESOLVE`（`@vue-office/*` 的 optional peer 会尝试解析出 vue 2），加 `--legacy-peer-deps` 重试；
|
|
49
|
+
> pnpm 不受此影响（会按 peer 自动装齐）。
|
|
50
|
+
|
|
40
51
|
`@zl-ui-kit/icons` 是 `components` 的**直接依赖**（图标由组件内部消费），会自动装上，无需手写。`composables` / `utils` 虽然也列在 `dependencies` 里，但**只要你想在自己的代码里 import 它们，就请显式安装** —— 理由见下方「按需引入」的提示。
|
|
41
52
|
|
|
42
53
|
以下组件**不在主入口**，走独立子路径，依赖按需安装（`peerDependenciesMeta.optional`，没装也不会导致主入口编译失败）：
|
|
@@ -129,16 +140,16 @@ import '@zl-ui-kit/theme/themes.css'
|
|
|
129
140
|
> 这一节是「照抄就能跑」的完整清单，对应 playground 的 **`/#/guide` 页面**（页面里每段代码都能一键复制）。
|
|
130
141
|
> playground 自身就是一个标准宿主，`apps/playground/src/main.ts` 与 `App.vue` 可以直接对照。
|
|
131
142
|
|
|
132
|
-
| # | 做什么
|
|
133
|
-
| --- |
|
|
134
|
-
| 1 | 装 5 个包 + peer（`vue` / `element-plus` / `@vueuse/core`）
|
|
135
|
-
| 2 | `app.use(ElementPlus)`（或按名注册 kit 内部用到的 EP 组件）
|
|
136
|
-
| 3 | 引 `element-plus/dist/index.css` **再引** `@zl-ui-kit/theme/themes.css`
|
|
137
|
-
| 4 | `app.use(ZlUI)` 或手动 `app.component()`
|
|
138
|
-
| 5 | `presetIconifyIcon(icons)`
|
|
139
|
-
| 6 | `app.use(i18n)` + 根组件包 `<ZlI18nProvider>`
|
|
140
|
-
| 7 | `setDictSource(...)`
|
|
141
|
-
| 8 | `setGlobalOptions({ pagination })`（键名与默认不同时）
|
|
143
|
+
| # | 做什么 | 漏了会怎样 |
|
|
144
|
+
| --- | ------------------------------------------------------------------------ | --------------------------------------------------- |
|
|
145
|
+
| 1 | 装 5 个包 + peer（`vue` / `element-plus` / `@vueuse/core` / `vue-i18n`） | 解析不到 `@zl-ui-kit/*`；漏 `vue-i18n` 直接构建失败 |
|
|
146
|
+
| 2 | `app.use(ElementPlus)`（或按名注册 kit 内部用到的 EP 组件） | Zl 组件内部那块区域**空白且无报错**（见 1.2.3） |
|
|
147
|
+
| 3 | 引 `element-plus/dist/index.css` **再引** `@zl-ui-kit/theme/themes.css` | 组件无样式 / 主题变量全走 fallback |
|
|
148
|
+
| 4 | `app.use(ZlUI)` 或手动 `app.component()` | `<zl-*>` 全局标签无效 |
|
|
149
|
+
| 5 | `presetIconifyIcon(icons)` | **所有图标空白**，`.zl-icon` 是空 `div`，无告警 |
|
|
150
|
+
| 6 | `app.use(i18n)` + 根组件包 `<ZlI18nProvider>` | 文案不随语言切；EP 分页/日期选择器仍是英文 |
|
|
151
|
+
| 7 | `setDictSource(...)` | `ZlDictTag`、表单里的字典项全空 |
|
|
152
|
+
| 8 | `setGlobalOptions({ pagination })`（键名与默认不同时） | 分页组件拿不到 `total`，列表永远是第 1 页空数据 |
|
|
142
153
|
|
|
143
154
|
#### 1.2.1 `main.ts`（可直接粘贴）
|
|
144
155
|
|
|
@@ -239,15 +250,16 @@ app.component('ZlChart', ZlChart) // 用到才注册，避免把 echarts 打进
|
|
|
239
250
|
|
|
240
251
|
#### 1.2.5 接入自检：症状 → 原因
|
|
241
252
|
|
|
242
|
-
| 现象
|
|
243
|
-
|
|
|
244
|
-
|
|
|
245
|
-
|
|
|
246
|
-
|
|
|
247
|
-
|
|
|
248
|
-
| `
|
|
249
|
-
|
|
|
250
|
-
|
|
|
253
|
+
| 现象 | 原因 | 处理 |
|
|
254
|
+
| -------------------------------------------- | -------------------------------------------------- | ---------------------------------- |
|
|
255
|
+
| 构建报 `failed to resolve import "vue-i18n"` | 没装 `vue-i18n`（必需 peer，产物里是静态 import） | 见 §1.1 |
|
|
256
|
+
| 图标全空白，`.zl-icon` 里没有 `<svg>` | 没调 `presetIconifyIcon(icons)` | 见 §4.1 |
|
|
257
|
+
| 某块区域空白、无报错 | kit 内部的 `el-*` 没注册 | 见 1.2.3 |
|
|
258
|
+
| 组件完全没有样式 | 没引 `themes.css` / 引在 EP 样式之前被覆盖 | 顺序：EP css → themes.css |
|
|
259
|
+
| 分页一直 0 条 / `total` 为 undefined | 后端分页键名不同 | `setGlobalOptions({ pagination })` |
|
|
260
|
+
| `ZlDictTag` 显示原始 value | 没 `setDictSource` 或 key 不匹配 | 应用入口注册数据源 |
|
|
261
|
+
| EP 分页、日期还是英文 | 没包 `ZlI18nProvider` 或没传 `elLocales` | 见 §13 |
|
|
262
|
+
| 主题切了但 EP 组件颜色不变 | 只引了 `theme/light` 单主题 CSS，且没调 `setTheme` | 见 §10 |
|
|
251
263
|
|
|
252
264
|
---
|
|
253
265
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zl-ui-kit/components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "ZL UI 业务组件库（Element Plus 体系，Zl 前缀）——首批：Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"file-type": "^20.4.1",
|
|
40
40
|
"dt-sql-parser": "^4.3.1",
|
|
41
41
|
"sql-formatter": "^15.4.2",
|
|
42
|
-
"@zl-ui-kit/
|
|
43
|
-
"@zl-ui-kit/
|
|
44
|
-
"@zl-ui-kit/
|
|
42
|
+
"@zl-ui-kit/utils": "0.7.1",
|
|
43
|
+
"@zl-ui-kit/icons": "0.7.1",
|
|
44
|
+
"@zl-ui-kit/composables": "0.7.1"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@vueuse/core": "^12.3.0",
|
|
@@ -98,10 +98,10 @@
|
|
|
98
98
|
"@vue-office/pdf": "^2.0.10",
|
|
99
99
|
"@vue-office/pptx": "1.0.1",
|
|
100
100
|
"echarts": "^5.6.0",
|
|
101
|
+
"@jichuang/eslint-config": "1.0.0",
|
|
101
102
|
"@jichuang/vite-config": "1.0.0",
|
|
102
103
|
"@jichuang/tsconfig": "1.0.0",
|
|
103
|
-
"@
|
|
104
|
-
"@zl-ui-kit/theme": "0.7.0"
|
|
104
|
+
"@zl-ui-kit/theme": "0.7.1"
|
|
105
105
|
},
|
|
106
106
|
"repository": {
|
|
107
107
|
"type": "git",
|