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

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

@ -1,341 +1,305 @@
<template>
<div class="window-outer" :class="{
focus: focusState && currentRouter !== 'main',
}">
<div class="upbar" v-dragable>
<div class="upbar-left">
<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>
</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">
<use :xlink:href="'#icon-' + item.icon"></use>
</svg>
</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>
</Transition>
</div>
<div
class="window-outer"
:class="{
focus: focusState && currentRouter !== 'main',
}"
>
<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="upbar-text">
{{ t("setting") }}
</div>
</div>
<div class="upbar-right">
<WinUpButtonGroup
:browser-window="browserWindow"
></WinUpButtonGroup>
</div>
</div>
<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>
</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", () => {
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>
<style lang="scss" scoped>
@import "@/assets/main.scss";
.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 {
background-color: rgba(255, 255, 255, 0.704);
backdrop-filter: blur(10px);
}
.upbar {
height: 40px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
.upbar-left {
display: flex;
align-items: center;
font-size: 12px;
height: 100%;
.back-arr {
padding: 0 6px;
margin-right: 3px;
font-size: 14px;
width: 40px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.back-arr:hover {
color: var(--color-ui-gray);
background-color: var(--color-dark);
}
.upbar-text {
font-size: 14px;
margin-left: 10px;
}
}
.upbar-right {
width: calc(100% - 200px);
display: flex;
justify-content: flex-end;
height: 100%;
background-color: white;
}
}
.outer {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background-color: #ffffff;
user-select: none;
/* background-color: rgb(241, 241, 241); */
}
.outer_main {
height: 100%;
margin: 0px 10px 00px 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.main_uper {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
align-items: center;
height: 50px;
width: 90%;
}
.set_item {
margin: 10px 20px;
padding: 2px 8px 10px 2px;
width: 200px;
display: flex;
align-items: center;
background-color: white;
border: 1px solid #99999900;
transition: all 0.1s;
position: relative;
z-index: 2;
.set_item-img {
width: 30px;
margin: 10px 16px;
flex-shrink: 0;
img {
width: 100%;
}
}
.set_item-right {
flex: 1;
}
.set_item-title {
padding: 4px 0px;
}
.set_item-desc {
font-size: 10px;
color: #999999;
}
}
.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;
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);
border: 1px solid #d9d9d9;
/* border-bottom:none; */
}
.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;
}
}
@import "@/assets/main.scss";
.window-outer {
background-color: white;
width: 100%;
height: 100%;
border: #0076d795 1px solid;
box-sizing: border-box;
transition: background-color 0.1s;
overflow: hidden;
}
.window-outer.focus {
background-color: rgba(255, 255, 255, 0.704);
backdrop-filter: blur(10px);
}
.upbar {
height: 40px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
.upbar-left {
display: flex;
align-items: center;
font-size: 12px;
height: 100%;
.back-arr {
padding: 0 6px;
margin-right: 3px;
font-size: 14px;
width: 40px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.back-arr:hover {
color: var(--color-ui-gray);
background-color: var(--color-dark);
}
.upbar-text {
font-size: 14px;
margin-left: 10px;
}
}
.upbar-right {
width: calc(100% - 200px);
display: flex;
justify-content: flex-end;
height: 100%;
background-color: white;
}
}
.settings-container {
display: flex;
height: calc(100% - 40px); //
}
.sidebar {
box-sizing: border-box;
ul {
list-style: none;
padding: 0;
li {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
cursor: pointer;
transition: background-color 0.2s;
&:hover {
// background-color: #e0e0e0;
}
.icon {
font-size: 1.5em;
}
}
}
}
.content {
flex: 1;
padding: 20px;
overflow-y: auto;
box-sizing: border-box;
}
@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;
}
.upbar {
flex-direction: column;
align-items: flex-start;
padding: 10px;
}
.upbar-right {
width: 100%;
justify-content: space-between;
}
.settings-container {
flex-direction: column-reverse;
}
.sidebar {
width: 100%;
display: flex;
overflow-x: auto;
border-right: none;
// background-color: #f0f0f0;
// border-bottom: 1px solid #dcdcdc;
justify-content: center;
}
.sidebar ul {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-around;
}
.content {
padding: 10px;
flex: 1;
}
}
.icon-container {
display: flex;
flex-direction: column;
align-items: center;
}
.icon-title {
// margin-top: 5px;
font-size: 0.8em;
color: #333;
}
</style>

Loading…
Cancel
Save