index.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>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="container-fluid p-0">
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">超短线量化选股程序（插件化架构）</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#stock-selection">选股</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#backtest">回测</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#optimization">参数优化</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#results">选股结果</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#config">配置</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 主内容区域 -->
<div class="container py-5">
<!-- 选股模块 -->
<section id="stock-selection" class="mb-5">
<h2 class="mb-4">选股功能</h2>
<!-- 策略选择（多选） -->
<div class="row mb-3">
<div class="col-md-8">
<div class="input-group">
<label class="input-group-text" for="strategy-select">选股策略（可多选）</label>
<select class="form-select" id="strategy-select" multiple size="3">
<option value="vcp" selected>VCP（波动率收缩模式）策略</option>
<option value="model" selected>大模型选股策略</option>
<option value="test">测试选股策略</option>
</select>
</div>
<div class="form-text">按住Ctrl/Cmd键可多选，多个策略之间为逻辑与关系</div>
</div>
<div class="col-md-4">
<div class="input-group">
<label class="input-group-text" for="trade-date">选股日期</label>
<input type="date" class="form-control" id="trade-date">
</div>
</div>
</div>
<!-- 选股按钮 -->
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<button class="btn btn-primary btn-lg" id="select-stocks-btn">选股</button>
<button class="btn btn-secondary" id="update-data-btn">更新数据</button>
</div>
<!-- 选股结果 -->
<div id="selection-results" class="mt-4"></div>
</section>
<!-- 回测模块 -->
<section id="backtest" class="mb-5">
<h2 class="mb-4">回测功能</h2>
<!-- 回测参数 -->
<div class="row mb-3">
<div class="col-md-8">
<div class="input-group">
<label class="input-group-text" for="backtest-strategy">回测策略（可多选）</label>
<select class="form-select" id="backtest-strategy" multiple size="3">
<option value="vcp" selected>VCP（波动率收缩模式）策略</option>
<option value="model" selected>大模型选股策略</option>
<option value="test">测试选股策略</option>
</select>
</div>
<div class="form-text">按住Ctrl/Cmd键可多选，多个策略之间为逻辑与关系</div>
</div>
<div class="col-md-4">
<div class="input-group">
<label class="input-group-text" for="start-date">开始日期</label>
<input type="date" class="form-control" id="start-date">
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<label class="input-group-text" for="end-date">结束日期</label>
<input type="date" class="form-control" id="end-date">
</div>
</div>
</div>
<!-- 回测按钮 -->
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<button class="btn btn-primary btn-lg" id="backtest-btn">回测</button>
</div>
<!-- 回测报告 -->
<div id="backtest-report" class="mt-4"></div>
</section>
<!-- 参数优化模块 -->
<section id="optimization" class="mb-5">
<h2 class="mb-4">参数优化</h2>
<!-- 优化策略选择 -->
<div class="row mb-3">
<div class="col-md-6">
<div class="input-group">
<label class="input-group-text" for="optimization-strategy">优化策略</label>
<select class="form-select" id="optimization-strategy">
<option value="vcp">VCP（波动率收缩模式）策略</option>
<option value="model">大模型选股策略</option>
<option value="test">测试选股策略</option>
</select>
</div>
</div>
</div>
<!-- 优化按钮 -->
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<button class="btn btn-primary btn-lg" id="optimize-btn">参数优化</button>
</div>
<!-- 优化结果 -->
<div id="optimization-results" class="mt-4"></div>
</section>
<!-- 选股结果模块 -->
<section id="results" class="mb-5">
<h2 class="mb-4">选股结果</h2>
<!-- 结果查询 -->
<div class="row mb-3">
<div class="col-md-6">
<div class="input-group">
<label class="input-group-text" for="results-strategy">策略选择</label>
<select class="form-select" id="results-strategy" multiple size="3">
<option value="vcp" selected>VCP（波动率收缩模式）策略</option>
<option value="model" selected>大模型选股策略</option>
<option value="test">测试选股策略</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<label class="input-group-text" for="results-date">查询日期</label>
<input type="date" class="form-control" id="results-date">
</div>
</div>
<div class="col-md-2">
<div class="d-grid gap-2">
<button class="btn btn-primary" id="query-results-btn">查询结果</button>
</div>
</div>
</div>
<!-- 结果展示 -->
<div id="results-display" class="mt-4"></div>
</section>
<!-- 配置模块 -->
<section id="config" class="mb-5">
<h2 class="mb-4">配置信息</h2>
<!-- 配置展示 -->
<div id="config-display" class="mt-4"></div>
</section>
</div>
</div>
<!-- 加载动画 -->
<div id="loading-overlay" class="overlay d-none">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">加载中...</span>
</div>
</div>
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>