mirror of
https://github.com/Cccc-owo/CheckInApp.git
synced 2026-06-17 14:06:28 +00:00
feat: migrate from Element Plus to Ant Design Vue and update Vite configuration for better dependency management
- Updated Vite configuration to manually chunk Ant Design Vue for improved dependency management. - Added a comprehensive migration testing checklist for transitioning from Element Plus 2.13.0 to Ant Design Vue 4.x, covering various components and functionalities.
This commit is contained in:
@@ -1,67 +1,69 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="dashboard-container">
|
||||
<el-row :gutter="20">
|
||||
<a-row :gutter="[20, 20]">
|
||||
<!-- Token 状态卡片 -->
|
||||
<el-col :span="24">
|
||||
<el-card class="status-card">
|
||||
<template #header>
|
||||
<a-col :xs="24" :sm="24" :md="24">
|
||||
<a-card class="status-card">
|
||||
<template #title>
|
||||
<div class="card-header">
|
||||
<el-icon><Key /></el-icon>
|
||||
<KeyOutlined />
|
||||
<span>Token 状态</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="tokenStatusLoading" class="loading-container">
|
||||
<el-skeleton :rows="3" animated />
|
||||
<a-skeleton :active="true" :paragraph="{ rows: 3 }" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="tokenStatus" class="token-status">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="Token 状态">
|
||||
<el-tag :type="tokenStatus.is_valid ? 'success' : 'danger'">
|
||||
<a-descriptions :column="{ xs: 1, sm: 1, md: 2 }" bordered>
|
||||
<a-descriptions-item label="Token 状态">
|
||||
<a-tag :color="tokenStatus.is_valid ? 'success' : 'error'">
|
||||
{{ tokenStatus.is_valid ? '有效' : '无效' }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="过期时间">
|
||||
<a-descriptions-item label="过期时间">
|
||||
{{ formatExpireTime }}
|
||||
</el-descriptions-item>
|
||||
</a-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="剩余时间">
|
||||
<el-tag v-if="tokenStatus.is_valid" :type="tokenStatus.expiring_soon ? 'warning' : 'success'">
|
||||
<a-descriptions-item label="剩余时间">
|
||||
<a-tag v-if="tokenStatus.is_valid" :color="tokenStatus.expiring_soon ? 'warning' : 'success'">
|
||||
{{ formatRemainTime }}
|
||||
</el-tag>
|
||||
<el-tag v-else type="danger">已过期</el-tag>
|
||||
</el-descriptions-item>
|
||||
</a-tag>
|
||||
<a-tag v-else color="error">已过期</a-tag>
|
||||
</a-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="即将过期">
|
||||
<el-tag :type="tokenStatus.expiring_soon ? 'warning' : 'success'">
|
||||
<a-descriptions-item label="即将过期">
|
||||
<a-tag v-if="!tokenStatus.is_valid" color="error">
|
||||
已过期
|
||||
</a-tag>
|
||||
<a-tag v-else :color="tokenStatus.expiring_soon ? 'warning' : 'success'">
|
||||
{{ tokenStatus.expiring_soon ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<el-alert
|
||||
<a-alert
|
||||
v-if="tokenStatus.expiring_soon"
|
||||
title="Token 即将过期"
|
||||
message="Token 即将过期"
|
||||
description="您的 Token 将在 30 分钟内过期，请在过期后及时刷新 Token！"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
show-icon
|
||||
style="margin-top: 15px"
|
||||
>
|
||||
您的 Token 将在 30 分钟内过期，请及时重新登录！
|
||||
</el-alert>
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<!-- 手动打卡卡片 -->
|
||||
<el-col :span="24" style="margin-top: 20px">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<a-col :xs="24" :sm="24" :md="24">
|
||||
<a-card>
|
||||
<template #title>
|
||||
<div class="card-header">
|
||||
<el-icon><Calendar /></el-icon>
|
||||
<CalendarOutlined />
|
||||
<span>手动打卡</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -70,101 +72,103 @@
|
||||
<p class="hint">选择任务并点击下方按钮立即执行打卡操作</p>
|
||||
|
||||
<!-- 任务选择 -->
|
||||
<el-select
|
||||
v-model="selectedTaskId"
|
||||
<a-select
|
||||
v-model:value="selectedTaskId"
|
||||
placeholder="请选择要打卡的任务"
|
||||
:loading="taskStore.loading"
|
||||
style="width: 100%; max-width: 400px; margin-bottom: 20px"
|
||||
>
|
||||
<el-option
|
||||
v-for="task in taskStore.activeTasks"
|
||||
<a-select-option
|
||||
v-for="task in taskStore.tasks"
|
||||
:key="task.id"
|
||||
:label="task.name"
|
||||
:value="task.id"
|
||||
>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<span>{{ task.name }}</span>
|
||||
<el-tag size="small" type="success">启用</el-tag>
|
||||
<a-tag size="small" :color="task.is_active ? 'success' : 'default'">
|
||||
{{ task.is_active ? '启用' : '禁用' }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<el-button
|
||||
<a-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="checkInLoading"
|
||||
:disabled="!selectedTaskId"
|
||||
:icon="Calendar"
|
||||
@click="handleCheckIn"
|
||||
>
|
||||
<template #icon><CalendarOutlined /></template>
|
||||
{{ checkInLoading ? '打卡中...' : '立即打卡' }}
|
||||
</el-button>
|
||||
</a-button>
|
||||
|
||||
<div v-if="lastCheckIn" class="last-check-in">
|
||||
<el-divider />
|
||||
<a-divider />
|
||||
<p class="label">上次打卡</p>
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="时间">
|
||||
<a-descriptions :column="{ xs: 1, sm: 1, md: 2 }" bordered size="small">
|
||||
<a-descriptions-item label="时间">
|
||||
{{ formatDateTime(lastCheckIn.check_in_time) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag
|
||||
:type="lastCheckIn.status === 'success' ? 'success' :
|
||||
lastCheckIn.status === 'out_of_time' ? 'info' :
|
||||
lastCheckIn.status === 'unknown' ? 'warning' : 'danger'"
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="状态">
|
||||
<a-tag
|
||||
:color="lastCheckIn.status === 'success' ? 'success' :
|
||||
lastCheckIn.status === 'out_of_time' ? 'default' :
|
||||
lastCheckIn.status === 'unknown' ? 'warning' : 'error'"
|
||||
>
|
||||
{{
|
||||
lastCheckIn.status === 'success' ? '成功' :
|
||||
lastCheckIn.status === 'out_of_time' ? '时间范围外' :
|
||||
lastCheckIn.status === 'unknown' ? '异常' : '失败'
|
||||
}}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="打卡响应" :span="2">
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="打卡响应" :span="2">
|
||||
{{ lastCheckIn.response_text || lastCheckIn.error_message || '-' }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<!-- 用户信息卡片 -->
|
||||
<el-col :span="24" style="margin-top: 20px">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<a-col :xs="24" :sm="24" :md="24">
|
||||
<a-card>
|
||||
<template #title>
|
||||
<div class="card-header">
|
||||
<el-icon><User /></el-icon>
|
||||
<UserOutlined />
|
||||
<span>个人信息</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="用户名">
|
||||
<a-descriptions :column="{ xs: 1, sm: 1, md: 2 }" bordered>
|
||||
<a-descriptions-item label="用户名">
|
||||
{{ authStore.user?.alias }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="角色">
|
||||
<el-tag :type="authStore.isAdmin ? 'danger' : 'primary'">
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="角色">
|
||||
<a-tag :color="authStore.isAdmin ? 'error' : 'blue'">
|
||||
{{ authStore.isAdmin ? '管理员' : '普通用户' }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="邮箱" :span="2">
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="邮箱" :span="2">
|
||||
{{ authStore.user?.email || '未设置' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="注册时间" :span="2">
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="注册时间" :span="2">
|
||||
{{ formatDateTime(authStore.user?.created_at, false) }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Calendar, Key, User } from '@element-plus/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { CalendarOutlined, KeyOutlined, UserOutlined } from '@ant-design/icons-vue'
|
||||
import Layout from '@/components/Layout.vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
@@ -218,7 +222,7 @@ const fetchTokenStatus = async () => {
|
||||
try {
|
||||
await userStore.fetchTokenStatus()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '获取 Token 状态失败')
|
||||
message.error(error.message || '获取 Token 状态失败')
|
||||
} finally {
|
||||
tokenStatusLoading.value = false
|
||||
}
|
||||
@@ -227,7 +231,7 @@ const fetchTokenStatus = async () => {
|
||||
// 手动打卡
|
||||
const handleCheckIn = async () => {
|
||||
if (!selectedTaskId.value) {
|
||||
ElMessage.warning('请先选择要打卡的任务')
|
||||
message.warning('请先选择要打卡的任务')
|
||||
return
|
||||
}
|
||||
|
||||
@@ -240,21 +244,21 @@ const handleCheckIn = async () => {
|
||||
// 获取 record_id
|
||||
const recordId = result.record_id
|
||||
if (!recordId) {
|
||||
ElMessage.error('打卡请求失败：未获取到记录ID')
|
||||
message.error('打卡请求失败：未获取到记录ID')
|
||||
checkInLoading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
// 如果初始状态就是失败,显示错误并刷新记录
|
||||
if (result.status === 'failure') {
|
||||
ElMessage.error(result.message || '打卡失败')
|
||||
message.error(result.message || '打卡失败')
|
||||
checkInLoading.value = false
|
||||
checkInStore.fetchMyRecords({ limit: 1 })
|
||||
return
|
||||
}
|
||||
|
||||
// 显示提示消息
|
||||
ElMessage.info('打卡任务已启动，正在后台处理...')
|
||||
message.info('打卡任务已启动，正在后台处理...')
|
||||
|
||||
// 用于存储 interval ID，以便在超时时清理
|
||||
let pollIntervalId = null
|
||||
@@ -271,12 +275,12 @@ const handleCheckIn = async () => {
|
||||
|
||||
if (status.status === 'success') {
|
||||
// 打卡成功
|
||||
ElMessage.success('打卡成功！')
|
||||
message.success('打卡成功！')
|
||||
checkInStore.fetchMyRecords({ limit: 1 })
|
||||
} else {
|
||||
// 打卡失败或其他状态 (failure, out_of_time, unknown 等)
|
||||
const errorMsg = status.error_message || status.response_text || '打卡失败'
|
||||
ElMessage.error(errorMsg)
|
||||
message.error(errorMsg)
|
||||
checkInStore.fetchMyRecords({ limit: 1 })
|
||||
}
|
||||
}
|
||||
@@ -286,7 +290,7 @@ const handleCheckIn = async () => {
|
||||
console.error('轮询状态失败:', error)
|
||||
clearInterval(pollIntervalId)
|
||||
checkInLoading.value = false
|
||||
ElMessage.error('查询打卡状态失败')
|
||||
message.error('查询打卡状态失败')
|
||||
}
|
||||
}, 2000) // 每 2 秒查询一次
|
||||
|
||||
@@ -295,14 +299,14 @@ const handleCheckIn = async () => {
|
||||
if (checkInLoading.value) {
|
||||
clearInterval(pollIntervalId)
|
||||
checkInLoading.value = false
|
||||
ElMessage.warning('打卡处理时间较长，请稍后查看打卡记录')
|
||||
message.warning('打卡处理时间较长，请稍后查看打卡记录')
|
||||
}
|
||||
}, 30000)
|
||||
|
||||
} catch (error) {
|
||||
console.error('启动打卡失败:', error)
|
||||
checkInLoading.value = false
|
||||
ElMessage.error(error.message || '启动打卡任务失败')
|
||||
message.error(error.message || '启动打卡任务失败')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -313,12 +317,14 @@ onMounted(async () => {
|
||||
// 加载任务列表
|
||||
try {
|
||||
await taskStore.fetchMyTasks()
|
||||
// 如果只有一个启用的任务，自动选中
|
||||
// 如果只有一个任务，自动选中（优先选择启用的任务）
|
||||
if (taskStore.activeTasks.length === 1) {
|
||||
selectedTaskId.value = taskStore.activeTasks[0].id
|
||||
} else if (taskStore.tasks.length === 1) {
|
||||
selectedTaskId.value = taskStore.tasks[0].id
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('加载任务列表失败')
|
||||
message.error(error.message || '加载任务列表失败')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -371,4 +377,17 @@ onMounted(async () => {
|
||||
.status-card {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
}
|
||||
|
||||
/* 修复按钮图标对齐 */
|
||||
:deep(.ant-btn) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.ant-btn .anticon) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
+292
-161
@@ -1,132 +1,135 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<el-card class="login-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h2>接龙自动打卡系统</h2>
|
||||
<p class="subtitle">{{ loginMode === 'qrcode' ? 'QQ 扫码登录/注册' : '用户名密码登录' }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 登录模式切换 -->
|
||||
<div class="mode-switch">
|
||||
<el-segmented v-model="loginMode" :options="loginModeOptions" block />
|
||||
</div>
|
||||
|
||||
<!-- QR码登录表单 -->
|
||||
<el-form
|
||||
v-if="loginMode === 'qrcode'"
|
||||
:model="qrcodeForm"
|
||||
:rules="qrcodeRules"
|
||||
ref="qrcodeFormRef"
|
||||
label-width="0"
|
||||
@submit.prevent="handleQRCodeLogin"
|
||||
>
|
||||
<el-form-item prop="alias">
|
||||
<el-input
|
||||
v-model="qrcodeForm.alias"
|
||||
placeholder="请输入您的用户名"
|
||||
size="large"
|
||||
clearable
|
||||
@keyup.enter="handleQRCodeLogin"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><User /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
class="login-button"
|
||||
:loading="loading"
|
||||
@click="handleQRCodeLogin"
|
||||
>
|
||||
{{ loading ? '正在登录...' : '扫码登录/注册' }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 别名+密码登录表单 -->
|
||||
<el-form
|
||||
v-else
|
||||
:model="passwordForm"
|
||||
:rules="passwordRules"
|
||||
ref="passwordFormRef"
|
||||
label-width="0"
|
||||
>
|
||||
<el-form-item prop="alias">
|
||||
<el-input
|
||||
v-model="passwordForm.alias"
|
||||
placeholder="请输入您的用户名"
|
||||
size="large"
|
||||
clearable
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><User /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="passwordForm.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
show-password
|
||||
clearable
|
||||
@keyup.enter="handlePasswordLogin"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Key /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
class="login-button"
|
||||
:loading="loading"
|
||||
@click="handlePasswordLogin"
|
||||
>
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<div class="tips-link">
|
||||
<el-link type="info" @click="loginMode = 'qrcode'">
|
||||
没有密码？使用扫码登录
|
||||
</el-link>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<div class="tips">
|
||||
<el-alert
|
||||
:title="loginMode === 'qrcode' ? '扫码登录提示' : '密码登录提示'"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
>
|
||||
<template v-if="loginMode === 'qrcode'">
|
||||
<p>1. 输入您的用户名（用于标识身份）</p>
|
||||
<p>2. 点击"扫码登录/注册"按钮</p>
|
||||
<p>3. 使用手机 QQ 扫描弹出的二维码</p>
|
||||
<p>4. 扫码成功后即可登录系统</p>
|
||||
<p class="tip-note">💡 新用户首次扫码将自动注册账户</p>
|
||||
<a-row justify="center" align="middle" style="height: 100%">
|
||||
<a-col :xs="22" :sm="18" :md="12" :lg="10" :xl="8">
|
||||
<a-card class="login-card">
|
||||
<template #title>
|
||||
<div class="card-header">
|
||||
<h2>接龙自动打卡系统</h2>
|
||||
<p class="subtitle">{{ loginMode === 'qrcode' ? 'QQ 扫码登录/注册' : '用户名密码登录' }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p>1. 输入您的用户名和密码</p>
|
||||
<p>2. 点击"登录"按钮直接登录</p>
|
||||
<p>3. 首次使用请先扫码登录/注册，然后在设置中设置密码</p>
|
||||
</template>
|
||||
</el-alert>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 登录模式切换 -->
|
||||
<div class="mode-switch">
|
||||
<a-segmented v-model:value="loginMode" :options="loginModeOptions" block />
|
||||
</div>
|
||||
|
||||
<!-- QR码登录表单 -->
|
||||
<a-form
|
||||
v-if="loginMode === 'qrcode'"
|
||||
:model="qrcodeForm"
|
||||
:rules="qrcodeRules"
|
||||
ref="qrcodeFormRef"
|
||||
layout="vertical"
|
||||
@submit.prevent="handleQRCodeLogin"
|
||||
>
|
||||
<a-form-item name="alias">
|
||||
<a-input
|
||||
v-model:value="qrcodeForm.alias"
|
||||
placeholder="请输入您的用户名"
|
||||
size="large"
|
||||
allow-clear
|
||||
@keyup.enter="handleQRCodeLogin"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
:loading="loading"
|
||||
@click="handleQRCodeLogin"
|
||||
>
|
||||
{{ loading ? '正在登录...' : '扫码登录/注册' }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!-- 别名+密码登录表单 -->
|
||||
<a-form
|
||||
v-else
|
||||
:model="passwordForm"
|
||||
:rules="passwordRules"
|
||||
ref="passwordFormRef"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item name="alias">
|
||||
<a-input
|
||||
v-model:value="passwordForm.alias"
|
||||
placeholder="请输入您的用户名"
|
||||
size="large"
|
||||
allow-clear
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="password">
|
||||
<a-input-password
|
||||
v-model:value="passwordForm.password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
@keyup.enter="handlePasswordLogin"
|
||||
>
|
||||
<template #prefix>
|
||||
<KeyOutlined />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
:loading="loading"
|
||||
@click="handlePasswordLogin"
|
||||
>
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<div class="tips-link">
|
||||
<a @click="loginMode = 'qrcode'" class="link-text">
|
||||
没有密码？使用扫码登录
|
||||
</a>
|
||||
</div>
|
||||
</a-form>
|
||||
|
||||
<div class="tips">
|
||||
<a-alert
|
||||
:message="loginMode === 'qrcode' ? '扫码登录提示' : '密码登录提示'"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
>
|
||||
<template #description>
|
||||
<template v-if="loginMode === 'qrcode'">
|
||||
<p>1. 输入您的用户名(用于标识身份)</p>
|
||||
<p>2. 点击"扫码登录/注册"按钮</p>
|
||||
<p>3. 使用手机 QQ 扫描弹出的二维码</p>
|
||||
<p>4. 扫码成功后即可登录系统</p>
|
||||
<p class="tip-note">💡 新用户首次扫码将自动注册账户</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p>1. 输入您的用户名和密码</p>
|
||||
<p>2. 点击"登录"按钮直接登录</p>
|
||||
<p>3. 首次使用请先扫码登录/注册，然后在设置中设置密码</p>
|
||||
</template>
|
||||
</template>
|
||||
</a-alert>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- QR 码弹窗 -->
|
||||
<QRCodeModal
|
||||
@@ -141,8 +144,8 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { User, Key } from '@element-plus/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { UserOutlined, KeyOutlined } from '@ant-design/icons-vue'
|
||||
import { authAPI } from '@/api'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import QRCodeModal from '@/components/QRCodeModal.vue'
|
||||
@@ -209,9 +212,7 @@ const handleQRCodeLogin = async () => {
|
||||
if (!qrcodeFormRef.value) return
|
||||
|
||||
try {
|
||||
const valid = await qrcodeFormRef.value.validate()
|
||||
if (!valid) return
|
||||
|
||||
await qrcodeFormRef.value.validate()
|
||||
// 显示 QR 码弹窗
|
||||
qrcodeVisible.value = true
|
||||
} catch (error) {
|
||||
@@ -224,8 +225,7 @@ const handlePasswordLogin = async () => {
|
||||
if (!passwordFormRef.value) return
|
||||
|
||||
try {
|
||||
const valid = await passwordFormRef.value.validate()
|
||||
if (!valid) return
|
||||
await passwordFormRef.value.validate()
|
||||
|
||||
loading.value = true
|
||||
|
||||
@@ -242,18 +242,39 @@ const handlePasswordLogin = async () => {
|
||||
role: response.role || 'user',
|
||||
is_approved: response.is_approved !== false,
|
||||
}
|
||||
authStore.setAuth(response.authorization, user)
|
||||
|
||||
// 如果没有 authorization（测试账号），使用 user_id 作为认证凭据
|
||||
const authToken = response.authorization || `user_id:${response.user_id}`
|
||||
authStore.setAuth(authToken, user)
|
||||
|
||||
// 只有当有真实 authorization 时才获取完整用户信息
|
||||
if (response.authorization) {
|
||||
try {
|
||||
await authStore.fetchCurrentUser()
|
||||
} catch (err) {
|
||||
console.warn('获取完整用户信息失败，使用基本信息:', err)
|
||||
// 即使失败也继续登录流程
|
||||
}
|
||||
} else {
|
||||
// 没有 authorization 的测试账号，提示用户需要扫码绑定
|
||||
message.info({
|
||||
content: '您正在使用密码登录模式。如需使用打卡功能，请先扫码绑定 QQ。',
|
||||
duration: 5,
|
||||
})
|
||||
}
|
||||
|
||||
// 如果有 Token 警告，显示提示
|
||||
if (response.token_warning && response.warning_message) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
duration: 5000,
|
||||
showClose: true,
|
||||
message: response.warning_message,
|
||||
message.warning({
|
||||
content: response.warning_message,
|
||||
duration: 5,
|
||||
})
|
||||
} else if (response.authorization) {
|
||||
// 只有有 token 的用户才显示"欢迎回来"
|
||||
message.success(`欢迎回来，${response.alias}！`)
|
||||
} else {
|
||||
ElMessage.success(`欢迎回来，${response.alias}！`)
|
||||
// 测试账号登录成功提示
|
||||
message.success(`登录成功，${response.alias}！`)
|
||||
}
|
||||
|
||||
// 跳转到重定向页面或仪表盘
|
||||
@@ -273,36 +294,36 @@ const handlePasswordLogin = async () => {
|
||||
}
|
||||
|
||||
// 处理密码登录错误
|
||||
const handlePasswordLoginError = (message) => {
|
||||
if (!message) {
|
||||
ElMessage.error('登录失败，请稍后重试')
|
||||
const handlePasswordLoginError = (msg) => {
|
||||
if (!msg) {
|
||||
message.error('登录失败，请稍后重试')
|
||||
return
|
||||
}
|
||||
|
||||
// 用户不存在或密码错误
|
||||
if (message.includes('用户名或密码错误')) {
|
||||
ElMessage.error('用户名或密码错误')
|
||||
if (msg.includes('用户名或密码错误')) {
|
||||
message.error('用户名或密码错误')
|
||||
return
|
||||
}
|
||||
|
||||
// 未设置密码
|
||||
if (message.includes('未设置密码')) {
|
||||
ElMessage.warning('该账户未设置密码，请使用扫码登录')
|
||||
if (msg.includes('未设置密码')) {
|
||||
message.warning('该账户未设置密码，请使用扫码登录')
|
||||
return
|
||||
}
|
||||
|
||||
// 用户不存在
|
||||
if (message.includes('用户不存在')) {
|
||||
ElMessage.error('用户不存在，请检查用户名或使用扫码登录注册')
|
||||
if (msg.includes('用户不存在')) {
|
||||
message.error('用户不存在，请检查用户名或使用扫码登录注册')
|
||||
return
|
||||
}
|
||||
|
||||
// 其他错误
|
||||
ElMessage.error(message || '登录失败，请稍后重试')
|
||||
message.error(msg || '登录失败，请稍后重试')
|
||||
}
|
||||
|
||||
const handleLoginSuccess = (user) => {
|
||||
ElMessage.success(`欢迎回来，${user.alias}！`)
|
||||
message.success(`欢迎回来，${user.alias}！`)
|
||||
|
||||
// 跳转到重定向页面或仪表盘
|
||||
const redirect = route.query.redirect || '/dashboard'
|
||||
@@ -310,24 +331,33 @@ const handleLoginSuccess = (user) => {
|
||||
}
|
||||
|
||||
const handleLoginError = (error) => {
|
||||
ElMessage.error(error.message || '登录失败')
|
||||
message.error(error.message || '登录失败')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 450px;
|
||||
border-radius: 10px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -350,20 +380,26 @@ const handleLoginError = (error) => {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tips-link {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
color: #2196f3;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link-text:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.tips p {
|
||||
.tips :deep(p) {
|
||||
margin: 5px 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
@@ -376,4 +412,99 @@ const handleLoginError = (error) => {
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 确保 Ant Design Row 占满高度 */
|
||||
.login-container :deep(.ant-row) {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
/* 移动端优化 */
|
||||
@media (max-width: 768px) {
|
||||
.login-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tips :deep(p) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tips :deep(.ant-alert) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏手机优化 */
|
||||
@media (max-width: 576px) {
|
||||
.login-container {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
border-radius: 8px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mode-switch {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.tips :deep(p) {
|
||||
font-size: 12px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 横屏优化 */
|
||||
@media (max-height: 600px) and (orientation: landscape) {
|
||||
.login-container {
|
||||
padding: 8px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.tips :deep(p) {
|
||||
margin: 3px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mode-switch {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="not-found-container">
|
||||
<el-result icon="warning" title="404" sub-title="抱歉，您访问的页面不存在">
|
||||
<a-result status="404" title="404" sub-title="抱歉，您访问的页面不存在">
|
||||
<template #extra>
|
||||
<el-button type="primary" @click="goHome">返回首页</el-button>
|
||||
<a-button type="primary" @click="goHome">返回首页</a-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</a-result>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -16,55 +16,148 @@
|
||||
<p>您已成功注册，账户信息如下：</p>
|
||||
</div>
|
||||
|
||||
<div class="info-table">
|
||||
<div class="info-row">
|
||||
<div class="info-label">用户名</div>
|
||||
<div class="info-value">{{ user?.alias || '加载中...' }}</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-label">注册时间</div>
|
||||
<div class="info-value">{{ formatDate(user?.created_at) }}</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-label">审批状态</div>
|
||||
<div class="info-value">
|
||||
<span class="status-tag warning">待审批</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-descriptions :column="1" bordered class="mb-6">
|
||||
<a-descriptions-item label="用户名">
|
||||
{{ user?.alias || '加载中...' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="邮箱">
|
||||
<template v-if="user?.email">
|
||||
{{ user.email }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-tag color="warning">未设置</a-tag>
|
||||
</template>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="密码">
|
||||
<template v-if="user?.has_password">
|
||||
<a-tag color="success">已设置</a-tag>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-tag color="warning">未设置</a-tag>
|
||||
</template>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="注册时间">
|
||||
{{ formatDate(user?.created_at) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="审批状态">
|
||||
<a-tag color="warning">待审批</a-tag>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<div class="alert-box">
|
||||
<div class="alert-title">⚠️ 审批说明</div>
|
||||
<ul class="tips-list">
|
||||
<li>管理员将在 <strong>24 小时内</strong> 审核您的注册申请</li>
|
||||
<li>审核通过后，您将可以使用所有功能</li>
|
||||
<li>如超过 24 小时未审批，账户将被自动删除</li>
|
||||
<li>您可以随时刷新此页面查看最新状态</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a-alert
|
||||
message="⚠️ 审批说明"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="mb-6"
|
||||
>
|
||||
<template #description>
|
||||
<ul class="tips-list">
|
||||
<li>管理员将在 <strong>24 小时内</strong> 审核您的注册申请</li>
|
||||
<li>审核通过后，您将可以使用所有功能</li>
|
||||
<li>如超过 24 小时未审批，账户将被自动删除</li>
|
||||
<li><strong>建议：</strong>审批期间可以设置邮箱和密码，方便后续使用</li>
|
||||
<li>您可以随时刷新此页面查看最新状态</li>
|
||||
</ul>
|
||||
</template>
|
||||
</a-alert>
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn btn-primary" @click="checkStatus">
|
||||
<a-button type="primary" size="large" @click="checkStatus">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
刷新状态
|
||||
</button>
|
||||
<button class="btn btn-default" @click="logout">
|
||||
</a-button>
|
||||
<a-button size="large" @click="showProfileModal = true">
|
||||
<template #icon><SettingOutlined /></template>
|
||||
完善信息
|
||||
</a-button>
|
||||
<a-button size="large" @click="logout">
|
||||
<template #icon><LogoutOutlined /></template>
|
||||
退出登录
|
||||
</button>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 完善信息弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="showProfileModal"
|
||||
title="完善个人信息"
|
||||
:confirm-loading="profileLoading"
|
||||
@ok="handleUpdateProfile"
|
||||
@cancel="resetProfileForm"
|
||||
width="500px"
|
||||
>
|
||||
<a-form :model="profileForm" layout="vertical">
|
||||
<a-form-item label="邮箱地址（可选）" name="email">
|
||||
<a-input
|
||||
v-model:value="profileForm.email"
|
||||
placeholder="用于接收审批通知"
|
||||
type="email"
|
||||
/>
|
||||
<div class="form-hint">建议设置邮箱，方便接收审批结果通知</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="新密码（可选）"
|
||||
name="new_password"
|
||||
:help="user?.has_password ? '留空表示不修改密码' : '设置密码后可以使用密码登录'"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="profileForm.new_password"
|
||||
placeholder="至少6位字符"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-if="profileForm.new_password"
|
||||
label="确认密码"
|
||||
name="confirm_password"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="profileForm.confirm_password"
|
||||
placeholder="再次输入新密码"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-if="user?.has_password && profileForm.new_password"
|
||||
label="当前密码"
|
||||
name="current_password"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="profileForm.current_password"
|
||||
placeholder="修改密码时需要提供当前密码"
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { ReloadOutlined, LogoutOutlined, SettingOutlined } from '@ant-design/icons-vue'
|
||||
import { userAPI } from '@/api'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const user = ref(null)
|
||||
const showProfileModal = ref(false)
|
||||
const profileLoading = ref(false)
|
||||
|
||||
const profileForm = ref({
|
||||
email: '',
|
||||
new_password: '',
|
||||
confirm_password: '',
|
||||
current_password: '',
|
||||
})
|
||||
|
||||
const checkStatus = async () => {
|
||||
try {
|
||||
@@ -72,14 +165,99 @@ const checkStatus = async () => {
|
||||
user.value = response
|
||||
|
||||
if (response.is_approved) {
|
||||
alert('恭喜！您的账户已通过审批')
|
||||
message.success('恭喜！您的账户已通过审批')
|
||||
router.push('/dashboard')
|
||||
} else {
|
||||
alert('仍在等待审批中')
|
||||
message.info('仍在等待审批中')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取状态失败:', error)
|
||||
alert('获取状态失败：' + (error.message || '未知错误'))
|
||||
message.error('获取状态失败：' + (error.message || '未知错误'))
|
||||
}
|
||||
}
|
||||
|
||||
const loadUserInfo = async () => {
|
||||
try {
|
||||
const response = await userAPI.getCurrentUser()
|
||||
user.value = response
|
||||
// 初始化表单
|
||||
profileForm.value.email = response.email || ''
|
||||
} catch (error) {
|
||||
console.error('加载用户信息失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdateProfile = async () => {
|
||||
// 验证
|
||||
if (profileForm.value.new_password && profileForm.value.new_password.length < 6) {
|
||||
message.error('密码至少需要 6 位字符')
|
||||
return
|
||||
}
|
||||
|
||||
if (profileForm.value.new_password !== profileForm.value.confirm_password) {
|
||||
message.error('两次输入的密码不一致')
|
||||
return
|
||||
}
|
||||
|
||||
if (user.value?.has_password && profileForm.value.new_password && !profileForm.value.current_password) {
|
||||
message.error('修改密码时需要提供当前密码')
|
||||
return
|
||||
}
|
||||
|
||||
profileLoading.value = true
|
||||
|
||||
try {
|
||||
const updateData = {}
|
||||
|
||||
// 只提交有变化的字段
|
||||
if (profileForm.value.email !== (user.value?.email || '')) {
|
||||
updateData.email = profileForm.value.email || null
|
||||
}
|
||||
|
||||
if (profileForm.value.new_password) {
|
||||
updateData.new_password = profileForm.value.new_password
|
||||
if (user.value?.has_password) {
|
||||
updateData.current_password = profileForm.value.current_password
|
||||
}
|
||||
}
|
||||
|
||||
// 如果没有要更新的字段
|
||||
if (Object.keys(updateData).length === 0) {
|
||||
message.info('没有需要更新的信息')
|
||||
showProfileModal.value = false
|
||||
return
|
||||
}
|
||||
|
||||
await userAPI.updateProfile(updateData)
|
||||
message.success('个人信息更新成功')
|
||||
showProfileModal.value = false
|
||||
resetProfileForm()
|
||||
|
||||
// 重新加载用户信息
|
||||
await loadUserInfo()
|
||||
|
||||
// 如果设置了密码，更新本地存储的用户信息
|
||||
if (updateData.new_password) {
|
||||
const currentUser = authStore.user
|
||||
if (currentUser) {
|
||||
currentUser.has_password = true
|
||||
localStorage.setItem('user', JSON.stringify(currentUser))
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('更新个人信息失败:', error)
|
||||
message.error(error.message || '更新失败，请重试')
|
||||
} finally {
|
||||
profileLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const resetProfileForm = () => {
|
||||
profileForm.value = {
|
||||
email: user.value?.email || '',
|
||||
new_password: '',
|
||||
confirm_password: '',
|
||||
current_password: '',
|
||||
}
|
||||
}
|
||||
|
||||
@@ -95,6 +273,7 @@ const formatDate = (dateStr) => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadUserInfo()
|
||||
checkStatus()
|
||||
})
|
||||
</script>
|
||||
@@ -160,66 +339,10 @@ onMounted(() => {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.info-table {
|
||||
background: #f9f9f9;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
.mb-6 {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
flex: 0 0 120px;
|
||||
padding: 15px 20px;
|
||||
background: #f5f5f5;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
padding: 15px 20px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-tag.warning {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
border: 1px solid #ffc107;
|
||||
}
|
||||
|
||||
.alert-box {
|
||||
background: #e7f3ff;
|
||||
border-left: 4px solid #409eff;
|
||||
padding: 20px;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.tips-list {
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
@@ -236,34 +359,12 @@ onMounted(() => {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 30px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #409eff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #66b1ff;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background: #f5f5f5;
|
||||
color: #606266;
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.btn-default:hover {
|
||||
background: #e8e8e8;
|
||||
.form-hint {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,107 +1,138 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="records-container">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<a-card>
|
||||
<template #title>
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<el-icon><List /></el-icon>
|
||||
<UnorderedListOutlined />
|
||||
<span>我的打卡记录</span>
|
||||
</div>
|
||||
<el-button type="primary" :icon="Refresh" @click="handleRefresh">
|
||||
<a-button type="primary" @click="handleRefresh">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
刷新
|
||||
</el-button>
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="stats-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-statistic title="总打卡次数" :value="total" />
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-statistic
|
||||
<a-row :gutter="20">
|
||||
<a-col :xs="24" :sm="8" :md="8">
|
||||
<a-statistic title="总打卡次数" :value="total" />
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="8" :md="8">
|
||||
<a-statistic
|
||||
title="成功次数"
|
||||
:value="successCount"
|
||||
value-style="color: #67c23a"
|
||||
:value-style="{ color: '#67c23a' }"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-statistic
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="8" :md="8">
|
||||
<a-statistic
|
||||
title="成功率"
|
||||
:value="parseFloat(checkInStore.successRate)"
|
||||
suffix="%"
|
||||
:precision="2"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
<a-divider />
|
||||
|
||||
<!-- 记录表格 -->
|
||||
<el-table
|
||||
:data="checkInStore.myRecords"
|
||||
v-loading="checkInStore.loading"
|
||||
stripe
|
||||
border
|
||||
<!-- 桌面端表格 -->
|
||||
<a-table
|
||||
v-if="!isMobile"
|
||||
:dataSource="checkInStore.myRecords"
|
||||
:columns="columns"
|
||||
:loading="checkInStore.loading"
|
||||
:pagination="false"
|
||||
:row-key="record => record.id"
|
||||
:scroll="{ x: 'max-content' }"
|
||||
bordered
|
||||
>
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
|
||||
<el-table-column prop="check_in_time" label="打卡时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDateTime(row.check_in_time) }}
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'check_in_time'">
|
||||
{{ formatDateTime(record.check_in_time) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="status" label="状态" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.status === 'success'" type="success">✅ 打卡成功</el-tag>
|
||||
<el-tag v-else-if="row.status === 'out_of_time'" type="info">🕐 时间范围外</el-tag>
|
||||
<el-tag v-else-if="row.status === 'unknown'" type="warning">❗ 打卡异常</el-tag>
|
||||
<el-tag v-else type="danger">❌ 打卡失败</el-tag>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 'success'" color="success">✅ 打卡成功</a-tag>
|
||||
<a-tag v-else-if="record.status === 'out_of_time'" color="default">🕐 时间范围外</a-tag>
|
||||
<a-tag v-else-if="record.status === 'unknown'" color="warning">❗ 打卡异常</a-tag>
|
||||
<a-tag v-else color="error">❌ 打卡失败</a-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="trigger_type" label="触发方式" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.trigger_type === 'manual'" type="primary">手动</el-tag>
|
||||
<el-tag v-else-if="row.trigger_type === 'scheduled'" type="info">定时</el-tag>
|
||||
<el-tag v-else-if="row.trigger_type === 'admin'" type="warning">管理员</el-tag>
|
||||
<el-tag v-else>{{ row.trigger_type }}</el-tag>
|
||||
<template v-else-if="column.key === 'trigger_type'">
|
||||
<a-tag v-if="record.trigger_type === 'manual'" color="blue">手动</a-tag>
|
||||
<a-tag v-else-if="record.trigger_type === 'scheduled'" color="default">定时</a-tag>
|
||||
<a-tag v-else-if="record.trigger_type === 'admin'" color="orange">管理员</a-tag>
|
||||
<a-tag v-else>{{ record.trigger_type }}</a-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<el-table-column prop="response_text" label="消息" min-width="200" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<!-- 移动端卡片视图 -->
|
||||
<a-space v-else direction="vertical" :size="16" style="width: 100%">
|
||||
<a-card
|
||||
v-for="record in checkInStore.myRecords"
|
||||
:key="record.id"
|
||||
size="small"
|
||||
:loading="checkInStore.loading"
|
||||
>
|
||||
<a-descriptions :column="1" size="small" bordered>
|
||||
<a-descriptions-item label="ID">{{ record.id }}</a-descriptions-item>
|
||||
<a-descriptions-item label="打卡时间">
|
||||
{{ formatDateTime(record.check_in_time) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="状态">
|
||||
<a-tag v-if="record.status === 'success'" color="success">✅ 打卡成功</a-tag>
|
||||
<a-tag v-else-if="record.status === 'out_of_time'" color="default">🕐 时间范围外</a-tag>
|
||||
<a-tag v-else-if="record.status === 'unknown'" color="warning">❗ 打卡异常</a-tag>
|
||||
<a-tag v-else color="error">❌ 打卡失败</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="触发方式">
|
||||
<a-tag v-if="record.trigger_type === 'manual'" color="blue">手动</a-tag>
|
||||
<a-tag v-else-if="record.trigger_type === 'scheduled'" color="default">定时</a-tag>
|
||||
<a-tag v-else-if="record.trigger_type === 'admin'" color="orange">管理员</a-tag>
|
||||
<a-tag v-else>{{ record.trigger_type }}</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="消息">
|
||||
{{ record.response_text || '-' }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
</a-space>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
v-model:current-page="checkInStore.currentPage"
|
||||
v-model:page-size="checkInStore.pageSize"
|
||||
<a-pagination
|
||||
v-model:current="checkInStore.currentPage"
|
||||
v-model:pageSize="checkInStore.pageSize"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="handlePageChange"
|
||||
@size-change="handleSizeChange"
|
||||
:pageSizeOptions="['10', '20', '50', '100']"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:show-total="total => `共 ${total} 条记录`"
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</a-card>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { List, Refresh } from '@element-plus/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { UnorderedListOutlined, ReloadOutlined } from '@ant-design/icons-vue'
|
||||
import Layout from '@/components/Layout.vue'
|
||||
import { useBreakpoint } from '@/composables/useBreakpoint'
|
||||
import { useCheckInStore } from '@/stores/checkIn'
|
||||
import { formatDateTime } from '@/utils/helpers'
|
||||
|
||||
const checkInStore = useCheckInStore()
|
||||
const { isMobile } = useBreakpoint()
|
||||
|
||||
const total = computed(() => checkInStore.total)
|
||||
|
||||
@@ -109,13 +140,47 @@ const successCount = computed(() => {
|
||||
return checkInStore.myRecords.filter((r) => r.status === 'success').length
|
||||
})
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '打卡时间',
|
||||
dataIndex: 'check_in_time',
|
||||
key: 'check_in_time',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '触发方式',
|
||||
dataIndex: 'trigger_type',
|
||||
key: 'trigger_type',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '消息',
|
||||
dataIndex: 'response_text',
|
||||
key: 'response_text',
|
||||
ellipsis: true,
|
||||
},
|
||||
]
|
||||
|
||||
// 刷新数据
|
||||
const handleRefresh = async () => {
|
||||
try {
|
||||
await checkInStore.fetchMyRecords()
|
||||
ElMessage.success('刷新成功')
|
||||
message.success('刷新成功')
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '刷新失败')
|
||||
message.error(error.message || '刷新失败')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,144 +1,141 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 p-6">
|
||||
<div class="settings-view">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h1 class="text-3xl font-bold text-gray-800 mb-6">个人设置</h1>
|
||||
|
||||
<!-- 基本信息卡片 -->
|
||||
<div class="md3-card p-6 mb-6">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
|
||||
<el-icon class="mr-2"><User /></el-icon>
|
||||
<UserOutlined class="mr-2" />
|
||||
基本信息
|
||||
</h2>
|
||||
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="用户ID">{{ user?.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="当前别名">{{ user?.alias }}</el-descriptions-item>
|
||||
<el-descriptions-item label="角色">
|
||||
<el-tag :type="user?.role === 'admin' ? 'danger' : 'success'">
|
||||
<a-descriptions :column="1" bordered>
|
||||
<a-descriptions-item label="用户ID">{{ user?.id }}</a-descriptions-item>
|
||||
<a-descriptions-item label="当前用户名">{{ user?.alias }}</a-descriptions-item>
|
||||
<a-descriptions-item label="角色">
|
||||
<a-tag :color="user?.role === 'admin' ? 'error' : 'success'">
|
||||
{{ user?.role === 'admin' ? '管理员' : '普通用户' }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="密码状态">
|
||||
<el-tag :type="hasPassword ? 'success' : 'warning'">
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="密码状态">
|
||||
<a-tag :color="hasPassword ? 'success' : 'warning'">
|
||||
{{ hasPassword ? '已设置' : '未设置' }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">
|
||||
{{ formatDate(user?.created_at) }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 修改邮箱 -->
|
||||
<div class="md3-card p-6 mb-6">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
|
||||
<el-icon class="mr-2"><Edit /></el-icon>
|
||||
<EditOutlined class="mr-2" />
|
||||
修改个人信息
|
||||
</h2>
|
||||
|
||||
<el-form
|
||||
<a-form
|
||||
:model="profileForm"
|
||||
:rules="profileRules"
|
||||
ref="profileFormRef"
|
||||
label-width="100px"
|
||||
layout="vertical"
|
||||
>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input
|
||||
v-model="profileForm.email"
|
||||
<a-form-item label="邮箱" name="email">
|
||||
<a-input
|
||||
v-model:value="profileForm.email"
|
||||
placeholder="请输入邮箱地址（可选）"
|
||||
clearable
|
||||
allow-clear
|
||||
/>
|
||||
</el-form-item>
|
||||
</a-form-item>
|
||||
|
||||
<el-alert
|
||||
title="用户名无法修改"
|
||||
<a-alert
|
||||
message="用户名无法修改"
|
||||
description="用户名只能由管理员修改，如需修改请联系管理员"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
style="margin-bottom: 16px"
|
||||
>
|
||||
<p>用户名只能由管理员修改，如需修改请联系管理员</p>
|
||||
</el-alert>
|
||||
style="margin-bottom: 24px"
|
||||
/>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="profileLoading"
|
||||
@click="handleUpdateProfile"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
<el-button @click="resetProfileForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<a-form-item style="margin-top: 8px">
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="profileLoading"
|
||||
@click="handleUpdateProfile"
|
||||
>
|
||||
保存
|
||||
</a-button>
|
||||
<a-button @click="resetProfileForm">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 设置/修改密码 -->
|
||||
<div class="md3-card p-6">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
|
||||
<el-icon class="mr-2"><Key /></el-icon>
|
||||
<KeyOutlined class="mr-2" />
|
||||
{{ hasPassword ? '修改密码' : '设置密码' }}
|
||||
</h2>
|
||||
|
||||
<el-alert
|
||||
<a-alert
|
||||
v-if="!hasPassword"
|
||||
title="您还未设置密码"
|
||||
message="您还未设置密码"
|
||||
description="设置密码后，您可以使用用户名+密码的方式快速登录"
|
||||
type="warning"
|
||||
description="设置密码后，您可以使用别名+密码的方式快速登录"
|
||||
class="mb-4"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
|
||||
<el-form
|
||||
<a-form
|
||||
:model="passwordForm"
|
||||
label-width="120px"
|
||||
layout="vertical"
|
||||
>
|
||||
<el-form-item
|
||||
<a-form-item
|
||||
v-if="hasPassword"
|
||||
label="当前密码"
|
||||
>
|
||||
<el-input
|
||||
v-model="passwordForm.currentPassword"
|
||||
type="password"
|
||||
<a-input-password
|
||||
v-model:value="passwordForm.currentPassword"
|
||||
placeholder="请输入当前密码"
|
||||
show-password
|
||||
clearable
|
||||
allow-clear
|
||||
/>
|
||||
</el-form-item>
|
||||
</a-form-item>
|
||||
|
||||
<el-form-item label="新密码">
|
||||
<el-input
|
||||
v-model="passwordForm.newPassword"
|
||||
type="password"
|
||||
<a-form-item label="新密码">
|
||||
<a-input-password
|
||||
v-model:value="passwordForm.newPassword"
|
||||
placeholder="请输入新密码（至少6个字符）"
|
||||
show-password
|
||||
clearable
|
||||
allow-clear
|
||||
/>
|
||||
</el-form-item>
|
||||
</a-form-item>
|
||||
|
||||
<el-form-item label="确认新密码">
|
||||
<el-input
|
||||
v-model="passwordForm.confirmPassword"
|
||||
type="password"
|
||||
<a-form-item label="确认新密码">
|
||||
<a-input-password
|
||||
v-model:value="passwordForm.confirmPassword"
|
||||
placeholder="请再次输入新密码"
|
||||
show-password
|
||||
clearable
|
||||
allow-clear
|
||||
/>
|
||||
</el-form-item>
|
||||
</a-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="passwordLoading"
|
||||
@click="handleUpdatePassword"
|
||||
>
|
||||
{{ hasPassword ? '修改密码' : '设置密码' }}
|
||||
</el-button>
|
||||
<el-button @click="resetPasswordForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<a-form-item style="margin-top: 8px">
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="passwordLoading"
|
||||
@click="handleUpdatePassword"
|
||||
>
|
||||
{{ hasPassword ? '修改密码' : '设置密码' }}
|
||||
</a-button>
|
||||
<a-button @click="resetPasswordForm">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -147,8 +144,8 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { User, Edit, Key } from '@element-plus/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { UserOutlined, EditOutlined, KeyOutlined } from '@ant-design/icons-vue'
|
||||
import { userAPI } from '@/api'
|
||||
import Layout from '@/components/Layout.vue'
|
||||
|
||||
@@ -186,7 +183,7 @@ const loadUserInfo = async () => {
|
||||
// 从后端返回的数据中获取密码状态
|
||||
hasPassword.value = user.value.has_password || false
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '加载用户信息失败')
|
||||
message.error(error.message || '加载用户信息失败')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -202,12 +199,12 @@ const handleUpdateProfile = async () => {
|
||||
email: profileForm.value.email || null,
|
||||
})
|
||||
|
||||
ElMessage.success('个人信息修改成功')
|
||||
message.success('个人信息修改成功')
|
||||
await loadUserInfo()
|
||||
} catch (error) {
|
||||
if (error.errors) return // 验证错误
|
||||
if (error.errorFields) return // 验证错误
|
||||
const errorMsg = error.response?.data?.detail || error.message || '修改失败'
|
||||
ElMessage.error(errorMsg)
|
||||
message.error(errorMsg)
|
||||
} finally {
|
||||
profileLoading.value = false
|
||||
}
|
||||
@@ -224,27 +221,27 @@ const handleUpdatePassword = async () => {
|
||||
try {
|
||||
// 手动验证
|
||||
if (hasPassword.value && !passwordForm.value.currentPassword) {
|
||||
ElMessage.error('请输入当前密码')
|
||||
message.error('请输入当前密码')
|
||||
return
|
||||
}
|
||||
|
||||
if (!passwordForm.value.newPassword) {
|
||||
ElMessage.error('请输入新密码')
|
||||
message.error('请输入新密码')
|
||||
return
|
||||
}
|
||||
|
||||
if (passwordForm.value.newPassword.length < 6) {
|
||||
ElMessage.error('密码至少需要6个字符')
|
||||
message.error('密码至少需要6个字符')
|
||||
return
|
||||
}
|
||||
|
||||
if (!passwordForm.value.confirmPassword) {
|
||||
ElMessage.error('请再次输入新密码')
|
||||
message.error('请再次输入新密码')
|
||||
return
|
||||
}
|
||||
|
||||
if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
|
||||
ElMessage.error('两次输入的密码不一致')
|
||||
message.error('两次输入的密码不一致')
|
||||
return
|
||||
}
|
||||
|
||||
@@ -260,12 +257,12 @@ const handleUpdatePassword = async () => {
|
||||
|
||||
await userAPI.updateProfile(updateData)
|
||||
|
||||
ElMessage.success(hasPassword.value ? '密码修改成功' : '密码设置成功')
|
||||
message.success(hasPassword.value ? '密码修改成功' : '密码设置成功')
|
||||
hasPassword.value = true
|
||||
resetPasswordForm()
|
||||
} catch (error) {
|
||||
const errorMsg = error.response?.data?.detail || error.message || '操作失败'
|
||||
ElMessage.error(errorMsg)
|
||||
message.error(errorMsg)
|
||||
} finally {
|
||||
passwordLoading.value = false
|
||||
}
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="min-h-screen bg-gradient-to-br from-purple-50 via-white to-blue-50 p-6">
|
||||
<div class="task-records-view">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="mb-8 animate-fade-in">
|
||||
<button
|
||||
<div class="mb-8">
|
||||
<a-button
|
||||
@click="router.back()"
|
||||
class="mb-4 flex items-center text-gray-600 hover:text-gray-900 transition-colors"
|
||||
type="link"
|
||||
class="mb-4 flex items-center"
|
||||
>
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
<template #icon><LeftOutlined /></template>
|
||||
返回任务列表
|
||||
</button>
|
||||
</a-button>
|
||||
|
||||
<div v-if="currentTask" class="fluent-card p-6">
|
||||
<div class="flex items-start justify-between">
|
||||
@@ -20,102 +19,104 @@
|
||||
<h1 class="text-3xl font-bold text-gradient mb-2">{{ currentTask.name || '未命名任务' }}</h1>
|
||||
<div class="flex items-center gap-4 text-sm text-gray-600">
|
||||
<span class="flex items-center">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" />
|
||||
</svg>
|
||||
<NumberOutlined class="mr-1" />
|
||||
接龙 ID: {{ getThreadId(currentTask) }}
|
||||
</span>
|
||||
<span :class="currentTask.is_active ? 'status-success' : 'status-info'">
|
||||
<a-tag :color="currentTask.is_active ? 'success' : 'default'">
|
||||
{{ currentTask.is_active ? '启用中' : '已禁用' }}
|
||||
</span>
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="checkInLoading"
|
||||
@click="handleManualCheckIn"
|
||||
:disabled="checkInLoading"
|
||||
class="md3-button-filled"
|
||||
>
|
||||
{{ checkInLoading ? '打卡中...' : '立即打卡' }}
|
||||
</button>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Summary -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-6 gap-4 mb-6">
|
||||
<div class="fluent-card p-5 animate-slide-up">
|
||||
<p class="text-sm text-gray-600 mb-1">总打卡次数</p>
|
||||
<p class="text-2xl font-bold text-gray-800">{{ recordStats.total }}</p>
|
||||
</div>
|
||||
<div class="fluent-card p-5 animate-slide-up" style="animation-delay: 0.05s">
|
||||
<p class="text-sm text-gray-600 mb-1">成功次数</p>
|
||||
<p class="text-2xl font-bold text-green-600">{{ recordStats.success }}</p>
|
||||
</div>
|
||||
<div class="fluent-card p-5 animate-slide-up" style="animation-delay: 0.1s">
|
||||
<p class="text-sm text-gray-600 mb-1">时间范围外</p>
|
||||
<p class="text-2xl font-bold text-blue-600">{{ recordStats.outOfTime }}</p>
|
||||
</div>
|
||||
<div class="fluent-card p-5 animate-slide-up" style="animation-delay: 0.15s">
|
||||
<p class="text-sm text-gray-600 mb-1">失败次数</p>
|
||||
<p class="text-2xl font-bold text-red-600">{{ recordStats.failure }}</p>
|
||||
</div>
|
||||
<div class="fluent-card p-5 animate-slide-up" style="animation-delay: 0.2s">
|
||||
<p class="text-sm text-gray-600 mb-1">异常次数</p>
|
||||
<p class="text-2xl font-bold text-orange-600">{{ recordStats.unknown }}</p>
|
||||
</div>
|
||||
<div class="fluent-card p-5 animate-slide-up" style="animation-delay: 0.25s">
|
||||
<p class="text-sm text-gray-600 mb-1">成功率</p>
|
||||
<p class="text-2xl font-bold text-purple-600">{{ recordStats.successRate }}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<a-row :gutter="[16, 16]" class="mb-6">
|
||||
<a-col :xs="12" :sm="8" :md="4">
|
||||
<div class="fluent-card p-5 animate-slide-up">
|
||||
<p class="text-sm text-gray-600 mb-1">总打卡次数</p>
|
||||
<p class="text-2xl font-bold text-gray-800">{{ recordStats.total }}</p>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="8" :md="4">
|
||||
<div class="fluent-card p-5 animate-slide-up" style="animation-delay: 0.05s">
|
||||
<p class="text-sm text-gray-600 mb-1">成功次数</p>
|
||||
<p class="text-2xl font-bold text-green-600">{{ recordStats.success }}</p>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="8" :md="4">
|
||||
<div class="fluent-card p-5 animate-slide-up" style="animation-delay: 0.1s">
|
||||
<p class="text-sm text-gray-600 mb-1">时间范围外</p>
|
||||
<p class="text-2xl font-bold text-blue-600">{{ recordStats.outOfTime }}</p>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="8" :md="4">
|
||||
<div class="fluent-card p-5 animate-slide-up" style="animation-delay: 0.15s">
|
||||
<p class="text-sm text-gray-600 mb-1">失败次数</p>
|
||||
<p class="text-2xl font-bold text-red-600">{{ recordStats.failure }}</p>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="8" :md="4">
|
||||
<div class="fluent-card p-5 animate-slide-up" style="animation-delay: 0.2s">
|
||||
<p class="text-sm text-gray-600 mb-1">异常次数</p>
|
||||
<p class="text-2xl font-bold text-orange-600">{{ recordStats.unknown }}</p>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="8" :md="4">
|
||||
<div class="fluent-card p-5 animate-slide-up" style="animation-delay: 0.25s">
|
||||
<p class="text-sm text-gray-600 mb-1">成功率</p>
|
||||
<p class="text-2xl font-bold text-purple-600">{{ recordStats.successRate }}%</p>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="fluent-card p-4 mb-6">
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<a-space wrap :size="[16, 16]">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-medium text-gray-700">状态筛选:</span>
|
||||
<el-radio-group v-model="filterStatus" size="small" @change="handleFilterChange">
|
||||
<el-radio-button label="">全部</el-radio-button>
|
||||
<el-radio-button label="success">成功</el-radio-button>
|
||||
<el-radio-button label="out_of_time">时间范围外</el-radio-button>
|
||||
<el-radio-button label="failure">失败</el-radio-button>
|
||||
<el-radio-button label="unknown">异常</el-radio-button>
|
||||
</el-radio-group>
|
||||
<a-radio-group v-model:value="filterStatus" button-style="solid" size="small" @change="handleFilterChange">
|
||||
<a-radio-button value="">全部</a-radio-button>
|
||||
<a-radio-button value="success">成功</a-radio-button>
|
||||
<a-radio-button value="out_of_time">时间范围外</a-radio-button>
|
||||
<a-radio-button value="failure">失败</a-radio-button>
|
||||
<a-radio-button value="unknown">异常</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-medium text-gray-700">触发方式:</span>
|
||||
<el-radio-group v-model="filterTrigger" size="small" @change="handleFilterChange">
|
||||
<el-radio-button label="">全部</el-radio-button>
|
||||
<el-radio-button label="scheduler">自动</el-radio-button>
|
||||
<el-radio-button label="manual">手动</el-radio-button>
|
||||
</el-radio-group>
|
||||
<a-radio-group v-model:value="filterTrigger" button-style="solid" size="small" @change="handleFilterChange">
|
||||
<a-radio-button value="">全部</a-radio-button>
|
||||
<a-radio-button value="scheduler">自动</a-radio-button>
|
||||
<a-radio-button value="manual">手动</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="flex-1"></div>
|
||||
|
||||
<el-button size="small" @click="fetchRecords">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
<a-button size="small" @click="fetchRecords">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
刷新
|
||||
</el-button>
|
||||
</div>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<!-- Records List -->
|
||||
<div v-if="loading" class="space-y-4">
|
||||
<div v-for="i in 5" :key="i" class="fluent-card p-6">
|
||||
<div class="skeleton h-6 w-1/4 mb-3"></div>
|
||||
<div class="skeleton h-4 w-full mb-2"></div>
|
||||
<div class="skeleton h-4 w-3/4"></div>
|
||||
</div>
|
||||
<a-card v-for="i in 5" :key="i">
|
||||
<a-skeleton :active="true" :paragraph="{ rows: 3 }" />
|
||||
</a-card>
|
||||
</div>
|
||||
|
||||
<div v-else-if="records.length === 0" class="fluent-card p-12 text-center">
|
||||
<svg class="w-20 h-20 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<FileTextOutlined class="text-8xl text-gray-300 mb-4" />
|
||||
<h3 class="text-xl font-semibold text-gray-700 mb-2">暂无打卡记录</h3>
|
||||
<p class="text-gray-500">当前筛选条件下没有找到任何打卡记录</p>
|
||||
</div>
|
||||
@@ -128,34 +129,32 @@
|
||||
>
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="flex items-center gap-3 mb-2 flex-wrap">
|
||||
<h3 class="text-lg font-semibold text-gray-800">
|
||||
打卡记录 #{{ record.id }}
|
||||
</h3>
|
||||
<span
|
||||
<a-tag
|
||||
v-if="record.status === 'success'"
|
||||
class="status-success"
|
||||
>✅ 打卡成功</span>
|
||||
<span
|
||||
color="success"
|
||||
>✅ 打卡成功</a-tag>
|
||||
<a-tag
|
||||
v-else-if="record.status === 'out_of_time'"
|
||||
class="status-info"
|
||||
>🕐 时间范围外</span>
|
||||
<span
|
||||
color="default"
|
||||
>🕐 时间范围外</a-tag>
|
||||
<a-tag
|
||||
v-else-if="record.status === 'unknown'"
|
||||
class="status-warning"
|
||||
>❗ 打卡异常</span>
|
||||
<span
|
||||
color="warning"
|
||||
>❗ 打卡异常</a-tag>
|
||||
<a-tag
|
||||
v-else
|
||||
class="status-error"
|
||||
>❌ 打卡失败</span>
|
||||
<span :class="record.trigger_type === 'scheduled' ? 'status-info' : 'status-warning'">
|
||||
color="error"
|
||||
>❌ 打卡失败</a-tag>
|
||||
<a-tag :color="record.trigger_type === 'scheduled' ? 'blue' : 'orange'">
|
||||
{{ record.trigger_type === 'scheduled' ? '自动触发' : '手动触发' }}
|
||||
</span>
|
||||
</a-tag>
|
||||
</div>
|
||||
<div class="flex items-center text-sm text-gray-600">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<ClockCircleOutlined class="mr-1" />
|
||||
{{ formatDateTime(record.check_in_time) }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -178,14 +177,16 @@
|
||||
|
||||
<!-- Pagination -->
|
||||
<div v-if="!loading && records.length > 0" class="mt-6 flex justify-center">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
<a-pagination
|
||||
v-model:current="currentPage"
|
||||
v-model:pageSize="pageSize"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
:pageSizeOptions="['10', '20', '50', '100']"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:show-total="total => `共 ${total} 条记录`"
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -196,7 +197,14 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
LeftOutlined,
|
||||
NumberOutlined,
|
||||
FileTextOutlined,
|
||||
ClockCircleOutlined,
|
||||
ReloadOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import Layout from '@/components/Layout.vue'
|
||||
import { useTaskStore } from '@/stores/task'
|
||||
import { formatDateTime } from '@/utils/helpers'
|
||||
@@ -257,7 +265,7 @@ const fetchTaskDetail = async () => {
|
||||
try {
|
||||
currentTask.value = await taskStore.fetchTask(taskId.value)
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '获取任务详情失败')
|
||||
message.error(error.message || '获取任务详情失败')
|
||||
router.push('/tasks')
|
||||
}
|
||||
}
|
||||
@@ -293,7 +301,7 @@ const fetchRecords = async () => {
|
||||
total.value = 0
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '获取打卡记录失败')
|
||||
message.error(error.message || '获取打卡记录失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@@ -304,27 +312,22 @@ const handleManualCheckIn = async () => {
|
||||
checkInLoading.value = true
|
||||
|
||||
// 显示持久化通知
|
||||
const loadingMessage = ElMessage({
|
||||
message: '正在打卡中，请稍候... 您可以继续浏览其他页面',
|
||||
type: 'info',
|
||||
duration: 0,
|
||||
showClose: false
|
||||
})
|
||||
const hide = message.loading('正在打卡中，请稍候... 您可以继续浏览其他页面', 0)
|
||||
|
||||
try {
|
||||
const result = await taskStore.checkInTask(taskId.value)
|
||||
loadingMessage.close()
|
||||
hide()
|
||||
|
||||
if (result.success) {
|
||||
ElMessage.success('打卡成功')
|
||||
message.success('打卡成功')
|
||||
// 刷新记录列表
|
||||
await fetchRecords()
|
||||
} else {
|
||||
ElMessage.warning(result.message || '打卡失败')
|
||||
message.warning(result.message || '打卡失败')
|
||||
}
|
||||
} catch (error) {
|
||||
loadingMessage.close()
|
||||
ElMessage.error(error.message || '打卡失败')
|
||||
hide()
|
||||
message.error(error.message || '打卡失败')
|
||||
} finally {
|
||||
checkInLoading.value = false
|
||||
}
|
||||
|
||||
+252
-234
@@ -1,192 +1,197 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 p-6">
|
||||
<div class="tasks-view">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<!-- Header Section -->
|
||||
<div class="mb-8 animate-fade-in">
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-gradient mb-2">任务管理</h1>
|
||||
<p class="text-gray-600">管理您的自动打卡任务</p>
|
||||
</div>
|
||||
<button
|
||||
<a-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="showCreateDialog = true"
|
||||
class="md3-button-filled shadow-md3-3 hover:scale-105 transform transition-all"
|
||||
class="shadow-md3-3"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
创建任务
|
||||
</button>
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<div class="fluent-card p-6 animate-slide-up">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 mb-1">总任务数</p>
|
||||
<p class="text-3xl font-bold text-primary-600">{{ taskStore.taskStats.total }}</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-primary-100 rounded-md3 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
<a-row :gutter="[16, 16]" class="mb-6">
|
||||
<a-col :xs="24" :sm="8" :md="8">
|
||||
<div class="fluent-card p-6 animate-slide-up">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 mb-1">总任务数</p>
|
||||
<p class="text-3xl font-bold text-primary-600">{{ taskStore.taskStats.total }}</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-primary-100 rounded-md3 flex items-center justify-center">
|
||||
<FileTextOutlined class="text-2xl text-primary-600" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<div class="fluent-card p-6 animate-slide-up" style="animation-delay: 0.1s">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 mb-1">启用中</p>
|
||||
<p class="text-3xl font-bold text-green-600">{{ taskStore.taskStats.active }}</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-green-100 rounded-md3 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<a-col :xs="24" :sm="8" :md="8">
|
||||
<div class="fluent-card p-6 animate-slide-up" style="animation-delay: 0.1s">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 mb-1">启用中</p>
|
||||
<p class="text-3xl font-bold text-green-600">{{ taskStore.taskStats.active }}</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-green-100 rounded-md3 flex items-center justify-center">
|
||||
<CheckCircleOutlined class="text-2xl text-green-600" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<div class="fluent-card p-6 animate-slide-up" style="animation-delay: 0.2s">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 mb-1">已禁用</p>
|
||||
<p class="text-3xl font-bold text-gray-600">{{ taskStore.taskStats.inactive }}</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-gray-100 rounded-md3 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
||||
</svg>
|
||||
<a-col :xs="24" :sm="8" :md="8">
|
||||
<div class="fluent-card p-6 animate-slide-up" style="animation-delay: 0.2s">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 mb-1">已禁用</p>
|
||||
<p class="text-3xl font-bold text-gray-600">{{ taskStore.taskStats.inactive }}</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-gray-100 rounded-md3 flex items-center justify-center">
|
||||
<StopOutlined class="text-2xl text-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<!-- Tasks List -->
|
||||
<div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div v-for="i in 6" :key="i" class="fluent-card p-6">
|
||||
<div class="skeleton h-6 w-3/4 mb-4"></div>
|
||||
<div class="skeleton h-4 w-full mb-2"></div>
|
||||
<div class="skeleton h-4 w-2/3"></div>
|
||||
</div>
|
||||
<div v-if="loading">
|
||||
<a-row :gutter="[16, 16]">
|
||||
<a-col :xs="24" :sm="12" :lg="8" v-for="i in 6" :key="i">
|
||||
<a-card>
|
||||
<a-skeleton :active="true" :paragraph="{ rows: 4 }" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<div v-else-if="taskStore.tasks.length === 0" class="fluent-card p-12 text-center">
|
||||
<svg class="w-20 h-20 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<FileTextOutlined class="text-8xl text-gray-300 mb-4" />
|
||||
<h3 class="text-xl font-semibold text-gray-700 mb-2">暂无任务</h3>
|
||||
<p class="text-gray-500 mb-6">点击右上角的"创建任务"按钮开始添加您的第一个打卡任务</p>
|
||||
<button @click="showCreateDialog = true" class="md3-button-outlined">
|
||||
<a-button type="primary" @click="showCreateDialog = true">
|
||||
创建第一个任务
|
||||
</button>
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div
|
||||
<a-row v-else :gutter="[16, 16]">
|
||||
<a-col
|
||||
:xs="24" :sm="12" :lg="8"
|
||||
v-for="task in taskStore.tasks"
|
||||
:key="task.id"
|
||||
class="fluent-card p-6 hover:scale-105 transform transition-all cursor-pointer animate-slide-up"
|
||||
@click="viewTask(task)"
|
||||
>
|
||||
<!-- Task Header -->
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-1">{{ task.name || '未命名任务' }}</h3>
|
||||
<p class="text-sm text-gray-500">任务 ID: {{ task.id }}</p>
|
||||
<div
|
||||
class="fluent-card p-6 hover:scale-105 transform transition-all cursor-pointer animate-slide-up"
|
||||
@click="viewTask(task)"
|
||||
>
|
||||
<!-- Task Header -->
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-1">{{ task.name || '未命名任务' }}</h3>
|
||||
<p class="text-sm text-gray-500">任务 ID: {{ task.id }}</p>
|
||||
</div>
|
||||
<a-tag :color="task.is_active ? 'success' : 'default'">
|
||||
{{ task.is_active ? '启用' : '禁用' }}
|
||||
</a-tag>
|
||||
</div>
|
||||
<span :class="task.is_active ? 'status-success' : 'status-info'">
|
||||
{{ task.is_active ? '启用' : '禁用' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Task Details -->
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex items-center text-sm text-gray-600">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
||||
</svg>
|
||||
接龙ID: {{ getThreadId(task) }}
|
||||
<!-- Task Details -->
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex items-center text-sm text-gray-600">
|
||||
<TagOutlined class="mr-2" />
|
||||
接龙ID: {{ getThreadId(task) }}
|
||||
</div>
|
||||
<div class="flex items-center text-sm text-gray-600">
|
||||
<ClockCircleOutlined class="mr-2" />
|
||||
最后打卡: {{ task.last_check_in_time ? formatDateTime(task.last_check_in_time) : '未打卡' }}
|
||||
</div>
|
||||
<div class="flex items-center text-sm">
|
||||
<CheckCircleOutlined class="mr-2 text-gray-600" />
|
||||
<span v-if="task.last_check_in_status" :class="{
|
||||
'text-green-600 font-medium': task.last_check_in_status === 'success',
|
||||
'text-blue-600 font-medium': task.last_check_in_status === 'out_of_time',
|
||||
'text-red-600 font-medium': task.last_check_in_status === 'failure',
|
||||
'text-yellow-600 font-medium': task.last_check_in_status === 'unknown'
|
||||
}">
|
||||
{{
|
||||
task.last_check_in_status === 'success' ? '✅ 打卡成功' :
|
||||
task.last_check_in_status === 'out_of_time' ? '🕐 时间范围外' :
|
||||
task.last_check_in_status === 'failure' ? '❌ 打卡失败' :
|
||||
'❗ 打卡异常'
|
||||
}}
|
||||
</span>
|
||||
<span v-else class="text-gray-500">暂无打卡记录</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center text-sm text-gray-600">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
最后打卡: {{ task.last_check_in_time ? formatDateTime(task.last_check_in_time) : '未打卡' }}
|
||||
</div>
|
||||
<div class="flex items-center text-sm">
|
||||
<svg class="w-4 h-4 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span v-if="task.last_check_in_status" :class="{
|
||||
'text-green-600 font-medium': task.last_check_in_status === 'success',
|
||||
'text-blue-600 font-medium': task.last_check_in_status === 'out_of_time',
|
||||
'text-red-600 font-medium': task.last_check_in_status === 'failure',
|
||||
'text-yellow-600 font-medium': task.last_check_in_status === 'unknown'
|
||||
}">
|
||||
{{
|
||||
task.last_check_in_status === 'success' ? '✅ 打卡成功' :
|
||||
task.last_check_in_status === 'out_of_time' ? '🕐 时间范围外' :
|
||||
task.last_check_in_status === 'failure' ? '❌ 打卡失败' :
|
||||
'❗ 打卡异常'
|
||||
}}
|
||||
</span>
|
||||
<span v-else class="text-gray-500">暂无打卡记录</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Task Actions -->
|
||||
<div class="flex gap-2 pt-4 border-t border-gray-100">
|
||||
<button
|
||||
@click.stop="handleCheckIn(task.id)"
|
||||
:disabled="checkInLoading[task.id]"
|
||||
class="flex-1 py-2 px-4 bg-primary-50 text-primary-600 rounded-lg hover:bg-primary-100 transition-colors text-sm font-medium disabled:opacity-50"
|
||||
>
|
||||
{{ checkInLoading[task.id] ? '打卡中...' : '立即打卡' }}
|
||||
</button>
|
||||
<button
|
||||
@click.stop="toggleTaskStatus(task)"
|
||||
class="flex-1 py-2 px-4 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium"
|
||||
>
|
||||
{{ task.is_active ? '禁用' : '启用' }}
|
||||
</button>
|
||||
<button
|
||||
@click.stop="editTask(task)"
|
||||
class="p-2 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition-colors"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
@click.stop="deleteTask(task)"
|
||||
class="p-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Task Actions -->
|
||||
<div class="flex gap-2 pt-4 border-t border-gray-100">
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="checkInLoading[task.id]"
|
||||
@click.stop="handleCheckIn(task.id)"
|
||||
class="flex-1"
|
||||
>
|
||||
{{ checkInLoading[task.id] ? '打卡中...' : '立即打卡' }}
|
||||
</a-button>
|
||||
<a-button
|
||||
size="small"
|
||||
@click.stop="toggleTaskStatus(task)"
|
||||
class="flex-1"
|
||||
>
|
||||
{{ task.is_active ? '禁用' : '启用' }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
ghost
|
||||
@click.stop="editTask(task)"
|
||||
class="icon-button"
|
||||
>
|
||||
<template #icon><EditOutlined /></template>
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
size="small"
|
||||
@click.stop="deleteTask(task)"
|
||||
class="icon-button"
|
||||
>
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create/Edit Task Dialog -->
|
||||
<el-dialog
|
||||
v-model="showCreateDialog"
|
||||
<a-modal
|
||||
v-model:open="showCreateDialog"
|
||||
:title="editingTask ? '编辑任务' : '从模板创建任务'"
|
||||
width="700px"
|
||||
:close-on-click-modal="false"
|
||||
:width="isMobile ? '100%' : 700"
|
||||
:style="isMobile ? { top: 0, maxWidth: '100vw' } : {}"
|
||||
:maskClosable="false"
|
||||
>
|
||||
<!-- 只显示从模板创建 -->
|
||||
<div v-if="!editingTask">
|
||||
<div v-if="loadingTemplates" class="text-center py-8">
|
||||
<el-icon class="is-loading" :size="32"><Loading /></el-icon>
|
||||
<a-spin size="large" />
|
||||
<p class="text-gray-500 mt-2">加载模板中...</p>
|
||||
</div>
|
||||
|
||||
@@ -197,7 +202,7 @@
|
||||
|
||||
<div v-else>
|
||||
<!-- Template Selection -->
|
||||
<el-form-item label="选择模板" label-width="100px" v-if="!selectedTemplate">
|
||||
<a-form-item label="选择模板" v-if="!selectedTemplate">
|
||||
<div class="grid grid-cols-1 gap-3">
|
||||
<div
|
||||
v-for="template in activeTemplates"
|
||||
@@ -209,121 +214,117 @@
|
||||
<p class="text-sm text-gray-600">{{ template.description || '无描述' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</a-form-item>
|
||||
|
||||
<!-- Template Form -->
|
||||
<el-form v-if="selectedTemplate" :model="templateTaskForm" ref="templateFormRef" label-width="120px">
|
||||
<a-form v-if="selectedTemplate" :model="templateTaskForm" ref="templateFormRef" layout="vertical">
|
||||
<div class="mb-4 p-3 bg-blue-50 rounded-lg flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-5 h-5 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<FileTextOutlined class="text-blue-600 mr-2" />
|
||||
<span class="text-sm font-medium text-blue-900">使用模板：{{ selectedTemplate.name }}</span>
|
||||
</div>
|
||||
<el-button size="small" text @click="selectedTemplate = null">更换模板</el-button>
|
||||
<a-button size="small" type="link" @click="selectedTemplate = null">更换模板</a-button>
|
||||
</div>
|
||||
|
||||
<el-form-item label="任务名称" prop="task_name">
|
||||
<el-input v-model="templateTaskForm.task_name" placeholder="可选，留空则自动生成" />
|
||||
</el-form-item>
|
||||
<a-form-item label="任务名称" name="task_name">
|
||||
<a-input v-model:value="templateTaskForm.task_name" placeholder="可选，留空则自动生成" />
|
||||
</a-form-item>
|
||||
|
||||
<el-form-item label="接龙 ID" prop="thread_id" required>
|
||||
<el-input v-model="templateTaskForm.thread_id" placeholder="请输入接龙项目 ID" />
|
||||
</el-form-item>
|
||||
<a-form-item label="接龙 ID" name="thread_id" required>
|
||||
<a-input v-model:value="templateTaskForm.thread_id" placeholder="请输入接龙项目 ID" />
|
||||
</a-form-item>
|
||||
|
||||
<el-divider content-position="left">填写字段信息</el-divider>
|
||||
<a-divider orientation="left">填写字段信息</a-divider>
|
||||
|
||||
<!-- Dynamic Fields -->
|
||||
<div v-for="(fieldConfig, key) in visibleFields" :key="key">
|
||||
<el-form-item
|
||||
<a-form-item
|
||||
:label="fieldConfig.display_name"
|
||||
:required="fieldConfig.required"
|
||||
>
|
||||
<!-- Text Input -->
|
||||
<el-input
|
||||
<a-input
|
||||
v-if="fieldConfig.field_type === 'text'"
|
||||
v-model="templateTaskForm.field_values[key]"
|
||||
v-model:value="templateTaskForm.field_values[key]"
|
||||
:placeholder="fieldConfig.placeholder || `请输入${fieldConfig.display_name}`"
|
||||
/>
|
||||
|
||||
<!-- Textarea -->
|
||||
<el-input
|
||||
<a-textarea
|
||||
v-else-if="fieldConfig.field_type === 'textarea'"
|
||||
v-model="templateTaskForm.field_values[key]"
|
||||
type="textarea"
|
||||
v-model:value="templateTaskForm.field_values[key]"
|
||||
:rows="3"
|
||||
:placeholder="fieldConfig.placeholder || `请输入${fieldConfig.display_name}`"
|
||||
/>
|
||||
|
||||
<!-- Number Input -->
|
||||
<el-input-number
|
||||
<a-input-number
|
||||
v-else-if="fieldConfig.field_type === 'number'"
|
||||
v-model="templateTaskForm.field_values[key]"
|
||||
v-model:value="templateTaskForm.field_values[key]"
|
||||
:placeholder="fieldConfig.placeholder || `请输入${fieldConfig.display_name}`"
|
||||
style="width: 100%"
|
||||
/>
|
||||
|
||||
<!-- Select -->
|
||||
<el-select
|
||||
<a-select
|
||||
v-else-if="fieldConfig.field_type === 'select'"
|
||||
v-model="templateTaskForm.field_values[key]"
|
||||
v-model:value="templateTaskForm.field_values[key]"
|
||||
:placeholder="fieldConfig.placeholder || `请选择${fieldConfig.display_name}`"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
<a-select-option
|
||||
v-for="option in fieldConfig.options"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
>
|
||||
{{ option.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<span v-if="fieldConfig.default_value" class="text-xs text-gray-500 mt-1">
|
||||
默认值: {{ fieldConfig.default_value }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Mode Form - 简化版，只显示任务名称和启用状态 -->
|
||||
<el-form v-if="editingTask" :model="taskForm" :rules="taskRules" ref="taskFormRef" label-width="100px">
|
||||
<el-form-item label="任务名称" prop="name">
|
||||
<el-input v-model="taskForm.name" placeholder="请输入任务名称（例如：公司打卡）" />
|
||||
</el-form-item>
|
||||
<a-form v-if="editingTask" :model="taskForm" :rules="taskRules" ref="taskFormRef" layout="vertical">
|
||||
<a-form-item label="任务名称" name="name">
|
||||
<a-input v-model:value="taskForm.name" placeholder="请输入任务名称（例如：公司打卡）" />
|
||||
</a-form-item>
|
||||
|
||||
<el-form-item label="启用状态">
|
||||
<el-switch v-model="taskForm.is_active" />
|
||||
<a-form-item label="启用状态">
|
||||
<a-switch v-model:checked="taskForm.is_active" />
|
||||
<span class="ml-2 text-sm text-gray-500">
|
||||
{{ taskForm.is_active ? '启用自动打卡' : '禁用自动打卡（仍可手动打卡）' }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 新增：Crontab 编辑器 -->
|
||||
<el-form-item label="打卡时间表">
|
||||
<a-form-item label="打卡时间表">
|
||||
<CrontabEditor v-model="taskForm.cron_expression" />
|
||||
</el-form-item>
|
||||
</a-form-item>
|
||||
|
||||
<el-divider content-position="left">任务 Payload 配置（只读）</el-divider>
|
||||
<a-divider orientation="left">任务 Payload 配置（只读）</a-divider>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-600">完整的打卡请求配置</span>
|
||||
<button
|
||||
<a-button
|
||||
size="small"
|
||||
type="primary"
|
||||
ghost
|
||||
@click="copyPayload"
|
||||
type="button"
|
||||
class="px-3 py-1 text-xs bg-blue-50 text-blue-600 rounded hover:bg-blue-100 transition-colors flex items-center gap-1"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<template #icon><CopyOutlined /></template>
|
||||
复制
|
||||
</button>
|
||||
</a-button>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="formattedPayload"
|
||||
type="textarea"
|
||||
<a-textarea
|
||||
v-model:value="formattedPayload"
|
||||
:rows="12"
|
||||
readonly
|
||||
class="font-mono text-xs"
|
||||
@@ -333,26 +334,38 @@
|
||||
💡 此配置由模板自动生成，如需修改请删除任务后从模板重新创建
|
||||
</p>
|
||||
</div>
|
||||
</el-form>
|
||||
</a-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex gap-3 justify-end">
|
||||
<button @click="showCreateDialog = false" class="md3-button-text">取消</button>
|
||||
<button @click="handleSubmit" :disabled="submitting" class="md3-button-filled">
|
||||
<a-button @click="showCreateDialog = false">取消</a-button>
|
||||
<a-button type="primary" :loading="submitting" @click="handleSubmit">
|
||||
{{ submitting ? '提交中...' : (editingTask ? '保存修改' : '创建任务') }}
|
||||
</button>
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</a-modal>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
PlusOutlined,
|
||||
FileTextOutlined,
|
||||
CheckCircleOutlined,
|
||||
StopOutlined,
|
||||
TagOutlined,
|
||||
ClockCircleOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
CopyOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import Layout from '@/components/Layout.vue'
|
||||
import CrontabEditor from '@/components/CrontabEditor.vue'
|
||||
import { useBreakpoint } from '@/composables/useBreakpoint'
|
||||
import { useTaskStore } from '@/stores/task'
|
||||
import { useTemplateStore } from '@/stores/template'
|
||||
import { copyToClipboard, formatDateTime } from '@/utils/helpers'
|
||||
@@ -360,6 +373,7 @@ import { copyToClipboard, formatDateTime } from '@/utils/helpers'
|
||||
const router = useRouter()
|
||||
const taskStore = useTaskStore()
|
||||
const templateStore = useTemplateStore()
|
||||
const { isMobile } = useBreakpoint()
|
||||
|
||||
const loading = ref(false)
|
||||
const showCreateDialog = ref(false)
|
||||
@@ -463,9 +477,9 @@ const formattedPayload = computed(() => {
|
||||
const copyPayload = async () => {
|
||||
const success = await copyToClipboard(formattedPayload.value)
|
||||
if (success) {
|
||||
ElMessage.success('Payload 已复制到剪贴板')
|
||||
message.success('Payload 已复制到剪贴板')
|
||||
} else {
|
||||
ElMessage.error('复制失败')
|
||||
message.error('复制失败')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -480,7 +494,7 @@ watch(selectedTemplate, async (newTemplate) => {
|
||||
try {
|
||||
templatePreview.value = await templateStore.previewTemplate(newTemplate.id)
|
||||
} catch (error) {
|
||||
ElMessage.error('获取模板配置失败')
|
||||
message.error('获取模板配置失败')
|
||||
templatePreview.value = null
|
||||
return
|
||||
}
|
||||
@@ -531,7 +545,7 @@ const loadTemplates = async () => {
|
||||
try {
|
||||
activeTemplates.value = await templateStore.fetchActiveTemplates()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '加载模板失败')
|
||||
message.error(error.message || '加载模板失败')
|
||||
} finally {
|
||||
loadingTemplates.value = false
|
||||
}
|
||||
@@ -569,7 +583,7 @@ const fetchTasks = async () => {
|
||||
try {
|
||||
await taskStore.fetchMyTasks()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '加载任务列表失败')
|
||||
message.error(error.message || '加载任务列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@@ -604,34 +618,32 @@ const editTask = (task) => {
|
||||
}
|
||||
|
||||
// 删除任务
|
||||
const deleteTask = async (task) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除任务"${task.name || '未命名任务'}"吗？此操作不可恢复。`,
|
||||
'删除确认',
|
||||
{
|
||||
confirmButtonText: '确定删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
const deleteTask = (task) => {
|
||||
Modal.confirm({
|
||||
title: '删除确认',
|
||||
content: `确定要删除任务"${task.name || task.id}"吗？此操作不可恢复。`,
|
||||
okText: '确定删除',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await taskStore.deleteTask(task.id)
|
||||
message.success('任务删除成功')
|
||||
await fetchTasks()
|
||||
} catch (error) {
|
||||
message.error(error.message || '删除任务失败')
|
||||
}
|
||||
)
|
||||
|
||||
await taskStore.deleteTask(task.id)
|
||||
ElMessage.success('任务删除成功')
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(error.message || '删除任务失败')
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 切换任务状态
|
||||
const toggleTaskStatus = async (task) => {
|
||||
try {
|
||||
await taskStore.toggleTask(task.id)
|
||||
ElMessage.success(task.is_active ? '任务已禁用' : '任务已启用')
|
||||
message.success(task.is_active ? '任务已禁用' : '任务已启用')
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '切换任务状态失败')
|
||||
message.error(error.message || '切换任务状态失败')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -646,21 +658,21 @@ const handleCheckIn = async (taskId) => {
|
||||
// 获取 record_id
|
||||
const recordId = result.record_id
|
||||
if (!recordId) {
|
||||
ElMessage.error('打卡请求失败:未获取到记录ID')
|
||||
message.error('打卡请求失败:未获取到记录ID')
|
||||
checkInLoading.value[taskId] = false
|
||||
return
|
||||
}
|
||||
|
||||
// 如果初始状态就是失败,显示错误并刷新任务列表
|
||||
if (result.status === 'failure') {
|
||||
ElMessage.error(result.message || '打卡失败')
|
||||
message.error(result.message || '打卡失败')
|
||||
checkInLoading.value[taskId] = false
|
||||
await fetchTasks()
|
||||
return
|
||||
}
|
||||
|
||||
// 显示提示消息
|
||||
ElMessage.info('打卡任务已启动，正在后台处理...')
|
||||
message.info('打卡任务已启动，正在后台处理...')
|
||||
|
||||
// 用于存储 interval ID，以便在超时时清理
|
||||
let pollIntervalId = null
|
||||
@@ -677,12 +689,12 @@ const handleCheckIn = async (taskId) => {
|
||||
|
||||
if (status.status === 'success') {
|
||||
// 打卡成功
|
||||
ElMessage.success('打卡成功！')
|
||||
message.success('打卡成功！')
|
||||
await fetchTasks()
|
||||
} else {
|
||||
// 打卡失败或其他状态 (failure, out_of_time, unknown 等)
|
||||
const errorMsg = status.error_message || status.response_text || '打卡失败'
|
||||
ElMessage.error(errorMsg)
|
||||
message.error(errorMsg)
|
||||
await fetchTasks()
|
||||
}
|
||||
}
|
||||
@@ -692,7 +704,7 @@ const handleCheckIn = async (taskId) => {
|
||||
console.error('轮询状态失败:', error)
|
||||
clearInterval(pollIntervalId)
|
||||
checkInLoading.value[taskId] = false
|
||||
ElMessage.error('查询打卡状态失败')
|
||||
message.error('查询打卡状态失败')
|
||||
}
|
||||
}, 2000) // 每 2 秒查询一次
|
||||
|
||||
@@ -701,14 +713,14 @@ const handleCheckIn = async (taskId) => {
|
||||
if (checkInLoading.value[taskId]) {
|
||||
clearInterval(pollIntervalId)
|
||||
checkInLoading.value[taskId] = false
|
||||
ElMessage.warning('打卡处理时间较长，请稍后查看打卡记录')
|
||||
message.warning('打卡处理时间较长，请稍后查看打卡记录')
|
||||
}
|
||||
}, 30000)
|
||||
|
||||
} catch (error) {
|
||||
console.error('启动打卡失败:', error)
|
||||
checkInLoading.value[taskId] = false
|
||||
ElMessage.error(error.message || '启动打卡任务失败')
|
||||
message.error(error.message || '启动打卡任务失败')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -723,17 +735,17 @@ const handleSubmit = async () => {
|
||||
await taskFormRef.value.validate()
|
||||
|
||||
await taskStore.updateTask(editingTask.value.id, taskForm)
|
||||
ElMessage.success('任务更新成功')
|
||||
message.success('任务更新成功')
|
||||
}
|
||||
// Create from template
|
||||
else if (createMode.value === 'template') {
|
||||
if (!selectedTemplate.value) {
|
||||
ElMessage.warning('请选择一个模板')
|
||||
message.warning('请选择一个模板')
|
||||
return
|
||||
}
|
||||
|
||||
if (!templateTaskForm.thread_id) {
|
||||
ElMessage.warning('请输入接龙 ID')
|
||||
message.warning('请输入接龙 ID')
|
||||
return
|
||||
}
|
||||
|
||||
@@ -744,7 +756,7 @@ const handleSubmit = async () => {
|
||||
templateTaskForm.task_name || null
|
||||
)
|
||||
|
||||
ElMessage.success('任务创建成功')
|
||||
message.success('任务创建成功')
|
||||
}
|
||||
// Create manually
|
||||
else {
|
||||
@@ -752,14 +764,14 @@ const handleSubmit = async () => {
|
||||
await taskFormRef.value.validate()
|
||||
|
||||
await taskStore.createTask(taskForm)
|
||||
ElMessage.success('任务创建成功')
|
||||
message.success('任务创建成功')
|
||||
}
|
||||
|
||||
showCreateDialog.value = false
|
||||
resetForm()
|
||||
await fetchTasks()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '操作失败')
|
||||
message.error(error.message || '操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
@@ -798,5 +810,11 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Additional component-specific styles if needed */
|
||||
.icon-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 32px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="admin-logs-container">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<a-card>
|
||||
<template #title>
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<el-icon><Document /></el-icon>
|
||||
<FileTextOutlined />
|
||||
<span>系统日志</span>
|
||||
</div>
|
||||
<el-button type="primary" :icon="Refresh" @click="handleRefresh">
|
||||
<a-button type="primary" @click="handleRefresh">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
刷新
|
||||
</el-button>
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-alert
|
||||
title="日志查看"
|
||||
<a-alert
|
||||
message="日志查看"
|
||||
description="显示最新的系统日志信息（默认显示最近 200 行）"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
<p>显示最新的系统日志信息（默认显示最近 200 行）</p>
|
||||
</el-alert>
|
||||
/>
|
||||
|
||||
<div v-if="adminStore.loading" class="loading-container">
|
||||
<el-skeleton :rows="10" animated />
|
||||
<a-skeleton :active="true" :paragraph="{ rows: 10 }" />
|
||||
</div>
|
||||
|
||||
<div v-else class="logs-content">
|
||||
<el-input
|
||||
v-model="logContent"
|
||||
type="textarea"
|
||||
<a-textarea
|
||||
v-model:value="logContent"
|
||||
:rows="25"
|
||||
readonly
|
||||
:readonly="true"
|
||||
placeholder="暂无日志内容"
|
||||
class="log-textarea"
|
||||
/>
|
||||
|
||||
<div class="log-info">
|
||||
@@ -42,15 +42,15 @@
|
||||
<span>最后更新: {{ lastUpdate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</a-card>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Document, Refresh } from '@element-plus/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { FileTextOutlined, ReloadOutlined } from '@ant-design/icons-vue'
|
||||
import Layout from '@/components/Layout.vue'
|
||||
import { useAdminStore } from '@/stores/admin'
|
||||
import { formatDateTime } from '@/utils/helpers'
|
||||
@@ -73,12 +73,12 @@ const handleRefresh = async () => {
|
||||
// 确保是字符串
|
||||
logContent.value = typeof data.logs === 'string' ? data.logs : String(data.logs)
|
||||
lastUpdate.value = formatDateTime(new Date())
|
||||
ElMessage.success('刷新成功')
|
||||
message.success('刷新成功')
|
||||
} else {
|
||||
logContent.value = '无日志内容'
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '刷新失败')
|
||||
message.error(error.message || '刷新失败')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,7 +103,6 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
@@ -122,7 +121,7 @@ onMounted(() => {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
:deep(.el-textarea__inner) {
|
||||
.log-textarea :deep(textarea) {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
|
||||
@@ -1,92 +1,130 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="admin-records-container">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<a-card>
|
||||
<template #title>
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<el-icon><List /></el-icon>
|
||||
<UnorderedListOutlined />
|
||||
<span>所有打卡记录</span>
|
||||
</div>
|
||||
<el-button type="primary" :icon="Refresh" @click="handleRefresh">
|
||||
<a-button type="primary" @click="handleRefresh">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
刷新
|
||||
</el-button>
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 记录表格 -->
|
||||
<el-table
|
||||
:data="checkInStore.allRecords"
|
||||
v-loading="checkInStore.loading"
|
||||
stripe
|
||||
border
|
||||
<!-- Desktop table -->
|
||||
<a-table
|
||||
v-if="!isMobile"
|
||||
:dataSource="checkInStore.allRecords"
|
||||
:columns="columns"
|
||||
:loading="checkInStore.loading"
|
||||
:pagination="false"
|
||||
:row-key="record => record.id"
|
||||
:scroll="{ x: 'max-content' }"
|
||||
bordered
|
||||
>
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="user_id" label="用户ID" width="100" />
|
||||
<el-table-column prop="user_email" label="用户邮箱" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="task_name" label="任务名称" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="thread_id" label="接龙ID" width="150" show-overflow-tooltip />
|
||||
|
||||
<el-table-column prop="check_in_time" label="打卡时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDateTime(row.check_in_time) }}
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'check_in_time'">
|
||||
{{ formatDateTime(record.check_in_time) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="status" label="状态" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.status === 'success'" type="success">✅ 打卡成功</el-tag>
|
||||
<el-tag v-else-if="row.status === 'out_of_time'" type="info">🕐 时间范围外</el-tag>
|
||||
<el-tag v-else-if="row.status === 'unknown'" type="warning">❗ 打卡异常</el-tag>
|
||||
<el-tag v-else type="danger">❌ 打卡失败</el-tag>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 'success'" color="success">✅ 打卡成功</a-tag>
|
||||
<a-tag v-else-if="record.status === 'out_of_time'" color="default">🕐 时间范围外</a-tag>
|
||||
<a-tag v-else-if="record.status === 'unknown'" color="warning">❗ 打卡异常</a-tag>
|
||||
<a-tag v-else color="error">❌ 打卡失败</a-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="trigger_type" label="触发方式" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.trigger_type === 'manual'" type="primary">手动</el-tag>
|
||||
<el-tag v-else-if="row.trigger_type === 'scheduled'" type="info">定时</el-tag>
|
||||
<el-tag v-else-if="row.trigger_type === 'admin'" type="warning">管理员</el-tag>
|
||||
<el-tag v-else>{{ row.trigger_type }}</el-tag>
|
||||
<template v-else-if="column.key === 'trigger_type'">
|
||||
<a-tag v-if="record.trigger_type === 'manual'" color="blue">手动</a-tag>
|
||||
<a-tag v-else-if="record.trigger_type === 'scheduled'" color="cyan">定时</a-tag>
|
||||
<a-tag v-else-if="record.trigger_type === 'admin'" color="orange">管理员</a-tag>
|
||||
<a-tag v-else>{{ record.trigger_type }}</a-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<el-table-column prop="response_text" label="消息" min-width="200" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<!-- Mobile card view -->
|
||||
<a-space v-else direction="vertical" :size="16" style="width: 100%">
|
||||
<a-card v-for="record in checkInStore.allRecords" :key="record.id" size="small" :loading="checkInStore.loading">
|
||||
<a-descriptions :column="1" size="small" bordered>
|
||||
<a-descriptions-item label="ID">{{ record.id }}</a-descriptions-item>
|
||||
<a-descriptions-item label="用户ID">{{ record.user_id }}</a-descriptions-item>
|
||||
<a-descriptions-item label="用户邮箱">{{ record.user_email || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="任务名称">{{ record.task_name || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="接龙ID">{{ record.thread_id || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="打卡时间">{{ formatDateTime(record.check_in_time) }}</a-descriptions-item>
|
||||
<a-descriptions-item label="状态">
|
||||
<a-tag v-if="record.status === 'success'" color="success">✅ 打卡成功</a-tag>
|
||||
<a-tag v-else-if="record.status === 'out_of_time'" color="default">🕐 时间范围外</a-tag>
|
||||
<a-tag v-else-if="record.status === 'unknown'" color="warning">❗ 打卡异常</a-tag>
|
||||
<a-tag v-else color="error">❌ 打卡失败</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="触发方式">
|
||||
<a-tag v-if="record.trigger_type === 'manual'" color="blue">手动</a-tag>
|
||||
<a-tag v-else-if="record.trigger_type === 'scheduled'" color="cyan">定时</a-tag>
|
||||
<a-tag v-else-if="record.trigger_type === 'admin'" color="orange">管理员</a-tag>
|
||||
<a-tag v-else>{{ record.trigger_type }}</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="消息">{{ record.response_text || '-' }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
</a-space>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
v-model:current-page="checkInStore.currentPage"
|
||||
v-model:page-size="checkInStore.pageSize"
|
||||
<!-- Empty state -->
|
||||
<a-empty v-if="!checkInStore.loading && checkInStore.allRecords.length === 0" description="暂无打卡记录" />
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination-container" v-if="checkInStore.total > 0">
|
||||
<a-pagination
|
||||
v-model:current="checkInStore.currentPage"
|
||||
v-model:pageSize="checkInStore.pageSize"
|
||||
:total="checkInStore.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="handlePageChange"
|
||||
@size-change="handleSizeChange"
|
||||
:pageSizeOptions="['10', '20', '50', '100']"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:show-total="total => `共 ${total} 条记录`"
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</a-card>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { List, Refresh } from '@element-plus/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { UnorderedListOutlined, ReloadOutlined } from '@ant-design/icons-vue'
|
||||
import Layout from '@/components/Layout.vue'
|
||||
import { useCheckInStore } from '@/stores/checkIn'
|
||||
import { useBreakpoint } from '@/composables/useBreakpoint'
|
||||
import { formatDateTime } from '@/utils/helpers'
|
||||
|
||||
const checkInStore = useCheckInStore()
|
||||
const { isMobile } = useBreakpoint()
|
||||
|
||||
// Table columns configuration
|
||||
const columns = [
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||
{ title: '用户ID', dataIndex: 'user_id', key: 'user_id', width: 100 },
|
||||
{ title: '用户邮箱', dataIndex: 'user_email', key: 'user_email', width: 180, ellipsis: true },
|
||||
{ title: '任务名称', dataIndex: 'task_name', key: 'task_name', width: 150, ellipsis: true },
|
||||
{ title: '接龙ID', dataIndex: 'thread_id', key: 'thread_id', width: 150, ellipsis: true },
|
||||
{ title: '打卡时间', dataIndex: 'check_in_time', key: 'check_in_time', width: 180 },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 120 },
|
||||
{ title: '触发方式', dataIndex: 'trigger_type', key: 'trigger_type', width: 120 },
|
||||
{ title: '消息', dataIndex: 'response_text', key: 'response_text', ellipsis: true },
|
||||
]
|
||||
|
||||
const handleRefresh = async () => {
|
||||
try {
|
||||
await checkInStore.fetchAllRecords()
|
||||
ElMessage.success('刷新成功')
|
||||
message.success('刷新成功')
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '刷新失败')
|
||||
message.error(error.message || '刷新失败')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -120,7 +158,6 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
|
||||
@@ -1,106 +1,126 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="admin-stats-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="24">
|
||||
<a-card>
|
||||
<template #title>
|
||||
<div class="card-header">
|
||||
<el-icon><DataAnalysis /></el-icon>
|
||||
<BarChartOutlined />
|
||||
<span>系统统计信息</span>
|
||||
<el-button type="primary" :icon="Refresh" @click="handleRefresh">
|
||||
<a-button type="primary" @click="handleRefresh">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
刷新
|
||||
</el-button>
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="adminStore.loading" class="loading-container">
|
||||
<el-skeleton :rows="5" animated />
|
||||
<a-skeleton :active="true" :paragraph="{ rows: 5 }" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="adminStore.stats" class="stats-content">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-statistic
|
||||
<a-row :gutter="[20, 20]">
|
||||
<a-col :xs="24" :sm="12" :md="6">
|
||||
<a-statistic
|
||||
title="总用户数"
|
||||
:value="adminStore.totalUsers"
|
||||
prefix-icon="User"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-statistic
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="12" :md="6">
|
||||
<a-statistic
|
||||
title="已审批用户数"
|
||||
:value="adminStore.activeUsers"
|
||||
prefix-icon="Check"
|
||||
value-style="color: #67c23a"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-statistic
|
||||
:value-style="{ color: '#52c41a' }"
|
||||
>
|
||||
<template #prefix>
|
||||
<CheckOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="12" :md="6">
|
||||
<a-statistic
|
||||
title="总打卡次数"
|
||||
:value="adminStore.totalRecords"
|
||||
prefix-icon="List"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-statistic
|
||||
>
|
||||
<template #prefix>
|
||||
<UnorderedListOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="12" :md="6">
|
||||
<a-statistic
|
||||
title="今日打卡"
|
||||
:value="adminStore.todayRecords"
|
||||
prefix-icon="Calendar"
|
||||
value-style="color: #409eff"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
:value-style="{ color: '#1890ff' }"
|
||||
>
|
||||
<template #prefix>
|
||||
<CalendarOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<el-divider />
|
||||
<a-divider />
|
||||
|
||||
<el-descriptions title="详细信息" :column="2" border>
|
||||
<el-descriptions-item label="管理员数量">
|
||||
<a-descriptions title="详细信息" :column="{ xs: 1, sm: 1, md: 2 }" bordered>
|
||||
<a-descriptions-item label="管理员数量">
|
||||
{{ adminStore.stats?.users?.admin || 0 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="普通用户数量">
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="普通用户数量">
|
||||
{{ adminStore.stats?.users?.regular || 0 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="今日成功打卡">
|
||||
<el-tag type="success">{{ adminStore.stats?.check_in_records?.today_success || 0 }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="今日失败打卡">
|
||||
<el-tag type="danger">{{ adminStore.stats?.check_in_records?.today_failure || 0 }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="今日时间范围外">
|
||||
<el-tag type="info">{{ adminStore.stats?.check_in_records?.today_out_of_time || 0 }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="今日异常打卡">
|
||||
<el-tag type="warning">{{ adminStore.stats?.check_in_records?.today_unknown || 0 }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="总成功率" :span="2">
|
||||
<el-progress
|
||||
:percentage="calculateSuccessRate()"
|
||||
:color="getProgressColor"
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="今日成功打卡">
|
||||
<a-tag color="success">{{ adminStore.stats?.check_in_records?.today_success || 0 }}</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="今日失败打卡">
|
||||
<a-tag color="error">{{ adminStore.stats?.check_in_records?.today_failure || 0 }}</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="今日时间范围外">
|
||||
<a-tag color="default">{{ adminStore.stats?.check_in_records?.today_out_of_time || 0 }}</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="今日异常打卡">
|
||||
<a-tag color="warning">{{ adminStore.stats?.check_in_records?.today_unknown || 0 }}</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="总成功率" :span="2">
|
||||
<a-progress
|
||||
:percent="calculateSuccessRate()"
|
||||
:stroke-color="getProgressColor(calculateSuccessRate())"
|
||||
/>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { DataAnalysis, Refresh } from '@element-plus/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
BarChartOutlined,
|
||||
ReloadOutlined,
|
||||
UserOutlined,
|
||||
CheckOutlined,
|
||||
UnorderedListOutlined,
|
||||
CalendarOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import Layout from '@/components/Layout.vue'
|
||||
import { useAdminStore } from '@/stores/admin'
|
||||
|
||||
const adminStore = useAdminStore()
|
||||
|
||||
const getProgressColor = (percentage) => {
|
||||
if (percentage >= 90) return '#67c23a'
|
||||
if (percentage >= 70) return '#e6a23c'
|
||||
return '#f56c6c'
|
||||
if (percentage >= 90) return '#52c41a'
|
||||
if (percentage >= 70) return '#faad14'
|
||||
return '#ff4d4f'
|
||||
}
|
||||
|
||||
const calculateSuccessRate = () => {
|
||||
@@ -121,9 +141,9 @@ const calculateSuccessRate = () => {
|
||||
const handleRefresh = async () => {
|
||||
try {
|
||||
await adminStore.fetchStats()
|
||||
ElMessage.success('刷新成功')
|
||||
message.success('刷新成功')
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '刷新失败')
|
||||
message.error(error.message || '刷新失败')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -142,10 +162,10 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-header .el-button {
|
||||
.card-header :deep(.ant-btn) {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="min-h-screen bg-gradient-to-br from-purple-50 via-white to-blue-50 p-6">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="templates-view">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="mb-8 animate-fade-in">
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gradient mb-2">任务模板管理</h1>
|
||||
@@ -21,9 +21,7 @@
|
||||
<!-- Templates List -->
|
||||
<div v-if="loading && templates.length === 0" class="space-y-4">
|
||||
<div v-for="i in 3" :key="i" class="fluent-card p-6">
|
||||
<div class="skeleton h-6 w-1/3 mb-3"></div>
|
||||
<div class="skeleton h-4 w-full mb-2"></div>
|
||||
<div class="skeleton h-4 w-2/3"></div>
|
||||
<a-skeleton :active="true" :paragraph="{ rows: 2 }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -40,9 +38,9 @@
|
||||
<div
|
||||
v-for="template in templates"
|
||||
:key="template.id"
|
||||
class="fluent-card p-6 hover:shadow-xl transition-all animate-slide-up"
|
||||
class="fluent-card p-7 hover:shadow-xl transition-all animate-slide-up"
|
||||
>
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="flex items-start justify-between mb-5">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-2">{{ template.name }}</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">{{ template.description || '无描述' }}</p>
|
||||
@@ -52,116 +50,141 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 mt-4">
|
||||
<button @click="previewTemplate(template)" class="md3-button-outlined text-sm">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
预览
|
||||
</button>
|
||||
<button @click="editTemplate(template)" class="md3-button-outlined text-sm">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
编辑
|
||||
</button>
|
||||
<button @click="deleteTemplate(template)" class="md3-button-text text-sm text-red-600">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
删除
|
||||
</button>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 space-y-2">
|
||||
<!-- 第一行：预览在左半部分居中，编辑在右半部分居中 -->
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="flex justify-center">
|
||||
<button @click="previewTemplate(template)" class="md3-button-outlined text-sm flex-shrink-0">
|
||||
<svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
预览
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button @click="editTemplate(template)" class="md3-button-outlined text-sm flex-shrink-0">
|
||||
<svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
编辑
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行：删除在右半部分居中，与编辑对齐 -->
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div></div>
|
||||
<div class="flex justify-center">
|
||||
<button @click="deleteTemplate(template)" class="md3-button-text text-sm text-red-600 flex-shrink-0">
|
||||
<svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create/Edit Dialog -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
<a-modal
|
||||
v-model:open="dialogVisible"
|
||||
:title="dialogMode === 'create' ? '新建模板' : '编辑模板'"
|
||||
width="95%"
|
||||
:close-on-click-modal="false"
|
||||
class="template-editor-dialog"
|
||||
:width="dialogWidth"
|
||||
:style="isMobile ? { top: 0, maxWidth: '100vw' } : {}"
|
||||
:maskClosable="false"
|
||||
class="template-editor-modal"
|
||||
>
|
||||
<el-form :model="formData" label-width="120px" ref="formRef">
|
||||
<el-form-item label="模板名称" required>
|
||||
<el-input v-model="formData.name" placeholder="请输入模板名称" maxlength="100" show-word-limit />
|
||||
</el-form-item>
|
||||
<a-form :model="formData" layout="vertical" ref="formRef">
|
||||
<a-form-item label="模板名称" required>
|
||||
<a-input v-model:value="formData.name" placeholder="请输入模板名称" :maxlength="100" show-count />
|
||||
</a-form-item>
|
||||
|
||||
<el-form-item label="模板描述">
|
||||
<el-input v-model="formData.description" type="textarea" :rows="2" placeholder="请输入模板描述" />
|
||||
</el-form-item>
|
||||
<a-form-item label="模板描述">
|
||||
<a-textarea v-model:value="formData.description" :rows="2" placeholder="请输入模板描述" />
|
||||
</a-form-item>
|
||||
|
||||
<el-form-item label="父模板">
|
||||
<el-select v-model="formData.parent_id" placeholder="可选，继承父模板的字段配置" clearable class="w-full">
|
||||
<el-option
|
||||
<a-form-item label="父模板">
|
||||
<a-select
|
||||
v-model:value="formData.parent_id"
|
||||
placeholder="可选，继承父模板的字段配置"
|
||||
allow-clear
|
||||
style="width: 100%"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="template in availableParentTemplates"
|
||||
:key="template.id"
|
||||
:label="template.name"
|
||||
:value="template.id"
|
||||
:disabled="template.id === currentTemplateId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
>
|
||||
{{ template.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<el-form-item label="是否启用">
|
||||
<el-switch v-model="formData.is_active" />
|
||||
</el-form-item>
|
||||
<a-form-item label="是否启用">
|
||||
<a-switch v-model:checked="formData.is_active" />
|
||||
</a-form-item>
|
||||
|
||||
<el-divider content-position="left">
|
||||
<a-divider orientation="left">
|
||||
<span class="text-lg font-bold">Payload 配置 (JSON 映射)</span>
|
||||
</el-divider>
|
||||
</a-divider>
|
||||
|
||||
<el-alert
|
||||
title="💡 JSON 映射架构"
|
||||
<a-alert
|
||||
message="💡 JSON 映射架构"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="mb-4"
|
||||
>
|
||||
<p class="text-sm mb-2">
|
||||
<strong>配置即结构</strong>：模板配置完全映射到生成的 Payload 结构
|
||||
</p>
|
||||
<p class="text-sm mb-2">
|
||||
<strong>字段名保持原样</strong>：不进行任何大小写转换
|
||||
</p>
|
||||
<p class="text-sm">
|
||||
<strong>ThreadId</strong> 由用户填写，无需在模板中配置
|
||||
</p>
|
||||
</el-alert>
|
||||
<template #description>
|
||||
<p class="text-sm mb-2">
|
||||
<strong>配置即结构</strong>：模板配置完全映射到生成的 Payload 结构
|
||||
</p>
|
||||
<p class="text-sm mb-2">
|
||||
<strong>字段名保持原样</strong>：不进行任何大小写转换
|
||||
</p>
|
||||
<p class="text-sm">
|
||||
<strong>ThreadId</strong> 由用户填写，无需在模板中配置
|
||||
</p>
|
||||
</template>
|
||||
</a-alert>
|
||||
|
||||
<!-- 字段配置编辑器 -->
|
||||
<div class="field-config-editor">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-bold text-gray-800">字段配置</h3>
|
||||
<el-dropdown @command="handleAddField">
|
||||
<el-button type="primary">
|
||||
<a-dropdown>
|
||||
<a-button type="primary">
|
||||
添加字段
|
||||
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="field">
|
||||
<DownOutlined />
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="handleAddField">
|
||||
<a-menu-item key="field">
|
||||
<svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
||||
</svg>
|
||||
普通字段
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="array">
|
||||
</a-menu-item>
|
||||
<a-menu-item key="array">
|
||||
<svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
||||
</svg>
|
||||
数组字段
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="object">
|
||||
</a-menu-item>
|
||||
<a-menu-item key="object">
|
||||
<svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
对象字段
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- 递归渲染字段树 -->
|
||||
@@ -176,7 +199,7 @@
|
||||
<div v-else class="space-y-3">
|
||||
<FieldTreeNode
|
||||
v-for="(config, key) in formData.field_config"
|
||||
:key="key"
|
||||
:key="`${fieldConfigVersion}-${key}`"
|
||||
:field-key="key"
|
||||
:field-config="config"
|
||||
:path="[key]"
|
||||
@@ -188,46 +211,56 @@
|
||||
</div>
|
||||
|
||||
<!-- JSON 预览 -->
|
||||
<el-divider content-position="left">
|
||||
<a-divider orientation="left">
|
||||
<span class="text-lg font-bold">JSON 预览</span>
|
||||
</el-divider>
|
||||
</a-divider>
|
||||
|
||||
<div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm overflow-auto max-h-96">
|
||||
<pre>{{ JSON.stringify(formData.field_config, null, 2) }}</pre>
|
||||
</div>
|
||||
</el-form>
|
||||
</a-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitting">
|
||||
<a-button @click="dialogVisible = false">取消</a-button>
|
||||
<a-button type="primary" @click="handleSubmit" :loading="submitting">
|
||||
{{ dialogMode === 'create' ? '创建' : '更新' }}
|
||||
</el-button>
|
||||
</a-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</a-modal>
|
||||
|
||||
<!-- Add Field Dialog -->
|
||||
<el-dialog v-model="addFieldDialogVisible" :title="`添加${fieldTypeLabel}`" width="500px">
|
||||
<el-form @submit.prevent="confirmAddField">
|
||||
<el-form-item label="字段名">
|
||||
<el-input
|
||||
v-model="newFieldName"
|
||||
<a-modal
|
||||
v-model:open="addFieldDialogVisible"
|
||||
:title="`添加${fieldTypeLabel}`"
|
||||
:width="isMobile ? '100%' : 500"
|
||||
:style="isMobile ? { top: 0, maxWidth: '100vw' } : {}"
|
||||
>
|
||||
<a-form @submit.prevent="confirmAddField">
|
||||
<a-form-item label="字段名">
|
||||
<a-input
|
||||
v-model:value="newFieldName"
|
||||
placeholder="例如: Id, Group1, DateTarget"
|
||||
@keyup.enter="confirmAddField"
|
||||
/>
|
||||
<span class="text-xs text-gray-500 mt-1">
|
||||
<span class="text-xs text-gray-500 mt-1 block">
|
||||
💡 字段名将保持原样，不会进行大小写转换
|
||||
</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="addFieldDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="confirmAddField">确定</el-button>
|
||||
<a-button @click="addFieldDialogVisible = false">取消</a-button>
|
||||
<a-button type="primary" @click="confirmAddField">确定</a-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</a-modal>
|
||||
|
||||
<!-- Preview Dialog -->
|
||||
<el-dialog v-model="previewDialogVisible" title="模板预览" width="90%">
|
||||
<a-modal
|
||||
v-model:open="previewDialogVisible"
|
||||
title="模板预览"
|
||||
:width="previewDialogWidth"
|
||||
:style="isMobile ? { top: 0, maxWidth: '100vw' } : {}"
|
||||
>
|
||||
<div v-if="previewData" class="space-y-4">
|
||||
<div class="bg-gray-50 rounded p-4">
|
||||
<h4 class="font-semibold mb-2">生成的 Payload（使用默认值）：</h4>
|
||||
@@ -241,9 +274,9 @@
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="previewDialogVisible = false">关闭</el-button>
|
||||
<a-button @click="previewDialogVisible = false">关闭</a-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</a-modal>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
@@ -251,13 +284,28 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { ElMessage, ElMessageBox, ElIcon } from 'element-plus'
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { DownOutlined } from '@ant-design/icons-vue'
|
||||
import Layout from '@/components/Layout.vue'
|
||||
import FieldTreeNode from '@/components/FieldTreeNode.vue'
|
||||
import { useTemplateStore } from '@/stores/template'
|
||||
import { useBreakpoint } from '@/composables/useBreakpoint'
|
||||
|
||||
const templateStore = useTemplateStore()
|
||||
const { isMobile, isTablet } = useBreakpoint()
|
||||
|
||||
// 计算对话框宽度 - 响应式设计
|
||||
const dialogWidth = computed(() => {
|
||||
if (isMobile.value) return '100%'
|
||||
if (isTablet.value) return 900
|
||||
return 1200
|
||||
})
|
||||
|
||||
const previewDialogWidth = computed(() => {
|
||||
if (isMobile.value) return '100%'
|
||||
if (isTablet.value) return 800
|
||||
return 1000
|
||||
})
|
||||
|
||||
const templates = ref([])
|
||||
const loading = ref(false)
|
||||
@@ -272,6 +320,7 @@ const previewData = ref(null)
|
||||
const addFieldDialogVisible = ref(false)
|
||||
const newFieldName = ref('')
|
||||
const newFieldType = ref('field')
|
||||
const fieldConfigVersion = ref(0) // 用于强制刷新字段列表
|
||||
|
||||
const formData = ref({
|
||||
name: '',
|
||||
@@ -315,7 +364,7 @@ const fetchTemplates = async () => {
|
||||
try {
|
||||
templates.value = await templateStore.fetchTemplates()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '获取模板列表失败')
|
||||
message.error(error.message || '获取模板列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@@ -353,7 +402,7 @@ const editTemplate = (template) => {
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formData.value.name) {
|
||||
ElMessage.warning('请输入模板名称')
|
||||
message.warning('请输入模板名称')
|
||||
return
|
||||
}
|
||||
|
||||
@@ -369,41 +418,38 @@ const handleSubmit = async () => {
|
||||
|
||||
if (dialogMode.value === 'create') {
|
||||
await templateStore.createTemplate(templateData)
|
||||
ElMessage.success('模板创建成功')
|
||||
message.success('模板创建成功')
|
||||
} else {
|
||||
await templateStore.updateTemplate(currentTemplateId.value, templateData)
|
||||
ElMessage.success('模板更新成功')
|
||||
message.success('模板更新成功')
|
||||
}
|
||||
|
||||
dialogVisible.value = false
|
||||
await fetchTemplates()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '操作失败')
|
||||
message.error(error.message || '操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const deleteTemplate = async (template) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除模板"${template.name}"吗？此操作不可撤销。`,
|
||||
'确认删除',
|
||||
{
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
const deleteTemplate = (template) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定要删除模板"${template.name}"吗？此操作不可撤销。`,
|
||||
okText: '删除',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await templateStore.deleteTemplate(template.id)
|
||||
message.success('模板删除成功')
|
||||
await fetchTemplates()
|
||||
} catch (error) {
|
||||
message.error(error.message || '删除失败')
|
||||
}
|
||||
)
|
||||
|
||||
await templateStore.deleteTemplate(template.id)
|
||||
ElMessage.success('模板删除成功')
|
||||
await fetchTemplates()
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(error.message || '删除失败')
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const previewTemplate = async (template) => {
|
||||
@@ -411,38 +457,45 @@ const previewTemplate = async (template) => {
|
||||
previewData.value = await templateStore.previewTemplate(template.id)
|
||||
previewDialogVisible.value = true
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '预览失败')
|
||||
message.error(error.message || '预览失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddField = (type) => {
|
||||
newFieldType.value = type
|
||||
const handleAddField = ({ key }) => {
|
||||
newFieldType.value = key
|
||||
newFieldName.value = ''
|
||||
addFieldDialogVisible.value = true
|
||||
}
|
||||
|
||||
const confirmAddField = () => {
|
||||
if (!newFieldName.value) {
|
||||
ElMessage.warning('请输入字段名')
|
||||
message.warning('请输入字段名')
|
||||
return
|
||||
}
|
||||
|
||||
if (formData.value.field_config[newFieldName.value]) {
|
||||
ElMessage.warning('该字段已存在')
|
||||
message.warning('该字段已存在')
|
||||
return
|
||||
}
|
||||
|
||||
// 创建一个新对象,确保新字段被添加到末尾
|
||||
const newConfig = { ...formData.value.field_config }
|
||||
|
||||
// 创建对应类型的字段
|
||||
if (newFieldType.value === 'field') {
|
||||
formData.value.field_config[newFieldName.value] = createDefaultFieldConfig()
|
||||
newConfig[newFieldName.value] = createDefaultFieldConfig()
|
||||
} else if (newFieldType.value === 'array') {
|
||||
formData.value.field_config[newFieldName.value] = []
|
||||
newConfig[newFieldName.value] = []
|
||||
} else if (newFieldType.value === 'object') {
|
||||
formData.value.field_config[newFieldName.value] = {}
|
||||
newConfig[newFieldName.value] = {}
|
||||
}
|
||||
|
||||
// 替换整个 field_config 以确保顺序和响应性
|
||||
formData.value.field_config = newConfig
|
||||
fieldConfigVersion.value++ // 强制刷新
|
||||
|
||||
addFieldDialogVisible.value = false
|
||||
ElMessage.success('字段添加成功')
|
||||
message.success('字段添加成功')
|
||||
}
|
||||
|
||||
const updateField = (path, newValue) => {
|
||||
@@ -456,8 +509,6 @@ const updateField = (path, newValue) => {
|
||||
|
||||
const deleteField = (path) => {
|
||||
// 通过路径删除嵌套字段
|
||||
console.log('🗑️ 删除字段 - 路径:', path)
|
||||
|
||||
if (!path || path.length === 0) return
|
||||
|
||||
// 创建一个新的 field_config 副本以触发响应性
|
||||
@@ -489,90 +540,121 @@ const deleteField = (path) => {
|
||||
|
||||
// 替换整个 field_config 以触发 Vue 响应性
|
||||
formData.value.field_config = newConfig
|
||||
|
||||
console.log('✅ 字段已删除:', path)
|
||||
fieldConfigVersion.value++ // 强制刷新
|
||||
}
|
||||
|
||||
const moveField = (path, direction) => {
|
||||
// 通过路径移动字段
|
||||
if (!path || path.length === 0) return
|
||||
|
||||
// 创建一个新的 field_config 副本以触发响应性
|
||||
const newConfig = JSON.parse(JSON.stringify(formData.value.field_config))
|
||||
let parent = newConfig
|
||||
// 如果是根级别字段，直接重建整个 field_config
|
||||
if (path.length === 1) {
|
||||
const fieldKey = path[0]
|
||||
const keys = Object.keys(formData.value.field_config)
|
||||
const currentIndex = keys.indexOf(fieldKey)
|
||||
|
||||
// 导航到父对象/数组
|
||||
for (let i = 0; i < path.length - 1; i++) {
|
||||
if (!parent || typeof parent !== 'object') {
|
||||
console.error('移动失败：路径无效', path, 'at index', i)
|
||||
if (currentIndex === -1) {
|
||||
console.error('❌ 字段不存在:', fieldKey)
|
||||
return
|
||||
}
|
||||
parent = parent[path[i]]
|
||||
|
||||
let targetIndex = currentIndex
|
||||
if (direction === 'up' && currentIndex > 0) {
|
||||
targetIndex = currentIndex - 1
|
||||
} else if (direction === 'down' && currentIndex < keys.length - 1) {
|
||||
targetIndex = currentIndex + 1
|
||||
} else {
|
||||
return
|
||||
}
|
||||
|
||||
// 交换键的位置
|
||||
const temp = keys[currentIndex]
|
||||
keys[currentIndex] = keys[targetIndex]
|
||||
keys[targetIndex] = temp
|
||||
|
||||
// 重建整个 field_config - 使用深拷贝确保完全新的对象
|
||||
const newConfig = {}
|
||||
keys.forEach(key => {
|
||||
// 深拷贝每个字段配置
|
||||
newConfig[key] = JSON.parse(JSON.stringify(formData.value.field_config[key]))
|
||||
})
|
||||
|
||||
// 替换整个 formData，而不只是 field_config
|
||||
formData.value = {
|
||||
...formData.value,
|
||||
field_config: newConfig
|
||||
}
|
||||
fieldConfigVersion.value++
|
||||
return
|
||||
}
|
||||
|
||||
if (!parent || typeof parent !== 'object') {
|
||||
console.error('移动失败：父对象不存在', path)
|
||||
return
|
||||
// 嵌套字段的情况（保留原有逻辑）
|
||||
const newConfig = JSON.parse(JSON.stringify(formData.value.field_config))
|
||||
|
||||
// 导航到目标的父容器
|
||||
let parent = newConfig
|
||||
for (let i = 0; i < path.length - 1; i++) {
|
||||
parent = parent[path[i]]
|
||||
if (!parent) {
|
||||
console.error('❌ 路径无效:', path)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const fieldKey = path[path.length - 1]
|
||||
|
||||
if (Array.isArray(parent)) {
|
||||
// 数组：使用索引移动
|
||||
const index = fieldKey
|
||||
// 数组情况：直接交换元素
|
||||
const index = Number(fieldKey)
|
||||
if (direction === 'up' && index > 0) {
|
||||
// 向上移动
|
||||
const temp = parent[index]
|
||||
parent[index] = parent[index - 1]
|
||||
parent[index - 1] = temp
|
||||
} else if (direction === 'down' && index < parent.length - 1) {
|
||||
// 向下移动
|
||||
const temp = parent[index]
|
||||
parent[index] = parent[index + 1]
|
||||
parent[index + 1] = temp
|
||||
} else {
|
||||
// 已经在边界，无需移动
|
||||
return
|
||||
}
|
||||
} else {
|
||||
// 对象：需要重建对象以改变键的顺序
|
||||
// 对象情况：重建对象以改变键顺序
|
||||
const keys = Object.keys(parent)
|
||||
const currentIndex = keys.indexOf(fieldKey)
|
||||
|
||||
if (currentIndex === -1) return
|
||||
|
||||
let newIndex = currentIndex
|
||||
if (direction === 'up' && currentIndex > 0) {
|
||||
newIndex = currentIndex - 1
|
||||
} else if (direction === 'down' && currentIndex < keys.length - 1) {
|
||||
newIndex = currentIndex + 1
|
||||
} else {
|
||||
// 已经在边界，无需移动
|
||||
if (currentIndex === -1) {
|
||||
console.error('❌ 字段不存在:', fieldKey)
|
||||
return
|
||||
}
|
||||
|
||||
if (newIndex !== currentIndex) {
|
||||
// 交换键的位置
|
||||
const temp = keys[currentIndex]
|
||||
keys[currentIndex] = keys[newIndex]
|
||||
keys[newIndex] = temp
|
||||
|
||||
// 重建对象
|
||||
const newParent = {}
|
||||
keys.forEach(key => {
|
||||
newParent[key] = parent[key]
|
||||
})
|
||||
|
||||
// 更新父对象的所有键
|
||||
Object.keys(parent).forEach(key => delete parent[key])
|
||||
Object.assign(parent, newParent)
|
||||
let targetIndex = currentIndex
|
||||
if (direction === 'up' && currentIndex > 0) {
|
||||
targetIndex = currentIndex - 1
|
||||
} else if (direction === 'down' && currentIndex < keys.length - 1) {
|
||||
targetIndex = currentIndex + 1
|
||||
} else {
|
||||
return
|
||||
}
|
||||
|
||||
// 交换键数组中的位置
|
||||
const temp = keys[currentIndex]
|
||||
keys[currentIndex] = keys[targetIndex]
|
||||
keys[targetIndex] = temp
|
||||
|
||||
// 重建父对象
|
||||
const reorderedParent = {}
|
||||
keys.forEach(key => {
|
||||
reorderedParent[key] = parent[key]
|
||||
})
|
||||
|
||||
// 替换父容器的所有属性
|
||||
Object.keys(parent).forEach(key => delete parent[key])
|
||||
Object.assign(parent, reorderedParent)
|
||||
}
|
||||
|
||||
// 替换整个 field_config 以触发 Vue 响应性
|
||||
// 强制触发响应性更新
|
||||
formData.value.field_config = newConfig
|
||||
|
||||
console.log('✅ 字段已移动:', path, direction)
|
||||
fieldConfigVersion.value++
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@@ -585,7 +667,7 @@ onMounted(() => {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.template-editor-dialog :deep(.el-dialog__body) {
|
||||
.template-editor-modal :deep(.ant-modal-body) {
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -1,220 +1,252 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="admin-users-container">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<a-card>
|
||||
<template #title>
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
<UserOutlined />
|
||||
<span>用户管理</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<el-button type="success" :icon="Plus" @click="handleCreate">
|
||||
<a-space class="actions">
|
||||
<a-button type="primary" @click="handleCreate">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
创建用户
|
||||
</el-button>
|
||||
<el-button type="primary" :icon="Refresh" @click="handleRefresh">
|
||||
</a-button>
|
||||
<a-button @click="handleRefresh">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
刷新
|
||||
</el-button>
|
||||
</div>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Tab 切换 -->
|
||||
<el-tabs v-model="activeTab" @tab-change="handleTabChange">
|
||||
<a-tabs v-model:activeKey="activeTab" @change="handleTabChange">
|
||||
<!-- 待审批用户 Tab -->
|
||||
<el-tab-pane label="待审批用户" name="pending">
|
||||
<el-table
|
||||
:data="pendingUsers"
|
||||
v-loading="loading"
|
||||
stripe
|
||||
border
|
||||
<a-tab-pane key="pending" tab="待审批用户">
|
||||
<!-- 桌面端表格 -->
|
||||
<a-table
|
||||
v-if="!isMobile"
|
||||
:dataSource="pendingUsers"
|
||||
:columns="pendingColumns"
|
||||
:loading="loading"
|
||||
:row-key="record => record.id"
|
||||
:scroll="{ x: 'max-content' }"
|
||||
bordered
|
||||
>
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="alias" label="用户名" min-width="150" />
|
||||
<el-table-column prop="email" label="邮箱" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="registered_ip" label="注册IP" width="150" />
|
||||
|
||||
<el-table-column prop="created_at" label="注册时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDateTime(row.created_at) }}
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'created_at'">
|
||||
{{ formatDateTime(record.created_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="success" size="small" @click="handleApprove(row)">
|
||||
通过
|
||||
</el-button>
|
||||
<el-button type="danger" size="small" @click="handleReject(row)">
|
||||
拒绝
|
||||
</el-button>
|
||||
<template v-else-if="column.key === 'actions'">
|
||||
<a-space>
|
||||
<a-button type="primary" size="small" @click="handleApprove(record)">
|
||||
通过
|
||||
</a-button>
|
||||
<a-button danger size="small" @click="handleReject(record)">
|
||||
拒绝
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<el-empty v-if="!loading && pendingUsers.length === 0" description="暂无待审批用户" />
|
||||
</el-tab-pane>
|
||||
<!-- 移动端卡片视图 -->
|
||||
<a-space v-else direction="vertical" :size="16" style="width: 100%">
|
||||
<a-card v-for="user in pendingUsers" :key="user.id" size="small" :loading="loading">
|
||||
<a-descriptions :column="1" size="small" bordered>
|
||||
<a-descriptions-item label="ID">{{ user.id }}</a-descriptions-item>
|
||||
<a-descriptions-item label="用户名">{{ user.alias }}</a-descriptions-item>
|
||||
<a-descriptions-item label="邮箱">{{ user.email || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="注册时间">{{ formatDateTime(user.created_at) }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<a-space class="mt-3" style="width: 100%">
|
||||
<a-button type="primary" size="small" block @click="handleApprove(user)">通过</a-button>
|
||||
<a-button danger size="small" block @click="handleReject(user)">拒绝</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
<a-empty v-if="!loading && pendingUsers.length === 0" description="暂无数据" />
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
|
||||
<!-- 所有用户 Tab -->
|
||||
<el-tab-pane label="所有用户" name="all">
|
||||
<!-- 用户表格 -->
|
||||
<el-table
|
||||
:data="userStore.users"
|
||||
v-loading="loading"
|
||||
stripe
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
<a-tab-pane key="all" tab="所有用户">
|
||||
<!-- 桌面端表格 -->
|
||||
<a-table
|
||||
v-if="!isMobile"
|
||||
:dataSource="userStore.users"
|
||||
:columns="allColumns"
|
||||
:loading="loading"
|
||||
:row-key="record => record.id"
|
||||
:row-selection="rowSelection"
|
||||
:scroll="{ x: 'max-content' }"
|
||||
bordered
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="alias" label="用户名" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="email" label="邮箱" min-width="180" show-overflow-tooltip />
|
||||
|
||||
<el-table-column prop="role" label="角色" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.role === 'admin' ? 'danger' : 'primary'">
|
||||
{{ row.role === 'admin' ? '管理员' : '用户' }}
|
||||
</el-tag>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'role'">
|
||||
<a-tag :color="record.role === 'admin' ? 'error' : 'blue'">
|
||||
{{ record.role === 'admin' ? '管理员' : '用户' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="is_approved" label="审批状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.is_approved ? 'success' : 'warning'">
|
||||
{{ row.is_approved ? '已审批' : '待审批' }}
|
||||
</el-tag>
|
||||
<template v-else-if="column.key === 'is_approved'">
|
||||
<a-tag :color="record.is_approved ? 'success' : 'warning'">
|
||||
{{ record.is_approved ? '已审批' : '待审批' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="registered_ip" label="注册IP" width="150" />
|
||||
|
||||
<el-table-column prop="jwt_exp" label="Token 过期时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ row.jwt_exp && row.jwt_exp !== '0' ? formatDateTime(parseInt(row.jwt_exp) * 1000) : '-' }}
|
||||
<template v-else-if="column.key === 'jwt_exp'">
|
||||
{{ record.jwt_exp && record.jwt_exp !== '0' ? formatDateTime(parseInt(record.jwt_exp) * 1000) : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="created_at" label="创建时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDateTime(row.created_at) }}
|
||||
<template v-else-if="column.key === 'created_at'">
|
||||
{{ formatDateTime(record.created_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" size="small" @click="handleEdit(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="danger" size="small" @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
<template v-else-if="column.key === 'actions'">
|
||||
<a-space>
|
||||
<a-button type="primary" size="small" @click="handleEdit(record)">
|
||||
编辑
|
||||
</a-button>
|
||||
<a-button danger size="small" @click="handleDelete(record)">
|
||||
删除
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- 移动端卡片视图 -->
|
||||
<a-space v-else direction="vertical" :size="16" style="width: 100%">
|
||||
<a-card v-for="user in userStore.users" :key="user.id" size="small" :loading="loading">
|
||||
<a-descriptions :column="1" size="small" bordered>
|
||||
<a-descriptions-item label="ID">{{ user.id }}</a-descriptions-item>
|
||||
<a-descriptions-item label="用户名">{{ user.alias }}</a-descriptions-item>
|
||||
<a-descriptions-item label="邮箱">{{ user.email || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="角色">
|
||||
<a-tag :color="user.role === 'admin' ? 'error' : 'blue'">
|
||||
{{ user.role === 'admin' ? '管理员' : '用户' }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="审批状态">
|
||||
<a-tag :color="user.is_approved ? 'success' : 'warning'">
|
||||
{{ user.is_approved ? '已审批' : '待审批' }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="Token过期">
|
||||
{{ user.jwt_exp && user.jwt_exp !== '0' ? formatDateTime(parseInt(user.jwt_exp) * 1000) : '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">{{ formatDateTime(user.created_at) }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<a-space class="mt-3" style="width: 100%">
|
||||
<a-button type="primary" size="small" block @click="handleEdit(user)">编辑</a-button>
|
||||
<a-button danger size="small" block @click="handleDelete(user)">删除</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</a-space>
|
||||
|
||||
<!-- 批量操作 -->
|
||||
<div class="batch-actions" v-if="selectedUsers.length > 0">
|
||||
<el-alert
|
||||
:title="`已选择 ${selectedUsers.length} 个用户`"
|
||||
<a-alert
|
||||
:message="`已选择 ${selectedUsers.length} 个用户`"
|
||||
type="info"
|
||||
:closable="false"
|
||||
>
|
||||
<template #default>
|
||||
<div style="margin-top: 10px;">
|
||||
<el-button type="success" size="small" @click="handleBatchApprove">
|
||||
<template #description>
|
||||
<a-space style="margin-top: 10px;">
|
||||
<a-button type="primary" size="small" @click="handleBatchApprove">
|
||||
批量审批
|
||||
</el-button>
|
||||
<el-button type="danger" size="small" @click="handleBatchDelete">
|
||||
</a-button>
|
||||
<a-button danger size="small" @click="handleBatchDelete">
|
||||
批量删除
|
||||
</el-button>
|
||||
</div>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</el-alert>
|
||||
</a-alert>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
|
||||
<!-- 创建/编辑用户对话框 -->
|
||||
<el-dialog
|
||||
<a-modal
|
||||
:title="dialogMode === 'create' ? '创建用户' : '编辑用户'"
|
||||
v-model="dialogVisible"
|
||||
width="600px"
|
||||
v-model:open="dialogVisible"
|
||||
:width="isMobile ? '100%' : 600"
|
||||
:style="isMobile ? { top: 0, maxWidth: '100vw' } : {}"
|
||||
>
|
||||
<el-form
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="120px"
|
||||
layout="vertical"
|
||||
>
|
||||
<el-form-item label="用户名" prop="alias">
|
||||
<el-input v-model="formData.alias" placeholder="请输入用户名" />
|
||||
</el-form-item>
|
||||
<a-form-item label="用户名" name="alias">
|
||||
<a-input v-model:value="formData.alias" placeholder="请输入用户名" />
|
||||
</a-form-item>
|
||||
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="formData.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
<a-form-item label="邮箱" name="email">
|
||||
<a-input v-model:value="formData.email" placeholder="请输入邮箱" />
|
||||
</a-form-item>
|
||||
|
||||
<el-form-item label="角色" prop="role">
|
||||
<el-select v-model="formData.role" placeholder="请选择角色">
|
||||
<el-option label="用户" value="user" />
|
||||
<el-option label="管理员" value="admin" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<a-form-item label="角色" name="role">
|
||||
<a-select v-model:value="formData.role" placeholder="请选择角色">
|
||||
<a-select-option value="user">用户</a-select-option>
|
||||
<a-select-option value="admin">管理员</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<el-form-item label="审批状态" prop="is_approved">
|
||||
<el-switch v-model="formData.is_approved" />
|
||||
<a-form-item label="审批状态" name="is_approved">
|
||||
<a-switch v-model:checked="formData.is_approved" />
|
||||
<span class="form-hint">是否已审批通过</span>
|
||||
</el-form-item>
|
||||
</a-form-item>
|
||||
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input
|
||||
v-model="formData.password"
|
||||
type="password"
|
||||
<a-form-item label="密码" name="password">
|
||||
<a-input-password
|
||||
v-model:value="formData.password"
|
||||
:placeholder="dialogMode === 'create' ? '请输入密码' : '留空则不修改密码'"
|
||||
show-password
|
||||
/>
|
||||
<span class="form-hint" v-if="dialogMode === 'edit'">
|
||||
留空则不修改密码
|
||||
</span>
|
||||
</el-form-item>
|
||||
</a-form-item>
|
||||
|
||||
<el-form-item label="重置密码" v-if="dialogMode === 'edit'">
|
||||
<el-switch v-model="formData.reset_password" />
|
||||
<a-form-item label="重置密码" v-if="dialogMode === 'edit'">
|
||||
<a-switch v-model:checked="formData.reset_password" />
|
||||
<span class="form-hint-danger" v-if="formData.reset_password">
|
||||
⚠️ 将重置为默认密码
|
||||
</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitting">
|
||||
<a-button @click="dialogVisible = false">取消</a-button>
|
||||
<a-button type="primary" @click="handleSubmit" :loading="submitting">
|
||||
确定
|
||||
</el-button>
|
||||
</a-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</a-modal>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { UserFilled, Plus, Refresh } from '@element-plus/icons-vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { UserOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons-vue'
|
||||
import Layout from '@/components/Layout.vue'
|
||||
import { useBreakpoint } from '@/composables/useBreakpoint'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useAdminStore } from '@/stores/admin'
|
||||
import { adminAPI } from '@/api/index'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const adminStore = useAdminStore()
|
||||
const { isMobile } = useBreakpoint()
|
||||
|
||||
// 状态
|
||||
const loading = ref(false)
|
||||
const activeTab = ref('all') // 默认展示所有用户
|
||||
const pendingUsers = ref([])
|
||||
const selectedUsers = ref([])
|
||||
const selectedRowKeys = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
const dialogMode = ref('create')
|
||||
const submitting = ref(false)
|
||||
@@ -256,13 +288,43 @@ const formatDateTime = (timestamp) => {
|
||||
})
|
||||
}
|
||||
|
||||
// 待审批用户表格列
|
||||
const pendingColumns = [
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||
{ title: '用户名', dataIndex: 'alias', key: 'alias', ellipsis: true },
|
||||
{ title: '邮箱', dataIndex: 'email', key: 'email', ellipsis: true },
|
||||
{ title: '注册时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '操作', key: 'actions', width: 200, fixed: 'right' },
|
||||
]
|
||||
|
||||
// 所有用户表格列
|
||||
const allColumns = [
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||
{ title: '用户名', dataIndex: 'alias', key: 'alias', ellipsis: true },
|
||||
{ title: '邮箱', dataIndex: 'email', key: 'email', ellipsis: true },
|
||||
{ title: '角色', dataIndex: 'role', key: 'role', width: 100 },
|
||||
{ title: '审批状态', dataIndex: 'is_approved', key: 'is_approved', width: 100 },
|
||||
{ title: 'Token 过期时间', dataIndex: 'jwt_exp', key: 'jwt_exp', width: 180 },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '操作', key: 'actions', width: 200, fixed: 'right' },
|
||||
]
|
||||
|
||||
// 行选择配置
|
||||
const rowSelection = {
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: (keys, rows) => {
|
||||
selectedRowKeys.value = keys
|
||||
selectedUsers.value = rows
|
||||
},
|
||||
}
|
||||
|
||||
// 获取待审批用户
|
||||
const fetchPendingUsers = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
pendingUsers.value = await adminAPI.getPendingUsers()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '获取待审批用户失败')
|
||||
message.error(error.message || '获取待审批用户失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@@ -279,48 +341,41 @@ const handleTabChange = (tab) => {
|
||||
|
||||
// 审批通过用户
|
||||
const handleApprove = async (user) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确认通过用户 "${user.alias}" 的审批吗？`,
|
||||
'审批确认',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
Modal.confirm({
|
||||
title: '审批确认',
|
||||
content: `确认通过用户 "${user.alias}" 的审批吗？`,
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await adminAPI.approveUser(user.id)
|
||||
message.success('审批成功')
|
||||
fetchPendingUsers()
|
||||
} catch (error) {
|
||||
message.error(error.message || '审批失败')
|
||||
}
|
||||
)
|
||||
|
||||
await adminAPI.approveUser(user.id)
|
||||
ElMessage.success('审批成功')
|
||||
fetchPendingUsers()
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(error.message || '审批失败')
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 拒绝用户
|
||||
const handleReject = async (user) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确认拒绝用户 "${user.alias}" 的申请吗？拒绝后将删除该用户。`,
|
||||
'拒绝确认',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
Modal.confirm({
|
||||
title: '拒绝确认',
|
||||
content: `确认拒绝用户 "${user.alias}" 的申请吗？拒绝后将删除该用户。`,
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await adminAPI.rejectUser(user.id)
|
||||
message.success('已拒绝并删除用户')
|
||||
fetchPendingUsers()
|
||||
} catch (error) {
|
||||
message.error(error.message || '操作失败')
|
||||
}
|
||||
)
|
||||
|
||||
await adminAPI.rejectUser(user.id)
|
||||
ElMessage.success('已拒绝并删除用户')
|
||||
fetchPendingUsers()
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(error.message || '操作失败')
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 刷新数据
|
||||
@@ -331,9 +386,9 @@ const handleRefresh = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await userStore.fetchUsers()
|
||||
ElMessage.success('刷新成功')
|
||||
message.success('刷新成功')
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '刷新失败')
|
||||
message.error(error.message || '刷新失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@@ -379,23 +434,23 @@ const handleSubmit = async () => {
|
||||
|
||||
// 检查密码设置冲突
|
||||
if (dialogMode.value === 'edit' && formData.value.password && formData.value.reset_password) {
|
||||
ElMessage.warning('不能同时设置新密码和重置密码，请选择其一')
|
||||
message.warning('不能同时设置新密码和重置密码，请选择其一')
|
||||
submitting.value = false
|
||||
return
|
||||
}
|
||||
|
||||
if (dialogMode.value === 'create') {
|
||||
await userStore.createUser(formData.value)
|
||||
ElMessage.success('创建成功')
|
||||
message.success('创建成功')
|
||||
} else {
|
||||
await userStore.updateUser(formData.value.id, formData.value)
|
||||
ElMessage.success('更新成功')
|
||||
message.success('更新成功')
|
||||
}
|
||||
|
||||
dialogVisible.value = false
|
||||
await handleRefresh()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '操作失败')
|
||||
message.error(error.message || '操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
@@ -403,96 +458,77 @@ const handleSubmit = async () => {
|
||||
|
||||
// 删除用户
|
||||
const handleDelete = (user) => {
|
||||
ElMessageBox.confirm(`确定要删除用户 "${user.alias}" 吗？`, '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async () => {
|
||||
Modal.confirm({
|
||||
title: '警告',
|
||||
content: `确定要删除用户 "${user.alias}" 吗？`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await userStore.deleteUser(user.id)
|
||||
ElMessage.success('删除成功')
|
||||
message.success('删除成功')
|
||||
await handleRefresh()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '删除失败')
|
||||
message.error(error.message || '删除失败')
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
// 选择改变
|
||||
const handleSelectionChange = (selection) => {
|
||||
selectedUsers.value = selection
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 批量审批
|
||||
const handleBatchApprove = async () => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确认批量审批 ${selectedUsers.value.length} 个用户吗？`,
|
||||
'批量审批确认',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
const handleBatchApprove = () => {
|
||||
Modal.confirm({
|
||||
title: '批量审批确认',
|
||||
content: `确认批量审批 ${selectedUsers.value.length} 个用户吗？`,
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
const userIds = selectedUsers.value.map((u) => u.id)
|
||||
let successCount = 0
|
||||
let failureCount = 0
|
||||
|
||||
for (const userId of userIds) {
|
||||
try {
|
||||
await adminAPI.approveUser(userId)
|
||||
successCount++
|
||||
} catch (error) {
|
||||
failureCount++
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const userIds = selectedUsers.value.map((u) => u.id)
|
||||
let successCount = 0
|
||||
let failureCount = 0
|
||||
|
||||
for (const userId of userIds) {
|
||||
try {
|
||||
await adminAPI.approveUser(userId)
|
||||
successCount++
|
||||
} catch (error) {
|
||||
failureCount++
|
||||
}
|
||||
}
|
||||
|
||||
ElMessage.success(`批量审批完成：成功 ${successCount}，失败 ${failureCount}`)
|
||||
await handleRefresh()
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(error.message || '批量审批失败')
|
||||
}
|
||||
}
|
||||
message.success(`批量审批完成：成功 ${successCount}，失败 ${failureCount}`)
|
||||
await handleRefresh()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 批量删除
|
||||
const handleBatchDelete = async () => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除选中的 ${selectedUsers.value.length} 个用户吗？此操作不可恢复！`,
|
||||
'批量删除警告',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
const handleBatchDelete = () => {
|
||||
Modal.confirm({
|
||||
title: '批量删除警告',
|
||||
content: `确定要删除选中的 ${selectedUsers.value.length} 个用户吗？此操作不可恢复！`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
const userIds = selectedUsers.value.map((u) => u.id)
|
||||
let successCount = 0
|
||||
let failureCount = 0
|
||||
|
||||
for (const userId of userIds) {
|
||||
try {
|
||||
await userStore.deleteUser(userId)
|
||||
successCount++
|
||||
} catch (error) {
|
||||
failureCount++
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const userIds = selectedUsers.value.map((u) => u.id)
|
||||
let successCount = 0
|
||||
let failureCount = 0
|
||||
|
||||
for (const userId of userIds) {
|
||||
try {
|
||||
await userStore.deleteUser(userId)
|
||||
successCount++
|
||||
} catch (error) {
|
||||
failureCount++
|
||||
}
|
||||
}
|
||||
|
||||
ElMessage.success(`批量删除完成：成功 ${successCount}，失败 ${failureCount}`)
|
||||
await handleRefresh()
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(error.message || '批量删除失败')
|
||||
}
|
||||
}
|
||||
message.success(`批量删除完成：成功 ${successCount}，失败 ${failureCount}`)
|
||||
await handleRefresh()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@@ -519,10 +555,6 @@ onMounted(() => {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.batch-actions {
|
||||
margin-top: 15px;
|
||||
}
|
||||
@@ -540,4 +572,8 @@ onMounted(() => {
|
||||
margin-left: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user