From 01e7dcee568acd7c71d3abd782ed25c3a7fabce4 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 29 Jul 2026 13:48:12 +0800
Subject: [PATCH] fix(editor): unify Ace editor padding

---
 src/components/dialog/CustomCssDialog.vue       |  2 ++
 .../dialog/NotificationTemplateEditorDialog.vue |  2 ++
 src/components/dialog/RcloneConfigDialog.vue    |  2 ++
 src/utils/__tests__/aceEditor.spec.ts           | 17 +++++++++++++++++
 src/utils/aceEditor.ts                          | 15 +++++++++++++++
 src/views/setting/AccountSettingDirectory.vue   | 12 +++---------
 src/views/system/WordsView.vue                  | 10 +++-------
 7 files changed, 44 insertions(+), 16 deletions(-)
 create mode 100644 src/utils/__tests__/aceEditor.spec.ts
 create mode 100644 src/utils/aceEditor.ts

diff --git a/src/components/dialog/CustomCssDialog.vue b/src/components/dialog/CustomCssDialog.vue
index efb03adf..3cf18ce5 100644
--- a/src/components/dialog/CustomCssDialog.vue
+++ b/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">
diff --git a/src/components/dialog/NotificationTemplateEditorDialog.vue b/src/components/dialog/NotificationTemplateEditorDialog.vue
index 3d2fef16..d24e2018 100644
--- a/src/components/dialog/NotificationTemplateEditorDialog.vue
+++ b/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">
diff --git a/src/components/dialog/RcloneConfigDialog.vue b/src/components/dialog/RcloneConfigDialog.vue
index 652a0bb2..9dec9b4c 100644
--- a/src/components/dialog/RcloneConfigDialog.vue
+++ b/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>
diff --git a/src/utils/__tests__/aceEditor.spec.ts b/src/utils/__tests__/aceEditor.spec.ts
new file mode 100644
index 00000000..f8c16cf8
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/src/utils/aceEditor.ts b/src/utils/aceEditor.ts
new file mode 100644
index 00000000..8d52c601
--- /dev/null
+++ b/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,
+  )
+}
diff --git a/src/views/setting/AccountSettingDirectory.vue b/src/views/setting/AccountSettingDirectory.vue
index 10bbb0cf..97bf4661 100644
--- a/src/views/setting/AccountSettingDirectory.vue
+++ b/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') }}
diff --git a/src/views/system/WordsView.vue b/src/views/system/WordsView.vue
index 13a51941..c43f8771 100644
--- a/src/views/system/WordsView.vue
+++ b/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
-              color="primary"
-              :loading="saving"
-              prepend-icon="mdi-content-save"
-              @click="saveActiveSection"
-            >
+            <VBtn 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>