From 3b0ace386861363e12471511910229ab9977b4f5 Mon Sep 17 00:00:00 2001
From: CyberShen123 <s.lijun@qq.com>
Date: Thu, 2 Oct 2025 23:52:41 +0800
Subject: [PATCH 1/2] feat(projects): support set global redius

---
 .../theme-drawer/modules/appearance/index.vue |  2 ++
 .../appearance/modules/theme-radius.vue       | 22 +++++++++++++++++++
 src/locales/langs/en-us.ts                    |  3 +++
 src/locales/langs/zh-cn.ts                    |  3 +++
 src/store/modules/theme/index.ts              |  2 +-
 src/store/modules/theme/shared.ts             |  8 +++----
 src/theme/settings.ts                         |  1 +
 src/typings/app.d.ts                          |  5 +++++
 src/views/home/modules/card-data.vue          |  8 ++++++-
 uno.config.ts                                 |  2 +-
 10 files changed, 49 insertions(+), 7 deletions(-)
 create mode 100644 src/layouts/modules/theme-drawer/modules/appearance/modules/theme-radius.vue

diff --git a/src/layouts/modules/theme-drawer/modules/appearance/index.vue b/src/layouts/modules/theme-drawer/modules/appearance/index.vue
index 259828c5..a7f65e40 100644
--- a/src/layouts/modules/theme-drawer/modules/appearance/index.vue
+++ b/src/layouts/modules/theme-drawer/modules/appearance/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import ThemeSchema from './modules/theme-schema.vue';
 import ThemeColor from './modules/theme-color.vue';
