mixdashboards 1.1.129 → 1.1.131

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.
Files changed (6) hide show
  1. package/README.md +225 -225
  2. package/dist/{index-Dcgio-ip.js → index-B3wK8DMJ.js} +34690 -34284
  3. package/dist/{lerc-DdKzIxEo.js → lerc-Bd-3Q_GY.js} +1 -1
  4. package/dist/mixdashboards.css +1 -1
  5. package/dist/mixdashboards.js +1 -1
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  > MixIoT 显示板组件库 — 支持显示屏（Show）、大屏（Pro）、移动端（App）三种展示模式
4
4
 
5
- 当前版本：**1.1.112**
5
+ 当前版本：**1.1.112**
6
6
 
7
7
  ## 在 Monorepo 中的定位
8
8
 
@@ -83,46 +83,46 @@ pnpm build
83
83
 
84
84
  独立项目可通过 npm 安装已发布的包：
85
85
 
86
- ```bash
87
- pnpm add mixdashboards vue-i18n@11.2.7
88
- # 或
89
- npm install mixdashboards vue-i18n@11.2.7
90
- ```
91
-
92
- `vue-i18n` 是包的 peer dependency。宿主只负责提供当前 locale，组件内置的
93
- `button`、`fields`、`message`、`tabs` 词典由 `mixdashboards` 自己维护，不需要也不应合并到宿主 messages。
86
+ ```bash
87
+ pnpm add mixdashboards vue-i18n@11.2.7
88
+ # 或
89
+ npm install mixdashboards vue-i18n@11.2.7
90
+ ```
91
+
92
+ `vue-i18n` 是包的 peer dependency。宿主只负责提供当前 locale，组件内置的
93
+ `button`、`fields`、`message`、`tabs` 词典由 `mixdashboards` 自己维护，不需要也不应合并到宿主 messages。
94
94
 
95
95
  #### 全局注册
96
96
 
97
97
  ```javascript
98
- import { createApp } from 'vue'
99
- import { createPinia } from 'pinia'
100
- import { createI18n } from 'vue-i18n'
101
- import ElementPlus from 'element-plus'
102
- import MixDashboards from 'mixdashboards'
98
+ import { createApp } from 'vue'
99
+ import { createPinia } from 'pinia'
100
+ import { createI18n } from 'vue-i18n'
101
+ import ElementPlus from 'element-plus'
102
+ import MixDashboards from 'mixdashboards'
103
103
  import 'element-plus/dist/index.css'
104
104
  import 'mixdashboards/style'
105
105
 
106
- const app = createApp(App)
107
- const i18n = createI18n({
108
- legacy: false,
109
- locale: 'zh-CN',
110
- fallbackLocale: 'en',
111
- messages: {
112
- 'zh-CN': {},
113
- en: {}
114
- }
115
- })
116
-
117
- app.use(createPinia())
118
- app.use(ElementPlus)
119
- app.use(i18n)
120
- app.use(MixDashboards)
121
- app.mount('#app')
122
- ```
123
-
124
- 切换 `i18n.global.locale.value` 后，组件内置文案会跟随更新；宿主同名 key 不会覆盖包内词条。
125
- 未配置 i18n provider 时组件仍可渲染，但内置文案固定回退为中文。
106
+ const app = createApp(App)
107
+ const i18n = createI18n({
108
+ legacy: false,
109
+ locale: 'zh-CN',
110
+ fallbackLocale: 'en',
111
+ messages: {
112
+ 'zh-CN': {},
113
+ en: {}
114
+ }
115
+ })
116
+
117
+ app.use(createPinia())
118
+ app.use(ElementPlus)
119
+ app.use(i18n)
120
+ app.use(MixDashboards)
121
+ app.mount('#app')
122
+ ```
123
+
124
+ 切换 `i18n.global.locale.value` 后，组件内置文案会跟随更新；宿主同名 key 不会覆盖包内词条。
125
+ 未配置 i18n provider 时组件仍可渲染，但内置文案固定回退为中文。
126
126
 
127
127
  #### 按需引入
128
128
 
@@ -131,196 +131,196 @@ import { DesignShow, DesignPro, DesignApp } from 'mixdashboards'
131
131
  import 'mixdashboards/style'
132
132
  ```
