219 lines
6.1 KiB
Markdown
219 lines
6.1 KiB
Markdown
# 去除编辑资料页与剧本列表 mock 数据实现计划
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** 将编辑资料页顶部默认昵称从「Zoey」改为「未设置昵称」，并彻底删除剧本列表中的 `fallbackScripts` 数组及各工具函数的兜底默认值。
|
||
|
||
**Architecture:** 直接修改两个 Vue 文件：在 `onboarding/index.vue` 替换默认文案；在 `ScriptLibraryView.vue` 删除 `fallbackScripts`、让 `scripts` 直接返回 `store.scripts`，并清理 `getTags`、`getWordCount`、`getDateText`、`getProgress`、`getChapterCount` 中的默认假值。
|
||
|
||
**Tech Stack:** Vue 3 + UniApp + TypeScript + Pinia
|
||
|
||
---
|
||
|
||
## 文件结构
|
||
|
||
| 文件 | 职责 | 变更类型 |
|
||
|---|---|---|
|
||
| `mini-program/src/pages/onboarding/index.vue` | 编辑资料页面顶部预览卡片 | 修改 |
|
||
| `mini-program/src/pages/main/ScriptLibraryView.vue` | 剧本列表页面 | 修改 |
|
||
|
||
---
|
||
|
||
### Task 1: 修改编辑资料页顶部默认昵称
|
||
|
||
**Files:**
|
||
- Modify: `mini-program/src/pages/onboarding/index.vue:22`
|
||
|
||
- [ ] **Step 1: 查看当前代码**
|
||
|
||
确认第 22 行代码：
|
||
|
||
```vue
|
||
<text class="hero-name">{{ form.nickname || 'Zoey' }}</text>
|
||
```
|
||
|
||
- [ ] **Step 2: 替换默认文案**
|
||
|
||
将第 22 行改为：
|
||
|
||
```vue
|
||
<text class="hero-name">{{ form.nickname || '未设置昵称' }}</text>
|
||
```
|
||
|
||
- [ ] **Step 3: 提交**
|
||
|
||
```bash
|
||
git add mini-program/src/pages/onboarding/index.vue
|
||
git commit -m "fix：编辑资料页无昵称时显示未设置昵称"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 2: 删除剧本列表 fallbackScripts 数组
|
||
|
||
**Files:**
|
||
- Modify: `mini-program/src/pages/main/ScriptLibraryView.vue:178-254`
|
||
|
||
- [ ] **Step 1: 查看当前代码**
|
||
|
||
确认第 178–249 行为 `fallbackScripts` 数组：
|
||
|
||
```javascript
|
||
const fallbackScripts = [
|
||
{
|
||
id: 'demo-1',
|
||
title: '逆袭人生：从低谷到巅峰',
|
||
// ...
|
||
},
|
||
// ... 共 6 条
|
||
]
|
||
```
|
||
|
||
确认第 251–254 行为 `scripts` computed：
|
||
|
||
```javascript
|
||
const scripts = computed(() => {
|
||
const list = store.scripts || []
|
||
return list.length ? list : fallbackScripts
|
||
})
|
||
```
|
||
|
||
- [ ] **Step 2: 删除 fallbackScripts 并修改 scripts computed**
|
||
|
||
删除 `fallbackScripts` 数组及其后的空行，将 `scripts` computed 改为：
|
||
|
||
```javascript
|
||
const scripts = computed(() => store.scripts || [])
|
||
```
|
||
|
||
- [ ] **Step 3: 提交**
|
||
|
||
```bash
|
||
git add mini-program/src/pages/main/ScriptLibraryView.vue
|
||
git commit -m "fix：剧本列表删除 fallbackScripts 假数据"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3: 清理剧本列表工具函数默认值
|
||
|
||
**Files:**
|
||
- Modify: `mini-program/src/pages/main/ScriptLibraryView.vue:297-317`
|
||
|
||
- [ ] **Step 1: 查看当前工具函数代码**
|
||
|
||
确认以下函数当前实现：
|
||
|
||
```javascript
|
||
const getTags = (script) => {
|
||
if (Array.isArray(script.tags) && script.tags.length) return script.tags.slice(0, 4)
|
||
return [script.style || '逆袭成长', '都市', '事业', '热血']
|
||
}
|
||
|
||
const getChapterCount = (script) => script.chapterCount || script.chapters || Math.max(1, Math.round((script.wordCount || 30000) / 4500))
|
||
|
||
const getWordCount = (script) => {
|
||
const count = Number(script.wordCount || 0)
|
||
if (!count) return '3.1万字'
|
||
if (count >= 10000) return `${(count / 10000).toFixed(1)}万字`
|
||
return `${count}字`
|
||
}
|
||
|
||
const getDateText = (script) => {
|
||
if (getStatus(script) === 'done') return `完成于：${script.completedAt || script.date || '2025.05.10'}`
|
||
if (getStatus(script) === 'draft') return `创建于：${script.createdAt || script.date || '2025.05.08'}`
|
||
return `最近更新：${script.updatedAt || script.date || '今天 21:30'}`
|
||
}
|
||
|
||
const getProgress = (script) => Math.max(1, Math.min(99, Number(script.progress || 28)))
|
||
```
|
||
|
||
- [ ] **Step 2: 修改各函数去掉兜底假值**
|
||
|
||
将上述函数改为：
|
||
|
||
```javascript
|
||
const getTags = (script) => {
|
||
if (Array.isArray(script.tags) && script.tags.length) return script.tags.slice(0, 4)
|
||
return []
|
||
}
|
||
|
||
const getChapterCount = (script) => script.chapterCount || script.chapters || 0
|
||
|
||
const getWordCount = (script) => {
|
||
const count = Number(script.wordCount || 0)
|
||
if (count >= 10000) return `${(count / 10000).toFixed(1)}万字`
|
||
return `${count}字`
|
||
}
|
||
|
||
const getDateText = (script) => {
|
||
if (getStatus(script) === 'done') return `完成于：${script.completedAt || script.date || ''}`
|
||
if (getStatus(script) === 'draft') return `创建于：${script.createdAt || script.date || ''}`
|
||
return `最近更新：${script.updatedAt || script.date || ''}`
|
||
}
|
||
|
||
const getProgress = (script) => Math.max(0, Math.min(99, Number(script.progress || 0)))
|
||
```
|
||
|
||
- [ ] **Step 3: 提交**
|
||
|
||
```bash
|
||
git add mini-program/src/pages/main/ScriptLibraryView.vue
|
||
git commit -m "fix：剧本列表工具函数去除默认值兜底"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 4: 编译与 H5 验证
|
||
|
||
**Files:**
|
||
- 无新增/修改文件
|
||
|
||
- [ ] **Step 1: 运行 H5 生产构建**
|
||
|
||
```bash
|
||
cd mini-program
|
||
npm run build:h5
|
||
```
|
||
|
||
期望输出包含 `DONE Build complete.`，无编译错误。
|
||
|
||
- [ ] **Step 2: 启动 H5 开发服务器**
|
||
|
||
确保 5173/5175 端口未被占用，然后：
|
||
|
||
```bash
|
||
cd mini-program
|
||
npm run dev:h5
|
||
```
|
||
|
||
- [ ] **Step 3: 验证编辑资料页**
|
||
|
||
1. 在浏览器中打开 `http://localhost:5173`（或实际分配的端口）。
|
||
2. 登录后进入编辑资料页面。
|
||
3. 清空昵称输入框，点击保存，确认顶部显示「未设置昵称」。
|
||
|
||
- [ ] **Step 4: 验证剧本列表空状态**
|
||
|
||
1. 从爽文生成页面点击左上角「历史」按钮进入剧本列表。
|
||
2. 如果当前账号没有剧本数据，确认页面显示「还没有人生剧本」空状态，不展示任何 demo 剧本。
|
||
3. 如果账号有真实剧本数据，确认真实数据正常显示。
|
||
|
||
- [ ] **Step 5: 检查浏览器 Console**
|
||
|
||
确认没有新增的 JavaScript 错误。
|
||
|
||
---
|
||
|
||
## Self-Review
|
||
|
||
1. **Spec coverage:**
|
||
- 编辑资料页默认昵称 → Task 1
|
||
- 删除 fallbackScripts → Task 2
|
||
- 清理工具函数默认值 → Task 3
|
||
- 编译与验证 → Task 4
|
||
|
||
2. **Placeholder scan:** 无 TBD、TODO、"implement later" 或模糊描述。
|
||
|
||
3. **Type consistency:** 所有函数签名、字段名与源码保持一致。
|