+import ThemeRadius from './modules/theme-radius.vue';
 
 defineOptions({
   name: 'AppearanceSettings'
@@ -11,6 +12,7 @@ defineOptions({
   <div class="flex-col-stretch gap-16px">
     <ThemeSchema />
     <ThemeColor />
+    <ThemeRadius />
   </div>
 </template>
 
diff --git a/src/layouts/modules/theme-drawer/modules/appearance/modules/theme-radius.vue b/src/layouts/modules/theme-drawer/modules/appearance/modules/theme-radius.vue
new file mode 100644
index 00000000..499403b1
--- /dev/null
+++ b/src/layouts/modules/theme-drawer/modules/appearance/modules/theme-radius.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useThemeStore } from '@/store/modules/theme';
+import { $t } from '@/locales';
+import SettingItem from '../../../components/setting-item.vue';
+
+defineOptions({
+  name: 'ThemeRadius'
+});
+
+const themeStore = useThemeStore();
+</script>
+
+<template>
+  <NDivider>{{ $t('theme.appearance.themeRadius.title') }}</NDivider>
+  <TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
+    <SettingItem key="1" :label="$t('theme.appearance.themeRadius.title')">
+      <NInputNumber v-model:value="themeStore.themeRadius" size="small" :step="1" :min="0" :max="16" class="w-120px" />
+    </SettingItem>
+  </TransitionGroup>
+</template>
+
+<style scoped></style>
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 523648c1..4f8bd7bb 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -83,6 +83,9 @@ const local: App.I18n.Schema = {
         error: 'Error',
         followPrimary: 'Follow Primary'
       },
+      themeRadius: {
+        title: 'Theme Radius'
+      },
       recommendColor: 'Apply Recommended Color Algorithm',
       recommendColorDesc: 'The recommended color algorithm refers to',
       preset: {
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index f7f888f4..e2c27fcc 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -83,6 +83,9 @@ const local: App.I18n.Schema = {
         error: '错误色',
         followPrimary: '跟随主色'
       },
+      themeRadius: {
+        title: '主题圆角'
+      },
       recommendColor: '应用推荐算法的颜色',
       recommendColorDesc: '推荐颜色的算法参照',
       preset: {
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index b0380471..26422b82 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -53,7 +53,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
   });
 
   /** Naive theme */
-  const naiveTheme = computed(() => getNaiveTheme(themeColors.value, settings.value.recommendColor));
+  const naiveTheme = computed(() => getNaiveTheme(themeColors.value, settings.value));
 
   /**
    * Settings json
diff --git a/src/store/modules/theme/shared.ts b/src/store/modules/theme/shared.ts
index e980a799..02bf9384 100644
--- a/src/store/modules/theme/shared.ts
+++ b/src/store/modules/theme/shared.ts
@@ -239,19 +239,19 @@ function getNaiveThemeColors(colors: App.Theme.ThemeColor, recommended = false)
  * @param colors Theme colors
  * @param [recommended=false] Use recommended color. Default is `false`
  */
-export function getNaiveTheme(colors: App.Theme.ThemeColor, recommended = false) {
+export function getNaiveTheme(colors: App.Theme.ThemeColor, settings: App.Theme.ThemeSetting) {
   const { primary: colorLoading } = colors;
 
   const theme: GlobalThemeOverrides = {
     common: {
-      ...getNaiveThemeColors(colors, recommended),
-      borderRadius: '6px'
+      ...getNaiveThemeColors(colors, settings.recommendColor),
+      borderRadius: `${settings.themeRadius}px`
     },
     LoadingBar: {
       colorLoading
     },
     Tag: {
-      borderRadius: '6px'
+      borderRadius: `${settings.themeRadius}px`
     }
   };
 
diff --git a/src/theme/settings.ts b/src/theme/settings.ts
index 4a4e0a0a..ca50fcfd 100644
--- a/src/theme/settings.ts
+++ b/src/theme/settings.ts
@@ -5,6 +5,7 @@ export const themeSettings: App.Theme.ThemeSetting = {
   colourWeakness: false,
   recommendColor: false,
   themeColor: '#646cff',
+  themeRadius: 8,
   otherColor: {
     info: '#2080f0',
     success: '#52c41a',
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
index 33dbbdfe..ff2ca3e3 100644
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -16,6 +16,8 @@ declare namespace App {
       recommendColor: boolean;
       /** Theme color */
       themeColor: string;
+      /** Theme radius */
+      themeRadius: number;
       /** Other color */
       otherColor: OtherColor;
       /** Whether info color is followed by the primary color */
@@ -377,6 +379,9 @@ declare namespace App {
           } & Theme.ThemeColor;
           recommendColor: string;
           recommendColorDesc: string;
+          themeRadius: {
+            title: string;
+          };
           preset: {
             title: string;
             apply: string;
diff --git a/src/views/home/modules/card-data.vue b/src/views/home/modules/card-data.vue
index 59104700..7b802d88 100644
--- a/src/views/home/modules/card-data.vue
+++ b/src/views/home/modules/card-data.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
+import { useThemeStore } from '@/store/modules/theme';
 import { $t } from '@/locales';
 
 defineOptions({
@@ -72,6 +73,8 @@ interface GradientBgProps {
 
 const [DefineGradientBg, GradientBg] = createReusableTemplate<GradientBgProps>();
 
+const themeStore = useThemeStore();
+
 function getGradientColor(color: CardData['color']) {
   return `linear-gradient(to bottom right, ${color.start}, ${color.end})`;
 }
@@ -81,7 +84,10 @@ function getGradientColor(color: CardData['color']) {
   <NCard :bordered="false" size="small" class="card-wrapper">
     <!-- define component start: GradientBg -->
     <DefineGradientBg v-slot="{ $slots, gradientColor }">
-      <div class="rd-8px px-16px pb-4px pt-8px text-white" :style="{ backgroundImage: gradientColor }">
+      <div
+        class="rd-8px px-16px pb-4px pt-8px text-white"
+        :style="{ backgroundImage: gradientColor, borderRadius: themeStore.themeRadius + 'px' }"
+      >
         <component :is="$slots.default" />
       </div>
     </DefineGradientBg>
diff --git a/uno.config.ts b/uno.config.ts
index 0259efda..8f7b82a9 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -23,7 +23,7 @@ export default defineConfig<Theme>({
     }
   },
   shortcuts: {
-    'card-wrapper': 'rd-8px shadow-sm'
+    'card-wrapper': 'shadow-sm'
   },
   transformers: [transformerDirectives(), transformerVariantGroup()],
   presets: [presetWind3({ dark: 'class' }), presetSoybeanAdmin()]

From 21efca5194c0b26ca7f32b51d6bd51a3e2140fd7 Mon Sep 17 00:00:00 2001
From: CyberShen123 <s.lijun@qq.com>
Date: Fri, 3 Oct 2025 07:55:06 +0800
Subject: [PATCH 2/2] feat(projects): support set global redius

---
 .../theme-drawer/modules/preset/modules/theme-preset.vue     | 1 +
 src/store/modules/theme/shared.ts                            | 5 +++--
 src/theme/preset/azir.json                                   | 1 +
 src/theme/preset/compact.json                                | 1 +
 src/theme/preset/dark.json                                   | 1 +
 src/theme/preset/default.json                                | 1 +
 src/views/home/modules/card-data.vue                         | 2 +-
 7 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/layouts/modules/theme-drawer/modules/preset/modules/theme-preset.vue b/src/layouts/modules/theme-drawer/modules/preset/modules/theme-preset.vue
index f31ea220..9248b396 100644
--- a/src/layouts/modules/theme-drawer/modules/preset/modules/theme-preset.vue
+++ b/src/layouts/modules/theme-drawer/modules/preset/modules/theme-preset.vue
@@ -14,6 +14,7 @@ type ThemePreset = Pick<
   | 'colourWeakness'
   | 'recommendColor'
   | 'themeColor'
+  | 'themeRadius'
   | 'otherColor'
   | 'isInfoFollowPrimary'
   | 'layout'
diff --git a/src/store/modules/theme/shared.ts b/src/store/modules/theme/shared.ts
index 02bf9384..82931719 100644
--- a/src/store/modules/theme/shared.ts
+++ b/src/store/modules/theme/shared.ts
@@ -236,8 +236,9 @@ function getNaiveThemeColors(colors: App.Theme.ThemeColor, recommended = false)
 /**
  * Get naive theme
  *
- * @param colors Theme colors
- * @param [recommended=false] Use recommended color. Default is `false`
+ * @param settings Theme settings object.
+ * @param settings.recommendColor Whether to use recommended color palette.
+ * @param settings.themeRadius Border radius to use in the theme (in px).
  */
 export function getNaiveTheme(colors: App.Theme.ThemeColor, settings: App.Theme.ThemeSetting) {
   const { primary: colorLoading } = colors;
diff --git a/src/theme/preset/azir.json b/src/theme/preset/azir.json
index a30625ec..3b3d34b5 100644
--- a/src/theme/preset/azir.json
+++ b/src/theme/preset/azir.json
@@ -14,6 +14,7 @@
     "warning": "#d4bb9d",
     "error": "#c49a9a"
   },
+  "themeRadius": 8,
   "isInfoFollowPrimary": true,
   "layout": {
     "mode": "vertical-mix",
diff --git a/src/theme/preset/compact.json b/src/theme/preset/compact.json
index 46fc6628..99dd4751 100644
--- a/src/theme/preset/compact.json
+++ b/src/theme/preset/compact.json
@@ -14,6 +14,7 @@
     "warning": "#faad14",
     "error": "#f5222d"
   },
+  "themeRadius": 8,
   "isInfoFollowPrimary": true,
   "layout": {
     "mode": "vertical",
diff --git a/src/theme/preset/dark.json b/src/theme/preset/dark.json
index 367bba97..832f5902 100644
--- a/src/theme/preset/dark.json
+++ b/src/theme/preset/dark.json
@@ -14,6 +14,7 @@
     "warning": "#faad14",
     "error": "#f5222d"
   },
+  "themeRadius": 8,
   "isInfoFollowPrimary": true,
   "layout": {
     "mode": "vertical",
diff --git a/src/theme/preset/default.json b/src/theme/preset/default.json
index bcf97db8..69181e23 100644
--- a/src/theme/preset/default.json
+++ b/src/theme/preset/default.json
@@ -14,6 +14,7 @@
     "warning": "#faad14",
     "error": "#f5222d"
   },
+  "themeRadius": 8,
   "isInfoFollowPrimary": true,
   "layout": {
     "mode": "vertical",
diff --git a/src/views/home/modules/card-data.vue b/src/views/home/modules/card-data.vue
index 7b802d88..f1ff6d6f 100644
--- a/src/views/home/modules/card-data.vue
+++ b/src/views/home/modules/card-data.vue
@@ -85,7 +85,7 @@ function getGradientColor(color: CardData['color']) {
     <!-- define component start: GradientBg -->
     <DefineGradientBg v-slot="{ $slots, gradientColor }">
       <div
-        class="rd-8px px-16px pb-4px pt-8px text-white"
+        class="px-16px pb-4px pt-8px text-white"
         :style="{ backgroundImage: gradientColor, borderRadius: themeStore.themeRadius + 'px' }"
       >
         <component :is="$slots.default" />