8a12744/CheckInApp
0
0
Fork 0
mirror of https://github.com/Cccc-owo/CheckInApp.git synced 2026-06-17 14:06:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

frontend: use composables

Browse Source
This commit is contained in:
黄竣淘
2026-01-03 16:15:05 +08:00
parent c98aa73364
commit 59f111fedb
4 changed files with 149 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/DashboardView.vue
+33 -39
View File
@@ -175,12 +175,20 @@ import { useUserStore } from '@/stores/user'
import { useTaskStore } from '@/stores/task'
import { useCheckInStore } from '@/stores/checkIn'
import { formatDateTime } from '@/utils/helpers'
import { usePollStatus } from '@/composables/usePollStatus'
const authStore = useAuthStore()
const userStore = useUserStore()
const taskStore = useTaskStore()
const checkInStore = useCheckInStore()
// 使用轮询 composable
const { startPolling } = usePollStatus({
interval: 2000, // 每 2 秒轮询一次
maxRetries: 15, // 最多 15 次 (30 秒)
backoff: false // 不使用指数退避
})
const tokenStatusLoading = ref(false)
const checkInLoading = ref(false)
const selectedTaskId = ref(null)
@@ -260,48 +268,34 @@ const handleCheckIn = async () => {
// 显示提示消息
message.info('打卡任务已启动，正在后台处理...')
// 用于存储 interval ID，以便在超时时清理
let pollIntervalId = null
// 开始轮询检查打卡状态
pollIntervalId = setInterval(async () => {
try {
// 使用轮询 composable 检查打卡状态
startPolling(
async () => {
const status = await taskStore.getCheckInRecordStatus(recordId)
// 只要状态不是 pending，说明打卡请求已经处理完成
if (status.status !== 'pending') {
clearInterval(pollIntervalId)
checkInLoading.value = false
if (status.status === 'success') {
// 打卡成功
message.success('打卡成功！')
checkInStore.fetchMyRecords({ limit: 1 })
} else {
// 打卡失败或其他状态 (failure, out_of_time, unknown 等)
const errorMsg = status.error_message || status.response_text || '打卡失败'
message.error(errorMsg)
checkInStore.fetchMyRecords({ limit: 1 })
}
return {
completed: status.status !== 'pending',
success: status.status === 'success',
data: status
}
},
{
onSuccess: () => {
checkInLoading.value = false
message.success('打卡成功！')
checkInStore.fetchMyRecords({ limit: 1 })
},
onFailure: (statusData) => {
checkInLoading.value = false
const errorMsg = statusData.error_message || statusData.response_text || '打卡失败'
message.error(errorMsg)
checkInStore.fetchMyRecords({ limit: 1 })
},
onTimeout: () => {
checkInLoading.value = false
message.warning('打卡处理时间较长，请稍后查看打卡记录')
}
// status === 'pending' 时继续轮询
} catch (error) {
// 查询状态失败，停止轮询
console.error('轮询状态失败:', error)
clearInterval(pollIntervalId)
checkInLoading.value = false
message.error('查询打卡状态失败')
}
}, 2000) // 每 2 秒查询一次
// 设置超时保护（30 秒后停止轮询）
setTimeout(() => {
if (checkInLoading.value) {
clearInterval(pollIntervalId)
checkInLoading.value = false
message.warning('打卡处理时间较长，请稍后查看打卡记录')
}
}, 30000)
)
} catch (error) {
console.error('启动打卡失败:', error)
frontend/src/views/LoginView.vue
+1 -1
View File
@@ -216,7 +216,7 @@ const handleQRCodeLogin = async () => {
// 显示 QR 码弹窗
qrcodeVisible.value = true
} catch (error) {
console.error('表单验证失败:', error)
// 表单验证失败，不需要打印错误（由 Ant Design 自动显示错误提示）
}
}
frontend/src/views/TasksView.vue
+33 -39
View File
@@ -370,12 +370,20 @@ import { useBreakpoint } from '@/composables/useBreakpoint'
import { useTaskStore } from '@/stores/task'
import { useTemplateStore } from '@/stores/template'
import { copyToClipboard, formatDateTime } from '@/utils/helpers'
import { usePollStatus } from '@/composables/usePollStatus'
const router = useRouter()
const taskStore = useTaskStore()
const templateStore = useTemplateStore()
const { isMobile } = useBreakpoint()
// 使用轮询 composable
const { startPolling } = usePollStatus({
interval: 2000,
maxRetries: 15,
backoff: false
})
const loading = ref(false)
const showCreateDialog = ref(false)
const submitting = ref(false)
@@ -675,48 +683,34 @@ const handleCheckIn = async (taskId) => {
// 显示提示消息
message.info('打卡任务已启动，正在后台处理...')
// 用于存储 interval ID，以便在超时时清理
let pollIntervalId = null
// 开始轮询检查打卡状态
pollIntervalId = setInterval(async () => {
try {
// 使用轮询 composable 检查打卡状态
startPolling(
async () => {
const status = await taskStore.getCheckInRecordStatus(recordId)
// 只要状态不是 pending，说明打卡请求已经处理完成
if (status.status !== 'pending') {
clearInterval(pollIntervalId)
checkInLoading.value[taskId] = false
if (status.status === 'success') {
// 打卡成功
message.success('打卡成功！')
await fetchTasks()
} else {
// 打卡失败或其他状态 (failure, out_of_time, unknown 等)
const errorMsg = status.error_message || status.response_text || '打卡失败'
message.error(errorMsg)
await fetchTasks()
}
return {
completed: status.status !== 'pending',
success: status.status === 'success',
data: status
}
},
{
onSuccess: async () => {
checkInLoading.value[taskId] = false
message.success('打卡成功！')
await fetchTasks()
},
onFailure: async (statusData) => {
checkInLoading.value[taskId] = false
const errorMsg = statusData.error_message || statusData.response_text || '打卡失败'
message.error(errorMsg)
await fetchTasks()
},
onTimeout: () => {
checkInLoading.value[taskId] = false
message.warning('打卡处理时间较长，请稍后查看打卡记录')
}
// status === 'pending' 时继续轮询
} catch (error) {
// 查询状态失败，停止轮询
console.error('轮询状态失败:', error)
clearInterval(pollIntervalId)
checkInLoading.value[taskId] = false
message.error('查询打卡状态失败')
}
}, 2000) // 每 2 秒查询一次
// 设置超时保护（30 秒后停止轮询）
setTimeout(() => {
if (checkInLoading.value[taskId]) {
clearInterval(pollIntervalId)
checkInLoading.value[taskId] = false
message.warning('打卡处理时间较长，请稍后查看打卡记录')
}
}, 30000)
)
} catch (error) {
console.error('启动打卡失败:', error)