424 lines
11 KiB
Markdown
424 lines
11 KiB
Markdown
# 功能更新 - 定时任务状态提示 v3.5.0
|
||
|
||
**更新时间**: 2025-10-07
|
||
**版本**: v3.5.0
|
||
|
||
## 🎯 更新背景
|
||
|
||
用户反馈：发现没有设置定时任务，但批量自动化仍然会自动过一段时间执行任务。
|
||
|
||
**问题根源**:
|
||
- 定时任务配置保存在 `localStorage` 中
|
||
- 用户可能之前无意中启用了定时任务
|
||
- 页面刷新后定时任务会自动恢复运行
|
||
- **缺乏明显的状态提示**，用户不知道定时任务正在运行
|
||
|
||
---
|
||
|
||
## ✨ 新增功能
|
||
|
||
### 1. 定时任务状态指示器
|
||
|
||
在批量自动化面板的右上角添加了明显的状态标签：
|
||
|
||
#### 状态标签显示
|
||
|
||
| 状态 | 颜色 | 显示内容 | 示例 |
|
||
|-----|------|---------|------|
|
||
| 未启用 | 灰色 | `定时任务：未启用` | <gray>⏰ 定时任务：未启用</gray> |
|
||
| 间隔执行 | 橙色 | `定时任务：每X小时` | <orange>⏰ 定时任务：每4小时</orange> |
|
||
| 每日定时 | 橙色 | `定时任务：每日N次` | <orange>⏰ 定时任务：每日4次</orange> |
|
||
|
||
#### 悬停提示（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 属性
|
||
|
||
```javascript
|
||
// 定时任务状态文本
|
||
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'
|
||
})
|
||
})
|
||
```
|
||
|
||
### 新增函数
|
||
|
||
#### 快速切换调度器
|
||
|
||
```javascript
|
||
const handleQuickToggleScheduler = (enabled) => {
|
||
if (!enabled) {
|
||
// 停用确认
|
||
dialog.warning({
|
||
title: '停用定时任务',
|
||
content: '确定要停用定时任务吗？您可以随时重新启用。',
|
||
positiveText: '确定停用',
|
||
negativeText: '取消',
|
||
onPositiveClick: () => {
|
||
batchStore.saveSchedulerConfig({ enabled: false })
|
||
stopScheduler()
|
||
message.info('✅ 定时任务已停用')
|
||
}
|
||
})
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 首次启用确认
|
||
|
||
```javascript
|
||
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
|
||
}
|
||
})
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 页面加载提醒
|
||
|
||
```javascript
|
||
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 样式
|
||
|
||
#### 快速控制栏样式
|
||
|
||
```scss
|
||
.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: 快速停用定时任务
|
||
|
||
**操作**: 点击快速控制栏的"停用"按钮
|
||
|
||
**结果**:
|
||
1. 弹出确认对话框
|
||
2. 确认后立即停用
|
||
3. 控制栏消失
|
||
4. 状态标签变为灰色
|
||
5. 显示"定时任务已停用"提示
|
||
|
||
### 场景3: 首次启用定时任务
|
||
|
||
**操作**: 打开定时设置，启用定时任务并保存
|
||
|
||
**结果**:
|
||
1. 弹出首次启用确认对话框
|
||
2. 显示详细的执行策略
|
||
3. 确认后启用
|
||
4. 显示黄色控制栏
|
||
5. 状态标签变为橙色
|
||
|
||
---
|
||
|
||
## 📱 响应式支持
|
||
|
||
- ✅ 桌面端：完整显示所有元素
|
||
- ✅ 平板：文字适当缩短，保持可读性
|
||
- ✅ 手机：控制栏堆叠显示，按钮缩小
|
||
|
||
---
|
||
|
||
## 🐛 已知限制
|
||
|
||
1. **localStorage依赖**: 清除浏览器数据会重置配置
|
||
2. **单标签页**: 多个标签页同时打开时，定时任务可能重复执行
|
||
3. **浏览器关闭**: 关闭浏览器后定时任务停止，重新打开时恢复
|
||
|
||
---
|
||
|
||
## 💡 最佳实践建议
|
||
|
||
### 对于普通用户
|
||
|
||
1. **不需要定时任务时**:
|
||
- 看到黄色控制栏，点击"停用"按钮即可
|
||
|
||
2. **首次使用定时任务**:
|
||
- 仔细阅读确认对话框
|
||
- 确保理解执行策略
|
||
- 建议先测试一次手动执行
|
||
|
||
3. **检查定时任务状态**:
|
||
- 打开页面即可看到右上角状态标签
|
||
- 黄色控制栏出现 = 正在运行
|
||
|
||
### 对于开发者
|
||
|
||
1. **清除定时任务**（控制台）:
|
||
```javascript
|
||
localStorage.removeItem('schedulerConfig')
|
||
location.reload()
|
||
```
|
||
|
||
2. **查看当前配置**（控制台）:
|
||
```javascript
|
||
console.log(JSON.parse(localStorage.getItem('schedulerConfig')))
|
||
```
|
||
|
||
3. **手动停用**（控制台）:
|
||
```javascript
|
||
const config = JSON.parse(localStorage.getItem('schedulerConfig'))
|
||
config.enabled = false
|
||
localStorage.setItem('schedulerConfig', JSON.stringify(config))
|
||
location.reload()
|
||
```
|
||
|
||
---
|
||
|
||
## 📌 总结
|
||
|
||
本次更新通过 **3个UI组件** + **3个交互流程** 完美解决了定时任务"隐形运行"的问题：
|
||
|
||
### 核心价值
|
||
|
||
1. ✅ **可见性**: 状态一目了然
|
||
2. ✅ **可控性**: 快捷操作，无需深入设置
|
||
3. ✅ **安全性**: 首次确认，防止误操作
|
||
4. ✅ **提醒性**: 多处提示，用户不会遗忘
|
||
|
||
### 关键数据
|
||
|
||
- 📍 **3个**新增UI组件（状态标签、控制栏、确认对话框）
|
||
- 🎨 **2套**配色方案（浅色/深色主题）
|
||
- ⚡ **1个**脉冲动画（2秒循环）
|
||
- 🔔 **5秒**页面加载通知时长
|
||
|
||
---
|
||
|
||
**最后更新**: 2025-10-07
|
||
**版本**: v3.5.0
|
||
**向后兼容**: ✅ 完全兼容旧配置
|
||
|
||
|