当前位置：首页 > news >正文

AI心理健康助手项目遇到的问题及解决方法

news 2026/7/29 18:01:23

前端

1.问题1：侧边菜单的高度要占据全屏的高度

（1）问题是为什么没有占据全部：因为外层父组件的高度是100vh，但是里面的菜单内容没有继承到父组件的100%的高度。
（2）怎么解决：去父组件BackendLayout.vue文件中修改：

<el-containerclass="main-container"><Sidebar/><el-container>el-container中添加class="main-container" 并在style里面的.backend-layout {}添加 .main-container { height: 100%; }

同时检查发现aside-menu里也没继承100%
解决办法：
（1）找到el-menu所在的Sidebar.vue文件，先添加一个class=“menu-style”
（2）在<style>里找到el-menu对应的层级，添加

.menu-style { height: 100%;}

注意：层级一定要写对

2.右上导航栏绑定点击事件时出错

原因：没有添加触发的位置
解决方法：添加以下代码

<divclass="flex-box"><el-avatarsrc="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/><pclass="user-name">admin</p><el-icon><ArrowDown/></el-icon></div>

3.实现中间内容区域

**知识文章、咨询记录、情感记录：基本上由列表和搜索框组成
*可以把长得相似的可以复用的可以考虑封装成组件（新建pageHead.vue）
主内容的设置在Backlayout文件里面。但是是分页面的，在具体的view文件夹内下新建每个页面的vue文件

4.使用pinia（官方推荐的状态管理库）

Pinia 是 Vue.js 官方推荐的状态管理库。它用于在跨组件或页面间共享和管理响应式数据，可以看作是 Vuex 的下一代替代品
使用 Pinia 主要分为三步：安装、创建 Store、在组件中使用。Pinia 的核心概念非常清晰，与 Vue 组件中的 data、computed 和 methods 一一对应，这使得它极易上手。

1. 安装

npminstallpinia

2.在 Vue 应用中初始化

在你的应用入口文件（如 main.js 或 main.ts）中创建 Pinia 实例并挂载

import{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'constpinia=createPinia()constapp=createApp(App)app.use(pinia)// 挂载 Pinia 插件app.mount('#app')

3. 创建一个 Store (以计数器为例)

在 src/stores 目录下创建一个文件，例如 counter.js。使用 defineStore 函数来定义 Store。

第一个参数是 Store 的唯一 ID。
第二个参数可以是一个选项对象（Options Store）或一个函数（Setup Store）。

选项式 (Options Store) 写法

// stores/counter.jsimport{defineStore}from'pinia'exportconstuseCounterStore=defineStore('counter',{// State: 返回初始状态的函数state:()=>({count:0,name:'Pinia'}),// Getters: 类似计算属性getters:{doubleCount:(state)=>state.count*2,},// Actions: 包含业务逻辑actions:{increment(){this.count++},},})

在本项目中怎么定义Store的呢
因为是前后端分离的项目，所以，在stores文件夹下创建admin.js(后端)，内容为：

import{defineStore}from'pinia'import{ref}from'vue'exportconstuseAdminStore=defineStore('admin',()=>{//响应式的状态，要通过ref函数创建constisCollapse=ref(false)consttoggleCollapse=()=>{isCollapse.value=!isCollapse.value}return{isCollapse,toggleCollapse}})

创建和定义完成后，怎么使用呢
在本项目中，找到newBar文件中需要操作的按钮组件添加一个@click="handleCollapse
并在<script中添加

import{useAdminStore}from'@/stores/admin.js';consthandleCollapse=()=>{useAdminStore().toggleCollapse()}

然后在需要实现侧边栏收缩的组件里<el-menu加上:collapse=“isCollapse”
那么问题就出现了，此时收缩，收缩为

这个鬼样子。
解决办法为
左上角区域为自己创建的，所以会乱码。（1）给外围的aside添加一个宽度，让这个宽度跟菜单进行一个同步的变化；
（2）div区域的图标和文案部分再做一个对应的调整（在<div class="info-card">插入v-show="!isCollapse"）
但是此时有个收缩的动画导致的变形，在<el-menu加入:collapse-transition="false"不显示收缩动画
到这步，右边的内容为跟随一起收缩。因为al-side的宽度写死了，所以导致这个问题。现在把宽度改为动态的：:width="isCollapse ? '64px' : '264px'"

4.列表部分实现（封装TableSearch组件）

响应式布局：表单根据页面大小变化
有个报错：
错误原因el-option得放在el-select里面。
解决办法，把

<templatev-if="item.comp === 'select'"><el-optionlabel="全部"value=""></el-option><el-optionv-for="opt in item.options":key="opt.value":label="opt.label":value="opt.value"></el-option></template>

放到component里面

<component:is="isComp(item.comp)":placeholder="item.placeholder"><templatev-if="item.comp === 'select'"><el-optionlabel="全部"value=""></el-option><el-optionv-for="opt in item.options":key="opt.value":label="opt.label":value="opt.value"></el-option></template></component>