649 lines
29 KiB
Markdown
649 lines
29 KiB
Markdown
# 1
|
||
|
||
## 项目背景
|
||
|
||
现在我们正在AI 伴学与教学辅助平台的Demo阶段。
|
||
|
||
### 背景资料
|
||
```md
|
||
# AI 伴学与教学辅助平台立项方案
|
||
|
||
## 1. 项目背景与建设目标
|
||
|
||
在教育数字化转型的深水区，不仅需要“管理数字化”，更需要“认知智能化”。
|
||
本项目旨在构建统一的 **AI 赋能基座——“智学·未来”平台**。不追求昂贵的硬件堆砌，而是利用生成式 AI 技术，通过“单点突破、高频迭代”的方式，打造**懂教学、懂学生**的数字助手矩阵。
|
||
|
||
**核心目标：**
|
||
* **教师端**：从重复劳动中解放，通过 AI 辅助设计，提升教学标准化水平。
|
||
* **学生端**：提供 7x24 小时的个性化伴学服务，解决“反馈滞后”与“学习枯燥”两大痛点。
|
||
|
||
## 2. 解决方案：双核智能体矩阵
|
||
|
||
本平台不改变现有教学大纲，而是以“数字助手”的形式嵌入师生的日常流。
|
||
|
||
### 2.1 面向教师：AI 教学副驾驶
|
||
* **核心功能**：教案生成与优化。
|
||
* **差异化优势**：
|
||
* **内嵌集团标准**：基于自研的 SPGM (教学协同矩阵模型) 内核，确保生成的教案符合教学规范。
|
||
* **分层设计**：一键生成适配“基础班”与“提高班”的差异化教学方案。
|
||
|
||
### 2.2 面向学生：智能伴学双子星
|
||
我们将针对不同学科特性，打造两类差异化的智能体：
|
||
|
||
* **角色 A：AI 课代表（侧重“逻辑与反馈”）**
|
||
* **适用场景**：课后复习、作业辅导。
|
||
* **核心机制**：**苏格拉底式引导**。严禁直接给出答案，而是通过多轮反问，引导学生自己发现思路盲区。
|
||
* **价值**：提供即时反馈，诊断知识漏洞。
|
||
|
||
* **角色 B：学科探索官（侧重“兴趣与审美”）**
|
||
* **适用场景**：预习、知识拓展。
|
||
* **核心机制**：**逻辑张力与故事化叙述**。打破教材的枯燥，用跨学科视角（如物理与音乐的联系）讲解知识之美。
|
||
* **价值**：激发内驱力，解决“死记硬背”的痛苦。
|
||
|
||
## 3. 实施路线图 (Phasing Strategy)
|
||
|
||
采用“小步快跑，快速验证”的敏捷策略，分为三个阶段推进：
|
||
|
||
### 第一阶段：MVP 验证期 (Demo)
|
||
* **周期**：**1周**
|
||
* **目标**：低成本验证需求，收集师生真实反馈。
|
||
* **范围**：选取几门学科进行试点。
|
||
* **实施方式**：
|
||
* 利用轻量级编排工具（无代码/低代码）快速搭建。
|
||
* 暂不对接账号体系，以“体验链接”形式在小范围内测。
|
||
* **交付物**：可交互的 Demo 原型、首批用户反馈报告。
|
||
|
||
### 第二阶段：平台化建设期 (Go-Live)
|
||
* **周期**：**1个月**
|
||
* **目标**：完成系统集成，覆盖核心学科，正式开放。
|
||
* **关键任务**：
|
||
1. **系统集成**：对接OA/教务系统，实现单点登录与身份鉴权。
|
||
2. **功能完善**：上线会话管理、历史记录、个人助手收藏等功能。
|
||
3. **核心内容生产**：完成全学科（语数英理化生政史地）标准版智能体的提示词工程开发与调试。
|
||
4. **计费系统**：上线额度管理与充值支付功能。
|
||
|
||
### 第三阶段：生态扩展期 (Expansion) —— *[远期规划]*
|
||
* **触发条件**：基于第二阶段的运营数据与用户呼声。
|
||
* **方向**：拓展至教务管理助手、AI 磨课对练（教师模拟上课）、心理咨询助手等等深层应用。
|
||
|
||
## 4. 运营模式与预算机制
|
||
|
||
为保障平台的可持续发展，建议采用 **“集团补贴 + 个人付费”** 的混合运营模式：
|
||
|
||
### 4.1 混合计费模型
|
||
鉴于 AI 服务需消耗算力成本（Token），我们设计如下机制：
|
||
* **集团助学金（保底）**：集团为每位实名认证的师生发放 **“AI 助学额度”**（建议：教师 20元，学生 5元）。这足以覆盖基础的教学与作业辅导需求，体现集团的数字化福利。
|
||
* **个人充值（增值）**：额度用尽后可自行在线充值。
|
||
* *优势*：既控制了集团的总体预算风险，又通过“付费意愿”验证了产品的真实价值。
|
||
|
||
### 4.2 预算结构
|
||
* **开发成本**：主要为内部人力投入及少量服务器资源（利用现有设施）。
|
||
* **运营成本**：初期主要为调用大模型 API 的费用，通过上述“混合计费模型”实现成本回收与平衡。
|
||
|
||
## 5. 下一步行动建议
|
||
|
||
建议立即启动 **Phase 1 (Demo 验证)**。
|
||
* **资源需求**：无需额外预算，仅需协调英语、历史、地理等学科组各 2 名骨干教师配合实验室进行内容调优。
|
||
* **时间点**：下周五前产出 Demo 并组织第一次内测演示。
|
||
|
||
```
|
||
|
||
## 任务
|
||
|
||
在Demo阶段，页面都是静态HTML，构成设想如下：
|
||
1. 导航页。列举现有的所有智能体，每个智能体有一个不超过100字的简介，点击后进入具体智能体介绍页。
|
||
2. 具体智能体介绍页。包括标题、正文和底部按钮。标题为智能体名字，正文是智能体介绍，底部按钮点击后进入智能体对话页
|
||
3. 智能体对话页。由Dify发布后生成一个URL，挂在介绍页即可。
|
||
我想生成Demo阶段的导航页和智能体介绍页。
|
||
|
||
## 指令
|
||
在生成前，我们先对齐思路：
|
||
1. 复述你对任务的理解
|
||
2. 对于这项任务你有什么建议？
|
||
|
||
你好！很高兴能参与到“智学·未来”平台的 Demo 开发中。在正式开始编写 HTML 代码之前，我先按照你的要求对齐思路，确保产出的 Demo 既符合立项方案的精神，又能快速达到演示效果。
|
||
|
||
---
|
||
|
||
### 1. 我对任务的理解
|
||
|
||
我将为你设计并编写两个静态 HTML 页面模板，用于 Demo 阶段的展示：
|
||
|
||
* **导航页 (Portal Page)**：
|
||
* **定位**：作为平台的入口，展示“双核智能体矩阵”。
|
||
* **内容**：包含三个核心角色——**AI 教学副驾驶（教师端）**、**AI 课代表（学生逻辑端）**、**学科探索官（学生兴趣端）**。
|
||
* **呈现形式**：卡片式布局，每个卡片包含图标、标题和简短简介（<100字），引导用户进入详情。
|
||
|
||
* **智能体介绍页 (Detail Page)**：
|
||
* **定位**：深化用户对特定智能体价值的理解，并作为跳转 Dify 的“跳板”。
|
||
* **内容**：强调该智能体的核心机制（如“苏格拉底式引导”、“SPGM 标准”等），底部放置显著的“立即开启对话”按钮。
|
||
* **技术对接**：按钮链接至你提供的 Dify 发布地址。
|
||
|
||
---
|
||
|
||
### 2. 对这项任务的建议
|
||
|
||
为了让这个 Demo 在下周五的内测中更具吸引力，我有以下几点建议：
|
||
|
||
#### A. 视觉身份区分 (Visual Identity)
|
||
* **色彩编码**：建议为教师端和学生端设定不同的主色调。例如，**教师端**使用深邃的“科技蓝”，代表专业与标准；**学生端**使用活力的“翠绿色”或“温暖橙”，代表成长与探索。
|
||
* **图标化**：为三个智能体设计差异化的图标（可以用 Lucide 或 FontAwesome 图标库），增强产品的“实体感”。
|
||
|
||
#### B. 内容设计的颗粒度
|
||
* **针对不同学科做分身**：虽然只有三个核心角色，但在导航页可以展示针对“英语”、“历史”、“物理”等不同学科的实例卡片。例如，“学科探索官·物理篇”和“学科探索官·历史篇”，这样能让参与测试的骨干教师更有代入感。
|
||
* **增加“试一试这些问题”**：在介绍页中，除了文字描述，建议增加一个“你可以这样问我”的示例板块。这能有效降低用户第一次面对 AI 时的心理门槛。
|
||
|
||
#### C. 技术实现建议
|
||
* **响应式设计**：考虑到教师可能在电脑上用，学生可能在平板或手机上用，我会使用 Tailwind CSS 等框架，确保页面在手机和 PC 上都能完美适配。
|
||
* **单页跳转逻辑**：由于是静态页，建议通过 URL 参数（如 `?agent=teacher`）或者简单的多页面跳转来实现，方便后期维护。
|
||
* **Dify 嵌入方式**：Dify 支持内嵌（Iframe）和新窗口打开。Demo 阶段建议**新窗口打开**，以保证对话体验的完整性，或者在介绍页使用**全屏 Iframe** 以模拟原生应用感。
|
||
|
||
#### D. 文案打磨建议（预览）
|
||
* **AI 教学副驾驶**：不仅是生成教案，而是“您的 24 小时教研室搭档，符合集团 SPGM 标准，让因材施教真正落地”。
|
||
* **AI 课代表**：强调“不直接给答案”，而是“思维的助燃剂，帮你拆解难题，查漏补缺”。
|
||
* **学科探索官**：强调“跨界”，例如“带你从贝多芬的乐章中发现物理的波动规律”。
|
||
|
||
---
|
||
|
||
**如果你认可以上理解和建议，请告诉我。接下来我将直接为你产出具体的 HTML 和 CSS 代码。**（或者你对页面风格有特定的喜好，如：极简风、学院风、还是暗黑科技风？）
|
||
|
||
# 2
|
||
|
||
## 回复
|
||
|
||
#### A. 视觉身份区分 (Visual Identity)
|
||
* **色彩编码**：同意为教师端和学生端设定不同的主色调。
|
||
* **图标化**：同意为三个智能体设计差异化的图标。
|
||
|
||
#### B. 内容设计的颗粒度
|
||
* **针对不同学科做分身**：同意。
|
||
* **增加“试一试这些问题”**：这个在介绍文字上已经准备了。
|
||
|
||
#### C. 技术实现建议
|
||
* **响应式设计**：同意。
|
||
* **单页跳转逻辑**：简单的多页面跳转来实现。
|
||
* **Dify 嵌入方式**：Demo 阶段用**新窗口打开**。
|
||
|
||
#### D. 文案打磨建议（预览）
|
||
|
||
导航页和介绍页上，每个智能体的文案我已经准备好了。
|
||
|
||
## 问题
|
||
|
||
介绍页实际上是介绍页模板的概念，有两种做法：
|
||
1. 每一个我将根据模板生成一个单独的智能体HTML
|
||
2. 我将所有的智能体数据全部放进模板页——比如定义一套结构的数组，包括标题、正文和智能体URL，根据传入的URL参数进行显示上的调整
|
||
|
||
方案2对我来说，维护起来更方便。
|
||
|
||
另外，介绍页中我现有的正文都是Markdown格式，我能直接放Markdown数据，由JS转译么？
|
||
还是要提前准备好对应的HTML代码？
|
||
|
||
## 指令
|
||
|
||
处理我的问题。
|
||
|
||
# 3
|
||
|
||
这是一个非常高效的思路！采用**方案 2（数据驱动模板）** 配合 **JS 实时转译 Markdown** 是目前最专业、扩展性最强的做法。
|
||
|
||
以下是针对你问题的具体建议和技术路线：
|
||
|
||
### 1. 关于方案 2：数据驱动模板
|
||
**你的选择非常正确。** 这样你只需要维护一个 `agents.js` 配置文件，后续增加任何新学科（如物理、化学）或新角色，只需在数组里增加一条记录，无需新建 HTML 文件。
|
||
|
||
**实现思路：**
|
||
* **导航页 (`index.html`)**：遍历数组，生成卡片。点击跳转时，URL 携带 ID（例如 `detail.html?id=math_assistant`）。
|
||
* **介绍页 (`detail.html`)**：通过 JS 获取 URL 参数中的 `id`，从数组中匹配对应的数据，填充到页面中。
|
||
|
||
### 2. 关于 Markdown 转译
|
||
**结论：直接放 Markdown 数据，由 JS 在客户端转译。**
|
||
这是最省事的办法。你不需要手动把 Markdown 改写成复杂的 HTML 标签，只需引入一个极轻量级的库（如 `marked.js`），几行代码就能完成转换。
|
||
|
||
---
|
||
|
||
### 技术实现方案建议
|
||
|
||
为了让你能快速上手，我为你规划了代码结构：
|
||
|
||
#### A. 核心配置文件 (`data.js`)
|
||
你可以把所有的智能体信息集中在这里。
|
||
```javascript
|
||
const agentsData = {
|
||
"teaching-pilot": {
|
||
title: "AI 教学副驾驶",
|
||
type: "teacher", // 用于区分色彩主题
|
||
icon: "🎨",
|
||
shortIntro: "您的 24 小时教研搭档，基于 SPGM 标准生成高标准教案。",
|
||
markdownContent: `
|
||
### 核心功能
|
||
* **内嵌集团标准**：确保教案符合教学规范。
|
||
* **分层设计**：一键生成适配不同班型的方案。
|
||
|
||
### 建议尝试
|
||
1. "帮我生成一份关于《勾股定理》的提高班教案。"
|
||
2. "根据本课重点，设计 3 道随堂练习题。"
|
||
`,
|
||
difyUrl: "https://dify.ai/..."
|
||
},
|
||
"study-rep-math": {
|
||
title: "AI 课代表（数学）",
|
||
type: "student-logic",
|
||
icon: "📐",
|
||
shortIntro: "苏格拉底式引导，拒绝直接答案，助你攻克逻辑难关。",
|
||
markdownContent: `...这里放 Markdown...`,
|
||
difyUrl: "https://dify.ai/..."
|
||
}
|
||
// ... 更多智能体
|
||
};
|
||
```
|
||
|
||
#### B. 介绍页模板 (`detail.html`)
|
||
在 HTML 头部引入 `marked.js` 的 CDN 即可：
|
||
```html
|
||
<!-- 引入 Markdown 转译库 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||
|
||
<div id="content">
|
||
<h1 id="agent-title"></h1>
|
||
<div id="markdown-body"></div> <!-- Markdown 渲染到这里 -->
|
||
<button onclick="openDify()">立即开启对话</button>
|
||
</div>
|
||
|
||
<script>
|
||
// 1. 获取 URL 参数
|
||
const params = new URLSearchParams(window.location.search);
|
||
const agentId = params.get('id');
|
||
const data = agentsData[agentId];
|
||
|
||
// 2. 渲染内容
|
||
document.getElementById('agent-title').innerText = data.title;
|
||
// 使用 marked 渲染 markdownContent
|
||
document.getElementById('markdown-body').innerHTML = marked.parse(data.markdownContent);
|
||
|
||
// 3. 按钮跳转
|
||
function openDify() {
|
||
window.open(data.difyUrl, '_blank');
|
||
}
|
||
</script>
|
||
```
|
||
|
||
---
|
||
|
||
### 这样做的优势：
|
||
1. **极速迭代**：如果你想修改某个智能体的介绍，只需改动 `data.js` 里的文字，保存即生效。
|
||
2. **样式统一**：你只需要写一套 CSS，所有的智能体介绍页都会拥有统一的高级感。
|
||
3. **色彩控制**：你可以在 `data.js` 里给每个智能体定义一个 `themeColor` 字段，JS 渲染时动态改变页面背景色或按钮色，轻松实现“教师端”与“学生端”的视觉区分。
|
||
|
||
**下一步行动建议：**
|
||
如果你准备好了，我可以为你直接编写这套**导航页 + 模板页 + CSS 样式**的完整 Demo 代码。你只需要把你的文案填进 `data.js` 即可。
|
||
|
||
**是否需要我现在为你生成这套完整代码？**
|
||
|
||
# 4
|
||
|
||
好的，现在基于`data.js`帮我生成导航页的HTML。
|
||
|
||
太棒了！我们采用“数据驱动”的思路。首先，我们需要定义好 `data.js` 的结构，然后编写 `index.html`（导航页）。
|
||
|
||
为了让 Demo 看起来更有质感，我使用了 **Tailwind CSS** (通过 CDN 引入)，它可以让你无需写繁琐的 CSS 就能实现响应式、高颜值的卡片布局。
|
||
|
||
### 1. 准备数据文件：`data.js`
|
||
请先创建一个 `data.js` 文件，并将以下代码粘贴进去。我根据你的方案预填了三个核心智能体。
|
||
|
||
```javascript
|
||
// data.js
|
||
const agentsData = {
|
||
"teaching-pilot": {
|
||
id: "teaching-pilot",
|
||
role: "teacher", // 用于颜色区分
|
||
title: "AI 教学副驾驶",
|
||
icon: "👨🏫",
|
||
shortIntro: "您的 24 小时教研搭档。深度嵌入 SPGM 教学标准，一键生成分层教案与配套练习，从重复劳动中解放。",
|
||
difyUrl: "https://udify.app/chat/YOUR_DIFY_ID_1"
|
||
},
|
||
"study-rep-math": {
|
||
id: "study-rep-math",
|
||
role: "student-logic",
|
||
title: "AI 课代表（数学）",
|
||
icon: "🧠",
|
||
shortIntro: "拒绝直接答案，专注逻辑引导。采用苏格拉底式提问，带你拆解难题，真正听懂、学会、掌握。",
|
||
difyUrl: "https://udify.app/chat/YOUR_DIFY_ID_2"
|
||
},
|
||
"explorer-history": {
|
||
id: "explorer-history",
|
||
role: "student-explore",
|
||
title: "学科探索官（历史）",
|
||
icon: "🏺",
|
||
shortIntro: "打破教材枯燥，用故事发现知识之美。跨学科视角解读历史，激发你的求知欲与审美力。",
|
||
difyUrl: "https://udify.app/chat/YOUR_DIFY_ID_3"
|
||
}
|
||
// 后续增加学科只需在这里复制粘贴
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
### 2. 编写导航页：`index.html`
|
||
这是入口页面，它会自动读取 `data.js` 并生成精美的卡片。
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>智学·未来 - AI 伴学与教学辅助平台</title>
|
||
<!-- 引入 Tailwind CSS 用于快速构建美观界面 -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
/* 自定义背景渐变和字体 */
|
||
body {
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||
min-height: 100vh;
|
||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
}
|
||
.card-hover:hover {
|
||
transform: translateY(-5px);
|
||
transition: all 0.3s ease;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="py-12 px-4">
|
||
|
||
<!-- 头部区域 -->
|
||
<header class="max-w-6xl mx-auto text-center mb-16">
|
||
<h1 class="text-4xl font-extrabold text-gray-800 mb-4">
|
||
智学·未来 <span class="text-blue-600">AI 平台</span>
|
||
</h1>
|
||
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
|
||
基于生成式 AI 技术，为师生打造“懂教学、懂学生”的数字助手矩阵。
|
||
</p>
|
||
</header>
|
||
|
||
<main class="max-w-6xl mx-auto">
|
||
<!-- 教师端区域 -->
|
||
<section class="mb-12">
|
||
<h2 class="text-xl font-bold text-gray-700 mb-6 border-l-4 border-blue-600 pl-3">面向教师：教学副驾驶</h2>
|
||
<div id="teacher-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<!-- JS 将在此处插入卡片 -->
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 学生端区域 -->
|
||
<section>
|
||
<h2 class="text-xl font-bold text-gray-700 mb-6 border-l-4 border-emerald-500 pl-3">面向学生：智能伴学双子星</h2>
|
||
<div id="student-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<!-- JS 将在此处插入卡片 -->
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- 引入数据 -->
|
||
<script src="data.js"></script>
|
||
|
||
<script>
|
||
// 定义角色对应的颜色主题
|
||
const themeStyles = {
|
||
'teacher': 'bg-blue-50 border-blue-200 text-blue-600',
|
||
'student-logic': 'bg-emerald-50 border-emerald-200 text-emerald-600',
|
||
'student-explore': 'bg-purple-50 border-purple-200 text-purple-600'
|
||
};
|
||
|
||
const teacherContainer = document.getElementById('teacher-container');
|
||
const studentContainer = document.getElementById('student-container');
|
||
|
||
// 渲染卡片函数
|
||
function renderCards() {
|
||
Object.values(agentsData).forEach(agent => {
|
||
const isTeacher = agent.role === 'teacher';
|
||
const style = themeStyles[agent.role];
|
||
|
||
const cardHtml = `
|
||
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden card-hover cursor-pointer p-6 flex flex-col justify-between"
|
||
onclick="location.href='detail.html?id=${agent.id}'">
|
||
<div>
|
||
<div class="text-4xl mb-4">${agent.icon}</div>
|
||
<h3 class="text-xl font-bold text-gray-800 mb-3">${agent.title}</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed mb-6">
|
||
${agent.shortIntro}
|
||
</p>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-4">
|
||
<span class="text-xs font-semibold px-2 py-1 rounded ${style}">
|
||
${isTeacher ? '教师端' : '学生端'}
|
||
</span>
|
||
<span class="text-blue-600 text-sm font-medium inline-flex items-center">
|
||
查看详情
|
||
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
if (isTeacher) {
|
||
teacherContainer.innerHTML += cardHtml;
|
||
} else {
|
||
studentContainer.innerHTML += cardHtml;
|
||
}
|
||
});
|
||
}
|
||
|
||
// 初始化渲染
|
||
renderCards();
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
---
|
||
|
||
### 3. 设计亮点说明：
|
||
|
||
1. **自动分类**：JS 代码会自动根据 `role: 'teacher'` 将卡片分发到“教师区域”或“学生区域”。
|
||
2. **视觉反馈**：
|
||
* **教师端**：使用了蓝色的标签和边框提示，显得专业。
|
||
* **学生端**：使用了翡翠绿和紫色，显得活泼、具有探索感。
|
||
3. **交互体验**：卡片悬浮时有微小的上浮效果（`card-hover`），增加点击欲望。
|
||
4. **移动端适配**：在手机上会自动变为单列排布，在电脑上是三列。
|
||
|
||
**下一步：**
|
||
如果你准备好了，我可以接着为你生成 `detail.html`（介绍页模板），它会根据 `id` 自动渲染 Markdown 内容！需要我现在开始吗？
|
||
|
||
# 5
|
||
|
||
好的，现在生成介绍页模板
|
||
|
||
这是配套的介绍页模板 `detail.html`。
|
||
|
||
这个页面会根据 URL 中的 `id` 参数（例如 `detail.html?id=teaching-pilot`）自动从 `data.js` 中抓取数据，并使用 **Marked.js** 将 Markdown 文本转换成美观的 HTML 页面。
|
||
|
||
### `detail.html` 代码实现
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>智能体详情 - 智学·未来</title>
|
||
<!-- Tailwind CSS -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<!-- Marked.js 用于解析 Markdown -->
|
||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||
<style>
|
||
body {
|
||
background-color: #f8fafc;
|
||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
}
|
||
/* 针对 Markdown 生成内容的样式美化 */
|
||
#markdown-content h1 { font-size: 1.8rem; font-weight: bold; margin-top: 1.5rem; margin-bottom: 1rem; color: #1f2937; }
|
||
#markdown-content h2 { font-size: 1.5rem; font-weight: bold; margin-top: 1.5rem; margin-bottom: 0.8rem; color: #374151; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.3rem; }
|
||
#markdown-content h3 { font-size: 1.25rem; font-weight: bold; margin-top: 1.2rem; margin-bottom: 0.6rem; color: #4b5563; }
|
||
#markdown-content p { margin-bottom: 1rem; line-height: 1.7; color: #4b5563; }
|
||
#markdown-content ul, #markdown-content ol { margin-bottom: 1rem; padding-left: 1.5rem; color: #4b5563; }
|
||
#markdown-content ul { list-style-type: disc; }
|
||
#markdown-content li { margin-bottom: 0.5rem; }
|
||
#markdown-content strong { color: #111827; font-weight: 600; }
|
||
|
||
/* 按钮点击动效 */
|
||
.btn-active:active { transform: scale(0.98); }
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen pb-24">
|
||
|
||
<!-- 顶部导航 -->
|
||
<nav class="bg-white shadow-sm sticky top-0 z-10">
|
||
<div class="max-w-3xl mx-auto px-4 h-16 flex items-center justify-between">
|
||
<button onclick="history.back()" class="text-gray-500 hover:text-gray-700 flex items-center transition">
|
||
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
||
返回列表
|
||
</button>
|
||
<div id="nav-tag" class="text-xs font-bold px-2 py-1 rounded"></div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主体内容 -->
|
||
<main class="max-w-3xl mx-auto px-4 mt-8">
|
||
<!-- 头部信息 -->
|
||
<header class="text-center mb-10">
|
||
<div id="agent-icon" class="text-6xl mb-4"></div>
|
||
<h1 id="agent-title" class="text-3xl font-extrabold text-gray-900 mb-2"></h1>
|
||
<p id="agent-intro" class="text-gray-500 text-lg"></p>
|
||
</header>
|
||
|
||
<!-- Markdown 正文卡片 -->
|
||
<article class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 md:p-12 mb-8">
|
||
<div id="markdown-content">
|
||
<!-- Markdown 内容将被注入到这里 -->
|
||
</div>
|
||
</article>
|
||
</main>
|
||
|
||
<!-- 底部悬浮按钮区 -->
|
||
<footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 p-4 shadow-[0_-4px_10px_rgba(0,0,0,0.05)]">
|
||
<div class="max-w-3xl mx-auto">
|
||
<button id="start-chat-btn" onclick="openDify()" class="w-full py-4 rounded-xl text-white font-bold text-lg shadow-lg transition btn-active flex items-center justify-center">
|
||
<span>立即开启对话</span>
|
||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||
</button>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 脚本处理 -->
|
||
<script src="data.js"></script>
|
||
<script>
|
||
// 1. 获取 URL 参数中的 ID
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const agentId = urlParams.get('id');
|
||
const agent = agentsData[agentId];
|
||
|
||
// 2. 如果找不到数据，重定向回列表
|
||
if (!agent) {
|
||
alert('智能体不存在');
|
||
location.href = 'index.html';
|
||
}
|
||
|
||
// 3. 配置颜色主题映射
|
||
const themes = {
|
||
'teacher': {
|
||
tag: '教师端',
|
||
tagClass: 'bg-blue-50 text-blue-600',
|
||
btnClass: 'bg-blue-600 hover:bg-blue-700 shadow-blue-200'
|
||
},
|
||
'student-logic': {
|
||
tag: '学生端 · 逻辑',
|
||
tagClass: 'bg-emerald-50 text-emerald-600',
|
||
btnClass: 'bg-emerald-500 hover:bg-emerald-600 shadow-emerald-200'
|
||
},
|
||
'student-explore': {
|
||
tag: '学生端 · 探索',
|
||
tagClass: 'bg-purple-50 text-purple-600',
|
||
btnClass: 'bg-purple-500 hover:bg-purple-600 shadow-purple-200'
|
||
}
|
||
};
|
||
|
||
const currentTheme = themes[agent.role] || themes['teacher'];
|
||
|
||
// 4. 填充页面内容
|
||
document.title = `${agent.title} - 智学·未来`;
|
||
document.getElementById('agent-icon').innerText = agent.icon;
|
||
document.getElementById('agent-title').innerText = agent.title;
|
||
document.getElementById('agent-intro').innerText = agent.shortIntro;
|
||
|
||
// 渲染 Markdown (假设 data.js 中有 markdownContent 字段)
|
||
// 如果没有该字段，则显示 shortIntro 作为保底
|
||
const mdText = agent.markdownContent || `### 暂无详细介绍\n点击下方按钮直接开始体验。`;
|
||
document.getElementById('markdown-content').innerHTML = marked.parse(mdText);
|
||
|
||
// 应用主题色
|
||
const navTag = document.getElementById('nav-tag');
|
||
navTag.innerText = currentTheme.tag;
|
||
navTag.className += ` ${currentTheme.tagClass}`;
|
||
|
||
const btn = document.getElementById('start-chat-btn');
|
||
btn.className += ` ${currentTheme.btnClass}`;
|
||
|
||
// 5. 跳转 Dify 函数
|
||
function openDify() {
|
||
if (agent.difyUrl && agent.difyUrl !== '#') {
|
||
window.open(agent.difyUrl, '_blank');
|
||
} else {
|
||
alert('Demo 链接尚未配置');
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
---
|
||
|
||
### 使用说明及功能点：
|
||
|
||
1. **Markdown 渲染**：
|
||
* 我使用了 `marked.parse(agent.markdownContent)`。你只需要在 `data.js` 的对象里增加一个 `markdownContent: "### 标题 \n 内容..."` 字段，它就会自动渲染。
|
||
* 我专门写了一段 CSS（`#markdown-content ...`）来美化 Markdown 生成的标题、列表和段落，确保符合中文排版习惯。
|
||
|
||
2. **动态主题适配**：
|
||
* 页面会判断 `role`（教师/逻辑/探索）。
|
||
* **教师端**：按钮会变成蓝色。
|
||
* **学生端**：按钮会变成翡翠绿或紫色，导航条上的小标签也会随之改变。
|
||
|
||
3. **底部常驻按钮**：
|
||
* 考虑到手机端体验，对话按钮采用了**底部固定悬浮**的设计，用户阅读完介绍后可以随时点击，非常符合移动端 App 的操作逻辑。
|
||
|
||
4. **返回逻辑**：
|
||
* 左上角自带“返回列表”按钮，方便内测时师生在不同智能体之间切换。
|
||
|
||
### 接下来你需要做的事：
|
||
|
||
1. **完善 `data.js`**：
|
||
确保每个智能体对象里都有 `markdownContent` 和 `difyUrl`。
|
||
*例：*
|
||
```javascript
|
||
"teaching-pilot": {
|
||
id: "teaching-pilot",
|
||
role: "teacher",
|
||
title: "AI 教学副驾驶",
|
||
icon: "👨🏫",
|
||
shortIntro: "您的 24 小时教研搭档...",
|
||
markdownContent: `
|
||
## 核心价值
|
||
- **标准化**：内嵌集团 SPGM 教学矩阵。
|
||
- **高效化**：一键生成分层教案。
|
||
|
||
## 使用场景
|
||
1. **课前准备**：输入课题，生成 45 分钟教学流。
|
||
2. **作业设计**：根据知识点自动产出基础题与挑战题。
|
||
`,
|
||
difyUrl: "https://udify.app/chat/xxx"
|
||
}
|
||
```
|
||
|
||
2. **部署演示**：
|
||
将 `index.html`, `detail.html`, `data.js` 放在同一个文件夹下，直接双击 `index.html` 或用简单的 Web Server 打开即可。
|
||
|
||
这套方案已经完全对齐了你的立项方案，且具备极高的灵活性。下周五的内测演示应该会非常出彩！如果有任何细节需要微调（比如按钮文字、配色等），请随时告诉我。
|
||
|