定时任务 UI 参考

适用范围：定时任务列表、配置工作台、执行日志、告警、开放 Token、出站策略和流程绑定页面。目标用户：平台运维人员、业务配置人员、集成开发人员。

1. 当前页面为什么难懂

当前页面以数据库字段和 Quartz 技术概念组织信息：

列表直接展示 Bean 名称、方法名、Handler 和 Cron 表达式，用户难以先判断“任务做什么、什么时候执行、是否正常”。
新增/编辑在一个宽弹窗中连续堆放基本信息、执行配置、Cron、高级配置、邮箱和 Webhook，缺少明确的操作主线。
Cron 只能手输或从硬编码表达式列表选择，没有自然语言结果和未来执行时间反馈。
“清理 7 天前日志”和“清空所有日志”位于任务首页顶部，危险维护动作抢占了主要操作位置。
一行同时出现编辑、启动、停止、运行一次、运行日志、删除，扫描和选择成本高。
日志放在大弹窗中并横向滚动，直接展示 Handler、任务参数和完整异常，既难读也存在敏感信息风险。

对应代码入口：

forge-admin-ui/src/views/system/job-config.vue
forge-admin-ui/src/views/system/job-log-list.vue

2. 设计目标

用户进入任务中心后，应能在不理解 Cron、Bean 或 Handler 的情况下完成以下判断：

这个任务负责什么。
它什么时候执行。
当前是启用、停用、已结束还是同步异常。
最近一次是否成功，下一次什么时候执行。
如何编辑、立即运行、暂停和查看日志。

技术字段仍保留给平台开发人员，但默认进入“高级设置”，不作为普通操作主线。

3. 信息架构

3.1 任务列表

任务首页只承担“查找、判断状态、执行高频动作”：

┌──────────────────────────────────────────────────────────────────────────┐
│ 定时任务                                      [筛选] [刷新] [+ 新建任务] │
├──────────────────────────────────────────────────────────────────────────┤
│ 搜索任务  [分组] [状态] [执行方式]                         [重置] [查询] │
├──────────────────────────────────────────────────────────────────────────┤
│ 任务              执行内容        执行计划       状态    下次执行   操作 │
│ 库存日结          库存日结处理器  每天 02:00     运行中  明天02:00  ... │
│ 订单同步          订单同步处理器  每 10 分钟     异常    --         ... │
└──────────────────────────────────────────────────────────────────────────┘

默认列：

任务：任务名称 + 分组。
执行内容：处理器展示名称或自然语言摘要。
执行计划：例如“每天 02:00”“每 10 分钟”“2026-07-20 09:00 执行一次”。
状态：启用、停用、已结束；同步失败单独展示异常标识。
下次执行：使用用户时区格式化。
最近结果：成功、失败、跳过、运行中。
操作：编辑、立即运行、日志为高频动作；启停、同步重试、删除进入更多菜单。

不在默认列展示 Bean、方法名、Handler 编码、Cron 原文和完整异常。这些字段进入详情或高级设置。

3.2 任务配置工作台

复杂配置使用独立路由和全屏工作台，不使用通用 CRUD 弹窗：

┌──────────────────────────────────────────────────────────────────────────┐
│ ← 返回任务列表   新建任务 / 库存日结        未保存      [取消] [保存]  │
├──────────────┬──────────────────────────────────────┬────────────────────┤
│ 基本信息     │ 任务名称                             │ 配置摘要           │
│ 执行内容     │ 任务分组                             │ 执行：库存日结     │
│ 执行计划     │ 任务说明                             │ 计划：每天 02:00   │
│ 高级设置     │                                      │ 状态：保存后启用   │
│              │ 当前分区的实际表单                   │                    │
│              │                                      │ 未来执行           │
│              │                                      │ 07-20 02:00        │
│              │                                      │ 07-21 02:00        │
└──────────────┴──────────────────────────────────────┴────────────────────┘

顶部固定：返回、任务名称、保存状态、取消和保存。
左侧导航宽度稳定，分为基本信息、执行内容、执行计划、高级设置。
中间是当前配置区，使用分隔线组织，不嵌套卡片。
右侧是实时摘要和未来 5 次执行时间；窄屏移动到表单下方。
离开存在未保存改动的页面时使用项目现有 dirty tab 和路由离开确认。

4. 各区域交互

4.1 基本信息

任务名称：面向用户的展示名称。
任务分组：使用可搜索选择器，允许输入已有分组；不要求用户理解 DEFAULT。
任务说明：简短描述业务目的。
任务标识：编辑时只读，放在高级信息中，不让用户误以为可以随意改名。

4.2 执行内容

默认入口是选择“任务处理器”，数据来自后端注册目录：

执行方式  [任务处理器] [本地服务方法] [远程服务]

任务处理器  [库存日结                                  v]
             库存日结
             每日汇总库存流水并生成日结结果

HANDLER 对用户显示为“任务处理器”，优先使用可搜索目录选择，不手填编码。
BEAN 显示为“本地服务方法”，Bean 和方法字段只对技术配置人员展开。
RPC 显示为“远程服务”，服务名和处理器字段放在高级执行设置。
已有但未进入注册目录的历史目标显示“历史配置”，允许只读回显和技术人员修正。
任务参数提供 JSON 编辑器、格式化和即时校验；普通用户未配置参数时不显示空代码框。

