feat: add theme radius customization

2026-06-22 08:03:45 +08:00 · 2026-06-05 23:06:10 +08:00
parent a73c28c1f7
commit f3c524b6b5
34 changed files with 231 additions and 52 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "moviepilot",
-  "version": "2.13.5",
+  "version": "2.13.6",
  "private": true,
  "type": "module",
  "bin": "dist/service.js",
--- a/src/components/PWAInstallPrompt.vue
+++ b/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;
--- a/src/components/ThemeCustomizer.vue
+++ b/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;
--- a/src/components/cards/DownloadingCard.vue
+++ b/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) {
--- a/src/components/cards/PluginMixedSortCard.vue
+++ b/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);
  }
--- a/src/components/cards/SiteCard.vue
+++ b/src/components/cards/SiteCard.vue
@@ -255,7 +255,6 @@ onMounted(() => {
      :ripple="false"
      variant="flat"
      elevation="0"
-      rounded="lg"
      :hover="!cardProps.sortable"
      @click="handleCardClick"
    >
--- a/src/components/cards/SubscribeCard.vue
+++ b/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;
--- a/src/components/cards/SubscribeShareCard.vue
+++ b/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"
          >
--- a/src/components/cards/WorkflowShareCard.vue
+++ b/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"
--- a/src/components/dialog/ContentToggleSettingsDialog.vue
+++ b/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;
--- a/src/components/dialog/DiscoverTabOrderDialog.vue
+++ b/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;
--- a/src/components/dialog/ForkWorkflowDialog.vue
+++ b/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 {
--- a/src/components/dialog/OfflineStatusDialog.vue
+++ b/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 {
--- a/src/components/dialog/PluginMarketSettingDialog.vue
+++ b/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;
--- a/src/components/dialog/ReorganizeDialog.vue
+++ b/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;
--- a/src/components/dialog/SearchBarDialog.vue
+++ b/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;
 }

--- a/src/components/dialog/SiteImportDialog.vue
+++ b/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;
 }
--- a/src/components/dialog/SiteResourceDialog.vue
+++ b/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;
--- a/src/components/dialog/SiteStatisticsDialog.vue
+++ b/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;
--- a/src/components/dialog/WorkflowActionsDialog.vue
+++ b/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;
--- a/src/components/filebrowser/FileList.vue
+++ b/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)" />
--- a/src/components/filebrowser/FileNavigator.vue
+++ b/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
--- a/src/components/filter/TorrentFilterBar.vue
+++ b/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 {
--- a/src/composables/useThemeCustomizer.ts
+++ b/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,
--- a/src/layouts/components/Footer.vue
+++ b/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">
            <!-- 各页面的动态按钮 -->
--- a/src/layouts/components/QuickAccess.vue
+++ b/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;
--- a/src/layouts/components/WorkflowSidebar.vue
+++ b/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;

--- a/src/locales/en-US.ts
+++ b/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',
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -168,6 +168,12 @@ export default {
      skins: '框架',
      skinDefault: '默认',
      skinBordered: '边框',
+      radius: '圆角',
+      radiusSquare: '直角',
+      radiusSmall: '小圆角',
+      radiusDefault: '默认',
+      radiusLarge: '大圆角',
+      radiusExtra: '超大圆角',
      shadow: '阴影',
      shadowNone: '无阴影',
      shadowLow: '柔和',
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -168,6 +168,12 @@ export default {
      skins: '框架',
      skinDefault: '默認',
      skinBordered: '邊框',
+      radius: '圓角',
+      radiusSquare: '直角',
+      radiusSmall: '小圓角',
+      radiusDefault: '默認',
+      radiusLarge: '大圓角',
+      radiusExtra: '超大圓角',
      shadow: '陰影',
      shadowNone: '無陰影',
      shadowLow: '柔和',
--- a/src/pages/resource.vue
+++ b/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 {
--- a/src/styles/common.scss
+++ b/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;
 }

--- a/src/views/system/LoggingView.vue
+++ b/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;
--- a/src/views/system/ModuleTestView.vue
+++ b/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;