feat(web-ui): 一键寻优按钮改橙色 + 等待期间投资大师名言轮播

v1.17.15

一键寻优所有策略按钮改为暖橙渐变(#f59e0b → #ea580c),比 primary
蓝更醒目,hover 加亮上移、运行中保留暗橙识别度。

寻优运行中右侧不再空白:展示 100 条全球投资大师名言(巴菲特/芒格/
格雷厄姆/林奇/索罗斯/利弗莫尔/塔勒布/达利欧等),3 秒随机轮播一条,
Fisher-Yates 洗牌避免短期重复,让等待不枯燥、还能学到东西。

视觉细节:
- 卡片顶部 3 秒线性进度条(暗示后台在跑)
- fade + slide-up 350ms 过渡动画
- 底部脉动橙点 + '后台寻优进行中' 提示

纯前端 TypeScript + 原生 CSS,零后端改动,零依赖新增。

- 新增 web-ui/src/data/investment-quotes.ts(100 条名言)
- 新增 web-ui/src/components/QuoteCarousel.vue(轮播组件)
- 改 web-ui/src/views/OptimizeView.vue(按钮样式 + 引入轮播)
- bump pyproject.toml 1.17.14 → 1.17.15
This commit is contained in:
Justin Gu
2026-07-05 02:17:22 +08:00
parent cf843cebad
commit 15af7a92ee
4 changed files with 405 additions and 2 deletions
+34 -1
View File
@@ -9,6 +9,7 @@ import GradeBadge from '../components/GradeBadge.vue'
import OptimizeHeatmap from '../components/OptimizeHeatmap.vue'
import OptimizeResultTable from '../components/OptimizeResultTable.vue'
import ParamGridPicker from '../components/ParamGridPicker.vue'
import QuoteCarousel from '../components/QuoteCarousel.vue'
import SymbolPicker from '../components/SymbolPicker.vue'
import { gradeGridPoint } from '../grading'
import type { GradeResult } from '../grading'
@@ -196,7 +197,7 @@ const rankingGrades = computed<GradeResult[]>(() =>
{{ store.optimizeRunning ? '取行情+寻优中…' : '开始寻优' }}
</button>
<button
class="run-btn"
class="run-all-btn run-btn"
:disabled="store.optimizeRunning || store.optimizeAllRunning"
@click="onRunAll"
>
@@ -214,6 +215,9 @@ const rankingGrades = computed<GradeResult[]>(() =>
<p>选标的 选策略 勾选寻优参数 开始寻优或点一键寻优所有策略</p>
</div>
<!-- 一键寻优进行中投资大师名言轮播让等待不枯燥 -->
<QuoteCarousel v-if="store.optimizeAllRunning" :interval="3000" />
<!-- 单策略寻优结果 -->
<div v-if="store.optimizeResult" class="report-content">
<section class="report-section">
@@ -359,6 +363,35 @@ const rankingGrades = computed<GradeResult[]>(() =>
.run-btn:first-of-type {
margin-top: 0;
}
/* 「一键寻优所有策略」按钮:暖橙渐变,比 primary 蓝更醒目 */
.run-all-btn {
background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
border: 1px solid #f59e0b;
color: #fff;
font-weight: 600;
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}
.run-all-btn:hover:not(:disabled) {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border-color: #fbbf24;
box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5);
transform: translateY(-1px);
}
.run-all-btn:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}
/* 运行中:暗橙 disabled,但仍是橙,区别于普通按钮的纯灰 */
.run-all-btn:disabled {
background: linear-gradient(135deg, #b45309, #9a3412);
border-color: #b45309;
color: #fde68a;
opacity: 0.9;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.report-panel {
flex: 1;
overflow-y: auto;