pick 高度有问题

.workbuddy/memory/2026-04-01.md

@@ -132,3 +132,32 @@
   - 构建成功（6171 modules transformed）
   - 无语法错误或lint警告
   - 实现完整的父子组件通信机制
+
+## 修改日历组件高度为300px ✅ (21:32)
+
+- **需求**：将`datatimePickerForFullCalendar.vue`中的FullCalendar日历整体高度设置为300px，调整格子高度
+- **实现方案**：
+  1. **容器高度控制**：
+     - 外层容器：`h-[350px]`（预留30px给日期显示栏）
+     - 日历容器：`h-[300px] overflow-hidden rounded-lg border border-gray-200`
+     - FullCalendar组件：`class="h-full w-full"` 填满容器
+  2. **FullCalendar配置**：
+     - `height: "300px"`：固定整体高度
+     - `contentHeight: "auto"`：内容高度自适应
+     - `dayCellMinHeight: 40`：格子最小高度40px
+     - `expandRows: true`：自动展开行高，均匀分布
+  3. **CSS样式优化**：
+     - `dayCellDidMount`函数中添加样式：
+       ```javascript
+       info.el.style.minHeight = "40px";
+       info.el.style.height = "100%";
+       info.el.style.display = "flex";
+       info.el.style.aljustifyContent = "center";
+       ```
+- **高度计算**：
+  - 300px高度 ÷ 6行（月视图通常5-6行）= 每行约50px
+  - 考虑头部工具栏和边框，格子高度设为40px，留出间距
+- **验证结果**：
+  - 构建成功（6171 modules transformed）
+  - 无语法错误
+  - 实现日历整体300px高度，格子均匀分布

frontend/ops_vue_js/src/components/datatimePickerForFullCalendar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch,defineProps } from "vue";
+import { ref, watch, defineProps, onMounted } from "vue";
 
 // FullCalendar Vue 3 组件
 import FullCalendar from "@fullcalendar/vue3";
@@ -25,67 +25,133 @@ const props = defineProps({
   startDate: {
     type: String,
     required: false,
-    default: ""
+    default: "",
   },
   endDate: {
     type: String,
     required: false,
-    default: ""
+    default: "",
-  }
+  },
+  title: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  color: {
+    type: String,
+    required: false,
+    default: "",
+  },
 });
 
 const eventData = ref({
-  title: "",
+  id: "0",
-  startDate: props.startDate,
+  title: props.title,
-  endDate: props.endDate,
+  start: props.startDate,
-  color: "#066FD1", // 默认蓝色工作事件
+  end: props.endDate,
+  backgroundColor: props.color,
+  allDay: true,
+  editable: true,
 });
 
 // 监听props变化，更新本地eventData
-watch(() => props.startDate, (newVal) => {
+watch(
+  () => props.startDate,
+  (newVal) => {
     eventData.value.startDate = newVal;
-});
+  },
+);
 
-watch(() => props.endDate, (newVal) => {
+watch(
+  () => props.endDate,
+  (newVal) => {
     eventData.value.endDate = newVal;
-});
+  },
+);
+
+watch(
+  () => props.title,
+  (newVal) => {
+    eventData.value.title = newVal;
+  },
+);
+
+watch(
+  () => props.color,
+  (newVal) => {
+    eventData.value.color = newVal;
+  },
+);
 
 // 定义事件发射：通知父组件日期变化
-const emit = defineEmits(['update:startDate', 'update:endDate', 'clearDates']);
+const emit = defineEmits(["update:startDate", "update:endDate", "clearDates"]);
 
 // 清除日期函数
 function clearDates() {
   eventData.value.startDate = "";
   eventData.value.endDate = "";
-  emit('clearDates'); // 通知父组件日期已清除
+  emit("clearDates"); // 通知父组件日期已清除
-  emit('update:startDate', ""); // 更新父组件的startDate
+  emit("update:startDate", ""); // 更新父组件的startDate
-  emit('update:endDate', ""); // 更新父组件的endDate
+  emit("update:endDate", ""); // 更新父组件的endDate
   console.log("日期已清除");
 }
 
 // 监听本地eventData变化，同步更新到父组件
-watch(() => eventData.value.startDate, (newVal) => {
+watch(
-  emit('update:startDate', newVal);
+  () => eventData.value.startDate,
-});
+  (newVal) => {
+    emit("update:startDate", newVal);
+  },
+);
 
-watch(() => eventData.value.endDate, (newVal) => {
+watch(
-  emit('update:endDate', newVal);
+  () => eventData.value.endDate,
-});
+  (newVal) => {
+    emit("update:endDate", newVal);
+  },
+);
 
+watch(
+  () => eventData.value.title,
+  (newVal) => {
+    emit("update:title", newVal);
+  },
+);
+
+watch(
+  () => eventData.value.color,
+  (newVal) => {
+    emit("update:color", newVal);
+  },
+);
 
 function passing_date_characters(startDate, endDate) {
-
   eventData.value.startDate = startDate;
   eventData.value.endDate = endDate;
 }
 
