feat: 侧边导航 Sidebar 组件

README.md

@@ -1,5 +1,4 @@
 # Vue 3 + TypeScript + Vite
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+ 使用 Vite 构建的 Vue 3.5 项目框架，包含了 TypeScript 支持、Vue Router 4、Pinia 状态管理、Axios 网络请求等常用功能。
+ 整合了 ESLint、Prettier、EditorConfig、Husky、lint-staged 和 commitlint 等现代化开发工具

components.d.ts

@@ -10,8 +10,12 @@ declare module 'vue' {
   export interface GlobalComponents {
     Dashboard: typeof import('./src/views/Dashboard/index.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Sidebar: typeof import('./src/layout/components/Sidebar/index.vue')['default']
     SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
     Test: typeof import('./src/views/Dashboard/test.vue')['default']
   }

src/extend.d.ts

@@ -0,0 +1,12 @@
+import { ComponentCustomProperties } from "vue";
+declare module "@vue/runtime-core" {
+  interface ComponentCustomProperties {
+    $message: typeof import("element-plus/es/components/message/src/message").ElMessage;
+    $notify: typeof import("element-plus/es/components/notification/src/notification").ElNotification;
+    $confirm: (typeof import("element-plus/es/components/message-box/src/message-box").ElMessageBox)["confirm"];
+    $alert: (typeof import("element-plus/es/components/message-box/src/message-box").ElMessageBox)["alert"];
+    $prompt: (typeof import("element-plus/es/components/message-box/src/message-box").ElMessageBox)["prompt"];
+  }
+}
+
+export default ComponentCustomProperties;

src/layout/components/Sidebar/index.vue

@@ -0,0 +1,23 @@
+<!-- 侧边导航 -->
+<template>
+  <el-menu
+    router
+    :default-active="defaultActive"
+    :background-color="variables.menuBg"
+    :text-color="variables.menuText"
+    :active-text-color="variables.menuActiveText"
+  >
+    <el-menu-item index="/dashboard">
+      <el-icon><settring /></el-icon>
+      <template #title>Navigator</template>
+    </el-menu-item>
+  </el-menu>
+</template>
+<script lang="ts" setup>
+import variables from "@/style/variables.module.scss";
+const route = useRoute();
+const defaultActive = computed(() => {
+  return route.path;
+});
+</script>
+<style lang="scss" scoped></style>

src/layout/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="app-wrapper">
-    <div class="sidebar-container">侧边导航</div>
+    <div class="sidebar-container">
+      <!-- 侧边导航 -->
+      <sidebar></sidebar>
+    </div>
     <div class="main-container">
       <div class="header">
         <div class="navbar">导航条1</div>

src/style/variables.module.scss

@@ -1,3 +1,14 @@
 $sideBarWidth: 210px;
 $navBarHeight: 50px;
 $tagsViewHeight: 34px;
+
+// 导航颜色
+$menuText: #bfcbd9;
+$menuActiveText: #409eff;
+// 导航背景色
+$menuBg: #304156;
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  menuBg: $menuBg;
+}

src/style/variables.module.scss.d.ts

@@ -0,0 +1,7 @@
+interface IVariables {
+  menuText: string;
+  menuActiveText: string;
+  menuBg: string;
+}
+export const variables: IVariables;
+export default variables;