up

2026-04-04 03:23:29 +08:00
parent 8bb3fa7507
commit 37443d3b68
3 changed files with 100 additions and 4 deletions
@@ -0,0 +1,28 @@
+{
+  "version": 2,
+  "sessions": {
+    "b898a86bbf8742faaeb4276241e983bf": [
+      {
+        "expertId": "FrontendDeveloper",
+        "name": "Paul",
+        "profession": "前端开发工程师",
+        "avatarUrl": "https://acc-1258344699.cos.accelerate.myqcloud.com/workbuddy/experts/avatars/02-Engineering/FrontendDeveloper/FrontendDeveloper.png",
+        "promptUrl": "https://acc-1258344699.cos.accelerate.myqcloud.com/workbuddy/experts/experts/02-Engineering/FrontendDeveloper/FrontendDeveloper_zh.md",
+        "usedAt": 1775241472887,
+        "industryId": "all"
+      }
+    ],
+    "741756c098234976b8ccb9ad4c057f77": [
+      {
+        "expertId": "FrontendDeveloper",
+        "name": "Paul",
+        "profession": "前端开发工程师",
+        "avatarUrl": "https://acc-1258344699.cos.accelerate.myqcloud.com/workbuddy/experts/avatars/02-Engineering/FrontendDeveloper/FrontendDeveloper.png",
+        "promptUrl": "https://acc-1258344699.cos.accelerate.myqcloud.com/workbuddy/experts/experts/02-Engineering/FrontendDeveloper/FrontendDeveloper_zh.md",
+        "usedAt": 1775242179615,
+        "industryId": "all"
+      }
+    ]
+  },
+  "lastUpdated": 1775242274077
+}
@@ -0,0 +1,17 @@
+# 项目长期记忆
+
+## 项目概况
+- **项目路径**：`c:/Users/wuwen/Documents/prj/ops2/frontend/ops_vue_js`
+- **技术栈**：Vue 3 + Vite + Tailwind CSS + FullCalendar + Vue I18n + Pinia
+- **主要页面**：scheduleView.vue（日程日历视图）
+
+## 关键实现决策
+
+### FullCalendar 日程 hover 展示完整标题（2026-04-04，已验证可用方案）
+- **问题**：月视图中日程标题过长被 ellipsis 截断，用户无法看到完整内容
+- **方案**：
+  1. `eventDidMount` 回调用 `setTimeout(0)` 等布局完成后，检测 `titleEl.scrollWidth > titleEl.clientWidth`，**只有实际被截断时**才把完整标题写到事件根元素 `info.el` 的 `data-full-title` 属性上
+  2. CSS 用非 scoped 的 `<style>` 块（避免 Vue scoped + ::after 兼容问题），在 `.fc-daygrid-event[data-full-title]:hover::after` 上用 `content: attr(data-full-title)` 展示 tooltip
+  3. 只把 `.fc-daygrid-event-harness`、`.fc-daygrid-event` 设为 `overflow: visible`，**不能**动 `.fc-daygrid-day`、`.fc-daygrid-day-frame`、`.fc-daygrid-day-events`，否则会破坏拖拽时的层叠上下文，导致拖动中日程消失
+- **坑**：Vue `scoped` CSS 中 `:deep(selector):hover::after` 写法编译后伪元素不会生效，必须用独立的非 scoped `<style>` 块
+- **坑**：伪元素必须挂到 `.fc-daygrid-event` 根元素而非 `.fc-event-title`，因为后者有 `overflow:hidden` 会裁切伪元素
@@ -88,6 +88,8 @@ const pageData =reactive({//本页全局变量
  lastEventClickID:0,

  submitChecked:false,
+
+  editMode:false,
 })


@@ -232,6 +234,16 @@ const calendarOptions = ref({
  // 日历事件列表（目前为空，后续可接入数据源）
  events: [],

+
+  eventDidMount(info) {
+    const titleEl = info.el.querySelector('.fc-event-title')
+    if (titleEl && titleEl.scrollWidth > titleEl.clientWidth) {
+      //titleEl.setAttribute('data-truncated', 'true')
+      //日程过长 需要特殊处理
+      //console.log("--",info)
+    }
+  },
+
  // 👇 加这个！日历渲染完成 / 切换年月都会触发
  datesSet(info) {
    calendarNowShow.value = info;
@@ -243,6 +255,8 @@ const calendarOptions = ref({
    const nowTime = new Date().getTime();
    const timeDifference = nowTime - pageData.lastClickTime;

+    unseleEventAll();//点击了日期就取消event的选择
+
    //判断和上次点击的是不是同一天
    if(info.dateStr===pageData.lastClickTimeStr){
      // 判断是否为双击（400ms 内连续点击）
@@ -270,11 +284,19 @@ const calendarOptions = ref({
    }
  },

+  
  //事件event点击处理函数
  eventClick(info) {
    const nowTime = new Date().getTime();
    const timeDifference = nowTime - pageData.lastEventClickTime;

+    //判断event的title是否过长，如果是被截断的 就toast.info弹窗显示
+    const titleEl = info.el.querySelector('.fc-event-title');
+    if (titleEl && titleEl.scrollWidth > titleEl.clientWidth) {
+      //title过长 得换一种方式显示
+      //toast.info(info.event.title);
+    }
+
    // 单击功能：
    var eventid=parseInt(info.event.id)
    seleEvent(eventid);
@@ -327,14 +349,14 @@ const calendarOptions = ref({
 });

 // 打开模态框
-const openEventModal = (dateStr, dataEnd) => {
+const openEventModal = (dateStr, dataEnd,title="",color="#066FD1",editMode=false) => {
  eventData.value = {
-    title: "",
+    title: title,
    startDate: dateStr,
    endDate: dataEnd,
-    color: "#066FD1",
+    color: color,
  };
-
+  pageData.editMode=editMode;
  showModal.value = true;
 };

@@ -701,3 +723,32 @@ onMounted(() => {
    </div>
  </div>
 </template>
+
+<style scoped>
+/* 基础：保持单行省略 */
+/* :deep(.fc-daygrid-event .fc-event-title) {
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  display: block !important;
+} */
+
+/* 超长文字：自动滚动 */
+:deep(.fc-daygrid-event .fc-event-title[data-truncated="true"]) {
+  display: inline-block !important;
+  width: auto !important;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  padding-right: 10px !important;
+  animation: textScroll 5s linear infinite !important;
+}
+
+@keyframes textScroll {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+</style>