4.3 执行计划

默认进入简单模式：

计划方式  [简单设置] [Cron 专家模式]

执行频率  [每天 v]
执行时间  [02:00]

结果：每天 02:00 执行
下次：07-20 02:00、07-21 02:00、07-22 02:00……

简单设置支持：

每隔 N 分钟。
每小时的第 N 分钟。
每天指定时间。
每周选择星期和时间。
每月选择日期和时间。

专家模式：

直接编辑 Quartz 6 段表达式。
显示服务端校验结果和未来 5 次执行时间。
无法安全反解析时保持原表达式并进入专家模式，不覆盖数据。

V3 增加一次性任务和时区后，调度类型先选择“周期执行/执行一次”，再显示对应字段；普通用户不需要看到 CRON/ONCE 枚举值。

4.4 保存状态

新建任务默认“保存后停用”，避免配置未验证即运行。
用户可以显式选择“保存后启用”。
保存按钮在校验失败时保持可点击并聚焦首个错误，不能静默无反应。
保存成功后明确返回“配置已保存，调度同步成功”或“配置已保存，调度同步失败，可重新同步”。
同步失败不能只显示通用错误 Toast，页面摘要区和任务列表都要保留可见状态。

5. 术语映射

技术字段	默认用户文案	展示位置
executeMode	执行方式	执行内容
HANDLER	任务处理器	默认选项
BEAN	本地服务方法	技术配置
RPC	远程服务	技术配置
executorHandler	处理器	选择目录/高级信息
executorBean	服务 Bean	高级信息
executorMethod	执行方法	高级信息
cronExpression	Cron 表达式	专家模式
scheduleType=CRON	周期执行	执行计划
scheduleType=ONCE	执行一次	执行计划
misfirePolicy	错过执行处理	运行策略
FIRE_ONCE_NOW	系统恢复后补执行一次	运行策略
DO_NOTHING	等待下一次计划	运行策略
SKIP_IF_RUNNING	上一轮未结束时跳过	运行策略
syncStatus=FAILED	调度同步失败	状态与列表
triggerType=MANUAL	手动运行	日志
triggerType=SCHEDULED	计划触发	日志

6. 操作层级

任务行高频操作：

编辑：铅笔图标 + 文案。
立即运行：播放图标 + 文案，确认框展示任务名和当前计划，不修改启停状态。
查看日志：日志图标 + 文案。

更多菜单：

启用/停用。
重新同步，仅同步失败时显示。
删除，使用红色危险操作并二次确认。

全局日志清理不放在任务首页主操作区。V5 实施后放入日志页“数据维护”菜单；V5 之前保留在页面更多菜单中，不与“新建任务”并列。

7. 日志页面

V5 将日志从大弹窗迁移为独立页面：

顶部组合筛选：任务、状态、来源、时间范围。
默认列：任务、状态、来源、开始时间、耗时、重试次数。
点击行在右侧详情抽屉展示执行时间线、结果摘要和错误摘要。
Handler、fireInstanceId 等技术字段放入“技术信息”折叠区。
任务参数和完整异常按敏感详情权限加载，不直接进入列表响应。

8. 后续版本的 UI 落位

版本	UI 增量
V1	列表增加调度同步状态和重新同步反馈，不重做整体布局
V2	完成任务列表重构、全屏配置工作台、处理器目录、Cron 简单/专家模式
V3	在执行计划区增加周期执行/执行一次和时区
V4	在高级设置增加并发、重试和错过执行处理，危险重试需明确确认
V5	独立日志页、详情抽屉、导出和轻量监控摘要
V6	告警配置和按权限显示操作
V7	独立 Token 管理页，明文只在创建结果弹窗显示一次
V8	克制的出站白名单主从配置工作台
V9	执行内容区选择已发布流程名称和固定版本

9. 视觉与响应式约束

使用 Forge 当前主题变量、Naive UI 和现有 Iconify/vicons 图标，不建立独立橙色或绿色主题。
页面保持企业控制台风格：高信息密度、清晰边框、8px 以内圆角、无渐变背景和装饰性动效。
不使用卡片嵌套卡片；工作台分区用页面列、分隔线和稳定宽度表达。
桌面宽度大于 1280px 时使用左导航 + 主表单 + 摘要；中等宽度隐藏左侧说明，仅保留锚点；移动端单列并固定底部保存操作。
所有按钮文本和状态标签必须完整显示，不能因列宽截断关键动作。
支持键盘焦点、表单错误聚焦、色彩之外的状态图标和文案。

10. UI 验收场景

用户不输入 Cron，只通过简单设置创建“每天 02:00 执行”的停用任务。
用户从处理器目录选择任务并看懂其业务描述，不手填 Handler 编码。
用户打开复杂历史 Cron，表达式保持不变并显示未来执行时间。
用户保存后能区分“保存成功并同步成功”和“保存成功但同步失败”。
用户能从列表完成立即运行、停用和查看日志，不在六个并列操作中寻找。
用户误触删除或日志清理时必须经过明确二次确认。
1366×768、1920×1080 和移动宽度下无按钮、标签或表单重叠。

ui-reference.md 12 KB لینک دائمی تاريخچه خام