feats

src/components/ContextMenu.vue

@@ -11,32 +11,57 @@
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
+import { Modal } from 'ant-design-vue'
 import eventBus from '@/utils/eventBus'
 
+const emit = defineEmits(['newFile', 'newFolder', 'deleteFile'])
+
 const modelProps = reactive({ visible: false, title: undefined })
 const inputText = ref()
 
 const menuRef = ref()
 const contextMenuRef = ref()
-const contextMenuOptions = [
-  { id: 'newFolder', name: '新建文件夹' },
-  { type: 'divider', class: 'cm-option-divider' },
-  { id: 'newFile', name: '新建文件' },
-]
+const typeRef = ref('folder')
 const optionRef = ref()
 
-const emit = defineEmits(['newFile', 'newFolder'])
+const contextMenuOptions = computed(() => {
+  const folderOpts = [
+    { id: 'newFolder', name: '新建文件夹' },
+    { type: 'divider', class: 'cm-option-divider' },
+    { id: 'newFile', name: '新建文件' },
+  ]
 
-const onContextMenu = ({ event, menu }) => {
-  contextMenuRef.value.showMenu(event)
+  const fileOpts = [
+    { id: 'deleteFile', name: '删除...' },
+  ]
+
+  return typeRef.value === 'folder' ? folderOpts : fileOpts
+})
+
+const onContextMenu = ({ event, menu, type = 'folder' }) => {
   menuRef.value = menu
+  typeRef.value = type
+  contextMenuRef.value.showMenu(event)
 }
 
 const optionClicked = (event) => {
-  modelProps.visible = true
-  modelProps.title = event.option.name
-  optionRef.value = event.option
+  const option = event.option
+  if (option.id === 'deleteFile') {
+    if (menuRef.value && menuRef.value.name) {
+      const noteName = menuRef.value.name.replace(/\.html$/, '')
+      Modal.confirm({
+        title: `确定删除日记 ${noteName} ?`,
+        onOk() {
+          emit('deleteFile', menuRef.value)
+        },
+      })
+    }
+  } else {
+    modelProps.visible = true
+    modelProps.title = option.name
+    optionRef.value = option
+  }
 }
 
 const confirmNew = () => {

src/components/SubMenu.vue

@@ -4,8 +4,8 @@
       v-if="menu.type === 'dir'"
       :key="`/@@dir@@/${menu.path}`"
     >
-      <template #title>        
-        <div class="dir-context-menu" @contextmenu.prevent.stop="event => onContextMenu(event, menu)">
+      <template #title>
+        <div class="dir-context-menu" @contextmenu.prevent.stop="event => onContextMenu(event, menu, 'folder')">
           {{ trimSuffix(menu.name) }}
         </div>
       </template>
@@ -13,7 +13,11 @@
         <SubMenu :menus="menu.children" :sub-menu="SubMenu" />
       </template>
     </a-sub-menu>
-    <a-menu-item v-else :key="`/@@file@@/${menu.path}`">{{ trimSuffix(menu.name) }}</a-menu-item>
+    <a-menu-item v-else :key="`/@@file@@/${menu.path}`">
+      <div class="dir-context-menu" @contextmenu.prevent.stop="event => onContextMenu(event, menu, 'file')">
+        {{ trimSuffix(menu.name) }}
+      </div>
+    </a-menu-item>
   </template>
 </template>
 
@@ -29,8 +33,8 @@ const props = defineProps({
 
 const SubMenu = props.subMenu
 
-const onContextMenu = (event, menu) => {
-  eventBus.dispatchEvent('menu.contextMenu', { event, menu })
+const onContextMenu = (event, menu, type = 'folder') => {
+  eventBus.dispatchEvent('menu.contextMenu', { event, menu, type })
 }
 
 const trimSuffix = name => {

src/layouts/components/SiderBar.vue

@@ -15,7 +15,7 @@
       </a-menu-item-group>
       <SubMenu :menus="fileTree" :sub-menu="SubMenu"></SubMenu>
     </a-menu>
-    <ContextMenu @newFile="createNewFile" @newFolder="createNewFolder" />
+    <ContextMenu @newFile="createNewFile" @deleteFile="deleteFile" @newFolder="createNewFolder" />
   </div>
 </template>
 
@@ -33,11 +33,8 @@ const props = defineProps({
   }
 })
 
-
 const { user } = useModel('user')
-const { curMenu, menus, getMenus } = useModel('menu')
-const { fileArr, fileTree, getNote, newNote, getFiles, newFolder } = useModel('note')
-const { newFile } = useModel('repo')
+const { fileArr, fileTree, getNote, newNote, getFiles, newFolder, deleteNote } = useModel('note')
 
 const repo = 'my-note'
 const rootPath = ''
@@ -78,6 +75,9 @@ const createNewFolder = ({ menu: parentMenu, name: newFolderName }) => {
   newFolder(user, newFilePath, repo)
 }
 
+const deleteFile = (menu) => {
+  deleteNote(user, menu.path, repo)
+}
 
 const onContextMenu = (event) => {
   eventBus.dispatchEvent('menu.contextMenu', { event })

src/service/gitee.js

@@ -127,3 +127,20 @@ export const updateFile = (user, fileInfo) => {
 
   return request.put(path, data, options)
 }
+
+export const deleteFile = (user, fileInfo, repo = 'my-note') => {
+  const { access_token } = getToken() || {}
+  const { path, sha } = fileInfo
+
+  const params = {
+    access_token,
+    sha,
+    message: 'delete file'
+  }
+  const options = {
+    loading: 'loading.menu',
+    params,
+  }
+
+  return request.delete(`/api/v5/repos/${user.login}/${repo}/contents/${path}`, options)
+}

src/store/model/note.js

@@ -1,4 +1,4 @@
-import { reactive, ref } from 'vue'
+import { reactive, ref, computed } from 'vue'
 import { message } from 'ant-design-vue';
 import * as gitee from '@/service/gitee'
 
@@ -10,7 +10,7 @@ const getParentPath = path => {
 
 export default function useNote() {
   const fileArr = reactive([])
-  const fileTree = reactive([])
+  // const fileTree = reactive([])
   const note = ref()
 
   // 获取目录下所有问题件
@@ -20,9 +20,7 @@ export default function useNote() {
 
       if (!path) {
         fileArr.splice(0)
-        fileTree.splice(0)
         fileArr.push(...files)
-        fileTree.push(...files)
       } else {
         const dir = fileArr.filter(x => x.type === 'dir' && x.path === path)[0]
         dir.children = files
@@ -31,6 +29,10 @@ export default function useNote() {
     })
   }
 
+  const fileTree = computed(() => {
+    return fileArr.filter(x => x.path === x.name)
+  })
+
   const getNote = (user, path = '', repo = 'my-note') => {
     return gitee.getFile(user, path, repo).then(res => note.value = res)
   }
@@ -57,6 +59,22 @@ export default function useNote() {
       getFiles(user, getParentPath(path), repo)
     })
   }
+
+  const deleteNote = (user, path, repo = 'my-note') => {
+    let pos = 0
+    let file = undefined
+    for (; pos < fileArr.length; pos ++) {
+      if (fileArr[pos].path === path) {
+        file = fileArr[pos]
+        break;
+      }
+    }
+
+    if (!file) return;
+    gitee.deleteFile(user, { path, sha: file.sha }, repo).then(() => {
+      fileArr.splice(pos, 1)
+    })
+  }
   
   return {
     fileArr,
@@ -67,5 +85,6 @@ export default function useNote() {
     getNote,
     newNote,
     updateNote,
+    deleteNote,
   }
 }