<!DOCTYPE html>
<html>
<head>
<title>公司产品平台</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<style>
/* 全局样式 - 匹配图片中的星空背景 */
body {
margin: 0;
overflow: hidden;
font-family: 'Arial', sans-serif;
color: white;
background-color: #000;
}
/* Three.js 星空背景容器 */
#canvas-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/* 顶部标题 - 匹配图片中的白色大字 */
.main-title {
position: absolute;
top: 20px;
left: 0;
width: 100%;
text-align: center;
font-size: 2.5em;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
z-index: 100;
}
/* 工作台按钮 - 匹配图片中的灰色按钮 */
.workspace-btn {
position: absolute;
top: 20px;
right: 20px;
padding: 8px 15px;
background: rgba(150, 150, 150, 0.2);
color: #CCCCCC;
border: none;
border-radius: 4px;
cursor: pointer;
z-index: 100;
}
/* 项目案例展示区 - 匹配图片中的三个黑框 */
.project-showcase {
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%);
width: 80%;
display: flex;
justify-content: space-between;
z-index: 10;
}
.project-card {
width: 30%;
padding: 20px;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 5px;
}
.project-title {
color: #1E90FF;
font-size: 1.2em;
margin-bottom: 10px;
}
.project-desc {
color: #CCCCCC;
font-size: 0.9em;
line-height: 1.5;
}
/* 底部导航栏 - 匹配图片中的五个灰色按钮 */
.main-nav {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 80%;
display: flex;
justify-content: space-between;
z-index: 100;
}
.nav-btn {
padding: 12px 20px;
background: rgba(150, 150, 150, 0.2);
color: #CCCCCC;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* 帮助文档模块 - 集成到主界面 */
#help-container {
position: absolute;
top: 80px;
left: 10%;
width: 80%;
height: 70vh;
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: none; /* 默认隐藏 */
flex-direction: column;
z-index: 200;
}
/* 帮助文档内部样式（保持之前的设计） */
.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;
}
.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;
}
.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;
}
.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;
}
.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>
<!-- Three.js 星空背景 -->
<div id="canvas-container"></div>
<!-- 顶部标题 -->
<h1 class="main-title">公司产品平台</h1>
<!-- 工作台按钮 -->
<button class="workspace-btn">进入工作台</button>
<!-- 项目案例展示 -->
<div class="project-showcase">
<div class="project-card">
<div class="project-title">面向对象业务系统</div>
<div class="project-desc">基于Three.js的智能仓储管理系统，实现货物可视化追踪</div>
</div>
<div class="project-card">
<div class="project-title">检测业务系统</div>
<div class="project-desc">实时监控设备状态和环境数据的数字孪生解决方案</div>
</div>
<div class="project-card">
<div class="project-title">原材料管理服务平台</div>
<div class="project-desc">使用粒子系统模拟城市交通流量和拥堵预测</div>
</div>
</div>
<!-- 底部导航 -->
<div class="main-nav">
<button class="nav-btn" onclick="showModule('project-case')">项目案例</button>
<button class="nav-btn">智能体开发平台</button>
<button class="nav-btn" onclick="showHelp()">帮助文档</button>
<button class="nav-btn">AI问答</button>
<button class="nav-btn">智能体</button>
</div>
<!-- 帮助文档模块 -->
<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>
// 初始化Three.js星空背景
let scene, camera, renderer, stars;
function initThreeJS() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 1;
// 创建星星粒子
const geometry = new THREE.BufferGeometry();
const vertices = [];
for (let i = 0; i < 10000; i++) {
vertices.push(
(Math.random() - 0.5) * 2000,
(Math.random() - 0.5) * 2000,
(Math.random() - 0.5) * 2000
);
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
const material = new THREE.PointsMaterial({
size: 1,
color: 0xFFFFFF,
sizeAttenuation: false
});
stars = new THREE.Points(geometry, material);
scene.add(stars);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas-container').appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
stars.rotation.x += 0.0005;
stars.rotation.y += 0.001;
renderer.render(scene, camera);
}
// 帮助文档功能
function showHelp() {
document.getElementById('help-container').style.display = 'flex';
}
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();
}
}
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);
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;
}
// 初始化
initThreeJS();
animate();
// 默认展开第一个分类
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