From cc7fdbff56fcc9e9caa298360706d78e303ea356 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Fri, 5 Dec 2025 18:04:28 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20UI=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dashboard/components/CalendarPanel.tsx    |  30 +++-
 .../components/InvestmentCalendar.css         | 156 ------------------
 .../components/InvestmentCalendar.less        | 123 ++++++++++++++
 .../components/InvestmentCalendarChakra.js    |   2 +-
 .../components/InvestmentPlanningCenter.tsx   |  21 +--
 5 files changed, 162 insertions(+), 170 deletions(-)
 delete mode 100644 src/views/Dashboard/components/InvestmentCalendar.css
 create mode 100644 src/views/Dashboard/components/InvestmentCalendar.less

diff --git a/src/views/Dashboard/components/CalendarPanel.tsx b/src/views/Dashboard/components/CalendarPanel.tsx
index 5acb0135..f8a8f11e 100644
--- a/src/views/Dashboard/components/CalendarPanel.tsx
+++ b/src/views/Dashboard/components/CalendarPanel.tsx
@@ -26,6 +26,7 @@ import 'dayjs/locale/zh-cn';
 import { usePlanningData } from './PlanningContext';
 import { EventDetailModal } from './EventDetailModal';
 import type { InvestmentEvent } from '@/types';
+import './InvestmentCalendar.less';
 
 // 懒加载投资日历组件
 const InvestmentCalendar = lazy(() => import('@/views/Community/components/InvestmentCalendar'));
