|
|
# 二维码信息详情页面
|
|
|
|
|
|
## 🎯 概述
|
|
|
|
|
|
成功创建了二维码信息详情页面，提供完整的二维码信息展示、解析和操作功能。该页面支持所有常见的二维码格式，包括 Wi-Fi、Email、URL、Phone、SMS、vCard、MeCard、Calendar、社交媒体等。
|
|
|
|
|
|
## ✨ 主要功能
|
|
|
|
|
|
### 1. **二维码图片展示**
|
|
|
- 自动生成二维码图片
|
|
|
- 高清显示，支持缩放
|
|
|
- 美观的圆角和阴影效果
|
|
|
- 加载状态指示器
|
|
|
|
|
|
### 2. **二维码类型识别**
|
|
|
- 自动识别二维码类型
|
|
|
- 显示对应的图标和名称
|
|
|
- 支持所有预定义的二维码类型
|
|
|
|
|
|
### 3. **智能内容解析**
|
|
|
- 自动解析二维码内容
|
|
|
- 提取关键信息并格式化显示
|
|
|
- 支持多种编码格式
|
|
|
|
|
|
### 4. **操作功能**
|
|
|
- 收藏/取消收藏
|
|
|
- 复制内容到剪贴板
|
|
|
- 分享二维码内容
|
|
|
- 打开链接（URL类型）
|
|
|
|
|
|
## 🔧 技术实现
|
|
|
|
|
|
### 1. **二维码解析器 (QRCodeParser)**
|
|
|
|
|
|
#### 支持的格式类型
|
|
|
```swift
|
|
|
// Wi-Fi 网络
|
|
|
WIFI:T:<加密类型>;S:<SSID>;P:<密码>;;
|
|
|
示例: WIFI:T:WPA;S:MyNetwork;P:MyPassword;;
|
|
|
|
|
|
// 邮箱地址
|
|
|
mailto:<邮箱地址>
|
|
|
示例: mailto:example@example.com
|
|
|
|
|
|
// 网址链接
|
|
|
<网址>
|
|
|
示例: https://www.example.com
|
|
|
|
|
|
// 电话号码
|
|
|
tel:+<国家代码><电话号码>
|
|
|
示例: tel:+8613800138000
|
|
|
|
|
|
// 短信
|
|
|
SMSTO:<电话号码>:<短信内容>
|
|
|
示例: SMSTO:+8613800138000:Hello
|
|
|
|
|
|
// 联系人信息 (vCard)
|
|
|
BEGIN:VCARD
|
|
|
VERSION:3.0
|
|
|
N:Doe;John;;;
|
|
|
FN:John Doe
|
|
|
TEL;TYPE=WORK,CELL:(123) 456-7890
|
|
|
EMAIL;TYPE=PREF,INTERNET:john.doe@example.com
|
|
|
ORG:Example Company
|
|
|
TITLE:Software Engineer
|
|
|
ADR;TYPE=WORK:;;123 Main St;Anytown;CA;12345;USA
|
|
|
URL:https://example.com
|
|
|
END:VCARD
|
|
|
|
|
|
// 支持vCard 2.1到3.0的自动转换
|
|
|
|
|
|
// 联系人信息 (MeCard)
|
|
|
MECARD:N:<姓>,<名>;NICKNAME:<昵称>;TEL:<电话>;EMAIL:<邮箱>;ORG:<公司>;ADR:<地址>;URL:<网站>;BDAY:<生日>;NOTE:<备注>;;
|
|
|
示例: MECARD:N:Doe,John;NICKNAME:Johnny;TEL:+1234567890;EMAIL:john.doe@example.com;ORG:Example Company;ADR:123 Main St,Anytown,CA,12345,USA;URL:https://example.com;BDAY:19820908;NOTE:Software Engineer;;
|
|
|
|
|
|
// 文本内容
|
|
|
<文本内容>
|
|
|
示例: Hello, this is a text message!
|
|
|
|
|
|
// 地理位置
|
|
|
geo:<纬度>,<经度>
|
|
|
示例: geo:37.7749,-122.4194
|
|
|
|
|
|
// 日历事件
|
|
|
BEGIN:VEVENT
|
|
|
SUMMARY:Meeting
|
|
|
DTSTART:20230101T090000Z
|
|
|
DTEND:20230101T100000Z
|
|
|
LOCATION:Office
|
|
|
END:VEVENT
|
|
|
|
|
|
// 社交媒体
|
|
|
Instagram: instagram://user?username=<用户名>
|
|
|
Facebook: fb://profile/<用户ID>
|
|
|
Spotify: spotify:search:<艺术家>;<歌曲>
|
|
|
X: twitter://user?screen_name=<用户名>
|
|
|
WhatsApp: whatsapp://send?phone=<电话号码>
|
|
|
Viber: viber://add?number=<电话号码>
|
|
|
Snapchat: snapchat://<用户名>
|
|
|
TikTok: https://www.tiktok.com/@<用户名>
|
|
|
```
|
|
|
|
|
|
#### 解析逻辑
|
|
|
```swift
|
|
|
static func parseQRCode(_ content: String) -> ParsedQRData {
|
|
|
let trimmedContent = content.trimmingCharacters(in: .whitespacesAndNewlines)
|
|
|
|
|
|
// 按优先级顺序检查各种格式
|
|
|
if trimmedContent.hasPrefix("WIFI:") {
|
|
|
return parseWiFi(trimmedContent)
|
|
|
}
|
|
|
|
|
|
if trimmedContent.hasPrefix("mailto:") {
|
|
|
return parseEmail(trimmedContent)
|
|
|
}
|
|
|
|
|
|
// ... 其他格式检查
|
|
|
|
|
|
// 默认为文本类型
|
|
|
return ParsedQRData(
|
|
|
type: .text,
|
|
|
title: "文本信息",
|
|
|
subtitle: trimmedContent.count > 50 ? String(trimmedContent.prefix(50)) + "..." : trimmedContent,
|
|
|
icon: "text.quote"
|
|
|
)
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### 2. **详情页面结构 (QRCodeDetailView)**
|
|
|
|
|
|
#### 页面布局
|
|
|
```swift
|
|
|
ScrollView {
|
|
|
VStack(spacing: 20) {
|
|
|
// 1. 二维码图片
|
|
|
qrCodeImageView
|
|
|
|
|
|
// 2. 二维码类型信息
|
|
|
qrCodeTypeSection
|
|
|
|
|
|
// 3. 解析后的详细信息
|
|
|
parsedInfoSection
|
|
|
|
|
|
// 4. 原始内容
|
|
|
originalContentSection
|
|
|
|
|
|
// 5. 操作按钮
|
|
|
actionButtonsSection
|
|
|
}
|
|
|
.padding()
|
|
|
}
|
|
|
```
|
|
|
|
|
|
#### 主要组件
|
|
|
- **qrCodeImageView**: 二维码图片展示，支持加载状态
|
|
|
- **qrCodeTypeSection**: 显示二维码类型和图标
|
|
|
- **parsedInfoSection**: 显示解析后的结构化信息
|
|
|
- **originalContentSection**: 显示原始内容，支持滚动
|
|
|
- **actionButtonsSection**: 操作按钮，包括收藏、复制、打开链接等
|
|
|
|
|
|
### 3. **集成到历史记录**
|
|
|
|
|
|
#### 导航方式
|
|
|
```swift
|
|
|
// 在 HistoryItemRow 中添加点击事件
|
|
|
.onTapGesture {
|
|
|
if item.dataType == DataType.qrcode.rawValue {
|
|
|
showingDetail = true
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 使用 sheet 展示详情页面
|
|
|
.sheet(isPresented: $showingDetail) {
|
|
|
if item.dataType == DataType.qrcode.rawValue {
|
|
|
NavigationView {
|
|
|
QRCodeDetailView(historyItem: item)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## 🎨 用户界面设计
|
|
|
|
|
|
### 1. **视觉层次**
|
|
|
- 使用卡片式设计，每个信息块独立显示
|
|
|
- 统一的圆角和阴影效果
|
|
|
- 清晰的信息分组和标题
|
|
|
|
|
|
### 2. **颜色系统**
|
|
|
- 蓝色：二维码类型
|
|
|
- 橙色：类型标签
|
|
|
- 绿色：解析信息
|
|
|
- 紫色：原始内容
|
|
|
- 红色：收藏状态
|
|
|
|
|
|
### 3. **图标系统**
|
|
|
- 使用 SF Symbols 图标
|
|
|
- 每个类型都有对应的图标
|
|
|
- 图标颜色与内容类型匹配
|
|
|
|
|
|
### 4. **响应式设计**
|
|
|
- 支持不同屏幕尺寸
|
|
|
- 自适应内容高度
|
|
|
- 滚动视图处理长内容
|
|
|
|
|
|
## 🚀 功能特性
|
|
|
|
|
|
### 1. **智能识别**
|
|
|
- 自动识别二维码格式
|
|
|
- 提取关键信息
|
|
|
- 格式化显示内容
|
|
|
|
|
|
### 2. **交互操作**
|
|
|
- 点击历史记录项进入详情页
|
|
|
- 收藏/取消收藏
|
|
|
- 复制内容到剪贴板
|
|
|
- 分享二维码内容
|
|
|
- 直接打开链接
|
|
|
|
|
|
### 3. **数据同步**
|
|
|
- 收藏状态实时更新
|
|
|
- 与 Core Data 数据同步
|
|
|
- 支持离线查看
|
|
|
|
|
|
### 4. **用户体验**
|
|
|
- 加载状态指示
|
|
|
- 操作反馈提示
|
|
|
- 错误处理
|
|
|
- 流畅的动画效果
|
|
|
|
|
|
## 📱 使用流程
|
|
|
|
|
|
### 1. **查看二维码详情**
|
|
|
1. 在历史记录页面点击二维码记录
|
|
|
2. 系统自动跳转到详情页面
|
|
|
3. 查看二维码图片、类型和解析信息
|
|
|
|
|
|
### 2. **收藏二维码**
|
|
|
1. 在详情页面点击收藏按钮
|
|
|
2. 系统显示收藏成功提示
|
|
|
3. 收藏状态同步到历史记录
|
|
|
|
|
|
### 3. **复制内容**
|
|
|
1. 点击"复制内容"按钮
|
|
|
2. 系统显示复制成功提示
|
|
|
3. 内容已复制到剪贴板
|
|
|
|
|
|
### 4. **打开链接**
|
|
|
1. 如果是URL类型的二维码，显示"打开链接"按钮
|
|
|
2. 点击按钮直接打开链接
|
|
|
3. 支持系统默认浏览器
|
|
|
|
|
|
### 5. **分享内容**
|
|
|
1. 点击右上角分享按钮
|
|
|
2. 系统显示分享表单
|
|
|
3. 选择分享方式和目标应用
|
|
|
|
|
|
## 🔍 支持的二维码类型
|
|
|
|
|
|
### 1. **网络相关**
|
|
|
- **Wi-Fi**: 网络名称、加密类型、密码
|
|
|
- **URL**: 网址链接
|
|
|
|
|
|
### 2. **通信相关**
|
|
|
- **Email**: 邮箱地址
|
|
|
- **Phone**: 电话号码
|
|
|
- **SMS**: 短信内容和号码
|
|
|
|
|
|
### 3. **联系人信息**
|
|
|
- **vCard**: 标准联系人格式
|
|
|
- **MeCard**: 简化联系人格式
|
|
|
|
|
|
### 4. **时间管理**
|
|
|
- **Calendar**: 日历事件信息
|
|
|
|
|
|
### 5. **社交媒体**
|
|
|
- **Instagram**: 用户主页
|
|
|
- **Facebook**: 页面或用户
|
|
|
- **Spotify**: 音乐曲目
|
|
|
- **X**: 用户主页
|
|
|
- **WhatsApp**: 聊天链接
|
|
|
- **Viber**: 联系人
|
|
|
- **Snapchat**: 用户
|
|
|
- **TikTok**: 用户主页
|
|
|
|
|
|
### 6. **其他类型**
|
|
|
- **Location**: 地理位置坐标
|
|
|
- **Text**: 纯文本信息
|
|
|
|
|
|
## 🧪 测试要点
|
|
|
|
|
|
### 1. **功能测试**
|
|
|
- ✅ 二维码图片生成
|
|
|
- ✅ 类型识别准确性
|
|
|
- ✅ 内容解析正确性
|
|
|
- ✅ 操作按钮功能
|
|
|
- ✅ 数据同步状态
|
|
|
|
|
|
### 2. **界面测试**
|
|
|
- ✅ 不同屏幕尺寸适配
|
|
|
- ✅ 长内容显示
|
|
|
- ✅ 加载状态
|
|
|
- ✅ 错误处理
|
|
|
|
|
|
### 3. **性能测试**
|
|
|
- ✅ 图片生成速度
|
|
|
- ✅ 页面加载时间
|
|
|
- ✅ 内存使用情况
|
|
|
|
|
|
## 🔮 未来扩展
|
|
|
|
|
|
### 1. **功能增强**
|
|
|
- 支持更多二维码格式
|
|
|
- 添加二维码编辑功能
|
|
|
- 支持批量操作
|
|
|
- 添加二维码历史版本
|
|
|
|
|
|
### 2. **用户体验**
|
|
|
- 自定义二维码样式
|
|
|
- 添加动画效果
|
|
|
- 支持深色模式
|
|
|
- 多语言支持
|
|
|
|
|
|
### 3. **数据分析**
|
|
|
- 二维码使用统计
|
|
|
- 热门类型分析
|
|
|
- 用户行为分析
|
|
|
|
|
|
## 📝 总结
|
|
|
|
|
|
二维码信息详情页面成功实现了以下目标：
|
|
|
|
|
|
1. **完整性**: 支持所有常见二维码格式的识别和解析
|
|
|
2. **易用性**: 直观的界面设计和清晰的信息展示
|
|
|
3. **功能性**: 丰富的操作选项和实用的功能特性
|
|
|
4. **集成性**: 与历史记录系统完美集成
|
|
|
5. **扩展性**: 为未来功能扩展奠定基础
|
|
|
|
|
|
该页面为用户提供了完整的二维码信息查看和管理体验，大大提升了应用的实用性和用户体验。🎉 |
