Browse Source

docs: 更新设计令牌与开发规范文档

- src/theme:补充企业端与工具页所需的设计令牌
- AGENTS.md:同步分层架构、配色规范与 Git 提交规范
- screenshots:补充商店截图素材目录约定(README + capture-manifest,PNG 已由 .gitignore 排除)
master
doublex001 2 months ago
parent
commit
fe70c4cf9f
  1. 36
      AGENTS.md
  2. 64
      screenshots/README.md
  3. 95
      screenshots/capture-manifest.json
  4. 0
      screenshots/zh-CN/android-phone/.gitkeep
  5. 0
      screenshots/zh-CN/ipad/.gitkeep
  6. 0
      screenshots/zh-CN/iphone/.gitkeep
  7. 30
      src/theme/colors.ts
  8. 2
      src/theme/index.ts

36
AGENTS.md

@ -10,7 +10,7 @@ Read the exact versioned docs at https://docs.expo.dev/versions/v57.0.0/ before
【核心原则】 【核心原则】
做任务前,先检查问题有没有错误前提、逻辑跳跃和信息缺失。 不要迎合我,要独立判断,区分事实、预测和主观观点。 涉及数字、人物和结论时尽量核实来源。 不同意就直接指出并给出依据、风险和替代解释。 还要主动提醒我忽略的变量、成本和偏差。 做任务前,先检查问题有没有错误前提、逻辑跳跃和信息缺失。 不要迎合我,要独立判断,区分事实、预测和主观观点。 涉及数字、人物和结论时尽量核实来源。 不同意就直接指出并给出依据、风险和替代解释。 还要主动提醒我忽略的变量、成本和偏差。
请在每周的周一-周五的每天17:50提交一次git仓库,说明今天新增与改动的内容,每天开始的时候拉取一次,每天结束的时候提交一次,上班时间是9:00-18:00 请在每周的周一-周五的9:10的时候拉取一次、每天17:50提交一次git仓库,说明今天新增与改动的内容,上班时间是9:00-18:00,有页面就一定要有入口
业务逻辑分层管理,不是没有,而是被妥善组织: 业务逻辑分层管理,不是没有,而是被妥善组织:
+------------------+--------------------------------------------------+----------------------------------------------------------------------------------------+ +------------------+--------------------------------------------------+----------------------------------------------------------------------------------------+
@ -35,7 +35,6 @@ constants/ # 常量定义(枚举、配置项等)
app/ app/
(tabs)/ # 底部Tab页面 (tabs)/ # 底部Tab页面
index.tsx # 首页
jobs.tsx # 岗位列表页 jobs.tsx # 岗位列表页
chat.tsx # 沟通页 chat.tsx # 沟通页
growth.tsx # 成长页 growth.tsx # 成长页
@ -92,11 +91,11 @@ _layout.tsx # 根布局
Hook: Hook:
- 以 use 开头,采用 use + 名词 + 动词 - 以 use 开头,采用 use + 名词 + 动词
- 示例:useJobList、useUserProfile、useCategoryData - 示例:useJobList、useGrowthData、useProfileData
API函数: API函数:
- 以 fetch 开头,采用 fetch + 名词 - 以 fetch 开头,采用 fetch + 名词
- 示例:fetchJobList、fetchUserInfo、fetchMatchData - 示例:fetchJobList、fetchUserProfile、fetchConversations
类型/接口: 类型/接口:
- 使用名词,不添加 I 前缀 - 使用名词,不添加 I 前缀
@ -106,7 +105,7 @@ API函数:
组件文件: 组件文件:
- 使用 PascalCase(大驼峰) - 使用 PascalCase(大驼峰)
- 示例:JobListScreen.tsx、SearchBar.tsx - 示例:JobListScreen.tsx、SearchBar.tsx
- 页面组件以 Screen 结尾:HomeScreen.tsx、JobsScreen.tsx - 页面组件以 Screen 结尾:JobsScreen.tsx、ProfileScreen.tsx
常量: 常量:
- 使用 UPPER_SNAKE_CASE(全大写下划线) - 使用 UPPER_SNAKE_CASE(全大写下划线)
@ -418,32 +417,7 @@ Hook层测试:
十一、接口定义示例(在 api.ts 中) 十一、接口定义示例(在 api.ts 中)
======================================== ========================================
// 接口1:获取用户信息 // 接口1:获取岗位列表(含排序/筛选/搜索/分页)
// GET /api/user/profile
// 返回值:{ name: string, slogan: string }
export const fetchUserInfo = async (): Promise<UserInfo> => {
// TODO: 替换为真实接口
return new Promise((resolve) => {
setTimeout(() => {
resolve({ name: '李明', slogan: '精准高效·全链条一站式求职服务' });
}, 500);
});
};
// 接口2:获取匹配度
// GET /api/match/position
// 参数:{ userId: string }
// 返回值:{ position: string, matchRate: number }
export const fetchMatchData = async (params: { userId: string }): Promise<MatchData> => {
// TODO: 替换为真实接口
return new Promise((resolve) => {
setTimeout(() => {
resolve({ position: '高级前端工程师', matchRate: 95 });
}, 500);
});
};
// 接口3:获取岗位列表(含排序/筛选/搜索/分页)
// GET /api/jobs // GET /api/jobs
// 参数:{ sortBy: string, keyword: string, industry: string, city: string, page: number, pageSize: number } // 参数:{ sortBy: string, keyword: string, industry: string, city: string, page: number, pageSize: number }
// 返回值:{ jobs: Job[], total: number } // 返回值:{ jobs: Job[], total: number }

