feats

package.json

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

src/components/SubMenu.vue

@@ -1,15 +1,15 @@
 <template>
-  <template v-for="menu in menus" :key="`${menu.path}/${menu.name}`">
+  <template v-for="menu in menus" :key="`${menu.path}`">
     <a-sub-menu
       v-if="menu.type === 'dir'"
-      :key="`/@@mockroot@@/${menu.path}/${menu.name}`"
+      :key="`/@@dir@@/${menu.path}`"
       :title="menu.name"
     >
       <template v-if="menu.children">
         <SubMenu :menus="menu.children" :sub-menu="SubMenu" />
       </template>
     </a-sub-menu>
-    <a-menu-item v-else :key="`${menu.path}/${menu.name}`">{{ menu.name }}</a-menu-item>
+    <a-menu-item v-else :key="`/@@file@@/${menu.path}`">{{ menu.name }}</a-menu-item>
   </template>
 </template>
 

src/layouts/NoteLayout.vue

@@ -1,92 +1,38 @@
 <template>
-  <a-layout has-sider>
-    <a-layout-sider class="layout-sider" :width="siderWidth">
-      <div></div>
-      <div>
-        <a-menu
-          @click="handleMenu"
-          @openChange="handleOpenChange"
-          :style="menuStyle"
-          theme="dark"
-          triggerSubMenuAction="click"
-        >
-          <SubMenu :menus="menus" :sub-menu="SubMenu"></SubMenu>
-        </a-menu>
-      </div>
-    </a-layout-sider>
-    <a-layout class="layout-main">
-      <a-layout-content>
-        <router-view></router-view>
-      </a-layout-content>
+  <a-layout>
+    <a-layout-header>
+      <Header />
+    </a-layout-header>
+    <a-layout>
+      <a-layout-sider class="layout-sider" :width="siderWidth">
+        <SiderBar :menu-style="menuStyle" />
+      </a-layout-sider>
+      <a-layout class="layout-main">
+        <a-layout-content>
+          <router-view></router-view>
+        </a-layout-content>
+      </a-layout>
     </a-layout>
   </a-layout>
 </template>
 
 <script setup>
-import { useModel } from '@zjxpcyc/vue-tiny-store'
-import SubMenu from '@/components/SubMenu.vue';
+import Header from './components/Header.vue'
+import SiderBar from './components/SiderBar.vue';
 
 const siderWidth = '300px';
-const menuStyle = { width: `calc(${siderWidth} - 2px)` };
-
-const { user } = useModel('user')
-const { menus, getMenus, appendMenu } = useModel('menu')
-const { getNote } = useModel('note')
-
-const currentDir = { current: [] }
-const currentMenu = { current: {} }
-
-if (!menus || !menus.length) {
-  getMenus(user).then(res => {
-    appendMenu(menus, res)
-    currentDir.current = res
-  })
-}
-
-const handleMenu = (e) => {
-  const menuId = e.key
-  currentMenu.current = currentDir.current.filter(menu => `${menu.path}/${menu.name}` === menuId)[0]
-
-  const [name, ...pathArr] = menuId.split('/').reverse()
-  const path = pathArr.reverse().join('/')
-
-
-  const fullPath = path === name ? name : menuId
-
-  getNote(user, fullPath)
-}
-
-const handleOpenChange = (keys) => {
-  const [ menuId ] = keys
-  const [name, ...pathArr] = menuId.split('/').reverse()
-  const path = pathArr.reverse().join('/').replace('/@@mockroot@@/', '')
-
-  getMenus(user, path).then(res => {
-    if (!currentMenu.current.children) {
-      currentMenu.current.children = []
-    }
-
-    appendMenu(currentMenu.current.children, res)
-    currentDir.current = res
-  })
-}
+const menuStyle = { width: siderWidth, height: '100%' };
 
 </script>
 
 <style lang="less" scoped>
 .layout-sider {
   overflow: auto;
-  height: 100vh;
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
 }
 
 .layout-main {
-  margin-left: v-bind(siderWidth);
   box-sizing: border-box;
   padding: 24px;
-  height: 100vh;
+  height: calc(100vh - 80px);
 }
 </style>

