279 lines
10 KiB
Markdown
279 lines
10 KiB
Markdown
# 会员订阅系统
|
||
|
||
<cite>
|
||
**本文档引用的文件**
|
||
- [index.html](file://index.html)
|
||
</cite>
|
||
|
||
## 目录
|
||
1. [简介](#简介)
|
||
2. [项目结构](#项目结构)
|
||
3. [核心组件](#核心组件)
|
||
4. [架构总览](#架构总览)
|
||
5. [详细组件分析](#详细组件分析)
|
||
6. [依赖关系分析](#依赖关系分析)
|
||
7. [性能考虑](#性能考虑)
|
||
8. [故障排除指南](#故障排除指南)
|
||
9. [结论](#结论)
|
||
10. [附录](#附录)
|
||
|
||
## 简介
|
||
本项目是一个基于单页应用的会员订阅系统，采用纯 HTML/CSS/JavaScript 实现，无需后端即可运行。系统围绕“有维商学”平台设计，提供三种会员套餐（基础版、专业版、企业版），并通过直观的卡片式界面展示套餐差异、价格和权益对比，辅助用户完成订阅决策与升级。
|
||
|
||
该系统具备以下特点：
|
||
- 完整的前端交互：登录、页面切换、用户菜单、Tab 导航、AI 对话等
|
||
- 会员体系可视化：套餐卡片、推荐标识、价格展示、权益列表、购买按钮
|
||
- 权益对比表格：清晰对比三大套餐的差异化权益
|
||
- 响应式设计：适配桌面端与移动端
|
||
- 可扩展性：易于新增套餐、调整定价策略和订阅流程
|
||
|
||
## 项目结构
|
||
项目采用单一 HTML 文件组织，内含：
|
||
- 样式定义（CSS）：全局样式、页面布局、组件样式（会员卡片、课程卡片、AI卡片等）
|
||
- 结构标记（HTML）：登录页、仪表盘页、AI智能体页、会员体系页
|
||
- 交互脚本（JavaScript）：页面切换、用户交互、AI对话、行业筛选等
|
||
|
||
```mermaid
|
||
graph TB
|
||
A["index.html<br/>主入口文件"] --> B["样式层<br/>CSS 定义"]
|
||
A --> C["结构层<br/>HTML 页面与组件"]
|
||
A --> D["行为层<br/>JavaScript 逻辑"]
|
||
B --> E["页面容器与布局"]
|
||
B --> F["会员卡片样式"]
|
||
B --> G["课程卡片样式"]
|
||
B --> H["AI卡片样式"]
|
||
C --> I["登录页面"]
|
||
C --> J["仪表盘页面"]
|
||
C --> K["AI智能体页面"]
|
||
C --> L["会员体系页面"]
|
||
D --> M["页面切换函数"]
|
||
D --> N["用户交互处理"]
|
||
D --> O["AI对话交互"]
|
||
D --> P["行业筛选逻辑"]
|
||
```
|
||
|
||
图表来源
|
||
- [index.html](file://index.html)
|
||
|
||
章节来源
|
||
- [index.html](file://index.html)
|
||
|
||
## 核心组件
|
||
- 会员卡片组件：展示套餐名称、价格、描述、权益列表和购买按钮；支持“推荐”标识突出专业版
|
||
- 权益对比表格：横向对比三大套餐的关键权益，便于用户决策
|
||
- 页面导航与 Tab：在仪表盘中切换不同功能区域（平台概览、有维教育、AI工具、有维校友、会员体系）
|
||
- 用户菜单：显示当前用户信息，并提供会员中心入口
|
||
- 登录与加载遮罩：统一的登录流程与加载反馈
|
||
|
||
章节来源
|
||
- [index.html](file://index.html)
|
||
|
||
## 架构总览
|
||
系统采用前端单页应用（SPA）架构，所有页面通过 JavaScript 控制显示/隐藏，避免页面刷新。会员体系位于仪表盘的“会员体系”Tab 中，结合权益对比表与卡片式套餐展示，形成完整的用户决策支持链路。
|
||
|
||
```mermaid
|
||
graph TB
|
||
subgraph "前端架构"
|
||
U["用户界面<br/>index.html"] --> S["样式层<br/>CSS"]
|
||
U --> J["交互层<br/>JavaScript"]
|
||
J --> P1["页面切换逻辑"]
|
||
J --> P2["用户菜单控制"]
|
||
J --> P3["AI对话交互"]
|
||
J --> P4["行业筛选逻辑"]
|
||
end
|
||
subgraph "会员体系"
|
||
MC["会员卡片<br/>基础/专业/企业"] --> CT["权益对比表格"]
|
||
MC --> BTN["购买按钮"]
|
||
CT --> DEC["用户决策"]
|
||
end
|
||
U --> MC
|
||
U --> CT
|
||
```
|
||
|
||
图表来源
|
||
- [index.html](file://index.html)
|
||
|
||
## 详细组件分析
|
||
|
||
### 会员卡片组件
|
||
会员卡片是系统的核心交互单元，负责向用户展示套餐信息并引导购买行为。每个卡片包含：
|
||
- 推荐标识：专业版卡片带有“推荐”徽章，视觉突出
|
||
- 价格展示：基础版显示“免费”，专业版显示“¥999/年”，企业版显示“¥2999/年”
|
||
- 描述文本：简要说明适用人群与定位
|
||
- 权益列表：使用勾选符号展示具体权益条目
|
||
- 购买按钮：提供“立即体验”、“立即订阅”、“联系销售”等操作
|
||
|
||
```mermaid
|
||
classDiagram
|
||
class MembershipCard {
|
||
+string 名称
|
||
+string 价格
|
||
+string 描述
|
||
+string[] 权益列表
|
||
+boolean 是否推荐
|
||
+点击购买() void
|
||
}
|
||
class Button {
|
||
+string 文案
|
||
+点击() void
|
||
}
|
||
MembershipCard --> Button : "包含购买按钮"
|
||
```
|
||
|
||
图表来源
|
||
- [index.html](file://index.html)
|
||
|
||
章节来源
|
||
- [index.html](file://index.html)
|
||
|
||
### 权益对比表格
|
||
权益对比表格以三列形式呈现三大套餐的关键权益，通过背景高亮突出专业版的差异化优势，帮助用户快速识别价值点。表格涵盖课程学习、AI智能体使用、校友社群、导师辅导、团队账号、专属客户经理等维度。
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
Start(["进入会员体系Tab"]) --> ViewCards["查看套餐卡片"]
|
||
ViewCards --> Compare["对比权益表格"]
|
||
Compare --> Highlight{"是否突出专业版权益？"}
|
||
Highlight --> |是| Decision["用户倾向专业版"]
|
||
Highlight --> |否| Decision
|
||
Decision --> Purchase["点击购买按钮"]
|
||
Purchase --> End(["完成订阅流程"])
|
||
```
|
||
|
||
图表来源
|
||
- [index.html](file://index.html)
|
||
|
||
章节来源
|
||
- [index.html](file://index.html)
|
||
|
||
### 页面导航与 Tab 切换
|
||
仪表盘页面提供多 Tab 导航，用户可在“平台概览”、“有维教育”、“AI工具”、“有维校友”、“会员体系”之间切换。Tab 的激活状态通过 JavaScript 动态控制，确保同一时间仅显示一个 Tab 内容。
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant User as "用户"
|
||
participant UI as "仪表盘页面"
|
||
participant JS as "JavaScript"
|
||
User->>UI : 点击某个Tab按钮
|
||
UI->>JS : 触发 showTab(tabId)
|
||
JS->>JS : 清除所有Tab激活状态
|
||
JS->>JS : 设置目标Tab为激活
|
||
JS-->>UI : 更新Tab内容显示
|
||
UI-->>User : 展示对应Tab内容
|
||
```
|
||
|
||
图表来源
|
||
- [index.html](file://index.html)
|
||
|
||
章节来源
|
||
- [index.html](file://index.html)
|
||
|
||
### 用户菜单与会员中心入口
|
||
用户头像点击后展开下拉菜单，菜单中包含“会员中心”入口，用户可直接跳转至会员体系 Tab，便于查看当前会员状态与升级选项。
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant User as "用户"
|
||
participant Avatar as "用户头像"
|
||
participant Menu as "用户菜单"
|
||
participant Dashboard as "仪表盘页面"
|
||
User->>Avatar : 点击头像
|
||
Avatar->>Menu : 切换菜单显示状态
|
||
User->>Menu : 点击“会员中心”
|
||
Menu->>Dashboard : showTab('membership')
|
||
Dashboard-->>User : 展示会员体系内容
|
||
```
|
||
|
||
图表来源
|
||
- [index.html](file://index.html)
|
||
|
||
章节来源
|
||
- [index.html](file://index.html)
|
||
|
||
### 登录与加载遮罩
|
||
登录页面提供账号密码输入与社交登录入口，提交后显示加载遮罩，模拟登录过程完成后跳转至仪表盘页面。加载遮罩包含旋转动画与提示文本，提升用户体验。
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant User as "用户"
|
||
participant LoginPage as "登录页面"
|
||
participant Loading as "加载遮罩"
|
||
participant Dashboard as "仪表盘页面"
|
||
User->>LoginPage : 输入账号密码并提交
|
||
LoginPage->>Loading : 显示加载遮罩
|
||
Loading-->>LoginPage : 模拟登录完成
|
||
LoginPage->>Dashboard : 切换到仪表盘页面
|
||
Dashboard-->>User : 展示平台内容
|
||
```
|
||
|
||
图表来源
|
||
- [index.html](file://index.html)
|
||
|
||
章节来源
|
||
- [index.html](file://index.html)
|
||
|
||
## 依赖关系分析
|
||
- 样式依赖：所有页面组件样式依赖于全局 CSS 变量与通用布局类，保持视觉一致性
|
||
- 交互依赖：页面切换、用户菜单、Tab 切换、AI 对话等功能均由 JavaScript 单一文件维护，耦合度低，便于扩展
|
||
- 数据依赖：当前系统为静态展示，无外部数据源；如需接入后端，可在现有交互层基础上增加 API 调用
|
||
|
||
```mermaid
|
||
graph LR
|
||
CSS["全局样式"] --> Login["登录页面"]
|
||
CSS --> Dashboard["仪表盘页面"]
|
||
CSS --> AI["AI智能体页面"]
|
||
JS["JavaScript逻辑"] --> Login
|
||
JS --> Dashboard
|
||
JS --> AI
|
||
Dashboard --> Membership["会员体系"]
|
||
Membership --> Cards["会员卡片"]
|
||
Membership --> Table["权益对比表格"]
|
||
```
|
||
|
||
图表来源
|
||
- [index.html](file://index.html)
|
||
|
||
章节来源
|
||
- [index.html](file://index.html)
|
||
|
||
## 性能考虑
|
||
- 首屏渲染：由于采用单页应用，首次加载仅包含一个 HTML 文件，减少请求次数
|
||
- 样式优化：使用 CSS 变量统一颜色与阴影，避免重复定义，降低维护成本
|
||
- 交互优化：页面切换与菜单显示使用 CSS 动画与过渡，保证流畅体验
|
||
- 响应式设计：针对不同屏幕尺寸提供网格布局与字体大小调整，确保在移动端的良好体验
|
||
|
||
## 故障排除指南
|
||
- 页面无法切换：检查 JavaScript 中的页面 ID 与 HTML 中的元素 ID 是否一致
|
||
- 用户菜单不显示：确认点击事件绑定与 CSS 类名是否正确
|
||
- Tab 不生效：检查 showTab 函数中的激活状态切换逻辑
|
||
- 加载遮罩不消失：确认登录回调中是否正确移除了加载遮罩类名
|
||
- AI 对话无法打开：检查 openChat 函数中的模态框显示逻辑
|
||
|
||
章节来源
|
||
- [index.html](file://index.html)
|
||
|
||
## 结论
|
||
本会员订阅系统以简洁的前端技术栈实现了完整的用户决策支持链路，通过卡片式展示与权益对比表格，有效降低了用户的决策成本。系统具备良好的可扩展性，可按需新增套餐、调整定价策略与订阅流程，同时保持一致的用户体验。
|
||
|
||
## 附录
|
||
|
||
### 会员套餐设计理念与差异化定位
|
||
- 基础版：面向初次了解平台的新用户，提供有限体验（如每日3次AI使用、课程试看、社群浏览），降低入门门槛
|
||
- 专业版：面向成长期OPC创业者，提供无限学习、全功能社群、导师答疑等核心权益，突出性价比与实用性
|
||
- 企业版：面向规模化发展的团队，提供团队账号、线下活动优先参与、一对一导师辅导、专属客户经理等高级服务，满足组织化需求
|
||
|
||
### 订阅流程实现逻辑
|
||
1. 用户在会员体系 Tab 查看套餐卡片与权益对比
|
||
2. 点击相应购买按钮（基础版“立即体验”、专业版“立即订阅”、企业版“联系销售”）
|
||
3. 系统根据按钮类型触发后续流程（此处为前端演示，实际可接入支付与权限升级逻辑）
|
||
|
||
章节来源
|
||
- [index.html](file://index.html)
|
||
|
||
### 扩展指南
|
||
- 新增套餐：在会员卡片区域添加新的卡片结构，并在权益对比表格中增加对应列与行
|
||
- 调整定价策略：修改卡片中的价格展示与按钮文案，确保与业务策略一致
|
||
- 订阅管理功能：在现有交互层基础上增加 API 调用与权限状态更新逻辑，实现真正的订阅与升级
|
||
|
||
章节来源
|
||
- [index.html](file://index.html) |