refactor(dialogs): unify button styles and layout in dialog components

- Updated VCardActions in multiple dialog components to use a consistent class `app-dialog-actions` for styling. - Changed button variants to `flat` for primary actions and `tonal` for secondary actions across various dialogs. - Adjusted padding and spacing for buttons to improve layout consistency. - Enhanced responsiveness for dialog actions in mobile views.
2026-06-19 06:30:35 +08:00 · 2026-06-14 14:47:06 +08:00
parent 889a4b744a
commit 891274cc0e
41 changed files with 310 additions and 177 deletions
--- a/src/components/PWAInstallPrompt.vue
+++ b/src/components/PWAInstallPrompt.vue
@@ -163,9 +163,9 @@ const instructions = computed(() => {
        </VAlert>
      </VCardText>

-      <VCardActions>
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
-        <VBtn color="primary" variant="text" @click="showInstructions = false">
+        <VBtn color="primary" variant="flat" class="px-5" @click="showInstructions = false">
          {{ t('pwa.gotIt') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/AlistConfigDialog.vue
+++ b/src/components/dialog/AlistConfigDialog.vue
@@ -133,12 +133,12 @@ async function savaAlistConfig() {
          </VCol>
        </VRow>
      </VCardText>
-      <VCardActions>
-        <VBtn color="error" @click="handleReset" prepend-icon="mdi-restore" class="px-5 me-3">
+      <VCardActions class="app-dialog-actions">
+        <VBtn color="error" variant="tonal" @click="handleReset" prepend-icon="mdi-restore">
          {{ t('dialog.alistConfig.reset') }}
        </VBtn>
        <VSpacer />
-        <VBtn @click="handleDone" prepend-icon="mdi-check" class="px-5 me-3">
+        <VBtn color="primary" variant="flat" @click="handleDone" prepend-icon="mdi-check" class="px-5">
          {{ t('dialog.alistConfig.complete') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/AliyunAuthDialog.vue
+++ b/src/components/dialog/AliyunAuthDialog.vue
@@ -138,12 +138,12 @@ onUnmounted(() => {
          </VAlert>
        </div>
      </VCardText>
-      <VCardActions>
-        <VBtn color="error" @click="handleReset" prepend-icon="mdi-restore" class="px-5 me-3">
+      <VCardActions class="app-dialog-actions">
+        <VBtn color="error" variant="tonal" @click="handleReset" prepend-icon="mdi-restore">
          {{ t('dialog.aliyunAuth.reset') }}
        </VBtn>
        <VSpacer />
-        <VBtn @click="handleDone" prepend-icon="mdi-check" class="px-5 me-3">
+        <VBtn color="primary" variant="flat" @click="handleDone" prepend-icon="mdi-check" class="px-5">
          {{ t('dialog.aliyunAuth.complete') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/CacheReidentifyDialog.vue
+++ b/src/components/dialog/CacheReidentifyDialog.vue
@@ -84,9 +84,16 @@ function submitReidentify() {
        </VAlert>
      </VCardText>

-      <VCardActions>
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
-        <VBtn color="primary" :loading="props.loading" prepend-icon="mdi-check" @click="submitReidentify">
+        <VBtn
+          color="primary"
+          variant="flat"
+          :loading="props.loading"
+          prepend-icon="mdi-check"
+          class="px-5"
+          @click="submitReidentify"
+        >
          {{ t('setting.cache.reidentifyDialog.confirm') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/CategoryEditDialog.vue
+++ b/src/components/dialog/CategoryEditDialog.vue
@@ -383,7 +383,7 @@ onMounted(() => {
          </VTab>
        </VTabs>

-        <div v-if="loading" class="d-flex justify-center align-center" style="min-height: 300px">
+        <div v-if="loading" class="d-flex justify-center align-center" style="min-block-size: 300px">
          <VProgressCircular indeterminate color="primary" size="64" />
        </div>

@@ -610,12 +610,16 @@ onMounted(() => {
        </VWindow>
      </VCardText>

-      <VCardActions class="pt-3">
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
-        <VBtn variant="text" @click="emit('close')">
-          {{ t('common.cancel') }}
-        </VBtn>
-        <VBtn color="primary" :loading="saving" prepend-icon="mdi-content-save" class="px-5" @click="saveConfig">
+        <VBtn
+          color="primary"
+          variant="flat"
+          :loading="saving"
+          prepend-icon="mdi-content-save"
+          class="px-5"
+          @click="saveConfig"
+        >
          {{ t('common.save') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/ContentToggleSettingsDialog.vue
+++ b/src/components/dialog/ContentToggleSettingsDialog.vue
@@ -153,15 +153,15 @@ function submitSettings() {
          <VSwitch v-model="elevatedValue" :label="props.switchLabel" />
        </p>
      </VCardText>
-      <VCardActions class="pt-3">
-        <VBtn v-if="props.showBulkActions" variant="text" @click="setAllItems(true)">
+      <VCardActions class="app-dialog-actions">
+        <VBtn v-if="props.showBulkActions" color="success" variant="tonal" @click="setAllItems(true)">
          {{ props.selectAllText }}
        </VBtn>
-        <VBtn v-if="props.showBulkActions" variant="text" @click="setAllItems(false)">
+        <VBtn v-if="props.showBulkActions" color="warning" variant="tonal" @click="setAllItems(false)">
          {{ props.selectNoneText }}
        </VBtn>
        <VSpacer />
-        <VBtn color="primary" class="px-5" @click="submitSettings">
+        <VBtn color="primary" variant="flat" class="px-5" @click="submitSettings">
          <template #prepend>
            <VIcon icon="mdi-content-save" />
          </template>
--- a/src/components/dialog/CustomCssDialog.vue
+++ b/src/components/dialog/CustomCssDialog.vue
@@ -86,8 +86,9 @@ function submitCustomCSS() {
          class="custom-css-editor"
        />
      </div>
-      <VCardActions class="custom-css-actions">
-        <VBtn color="primary" prepend-icon="mdi-content-save" class="px-5" @click="submitCustomCSS">
+      <VCardActions class="app-dialog-actions custom-css-actions">
+        <VSpacer />
+        <VBtn color="primary" variant="flat" prepend-icon="mdi-content-save" class="px-5" @click="submitCustomCSS">
          {{ t('common.save') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/CustomRuleInfoDialog.vue
+++ b/src/components/dialog/CustomRuleInfoDialog.vue
@@ -199,8 +199,9 @@ onMounted(() => {
          </VRow>
        </VForm>
      </VCardText>
-      <VCardActions class="pt-3">
-        <VBtn @click="saveRuleInfo" prepend-icon="mdi-content-save" class="px-5">
+      <VCardActions class="app-dialog-actions">
+        <VSpacer />
+        <VBtn color="primary" variant="flat" @click="saveRuleInfo" prepend-icon="mdi-content-save" class="px-5">
          {{ t('customRule.action.confirm') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/DiscoverTabOrderDialog.vue
+++ b/src/components/dialog/DiscoverTabOrderDialog.vue
@@ -88,9 +88,9 @@ function submitOrder() {
          </template>
        </draggable>
      </VCardText>
-      <VCardActions class="pt-3">
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
-        <VBtn @click="submitOrder">
+        <VBtn color="primary" variant="flat" class="px-5" @click="submitOrder">
          <template #prepend>
            <VIcon icon="mdi-content-save" />
          </template>
--- a/src/components/dialog/DownloaderInfoDialog.vue
+++ b/src/components/dialog/DownloaderInfoDialog.vue
@@ -536,8 +536,9 @@ onMounted(() => {
            </VRow>
          </VForm>
        </VCardText>
-        <VCardActions class="pt-3">
-          <VBtn @click="saveDownloaderInfo" prepend-icon="mdi-content-save" class="px-5">
+        <VCardActions class="app-dialog-actions">
+          <VSpacer />
+          <VBtn color="primary" variant="flat" @click="saveDownloaderInfo" prepend-icon="mdi-content-save" class="px-5">
            {{ t('common.save') }}
          </VBtn>
        </VCardActions>
--- a/src/components/dialog/FileNewFolderDialog.vue
+++ b/src/components/dialog/FileNewFolderDialog.vue
@@ -52,9 +52,16 @@ function closeDialog() {
      <VCardText>
        <VTextField v-model="folderName" :label="t('common.name')" prepend-inner-icon="mdi-format-text" />
      </VCardText>
-      <VCardActions>
-        <div class="flex-grow-1" />
-        <VBtn :disabled="!folderName" prepend-icon="mdi-folder-plus" class="px-5 me-3" @click="emit('create')">
+      <VCardActions class="app-dialog-actions">
+        <VSpacer />
+        <VBtn
+          color="primary"
+          variant="flat"
+          :disabled="!folderName"
+          prepend-icon="mdi-folder-plus"
+          class="px-5"
+          @click="emit('create')"
+        >
          {{ t('common.create') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/FileRenameDialog.vue
+++ b/src/components/dialog/FileRenameDialog.vue
@@ -81,11 +81,19 @@ function closeDialog() {
          </VCol>
        </VRow>
      </VCardText>
-      <VCardActions>
-        <VBtn color="success" prepend-icon="mdi-magic" class="px-5 me-3" @click="emit('auto-name')">
+      <VCardActions class="app-dialog-actions">
+        <VBtn color="success" variant="tonal" prepend-icon="mdi-magic" @click="emit('auto-name')">
          {{ t('file.autoRecognizeName') }}
        </VBtn>
-        <VBtn :disabled="!renameName" prepend-icon="mdi-check" class="px-5 me-3" @click="emit('rename')">
+        <VSpacer />
+        <VBtn
+          color="primary"
+          variant="flat"
+          :disabled="!renameName"
+          prepend-icon="mdi-check"
+          class="px-5"
+          @click="emit('rename')"
+        >
          {{ t('common.confirm') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/FilterRuleGroupInfoDialog.vue
+++ b/src/components/dialog/FilterRuleGroupInfoDialog.vue
@@ -294,18 +294,23 @@ onMounted(() => {
          </Draggable>
          <div class="text-center" v-if="filterRuleCards.length == 0">{{ t('filterRule.add') }}</div>
        </VCardText>
-        <VCardActions class="pt-3">
-          <VBtn color="primary" @click="addFilterCard">
+        <VCardActions class="app-dialog-actions">
+          <VBtn color="primary" variant="tonal" class="app-dialog-actions__icon-btn" @click="addFilterCard">
            <VIcon icon="mdi-plus" />
          </VBtn>
-          <VBtn color="success" @click="importRules('priority')">
+          <VBtn
+            color="success"
+            variant="tonal"
+            class="app-dialog-actions__icon-btn"
+            @click="importRules('priority')"
+          >
            <VIcon icon="mdi-import" />
          </VBtn>
-          <VBtn color="info" @click="shareRules">
+          <VBtn color="info" variant="tonal" class="app-dialog-actions__icon-btn" @click="shareRules">
            <VIcon icon="mdi-share" />
          </VBtn>
          <VSpacer />
-          <VBtn @click="saveGroupInfo" prepend-icon="mdi-content-save" class="px-5">
+          <VBtn color="primary" variant="flat" @click="saveGroupInfo" prepend-icon="mdi-content-save" class="px-5">
            {{ t('common.save') }}
          </VBtn>
        </VCardActions>
--- a/src/components/dialog/ImportCodeDialog.vue
+++ b/src/components/dialog/ImportCodeDialog.vue
@@ -36,9 +36,9 @@ function handleImport() {
      <VCardText class="pt-2">
        <VTextarea v-model="codeString" prepend-inner-icon="mdi-code-json" />
      </VCardText>
-      <VCardActions>
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
-        <VBtn @click="handleImport" prepend-icon="mdi-import" class="px-5 me-3">
+        <VBtn color="primary" variant="flat" @click="handleImport" prepend-icon="mdi-import" class="px-5">
          {{ t('dialog.importCode.import') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/LlmProviderAuthDialog.vue
+++ b/src/components/dialog/LlmProviderAuthDialog.vue
@@ -43,7 +43,10 @@ function closeDialog() {
 <template>
  <VDialog v-if="visible" v-model="visible" max-width="560">
    <VCard>
-      <VCardTitle>{{ t('setting.system.llmProviderAuthDialogTitle') }}</VCardTitle>
+      <VCardItem>
+        <VCardTitle>{{ t('setting.system.llmProviderAuthDialogTitle') }}</VCardTitle>
+      </VCardItem>
+      <VDivider />
      <VCardText class="d-flex flex-column ga-4">
        <VAlert v-if="props.authSession?.instructions" type="info" variant="tonal">
          {{ props.authSession.instructions }}
@@ -71,9 +74,9 @@ function closeDialog() {
          </VBtn>
        </div>
      </VCardText>
-      <VCardActions>
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
-        <VBtn variant="text" @click="closeDialog">
+        <VBtn color="primary" variant="flat" class="px-5" @click="closeDialog">
          {{ t('common.close') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/MediaServerInfoDialog.vue
+++ b/src/components/dialog/MediaServerInfoDialog.vue
@@ -591,8 +591,15 @@ onMounted(() => {
            </VRow>
          </VForm>
        </VCardText>
-        <VCardActions class="pt-3">
-          <VBtn @click="saveMediaServerInfo" prepend-icon="mdi-content-save" class="px-5">
+        <VCardActions class="app-dialog-actions">
+          <VSpacer />
+          <VBtn
+            color="primary"
+            variant="flat"
+            @click="saveMediaServerInfo"
+            prepend-icon="mdi-content-save"
+            class="px-5"
+          >
            {{ t('common.confirm') }}
          </VBtn>
        </VCardActions>
--- a/src/components/dialog/NotificationChannelInfoDialog.vue
+++ b/src/components/dialog/NotificationChannelInfoDialog.vue
@@ -1171,8 +1171,15 @@ onMounted(() => {
            </VRow>
          </VForm>
        </VCardText>
-        <VCardActions class="pt-3">
-          <VBtn @click="saveNotificationInfo" prepend-icon="mdi-content-save" class="px-5">
+        <VCardActions class="app-dialog-actions">
+          <VSpacer />
+          <VBtn
+            color="primary"
+            variant="flat"
+            @click="saveNotificationInfo"
+            prepend-icon="mdi-content-save"
+            class="px-5"
+          >
            {{ t('common.confirm') }}
          </VBtn>
        </VCardActions>
--- a/src/components/dialog/NotificationTemplateEditorDialog.vue
+++ b/src/components/dialog/NotificationTemplateEditorDialog.vue
@@ -92,8 +92,9 @@ function submitTemplate() {
          class="template-ace-editor"
        />
      </div>
-      <VCardActions class="template-editor-actions">
-        <VBtn color="primary" prepend-icon="mdi-content-save" class="px-5" @click="submitTemplate">
+      <VCardActions class="app-dialog-actions template-editor-actions">
+        <VSpacer />
+        <VBtn color="primary" variant="flat" prepend-icon="mdi-content-save" class="px-5" @click="submitTemplate">
          {{ t('common.save') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/PasskeyDialog.vue
+++ b/src/components/dialog/PasskeyDialog.vue
@@ -299,8 +299,9 @@ watch(
        </VAlert>
      </VCardText>

-      <VCardActions class="justify-end px-6 pb-4">
-        <VBtn variant="outlined" @click="show = false">{{ t('common.close') }}</VBtn>
+      <VCardActions class="app-dialog-actions">
+        <VSpacer />
+        <VBtn color="primary" variant="flat" class="px-5" @click="show = false">{{ t('common.close') }}</VBtn>
      </VCardActions>
    </VCard>
  </VDialog>
--- a/src/components/dialog/PluginCloneDialog.vue
+++ b/src/components/dialog/PluginCloneDialog.vue
@@ -154,10 +154,11 @@ onMounted(() => {
          </VRow>
        </VForm>
      </VCardText>
-      <VCardActions class="pt-3">
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
        <VBtn
          color="primary"
+          variant="flat"
          @click="submitClone"
          prepend-icon="mdi-content-copy"
          class="px-5"
--- a/src/components/dialog/PluginConfigDialog.vue
+++ b/src/components/dialog/PluginConfigDialog.vue
@@ -160,13 +160,26 @@ onBeforeMount(async () => {
          <div v-if="!pluginFormItems || pluginFormItems.length === 0">此插件没有可配置项</div>
        </div>
      </VCardText>
-      <VCardActions class="pt-3">
-        <VBtn v-if="props.plugin?.has_page" @click="emit('switch')" color="info">
+      <VCardActions class="app-dialog-actions">
+        <VBtn
+          v-if="props.plugin?.has_page"
+          color="info"
+          variant="tonal"
+          prepend-icon="mdi-database-eye-outline"
+          @click="emit('switch')"
+        >
          {{ t('dialog.pluginConfig.viewData') }}
        </VBtn>
        <VSpacer />
        <!-- 只有Vuetify模式显示默认保存按钮，Vue模式由组件内部控制 -->
-        <VBtn v-if="renderMode === 'vuetify'" @click="savePluginConf" prepend-icon="mdi-content-save" class="px-5">
+        <VBtn
+          v-if="renderMode === 'vuetify'"
+          color="primary"
+          variant="flat"
+          @click="savePluginConf"
+          prepend-icon="mdi-content-save"
+          class="px-5"
+        >
          保存
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/PluginFolderCreateDialog.vue
+++ b/src/components/dialog/PluginFolderCreateDialog.vue
@@ -54,9 +54,9 @@ function closeDialog() {
          @keyup.enter="emit('create')"
        />
      </VCardText>
-      <VCardActions>
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
-        <VBtn color="primary" prepend-icon="mdi-folder-plus" class="px-5" @click="emit('create')">
+        <VBtn color="primary" variant="flat" prepend-icon="mdi-folder-plus" class="px-5" @click="emit('create')">
          {{ t('plugin.create') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/PluginFolderRenameDialog.vue
+++ b/src/components/dialog/PluginFolderRenameDialog.vue
@@ -57,9 +57,9 @@ function confirmRename() {
          @keyup.enter="confirmRename"
        />
      </VCardText>
-      <VCardActions>
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
-        <VBtn color="primary" prepend-icon="mdi-check" class="px-5" @click="confirmRename">确认</VBtn>
+        <VBtn color="primary" variant="flat" prepend-icon="mdi-check" class="px-5" @click="confirmRename">确认</VBtn>
      </VCardActions>
    </VCard>
  </VDialog>
--- a/src/components/dialog/PluginFolderSettingsDialog.vue
+++ b/src/components/dialog/PluginFolderSettingsDialog.vue
@@ -201,9 +201,11 @@ onMounted(() => {
          </VCol>
        </VRow>
      </VCardText>
-      <VCardActions>
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
-        <VBtn color="primary" prepend-icon="mdi-content-save" class="px-5" @click="saveSettings">保存</VBtn>
+        <VBtn color="primary" variant="flat" prepend-icon="mdi-content-save" class="px-5" @click="saveSettings">
+          保存
+        </VBtn>
      </VCardActions>
    </VCard>
  </VDialog>
--- a/src/components/dialog/PluginMarketSettingDialog.vue
+++ b/src/components/dialog/PluginMarketSettingDialog.vue
@@ -290,7 +290,7 @@ onMounted(() => {
        </div>
        <VDialogCloseBtn @click="emit('close')" />
      </VCardItem>
-
+      <VDivider />
      <VCardText class="plugin-market-dialog-body pt-4">
        <div class="plugin-market-toolbar">
          <div class="plugin-market-toolbar-hint">
@@ -478,9 +478,9 @@ onMounted(() => {
        </div>
      </VCardText>

-      <VCardActions class="plugin-market-actions">
+      <VCardActions class="app-dialog-actions">
        <VBtn
-          color="primary"
+          color="success"
          variant="tonal"
          prepend-icon="mdi-cloud-sync-outline"
          :loading="syncingWiki"
@@ -735,17 +735,6 @@ onMounted(() => {
  }
 }

-.plugin-market-actions {
-  flex: 0 0 auto;
-  gap: 0.5rem;
-  padding-block: 0.75rem 1rem;
-  padding-inline: 1.5rem;
-
-  :deep(.v-btn) {
-    flex: 0 0 auto;
-  }
-}
-
@media (width <= 600px) {
  .plugin-market-dialog-card {
    block-size: 100dvh;
@@ -799,20 +788,5 @@ onMounted(() => {
  .plugin-market-empty {
    min-block-size: 10rem;
  }
-
-  .plugin-market-actions {
-    flex-wrap: wrap;
-    padding-block: 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
-    padding-inline: 1rem;
-
-    :deep(.v-btn) {
-      flex: 1 1 9rem;
-      min-inline-size: 0;
-    }
-
-    :deep(.v-spacer) {
-      display: none;
-    }
-  }
 }
 </style>
--- a/src/components/dialog/RcloneConfigDialog.vue
+++ b/src/components/dialog/RcloneConfigDialog.vue
@@ -89,12 +89,12 @@ async function handleReset() {
          </VCol>
        </VRow>
      </VCardText>
-      <VCardActions>
-        <VBtn color="error" @click="handleReset" prepend-icon="mdi-restore" class="px-5 me-3">
+      <VCardActions class="app-dialog-actions">
+        <VBtn color="error" variant="tonal" @click="handleReset" prepend-icon="mdi-restore">
          {{ t('dialog.rcloneConfig.reset') }}
        </VBtn>
        <VSpacer />
-        <VBtn @click="handleDone" prepend-icon="mdi-check" class="px-5 me-3">
+        <VBtn color="primary" variant="flat" @click="handleDone" prepend-icon="mdi-check" class="px-5">
          {{ t('dialog.rcloneConfig.complete') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/ReorganizeDialog.vue
+++ b/src/components/dialog/ReorganizeDialog.vue
@@ -294,7 +294,7 @@ const initialTargetPath = normalizeTargetPath(props.target_path)
 const transferForm = reactive<TransferForm>({
  fileitem: {} as FileItem,
  logid: 0,
-  target_storage: initialTargetPath ? props.target_storage ?? 'local' : null,
+  target_storage: initialTargetPath ? (props.target_storage ?? 'local') : null,
  target_path: initialTargetPath,
  transfer_type: null,
  min_filesize: 0,
@@ -1550,35 +1550,39 @@ onUnmounted(() => {
                  </VCol>
                </VRow>
              </VForm>
-              <VCardActions class="reorganize-form-pane__actions pt-3 px-0 pb-0">
-                <VBtn
-                  color="info"
-                  :variant="previewVisible ? 'tonal' : 'text'"
-                  @click="togglePreview"
-                  :prepend-icon="previewToggleIcon"
-                  class="reorganize-action-btn reorganize-action-btn--preview"
-                  :class="{ 'reorganize-action-btn--active': previewVisible }"
-                  :loading="previewLoading"
-                >
-                  {{ t('dialog.reorganize.previewResult') }}
-                </VBtn>
-                <VBtn
-                  color="success"
-                  @click="transfer(true)"
-                  prepend-icon="mdi-plus"
-                  class="reorganize-action-btn reorganize-action-btn--queue"
-                >
-                  {{ t('dialog.reorganize.addToQueue') }}
-                </VBtn>
-                <VBtn
-                  @click="transfer(false)"
-                  prepend-icon="mdi-arrow-right-bold"
-                  class="reorganize-action-btn reorganize-action-btn--primary"
-                >
-                  {{ t('dialog.reorganize.reorganizeNow') }}
-                </VBtn>
-              </VCardActions>
            </div>
+            <VCardActions class="app-dialog-actions reorganize-form-pane__actions">
+              <VBtn
+                color="info"
+                variant="tonal"
+                @click="togglePreview"
+                :prepend-icon="previewToggleIcon"
+                class="reorganize-action-btn reorganize-action-btn--preview"
+                :class="{ 'reorganize-action-btn--active': previewVisible }"
+                :loading="previewLoading"
+              >
+                {{ t('dialog.reorganize.previewResult') }}
+              </VBtn>
+              <VBtn
+                color="success"
+                variant="tonal"
+                @click="transfer(true)"
+                prepend-icon="mdi-plus"
+                class="reorganize-action-btn reorganize-action-btn--queue"
+              >
+                {{ t('dialog.reorganize.addToQueue') }}
+              </VBtn>
+              <VSpacer />
+              <VBtn
+                color="primary"
+                variant="flat"
+                @click="transfer(false)"
+                prepend-icon="mdi-arrow-right-bold"
+                class="reorganize-action-btn reorganize-action-btn--primary"
+              >
+                {{ t('dialog.reorganize.reorganizeNow') }}
+              </VBtn>
+            </VCardActions>
          </div>
          <div v-show="previewVisible" class="reorganize-preview-pane">
            <div class="reorganize-preview-pane__header">
@@ -1811,17 +1815,9 @@ onUnmounted(() => {
 }

 .reorganize-form-pane__actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.75rem;
  margin-block-start: auto;
 }

-.reorganize-action-btn {
-  min-inline-size: 0;
-}
-
 .reorganize-action-btn--active {
  background: rgba(var(--v-theme-info), 0.12);
 }
@@ -2161,15 +2157,9 @@ onUnmounted(() => {
    border-inline-end: none;
  }

-  .reorganize-form-pane__actions {
-    display: grid;
-    justify-content: stretch;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
  .reorganize-action-btn {
-    inline-size: 100%;
    min-block-size: 2.75rem;
+    padding-inline: 1rem;
  }

  .reorganize-preview-pane__summary {
@@ -2184,14 +2174,10 @@ onUnmounted(() => {

@media (width <= 640px) {
  .reorganize-form-pane__actions {
-    justify-content: stretch;
+    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

-  .reorganize-action-btn {
-    min-inline-size: 0;
-  }
-
  .reorganize-action-btn--primary {
    grid-column: 1 / -1;
  }
--- a/src/components/dialog/SearchSiteDialog.vue
+++ b/src/components/dialog/SearchSiteDialog.vue
@@ -175,10 +175,11 @@ const filteredSites = computed(() => {
        </div>
      </VCardText>

-      <VCardActions class="pt-3">
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
        <VBtn
          color="primary"
+          variant="flat"
          :disabled="selectedSites.length === 0"
          @click="confirmSearch"
          prepend-icon="mdi-magnify"
--- a/src/components/dialog/SiteAddEditDialog.vue
+++ b/src/components/dialog/SiteAddEditDialog.vue
@@ -340,12 +340,26 @@ onMounted(async () => {
          </VRow>
        </VForm>
      </VCardText>
-      <VCardActions class="pt-3">
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
-        <VBtn v-if="props.oper === 'add'" color="primary" @click="addSite" prepend-icon="mdi-plus" class="px-5">
+        <VBtn
+          v-if="props.oper === 'add'"
+          color="primary"
+          variant="flat"
+          @click="addSite"
+          prepend-icon="mdi-plus"
+          class="px-5"
+        >
          {{ t('site.actions.add') }}
        </VBtn>
-        <VBtn v-else color="primary" @click="updateSiteInfo" prepend-icon="mdi-content-save" class="px-5">
+        <VBtn
+          v-else
+          color="primary"
+          variant="flat"
+          @click="updateSiteInfo"
+          prepend-icon="mdi-content-save"
+          class="px-5"
+        >
          {{ t('common.save') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/SiteCookieUpdateDialog.vue
+++ b/src/components/dialog/SiteCookieUpdateDialog.vue
@@ -110,9 +110,11 @@ async function updateSiteCookie() {
          </VRow>
        </VForm>
      </VCardText>
-      <VCardActions class="mx-auto">
+      <VCardActions class="app-dialog-actions">
+        <VSpacer />
        <VBtn
-          size="large"
+          color="primary"
+          variant="flat"
          @click="updateSiteCookie"
          :disabled="updateButtonDisable"
          :loading="updateButtonDisable"
--- a/src/components/dialog/SmbConfigDialog.vue
+++ b/src/components/dialog/SmbConfigDialog.vue
@@ -117,12 +117,12 @@ async function saveSmbConfig() {
          </VCol>
        </VRow>
      </VCardText>
-      <VCardActions>
-        <VBtn color="error" @click="handleReset" prepend-icon="mdi-restore" class="px-5 me-3">
+      <VCardActions class="app-dialog-actions">
+        <VBtn color="error" variant="tonal" @click="handleReset" prepend-icon="mdi-restore">
          {{ t('dialog.smbConfig.reset') }}
        </VBtn>
        <VSpacer />
-        <VBtn @click="handleDone" prepend-icon="mdi-check" class="px-5 me-3">
+        <VBtn color="primary" variant="flat" @click="handleDone" prepend-icon="mdi-check" class="px-5">
          {{ t('dialog.smbConfig.complete') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/StorageCustomConfigDialog.vue
+++ b/src/components/dialog/StorageCustomConfigDialog.vue
@@ -89,8 +89,9 @@ function handleDone() {
          </VCol>
        </VRow>
      </VCardText>
-      <VCardActions class="pt-3">
-        <VBtn @click="handleDone" prepend-icon="mdi-content-save" class="px-5">
+      <VCardActions class="app-dialog-actions">
+        <VSpacer />
+        <VBtn color="primary" variant="flat" @click="handleDone" prepend-icon="mdi-content-save" class="px-5">
          {{ t('common.save') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/SubscribeEditDialog.vue
+++ b/src/components/dialog/SubscribeEditDialog.vue
@@ -559,12 +559,14 @@ onMounted(() => {
          </VWindow>
        </VForm>
      </VCardText>
-      <VCardActions class="pt-3">
-        <VBtn v-if="!props.default" color="error" @click="removeSubscribe" class="me-3">
+      <VCardActions class="app-dialog-actions">
+        <VBtn v-if="!props.default" color="error" variant="tonal" @click="removeSubscribe">
          {{ t('dialog.subscribeEdit.cancelSubscribe') }}
        </VBtn>
        <VSpacer />
        <VBtn
+          color="primary"
+          variant="flat"
          @click=";`${props.default ? saveDefaultSubscribeConfig() : updateSubscribeInfo()}`"
          prepend-icon="mdi-content-save"
          class="px-5"
--- a/src/components/dialog/SubscribeShareDialog.vue
+++ b/src/components/dialog/SubscribeShareDialog.vue
@@ -105,9 +105,17 @@ const $toast = useToast()
          </VRow>
        </VForm>
      </VCardText>
-      <VCardActions class="pt-3">
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
-        <VBtn :disabled="shareDoing" @click="doShare" prepend-icon="mdi-share" class="px-5" :loading="shareDoing">
+        <VBtn
+          color="primary"
+          variant="flat"
+          :disabled="shareDoing"
+          @click="doShare"
+          prepend-icon="mdi-share"
+          class="px-5"
+          :loading="shareDoing"
+        >
          {{ t('dialog.subscribeShare.confirmShare') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/TorrentSingleFilterDialog.vue
+++ b/src/components/dialog/TorrentSingleFilterDialog.vue
@@ -97,9 +97,9 @@ function updateFilter(values: string[]) {
          </VChip>
        </VChipGroup>
      </VCardText>
-      <VCardActions>
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
-        <VBtn color="primary" prepend-icon="mdi-check" class="px-5" @click="visible = false">
+        <VBtn color="primary" variant="flat" prepend-icon="mdi-check" class="px-5" @click="visible = false">
          {{ t('torrent.confirm') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/U115AuthDialog.vue
+++ b/src/components/dialog/U115AuthDialog.vue
@@ -225,11 +225,11 @@ onUnmounted(() => {
        </div>
      </VCardText>

-      <VCardActions>
+      <VCardActions class="app-dialog-actions">
        <VBtn
          color="error"
+          variant="tonal"
          prepend-icon="mdi-restore"
-          class="px-5 me-3"
          @click="handleReset"
        >
          {{ t('dialog.u115Auth.reset') }}
@@ -238,8 +238,10 @@ onUnmounted(() => {
        <VSpacer />

        <VBtn
+          color="primary"
+          variant="flat"
          prepend-icon="mdi-check"
-          class="px-5 me-3"
+          class="px-5"
          @click="handleDone"
        >
          {{ t('dialog.u115Auth.complete') }}
--- a/src/components/dialog/UserAddEditDialog.vue
+++ b/src/components/dialog/UserAddEditDialog.vue
@@ -612,12 +612,13 @@ onMounted(() => {
          </div>
        </VForm>
      </VCardText>
-      <VCardActions class="pt-3">
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
        <VBtn
          v-if="props.oper === 'add'"
          :disabled="isAdding"
          color="primary"
+          variant="flat"
          @click="addUser"
          prepend-icon="mdi-plus"
          class="px-5"
@@ -629,6 +630,7 @@ onMounted(() => {
          v-else
          :disabled="isUpdating"
          color="primary"
+          variant="flat"
          @click="updateUser"
          prepend-icon="mdi-content-save"
          class="px-5"
--- a/src/components/dialog/WorkflowAddEditDialog.vue
+++ b/src/components/dialog/WorkflowAddEditDialog.vue
@@ -312,12 +312,19 @@ onMounted(() => {
          </VRow>
        </VForm>
      </VCardText>
-      <VCardActions class="pt-3">
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
-        <VBtn v-if="workflow" color="primary" @click="editWorkflow" prepend-icon="mdi-content-save" class="px-5">
+        <VBtn
+          v-if="workflow"
+          color="primary"
+          variant="flat"
+          @click="editWorkflow"
+          prepend-icon="mdi-content-save"
+          class="px-5"
+        >
          {{ t('dialog.workflowAddEdit.confirm') }}
        </VBtn>
-        <VBtn v-else color="primary" @click="addWorkflow" prepend-icon="mdi-plus" class="px-5">
+        <VBtn v-else color="primary" variant="flat" @click="addWorkflow" prepend-icon="mdi-plus" class="px-5">
          {{ t('dialog.workflowAddEdit.confirm') }}
        </VBtn>
      </VCardActions>
--- a/src/components/dialog/WorkflowShareDialog.vue
+++ b/src/components/dialog/WorkflowShareDialog.vue
@@ -125,9 +125,17 @@ const $toast = useToast()
          </VRow>
        </VForm>
      </VCardText>
-      <VCardActions class="pt-3">
+      <VCardActions class="app-dialog-actions">
        <VSpacer />
-        <VBtn :disabled="shareDoing" @click="doShare" prepend-icon="mdi-share" class="px-5" :loading="shareDoing">
+        <VBtn
+          color="primary"
+          variant="flat"
+          :disabled="shareDoing"
+          @click="doShare"
+          prepend-icon="mdi-share"
+          class="px-5"
+          :loading="shareDoing"
+        >
          {{ t('dialog.workflowShare.confirmShare') }}
        </VBtn>
      </VCardActions>
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -706,6 +706,53 @@ html[data-theme="transparent"] .app-card-colorful,
  padding: 16px;
 }

+// 弹窗底部左右动作区：对齐插件仓库设置弹窗的按钮间距、主次样式和移动端铺排。
+.app-dialog-actions {
+  flex: 0 0 auto;
+  gap: 0.5rem;
+  padding-block: 0.75rem 1rem !important;
+  padding-inline: 1.5rem !important;
+
+  > .v-btn {
+    flex: 0 0 auto;
+  }
+
+  > .app-dialog-actions__icon-btn {
+    inline-size: 2.5rem;
+    min-inline-size: 2.5rem;
+    padding-inline: 0;
+  }
+}
+
+@media (width <= 960px) {
+  .app-dialog-actions {
+    padding-block-end: calc(0.75rem + env(safe-area-inset-bottom)) !important;
+  }
+}
+
+@media (width <= 600px) {
+  .app-dialog-actions {
+    flex-wrap: wrap;
+    padding-block: 0.75rem calc(0.75rem + env(safe-area-inset-bottom)) !important;
+    padding-inline: 1rem !important;
+
+    > .v-btn:not(.app-dialog-actions__icon-btn) {
+      flex: 1 1 9rem;
+      min-inline-size: 0;
+    }
+
+    > .app-dialog-actions__icon-btn {
+      flex: 0 0 2.75rem;
+      inline-size: 2.75rem;
+      min-inline-size: 2.75rem;
+    }
+
+    > .v-spacer {
+      display: none;
+    }
+  }
+}
+
 // 路由过渡动画
 .fade-slide-leave-active,
 .fade-slide-enter-active {
@@ -1077,6 +1124,19 @@ html[data-theme="transparent"] .app-card-colorful,
 .v-dialog--fullscreen > .v-overlay__content {
  border-radius: 0 !important;
  box-shadow: none !important;
+  display: flex;
+  inline-size: 100%;
+  inset-inline: 0 !important;
+  justify-content: center;
+  margin-inline: auto;
+}
+
+// 全屏弹窗触发后，未横向铺满的卡片仍保持居中。
+.v-dialog--fullscreen > .v-overlay__content > .v-card,
+.v-dialog--fullscreen > .v-overlay__content > .v-sheet,
+.v-dialog--fullscreen > .v-overlay__content > form {
+  margin-inline: auto;
+  max-inline-size: 100%;
 }

 .v-dialog > .v-overlay__content {
--- a/src/views/setting/AccountSettingSystem.vue
+++ b/src/views/setting/AccountSettingSystem.vue
@@ -2410,14 +2410,11 @@ watch(currentLlmSnapshotKey, (snapshotKey, previousSnapshotKey) => {
          </VWindowItem>
        </VWindow>
      </VCardText>
-      <VCardActions class="pt-3">
-        <VForm @submit.prevent="() => {}">
-          <div class="d-flex flex-wrap gap-4 mt-4">
-            <VBtn color="primary" prepend-icon="mdi-content-save" @click="saveAdvancedSettings" class="px-5">
-              {{ t('common.save') }}
-            </VBtn>
-          </div>
-        </VForm>
+      <VCardActions class="app-dialog-actions">
+        <VSpacer />
+        <VBtn color="primary" variant="flat" prepend-icon="mdi-content-save" @click="saveAdvancedSettings" class="px-5">
+          {{ t('common.save') }}
+        </VBtn>
      </VCardActions>
    </VCard>
  </VDialog>