220 lines
9.1 KiB
HTML
220 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Ciyon Docs - 众产全栈开发框架</title>
|
||
<meta name="keywords" content="全栈开发框架,Golang开发框架,PHP开发框架,移动端开发框架,Vue3开发框架" />
|
||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
|
||
<link rel="stylesheet" href="/jscss/style.css" />
|
||
<link rel="stylesheet" href="/jscss/web.css" />
|
||
<script src="/jscss/theme.js"></script>
|
||
|
||
<style>
|
||
.treemenu ul {
|
||
list-style-type: none;
|
||
}
|
||
|
||
.treemenu li {
|
||
cursor: pointer;
|
||
padding: 0.5em 0;
|
||
margin-left: 1em;
|
||
}
|
||
|
||
.menu {
|
||
min-width: 15em;
|
||
padding-right: 2em;
|
||
overflow: overlay;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.menubtn {
|
||
display: none;
|
||
bottom: -0.6em;
|
||
left: -0.3em;
|
||
font-size: 3em;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.menu.close {
|
||
min-width: 0;
|
||
width: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
.menubtn {
|
||
display: block;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app" style="display:flex;flex-direction:column;height:100vh;">
|
||
<header class="rel">
|
||
<div style="padding: 1em 2em;font-size: 1.2em;">Ciyon Docs - 众产全栈开发框架</div>
|
||
<div v-if="!mbmenu" @click="mbmenu = !mbmenu" class="menubtn abs">💠</div>
|
||
</header>
|
||
<div style="height:1px;background: linear-gradient(90deg, #99999922, #999999, #99999922);"></div>
|
||
<div style="display:flex;flex:1;min-height:0;">
|
||
<div class="menu" :class="{ 'close': !mbmenu }">
|
||
<ciy-treemenu :tree-data="menuData" @node-selected="onNodeSelected"></ciy-treemenu>
|
||
</div>
|
||
<div style="width:1px;background: linear-gradient(0deg, transparent, #999999, #99999944);"></div>
|
||
<main style="flex:1;overflow: overlay;padding:0 0.5em;max-width: 60em;">
|
||
<div v-if="helpdata" v-html="helpdata">
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<footer class="hidden-dn-sm">
|
||
<div>© 2018-2026 众产®. All Rights Reserved.</div>
|
||
<div>
|
||
<a href="https://ciy.cn/" target="_blank" class="un">众产</a>
|
||
<a href="https://ciy.cn/code/" target="_blank" class="un">众产IT工程</a>
|
||
<a href="https://ciy.cn/tc/" target="_blank" class="un">众产区块链</a>
|
||
</div>
|
||
<div>众产（杭州）科技有限公司</div>
|
||
<div>
|
||
<a href="https://beian.miit.gov.cn" target="_blank" nofollow>浙ICP备19004547号-1</a>
|
||
</div>
|
||
</footer>
|
||
<footer class="hidden-up-sm">
|
||
<div>
|
||
<a href="https://ciy.cn/" target="_blank" class="un">众产</a>
|
||
<a href="https://ciy.cn/code/" target="_blank" class="un">众产IT工程</a>
|
||
<a href="https://ciy.cn/tc/" target="_blank" class="un">众产区块链</a>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
<div style="position: fixed; z-index:7;right:0;bottom:0;">
|
||
<div title="转到白天模式" class="mode-light" onclick="ciy_chgtheme(true)"></div>
|
||
<div title="转到暗夜模式" class="mode-dark" onclick="ciy_chgtheme(false)"></div>
|
||
<a title="返回顶部" class="btn-totop" onclick="gotop()"></a>
|
||
</div>
|
||
<div class="bgbtm"></div>
|
||
<script src="/jscss/vue3.js"></script>
|
||
<script src="components/treemenu.js"></script>
|
||
<script src="/jscss/ciy.js"></script>
|
||
<script src="/jscss/ciycmp2.js"></script>
|
||
<script src="/jscss/web.js"></script>
|
||
<script>
|
||
var ciy_vars = {
|
||
"storlist": { '/': '/ud/' }
|
||
};
|
||
function createVueApp() {
|
||
const app = Vue.createApp({
|
||
components: {
|
||
'ciy-treemenu': CiyTreemenu
|
||
},
|
||
data() {
|
||
console.log('2. data() - 初始化数据');
|
||
return {
|
||
mbmenu: false,
|
||
helpdata: '',
|
||
menuData: []
|
||
};
|
||
},
|
||
beforeCreate() {
|
||
console.log('1. beforeCreate() - 实例初始化之后，数据观测和事件配置之前');
|
||
},
|
||
created() {
|
||
console.log('3. created() - 实例创建完成后被立即调用');
|
||
//console.log(`此时可以访问数据: count = ${this.count}`);
|
||
},
|
||
beforeMount() {
|
||
console.log('4. beforeMount() - 挂载开始之前被调用');
|
||
},
|
||
mounted() {
|
||
console.log('5. mounted() - 实例被挂载后调用，此时可以访问DOM元素');
|
||
ciyfn.callfunc('init', {}, json => {
|
||
this.menuData = conv_treedata(json.menu, 0, 0);
|
||
ciyfn.ajax({
|
||
url: '/ud/docs/1_' + json.menu[0].uptimes + '.txt', method: 'GET', success: txt => {
|
||
this.helpdata = ciyfn.markdown(txt);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
beforeUpdate() {
|
||
console.log('6. beforeUpdate() - 数据更新时调用，发生在虚拟DOM打补丁之前');
|
||
//console.log(`当前count值: ${this.count}`);
|
||
},
|
||
updated() {
|
||
console.log('7. updated() - 由于数据更改导致的虚拟DOM重新渲染和打补丁后调用');
|
||
//console.log(`更新后count值: ${this.count}`);
|
||
},
|
||
beforeUnmount() {
|
||
console.log('8. beforeUnmount() - 实例销毁之前调用');
|
||
},
|
||
unmounted() {
|
||
console.log('9. unmounted() - 实例销毁后调用');
|
||
},
|
||
errorCaptured(err, vm, info) {
|
||
console.log('errorCaptured() - 捕获子孙组件的错误时调用');
|
||
console.error(`错误: ${err.toString()}\n信息: ${info}`);
|
||
// 可以返回false阻止错误继续向上传播
|
||
return true;
|
||
},
|
||
renderTracked({ key, target, type }) {
|
||
// console.log('renderTracked() - 跟踪虚拟DOM重新渲染时调用');
|
||
// console.log(`键: ${key}, 目标: ${target}, 类型: ${type}`);
|
||
},
|
||
renderTriggered({ key, target, type }) {
|
||
// console.log('renderTriggered() - 触发虚拟DOM重新渲染时调用');
|
||
// console.log(`键: ${key}, 目标: ${target}, 类型: ${type}`);
|
||
},
|
||
methods: {
|
||
onNodeSelected(node) {
|
||
if (this.selectnode)
|
||
this.selectnode.select = false;
|
||
this.selectnode = node;
|
||
this.mbmenu = false;
|
||
if (node.uptimes == 0)
|
||
return this.helpdata = '<div style="padding:1em;color:var(--dag5);">文档' + node.id + '未开始录入</div>';
|
||
ciyfn.ajax({
|
||
url: '/ud/docs/' + node.id + '_' + node.uptimes + '.txt', method: 'GET', success: txt => {
|
||
node.select = true;
|
||
this.helpdata = ciyfn.markdown(txt);
|
||
gotop();
|
||
}, fail: () => {
|
||
this.helpdata = '<div style="padding:1em;color:var(--dag5);">文档' + node.id + '不存在</div>';
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
app.mount('#app');
|
||
}
|
||
|
||
function conv_treedata(rows, rootid) {
|
||
var ret = [];
|
||
var cnt = rows.length;
|
||
for (var i = 0; i < cnt; i++) {
|
||
if (rows[i].id < 10)
|
||
continue;
|
||
if (rows[i].upid != rootid)
|
||
continue;
|
||
var tree = {};
|
||
tree.id = rows[i]['id'];
|
||
tree.name = rows[i]['name'];
|
||
tree.uptimes = rows[i]['uptimes'];
|
||
tree.expanded = true;
|
||
var childtree = conv_treedata(rows, rows[i]['id']);
|
||
if (childtree.length > 0)
|
||
tree.children = childtree;
|
||
ret.push(tree);
|
||
}
|
||
return ret;
|
||
}
|
||
function gotop() {
|
||
document.querySelector('main').scrollTo({
|
||
top: 0,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
document.addEventListener('DOMContentLoaded', createVueApp);
|
||
</script>
|
||
</body>
|
||
|
||
</html> |