feat: 新增编辑器左右边距配置

lang/index.js

@@ -1,5 +1,5 @@
 
-    // 导入国际化JSON文件
+    // 导入国际化JSON文件（合并模式）
     import langJSON from './index.json'
     (function () {
     // 定义翻译函数
@@ -43,7 +43,7 @@
     globalThis.$t = globalThis.$t || $t;
     // 将简单翻译函数挂载到globalThis对象上
     globalThis.$$t = $$t;
-    // 定义从JSON文件中获取指定键的语言对象的方法
+    // 定义从JSON文件中获取指定键的语言对象的方法（合并模式）
     globalThis._getJSONKey = function (key, insertJSONObj = undefined) {
         // 获取JSON对象
         const JSONObj = insertJSONObj;

lang/index.json

@@ -2182,5 +2182,141 @@
     "ru": "",
     "en": "",
     "fr": ""
+  },
+  "eae82": {
+    "zh-cn": "其他",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "5d6g4k6": {
+    "zh-cn": "编辑器内边距",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "7xnwd2f": {
+    "zh-cn": " 配置编辑器内容区域的内边距 ",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "j5j5y58": {
+    "zh-cn": " 预览内容区域 ",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "7puh5l7": {
+    "zh-cn": " 内边距设置 ",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "xm43kg11": {
+    "zh-cn": " 设置编辑器内容区域的内边距，支持 CSS 单位（如 px、rem、%） ",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "cn2q13": {
+    "zh-cn": "内边距",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "dfykg38": {
+    "zh-cn": "例如: 20px",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "rm0wns6": {
+    "zh-cn": " 当前值: ",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "ok35ur7": {
+    "zh-cn": "编辑器其他设置",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "qiczjwb": {
+    "zh-cn": " 配置编辑器其他设置 ",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "btd1wc4": {
+    "zh-cn": "外观设置",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "oauiif9": {
+    "zh-cn": "编辑器其他外观设置",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "u5f2sod": {
+    "zh-cn": " 配置编辑器其他外观设置 ",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "2j8e0g5": {
+    "zh-cn": "请输入数字",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "rt9pmq7": {
+    "zh-cn": "内边距(PX)",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "3o81my8": {
+    "zh-cn": "左右边距(PX)",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
   }
 }

src/hooks/useConfig.ts

@@ -10,16 +10,19 @@ interface AppConfig extends Record<string, any> {
     family: FontConfig
     size: FontSizeConfig
   }
-
+  other: {
+    editorPadding: string
+  }
 }
 
 const defaultConfig: AppConfig = {
   font: {
     family: defaultFontConfig,
     size: defaultFontSizeConfig,
   },
-
-  // ...后续接入其他配置
+  other: {
+    editorPadding: '120px',
+  },
 }
 
 const config = useStorage<AppConfig>('milkup-config', defaultConfig, localStorage, {

src/hooks/useContext.ts

@@ -3,6 +3,7 @@ import emitter from '../renderer/events'
 import useContent from './useContent'
 import useFile from './useFile'
 import useFont from './useFont'
+import useOtherConfig from './useOtherConfig'
 import { isShowOutline } from './useOutline'
 import { useSaveConfirmDialog } from './useSaveConfirmDialog'
 import useSourceCode from './useSourceCode'
@@ -18,18 +19,17 @@ export function useContext() {
   const { markdown, originalContent } = useContent()
   const { currentTheme, init: initTheme } = useTheme()
   const { init: initFont, currentFont } = useFont()
+  const { init: initOtherConfig } = useOtherConfig()
   const { isShowSource } = useSourceCode()
   const { isDialogVisible, dialogType, fileName, tabName, showDialog, showOverwriteDialog, showFileChangedDialog, handleSave, handleDiscard, handleCancel, handleOverwrite } = useSaveConfirmDialog()
   const { isDialogVisible: isUpdateDialogVisible, showDialog: showUpdateDialog, hideDialog: hideUpdateDialog, handleIgnore, handleLater, handleUpdate } = useUpdateDialog()
   const { onSave } = useFile()
   const { close, switchToTab, saveCurrentTab, activeTabId, getUnsavedTabs, shouldOffsetTabBar, currentTab } = useTab()
 
-  // 初始化spell check
-  useSpellCheck()
-
-  // 初始化主题和字体
-  initTheme()
-  initFont()
+  useSpellCheck()// spell check
+  initTheme()// 主题
+  initFont()// 字体
+  initOtherConfig()// 其他配置
 
   // 响应式状态
   const isShowEditors = ref(true)

src/hooks/useOtherConfig.ts

@@ -0,0 +1,50 @@
+import { computed, nextTick } from 'vue'
+import { useConfig } from './useConfig'
+
+// 编辑器内边距 CSS 变量
+const EDITOR_PADDING_CSS_VAR = '--milkup-editor-padding'
+
+// 获取配置管理实例
+const { config, getConf, setConf } = useConfig()
+
+// 当前其他配置（直接使用响应式的 config）
+const currentOtherConfig = computed(() => config.value.other)
+
+// 当前编辑器内边距
+const currentEditorPadding = computed(() => currentOtherConfig.value.editorPadding)
+
+// 初始化配置
+function init() {
+  // 应用当前编辑器内边距配置到 DOM
+  const editorPadding = getConf('other').editorPadding
+  console.log(editorPadding)
+
+  applyEditorPadding(editorPadding)
+}
+
+// 设置编辑器内边距
+function setEditorPadding(padding: string) {
+  setConf('other', 'editorPadding', padding)
+  applyEditorPadding(padding)
+}
+
+// 应用编辑器内边距
+function applyEditorPadding(padding: string) {
+  nextTick(() => {
+    const fontRootElement = document.querySelector('#fontRoot') as HTMLElement
+
+    if (!fontRootElement)
+      return
+
+    fontRootElement.style.setProperty(EDITOR_PADDING_CSS_VAR, padding)
+  })
+}
+
+export default function useOtherConfig() {
+  return {
+    currentEditorPadding,
+    currentOtherConfig,
+    init,
+    setEditorPadding,
+  }
+}

src/renderer/components/AppearancePage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import FontPage from './FontPage.vue'
+import OtherSetting from './OtherSetting.vue'
 import ThemePage from './ThemePage.vue'
 </script>
 
@@ -19,6 +20,14 @@ import ThemePage from './ThemePage.vue'
         <FontPage />
       </div>
     </div>
+
+    <div class="appearance-item">
+      <h2>其他</h2>
+
+      <div class="appearance-item-content">
+        <OtherSetting />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -37,8 +46,6 @@ import ThemePage from './ThemePage.vue'
         display: flex;
         flex-direction: column;
         gap: 10px;
-
-        .appearance-item-content {}
     }
 }
 </style>