feat: feishu alert

src/views/rating/pk/list/components/PkParticipantList.vue

@@ -3,14 +3,7 @@
     <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
       <el-table-column align="left" label="投票用户" min-width="150">
         <template #default="{ row }">
-          <div class="user-info-cell">
-            <el-image v-if="row.avatar" class="user-avatar" :preview-src-list="[row.avatar]" :src="getThumbUrl(row.avatar)" />
-            <div v-else class="user-avatar-placeholder"><i class="el-icon-user" /></div>
-            <div class="user-details">
-              <div class="user-nickname">{{ row.nickname || '未知用户' }}</div>
-              <div class="user-id">{{ row.id }}</div>
-            </div>
-          </div>
+          <user-info :user="row" :user-id="row.id" />
         </template>
       </el-table-column>
     </el-table>
@@ -30,9 +23,11 @@
 <script>
   import { getParticipantList } from '@/api/rating/pk'
   import { getThumbUrl } from '@/utils/blessing'
+  import UserInfo from '@/components/UserInfo'
 
   export default {
     name: 'PkParticipantList',
+    components: { UserInfo },
     data() {
       return {
         title: '投票用户列表',
@@ -87,47 +82,3 @@
     },
   }
 </script>
-
-<style scoped>
-  .user-info-cell {
-    display: flex;
-    align-items: center;
-  }
-
-  .user-avatar,
-  .user-avatar-placeholder {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    margin-right: 10px;
-    flex-shrink: 0;
-  }
-
-  .user-avatar-placeholder {
-    background-color: #f0f2f5;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #909399;
-    font-size: 18px;
-  }
-
-  .user-details {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .user-nickname {
-    font-weight: bold;
-    color: #303133;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .user-id {
-    font-size: 12px;
-    color: #909399;
-  }
-</style>