feat: 支持多文件打开

Author: Flex-7746

frontend/components.d.ts

@@ -18,6 +18,9 @@ declare module 'vue' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     MonacoEditor: typeof import('./src/components/MonacoEditor.vue')['default']
   }
 }
@@ -30,5 +33,8 @@ declare global {
   const ElOption: typeof import('element-plus/es')['ElOption']
   const ElSelect: typeof import('element-plus/es')['ElSelect']
   const ElSwitch: typeof import('element-plus/es')['ElSwitch']
+  const ElTabPane: typeof import('element-plus/es')['ElTabPane']
+  const ElTabs: typeof import('element-plus/es')['ElTabs']
+  const ElTooltip: typeof import('element-plus/es')['ElTooltip']
   const MonacoEditor: typeof import('./src/components/MonacoEditor.vue')['default']
 }

frontend/src/App.vue

@@ -1,12 +1,27 @@
 <template>
-  <MonacoEditor
-    v-if="defInfo.path"
-    :key="defInfo.path"
-    :path="defInfo.path"
-    :like="like"
-    @like="open = !open"
-    @reset="inputPath"
-  />
+  <el-tabs
+    class="view"
+    v-model="active"
+    type="card"
+    addable
+    :closable="view.length > 1"
+    @edit="viewEdit"
+  >
+    <el-tab-pane v-for="item in view" :key="item.path" :name="item.path">
+      <template #label>
+        <el-tooltip :content="item.path">
+          <div>{{ item.path.split('/').pop() }}</div>
+        </el-tooltip>
+      </template>
+
+      <MonacoEditor
+        :path="item.path"
+        :like="like"
+        @like="() => (open = !open)"
+        @diff="(v) => (item.diff = v)"
+      />
+    </el-tab-pane>
+  </el-tabs>
 
   <el-dialog v-model="open" title="偏好设置" width="300">
     <div class="like-dialog">
@@ -52,115 +67,62 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, reactive } from 'vue'
-import { ElMessageBox } from 'element-plus'
-
 import MonacoEditor from './components/MonacoEditor.vue'
 
 import { THEME_OPTIONS } from '@/utils/option'
 
 import useLike from '@/hooks/useLike'
+import usePath from '@/hooks/usePath'
 
 const { open, like, resetLike } = useLike()
+const { view, active, add, remove } = usePath()
 
-const defInfo = reactive({ path: '' })
-
-onBeforeMount(() => {
-  const query = new URLSearchParams(window.location.search).get('path') || ''
-  if (query) {
-    defInfo.path = query
+const viewEdit = (v: string, action: 'remove' | 'add') => {
+  if (action === 'add') {
+    add()
   } else {
-    inputPath(true)
+    remove(v)
   }
-})
-
-const inputPath = async (force?: boolean) => {
-  return await ElMessageBox.prompt(
-    '部分文件可在文件管理中双击文件进行编辑，详见应用介绍',
-    '请输入文件路径',
-    {
-      showClose: false,
-      closeOnClickModal: false,
-      closeOnPressEscape: false,
-      closeOnHashChange: false,
-      showCancelButton: !force,
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-    },
-  ).then(({ value }) => {
-    if (value) {
-      defInfo.path = value
-    }
-  })
 }
 </script>
 
 <style lang="scss">
 html,
 body,
 #app {
+  position: relative;
   height: 100%;
-}
-
-html {
-  &.dark {
-    #app {
-      > .header,
-      > .footer {
-        background-color: #1c1c1c;
-      }
-    }
-  }
-}
-
-#app {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
 
