feats

src/components/ContextMenu.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="content-menu-box">
+    <a-menu @click="handleMenu" v-model:selectedKeys="selectedKeys">
+      <a-menu-item key="save">
+        新建文件
+      </a-menu-item>
+      <a-menu-divider />
+      <a-menu-item key="newfolder">
+        新建文件夹
+      </a-menu-item>
+    </a-menu>
+  </div>
+  <a-modal v-model:visible="visible" title="新建" @ok="confirmNew">
+    <a-input v-model:value="inputText" placeholder="请输入名称" />
+  </a-modal>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+// import { useModel } from '@zjxpcyc/vue-tiny-store'
+import eventBus from '@/utils/eventBus'
+
+const visible = ref(false)
+const inputText = ref()
+const menuKey = ref()
+const selectedKeys = ref([])
+// const { curMenu } = useModel('menu')
+// const saveDisabledItem = computed(() => {
+//   return !curMenu.value || curMenu.value.type !== 'file'
+// })
+
+const emit = defineEmits(['menuClick'])
+
+const confirmNew = () => {
+  const inputValue = inputText.value
+
+  switch (menuKey.value) {
+    case 'save':
+      eventBus.dispatchEvent('menu.newFile', inputValue)
+      break;
+    case 'newfolder':
+      eventBus.dispatchEvent('menu.newFolder', inputValue)
+      break;
+    default:
+      break;
+  }
+  visible.value = false
+  inputText.value = undefined
+}
+
+const handleMenu = (e) => {
+  menuKey.value = e.key
+  visible.value = true
+  // 主要是为了清除样式, 但是暂时不起作用, 不知道为啥
+  selectedKeys.value = []
+  emit('menuClick')
+}
+
+</script>
+
+<style lang="less" scoped>
+.content-menu-box {
+  width: 200px;
+}
+</style>

src/components/SubMenu.vue

@@ -3,10 +3,19 @@
     <a-sub-menu
       v-if="menu.type === 'dir'"
       :key="`/@@dir@@/${menu.path}`"
-      :title="menu.name"
     >
+      <template #title>
+        <a-tooltip v-model:visible="tipVisible" trigger="contextmenu" placement="bottom" overlayClassName="menu-tooltip">
+          <template #title>
+            <ContextMenuVue @menuClick="tipVisible = false" />
+          </template>
+          <div @contextmenu="handleContextMenu(`/@@dir@@/${menu.path}`)">
+            {{menu.name}}
+          </div>
+          </a-tooltip>
+      </template>
       <template v-if="menu.children">
-        <SubMenu :menus="menu.children" :sub-menu="SubMenu" />
+        <SubMenu :menus="menu.children" :sub-menu="SubMenu" @contextfolder="handleContextMenu" />
       </template>
     </a-sub-menu>
     <a-menu-item v-else :key="`/@@file@@/${menu.path}`">{{ menu.name }}</a-menu-item>
