IiFei7Initial commit: Glance Browser for HarmonyOS

Via浏览器 vs 观澜浏览器交互差异详细分析

生成时间: 2026-05-22

🎯 核心交互差异

1. 地址栏交互差异

Via浏览器地址栏交互

┌─────────────────────────────────────────┐
│ 🔒  网站标题/URL        🔄/❌  ⋮        │
└─────────────────────────────────────────┘

交互流程：
1. 点击安全图标(🔒) → 弹出站点信息卡片
   - 显示证书详情
   - 显示连接安全性
   - 提供证书管理选项

2. 点击标题 → 切换为URL输入模式
   - 自动选中全部文本
   - 支持快速编辑
   - Enter键加载新URL

3. 点击刷新图标 → 刷新/停止加载
   - 加载中显示❌图标
   - 空闲时显示🔄图标

4. 点击更多菜单(⋮) → 展开功能菜单
   - 刷新、后退、前进
   - 添加书签、分享
   - 页面查找、阅读模式
   - 夜间模式、设置

观澜浏览器地址栏交互

┌─────────────────────────────────────────┐
│ 🔒  网站标题/URL        🔄/❌  ⋮        │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│ ████████░░░░░░░░░░░░  (加载进度条)      │
└─────────────────────────────────────────┘

交互流程：
1. 点击安全图标(🔒) → 弹出站点信息对话框 ✅
   - 显示安全状态（HTTPS/HTTP）
   - 显示站点标题、URL、域名
   - 提供"复制网址"和"编辑网址"按钮
   - ⚠️ 缺少证书详情

2. 点击标题 → 切换为URL编辑模式 ✅
   - 显示TextInput输入框
   - 支持编辑和提交
   - 失去焦点自动退出编辑模式

3. 进度条位置 → 紧贴地址栏下方 ✅
   - 橙色线性进度条
   - 高度3像素
   - 加载完成后自动隐藏

差异总结:

✅ 基本交互一致
⚠️ 观澜缺少证书详情显示
✅ 观澜进度条位置更合理

2. 菜单系统交互差异

Via浏览器菜单结构

更多菜单 (⋮)
├─ 刷新/停止
├─ 后退
├─ 前进
├─ ──────────
├─ 添加书签
├─ 书签管理
├─ 历史记录
├─ 下载管理
├─ ──────────
├─ 分享页面
├─ 页面查找
├─ 阅读模式 ⭐ (独有)
├─ 夜间模式
├─ ──────────
├─ 用户代理 ⭐ (独有)
├─ 代理设置 ⭐ (独有)
├─ 设置
└─ 关于

观澜浏览器菜单结构

更多菜单 (⋮)
├─ 刷新/停止
├─ 后退
├─ 前进
├─ ──────────
├─ 添加书签
├─ 书签管理
├─ 历史记录
├─ 下载管理
├─ ──────────
├─ 分享页面
├─ 页面查找
├─ 夜间模式
├─ 广告拦截 ⭐ (独有)
├─ ──────────
└─ 设置

差异总结:

❌ 观澜缺少阅读模式
❌ 观澜缺少用户代理切换
❌ 观澜缺少代理设置
✅ 观澜独有广告拦截功能

3. 标签页管理交互差异

Via浏览器标签页管理

交互方式：
1. 底部标签页按钮（显示数量徽章）
2. 点击打开标签页管理面板
3. 标签页列表显示：
   - 网站图标
   - 标题
   - URL
   - 关闭按钮
4. 支持手势操作：
   - 左右滑动切换标签
   - 上滑关闭标签
5. 新建标签页：+按钮

观澜浏览器标签页管理

交互方式：
1. 底部标签页按钮（显示数量徽章）✅
2. 点击打开标签页管理面板 ✅
3. 标签页列表显示：✅
   - 网站图标
   - 标题
   - URL
   - 关闭按钮
4. 新建标签页：+按钮 ✅
5. ⚠️ 缺少手势操作

差异总结:

✅ 基本功能一致
⚠️ 观澜缺少手势操作支持

4. 书签管理交互差异

Via浏览器书签管理

交互流程：
1. 添加书签：
   - 菜单 → 添加书签
   - 弹出对话框
   - 编辑标题和URL
   - 选择文件夹
   - 保存

2. 书签管理页面：
   - 文件夹视图
   - 列表视图
   - 搜索功能
   - 编辑/删除
   - 排序功能
   - 导入/导出

