Browse Source

style:优化设置页面ui

master
秋田弘 5 months ago
parent
commit
486caf444e
  1. 6
      frontend/src/components/setting/NetProxy.vue
  2. 632
      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"

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

@ -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…
Cancel
Save