第 7 卷

第 7 / 8 卷日期：2025-12-02

1请你扮演一位擅长创意交互的前端开发专家。我要做一个类似 Apple 产品页风格的 “Scrollytelling（滚动叙事）” 网页 Demo，用来展示我在 TATALAB 做自媒体 IP 运营的经验。

3===================== 4五、简单后台（前端模拟 CMS）

5===================== 6我希望可以有一个简单的「后台」来管理每一页的内容配置，不需要真实数据库，只要前端可用即可。

7 8功能要求：

9	1.在同一个项目中增加一个「后台配置界面」，可以通过一个简单入口访问，例如：
10	-顶部导航有一个「Admin」按钮，点击切换到后台视图；或
11	-使用hash路由：/#admin进入后台。
12	2.后台界面可以是一个简单的表单页面，分成5个部分，分别对应Stage 1~5：
13	- Stage 1：主标题、副标题。
14	- Stage 2：大图URL、主标题、副标题、长文正文（多行文本框，支持800字以上）。
15	- Stage 3：5张卡片，每张卡片可编辑：标题、副标题、图片/图标URL。
16	- Stage 4：8张小技巧卡片，每张卡片可编辑：icon文本/URL、标题、简短说明。
17	- Stage 5：主标题、副标题、价值观段落（可以3–5段）、结尾Logo文本或图片URL。
18	3.点击「保存配置」时：
19	-将表单内容保存到浏览器的localStorage。
20	-前台Scrollytelling页面从localStorage读取最新配置进行渲染。
21	4.页面加载时：
22	-如果localStorage有配置，则使用用户保存的内容；
23	-如果没有，则使用你提供的默认示例文案和占位图片。

24 25UI 要求：

26	-后台页面也保持简洁风格，不用复杂设计，只要清晰可用。
27	-建议分区加简单标题，如「Stage 1 -开场页」「Stage 2 - IP诞生经历」等。
28	-表单元素使用基础HTML + CSS即可。

29 30===================== 31六、代码结构与实现要求 32===================== 33- 请输出完整可运行的代码（一个 HTML 文件中包含 CSS 和 JS 即可，或合理拆分多个文件，只要我下载后能直接在浏览器中打开运行）。

34- 在 JS 中：

35- 使用结构清晰的方式组织 Timeline（如将每个 Stage 写成独立函数，再组装到一个主时间轴中）。

36	-对关键的GSAP/ScrollTrigger配置、每个Stage的动画逻辑写明注释，方便我后续修改。
37	-在内容部分，请先填入合理的示例文案（偏正式、但不生硬），尤其是：
38	-第二页的800字左右长文；
39	-第五页的价值观与AI时代路径。
40	-整体优先保证：可读性+动画连贯性+结构清晰。
42	请直接给我可运行的完整代码文件（HTML + CSS + JS），并确保：

45- 刷新页面后，仍然能读取之前保存的内容。

叙事卡片

代码块

1### **叙事图卡 Prompt V9.0 (OWID·海泰风格 - 精简直达版)** 2

3	* “数据驱动”：包含定量数据、时间序列、相关性比较。
4	* “概念驱动”：包含逻辑流程、层级关系、法律原理、因果分析（如此处示例中的流程图）。
5 * 步骤B (如果为数据驱动):基于逻辑关系选择基础图表类型（折线图、柱状图、散点图等）。
6 * 步骤C (如果为概念驱动):
7	基于逻辑关系（层级、因果、时序、并列）选择概念结构*。
8	* **使用“基础完型结构库”（三角、矩形、圆）和“扩展变体元素库”（箭头、嵌套、高亮框）来

构建流程图或概念图**。

9* **步骤D：应用叙事注释**：

10* 将「语义分析」提取的“关键叙事点”，通过“箭头 + 文本标签”或“高亮框”（如示例中的红色/ 橙色结果框）的形式，精确地放置在图表/图形内部的对应位置上。

11 12 13**5. 页脚信息 (页脚区规范)**

15- **内容**: 必须包含两个元素。

19- `数据来源: [原文来源]`：**严格左对齐**。

22 23- 两者必须位于“页脚区”内，且不与“正文区”重叠。

24 25 26**6. 交互性** 27 28- 为图表中的关键数据点或概念框添加SVG的`<title>`子元素，以实现鼠标悬停提示。

29 30 31--- 32 33#### **用户提供材料处** 34 35## **以下为需要进行语义分析并可视化的文本信息** 36 37[在这里粘贴需要分析的文章内容、数据摘要、笔记或概念]

全站分卷索引 · 8 卷