From e77fe0e618f1c58bebdcb95db0e8b095aee47ae6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=96=AF=E7=8B=82=E7=9A=84=E7=8B=AE=E5=AD=90Li?=
<15040126243@163.com>
Date: Fri, 10 Apr 2026 11:32:16 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=B8=83=E5=B1=80=E8=AE=BE=E7=BD=AE?=
=?UTF-8?q?=E5=A2=9E=E5=8A=A0=20=E9=A1=B5=E9=9D=A2=E5=9C=86=E8=A7=92?=
=?UTF-8?q?=E5=A4=A7=E5=B0=8F=20=E6=8E=A7=E5=88=B6=E5=99=A8=20=E5=8F=AF?=
=?UTF-8?q?=E4=BB=A5=E6=A0=B9=E6=8D=AE=E5=96=9C=E5=A5=BD=E8=87=AA=E8=A1=8C?=
=?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2=E5=9C=86=E8=A7=92=E6=A0=B7?=
=?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/styles/element-ui.scss | 8 ++++----
src/assets/styles/index.scss | 5 ++---
src/assets/styles/variables.module.scss | 7 ++++---
src/layout/components/Settings/index.vue | 16 ++++++++++++++++
src/layout/components/TopBar/search.vue | 4 ++--
src/settings.ts | 7 ++++++-
src/store/modules/settings.ts | 5 ++++-
src/types/global.d.ts | 4 ++++
8 files changed, 42 insertions(+), 14 deletions(-)
diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index 106a6471..a69b89f1 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -74,7 +74,7 @@
.el-dialog {
margin: 0 auto !important;
- border-radius: var(--app-radius-lg);
+ border-radius: var(--app-radius-base);
box-shadow: var(--app-shadow-md);
overflow: hidden;
@@ -158,7 +158,7 @@
}
.el-message-box {
- border-radius: var(--app-radius-lg);
+ border-radius: var(--app-radius-base);
box-shadow: var(--app-shadow-md);
}
@@ -215,7 +215,7 @@
}
.el-drawer {
- border-radius: var(--app-radius-lg);
+ border-radius: var(--app-radius-base);
box-shadow: var(--app-shadow-md);
}
@@ -227,7 +227,7 @@
// Table polish
.el-table {
- border-radius: var(--app-radius-lg);
+ border-radius: var(--app-radius-base);
overflow: hidden;
box-shadow: var(--app-shadow-sm);
border: 1px solid var(--el-border-color-lighter);
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index bd853d4e..819dd7c9 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -150,7 +150,7 @@ aside {
padding: 20px;
background: var(--app-surface-bg);
border: 1px solid var(--app-surface-border);
- border-radius: var(--app-radius-lg);
+ border-radius: var(--app-radius-base);
box-shadow: var(--app-shadow-sm);
}
@@ -158,9 +158,8 @@ aside {
.panel,
.search {
margin-bottom: 0.75rem;
- border-radius: var(--app-radius-lg);
+ border-radius: var(--app-radius-base);
border: 1px solid var(--el-border-color-light);
- background-color: var(--el-bg-color-overlay);
padding: 0.75rem;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 1c9db81b..cf5ae6ed 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -27,9 +27,10 @@
--tags-view-active-border-color: var(--el-color-primary);
// Modern rounded style + soft shadows
- --app-radius-sm: 6px;
- --app-radius-md: 10px;
- --app-radius-lg: 14px;
+ --app-radius-base: 14px;
+ --app-radius-sm: calc(var(--app-radius-base) - 8px);
+ --app-radius-md: calc(var(--app-radius-base) - 4px);
+ --app-radius-lg: var(--app-radius-base);
--app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(15, 23, 42, 0.08);
--app-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
--app-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16);
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index cfd6d7a9..04b624e9 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -75,6 +75,12 @@
+
+ 页面圆角
+
+
+
+
@@ -143,6 +149,7 @@ const sideTheme = ref(settingsStore.sideTheme);
const storeSettings = computed(() => settingsStore);
const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585']);
const navType = ref(settingsStore.navType);
+const radiusBase = ref(settingsStore.radiusBase);
// 是否暗黑模式
const isDark = useDark({
storageKey: 'useDarkKey',
@@ -190,6 +197,10 @@ const themeChange = (val: string) => {
settingsStore.theme = val;
handleThemeStyle(val);
};
+const radiusBaseChange = (val: number) => {
+ settingsStore.radiusBase = val;
+ document.documentElement.style.setProperty('--app-radius-base', `${val}px`);
+};
const handleTheme = (val: string) => {
sideTheme.value = val;
if (isDark.value && val === SideThemeEnum.LIGHT) {
@@ -210,6 +221,7 @@ const saveSetting = () => {
settings.value.sideTheme = storeSettings.value.sideTheme;
settings.value.theme = storeSettings.value.theme;
settings.value.navType = storeSettings.value.navType;
+ settings.value.radiusBase = storeSettings.value.radiusBase;
setTimeout(() => {
proxy?.$modal.closeLoading();
}, 1000);
@@ -223,6 +235,10 @@ const openSetting = () => {
showSettings.value = true;
};
+onMounted(() => {
+ radiusBaseChange(storeSettings.value.radiusBase);
+});
+
defineExpose({
openSetting
});
diff --git a/src/layout/components/TopBar/search.vue b/src/layout/components/TopBar/search.vue
index 76bdd8f1..0c64a68e 100644
--- a/src/layout/components/TopBar/search.vue
+++ b/src/layout/components/TopBar/search.vue
@@ -134,7 +134,7 @@ defineExpose({
diff --git a/src/settings.ts b/src/settings.ts
index bf1c5363..5dd85995 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -71,6 +71,11 @@ const setting: DefaultSettings = {
/**
* 默认布局
*/
- layout: ''
+ layout: '',
+
+ /**
+ * 页面圆角大小
+ */
+ radiusBase: 14
};
export default setting;
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index ec52fcdf..06170cc4 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -15,7 +15,8 @@ export const useSettingsStore = defineStore('setting', () => {
dynamicTitle: defaultSettings.dynamicTitle,
sideTheme: defaultSettings.sideTheme,
theme: defaultSettings.theme,
- navType: defaultSettings.navType
+ navType: defaultSettings.navType,
+ radiusBase: defaultSettings.radiusBase
});
const title = ref(defaultSettings.title);
const theme = ref(storageSetting.value.theme);
@@ -29,6 +30,7 @@ export const useSettingsStore = defineStore('setting', () => {
const animationEnable = ref(defaultSettings.animationEnable);
const dark = ref(defaultSettings.dark);
const navType = ref(storageSetting.value.navType || NavTypeEnum.LEFT);
+ const radiusBase = ref(storageSetting.value.radiusBase ?? defaultSettings.radiusBase);
const setTitle = (value: string) => {
title.value = value;
@@ -47,6 +49,7 @@ export const useSettingsStore = defineStore('setting', () => {
animationEnable,
dark,
navType,
+ radiusBase,
setTitle
};
});
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index cd4a9f41..10dc8430 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -123,6 +123,10 @@ declare global {
* 主题模式
*/
theme: string;
+ /**
+ * 页面圆角大小
+ */
+ radiusBase: number;
}
declare interface DefaultSettings extends LayoutSetting {