feats

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
+    "@zjxpcyc/js_event": "^1.0.0",
     "@zjxpcyc/vue-tiny-store": "^1.0.1",
     "ant-design-vue": "^3.2.4",
     "axios": "^0.27.2",

src/layouts/components/Header.vue

@@ -1,14 +1,14 @@
 <template>
   <div></div>
   <div>
-    <a-menu theme="dark" mode="horizontal" class="menu-navi">
-      <a-menu-item key="save" :disabled="disabledItem.save">
+    <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" :disabled="disabledItem.newFolder">
+      <a-menu-item key="newfolder">
         <template #icon>
           <folder-add-outlined />
         </template>
@@ -16,21 +16,43 @@
       </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 } from 'vue'
+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 disabledItem = computed(() => {
-  return {
-    save: !curMenu.value || curMenu.value.type !== 'file',
-    newFolder: !curMenu.value || curMenu.value.type !== 'dir',
-  }
+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>

src/layouts/components/SiderBar.vue

@@ -16,6 +16,7 @@
 <script setup>
 import { useModel } from '@zjxpcyc/vue-tiny-store'
 import SubMenu from '@/components/SubMenu.vue';
+import eventBus from '@/utils/eventBus'
 
 const props = defineProps({
   menuStyle: {
@@ -29,19 +30,26 @@ const { curMenu, menus, getMenus } = useModel('menu')
 const { getNote } = useModel('note')
 
 if (!menus || !menus.length) {
-  getMenus(user).then(res => menus.push(...res || []))
+  getMenus(user).then(res => {
+    menus.push(...(res || []).filter(x => x.path.indexOf('.gitignore') === -1))
+  })
 }
 
 const getDeep = (arr, targ, type) => {
-    let found = arr.filter(x => x.type === type && x.path === targ)[0]
-    if (found) return found;
+    const length = arr.length
+    for (let i = 0; i < length; i += 1) {
+      const it = arr[i]
+      if (it.type === type && it.path === targ) {
+        return it;
+      }
 
-    for (it of arr) {
-      if (it.type !== type) continue;
+      if (it.type === 'dir') {
+        const children = it.children
+        if (!children || !children.length) continue;
 
-      const children = it.children || []
-      const found = getDeep(children, targ, type)
-      if (found) return found
+        const found = getDeep(children, targ, type)
+        if (found) return found
+      }
     }
 
     return undefined
@@ -58,7 +66,6 @@ const handleMenu = (e) => {
 }
 
 const handleOpenChange = (keys) => {
-  console.log('------------>', keys)
   const [ menuId ] = keys
   if (!menuId) return;
 
@@ -71,4 +78,11 @@ const handleOpenChange = (keys) => {
     menu.children = res || []
   })
 }
+
+const createNewFolder = (newFolderName) => {
+  console.log('----newFolderName---->', newFolderName)
+}
+
+
+eventBus.addEventListener('menu.newFolder', createNewFolder)
 </script>

src/pages/index.vue

@@ -12,6 +12,7 @@ import { Base64 } from 'js-base64'
 import { ref, shallowRef, watch, onMounted } from 'vue'
 import Editor from '@/components/Editor.vue';
 import { useModel } from '@zjxpcyc/vue-tiny-store'
+import eventBus from '@/utils/eventBus'
 
 const mode = 'simple'
 const { user } = useModel('user')
@@ -19,8 +20,8 @@ const { note, updateNote } = useModel('note')
 
 const valueHtml = ref()
 
-const handleSave = (newContent) => {
-  updateNote(newContent, user)
+const handleSave = () => {
+  updateNote(valueHtml.value, user)
 }
 
 watch(note, (newVal) => {
@@ -31,4 +32,7 @@ watch(note, (newVal) => {
   }
 }, { immediate: true })
 
+// 监听导航菜单保存按钮
+eventBus.addEventListener('menu.save', handleSave)
+
 </script>

src/store/model/note.js

@@ -1,6 +1,7 @@
 import { ref } from 'vue'
 import request, { BASE_URL } from '@/utils/request'
 import { Base64 } from 'js-base64'
+import { message } from 'ant-design-vue';
 
 export default function useNote() {
   const note = ref()
@@ -23,6 +24,7 @@ export default function useNote() {
     const filePath = url.replace(BASE_URL, '')
 
     return request.put(filePath, data).then(() => {
+      message.success('保存成功');
       // 获取最新的数据, 目的是更新 sha 值
       request.get(filePath, { params: { access_token } }).then(res => note.value = res)
     })

src/utils/eventBus.js

@@ -0,0 +1,5 @@
+import createEvent from '@zjxpcyc/js_event'
+
+const eventBus = createEvent();
+
+export default eventBus;

yarn.lock

@@ -181,6 +181,11 @@
   resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.34.tgz#b71750d05120feb644102088a09be64518cd3a86"
   integrity sha512-zhEeB8TrFmTXmTXmu/wcjEhgrjO4xqdDQrCdPhjX7NxfoLqoBVKguOm8qyihWNLbP+41svYY4za9mqXyqFLzNg==
 
+"@zjxpcyc/js_event@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@zjxpcyc/js_event/-/js_event-1.0.0.tgz#25688d9ac263700a8ed8d702c1517bcd827934d1"
+  integrity sha512-Nz9bHp0DcdWbgNQQ54uFXoAONvOcrzzqbNUxMp6GTOWP4y14jOZowsLwb1mYNcVxBlkar4Ds0WTIoRyx8sOpRw==
+
 "@zjxpcyc/vue-tiny-store@^1.0.1":
   version "1.0.1"
   resolved "https://registry.npmmirror.com/@zjxpcyc/vue-tiny-store/-/vue-tiny-store-1.0.1.tgz#9e67c0f08e9bddd802bdcb543a28c18181e27395"