admin/xyzw_web_helper

Fork 0

Files

kirin 90094ccd5a 1.0

2025-10-17 20:56:50 +08:00

11 KiB

Raw Permalink Blame History

功能更新 - 定时任务状态提示 v3.5.0

更新时间: 2025-10-07
版本: v3.5.0

🎯 更新背景

用户反馈：发现没有设置定时任务，但批量自动化仍然会自动过一段时间执行任务。

问题根源:

定时任务配置保存在 localStorage 中
用户可能之前无意中启用了定时任务
页面刷新后定时任务会自动恢复运行
缺乏明显的状态提示，用户不知道定时任务正在运行

✨ 新增功能

1. 定时任务状态指示器

在批量自动化面板的右上角添加了明显的状态标签：

状态标签显示

状态	颜色	显示内容	示例
未启用	灰色	`定时任务：未启用`	⏰ 定时任务：未启用
间隔执行	橙色	`定时任务：每X小时`	⏰ 定时任务：每4小时
每日定时	橙色	`定时任务：每日N次`	⏰ 定时任务：每日4次

悬停提示（Tooltip）

鼠标悬停在状态标签上时，显示详细信息：

已启用时:

定时任务已启用
间隔执行：每 4 小时
上次执行：10-07 14:30

或

定时任务已启用
每日定时：08:00, 12:00, 18:00, 22:00
上次执行：10-07 12:00

未启用时:

定时任务未启用

2. 快速控制栏

当定时任务启用时，在面板顶部显示醒目的黄色控制栏：

设计特点

🎨 渐变黄色背景 - 从浅黄到橙色的渐变
⚡ 脉冲边框动画 - 2秒循环的呼吸效果，提醒用户关注
📝 清晰的状态文字 - "定时任务运行中 - 每 4 小时自动执行"
🎛️ 快捷操作按钮 - "配置" 和 "停用"

控制栏示例

┌──────────────────────────────────────────────────────────┐
│ ⏰ 定时任务运行中 - 每 4 小时自动执行    [配置] [停用]   │
└──────────────────────────────────────────────────────────┘

快捷按钮功能

按钮	功能	说明
配置	打开定时设置弹窗	修改定时策略、间隔时间等
停用	快速停用定时任务	带确认对话框，防止误操作

3. 首次启用确认对话框

当用户首次启用定时任务时，显示确认对话框：

对话框内容

⚠️ 首次启用定时任务

您正在启用定时任务功能：

每 4 小时自动执行一次

任务将在后台自动执行，请确认您已了解此功能。

提示：您可以随时在此页面停用定时任务。

[确认启用]  [取消]

触发条件

仅在从"未启用"切换到"启用"时触发
修改已启用的定时任务配置时不会触发
防止用户误操作导致后台自动执行

4. 页面加载时的通知提醒

当打开批量自动化页面，如果定时任务已启用，会显示5秒通知提醒：

⏰ 定时任务已自动启动（每 4 小时）

通知特点:

🕐 显示5秒后自动消失
❌ 可手动关闭
⚠️ 警告样式（黄色）
📍 右上角通知位置

🔧 技术实现

文件修改

文件: src/components/BatchTaskPanel.vue

新增 Computed 属性

// 定时任务状态文本
const schedulerStatusText = computed(() => {
  if (!batchStore.schedulerConfig.enabled) return '定时任务：未启用'
  
  if (batchStore.schedulerConfig.type === 'interval') {
    return `定时任务：每${batchStore.schedulerConfig.interval}小时`
  } else {
    return `定时任务：每日${batchStore.schedulerConfig.dailyTimes.length}次`
  }
})

// 定时任务状态标签类型
const schedulerStatusType = computed(() => {
  return batchStore.schedulerConfig.enabled ? 'warning' : 'default'
})

// 格式化最后执行时间
const formatLastExecutionTime = computed(() => {
  if (!batchStore.schedulerConfig.lastExecutionTime) return '从未执行'
  
  const date = new Date(batchStore.schedulerConfig.lastExecutionTime)
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
})

新增函数

快速切换调度器

const handleQuickToggleScheduler = (enabled) => {
  if (!enabled) {
    // 停用确认
    dialog.warning({
      title: '停用定时任务',
      content: '确定要停用定时任务吗？您可以随时重新启用。',
      positiveText: '确定停用',
      negativeText: '取消',
      onPositiveClick: () => {
        batchStore.saveSchedulerConfig({ enabled: false })
        stopScheduler()
        message.info('✅ 定时任务已停用')
      }
    })
  }
}

首次启用确认