@@ -14,6 +23,8 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
+import ContextMenuVue from './ContextMenu.vue';
 
 const props = defineProps({
   menus: {
@@ -23,6 +34,35 @@ const props = defineProps({
   subMenu: undefined,
 })
 
+const emit = defineEmits([ 'contextfolder' ])
+
 const SubMenu = props.subMenu
 
+const tipVisible = ref(false)
+
+const handleContextMenu = (key) => {
+  if (Array.isArray(key)) {
+    emit('contextfolder', key)
+  } else {
+    emit('contextfolder', [key])
+  }
+}
+
 </script>
+
+
+<style lang="less">
+.menu-tooltip {
+  .ant-tooltip-arrow-content {
+    background-color: transparent;
+  }
+  
+  .ant-tooltip-inner {
+    padding: 0;
+    background: transparent;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+}
+</style>

src/layouts/NoteLayout.vue

@@ -1,8 +1,8 @@
 <template>
   <a-layout>
-    <a-layout-header>
+    <!-- <a-layout-header>
       <Header />
-    </a-layout-header>
+    </a-layout-header> -->
     <a-layout>
       <a-layout-sider class="layout-sider" :width="siderWidth">
         <SiderBar :menu-style="menuStyle" />

src/layouts/components/Header.vue

@@ -1,64 +1,9 @@
 <template>
   <div></div>
-  <div>
-    <a-menu theme="dark" mode="horizontal" class="menu-navi" @click="handleMenu">
-      <a-menu-item key="save" :disabled="saveDisabledItem">
-        <template #icon>
-          <save-outlined />
-        </template>
-        保存
-      </a-menu-item>
-      <a-menu-item key="newfolder">
-        <template #icon>
-          <folder-add-outlined />
-        </template>
-        文件夹
-      </a-menu-item>
-    </a-menu>
-  </div>
-  <a-modal v-model:visible="newFolderVisible" title="新建文件夹" @ok="confirmNewFolder">
-    <a-input v-model:value="newFolderName" placeholder="请输入文件夹名称" />
-  </a-modal>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
-import { useModel } from '@zjxpcyc/vue-tiny-store'
-import { SaveOutlined, FolderAddOutlined } from '@ant-design/icons-vue';
-import eventBus from '@/utils/eventBus'
-
-const newFolderVisible = ref(false)
-const newFolderName = ref()
-const { curMenu } = useModel('menu')
-const saveDisabledItem = computed(() => {
-  return !curMenu.value || curMenu.value.type !== 'file'
-})
-
-const confirmNewFolder = () => {
-  newFolderVisible.value = false
-  eventBus.dispatchEvent('menu.newFolder', newFolderName.value)
-  newFolderName.value = undefined
-}
-
-const handleMenu = (e) => {
-  switch (e.key) {
-    case 'save':
-      eventBus.dispatchEvent('menu.save')
-      break;
-    case 'newfolder':
-      newFolderVisible.value = true
-      break;
-    default:
-      break;
-  }
-}
-
 </script>
 
 <style lang="less" scoped>
-.menu-navi {
-  :deep(.ant-menu-item) {
-    color: #fff;
-  }
-}
 </style>

src/layouts/components/SiderBar.vue

@@ -8,13 +8,24 @@
       mode="inline"
       triggerSubMenuAction="click"
     >
-      <SubMenu :menus="menus" :sub-menu="SubMenu"></SubMenu>
+      <a-menu-item-group key="g1">
+        <template #title>
+          <a-tooltip trigger="contextmenu" placement="bottom" overlayClassName="menu-tooltip">
+            <template #title>
+              <ContextMenuVue />
+            </template>
+            <div>我的日记</div>
+          </a-tooltip>
+        </template>
+      </a-menu-item-group>
+      <SubMenu :menus="menus" :sub-menu="SubMenu" @contextfolder="handleOpenChange"></SubMenu>
     </a-menu>
   </div>
 </template>
 
 <script setup>
 import { useModel } from '@zjxpcyc/vue-tiny-store'
+import ContextMenuVue from '@/components/ContextMenu.vue';
 import SubMenu from '@/components/SubMenu.vue';
 import eventBus from '@/utils/eventBus'
 
@@ -28,6 +39,7 @@ const props = defineProps({
 const { user } = useModel('user')
 const { curMenu, menus, getMenus } = useModel('menu')
 const { getNote } = useModel('note')
+const { newFile, newFolder } = useModel('repo')
 
 if (!menus || !menus.length) {
   getMenus(user).then(res => {
@@ -80,7 +92,17 @@ const handleOpenChange = (keys) => {
 }
 
 const createNewFolder = (newFolderName) => {
-  console.log('----newFolderName---->', newFolderName)
+  if (!curMenu.value) return;
+
+  const path = curMenu.value.path + `/${newFolderName}`
+
+  newFolder(path, user).then(() => {
+    // 获取父级信息, 目的刷新当前目录
+    getMenus(user, curMenu.value.path).then(res => {
+      curMenu.value.children = res || []
+    })
+  })
+
 }
 
 

src/store/model/repo.js

@@ -31,6 +31,7 @@ export default function useRepo() {
     return request.post(`/api/v5/repos/${user.login}/${repo}`, data).then(res => Object.assign(repo, res))
   }
 
+  // 新增文件
   const newFile = (content, path, user, repo = 'my-note') => {
     const { access_token } = user.token
     const data = {
@@ -40,6 +41,12 @@ export default function useRepo() {
     }
     return request.post(`/api/v5/repos/${user.login}/${repo}/contents/${path}`, data)
   }
+  
+  // 新增目录, 其实就是新增一个 内容是 # 的 .gitignore 文件
+  const newFolder = (path, user, repo = 'my-note') => {
+    const filePath = `${path}/.gitignore`
+    return newFile('#', filePath, user, repo)
+  }
 
   return {
     repo,
@@ -47,5 +54,6 @@ export default function useRepo() {
     newRepo,
     newBranch,
     newFile,
+    newFolder,
   }
 }