From ed42211c2e739c1a19a9214648d2ea442a24c171 Mon Sep 17 00:00:00 2001
From: flying-hero <462087392@qq.com>
Date: Fri, 3 Apr 2026 17:56:41 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E6=97=A5=E5=8E=86?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 缩小日历组件尺寸
  * 日历面板宽度：固定 260px
  * 日期格子高度：固定 32px
  * 导航按钮：24x24px
  * 字体大小：0.75em

- 修复格子大小不一致问题
  * 移除 aspect-ratio: 1
  * 使用固定宽高
  * 添加 box-sizing: border-box
  * 所有格子统一尺寸

- 优化间距
  * grid gap: 4px → 2px
  * padding: 12px → 10px
  * margin-bottom: 15px → 10px

- 视觉优化
  * border-radius: 8px → 6px → 3px
  * 更紧凑的布局
  * 防止内容溢出容器

🎨 日历现在紧凑又美观！
---
 .../src/components/MemoryModal/index.js       | 51 ++++++++++++-------
 1 file changed, 33 insertions(+), 18 deletions(-)

diff --git a/code/frontend/src/components/MemoryModal/index.js b/code/frontend/src/components/MemoryModal/index.js
index 66d8085..ae4858b 100644
--- a/code/frontend/src/components/MemoryModal/index.js
+++ b/code/frontend/src/components/MemoryModal/index.js
@@ -315,27 +315,35 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
 
         .memory-calendar-panel {
           border: 1px solid #e2e8f0;
-          border-radius: 8px;
-          padding: 15px;
+          border-radius: 6px;
+          padding: 10px;
           background: white;
           display: flex;
           flex-direction: column;
+          width: 260px;
+          min-width: 260px;
         }
 
         .calendar-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          margin-bottom: 15px;
+          margin-bottom: 10px;
         }
 
         .calendar-header button {
           background: #4299e1;
           color: white;
           border: none;
-          padding: 5px 12px;
-          border-radius: 6px;
+          padding: 3px 6px;
+          border-radius: 3px;
           cursor: pointer;
+          font-size: 0.85em;
+          width: 24px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
 
         .calendar-header button:hover {
@@ -345,27 +353,30 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
         .calendar-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 4px;
+          gap: 2px;
           flex: 1;
         }
 
         .calendar-weekday {
           text-align: center;
-          font-size: 0.8em;
+          font-size: 0.75em;
           color: #718096;
-          padding: 8px 0;
+          padding: 6px 0;
           font-weight: 500;
         }
 
         .calendar-day {
-          aspect-ratio: 1;
+          width: 100%;
+          height: 32px;
           display: flex;
           align-items: center;
           justify-content: center;
-          border-radius: 6px;
-          font-size: 0.9em;
+          border-radius: 3px;
+          font-size: 0.75em;
           cursor: pointer;
           transition: all 0.2s;
+          padding: 0;
+          box-sizing: border-box;
         }
 
         .calendar-day:hover:not(.empty) {
@@ -380,20 +391,24 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
           background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
           color: white;
           font-weight: bold;
+          width: 100%;
+          height: 32px;
         }
 
         .calendar-day.selected {
           border: 2px solid #ed8936;
           background: #f6ad55;
           color: white;
+          width: 100%;
+          height: 32px;
         }
 
         .calendar-legend {
-          margin-top: 10px;
+          margin-top: 8px;
           display: flex;
-          gap: 20px;
-          font-size: 0.85em;
-          padding-top: 10px;
+          gap: 12px;
+          font-size: 0.75em;
+          padding-top: 8px;
           border-top: 1px solid #e2e8f0;
         }
 
@@ -424,9 +439,9 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
         .stat-badge {
           background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
           color: white;
-          padding: 6px 12px;
-          border-radius: 20px;
-          font-size: 0.9em;
+          padding: 4px 10px;
+          border-radius: 16px;
+          font-size: 0.75em;
           font-weight: 600;
         }