心理健康AI助手 - 项目总结

页面展示
[心理健康AI助手 - 项目总结](#心理健康AI助手 - 项目总结)
- [📁 项目概述](#📁 项目概述)
- [🎯 项目亮点](#🎯 项目亮点)
  - [1. 完善的双端管理系统](#1. 完善的双端管理系统)
  - [2. AI 智能咨询系统](#2. AI 智能咨询系统)
  - [3. 情绪日记系统](#3. 情绪日记系统)
  - [4. 知识库系统](#4. 知识库系统)
  - [5. 数据可视化仪表盘](#5. 数据可视化仪表盘)
  - [6. 完善的后台管理](#6. 完善的后台管理)
- [🏗️ 项目架构](#🏗️ 项目架构)
- [🔐 权限控制](#🔐 权限控制)
  - 路由守卫逻辑
  - 用户类型
- [🎨 UI/UX 设计特点](#🎨 UI/UX 设计特点)
- [🔧 工具函数封装](#🔧 工具函数封装)
  - [Axios 请求封装](#Axios 请求封装)
- [📦 第三方库应用](#📦 第三方库应用)
- [🚀 功能模块汇总](#🚀 功能模块汇总)
- [� dayjs 日期处理](#� dayjs 日期处理)
  - 常用用法
  - 项目中的实际应用
- [🔧 项目特殊操作说明](#🔧 项目特殊操作说明)
  - [1. 动态导入本地资源](#1. 动态导入本地资源)
  - [2. SSE 实时流式响应 (AI 回复打字机效果)](#2. SSE 实时流式响应 (AI 回复打字机效果))
  - [3. v-html 渲染富文本内容](#3. v-html 渲染富文本内容)
  - [4. Markdown 内容渲染](#4. Markdown 内容渲染)
  - [5. 数组截断显示（slice）](#5. 数组截断显示（slice）)
  - [6. 事件修饰符（.stop 阻止冒泡）](#6. 事件修饰符（.stop 阻止冒泡）)
  - [7. 可选链操作符（?.）](#7. 可选链操作符（?.）)
  - [8. ECharts 双 Y 轴图表配置](#8. ECharts 双 Y 轴图表配置)
  - [9. Pinia 状态管理](#9. Pinia 状态管理)
- [�📝 总结](#�📝 总结)

页面展示

心理健康AI助手 - 项目总结

📁 项目概述

项目名称：AI 心理健康助手（AI Mental Health Assistant）

技术栈：

前端框架：Vue 3 (Composition API)
路由管理：Vue Router 4
状态管理：Pinia
UI 组件库：Element Plus
图表可视化：ECharts
富文本编辑：WangEditor
HTTP 请求：Axios
构建工具：Vite
样式预处理：SCSS

🎯 项目亮点

1. 完善的双端管理系统

端	路径	说明
管理后台	`/back/*`	管理员使用的数据分析、知识管理、咨询记录、情绪日志模块
用户前端	`/*`	普通用户使用的AI咨询、情绪日记、知识库模块
认证系统	`/auth/*`	统一的登录注册入口

2. AI 智能咨询系统 (`/consultation`)

实时对话界面：仿聊天软件体验，支持 AI 与用户消息区分展示
会话管理：创建会话、切换会话、删除会话
情绪识别：AI 根据对话内容分析用户情绪状态
打字机效果：AI 回复支持逐字显示的动画效果
头像区分：用户头像与 AI 头像清晰区分

3. 情绪日记系统 (`/emotion-diary`)

情绪选择：支持 8 种情绪类型（开心、悲伤、愤怒、焦虑、平静、兴奋、困惑、疲惫）
日期选择：支持日期范围筛选
数据可视化：ECharts 折线图展示情绪趋势变化
日记内容：Markdown 富文本编辑，支持图文混排

4. 知识库系统

用户端 (/knowledge)：

分类浏览知识文章
推荐阅读榜单
阅读量统计

管理端 (/back/knowledge)：

富文本编辑器创建/编辑文章
Markdown 渲染支持
分类树形结构管理
文章分页列表
图片上传功能

5. 数据可视化仪表盘 (`/back/dashboard`)

四大核心指标卡片：

📊 总用户数 / 活跃用户
📝 情绪日志总数 / 今日新增
💬 咨询会话总数 / 今日新增
😊 平均情绪得分

ECharts 双 Y 轴图表：

左侧 Y 轴：情绪得分
右侧 Y 轴：记录数量

6. 完善的后台管理

情绪日志列表展示
日期筛选功能
用户信息关联展示
咨询会话统计

🏗️ 项目架构

复制代码

src/
├── api/                    # API 接口层
│   ├── admin.js           # 后台管理 API
│   └── frontend.js        # 前台用户 API
├── assets/                # 静态资源
├── components/            # 公共组件
│   ├── ArticleDiallog.vue
│   ├── AuthLayout.vue     # 认证布局
│   ├── BackendLayout.vue  # 后台布局
│   ├── FrontendLayout.vue # 前台布局
│   ├── MarkdownRenderer.vue
│   ├── NavBar.vue         # 导航栏
│   ├── PageHead.vue
│   ├── RichTextEditor.vue # 富文本编辑器
│   ├── SideBar.vue        # 侧边栏
│   └── TableSearch.vue
├── config/                # 配置文件
├── router/                # 路由配置
│   └── index.js           # 路由守卫（权限控制）
├── stores/                # Pinia 状态管理
│   └── admin.js
├── untils/                # 工具函数
│   └── request.js         # Axios 封装
├── views/                 # 页面视图
│   ├── articleDetail.vue   # 文章详情
│   ├── consultation.vue    # AI 咨询（用户端）
│   ├── consultations.vue   # 咨询记录（管理端）
│   ├── dashboard.vue      # 数据仪表盘
│   ├── emotionDiary.vue   # 情绪日记（用户端）
│   ├── emotional.vue      # 情绪日志（管理端）
│   ├── frontendKnowledge.vue # 知识库（用户端）
│   ├── home.vue           # 首页
│   ├── knowledge.vue      # 知识管理（管理端）
│   ├── login.vue          # 登录页
│   └── register.vue       # 注册页
├── App.vue
├── main.js
└── style.css

🔐 权限控制

路由守卫逻辑

javascript 复制代码

// 已登录用户
if (token) {
  // userType === 2（管理员）→ 允许访问 /back/*
  // userType === 1（普通用户）→ 限制访问 /back/* 和 /auth/*
}

// 未登录用户
if (!token) {
  // 访问 /back/* → 重定向到 /auth/login
}

用户类型

userType	角色	权限
1	普通用户	仅访问前台功能
2	管理员	访问全部功能

🎨 UI/UX 设计特点

统一的设计语言

配色方案 ：橙色渐变 (#f59e0b → #8b5cf6) 作为主题色
圆角风格 ：卡片、按钮统一使用 border-radius: 12px+
阴影层次：多层阴影营造卡片悬浮效果

响应式布局

最大宽度 1200px，水平居中
Element Plus Grid 栅格系统布局
侧边栏 + 主内容区标准后台布局

细节交互

hover 状态颜色变化
active 状态边框高亮
滚动条样式自定义
头像呼吸动画效果

🔧 工具函数封装

Axios 请求封装

统一 baseURL ：/api
请求超时：5000ms
Token 自动携带
响应拦截：统一处理业务状态码
错误处理：登录过期自动跳转登录页

📦 第三方库应用

库	用途
Element Plus	UI 组件库
ECharts	数据可视化图表
WangEditor	富文本编辑器
dayjs	日期格式化
@microsoft/fetch-event-source	SSE 事件流（AI 回复）
Pinia	状态管理

🚀 功能模块汇总

模块	路径	功能
首页	`/`	心理健康AI助手介绍
AI 咨询	`/consultation`	智能对话、情绪分析、会话管理
情绪日记	`/emotion-diary`	记录情绪、查看趋势
知识库	`/knowledge`	浏览心理健康知识文章
管理后台仪表盘	`/back/dashboard`	数据统计可视化
知识管理	`/back/knowledge`	文章增删改查
咨询记录	`/back/consultations`	查看所有会话记录
情绪日志	`/back/emotional`	查看用户情绪记录

� dayjs 日期处理

项目使用 Element Plus 内置的 dayjs 进行日期处理：

javascript 复制代码

import { dayjs } from 'element-plus'

常用用法

javascript 复制代码

// 格式化日期
dayjs(articleDetail.updateAt).format('YYYY-MM-DD')
// 输出：2026-05-12

// 获取当前日期
dayjs().format('YYYY-MM-DD')
// 输出：2026-05-12

// 自定义格式
dayjs().format('YYYY年MM月DD日')
// 输出：2026年05月12日

项目中的实际应用

场景	代码
文章更新日期显示	`dayjs(articleDetail.updateAt).format('YYYY-MM-DD')`
日记日期默认值	`diaryDate: dayjs().format('YYYY-MM-DD')`

🔧 项目特殊操作说明

1. 动态导入本地资源

使用 new URL() + import.meta.url 动态导入本地图片资源：

javascript 复制代码

// 导入单个图片
const iconUrl = new URL('@/assets/robot-fill.png', import.meta.url).href

// 批量导入多个图片
const emotionIcons = [
  { name: '开心', url: new URL('@/assets/开心.png', import.meta.url).href },
  { name: '悲伤', url: new URL('@/assets/悲伤.png', import.meta.url).href },
  { name: '平静', url: new URL('@/assets/平静.png', import.meta.url).href },
  // ...
]

优势：Vite 构建时会自动处理路径转换，确保资源正确加载。

2. SSE 实时流式响应 (AI 回复打字机效果)

使用 @microsoft/fetch-event-source 实现 Server-Sent Events，模拟打字机效果：

javascript 复制代码

import { fetchEventSource } from '@microsoft/fetch-event-source'

fetchEventSource('/api/psychological-chat/send', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ message: userMessage, sessionId }),
  onmessage(ev) {
    // 逐字接收 AI 回复
    fullResponse += ev.data
    messageContent.value = fullResponse
  },
  onclose() {
    // 流式传输结束
    isAiTyping.value = false
  }
})

3. v-html 渲染富文本内容

项目多处使用 v-html 渲染 HTML 内容：

vue 复制代码

<!-- 文章内容（可能包含 HTML 标签） -->
<div v-html="formatContent(articleDetail.content)"></div>

<!-- 聊天消息格式化内容 -->
<p v-html="formatMessageContent(msg.content)"></p>

<!-- Markdown 渲染结果 -->
<div v-html="renderedContent"></div>

注意：仅对可信内容使用 v-html，避免 XSS 攻击。

4. Markdown 内容渲染

封装 Markdown 渲染组件：

vue 复制代码

<template>
  <div v-html="renderedContent"></div>
</template>

<script setup>
import { computed } from 'vue'
import MarkdownIt from 'markdown-it'

const md = new MarkdownIt()
const renderedContent = computed(() => md.render(props.content))
</script>

5. 数组截断显示（slice）

限制列表显示数量：

vue 复制代码

<!-- 推荐阅读只显示前 5 条 -->
<div v-for="item in recommendList.slice(0, 5)" :key="item.id">

6. 事件修饰符（.stop 阻止冒泡）

防止子元素点击事件触发父元素事件：

vue 复制代码

<!-- 点击删除按钮不会触发父级的选中事件 -->
<el-button @click.stop="handeleDeleteSession(session.sessionId)">

7. 可选链操作符（?.）

安全访问嵌套属性，防止 undefined 错误：

vue 复制代码

<!-- aidata.systemOverview 可能不存在 -->
<p>{{ aidata.systemOverview?.activeUsers }}</p>

8. ECharts 双 Y 轴图表配置

javascript 复制代码

yAxis: [{
  type: 'value',
  name: "情绪得分",
  position: 'left',   // 左侧 Y 轴
}, {
  type: 'value',
  name: "记录数量",
  position: 'right',  // 右侧 Y 轴
}]

9. Pinia 状态管理

javascript 复制代码

// stores/admin.js
import { defineStore } from 'pinia'

export const useAdminStore = defineStore('admin', {
  state: () => ({
    collapse: false
  }),
  actions: {
    toggleCollapse() {
      this.collapse = !this.collapse
    }
  }
})

// 组件中使用
import { useAdminStore } from '@/stores/admin'
const adminStore = useAdminStore()
adminStore.toggleCollapse()

�📝 总结

这是一个功能完善的 Vue 3 + Element Plus 前端项目，包含：

✅ 双端管理系统（用户端 + 管理端）
✅ AI 智能咨询（实时对话 + 情绪识别）
✅ 情绪追踪（日记记录 + 趋势图表）
✅ 知识内容管理（富文本编辑 + Markdown 渲染）
✅ 数据可视化（ECharts 多维度图表）
✅ 权限控制系统（用户类型 + 路由守卫）
✅ 统一 UI 规范（渐变色 + 圆角 + 阴影）

项目结构清晰，代码规范，适合作为心理健康类 Web 应用的开发模板。

心理健康AI助手 - 项目总结

目录

页面展示

心理健康AI助手 - 项目总结

📁 项目概述

🎯 项目亮点

1. 完善的双端管理系统

2. AI 智能咨询系统 (/consultation)

3. 情绪日记系统 (/emotion-diary)

4. 知识库系统

5. 数据可视化仪表盘 (/back/dashboard)

6. 完善的后台管理

🏗️ 项目架构

🔐 权限控制

路由守卫逻辑

用户类型

🎨 UI/UX 设计特点

统一的设计语言

响应式布局

细节交互

🔧 工具函数封装

Axios 请求封装

📦 第三方库应用

🚀 功能模块汇总

� dayjs 日期处理

常用用法

项目中的实际应用

🔧 项目特殊操作说明

1. 动态导入本地资源

2. SSE 实时流式响应 (AI 回复打字机效果)

3. v-html 渲染富文本内容

4. Markdown 内容渲染

5. 数组截断显示（slice）

6. 事件修饰符（.stop 阻止冒泡）

7. 可选链操作符（?.）

8. ECharts 双 Y 轴图表配置

9. Pinia 状态管理

�📝 总结

2. AI 智能咨询系统 (`/consultation`)

3. 情绪日记系统 (`/emotion-diary`)

5. 数据可视化仪表盘 (`/back/dashboard`)