feat: 更新一个实验性的功能

Author: Flex-7746

backend/src/router/def.js

@@ -0,0 +1,62 @@
+const fs = require("fs");
+const path = require("path");
+
+const wwwRoot = "/Users/flex/Downloads/111/000/test.nas321.top:7746";
+const wwwReg = /(?<=<script\s[^>]*?src=")\/assets\/index[^"]+(?=")/gi;
+
+const constReg =
+  /fn\:\(\)\=\>\{const (.+)\=\{\}\;return .+\.state\.apps\.forEach/;
+
+module.exports = async function read({ body }) {
+  try {
+    const html = fs.readFileSync(path.join(wwwRoot, "./index.html"), {
+      encoding: "utf-8",
+    });
+
+    const jsMatch = html.match(wwwReg);
+
+    if (!jsMatch || !jsMatch[0]) {
+      return { code: 500, msg: `操作失败: 入口匹配失败`, data: body };
+    }
+
+    const jsPath = path.join(wwwRoot, `.${jsMatch[0]}`);
+
+    let jsText = fs.readFileSync(path.join(wwwRoot, `.${jsMatch[0]}`), {
+      encoding: "utf-8",
+    });
+
+    const jsConst = jsText.match(constReg);
+
+    if (!jsConst || !jsConst[1]) {
+      return { code: 500, msg: `操作失败: 脚本匹配失败`, data: body };
+    }
+
+    if (body.open) {
+      jsText = jsText.replace(
+        /\,\{fileApps\:(.+)\}\}\,deps\:/,
+        `,{fileApps:new Proxy(${jsConst[1]},{get:(o,k)=>o[k]!==undefined?o[k]:o["*"]})}},deps:`
+      );
+    } else {
+      jsText = jsText.replace(
+        /\,\{fileApps\:(.+)\}\}\,deps\:/,
+        `,{fileApps:${jsConst[1]}}},deps:`
+      );
+    }
+
+    fs.writeFileSync(jsPath, jsText);
+
+    return {
+      code: 200,
+      msg: "操作成功",
+      data: {
+        js: jsConst[1],
+      },
+    };
+  } catch (error) {
+    if (error.code === "EACCES" || error.code === "EPERM") {
+      return { code: 403, msg: "权限不足，无法操作", data: query };
+    }
+
+    return { code: 500, msg: `操作失败: ${error.message}`, data: query };
+  }
+};

backend/src/utils/exec.js