-  > .header,
-  > .footer {
-    height: 32px;
+  > .view {
+    height: 100%;
     display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 0 12px;
+    flex-direction: column;
 
-    > * {
+    > .el-tabs__header {
+      height: 40px;
+      padding-right: 56px;
       margin: 0;
-    }
-  }
-
-  > .header {
-    border-bottom: solid 1px var(--el-border-color);
 
-    > .title {
-      font-size: 14px;
-      line-height: 32px;
-      color: var(--el-text-color-primary);
-    }
-  }
-
-  > .footer {
-    border-top: solid 1px var(--el-border-color);
+      .el-tabs__nav {
+        border-top: none;
+        border-radius: 0;
+      }
 
-    > .developed {
-      font-size: 12px;
-      line-height: 32px;
-      color: var(--el-text-color-placeholder);
+      .el-tabs__new-tab {
+        width: 22px;
+        height: 22px;
+      }
     }
-  }
 
-  > .editor {
-    position: relative;
-    flex: 1;
+    > .el-tabs__content {
+      flex: 1;
 
-    > .content {
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      width: 100%;
+      > .el-tab-pane {
+        position: relative;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
     }
   }
 }

frontend/src/components/MonacoEditor.vue

@@ -1,26 +1,12 @@
 <template>
-  <div class="header">
-    <div class="title">{{ $props.path }}</div>
-
-    <el-button size="small" @click="$emit('reset')">切换文件</el-button>
-
-    <div style="flex: 1"></div>
-
-    <el-button size="small" @click="$emit('like')">偏好</el-button>
-
-    <el-button size="small" :disabled="code.value === code.org" @click="save()">保存</el-button>
-  </div>
-
-  <div class="editor">
-    <div class="content" v-if="code.lang">
-      <MonacoEditor
-        v-model:value="code.value"
-        :language="code.lang"
-        :theme="like.theme"
-        :options="{ fontSize: 14, automaticLayout: true }"
-        @editorDidMount="editorDidMount"
-      />
-    </div>
+  <div v-if="code.lang" style="flex: 1">
+    <MonacoEditor
+      v-model:value="code.value"
+      :language="code.lang"
+      :theme="like.theme"
+      :options="{ fontSize: 14, automaticLayout: true }"
+      @editorDidMount="editorDidMount"
+    />
   </div>
 
   <div class="footer">
@@ -59,13 +45,16 @@
         :value="item.value"
       />
     </el-select>
+
+    <el-button size="small" :icon="Setting" @click="$emit('like')"></el-button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { reactive, watch } from 'vue'
 import MonacoEditor from 'monaco-editor-vue3'
 import * as iconv from 'iconv-lite'
+import { Setting } from '@element-plus/icons-vue'
 
 import { LANG_OPTIONS, ENCODING_OPTIONS } from '@/utils/option'
 
@@ -74,7 +63,26 @@ import useCode from '../hooks/useCode'
 import useEditor from '../hooks/useEditor'
 
 const $props = defineProps<{ path: string; like: LikeModel }>()
-const $emit = defineEmits<{ like: []; reset: [] }>()
+const $emit = defineEmits<{ like: []; diff: [v: boolean] }>()
+
+defineExpose({
+  save: () => save(),
+})
+
+const editorLike = reactive({ ...$props.like })
+
+const { code, save } = useCode({
+  path: $props.path,
+  confirm: () => editorLike.confirm,
+  onSave: () => $emit('diff', false),
+})
+
+const { editorDidMount, changeLang, changeTheme, changeSize } = useEditor({ onSave: save })
+
+const changeEncode = async (v: string) => {
+  const buffer = await code.blob.arrayBuffer()
+  code.org = code.value = iconv.decode(new Uint8Array(buffer), v)
+}
 
 watch(
   () => $props.like.confirm,
@@ -96,15 +104,32 @@ watch(
     changeSize(v)
   },
 )
+watch(
+  () => code.value,
+  (v) => {
+    $emit('diff', v !== code.org)
+  },
+)
+</script>
 
-const editorLike = reactive({ ...$props.like })
-
-const { code, save } = useCode({ path: $props.path, confirm: () => editorLike.confirm })
-
-const { editorDidMount, changeLang, changeTheme, changeSize } = useEditor({ onSave: save })
-
-const changeEncode = async (v: string) => {
-  const buffer = await code.blob.arrayBuffer()
-  code.org = code.value = iconv.decode(new Uint8Array(buffer), v)
+<style lang="scss" scoped>
+.footer {
+  height: 32px;
+  border-top: solid 1px var(--el-border-color);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 4px;
+  background-color: var(--el-bg-color);
+
+  > * {
+    margin: 0;
+  }
+
+  > .developed {
+    font-size: 12px;
+    line-height: 32px;
+    color: var(--el-text-color-placeholder);
+  }
 }
-</script>
+</style>

frontend/src/hooks/useCode.ts

@@ -13,7 +13,11 @@ interface CodeModel {
   encode: string
 }
 
-export default function useCode(option: { path: string; confirm: () => boolean }) {
+export default function useCode(option: {
+  path: string
+  confirm: () => boolean
+  onSave: () => void
+}) {
   const code = reactive<CodeModel>({ blob: [], org: '', value: '', lang: '', encode: 'utf8' })
 
   const load = async (path: string) => {
@@ -78,6 +82,8 @@ export default function useCode(option: { path: string; confirm: () => boolean }
         ElMessage({ type: 'success', message: '操作成功' })
 
         code.org = code.value
+
+        option.onSave()
       } else {
         ElMessage({ type: 'error', message: value.msg })
       }