eezd/AlphaPulse
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "Restyle the web UI as a dark trading terminal"

Browse Source 
This reverts commit d5fa78f1ad.
This commit is contained in:
eezd committed 2026-10-15 18:44:46 +08:00
1 parent d5fa78f1ad
commit 859408386c
31 files changed
+504 -1198
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/pages/chat/components/ContextTab.vue
+2 -2
View File
@@ -80,9 +80,9 @@ load()
<div class="min-h-0 flex flex-1 gap-3">
<textarea
v-model="content" placeholder="目标、已确认的结论、待办…（Markdown）"
class="box-border flex-1 resize-none border border-ap-line border-solid bg-ap-sunken p-3 text-sm text-ap-text leading-6 font-mono outline-none focus:border-ap-brand"
class="box-border flex-1 resize-none border rounded border-solid border-[var(--el-border-color)] p-3 text-sm leading-6 font-mono outline-none focus:border-[var(--el-color-primary)]"
/>
<el-scrollbar class="flex-1 border border-ap-line border-solid bg-ap-panel-low">
<el-scrollbar class="flex-1 border rounded border-solid border-[var(--el-border-color-lighter)]">
<div class="markdown-body p-3" v-html="preview" />
</el-scrollbar>
</div>
web/src/pages/chat/components/MessageList.vue
+2 -5
View File
@@ -51,7 +51,7 @@ function prettyResult(result: string) {
<template>
<div class="flex flex-col gap-4">
<div v-for="item in items" :key="item.key" :class="item.kind === 'user' ? 'self-end max-w-3/4' : 'self-stretch'">
<div v-if="item.kind === 'user'" class="whitespace-pre-wrap border-l-2 border-l-ap-brand border-l-solid bg-ap-panel-high px-3 py-2 font-sans text-sm">
<div v-if="item.kind === 'user'" class="whitespace-pre-wrap rounded-lg bg-[var(--el-color-primary-light-9)] px-3 py-2 text-sm">
{{ item.text }}
</div>
<div v-else class="flex flex-col gap-2">
@@ -71,7 +71,7 @@ function prettyResult(result: string) {
<span class="truncate text-[var(--el-text-color-secondary)] font-mono">{{ JSON.stringify(call.arguments) }}</span>
</div>
</template>
<pre class="m-0 max-h-80 overflow-auto whitespace-pre-wrap break-all border border-ap-line border-solid bg-ap-panel-low p-2 text-xs">{{ call.result === null ? "等待结果…" : prettyResult(call.result) }}</pre>
<pre class="m-0 max-h-80 overflow-auto whitespace-pre-wrap break-all rounded bg-[var(--el-fill-color-light)] p-2 text-xs">{{ call.result === null ? "等待结果…" : prettyResult(call.result) }}</pre>
</el-collapse-item>
</el-collapse>
<div v-if="item.stopped" class="text-xs text-[var(--el-text-color-secondary)]">
@@ -84,9 +84,6 @@ function prettyResult(result: string) {
</template>
<style scoped>
.tool-cards {
border: 1px solid var(--ap-line);
}
.tool-cards :deep(.el-collapse-item__header) {
height: 32px;
line-height: 32px;
web/src/pages/chat/index.vue
+9 -11
View File
@@ -218,16 +218,14 @@ loadSkills()
<el-tabs v-model="activeTab" class="chat-tabs min-h-0 flex flex-1 flex-col">
<el-tab-pane label="Chat" name="chat" class="h-full">
<div class="h-full flex gap-3">
<el-card class="w-72 flex shrink-0 flex-col" body-class="min-h-0 flex-1 box-border flex flex-col gap-2" shadow="never">
<template #header>
<div class="w-full flex items-center justify-between">
Skills
<el-button link type="primary" size="small" @click="router.push('/skills')">
去管理
</el-button>
</div>
</template>
<div class="text-xs text-ap-muted">
<el-card class="w-72 shrink-0" body-class="h-full box-border flex flex-col gap-2" shadow="never">
<div class="flex items-center justify-between text-sm font-bold">
Skills
<el-button link size="small" @click="router.push('/skills')">
去管理
</el-button>
</div>
<div class="text-xs text-[var(--el-text-color-secondary)]">
点击查看草稿与已发布版本的差异并发布；黄色为本次 Chat 刚改过的
</div>
<div class="min-h-0 flex-1">
@@ -244,7 +242,7 @@ loadSkills()
<el-option v-for="e in EFFORTS" :key="e" :value="e" :label="`思考强度：${e}`" />
</el-select>
<el-tooltip content="下一轮发给模型的 system prompt（含已发布 skills、CONTEXT.md）与历史消息的估算大小" placement="bottom">
<span class="text-xs" :class="tokenRatio > 0.8 ? 'text-ap-down font-bold' : 'text-[var(--el-text-color-secondary)]'">
<span class="text-xs" :class="tokenRatio > 0.8 ? 'text-red-500 font-bold' : 'text-[var(--el-text-color-secondary)]'">
上下文约 {{ estimatedTokens.toLocaleString() }}{{ provider ? ` / ${provider.context_window.toLocaleString()}` : "" }} token
</span>
</el-tooltip>
web/src/pages/crawler/components/SourcePanel.vue
+6 -6
View File
@@ -124,7 +124,7 @@ loadLatest()
{{ formatTime(source.last_success_at) }}
</el-descriptions-item>
<el-descriptions-item label="连续失败">
<span :class="{ 'text-ap-down font-bold': source.consecutive_failures > 0 }">{{ source.consecutive_failures }}</span>
<span :class="{ 'text-red-500 font-bold': source.consecutive_failures > 0 }">{{ source.consecutive_failures }}</span>
</el-descriptions-item>
<el-descriptions-item label="下次运行">
{{ formatTime(source.paused_until && source.paused_until > (source.process?.next_run_at ?? "") ? source.paused_until : source.process?.next_run_at) }}
@@ -157,7 +157,7 @@ loadLatest()
</div>
</el-descriptions-item>
<el-descriptions-item v-if="source.last_error" label="最近错误" :span="4">
<span class="whitespace-pre-wrap text-xs text-ap-down">{{ source.last_error }}</span>
<span class="whitespace-pre-wrap text-xs text-red-500">{{ source.last_error }}</span>
</el-descriptions-item>
</el-descriptions>
@@ -171,7 +171,7 @@ loadLatest()
</template>
<div v-for="item in latest" :key="item.id" class="mb-2 text-sm">
<span class="mr-2 text-xs text-[var(--el-text-color-secondary)]">{{ formatTime(item.published_at, "MM-DD HH:mm") }}</span>
<el-link :href="item.url" target="_blank" class="font-sans">
<el-link :href="item.url" target="_blank">
{{ item.title || item.excerpt.slice(0, 60) }}
</el-link>
</div>
@@ -189,10 +189,10 @@ loadLatest()
<el-switch v-model="autoScroll" active-text="自动滚动" size="small" />
</div>
</template>
<div ref="logBox" class="min-h-0 flex-1 overflow-auto border border-ap-line border-solid bg-ap-sunken p-2 text-xs text-ap-text font-mono leading-5">
<div ref="logBox" class="min-h-0 flex-1 overflow-auto rounded bg-[#1e1e1e] p-2 text-xs text-[#d4d4d4] font-mono leading-5">
<div v-for="log in visibleLogs" :key="log.id" class="whitespace-pre-wrap break-all">
<span class="text-ap-faint">{{ formatTime(log.ts) }}</span>
<span :class="{ 'text-ap-warn': log.level === 'WARNING', 'text-ap-down': log.level === 'ERROR' || log.level === 'CRITICAL' }" class="mx-2">{{ log.level }}</span>{{ log.message }}
<span class="text-[#808080]">{{ formatTime(log.ts) }}</span>
<span :class="{ 'text-yellow-400': log.level === 'WARNING', 'text-red-400': log.level === 'ERROR' || log.level === 'CRITICAL' }" class="mx-2">{{ log.level }}</span>{{ log.message }}
</div>
</div>
</el-card>
web/src/pages/crawler/index.vue
+5 -5
View File
@@ -73,14 +73,14 @@ refresh().then(() => Promise.all(info.value!.sources.map(s => loadHistory(s.code
<template>
<div v-if="info" class="h-full flex flex-col gap-3">
<div class="flex items-center gap-3 border border-ap-line border-solid bg-ap-panel px-3 py-2">
<div class="flex items-center gap-3">
<el-tag :type="info.manager_alive ? 'success' : 'danger'">
<i class="mr-1.5 inline-block h-1.5 w-1.5 bg-current" :class="{ 'animate-pulse': info.manager_alive }" />{{ info.manager_alive ? "管理进程运行中" : "管理进程未运行" }}
{{ info.manager_alive ? "管理进程运行中" : "管理进程未运行" }}
</el-tag>
<el-tag :type="connected ? 'success' : 'danger'">
<i class="mr-1.5 inline-block h-1.5 w-1.5 bg-current" />{{ connected ? "日志推送已连接" : "日志推送断开" }}
{{ connected ? "日志推送已连接" : "日志推送断开" }}
</el-tag>
<span class="text-xs text-ap-muted">数据库 <b class="text-ap-text">{{ formatBytes(info.db_size_bytes) }}</b></span>
<span class="text-sm text-[var(--el-text-color-secondary)]">数据库 {{ formatBytes(info.db_size_bytes) }}</span>
<div class="flex-1" />
<el-button type="danger" :loading="restarting.size > 0" @click="restart('all')">
重启全部采集
@@ -89,7 +89,7 @@ refresh().then(() => Promise.all(info.value!.sources.map(s => loadHistory(s.code
<el-tabs v-model="activeTab" type="border-card" class="crawler-tabs min-h-0 flex flex-1 flex-col">
<el-tab-pane v-for="source in info.sources" :key="source.code" :name="source.code" class="h-full">
<template #label>
<span :class="{ 'text-ap-down font-bold': source.consecutive_failures >= FAILURE_ALERT }">
<span :class="{ 'text-red-500 font-bold': source.consecutive_failures >= FAILURE_ALERT }">
{{ source.name }}
</span>
<el-badge v-if="source.consecutive_failures >= FAILURE_ALERT" :value="source.consecutive_failures" class="ml-1" />
web/src/pages/login/index.vue
+8 -25
View File
@@ -1,5 +1,4 @@
<script lang="ts" setup>
import { DataLine } from "@element-plus/icons-vue"
import { useUserStore } from "@/pinia/user"
const route = useRoute()
@@ -21,20 +20,14 @@ async function submit() {
</script>
<template>
<div class="login-bg h-full flex-center">
<div class="w-90 border border-ap-line border-solid bg-ap-panel">
<div class="h-14 flex flex-col justify-center border-b border-b-ap-line border-b-solid bg-ap-panel-high px-4">
<div class="flex items-center gap-2 font-head text-lg text-ap-brand font-bold tracking-wider">
<el-icon :size="20">
<DataLine />
</el-icon>
ALPHAPULSE
<div class="h-full flex-center">
<el-card class="w-90">
<template #header>
<div class="text-center text-lg font-bold">
AlphaPulse
</div>
<div class="text-[10px] text-ap-muted tracking-[0.2em]">
新闻 · 行情 · AI 分析 · 模拟盘
</div>
</div>
<el-form :model="form" class="p-5" @submit.prevent="submit">
</template>
<el-form :model="form" @submit.prevent="submit">
<el-form-item>
<el-input v-model="form.username" placeholder="用户名" autocomplete="username" />
</el-form-item>
@@ -45,16 +38,6 @@ async function submit() {
登录
</el-button>
</el-form>
</div>
</el-card>
</div>
</template>
<style scoped>
.login-bg {
background-color: var(--ap-bg);
background-image:
linear-gradient(color-mix(in srgb, var(--ap-line) 25%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--ap-line) 25%, transparent) 1px, transparent 1px);
background-size: 32px 32px;
}
</style>
web/src/pages/market/chart.ts
+11 -24
View File
@@ -1,13 +1,9 @@
import type { DeepPartial, Period, Styles } from "klinecharts"
import { PALETTE } from "@/styles/palette"
export const UP = PALETTE.candleUp
export const DOWN = PALETTE.candleDown
const GRID = PALETTE.panelHighest
const AXIS = PALETTE.line
const TEXT = PALETTE.faint
// canvas 读不到 CSS 变量，字体直接写；未设置时 KLineChart 默认 Helvetica Neue，缺字体时会回退成衬线体
const FONT = `"JetBrains Mono Variable", ui-monospace, "PingFang SC", "Microsoft YaHei", monospace`
export const UP = "#0ecb81"
export const DOWN = "#f6465d"
const GRID = "#2b3139"
const TEXT = "#848e9c"
/** “分时”用 1m 数据画面积图，与币安一致 */
export const TIME_LINE = "time"
@@ -63,7 +59,7 @@ export function toPeriod(interval: string): Period {
return { type, span }
}
/** 在内置 dark 主题上覆盖：币安涨跌色 + 站点配色与字体 */
/** 在内置 dark 主题上覆盖币安配色 */
export const BINANCE_STYLES: DeepPartial<Styles> = {
grid: {
horizontal: { color: GRID },
@@ -82,22 +78,13 @@ export const BINANCE_STYLES: DeepPartial<Styles> = {
noChangeWickColor: TEXT
},
priceMark: {
high: { textFamily: FONT },
low: { textFamily: FONT },
last: { upColor: UP, downColor: DOWN, noChangeColor: TEXT, text: { family: FONT } }
},
tooltip: { title: { family: FONT }, legend: { family: FONT } }
last: { upColor: UP, downColor: DOWN, noChangeColor: TEXT }
}
},
indicator: {
ohlc: { upColor: UP, downColor: DOWN, noChangeColor: TEXT },
lastValueMark: { text: { family: FONT } },
tooltip: { title: { family: FONT }, legend: { family: FONT } }
ohlc: { upColor: UP, downColor: DOWN, noChangeColor: TEXT }
},
xAxis: { axisLine: { color: AXIS }, tickText: { color: TEXT, family: FONT } },
yAxis: { axisLine: { color: AXIS }, tickText: { color: TEXT, family: FONT } },
crosshair: {
horizontal: { text: { family: FONT } },
vertical: { text: { family: FONT } }
},
separator: { color: AXIS }
xAxis: { axisLine: { color: GRID }, tickText: { color: TEXT } },
yAxis: { axisLine: { color: GRID }, tickText: { color: TEXT } },
separator: { color: GRID }
}
web/src/pages/market/index.vue
+17 -16
View File
@@ -189,9 +189,9 @@ onBeforeUnmount(() => {
</script>
<template>
<div class="market h-full flex flex-col overflow-hidden border border-ap-line border-solid bg-ap-panel text-ap-text">
<div class="market h-full flex flex-col overflow-hidden rounded bg-[#161a1e] text-[#eaecef]">
<!-- 顶栏：交易对与 24h 行情 -->
<div class="flex flex-wrap items-center gap-6 border-b border-b-solid border-ap-line px-4 py-2">
<div class="flex flex-wrap items-center gap-6 border-b border-b-solid border-[#2b3139] px-4 py-2">
<el-select
:model-value="`${selection.market}:${selection.symbol}`" filterable class="symbol-select w-52"
@change="selectSymbol"
@@ -202,7 +202,7 @@ onBeforeUnmount(() => {
:value="`${s.market}:${s.symbol}`" :label="`${s.base}/${s.quote}${s.market === 'um' ? ' 永续' : ''}`"
>
<span>{{ s.base }}/{{ s.quote }}</span>
<span v-if="s.status !== 'ready'" class="float-right text-xs text-ap-brand">{{ s.status === "error" ? "出错" : "补齐中" }}</span>
<span v-if="s.status !== 'ready'" class="float-right text-xs text-[#f0b90b]">{{ s.status === "error" ? "出错" : "补齐中" }}</span>
</el-option>
</el-option-group>
</el-select>
@@ -232,8 +232,8 @@ onBeforeUnmount(() => {
<div>{{ formatBig(ticker.quoteVolume) }}</div>
</div>
<div class="flex-1" />
<span class="text-xs" :class="connected ? 'text-ap-up' : 'text-ap-down'">● {{ connected ? "实时" : "断开" }}</span>
<el-button size="small" type="primary" @click="addVisible = true">
<span class="text-xs" :class="connected ? 'text-[#0ecb81]' : 'text-[#f6465d]'">● {{ connected ? "实时" : "断开" }}</span>
<el-button size="small" type="warning" @click="addVisible = true">
新增交易对
</el-button>
<el-button size="small" @click="managerVisible = true">
@@ -242,7 +242,7 @@ onBeforeUnmount(() => {
</div>
<!-- 周期与指标工具栏 -->
<div class="flex items-center gap-1 border-b border-b-solid border-ap-line px-3 py-1 text-sm">
<div class="flex items-center gap-1 border-b border-b-solid border-[#2b3139] px-3 py-1 text-sm">
<span
v-for="i in favorites.filter(f => intervals.includes(f))" :key="i"
class="tool" :class="{ active: interval === i }" @click="interval = i"
@@ -318,18 +318,18 @@ onBeforeUnmount(() => {
</el-radio-group>
</el-popover>
<div class="flex-1" />
<span v-if="backfillProgress !== null" class="text-xs text-ap-brand">
<span v-if="backfillProgress !== null" class="text-xs text-[#f0b90b]">
{{ INTERVAL_LABELS[dataInterval] }} 历史数据补齐中 {{ backfillProgress }}%，最新部分暂未完整
</span>
</div>
<div class="min-h-0 flex flex-1">
<!-- 画线工具栏 -->
<div class="flex flex-col gap-1 border-r border-r-solid border-ap-line p-1 text-xs">
<div class="flex flex-col gap-1 border-r border-r-solid border-[#2b3139] p-1 text-xs">
<span v-for="tool in DRAW_TOOLS" :key="tool.name" class="tool text-center" :title="tool.label" @click="chart?.createOverlay(tool.name)">
{{ tool.label }}
</span>
<span class="tool text-center text-ap-down" title="清除全部画线" @click="chart?.removeOverlay()">清除</span>
<span class="tool text-center text-[#f6465d]" title="清除全部画线" @click="chart?.removeOverlay()">清除</span>
</div>
<div ref="chartEl" class="min-w-0 flex-1" />
</div>
@@ -344,27 +344,28 @@ onBeforeUnmount(() => {
font-size: 12px;
}
.stat > div:first-child {
color: var(--ap-muted);
color: #848e9c;
}
.tool {
padding: 2px 8px;
color: var(--ap-muted);
border-radius: 4px;
color: #848e9c;
cursor: pointer;
white-space: nowrap;
}
.tool:hover {
color: var(--ap-text);
background: var(--ap-panel-highest);
color: #eaecef;
background: #2b3139;
}
.tool.active {
color: var(--ap-brand);
color: #f0b90b;
}
.symbol-select :deep(.el-select__wrapper) {
background: var(--ap-panel-high);
background: #2b3139;
box-shadow: none;
}
.symbol-select :deep(.el-select__selected-item) {
color: var(--ap-text);
color: #eaecef;
font-weight: 600;
}
</style>
web/src/pages/news/components/NewsDrawer.vue
+4 -5
View File
@@ -2,7 +2,6 @@
import type { NewsDetail, Revision } from "@/apis/news"
import { getNews, listRevisions } from "@/apis/news"
import { useSourceNames } from "@/composables/useSourceNames"
import { PALETTE } from "@/styles/palette"
import { diffLines, formatTime, htmlToLines } from "@/utils/text"
const newsId = defineModel<number | null>({ required: true })
@@ -28,7 +27,7 @@ watch(newsId, async (id) => {
// 第三方正文放进无脚本权限的 sandbox iframe，避免其中的脚本访问本站
const srcdoc = computed(() => detail.value && `<!doctype html><html><head><meta charset="utf-8">
<meta name="referrer" content="no-referrer"><base target="_blank">
<style>:root{color-scheme:dark;background:${PALETTE.panel}}body{font:15px/1.8 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:${PALETTE.text};margin:0 4px}a{color:${PALETTE.brand}}img{max-width:100%;height:auto}</style>
<style>body{font:15px/1.8 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:#303133;margin:0 4px}img{max-width:100%;height:auto}</style>
</head><body>${detail.value.content_html}</body></html>`)
const diff = computed(() => {
@@ -45,11 +44,11 @@ const diff = computed(() => {
<template>
<el-drawer :model-value="newsId != null" size="50%" :with-header="false" @close="newsId = null">
<div v-if="detail" class="h-full flex flex-col gap-3">
<div class="font-sans text-lg font-bold">
<div class="text-lg font-bold">
{{ detail.title || detail.excerpt.slice(0, 60) }}
</div>
<div class="flex flex-wrap items-center gap-2 text-sm text-[var(--el-text-color-secondary)]">
<el-tag size="small" type="info">
<el-tag size="small">
{{ sourceNames[detail.source_code] ?? detail.source_code }}
</el-tag>
<span>{{ formatTime(detail.published_at, "YYYY-MM-DD HH:mm:ss") }}</span>
@@ -77,7 +76,7 @@ const diff = computed(() => {
<div class="text-sm leading-7">
<div
v-for="(line, i) in diff" :key="i"
:class="{ 'diff-add': line.type === 'add', 'diff-del': line.type === 'del' }"
:class="{ 'bg-green-100': line.type === 'add', 'bg-red-100 line-through': line.type === 'del' }"
class="px-2"
>
{{ line.type === "add" ? "+ " : line.type === "del" ? "- " : " " }}{{ line.text }}
web/src/pages/news/index.vue
+7 -8
View File
@@ -71,7 +71,7 @@ load()
<template>
<div class="h-full flex flex-col gap-3">
<div class="flex flex-wrap items-center gap-3 border border-ap-line border-solid bg-ap-panel px-3 py-2">
<div class="flex flex-wrap items-center gap-3">
<el-checkbox-group v-model="filters.source" @change="search">
<el-checkbox-button v-for="(name, code) in sourceNames" :key="code" :value="code">
{{ name }}
@@ -85,9 +85,8 @@ load()
<el-button type="primary" @click="search">
查询
</el-button>
<div class="flex-1" />
<el-tag :type="connected ? 'success' : 'danger'" size="small">
<i class="mr-1.5 inline-block h-1.5 w-1.5 bg-current" />{{ connected ? "实时推送已连接" : "实时推送断开" }}
{{ connected ? "实时推送已连接" : "实时推送断开" }}
</el-tag>
</div>
@@ -96,14 +95,14 @@ load()
class="cursor-pointer" @click="search"
/>
<div ref="listBox" v-loading="loading" class="min-h-0 flex-1 overflow-auto border border-ap-line border-solid bg-ap-panel">
<div ref="listBox" v-loading="loading" class="min-h-0 flex-1 overflow-auto">
<div
v-for="item in items" :key="item.id"
class="cursor-pointer border-b border-b-ap-line/50 border-b-solid px-3 py-2.5 hover:bg-ap-panel-high"
class="cursor-pointer border-b border-b-solid border-[var(--el-border-color-lighter)] px-2 py-3 hover:bg-[var(--el-fill-color-light)]"
@click="openedId = item.id"
>
<div class="mb-1 flex items-center gap-2 text-xs text-[var(--el-text-color-secondary)]">
<el-tag size="small" type="info">
<el-tag size="small">
{{ sourceNames[item.source_code] ?? item.source_code }}
</el-tag>
<span>{{ formatTime(item.published_at) }}</span>
@@ -114,10 +113,10 @@ load()
付费
</el-tag>
</div>
<div v-if="item.title" class="mb-0.5 font-sans text-[14px] font-bold">
<div v-if="item.title" class="font-bold">
{{ item.title }}
</div>
<div class="line-clamp-3 font-sans text-[13px] text-ap-muted leading-relaxed">
<div class="line-clamp-3 text-sm text-[var(--el-text-color-regular)]">
{{ item.summary || item.excerpt }}
</div>
</div>
web/src/pages/settings/index.vue
+88 -95
View File
@@ -131,67 +131,64 @@ loadExchange()
<template>
<div class="flex flex-col gap-3">
<el-card shadow="never" body-class="p-0!">
<template #header>
<div class="w-full flex items-center justify-between gap-3">
<div>
模型配置
<span class="ml-3 text-[11px] text-ap-muted font-normal font-mono">通过 Sub2API 等中转接入；API key 加密存储，页面只显示末 4 位</span>
</div>
<el-button size="small" type="primary" @click="openCreate">
新增配置
<div class="flex items-center justify-between">
<div>
<span class="text-lg font-bold">模型配置</span>
<span class="ml-3 text-xs text-[var(--el-text-color-secondary)]">通过 Sub2API 等中转接入；API key 加密存储，页面只显示末 4 位</span>
</div>
<el-button type="primary" @click="openCreate">
新增配置
</el-button>
</div>
<el-table :data="providers" border>
<el-table-column label="名称" min-width="120">
<template #default="{ row }">
{{ row.name }}
<el-tag v-if="row.is_default" size="small" type="success" class="ml-1">
默认
</el-tag>
</template>
</el-table-column>
<el-table-column label="协议" min-width="200">
<template #default="{ row }">
{{ PROTOCOL_LABELS[row.protocol as keyof typeof PROTOCOL_LABELS] }}
</template>
</el-table-column>
<el-table-column prop="base_url" label="Base URL" min-width="200" />
<el-table-column prop="model" label="模型" min-width="150" />
<el-table-column label="思考强度" width="90">
<template #default="{ row }">
{{ (row as Provider).reasoning_effort ?? "-" }}
</template>
</el-table-column>
<el-table-column label="API Key" width="100">
<template #default="{ row }">
****{{ row.api_key_hint }}
</template>
</el-table-column>
<el-table-column label="更新时间" width="130">
<template #default="{ row }">
{{ formatTime(row.updated_at, "MM-DD HH:mm") }}
</template>
</el-table-column>
<el-table-column label="操作" width="250" fixed="right">
<template #default="{ row }">
<el-button link type="primary" :loading="testing === row.id" @click="test(row as Provider)">
测试连接
</el-button>
</div>
</template>
<el-table :data="providers">
<el-table-column label="名称" min-width="110">
<template #default="{ row }">
{{ row.name }}
<el-tag v-if="row.is_default" size="small" type="success" class="ml-1">
默认
</el-tag>
</template>
</el-table-column>
<el-table-column label="协议" min-width="230" show-overflow-tooltip>
<template #default="{ row }">
{{ PROTOCOL_LABELS[row.protocol as keyof typeof PROTOCOL_LABELS] }}
</template>
</el-table-column>
<el-table-column prop="base_url" label="Base URL" min-width="220" show-overflow-tooltip />
<el-table-column prop="model" label="模型" min-width="160" show-overflow-tooltip />
<el-table-column label="思考强度" width="80">
<template #default="{ row }">
{{ (row as Provider).reasoning_effort ?? "-" }}
</template>
</el-table-column>
<el-table-column label="API Key" width="90">
<template #default="{ row }">
****{{ row.api_key_hint }}
</template>
</el-table-column>
<el-table-column label="更新时间" width="110">
<template #default="{ row }">
{{ formatTime(row.updated_at, "MM-DD HH:mm") }}
</template>
</el-table-column>
<el-table-column label="操作" width="220" fixed="right">
<template #default="{ row }">
<el-button link type="primary" :loading="testing === row.id" @click="test(row as Provider)">
测试连接
</el-button>
<el-button link @click="openEdit(row as Provider)">
编辑
</el-button>
<el-button v-if="!row.is_default" link @click="setDefault(row as Provider)">
设为默认
</el-button>
<el-button link type="danger" @click="remove(row as Provider)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<el-button link @click="openEdit(row as Provider)">
编辑
</el-button>
<el-button v-if="!row.is_default" link @click="setDefault(row as Provider)">
设为默认
</el-button>
<el-button link type="danger" @click="remove(row as Provider)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog v-model="dialogVisible" :title="editingId === null ? '新增模型配置' : '编辑模型配置'" width="560px">
<el-form :model="form" label-width="100px">
@@ -248,41 +245,37 @@ loadExchange()
</template>
</el-dialog>
<el-card shadow="never">
<template #header>
<div class="w-full flex items-center justify-between gap-3">
<div>
币安模拟盘
<span class="ml-3 text-[11px] text-ap-muted font-normal font-mono">只连接币安模拟盘（demo-fapi.binance.com）；在 demo.binance.com 的 API 管理创建 key，并开启合约交易权限</span>
</div>
<div class="flex shrink-0">
<el-button size="small" :disabled="!exchange?.configured" :loading="exchangeTesting" @click="runExchangeTest">
测试连接
</el-button>
<el-button size="small" type="primary" :disabled="exchange?.running" @click="openExchangeEdit">
{{ exchange?.configured ? "修改 key" : "填写 key" }}
</el-button>
<el-button v-if="exchange?.configured" size="small" type="danger" plain :disabled="exchange.running" @click="removeExchange">
删除
</el-button>
</div>
</div>
</template>
<el-descriptions v-if="exchange" :column="3" border size="small">
<el-descriptions-item label="API Key">
{{ exchange.configured ? `****${exchange.api_key_hint}` : "未配置" }}
</el-descriptions-item>
<el-descriptions-item label="状态">
<el-tag v-if="exchange.running" type="success" size="small">
交易中（停止后才能修改 key）
</el-tag>
<span v-else>未运行</span>
</el-descriptions-item>
<el-descriptions-item label="更新时间">
{{ exchange.updated_at ? formatTime(exchange.updated_at, "MM-DD HH:mm") : "-" }}
</el-descriptions-item>
</el-descriptions>
</el-card>
<div class="mt-4 flex items-center justify-between">
<div>
<span class="text-lg font-bold">币安模拟盘</span>
<span class="ml-3 text-xs text-[var(--el-text-color-secondary)]">只连接币安模拟盘（demo-fapi.binance.com）；在 demo.binance.com 的 API 管理创建 key，并开启合约交易权限</span>
</div>
<div>
<el-button :disabled="!exchange?.configured" :loading="exchangeTesting" @click="runExchangeTest">
测试连接
</el-button>
<el-button type="primary" :disabled="exchange?.running" @click="openExchangeEdit">
{{ exchange?.configured ? "修改 key" : "填写 key" }}
</el-button>
<el-button v-if="exchange?.configured" type="danger" plain :disabled="exchange.running" @click="removeExchange">
删除
</el-button>
</div>
</div>
<el-descriptions v-if="exchange" :column="3" border>
<el-descriptions-item label="API Key">
{{ exchange.configured ? `****${exchange.api_key_hint}` : "未配置" }}
</el-descriptions-item>
<el-descriptions-item label="状态">
<el-tag v-if="exchange.running" type="success" size="small">
交易中（停止后才能修改 key）
</el-tag>
<span v-else>未运行</span>
</el-descriptions-item>
<el-descriptions-item label="更新时间">
{{ exchange.updated_at ? formatTime(exchange.updated_at, "MM-DD HH:mm") : "-" }}
</el-descriptions-item>
</el-descriptions>
<el-dialog v-model="exchangeDialogVisible" title="币安模拟盘 API key" width="560px">
<el-form :model="exchangeForm" label-width="100px">
web/src/pages/skills/index.vue
+2 -2
View File
@@ -145,9 +145,9 @@ loadTree()
<div class="min-h-0 flex flex-1 gap-3">
<textarea
v-model="content" placeholder="用 Markdown 写下投资经验、判断流程或输出规范"
class="box-border flex-1 resize-none border border-ap-line border-solid bg-ap-sunken p-3 text-sm text-ap-text leading-6 font-mono outline-none focus:border-ap-brand"
class="box-border flex-1 resize-none border rounded border-solid border-[var(--el-border-color)] p-3 text-sm leading-6 font-mono outline-none focus:border-[var(--el-color-primary)]"
/>
<el-scrollbar class="flex-1 border border-ap-line border-solid bg-ap-panel-low">
<el-scrollbar class="flex-1 border rounded border-solid border-[var(--el-border-color-lighter)]">
<!-- markdown-it 已关闭 html，内容中的标签按文本显示 -->
<div class="markdown-body p-3" v-html="preview" />
</el-scrollbar>
web/src/pages/trading/components/AnalysisDrawer.vue
+22 -69
View File
@@ -1,9 +1,8 @@
<script lang="ts" setup>
import type { AnalysisDetail } from "@/apis/trading"
import { Cpu } from "@element-plus/icons-vue"
import { getAnalysis } from "@/apis/trading"
import { renderMarkdown } from "@/utils/markdown"
import { formatDuration, formatTime } from "@/utils/text"
import { formatTime } from "@/utils/text"
const props = defineProps<{ analysisId: number | null }>()
const visible = defineModel<boolean>({ required: true })
@@ -37,78 +36,32 @@ function pretty(raw: string | undefined) {
</script>
<template>
<el-drawer v-model="visible" size="55%">
<template #header>
<div class="min-w-0 flex items-center gap-2">
<el-icon class="text-ap-brand" :size="18">
<Cpu />
</el-icon>
<div class="min-w-0 flex flex-col">
<span class="font-head text-sm text-ap-text font-bold">{{ detail ? `分析 #${detail.id} · ${detail.symbol}` : "分析" }}</span>
<span v-if="detail" class="truncate text-[10px] text-ap-muted">
{{ formatTime(detail.started_at) }} – {{ formatTime(detail.finished_at) }} · {{ detail.reasons.join("；") }}{{ detail.dry_run ? " · 试运行" : "" }}
</span>
</div>
</div>
</template>
<el-drawer v-model="visible" :title="detail ? `分析 #${detail.id} · ${detail.symbol}` : '分析'" size="55%">
<div v-if="detail" class="flex flex-col gap-3 text-sm">
<div class="grid grid-cols-4 gap-2 border border-ap-line border-solid bg-ap-sunken p-3 text-xs">
<div>
<div class="text-[10px] text-ap-muted">
分析 ID
</div>
<b>#{{ detail.id }}</b>
</div>
<div>
<div class="text-[10px] text-ap-muted">
耗时
</div>
<b class="text-ap-brand">{{ detail.finished_at ? formatDuration(detail.started_at, detail.finished_at) : "-" }}</b>
</div>
<div>
<div class="text-[10px] text-ap-muted">
token 输入 / 输出
</div>
<b>{{ detail.usage?.input_tokens.toLocaleString() ?? "-" }} / {{ detail.usage?.output_tokens.toLocaleString() ?? "-" }}</b>
</div>
<div>
<div class="text-[10px] text-ap-muted">
模型 / 思考强度
</div>
<b class="text-ap-up">{{ detail.model ?? "-" }}{{ detail.reasoning_effort ? ` / ${detail.reasoning_effort}` : "" }}</b>
</div>
<div class="text-xs text-[var(--el-text-color-secondary)]">
{{ formatTime(detail.started_at) }} – {{ formatTime(detail.finished_at) }} · {{ detail.reasons.join("；") }}
· {{ detail.model }}{{ detail.reasoning_effort ? ` / ${detail.reasoning_effort}` : "" }}
· {{ detail.usage?.input_tokens.toLocaleString() }} / {{ detail.usage?.output_tokens.toLocaleString() }} token
{{ detail.dry_run ? "· 试运行" : "" }}
</div>
<el-alert v-if="detail.error" type="error" :closable="false" :title="detail.error" />
<el-card v-if="detail.text" shadow="never" class="bg-ap-panel-low!">
<template #header>
模型分析
</template>
<!-- markdown-it 已关闭 html，模型输出中的标签按文本显示 -->
<div class="markdown-body" v-html="renderMarkdown(detail.text)" />
</el-card>
<el-card shadow="never" class="bg-ap-panel-low!" body-class="p-0!">
<template #header>
输入数据与工具调用 ({{ toolResults.size }})
</template>
<el-collapse>
<template v-for="(m, i) in detail.transcript ?? []" :key="i">
<el-collapse-item v-if="m.role === 'user'" :name="`u${i}`" :title="i === 0 ? '发给模型的数据（账户、持仓、预取行情）' : '程序提示'">
<pre class="m-0 max-h-120 overflow-auto whitespace-pre-wrap break-all text-xs">{{ m.text }}</pre>
<!-- markdown-it 已关闭 html，模型输出中的标签按文本显示 -->
<div v-if="detail.text" class="markdown-body" v-html="renderMarkdown(detail.text)" />
<el-collapse>
<template v-for="(m, i) in detail.transcript ?? []" :key="i">
<el-collapse-item v-if="m.role === 'user'" :name="`u${i}`" :title="i === 0 ? '发给模型的数据（账户、持仓、预取行情）' : '程序提示'">
<pre class="m-0 max-h-120 overflow-auto whitespace-pre-wrap break-all text-xs">{{ m.text }}</pre>
</el-collapse-item>
<template v-else-if="m.role === 'assistant'">
<el-collapse-item v-for="call in m.tool_calls" :key="call.id" :name="call.id">
<template #title>
<span class="inline-block max-w-[90%] truncate text-xs font-mono">{{ call.name }} {{ JSON.stringify(call.arguments) }}</span>
</template>
<pre class="m-0 max-h-120 overflow-auto whitespace-pre-wrap break-all text-xs">{{ pretty(toolResults.get(call.id)) }}</pre>
</el-collapse-item>
<template v-else-if="m.role === 'assistant'">
<el-collapse-item v-for="call in m.tool_calls" :key="call.id" :name="call.id">
<template #title>
<span class="text-xs">
<b class="text-ap-up">{{ call.name }}</b>
<span class="ml-2 text-ap-muted">{{ JSON.stringify(call.arguments) }}</span>
</span>
</template>
<pre class="m-0 max-h-120 overflow-auto whitespace-pre-wrap break-all text-xs">{{ pretty(toolResults.get(call.id)) }}</pre>
</el-collapse-item>
</template>
</template>
</el-collapse>
</el-card>
</template>
</el-collapse>
</div>
<div v-else v-loading="true" class="h-40" />
</el-drawer>
web/src/pages/trading/components/PlanCard.vue
+57 -139
View File
@@ -1,8 +1,7 @@
<script lang="ts" setup>
import type { Analysis, OrderRow, PlanCondition, TradingSymbol } from "@/apis/trading"
import { Clock, Cpu, Refresh, TopRight, Warning } from "@element-plus/icons-vue"
import { CLOSE_REASON_LABELS, PLAN_STATUS_LABELS, TAKE_PROFIT_STEPS } from "@/apis/trading"
import { formatDuration, formatTime } from "@/utils/text"
import { formatTime } from "@/utils/text"
/** analysis：执行中的计划，没有时为最近一次分析；latest：最近一次分析（与 analysis 不同时另行提示） */
const props = defineProps<{ symbol: TradingSymbol, analysis: Analysis | null, latest: Analysis | null, orders: OrderRow[], requesting: boolean }>()
@@ -21,7 +20,6 @@ const decision = computed(() => props.analysis?.decision ?? null)
const sizing = computed(() => props.analysis?.sizing ?? null)
const busy = computed(() => props.requesting || props.symbol.analyzing || !!props.symbol.analysis_requested_at)
const elapsed = computed(() => props.analysis ? Math.max(0, Math.round((now.value - new Date(props.analysis.started_at).getTime()) / 1000)) : 0)
const duration = computed(() => props.analysis?.finished_at ? formatDuration(props.analysis.started_at, props.analysis.finished_at) : "")
function filled(purpose: "entry" | "tp", leg: number) {
const total = props.orders.filter(o => o.purpose === purpose && o.leg === leg).reduce((sum, o) => sum + Number(o.filled_qty), 0)
@@ -57,64 +55,55 @@ const ladder = computed(() => sizing.value?.entry && entryRow.value
</script>
<template>
<div class="border border-ap-line border-solid bg-ap-panel-low p-4">
<div class="mb-3 flex items-center gap-2 border-b border-b-ap-line border-b-solid pb-2.5">
<el-icon class="text-ap-brand" :size="18">
<Cpu />
</el-icon>
<span class="font-head text-base font-bold">{{ symbol.symbol }}</span>
<span class="text-xs text-ap-muted">短线做波动（区间内挂限价单，最长持仓 4 小时）</span>
<div class="border border-[var(--el-border-color)] rounded border-solid p-3">
<div class="mb-2 flex items-center gap-2">
<span class="font-bold">{{ symbol.symbol }}</span>
<span class="text-xs text-[var(--el-text-color-secondary)]">短线做波动（区间内挂限价单，最长持仓 4 小时）</span>
<div class="flex-1" />
<el-link v-if="analysis && analysis.status !== 'running'" type="primary" @click="emit('detail', analysis.id)">
<el-button v-if="analysis && analysis.status !== 'running'" link type="primary" @click="emit('detail', analysis.id)">
查看完整分析
<el-icon class="ml-0.5">
<TopRight />
</el-icon>
</el-link>
<el-button type="primary" :loading="busy" @click="emit('analyze')">
</el-button>
<el-button size="small" type="primary" :loading="busy" @click="emit('analyze')">
{{ busy ? "分析中" : "立即分析" }}
</el-button>
</div>
<div v-if="!analysis" class="state-strip">
<div v-if="!analysis" class="text-sm text-[var(--el-text-color-secondary)]">
还没有分析。引擎停止时点「立即分析」为试运行：计划只记录，不下单。
</div>
<div v-else-if="analysis.status === 'running'" class="state-strip">
<i class="mr-2.5 inline-block h-1.5 w-1.5 animate-ping bg-ap-brand" />模型分析中，已用 {{ elapsed }} 秒（通常 1–3 分钟）…
<div v-else-if="analysis.status === 'running'" class="text-sm text-[var(--el-text-color-secondary)]">
模型分析中，已用 {{ elapsed }} 秒（通常 1–3 分钟）…
</div>
<el-alert v-else-if="analysis.status === 'failed'" type="error" :closable="false" show-icon>
{{ formatTime(analysis.started_at) }} 分析失败：{{ analysis.error }}
</el-alert>
<div v-else-if="decision" class="flex flex-col gap-3">
<div v-else-if="decision" class="flex flex-col gap-2 text-sm">
<div class="flex flex-wrap items-center gap-2">
<el-tag v-if="analysis.dry_run" type="info">
<el-tag v-if="analysis.dry_run" type="info" size="small">
试运行
</el-tag>
<el-tag v-if="analysis.plan_status" type="success">
<el-tag v-if="analysis.plan_status" type="success" effect="dark" size="small">
{{ PLAN_STATUS_LABELS[analysis.plan_status] }}
</el-tag>
<el-tag type="primary">
<el-tag size="small">
{{ ACTION_LABELS[decision.action] }}
</el-tag>
<el-tag v-if="decision.direction" :type="decision.direction === 'long' ? 'success' : 'danger'">
<el-tag v-if="decision.direction" :type="decision.direction === 'long' ? 'success' : 'danger'" size="small">
{{ decision.direction === "long" ? "做多" : "做空" }}
</el-tag>
<el-tag v-if="decision.confidence" type="warning">
<el-tag v-if="decision.confidence" type="warning" size="small">
置信度{{ CONFIDENCE_LABELS[decision.confidence] }}
</el-tag>
<span class="text-[11px] text-ap-muted">
<span class="text-xs text-[var(--el-text-color-secondary)]">
{{ formatTime(analysis.started_at) }} · {{ analysis.reasons.join("；") }} · {{ analysis.model }}{{ analysis.reasoning_effort ? ` / ${analysis.reasoning_effort}` : "" }}
{{ duration ? `· 耗时 ${duration}` : "" }}
· {{ analysis.usage?.input_tokens.toLocaleString() }} / {{ analysis.usage?.output_tokens.toLocaleString() }} token
</span>
</div>
<div class="border-l-4 border-l-ap-brand border-l-solid bg-ap-panel px-3 py-2.5 font-sans text-[15px] font-bold">
<div class="font-bold">
{{ decision.summary }}
</div>
<div v-if="latest && latest.id !== analysis.id" class="text-xs text-ap-muted">
<div v-if="latest && latest.id !== analysis.id" class="text-xs text-[var(--el-text-color-secondary)]">
最近一次分析 #{{ latest.id }}（{{ formatTime(latest.started_at) }}）：
<template v-if="latest.status === 'done'">
{{ latest.decision?.summary }}
@@ -122,106 +111,56 @@ const ladder = computed(() => sizing.value?.entry && entryRow.value
<template v-else>
{{ latest.status === "running" ? "分析中" : `失败：${latest.error}` }}
</template>
<el-link type="primary" class="ml-1 text-xs!" @click="emit('detail', latest.id)">
<el-link type="primary" underline="never" class="ml-1 text-xs!" @click="emit('detail', latest.id)">
查看
</el-link>
</div>
<div v-if="analysis.valid_until || analysis.first_fill_at || analysis.close_deadline" class="flex flex-wrap items-center gap-x-5 gap-y-1 border border-ap-line border-solid bg-ap-sunken px-3 py-1.5 text-xs">
<el-icon class="text-ap-up" :size="15">
<Clock />
</el-icon>
<span v-if="analysis.plan_status === 'pending' && analysis.valid_until">
限价单有效至 {{ formatTime(analysis.valid_until, "MM-DD HH:mm") }}<b class="ml-1 text-ap-brand">（剩 {{ countdown(analysis.valid_until) }}）</b>
</span>
<span v-if="analysis.first_fill_at">入场 {{ formatTime(analysis.first_fill_at, "MM-DD HH:mm") }}</span>
<span v-if="analysis.close_deadline">
最晚平仓 {{ formatTime(analysis.close_deadline, "MM-DD HH:mm") }}<b class="ml-1 text-ap-brand">（剩 {{ countdown(analysis.close_deadline) }}）</b>
</span>
<div v-if="analysis.valid_until || analysis.close_deadline" class="flex flex-wrap gap-x-6">
<span v-if="analysis.plan_status === 'pending' && analysis.valid_until"><span class="label">限价单有效至</span>{{ formatTime(analysis.valid_until, "MM-DD HH:mm") }}（剩 {{ countdown(analysis.valid_until) }}）</span>
<span v-if="analysis.first_fill_at"><span class="label">入场</span>{{ formatTime(analysis.first_fill_at, "MM-DD HH:mm") }}</span>
<span v-if="analysis.close_deadline"><span class="label">最晚平仓</span>{{ formatTime(analysis.close_deadline, "MM-DD HH:mm") }}（剩 {{ countdown(analysis.close_deadline) }}）</span>
</div>
<div v-if="analysis.result" class="text-sm">
<span class="label">结果</span>{{ CLOSE_REASON_LABELS[analysis.close_reason ?? ""] ?? analysis.close_reason }}，净盈亏
<b :class="Number(analysis.result.net) >= 0 ? 'text-ap-up' : 'text-ap-down'">{{ analysis.result.net }} USDT</b>（手续费 {{ analysis.result.commission }}）
</div>
<div class="font-sans text-[13px] leading-relaxed">
<span class="label">为什么</span>{{ decision.reasons }}
<div v-if="analysis.result">
<span class="label">结果</span>{{ CLOSE_REASON_LABELS[analysis.close_reason ?? ""] ?? analysis.close_reason }}，净盈亏 {{ analysis.result.net }} USDT（手续费 {{ analysis.result.commission }}）
</div>
<div><span class="label">为什么</span>{{ decision.reasons }}</div>
<template v-if="decision.action === 'plan' && decision.setup && sizing?.entry">
<div class="grid grid-cols-2 border border-ap-line border-solid bg-ap-panel-high text-xs">
<div class="flex flex-col gap-1.5 p-3">
<div class="param">
<span>{{ long ? "支撑区" : "压力区" }}</span>
<b :class="long ? 'text-ap-up' : 'text-ap-down'">{{ sizing.setup.zone_low }} – {{ sizing.setup.zone_high }}</b>
</div>
<div class="font-sans text-[11px] text-ap-muted">
{{ decision.setup.basis }}
</div>
<div class="param">
<span>限价{{ long ? "做多" : "做空" }}</span>
<b>{{ sizing.entry.price }} × {{ sizing.entry.quantity }}</b>
</div>
<div class="text-[11px] text-ap-muted">
已成交 {{ filled("entry", 0) }}{{ entryRow?.avg_price ? `，均价 ${entryRow.avg_price}` : "" }}；名义 {{ sizing.entry.notional }} USDT，{{ sizing.entry.leverage }} 倍交易资金
</div>
<div class="grid grid-cols-2 gap-x-6 gap-y-1">
<div>
<span class="label">{{ long ? "支撑区" : "压力区" }}</span>{{ sizing.setup.zone_low }} – {{ sizing.setup.zone_high }} · {{ decision.setup.basis }}
</div>
<div class="flex flex-col gap-1.5 border-l border-l-ap-line border-l-solid p-3">
<div class="param">
<span>止损</span>
<b class="text-ap-down">{{ currentStop ?? sizing.entry.stop }}</b>
</div>
<div class="param">
<span>初始止损 / 距挂单价</span>
<span>{{ sizing.entry.stop }} / {{ sizing.entry.stop_pct }}%</span>
</div>
<div class="param">
<span>止损亏损</span>
<b class="text-ap-down">{{ sizing.entry.risk_at_stop }} USDT（交易资金的 {{ sizing.entry.risk_pct }}%）</b>
</div>
<div class="text-[11px] text-ap-muted">
区间远端外 0.5×ATR(5m)、距挂单价至少 1×ATR(5m)；止盈 1 后移到保本价{{ sizing.entry.capped_by_leverage ? "；受 3 倍上限限制" : "" }}
</div>
<div>
<span class="label">限价{{ long ? "做多" : "做空" }}</span>{{ sizing.entry.price }} × {{ sizing.entry.quantity }}，已成交 {{ filled("entry", 0) }}{{ entryRow?.avg_price ? `，均价 ${entryRow.avg_price}` : "" }}
（名义 {{ sizing.entry.notional }} USDT，{{ sizing.entry.leverage }} 倍交易资金）
</div>
<div>
<span class="label">止损</span>{{ currentStop ?? sizing.entry.stop }}（初始 {{ sizing.entry.stop }}，距挂单价 {{ sizing.entry.stop_pct }}%；区间远端外 0.5×ATR(5m)、距挂单价至少 1×ATR(5m)，止盈 1 后移到保本价）
</div>
<div>
<span class="label">止损亏损</span>{{ sizing.entry.risk_at_stop }} USDT（交易资金的 {{ sizing.entry.risk_pct }}%）{{ sizing.entry.capped_by_leverage ? "，受 3 倍上限限制" : "" }}
</div>
</div>
<div v-if="ladder.length">
<div class="panel-title mb-1.5">
分批止盈
</div>
<el-table :data="ladder" border size="small">
<el-table-column label="分批止盈" min-width="90">
<template #default="{ row }">
<b class="text-ap-up">止盈 {{ row.leg + 1 }}</b>
</template>
</el-table-column>
<el-table-column prop="move" label="距成交均价" min-width="90" align="right" />
<el-table-column prop="ratio" label="平仓比例" min-width="80" align="right" />
<el-table-column label="价格" min-width="100" align="right">
<template #default="{ row }">
<b>{{ row.price }}</b>
</template>
</el-table-column>
<el-table-column prop="filled" label="已成交" min-width="80" align="center" />
</el-table>
</div>
<el-table v-if="ladder.length" :data="ladder" border size="small">
<el-table-column label="分批止盈" min-width="90">
<template #default="{ row }">
止盈 {{ row.leg + 1 }}
</template>
</el-table-column>
<el-table-column prop="move" label="距成交均价" min-width="90" />
<el-table-column prop="ratio" label="平仓比例" min-width="80" />
<el-table-column prop="price" label="价格" min-width="100" />
<el-table-column prop="filled" label="已成交" min-width="80" />
</el-table>
</template>
<div class="flex flex-col gap-1.5 border border-ap-line border-solid bg-ap-sunken p-2.5 font-sans text-xs">
<div v-for="(c, i) in decision.reevaluate" :key="i" class="flex items-start gap-1.5 text-ap-brand">
<el-icon class="mt-0.5 shrink-0">
<Refresh />
</el-icon>
<span><b>重新判断：</b>{{ condition(c) }}：{{ c.basis }}</span>
</div>
<div class="flex items-start gap-1.5 text-ap-down" :class="{ 'border-t border-t-ap-line border-t-solid pt-1.5': decision.reevaluate.length }">
<el-icon class="mt-0.5 shrink-0">
<Warning />
</el-icon>
<span><b>风险：</b>{{ decision.risks }}</span>
<div v-if="decision.reevaluate.length">
<span class="label">重新判断</span>
<div v-for="(c, i) in decision.reevaluate" :key="i" class="ml-2">
· {{ condition(c) }}：{{ c.basis }}
</div>
</div>
<div><span class="label">风险</span>{{ decision.risks }}</div>
</div>
</div>
</template>
@@ -229,28 +168,7 @@ const ladder = computed(() => sizing.value?.entry && entryRow.value
<style scoped>
.label {
margin-right: 8px;
color: var(--ap-muted);
font-family: var(--ap-font-mono);
color: var(--el-text-color-secondary);
font-size: 12px;
}
.state-strip {
display: flex;
align-items: center;
padding: 8px 12px;
border: 1px solid var(--ap-line);
background: var(--ap-panel-highest);
color: var(--ap-muted);
font-size: 12px;
}
.param {
display: flex;
justify-content: space-between;
gap: 12px;
padding-bottom: 4px;
border-bottom: 1px solid color-mix(in srgb, var(--ap-line) 60%, transparent);
}
.param > span:first-child {
color: var(--ap-muted);
font-size: 11px;
}
</style>
web/src/pages/trading/index.vue
+203 -284
View File
@@ -1,7 +1,6 @@
<script lang="ts" setup>
import type { Effort, Provider } from "@/apis/settings"
import type { Analysis, OrderRow, SnapshotPosition, TradingEvent, TradingStatus, TradingSymbol } from "@/apis/trading"
import { DataAnalysis } from "@element-plus/icons-vue"
import { EFFORTS, listProviders } from "@/apis/settings"
import { deleteSymbol, getStatus, getSymbolPlan, isOwnOrder, listAnalyses, listEvents, listSymbols, patchConfig, requestAnalysis, startTrading, stopTrading } from "@/apis/trading"
import { usePersisted } from "@/utils/storage"
@@ -12,7 +11,7 @@ import PlanCard from "./components/PlanCard.vue"
const STATUS_REFRESH_MS = 3000
const EVENTS_PAGE = 50
const LEVEL_DOTS = { info: "bg-ap-faint", warn: "bg-ap-warn", error: "bg-ap-down" } as const
const LEVEL_TYPES = { info: "primary", warn: "warning", error: "danger" } as const
const status = ref<TradingStatus>()
const symbols = ref<TradingSymbol[]>([])
@@ -53,33 +52,17 @@ const symbolOrders = computed(() => {
].sort((a, b) => b.time - a.time)
})
/** 价格、数量：千分位，保留原有小数 */
function num(value: string) {
return Number(value).toLocaleString("en-US", { maximumFractionDigits: 8 })
return String(Number(value))
}
function money(value: string | undefined) {
return value === undefined ? "-" : Number(value).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}
function signedMoney(value: string | undefined) {
return value !== undefined && Number(value) > 0 ? `+${money(value)}` : money(value)
return value === undefined ? "-" : Number(value).toFixed(2)
}
function pnlClass(value: string) {
const n = Number(value)
return n > 0 ? "text-ap-up" : n < 0 ? "text-ap-down" : ""
}
const winRate = computed(() => {
const { trades, wins } = status.value!.today
return trades ? `${(wins / trades * 100).toFixed(1)}%` : "-"
})
/** 交易币种列表第二行：该币的持仓 */
function positionLine(symbol: string) {
const p = positions.value.find(x => x.symbol === symbol)
return p ? { text: `${p.leverage}x ${p.side === "LONG" ? "多" : "空"} · ${num(p.amount)}`, long: p.side === "LONG" } : null
return n > 0 ? "text-[var(--el-color-success)]" : n < 0 ? "text-[var(--el-color-danger)]" : ""
}
/** 持仓当前生效的止损、止盈触发价：取交易所上平仓方向的挂单 */
@@ -209,10 +192,10 @@ async function toggleRunning() {
async function editCapital() {
const { value } = await ElMessageBox.prompt(
`仓位按交易资金计算：单笔风险 1%（置信度低时 0.5%），所有仓位名义价值合计不超过 3 倍（逐仓 3 倍时保证金合计不超过交易资金）。不能超过账户权益 ${money(account.value?.margin_balance)} USDT；账户权益低于它时按权益计算。`,
`仓位按交易资金计算：单笔风险短线 1%、长线 2%，所有仓位名义价值合计不超过 3 倍（逐仓 3 倍时保证金合计不超过交易资金）。不能超过账户权益 ${money(account.value?.margin_balance)} USDT；账户权益低于它时按权益计算。`,
"设置交易资金（USDT）",
{
inputValue: status.value!.capital_usdt ? String(Number(status.value!.capital_usdt)) : "",
inputValue: status.value!.capital_usdt ? num(status.value!.capital_usdt) : "",
inputPattern: /^(?:[1-9]\d*|0)(?:\.\d{1,2})?$/,
inputErrorMessage: "请输入正数，最多两位小数",
confirmButtonText: "保存"
@@ -254,70 +237,67 @@ onBeforeUnmount(() => clearInterval(timer))
</script>
<template>
<div v-if="status" class="h-full flex flex-col gap-2">
<!-- 状态栏：引擎、启停、账户与今日统计、模型 -->
<div class="flex flex-col gap-2 border border-ap-line border-solid bg-ap-panel px-3 py-2.5">
<div class="flex flex-wrap items-center gap-2">
<el-tag :type="snapshot ? 'success' : 'info'">
<i class="mr-1.5 inline-block h-1.5 w-1.5 bg-current" :class="{ 'animate-pulse': snapshot }" />{{ snapshot ? "引擎在线" : "引擎离线" }}
<div v-if="status" class="h-full flex flex-col gap-3">
<!-- 顶部：引擎状态、启停、账户 -->
<div class="flex flex-wrap items-center gap-x-6 gap-y-2 border border-[var(--el-border-color)] rounded border-solid px-4 py-3">
<div class="flex items-center gap-2">
<el-tag v-if="snapshot" type="success" effect="dark">
引擎在线
</el-tag>
<el-tag v-else type="info" effect="dark">
引擎离线
</el-tag>
<el-tag :type="status.running ? 'success' : 'info'">
<i class="mr-1.5 inline-block h-1.5 w-1.5 bg-current" />{{ status.running ? "交易中" : "已停止" }}
{{ status.running ? "交易中" : "已停止" }}
</el-tag>
<el-button
size="small" :type="status.running ? 'danger' : 'primary'" :loading="toggling"
:type="status.running ? 'danger' : 'primary'" :loading="toggling"
:disabled="!status.running && (!status.configured || !status.capital_usdt)"
@click="toggleRunning"
>
{{ status.running ? "停止" : "开始行情交易" }}
</el-button>
<div class="flex-1" />
<span class="metric mr-2">
<span class="key">今日分析</span>{{ status.today.analyses }} / {{ status.today.limit }}
<span class="key ml-1.5">token</span>{{ status.today.input_tokens.toLocaleString() }} / {{ status.today.output_tokens.toLocaleString() }}
</span>
<el-select
:model-value="status.provider_id" class="w-64" clearable :value-on-clear="null" placeholder="跟随默认配置"
@update:model-value="changeProvider"
>
<template #prefix>
<span class="text-[11px] text-ap-muted">模型:</span>
</template>
<el-option v-for="p in providers" :key="p.id" :value="p.id" :label="`${p.name}（${p.model}）`" />
</el-select>
<el-select
:model-value="status.reasoning_effort" class="w-36" clearable :value-on-clear="null" placeholder="跟随配置"
@update:model-value="changeEffort"
>
<template #prefix>
<span class="text-[11px] text-ap-muted">思考:</span>
</template>
<el-option v-for="e in EFFORTS" :key="e" :value="e" :label="e" />
</el-select>
</div>
<div class="flex flex-wrap items-center gap-y-1">
<span class="metric">
<span class="key">交易资金</span>
<template v-if="status.capital_usdt">
<b>{{ money(status.capital_usdt) }}</b><span class="unit">USDT</span>
<span v-if="status.effective_capital && Number(status.effective_capital) < Number(status.capital_usdt)" class="ml-1 text-ap-warn">
（权益不足，按 {{ money(status.effective_capital) }}）
</span>
</template>
<b v-else class="text-ap-down">未设置</b>
<el-link type="primary" class="ml-1.5 text-[11px]!" @click="editCapital">设置</el-link>
</span>
<span class="metric"><span class="key">账户权益</span><b>{{ money(account?.margin_balance) }}</b><span class="unit">USDT</span></span>
<span class="metric"><span class="key">可用</span><b>{{ money(account?.available_balance) }}</b><span class="unit">USDT</span></span>
<span class="metric">
<span class="key">未实现盈亏</span><b :class="pnlClass(account?.unrealized_pnl ?? '0')">{{ signedMoney(account?.unrealized_pnl) }}</b>
</span>
<span class="metric">
<span class="key">今日收益</span><b :class="pnlClass(status.today.net_pnl)">{{ signedMoney(status.today.net_pnl) }}</b><span class="unit">USDT</span>
</span>
<span class="metric"><span class="key">今日交易</span><b>{{ status.today.trades }}</b><span class="unit">笔</span></span>
<span class="metric"><span class="key">胜率</span><b class="text-ap-brand">{{ winRate }}</b></span>
<div class="stat">
<span>交易资金</span>
<template v-if="status.capital_usdt">
{{ money(status.capital_usdt) }} USDT
<span v-if="status.effective_capital && Number(status.effective_capital) < Number(status.capital_usdt)" class="text-[var(--el-color-warning)]!">
（权益不足，按 {{ money(status.effective_capital) }}）
</span>
</template>
<b v-else class="text-[var(--el-color-danger)]">未设置</b>
<el-link type="primary" underline="never" class="ml-1" @click="editCapital">
设置
</el-link>
</div>
<div class="stat">
<span>账户权益</span>{{ money(account?.margin_balance) }} USDT
</div>
<div class="stat">
<span>可用</span>{{ money(account?.available_balance) }} USDT
</div>
<div class="stat">
<span>未实现盈亏</span>
<b :class="pnlClass(account?.unrealized_pnl ?? '0')">{{ money(account?.unrealized_pnl) }}</b>
</div>
<div class="stat">
<span>今日分析</span>{{ status.today.analyses }} / {{ status.today.limit }}
<span class="ml-1">token</span>{{ status.today.input_tokens.toLocaleString() }} / {{ status.today.output_tokens.toLocaleString() }}
</div>
<div class="flex-1" />
<el-select
:model-value="status.provider_id" class="w-56" clearable :value-on-clear="null" placeholder="模型：跟随默认配置"
@update:model-value="changeProvider"
>
<el-option v-for="p in providers" :key="p.id" :value="p.id" :label="`${p.name}（${p.model}）`" />
</el-select>
<el-select
:model-value="status.reasoning_effort" class="w-40" clearable :value-on-clear="null" placeholder="思考强度：跟随配置"
@update:model-value="changeEffort"
>
<el-option v-for="e in EFFORTS" :key="e" :value="e" :label="e" />
</el-select>
</div>
<el-alert v-if="!status.configured" type="warning" :closable="false" show-icon>
@@ -331,195 +311,165 @@ onBeforeUnmount(() => clearInterval(timer))
</el-alert>
<!-- 持仓 -->
<el-card shadow="never" body-class="p-0!">
<template #header>
<i class="inline-block h-1.5 w-1.5" :class="positions.length ? 'bg-ap-up' : 'bg-ap-faint'" />
<span>持仓 ({{ positions.length }})</span>
</template>
<el-table :data="positions" size="small" empty-text="没有持仓">
<el-table-column label="币种" min-width="130">
<template #default="{ row }">
<span class="text-ap-brand font-bold">{{ row.symbol }}</span>
<el-tag size="small" type="info" class="ml-1.5">
永续
</el-tag>
</template>
</el-table-column>
<el-table-column label="方向" width="70">
<template #default="{ row }">
<el-tag :type="row.side === 'LONG' ? 'success' : 'danger'" size="small">
{{ row.side === "LONG" ? "多" : "空" }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="数量" min-width="90" align="right">
<template #default="{ row }">
{{ num(row.amount) }}
</template>
</el-table-column>
<el-table-column label="开仓价" min-width="100" align="right">
<template #default="{ row }">
{{ num(row.entry_price) }}
</template>
</el-table-column>
<el-table-column label="保本价" min-width="100" align="right">
<template #default="{ row }">
<span class="text-ap-muted">{{ money(row.break_even_price) }}</span>
</template>
</el-table-column>
<el-table-column label="标记价" min-width="100" align="right">
<template #default="{ row }">
<b>{{ money(row.mark_price) }}</b>
</template>
</el-table-column>
<el-table-column label="未实现盈亏" min-width="100" align="right">
<template #default="{ row }">
<b :class="pnlClass(row.unrealized_pnl)">{{ signedMoney(row.unrealized_pnl) }}</b>
</template>
</el-table-column>
<el-table-column label="强平价" min-width="100" align="right">
<template #default="{ row }">
{{ Number(row.liquidation_price) ? money(row.liquidation_price) : "-" }}
</template>
</el-table-column>
<el-table-column label="杠杆" width="100" align="center">
<template #default="{ row }">
<el-tag size="small" type="info">
{{ row.leverage }}x {{ row.margin_type === "ISOLATED" ? "逐仓" : "全仓" }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="止损 / 止盈" min-width="160" align="center">
<template #default="{ row }">
<span class="text-ap-down">{{ exitPrices(row as SnapshotPosition).stop }}</span>
/
<span class="text-ap-up">{{ exitPrices(row as SnapshotPosition).target }}</span>
</template>
</el-table-column>
<el-table-column label="平仓倒计时" width="100" align="center">
<template #default="{ row }">
<b class="text-ap-brand">{{ closeCountdown(row.symbol) }}</b>
</template>
</el-table-column>
</el-table>
</el-card>
<div class="min-h-0 flex flex-1 gap-2">
<!-- 交易币种 -->
<el-card shadow="never" class="w-60 flex shrink-0 flex-col" body-class="p-0! min-h-0 flex-1">
<template #header>
<div class="w-full flex items-center justify-between">
<span>交易币种 ({{ symbols.length }})</span>
<el-button size="small" type="primary" @click="addVisible = true">
新增
</el-button>
</div>
<el-table :data="positions" border size="small" empty-text="没有持仓">
<el-table-column prop="symbol" label="币种" min-width="110" />
<el-table-column label="方向" width="70">
<template #default="{ row }">
<el-tag :type="row.side === 'LONG' ? 'success' : 'danger'" size="small">
{{ row.side === "LONG" ? "多" : "空" }}
</el-tag>
</template>
<el-scrollbar>
</el-table-column>
<el-table-column label="数量" min-width="90">
<template #default="{ row }">
{{ num(row.amount) }}
</template>
</el-table-column>
<el-table-column label="开仓价" min-width="100">
<template #default="{ row }">
{{ num(row.entry_price) }}
</template>
</el-table-column>
<el-table-column label="保本价" min-width="100">
<template #default="{ row }">
{{ Number(row.break_even_price).toFixed(2) }}
</template>
</el-table-column>
<el-table-column label="标记价" min-width="100">
<template #default="{ row }">
{{ Number(row.mark_price).toFixed(2) }}
</template>
</el-table-column>
<el-table-column label="未实现盈亏" min-width="100">
<template #default="{ row }">
<span :class="pnlClass(row.unrealized_pnl)">{{ money(row.unrealized_pnl) }}</span>
</template>
</el-table-column>
<el-table-column label="强平价" min-width="100">
<template #default="{ row }">
{{ Number(row.liquidation_price) ? Number(row.liquidation_price).toFixed(2) : "-" }}
</template>
</el-table-column>
<el-table-column label="杠杆" width="110">
<template #default="{ row }">
{{ row.leverage }}x {{ row.margin_type === "ISOLATED" ? "逐仓" : "全仓" }}
</template>
</el-table-column>
<el-table-column label="止损 / 止盈" min-width="140">
<template #default="{ row }">
{{ exitPrices(row as SnapshotPosition).stop }} / {{ exitPrices(row as SnapshotPosition).target }}
</template>
</el-table-column>
<el-table-column label="平仓倒计时" width="100">
<template #default="{ row }">
{{ closeCountdown(row.symbol) }}
</template>
</el-table-column>
</el-table>
<div class="min-h-0 flex flex-1 gap-3">
<!-- 侧边栏：交易币种 -->
<div class="w-60 flex flex-col border border-[var(--el-border-color)] rounded border-solid">
<div class="flex items-center justify-between border-b border-b-[var(--el-border-color)] border-b-solid px-3 py-2">
<span class="font-bold">交易币种</span>
<el-button size="small" type="primary" @click="addVisible = true">
新增
</el-button>
</div>
<el-scrollbar class="flex-1">
<div
v-for="s in symbols" :key="s.symbol" class="symbol-item" :class="{ active: s.symbol === selected }"
v-for="s in symbols" :key="s.symbol"
class="cursor-pointer border-b border-b-[var(--el-border-color-lighter)] border-b-solid px-3 py-2"
:class="s.symbol === selected ? 'bg-[var(--el-color-primary-light-9)]' : ''"
@click="selected = s.symbol"
>
<div class="flex items-center justify-between">
<span class="text-sm font-bold">{{ s.symbol }}</span>
<span class="font-bold">{{ s.symbol }}</span>
<el-tag :type="symbolState(s).type" size="small">
{{ symbolState(s).label }}
</el-tag>
</div>
<div class="mt-1 flex items-center justify-between text-[11px]">
<span v-if="positionLine(s.symbol)" class="font-semibold" :class="positionLine(s.symbol)!.long ? 'text-ap-up' : 'text-ap-down'">
{{ positionLine(s.symbol)!.text }}
</span>
<span v-else />
<el-link type="danger" class="text-[11px]!" @click.stop="remove(s)">
<div class="mt-1 flex justify-end text-xs">
<el-link type="danger" underline="never" class="text-xs!" @click.stop="remove(s)">
删除
</el-link>
</div>
</div>
<el-empty v-if="!symbols.length" description="还没有交易币种" :image-size="60" />
</el-scrollbar>
</el-card>
</div>
<!-- 当前币种：计划、挂单、时间线 -->
<el-card shadow="never" class="min-w-0 flex flex-1 flex-col" body-class="p-0! min-h-0 flex-1">
<template #header>
<el-icon class="text-ap-brand">
<DataAnalysis />
</el-icon>
<span>{{ current ? `${current.symbol} · 交易计划` : "交易计划" }}</span>
</template>
<el-scrollbar>
<div class="flex flex-col gap-3 p-3">
<PlanCard
v-if="current" :symbol="current" :analysis="livePlan ?? latestAnalysis" :latest="latestAnalysis" :orders="planOrders"
:requesting="requesting"
@analyze="analyze" @detail="openAnalysis"
/>
<!-- 主区域：当前计划、挂单、时间线 -->
<el-scrollbar class="flex-1">
<div class="flex flex-col gap-3 pr-2">
<PlanCard
v-if="current" :symbol="current" :analysis="livePlan ?? latestAnalysis" :latest="latestAnalysis" :orders="planOrders"
:requesting="requesting"
@analyze="analyze" @detail="openAnalysis"
/>
<el-card v-if="current" shadow="never" class="sub-card" body-class="p-0!">
<template #header>
当前挂单 ({{ symbolOrders.length }})
</template>
<el-table :data="symbolOrders" size="small" empty-text="没有挂单">
<el-table-column label="类型" min-width="150">
<template #default="{ row }">
{{ row.type }}
<el-tag v-if="row.conditional" size="small" type="info" class="ml-1">
条件单
</el-tag>
</template>
</el-table-column>
<el-table-column label="方向" width="110">
<template #default="{ row }">
<b :class="row.side === 'BUY' ? 'text-ap-up' : 'text-ap-down'">{{ row.side === "BUY" ? "买" : "卖" }}</b>{{ row.reduce_only ? "（只减仓）" : "" }}
</template>
</el-table-column>
<el-table-column prop="priceText" label="价格 / 触发" min-width="130" align="right" />
<el-table-column label="数量" min-width="100" align="right">
<template #default="{ row }">
{{ row.quantity === "全部持仓" ? row.quantity : num(row.quantity) }}
</template>
</el-table-column>
<el-table-column label="来源" width="80">
<template #default="{ row }">
<span class="text-ap-muted">{{ isOwnOrder(row.client_id) ? "本程序" : "手动" }}</span>
</template>
</el-table-column>
<el-table-column label="时间" width="130" align="center">
<template #default="{ row }">
<span class="text-ap-muted">{{ formatTime(new Date(row.time).toISOString()) }}</span>
</template>
</el-table-column>
</el-table>
</el-card>
<el-card shadow="never" class="sub-card">
<template #header>
时间线
</template>
<div v-if="events.length" class="ml-1.5 border-l border-l-ap-line border-l-solid">
<div v-for="e in events" :key="e.id" class="relative pb-3 pl-5 last:pb-1">
<i class="absolute left-[-6px] top-1 h-2.5 w-2.5 border-2 border-ap-panel-low border-solid" :class="LEVEL_DOTS[e.level]" />
<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
<span class="text-ap-brand font-bold">{{ formatTime(e.created_at) }}</span>
<el-tag size="small" type="info">
{{ e.symbol ?? "账户" }}
</el-tag>
<span :class="e.level === 'error' ? 'text-ap-down' : ''">{{ e.message }}</span>
<el-link v-if="e.analysis_id && e.kind !== 'analysis_started'" type="primary" @click="openAnalysis(e.analysis_id)">
查看分析
</el-link>
</div>
</div>
</div>
<el-empty v-else description="还没有事件" :image-size="60" />
<el-button v-if="events.length && !eventsExhausted" link type="primary" class="mt-1" @click="loadMoreEvents">
加载更早的事件
</el-button>
</el-card>
<div v-if="current">
<div class="mb-2 font-bold">
当前挂单
</div>
<el-table :data="symbolOrders" border size="small" empty-text="没有挂单">
<el-table-column label="类型" min-width="150">
<template #default="{ row }">
{{ row.type }}
<el-tag v-if="row.conditional" size="small" class="ml-1">
条件单
</el-tag>
</template>
</el-table-column>
<el-table-column label="方向" width="110">
<template #default="{ row }">
{{ row.side === "BUY" ? "买" : "卖" }}{{ row.reduce_only ? "（只减仓）" : "" }}
</template>
</el-table-column>
<el-table-column prop="priceText" label="价格" min-width="130" />
<el-table-column label="数量" min-width="100">
<template #default="{ row }">
{{ row.quantity === "全部持仓" ? row.quantity : num(row.quantity) }}
</template>
</el-table-column>
<el-table-column label="来源" width="80">
<template #default="{ row }">
{{ isOwnOrder(row.client_id) ? "本程序" : "手动" }}
</template>
</el-table-column>
<el-table-column label="时间" width="130">
<template #default="{ row }">
{{ formatTime(new Date(row.time).toISOString(), "MM-DD HH:mm:ss") }}
</template>
</el-table-column>
</el-table>
</div>
</el-scrollbar>
</el-card>
<div>
<div class="mb-2 font-bold">
时间线
</div>
<el-timeline v-if="events.length" class="pl-1">
<el-timeline-item
v-for="e in events" :key="e.id" :timestamp="formatTime(e.created_at)" :type="LEVEL_TYPES[e.level]"
placement="top"
>
<el-tag size="small" type="info" class="mr-2">
{{ e.symbol ?? "账户" }}
</el-tag>
<span :class="e.level === 'error' ? 'text-[var(--el-color-danger)]' : ''">{{ e.message }}</span>
<el-link v-if="e.analysis_id && e.kind !== 'analysis_started'" type="primary" underline="never" class="ml-2" @click="openAnalysis(e.analysis_id)">
查看分析
</el-link>
</el-timeline-item>
</el-timeline>
<el-empty v-else description="还没有事件" :image-size="60" />
<el-button v-if="events.length && !eventsExhausted" link type="primary" @click="loadMoreEvents">
加载更早的事件
</el-button>
</div>
</div>
</el-scrollbar>
</div>
<AddSymbolDialog v-model="addVisible" @added="onAdded" />
@@ -528,43 +478,12 @@ onBeforeUnmount(() => clearInterval(timer))
</template>
<style scoped>
.metric {
display: inline-flex;
align-items: baseline;
gap: 5px;
.stat {
font-size: 14px;
}
.stat span {
margin-right: 6px;
color: var(--el-text-color-secondary);
font-size: 12px;
}
.metric + .metric::before {
content: "|";
margin: 0 10px 0 5px;
color: var(--ap-line);
}
.metric .key {
color: var(--ap-muted);
font-size: 11px;
}
.metric .unit {
color: var(--ap-muted);
font-size: 10px;
}
.symbol-item {
padding: 10px 12px;
border-bottom: 1px solid color-mix(in srgb, var(--ap-line) 50%, transparent);
border-left: 2px solid transparent;
cursor: pointer;
}
.symbol-item:hover {
background: var(--ap-panel-highest);
}
.symbol-item.active {
border-left-color: var(--ap-brand);
background: var(--ap-panel-high);
}
.sub-card {
--el-card-bg-color: var(--ap-panel-low);
}
.sub-card :deep(.el-table) {
--el-table-bg-color: var(--ap-panel-low);
--el-table-tr-bg-color: var(--ap-panel-low);
}
</style>