Skip to content

feat(web): add mobile download QR to landing page - #91

Merged
HansonL622 merged 1 commit into
1024XEngineer:mainfrom
HansonL622:codex/landing-mobile-download
Aug 14, 2026
Merged

feat(web): add mobile download QR to landing page#91
HansonL622 merged 1 commit into
1024XEngineer:mainfrom
HansonL622:codex/landing-mobile-download

Conversation

@HansonL622

Copy link
Copy Markdown
Contributor

Summary

  • add the mobile download QR asset to the Web landing page
  • make the phone preview and Mobile app badge link to the FIR download page
  • update landing-page copy and FAQ for mobile installation
  • add responsive and keyboard-focus styling for the download entry

Testing

  • npm run build
  • verified desktop and 390px mobile layouts locally
  • verified QR asset loading, download URLs, horizontal overflow, and browser console errors

@fennoai fennoai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

审查结论

移动端下载入口的组件、响应式布局与构建流程已检查;生产构建通过。当前实现仍有两个会直接影响下载入口可用性与安全性的阻塞点:二维码在实际 CSS 尺寸下不可稳定解码,且二维码和点击入口都指向明文 HTTP 下载页。

验证:npm ci && npm run build;对提交的二维码按 82px/58px 渲染规则进行解码复现;检查下载目标的 HTTP/TLS 响应。

{ question: "AI 的反馈可以替代老师吗?", answer: "UniSpeaking 用于日常练习和即时反馈,不替代专业教师、考试官方评分或正式语言诊断。" },
];

const mobileDownloadUrl = "http://fir.qiniuapi.com/v1zyqajm?utm_source=fir&utm_medium=qr";

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P1] 不要通过明文 HTTP 分发移动端安装入口

这里的新链接同时被写入可点击入口和二维码,但目标仅通过 http:// 返回下载页面;在 HTTPS 落地页点击后会降级到明文连接,网络中的攻击者可以替换页面、下载地址或安装说明。尝试同域 HTTPS 也无法作为替代,因为当前证书已过期且域名不匹配。由于这是引导用户安装移动应用的路径,请改用证书有效、受项目控制的 HTTPS 下载地址(或先跳转到项目自己的 HTTPS 页面),再重新生成二维码。

.landing-device--mobile .landing-device__screen { width: 100%; height: 100%; padding: 44px 14px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 17px; color: #1c1c1b; text-align: center; background: #f4f4f0; }
.landing-mobile-download { text-decoration: none; }
.landing-device--mobile img { width: 42px; height: 42px; margin-bottom: 15px; border-radius: 8px; }
.landing-device--mobile .landing-mobile-download__qr { width: 82px; height: 82px; padding: 6px; object-fit: contain; border: 1px solid #deded8; border-radius: 6px; background: #fff; image-rendering: pixelated; }

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P1] 保留二维码的四模块静区和整数缩放

这个源图没有 QR 规范要求的四模块白色静区,而这里在 box-sizing: border-box 下把 33×33 模块内容压到 68px(560px 以下为 46px),同时只留下约 3 个模块的白边并进行非整数缩放。我用提交的图片按这两个 CSS 尺寸渲染后,OpenCV 均无法检测或解码;把同一模块矩阵改为四模块静区、2px 整数缩放的 82px 图后即可立即解码。这样桌面端展示的“扫码下载”会在常见扫码器/摄像头上不可靠;请让资产自带四模块静区,并按整数模块尺寸渲染(或增大容器并相应调整移动断点)。

@pionxe pionxe left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

@HansonL622
HansonL622 merged commit 455a198 into 1024XEngineer:main Aug 14, 2026
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants