@ezuikit/multi-screen 0.1.0-beta.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/LICENSE +21 -0
- package/README.md +155 -0
- package/dist/constant.js +40 -0
- package/dist/index.js +2535 -0
- package/dist/index.mjs +2518 -0
- package/dist/index.umd.js +4016 -0
- package/dist/style.css +4 -0
- package/dist/style.js +6 -0
- package/dist/types/index.d.ts +1090 -0
- package/package.json +46 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 萤石.开放平台
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
# EZUIKit-MultiScreen
|
|
2
|
+
|
|
3
|
+
一个灵活的分屏布局组件，支持多种分屏模式、自定义布局、主题切换和国际化。
|
|
4
|
+
|
|
5
|
+
[]()
|
|
6
|
+
[]()
|
|
7
|
+
[]()
|
|
8
|
+
|
|
9
|
+
## ✨ 特性
|
|
10
|
+
|
|
11
|
+
- ✅ 支持 1、2、4、6、9、16、25、36、64 分屏模式
|
|
12
|
+
- ✅ 支持自定义分屏布局
|
|
13
|
+
- ✅ 自适应父元素大小
|
|
14
|
+
- ✅ 单个屏幕选中功能
|
|
15
|
+
- ✅ 左上角序号显示
|
|
16
|
+
- ✅ 底部工具栏控制分屏切换
|
|
17
|
+
- ✅ 网页全屏和全局全屏支持
|
|
18
|
+
- ✅ 主题切换（亮色/暗色）
|
|
19
|
+
- ✅ 多语言支持（中文/英文）
|
|
20
|
+
- ✅ 事件回调系统
|
|
21
|
+
|
|
22
|
+
## 🚀 快速开始
|
|
23
|
+
|
|
24
|
+
### 安装依赖
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install @ezuikit/multi-screen
|
|
28
|
+
|
|
29
|
+
# or
|
|
30
|
+
yarn add @ezuikit/multi-screen
|
|
31
|
+
|
|
32
|
+
# or
|
|
33
|
+
pnpm add @ezuikit/multi-screen
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
|
|
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
|
+
## 💡 使用示例
|
|
46
|
+
|
|
47
|
+
### 基础用法
|
|
48
|
+
|
|
49
|
+
```typescript
|
|
50
|
+
import ScreenLayout from 'screen-layout';
|
|
51
|
+
|
|
52
|
+
const layout = new ScreenLayout({
|
|
53
|
+
container: '#app',
|
|
54
|
+
mode: 4, // 分屏模式
|
|
55
|
+
theme: 'dark',
|
|
56
|
+
locale: 'zh'
|
|
57
|
+
});
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### 完整配置
|
|
61
|
+
|
|
62
|
+
```typescript
|
|
63
|
+
const layout = new ScreenLayout({
|
|
64
|
+
container: '#app',
|
|
65
|
+
mode: 4,
|
|
66
|
+
screens: [
|
|
67
|
+
// player options
|
|
68
|
+
],
|
|
69
|
+
theme: 'dark',
|
|
70
|
+
locale: 'zh',
|
|
71
|
+
onScreenClick: (index, screen) => {
|
|
72
|
+
console.log('Screen clicked:', index, screen);
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### 动态操作
|
|
78
|
+
|
|
79
|
+
```typescript
|
|
80
|
+
// 切换模式
|
|
81
|
+
layout.setMode(9);
|
|
82
|
+
|
|
83
|
+
// 自定义布局
|
|
84
|
+
layout.setCustomLayout({ rows: 3, cols: 5, height: '600px' });
|
|
85
|
+
|
|
86
|
+
// 切换主题
|
|
87
|
+
layout.setTheme('light');
|
|
88
|
+
|
|
89
|
+
// 监听事件
|
|
90
|
+
layout.on('screen:click', (index, screen) => {
|
|
91
|
+
console.log('屏幕被点击:', index);
|
|
92
|
+
});
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## 🎨 在线示例
|
|
96
|
+
|
|
97
|
+
启动测试服务器后，访问以下链接查看示例：
|
|
98
|
+
|
|
99
|
+
- [基础示例](http://localhost:3001/examples/basic.html) - 最简单的使用方式
|
|
100
|
+
- [自定义布局](http://localhost:3001/examples/custom-layout.html) - 动态布局切换
|
|
101
|
+
|
|
102
|
+
## 📦 API 概览
|
|
103
|
+
|
|
104
|
+
### 构造函数选项
|
|
105
|
+
|
|
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[]` | `[]` | 自定义插件数组 |
|
|
116
|
+
|
|
117
|
+
### 实例方法
|
|
118
|
+
|
|
119
|
+
- `setMode(mode)` - 设置分屏模式
|
|
120
|
+
- `setCustomLayout(layout)` - 设置自定义布局
|
|
121
|
+
- `setScreens(screens)` - 设置屏幕数据
|
|
122
|
+
- `updateScreen(index, screen)` - 更新单个屏幕
|
|
123
|
+
- `setTheme(theme)` - 设置主题
|
|
124
|
+
- `destroy()` - 销毁实例
|
|
125
|
+
|
|
126
|
+
### 事件
|
|
127
|
+
|
|
128
|
+
- `screen:click` - 屏幕点击事件
|
|
129
|
+
- `mode:change` - 模式切换事件
|
|
130
|
+
- `fullscreen:change` - 全屏切换事件
|
|
131
|
+
- `theme:change` - 主题切换事件
|
|
132
|
+
|
|
133
|
+
详细 API 文档请查看 [docs/API.md](docs/API.md)
|
|
134
|
+
|
|
135
|
+
## 🤝 贡献
|
|
136
|
+
|
|
137
|
+
欢迎提交 Issue 和 Pull Request！
|
|
138
|
+
|
|
139
|
+
## 📄 许可证
|
|
140
|
+
|
|
141
|
+
MIT License
|
|
142
|
+
|
|
143
|
+
## 🔗 相关链接
|
|
144
|
+
|
|
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
|
package/dist/constant.js
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* MultiScreen v0.1.0-beta.1
|
|
3
|
+
* Copyright (c) 2026-03-03 Ezviz-OpenBiz
|
|
4
|
+
* Released under the MIT License.
|
|
5
|
+
*/
|
|
6
|
+
var _EZ_SL_CLASS_PREFIX_ = 'ez-sl';
|
|
7
|
+
var __EZ_SL_OPTIONS__ = {
|
|
8
|
+
// 默认语言
|
|
9
|
+
language: 'zh',
|
|
10
|
+
// 默认主题
|
|
11
|
+
theme: 'dark',
|
|
12
|
+
// 默认分屏模式
|
|
13
|
+
mode: 4,
|
|
14
|
+
// 默认分屏数据
|
|
15
|
+
screens: [],
|
|
16
|
+
scaleMode: 1,
|
|
17
|
+
// 默认分屏配置
|
|
18
|
+
customLayout: null,
|
|
19
|
+
showToolbar: true,
|
|
20
|
+
enableHardwareDecoding: true,
|
|
21
|
+
// 默认分屏点击事件回调
|
|
22
|
+
onScreenClick: function() {},
|
|
23
|
+
// 默认分屏模式切换事件回调
|
|
24
|
+
onModeChange: function() {},
|
|
25
|
+
// 默认全屏状态变化事件回调
|
|
26
|
+
onFullscreenChange: function() {}
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* 缩放模式枚举
|
|
30
|
+
* 0: 窗口铺满
|
|
31
|
+
* 1: 等比缩放大边铺满
|
|
32
|
+
* 2: 等比缩放小边铺满
|
|
33
|
+
*/ var __EZ_SL_SCALE_MODE__ = {
|
|
34
|
+
0: '窗口铺满',
|
|
35
|
+
1: '等比缩放大边铺满',
|
|
36
|
+
2: '等比缩放小边铺满'
|
|
37
|
+
};
|
|
38
|
+
var EVENTS = {};
|
|
39
|
+
|
|
40
|
+
export { EVENTS, _EZ_SL_CLASS_PREFIX_, __EZ_SL_OPTIONS__, __EZ_SL_SCALE_MODE__ };
|