From 7ccaab9b7500b2bac420663cdc574e11a8e45347 Mon Sep 17 00:00:00 2001 From: Deroino <117969239+Deroino@users.noreply.github.com> Date: Thu, 13 Nov 2025 11:47:03 +0800 Subject: [PATCH] feat(account-management): make abnormal status clickable to trigger re-login MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Added clickable status functionality for accounts with '异常' status - Implemented handleReLogin method to trigger login flow when clicking abnormal status - Added visual feedback with hover effects for clickable statuses - Updated SSE flow to show different success messages for re-login vs new account - Fixed account data handling to properly work with store objects - Added dynamic default avatars for accounts --- sau_frontend/src/views/AccountManagement.vue | 134 +++++++++++++++---- 1 file changed, 110 insertions(+), 24 deletions(-) diff --git a/sau_frontend/src/views/AccountManagement.vue b/sau_frontend/src/views/AccountManagement.vue index 48e76f9..dad1efc 100644 --- a/sau_frontend/src/views/AccountManagement.vue +++ b/sau_frontend/src/views/AccountManagement.vue @@ -30,7 +30,7 @@ @@ -49,6 +49,8 @@ @@ -98,7 +100,7 @@ @@ -117,6 +119,8 @@ @@ -166,7 +170,7 @@ @@ -185,6 +189,8 @@ @@ -234,7 +240,7 @@ @@ -253,6 +259,8 @@ @@ -302,7 +310,7 @@ @@ -321,6 +329,8 @@ @@ -517,6 +527,11 @@ const getPlatformTagType = (platform) => { return typeMap[platform] || 'info' } +// 判断状态是否可点击（异常状态可点击） +const isStatusClickable = (status) => { + return status === '异常'; // 只有异常状态可点击，验证中不可点击 +} + // 获取状态标签类型 const getStatusTagType = (status) => { if (status === '验证中') { @@ -528,10 +543,18 @@ const getStatusTagType = (status) => { } } +// 处理状态点击事件 +const handleStatusClick = (row) => { + if (isStatusClickable(row.status)) { + // 触发重新登录流程 + handleReLogin(row) + } +} + // 过滤后的账号列表 const filteredAccounts = computed(() => { if (!searchKeyword.value) return accountStore.accounts - return accountStore.accounts.filter(account => + return accountStore.accounts.filter(account => account.name.includes(searchKeyword.value) ) }) @@ -601,7 +624,12 @@ const handleAddAccount = () => { // 编辑账号 const handleEdit = (row) => { dialogType.value = 'edit' - Object.assign(accountForm, { ...row }) + Object.assign(accountForm, { + id: row.id, + name: row.name, + platform: row.platform, + status: row.status + }) dialogVisible.value = true } @@ -712,6 +740,37 @@ const handleUploadCookie = (row) => { input.click() } +// 重新登录账号 +const handleReLogin = (row) => { + // 设置表单信息 + dialogType.value = 'edit' + Object.assign(accountForm, { + id: row.id, + name: row.name, + platform: row.platform, + status: row.status + }) + + // 重置SSE状态 + sseConnecting.value = false + qrCodeData.value = '' + loginStatus.value = '' + + // 显示对话框 + dialogVisible.value = true + + // 立即开始登录流程 + setTimeout(() => { + connectSSE(row.platform, row.name) + }, 300) +} + +// 获取默认头像 +const getDefaultAvatar = (name) => { + // 使用简单的默认头像，可以基于用户名生成不同的颜色 + return `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=random` +} + // SSE事件源对象 let eventSource = null @@ -727,12 +786,12 @@ const closeSSEConnection = () => { const connectSSE = (platform, name) => { // 关闭可能存在的连接 closeSSEConnection() - + // 设置连接状态 sseConnecting.value = true qrCodeData.value = '' loginStatus.value = '' - + // 获取平台类型编号 const platformTypeMap = { '小红书': '1', @@ -740,20 +799,20 @@ const connectSSE = (platform, name) => { '抖音': '3', '快手': '4' } - + const type = platformTypeMap[platform] || '1' - + // 创建SSE连接 const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5409' const url = `${baseUrl}/login?type=${type}&id=${encodeURIComponent(name)}` - + eventSource = new EventSource(url) - + // 监听消息 eventSource.onmessage = (event) => { const data = event.data console.log('SSE消息:', data) - + // 如果还没有二维码数据，且数据长度较长，认为是二维码 if (!qrCodeData.value && data.length > 100) { try { @@ -769,30 +828,32 @@ const connectSSE = (platform, name) => { } catch (error) { console.error('处理二维码数据出错:', error) } - } + } // 如果收到状态码 else if (data === '200' || data === '500') { loginStatus.value = data - + // 如果登录成功 if (data === '200') { setTimeout(() => { // 关闭连接 closeSSEConnection() - + // 1秒后关闭对话框并开始刷新 setTimeout(() => { dialogVisible.value = false sseConnecting.value = false - ElMessage.success('账号添加成功') - + + // 根据是否是重新登录显示不同提示 + ElMessage.success(dialogType.value === 'edit' ? '重新登录成功' : '账号添加成功') + // 显示更新账号信息提示 ElMessage({ type: 'info', message: '正在同步账号信息...', duration: 0 }) - + // 触发刷新操作 fetchAccounts().then(() => { // 刷新完成后关闭提示 @@ -804,7 +865,7 @@ const connectSSE = (platform, name) => { } else { // 登录失败，关闭连接 closeSSEConnection() - + // 2秒后重置状态，允许重试 setTimeout(() => { sseConnecting.value = false @@ -814,7 +875,7 @@ const connectSSE = (platform, name) => { } } } - + // 监听错误 eventSource.onerror = (error) => { console.error('SSE连接错误:', error) @@ -834,14 +895,29 @@ const submitAccountForm = () => { } else { // 编辑账号逻辑 try { + // 将平台名称转换为类型数字 + const platformTypeMap = { + '快手': 1, + '抖音': 2, + '视频号': 3, + '小红书': 4 + }; + const type = platformTypeMap[accountForm.platform] || 1; + const res = await accountApi.updateAccount({ id: accountForm.id, - type: Number(accountForm.platform === '快手' ? 1 : accountForm.platform === '抖音' ? 2 : accountForm.platform === '视频号' ? 3 : 4), + type: type, userName: accountForm.name }) if (res.code === 200) { // 更新状态管理中的账号 - accountStore.updateAccount(accountForm.id, accountForm) + const updatedAccount = { + id: accountForm.id, + name: accountForm.name, + platform: accountForm.platform, + status: accountForm.status // Keep the existing status + }; + accountStore.updateAccount(accountForm.id, updatedAccount) ElMessage.success('更新成功') dialogVisible.value = false // 刷新账号列表 @@ -929,6 +1005,16 @@ onBeforeUnmount(() => { } // 二维码容器样式 + .clickable-status { + cursor: pointer; + transition: all 0.3s; + + &:hover { + transform: scale(1.05); + box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); + } + } + .qrcode-container { margin-top: 20px; display: flex;