cole
/
MyQRCode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'dc0a1e2356'
${ noResults }
MyQRCode/docs/QRCODE_DETAIL_VIEW_README.md

8.2 KiB
Raw Blame History Escape

二维码信息详情页面

🎯 概述

成功创建了二维码信息详情页面，提供完整的二维码信息展示、解析和操作功能。该页面支持所有常见的二维码格式，包括 Wi-Fi、Email、URL、Phone、SMS、vCard、MeCard、Calendar、社交媒体等。

✨ 主要功能

1. 二维码图片展示

  • 自动生成二维码图片
  • 高清显示，支持缩放
  • 美观的圆角和阴影效果
  • 加载状态指示器

2. 二维码类型识别

  • 自动识别二维码类型
  • 显示对应的图标和名称
  • 支持所有预定义的二维码类型

3. 智能内容解析

  • 自动解析二维码内容
  • 提取关键信息并格式化显示
  • 支持多种编码格式

4. 操作功能

  • 收藏/取消收藏
  • 复制内容到剪贴板
  • 分享二维码内容
  • 打开链接（URL类型）

🔧 技术实现

1. 二维码解析器 (QRCodeParser)

支持的格式类型

// 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:track:<曲目ID>
Twitter: https://twitter.com/<用户名>
WhatsApp: whatsapp://send?phone=<电话号码>
Viber: viber://add?number=<电话号码>
Snapchat: snapchat://<用户名>
TikTok: https://www.tiktok.com/@<用户名>

解析逻辑

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)

页面布局

ScrollView {
    VStack(spacing: 20) {
        // 1. 二维码图片
        qrCodeImageView
        
        // 2. 二维码类型信息
        qrCodeTypeSection
        
        // 3. 解析后的详细信息
        parsedInfoSection
        
        // 4. 原始内容
        originalContentSection
        
        // 5. 操作按钮
        actionButtonsSection
    }
    .padding()
}

主要组件

  • qrCodeImageView: 二维码图片展示，支持加载状态
  • qrCodeTypeSection: 显示二维码类型和图标
  • parsedInfoSection: 显示解析后的结构化信息
  • originalContentSection: 显示原始内容，支持滚动
  • actionButtonsSection: 操作按钮，包括收藏、复制、打开链接等

3. 集成到历史记录

导航方式

// 在 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: 音乐曲目
  • Twitter: 用户主页
  • WhatsApp: 聊天链接
  • Viber: 联系人
  • Snapchat: 用户
  • TikTok: 用户主页

6. 其他类型

  • Location: 地理位置坐标
  • Text: 纯文本信息

🧪 测试要点

1. 功能测试

  • ✅ 二维码图片生成
  • ✅ 类型识别准确性
  • ✅ 内容解析正确性
  • ✅ 操作按钮功能
  • ✅ 数据同步状态

2. 界面测试

  • ✅ 不同屏幕尺寸适配
  • ✅ 长内容显示
  • ✅ 加载状态
  • ✅ 错误处理

3. 性能测试

  • ✅ 图片生成速度
  • ✅ 页面加载时间
  • ✅ 内存使用情况

🔮 未来扩展

1. 功能增强

  • 支持更多二维码格式
  • 添加二维码编辑功能
  • 支持批量操作
  • 添加二维码历史版本

2. 用户体验

  • 自定义二维码样式
  • 添加动画效果
  • 支持深色模式
  • 多语言支持

3. 数据分析

  • 二维码使用统计
  • 热门类型分析
  • 用户行为分析

📝 总结

二维码信息详情页面成功实现了以下目标：

  1. 完整性: 支持所有常见二维码格式的识别和解析
  2. 易用性: 直观的界面设计和清晰的信息展示
  3. 功能性: 丰富的操作选项和实用的功能特性
  4. 集成性: 与历史记录系统完美集成
  5. 扩展性: 为未来功能扩展奠定基础

该页面为用户提供了完整的二维码信息查看和管理体验，大大提升了应用的实用性和用户体验。🎉