270 lines
8.8 KiB
Markdown
270 lines
8.8 KiB
Markdown
# 快速开始
|
||
|
||
<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中查看课程与学习路径
|
||
- 校友社群
|
||
- 步骤：点击“校友社群” → 查看权益、活动与校友心声
|
||
- 会员体系
|
||
- 步骤：点击“会员体系” → 对比基础版/专业版/企业版权益 |