Browse Source

style:优化设置页面ui

master
秋田弘 5 months ago
parent
commit
486caf444e
  1. 6
      frontend/src/components/setting/NetProxy.vue
  2. 380
      frontend/src/components/setting/Setting.vue

6
frontend/src/components/setting/NetProxy.vue

@ -75,12 +75,12 @@
</el-row> </el-row>
<el-table <el-table
:data="proxyStore.proxies" :data="proxyStore.proxies"
style="width: 98%; border: none" style="width: 100%; border: none"
> >
<el-table-column <el-table-column
prop="name" prop="name"
label="名称" label="名称"
width="100" width="80"
/> />
<el-table-column <el-table-column
prop="type" prop="type"
@ -96,7 +96,7 @@
prop="localIp" prop="localIp"
label="本地Ip" label="本地Ip"
/> />
<el-table-column label="操作"> <el-table-column fixed="right" width="120" label="操作">
<template #default="scope"> <template #default="scope">
<el-row <el-row
:gutter="24" :gutter="24"

380
frontend/src/components/setting/Setting.vue

@ -1,79 +1,110 @@
<template> <template>
<div class="window-outer" :class="{ <div
class="window-outer"
:class="{
focus: focusState && currentRouter !== 'main', focus: focusState && currentRouter !== 'main',
}"> }"
<div class="upbar" v-dragable> >
<div
class="upbar"
v-dragable
v-if="!isMobileDevice()"
>
<div class="upbar-left"> <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"> <div class="upbar-text">
{{ t("setting") }} {{ t("setting") }}
</div> </div>
</div> </div>
<div class="upbar-right" v-if="!isMobileDevice()"> <div class="upbar-right">
<WinUpButtonGroup :browser-window="browserWindow"></WinUpButtonGroup> <WinUpButtonGroup
</div> :browser-window="browserWindow"
</div> ></WinUpButtonGroup>
<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> </div>
</div> </div>
<div class="outer_main">
<div class="main_uper"> <div class="settings-container">
<div class="set_item" v-for="item in setList" :key="item.title" @click="openSet(item.key)" v-glowing="{ <aside class="sidebar">
color: '#3c3c3ce4', <ul>
scale: 0.6, <li
}"> v-for="item in setList"
<div class="set_item-img"> :key="item.key"
<!-- <img class="set_item-img-img" :src="item.icon" /> --> @click="openSet(item.key)"
<svg class="icon" aria-hidden="true" style="font-size: 2em"> >
<ElTooltip
v-if="!isMobileDevice()"
:content="item.title"
placement="right"
>
<svg
class="icon"
aria-hidden="true"
>
<use :xlink:href="'#icon-' + item.icon"></use> <use :xlink:href="'#icon-' + item.icon"></use>
</svg> </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>
<div class="set_item-right"> </li>
<div class="set_item-title">{{ item.title }}</div> </ul>
<div class="set_item-desc">{{ item.desc }}</div> </aside>
</div> <main class="content">
</div> <Transition
</div> name="fade"
</div> appear
</div> >
<component
:is="stepComponent(currentContent)"
v-if="currentContent"
/>
</Transition> </Transition>
</main>
</div>
</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); <script lang="ts" setup>
browserWindow?.on("focus", () => { 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; focusState.value = true;
}); });
browserWindow?.on("blur", () => { browserWindow?.on("blur", () => {
focusState.value = false; focusState.value = false;
}); });
function back() { function back() {
currentRouter.value = "main"; currentRouter.value = "main";
} }
function openSet(key: string) { function openSet(key: string) {
currentRouter.value = key; currentRouter.value = key;
} }
const setList = ref([ const setList = ref([
{ {
key: "system", key: "system",
title: t("system"), title: t("system"),
@ -81,61 +112,55 @@ const setList = ref([
icon: "system", icon: "system",
content: "SetSystem", content: "SetSystem",
}, },
{ {
key: "custom", key: "custom",
title: "代理", title: "代理",
desc: '本地代理、远程代理', desc: "本地代理、远程代理",
icon: "personal", icon: "personal",
content: "SetCustom", content: "SetCustom",
}, },
{ {
key: "nas", key: "nas",
title: "NAS服务", title: "NAS服务",
desc: 'NAS/webdav服务', desc: "NAS/webdav服务",
icon: "disk", icon: "disk",
content: "SetNas", content: "SetNas",
}, },
// {
// key: "language",
// title: '',
// desc: t("language"),
// icon: "language",
// content: "SetLang",
// },
{ {
key: "account", key: "account",
title: "屏幕", title: "屏幕",
desc: '壁纸/语言/锁屏/广告', desc: "壁纸/语言/锁屏/广告",
icon: "account", icon: "account",
content: "SetAccount", content: "SetAccount",
}, },
...(sys._rootState.settings ? sys._rootState.settings : []), ...(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;
@ -178,164 +203,103 @@ const setList = ref([
height: 100%; height: 100%;
background-color: white; background-color: white;
} }
} }
.outer { .settings-container {
display: flex; display: flex;
flex-direction: column; height: calc(100% - 40px); //
height: 100%; }
width: 100%;
background-color: #ffffff;
user-select: none;
/* background-color: rgb(241, 241, 241); */
}
.outer_main { .sidebar {
height: 100%; box-sizing: border-box;
margin: 0px 10px 00px 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.main_uper { ul {
display: flex; list-style: none;
flex-direction: row; padding: 0;
justify-content: center;
flex-wrap: wrap;
align-items: center;
height: 50px;
width: 90%;
}
.set_item { li {
margin: 10px 20px;
padding: 2px 8px 10px 2px;
width: 200px;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: white; justify-content: center;
border: 1px solid #99999900; padding: 10px;
transition: all 0.1s; cursor: pointer;
position: relative; transition: background-color 0.2s;
z-index: 2;
.set_item-img { &:hover {
width: 30px; // background-color: #e0e0e0;
margin: 10px 16px; }
flex-shrink: 0;
img { .icon {
width: 100%; font-size: 1.5em;
}
}
} }
} }
.set_item-right { .content {
flex: 1; flex: 1;
padding: 20px;
overflow-y: auto;
box-sizing: border-box;
} }
.set_item-title { @media screen and (max-width: 768px) {
padding: 4px 0px; .window-outer {
width: 100%;
height: 100%;
border: none;
box-sizing: border-box;
transition: background-color 0.1s;
overflow: hidden;
} }
.set_item-desc { .upbar {
font-size: 10px; flex-direction: column;
color: #999999; 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 { .upbar-right {
text-align: center;
width: 100%; width: 100%;
height: 40px; justify-content: space-between;
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);
border: 1px solid #d9d9d9; .settings-container {
/* border-bottom:none; */ flex-direction: column-reverse;
} }
.bottom { .sidebar {
flex-shrink: 0; width: 100%;
display: flex; display: flex;
flex-direction: row; overflow-x: auto;
justify-content: flex-end; border-right: none;
flex-shrink: 0;
width: 90%;
margin: 6px auto;
// background-color: #f0f0f0; // background-color: #f0f0f0;
} // border-bottom: 1px solid #dcdcdc;
justify-content: center;
.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, .sidebar ul {
.fade-leave-active { display: flex;
transition: all 0.2s ease; flex-direction: row;
} width: 100%;
justify-content: space-around;
}
.fade-enter-to, .content {
.fade-leave-from { padding: 10px;
opacity: 1; flex: 1;
} }
}
.fade-enter-from, .icon-container {
.fade-leave-to { display: flex;
opacity: 0; flex-direction: column;
} align-items: center;
}
@media screen and (max-width: 768px) { .icon-title {
.window-outer { // margin-top: 5px;
width: 100%; font-size: 0.8em;
height: 100%; color: #333;
border: none;
box-sizing: border-box;
// box-shadow: inset -599px 0px 0px 0px #ffffff;
transition: background-color 0.1s;
overflow: hidden;
} }
}
</style> </style>

Loading…
Cancel
Save