4724 lines
171 KiB
Vue
4724 lines
171 KiB
Vue
<template>
|
||
<div class="trading-assistant" :class="{ 'theme-dark': isDarkTheme }">
|
||
<a-row :gutter="24" class="strategy-layout">
|
||
<!-- 左侧：策略列表 -->
|
||
<a-col
|
||
:xs="24"
|
||
:sm="24"
|
||
:md="10"
|
||
:lg="8"
|
||
:xl="8"
|
||
class="strategy-list-col">
|
||
<a-card :bordered="false" class="strategy-list-card">
|
||
<div slot="title" class="card-title">
|
||
<span>{{ $t('trading-assistant.strategyList') }}</span>
|
||
<a-button type="primary" size="small" @click="handleCreateStrategy">
|
||
<a-icon type="plus" />
|
||
{{ $t('trading-assistant.createStrategy') }}
|
||
</a-button>
|
||
</div>
|
||
|
||
<a-spin :spinning="loading">
|
||
<a-empty v-if="!loading && strategies.length === 0" :description="$t('trading-assistant.noStrategy')" />
|
||
<div v-else class="strategy-grouped-list">
|
||
<!-- 策略组列表 -->
|
||
<div
|
||
v-for="group in groupedStrategies.groups"
|
||
:key="group.id"
|
||
class="strategy-group"
|
||
>
|
||
<!-- 策略组头部 -->
|
||
<div class="strategy-group-header" @click="toggleGroup(group.id)">
|
||
<div class="group-header-left">
|
||
<a-icon :type="collapsedGroups[group.id] ? 'right' : 'down'" class="collapse-icon" />
|
||
<a-icon type="folder" class="group-icon" />
|
||
<span class="group-name">{{ group.baseName }}</span>
|
||
<a-tag size="small" color="blue">{{ group.strategies.length }} {{ $t('trading-assistant.symbolCount') }}</a-tag>
|
||
</div>
|
||
<div class="group-header-right" @click.stop>
|
||
<span v-if="group.runningCount > 0" class="group-status running">
|
||
{{ group.runningCount }} {{ $t('trading-assistant.status.running') }}
|
||
</span>
|
||
<span v-if="group.stoppedCount > 0" class="group-status stopped">
|
||
{{ group.stoppedCount }} {{ $t('trading-assistant.status.stopped') }}
|
||
</span>
|
||
<a-dropdown :getPopupContainer="getDropdownContainer" :trigger="['click']">
|
||
<a-menu slot="overlay" @click="({ key }) => handleGroupMenuClick(key, group)">
|
||
<a-menu-item key="startAll">
|
||
<a-icon type="play-circle" />
|
||
{{ $t('trading-assistant.startAll') }}
|
||
</a-menu-item>
|
||
<a-menu-item key="stopAll">
|
||
<a-icon type="pause-circle" />
|
||
{{ $t('trading-assistant.stopAll') }}
|
||
</a-menu-item>
|
||
<a-menu-divider />
|
||
<a-menu-item key="deleteAll" class="danger-item">
|
||
<a-icon type="delete" />
|
||
{{ $t('trading-assistant.deleteAll') }}
|
||
</a-menu-item>
|
||
</a-menu>
|
||
<a-button type="link" icon="more" size="small" />
|
||
</a-dropdown>
|
||
</div>
|
||
</div>
|
||
<!-- 策略组内的策略列表（可折叠） -->
|
||
<div v-show="!collapsedGroups[group.id]" class="strategy-group-content">
|
||
<div
|
||
v-for="item in group.strategies"
|
||
:key="item.id"
|
||
:class="['strategy-list-item', { active: selectedStrategy && selectedStrategy.id === item.id }]"
|
||
@click="handleSelectStrategy(item)"
|
||
>
|
||
<div class="strategy-item-content">
|
||
<div class="strategy-item-header">
|
||
<div class="strategy-name-wrapper">
|
||
<span class="info-item" v-if="item.trading_config && item.trading_config.symbol">
|
||
<a-icon type="dollar" />
|
||
{{ item.trading_config.symbol }}
|
||
</span>
|
||
<span
|
||
class="status-label"
|
||
:class="[
|
||
item.status ? `status-${item.status}` : '',
|
||
{ 'status-stopped': item.status === 'stopped' }
|
||
]"
|
||
>
|
||
{{ getStatusText(item.status) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="strategy-item-actions" @click.stop>
|
||
<a-dropdown :getPopupContainer="getDropdownContainer" :trigger="['click']">
|
||
<a-menu slot="overlay" @click="({ key }) => handleMenuClick(key, item)">
|
||
<a-menu-item v-if="item.status === 'stopped'" key="start">
|
||
<a-icon type="play-circle" />
|
||
{{ $t('trading-assistant.startStrategy') }}
|
||
</a-menu-item>
|
||
<a-menu-item v-if="item.status === 'running'" key="stop">
|
||
<a-icon type="pause-circle" />
|
||
{{ $t('trading-assistant.stopStrategy') }}
|
||
</a-menu-item>
|
||
<a-menu-divider />
|
||
<a-menu-item key="edit">
|
||
<a-icon type="edit" />
|
||
{{ $t('trading-assistant.editStrategy') }}
|
||
</a-menu-item>
|
||
<a-menu-divider />
|
||
<a-menu-item key="delete" class="danger-item">
|
||
<a-icon type="delete" />
|
||
{{ $t('trading-assistant.deleteStrategy') }}
|
||
</a-menu-item>
|
||
</a-menu>
|
||
<a-button type="link" icon="more" size="small" />
|
||
</a-dropdown>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 未分组的策略列表 -->
|
||
<div
|
||
v-for="item in groupedStrategies.ungrouped"
|
||
:key="item.id"
|
||
:class="['strategy-list-item', { active: selectedStrategy && selectedStrategy.id === item.id }]"
|
||
@click="handleSelectStrategy(item)"
|
||
>
|
||
<div class="strategy-item-content">
|
||
<div class="strategy-item-header">
|
||
<div class="strategy-name-wrapper">
|
||
<a-tag
|
||
v-if="item.exchange_config && item.exchange_config.exchange_id"
|
||
:color="getExchangeTagColor(item.exchange_config.exchange_id)"
|
||
size="small"
|
||
class="exchange-tag"
|
||
>
|
||
<a-icon type="bank" style="margin-right: 4px;" />
|
||
{{ getExchangeDisplayName(item.exchange_config.exchange_id) }}
|
||
</a-tag>
|
||
<span class="strategy-name">{{ item.strategy_name }}</span>
|
||
<a-tag
|
||
v-if="item.strategy_type === 'PromptBasedStrategy'"
|
||
color="purple"
|
||
size="small"
|
||
class="strategy-type-tag"
|
||
>
|
||
<a-icon type="robot" style="margin-right: 2px;" />
|
||
AI
|
||
</a-tag>
|
||
</div>
|
||
</div>
|
||
<div class="strategy-item-info">
|
||
<span class="info-item" v-if="item.trading_config && item.trading_config.symbol">
|
||
<a-icon type="dollar" />
|
||
{{ item.trading_config.symbol }}
|
||
</span>
|
||
<span
|
||
class="status-label"
|
||
:class="[
|
||
item.status ? `status-${item.status}` : '',
|
||
{ 'status-stopped': item.status === 'stopped' }
|
||
]"
|
||
>
|
||
{{ getStatusText(item.status) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="strategy-item-actions" @click.stop>
|
||
<a-dropdown :getPopupContainer="getDropdownContainer" :trigger="['click']">
|
||
<a-menu slot="overlay" @click="({ key }) => handleMenuClick(key, item)">
|
||
<a-menu-item v-if="item.status === 'stopped'" key="start">
|
||
<a-icon type="play-circle" />
|
||
{{ $t('trading-assistant.startStrategy') }}
|
||
</a-menu-item>
|
||
<a-menu-item v-if="item.status === 'running'" key="stop">
|
||
<a-icon type="pause-circle" />
|
||
{{ $t('trading-assistant.stopStrategy') }}
|
||
</a-menu-item>
|
||
<a-menu-divider />
|
||
<a-menu-item key="edit">
|
||
<a-icon type="edit" />
|
||
{{ $t('trading-assistant.editStrategy') }}
|
||
</a-menu-item>
|
||
<a-menu-divider />
|
||
<a-menu-item key="delete" class="danger-item">
|
||
<a-icon type="delete" />
|
||
{{ $t('trading-assistant.deleteStrategy') }}
|
||
</a-menu-item>
|
||
</a-menu>
|
||
<a-button type="link" icon="more" size="small" />
|
||
</a-dropdown>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-spin>
|
||
</a-card>
|
||
</a-col>
|
||
|
||
<!-- 右侧：策略详情和交易记录 -->
|
||
<a-col
|
||
:xs="24"
|
||
:sm="24"
|
||
:md="14"
|
||
:lg="16"
|
||
:xl="16"
|
||
class="strategy-detail-col">
|
||
<div v-if="!selectedStrategy" class="empty-detail">
|
||
<a-empty :description="$t('trading-assistant.selectStrategy')" />
|
||
</div>
|
||
|
||
<div v-else class="strategy-detail-panel">
|
||
<!-- 策略头部信息 -->
|
||
<a-card :bordered="false" class="strategy-header-card">
|
||
<div class="strategy-header">
|
||
<div class="header-left">
|
||
<div class="strategy-title-row">
|
||
<h3 class="strategy-title">{{ selectedStrategy.strategy_name }}</h3>
|
||
<div class="status-badge" :class="[`status-${selectedStrategy.status}`]">
|
||
<span class="status-dot"></span>
|
||
{{ getStatusText(selectedStrategy.status) }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关键数据卡片 -->
|
||
<div class="key-stats-grid">
|
||
<div class="stat-card" v-if="selectedStrategy.initial_capital || (selectedStrategy.trading_config && selectedStrategy.trading_config.initial_capital)">
|
||
<div class="stat-icon investment">
|
||
<a-icon type="wallet" />
|
||
</div>
|
||
<div class="stat-content">
|
||
<div class="stat-label">{{ $t('trading-assistant.detail.totalInvestment') }}</div>
|
||
<div class="stat-value">${{ ((selectedStrategy.initial_capital || selectedStrategy.trading_config?.initial_capital) || 0).toLocaleString() }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card" v-if="currentEquity !== null">
|
||
<div class="stat-icon equity">
|
||
<a-icon type="fund" />
|
||
</div>
|
||
<div class="stat-content">
|
||
<div class="stat-label">{{ $t('trading-assistant.detail.currentEquity') }}</div>
|
||
<div class="stat-value" :class="getEquityColorClass">{{ formatCurrency(currentEquity) }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card pnl-card" v-if="totalPnl !== null" :class="{ 'profit': totalPnl > 0, 'loss': totalPnl < 0 }">
|
||
<div class="stat-icon pnl">
|
||
<a-icon :type="totalPnl >= 0 ? 'rise' : 'fall'" />
|
||
</div>
|
||
<div class="stat-content">
|
||
<div class="stat-label">{{ $t('trading-assistant.detail.totalPnl') }}</div>
|
||
<div class="stat-value" :class="getPnlColorClass">
|
||
{{ formatPnl(totalPnl) }}
|
||
<span class="pnl-percent">({{ formatPnlPercent(totalPnlPercent) }})</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 策略详情标签 -->
|
||
<div class="strategy-tags">
|
||
<div class="tag-item" v-if="selectedStrategy.trading_config">
|
||
<a-icon type="stock" />
|
||
<span>{{ selectedStrategy.trading_config.symbol }}</span>
|
||
</div>
|
||
<div class="tag-item" v-if="selectedStrategy.indicator_config && selectedStrategy.indicator_config.indicator_name">
|
||
<a-icon type="line-chart" />
|
||
<span>{{ selectedStrategy.indicator_config.indicator_name }}</span>
|
||
</div>
|
||
<div class="tag-item" v-if="selectedStrategy.trading_config">
|
||
<a-icon type="thunderbolt" />
|
||
<span>{{ selectedStrategy.trading_config.leverage || 1 }}x</span>
|
||
</div>
|
||
<div class="tag-item" v-if="selectedStrategy.trading_config && selectedStrategy.trading_config.trade_direction">
|
||
<a-icon type="swap" />
|
||
<span>{{ getTradeDirectionText(selectedStrategy.trading_config.trade_direction) }}</span>
|
||
</div>
|
||
<div class="tag-item" v-if="selectedStrategy.trading_config && selectedStrategy.trading_config.timeframe">
|
||
<a-icon type="clock-circle" />
|
||
<span>{{ selectedStrategy.trading_config.timeframe }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="header-right">
|
||
<a-button
|
||
v-if="selectedStrategy.status === 'stopped'"
|
||
type="primary"
|
||
size="large"
|
||
class="action-btn start-btn"
|
||
@click="handleStartStrategy(selectedStrategy.id)"
|
||
>
|
||
<a-icon type="play-circle" />
|
||
{{ $t('trading-assistant.startStrategy') }}
|
||
</a-button>
|
||
<a-button
|
||
v-if="selectedStrategy.status === 'running'"
|
||
type="danger"
|
||
size="large"
|
||
class="action-btn stop-btn"
|
||
@click="handleStopStrategy(selectedStrategy.id)"
|
||
>
|
||
<a-icon type="pause-circle" />
|
||
{{ $t('trading-assistant.stopStrategy') }}
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
|
||
<!-- 策略详情标签页 -->
|
||
<a-card :bordered="false" class="strategy-content-card">
|
||
<a-tabs defaultActiveKey="positions">
|
||
<a-tab-pane key="positions" :tab="$t('trading-assistant.tabs.positions')">
|
||
<position-records
|
||
:strategy-id="selectedStrategy.id"
|
||
:market-type="(selectedStrategy.trading_config && selectedStrategy.trading_config.market_type) || 'swap'"
|
||
:leverage="(selectedStrategy.trading_config && selectedStrategy.trading_config.leverage) || 1"
|
||
:loading="loadingRecords"
|
||
/>
|
||
</a-tab-pane>
|
||
<a-tab-pane key="trades" :tab="$t('trading-assistant.tabs.tradingRecords')">
|
||
<trading-records
|
||
:strategy-id="selectedStrategy.id"
|
||
:loading="loadingRecords"
|
||
/>
|
||
</a-tab-pane>
|
||
</a-tabs>
|
||
</a-card>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<!-- 创建/编辑策略弹窗 - 合并版本 -->
|
||
<a-modal
|
||
:visible="showFormModal"
|
||
:title="editingStrategy ? $t('trading-assistant.editStrategy') : $t('trading-assistant.createStrategy')"
|
||
:width="isMobile ? '95%' : 1100"
|
||
:confirmLoading="saving"
|
||
@ok="handleSubmit"
|
||
@cancel="handleCloseModal"
|
||
:maskClosable="false"
|
||
:wrapClassName="isMobile ? 'mobile-modal' : ''"
|
||
:bodyStyle="{ maxHeight: '70vh', overflowY: 'auto' }"
|
||
>
|
||
<a-spin :spinning="loadingIndicators">
|
||
<a-steps :current="currentStep" class="steps-container">
|
||
<a-step :title="$t('trading-assistant.form.step1')" />
|
||
<a-step :title="$t('trading-assistant.form.step2Params')" />
|
||
<a-step :title="$t('trading-assistant.form.step3Signal')" />
|
||
</a-steps>
|
||
|
||
<div class="form-container">
|
||
<!-- 步骤1: 指标策略-选择技术指标 / AI策略-基础配置 -->
|
||
<div v-show="currentStep === 0" class="step-content">
|
||
<!-- 指标策略：选择技术指标 -->
|
||
<div v-if="strategyType === 'indicator'">
|
||
<a-form :form="form" layout="vertical">
|
||
<a-form-item :label="$t('trading-assistant.form.indicator')">
|
||
<a-select
|
||
v-decorator="['indicator_id', { rules: [{ required: true, message: $t('trading-assistant.validation.indicatorRequired') }] }]"
|
||
:placeholder="$t('trading-assistant.placeholders.selectIndicator')"
|
||
show-search
|
||
:filter-option="filterIndicatorOption"
|
||
@focus="handleIndicatorSelectFocus"
|
||
@change="handleIndicatorChange"
|
||
:loading="loadingIndicators"
|
||
:getPopupContainer="(triggerNode) => triggerNode.parentNode"
|
||
>
|
||
<a-select-option
|
||
v-for="indicator in availableIndicators"
|
||
:key="String(indicator.id)"
|
||
:value="String(indicator.id)"
|
||
>
|
||
<div class="indicator-option">
|
||
<span class="indicator-name">{{ indicator.name }}</span>
|
||
<a-tag v-if="indicator.type" size="small" :color="getIndicatorTypeColor(indicator.type)">
|
||
{{ getIndicatorTypeName(indicator.type) }}
|
||
</a-tag>
|
||
</div>
|
||
</a-select-option>
|
||
</a-select>
|
||
<div class="form-item-hint">
|
||
{{ $t('trading-assistant.form.indicatorHint') }}
|
||
</div>
|
||
</a-form-item>
|
||
|
||
<a-form-item v-if="selectedIndicator" :label="$t('trading-assistant.form.indicatorDescription')">
|
||
<div class="indicator-description">
|
||
{{ selectedIndicator.description || $t('trading-assistant.form.noDescription') }}
|
||
</div>
|
||
</a-form-item>
|
||
|
||
<a-divider />
|
||
|
||
<a-form-item :label="$t('trading-assistant.form.strategyName')">
|
||
<a-input
|
||
v-decorator="['strategy_name', { rules: [{ required: true, message: $t('trading-assistant.validation.strategyNameRequired') }] }]"
|
||
:placeholder="$t('trading-assistant.placeholders.inputStrategyName')"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item :label="isEditMode ? $t('trading-assistant.form.symbol') : $t('trading-assistant.form.symbols')">
|
||
<!-- 编辑模式：单选 -->
|
||
<a-select
|
||
v-if="isEditMode"
|
||
v-decorator="['symbol', { rules: [{ required: true, message: $t('trading-assistant.validation.symbolRequired') }] }]"
|
||
:placeholder="$t('trading-assistant.placeholders.selectSymbol')"
|
||
show-search
|
||
:filter-option="filterWatchlistOption"
|
||
:loading="loadingWatchlist"
|
||
@change="handleWatchlistSymbolChange"
|
||
:getPopupContainer="(triggerNode) => triggerNode.parentNode"
|
||
>
|
||
<a-select-option
|
||
v-for="item in watchlist"
|
||
:key="`${item.market}:${item.symbol}`"
|
||
:value="`${item.market}:${item.symbol}`"
|
||
>
|
||
<div class="symbol-option">
|
||
<a-tag :color="getMarketColor(item.market)" style="margin-right: 8px; margin-bottom: 0;">
|
||
{{ item.market }}
|
||
</a-tag>
|
||
<span class="symbol-name">{{ item.symbol }}</span>
|
||
<span v-if="item.name" class="symbol-name-extra">{{ item.name }}</span>
|
||
</div>
|
||
</a-select-option>
|
||
</a-select>
|
||
<!-- 创建模式：多选 -->
|
||
<a-select
|
||
v-else
|
||
v-model="selectedSymbols"
|
||
mode="multiple"
|
||
:placeholder="$t('trading-assistant.placeholders.selectSymbols')"
|
||
show-search
|
||
:filter-option="filterWatchlistOption"
|
||
:loading="loadingWatchlist"
|
||
@change="handleMultiSymbolChange"
|
||
:getPopupContainer="(triggerNode) => triggerNode.parentNode"
|
||
:maxTagCount="3"
|
||
>
|
||
<a-select-option
|
||
v-for="item in watchlist"
|
||
:key="`${item.market}:${item.symbol}`"
|
||
:value="`${item.market}:${item.symbol}`"
|
||
>
|
||
<div class="symbol-option">
|
||
<a-tag :color="getMarketColor(item.market)" style="margin-right: 8px; margin-bottom: 0;">
|
||
{{ item.market }}
|
||
</a-tag>
|
||
<span class="symbol-name">{{ item.symbol }}</span>
|
||
<span v-if="item.name" class="symbol-name-extra">{{ item.name }}</span>
|
||
</div>
|
||
</a-select-option>
|
||
</a-select>
|
||
<div class="form-item-hint">
|
||
{{ isEditMode ? $t('trading-assistant.form.symbolHintCrypto') : $t('trading-assistant.form.symbolsHint') }}
|
||
</div>
|
||
</a-form-item>
|
||
|
||
<a-row :gutter="16">
|
||
<a-col :xs="24" :sm="24" :md="12" :lg="12">
|
||
<a-form-item :label="$t('trading-assistant.form.initialCapital')">
|
||
<a-input-number
|
||
v-decorator="['initial_capital', { rules: [{ required: true, message: $t('trading-assistant.validation.initialCapitalRequired') }], initialValue: 1000 }]"
|
||
:min="10"
|
||
:step="100"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :sm="24" :md="12" :lg="12">
|
||
<a-form-item :label="$t('trading-assistant.form.marketType')">
|
||
<a-radio-group
|
||
v-decorator="['market_type', { initialValue: 'swap' }]"
|
||
@change="handleMarketTypeChange"
|
||
>
|
||
<a-radio value="swap">{{ $t('trading-assistant.form.marketTypeFutures') }}</a-radio>
|
||
<a-radio value="spot">{{ $t('trading-assistant.form.marketTypeSpot') }}</a-radio>
|
||
</a-radio-group>
|
||
<div class="form-item-hint">
|
||
{{ $t('trading-assistant.form.marketTypeHint') }}
|
||
</div>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row :gutter="16">
|
||
<a-col :xs="24" :sm="24" :md="12" :lg="12">
|
||
<a-form-item :label="`${$t('trading-assistant.form.leverage')} (x)`">
|
||
<a-input-number
|
||
v-decorator="['leverage', { initialValue: 1, rules: [{ required: true, message: $t('trading-assistant.validation.leverageRequired') }] }]"
|
||
:min="1"
|
||
:max="form.getFieldValue('market_type') === 'spot' ? 1 : 125"
|
||
:step="1"
|
||
style="width: 100%"
|
||
:disabled="form.getFieldValue('market_type') === 'spot'"
|
||
/>
|
||
<div class="form-item-hint">
|
||
<span v-if="form.getFieldValue('market_type') === 'spot'">
|
||
{{ $t('trading-assistant.form.spotLeverageFixed') }}
|
||
</span>
|
||
<span v-else>
|
||
{{ $t('trading-assistant.form.leverageHint') }}
|
||
</span>
|
||
</div>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :sm="24" :md="12" :lg="12">
|
||
<a-form-item :label="$t('trading-assistant.form.tradeDirection')">
|
||
<a-radio-group
|
||
v-decorator="['trade_direction', { initialValue: 'long' }]"
|
||
:disabled="form.getFieldValue('market_type') === 'spot'"
|
||
>
|
||
<a-radio value="long">{{ $t('trading-assistant.form.tradeDirectionLong') }}</a-radio>
|
||
<a-radio value="short" :disabled="form.getFieldValue('market_type') === 'spot'">
|
||
{{ $t('trading-assistant.form.tradeDirectionShort') }}
|
||
</a-radio>
|
||
<a-radio value="both" :disabled="form.getFieldValue('market_type') === 'spot'">
|
||
{{ $t('trading-assistant.form.tradeDirectionBoth') }}
|
||
</a-radio>
|
||
</a-radio-group>
|
||
<div v-if="form.getFieldValue('market_type') === 'spot'" class="form-item-hint" style="color: #ff9800;">
|
||
{{ $t('trading-assistant.form.spotOnlyLongHint') }}
|
||
</div>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row :gutter="16">
|
||
<a-col :xs="24" :sm="24" :md="12" :lg="12">
|
||
<a-form-item :label="$t('trading-assistant.form.klinePeriod')">
|
||
<a-select
|
||
v-decorator="['timeframe', { initialValue: '1H', rules: [{ required: true }] }]"
|
||
:placeholder="$t('trading-assistant.placeholders.selectKlinePeriod')"
|
||
:getPopupContainer="(triggerNode) => triggerNode.parentNode"
|
||
>
|
||
<a-select-option value="1m">{{ $t('trading-assistant.form.timeframe1m') }}</a-select-option>
|
||
<a-select-option value="5m">{{ $t('trading-assistant.form.timeframe5m') }}</a-select-option>
|
||
<a-select-option value="15m">{{ $t('trading-assistant.form.timeframe15m') }}</a-select-option>
|
||
<a-select-option value="30m">{{ $t('trading-assistant.form.timeframe30m') }}</a-select-option>
|
||
<a-select-option value="1H">{{ $t('trading-assistant.form.timeframe1H') }}</a-select-option>
|
||
<a-select-option value="4H">{{ $t('trading-assistant.form.timeframe4H') }}</a-select-option>
|
||
<a-select-option value="1D">{{ $t('trading-assistant.form.timeframe1D') }}</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :sm="24" :md="12" :lg="12"></a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</div>
|
||
|
||
<!-- Local mode: indicator strategy only (no AI strategy) -->
|
||
</div>
|
||
|
||
<!-- Step 2: params (backtest-like / trading params) -->
|
||
<div v-show="currentStep === 1" class="step-content">
|
||
<!-- 指标策略：策略参数 -->
|
||
<div v-if="strategyType === 'indicator'">
|
||
<a-form :form="form" layout="vertical">
|
||
<!-- Backtest-like configuration (aligned with indicator-analysis BacktestModal) -->
|
||
<a-collapse v-model="backtestCollapseKeys" :bordered="false" style="background: #fafafa;">
|
||
<a-collapse-panel key="risk" :header="$t('dashboard.indicator.backtest.panel.risk')">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.stopLossPct')">
|
||
<a-input-number
|
||
v-decorator="['stop_loss_pct', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="100"
|
||
:step="0.01"
|
||
:precision="4"
|
||
style="width: 220px"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.takeProfitPct')">
|
||
<a-input-number
|
||
v-decorator="['take_profit_pct', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="1000"
|
||
:step="0.01"
|
||
:precision="4"
|
||
style="width: 220px"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.trailingEnabled')">
|
||
<a-switch
|
||
v-decorator="['trailing_enabled', { valuePropName: 'checked', initialValue: false }]"
|
||
@change="onTrailingToggle"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12"></a-col>
|
||
</a-row>
|
||
|
||
<template v-if="trailingEnabledUi">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.trailingStopPct')">
|
||
<a-input-number
|
||
v-decorator="['trailing_stop_pct', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="100"
|
||
:step="0.01"
|
||
:precision="4"
|
||
style="width: 220px"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.trailingActivationPct')">
|
||
<a-input-number
|
||
v-decorator="['trailing_activation_pct', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="1000"
|
||
:step="0.01"
|
||
:precision="4"
|
||
style="width: 220px"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</template>
|
||
</a-collapse-panel>
|
||
|
||
<a-collapse-panel key="scale" :header="$t('dashboard.indicator.backtest.panel.scale')">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.trendAddEnabled')">
|
||
<a-switch
|
||
v-decorator="['trend_add_enabled', { valuePropName: 'checked', initialValue: false }]"
|
||
@change="onTrendAddToggle"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.dcaAddEnabled')">
|
||
<a-switch
|
||
v-decorator="['dca_add_enabled', { valuePropName: 'checked', initialValue: false }]"
|
||
@change="onDcaAddToggle"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.trendAddStepPct')">
|
||
<a-input-number
|
||
v-decorator="['trend_add_step_pct', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="1000"
|
||
:step="0.01"
|
||
:precision="4"
|
||
style="width: 220px"
|
||
@change="onScaleParamsChange"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.dcaAddStepPct')">
|
||
<a-input-number
|
||
v-decorator="['dca_add_step_pct', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="1000"
|
||
:step="0.01"
|
||
:precision="4"
|
||
style="width: 220px"
|
||
@change="onScaleParamsChange"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.trendAddSizePct')">
|
||
<a-input-number
|
||
v-decorator="['trend_add_size_pct', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="100"
|
||
:step="0.1"
|
||
:precision="4"
|
||
style="width: 220px"
|
||
@change="onScaleParamsChange"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.dcaAddSizePct')">
|
||
<a-input-number
|
||
v-decorator="['dca_add_size_pct', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="100"
|
||
:step="0.1"
|
||
:precision="4"
|
||
style="width: 220px"
|
||
@change="onScaleParamsChange"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.trendAddMaxTimes')">
|
||
<a-input-number
|
||
v-decorator="['trend_add_max_times', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="50"
|
||
:step="1"
|
||
:precision="0"
|
||
style="width: 220px"
|
||
@change="onScaleParamsChange"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.dcaAddMaxTimes')">
|
||
<a-input-number
|
||
v-decorator="['dca_add_max_times', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="50"
|
||
:step="1"
|
||
:precision="0"
|
||
style="width: 220px"
|
||
@change="onScaleParamsChange"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-collapse-panel>
|
||
|
||
<a-collapse-panel key="reduce" :header="$t('dashboard.indicator.backtest.panel.reduce')">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.trendReduceEnabled')">
|
||
<a-switch v-decorator="['trend_reduce_enabled', { valuePropName: 'checked', initialValue: false }]" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.adverseReduceEnabled')">
|
||
<a-switch v-decorator="['adverse_reduce_enabled', { valuePropName: 'checked', initialValue: false }]" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.trendReduceStepPct')">
|
||
<a-input-number
|
||
v-decorator="['trend_reduce_step_pct', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="1000"
|
||
:step="0.01"
|
||
:precision="4"
|
||
style="width: 220px"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.adverseReduceStepPct')">
|
||
<a-input-number
|
||
v-decorator="['adverse_reduce_step_pct', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="1000"
|
||
:step="0.01"
|
||
:precision="4"
|
||
style="width: 220px"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.trendReduceSizePct')">
|
||
<a-input-number
|
||
v-decorator="['trend_reduce_size_pct', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="100"
|
||
:step="0.1"
|
||
:precision="4"
|
||
style="width: 220px"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.adverseReduceSizePct')">
|
||
<a-input-number
|
||
v-decorator="['adverse_reduce_size_pct', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="100"
|
||
:step="0.1"
|
||
:precision="4"
|
||
style="width: 220px"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.trendReduceMaxTimes')">
|
||
<a-input-number
|
||
v-decorator="['trend_reduce_max_times', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="50"
|
||
:step="1"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item :label="$t('dashboard.indicator.backtest.field.adverseReduceMaxTimes')">
|
||
<a-input-number
|
||
v-decorator="['adverse_reduce_max_times', { initialValue: 0 }]"
|
||
:min="0"
|
||
:max="50"
|
||
:step="1"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-collapse-panel>
|
||
|
||
<a-collapse-panel key="position" :header="$t('dashboard.indicator.backtest.panel.position')">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-form-item
|
||
:label="$t('dashboard.indicator.backtest.field.entryPct')"
|
||
:help="$t('dashboard.indicator.backtest.hint.entryPctMax', { maxPct: Number(entryPctMaxUi || 0).toFixed(0) })"
|
||
>
|
||
<a-input-number
|
||
v-decorator="['entry_pct', { initialValue: 100 }]"
|
||
:min="0"
|
||
:max="entryPctMaxUi"
|
||
:step="0.1"
|
||
:precision="4"
|
||
style="width: 220px"
|
||
@change="onEntryPctChange"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12"></a-col>
|
||
</a-row>
|
||
</a-collapse-panel>
|
||
</a-collapse>
|
||
|
||
<!-- Indicator strategy: AI decision filter -->
|
||
<div class="ai-filter-box">
|
||
<div class="ai-filter-header">
|
||
<div class="ai-filter-title">
|
||
<a-icon type="robot" />
|
||
<span>{{ $t('trading-assistant.form.enableAiFilter') }}</span>
|
||
</div>
|
||
<a-switch
|
||
:checked="aiFilterEnabledUi"
|
||
@change="onAiFilterToggle"
|
||
/>
|
||
</div>
|
||
<div class="ai-filter-hint">{{ $t('trading-assistant.form.enableAiFilterHint') }}</div>
|
||
</div>
|
||
</a-form>
|
||
</div>
|
||
|
||
<!-- Local mode: indicator strategy only (no AI strategy) -->
|
||
</div>
|
||
|
||
<!-- Step 3: signal push & optional live trading (crypto only) -->
|
||
<div v-show="currentStep === 2" class="step-content">
|
||
<a-form :form="form" layout="vertical" autocomplete="off">
|
||
<a-form-item :label="$t('trading-assistant.form.executionMode')">
|
||
<a-radio-group
|
||
v-decorator="['execution_mode', { initialValue: 'signal' }]"
|
||
:disabled="!canUseLiveTrading"
|
||
@change="onExecutionModeChange"
|
||
>
|
||
<a-radio value="signal">{{ $t('trading-assistant.form.executionModeSignal') }}</a-radio>
|
||
<a-radio value="live" :disabled="!canUseLiveTrading">{{ $t('trading-assistant.form.executionModeLive') }}</a-radio>
|
||
</a-radio-group>
|
||
<div v-if="!canUseLiveTrading" class="form-item-hint" style="color: #ff9800;">
|
||
{{ $t('trading-assistant.form.liveTradingNotSupportedHint') }}
|
||
</div>
|
||
</a-form-item>
|
||
|
||
<a-form-item :label="$t('trading-assistant.form.notifyChannels')">
|
||
<a-checkbox-group
|
||
v-decorator="['notify_channels', { initialValue: ['browser'] }]"
|
||
@change="onNotifyChannelsChange"
|
||
>
|
||
<a-checkbox value="browser">{{ $t('trading-assistant.notify.browser') }}</a-checkbox>
|
||
<a-checkbox value="email">{{ $t('trading-assistant.notify.email') }}</a-checkbox>
|
||
<a-checkbox value="phone">{{ $t('trading-assistant.notify.phone') }}</a-checkbox>
|
||
<a-checkbox value="telegram">{{ $t('trading-assistant.notify.telegram') }}</a-checkbox>
|
||
<a-checkbox value="discord">{{ $t('trading-assistant.notify.discord') }}</a-checkbox>
|
||
<a-checkbox value="webhook">{{ $t('trading-assistant.notify.webhook') }}</a-checkbox>
|
||
</a-checkbox-group>
|
||
<div class="form-item-hint">{{ $t('trading-assistant.form.notifyChannelsHint') }}</div>
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
v-if="notifyChannelsUi.includes('email')"
|
||
:label="$t('trading-assistant.form.notifyEmail')"
|
||
>
|
||
<a-input
|
||
v-decorator="['notify_email', { rules: [{ type: 'email', message: $t('trading-assistant.validation.emailInvalid') }] }]"
|
||
:placeholder="$t('trading-assistant.placeholders.inputEmail')"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
v-if="notifyChannelsUi.includes('phone')"
|
||
:label="$t('trading-assistant.form.notifyPhone')"
|
||
>
|
||
<a-input
|
||
v-decorator="['notify_phone']"
|
||
:placeholder="$t('trading-assistant.placeholders.inputPhone')"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
v-if="notifyChannelsUi.includes('telegram')"
|
||
:label="$t('trading-assistant.form.notifyTelegram')"
|
||
>
|
||
<a-input
|
||
v-decorator="['notify_telegram']"
|
||
:placeholder="$t('trading-assistant.placeholders.inputTelegram')"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
v-if="notifyChannelsUi.includes('discord')"
|
||
:label="$t('trading-assistant.form.notifyDiscord')"
|
||
>
|
||
<a-input
|
||
v-decorator="['notify_discord']"
|
||
:placeholder="$t('trading-assistant.placeholders.inputDiscord')"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
v-if="notifyChannelsUi.includes('webhook')"
|
||
:label="$t('trading-assistant.form.notifyWebhook')"
|
||
>
|
||
<a-input
|
||
v-decorator="['notify_webhook']"
|
||
:placeholder="$t('trading-assistant.placeholders.inputWebhook')"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-divider v-if="executionModeUi === 'live' && canUseLiveTrading" />
|
||
|
||
<!-- Live trading: exchange credentials -->
|
||
<div v-if="executionModeUi === 'live' && canUseLiveTrading">
|
||
<a-alert
|
||
type="info"
|
||
show-icon
|
||
style="margin-bottom: 12px;"
|
||
:message="$t('trading-assistant.form.liveTradingConfigTitle')"
|
||
:description="$t('trading-assistant.form.liveTradingConfigHint')"
|
||
/>
|
||
|
||
<!-- ========== Broker Configuration (US/HK Stocks) ========== -->
|
||
<template v-if="isIBKRMarket">
|
||
<a-form-item :label="$t('trading-assistant.form.broker')">
|
||
<a-select
|
||
v-decorator="['broker_id', {
|
||
initialValue: 'ibkr',
|
||
rules: [{ required: true, message: $t('trading-assistant.validation.brokerRequired') }]
|
||
}]"
|
||
:placeholder="$t('trading-assistant.placeholders.selectBroker')"
|
||
:getPopupContainer="getModalPopupContainer"
|
||
@change="handleBrokerSelectChange"
|
||
>
|
||
<a-select-option
|
||
v-for="broker in brokerOptions"
|
||
:key="broker.value"
|
||
:value="broker.value"
|
||
>
|
||
{{ broker.displayName }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
|
||
<!-- IBKR specific configuration -->
|
||
<template v-if="currentBrokerId === 'ibkr'">
|
||
<a-alert
|
||
type="info"
|
||
show-icon
|
||
style="margin-bottom: 16px;"
|
||
:message="$t('trading-assistant.form.ibkrConnectionTitle')"
|
||
:description="$t('trading-assistant.form.ibkrConnectionHint')"
|
||
/>
|
||
|
||
<a-form-item :label="$t('trading-assistant.form.ibkrHost')">
|
||
<a-input
|
||
v-decorator="['ibkr_host', { initialValue: '127.0.0.1' }]"
|
||
placeholder="127.0.0.1"
|
||
@change="handleApiConfigChange"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item :label="$t('trading-assistant.form.ibkrPort')">
|
||
<a-input-number
|
||
v-decorator="['ibkr_port', { initialValue: 7497 }]"
|
||
placeholder="7497"
|
||
:min="1"
|
||
:max="65535"
|
||
style="width: 100%"
|
||
@change="handleApiConfigChange"
|
||
/>
|
||
<div class="form-item-hint">{{ $t('trading-assistant.form.ibkrPortHint') }}</div>
|
||
</a-form-item>
|
||
|
||
<a-form-item :label="$t('trading-assistant.form.ibkrClientId')">
|
||
<a-input-number
|
||
v-decorator="['ibkr_client_id', { initialValue: 1 }]"
|
||
placeholder="1"
|
||
:min="1"
|
||
:max="999"
|
||
style="width: 100%"
|
||
@change="handleApiConfigChange"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item :label="$t('trading-assistant.form.ibkrAccount')">
|
||
<a-input
|
||
v-decorator="['ibkr_account', { initialValue: '' }]"
|
||
:placeholder="$t('trading-assistant.placeholders.ibkrAccount')"
|
||
@change="handleApiConfigChange"
|
||
/>
|
||
<div class="form-item-hint">{{ $t('trading-assistant.form.ibkrAccountHint') }}</div>
|
||
</a-form-item>
|
||
</template>
|
||
|
||
<!-- Future broker configurations can be added here -->
|
||
<!-- <template v-else-if="currentBrokerId === 'futu'">...</template> -->
|
||
</template>
|
||
|
||
<!-- ========== MT5/Forex Broker Configuration ========== -->
|
||
<template v-else-if="isMT5Market">
|
||
<a-form-item :label="$t('trading-assistant.form.forexBroker')">
|
||
<a-select
|
||
v-decorator="['forex_broker_id', {
|
||
initialValue: 'mt5',
|
||
rules: [{ required: true, message: $t('trading-assistant.validation.brokerRequired') }]
|
||
}]"
|
||
:placeholder="$t('trading-assistant.placeholders.selectBroker')"
|
||
:getPopupContainer="getModalPopupContainer"
|
||
@change="handleForexBrokerSelectChange"
|
||
>
|
||
<a-select-option
|
||
v-for="broker in forexBrokerOptions"
|
||
:key="broker.value"
|
||
:value="broker.value"
|
||
>
|
||
{{ broker.displayName }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
|
||
<!-- MT5 specific configuration -->
|
||
<template v-if="currentBrokerId === 'mt5'">
|
||
<a-alert
|
||
type="info"
|
||
show-icon
|
||
style="margin-bottom: 16px;"
|
||
:message="$t('trading-assistant.form.mt5ConnectionTitle')"
|
||
:description="$t('trading-assistant.form.mt5ConnectionHint')"
|
||
/>
|
||
|
||
<a-form-item :label="$t('trading-assistant.form.mt5Server')">
|
||
<a-input
|
||
v-decorator="['mt5_server', {
|
||
rules: [{ required: true, message: $t('trading-assistant.validation.mt5ServerRequired') }]
|
||
}]"
|
||
:placeholder="$t('trading-assistant.placeholders.mt5Server')"
|
||
@change="handleApiConfigChange"
|
||
/>
|
||
<div class="form-item-hint">{{ $t('trading-assistant.form.mt5ServerHint') }}</div>
|
||
</a-form-item>
|
||
|
||
<a-form-item :label="$t('trading-assistant.form.mt5Login')">
|
||
<a-input-number
|
||
v-decorator="['mt5_login', {
|
||
rules: [{ required: true, message: $t('trading-assistant.validation.mt5LoginRequired') }]
|
||
}]"
|
||
:placeholder="$t('trading-assistant.placeholders.mt5Login')"
|
||
:min="1"
|
||
style="width: 100%"
|
||
@change="handleApiConfigChange"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item :label="$t('trading-assistant.form.mt5Password')">
|
||
<a-input-password
|
||
v-decorator="['mt5_password', {
|
||
rules: [{ required: true, message: $t('trading-assistant.validation.mt5PasswordRequired') }]
|
||
}]"
|
||
:placeholder="$t('trading-assistant.placeholders.mt5Password')"
|
||
@change="handleApiConfigChange"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item :label="$t('trading-assistant.form.mt5TerminalPath')">
|
||
<a-input
|
||
v-decorator="['mt5_terminal_path']"
|
||
:placeholder="$t('trading-assistant.placeholders.mt5TerminalPath')"
|
||
@change="handleApiConfigChange"
|
||
/>
|
||
<div class="form-item-hint">{{ $t('trading-assistant.form.mt5TerminalPathHint') }}</div>
|
||
</a-form-item>
|
||
</template>
|
||
|
||
<!-- Future forex broker configurations can be added here -->
|
||
<!-- <template v-else-if="currentBrokerId === 'mt4'">...</template> -->
|
||
</template>
|
||
|
||
<!-- ========== Crypto Exchange Configuration ========== -->
|
||
<template v-else>
|
||
<a-form-item :label="$t('trading-assistant.form.savedCredential')">
|
||
<a-select
|
||
v-decorator="['credential_id', { getValueFromEvent: (val) => val || undefined }]"
|
||
:placeholder="$t('trading-assistant.placeholders.selectSavedCredential')"
|
||
allow-clear
|
||
show-search
|
||
option-filter-prop="children"
|
||
:loading="loadingExchangeCredentials"
|
||
@change="handleCredentialSelectChange"
|
||
>
|
||
<a-select-option
|
||
v-for="cred in exchangeCredentials"
|
||
:key="cred.id"
|
||
:value="cred.id"
|
||
>
|
||
{{ formatCredentialLabel(cred) }}
|
||
</a-select-option>
|
||
</a-select>
|
||
<div class="form-item-hint">{{ $t('trading-assistant.form.savedCredentialHint') }}</div>
|
||
</a-form-item>
|
||
|
||
<a-form-item :label="$t('trading-assistant.form.exchange')">
|
||
<a-select
|
||
v-decorator="['exchange_id', {
|
||
rules: [{ required: true, message: $t('trading-assistant.validation.exchangeRequired') }],
|
||
getValueFromEvent: (val) => val || undefined
|
||
}]"
|
||
:placeholder="$t('trading-assistant.placeholders.selectExchange')"
|
||
allow-clear
|
||
show-search
|
||
option-filter-prop="children"
|
||
@change="handleExchangeSelectChange"
|
||
>
|
||
<a-select-option
|
||
v-for="exchange in cryptoExchangeOptions"
|
||
:key="exchange.value"
|
||
:value="exchange.value"
|
||
>
|
||
{{ exchange.displayName }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
|
||
<a-form-item :label="$t('trading-assistant.form.apiKey')">
|
||
<a-input-password
|
||
v-decorator="['api_key', { rules: [{ required: true, message: $t('trading-assistant.validation.apiKeyRequired') }] }]"
|
||
:placeholder="$t('trading-assistant.placeholders.inputApiKey')"
|
||
autocomplete="new-password"
|
||
@change="handleApiConfigChange"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item :label="$t('trading-assistant.form.secretKey')">
|
||
<a-input-password
|
||
v-decorator="['secret_key', { rules: [{ required: true, message: $t('trading-assistant.validation.secretKeyRequired') }] }]"
|
||
:placeholder="$t('trading-assistant.placeholders.inputSecretKey')"
|
||
autocomplete="new-password"
|
||
@change="handleApiConfigChange"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
v-if="needsPassphrase"
|
||
:label="$t('trading-assistant.form.passphrase')"
|
||
>
|
||
<a-input-password
|
||
v-decorator="['passphrase', { rules: [{ required: true, message: $t('trading-assistant.validation.passphraseRequired') }] }]"
|
||
:placeholder="$t('trading-assistant.placeholders.inputPassphrase')"
|
||
autocomplete="new-password"
|
||
@change="handleApiConfigChange"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item>
|
||
<a-checkbox
|
||
v-decorator="['save_credential', { valuePropName: 'checked', initialValue: false }]"
|
||
@change="onSaveCredentialChange"
|
||
>
|
||
{{ $t('trading-assistant.form.saveCredential') }}
|
||
</a-checkbox>
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
v-if="saveCredentialUi"
|
||
:label="$t('trading-assistant.form.credentialName')"
|
||
>
|
||
<a-input
|
||
v-decorator="['credential_name']"
|
||
:placeholder="$t('trading-assistant.placeholders.inputCredentialName')"
|
||
/>
|
||
</a-form-item>
|
||
</template>
|
||
|
||
<!-- Test Connection Button (shared by both IBKR and Crypto) -->
|
||
<a-form-item>
|
||
<a-button
|
||
type="default"
|
||
:loading="testing"
|
||
@click="handleTestConnection"
|
||
block
|
||
>
|
||
<a-icon type="wallet" />
|
||
{{ $t('trading-assistant.form.testConnection') }}
|
||
</a-button>
|
||
<div v-if="testResult" class="test-result" :class="testResult.success ? 'success' : 'error'">
|
||
{{ testResult.message }}
|
||
</div>
|
||
</a-form-item>
|
||
</div>
|
||
</a-form>
|
||
</div>
|
||
</div>
|
||
</a-spin>
|
||
|
||
<template slot="footer">
|
||
<a-button @click="handleCloseModal">{{ $t('trading-assistant.form.cancel') }}</a-button>
|
||
<a-button
|
||
v-show="currentStep > 0"
|
||
@click="handlePrev"
|
||
>
|
||
{{ $t('trading-assistant.form.prev') }}
|
||
</a-button>
|
||
<a-button
|
||
v-show="currentStep < 2"
|
||
type="primary"
|
||
@click="handleNext"
|
||
:loading="saving"
|
||
>
|
||
{{ $t('trading-assistant.form.next') }}
|
||
</a-button>
|
||
<a-button
|
||
v-show="currentStep === 2"
|
||
type="primary"
|
||
@click="handleSubmit"
|
||
:loading="saving"
|
||
>
|
||
{{ editingStrategy ? $t('trading-assistant.form.confirmEdit') : $t('trading-assistant.form.confirmCreate') }}
|
||
</a-button>
|
||
</template>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getStrategyList, startStrategy, stopStrategy, deleteStrategy, updateStrategy, testExchangeConnection, getStrategyEquityCurve, batchCreateStrategies, batchStartStrategies, batchStopStrategies, batchDeleteStrategies } from '@/api/strategy'
|
||
import { getWatchlist } from '@/api/market'
|
||
import { listExchangeCredentials, getExchangeCredential, createExchangeCredential } from '@/api/credentials'
|
||
import { baseMixin } from '@/store/app-mixin'
|
||
import request from '@/utils/request'
|
||
import TradingRecords from './components/TradingRecords.vue'
|
||
import PositionRecords from './components/PositionRecords.vue'
|
||
|
||
// 常见加密货币交易对
|
||
const CRYPTO_SYMBOLS = [
|
||
'BTC/USDT', 'ETH/USDT', 'BNB/USDT', 'SOL/USDT', 'ADA/USDT',
|
||
'XRP/USDT', 'DOGE/USDT', 'DOT/USDT', 'MATIC/USDT', 'AVAX/USDT',
|
||
'LINK/USDT', 'UNI/USDT', 'LTC/USDT', 'ATOM/USDT', 'ETC/USDT'
|
||
]
|
||
|
||
// Crypto exchange options
|
||
const EXCHANGE_OPTIONS = [
|
||
{ value: 'binance', labelKey: 'binance' },
|
||
{ value: 'okx', labelKey: 'okx' },
|
||
{ value: 'bitget', labelKey: 'bitget' },
|
||
{ value: 'bybit', labelKey: 'bybit' },
|
||
{ value: 'coinbaseexchange', labelKey: 'coinbaseexchange' },
|
||
{ value: 'kraken', labelKey: 'kraken' },
|
||
{ value: 'kucoin', labelKey: 'kucoin' },
|
||
{ value: 'gate', labelKey: 'gate' },
|
||
{ value: 'bitfinex', labelKey: 'bitfinex' }
|
||
]
|
||
|
||
// Traditional broker options (US/HK stocks) - extensible for future brokers
|
||
const BROKER_OPTIONS = [
|
||
{ value: 'ibkr', labelKey: 'ibkr', name: 'Interactive Brokers' }
|
||
// Future brokers can be added here:
|
||
// { value: 'td', labelKey: 'td', name: 'TD Ameritrade' },
|
||
// { value: 'schwab', labelKey: 'schwab', name: 'Charles Schwab' },
|
||
// { value: 'futu', labelKey: 'futu', name: 'Futu (富途)' },
|
||
// { value: 'tiger', labelKey: 'tiger', name: 'Tiger Brokers (老虎证券)' },
|
||
]
|
||
|
||
// Forex broker options
|
||
const FOREX_BROKER_OPTIONS = [
|
||
{ value: 'mt5', labelKey: 'mt5', name: 'MetaTrader 5' }
|
||
// Future forex brokers can be added here:
|
||
// { value: 'mt4', labelKey: 'mt4', name: 'MetaTrader 4' },
|
||
// { value: 'ctrader', labelKey: 'ctrader', name: 'cTrader' },
|
||
]
|
||
|
||
export default {
|
||
name: 'TradingAssistant',
|
||
mixins: [baseMixin],
|
||
components: {
|
||
TradingRecords,
|
||
PositionRecords
|
||
},
|
||
computed: {
|
||
isDarkTheme () {
|
||
return this.navTheme === 'dark' || this.navTheme === 'realdark'
|
||
},
|
||
needsPassphrase () {
|
||
// Exchanges that require passphrase
|
||
return ['okx', 'okex', 'coinbaseexchange', 'kucoin', 'bitget'].includes(this.currentExchangeId)
|
||
},
|
||
// Check if current market uses IBKR (US Stock / HK Stock)
|
||
isIBKRMarket () {
|
||
return ['USStock', 'HShare'].includes(this.selectedMarketCategory)
|
||
},
|
||
// Check if current market uses MT5 (Forex)
|
||
isMT5Market () {
|
||
return this.selectedMarketCategory === 'Forex'
|
||
},
|
||
// Check if current market uses any broker (not crypto exchange)
|
||
isBrokerMarket () {
|
||
return this.isIBKRMarket || this.isMT5Market
|
||
},
|
||
// 预处理交易所列表，包含显示名称，提升性能
|
||
formattedExchangeOptions () {
|
||
return EXCHANGE_OPTIONS.map(exchange => {
|
||
let label = ''
|
||
try {
|
||
if (exchange.labelKey) {
|
||
const translationKey = `trading-assistant.exchangeNames.${exchange.labelKey}`
|
||
const translated = this.$t(translationKey)
|
||
if (translated !== translationKey) {
|
||
label = translated
|
||
}
|
||
}
|
||
} catch (e) {
|
||
// 忽略翻译错误
|
||
}
|
||
|
||
if (!label) {
|
||
label = exchange.value.charAt(0).toUpperCase() + exchange.value.slice(1)
|
||
}
|
||
return {
|
||
...exchange,
|
||
displayName: label
|
||
}
|
||
})
|
||
},
|
||
totalPnl () {
|
||
if (this.currentEquity === null || !this.selectedStrategy || !this.selectedStrategy.initial_capital) {
|
||
return null
|
||
}
|
||
return this.currentEquity - (this.selectedStrategy.initial_capital || 0)
|
||
},
|
||
totalPnlPercent () {
|
||
if (this.totalPnl === null || !this.selectedStrategy || !this.selectedStrategy.initial_capital) {
|
||
return null
|
||
}
|
||
if (this.selectedStrategy.initial_capital === 0) return 0
|
||
return (this.totalPnl / this.selectedStrategy.initial_capital) * 100
|
||
},
|
||
getEquityColorClass () {
|
||
if (this.totalPnl === null) return ''
|
||
return this.totalPnl >= 0 ? 'text-success' : 'text-danger'
|
||
},
|
||
getPnlColorClass () {
|
||
if (this.totalPnl === null) return ''
|
||
return this.totalPnl >= 0 ? 'text-success' : 'text-danger'
|
||
},
|
||
isCryptoMarket () {
|
||
// IMPORTANT: do not rely on form.getFieldValue for reactivity (Ant Form is not reactive).
|
||
// Always depend on selectedMarketCategory to make UI reactive.
|
||
const cat = this.selectedMarketCategory || 'Crypto'
|
||
return String(cat).toLowerCase() === 'crypto'
|
||
},
|
||
// Check if selected market supports live trading (Crypto, USStock/HShare with IBKR, or Forex with MT5)
|
||
canUseLiveTrading () {
|
||
const cat = this.selectedMarketCategory || 'Crypto'
|
||
// Crypto always supports live trading via crypto exchanges
|
||
if (String(cat).toLowerCase() === 'crypto') {
|
||
return true
|
||
}
|
||
// USStock/HShare can use IBKR for live trading
|
||
if (['USStock', 'HShare'].includes(cat)) {
|
||
return true
|
||
}
|
||
// Forex can use MT5 for live trading
|
||
if (cat === 'Forex') {
|
||
return true
|
||
}
|
||
return false
|
||
},
|
||
// Check if current market + exchange combination supports live trading
|
||
isLiveTradingAvailable () {
|
||
const cat = this.selectedMarketCategory || 'Crypto'
|
||
const exchangeId = this.currentExchangeId || ''
|
||
// Crypto markets use crypto exchanges
|
||
if (String(cat).toLowerCase() === 'crypto') {
|
||
return ['binance', 'okx', 'bitget', 'bybit', 'coinbaseexchange', 'kraken', 'kucoin', 'gate', 'bitfinex'].includes(exchangeId)
|
||
}
|
||
// USStock/HShare use IBKR
|
||
if (['USStock', 'HShare'].includes(cat)) {
|
||
return this.currentBrokerId === 'ibkr'
|
||
}
|
||
// Forex uses MT5
|
||
if (cat === 'Forex') {
|
||
return this.currentBrokerId === 'mt5'
|
||
}
|
||
return false
|
||
},
|
||
// Broker options for US/HK stocks (with i18n support)
|
||
brokerOptions () {
|
||
return BROKER_OPTIONS.map(broker => {
|
||
let label = ''
|
||
try {
|
||
const translationKey = `trading-assistant.brokerNames.${broker.labelKey}`
|
||
const translated = this.$t(translationKey)
|
||
if (translated !== translationKey) {
|
||
label = translated
|
||
}
|
||
} catch (e) {}
|
||
if (!label) {
|
||
label = broker.name || broker.value.toUpperCase()
|
||
}
|
||
return {
|
||
...broker,
|
||
displayName: label
|
||
}
|
||
})
|
||
},
|
||
// Forex broker options (with i18n support)
|
||
forexBrokerOptions () {
|
||
return FOREX_BROKER_OPTIONS.map(broker => {
|
||
let label = ''
|
||
try {
|
||
const translationKey = `trading-assistant.brokerNames.${broker.labelKey}`
|
||
const translated = this.$t(translationKey)
|
||
if (translated !== translationKey) {
|
||
label = translated
|
||
}
|
||
} catch (e) {}
|
||
if (!label) {
|
||
label = broker.name || broker.value.toUpperCase()
|
||
}
|
||
return {
|
||
...broker,
|
||
displayName: label
|
||
}
|
||
})
|
||
},
|
||
// Crypto exchange options only
|
||
cryptoExchangeOptions () {
|
||
return EXCHANGE_OPTIONS.map(exchange => {
|
||
let label = ''
|
||
try {
|
||
if (exchange.labelKey) {
|
||
const translationKey = `trading-assistant.exchangeNames.${exchange.labelKey}`
|
||
const translated = this.$t(translationKey)
|
||
if (translated !== translationKey) {
|
||
label = translated
|
||
}
|
||
}
|
||
} catch (e) {}
|
||
if (!label) {
|
||
label = exchange.value.charAt(0).toUpperCase() + exchange.value.slice(1)
|
||
}
|
||
return {
|
||
...exchange,
|
||
displayName: label
|
||
}
|
||
})
|
||
},
|
||
// 策略分组显示
|
||
groupedStrategies () {
|
||
const groups = {}
|
||
const ungrouped = []
|
||
|
||
for (const s of this.strategies) {
|
||
const groupId = s.strategy_group_id
|
||
if (groupId && groupId.trim()) {
|
||
if (!groups[groupId]) {
|
||
groups[groupId] = {
|
||
id: groupId,
|
||
baseName: s.group_base_name || s.strategy_name.split('-')[0],
|
||
strategies: [],
|
||
// 统计信息
|
||
runningCount: 0,
|
||
stoppedCount: 0
|
||
}
|
||
}
|
||
groups[groupId].strategies.push(s)
|
||
if (s.status === 'running') {
|
||
groups[groupId].runningCount++
|
||
} else {
|
||
groups[groupId].stoppedCount++
|
||
}
|
||
} else {
|
||
ungrouped.push(s)
|
||
}
|
||
}
|
||
|
||
// 转换为数组，按创建时间排序
|
||
const groupList = Object.values(groups).sort((a, b) => {
|
||
const aTime = Math.max(...a.strategies.map(s => s.created_at || 0))
|
||
const bTime = Math.max(...b.strategies.map(s => s.created_at || 0))
|
||
return bTime - aTime
|
||
})
|
||
|
||
return { groups: groupList, ungrouped }
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
loading: false,
|
||
loadingRecords: false,
|
||
strategies: [],
|
||
selectedStrategy: null,
|
||
showFormModal: false,
|
||
// Only indicator strategy in local mode
|
||
strategyType: 'indicator',
|
||
selectedMarketCategory: 'Crypto', // AShare / USStock / Crypto / Forex
|
||
currentStep: 0,
|
||
saving: false,
|
||
loadingIndicators: false,
|
||
availableIndicators: [],
|
||
selectedIndicator: null,
|
||
cryptoSymbols: CRYPTO_SYMBOLS,
|
||
// Watchlist symbols (same source as indicator-analysis page)
|
||
loadingWatchlist: false,
|
||
watchlist: [],
|
||
exchangeOptions: EXCHANGE_OPTIONS,
|
||
currentExchangeId: '',
|
||
currentBrokerId: 'ibkr',
|
||
testing: false,
|
||
testResult: null,
|
||
connectionTestResult: null,
|
||
indicatorsLoaded: false, // 标记指标是否已加载
|
||
editingStrategy: null, // 正在编辑的策略
|
||
currentEquity: null, // 当前净值
|
||
equityPollingTimer: null, // 净值轮询定时器
|
||
// Backtest-like UI state (same as indicator-analysis BacktestModal step1)
|
||
backtestCollapseKeys: ['risk'],
|
||
trailingEnabledUi: false,
|
||
entryPctMaxUi: 100,
|
||
aiFilterEnabledUi: false,
|
||
isEditMode: false, // 是否为编辑模式
|
||
supportedIPs: [], // 白名单IP列表
|
||
executionModeUi: 'signal',
|
||
notifyChannelsUi: ['browser'],
|
||
// Exchange credentials vault
|
||
loadingExchangeCredentials: false,
|
||
exchangeCredentials: [],
|
||
saveCredentialUi: false,
|
||
suppressApiClearOnce: false,
|
||
// 多币种选择（创建模式）
|
||
selectedSymbols: [],
|
||
// 策略组折叠状态
|
||
collapsedGroups: {}
|
||
// Market category is inferred from Step 1 watchlist symbol ("Market:SYMBOL").
|
||
}
|
||
},
|
||
beforeCreate () {
|
||
this.form = this.$form.createForm(this)
|
||
},
|
||
mounted () {
|
||
this.loadStrategies()
|
||
},
|
||
beforeDestroy () {
|
||
this.stopEquityPolling()
|
||
},
|
||
methods: {
|
||
async loadWatchlist () {
|
||
this.loadingWatchlist = true
|
||
try {
|
||
const res = await getWatchlist({ userid: 1 })
|
||
if (res && res.code === 1) {
|
||
this.watchlist = Array.isArray(res.data) ? res.data : []
|
||
} else {
|
||
this.watchlist = []
|
||
}
|
||
} catch (e) {
|
||
this.watchlist = []
|
||
} finally {
|
||
this.loadingWatchlist = false
|
||
}
|
||
},
|
||
filterWatchlistOption (input, option) {
|
||
const value = option.componentOptions?.propsData?.value || ''
|
||
return String(value).toLowerCase().includes(String(input || '').toLowerCase())
|
||
},
|
||
getMarketColor (market) {
|
||
const colors = {
|
||
USStock: 'green',
|
||
Crypto: 'purple',
|
||
Forex: 'gold',
|
||
Futures: 'cyan',
|
||
AShare: 'blue',
|
||
HShare: 'orange'
|
||
}
|
||
return colors[market] || 'default'
|
||
},
|
||
handleWatchlistSymbolChange (val) {
|
||
// val format: "Market:SYMBOL" (same as indicator-analysis page)
|
||
if (!val || typeof val !== 'string' || !val.includes(':')) {
|
||
return
|
||
}
|
||
const idx = val.indexOf(':')
|
||
const market = val.slice(0, idx)
|
||
// Keep selection reactive for Step 3 execution gating
|
||
this.selectedMarketCategory = market || 'Crypto'
|
||
|
||
// Auto-set broker ID based on market category
|
||
if (this.selectedMarketCategory === 'Forex') {
|
||
this.currentBrokerId = 'mt5'
|
||
try {
|
||
this.form && this.form.setFieldsValue && this.form.setFieldsValue({ forex_broker_id: 'mt5' })
|
||
} catch (e) {}
|
||
} else if (['USStock', 'HShare'].includes(this.selectedMarketCategory)) {
|
||
this.currentBrokerId = 'ibkr'
|
||
try {
|
||
this.form && this.form.setFieldsValue && this.form.setFieldsValue({ broker_id: 'ibkr' })
|
||
} catch (e) {}
|
||
}
|
||
|
||
// Markets without live trading support: force back to signal mode
|
||
// Crypto, USStock, HShare, Forex support live trading; others do not
|
||
const supportsLiveTrading = ['Crypto', 'USStock', 'HShare', 'Forex'].includes(this.selectedMarketCategory)
|
||
if (!supportsLiveTrading) {
|
||
this.executionModeUi = 'signal'
|
||
try {
|
||
this.form && this.form.setFieldsValue && this.form.setFieldsValue({ execution_mode: 'signal' })
|
||
} catch (e) {}
|
||
}
|
||
|
||
// Clear exchange selection when market changes (different markets use different exchanges)
|
||
this.currentExchangeId = ''
|
||
try {
|
||
this.form && this.form.setFieldsValue && this.form.setFieldsValue({ exchange_id: undefined })
|
||
} catch (e) {}
|
||
},
|
||
handleMultiSymbolChange (vals) {
|
||
// vals: array like ["Crypto:BTC/USDT", "Crypto:ETH/USDT"]
|
||
this.selectedSymbols = vals || []
|
||
|
||
// Update market type based on selected symbols
|
||
if (vals && vals.length > 0) {
|
||
const firstVal = vals[0]
|
||
if (typeof firstVal === 'string' && firstVal.includes(':')) {
|
||
const idx = firstVal.indexOf(':')
|
||
const market = firstVal.slice(0, idx)
|
||
this.selectedMarketCategory = market || 'Crypto'
|
||
}
|
||
}
|
||
|
||
// Auto-set broker ID based on market category
|
||
if (this.selectedMarketCategory === 'Forex') {
|
||
this.currentBrokerId = 'mt5'
|
||
try {
|
||
this.form && this.form.setFieldsValue && this.form.setFieldsValue({ forex_broker_id: 'mt5' })
|
||
} catch (e) {}
|
||
} else if (['USStock', 'HShare'].includes(this.selectedMarketCategory)) {
|
||
this.currentBrokerId = 'ibkr'
|
||
try {
|
||
this.form && this.form.setFieldsValue && this.form.setFieldsValue({ broker_id: 'ibkr' })
|
||
} catch (e) {}
|
||
}
|
||
|
||
// Markets without live trading support: force back to signal mode
|
||
const supportsLiveTrading = ['Crypto', 'USStock', 'HShare', 'Forex'].includes(this.selectedMarketCategory)
|
||
if (!supportsLiveTrading) {
|
||
this.executionModeUi = 'signal'
|
||
try {
|
||
this.form && this.form.setFieldsValue && this.form.setFieldsValue({ execution_mode: 'signal' })
|
||
} catch (e) {}
|
||
}
|
||
|
||
// Clear exchange selection when market changes
|
||
this.currentExchangeId = ''
|
||
try {
|
||
this.form && this.form.setFieldsValue && this.form.setFieldsValue({ exchange_id: undefined })
|
||
} catch (e) {}
|
||
},
|
||
async loadExchangeCredentials () {
|
||
this.loadingExchangeCredentials = true
|
||
try {
|
||
const res = await listExchangeCredentials({ user_id: 1 })
|
||
if (res && res.code === 1) {
|
||
this.exchangeCredentials = (res.data && res.data.items) || []
|
||
} else {
|
||
this.exchangeCredentials = []
|
||
this.$message.warning(res?.msg || this.$t('trading-assistant.messages.loadFailed'))
|
||
}
|
||
} catch (e) {
|
||
this.exchangeCredentials = []
|
||
this.$message.warning(this.$t('trading-assistant.exchange.testFailed'))
|
||
} finally {
|
||
this.loadingExchangeCredentials = false
|
||
}
|
||
},
|
||
formatCredentialLabel (cred) {
|
||
if (!cred) return ''
|
||
const name = (cred.name || '').trim()
|
||
const ex = cred.exchange_id || ''
|
||
const hint = cred.api_key_hint || ''
|
||
return name ? `${ex.toUpperCase()} - ${name} (${hint})` : `${ex.toUpperCase()} (${hint})`
|
||
},
|
||
async handleCredentialSelectChange (credentialId) {
|
||
// Selecting a saved credential auto-fills exchange fields
|
||
if (!credentialId) {
|
||
return
|
||
}
|
||
|
||
// First try to find in local list to avoid API call delay/failure
|
||
const localCred = this.exchangeCredentials.find(c => String(c.id) === String(credentialId))
|
||
|
||
// Function to apply config
|
||
const applyConfig = async (cfg) => {
|
||
if (!cfg) return
|
||
|
||
// 1. Update exchange ID to ensure correct fields (like passphrase) are rendered
|
||
this.currentExchangeId = cfg.exchange_id || ''
|
||
|
||
// 2. Wait for UI to update (render passphrase field if needed)
|
||
await this.$nextTick()
|
||
|
||
// 3. Set form values
|
||
// Prevent handleExchangeSelectChange() from clearing API fields when we programmatically set exchange_id.
|
||
this.suppressApiClearOnce = true
|
||
this.form.setFieldsValue({
|
||
exchange_id: cfg.exchange_id,
|
||
api_key: cfg.api_key,
|
||
secret_key: cfg.secret_key,
|
||
passphrase: cfg.passphrase || ''
|
||
})
|
||
|
||
this.testResult = null
|
||
this.connectionTestResult = null
|
||
}
|
||
|
||
try {
|
||
// Try to fetch full config including secrets
|
||
const res = await getExchangeCredential(credentialId, { user_id: 1 })
|
||
if (res && res.code === 1 && res.data && res.data.config) {
|
||
await applyConfig(res.data.config)
|
||
} else if (localCred) {
|
||
// Fallback to local data if API fails or returns no config
|
||
// Note: Local list usually doesn't have secrets, but just in case
|
||
await applyConfig(localCred)
|
||
}
|
||
} catch (e) {
|
||
// Fallback to local data on error
|
||
if (localCred) {
|
||
await applyConfig(localCred)
|
||
}
|
||
}
|
||
},
|
||
onSaveCredentialChange (e) {
|
||
const checked = !!(e && e.target && e.target.checked)
|
||
this.saveCredentialUi = checked
|
||
try {
|
||
this.form && this.form.setFieldsValue && this.form.setFieldsValue({ save_credential: checked })
|
||
} catch (err) {}
|
||
},
|
||
onExecutionModeChange (e) {
|
||
const v = e && e.target ? e.target.value : e
|
||
this.executionModeUi = v || 'signal'
|
||
// If market doesn't support live trading, force signal mode
|
||
if (!this.canUseLiveTrading && this.executionModeUi !== 'signal') {
|
||
this.executionModeUi = 'signal'
|
||
try {
|
||
this.form && this.form.setFieldsValue && this.form.setFieldsValue({ execution_mode: 'signal' })
|
||
} catch (err) {}
|
||
}
|
||
},
|
||
onNotifyChannelsChange (vals) {
|
||
this.notifyChannelsUi = Array.isArray(vals) ? vals : []
|
||
},
|
||
formatCurrency (value) {
|
||
if (value === null || value === undefined) return '-'
|
||
return '$' + value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||
},
|
||
formatPnl (value) {
|
||
if (value === null || value === undefined) return '-'
|
||
const prefix = value >= 0 ? '+' : ''
|
||
return prefix + '$' + Math.abs(value).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||
},
|
||
formatPnlPercent (value) {
|
||
if (value === null || value === undefined) return '-'
|
||
const prefix = value >= 0 ? '+' : ''
|
||
return prefix + Math.abs(value).toFixed(2) + '%'
|
||
},
|
||
async loadStrategies () {
|
||
this.loading = true
|
||
try {
|
||
const res = await getStrategyList()
|
||
if (res.code === 1) {
|
||
// 显示所有策略（包括指标策略和AI策略）
|
||
const allStrategies = res.data.strategies || []
|
||
this.strategies = allStrategies
|
||
// 如果有选中的策略，更新它
|
||
if (this.selectedStrategy) {
|
||
const updated = this.strategies.find(s => s.id === this.selectedStrategy.id)
|
||
if (updated) {
|
||
this.selectedStrategy = updated
|
||
} else {
|
||
// 如果选中的策略被过滤掉了，清空选中状态
|
||
this.selectedStrategy = null
|
||
}
|
||
}
|
||
} else {
|
||
this.$message.error(res.msg || this.$t('trading-assistant.messages.loadFailed'))
|
||
}
|
||
} catch (error) {
|
||
this.$message.error(this.$t('trading-assistant.messages.loadFailed'))
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
handleCreateStrategy () {
|
||
// Local mode: open indicator strategy modal directly
|
||
this.isEditMode = false
|
||
this.editingStrategy = null
|
||
this.strategyType = 'indicator'
|
||
this.currentStep = 0
|
||
this.currentExchangeId = ''
|
||
this.currentBrokerId = 'ibkr'
|
||
this.selectedIndicator = null
|
||
this.testResult = null
|
||
this.connectionTestResult = null
|
||
this.executionModeUi = 'signal'
|
||
this.notifyChannelsUi = ['browser']
|
||
this.saveCredentialUi = false
|
||
this.backtestCollapseKeys = ['risk']
|
||
this.trailingEnabledUi = false
|
||
this.entryPctMaxUi = 100
|
||
this.aiFilterEnabledUi = false
|
||
this.selectedMarketCategory = 'Crypto'
|
||
this.selectedSymbols = []
|
||
|
||
this.form.resetFields()
|
||
this.form.setFieldsValue({
|
||
execution_mode: 'signal',
|
||
notify_channels: ['browser'],
|
||
save_credential: false
|
||
})
|
||
this.showFormModal = true
|
||
|
||
this.$nextTick(() => {
|
||
this.loadWatchlist()
|
||
this.loadIndicators()
|
||
this.loadExchangeCredentials()
|
||
})
|
||
},
|
||
handleEditStrategy (strategy) {
|
||
// 如果策略正在运行，提示用户先停止
|
||
if (strategy.status === 'running') {
|
||
this.$message.warning(this.$t('trading-assistant.messages.runningWarning'))
|
||
return
|
||
}
|
||
|
||
// Local mode: indicator strategy only
|
||
this.strategyType = 'indicator'
|
||
|
||
this.isEditMode = true
|
||
this.editingStrategy = strategy
|
||
this.currentStep = 0
|
||
this.currentExchangeId = ''
|
||
this.selectedIndicator = null
|
||
this.testResult = null
|
||
this.connectionTestResult = null
|
||
this.form.resetFields()
|
||
this.backtestCollapseKeys = ['risk']
|
||
this.trailingEnabledUi = false
|
||
this.entryPctMaxUi = 100
|
||
this.aiFilterEnabledUi = false
|
||
|
||
// IMPORTANT:
|
||
// Ensure modal is visible BEFORE filling form values, otherwise some fields are not registered yet
|
||
// (especially Step 2/3 fields) and setFieldsValue may silently drop values.
|
||
this.showFormModal = true
|
||
|
||
// Delay loading to ensure modal/form items are mounted.
|
||
this.$nextTick(async () => {
|
||
// Keep data sources in sync (same as create flow)
|
||
this.loadWatchlist()
|
||
this.loadIndicators()
|
||
this.loadExchangeCredentials()
|
||
await this.loadStrategyDataToForm(strategy)
|
||
})
|
||
},
|
||
async loadStrategyDataToForm (strategy) {
|
||
// 先加载指标列表（如果需要）
|
||
if (!this.indicatorsLoaded) {
|
||
await this.loadIndicators()
|
||
}
|
||
|
||
// 使用 nextTick 确保表单已初始化
|
||
await this.$nextTick()
|
||
|
||
// Market / execution / notification defaults (backward compatible)
|
||
this.selectedMarketCategory = strategy.market_category || 'Crypto'
|
||
const executionMode = strategy.execution_mode || 'signal'
|
||
this.executionModeUi = executionMode
|
||
const notifyChannels = (strategy.notification_config && strategy.notification_config.channels) || ['browser']
|
||
this.notifyChannelsUi = Array.isArray(notifyChannels) ? notifyChannels : ['browser']
|
||
|
||
// Initialize trading config UI states first
|
||
let trailingEnabled = false
|
||
// Initialize AI filter state
|
||
let aiFilterEnabled = false
|
||
|
||
if (strategy.trading_config) {
|
||
const tc = strategy.trading_config || {}
|
||
const trailingObj = (tc.trailing && typeof tc.trailing === 'object') ? tc.trailing : null
|
||
trailingEnabled = (tc.trailing_enabled !== undefined) ? !!tc.trailing_enabled : !!(trailingObj && trailingObj.enabled)
|
||
|
||
// Check AI filter - handle various truthy values
|
||
const aiVal = tc.enable_ai_filter
|
||
aiFilterEnabled = aiVal === true || aiVal === 'true' || aiVal === 1 || aiVal === '1'
|
||
|
||
// Determine which collapse panels to open based on config to ensure fields are rendered
|
||
const scaleObj = (tc.scale && typeof tc.scale === 'object') ? tc.scale : null
|
||
const posObj = (tc.position && typeof tc.position === 'object') ? tc.position : null
|
||
const panels = new Set(['risk']) // Always keep risk panel open or as default
|
||
|
||
// Check Scale panel content
|
||
if (
|
||
tc.trend_add_enabled || tc.dca_add_enabled ||
|
||
(scaleObj && (scaleObj.trendAdd?.enabled || scaleObj.dcaAdd?.enabled))
|
||
) {
|
||
panels.add('scale')
|
||
}
|
||
|
||
// Check Reduce panel content
|
||
if (
|
||
tc.trend_reduce_enabled || tc.adverse_reduce_enabled ||
|
||
(scaleObj && (scaleObj.trendReduce?.enabled || scaleObj.adverseReduce?.enabled))
|
||
) {
|
||
panels.add('reduce')
|
||
}
|
||
|
||
// Check Position panel content - open if entry_pct is customized or if we just want to show it
|
||
// Considering "Entry sizing" parameter missing issue, better to expand it if data exists
|
||
if (tc.entry_pct !== undefined || (posObj && posObj.entryPct !== undefined)) {
|
||
panels.add('position')
|
||
}
|
||
|
||
this.backtestCollapseKeys = Array.from(panels)
|
||
}
|
||
this.trailingEnabledUi = trailingEnabled
|
||
this.aiFilterEnabledUi = aiFilterEnabled
|
||
|
||
// Wait for DOM update to ensure v-if fields (trailing) and Collapse panels are rendered
|
||
await this.$nextTick()
|
||
|
||
// First, set the "switch" fields that might control v-if visibility of other fields
|
||
// For ai_filter, it relies on aiFilterEnabledUi which is updated above, so form value is secondary for UI display
|
||
// But we still need to set form value for submission
|
||
this.form.setFieldsValue({
|
||
enable_ai_filter: aiFilterEnabled
|
||
})
|
||
|
||
// Wait for form value to update and v-if to re-render (for ai_filter)
|
||
await this.$nextTick()
|
||
|
||
this.form.setFieldsValue({
|
||
execution_mode: this.executionModeUi,
|
||
notify_channels: this.notifyChannelsUi,
|
||
notify_email: strategy.notification_config?.targets?.email || '',
|
||
notify_phone: strategy.notification_config?.targets?.phone || '',
|
||
notify_telegram: strategy.notification_config?.targets?.telegram || '',
|
||
notify_discord: strategy.notification_config?.targets?.discord || '',
|
||
notify_webhook: strategy.notification_config?.targets?.webhook || ''
|
||
})
|
||
|
||
// 加载指标数据
|
||
if (strategy.indicator_config && strategy.indicator_config.indicator_id) {
|
||
// 查找对应的指标，确保ID类型一致（处理 string vs number 问题）
|
||
const targetId = strategy.indicator_config.indicator_id
|
||
// 使用字符串比较处理类型不匹配问题（string vs number）
|
||
const indicator = this.availableIndicators.find(ind => {
|
||
return String(ind.id) === String(targetId)
|
||
})
|
||
|
||
if (indicator) {
|
||
// 找到匹配的指标，使用指标对象中的ID（确保类型一致）
|
||
const finalId = String(indicator.id)
|
||
this.form.setFieldsValue({
|
||
indicator_id: finalId
|
||
})
|
||
this.handleIndicatorChange(finalId)
|
||
} else {
|
||
// 如果找不到，仍然设置值，但可能显示为ID
|
||
this.form.setFieldsValue({
|
||
indicator_id: String(targetId)
|
||
})
|
||
}
|
||
}
|
||
|
||
// Load exchange/broker configuration
|
||
if (strategy.exchange_config) {
|
||
const exchangeId = strategy.exchange_config.exchange_id || ''
|
||
const isLive = this.executionModeUi === 'live'
|
||
const supportsLiveTrading = ['Crypto', 'USStock', 'HShare', 'Forex'].includes(this.selectedMarketCategory)
|
||
const isBrokerMarket = ['USStock', 'HShare'].includes(this.selectedMarketCategory)
|
||
const isForexMarket = this.selectedMarketCategory === 'Forex'
|
||
|
||
if (isLive && supportsLiveTrading) {
|
||
if (isBrokerMarket) {
|
||
// Broker configuration (US/HK stocks)
|
||
this.currentBrokerId = exchangeId || 'ibkr'
|
||
this.form.setFieldsValue({
|
||
broker_id: exchangeId || 'ibkr',
|
||
ibkr_host: strategy.exchange_config.ibkr_host || '127.0.0.1',
|
||
ibkr_port: strategy.exchange_config.ibkr_port || 7497,
|
||
ibkr_client_id: strategy.exchange_config.ibkr_client_id || 1,
|
||
ibkr_account: strategy.exchange_config.ibkr_account || ''
|
||
})
|
||
} else if (isForexMarket) {
|
||
// MT5 configuration (Forex)
|
||
this.currentBrokerId = exchangeId || 'mt5'
|
||
this.form.setFieldsValue({
|
||
forex_broker_id: exchangeId || 'mt5',
|
||
mt5_server: strategy.exchange_config.mt5_server || '',
|
||
mt5_login: strategy.exchange_config.mt5_login || '',
|
||
mt5_password: strategy.exchange_config.mt5_password || '',
|
||
mt5_terminal_path: strategy.exchange_config.mt5_terminal_path || ''
|
||
})
|
||
} else {
|
||
// Crypto exchange configuration
|
||
this.currentExchangeId = exchangeId
|
||
this.suppressApiClearOnce = true
|
||
this.form.setFieldsValue({
|
||
exchange_id: exchangeId,
|
||
credential_id: strategy.exchange_config.credential_id || undefined,
|
||
api_key: strategy.exchange_config.api_key || '',
|
||
secret_key: strategy.exchange_config.secret_key || '',
|
||
passphrase: strategy.exchange_config.passphrase || ''
|
||
})
|
||
|
||
// If a vault credential is selected, auto-fill secrets from vault
|
||
const credId = strategy.exchange_config.credential_id
|
||
if (credId) {
|
||
await this.handleCredentialSelectChange(credId)
|
||
}
|
||
}
|
||
}
|
||
|
||
// Update UI state
|
||
if (isBrokerMarket || isForexMarket) {
|
||
this.currentBrokerId = exchangeId || (isForexMarket ? 'mt5' : 'ibkr')
|
||
} else {
|
||
this.currentExchangeId = exchangeId
|
||
}
|
||
}
|
||
|
||
// 加载交易配置
|
||
if (strategy.trading_config) {
|
||
const tc = strategy.trading_config || {}
|
||
const trailingObj = (tc.trailing && typeof tc.trailing === 'object') ? tc.trailing : null
|
||
const scaleObj = (tc.scale && typeof tc.scale === 'object') ? tc.scale : null
|
||
const posObj = (tc.position && typeof tc.position === 'object') ? tc.position : null
|
||
|
||
// Backward compatible: nested configs from indicator-analysis backtest modal
|
||
const trendAddObj = scaleObj && scaleObj.trendAdd ? scaleObj.trendAdd : null
|
||
const dcaAddObj = scaleObj && scaleObj.dcaAdd ? scaleObj.dcaAdd : null
|
||
const trendReduceObj = scaleObj && scaleObj.trendReduce ? scaleObj.trendReduce : null
|
||
const adverseReduceObj = scaleObj && scaleObj.adverseReduce ? scaleObj.adverseReduce : null
|
||
|
||
// Backward compatible: show symbol as "Market:SYMBOL" for watchlist dropdown
|
||
const rawSymbol = tc.symbol
|
||
const symbolValue = (typeof rawSymbol === 'string' && rawSymbol.includes(':'))
|
||
? rawSymbol
|
||
: `${this.selectedMarketCategory}:${rawSymbol}`
|
||
this.form.setFieldsValue({
|
||
strategy_name: strategy.strategy_name,
|
||
symbol: symbolValue,
|
||
initial_capital: tc.initial_capital,
|
||
leverage: tc.leverage,
|
||
trade_direction: tc.trade_direction || 'long',
|
||
timeframe: tc.timeframe || '1H',
|
||
market_type: (tc.market_type === 'futures' ? 'swap' : (tc.market_type || 'swap')),
|
||
take_profit_pct: tc.take_profit_pct || 0,
|
||
stop_loss_pct: tc.stop_loss_pct || 0,
|
||
// Trailing: support both flat fields and nested trailing object
|
||
trailing_enabled: trailingEnabled,
|
||
trailing_stop_pct: (tc.trailing_stop_pct !== undefined) ? (tc.trailing_stop_pct || 0) : (trailingObj ? (trailingObj.pct || 0) : 0),
|
||
trailing_activation_pct: (tc.trailing_activation_pct !== undefined) ? (tc.trailing_activation_pct || 0) : (trailingObj ? (trailingObj.activationPct || 0) : 0),
|
||
// Scale / reduce: support both flat fields and nested objects
|
||
trend_add_enabled: (tc.trend_add_enabled !== undefined) ? !!tc.trend_add_enabled : !!(trendAddObj && trendAddObj.enabled),
|
||
trend_add_step_pct: (tc.trend_add_step_pct !== undefined) ? (tc.trend_add_step_pct || 0) : (trendAddObj ? (trendAddObj.stepPct || 0) : 0),
|
||
trend_add_size_pct: (tc.trend_add_size_pct !== undefined) ? (tc.trend_add_size_pct || 0) : (trendAddObj ? (trendAddObj.sizePct || 0) : 0),
|
||
trend_add_max_times: (tc.trend_add_max_times !== undefined) ? (tc.trend_add_max_times || 0) : (trendAddObj ? (trendAddObj.maxTimes || 0) : 0),
|
||
dca_add_enabled: (tc.dca_add_enabled !== undefined) ? !!tc.dca_add_enabled : !!(dcaAddObj && dcaAddObj.enabled),
|
||
dca_add_step_pct: (tc.dca_add_step_pct !== undefined) ? (tc.dca_add_step_pct || 0) : (dcaAddObj ? (dcaAddObj.stepPct || 0) : 0),
|
||
dca_add_size_pct: (tc.dca_add_size_pct !== undefined) ? (tc.dca_add_size_pct || 0) : (dcaAddObj ? (dcaAddObj.sizePct || 0) : 0),
|
||
dca_add_max_times: (tc.dca_add_max_times !== undefined) ? (tc.dca_add_max_times || 0) : (dcaAddObj ? (dcaAddObj.maxTimes || 0) : 0),
|
||
trend_reduce_enabled: (tc.trend_reduce_enabled !== undefined) ? !!tc.trend_reduce_enabled : !!(trendReduceObj && trendReduceObj.enabled),
|
||
trend_reduce_step_pct: (tc.trend_reduce_step_pct !== undefined) ? (tc.trend_reduce_step_pct || 0) : (trendReduceObj ? (trendReduceObj.stepPct || 0) : 0),
|
||
trend_reduce_size_pct: (tc.trend_reduce_size_pct !== undefined) ? (tc.trend_reduce_size_pct || 0) : (trendReduceObj ? (trendReduceObj.sizePct || 0) : 0),
|
||
trend_reduce_max_times: (tc.trend_reduce_max_times !== undefined) ? (tc.trend_reduce_max_times || 0) : (trendReduceObj ? (trendReduceObj.maxTimes || 0) : 0),
|
||
adverse_reduce_enabled: (tc.adverse_reduce_enabled !== undefined) ? !!tc.adverse_reduce_enabled : !!(adverseReduceObj && adverseReduceObj.enabled),
|
||
adverse_reduce_step_pct: (tc.adverse_reduce_step_pct !== undefined) ? (tc.adverse_reduce_step_pct || 0) : (adverseReduceObj ? (adverseReduceObj.stepPct || 0) : 0),
|
||
adverse_reduce_size_pct: (tc.adverse_reduce_size_pct !== undefined) ? (tc.adverse_reduce_size_pct || 0) : (adverseReduceObj ? (adverseReduceObj.sizePct || 0) : 0),
|
||
adverse_reduce_max_times: (tc.adverse_reduce_max_times !== undefined) ? (tc.adverse_reduce_max_times || 0) : (adverseReduceObj ? (adverseReduceObj.maxTimes || 0) : 0),
|
||
entry_pct: (tc.entry_pct === 0 || tc.entry_pct) ? tc.entry_pct : (posObj && posObj.entryPct ? posObj.entryPct : 100),
|
||
// AI智能决策过滤
|
||
enable_ai_filter: aiFilterEnabled
|
||
})
|
||
|
||
this.$nextTick(() => {
|
||
this.recalcEntryPctMaxUi()
|
||
this.normalizeEntryPct()
|
||
})
|
||
}
|
||
},
|
||
handleSelectStrategy (strategy) {
|
||
this.selectedStrategy = strategy
|
||
this.currentEquity = null // 重置当前净值
|
||
this.loadStrategyDetails()
|
||
this.startEquityPolling() // 开始轮询净值
|
||
},
|
||
async loadStrategyDetails () {
|
||
if (!this.selectedStrategy) {
|
||
return Promise.resolve()
|
||
}
|
||
// 加载净值数据
|
||
try {
|
||
const res = await getStrategyEquityCurve(this.selectedStrategy.id)
|
||
if (res.code === 1 && res.data) {
|
||
// Local backend returns an array curve: [{ time, equity }, ...]
|
||
if (Array.isArray(res.data) && res.data.length > 0) {
|
||
const last = res.data[res.data.length - 1]
|
||
this.currentEquity = last.equity
|
||
} else {
|
||
const base = this.selectedStrategy.trading_config?.initial_capital || this.selectedStrategy.initial_capital
|
||
this.currentEquity = base || null
|
||
}
|
||
}
|
||
} catch (error) {
|
||
}
|
||
},
|
||
startEquityPolling () {
|
||
this.stopEquityPolling()
|
||
if (!this.selectedStrategy) return
|
||
|
||
// 初始加载一次
|
||
this.loadStrategyDetails()
|
||
|
||
// 每30秒轮询一次
|
||
this.equityPollingTimer = setInterval(() => {
|
||
this.loadStrategyDetails()
|
||
}, 30000)
|
||
},
|
||
stopEquityPolling () {
|
||
if (this.equityPollingTimer) {
|
||
clearInterval(this.equityPollingTimer)
|
||
this.equityPollingTimer = null
|
||
}
|
||
},
|
||
handleCloseModal () {
|
||
this.showFormModal = false
|
||
this.editingStrategy = null
|
||
this.isEditMode = false
|
||
this.strategyType = 'indicator'
|
||
this.currentStep = 0
|
||
this.currentExchangeId = ''
|
||
this.selectedIndicator = null
|
||
this.testResult = null
|
||
this.connectionTestResult = null
|
||
this.indicatorsLoaded = false
|
||
this.availableIndicators = []
|
||
this.backtestCollapseKeys = ['risk']
|
||
this.trailingEnabledUi = false
|
||
this.entryPctMaxUi = 100
|
||
this.aiFilterEnabledUi = false
|
||
|
||
this.form.resetFields()
|
||
},
|
||
handleRefresh () {
|
||
this.loadStrategies()
|
||
this.showFormModal = false
|
||
},
|
||
handleMenuClick (key, strategy) {
|
||
switch (key) {
|
||
case 'start':
|
||
this.handleStartStrategy(strategy.id)
|
||
break
|
||
case 'stop':
|
||
this.handleStopStrategy(strategy.id)
|
||
break
|
||
case 'edit':
|
||
this.handleEditStrategy(strategy)
|
||
break
|
||
case 'delete':
|
||
this.handleDeleteStrategy(strategy)
|
||
break
|
||
}
|
||
},
|
||
toggleGroup (groupId) {
|
||
this.$set(this.collapsedGroups, groupId, !this.collapsedGroups[groupId])
|
||
},
|
||
async handleGroupMenuClick (key, group) {
|
||
const strategyIds = group.strategies.map(s => s.id)
|
||
switch (key) {
|
||
case 'startAll':
|
||
await this.handleBatchStartStrategies(strategyIds, group.baseName)
|
||
break
|
||
case 'stopAll':
|
||
await this.handleBatchStopStrategies(strategyIds, group.baseName)
|
||
break
|
||
case 'deleteAll':
|
||
await this.handleBatchDeleteStrategies(strategyIds, group.baseName)
|
||
break
|
||
}
|
||
},
|
||
async handleBatchStartStrategies (strategyIds, groupName) {
|
||
try {
|
||
const res = await batchStartStrategies({ strategy_ids: strategyIds })
|
||
if (res.code === 1) {
|
||
const count = res.data?.success_ids?.length || strategyIds.length
|
||
this.$message.success(this.$t('trading-assistant.messages.batchStartSuccess', { count }))
|
||
this.loadStrategies()
|
||
} else {
|
||
this.$message.error(res.msg || this.$t('trading-assistant.messages.batchStartFailed'))
|
||
}
|
||
} catch (error) {
|
||
this.$message.error(this.$t('trading-assistant.messages.batchStartFailed'))
|
||
}
|
||
},
|
||
async handleBatchStopStrategies (strategyIds, groupName) {
|
||
try {
|
||
const res = await batchStopStrategies({ strategy_ids: strategyIds })
|
||
if (res.code === 1) {
|
||
const count = res.data?.success_ids?.length || strategyIds.length
|
||
this.$message.success(this.$t('trading-assistant.messages.batchStopSuccess', { count }))
|
||
this.loadStrategies()
|
||
} else {
|
||
this.$message.error(res.msg || this.$t('trading-assistant.messages.batchStopFailed'))
|
||
}
|
||
} catch (error) {
|
||
this.$message.error(this.$t('trading-assistant.messages.batchStopFailed'))
|
||
}
|
||
},
|
||
async handleBatchDeleteStrategies (strategyIds, groupName) {
|
||
const confirmText = this.$t('trading-assistant.messages.batchDeleteConfirm', {
|
||
count: strategyIds.length,
|
||
name: groupName
|
||
})
|
||
this.$confirm({
|
||
title: this.$t('trading-assistant.deleteAll'),
|
||
content: confirmText,
|
||
okText: this.$t('trading-assistant.deleteAll'),
|
||
okType: 'danger',
|
||
cancelText: this.$t('trading-assistant.form.cancel'),
|
||
onOk: async () => {
|
||
try {
|
||
const res = await batchDeleteStrategies({ strategy_ids: strategyIds })
|
||
if (res.code === 1) {
|
||
const count = res.data?.success_ids?.length || strategyIds.length
|
||
this.$message.success(this.$t('trading-assistant.messages.batchDeleteSuccess', { count }))
|
||
// 如果删除的策略包含当前选中的策略，清空选中状态
|
||
if (this.selectedStrategy && strategyIds.includes(this.selectedStrategy.id)) {
|
||
this.selectedStrategy = null
|
||
this.stopEquityPolling()
|
||
}
|
||
this.loadStrategies()
|
||
} else {
|
||
this.$message.error(res.msg || this.$t('trading-assistant.messages.batchDeleteFailed'))
|
||
}
|
||
} catch (error) {
|
||
this.$message.error(this.$t('trading-assistant.messages.batchDeleteFailed'))
|
||
}
|
||
}
|
||
})
|
||
},
|
||
async handleStartStrategy (id) {
|
||
try {
|
||
const res = await startStrategy(id)
|
||
if (res.code === 1) {
|
||
this.$message.success(this.$t('trading-assistant.messages.startSuccess'))
|
||
this.loadStrategies()
|
||
// 更新选中的策略状态
|
||
if (this.selectedStrategy && this.selectedStrategy.id === id) {
|
||
this.selectedStrategy.status = 'running'
|
||
}
|
||
} else {
|
||
this.$message.error(res.msg || this.$t('trading-assistant.messages.startFailed'))
|
||
}
|
||
} catch (error) {
|
||
this.$message.error(this.$t('trading-assistant.messages.startFailed'))
|
||
}
|
||
},
|
||
async handleStopStrategy (id) {
|
||
try {
|
||
const res = await stopStrategy(id)
|
||
if (res.code === 1) {
|
||
this.$message.success(this.$t('trading-assistant.messages.stopSuccess'))
|
||
this.loadStrategies()
|
||
// 更新选中的策略状态
|
||
if (this.selectedStrategy && this.selectedStrategy.id === id) {
|
||
this.selectedStrategy.status = 'stopped'
|
||
}
|
||
} else {
|
||
this.$message.error(res.msg || this.$t('trading-assistant.messages.stopFailed'))
|
||
}
|
||
} catch (error) {
|
||
this.$message.error(this.$t('trading-assistant.messages.stopFailed'))
|
||
}
|
||
},
|
||
handleDeleteStrategy (strategy) {
|
||
const confirmText = this.$t('trading-assistant.messages.deleteConfirmWithName', {
|
||
name: strategy.strategy_name
|
||
})
|
||
this.$confirm({
|
||
title: this.$t('trading-assistant.deleteStrategy'),
|
||
content: confirmText,
|
||
okText: this.$t('trading-assistant.deleteStrategy'),
|
||
okType: 'danger',
|
||
cancelText: this.$t('trading-assistant.form.cancel'),
|
||
onOk: async () => {
|
||
try {
|
||
const res = await deleteStrategy(strategy.id)
|
||
if (res.code === 1) {
|
||
this.$message.success(this.$t('trading-assistant.messages.deleteSuccess'))
|
||
if (this.selectedStrategy && this.selectedStrategy.id === strategy.id) {
|
||
this.selectedStrategy = null
|
||
this.stopEquityPolling() // 停止轮询
|
||
}
|
||
this.loadStrategies()
|
||
} else {
|
||
this.$message.error(res.msg || this.$t('trading-assistant.messages.deleteFailed'))
|
||
}
|
||
} catch (error) {
|
||
this.$message.error(this.$t('trading-assistant.messages.deleteFailed'))
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getStatusColor (status) {
|
||
const colors = {
|
||
running: 'green',
|
||
stopped: 'default',
|
||
error: 'red'
|
||
}
|
||
return colors[status] || 'default'
|
||
},
|
||
getStatusText (status) {
|
||
return this.$t(`trading-assistant.status.${status}`) || status
|
||
},
|
||
getStrategyTypeText (type) {
|
||
return this.$t(`trading-assistant.strategyType.${type}`) || type
|
||
},
|
||
getTradeDirectionText (direction) {
|
||
if (!direction) return ''
|
||
const directionMap = {
|
||
long: this.$t('trading-assistant.form.tradeDirectionLong') || '做多',
|
||
short: this.$t('trading-assistant.form.tradeDirectionShort') || '做空',
|
||
both: this.$t('trading-assistant.form.tradeDirectionBoth') || '双向'
|
||
}
|
||
return directionMap[direction] || direction
|
||
},
|
||
// 指标相关方法
|
||
async handleIndicatorSelectFocus () {
|
||
// 懒加载：只在用户点击选择框时才加载指标
|
||
if (!this.indicatorsLoaded && !this.loadingIndicators) {
|
||
await this.loadIndicators()
|
||
}
|
||
},
|
||
async loadIndicators () {
|
||
if (this.loadingIndicators) {
|
||
// 如果正在加载，等待加载完成
|
||
return new Promise((resolve) => {
|
||
const checkInterval = setInterval(() => {
|
||
if (!this.loadingIndicators) {
|
||
clearInterval(checkInterval)
|
||
resolve()
|
||
}
|
||
}, 100)
|
||
})
|
||
}
|
||
|
||
if (this.indicatorsLoaded) {
|
||
return Promise.resolve()
|
||
}
|
||
|
||
// 获取用户ID
|
||
const userInfo = this.$store.getters.userInfo || {}
|
||
const userId = userInfo.id || 1
|
||
|
||
this.loadingIndicators = true
|
||
try {
|
||
// 使用和 indicator-analysis 页面相同的接口
|
||
const res = await request({
|
||
url: '/api/indicator/getIndicators',
|
||
method: 'post',
|
||
data: {
|
||
userid: userId
|
||
}
|
||
})
|
||
|
||
if (res.code === 1 && res.data) {
|
||
// 将所有指标（包括选购的和自己创建的）合并到一个数组
|
||
const indicators = res.data.map(item => ({
|
||
id: item.id,
|
||
name: item.name,
|
||
description: item.description,
|
||
type: item.indicator_type || item.indicatorType || 'python',
|
||
code: item.code,
|
||
is_buy: item.is_buy,
|
||
source: item.is_buy === 1 ? 'bought' : 'custom'
|
||
}))
|
||
|
||
this.availableIndicators = indicators
|
||
this.indicatorsLoaded = true
|
||
} else {
|
||
this.availableIndicators = []
|
||
this.$message.warning(res.msg || this.$t('trading-assistant.messages.loadIndicatorsFailed'))
|
||
}
|
||
} catch (error) {
|
||
this.availableIndicators = []
|
||
this.$message.warning(this.$t('trading-assistant.messages.loadIndicatorsFailed'))
|
||
} finally {
|
||
this.loadingIndicators = false
|
||
}
|
||
},
|
||
handleIndicatorChange (indicatorId) {
|
||
const idStr = String(indicatorId)
|
||
this.selectedIndicator = this.availableIndicators.find(ind => String(ind.id) === idStr)
|
||
},
|
||
handleMarketTypeChange (e) {
|
||
const marketType = e.target.value
|
||
// 如果切换到现货，自动设置交易方向为做多，杠杆为1
|
||
if (marketType === 'spot') {
|
||
this.form.setFieldsValue({
|
||
trade_direction: 'long',
|
||
leverage: 1
|
||
})
|
||
}
|
||
},
|
||
// --- Backtest-like UI helpers (Ant Form getFieldValue is not reactive) ---
|
||
recalcEntryPctMaxUi () {
|
||
if (!this.form) {
|
||
this.entryPctMaxUi = 100
|
||
return
|
||
}
|
||
const trendOn = !!this.form.getFieldValue('trend_add_enabled')
|
||
const dcaOn = !!this.form.getFieldValue('dca_add_enabled')
|
||
const trendTimes = Number(this.form.getFieldValue('trend_add_max_times') || 0)
|
||
const dcaTimes = Number(this.form.getFieldValue('dca_add_max_times') || 0)
|
||
const trendSizePct = Number(this.form.getFieldValue('trend_add_size_pct') || 0)
|
||
const dcaSizePct = Number(this.form.getFieldValue('dca_add_size_pct') || 0)
|
||
|
||
const reservePct = (trendOn ? trendTimes * trendSizePct : 0) + (dcaOn ? dcaTimes * dcaSizePct : 0)
|
||
const maxEntryPct = Math.max(0, Math.min(100, 100 - reservePct))
|
||
this.entryPctMaxUi = maxEntryPct
|
||
},
|
||
normalizeEntryPct () {
|
||
if (!this.form) return
|
||
const current = Number(this.form.getFieldValue('entry_pct') || 0)
|
||
const max = Number(this.entryPctMaxUi || 100)
|
||
if (current > max) {
|
||
this.form.setFieldsValue({ entry_pct: max })
|
||
}
|
||
},
|
||
onTrendAddToggle (checked) {
|
||
if (!this.form) return
|
||
// Mutual exclusion to avoid double scale-in on the same candle.
|
||
if (checked) {
|
||
this.form.setFieldsValue({ dca_add_enabled: false })
|
||
}
|
||
this.$nextTick(() => {
|
||
this.recalcEntryPctMaxUi()
|
||
this.normalizeEntryPct()
|
||
})
|
||
},
|
||
onDcaAddToggle (checked) {
|
||
if (!this.form) return
|
||
if (checked) {
|
||
this.form.setFieldsValue({ trend_add_enabled: false })
|
||
}
|
||
this.$nextTick(() => {
|
||
this.recalcEntryPctMaxUi()
|
||
this.normalizeEntryPct()
|
||
})
|
||
},
|
||
onScaleParamsChange () {
|
||
this.$nextTick(() => {
|
||
this.recalcEntryPctMaxUi()
|
||
this.normalizeEntryPct()
|
||
})
|
||
},
|
||
onEntryPctChange () {
|
||
this.$nextTick(() => this.normalizeEntryPct())
|
||
},
|
||
onTrailingToggle (checked) {
|
||
if (!this.form) return
|
||
this.trailingEnabledUi = !!checked
|
||
// Only show fields when enabled; also clear values when disabled.
|
||
if (!checked) {
|
||
this.form.setFieldsValue({ trailing_stop_pct: 0, trailing_activation_pct: 0 })
|
||
}
|
||
},
|
||
onAiFilterToggle (checked) {
|
||
this.aiFilterEnabledUi = !!checked
|
||
// Ensure rc-form value is always in sync even if decorator event binding gets overridden.
|
||
try {
|
||
this.form && this.form.setFieldsValue && this.form.setFieldsValue({ enable_ai_filter: !!checked })
|
||
} catch (e) {}
|
||
},
|
||
filterIndicatorOption (input, option) {
|
||
const text = option.componentOptions.children[0].children[0].text
|
||
return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||
},
|
||
filterSymbolOption (input, option) {
|
||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||
},
|
||
getIndicatorTypeColor (type) {
|
||
const colors = {
|
||
trend: 'blue',
|
||
momentum: 'green',
|
||
volatility: 'orange',
|
||
volume: 'purple',
|
||
custom: 'default'
|
||
}
|
||
return colors[type] || 'default'
|
||
},
|
||
getIndicatorTypeName (type) {
|
||
return this.$t(`trading-assistant.indicatorType.${type}`) || type
|
||
},
|
||
// 交易所相关方法
|
||
getExchangeName (exchange) {
|
||
if (exchange.labelKey) {
|
||
const translationKey = `trading-assistant.exchangeNames.${exchange.labelKey}`
|
||
const translated = this.$t(translationKey)
|
||
// 如果翻译不存在，返回键值本身，否则返回翻译后的名称
|
||
if (translated === translationKey) {
|
||
// 翻译不存在，返回交易所ID的首字母大写
|
||
return exchange.value.charAt(0).toUpperCase() + exchange.value.slice(1)
|
||
}
|
||
return translated
|
||
}
|
||
return exchange.label || exchange.value
|
||
},
|
||
getExchangeDisplayName (exchangeId) {
|
||
if (!exchangeId) return ''
|
||
// 查找对应的交易所选项
|
||
const exchange = this.exchangeOptions.find(ex => ex.value === exchangeId)
|
||
if (exchange) {
|
||
return this.getExchangeName(exchange)
|
||
}
|
||
// 如果找不到，返回格式化的交易所ID
|
||
return exchangeId.charAt(0).toUpperCase() + exchangeId.slice(1)
|
||
},
|
||
getExchangeTagColor (exchangeId) {
|
||
// 为不同交易所设置不同的标签颜色
|
||
const colorMap = {
|
||
binance: 'gold',
|
||
okx: 'blue',
|
||
coinbaseexchange: 'cyan',
|
||
kraken: 'purple',
|
||
bitfinex: 'geekblue',
|
||
huobi: 'orange',
|
||
gate: 'green',
|
||
mexc: 'lime',
|
||
kucoin: 'volcano',
|
||
bybit: 'red',
|
||
bitget: 'magenta',
|
||
bitmex: 'red',
|
||
deribit: 'blue',
|
||
phemex: 'cyan',
|
||
bitmart: 'geekblue',
|
||
bitstamp: 'purple',
|
||
bittrex: 'orange',
|
||
poloniex: 'green',
|
||
gemini: 'lime',
|
||
cryptocom: 'volcano',
|
||
blockchaincom: 'magenta',
|
||
bitflyer: 'red',
|
||
upbit: 'blue',
|
||
bithumb: 'cyan',
|
||
coinone: 'purple',
|
||
zb: 'geekblue',
|
||
lbank: 'orange',
|
||
bibox: 'green',
|
||
bigone: 'lime',
|
||
bitrue: 'volcano',
|
||
coinex: 'magenta',
|
||
ftx: 'red',
|
||
ftxus: 'blue',
|
||
binanceus: 'gold',
|
||
binancecoinm: 'gold',
|
||
binanceusdm: 'gold',
|
||
ibkr: 'green'
|
||
}
|
||
return colorMap[exchangeId] || 'default'
|
||
},
|
||
handleApiConfigChange () {
|
||
// 当API配置字段变化时，清空测试结果，需要重新测试
|
||
this.testResult = null
|
||
this.connectionTestResult = null
|
||
},
|
||
getModalPopupContainer () {
|
||
// Return document.body for Select dropdown to avoid modal scroll issues
|
||
return window.document.body
|
||
},
|
||
handleBrokerSelectChange (value) {
|
||
this.currentBrokerId = value || 'ibkr'
|
||
this.testResult = null
|
||
this.connectionTestResult = null
|
||
},
|
||
handleForexBrokerSelectChange (value) {
|
||
this.currentBrokerId = value || 'mt5'
|
||
this.testResult = null
|
||
this.connectionTestResult = null
|
||
},
|
||
handleExchangeSelectChange (value) {
|
||
this.currentExchangeId = value || ''
|
||
this.testResult = null
|
||
this.connectionTestResult = null
|
||
|
||
// If exchange_id is set programmatically (e.g. by selecting a saved credential),
|
||
// don't clear the api fields we just filled.
|
||
if (this.suppressApiClearOnce) {
|
||
this.suppressApiClearOnce = false
|
||
return
|
||
}
|
||
|
||
// Clear API fields when exchange changes, as we rely on "Saved credential"
|
||
this.$nextTick(() => {
|
||
const fieldsToClear = {
|
||
api_key: undefined,
|
||
secret_key: undefined,
|
||
passphrase: undefined
|
||
}
|
||
setTimeout(() => {
|
||
this.form.setFieldsValue(fieldsToClear)
|
||
}, 100)
|
||
})
|
||
},
|
||
getPlaceholder (fieldType) {
|
||
const placeholders = {
|
||
okx: {
|
||
api_key: '请输入API Key',
|
||
secret_key: '请输入Secret Key',
|
||
passphrase: '请输入Passphrase（创建API时设置）'
|
||
},
|
||
okex: {
|
||
api_key: '请输入API Key',
|
||
secret_key: '请输入Secret Key',
|
||
passphrase: '请输入Passphrase（创建API时设置）'
|
||
},
|
||
binance: {
|
||
api_key: '请输入API Key',
|
||
secret_key: '请输入Secret Key'
|
||
},
|
||
coinbaseexchange: {
|
||
api_key: '请输入API Key（或Key Name）',
|
||
secret_key: '请输入API Secret（或Private Key）',
|
||
passphrase: '请输入Passphrase（Legacy Pro API需要）'
|
||
},
|
||
kucoin: {
|
||
api_key: '请输入API Key',
|
||
secret_key: '请输入Secret Key',
|
||
passphrase: '请输入Passphrase'
|
||
},
|
||
gate: {
|
||
api_key: '请输入API Key',
|
||
secret_key: '请输入Secret Key'
|
||
},
|
||
mexc: {
|
||
api_key: '请输入Access Key',
|
||
secret_key: '请输入Secret Key'
|
||
},
|
||
kraken: {
|
||
api_key: '请输入API Key',
|
||
secret_key: '请输入Secret Key'
|
||
},
|
||
bitfinex: {
|
||
api_key: '请输入API Key',
|
||
secret_key: '请输入Secret Key'
|
||
},
|
||
bybit: {
|
||
api_key: '请输入API Key',
|
||
secret_key: '请输入Secret Key'
|
||
},
|
||
bitget: {
|
||
api_key: '请输入API Key',
|
||
secret_key: '请输入Secret Key',
|
||
passphrase: '请输入Passphrase（Legacy Pro API需要）'
|
||
}
|
||
}
|
||
|
||
const exchangePlaceholders = placeholders[this.currentExchangeId] || {}
|
||
if (exchangePlaceholders[fieldType]) {
|
||
return exchangePlaceholders[fieldType]
|
||
}
|
||
// 默认占位符使用多语言
|
||
const fieldLabels = {
|
||
'api_key': this.$t('trading-assistant.placeholders.inputApiKey'),
|
||
'secret_key': this.$t('trading-assistant.placeholders.inputSecretKey'),
|
||
'passphrase': this.$t('trading-assistant.placeholders.inputPassphrase')
|
||
}
|
||
return fieldLabels[fieldType] || this.$t('trading-assistant.placeholders.inputApiKey')
|
||
},
|
||
async handleTestConnection () {
|
||
this.testResult = null
|
||
this.testing = true
|
||
|
||
try {
|
||
// IBKR uses different connection test (host/port instead of api_key/secret)
|
||
if (this.isIBKRMarket) {
|
||
const values = this.form.getFieldsValue(['ibkr_host', 'ibkr_port', 'ibkr_client_id', 'ibkr_account'])
|
||
const host = values.ibkr_host || '127.0.0.1'
|
||
const port = values.ibkr_port || 7497
|
||
const clientId = values.ibkr_client_id || 1
|
||
const account = values.ibkr_account || ''
|
||
|
||
try {
|
||
// Call IBKR connect API
|
||
const res = await this.$http.post('/api/ibkr/connect', {
|
||
host: host,
|
||
port: parseInt(port),
|
||
clientId: parseInt(clientId),
|
||
account: account
|
||
})
|
||
|
||
if (res.data && res.data.success) {
|
||
this.testResult = {
|
||
success: true,
|
||
message: this.$t('trading-assistant.exchange.ibkrConnectionSuccess')
|
||
}
|
||
this.$message.success(this.$t('trading-assistant.exchange.ibkrConnectionSuccess'))
|
||
} else {
|
||
this.testResult = {
|
||
success: false,
|
||
message: res.data?.error || this.$t('trading-assistant.exchange.ibkrConnectionFailed')
|
||
}
|
||
this.$message.error(this.testResult.message)
|
||
}
|
||
} catch (error) {
|
||
this.testResult = {
|
||
success: false,
|
||
message: error.response?.data?.error || error.message || this.$t('trading-assistant.exchange.ibkrConnectionFailed')
|
||
}
|
||
this.$message.error(this.testResult.message)
|
||
} finally {
|
||
this.testing = false
|
||
}
|
||
return
|
||
}
|
||
|
||
// MT5 uses different connection test (server/login/password)
|
||
if (this.isMT5Market) {
|
||
const values = this.form.getFieldsValue(['mt5_server', 'mt5_login', 'mt5_password', 'mt5_terminal_path'])
|
||
const server = values.mt5_server || ''
|
||
const login = values.mt5_login || ''
|
||
const password = values.mt5_password || ''
|
||
const terminal_path = values.mt5_terminal_path || ''
|
||
|
||
if (!server || !login || !password) {
|
||
this.testResult = {
|
||
success: false,
|
||
message: this.$t('trading-assistant.exchange.fillComplete')
|
||
}
|
||
this.$message.error(this.testResult.message)
|
||
this.testing = false
|
||
return
|
||
}
|
||
|
||
try {
|
||
// Call MT5 connect API
|
||
const res = await this.$http.post('/api/mt5/connect', {
|
||
server: server,
|
||
login: parseInt(login),
|
||
password: password,
|
||
terminal_path: terminal_path
|
||
})
|
||
|
||
if (res.data && res.data.success) {
|
||
this.testResult = {
|
||
success: true,
|
||
message: this.$t('trading-assistant.exchange.mt5ConnectionSuccess')
|
||
}
|
||
this.$message.success(this.$t('trading-assistant.exchange.mt5ConnectionSuccess'))
|
||
} else {
|
||
this.testResult = {
|
||
success: false,
|
||
message: res.data?.error || this.$t('trading-assistant.exchange.mt5ConnectionFailed')
|
||
}
|
||
this.$message.error(this.testResult.message)
|
||
}
|
||
} catch (error) {
|
||
this.testResult = {
|
||
success: false,
|
||
message: error.response?.data?.error || error.message || this.$t('trading-assistant.exchange.mt5ConnectionFailed')
|
||
}
|
||
this.$message.error(this.testResult.message)
|
||
} finally {
|
||
this.testing = false
|
||
}
|
||
return
|
||
}
|
||
|
||
// Crypto exchanges: validate api_key/secret_key fields
|
||
const fieldsToValidate = ['exchange_id', 'api_key', 'secret_key']
|
||
if (this.needsPassphrase) {
|
||
fieldsToValidate.push('passphrase')
|
||
}
|
||
|
||
this.form.validateFields(fieldsToValidate, async (err, values) => {
|
||
if (err) {
|
||
this.testing = false
|
||
this.$message.error(this.$t('trading-assistant.exchange.fillComplete'))
|
||
return
|
||
}
|
||
|
||
try {
|
||
const marketType = (this.form.getFieldValue('market_type') || 'swap')
|
||
const exchangeConfig = {
|
||
exchange_id: values.exchange_id,
|
||
api_key: values.api_key,
|
||
secret_key: values.secret_key,
|
||
market_type: String(marketType || 'swap')
|
||
}
|
||
|
||
if (this.needsPassphrase && values.passphrase) {
|
||
exchangeConfig.passphrase = values.passphrase
|
||
}
|
||
|
||
const res = await testExchangeConnection(exchangeConfig)
|
||
|
||
this.testResult = {
|
||
success: res.code === 1,
|
||
message: res.msg || (res.code === 1 ? this.$t('trading-assistant.exchange.connectionSuccess') : this.$t('trading-assistant.exchange.connectionFailed'))
|
||
}
|
||
this.connectionTestResult = null
|
||
|
||
if (this.testResult.success) {
|
||
this.$message.success(this.$t('trading-assistant.exchange.connectionSuccess'))
|
||
} else {
|
||
this.$message.error(this.testResult.message || this.$t('trading-assistant.exchange.testFailed'))
|
||
}
|
||
} catch (error) {
|
||
this.testResult = {
|
||
success: false,
|
||
message: error.message || this.$t('trading-assistant.exchange.testFailed')
|
||
}
|
||
this.$message.error(this.testResult.message)
|
||
} finally {
|
||
this.testing = false
|
||
}
|
||
})
|
||
} catch (error) {
|
||
this.testResult = {
|
||
success: false,
|
||
message: this.$t('trading-assistant.exchange.testFailed')
|
||
}
|
||
this.$message.error(this.$t('trading-assistant.exchange.testFailed'))
|
||
this.testing = false
|
||
}
|
||
},
|
||
// 表单步骤控制
|
||
handleNext () {
|
||
if (this.currentStep === 0) {
|
||
// Step 1: basic config (strategy name/symbol/capital/leverage/market type/timeframe)
|
||
// 编辑模式验证 symbol，创建模式验证 selectedSymbols（多选）
|
||
const fieldsToValidate = [
|
||
'indicator_id',
|
||
'strategy_name',
|
||
'initial_capital',
|
||
'market_type',
|
||
'leverage',
|
||
'trade_direction',
|
||
'timeframe'
|
||
]
|
||
// 编辑模式需要验证 symbol 字段
|
||
if (this.isEditMode) {
|
||
fieldsToValidate.push('symbol')
|
||
}
|
||
this.form.validateFields(fieldsToValidate, (err, values) => {
|
||
if (err) return
|
||
|
||
// 创建模式：验证多币种选择
|
||
if (!this.isEditMode) {
|
||
if (!this.selectedSymbols || this.selectedSymbols.length === 0) {
|
||
this.$message.warning(this.$t('trading-assistant.validation.symbolsRequired'))
|
||
return
|
||
}
|
||
}
|
||
|
||
// Enforce spot limitations
|
||
try {
|
||
const marketType = (values && values.market_type) || this.form.getFieldValue('market_type')
|
||
if (marketType === 'spot') {
|
||
this.form.setFieldsValue({ leverage: 1, trade_direction: 'long' })
|
||
}
|
||
} catch (e) {}
|
||
|
||
// Init backtest-like UI states for Step 2 (Ant Form is not reactive).
|
||
this.backtestCollapseKeys = ['risk']
|
||
try {
|
||
this.trailingEnabledUi = !!this.form.getFieldValue('trailing_enabled')
|
||
} catch (e) {
|
||
this.trailingEnabledUi = false
|
||
}
|
||
this.$nextTick(() => {
|
||
this.recalcEntryPctMaxUi()
|
||
this.normalizeEntryPct()
|
||
})
|
||
|
||
this.currentStep++
|
||
})
|
||
} else if (this.currentStep === 1) {
|
||
// Step 2: backtest-like configs are optional; proceed directly.
|
||
// Sync UI states from form (Ant Form values are not always reactive)
|
||
try {
|
||
const execMode = this.form.getFieldValue('execution_mode') || 'signal'
|
||
this.executionModeUi = execMode
|
||
const chans = this.form.getFieldValue('notify_channels') || ['browser']
|
||
this.notifyChannelsUi = Array.isArray(chans) ? chans : ['browser']
|
||
} catch (e) {}
|
||
this.currentStep++
|
||
}
|
||
},
|
||
handlePrev () {
|
||
if (this.currentStep > 0) {
|
||
this.currentStep--
|
||
}
|
||
},
|
||
async handleSubmit () {
|
||
this.form.validateFields(async (err, values) => {
|
||
if (!err) {
|
||
try {
|
||
this.saving = true
|
||
const isLive = this.canUseLiveTrading && values.execution_mode === 'live'
|
||
|
||
if (isLive) {
|
||
const testResult = this.testResult
|
||
if (!testResult) {
|
||
this.$message.warning(this.$t('trading-assistant.validation.testConnectionRequired'))
|
||
this.saving = false
|
||
return
|
||
}
|
||
if (!testResult.success) {
|
||
this.$message.warning(this.$t('trading-assistant.validation.testConnectionFailed'))
|
||
this.saving = false
|
||
return
|
||
}
|
||
}
|
||
|
||
const notificationConfig = {
|
||
channels: values.notify_channels || [],
|
||
targets: {
|
||
email: values.notify_email || '',
|
||
phone: values.notify_phone || '',
|
||
telegram: values.notify_telegram || '',
|
||
discord: values.notify_discord || '',
|
||
webhook: values.notify_webhook || ''
|
||
}
|
||
}
|
||
if (!notificationConfig.channels || notificationConfig.channels.length === 0) {
|
||
this.$message.warning(this.$t('trading-assistant.validation.notifyChannelRequired'))
|
||
this.saving = false
|
||
return
|
||
}
|
||
|
||
// Indicator strategy submit logic (local mode)
|
||
const indicatorIdStr = String(values.indicator_id)
|
||
const indicator = this.availableIndicators.find(ind => String(ind.id) === indicatorIdStr)
|
||
if (!indicator) {
|
||
this.$message.error(this.$t('trading-assistant.validation.indicatorRequired'))
|
||
this.saving = false
|
||
return
|
||
}
|
||
|
||
// AI filter values: source of truth is the reactive UI state to avoid rc-form edge cases.
|
||
const enableAiFilter = !!this.aiFilterEnabledUi
|
||
|
||
const marketType = (values.market_type === 'futures' ? 'swap' : (values.market_type || 'swap'))
|
||
let leverage = values.leverage || 1
|
||
let tradeDirection = values.trade_direction || 'long'
|
||
|
||
if (marketType === 'spot') {
|
||
leverage = 1
|
||
tradeDirection = 'long'
|
||
this.$message.info(this.$t('trading-assistant.messages.spotLimitations'))
|
||
} else {
|
||
if (leverage < 1) leverage = 1
|
||
if (leverage > 125) leverage = 125
|
||
}
|
||
|
||
// 构建基础 payload
|
||
const basePayload = {
|
||
strategy_name: values.strategy_name,
|
||
market_category: this.selectedMarketCategory || 'Crypto',
|
||
execution_mode: values.execution_mode || 'signal',
|
||
notification_config: notificationConfig,
|
||
indicator_config: {
|
||
indicator_id: indicator.id,
|
||
indicator_name: indicator.name,
|
||
indicator_code: indicator.code || ''
|
||
},
|
||
exchange_config: isLive ? (this.isIBKRMarket ? {
|
||
// Broker configuration (US/HK stocks)
|
||
exchange_id: values.broker_id || this.currentBrokerId || 'ibkr',
|
||
// IBKR specific fields
|
||
ibkr_host: values.ibkr_host || '127.0.0.1',
|
||
ibkr_port: values.ibkr_port || 7497,
|
||
ibkr_client_id: values.ibkr_client_id || 1,
|
||
ibkr_account: values.ibkr_account || ''
|
||
} : this.isMT5Market ? {
|
||
// MT5/Forex broker configuration
|
||
exchange_id: values.forex_broker_id || this.currentBrokerId || 'mt5',
|
||
// MT5 specific fields
|
||
mt5_server: values.mt5_server || '',
|
||
mt5_login: values.mt5_login || '',
|
||
mt5_password: values.mt5_password || '',
|
||
mt5_terminal_path: values.mt5_terminal_path || ''
|
||
} : {
|
||
// Crypto exchange configuration
|
||
exchange_id: values.exchange_id,
|
||
credential_id: values.credential_id,
|
||
api_key: values.api_key,
|
||
secret_key: values.secret_key,
|
||
passphrase: this.needsPassphrase ? values.passphrase : undefined
|
||
}) : undefined,
|
||
trading_config: {
|
||
initial_capital: values.initial_capital,
|
||
leverage: leverage,
|
||
trade_direction: tradeDirection,
|
||
timeframe: values.timeframe,
|
||
market_type: marketType,
|
||
// Order execution settings moved to backend env config (ORDER_MODE, MAKER_WAIT_SEC, MAKER_OFFSET_BPS)
|
||
margin_mode: 'cross',
|
||
signal_mode: 'confirmed',
|
||
// Backtest-like configs
|
||
take_profit_pct: values.take_profit_pct || 0,
|
||
stop_loss_pct: values.stop_loss_pct || 0,
|
||
trailing_enabled: !!values.trailing_enabled,
|
||
trailing_stop_pct: values.trailing_stop_pct || 0,
|
||
trailing_activation_pct: values.trailing_activation_pct || 0,
|
||
trend_add_enabled: !!values.trend_add_enabled,
|
||
trend_add_step_pct: values.trend_add_step_pct || 0,
|
||
trend_add_size_pct: values.trend_add_size_pct || 0,
|
||
trend_add_max_times: values.trend_add_max_times || 0,
|
||
dca_add_enabled: !!values.dca_add_enabled,
|
||
dca_add_step_pct: values.dca_add_step_pct || 0,
|
||
dca_add_size_pct: values.dca_add_size_pct || 0,
|
||
dca_add_max_times: values.dca_add_max_times || 0,
|
||
trend_reduce_enabled: !!values.trend_reduce_enabled,
|
||
trend_reduce_step_pct: values.trend_reduce_step_pct || 0,
|
||
trend_reduce_size_pct: values.trend_reduce_size_pct || 0,
|
||
trend_reduce_max_times: values.trend_reduce_max_times || 0,
|
||
adverse_reduce_enabled: !!values.adverse_reduce_enabled,
|
||
adverse_reduce_step_pct: values.adverse_reduce_step_pct || 0,
|
||
adverse_reduce_size_pct: values.adverse_reduce_size_pct || 0,
|
||
adverse_reduce_max_times: values.adverse_reduce_max_times || 0,
|
||
entry_pct: (values.entry_pct === 0 || values.entry_pct) ? values.entry_pct : 100,
|
||
commission: values.commission || 0,
|
||
slippage: values.slippage || 0,
|
||
// AI智能决策过滤
|
||
enable_ai_filter: enableAiFilter
|
||
}
|
||
}
|
||
|
||
let res
|
||
if (this.editingStrategy) {
|
||
// 编辑模式：更新单个策略
|
||
let parsedSymbol = values.symbol
|
||
if (typeof parsedSymbol === 'string' && parsedSymbol.includes(':')) {
|
||
const idx = parsedSymbol.indexOf(':')
|
||
basePayload.market_category = parsedSymbol.slice(0, idx) || basePayload.market_category
|
||
parsedSymbol = parsedSymbol.slice(idx + 1)
|
||
}
|
||
basePayload.trading_config.symbol = parsedSymbol
|
||
res = await updateStrategy(this.editingStrategy.id, basePayload)
|
||
} else {
|
||
// 创建模式：批量创建策略
|
||
basePayload.user_id = 1
|
||
basePayload.strategy_type = 'IndicatorStrategy'
|
||
basePayload.symbols = this.selectedSymbols // 多币种数组
|
||
|
||
res = await batchCreateStrategies(basePayload)
|
||
}
|
||
|
||
if (res.code === 1) {
|
||
if (this.isEditMode) {
|
||
this.$message.success(this.$t('trading-assistant.messages.updateSuccess'))
|
||
} else {
|
||
const totalCreated = res.data?.total_created || this.selectedSymbols.length
|
||
this.$message.success(this.$t('trading-assistant.messages.batchCreateSuccess', { count: totalCreated }))
|
||
}
|
||
// Save credential to vault (crypto exchanges only, IBKR/MT5 don't need this)
|
||
if (isLive && values.save_credential && !this.isIBKRMarket && !this.isMT5Market) {
|
||
try {
|
||
await createExchangeCredential({
|
||
user_id: 1,
|
||
name: values.credential_name || '',
|
||
exchange_id: values.exchange_id,
|
||
api_key: values.api_key,
|
||
secret_key: values.secret_key,
|
||
passphrase: values.passphrase || ''
|
||
})
|
||
this.loadExchangeCredentials()
|
||
} catch (e) {
|
||
// Silent fail: vault is optional.
|
||
}
|
||
}
|
||
this.handleRefresh()
|
||
} else {
|
||
this.$message.error(res.msg || (this.isEditMode ? this.$t('trading-assistant.messages.updateFailed') : this.$t('trading-assistant.messages.createFailed')))
|
||
}
|
||
} catch (error) {
|
||
this.$message.error(this.isEditMode ? this.$t('trading-assistant.messages.updateFailed') : this.$t('trading-assistant.messages.createFailed'))
|
||
} finally {
|
||
this.saving = false
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getFormValues () {
|
||
return new Promise((resolve, reject) => {
|
||
this.form.validateFields((err, values) => {
|
||
if (err) {
|
||
reject(err)
|
||
} else {
|
||
resolve(values)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
getDropdownContainer (triggerNode) {
|
||
// 始终将下拉菜单挂载到body，避免被父容器裁剪
|
||
return document.body
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
// 主色调变量
|
||
@primary-color: #1890ff;
|
||
@primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
@success-color: #0ecb81;
|
||
@danger-color: #f6465d;
|
||
@warning-color: #f0b90b;
|
||
@card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
@card-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||
@border-radius-lg: 16px;
|
||
@border-radius-md: 12px;
|
||
@border-radius-sm: 8px;
|
||
|
||
.trading-assistant {
|
||
padding: 0px;
|
||
height: calc(100vh - 120px);
|
||
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
|
||
|
||
.strategy-layout {
|
||
height: calc(100vh - 120px);
|
||
}
|
||
|
||
// 移动端适配
|
||
@media (max-width: 768px) {
|
||
min-height: auto;
|
||
margin: -24px;
|
||
|
||
.strategy-layout {
|
||
height: auto;
|
||
min-height: calc(100vh - 120px);
|
||
}
|
||
|
||
.strategy-list-col {
|
||
margin-bottom: 12px;
|
||
height: auto;
|
||
max-height: 50vh;
|
||
|
||
.strategy-list-card {
|
||
height: auto;
|
||
max-height: 50vh;
|
||
|
||
.card-title {
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
padding: 12px 16px;
|
||
|
||
span {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.ant-btn {
|
||
font-size: 12px;
|
||
padding: 0 10px;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
}
|
||
}
|
||
|
||
/deep/ .ant-card-body {
|
||
max-height: calc(50vh - 60px);
|
||
overflow-y: auto;
|
||
padding: 8px;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
/deep/ .ant-card-head {
|
||
padding: 0;
|
||
min-height: 48px;
|
||
}
|
||
|
||
.strategy-list-item {
|
||
padding: 12px 8px;
|
||
margin-bottom: 4px;
|
||
border-radius: 8px;
|
||
|
||
/deep/ .ant-list-item-meta {
|
||
width: 100%;
|
||
}
|
||
|
||
/deep/ .ant-list-item-action {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.strategy-item-header {
|
||
width: 100%;
|
||
|
||
.strategy-name-wrapper {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-bottom: 6px;
|
||
flex-wrap: wrap;
|
||
|
||
.strategy-type-tag {
|
||
font-size: 10px;
|
||
padding: 2px 6px;
|
||
line-height: 1.4;
|
||
margin: 0;
|
||
}
|
||
|
||
.exchange-tag {
|
||
font-size: 10px;
|
||
padding: 2px 6px;
|
||
line-height: 1.4;
|
||
margin: 0;
|
||
|
||
.anticon {
|
||
font-size: 10px;
|
||
margin-right: 2px;
|
||
}
|
||
}
|
||
|
||
.strategy-name {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ .ant-list-item-meta-description {
|
||
.strategy-item-info {
|
||
display: flex !important;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-top: 4px;
|
||
font-size: 11px;
|
||
flex-wrap: wrap;
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
flex-shrink: 0;
|
||
font-size: 11px;
|
||
|
||
.anticon {
|
||
font-size: 11px;
|
||
}
|
||
}
|
||
|
||
.status-label {
|
||
font-size: 10px;
|
||
padding: 2px 6px;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.strategy-detail-col {
|
||
height: auto;
|
||
min-height: calc(50vh - 60px);
|
||
|
||
.strategy-detail-panel {
|
||
gap: 12px;
|
||
|
||
.strategy-header-card {
|
||
/deep/ .ant-card-body {
|
||
padding: 16px 12px;
|
||
}
|
||
|
||
/deep/ .ant-card-head {
|
||
padding: 0;
|
||
}
|
||
|
||
.strategy-header {
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
|
||
.header-left {
|
||
width: 100%;
|
||
|
||
.strategy-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
line-height: 1.4;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.strategy-meta {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 8px;
|
||
align-items: start;
|
||
|
||
/deep/ .ant-tag {
|
||
grid-column: 1 / -1;
|
||
justify-self: start;
|
||
margin: 0;
|
||
font-size: 11px;
|
||
padding: 4px 8px;
|
||
}
|
||
|
||
.meta-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 4px;
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
word-break: break-word;
|
||
|
||
.anticon {
|
||
font-size: 12px;
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
// 确保文本可换行
|
||
& > span {
|
||
word-break: break-word;
|
||
line-height: 1.5;
|
||
flex: 1;
|
||
}
|
||
|
||
// 对于包含数值的span
|
||
span:not(.anticon) {
|
||
display: inline;
|
||
word-break: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
}
|
||
|
||
// 如果参数过多，使用单列布局
|
||
@media (max-width: 480px) {
|
||
grid-template-columns: 1fr;
|
||
|
||
/deep/ .ant-tag {
|
||
grid-column: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.header-right {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
|
||
.ant-btn {
|
||
flex: 1;
|
||
min-width: 100px;
|
||
font-size: 13px;
|
||
padding: 0 12px;
|
||
height: 36px;
|
||
line-height: 36px;
|
||
|
||
.anticon {
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.strategy-content-card {
|
||
/deep/ .ant-card-body {
|
||
padding: 12px 8px;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/deep/ .ant-card-head {
|
||
padding: 0 8px;
|
||
}
|
||
|
||
/deep/ .ant-tabs {
|
||
.ant-tabs-nav {
|
||
padding: 0 4px;
|
||
|
||
.ant-tabs-tab {
|
||
font-size: 13px;
|
||
padding: 8px 10px;
|
||
margin: 0 2px;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.ant-tabs-content {
|
||
padding-top: 12px;
|
||
overflow-x: hidden;
|
||
|
||
.ant-tabs-tabpane {
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 超小屏幕适配
|
||
@media (max-width: 480px) {
|
||
.strategy-list-col {
|
||
max-height: 45vh;
|
||
|
||
.strategy-list-card {
|
||
max-height: 45vh;
|
||
|
||
/deep/ .ant-card-body {
|
||
max-height: calc(45vh - 60px);
|
||
}
|
||
}
|
||
}
|
||
|
||
.strategy-detail-col {
|
||
.strategy-detail-panel {
|
||
.strategy-header-card {
|
||
.strategy-header {
|
||
.header-left {
|
||
.strategy-meta {
|
||
grid-template-columns: 1fr;
|
||
gap: 6px;
|
||
|
||
.meta-item {
|
||
font-size: 11px;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.header-right {
|
||
.ant-btn {
|
||
width: 100%;
|
||
flex: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.strategy-list-col {
|
||
height: 100%;
|
||
|
||
.strategy-list-card {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-radius: @border-radius-lg;
|
||
box-shadow: @card-shadow;
|
||
border: none;
|
||
overflow: hidden;
|
||
transition: box-shadow 0.3s ease;
|
||
|
||
&:hover {
|
||
box-shadow: @card-shadow-hover;
|
||
}
|
||
|
||
.card-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
span {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.ant-btn-primary {
|
||
border-radius: @border-radius-sm;
|
||
background: linear-gradient(135deg, @primary-color 0%, #40a9ff 100%);
|
||
border: none;
|
||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.35);
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 16px rgba(24, 144, 255, 0.45);
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ .ant-card-body {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
background: #fff;
|
||
padding: 12px;
|
||
}
|
||
|
||
/deep/ .ant-card-head {
|
||
background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
// 策略分组列表
|
||
.strategy-grouped-list {
|
||
.strategy-group {
|
||
margin-bottom: 12px;
|
||
background: #fff;
|
||
border-radius: @border-radius-md;
|
||
border: 1px solid #e8ecf1;
|
||
overflow: hidden;
|
||
|
||
.strategy-group-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 12px;
|
||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover {
|
||
background: linear-gradient(135deg, #e8f4fd 0%, #e3f0fc 100%);
|
||
}
|
||
|
||
.group-header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
.collapse-icon {
|
||
font-size: 12px;
|
||
color: #8c8c8c;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.group-icon {
|
||
font-size: 16px;
|
||
color: @primary-color;
|
||
}
|
||
|
||
.group-name {
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
color: #1e3a5f;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.group-header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
|
||
.group-status {
|
||
font-size: 11px;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
|
||
&.running {
|
||
background: rgba(14, 203, 129, 0.1);
|
||
color: @success-color;
|
||
}
|
||
|
||
&.stopped {
|
||
background: rgba(246, 70, 93, 0.1);
|
||
color: @danger-color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.strategy-group-content {
|
||
padding: 4px 8px 8px;
|
||
|
||
.strategy-list-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 10px;
|
||
margin-bottom: 4px;
|
||
margin-left: 20px;
|
||
border-left: 2px solid #e8ecf1;
|
||
background: #fafbfc;
|
||
border-radius: 0 @border-radius-sm @border-radius-sm 0;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
&:hover {
|
||
background: #f0f7ff;
|
||
border-left-color: @primary-color;
|
||
}
|
||
|
||
&.active {
|
||
background: #e6f4ff;
|
||
border-left-color: @primary-color;
|
||
border-left-width: 3px;
|
||
}
|
||
|
||
.strategy-item-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.strategy-item-actions {
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.strategy-list-item {
|
||
cursor: pointer;
|
||
padding: 14px 16px;
|
||
border-radius: @border-radius-md;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
position: relative;
|
||
margin-bottom: 8px;
|
||
background: #fafbfc;
|
||
border: 1px solid transparent;
|
||
|
||
&:hover {
|
||
background: linear-gradient(135deg, #f0f7ff 0%, #f5f9ff 100%);
|
||
border-color: rgba(24, 144, 255, 0.2);
|
||
transform: translateX(4px);
|
||
box-shadow: 0 2px 12px rgba(24, 144, 255, 0.1);
|
||
}
|
||
|
||
&.active {
|
||
background: linear-gradient(135deg, #e6f4ff 0%, #f0f9ff 100%);
|
||
border-color: @primary-color;
|
||
border-left: 4px solid @primary-color;
|
||
box-shadow: 0 4px 16px rgba(24, 144, 255, 0.15);
|
||
}
|
||
|
||
// 移动端优化点击区域
|
||
@media (max-width: 768px) {
|
||
padding: 12px 8px;
|
||
margin: 0 4px 4px 4px;
|
||
|
||
&.active {
|
||
border-left-width: 2px;
|
||
}
|
||
}
|
||
|
||
.strategy-item-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.strategy-name-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
.strategy-name {
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
color: #1e3a5f;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.exchange-tag {
|
||
flex-shrink: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
font-size: 11px;
|
||
line-height: 1.5;
|
||
padding: 2px 8px;
|
||
border-radius: 6px;
|
||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||
border: 1px solid rgba(102, 126, 234, 0.2);
|
||
color: #667eea;
|
||
transition: all 0.2s ease;
|
||
|
||
.anticon {
|
||
font-size: 11px;
|
||
}
|
||
}
|
||
|
||
.strategy-type-tag {
|
||
flex-shrink: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
font-size: 10px;
|
||
line-height: 1.5;
|
||
margin-left: 4px;
|
||
padding: 2px 8px;
|
||
border-radius: 6px;
|
||
background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(103, 58, 183, 0.1) 100%);
|
||
border: 1px solid rgba(156, 39, 176, 0.2);
|
||
|
||
.anticon {
|
||
font-size: 10px;
|
||
margin-right: 3px;
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ .status-stopped {
|
||
color: @danger-color !important;
|
||
border-color: @danger-color !important;
|
||
}
|
||
}
|
||
|
||
/deep/ .ant-list-item-meta-description {
|
||
max-width: calc(100% - 20px); // 留出空间给右侧操作按钮和选中边框
|
||
overflow: hidden;
|
||
|
||
.strategy-item-info {
|
||
display: flex !important;
|
||
gap: 12px; // 减小间距
|
||
margin-top: 8px;
|
||
font-size: 12px;
|
||
color: var(--text-color-secondary, #8c8c8c);
|
||
align-items: center;
|
||
flex-wrap: nowrap; // 禁止换行
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
|
||
.status-label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 4px 12px;
|
||
border-radius: 16px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
border: 1px solid transparent;
|
||
flex-shrink: 0;
|
||
background: linear-gradient(135deg, #f0f2f5 0%, #e8eaed 100%);
|
||
color: #595959;
|
||
transition: all 0.2s ease;
|
||
|
||
&::before {
|
||
content: '';
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: currentColor;
|
||
}
|
||
}
|
||
|
||
.status-running {
|
||
background: linear-gradient(135deg, rgba(14, 203, 129, 0.15) 0%, rgba(14, 203, 129, 0.08) 100%);
|
||
color: @success-color;
|
||
border-color: rgba(14, 203, 129, 0.3);
|
||
box-shadow: 0 2px 8px rgba(14, 203, 129, 0.2);
|
||
|
||
&::before {
|
||
animation: statusPulse 2s infinite;
|
||
box-shadow: 0 0 8px @success-color;
|
||
}
|
||
}
|
||
|
||
.status-stopped {
|
||
background: linear-gradient(135deg, rgba(246, 70, 93, 0.15) 0%, rgba(246, 70, 93, 0.08) 100%);
|
||
color: @danger-color;
|
||
border-color: rgba(246, 70, 93, 0.3);
|
||
}
|
||
|
||
.status-error {
|
||
background: linear-gradient(135deg, rgba(255, 77, 79, 0.15) 0%, rgba(255, 77, 79, 0.08) 100%);
|
||
color: #ff4d4f;
|
||
border-color: rgba(255, 77, 79, 0.3);
|
||
}
|
||
|
||
@keyframes statusPulse {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
flex-shrink: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.strategy-detail-col {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
|
||
.empty-detail {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.9) 100%);
|
||
border-radius: @border-radius-lg;
|
||
border: 2px dashed #e0e6ed;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
border-color: @primary-color;
|
||
background: linear-gradient(135deg, rgba(24,144,255,0.02) 0%, rgba(24,144,255,0.05) 100%);
|
||
}
|
||
|
||
/deep/ .ant-empty-image {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/deep/ .ant-empty-description {
|
||
color: #8c8c8c;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.strategy-detail-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
min-height: 100%;
|
||
|
||
.strategy-header-card {
|
||
flex-shrink: 0; // 防止头部被压缩
|
||
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
|
||
border: none;
|
||
border-radius: @border-radius-lg;
|
||
box-shadow: @card-shadow;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
box-shadow: @card-shadow-hover;
|
||
}
|
||
|
||
/deep/ .ant-card-head {
|
||
background: transparent;
|
||
border-bottom: none;
|
||
}
|
||
|
||
/deep/ .ant-card-body {
|
||
background: transparent;
|
||
padding: 20px;
|
||
}
|
||
|
||
.strategy-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 24px;
|
||
|
||
.header-left {
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
.strategy-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
flex-wrap: wrap;
|
||
|
||
.strategy-title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
margin: 0;
|
||
background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.status-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 14px;
|
||
border-radius: 20px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
|
||
.status-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
&.status-running {
|
||
background: linear-gradient(135deg, rgba(14, 203, 129, 0.15) 0%, rgba(14, 203, 129, 0.08) 100%);
|
||
color: @success-color;
|
||
border: 1px solid rgba(14, 203, 129, 0.3);
|
||
|
||
.status-dot {
|
||
background: @success-color;
|
||
box-shadow: 0 0 12px @success-color;
|
||
}
|
||
}
|
||
|
||
&.status-stopped {
|
||
background: linear-gradient(135deg, rgba(246, 70, 93, 0.15) 0%, rgba(246, 70, 93, 0.08) 100%);
|
||
color: @danger-color;
|
||
border: 1px solid rgba(246, 70, 93, 0.3);
|
||
|
||
.status-dot {
|
||
background: @danger-color;
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
&.status-error {
|
||
background: linear-gradient(135deg, rgba(255, 77, 79, 0.15) 0%, rgba(255, 77, 79, 0.08) 100%);
|
||
color: #ff4d4f;
|
||
border: 1px solid rgba(255, 77, 79, 0.3);
|
||
|
||
.status-dot {
|
||
background: #ff4d4f;
|
||
animation: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 关键数据卡片网格
|
||
.key-stats-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
margin-bottom: 14px;
|
||
|
||
.stat-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 10px 14px;
|
||
background: #fff;
|
||
border-radius: @border-radius-sm;
|
||
border: 1px solid #f0f0f0;
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover {
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.stat-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
flex-shrink: 0;
|
||
|
||
&.investment {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #fff;
|
||
}
|
||
|
||
&.equity {
|
||
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
||
color: #fff;
|
||
}
|
||
|
||
&.pnl {
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.stat-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
.stat-label {
|
||
font-size: 11px;
|
||
color: #8c8c8c;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: #1e3a5f;
|
||
line-height: 1.2;
|
||
|
||
.pnl-percent {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.pnl-card {
|
||
&.profit .stat-content .stat-value {
|
||
color: @success-color;
|
||
}
|
||
|
||
&.loss .stat-content .stat-value {
|
||
color: @danger-color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 策略标签
|
||
.strategy-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
|
||
.tag-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 4px 10px;
|
||
background: #f5f7fa;
|
||
border-radius: 14px;
|
||
font-size: 12px;
|
||
color: #5a6872;
|
||
border: 1px solid #e8ecf1;
|
||
|
||
.anticon {
|
||
font-size: 12px;
|
||
color: @primary-color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.header-right {
|
||
flex-shrink: 0;
|
||
|
||
.action-btn {
|
||
min-width: 120px;
|
||
height: 38px;
|
||
border-radius: @border-radius-sm;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
transition: all 0.2s ease;
|
||
|
||
.anticon {
|
||
font-size: 16px;
|
||
}
|
||
|
||
&.start-btn {
|
||
background: linear-gradient(135deg, @success-color 0%, #26d87d 100%);
|
||
border: none;
|
||
box-shadow: 0 2px 8px rgba(14, 203, 129, 0.3);
|
||
|
||
&:hover {
|
||
box-shadow: 0 4px 12px rgba(14, 203, 129, 0.4);
|
||
}
|
||
}
|
||
|
||
&.stop-btn {
|
||
background: linear-gradient(135deg, @danger-color 0%, #ff6b7a 100%);
|
||
border: none;
|
||
box-shadow: 0 2px 8px rgba(246, 70, 93, 0.3);
|
||
|
||
&:hover {
|
||
box-shadow: 0 4px 12px rgba(246, 70, 93, 0.4);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
opacity: 0.6;
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
|
||
.strategy-content-card {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #fff;
|
||
border: none;
|
||
border-radius: @border-radius-lg;
|
||
box-shadow: @card-shadow;
|
||
transition: all 0.3s ease;
|
||
min-height: 400px; // 确保有足够的最小高度
|
||
|
||
&:hover {
|
||
box-shadow: @card-shadow-hover;
|
||
}
|
||
|
||
/deep/ .ant-card-head {
|
||
background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
|
||
border-bottom: 1px solid #f0f0f0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/deep/ .ant-card-body {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 16px;
|
||
background: #fff;
|
||
|
||
.ant-tabs {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.ant-tabs-bar {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ant-tabs-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.ant-tabs-tabpane {
|
||
.trading-records,
|
||
.position-records {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&.theme-dark {
|
||
background: linear-gradient(180deg, #0d1117 0%, #161b22 100%);
|
||
color: var(--dark-text-color, #fff);
|
||
|
||
// 左侧策略列表卡片
|
||
.strategy-list-col {
|
||
.strategy-list-card {
|
||
background: linear-gradient(180deg, #1e222d 0%, #1a1e28 100%);
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
|
||
|
||
.card-title span {
|
||
background: linear-gradient(135deg, #e0e6ed 0%, #c5ccd6 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
/deep/ .ant-card-head {
|
||
background: linear-gradient(180deg, #252a36 0%, #1e222d 100%);
|
||
border-bottom-color: rgba(255, 255, 255, 0.06);
|
||
|
||
.ant-card-head-title {
|
||
color: #d1d4dc;
|
||
}
|
||
}
|
||
|
||
/deep/ .ant-card-body {
|
||
background: transparent;
|
||
}
|
||
|
||
/deep/ .ant-empty-description {
|
||
color: #868993;
|
||
}
|
||
|
||
/deep/ .ant-list {
|
||
.ant-list-item {
|
||
border-bottom-color: rgba(255, 255, 255, 0.06);
|
||
|
||
.ant-list-item-meta-title {
|
||
color: #d1d4dc;
|
||
}
|
||
|
||
.ant-list-item-meta-description {
|
||
color: #868993;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.strategy-list-item {
|
||
background: rgba(255, 255, 255, 0.02);
|
||
border: 1px solid rgba(255, 255, 255, 0.04);
|
||
|
||
&:hover {
|
||
background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(24, 144, 255, 0.04) 100%);
|
||
border-color: rgba(24, 144, 255, 0.2);
|
||
}
|
||
|
||
&.active {
|
||
background: linear-gradient(135deg, rgba(24, 144, 255, 0.12) 0%, rgba(24, 144, 255, 0.06) 100%);
|
||
border-color: @primary-color;
|
||
box-shadow: 0 4px 20px rgba(24, 144, 255, 0.2);
|
||
}
|
||
|
||
.strategy-name {
|
||
color: #e0e6ed;
|
||
}
|
||
|
||
.strategy-item-info {
|
||
color: #868993;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 右侧策略详情卡片
|
||
.strategy-detail-col {
|
||
.strategy-header-card {
|
||
background: linear-gradient(135deg, #1e222d 0%, #1a1e28 100%);
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
|
||
|
||
/deep/ .ant-card-head {
|
||
background: transparent;
|
||
border-bottom: none;
|
||
}
|
||
|
||
/deep/ .ant-card-body {
|
||
background: transparent;
|
||
}
|
||
|
||
.strategy-title-row {
|
||
.strategy-title {
|
||
background: linear-gradient(135deg, #e0e6ed 0%, #c5ccd6 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
}
|
||
|
||
.key-stats-grid {
|
||
.stat-card {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border-color: rgba(255, 255, 255, 0.06);
|
||
|
||
&:hover {
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border-color: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.stat-content {
|
||
.stat-label {
|
||
color: #868993;
|
||
}
|
||
|
||
.stat-value {
|
||
color: #e0e6ed;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.strategy-tags {
|
||
.tag-item {
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border-color: rgba(255, 255, 255, 0.08);
|
||
color: #a0a8b3;
|
||
|
||
&:hover {
|
||
background: rgba(24, 144, 255, 0.1);
|
||
border-color: rgba(24, 144, 255, 0.3);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.strategy-content-card {
|
||
background: linear-gradient(180deg, #1e222d 0%, #1a1e28 100%);
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
|
||
|
||
/deep/ .ant-card-head {
|
||
background: rgba(255, 255, 255, 0.02);
|
||
border-bottom-color: rgba(255, 255, 255, 0.06);
|
||
|
||
.ant-card-head-title {
|
||
color: #d1d4dc;
|
||
}
|
||
}
|
||
|
||
/deep/ .ant-card-body {
|
||
background: transparent;
|
||
}
|
||
|
||
/deep/ .ant-tabs {
|
||
.ant-tabs-nav {
|
||
.ant-tabs-tab {
|
||
color: #868993;
|
||
|
||
&:hover {
|
||
color: #d1d4dc;
|
||
}
|
||
|
||
&.ant-tabs-tab-active {
|
||
.ant-tabs-tab-btn {
|
||
color: #1890ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ant-tabs-ink-bar {
|
||
background: linear-gradient(90deg, @primary-color 0%, #40a9ff 100%);
|
||
}
|
||
}
|
||
|
||
.ant-tabs-content {
|
||
color: #d1d4dc;
|
||
}
|
||
}
|
||
|
||
/deep/ .ant-empty-description {
|
||
color: #868993;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 空状态
|
||
.empty-detail {
|
||
/deep/ .ant-empty-description {
|
||
color: #868993;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* AI filter box (Step 2) */
|
||
.ai-filter-box {
|
||
margin-top: 12px;
|
||
padding: 14px 14px 12px;
|
||
border: 1px solid #e8e8e8;
|
||
border-radius: 10px;
|
||
background: linear-gradient(180deg, #fafcff 0%, #ffffff 100%);
|
||
}
|
||
|
||
.ai-filter-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.ai-filter-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-weight: 600;
|
||
color: #262626;
|
||
}
|
||
|
||
.ai-filter-title .anticon {
|
||
color: #1890ff;
|
||
}
|
||
|
||
.ai-filter-hint {
|
||
margin-top: 6px;
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
color: #8c8c8c;
|
||
}
|
||
|
||
.symbol-option {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.symbol-name {
|
||
font-weight: 600;
|
||
color: #8f8d8d;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.symbol-name-extra {
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
// 弹窗样式
|
||
.steps-container {
|
||
margin-bottom: 24px;
|
||
|
||
@media (max-width: 768px) {
|
||
margin-bottom: 16px;
|
||
|
||
/deep/ .ant-steps-item-title {
|
||
font-size: 12px;
|
||
}
|
||
|
||
/deep/ .ant-steps-item-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-container {
|
||
min-height: 400px;
|
||
padding: 24px 0;
|
||
|
||
.step-content {
|
||
animation: fadeIn 0.3s;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
min-height: 300px;
|
||
padding: 16px 0;
|
||
|
||
/deep/ .ant-form-item-label {
|
||
padding-bottom: 4px;
|
||
|
||
label {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
/deep/ .ant-input,
|
||
/deep/ .ant-input-number,
|
||
/deep/ .ant-select {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/deep/ .ant-radio-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
|
||
.ant-radio-wrapper {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
min-height: 250px;
|
||
padding: 12px 0;
|
||
|
||
/deep/ .ant-form-item-label label {
|
||
font-size: 12px;
|
||
}
|
||
|
||
/deep/ .ant-input,
|
||
/deep/ .ant-input-number,
|
||
/deep/ .ant-select {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.strategy-type-selector {
|
||
padding: 16px 0;
|
||
|
||
.market-category-selector {
|
||
margin-bottom: 16px;
|
||
|
||
.selector-label {
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
color: #262626;
|
||
}
|
||
|
||
/deep/ .ant-radio-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
}
|
||
|
||
.strategy-type-card {
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
height: 100%;
|
||
min-height: 180px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&:hover {
|
||
border-color: #1890ff;
|
||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
|
||
}
|
||
|
||
&.selected {
|
||
border-color: #1890ff;
|
||
background-color: #e6f7ff;
|
||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
|
||
}
|
||
|
||
.strategy-type-content {
|
||
text-align: center;
|
||
padding: 16px;
|
||
|
||
.strategy-type-icon {
|
||
font-size: 48px;
|
||
color: #1890ff;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
color: #1f1f1f;
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
color: #8c8c8c;
|
||
margin: 0;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.indicator-option {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.indicator-name {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.indicator-description {
|
||
padding: 12px;
|
||
background-color: var(--bg-color-secondary, #f5f5f5);
|
||
border-radius: 4px;
|
||
color: var(--text-color, #666);
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.form-item-hint {
|
||
margin-top: 4px;
|
||
font-size: 12px;
|
||
color: var(--text-color-secondary, #8c8c8c);
|
||
}
|
||
|
||
.test-result {
|
||
margin-top: 8px;
|
||
padding: 8px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
|
||
&.success {
|
||
background-color: #f6ffed;
|
||
border: 1px solid #b7eb8f;
|
||
color: #52c41a;
|
||
}
|
||
}
|
||
|
||
.ip-whitelist-tip {
|
||
margin-top: 12px;
|
||
padding: 12px;
|
||
background-color: #e6f7ff;
|
||
border: 1px solid #91d5ff;
|
||
border-radius: 4px;
|
||
font-size: 13px;
|
||
color: #1890ff;
|
||
line-height: 1.6;
|
||
|
||
.anticon {
|
||
margin-right: 6px;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.ip-list {
|
||
margin-top: 8px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
|
||
.ant-tag {
|
||
margin: 0;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
&.error {
|
||
background-color: #fff2f0;
|
||
border: 1px solid #ffccc7;
|
||
color: #ff4d4f;
|
||
}
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/deep/ .danger-item {
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
// 移动端弹窗样式
|
||
/deep/ .mobile-modal {
|
||
.ant-modal {
|
||
top: 20px;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.ant-modal-content {
|
||
max-height: calc(100vh - 40px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.ant-modal-body {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
padding: 16px;
|
||
}
|
||
|
||
.ant-modal-footer {
|
||
padding: 12px 16px;
|
||
border-top: 1px solid #e8e8e8;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
|
||
.ant-btn {
|
||
font-size: 13px;
|
||
padding: 0 12px;
|
||
height: 32px;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|