# 快速开始

<cite>
**本文引用的文件**
- [index.html](file://index.html)
</cite>

## 目录
1. [简介](#简介)
2. [项目结构](#项目结构)
3. [核心组件](#核心组件)
4. [架构总览](#架构总览)
5. [详细组件分析](#详细组件分析)
6. [依赖关系分析](#依赖关系分析)
7. [性能注意事项](#性能注意事项)
8. [故障排除指南](#故障排除指南)
9. [结论](#结论)
10. [附录](#附录)

## 简介
本指南面向新用户，帮助你在5分钟内完成“有维商学”项目的本地运行与核心体验。该项目是一个单页应用（SPA），无需服务器或数据库，直接在现代浏览器中打开 index.html 即可运行。你将体验到：
- 注册/登录流程（任意账号均可登录）
- 仪表盘概览与导航
- AI智能体对话入口与演示对话
- 教育资源浏览与学习路径
- 校友社群与活动信息
- 会员体系与权益对比

## 项目结构
项目采用单文件 HTML 架构，所有样式、交互逻辑均内嵌于 index.html 中，便于零配置运行。

```mermaid
graph TB
A["index.html<br/>主页面文件"] --> B["登录页面(login-page)"]
A --> C["仪表盘页面(dashboard-page)"]
A --> D["AI智能体页面(ai-page)"]
A --> E["AI对话弹窗(chat-modal)"]
B --> F["表单与登录逻辑"]
C --> G["导航栏与Tab切换"]
C --> H["统计卡片与内容网格"]
C --> I["教育/AI/校友/会员四个Tab"]
D --> J["智能体卡片与筛选"]
E --> K["消息列表与快捷问答"]
```

图表来源
- [index.html](file://index.html)

章节来源
- [index.html](file://index.html)

## 核心组件
- 登录页面：提供手机号/邮箱与密码登录，支持微信与手机验证码登录，以及“立即注册”跳转提示。
- 仪表盘页面：包含导航栏、Tab导航（平台概览、有维教育、AI工具、有维校友、会员体系），以及各模块的内容卡片与网格布局。
- AI智能体页面：集中展示各类AI助手卡片，支持搜索与分类筛选。
- AI对话弹窗：用于与不同AI助手进行对话，内置快捷问答与消息发送逻辑。

章节来源
- [index.html](file://index.html)

## 架构总览
该应用为纯前端 SPA，页面切换与交互通过 JavaScript 控制，无任何外部依赖。核心交互包括：
- 页面切换：通过类名控制页面显示/隐藏
- Tab切换：激活对应 Tab 的按钮与内容区域
- 登录校验：任意非空账号密码均可登录
- AI对话：打开弹窗、发送消息、模拟响应

```mermaid
sequenceDiagram
participant U as "用户"
participant L as "登录页面"
participant D as "仪表盘页面"
participant A as "AI智能体页面"
participant M as "AI对话弹窗"
U->>L : 输入账号/密码并提交
L->>L : 校验输入
L-->>U : 登录成功
L->>D : 切换到仪表盘页面
U->>D : 点击导航或Tab
D-->>U : 展示对应内容
U->>A : 点击“AI智能体”
A-->>U : 展示智能体卡片
U->>M : 点击卡片打开对话
M-->>U : 显示欢迎消息
U->>M : 输入问题并发送
M-->>U : 模拟AI回复
```

图表来源
- [index.html](file://index.html)

## 详细组件分析

### 登录页面
- 功能要点
  - 表单字段：手机号/邮箱、密码
  - 选项：记住我、忘记密码
  - 社交登录：微信、手机验证码
  - 注册引导
- 登录逻辑
  - 阻止默认提交，校验用户名与密码非空
  - 任意有效输入即切换到仪表盘页面

```mermaid
flowchart TD
Start(["进入登录页面"]) --> Input["填写账号/密码"]
Input --> Submit{"点击登录"}
Submit --> |任意非空| GoDash["切换到仪表盘页面"]
Submit --> |为空| Alert["提示输入完整"]
GoDash --> End(["完成"])
Alert --> Input
```

图表来源
- [index.html](file://index.html)

章节来源
- [index.html](file://index.html)

### 仪表盘页面
- 导航栏：首页、AI智能体、学习中心、校友社群
- Tab导航：平台概览、有维教育、AI工具、有维校友、会员体系
- 内容模块
  - 平台概览：统计卡片与平台使命介绍
  - 有维教育：课程体系与学习路径
  - AI工具：智能体矩阵与核心特性
  - 有维校友：权益介绍、近期活动、校友心声
  - 会员体系：三种会员方案与权益对比

```mermaid
graph TB
N["导航栏"] --> T["Tab导航"]
T --> O["平台概览"]
T --> E["有维教育"]
T --> AT["AI工具"]
T --> AL["有维校友"]
T --> M["会员体系"]
```

图表来源
- [index.html](file://index.html)

章节来源
- [index.html](file://index.html)

### AI智能体页面
- 搜索与筛选：支持按类型筛选智能体
- 智能体卡片：展示名称、标签、功能特性与“开始对话”按钮
- 点击卡片：打开 AI 对话弹窗，初始化欢迎消息

```mermaid
sequenceDiagram
participant U as "用户"
participant P as "AI页面"
participant W as "对话弹窗"
U->>P : 点击智能体卡片
P->>W : 打开弹窗并设置头像/标题
W-->>U : 显示欢迎消息
U->>W : 输入问题并发送
W-->>U : 模拟AI回复
```

图表来源
- [index.html](file://index.html)

章节来源
- [index.html](file://index.html)

### AI对话弹窗
- 头部：显示智能体头像与状态
- 消息区：用户消息与AI回复分左右显示
- 快捷问答：预设常见问题，一键发送
- 输入与发送：支持回车发送，自动滚动到底部

```mermaid
flowchart TD
Open["打开弹窗"] --> Init["初始化欢迎消息"]
Init --> Input["用户输入问题"]
Input --> Send{"发送消息"}
Send --> |用户| AddUser["添加用户消息"]
AddUser --> Wait["等待AI回复"]
Wait --> AddBot["添加AI回复"]
AddBot --> Scroll["滚动到底部"]
Send --> |快捷问答| Quick["填充并发送"]
Quick --> AddUser
```

图表来源
- [index.html](file://index.html)

章节来源
- [index.html](file://index.html)

## 依赖关系分析
- 无外部依赖：所有样式与脚本均内嵌于 index.html
- 浏览器兼容性：使用现代 CSS 与 ES5 JavaScript，适配主流浏览器
- 文件耦合：页面切换与交互逻辑集中在同一文件，便于维护与部署

```mermaid
graph TB
F["index.html"] --> S["内联样式"]
F --> J["内联脚本"]
F --> P1["登录页面"]
F --> P2["仪表盘页面"]
F --> P3["AI页面"]
F --> P4["对话弹窗"]
```

图表来源
- [index.html](file://index.html)

章节来源
- [index.html](file://index.html)

## 性能注意事项
- 单页应用：页面切换无刷新，交互流畅
- 资源内嵌：无需额外资源加载，启动速度快
- 响应式设计：针对移动端与平板进行了适配

## 故障排除指南
- 无法打开页面
  - 确认已将 index.html 放置于可被浏览器访问的目录
  - 使用现代浏览器打开，避免使用过旧版本IE
- 登录失败
  - 任意非空账号密码均可登录；请检查输入是否为空
- 页面空白或样式异常
  - 清理浏览器缓存后重试
  - 更换浏览器尝试
- 对话无响应
  - 确认已正确打开对话弹窗
  - 检查浏览器控制台是否有错误（如跨域限制）

章节来源
- [index.html](file://index.html)

## 结论
“有维商学”项目以极简方式实现了完整的前端体验，新用户可在5分钟内完成本地运行并体验核心功能。建议在现代浏览器中直接打开 index.html 即可开始使用。

## 附录

### 环境要求
- 现代浏览器即可运行（Chrome、Edge、Firefox、Safari 等）

### 本地部署步骤
1. 将仓库根目录下的 index.html 文件保存至本地任意位置
2. 双击或右键选择“在浏览器中打开”以启动应用
3. 在登录页面输入任意非空账号与密码，点击登录
4. 成功进入仪表盘后，可自由切换导航与Tab体验各模块

### 基本使用方法
- 注册/登录：在登录页面输入任意非空账号与密码，点击登录
- 浏览仪表盘：使用顶部导航与Tab切换查看平台概览、教育、AI工具、校友与会员体系
- 使用AI工具：在“AI智能体”页面选择相应智能体卡片，打开对话弹窗进行交流
- 访问教育资源：在“有维教育”Tab中查看课程体系与学习路径
- 校友与活动：在“有维校友”Tab中查看权益、活动与校友心声
- 会员体系：在“会员体系”Tab中对比不同会员方案与权益

### 截图与操作步骤
- 登录页面
  - 步骤：打开 index.html → 输入任意账号/密码 → 点击登录 → 进入仪表盘
- 仪表盘概览
  - 步骤：在仪表盘中点击“平台概览”Tab → 查看统计卡片与使命介绍
- AI智能体对话
  - 步骤：点击“AI智能体” → 选择智能体卡片 → 打开对话弹窗 → 输入问题 → 查看AI回复
- 教育资源
  - 步骤：点击“学习中心” → 在“有维教育”Tab中查看课程与学习路径
- 校友社群
  - 步骤：点击“校友社群” → 查看权益、活动与校友心声
- 会员体系
  - 步骤：点击“会员体系” → 对比基础版/专业版/企业版权益