使用AI一步一步实现若依前端(13)

功能13：侧边栏加入Logo

功能12：折叠/展开侧边栏
功能11：实现面包屑功能
功能10：添加首页菜单项
功能9：退出登录功能
功能8：页面权限控制
功能7：路由全局前置守卫
功能6：动态添加路由记录
功能5：侧边栏菜单动态显示
功能4：首页使用Layout布局
功能3：点击登录按钮实现页面跳转
功能2：静态登录界面
功能1：创建前端项目

前言

一.操作步骤

1.添加新组件Logo.vue

用于在侧边栏顶部显示logo图片和文字。支持折叠和展开。

<template>
  <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
    <transition name="sidebarLogoFade">
      <div v-if="collapse" class="sidebar-logo-link">
        <img :src="logo" class="sidebar-logo" />
      </div>
      <div v-else class="sidebar-logo-link">
        <img :src="logo" class="sidebar-logo" />
        <h1 class="sidebar-title">{{ title }}</h1>
      </div>
    </transition>
  </div>
</template>

<script setup>
import logo from '@/assets/logo/logo.png'

defineProps({
  collapse: {
    type: Boolean,
    required: true
  }
})

const title = import.meta.env.VITE_APP_TITLE;
// 获取Logo背景色
const getLogoBackground = '#304156'
// 获取Logo文字颜色
const getLogoTextColor = '#ffffff'
</script>

<style lang="scss" scoped>
.sidebarLogoFade-enter-active {
  transition: opacity 1.5s;
}

.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
  opacity: 0;
}

.sidebar-logo-container {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: v-bind(getLogoBackground);
  text-align: center;
  overflow: hidden;

  & .sidebar-logo-link {
    height: 100%;
    width: 100%;

    & .sidebar-logo {
      width: 32px;
      height: 32px;
      vertical-align: middle;
      margin-right: 12px;
    }

    & .sidebar-title {
      display: inline-block;
      margin: 0;
      color: v-bind(getLogoTextColor);
      font-weight: 600;
      line-height: 50px;
      font-size: 14px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      vertical-align: middle;
    }
  }

  &.collapse {
    .sidebar-logo {
      margin-right: 0px;
    }
  }
}
</style>

2.修改Sidebar.vue

引用logo组件和样式调整。

<template>
  <div class="sidebar-container">
    <logo :collapse="appStore.showSidebar" />
    <el-scrollbar class="scrollbar-wrapper">
      <el-menu router :default-active="activeMenu" :default-openeds="openedMenus" class="el-menu-vertical"
      :collapse="appStore.showSidebar" unique-opened>
      <template v-for="item in menuData" :key="item.path">
        <MenuItem :item="item" :level="0" />
      </template>
    </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { defineProps, computed, ref } from 'vue';
import MenuItem from './MenuItem.vue';
import logo from './Logo.vue'
import { useRoute } from 'vue-router';

import useAppStore from '@/stores/app'
const appStore = useAppStore()

const route = useRoute()
defineProps({
  menuData: {
    type: Array,
    required: true
  }
});

const activeMenu = computed(() => {
  return route.path
})

const openedMenus = computed(() => {
  return route.matched
    .map(item => item.path)
    .filter(path => path !== '/')
})
</script>

<style lang="scss" scoped>
.sidebar-container {
  height: 100%;
  background-color: #304156;

  .scrollbar-wrapper {
    height: calc(100% - 50px);
  }

  .el-menu-vertical {
    height: 100%;
    --el-menu-bg-color: #304156;
    --el-menu-text-color: #bfcbd9;
    --el-menu-active-color: #409EFF;
    --el-menu-hover-bg-color: #1e0b39;
  }

  .el-menu {
    border: none;
    height: 100%;
    width: 100% !important;
  }
}

</style>

3.新建.env.development

定义开发环境变量。

# 页面标题
VITE_APP_TITLE = 若依管理系统

# 开发环境配置
VITE_APP_ENV = 'development'

