oipage 1.4.1 → 1.5.0-alpha.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/CHANGELOG +11 -1
- package/bin/WebSocket/decodeWsFrame.js +43 -0
- package/bin/WebSocket/encodeWsFrame.js +28 -0
- package/bin/WebSocket/headersToJSON.js +26 -0
- package/bin/WebSocket/index.js +80 -0
- package/bin/intercept.js +2 -2
- package/bin/serve.js +14 -10
- package/bin/template/404.html +5 -2
- package/bin/website-htmls/images/chart.png +0 -0
- package/bin/website-htmls/images/image-editor.png +0 -0
- package/bin/website-htmls/images/mosaic.png +0 -0
- package/bin/website-htmls/index.html +1 -1
- package/bin/website-htmls/main.js +2 -0
- package/bin/website-htmls/pages/App/index.html +4 -1
- package/bin/website-htmls/pages/App/index.scss +6 -5
- package/bin/website-htmls/pages/appStore/index.html +19 -6
- package/bin/website-htmls/pages/appStore/index.js +3 -1
- package/bin/website-htmls/pages/appStore/index.scss +38 -23
- package/bin/website-htmls/pages/chart/index.html +9 -0
- package/bin/website-htmls/pages/chart/index.js +73 -0
- package/bin/website-htmls/pages/chart/index.scss +73 -0
- package/bin/website-htmls/pages/image-editor/index.html +19 -0
- package/bin/website-htmls/pages/image-editor/index.js +20 -0
- package/bin/website-htmls/pages/image-editor/index.scss +32 -0
- package/bin/website-htmls/router.config.js +6 -0
- package/bin/website-htmls/styles/common.css +0 -3
- package/bin/website-plugins/intercept/chart.js +34 -0
- package/bin/website-plugins/intercept/head.js +1 -1
- package/bin/website-plugins/intercept/index.js +3 -1
- package/bin/website-plugins/intercept/oipage-zipaper-intercept.js +1 -1
- package/nodejs/animation/index.js +1 -1
- package/nodejs/cmdlog/index.js +1 -1
- package/nodejs/disk/index.js +1 -1
- package/nodejs/format/index.js +1 -1
- package/nodejs/json/index.js +1 -1
- package/nodejs/logform/index.js +1 -1
- package/nodejs/reader/index.js +1 -1
- package/nodejs/throttle/index.js +1 -1
- package/package.json +1 -1
- package/web/XMLHttpRequest/index.js +1 -1
- package/web/animation/index.js +1 -1
- package/web/format/index.js +1 -1
- package/web/json/index.js +1 -1
- package/web/onReady/index.js +1 -1
- package/web/performChunk/index.js +1 -1
- package/web/reader/index.js +1 -1
- package/web/style/index.js +1 -1
- package/web/throttle/index.js +1 -1
- /package/bin/website-htmls/{logo.png → images/logo.png} +0 -0
package/CHANGELOG
CHANGED
|
@@ -96,4 +96,14 @@ v1.4.1:
|
|
|
96
96
|
date:2025-09-02
|
|
97
97
|
changes:
|
|
98
98
|
- 修复bug
|
|
99
|
-
1、修复开发服务器大文件丢失文件大小问题
|
|
99
|
+
1、修复开发服务器大文件丢失文件大小问题
|
|
100
|
+
v1.5.0:
|
|
101
|
+
date:
|
|
102
|
+
changes:
|
|
103
|
+
- 修复bug
|
|
104
|
+
1、修复404网站在手机浏览器显示高问题
|
|
105
|
+
2、服务器响应类型由 Content-type 改为 Content-Type
|
|
106
|
+
- 新增功能
|
|
107
|
+
1、开发服务器 / 应用市场
|
|
108
|
+
* 聊天工具
|
|
109
|
+
* 图片编辑器
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
|
|
2
|
+
// 处理收到的数据
|
|
3
|
+
module.exports = function decodeWsFrame(data) {
|
|
4
|
+
let start = 0;
|
|
5
|
+
let frame = {
|
|
6
|
+
isFinal: (data[start] & 0x80) === 0x80,
|
|
7
|
+
opcode: data[start++] & 0xF,
|
|
8
|
+
masked: (data[start] & 0x80) === 0x80,
|
|
9
|
+
payloadLen: data[start++] & 0x7F,
|
|
10
|
+
maskingKey: '',
|
|
11
|
+
payloadData: null
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
if (frame.payloadLen === 126) {
|
|
15
|
+
frame.payloadLen = (data[start++] << 8) + data[start++];
|
|
16
|
+
} else if (frame.payloadLen === 127) {
|
|
17
|
+
frame.payloadLen = 0;
|
|
18
|
+
for (let i = 7; i >= 0; --i) {
|
|
19
|
+
frame.payloadLen += (data[start++] << (i * 8));
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
if (frame.payloadLen) {
|
|
24
|
+
if (frame.masked) {
|
|
25
|
+
const maskingKey = [
|
|
26
|
+
data[start++],
|
|
27
|
+
data[start++],
|
|
28
|
+
data[start++],
|
|
29
|
+
data[start++]
|
|
30
|
+
];
|
|
31
|
+
|
|
32
|
+
frame.maskingKey = maskingKey;
|
|
33
|
+
|
|
34
|
+
frame.payloadData = data
|
|
35
|
+
.slice(start, start + frame.payloadLen)
|
|
36
|
+
.map((byte, idx) => byte ^ maskingKey[idx % 4]);
|
|
37
|
+
} else {
|
|
38
|
+
frame.payloadData = data.slice(start, start + frame.payloadLen);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
return frame;
|
|
43
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
|
|
2
|
+
// 处理发出的数据
|
|
3
|
+
module.exports = function encodeWsFrame(data) {
|
|
4
|
+
const isFinal = data.isFinal !== undefined ? data.isFinal : true,
|
|
5
|
+
opcode = data.opcode !== undefined ? data.opcode : 1,
|
|
6
|
+
payloadData = data.payloadData ? Buffer.from(data.payloadData) : null,
|
|
7
|
+
payloadLen = payloadData ? payloadData.length : 0;
|
|
8
|
+
|
|
9
|
+
let frame = [];
|
|
10
|
+
|
|
11
|
+
if (isFinal) frame.push((1 << 7) + opcode);
|
|
12
|
+
else frame.push(opcode);
|
|
13
|
+
|
|
14
|
+
if (payloadLen < 126) {
|
|
15
|
+
frame.push(payloadLen);
|
|
16
|
+
} else if (payloadLen < 65536) {
|
|
17
|
+
frame.push(126, payloadLen >> 8, payloadLen & 0xFF);
|
|
18
|
+
} else {
|
|
19
|
+
frame.push(127);
|
|
20
|
+
for (let i = 7; i >= 0; --i) {
|
|
21
|
+
frame.push((payloadLen & (0xFF << (i * 8))) >> (i * 8));
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
frame = payloadData ? Buffer.concat([Buffer.from(frame), payloadData]) : Buffer.from(frame);
|
|
26
|
+
|
|
27
|
+
return frame;
|
|
28
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
module.exports = function (headersStr) {
|
|
2
|
+
|
|
3
|
+
let headersArray = headersStr.split(/\r{0,1}\n/);
|
|
4
|
+
let headersJSON = {};
|
|
5
|
+
|
|
6
|
+
// 第一行的内容:GET / HTTP/1.1
|
|
7
|
+
let firstLine = headersArray.shift().split(' ');
|
|
8
|
+
headersJSON.method = firstLine[0];
|
|
9
|
+
headersJSON.url = firstLine[1];
|
|
10
|
+
headersJSON.protocol = firstLine[2];
|
|
11
|
+
|
|
12
|
+
for (let item of headersArray) {
|
|
13
|
+
let temp = item.split(':');
|
|
14
|
+
|
|
15
|
+
if (temp.length > 1) {
|
|
16
|
+
|
|
17
|
+
let key = temp.shift();
|
|
18
|
+
let value = temp.join(':');
|
|
19
|
+
|
|
20
|
+
headersJSON[key] = value.trim();
|
|
21
|
+
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
return headersJSON;
|
|
26
|
+
};
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
const net = require('net');
|
|
2
|
+
const crypto = require('crypto');
|
|
3
|
+
|
|
4
|
+
const headersToJSON = require('./headersToJSON');
|
|
5
|
+
const decodeWsFrame = require('./decodeWsFrame');
|
|
6
|
+
const encodeWsFrame = require('./encodeWsFrame');
|
|
7
|
+
|
|
8
|
+
module.exports = function (port, name, version) {
|
|
9
|
+
let sockets = [];
|
|
10
|
+
|
|
11
|
+
let handler = {
|
|
12
|
+
notifyBrowser: (msg) => {
|
|
13
|
+
for (let socket of sockets) {
|
|
14
|
+
socket.write(encodeWsFrame(msg));
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const server = net.createServer(socket => {
|
|
20
|
+
|
|
21
|
+
// 错误
|
|
22
|
+
socket.on('error', (error) => {
|
|
23
|
+
console.log('Connection error:', error.message);
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
// 数据
|
|
27
|
+
socket.on('data', buffer => {
|
|
28
|
+
console.log('Connection data:' + (decodeWsFrame(buffer).payloadData?.toString() || "断开连接......"));
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
// 连接
|
|
32
|
+
socket.once('data', buffer => {
|
|
33
|
+
|
|
34
|
+
// 把请求头变成容易操作的json
|
|
35
|
+
const headers = headersToJSON(buffer.toString());
|
|
36
|
+
|
|
37
|
+
// 如果是ws请求
|
|
38
|
+
// 就需要建立连接
|
|
39
|
+
if (headers.Upgrade == 'websocket') {
|
|
40
|
+
|
|
41
|
+
if (headers['Sec-WebSocket-Version'] !== '13') {
|
|
42
|
+
console.log('\r\n警告:当前WebSocket版本为' + headers['Sec-WebSocket-Version'] + ",可能存在兼容问题~\r\n");
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// 开始连接
|
|
46
|
+
/*
|
|
47
|
+
协议中规定的校验用GUID,可参考如下链接:
|
|
48
|
+
https://tools.ietf.org/html/rfc6455#section-5.5.2
|
|
49
|
+
https://stackoverflow.com/questions/13456017/what-does-258eafa5-e914-47da-95ca-c5ab0dc85b11-means-in-websocket-protocol
|
|
50
|
+
*/
|
|
51
|
+
const GUID = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11';
|
|
52
|
+
const key = headers['Sec-WebSocket-Key'];
|
|
53
|
+
const hash = crypto.createHash('sha1'); // 创建一个签名算法为sha1的哈希对象
|
|
54
|
+
|
|
55
|
+
hash.update(`${key}${GUID}`); // 将key和GUID连接后,更新到hash
|
|
56
|
+
const result = hash.digest('base64'); // 生成base64字符串
|
|
57
|
+
const header = `HTTP/1.1 101 Switching Protocols\r\nServer: Powered by ${name}@${version}\r\nUpgrade: websocket\r\nConnection: Upgrade\r\nSec-Websocket-Accept: ${result}\r\n\r\n`; // 生成供前端校验用的请求头
|
|
58
|
+
|
|
59
|
+
socket.write(header); // 返回HTTP头,告知客户端校验结果,HTTP状态码101表示切换协议:https://httpstatuses.com/101。
|
|
60
|
+
// 若客户端校验结果正确,在控制台的Network模块可以看到HTTP请求的状态码变为101 Switching Protocols,同时客户端的ws.onopen事件被触发。
|
|
61
|
+
|
|
62
|
+
sockets.push(socket);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// 否则就普通的,
|
|
66
|
+
// 普通的由http服务器提供支持
|
|
67
|
+
else {
|
|
68
|
+
socket.end();
|
|
69
|
+
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
// 启动
|
|
75
|
+
server.listen(port);
|
|
76
|
+
|
|
77
|
+
console.log('<i> \x1b[1m\x1b[32m[' + name + '] Loopback: \x1b[36mws://localhost:' + port + '/\x1b[0m\n');
|
|
78
|
+
|
|
79
|
+
return handler;
|
|
80
|
+
};
|
package/bin/intercept.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
exports.doIntercept = function (url, intercept, request, response) {
|
|
1
|
+
exports.doIntercept = function (url, intercept, request, response, wsHandler) {
|
|
2
2
|
for (let item of intercept) {
|
|
3
3
|
if (item.test.test(url)) {
|
|
4
|
-
item.handler(request, response);
|
|
4
|
+
item.handler(request, response, wsHandler);
|
|
5
5
|
return true;
|
|
6
6
|
}
|
|
7
7
|
}
|
package/bin/serve.js
CHANGED
|
@@ -8,8 +8,10 @@ const resolve404 = require("./tools/resolve404.js");
|
|
|
8
8
|
const resolveImportFactory = require("./tools/resolveImport.js");
|
|
9
9
|
const { doIntercept } = require("./intercept.js");
|
|
10
10
|
|
|
11
|
-
const
|
|
12
|
-
const
|
|
11
|
+
const websiteIntercept = require("./website-plugins/intercept/index.js");
|
|
12
|
+
const websiteLoader = require("./website-plugins/loader/index.js");
|
|
13
|
+
|
|
14
|
+
const WebSocketClass = require("./WebSocket/index.js");
|
|
13
15
|
|
|
14
16
|
// 开发服务器
|
|
15
17
|
module.exports = function (config) {
|
|
@@ -19,9 +21,11 @@ module.exports = function (config) {
|
|
|
19
21
|
const port = config.devServer.port; // 端口号
|
|
20
22
|
const basePath = (/^\./.test(config.devServer.baseUrl)) ? join(process.cwd(), config.devServer.baseUrl) : config.devServer.baseUrl; // 服务器根路径
|
|
21
23
|
|
|
22
|
-
const name = (config.name || "OIPage") + "-
|
|
24
|
+
const name = (config.name || "OIPage") + "-dev-server";
|
|
23
25
|
const version = config.version || packageValue.version;
|
|
24
26
|
|
|
27
|
+
const wsHandler = WebSocketClass(port + 1, (config.name || "OIPage") + "-dev-websocket", version);
|
|
28
|
+
|
|
25
29
|
let Server = createServer(function (request, response) {
|
|
26
30
|
let headers = request.headers;
|
|
27
31
|
let url = decodeURIComponent(request.url);
|
|
@@ -40,7 +44,7 @@ module.exports = function (config) {
|
|
|
40
44
|
}
|
|
41
45
|
|
|
42
46
|
// 请求拦截
|
|
43
|
-
if (doIntercept(url.replace(/^\/_oipage_website_/, "").replace(/^\/@modules\//, ""), isWebsite ?
|
|
47
|
+
if (doIntercept(url.replace(/^\/_oipage_website_/, "").replace(/^\/@modules\//, ""), isWebsite ? websiteIntercept : config.devServer.intercept, request, response, wsHandler)) {
|
|
44
48
|
console.log("<i> \x1b[1m\x1b[32m[" + name + "] intercept: " + url + '\x1b[0m ' + new Date().toLocaleString());
|
|
45
49
|
}
|
|
46
50
|
|
|
@@ -54,7 +58,7 @@ module.exports = function (config) {
|
|
|
54
58
|
let fileModifiedTime = new Date(fileInfo.mtime).toGMTString();
|
|
55
59
|
|
|
56
60
|
let responseHeader = {
|
|
57
|
-
'Content-
|
|
61
|
+
'Content-Type': (fileType || "text/plain") + ";charset=utf-8",
|
|
58
62
|
'Access-Control-Allow-Origin': '*',
|
|
59
63
|
'Server': 'Powered by ' + name + '@' + version,
|
|
60
64
|
'Cache-Control': 'no-cache',
|
|
@@ -78,13 +82,13 @@ module.exports = function (config) {
|
|
|
78
82
|
|
|
79
83
|
// 如果文件小于10M,认为不大,直接读取
|
|
80
84
|
if (fileInfo.size < 10 * 1024 * 1024) {
|
|
81
|
-
let { source, resolveImport } = resolveImportFactory(basePath, filePath, entry, isWebsite ?
|
|
85
|
+
let { source, resolveImport } = resolveImportFactory(basePath, filePath, entry, isWebsite ? websiteIntercept : config.devServer.intercept, urlArray[1] === "download", isWebsite)
|
|
82
86
|
|
|
83
87
|
// 只处理非下载文件
|
|
84
88
|
// 过大的也不进行处理
|
|
85
|
-
// (对
|
|
89
|
+
// (对website无效)
|
|
86
90
|
if (urlArray[1] !== "download") {
|
|
87
|
-
let loaders = isWebsite ?
|
|
91
|
+
let loaders = isWebsite ? websiteLoader : config.module;
|
|
88
92
|
|
|
89
93
|
for (let i = 0; i < loaders.rules.length; i++) {
|
|
90
94
|
if (loaders.rules[i].test.test(filePath)) {
|
|
@@ -94,7 +98,7 @@ module.exports = function (config) {
|
|
|
94
98
|
entry, // 是否是浏览器地址栏直接访问
|
|
95
99
|
setFileType(_fileType) { // 设置文件类型
|
|
96
100
|
fileType = _fileType;
|
|
97
|
-
responseHeader['Content-
|
|
101
|
+
responseHeader['Content-Type'] = _fileType + ";charset=utf-8";
|
|
98
102
|
}
|
|
99
103
|
}, source);
|
|
100
104
|
break;
|
|
@@ -125,7 +129,7 @@ module.exports = function (config) {
|
|
|
125
129
|
// 否则就是404
|
|
126
130
|
else {
|
|
127
131
|
response.writeHead(404, {
|
|
128
|
-
'Content-
|
|
132
|
+
'Content-Type': "text/html;charset=utf-8",
|
|
129
133
|
'Access-Control-Allow-Origin': '*',
|
|
130
134
|
'Server': 'Powered by ' + name + '@' + version
|
|
131
135
|
});
|
package/bin/template/404.html
CHANGED
|
@@ -26,7 +26,6 @@
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.fork {
|
|
29
|
-
width: 160px;
|
|
30
29
|
line-height: 30px;
|
|
31
30
|
position: fixed;
|
|
32
31
|
background-color: #607D8B;
|
|
@@ -59,7 +58,11 @@
|
|
|
59
58
|
top: 50px;
|
|
60
59
|
outline: 1px solid #9E9E9E;
|
|
61
60
|
width: calc(100vw - 40px);
|
|
62
|
-
|
|
61
|
+
|
|
62
|
+
/* 2025年9月17日 于南京 */
|
|
63
|
+
/* 100vh改成100%是为了解决手机端显示问题 */
|
|
64
|
+
height: calc(100% - 100px);
|
|
65
|
+
|
|
63
66
|
overflow: auto;
|
|
64
67
|
padding: 20px;
|
|
65
68
|
border-radius: 5px;
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
7
|
<title>OIPage 应用市场</title>
|
|
8
|
-
<link rel="shortcut icon" href="./logo.png">
|
|
8
|
+
<link rel="shortcut icon" href="./images/logo.png">
|
|
9
9
|
<link rel="stylesheet" href="./styles/normalize.css">
|
|
10
10
|
<link rel="stylesheet" href="./styles/common.css">
|
|
11
11
|
</head>
|
|
@@ -32,12 +32,13 @@
|
|
|
32
32
|
.fork {
|
|
33
33
|
line-height: 30px;
|
|
34
34
|
position: fixed;
|
|
35
|
-
background-color: #
|
|
35
|
+
background-color: #607D8B;
|
|
36
36
|
text-align: center;
|
|
37
37
|
color: white;
|
|
38
|
-
outline: 2px dashed #
|
|
38
|
+
outline: 2px dashed #607D8B;
|
|
39
39
|
width: 200px;
|
|
40
|
-
transform: rotate(
|
|
41
|
-
right: -
|
|
42
|
-
|
|
40
|
+
transform: rotate(45deg);
|
|
41
|
+
right: -45px;
|
|
42
|
+
top: 45px;
|
|
43
|
+
z-index: 1;
|
|
43
44
|
}
|
|
@@ -1,6 +1,19 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
<div class="appstore-view">
|
|
2
|
+
<header>
|
|
3
|
+
应用市场
|
|
4
|
+
</header>
|
|
5
|
+
<ul>
|
|
6
|
+
<li z-on:click.prevent="goto" tag="chart">
|
|
7
|
+
<img src="./images/chart.png" />
|
|
8
|
+
<h2>
|
|
9
|
+
群聊贴
|
|
10
|
+
</h2>
|
|
11
|
+
</li>
|
|
12
|
+
<li z-on:click="goto" tag="image-editor">
|
|
13
|
+
<img src="./images/image-editor.png" />
|
|
14
|
+
<h2>
|
|
15
|
+
图片编辑器
|
|
16
|
+
</h2>
|
|
17
|
+
</li>
|
|
18
|
+
</ul>
|
|
19
|
+
</div>
|
|
@@ -1,27 +1,42 @@
|
|
|
1
|
-
|
|
2
|
-
height: 50px;
|
|
3
|
-
line-height: 50px;
|
|
4
|
-
background-color: white;
|
|
5
|
-
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
|
|
6
|
-
background-image: url("./logo.png");
|
|
7
|
-
background-size: auto 90%;
|
|
8
|
-
background-repeat: no-repeat;
|
|
9
|
-
background-position-x: 5px;
|
|
10
|
-
padding-left: 50px;
|
|
11
|
-
font-size: 20px;
|
|
12
|
-
font-weight: 800;
|
|
1
|
+
.appstore-view {
|
|
13
2
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
background-color:
|
|
3
|
+
header {
|
|
4
|
+
height: 50px;
|
|
5
|
+
line-height: 50px;
|
|
6
|
+
background-color: white;
|
|
7
|
+
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
|
|
8
|
+
background-image: url("./images/logo.png");
|
|
9
|
+
background-size: auto 90%;
|
|
10
|
+
background-repeat: no-repeat;
|
|
11
|
+
background-position-x: 5px;
|
|
12
|
+
padding-left: 50px;
|
|
13
|
+
font-size: 18px;
|
|
14
|
+
font-weight: 800;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
ul {
|
|
18
18
|
text-align: center;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
padding: 50px 0;
|
|
20
|
+
|
|
21
|
+
&>li {
|
|
22
|
+
display: inline-block;
|
|
23
|
+
margin: 0 10px;
|
|
24
|
+
|
|
25
|
+
&:hover {
|
|
26
|
+
text-decoration: underline;
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&>img {
|
|
31
|
+
border-radius: 10px;
|
|
32
|
+
width: 70px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&>h2 {
|
|
36
|
+
font-size: 14px;
|
|
37
|
+
line-height: 2em;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
26
40
|
}
|
|
41
|
+
|
|
27
42
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<form z-on:submit.prevent="doSubmit">
|
|
2
|
+
<div class="chart-view">
|
|
3
|
+
<div class="content" id="chart-content-id"></div>
|
|
4
|
+
<div class="input">
|
|
5
|
+
<input placeholder="请输入内容......" z-model="msg" spellcheck="false" autocomplete="off" />
|
|
6
|
+
<button type="submit">发送</button>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
</form>
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { defineElement, ref } from "zipaper"
|
|
2
|
+
import template from "./index.html"
|
|
3
|
+
import style from "./index.scss"
|
|
4
|
+
|
|
5
|
+
export default defineElement({
|
|
6
|
+
template,
|
|
7
|
+
data() {
|
|
8
|
+
return {
|
|
9
|
+
uniqueid: new Date().valueOf() + "#" + (Math.random() * 10000).toFixed(0),
|
|
10
|
+
msg: ref("")
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
created() {
|
|
14
|
+
|
|
15
|
+
var ws = new WebSocket('ws://' + window.location.hostname + ':' + (+window.location.port + 1) + '/');
|
|
16
|
+
|
|
17
|
+
// 连接成功
|
|
18
|
+
ws.addEventListener('open', () => {
|
|
19
|
+
ws.send('客户端和服务器建立连接成功!(' + this.uniqueid + ')');
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
// 监听来自服务器的数据
|
|
23
|
+
ws.addEventListener('message', (event) => {
|
|
24
|
+
let data = JSON.parse(event.data);
|
|
25
|
+
|
|
26
|
+
let contentEl = document.getElementById("chart-content-id");
|
|
27
|
+
|
|
28
|
+
let itemEl = document.createElement("div");
|
|
29
|
+
contentEl.appendChild(itemEl);
|
|
30
|
+
|
|
31
|
+
itemEl.setAttribute("class", "item");
|
|
32
|
+
|
|
33
|
+
if (data.uniqueid === this.uniqueid) {
|
|
34
|
+
itemEl.setAttribute("tag", "sender");
|
|
35
|
+
} else {
|
|
36
|
+
itemEl.setAttribute("tag", "receiver");
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
let textEl = document.createElement("div");
|
|
40
|
+
textEl.innerText = data.msg;
|
|
41
|
+
itemEl.appendChild(textEl);
|
|
42
|
+
textEl.setAttribute("class", "text");
|
|
43
|
+
|
|
44
|
+
itemEl.scrollIntoView({
|
|
45
|
+
behavior: 'smooth',
|
|
46
|
+
block: 'end',
|
|
47
|
+
inline: 'nearest'
|
|
48
|
+
});
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
},
|
|
52
|
+
methods: {
|
|
53
|
+
doSubmit() {
|
|
54
|
+
fetch("./chart/sendMsg", {
|
|
55
|
+
method: "POST",
|
|
56
|
+
headers: {
|
|
57
|
+
"Content-Type": "application/json;charset=utf-8"
|
|
58
|
+
},
|
|
59
|
+
body: JSON.stringify({
|
|
60
|
+
msg: this.msg,
|
|
61
|
+
uniqueid: this.uniqueid
|
|
62
|
+
})
|
|
63
|
+
}).then(() => {
|
|
64
|
+
this.msg = "";
|
|
65
|
+
}).catch(() => {
|
|
66
|
+
alert("发送失败!");
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
style: {
|
|
71
|
+
content: style
|
|
72
|
+
}
|
|
73
|
+
})
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
.chart-view {
|
|
2
|
+
&>.content {
|
|
3
|
+
position: fixed;
|
|
4
|
+
width: 350px;
|
|
5
|
+
height: calc(100% - 130px);
|
|
6
|
+
border: 2px solid #000000;
|
|
7
|
+
left: 50%;
|
|
8
|
+
top: 50px;
|
|
9
|
+
transform: translateX(-50%);
|
|
10
|
+
padding: 5px;
|
|
11
|
+
overflow: auto;
|
|
12
|
+
|
|
13
|
+
&::-webkit-scrollbar {
|
|
14
|
+
width: 0;
|
|
15
|
+
height: 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&>.item {
|
|
19
|
+
display: flex;
|
|
20
|
+
padding: 5px;
|
|
21
|
+
|
|
22
|
+
&[tag="sender"] {
|
|
23
|
+
flex-direction: row-reverse;
|
|
24
|
+
padding-left: 50px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&[tag="receiver"] {
|
|
28
|
+
flex-direction: row;
|
|
29
|
+
padding-right: 50px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&>.text {
|
|
33
|
+
background-color: #dfdbdb;
|
|
34
|
+
padding: 5px;
|
|
35
|
+
width: fit-content;
|
|
36
|
+
border-radius: 5px;
|
|
37
|
+
font-size: 12px;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&>.input {
|
|
43
|
+
position: fixed;
|
|
44
|
+
width: 350px;
|
|
45
|
+
height: 30px;
|
|
46
|
+
left: 50%;
|
|
47
|
+
bottom: 50px;
|
|
48
|
+
transform: translateX(-50%);
|
|
49
|
+
display: flex;
|
|
50
|
+
|
|
51
|
+
&>input {
|
|
52
|
+
flex-grow: 1;
|
|
53
|
+
resize: none;
|
|
54
|
+
outline: none;
|
|
55
|
+
border: 2px solid #000000;
|
|
56
|
+
border-top-width: 0;
|
|
57
|
+
border-radius: 0;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&>button {
|
|
61
|
+
width: 70px;
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
background-color: #000000;
|
|
64
|
+
color: white;
|
|
65
|
+
outline: none;
|
|
66
|
+
border: none;
|
|
67
|
+
|
|
68
|
+
&:hover {
|
|
69
|
+
text-decoration: underline;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<div class="image-editor-view">
|
|
2
|
+
<ul class="menu">
|
|
3
|
+
<li>
|
|
4
|
+
打开
|
|
5
|
+
</li>
|
|
6
|
+
<li>
|
|
7
|
+
画布大小
|
|
8
|
+
</li>
|
|
9
|
+
<li>
|
|
10
|
+
图像大小
|
|
11
|
+
</li>
|
|
12
|
+
<li>
|
|
13
|
+
保存
|
|
14
|
+
</li>
|
|
15
|
+
</ul>
|
|
16
|
+
<div class="content">
|
|
17
|
+
<canvas style="width:700px;height:400px"></canvas>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { defineElement } from "zipaper"
|
|
2
|
+
import template from "./index.html"
|
|
3
|
+
import style from "./index.scss"
|
|
4
|
+
|
|
5
|
+
export default defineElement({
|
|
6
|
+
template,
|
|
7
|
+
data() {
|
|
8
|
+
return {
|
|
9
|
+
|
|
10
|
+
}
|
|
11
|
+
},
|
|
12
|
+
methods: {
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
},
|
|
17
|
+
style: {
|
|
18
|
+
content: style
|
|
19
|
+
}
|
|
20
|
+
})
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
.image-editor-view {
|
|
2
|
+
&>.menu {
|
|
3
|
+
position: fixed;
|
|
4
|
+
left: 50%;
|
|
5
|
+
top: 5px;
|
|
6
|
+
transform: translateX(-50%);
|
|
7
|
+
|
|
8
|
+
&>li {
|
|
9
|
+
display: inline-block;
|
|
10
|
+
padding: 5px 10px;
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
background-color: #FF5722;
|
|
13
|
+
color: white;
|
|
14
|
+
margin: 0 5px;
|
|
15
|
+
border-radius: 5px;
|
|
16
|
+
|
|
17
|
+
&:hover {
|
|
18
|
+
text-decoration: underline;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&>.content {
|
|
24
|
+
text-align: center;
|
|
25
|
+
margin-top: 100px;
|
|
26
|
+
|
|
27
|
+
canvas {
|
|
28
|
+
background-image: url("./images/mosaic.png");
|
|
29
|
+
outline: 2px solid #CDDC39;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -7,5 +7,11 @@ export default defineRouter({
|
|
|
7
7
|
}, {
|
|
8
8
|
path: "/appStore",
|
|
9
9
|
component: () => import("./pages/appStore/index.js"),
|
|
10
|
+
}, {
|
|
11
|
+
path: "/chart",
|
|
12
|
+
component: () => import("./pages/chart/index.js"),
|
|
13
|
+
}, {
|
|
14
|
+
path: "/image-editor",
|
|
15
|
+
component: () => import("./pages/image-editor/index.js"),
|
|
10
16
|
}]
|
|
11
17
|
})
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
const headFactory = require("./head.js");
|
|
2
|
+
|
|
3
|
+
const head = headFactory();
|
|
4
|
+
|
|
5
|
+
// 聊天
|
|
6
|
+
module.exports = {
|
|
7
|
+
test: /^\/chart\//,
|
|
8
|
+
handler(request, response, wsHandler) {
|
|
9
|
+
let url = decodeURIComponent(request.url);
|
|
10
|
+
|
|
11
|
+
let requestData = "";
|
|
12
|
+
|
|
13
|
+
request.on('data', (chunk) => {
|
|
14
|
+
requestData += chunk;
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
request.on('end', () => {
|
|
18
|
+
|
|
19
|
+
if (/sendMsg$/.test(url)) {
|
|
20
|
+
wsHandler.notifyBrowser({
|
|
21
|
+
payloadData: requestData
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
head["Content-Type"] = "application/json;charset=utf-8";
|
|
26
|
+
response.writeHead(200, head);
|
|
27
|
+
response.write(JSON.stringify({
|
|
28
|
+
code: "000000"
|
|
29
|
+
}));
|
|
30
|
+
response.end();
|
|
31
|
+
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
};
|
|
@@ -8,7 +8,7 @@ const head = headFactory();
|
|
|
8
8
|
module.exports = {
|
|
9
9
|
test: /^zipaper$/,
|
|
10
10
|
handler(request, response) {
|
|
11
|
-
head["Content-
|
|
11
|
+
head["Content-Type"] = "application/javascript;charset=utf-8";
|
|
12
12
|
head["ETag"] = "Zipaper@v" + require("zipaper/package.json").version;
|
|
13
13
|
|
|
14
14
|
if (request.headers["if-none-match"] === head["ETag"]) {
|
package/nodejs/cmdlog/index.js
CHANGED
package/nodejs/disk/index.js
CHANGED
package/nodejs/format/index.js
CHANGED
package/nodejs/json/index.js
CHANGED
package/nodejs/logform/index.js
CHANGED
package/nodejs/reader/index.js
CHANGED
package/nodejs/throttle/index.js
CHANGED
package/package.json
CHANGED
package/web/animation/index.js
CHANGED
package/web/format/index.js
CHANGED
package/web/json/index.js
CHANGED
package/web/onReady/index.js
CHANGED
package/web/reader/index.js
CHANGED
package/web/style/index.js
CHANGED
package/web/throttle/index.js
CHANGED
|
File without changes
|