From 782ada4f1404bef3b16168eb785a5d13bdb2ea02 Mon Sep 17 00:00:00 2001 From: unitwk Date: Tue, 16 Jan 2024 19:13:40 +0800 Subject: [PATCH] Feat: dark&light bg extend theme --- frontend/src/assets/bg-extend-theme.scss | 47 +++++++++++++----------- frontend/src/assets/tools.scss | 6 +++ frontend/src/views/LayoutContainer.vue | 4 +- frontend/src/widgets/Settings.vue | 39 +++++++++++++------- 4 files changed, 59 insertions(+), 37 deletions(-) diff --git a/frontend/src/assets/bg-extend-theme.scss b/frontend/src/assets/bg-extend-theme.scss index 27ea9d65..cb605d50 100644 --- a/frontend/src/assets/bg-extend-theme.scss +++ b/frontend/src/assets/bg-extend-theme.scss @@ -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; } } diff --git a/frontend/src/assets/tools.scss b/frontend/src/assets/tools.scss index b0e09e1c..3ab15f47 100644 --- a/frontend/src/assets/tools.scss +++ b/frontend/src/assets/tools.scss @@ -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; diff --git a/frontend/src/views/LayoutContainer.vue b/frontend/src/views/LayoutContainer.vue index 6568c274..d88e85c9 100644 --- a/frontend/src/views/LayoutContainer.vue +++ b/frontend/src/views/LayoutContainer.vue @@ -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); } } diff --git a/frontend/src/widgets/Settings.vue b/frontend/src/widgets/Settings.vue index 99e74f51..297f1f80 100644 --- a/frontend/src/widgets/Settings.vue +++ b/frontend/src/widgets/Settings.vue @@ -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 () => { {{ t("界面背景图片") }} - {{ - t( - "上传背景图片后，面板将设置深色主题且模糊半透明，你可以随时再切换回来。" - ) - }} +
+ {{ + t( + "上传背景图片后，面板将设置深色主题且模糊半透明，你可以随时再切换回来。" + ) + }} +
+
+ {{ t("此功能有一定的不稳定性，无法保证界面用户体验依然保持最佳。") }} +
@@ -393,7 +406,7 @@ onMounted(async () => {

{{ $t("TXT_CODE_d2c79249") }} - + {{ t("TXT_CODE_e4794d20") }}