1449 lines
44 KiB
Vue
1449 lines
44 KiB
Vue
<template>
|
|
<div class="user-manage-page" :class="{ 'theme-dark': isDarkTheme }">
|
|
<div class="page-header">
|
|
<h2 class="page-title">
|
|
<a-icon type="team" />
|
|
<span>{{ $t('userManage.title') || 'User Management' }}</span>
|
|
</h2>
|
|
<p class="page-desc">{{ $t('userManage.description') || 'Manage system users, roles and permissions' }}</p>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<a-tabs v-model="activeTab" @change="handleTabChange" class="manage-tabs">
|
|
<!-- Tab 1: User Management -->
|
|
<a-tab-pane key="users" :tab="$t('userManage.tabUsers') || 'User Management'">
|
|
<!-- Toolbar -->
|
|
<div class="toolbar">
|
|
<div class="toolbar-left">
|
|
<a-button type="primary" @click="showCreateModal">
|
|
<a-icon type="user-add" />
|
|
{{ $t('userManage.createUser') || 'Create User' }}
|
|
</a-button>
|
|
<a-button @click="loadUsers">
|
|
<a-icon type="reload" />
|
|
{{ $t('common.refresh') || 'Refresh' }}
|
|
</a-button>
|
|
</div>
|
|
<div class="toolbar-right">
|
|
<a-input-search
|
|
v-model="searchKeyword"
|
|
:placeholder="$t('userManage.searchPlaceholder') || 'Search by username/email'"
|
|
style="width: 280px"
|
|
allowClear
|
|
@search="handleSearch"
|
|
@pressEnter="handleSearch"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Table -->
|
|
<a-card :bordered="false" class="user-table-card">
|
|
<a-table
|
|
:columns="columns"
|
|
:dataSource="users"
|
|
:loading="loading"
|
|
:pagination="pagination"
|
|
:rowKey="record => record.id"
|
|
@change="handleTableChange"
|
|
>
|
|
<!-- Status Column -->
|
|
<template slot="status" slot-scope="text">
|
|
<a-tag :color="text === 'active' ? 'green' : 'red'">
|
|
{{ text === 'active' ? ($t('userManage.active') || 'Active') : ($t('userManage.disabled') || 'Disabled') }}
|
|
</a-tag>
|
|
</template>
|
|
|
|
<!-- Role Column -->
|
|
<template slot="role" slot-scope="text">
|
|
<a-tag :color="getRoleColor(text)">
|
|
{{ getRoleLabel(text) }}
|
|
</a-tag>
|
|
</template>
|
|
|
|
<!-- Last Login Column -->
|
|
<template slot="last_login_at" slot-scope="text">
|
|
<span v-if="text">{{ formatTime(text) }}</span>
|
|
<span v-else class="text-muted">{{ $t('userManage.neverLogin') || 'Never' }}</span>
|
|
</template>
|
|
|
|
<!-- Credits Column -->
|
|
<template slot="credits" slot-scope="text">
|
|
<span class="credits-value">{{ formatCredits(text) }}</span>
|
|
</template>
|
|
|
|
<!-- VIP Column -->
|
|
<template slot="vip_expires_at" slot-scope="text">
|
|
<template v-if="text && isVipActive(text)">
|
|
<a-tag color="gold">
|
|
<a-icon type="crown" />
|
|
{{ formatDate(text) }}
|
|
</a-tag>
|
|
</template>
|
|
<span v-else class="text-muted">-</span>
|
|
</template>
|
|
|
|
<!-- Actions Column -->
|
|
<template slot="action" slot-scope="text, record">
|
|
<a-space>
|
|
<a-tooltip :title="$t('common.edit') || 'Edit'">
|
|
<a-button type="link" size="small" @click="showEditModal(record)">
|
|
<a-icon type="edit" />
|
|
</a-button>
|
|
</a-tooltip>
|
|
<a-tooltip :title="$t('userManage.adjustCredits') || 'Adjust Credits'">
|
|
<a-button type="link" size="small" @click="showCreditsModal(record)">
|
|
<a-icon type="wallet" style="color: #722ed1" />
|
|
</a-button>
|
|
</a-tooltip>
|
|
<a-tooltip :title="$t('userManage.setVip') || 'Set VIP'">
|
|
<a-button type="link" size="small" @click="showVipModal(record)">
|
|
<a-icon type="crown" style="color: #faad14" />
|
|
</a-button>
|
|
</a-tooltip>
|
|
<a-tooltip :title="$t('userManage.resetPassword') || 'Reset Password'">
|
|
<a-button type="link" size="small" @click="showResetPasswordModal(record)">
|
|
<a-icon type="key" />
|
|
</a-button>
|
|
</a-tooltip>
|
|
<a-tooltip :title="$t('common.delete') || 'Delete'">
|
|
<a-popconfirm
|
|
:title="$t('userManage.confirmDelete') || 'Are you sure to delete this user?'"
|
|
@confirm="handleDelete(record.id)"
|
|
>
|
|
<a-button type="link" size="small" :disabled="record.id === currentUserId">
|
|
<a-icon type="delete" style="color: #ff4d4f" />
|
|
</a-button>
|
|
</a-popconfirm>
|
|
</a-tooltip>
|
|
</a-space>
|
|
</template>
|
|
</a-table>
|
|
</a-card>
|
|
</a-tab-pane>
|
|
|
|
<!-- Tab 2: System Strategy Overview -->
|
|
<a-tab-pane key="strategies" :tab="$t('systemOverview.tabTitle') || 'System Overview'">
|
|
<!-- Summary Cards -->
|
|
<div class="summary-cards" v-if="strategySummary">
|
|
<div class="summary-card">
|
|
<div class="summary-icon" style="background: linear-gradient(135deg, #667eea, #764ba2)">
|
|
<a-icon type="fund" />
|
|
</div>
|
|
<div class="summary-info">
|
|
<div class="summary-value">{{ strategySummary.total_strategies || 0 }}</div>
|
|
<div class="summary-label">{{ $t('systemOverview.totalStrategies') || 'Total Strategies' }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="summary-icon" style="background: linear-gradient(135deg, #11998e, #38ef7d)">
|
|
<a-icon type="play-circle" />
|
|
</div>
|
|
<div class="summary-info">
|
|
<div class="summary-value">{{ strategySummary.running_strategies || 0 }}</div>
|
|
<div class="summary-sub">
|
|
{{ $t('systemOverview.live') || '实盘' }}: {{ strategySummary.running_live_strategies || 0 }}
|
|
/
|
|
{{ $t('systemOverview.signal') || '仅通知' }}: {{ strategySummary.running_signal_strategies || 0 }}
|
|
</div>
|
|
<div class="summary-label">{{ $t('systemOverview.runningStrategies') || 'Running' }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="summary-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c)">
|
|
<a-icon type="dollar" />
|
|
</div>
|
|
<div class="summary-info">
|
|
<div class="summary-value">{{ formatNumber(strategySummary.total_capital) }}</div>
|
|
<div class="summary-sub">
|
|
{{ $t('systemOverview.live') || '实盘' }}: {{ formatNumber(strategySummary.live_capital) }}
|
|
/
|
|
{{ $t('systemOverview.signal') || '仅通知' }}: {{ formatNumber(strategySummary.signal_capital) }}
|
|
</div>
|
|
<div class="summary-label">{{ $t('systemOverview.totalCapital') || 'Total Capital' }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="summary-icon" :style="{ background: (strategySummary.total_pnl || 0) >= 0 ? 'linear-gradient(135deg, #11998e, #38ef7d)' : 'linear-gradient(135deg, #ff416c, #ff4b2b)' }">
|
|
<a-icon type="rise" />
|
|
</div>
|
|
<div class="summary-info">
|
|
<div class="summary-value" :class="(strategySummary.total_pnl || 0) >= 0 ? 'text-profit' : 'text-loss'">
|
|
{{ formatPnl(strategySummary.total_pnl) }}
|
|
<span class="roi-badge">{{ strategySummary.total_roi || 0 }}%</span>
|
|
</div>
|
|
<div class="summary-sub">
|
|
{{ $t('systemOverview.live') || '实盘' }}: {{ formatPnl(strategySummary.live_pnl) }}
|
|
/
|
|
{{ $t('systemOverview.signal') || '仅通知' }}: {{ formatPnl(strategySummary.signal_pnl) }}
|
|
</div>
|
|
<div class="summary-label">{{ $t('systemOverview.totalPnl') || 'Total PnL' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Strategy Toolbar -->
|
|
<div class="toolbar">
|
|
<div class="toolbar-left">
|
|
<a-button @click="loadSystemStrategies">
|
|
<a-icon type="reload" />
|
|
{{ $t('common.refresh') || 'Refresh' }}
|
|
</a-button>
|
|
<a-select v-model="strategyStatusFilter" style="width: 140px" @change="handleStrategyFilterChange">
|
|
<a-select-option value="all">{{ $t('systemOverview.filterAll') || 'All Status' }}</a-select-option>
|
|
<a-select-option value="running">{{ $t('systemOverview.filterRunning') || 'Running' }}</a-select-option>
|
|
<a-select-option value="stopped">{{ $t('systemOverview.filterStopped') || 'Stopped' }}</a-select-option>
|
|
</a-select>
|
|
</div>
|
|
<div class="toolbar-right">
|
|
<a-input-search
|
|
v-model="strategySearchKeyword"
|
|
:placeholder="$t('systemOverview.searchPlaceholder') || 'Search strategy/symbol/user'"
|
|
style="width: 280px"
|
|
allowClear
|
|
@search="handleStrategySearch"
|
|
@pressEnter="handleStrategySearch"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Strategy Table -->
|
|
<a-card :bordered="false" class="user-table-card">
|
|
<a-table
|
|
:columns="strategyColumns"
|
|
:dataSource="systemStrategies"
|
|
:loading="strategyLoading"
|
|
:pagination="strategyPagination"
|
|
:rowKey="record => record.id"
|
|
:scroll="{ x: 1600 }"
|
|
@change="handleStrategyTableChange"
|
|
>
|
|
<!-- Strategy Status -->
|
|
<template slot="strategyStatus" slot-scope="text">
|
|
<span class="status-cell">
|
|
<span class="status-dot" :class="text === 'running' ? 'dot-running' : 'dot-stopped'" />
|
|
<span :class="text === 'running' ? 'status-running' : 'status-stopped'">
|
|
{{ text === 'running' ? ($t('systemOverview.running') || 'Running') : ($t('systemOverview.stopped') || 'Stopped') }}
|
|
</span>
|
|
</span>
|
|
</template>
|
|
|
|
<!-- User Column -->
|
|
<template slot="userInfo" slot-scope="text, record">
|
|
<a-tooltip :title="(record.nickname || record.username || '-')">
|
|
<span class="user-cell">
|
|
<a-avatar size="small" :style="{ backgroundColor: getUserColor(record.user_id), fontSize: '11px', marginRight: '6px' }">
|
|
{{ (record.nickname || record.username || '?').charAt(0).toUpperCase() }}
|
|
</a-avatar>
|
|
<span class="user-name">{{ truncate(record.nickname || record.username || '-', 8) }}</span>
|
|
</span>
|
|
</a-tooltip>
|
|
</template>
|
|
|
|
<!-- Symbol Column -->
|
|
<template slot="symbolInfo" slot-scope="text, record">
|
|
<div>
|
|
<span class="symbol-text">{{ record.symbol || '-' }}</span>
|
|
<a-tag v-if="record.cs_strategy_type === 'cross_sectional'" color="purple" size="small" style="margin-left: 4px">CS</a-tag>
|
|
</div>
|
|
<div v-if="record.cs_strategy_type === 'cross_sectional' && record.symbol_list && record.symbol_list.length" class="symbol-count text-muted">
|
|
{{ record.symbol_list.length }} {{ $t('systemOverview.symbols') || 'symbols' }}
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Capital Column -->
|
|
<template slot="capitalInfo" slot-scope="text">
|
|
<span>{{ formatNumber(text) }}</span>
|
|
</template>
|
|
|
|
<!-- PnL Column -->
|
|
<template slot="pnlInfo" slot-scope="text, record">
|
|
<div :class="record.total_pnl >= 0 ? 'text-profit' : 'text-loss'">
|
|
<span class="pnl-value">{{ formatPnl(record.total_pnl) }}</span>
|
|
<span class="roi-text">({{ record.roi >= 0 ? '+' : '' }}{{ record.roi }}%)</span>
|
|
</div>
|
|
<div class="pnl-detail text-muted">
|
|
<span>{{ $t('systemOverview.realized') || 'Real' }}: {{ formatPnl(record.total_realized_pnl) }}</span>
|
|
<span style="margin-left: 8px">{{ $t('systemOverview.unrealized') || 'Unreal' }}: {{ formatPnl(record.total_unrealized_pnl) }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Positions Column -->
|
|
<template slot="positionInfo" slot-scope="text, record">
|
|
<a-badge :count="record.position_count" :numberStyle="{ backgroundColor: record.position_count > 0 ? '#52c41a' : '#d9d9d9' }" />
|
|
</template>
|
|
|
|
<!-- Trades Column -->
|
|
<template slot="tradeInfo" slot-scope="text">
|
|
<span>{{ text || 0 }}</span>
|
|
</template>
|
|
|
|
<!-- Indicator Column -->
|
|
<template slot="indicatorInfo" slot-scope="text">
|
|
<a-tooltip v-if="text" :title="text">
|
|
<span class="indicator-name">{{ truncate(text, 16) }}</span>
|
|
</a-tooltip>
|
|
<span v-else class="text-muted">-</span>
|
|
</template>
|
|
|
|
<!-- Exchange Column -->
|
|
<template slot="exchangeInfo" slot-scope="text">
|
|
<span v-if="text" class="exchange-name">{{ text }}</span>
|
|
<span v-else class="text-muted">-</span>
|
|
</template>
|
|
|
|
<!-- Timeframe Column -->
|
|
<template slot="timeframeInfo" slot-scope="text">
|
|
<a-tag v-if="text" size="small">{{ text }}</a-tag>
|
|
<span v-else class="text-muted">-</span>
|
|
</template>
|
|
|
|
<!-- Leverage Column -->
|
|
<template slot="leverageInfo" slot-scope="text">
|
|
<span v-if="text > 1" style="color: #fa8c16; font-weight: 600">{{ text }}x</span>
|
|
<span v-else>{{ text || 1 }}x</span>
|
|
</template>
|
|
|
|
<!-- Created At Column -->
|
|
<template slot="createdAtInfo" slot-scope="text">
|
|
<span v-if="text">{{ formatTime(text) }}</span>
|
|
<span v-else class="text-muted">-</span>
|
|
</template>
|
|
</a-table>
|
|
</a-card>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
|
|
<!-- Create/Edit User Modal -->
|
|
<a-modal
|
|
v-model="modalVisible"
|
|
:title="isEdit ? ($t('userManage.editUser') || 'Edit User') : ($t('userManage.createUser') || 'Create User')"
|
|
:confirmLoading="modalLoading"
|
|
@ok="handleModalOk"
|
|
@cancel="handleModalCancel"
|
|
>
|
|
<a-form :form="form" layout="vertical">
|
|
<a-form-item :label="$t('userManage.username') || 'Username'">
|
|
<a-input
|
|
v-decorator="['username', {
|
|
rules: [{ required: !isEdit, message: $t('userManage.usernameRequired') || 'Please enter username' }]
|
|
}]"
|
|
:disabled="isEdit"
|
|
:placeholder="$t('userManage.usernamePlaceholder') || 'Enter username'"
|
|
>
|
|
<a-icon slot="prefix" type="user" />
|
|
</a-input>
|
|
</a-form-item>
|
|
|
|
<a-form-item v-if="!isEdit" :label="$t('userManage.password') || 'Password'">
|
|
<a-input-password
|
|
v-decorator="['password', {
|
|
rules: [
|
|
{ required: true, message: $t('userManage.passwordRequired') || 'Please enter password' },
|
|
{ min: 6, message: $t('userManage.passwordMin') || 'Password must be at least 6 characters' }
|
|
]
|
|
}]"
|
|
:placeholder="$t('userManage.passwordPlaceholder') || 'Enter password (min 6 characters)'"
|
|
>
|
|
<a-icon slot="prefix" type="lock" />
|
|
</a-input-password>
|
|
</a-form-item>
|
|
|
|
<a-form-item :label="$t('userManage.nickname') || 'Nickname'">
|
|
<a-input
|
|
v-decorator="['nickname']"
|
|
:placeholder="$t('userManage.nicknamePlaceholder') || 'Enter nickname'"
|
|
>
|
|
<a-icon slot="prefix" type="smile" />
|
|
</a-input>
|
|
</a-form-item>
|
|
|
|
<a-form-item :label="$t('userManage.email') || 'Email'">
|
|
<a-input
|
|
v-decorator="['email', {
|
|
rules: [{ type: 'email', message: $t('userManage.emailInvalid') || 'Invalid email format' }]
|
|
}]"
|
|
:placeholder="$t('userManage.emailPlaceholder') || 'Enter email'"
|
|
>
|
|
<a-icon slot="prefix" type="mail" />
|
|
</a-input>
|
|
</a-form-item>
|
|
|
|
<a-form-item :label="$t('userManage.role') || 'Role'">
|
|
<a-select
|
|
v-decorator="['role', { initialValue: 'user' }]"
|
|
:placeholder="$t('userManage.rolePlaceholder') || 'Select role'"
|
|
>
|
|
<a-select-option v-for="role in roles" :key="role.id" :value="role.id">
|
|
{{ getRoleLabel(role.id) }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
<a-form-item v-if="isEdit" :label="$t('userManage.status') || 'Status'">
|
|
<a-select
|
|
v-decorator="['status', { initialValue: 'active' }]"
|
|
:placeholder="$t('userManage.statusPlaceholder') || 'Select status'"
|
|
>
|
|
<a-select-option value="active">{{ $t('userManage.active') || 'Active' }}</a-select-option>
|
|
<a-select-option value="disabled">{{ $t('userManage.disabled') || 'Disabled' }}</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
|
|
<!-- Reset Password Modal -->
|
|
<a-modal
|
|
v-model="resetPasswordVisible"
|
|
:title="$t('userManage.resetPassword') || 'Reset Password'"
|
|
:confirmLoading="resetPasswordLoading"
|
|
@ok="handleResetPassword"
|
|
>
|
|
<a-form :form="resetPasswordForm" layout="vertical">
|
|
<a-alert
|
|
:message="$t('userManage.resetPasswordWarning') || 'This will reset the user\'s password'"
|
|
type="warning"
|
|
showIcon
|
|
style="margin-bottom: 16px"
|
|
/>
|
|
<a-form-item :label="$t('userManage.newPassword') || 'New Password'">
|
|
<a-input-password
|
|
v-decorator="['new_password', {
|
|
rules: [
|
|
{ required: true, message: $t('userManage.passwordRequired') || 'Please enter new password' },
|
|
{ min: 6, message: $t('userManage.passwordMin') || 'Password must be at least 6 characters' }
|
|
]
|
|
}]"
|
|
:placeholder="$t('userManage.newPasswordPlaceholder') || 'Enter new password'"
|
|
>
|
|
<a-icon slot="prefix" type="lock" />
|
|
</a-input-password>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
|
|
<!-- Adjust Credits Modal -->
|
|
<a-modal
|
|
v-model="creditsModalVisible"
|
|
:title="($t('userManage.adjustCredits') || 'Adjust Credits') + (creditsEditingUser ? ` - ${creditsEditingUser.username}` : '')"
|
|
:confirmLoading="creditsLoading"
|
|
@ok="handleSetCredits"
|
|
>
|
|
<a-form layout="vertical">
|
|
<div class="current-credits-info" v-if="creditsEditingUser">
|
|
<span class="label">{{ $t('userManage.currentCredits') || 'Current Credits' }}:</span>
|
|
<span class="value">{{ formatCredits(creditsEditingUser.credits) }}</span>
|
|
</div>
|
|
<a-form-item :label="$t('userManage.newCredits') || 'New Credits'">
|
|
<a-input-number
|
|
v-model="newCredits"
|
|
:min="0"
|
|
:precision="2"
|
|
style="width: 100%"
|
|
:placeholder="$t('userManage.enterCredits') || 'Enter new credits amount'"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item :label="$t('userManage.remark') || 'Remark'">
|
|
<a-input
|
|
v-model="creditsRemark"
|
|
:placeholder="$t('userManage.remarkPlaceholder') || 'Optional remark'"
|
|
/>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
|
|
<!-- Set VIP Modal -->
|
|
<a-modal
|
|
v-model="vipModalVisible"
|
|
:title="($t('userManage.setVip') || 'Set VIP') + (vipEditingUser ? ` - ${vipEditingUser.username}` : '')"
|
|
:confirmLoading="vipLoading"
|
|
@ok="handleSetVip"
|
|
>
|
|
<a-form layout="vertical">
|
|
<div class="current-vip-info" v-if="vipEditingUser && vipEditingUser.vip_expires_at">
|
|
<span class="label">{{ $t('userManage.currentVip') || 'Current VIP' }}:</span>
|
|
<span class="value" :class="isVipActive(vipEditingUser.vip_expires_at) ? 'active' : 'expired'">
|
|
{{ isVipActive(vipEditingUser.vip_expires_at)
|
|
? ($t('userManage.vipActive') || 'Active') + ` (${formatDate(vipEditingUser.vip_expires_at)})`
|
|
: ($t('userManage.vipExpired') || 'Expired') }}
|
|
</span>
|
|
</div>
|
|
<a-form-item :label="$t('userManage.vipDays') || 'VIP Days'">
|
|
<a-select v-model="vipDays" style="width: 100%">
|
|
<a-select-option :value="0">{{ $t('userManage.cancelVip') || 'Cancel VIP' }}</a-select-option>
|
|
<a-select-option :value="7">7 {{ $t('userManage.days') || 'days' }}</a-select-option>
|
|
<a-select-option :value="30">30 {{ $t('userManage.days') || 'days' }}</a-select-option>
|
|
<a-select-option :value="90">90 {{ $t('userManage.days') || 'days' }}</a-select-option>
|
|
<a-select-option :value="180">180 {{ $t('userManage.days') || 'days' }}</a-select-option>
|
|
<a-select-option :value="365">365 {{ $t('userManage.days') || 'days' }}</a-select-option>
|
|
<a-select-option :value="-1">{{ $t('userManage.customDate') || 'Custom Date' }}</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item v-if="vipDays === -1" :label="$t('userManage.vipExpiresAt') || 'VIP Expires At'">
|
|
<a-date-picker
|
|
v-model="vipCustomDate"
|
|
showTime
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
style="width: 100%"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item :label="$t('userManage.remark') || 'Remark'">
|
|
<a-input
|
|
v-model="vipRemark"
|
|
:placeholder="$t('userManage.remarkPlaceholder') || 'Optional remark'"
|
|
/>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getUserList, createUser, updateUser, deleteUser, resetUserPassword, getRoles, setUserCredits, setUserVip, getSystemStrategies } from '@/api/user'
|
|
import { baseMixin } from '@/store/app-mixin'
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
name: 'UserManage',
|
|
mixins: [baseMixin],
|
|
data () {
|
|
return {
|
|
activeTab: 'users',
|
|
loading: false,
|
|
users: [],
|
|
roles: [],
|
|
searchKeyword: '',
|
|
pagination: {
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 0
|
|
},
|
|
// Create/Edit Modal
|
|
modalVisible: false,
|
|
modalLoading: false,
|
|
isEdit: false,
|
|
editingUser: null,
|
|
// Reset Password Modal
|
|
resetPasswordVisible: false,
|
|
resetPasswordLoading: false,
|
|
resetPasswordUserId: null,
|
|
// Credits Modal
|
|
creditsModalVisible: false,
|
|
creditsLoading: false,
|
|
creditsEditingUser: null,
|
|
newCredits: 0,
|
|
creditsRemark: '',
|
|
// VIP Modal
|
|
vipModalVisible: false,
|
|
vipLoading: false,
|
|
vipEditingUser: null,
|
|
vipDays: 30,
|
|
vipCustomDate: null,
|
|
vipRemark: '',
|
|
// System Strategy Overview
|
|
strategyLoading: false,
|
|
systemStrategies: [],
|
|
strategySummary: null,
|
|
strategyStatusFilter: 'all',
|
|
strategySearchKeyword: '',
|
|
strategyPagination: {
|
|
current: 1,
|
|
pageSize: 20,
|
|
total: 0
|
|
},
|
|
strategiesLoaded: false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['userInfo']),
|
|
isDarkTheme () {
|
|
return this.navTheme === 'dark' || this.navTheme === 'realdark'
|
|
},
|
|
currentUserId () {
|
|
return this.userInfo?.id
|
|
},
|
|
columns () {
|
|
return [
|
|
{
|
|
title: 'ID',
|
|
dataIndex: 'id',
|
|
width: 60
|
|
},
|
|
{
|
|
title: this.$t('userManage.username') || 'Username',
|
|
dataIndex: 'username',
|
|
width: 120
|
|
},
|
|
{
|
|
title: this.$t('userManage.nickname') || 'Nickname',
|
|
dataIndex: 'nickname',
|
|
width: 100
|
|
},
|
|
{
|
|
title: this.$t('userManage.email') || 'Email',
|
|
dataIndex: 'email',
|
|
width: 180
|
|
},
|
|
{
|
|
title: this.$t('userManage.role') || 'Role',
|
|
dataIndex: 'role',
|
|
width: 90,
|
|
scopedSlots: { customRender: 'role' }
|
|
},
|
|
{
|
|
title: this.$t('userManage.credits') || 'Credits',
|
|
dataIndex: 'credits',
|
|
width: 100,
|
|
scopedSlots: { customRender: 'credits' }
|
|
},
|
|
{
|
|
title: 'VIP',
|
|
dataIndex: 'vip_expires_at',
|
|
width: 120,
|
|
scopedSlots: { customRender: 'vip_expires_at' }
|
|
},
|
|
{
|
|
title: this.$t('userManage.status') || 'Status',
|
|
dataIndex: 'status',
|
|
width: 90,
|
|
scopedSlots: { customRender: 'status' }
|
|
},
|
|
{
|
|
title: this.$t('userManage.lastLogin') || 'Last Login',
|
|
dataIndex: 'last_login_at',
|
|
width: 150,
|
|
scopedSlots: { customRender: 'last_login_at' }
|
|
},
|
|
{
|
|
title: this.$t('common.actions') || 'Actions',
|
|
dataIndex: 'action',
|
|
width: 180,
|
|
scopedSlots: { customRender: 'action' }
|
|
}
|
|
]
|
|
},
|
|
strategyColumns () {
|
|
return [
|
|
{
|
|
title: 'ID',
|
|
dataIndex: 'id',
|
|
width: 60,
|
|
fixed: 'left'
|
|
},
|
|
{
|
|
title: this.$t('systemOverview.colUser') || 'User',
|
|
dataIndex: 'username',
|
|
width: 110,
|
|
fixed: 'left',
|
|
scopedSlots: { customRender: 'userInfo' }
|
|
},
|
|
{
|
|
title: this.$t('systemOverview.colStrategy') || 'Strategy',
|
|
dataIndex: 'strategy_name',
|
|
width: 160,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: this.$t('systemOverview.colStatus') || 'Status',
|
|
dataIndex: 'status',
|
|
width: 100,
|
|
scopedSlots: { customRender: 'strategyStatus' }
|
|
},
|
|
{
|
|
title: this.$t('systemOverview.colSymbol') || 'Symbol',
|
|
dataIndex: 'symbol',
|
|
width: 140,
|
|
scopedSlots: { customRender: 'symbolInfo' }
|
|
},
|
|
{
|
|
title: this.$t('systemOverview.colCapital') || 'Capital',
|
|
dataIndex: 'initial_capital',
|
|
width: 110,
|
|
scopedSlots: { customRender: 'capitalInfo' }
|
|
},
|
|
{
|
|
title: this.$t('systemOverview.colPnl') || 'PnL / ROI',
|
|
dataIndex: 'total_pnl',
|
|
width: 200,
|
|
scopedSlots: { customRender: 'pnlInfo' }
|
|
},
|
|
{
|
|
title: this.$t('systemOverview.colPositions') || 'Pos',
|
|
dataIndex: 'position_count',
|
|
width: 70,
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'positionInfo' }
|
|
},
|
|
{
|
|
title: this.$t('systemOverview.colTrades') || 'Trades',
|
|
dataIndex: 'trade_count',
|
|
width: 80,
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'tradeInfo' }
|
|
},
|
|
{
|
|
title: this.$t('systemOverview.colIndicator') || 'Indicator',
|
|
dataIndex: 'indicator_name',
|
|
width: 130,
|
|
scopedSlots: { customRender: 'indicatorInfo' }
|
|
},
|
|
{
|
|
title: this.$t('systemOverview.colExchange') || 'Exchange',
|
|
dataIndex: 'exchange_name',
|
|
width: 100,
|
|
scopedSlots: { customRender: 'exchangeInfo' }
|
|
},
|
|
{
|
|
title: this.$t('systemOverview.colTimeframe') || 'TF',
|
|
dataIndex: 'timeframe',
|
|
width: 70,
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'timeframeInfo' }
|
|
},
|
|
{
|
|
title: this.$t('systemOverview.colLeverage') || 'Lev',
|
|
dataIndex: 'leverage',
|
|
width: 70,
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'leverageInfo' }
|
|
},
|
|
{
|
|
title: this.$t('systemOverview.colCreatedAt') || 'Created',
|
|
dataIndex: 'created_at',
|
|
width: 150,
|
|
scopedSlots: { customRender: 'createdAtInfo' }
|
|
}
|
|
]
|
|
}
|
|
},
|
|
beforeCreate () {
|
|
this.form = this.$form.createForm(this)
|
|
this.resetPasswordForm = this.$form.createForm(this, { name: 'resetPassword' })
|
|
},
|
|
mounted () {
|
|
this.loadUsers()
|
|
this.loadRoles()
|
|
},
|
|
methods: {
|
|
handleTabChange (key) {
|
|
if (key === 'strategies' && !this.strategiesLoaded) {
|
|
this.loadSystemStrategies()
|
|
}
|
|
},
|
|
|
|
// ==================== System Strategy Overview ====================
|
|
async loadSystemStrategies () {
|
|
this.strategyLoading = true
|
|
try {
|
|
const res = await getSystemStrategies({
|
|
page: this.strategyPagination.current,
|
|
page_size: this.strategyPagination.pageSize,
|
|
status: this.strategyStatusFilter === 'all' ? '' : this.strategyStatusFilter,
|
|
search: this.strategySearchKeyword || ''
|
|
})
|
|
if (res.code === 1) {
|
|
this.systemStrategies = res.data.items || []
|
|
this.strategyPagination.total = res.data.total || 0
|
|
this.strategySummary = res.data.summary || {}
|
|
this.strategiesLoaded = true
|
|
} else {
|
|
this.$message.error(res.msg || 'Failed to load strategies')
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load system strategies:', error)
|
|
this.$message.error('Failed to load system strategies')
|
|
} finally {
|
|
this.strategyLoading = false
|
|
}
|
|
},
|
|
|
|
handleStrategySearch () {
|
|
this.strategyPagination.current = 1
|
|
this.loadSystemStrategies()
|
|
},
|
|
|
|
handleStrategyFilterChange () {
|
|
this.strategyPagination.current = 1
|
|
this.loadSystemStrategies()
|
|
},
|
|
|
|
handleStrategyTableChange (pagination) {
|
|
this.strategyPagination.current = pagination.current
|
|
this.strategyPagination.pageSize = pagination.pageSize
|
|
this.loadSystemStrategies()
|
|
},
|
|
|
|
getUserColor (userId) {
|
|
const colors = ['#1890ff', '#722ed1', '#13c2c2', '#fa8c16', '#eb2f96', '#52c41a', '#2f54eb', '#faad14']
|
|
return colors[(userId || 0) % colors.length]
|
|
},
|
|
|
|
formatNumber (num) {
|
|
if (!num && num !== 0) return '0'
|
|
return Number(num).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2 })
|
|
},
|
|
|
|
formatPnl (pnl) {
|
|
if (!pnl && pnl !== 0) return '0'
|
|
const val = Number(pnl)
|
|
const prefix = val >= 0 ? '+' : ''
|
|
return prefix + val.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 4 })
|
|
},
|
|
|
|
truncate (str, maxLen) {
|
|
if (!str) return ''
|
|
return str.length > maxLen ? str.substring(0, maxLen) + '...' : str
|
|
},
|
|
|
|
// ==================== User Management ====================
|
|
async loadUsers () {
|
|
this.loading = true
|
|
try {
|
|
const res = await getUserList({
|
|
page: this.pagination.current,
|
|
page_size: this.pagination.pageSize,
|
|
search: this.searchKeyword || ''
|
|
})
|
|
if (res.code === 1) {
|
|
this.users = res.data.items || []
|
|
this.pagination.total = res.data.total || 0
|
|
} else {
|
|
this.$message.error(res.msg || 'Failed to load users')
|
|
}
|
|
} catch (error) {
|
|
this.$message.error('Failed to load users')
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
|
|
handleSearch () {
|
|
this.pagination.current = 1
|
|
this.loadUsers()
|
|
},
|
|
|
|
async loadRoles () {
|
|
try {
|
|
const res = await getRoles()
|
|
if (res.code === 1) {
|
|
this.roles = res.data.roles || []
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load roles:', error)
|
|
}
|
|
},
|
|
|
|
handleTableChange (pagination) {
|
|
this.pagination.current = pagination.current
|
|
this.pagination.pageSize = pagination.pageSize
|
|
this.loadUsers()
|
|
},
|
|
|
|
showCreateModal () {
|
|
this.isEdit = false
|
|
this.editingUser = null
|
|
this.modalVisible = true
|
|
this.$nextTick(() => {
|
|
this.form.resetFields()
|
|
})
|
|
},
|
|
|
|
showEditModal (record) {
|
|
this.isEdit = true
|
|
this.editingUser = record
|
|
this.modalVisible = true
|
|
this.$nextTick(() => {
|
|
this.form.setFieldsValue({
|
|
username: record.username,
|
|
nickname: record.nickname,
|
|
email: record.email,
|
|
role: record.role,
|
|
status: record.status
|
|
})
|
|
})
|
|
},
|
|
|
|
handleModalCancel () {
|
|
this.modalVisible = false
|
|
this.form.resetFields()
|
|
},
|
|
|
|
handleModalOk () {
|
|
this.form.validateFields(async (err, values) => {
|
|
if (err) return
|
|
|
|
this.modalLoading = true
|
|
try {
|
|
let res
|
|
if (this.isEdit) {
|
|
res = await updateUser(this.editingUser.id, {
|
|
nickname: values.nickname,
|
|
email: values.email,
|
|
role: values.role,
|
|
status: values.status
|
|
})
|
|
} else {
|
|
res = await createUser(values)
|
|
}
|
|
|
|
if (res.code === 1) {
|
|
this.$message.success(res.msg || 'Success')
|
|
this.modalVisible = false
|
|
this.form.resetFields()
|
|
this.loadUsers()
|
|
} else {
|
|
this.$message.error(res.msg || 'Operation failed')
|
|
}
|
|
} catch (error) {
|
|
this.$message.error('Operation failed')
|
|
} finally {
|
|
this.modalLoading = false
|
|
}
|
|
})
|
|
},
|
|
|
|
async handleDelete (id) {
|
|
try {
|
|
const res = await deleteUser(id)
|
|
if (res.code === 1) {
|
|
this.$message.success(res.msg || 'User deleted')
|
|
this.loadUsers()
|
|
} else {
|
|
this.$message.error(res.msg || 'Delete failed')
|
|
}
|
|
} catch (error) {
|
|
this.$message.error('Delete failed')
|
|
}
|
|
},
|
|
|
|
showResetPasswordModal (record) {
|
|
this.resetPasswordUserId = record.id
|
|
this.resetPasswordVisible = true
|
|
this.$nextTick(() => {
|
|
this.resetPasswordForm.resetFields()
|
|
})
|
|
},
|
|
|
|
handleResetPassword () {
|
|
this.resetPasswordForm.validateFields(async (err, values) => {
|
|
if (err) return
|
|
|
|
this.resetPasswordLoading = true
|
|
try {
|
|
const res = await resetUserPassword({
|
|
user_id: this.resetPasswordUserId,
|
|
new_password: values.new_password
|
|
})
|
|
if (res.code === 1) {
|
|
this.$message.success(res.msg || 'Password reset successfully')
|
|
this.resetPasswordVisible = false
|
|
this.resetPasswordForm.resetFields()
|
|
} else {
|
|
this.$message.error(res.msg || 'Reset failed')
|
|
}
|
|
} catch (error) {
|
|
this.$message.error('Reset failed')
|
|
} finally {
|
|
this.resetPasswordLoading = false
|
|
}
|
|
})
|
|
},
|
|
|
|
getRoleColor (role) {
|
|
const colors = {
|
|
admin: 'red',
|
|
manager: 'orange',
|
|
user: 'blue',
|
|
viewer: 'default'
|
|
}
|
|
return colors[role] || 'default'
|
|
},
|
|
|
|
getRoleLabel (role) {
|
|
const labels = {
|
|
admin: this.$t('userManage.roleAdmin') || 'Admin',
|
|
manager: this.$t('userManage.roleManager') || 'Manager',
|
|
user: this.$t('userManage.roleUser') || 'User',
|
|
viewer: this.$t('userManage.roleViewer') || 'Viewer'
|
|
}
|
|
return labels[role] || role
|
|
},
|
|
|
|
formatTime (timestamp) {
|
|
if (!timestamp) return ''
|
|
const date = new Date(typeof timestamp === 'number' ? timestamp * 1000 : timestamp)
|
|
return date.toLocaleString()
|
|
},
|
|
|
|
formatCredits (credits) {
|
|
if (!credits && credits !== 0) return '0'
|
|
return Number(credits).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2 })
|
|
},
|
|
|
|
formatDate (dateStr) {
|
|
if (!dateStr) return ''
|
|
const date = new Date(dateStr)
|
|
return date.toLocaleDateString()
|
|
},
|
|
|
|
isVipActive (expiresAt) {
|
|
if (!expiresAt) return false
|
|
return new Date(expiresAt) > new Date()
|
|
},
|
|
|
|
// Credits Modal
|
|
showCreditsModal (record) {
|
|
this.creditsEditingUser = record
|
|
this.newCredits = parseFloat(record.credits) || 0
|
|
this.creditsRemark = ''
|
|
this.creditsModalVisible = true
|
|
},
|
|
|
|
async handleSetCredits () {
|
|
if (this.newCredits < 0) {
|
|
this.$message.error(this.$t('userManage.creditsNonNegative') || 'Credits cannot be negative')
|
|
return
|
|
}
|
|
|
|
this.creditsLoading = true
|
|
try {
|
|
const res = await setUserCredits({
|
|
user_id: this.creditsEditingUser.id,
|
|
credits: this.newCredits,
|
|
remark: this.creditsRemark
|
|
})
|
|
if (res.code === 1) {
|
|
this.$message.success(res.msg || 'Credits updated successfully')
|
|
this.creditsModalVisible = false
|
|
this.loadUsers()
|
|
} else {
|
|
this.$message.error(res.msg || 'Update failed')
|
|
}
|
|
} catch (error) {
|
|
this.$message.error('Update failed')
|
|
} finally {
|
|
this.creditsLoading = false
|
|
}
|
|
},
|
|
|
|
// VIP Modal
|
|
showVipModal (record) {
|
|
this.vipEditingUser = record
|
|
this.vipDays = 30
|
|
this.vipCustomDate = null
|
|
this.vipRemark = ''
|
|
this.vipModalVisible = true
|
|
},
|
|
|
|
async handleSetVip () {
|
|
const data = {
|
|
user_id: this.vipEditingUser.id,
|
|
remark: this.vipRemark
|
|
}
|
|
|
|
if (this.vipDays === -1) {
|
|
if (!this.vipCustomDate) {
|
|
this.$message.error(this.$t('userManage.selectDate') || 'Please select a date')
|
|
return
|
|
}
|
|
data.vip_expires_at = this.vipCustomDate.toISOString()
|
|
} else {
|
|
data.vip_days = this.vipDays
|
|
}
|
|
|
|
this.vipLoading = true
|
|
try {
|
|
const res = await setUserVip(data)
|
|
if (res.code === 1) {
|
|
this.$message.success(res.msg || 'VIP status updated successfully')
|
|
this.vipModalVisible = false
|
|
this.loadUsers()
|
|
} else {
|
|
this.$message.error(res.msg || 'Update failed')
|
|
}
|
|
} catch (error) {
|
|
this.$message.error('Update failed')
|
|
} finally {
|
|
this.vipLoading = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@primary-color: #1890ff;
|
|
|
|
.user-manage-page {
|
|
padding: 24px;
|
|
min-height: calc(100vh - 120px);
|
|
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
|
|
|
|
.page-header {
|
|
margin-bottom: 24px;
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin: 0 0 8px 0;
|
|
color: #1e3a5f;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
|
|
.anticon {
|
|
font-size: 28px;
|
|
color: @primary-color;
|
|
}
|
|
}
|
|
|
|
.page-desc {
|
|
color: #64748b;
|
|
font-size: 14px;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.manage-tabs {
|
|
/deep/ .ant-tabs-bar {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
// Summary Cards
|
|
.summary-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
|
|
.summary-card {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.summary-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
|
|
.anticon {
|
|
font-size: 22px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.summary-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
|
|
.summary-value {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
line-height: 1.3;
|
|
|
|
.roi-badge {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
margin-left: 6px;
|
|
padding: 1px 6px;
|
|
border-radius: 4px;
|
|
background: rgba(0, 0, 0, 0.04);
|
|
}
|
|
}
|
|
|
|
.summary-sub {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
margin-top: 2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.summary-label {
|
|
font-size: 13px;
|
|
color: #94a3b8;
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.toolbar {
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.toolbar-left {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.toolbar-right {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
}
|
|
|
|
.user-table-card {
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
|
|
.text-muted {
|
|
color: #94a3b8;
|
|
}
|
|
}
|
|
|
|
// PnL colors
|
|
.text-profit {
|
|
color: #52c41a;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.text-loss {
|
|
color: #ff4d4f;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pnl-value {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.roi-text {
|
|
font-size: 12px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.pnl-detail {
|
|
font-size: 11px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.symbol-text {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.symbol-count {
|
|
font-size: 11px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
// Status cell
|
|
.status-cell {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
|
|
.status-dot {
|
|
display: inline-block;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
|
|
&.dot-running {
|
|
background: #52c41a;
|
|
box-shadow: 0 0 6px rgba(82, 196, 26, 0.5);
|
|
animation: pulse-green 2s infinite;
|
|
}
|
|
|
|
&.dot-stopped {
|
|
background: #d9d9d9;
|
|
}
|
|
}
|
|
|
|
.status-running {
|
|
color: #52c41a;
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.status-stopped {
|
|
color: #999;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-green {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
// User cell
|
|
.user-cell {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
cursor: default;
|
|
|
|
.user-name {
|
|
font-size: 13px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 80px;
|
|
}
|
|
}
|
|
|
|
.indicator-name {
|
|
color: #722ed1;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.exchange-name {
|
|
font-size: 12px;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
// Dark theme
|
|
&.theme-dark {
|
|
background: linear-gradient(180deg, #0d1117 0%, #161b22 100%);
|
|
|
|
.page-header {
|
|
.page-title {
|
|
color: #e0e6ed;
|
|
}
|
|
.page-desc {
|
|
color: #8b949e;
|
|
}
|
|
}
|
|
|
|
.manage-tabs {
|
|
/deep/ .ant-tabs-bar {
|
|
border-bottom-color: #30363d;
|
|
}
|
|
/deep/ .ant-tabs-tab {
|
|
color: #8b949e;
|
|
&:hover {
|
|
color: #c9d1d9;
|
|
}
|
|
}
|
|
/deep/ .ant-tabs-tab-active {
|
|
color: @primary-color;
|
|
}
|
|
}
|
|
|
|
.summary-cards .summary-card {
|
|
background: #1e222d;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
|
|
|
|
.summary-info {
|
|
.summary-value {
|
|
color: #e0e6ed;
|
|
|
|
.roi-badge {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
}
|
|
.summary-sub {
|
|
color: #8b949e;
|
|
}
|
|
.summary-label {
|
|
color: #6e7681;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-table-card {
|
|
background: #1e222d;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
|
|
|
|
/deep/ .ant-card-body {
|
|
background: #1e222d;
|
|
}
|
|
|
|
/deep/ .ant-table {
|
|
background: #1e222d;
|
|
color: #c9d1d9;
|
|
|
|
.ant-table-thead > tr > th {
|
|
background: #252a36;
|
|
color: #e0e6ed;
|
|
border-bottom-color: #30363d;
|
|
}
|
|
|
|
.ant-table-tbody > tr > td {
|
|
border-bottom-color: #30363d;
|
|
}
|
|
|
|
.ant-table-tbody > tr:hover > td {
|
|
background: #252a36;
|
|
}
|
|
}
|
|
|
|
.text-muted {
|
|
color: #6e7681;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Credits value style
|
|
.credits-value {
|
|
font-weight: 600;
|
|
color: #722ed1;
|
|
}
|
|
|
|
// Current info styles
|
|
.current-credits-info,
|
|
.current-vip-info {
|
|
margin-bottom: 16px;
|
|
padding: 12px 16px;
|
|
background: #f5f5f5;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
|
|
.label {
|
|
color: #666;
|
|
}
|
|
|
|
.value {
|
|
font-weight: 600;
|
|
color: #1890ff;
|
|
font-size: 18px;
|
|
|
|
&.active {
|
|
color: #52c41a;
|
|
}
|
|
|
|
&.expired {
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Responsive
|
|
@media (max-width: 1200px) {
|
|
.summary-cards {
|
|
grid-template-columns: repeat(2, 1fr) !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.summary-cards {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
}
|
|
</style>
|