fix(editor): unify Ace editor padding

src/components/dialog/CustomCssDialog.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useDisplay } from 'vuetify'
 import { useI18n } from 'vue-i18n'
+import { configureAceEditorPadding } from '@/utils/aceEditor'
 
 // 国际化
 const { t } = useI18n()
@@ -84,6 +85,7 @@ function submitCustomCSS() {
           :options="editorOptions"
           wrap
           class="custom-css-editor"
+          @init="configureAceEditorPadding"
         />
       </div>
       <VCardActions class="app-dialog-actions custom-css-actions">

src/components/dialog/NotificationTemplateEditorDialog.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useDisplay } from 'vuetify'
 import { useI18n } from 'vue-i18n'
+import { configureAceEditorPadding } from '@/utils/aceEditor'
 
 const { t } = useI18n()
 const display = useDisplay()
@@ -90,6 +91,7 @@ function submitTemplate() {
           :options="editorOptions"
           wrap
           class="template-ace-editor"
+          @init="configureAceEditorPadding"
         />
       </div>
       <VCardActions class="app-dialog-actions template-editor-actions">

src/components/dialog/RcloneConfigDialog.vue

@@ -2,6 +2,7 @@
 import api from '@/api'
 import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'
+import { configureAceEditorPadding } from '@/utils/aceEditor'
 
 // 显示器宽度
 const display = useDisplay()
@@ -84,6 +85,7 @@ async function handleReset() {
               lang="ini"
               theme="monokai"
               class="rounded h-full min-h-[30rem]"
+              @init="configureAceEditorPadding"
             >
             </VAceEditor>
           </VCol>

src/utils/__tests__/aceEditor.spec.ts

@@ -0,0 +1,17 @@
+import { configureAceEditorPadding } from '@/utils/aceEditor'
+import { describe, expect, it, vi } from 'vitest'
+
+describe('Ace editor configuration', () => {
+  it('applies the shared content padding and scroll margin', () => {
+    const setPadding = vi.fn()
+    const setScrollMargin = vi.fn()
+    const editor = {
+      renderer: { setPadding, setScrollMargin },
+    } as unknown as Parameters<typeof configureAceEditorPadding>[0]
+
+    configureAceEditorPadding(editor)
+
+    expect(setPadding).toHaveBeenCalledWith(12)
+    expect(setScrollMargin).toHaveBeenCalledWith(8, 8, 0, 0)
+  })
+})

src/utils/aceEditor.ts

@@ -0,0 +1,15 @@
+import type { Ace } from 'ace-builds'
+
+const ACE_EDITOR_PADDING = 12
+const ACE_EDITOR_SCROLL_MARGIN = { bottom: 8, left: 0, right: 0, top: 8 }
+
+/** 让所有 Ace 编辑器的文本内容与普通输入框保持一致的内边距和滚动留白。 */
+export function configureAceEditorPadding(editor: Ace.Editor) {
+  editor.renderer.setPadding(ACE_EDITOR_PADDING)
+  editor.renderer.setScrollMargin(
+    ACE_EDITOR_SCROLL_MARGIN.top,
+    ACE_EDITOR_SCROLL_MARGIN.bottom,
+    ACE_EDITOR_SCROLL_MARGIN.left,
+    ACE_EDITOR_SCROLL_MARGIN.right,
+  )
+}

src/views/setting/AccountSettingDirectory.vue

@@ -10,7 +10,7 @@ import { useTheme } from 'vuetify'
 import { storageAttributes } from '@/api/constants'
 import { useSilentSettingRefresh } from '@/composables/useSilentSettingRefresh'
 import { openSharedDialog } from '@/composables/useSharedDialog'
-import type { Ace } from 'ace-builds'
+import { configureAceEditorPadding } from '@/utils/aceEditor'
 
 const { t } = useI18n()
 const { global: globalTheme } = useTheme()
@@ -77,12 +77,6 @@ const renameEditorOptions = {
   showGutter: true,
 }
 
-// Ace 的文本层为绝对定位，容器 padding 不会作用于内容，这里通过 renderer 补齐内边距。
-function handleRenameEditorInit(editor: Ace.Editor) {
-  editor.renderer.setPadding(12)
-  editor.renderer.setScrollMargin(8, 8, 0, 0)
-}
-
 // 打开共享分类编辑弹窗，保存后刷新本页分类配置。
 function openCategoryDialog() {
   openSharedDialog(
@@ -417,7 +411,7 @@ useSilentSettingRefresh(loadPageData, {
                   :max-lines="12"
                   wrap
                   class="rename-format-editor__ace"
-                  @init="handleRenameEditorInit"
+                  @init="configureAceEditorPadding"
                 />
                 <div class="rename-format-editor__hint">
                   {{ t('setting.directory.movieRenameFormatHint') }}
@@ -440,7 +434,7 @@ useSilentSettingRefresh(loadPageData, {
                   :max-lines="12"
                   wrap
                   class="rename-format-editor__ace"
-                  @init="handleRenameEditorInit"
+                  @init="configureAceEditorPadding"
                 />
                 <div class="rename-format-editor__hint">
                   {{ t('setting.directory.tvRenameFormatHint') }}

src/views/system/WordsView.vue

@@ -3,6 +3,7 @@ import { useToast } from 'vue-toastification'
 import api from '@/api'
 import { useI18n } from 'vue-i18n'
 import { useTheme } from 'vuetify'
+import { configureAceEditorPadding } from '@/utils/aceEditor'
 
 const Draggable = defineAsyncComponent(() => import('vuedraggable').then(module => module.default))
 
@@ -534,6 +535,7 @@ onMounted(() => {
               :print-margin="false"
               wrap
               class="words-text-editor"
+              @init="configureAceEditorPadding"
             />
             <VTextarea
               v-else
@@ -671,12 +673,7 @@ onMounted(() => {
             >
               {{ t('common.reset') }}
             </VBtn>
-            <VBtn
+            <VBtn color="primary" :loading="saving" prepend-icon="mdi-content-save" @click="saveActiveSection">
-              color="primary"
-              :loading="saving"
-              prepend-icon="mdi-content-save"
-              @click="saveActiveSection"
-            >
               {{ t('setting.words.saveChanges') }}
             </VBtn>
           </div>
@@ -1329,6 +1326,5 @@ onMounted(() => {
   .words-editor-footer {
     padding-inline: 1rem;
   }
-
 }
 </style>