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

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>