新增导航栏组件

package.json

@@ -10,21 +10,22 @@
   },
   "dependencies": {
     "@kjgl77/datav-vue3": "^1.7.4",
-    "@vueuse/core": "^13.2.0",
+    "@vueuse/core": "^13.4.0",
     "autofit.js": "^3.2.8",
-    "axios": "^1.9.0",
+    "axios": "^1.10.0",
     "dayjs": "^1.11.13",
     "echarts": "^5.6.0",
-    "element-plus": "^2.9.10",
+    "element-plus": "^2.10.2",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "pinia": "^2.3.1",
-    "vue": "^3.5.14",
+    "vue": "^3.5.17",
+    "vue-echarts": "^7.0.3",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@tsconfig/node20": "^20.1.5",
-    "@types/node": "^20.17.47",
+    "@tsconfig/node20": "^20.1.6",
+    "@types/node": "^20.19.1",
     "@types/nprogress": "^0.2.3",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vue/eslint-config-prettier": "^8.0.0",
@@ -33,7 +34,7 @@
     "eslint": "^8.57.1",
     "eslint-plugin-vue": "^9.33.0",
     "prettier": "^3.5.3",
-    "sass": "^1.89.0",
+    "sass": "^1.89.2",
     "typescript": "^5.8.3",
     "unocss": "^0.61.9",
     "unplugin-auto-import": "^0.16.7",

src/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    FsNavbar: typeof import('./components/FsNavbar.vue')['default']
     FsTitle: typeof import('./components/FsTitle.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/FsNavbar.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import navbarBg from '@/assets/images/navbar.png'
+import navbarActiveBg from '@/assets/images/navbar-active.png'
+
+interface Props {
+  src?: string
+  width?: string
+  height?: string
+  activeSrc?: string
+  gap?: string
+  nav: Array<{
+    name: string
+    route: string
+  }>
+  style?: any
+}
+const props = withDefaults(defineProps<Props>(), {
+  src: navbarBg,
+  width: '176px',
+  height: '48px',
+  activeSrc: navbarActiveBg,
+  gap: '-16px',
+})
+
+const bgImg = `url(${props.src})`
+const activeBgImg = `url(${props.activeSrc})`
+
+const route = useRoute()
+const router = useRouter()
+const handleClick = (route: string) => {
+  router.push(route)
+}
+</script>
+
+<template>
+  <div class="navbar">
+    <div
+      class="navbar-item"
+      :class="{ active: route.path === item.route }"
+      :style="style"
+      v-for="item in nav"
+      :key="item.name"
+      @click="handleClick(item.route)"
+    >
+      {{ item.name }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.navbar {
+  display: flex;
+
+  &-item {
+    cursor: pointer;
+    background: v-bind(bgImg);
+    width: v-bind(width);
+    height: v-bind(height);
+    color: #fff;
+    text-align: center;
+    font-size: 18px;
+    line-height: v-bind(height);
+    &:hover {
+      background: v-bind(activeBgImg);
+      font-size: 20px;
+    }
+    & + & {
+      margin-left: v-bind(gap);
+    }
+  }
+}
+.active {
+  background: v-bind(activeBgImg);
+}
+</style>

src/router/constantRouter.ts

@@ -16,7 +16,15 @@ const constantRouter: RouteRecordRaw[] = [
       icon: 'House',
     },
   },
-
+  {
+    path: '/about',
+    name: 'about',
+    component: () => import('@/views/About.vue'),
+    meta: {
+      title: '关于',
+      icon: 'House',
+    },
+  },
   {
     path: '/:pathMatch(.*)*',
     redirect: '/exception/404',

src/views/About.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const nav = [
+  {
+    name: '首页',
+    route: 'home',
+  },
+]
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <fs-title title="方是科技-"></fs-title>
+
+    <div class="flex-grow flex w-full p-15px">
+      <div class="flex flex-col basis-1/4">
+        <dv-border-box-13> </dv-border-box-13>
+        <dv-border-box-13> </dv-border-box-13>
+        <dv-border-box-13> </dv-border-box-13>
+      </div>
+      <div class="flex flex-col flex-grow basis-2/4">
+        <dv-border-box-13> </dv-border-box-13>
+      </div>
+      <div class="main-right flex flex-col basis-1/4">
+        <dv-border-box-13> </dv-border-box-13>
+        <dv-border-box-13> </dv-border-box-13>
+        <dv-border-box-13> </dv-border-box-13>
+      </div>
+    </div>
+    <fs-navbar :nav="nav"></fs-navbar>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/views/Home.vue

@@ -1,21 +1,37 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const nav = [
+  {
+    name: '首页',
+    route: 'home',
+  },
+  {
+    name: '关于我们',
+    route: 'about',
+  },
+]
+</script>
 
 <template>
-  <fs-title title="方是科技"></fs-title>
-  <div class="main flex w-full">
-    <div class="flex flex-col basis-1/4">
-      <dv-border-box-13> </dv-border-box-13>
-      <dv-border-box-13> </dv-border-box-13>
-      <dv-border-box-13> </dv-border-box-13>
-    </div>
-    <div class="flex flex-col flex-grow basis-2/4">
-      <dv-border-box-13> </dv-border-box-13>
-    </div>
-    <div class="main-right flex flex-col basis-1/4">
-      <dv-border-box-13> </dv-border-box-13>
-      <dv-border-box-13> </dv-border-box-13>
-      <dv-border-box-13> </dv-border-box-13>
+  <div class="flex flex-col h-full">
+    <fs-title title="方是科技"></fs-title>
+
+    <div class="flex-grow flex w-full p-15px">
+      <div class="flex flex-col basis-1/4">
+        <dv-border-box-13> </dv-border-box-13>
+        <dv-border-box-13> </dv-border-box-13>
+        <dv-border-box-13> </dv-border-box-13>
+      </div>
+      <div class="flex flex-col flex-grow basis-2/4">
+        <dv-border-box-13> </dv-border-box-13>
+      </div>
+      <div class="main-right flex flex-col basis-1/4">
+        <dv-border-box-13> </dv-border-box-13>
+        <dv-border-box-13> </dv-border-box-13>
+        <dv-border-box-13> </dv-border-box-13>
+      </div>
     </div>
+
+    <div class="flex justify-center"><fs-navbar :nav="nav"></fs-navbar></div>
   </div>
 </template>