|
|
@ -1,79 +1,110 @@ |
|
|
|
<template> |
|
|
|
<div class="window-outer" :class="{ |
|
|
|
<div |
|
|
|
class="window-outer" |
|
|
|
:class="{ |
|
|
|
focus: focusState && currentRouter !== 'main', |
|
|
|
}"> |
|
|
|
<div class="upbar" v-dragable> |
|
|
|
}" |
|
|
|
> |
|
|
|
<div |
|
|
|
class="upbar" |
|
|
|
v-dragable |
|
|
|
v-if="!isMobileDevice()" |
|
|
|
> |
|
|
|
<div class="upbar-left"> |
|
|
|
<div class="back-arr" v-if="currentRouter !== 'main'" @click="back">←</div> |
|
|
|
<div |
|
|
|
class="back-arr" |
|
|
|
v-if="currentRouter !== 'main'" |
|
|
|
@click="back" |
|
|
|
> |
|
|
|
← |
|
|
|
</div> |
|
|
|
<div class="upbar-text"> |
|
|
|
{{ t("setting") }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="upbar-right" v-if="!isMobileDevice()"> |
|
|
|
<WinUpButtonGroup :browser-window="browserWindow"></WinUpButtonGroup> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Transition v-for="item in setList" :key="item.key" name="fade" appear> |
|
|
|
<component :is="stepComponent(item.content)" v-if="currentRouter === item.key" /> |
|
|
|
</Transition> |
|
|
|
<Transition name="fade" appear> |
|
|
|
<div class="outer" v-if="currentRouter === 'main'"> |
|
|
|
<div class="uper_tab"> |
|
|
|
<div class="tab"> |
|
|
|
{{ t("windows.setting") }} |
|
|
|
<div class="upbar-right"> |
|
|
|
<WinUpButtonGroup |
|
|
|
:browser-window="browserWindow" |
|
|
|
></WinUpButtonGroup> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="outer_main"> |
|
|
|
<div class="main_uper"> |
|
|
|
<div class="set_item" v-for="item in setList" :key="item.title" @click="openSet(item.key)" v-glowing="{ |
|
|
|
color: '#3c3c3ce4', |
|
|
|
scale: 0.6, |
|
|
|
}"> |
|
|
|
<div class="set_item-img"> |
|
|
|
<!-- <img class="set_item-img-img" :src="item.icon" /> --> |
|
|
|
<svg class="icon" aria-hidden="true" style="font-size: 2em"> |
|
|
|
|
|
|
|
<div class="settings-container"> |
|
|
|
<aside class="sidebar"> |
|
|
|
<ul> |
|
|
|
<li |
|
|
|
v-for="item in setList" |
|
|
|
:key="item.key" |
|
|
|
@click="openSet(item.key)" |
|
|
|
> |
|
|
|
<ElTooltip |
|
|
|
v-if="!isMobileDevice()" |
|
|
|
:content="item.title" |
|
|
|
placement="right" |
|
|
|
> |
|
|
|
<svg |
|
|
|
class="icon" |
|
|
|
aria-hidden="true" |
|
|
|
> |
|
|
|
<use :xlink:href="'#icon-' + item.icon"></use> |
|
|
|
</svg> |
|
|
|
</ElTooltip> |
|
|
|
<div v-else class="icon-container"> |
|
|
|
<svg |
|
|
|
class="icon" |
|
|
|
aria-hidden="true" |
|
|
|
> |
|
|
|
<use :xlink:href="'#icon-' + item.icon"></use> |
|
|
|
</svg> |
|
|
|
<div class="icon-title">{{ item.title }}</div> |
|
|
|
</div> |
|
|
|
<div class="set_item-right"> |
|
|
|
<div class="set_item-title">{{ item.title }}</div> |
|
|
|
<div class="set_item-desc">{{ item.desc }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</aside> |
|
|
|
<main class="content"> |
|
|
|
<Transition |
|
|
|
name="fade" |
|
|
|
appear |
|
|
|
> |
|
|
|
<component |
|
|
|
:is="stepComponent(currentContent)" |
|
|
|
v-if="currentContent" |
|
|
|
/> |
|
|
|
</Transition> |
|
|
|
</main> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { inject, ref } from "vue"; |
|
|
|
|
|
|
|
import { BrowserWindow } from "@/system/window/BrowserWindow"; |
|
|
|
import { t } from "@/i18n"; |
|
|
|
import { useSystem } from "@/system"; |
|
|
|
import { vDragable } from "@/system/window/MakeDragable"; |
|
|
|
import { vGlowing } from "@/util/glowingBorder"; |
|
|
|
import { stepComponent } from "@/util/stepComponent"; |
|
|
|
import { isMobileDevice } from "@/util/device"; |
|
|
|
const browserWindow = inject<BrowserWindow>("browserWindow")!; |
|
|
|
const sys = useSystem(); |
|
|
|
const currentRouter = ref(browserWindow.config?.router || "main"); |
|
|
|
|
|
|
|
const focusState = ref(false); |
|
|
|
browserWindow?.on("focus", () => { |
|
|
|
<script lang="ts" setup> |
|
|
|
import { computed, inject, ref } from "vue"; |
|
|
|
|
|
|
|
import { t } from "@/i18n"; |
|
|
|
import { useSystem } from "@/system"; |
|
|
|
import { BrowserWindow } from "@/system/window/BrowserWindow"; |
|
|
|
import { vDragable } from "@/system/window/MakeDragable"; |
|
|
|
import { isMobileDevice } from "@/util/device"; |
|
|
|
import { stepComponent } from "@/util/stepComponent"; |
|
|
|
import { ElTooltip } from "element-plus"; |
|
|
|
|
|
|
|
const browserWindow = inject<BrowserWindow>("browserWindow")!; |
|
|
|
const sys = useSystem(); |
|
|
|
const currentRouter = ref(browserWindow.config?.router || "system"); |
|
|
|
|
|
|
|
const focusState = ref(false); |
|
|
|
browserWindow?.on("focus", () => { |
|
|
|
focusState.value = true; |
|
|
|
}); |
|
|
|
browserWindow?.on("blur", () => { |
|
|
|
}); |
|
|
|
browserWindow?.on("blur", () => { |
|
|
|
focusState.value = false; |
|
|
|
}); |
|
|
|
function back() { |
|
|
|
}); |
|
|
|
function back() { |
|
|
|
currentRouter.value = "main"; |
|
|
|
} |
|
|
|
function openSet(key: string) { |
|
|
|
} |
|
|
|
function openSet(key: string) { |
|
|
|
currentRouter.value = key; |
|
|
|
} |
|
|
|
const setList = ref([ |
|
|
|
} |
|
|
|
const setList = ref([ |
|
|
|
{ |
|
|
|
key: "system", |
|
|
|
title: t("system"), |
|
|
@ -81,61 +112,55 @@ const setList = ref([ |
|
|
|
icon: "system", |
|
|
|
content: "SetSystem", |
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
key: "custom", |
|
|
|
title: "代理", |
|
|
|
desc: '本地代理、远程代理', |
|
|
|
desc: "本地代理、远程代理", |
|
|
|
icon: "personal", |
|
|
|
content: "SetCustom", |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: "nas", |
|
|
|
title: "NAS服务", |
|
|
|
desc: 'NAS/webdav服务', |
|
|
|
desc: "NAS/webdav服务", |
|
|
|
icon: "disk", |
|
|
|
content: "SetNas", |
|
|
|
}, |
|
|
|
// { |
|
|
|
// key: "language", |
|
|
|
// title: '语言', |
|
|
|
// desc: t("language"), |
|
|
|
// icon: "language", |
|
|
|
// content: "SetLang", |
|
|
|
// }, |
|
|
|
|
|
|
|
{ |
|
|
|
key: "account", |
|
|
|
title: "屏幕", |
|
|
|
desc: '壁纸/语言/锁屏/广告', |
|
|
|
desc: "壁纸/语言/锁屏/广告", |
|
|
|
icon: "account", |
|
|
|
content: "SetAccount", |
|
|
|
}, |
|
|
|
|
|
|
|
...(sys._rootState.settings ? sys._rootState.settings : []), |
|
|
|
]); |
|
|
|
]); |
|
|
|
|
|
|
|
const currentContent = computed(() => { |
|
|
|
return setList.value.find((item) => item.key === currentRouter.value) |
|
|
|
?.content; |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
@import "@/assets/main.scss"; |
|
|
|
@import "@/assets/main.scss"; |
|
|
|
|
|
|
|
.window-outer { |
|
|
|
.window-outer { |
|
|
|
background-color: white; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
border: #0076d795 1px solid; |
|
|
|
box-sizing: border-box; |
|
|
|
// box-shadow: inset -599px 0px 0px 0px #ffffff; |
|
|
|
transition: background-color 0.1s; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.window-outer.focus { |
|
|
|
.window-outer.focus { |
|
|
|
background-color: rgba(255, 255, 255, 0.704); |
|
|
|
backdrop-filter: blur(10px); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.upbar { |
|
|
|
.upbar { |
|
|
|
height: 40px; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
@ -178,164 +203,103 @@ const setList = ref([ |
|
|
|
height: 100%; |
|
|
|
background-color: white; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.outer { |
|
|
|
.settings-container { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
background-color: #ffffff; |
|
|
|
user-select: none; |
|
|
|
/* background-color: rgb(241, 241, 241); */ |
|
|
|
} |
|
|
|
height: calc(100% - 40px); // 减去上方工具栏的高度 |
|
|
|
} |
|
|
|
|
|
|
|
.outer_main { |
|
|
|
height: 100%; |
|
|
|
margin: 0px 10px 00px 10px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.sidebar { |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.main_uper { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: center; |
|
|
|
flex-wrap: wrap; |
|
|
|
align-items: center; |
|
|
|
height: 50px; |
|
|
|
width: 90%; |
|
|
|
} |
|
|
|
ul { |
|
|
|
list-style: none; |
|
|
|
padding: 0; |
|
|
|
|
|
|
|
.set_item { |
|
|
|
margin: 10px 20px; |
|
|
|
padding: 2px 8px 10px 2px; |
|
|
|
width: 200px; |
|
|
|
li { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
background-color: white; |
|
|
|
border: 1px solid #99999900; |
|
|
|
transition: all 0.1s; |
|
|
|
position: relative; |
|
|
|
z-index: 2; |
|
|
|
justify-content: center; |
|
|
|
padding: 10px; |
|
|
|
cursor: pointer; |
|
|
|
transition: background-color 0.2s; |
|
|
|
|
|
|
|
.set_item-img { |
|
|
|
width: 30px; |
|
|
|
margin: 10px 16px; |
|
|
|
flex-shrink: 0; |
|
|
|
&:hover { |
|
|
|
// background-color: #e0e0e0; |
|
|
|
} |
|
|
|
|
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
.icon { |
|
|
|
font-size: 1.5em; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.set_item-right { |
|
|
|
.content { |
|
|
|
flex: 1; |
|
|
|
padding: 20px; |
|
|
|
overflow-y: auto; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.set_item-title { |
|
|
|
padding: 4px 0px; |
|
|
|
@media screen and (max-width: 768px) { |
|
|
|
.window-outer { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
border: none; |
|
|
|
box-sizing: border-box; |
|
|
|
transition: background-color 0.1s; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.set_item-desc { |
|
|
|
font-size: 10px; |
|
|
|
color: #999999; |
|
|
|
.upbar { |
|
|
|
flex-direction: column; |
|
|
|
align-items: flex-start; |
|
|
|
padding: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.set_item:hover { |
|
|
|
border: 1px solid #99999954; |
|
|
|
box-shadow: 0 0 0 1px #999999 inset; |
|
|
|
} |
|
|
|
|
|
|
|
.uper_tab { |
|
|
|
/* width: 90%; */ |
|
|
|
margin: 10px 10px -1px 10px; |
|
|
|
font-size: 12px; |
|
|
|
|
|
|
|
z-index: 1; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.tab { |
|
|
|
text-align: center; |
|
|
|
.upbar-right { |
|
|
|
width: 100%; |
|
|
|
height: 40px; |
|
|
|
font-size: 20px; |
|
|
|
font-weight: 200; |
|
|
|
/* border: 1px solid #d9d9d9; */ |
|
|
|
border-bottom: none; |
|
|
|
} |
|
|
|
|
|
|
|
.tab_unactive { |
|
|
|
text-align: center; |
|
|
|
width: 40px; |
|
|
|
background-color: rgb(241, 241, 241); |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
border: 1px solid #d9d9d9; |
|
|
|
/* border-bottom:none; */ |
|
|
|
} |
|
|
|
.settings-container { |
|
|
|
flex-direction: column-reverse; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom { |
|
|
|
flex-shrink: 0; |
|
|
|
.sidebar { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: flex-end; |
|
|
|
flex-shrink: 0; |
|
|
|
width: 90%; |
|
|
|
margin: 6px auto; |
|
|
|
overflow-x: auto; |
|
|
|
border-right: none; |
|
|
|
// background-color: #f0f0f0; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom_button { |
|
|
|
width: 80px; |
|
|
|
height: 26px; |
|
|
|
line-height: 26px; |
|
|
|
text-align: center; |
|
|
|
font-size: 13px; |
|
|
|
background-color: #e1e1e1; |
|
|
|
border: 1px solid #999999; |
|
|
|
transition: all 0.2s; |
|
|
|
box-sizing: border-box; |
|
|
|
margin: 0 0 0 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom_button:first-child { |
|
|
|
border: 1px solid #0078d7; |
|
|
|
box-shadow: 0 0 0px 1px #0078d7 inset; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom_button:hover { |
|
|
|
border: 1px solid #0078d7; |
|
|
|
background-color: #e5f1fb; |
|
|
|
box-shadow: 0 0 0 0px #0078d7 inset; |
|
|
|
} |
|
|
|
// border-bottom: 1px solid #dcdcdc; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
.fade-enter-active, |
|
|
|
.fade-leave-active { |
|
|
|
transition: all 0.2s ease; |
|
|
|
} |
|
|
|
.sidebar ul { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
width: 100%; |
|
|
|
justify-content: space-around; |
|
|
|
} |
|
|
|
|
|
|
|
.fade-enter-to, |
|
|
|
.fade-leave-from { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
.content { |
|
|
|
padding: 10px; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.fade-enter-from, |
|
|
|
.fade-leave-to { |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
.icon-container { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
@media screen and (max-width: 768px) { |
|
|
|
.window-outer { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
border: none; |
|
|
|
box-sizing: border-box; |
|
|
|
// box-shadow: inset -599px 0px 0px 0px #ffffff; |
|
|
|
transition: background-color 0.1s; |
|
|
|
overflow: hidden; |
|
|
|
.icon-title { |
|
|
|
// margin-top: 5px; |
|
|
|
font-size: 0.8em; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|