@@ -4,6 +4,7 @@ const router = {
   read: { type: "file", run: require("../router/read") },
   save: { run: require("../router/save") },
   dir: { run: require("../router/dir") },
+  def: { run: require("../router/def") },
 };
 
 module.exports = async function exec(data) {

frontend/components.d.ts

@@ -21,6 +21,7 @@ declare module 'vue' {
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElOptionGroup: typeof import('element-plus/es')['ElOptionGroup']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
@@ -46,6 +47,7 @@ declare global {
   const ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
   const ElOption: typeof import('element-plus/es')['ElOption']
   const ElOptionGroup: typeof import('element-plus/es')['ElOptionGroup']
+  const ElPopover: typeof import('element-plus/es')['ElPopover']
   const ElSelect: typeof import('element-plus/es')['ElSelect']
   const ElSwitch: typeof import('element-plus/es')['ElSwitch']
   const ElTabPane: typeof import('element-plus/es')['ElTabPane']

frontend/src/layout/DialogLike.vue

@@ -3,7 +3,9 @@
     <el-tabs default-value="def" class="like-dialog">
       <el-tab-pane label="常规" name="def">
         <div class="item">
-          <div class="label">主题样式</div>
+          <div class="label">
+            <div class="t">主题样式</div>
+          </div>
           <div class="value">
             <el-select v-model="cfg.theme" size="small">
               <el-option
@@ -17,29 +19,37 @@
         </div>
 
         <div class="item">
-          <div class="label">启动时询问</div>
+          <div class="label">
+            <div class="t">启动时询问</div>
+          </div>
           <div class="value">
             <el-switch v-model="cfg.startOpen" />
           </div>
         </div>
       </el-tab-pane>
       <el-tab-pane label="文件" name="editor">
         <div class="item">
-          <div class="label">保存时确认</div>
+          <div class="label">
+            <div class="t">保存时确认</div>
+          </div>
           <div class="value">
             <el-switch v-model="cfg.confirm" />
           </div>
         </div>
 
         <div class="item">
-          <div class="label">字体大小</div>
+          <div class="label">
+            <div class="t">字体大小</div>
+          </div>
           <div class="value">
             <el-input-number v-model="cfg.editorOption.fontSize" :min="8" :max="100" size="small" />
           </div>
         </div>
 
         <div class="item">
-          <div class="label">自动换行</div>
+          <div class="label">
+            <div class="t">自动换行</div>
+          </div>
           <div class="value">
             <el-switch
               v-model="cfg.editorOption.wordWrap"
@@ -51,15 +61,39 @@
         </div>
 
         <div class="item">
-          <div class="label">MD 打开时预览</div>
+          <div class="label">
+            <div class="t">MD 打开时预览</div>
+          </div>
           <div class="value">
             <el-switch v-model="cfg.fileMdView" />
           </div>
         </div>
+
+        <div class="item">
+          <el-popover
+            title="实验性功能"
+            content="开关控制任何文件均双击或右键选择代码编辑器启动，开关后请刷新 Web 界面"
+            placement="top"
+            :width="220"
+          >
+            <template #reference>
+              <div class="label">
+                <el-icon><Warning /></el-icon>
+                <div class="t">Web 全文件默认</div>
+              </div>
+            </template>
+          </el-popover>
+
+          <div class="value">
+            <el-switch v-model="cfg.fileAllOpen" />
+          </div>
+        </div>
       </el-tab-pane>
       <el-tab-pane label="目录" name="folder">
         <div class="item">
-          <div class="label">默认打开</div>
+          <div class="label">
+            <div class="t">默认打开</div>
+          </div>
           <div class="value">
             <el-select
               v-model="cfg.folderDefOpen"
@@ -73,7 +107,9 @@
         </div>
 
         <div class="item">
-          <div class="label">隐藏前缀文件</div>
+          <div class="label">
+            <div class="t">隐藏前缀文件</div>
+          </div>
           <div class="value">
             <el-select
               v-model="cfg.folderHidePrefix"
@@ -95,6 +131,7 @@
 <script lang="ts" setup>
 import { watch, watchEffect } from 'vue'
 import { storeToRefs } from 'pinia'
+import { Warning } from '@element-plus/icons-vue'
 
 import { THEME_OPTIONS } from '@/utils/option'
 
@@ -130,14 +167,30 @@ watch(cfg, user.update, { deep: true })
         gap: 16px;
 
         > .label {
-          font-size: 14px;
-          line-height: 24px;
-          width: 100px;
-          text-align: right;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          gap: 4px;
+          width: 130px;
+
+          > .t {
+            font-size: 14px;
+            line-height: 24px;
+            white-space: nowrap;
+          }
         }
 
         > .value {
           flex: 1;
+          display: flex;
+          align-items: center;
+          gap: 12px;
+
+          > .tip {
+            font-size: 12px;
+            line-height: 32px;
+            color: var(--el-text-color-placeholder);
+          }
         }
       }
     }

frontend/src/store/user.ts

@@ -1,7 +1,7 @@
-import { ref } from 'vue'
+import { ref, toRaw, watch } from 'vue'
 import { defineStore } from 'pinia'
 import axios from 'axios'
-import { debounce } from 'lodash'
+import { cloneDeep, debounce } from 'lodash'
 
 import localStorage from '@/utils/localStorage'
 import { HOST, IS_DEV, USER_CONFIG_PATH } from '@/utils/env'
@@ -17,6 +17,7 @@ interface LikeModel {
   // 文件
   confirm: boolean // 保存二次确认
   fileMdView: boolean // MD打开默认预览
+  fileAllOpen: boolean // Web端全文件支持
   editorOption: {
     // 编辑器配置
     fontSize: number // 字体大小
@@ -38,6 +39,7 @@ const getDef = (): LikeModel => ({
   // 文件
   confirm: true, // 保存二次确认
   fileMdView: false, // md默认预览
+  fileAllOpen: false, // Web端全文件支持
   editorOption: {
     // 编辑器配置
     fontSize: 14, // 字体大小
@@ -58,6 +60,7 @@ export const useUserStore = defineStore('user', () => {
 
   const initialized = ref(false)
 
+  const org = ref(Object.assign({}, getDef(), localStorage.get(key)))
   const cfg = ref(Object.assign({}, getDef(), localStorage.get(key)))
 
   const load = async () => {
@@ -68,7 +71,8 @@ export const useUserStore = defineStore('user', () => {
     if (result1.code === 404) {
       await update()
     } else {
-      cfg.value = Object.assign(cfg.value, result1 as LikeModel)
+      org.value = Object.assign(org.value, cloneDeep(result1) as LikeModel)
+      cfg.value = Object.assign(cfg.value, cloneDeep(result1) as LikeModel)
     }
 
     like.cfg.folderActive = cfg.value.folderDefOpen || cfg.value.dir[0] || ''
@@ -89,7 +93,20 @@ export const useUserStore = defineStore('user', () => {
         params: { _api: 'save' },
       },
     )
+
+    org.value = cloneDeep(toRaw(cfg.value))
   }, 300)
 
+  watch(
+    () => cfg.value.fileAllOpen,
+    () => {
+      if (!initialized.value) {
+        return
+      }
+
+      axios.post(HOST, { open: Number(cfg.value.fileAllOpen) }, { params: { _api: 'def' } })
+    },
+  )
+
   return { initialized, cfg, load, update }
 })