From 261c8a6312a90b863c1b5e61f3aee61475c70307 Mon Sep 17 00:00:00 2001
From: Wee <1275919414@qq.com>
Date: Sat, 12 Aug 2023 19:03:00 +0800
Subject: [PATCH] ui: collapsible side pannel

---
 package.json                                   |  1 +
 src/layout/components/the-aside.vue            | 18 ++++++++++++------
 src/router/index.ts                            |  1 -
 ...ebounce-throttle.ts => debounceThrottle.ts} |  0
 src/utils/index.ts                             |  3 ++-
 src/utils/mittBus.ts                           |  2 ++
 src/views/connect/index.vue                    | 18 ++++++++++++------
 7 files changed, 29 insertions(+), 14 deletions(-)
 rename src/utils/{debounce-throttle.ts => debounceThrottle.ts} (100%)
 create mode 100644 src/utils/mittBus.ts

diff --git a/package.json b/package.json
index b055af0..fc91c91 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "debug": "^4.3.4",
     "electron-store": "^8.1.0",
     "highlight.js": "^11.8.0",
+    "mitt": "^3.0.1",
     "monaco-editor": "^0.41.0",
     "pinia": "^2.1.6",
     "vue": "^3.3.4",
diff --git a/src/layout/components/the-aside.vue b/src/layout/components/the-aside.vue
index fe5efa5..2f5cb62 100644
--- a/src/layout/components/the-aside.vue
+++ b/src/layout/components/the-aside.vue
@@ -24,28 +24,30 @@
 <script setup lang="ts">
 import { DataBase, Folders, LogoGithub, Settings, UserAvatar } from '@vicons/carbon';
 import { useLang } from './../../lang';
+import { useBus } from './../../utils';
 import theAsideIcon from './the-aside-icon.vue';
 const lang = useLang();
 const router = useRouter();
+const route = useRoute();
 
 const mainNavList = ref([
   {
     id: 'connect',
-    path: '/',
+    path: '/connect',
     name: lang.t('aside.connect'),
     icon: markRaw(DataBase),
     isLink: false,
   },
   {
     id: 'file',
-    path: '/',
+    path: '/connect',
     name: lang.t('aside.file'),
     icon: markRaw(Folders),
     isLink: false,
   },
   {
     id: 'github',
-    path: '/',
+    path: '/connect',
     name: lang.t('aside.github'),
     icon: markRaw(LogoGithub),
     isLink: true,
@@ -81,9 +83,13 @@ const navClick = (item: RouteItem) => {
   if (item.isLink && item.id === 'github') {
     window.electronAPI.openGitHub();
   } else {
-    router.push({
-      path: item.path,
-    });
+    if (route.path === item.path) {
+      useBus.emit('pannel-change');
+    } else {
+      router.push({
+        path: item.path,
+      });
+    }
   }
 };
 </script>
diff --git a/src/router/index.ts b/src/router/index.ts
index 53d8a4a..8f1447a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -33,5 +33,4 @@ const router = createRouter({
     },
   ],
 });
-
 export default router;
diff --git a/src/utils/debounce-throttle.ts b/src/utils/debounceThrottle.ts
similarity index 100%
rename from src/utils/debounce-throttle.ts
rename to src/utils/debounceThrottle.ts
diff --git a/src/utils/index.ts b/src/utils/index.ts
index c249ca5..c1b316e 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1 +1,2 @@
-export * from './debounce-throttle';
+export * from './debounceThrottle';
+export * from './mittBus';
diff --git a/src/utils/mittBus.ts b/src/utils/mittBus.ts
new file mode 100644
index 0000000..9231505
--- /dev/null
+++ b/src/utils/mittBus.ts
@@ -0,0 +1,2 @@
+import mitt from 'mitt';
+export const useBus = mitt();
diff --git a/src/views/connect/index.vue b/src/views/connect/index.vue
index 619de84..18642d4 100644
--- a/src/views/connect/index.vue
+++ b/src/views/connect/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="connect-container">
-    <div class="connect-list" v-if="false">
+    <div class="connect-list" v-if="isPannelOpen">
       <div class="add-connect" @click="addConnect">
         <n-icon size="28">
           <Add />
@@ -18,19 +18,25 @@
 
 <script setup lang="ts">
 import { Add } from '@vicons/carbon';
-
 import ConnectModal from './components/connect-dialog.vue';
 import connectList from './components/connect-list.vue';
 import Editor from '../editor/index.vue';
-const router = useRouter();
-
+import { useBus } from './../../utils';
 // DOM
 const connectModalRef = ref();
 
+const isPannelOpen = ref(true);
+
 onMounted(() => {
-  
-})
+  useBus.on('pannel-change', pannelHandler);
+});
+onUnmounted(() => {
+  useBus.off('pannel-change');
+});
 
+const pannelHandler = () => {
+  isPannelOpen.value = !isPannelOpen.value;
+};
 const addConnect = () => connectModalRef.value.showMedal();
 
 const editConnectHandler = (row: object) => {