feat: 优化界面

src/renderer/src/App.vue

@@ -1,9 +1,31 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+</script>
 
 <template>
+    <div h-full flex flex-col overflow-hidden>
+        <NavBar></NavBar>
+        <div flex-1 h-0 overflow-hidden flex flex-col>
             <router-view v-slot="{ Component, route }">
-        <transition name="slide">
+                <Transition name="slide-fade" mode="out-in">
-            <component :is="Component" :key="route" />
+                    <component :is="Component" :key="route.fullPath" />
-        </transition>
+                </Transition>
             </router-view>
+        </div>
+    </div>
 </template>
+
+<style lang="scss" scoped>
+.slide-fade-enter-active {
+    transition: all 0.2s ease-out;
+}
+
+.slide-fade-leave-active {
+    transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+    transform: translateX(20px);
+    opacity: 0;
+}
+</style>

src/renderer/src/components/NavBar.vue

@@ -19,6 +19,19 @@
                 </div>
             </div>
             <div float-right h-full flex items-center relative style="-webkit-app-region: no-drag">
+                <div
+                    v-if="!isHome"
+                    text-sm
+                    px-2
+                    hover:rounded-md
+                    hover:bg-gray-2
+                    hover:cursor-pointer
+                    text="hover:hover"
+                    @click="back"
+                    title="返回上一页"
+                >
+                    ⬅
+                </div>
                 <div text-sm px-2 hover:rounded-md hover:bg-gray-2 hover:cursor-pointer text="hover:hover" @click="onClickAbout">关于</div>
             </div>
         </div>
@@ -31,19 +44,26 @@ import config from "config"
 import { PopupMenu } from "@/bridge/PopupMenu"
 
 const router = useRouter()
+const route = useRoute()
 const isFullScreen = ref(false)
 onBeforeMount(async () => {
     isFullScreen.value = await api.call("BasicCommand.isFullscreen")
 })
