@zl-ui-kit/components 0.4.0 → 0.5.0

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
@@ -15,7 +15,7 @@ ZL UI 业务组件库 —— Element Plus 体系,`Zl` 前缀,47 个业务组
15
15
  | 包 | 职责 |
16
16
  | --- | --- |
17
17
  | [`@zl-ui-kit/components`](https://www.npmjs.com/package/@zl-ui-kit/components) | EP 化业务组件库(`Zl` 前缀,47 个组件) |
18
- | [`@zl-ui-kit/composables`](https://www.npmjs.com/package/@zl-ui-kit/composables) | `useRequest` 请求体系、`useDict`、微前端通信层 |
18
+ | [`@zl-ui-kit/composables`](https://www.npmjs.com/package/@zl-ui-kit/composables) | `useRequest` 请求体系、`useDict`、`useGlobalData` 全局数据、国际化 |
19
19
  | [`@zl-ui-kit/icons`](https://www.npmjs.com/package/@zl-ui-kit/icons) | 444 个离线 SVG 图标(prefix `zl`,开源图标库) |
20
20
  | [`@zl-ui-kit/theme`](https://www.npmjs.com/package/@zl-ui-kit/theme) | 5 套主题 + `defineTheme` 运行时定制(内置 OFL 开源中文字体) |
21
21
  | [`@zl-ui-kit/utils`](https://www.npmjs.com/package/@zl-ui-kit/utils) | TS 工具函数库 + Axios 请求封装 |
@@ -82,7 +82,7 @@ createApp(App).use(ElementPlus).use(ZlUI).mount('#app')
82
82
  ```ts
83
83
  // 1. 组件 —— Zl 前缀
84
84
  import { ZlTable, ZlEmpty } from '@zl-ui-kit/components'
85
- // 2. hooks —— useRequest / useDict / useLocale / usePageTabs / useZlT …
85
+ // 2. hooks —— useRequest / useDict / useLocale / useGlobalData / useZlT …
86
86
  import { useRequest, useDict } from '@zl-ui-kit/composables'
87
87
  // 3. 工具函数 —— generateUUID / paginate / formatNumber …
88
88
  import { generateUUID, paginate } from '@zl-ui-kit/utils'
@@ -98,20 +98,22 @@ import '@zl-ui-kit/theme/themes.css'
98
98
  > npm i @zl-ui-kit/components @zl-ui-kit/composables @zl-ui-kit/utils
99
99
  > ```
100
100
 
101
- > **版本要求 `>=0.3.2`**
101
+ > **版本要求 `>=0.4.0`**
102
102
  >
103
103
  > - `0.2.0`:tarball 里依赖仍是 `catalog:` 协议,安装报 `Unsupported URL Type "catalog:"`
104
104
  > - `0.3.0`:`exports` 指向不存在的 `dist/index.mjs`,装得上但 import 报 `ERR_MODULE_NOT_FOUND`
105
105
  > - `0.3.1`:把 micro-app 误设为**必需** peer,纯 Web 应用会被强行拉入 micro-app(约 2.4MB)
106
106
  >
107
- > 这三个版本均已 `deprecate`,请直接用 `0.3.2` 或更新版本。
107
+ > 这三个版本均已 `deprecate`,请直接用 `0.4.0` 或更新版本。
108
108
 
109
- > **`@micro-zoe/micro-app` 是可选依赖(0.3.2 起)**
109
+ > **`0.5.0` 起不再包含任何微前端依赖**
110
110
  >
111
- > 只在用微前端时才需要装:`npm i @micro-zoe/micro-app`。
112
- > 不装时 `useLocale` / 主题 / 字典等核心能力照常工作(globalData 降级为 localStorage:
113
- > `$zl_locale` / `$zl_theme` / `$zl_token`),但 `useMicroApp` / `useMicroAction` / `usePageTabs`
114
- > 这类微前端 hook 会在调用时抛出带指引的错误,而不是 `Cannot read properties of undefined`。
111
+ > 微前端通信层(`useMicroApp` / `useMicroAction` / `usePageTabs` / `useMicroGlobalData`)与
112
+ > `formatMicroUrl` 工具已全部移除,`@micro-zoe/micro-app` 不再是 peer 依赖 —— 安装本库不会
113
+ > 再拉入这个约 2.4MB 的包,`@zl-ui-kit/composables` 的产物里也没有它的静态 import
114
+ > (旧版在 Node 原生 ESM / SSR 下会因这条 import 报 `ERR_MODULE_NOT_FOUND`)。
115
+ > 全局数据(`locale` / `theme` / `token` / 用户 / 权限 / `config`)改用 `useGlobalData()`,
116
+ > 纯 `localStorage` 持久化;`useLocale`、主题、字典等能力的用法与行为不变。
115
117
 
116
118
  > **两个「看起来像错、其实正常」的现象**
117
119
  >
@@ -196,7 +198,7 @@ setTheme('dark') // 切换主题(light/dark/red-light/red-dark/b
196
198
  ### 3.5 文件与编辑
197
199
  `ZlFilePreview` · `ZlFileViewer` · `ZlPdfViewer` · `ZlEditor` · `ZlSqlEditor` · `ZlLogin`
198
200
 
199
- > 微前端页签类组件(`ZlMicroPage`/`ZlAppTabs`/`ZlPageTabs`/`ZlDevMenu`)已从组件库移除,相关 composables 保留并标注运行前提。
201
+ > 页签/微前端类组件(`ZlMicroPage`/`ZlAppTabs`/`ZlPageTabs`/`ZlDevMenu`)与配套 composables(`usePageTabs` 等)均已移除,`0.5.0` 起组件库不含任何微前端能力。
200
202
 
201
203
  ### 3.6 国际化基础设施(独立于 47 个业务组件)
202
204
  `ZlI18nProvider` —— 国际化根容器,将 Element Plus 语言包经 `<el-config-provider>` 挂载到 Element Plus(详见第 13 章)。
@@ -257,7 +259,7 @@ setTheme('dark') // 切换主题(light/dark/red-light/red-dark/b
257
259
  ```
258
260
 
259
261
  ### ZlDictTag — 字典标签
260
- 经 `useDict(dictKey)` 解析独立字典 store(`useDictStore`,Vue3 状态管理缓存,不依赖微前端)。**支持三种数据注入方式**(详见第 12.1.4 节与第 6.3 节 ⑤):
262
+ 经 `useDict(dictKey)` 解析独立字典 store(`useDictStore`,Vue3 状态管理缓存,不依赖全局数据)。**支持三种数据注入方式**(详见第 12.1.3 节与第 6.3 节 ⑤):
261
263
 
262
264
  ```vue
263
265
  <!-- 1. 组件级直传(最轻量,无需任何全局配置即可翻译) -->
@@ -382,7 +384,7 @@ function onSearch(params) { req.run({ pageNum: 1, pageSize: 6, ...params }) }
382
384
 
383
385
  #### ⑤ `ZlDictTag` —— 注入字典后由 `useDict` 解析
384
386
 
385
- 字典模块**不依赖任何微前端逻辑**:数据由调用方注入或经 `setDictSource` 注册的加载器获取,缓存在独立的全局字典 store(`useDictStore`,基于 Vue3 `createGlobalState` 单例)中,跨组件共享并复用,避免重复加载。
387
+ 字典模块**不依赖全局数据**:数据由调用方注入或经 `setDictSource` 注册的加载器获取,缓存在独立的全局字典 store(`useDictStore`,基于 Vue3 `createGlobalState` 单例)中,跨组件共享并复用,避免重复加载。
386
388
 
387
389
  `useDict` 的数据解析优先级(从高到低):**组件级直传 → 局部注入 source → 全局 source**。任一来源命中即写入缓存 `dictStore[key]` 统一解析;同一 key 仅在缓存未命中且未在加载时触发一次加载(结果缓存)。
388
390
 
@@ -556,6 +558,55 @@ const items: FormItem[] = [
556
558
  - `ZlEditor` / `ZlSqlEditor`(+`useSqlCompletion`):富文本 / SQL 编辑器。
557
559
  - `ZlLogin`(+`LoginForm`+`SlideChecker`):登录框,背景改半透明 + `backdrop-filter`。
558
560
 
561
+ ### 9.1 `ZlEditor`:monaco worker 配置与首屏治理
562
+
563
+ `ZlEditor` 内部 `import * as monaco from 'monaco-editor'`(**全量**,含各语言 contribution),
564
+ 是除 echarts 之外最重的一块依赖:`monaco-editor@0.41` 安装体积约 **83.8MB**,
565
+ min 后的编辑器内核约 **3.3MB**,其中 worker 单独成文件(`tsWorker` 4.4MB、`jsonWorker` 0.12MB)。
566
+
567
+ **worker 是干什么的**:monaco 把「语法校验、智能补全、格式化、TS 类型检查」这些 CPU 密集活儿
568
+ 丢进 Web Worker,避免打字时主线程卡顿。**不配 worker 不会白屏**——编辑器照常输入,
569
+ 但没有语言服务,控制台会打一条告警:
570
+
571
+ ```
572
+ [ZlEditor] monaco worker 未配置:语言服务(TS/JSON/CSS 补全校验)不可用。
573
+ ```
574
+
575
+ **为什么库不打包 worker**:vite lib 模式无法把 `?worker` 产物正确外链进库,打进库只会得到
576
+ 一个指向不存在文件的 URL。所以由宿主注入 —— 用 `setupMonacoEnvironment(getWorker)`:
577
+
578
+ ```ts
579
+ // 放在「延迟加载编辑器的那个模块」里,不要放 main.ts 顶部
580
+ import { setupMonacoEnvironment } from '@zl-ui-kit/components/editor'
581
+ import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
582
+ import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
583
+ import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
584
+
585
+ setupMonacoEnvironment((_, label) => {
586
+ if (label === 'json') return new JsonWorker()
587
+ if (label === 'typescript' || label === 'javascript') return new TsWorker()
588
+ return new EditorWorker() // 其他语言(含 SQL 的着色)走基础 worker
589
+ })
590
+ ```
591
+
592
+ > `getWorker` 必须是**同步**返回 `Worker`,所以 worker 要用上面的 `?worker` 静态导入(Vite 会
593
+ > 输出独立文件),不能在函数里 `await import()`。
594
+
595
+ **让编辑器不进首屏**(体积 3MB+,务必异步):
596
+
597
+ ```ts
598
+ const ZlEditor = defineAsyncComponent(() =>
599
+ import('@zl-ui-kit/components/editor').then(m => m.ZlEditor),
600
+ )
601
+ ```
602
+
603
+ 路由级拆分(`() => import('./EditorPage.vue')`)效果相同 —— 只要 `@zl-ui-kit/components/editor`
604
+ 这条导入不在首屏的静态依赖图里,monaco 就一定在异步 chunk 中;worker 文件只会在
605
+ `new Worker()` 时被请求。
606
+
607
+ **只用 SQL 编辑器**时:SQL 补全由 `useSqlCompletion` + `dt-sql-parser`(纯 JS)提供,
608
+ 着色走 monaco 的 Monarch,所以只配 `editor.worker` 就够,可以不引 `tsWorker`。
609
+
559
610
  ---
560
611
 
561
612
  ## 10. 主题定制(@zl-ui-kit/theme)
@@ -632,7 +683,7 @@ const { theme, themes, setTheme } = useTheme() // 组件内响应式
632
683
  ### 12.1 `@zl-ui-kit/composables` —— 公共 Hooks
633
684
 
634
685
  ```ts
635
- import { useRequest, useMicroGlobalData, useDict /* … */ } from '@zl-ui-kit/composables'
686
+ import { useRequest, useGlobalData, useDict /* … */ } from '@zl-ui-kit/composables'
636
687
  ```
637
688
 
638
689
  #### 12.1.1 请求体系 `useRequest`(插件与全局配置)
@@ -661,55 +712,37 @@ const logPlugin = defineUseRequestPlugin((inst) => ({
661
712
  const { data } = useRequest(getList, {}, [logPlugin])
662
713
  ```
663
714
 
664
- #### 12.1.2 微前端通信(基于 `@micro-zoe/micro-app`)
665
-
666
- > 运行前提:微前端相关 hook 需要 `@micro-zoe/micro-app`(**0.3.2 起为可选依赖**,`npm i @micro-zoe/micro-app`)。
667
- > 缺失时这些 hook 会抛出带安装指引的错误。
668
- >
669
- > `useMicroGlobalData` 是例外:它在检测不到 micro-app 时**自动降级**为本地存储模式
670
- > (`$zl_locale` / `$zl_theme` / `$zl_token`),因此 `useLocale`、主题、字典在纯 Web 应用中照常可用。
671
- > `enableGlobalDataMock(true)` 仍然保留,用于开发态强制走 mock 数据。
672
-
673
- | Hook / 函数 | 返回 / 签名 | 说明 |
674
- | --- | --- | --- |
675
- | `useMicroApp()` | `{ apps, isMicroBase(), isMicroChild(), updateApps(), startMicroApp(config?) }` | 微应用身份判断、启动、活跃应用列表(全局单例) |
676
- | `useMicroAction(action, appName?)` | `(...args) => void` | 向子应用(或指定 app,缺省广播全部)派发动作事件(前缀 `action__`) |
677
- | `useMicroActionAsync(action, appName?)` | `(...args) => Promise` | 派发并等待 Promise 化结果(主/子应用语义不同) |
678
- | `useMicroListener()`(共享单例) | `{ on, off, once }` | 监听动作事件 |
679
- | `useMicroResultListener(action, callback)` | `void` | 监听动作执行结果 |
680
- | `dispatchMicroAction(action, appName, ...data)` | `Promise<void>` | 向指定子应用派发动作(回调式) |
681
-
682
- #### 12.1.3 全局数据 `useMicroGlobalData`
715
+ #### 12.1.2 全局数据 `useGlobalData`
683
716
 
684
717
  ```ts
685
- const g = useMicroGlobalData()
718
+ import { useGlobalData } from '@zl-ui-kit/composables'
719
+ const g = useGlobalData()
686
720
  ```
687
- 响应式字段(均为 `WritableComputedRef`):`locale` / `theme` / `token` / `isI18nKeyVisible` / `roles` / `permissions` / `user` / `localeMessages` / `elLocaleMessages` / `config`。(注:字典数据已独立为 `useDictStore`,不再挂在全局数据上。)
721
+ 响应式字段(均为 `WritableComputedRef`):`locale` / `theme` / `token` / `isI18nKeyVisible` / `roles` / `permissions` / `user` / `localeMessages` / `elLocaleMessages` / `config`。(注:字典数据已独立为 `useDictStore`,不挂在全局数据上。)
688
722
 
689
723
  方法:`getConfig(key, default?)` / `isConfig(key, compareValue='true')` / `setAndWaitUntil({ set?, until? })`(设置并等待条件成立)/ `resetUser()`。
690
- 存储键:`$zl_locale` / `$zl_theme` / `$zl_token`(经 `useStorage` 持久化,`theme` 缺省 `light`)。
724
+ 持久化:`locale` / `theme` / `token` 经 `useStorage` 写入 `$zl_locale` / `$zl_theme` / `$zl_token`(`theme` 缺省 `light`),并同步到 `<body data-theme>` / `<body data-locale>`;其余字段(用户、权限、`config` 等)为内存态,由宿主自行写入。
691
725
 
692
726
  ```ts
693
- // 无 micro-app 环境会自动降级为本地存储模式,无需额外调用(0.3.2 起)
694
- import { useMicroGlobalData } from '@zl-ui-kit/composables'
695
- const g = useMicroGlobalData() // locale/theme/token 等全局数据(与字典无关)
727
+ // 应用入口:初始化登录态与业务配置
728
+ const g = useGlobalData()
729
+ g.token.value = loginToken // 持久化到 $zl_token
730
+ g.config.value = { 'zl.service.type': 'platform' } // useServiceType 读取它
731
+ g.user.value = { name: '张三' }
696
732
 
697
- // 如需强制使用 mock 数据(例如 playground 调试),仍可显式开启,须在首次调用前执行
698
- import { enableGlobalDataMock } from '@zl-ui-kit/composables'
699
- enableGlobalDataMock(true)
733
+ g.locale.value = 'en' // 切换语言,useLocale / ZlI18nProvider 跟随
734
+ g.resetUser() // 登出:清 user / roles / permissions / token
700
735
  ```
701
736
 
702
- `enableGlobalDataMock(enabled = true)`:显式开启开发态 mock。**不是**使用本 hook 的必要条件 ——
703
- 检测不到 micro-app 时会自动降级,只有想强制 mock 时才需要调用。
737
+ > 本 hook 只依赖 `localStorage`,**不依赖任何微前端框架**。它替代了 `0.4.x` 及更早版本的
738
+ > `useMicroGlobalData`(已随微前端通信层一并移除),存储键保持一致,升级后已持久化的数据不会丢。
704
739
 
705
- > 字典数据已独立:经 `setDictSource()` 注册(见 12.1.4),由 `useDictStore` 缓存,不再通过 `useMicroGlobalData().dictStore`。
706
-
707
- #### 12.1.4 字典与国际化
740
+ #### 12.1.3 字典与国际化
708
741
 
709
742
  - `useDictStore`(全局字典 store,基于 Vue3 `createGlobalState` 单例):`dictStore`(缓存 `Record<key, DictItem[]>`)、`loadingKeys`、`setDictSource(source|null)`、`getDictSource()`、`ensureDict(key, localSource?)`。同一 key 仅在缓存未命中且未在加载时触发一次加载,结果缓存复用。
710
743
  - `useDict(key, options?)` → `ComputedRef<DictItem[]>`(附带 `.label: Record<value,label>`):读 `useDictStore` 并解析。数据解析优先级:组件级 `options.data` → 局部 `useDictProvider({ source })` → 全局 `setDictSource(source)`。`DictItem = { label, value, icon?, type? }`(亦可用 `type DictItem` 导入)。
711
744
  - `setDictSource(source | null)`:全局注册字典数据源(应用入口调用一次)。`source` 为静态表 `Record<string, DictItem[]>` 或函数 `(key) => DictItem[] | Promise<DictItem[]>`;传 `null` 清空。`getDictSource()` 可读取当前值。
712
- - `useDictProvider(source)`:子树根提供局部字典数据源(覆盖全局,非微前端注入)。
745
+ - `useDictProvider(source)`:子树根提供局部字典数据源(覆盖全局)。
713
746
  - `useLocale(options?, loader?)` → `{ i18n, locale, isI18nKeyVisible }`:创建与全局语言联动的 vue-i18n 实例;`loader(locale)` 按需返回 `{ localeMessages, elLocaleMessages }`(业务包 + Element Plus locale)。`elLocaleMessages` 写入全局数据后,**必须**由 `ZlI18nProvider` 经 `<el-config-provider>` 挂载到 Element Plus 才生效(分页 / 日期选择器等内置组件才本地化)。详见第 13 章。
714
747
  - `useZlT()` → `{ t }`:组件内部渐进式翻译的安全桥梁。`t(key, fallback?, params?)` 在宿主已 `app.use(i18n)` 时委托 vue-i18n 解析(`params` 用于 `{name}` 命名插值),未命中 key 或宿主未装 i18n 时降级为 `fallback`(缺省返回 key),**绝不抛错**,从而可在不破坏存量消费方的前提下逐步把硬编码中文替换为 `t('zl.xxx','中文兜底')`。语言包 key 规范:`zl.<组件>.<语义>`。
715
748
  - `mergeMessages(base, ...overrides)`:i18n 语言包深度合并,后者覆盖前者、未提供的 key 保留原值(按 `locale → key` 结构)。用于消费者「只覆盖部分文案」。
@@ -717,7 +750,7 @@ enableGlobalDataMock(true)
717
750
  - `zlMessages` / `zlZhMessages` / `zlEnMessages`(来自 `@zl-ui-kit/components`):组件库内置语言包(zh / zh-cn / en),可被覆盖或整包替换。
718
751
  - `ZlI18nProvider`(新增,来自 `@zl-ui-kit/components`):国际化根容器。用法 `<ZlI18nProvider><App/></ZlI18nProvider>`,在应用根包裹一次,把全局 `elLocaleMessages` 绑定到 Element Plus。
719
752
 
720
- #### 12.1.5 全局消息 `useGlobalMessage`
753
+ #### 12.1.4 全局消息 `useGlobalMessage`
721
754
 
722
755
  ```ts
723
756
  const { Message, Modal, Notification } = useGlobalMessage()
@@ -730,14 +763,7 @@ const r = await Modal.confirmPromise({ title: '删除', message: '确认删除
730
763
  ```
731
764
  `throwOnOk` / `throwOnCancel` 控制错误是否向上抛出(默认吞错 resolve(false) / resolve('Cancel'))。
732
765
 
733
- #### 12.1.6 页签管理 `usePageTabs`
734
-
735
- ```ts
736
- const { roots, activeRoot, pageTabs, current, addPageTab, removePageTab, removeCurrentTab, clearPageTab, setCurrentTab, createPageTabsRoot, setRootChild } = usePageTabs()
737
- ```
738
- micro-app 多应用页签模型(root 树 → 扁平页签 → 当前激活页签)。另含 `micros`、`activeRootKey` 只读属性。
739
-
740
- #### 12.1.7 其它 Hooks
766
+ #### 12.1.5 其它 Hooks
741
767
 
742
768
  - `createCacheComputed(getter)`:带缓存的 computed 工厂,同一对象结果缓存、作用域销毁自动清理;返回函数带 `.clear()`。
743
769
  - `useSash(refName, options?)` → `{ sashElRef }`:拖拽分隔条交互;`options` 含 `start / onMousedown / onMousemove({dx,dy,start}) / onMouseup / onDoubleClick`。
@@ -777,7 +803,7 @@ api.get('/resources', { params: { pageNum: 1, pageSize: 10 } })
777
803
  | `hasOwn(obj, key)` | `Object.prototype.hasOwnProperty` 封装 |
778
804
  | `isObject` / `isPlainObject` / `isArray` / `isFunction` / `isPromise` / `isBoolean` / `isNumber` / `isDefined` | 类型判断(TS 类型守卫) |
779
805
 
780
- #### 12.2.3 函数 / 加密 / DOM / 文件 / 微前端 URL / 杂项
806
+ #### 12.2.3 函数 / 加密 / DOM / 文件 / 杂项
781
807
 
782
808
  **函数**
783
809
  - `debounce(fn, delay = 300)`:防抖。
@@ -799,9 +825,6 @@ api.get('/resources', { params: { pageNum: 1, pageSize: 10 } })
799
825
  - `fileUrlPreviewType(path)` → `'image' | 'pdf' | 'word' | 'ppt' | 'excel'`(按扩展名判断)。
800
826
  - `formatFilesize(size, { precision = 2, units })`:文件大小格式化(B/KB/MB/GB)。
801
827
 
802
- **微前端 URL**
803
- - `formatMicroUrl(url, { dev?, origins? })` → `{ micro, URL, url, fullpath }`:从路径首段提取微应用标识;`dev` 态可将微应用源映射为本机 dev server(如 `{ dsc: 'http://localhost:5204' }`)。
804
-
805
828
  **杂项**
806
829
  - `generateUUID()`:UUID v4。
807
830
  - `getRandomInt(min, max)`:`[min, max]` 区间随机整数。
@@ -831,15 +854,12 @@ api.get('/resources', { params: { pageNum: 1, pageSize: 10 } })
831
854
 
832
855
  ```ts
833
856
  import { createZlI18n } from '@zl-ui-kit/components'
834
- import { enableGlobalDataMock, useMicroGlobalData } from '@zl-ui-kit/composables'
857
+ import { useGlobalData } from '@zl-ui-kit/composables'
835
858
  import en from 'element-plus/es/locale/lang/en'
836
859
  import zhCn from 'element-plus/es/locale/lang/zh-cn'
837
860
 
838
- // 开发态无 micro-app 时开启本地 mock(须在首次 useMicroGlobalData 前调用)
839
- enableGlobalDataMock(true)
840
-
841
861
  // 指定初始语言,避免 createI18n 取到非法 locale
842
- const { locale } = useMicroGlobalData()
862
+ const { locale } = useGlobalData()
843
863
  locale.value = 'zh'
844
864
 
845
865
  const { i18n } = createZlI18n({
@@ -858,15 +878,15 @@ createApp(App).use(i18n).use(ElementPlus).use(ZlUi).use(router).mount('#app')
858
878
 
859
879
  - `elLocales` 的 value 须是 Element Plus 语言包模块(`element-plus/es/locale/lang/<locale>`)。
860
880
  - **合并优先级(低 → 高):内置 `zlMessages` → `loader` 返回的业务包 → 消费者 `messages` 覆盖项。**
861
- - 需完全自定义加载逻辑(如远端按需拉取)时,改用底层 `useLocale(options, loader)`(见 §12.1.4);`createZlI18n` 内部即是对它的封装,并额外处理「默认包 + 覆盖 + EP 包」的合并。
881
+ - 需完全自定义加载逻辑(如远端按需拉取)时,改用底层 `useLocale(options, loader)`(见 §12.1.3);`createZlI18n` 内部即是对它的封装,并额外处理「默认包 + 覆盖 + EP 包」的合并。
862
882
 
863
883
  ### 13.3 根容器挂载(App.vue)
864
884
 
865
885
  ```vue
866
886
  <script setup lang="ts">
867
- import { useMicroGlobalData } from '@zl-ui-kit/composables'
887
+ import { useGlobalData } from '@zl-ui-kit/composables'
868
888
  import { ZlI18nProvider } from '@zl-ui-kit/components'
869
- const { locale, isI18nKeyVisible } = useMicroGlobalData()
889
+ const { locale, isI18nKeyVisible } = useGlobalData()
870
890
  </script>
871
891
 
872
892
  <template>
@@ -908,7 +928,7 @@ const text = t('zl.empty.noData', '暂无相关数据')
908
928
  | 内置默认 | 5 套主题(light / dark / red-light / red-dark / blue) | `zlMessages`(zh / zh-cn / en) |
909
929
  | 运行时定义 | `defineTheme({ name, base, colors, tokens })` | `createZlI18n({ messages })` 覆盖 / 新增语言 |
910
930
  | 引用 / 切换 | `setTheme('dark')` / `useTheme()` | `locale.value = 'en'` / `useLocale()` 返回的 `locale` |
911
- | 持久化 | `enableThemePersistence()` | `useMicroGlobalData().locale` 经 `$zl_locale` 持久化 |
931
+ | 持久化 | `enableThemePersistence()` | `useGlobalData().locale` 经 `$zl_locale` 持久化 |
912
932
  | 细粒度覆盖 | CSS 变量 L1 覆写(`--zl-primary-6`) | `mergeMessages` / 直接覆盖单个 key |
913
933
  | 挂载点 | `body[data-theme]` | `<ZlI18nProvider>`(EP locale)+ `app.use(i18n)`(业务文案) |
914
934
 
@@ -3,7 +3,7 @@
3
3
  * 库模式下 worker 无法静态打包(vite lib 限制),默认实现仅警告;
4
4
  * 消费方按官方方式自行提供 worker(或 CDN),经 setupMonacoEnvironment(getWorker) 注入。
5
5
  */
6
- type GetWorker = (...args: any[]) => Worker;
6
+ export type GetWorker = (...args: any[]) => Worker;
7
7
  declare global {
8
8
  interface GlobalThis {
9
9
  MonacoEnvironment?: {
@@ -12,5 +12,4 @@ declare global {
12
12
  }
13
13
  }
14
14
  export declare function setupMonacoEnvironment(getWorker?: GetWorker): void;
15
- export {};
16
15
  //# sourceMappingURL=setupMonacoEnvironment.d.ts.map
@@ -1,9 +1,16 @@
1
- function n(o) {
2
- globalThis.MonacoEnvironment?.getWorker || console.warn(
1
+ function e(o) {
2
+ const n = globalThis.MonacoEnvironment?.getWorker;
3
+ if (o) {
4
+ globalThis.MonacoEnvironment = {
5
+ getWorker: o
6
+ };
7
+ return;
8
+ }
9
+ n || console.warn(
3
10
  "[ZlEditor] monaco worker 未配置:语言服务(TS/JSON/CSS 补全校验)不可用。请调用 setupMonacoEnvironment(getWorker) 注入(见 README「monaco worker 配置」)。"
4
11
  );
5
12
  }
6
13
  export {
7
- n as setupMonacoEnvironment
14
+ e as setupMonacoEnvironment
8
15
  };
9
16
  //# sourceMappingURL=setupMonacoEnvironment.mjs.map
@@ -1,15 +1,15 @@
1
- import { defineComponent as t, openBlock as l, createBlock as a, unref as e, withCtx as n, renderSlot as c } from "vue";
2
- import { ElConfigProvider as s } from "element-plus";
3
- import { useMicroGlobalData as i } from "@zl-ui-kit/composables";
4
- const _ = /* @__PURE__ */ t({
1
+ import { defineComponent as r, openBlock as l, createBlock as a, unref as e, withCtx as n, renderSlot as s } from "vue";
2
+ import { ElConfigProvider as c } from "element-plus";
3
+ import { useGlobalData as f } from "@zl-ui-kit/composables";
4
+ const _ = /* @__PURE__ */ r({
5
5
  __name: "index",
6
- setup(f) {
7
- const { elLocaleMessages: o } = i();
8
- return (r, m) => (l(), a(e(s), {
6
+ setup(i) {
7
+ const { elLocaleMessages: o } = f();
8
+ return (t, m) => (l(), a(e(c), {
9
9
  locale: e(o) || void 0
10
10
  }, {
11
11
  default: n(() => [
12
- c(r.$slots, "default")
12
+ s(t.$slots, "default")
13
13
  ]),
14
14
  _: 3
15
15
  }, 8, ["locale"]));
@@ -7,6 +7,8 @@
7
7
  */
8
8
  export { default as ZlEditor } from '../components/ZlEditor/index.vue';
9
9
  export { default as ZlSqlEditor } from '../components/ZlEditor/ZlSqlEditor.vue';
10
+ export { setupMonacoEnvironment } from '../components/ZlEditor/setupMonacoEnvironment';
11
+ export type { GetWorker } from '../components/ZlEditor/setupMonacoEnvironment';
10
12
  export { useSqlCompletion } from '../components/ZlEditor/useSqlCompletion';
11
13
  export type { SqlTableColumn, SqlTableSchema } from '../components/ZlEditor/useSqlCompletion';
12
14
  //# sourceMappingURL=editor.d.ts.map
@@ -1,10 +1,12 @@
1
1
  import { default as e } from "../components/ZlEditor/index.vue.mjs";
2
2
  import '../components/ZlEditor/index.css';/* empty css */
3
- import { default as f } from "../components/ZlEditor/ZlSqlEditor.vue.mjs";
4
- import { useSqlCompletion as p } from "../components/ZlEditor/useSqlCompletion.mjs";
3
+ import { default as m } from "../components/ZlEditor/ZlSqlEditor.vue.mjs";
4
+ import { setupMonacoEnvironment as f } from "../components/ZlEditor/setupMonacoEnvironment.mjs";
5
+ import { useSqlCompletion as i } from "../components/ZlEditor/useSqlCompletion.mjs";
5
6
  export {
6
7
  e as ZlEditor,
7
- f as ZlSqlEditor,
8
- p as useSqlCompletion
8
+ m as ZlSqlEditor,
9
+ f as setupMonacoEnvironment,
10
+ i as useSqlCompletion
9
11
  };
10
12
  //# sourceMappingURL=editor.mjs.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zl-ui-kit/components",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
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/icons": "0.4.0",
43
- "@zl-ui-kit/utils": "0.4.0",
44
- "@zl-ui-kit/composables": "0.4.0"
42
+ "@zl-ui-kit/composables": "0.5.0",
43
+ "@zl-ui-kit/icons": "0.5.0",
44
+ "@zl-ui-kit/utils": "0.5.0"
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/tsconfig": "1.0.0",
102
101
  "@jichuang/eslint-config": "1.0.0",
103
102
  "@jichuang/vite-config": "1.0.0",
104
- "@zl-ui-kit/theme": "0.4.0"
103
+ "@jichuang/tsconfig": "1.0.0",
104
+ "@zl-ui-kit/theme": "0.5.0"
105
105
  },
106
106
  "repository": {
107
107
  "type": "git",