update 布局设置增加 页面圆角大小 控制器 可以根据喜好自行设置页面圆角样式

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);

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;

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);

src/layout/components/Settings/index.vue

@@ -75,6 +75,12 @@
         <el-switch v-model="isDark" class="drawer-switch" @change="toggleDark" />
       </span>
     </div>
+    <div class="drawer-item">
+      <span>页面圆角</span>
+      <span class="comp-style">
+        <el-slider v-model="radiusBase" :min="0" :max="32" :step="2" style="width: 120px" @change="radiusBaseChange" />
+      </span>
+    </div>
 
     <el-divider />
 
@@ -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
 });

src/layout/components/TopBar/search.vue

@@ -134,7 +134,7 @@ defineExpose({
 <style lang="scss" scoped>
 .layout-search-dialog {
   :deep(.el-dialog) {
-    border-radius: 14px;
+    border-radius: var(--app-radius-base);
     overflow: visible;
     .el-dialog__header,
     .el-dialog__footer {
@@ -155,7 +155,7 @@ defineExpose({
 
   :deep(.el-input__wrapper) {
     min-height: 44px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
   }
 }
 </style>

src/settings.ts

@@ -71,6 +71,11 @@ const setting: DefaultSettings = {
   /**
    * 默认布局
    */
-  layout: ''
+  layout: '',
+
+  /**
+   * 页面圆角大小
+   */
+  radiusBase: 14
 };
 export default setting;

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<string>(defaultSettings.title);
   const theme = ref<string>(storageSetting.value.theme);
@@ -29,6 +30,7 @@ export const useSettingsStore = defineStore('setting', () => {
   const animationEnable = ref<boolean>(defaultSettings.animationEnable);
   const dark = ref<boolean>(defaultSettings.dark);
   const navType = ref<NavTypeEnum>(storageSetting.value.navType || NavTypeEnum.LEFT);
+  const radiusBase = ref<number>(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
   };
 });

src/types/global.d.ts

@@ -123,6 +123,10 @@ declare global {
      * 主题模式
      */
     theme: string;
+    /**
+     * 页面圆角大小
+     */
+    radiusBase: number;
   }
 
   declare interface DefaultSettings extends LayoutSetting {