mirror/MCSManager
2
0
Fork 1
mirror of https://github.com/MCSManager/MCSManager.git synced 2025-01-24 15:14:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: dark&light bg extend theme

Browse Source
This commit is contained in:
unitwk 2024-01-16 19:13:40 +08:00
parent 962989ca88
commit 782ada4f14
4 changed files with 59 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/assets/bg-extend-theme.scss
View File

@ -2,7 +2,7 @@
.bg-extend-css {
.card-panel {
backdrop-filter: blur(10px);
backdrop-filter: blur(3px);
}
.ant-table,
@ -10,38 +10,39 @@
.ant-table-cell,
.action-btn-item,
.inner-card-wrapper,
.ant-select-dropdown {
.ant-select-dropdown,
.file-breadcrumbs {
background-color: var(--level-2-bg-color) !important;
}
.card-panel,
.ant-pagination-item {
background-color: var(--level-1-bg-color) !important;
backdrop-filter: blur(6px) !important;
backdrop-filter: blur(3px) !important;
}
.ant-btn-default {
background-color: var(--level-1-bg-color) !important;
backdrop-filter: blur(6px) !important;
backdrop-filter: blur(3px) !important;
}
.ant-btn-primary {
background-color: var(--primary-btn-color);
backdrop-filter: blur(6px) !important;
backdrop-filter: blur(3px) !important;
}
.ant-btn-dangerous {
background-color: var(--danger-btn-color);
backdrop-filter: blur(6px) !important;
backdrop-filter: blur(3px) !important;
}
.ant-input-affix-wrapper,
.ant-select-selector {
background-color: var(--level-1-bg-color) !important;
backdrop-filter: blur(6px) !important;
backdrop-filter: blur(3px) !important;
}
.ant-modal-content {
background-color: var(--level-0-bg-color) !important;
backdrop-filter: blur(6px) !important;
backdrop-filter: blur(3px) !important;
}
.ant-modal-title,
@ -52,9 +53,17 @@
}
.extend-light-css {
.breadcrumbs {
@extend .text-white-shadow;
}
.terminal-wrapper {
background-color: rgba(0, 0, 0, 0.81) !important;
backdrop-filter: blur(6px) !important;
background-color: rgba(0, 0, 0, 0.8) !important;
backdrop-filter: blur(3px) !important;
}
.app-header-content-for-phone {
.card-panel {
background-color: #000000b4 !important;
}
}
}
@ -64,7 +73,7 @@
}
.terminal-wrapper {
background-color: var(--level-1-bg-color) !important;
backdrop-filter: blur(6px) !important;
backdrop-filter: blur(3px) !important;
}
}
@ -76,14 +85,17 @@
--primary-btn-color: #1669dccf;
--danger-btn-color: #d32f2fac;
--background-color-white: var(--level-1-bg-color);
.app-header-wrapper {
background-color: #00000093 !important;
}
@extend .bg-extend-css;
@extend .extend-light-css;
}
// PC
.app-dark-extend-theme {
--level-0-bg-color: #000000ce;
--level-1-bg-color: #000000af;
--level-0-bg-color: #000000b4;
--level-1-bg-color: #000000a9;
--level-2-bg-color: #1919196b;
--primary-btn-color: #1669dccf;
--danger-btn-color: #d32f2fac;
@ -98,23 +110,14 @@
--level-0-bg-color: #000000f2;
--level-1-bg-color: #000000dd;
--level-2-bg-color: #0000006b;
--primary-btn-color: #1669dccf;
--danger-btn-color: #d32f2fac;
--background-color-white: var(--level-1-bg-color);
--app-header-bg: var(--level-0-bg-color);
@extend .bg-extend-css;
@extend .extend-dark-css;
}
.app-light-extend-theme {
--level-0-bg-color: #ffffffe8;
--level-1-bg-color: #ffffffc5;
--level-2-bg-color: #ffffff90;
--primary-btn-color: #1669dccf;
--danger-btn-color: #d32f2fac;
--background-color-white: var(--level-1-bg-color);
--app-header-bg: var(--level-0-bg-color);
@extend .bg-extend-css;
@extend .extend-light-css;
}
}

6
frontend/src/assets/tools.scss
View File

@ -15,6 +15,12 @@
-7px 7px 15px #161616;
}
.text-white-shadow {
text-shadow:
6px -4px 15px #e6dede,
-7px 7px 15px #e2e2e2;
}
.flex-between {
display: flex;
justify-content: space-between;

4
frontend/src/views/LayoutContainer.vue
View File

@ -152,12 +152,12 @@ const showCardOperator = (card: ILayoutCard) => {
@keyframes scaleAnimation {
0% {
opacity: 0;
// transform: scale(0.96);
transform: scale(0.98);
}
100% {
opacity: 1;
// transform: scale(1);
transform: scale(1);
}
}
</style>

39
frontend/src/widgets/Settings.vue
View File

@ -3,7 +3,7 @@ import LeftMenusPanel from "@/components/LeftMenusPanel.vue";
import { getCurrentLang, isCN, t } from "@/lang/i18n";
import type { LayoutCard, Settings } from "@/types";
import { onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import { Modal, message } from "ant-design-vue";
import { reportError } from "@/tools/validator";
import {
BankOutlined,
@ -129,12 +129,20 @@ const uploadBackground = async () => {
};
const handleSaveBgUrl = async (url?: string) => {
const cfg = await getSettingsConfig();
if (!cfg?.theme) {
return reportError(t("配置文件版本不正确，无法设置背景图，请尝试重启面板或重置自定义布局！"));
}
cfg.theme.backgroundImage = url ?? formData.value?.bgUrl ?? "";
await setSettingsConfig(cfg);
Modal.confirm({
title: t("确定要设置背景图片吗？"),
content: t("此功能有一定的不稳定性，无法保证界面用户体验依然保持最佳。"),
async onOk() {
const cfg = await getSettingsConfig();
if (!cfg?.theme) {
return reportError(
t("配置文件版本不正确，无法设置背景图，请尝试重启面板或重置自定义布局！")
);
}
cfg.theme.backgroundImage = url ?? formData.value?.bgUrl ?? "";
await setSettingsConfig(cfg);
}
});
};
onMounted(async () => {
@ -255,11 +263,16 @@ onMounted(async () => {
<a-typography-title :level="5">{{ t("界面背景图片") }}</a-typography-title>
<a-typography-paragraph>
<a-typography-text type="secondary">
{{
t(
"上传背景图片后，面板将设置深色主题且模糊半透明，你可以随时再切换回来。"
)
}}
<div>
{{
t(
"上传背景图片后，面板将设置深色主题且模糊半透明，你可以随时再切换回来。"
)
}}
</div>
<div>
{{ t("此功能有一定的不稳定性，无法保证界面用户体验依然保持最佳。") }}
</div>
</a-typography-text>
</a-typography-paragraph>
<a-typography-paragraph>
@ -393,7 +406,7 @@ onMounted(async () => {
<p v-if="isZhCN">
<span>
{{ $t("TXT_CODE_d2c79249") }}
<a href="https://github.com/MCSManager/MCSManager" target="_blank">
<a href="https://afdian.net/a/mcsmanager" target="_blank">
{{ t("TXT_CODE_e4794d20") }}
</a>
</span>