@ezuikit/multi-screen 0.1.0-beta.2 → 0.1.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.
Files changed (8) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +44 -85
  3. package/dist/constant.js +1 -1
  4. package/dist/index.js +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/index.umd.js +1 -1
  7. package/dist/style.js +1 -1
  8. package/package.json +4 -4
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2026 萤石.开放平台
3
+ Copyright (c) 2026 ezviz
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -2,13 +2,11 @@
2
2
 
3
3
  一个灵活的分屏布局组件，支持多种分屏模式、自定义布局、主题切换和国际化。
4
4
 
5
- [![Build Status](https://img.shields.io/badge/build-passing-brightgreen)]()
6
- [![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue)]()
7
- [![License](https://img.shields.io/badge/license-MIT-green)]()
5
+ ![Download](https://img.shields.io/npm/dm/@ezuikit/multi-screen.svg) ![Version](https://img.shields.io/npm/v/@ezuikit/multi-screen.svg) ![License](https://img.shields.io/npm/l/@ezuikit/multi-screen.svg) ![Build Demos](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/workflows/build-demos/badge.svg)
8
6
 
9
7
  ## ✨ 特性
10
8
 
11
- - ✅ 支持 1、2、4、6、9、16、25、36、64 分屏模式
9
+ - ✅ 支持 1、2、4、6、9、16 分屏模式
12
10
  - ✅ 支持自定义分屏布局
13
11
  - ✅ 自适应父元素大小
14
12
  - ✅ 单个屏幕选中功能
@@ -27,110 +25,79 @@
27
25
  npm install @ezuikit/multi-screen
28
26
 
29
27
  # or
30
- yarn add @ezuikit/multi-screen
28
+ yarn add @ezuikit/multi-screen
31
29
 
32
- # or
30
+ # or
33
31
  pnpm add @ezuikit/multi-screen
34
-
35
32
  ```
36
33
 
37
- <!-- ## 📖 文档
38
-
39
- - **[快速开始](QUICKSTART.md)** - 5分钟快速上手
40
- - **[API 文档](docs/API.md)** - 完整的 API 参考
41
- - **[使用指南](docs/GUIDE.md)** - 详细的使用教程
42
- - **[示例代码](examples/README.md)** - 多个实用示例
43
- - **[项目索引](INDEX.md)** - 完整的文档导航 -->
44
-
45
34
  ## 💡 使用示例
46
35
 
47
- ### 基础用法
48
-
49
- ```typescript
50
- import ScreenLayout from 'screen-layout';
36
+ ### 构造函数
51
37
 
52
- const layout = new ScreenLayout({
53
- container: '#app',
54
- mode: 4, // 分屏模式
55
- theme: 'dark',
56
- locale: 'zh'
57
- });
38
+ ```ts
39
+ new MultiScreen(containerID, Player, options);
58
40
  ```
59
41
 
60
- ### 完整配置
42
+ - `containerID: string`：容器元素 `id`（内部使用 `document.getElementById(containerID)`）
43
+ - `Player: new (...args: any[]) => AbstractPlayer`：播放器类构造器
44
+ - `options:` [MultiScreenOptions](./API.md#初始化配置multiscreenoptions)：初始化配置
45
+
46
+ ### 基础用法
61
47
 
62
48
  ```typescript
63
- const layout = new ScreenLayout({
64
- container: '#app',
65
- mode: 4,
49
+ // 引入样式
50
+ import "@ezuikit/multi-screen/dist/style.css";
51
+ // 引入flv样式
52
+ import "ezuikit-flv/style.css";
53
+ import MultiScreen from "@ezuikit/multi-screen";
54
+ // 引入flv
55
+ import EzuikitFlv from "ezuikit-flv";
56
+
57
+ const screens = new MultiScreen("app", EzuikitFlv, {
58
+ mode: 4, // 分屏模式
59
+ theme: "dark",
60
+ language: "zh",
66
61
  screens: [
67
- // player options
62
+ { url: "https://example.com/live1.flv" },
63
+ { url: "https://example.com/live2.flv" },
68
64
  ],
69
- theme: 'dark',
70
- locale: 'zh',
71
- onScreenClick: (index, screen) => {
72
- console.log('Screen clicked:', index, screen);
73
- }
74
65
  });
75
66
  ```
76
67
 
68
+ 完整的用例请参考[with-react-ts/src/App.tsx](./examples/with-react-ts/src/App.tsx)
69
+
77
70
  ### 动态操作
78
71
 
79
72
  ```typescript
80
73
  // 切换模式
81
- layout.setMode(9);
74
+ screens.setMode(9);
82
75
 
83
- // 自定义布局
84
- layout.setCustomLayout({ rows: 3, cols: 5, height: '600px' });
76
+ // 切换自定义布局
77
+ screens.setMode({ rows: 3, cols: 5 });
85
78
 
86
79
  // 切换主题
87
- layout.setTheme('light');
80
+ screens.setTheme("light");
88
81
 
89
82
  // 监听事件
90
- layout.on('screen:click', (index, screen) => {
91
- console.log('屏幕被点击:', index);
83
+ screens.on("screen:click", (index, screen) => {
84
+ console.log("屏幕被点击:", index);
92
85
  });
93
86
  ```
94
87
 
95
- ## 🎨 在线示例
96
-
97
- 启动测试服务器后，访问以下链接查看示例：
98
-
99
- - [基础示例](http://localhost:3001/examples/basic.html) - 最简单的使用方式
100
- - [自定义布局](http://localhost:3001/examples/custom-layout.html) - 动态布局切换
88
+ ## 🎨 examples
101
89
 
102
- ## 📦 API 概览
90
+ ### with-base
103
91
 
104
- ### 构造函数选项
92
+ 原生环境下使用umd demo [with-base/index.html](./examples/with-base/index.html)
105
93
 
106
- | 参数 | 类型 | 默认值 | 说明 |
107
- |------|------|--------|------|
108
- | id | `string` | - | 容器元素id |
109
- | mode | `LayoutMode` | `4` | 分屏模式 |
110
- | customLayout | `CustomLayout` | - | 自定义布局配置 |
111
- | screens | `ScreenItem[]` | `[]` | 屏幕数据数组 |
112
- | theme | `'light' \| 'dark'` | `'dark'` | 主题 |
113
- | locale | `'zh' \| 'en'` | `'zh'` | 语言, 不支持动态切换 |
114
- | showToolbar | `boolean` | `true` | 是否显示工具栏 |
115
- | plugins | `ToolbarPlugin[]` | `[]` | 自定义插件数组 |
94
+ ### with-react-ts
116
95
 
117
- ### 实例方法
96
+ React + TypeScript demo [with-react-ts/src/App.tsx](./examples/with-react-ts/src/App.tsx)
118
97
 
119
- - `setMode(mode)` - 设置分屏模式
120
- - `setCustomLayout(layout)` - 设置自定义布局
121
- - `setScreens(screens)` - 设置屏幕数据
122
- - `updateScreen(index, screen)` - 更新单个屏幕
123
- - `setTheme(theme)` - 设置主题
124
- - `destroy()` - 销毁实例
98
+ ### with-vue-ts
125
99
 
126
- ### 事件
127
-
128
- - `screen:click` - 屏幕点击事件
129
- - `mode:change` - 模式切换事件
130
- - `fullscreen:change` - 全屏切换事件
131
- - `theme:change` - 主题切换事件
132
-
133
- 详细 API 文档请查看 [docs/API.md](docs/API.md)
100
+ Vue2.5 demo [with-vue2.5/src/components/index.vue](./examples/with-vue2.5/src/components/index.vue)
134
101
 
135
102
  ## 🤝 贡献
136
103
 
@@ -142,14 +109,6 @@ MIT License
142
109
 
143
110
  ## 🔗 相关链接
144
111
 
145
- - [项目索引](INDEX.md)
146
- - [快速开始](QUICKSTART.md)
147
- - [API 文档](docs/API.md)
148
- - [使用指南](docs/GUIDE.md)
149
- - [示例代码](examples/README.md)
150
-
151
- ---
152
-
153
- **当前状态**: ✅ 构建成功 | 测试服务器运行中
154
-
155
- **立即体验**: http://localhost:3000
112
+ - [API 文档](./API.md)
113
+ - [示例代码](./examples/README.md)
114
+ - [示例常见问题代码](./FAQ.md)
package/dist/constant.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * MultiScreen v0.1.0-beta.2
2
+ * MultiScreen v0.1.0
3
3
  * Copyright (c) 2026-03-03 Ezviz-OpenBiz
4
4
  * Released under the MIT License.
5
5
  */
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * MultiScreen v0.1.0-beta.2
2
+ * MultiScreen v0.1.0
3
3
  * Copyright (c) 2026-03-03 Ezviz-OpenBiz
4
4
  * Released under the MIT License.
5
5
  */
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * MultiScreen v0.1.0-beta.2
2
+ * MultiScreen v0.1.0
3
3
  * Copyright (c) 2026-03-03 Ezviz-OpenBiz
4
4
  * Released under the MIT License.
5
5
  */
package/dist/index.umd.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * MultiScreen v0.1.0-beta.2
2
+ * MultiScreen v0.1.0
3
3
  * Copyright (c) 2026-03-03 Ezviz-OpenBiz
4
4
  * Released under the MIT License.
5
5
  */
package/dist/style.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * MultiScreen v0.1.0-beta.2
2
+ * MultiScreen v0.1.0
3
3
  * Copyright (c) 2026-03-03 Ezviz-OpenBiz
4
4
  * Released under the MIT License.
5
5
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ezuikit/multi-screen",
3
- "version": "0.1.0-beta.2",
3
+ "version": "0.1.0",
4
4
  "description": "A flexible screen layout component with multi-screen support",
5
5
  "title": "Multi Screen",
6
6
  "main": "dist/index.js",
@@ -24,12 +24,12 @@
24
24
  "dependencies": {
25
25
  "@ezuikit/player-theme": "^2.1.2-beta.1",
26
26
  "@ezuikit/utils-i18n": "^2.0.1",
27
+ "@skax/camel": "^0.2.8",
28
+ "@skax/delegate": "^4.0.2",
27
29
  "@skax/picker": "^1.1.8",
28
30
  "deepmerge": "^4.3.1",
29
31
  "eventemitter3": "^5.0.4",
30
- "screenfull": "5.2.0",
31
- "@skax/delegate": "^4.0.2",
32
- "@skax/camel": "^0.2.8"
32
+ "screenfull": "5.2.0"
33
33
  },
34
34
  "publishConfig": {
35
35
  "access": "public",