8.8 KiB
8.8 KiB
快速开始
**本文引用的文件** - [index.html](file://index.html)目录
简介
本指南面向新用户，帮助你在5分钟内完成“有维商学”项目的本地运行与核心体验。该项目是一个单页应用（SPA），无需服务器或数据库，直接在现代浏览器中打开 index.html 即可运行。你将体验到：
- 注册/登录流程（任意账号均可登录）
- 仪表盘概览与导航
- AI智能体对话入口与演示对话
- 教育资源浏览与学习路径
- 校友社群与活动信息
- 会员体系与权益对比
项目结构
项目采用单文件 HTML 架构，所有样式、交互逻辑均内嵌于 index.html 中，便于零配置运行。
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["消息列表与快捷问答"]
图表来源
章节来源
核心组件
- 登录页面：提供手机号/邮箱与密码登录，支持微信与手机验证码登录，以及“立即注册”跳转提示。
- 仪表盘页面：包含导航栏、Tab导航（平台概览、有维教育、AI工具、有维校友、会员体系），以及各模块的内容卡片与网格布局。
- AI智能体页面：集中展示各类AI助手卡片，支持搜索与分类筛选。
- AI对话弹窗：用于与不同AI助手进行对话，内置快捷问答与消息发送逻辑。
章节来源
架构总览
该应用为纯前端 SPA，页面切换与交互通过 JavaScript 控制，无任何外部依赖。核心交互包括：
- 页面切换：通过类名控制页面显示/隐藏
- Tab切换：激活对应 Tab 的按钮与内容区域
- 登录校验：任意非空账号密码均可登录
- AI对话：打开弹窗、发送消息、模拟响应
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回复
图表来源
详细组件分析
登录页面
- 功能要点
- 表单字段：手机号/邮箱、密码
- 选项：记住我、忘记密码
- 社交登录：微信、手机验证码
- 注册引导
- 登录逻辑
- 阻止默认提交，校验用户名与密码非空
- 任意有效输入即切换到仪表盘页面
flowchart TD
Start(["进入登录页面"]) --> Input["填写账号/密码"]
Input --> Submit{"点击登录"}
Submit --> |任意非空| GoDash["切换到仪表盘页面"]
Submit --> |为空| Alert["提示输入完整"]
GoDash --> End(["完成"])
Alert --> Input
图表来源
章节来源
仪表盘页面
- 导航栏：首页、AI智能体、学习中心、校友社群
- Tab导航：平台概览、有维教育、AI工具、有维校友、会员体系
- 内容模块
- 平台概览：统计卡片与平台使命介绍
- 有维教育：课程体系与学习路径
- AI工具：智能体矩阵与核心特性
- 有维校友：权益介绍、近期活动、校友心声
- 会员体系：三种会员方案与权益对比
graph TB
N["导航栏"] --> T["Tab导航"]
T --> O["平台概览"]
T --> E["有维教育"]
T --> AT["AI工具"]
T --> AL["有维校友"]
T --> M["会员体系"]
图表来源
章节来源
AI智能体页面
- 搜索与筛选：支持按类型筛选智能体
- 智能体卡片：展示名称、标签、功能特性与“开始对话”按钮
- 点击卡片：打开 AI 对话弹窗，初始化欢迎消息
sequenceDiagram
participant U as "用户"
participant P as "AI页面"
participant W as "对话弹窗"
U->>P : 点击智能体卡片
P->>W : 打开弹窗并设置头像/标题
W-->>U : 显示欢迎消息
U->>W : 输入问题并发送
W-->>U : 模拟AI回复
图表来源
章节来源
AI对话弹窗
- 头部：显示智能体头像与状态
- 消息区：用户消息与AI回复分左右显示
- 快捷问答：预设常见问题，一键发送
- 输入与发送：支持回车发送，自动滚动到底部
flowchart TD
Open["打开弹窗"] --> Init["初始化欢迎消息"]
Init --> Input["用户输入问题"]
Input --> Send{"发送消息"}
Send --> |用户| AddUser["添加用户消息"]
AddUser --> Wait["等待AI回复"]
Wait --> AddBot["添加AI回复"]
AddBot --> Scroll["滚动到底部"]
Send --> |快捷问答| Quick["填充并发送"]
Quick --> AddUser
图表来源
章节来源
依赖关系分析
- 无外部依赖：所有样式与脚本均内嵌于 index.html
- 浏览器兼容性：使用现代 CSS 与 ES5 JavaScript，适配主流浏览器
- 文件耦合：页面切换与交互逻辑集中在同一文件，便于维护与部署
graph TB
F["index.html"] --> S["内联样式"]
F --> J["内联脚本"]
F --> P1["登录页面"]
F --> P2["仪表盘页面"]
F --> P3["AI页面"]
F --> P4["对话弹窗"]
图表来源
章节来源
性能注意事项
- 单页应用：页面切换无刷新，交互流畅
- 资源内嵌：无需额外资源加载，启动速度快
- 响应式设计：针对移动端与平板进行了适配
故障排除指南
- 无法打开页面
- 确认已将 index.html 放置于可被浏览器访问的目录
- 使用现代浏览器打开，避免使用过旧版本IE
- 登录失败
- 任意非空账号密码均可登录；请检查输入是否为空
- 页面空白或样式异常
- 清理浏览器缓存后重试
- 更换浏览器尝试
- 对话无响应
- 确认已正确打开对话弹窗
- 检查浏览器控制台是否有错误（如跨域限制）
章节来源
结论
“有维商学”项目以极简方式实现了完整的前端体验，新用户可在5分钟内完成本地运行并体验核心功能。建议在现代浏览器中直接打开 index.html 即可开始使用。
附录
环境要求
- 现代浏览器即可运行（Chrome、Edge、Firefox、Safari 等）
本地部署步骤
- 将仓库根目录下的 index.html 文件保存至本地任意位置
- 双击或右键选择“在浏览器中打开”以启动应用
- 在登录页面输入任意非空账号与密码，点击登录
- 成功进入仪表盘后，可自由切换导航与Tab体验各模块
基本使用方法
- 注册/登录：在登录页面输入任意非空账号与密码，点击登录
- 浏览仪表盘：使用顶部导航与Tab切换查看平台概览、教育、AI工具、校友与会员体系
- 使用AI工具：在“AI智能体”页面选择相应智能体卡片，打开对话弹窗进行交流
- 访问教育资源：在“有维教育”Tab中查看课程体系与学习路径
- 校友与活动：在“有维校友”Tab中查看权益、活动与校友心声
- 会员体系：在“会员体系”Tab中对比不同会员方案与权益
截图与操作步骤
- 登录页面
- 步骤：打开 index.html → 输入任意账号/密码 → 点击登录 → 进入仪表盘
- 仪表盘概览
- 步骤：在仪表盘中点击“平台概览”Tab → 查看统计卡片与使命介绍
- AI智能体对话
- 步骤：点击“AI智能体” → 选择智能体卡片 → 打开对话弹窗 → 输入问题 → 查看AI回复
- 教育资源
- 步骤：点击“学习中心” → 在“有维教育”Tab中查看课程与学习路径
- 校友社群
- 步骤：点击“校友社群” → 查看权益、活动与校友心声
- 会员体系
- 步骤：点击“会员体系” → 对比基础版/专业版/企业版权益