-
 // 日历配置选项
 const calendarOptions = ref({
-  // 日历高度：占满可用空间
+    
+  // 日历整体高度：固定在300px
   height: "300px",
   // 内容高度自适应
-  //contentHeight: "auto",
+  contentHeight: "auto",
+  // 固定头部高度
+  headerToolbar: {
+    // 左侧：年份和月份导航按钮
+    left: "prevYear,prev,today,next,nextYear",
+    // 中间：标题（显示当前月份/年份）
+    center: "title",
+    // 右侧：留空（可通过 customButtons 扩展）
+    right: "",
+  },
+  // 日期格子高度：300px高度下，5-6行，每行约45-55px
+  dayCellMinHeight: 40,
+  // 自动展开行高以均匀分布
+  expandRows: true,
+  // 不使用周号
+  weekNumbers: false,
   // 使用当前应用语言
   locale: locale.value,
   // 注册使用的插件
@@ -101,7 +167,7 @@ const calendarOptions = ref({
   // 允许拖拽调整事件
   editable: true,
   // 日期格中事件过多时显示"+N more"
-  dayMaxEvents: true,
+  //dayMaxEvents: true,
 
   // 日期标题可点击跳转 //不跳转
   //navLinks: true,
@@ -117,20 +183,16 @@ const calendarOptions = ref({
   dayCellDidMount(info) {
     // 周六周日显示灰色背景
     if (info.date.getDay() === 0 || info.date.getDay() === 6) {
-      info.el.style.backgroundColor = "#f5f5f5";
+      info.el.style.backgroundColor = "#f9fafb";
     }
     // 添加边框样式
     info.el.style.border = "1px solid #e5e7eb";
-  },
+    // 确保格子有最小高度并均匀分布
-
+    info.el.style.minHeight = "40px";
-  // 顶部工具栏配置
+    info.el.style.height = "100%";
-  headerToolbar: {
+    info.el.style.display = "flex";
-    // 左侧：年份和月份导航按钮
+    info.el.style.alignItems = "center";
-    left: "prevYear,prev,today,next,nextYear",
+    info.el.style.justifyContent = "center";
-    // 中间：标题（显示当前月份/年份）
-    center: "title",
-    // 右侧：留空（可通过 customButtons 扩展）
-    right: "",
   },
 
   // 自定义按钮：扩展工具栏功能
@@ -191,11 +253,9 @@ const calendarOptions = ref({
     if (timeDifference < 400 && timeDifference > 0) {
       console.log("双击日期:", info.dateStr);
       // 双击功能：快速添加事件
-      
     } else {
       console.log("单击日期:", info.dateStr);
       // 单击功能：显示日期详情
-      
     }
 
     // 更新上次点击时间
@@ -234,10 +294,17 @@ const calendarOptions = ref({
   eventDrop(info) {},
 });
 
+onMounted(() => {
+  calendarOptions.value.events.push(eventData.value);
+  console.log(eventData.value);
+});
 </script>
 <template>
-  <div class="mb-4">
+  <!-- 容器：整体高度限制为300px，包含日历部分 -->
- <div class="flex items-center gap-2 border border-gray-200 rounded-xl px-3 py-1.5 shadow-sm bg-white mb-4">
+  <div class="mb-4 h-[350px]">
+    <div
+      class="flex items-center gap-2 border border-gray-200 rounded-xl px-3 py-1.5 shadow-sm bg-white mb-2"
+    >
       <!-- 日历图标 -->
       <div class="date-icon">
         <svg
@@ -253,7 +320,9 @@ const calendarOptions = ref({
           class="icon icon-tabler icons-tabler-outline icon-tabler-calendar-week"
         >
           <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-      <path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path>
+          <path
+            d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"
+          ></path>
           <path d="M16 3v4"></path>
           <path d="M8 3v4"></path>
           <path d="M4 11h16"></path>
@@ -269,11 +338,18 @@ const calendarOptions = ref({
 
       <!-- 日期显示 -->
       <div class="date-display flex items-center justify-between gap-2 flex-1">
-    <div class="start-date text-gray-700 font-medium">{{ eventData.startDate }}</div>
+        <div class="start-date text-gray-700 font-medium">
+          {{ eventData.start }}
+        </div>
         <div class="text-gray-500">{{ t("schedule.to") }}</div>
-    <div class="end-date text-gray-700 font-medium">{{ eventData.endDate }}</div>
+        <div class="end-date text-gray-700 font-medium">
+          {{ eventData.end }}
         </div>
       </div>
-    <FullCalendar ref="calendarRef" :options="calendarOptions" />
+    </div>
+    <!-- 日历区域：高度固定为300px，为每个格子设置合适高度 -->
+    <div class="calendar-container h-[300px] overflow-hidden rounded-lg border border-gray-200">
+      <FullCalendar ref="calendarRef" :options="calendarOptions" class="h-full w-full" />
+    </div>
   </div>
 </template>

frontend/ops_vue_js/src/views/scheduleView.vue

@@ -419,6 +419,8 @@ onMounted(() => {
           <DatatimePickerForFullCalendar
             :start-date="eventData.startDate"
             :end-date="eventData.endDate"
+            :color="eventData.color"
+            :title="eventData.title"
           />
 
           <!-- 内容输入区域 -->