64
screenshots/README.md

@ -0,0 +1,64 @@
# 职来 · App Store / Google Play 截图流水线
本目录为「职来」App 的商店素材(App Store Connect + Google Play Console)准备区,遵循
[Expo App Store Screenshots](https://www.npmjs.com/package/expo-app-store-screenshots) 技能的目录与命名约定。
## 目录结构(约定)
```
screenshots/<locale>/<device>/NN-<device>-<screen>.png
```
- `<locale>`:BCP-47 标签,当前为 `zh-CN`(App Store Connect 上传时需映射为 `zh-Hans`)。
- `<device>`:`iphone` / `ipad` / `android-phone`。
- `NN`:两位序号,保证排序一致(见 `capture-manifest.json`)。
- `<screen>`:页面 kebab slug。
当前已预建:`screenshots/zh-CN/{iphone,ipad,android-phone}/`(含 `.gitkeep` 占位)。
## 商店目标尺寸
| 设备 | 尺寸 | 说明 |
| -------------- | ----------- | -------------------------------------- |
| `iphone` | 1284×2778 | App Store 6.5" 展示(捕获后缩放) |
| `ipad` | 2064×2752 | App Store 13" 展示(原生尺寸) |
| `android-phone`| 1440×3120 | Google Play 手机(9:19.5) |
## 待捕获画面
见 `capture-manifest.json`。已包含本次新增的 4 个页面:
`skill-cloud`、`salary-calculator`、`progress`、`identity-select`,以及核心营销页
(首页 / 岗位详情 / 岗位对比 / 竞争力排名 / 我的 / 选择身份)。
## ⚠️ 本机环境限制(Windows 家庭版)
该技能的捕获流程依赖 **macOS(Xcode CLI `xcrun simctl`)、`adb`、ImageMagick 7+(`magick`)**,
当前 Windows 家庭版环境 **均不可用**,因此无法在本机直接产出真实 PNG 截图。
### 在 Windows 上可做的替代(预览 / 占位)
- 打开 `preview.html`(本目录)在浏览器中查看 iPhone 设备框内的各屏视觉稿;
可用浏览器「截图」或打印为 PDF/PNG 作为商店素材的**版式占位**,但最终上架素材仍需真实设备截图。
- 全部页面已在 `app/` 中按 Expo Router 实现,真实捕获时直接以 deep link 打开即可。
### 真实截图应在 macOS / 真机完成
1. 安装并信任 Expo App Store Screenshots 技能,获得 `assets/` 下的捕获脚本。
2. 预构建并安装 release 包到 iOS 模拟器 / Android 模拟器或真机(确认 UI 与源码一致)。
3. 依据 `capture-manifest.json` 的 `path` 作为 deep link 路径(`mydreamjob:///<path>`):
```bash
# 示例:iPhone 捕获(需在 macOS 执行,本机无法运行)
bash assets/ios-capture.sh "$IPHONE_UDID" "mydreamjob:///tools/skill-cloud" \
"screenshots/zh-CN/iphone/05-iphone-skill-cloud.png"
```
4. 缩放至目标尺寸并写入 `summary.md`:
```bash
bash assets/resize.sh "screenshots/zh-CN/iphone" 1284x2778
bash assets/resize.sh "screenshots/zh-CN/android-phone" 1440x3120
```
5. 上传(需对应商店 API 凭据):
- App Store Connect:`zh-CN` → `zh-Hans`,`--device iphone|ipad`
- Google Play:`--image-type phoneScreenshots --dir screenshots/zh-CN/android-phone`
> 提示:技能脚本中 `deep link` 形式为 `<scheme>:///<path>`(三段斜杠,host 为空),
> 与 Expo Router 一致。捕获前务必先 `assets/detect-app-config.sh` 确认 `APP_SCHEME` / `IOS_BUNDLE_ID` / `ANDROID_PACKAGE`。

95
screenshots/capture-manifest.json

@ -0,0 +1,95 @@
{
"project": "职来 (mydreamjob)",
"scheme": "mydreamjob",
"locale": "zh-CN",
"devices": ["iphone", "ipad", "android-phone"],
"targetSizes": {
"iphone": "1284x2778",
"ipad": "2064x2752",
"android-phone": "1440x3120"
},
"notes": "本清单与 Expo App Store Screenshots skill 的 screenshots/<locale>/<device>/NN-<device>-<slug>.png 约定一致。NN 为两位序号,保证在 Finder / 商店后台排序一致。路由以 Expo Router 用户可见 URL 为准((tabs)/(group) 段不计入 URL)。",
"screens": [
{
"nn": "01",
"slug": "home",
"path": "/",
"title": "首页 · 岗位发现",
"group": "(tabs)",
"caption": "双向透明的岗位与公司的评分生态首页",
"devices": ["iphone", "ipad", "android-phone"]
},
{
"nn": "02",
"slug": "job-detail",
"path": "/jobs/[id]",
"title": "岗位详情",
"group": "(tabs)",
"caption": "岗位评分、公司口碑、维度拆解",
"devices": ["iphone", "android-phone"]
},
{
"nn": "03",
"slug": "job-compare",
"path": "/jobs/compare",
"title": "岗位对比",
"group": "(tabs)",
"caption": "多岗位横向评分对比",
"devices": ["iphone", "android-phone"]
},
{
"nn": "04",
"slug": "rank",
"path": "/jobs/rank",
"title": "同岗位竞争力排名",
"group": "(tabs)",
"caption": "百分位排名与综合评分",
"devices": ["iphone", "android-phone"]
},
{
"nn": "05",
"slug": "skill-cloud",
"path": "/tools/skill-cloud",
"title": "行业技能词云",
"group": "(tabs)",
"caption": "按行业查看高频技能与热度权重",
"devices": ["iphone", "android-phone"]
},
{
"nn": "06",
"slug": "salary-calculator",
"path": "/tools/salary-calculator",
"title": "薪资计算器",
"group": "(tabs)",
"caption": "税前到手测算 + 行业平均对比",
"devices": ["iphone", "android-phone"]
},
{
"nn": "07",
"slug": "progress",
"path": "/progress",
"title": "求职进度",
"group": "(tabs)",
"caption": "投递 / 面试 / Offer 时间轴",
"devices": ["iphone", "android-phone"]
},
{
"nn": "08",
"slug": "identity-select",
"path": "/identity-select",
"title": "选择身份",
"group": "(onboarding)",
"caption": "求职者 / 企业 HR 双端入口",
"devices": ["iphone", "ipad", "android-phone"]
},
{
"nn": "09",
"slug": "profile",
"path": "/profile",
"title": "我的",
"group": "(tabs)",
"caption": "个人中心与工具入口",
"devices": ["iphone", "android-phone"]
}
]
}

0
screenshots/zh-CN/android-phone/.gitkeep

0
screenshots/zh-CN/ipad/.gitkeep

0
screenshots/zh-CN/iphone/.gitkeep

30
src/theme/colors.ts

@ -80,6 +80,12 @@ export const colors = {
/** 信息正文 · 链接 / 金额数字(白底 7.4:1 AAA) */ /** 信息正文 · 链接 / 金额数字(白底 7.4:1 AAA) */
infoText: '#5B3ED8', infoText: '#5B3ED8',
/* ---- 对比色板(岗位对比图表系列色,第 1 色复用主色 primary) ---- */
/** 对比系列色 2 · 珊瑚红(图表第二系列) */
compareRed: '#FF6B6B',
/** 对比系列色 3 · 橙(图表第三系列) */
compareOrange: '#FFB347',
/* ---- 中性色家族(7 档) ---- */ /* ---- 中性色家族(7 档) ---- */
/** 中性底色 · 卡片 / 弹窗底 */ /** 中性底色 · 卡片 / 弹窗底 */
white: '#FFFFFF', white: '#FFFFFF',
@ -150,6 +156,10 @@ export const darkColors = {
infoBtn: '#7C5CFC', infoBtn: '#7C5CFC',
infoText: '#AA93FF', infoText: '#AA93FF',
/* ---- 对比色板(图表系列色不随明暗变化,保持原值) ---- */
compareRed: '#FF6B6B',
compareOrange: '#FFB347',
/* ---- 中性色家族 ---- */ /* ---- 中性色家族 ---- */
white: '#FFFFFF', white: '#FFFFFF',
surface: '#161B22', surface: '#161B22',
@ -164,3 +174,23 @@ export const darkColors = {
textInverse: '#0E1116', textInverse: '#0E1116',
focusRing: '#5399FD', focusRing: '#5399FD',
} as const; } as const;
/* ===================== 渐变(组合色 · 独立于单色令牌) ===================== */
/**
* 页面头部渐变 · 蓝 → 青(蒂芙尼) → 白,自左上向右下
* 参考 BOSS 直聘等主流招聘 App 的「蓝绿白」清新头部
* 标题/图标统一使用 textInverse(白),落在顶部蓝色深色区,对比度充足
*/
export const headerGradient = ['#2C83FD', '#3FA7E8', '#4FD1C5', '#A8E6DF', '#FFFFFF'] as const;
/**
* 蓝绿青三段渐变(卡片/小面积强调)· 不含白色,保证白字可读
*/
export const headerGradientShort = ['#2C83FD', '#3FA7E8', '#4FD1C5'] as const;
/**
* 白字头部渐变(我的页)· 蓝 → 青,饱和不落到白
* 头部含个人资料卡片(头像/昵称/简介),白字需始终落在深色区,末端不加入白色
*/
export const headerGradientSolid = ['#2C83FD', '#3FA7E8', '#4FD1C5'] as const;

2
src/theme/index.ts

@ -1,4 +1,4 @@
/** /**
* 主题统一导出 * 主题统一导出
*/ */
export { colors, darkColors } from './colors'; export { colors, darkColors, headerGradient, headerGradientShort, headerGradientSolid } from './colors';

Loading…
Cancel
Save