feat: 浏览器

src/main/commands/BasicCommand.ts

@@ -1,9 +1,13 @@
 import { app, dialog } from "electron"
 import { inject } from "inversify"
+import Tabs from "main/modules/tabs"
 import WindowManager from "main/modules/window-manager"
 
 export default class BasicCommand {
-    constructor(@inject(WindowManager) private _WindowManager: WindowManager) {
+    constructor(
+        @inject(WindowManager) private _WindowManager: WindowManager,
+        @inject(Tabs) private _Tabs: Tabs
+    ) {
         //
     }
 
@@ -53,6 +57,7 @@ export default class BasicCommand {
                 return
             }
         }
+        this._Tabs.closeAll()
         focusedWindow!.reload()
     }
 }

src/main/commands/TabsCommand.ts

@@ -39,6 +39,10 @@ class TabsCommand {
         this._Tabs.navigate(+index, url)
     }
 
+    closeAll() {
+        this._Tabs.closeAll()
+    }
+
     setActive(index) {
         this._Tabs.changeActive(index)
     }

src/main/modules/tabs/index.ts

@@ -23,11 +23,11 @@ class Tabs extends BaseClass {
 
     private curRect:
         | {
-              x: number
-              y: number
-              width: number
-              height: number
-          }
+            x: number
+            y: number
+            width: number
+            height: number
+        }
         | undefined = undefined
 
     constructor() {
@@ -99,6 +99,14 @@ class Tabs extends BaseClass {
         this.events.emit("update")
     }
 
+    closeAll() {
+        this._tabs = this._tabs.filter(tab => {
+            tab.destroy()
+        })
+        this._tabs = []
+        this.events.emit("update")
+    }
+
     removeAll(index: number[]) {
         index
             .map(v => {

src/renderer/src/assets/style/_common.scss

@@ -20,3 +20,7 @@ body {
 #app {
     height: 100%;
 }
+
+* {
+    user-select: none;
+}

src/renderer/src/pages/[...all].vue

@@ -1,3 +1,3 @@
 <template>
-    <div>Not Found</div>
+    <div @click="$router.back()">Not Found</div>
 </template>

src/renderer/src/pages/_ui/App.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        app
+    </div>
+</template>

src/renderer/src/pages/_ui/Browser.vue

@@ -28,6 +28,7 @@ const { stop } = useResizeObserver(PlaceHolder, () => {
 
 onBeforeUnmount(() => {
     stop()
+    api.call("TabsCommand.closeAll")
 })
 
 const list = ref<any[]>([])

src/renderer/src/pages/index.vue

@@ -1,18 +1,98 @@
 <script setup lang="ts">
-import Browser from "./_ui/Browser.vue"
+import { defineAsyncComponent } from "vue"
+
+const active = ref()
+const allApp = [
+    { label: "浏览器", comp: defineAsyncComponent(() => import("./_ui/Browser.vue")) },
+    { label: "观山", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "听雨", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "赏月", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "抚琴", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "望云", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "踏雪", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "卧松", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "泛舟", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "弈星", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "垂钓", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "采菊", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "倚栏", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "望霞", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "枕风", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "沐泉", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "汲露", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "步竹", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "剪烛", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "拾阶", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "撷兰", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "访柳", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "谒梅", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "拨荷", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "望鹤", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+]
 </script>
 
 <template>
     <div h-full flex>
-        <div w="200px" relative>
-            <div p="8px 10px" text="12px" @click="$router.push('/_ui/Browser')" border border-b cursor="pointer" hover:bg-gray-100>浏览器</div>
-            <div p="8px 10px" text="12px" border border-b cursor="pointer" hover:bg-gray-100>浏览器</div>
+        <div w="100px" relative max-w="200px" min-w="80px">
+            <div overflow-hidden>
+                <div
+                    v-for="(app, index) in allApp"
+                    p="8px 10px"
+                    text="12px"
+                    border
+                    border-b
+                    h="30px"
+                    cursor="pointer"
+                    @click="active = index"
+                    hover:bg-gray-50
+                    class="item"
+                    transition-all
+                    :class="{ active: active === index }"
+                >
+                    <div class="text" transition-all position="absolute" left="10px">{{ app.label }}</div>
+                </div>
+            </div>
             <AdjustLine></AdjustLine>
         </div>
         <div b-l="1px solid #E5E5E5" flex-1 w-0 overflow-auto flex flex-col>
-            <Browser></Browser>
+            <component v-if="allApp[active]" :is="allApp[active].comp"></component>
         </div>
     </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.item {
+    position: relative;
+    &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 6px;
+        background-color: #f3f4f6;
+        transition: all linear 300ms;
+    }
+    &:hover {
+        &::before {
+            width: 30px;
+        }
+        .text {
+            left: 20px;
+        }
+    }
+    &.active {
+        @apply: text-black;
+        &::before {
+            width: 100%;
+        }
+        .text {
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+    .text {
+        transition-duration: 300ms;
+    }
+}
+</style>