feat(account-management): make abnormal status clickable to trigger re-login
- 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
This commit is contained in:
Deroino
@@ -30,7 +30,7 @@
|
||||
<el-table :data="filteredAccounts" style="width: 100%">
|
||||
<el-table-column label="头像" width="80">
|
||||
<template #default="scope">
|
||||
<el-avatar :src="scope.row.avatar" :size="40" />
|
||||
<el-avatar :src="getDefaultAvatar(scope.row.name)" :size="40" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" width="180" />
|
||||
@@ -49,6 +49,8 @@
|
||||
<el-tag
|
||||
:type="getStatusTagType(scope.row.status)"
|
||||
effect="plain"
|
||||
:class="{'clickable-status': isStatusClickable(scope.row.status)}"
|
||||
@click="handleStatusClick(scope.row)"
|
||||
>
|
||||
<el-icon :class="scope.row.status === '验证中' ? 'is-loading' : ''" v-if="scope.row.status === '验证中'">
|
||||
<Loading />
|
||||
@@ -98,7 +100,7 @@
|
||||
<el-table :data="filteredKuaishouAccounts" style="width: 100%">
|
||||
<el-table-column label="头像" width="80">
|
||||
<template #default="scope">
|
||||
<el-avatar :src="scope.row.avatar" :size="40" />
|
||||
<el-avatar :src="getDefaultAvatar(scope.row.name)" :size="40" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" width="180" />
|
||||
@@ -117,6 +119,8 @@
|
||||
<el-tag
|
||||
:type="getStatusTagType(scope.row.status)"
|
||||
effect="plain"
|
||||
:class="{'clickable-status': isStatusClickable(scope.row.status)}"
|
||||
@click="handleStatusClick(scope.row)"
|
||||
>
|
||||
<el-icon :class="scope.row.status === '验证中' ? 'is-loading' : ''" v-if="scope.row.status === '验证中'">
|
||||
<Loading />
|
||||
@@ -166,7 +170,7 @@
|
||||
<el-table :data="filteredDouyinAccounts" style="width: 100%">
|
||||
<el-table-column label="头像" width="80">
|
||||
<template #default="scope">
|
||||
<el-avatar :src="scope.row.avatar" :size="40" />
|
||||
<el-avatar :src="getDefaultAvatar(scope.row.name)" :size="40" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" width="180" />
|
||||
@@ -185,6 +189,8 @@
|
||||
<el-tag
|
||||
:type="getStatusTagType(scope.row.status)"
|
||||
effect="plain"
|
||||
:class="{'clickable-status': isStatusClickable(scope.row.status)}"
|
||||
@click="handleStatusClick(scope.row)"
|
||||
>
|
||||
<el-icon :class="scope.row.status === '验证中' ? 'is-loading' : ''" v-if="scope.row.status === '验证中'">
|
||||
<Loading />
|
||||
@@ -234,7 +240,7 @@
|
||||
<el-table :data="filteredChannelsAccounts" style="width: 100%">
|
||||
<el-table-column label="头像" width="80">
|
||||
<template #default="scope">
|
||||
<el-avatar :src="scope.row.avatar" :size="40" />
|
||||
<el-avatar :src="getDefaultAvatar(scope.row.name)" :size="40" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" width="180" />
|
||||
@@ -253,6 +259,8 @@
|
||||
<el-tag
|
||||
:type="getStatusTagType(scope.row.status)"
|
||||
effect="plain"
|
||||
:class="{'clickable-status': isStatusClickable(scope.row.status)}"
|
||||
@click="handleStatusClick(scope.row)"
|
||||
>
|
||||
<el-icon :class="scope.row.status === '验证中' ? 'is-loading' : ''" v-if="scope.row.status === '验证中'">
|
||||
<Loading />
|
||||
@@ -302,7 +310,7 @@
|
||||
<el-table :data="filteredXiaohongshuAccounts" style="width: 100%">
|
||||
<el-table-column label="头像" width="80">
|
||||
<template #default="scope">
|
||||
<el-avatar :src="scope.row.avatar" :size="40" />
|
||||
<el-avatar :src="getDefaultAvatar(scope.row.name)" :size="40" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" width="180" />
|
||||
@@ -321,6 +329,8 @@
|
||||
<el-tag
|
||||
:type="getStatusTagType(scope.row.status)"
|
||||
effect="plain"
|
||||
:class="{'clickable-status': isStatusClickable(scope.row.status)}"
|
||||
@click="handleStatusClick(scope.row)"
|
||||
>
|
||||
<el-icon :class="scope.row.status === '验证中' ? 'is-loading' : ''" v-if="scope.row.status === '验证中'">
|
||||
<Loading />
|
||||
@@ -517,6 +527,11 @@ const getPlatformTagType = (platform) => {
|
||||
return typeMap[platform] || 'info'
|
||||
}
|
||||
|
||||
// 判断状态是否可点击（异常状态可点击）
|
||||
const isStatusClickable = (status) => {
|
||||
return status === '异常'; // 只有异常状态可点击，验证中不可点击
|
||||
}
|
||||
|
||||
// 获取状态标签类型
|
||||
const getStatusTagType = (status) => {
|
||||
if (status === '验证中') {
|
||||
@@ -528,6 +543,14 @@ const getStatusTagType = (status) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 处理状态点击事件
|
||||
const handleStatusClick = (row) => {
|
||||
if (isStatusClickable(row.status)) {
|
||||
// 触发重新登录流程
|
||||
handleReLogin(row)
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤后的账号列表
|
||||
const filteredAccounts = computed(() => {
|
||||
if (!searchKeyword.value) return accountStore.accounts
|
||||
@@ -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
|
||||
|
||||
@@ -784,7 +843,9 @@ const connectSSE = (platform, name) => {
|
||||
setTimeout(() => {
|
||||
dialogVisible.value = false
|
||||
sseConnecting.value = false
|
||||
ElMessage.success('账号添加成功')
|
||||
|
||||
// 根据是否是重新登录显示不同提示
|
||||
ElMessage.success(dialogType.value === 'edit' ? '重新登录成功' : '账号添加成功')
|
||||
|
||||
// 显示更新账号信息提示
|
||||
ElMessage({
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user