feat: 支持编码切换偏好设置

Author: Flex-7746

frontend/package.json

@@ -14,6 +14,7 @@
     "axios": "^1.13.2",
     "buffer": "^6.0.3",
     "element-plus": "^2.11.9",
+    "iconv-lite": "^0.7.1",
     "lodash": "^4.17.21",
     "marked": "^17.0.1",
     "monaco-editor": "^0.54.0",

frontend/pnpm-lock.yaml

@@ -21,7 +21,6 @@
           camera.open({
             path: code.path,
             value: code.value,
-            encode: code.encode,
             callback: (v) => {
               code.value = v
               user.cfg.fileCameraUseDoSave && save()
@@ -43,7 +42,7 @@
 
     <el-switch v-if="code.lang === 'markdown'" v-model="mdView" inline-prompt active-text="预览" inactive-text="源码" />
 
-    <el-select v-model="code.lang" style="width: 120px" size="small" filterable placement="top" @change="changeLang">
+    <el-select v-if="code.lang" v-model="code.lang" style="width: 120px" size="small" filterable placement="top" @change="changeLang">
       <el-option v-for="item in LANG_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
     </el-select>
 
@@ -92,8 +91,9 @@ const { code, load, save } = useCode({
 const { editorDidMount, changeLang, changeTheme, changeOption } = useEditor({ onSave: save })
 
 const changeEncode = async (v: string) => {
-  const buffer = await code.blob.arrayBuffer()
-  code.org = code.value = new TextDecoder(v).decode(buffer)
+  if (code.org === code.value || user.cfg.fileEncodeFromOrg) {
+    code.org = code.value = new TextDecoder(v).decode(code.buffer)
+  }
 }
 
 watch(

frontend/src/components/MonacoEditor.vue

@@ -1,6 +1,7 @@
 import { reactive } from 'vue'
 import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
 import axios from 'axios'
+import iconv from 'iconv-lite'
 
 import { HOST } from '@/utils/env'
 import { LANG_MAP } from '@/utils/option'
@@ -15,8 +16,8 @@ interface OptionModel {
 }
 
 interface CodeModel {
+  buffer: ArrayBuffer
   path: string
-  blob: Blob
   org: string
   value: string
   lang: string
@@ -29,8 +30,8 @@ export default function useCode(option: OptionModel) {
   // const open = useOpenStore()
 
   const code = reactive<CodeModel>({
+    buffer: new ArrayBuffer(),
     path: '',
-    blob: new Blob(),
     org: '',
     value: '',
     lang: '',
@@ -49,15 +50,15 @@ export default function useCode(option: OptionModel) {
         responseType: 'blob',
       })
 
-      const info = await getEncodeValue(data)
-
-      code.blob = data
+      code.buffer = await data.arrayBuffer()
       code.path = path
-      code.encode = info.encode
-      code.org = code.value = info.value
       code.byte = headers['x-size'] ? Number(headers['x-size']) : undefined
       code.date = headers['x-update-date'] ? dayjs(headers['x-update-date']) : undefined
 
+      const info = getEncodeValue(code.buffer)
+      code.encode = info.encode
+      code.org = code.value = info.value
+
       // if (await isBinaryContent(data)) {
       //   option.onError('不支持二进制文件的编辑')
       //   open.removeHistory(path)
@@ -118,6 +119,7 @@ export default function useCode(option: OptionModel) {
         code.date = dayjs(value.data.time)
 
         code.org = code.value
+        code.buffer = iconv.encode(code.value, code.encode)
 
         option.onSave()
       } else {

frontend/src/hooks/useCode.ts

@@ -121,11 +121,27 @@
             <el-switch v-model="cfg.fileCameraUseDoSave" />
           </div>
         </div>
+
+        <div class="item">
+          <div class="label">
+            <el-popover placement="top" :width="200">
+              <template #reference>
+                <el-icon><Warning /></el-icon>
+              </template>
+              <div>未编辑时切换编码将正常切换；编辑后切换编码将不会触发，保存时以切换后的编码保存。</div>
+              <div>启用此配置后，编辑后切换编码将忽略编辑内容直接从未编辑状态切换编码。</div>
+            </el-popover>
+            <div class="t">切换编码忽略编辑</div>
+          </div>
+          <div class="value">
+            <el-switch v-model="cfg.fileEncodeFromOrg" />
+          </div>
+        </div>
       </el-tab-pane>
       <el-tab-pane label="目录" name="folder">
         <div class="item">
           <div class="label">
-            <el-popover content="选择后，启动时将自动打开该目录" placement="top" :width="150">
+            <el-popover content="选择后，启动时将自动打开该目录" placement="top" :width="200">
               <template #reference>
                 <el-icon><Warning /></el-icon>
               </template>

frontend/src/layout/DialogLike.vue

@@ -14,6 +14,7 @@
           </template>
 
           <ViewBox
+            ref="editorRef"
             :value="item"
             @next="item.wait = false"
             @diff="
@@ -38,6 +39,7 @@
       </el-tabs>
 
       <el-button
+        v-show="editorRef[editor.index]?.isEditor()"
         size="small"
         class="save"
         v-bind="editor.view[editor.index]?.diff ? { type: 'primary' } : { disabled: true }"
@@ -66,7 +68,7 @@ const editor = useEditorStore()
 
 const { active } = storeToRefs(editor)
 
-const editorRef = ref<{ save: () => void }[]>([])
+const editorRef = ref<{ isEditor: () => boolean; save: () => void }[]>([])
 
 watch(
   () => active.value,

frontend/src/layout/ViewRight/RightBox.vue

@@ -35,6 +35,13 @@ import type { ViewModel as EditorViewModel } from '@/store/editor'
 const $props = defineProps<{ value: EditorViewModel }>()
 const $emit = defineEmits<{ next: []; diff: [v: boolean] }>()
 
+defineExpose({
+  isEditor: () => !!editorRef.value,
+  save: () => editorRef.value?.save(),
+})
+
+const editorRef = ref<{ save: () => void }>()
+
 const error = ref('')
 const fileType = computed(() => FILE_MAP[getFileSuffix($props.value.path)])
 const isBinaryFile = computed(() => fileType.value && !['img', 'pdf'].includes(fileType.value))

frontend/src/layout/ViewRight/ViewBox.vue

@@ -19,7 +19,6 @@ interface ValueModel {
 interface OpenModel {
   path: string
   value: string
-  encode: string
   callback?: (v: string) => void
 }
 
@@ -34,7 +33,7 @@ export const useCameraStore = defineStore('camera', () => {
 
   const data = ref<ValueModel[]>([])
 
-  const open = (opt: { path: string; value: string; encode: string; callback?: (v: string) => void }) => {
+  const open = (opt: { path: string; value: string; callback?: (v: string) => void }) => {
     option.value = opt
     show.value = true
     load()
@@ -76,9 +75,9 @@ export const useCameraStore = defineStore('camera', () => {
     await axios.post(
       HOST,
       {
-        encode: option.value.encode,
-        value: option.value.value,
         path: filePath,
+        value: option.value.value,
+        encode: 'utf-8',
         force: 1,
       },
       { params: { _api: 'save' } },

frontend/src/store/camera.ts

@@ -21,7 +21,7 @@ interface LikeModel {
   fileBigWait: number // 多大文件暂停加载，0为不启用
   fileCameraUseConfirm: boolean // 切换快照时询问
   fileCameraUseDoSave: boolean // 切换快照立即保存
-  fileEncodeFrom: 'org' | 'value' // 切换编码从何处选择
+  fileEncodeFromOrg: boolean // 切换编码忽略编辑
   editorOption: {
     // 编辑器配置
     fontSize: number // 字体大小
@@ -52,7 +52,7 @@ const getDef = (): LikeModel => ({
   fileBigWait: 50 * 1024 * 1024, // 多大文件暂停加载，0为不启用，默认50M
   fileCameraUseConfirm: true, // 切换快照时询问
   fileCameraUseDoSave: false, // 切换快照立即保存
-  fileEncodeFrom: 'org', // 切换编码从何处选择
+  fileEncodeFromOrg: false, // 切换编码忽略编辑
   editorOption: {
     // 编辑器配置
     fontSize: 14, // 字体大小

frontend/src/store/user.ts

@@ -43,9 +43,8 @@ export const getKey = (path: string) =>
     .join('-')
     .replace(/\./g, '_')
 
-export const getEncodeValue = async (blob: Blob) => {
+export const getEncodeValue = (buffer: ArrayBuffer) => {
   const encode: string[] = []
-  const buffer = await blob.arrayBuffer()
 
   for (const item of ENCODING_OPTIONS) {
     try {
@@ -70,36 +69,3 @@ export const getEncodeValue = async (blob: Blob) => {
 
   return { encode: encode[0] || 'utf8', value: new TextDecoder(encode[0] || 'utf8').decode(buffer) }
 }
-
-export const isBinaryContent = async (blob: Blob) => {
-  const slice = blob.slice(0, 1024)
-  const arrayBuffer = await slice.arrayBuffer()
-  const bytes = new Uint8Array(arrayBuffer)
-
-  let suspiciousBytes = 0
-  const totalBytes = bytes.length
-
-  // 空文件视为文本文件
-  if (totalBytes === 0) return false
-
-  // 检查是否有 null 字节（文本文件中罕见）
-  if (bytes.includes(0)) return true
-
-  // 统计非 ASCII 字符
-  for (let i = 0; i < totalBytes; i++) {
-    const byte = bytes[i]
-
-    // ASCII 控制字符（除了常见的制表符、换行符等）
-    if (byte && byte < 32 && byte !== 9 && byte !== 10 && byte !== 13) {
-      suspiciousBytes++
-    }
-
-    // 如果超过一定比例的非文本字符，则认为是二进制
-    if (i > 100 && suspiciousBytes / i > 0.3) {
-      return true
-    }
-  }
-
-  // 如果有很多可疑字节，认为是二进制
-  return suspiciousBytes / totalBytes > 0.1
-}