oipage 1.6.0 → 1.7.0-alpha.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/.github/FUNDING.yml +11 -11
- package/AUTHORS.txt +6 -6
- package/CHANGELOG +144 -137
- package/LICENSE +20 -20
- package/README.md +95 -95
- package/bin/WebSocket/decodeWsFrame.js +43 -43
- package/bin/WebSocket/encodeWsFrame.js +28 -28
- package/bin/WebSocket/headersToJSON.js +26 -26
- package/bin/WebSocket/index.js +80 -80
- package/bin/data/mineTypes.json +104 -104
- package/bin/disk.js +42 -42
- package/bin/help.js +43 -43
- package/bin/intercept.js +15 -15
- package/bin/network.js +21 -21
- package/bin/run +115 -115
- package/bin/serve.d.ts +55 -55
- package/bin/serve.js +158 -158
- package/bin/template/404.html +186 -186
- package/bin/tools/deleteEmptyFolder.js +23 -23
- package/bin/tools/format.js +75 -75
- package/bin/tools/network.js +42 -42
- package/bin/tools/resolve404.js +83 -83
- package/bin/tools/resolveImport.js +88 -88
- package/bin/website-htmls/components/ui-select-file/index.html +7 -7
- package/bin/website-htmls/components/ui-select-file/index.js +37 -37
- package/bin/website-htmls/components/ui-select-file/index.scss +44 -44
- package/bin/website-htmls/dialogs/imageSize/index.html +54 -54
- package/bin/website-htmls/dialogs/imageSize/index.js +53 -53
- package/bin/website-htmls/dialogs/imageSize/index.scss +138 -138
- package/bin/website-htmls/dialogs/index.js +52 -52
- package/bin/website-htmls/images/addFile.svg +1 -1
- package/bin/website-htmls/images/img-to-pdf.svg +1 -1
- package/bin/website-htmls/index.html +17 -17
- package/bin/website-htmls/main.js +13 -13
- package/bin/website-htmls/pages/App/index.html +6 -6
- package/bin/website-htmls/pages/App/index.js +22 -22
- package/bin/website-htmls/pages/App/index.scss +43 -43
- package/bin/website-htmls/pages/appStore/index.html +24 -24
- package/bin/website-htmls/pages/appStore/index.js +19 -19
- package/bin/website-htmls/pages/appStore/index.scss +41 -41
- package/bin/website-htmls/pages/chart/index.html +8 -8
- package/bin/website-htmls/pages/chart/index.js +72 -72
- package/bin/website-htmls/pages/chart/index.scss +72 -72
- package/bin/website-htmls/pages/image-editor/index.html +27 -27
- package/bin/website-htmls/pages/image-editor/index.js +106 -106
- package/bin/website-htmls/pages/image-editor/index.scss +45 -45
- package/bin/website-htmls/pages/img-to-pdf/index.html +3 -3
- package/bin/website-htmls/pages/img-to-pdf/index.js +44 -44
- package/bin/website-htmls/pages/img-to-pdf/index.scss +4 -4
- package/bin/website-htmls/router.config.js +19 -19
- package/bin/website-htmls/styles/normalize.css +94 -94
- package/bin/website-plugins/intercept/chart.js +33 -33
- package/bin/website-plugins/intercept/head.js +8 -8
- package/bin/website-plugins/intercept/index.js +8 -8
- package/bin/website-plugins/intercept/oipage-vislite-intercept.js +33 -33
- package/bin/website-plugins/intercept/oipage-zipaper-intercept.js +39 -39
- package/bin/website-plugins/loader/index.js +11 -11
- package/bin/website-plugins/loader/oipage-html-loader.js +7 -7
- package/bin/website-plugins/loader/oipage-scss-loader.js +149 -149
- package/nodejs/animation/index.d.ts +19 -19
- package/nodejs/animation/index.js +104 -104
- package/nodejs/cmdlog/index.d.ts +20 -20
- package/nodejs/cmdlog/index.js +75 -75
- package/nodejs/disk/index.d.ts +47 -47
- package/nodejs/disk/index.js +165 -165
- package/nodejs/format/index.d.ts +29 -29
- package/nodejs/format/index.js +107 -107
- package/nodejs/json/index.d.ts +9 -9
- package/nodejs/json/index.js +206 -206
- package/nodejs/logform/index.d.ts +18 -18
- package/nodejs/logform/index.js +94 -94
- package/nodejs/reader/index.d.ts +32 -32
- package/nodejs/reader/index.js +20 -20
- package/nodejs/remote/index.d.ts +32 -0
- package/nodejs/remote/index.js +71 -0
- package/nodejs/throttle/index.d.ts +30 -30
- package/nodejs/throttle/index.js +50 -50
- package/package.json +43 -43
- package/web/XMLHttpRequest/index.d.ts +17 -17
- package/web/XMLHttpRequest/index.js +60 -60
- package/web/animation/index.d.ts +19 -19
- package/web/animation/index.js +104 -104
- package/web/format/index.d.ts +29 -29
- package/web/format/index.js +107 -107
- package/web/json/index.d.ts +9 -9
- package/web/json/index.js +206 -206
- package/web/onReady/index.d.ts +7 -7
- package/web/onReady/index.js +8 -8
- package/web/performChunk/index.d.ts +4 -4
- package/web/performChunk/index.js +19 -19
- package/web/reader/index.d.ts +32 -32
- package/web/reader/index.js +20 -20
- package/web/style/index.d.ts +21 -21
- package/web/style/index.js +19 -19
- package/web/throttle/index.d.ts +30 -30
- package/web/throttle/index.js +50 -50
package/bin/tools/resolve404.js
CHANGED
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
const { readdirSync, lstatSync, readFileSync, statSync } = require("fs");
|
|
2
|
-
const { join } = require("path");
|
|
3
|
-
const { formatByte, formatTime } = require("./format");
|
|
4
|
-
const mineTypes = require("../data/mineTypes.json");
|
|
5
|
-
|
|
6
|
-
const img_folder = "data:image/png;base64," + readFileSync(join(__dirname, "../images/folder.png")).toString('base64');
|
|
7
|
-
const img_file = "data:image/png;base64," + readFileSync(join(__dirname, "../images/file.png")).toString('base64');
|
|
8
|
-
|
|
9
|
-
const template_404 = readFileSync(join(__dirname, "../template/404.html"), {
|
|
10
|
-
encoding: "utf8"
|
|
11
|
-
})
|
|
12
|
-
.replace("${img_folder}", img_folder)
|
|
13
|
-
.replace("${img_file}", img_file);
|
|
14
|
-
|
|
15
|
-
module.exports = function (filePath, url) {
|
|
16
|
-
|
|
17
|
-
let subItems = [];
|
|
18
|
-
|
|
19
|
-
try {
|
|
20
|
-
subItems = readdirSync(filePath);
|
|
21
|
-
console.log("<i> \x1b[1m\x1b[32m[OIPage-http-server] Read Folder: " + url + '\x1b[0m ' + new Date().toLocaleString());
|
|
22
|
-
} catch (e) {
|
|
23
|
-
console.log("<i> \x1b[1m\x1b[32m[OIPage-http-server] Read " + (/\/$/.test(url) ? "Folder" : "File") + ": \x1b[35m" + url + ' 404 Not Found\x1b[0m ' + new Date().toLocaleString());
|
|
24
|
-
try {
|
|
25
|
-
if (!/\/$/.test(url) || url === "/") {
|
|
26
|
-
filePath = join(filePath, "../");
|
|
27
|
-
subItems = readdirSync(filePath);
|
|
28
|
-
}
|
|
29
|
-
} catch (e) { }
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
let template = "";
|
|
33
|
-
for (let i in subItems) {
|
|
34
|
-
let isDirectory = lstatSync(join(filePath, subItems[i])).isDirectory();
|
|
35
|
-
let statObj = statSync(join(filePath, subItems[i]));
|
|
36
|
-
|
|
37
|
-
// 文件夹
|
|
38
|
-
if (isDirectory) {
|
|
39
|
-
template += `<tr class="folder">
|
|
40
|
-
<th class="name">
|
|
41
|
-
<a href='./${subItems[i]}/'>${subItems[i]}</a>
|
|
42
|
-
</th>
|
|
43
|
-
<th>
|
|
44
|
-
${formatTime(statObj.mtime)}
|
|
45
|
-
</th>
|
|
46
|
-
<th>
|
|
47
|
-
文件夹
|
|
48
|
-
</th>
|
|
49
|
-
<th>
|
|
50
|
-
-
|
|
51
|
-
</th>
|
|
52
|
-
<th>
|
|
53
|
-
<a href='./${subItems[i]}/' class="btn">打开</a>
|
|
54
|
-
</th>
|
|
55
|
-
</tr>`;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
// 文件
|
|
59
|
-
else {
|
|
60
|
-
let dotName = /\./.test(subItems[i]) ? subItems[i].match(/\.([^.]+)$/)[1] : "";
|
|
61
|
-
|
|
62
|
-
template += `<tr class="file">
|
|
63
|
-
<th class="name">
|
|
64
|
-
<a href='./${subItems[i]}'>${subItems[i]}</a>
|
|
65
|
-
</th>
|
|
66
|
-
<th>
|
|
67
|
-
${formatTime(statObj.mtime)}
|
|
68
|
-
</th>
|
|
69
|
-
<th>
|
|
70
|
-
${mineTypes[dotName] || "text/plain"}
|
|
71
|
-
</th>
|
|
72
|
-
<th>
|
|
73
|
-
${formatByte(statObj.size)}
|
|
74
|
-
</th>
|
|
75
|
-
<th>
|
|
76
|
-
<a href='./${subItems[i]}' class="btn">访问</a>
|
|
77
|
-
<a href='./${subItems[i]}?download' class="btn" download='${subItems[i]}'>下载</a>
|
|
78
|
-
</th>
|
|
79
|
-
</tr>`;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
return template_404.replace("${current}", filePath).replace("${template}", template);
|
|
1
|
+
const { readdirSync, lstatSync, readFileSync, statSync } = require("fs");
|
|
2
|
+
const { join } = require("path");
|
|
3
|
+
const { formatByte, formatTime } = require("./format");
|
|
4
|
+
const mineTypes = require("../data/mineTypes.json");
|
|
5
|
+
|
|
6
|
+
const img_folder = "data:image/png;base64," + readFileSync(join(__dirname, "../images/folder.png")).toString('base64');
|
|
7
|
+
const img_file = "data:image/png;base64," + readFileSync(join(__dirname, "../images/file.png")).toString('base64');
|
|
8
|
+
|
|
9
|
+
const template_404 = readFileSync(join(__dirname, "../template/404.html"), {
|
|
10
|
+
encoding: "utf8"
|
|
11
|
+
})
|
|
12
|
+
.replace("${img_folder}", img_folder)
|
|
13
|
+
.replace("${img_file}", img_file);
|
|
14
|
+
|
|
15
|
+
module.exports = function (filePath, url) {
|
|
16
|
+
|
|
17
|
+
let subItems = [];
|
|
18
|
+
|
|
19
|
+
try {
|
|
20
|
+
subItems = readdirSync(filePath);
|
|
21
|
+
console.log("<i> \x1b[1m\x1b[32m[OIPage-http-server] Read Folder: " + url + '\x1b[0m ' + new Date().toLocaleString());
|
|
22
|
+
} catch (e) {
|
|
23
|
+
console.log("<i> \x1b[1m\x1b[32m[OIPage-http-server] Read " + (/\/$/.test(url) ? "Folder" : "File") + ": \x1b[35m" + url + ' 404 Not Found\x1b[0m ' + new Date().toLocaleString());
|
|
24
|
+
try {
|
|
25
|
+
if (!/\/$/.test(url) || url === "/") {
|
|
26
|
+
filePath = join(filePath, "../");
|
|
27
|
+
subItems = readdirSync(filePath);
|
|
28
|
+
}
|
|
29
|
+
} catch (e) { }
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
let template = "";
|
|
33
|
+
for (let i in subItems) {
|
|
34
|
+
let isDirectory = lstatSync(join(filePath, subItems[i])).isDirectory();
|
|
35
|
+
let statObj = statSync(join(filePath, subItems[i]));
|
|
36
|
+
|
|
37
|
+
// 文件夹
|
|
38
|
+
if (isDirectory) {
|
|
39
|
+
template += `<tr class="folder">
|
|
40
|
+
<th class="name">
|
|
41
|
+
<a href='./${subItems[i]}/'>${subItems[i]}</a>
|
|
42
|
+
</th>
|
|
43
|
+
<th>
|
|
44
|
+
${formatTime(statObj.mtime)}
|
|
45
|
+
</th>
|
|
46
|
+
<th>
|
|
47
|
+
文件夹
|
|
48
|
+
</th>
|
|
49
|
+
<th>
|
|
50
|
+
-
|
|
51
|
+
</th>
|
|
52
|
+
<th>
|
|
53
|
+
<a href='./${subItems[i]}/' class="btn">打开</a>
|
|
54
|
+
</th>
|
|
55
|
+
</tr>`;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// 文件
|
|
59
|
+
else {
|
|
60
|
+
let dotName = /\./.test(subItems[i]) ? subItems[i].match(/\.([^.]+)$/)[1] : "";
|
|
61
|
+
|
|
62
|
+
template += `<tr class="file">
|
|
63
|
+
<th class="name">
|
|
64
|
+
<a href='./${subItems[i]}'>${subItems[i]}</a>
|
|
65
|
+
</th>
|
|
66
|
+
<th>
|
|
67
|
+
${formatTime(statObj.mtime)}
|
|
68
|
+
</th>
|
|
69
|
+
<th>
|
|
70
|
+
${mineTypes[dotName] || "text/plain"}
|
|
71
|
+
</th>
|
|
72
|
+
<th>
|
|
73
|
+
${formatByte(statObj.size)}
|
|
74
|
+
</th>
|
|
75
|
+
<th>
|
|
76
|
+
<a href='./${subItems[i]}' class="btn">访问</a>
|
|
77
|
+
<a href='./${subItems[i]}?download' class="btn" download='${subItems[i]}'>下载</a>
|
|
78
|
+
</th>
|
|
79
|
+
</tr>`;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
return template_404.replace("${current}", filePath).replace("${template}", template);
|
|
84
84
|
};
|
|
@@ -1,89 +1,89 @@
|
|
|
1
|
-
const { readFileSync, existsSync, lstatSync } = require("fs");
|
|
2
|
-
const { join } = require("path");
|
|
3
|
-
const { testIntercept } = require("../intercept.js");
|
|
4
|
-
|
|
5
|
-
module.exports = function (basePath, filePath, entry, intercept, isDownload, isWebsite) {
|
|
6
|
-
basePath = join(basePath, "./");
|
|
7
|
-
|
|
8
|
-
let source = readFileSync(filePath);
|
|
9
|
-
let resolveImport = content => content;
|
|
10
|
-
|
|
11
|
-
let __resolveImport = function (content) {
|
|
12
|
-
return content.replace(/import [^'"]* from (['"])([^'"]*)['"]/sg, function (_importCode, _, _importUrl) {
|
|
13
|
-
if (/^[./]/.test(_importUrl)) {
|
|
14
|
-
return _importCode;
|
|
15
|
-
} else {
|
|
16
|
-
return _importCode.replace(_importUrl, _importUrl.replace(/([^/])+/s, function (npmName) {
|
|
17
|
-
|
|
18
|
-
if (testIntercept(npmName, intercept)) {
|
|
19
|
-
return (isWebsite ? "/_oipage_website_/@modules/" : "/@modules/") + npmName;
|
|
20
|
-
} else {
|
|
21
|
-
|
|
22
|
-
let node_modulesRootPath = join(filePath, "../");
|
|
23
|
-
let prePath = "";
|
|
24
|
-
while (true) {
|
|
25
|
-
let npmBundlePath = join(node_modulesRootPath, "./node_modules/", npmName);
|
|
26
|
-
|
|
27
|
-
// 如果存在
|
|
28
|
-
if (existsSync(npmBundlePath) && lstatSync(npmBundlePath).isDirectory()) {
|
|
29
|
-
let npmNameValue = npmName;
|
|
30
|
-
|
|
31
|
-
// 对于类似 import VISLite from "vislite"
|
|
32
|
-
// 需要把包名解析成具体的文件
|
|
33
|
-
if (!/\//.test(_importUrl)) {
|
|
34
|
-
let bundlePackage = require(join(npmBundlePath, "./package.json"));
|
|
35
|
-
npmNameValue = npmName + "/" + bundlePackage.main;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
return (prePath ? prePath : "./") + "node_modules/" + npmNameValue;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
if (node_modulesRootPath === basePath) {
|
|
42
|
-
|
|
43
|
-
// 如果命令行根目录是一个项目
|
|
44
|
-
let packagePath = join(basePath, "./package.json");
|
|
45
|
-
if (existsSync(packagePath) && !lstatSync(packagePath).isDirectory()) {
|
|
46
|
-
let bundlePackage = require(packagePath);
|
|
47
|
-
if (!/\//.test(_importUrl)) {
|
|
48
|
-
return "/" + bundlePackage.main;
|
|
49
|
-
} else {
|
|
50
|
-
return "/"
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
return npmName;
|
|
55
|
-
} else {
|
|
56
|
-
node_modulesRootPath = join(node_modulesRootPath, "../");
|
|
57
|
-
prePath = "../" + prePath;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
}
|
|
62
|
-
}));
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
// 如果是下载
|
|
68
|
-
if (isDownload) {
|
|
69
|
-
// todo
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
// 如果不是直接访问的
|
|
73
|
-
else if (!entry) {
|
|
74
|
-
source += "";
|
|
75
|
-
resolveImport = (content, notResolve) => notResolve ? content : __resolveImport(content);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
// 如果是.html或.htm结尾
|
|
79
|
-
else if (/\.html{0,1}$/.test(filePath)) {
|
|
80
|
-
source = (source + "").replace(/<script type="module">(.*)<\/script>/sg, function (_, _matchCode) {
|
|
81
|
-
return `<script type="module">${__resolveImport(_matchCode)}</script>`;
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
return {
|
|
86
|
-
source,
|
|
87
|
-
resolveImport
|
|
88
|
-
};
|
|
1
|
+
const { readFileSync, existsSync, lstatSync } = require("fs");
|
|
2
|
+
const { join } = require("path");
|
|
3
|
+
const { testIntercept } = require("../intercept.js");
|
|
4
|
+
|
|
5
|
+
module.exports = function (basePath, filePath, entry, intercept, isDownload, isWebsite) {
|
|
6
|
+
basePath = join(basePath, "./");
|
|
7
|
+
|
|
8
|
+
let source = readFileSync(filePath);
|
|
9
|
+
let resolveImport = content => content;
|
|
10
|
+
|
|
11
|
+
let __resolveImport = function (content) {
|
|
12
|
+
return content.replace(/import [^'"]* from (['"])([^'"]*)['"]/sg, function (_importCode, _, _importUrl) {
|
|
13
|
+
if (/^[./]/.test(_importUrl)) {
|
|
14
|
+
return _importCode;
|
|
15
|
+
} else {
|
|
16
|
+
return _importCode.replace(_importUrl, _importUrl.replace(/([^/])+/s, function (npmName) {
|
|
17
|
+
|
|
18
|
+
if (testIntercept(npmName, intercept)) {
|
|
19
|
+
return (isWebsite ? "/_oipage_website_/@modules/" : "/@modules/") + npmName;
|
|
20
|
+
} else {
|
|
21
|
+
|
|
22
|
+
let node_modulesRootPath = join(filePath, "../");
|
|
23
|
+
let prePath = "";
|
|
24
|
+
while (true) {
|
|
25
|
+
let npmBundlePath = join(node_modulesRootPath, "./node_modules/", npmName);
|
|
26
|
+
|
|
27
|
+
// 如果存在
|
|
28
|
+
if (existsSync(npmBundlePath) && lstatSync(npmBundlePath).isDirectory()) {
|
|
29
|
+
let npmNameValue = npmName;
|
|
30
|
+
|
|
31
|
+
// 对于类似 import VISLite from "vislite"
|
|
32
|
+
// 需要把包名解析成具体的文件
|
|
33
|
+
if (!/\//.test(_importUrl)) {
|
|
34
|
+
let bundlePackage = require(join(npmBundlePath, "./package.json"));
|
|
35
|
+
npmNameValue = npmName + "/" + bundlePackage.main;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
return (prePath ? prePath : "./") + "node_modules/" + npmNameValue;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
if (node_modulesRootPath === basePath) {
|
|
42
|
+
|
|
43
|
+
// 如果命令行根目录是一个项目
|
|
44
|
+
let packagePath = join(basePath, "./package.json");
|
|
45
|
+
if (existsSync(packagePath) && !lstatSync(packagePath).isDirectory()) {
|
|
46
|
+
let bundlePackage = require(packagePath);
|
|
47
|
+
if (!/\//.test(_importUrl)) {
|
|
48
|
+
return "/" + bundlePackage.main;
|
|
49
|
+
} else {
|
|
50
|
+
return "/"
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
return npmName;
|
|
55
|
+
} else {
|
|
56
|
+
node_modulesRootPath = join(node_modulesRootPath, "../");
|
|
57
|
+
prePath = "../" + prePath;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
}
|
|
62
|
+
}));
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
// 如果是下载
|
|
68
|
+
if (isDownload) {
|
|
69
|
+
// todo
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// 如果不是直接访问的
|
|
73
|
+
else if (!entry) {
|
|
74
|
+
source += "";
|
|
75
|
+
resolveImport = (content, notResolve) => notResolve ? content : __resolveImport(content);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// 如果是.html或.htm结尾
|
|
79
|
+
else if (/\.html{0,1}$/.test(filePath)) {
|
|
80
|
+
source = (source + "").replace(/<script type="module">(.*)<\/script>/sg, function (_, _matchCode) {
|
|
81
|
+
return `<script type="module">${__resolveImport(_matchCode)}</script>`;
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
return {
|
|
86
|
+
source,
|
|
87
|
+
resolveImport
|
|
88
|
+
};
|
|
89
89
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
<div class="ui-select-file-view">
|
|
2
|
-
<h2 class="title" z-bind="_props.title"></h2>
|
|
3
|
-
<div class="tips" z-bind="_props.tips"></div>
|
|
4
|
-
<div class="file">
|
|
5
|
-
<input type="file" multiple id="input" z-on:change.stop="doChange" z-bind:accept="accept" />
|
|
6
|
-
<label for="input" z-bind="'选择'+_props.type+'文件'"></label>
|
|
7
|
-
</div>
|
|
1
|
+
<div class="ui-select-file-view">
|
|
2
|
+
<h2 class="title" z-bind="_props.title"></h2>
|
|
3
|
+
<div class="tips" z-bind="_props.tips"></div>
|
|
4
|
+
<div class="file">
|
|
5
|
+
<input type="file" multiple id="input" z-on:change.stop="doChange" z-bind:accept="accept" />
|
|
6
|
+
<label for="input" z-bind="'选择'+_props.type+'文件'"></label>
|
|
7
|
+
</div>
|
|
8
8
|
</div>
|
|
@@ -1,38 +1,38 @@
|
|
|
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
|
-
emits: ["change"],
|
|
8
|
-
props: {
|
|
9
|
-
title: {
|
|
10
|
-
type: String,
|
|
11
|
-
required: true,
|
|
12
|
-
},
|
|
13
|
-
tips: {
|
|
14
|
-
type: String,
|
|
15
|
-
required: true,
|
|
16
|
-
},
|
|
17
|
-
type: {
|
|
18
|
-
type: String,
|
|
19
|
-
required: true,
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
data() {
|
|
23
|
-
return {
|
|
24
|
-
accept: {
|
|
25
|
-
pdf: "application/pdf",
|
|
26
|
-
image: "image/*"
|
|
27
|
-
}[this._props.type]
|
|
28
|
-
};
|
|
29
|
-
},
|
|
30
|
-
methods: {
|
|
31
|
-
doChange(event, target) {
|
|
32
|
-
this.$emit("change", target.files);
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
style: {
|
|
36
|
-
content: style
|
|
37
|
-
}
|
|
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
|
+
emits: ["change"],
|
|
8
|
+
props: {
|
|
9
|
+
title: {
|
|
10
|
+
type: String,
|
|
11
|
+
required: true,
|
|
12
|
+
},
|
|
13
|
+
tips: {
|
|
14
|
+
type: String,
|
|
15
|
+
required: true,
|
|
16
|
+
},
|
|
17
|
+
type: {
|
|
18
|
+
type: String,
|
|
19
|
+
required: true,
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
data() {
|
|
23
|
+
return {
|
|
24
|
+
accept: {
|
|
25
|
+
pdf: "application/pdf",
|
|
26
|
+
image: "image/*"
|
|
27
|
+
}[this._props.type]
|
|
28
|
+
};
|
|
29
|
+
},
|
|
30
|
+
methods: {
|
|
31
|
+
doChange(event, target) {
|
|
32
|
+
this.$emit("change", target.files);
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
style: {
|
|
36
|
+
content: style
|
|
37
|
+
}
|
|
38
38
|
});
|
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
.ui-select-file-view{
|
|
2
|
-
&>.title {
|
|
3
|
-
text-align: center;
|
|
4
|
-
font-weight: 700;
|
|
5
|
-
color: rgb(26, 26, 26);
|
|
6
|
-
font-size: 36px;
|
|
7
|
-
line-height: 48px;
|
|
8
|
-
padding-top: 30px;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
&>.tips {
|
|
12
|
-
text-align: center;
|
|
13
|
-
line-height: 30px;
|
|
14
|
-
font-size: 22px;
|
|
15
|
-
color: rgb(26, 26, 26);
|
|
16
|
-
font-weight: 300;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
&>.file {
|
|
20
|
-
text-align: center;
|
|
21
|
-
margin-top: 30px;
|
|
22
|
-
|
|
23
|
-
input {
|
|
24
|
-
display: none;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
label {
|
|
28
|
-
line-height: 50px;
|
|
29
|
-
display: inline-block;
|
|
30
|
-
border: 1px solid gray;
|
|
31
|
-
background-image: url("./images/addFile.svg");
|
|
32
|
-
background-repeat: no-repeat;
|
|
33
|
-
background-position: 5px center;
|
|
34
|
-
background-size: auto 70%;
|
|
35
|
-
padding-left: 40px;
|
|
36
|
-
padding-right: 10px;
|
|
37
|
-
border-radius: 5px;
|
|
38
|
-
|
|
39
|
-
&:hover {
|
|
40
|
-
text-decoration: underline;
|
|
41
|
-
cursor: pointer;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
1
|
+
.ui-select-file-view{
|
|
2
|
+
&>.title {
|
|
3
|
+
text-align: center;
|
|
4
|
+
font-weight: 700;
|
|
5
|
+
color: rgb(26, 26, 26);
|
|
6
|
+
font-size: 36px;
|
|
7
|
+
line-height: 48px;
|
|
8
|
+
padding-top: 30px;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&>.tips {
|
|
12
|
+
text-align: center;
|
|
13
|
+
line-height: 30px;
|
|
14
|
+
font-size: 22px;
|
|
15
|
+
color: rgb(26, 26, 26);
|
|
16
|
+
font-weight: 300;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&>.file {
|
|
20
|
+
text-align: center;
|
|
21
|
+
margin-top: 30px;
|
|
22
|
+
|
|
23
|
+
input {
|
|
24
|
+
display: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
label {
|
|
28
|
+
line-height: 50px;
|
|
29
|
+
display: inline-block;
|
|
30
|
+
border: 1px solid gray;
|
|
31
|
+
background-image: url("./images/addFile.svg");
|
|
32
|
+
background-repeat: no-repeat;
|
|
33
|
+
background-position: 5px center;
|
|
34
|
+
background-size: auto 70%;
|
|
35
|
+
padding-left: 40px;
|
|
36
|
+
padding-right: 10px;
|
|
37
|
+
border-radius: 5px;
|
|
38
|
+
|
|
39
|
+
&:hover {
|
|
40
|
+
text-decoration: underline;
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
45
|
}
|
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
<h2 z-bind="title"></h2>
|
|
2
|
-
<div class="right-btn">
|
|
3
|
-
<div>
|
|
4
|
-
<fieldset>
|
|
5
|
-
<legend>
|
|
6
|
-
当前大小
|
|
7
|
-
</legend>
|
|
8
|
-
<ul z-bind:lock="title=='图像大小'?'yes':'no'">
|
|
9
|
-
<li>
|
|
10
|
-
<label>宽度:</label>
|
|
11
|
-
<span z-bind="width"></span>px
|
|
12
|
-
</li>
|
|
13
|
-
<li>
|
|
14
|
-
<label>宽度:</label>
|
|
15
|
-
<span z-bind="height"></span>px
|
|
16
|
-
</li>
|
|
17
|
-
</ul>
|
|
18
|
-
</fieldset>
|
|
19
|
-
<fieldset>
|
|
20
|
-
<legend>
|
|
21
|
-
新建大小
|
|
22
|
-
</legend>
|
|
23
|
-
<ul z-bind:lock="title=='图像大小'?'yes':'no'">
|
|
24
|
-
<li>
|
|
25
|
-
<label>宽度(W):</label>
|
|
26
|
-
<input type="text" z-model="newWidth" z-on:input="calcHeight">
|
|
27
|
-
px
|
|
28
|
-
</li>
|
|
29
|
-
<li>
|
|
30
|
-
<label>高度(H):</label>
|
|
31
|
-
<input type="text" z-model="newHeight" z-on:input="calcWidth">
|
|
32
|
-
px
|
|
33
|
-
</li>
|
|
34
|
-
<li z-bind:active="title=='画布大小'?'yes':'no'">
|
|
35
|
-
<label>定位:</label>
|
|
36
|
-
<div class="change-type" z-bind:type="changeType">
|
|
37
|
-
<span z-on:click="doChangeType" val="left-top"></span>
|
|
38
|
-
<span z-on:click="doChangeType" val="center-top"></span>
|
|
39
|
-
<span z-on:click="doChangeType" val="right-top"></span>
|
|
40
|
-
<span z-on:click="doChangeType" val="left-middle"></span>
|
|
41
|
-
<span z-on:click="doChangeType" val="center-middle"></span>
|
|
42
|
-
<span z-on:click="doChangeType" val="right-middle"></span>
|
|
43
|
-
<span z-on:click="doChangeType" val="left-bottom"></span>
|
|
44
|
-
<span z-on:click="doChangeType" val="center-bottom"></span>
|
|
45
|
-
<span z-on:click="doChangeType" val="right-bottom"></span>
|
|
46
|
-
</div>
|
|
47
|
-
</li>
|
|
48
|
-
</ul>
|
|
49
|
-
</fieldset>
|
|
50
|
-
</div>
|
|
51
|
-
<div>
|
|
52
|
-
<button z-on:click="doSubmit">确定</button>
|
|
53
|
-
<button z-on:click="doClose">取消</button>
|
|
54
|
-
</div>
|
|
1
|
+
<h2 z-bind="title"></h2>
|
|
2
|
+
<div class="right-btn">
|
|
3
|
+
<div>
|
|
4
|
+
<fieldset>
|
|
5
|
+
<legend>
|
|
6
|
+
当前大小
|
|
7
|
+
</legend>
|
|
8
|
+
<ul z-bind:lock="title=='图像大小'?'yes':'no'">
|
|
9
|
+
<li>
|
|
10
|
+
<label>宽度:</label>
|
|
11
|
+
<span z-bind="width"></span>px
|
|
12
|
+
</li>
|
|
13
|
+
<li>
|
|
14
|
+
<label>宽度:</label>
|
|
15
|
+
<span z-bind="height"></span>px
|
|
16
|
+
</li>
|
|
17
|
+
</ul>
|
|
18
|
+
</fieldset>
|
|
19
|
+
<fieldset>
|
|
20
|
+
<legend>
|
|
21
|
+
新建大小
|
|
22
|
+
</legend>
|
|
23
|
+
<ul z-bind:lock="title=='图像大小'?'yes':'no'">
|
|
24
|
+
<li>
|
|
25
|
+
<label>宽度(W):</label>
|
|
26
|
+
<input type="text" z-model="newWidth" z-on:input="calcHeight">
|
|
27
|
+
px
|
|
28
|
+
</li>
|
|
29
|
+
<li>
|
|
30
|
+
<label>高度(H):</label>
|
|
31
|
+
<input type="text" z-model="newHeight" z-on:input="calcWidth">
|
|
32
|
+
px
|
|
33
|
+
</li>
|
|
34
|
+
<li z-bind:active="title=='画布大小'?'yes':'no'">
|
|
35
|
+
<label>定位:</label>
|
|
36
|
+
<div class="change-type" z-bind:type="changeType">
|
|
37
|
+
<span z-on:click="doChangeType" val="left-top"></span>
|
|
38
|
+
<span z-on:click="doChangeType" val="center-top"></span>
|
|
39
|
+
<span z-on:click="doChangeType" val="right-top"></span>
|
|
40
|
+
<span z-on:click="doChangeType" val="left-middle"></span>
|
|
41
|
+
<span z-on:click="doChangeType" val="center-middle"></span>
|
|
42
|
+
<span z-on:click="doChangeType" val="right-middle"></span>
|
|
43
|
+
<span z-on:click="doChangeType" val="left-bottom"></span>
|
|
44
|
+
<span z-on:click="doChangeType" val="center-bottom"></span>
|
|
45
|
+
<span z-on:click="doChangeType" val="right-bottom"></span>
|
|
46
|
+
</div>
|
|
47
|
+
</li>
|
|
48
|
+
</ul>
|
|
49
|
+
</fieldset>
|
|
50
|
+
</div>
|
|
51
|
+
<div>
|
|
52
|
+
<button z-on:click="doSubmit">确定</button>
|
|
53
|
+
<button z-on:click="doClose">取消</button>
|
|
54
|
+
</div>
|
|
55
55
|
</div>
|