@@ -108,14 +109,37 @@ export const CalendarPanel: React.FC = () => {
 
   return (
     <Box>
-      <Box height={{ base: '380px', md: '560px' }}>
+      <Box
+        height={{ base: '380px', md: '560px' }}
+        sx={{
+          // FullCalendar 按钮样式覆盖（与日历视图按钮颜色一致）
+          '.fc .fc-button': {
+            backgroundColor: '#805AD5 !important',
+            borderColor: '#805AD5 !important',
+            color: '#fff !important',
+            '&:hover': {
+              backgroundColor: '#6B46C1 !important',
+              borderColor: '#6B46C1 !important',
+            },
+            '&:disabled': {
+              backgroundColor: '#6B46C1 !important',
+              borderColor: '#6B46C1 !important',
+              opacity: '1 !important',
+            },
+          },
+          // 今天日期高亮边框
+          '.fc-daygrid-day.fc-day-today': {
+            border: '2px solid #805AD5 !important',
+          },
+        }}
+      >
         <FullCalendar
           plugins={[dayGridPlugin, interactionPlugin]}
           initialView="dayGridMonth"
           locale="zh-cn"
           headerToolbar={{
-            left: 'prev,next',
-            center: 'today',
+            left: 'prev,next today',
+            center: 'title',
             right: ''
           }}
           events={calendarEvents}
diff --git a/src/views/Dashboard/components/InvestmentCalendar.css b/src/views/Dashboard/components/InvestmentCalendar.css
deleted file mode 100644
index 1867940b..00000000
--- a/src/views/Dashboard/components/InvestmentCalendar.css
+++ /dev/null
@@ -1,156 +0,0 @@
-/* src/views/Dashboard/components/InvestmentCalendar.css */
-
-/* FullCalendar 自定义样式 */
-.fc {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
-}
-
-.fc-theme-standard td,
-.fc-theme-standard th {
-  border-color: #e2e8f0;
-}
-
-.fc-button-primary {
-  background-color: #3182ce !important;
-  border-color: #3182ce !important;
-}
-
-.fc-button-primary:hover {
-  background-color: #2c5282 !important;
-  border-color: #2c5282 !important;
-}
-
-.fc-button-primary:not(:disabled):active,
-.fc-button-primary:not(:disabled).fc-button-active {
-  background-color: #2c5282 !important;
-  border-color: #2c5282 !important;
-}
-
-.fc-daygrid-day-number {
-  color: #2d3748;
-  font-weight: 500;
-}
-
-.fc-daygrid-day.fc-day-today {
-  background-color: #e6f3ff !important;
-}
-
-.fc-event {
-  border: none;
-  padding: 2px 4px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.fc-daygrid-event-dot {
-  display: none;
-}
-
-.fc-daygrid-day-events {
-  margin-top: 2px;
-}
-
-/* 响应式调整 - H5 优化 */
-@media (max-width: 768px) {
-  .fc-toolbar {
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 8px;
-    padding: 0 4px;
-  }
-
-  .fc-toolbar-chunk {
-    display: flex;
-    justify-content: center;
-  }
-
-  .fc-toolbar-title {
-    font-size: 1.1rem !important;
-    margin: 4px 0;
-    order: 3;
-    width: 100%;
-    text-align: center;
-  }
-
-  .fc-button-group {
-    margin: 0;
-  }
-
-  .fc-button {
-    padding: 4px 8px !important;
-    font-size: 12px !important;
-  }
-
-  .fc-today-button {
-    padding: 4px 12px !important;
-  }
-
-  /* 日历头部星期 */
-  .fc-col-header-cell-cushion {
-    font-size: 12px;
-    padding: 4px 2px;
-  }
-
-  /* 日期数字 */
-  .fc-daygrid-day-number {
-    font-size: 13px;
-    padding: 2px 4px;
-  }
-
-  /* 事件标签 */
-  .fc-event {
-    font-size: 10px !important;
-    padding: 1px 2px;
-    margin: 1px 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-  }
-
-  .fc-event-title {
-    font-size: 10px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  /* 日期单元格 */
-  .fc-daygrid-day {
-    min-height: 60px !important;
-  }
-
-  .fc-daygrid-day-frame {
-    min-height: 60px !important;
-  }
-
-  .fc-daygrid-day-events {
-    margin-top: 1px;
-  }
-
-  /* 更多链接 */
-  .fc-daygrid-more-link {
-    font-size: 10px;
-  }
-}
-
-/* 暗色模式支持 */
-@media (prefers-color-scheme: dark) {
-  .fc-theme-standard td,
-  .fc-theme-standard th {
-    border-color: #4a5568;
-  }
-  
-  .fc-daygrid-day-number {
-    color: #e2e8f0;
-  }
-  
-  .fc-daygrid-day.fc-day-today {
-    background-color: #2d3748 !important;
-  }
-  
-  .fc-col-header-cell-cushion,
-  .fc-daygrid-day-number {
-    color: #e2e8f0;
-  }
-}
diff --git a/src/views/Dashboard/components/InvestmentCalendar.less b/src/views/Dashboard/components/InvestmentCalendar.less
new file mode 100644
index 00000000..9df43695
--- /dev/null
+++ b/src/views/Dashboard/components/InvestmentCalendar.less
@@ -0,0 +1,123 @@
+// src/views/Dashboard/components/InvestmentCalendar.less
+
+// 颜色变量（与日历视图按钮一致的紫色）
+@primary-color: #805AD5;
+@primary-hover: #6B46C1;
+@border-color: #e2e8f0;
+@text-color: #2d3748;
+@today-bg: #e6f3ff;
+
+// 暗色模式颜色
+@dark-border-color: #4a5568;
+@dark-text-color: #e2e8f0;
+@dark-today-bg: #2d3748;
+
+// FullCalendar 自定义样式
+.fc {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+}
+
+// 工具栏按钮紧密排列（提升优先级）
+.fc .fc-toolbar.fc-header-toolbar {
+  justify-content: flex-start !important;
+  gap: 8px !important;
+}
+
+.fc .fc-toolbar-chunk:first-child {
+  display: flex !important;
+  gap: 4px !important;
+}
+
+.fc-theme-standard {
+  td, th {
+    border-color: @border-color;
+  }
+}
+
+// 按钮样式（针对 fc-button-group 内的按钮）
+.fc .fc-toolbar .fc-button-group .fc-button {
+  background-color: @primary-color !important;
+  border-color: @primary-color !important;
+  color: #fff !important;
+
+  &:hover {
+    background-color: @primary-hover !important;
+    border-color: @primary-hover !important;
+  }
+
+  &:not(:disabled):active,
+  &:not(:disabled).fc-button-active {
+    background-color: @primary-hover !important;
+    border-color: @primary-hover !important;
+  }
+}
+
+// 今天按钮样式
+.fc .fc-toolbar .fc-today-button {
+  background-color: @primary-color !important;
+  border-color: @primary-color !important;
+  color: #fff !important;
+
+  &:hover {
+    background-color: @primary-hover !important;
+    border-color: @primary-hover !important;
+  }
+
+  // 选中状态（disabled 表示当前视图包含今天）
+  &:disabled {
+    background-color: @primary-hover !important;
+    border-color: @primary-hover !important;
+    opacity: 1 !important;
+    color: #fff !important;
+  }
+}
+
+// 日期数字
+.fc-daygrid-day-number {
+  color: @text-color;
+  font-weight: 500;
+}
+
+// 今天高亮
+.fc-daygrid-day.fc-day-today {
+  background-color: @today-bg !important;
+  border: 2px solid @primary-color !important;
+}
+
+// 事件样式
+.fc-event {
+  border: none;
+  padding: 2px 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.fc-daygrid-event-dot {
+  display: none;
+}
+
+.fc-daygrid-day-events {
+  margin-top: 2px;
+}
+
+// 暗色模式支持
+@media (prefers-color-scheme: dark) {
+  .fc-theme-standard {
+    td, th {
+      border-color: @dark-border-color;
+    }
+  }
+
+  .fc-daygrid-day-number {
+    color: @dark-text-color;
+  }
+
+  .fc-daygrid-day.fc-day-today {
+    background-color: @dark-today-bg !important;
+  }
+
+  .fc-col-header-cell-cushion,
+  .fc-daygrid-day-number {
+    color: @dark-text-color;
+  }
+}
diff --git a/src/views/Dashboard/components/InvestmentCalendarChakra.js b/src/views/Dashboard/components/InvestmentCalendarChakra.js
index 653433a8..5c5a10fd 100644
--- a/src/views/Dashboard/components/InvestmentCalendarChakra.js
+++ b/src/views/Dashboard/components/InvestmentCalendarChakra.js
@@ -58,7 +58,7 @@ import { logger } from '../../../utils/logger';
 import { getApiBase } from '../../../utils/apiConfig';
 import TimelineChartModal from '../../../components/StockChart/TimelineChartModal';
 import KLineChartModal from '../../../components/StockChart/KLineChartModal';
-import './InvestmentCalendar.css';
+import './InvestmentCalendar.less';
 
 dayjs.locale('zh-cn');
 
diff --git a/src/views/Dashboard/components/InvestmentPlanningCenter.tsx b/src/views/Dashboard/components/InvestmentPlanningCenter.tsx
index 409a4c70..06899ff7 100644
--- a/src/views/Dashboard/components/InvestmentPlanningCenter.tsx
+++ b/src/views/Dashboard/components/InvestmentPlanningCenter.tsx
@@ -46,7 +46,7 @@ import { PlanningDataProvider } from './PlanningContext';
 import type { InvestmentEvent, PlanningContextValue } from '@/types';
 import { logger } from '@/utils/logger';
 import { getApiBase } from '@/utils/apiConfig';
-import './InvestmentCalendar.css';
+import './InvestmentCalendar.less';
 
 // 懒加载子面板组件（实现代码分割）
 const CalendarPanel = lazy(() =>
@@ -186,22 +186,23 @@ const InvestmentPlanningCenter: React.FC = () => {
               colorScheme="purple"
               size={{ base: 'sm', md: 'md' }}
             >
-              <Flex justify="space-between" align="center" mb={{ base: 2, md: 4 }} wrap="wrap" gap={2}>
-                <TabList mb={0} borderBottom="none">
-                  <Tab fontSize={{ base: 'xs', md: 'sm' }} px={{ base: 2, md: 4 }}>
-                    <Icon as={FiTarget} mr={{ base: 1, md: 2 }} boxSize={{ base: 3, md: 4 }} />
+              <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 }} />
                     我的计划 ({planCount})
                   </Tab>
-                  <Tab fontSize={{ base: 'xs', md: 'sm' }} px={{ base: 2, md: 4 }}>
-                    <Icon as={FiFileText} mr={{ base: 1, md: 2 }} boxSize={{ base: 3, md: 4 }} />
+                  <Tab fontSize={{ base: '11px', md: 'sm' }} px={{ base: 1, md: 4 }} whiteSpace="nowrap">
+                    <Icon as={FiFileText} mr={1} boxSize={{ base: 3, md: 4 }} />
                     我的复盘 ({reviewCount})
                   </Tab>
                 </TabList>
                 <Button
-                  size={{ base: 'xs', md: 'sm' }}
+                  size="xs"
                   colorScheme="purple"
-                  leftIcon={<Icon as={FiPlus} boxSize={{ base: 3, md: 4 }} />}
-                  fontSize={{ base: 'xs', md: 'sm' }}
+                  leftIcon={<Icon as={FiPlus} boxSize={3} />}
+                  fontSize={{ base: '11px', md: 'sm' }}
+                  flexShrink={0}
                   onClick={() => {
                     if (listTab === 0) {
                       setOpenPlanModalTrigger(prev => prev + 1);