Files
alpha_tools/backup_code/wqb-server/templates/index.html
T
2026-02-05 10:18:53 +08:00

740 lines
42 KiB
HTML
Executable File
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BRAIN 表达式模板解码器</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<div class="container">
<header>
<h1>BRAIN 表达式模板解码器</h1>
<p class="subtitle">专用于类表达式语言的模板解码器,带语法检查功能</p>
<div class="header-buttons">
<div class="header-buttons-row">
<button id="connectToBrain" class="btn btn-brain">连接到 BRAIN</button>
<button id="runSimulator" class="btn btn-secondary">🚀 运行模拟器</button>
<a href="{{ url_for('paper_analysis.paper_analysis') }}" class="btn btn-primary">论文分析</a>
<a href="{{ url_for('feature_engineering.feature_engineering') }}" class="btn btn-primary">数据字段指南</a>
</div>
</div>
</header>
<!-- 统一模板部分 -->
<div class="templates-section">
<div class="templates-header">
<h3>表达式模板</h3>
<div class="template-actions">
<button class="btn btn-small btn-primary" id="toggleTemplateView" onclick="toggleTemplateView()">
<span id="toggleTemplateViewText">仅显示用户模板</span>
</button>
<button class="btn btn-small btn-outline" onclick="exportCustomTemplates()" title="导出所有自定义模板">
<span style="margin-right: 5px;">📤</span>导出用户模板
</button>
<button class="btn btn-small btn-outline" onclick="document.getElementById('importTemplatesFile').click()" title="从文件导入模板">
<span style="margin-right: 5px;">📥</span>导入用户模板
</button>
<input type="file" id="importTemplatesFile" accept=".json" style="display: none;" onchange="importCustomTemplates(event)">
</div>
</div>
<div class="all-template-buttons">
<!-- 示例模板 -->
<div id="exampleTemplateButtons">
<button class="btn btn-template btn-template-example" data-template-type="example" onclick="loadTemplateExample(2)">向量数据处理</button>
<button class="btn btn-template btn-template-example" data-template-type="example" onclick="loadTemplateExample(1)">嵌套特征挖掘器</button>
<button class="btn btn-template btn-template-example" data-template-type="example" onclick="loadTemplateExample(3)">双重中性化</button>
<button class="btn btn-template btn-template-example" data-template-type="example" onclick="loadTemplateExample(4)">组均值残差_矩阵数据</button>
<button class="btn btn-template btn-template-example" data-template-type="example" onclick="loadTemplateExample(5)">组均值残差_向量数据</button>
<button class="btn btn-template btn-template-example" data-template-type="example" onclick="loadTemplateExample(6)">TVR 增量限制</button>
<button class="btn btn-template btn-template-example" data-template-type="example" onclick="loadTemplateExample(7)">TVR 驼峰</button>
</div>
<!-- 自定义模板将加载在这里 -->
<div id="customTemplateButtons">
<!-- 自定义模板将动态插入此处 -->
</div>
</div>
<div class="custom-template-info" id="noCustomTemplates" style="display: none;">
<p style="margin-top: 10px; color: #6c757d; font-style: italic;">暂无自定义模板。创建表达式后点击"保存当前"将其保存为模板。</p>
</div>
</div>
<!-- 导航标签 -->
<nav class="page-navigation">
<button class="nav-tab active" data-page="editor">
<span class="nav-icon">✏️</span>
<span class="nav-text">表达式编辑器</span>
</button>
<button class="nav-tab" data-page="decode">
<span class="nav-icon">🔄</span>
<span class="nav-text">解码模板</span>
</button>
<button class="nav-tab" data-page="results" id="resultsTab" style="display: none;">
<span class="nav-icon">📊</span>
<span class="nav-text">结果</span>
<span class="nav-badge" id="resultsBadge">0</span>
</button>
</nav>
<!-- 页面内容容器 -->
<div class="page-container">
<!-- 编辑器页面 -->
<div class="page-content active" id="editorPage">
<div class="main-content">
<div class="editor-section">
<div class="editor-header">
<h2>表达式编辑器</h2>
<div class="editor-actions">
<button id="clearEditor" class="btn btn-outline">清空</button>
<button class="btn btn-secondary" onclick="saveCurrentTemplate()">
<span style="margin-right: 5px;">💾</span>保存当前模板
</button>
<button class="btn btn-outline" onclick="overwriteExistingTemplate()">
<span style="margin-right: 5px;">🔄</span>覆盖现有模板
</button>
</div>
</div>
<div class="editor-wrapper">
<div class="line-numbers" id="lineNumbers"></div>
<div class="editor-container">
<div id="highlightedText" class="highlighted-text"></div>
<textarea id="expressionEditor" class="expression-editor" placeholder="在此输入您的表达式...">
<时间序列操作符/>(情感差异, <天数/>)</textarea>
</div>
</div>
<div id="grammarErrors" class="grammar-errors"></div>
</div>
<div class="info-panel">
<h3>检测到的模板</h3>
<div id="templateList" class="template-list"></div>
<h3>语法规则</h3>
<ul class="grammar-rules">
<li><code>/* */</code> - 多行块注释</li>
<li><code>;</code> - 语句分隔符(最后一行不需要)</li>
<li>最后一条语句是 BRAIN 模拟器的 Alpha 表达式</li>
<li>Alpha 表达式不能赋值给变量</li>
<li>不允许使用类、对象、指针或函数</li>
</ul>
<div class="next-step-hint">
<button class="btn btn-primary" onclick="navigateToPage('decode')">
下一步:解码模板 →
</button>
</div>
</div>
</div>
</div>
<!-- 解码页面 -->
<div class="page-content" id="decodePage">
<div class="decode-content">
<h2>模板解码选项</h2>
<div class="template-status" id="templateStatus">
<!-- 模板配置状态将显示在此处 -->
</div>
<div class="decode-buttons">
<button id="decodeTemplates" class="btn btn-primary btn-large">完整迭代</button>
<div class="random-iteration-container">
<button id="randomIterationBtn" class="btn btn-primary btn-large">随机迭代</button>
<input type="number" id="randomCount" class="random-count-input" placeholder="数量" min="1" value="10" title="要生成的随机表达式数量">
</div>
</div>
<div class="decode-info">
<p><strong>完整迭代:</strong> 生成已配置模板的所有可能组合</p>
<p><strong>随机迭代:</strong> 从可能组合中生成随机样本</p>
</div>
<div class="navigation-buttons">
<button class="btn btn-outline" onclick="navigateToPage('editor')">
← 返回编辑器
</button>
</div>
</div>
</div>
<!-- 结果页面 -->
<div class="page-content" id="resultsPage">
<div class="results-content">
<h2>已解码的表达式</h2>
<div id="resultsList" class="results-list"></div>
<div class="results-actions">
<button id="nextMoveBtn" class="btn btn-secondary btn-small">使用设置附加表达式</button>
<button id="downloadResults" class="btn btn-primary btn-small" title="下载所有生成的表达式">下载所有表达式到 txt 文件</button>
</div>
<div class="navigation-buttons">
<button class="btn btn-outline" onclick="navigateToPage('decode')">
← 返回解码页面
</button>
<button class="btn btn-outline" onclick="navigateToPage('editor')">
← 返回编辑器
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 模板变量输入模态框 -->
<div id="templateModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 id="modalTitle">输入变量</h3>
<span class="close" onclick="closeModal()">&times;</span>
</div>
<div class="modal-body">
<p id="modalDescription">输入逗号分隔的变量列表:</p>
<textarea id="variableInput" class="variable-input" placeholder="变量1, 变量2, 变量3"></textarea>
<div id="brainChooseSection" class="brain-choose-section" style="display: none;">
<button id="chooseBrainBtn" class="btn btn-secondary btn-small">从 BRAIN 中选择</button>
</div>
</div>
<div class="modal-footer">
<button onclick="closeModal()" class="btn btn-outline">取消</button>
<button onclick="applyTemplate()" class="btn btn-primary">应用</button>
</div>
</div>
</div>
<!-- 模板配置信息模态框 -->
<div id="configInfoModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 id="configInfoTitle">模板配置</h3>
<span class="close" onclick="closeConfigInfoModal()">&times;</span>
</div>
<div class="modal-body">
<div id="configInfoContent" class="config-info-content">
<!-- 配置详情将插入此处 -->
</div>
</div>
<div class="modal-footer">
<button onclick="closeConfigInfoModal()" class="btn btn-primary">关闭</button>
</div>
</div>
</div>
<!-- BRAIN 登录模态框 -->
<div id="brainLoginModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>连接到 WorldQuant BRAIN</h3>
<span class="close" onclick="closeBrainLoginModal()">&times;</span>
</div>
<div class="modal-body">
<form id="brainLoginForm" onsubmit="event.preventDefault(); authenticateBrain();">
<div class="form-group">
<label for="brainUsername">用户名:</label>
<input type="email" id="brainUsername" class="form-input" placeholder="your.email@domain.com" required>
</div>
<div class="form-group">
<label for="brainPassword">密码:</label>
<input type="password" id="brainPassword" class="form-input" placeholder="您的密码" required>
</div>
<div id="brainLoginStatus" class="login-status"></div>
<div id="loginSpinner" class="login-spinner" style="display: none;">
<div class="spinner"></div>
</div>
</form>
</div>
<div class="modal-footer">
<button onclick="closeBrainLoginModal()" class="btn btn-outline" id="cancelBtn">取消</button>
<button onclick="authenticateBrain()" class="btn btn-primary" id="loginBtn">连接</button>
</div>
</div>
</div>
<!-- BRAIN 操作符选择模态框 -->
<div id="brainOperatorsModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>从 BRAIN 选择操作符</h3>
<span class="close" onclick="closeBrainOperatorsModal()">&times;</span>
</div>
<div class="modal-body">
<div class="search-section">
<input type="text" id="operatorSearch" class="form-input" placeholder="搜索操作符...">
</div>
<div class="category-filter">
<label>按类别筛选:</label>
<select id="categoryFilter" class="form-input">
<option value="">所有类别</option>
</select>
</div>
<div class="operator-actions">
<button id="selectAllFilteredOperators" class="btn btn-small btn-secondary">选择所有筛选结果</button>
<button id="clearAllOperators" class="btn btn-small btn-outline">清除全部</button>
</div>
<div id="operatorsList" class="operators-list">
<!-- 操作符将在此处填充 -->
</div>
<div class="selected-operators">
<strong>已选操作符:</strong>
<div id="selectedOperators" class="selected-items"></div>
</div>
</div>
<div class="modal-footer">
<button onclick="closeBrainOperatorsModal()" class="btn btn-outline">取消</button>
<button onclick="applySelectedOperators()" class="btn btn-primary">应用已选项</button>
</div>
</div>
</div>
<!-- BRAIN 数据字段选择模态框 -->
<div id="brainDataFieldsModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>通过 BRAINAPI 获取数据字段</h3>
<span class="close" onclick="closeBrainDataFieldsModal()">&times;</span>
</div>
<div class="modal-body">
<div class="data-fields-params">
<div class="params-row">
<div class="param-group">
<label for="regionInput">地区:</label>
<input type="text" id="regionInput" class="form-input" placeholder="例如:USA" value="USA">
</div>
<div class="param-group">
<label for="delayInput">延迟:</label>
<input type="text" id="delayInput" class="form-input" placeholder="例如:1" value="1">
</div>
<div class="param-group">
<label for="universeInput">宇宙:</label>
<input type="text" id="universeInput" class="form-input" placeholder="例如:TOP3000" value="TOP3000">
</div>
<div class="param-group">
<label for="datasetInput">数据集 ID:</label>
<input type="text" id="datasetInput" class="form-input" placeholder="例如:fundamental6" value="fundamental6">
</div>
<div class="param-group">
<button id="loadDataFieldsBtn" class="btn btn-secondary">加载数据字段</button>
</div>
</div>
</div>
<div id="dataFieldsLoading" class="loading-message" style="display: none;">
正在加载数据字段...
</div>
<div id="dataFieldsContent" class="data-fields-content" style="display: none;">
<div class="data-fields-controls">
<div class="filter-label">
<span>样本筛选👉</span>
</div>
<div class="filter-options">
<label>
<input type="checkbox" id="filterHighCoverage"> 高覆盖率 (>90%)
</label>
<label>
<input type="checkbox" id="filterPopular"> 热门 (>1000 用户)
</label>
<label>
<input type="checkbox" id="filterMatrixOnly"> 仅矩阵类型
</label>
</div>
<div class="filter-actions">
<button id="selectAllFiltered" class="btn btn-small btn-secondary">选择所有筛选结果</button>
<button id="clearAllSelected" class="btn btn-small btn-outline">清除全部</button>
</div>
</div>
<div class="data-fields-stats">
<span id="dataFieldsCount">0 个字段已加载</span> |
<span id="filteredCount">0 个已筛选</span> |
<span id="selectedCount">0 个已选择</span>
</div>
<div class="data-fields-table-container">
<table class="data-fields-table">
<thead>
<tr class="header-row">
<th style="width: 40px;">
<input type="checkbox" id="selectAllCheckbox" title="选择/取消选择全部">
</th>
<th style="width: 200px; min-width: 150px;">
字段 ID
<button class="sort-btn" data-column="id" data-order="asc">↕</button>
</th>
<th style="min-width: 300px;">
描述
<button class="sort-btn" data-column="description" data-order="asc">↕</button>
</th>
<th style="width: 100px;">
类型
<button class="sort-btn" data-column="type" data-order="asc">↕</button>
</th>
<th style="width: 150px;">
覆盖率
<button class="sort-btn" data-column="coverage" data-order="asc">↕</button>
</th>
<th style="width: 100px;">
用户数
<button class="sort-btn" data-column="userCount" data-order="asc">↕</button>
</th>
<th style="width: 100px;">
Alpha 数
<button class="sort-btn" data-column="alphaCount" data-order="asc">↕</button>
</th>
</tr>
<tr class="filter-row">
<th></th>
<th>
<input type="text" class="column-filter" data-column="id" placeholder="筛选 ID...">
</th>
<th>
<input type="text" class="column-filter" data-column="description" placeholder="筛选描述...">
</th>
<th>
<select class="column-filter" data-column="type" id="typeFilter">
<option value="">所有类型</option>
</select>
</th>
<th>
<div class="range-filter">
<input type="number" class="column-filter-min" data-column="coverage" placeholder="最小 %" min="0" max="100" step="0.1">
<span>-</span>
<input type="number" class="column-filter-max" data-column="coverage" placeholder="最大 %" min="0" max="100" step="0.1">
</div>
</th>
<th>
<input type="number" class="column-filter" data-column="userCount" placeholder="最小用户数" min="0">
</th>
<th>
<input type="number" class="column-filter" data-column="alphaCount" placeholder="最小 Alpha 数" min="0">
</th>
</tr>
</thead>
<tbody id="dataFieldsTableBody">
<!-- 数据字段将在此处填充 -->
</tbody>
</table>
</div>
<div class="selected-data-fields">
<strong>已选数据字段:</strong>
<div id="selectedDataFields" class="selected-items"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button onclick="closeBrainDataFieldsModal()" class="btn btn-outline">取消</button>
<button onclick="applySelectedDataFields()" class="btn btn-primary">应用已选项</button>
</div>
</div>
</div>
<!-- 下一步设置模态框 -->
<div id="settingsModal" class="modal settings-modal">
<div class="modal-content settings-modal-content">
<div class="modal-header">
<h3>表达式设置配置</h3>
<span class="close" onclick="closeSettingsModal()">&times;</span>
</div>
<div class="modal-body settings-modal-body">
<div class="settings-info">
<p><strong>配置要附加到已解码表达式的设置</strong></p>
<p class="settings-note">您可以为任何设置输入多个逗号分隔的值以创建迭代</p>
</div>
<div class="settings-container">
<table class="settings-table">
<thead>
<tr>
<th width="20%">设置名称</th>
<th width="50%">值</th>
<th width="15%">类型</th>
<th width="15%">操作</th>
</tr>
</thead>
<tbody id="settingsTableBody">
<tr>
<td>instrumentType</td>
<td><input type="text" class="setting-value-input" data-setting="instrumentType" placeholder="EQUITY" readonly></td>
<td><select class="setting-type-select" data-setting="instrumentType" disabled><option>string</option></select></td>
<td></td>
</tr>
<tr>
<td>region</td>
<td><input type="text" class="setting-value-input" data-setting="region" placeholder="示例:USA (例如:USA, EUR, ASI)"></td>
<td><select class="setting-type-select" data-setting="region"><option>string</option><option>number</option></select></td>
<td></td>
</tr>
<tr>
<td>universe</td>
<td><input type="text" class="setting-value-input" data-setting="universe" placeholder="示例:TOP3000 (例如:TOP3000, TOP1000, TOP500)"></td>
<td><select class="setting-type-select" data-setting="universe"><option>string</option><option>number</option></select></td>
<td></td>
</tr>
<tr>
<td>delay</td>
<td>
<select class="setting-value-input" data-setting="delay">
<option value="1" selected>1</option>
<option value="0">0</option>
</select>
</td>
<td><select class="setting-type-select" data-setting="delay"><option>number</option><option>string</option></select></td>
<td></td>
</tr>
<tr>
<td>decay</td>
<td><input type="text" class="setting-value-input" data-setting="decay" placeholder="示例:20 (例如:0, 5, 20, 60)"></td>
<td><select class="setting-type-select" data-setting="decay"><option>number</option><option>string</option></select></td>
<td></td>
</tr>
<tr>
<td>neutralization</td>
<td><input type="text" class="setting-value-input" data-setting="neutralization" placeholder="示例:SUBINDUSTRY (例如:NONE, SECTOR, INDUSTRY, SUBINDUSTRY)"></td>
<td><select class="setting-type-select" data-setting="neutralization"><option>string</option><option>number</option></select></td>
<td></td>
</tr>
<tr>
<td>truncation</td>
<td><input type="text" class="setting-value-input" data-setting="truncation" placeholder="示例:0.08 (例如:0.01, 0.05, 0.08, 0.1)"></td>
<td><select class="setting-type-select" data-setting="truncation"><option>number</option><option>string</option></select></td>
<td></td>
</tr>
<tr>
<td>pasteurization</td>
<td>
<select class="setting-value-input" data-setting="pasteurization">
<option value="ON" selected>开启</option>
<option value="OFF">关闭</option>
</select>
</td>
<td><select class="setting-type-select" data-setting="pasteurization"><option>string</option><option>number</option></select></td>
<td></td>
</tr>
<tr>
<td>testPeriod</td>
<td>
<div style="display: flex; align-items: center; gap: 10px;">
<input type="range" class="setting-value-input test-period-slider" data-setting="testPeriod"
min="0" max="60" value="0" step="1"
style="flex: 1; min-width: 200px; margin: 0; padding: 0;
-webkit-appearance: none; appearance: none;
background: #ddd; height: 6px; border-radius: 3px; outline: none;">
<style>
.test-period-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #2196F3;
cursor: pointer;
border: none;
}
.test-period-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #2196F3;
cursor: pointer;
border: none;
}
.test-period-slider::-webkit-slider-track {
background: #ddd;
height: 6px;
border-radius: 3px;
}
.test-period-slider::-moz-range-track {
background: #ddd;
height: 6px;
border-radius: 3px;
border: none;
}
</style>
<span id="testPeriodValue" style="min-width: 70px; font-family: monospace; font-size: 12px;">P0Y0M</span>
</div>
</td>
<td><select class="setting-type-select" data-setting="testPeriod"><option>string</option><option>number</option></select></td>
<td></td>
</tr>
<tr>
<td>unitHandling</td>
<td><input type="text" class="setting-value-input" data-setting="unitHandling" placeholder="VERIFY" value="VERIFY" readonly></td>
<td><select class="setting-type-select" data-setting="unitHandling" disabled><option>string</option></select></td>
<td></td>
</tr>
<tr>
<td>nanHandling</td>
<td>
<select class="setting-value-input" data-setting="nanHandling">
<option value="OFF" selected>关闭</option>
<option value="ON">开启</option>
</select>
</td>
<td><select class="setting-type-select" data-setting="nanHandling"><option>string</option><option>number</option></select></td>
<td></td>
</tr>
<tr>
<td>maxTrade</td>
<td>
<select class="setting-value-input" data-setting="maxTrade">
<option value="ON" selected>开启</option>
<option value="OFF">关闭</option>
</select>
</td>
<td><select class="setting-type-select" data-setting="maxTrade"><option>string</option><option>number</option></select></td>
<td></td>
</tr>
<tr>
<td>language</td>
<td><input type="text" class="setting-value-input" data-setting="language" placeholder="FASTEXPR" readonly></td>
<td><select class="setting-type-select" data-setting="language" disabled><option>string</option></select></td>
<td></td>
</tr>
<tr>
<td>visualization</td>
<td>
<select class="setting-value-input" data-setting="visualization">
<option value="false" selected>否</option>
<option value="true">是</option>
</select>
</td>
<td><select class="setting-type-select" data-setting="visualization"><option>boolean</option><option>string</option><option>number</option></select></td>
<td></td>
</tr>
</tbody>
</table>
<div class="add-setting-container">
<button id="addSettingBtn" class="btn btn-secondary btn-small">+ 添加自定义设置</button>
</div>
</div>
<div class="settings-preview">
<div class="preview-header">
<strong>预览:</strong>
<span id="totalCombinations">0</span> 个总组合将被生成
</div>
</div>
</div>
<div class="modal-footer">
<button onclick="closeSettingsModal()" class="btn btn-outline">取消</button>
<button onclick="applySettings()" class="btn btn-primary">生成并下载</button>
<button onclick="generateAndTest()" class="btn btn-primary" style="background-color: #28a745;">生成并测试</button>
</div>
</div>
</div>
<!-- BRAIN 测试结果模态框 -->
<div id="brainTestResultsModal" class="modal">
<div class="modal-content" style="max-width: 800px;">
<div class="modal-header">
<h3>BRAIN API 测试结果</h3>
<span class="close" onclick="closeBrainTestResultsModal()">&times;</span>
</div>
<div class="modal-body" style="max-height: 600px; overflow-y: auto;">
<div id="brainTestProgress" class="test-progress" style="display: none;">
<div class="progress-bar">
<div id="progressBarFill" class="progress-bar-fill" style="width: 0%;"></div>
</div>
<p id="progressText">正在测试表达式...</p>
</div>
<div id="brainTestResults" class="test-results">
<!-- 测试结果将显示在此处 -->
</div>
</div>
<div class="modal-footer">
<button onclick="closeBrainTestResultsModal()" class="btn btn-primary">关闭</button>
<button onclick="downloadTestResults()" class="btn btn-secondary" id="downloadTestResultsBtn" style="display: none;">🚀直接到模拟器</button>
<button onclick="downloadExpressionWithSettings()" class="btn btn-secondary" id="downloadExpressionWithSettingsBtn" style="display: none;">下载带设置的表达式</button>
</div>
</div>
</div>
<!-- 保存模板模态框 -->
<div id="saveTemplateModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>保存自定义模板</h3>
<span class="close" onclick="closeSaveTemplateModal()">&times;</span>
</div>
<div class="modal-body">
<div class="form-group">
<label for="templateName">模板名称:</label>
<input type="text" id="templateName" class="form-input" placeholder="输入模板名称" maxlength="50">
</div>
<div class="form-group">
<label for="templateDescription">描述(可选):</label>
<textarea id="templateDescription" class="form-input" placeholder="描述此模板的功能" rows="3"></textarea>
</div>
<div class="template-configurations-info" id="templateConfigurationsInfo" style="display: none;">
<div style="background-color: #e8f4fd; border: 1px solid #bee5eb; border-radius: 5px; padding: 12px; margin: 10px 0; font-size: 13px;">
<div style="color: #0c5460; font-weight: 500; margin-bottom: 5px;">
📊 检测到模板配置
</div>
<div id="configurationsList" style="color: #0c5460;">
<!-- 模板配置将在此列出 -->
</div>
<div style="color: #0c5460; font-size: 12px; margin-top: 5px; font-style: italic;">
✓ 这些配置将与您的模板一起保存
</div>
</div>
</div>
<div class="template-preview">
<div class="preview-label">预览:</div>
<pre id="templatePreview" style="margin: 0; white-space: pre-wrap; word-wrap: break-word;"></pre>
</div>
</div>
<div class="modal-footer">
<button onclick="closeSaveTemplateModal()" class="btn btn-outline">取消</button>
<button onclick="confirmSaveTemplate()" class="btn btn-primary">保存模板</button>
</div>
</div>
</div>
<!-- 覆盖模板模态框 -->
<div id="overwriteTemplateModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>覆盖现有模板</h3>
<span class="close" onclick="closeOverwriteTemplateModal()">&times;</span>
</div>
<div class="modal-body">
<div class="form-group">
<label for="existingTemplateSelect">选择要覆盖的模板:</label>
<select id="existingTemplateSelect" class="form-input">
<option value="">选择模板...</option>
</select>
</div>
<div id="selectedTemplateInfo" class="form-group" style="display: none;">
<label>当前描述:</label>
<div id="currentTemplateDescription" class="form-input" style="background: #f8f9fa; border: 1px solid #dee2e6; padding: 10px; min-height: 40px; color: #6c757d; font-style: italic;">
<!-- 当前模板描述将显示在此处 -->
</div>
</div>
<div class="template-configurations-info" id="overwriteConfigurationsInfo" style="display: none;">
<div style="background-color: #e8f4fd; border: 1px solid #bee5eb; border-radius: 5px; padding: 12px; margin: 10px 0; font-size: 13px;">
<div style="color: #0c5460; font-weight: 500; margin-bottom: 5px;">
📊 检测到模板配置
</div>
<div id="overwriteConfigurationsList" style="color: #0c5460;">
<!-- 模板配置将在此列出 -->
</div>
<div style="color: #0c5460; font-size: 12px; margin-top: 5px; font-style: italic;">
✓ 这些配置将替换现有模板
</div>
</div>
</div>
<div class="template-preview">
<div class="preview-label">新表达式预览:</div>
<pre id="overwriteTemplatePreview" style="margin: 0; white-space: pre-wrap; word-wrap: break-word;"></pre>
</div>
</div>
<div class="modal-footer">
<button onclick="closeOverwriteTemplateModal()" class="btn btn-outline">取消</button>
<button onclick="confirmOverwriteTemplate()" class="btn btn-primary" id="overwriteConfirmBtn" disabled>覆盖模板</button>
</div>
</div>
</div>
<script src="{{ url_for('static', filename='brain.js') }}"></script>
<script src="{{ url_for('static', filename='script.js') }}"></script>
<script src="{{ url_for('static', filename='decoder.js') }}"></script>
</body>
</html>