feat: 开启文件支持历史记录

Author: Flex-7746

frontend/components.d.ts

@@ -15,14 +15,17 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     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']
+    LikeDialog: typeof import('./src/components/LikeDialog.vue')['default']
     MonacoEditor: typeof import('./src/components/MonacoEditor.vue')['default']
+    PathDialog: typeof import('./src/components/PathDialog.vue')['default']
   }
 }
 
@@ -31,12 +34,15 @@ declare global {
   const ElButton: typeof import('element-plus/es')['ElButton']
   const ElDialog: typeof import('element-plus/es')['ElDialog']
   const ElIcon: typeof import('element-plus/es')['ElIcon']
+  const ElInput: typeof import('element-plus/es')['ElInput']
   const ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
   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 LikeDialog: typeof import('./src/components/LikeDialog.vue')['default']
   const MonacoEditor: typeof import('./src/components/MonacoEditor.vue')['default']
+  const PathDialog: typeof import('./src/components/PathDialog.vue')['default']
 }

frontend/src/App.vue

@@ -20,7 +20,7 @@
 
     <el-tab-pane :name="-1" disabled>
       <template #label>
-        <div class="add" @click="add()">
+        <div class="add" @click="() => (pathOpen = true)">
           <el-icon><Plus /></el-icon>
         </div>
       </template>
@@ -37,6 +37,8 @@
   </el-button>
 
   <LikeDialog v-model:open="likeOpen" v-model:like="like" @reset="resetLike()" />
+
+  <PathDialog v-model:open="pathOpen" :history="history.value" @open="add" />
 </template>
 
 <script setup lang="ts">
@@ -45,12 +47,13 @@ import { Plus } from '@element-plus/icons-vue'
 
 import MonacoEditor from '@/components/MonacoEditor.vue'
 import LikeDialog from '@/components/LikeDialog.vue'
+import PathDialog from '@/components/PathDialog.vue'
 
 import useLike from '@/hooks/useLike'
 import usePath from '@/hooks/usePath'
 
 const { open: likeOpen, like, resetLike } = useLike()
-const { view, active, add, remove } = usePath()
+const { open: pathOpen, view, active, add, remove, history } = usePath()
 
 const editorRef = ref<any[]>([])
 </script>

frontend/src/components/LikeDialog.vue

@@ -36,7 +36,7 @@
 
         <div style="flex: 1"></div>
 
-        <div style="font-size: 12px; color: #999">修改实时生效，且进行缓存</div>
+        <div style="font-size: 12px; color: var(--el-text-color-placeholder)">修改实时生效，且进行缓存</div>
       </div>
     </template>
   </el-dialog>

frontend/src/components/PathDialog.vue

@@ -0,0 +1,80 @@
+<template>
+  <el-dialog v-model="open" title="打开" width="500">
+    <div class="path-dialog">
+      <div class="open">
+        <div class="title">文件</div>
+
+        <el-input v-model="input" placeholder="请输入文件路径（不存在的文件编辑后可直接新增）">
+          <template #append>
+            <el-button @click="openPath">确认</el-button>
+          </template>
+        </el-input>
+      </div>
+
+      <div class="history">
+        <div class="title">历史记录</div>
+        <div class="list" v-if="history.length">
+          <div class="item" v-for="item in history" :key="item.path">
+            <div class="i" @click="emit('open', item.path)">{{ item.path }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+defineProps<{ history: { path: string }[] }>()
+
+const emit = defineEmits<{ (e: 'open', v: string): void }>()
+
+const open = defineModel('open')
+
+const input = ref('')
+
+const openPath = () => {
+  emit('open', input.value)
+  input.value = ''
+}
+</script>
+
+<style lang="scss" scoped>
+.path-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  > div {
+    > .title {
+      font-size: 12px;
+      margin-bottom: 12px;
+      color: var(--el-text-color-placeholder);
+    }
+  }
+
+  > .history {
+    > .list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      height: 200px;
+      overflow: auto;
+
+      > .item {
+        display: flex;
+        align-items: center;
+
+        > .i {
+          cursor: pointer;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

frontend/src/hooks/useHistory.ts

@@ -0,0 +1,38 @@
+import { reactive, watch } from 'vue'
+
+import localStorage from '@/utils/localStorage'
+
+export default function usePath<T>(opt: { key: string; id: keyof T }) {
+  const value = reactive<T[]>(localStorage.get<T[]>(opt.key) || [])
+
+  const add = (val: T) => {
+    if (!val) {
+      return
+    }
+
+    remove(val)
+    ;(value as T[]).unshift(val)
+  }
+
+  const remove = (val: T) => {
+    if (!val) {
+      return
+    }
+
+    const index = value.findIndex((i) => (i as T)[opt.id] === val[opt.id])
+
+    if (index > -1) {
+      value.splice(index, 1)
+    }
+  }
+
+  watch(
+    () => value,
+    (v) => {
+      localStorage.set(opt.key, v)
+    },
+    { deep: true },
+  )
+
+  return { value, add, remove }
+}

frontend/src/hooks/usePath.ts

@@ -1,45 +1,36 @@
 import { ElMessageBox } from 'element-plus'
 import { onMounted, reactive, ref } from 'vue'
 
+import useHistory from '@/hooks/useHistory'
+
 export default function usePath() {
+  const open = ref(false)
   const view = reactive<{ path: string; diff: boolean }[]>([])
   const active = ref(0)
 
+  const history = useHistory<{ path: string }>({ key: 'PATH_HISTORY', id: 'path' })
+
   onMounted(async () => {
     const query = new URLSearchParams(window.location.search).get('path') || ''
     if (query) {
-      view.push({ path: query, diff: false })
+      add(query)
     } else {
-      add(true)
+      open.value = true
     }
   })
 
-  const add = async (force?: boolean) => {
-    const value = await ElMessageBox.prompt(
-      '部分文件可在文件管理中双击文件进行编辑，详见应用介绍',
-      '请输入文件路径',
-      {
-        showClose: false,
-        closeOnClickModal: false,
-        closeOnPressEscape: false,
-        closeOnHashChange: false,
-        showCancelButton: !force,
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        inputPlaceholder: '不存在的文件路径在编辑后可新增并保存',
-      },
-    )
-      .then(({ value }) => value)
-      .catch(() => '')
-
-    if (value) {
-      const index = view.findIndex((i) => i.path === value)
+  const add = async (path: string) => {
+    if (path) {
+      const index = view.findIndex((i) => i.path === path)
       if (index > -1) {
         active.value = index
       } else {
-        active.value = view.push({ path: value, diff: false }) - 1
+        active.value = view.push({ path, diff: false }) - 1
       }
+      history.add({ path })
     }
+
+    open.value = false
   }
 
   const remove = async (index: number) => {
@@ -67,5 +58,5 @@ export default function usePath() {
     }
   }
 
-  return { view, active, add, remove }
+  return { open, view, active, history, add, remove }
 }