feat: 更新持仓
This commit is contained in:
R524809
624
apps/web/src/pages/assets/components/CreatePositionModal.tsx
Normal file
624
apps/web/src/pages/assets/components/CreatePositionModal.tsx
Normal file
@@ -0,0 +1,624 @@
|
||||
import { useState, useMemo, useEffect, useRef } from 'react';
|
||||
import {
|
||||
Modal,
|
||||
Form,
|
||||
Input,
|
||||
InputNumber,
|
||||
Select,
|
||||
Switch,
|
||||
AutoComplete,
|
||||
Button,
|
||||
Alert,
|
||||
Tag,
|
||||
App as AntdApp,
|
||||
} from 'antd';
|
||||
import { ReloadOutlined } from '@ant-design/icons';
|
||||
import { positionService } from '@/services/position';
|
||||
import { stockDataService, type AssetSearchResult } from '@/services/stock-data';
|
||||
import { useBrokerStore } from '@/stores/broker';
|
||||
import type { CreatePositionRequest } from '@/types/position';
|
||||
|
||||
// 简单的防抖函数
|
||||
function debounce<T extends (...args: any[]) => void>(
|
||||
func: T,
|
||||
wait: number
|
||||
): (...args: Parameters<T>) => void {
|
||||
let timeout: ReturnType<typeof setTimeout> | null = null;
|
||||
return function executedFunction(...args: Parameters<T>) {
|
||||
const later = () => {
|
||||
timeout = null;
|
||||
func(...args);
|
||||
};
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
interface CreatePositionModalProps {
|
||||
open: boolean;
|
||||
onCancel: () => void;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
const CreatePositionModal = ({ open, onCancel, onSuccess }: CreatePositionModalProps) => {
|
||||
const [form] = Form.useForm();
|
||||
const { message: messageApi } = AntdApp.useApp();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searchKeyword, setSearchKeyword] = useState('');
|
||||
const [searchResults, setSearchResults] = useState<AssetSearchResult[]>([]);
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
const [selectedAsset, setSelectedAsset] = useState<AssetSearchResult | null>(null);
|
||||
const [assetType, setAssetType] = useState<string>('');
|
||||
const [showManualInput, setShowManualInput] = useState(false);
|
||||
const nameInputRef = useRef<any>(null);
|
||||
|
||||
const brokers = useBrokerStore((state) => state.brokers);
|
||||
|
||||
// 初始化股票数据（弹窗打开时）
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
stockDataService.init().catch((error) => {
|
||||
console.error('初始化股票数据失败', error);
|
||||
messageApi.warning('股票数据加载失败，搜索功能可能不可用');
|
||||
});
|
||||
}
|
||||
}, [open, messageApi]);
|
||||
|
||||
// 防抖搜索（前端字符串匹配）
|
||||
const debouncedSearch = useMemo(
|
||||
() =>
|
||||
debounce((keyword: string) => {
|
||||
if (!keyword || keyword.trim().length < 1) {
|
||||
setSearchResults([]);
|
||||
setIsSearching(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSearching(true);
|
||||
try {
|
||||
// 在前端进行字符串匹配
|
||||
const results = stockDataService.searchAssets(keyword, 10);
|
||||
setSearchResults(results);
|
||||
} catch (error: any) {
|
||||
console.error('搜索失败', error);
|
||||
setSearchResults([]);
|
||||
messageApi.error(error.message || '搜索失败');
|
||||
} finally {
|
||||
setIsSearching(false);
|
||||
}
|
||||
}, 300),
|
||||
[messageApi]
|
||||
);
|
||||
|
||||
// 搜索资产
|
||||
const handleSearch = (keyword: string) => {
|
||||
setSearchKeyword(keyword);
|
||||
debouncedSearch(keyword);
|
||||
};
|
||||
|
||||
// 选择资产
|
||||
const handleSelectAsset = (asset: AssetSearchResult) => {
|
||||
setSelectedAsset(asset);
|
||||
setSearchKeyword(asset.name);
|
||||
setSearchResults([]);
|
||||
setShowManualInput(false);
|
||||
|
||||
// 统一市场代码：sh/sz/bj -> 'a' (A股)
|
||||
// 港股和美股直接使用
|
||||
const formMarket = asset.market === 'a' ? 'a' : asset.market;
|
||||
|
||||
// 自动填充表单
|
||||
form.setFieldsValue({
|
||||
assetType: 'stock', // 能匹配上的一定是股票
|
||||
market: formMarket,
|
||||
symbol: asset.symbol,
|
||||
name: asset.name,
|
||||
currency: asset.market === 'hk' ? 'HKD' : asset.market === 'us' ? 'USD' : 'CNY',
|
||||
});
|
||||
|
||||
setAssetType('stock');
|
||||
};
|
||||
|
||||
// 重新选择
|
||||
const handleResetSearch = () => {
|
||||
setSelectedAsset(null);
|
||||
setSearchKeyword('');
|
||||
setSearchResults([]);
|
||||
form.setFieldsValue({
|
||||
assetType: assetType || undefined,
|
||||
market: undefined,
|
||||
symbol: undefined,
|
||||
name: undefined,
|
||||
});
|
||||
};
|
||||
|
||||
// 资产类型变化
|
||||
const handleAssetTypeChange = (value: string) => {
|
||||
setAssetType(value);
|
||||
form.setFieldsValue({ assetType: value });
|
||||
|
||||
// 如果手动修改了资产类型，清空搜索选择
|
||||
if (selectedAsset && value !== 'stock') {
|
||||
handleResetSearch();
|
||||
}
|
||||
|
||||
// 如果选择了现金或其他，隐藏搜索框
|
||||
if (value === 'cash' || value === 'other') {
|
||||
setShowManualInput(true);
|
||||
} else {
|
||||
setShowManualInput(false);
|
||||
}
|
||||
|
||||
// 如果搜索框有内容，重新搜索
|
||||
if (searchKeyword && value === 'stock') {
|
||||
handleSearch(searchKeyword);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取搜索框占位符
|
||||
const getSearchPlaceholder = () => {
|
||||
return '输入股票代码或名称搜索（如：600519 或 贵州茅台）';
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async (values: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// 如果市场是 'a'（A股），转换为 'sh'（默认使用上海市场）
|
||||
const marketValue = values.market === 'a' ? 'sh' : values.market;
|
||||
|
||||
// 现金类型：symbol 为空字符串，name 固定为"现金"
|
||||
// 其他类型：symbol 为空字符串
|
||||
const symbolValue =
|
||||
values.assetType === 'cash' || values.assetType === 'other'
|
||||
? ''
|
||||
: values.symbol || '';
|
||||
const nameValue = values.assetType === 'cash' ? '现金' : values.name || '';
|
||||
|
||||
const requestData: CreatePositionRequest = {
|
||||
// 其他类型不需要 brokerId 和 market
|
||||
brokerId: values.assetType === 'other' ? undefined : values.brokerId,
|
||||
assetType: values.assetType,
|
||||
symbol: symbolValue,
|
||||
name: nameValue,
|
||||
market:
|
||||
values.assetType === 'other' || values.assetType === 'cash'
|
||||
? undefined
|
||||
: marketValue,
|
||||
// 现金类型不需要 shares 和 costPrice，使用默认值
|
||||
shares: values.assetType === 'cash' ? 1 : values.shares,
|
||||
costPrice:
|
||||
values.assetType === 'cash' ? values.currentPrice || 0 : values.costPrice,
|
||||
currentPrice: values.currentPrice,
|
||||
currency: values.currency || 'CNY',
|
||||
autoPriceUpdate: values.autoPriceUpdate || false,
|
||||
status: 'active',
|
||||
};
|
||||
|
||||
const response = await positionService.createPosition(requestData);
|
||||
if (response.code === 0) {
|
||||
messageApi.success('创建持仓成功');
|
||||
form.resetFields();
|
||||
setSelectedAsset(null);
|
||||
setSearchKeyword('');
|
||||
setAssetType('');
|
||||
onSuccess();
|
||||
onCancel();
|
||||
} else {
|
||||
messageApi.error(response.message || '创建持仓失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('创建持仓失败：', error);
|
||||
messageApi.error('创建持仓失败，请重试！');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 重置表单
|
||||
const handleCancel = () => {
|
||||
form.resetFields();
|
||||
setSelectedAsset(null);
|
||||
setSearchKeyword('');
|
||||
setSearchResults([]);
|
||||
setAssetType('');
|
||||
setShowManualInput(false);
|
||||
onCancel();
|
||||
};
|
||||
|
||||
// 市场选项
|
||||
const marketOptions = [
|
||||
{ value: 'a', label: 'A股' },
|
||||
{ value: 'hk', label: '港股' },
|
||||
{ value: 'us', label: '美股' },
|
||||
{ value: 'jp', label: '日股' },
|
||||
{ value: 'kr', label: '韩国股市' },
|
||||
{ value: 'eu', label: '欧洲市场' },
|
||||
{ value: 'sea', label: '东南亚市场' },
|
||||
{ value: 'other', label: '其他' },
|
||||
];
|
||||
|
||||
// 获取市场显示名称
|
||||
const getMarketDisplayName = (market: string) => {
|
||||
// 统一市场代码映射
|
||||
if (market === 'a' || market === 'sh' || market === 'sz' || market === 'bj') {
|
||||
return 'A股';
|
||||
}
|
||||
const option = marketOptions.find((opt) => opt.value === market);
|
||||
return option ? option.label : market;
|
||||
};
|
||||
|
||||
// 根据资产类型获取代码标签
|
||||
const getCodeLabel = (type: string) => {
|
||||
switch (type) {
|
||||
case 'stock':
|
||||
return '股票代码';
|
||||
case 'fund':
|
||||
return '基金代码';
|
||||
case 'bond':
|
||||
return '债券代码';
|
||||
default:
|
||||
return '资产代码';
|
||||
}
|
||||
};
|
||||
|
||||
// 根据资产类型获取名称标签
|
||||
const getNameLabel = (type: string) => {
|
||||
switch (type) {
|
||||
case 'stock':
|
||||
return '股票名称';
|
||||
case 'fund':
|
||||
return '基金名称';
|
||||
case 'bond':
|
||||
return '债券名称';
|
||||
default:
|
||||
return '资产名称';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="新建持仓"
|
||||
open={open}
|
||||
onCancel={handleCancel}
|
||||
footer={null}
|
||||
width={600}
|
||||
destroyOnHidden
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="horizontal"
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 18 }}
|
||||
onFinish={handleSubmit}
|
||||
initialValues={{
|
||||
currency: 'CNY',
|
||||
autoPriceUpdate: false,
|
||||
}}
|
||||
style={{
|
||||
marginTop: 10,
|
||||
maxWidth: '480px',
|
||||
margin: '10px auto 0',
|
||||
}}
|
||||
>
|
||||
{/* 搜索框（现金和其他类型时隐藏） */}
|
||||
{!showManualInput && (
|
||||
<Form.Item label="搜索资产">
|
||||
<AutoComplete
|
||||
value={searchKeyword}
|
||||
options={searchResults.map((asset) => ({
|
||||
value: `${asset.symbol} - ${asset.name}`,
|
||||
label: (
|
||||
<div>
|
||||
<div>
|
||||
<strong>{asset.symbol}</strong> - {asset.name}
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', color: '#999' }}>
|
||||
{getMarketDisplayName(asset.market)} - 股票
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
asset: asset,
|
||||
}))}
|
||||
onChange={handleSearch}
|
||||
onSelect={(_: any, option: any) => handleSelectAsset(option.asset)}
|
||||
placeholder={getSearchPlaceholder()}
|
||||
allowClear
|
||||
disabled={!!selectedAsset}
|
||||
notFoundContent={
|
||||
searchKeyword && !isSearching ? (
|
||||
<div>
|
||||
<div>未找到匹配的资产</div>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
// 聚焦到资产名称输入框
|
||||
setTimeout(() => {
|
||||
nameInputRef.current?.focus();
|
||||
}, 100);
|
||||
}}
|
||||
>
|
||||
点击手动输入
|
||||
</Button>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
showSearch={true}
|
||||
/>
|
||||
{selectedAsset && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<Tag color="blue">{selectedAsset.name}</Tag>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={handleResetSearch}
|
||||
>
|
||||
重新选择
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{/* 资产类型 */}
|
||||
<Form.Item
|
||||
name="assetType"
|
||||
label="资产类型"
|
||||
rules={[{ required: true, message: '请选择资产类型' }]}
|
||||
>
|
||||
<Select
|
||||
onChange={handleAssetTypeChange}
|
||||
disabled={!!selectedAsset}
|
||||
placeholder="选择资产类型"
|
||||
>
|
||||
<Select.Option value="stock">股票</Select.Option>
|
||||
<Select.Option value="fund">基金</Select.Option>
|
||||
<Select.Option value="bond">债券</Select.Option>
|
||||
<Select.Option value="cash">现金</Select.Option>
|
||||
<Select.Option value="other">其他</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
{/* 其他字段（有动画效果，只有在选择资产类型或选中资产后才显示） */}
|
||||
<div
|
||||
style={{
|
||||
overflow: 'hidden',
|
||||
transition: 'max-height 0.5s ease-in-out, opacity 0.5s ease-in-out',
|
||||
maxHeight: assetType || selectedAsset ? '3000px' : '0',
|
||||
opacity: assetType || selectedAsset ? 1 : 0,
|
||||
}}
|
||||
>
|
||||
{/* 市场和券商（股票/基金/债券显示） */}
|
||||
{(assetType === 'stock' || assetType === 'fund' || assetType === 'bond') && (
|
||||
<>
|
||||
<Form.Item
|
||||
name="symbol"
|
||||
label={getCodeLabel(assetType)}
|
||||
rules={[
|
||||
{ required: true, message: `请输入${getCodeLabel(assetType)}` },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder={`如：${assetType === 'stock' ? '600519、00700、AAPL' : assetType === 'fund' ? '000001' : '100001'}`}
|
||||
disabled={!!selectedAsset}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="name"
|
||||
label={getNameLabel(assetType)}
|
||||
rules={[
|
||||
{ required: true, message: `请输入${getNameLabel(assetType)}` },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
ref={nameInputRef as any}
|
||||
placeholder={`如：${assetType === 'stock' ? '贵州茅台' : assetType === 'fund' ? '华夏成长' : '国债'}`}
|
||||
disabled={!!selectedAsset}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="market" label="市场">
|
||||
<Select disabled={!!selectedAsset} placeholder="选择市场">
|
||||
{marketOptions.map((option) => (
|
||||
<Select.Option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="brokerId" label="券商">
|
||||
<Select placeholder="选择券商">
|
||||
{brokers.map((broker) => (
|
||||
<Select.Option
|
||||
key={broker.brokerId}
|
||||
value={broker.brokerId}
|
||||
>
|
||||
{broker.brokerName}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 券商（现金显示） */}
|
||||
{assetType === 'cash' && (
|
||||
<Form.Item name="brokerId" label="券商">
|
||||
<Select placeholder="选择券商">
|
||||
{brokers.map((broker) => (
|
||||
<Select.Option key={broker.brokerId} value={broker.brokerId}>
|
||||
{broker.brokerName}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{/* 其他类型：只显示名称、成本价、数量、最新价 */}
|
||||
{assetType === 'other' && (
|
||||
<>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="资产名称"
|
||||
rules={[{ required: true, message: '请输入资产名称' }]}
|
||||
>
|
||||
<Input ref={nameInputRef as any} placeholder="如：其他资产" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="costPrice"
|
||||
label="成本价"
|
||||
rules={[
|
||||
{ required: true, message: '请输入成本价' },
|
||||
{ type: 'number', min: 0.0001, message: '成本价必须大于0' },
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
prefix="¥"
|
||||
precision={2}
|
||||
placeholder="成本价"
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="shares"
|
||||
label="数量"
|
||||
rules={[
|
||||
{ required: true, message: '请输入数量' },
|
||||
{ type: 'number', min: 0.0001, message: '数量必须大于0' },
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
precision={4}
|
||||
placeholder="输入数量"
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="currentPrice" label="最新价">
|
||||
<InputNumber
|
||||
prefix="¥"
|
||||
precision={2}
|
||||
placeholder="输入最新价"
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 价格和数量（现金和其他类型不显示成本价和持股数量） */}
|
||||
{assetType && assetType !== 'cash' && assetType !== 'other' && (
|
||||
<>
|
||||
<Form.Item
|
||||
name="costPrice"
|
||||
label="成本价"
|
||||
rules={[
|
||||
{ required: true, message: '请输入成本价' },
|
||||
{ type: 'number', min: 0.0001, message: '成本价必须大于0' },
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
prefix="¥"
|
||||
precision={2}
|
||||
placeholder="成本价"
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="shares"
|
||||
label="持股数量"
|
||||
rules={[
|
||||
{ required: true, message: '请输入持股数量' },
|
||||
{ type: 'number', min: 0.0001, message: '持股数量必须大于0' },
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
precision={4}
|
||||
placeholder="输入持股数量"
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 最新价/现金余额（其他类型已在上面单独处理） */}
|
||||
{assetType && assetType !== 'other' && (
|
||||
<Form.Item
|
||||
name="currentPrice"
|
||||
label={assetType === 'cash' ? '现金余额' : '最新价'}
|
||||
rules={
|
||||
assetType === 'cash'
|
||||
? [
|
||||
{ required: true, message: '请输入现金余额' },
|
||||
{ type: 'number', min: 0, message: '现金余额不能小于0' },
|
||||
]
|
||||
: []
|
||||
}
|
||||
>
|
||||
<InputNumber
|
||||
prefix="¥"
|
||||
precision={2}
|
||||
placeholder={assetType === 'cash' ? '输入现金余额' : '输入最新价'}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{/* 其他选项
|
||||
<Form.Item name="currency" label="货币类型">
|
||||
<Select>
|
||||
<Select.Option value="CNY">人民币</Select.Option>
|
||||
<Select.Option value="HKD">港币</Select.Option>
|
||||
<Select.Option value="USD">美元</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>*/}
|
||||
|
||||
{assetType && (
|
||||
<>
|
||||
<Form.Item
|
||||
name="autoPriceUpdate"
|
||||
label="自动更新价格"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
|
||||
<Alert
|
||||
description={
|
||||
<div>
|
||||
<p>• 可以通过搜索框快速选择资产，系统会自动填充相关信息</p>
|
||||
<p>• 成本价和最新价请使用人民币计价</p>
|
||||
<p>
|
||||
• 如果持有港股/美股，请将港币/美元价格转换为人民币后输入
|
||||
</p>
|
||||
<p>• 系统会自动更新价格（如果开启自动更新）</p>
|
||||
</div>
|
||||
}
|
||||
type="info"
|
||||
showIcon
|
||||
style={{ marginBottom: 16 }}
|
||||
/>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'center', gap: 12 }}>
|
||||
<Button onClick={handleCancel}>取消</Button>
|
||||
<Button type="primary" htmlType="submit" loading={loading}>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreatePositionModal;
|
||||
Reference in New Issue
Block a user