add 增加系统圆角配置，并将部分圆角样式改为使用变量

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;

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;

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-sm: calc(var(--app-radius-base) - 8px);
-  --app-radius-md: 12px;
+  --app-radius-md: calc(var(--app-radius-base) - 4px);
-  --app-radius-lg: 18px;
+  --app-radius-lg: var(--app-radius-base);
+  --app-radius-base: 18px;
 
   --app-space-base: 12px;
 

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-left-radius: var(--app-radius-base);
-  border-top-right-radius: var(--app-radius-lg);
+  border-top-right-radius: var(--app-radius-base);
 }
 
 .el-card .el-card__body {
-  border-bottom-left-radius: var(--app-radius-lg);
+  border-bottom-left-radius: var(--app-radius-base);
-  border-bottom-right-radius: var(--app-radius-lg);
+  border-bottom-right-radius: var(--app-radius-base);
 }

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

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

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

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

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;

src/layout/components/Settings/index.vue

@@ -101,6 +101,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 />
 
@@ -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
 });

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;

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

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);
 }
-
 </style>

src/settings.ts

@@ -76,6 +76,11 @@ const setting: DefaultSettings = {
   /**
    * 默认布局
    */
-  layout: ''
+  layout: '',
+
+  /**
+   * 页面圆角大小
+   */
+  radiusBase: 18
 };
 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);
@@ -30,6 +31,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;
@@ -49,6 +51,7 @@ export const useSettingsStore = defineStore('setting', () => {
     animationEnable,
     dark,
     navType,
+    radiusBase,
     setTitle
   };
 });

src/types/global.d.ts

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