From 130288eac19e8114c31476f32e1a89e0f8112703 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Mon, 22 Dec 2025 16:51:01 +0800 Subject: [PATCH] =?UTF-8?q?feat(StrategyCenter):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E6=8A=95=E8=B5=84=E8=A7=84=E5=88=92=E4=B8=AD=E5=BF=83=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Q1计划卡片（进度条+要点列表） - 银行股防守卡片（仓位+策略） - AI算力交易卡片（浮盈数据） - 消费复盘卡片（趋势图+心得） 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../components/AITradingCard.js | 84 ++++++++++ .../components/DefenseStrategyCard.js | 81 ++++++++++ .../components/QuarterPlanCard.js | 126 +++++++++++++++ .../StrategyCenter/components/ReviewCard.js | 143 ++++++++++++++++++ .../StrategyCenter/components/index.js | 5 + .../components/StrategyCenter/index.js | 63 ++++++++ 6 files changed, 502 insertions(+) create mode 100644 src/views/Profile/components/StrategyCenter/components/AITradingCard.js create mode 100644 src/views/Profile/components/StrategyCenter/components/DefenseStrategyCard.js create mode 100644 src/views/Profile/components/StrategyCenter/components/QuarterPlanCard.js create mode 100644 src/views/Profile/components/StrategyCenter/components/ReviewCard.js create mode 100644 src/views/Profile/components/StrategyCenter/components/index.js create mode 100644 src/views/Profile/components/StrategyCenter/index.js diff --git a/src/views/Profile/components/StrategyCenter/components/AITradingCard.js b/src/views/Profile/components/StrategyCenter/components/AITradingCard.js new file mode 100644 index 00000000..ae535d12 --- /dev/null +++ b/src/views/Profile/components/StrategyCenter/components/AITradingCard.js @@ -0,0 +1,84 @@ +// AI 算力交易卡片 +import React from 'react'; +import { Box, Text, VStack, HStack, Icon } from '@chakra-ui/react'; +import { Cpu, TrendingUp, Lightbulb } from 'lucide-react'; + +const AITradingCard = ({ + title = 'AI 算力交易', + currentProfit = 8.5, + targetProfit = 8.5, + strategies = [ + 'AI：界缓充提镂', + '筱略：高源分析', + ], +}) => { + const profitColor = currentProfit >= 0 ? '#EF4444' : '#22C55E'; + const profitSign = currentProfit >= 0 ? '+' : ''; + + return ( + + + {/* 标题 */} + + + + [{title}] + + + + {/* 浮盈数据 */} + + + + + 当前浮盈: + + + {profitSign}{currentProfit}% + + + + + + + 当前浮盈: + + + {profitSign}{targetProfit}% + + + + + {/* 策略列表 */} + + + + + 策略: + + + {strategies.map((item, index) => ( + + • + {item} + + ))} + + + + ); +}; + +export default AITradingCard; diff --git a/src/views/Profile/components/StrategyCenter/components/DefenseStrategyCard.js b/src/views/Profile/components/StrategyCenter/components/DefenseStrategyCard.js new file mode 100644 index 00000000..5e52581a --- /dev/null +++ b/src/views/Profile/components/StrategyCenter/components/DefenseStrategyCard.js @@ -0,0 +1,81 @@ +// 银行股防守卡片 +import React from 'react'; +import { Box, Text, VStack, HStack, Icon } from '@chakra-ui/react'; +import { Building2, Lock, TrendingUp, Lightbulb } from 'lucide-react'; + +const DefenseStrategyCard = ({ + title = '银行股防守', + position = '30%', + strategy = '高股息', + strategies = [ + 'AI辅AEI银行化分析', + 'AI：筏跌股鬈股', + ], +}) => { + return ( + + + {/* 标题 */} + + + + [{title}] + + + + {/* 仓位和策略 */} + + + + + 仓位: + + + {position} + + + + + + + 策略: + + + {strategy} + + + + + {/* 策略列表 */} + + + + + 策略: + + + {strategies.map((item, index) => ( + + • + {item} + + ))} + + + + ); +}; + +export default DefenseStrategyCard; diff --git a/src/views/Profile/components/StrategyCenter/components/QuarterPlanCard.js b/src/views/Profile/components/StrategyCenter/components/QuarterPlanCard.js new file mode 100644 index 00000000..9a03fa69 --- /dev/null +++ b/src/views/Profile/components/StrategyCenter/components/QuarterPlanCard.js @@ -0,0 +1,126 @@ +// 季度计划卡片 - 2025 Q1 计划 +import React from 'react'; +import { Box, Text, VStack, HStack, Progress, Icon } from '@chakra-ui/react'; +import { Calendar } from 'lucide-react'; + +const QuarterPlanCard = ({ + title = '2025 Q1 计划', + progress = { execute: 70, strategy: 100, target: 15 }, + keyPoints = [ + { label: '重点', value: 'AI、数字经济' }, + { label: '重点', value: 'AI、数字经济' }, + { label: '目标', value: '收益率+15%' }, + ], +}) => { + return ( + + + {/* 标题 */} + + + + [{title}] + + + + {/* 进度条区域 */} + + {/* 进行 */} + + + 进行 + + + div': { + bg: 'linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%)', + }, + }} + /> + + + {progress.execute}% + + + + {/* 缓略 */} + + + 缓略 + + + div': { + bg: 'linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%)', + }, + }} + /> + + + {progress.strategy}% + + + + {/* 目标 */} + + + 目标 + + + div': { + bg: 'linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%)', + }, + }} + /> + + + +{progress.target}% + + + + + {/* 要点列表 */} + + {keyPoints.map((point, index) => ( + + • + {point.label}: + {point.value} + + ))} + + + + ); +}; + +export default QuarterPlanCard; diff --git a/src/views/Profile/components/StrategyCenter/components/ReviewCard.js b/src/views/Profile/components/StrategyCenter/components/ReviewCard.js new file mode 100644 index 00000000..9571ef28 --- /dev/null +++ b/src/views/Profile/components/StrategyCenter/components/ReviewCard.js @@ -0,0 +1,143 @@ +// 消费复盘卡片（带图表） +import React, { useMemo } from 'react'; +import { Box, Text, VStack, HStack, Icon } from '@chakra-ui/react'; +import { ShoppingBag, Heart } from 'lucide-react'; + +const ReviewCard = ({ + title = '消费复盘', + chartData = [8000, 10000, 9500, 11000, 12000, 11500, 10500, 9000, 10000, 11000, 12500, 11000], + insight = '关注复苏节奏', +}) => { + // 生成图表路径 + const { linePath, areaPath } = useMemo(() => { + if (!chartData || chartData.length < 2) return { linePath: '', areaPath: '' }; + + const width = 140; + const height = 60; + const padding = { top: 8, right: 4, bottom: 16, left: 4 }; + + const chartWidth = width - padding.left - padding.right; + const chartHeight = height - padding.top - padding.bottom; + + const min = Math.min(...chartData); + const max = Math.max(...chartData); + const range = max - min || 1; + + const points = chartData.map((val, i) => { + const x = padding.left + (i / (chartData.length - 1)) * chartWidth; + const y = padding.top + chartHeight - ((val - min) / range) * chartHeight; + return { x, y }; + }); + + const linePathStr = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x},${p.y}`).join(' '); + + const areaPathStr = `${linePathStr} L ${points[points.length - 1].x},${height - padding.bottom} L ${padding.left},${height - padding.bottom} Z`; + + return { linePath: linePathStr, areaPath: areaPathStr }; + }, [chartData]); + + // Y轴刻度 + const yTicks = useMemo(() => { + const max = Math.max(...chartData); + return [max, Math.round(max / 2), 0]; + }, [chartData]); + + // X轴刻度 + const xTicks = ['10:05', '11:13', '12:15', '13:05']; + + return ( + + + {/* 标题 */} + + + + [{title}] + + + + {/* 图表区域 */} + + + {/* Y轴标签 */} + + {yTicks[0]} + + + {yTicks[1]} + + + {yTicks[2]} + + + {/* 网格线 */} + + + + + {/* 填充区域 */} + + + {/* 线条 */} + + + {/* 渐变定义 */} + + + + + + + + + {/* X轴标签 */} + + {xTicks.map((tick, i) => ( + {tick} + ))} + + + + {/* 心得 */} + + • + + 心得: + {insight} + + + + ); +}; + +export default ReviewCard; diff --git a/src/views/Profile/components/StrategyCenter/components/index.js b/src/views/Profile/components/StrategyCenter/components/index.js new file mode 100644 index 00000000..844af436 --- /dev/null +++ b/src/views/Profile/components/StrategyCenter/components/index.js @@ -0,0 +1,5 @@ +// 投资规划中心子组件导出 +export { default as QuarterPlanCard } from './QuarterPlanCard'; +export { default as DefenseStrategyCard } from './DefenseStrategyCard'; +export { default as AITradingCard } from './AITradingCard'; +export { default as ReviewCard } from './ReviewCard'; diff --git a/src/views/Profile/components/StrategyCenter/index.js b/src/views/Profile/components/StrategyCenter/index.js new file mode 100644 index 00000000..0aaa3769 --- /dev/null +++ b/src/views/Profile/components/StrategyCenter/index.js @@ -0,0 +1,63 @@ +// 投资规划中心组件 (Strategy Center) +import React from 'react'; +import { Box, Text, HStack, SimpleGrid, Icon } from '@chakra-ui/react'; +import { Target } from 'lucide-react'; +import GlassCard from '@components/GlassCard'; +import { + QuarterPlanCard, + DefenseStrategyCard, + AITradingCard, + ReviewCard, +} from './components'; + +const StrategyCenter = () => { + return ( + + {/* 标题栏 */} + + + + 投资规划中心 + + + (Strategy Center) + + + + + {/* 4列卡片布局 */} + + + + + + + + ); +}; + +export default StrategyCenter;