<!DOCTYPE html>
<html>
<head>
<title>公司产品平台 - 帮助文档</title>
<style>
/* 全局样式 - 匹配图片中的星空背景 */
body {
margin: 0;
background-color: #000;
font-family: 'Arial', sans-serif;
color: white;
overflow: hidden;
}
/* 帮助文档主容器 - 匹配图片中的蓝色边框 */
#help-container {
position: absolute;
top: 60px;
left: 5%;
width: 90%;
height: 75vh;
background: rgba(20, 20, 40, 0.9);
border: 1px solid #1E90FF;
border-radius: 5px;
box-shadow: 0 0 15px rgba(30, 144, 255, 0.3);
display: flex;
flex-direction: column;
z-index: 100;
}
/* 标题栏 - 匹配图片中的顶部样式 */
.help-header {
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* 右上角功能按钮 */
.header-actions {
display: flex;
gap: 15px;
}
/* 搜索和AI按钮 - 精确匹配图片中的图标样式 */
.icon-btn {
width: 24px;
height: 24px;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s;
}
.icon-btn:hover {
opacity: 1;
}
#search-btn {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat center;
}
#ai-btn {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>') no-repeat center;
}
/* 搜索框弹出层 - 匹配图片中的科技感 */
.search-overlay {
position: absolute;
top: 60px;
right: 20px;
width: 300px;
background: rgba(30, 30, 60, 0.95);
border: 1px solid #1E90FF;
border-radius: 5px;
padding: 15px;
z-index: 1000;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
display: none;
}
.search-overlay input {
width: 100%;
padding: 10px;
background: rgba(0,0,0,0.3);
border: 1px solid #1E90FF;
color: white;
border-radius: 4px;
}
/* 主体内容区 - 匹配图片中的布局 */
.help-body {
display: flex;
flex: 1;
overflow: hidden;
}
/* 左侧树状菜单 - 精确还原图片中的样式 */
.tree-menu {
width: 250px;
padding: 15px;
border-right: 1px solid rgba(255,255,255,0.1);
overflow-y: auto;
}
.tree-category {
margin-bottom: 15px;
}
.tree-title {
color: #1E90FF;
font-weight: bold;
padding: 8px 0;
cursor: pointer;
user-select: none;
}
.tree-items {
margin-left: 10px;
border-left: 1px dashed rgba(255,255,255,0.2);
}
.tree-item {
padding: 8px 15px;
cursor: pointer;
transition: all 0.2s;
}
.tree-item:hover {
color: #1E90FF;
}
.tree-item.active {
color: #1E90FF;
background: rgba(30, 144, 255, 0.1);
}
/* 右侧文档内容 - 匹配图片中的文字样式 */
.doc-content {
flex: 1;
padding: 20px;
overflow-y: auto;
}
.doc-article {
display: none;
line-height: 1.6;
}
.doc-article.active {
display: block;
}
.doc-article h2 {
color: #1E90FF;
border-bottom: 1px solid rgba(30, 144, 255, 0.3);
padding-bottom: 10px;
}
.doc-article pre {
background: rgba(0,0,0,0.3);
border: 1px solid #1E90FF;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
}
/* AI助手面板 - 匹配图片中的科技风格 */
.ai-panel {
position: fixed;
top: 0;
right: -350px;
width: 350px;
height: 100vh;
background: rgba(20, 20, 40, 0.95);
border-left: 1px solid #1E90FF;
z-index: 1000;
transition: right 0.3s;
display: flex;
flex-direction: column;
}
.ai-header {
padding: 15px;
border-bottom: 1px solid #1E90FF;
color: #1E90FF;
font-weight: bold;
}
.ai-messages {
flex: 1;
padding: 15px;
overflow-y: auto;
}
.message {
margin-bottom: 15px;
padding: 10px;
border-radius: 5px;
max-width: 80%;
}
.ai-message {
background: rgba(30, 144, 255, 0.1);
border: 1px solid rgba(30, 144, 255, 0.3);
margin-right: auto;
}
.user-message {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.3);
margin-left: auto;
}
.ai-input {
padding: 15px;
border-top: 1px solid #1E90FF;
}
.ai-input textarea {
width: 100%;
padding: 10px;
background: rgba(0,0,0,0.3);
border: 1px solid #1E90FF;
color: white;
border-radius: 5px;
resize: none;
}
</style>
</head>
<body>
<!-- 主容器 -->
<div id="help-container">
<!-- 标题栏 -->
<div class="help-header">
<h3>帮助文档</h3>
<div class="header-actions">
<div id="search-btn" class="icon-btn" onclick="toggleSearch()"></div>
<div id="ai-btn" class="icon-btn" onclick="toggleAI()"></div>
</div>
</div>
<!-- 搜索框 -->
<div class="search-overlay">
<input type="text" placeholder="搜索文档内容...">
<div style="margin-top:10px;color:#aaa;font-size:12px;">
支持关键词、API名称等搜索
</div>
</div>
<!-- 主体内容 -->
<div class="help-body">
<!-- 左侧菜单 -->
<div class="tree-menu">
<div class="tree-category">
<div class="tree-title" onclick="toggleCategory(this)">快速入门</div>
<div class="tree-items">
<div class="tree-item active" onclick="showArticle('start-install')">安装指南</div>
<div class="tree-item" onclick="showArticle('start-demo')">第一个示例</div>
</div>
</div>
<div class="tree-category">
<div class="tree-title" onclick="toggleCategory(this)">API参考</div>
<div class="tree-items">
<div class="tree-item" onclick="showArticle('api-agent')">智能体API</div>
<div class="tree-item" onclick="showArticle('api-data')">数据接口</div>
</div>
</div>
<div class="tree-category">
<div class="tree-title" onclick="toggleCategory(this)">开发指南</div>
<div class="tree-items">
<div class="tree-item" onclick="showArticle('dev-ui')">界面定制</div>
<div class="tree-item" onclick="showArticle('dev-deploy')">部署方案</div>
</div>
</div>
</div>
<!-- 右侧文档 -->
<div class="doc-content">
<div id="start-install" class="doc-article active">
<h2>安装指南</h2>
<p>通过npm安装最新版本SDK：</p>
<pre><code>npm install @company/agent-sdk</code></pre>
<p>或直接通过CDN引入：</p>
<pre><code><script src="https://cdn.company.com/agent-sdk.min.js"></script></code></pre>
</div>
<div id="start-demo" class="doc-article">
<h2>第一个示例</h2>
<p>创建基础智能体实例：</p>
<pre><code>const agent = new Company.Agent({
config: {
debug: true,
apiKey: 'YOUR_KEY'
},
onReady: () => {
console.log("Agent initialized");
}
});</code></pre>
</div>
<!-- 其他文章内容... -->
</div>
</div>
</div>
<!-- AI助手面板 -->
<div class="ai-panel">
<div class="ai-header">AI文档助手</div>
<div class="ai-messages" id="ai-messages">
<div class="message ai-message">
<p>您好！我是智能文档助手，可以解答产品相关问题。</p>
</div>
</div>
<div class="ai-input">
<textarea placeholder="输入您的问题..." id="ai-question"></textarea>
<button style="margin-top:10px;background:#1E90FF;color:white;border:none;padding:8px 15px;border-radius:4px;" onclick="sendQuestion()">发送</button>
</div>
</div>
<script>
// 树状菜单交互
function toggleCategory(element) {
const items = element.nextElementSibling;
items.style.display = items.style.display === 'none' ? 'block' : 'none';
}
// 文档内容切换
function showArticle(articleId) {
// 更新菜单选中状态
document.querySelectorAll('.tree-item').forEach(item => {
item.classList.remove('active');
});
event.target.classList.add('active');
// 切换文章显示
document.querySelectorAll('.doc-article').forEach(article => {
article.classList.remove('active');
});
document.getElementById(articleId).classList.add('active');
}
// 搜索功能
function toggleSearch() {
const search = document.querySelector('.search-overlay');
search.style.display = search.style.display === 'block' ? 'none' : 'block';
if(search.style.display === 'block') {
search.querySelector('input').focus();
}
}
// AI助手功能
function toggleAI() {
const aiPanel = document.querySelector('.ai-panel');
aiPanel.style.right = aiPanel.style.right === '0px' ? '-350px' : '0';
}
function sendQuestion() {
const input = document.getElementById('ai-question');
const question = input.value.trim();
if(!question) return;
// 添加用户消息
const userMsg = document.createElement('div');
userMsg.className = 'message user-message';
userMsg.innerHTML = `<p>${question}</p>`;
document.getElementById('ai-messages').appendChild(userMsg);
// 模拟AI回复
setTimeout(() => {
const aiMsg = document.createElement('div');
aiMsg.className = 'message ai-message';
aiMsg.innerHTML = `<p>关于"${question}"，建议参考<a href="#" onclick="showArticle('start-install')">安装指南</a>相关内容...</p>`;
document.getElementById('ai-messages').appendChild(aiMsg);
document.getElementById('ai-messages').scrollTop = 9999;
}, 800);
input.value = '';
document.getElementById('ai-messages').scrollTop = 9999;
}
// 初始化默认展开第一个分类
document.querySelectorAll('.tree-items').forEach((items, index) => {
items.style.display = index === 0 ? 'block' : 'none';
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html