src/layouts/components/Header.vue

@@ -0,0 +1,42 @@
+<template>
+  <div></div>
+  <div>
+    <a-menu theme="dark" mode="horizontal" class="menu-navi">
+      <a-menu-item key="save" :disabled="disabledItem.save">
+        <template #icon>
+          <save-outlined />
+        </template>
+        保存
+      </a-menu-item>
+      <a-menu-item key="newfolder" :disabled="disabledItem.newFolder">
+        <template #icon>
+          <folder-add-outlined />
+        </template>
+        文件夹
+      </a-menu-item>
+    </a-menu>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useModel } from '@zjxpcyc/vue-tiny-store'
+import { SaveOutlined, FolderAddOutlined } from '@ant-design/icons-vue';
+
+const { curMenu } = useModel('menu')
+const disabledItem = computed(() => {
+  return {
+    save: !curMenu.value || curMenu.value.type !== 'file',
+    newFolder: !curMenu.value || curMenu.value.type !== 'dir',
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+.menu-navi {
+  :deep(.ant-menu-item) {
+    color: #fff;
+  }
+}
+</style>

src/layouts/components/SiderBar.vue

@@ -0,0 +1,74 @@
+<template>
+  <div></div>
+  <div style="height: 100%">
+    <a-menu
+      @click="handleMenu"
+      @openChange="handleOpenChange"
+      :style="menuStyle"
+      mode="inline"
+      triggerSubMenuAction="click"
+    >
+      <SubMenu :menus="menus" :sub-menu="SubMenu"></SubMenu>
+    </a-menu>
+  </div>
+</template>
+
+<script setup>
+import { useModel } from '@zjxpcyc/vue-tiny-store'
+import SubMenu from '@/components/SubMenu.vue';
+
+const props = defineProps({
+  menuStyle: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const { user } = useModel('user')
+const { curMenu, menus, getMenus } = useModel('menu')
+const { getNote } = useModel('note')
+
+if (!menus || !menus.length) {
+  getMenus(user).then(res => menus.push(...res || []))
+}
+
+const getDeep = (arr, targ, type) => {
+    let found = arr.filter(x => x.type === type && x.path === targ)[0]
+    if (found) return found;
+
+    for (it of arr) {
+      if (it.type !== type) continue;
+
+      const children = it.children || []
+      const found = getDeep(children, targ, type)
+      if (found) return found
+    }
+
+    return undefined
+}
+
+const handleMenu = (e) => {
+  const menuId = e.key
+  const path = menuId.replace('/@@file@@/', '')
+
+  const menu = getDeep(menus, path, 'file')
+  curMenu.value = menu
+
+  getNote(user, path)
+}
+
+const handleOpenChange = (keys) => {
+  console.log('------------>', keys)
+  const [ menuId ] = keys
+  if (!menuId) return;
+
+  const path = menuId.replace('/@@dir@@/', '')
+
+  const menu = getDeep(menus, path, 'dir');
+  curMenu.value = menu
+
+  getMenus(user, path).then(res => {
+    menu.children = res || []
+  })
+}
+</script>

src/store/model/menu.js

@@ -1,21 +1,18 @@
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 import request from '@/utils/request'
 
 export default function useMenu() {
   const menus = reactive([])
+  const curMenu = ref()
 
   const getMenus = (user, path = '', repo = 'my-note') => {
     const { access_token } = user.token
     return request.get(`/api/v5/repos/${user.login}/${repo}/contents/${path}`, { params: { access_token } })
   }
 
-  const appendMenu = (src, menuList) => {
-    menus.push(...menuList || [])
-  }
-
   return {
+    curMenu,
     menus,
     getMenus,
-    appendMenu,
   }
 }