基于deepseek的考研408小助手项目中，我负责的是前端设计部分，前端采用vue+element-plus开发。

目录

前端框架设计

前端主页面设计

前端框架设计

src/
│
├── api/              # 存放与后端 API 交互的代码，如 API 请求函数
│   ├── test.js       # API 测试相关代码
│   └── user.js       # 用户相关的 API 函数
│
├── assets/           # 存放静态资源，如图片、样式表、字体等
│   ├── styles/       # 存放样式文件
│   └── main.scss     # 主样式文件，通常用于定义全局样式
│
├── components/       # 存放 Vue 组件，这些组件是应用的可重用部分
│   └── DarkModeSlider.vue # 暗色模式切换组件
│
├── router/           # 存放路由配置，定义应用的路由规则
│   └── index.js      # 路由配置文件
│
├── stores/           # 存放 Vuex 状态管理相关的代码，用于管理应用的全局状态
│   ├── token.js      # 管理用户令牌的 Vuex 模块
│   └── userInfo.js   # 管理用户信息的 Vuex 模块
│
├── utils/            # 存放工具函数或通用的辅助功能代码
│   └── request.js    # 封装的请求函数，可能用于 API 请求
│
└── views/            # 存放页面级组件，通常每个视图对应一个路由
    ├── auth/        # 认证相关的视图组件
    ├── personal/    # 个人中心相关的视图组件
    ├── Home.vue     # 首页组件
    ├── Layout.vue   # 布局组件，通常用于定义页面的整体布局
    ├── Practice.vue # 练习相关页面组件
    ├── QnA.vue      # 问答相关页面组件
    ├── Search.vue   # 搜索相关页面组件
    ├── StudyPlan.vue # 学习计划相关页面组件
    ├── Timer.vue    # 计时器相关页面组件
    ├── WrongQuestions.vue # 错题集相关页面组件
    └── App.vue      # 根组件，是应用的入口组件
└── main.js          # 应用的入口文件，初始化 Vue 实例并挂载到 DOM

以上是初步的框架设计部分，具体后续会根据实际情况改进。

前端主页面设计

前端主页面采取仪表盘风格，可以实现跳转功能，便于用户使用。

<!-- src/views/Home.vue -->
<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const cards = [
  { title: '智能化答疑', desc: '随时提问，获取精准解答', path: '/qna', icon: 'fas fa-question-circle' },
  { title: '预习复习框架', desc: '规划学习，高效备考', path: '/study-plan', icon: 'fas fa-book' },
  { title: '智能搜题', desc: '快速查找题目和解析', path: '/search', icon: 'fas fa-search' },
  { title: '个性化习题训练', desc: '针对性练习，提升能力', path: '/practice', icon: 'fas fa-pen' },
  { title: '计时时钟', desc: '专注学习，养成好习惯', path: '/timer', icon: 'fas fa-clock' },
  { title: '错题本', desc: '记录错题，查漏补缺', path: '/wrong-questions', icon: 'fas fa-times-circle' },
];
</script>

<template>
  <div class="dashboard">
    <h2>欢迎使用408考研小助手</h2>
    <div class="card-grid">
      <el-card
        v-for="card in cards"
        :key="card.path"
        class="card"
        shadow="hover"
        @click="router.push(card.path)"
      >
        <div class="card-content">
          <i :class="card.icon"></i>
          <h3>{{ card.title }}</h3>
          <p>{{ card.desc }}</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dashboard {
  text-align: center;

  h2 {
    color: $global-font-color;
  }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.card {
  cursor: pointer;
  background-color: $global-background-color;
  transition: transform 0.2s;

  &:hover {
    transform: translateY(-5px);
  }

  .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;

    i {
      font-size: 30px;
      color: #42b983;
      margin-bottom: 10px;
    }

    h3 {
      margin: 10px 0;
      color: $global-font-color;
    }

    p {
      color: #666;
    }
  }
}
</style>