Skip to content

添加移动端 Codex 入门教程 Web App(5 章,面向业务同学)#1

Open
waynevic wants to merge 2 commits into
masterfrom
codex/create-tutorial-web-app-for-mobile-usage
Open

添加移动端 Codex 入门教程 Web App(5 章,面向业务同学)#1
waynevic wants to merge 2 commits into
masterfrom
codex/create-tutorial-web-app-for-mobile-usage

Conversation

@waynevic

@waynevic waynevic commented Mar 23, 2026

Copy link
Copy Markdown
Owner

Motivation

  • 需要一个面向非技术业务同学的、可在手机上演示的教程页面,以图文并茂的方式讲解移动端使用流程。
  • 教程要用业务化语言解释常见开发/协作概念(例如 Git、分支、Commit、PR),让业务同学能理解各功能代表的意义。
  • 页面应为手机优先并提供简单交互,帮助用户快速复制并在移动端实践提示词模板。

Description

  • 新增页面 index.html,构建单页教程型 Web App,包含 5 个章节并嵌入 SVG 插画、时间线、流程图、表格、卡片等可视化元素。
  • 新增样式文件 styles.css,实现移动优先响应式布局与卡片、导航、提示框等视觉组件样式。
  • 新增交互脚本 script.js,实现章节切换的 Tab 行为和平滑滚动,以及“复制提示词模板”的一键复制与成功/失败反馈。
  • 内容聚焦:第 1 章介绍 Codex 概念,第 2 章演示手机使用流程,第 3 章用白话解释版本/分支,第 4 章解释常见功能,第 5 章提供可直接复制的实战提示模板。

Testing

  • 运行 node --check script.js 验证了脚本语法并通过。

Codex Task


Note

Medium Risk
Adds a GitHub Actions workflow with pages:write and id-token:write permissions to auto-deploy the repository root to GitHub Pages; misconfiguration could unintentionally publish content. The rest is static HTML/CSS/JS with minimal runtime risk.

Overview
Adds a mobile-first, single-page Codex onboarding tutorial web app (index.html, styles.css, script.js) with 5 chapters, tab-style chapter navigation, and a one-click “copy prompt template” interaction.

Enables publishing the static site to GitHub Pages by adding an automated deployment workflow (.github/workflows/deploy-pages.yml) and updating README.md with local preview and Pages deployment instructions.

Written by Cursor Bugbot for commit e8b8c96. This will update automatically on new commits. Configure here.

Comment thread script.js
}, 1500);
} catch {
copyBtn.textContent = '复制失败,请手动复制';
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Copy failure state never resets button text

Medium Severity

The catch block sets copyBtn.textContent to the failure message but never resets it back to '复制模板', unlike the success path which uses setTimeout to restore the original label after 1500ms. On mobile browsers, navigator.clipboard.writeText frequently fails (non-HTTPS contexts, missing permissions, lack of user activation), so users are likely to encounter a permanently stuck error label with no visual indication they can retry.

Fix in Cursor Fix in Web

@cursor cursor 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.

Cursor Bugbot has reviewed your changes and found 2 potential issues.

There are 3 total unresolved issues (including 1 from previous review).

Fix All in Cursor

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: '.'

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Deployment exposes unrelated scraper script to public Pages

High Severity

The path: '.' setting in the upload artifact step deploys the entire repository root to GitHub Pages, including the pre-existing spider file — a Python web scraper that contains hardcoded target URLs and a spoofed Baiduspider User-Agent header. This makes the scraper source publicly accessible on the deployed site, exposing implementation details that likely weren't intended to be published.

Fix in Cursor Fix in Web

Comment thread script.js
const target = document.getElementById(btn.dataset.target);
if (target) {
target.classList.add('active');
target.scrollIntoView({ behavior: 'smooth', block: 'start' });

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

scrollIntoView hides chapter heading behind sticky nav

Medium Severity

scrollIntoView({ block: 'start' }) aligns the chapter section's top edge with the viewport top, but .chapter-nav is position: sticky; top: 0 with no corresponding scroll-margin-top on .chapter sections. The sticky nav (~50px tall) covers the <h2> heading of whichever chapter the user navigates to, hiding the primary content the user just selected.

Additional Locations (1)
Fix in Cursor Fix in Web

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant