Files
backtrader/templates/index.html
2026-01-17 21:21:30 +08:00

307 lines
9.3 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>策略编辑器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background-color: #4CAF50;
color: white;
padding: 20px;
border-radius: 5px;
margin-bottom: 20px;
text-align: center;
}
h1 {
font-size: 28px;
margin-bottom: 10px;
}
.main-content {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.sidebar {
flex: 0 0 300px;
background-color: white;
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.main-panel {
flex: 1;
min-width: 300px;
background-color: white;
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h2 {
font-size: 20px;
margin-bottom: 15px;
color: #4CAF50;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
.strategy-list {
list-style: none;
max-height: 400px;
overflow-y: auto;
}
.strategy-list li {
padding: 10px;
border-bottom: 1px solid #eee;
cursor: pointer;
transition: background-color 0.2s;
}
.strategy-list li:hover {
background-color: #f0f0f0;
}
.strategy-list li a {
color: #333;
text-decoration: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.strategy-list li .delete-btn {
color: #ff4444;
font-size: 12px;
padding: 2px 6px;
border-radius: 3px;
background-color: #ffebee;
}
.strategy-list li .delete-btn:hover {
background-color: #ffcdd2;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 14px;
}
textarea {
width: 100%;
min-height: 400px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 14px;
resize: vertical;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 3px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s;
margin-right: 10px;
margin-bottom: 10px;
}
.btn-primary {
background-color: #4CAF50;
color: white;
}
.btn-primary:hover {
background-color: #45a049;
}
.btn-secondary {
background-color: #2196F3;
color: white;
}
.btn-secondary:hover {
background-color: #0b7dda;
}
.btn-danger {
background-color: #f44336;
color: white;
}
.btn-danger:hover {
background-color: #da190b;
}
.btn-clear {
background-color: #9e9e9e;
color: white;
}
.btn-clear:hover {
background-color: #757575;
}
.flash-messages {
margin-bottom: 20px;
}
.flash {
padding: 10px;
border-radius: 3px;
margin-bottom: 10px;
font-weight: bold;
}
.flash.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.flash.danger {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.flash.info {
background-color: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
@media (max-width: 768px) {
.main-content {
flex-direction: column;
}
.sidebar {
flex: 0 0 100%;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>策略编辑器 (Web GUI版本)</h1>
<p>用于读取、修改和新增策略,并在保存时自动更新所有需要使用该策略的地方</p>
</header>
<div class="flash-messages">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="flash {{ category }}">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
</div>
<div class="main-content">
<div class="sidebar">
<h2>策略列表</h2>
{% if strategies %}
<ul class="strategy-list">
{% for strategy_name, file_name, file_path in strategies %}
<li>
<a href="{{ url_for('read_strategy', strategy_name=strategy_name) }}">
<span>{{ strategy_name }}</span>
<span class="delete-btn" onclick="event.stopPropagation(); confirmDelete('{{ strategy_name }}');">删除</span>
</a>
</li>
{% endfor %}
</ul>
{% else %}
<p>没有找到策略文件</p>
{% endif %}
<h2>创建新策略</h2>
<form action="{{ url_for('create_strategy') }}" method="post">
<div class="form-group">
<label for="strategy_name">策略名称</label>
<input type="text" id="strategy_name" name="strategy_name" placeholder="如: MyStrategy" required>
</div>
<button type="submit" class="btn btn-primary">创建策略</button>
</form>
</div>
<div class="main-panel">
<h2>策略编辑</h2>
<form action="{{ url_for('save_strategy') }}" method="post">
<div class="form-group">
<label for="strategy_name">当前策略</label>
<input type="text" id="current_strategy_name" name="strategy_name" value="{{ current_strategy or '' }}" readonly>
</div>
<div class="form-group">
<label for="strategy_content">策略代码</label>
<textarea id="strategy_content" name="strategy_content" placeholder="输入策略代码...">{{ current_content or '' }}</textarea>
</div>
<button type="submit" class="btn btn-primary">保存策略</button>
<a href="{{ url_for('clear_strategy') }}" class="btn btn-clear">清除当前</a>
</form>
</div>
</div>
</div>
<script>
function confirmDelete(strategy_name) {
if (confirm(`确定要删除策略 "${strategy_name}" 吗?此操作不可恢复。`)) {
window.location.href = `{{ url_for('delete_strategy', strategy_name='') }}${strategy_name}`;
}
}
// 自动调整文本区域高度
const textarea = document.getElementById('strategy_content');
if (textarea) {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
});
}
</script>
</body>
</html>