From a2a15e45a43e97f5f7e62872d06e5e479327aea7 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 23 Dec 2025 10:54:28 +0800
Subject: [PATCH] =?UTF-8?q?refactor(InvestmentPlanningCenter):=20=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E4=B8=BA=20GlassCard=20=E6=AF=9B=E7=8E=BB=E7=92=83?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 Chakra Card 组件，改用 GlassCard
- 标题添加金色渐变效果
- 视图切换按钮改为金色主题
- 使用 lucide-react 的 Target 图标替换 FiTarget
- 整体适配 FUI 黑金设计风格

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/InvestmentPlanningCenter.tsx   | 139 ++++++++++++------
 1 file changed, 95 insertions(+), 44 deletions(-)

diff --git a/src/views/Center/components/InvestmentPlanningCenter.tsx b/src/views/Center/components/InvestmentPlanningCenter.tsx
index 92402ac1..70ed3b53 100644
--- a/src/views/Center/components/InvestmentPlanningCenter.tsx
+++ b/src/views/Center/components/InvestmentPlanningCenter.tsx
@@ -15,9 +15,6 @@
 import React, { useState, useEffect, useCallback, useMemo, Suspense, lazy } from 'react';
 import {
   Box,
-  Card,
-  CardHeader,
-  CardBody,
   Heading,
   HStack,
   Flex,
@@ -33,14 +30,16 @@ import {
   Center,
   Button,
   ButtonGroup,
+  Text,
 } from '@chakra-ui/react';
 import {
   FiCalendar,
-  FiTarget,
   FiFileText,
   FiList,
   FiPlus,
 } from 'react-icons/fi';
+import { Target } from 'lucide-react';
+import GlassCard from '@components/GlassCard';
 
 import { PlanningDataProvider } from './PlanningContext';
 import type { InvestmentEvent, PlanningContextValue } from '@/types';
@@ -160,37 +159,64 @@ const InvestmentPlanningCenter: React.FC = () => {
     [allEvents]
   );
 
+  // 金色主题色
+  const goldAccent = 'rgba(212, 175, 55, 0.9)';
+
   return (
     <PlanningDataProvider value={contextValue}>
-      <Card bg={bgColor} shadow="md">
-        <CardHeader pb={{ base: 2, md: 4 }} px={{ base: 3, md: 5 }}>
-          <Flex justify="space-between" align="center" wrap="wrap" gap={2}>
-            <HStack spacing={{ base: 1, md: 2 }}>
-              <Icon as={FiTarget} color="purple.500" boxSize={{ base: 4, md: 5 }} />
-              <Heading size={{ base: 'sm', md: 'md' }}>投资规划中心</Heading>
-            </HStack>
-            {/* 视图切换按钮组 - H5隐藏 */}
-            <ButtonGroup size="sm" isAttached variant="outline" display={{ base: 'none', md: 'flex' }}>
-              <Button
-                leftIcon={<Icon as={FiList} boxSize={4} />}
-                colorScheme={viewMode === 'list' ? 'purple' : 'gray'}
-                variant={viewMode === 'list' ? 'solid' : 'outline'}
-                onClick={() => setViewMode('list')}
-              >
-                列表视图
-              </Button>
-              <Button
-                leftIcon={<Icon as={FiCalendar} boxSize={4} />}
-                colorScheme={viewMode === 'calendar' ? 'purple' : 'gray'}
-                variant={viewMode === 'calendar' ? 'solid' : 'outline'}
-                onClick={() => setViewMode('calendar')}
-              >
-                日历视图
-              </Button>
-            </ButtonGroup>
-          </Flex>
-        </CardHeader>
-        <CardBody pt={0} px={{ base: 3, md: 5 }}>
+      <GlassCard variant="transparent" cornerDecor padding="lg">
+        {/* 标题区域 */}
+        <Flex justify="space-between" align="center" wrap="wrap" gap={2} mb={{ base: 3, md: 4 }}>
+          <HStack spacing={{ base: 2, md: 3 }}>
+            <Box
+              as={Target}
+              boxSize={{ base: 5, md: 6 }}
+              color={goldAccent}
+            />
+            <Heading
+              size={{ base: 'sm', md: 'md' }}
+              bgGradient="linear(to-r, #D4AF37, #F5E6A3)"
+              bgClip="text"
+            >
+              投资规划中心
+            </Heading>
+          </HStack>
+          {/* 视图切换按钮组 - H5隐藏 */}
+          <ButtonGroup size="sm" isAttached display={{ base: 'none', md: 'flex' }}>
+            <Button
+              leftIcon={<Icon as={FiList} boxSize={4} />}
+              bg={viewMode === 'list' ? 'rgba(212, 175, 55, 0.2)' : 'transparent'}
+              color={viewMode === 'list' ? goldAccent : 'rgba(255, 255, 255, 0.6)'}
+              border="1px solid"
+              borderColor={viewMode === 'list' ? 'rgba(212, 175, 55, 0.4)' : 'rgba(212, 175, 55, 0.2)'}
+              _hover={{ bg: 'rgba(212, 175, 55, 0.15)', color: goldAccent }}
+              onClick={() => setViewMode('list')}
+            >
+              列表视图
+            </Button>
+            <Button
+              leftIcon={<Icon as={FiCalendar} boxSize={4} />}
+              bg={viewMode === 'calendar' ? 'rgba(212, 175, 55, 0.2)' : 'transparent'}
+              color={viewMode === 'calendar' ? goldAccent : 'rgba(255, 255, 255, 0.6)'}
+              border="1px solid"
+              borderColor={viewMode === 'calendar' ? 'rgba(212, 175, 55, 0.4)' : 'rgba(212, 175, 55, 0.2)'}
+              _hover={{ bg: 'rgba(212, 175, 55, 0.15)', color: goldAccent }}
+              onClick={() => setViewMode('calendar')}
+            >
+              日历视图
+            </Button>
+          </ButtonGroup>
+        </Flex>
+
+        {/* 渐变分割线 */}
+        <Box
+          h="1px"
+          bgGradient="linear(to-r, transparent, rgba(212, 175, 55, 0.4), transparent)"
+          mb={{ base: 3, md: 4 }}
+        />
+
+        {/* 内容区域 */}
+        <Box>
           {viewMode === 'calendar' ? (
             /* 日历视图 */
             <Suspense fallback={<PanelLoadingFallback />}>
@@ -201,27 +227,52 @@ const InvestmentPlanningCenter: React.FC = () => {
             <Tabs
               index={listTab}
               onChange={setListTab}
-              variant="enclosed"
-              colorScheme="purple"
+              variant="unstyled"
               size={{ base: 'sm', md: 'md' }}
             >
               <Flex justify="space-between" align="center" mb={{ base: 2, md: 4 }} flexWrap="nowrap" gap={1}>
-                <TabList mb={0} borderBottom="none" flex="1" minW={0}>
-                  <Tab fontSize={{ base: '11px', md: 'sm' }} px={{ base: 1, md: 4 }} whiteSpace="nowrap">
-                    <Icon as={FiTarget} mr={1} boxSize={{ base: 3, md: 4 }} />
+                <TabList mb={0} flex="1" minW={0}>
+                  <Tab
+                    fontSize={{ base: '11px', md: 'sm' }}
+                    px={{ base: 2, md: 4 }}
+                    py={2}
+                    whiteSpace="nowrap"
+                    color="rgba(255, 255, 255, 0.6)"
+                    _selected={{
+                      color: goldAccent,
+                      borderBottom: '2px solid',
+                      borderColor: goldAccent,
+                    }}
+                  >
+                    <Box as={Target} boxSize={{ base: 3, md: 4 }} mr={1} />
                     我的计划 ({planCount})
                   </Tab>
-                  <Tab fontSize={{ base: '11px', md: 'sm' }} px={{ base: 1, md: 4 }} whiteSpace="nowrap">
+                  <Tab
+                    fontSize={{ base: '11px', md: 'sm' }}
+                    px={{ base: 2, md: 4 }}
+                    py={2}
+                    whiteSpace="nowrap"
+                    color="rgba(255, 255, 255, 0.6)"
+                    _selected={{
+                      color: goldAccent,
+                      borderBottom: '2px solid',
+                      borderColor: goldAccent,
+                    }}
+                  >
                     <Icon as={FiFileText} mr={1} boxSize={{ base: 3, md: 4 }} />
                     我的复盘 ({reviewCount})
                   </Tab>
                 </TabList>
                 <Button
                   size="xs"
-                  colorScheme="purple"
+                  bg="rgba(212, 175, 55, 0.2)"
+                  color={goldAccent}
+                  border="1px solid"
+                  borderColor="rgba(212, 175, 55, 0.3)"
                   leftIcon={<Icon as={FiPlus} boxSize={3} />}
                   fontSize={{ base: '11px', md: 'sm' }}
                   flexShrink={0}
+                  _hover={{ bg: 'rgba(212, 175, 55, 0.3)' }}
                   onClick={() => {
                     if (listTab === 0) {
                       setOpenPlanModalTrigger(prev => prev + 1);
@@ -240,7 +291,7 @@ const InvestmentPlanningCenter: React.FC = () => {
                   <Suspense fallback={<PanelLoadingFallback />}>
                     <EventPanel
                       type="plan"
-                      colorScheme="purple"
+                      colorScheme="orange"
                       label="计划"
                       openModalTrigger={openPlanModalTrigger}
                     />
@@ -252,7 +303,7 @@ const InvestmentPlanningCenter: React.FC = () => {
                   <Suspense fallback={<PanelLoadingFallback />}>
                     <EventPanel
                       type="review"
-                      colorScheme="green"
+                      colorScheme="orange"
                       label="复盘"
                       openModalTrigger={openReviewModalTrigger}
                     />
@@ -261,8 +312,8 @@ const InvestmentPlanningCenter: React.FC = () => {
               </TabPanels>
             </Tabs>
           )}
-        </CardBody>
-      </Card>
+        </Box>
+      </GlassCard>
     </PlanningDataProvider>
   );
 };