3. 访问书签：
   - 点击书签直接打开
   - 长按显示选项菜单

观澜浏览器书签管理

交互流程：
1. 添加书签：✅
   - 菜单 → 添加书签
   - 自动保存当前页面

2. 书签管理页面：✅
   - 列表视图
   - 搜索功能
   - 编辑/删除
   - 导入/导出
   - ⚠️ 缺少文件夹分类
   - ⚠️ 缺少排序功能

3. 访问书签：✅
   - 点击书签直接打开

差异总结:

✅ 基本功能一致
⚠️ 观澜缺少文件夹分类
⚠️ 观澜缺少排序功能

5. 历史记录交互差异

Via浏览器历史记录

交互流程：
1. 历史记录页面：
   - 按日期分组
   - 搜索功能
   - 清除历史
   - 单条删除
   - 访问次数统计

2. 历史记录项：
   - 网站图标
   - 标题
   - URL
   - 访问时间
   - 访问次数

观澜浏览器历史记录

交互流程：
1. 历史记录页面：✅
   - 按日期分组 ✅
   - 搜索功能 ✅
   - 清除历史 ✅
   - 单条删除 ✅
   - 访问次数统计 ✅

2. 历史记录项：✅
   - 网站图标
   - 标题
   - URL
   - 访问时间

差异总结:

✅ 功能完全一致

6. 夜间模式交互差异

Via浏览器夜间模式

实现方式：
1. CSS注入方式
2. 反转颜色算法
3. 自定义夜间模式CSS
4. 跟随系统主题选项

交互：
- 菜单 → 夜间模式开关
- 设置 → 夜间模式选项
  - 手动切换
  - 跟随系统
  - 定时切换

观澜浏览器夜间模式

实现方式：✅
1. CSS注入方式 ✅
2. 主题管理器 ✅
3. 主题持久化 ✅

交互：✅
- 菜单 → 夜间模式开关 ✅
- 设置 → 主题选项 ✅

差异总结:

✅ 基本功能一致
⚠️ 观澜缺少定时切换功能

7. 页面查找交互差异

Via浏览器页面查找

交互流程：
1. 菜单 → 页面查找
2. 显示查找栏：
   - 搜索输入框
   - 上一个/下一个按钮
   - 匹配数量显示
   - 关闭按钮
3. 实时高亮匹配结果
4. 支持正则表达式

观澜浏览器页面查找

交互流程：
1. 菜单 → 页面查找 ✅
2. 显示查找栏：✅
   - 搜索输入框
   - 上一个/下一个按钮
   - 匹配数量显示
   - 关闭按钮
3. 实时高亮匹配结果 ✅

差异总结:

✅ 功能完全一致

🚀 高级功能差异

1. 阅读模式（Via独有）

功能描述:

阅读模式特性：
1. 内容提取：
   - 自动识别正文内容
   - 移除广告和干扰元素
   - 提取标题、作者、日期

2. 阅读体验：
   - 自定义字体大小
   - 自定义字体类型
   - 背景色选择（白色、米黄、深色）
   - 行间距调节
   - 页边距调节

3. 交互功能：
   - 语音朗读
   - 翻页导航
   - 书签位置记忆
   - 分享正文

实现建议:

// 1. 内容提取器
class ContentExtractor {
  // 使用Readability算法
  extract(html: string): Article {
    // 1. 解析DOM
    // 2. 计算内容得分
    // 3. 提取正文
    // 4. 清理HTML标签
    return article
  }
}

// 2. 阅读模式组件
@Component
struct ReaderModePage {
  @State article: Article = null
  @State settings: ReaderSettings = defaultSettings
  
  build() {
    Column() {
      // 控制栏
      Row() {
        Button('返回')
        Button('分享')
        Button('设置')
      }
      
      // 内容区域
      Scroll() {
        Column() {
          Text(this.article.title)
            .fontSize(24)
            .fontWeight(FontWeight.Bold)
          
          Text(this.article.content)
            .fontSize(this.settings.fontSize)
            .fontFamily(this.settings.fontFamily)
            .lineHeight(this.settings.lineHeight)
        }
      }
      .backgroundColor(this.settings.backgroundColor)
    }
  }
}

2. 用户代理切换（Via独有）

功能描述:

UA切换特性：
1. 预设UA：
   - Android默认
   - iOS Safari
   - Chrome Desktop
   - 自定义

