fix: 界面调整、精简代码

master
Lxy 3 months ago
parent 4bafbcdd14
commit 0196d531ed

@ -16,9 +16,6 @@ const MainLayout = ({ children }) => {
const path = location.pathname; const path = location.pathname;
if (path === '/') return '1'; if (path === '/') return '1';
if (path === '/watchlist') return '2'; if (path === '/watchlist') return '2';
if (path.includes('/detail/')) return '3';
if (path === '/risk-control') return '4';
if (path === '/config') return '5';
return '1'; return '1';
}; };
@ -33,21 +30,6 @@ const MainLayout = ({ children }) => {
icon: <StarOutlined />, icon: <StarOutlined />,
label: <Link to="/watchlist">自选合约</Link>, label: <Link to="/watchlist">自选合约</Link>,
}, },
{
key: '3',
icon: <BarChartOutlined />,
label: <Link to="/detail/AG">详情分析</Link>,
},
{
key: '4',
icon: <SafetyOutlined />,
label: <Link to="/risk-control">风控管理</Link>,
},
{
key: '5',
icon: <SettingOutlined />,
label: <Link to="/config">配置管理</Link>,
},
]; ];
const toggleCollapse = () => { const toggleCollapse = () => {
@ -90,6 +72,14 @@ const MainLayout = ({ children }) => {
<h1 className="logo">AI期货分析系统</h1> <h1 className="logo">AI期货分析系统</h1>
</div> </div>
<div className="header-right"> <div className="header-right">
<Button
type="text"
icon={<SettingOutlined />}
style={{ marginRight: 16 }}
onClick={() => window.location.href = '/config'}
>
配置管理
</Button>
<Switch <Switch
checkedChildren={<MoonOutlined />} checkedChildren={<MoonOutlined />}
unCheckedChildren={<SunOutlined />} unCheckedChildren={<SunOutlined />}

@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Card, Row, Col, Form, Input, Button, Select, Switch, Slider, Tag, Alert, InputNumber, Radio, Space, Divider } from 'antd'; import { Card, Row, Col, Form, Input, Button, Select, Switch, Slider, Tag, Alert, InputNumber, Radio, Space, Divider, Statistic } from 'antd';
import { SettingOutlined, SlidersOutlined, SaveOutlined, CloseOutlined } from '@ant-design/icons'; import { SettingOutlined, SlidersOutlined, SaveOutlined, CloseOutlined, SafetyOutlined } from '@ant-design/icons';
import './Config.css'; import './Config.css';
const { Option } = Select; const { Option } = Select;
@ -234,6 +234,170 @@ const Config = () => {
</Form> </Form>
</Card> </Card>
{/* 风控管理 */}
<Card
title={<span><SafetyOutlined /> 风控管理</span>}
className="config-card"
style={{ marginTop: 24 }}
>
{/* 止损策略设置 */}
<Card title="止损策略设置" style={{ marginBottom: 16 }}>
<Form form={form} layout="vertical">
<Row gutter={[16, 16]}>
<Col span={8}>
<Item label="止损策略" name="stopLossStrategy">
<Select placeholder="选择止损策略">
<Option value="fixed">固定止损</Option>
<Option value="moving">移动止损</Option>
<Option value="percent">百分比止损</Option>
<Option value="volatility">波动率止损</Option>
</Select>
</Item>
</Col>
<Col span={8}>
<Item label="止损百分比" name="stopLossPercent">
<Input addonAfter="%" type="number" min={0.1} max={50} step={0.1} />
</Item>
</Col>
<Col span={8}>
<Item label="止损点位" name="stopLossPrice">
<Input addonBefore="¥" type="number" step={0.01} />
</Item>
</Col>
</Row>
<Button type="primary" style={{ marginTop: 8 }}>
应用止损策略
</Button>
</Form>
</Card>
{/* 仓位管理 */}
<Card title="仓位管理" style={{ marginBottom: 16 }}>
<Form form={form} layout="vertical">
<Row gutter={[16, 16]}>
<Col span={8}>
<Item label="账户余额" name="accountBalance">
<Input addonBefore="¥" type="number" min={1000} step={1000} />
</Item>
</Col>
<Col span={8}>
<Item label="每笔交易风险" name="riskPerTrade">
<Input addonAfter="%" type="number" min={0.1} max={20} step={0.1} />
</Item>
</Col>
<Col span={8}>
<Item label="止损百分比" name="stopLossPercent">
<Input addonAfter="%" type="number" min={0.1} max={50} step={0.1} />
</Item>
</Col>
</Row>
<Button type="primary" style={{ marginBottom: 16 }}>
计算仓位
</Button>
</Form>
{/* 风险偏好设置 */}
<Card title="风险偏好设置" style={{ marginTop: 16 }}>
<div className="risk-preference">
<div className="risk-slider">
<label>风险偏好: </label>
<Slider
min={0}
max={100}
defaultValue={50}
marks={{
0: '保守',
50: '适中',
100: '激进'
}}
/>
<Tag color="orange">
适中
</Tag>
</div>
<Alert
message="风险提示"
description="风险偏好设置将影响系统给出的仓位建议和止损策略,请根据自身风险承受能力合理设置。"
type="info"
showIcon
style={{ marginTop: 16 }}
/>
</div>
</Card>
</Card>
{/* 风险监控 */}
<Card title="风险监控" style={{ marginBottom: 16 }}>
<Row gutter={[16, 16]}>
<Col span={6}>
<Card className="risk-metric-card">
<Statistic
title="风险价值(VaR)"
value="12,500"
suffix="元"
valueStyle={{ color: '#fa8c16' }}
/>
<div className="risk-level">
<Tag color="orange">
中等风险
</Tag>
</div>
</Card>
</Col>
<Col span={6}>
<Card className="risk-metric-card">
<Statistic
title="最大回撤"
value="8.5"
suffix="%"
valueStyle={{ color: '#52c41a' }}
/>
<div className="risk-level">
<Tag color="green">
低风险
</Tag>
</div>
</Card>
</Col>
<Col span={6}>
<Card className="risk-metric-card">
<Statistic
title="夏普比率"
value="1.2"
valueStyle={{ color: '#52c41a' }}
/>
<div className="risk-level">
<Tag color="green">
</Tag>
</div>
</Card>
</Col>
<Col span={6}>
<Card className="risk-metric-card">
<Statistic
title="仓位使用率"
value="65"
suffix="%"
valueStyle={{ color: '#fa8c16' }}
/>
<div className="risk-level">
<Tag color="orange">
中等风险
</Tag>
</div>
</Card>
</Col>
</Row>
<Alert
message="风险监控提示"
description="系统会实时监控您的交易风险,当风险指标超过预警阈值时,会及时发出预警通知。"
type="warning"
showIcon
style={{ marginTop: 16 }}
/>
</Card>
</Card>
</div> </div>
); );

Loading…
Cancel
Save