const handleSaveScheduler = (config) => {
  // 如果是首次启用，显示确认对话框
  if (config.enabled && !batchStore.schedulerConfig.enabled) {
    const scheduleDesc = config.type === 'interval' 
      ? `每 ${config.interval} 小时自动执行一次`
      : `每天在 ${config.dailyTimes.join(', ')} 自动执行`
    
    dialog.warning({
      title: '⚠️ 首次启用定时任务',
      content: `您正在启用定时任务功能：\n\n${scheduleDesc}\n\n任务将在后台自动执行...`,
      positiveText: '确认启用',
      negativeText: '取消',
      onPositiveClick: () => {
        batchStore.saveSchedulerConfig(config)
        startScheduler()
        message.success('✅ 定时任务已启动')
        showScheduler.value = false
      }
    })
  }
}

页面加载提醒

onMounted(() => {
  if (batchStore.schedulerConfig.enabled) {
    const config = batchStore.schedulerConfig
    const scheduleDesc = config.type === 'interval' 
      ? `每 ${config.interval} 小时`
      : `每天 ${config.dailyTimes.join(', ')}`
    
    message.warning(
      `⏰ 定时任务已自动启动（${scheduleDesc}）`,
      { duration: 5000, closable: true }
    )
    
    startScheduler()
  }
})

CSS 样式

快速控制栏样式

.scheduler-quick-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 12px;
  animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
  0%, 100% {
    border-color: rgba(255, 193, 7, 0.3);
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
  50% {
    border-color: rgba(255, 193, 7, 0.6);
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.1);
  }
}

📊 用户体验提升

优化前

❌ 问题:

无法知道定时任务是否启用
不清楚定时任务的执行策略
任务自动执行时毫无感知
需要打开弹窗才能查看/修改配置

优化后

✅ 改进:

✨ 一眼就能看到定时任务状态（右上角橙色标签）
📋 清晰的状态栏显示执行策略
⚡ 脉冲动画持续提醒有定时任务运行
🔧 快捷操作按钮，无需打开弹窗即可停用
🛡️ 首次启用确认，防止误操作
📢 页面加载提醒，用户立即知晓

🎨 视觉设计

颜色方案

元素	浅色主题	深色主题
控制栏背景	黄-橙渐变（10%透明度）	黄-橙渐变（15%透明度）
控制栏边框	黄色（30%透明度）	黄色（40%透明度）
状态标签	橙色 (warning)	橙色 (warning)
脉冲边框	0-4px 黄色阴影	0-4px 黄色阴影

动画效果

脉冲边框: 2秒循环，模拟"呼吸"效果
悬停效果: 标签上移1px + 阴影
平滑过渡: 所有动画使用 ease-in-out

🔍 使用场景

场景1: 检查定时任务状态

操作: 打开批量自动化页面

结果:

如果已启用：右上角显示橙色标签 + 黄色控制栏 + 通知提醒
如果未启用：右上角显示灰色标签，无控制栏

场景2: 快速停用定时任务

操作: 点击快速控制栏的"停用"按钮

结果:

弹出确认对话框
确认后立即停用
控制栏消失
状态标签变为灰色
显示"定时任务已停用"提示

场景3: 首次启用定时任务

操作: 打开定时设置，启用定时任务并保存

结果:

弹出首次启用确认对话框
显示详细的执行策略
确认后启用
显示黄色控制栏
状态标签变为橙色

📱 响应式支持

✅ 桌面端：完整显示所有元素
✅ 平板：文字适当缩短，保持可读性
✅ 手机：控制栏堆叠显示，按钮缩小

🐛 已知限制

localStorage依赖: 清除浏览器数据会重置配置
单标签页: 多个标签页同时打开时，定时任务可能重复执行
浏览器关闭: 关闭浏览器后定时任务停止，重新打开时恢复

💡 最佳实践建议

对于普通用户

不需要定时任务时:
- 看到黄色控制栏，点击"停用"按钮即可
首次使用定时任务:
- 仔细阅读确认对话框
- 确保理解执行策略
- 建议先测试一次手动执行
检查定时任务状态:
- 打开页面即可看到右上角状态标签
- 黄色控制栏出现 = 正在运行

对于开发者

清除定时任务（控制台）:

localStorage.removeItem('schedulerConfig')
location.reload()

查看当前配置（控制台）:

console.log(JSON.parse(localStorage.getItem('schedulerConfig')))

手动停用（控制台）:

const config = JSON.parse(localStorage.getItem('schedulerConfig'))
config.enabled = false
localStorage.setItem('schedulerConfig', JSON.stringify(config))
location.reload()

📌 总结

本次更新通过 3个UI组件 + 3个交互流程 完美解决了定时任务"隐形运行"的问题：

核心价值

✅ 可见性: 状态一目了然
✅ 可控性: 快捷操作，无需深入设置
✅ 安全性: 首次确认，防止误操作
✅ 提醒性: 多处提示，用户不会遗忘

关键数据

📍 3个新增UI组件（状态标签、控制栏、确认对话框）
🎨 2套配色方案（浅色/深色主题）
⚡ 1个脉冲动画（2秒循环）
🔔 5秒页面加载通知时长

最后更新: 2025-10-07
版本: v3.5.0
向后兼容: ✅ 完全兼容旧配置

11 KiB Raw Permalink Blame History Unescape Escape