2. 应用场景：
   - 访问桌面版网站
   - 解决兼容性问题
   - 绕过设备检测

3. 交互：
   - 设置 → 用户代理
   - 选择预设或自定义
   - 自动刷新页面

实现建议:

// UA管理器
class UserAgentManager {
  private static presets: Map<string, string> = new Map([
    ['Android', 'Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36'],
    ['iOS', 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15'],
    ['Desktop', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'],
    ['iPad', 'Mozilla/5.0 (iPad; CPU OS 16_0 like Mac OS X) AppleWebKit/605.1.15']
  ])
  
  static setUserAgent(controller: WebviewController, ua: string) {
    controller.userAgent = ua
  }
}

// 设置页面
@Component
struct UASettingsPage {
  @State selectedUA: string = 'Android'
  
  build() {
    Column() {
      Text('用户代理设置')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      
      ForEach(Array.from(UserAgentManager.presets.keys()), (key: string) => {
        Row() {
          Radio({ value: key, group: 'ua' })
          Text(key)
        }
      })
      
      Button('应用')
        .onClick(() => {
          const ua = UserAgentManager.presets.get(this.selectedUA)
          // 应用UA并刷新
        })
    }
  }
}

3. 广告拦截（观澜独有）

功能描述:

广告拦截特性：
1. 过滤规则：
   - 50+内置规则
   - 支持自定义规则
   - 规则更新机制

2. 拦截统计：
   - 今日拦截数量
   - 总拦截数量
   - 拦截列表

3. 白名单：
   - 支持添加白名单网站
   - 白名单持久化

4. 交互：
   - 菜单 → 广告拦截统计
   - 设置 → 广告拦截选项

优势分析:

提升页面加载速度
减少流量消耗
改善用户体验
减少干扰信息

📊 交互体验对比总结

交互一致性评分

功能模块	一致性评分	说明
地址栏交互	95%	基本一致，缺少证书详情
菜单系统	85%	缺少4个功能项
标签页管理	90%	缺少手势操作
书签管理	85%	缺少文件夹和排序
历史记录	100%	完全一致
夜间模式	90%	缺少定时切换
页面查找	100%	完全一致
总体评分	92%	高度一致

Via浏览器 vs 观澜浏览器交互差异详细分析

🎯 核心交互差异

1. 地址栏交互差异

Via浏览器地址栏交互

观澜浏览器地址栏交互

2. 菜单系统交互差异

Via浏览器菜单结构

观澜浏览器菜单结构

3. 标签页管理交互差异

Via浏览器标签页管理

观澜浏览器标签页管理

4. 书签管理交互差异

Via浏览器书签管理

观澜浏览器书签管理

5. 历史记录交互差异

Via浏览器历史记录

观澜浏览器历史记录

6. 夜间模式交互差异

Via浏览器夜间模式

观澜浏览器夜间模式

7. 页面查找交互差异

Via浏览器页面查找

观澜浏览器页面查找

🚀 高级功能差异

1. 阅读模式（Via独有）

2. 用户代理切换（Via独有）

3. 广告拦截（观澜独有）

📊 交互体验对比总结

交互一致性评分

🎯 优化建议

短期优化（1-2周）

中期优化（1个月）

长期优化（持续）

📝 相关文档

Via浏览器 vs 观澜浏览器 交互差异详细分析

🎯 核心交互差异

1. 地址栏交互差异

Via浏览器地址栏交互

观澜浏览器地址栏交互

2. 菜单系统交互差异

Via浏览器菜单结构

观澜浏览器菜单结构

3. 标签页管理交互差异

Via浏览器标签页管理

观澜浏览器标签页管理

4. 书签管理交互差异

Via浏览器书签管理

观澜浏览器书签管理

5. 历史记录交互差异

Via浏览器历史记录

观澜浏览器历史记录

6. 夜间模式交互差异

Via浏览器夜间模式

观澜浏览器夜间模式

7. 页面查找交互差异

Via浏览器页面查找

观澜浏览器页面查找

🚀 高级功能差异

1. 阅读模式（Via独有）

2. 用户代理切换（Via独有）

3. 广告拦截（观澜独有）

📊 交互体验对比总结

交互一致性评分

🎯 优化建议

短期优化（1-2周）

中期优化（1个月）

长期优化（持续）

📝 相关文档

Via浏览器 vs 观澜浏览器交互差异详细分析