<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建任务 - 超协体</title>
<script src="/js/auth.js"></script>
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
<script src="/js/websocket-client.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
/* 导航栏 */
.navbar {
background: white;
border-radius: 16px;
padding: 16px 24px;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.navbar-brand {
font-size: 20px;
font-weight: bold;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration: none;
}
.navbar-nav {
display: flex;
gap: 8px;
}
.nav-link {
padding: 8px 16px;
color: #666;
text-decoration: none;
border-radius: 8px;
font-size: 14px;
transition: all 0.3s;
}
.nav-link:hover {
background: #f0f0f0;
color: #333;
}
.nav-link.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
/* 表单容器 */
.form-container {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.form-header {
text-align: center;
margin-bottom: 32px;
}
.form-header h1 {
font-size: 28px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 8px;
}
.form-header p {
color: #666;
font-size: 14px;
}
.form-group {
margin-bottom: 24px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: 600;
font-size: 14px;
}
.form-group label .required {
color: #e53935;
margin-left: 4px;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 14px 16px;
border: 2px solid #e0e0e0;
border-radius: 12px;
font-size: 15px;
transition: all 0.3s;
font-family: inherit;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-group textarea {
min-height: 120px;
resize: vertical;
}
.form-group small {
display: block;
color: #888;
font-size: 12px;
margin-top: 6px;
}
/* 五行选择 */
.wuxing-options {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.wuxing-option {
flex: 1;
min-width: 100px;
padding: 16px 12px;
border: 2px solid #e0e0e0;
border-radius: 12px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
}
.wuxing-option:hover {
border-color: #667eea;
background: #f8f9ff;
}
.wuxing-option.selected {
border-color: #667eea;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}
.wuxing-option .icon {
font-size: 24px;
margin-bottom: 4px;
}
.wuxing-option .name {
font-size: 13px;
color: #333;
font-weight: 500;
}
/* 优先级选择 */
.priority-options {
display: flex;
gap: 12px;
}
.priority-option {
flex: 1;
padding: 14px 16px;
border: 2px solid #e0e0e0;
border-radius: 12px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
}
.priority-option:hover {
border-color: #667eea;
}
.priority-option.selected {
border-color: #667eea;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}
.priority-option .level {
font-size: 20px;
font-weight: bold;
margin-bottom: 2px;
}
.priority-option .desc {
font-size: 11px;
color: #666;
}
.priority-s { color: #e53935; }
.priority-a { color: #fb8c00; }
.priority-b { color: #43a047; }
.priority-c { color: #757575; }
/* 技能标签 */
.skills-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
min-height: 36px;
}
.skill-tag {
padding: 8px 14px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 20px;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
}
.skill-tag .remove {
cursor: pointer;
font-weight: bold;
opacity: 0.8;
}
.skill-tag .remove:hover {
opacity: 1;
}
/* 积分提示 */
.points-info {
background: #fff8e1;
border: 1px solid #ffe082;
border-radius: 12px;
padding: 16px;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 12px;
}
.points-info-icon {
font-size: 24px;
}
.points-info-text {
flex: 1;
}
.points-info-text strong {
color: #f57c00;
}
/* 提交按钮 */
.btn-submit {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}
.btn-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* 消息提示 */
.message {
padding: 16px;
border-radius: 12px;
margin-bottom: 20px;
display: none;
}
.message.success {
background: #e8f5e9;
color: #2e7d32;
border: 1px solid #a5d6a7;
}
.message.error {
background: #ffebee;
color: #c62828;
border: 1px solid #ef9a9a;
}
/* 响应式 */
@media (max-width: 600px) {
.wuxing-options {
flex-direction: column;
}
.wuxing-option {
min-width: auto;
}
.priority-options {
flex-wrap: wrap;
}
.priority-option {
flex: 1 1 45%;
}
.navbar-nav {
display: none;
}
}
</style>
</head>
<body>
<div class="container">
<!-- 导航栏 -->
<nav class="navbar">
<a href="/dashboard.html" class="navbar-brand">超协体</a>
<div class="navbar-nav">
<a href="/dashboard.html" class="nav-link">工作台</a>
<a href="/task-create.html" class="nav-link active">创建任务</a>
<a href="/my-tasks.html" class="nav-link">我的任务</a>
<a href="/members.html" class="nav-link">成员</a>
<a href="/profile.html" class="nav-link">画像</a>
</div>
</nav>
<!-- 表单 -->
<div class="form-container">
<div class="form-header">
<h1>创建新任务</h1>
<p>详细描述任务需求，系统将智能匹配最佳执行者</p>
</div>
<div id="successMessage" class="message success"></div>
<div id="errorMessage" class="message error"></div>
<!-- 积分提示 -->
<div class="points-info">
<span class="points-info-icon">💰</span>
<div class="points-info-text">
创建任务将消耗 <strong>10积分</strong>，当前余额：<strong id="currentPoints">--</strong> 积分
</div>
</div>
<form id="taskForm">
<!-- 任务标题 -->
<div class="form-group">
<label>任务标题 <span class="required">*</span></label>
<input type="text" id="title" placeholder="简洁明确的任务标题" maxlength="100" required>
<small>最多100字符</small>
</div>
<!-- 任务描述 -->
<div class="form-group">
<label>任务描述 <span class="required">*</span></label>
<textarea id="description" placeholder="详细描述任务目标、要求和验收标准..." required></textarea>
<small>清晰的描述有助于获得更好的执行结果</small>
</div>
<!-- 五行需求 -->
<div class="form-group">
<label>五行能量需求</label>
<div class="wuxing-options" id="wuxingOptions">
<div class="wuxing-option" data-value="火">
<div class="icon">🔥</div>
<div class="name">火 - 行动</div>
</div>
<div class="wuxing-option" data-value="金">
<div class="icon">⚙️</div>
<div class="name">金 - 思考</div>
</div>
<div class="wuxing-option" data-value="木">
<div class="icon">🌳</div>
<div class="name">木 - 构建</div>
</div>
<div class="wuxing-option" data-value="水">
<div class="icon">💧</div>
<div class="name">水 - 洞察</div>
</div>
<div class="wuxing-option" data-value="土">
<div class="icon">🏔️</div>
<div class="name">土 - 整合</div>
</div>
</div>
<small>选择最能代表此任务特质的五行能量</small>
</div>
<!-- 优先级 -->
<div class="form-group">
<label>优先级</label>
<div class="priority-options" id="priorityOptions">
<div class="priority-option" data-value="S">
<div class="level priority-s">S</div>
<div class="desc">紧急重要</div>
</div>
<div class="priority-option" data-value="A">
<div class="level priority-a">A</div>
<div class="desc">重要</div>
</div>
<div class="priority-option selected" data-value="B">
<div class="level priority-b">B</div>
<div class="desc">一般</div>
</div>
<div class="priority-option" data-value="C">
<div class="level priority-c">C</div>
<div class="desc">可延后</div>
</div>
</div>
</div>
<!-- 技能需求 -->
<div class="form-group">
<label>技能需求</label>
<div class="skills-container" id="skillsContainer"></div>
<input type="text" id="skillInput" placeholder="输入技能后按回车添加（如：Python、产品设计、数据分析）">
<small>添加所需技能标签，有助于智能匹配合适的执行者</small>
</div>
<!-- 奖励积分 -->
<div class="form-group">
<label>完成奖励积分</label>
<input type="number" id="rewardPoints" value="20" min="10" max="100" step="5">
<small>执行者完成任务后获得的积分奖励（10-100积分）</small>
</div>
<!-- 多AI协作选项 -->
<div class="form-group" style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); padding: 16px; border-radius: 12px; border: 2px solid rgba(102, 126, 234, 0.3);">
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 0;">
<input type="checkbox" id="enableMultiAI" style="width: 18px; height: 18px; cursor: pointer;">
<span style="font-size: 15px;">🤖 启用多AI协作</span>
</label>
<small style="display: block; margin-top: 8px; color: #666;">
复杂任务将自动拆解并由多个AI成员并行处理（需要先创建AI成员）
</small>
</div>
<button type="submit" class="btn-submit" id="submitBtn">
创建任务（消耗10积分）
</button>
</form>
</div>
</div>
<script>
// 检查登录状态
if (!isLoggedIn()) {
window.location.href = '/login.html';
}
// 状态变量
let selectedWuxing = null;
let selectedPriority = 'B';
let skills = [];
// 加载用户积分
async function loadUserPoints() {
try {
const response = await authFetch('/api/auth/me');
const data = await response.json();
if (data.success) {
document.getElementById('currentPoints').textContent = data.user.pointsBalance;
// 如果积分不足，禁用提交
if (data.user.pointsBalance < 10) {
document.getElementById('submitBtn').disabled = true;
document.getElementById('submitBtn').textContent = '积分不足';
showError('积分不足，创建任务需要10积分');
}
}
} catch (error) {
console.error('加载用户信息失败:', error);
}
}
// 五行选择
const wuxingOptions = document.querySelectorAll('#wuxingOptions .wuxing-option');
wuxingOptions.forEach(option => {
option.addEventListener('click', () => {
wuxingOptions.forEach(o => o.classList.remove('selected'));
option.classList.add('selected');
selectedWuxing = option.dataset.value;
});
});
// 优先级选择
const priorityOptions = document.querySelectorAll('#priorityOptions .priority-option');
priorityOptions.forEach(option => {
option.addEventListener('click', () => {
priorityOptions.forEach(o => o.classList.remove('selected'));
option.classList.add('selected');
selectedPriority = option.dataset.value;
});
});
// 技能标签
const skillInput = document.getElementById('skillInput');
const skillsContainer = document.getElementById('skillsContainer');
skillInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
const skill = skillInput.value.trim();
if (skill && !skills.includes(skill)) {
skills.push(skill);
renderSkills();
skillInput.value = '';
}
}
});
function renderSkills() {
skillsContainer.innerHTML = skills.map((skill, index) => `
<div class="skill-tag">
<span>${skill}</span>
<span class="remove" onclick="removeSkill(${index})">x</span>
</div>
`).join('');
}
function removeSkill(index) {
skills.splice(index, 1);
renderSkills();
}
// 显示消息
function showSuccess(message) {
const el = document.getElementById('successMessage');
el.textContent = message;
el.style.display = 'block';
document.getElementById('errorMessage').style.display = 'none';
}
function showError(message) {
const el = document.getElementById('errorMessage');
el.textContent = message;
el.style.display = 'block';
document.getElementById('successMessage').style.display = 'none';
}
// 提交表单
const taskForm = document.getElementById('taskForm');
const submitBtn = document.getElementById('submitBtn');
taskForm.addEventListener('submit', async (e) => {
e.preventDefault();
const title = document.getElementById('title').value.trim();
const description = document.getElementById('description').value.trim();
const rewardPoints = parseInt(document.getElementById('rewardPoints').value) || 20;
if (!title || !description) {
showError('请填写任务标题和描述');
return;
}
submitBtn.disabled = true;
submitBtn.textContent = '创建中...';
try {
const enableMultiAI = document.getElementById('enableMultiAI').checked;
const response = await authFetch('/api/tasks', {
method: 'POST',
body: JSON.stringify({
title,
description,
wuxing: selectedWuxing,
priority: selectedPriority,
skills_required: skills,
reward_points: rewardPoints
})
});
const data = await response.json();
if (data.success) {
// 如果启用多AI协作，自动触发
if (enableMultiAI && data.task_id) {
showSuccess('任务创建成功！正在启动多AI协作...');
try {
const multiAIResponse = await authFetch(`/api/tasks/${data.task_id}/multi-ai-collaborate`, {
method: 'POST'
});
const multiAIData = await multiAIResponse.json();
if (multiAIData.success) {
showSuccess('任务创建成功，多AI协作已启动！正在跳转...');
}
} catch (e) {
console.error('Multi-AI start failed:', e);
}
} else {
showSuccess('任务创建成功！正在跳转...');
}
setTimeout(() => {
window.location.href = `/task-detail.html?id=${data.task_id}`;
}, 1500);
} else {
showError(data.message || '创建失败，请重试');
submitBtn.disabled = false;
submitBtn.textContent = '创建任务（消耗10积分）';
}
} catch (error) {
console.error('创建任务失败:', error);
showError('网络错误，请重试');
submitBtn.disabled = false;
submitBtn.textContent = '创建任务（消耗10积分）';
}
});
// 页面加载
loadUserPoints();
</script>
</body>
</html>
