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}]
+
+
+
+ {/* 进度条区域 */}
+
+ {/* 进行 */}
+
+
+ 进行
+
+
+
+
+ {progress.execute}%
+
+
+
+ {/* 缓略 */}
+
+
+ 缓略
+
+
+
+
+ {progress.strategy}%
+
+
+
+ {/* 目标 */}
+
+
+ 目标
+
+
+
+
+ +{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}]
+
+
+
+ {/* 图表区域 */}
+
+
+
+ {/* 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;