feature: 新增暗色主题。 (#292)
王良
GitHub
parent
0cca4f4a61
commit
3d8a4f27e2
|
|
@ -23,6 +23,7 @@ module.exports = {
|
|||
enabled: true,
|
||||
url: 'https://github.com/docmirror/dev-sidecar/raw/master/packages/core/src/config/remote_config.json5'
|
||||
},
|
||||
theme: 'light', // 主题：light=亮色, dark=暗色
|
||||
dock: {
|
||||
hideWhenWinClose: false
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
<svg id="svg_canvas" viewBox="0 0 460 150" width="460" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(0,6) scale(1)">
|
||||
<g class="logo-entity" transform="translate(120,17) scale(-1,1)">
|
||||
<circle fill="#1B7FCD" cx="45.9" cy="55.2" r="13.5"></circle>
|
||||
<line fill="none" stroke="#1B7FCD" stroke-width="3" stroke-miterlimit="10" x1="37.9" y1="44.7" x2="26.2" y2="26.9"></line>
|
||||
<circle cx="23.5" cy="21.7" r="7.6" fill="#1B7FCD"></circle>
|
||||
<line fill="none" stroke="#1B7FCD" stroke-width="3" stroke-miterlimit="10" x1="48.1" y1="44.7" x2="51.3" y2="27.7"></line>
|
||||
<circle cx="52.3" cy="23.9" r="4.9" fill="#1B7FCD"></circle>
|
||||
<line fill="none" stroke="#1B7FCD" stroke-width="3" stroke-miterlimit="10" x1="57" y1="55.5" x2="77.8" y2="59.2"></line>
|
||||
<circle stroke="#1B7FCD" stroke-miterlimit="10" cx="32.5" cy="89.7" r="7.6" fill="#1B7FCD"></circle>
|
||||
<line fill="none" stroke="#1B7FCD" stroke-width="3" stroke-miterlimit="10" x1="40.1" y1="67.4" x2="34.9" y2="82.5"></line>
|
||||
<circle fill="none" stroke="#1B7FCD" stroke-width="3" stroke-miterlimit="10" cx="87" cy="61.3" r="9.4"></circle>
|
||||
</g>
|
||||
<path transform="translate(0,0) scale(0.7)" d="M153.15,169.55c-14.21,10.5-31.76,16.71-50.74,16.71c-47.19,0-85.59-38.4-85.59-85.59c0-47.19,38.4-85.59,85.59-85.59c38.04,0,70.37,24.95,81.47,59.35H188c-11.24-36.6-45.36-63.28-85.59-63.28c-49.36,0-89.52,40.16-89.52,89.52s40.16,89.52,89.52,89.52c21.69,0,41.6-7.76,57.1-20.64H153.15z" fill="#1B7FCD"></path>
|
||||
</g>
|
||||
|
||||
<g transform="translate(104 58) scale(0.7)">
|
||||
<path fill="#fff"
|
||||
d="M4.56 0L4.56-44.69L23.52-44.69Q30.62-44.69 34.51-43.28L34.51-43.28Q41.67-40.67 44.09-33.70L44.09-33.70Q45.90-28.34 45.90-22.24L45.90-22.24Q45.90-16.21 44.15-10.85L44.15-10.85Q42.41-5.36 38.39-2.75L38.39-2.75Q35.84-1.14 32.80-0.57Q29.75 0 23.52 0L23.52 0L4.56 0ZM23.52-36.72L14.07-36.72L14.07-7.97L23.52-7.97Q29.75-7.97 32.16-10.72L32.16-10.72Q33.63-12.46 34.54-15.61Q35.44-18.76 35.44-22.31L35.44-22.31Q35.44-26.26 34.37-29.55Q33.30-32.83 31.56-34.44L31.56-34.44Q29.01-36.72 23.52-36.72L23.52-36.72Z"
|
||||
transform="translate(5 57.55)"></path>
|
||||
<path fill="#fff"
|
||||
d="M22.04-44.69L38.06-44.69L38.06-36.72L25.66-36.72Q20.84-36.72 18.63-36.05Q16.42-35.38 14.94-33.43L14.94-33.43Q13.94-32.09 13.57-30.75Q13.20-29.41 12.93-26.20L12.93-26.20L38.06-26.20L38.06-18.22L12.93-18.22Q13.47-12.46 16.35-10.22Q19.23-7.97 26.13-7.97L26.13-7.97L38.06-7.97L38.06 0L25.66 0Q20.64 0 16.82-0.60L16.82-0.60Q10.79-1.61 7.24-5.90L7.24-5.90Q2.14-12.06 2.14-22.58L2.14-22.58Q2.14-34.24 9.31-40.74L9.31-40.74Q11.79-42.95 14.57-43.82Q17.35-44.69 22.04-44.69L22.04-44.69Z"
|
||||
transform="translate(55.97 57.55)"></path>
|
||||
<path fill="#fff"
|
||||
d="M37.25-44.69L47.97-44.69L28.41 0L18.89 0L0.07-44.69L10.79-44.69L23.92-11.06L37.25-44.69Z"
|
||||
transform="translate(99.97 57.55)"></path>
|
||||
<path fill="#fff" d="M0-21.31L15.61-21.31L15.61-13.27L0-13.27L0-21.31Z"
|
||||
transform="translate(151.08 57.55)"></path>
|
||||
<path fill="#fff"
|
||||
d="M26.80 0L4.36 0L4.36-7.97L24.79-7.97Q29.68-7.97 31.29-8.91L31.29-8.91Q33.63-10.32 33.63-13.13L33.63-13.13Q33.63-16.42 30.89-17.89L30.89-17.89Q29.35-18.76 25.93-18.76L25.93-18.76L17.62-18.76Q10.05-18.76 6.70-21.51L6.70-21.51Q4.62-23.25 3.45-25.86Q2.28-28.48 2.28-31.49L2.28-31.49Q2.28-36.18 5.03-40.07L5.03-40.07Q7.71-43.82 13.60-44.49L13.60-44.49Q15.61-44.69 19.56-44.69L19.56-44.69L41.74-44.69L41.74-36.72L21.71-36.72Q17.22-36.65 15.75-36.31L15.75-36.31Q12.73-35.58 12.73-31.76L12.73-31.76Q12.73-28.54 15.28-27.47L15.28-27.47Q16.95-26.67 20.90-26.67L20.90-26.67L28.07-26.67Q33.57-26.67 36.25-25.73L36.25-25.73Q41.00-24.12 42.81-20.10L42.81-20.10Q44.22-16.88 44.22-13.20L44.22-13.20Q44.22-9.11 42.34-5.90L42.34-5.90Q39.73-1.34 34.51-0.40L34.51-0.40Q31.96 0 26.80 0L26.80 0Z"
|
||||
transform="translate(169.69 57.55)"></path>
|
||||
<path fill="#fff" d="M14.07 0L4.56 0L4.56-44.69L14.07-44.69L14.07 0Z"
|
||||
transform="translate(219.25 57.55)"></path>
|
||||
<path fill="#fff"
|
||||
d="M4.56 0L4.56-44.69L23.52-44.69Q30.62-44.69 34.51-43.28L34.51-43.28Q41.67-40.67 44.09-33.70L44.09-33.70Q45.90-28.34 45.90-22.24L45.90-22.24Q45.90-16.21 44.15-10.85L44.15-10.85Q42.41-5.36 38.39-2.75L38.39-2.75Q35.84-1.14 32.80-0.57Q29.75 0 23.52 0L23.52 0L4.56 0ZM23.52-36.72L14.07-36.72L14.07-7.97L23.52-7.97Q29.75-7.97 32.16-10.72L32.16-10.72Q33.63-12.46 34.54-15.61Q35.44-18.76 35.44-22.31L35.44-22.31Q35.44-26.26 34.37-29.55Q33.30-32.83 31.56-34.44L31.56-34.44Q29.01-36.72 23.52-36.72L23.52-36.72Z"
|
||||
transform="translate(240.81 57.55)"></path>
|
||||
<path fill="#fff"
|
||||
d="M22.04-44.69L38.06-44.69L38.06-36.72L25.66-36.72Q20.84-36.72 18.63-36.05Q16.42-35.38 14.94-33.43L14.94-33.43Q13.94-32.09 13.57-30.75Q13.20-29.41 12.93-26.20L12.93-26.20L38.06-26.20L38.06-18.22L12.93-18.22Q13.47-12.46 16.35-10.22Q19.23-7.97 26.13-7.97L26.13-7.97L38.06-7.97L38.06 0L25.66 0Q20.64 0 16.82-0.60L16.82-0.60Q10.79-1.61 7.24-5.90L7.24-5.90Q2.14-12.06 2.14-22.58L2.14-22.58Q2.14-34.24 9.31-40.74L9.31-40.74Q11.79-42.95 14.57-43.82Q17.35-44.69 22.04-44.69L22.04-44.69Z"
|
||||
transform="translate(291.78 57.55)"></path>
|
||||
<path fill="#fff"
|
||||
d="M24.86-7.97L38.53-7.97L38.53 0L22.91 0Q18.49 0 16.15-0.47L16.15-0.47Q7.91-2.08 4.42-9.65L4.42-9.65Q2.14-14.74 2.14-22.24L2.14-22.24Q2.14-31.22 5.63-36.85L5.63-36.85Q8.17-40.94 12.43-42.81Q16.68-44.69 23.38-44.69L23.38-44.69L38.53-44.69L38.53-36.72L24.46-36.72Q18.09-36.72 15.14-33.30L15.14-33.30Q12.66-30.49 12.66-23.12L12.66-23.12Q12.66-13.20 16.48-10.12L16.48-10.12Q19.16-7.97 24.86-7.97L24.86-7.97Z"
|
||||
transform="translate(335.79 57.55)"></path>
|
||||
<path fill="#fff"
|
||||
d="M11.32 0L0.20 0L18.69-44.69L29.61-44.69L48.11 0L36.98 0L32.63-10.32L15.68-10.32L11.32 0ZM30.55-18.29L24.19-33.90L17.82-18.29L30.55-18.29Z"
|
||||
transform="translate(379.39 57.55)"></path>
|
||||
<path fill="#fff"
|
||||
d="M21.71-16.95L14.07-16.95L14.07 0L4.56 0L4.56-44.69L26.40-44.69Q35.78-44.69 39.46-42.28L39.46-42.28Q42.01-40.67 43.38-38.02Q44.76-35.38 44.76-32.23L44.76-32.23Q44.76-25.86 41.54-22.38L41.54-22.38Q39.53-20.30 36.25-19.23L36.25-19.23Q38.86-18.29 40.20-17.25Q41.54-16.21 42.61-14.20L42.61-14.20Q43.42-12.60 43.78-11.12Q44.15-9.65 44.35-6.77L44.35-6.77Q44.76-1.94 45.43 0L45.43 0L34.77 0Q34.30-1.54 33.77-6.37L33.77-6.37Q33.43-10.25 32.39-12.33Q31.36-14.41 29.28-15.61L29.28-15.61Q26.67-17.02 21.71-16.95L21.71-16.95ZM14.07-36.72L14.07-24.92L27.40-24.92Q30.75-24.92 32.16-25.93L32.16-25.93Q34.30-27.40 34.30-31.09L34.30-31.09Q34.30-35.18 31.09-36.31L31.09-36.31Q29.95-36.72 27.40-36.72L27.40-36.72L14.07-36.72Z"
|
||||
transform="translate(430.76 57.55)"></path>
|
||||
</g>
|
||||
|
||||
<g transform="translate(105,100) scale(1)">
|
||||
<path fill="#fff"
|
||||
d="M25.64-17.92L21.32-17.92L21.32-11.34L26.30-11.34L25.64-9.98L21.32-9.98L21.32-1.57L17.86-1.57L17.86-9.98L11.19-9.98L11.19-8.64L8.06-1.57L4.29-1.57L7.86-9.05L7.86-9.98L2.67-9.98L2.67-11.34L7.86-11.34L7.86-17.92L2.67-17.92L2.67-19.29L7.86-19.29L7.86-19.31L21.32-19.31L21.32-19.29L26.30-19.29L25.64-17.92ZM17.86-11.34L17.86-17.92L11.19-17.92L11.19-11.34L17.86-11.34Z"
|
||||
transform="translate(5 24.94)"></path>
|
||||
<path fill="#fff"
|
||||
d="M18.13-3.71L13.92-1.51L8.93-1.51L15.75-4.96L10.24-7.89L14.33-7.89L17.84-6.03L22.01-8.15L22.01-9.28L9.89-9.28L5.83-1.62L2.12-1.62L8.38-13.46L2.06-13.46L4.55-19.37L8.09-19.37L6.12-14.70L9.05-14.70L11.54-19.37L15.28-19.37L12.79-14.70L22.21-14.70L21.11-17.81L24.45-17.81L25.58-14.70L26.91-14.70L26.91-13.46L12.12-13.46L10.59-10.56L25.32-10.56L25.32-7.51L20.18-4.79L26.45-1.51L22.33-1.51L18.13-3.71Z"
|
||||
transform="translate(34 24.94)"></path>
|
||||
<path fill="#fff"
|
||||
d="M15.83-17.84L25.84-17.84L24.97-16.56L15.83-16.56L15.83-13.63L18.18-13.63L19.46-15.75L23.58-15.75L22.30-13.63L26.65-13.63L25.78-12.35L10.03-12.35L8.61-10.56L21.84-10.56L21.84-10.59L25.11-10.59L25.11-1.83L4.73-1.83L4.73-8.00L2.49-8.00L5.92-12.35L2.35-12.35L2.35-13.63L12.53-13.63L12.53-16.56L3.74-16.56L3.74-17.84L12.53-17.84L12.53-19.05L15.83-19.05L15.83-17.84ZM21.05-5.68L8.03-5.68L8.03-3.10L21.84-3.10L21.84-6.61L21.05-5.68ZM21.17-9.22L8.03-9.22L8.03-6.99L21.84-6.99L21.84-10.03L21.17-9.22Z"
|
||||
transform="translate(63 24.94)"></path>
|
||||
<path fill="#fff"
|
||||
d="M15.23-8.44L12.33-3.68L8.96-3.68L11.86-8.44L11.86-15.57L8.85-15.57L8.85-16.94L11.86-16.94L11.86-19.14L15.23-19.14L15.23-16.94L25.46-16.94L25.46-3.68L18.73-3.68L17.98-5.05L22.10-5.05L22.10-15.57L15.23-15.57L15.23-8.44ZM2.03-13.69L6.84-13.69L6.84-3.10L26.97-3.10L26.42-1.77L7.89-1.77L6.76-2.90L5.89-1.77L2.03-1.77L2.03-3.10L3.54-3.10L3.54-12.33L2.03-12.33L2.03-13.69ZM5.95-19.05L7.45-15.25L3.92-15.25L2.38-19.05L5.95-19.05Z"
|
||||
transform="translate(92 24.94)"></path>
|
||||
<path fill="#fff"
|
||||
d="M16.39-1.48L12.93-1.48L12.93-4.81L3.39-4.81L3.39-6.15L12.93-6.15L12.93-9.02L4.03-9.02L8.47-15.63L3.45-15.63L3.45-16.96L9.37-16.96L10.99-19.40L15.25-19.40L13.63-16.96L23.58-16.96L22.82-15.63L12.73-15.63L9.19-10.32L12.93-10.32L12.93-14.36L16.39-14.36L16.39-10.32L23.58-10.32L22.82-9.02L16.39-9.02L16.39-6.15L25.61-6.15L24.85-4.81L16.39-4.81L16.39-1.48Z"
|
||||
transform="translate(121 24.94)"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.8 KiB |
|
|
@ -1,11 +1,9 @@
|
|||
<template>
|
||||
<a-config-provider :locale="locale">
|
||||
<div class="ds_layout">
|
||||
<div class="ds_layout" :class="themeClass">
|
||||
<a-layout>
|
||||
<a-layout-sider theme="light">
|
||||
<div class="logo" >
|
||||
<img height="60px" src="/logo/logo-lang.svg">
|
||||
</div>
|
||||
<a-layout-sider :theme="theme">
|
||||
<div class="logo"></div>
|
||||
<div class="aside">
|
||||
<a-menu
|
||||
mode="inline"
|
||||
|
|
@ -13,9 +11,9 @@
|
|||
:defaultOpenKeys="['/plugin']"
|
||||
>
|
||||
<template v-for="(item) of menus">
|
||||
<a-sub-menu v-if="item.children && item.children.length>0" :key="item.path" @titleClick="titleClick(item)">
|
||||
<a-sub-menu v-if="item.children && item.children.length>0" :key="item.path" @titleClick="titleClick(item)">
|
||||
<span slot="title"><a-icon :type="item.icon?item.icon:'file'"/><span>{{item.title}}</span></span>
|
||||
<a-menu-item v-for="(sub) of item.children" :key="sub.path" @click="menuClick(sub)" >
|
||||
<a-menu-item v-for="(sub) of item.children" :key="sub.path" @click="menuClick(sub)">
|
||||
<a-icon :type="sub.icon?sub.icon:'file'"/> {{ sub.title }}
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
|
|
@ -54,13 +52,21 @@ export default {
|
|||
return {
|
||||
locale: zhCN,
|
||||
info: {},
|
||||
menus: undefined
|
||||
menus: undefined,
|
||||
config: undefined
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
themeClass () {
|
||||
return 'theme-' + this.config.app.theme
|
||||
},
|
||||
theme () {
|
||||
return this.config.app.theme
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.menus = createMenus(this)
|
||||
this.config = this.$global.config
|
||||
this.$api.info.get().then(ret => {
|
||||
this.info = ret
|
||||
})
|
||||
|
|
@ -112,9 +118,10 @@ body{
|
|||
padding:5px;
|
||||
border-bottom: #eee solid 1px;
|
||||
height:60px;
|
||||
img{
|
||||
height:100%
|
||||
}
|
||||
background-image: url("/logo/logo-lang.svg");
|
||||
background-size: auto 50px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 5px center;
|
||||
}
|
||||
.ant-layout-footer{
|
||||
padding:10px;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,177 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* 暗色主题 */
|
||||
$dark-logo: url("/logo/logo-lang-light.svg");
|
||||
$dark-bg: #1e1f22; //背景
|
||||
$dark-bg-highlight: #333; //高亮块：背景
|
||||
$dark-text: #ddd; //字体颜色
|
||||
$dark-menu-selected: #1890ff; //菜单选中：字体颜色
|
||||
$dark-bd: #333; //边框和分隔线
|
||||
$dark-bd2: #929292; //边框和分隔线
|
||||
$dark-btn: #444; //按钮：边框和背景颜色
|
||||
.theme-dark{
|
||||
/* 背景色和字体颜色 */
|
||||
.ds_layout, .ant-layout,
|
||||
.ds-container, .ds-container .container-header,
|
||||
.ant-layout-footer{
|
||||
background: $dark-bg;
|
||||
color: $dark-text;
|
||||
}
|
||||
div, span, label {
|
||||
color: $dark-text;
|
||||
}
|
||||
.form-help {
|
||||
color: #999
|
||||
}
|
||||
|
||||
/* 高亮块：背景色和字体颜色 */
|
||||
.ant-alert-warning{
|
||||
background: $dark-bg-highlight;
|
||||
border-color: $dark-bg-highlight;
|
||||
color: $dark-text;
|
||||
/* 关闭图标颜色 */
|
||||
.ant-alert-close-icon .anticon-close {
|
||||
color: $dark-text;
|
||||
}
|
||||
}
|
||||
.ant-alert-info{
|
||||
background: $dark-bg-highlight;
|
||||
border-color: $dark-bg-highlight;
|
||||
color: $dark-text;
|
||||
}
|
||||
|
||||
/* 边框和分隔线 */
|
||||
.ant-layout-has-sider,
|
||||
.ant-layout-sider-children,
|
||||
.ds-container .container-header,
|
||||
.logo,
|
||||
.footer-bar,
|
||||
.ant-layout-footer,
|
||||
.ant-tabs .ant-tabs-left-bar,
|
||||
.ant-tabs .ant-tabs-left-content{
|
||||
border-color: $dark-bd;
|
||||
}
|
||||
|
||||
/* 左侧 */
|
||||
/** 背景色 **/
|
||||
.ant-layout-sider{
|
||||
background: $dark-bg;
|
||||
}
|
||||
/** Logo **/
|
||||
.logo{
|
||||
background-image: $dark-logo; /* logo使用亮色的 */
|
||||
}
|
||||
/** 菜单 **/
|
||||
.ant-menu{
|
||||
background: $dark-bg;
|
||||
color: $dark-text;
|
||||
}
|
||||
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
|
||||
background: $dark-bg-highlight;
|
||||
color: $dark-menu-selected;
|
||||
span{ color: $dark-menu-selected; }
|
||||
}
|
||||
|
||||
/* 输入框、下拉框 */
|
||||
.ant-input, .ant-input-number-input, .ant-input-number, .ant-select-selection,
|
||||
.ant-input-group-addon{
|
||||
background: #777;
|
||||
border-color: #aaa;
|
||||
color: $dark-text;
|
||||
&:hover, &:focus{
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片消息：IP测速 */
|
||||
.ant-card{
|
||||
background: #777;
|
||||
border-color: #777;
|
||||
.ant-card-head{
|
||||
border-bottom-color: $dark-bd2;
|
||||
}
|
||||
}
|
||||
|
||||
/* 标签：未启用 */
|
||||
.ant-tag-red{
|
||||
background: #4f4749;
|
||||
border-color: #4f4749;
|
||||
color: #bf8285;
|
||||
}
|
||||
/* 标签：已启用 */
|
||||
.ant-tag-green{
|
||||
background: #505f5f;
|
||||
border-color: #505f5f;
|
||||
color: #90cb9f;
|
||||
}
|
||||
|
||||
/* 按钮 */
|
||||
.ant-btn:not(.ant-btn-danger, .ant-btn-primary){
|
||||
background: $dark-btn;
|
||||
border-color: $dark-btn;
|
||||
color: $dark-text;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
/* 单选框：开关式 */
|
||||
.ant-switch:not(.ant-switch-checked){
|
||||
background: $dark-btn;
|
||||
border-color: $dark-btn;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
/* 单选框：按钮式 */
|
||||
.ant-radio-button-wrapper{
|
||||
background: $dark-btn;
|
||||
border-color: $dark-btn;
|
||||
color: $dark-text;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
/* JSON编辑器：应用于拦截设置 */
|
||||
.jsoneditor-vue{
|
||||
/* 头部和边框 */
|
||||
div.jsoneditor-menu, div.jsoneditor{
|
||||
background: $dark-bg;
|
||||
border-color: $dark-bd;
|
||||
}
|
||||
/* 内容区域：背景和字体颜色 */
|
||||
.ace_gutter, .ace_scroller{
|
||||
background: #555;
|
||||
color: #eee;
|
||||
}
|
||||
/* key的颜色 */
|
||||
.ace_variable, .ace_text-layer{
|
||||
color: #eee;
|
||||
}
|
||||
/* 字符串值的颜色 */
|
||||
.ace_string, .ace_cjk{
|
||||
color: #a6eaa6;
|
||||
}
|
||||
.ace_constant{
|
||||
/* 数字的颜色 */
|
||||
&.ace_numeric{
|
||||
color: #ec9999;
|
||||
}
|
||||
/* 布尔值的颜色 */
|
||||
&.ace_language{
|
||||
color: #f4c995;
|
||||
}
|
||||
}
|
||||
/* 当前行高亮样式 */
|
||||
.ace_gutter-active-line,
|
||||
.ace_marker-layer .ace_active-line{
|
||||
background: #838774;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ds-container{
|
||||
height:100%;
|
||||
background: #fff;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,10 @@ export default {
|
|||
async initPre (Vue, api) {
|
||||
Vue.prototype.$api = api
|
||||
const setting = await api.setting.load()
|
||||
Vue.prototype.$global = { setting }
|
||||
Vue.prototype.$global = {
|
||||
setting,
|
||||
config: await api.config.get()
|
||||
}
|
||||
await status.install(api)
|
||||
},
|
||||
initModules (app, router) {
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ export default {
|
|||
key: undefined,
|
||||
config: undefined,
|
||||
status: {},
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 20 },
|
||||
labelCol: { span: 5 },
|
||||
wrapperCol: { span: 19 },
|
||||
resetDefaultLoading: false,
|
||||
applyLoading: false,
|
||||
systemPlatform: ''
|
||||
|
|
|
|||
|
|
@ -15,57 +15,58 @@
|
|||
v-if="config"
|
||||
>
|
||||
<a-tab-pane tab="基本设置" key="1">
|
||||
<a-form-item label="代理服务:" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-checkbox v-model="config.server.enabled">
|
||||
随应用启动
|
||||
</a-checkbox>
|
||||
<a-tag v-if="status.proxy.enabled" color="green">
|
||||
当前已启动
|
||||
</a-tag>
|
||||
<a-tag v-else color="red">
|
||||
当前未启动
|
||||
</a-tag>
|
||||
|
||||
<a-button class="md-mr-10" icon="profile" @click="openLog()">日志</a-button>
|
||||
</a-form-item>
|
||||
<a-form-item label="绑定IP" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-input v-model="config.server.host"/>
|
||||
<div class="form-help">你可以设置0.0.0.0，让其他电脑可以使用此代理服务</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="代理端口" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-input v-model="config.server.port"/>
|
||||
<div class="form-help">修改后需要重启应用</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="全局校验SSL" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-checkbox v-model="config.server.setting.NODE_TLS_REJECT_UNAUTHORIZED">
|
||||
NODE_TLS_REJECT_UNAUTHORIZED
|
||||
</a-checkbox>
|
||||
<div class="form-help">高风险操作，没有特殊情况请勿关闭</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="代理校验SSL" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-checkbox v-model="config.server.setting.verifySsl">
|
||||
校验加速目标网站的ssl证书
|
||||
</a-checkbox>
|
||||
<div class="form-help">如果目标网站证书有问题，但你想强行访问，可以临时关闭此项</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="根证书：" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-input-search addon-before="Cert" enter-button="选择" @search="onCrtSelect"
|
||||
v-model="config.server.setting.rootCaFile.certPath"/>
|
||||
<a-input-search addon-before="Key" enter-button="选择" @search="onKeySelect"
|
||||
v-model="config.server.setting.rootCaFile.keyPath"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="启用拦截" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-checkbox v-model="config.server.intercept.enabled">
|
||||
启用拦截
|
||||
<div style="padding-right:10px">
|
||||
<a-form-item label="代理服务:" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-checkbox v-model="config.server.enabled">
|
||||
随应用启动
|
||||
</a-checkbox>
|
||||
<div class="form-help">关闭拦截，且关闭功能增强的话，就不需要安装根证书，本应用退化为安全模式</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="启用脚本" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-checkbox v-model="config.server.setting.script.enabled">
|
||||
允许插入并运行脚本
|
||||
<a-tag v-if="status.proxy.enabled" color="green">
|
||||
当前已启动
|
||||
</a-tag>
|
||||
<a-tag v-else color="red">
|
||||
当前未启动
|
||||
</a-tag>
|
||||
<a-button class="md-mr-10" icon="profile" @click="openLog()">日志</a-button>
|
||||
</a-form-item>
|
||||
<a-form-item label="绑定IP" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-input v-model="config.server.host"/>
|
||||
<div class="form-help">你可以设置0.0.0.0，让其他电脑可以使用此代理服务</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="代理端口" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-input v-model="config.server.port"/>
|
||||
<div class="form-help">修改后需要重启应用</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="全局校验SSL" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-checkbox v-model="config.server.setting.NODE_TLS_REJECT_UNAUTHORIZED">
|
||||
NODE_TLS_REJECT_UNAUTHORIZED
|
||||
</a-checkbox>
|
||||
<div class="form-help">关闭后，github的clone加速链接复制也将关闭</div>
|
||||
</a-form-item>
|
||||
<div class="form-help">高风险操作，没有特殊情况请勿关闭</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="代理校验SSL" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-checkbox v-model="config.server.setting.verifySsl">
|
||||
校验加速目标网站的ssl证书
|
||||
</a-checkbox>
|
||||
<div class="form-help">如果目标网站证书有问题，但你想强行访问，可以临时关闭此项</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="根证书：" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-input-search addon-before="Cert" enter-button="选择" @search="onCrtSelect"
|
||||
v-model="config.server.setting.rootCaFile.certPath"/>
|
||||
<a-input-search addon-before="Key" enter-button="选择" @search="onKeySelect"
|
||||
v-model="config.server.setting.rootCaFile.keyPath"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="启用拦截" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-checkbox v-model="config.server.intercept.enabled">
|
||||
启用拦截
|
||||
</a-checkbox>
|
||||
<div class="form-help">关闭拦截，且关闭功能增强的话，就不需要安装根证书，本应用退化为安全模式</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="启用脚本" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-checkbox v-model="config.server.setting.script.enabled">
|
||||
允许插入并运行脚本
|
||||
</a-checkbox>
|
||||
<div class="form-help">关闭后，github的clone加速链接复制也将关闭</div>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="拦截设置" key="2">
|
||||
<vue-json-editor style="height:100%;" ref="editor" v-model="config.server.intercepts" mode="code"
|
||||
|
|
@ -140,7 +141,7 @@
|
|||
<!-- </a-row>-->
|
||||
<!-- </a-tab-pane>-->
|
||||
<a-tab-pane tab="IP测速" key="6">
|
||||
<div>
|
||||
<div style="padding-right: 10px">
|
||||
<a-alert type="info" message="对从dns获取到的ip进行测速，使用速度最快的ip进行访问。（对使用增强功能的域名没啥用）"></a-alert>
|
||||
<a-form-item label="开启dns测速" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-checkbox v-model="getSpeedTestConfig().enabled">
|
||||
|
|
|
|||
|
|
@ -42,6 +42,16 @@
|
|||
<br/>如果重载远程配置后发现下载的还是修改前的内容，请稍等片刻再重试。
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="主题设置" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-radio-group v-model="config.app.theme" default-value="light" button-style="solid">
|
||||
<a-radio-button :value="'light'">
|
||||
亮色
|
||||
</a-radio-button>
|
||||
<a-radio-button :value="'dark'">
|
||||
暗色
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="首页提示" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-radio-group v-model="config.app.showShutdownTip"
|
||||
default-value="true" button-style="solid">
|
||||
|
|
@ -94,7 +104,8 @@ export default {
|
|||
return {
|
||||
key: 'app',
|
||||
removeUserConfigLoading: false,
|
||||
reloadLoading: false
|
||||
reloadLoading: false,
|
||||
themeBackup: null
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
|
@ -103,6 +114,15 @@ export default {
|
|||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
ready (config) {
|
||||
this.themeBackup = config.app.theme
|
||||
},
|
||||
async applyAfter () {
|
||||
// 判断是否切换了主题
|
||||
if (this.config.app.theme !== this.themeBackup) {
|
||||
window.location.reload()
|
||||
}
|
||||
},
|
||||
async openExternal (url) {
|
||||
await this.$api.ipc.openExternal(url)
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue