Initial commit: obsidian to gitea

study/courses/pm/frontend.md

@@ -0,0 +1,418 @@
+# 招聘试题定制平台 · 手机 APP 页面与 Figma Prompt 设计
+
+> 面向「业务场景 1：基于手机的招聘代理平台」，这里设计两端：
+>
+> * **应聘者 App（Candidate App）**
+> * **招聘企业 HR App（HR App）**
+>   平台管理员一般用 Web 后台，这里不再设计移动端。
+
+---
+
+## 1. 手机 App 页面信息架构
+
+### 1.1 应聘者 App（Candidate App）
+
+> 典型用户路径：登录 → 浏览岗位 → 参加考试 → 查看结果 → 反馈试题。
+
+1. **C0 欢迎 / 登录 / 注册页**
+
+   * Tab：登录 / 注册
+   * 支持第三方登录（可选）
+
+2. **C1 岗位列表页（职位发现）**
+
+   * 顶部搜索栏
+   * 筛选条件：技术方向、城市、经验要求等
+   * 卡片：岗位名称、公司名、标签、一个「查看详情 / 去测试」按钮
+
+3. **C2 岗位详情 & 考试入口页**
+
+   * 展示岗位描述、能力要求、薪资范围（可选）
+   * 显示「本岗位在线测试信息」（题量、时长、截止时间）
+   * 主按钮：「开始在线测试」或「继续测试」
+
+4. **C3 我的考试列表页**
+
+   * Tab：全部 / 未开始 / 进行中 / 已完成
+   * 每条：岗位名、考试批次、状态、截止时间、入口按钮
+
+5. **C4 在线考试页（核心）**
+
+   * 顶部固定栏：返回按钮 + 考试标题 + 倒计时
+   * 中部：当前题目
+
+     * 题号、题型、分值
+     * 题干 + 附件区域
+     * 答题控件（单选/多选/文本/代码文本框等）
+   * 底部：
+
+     * 题目导航滑动条（题号圆点，不同状态颜色）
+     * 上一题 / 下一题按钮
+     * 悬浮主按钮：提交试卷（弹出确认对话框）
+
+6. **C5 考试结果页**
+
+   * 大号分数 + 通过/未通过状态
+   * 子卡片：总分、平均分、排名/百分位（可选）
+   * 能力维度雷达图 / 条形图（可选）
+   * 按钮：「查看详细解析」/「查看题目列表」
+
+7. **C6 题目解析与反馈页**
+
+   * 顶部：题目 + 正确答案 + 你的答案 + 解析
+   * 底部：反馈卡片
+
+     * 点评：题目是否清晰 / 难度是否合适（星级/表情）
+     * 文本输入框：补充意见
+     * 提交按钮
+
+8. **C7 个人中心 / 设置页**
+
+   * 基本信息、技能标签展示
+   * 考试历史入口
+   * 通知设置、隐私、退出登录
+
+---
+
+### 1.2 招聘企业 HR App（HR App）
+
+> 偏「移动监控 & 轻量管理」，重分析 / 复盘 / 小改动，而不是在手机上做复杂配置。
+
+1. **H0 HR 登录 / 切换企业页**
+
+   * 登录、忘记密码
+   * （多租户时）选择企业/组织
+
+2. **H1 HR 首页仪表盘**
+
+   * 顶部：公司名称 + 通知图标
+   * 核心指标卡片（纵向列表）：
+
+     * 今日参加考试人数
+     * 本周通过率
+     * 活跃岗位数
+   * 下方：
+
+     * 最近考试列表（横向卡片轮播）
+     * 「有问题的题目」提醒入口
+
+3. **H2 岗位列表页**
+
+   * 搜索 + 筛选（状态：招聘中 / 暂停 / 已关闭）
+   * 岗位卡片：岗位名、级别、最近考试人数、通过率
+   * 右下角悬浮按钮：「新建岗位」（进入简化版编辑流程）
+
+4. **H3 岗位详情页**
+
+   * 基本信息：岗位名称、级别、城市、要求技能标签
+   * 近期考试概览：最近 N 次考试的平均分/通过率
+   * 按钮：
+
+     * 查看全部考试
+     * 编辑岗位（跳 H4）
+     * 预览试卷配置（跳 H5）
+
+5. **H4 岗位快速编辑页（移动简化版）**
+
+   * 可编辑字段：岗位名称、级别、标签、是否开放招聘等
+   * 考试策略部分仅支持选择已有策略，不在手机上做复杂编辑
+   * 底部：取消 / 保存 按钮
+
+6. **H5 试卷预览页**
+
+   * 展示系统为该岗位生成的一套样卷
+   * 按题型分组（单选、多选、编程等）
+   * 可「锁定/解锁」某些题目（锁定后 PC 端配置时保留）
+
+7. **H6 考试结果分析页（移动版）**
+
+   * 顶部筛选条：岗位下拉 + 考试批次 + 时间区间
+   * 上半部分：KPI 卡片（平均分、通过率、参加人数）
+   * 下半部分：
+
+     * 简化图表（柱状图/折线图）
+     * 题目正确率列表（Top 问题 / Bottom 问题）
+
+8. **H7 题目质量列表页**
+
+   * 列表项：题干摘要、技能标签、质量分、使用次数、状态
+   * 支持按照质量分排序/筛选
+   * 点击进入 H8
+
+9. **H8 题目质量详情页**
+
+   * 展示具体题目内容、标准答案、解析
+   * 统计：使用次数、正确率、区分度、反馈分
+   * 操作按钮：标记“待修改”、标记“建议淘汰”
+
+10. **H9 HR 个人设置页**
+
+    * 个人信息、企业信息简略查看
+    * 通知开关
+    * 退出登录
+
+---
+
+## 2. 手机端关键页面草图（文字线框）
+
+### 2.1 C4 在线考试页（Candidate Exam）
+
+屏幕：手机竖屏（iPhone 15 / 390×844）
+
+* **顶部固定栏**
+
+  * 左：返回图标（←）
+  * 中：考试标题（单行，超出省略号）
+  * 右：倒计时（红色/醒目字体，例如「53:21」）
+
+* **中部内容区（Scroll）**
+
+  * 题目信息行：
+
+    * 「第 3 题」+ 标签「单选」「3 分」
+  * 主卡片：
+
+    * 题干文本（可多行）
+    * 若有图片/代码块，在题干下方单独容器显示
+  * 答题控件：
+
+    * 单选：Radio 列表，每个选项为卡片式按钮
+    * 多选：Checkbox 列表
+    * 填空/主观题：多行文本输入框
+
+* **底部固定区域**
+
+  * 上半：题号导航（水平滑动）
+
+    * 一排圆形按钮：1 2 3 4 5 …
+    * 已答：填充主色；未答：边框灰色；标记：角落有小点
+  * 下半：底部按钮栏
+
+    * 左按钮：「上一题」（次要）
+    * 中按钮：标记/取消标记
+    * 右按钮：「下一题」（主要）
+  * 右上角悬浮按钮或顶部菜单中放「交卷」按钮。
+
+---
+
+### 2.2 C5 结果页（Candidate Result）
+
+* 顶部：大号分数（如「83 分」）+ 状态标签（绿色「通过」/ 红色「未通过」）
+* 下方两列/纵向卡片：
+
+  * 卡片 1：考试信息（岗位名、日期、用时）
+  * 卡片 2：得分拆分（选择题分数、编程题分数等）
+* 中部：简化图表/可视化（可在 Figma 中用假图表示）
+* 底部按钮：
+
+  * 主按钮：「查看题目解析」
+  * 次按钮：「返回岗位列表」
+
+---
+
+### 2.3 H1 HR 首页仪表盘（Mobile）
+
+* 顶部 AppBar：
+
+  * 左：企业 Logo/图标 + 公司名
+  * 右：通知铃铛 + 头像
+
+* 主内容（纵向 Scroll）：
+
+  1. 指标卡片区域（左右滑动或纵向堆叠）：
+
+     * 今日参加考试人数
+     * 本周通过率
+     * 活跃岗位数
+  2. 模块「最近考试」：
+
+     * 卡片列表：岗位名 + 时间 + 参加人数 + 通过率
+  3. 模块「有问题的题目」：
+
+     * 小卡片：题干摘要 + “低正确率”“低反馈分”标签
+     * 点击跳转到 H7/H8
+
+---
+
+### 2.4 H6 HR 考试结果分析页（Mobile）
+
+* 顶部筛选条（横向滚动）：
+
+  * 下拉：岗位
+  * 下拉：考试批次
+  * 日期选择按钮
+  * 「应用」按钮
+
+* 主内容：
+
+  * KPI 卡片区域：平均分 / 通过率 / 参加人数（3 个小卡）
+  * 小图表区：
+
+    * 迷你折线图（七天平均分）
+    * 柱状图（分数段人数）
+  * 底部：考生列表（简化表格样式卡片）：
+
+    * 姓名、得分、提交时间、详情图标
+
+---
+
+## 3. Figma AI / Figma Make Prompt（手机 App 版本）
+
+> 建议用英文 Prompt，让 Figma 的 AI 更稳定。下面提供：
+> 1）一个「多屏手机 App Flow」总 prompt；
+> 2）一个「单屏模板」，方便你逐屏生成。
+
+---
+
+### 3.1 全局样式片段（可直接粘在每个 prompt 前）
+
+```text
+Design a modern mobile app UI for a recruitment test platform called “SmartHire Test”.
+
+Platform:
+- iOS and Android, focus on iPhone 15 size (390 x 844) in portrait.
+Visual style:
+- Clean, professional, light theme.
+- Primary color #2563EB (blue), neutral grays, lots of white space.
+- Rounded corners (10–16px), soft shadows for cards.
+- Use a standard mobile tab bar or bottom navigation where it makes sense.
+Typography similar to SF Pro / Inter / Roboto.
+```
+
+---
+
+### 3.2 多屏 Candidate & HR App Flow Prompt（推荐）
+
+```text
+You are designing a mobile app for a customizable recruitment test platform called “SmartHire Test”.
+
+Use iPhone 15 portrait frames (390 x 844). 
+Apply a modern, clean, light theme with primary color #2563EB and rounded cards.
+
+Create the following screens. Name each frame with the given screen name.
+
+1. Screen: "C0 Candidate Welcome & Login"
+   - A welcome illustration or simple brand panel at the top.
+   - Tabs or segmented control for "Sign in" and "Sign up".
+   - Email and password fields, "Sign in" primary button, and "Forgot password" link.
+   - Optional third-party login buttons at the bottom.
+
+2. Screen: "C1 Candidate Job List"
+   - Top app bar with logo "SmartHire Test" and a small profile avatar.
+   - Search bar at the top of the content.
+   - Horizontal chips for filters (e.g. Skills, City, Level).
+   - Vertical list of job cards: each card shows job title, company, tags, and a primary button "View details" or "Take test".
+
+3. Screen: "C2 Candidate Job Detail"
+   - Job title, company, level, location at the top.
+   - Section for job description and required skills (tags).
+   - Section "Online test for this job" with chips indicating number of questions, duration, and difficulty.
+   - A primary CTA button at the bottom: "Start test" or "Continue test".
+
+4. Screen: "C3 Candidate Exam List"
+   - Simple tab bar at the top for "All", "Active", "Completed".
+   - List items showing: job title, exam name, status badge, deadline, and a chevron or button to open the exam.
+
+5. Screen: "C4 Candidate Online Exam"
+   - Fixed top bar with back arrow, exam title in the center, and a countdown timer on the right.
+   - Main scroll area:
+     - Row with "Question 3" label, pill badges for type (Single choice) and score (3 pts).
+     - Card with question text and optional image placeholder.
+     - Answer area: radio buttons or selection cards for options.
+   - Bottom fixed area:
+     - First row: horizontally scrollable question number chips (1, 2, 3, ...), with different states for answered / not answered / flagged.
+     - Second row: three buttons "Previous", "Flag", "Next" (primary on "Next").
+   - A secondary icon or button to "Submit exam" that opens a confirmation dialog.
+
+6. Screen: "C5 Candidate Result"
+   - Large score display at the top (e.g., "83/100") and a badge indicating Pass or Fail.
+   - Summary cards for "Total score", "Average score", "Percentile" or "Rank".
+   - A simple chart area (score distribution or skill radar) using placeholder graphics.
+   - A section "Question review" with a list of questions and icons for correct / incorrect.
+   - Bottom primary button: "View detailed explanations".
+
+7. Screen: "C6 Candidate Question Review & Feedback"
+   - Top shows the current question text, correct answer, and the candidate's answer.
+   - Below, a small explanation text block.
+   - At the bottom, a feedback card:
+     - Star rating or 1–5 scale for "Clarity" and "Difficulty".
+     - A multiline text field for additional comments.
+     - Primary button "Submit feedback".
+
+8. Screen: "H0 HR Login"
+   - Simple login screen for HR users, consistent style with candidate login but with "HR" emphasis in the title.
+
+9. Screen: "H1 HR Home Dashboard"
+   - Top app bar with company name and notification icon.
+   - A vertical stack of KPI cards: "Today’s test takers", "This week pass rate", "Active positions".
+   - Section "Recent exams": small cards with job title, date, participants, pass rate.
+   - Section "Problematic questions": list items with a short question snippet and a warning badge.
+
+10. Screen: "H2 HR Job List"
+    - List of job cards with job title, level, status badge, and small stats (last exam participants / pass rate).
+    - Floating action button at the bottom-right: "+" to create a new job.
+
+11. Screen: "H3 HR Job Detail"
+    - Job header with title, level, and status tag.
+    - Sections:
+      - Basic info (location, department).
+      - Required skills (tags).
+      - Latest exam summary (average score, pass rate).
+    - Buttons at the bottom: "View exams", "Quick edit".
+
+12. Screen: "H6 HR Exam Analytics"
+    - Filter bar at the top with dropdowns for job and exam batch and a date-range pill.
+    - KPI cards for average score, pass rate, number of candidates.
+    - Simple mini chart (histogram or line chart) to show score distribution.
+    - List of candidate results as cards (name, score, submitted time, chevron for details).
+
+13. Screen: "H7 HR Question Quality List"
+    - Search bar and filter chips (by skill, difficulty, quality score).
+    - Vertical list of question items: each with a short question text, skill tag, usage count, quality score, and status.
+    - Tapping an item leads to H8.
+
+14. Screen: "H8 HR Question Quality Detail"
+    - Top: full question text and answer options.
+    - Below: a stats card with usage count, average score, correct rate, discrimination, feedback score.
+    - Actions at the bottom: outlined button "Mark for review", primary button "Suggest deprecation".
+
+Across all screens:
+- Use consistent mobile navigation and components.
+- Use clear hierarchy, spacing, and tappable elements sized for touch.
+- Create a simple prototype flow: candidate screens connected by a logical path, and HR screens connected separately.
+```
+
+---
+
+### 3.3 单屏 Mobile Prompt 模板（可按需复用）
+
+```text
+Design a single mobile screen for the “SmartHire Test” app.
+
+Target device:
+- iPhone 15 in portrait (390 x 844).
+
+Visual style:
+- Modern, clean, light theme.
+- Primary color #2563EB, neutral gray background, rounded cards.
+- Typography similar to SF Pro / Inter.
+
+Screen name: {{SCREEN_NAME}}
+
+Screen description:
+{{DETAILED_DESCRIPTION_HERE}}
+
+Use clear sections and card components. Make all interactive elements touch friendly (at least 44x44 points).
+```
+
+示例：如果你只想生成「C4 Candidate Online Exam」这一屏，就把 `{{SCREEN_NAME}}` 换掉，然后写一段 description（你可以直接用我上面 C4 的说明）。
+
+---
+
+如果你确认这套 **手机端页面列表 + 草图 + Figma Prompt** 没问题，我可以下一步帮你把：
+
+-「Web + App 前端设计章节」
+
+* 和前面系统设计（UML + 数据库 + 算法）
+
+统一成一份完整的课程项目系统设计报告。