yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加客服在线状态和聊天粘贴图片功能

Browse Source 
**客服在线状态：**
- 后端：添加 admin_users.support_status 字段（online/offline/busy）
- 接口：PUT /admin/me/support-status 更新状态
- 前端：管理员顶部导航显示状态切换器（仅客服权限可见）
- 转接对话框显示客服在线状态和智能排序（在线优先）

**聊天粘贴图片：**
- 用户端、移动端、管理端聊天输入框支持 Ctrl+V/Cmd+V 直接粘贴图片
- 自动调用图片压缩和上传逻辑，与文件选择上传保持一致
- 最多支持粘贴9张图片

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
yml
2026-06-05 19:23:34 +08:00
co-authored by Claude Opus 4.6
parent b380817940
commit 59093f8fd5
18 changed files with 308 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/internal/model/admin_user.go
+1
View File
@@ -8,6 +8,7 @@ type AdminUser struct {
PasswordHash string `gorm:"size:255;not null" json:"-"`
Nickname string `gorm:"size:64;not null;default:''" json:"nickname"`
Status string `gorm:"size:32;not null;default:'active'" json:"status"`
SupportStatus string `gorm:"size:16;not null;default:'offline';index" json:"support_status"`
LastLoginAt *time.Time `json:"last_login_at"`
CreatedAt time.Time `json:"created_at"`
UpdatedAt time.Time `json:"updated_at"`
backend/internal/modules/adminauth/dto.go
+5
View File
@@ -11,6 +11,7 @@ type AdminDTO struct {
Username string `json:"username"`
Nickname string `json:"nickname"`
Status string `json:"status"`
SupportStatus string `json:"support_status"`
Roles []RoleDTO `json:"roles"`
Permissions []string `json:"permissions"`
LastLoginAt *time.Time `json:"last_login_at"`
@@ -39,3 +40,7 @@ type CaptchaDTO struct {
Image string `json:"image"`
ExpiresIn int64 `json:"expires_in"`
}
type UpdateSupportStatusRequest struct {
Status string `json:"status" binding:"required,oneof=online offline busy"`
}
backend/internal/modules/adminauth/handler.go
+27
View File
@@ -65,6 +65,33 @@ func (h *Handler) Logout(c *gin.Context) {
response.OK(c, gin.H{"logged_out": true})
}
func (h *Handler) UpdateSupportStatus(c *gin.Context) {
adminID, ok := currentAdminID(c)
if !ok {
response.Unauthorized(c, "缺少管理员上下文")
return
}
var req UpdateSupportStatusRequest
if err := c.ShouldBindJSON(&req); err != nil {
response.BadRequest(c, "状态值无效，必须是 online、offline 或 busy")
return
}
if err := h.service.UpdateSupportStatus(adminID, req.Status); err != nil {
writeAdminAuthError(c, err)
return
}
response.OK(c, gin.H{"updated": true, "support_status": req.Status})
}
func currentAdminID(c *gin.Context) (uint64, bool) {
value, ok := c.Get(middleware.ContextAdminID)
if !ok {
return 0, false
}
adminID, ok := value.(uint64)
return adminID, ok
}
type AdminRefreshRequest struct {
RefreshToken string `json:"refresh_token" binding:"required"`
}
backend/internal/modules/adminauth/repository.go
+13
View File
@@ -126,6 +126,18 @@ func (r *Repository) FindByID(id uint64) (*AdminDTO, error) {
return &dto, nil
}
func (r *Repository) UpdateSupportStatus(adminID uint64, status string) error {
if r.db == nil {
return ErrDependencyUnavailable
}
if status != "online" && status != "offline" && status != "busy" {
return errors.New("invalid support status")
}
return r.db.Model(&model.AdminUser{}).
Where("id = ?", adminID).
Update("support_status", status).Error
}
func (r *Repository) ensureDefaultAdmin() error {
var count int64
if err := r.db.Model(&model.AdminUser{}).Count(&count).Error; err != nil {
@@ -166,6 +178,7 @@ func toDTO(admin model.AdminUser) AdminDTO {
Username: admin.Username,
Nickname: admin.Nickname,
Status: admin.Status,
SupportStatus: admin.SupportStatus,
LastLoginAt: admin.LastLoginAt,
}
}
backend/internal/modules/adminauth/service.go
+7
View File
@@ -61,3 +61,10 @@ func (s *Service) Me(adminID uint64) (*AdminDTO, error) {
}
return s.repo.FindByID(adminID)
}
func (s *Service) UpdateSupportStatus(adminID uint64, status string) error {
if s.repo == nil {
return ErrDependencyUnavailable
}
return s.repo.UpdateSupportStatus(adminID, status)
}
backend/internal/modules/chat/dto.go
+1
View File
@@ -67,6 +67,7 @@ type UpdateRemarkRequest struct {
type SupportAdminDTO struct {
ID uint64 `json:"id"`
Nickname string `json:"nickname"`
SupportStatus string `json:"support_status"`
ChatCount int64 `json:"chat_count"`
}
backend/internal/modules/chat/repository.go
+3 -1
View File
@@ -779,10 +779,11 @@ func (r *Repository) GetAvailableSupportAdmins() ([]SupportAdminDTO, error) {
type adminRow struct {
ID uint64
Nickname string
SupportStatus string
}
var admins []adminRow
err := r.db.Table("admin_users AS au").
Select("DISTINCT au.id, COALESCE(NULLIF(au.nickname, ''), au.username) AS nickname").
Select("DISTINCT au.id, COALESCE(NULLIF(au.nickname, ''), au.username) AS nickname, au.support_status").
Joins("JOIN admin_user_roles AS aur ON aur.admin_user_id = au.id").
Joins("JOIN role_permissions AS rp ON rp.role_id = aur.role_id").
Joins("JOIN permissions AS p ON p.id = rp.permission_id").
@@ -819,6 +820,7 @@ func (r *Repository) GetAvailableSupportAdmins() ([]SupportAdminDTO, error) {
result[i] = SupportAdminDTO{
ID: a.ID,
Nickname: a.Nickname,
SupportStatus: a.SupportStatus,
ChatCount: loadMap[a.ID],
}
}
backend/internal/router/router.go
+1
View File
@@ -317,6 +317,7 @@ func New(cfg config.Config, deps Dependencies, logger *zap.Logger) *gin.Engine {
adminRoutes := api.Group("/admin", requireAdmin)
{
adminRoutes.GET("/me", adminAuthHandler.Me)
adminRoutes.PUT("/me/support-status", adminAuthHandler.UpdateSupportStatus)
adminRoutes.POST("/auth/logout", adminAuthHandler.Logout)
adminRoutes.POST("/files/upload", fileHandler.Upload)
adminRoutes.GET("/dashboard", requirePerm("dashboard:view"), adminDashboardHandler.Summary)
backend/migrations/000004_add_support_status.sql
+8
View File
@@ -0,0 +1,8 @@
-- 添加客服在线状态字段
-- support_status: online(在线), offline(离线), busy(忙碌)
ALTER TABLE admin_users
ADD COLUMN support_status VARCHAR(16) NOT NULL DEFAULT 'offline' COMMENT '客服状态: online在线, offline离线, busy忙碌';
-- 为查询客服状态添加索引
CREATE INDEX idx_admin_users_support_status ON admin_users(support_status);
frontend/src/features/admin/api/adminAuth.ts
+8
View File
@@ -16,6 +16,7 @@ export interface AdminUser {
username: string
nickname: string
status: UserStatus
support_status: 'online' | 'offline' | 'busy'
roles: AdminRole[]
permissions: string[]
last_login_at?: string
@@ -64,6 +65,13 @@ export async function logoutAdmin() {
return data.data
}
export async function updateSupportStatus(status: 'online' | 'offline' | 'busy') {
const { data } = await apiClient.put<ApiResponse<{ updated: boolean; support_status: string }>>('/admin/me/support-status', {
status,
})
return data.data
}
/** Manually refresh admin token (uses raw axios to avoid interceptor recursion) */
export async function refreshAdminSession() {
const refreshToken = getRefreshToken('admin')
frontend/src/features/admin/components/TransferDialog.vue
+54 -5
View File
@@ -20,11 +20,37 @@ 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)
return [...admins.value].sort((a, b) => {
// 在线状态优先级：online > busy > offline
const statusPriority: Record<string, number> = { online: 0, busy: 1, offline: 2 }
const aPriority = statusPriority[a.support_status] ?? 2
const bPriority = statusPriority[b.support_status] ?? 2
if (aPriority !== bPriority) return aPriority - bPriority
// 同状态下按会话数排序
return a.chat_count - b.chat_count
})
})
function getSupportStatusLabel(status: string) {
const labels: Record<string, string> = {
online: '在线',
offline: '离线',
busy: '忙碌',
}
return labels[status] || '未知'
}
function getSupportStatusColor(status: string) {
const colors: Record<string, string> = {
online: '#10b981',
offline: '#9ca3af',
busy: '#f59e0b',
}
return colors[status] || '#9ca3af'
}
watch(() => props.modelValue, (val) => {
visible.value = val
if (val) {
@@ -84,16 +110,19 @@ function getStatusTag(count: number) {
class="admin-item"
>
<div class="admin-info">
<div class="admin-avatar-wrap">
<el-avatar :size="36" :icon="User" />
<span class="status-indicator" :style="{ backgroundColor: getSupportStatusColor(admin.support_status) }"></span>
</div>
<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="support-status" :style="{ color: getSupportStatusColor(admin.support_status) }">
{{ getSupportStatusLabel(admin.support_status) }}
</span>
<span class="admin-count">{{ admin.chat_count }} 个会话</span>
</div>
</el-radio>
@@ -159,6 +188,21 @@ function getStatusTag(count: number) {
min-width: 0;
}
.admin-avatar-wrap {
position: relative;
flex-shrink: 0;
}
.status-indicator {
position: absolute;
right: 0;
bottom: 0;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #fff;
}
.admin-detail {
display: flex;
flex-direction: column;
@@ -188,6 +232,11 @@ function getStatusTag(count: number) {
flex-shrink: 0;
}
.support-status {
font-size: 13px;
font-weight: 600;
}
.admin-count {
color: #9ca3af;
font-size: 12px;
frontend/src/features/admin/index.ts
+1
View File
@@ -15,6 +15,7 @@ export {
logoutAdmin,
refreshAdminSession,
fetchAdminMe,
updateSupportStatus,
type AdminUser,
type AdminTokenPair,
type AdminLoginData,
frontend/src/features/admin/views/AdminChatsView.vue
+18
View File
@@ -174,6 +174,23 @@ async function handleImageChange(event: Event) {
const files = Array.from(input.files || [])
input.value = ''
if (files.length === 0) return
await uploadImages(files)
}
async function handlePaste(event: ClipboardEvent) {
const items = Array.from(event.clipboardData?.items || [])
const imageFiles = items
.filter(item => item.type.startsWith('image/'))
.map(item => item.getAsFile())
.filter(Boolean) as File[]
if (imageFiles.length > 0) {
event.preventDefault()
await uploadImages(imageFiles)
}
}
async function uploadImages(files: File[]) {
const slots = 9 - attachments.value.length
if (slots <= 0) {
ElMessage.warning('每条消息最多发送 9 张图片')
@@ -426,6 +443,7 @@ function getSupportName(item: ChatConversation) {
show-word-limit
placeholder="输入客服回复"
@keydown.enter.exact.prevent="handleSend"
@paste="handlePaste"
/>
<el-button type="primary" :loading="sending" :disabled="!canSend || uploading" @click="handleSend">发送</el-button>
</div>
frontend/src/features/chats/api/chats.ts
+1
View File
@@ -122,6 +122,7 @@ export async function markAdminChatRead(id: number) {
export interface SupportAdmin {
id: number
nickname: string
support_status: 'online' | 'offline' | 'busy'
chat_count: number
}
frontend/src/features/chats/views/ChatView.vue
+18
View File
@@ -139,6 +139,23 @@ async function handleImageChange(event: Event) {
const files = Array.from(input.files || [])
input.value = ''
if (files.length === 0) return
await uploadImages(files)
}
async function handlePaste(event: ClipboardEvent) {
const items = Array.from(event.clipboardData?.items || [])
const imageFiles = items
.filter(item => item.type.startsWith('image/'))
.map(item => item.getAsFile())
.filter(Boolean) as File[]
if (imageFiles.length > 0) {
event.preventDefault()
await uploadImages(imageFiles)
}
}
async function uploadImages(files: File[]) {
const slots = 9 - attachments.value.length
if (slots <= 0) {
ElMessage.warning('每条消息最多发送 9 张图片')
@@ -288,6 +305,7 @@ function handleKeydown(e: KeyboardEvent) {
placeholder="发送消息..."
resize="none"
@keydown="handleKeydown"
@paste="handlePaste"
/>
<div class="composer-actions">
<span class="composer-hint">Enter 发送，Shift+Enter 换行</span>
frontend/src/features/chats/views/MobileChatView.vue
+18
View File
@@ -137,6 +137,23 @@ async function handleImageChange(event: Event) {
const files = Array.from(input.files || [])
input.value = ''
if (files.length === 0) return
await uploadImages(files)
}
async function handlePaste(event: ClipboardEvent) {
const items = Array.from(event.clipboardData?.items || [])
const imageFiles = items
.filter(item => item.type.startsWith('image/'))
.map(item => item.getAsFile())
.filter(Boolean) as File[]
if (imageFiles.length > 0) {
event.preventDefault()
await uploadImages(imageFiles)
}
}
async function uploadImages(files: File[]) {
const slots = 9 - attachments.value.length
if (slots <= 0) {
showToast('每条消息最多发送 9 张图片')
@@ -263,6 +280,7 @@ function senderLabel(message: ChatMessage) {
rows="1"
placeholder="发送消息"
@keydown.enter.prevent="handleSend"
@paste="handlePaste"
/>
<button class="send-btn" type="button" :disabled="!canSend || sending || uploading" @click="handleSend">
<van-icon name="guide-o" :size="20" />
frontend/src/layouts/AdminLayout.vue
+85 -1
View File
@@ -20,13 +20,14 @@ import { ElMessage } from 'element-plus'
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { logoutAdmin } from '@/features/admin'
import { logoutAdmin, updateSupportStatus } from '@/features/admin'
import { useAdminSessionStore } from '@/stores/adminSession'
const router = useRouter()
const route = useRoute()
const adminSession = useAdminSessionStore()
const isCollapsed = ref(false)
const updatingStatus = ref(false)
interface NavItem {
label: string
@@ -60,6 +61,34 @@ const navItems = computed(() => {
const activeMenu = computed(() => route.path)
const adminName = computed(() => adminSession.nickname || adminSession.username || '管理员')
const supportStatus = computed(() => adminSession.supportStatus || 'offline')
const hasChatPermission = computed(() => adminSession.hasPermission('chat:view'))
const statusLabels: Record<string, string> = {
online: '在线',
offline: '离线',
busy: '忙碌',
}
const statusColors: Record<string, string> = {
online: '#10b981',
offline: '#9ca3af',
busy: '#f59e0b',
}
async function handleStatusChange(status: 'online' | 'offline' | 'busy') {
if (updatingStatus.value) return
updatingStatus.value = true
try {
await updateSupportStatus(status)
adminSession.setSupportStatus(status)
ElMessage.success(`已切换为${statusLabels[status]}`)
} catch {
ElMessage.error('状态更新失败')
} finally {
updatingStatus.value = false
}
}
async function handleLogout() {
try {
@@ -110,6 +139,28 @@ async function handleLogout() {
</el-breadcrumb>
</div>
<div class="topbar-right">
<el-dropdown v-if="hasChatPermission" trigger="click" @command="handleStatusChange" :disabled="updatingStatus">
<span class="status-badge" :style="{ borderColor: statusColors[supportStatus] }">
<span class="status-dot" :style="{ backgroundColor: statusColors[supportStatus] }"></span>
<span class="status-text">{{ statusLabels[supportStatus] }}</span>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="online">
<span class="status-dot" style="background-color: #10b981;"></span>
在线
</el-dropdown-item>
<el-dropdown-item command="busy">
<span class="status-dot" style="background-color: #f59e0b;"></span>
忙碌
</el-dropdown-item>
<el-dropdown-item command="offline">
<span class="status-dot" style="background-color: #9ca3af;"></span>
离线
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown trigger="click">
<span class="user-info">
<el-avatar :size="32" :icon="User" />
@@ -256,6 +307,39 @@ async function handleLogout() {
.topbar-right {
display: flex;
align-items: center;
gap: 16px;
}
.status-badge {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid;
border-radius: 16px;
cursor: pointer;
transition: all 0.2s;
}
.status-badge:hover {
background-color: #f5f7fa;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.status-text {
font-size: 13px;
color: #606266;
font-weight: 500;
}
:deep(.el-dropdown-menu__item .status-dot) {
margin-right: 8px;
}
.user-info {
frontend/src/stores/adminSession.ts
+10
View File
@@ -10,6 +10,7 @@ export const useAdminSessionStore = defineStore('adminSession', {
adminId: Number(localStorage.getItem('admin_id') || 0),
username: localStorage.getItem('admin_username') || '',
nickname: '',
supportStatus: (localStorage.getItem('admin_support_status') || 'offline') as 'online' | 'offline' | 'busy',
roles: [] as AdminRole[],
permissions: [] as string[],
}),
@@ -41,15 +42,18 @@ export const useAdminSessionStore = defineStore('adminSession', {
this.adminId = 0
this.username = ''
this.nickname = ''
this.supportStatus = 'offline'
this.roles = []
this.permissions = []
clearAuthStorage('admin')
localStorage.removeItem('admin_support_status')
},
syncFromStorage() {
this.token = getAccessToken('admin')
this.refreshToken = getRefreshToken('admin')
this.adminId = Number(localStorage.getItem('admin_id') || 0)
this.username = localStorage.getItem('admin_username') || ''
this.supportStatus = (localStorage.getItem('admin_support_status') || 'offline') as 'online' | 'offline' | 'busy'
},
applySession(admin: AdminUser, accessToken: string, refreshToken: string) {
this.token = accessToken
@@ -64,10 +68,16 @@ export const useAdminSessionStore = defineStore('adminSession', {
this.adminId = admin.id
this.username = admin.username
this.nickname = admin.nickname
this.supportStatus = admin.support_status || 'offline'
this.roles = admin.roles || []
this.permissions = admin.permissions || []
localStorage.setItem('admin_id', String(admin.id))
localStorage.setItem('admin_username', admin.username)
localStorage.setItem('admin_support_status', admin.support_status || 'offline')
},
setSupportStatus(status: 'online' | 'offline' | 'busy') {
this.supportStatus = status
localStorage.setItem('admin_support_status', status)
},
},
})