feat: 支持在目录下创建文件

Author: Flex-7746

frontend/package-lock.json

@@ -28,7 +28,7 @@
           <template v-if="open.history.length">
             <div class="title">
               <div class="t">历史记录</div>
-              <el-button size="small" @click="open.clearHistory()">清除全部</el-button>
+              <el-button size="small" @click="open.clearHistory()">清空记录</el-button>
             </div>
 
             <div class="list">

frontend/src/layout/DialogOpen.vue

@@ -3,7 +3,9 @@
     <div class="head">
       <div class="title">目录</div>
 
-      <el-icon class="icon" @click="openDir()"><Files /></el-icon>
+      <el-tooltip content="切换目录" placement="bottom">
+        <el-icon class="icon" @click="openDir()"><Files /></el-icon>
+      </el-tooltip>
     </div>
 
     <div class="content">
@@ -21,7 +23,7 @@
             <div class="node-item">
               <div class="icon">
                 <el-icon v-if="data.dir" size="18">
-                  <Refresh v-if="node.expanded" @click.stop="refreshNode(node)" />
+                  <FolderOpened v-if="node.expanded" />
                   <Folder v-else />
                 </el-icon>
 
@@ -31,6 +33,16 @@
               <div class="text">
                 <div class="t">{{ node.label }}</div>
               </div>
+
+              <div class="edit" v-show="data.dir && node.expanded">
+                <el-tooltip content="刷新目录" placement="top">
+                  <el-icon @click.stop="refreshNode(node)"><Refresh /></el-icon>
+                </el-tooltip>
+
+                <el-tooltip content="创建文件" placement="top">
+                  <el-icon @click.stop="addFile(node)"><DocumentAdd /></el-icon>
+                </el-tooltip>
+              </div>
             </div>
           </template>
         </el-tree>
@@ -42,7 +54,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import axios from 'axios'
-import { Files, Folder, Refresh } from '@element-plus/icons-vue'
+import { ElMessageBox } from 'element-plus'
+import { Files, Folder, FolderOpened, Refresh, DocumentAdd } from '@element-plus/icons-vue'
 
 import FileView from '@/components/FileView.vue'
 
@@ -52,7 +65,12 @@ import { useEditorStore } from '@/store/editor'
 import { useLikeStore } from '@/store/like'
 import { useOpenStore } from '@/store/open'
 
-import type { TreeInstance, TreeData, TreeNodeData, RenderContentContext } from 'element-plus'
+import {
+  type TreeInstance,
+  type TreeData,
+  type TreeNodeData,
+  type RenderContentContext,
+} from 'element-plus'
 
 const editor = useEditorStore()
 const like = useLikeStore()
@@ -64,6 +82,31 @@ const openDir = async () => {
   open.show = 'dir'
 }
 
+const addFile = async (node: RenderContentContext['node']) => {
+  try {
+    const { value } = await ElMessageBox.prompt(`${node.data.value}/`, '创建文件', {
+      inputValidator: (v) => (v ? true : '请输入文件名'),
+      inputPlaceholder: '文件名+后缀',
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+    })
+
+    const path = `${node.data.value}/${value}`
+
+    await axios.post(
+      HOST,
+      { encode: 'utf8', path, value: '', force: 1 },
+      { params: { _api: 'save' } },
+    )
+
+    editor.add(path, { keep: false })
+
+    refreshNode(node)
+  } catch {
+    return
+  }
+}
+
 const refreshNode = (node: RenderContentContext['node']) => {
   loadNode(node, (data) => node.key && treeRef.value?.updateKeyChildren(node.key, data))
 }
@@ -112,6 +155,13 @@ const openNode = (data: TreeNodeData) => {
   display: flex;
   align-items: center;
   gap: 4px;
+  padding-right: 4px;
+
+  &:hover {
+    > .edit {
+      display: flex;
+    }
+  }
 
   > .icon {
     width: 24px;
@@ -136,5 +186,11 @@ const openNode = (data: TreeNodeData) => {
       text-overflow: ellipsis;
     }
   }
+
+  > .edit {
+    display: none;
+    align-items: center;
+    gap: 8px;
+  }
 }
 </style>

frontend/src/layout/ViewLeft/ViewFolder.vue

@@ -3,7 +3,9 @@
     <div class="head">
       <div class="title">文件打开记录</div>
 
-      <el-icon class="icon" @click="open.clearHistory()"><Delete /></el-icon>
+      <el-tooltip content="清空记录" placement="bottom">
+        <el-icon class="icon" @click="open.clearHistory()"><Delete /></el-icon>
+      </el-tooltip>
     </div>
 
     <div class="content">