<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teambition 帮助手册</title>
<style>
/* 语言切换样式 */
.language-switcher {
margin-right: 15px;
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;
}
/* 保持其他原有样式不变 */
body {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f7fa;
color: #333;
}
.container {
display: flex;
min-height: 100vh;
}
.sidebar {
width: 240px;
background-color: white;
box-shadow: 1px 0 5px rgba(0,0,0,0.05);
padding: 20px 0;
}
.logo {
padding: 0 20px 20px;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.share-btn {
color: #1a73e8;
font-size: 14px;
cursor: pointer;
}
.nav-item {
padding: 12px 20px;
cursor: pointer;
transition: background 0.2s;
font-size: 14px;
}
.nav-item:hover {
background-color: #f0f7ff;
color: #1a73e8;
}
.nav-item.active {
background-color: #e8f0fe;
color: #1a73e8;
border-left: 3px solid #1a73e8;
}
.main-content {
flex: 1;
background-color: white;
padding: 30px 40px;
}
.toolbar {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 10px 0;
margin-bottom: 20px;
}
.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;
}
.ai-assistant:hover {
background-color: #1a73e8;
color: white;
}
.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;
}
h1 {
font-size: 24px;
margin-top: 0;
margin-bottom: 20px;
color: #333;
}
.video-container {
background-color: #f0f7ff;
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
}
.video-placeholder {
width: 100%;
height: 300px;
background-color: #e0e0e0;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
color: #666;
margin-bottom: 15px;
position: relative;
}
.video-title {
position: absolute;
top: 20px;
left: 20px;
font-size: 18px;
font-weight: bold;
color: #333;
}
.video-subtitle {
position: absolute;
top: 50px;
left: 20px;
font-size: 14px;
color: #666;
}
.video-controls {
display: flex;
align-items: center;
}
.play-button {
width: 40px;
height: 40px;
background-color: #1a73e8;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
margin-right: 15px;
cursor: pointer;
}
.video-time {
color: #666;
font-size: 14px;
}
.content-text {
line-height: 1.6;
color: #444;
font-size: 15px;
}
</style>
</head>
<body>
<div class="container">
<!-- 左侧导航栏 -->
<div class="sidebar">
<div class="logo">
<span>Teambition 帮助手册</span>
<span class="share-btn">分享</span>
</div>
<div class="nav-item active">所有文章</div>
<div class="nav-item">Teambition 是什么</div>
<div class="nav-item">如何进入 Teambition</div>
<div class="nav-item">Teambition X 钉钉</div>
<div class="nav-item">了解钉钉快办</div>
<div class="nav-item">我的账号</div>
<div class="nav-item">企业首页</div>
<div class="nav-item">企业管理</div>
<div class="nav-item">玩转项目</div>
<div class="nav-item">深入任务</div>
<div class="nav-item">工具大全</div>
<div class="nav-item">开发平台</div>
<div class="nav-item">常见问题</div>
<div class="nav-item">使用贴士</div>
<div class="nav-item">公告通知</div>
<div class="nav-item">推广大使</div>
</div>
<!-- 右侧内容区 -->
<div class="main-content">
<!-- 顶部工具栏 - 新增语言切换 -->
<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>
<!-- 主要内容 -->
<h1>Teambition 是什么</h1>
<div class="video-container">
<div class="video-placeholder">
<div class="video-title">Teambition 新手入门指南</div>
<div class="video-subtitle">5分钟快速入门</div>
[视频预览图]
</div>
<div class="video-controls">
<div class="play-button">▶</div>
<div class="video-time">00/4:33</div>
</div>
</div>
<div class="content-text">
<p>我们的工作充满着大大小小的项目和任务:活动策划、工程实施、IT研发、风险投资等等。使用项目空间做「项目化」管理，团队规划工作使目标更清晰，执行更到位，而且完成过程也十分轻松，成员将有全新的协作体验。</p>
<p>可视化的内容进展和协作过程让团队信息透明，减少沟通成本，提高工作效率。通过任务分配、进度跟踪和文档共享等功能，您可以轻松管理整个项目生命周期。</p>
</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');
});
// 原有功能保持不变
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();
}
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html