mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-08 06:45:34 +08:00
增加添加手册的UI
This commit is contained in:
parent
b5e626c631
commit
16f7fe1e70
@ -1,12 +1,12 @@
|
||||
#options {
|
||||
display: none;
|
||||
font-size: 15px;
|
||||
color: #595959
|
||||
color: #595959;
|
||||
font-family: consolas, monaco,"微软雅黑";
|
||||
padding-bottom: 30px
|
||||
}
|
||||
|
||||
#options *{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -127,7 +127,7 @@
|
||||
|
||||
#options table td {
|
||||
border-collapse: collapse;
|
||||
padding: 12px 9px;
|
||||
padding: 6px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@ -152,6 +152,120 @@
|
||||
margin-right: 5px
|
||||
}
|
||||
|
||||
#options img{
|
||||
#options .logo{
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
#options .addBtn{
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 2px;
|
||||
border-radius: 4px;
|
||||
background: #00af2c;
|
||||
color: white;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#options .addBtn:hover{
|
||||
background: #068506;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
#options .foot{
|
||||
position: fixed;
|
||||
height: 30px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background: #f3f3f3;
|
||||
box-shadow: 0px 0px 9px 0px #00000030;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#options span{
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#options span.editBtn{
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: #00af2c;
|
||||
}
|
||||
#options span.delBtn{
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: #ed5b49
|
||||
}
|
||||
|
||||
#options span.editBtn:hover{
|
||||
color: #057205;
|
||||
}
|
||||
|
||||
#options span.delBtn:hover{
|
||||
color: #bd3523;
|
||||
}
|
||||
|
||||
#options #customize{
|
||||
position: fixed;
|
||||
right: -370px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding: 30px;
|
||||
box-shadow: 0px 0px 9px 0px #00000030;
|
||||
color: black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#options #customize p{
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
#options #customize input{
|
||||
width: 300px;
|
||||
height: 25px;
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
border-top:0px;
|
||||
border-left:0px;
|
||||
border-right:0px;
|
||||
font-size: 15px
|
||||
}
|
||||
|
||||
#options #customize input:hover {
|
||||
border-bottom-color: #9e9e9ec7;
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
#options #customize input:focus {
|
||||
outline: none;
|
||||
border-bottom-color: #0277BD;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
#options #customize button{
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
border-width: 0px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#options #customize button.cancelBtn{
|
||||
background: #808080c9;
|
||||
}
|
||||
|
||||
#options #customize button.saveBtn{
|
||||
background: #1E90FF;
|
||||
}
|
||||
|
||||
#options #customize button.saveBtn:hover{
|
||||
background: #5599FF;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
#options #customize button.cancelBtn:hover{
|
||||
background: #a5a2a2c9;
|
||||
transition: 0.5s;
|
||||
}
|
@ -1,117 +1,174 @@
|
||||
// 默认手册
|
||||
getDefaultFeatures = () => {
|
||||
return {
|
||||
// 默认和自定义手册
|
||||
getAllFeatures = () => {
|
||||
var defaultFts = {
|
||||
"linux": {
|
||||
"code": "linux",
|
||||
"explain": "linux命令大全",
|
||||
"cmds": ["linux命令"],
|
||||
"icon": "logo/linux.png"
|
||||
features: {
|
||||
"code": "linux",
|
||||
"explain": "linux命令大全",
|
||||
"cmds": ["linux命令"],
|
||||
"icon": "logo/linux.png"
|
||||
},
|
||||
type: "default"
|
||||
},
|
||||
"php": {
|
||||
"code": "php",
|
||||
"explain": "官方php函数文档",
|
||||
"cmds": ["php函数"],
|
||||
"icon": "logo/php.png"
|
||||
features: {
|
||||
"code": "php",
|
||||
"explain": "官方php函数文档",
|
||||
"cmds": ["php函数"],
|
||||
"icon": "logo/php.png"
|
||||
},
|
||||
type: "default"
|
||||
},
|
||||
"python": {
|
||||
"code": "python",
|
||||
"explain": "官方python标准库及常用第三方库文档",
|
||||
"cmds": ["python库"],
|
||||
"icon": "logo/python.png"
|
||||
features: {
|
||||
"code": "python",
|
||||
"explain": "官方python标准库及常用第三方库文档",
|
||||
"cmds": ["python库"],
|
||||
"icon": "logo/python.png"
|
||||
},
|
||||
type: "default"
|
||||
},
|
||||
"c": {
|
||||
"code": "c",
|
||||
"explain": "C语言函数速查",
|
||||
"cmds": ["C函数"],
|
||||
"icon": "logo/c.png"
|
||||
features: {
|
||||
"code": "c",
|
||||
"explain": "C语言函数速查",
|
||||
"cmds": ["C函数"],
|
||||
"icon": "logo/c.png"
|
||||
},
|
||||
type: "default"
|
||||
},
|
||||
"vim": {
|
||||
"code": "vim",
|
||||
"explain": "vim命令大全",
|
||||
"cmds": ["vim命令"],
|
||||
"icon": "logo/vim.png"
|
||||
features: {
|
||||
"code": "vim",
|
||||
"explain": "vim命令大全",
|
||||
"cmds": ["vim命令"],
|
||||
"icon": "logo/vim.png"
|
||||
},
|
||||
type: "default"
|
||||
},
|
||||
"git": {
|
||||
"code": "git",
|
||||
"explain": "git命令概览",
|
||||
"cmds": ["git命令"],
|
||||
"icon": "logo/git.png"
|
||||
features: {
|
||||
"code": "git",
|
||||
"explain": "git命令概览",
|
||||
"cmds": ["git命令"],
|
||||
"icon": "logo/git.png"
|
||||
},
|
||||
type: "default"
|
||||
},
|
||||
"docker": {
|
||||
"code": "docker",
|
||||
"explain": "docker常用命令",
|
||||
"cmds": ["docker命令"],
|
||||
"icon": "logo/docker.png"
|
||||
features: {
|
||||
"code": "docker",
|
||||
"explain": "docker常用命令",
|
||||
"cmds": ["docker命令"],
|
||||
"icon": "logo/docker.png"
|
||||
},
|
||||
type: "default"
|
||||
},
|
||||
"sql": {
|
||||
"code": "sql",
|
||||
"explain": "sql操作手册",
|
||||
"cmds": ["sql手册"],
|
||||
"icon": "logo/sql.png"
|
||||
features: {
|
||||
"code": "sql",
|
||||
"explain": "sql操作手册",
|
||||
"cmds": ["sql手册"],
|
||||
"icon": "logo/sql.png"
|
||||
},
|
||||
type: "default"
|
||||
},
|
||||
"utools": {
|
||||
"code": "utools",
|
||||
"explain": "uTools的API文档",
|
||||
"cmds": ["uToolsAPI"],
|
||||
"icon": "logo/utools.png"
|
||||
features: {
|
||||
"code": "utools",
|
||||
"explain": "uTools的API文档",
|
||||
"cmds": ["uToolsAPI"],
|
||||
"icon": "logo/utools.png"
|
||||
},
|
||||
type: "default"
|
||||
}
|
||||
};
|
||||
var db = utools.db.get("customFts");
|
||||
var customFts = db ? db.data : {}
|
||||
var allFts = Object.assign(defaultFts, customFts);
|
||||
return allFts;
|
||||
}
|
||||
|
||||
|
||||
// 配置页面
|
||||
showOptions = () => {
|
||||
$("#options").show();
|
||||
const dFeatures = getDefaultFeatures();
|
||||
var cFeatures = utools.getFeatures();
|
||||
var currentFts = utools.getFeatures();
|
||||
var allFts = getAllFeatures();
|
||||
let featureList = '<table><tr><td></td><td>关键字</td><td>说明</td><td>启用</td><td>主输入框搜索</td></tr>';
|
||||
for (var f in dFeatures) {
|
||||
for (var fts in allFts) {
|
||||
let features = allFts[fts].features;
|
||||
var cmds = '';
|
||||
dFeatures[f].cmds.forEach(cmd => {
|
||||
features.cmds.forEach(cmd => {
|
||||
if (typeof (cmd) == "string") cmds += `<span class="keyword">${cmd}</span>`;
|
||||
});
|
||||
var isChecked1 = '';
|
||||
var isChecked2 = '';
|
||||
var isDisabled = 'disabled';
|
||||
for(var c of cFeatures){
|
||||
if (c.code == dFeatures[f].code) {
|
||||
for(var c of currentFts){
|
||||
if (c.code == features.code) {
|
||||
isChecked1 = 'checked';
|
||||
isDisabled = '';
|
||||
if (typeof(c.cmds[c.cmds.length - 1]) != 'string') isChecked2 = 'checked';
|
||||
break;
|
||||
}
|
||||
}
|
||||
featureList += `<tr><td><img src="logo/${dFeatures[f].code}.png"></td>
|
||||
<td>${cmds}</td><td>${dFeatures[f].explain}</td><td>
|
||||
var editBtn = ""
|
||||
var logoDir = ""
|
||||
if (allFts[fts].type == "custom") {
|
||||
editBtn = `<span class="editBtn" code="${features.code}">✎</span>
|
||||
<span class="delBtn" code="${features.code}">✘</span>`;
|
||||
logoDir = allFts[fts].path + '/';
|
||||
}
|
||||
featureList += `<tr><td><img class="logo" src="${logoDir}logo/${features.code}.png"></td>
|
||||
<td>${cmds}</td><td width="300px">${features.explain}</td><td>
|
||||
<label class="switch-btn">
|
||||
<input class="checked-switch" id="${dFeatures[f].code}_1" type="checkbox" ${isChecked1}>
|
||||
<input class="checked-switch" id="${features.code}_1" type="checkbox" ${isChecked1}>
|
||||
<span class="text-switch"></span>
|
||||
<span class="toggle-btn"></span>
|
||||
</label></td><td>
|
||||
<label class="switch-btn">
|
||||
<input class="checked-switch" id="${dFeatures[f].code}_2" type="checkbox" ${isDisabled} ${isChecked2}>
|
||||
<input class="checked-switch" id="${features.code}_2" type="checkbox" ${isDisabled} ${isChecked2}>
|
||||
<span class="text-switch"></span>
|
||||
<span class="toggle-btn"></span>
|
||||
</label></td>`
|
||||
</label>${editBtn}</td>`
|
||||
};
|
||||
featureList += '</tr></table>'
|
||||
featureList += '</tr></table><div class="foot"><div class="addBtn">添加手册</div></div>'
|
||||
$("#options").html(featureList);
|
||||
}
|
||||
|
||||
showCustomize = () => {
|
||||
$("#customize").remove()
|
||||
customWindow = `<div id="customize">
|
||||
<p>名称:</p>
|
||||
<p><input type="text" id="code" placeholder="手册的名称, 请勿重复"></p>
|
||||
<p>关键字:</p>
|
||||
<p><input type="text" id="kw" placeholder="多个关键字用逗号隔开"></p>
|
||||
<p>说明:</p>
|
||||
<p><input type="text" id="desc" placeholder="手册功能的描述"></p>
|
||||
<p>路径:</p>
|
||||
<p><input type="text" id="path" placeholder="手册的绝对路径"></p>
|
||||
<p><button class="cancelBtn">取消</button>
|
||||
<button class="saveBtn">保存</button></p>`
|
||||
$("#options").append(customWindow)
|
||||
$("#customize").animate({ right: '0px'});
|
||||
}
|
||||
|
||||
// 监听开关
|
||||
$("#options").on('change', 'input[type=checkbox]', function () {
|
||||
const dFeatures = getDefaultFeatures();
|
||||
var allFts = getAllFeatures();
|
||||
var id = $(this).attr('id').split('_');
|
||||
var code = id[0]
|
||||
if (id[1] == '1') {
|
||||
if (!utools.removeFeature(code)) {
|
||||
utools.setFeature(dFeatures[code]);
|
||||
utools.setFeature(allFts[code].features);
|
||||
$(`#${code}_2`).prop('disabled', false);
|
||||
} else {
|
||||
$(`#${code}_2`).prop('checked', false);
|
||||
$(`#${code}_2`).prop('disabled', true);
|
||||
}
|
||||
} else {
|
||||
var featureConf = dFeatures[code];
|
||||
var featureConf = allFts[code].features;
|
||||
if($(this).prop('checked')){
|
||||
featureConf.cmds.push({
|
||||
"type": "over",
|
||||
@ -121,4 +178,68 @@ $("#options").on('change', 'input[type=checkbox]', function () {
|
||||
}
|
||||
utools.setFeature(featureConf);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#options").on('click', '.addBtn', function () {
|
||||
showCustomize();
|
||||
})
|
||||
|
||||
$("#options").on('click', '.cancelBtn', function () {
|
||||
$("#customize").animate({ right: '-370px'});
|
||||
})
|
||||
|
||||
$("#options").on('click', '.editBtn', function () {
|
||||
var code = $(this).attr('code');
|
||||
var data = utools.db.get("customFts").data[code];
|
||||
showCustomize();
|
||||
$("#code").attr('disabled', true);
|
||||
$('#code').val(data.features.code);
|
||||
$('#kw').val(data.features.cmds.toString());
|
||||
$('#desc').val(data.features.explain);
|
||||
$('#path').val(data.path);
|
||||
})
|
||||
|
||||
$("#options").on('click', '.delBtn', function () {
|
||||
var code = $(this).attr('code');
|
||||
var db = utools.db.get("customFts")
|
||||
var data = db.data;
|
||||
delete data[code];
|
||||
utools.removeFeature(code);
|
||||
utools.db.put({ _id: "customFts", data: data, _rev: db._rev });
|
||||
showOptions();
|
||||
})
|
||||
|
||||
$("#options").on('click', '.saveBtn', function () {
|
||||
var code = $('#code').val()
|
||||
var allFts = getAllFeatures();
|
||||
if (code in allFts && $("#code").prop('disabled') == false) {
|
||||
$('#code').css({ 'border-bottom-color': '#ec1212' })
|
||||
utools.showNotification('名称与现有的手册重复!')
|
||||
} else {
|
||||
var kw = $('#kw').val().split(',');
|
||||
var desc = $('#desc').val();
|
||||
var p = $('#path').val();
|
||||
$("#customize").animate({ right: '-370px' });
|
||||
var pushData = {};
|
||||
pushData[code] = {
|
||||
features: {
|
||||
"code": code,
|
||||
"explain": desc,
|
||||
"cmds": kw,
|
||||
"icon": `${p}/logo/${code}.png`
|
||||
},
|
||||
path: p,
|
||||
type: "custom"
|
||||
}
|
||||
var db = utools.db.get("customFts");
|
||||
if (db) {
|
||||
var rev = db._rev
|
||||
var data = db.data
|
||||
data[code] = pushData[code];
|
||||
utools.db.put({ _id: "customFts", data: data, _rev: rev });
|
||||
} else {
|
||||
utools.db.put({ _id: "customFts", data: pushData });
|
||||
}
|
||||
showOptions();
|
||||
}
|
||||
})
|
||||
|
Loading…
x
Reference in New Issue
Block a user