157 lines
5.2 KiB
TypeScript
157 lines
5.2 KiB
TypeScript
import BetaNotice from '@pages/components/BetaNotice'
|
||
import CodeEditor from '@pages/components/CodeEditor'
|
||
|
||
export default function KnowledgeInjection() {
|
||
return (
|
||
<div>
|
||
<h1 className="text-4xl font-bold mb-6">知识库注入</h1>
|
||
|
||
<BetaNotice />
|
||
|
||
<p className="text-xl text-foreground/80 mb-8 leading-relaxed">
|
||
通过多层次的知识注入，让 AI 深度理解你的业务场景和应用逻辑，实现更精准的自动化操作。
|
||
</p>
|
||
|
||
{/* Custom Instruction */}
|
||
<section className="mb-12">
|
||
<h2 className="text-3xl font-bold mb-6">Instruction - 系统指令</h2>
|
||
|
||
<div className="p-6 bg-purple-50 dark:bg-purple-900/20 rounded-lg mb-6">
|
||
<h3 className="text-xl font-semibold mb-3 text-purple-900 dark:text-purple-300">
|
||
🎯 系统级指令
|
||
</h3>
|
||
<p className="text-foreground/80 mb-4">为 AI 设定全局行为准则和工作风格。</p>
|
||
<ul className="list-disc list-inside space-y-2 text-foreground/70">
|
||
<li>定义 AI 的工作风格和交互方式</li>
|
||
<li>设置安全边界和操作限制</li>
|
||
<li>指定错误处理和异常情况的应对策略</li>
|
||
<li>配置输出格式和反馈机制</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<CodeEditor
|
||
className="mb-6"
|
||
code={`// 构造函数中设置系统指令
|
||
const pageAgent = new PageAgent({
|
||
instruction: \`
|
||
# 角色定义
|
||
你是专业的电商运营助手。
|
||
|
||
# 工作风格
|
||
- 谨慎：操作前确认
|
||
- 准确：确保正确性
|
||
- 高效：优化流程
|
||
|
||
# 错误处理
|
||
遇到错误时暂停并报告。
|
||
\`
|
||
});`}
|
||
/>
|
||
</section>
|
||
|
||
{/* App Knowledge */}
|
||
<section className="mb-12">
|
||
<h2 className="text-3xl font-bold mb-6">App Knowledge - 应用知识</h2>
|
||
|
||
<div className="p-6 bg-blue-50 dark:bg-blue-900/20 rounded-lg mb-6">
|
||
<h3 className="text-xl font-semibold mb-3 text-blue-900 dark:text-blue-300">
|
||
<EFBFBD> 业务领域知识
|
||
</h3>
|
||
<p className="text-foreground/80 mb-4">
|
||
注入应用的核心业务知识，包括产品介绍、操作流程、术语定义等，让 AI 理解业务上下文。
|
||
</p>
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<h4 className="font-semibold text-blue-800 dark:text-blue-200">产品知识</h4>
|
||
<ul className="list-disc list-inside text-sm text-foreground/70 space-y-1">
|
||
<li>产品功能和特性介绍</li>
|
||
<li>用户角色和权限体系</li>
|
||
<li>业务规则和约束条件</li>
|
||
</ul>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<h4 className="font-semibold text-blue-800 dark:text-blue-200">操作指南</h4>
|
||
<ul className="list-disc list-inside text-sm text-foreground/70 space-y-1">
|
||
<li>标准操作流程定义</li>
|
||
<li>异常情况处理方案</li>
|
||
<li>术语和概念解释</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<CodeEditor
|
||
className="mb-6"
|
||
code={`// 应用知识
|
||
pageAgent.knowledge.setAppKnowledge(\`
|
||
# 产品介绍
|
||
电商管理系统：面向中小企业的一站式解决方案。
|
||
|
||
# 操作流程
|
||
## 商品上架
|
||
1. 进入商品管理页面 2. 点击新增商品 3. 填写基本信息 4. 设置库存 5. 提交审核
|
||
|
||
# 术语解释
|
||
- SKU：库存量单位
|
||
- SPU：标准产品单位
|
||
- 运费模板：物流费用计算规则
|
||
|
||
# 业务规则
|
||
- 库存为0时自动下架
|
||
- VIP会员享9.5折
|
||
\`);`}
|
||
/>
|
||
</section>
|
||
|
||
{/* Page Knowledge */}
|
||
<section className="mb-12">
|
||
<h2 className="text-3xl font-bold mb-6">Page Knowledge - 页面知识</h2>
|
||
|
||
<div className="p-6 bg-green-50 dark:bg-green-900/20 rounded-lg mb-6">
|
||
<h3 className="text-xl font-semibold mb-3 text-green-900 dark:text-green-300">
|
||
📄 页面级精准指导
|
||
</h3>
|
||
<p className="text-foreground/80 mb-4">
|
||
为特定页面提供精确的操作指导和元素说明，让 AI 准确理解页面结构和交互逻辑。
|
||
</p>
|
||
<div className="grid md:grid-cols-3 gap-4">
|
||
<div className="space-y-2">
|
||
<h4 className="font-semibold text-green-800 dark:text-green-200">元素标注</h4>
|
||
<p className="text-sm text-foreground/70">为页面元素添加语义化描述</p>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<h4 className="font-semibold text-green-800 dark:text-green-200">交互说明</h4>
|
||
<p className="text-sm text-foreground/70">定义元素的交互行为和预期结果</p>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<h4 className="font-semibold text-green-800 dark:text-green-200">页面逻辑</h4>
|
||
<p className="text-sm text-foreground/70">说明页面的业务逻辑和状态变化</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<CodeEditor
|
||
className="mb-6"
|
||
code={`// 页面知识库
|
||
// 添加页面知识
|
||
pageAgent.knowledge.addPageKnowledge("/products", \`
|
||
商品列表页面，包含搜索、筛选、批量操作功能。
|
||
#add-product-btn：新增商品按钮
|
||
.product-item：商品列表项
|
||
#search-input：搜索框，最少2个字符
|
||
\`);
|
||
|
||
pageAgent.knowledge.addPageKnowledge("/orders/*", \`
|
||
订单详情页面。
|
||
.order-status：订单状态标签
|
||
#update-status-btn：状态更新按钮
|
||
\`);
|
||
|
||
// 移除页面知识
|
||
pageAgent.knowledge.removePageKnowledge("/products");`}
|
||
/>
|
||
</section>
|
||
</div>
|
||
)
|
||
}
|