txai-dev/zhiyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: homepage layout optimization (2-col grid, guest CTA, daily question for guests)

Browse Source 
- Unified feature grid to consistent 2-column layout
- Improved hero guest card with benefit tags
- Show daily question section for guests with login prompt
- Added AGENTS.md: H5 deployment docs, git remote, build gotchas
This commit is contained in:
yuzhiran
2026-06-18 15:53:11 +08:00
parent df1b37fe79
commit 0616fd955c
2 changed files with 81 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AGENTS.md
+29 -7
View File
@@ -20,7 +20,7 @@ zhiyin/
│ └── modules/ # 20 个模块（详见下文） │ └── modules/ # 20 个模块（详见下文）
├── zhiyin-app/ # uni-app 3.x 前端 (H5 + 微信小程序) ├── zhiyin-app/ # uni-app 3.x 前端 (H5 + 微信小程序)
│ └── src/ │ └── src/
│ ├── pages/ # 19 个页面 (pages.json 路由) │ ├── pages/ # 20 个页面 (pages.json 路由)
│ ├── services/api.ts # API 调用封装 (uni.request) │ ├── services/api.ts # API 调用封装 (uni.request)
│ ├── config.ts # 端点定义 + api() 辅助函数 │ ├── config.ts # 端点定义 + api() 辅助函数
│ └── App.vue # 设计 Token + 全局样式 │ └── App.vue # 设计 Token + 全局样式
@@ -52,9 +52,9 @@ zhiyin/
| `daily-question` | 每日一题 API | | `daily-question` | 每日一题 API |
| `schemas/` | 共享 Schema（pricing 定价、site-config、company-bank 等） | | `schemas/` | 共享 Schema（pricing 定价、site-config、company-bank 等） |
### 前端页面（3 Tab + 17 子页） ### 前端页面（3 Tab + 18 子页）
- **Tab1 面试**: pages/index/index → interview → report - **Tab1 面试**: pages/index/index → interview → report → career
- **Tab2 面经**: pages/history/history → contribute → company-bank - **Tab2 面经**: pages/history/history → contribute → company-bank
- **Tab3 我的**: pages/user/user → login/member/progress/resume/review/career/about/agreement/privacy/admin/share - **Tab3 我的**: pages/user/user → login/member/progress/resume/review/career/about/agreement/privacy/admin/share
- 其他: internship, result - 其他: internship, result
@@ -111,8 +111,9 @@ zhiyin/
npm run start:dev # 开发模式（watch） npm run start:dev # 开发模式（watch）
npm run build # 编译到 dist/ npm run build # 编译到 dist/
npm test # 单元测试（43 个，jest --forceExit --detectOpenHandles） npm test # 单元测试（43 个，jest --forceExit --detectOpenHandles）
npm run test:e2e # 集成测试（11 个，需 MongoDB 运行） npm run test:watch # 监听模式
npm run test:cov # 覆盖率报告 npm run test:cov # 覆盖率报告
npm run test:e2e # 集成测试（需 MongoDB 运行）
npm run test:browser # Playwright API 测试（需后端运行） npm run test:browser # Playwright API 测试（需后端运行）
``` ```
@@ -132,7 +133,7 @@ npm test # 前端单元测试（vitest，7 个）
cd backend && NODE_OPTIONS="--max-old-space-size=2048" npx nest build cd backend && NODE_OPTIONS="--max-old-space-size=2048" npx nest build
``` ```
### 部署 ### 部署后端
```bash ```bash
cd backend && npx nest build cd backend && npx nest build
cp -rf dist/* /www/wwwroot/server/zhiyin/backend/dist/ cp -rf dist/* /www/wwwroot/server/zhiyin/backend/dist/
@@ -141,6 +142,17 @@ pm2 restart yhl-backend
sleep 3 && curl -s http://localhost:3006/api/user/wx-login -X POST -H "Content-Type: application/json" -d '{"code":"test"}' sleep 3 && curl -s http://localhost:3006/api/user/wx-login -X POST -H "Content-Type: application/json" -d '{"code":"test"}'
``` ```
### 部署前端 H5
```bash
cd zhiyin-app && npx uni build
rm -rf /www/wwwroot/zhiyin.yzrcloud.cn/assets
cp -r dist/build/h5/index.html /www/wwwroot/zhiyin.yzrcloud.cn/
cp -r dist/build/h5/assets /www/wwwroot/zhiyin.yzrcloud.cn/
chown -R www:www /www/wwwroot/zhiyin.yzrcloud.cn/index.html /www/wwwroot/zhiyin.yzrcloud.cn/assets
# 验证无缺失文件
grep -oP '["'"'"']([a-zA-Z0-9_-]+\.[a-z]+(\.js|\.css|\.png|\.svg))["'"'"']' /www/wwwroot/zhiyin.yzrcloud.cn/assets/index-*.js | sort -u
```
### 小程序上传 ### 小程序上传
```bash ```bash
cd zhiyin-app && npm run build:mp-weixin && node scripts/upload-mp.js cd zhiyin-app && npm run build:mp-weixin && node scripts/upload-mp.js
@@ -216,7 +228,15 @@ VITE_APP_NAME=AI磁场
--- ---
## 八、技术细节与坑 ## 八、Git
- 远程仓库: `http://127.0.0.1:2999/txai-dev/zhiyin.git`（本机 Gitea，带 token 认证）
- 默认分支: `master`
- 最新 tag: `v1.0.11`（小程序上传版本号源自 git tag）
---
## 九、技术细节与坑
1. **DOMMatrix polyfill**: `main.ts` 顶部有 pdf-parse 所需的浏览器 API polyfill（DOMMatrix / DOMPoint），新增 PDF 相关功能时注意兼容性 1. **DOMMatrix polyfill**: `main.ts` 顶部有 pdf-parse 所需的浏览器 API polyfill（DOMMatrix / DOMPoint），新增 PDF 相关功能时注意兼容性
2. **postbuild**: `backend/package.json` 中的 `postbuild` 脚本自动复制 `certs/` 到 `dist/src/certs/`，这是微信支付证书的必要步骤 2. **postbuild**: `backend/package.json` 中的 `postbuild` 脚本自动复制 `certs/` 到 `dist/src/certs/`，这是微信支付证书的必要步骤
@@ -226,10 +246,12 @@ VITE_APP_NAME=AI磁场
6. **API 限流**: 100 次/60 秒（在 `app.module.ts` 中配置），注意避免在定时任务和批量操作中被限 6. **API 限流**: 100 次/60 秒（在 `app.module.ts` 中配置），注意避免在定时任务和批量操作中被限
7. **验证码**: 开发模式下手机验证码固定为 `123456`（`user.service.ts` 中实现），生产环境需移除 7. **验证码**: 开发模式下手机验证码固定为 `123456`（`user.service.ts` 中实现），生产环境需移除
8. **MongoDB**: 8 个核心集合 + 2 个分享集合 8. **MongoDB**: 8 个核心集合 + 2 个分享集合
9. **api.ts 陷阱**: 对象字面量必须在 `export const apiService = {` 或 `const apiService = { ... export default apiService` 中包裹，否则 uni-app 构建报错 `Expected ";" but found ":"`。git pull 后经常丢失这行声明，需手动补回
10. **H5 构建 assets 清理**: `assets/` 中的旧 hash 文件不能随意删除——`index-*.js`（主 bundle）动态 import 了所有 page chunk，删除仍在引用的文件会导致浏览器 `NS_ERROR_CORRUPTED_CONTENT`
--- ---
## 九、交付检查清单（每次实施/修改后执行） ## 十、交付检查清单（每次实施/修改后执行）
### Step 1: 代码评审 ### Step 1: 代码评审
- [ ] 是否符合现有模块模式（schema→service→controller→module） - [ ] 是否符合现有模块模式（schema→service→controller→module）
zhiyin-app/src/pages/index/index.vue
+52 -24
View File
@@ -4,7 +4,7 @@
<view class="hero-row"> <view class="hero-row">
<view class="hero-left"> <view class="hero-left">
<text class="hero-title">{{ greeting }}</text> <text class="hero-title">{{ greeting }}</text>
<text class="hero-sub">试试下面的功能，开启你的求职练习</text> <text class="hero-sub">{{ userInfo ? '试试下面的功能，开启你的求职练习' : '登录后免费使用 AI 模拟面试 · 简历优化 · 面经题库' }}</text>
</view> </view>
<view class="hero-right"> <view class="hero-right">
<view class="user-card card" v-if="userInfo" @click="goProfile"> <view class="user-card card" v-if="userInfo" @click="goProfile">
@@ -21,10 +21,13 @@
<view class="guest-card card" v-else @click="goLogin"> <view class="guest-card card" v-else @click="goLogin">
<image class="avatar" src="/static/avatar-default.png" mode="aspectFill" /> <image class="avatar" src="/static/avatar-default.png" mode="aspectFill" />
<view class="user-meta"> <view class="user-meta">
<text class="user-name">立即登录</text> <text class="user-name">登录 / 注册</text>
<text class="guest-hint">登录后体验全部功能</text> <view class="guest-benefits">
<text class="guest-benefit">🎙️ 模拟面试</text>
<text class="guest-benefit">📄 简历优化</text>
</view> </view>
<text class="arrow">›</text> </view>
<text class="guest-arrow">›</text>
</view> </view>
</view> </view>
</view> </view>
@@ -43,16 +46,14 @@
</view> </view>
<text class="fp-action">开始</text> <text class="fp-action">开始</text>
</view> </view>
<view class="feature-secondary" style="margin-bottom: 16rpx;"> <view class="feature-grid">
<view class="fs-card card" @click="goCareer"> <view class="fs-card card" @click="goCareer">
<view class="fs-top"> <view class="fs-top">
<view class="fs-icon fs-progress"><text class="fs-emoji">🎯</text></view> <view class="fs-icon fs-career"><text class="fs-emoji">🎯</text></view>
<text class="fs-name">AI 择业顾问</text> <text class="fs-name">AI 择业顾问</text>
</view> </view>
<text class="fs-brief">专业分析 · 岗位匹配 · 智能推荐</text> <text class="fs-brief">专业分析 · 岗位匹配 · 智能推荐</text>
</view> </view>
</view>
<view class="feature-tertiary">
<view class="fs-card card" @click="goResume"> <view class="fs-card card" @click="goResume">
<view class="fs-top"> <view class="fs-top">
<view class="fs-icon fs-resume"><text class="fs-emoji">📄</text></view> <view class="fs-icon fs-resume"><text class="fs-emoji">📄</text></view>
@@ -74,18 +75,16 @@
</view> </view>
<text class="fs-brief">分享经验 · 共建题库 · 帮更多人</text> <text class="fs-brief">分享经验 · 共建题库 · 帮更多人</text>
</view> </view>
</view>
<view class="feature-secondary">
<view class="fs-card card" @click="goBank"> <view class="fs-card card" @click="goBank">
<view class="fs-top"> <view class="fs-top">
<view class="fs-icon fs-progress"><text class="fs-emoji">📚</text></view> <view class="fs-icon fs-bank"><text class="fs-emoji">📚</text></view>
<text class="fs-name">公司真题库</text> <text class="fs-name">公司真题库</text>
</view> </view>
<text class="fs-brief">大厂真题 · 岗位分类 · 参考思路</text> <text class="fs-brief">大厂真题 · 岗位分类 · 参考思路</text>
</view> </view>
<view class="fs-card card" @click="goInternship"> <view class="fs-card card" @click="goInternship">
<view class="fs-top"> <view class="fs-top">
<view class="fs-icon fs-contribute"><text class="fs-emoji">🔍</text></view> <view class="fs-icon fs-internship"><text class="fs-emoji">🔍</text></view>
<text class="fs-name">实习搜索</text> <text class="fs-name">实习搜索</text>
</view> </view>
<text class="fs-brief">热门实习 · 一键搜索 · 精准匹配</text> <text class="fs-brief">热门实习 · 一键搜索 · 精准匹配</text>
@@ -95,12 +94,12 @@
</view> </view>
<!-- 每日一题 --> <!-- 每日一题 -->
<view class="section" v-if="dailyQuestion"> <view class="section">
<view class="section-header"> <view class="section-header">
<text class="section-title">📮 每日一题</text> <text class="section-title">📮 每日一题</text>
<text class="section-desc" @click="refreshDaily">换一题</text> <text class="section-desc" @click="refreshDaily" v-if="dailyQuestion">换一题</text>
</view> </view>
<view class="daily-card card"> <view class="daily-card card" v-if="dailyQuestion">
<text class="daily-tag">{{ dailyQuestion.category || '综合' }}</text> <text class="daily-tag">{{ dailyQuestion.category || '综合' }}</text>
<text class="daily-question">{{ dailyQuestion.question }}</text> <text class="daily-question">{{ dailyQuestion.question }}</text>
<view class="daily-answer" v-if="showAnswer"> <view class="daily-answer" v-if="showAnswer">
@@ -114,6 +113,16 @@
<text class="daily-action primary" @click="goInterview">模拟练习 →</text> <text class="daily-action primary" @click="goInterview">模拟练习 →</text>
</view> </view>
</view> </view>
<view class="daily-guest card" v-else-if="!userInfo" @click="goLogin">
<view class="daily-guest-top">
<text class="daily-guest-icon">🔒</text>
<view class="daily-guest-body">
<text class="daily-guest-title">登录后获取今日面试题</text>
<text class="daily-guest-desc">每日一道校招真题，持续积累面试经验</text>
</view>
</view>
<text class="daily-action primary">立即登录 →</text>
</view>
</view> </view>
<!-- 热门岗位 - AI 专区 --> <!-- 热门岗位 - AI 专区 -->
@@ -269,7 +278,7 @@ const startInterview = (pos) => uni.navigateTo({ url: `/pages/interview/intervie
} }
.hero-row { display: flex; align-items: flex-start; gap: 24rpx; } .hero-row { display: flex; align-items: flex-start; gap: 24rpx; }
.hero-left { flex: 1; min-width: 0; padding-top: 8rpx; } .hero-left { flex: 1; min-width: 0; padding-top: 8rpx; }
.hero-right { flex-shrink: 0; width: 320rpx; } .hero-right { flex-shrink: 0; min-width: 280rpx; max-width: 340rpx; }
.hero-title { font-size: 40rpx; font-weight: 700; color: #FFF; display: block; line-height: 1.3; } .hero-title { font-size: 40rpx; font-weight: 700; color: #FFF; display: block; line-height: 1.3; }
.hero-sub { font-size: 22rpx; color: rgba(255,255,255,0.7); margin-top: 8rpx; display: block; } .hero-sub { font-size: 22rpx; color: rgba(255,255,255,0.7); margin-top: 8rpx; display: block; }
@@ -279,11 +288,15 @@ const startInterview = (pos) => uni.navigateTo({ url: `/pages/interview/intervie
display: flex; align-items: center; display: flex; align-items: center;
box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.1); box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.1);
} }
.guest-card { background: rgba(255,255,255,0.15); backdrop-filter: blur(10rpx); } .guest-card {
.guest-card .avatar { border-color: rgba(255,255,255,0.3); } background: rgba(255,255,255,0.2); backdrop-filter: blur(12rpx);
.guest-card .user-name { font-size: 26rpx; color: #FFF; } border: 1rpx solid rgba(255,255,255,0.25);
.guest-hint { font-size: 20rpx; color: rgba(255,255,255,0.6); margin-top: 4rpx; display: block; } }
.guest-card .arrow { color: rgba(255,255,255,0.4); } .guest-card .avatar { border-color: rgba(255,255,255,0.35); }
.guest-card .user-name { font-size: 26rpx; color: #FFF; font-weight: 700; }
.guest-benefits { display: flex; gap: 12rpx; margin-top: 6rpx; flex-wrap: wrap; }
.guest-benefit { font-size: 18rpx; color: rgba(255,255,255,0.8); padding: 2rpx 10rpx; background: rgba(255,255,255,0.12); border-radius: 8rpx; }
.guest-arrow { font-size: 36rpx; color: rgba(255,255,255,0.5); margin-left: 12rpx; }
.avatar { width: 72rpx; height: 72rpx; border-radius: 50%; margin-right: 16rpx; border: 3rpx solid var(--color-primary-light); flex-shrink: 0; } .avatar { width: 72rpx; height: 72rpx; border-radius: 50%; margin-right: 16rpx; border: 3rpx solid var(--color-primary-light); flex-shrink: 0; }
.user-meta { flex: 1; min-width: 0; } .user-meta { flex: 1; min-width: 0; }
.user-name { font-size: 30rpx; font-weight: 600; color: var(--color-text); } .user-name { font-size: 30rpx; font-weight: 600; color: var(--color-text); }
@@ -315,17 +328,19 @@ const startInterview = (pos) => uni.navigateTo({ url: `/pages/interview/intervie
.fp-name { font-size: 30rpx; font-weight: 700; color: var(--color-text); } .fp-name { font-size: 30rpx; font-weight: 700; color: var(--color-text); }
.fp-brief { font-size: 20rpx; color: var(--color-text-secondary); margin-top: 4rpx; display: block; } .fp-brief { font-size: 20rpx; color: var(--color-text-secondary); margin-top: 4rpx; display: block; }
.fp-action { font-size: 28rpx; color: var(--color-primary); font-weight: 600; flex-shrink: 0; } .fp-action { font-size: 28rpx; color: var(--color-primary); font-weight: 600; flex-shrink: 0; }
.feature-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 16rpx; } .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16rpx; }
.feature-tertiary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16rpx; }
.fs-card { padding: 20rpx; border-radius: var(--radius-lg); } .fs-card { padding: 20rpx; border-radius: var(--radius-lg); }
.fs-top { display: flex; align-items: center; gap: 10rpx; } .fs-top { display: flex; align-items: center; gap: 10rpx; }
.fs-icon { width: 44rpx; height: 44rpx; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fs-icon { width: 44rpx; height: 44rpx; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fs-emoji { font-size: 20rpx; } .fs-emoji { font-size: 20rpx; }
.fs-name { font-size: 26rpx; font-weight: 600; color: var(--color-text); } .fs-name { font-size: 26rpx; font-weight: 600; color: var(--color-text); }
.fs-brief { font-size: 18rpx; color: var(--color-text-secondary); margin-top: 10rpx; display: block; } .fs-brief { font-size: 18rpx; color: var(--color-text-secondary); margin-top: 10rpx; display: block; }
.fs-progress { background: linear-gradient(135deg, #EEF2FF, #C7D2FE); } .fs-career { background: linear-gradient(135deg, #F3E8FF, #D8B4FE); }
.fs-resume { background: linear-gradient(135deg, #ECFDF5, #A7F3D0); } .fs-resume { background: linear-gradient(135deg, #ECFDF5, #A7F3D0); }
.fs-progress { background: linear-gradient(135deg, #EEF2FF, #C7D2FE); }
.fs-contribute { background: linear-gradient(135deg, #FFF7ED, #FDBA74); } .fs-contribute { background: linear-gradient(135deg, #FFF7ED, #FDBA74); }
.fs-bank { background: linear-gradient(135deg, #FCE7F3, #F9A8D4); }
.fs-internship { background: linear-gradient(135deg, #E0F2FE, #7DD3FC); }
/* 每日一题 */ /* 每日一题 */
.daily-card { padding: 24rpx; border-radius: var(--radius-lg); } .daily-card { padding: 24rpx; border-radius: var(--radius-lg); }
@@ -338,6 +353,19 @@ const startInterview = (pos) => uni.navigateTo({ url: `/pages/interview/intervie
.daily-action { font-size: 24rpx; color: var(--color-text-secondary); } .daily-action { font-size: 24rpx; color: var(--color-text-secondary); }
.daily-action.primary { color: var(--color-primary); font-weight: 600; } .daily-action.primary { color: var(--color-primary); font-weight: 600; }
.daily-guest {
padding: 24rpx; border-radius: var(--radius-lg);
background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
display: flex; align-items: center; justify-content: space-between;
cursor: pointer;
}
.daily-guest:active { opacity: 0.8; }
.daily-guest-top { display: flex; align-items: center; gap: 16rpx; flex: 1; min-width: 0; }
.daily-guest-icon { font-size: 32rpx; width: 56rpx; height: 56rpx; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.6); border-radius: 14rpx; flex-shrink: 0; }
.daily-guest-body { flex: 1; min-width: 0; }
.daily-guest-title { font-size: 26rpx; font-weight: 600; color: var(--color-text); }
.daily-guest-desc { font-size: 20rpx; color: var(--color-text-secondary); margin-top: 4rpx; display: block; }
/* AI 岗位专区 */ /* AI 岗位专区 */
.ai-banner { .ai-banner {
background: linear-gradient(135deg, #FEF3C7, #FDE68A); background: linear-gradient(135deg, #FEF3C7, #FDE68A);