<!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;
}
/* 星空背景容器 */
#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;
color: white;
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(100, 100, 120, 0.3);
color: #CCCCCC;
border: none;
border-radius: 4px;
cursor: pointer;
z-index: 100;
}
.project-showcase {
position: absolute;
top: 30%;
right: 5%;
width: 30%;
display: flex;
flex-direction: column;
gap: 20px;
z-index: 10;
}
.project-card {
padding: 15px;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 5px;
}
.main-nav {
position: fixed;
bottom: 50%;
left: 5%;
transform: translateY(50%);
width: 30%;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 100;
}
.nav-btn {
padding: 12px 20px;
background: rgba(100, 100, 120, 0.3);
color: #CCCCCC;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
}
/* 帮助文档样式 */
#help-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(20, 20, 40, 0.95);
display: none;
flex-direction: column;
z-index: 1000;
}
.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;
}
.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;
}
.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;
}
.doc-content {
flex: 1;
padding: 20px;
overflow-y: auto;
}
/* 其他样式保持不变... */
</style>
</head>
<body>
<!-- 主页面内容 -->
<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">项目案例</button>
<button class="nav-btn" onclick="showHelp()">帮助文档</button>
<button class="nav-btn">智能体开发平台</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>
<script>
// Three.js初始化
let camera, scene, renderer, particles;
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 500;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x0000ff, 0.001);
const geometry = new THREE.BufferGeometry();
const vertices = [];
const size = 1500;
for (let i = 0; i < 10000; i++) {
const x = (Math.random() * size * 2) - size;
const y = (Math.random() * size * 2) - size;
const z = (Math.random() * size * 2) - size;
vertices.push(x, y, z);
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
const material = new THREE.PointsMaterial({
size: 2,
color: 0xffffff,
transparent: true,
opacity: 0.8
});
particles = new THREE.Points(geometry, material);
scene.add(particles);
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setPixelRatio(window.devicePixelRatio);
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);
render();
}
function render() {
particles.rotation.x += 0.001;
particles.rotation.y += 0.002;
renderer.render(scene, camera);
}
// 帮助文档功能
function showHelp() {
document.getElementById('help-container').style.display = 'flex';
document.getElementById('canvas-container').style.display = 'none';
}
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();
}
}
// 初始化
init();
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