+
+const isHome = computed(() => {
+    if (route?.meta?.home) {
+        return true
+    }
+    return false
+})
+
+function back() {
+    router.back()
+}
+
 const onClickMenu = e => {
     const menu = new PopupMenu([
         {
-            label: "返回",
-            async click() {
-                router.back()
-            },
-        },
-        {
             label: isFullScreen.value ? "取消全屏" : "全屏",
             async click() {
                 isFullScreen.value = await api.call("BasicCommand.fullscreen")

src/renderer/src/layouts/default.vue

@@ -1,10 +1,9 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import Simplebar from "simplebar-vue"
+</script>
 
 <template>
-    <div h-full flex flex-col>
+    <Simplebar h-full>
-        <NavBar></NavBar>
-        <div flex-1 h-0 overflow="auto">
         <RouterView></RouterView>
-        </div>
+    </Simplebar>
-    </div>
 </template>

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

@@ -3,8 +3,9 @@ import { onBeforeMount, onBeforeUnmount, onMounted, ref, useTemplateRef, nextTic
 import { PopupMenu } from "@/bridge/PopupMenu"
 
 defineOptions({
-    title: "替你关于",
+    title: "浏览器",
-    bg: "bg"
+    index: 2,
+    bg: "bg",
 })
 
 // const PlaceHolderRef = useTemplateRef("PlaceHolder")

src/renderer/src/pages/about/index.vue

@@ -31,6 +31,7 @@ definePage({
 </script>
 <template>
     <div>
+        about
         <!-- <HTab v-model="activeTab" :list="TopMenu"></HTab> -->
     </div>
 </template>

src/renderer/src/pages/index copy.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import Simplebar from "simplebar-vue"
+import { getAssetsFile } from "@/utils"
+
+definePage({
+    meta: {
+        home: true,
+    },
+})
+
+const allModules: Record<string, any> = import.meta.glob("./_ui/**/*.vue", { eager: true })
+let allApp: any[] = []
+Object.keys(allModules).forEach(key => {
+    let [_1, p] = key.match("\.\/_ui\/(.*?)\.vue")!
+    p = p.replace(/\.vue$/, "")
+    const m = allModules[key]?.default || allModules[key]
+    allApp.push({
+        label: m.title,
+        bg: m.bg,
+        _sort: m.index ?? 0,
+        comp: m,
+    })
+})
+allApp = allApp.sort((a, b) => (a.index - b.index <= 0 ? 1 : -1))
+
+const active = ref(0)
+// const allApp = [
+//     { label: "浏览器", comp: defineAsyncComponent(() => import("./_ui/Browser.vue")) },
+//     { label: "观山", bg: "gs", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+//     { label: "听雨", bg: "ty", 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")) },
+// ]
+
+const activeBg = computed(() => {
+    if (active.value === undefined) return ""
+    const value = allApp[active.value]?.bg
+    return value ? getAssetsFile(`@/assets/images/home/${value}.png`) : ""
+})
+
+function onClick(index: number) {
+    active.value = index
+}
+</script>
+
+<template>
+    <div h-full flex>
+        <div w="100px" h-full relative max-w="200px" min-w="80px">
+            <Simplebar h-full>
+                <div
+                    v-for="(app, index) in allApp"
+                    :key="index"
+                    p="8px 10px"
+                    text="12px"
+                    border
+                    border-b
+                    h="30px"
+                    cursor="pointer"
+                    hover:bg-gray-50
+                    class="item"
+                    transition-all
+                    :class="{ active: active === index }"
+                    @click="onClick(index)"
+                >
+                    <div class="text" transition-all position="absolute" left="10px">{{ app.label }}</div>
+                </div>
+            </Simplebar>
+            <!-- <AdjustLine></AdjustLine> -->
+        </div>
+        <div class="content" relative b-l="1px solid #E5E5E5" flex-1 w-0 overflow-auto flex flex-col>
+            <div v-if="activeBg" class="bg" :style="{ backgroundImage: activeBg ? `url(${activeBg})` : '' }"></div>
+            <div @click="$router.push('/about')">关于</div>
+            <component :is="allApp[active].comp" v-if="allApp[active]"></component>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.content {
+    .bg {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        z-index: -1;
+        opacity: 0.1;
+        // blur(4px)
+        filter: brightness(1);
+    }
+}
+.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>

src/renderer/src/pages/index.vue

@@ -1,141 +1,13 @@
 <script setup lang="ts">
-import Simplebar from "simplebar-vue"
+definePage({
-import { getAssetsFile } from "@/utils"
+    meta: {
-
+        home: true,
-const allModules: Record<string, any> = import.meta.glob("./_ui/**/*.vue", { eager: true })
+    },
-const allApp: any[] = []
-Object.keys(allModules).forEach(key => {
-    let [_1, p] = key.match("\.\/_ui\/(.*?)\.vue")!
-    p = p.replace(/\.vue$/, "")
-    const m = allModules[key]?.default || allModules[key]
-    allApp.push({
-        label: m.title,
-        bg: m.bg,
-        comp: m,
-    })
 })
-
-const active = ref(0)
-// const allApp = [
-//     { label: "浏览器", comp: defineAsyncComponent(() => import("./_ui/Browser.vue")) },
-//     { label: "观山", bg: "gs", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
-//     { label: "听雨", bg: "ty", 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")) },
-// ]
-
-const activeBg = computed(() => {
-    if (active.value === undefined) return ""
-    const value = allApp[active.value]?.bg
-    return value ? getAssetsFile(`@/assets/images/home/${value}.png`) : ""
-})
-
-function onClick(index: number) {
-    active.value = index
-}
 </script>
 
 <template>
-    <div h-full flex>
+    <div @click="$router.push('/about')">
-        <div w="100px" h-full relative max-w="200px" min-w="80px">
+        <div v-for="i in 1000">{{ i }}</div>
-            <Simplebar h-full>
-                <div
-                    v-for="(app, index) in allApp"
-                    :key="index"
-                    p="8px 10px"
-                    text="12px"
-                    border
-                    border-b
-                    h="30px"
-                    cursor="pointer"
-                    hover:bg-gray-50
-                    class="item"
-                    transition-all
-                    :class="{ active: active === index }"
-                    @click="onClick(index)"
-                >
-                    <div class="text" transition-all position="absolute" left="10px">{{ app.label }}</div>
-                </div>
-            </Simplebar>
-            <!-- <AdjustLine></AdjustLine> -->
-        </div>
-        <div class="content" relative b-l="1px solid #E5E5E5" flex-1 w-0 overflow-auto flex flex-col>
-            <div v-if="activeBg" class="bg" :style="{ backgroundImage: activeBg ? `url(${activeBg})` : '' }"></div>
-            <div @click="$router.push('/about')">关于</div>
-            <component :is="allApp[active].comp" v-if="allApp[active]"></component>
-        </div>
     </div>
 </template>
-
-<style lang="scss" scoped>
-.content {
-    .bg {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        top: 0;
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-        z-index: -1;
-        opacity: 0.1;
-        // blur(4px)
-        filter: brightness(1);
-    }
-}
-.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>

src/renderer/typed-router.d.ts

@@ -21,5 +21,6 @@ declare module 'vue-router/auto-routes' {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
     '/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue<true> }, { all: ParamValue<false> }>,
     'about': RouteRecordInfo<'about', '/about', Record<never, never>, Record<never, never>>,
+    '/index copy': RouteRecordInfo<'/index copy', '/index copy', Record<never, never>, Record<never, never>>,
   }
 }