<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能体平台文档</title>
<style>
body {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f7fa;
color: #333;
}
.container {
display: flex;
min-height: 100vh;
}
/* 顶部工具栏 */
.toolbar {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 10px 20px;
background-color: white;
border-bottom: 1px solid #eee;
position: sticky;
top: 0;
z-index: 100;
}
.search-box {
position: relative;
margin-right: 15px;
}
.search-box input {
width: 200px;
padding: 8px 15px;
border: 1px solid #ddd;
border-radius: 20px;
outline: none;
}
.ai-assistant {
width: 36px;
height: 36px;
background-color: #f0f7ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
margin-right: 15px;
}
.ai-assistant:hover {
background-color: #1a73e8;
color: white;
}
.language-switcher {
position: relative;
}
.language-btn {
background: none;
border: none;
color: #666;
font-size: 14px;
cursor: pointer;
padding: 5px 10px;
border-radius: 4px;
transition: all 0.3s;
}
.language-btn:hover {
color: #1a73e8;
background-color: #f0f7ff;
}
.language-dropdown {
position: absolute;
right: 0;
top: 100%;
background: white;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border-radius: 4px;
padding: 5px 0;
display: none;
z-index: 100;
min-width: 100px;
}
.language-dropdown.show {
display: block;
}
.language-option {
padding: 8px 15px;
cursor: pointer;
transition: background 0.2s;
}
.language-option:hover {
background-color: #f0f7ff;
color: #1a73e8;
}
/* 左侧导航栏 - 多级菜单 */
.sidebar {
width: 280px;
background-color: white;
box-shadow: 1px 0 5px rgba(0,0,0,0.05);
padding: 20px 0;
position: relative;
z-index: 10;
}
.sidebar-header {
padding: 0 20px 20px;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #eee;
}
.nav-menu {
list-style: none;
padding: 0;
margin: 0;
}
.nav-item {
padding: 12px 20px;
cursor: pointer;
transition: background 0.2s;
font-size: 14px;
position: relative;
}
.nav-item:hover {
background-color: #f0f7ff;
color: #1a73e8;
}
.nav-item.active {
background-color: #e8f0fe;
color: #1a73e8;
border-left: 3px solid #1a73e8;
}
.nav-item.has-children::after {
content: "▸";
position: absolute;
right: 15px;
top: 12px;
font-size: 12px;
transition: transform 0.3s;
}
.nav-item.has-children.open::after {
transform: rotate(90deg);
}
.submenu {
list-style: none;
padding: 0;
margin: 0;
display: none;
background-color: #f9f9f9;
}
.submenu .nav-item {
padding-left: 30px;
}
.submenu .submenu .nav-item {
padding-left: 45px;
}
.nav-controls {
padding: 10px 20px;
display: flex;
justify-content: flex-end;
border-bottom: 1px solid #eee;
}
.nav-control-btn {
font-size: 12px;
color: #666;
background: none;
border: none;
cursor: pointer;
padding: 4px 8px;
border-radius: 3px;
transition: all 0.3s;
}
.nav-control-btn:hover {
color: #1a73e8;
background-color: #f0f7ff;
}
/* 内容区容器 */
.content-wrapper {
display: flex;
flex: 1;
flex-direction: column;
}
/* 内容大纲 - 文章内部结构 */
.content-outline {
width: 220px;
padding: 20px;
border-right: 1px solid #eee;
background-color: #f9f9f9;
transition: all 0.3s ease;
}
.content-outline.collapsed {
width: 0;
padding: 0;
overflow: hidden;
border-right: none;
}
/* 主内容区 */
.main-content-container {
display: flex;
flex: 1;
overflow: hidden;
}
.main-content {
flex: 1;
padding: 30px 40px;
overflow-y: auto;
background-color: white;
}
/* 大纲样式 */
.outline-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.outline-toggle {
background: none;
border: none;
color: #1a73e8;
cursor: pointer;
font-size: 12px;
}
.outline-list {
list-style: none;
padding: 0;
margin: 0;
}
.outline-list li {
padding: 8px 0;
}
.outline-list a {
color: #333;
text-decoration: none;
display: block;
}
.outline-list ul {
list-style: none;
padding-left: 15px;
margin: 5px 0;
}
/* 显示大纲的按钮 */
.show-outline-btn {
position: fixed;
left: 280px;
top: 60px;
background: #f9f9f9;
border: 1px solid #eee;
border-left: none;
padding: 5px 10px;
cursor: pointer;
display: none;
z-index: 5;
}
.content-outline.collapsed + .show-outline-btn {
display: block;
}
/* 内容样式 */
h1, h2, h3 {
color: #333;
}
h1 {
font-size: 24px;
margin-top: 0;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
h2 {
font-size: 20px;
margin-top: 30px;
padding-bottom: 8px;
border-bottom: 1px dashed #eee;
}
h3 {
font-size: 16px;
margin: 20px 0 10px;
}
p {
line-height: 1.6;
margin: 10px 0;
}
.project-info {
background-color: #f5f7fa;
padding: 15px;
border-radius: 4px;
margin: 15px 0;
border-left: 3px solid #1a73e8;
}
.project-info p {
margin: 8px 0;
}
.update-log {
margin: 15px 0;
padding-left: 15px;
border-left: 2px solid #eee;
}
/* AI对话框 */
.ai-dialog {
position: fixed;
right: 0;
top: 0;
width: 350px;
height: 100vh;
background-color: white;
box-shadow: -5px 0 15px rgba(0,0,0,0.1);
display: none;
flex-direction: column;
z-index: 1000;
transition: transform 0.3s ease;
}
.ai-dialog-actions {
display: flex;
margin-left: auto;
align-items: center;
}
.ai-dialog-btn {
margin-left: 15px;
cursor: pointer;
font-size: 14px;
color: #666;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.3s;
}
.ai-dialog-btn:hover {
color: #1a73e8;
background-color: #f0f7ff;
}
.ai-dialog-header {
padding: 15px;
border-bottom: 1px solid #eee;
font-weight: bold;
font-size: 16px;
display: flex;
align-items: center;
}
.ai-dialog-collapse {
cursor: pointer;
margin-right: 10px;
font-size: 16px;
color: #666;
}
.ai-dialog-collapse:hover {
color: #1a73e8;
}
.ai-dialog.collapsed {
transform: translateX(300px);
}
.ai-dialog.collapsed .ai-dialog-collapse {
transform: rotate(180deg);
}
.ai-dialog-content {
flex: 1;
padding: 15px;
overflow-y: auto;
}
.ai-dialog-input {
padding: 15px;
border-top: 1px solid #eee;
}
.input-with-button {
display: flex;
align-items: center;
border: 1px solid #ddd;
border-radius: 5px;
padding: 5px;
}
.input-with-button textarea {
flex: 1;
border: none;
resize: none;
outline: none;
padding: 8px;
min-height: 40px;
}
.send-button {
background: #1a73e8;
color: white;
border: none;
border-radius: 4px;
padding: 8px 15px;
margin-left: 10px;
cursor: pointer;
transition: background 0.3s;
}
.send-button:hover {
background: #0d5bba;
}
</style>
</head>
<body>
<!-- 顶部工具栏 -->
<div class="toolbar">
<div class="search-box">
<input type="text" placeholder="搜索帮助文档...">
</div>
<div class="ai-assistant" id="aiAssistant">
AI
</div>
<div class="language-switcher">
<button class="language-btn">中文</button>
<div class="language-dropdown" id="languageDropdown">
<div class="language-option" data-lang="zh">中文</div>
<div class="language-option" data-lang="en">English</div>
<div class="language-option" data-lang="ja">日本語</div>
</div>
</div>
</div>
<div class="container">
<!-- 左侧导航栏 - 多级菜单 -->
<div class="sidebar">
<div class="nav-controls">
<button class="nav-control-btn" id="toggleAllBtn">折叠所有</button>
</div>
<div class="sidebar-header">智能体平台文档</div>
<ul class="nav-menu">
<li class="nav-item active">产品介绍</li>
<li class="nav-item has-children open">
<span>项目案例</span>
<ul class="submenu" style="display: block;">
<li class="nav-item has-children open">
<span>材料检测类</span>
<ul class="submenu" style="display: block;">
<li class="nav-item">检测业务智能系统</li>
<li class="nav-item">材料缺陷检测系统</li>
<li class="nav-item">X射线衍射分析</li>
</ul>
</li>
<li class="nav-item has-children open">
<span>OA/实验室管理类</span>
<ul class="submenu" style="display: block;">
<li class="nav-item">智能实验室管理系统</li>
<li class="nav-item">面向对象管理系统</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item has-children open">
<span>智能体开发平台</span>
<ul class="submenu" style="display: block;">
<li class="nav-item">可视化编排工具</li>
<li class="nav-item">多模态能力市场</li>
<li class="nav-item">私有化部署方案</li>
</ul>
</li>
<li class="nav-item has-children open">
<span>AI问答系统</span>
<ul class="submenu" style="display: block;">
<li class="nav-item">混合检索架构</li>
<li class="nav-item">对话状态跟踪引擎</li>
<li class="nav-item">知识蒸馏优化模块</li>
</ul>
</li>
<li class="nav-item has-children open">
<span>智能体技术</span>
<ul class="submenu" style="display: block;">
<li class="nav-item">持续学习框架</li>
<li class="nav-item">多智能体协作协议</li>
<li class="nav-item">成本监控仪表盘</li>
</ul>
</li>
<li class="nav-item">常见问题</li>
<li class="nav-item">产品更新日志</li>
</ul>
</div>
<!-- 内容区容器 -->
<div class="content-wrapper">
<div class="main-content-container">
<!-- 内容大纲 - 当前文章结构 -->
<div class="content-outline" id="contentOutline">
<div class="outline-header">
<span>内容大纲</span>
<button class="outline-toggle" id="outlineToggle">隐藏</button>
</div>
<ul class="outline-list">
<li><a href="#section1">产品介绍</a>
<ul>
<li><a href="#section1-1">平台核心能力矩阵</a></li>
<li><a href="#section1-2">技术架构图</a></li>
<li><a href="#section1-3">行业解决方案图谱</a></li>
</ul>
</li>
</div>
<!-- 显示大纲的按钮 -->
<button class="show-outline-btn" id="showOutlineBtn">显示大纲</button>
<!-- 主内容区 -->
<div class="main-content">
<h1 id="section1">产品介绍</h1>
<h2 id="section1-1">平台核心能力矩阵</h2>
<p>展示智能体平台的核心功能和技术能力...</p>
<h2 id="section1-2">技术架构图（含大模型集成层）</h2>
<p>详细说明平台的技术架构和集成方案...</p>
<h2 id="section1-3">行业解决方案图谱</h2>
<p>展示针对不同行业的解决方案和应用场景...</p>
</div>
</div>
</div>
</div>
<!-- AI对话框 -->
<div class="ai-dialog" id="aiDialog">
<div class="ai-dialog-header">
<span class="ai-dialog-collapse" id="collapseBtn">❯❯</span>
<span>AI 助手</span>
<div class="ai-dialog-actions">
<span class="ai-dialog-btn" id="historyBtn">历史对话</span>
<span class="ai-dialog-btn" id="newChatBtn">开启新对话</span>
</div>
</div>
<div class="ai-dialog-content">
<p>您好！我是您的AI助手，有什么可以帮您的吗？</p>
</div>
<div class="ai-dialog-input">
<div class="input-with-button">
<textarea placeholder="请输入您的问题..."></textarea>
<button class="send-button">发送</button>
</div>
</div>
</div>
<script>
// 语言切换功能
const languageBtn = document.querySelector('.language-btn');
const languageDropdown = document.getElementById('languageDropdown');
languageBtn.addEventListener('click', function(e) {
e.stopPropagation();
languageDropdown.classList.toggle('show');
});
document.querySelectorAll('.language-option').forEach(option => {
option.addEventListener('click', function() {
const lang = this.getAttribute('data-lang');
languageBtn.textContent = this.textContent;
languageDropdown.classList.remove('show');
alert(`已切换至${this.textContent}，实际应用中这里会更新界面语言`);
});
});
// 点击页面其他区域关闭语言下拉
document.addEventListener('click', function() {
languageDropdown.classList.remove('show');
});
// AI对话框功能
document.getElementById('aiAssistant').addEventListener('click', function() {
const dialog = document.getElementById('aiDialog');
dialog.style.display = 'flex';
});
document.getElementById('collapseBtn').addEventListener('click', function(e) {
e.stopPropagation();
document.getElementById('aiDialog').style.display = 'none';
});
document.getElementById('historyBtn').addEventListener('click', function() {
alert('显示历史对话列表');
});
document.getElementById('newChatBtn').addEventListener('click', function() {
document.querySelector('.ai-dialog-content').innerHTML =
'<p>已创建新对话，请问有什么可以帮助您的？</p>';
document.querySelector('.ai-dialog-input textarea').value = '';
});
document.querySelector('.send-button').addEventListener('click', function() {
const input = document.querySelector('.ai-dialog-input textarea');
if (input.value.trim()) {
const content = document.querySelector('.ai-dialog-content');
content.innerHTML += `<p style="text-align:right;color:#1a73e8">用户：${input.value}</p>`;
content.innerHTML += `<p>AI助手：已收到您的提问，正在处理中...</p>`;
input.value = '';
content.scrollTop = content.scrollHeight;
}
});
document.querySelector('.ai-dialog-input textarea').addEventListener('keypress', function(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
document.querySelector('.send-button').click();
}
});
// 多级菜单功能
document.querySelectorAll('.nav-item.has-children').forEach(item => {
item.addEventListener('click', function(e) {
if (e.target === this || e.target.tagName === 'SPAN') {
const wasOpen = this.classList.contains('open');
this.classList.toggle('open');
const submenu = this.querySelector('.submenu');
submenu.style.display = wasOpen ? 'none' : 'block';
e.stopPropagation();
}
});
});
// 展开/折叠所有功能
const toggleAllBtn = document.getElementById('toggleAllBtn');
let isAllExpanded = true;
toggleAllBtn.addEventListener('click', function() {
const allMenuItems = document.querySelectorAll('.nav-item.has-children');
isAllExpanded = !isAllExpanded;
allMenuItems.forEach(item => {
item.classList.toggle('open', isAllExpanded);
const submenu = item.querySelector('.submenu');
submenu.style.display = isAllExpanded ? 'block' : 'none';
});
toggleAllBtn.textContent = isAllExpanded ? '折叠所有' : '展开所有';
});
// 导航项点击切换active状态
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('click', function() {
if (!this.classList.contains('has-children')) {
document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
this.classList.add('active');
}
});
});
// 内容大纲显示/隐藏功能
const outlineToggle = document.getElementById('outlineToggle');
const showOutlineBtn = document.getElementById('showOutlineBtn');
const contentOutline = document.getElementById('contentOutline');
outlineToggle.addEventListener('click', function() {
contentOutline.classList.add('collapsed');
});
showOutlineBtn.addEventListener('click', function() {
contentOutline.classList.remove('collapsed');
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html