feat: Reusable Navbar Component (#63)

Author: cwandev

src/App.vue

@@ -33,6 +33,7 @@ onMounted(() => {
 
 <template>
   <VanConfigProvider :theme="mode">
+    <NavBar />
     <router-view v-slot="{ Component, route }">
       <transition :name="routeTransitionName">
         <div :key="route.name" class="app-wrapper">
@@ -45,11 +46,11 @@ onMounted(() => {
 
 <style scoped>
 .app-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
+  position: absolute;
+  top: 46px;
+  left: 0;
   overflow-y: auto;
 }
 </style>

src/components.d.ts

@@ -8,7 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Chart: typeof import('./components/chart/index.vue')['default']
-    Container: typeof import('./components/container/index.vue')['default']
+    NavBar: typeof import('./components/NavBar.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanButton: typeof import('vant/es')['Button']

src/components/NavBar.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+
+function onBack() {
+  if (history.length > 1)
+    history.back()
+  else
+    router.replace('/')
+}
+
+const title = computed(() => {
+  const { title } = (route.meta as { title?: string }) || {}
+  return title || ''
+})
+</script>
+
+<template>
+  <VanNavBar
+    v-show="title"
+    :title="title"
+    :fixed="true"
+    left-arrow clickable
+    @click-left="onBack"
+  />
+</template>

src/components/chart/typing.ts

@@ -15,7 +15,3 @@ const router = useRouter()
     </div>
   </main>
 </template>
-
-<style scoped>
-
-</style>

src/components/container/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <main text="gray-700 dark:gray-200">
+  <main p="16" text="gray-700 dark:gray-200">
     <RouterView />
 
-    <div mx-auto mt-15 text-center text-14 opacity-50>
+    <div mx-auto py-15 text-center text-14 opacity-50>
       Default Layout
     </div>
   </main>

src/components/index.ts

@@ -1,5 +1,5 @@
 <template>
-  <main py-20 text="gray-700 dark:gray-200">
+  <main text="gray-700 dark:gray-200">
     <RouterView />
 
     <div mx-auto mt-15 text-center text-14 opacity-50>

src/layouts/404.vue

@@ -3,6 +3,7 @@ definePage({
   name: 'charts',
   meta: {
     level: 2,
+    title: '📊 Echarts 演示',
   },
 })
 
@@ -62,38 +63,12 @@ const scoreOption = {
 const refBarOption = ref(barOption)
 const refLineOption = ref(lineOption)
 const refScoreOption = ref(scoreOption)
-
-// back
-const onClickLeft = () => history.back()
 </script>
 
 <template>
   <div>
-    <VanNavBar title="📊 Echarts" left-arrow fixed @click-left="onClickLeft" />
-
-    <Container>
-      <div class="chart">
-        <Chart :option="refBarOption" :style="{ height: '330px' }" />
-      </div>
-
-      <div class="chart item">
-        <Chart :option="refLineOption" :style="{ height: '330px' }" />
-      </div>
-
-      <div class="chart item">
-        <Chart :option="refScoreOption" :style="{ height: '330px' }" />
-      </div>
-    </Container>
+    <Chart :option="refBarOption" :style="{ height: '330px' }" />
+    <Chart :option="refLineOption" :style="{ height: '330px' }" />
+    <Chart :option="refScoreOption" :style="{ height: '330px' }" />
   </div>
 </template>
-
-<style lang="less" scoped>
-.chart {
-  width: 100%;
-  height: 300px;
-}
-
-.chart.item {
-  margin-top: 15px;
-}
-</style>