项目结构

一个项目要有一个合理的文件夹结构

root/
├── 📂 backend/                 # 后端工程 (Python/Go/Node.js)
└── 📂 frontend/                # 前端工程 (React + CRA + Yarn)
    ├── 📂 public/              # 静态资源文件夹 (公共壳子)
    │   ├── 📄 index.html      # 真正的网页唯一入口 HTML (里面有 <div id="root">)
    │   └── 📄 favicon.ico     # 网站图标
    ├── 📂 node_modules/        # 项目依赖包 (用 yarn install 自动生成)
    ├── 📂 src/                 # 源代码核心 (你截图的所有内容都在这里)
    │   ├── 📂 api/             # API 接口请求 (Axios 封装, AI/RAG 接口)
    │   ├── 📂 assets/          # 静态资源 (公共全局 CSS 样式表、图片、字体)
    │   ├── 📂 components/      # 公共 UI 组件 (按钮、输入框、弹窗等原子组件)
    │   ├── 📂 icons/           # 图标文件夹 (专门存放各类 SVG 或图片图标)
    │   ├── 📂 layout/          # 页面布局组件 (如包含 Navbar、Sidebar 的整体骨架)
    │   ├── 📂 pages/           # 页面级组件 (React 更习惯叫 pages，而非 Vue 风格的 views)
    │   │   ├── 📂 Home/        # 首页模块
    │   │   │   └── 📄 index.js # 首页核心代码
    │   │   └── 📂 Course/      # AI 互动课页面模块
    │   │       └── 📄 index.js 
    │   ├── 📂 router/          # 路由配置 (基于 react-router-dom)
    │   │   └── 📄 index.js     # 路由表与页面跳转逻辑
    │   ├── 📂 store/           # 状态管理 (MobX 仓库)
    │   │   ├── 📄 navbar.js    # 导航栏全局状态 (包含 @observable 响应式变量)
    │   │   └── 📄 index.js     # Store 组合中心 (把所有分仓打包，统一注入给 App)
    │   ├── 📂 utils/           # 工具函数 (格式化、校验、本地存储 localStorage)
    │   ├── 📄 App.js           # 根组件 (视图总入口，在此处用 MobX 的 Provider 包裹并配置路由)
    │   ├── 📄 App.test.js      # 自动化测试文件 (CRA 脚手架自带，可删)
    │   ├── 📄 index.css        # 全局基础样式文件
    │   ├── 📄 index.js         # 前端脚本总入口 (通过 ReactDOM 抓取 public/index.html 的 root 节点进行渲染)
    │   └── 📄 serviceWorker.js # 离线缓存/PWA 支持脚本 (CRA 自带，通常选择不启用)
    ├── 📄 .env                 # 环境配置文件 (存放开发/生产环境的 API 地址)
    ├── 📄 jsconfig.json        # 路径别名配置 (让 @ 符号能够正确映射指向 src 目录)
    ├── 📄 package.json         # 项目依赖声明书与脚本指令 (包含 mobx, mobx-react, react-router-dom 等)
    └── 📄 yarn.lock            # Yarn 专属的依赖版本锁定文件 (由 Yarn 自动维护，绝对不要手动修改)

这里view最好不要含有任何逻辑相关的内容,只包含将视图放到 < template > 里的逻辑写上