feat(web): 前端全局重构专业量化后台(深色+红涨绿跌+设计系统)
- 设计系统 styles/tokens.css: 深色token(#0d1117底/#161b22卡片) + 红涨绿跌 (--up#f85149/--down#3fb950) + 品牌蓝#1890ff + 间距/圆角/阴影/mono - Element Plus深色(element-dark.css + dark/css-vars)+reset - 删Vite脚手架残留(style.css重写/HelloWorld/hero/vite/vue资源) - Layout重构(深色专业侧边)+Login+图表统一深色(useChart/echartsDark) - 新建paper/Live.vue实走监控(step状态/净值/持仓/今日信号10s轮询) - 业务页套.page头, 保留所有功能/路由/api - 验证: vue-tsc --noEmit ✅ + npm run build ✅
This commit is contained in:
+1
-1
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="zh-CN" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
|
||||
@@ -24,6 +24,14 @@ export interface PaperAccount {
|
||||
mode: string
|
||||
interval: string
|
||||
status: string
|
||||
symbols?: string
|
||||
initial_capital?: number
|
||||
start_date?: string
|
||||
end_date?: string
|
||||
last_run_date?: string | null
|
||||
next_run_at?: string | null
|
||||
checkpoint_date?: string | null
|
||||
error_msg?: string | null
|
||||
}
|
||||
|
||||
export interface BalancePoint {
|
||||
@@ -54,6 +62,24 @@ export interface StrategySummary {
|
||||
commission: number
|
||||
}
|
||||
|
||||
export interface PositionRow {
|
||||
symbol: string
|
||||
volume: number
|
||||
frozen: number
|
||||
avg_price: number
|
||||
}
|
||||
|
||||
export interface PendingOrder {
|
||||
strategy_id: string
|
||||
symbol: string
|
||||
side: string
|
||||
price: number
|
||||
volume: number
|
||||
is_market: boolean
|
||||
match_session: string
|
||||
listing_days: number
|
||||
}
|
||||
|
||||
export async function createPaper(req: PaperCreate): Promise<number> {
|
||||
const { data } = await apiClient.post<{ account_id: number }>('/paper/create', req)
|
||||
return data.account_id
|
||||
@@ -78,3 +104,13 @@ export async function getStrategies(aid: number): Promise<StrategySummary[]> {
|
||||
const { data } = await apiClient.get<StrategySummary[]>(`/paper/${aid}/strategies`)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function getPositions(aid: number): Promise<PositionRow[]> {
|
||||
const { data } = await apiClient.get<PositionRow[]>(`/paper/${aid}/positions`)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function getPending(aid: number): Promise<PendingOrder[]> {
|
||||
const { data } = await apiClient.get<PendingOrder[]>(`/paper/${aid}/pending`)
|
||||
return data
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.5 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 496 B |
@@ -1,95 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import viteLogo from '../assets/vite.svg'
|
||||
import heroImg from '../assets/hero.png'
|
||||
import vueLogo from '../assets/vue.svg'
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section id="center">
|
||||
<div class="hero">
|
||||
<img :src="heroImg" class="base" width="170" height="179" alt="" />
|
||||
<img :src="vueLogo" class="framework" alt="Vue logo" />
|
||||
<img :src="viteLogo" class="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
|
||||
</div>
|
||||
<button type="button" class="counter" @click="count++">
|
||||
Count is {{ count }}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img class="logo" :src="viteLogo" alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img class="button-icon" :src="vueLogo" alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
</template>
|
||||
@@ -1,34 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import type { EChartsCoreOption } from 'echarts'
|
||||
import type { PnlPoint } from '@/api/backtest'
|
||||
import { useChart } from '@/composables/useChart'
|
||||
import { darkTitle, darkTooltip, darkGrid, darkAxis, UP, DOWN } from '@/utils/echartsDark'
|
||||
|
||||
const props = defineProps<{ data: PnlPoint[] }>()
|
||||
const el = ref<HTMLDivElement>()
|
||||
let chart: echarts.ECharts | null = null
|
||||
const { setOption } = useChart(el)
|
||||
|
||||
function render(): void {
|
||||
if (!chart || !props.data.length) return
|
||||
chart.setOption({
|
||||
title: { text: '每日盈亏', left: 'center' },
|
||||
tooltip: { trigger: 'axis' },
|
||||
xAxis: { type: 'category', data: props.data.map((p) => p.date) },
|
||||
yAxis: { type: 'value', name: '盈亏' },
|
||||
if (!props.data.length) return
|
||||
const option: EChartsCoreOption = {
|
||||
title: darkTitle('每日盈亏'),
|
||||
tooltip: darkTooltip(),
|
||||
grid: darkGrid(),
|
||||
xAxis: { type: 'category', data: props.data.map((p) => p.date), ...darkAxis() },
|
||||
yAxis: { type: 'value', name: '盈亏', ...darkAxis() },
|
||||
series: [{
|
||||
type: 'bar',
|
||||
// A 股惯例：红涨绿跌
|
||||
data: props.data.map((p) => ({ value: p.pnl, itemStyle: { color: p.pnl >= 0 ? '#ee6666' : '#91cc75' } })),
|
||||
data: props.data.map((p) => ({
|
||||
value: p.pnl,
|
||||
itemStyle: { color: p.pnl >= 0 ? UP : DOWN },
|
||||
})),
|
||||
}],
|
||||
}, true)
|
||||
}
|
||||
setOption(option)
|
||||
}
|
||||
function resize(): void { chart?.resize() }
|
||||
onMounted(() => {
|
||||
if (el.value) chart = echarts.init(el.value)
|
||||
render()
|
||||
window.addEventListener('resize', resize)
|
||||
})
|
||||
|
||||
onMounted(render)
|
||||
watch(() => props.data, render, { deep: true })
|
||||
onUnmounted(() => { window.removeEventListener('resize', resize); chart?.dispose() })
|
||||
</script>
|
||||
|
||||
<template><div ref="el" class="chart-box" /></template>
|
||||
|
||||
@@ -1,33 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import type { EChartsCoreOption } from 'echarts'
|
||||
import type { EquityPoint } from '@/api/backtest'
|
||||
import { useChart } from '@/composables/useChart'
|
||||
import { darkTitle, darkTooltip, darkGrid, darkAxis, BRAND } from '@/utils/echartsDark'
|
||||
|
||||
const props = defineProps<{ data: EquityPoint[] }>()
|
||||
const el = ref<HTMLDivElement>()
|
||||
let chart: echarts.ECharts | null = null
|
||||
const { setOption } = useChart(el)
|
||||
|
||||
function render(): void {
|
||||
if (!chart || !props.data.length) return
|
||||
chart.setOption({
|
||||
title: { text: '资金曲线', left: 'center' },
|
||||
tooltip: { trigger: 'axis' },
|
||||
xAxis: { type: 'category', data: props.data.map((p) => p.date) },
|
||||
yAxis: { type: 'value', scale: true, name: '权益' },
|
||||
if (!props.data.length) return
|
||||
const option: EChartsCoreOption = {
|
||||
title: darkTitle('资金曲线'),
|
||||
tooltip: darkTooltip(),
|
||||
grid: darkGrid(),
|
||||
color: [BRAND],
|
||||
xAxis: { type: 'category', data: props.data.map((p) => p.date), ...darkAxis() },
|
||||
yAxis: { type: 'value', scale: true, name: '权益', ...darkAxis() },
|
||||
series: [{
|
||||
type: 'line', name: '权益', smooth: true, areaStyle: { opacity: 0.1 },
|
||||
type: 'line',
|
||||
name: '权益',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: { color: BRAND, width: 1.6 },
|
||||
areaStyle: { color: BRAND, opacity: 0.12 },
|
||||
data: props.data.map((p) => p.balance),
|
||||
}],
|
||||
}, true)
|
||||
}
|
||||
setOption(option)
|
||||
}
|
||||
function resize(): void { chart?.resize() }
|
||||
onMounted(() => {
|
||||
if (el.value) chart = echarts.init(el.value)
|
||||
render()
|
||||
window.addEventListener('resize', resize)
|
||||
})
|
||||
|
||||
onMounted(render)
|
||||
watch(() => props.data, render, { deep: true })
|
||||
onUnmounted(() => { window.removeEventListener('resize', resize); chart?.dispose() })
|
||||
</script>
|
||||
|
||||
<template><div ref="el" class="chart-box" /></template>
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import type { EChartsCoreOption } from 'echarts'
|
||||
import type { KlineBar, Trade } from '@/api/backtest'
|
||||
import { useChart } from '@/composables/useChart'
|
||||
import { darkTitle, darkTooltip, darkGrid, darkAxis, klineItemStyle, UP, DOWN } from '@/utils/echartsDark'
|
||||
|
||||
const props = defineProps<{ kline: KlineBar[]; trades: Trade[] }>()
|
||||
const el = ref<HTMLDivElement>()
|
||||
let chart: echarts.ECharts | null = null
|
||||
const { setOption } = useChart(el)
|
||||
|
||||
function dateOf(dt: string): string {
|
||||
return String(dt).slice(0, 10)
|
||||
}
|
||||
|
||||
function render(): void {
|
||||
if (!chart || !props.kline.length) return
|
||||
if (!props.kline.length) return
|
||||
const dates = props.kline.map((k) => dateOf(k.datetime))
|
||||
const markPoints = props.trades
|
||||
.map((t) => ({ t, idx: dates.indexOf(dateOf(t.datetime)) }))
|
||||
@@ -20,31 +22,29 @@ function render(): void {
|
||||
.map(({ t }) => ({
|
||||
coord: [dateOf(t.datetime), t.price],
|
||||
value: `${t.offset === '开' ? '买' : '卖'}${t.volume}`,
|
||||
itemStyle: { color: t.offset === '开' ? '#ee6666' : '#91cc75' },
|
||||
itemStyle: { color: t.offset === '开' ? UP : DOWN },
|
||||
symbol: 'triangle',
|
||||
symbolSize: 14,
|
||||
symbolSize: 12,
|
||||
}))
|
||||
chart.setOption({
|
||||
title: { text: 'K线 + 买卖点', left: 'center' },
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
|
||||
xAxis: { type: 'category', data: dates, scale: true, boundaryGap: false },
|
||||
yAxis: { scale: true },
|
||||
const option: EChartsCoreOption = {
|
||||
title: darkTitle('K线 + 买卖点'),
|
||||
tooltip: { ...darkTooltip(), axisPointer: { type: 'cross' } },
|
||||
grid: darkGrid(),
|
||||
xAxis: { type: 'category', data: dates, scale: true, boundaryGap: false, ...darkAxis() },
|
||||
yAxis: { type: 'value', scale: true, ...darkAxis() },
|
||||
series: [{
|
||||
type: 'candlestick',
|
||||
itemStyle: klineItemStyle,
|
||||
// ECharts order: [open, close, lowest, highest]
|
||||
data: props.kline.map((k) => [k.open, k.close, k.low, k.high]),
|
||||
markPoint: { data: markPoints, symbol: 'triangle', symbolSize: 14 },
|
||||
markPoint: { data: markPoints, symbol: 'triangle', symbolSize: 12 },
|
||||
}],
|
||||
}, true)
|
||||
}
|
||||
setOption(option)
|
||||
}
|
||||
function resize(): void { chart?.resize() }
|
||||
onMounted(() => {
|
||||
if (el.value) chart = echarts.init(el.value)
|
||||
render()
|
||||
window.addEventListener('resize', resize)
|
||||
})
|
||||
|
||||
onMounted(render)
|
||||
watch(() => [props.kline, props.trades], render, { deep: true })
|
||||
onUnmounted(() => { window.removeEventListener('resize', resize); chart?.dispose() })
|
||||
</script>
|
||||
|
||||
<template><div ref="el" class="chart-box" /></template>
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
/* ECharts 生命周期复用：init / setOption / resize / dispose 统一 */
|
||||
import { onMounted, onUnmounted, type Ref } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export function useChart(el: Ref<HTMLDivElement | undefined>) {
|
||||
let chart: echarts.ECharts | null = null
|
||||
|
||||
function setOption(option: echarts.EChartsCoreOption): void {
|
||||
chart?.setOption(option, true)
|
||||
}
|
||||
|
||||
function resize(): void {
|
||||
chart?.resize()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (el.value) chart = echarts.init(el.value)
|
||||
window.addEventListener('resize', resize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resize)
|
||||
chart?.dispose()
|
||||
chart = null
|
||||
})
|
||||
|
||||
return { setOption }
|
||||
}
|
||||
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import { router } from './router'
|
||||
|
||||
@@ -18,6 +18,7 @@ const routes: RouteRecordRaw[] = [
|
||||
{ path: 'factor/result/:id', name: 'fc-result', component: () => import('@/views/factor/Result.vue') },
|
||||
{ path: 'paper/new', name: 'paper-new', component: () => import('@/views/paper/New.vue') },
|
||||
{ path: 'paper/result/:id', name: 'paper-result', component: () => import('@/views/paper/Result.vue') },
|
||||
{ path: 'paper/live/:aid', name: 'paper-live', component: () => import('@/views/paper/Live.vue') },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
+4
-296
@@ -1,296 +1,4 @@
|
||||
:root {
|
||||
--text: #6b6375;
|
||||
--text-h: #08060d;
|
||||
--bg: #fff;
|
||||
--border: #e5e4e7;
|
||||
--code-bg: #f4f3ec;
|
||||
--accent: #aa3bff;
|
||||
--accent-bg: rgba(170, 59, 255, 0.1);
|
||||
--accent-border: rgba(170, 59, 255, 0.5);
|
||||
--social-bg: rgba(244, 243, 236, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
||||
|
||||
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--mono: ui-monospace, Consolas, monospace;
|
||||
|
||||
font: 18px/145% var(--sans);
|
||||
letter-spacing: 0.18px;
|
||||
color-scheme: light dark;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text: #9ca3af;
|
||||
--text-h: #f3f4f6;
|
||||
--bg: #16171d;
|
||||
--border: #2e303a;
|
||||
--code-bg: #1f2028;
|
||||
--accent: #c084fc;
|
||||
--accent-bg: rgba(192, 132, 252, 0.15);
|
||||
--accent-border: rgba(192, 132, 252, 0.5);
|
||||
--social-bg: rgba(47, 48, 58, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
|
||||
}
|
||||
|
||||
#social .button-icon {
|
||||
filter: invert(1) brightness(2);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: var(--heading);
|
||||
font-weight: 500;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
letter-spacing: -1.68px;
|
||||
margin: 32px 0;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 36px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 118%;
|
||||
letter-spacing: -0.24px;
|
||||
margin: 0 0 8px;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code,
|
||||
.counter {
|
||||
font-family: var(--mono);
|
||||
display: inline-flex;
|
||||
border-radius: 4px;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 15px;
|
||||
line-height: 135%;
|
||||
padding: 4px 8px;
|
||||
background: var(--code-bg);
|
||||
}
|
||||
|
||||
.counter {
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
|
||||
.base,
|
||||
.framework,
|
||||
.vite {
|
||||
inset-inline: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.base {
|
||||
width: 170px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.framework,
|
||||
.vite {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.framework {
|
||||
z-index: 1;
|
||||
top: 34px;
|
||||
height: 28px;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||
scale(1.4);
|
||||
}
|
||||
|
||||
.vite {
|
||||
z-index: 0;
|
||||
top: 107px;
|
||||
height: 26px;
|
||||
width: auto;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||
scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 1126px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
border-inline: 1px solid var(--border);
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 32px 20px 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps {
|
||||
display: flex;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: left;
|
||||
|
||||
& > div {
|
||||
flex: 1 1 0;
|
||||
padding: 32px;
|
||||
@media (max-width: 1024px) {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-bottom: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#docs {
|
||||
border-right: 1px solid var(--border);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 32px 0 0;
|
||||
|
||||
.logo {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-h);
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
background: var(--social-bg);
|
||||
display: flex;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.button-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#spacer {
|
||||
height: 88px;
|
||||
border-top: 1px solid var(--border);
|
||||
@media (max-width: 1024px) {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4.5px;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
}
|
||||
/* 全局样式入口（原 Vite 脚手架样式已移除，重写为量化后台主题） */
|
||||
@import './styles/tokens.css';
|
||||
@import './styles/element-dark.css';
|
||||
@import './styles/reset.css';
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
/* Element Plus 深色覆盖 —— html.dark 已启用 EP 官方深色，此处精修到量化主题 */
|
||||
html.dark {
|
||||
/* 主色 → 品牌 */
|
||||
--el-color-primary: #1890ff;
|
||||
--el-color-primary-light-3: #2f7fce;
|
||||
--el-color-primary-light-5: #1f5e9c;
|
||||
--el-color-primary-light-7: #164670;
|
||||
--el-color-primary-light-8: #113a5e;
|
||||
--el-color-primary-light-9: #0e2f4d;
|
||||
--el-color-primary-dark-2: #3a9eff;
|
||||
|
||||
/* 背景层级 */
|
||||
--el-bg-color: var(--bg-card);
|
||||
--el-bg-color-page: var(--bg);
|
||||
--el-bg-color-overlay: var(--bg-overlay);
|
||||
|
||||
/* 文字 */
|
||||
--el-text-color-primary: var(--text);
|
||||
--el-text-color-regular: var(--text-2);
|
||||
--el-text-color-secondary: var(--text-3);
|
||||
--el-text-color-placeholder: var(--text-3);
|
||||
--el-text-color-disabled: #4b5158;
|
||||
|
||||
/* 边框 */
|
||||
--el-border-color: var(--border);
|
||||
--el-border-color-light: var(--border-2);
|
||||
--el-border-color-lighter: var(--border-2);
|
||||
--el-border-color-extra-light: var(--border-2);
|
||||
--el-border-color-dark: var(--border);
|
||||
--el-border-color-darker: var(--border);
|
||||
|
||||
/* 填充 */
|
||||
--el-fill-color: var(--bg-hover);
|
||||
--el-fill-color-light: var(--bg-card);
|
||||
--el-fill-color-lighter: var(--bg-card);
|
||||
--el-fill-color-extra-light: var(--bg-card);
|
||||
--el-fill-color-dark: var(--bg-hover);
|
||||
--el-fill-color-darker: var(--bg-hover);
|
||||
--el-fill-color-blank: transparent;
|
||||
|
||||
/* 遮罩/禁用 */
|
||||
--el-mask-color: rgba(1, 4, 9, 0.72);
|
||||
--el-disabled-bg-color: var(--bg-card);
|
||||
--el-disabled-text-color: var(--text-3);
|
||||
--el-disabled-border-color: var(--border-2);
|
||||
|
||||
/* 语义色（danger 用红、success 用绿，契合涨跌但保持语义） */
|
||||
--el-color-success: #3fb950;
|
||||
--el-color-warning: #d29922;
|
||||
--el-color-danger: #f85149;
|
||||
--el-color-error: #f85149;
|
||||
--el-color-info: #8b949e;
|
||||
}
|
||||
|
||||
/* 组件细节精修 */
|
||||
html.dark {
|
||||
/* 卡片更紧凑、去多余阴影 */
|
||||
.el-card {
|
||||
background-color: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-md);
|
||||
box-shadow: none;
|
||||
}
|
||||
.el-card__header {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
.el-card__body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 表格密度 */
|
||||
.el-table {
|
||||
--el-table-bg-color: transparent;
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-row-hover-bg-color: var(--bg-hover);
|
||||
--el-table-header-bg-color: var(--bg-hover);
|
||||
--el-table-border-color: var(--border-2);
|
||||
--el-table-border: 1px solid var(--border-2);
|
||||
--el-table-text-color: var(--text);
|
||||
--el-table-header-text-color: var(--text-2);
|
||||
font-size: 13px;
|
||||
}
|
||||
.el-table th.el-table__cell {
|
||||
background-color: var(--bg-hover) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
.el-table .cell {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 菜单 */
|
||||
.el-menu {
|
||||
--el-menu-bg-color: transparent;
|
||||
--el-menu-text-color: var(--text-2);
|
||||
--el-menu-hover-bg-color: var(--bg-hover);
|
||||
--el-menu-active-color: var(--brand);
|
||||
border-right: none;
|
||||
}
|
||||
.el-menu-item.is-active,
|
||||
.el-sub-menu.is-active > .el-sub-menu__title {
|
||||
color: var(--brand);
|
||||
}
|
||||
|
||||
/* 输入/选择器贴主题 */
|
||||
.el-input__wrapper,
|
||||
.el-textarea__inner,
|
||||
.el-select__wrapper {
|
||||
background-color: var(--bg) !important;
|
||||
box-shadow: 0 0 0 1px var(--border) inset !important;
|
||||
}
|
||||
.el-input__wrapper:hover,
|
||||
.el-select__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px var(--brand) inset !important;
|
||||
}
|
||||
.el-input.is-focus .el-input__wrapper,
|
||||
.el-select__wrapper.is-focused {
|
||||
box-shadow: 0 0 0 1px var(--brand) inset !important;
|
||||
}
|
||||
|
||||
/* 描述列表/标签页 边框 */
|
||||
.el-descriptions__border {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* 滚动条贴深色 */
|
||||
.el-scrollbar__bar {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 数字用等宽（涨跌色由业务层控制） */
|
||||
.num {
|
||||
font-family: var(--mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
/* 全局 reset —— 后台基础：深色 / 紧凑 / 高数据密度 */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--sans);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
p { margin: 0; }
|
||||
|
||||
a {
|
||||
color: var(--brand);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 深色滚动条 */
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover { background: #424a53; }
|
||||
|
||||
/* ====== 布局工具类 ====== */
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-3);
|
||||
padding-bottom: var(--sp-2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--text-3);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-2);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* 涨跌色工具 */
|
||||
.up { color: var(--up); }
|
||||
.down { color: var(--down); }
|
||||
.muted { color: var(--text-3); }
|
||||
|
||||
/* 紧凑表单 */
|
||||
.el-form-item { margin-bottom: 16px; }
|
||||
|
||||
/* 链接按钮无下划线 */
|
||||
.el-button.is-link { font-weight: 500; }
|
||||
@@ -0,0 +1,51 @@
|
||||
/* 量化后台设计 token —— 深色 / 高密度 / 红涨绿跌（A股惯例） */
|
||||
:root {
|
||||
/* 背景层级 */
|
||||
--bg: #0d1117; /* 主背景 */
|
||||
--bg-card: #161b22; /* 卡片/面板 */
|
||||
--bg-hover: #1c2128; /* 悬停/表头 */
|
||||
--bg-overlay: #1c2128; /* 弹层 */
|
||||
|
||||
/* 文字 */
|
||||
--text: #e6edf3; /* 主 */
|
||||
--text-2: #8b949e; /* 次 */
|
||||
--text-3: #6e7681; /* 弱/占位 */
|
||||
|
||||
/* 语义色：红涨绿跌 */
|
||||
--up: #f85149; /* 涨/红 */
|
||||
--down: #3fb950; /* 跌/绿 */
|
||||
--brand: #1890ff; /* 品牌/链接/激活 */
|
||||
--warn: #d29922;
|
||||
--danger: #f85149;
|
||||
|
||||
/* 边框 */
|
||||
--border: #30363d;
|
||||
--border-2: #21262d; /* 更弱的分隔线 */
|
||||
|
||||
/* 间距 */
|
||||
--sp-1: 4px;
|
||||
--sp-2: 8px;
|
||||
--sp-3: 12px;
|
||||
--sp-4: 16px;
|
||||
--sp-5: 24px;
|
||||
--sp-6: 32px;
|
||||
|
||||
/* 圆角 */
|
||||
--r-sm: 4px;
|
||||
--r-md: 6px;
|
||||
--r-lg: 8px;
|
||||
|
||||
/* 阴影 */
|
||||
--shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* 字体 */
|
||||
--mono: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
--sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, sans-serif;
|
||||
|
||||
/* 布局 */
|
||||
--sidebar-w: 208px;
|
||||
--header-h: 52px;
|
||||
|
||||
--ease: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/* ECharts 深色量化主题 —— 全站统一：深色轴线/文字/网格，红涨绿跌，净值品牌色 */
|
||||
|
||||
export const UP = '#f85149' // 红涨（A股惯例）
|
||||
export const DOWN = '#3fb950' // 绿跌
|
||||
export const BRAND = '#1890ff'
|
||||
export const TEXT = '#e6edf3'
|
||||
export const TEXT_DIM = '#8b949e'
|
||||
export const AXIS = '#30363d'
|
||||
export const SPLIT = '#21262d'
|
||||
export const TOOLTIP_BG = '#1c2128'
|
||||
|
||||
/** 通用深色坐标轴片段（合并进 xAxis/yAxis） */
|
||||
export function darkAxis(): Record<string, unknown> {
|
||||
return {
|
||||
axisLine: { lineStyle: { color: AXIS } },
|
||||
axisTick: { lineStyle: { color: AXIS } },
|
||||
axisLabel: { color: TEXT_DIM, fontSize: 11 },
|
||||
splitLine: { lineStyle: { color: SPLIT } },
|
||||
}
|
||||
}
|
||||
|
||||
/** 通用深色 tooltip */
|
||||
export function darkTooltip(): Record<string, unknown> {
|
||||
return {
|
||||
trigger: 'axis',
|
||||
backgroundColor: TOOLTIP_BG,
|
||||
borderColor: AXIS,
|
||||
borderWidth: 1,
|
||||
textStyle: { color: TEXT, fontSize: 12 },
|
||||
}
|
||||
}
|
||||
|
||||
/** 通用深色 grid */
|
||||
export function darkGrid(): Record<string, unknown> {
|
||||
return { left: 48, right: 20, top: 40, bottom: 32 }
|
||||
}
|
||||
|
||||
/** 通用标题样式 */
|
||||
export function darkTitle(text: string): Record<string, unknown> {
|
||||
return { text, left: 'left', textStyle: { color: TEXT, fontSize: 13 } }
|
||||
}
|
||||
|
||||
/** K 线 itemStyle：红涨绿跌 */
|
||||
export const klineItemStyle = {
|
||||
color: UP, // 阳线（收盘≥开盘）
|
||||
color0: DOWN, // 阴线
|
||||
borderColor: UP,
|
||||
borderColor0: DOWN,
|
||||
}
|
||||
+135
-46
@@ -1,10 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const auth = useAuthStore()
|
||||
|
||||
// 实走监控入口需要 aid，从模拟结果页进入；侧栏保持分组激活即可
|
||||
const activeMenu = computed(() => {
|
||||
const p = route.path
|
||||
if (p.startsWith('/paper')) return p
|
||||
return p
|
||||
})
|
||||
|
||||
function navigate(path: string): void {
|
||||
router.push(path)
|
||||
}
|
||||
@@ -17,35 +26,53 @@ function onLogout(): void {
|
||||
|
||||
<template>
|
||||
<el-container class="layout">
|
||||
<el-aside width="200px" class="sidebar">
|
||||
<div class="logo">三国量化</div>
|
||||
<el-menu :default-active="$route.path" @select="navigate">
|
||||
<aside class="sidebar">
|
||||
<div class="logo">
|
||||
<span class="logo-mark">SG</span>
|
||||
<span class="logo-text">三国量化</span>
|
||||
</div>
|
||||
<el-menu :default-active="activeMenu" class="nav" @select="navigate">
|
||||
<el-sub-menu index="backtest">
|
||||
<template #title><span>📊 回测</span></template>
|
||||
<template #title>
|
||||
<span class="nav-label">回测</span>
|
||||
</template>
|
||||
<el-menu-item index="/backtest/new">新建回测</el-menu-item>
|
||||
<el-menu-item index="/backtest/optimize">参数优化</el-menu-item>
|
||||
<el-menu-item index="/backtest/history">历史任务</el-menu-item>
|
||||
</el-sub-menu>
|
||||
<el-menu-item index="/factor/new">
|
||||
<span>🔬 投研</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/paper/new">
|
||||
<span>🧪 模拟</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-sub-menu index="factor">
|
||||
<template #title>
|
||||
<span class="nav-label">投研</span>
|
||||
</template>
|
||||
<el-menu-item index="/factor/new">因子分析</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<el-sub-menu index="paper">
|
||||
<template #title>
|
||||
<span class="nav-label">模拟</span>
|
||||
</template>
|
||||
<el-menu-item index="/paper/new">新建模拟盘</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<el-menu-item index="live" disabled>
|
||||
<span>💰 实盘 <em class="muted">（D 期 · 国金 QMT）</em></span>
|
||||
<span class="nav-label">实盘 <em class="nav-tip">国金 QMT · D 期</em></span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<div class="sidebar-foot">v2 · 量化研究台</div>
|
||||
</aside>
|
||||
|
||||
<el-container>
|
||||
<el-header class="header">
|
||||
<span class="sys-name">投研 + 回测 控制台</span>
|
||||
<header class="header">
|
||||
<span class="sys-name">投研 · 回测 · 模拟 控制台</span>
|
||||
<div class="user-area">
|
||||
<span>{{ auth.username }}</span>
|
||||
<span class="user-avatar">{{ (auth.username ?? '?').slice(0, 1).toUpperCase() }}</span>
|
||||
<span class="user-name">{{ auth.username }}</span>
|
||||
<span class="sep">|</span>
|
||||
<el-button link type="primary" @click="onLogout">登出</el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
</header>
|
||||
<el-main class="main">
|
||||
<router-view />
|
||||
</el-main>
|
||||
</el-container>
|
||||
@@ -53,50 +80,112 @@ function onLogout(): void {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.layout {
|
||||
height: 100vh;
|
||||
}
|
||||
.layout { height: 100vh; }
|
||||
|
||||
.sidebar {
|
||||
background: #001529;
|
||||
color: #fff;
|
||||
width: var(--sidebar-w);
|
||||
background: var(--bg);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.logo {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
background: #002140;
|
||||
height: var(--header-h);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.logo-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--brand);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
.logo-text {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
border-right: none;
|
||||
}
|
||||
:deep(.nav .el-menu-item),
|
||||
:deep(.nav .el-sub-menu__title) {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
border-radius: var(--r-sm);
|
||||
margin: 2px 0;
|
||||
}
|
||||
.nav-label { font-size: 13px; }
|
||||
.nav-tip {
|
||||
color: var(--text-3);
|
||||
font-style: normal;
|
||||
font-size: 11px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.sidebar-foot {
|
||||
padding: 10px 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
font-size: 11px;
|
||||
color: var(--text-3);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.header {
|
||||
height: var(--header-h);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 0 20px;
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.sys-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
.user-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--text-2);
|
||||
}
|
||||
.muted {
|
||||
color: #999;
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
.user-avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-2);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
:deep(.el-menu) {
|
||||
background: transparent;
|
||||
border-right: none;
|
||||
}
|
||||
:deep(.el-menu-item) {
|
||||
color: #ccc;
|
||||
}
|
||||
:deep(.el-menu-item.is-active) {
|
||||
color: #fff;
|
||||
background: #1890ff;
|
||||
.user-name { color: var(--text); }
|
||||
.sep { color: var(--border); }
|
||||
|
||||
.main {
|
||||
background: var(--bg);
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -34,20 +34,32 @@ async function onSubmit(): Promise<void> {
|
||||
|
||||
<template>
|
||||
<div class="login-wrap">
|
||||
<el-card class="login-card">
|
||||
<template #header>
|
||||
<h2 class="login-title">三国量化研究台</h2>
|
||||
</template>
|
||||
<div class="login-card">
|
||||
<div class="brand">
|
||||
<span class="brand-mark">SG</span>
|
||||
<div class="brand-text">
|
||||
<h1 class="brand-title">三国量化研究台</h1>
|
||||
<p class="brand-sub">Sanguo Quant Research Terminal</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-form label-position="top" @submit.prevent="onSubmit">
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="form.username" placeholder="admin" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码">
|
||||
<el-input v-model="form.password" type="password" show-password placeholder="请输入密码" @keyup.enter="onSubmit" />
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="请输入密码"
|
||||
@keyup.enter="onSubmit"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-button type="primary" :loading="loading" style="width: 100%" @click="onSubmit">登录</el-button>
|
||||
<el-button type="primary" :loading="loading" class="submit" @click="onSubmit">
|
||||
登录
|
||||
</el-button>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -57,13 +69,51 @@ async function onSubmit(): Promise<void> {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f0f2f5;
|
||||
background:
|
||||
radial-gradient(circle at 70% 20%, rgba(24, 144, 255, 0.08), transparent 50%),
|
||||
radial-gradient(circle at 20% 80%, rgba(248, 81, 73, 0.05), transparent 45%),
|
||||
var(--bg);
|
||||
}
|
||||
.login-card {
|
||||
width: 360px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg);
|
||||
padding: 32px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.login-title {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.brand-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--r-md);
|
||||
background: var(--brand);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
.brand-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
.brand-sub {
|
||||
font-size: 11px;
|
||||
color: var(--text-3);
|
||||
letter-spacing: 0.5px;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
.submit {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -29,10 +29,14 @@ function open(row: TaskListItem): void {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card v-loading="loading">
|
||||
<template #header>
|
||||
<h3>历史任务</h3>
|
||||
</template>
|
||||
<div class="page">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h2 class="page-title">历史任务</h2>
|
||||
<p class="page-subtitle">回测 / 因子分析 任务列表</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-card v-loading="loading">
|
||||
<el-table :data="tasks" stripe size="small" empty-text="暂无历史任务">
|
||||
<el-table-column prop="task_id" label="任务 ID" min-width="220" />
|
||||
<el-table-column prop="type" label="类型" width="80" />
|
||||
@@ -47,5 +51,6 @@ function open(row: TaskListItem): void {
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -77,10 +77,14 @@ async function onSubmit(): Promise<void> {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card v-loading="loading">
|
||||
<template #header>
|
||||
<h3>新建回测</h3>
|
||||
</template>
|
||||
<div class="page">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h2 class="page-title">新建回测</h2>
|
||||
<p class="page-subtitle">选择策略与标的，提交后进入进度跟踪</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-card v-loading="loading">
|
||||
<el-form :model="form" label-width="120px">
|
||||
<el-form-item label="策略">
|
||||
<el-select v-model="form.strategy" placeholder="选择策略" style="width: 280px">
|
||||
@@ -103,5 +107,6 @@ async function onSubmit(): Promise<void> {
|
||||
<el-button type="primary" :loading="submitting" @click="onSubmit">提交回测</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -90,10 +90,14 @@ async function onSubmit(): Promise<void> {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card v-loading="loading || polling" :element-loading-text="stageText || '优化中…'">
|
||||
<template #header>
|
||||
<h3>参数优化</h3>
|
||||
</template>
|
||||
<div class="page">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h2 class="page-title">参数优化</h2>
|
||||
<p class="page-subtitle">参数网格搜索 · 自动轮询结果</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-card v-loading="loading || polling" :element-loading-text="stageText || '优化中…'">
|
||||
<el-form :model="form" label-width="120px">
|
||||
<el-form-item label="策略">
|
||||
<el-select v-model="form.strategy" style="width: 280px">
|
||||
@@ -129,5 +133,6 @@ async function onSubmit(): Promise<void> {
|
||||
<template #default="{ row }">{{ fmt(row.statistics?.[k]) }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -26,19 +26,30 @@ function pct(): number {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<h3>回测进行中</h3>
|
||||
<p>任务 ID：{{ taskId }}</p>
|
||||
<p>
|
||||
状态：
|
||||
<el-tag :type="status === 'done' ? 'success' : status === 'failed' ? 'danger' : 'warning'">
|
||||
{{ status }}
|
||||
</el-tag>
|
||||
</p>
|
||||
<p>阶段：{{ stage || '—' }}</p>
|
||||
<el-progress
|
||||
:percentage="pct()"
|
||||
:status="status === 'failed' ? 'exception' : status === 'done' ? 'success' : undefined"
|
||||
/>
|
||||
</el-card>
|
||||
<div class="page">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h2 class="page-title">任务进行中</h2>
|
||||
<p class="page-subtitle">任务 ID：{{ taskId }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-card>
|
||||
<p class="progress-status">
|
||||
状态：
|
||||
<el-tag :type="status === 'done' ? 'success' : status === 'failed' ? 'danger' : 'warning'">
|
||||
{{ status }}
|
||||
</el-tag>
|
||||
</p>
|
||||
<p class="progress-stage">阶段：{{ stage || '—' }}</p>
|
||||
<el-progress
|
||||
:percentage="pct()"
|
||||
:status="status === 'failed' ? 'exception' : status === 'done' ? 'success' : undefined"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.progress-status { margin-bottom: 8px; }
|
||||
.progress-stage { margin-bottom: 16px; color: var(--text-2); }
|
||||
</style>
|
||||
|
||||
@@ -51,9 +51,15 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<div v-loading="loading" class="page">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h2 class="page-title">回测结果 <span class="muted">{{ taskId }}</span></h2>
|
||||
<p class="page-subtitle">统计指标 / 资金曲线 / K 线买卖点 / 成交明细</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-card>
|
||||
<template #header><h3>统计指标</h3></template>
|
||||
<template #header><span class="section-title">统计指标</span></template>
|
||||
<el-descriptions :column="4" border>
|
||||
<el-descriptions-item v-for="e in statEntries" :key="e.key" :label="e.key">
|
||||
{{ e.value }}
|
||||
@@ -61,17 +67,17 @@ onMounted(async () => {
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<el-row :gutter="16" style="margin-top: 16px">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12"><el-card><EquityChart :data="equity" /></el-card></el-col>
|
||||
<el-col :span="12"><el-card><DailyPnlChart :data="pnl" /></el-card></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-card style="margin-top: 16px">
|
||||
<el-card>
|
||||
<KlineChart :kline="kline" :trades="trades" />
|
||||
</el-card>
|
||||
|
||||
<el-card style="margin-top: 16px">
|
||||
<template #header><h3>成交记录</h3></template>
|
||||
<el-card>
|
||||
<template #header><span class="section-title">成交记录</span></template>
|
||||
<TradesTable :trades="trades" />
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
@@ -55,10 +55,14 @@ async function onSubmit(): Promise<void> {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card v-loading="loading">
|
||||
<template #header>
|
||||
<h3>新建因子分析</h3>
|
||||
</template>
|
||||
<div class="page">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h2 class="page-title">因子分析</h2>
|
||||
<p class="page-subtitle">IC 横截面分析（≥2 标的）· 生成 tears 报告</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-card v-loading="loading">
|
||||
<el-form label-width="140px">
|
||||
<el-form-item label="因子">
|
||||
<el-select v-model="form.factor_names" multiple placeholder="选择因子" style="width: 380px">
|
||||
@@ -78,5 +82,6 @@ async function onSubmit(): Promise<void> {
|
||||
<el-button type="primary" :loading="submitting" @click="onSubmit">提交分析</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -53,11 +53,15 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<div v-loading="loading" class="page">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h2 class="page-title">因子分析结果 <span class="muted">{{ taskId }}</span></h2>
|
||||
<p class="page-subtitle">IC 统计 / tears 报告</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<h3>IC 统计</h3>
|
||||
</template>
|
||||
<template #header><span class="section-title">IC 统计</span></template>
|
||||
<el-table :data="rows" stripe size="small" empty-text="无 IC 数据">
|
||||
<el-table-column prop="factor" label="因子" width="120" />
|
||||
<el-table-column prop="period" label="周期" width="80" />
|
||||
@@ -79,10 +83,8 @@ onMounted(async () => {
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-card v-for="f in factors" :key="f" style="margin-top: 16px">
|
||||
<template #header>
|
||||
<h3>tears 报告 — {{ f }}</h3>
|
||||
</template>
|
||||
<el-card v-for="f in factors" :key="f">
|
||||
<template #header><span class="section-title">tears 报告 — {{ f }}</span></template>
|
||||
<iframe :src="reportUrl(taskId, f)" style="width: 100%; height: 600px; border: 0" />
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import {
|
||||
getPaper, getEquity, getPositions, getPending, getTrades,
|
||||
type PaperAccount, type BalancePoint, type PositionRow, type PendingOrder, type PaperTrade,
|
||||
} from '@/api/paper'
|
||||
import type { EquityPoint } from '@/api/backtest'
|
||||
import EquityChart from '@/components/charts/EquityChart.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const aid = Number(route.params.aid)
|
||||
|
||||
const loading = ref(true)
|
||||
const account = ref<PaperAccount | null>(null)
|
||||
const equity = ref<BalancePoint[]>([])
|
||||
const positions = ref<PositionRow[]>([])
|
||||
const pending = ref<PendingOrder[]>([])
|
||||
const trades = ref<PaperTrade[]>([])
|
||||
let timer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
const statusType = computed(() => {
|
||||
const s = account.value?.status ?? ''
|
||||
if (s === 'running') return 'warning'
|
||||
if (s === 'done') return 'success'
|
||||
if (s === 'failed') return 'danger'
|
||||
return 'info'
|
||||
})
|
||||
|
||||
const equitySeries = computed<EquityPoint[]>(() =>
|
||||
equity.value.map((p) => ({ date: p.date, balance: p.total_equity })),
|
||||
)
|
||||
|
||||
const todayStr = new Date().toISOString().slice(0, 10)
|
||||
const todayTrades = computed(() =>
|
||||
trades.value.filter((t) => String(t.bar_date).slice(0, 10) === todayStr),
|
||||
)
|
||||
|
||||
function orDash(v: string | null | undefined): string {
|
||||
return v && v !== 'None' ? v : '—'
|
||||
}
|
||||
|
||||
async function load(): Promise<void> {
|
||||
try {
|
||||
const [acc, eq, pos, pend, tr] = await Promise.all([
|
||||
getPaper(aid), getEquity(aid), getPositions(aid), getPending(aid), getTrades(aid),
|
||||
])
|
||||
account.value = acc
|
||||
equity.value = eq
|
||||
positions.value = pos
|
||||
pending.value = pend
|
||||
trades.value = tr
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void load()
|
||||
timer = setInterval(load, 10000)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
if (timer) clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-loading="loading" class="page">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h2 class="page-title">实走监控 <span class="muted">#{{ aid }}</span></h2>
|
||||
<p class="page-subtitle">实走（live）模式每日定时 step · 每 10s 刷新</p>
|
||||
</div>
|
||||
<el-tag v-if="account" :type="statusType" effect="dark" size="large">
|
||||
{{ account.status }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<!-- step 状态卡片 -->
|
||||
<div class="stat-row">
|
||||
<div class="stat">
|
||||
<span class="stat-label">模式</span>
|
||||
<span class="stat-value">{{ account?.mode ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">频率</span>
|
||||
<span class="stat-value">{{ account?.interval ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">上次运行</span>
|
||||
<span class="stat-value num">{{ orDash(account?.last_run_date) }}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">下次运行</span>
|
||||
<span class="stat-value num">{{ orDash(account?.next_run_at) }}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">检查点</span>
|
||||
<span class="stat-value num">{{ orDash(account?.checkpoint_date) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-alert
|
||||
v-if="account?.error_msg"
|
||||
type="error"
|
||||
:title="account.error_msg"
|
||||
:closable="false"
|
||||
/>
|
||||
|
||||
<!-- 净值曲线 -->
|
||||
<el-card>
|
||||
<template #header><span class="section-title">账户净值</span></template>
|
||||
<EquityChart :data="equitySeries" />
|
||||
</el-card>
|
||||
|
||||
<el-row :gutter="16">
|
||||
<!-- 持仓 -->
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<template #header><span class="section-title">当前持仓</span></template>
|
||||
<el-table :data="positions" size="small" empty-text="无持仓">
|
||||
<el-table-column prop="symbol" label="标的" min-width="90" />
|
||||
<el-table-column prop="volume" label="总持仓" width="90" class-name="num" />
|
||||
<el-table-column prop="frozen" label="冻结" width="80" class-name="num" />
|
||||
<el-table-column prop="avg_price" label="均价" width="90" class-name="num" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 待成交（跨日 pending） -->
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<template #header><span class="section-title">待成交（跨日 Pending）</span></template>
|
||||
<el-table :data="pending" size="small" empty-text="无待成交订单">
|
||||
<el-table-column prop="strategy_id" label="策略" min-width="120" />
|
||||
<el-table-column prop="symbol" label="标的" width="90" />
|
||||
<el-table-column prop="side" label="方向" width="70" />
|
||||
<el-table-column prop="volume" label="数量" width="80" class-name="num" />
|
||||
<el-table-column prop="price" label="价格" width="90" class-name="num" />
|
||||
<el-table-column label="类型" width="70">
|
||||
<template #default="{ row }">{{ row.is_market ? '市价' : '限价' }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 今日信号 -->
|
||||
<el-card>
|
||||
<template #header><span class="section-title">今日成交信号</span></template>
|
||||
<el-table :data="todayTrades" size="small" empty-text="今日无成交">
|
||||
<el-table-column prop="bar_date" label="时间" min-width="140" />
|
||||
<el-table-column prop="strategy_id" label="策略" min-width="120" />
|
||||
<el-table-column prop="symbol" label="标的" width="90" />
|
||||
<el-table-column label="方向" width="70">
|
||||
<template #default="{ row }">
|
||||
<span :class="row.direction === '买' ? 'up' : 'down'">{{ row.direction }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="价格" width="90" class-name="num" />
|
||||
<el-table-column prop="volume" label="数量" width="80" class-name="num" />
|
||||
<el-table-column prop="reject_reason" label="拒因" min-width="100" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.stat-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
.stat {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-md);
|
||||
padding: 12px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-3);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 15px;
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.stat-row { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
</style>
|
||||
@@ -35,7 +35,14 @@ function onSymbols(v: string): void {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card header="新建模拟盘">
|
||||
<div class="page">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h2 class="page-title">新建模拟盘</h2>
|
||||
<p class="page-subtitle">回放（replay）或实走（live）· 支持日频 / 15 分钟</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-card>
|
||||
<el-form :model="form" label-width="120px">
|
||||
<el-form-item label="模式">
|
||||
<el-select v-model="form.mode">
|
||||
@@ -72,5 +79,6 @@ function onSymbols(v: string): void {
|
||||
<el-button type="primary" :loading="loading" @click="onSubmit">创建模拟盘</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,23 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import {
|
||||
getEquity, getTrades, getStrategies, getPaper,
|
||||
type BalancePoint, type PaperTrade, type StrategySummary,
|
||||
} from '@/api/paper'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const aid = Number(route.params.id)
|
||||
const equity = ref<BalancePoint[]>([])
|
||||
const trades = ref<PaperTrade[]>([])
|
||||
const strategies = ref<StrategySummary[]>([])
|
||||
const status = ref<string>('')
|
||||
const mode = ref<string>('')
|
||||
let timer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
async function load(): Promise<void> {
|
||||
try {
|
||||
const acc = await getPaper(aid)
|
||||
status.value = acc.status
|
||||
mode.value = acc.mode
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
@@ -26,6 +29,10 @@ async function load(): Promise<void> {
|
||||
strategies.value = await getStrategies(aid)
|
||||
}
|
||||
|
||||
function toLive(): void {
|
||||
router.push(`/paper/live/${aid}`)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void load()
|
||||
timer = setInterval(async () => {
|
||||
@@ -46,43 +53,53 @@ function rowClass({ row }: { row: PaperTrade }): string {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="page">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h2 class="page-title">模拟盘结果 <span class="muted">#{{ aid }}</span></h2>
|
||||
<p class="page-subtitle">模式：{{ mode || '—' }} · 状态：{{ status || '—' }}</p>
|
||||
</div>
|
||||
<el-button v-if="mode === 'live'" type="primary" @click="toLive">进入实走监控 →</el-button>
|
||||
</div>
|
||||
|
||||
<el-alert
|
||||
v-if="status === 'running' || status === 'pending' || status === 'created'"
|
||||
type="info"
|
||||
:closable="false"
|
||||
style="margin-bottom: 16px"
|
||||
>
|
||||
回放进行中（{{ status }}）…每 3 秒刷新，完成自动停止
|
||||
</el-alert>
|
||||
<el-alert v-else-if="status === 'failed'" type="error" :closable="false" style="margin-bottom: 16px">
|
||||
<el-alert v-else-if="status === 'failed'" type="error" :closable="false">
|
||||
回放失败
|
||||
</el-alert>
|
||||
|
||||
<el-card header="账户净值" style="margin-bottom: 16px">
|
||||
<el-card>
|
||||
<template #header><span class="section-title">账户净值</span></template>
|
||||
<el-table :data="equity" size="small" max-height="240">
|
||||
<el-table-column prop="date" label="日期" />
|
||||
<el-table-column prop="total_equity" label="总净值" />
|
||||
<el-table-column prop="cash" label="现金" />
|
||||
<el-table-column prop="market_value" label="市值" />
|
||||
<el-table-column prop="total_equity" label="总净值" class-name="num" />
|
||||
<el-table-column prop="cash" label="现金" class-name="num" />
|
||||
<el-table-column prop="market_value" label="市值" class-name="num" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
<el-card header="分策略归因" style="margin-bottom: 16px">
|
||||
<el-card>
|
||||
<template #header><span class="section-title">分策略归因</span></template>
|
||||
<el-table :data="strategies" size="small">
|
||||
<el-table-column prop="strategy_id" label="策略" />
|
||||
<el-table-column prop="filled" label="成交" />
|
||||
<el-table-column prop="rejected" label="拒单" />
|
||||
<el-table-column prop="commission" label="费用" />
|
||||
<el-table-column prop="filled" label="成交" class-name="num" />
|
||||
<el-table-column prop="rejected" label="拒单" class-name="num" />
|
||||
<el-table-column prop="commission" label="费用" class-name="num" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
<el-card header="成交明细（拒单高亮）">
|
||||
<el-card>
|
||||
<template #header><span class="section-title">成交明细（拒单高亮）</span></template>
|
||||
<el-table :data="trades" size="small" :row-class-name="rowClass">
|
||||
<el-table-column prop="bar_date" label="日期" />
|
||||
<el-table-column prop="strategy_id" label="策略" />
|
||||
<el-table-column prop="symbol" label="标的" />
|
||||
<el-table-column prop="direction" label="方向" />
|
||||
<el-table-column prop="price" label="价格" />
|
||||
<el-table-column prop="volume" label="数量" />
|
||||
<el-table-column prop="price" label="价格" class-name="num" />
|
||||
<el-table-column prop="volume" label="数量" class-name="num" />
|
||||
<el-table-column prop="reject_reason" label="拒因" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
@@ -91,6 +108,6 @@ function rowClass({ row }: { row: PaperTrade }): string {
|
||||
|
||||
<style scoped>
|
||||
:deep(.rejected-row) {
|
||||
color: #f56c6c;
|
||||
color: var(--danger);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user