164 lines
8.5 KiB
Markdown
164 lines
8.5 KiB
Markdown
# 2026-04-01 工作日志
|
||
|
||
## 修复 SQLite CGO 启动报错 ✅ (11:20)
|
||
|
||
- **问题**：fresh 启动时报 `CGO_ENABLED=0` 导致 go-sqlite3 无法工作
|
||
- **原因**：fresh 不是通过 run-dev.bat 启动，没有继承 `CGO_ENABLED=1` 环境变量
|
||
- **修复**：
|
||
- 更新 `run-dev.bat`：改为用 fresh 启动，并确保 `set CGO_ENABLED=1` 在 fresh 之前执行
|
||
- 更新 `start-dev.bat`：同样加上 `set CGO_ENABLED=1`
|
||
- 创建 `runner.conf`（fresh 配置文件）
|
||
- **正确启动方式**：在 backend/ 目录执行 `.\run-dev.bat`，或 PowerShell 中设置 `$env:CGO_ENABLED="1"` 后 `go run .`
|
||
- **GCC 问题**：已安装 TDM-GCC v10.3.0
|
||
- **Fresh 问题**：runner-build.exe 缓存损坏，已清理并改用 `go run .` 启动
|
||
|
||
## 为 AccountView.vue 添加中文注释 ✅ (12:43)
|
||
|
||
- 为 `frontend/ops_vue_js/src/views/settings/AccountView.vue` 添加完整的中文注释
|
||
- 包含：导入说明、响应式变量说明、函数功能说明、模板结构说明
|
||
- 未改变任何代码逻辑，仅添加注释
|
||
|
||
## 为 ScheduleView.vue 添加中文注释 ✅ (15:24)
|
||
|
||
- 为 `frontend/ops_vue_js/src/views/ScheduleView.vue` 添加完整的中文注释
|
||
- FullCalendar 日历组件，包含月/周/列表视图支持
|
||
- 详细注释：插件导入、配置选项（高度、语言、视图、工具栏、自定义按钮）
|
||
- 国际化监听逻辑说明
|
||
- 模板结构说明（容器布局、日历组件绑定）
|
||
|
||
## 为 ContactView.vue 添加中文注释 ✅ (13:36)
|
||
|
||
- 为 `frontend/ops_vue_js/src/views/settings/ContactView.vue` 添加完整的中文注释
|
||
- 包含：导入说明、表单数据说明、handleChangeEmail 函数详细注释
|
||
- 模板结构说明（页面布局、邮箱输入、验证提示、按钮交互）
|
||
- 未改变任何代码逻辑
|
||
|
||
## 后端入口迁移：cmd/ops-server/main.go → 根目录 main.go ✅ (11:05)
|
||
|
||
- 将新架构 `cmd/ops-server/main.go` 内容合并到根目录 `backend/main.go`
|
||
- 删除 `cmd/` 目录
|
||
- 更新 `run-dev.bat` 和 `start-dev.bat` 启动命令从 `go run ./cmd/ops-server/main.go` 改为 `go run .`
|
||
- 编译验证通过（0 errors）
|
||
- 现在直接在 `backend/` 目录下运行 `go run .` 即可启动
|
||
|
||
## 为 ScheduleView.vue 添加今天（Today）按钮 ✅ (13:50)
|
||
|
||
- 修改 `frontend/ops_vue_js/src/views/scheduleView.vue` 的 headerToolbar 配置
|
||
- 在 left 区域加入 `today` 按钮：`prevYear,prev,today,next,nextYear`
|
||
- 在 customButtons 中添加 today 按钮功能实现：`click() { calendarRef.value.getApi().today() }`
|
||
- 修复中英文语言文件中 `tody` 键名的拼写错误，改为正确的 `today`
|
||
- 更新 today 按钮文本引用为正确的键名 `t('schedule.today')`
|
||
- 所有代码编译通过，无语法错误
|
||
|
||
## 修复 ScheduleView.vue 中的 TypeError 错误 ✅ (14:07)
|
||
|
||
- **问题**：`Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'prevYear') at ScheduleView.vue:79:53`
|
||
- **原因**：`watch` 函数中访问路径错误，使用了 `calendarOptions.value.headerToolbar.customButtons`，但实际应该是 `calendarOptions.value.customButtons`
|
||
- **修复**：
|
||
- 将 `calendarOptions.value.headerToolbar.customButtons` 改为 `calendarOptions.value.customButtons`
|
||
- 在 `watch` 函数中添加 today 按钮的文本更新逻辑：`calendarOptions.value.customButtons.today.text = t('schedule.today')`
|
||
- 修复后错误消失，代码正常运行
|
||
|
||
## 完善 ScheduleView.vue 的 dateClick 功能（双击/单击区分）✅ (16:29)
|
||
|
||
- **添加响应式变量**：`const lastClickTime = ref(0)` 用于跟踪上次点击时间
|
||
- **修复逻辑错误**：
|
||
- 原代码中 `last_click_time` 是局部变量，改为使用响应式变量
|
||
- 修正时间差计算：`nowTime - lastClickTime.value`
|
||
- 正确的双击判断：`timeDifference < 400 && timeDifference > 0`
|
||
- 先计算时间差再更新 `lastClickTime.value`
|
||
- **实现双击功能**：`handleDoubleClick` 函数
|
||
- 弹出提示框让用户输入事件标题
|
||
- 创建新事件对象（包含标题、日期、颜色等属性）
|
||
- 添加到日历事件列表 `calendarOptions.value.events.push(newEvent)`
|
||
- **实现单击功能**：`handleSingleClick` 函数
|
||
- 获取该日期的所有事件
|
||
- 根据事件数量显示不同的提示信息
|
||
- 可以进一步扩展为显示事件详情或选中日期
|
||
- **功能说明**：
|
||
- 双击（400ms内连续点击）：快速添加新事件
|
||
- 单击：显示日期的事件详情
|
||
- 所有操作都有 console.log 输出便于调试
|
||
|
||
## 修复组件导入错误语法 ✅ (19:22)
|
||
|
||
- **问题**：`main.js:37 SyntaxError: The requested module '/src/components/datatimePickerForFullCalendar.vue' does not provide an export named 'datatimePickerForFullCalendar'`
|
||
- **原因**：
|
||
- 使用了错误的命名导入语法：`import {datatimePickerForFullCalendar} from "@/components/datatimePickerForFullCalendar.vue"`
|
||
- Vue组件应使用默认导入，不是命名导入
|
||
- **修复**：
|
||
- 改为正确语法：`import DatatimePickerForFullCalendar from "@/components/datatimePickerForFullCalendar.vue"`
|
||
- 组件文件 `datatimePickerForFullCalendar.vue` 内容不完整（仅有空template），但暂时被注释掉不影响运行
|
||
- **结果**：开发服务器成功启动，无语法错误，前端正常运行
|
||
|
||
## 实现日期选择器三栏对齐布局 ✅ (19:53)
|
||
|
||
- **需求**：`datatimePickerForFullCalendar.vue`中实现`{{ eventData.startDate }}`左对齐，`{{ t("schedule.to") }}`中间，`{{ eventData.endDate }}`右对齐
|
||
- **布局方案**：
|
||
- 使用`flex justify-between`使三个主要元素等宽分布在容器中
|
||
- 为每个元素添加对齐类：`text-left`、`text-center`、`text-right`
|
||
- 清除按钮使用`ml-2`保持与右侧对齐
|
||
- **功能完善**：
|
||
- 添加`clearDates()`函数，支持清除开始和结束日期
|
||
- 添加翻译键`"schedule.to"`到中英文i18n文件
|
||
- 中文："至"，英文："To"
|
||
- **验证结果**：
|
||
- 构建成功（6171 modules transformed）
|
||
- 无lint或语法错误
|
||
- 组件已在scheduleView.vue中取消注释并正确使用
|
||
|
||
## 修复组件间数据传递错误 ✅ (20:18)
|
||
|
||
- **问题**：`ScheduleView.vue`中`DatatimePickerForFullCalendar.passing_date_characters(dateStr,dateStr);`报错，直接调用子组件方法
|
||
- **解决方案**：
|
||
1. **添加Props支持**：在子组件中使用`defineProps`接收`startDate`和`endDate`
|
||
2. **添加事件发射**：使用`defineEmits`实现子组件向父组件通信
|
||
3. **双向数据绑定**：
|
||
- 父组件通过`:start-date="eventData.startDate"`传递数据
|
||
- 子组件通过`@update:start-date="(value) => eventData.startDate = value"`更新父组件数据
|
||
- 清除按钮触发`@clear-dates`事件，由父组件处理
|
||
- **子组件修改**：
|
||
```javascript
|
||
const props = defineProps({ startDate, endDate });
|
||
const emit = defineEmits(['update:startDate', 'update:endDate', 'clearDates']);
|
||
```
|
||
- 添加`watch`监听props变化更新本地状态
|
||
- 添加`watch`监听本地状态变化emit到父组件
|
||
- **父组件修改**：
|
||
- 移除错误的直接方法调用
|
||
- 改为props绑定：`<DatatimePickerForFullCalendar :start-date="eventData.startDate" :end-date="eventData.endDate" ... />`
|
||
- 添加事件监听函数`clearDatesInParent`
|
||
- **验证结果**：
|
||
- 构建成功（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高度，格子均匀分布
|