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.
Files changed (49) hide show
  1. package/CHANGELOG +11 -1
  2. package/bin/WebSocket/decodeWsFrame.js +43 -0
  3. package/bin/WebSocket/encodeWsFrame.js +28 -0
  4. package/bin/WebSocket/headersToJSON.js +26 -0
  5. package/bin/WebSocket/index.js +80 -0
  6. package/bin/intercept.js +2 -2
  7. package/bin/serve.js +14 -10
  8. package/bin/template/404.html +5 -2
  9. package/bin/website-htmls/images/chart.png +0 -0
  10. package/bin/website-htmls/images/image-editor.png +0 -0
  11. package/bin/website-htmls/images/mosaic.png +0 -0
  12. package/bin/website-htmls/index.html +1 -1
  13. package/bin/website-htmls/main.js +2 -0
  14. package/bin/website-htmls/pages/App/index.html +4 -1
  15. package/bin/website-htmls/pages/App/index.scss +6 -5
  16. package/bin/website-htmls/pages/appStore/index.html +19 -6
  17. package/bin/website-htmls/pages/appStore/index.js +3 -1
  18. package/bin/website-htmls/pages/appStore/index.scss +38 -23
  19. package/bin/website-htmls/pages/chart/index.html +9 -0
  20. package/bin/website-htmls/pages/chart/index.js +73 -0
  21. package/bin/website-htmls/pages/chart/index.scss +73 -0
  22. package/bin/website-htmls/pages/image-editor/index.html +19 -0
  23. package/bin/website-htmls/pages/image-editor/index.js +20 -0
  24. package/bin/website-htmls/pages/image-editor/index.scss +32 -0
  25. package/bin/website-htmls/router.config.js +6 -0
  26. package/bin/website-htmls/styles/common.css +0 -3
  27. package/bin/website-plugins/intercept/chart.js +34 -0
  28. package/bin/website-plugins/intercept/head.js +1 -1
  29. package/bin/website-plugins/intercept/index.js +3 -1
  30. package/bin/website-plugins/intercept/oipage-zipaper-intercept.js +1 -1
  31. package/nodejs/animation/index.js +1 -1
  32. package/nodejs/cmdlog/index.js +1 -1
  33. package/nodejs/disk/index.js +1 -1
  34. package/nodejs/format/index.js +1 -1
  35. package/nodejs/json/index.js +1 -1
  36. package/nodejs/logform/index.js +1 -1
  37. package/nodejs/reader/index.js +1 -1
  38. package/nodejs/throttle/index.js +1 -1
  39. package/package.json +1 -1
  40. package/web/XMLHttpRequest/index.js +1 -1
  41. package/web/animation/index.js +1 -1
  42. package/web/format/index.js +1 -1
  43. package/web/json/index.js +1 -1
  44. package/web/onReady/index.js +1 -1
  45. package/web/performChunk/index.js +1 -1
  46. package/web/reader/index.js +1 -1
  47. package/web/style/index.js +1 -1
  48. package/web/throttle/index.js +1 -1
  49. /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 webisteIntercept = require("./website-plugins/intercept/index.js");
12
- const webisteLoader = require("./website-plugins/loader/index.js");
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") + "-http-server";
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 ? webisteIntercept : config.devServer.intercept, request, response)) {
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-type': (fileType || "text/plain") + ";charset=utf-8",
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 ? webisteIntercept : config.devServer.intercept, urlArray[1] === "download", 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
- // (对webiste无效)
89
+ // (对website无效)
86
90
  if (urlArray[1] !== "download") {
87
- let loaders = isWebsite ? webisteLoader : config.module;
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-type'] = _fileType + ";charset=utf-8";
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-type': "text/html;charset=utf-8",
132
+ 'Content-Type': "text/html;charset=utf-8",
129
133
  'Access-Control-Allow-Origin': '*',
130
134
  'Server': 'Powered by ' + name + '@' + version
131
135
  });
@@ -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
- height: calc(100vh - 100px);
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;
@@ -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>
@@ -4,6 +4,8 @@ import App from "./pages/App/index.js"
4
4
  import router from "./router.config.js"
5
5
  import dialogs from "./dialogs/index.js"
6
6
 
7
+ // https://oi-contrib.github.io/Zipaper/index.html
8
+
7
9
  createApp(App)
8
10
  .use(router) // 路由
9
11
  .use(dialogs) // 弹框
@@ -1,4 +1,7 @@
1
1
  <router></router>
2
2
  <div id="dialog-root">
3
3
  <div class="mask" z-on:click="closeDialog"></div>
