feats

src/components/ContextMenu.vue

 const contextMenuRef = ref()
 const contextMenuOptions = [
   { id: 'newFolder', name: '新建文件夹' },
+  { type: 'divider', class: 'cm-option-divider' },
   { id: 'newFile', name: '新建文件' },
 ]
 const optionRef = ref()
 
 </script>
 
-<style lang="less" scoped>
-.my-context-menu {
-  width: 200px;
+<style lang="less">
+#my-context-menu {
+  min-width: 175px;
   background-color: #fff;
+
+  .cm-option-divider {
+    background-color: #dfe0e1;
+    box-sizing: content-box;
+    height: 1px;
+  }
 }
 </style>

src/components/HelloWorld.vue

-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <p>
-    Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
-    +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-  </p>
-
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
-    </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
-  </p>
-
-  <button type="button" @click="count++">count is: {{ count }}</button>
-  <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
-  </p>
-</template>
-
-<style scoped>
-a {
-  color: #42b983;
-}
-</style>

src/components/SubMenu.vue

     >
       <template #title>        
         <div class="dir-context-menu" @contextmenu.prevent.stop="event => onContextMenu(event, menu)">
-          {{menu.name}}
+          {{ trimSuffix(menu.name) }}
         </div>
       </template>
       <template v-if="menu.children">
         <SubMenu :menus="menu.children" :sub-menu="SubMenu" />
       </template>
     </a-sub-menu>
-    <a-menu-item v-else :key="`/@@file@@/${menu.path}`">{{ menu.name }}</a-menu-item>
+    <a-menu-item v-else :key="`/@@file@@/${menu.path}`">{{ trimSuffix(menu.name) }}</a-menu-item>
   </template>
 </template>
 
   eventBus.dispatchEvent('menu.contextMenu', { event, menu })
 }
 
+const trimSuffix = name => {
+  return name.replace(/\.html$/, '')
+}
+
 </script>
 
 

src/layouts/components/SiderBar.vue

     >
       <a-menu-item-group key="g1">
         <template #title>
-          <div>我的日记</div>
+          <div @contextmenu.prevent.stop="event => onContextMenu(event)">我的日记</div>
         </template>
       </a-menu-item-group>
       <SubMenu :menus="fileTree" :sub-menu="SubMenu"></SubMenu>
     </a-menu>
-    <ContextMenu :newFile="createNewFile" :newFolder="createNewFolder" />
+    <ContextMenu @newFile="createNewFile" @newFolder="createNewFolder" />
   </div>
 </template>
 
 
 const { user } = useModel('user')
 const { curMenu, menus, getMenus } = useModel('menu')
-const { fileArr, fileTree, getNote, getFiles } = useModel('note')
-const { newFile, newFolder } = useModel('repo')
+const { fileArr, fileTree, getNote, newNote, getFiles, newFolder } = useModel('note')
+const { newFile } = useModel('repo')
 
 const repo = 'my-note'
 const rootPath = ''
 }
 
 const handleOpenChange = (keys) => {
-  const [ menuId ] = keys
-  if (!menuId) return;
+  const menuId = keys.slice().pop()
+  if (!menuId) return true;
 
   const path = menuId.replace('/@@dir@@/', '')
-  getFiles(user, path, repo)
+  const menu = fileArr.filter(x => x.path === path && x.type === 'dir')[0]
+  if (!menu.children) {
+    getFiles(user, path, repo)
+  }
 }
 
 // 创建新文件
-const createNewFile = (parentMenu, newFileName) => {
-  const parentPath = parentMenu.path
+const createNewFile = ({ menu: parentMenu, name: newFileName }) => {
+  const parentPath = parentMenu ? parentMenu.path : ''
   const newFilePath = parentPath ? `${parentPath}/${newFileName}.html` : `${newFileName}.html`
 
-  newFile('又是一篇崭新的日记...', newFilePath, user).then(() => {
-    getMenus(user, parentPath).then(res => {
-      const newDIR = (res || []).filter(x => x.path.indexOf('.gitignore') === -1)
-      if (curMenu.value) {
-        curMenu.value.children = newDIR
-      } else {
-        menus.splice().push(...newDIR || [])
-      }
-    })
-  })
+  newNote(user, newFilePath, repo)
 }
 
 // 创建新目录
-const createNewFolder = (parentMenu, newFolderName) => {
-  const parentPath = parentMenu.path
+const createNewFolder = ({ menu: parentMenu, name: newFolderName }) => {
+  const parentPath = parentMenu ? parentMenu.path : ''
   const newFilePath = parentPath ? `${parentPath}/${newFolderName}` : newFolderName
-
-  newFolder(newFilePath, user).then(() => {
-    getMenus(user, parentPath).then(res => {
-      const newDIR = (res || []).filter(x => x.path.indexOf('.gitignore') === -1)
-      if (curMenu.value) {
-        curMenu.value.children = newDIR
-      } else {
-        menus.push(...newDIR || [])
-      }
-    })
-  })
+  newFolder(user, newFilePath, repo)
 }
 
+
+const onContextMenu = (event) => {
+  eventBus.dispatchEvent('menu.contextMenu', { event })
+}
 </script>

src/service/gitee.js

 // 新增目录, 其实就是新增一个 内容是 # 的 .gitignore 文件
 export const newFolder = (user, path, repo = 'my-note') => {
   const filePath = `${path}/.gitignore`
-  return newFile('#', filePath, user, repo)
+  return newFile(user, '#', filePath, repo)
 }
 
 // 更新文件

src/store/model/note.js

 import { message } from 'ant-design-vue';
 import * as gitee from '@/service/gitee'
 
+const getParentPath = path => {
+  const paths = path.split('/')
+  paths.pop()
+  return paths.join('/')       
+}
+
 export default function useNote() {
   const fileArr = reactive([])
   const fileTree = reactive([])
         fileArr.push(...files)
         fileTree.push(...files)
       } else {
-        const dir = fileArr.filter(x => x.type === 'dir' && x.name === path)[0]
+        const dir = fileArr.filter(x => x.type === 'dir' && x.path === path)[0]
         dir.children = files
         fileArr.push(...files)
       }
     return gitee.getFile(user, path, repo).then(res => note.value = res)
   }
 
-  const newNote = () => {
-    
+  const newNote = (user, path, repo = 'my-note') => {
+    gitee.newFile(user, '又是一篇崭新的日记...', path, repo).then(() => {
+      getFiles(user, getParentPath(path), repo)
+    })
   }
 
   const updateNote = (content, user) => {
       gitee.getFile(user, filePath, 'my-note').then(res => note.value = res)
     })
   }
+
+  const newFolder = (user, path, repo = 'my-note') => {
+    gitee.newFolder(user, path, repo).then(() => {
+      getFiles(user, getParentPath(path), repo)
+    })
+  }
   
   return {
     fileArr,
     fileTree,
     note,
     getFiles,
+    newFolder,
     getNote,
+    newNote,
     updateNote,
   }
 }