layout

src/App.vue

@@ -1,4 +1,8 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+definePage({
+  name: 'Player',
+});
+</script>
 
 <template>
   <Suspense>
@@ -9,10 +13,14 @@
         <ab-sidebar />
 
         <div layout-content>
-          <ab-page-title title="Bangumi List"></ab-page-title>
+          <ab-page-title :title="$route.name"></ab-page-title>
 
-          <div overflow-auto mt-12px>
-            <RouterView />
+          <div overflow-auto mt-12px flex-grow>
+            <RouterView v-slot="{ Component }">
+              <KeepAlive>
+                <component :is="Component" />
+              </KeepAlive>
+            </RouterView>
           </div>
         </div>
       </main>

src/auto-imports.d.ts

@@ -14,7 +14,6 @@ declare global {
   const assert: typeof import('vitest')['assert']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
-  const bangumiStore: typeof import('./store/bangumi')['bangumiStore']
   const beforeAll: typeof import('vitest')['beforeAll']
   const beforeEach: typeof import('vitest')['beforeEach']
   const chai: typeof import('vitest')['chai']
@@ -23,7 +22,6 @@ declare global {
   const computedEager: typeof import('@vueuse/core')['computedEager']
   const computedInject: typeof import('@vueuse/core')['computedInject']
   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
-  const configStore: typeof import('./store/config')['configStore']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
   const createApp: typeof import('vue')['createApp']
@@ -59,7 +57,6 @@ declare global {
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
   const it: typeof import('vitest')['it']
-  const logStore: typeof import('./store/log')['logStore']
   const logicAnd: typeof import('@vueuse/core')['logicAnd']
   const logicNot: typeof import('@vueuse/core')['logicNot']
   const logicOr: typeof import('@vueuse/core')['logicOr']
@@ -91,7 +88,6 @@ declare global {
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
-  const programStore: typeof import('./store/program')['programStore']
   const provide: typeof import('vue')['provide']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
@@ -139,6 +135,7 @@ declare global {
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
+  const useBangumiStore: typeof import('./store/bangumi')['useBangumiStore']
   const useBase64: typeof import('@vueuse/core')['useBase64']
   const useBattery: typeof import('@vueuse/core')['useBattery']
   const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
@@ -197,6 +194,7 @@ declare global {
   const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useLogStore: typeof import('./store/log')['useLogStore']
   const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
   const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
   const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
@@ -222,6 +220,7 @@ declare global {
   const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const useProgramStore: typeof import('./store/program')['useProgramStore']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']

src/components.d.ts

@@ -13,8 +13,12 @@ declare module '@vue/runtime-core' {
     AbBangumiCard: typeof import('./components/ab-bangumi-card.vue')['default']
     AbButton: typeof import('./basic/ab-button.vue')['default']
     AbCheckbox: typeof import('./basic/ab-checkbox.vue')['default']
+    AbContainer: typeof import('./components/ab-container.vue')['default']
+    AbFoldPanel: typeof import('./components/ab-fold-panel.vue')['default']
     AbInput: typeof import('./basic/ab-input.vue')['default']
+    AbLabel: typeof import('./components/ab-label.vue')['default']
     AbPageTitle: typeof import('./basic/ab-page-title.vue')['default']
+    AbPopup: typeof import('./components/ab-popup.vue')['default']
     AbSearch: typeof import('./basic/ab-search.vue')['default']
     AbSelect: typeof import('./basic/ab-select.vue')['default']
     AbSidebar: typeof import('./views/ab-sidebar.vue')['default']

src/router-type.d.ts

@@ -39,7 +39,9 @@ import type {
 
 declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
-    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    'Bangumi List': RouteRecordInfo<'Bangumi List', '/', Record<never, never>, Record<never, never>>,
+    'Log': RouteRecordInfo<'Log', '/log', Record<never, never>, Record<never, never>>,
+    'Player': RouteRecordInfo<'Player', '/player', Record<never, never>, Record<never, never>>,
   }
 }
 

src/views/ab-sidebar.vue

@@ -21,42 +21,45 @@ const props = withDefaults(
 
 const show = ref(props.open);
 const toggle = () => (show.value = !show.value);
+const route = useRoute();
 
 const items = [
   {
     id: 1,
     icon: Home,
     label: 'HomePage',
+    path: '/',
   },
   {
     id: 2,
     icon: Calendar,
     label: 'Calendar',
+    path: '/calendar',
+    hidden: true,
   },
   {
     id: 3,
     icon: Play,
     label: 'Player',
+    path: '/player',
   },
   {
     id: 4,
     icon: Download,
     label: 'Downloader',
+    path: '/downloader',
   },
   {
     id: 5,
     icon: Log,
     label: 'Log',
+    path: '/log',
   },
   {
     id: 6,
     icon: Setting,
     label: 'Setting',
-  },
-  {
-    id: 7,
-    icon: Logout,
-    label: 'Logout',
+    path: '/setting',
   },
 ];
 </script>
@@ -97,8 +100,9 @@ const items = [
     </div>
 
     <template v-for="i in items" :key="i.id">
-      <div
-        :class="[i.label === 'Logout' && 'mt-auto']"
+      <RouterLink
+        :to="i.path"
+        replace
         :title="i.label"
         fx-cer
         px-24px
@@ -108,10 +112,30 @@ const items = [
         transition-colors
         hover:bg="#F1F5FA"
         hover:text="#2A1C52"
+        :class="[
+          route.path === i.path && 'bg-[#F1F5FA] text-[#2A1C52]',
+          i.hidden && 'hidden',
+        ]"
       >
-        <component :is="i.icon" :size="24" />
+        <Component :is="i.icon" :size="24" />
         <div text-h2>{{ i.label }}</div>
-      </div>
+      </RouterLink>
     </template>
+
+    <div
+      title="logout"
+      mt-auto
+      fx-cer
+      px-24px
+      space-x-42px
+      h-48px
+      is-btn
+      transition-colors
+      hover:bg="#F1F5FA"
+      hover:text="#2A1C52"
+    >
+      <Logout :size="24" />
+      <div text-h2>Logout</div>
+    </div>
   </div>
 </template>

src/views/ab-topbar.vue

@@ -3,8 +3,8 @@ import { PlayOne, Pause, Refresh, Power, Me } from '@icon-park/vue-next';
 
 const search = ref('');
 
-const { onUpdate } = programStore();
-const { running } = storeToRefs(programStore());
+const { onUpdate } = useProgramStore();
+const { running } = storeToRefs(useProgramStore());
 
 const items = [
   {

unocss.config.ts

@@ -52,13 +52,13 @@ export default defineConfig({
 
     [
       'layout-container',
-      'wh-screen min-w-1024px min-h-768px p-16px space-y-12px flex flex-col',
+      'wh-screen min-w-1024px min-h-768px p-16px space-y-12px flex flex-col bg-[#F0F0F0]',
     ],
     [
       'layout-main',
       'flex space-x-20px overflow-hidden h-[calc(100vh_-_2_*_16px_-_60px_-_12px)]',
     ],
-    ['layout-content', 'overflow-hidden h-full grow flex="~ col"'],
+    ['layout-content', 'overflow-hidden h-full flex flex-col flex-1'],
 
     ['rel', 'relative'],
     ['abs', 'absolute'],
@@ -77,5 +77,6 @@ export default defineConfig({
     ['is-disabled', 'cursor-not-allowed select-none'],
     ['input-reset', 'bg-transparent min-w-0 flex-1 outline-none'],
     ['btn-click', 'hover:scale-110 active:scale-100'],
+    ['line', 'w-full h-2px bg-[#DFE1EF]'],
   ],
 });