362 lines
14 KiB
HTML
362 lines
14 KiB
HTML
<!--
|
||
* @Author: Qiang 1841747216@qq.com
|
||
* @Date: 2025-07-14 14:18:04
|
||
* @LastEditors: Qiang 1841747216@qq.com
|
||
* @LastEditTime: 2025-07-14 19:10:10
|
||
* @FilePath: \编辑器\module.html
|
||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||
-->
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>模块页面</title>
|
||
<link rel="stylesheet" href="lib/layui/css/layui.css">
|
||
<link rel="stylesheet" href="lib/prism/prism.css">
|
||
<link rel="stylesheet" href="fonts/icon/iconfont.css">
|
||
<style>
|
||
body {
|
||
background: #1E1E1E;
|
||
color: #fff
|
||
}
|
||
|
||
#librarys .layui-tree-entry:hover {
|
||
background: #555;
|
||
}
|
||
|
||
#librarys .layui-tree-icon {
|
||
border: 0;
|
||
}
|
||
|
||
#librarys .layui-tree-txt {
|
||
color: #fff;
|
||
-webkit-touch-callout: inherit;
|
||
-moz-user-select: text;
|
||
-webkit-user-select: text;
|
||
-ms-user-select: text;
|
||
-khtml-user-select: text;
|
||
user-select: text;
|
||
}
|
||
|
||
.iconfont {
|
||
vertical-align: middle;
|
||
margin-right: 5px;
|
||
color: #dddd00;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.icon-javascript {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.icon-html {
|
||
color: #e37933;
|
||
}
|
||
|
||
.icon-html1 {
|
||
color: #e37933;
|
||
}
|
||
|
||
.icon-css {
|
||
color: #519aba;
|
||
}
|
||
|
||
.layui-tab-close {
|
||
visibility: hidden;
|
||
}
|
||
|
||
.icon-jpg,
|
||
.icon-png,
|
||
.icon-svg,
|
||
.icon-gif {
|
||
color: #7ccdff;
|
||
}
|
||
|
||
#librarys {
|
||
width: 300px;
|
||
}
|
||
|
||
#libraryInfoPopup,
|
||
.ace_doc-tooltip {
|
||
position: fixed;
|
||
background: #fff;
|
||
color: #002240;
|
||
box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 0;
|
||
border-radius: 3px;
|
||
max-width: 700px;
|
||
min-width: 320px;
|
||
min-height: 120px;
|
||
max-height: calc(100vh - 165px);
|
||
padding: 15px;
|
||
transition: all 0.3s;
|
||
z-index: 100;
|
||
overflow-y: auto;
|
||
-webkit-touch-callout: text;
|
||
-moz-user-select: text;
|
||
-webkit-user-select: text;
|
||
-ms-user-select: text;
|
||
-khtml-user-select: text;
|
||
user-select: text;
|
||
white-space: normal;
|
||
}
|
||
|
||
#libraryInfoPopup p a,
|
||
.ace_doc-tooltip p a {
|
||
color: #607d8b;
|
||
}
|
||
|
||
#libraryInfoPopup .layui-btn,
|
||
.ace_doc-tooltip .layui-btn {
|
||
color: white;
|
||
}
|
||
|
||
#libraryInfoPopup hr,
|
||
.ace_doc-tooltip hr {
|
||
border-color: #002240 !important;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
#libraryInfoPopup table,
|
||
.ace_doc-tooltip table {
|
||
margin: 10px 0;
|
||
border-color: #002240 !important;
|
||
background: #fff;
|
||
color: #333;
|
||
width: 100% !important;
|
||
max-width: 100%;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
#libraryInfoPopup table th,
|
||
.ace_doc-tooltip table th,
|
||
#libraryInfoPopup table td,
|
||
.ace_doc-tooltip table td {
|
||
border: 1px solid #d4d4d4;
|
||
padding: 7px 15px;
|
||
}
|
||
|
||
#libraryInfoPopup table tr,
|
||
.ace_doc-tooltip table tr {
|
||
background-color: #f6f4f0;
|
||
}
|
||
|
||
#libraryInfoPopup .layui-tab {
|
||
background: #272822;
|
||
color: #fff;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
#libraryInfoPopup .layui-tab .layui-tab-title li.layui-this {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: #fff;
|
||
}
|
||
|
||
#libraryInfoPopup .layui-tab .layui-tab-title li.layui-this:after {
|
||
display: none;
|
||
}
|
||
|
||
#libraryInfoPopup .layui-tab .layui-tab-content {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.ace_tooltip {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.library_popup .layui-layer-content {
|
||
overflow: hidden !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="librarys"></div>
|
||
<script defer src="lib/prism/prism.js"></script>
|
||
<script src="lib/layui/layui.js"></script>
|
||
<script>
|
||
layui.use(['tree'], function () {
|
||
var tree = layui.tree;
|
||
var $ = layui.$;
|
||
var element = layui.element;
|
||
// 中文提示
|
||
var typeTips = {
|
||
"?": "未知类型",
|
||
"number": "数值类",
|
||
"string": "字符串类",
|
||
"bool": "逻辑型类",
|
||
"function": "方法",
|
||
"event": "事件",
|
||
"array": "数组类",
|
||
"object": "对象类",
|
||
"{}": "对象类",
|
||
"代码片段": "代码片段",
|
||
"user": "用户代码",
|
||
"attr": "属性",
|
||
"label": "标签",
|
||
"ecmascript": "语法分析",
|
||
"RegExp": "正则"
|
||
};
|
||
var _timer;
|
||
tree.render({
|
||
id: 'librarys',
|
||
elem: '#librarys',
|
||
data: [],
|
||
showLine: true,
|
||
accordion: true,
|
||
txtclick: true,
|
||
// 鼠标移动上去显示用法
|
||
mouseenter: function (obj) {
|
||
if (obj.data.type === 'library' || obj.data.type === 'group') {
|
||
return false;
|
||
}
|
||
$("#libraryInfoPopup").remove();
|
||
let _top = $(obj.elem).offset().top;
|
||
let _left = $("#librarys").width();
|
||
let _bottom = $(window).height() - _top - 50;
|
||
let _parameter = [];
|
||
if (obj.data.parameter && obj.data.parameter.length > 0 && obj.data.T_IfType != 2) {
|
||
_parameter.push('<br><h4><strong>参数列表：</strong><small style="color:red;">点击参数查看参数描述*</small></h4>');
|
||
_parameter.push(`<div class="layui-collapse">`);
|
||
obj.data.parameter.forEach((v, i) => {
|
||
let parameter_list_html = `<div class="layui-colla-item">
|
||
<div class="layui-colla-title">
|
||
<p>参数${v.int}: ${v.title} -> (${typeTips[v.Class] || v.Class})<span style="color:red;">【${v.Type === 2 ? '必需' : '可选'}】</span></p>
|
||
</div>
|
||
<div class="layui-colla-content">${v.usage}</div>
|
||
</div>`
|
||
_parameter.push(parameter_list_html);
|
||
})
|
||
_parameter.push('</div><br>');
|
||
_parameter = _parameter.join("")
|
||
}
|
||
if (obj.data.T_IfType == 2) {
|
||
if (obj.data.parameter && obj.data.parameter.length > 0) {
|
||
_parameter.push(`<h4><strong>命令类型：</strong>属性/可读写</h4>`);
|
||
} else {
|
||
_parameter.push(`<h4><strong>命令类型：</strong>属性/仅可读</h4>`);
|
||
}
|
||
_parameter = _parameter.join("")
|
||
}
|
||
let compatible_html = '';
|
||
if (obj.data["支持平台"]) {
|
||
compatible_html = `<h4 style="float: left;"><strong>支持的平台：</strong></h4><div class="layui-btn-container">`
|
||
let compatible_title = Object.keys(obj.data["支持平台"]);
|
||
compatible_title.forEach(v => {
|
||
if (obj.data["支持平台"][v] === "1") {
|
||
compatible_html += `<button type="button" class="layui-btn layui-btn-normal layui-btn-xs">${v}</button> `;
|
||
}
|
||
});
|
||
compatible_html += `</div>`;
|
||
};
|
||
let _explain = ``;
|
||
if (obj.data.explain) {
|
||
_explain = `<h4 style="margin-top: 10px"><strong>命令实例：</strong></h4>
|
||
<p><pre class="line-numbers" data-start='1'><code class="language-${obj.data.CodeType ? obj.data.CodeType : 'html'}">${obj.data.explain.replace(/</g, '<')}</code></pre></p>`;
|
||
}
|
||
let _html = `<div id="libraryInfoPopup" onmouseleave="$(this).remove();" style="left:${_left}px">
|
||
<h5 style="color: red">命令中文用法 ${obj.data.title.replace(/</g, '<')}；</h5>
|
||
<h5 style="color: green">命令英文用法 ${obj.data.title_en ? obj.data.title_en.replace(/</g, '<') : ''}；</h5>
|
||
<hr>
|
||
<div style="overflow-y: auto">
|
||
<h4><strong>命令解释：</strong></h4>
|
||
${obj.data.usage}
|
||
${_explain}
|
||
<table class="layui-table">
|
||
<colgroup>
|
||
<col width="30%">
|
||
<col>
|
||
</colgroup>
|
||
${obj.data.ReturnClass ? '<tr><th><strong>返回类型：</strong></th><td>' + obj.data.ReturnClass + '</td></tr>' : ''}
|
||
${obj.data.ReturnText ? '<tr><th><strong>返回值：</strong></th><td>' : ''}
|
||
${obj.data.ReturnText ? obj.data.ReturnText + '</td></tr>' : obj.data.ReturnText === '' ? '没有返回值</td></tr>' : '</td></tr>'}
|
||
${obj.data.T_static ? '<tr><th><strong>静态命令：</strong></th><td>' : ''}
|
||
${obj.data.T_static ? obj.data.T_static === 1 ? '静态</td></tr>' : obj.data.T_static === 2 ? '非静态</td></tr>' : '静态和非静态都支持</td></tr>' : ''}
|
||
${obj.data.T_static ? "<tr><th><strong>是否全局：</strong></th><td>" + ((obj.data.T_static == 3) ? "真" : "假") + " </td></tr>" : "</td></tr>"}
|
||
</table>
|
||
${_parameter}
|
||
${compatible_html}
|
||
</div>
|
||
</div>`;
|
||
_timer && clearTimeout(_timer);
|
||
_timer = setTimeout(() => {
|
||
$(obj.elem).append(_html);
|
||
let _height = $("#libraryInfoPopup").height();
|
||
|
||
if (_height > _bottom) {
|
||
$("#libraryInfoPopup").css({
|
||
"bottom": "24px",
|
||
"max-height": "calc(100vh - 124px)"
|
||
});
|
||
} else {
|
||
$("#libraryInfoPopup").css({
|
||
"top": _top,
|
||
"max-height": "calc(100vh - " + parseInt(_top + 50) + "px)"
|
||
})
|
||
}
|
||
document.querySelectorAll("pre code").forEach(block => Prism.highlightElement(block));
|
||
element.render("collapse");
|
||
}, 300);
|
||
$(obj.elem).mouseleave(function () {
|
||
clearTimeout(_timer);
|
||
$("#libraryInfoPopup").remove();
|
||
})
|
||
}
|
||
});
|
||
let libraryData = [];
|
||
// 请求文件
|
||
function getLibraryData(url, callback) {
|
||
fetch(url)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data != "404-请求文件不存在") {
|
||
if (data['children']) {
|
||
data['children'].sort(function (a, b) {
|
||
return a.title.length - b.title.length
|
||
});
|
||
data['children'].forEach((v2, k2) => {
|
||
v2['children'].sort(function (a, b) {
|
||
return a.title.length - b.title.length
|
||
});
|
||
v2['children'].forEach((v3, k3) => {
|
||
v3['children'] && v3['children'].sort(function (a, b) {
|
||
return a.title.length - b.title.length
|
||
});
|
||
})
|
||
});
|
||
}
|
||
callback(data)
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
// 添加支持库数据
|
||
getLibraryData("library/FOFjqurey.json", function (data) {
|
||
tree.addData('librarys', [data]);
|
||
});
|
||
getLibraryData("library/layui.json", function (data) {
|
||
tree.addData('librarys', [data]);
|
||
});
|
||
getLibraryData("library/layui.json", function (data) {
|
||
tree.addData('librarys', [data]);
|
||
});
|
||
getLibraryData("library/html/htmljc.json", function (data) {
|
||
tree.addData('librarys', [data]);
|
||
});
|
||
getLibraryData("library/css/csscodejc.json", function (data) {
|
||
tree.addData('librarys', [data]);
|
||
});
|
||
|
||
// 删除支持库数据 id格式 tree-支持库标题
|
||
setTimeout(function () {
|
||
// $("#tree-layui框架").remove();
|
||
}, 5000);
|
||
})
|
||
</script>
|
||
</body>
|
||
|
||
</html> |