feat: update TaskList component to display script execution time range and remove real-time timer

This commit is contained in:
duanshuwen
2026-04-16 18:45:56 +08:00
parent 210e8eb363
commit d233b94b2a
4 changed files with 25 additions and 30 deletions

View File

@@ -191,7 +191,7 @@ interface Task {
- 从 `useTaskStore()` 读取任务列表 - 从 `useTaskStore()` 读取任务列表
- "待处理" tab 显示 `pendingTasks`"已处理" tab 显示 `completedTasks` - "待处理" tab 显示 `pendingTasks`"已处理" tab 显示 `completedTasks`
- 动态计算 `total` 数量 - 动态计算 `total` 数量
- 顶部日期时间实时动态化("今天"/"昨天"/具体日期 + `HH:mm:ss` - 顶部时间区域改为展示脚本执行的数据时间段:左侧基于最新任务的 `createdAt` 显示 `"今天"`、`"昨天"` 或具体日期(`MM/DD`);右侧显示该任务的 `dateRange`(格式 `YYYY-MM-DD ~ YYYY-MM-DD`)。无任务时显示 `"执行时段"` 和 `"--"`。移除原有的 `setInterval` 实时定时器。
- 处理 `retry-failed`(调用 `taskStore.retryFailedSubTasks(taskId)`/ `remove` 事件 - 处理 `retry-failed`(调用 `taskStore.retryFailedSubTasks(taskId)`/ `remove` 事件
--- ---
@@ -301,10 +301,10 @@ List.vue 调用 taskStore.retryFailedSubTasks(taskId)
2. **重试粒度**"重试"操作仅针对该 Task 下 `status === 'failed'` 的 SubTask成功的 SubTask 保持原结果不变。 2. **重试粒度**"重试"操作仅针对该 Task 下 `status === 'failed'` 的 SubTask成功的 SubTask 保持原结果不变。
3. **Store 方法**`src/store/task.ts` 中增加 `retryFailedSubTasks(taskId)` 方法,用于批量重置并重新触发失败子任务。 3. **Store 方法**`src/store/task.ts` 中增加 `retryFailedSubTasks(taskId)` 方法,用于批量重置并重新触发失败子任务。
4. **视觉 UI 延用当前**`TaskList.vue` 与 `TaskCard.vue` 保持现有样式和布局,仅将数据来源从 `@constant/task` 静态假数据替换为 `useTaskStore`,并在现有样式框架内绑定状态、进度与操作按钮。 4. **视觉 UI 延用当前**`TaskList.vue` 与 `TaskCard.vue` 保持现有样式和布局,仅将数据来源从 `@constant/task` 静态假数据替换为 `useTaskStore`,并在现有样式框架内绑定状态、进度与操作按钮。
5. **日期时间动态化**`TaskList.vue` 顶部原有的静态日期("今天")和时间("02:32:05")改为响应式实时显示 5. **顶部时间区域显示脚本执行时段**`TaskList.vue` 顶部不再使用 `setInterval` 实时显示当前时间,而是展示当前 Tab 下最新任务的执行日期范围
- 左侧日期标签根据当前日期自动判断显示 **"今天"**、**"昨天"** 或具体日期(如 `04/16`)。 - 左侧日期标签根据最新任务的 `createdAt` 自动判断显示 **"今天"**、**"昨天"** 或具体日期(如 `04/16`)。
- 右侧时间通过 `setInterval` 每秒更新,格式为 `HH:mm:ss` - 右侧显示该任务的 `dateRange`,格式为 `YYYY-MM-DD ~ YYYY-MM-DD`,用于记录脚本操作房型的起止时间段
- 组件卸载时自动清理定时器 - 当列表中没有任务时,左侧显示 `"执行时段"`,右侧显示 `"--"`
6. **数据持久化使用 `electron-store`** 6. **数据持久化使用 `electron-store`**
- 渲染层 Store `useTaskStore` 通过 IPC (`GET_CONFIG` / `SET_CONFIG`) 读写任务列表,避免主进程直接暴露 Store 实例到渲染层。 - 渲染层 Store `useTaskStore` 通过 IPC (`GET_CONFIG` / `SET_CONFIG`) 读写任务列表,避免主进程直接暴露 Store 实例到渲染层。
- 主进程在 `config-service` 的 `DEFAULT_CONFIG` 中新增 `CONFIG_KEYS.TASK_LIST`,默认值为空数组 `[]`。 - 主进程在 `config-service` 的 `DEFAULT_CONFIG` 中新增 `CONFIG_KEYS.TASK_LIST`,默认值为空数组 `[]`。

View File

@@ -1,7 +1,10 @@
# 功能清单 # 功能清单
1、任务列表 1、任务列表 - 完成
2、走本地模型配置重构模型对话功能 - 完成 2、走本地模型配置重构模型对话功能 - 完成
3、上传表单信息+读取信息,脚本执行录取表单 3、上传表单信息+读取信息,脚本执行录取表单
4、定时任务脚本关联多个脚本执行 4、定时任务脚本关联多个脚本执行
5、一键打开渠道可以新增渠道 - 完成 5、一键打开渠道可以新增渠道 - 完成
6、把龙虾包装到对话
7、迁移频道功能
8、迁移agent功能

View File

@@ -7,7 +7,7 @@
`${item.total > 98 && item.total + '+' || item.total}` }}</span></div> `${item.total > 98 && item.total + '+' || item.total}` }}</span></div>
</div> </div>
</div> </div>
<div class="flex justify-between mt-3 mb-3 text-[14px]"> <div v-if="latestTask" class="flex justify-between mt-3 mb-3 text-[14px]">
<div class="text-[#171717] dark:text-gray-100">{{ currentDateLabel }}</div> <div class="text-[#171717] dark:text-gray-100">{{ currentDateLabel }}</div>
<div class="text-[#99A0AE] dark:text-gray-500">{{ currentTime }}</div> <div class="text-[#99A0AE] dark:text-gray-500">{{ currentTime }}</div>
</div> </div>
@@ -31,22 +31,26 @@
<script setup lang="ts"> <script setup lang="ts">
import Card from './TaskCard.vue' import Card from './TaskCard.vue'
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue' import { ref, reactive, computed } from 'vue'
import { useTaskStore } from '@stores/task' import { useTaskStore } from '@stores/task'
import type { Task } from '@lib/task-types' import type { Task } from '@lib/task-types'
const taskStore = useTaskStore() const taskStore = useTaskStore()
const now = ref(new Date()) const currentTasks = computed(() => active.value === 1 ? taskStore.pendingTasks : taskStore.completedTasks)
let timer: ReturnType<typeof setInterval> | null = null const latestTask = computed(() => currentTasks.value[0])
const currentDateLabel = computed(() => { const currentDateLabel = computed(() => {
if (!latestTask.value) {
return '执行时段'
}
const current = new Date(latestTask.value.createdAt)
const today = new Date() const today = new Date()
const y = today.getFullYear() const y = today.getFullYear()
const m = today.getMonth() const m = today.getMonth()
const d = today.getDate() const d = today.getDate()
const current = now.value
const cy = current.getFullYear() const cy = current.getFullYear()
const cm = current.getMonth() const cm = current.getMonth()
const cd = current.getDate() const cd = current.getDate()
@@ -65,24 +69,11 @@ const currentDateLabel = computed(() => {
}) })
const currentTime = computed(() => { const currentTime = computed(() => {
const pad = (n: number) => String(n).padStart(2, '0') if (!latestTask.value) {
const h = pad(now.value.getHours()) return '--'
const m = pad(now.value.getMinutes())
const s = pad(now.value.getSeconds())
return `${h}:${m}:${s}`
})
onMounted(() => {
timer = setInterval(() => {
now.value = new Date()
}, 1000)
})
onUnmounted(() => {
if (timer) {
clearInterval(timer)
timer = null
} }
const [start, end] = latestTask.value.dateRange
return `${start} ~ ${end}`
}) })
const tabs = reactive([ const tabs = reactive([

View File

@@ -24,7 +24,8 @@ export const useTaskStore = defineStore('task', () => {
// 持久化 helper用于减少写盘次数可在需要时调用 // 持久化 helper用于减少写盘次数可在需要时调用
const persist = async () => { const persist = async () => {
try { try {
await window.api.invoke(IPC_EVENTS.SET_CONFIG, CONFIG_KEYS.TASK_LIST, tasks.value); const payload = JSON.parse(JSON.stringify(tasks.value))
await window.api.invoke(IPC_EVENTS.SET_CONFIG, CONFIG_KEYS.TASK_LIST, payload);
} catch (e) { } catch (e) {
console.error('Failed to persist tasks', e); console.error('Failed to persist tasks', e);
} }