fix: 增加消息提醒

master
Lxy 3 months ago
parent 3263f3ebcb
commit 0526feb278

@ -274,6 +274,7 @@
/* 查看详细分析按钮 */
.detail-button-new {
flex: 1;
min-width: 100px;
border-radius: 4px;
font-size: 14px;
padding: 10px;
@ -281,6 +282,15 @@
.watchlist-button-new {
flex: 1;
min-width: 100px;
border-radius: 4px;
font-size: 14px;
padding: 10px;
}
.push-button-new {
flex: 1;
min-width: 100px;
border-radius: 4px;
font-size: 14px;
padding: 10px;
@ -288,8 +298,9 @@
.future-actions-new {
display: flex;
gap: 12px;
gap: 8px;
margin-top: 16px;
flex-wrap: wrap;
}

@ -1,12 +1,13 @@
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Card, Row, Col, Statistic, Button, Select, Tag, message, Spin, Alert } from 'antd';
import { ReloadOutlined, ArrowUpOutlined, ArrowDownOutlined, FireOutlined, AlertOutlined, RobotOutlined } from '@ant-design/icons';
import { Card, Row, Col, Statistic, Button, Select, Tag, message, Spin, Alert, Modal, Form, InputNumber, Switch, Checkbox } from 'antd';
import { ReloadOutlined, ArrowUpOutlined, ArrowDownOutlined, FireOutlined, AlertOutlined, RobotOutlined, BellOutlined } from '@ant-design/icons';
import { fetchFuturesOverview, fetchRiskAlerts, fetchAIMarketAnalysis, toggleWatchlist } from '../../store/futuresSlice';
import { useNavigate } from 'react-router-dom';
import './Dashboard.css';
const { Option } = Select;
const { Item } = Form;
const Dashboard = () => {
const dispatch = useDispatch();
@ -14,6 +15,9 @@ const Dashboard = () => {
const { overview, riskAlerts, aiAnalysis, loading } = useSelector(state => state.futures);
const [filterType, setFilterType] = useState('all');
const [sortBy, setSortBy] = useState('winRate');
const [pushModalVisible, setPushModalVisible] = useState(false);
const [currentFuture, setCurrentFuture] = useState(null);
const [pushForm] = Form.useForm();
useEffect(() => {
dispatch(fetchFuturesOverview());
@ -38,6 +42,19 @@ const Dashboard = () => {
message.success(future.isInWatchlist ? '已从自选移除' : '已添加到自选');
};
const openPushConfig = (future, e) => {
e.stopPropagation();
setCurrentFuture(future);
setPushModalVisible(true);
};
const savePushConfig = (values) => {
console.log('消息推送配置保存:', values);
//
setPushModalVisible(false);
message.success('消息推送配置已保存');
};
const getChangeColor = (changePercent) => {
return changePercent >= 0 ? '#52c41a' : '#ff4d4f';
};
@ -310,11 +327,148 @@ const Dashboard = () => {
>
{item.isInWatchlist ? '已添加' : '添加自选'}
</Button>
<Button
type="default"
className="push-button-new"
icon={<BellOutlined />}
onClick={(e) => openPushConfig(item, e)}
>
消息推送
</Button>
</div>
</Card>
</Col>
))}
</Row>
{/* 消息推送配置模态框 */}
<Modal
title={`${currentFuture?.name || '合约'}消息推送配置`}
open={pushModalVisible}
onCancel={() => setPushModalVisible(false)}
width={800}
footer={[
<Button key="cancel" onClick={() => setPushModalVisible(false)}>
取消
</Button>,
<Button key="save" type="primary" onClick={() => pushForm.submit()}>
保存配置
</Button>
]}
>
<Form
form={pushForm}
layout="vertical"
onFinish={savePushConfig}
initialValues={{
pushMethods: ['email'],
alertTiming: 'price',
priceAlert: true,
priceLevel: 0,
trendChange: true,
riskAlert: true,
aiSignal: true
}}
>
{/* 推送方式 */}
<Card title="推送方式" style={{ marginBottom: 16 }}>
<Row gutter={[16, 16]}>
<Col span={8}>
<Item label="邮箱" name="emailPush" valuePropName="checked">
<Switch />
</Item>
</Col>
<Col span={8}>
<Item label="微信" name="wechatPush" valuePropName="checked">
<Switch />
</Item>
</Col>
<Col span={8}>
<Item label="钉钉" name="dingtalkPush" valuePropName="checked">
<Switch />
</Item>
</Col>
</Row>
</Card>
{/* 提醒时机 */}
<Card title="提醒时机" style={{ marginBottom: 16 }}>
<Row gutter={[16, 16]}>
<Col span={24}>
<Item label="提醒类型" name="alertTiming">
<Select>
<Option value="price">价格点位提醒</Option>
<Option value="trend">趋势变化提醒</Option>
<Option value="risk">风险预警提醒</Option>
<Option value="ai">AI信号提醒</Option>
</Select>
</Item>
</Col>
<Col span={12}>
<Item label="价格点位" name="priceLevel">
<InputNumber
min={0}
step={10}
placeholder="请输入价格点位"
/>
</Item>
</Col>
<Col span={12}>
<Item label="波动幅度(%)" name="priceChange">
<InputNumber
min={0.1}
max={10}
step={0.1}
placeholder="请输入波动幅度"
/>
</Item>
</Col>
</Row>
</Card>
{/* 推送内容 */}
<Card title="推送内容" style={{ marginBottom: 16 }}>
<Row gutter={[16, 8]}>
<Col span={12}>
<Item label="价格变动" name="priceAlert" valuePropName="checked">
<Switch defaultChecked />
</Item>
</Col>
<Col span={12}>
<Item label="趋势变化" name="trendChange" valuePropName="checked">
<Switch defaultChecked />
</Item>
</Col>
<Col span={12}>
<Item label="风险预警" name="riskAlert" valuePropName="checked">
<Switch defaultChecked />
</Item>
</Col>
<Col span={12}>
<Item label="AI信号" name="aiSignal" valuePropName="checked">
<Switch defaultChecked />
</Item>
</Col>
</Row>
</Card>
{/* 高级配置 */}
<Card title="高级配置" style={{ marginBottom: 16 }}>
<Row gutter={[16, 16]}>
<Col span={12}>
<Item label="推送频率限制(分钟)" name="pushInterval">
<InputNumber min={1} max={60} step={1} defaultValue={5} />
</Item>
</Col>
<Col span={12}>
<Item label="静默时间(小时)" name="quietHours">
<InputNumber min={0} max={24} step={1} defaultValue={0} />
</Item>
</Col>
</Row>
</Card>
</Form>
</Modal>
</div>
);
};

@ -208,11 +208,14 @@
/* 操作按钮 */
.future-actions-new {
display: flex;
gap: 12px;
gap: 8px;
flex-wrap: wrap;
margin-top: 16px;
}
.detail-button-new {
flex: 1;
min-width: 100px;
border-radius: 4px;
font-size: 14px;
padding: 10px;
@ -220,6 +223,15 @@
.watchlist-button-new {
flex: 1;
min-width: 100px;
border-radius: 4px;
font-size: 14px;
padding: 10px;
}
.push-button-new {
flex: 1;
min-width: 100px;
border-radius: 4px;
font-size: 14px;
padding: 10px;

@ -1,18 +1,22 @@
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Card, Row, Col, Button, Select, Tag, message, Spin } from 'antd';
import { ReloadOutlined, ArrowUpOutlined, ArrowDownOutlined, StarOutlined, DeleteOutlined } from '@ant-design/icons';
import { Card, Row, Col, Button, Select, Tag, message, Spin, Modal, Form, InputNumber, Switch } from 'antd';
import { ReloadOutlined, ArrowUpOutlined, ArrowDownOutlined, StarOutlined, DeleteOutlined, BellOutlined } from '@ant-design/icons';
import { fetchFuturesOverview, toggleWatchlist } from '../../store/futuresSlice';
import { useNavigate } from 'react-router-dom';
import './Watchlist.css';
const { Option } = Select;
const { Item } = Form;
const Watchlist = () => {
const dispatch = useDispatch();
const navigate = useNavigate();
const { overview, watchlist, loading } = useSelector(state => state.futures);
const [filterType, setFilterType] = useState('all');
const [pushModalVisible, setPushModalVisible] = useState(false);
const [currentFuture, setCurrentFuture] = useState(null);
const [pushForm] = Form.useForm();
useEffect(() => {
dispatch(fetchFuturesOverview());
@ -32,6 +36,19 @@ const Watchlist = () => {
message.success(future.isInWatchlist ? '已从自选移除' : '已添加到自选');
};
const openPushConfig = (future, e) => {
e.stopPropagation();
setCurrentFuture(future);
setPushModalVisible(true);
};
const savePushConfig = (values) => {
console.log('消息推送配置保存:', values);
//
setPushModalVisible(false);
message.success('消息推送配置已保存');
};
const getChangeColor = (changePercent) => {
return changePercent >= 0 ? '#52c41a' : '#ff4d4f';
};
@ -190,6 +207,14 @@ const Watchlist = () => {
>
删除自选
</Button>
<Button
type="default"
className="push-button-new"
icon={<BellOutlined />}
onClick={(e) => openPushConfig(item, e)}
>
消息推送
</Button>
</div>
</Card>
</Col>
@ -197,6 +222,135 @@ const Watchlist = () => {
</Row>
</>
)}
{/* 消息推送配置模态框 */}
<Modal
title={`${currentFuture?.name || '合约'}消息推送配置`}
open={pushModalVisible}
onCancel={() => setPushModalVisible(false)}
width={800}
footer={[
<Button key="cancel" onClick={() => setPushModalVisible(false)}>
取消
</Button>,
<Button key="save" type="primary" onClick={() => pushForm.submit()}>
保存配置
</Button>
]}
>
<Form
form={pushForm}
layout="vertical"
onFinish={savePushConfig}
initialValues={{
pushMethods: ['email'],
alertTiming: 'price',
priceAlert: true,
priceLevel: 0,
trendChange: true,
riskAlert: true,
aiSignal: true
}}
>
{/* 推送方式 */}
<Card title="推送方式" style={{ marginBottom: 16 }}>
<Row gutter={[16, 16]}>
<Col span={8}>
<Item label="邮箱" name="emailPush" valuePropName="checked">
<Switch />
</Item>
</Col>
<Col span={8}>
<Item label="微信" name="wechatPush" valuePropName="checked">
<Switch />
</Item>
</Col>
<Col span={8}>
<Item label="钉钉" name="dingtalkPush" valuePropName="checked">
<Switch />
</Item>
</Col>
</Row>
</Card>
{/* 提醒时机 */}
<Card title="提醒时机" style={{ marginBottom: 16 }}>
<Row gutter={[16, 16]}>
<Col span={24}>
<Item label="提醒类型" name="alertTiming">
<Select>
<Option value="price">价格点位提醒</Option>
<Option value="trend">趋势变化提醒</Option>
<Option value="risk">风险预警提醒</Option>
<Option value="ai">AI信号提醒</Option>
</Select>
</Item>
</Col>
<Col span={12}>
<Item label="价格点位" name="priceLevel">
<InputNumber
min={0}
step={10}
placeholder="请输入价格点位"
/>
</Item>
</Col>
<Col span={12}>
<Item label="波动幅度(%)" name="priceChange">
<InputNumber
min={0.1}
max={10}
step={0.1}
placeholder="请输入波动幅度"
/>
</Item>
</Col>
</Row>
</Card>
{/* 推送内容 */}
<Card title="推送内容" style={{ marginBottom: 16 }}>
<Row gutter={[16, 8]}>
<Col span={12}>
<Item label="价格变动" name="priceAlert" valuePropName="checked">
<Switch defaultChecked />
</Item>
</Col>
<Col span={12}>
<Item label="趋势变化" name="trendChange" valuePropName="checked">
<Switch defaultChecked />
</Item>
</Col>
<Col span={12}>
<Item label="风险预警" name="riskAlert" valuePropName="checked">
<Switch defaultChecked />
</Item>
</Col>
<Col span={12}>
<Item label="AI信号" name="aiSignal" valuePropName="checked">
<Switch defaultChecked />
</Item>
</Col>
</Row>
</Card>
{/* 高级配置 */}
<Card title="高级配置" style={{ marginBottom: 16 }}>
<Row gutter={[16, 16]}>
<Col span={12}>
<Item label="推送频率限制(分钟)" name="pushInterval">
<InputNumber min={1} max={60} step={1} defaultValue={5} />
</Item>
</Col>
<Col span={12}>
<Item label="静默时间(小时)" name="quietHours">
<InputNumber min={0} max={24} step={1} defaultValue={0} />
</Item>
</Col>
</Row>
</Card>
</Form>
</Modal>
</div>
);
};

Loading…
Cancel
Save