mirror of https://gitee.com/godoos/godoos.git
11 changed files with 797 additions and 588 deletions
@ -1,199 +1,341 @@ |
|||||
<template> |
<template> |
||||
<div class="container"> |
<div class="container"> |
||||
<div class="nav"> |
<div class="nav"> |
||||
<ul> |
<ul> |
||||
<li v-for="(item, index) in items" :key="index" @click="selectItem(index)" |
<li |
||||
:class="{ active: index === activeIndex }"> |
v-for="(item, index) in items" |
||||
{{ item }} |
:key="index" |
||||
</li> |
@click="selectItem(index)" |
||||
</ul> |
:class="{ active: index === activeIndex }" |
||||
</div> |
> |
||||
<div class="setting"> |
{{ item }} |
||||
<div v-if="0 === activeIndex"> |
</li> |
||||
<div class="setting-item"> |
</ul> |
||||
<h1 class="setting-title">{{ t("background") }}</h1> |
</div> |
||||
</div> |
<div class="setting"> |
||||
<div class="setting-item"> |
<div v-if="0 === activeIndex"> |
||||
<el-select v-model="config.background.type"> |
<div class="setting-item"> |
||||
<el-option v-for="(item, key) in desktopOptions" :key="key" :label="item.label" :value="item.value" /> |
<h1 class="setting-title">{{ t("background") }}</h1> |
||||
</el-select> |
</div> |
||||
</div> |
<div class="setting-item"> |
||||
<template v-if="config.background.type === 'color'"> |
<el-select v-model="config.background.type"> |
||||
<div class="setting-item"> |
<el-option |
||||
<label> </label> |
v-for="(item, key) in desktopOptions" |
||||
<ColorPicker v-model:modelValue="config.background.color" @update:modelValue="onColorChange"></ColorPicker> |
:key="key" |
||||
</div> |
:label="item.label" |
||||
</template> |
:value="item.value" |
||||
<template v-if="config.background.type === 'image'"> |
/> |
||||
<div class="setting-item"> |
</el-select> |
||||
<ul class="image-gallery"> |
</div> |
||||
<li v-for="(item, index) in config.background.imageList" :key="index" |
<template v-if="config.background.type === 'color'"> |
||||
:class="config.background.url === item ? 'selected' : ''" @click="setBg(item)"> |
<div class="setting-item"> |
||||
<img :src="item" /> |
<label> </label> |
||||
</li> |
<ColorPicker |
||||
</ul> |
v-model:modelValue="config.background.color" |
||||
</div> |
@update:modelValue="onColorChange" |
||||
<div class="setting-item"> |
></ColorPicker> |
||||
<label> </label> |
</div> |
||||
</div> |
</template> |
||||
</template> |
<template v-if="config.background.type === 'image'"> |
||||
</div> |
<div class="setting-item"> |
||||
<div v-if="1 === activeIndex"> |
<ul class="image-gallery"> |
||||
<div class="setting-item"> |
<li |
||||
<h1 class="setting-title">锁屏</h1> |
v-for="(item, index) in config.background |
||||
</div> |
.imageList" |
||||
<div class="setting-item"> |
:key="index" |
||||
<label> {{ t('account') }} </label> |
:class=" |
||||
<el-input v-model="account.username" :placeholder="t('account')" clearable /> |
config.background.url === item |
||||
</div> |
? 'selected' |
||||
<div class="setting-item"> |
: '' |
||||
<label> {{ t('password') }} </label> |
" |
||||
<el-input v-model="account.password" type="password" :placeholder="t('password')" clearable /> |
@click="setBg(item)" |
||||
</div> |
> |
||||
|
<img :src="item" /> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="setting-item"> |
||||
|
<label> </label> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
<div v-if="1 === activeIndex"> |
||||
|
<div class="setting-item"> |
||||
|
<h1 class="setting-title">锁屏</h1> |
||||
|
</div> |
||||
|
<div class="setting-item"> |
||||
|
<label> {{ t("account") }} </label> |
||||
|
<el-input |
||||
|
v-model="account.username" |
||||
|
:placeholder="t('account')" |
||||
|
clearable |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="setting-item"> |
||||
|
<label> {{ t("password") }} </label> |
||||
|
<el-input |
||||
|
v-model="account.password" |
||||
|
type="password" |
||||
|
:placeholder="t('password')" |
||||
|
clearable |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
<div class="setting-item"> |
<div class="setting-item"> |
||||
<label></label> |
<label></label> |
||||
<el-button @click="submit" type="primary"> |
<el-button |
||||
{{ t('confirm') }} |
@click="submit" |
||||
</el-button> |
type="primary" |
||||
</div> |
> |
||||
</div> |
<span v-if="loginOrRegister">锁屏</span> |
||||
<div v-if="2 === activeIndex"> |
<span v-else>立即注册</span> |
||||
<div class="setting-item"> |
</el-button> |
||||
<h1 class="setting-title">广告与更新提示</h1> |
</div> |
||||
|
|
||||
</div> |
<div class="setting-item"> |
||||
<div class="setting-item"> |
<label></label> |
||||
<label></label> |
<small |
||||
<el-switch v-model="ad" active-text="开启" inactive-text="关闭" size="large" :before-change="setAd"></el-switch> |
v-if="loginOrRegister" |
||||
</div> |
style="font-size: 12px" |
||||
</div> |
>还没有账号?<a |
||||
<div v-if="3 === activeIndex"> |
href="#" |
||||
<div class="setting-item"> |
@click.prevent="loginOrRegister = false" |
||||
<h1 class="setting-title">{{ t("language") }}</h1> |
><span>立即注册</span></a |
||||
</div> |
></small |
||||
<div class="setting-item"> |
> |
||||
<label></label> |
<span |
||||
<el-select v-model="modelvalue"> |
v-else |
||||
<el-option v-for="(item, key) in langList" :key="key" :label="item.label" :value="item.value" /> |
style="font-size: 12px" |
||||
</el-select> |
> |
||||
</div> |
<span>注册完成,</span> |
||||
|
<a |
||||
|
href="#" |
||||
|
@click.prevent="loginOrRegister = true" |
||||
|
><span>点我返回</span></a |
||||
|
> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="2 === activeIndex"> |
||||
|
<div class="setting-item"> |
||||
|
<h1 class="setting-title">广告与更新提示</h1> |
||||
|
</div> |
||||
|
<div class="setting-item"> |
||||
|
<label></label> |
||||
|
<el-switch |
||||
|
v-model="ad" |
||||
|
active-text="开启" |
||||
|
inactive-text="关闭" |
||||
|
size="large" |
||||
|
:before-change="setAd" |
||||
|
></el-switch> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="3 === activeIndex"> |
||||
|
<div class="setting-item"> |
||||
|
<h1 class="setting-title">{{ t("language") }}</h1> |
||||
|
</div> |
||||
|
<div class="setting-item"> |
||||
|
<label></label> |
||||
|
<el-select v-model="modelvalue"> |
||||
|
<el-option |
||||
|
v-for="(item, key) in langList" |
||||
|
:key="key" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
|
||||
<div class="setting-item"> |
<div class="setting-item"> |
||||
<label></label> |
<label></label> |
||||
<el-button @click="submitLang" type="primary"> |
<el-button |
||||
{{ t("confirm") }} |
@click="submitLang" |
||||
</el-button> |
type="primary" |
||||
</div> |
> |
||||
</div> |
{{ t("confirm") }} |
||||
</div> |
</el-button> |
||||
</div> |
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
|
import { getLang, setLang, t } from "@/i18n"; |
||||
|
import { |
||||
|
getSystemConfig, |
||||
|
getSystemKey, |
||||
|
setSystemConfig, |
||||
|
setSystemKey, |
||||
|
} from "@/system/config"; |
||||
|
import { useSystem } from "@/system/index.ts"; |
||||
|
import { SystemStateEnum } from "@/system/type/enum"; |
||||
|
import { notifyError, notifySuccess } from "@/util/msg"; |
||||
|
import { ElMessageBox } from "element-plus"; |
||||
|
import { ref, watch } from "vue"; |
||||
|
import { useI18n } from "vue-i18n"; |
||||
|
const { locale } = useI18n(); |
||||
|
const sys = useSystem(); |
||||
|
const items = [t("background"), "锁屏设置", "广告设置", "语言"]; |
||||
|
const activeIndex = ref(0); |
||||
|
const account = ref(getSystemKey("account")); |
||||
|
const ad = ref(account.value.ad); |
||||
|
const config: any = ref(getSystemConfig()); |
||||
|
const loginOrRegister = ref(true); |
||||
|
const langList = [ |
||||
|
{ |
||||
|
label: "中文", |
||||
|
value: "zh-cn", |
||||
|
}, |
||||
|
{ |
||||
|
label: "English", |
||||
|
value: "en", |
||||
|
}, |
||||
|
]; |
||||
|
const currentLang = getLang(); |
||||
|
const modelvalue = ref(currentLang); |
||||
|
const selectItem = (index: number) => { |
||||
|
activeIndex.value = index; |
||||
|
}; |
||||
|
const desktopOptions = [ |
||||
|
{ |
||||
|
label: t("image"), |
||||
|
value: "image", |
||||
|
}, |
||||
|
{ |
||||
|
label: t("color"), |
||||
|
value: "color", |
||||
|
}, |
||||
|
]; |
||||
|
async function submit() { |
||||
|
// setSystemKey("account", account.value); |
||||
|
// Dialog.showMessageBox({ |
||||
|
// message: t("save.success"), |
||||
|
// title: t("account"), |
||||
|
// type: "info", |
||||
|
// }).then(() => { |
||||
|
// location.reload(); |
||||
|
// }); |
||||
|
const data = { |
||||
|
username: account.value.username, |
||||
|
password: account.value.password, |
||||
|
}; |
||||
|
|
||||
import { ref } from 'vue'; |
const aiUrl = config.value.aiUrl; |
||||
import { Dialog, useSystem } from '@/system/index.ts'; |
if (!loginOrRegister.value) { |
||||
import { getSystemKey, setSystemKey, getSystemConfig, setSystemConfig } from '@/system/config' |
console.log(data); |
||||
import { ElMessageBox } from 'element-plus' |
|
||||
import { getLang, setLang, t } from "@/i18n"; |
|
||||
import { useI18n } from "vue-i18n"; |
|
||||
const { locale } = useI18n(); |
|
||||
const sys = useSystem(); |
|
||||
const items = [t("background"), '锁屏设置', '广告设置', '语言']; |
|
||||
const activeIndex = ref(0); |
|
||||
const account = ref(getSystemKey('account')); |
|
||||
const ad = ref(account.value.ad) |
|
||||
const config: any = ref(getSystemConfig()); |
|
||||
const langList = [ |
|
||||
{ |
|
||||
label: "中文", |
|
||||
value: "zh-cn", |
|
||||
}, |
|
||||
{ |
|
||||
label: "English", |
|
||||
value: "en", |
|
||||
}, |
|
||||
]; |
|
||||
const currentLang = getLang(); |
|
||||
const modelvalue = ref(currentLang); |
|
||||
const selectItem = (index: number) => { |
|
||||
activeIndex.value = index; |
|
||||
}; |
|
||||
const desktopOptions = [ |
|
||||
{ |
|
||||
label: t("image"), |
|
||||
value: "image", |
|
||||
}, |
|
||||
{ |
|
||||
label: t("color"), |
|
||||
value: "color", |
|
||||
}, |
|
||||
]; |
|
||||
async function submit() { |
|
||||
setSystemKey('account', account.value); |
|
||||
Dialog.showMessageBox({ |
|
||||
message: t('save.success'), |
|
||||
title: t('account'), |
|
||||
type: 'info', |
|
||||
}).then(() => { |
|
||||
location.reload(); |
|
||||
}); |
|
||||
} |
|
||||
function setAd() { |
|
||||
const data = toRaw(account.value) |
|
||||
if (ad.value) { |
|
||||
return new Promise((resolve) => { |
|
||||
setTimeout(() => { |
|
||||
ElMessageBox.confirm( |
|
||||
'广告关闭后您将收不到任何系统通知和更新提示!', |
|
||||
'Warning', |
|
||||
{ |
|
||||
confirmButtonText: '确定关闭', |
|
||||
cancelButtonText: '取消', |
|
||||
type: 'warning', |
|
||||
} |
|
||||
) |
|
||||
.then(() => { |
|
||||
data.ad = false |
|
||||
setSystemKey('account', data); |
|
||||
return resolve(true) |
|
||||
}) |
|
||||
.catch(() => { |
|
||||
return resolve(false) |
|
||||
}) |
|
||||
|
|
||||
}, 1000) |
try { |
||||
}) |
const response = await fetch(aiUrl + "/user/register", { |
||||
} else { |
method: "POST", |
||||
data.ad = true |
headers: { |
||||
setSystemKey('account', data); |
"Content-Type": "application/json", |
||||
return Promise.resolve(true) |
}, |
||||
} |
body: JSON.stringify(data), |
||||
|
}); |
||||
|
|
||||
} |
if (response.ok) { |
||||
function setBg(item: any) { |
const result = await response.json(); |
||||
config.value.background.url = item |
if (result.code == 0) { |
||||
config.value.background.type = "image"; |
notifySuccess("注册成功"); |
||||
setSystemConfig(config.value); |
loginOrRegister.value = true; |
||||
sys.initBackground(); |
} else { |
||||
|
notifyError("注册失败"); |
||||
|
} |
||||
|
} else { |
||||
|
notifyError("注册失败"); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
notifyError("注册失败"); |
||||
|
console.error("请求错误:", error); |
||||
|
} |
||||
|
} else { |
||||
|
const response = await fetch(aiUrl + "/user/screen/lock", { |
||||
|
method: "POST", |
||||
|
headers: { |
||||
|
"Content-Type": "application/json", |
||||
|
}, |
||||
|
body: JSON.stringify(data), |
||||
|
}); |
||||
|
|
||||
} |
if (response.ok) { |
||||
function onColorChange(color: string) { |
const result = await response.json(); |
||||
config.value.background.color = color; |
if (result.code == 0) { |
||||
config.value.background.type = "color"; |
notifySuccess("锁屏成功"); |
||||
setSystemConfig(config.value); |
loginOrRegister.value = true; |
||||
sys.initBackground(); |
// 获取返回头中的sysuser |
||||
} |
const data = { |
||||
async function submitLang() { |
sysuser: result.data, |
||||
|
lock: true, |
||||
|
}; |
||||
|
localStorage.setItem("syslock", JSON.stringify(data)); |
||||
|
sys._rootState.state = SystemStateEnum.lock; |
||||
|
} else { |
||||
|
notifyError("锁屏失败"); |
||||
|
} |
||||
|
} else { |
||||
|
notifyError("锁屏失败"); |
||||
|
} |
||||
|
} |
||||
|
setSystemKey("account", account.value); |
||||
|
} |
||||
|
function setAd() { |
||||
|
const data = toRaw(account.value); |
||||
|
if (ad.value) { |
||||
|
return new Promise((resolve) => { |
||||
|
setTimeout(() => { |
||||
|
ElMessageBox.confirm( |
||||
|
"广告关闭后您将收不到任何系统通知和更新提示!", |
||||
|
"Warning", |
||||
|
{ |
||||
|
confirmButtonText: "确定关闭", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning", |
||||
|
} |
||||
|
) |
||||
|
.then(() => { |
||||
|
data.ad = false; |
||||
|
setSystemKey("account", data); |
||||
|
return resolve(true); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
return resolve(false); |
||||
|
}); |
||||
|
}, 1000); |
||||
|
}); |
||||
|
} else { |
||||
|
data.ad = true; |
||||
|
setSystemKey("account", data); |
||||
|
return Promise.resolve(true); |
||||
|
} |
||||
|
} |
||||
|
function setBg(item: any) { |
||||
|
config.value.background.url = item; |
||||
|
config.value.background.type = "image"; |
||||
|
setSystemConfig(config.value); |
||||
|
sys.initBackground(); |
||||
|
} |
||||
|
function onColorChange(color: string) { |
||||
|
config.value.background.color = color; |
||||
|
config.value.background.type = "color"; |
||||
|
setSystemConfig(config.value); |
||||
|
sys.initBackground(); |
||||
|
} |
||||
|
async function submitLang() { |
||||
setLang(modelvalue.value); |
setLang(modelvalue.value); |
||||
locale.value = modelvalue.value; |
locale.value = modelvalue.value; |
||||
ElMessageBox.alert(t("save.success"), t("language"), { |
ElMessageBox.alert(t("save.success"), t("language"), { |
||||
confirmButtonText: "OK", |
confirmButtonText: "OK", |
||||
}); |
}); |
||||
} |
} |
||||
|
|
||||
|
watch(loginOrRegister, () => { |
||||
|
account.value.username = ""; |
||||
|
account.value.password = ""; |
||||
|
}); |
||||
</script> |
</script> |
||||
<style scoped> |
<style scoped> |
||||
@import "./setStyle.css"; |
@import "./setStyle.css"; |
||||
@import "@/assets/imglist.scss"; |
@import "@/assets/imglist.scss"; |
||||
</style> |
</style> |
||||
|
@ -1,341 +1,305 @@ |
|||||
<template> |
<template> |
||||
<div class="window-outer" :class="{ |
<div |
||||
focus: focusState && currentRouter !== 'main', |
class="window-outer" |
||||
}"> |
:class="{ |
||||
<div class="upbar" v-dragable> |
focus: focusState && currentRouter !== 'main', |
||||
<div class="upbar-left"> |
}" |
||||
<div class="back-arr" v-if="currentRouter !== 'main'" @click="back">←</div> |
> |
||||
<div class="upbar-text"> |
<div |
||||
{{ t("setting") }} |
class="upbar" |
||||
</div> |
v-dragable |
||||
</div> |
v-if="!isMobileDevice()" |
||||
<div class="upbar-right" v-if="!isMobileDevice()"> |
> |
||||
<WinUpButtonGroup :browser-window="browserWindow"></WinUpButtonGroup> |
<div class="upbar-left"> |
||||
</div> |
<div |
||||
</div> |
class="back-arr" |
||||
<Transition v-for="item in setList" :key="item.key" name="fade" appear> |
v-if="currentRouter !== 'main'" |
||||
<component :is="stepComponent(item.content)" v-if="currentRouter === item.key" /> |
@click="back" |
||||
</Transition> |
> |
||||
<Transition name="fade" appear> |
← |
||||
<div class="outer" v-if="currentRouter === 'main'"> |
</div> |
||||
<div class="uper_tab"> |
<div class="upbar-text"> |
||||
<div class="tab"> |
{{ t("setting") }} |
||||
{{ t("windows.setting") }} |
</div> |
||||
</div> |
</div> |
||||
</div> |
<div class="upbar-right"> |
||||
<div class="outer_main"> |
<WinUpButtonGroup |
||||
<div class="main_uper"> |
:browser-window="browserWindow" |
||||
<div class="set_item" v-for="item in setList" :key="item.title" @click="openSet(item.key)" v-glowing="{ |
></WinUpButtonGroup> |
||||
color: '#3c3c3ce4', |
</div> |
||||
scale: 0.6, |
</div> |
||||
}"> |
|
||||
<div class="set_item-img"> |
<div class="settings-container"> |
||||
<!-- <img class="set_item-img-img" :src="item.icon" /> --> |
<aside class="sidebar"> |
||||
<svg class="icon" aria-hidden="true" style="font-size: 2em"> |
<ul> |
||||
<use :xlink:href="'#icon-' + item.icon"></use> |
<li |
||||
</svg> |
v-for="item in setList" |
||||
</div> |
:key="item.key" |
||||
<div class="set_item-right"> |
@click="openSet(item.key)" |
||||
<div class="set_item-title">{{ item.title }}</div> |
> |
||||
<div class="set_item-desc">{{ item.desc }}</div> |
<ElTooltip |
||||
</div> |
v-if="!isMobileDevice()" |
||||
</div> |
:content="item.title" |
||||
</div> |
placement="right" |
||||
</div> |
> |
||||
</div> |
<svg |
||||
</Transition> |
class="icon" |
||||
</div> |
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> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</aside> |
||||
|
<main class="content"> |
||||
|
<Transition |
||||
|
name="fade" |
||||
|
appear |
||||
|
> |
||||
|
<component |
||||
|
:is="stepComponent(currentContent)" |
||||
|
v-if="currentContent" |
||||
|
/> |
||||
|
</Transition> |
||||
|
</main> |
||||
|
</div> |
||||
|
</div> |
||||
</template> |
</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", () => { |
|
||||
focusState.value = true; |
|
||||
}); |
|
||||
browserWindow?.on("blur", () => { |
|
||||
focusState.value = false; |
|
||||
}); |
|
||||
function back() { |
|
||||
currentRouter.value = "main"; |
|
||||
} |
|
||||
function openSet(key: string) { |
|
||||
currentRouter.value = key; |
|
||||
} |
|
||||
const setList = ref([ |
|
||||
{ |
|
||||
key: "system", |
|
||||
title: t("system"), |
|
||||
desc: "存储、备份还原、用户角色", |
|
||||
icon: "system", |
|
||||
content: "SetSystem", |
|
||||
}, |
|
||||
|
|
||||
{ |
|
||||
key: "custom", |
|
||||
title: "代理", |
|
||||
desc: '本地代理、远程代理', |
|
||||
icon: "personal", |
|
||||
content: "SetCustom", |
|
||||
}, |
|
||||
{ |
|
||||
key: "nas", |
|
||||
title: "NAS服务", |
|
||||
desc: 'NAS/webdav服务', |
|
||||
icon: "disk", |
|
||||
content: "SetNas", |
|
||||
}, |
|
||||
// { |
|
||||
// key: "language", |
|
||||
// title: '语言', |
|
||||
// desc: t("language"), |
|
||||
// icon: "language", |
|
||||
// content: "SetLang", |
|
||||
// }, |
|
||||
|
|
||||
{ |
|
||||
key: "account", |
|
||||
title: "屏幕", |
|
||||
desc: '壁纸/语言/锁屏/广告', |
|
||||
icon: "account", |
|
||||
content: "SetAccount", |
|
||||
}, |
|
||||
|
|
||||
...(sys._rootState.settings ? sys._rootState.settings : []), |
<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", () => { |
||||
|
focusState.value = false; |
||||
|
}); |
||||
|
function back() { |
||||
|
currentRouter.value = "main"; |
||||
|
} |
||||
|
function openSet(key: string) { |
||||
|
currentRouter.value = key; |
||||
|
} |
||||
|
const setList = ref([ |
||||
|
{ |
||||
|
key: "system", |
||||
|
title: t("system"), |
||||
|
desc: "存储、备份还原、用户角色", |
||||
|
icon: "system", |
||||
|
content: "SetSystem", |
||||
|
}, |
||||
|
{ |
||||
|
key: "custom", |
||||
|
title: "代理", |
||||
|
desc: "本地代理、远程代理", |
||||
|
icon: "personal", |
||||
|
content: "SetCustom", |
||||
|
}, |
||||
|
{ |
||||
|
key: "nas", |
||||
|
title: "NAS服务", |
||||
|
desc: "NAS/webdav服务", |
||||
|
icon: "disk", |
||||
|
content: "SetNas", |
||||
|
}, |
||||
|
{ |
||||
|
key: "account", |
||||
|
title: "屏幕", |
||||
|
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> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
@import "@/assets/main.scss"; |
@import "@/assets/main.scss"; |
||||
|
|
||||
.window-outer { |
.window-outer { |
||||
background-color: white; |
background-color: white; |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
border: #0076d795 1px solid; |
border: #0076d795 1px solid; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
// box-shadow: inset -599px 0px 0px 0px #ffffff; |
transition: background-color 0.1s; |
||||
transition: background-color 0.1s; |
overflow: hidden; |
||||
overflow: hidden; |
} |
||||
} |
|
||||
|
.window-outer.focus { |
||||
.window-outer.focus { |
background-color: rgba(255, 255, 255, 0.704); |
||||
background-color: rgba(255, 255, 255, 0.704); |
backdrop-filter: blur(10px); |
||||
backdrop-filter: blur(10px); |
} |
||||
} |
|
||||
|
.upbar { |
||||
.upbar { |
height: 40px; |
||||
height: 40px; |
width: 100%; |
||||
width: 100%; |
display: flex; |
||||
display: flex; |
justify-content: space-between; |
||||
justify-content: space-between; |
align-items: center; |
||||
align-items: center; |
user-select: none; |
||||
user-select: none; |
|
||||
|
.upbar-left { |
||||
.upbar-left { |
display: flex; |
||||
display: flex; |
align-items: center; |
||||
align-items: center; |
font-size: 12px; |
||||
font-size: 12px; |
height: 100%; |
||||
height: 100%; |
|
||||
|
.back-arr { |
||||
.back-arr { |
padding: 0 6px; |
||||
padding: 0 6px; |
margin-right: 3px; |
||||
margin-right: 3px; |
font-size: 14px; |
||||
font-size: 14px; |
width: 40px; |
||||
width: 40px; |
height: 100%; |
||||
height: 100%; |
display: flex; |
||||
display: flex; |
justify-content: center; |
||||
justify-content: center; |
align-items: center; |
||||
align-items: center; |
} |
||||
} |
|
||||
|
.back-arr:hover { |
||||
.back-arr:hover { |
color: var(--color-ui-gray); |
||||
color: var(--color-ui-gray); |
background-color: var(--color-dark); |
||||
background-color: var(--color-dark); |
} |
||||
} |
|
||||
|
.upbar-text { |
||||
.upbar-text { |
font-size: 14px; |
||||
font-size: 14px; |
margin-left: 10px; |
||||
margin-left: 10px; |
} |
||||
} |
} |
||||
} |
|
||||
|
.upbar-right { |
||||
.upbar-right { |
width: calc(100% - 200px); |
||||
width: calc(100% - 200px); |
display: flex; |
||||
display: flex; |
justify-content: flex-end; |
||||
justify-content: flex-end; |
height: 100%; |
||||
height: 100%; |
background-color: white; |
||||
background-color: white; |
} |
||||
} |
} |
||||
} |
|
||||
|
.settings-container { |
||||
.outer { |
display: flex; |
||||
display: flex; |
height: calc(100% - 40px); // 减去上方工具栏的高度 |
||||
flex-direction: column; |
} |
||||
height: 100%; |
|
||||
width: 100%; |
.sidebar { |
||||
background-color: #ffffff; |
box-sizing: border-box; |
||||
user-select: none; |
|
||||
/* background-color: rgb(241, 241, 241); */ |
ul { |
||||
} |
list-style: none; |
||||
|
padding: 0; |
||||
.outer_main { |
|
||||
height: 100%; |
li { |
||||
margin: 0px 10px 00px 10px; |
display: flex; |
||||
display: flex; |
align-items: center; |
||||
flex-direction: column; |
justify-content: center; |
||||
align-items: center; |
padding: 10px; |
||||
} |
cursor: pointer; |
||||
|
transition: background-color 0.2s; |
||||
.main_uper { |
|
||||
display: flex; |
&:hover { |
||||
flex-direction: row; |
// background-color: #e0e0e0; |
||||
justify-content: center; |
} |
||||
flex-wrap: wrap; |
|
||||
align-items: center; |
.icon { |
||||
height: 50px; |
font-size: 1.5em; |
||||
width: 90%; |
} |
||||
} |
} |
||||
|
} |
||||
.set_item { |
} |
||||
margin: 10px 20px; |
|
||||
padding: 2px 8px 10px 2px; |
.content { |
||||
width: 200px; |
flex: 1; |
||||
display: flex; |
padding: 20px; |
||||
align-items: center; |
overflow-y: auto; |
||||
background-color: white; |
box-sizing: border-box; |
||||
border: 1px solid #99999900; |
} |
||||
transition: all 0.1s; |
|
||||
position: relative; |
@media screen and (max-width: 768px) { |
||||
z-index: 2; |
.window-outer { |
||||
|
width: 100%; |
||||
.set_item-img { |
height: 100%; |
||||
width: 30px; |
border: none; |
||||
margin: 10px 16px; |
box-sizing: border-box; |
||||
flex-shrink: 0; |
transition: background-color 0.1s; |
||||
|
overflow: hidden; |
||||
img { |
} |
||||
width: 100%; |
|
||||
} |
.upbar { |
||||
} |
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
.set_item-right { |
padding: 10px; |
||||
flex: 1; |
} |
||||
} |
|
||||
|
.upbar-right { |
||||
.set_item-title { |
width: 100%; |
||||
padding: 4px 0px; |
justify-content: space-between; |
||||
} |
} |
||||
|
|
||||
.set_item-desc { |
.settings-container { |
||||
font-size: 10px; |
flex-direction: column-reverse; |
||||
color: #999999; |
} |
||||
} |
|
||||
} |
.sidebar { |
||||
|
width: 100%; |
||||
.set_item:hover { |
display: flex; |
||||
border: 1px solid #99999954; |
overflow-x: auto; |
||||
box-shadow: 0 0 0 1px #999999 inset; |
border-right: none; |
||||
} |
// background-color: #f0f0f0; |
||||
|
// border-bottom: 1px solid #dcdcdc; |
||||
.uper_tab { |
justify-content: center; |
||||
/* width: 90%; */ |
} |
||||
margin: 10px 10px -1px 10px; |
|
||||
font-size: 12px; |
.sidebar ul { |
||||
|
display: flex; |
||||
z-index: 1; |
flex-direction: row; |
||||
display: flex; |
width: 100%; |
||||
} |
justify-content: space-around; |
||||
|
} |
||||
.tab { |
|
||||
text-align: center; |
.content { |
||||
width: 100%; |
padding: 10px; |
||||
height: 40px; |
flex: 1; |
||||
font-size: 20px; |
} |
||||
font-weight: 200; |
} |
||||
/* border: 1px solid #d9d9d9; */ |
|
||||
border-bottom: none; |
.icon-container { |
||||
} |
display: flex; |
||||
|
flex-direction: column; |
||||
.tab_unactive { |
align-items: center; |
||||
text-align: center; |
} |
||||
width: 40px; |
|
||||
background-color: rgb(241, 241, 241); |
.icon-title { |
||||
|
// margin-top: 5px; |
||||
border: 1px solid #d9d9d9; |
font-size: 0.8em; |
||||
/* border-bottom:none; */ |
color: #333; |
||||
} |
} |
||||
|
|
||||
.bottom { |
|
||||
flex-shrink: 0; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: flex-end; |
|
||||
flex-shrink: 0; |
|
||||
width: 90%; |
|
||||
margin: 6px auto; |
|
||||
// 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; |
|
||||
} |
|
||||
|
|
||||
.fade-enter-active, |
|
||||
.fade-leave-active { |
|
||||
transition: all 0.2s ease; |
|
||||
} |
|
||||
|
|
||||
.fade-enter-to, |
|
||||
.fade-leave-from { |
|
||||
opacity: 1; |
|
||||
} |
|
||||
|
|
||||
.fade-enter-from, |
|
||||
.fade-leave-to { |
|
||||
opacity: 0; |
|
||||
} |
|
||||
|
|
||||
@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; |
|
||||
} |
|
||||
} |
|
||||
</style> |
</style> |
||||
|
Loading…
Reference in new issue