feat: add theme radius customization

package.json

@@ -1,6 +1,6 @@
 {
   "name": "moviepilot",
-  "version": "2.13.5",
+  "version": "2.13.6",
   "private": true,
   "type": "module",
   "bin": "dist/service.js",

src/components/PWAInstallPrompt.vue

@@ -178,7 +178,7 @@ const instructions = computed(() => {
   position: fixed;
   z-index: 1000;
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 12px;
+  border-radius: var(--app-surface-radius);
   background: rgb(var(--v-theme-surface));
   box-shadow: 0 4px 20px rgba(0, 0, 0, 10%);
   inset-block-end: 5rem;

src/components/ThemeCustomizer.vue

@@ -4,6 +4,7 @@ import {
   themeCustomizerPrimaryColors,
   useThemeCustomizer,
   type ThemeCustomizerLayout,
+  type ThemeCustomizerRadius,
   type ThemeCustomizerShadow,
   type ThemeCustomizerSkin,
   type ThemeCustomizerTheme,
@@ -34,6 +35,7 @@ const {
   resetSettings,
   setLayout,
   setPrimaryColor,
+  setRadius,
   setSemiDarkMenu,
   setShadow,
   setSkin,
@@ -175,6 +177,40 @@ const shadowOptions = computed<
   },
 ])
 
+const radiusOptions = computed<
+  Array<{
+    previewRadius: string
+    title: string
+    value: ThemeCustomizerRadius
+  }>
+>(() => [
+  {
+    previewRadius: '0',
+    title: t('theme.customizer.radiusSquare'),
+    value: 'square',
+  },
+  {
+    previewRadius: '4px',
+    title: t('theme.customizer.radiusSmall'),
+    value: 'small',
+  },
+  {
+    previewRadius: '8px',
+    title: t('theme.customizer.radiusDefault'),
+    value: 'default',
+  },
+  {
+    previewRadius: '12px',
+    title: t('theme.customizer.radiusLarge'),
+    value: 'large',
+  },
+  {
+    previewRadius: '16px',
+    title: t('theme.customizer.radiusExtra'),
+    value: 'extra',
+  },
+])
+
 const layoutOptions = computed<Array<{ icon: string; title: string; value: ThemeCustomizerLayout }>>(() => [
   { title: t('theme.customizer.layoutVertical'), value: 'vertical', icon: 'mdi-dock-left' },
   { title: t('theme.customizer.layoutCollapsed'), value: 'collapsed', icon: 'mdi-dock-window' },
@@ -186,6 +222,7 @@ const showLayoutSection = computed(() => !appMode.value)
 const hasAppModeCustomization = computed(() => {
   return (
     settings.value.primaryColor !== defaultPrimaryColor ||
+    settings.value.radius !== 'default' ||
     settings.value.shadow !== 'none' ||
     settings.value.skin !== 'default' ||
     settings.value.theme !== 'auto'
@@ -228,6 +265,7 @@ async function handleResetSettings() {
 
   // App 模式共享定制器，但保留桌面导航相关偏好，只重置 App 侧可调整的外观设置。
   await setPrimaryColor(defaultPrimaryColor)
+  await setRadius('default')
   await setShadow('none')
   await setSkin('default')
   await setTheme('auto')
@@ -348,6 +386,31 @@ async function handleResetSettings() {
 
             <VDivider class="mt-7" />
 
+            <h3 class="theme-customizer-section-title">{{ t('theme.customizer.radius') }}</h3>
+            <div class="theme-customizer-preview-grid theme-customizer-preview-grid--radius">
+              <div
+                v-for="radius in radiusOptions"
+                :key="radius.value"
+                class="theme-customizer-preview-option"
+                :class="{ 'is-active': settings.radius === radius.value }"
+                @click="setRadius(radius.value)"
+              >
+                <span
+                  class="theme-customizer-radius-scene"
+                  :style="{ '--theme-customizer-radius-preview': radius.previewRadius }"
+                >
+                  <span class="theme-customizer-radius-scene__card">
+                    <span class="theme-customizer-radius-scene__badge" />
+                    <span class="theme-customizer-radius-scene__line" />
+                    <span class="theme-customizer-radius-scene__line theme-customizer-radius-scene__line--short" />
+                  </span>
+                </span>
+                <span>{{ radius.title }}</span>
+              </div>
+            </div>
+
+            <VDivider class="mt-7" />
+
             <h3 class="theme-customizer-section-title">{{ t('theme.customizer.shadow') }}</h3>
             <div class="theme-customizer-preview-grid theme-customizer-preview-grid--shadow">
               <div
@@ -469,7 +532,7 @@ async function handleResetSettings() {
 .theme-customizer-panel--dialog {
   overflow: hidden;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
-  border-radius: 16px;
+  border-radius: var(--app-surface-radius);
   background: rgb(var(--v-theme-surface));
   block-size: var(--theme-customizer-viewport-height, 100dvh);
   max-block-size: var(--theme-customizer-viewport-height, 100dvh);
@@ -703,6 +766,10 @@ html[data-theme='transparent'] .v-overlay__content:has(.theme-customizer-drawer)
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.theme-customizer-preview-grid--radius {
+  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
+}
+
 .theme-customizer-preview-option {
   align-items: flex-start;
   padding: 0;
@@ -715,6 +782,7 @@ html[data-theme='transparent'] .v-overlay__content:has(.theme-customizer-drawer)
     box-shadow: none !important;
 
     .theme-customizer-mini-layout,
+    .theme-customizer-radius-scene,
     .theme-customizer-shadow-scene {
       border-width: 2px;
       border-color: rgb(var(--v-theme-primary));
@@ -803,6 +871,54 @@ html[data-theme='transparent'] .v-overlay__content:has(.theme-customizer-drawer)
   }
 }
 
+.theme-customizer-radius-scene {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+  border-radius: 10px;
+  background:
+    linear-gradient(180deg, rgba(var(--v-theme-on-surface), 0.02), rgba(var(--v-theme-on-surface), 0.05)),
+    rgb(var(--v-theme-surface));
+  block-size: 90px;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.theme-customizer-radius-scene__card {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  border-radius: var(--theme-customizer-radius-preview);
+  background: rgb(var(--v-theme-surface));
+  gap: 8px;
+  inset: 16px;
+  padding-block: 12px;
+  padding-inline: 14px;
+}
+
+.theme-customizer-radius-scene__badge,
+.theme-customizer-radius-scene__line {
+  display: block;
+  border-radius: 999px;
+  background: rgba(var(--v-theme-on-surface), 0.1);
+}
+
+.theme-customizer-radius-scene__badge {
+  block-size: 8px;
+  inline-size: 42%;
+  min-inline-size: 28px;
+}
+
+.theme-customizer-radius-scene__line {
+  block-size: 7px;
+}
+
+.theme-customizer-radius-scene__line--short {
+  inline-size: 66%;
+}
+
 .theme-customizer-shadow-scene {
   position: relative;
   display: block;

src/components/cards/DownloadingCard.vue

@@ -75,7 +75,6 @@ async function deleteDownload() {
     <VCard
       :key="props.info?.hash"
       class="downloading-card flex flex-col h-full overflow-hidden"
-      rounded="lg"
       min-height="150"
     >
       <template #image>
@@ -133,11 +132,11 @@ async function deleteDownload() {
 // 外层壳承载主题阴影，避免 VCard 的圆角裁切层影响阴影外扩。
 .downloading-card-shadow-shell {
   position: relative;
-  border-radius: 8px;
+  border-radius: var(--app-surface-radius);
   block-size: 100%;
   box-shadow: var(--app-surface-shadow);
   inline-size: 100%;
-  transition: box-shadow 0.2s ease;
+  transition: border-radius 0.2s ease, box-shadow 0.2s ease;
 }
 
 @media (hover: hover) {

src/components/cards/PluginMixedSortCard.vue

@@ -137,7 +137,7 @@ function handleDropToFolder(event: DragEvent) {
 
   &.sortable-ghost {
     border: 2px dashed #2196f3;
-    border-radius: 16px;
+    border-radius: var(--app-surface-radius);
     background: rgba(33, 150, 243, 10%);
     opacity: 0.3;
   }
@@ -151,7 +151,7 @@ function handleDropToFolder(event: DragEvent) {
 
   &.drag-over {
     border: 2px dashed #2196f3;
-    border-radius: 16px;
+    border-radius: var(--app-surface-radius);
     box-shadow: 0 0 20px rgba(33, 150, 243, 50%);
     transform: scale(1.02);
   }

src/components/cards/SiteCard.vue

@@ -255,7 +255,6 @@ onMounted(() => {
       :ripple="false"
       variant="flat"
       elevation="0"
-      rounded="lg"
       :hover="!cardProps.sortable"
       @click="handleCardClick"
     >

src/components/cards/SubscribeCard.vue

@@ -404,7 +404,7 @@ function handleCardClick() {
     <VHover>
       <template #default="hover">
         <div
-          class="w-full h-full rounded-lg relative"
+          class="subscribe-card-shell w-full h-full relative"
           :class="{
             'transition transform-cpu duration-300 -translate-y-1': hover.isHovering && !props.sortable,
             'outline-dotted outline-pink-500 outline-2': props.batchMode && props.selected,
@@ -419,7 +419,6 @@ function handleCardClick() {
               'subscribe-card-paused': subscribeState === 'S',
               'cursor-move': props.sortable,
             }"
-            rounded="lg"
             min-height="150"
             @click="handleCardClick"
             :ripple="!props.batchMode && !props.sortable"
@@ -594,10 +593,14 @@ function handleCardClick() {
   position: relative;
 }
 
+.subscribe-card-shell {
+  border-radius: var(--app-surface-radius);
+}
+
 .subscribe-card-pending-tint::after {
   position: absolute;
   z-index: 3;
-  border-radius: 8px;
+  border-radius: inherit;
   box-shadow: inset 0 0 48px rgba(56, 189, 248, 40%); // sky-400
   content: '';
   inset: 0;

src/components/cards/SubscribeShareCard.vue

@@ -94,7 +94,7 @@ function doDelete() {
     <VHover>
       <template #default="hover">
         <div
-          class="w-full h-full rounded-lg overflow-hidden"
+          class="w-full h-full overflow-hidden"
           :class="{
             'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
           }"
@@ -103,7 +103,6 @@ function doDelete() {
             v-bind="hover.props"
             :key="props.media?.id"
             class="flex flex-col h-full"
-            rounded="0"
             min-height="150"
             @click="showForkSubscribe"
           >

src/components/cards/WorkflowShareCard.vue

@@ -102,7 +102,6 @@ function doDelete() {
           :class="{
             'workflow-share-card--hovering': hover.isHovering,
           }"
-          rounded="lg"
           min-height="150"
           :style="{ background: gradientStyle }"
           @click="showForkWorkflow"

src/components/dialog/ContentToggleSettingsDialog.vue

@@ -196,7 +196,7 @@ function submitSettings() {
   position: relative;
   overflow: hidden;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
-  border-radius: 8px;
+  border-radius: var(--app-surface-radius);
   background-color: rgba(var(--v-theme-surface-variant), 0.3);
   cursor: pointer;
   padding-block: 10px;

src/components/dialog/DiscoverTabOrderDialog.vue

@@ -118,7 +118,7 @@ function submitOrder() {
   position: relative;
   overflow: hidden;
   border: 1px solid rgba(var(--v-theme-primary), 0.3);
-  border-radius: 8px;
+  border-radius: var(--app-surface-radius);
   background-color: rgba(var(--v-theme-primary), 0.08);
   cursor: grab;
   padding-block: 10px;

src/components/dialog/ForkWorkflowDialog.vue

@@ -278,7 +278,7 @@ async function doDelete() {
   position: relative;
   overflow: hidden;
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 8px;
+  border-radius: var(--app-surface-radius);
   background-color: rgba(var(--v-theme-surface), 0.8);
   block-size: 280px;
   inline-size: 240px;
@@ -290,7 +290,7 @@ async function doDelete() {
 
   .vue-flow__node {
     border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-    border-radius: 8px;
+    border-radius: var(--app-surface-radius);
     font-size: 10px;
 
     &:hover {

src/components/dialog/OfflineStatusDialog.vue

@@ -116,7 +116,7 @@ const colorTheme = computed(() => {
 
 <style scoped>
 .offline-dialog {
-  border-radius: 16px;
+  border-radius: var(--app-surface-radius);
 }
 
 .status-icon-wrapper {

src/components/dialog/PluginMarketSettingDialog.vue

@@ -505,7 +505,7 @@ onMounted(() => {
 .plugin-market-list-wrap {
   flex: 1;
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 8px;
+  border-radius: var(--app-surface-radius);
   background: rgba(var(--v-theme-surface), 0.72);
   min-block-size: 0;
   overflow-y: auto;
@@ -563,7 +563,7 @@ onMounted(() => {
   display: flex;
   flex: 1;
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 8px;
+  border-radius: var(--app-surface-radius);
   background: rgba(var(--v-theme-surface), 0.72);
   min-block-size: 0;
   overflow: hidden;

src/components/dialog/ReorganizeDialog.vue

@@ -1914,7 +1914,7 @@ onUnmounted(() => {
 
 .preview-note {
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 1rem;
+  border-radius: var(--app-surface-radius);
   color: rgb(var(--v-theme-error));
   font-size: 0.875rem;
   line-height: 1.5;
@@ -1932,7 +1932,7 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 1rem;
+  border-radius: var(--app-surface-radius);
   gap: 0.375rem;
   min-inline-size: 0;
   padding-block: 0.875rem;
@@ -1959,7 +1959,7 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 0.75rem;
+  border-radius: var(--app-surface-radius);
   gap: 0.75rem;
   padding-block: 0.875rem;
   padding-inline: 1rem;
@@ -2052,7 +2052,7 @@ onUnmounted(() => {
   flex: 0 0 auto;
   flex-direction: column;
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 1rem;
+  border-radius: var(--app-surface-radius);
   margin-block-end: 1.5rem;
   margin-inline: 1.5rem;
   min-block-size: 0;

src/components/dialog/SearchBarDialog.vue

@@ -698,7 +698,7 @@ onMounted(() => {
   display: flex;
   overflow: hidden;
   flex-direction: column;
-  border-radius: 16px !important;
+  border-radius: var(--app-surface-radius) !important;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 12%) !important;
 }
 

src/components/dialog/SiteImportDialog.vue

@@ -394,7 +394,7 @@ watch(selectedFile, async newFile => {
 .upload-zone {
   padding: 2rem;
   border: 2px dashed #ccc;
-  border-radius: 8px;
+  border-radius: var(--app-surface-radius);
   text-align: center;
   transition: all 0.3s ease;
 }

src/components/dialog/SiteResourceDialog.vue

@@ -719,7 +719,7 @@ onMounted(() => {
 
 .site-resource-card__meta-item {
   border: 1px solid rgba(var(--v-border-color), calc(var(--v-border-opacity) * 0.7));
-  border-radius: 0.6rem;
+  border-radius: var(--app-surface-radius);
   background: rgba(var(--v-theme-surface), 0.78);
   min-block-size: 0;
   padding-block: 0.55rem;

src/components/dialog/SiteStatisticsDialog.vue

@@ -392,7 +392,7 @@ onMounted(() => {
 .stat-card {
   padding: 16px;
   border: 1px solid var(--v-border-color);
-  border-radius: 8px;
+  border-radius: var(--app-surface-radius);
   background: var(--v-theme-surface);
   min-inline-size: 100px;
   text-align: center;

src/components/dialog/WorkflowActionsDialog.vue

@@ -602,7 +602,7 @@ const isMacOS = computed(() => {
   flex-direction: column;
   padding: 16px;
   border: 1px solid rgb(var(--v-theme-primary));
-  border-radius: 8px;
+  border-radius: var(--app-surface-radius);
   background-color: rgb(var(--v-theme-surface));
   box-shadow: 0 8px 24px rgba(var(--v-shadow-key-umbra-color), 0.32);
   gap: 14px;
@@ -656,7 +656,7 @@ const isMacOS = computed(() => {
 .vue-flow__minimap {
   overflow: hidden;
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 8px;
+  border-radius: var(--app-surface-radius);
   background-color: rgba(var(--v-theme-surface), 0.8);
   box-shadow: 0 4px 15px rgba(var(--v-shadow-key-umbra-color), 0.1);
   inset-block-end: 20px;
@@ -687,7 +687,7 @@ const isMacOS = computed(() => {
 // 自定义节点样式
 .vue-flow__node {
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 12px;
+  border-radius: var(--app-surface-radius);
 
   &:hover {
     box-shadow: 0 8px 16px rgba(var(--v-shadow-key-umbra-color), 0.15) !important;

src/components/filebrowser/FileList.vue

@@ -778,7 +778,7 @@ onUnmounted(() => {
 
 <template>
   <div>
-    <VCard class="d-flex flex-column w-full h-full rounded-t-0" :class="{ 'rounded-s-0': showTree }">
+    <VCard class="d-flex flex-column w-full h-full">
       <div v-if="!loading" class="flex">
         <IconBtn v-if="display.mdAndUp.value">
           <VIcon v-if="showTree" icon="mdi-file-tree" @click="switchFileTree(false)" />

src/components/filebrowser/FileNavigator.vue

@@ -253,7 +253,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <VCard class="file-navigator rounded-e-0 rounded-t-0" v-if="!isMobile" :height="`${availableHeight}px`">
+  <VCard class="file-navigator" v-if="!isMobile" :height="`${availableHeight}px`">
     <VVirtualScroll :items="visibleTreeRows" :item-height="32" class="tree-container">
       <template #default="{ item }">
         <div

src/components/filter/TorrentFilterBar.vue

@@ -610,7 +610,7 @@ onMounted(() => {
 .filter-toolbar-card {
   overflow: hidden;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
-  border-radius: 8px;
+  border-radius: var(--app-surface-radius);
   background: rgba(var(--v-theme-surface), 0.82);
 }
 
@@ -759,7 +759,7 @@ onMounted(() => {
 
 @media (width <= 600px) {
   .filter-toolbar-card {
-    border-radius: 8px;
+    border-radius: var(--app-surface-radius);
   }
 
   .filter-buttons-grid {

src/composables/useThemeCustomizer.ts

@@ -24,6 +24,7 @@ export const themeCustomizerPrimaryColors = [
 ] as const
 
 export type ThemeCustomizerLayout = 'collapsed' | 'horizontal' | 'vertical'
+export type ThemeCustomizerRadius = 'default' | 'extra' | 'large' | 'small' | 'square'
 export type ThemeCustomizerShadow = 'none' | 'low' | 'medium' | 'high'
 export type ThemeCustomizerSkin = 'bordered' | 'default'
 export type ThemeCustomizerTheme = 'auto' | 'dark' | 'light' | 'purple' | 'transparent'
@@ -31,6 +32,7 @@ export type ThemeCustomizerTheme = 'auto' | 'dark' | 'light' | 'purple' | 'trans
 export interface ThemeCustomizerSettings {
   layout: ThemeCustomizerLayout
   primaryColor: string
+  radius: ThemeCustomizerRadius
   semiDarkMenu: boolean
   shadow: ThemeCustomizerShadow
   skin: ThemeCustomizerSkin
@@ -41,6 +43,7 @@ type VuetifyThemeApi = ReturnType<typeof useTheme>
 
 const defaultPrimaryColor = themeCustomizerPrimaryColors[0].value
 const validLayouts: ThemeCustomizerLayout[] = ['vertical', 'collapsed', 'horizontal']
+const validRadii: ThemeCustomizerRadius[] = ['square', 'small', 'default', 'large', 'extra']
 const validShadows: ThemeCustomizerShadow[] = ['none', 'low', 'medium', 'high']
 const validSkins: ThemeCustomizerSkin[] = ['default', 'bordered']
 const validThemes: ThemeCustomizerTheme[] = ['auto', 'light', 'dark', 'purple', 'transparent']
@@ -67,6 +70,7 @@ function getDefaultThemeCustomizerSettings(): ThemeCustomizerSettings {
   return {
     layout: 'vertical',
     primaryColor: defaultPrimaryColor,
+    radius: 'default',
     semiDarkMenu: false,
     shadow: 'none',
     skin: 'default',
@@ -82,6 +86,9 @@ function normalizeThemeCustomizerSettings(settings: Partial<ThemeCustomizerSetti
       ? (settings.layout as ThemeCustomizerLayout)
       : fallback.layout,
     primaryColor: isHexColor(settings.primaryColor) ? settings.primaryColor.toUpperCase() : fallback.primaryColor,
+    radius: validRadii.includes(settings.radius as ThemeCustomizerRadius)
+      ? (settings.radius as ThemeCustomizerRadius)
+      : fallback.radius,
     semiDarkMenu: typeof settings.semiDarkMenu === 'boolean' ? settings.semiDarkMenu : fallback.semiDarkMenu,
     shadow: validShadows.includes(settings.shadow as ThemeCustomizerShadow)
       ? (settings.shadow as ThemeCustomizerShadow)
@@ -161,17 +168,19 @@ export function applyPrimaryColorToVuetify(color: string, themeApi: VuetifyTheme
   localStorage.setItem('materio-initial-loader-color', color)
 }
 
-/** 布局、阴影、皮肤和局部菜单风格只依赖根节点属性，CSS 可以在不刷新页面的情况下即时响应。 */
+/** 布局、圆角、阴影、皮肤和局部菜单风格只依赖根节点属性，CSS 可以在不刷新页面的情况下即时响应。 */
 export function applyThemeCustomizerRootSettings(
-  settings: Pick<ThemeCustomizerSettings, 'layout' | 'semiDarkMenu' | 'shadow' | 'skin'>,
+  settings: Pick<ThemeCustomizerSettings, 'layout' | 'radius' | 'semiDarkMenu' | 'shadow' | 'skin'>,
 ) {
   if (!isBrowser()) return
 
   document.documentElement.setAttribute('data-theme-layout', settings.layout)
+  document.documentElement.setAttribute('data-theme-radius', settings.radius)
   document.documentElement.setAttribute('data-theme-semi-dark-menu', String(settings.semiDarkMenu))
   document.documentElement.setAttribute('data-theme-shadow', settings.shadow)
   document.documentElement.setAttribute('data-theme-skin', settings.skin)
   document.body.setAttribute('data-theme-layout', settings.layout)
+  document.body.setAttribute('data-theme-radius', settings.radius)
   document.body.setAttribute('data-theme-semi-dark-menu', String(settings.semiDarkMenu))
   document.body.setAttribute('data-theme-shadow', settings.shadow)
   document.body.setAttribute('data-theme-skin', settings.skin)
@@ -235,6 +244,7 @@ export function isDefaultThemeCustomizerSettings(settings: ThemeCustomizerSettin
   const defaults = normalizeThemeCustomizerSettings({
     layout: 'vertical',
     primaryColor: defaultPrimaryColor,
+    radius: 'default',
     semiDarkMenu: false,
     shadow: 'none',
     skin: 'default',
@@ -244,6 +254,7 @@ export function isDefaultThemeCustomizerSettings(settings: ThemeCustomizerSettin
   return (
     settings.layout === defaults.layout &&
     settings.primaryColor === defaults.primaryColor &&
+    settings.radius === defaults.radius &&
     settings.semiDarkMenu === defaults.semiDarkMenu &&
     settings.shadow === defaults.shadow &&
     settings.skin === defaults.skin &&
@@ -282,6 +293,10 @@ export function useThemeCustomizer() {
     return updateSettings({ primaryColor: color })
   }
 
+  function setRadius(radius: ThemeCustomizerRadius) {
+    return updateSettings({ radius })
+  }
+
   function setTheme(theme: ThemeCustomizerTheme) {
     return updateSettings({ theme })
   }
@@ -306,6 +321,7 @@ export function useThemeCustomizer() {
     await updateSettings({
       layout: 'vertical',
       primaryColor: defaultPrimaryColor,
+      radius: 'default',
       semiDarkMenu: false,
       shadow: 'none',
       skin: 'default',
@@ -339,6 +355,7 @@ export function useThemeCustomizer() {
     resetSettings,
     setLayout,
     setPrimaryColor,
+    setRadius,
     setSemiDarkMenu,
     setShadow,
     setSkin,

src/layouts/components/Footer.vue

@@ -200,7 +200,7 @@ function resolveDynamicMenuItemTitle(item: DynamicButtonMenuItem) {
   <Teleport v-if="appMode && showNav" to="body">
     <div class="footer-nav-container">
       <TransitionGroup name="footer-nav" tag="div" class="footer-nav-group">
-        <VCard key="main-nav" elevation="3" class="footer-nav-card border" rounded="pill">
+        <VCard key="main-nav" elevation="3" class="footer-nav-card border">
           <VCardText class="footer-card-content">
             <!-- 添加指示器 -->
             <div ref="indicator" class="nav-indicator"></div>
@@ -248,7 +248,6 @@ function resolveDynamicMenuItemTitle(item: DynamicButtonMenuItem) {
           key="dynamic-btn"
           elevation="3"
           class="footer-nav-card dynamic-btn-card border"
-          rounded="pill"
         >
           <VCardText class="footer-card-content">
             <!-- 各页面的动态按钮 -->

src/layouts/components/QuickAccess.vue

@@ -733,7 +733,7 @@ function handleBackdropClick(event: MouseEvent) {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border-radius: 12px;
+  border-radius: var(--app-surface-radius);
   block-size: 120px;
   cursor: pointer;
   gap: 4px;

src/layouts/components/WorkflowSidebar.vue

@@ -281,7 +281,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   padding: 10px;
-  border-radius: 12px;
+  border-radius: var(--app-surface-radius);
   background-color: rgb(var(--v-theme-surface-variant));
   transition: all 0.2s ease;
 

src/locales/en-US.ts

@@ -168,6 +168,12 @@ export default {
       skins: 'Framework',
       skinDefault: 'Default',
       skinBordered: 'Bordered',
+      radius: 'Corners',
+      radiusSquare: 'Square',
+      radiusSmall: 'Small',
+      radiusDefault: 'Default',
+      radiusLarge: 'Large',
+      radiusExtra: 'Extra Large',
       shadow: 'Shadows',
       shadowNone: 'Flat',
       shadowLow: 'Soft',

src/locales/zh-CN.ts

@@ -168,6 +168,12 @@ export default {
       skins: '框架',
       skinDefault: '默认',
       skinBordered: '边框',
+      radius: '圆角',
+      radiusSquare: '直角',
+      radiusSmall: '小圆角',
+      radiusDefault: '默认',
+      radiusLarge: '大圆角',
+      radiusExtra: '超大圆角',
       shadow: '阴影',
       shadowNone: '无阴影',
       shadowLow: '柔和',

src/locales/zh-TW.ts

@@ -168,6 +168,12 @@ export default {
       skins: '框架',
       skinDefault: '默認',
       skinBordered: '邊框',
+      radius: '圓角',
+      radiusSquare: '直角',
+      radiusSmall: '小圓角',
+      radiusDefault: '默認',
+      radiusLarge: '大圓角',
+      radiusExtra: '超大圓角',
       shadow: '陰影',
       shadowNone: '無陰影',
       shadowLow: '柔和',

src/pages/resource.vue

@@ -1388,7 +1388,7 @@ onUnmounted(() => {
 .search-progress-card {
   padding: 16px;
   border: 1px solid rgba(var(--v-theme-primary), 0.18);
-  border-radius: 8px;
+  border-radius: var(--app-surface-radius);
   backdrop-filter: blur(10px);
   background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.08), transparent 42%), rgb(var(--v-theme-surface));
   inline-size: 100%;
@@ -1456,7 +1456,7 @@ onUnmounted(() => {
 .search-skeleton-list {
   overflow: hidden;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
-  border-radius: 8px;
+  border-radius: var(--app-surface-radius);
   background: rgb(var(--v-theme-surface));
 }
 
@@ -1546,7 +1546,7 @@ onUnmounted(() => {
 .resource-list-container {
   padding: 8px;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
-  border-radius: 12px;
+  border-radius: var(--app-surface-radius);
 }
 
 .resource-list {

src/styles/common.scss

@@ -32,8 +32,9 @@ html.v-overlay-scroll-blocked body {
   }
 }
 
-// 全局卡片阴影 token：卡片统一不使用投影，避免透明主题和密集布局下出现脏边。
+// 全局卡片外观 token：圆角和阴影在主题定制器中即时切换。
 html {
+  --app-surface-radius: 8px;
   --app-shadow-rgb: 15, 23, 42;
   --app-card-rest-shadow: none;
   --app-card-hover-shadow: none;
@@ -47,6 +48,22 @@ html {
   --app-surface-hover-shadow: none;
 }
 
+html[data-theme-radius='square'] {
+  --app-surface-radius: 0;
+}
+
+html[data-theme-radius='small'] {
+  --app-surface-radius: 4px;
+}
+
+html[data-theme-radius='large'] {
+  --app-surface-radius: 12px;
+}
+
+html[data-theme-radius='extra'] {
+  --app-surface-radius: 16px;
+}
+
 html[data-theme='dark'],
 html[data-theme='purple'],
 html[data-theme='transparent'] {
@@ -114,8 +131,9 @@ html[data-theme-shadow='high'] {
 // 统一系统内卡片阴影，显式覆盖 Vuetify elevation 或局部卡片默认投影。
 .v-card,
 .v-application .v-card.v-card[class] {
+  border-radius: var(--app-surface-radius) !important;
   box-shadow: var(--app-surface-shadow) !important;
-  transition: box-shadow 0.2s ease;
+  transition: border-radius 0.2s ease, box-shadow 0.2s ease;
 }
 
 @media (hover: hover) {
@@ -183,7 +201,7 @@ html[data-theme-skin='bordered'] {
 .app-card-colorful {
   overflow: hidden;
   border: 1px solid rgba(var(--app-card-accent-rgb), var(--app-card-border-opacity)) !important;
-  border-radius: 8px !important;
+  border-radius: var(--app-surface-radius) !important;
   background:
     linear-gradient(
       135deg,
@@ -724,6 +742,8 @@ html[data-theme="transparent"] .app-card-colorful,
 
 // 弹出层样式
 .v-overlay__content .v-list{
+  overflow: hidden;
+  border-radius: var(--app-surface-radius) !important;
   backdrop-filter: blur(6px);
   background-color: rgb(var(--v-theme-surface), 0.9) !important;
   box-shadow: none !important;
@@ -731,6 +751,7 @@ html[data-theme="transparent"] .app-card-colorful,
 }
 
 .v-overlay__content .v-card:not(.bg-primary){
+  border-radius: var(--app-surface-radius) !important;
   backdrop-filter: blur(8px);
   background-color: rgb(var(--v-theme-surface), 0.95) !important;
   box-shadow: none !important;
@@ -772,6 +793,7 @@ html[data-theme="transparent"] .app-card-colorful,
 }
 
 .v-dialog--fullscreen > .v-overlay__content {
+  border-radius: 0 !important;
   box-shadow: none !important;
 }
 
@@ -784,13 +806,21 @@ html[data-theme="transparent"] .app-card-colorful,
 }
 
 .v-dialog > .v-overlay__content > .v-card,
+.v-dialog > .v-overlay__content > .v-sheet,
+.v-dialog > .v-overlay__content > form > .v-card,
+.v-dialog > .v-overlay__content > form > .v-sheet,
 .v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content > .v-card,
 .v-menu > .v-overlay__content > .v-card,
 .v-menu > .v-overlay__content > .v-list {
+  border-radius: var(--app-surface-radius) !important;
   box-shadow: var(--app-overlay-shadow) !important;
 }
 
-.v-dialog--fullscreen > .v-overlay__content > .v-card {
+.v-dialog--fullscreen > .v-overlay__content > .v-card,
+.v-dialog--fullscreen > .v-overlay__content > .v-sheet,
+.v-dialog--fullscreen > .v-overlay__content > form > .v-card,
+.v-dialog--fullscreen > .v-overlay__content > form > .v-sheet {
+  border-radius: 0 !important;
   box-shadow: none !important;
 }
 

src/views/system/LoggingView.vue

@@ -817,7 +817,7 @@ onUnmounted(() => {
   display: flex;
   align-items: stretch;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.04);
-  border-radius: 8px;
+  border-radius: var(--app-surface-radius);
   gap: 0.75rem;
   min-inline-size: 0;
   padding-block: 0.5rem;

src/views/system/ModuleTestView.vue

@@ -244,7 +244,7 @@ onMounted(getModules)
 
 .progress-card {
   padding: 20px;
-  border-radius: 12px;
+  border-radius: var(--app-surface-radius);
   margin: 16px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;