客户转接系统

frontend/src/views/admin/components/TransferDialog.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { ElMessage } from 'element-plus'
 import { fetchSupportAdmins, transferChat, type SupportAdmin } from '@/api/chats'
+import { User } from '@element-plus/icons-vue'
 
 const props = defineProps<{
   modelValue: boolean
@@ -19,6 +20,11 @@ const submitting = ref(false)
 const admins = ref<SupportAdmin[]>([])
 const selectedAdminId = ref<number | null>(null)
 
+// 按会话数排序，空闲客服优先
+const sortedAdmins = computed(() => {
+  return [...admins.value].sort((a, b) => a.chat_count - b.chat_count)
+})
+
 watch(() => props.modelValue, (val) => {
   visible.value = val
   if (val) {
@@ -58,21 +64,38 @@ async function handleSubmit() {
     submitting.value = false
   }
 }
+
+function getStatusTag(count: number) {
+  if (count === 0) return { text: '空闲', type: 'success' }
+  if (count <= 3) return { text: '正常', type: '' }
+  return { text: '繁忙', type: 'warning' }
+}
 </script>
 
 <template>
-  <el-dialog v-model="visible" title="转接会话" width="400px">
+  <el-dialog v-model="visible" title="转接会话" width="480px">
     <div v-loading="loading" class="transfer-content">
       <p class="tip">选择要转接给的客服：</p>
       <el-radio-group v-model="selectedAdminId" class="admin-list">
         <el-radio
-          v-for="admin in admins"
+          v-for="admin in sortedAdmins"
           :key="admin.id"
           :value="admin.id"
           class="admin-item"
         >
-          <span class="admin-name">{{ admin.nickname }}</span>
-          <span class="admin-count">当前 {{ admin.chat_count }} 个会话</span>
+          <div class="admin-info">
+            <el-avatar :size="36" :icon="User" />
+            <div class="admin-detail">
+              <span class="admin-name">{{ admin.nickname }}</span>
+              <span class="admin-id">ID: {{ admin.id }}</span>
+            </div>
+          </div>
+          <div class="admin-status">
+            <el-tag :type="getStatusTag(admin.chat_count).type" size="small">
+              {{ getStatusTag(admin.chat_count).text }}
+            </el-tag>
+            <span class="admin-count">{{ admin.chat_count }} 个会话</span>
+          </div>
         </el-radio>
       </el-radio-group>
       <el-empty v-if="!loading && admins.length === 0" description="暂无可用客服" />
@@ -107,12 +130,21 @@ async function handleSubmit() {
 .admin-item {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 12px;
   height: auto;
-  padding: 12px;
+  padding: 12px 16px;
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   margin-right: 0;
+  width: 100%;
+}
+
+.admin-item :deep(.el-radio__label) {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
 }
 
 .admin-item.is-checked {
@@ -120,12 +152,44 @@ async function handleSubmit() {
   background: #ecf5ff;
 }
 
+.admin-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.admin-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
 .admin-name {
   font-weight: 500;
+  font-size: 14px;
+  color: #111827;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.admin-id {
+  color: #9ca3af;
+  font-size: 12px;
+}
+
+.admin-status {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
 }
 
 .admin-count {
   color: #9ca3af;
-  font-size: 13px;
+  font-size: 12px;
 }
 </style>