133
133
 
134
- ## 组件使用示例
135
-
136
- `script` 是设计器发布的完整脚本对象，也可以是宿主接口返回的脚本数据。三个入口都需要一个有明确高度的宿主容器。
137
-
138
- | 组件 | 适用场景 | 脚本类型 |
139
- |------|----------|----------|
140
- | `DesignShow` | 大屏、指挥屏、不需要应用菜单的展示页 | 单个 Show 显示板 |
141
- | `DesignPro` | PC 显示板，或需要显式启用 Pro 应用壳 | 单个 Pro 显示板 / Pro 应用整包 |
142
- | `DesignApp` | 移动显示板或由组件自动识别的应用整包 | 单个 App 显示板 / Pro 应用整包 |
143
-
144
- ### DesignShow
145
-
146
- 用于渲染单个 Show 显示板。`ready` 会在全局加载结束且首帧画布绘制完成后触发。
147
-
148
- ```vue
149
- <template>
150
- <div class="dashboard-host">
151
- <DesignShow
152
- :script="showScript"
153
- uid="show-instance-001"
154
- mixiot-dashboard-uid="dashboard-001"
155
- :enable-web-socket="true"
156
- :follow-host-theme="true"
157
- :is-product="true"
158
- @ready="handleReady"
159
- />
160
- </div>
161
- </template>
162
-
163
- <script setup lang="ts">
164
- import { DesignShow } from 'mixdashboards'
165
- import 'mixdashboards/style'
166
- import showScript from './show-script.json'
167
-
168
- function handleReady() {
169
- console.log('Show 显示板已完成首帧绘制')
170
- }
171
- </script>
172
-
173
- <style scoped>
174
- .dashboard-host {
175
- width: 100%;
176
- height: 100vh;
177
- overflow: hidden;
178
- }
179
- </style>
180
- ```
181
-
182
- ### DesignPro
183
-
184
- 用于渲染单个 PC Pro 显示板。组件对外暴露 `switchSheetByPageKey(pageKey)`，可按 Sheet 的 `id`、`name` 或 `caption` 切换页面；成功返回 Sheet 下标，未找到返回 `-1`。
185
-
186
- ```vue
187
- <template>
188
- <div class="dashboard-host">
189
- <DesignPro
190
- ref="designProRef"
191
- :script="proScript"
192
- uid="pro-instance-001"
193
- :enable-web-socket="true"
194
- :follow-host-theme="true"
195
- :is-product="true"
196
- @ready="handleReady"
197
- />
198
- </div>
199
- </template>
200
-
201
- <script setup lang="ts">
202
- import { ref } from 'vue'
203
- import { DesignPro } from 'mixdashboards'
204
- import 'mixdashboards/style'
205
- import proScript from './pro-script.json'
206
-
207
- type DesignProInstance = {
208
- switchSheetByPageKey: (pageKey: string) => number
209
- }
210
-
211
- const designProRef = ref<DesignProInstance | null>(null)
212
-
213
- function handleReady() {
214
- // 可以传 Sheet 的 id、name 或 caption
215
- designProRef.value?.switchSheetByPageKey('总览')
216
- }
217
- </script>
218
-
219
- <style scoped>
220
- .dashboard-host {
221
- width: 100%;
222
- height: 100vh;
223
- overflow: hidden;
224
- }
225
- </style>
226
- ```
227
-
228
- 如果 `script` 是包含 `pro.menu` 和多个显示板映射的 Pro 应用整包，可显式启用应用壳：
229
-
230
- ```vue
231
- <DesignPro
232
- :script="proApplicationScript"
233
- pro-shell
234
- :mobile-shell="null"
235
- @ready="handleReady"
236
- />
237
- ```
238
-
239
- `pro-shell` 模式下由应用壳管理菜单、Tab 和显示板切换，不使用 `switchSheetByPageKey()` 切换应用菜单。
240
-
241
- ### DesignApp
242
-
243
- `DesignApp` 是应用级自适应入口：传入单个移动显示板时直接渲染移动画布；传入 Pro 应用整包时，会自动切换到 Pro 应用壳，无需由宿主判断脚本类型。
244
-
245
- 以下示例演示将单个移动显示板嵌入宿主页面：
246
-
247
- ```vue
248
- <template>
249
- <div class="app-host">
250
- <DesignApp
251
- :script="appScript"
252
- uid="app-instance-001"
253
- :enable-web-socket="true"
254
- :follow-host-theme="true"
255
- :is-product="true"
256
- :mobile-embed="true"
257
- @ready="handleReady"
258
- >
259
- <template #placeholder="{ placeholderName }">
260
- <div class="custom-placeholder">
261
- {{ placeholderName }}
262
- </div>
263
- </template>
264
- </DesignApp>
265
- </div>
266
- </template>
267
-
268
- <script setup lang="ts">
269
- import { DesignApp } from 'mixdashboards'
270
- import 'mixdashboards/style'
271
- import appScript from './app-script.json'
272
-
273
- function handleReady() {
274
- console.log('App 画布已就绪')
275
- }
276
- </script>
277
-
278
- <style scoped>
279
- .app-host {
280
- width: 100%;
281
- height: 100vh;
282
- overflow: hidden;
283
- }
284
-
285
- .custom-placeholder {
286
- display: grid;
287
- width: 100%;
288
- height: 100%;
289
- place-items: center;
290
- }
291
- </style>
292
- ```
293
-
294
- `mobile-embed` 仅影响单个移动显示板：为 `true` 时画布铺满宿主容器；为 `false` 时使用独立移动预览宽度。
295
-
296
- ### Props 与事件
297
-
298
- 三个组件共用以下参数：
299
-
300
- | 属性 | 类型 | 默认值 | 说明 |
301
- |------|------|--------|------|
302
- | `script` | `any` | — | 设计器发布的完整脚本，必填 |
303
- | `uid` | `string` | — | 当前运行实例/显示板标识 |
304
- | `mixiotDashboardUid` | `string` | — | MixIoT 显示板脚本 UID |
305
- | `enableWebSocket` | `boolean` | `true` | 是否启用实时数据连接 |
306
- | `followHostTheme` | `boolean` | `false` | 是否跟随宿主深浅色主题，不改写 `document` 根主题 |
307
- | `isProduct` | `boolean` | `true` | 生产模式下，未绑定数据源的图表不使用随机模拟数据 |
308
- | `agent` | `string` | `''` | 嵌入代理服务标识 |
309
- | `@ready` | `() => void` | — | 全局 loading 结束且首帧绘制完成 |
310
-
311
- 组件特有参数：
312
-
313
- | 组件 | 属性 | 说明 |
314
- |------|------|------|
315
- | `DesignShow` | `releaseEmbedAgentOnUnmount` | 卸载时是否释放嵌入代理状态，默认 `true` |
316
- | `DesignPro` | `hostProMenuTitle` | 按宿主菜单名定位初始 Sheet |
317
- | `DesignPro` | `hostMenuToSheetRules` | 显式配置宿主菜单名与 Sheet 名称的对应关系 |
318
- | `DesignPro` | `proShell` | 启用 Pro 应用菜单、Tab 和多显示板应用壳 |
319
- | `DesignPro` | `mobileShell` | 强制移动应用壳；传 `null` 时根据脚本自动判断 |
320
- | `DesignApp` | `mobileEmbed` | 单个移动显示板是否铺满宿主容器，默认 `false` |
321
- | `DesignApp` | `releaseEmbedAgentOnUnmount` | 卸载时是否释放嵌入代理状态，默认 `true` |
322
-
323
- ## 运行时 API
134
+ ## 组件使用示例
135
+
136
+ `script` 是设计器发布的完整脚本对象，也可以是宿主接口返回的脚本数据。三个入口都需要一个有明确高度的宿主容器。
137
+
138
+ | 组件 | 适用场景 | 脚本类型 |
139
+ |------|----------|----------|
140
+ | `DesignShow` | 大屏、指挥屏、不需要应用菜单的展示页 | 单个 Show 显示板 |
141
+ | `DesignPro` | PC 显示板，或需要显式启用 Pro 应用壳 | 单个 Pro 显示板 / Pro 应用整包 |
142
+ | `DesignApp` | 移动显示板或由组件自动识别的应用整包 | 单个 App 显示板 / Pro 应用整包 |
143
+
144
+ ### DesignShow
145
+
146
+ 用于渲染单个 Show 显示板。`ready` 会在全局加载结束且首帧画布绘制完成后触发。
147
+
148
+ ```vue
149
+ <template>
150
+ <div class="dashboard-host">
151
+ <DesignShow
152
+ :script="showScript"
153
+ uid="show-instance-001"
154
+ mixiot-dashboard-uid="dashboard-001"
155
+ :enable-web-socket="true"
156
+ :follow-host-theme="true"
157
+ :is-product="true"
158
+ @ready="handleReady"
159
+ />
160
+ </div>
161
+ </template>
162
+
163
+ <script setup lang="ts">
164
+ import { DesignShow } from 'mixdashboards'
165
+ import 'mixdashboards/style'
166
+ import showScript from './show-script.json'
167
+
168
+ function handleReady() {
169
+ console.log('Show 显示板已完成首帧绘制')
170
+ }
171
+ </script>
172
+
173
+ <style scoped>
174
+ .dashboard-host {
175
+ width: 100%;
176
+ height: 100vh;
177
+ overflow: hidden;
178
+ }
179
+ </style>
180
+ ```
181
+
182
+ ### DesignPro
183
+
184
+ 用于渲染单个 PC Pro 显示板。组件对外暴露 `switchSheetByPageKey(pageKey)`，可按 Sheet 的 `id`、`name` 或 `caption` 切换页面；成功返回 Sheet 下标，未找到返回 `-1`。
185
+
186
+ ```vue
187
+ <template>
188
+ <div class="dashboard-host">
189
+ <DesignPro
190
+ ref="designProRef"
191
+ :script="proScript"
192
+ uid="pro-instance-001"
193
+ :enable-web-socket="true"
194
+ :follow-host-theme="true"
195
+ :is-product="true"
196
+ @ready="handleReady"
197
+ />
198
+ </div>
199
+ </template>
200
+
201
+ <script setup lang="ts">
202
+ import { ref } from 'vue'
203
+ import { DesignPro } from 'mixdashboards'
204
+ import 'mixdashboards/style'
205
+ import proScript from './pro-script.json'
206
+
207
+ type DesignProInstance = {
208
+ switchSheetByPageKey: (pageKey: string) => number
209
+ }
210
+
211
+ const designProRef = ref<DesignProInstance | null>(null)
212
+
213
+ function handleReady() {
214
+ // 可以传 Sheet 的 id、name 或 caption
215
+ designProRef.value?.switchSheetByPageKey('总览')
216
+ }
217
+ </script>
218
+
219
+ <style scoped>
220
+ .dashboard-host {
221
+ width: 100%;
222
+ height: 100vh;
223
+ overflow: hidden;
224
+ }
225
+ </style>
226
+ ```
227
+
228
+ 如果 `script` 是包含 `pro.menu` 和多个显示板映射的 Pro 应用整包，可显式启用应用壳：
229
+
230
+ ```vue
231
+ <DesignPro
232
+ :script="proApplicationScript"
233
+ pro-shell
234
+ :mobile-shell="null"
235
+ @ready="handleReady"
236
+ />
237
+ ```
238
+
239
+ `pro-shell` 模式下由应用壳管理菜单、Tab 和显示板切换，不使用 `switchSheetByPageKey()` 切换应用菜单。
240
+
241
+ ### DesignApp
242
+
243
+ `DesignApp` 是应用级自适应入口：传入单个移动显示板时直接渲染移动画布；传入 Pro 应用整包时，会自动切换到 Pro 应用壳，无需由宿主判断脚本类型。
244
+
245
+ 以下示例演示将单个移动显示板嵌入宿主页面：
246
+
247
+ ```vue
248
+ <template>
249
+ <div class="app-host">
250
+ <DesignApp
251
+ :script="appScript"
252
+ uid="app-instance-001"
253
+ :enable-web-socket="true"
254
+ :follow-host-theme="true"
255
+ :is-product="true"
256
+ :mobile-embed="true"
257
+ @ready="handleReady"
258
+ >
259
+ <template #placeholder="{ placeholderName }">
260
+ <div class="custom-placeholder">
261
+ {{ placeholderName }}
262
+ </div>
263
+ </template>
264
+ </DesignApp>
265
+ </div>
266
+ </template>
267
+
268
+ <script setup lang="ts">
269
+ import { DesignApp } from 'mixdashboards'
270
+ import 'mixdashboards/style'
271
+ import appScript from './app-script.json'
272
+
273
+ function handleReady() {
274
+ console.log('App 画布已就绪')
275
+ }
276
+ </script>
277
+
278
+ <style scoped>
279
+ .app-host {
280
+ width: 100%;
281
+ height: 100vh;
282
+ overflow: hidden;
283
+ }
284
+
285
+ .custom-placeholder {
286
+ display: grid;
287
+ width: 100%;
288
+ height: 100%;
289
+ place-items: center;
290
+ }
291
+ </style>
292
+ ```
293
+
294
+ `mobile-embed` 仅影响单个移动显示板：为 `true` 时画布铺满宿主容器；为 `false` 时使用独立移动预览宽度。
295
+
296
+ ### Props 与事件
297
+
298
+ 三个组件共用以下参数：
299
+
300
+ | 属性 | 类型 | 默认值 | 说明 |
301
+ |------|------|--------|------|
302
+ | `script` | `any` | — | 设计器发布的完整脚本，必填 |
303
+ | `uid` | `string` | — | 当前运行实例/显示板标识 |
304
+ | `mixiotDashboardUid` | `string` | — | MixIoT 显示板脚本 UID |
305
+ | `enableWebSocket` | `boolean` | `true` | 是否启用实时数据连接 |
306
+ | `followHostTheme` | `boolean` | `false` | 是否跟随宿主深浅色主题，不改写 `document` 根主题 |
307
+ | `isProduct` | `boolean` | `true` | 生产模式下，未绑定数据源的图表不使用随机模拟数据 |
308
+ | `agent` | `string` | `''` | 嵌入代理服务标识 |
309
+ | `@ready` | `() => void` | — | 全局 loading 结束且首帧绘制完成 |
310
+
311
+ 组件特有参数：
312
+
313
+ | 组件 | 属性 | 说明 |
314
+ |------|------|------|
315
+ | `DesignShow` | `releaseEmbedAgentOnUnmount` | 卸载时是否释放嵌入代理状态，默认 `true` |
316
+ | `DesignPro` | `hostProMenuTitle` | 按宿主菜单名定位初始 Sheet |
317
+ | `DesignPro` | `hostMenuToSheetRules` | 显式配置宿主菜单名与 Sheet 名称的对应关系 |
318
+ | `DesignPro` | `proShell` | 启用 Pro 应用菜单、Tab 和多显示板应用壳 |
319
+ | `DesignPro` | `mobileShell` | 强制移动应用壳；传 `null` 时根据脚本自动判断 |
320
+ | `DesignApp` | `mobileEmbed` | 单个移动显示板是否铺满宿主容器，默认 `false` |
321
+ | `DesignApp` | `releaseEmbedAgentOnUnmount` | 卸载时是否释放嵌入代理状态，默认 `true` |
322
+
323
+ ## 运行时 API
324
324
 
325
325
  组件挂载后，可通过全局对象 `window.MixDashboard` 控制显示板：
326
326
 
@@ -346,7 +346,7 @@ dashboard.publish('sensor-data', { temperature: 25.5 })
346
346
  dashboard.subscribe('sensor-data', (data) => console.log(data))
347
347
  ```
348
348
 
349
- ### 鉴权配置
349
+ ### 鉴权配置
350
350
 
351
351
  ```javascript
352
352
  import { configureAuth, getAuthToken, getWsUrl } from 'mixdashboards'