st2411020120
d1066566c0
1. 优化工作坊列表布局，实现标题与按钮垂直对齐 2. 实现查看结果按钮的防抖功能和加载状态 3. 优化时间排序逻辑，默认按时间降序，点击按钮按时间升序 4. 实现多选功能，勾选框与工作坊名称高度对齐 5. 添加AI结果缓存功能，避免重复API调用 6. 优化空状态显示，居中创建第一个工作坊按钮 7. 完善README.md文档，添加新功能描述和使用指南 8. 调整字体样式，优化视觉效果
115 lines
4.5 KiB
HTML
115 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>开始辩论 - {{ workshop.name }}</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- 页面标题 -->
|
|
<header>
|
|
<h1>开始辩论 - {{ workshop.name }}</h1>
|
|
<p>选择角色并发表观点，参与多视角辩论</p>
|
|
</header>
|
|
|
|
<!-- 导航按钮 -->
|
|
<div class="btn-group">
|
|
<button onclick="window.location.href='{{ url_for('index') }}'" class="btn-secondary">返回首页</button>
|
|
</div>
|
|
|
|
<!-- 流程指示器 -->
|
|
<div class="process-indicator">
|
|
<div class="process-step">
|
|
<div class="process-step-number completed">1</div>
|
|
<div class="process-step-text completed">创建工作坊</div>
|
|
</div>
|
|
<div class="process-arrow">→</div>
|
|
<div class="process-step">
|
|
<div class="process-step-number completed">2</div>
|
|
<div class="process-step-text completed">配置角色</div>
|
|
</div>
|
|
<div class="process-arrow">→</div>
|
|
<div class="process-step">
|
|
<div class="process-step-number active">3</div>
|
|
<div class="process-step-text active">开始辩论</div>
|
|
</div>
|
|
<div class="process-arrow">→</div>
|
|
<div class="process-step">
|
|
<div class="process-step-number">4</div>
|
|
<div class="process-step-text">查看结果</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 辩论内容列表 -->
|
|
<div class="card">
|
|
<h3>辩论内容</h3>
|
|
{% if workshop.debate_content %}
|
|
{% for item in workshop.debate_content %}
|
|
<div class="debate-item">
|
|
<div class="role-tag">{{ item.role }}</div>
|
|
<div class="opinion-content">{{ item.opinion }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<p>暂无辩论内容，请选择角色发表观点</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- 发表观点表单 -->
|
|
<div class="card">
|
|
<h3>发表观点</h3>
|
|
<form method="post">
|
|
<div class="form-group">
|
|
<label for="role_index">选择角色</label>
|
|
<select id="role_index" name="role_index" required>
|
|
{% for i in range(workshop.roles|length) %}
|
|
<option value="{{ i }}">{{ workshop.roles[i].name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="role_opinion">观点内容</label>
|
|
<textarea id="role_opinion" name="role_opinion" required placeholder="请输入该角色的观点..."></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-success">提交观点</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 查看结果按钮 -->
|
|
<div class="btn-group">
|
|
<button id="viewResultsBtn" onclick="viewResults()" class="btn-success">查看结果</button>
|
|
<div id="loadingMessage" style="display: none; color: #666; margin-left: 10px;">正在生成中，请勿重复点击...</div>
|
|
</div>
|
|
|
|
<script>
|
|
let isGenerating = false;
|
|
|
|
function viewResults() {
|
|
if (isGenerating) {
|
|
return;
|
|
}
|
|
|
|
isGenerating = true;
|
|
const viewResultsBtn = document.getElementById('viewResultsBtn');
|
|
const loadingMessage = document.getElementById('loadingMessage');
|
|
|
|
if (viewResultsBtn && loadingMessage) {
|
|
viewResultsBtn.disabled = true;
|
|
loadingMessage.style.display = 'inline';
|
|
}
|
|
|
|
// 延迟跳转到结果页面，确保用户能看到加载提示
|
|
setTimeout(() => {
|
|
window.location.href = '{{ url_for('show_results', workshop_id=workshop_id) }}';
|
|
}, 500);
|
|
}
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html> |