diff --git a/src/assets/styles/components/_card-shell.scss b/src/assets/styles/components/_card-shell.scss
index dfbac5a..927bf7d 100644
--- a/src/assets/styles/components/_card-shell.scss
+++ b/src/assets/styles/components/_card-shell.scss
@@ -47,7 +47,7 @@
}
.el-card {
- border-radius: var(--app-radius-lg);
+ border-radius: var(--app-radius-base);
box-shadow: var(--app-shadow-sm);
border-color: var(--app-surface-border);
overflow: hidden;
diff --git a/src/assets/styles/layout/_surface.scss b/src/assets/styles/layout/_surface.scss
index 9e9408a..ad6f38b 100644
--- a/src/assets/styles/layout/_surface.scss
+++ b/src/assets/styles/layout/_surface.scss
@@ -8,7 +8,7 @@
.panel,
.search {
margin-bottom: 0.75rem;
- border-radius: var(--app-radius-lg);
+ border-radius: var(--app-radius-base);
border: 1px solid var(--app-surface-border);
background-color: var(--app-surface-bg);
padding: 0.75rem;
diff --git a/src/assets/styles/tokens/_theme.scss b/src/assets/styles/tokens/_theme.scss
index a0ea277..cbf5f4e 100644
--- a/src/assets/styles/tokens/_theme.scss
+++ b/src/assets/styles/tokens/_theme.scss
@@ -26,9 +26,10 @@
--tags-view-active-border-color: var(--el-color-primary);
// --- 应用壳：圆角、阴影、表面、导航、强调色与文案色 ---
- --app-radius-sm: 6px;
- --app-radius-md: 12px;
- --app-radius-lg: 18px;
+ --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-radius-base: 18px;
--app-space-base: 12px;
diff --git a/src/assets/styles/vendors/element-plus/_card.scss b/src/assets/styles/vendors/element-plus/_card.scss
index bd0a033..f8e2a08 100644
--- a/src/assets/styles/vendors/element-plus/_card.scss
+++ b/src/assets/styles/vendors/element-plus/_card.scss
@@ -3,11 +3,11 @@
}
.el-card .el-card__header {
- border-top-left-radius: var(--app-radius-lg);
- border-top-right-radius: var(--app-radius-lg);
+ border-top-left-radius: var(--app-radius-base);
+ border-top-right-radius: var(--app-radius-base);
}
.el-card .el-card__body {
- border-bottom-left-radius: var(--app-radius-lg);
- border-bottom-right-radius: var(--app-radius-lg);
+ border-bottom-left-radius: var(--app-radius-base);
+ border-bottom-right-radius: var(--app-radius-base);
}
diff --git a/src/assets/styles/vendors/element-plus/_dialog.scss b/src/assets/styles/vendors/element-plus/_dialog.scss
index 7fd94dc..dab3ce5 100644
--- a/src/assets/styles/vendors/element-plus/_dialog.scss
+++ b/src/assets/styles/vendors/element-plus/_dialog.scss
@@ -15,7 +15,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;
border: 1px solid var(--app-surface-border);
diff --git a/src/assets/styles/vendors/element-plus/_overrides.scss b/src/assets/styles/vendors/element-plus/_overrides.scss
index 20260b7..41c8d81 100644
--- a/src/assets/styles/vendors/element-plus/_overrides.scss
+++ b/src/assets/styles/vendors/element-plus/_overrides.scss
@@ -9,7 +9,7 @@
.el-dropdown__popper .el-dropdown-menu,
.el-picker__popper,
.el-select__popper.el-popper {
- border-radius: var(--app-radius-lg);
+ border-radius: var(--app-radius-base);
border-color: var(--app-surface-border);
box-shadow: var(--app-shadow-md);
}
diff --git a/src/assets/styles/vendors/element-plus/_shell.scss b/src/assets/styles/vendors/element-plus/_shell.scss
index 30799c7..17ff8b4 100644
--- a/src/assets/styles/vendors/element-plus/_shell.scss
+++ b/src/assets/styles/vendors/element-plus/_shell.scss
@@ -1,7 +1,7 @@
/* Drawers, loading masks, descriptions, trees, and empty states. */
.el-drawer {
- border-radius: var(--app-radius-lg);
+ border-radius: var(--app-radius-base);
box-shadow: var(--app-shadow-md);
border: 1px solid var(--app-surface-border);
}
@@ -98,8 +98,7 @@
}
.el-color-dropdown {
- border-radius: 16px;
+ border-radius: var(--app-radius-base);
border: 1px solid var(--app-surface-border);
box-shadow: var(--app-shadow-md);
}
-
diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
index fd91d7a..80e1ee5 100644
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@@ -274,7 +274,7 @@ onMounted(() => {
.mix-topnav-popper.el-popper {
border: none !important;
- border-radius: 18px !important;
+ border-radius: var(--app-radius-base) !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
@@ -288,7 +288,7 @@ onMounted(() => {
min-width: 188px;
padding: 10px !important;
border: 1px solid var(--app-surface-border);
- border-radius: 18px;
+ border-radius: var(--app-radius-base);
background: var(--app-surface-bg) !important;
box-shadow: var(--app-shadow-md);
}
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 2a73f30..02c733c 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -210,7 +210,7 @@ const handleCommand = (command: string) => {
min-width: 0;
margin-left: 0;
padding: 4px 8px;
- border-radius: 16px;
+ border-radius: var(--app-radius-base);
background: var(--app-surface-bg);
border: 1px solid var(--app-surface-border);
box-shadow: var(--app-shadow-sm);
@@ -253,7 +253,7 @@ const handleCommand = (command: string) => {
display: flex;
align-items: center;
justify-content: space-between;
- border-radius: 16px;
+ border-radius: var(--app-radius-base);
padding: 6px 12px;
box-sizing: border-box;
@@ -397,7 +397,7 @@ const handleCommand = (command: string) => {
align-items: center;
gap: 12px;
padding: 4px 8px 4px 4px;
- border-radius: 16px;
+ border-radius: var(--app-radius-base);
background: var(--app-surface-bg);
border: 1px solid var(--app-surface-border);
min-width: 0;
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index b0d60ae..e573715 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -101,6 +101,12 @@
+
+ 页面圆角
+
+
+
+
@@ -176,6 +182,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',
@@ -223,6 +230,11 @@ const themeChange = (val: string) => {
settingsStore.theme = val;
handleThemeStyle(val);
};
+const radiusBaseChange = (val: number) => {
+ settingsStore.radiusBase = val;
+ // 更新 CSS 变量
+ document.documentElement.style.setProperty('--app-radius-base', `${val}px`);
+};
const handleTheme = (val: string) => {
sideTheme.value = val;
if (isDark.value && val === SideThemeEnum.LIGHT) {
@@ -247,6 +259,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);
@@ -261,6 +274,10 @@ const openSetting = () => {
showSettings.value = true;
};
+onMounted(() => {
+ radiusBaseChange(storeSettings.value.radiusBase);
+});
+
defineExpose({
openSetting
});
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 942e38f..f062fd3 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -62,7 +62,7 @@ const textColor = computed(() => (sideTheme.value === 'theme-dark' ? '#e5edf8' :
gap: 8px;
padding: 10px 8px 12px;
border: 1px solid var(--app-sidebar-border);
- border-radius: 22px;
+ border-radius: var(--app-radius-base);
box-shadow: var(--app-shadow-sm);
background: v-bind(bgColor) !important;
overflow: hidden;
diff --git a/src/layout/components/TopBar/index.vue b/src/layout/components/TopBar/index.vue
index 5994d06..45091e4 100644
--- a/src/layout/components/TopBar/index.vue
+++ b/src/layout/components/TopBar/index.vue
@@ -210,7 +210,7 @@ html.dark #app .topbar-menu.el-menu--horizontal > .el-sub-menu.is-active > .el-s
.topbar-menu-popper.el-popper {
border: none !important;
- border-radius: 18px !important;
+ border-radius: var(--app-radius-base) !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
@@ -224,7 +224,7 @@ html.dark #app .topbar-menu.el-menu--horizontal > .el-sub-menu.is-active > .el-s
min-width: 188px;
padding: 10px !important;
border: 1px solid rgba(148, 163, 184, 0.14);
- border-radius: 18px;
+ border-radius: var(--app-radius-base);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)) !important;
box-shadow:
0 18px 40px rgba(15, 23, 42, 0.12),
diff --git a/src/layout/components/TopBar/search.vue b/src/layout/components/TopBar/search.vue
index f5af4e3..3d22610 100644
--- a/src/layout/components/TopBar/search.vue
+++ b/src/layout/components/TopBar/search.vue
@@ -296,7 +296,7 @@ defineExpose({
:deep(.el-input__wrapper) {
min-height: 52px;
- border-radius: 16px;
+ border-radius: var(--app-radius-base);
}
:deep(.highlight) {
@@ -332,7 +332,7 @@ defineExpose({
min-height: 56px;
margin-bottom: 6px;
padding: 10px 12px;
- border-radius: 16px;
+ border-radius: var(--app-radius-base);
cursor: pointer;
transition:
background-color 0.18s ease,
@@ -455,5 +455,4 @@ kbd {
line-height: 1;
box-shadow: inset 0 -1px 0 var(--app-surface-border);
}
-
diff --git a/src/settings.ts b/src/settings.ts
index 62d3a01..e694d27 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -76,6 +76,11 @@ const setting: DefaultSettings = {
/**
* 默认布局
*/
- layout: ''
+ layout: '',
+
+ /**
+ * 页面圆角大小
+ */
+ radiusBase: 18
};
export default setting;
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 083b994..1869cb2 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);
@@ -30,6 +31,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;
@@ -49,6 +51,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 c29f6ff..4a3e99d 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -127,6 +127,10 @@ declare global {
* 主题模式
*/
theme: string;
+ /**
+ * 页面圆角大小
+ */
+ radiusBase: number;
}
declare interface DefaultSettings extends LayoutSetting {