feat(config): add footer with ICP and CC license to all locales

This commit is contained in:
sanbuphy
2026-01-24 10:10:37 +08:00
parent 2f6b49d660
commit af4913a799
2 changed files with 128 additions and 28 deletions
@@ -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**: 自动生成占位图片。例如 `<img src="https://picsum.photos/200/300" />` 会每次给你一张随机图。
### 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`。”
通过这一步,你的原型就拥有了“记忆”,用户体验几乎和真产品无异。
<div style="margin: 50px 0;">
<ClientOnly>