feat:移植工程

src/layout/admin/components/NavBar/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <section class="layout-navbar">
+    <div class="left-container">
+      <!-- 控制菜单栏的显示 -->
+      <hamburger
+          id="hamburger-container"
+          :is-active="sidebar.opened"
+          class="hamburger-container"
+          @toggleClick="toggleSideBar" />
+    </div>
+
+    <h3 class="title">Sweet Hut</h3>
+
+    <!-- 右上角菜单栏 -->
+    <div class="right-container">
+      <!--      <div class="note-wrapper">-->
+      <!--        <el-tooltip effect="dark" content="警告信息" placement="bottom">-->
+      <!--          <el-badge is-dot class="item">-->
+      <!--            <svg-icon icon-class="danger" />-->
+      <!--          </el-badge>-->
+      <!--        </el-tooltip>-->
+
+      <!--        <el-tooltip effect="dark" content="待办事项" placement="bottom">-->
+      <!--          <el-badge is-dot class="item">-->
+      <!--            <svg-icon icon-class="todo" @click="viewTodoList"/>-->
+      <!--          </el-badge>-->
+      <!--        </el-tooltip>-->
+      <!--      </div>-->
+
+      <!-- 下拉框组件 -->
+      <el-dropdown>
+        <div class="avatar-wrapper">
+          <svg-icon name="admin-user" class="user-avatar" style="color: #0d9488;"/>
+          <span class="username">管理员</span>
+          <el-icon><caret-bottom /></el-icon>
+        </div>
+
+        <!-- 下拉框菜单 -->
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="updatePasswordClick">
+              <span style="display:block;">修改密码</span>
+            </el-dropdown-item>
+
+            <el-dropdown-item @click="logoutClick">
+              <span style="display:block;">退出登录</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { Hamburger, SvgIcon } from 'vue3-common'
+import 'vue3-common/styles/Hamburger.css'
+import { CaretBottom } from '@element-plus/icons-vue'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAppStore } from '@/store/app'
+
+const router = useRouter()
+const appStore = useAppStore()
+
+const sidebar = computed(() => appStore.sidebar)
+
+/**
+ * 侧边栏控制
+ */
+const toggleSideBar = () => {
+  appStore.toggleSideBar()
+}
+
+const viewTodoList = () => {
+  console.log('待办事项')
+}
+
+/**
+ * 修改密码
+ */
+const updatePasswordClick = () => {
+  router.push('/profile')
+}
+
+/**
+ * 退出登录
+ */
+const logoutClick = () => {
+  // userStore.removeAll()
+  router.push('/login')
+  // 刷新页面 否则会出现切换用户 丢失动态路由的现象
+  // location.reload()
+}
+</script>

src/layout/admin/components/SideBar/Logo.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="{'collapse':collapse}">
+    <!-- 跳转到首页 -->
+    <transition name="sidebarLogoFade">
+      <!-- 根据collapse控制Logo组件，即是否显示标题 -->
+      <router-link v-if="collapse" key="collapse" class="logo" to="/admin/dashboard">
+        <!--        <img :src="logoInfo.logo" alt="logo">-->
+      </router-link>
+      <router-link v-else key="expand" class="logo" to="/admin/dashboard">
+        <img :src="getAssetsImageFile('logo/vue.png')"
+             alt="logo">
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { getAssetsImageFile } from '@/utils'
+
+defineProps({
+  collapse: {
+    type: Boolean,
+    require: true
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+// 动画样式
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+</style>

src/layout/admin/components/SideBar/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <aside class="layout-sidebar">
+    <logo :collapse="isCollapse" class="layout-logo"/>
+
+    <menu-list :route="useRoute()"
+               :routers="adminRoutes"
+               :collapse="isCollapse"
+               class="layout-menu"/>
+  </aside>
+</template>
+
+<script lang="ts" setup>
+import Logo from './Logo.vue'
+import { MenuList } from 'vue3-common'
+import adminRoutes from '@/router/admin'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useAppStore } from '@/store/app'
+
+const appStore = useAppStore()
+const isCollapse = computed(() => !appStore.sidebar.opened)
+</script>
+