mirror of
https://github.com/rubickCenter/rubick
synced 2025-12-22 18:22:53 +08:00
feat: 支持 uTools list 模板
This commit is contained in:
muwoo
28
static/plugins/tpl/doc.js
Normal file
28
static/plugins/tpl/doc.js
Normal file
@@ -0,0 +1,28 @@
|
||||
export default {
|
||||
template: `
|
||||
<div class="doc-container">
|
||||
<div class="menu">
|
||||
<div @click="active = index" :class="active === index ? 'active item' : 'item'" v-for="(item, index) in menu">
|
||||
<div class="title">{{item.t}}</div>
|
||||
<div class="desc">{{item.d}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<iframe class="frame" :src="path" />
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
query: this.$route.query,
|
||||
menu: [],
|
||||
active: 0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.menu = JSON.parse(this.query.args).indexes || [];
|
||||
},
|
||||
computed: {
|
||||
path() {
|
||||
return decodeURIComponent(this.query.rootPath) + (this.menu[this.active] || {}).p
|
||||
}
|
||||
}
|
||||
}
|
||||
110
static/plugins/tpl/index.html
Normal file
110
static/plugins/tpl/index.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<script src="../vue.min.js"></script>
|
||||
<script src="../vue-router.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.doc-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.doc-container .menu {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
border-right: 1px solid #ddd;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
}
|
||||
.doc-container .menu .item.active {
|
||||
background: #DEE2E6;
|
||||
}
|
||||
.doc-container .menu .item {
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.doc-container .menu .title {
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
.doc-container .menu .desc {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
.frame {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
.options {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
max-height: calc(100vh);
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
.options::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
.op-item {
|
||||
padding: 0 10px;
|
||||
height: 60px;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
background: #fafafa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.title {
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.desc {
|
||||
color: #999;
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.op-item.active {
|
||||
background: #DEE2E8;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
</body>
|
||||
<script src="./doc.js" type="module"></script>
|
||||
<script src="./list.js" type="module"></script>
|
||||
<script src="./index.js" type="module"></script>
|
||||
</html>
|
||||
43
static/plugins/tpl/index.js
Normal file
43
static/plugins/tpl/index.js
Normal file
@@ -0,0 +1,43 @@
|
||||
import doc from './doc.js';
|
||||
import list from './list.js';
|
||||
|
||||
function getQueryVariable(variable) {
|
||||
var query = window.location.search.substring(1);
|
||||
var vars = query.split("&");
|
||||
for (var i=0;i<vars.length;i++) {
|
||||
var pair = vars[i].split("=");
|
||||
if(pair[0] == variable){return pair[1];}
|
||||
}
|
||||
return(false);
|
||||
}
|
||||
|
||||
const routes = [
|
||||
{ path: '/doc', name: 'doc', component: doc },
|
||||
{ path: '/list', name: 'list', component: list },
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
routes
|
||||
})
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
config: window.exports,
|
||||
code: '',
|
||||
current: {},
|
||||
},
|
||||
mounted() {
|
||||
this.code = getQueryVariable('code');
|
||||
this.current = this.config[this.code];
|
||||
this.$router.push({
|
||||
name: this.current.mode,
|
||||
query: {
|
||||
args: JSON.stringify(this.current.args),
|
||||
rootPath: getQueryVariable('targetFile').replace('index.html', '')
|
||||
},
|
||||
})
|
||||
|
||||
},
|
||||
router,
|
||||
})
|
||||
60
static/plugins/tpl/list.js
Normal file
60
static/plugins/tpl/list.js
Normal file
@@ -0,0 +1,60 @@
|
||||
function getQueryVariable(variable) {
|
||||
var query = window.location.search.substring(1);
|
||||
var vars = query.split("&");
|
||||
for (var i=0;i<vars.length;i++) {
|
||||
var pair = vars[i].split("=");
|
||||
if(pair[0] == variable){return pair[1];}
|
||||
}
|
||||
return(false);
|
||||
}
|
||||
|
||||
export default {
|
||||
template: `
|
||||
<div class="list-container">
|
||||
<div class="options" v-show="!!lists.length">
|
||||
<div :class="currentSelect === index ? 'active op-item' : 'op-item'" v-for="(item, index) in lists" @click="() => select(item)">
|
||||
<img class="icon" :src="item.icon" />
|
||||
<div class="content">
|
||||
<div class="title">{{item.title}}</div>
|
||||
<div class="desc">{{decodeURIComponent(item.description)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
query: this.$route.query,
|
||||
menu: [],
|
||||
active: 0,
|
||||
config: window.exports,
|
||||
lists: [],
|
||||
currentSelect: 0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.code = getQueryVariable('code');
|
||||
this.current = this.config[this.code];
|
||||
this.current.args.enter && this.current.args.enter({code: this.code, type: '', payload: [] }, (lists) => {
|
||||
this.lists = lists;
|
||||
});
|
||||
ipcRenderer.on(`changeCurrent`, (e, result) => {
|
||||
if (this.currentSelect + result > this.lists.length - 1 || this.currentSelect + result < 0) return;
|
||||
this.currentSelect = this.currentSelect + result;
|
||||
});
|
||||
ipcRenderer.on(`msg-back-setSubInput`, (e, result) => {
|
||||
this.current.args.search && this.current.args.search({code: this.code, type: '', payload: [] }, result, (lists) => {
|
||||
this.lists = lists;
|
||||
})
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
select(item) {
|
||||
this.current.args.select && this.current.args.select({code: this.code, type: '', payload: [] }, item);
|
||||
},
|
||||
renderTitle(title) {
|
||||
const result = title.split(this.searchValue);
|
||||
return `<div>${result[0]}<span style="color: red">${this.searchValue}</span>${result[1]}</div>`
|
||||
},
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user