// 添加事件监听
const viewBtn = card.querySelector('[data-action="view"]');
const chatBtn = card.querySelector('[data-action="chat"]');
viewBtn.addEventListener('click', () => viewProject(project));
chatBtn.addEventListener('click', () => openProjectChat(project));
return card;
}
// 生成成员头像
function generateMemberAvatars(members) {
if (!members || members.length === 0) {
return '';
}
// 只显示前3个成员
const displayMembers = members.slice(0, 3);
let html = '';
displayMembers.forEach(member => {
const initial = member.name?.charAt(0) || '?';
html += `${initial}
`;
});
// 如果有更多成员，显示数量
if (members.length > 3) {
html += `+${members.length - 3}
`;
}
return html;
}
// 格式化截止日期
function formatDeadline(deadline) {
if (!deadline) return '无截止日期';
const deadlineDate = new Date(deadline);
const today = new Date();
const diffTime = deadlineDate - today;
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
if (diffDays < 0) return '已过期';
if (diffDays === 0) return '今天截止';
if (diffDays === 1) return '明天截止';
if (diffDays < 7) return `${diffDays}天后截止`;
if (diffDays < 30) return `${Math.floor(diffDays / 7)}周后截止`;
return deadlineDate.toLocaleDateString('zh-CN');
}
// 加载聊天记录
async function loadChatMessages() {
try {
// 调用API获取聊天记录
const response = await window.AnimForgeAPI.team.getChatMessages();
if (response.success && response.messages.length > 0) {
updateChatMessages(response.messages);
} else {
useMockChatMessages();
}
} catch (error) {
console.error('加载聊天记录失败:', error);
useMockChatMessages();
}
}
// 更新聊天消息
function updateChatMessages(messages) {
const chatMessages = document.getElementById('chat-messages');
chatMessages.innerHTML = '';
messages.forEach(message => {
const messageEl = createMessageElement(message);
chatMessages.appendChild(messageEl);
});
// 滚动到底部
scrollChatToBottom();
}
// 创建消息元素
function createMessageElement(message) {
const messageEl = document.createElement('div');
messageEl.className = `message ${message.type || 'received'}`;
const time = formatMessageTime(message.timestamp);
messageEl.innerHTML = `
${message.content}
${time}
`;
return messageEl;
}
// 格式化消息时间
function formatMessageTime(timestamp) {
const date = new Date(timestamp);
const now = new Date();
const diffMs = now - date;
const diffMins = Math.floor(diffMs / 60000);
const diffHours = Math.floor(diffMs / 3600000);
if (diffMins < 1) return '刚刚';
if (diffMins < 60) return `${diffMins}分钟前`;
if (diffHours < 24) return `${diffHours}小时前`;
return date.toLocaleTimeString('zh-CN', {
hour: '2-digit',
minute: '2-digit'
});
}
// 初始化事件监听
function initEventListeners() {
// 添加成员按钮
const addMemberBtn = document.getElementById('add-member-btn');
if (addMemberBtn) {
addMemberBtn.addEventListener('click', handleAddMember);
}
// 创建项目按钮
const createProjectBtn = document.getElementById('create-project-btn');
if (createProjectBtn) {
createProjectBtn.addEventListener('click', handleCreateProject);
}
// 快速操作项
const actionItems = document.querySelectorAll('.action-item');
actionItems.forEach(item => {
item.addEventListener('click', function() {
const action = this.getAttribute('data-action');
handleQuickAction(action);
});
});
// 聊天发送按钮
const chatSendBtn = document.getElementById('chat-send-btn');
const chatInput = document.getElementById('chat-input');
if (chatSendBtn && chatInput) {
chatSendBtn.addEventListener('click', handleSendMessage);
chatInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSendMessage();
}
});
}
// 导航链接
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const page = this.getAttribute('data-page');
navigateToPage(page);
});
});
}
// 初始化模拟数据
function initMockData() {
// 模拟团队成员
const mockMembers = [
{ id: '1', name: '张三', role: '项目经理', status: 'online' },
{ id: '2', name: '李四', role: '美术设计', status: 'online' },
{ id: '3', name: '王五', role: '动画师', status: 'busy' },
{ id: '4', name: '赵六', role: '编剧', status: 'offline' },
{ id: '5', name: '钱七', role: '音效师', status: 'online' },
{ id: '6', name: '孙八', role: '测试员', status: 'away' }
];
updateMembersList(mockMembers);
// 模拟项目
useMockProjects();
// 模拟聊天消息
useMockChatMessages();
}
// 使用模拟团队数据
function useMockTeamData() {
console.log('使用模拟团队数据');
const mockOverview = {
members_count: 8,
online_count: 5,
projects_count: 5,
activity_count: 47
};
updateTeamOverview(mockOverview);
}
// 使用模拟项目数据
function useMockProjects() {
const mockProjects = [
{
id: '1',
name: '星空幻想动画',
description: '制作星空主题的短篇动画',
members: [
{ name: '张三' },
{ name: '李四' },
{ name: '王五' },
{ name: '赵六' }
],
member_count: 4,
progress: 75,
deadline: '2026-04-15'
},
{
id: '2',
name: '角色设计集',
description: '创作系列动漫角色设计',
members: [
{ name: '李四' },
{ name: '钱七' }
],
member_count: 2,
progress: 90,
deadline: '2026-03-30'
},
{
id: '3',
name: '场景概念图',
description: '绘制奇幻世界场景概念图',
members: [
{ name: '王五' },
{ name: '孙八' }
],
member_count: 2,
progress: 60,
deadline: '2026-04-10'
}
];
updateProjectsGrid(mockProjects);
}
// 使用模拟聊天消息
function useMockChatMessages() {
const mockMessages = [
{
id: '1',
type: 'received',
content: '大家好！新的动画项目已经开始了，请大家查看项目详情。',
timestamp: '2026-03-23T09:30:00Z'
},
{
id: '2',
type: 'sent',
content: '收到！我已经开始角色设计了。',
timestamp: '2026-03-23T09:35:00Z'
},
{
id: '3',
type: 'received',
content: '场景概念图初稿已经完成，请大家提意见。',
timestamp: '2026-03-23T10:15:00Z'
},
{
id: '4',
type: 'received',
content: '音效部分预计明天可以完成第一版。',
timestamp: '2026-03-23T11:20:00Z'
}
];
updateChatMessages(mockMessages);
}
// 处理添加成员
function handleAddMember() {
showMessage('添加成员功能开发中', 'info');
// TODO: 实现添加成员模态框
}
// 处理创建项目
function handleCreateProject() {
showMessage('创建项目功能开发中', 'info');
// TODO: 实现创建项目模态框
}
// 处理快速操作
function handleQuickAction(action) {
console.log('快速操作:', action);
switch (action) {
case 'create-project':
handleCreateProject();
break;
case 'schedule-meeting':
showMessage('安排会议功能开发中', 'info');
break;
case 'share-assets':
showMessage('共享资产功能开发中', 'info');
break;
case 'team-settings':
showMessage('团队设置功能开发中', 'info');
break;
}
}
// 发送消息给成员
function sendMessageToMember(member) {
const chatInput = document.getElementById('chat-input');
chatInput.value = `@${member.name} `;
chatInput.focus();
showMessage(`准备给 ${member.name} 发送消息`, 'info');
}
// 查看成员资料
function viewMemberProfile(member) {
showMessage(`查看 ${member.name} 的资料`, 'info');
// TODO: 实现查看成员资料功能
}
// 查看项目详情
function viewProject(project) {
showMessage(`查看项目: ${project.name}`, 'info');
// TODO: 实现查看项目详情功能
}
// 打开项目聊天
function openProjectChat(project) {
showMessage(`打开项目聊天: ${project.name}`, 'info');
// TODO: 实现项目聊天功能
}
// 处理发送消息
function handleSendMessage() {
const chatInput = document.getElementById('chat-input');
const message = chatInput.value.trim();
if (!message) {
showMessage('请输入消息内容', 'warning');
return;
}
// 创建消息元素
const messageEl = createMessageElement({
type: 'sent',
content: message,
timestamp: new Date().toISOString()
});
// 添加到聊天区域
const chatMessages = document.getElementById('chat-messages');
chatMessages.appendChild(messageEl);
// 清空输入框
chatInput.value = '';
// 滚动到底部
scrollChatToBottom();
// 模拟回复（演示用）
setTimeout(() => {
const replies = [
'收到！',
'好的，明白了。',
'这个想法不错！',
'我会尽快处理。',
'需要我帮忙吗？'
];
const randomReply = replies[Math.floor(Math.random() * replies.length)];
const replyEl = createMessageElement({
type: 'received',
content: randomReply,
timestamp: new Date().toISOString()
});
chatMessages.appendChild(replyEl);
scrollChatToBottom();
}, 1000);
}
// 滚动聊天到底部
function scrollChatToBottom() {
const chatMessages = document.getElementById('chat-messages');
chatMessages.scrollTop = chatMessages.scrollHeight;
}
// 页面导航
function navigateToPage(page) {
switch (page) {
case 'dashboard':
window.location.href = 'dashboard.html';
break;
case 'library':
window.location.href = 'asset-library.html';
break;
case 'generate':
window.location.href = 'ai-test.html';
break;
case 'team':
window.location.href = 'team-collaboration.html';
break;
case 'projects':
window.location.href = 'projects-complete.html';
break;
case 'settings':
window.location.href = 'account-settings.html';
break;
}
}
// 显示加载状态
function showLoading(elementId, show = true) {
const element = document.getElementById(elementId);
if (!element) return;
const loadingEl = element.querySelector('.loading');
if (loadingEl) {
loadingEl.style.display = show ? 'inline-block' : 'none';
}
}
// 隐藏所有加载状态
function hideLoading() {
document.querySelectorAll('.loading').forEach(el => {
el.style.display = 'none';
});
}
// 显示消息
function showMessage(message, type = 'info') {
// 创建消息元素
const messageEl = document.createElement('div');
messageEl.className = `message-${type}`;
messageEl.textContent = message;
messageEl.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
padding: 16px 24px;
background: ${type === 'success' ? '#4CAF50' : type === 'error' ? '#F44336' : type === 'warning' ? '#FFC107' : '#2196F3'};
color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 9999;
animation: slideIn 0.3s ease;
`;
// 添加到页面
document.body.appendChild(messageEl);
// 3秒后自动移除
setTimeout(() => {
messageEl.style.animation = 'slideOut 0.3s ease';
setTimeout(() => {
if (messageEl.parentNode) {
messageEl.parentNode.removeChild(messageEl);
}
}, 300);
}, 3000);
// 添加CSS动画
if (!document.querySelector('#message-animations')) {
const style = document.createElement('style');
style.id = 'message-animations';
style.textContent = `
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
`;
document.head.appendChild(style);
}
}
// 页面可见性变化处理
document.addEventListener('visibilitychange', function() {
if (!document.hidden) {
// 页面重新可见时刷新数据
loadTeamData();
loadProjects();
loadChatMessages();
}
});
// 定期刷新数据（每2分钟）
setInterval(() => {
if (!document.hidden) {
loadTeamData();
}
}, 2 * 60 * 1000);
// 初始化完成
console.log('团队协作页面初始化完成');