diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs index 99049d9..971dcc8 100644 --- a/docs/.vitepress/config.mjs +++ b/docs/.vitepress/config.mjs @@ -626,6 +626,10 @@ export default defineConfig({ ] } ] + }, + footer: { + message: '京ICP备2026002630号-1', + copyright: '本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0） 进行许可' } } }, @@ -667,7 +671,11 @@ export default defineConfig({ { text: 'Appendix', link: '/en-us/appendix/ai-capability-dictionary' } ], // TODO: Add English sidebar when content is ready - sidebar: {} + sidebar: {}, + footer: { + message: '京ICP备2026002630号-1', + copyright: '本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0） 进行许可' + } } }, @@ -708,7 +716,11 @@ export default defineConfig({ { text: '付録', link: '/ja-jp/appendix/ai-capability-dictionary' } ], // TODO: Add Japanese sidebar when content is ready - sidebar: {} + sidebar: {}, + footer: { + message: '京ICP备2026002630号-1', + copyright: '本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0） 进行许可' + } } }, 'zh-tw': { @@ -746,7 +758,11 @@ export default defineConfig({ }, { text: '附錄', link: '/zh-tw/appendix/ai-capability-dictionary' } ], - sidebar: {} + sidebar: {}, + footer: { + message: '京ICP备2026002630号-1', + copyright: '本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0） 进行许可' + } } }, 'ko-kr': { @@ -781,7 +797,11 @@ export default defineConfig({ }, { text: '부록', link: '/ko-kr/appendix/ai-capability-dictionary' } ], - sidebar: {} + sidebar: {}, + footer: { + message: '京ICP备2026002630号-1', + copyright: '本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0） 进行许可' + } } }, 'es-es': { @@ -819,7 +839,11 @@ export default defineConfig({ }, { text: 'Apéndice', link: '/es-es/appendix/ai-capability-dictionary' } ], - sidebar: {} + sidebar: {}, + footer: { + message: '京ICP备2026002630号-1', + copyright: '本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0） 进行许可' + } } }, 'fr-fr': { @@ -854,7 +878,11 @@ export default defineConfig({ }, { text: 'Annexe', link: '/fr-fr/appendix/ai-capability-dictionary' } ], - sidebar: {} + sidebar: {}, + footer: { + message: '京ICP备2026002630号-1', + copyright: '本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0） 进行许可' + } } }, 'de-de': { @@ -889,7 +917,11 @@ export default defineConfig({ }, { text: 'Anhang', link: '/de-de/appendix/ai-capability-dictionary' } ], - sidebar: {} + sidebar: {}, + footer: { + message: '京ICP备2026002630号-1', + copyright: '本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0） 进行许可' + } } }, 'ar-sa': { @@ -927,7 +959,11 @@ export default defineConfig({ }, { text: 'ملحق', link: '/ar-sa/appendix/ai-capability-dictionary' } ], - sidebar: {} + sidebar: {}, + footer: { + message: '京ICP备2026002630号-1', + copyright: '本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0） 进行许可' + } } }, 'vi-vn': { @@ -962,7 +998,11 @@ export default defineConfig({ }, { text: 'Phụ lục', link: '/vi-vn/appendix/ai-capability-dictionary' } ], - sidebar: {} + sidebar: {}, + footer: { + message: '京ICP备2026002630号-1', + copyright: '本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0） 进行许可' + } } } } diff --git a/docs/zh-cn/stage-1/1.4-complete-project-practice/index.md b/docs/zh-cn/stage-1/1.4-complete-project-practice/index.md index 1f2cc94..bc877e7 100644 --- a/docs/zh-cn/stage-1/1.4-complete-project-practice/index.md +++ b/docs/zh-cn/stage-1/1.4-complete-project-practice/index.md @@ -101,32 +101,92 @@ API Key 可能会过期，网络可能会断开。 ## 2. 注入灵魂：模拟真实数据 (Mock Data) -一个空荡荡的页面是无法打动人的。想象一下，你向别人展示“电商工作台”，结果商品列表里空空如也，或者只有一行 "test / test / test"。 -为了让演示效果最佳，我们需要“伪造”一些逼真的数据。 +一个空荡荡的页面是无法打动人的。想象一下，你向别人展示“电商素材工作台”，结果历史记录里空空如也，或者只有一行 "test / test / test"。 +为了让演示效果最佳，我们需要“伪造”一些逼真的数据，让你的原型看起来像一个已经运营了半年的真实产品。 -### 2.1 让 AI 生成 Mock 数据 -你不需要手动去编造数据。利用我们学过的 AI 能力，让它帮你生成一份 JSON 数据。 +### 2.1 让 AI 帮你设计数据结构 -**操作步骤：** -1. 告诉 AI 你的数据结构（或者把代码发给它）。 -2. 让它生成 10-20 条逼真的模拟数据。 +我们不需要自己去想每一个字段叫什么（比如是叫 `name` 还是 `title`），这件事完全可以交给 AI。 -> 提示词示例： -> “我正在做一个抖音电商的工作台，请帮我生成 10 条模拟的商品历史记录。包含：商品图 URL（找一些真实的占位图，如使用 Unsplash 的图片）、商品标题（要像真实的淘宝/抖音商品标题）、生成的文案、创建时间。请直接给我一个 JavaScript 数组。” +你只需要告诉 AI 你的**业务场景**： -### 2.2 预埋数据到原型中 -拿到数据后，让 AI IDE 帮你把它“塞”进代码里。 +> **提示词示例：** +> “我正在做一个**抖音电商素材工作台**的原型。 +> 请帮我设计一个 JSON 数据结构，用来描述一个‘商品任务’。 +> 这个任务应该包含：商品的基本信息（名字、类目）、输入的素材（图片链接）、以及 AI 生成的结果（标题、文案、海报图）。 +> 请直接给我一个 JSON 示例。” -> 提示词示例： -> “请在页面初始化时，检查如果没有历史记录，就默认加载这 10 条模拟数据，让页面看起来丰富一点。” +AI 会根据你的描述，自动帮你构思出类似 `productName`, `generatedContent` 这样的字段。 -### 2.3 使用在线预设数据源 -除了让 AI 生成，你还可以利用一些现成的 Mock 数据服务或库（如果你想让原型更专业）： -- **Faker.js**: 一个专门生成假数据的库（可以让 AI 帮你安装和使用）。 -- **Picsum Photos**: 自动生成占位图片。例如 `` 会每次给你一张随机图。 +### 2.2 让 AI 批量生产“逼真”数据 -**技巧：** -在演示时，一个填满真实感数据的列表，能让观众瞬间代入场景，忽略掉“这只是个原型”的事实。 +有了数据结构后，下一步就是让 AI 帮你“填空”，生成一批看起来真实的数据。 + +**提示词技巧：** +你不能只告诉 AI “帮我生成数据”，你需要像给实习生布置任务一样，告诉它**业务背景**和**内容要求**： +* **业务背景**：告诉 AI 我们是做“抖音电商”的，所以商品标题要吸睛（比如“显瘦神器”、“学生党必入”），文案要口语化。 +* **图片要求**：为了让原型好看，图片不能是黑白的占位符，最好是随机的彩色风景或实物图。 + +> **提示词示例：** +> “请基于刚才设计的结构，帮我生成 10 条逼真的模拟数据。 +> （备注：不一定要 JSON 格式。如果你正在写前端，可以让它直接生成 JavaScript 数组；如果你用 Python，可以让它生成 List。） +> +> **业务场景要求**： +> 1. 假设这是一家综合百货店，商品涵盖‘女装’、‘数码’、‘美妆’三个类目。 +> 2. **生成的标题和文案要非常‘抖音风’**：比如标题要包含 Emoji (🔥, ✨)，文案要用‘绝绝子’、‘亲测好用’这种语气。 +> 3. **图片字段**：请统一使用 `https://picsum.photos/seed/{random_id}/300/400` 这个格式，确保每张图都不一样。” + +**生成的 Mock Data 示例：** + +```javascript +export const mockProductTasks = [ + { + id: "task_001", + name: "夏季法式复古碎花裙", + status: "completed", + input: { + category: "女装", + features: ["收腰", "显瘦", "气质"], + originalImage: "https://picsum.photos/seed/dress_input/300/400" + }, + output: { + generatedTitle: "✨谁穿谁好看！这条法式碎花裙真的绝绝子🔥", + generatedCopy: "姐妹们！这条裙子真的太显瘦了！收腰设计绝了，穿上立马有腰身。面料很透气，夏天穿完全不闷。约会逛街首选！👗", + generatedPosterImage: "https://picsum.photos/seed/dress_output/300/400" + }, + createdAt: "2026-01-20T10:00:00Z" + }, + { + id: "task_002", + name: "超强降噪蓝牙耳机 Pro", + status: "completed", + input: { + category: "数码", + features: ["降噪", "超长续航", "低延迟"], + originalImage: "https://picsum.photos/seed/tech_input/300/400" + }, + output: { + generatedTitle: "🎧 终于被我找到了！这款耳机降噪太强了吧！🔇", + generatedCopy: "戴上它，世界瞬间安静了。音质绝佳，听歌就像在现场。续航也很给力，充一次电用一周！学生党必入！", + generatedPosterImage: "https://picsum.photos/seed/tech_output/300/400" + }, + createdAt: "2026-01-21T14:30:00Z" + } + // ... 更多数据 +]; +``` + +### 2.3 (进阶) 使用 LocalStorage 实现“假增删改” + +如果你希望刚才生成的“模拟数据”不仅能看，还能删、能改，甚至新生成的任务刷新页面后还在，你可以结合 `LocalStorage`。 + +> **提示词示例：** +> “请帮我实现一个数据存储功能。 +> 1. 优先从 `localStorage` 读取数据。 +> 2. 如果 `localStorage` 为空，则使用刚才生成的 Mock 数据初始化，并将它们存入 `localStorage`。 +> 3. 同时帮我写 `addProductTask` 和 `deleteProductTask` 函数，每次操作都要同步更新 `localStorage`。” + +通过这一步，你的原型就拥有了“记忆”，用户体验几乎和真产品无异。