4
- </div>
4
+ </div>
5
+ <a class="fork" href="https://github.com/oi-contrib/OIPage" target="_blank">
6
+ Fork me on Github
7
+ </a>
@@ -32,12 +32,13 @@
32
32
  .fork {
33
33
  line-height: 30px;
34
34
  position: fixed;
35
- background-color: #9E9E9E;
35
+ background-color: #607D8B;
36
36
  text-align: center;
37
37
  color: white;
38
- outline: 2px dashed #9E9E9E;
38
+ outline: 2px dashed #607D8B;
39
39
  width: 200px;
40
- transform: rotate(-45deg);
41
- right: -40px;
42
- bottom: 44px;
40
+ transform: rotate(45deg);
41
+ right: -45px;
42
+ top: 45px;
43
+ z-index: 1;
43
44
  }
@@ -1,6 +1,19 @@
1
- <header>
2
- 应用市场
3
- <a class="fork" href="https://github.com/oi-contrib/OIPage" target="_blank">
4
- Fork me on Github
5
- </a>
6
- </header>
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>
@@ -10,7 +10,9 @@ export default defineElement({
10
10
  }
11
11
  },
12
12
  methods: {
13
-
13
+ goto(event, target) {
14
+ this.$goto("/" + target.getAttribute("tag"))
15
+ }
14
16
  },
15
17
  style: {
16
18
  content: style
@@ -1,27 +1,42 @@
1
- header {
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
- .fork {
15
- line-height: 30px;
16
- position: fixed;
17
- background-color: #9E9E9E;
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
- color: white;
20
- outline: 2px dashed #9E9E9E;
21
- width: 200px;
22
- transform: rotate(-45deg);
23
- right: -40px;
24
- bottom: 44px;
25
- font-weight: 400;
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
  })
@@ -1,3 +0,0 @@
1
- body {
2
- font-family: cursive;
3
- }
@@ -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
+ };
@@ -4,6 +4,6 @@ module.exports = function () {
4
4
  return {
5
5
  'Access-Control-Allow-Origin': '*',
6
6
  'Server': 'Powered by OIPage:website@' + pkg.version,
7
- 'Content-type': 'text/plain;charset=utf-8'
7
+ 'Content-Type': 'text/plain;charset=utf-8'
8
8
  };
9
9
  };
@@ -1,5 +1,7 @@
1
1
  const OIPageZipaperIntercept = require("./oipage-zipaper-intercept.js");
2
+ const ChartIntercept = require("./chart.js");
2
3
 
3
4
  module.exports = [
4
- OIPageZipaperIntercept
5
+ OIPageZipaperIntercept,
6
+ ChartIntercept
5
7
  ];
@@ -8,7 +8,7 @@ const head = headFactory();
8
8
  module.exports = {
9
9
  test: /^zipaper$/,
10
10
  handler(request, response) {
11
- head["Content-type"] = "application/javascript;charset=utf-8";
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"]) {
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * animation of OIPage v1.4.1
2
+ * animation of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
 
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * cmdlog of OIPage v1.4.1
2
+ * cmdlog of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
 
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * disk of OIPage v1.4.1
2
+ * disk of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
 
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * format of OIPage v1.4.1
2
+ * format of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
 
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * json of OIPage v1.4.1
2
+ * json of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
  const {reader} = require("../reader/index.js");
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * logform of OIPage v1.4.1
2
+ * logform of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
  const {linelog} = require("../cmdlog/index.js");
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * reader of OIPage v1.4.1
2
+ * reader of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
 
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * throttle of OIPage v1.4.1
2
+ * throttle of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oipage",
3
- "version": "1.4.1",
3
+ "version": "1.5.0-alpha.0",
4
4
  "description": "前端网页或应用快速开发助手,包括开发服务器、辅助命令、实用API等",
5
5
  "sideEffects": false,
6
6
  "scripts": {
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * XMLHttpRequest of OIPage v1.4.1
2
+ * XMLHttpRequest of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
 
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * animation of OIPage v1.4.1
2
+ * animation of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
 
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * format of OIPage v1.4.1
2
+ * format of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
 
package/web/json/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * json of OIPage v1.4.1
2
+ * json of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
  import {reader} from "../reader/index.js";
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * onReady of OIPage v1.4.1
2
+ * onReady of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
 
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * performChunk of OIPage v1.4.1
2
+ * performChunk of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
 
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * reader of OIPage v1.4.1
2
+ * reader of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
 
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * style of OIPage v1.4.1
2
+ * style of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
 
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * throttle of OIPage v1.4.1
2
+ * throttle of OIPage v1.5.0-alpha.0
3
3
  * git+https://github.com/oi-contrib/OIPage.git
4
4
  */
5
5
 
File without changes