# 若依管理系统/开发环境
VITE_APP_BASE_API = '/dev-api'

二.功能验证

运行项目，浏览器访问http://localhost:5173/index

三.知识点拓展

一、组件化开发（核心）

通俗理解：把页面拆分成独立的积木块，每个积木可以重复使用

代码体现：

<!-- 创建Logo组件 -->
<template>
  <div class="sidebar-logo-container">
    <img :src="logo" />
    <h1 v-if="!collapse">{{ title }}</h1>
  </div>
</template>

<!-- 在侧边栏中使用 -->
<sidebar>
  <logo :collapse="appStore.showSidebar" />
</sidebar>

实际应用：
• 独立维护Logo显示逻辑
• 通过props接收折叠状态
• 复用组件时只需传递不同参数

---

二、Props属性传递

通俗理解：父组件通过"传纸条"的方式给子组件发送数据

实现方式：

// 子组件声明接收参数
defineProps({
  collapse: {
    type: Boolean,
    required: true
  }
})

// 父组件传递参数
<logo :collapse="appStore.showSidebar" />

特点：
• 类型检查（Boolean）
• 必传校验（required: true）
• 单向数据流（子组件不能直接修改）

---

三、条件渲染与过渡动画

通俗理解：根据状态显示不同内容，切换时增加渐变效果

代码实现：

<transition name="sidebarLogoFade">
  <div v-if="collapse">...</div>
  <div v-else>...</div>
</transition>

<style>
/* 定义过渡动画 */
.sidebarLogoFade-enter-active {
  transition: opacity 1.5s;
}
</style>

效果说明：
• 折叠时只显示图标
• 展开时显示图标+文字
• 切换时有1.5秒的淡入淡出效果

---

四、环境变量配置

通俗理解：根据不同的工作环境（开发/生产）自动切换配置

.env文件：

VITE_APP_TITLE = 若依管理系统
VITE_APP_BASE_API = '/dev-api'

使用方式：

const title = import.meta.env.VITE_APP_TITLE

优势：
• 敏感信息不进代码仓库
• 不同环境自动切换配置
• 前端服务无需重新打包即可改变配置

---

五、动态样式绑定

通俗理解：用JavaScript变量控制CSS样式

实现方式：

<!-- 绑定背景色和文字颜色 -->
<div :style="{ background: getLogoBackground }">
  <h1 :style="{ color: getLogoTextColor }"></h1>
</div>

<!-- CSS中使用v-bind -->
<style scoped>
.sidebar-logo-container {
  background: v-bind(getLogoBackground);
}
</style>

应用场景：
• 主题切换
• 动态颜色调整
• 响应式布局

---

六、CSS高度计算

通俗理解：通过计算保证布局不出现滚动条

关键代码：

.scrollbar-wrapper {
  height: calc(100% - 50px); /* 总高度减去Logo高度 */
}

布局技巧：

1. 侧边栏总高度100%
2. Logo固定高度50px
3. 菜单区域=总高度 - Logo高度

---

七、组件通信与状态管理

通俗理解：侧边栏折叠状态全局共享

实现链路：

Navbar点击按钮 → 修改Pinia状态 → Logo组件接收状态 → 侧边栏同步更新

代码体现：

// 状态管理
const appStore = useAppStore()

// 组件接收状态
<logo :collapse="appStore.showSidebar" />

---

八、单文件组件结构

标准结构：

<template> <!-- 视图层 -->
<script>   <!-- 逻辑层 -->
<style>    <!-- 样式层 -->

优势体现：
• Logo组件自包含所有相关代码
• scoped样式避免全局污染
• 明确的导入导出关系

---

九、响应式设计深化

实现效果：

1. 折叠状态变化 → 自动更新Logo显示
2. 环境变量变化 → 自动更新标题
3. 窗口大小变化 → 自动调整布局

技术支撑：
• Composition API的响应式系统
• CSS百分比布局
• 计算属性（computed）

---

四.思考