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

sau_frontend/src/views/AccountManagement.vue

@@ -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;