1446 lines
67 KiB
TypeScript
1446 lines
67 KiB
TypeScript
import { useEffect, useState, type ReactNode } from 'react'
|
||
import { Form, Input, Switch, Select, Button, message, Spin, Empty, Modal, Popconfirm, TimePicker, Upload } from 'antd'
|
||
import {
|
||
LinkOutlined, WechatOutlined, PhoneOutlined, MailOutlined, MobileOutlined, CopyOutlined,
|
||
PlusOutlined, SettingOutlined, ApiOutlined, TeamOutlined, UserSwitchOutlined,
|
||
MessageOutlined, ClockCircleOutlined, BellOutlined, GlobalOutlined,
|
||
EditOutlined, StopOutlined, CheckCircleOutlined, DeleteOutlined,
|
||
ArrowUpOutlined, ArrowDownOutlined, PictureOutlined, TagsOutlined,
|
||
} from '@ant-design/icons'
|
||
import dayjs, { type Dayjs } from 'dayjs'
|
||
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
||
import {
|
||
createChannel, createCustomerTag, createStaff, deleteCustomerTag, deleteStaff,
|
||
getChannels, getCustomerTags, getStaff, getTenantSettings,
|
||
updateChannel, updateCustomerTag, updateStaff, updateTenantSettings, uploadImage,
|
||
type Channel, type CustomerTag, type StaffUser, type TenantSettings, type WorkHours, type WelcomeSegment,
|
||
} from '@/services/api'
|
||
import { useAuth, usePermission } from '@/stores/auth'
|
||
import MarkdownEditor from '@/components/common/MarkdownEditor'
|
||
import RichTextEditor from '@/components/common/RichTextEditor'
|
||
|
||
const tagColorPresets: { value: string; label: string; bg: string; color: string }[] = [
|
||
{ value: 'amber', label: '琥珀', bg: '#fef3c7', color: '#92400e' },
|
||
{ value: 'green', label: '绿色', bg: '#f0fdf4', color: '#16a34a' },
|
||
{ value: 'blue', label: '蓝色', bg: '#dbeafe', color: '#2563eb' },
|
||
{ value: 'cyan', label: '青色', bg: '#ecfeff', color: '#0891b2' },
|
||
{ value: 'violet', label: '紫色', bg: '#f3e8ff', color: '#7c3aed' },
|
||
{ value: 'rose', label: '玫红', bg: '#fff1f2', color: '#e11d48' },
|
||
{ value: 'orange', label: '橙色', bg: '#fffbeb', color: '#d97706' },
|
||
{ value: 'slate', label: '灰蓝', bg: '#f1f5f9', color: '#475569' },
|
||
]
|
||
|
||
function tagColorStyle(color: string): { bg: string; color: string } {
|
||
const preset = tagColorPresets.find(p => p.value === color)
|
||
if (preset) return { bg: preset.bg, color: preset.color }
|
||
if (color?.startsWith('#')) return { bg: `${color}22`, color }
|
||
return { bg: '#f1f5f9', color: '#475569' }
|
||
}
|
||
|
||
dayjs.extend(customParseFormat)
|
||
|
||
const typeMeta: Record<string, { icon: ReactNode; label: string; desc: string }> = {
|
||
web: { icon: <GlobalOutlined />, label: '网页聊天', desc: '嵌入官网或任意网页的在线客服窗口' },
|
||
wechat: { icon: <WechatOutlined />, label: '微信公众号', desc: '对接微信公众号客服消息（预留）' },
|
||
app: { icon: <MobileOutlined />, label: 'APP 内嵌', desc: '移动端 App 内嵌客服（预留）' },
|
||
phone: { icon: <PhoneOutlined />, label: '电话客服', desc: '电话进线与回拨（预留）' },
|
||
email: { icon: <MailOutlined />, label: '邮件工单', desc: '邮件自动创建工单（预留）' },
|
||
}
|
||
|
||
const weekDays: { key: string; label: string }[] = [
|
||
{ key: 'monday', label: '周一' },
|
||
{ key: 'tuesday', label: '周二' },
|
||
{ key: 'wednesday', label: '周三' },
|
||
{ key: 'thursday', label: '周四' },
|
||
{ key: 'friday', label: '周五' },
|
||
{ key: 'saturday', label: '周六' },
|
||
{ key: 'sunday', label: '周日' },
|
||
]
|
||
|
||
/** 工作日模式：休息 / 全天 / 自定义时段 */
|
||
type WorkMode = 'rest' | 'allday' | 'custom'
|
||
|
||
const workModeOptions: { value: WorkMode; label: string }[] = [
|
||
{ value: 'rest', label: '休息' },
|
||
{ value: 'allday', label: '全天' },
|
||
{ value: 'custom', label: '自定义时段' },
|
||
]
|
||
|
||
/** 快捷时段预设（选中后填入自定义时间范围） */
|
||
const workRangePresets: { label: string; start: string; end: string }[] = [
|
||
{ label: '09:00-18:00', start: '09:00', end: '18:00' },
|
||
{ label: '08:00-17:00', start: '08:00', end: '17:00' },
|
||
{ label: '09:00-12:00', start: '09:00', end: '12:00' },
|
||
{ label: '13:00-18:00', start: '13:00', end: '18:00' },
|
||
{ label: '10:00-22:00', start: '10:00', end: '22:00' },
|
||
]
|
||
|
||
function parseWorkSlot(slot?: string): { mode: WorkMode; range?: [Dayjs, Dayjs] } {
|
||
const s = (slot || '').trim()
|
||
if (!s || s === '休息') return { mode: 'rest' }
|
||
if (s === '全天') return { mode: 'allday' }
|
||
const m = s.match(/^(\d{1,2}:\d{2})\s*-\s*(\d{1,2}:\d{2})$/)
|
||
if (m) {
|
||
const start = dayjs(m[1], 'HH:mm')
|
||
const end = dayjs(m[2], 'HH:mm')
|
||
if (start.isValid() && end.isValid()) {
|
||
return { mode: 'custom', range: [start, end] }
|
||
}
|
||
}
|
||
return { mode: 'rest' }
|
||
}
|
||
|
||
function encodeWorkSlot(mode: WorkMode | undefined, range?: [Dayjs, Dayjs] | null): string {
|
||
if (mode === 'allday') return '全天'
|
||
if (mode === 'custom' && range?.[0]?.isValid() && range?.[1]?.isValid()) {
|
||
return `${range[0].format('HH:mm')}-${range[1].format('HH:mm')}`
|
||
}
|
||
return ''
|
||
}
|
||
|
||
function defaultCustomRange(): [Dayjs, Dayjs] {
|
||
return [dayjs('09:00', 'HH:mm'), dayjs('18:00', 'HH:mm')]
|
||
}
|
||
|
||
const MAX_WELCOME_SEGMENTS = 10
|
||
|
||
function normalizeWelcomeFromSettings(data: TenantSettings): WelcomeSegment[] {
|
||
if (Array.isArray(data.welcome_messages) && data.welcome_messages.length > 0) {
|
||
return data.welcome_messages.map(s => ({
|
||
type: s.type === 'image' ? 'image' : 'text',
|
||
content: s.content || '',
|
||
}))
|
||
}
|
||
if (data.welcome_message?.trim()) {
|
||
return [{ type: 'text', content: data.welcome_message.trim() }]
|
||
}
|
||
return [{ type: 'text', content: '您好！欢迎咨询，请问有什么可以帮您？' }]
|
||
}
|
||
|
||
const roleLabel: Record<string, string> = {
|
||
admin: '管理员',
|
||
supervisor: '主管',
|
||
agent: '客服',
|
||
}
|
||
|
||
const statusLabel: Record<string, { text: string; className: string }> = {
|
||
online: { text: '在线', className: 'bg-emerald-50 text-emerald-700' },
|
||
offline: { text: '离线', className: 'bg-neutral-100 text-neutral-600' },
|
||
busy: { text: '忙碌', className: 'bg-amber-50 text-amber-700' },
|
||
disabled: { text: '已禁用', className: 'bg-red-50 text-red-600' },
|
||
}
|
||
|
||
const tabItems: { key: string; label: string; desc: string; icon: ReactNode }[] = [
|
||
{ key: 'basic', label: '基本设置', desc: '租户展示名称、默认昵称与时区', icon: <SettingOutlined /> },
|
||
{ key: 'channels', label: '渠道管理', desc: '配置客户服务接入渠道与嵌入代码', icon: <ApiOutlined /> },
|
||
{ key: 'staff', label: '坐席账号', desc: '管理客服/主管账号与坐席配额', icon: <UserSwitchOutlined /> },
|
||
{ key: 'assignment', label: '客服分配规则', desc: '自动分配策略与并发上限', icon: <TeamOutlined /> },
|
||
{ key: 'tags', label: '客户标签', desc: '维护标签库，坐席为客户打标时选择', icon: <TagsOutlined /> },
|
||
{ key: 'autoreply', label: '自动回复', desc: '多段欢迎语（含图片）与离线留言提示', icon: <MessageOutlined /> },
|
||
{ key: 'worktime', label: '工作时间', desc: '在线服务时段与非工作时间提示', icon: <ClockCircleOutlined /> },
|
||
{ key: 'notify', label: '通知设置', desc: '新会话、留言与日报偏好', icon: <BellOutlined /> },
|
||
]
|
||
|
||
const Settings = () => {
|
||
const { user } = useAuth()
|
||
const isAdmin = usePermission('settings.basic')
|
||
const canViewStaff = usePermission('settings.staff')
|
||
|
||
const [activeTab, setActiveTab] = useState('basic')
|
||
const [basicForm] = Form.useForm()
|
||
const [autoReplyForm] = Form.useForm()
|
||
const [workForm] = Form.useForm()
|
||
const [notifyForm] = Form.useForm()
|
||
const [assignForm] = Form.useForm()
|
||
const [staffForm] = Form.useForm()
|
||
const [channels, setChannels] = useState<Channel[]>([])
|
||
const [settings, setSettings] = useState<TenantSettings | null>(null)
|
||
const [loadingChannels, setLoadingChannels] = useState(false)
|
||
const [loadingSettings, setLoadingSettings] = useState(false)
|
||
const [saving, setSaving] = useState(false)
|
||
const [togglingId, setTogglingId] = useState<number | null>(null)
|
||
|
||
const [staffList, setStaffList] = useState<StaffUser[]>([])
|
||
const [seatLimit, setSeatLimit] = useState(0)
|
||
const [seatUsed, setSeatUsed] = useState(0)
|
||
const [loadingStaff, setLoadingStaff] = useState(false)
|
||
const [staffModalOpen, setStaffModalOpen] = useState(false)
|
||
const [editingStaff, setEditingStaff] = useState<StaffUser | null>(null)
|
||
const [savingStaff, setSavingStaff] = useState(false)
|
||
const [welcomeSegments, setWelcomeSegments] = useState<WelcomeSegment[]>([
|
||
{ type: 'text', content: '您好！欢迎咨询，请问有什么可以帮您？' },
|
||
])
|
||
const [uploadingWelcomeIdx, setUploadingWelcomeIdx] = useState<number | null>(null)
|
||
const [customerTags, setCustomerTags] = useState<CustomerTag[]>([])
|
||
const [loadingTags, setLoadingTags] = useState(false)
|
||
const [tagModalOpen, setTagModalOpen] = useState(false)
|
||
const [editingTag, setEditingTag] = useState<CustomerTag | null>(null)
|
||
const [savingTag, setSavingTag] = useState(false)
|
||
const [tagForm] = Form.useForm()
|
||
|
||
const currentTab = tabItems.find(t => t.key === activeTab) || tabItems[0]
|
||
|
||
const loadCustomerTags = async () => {
|
||
setLoadingTags(true)
|
||
try {
|
||
const res = await getCustomerTags()
|
||
setCustomerTags(Array.isArray(res.data) ? res.data : [])
|
||
} catch (e) {
|
||
setCustomerTags([])
|
||
message.error(e instanceof Error ? e.message : '加载标签失败')
|
||
} finally {
|
||
setLoadingTags(false)
|
||
}
|
||
}
|
||
|
||
const loadStaff = async () => {
|
||
setLoadingStaff(true)
|
||
try {
|
||
const res = await getStaff()
|
||
setStaffList(Array.isArray(res.data?.list) ? res.data.list : [])
|
||
setSeatLimit(res.data?.seat_limit ?? 0)
|
||
setSeatUsed(res.data?.seat_used ?? 0)
|
||
} catch (e) {
|
||
setStaffList([])
|
||
message.error(e instanceof Error ? e.message : '加载坐席失败')
|
||
} finally {
|
||
setLoadingStaff(false)
|
||
}
|
||
}
|
||
|
||
const loadChannels = async () => {
|
||
setLoadingChannels(true)
|
||
try {
|
||
const res = await getChannels()
|
||
setChannels(Array.isArray(res.data) ? res.data : [])
|
||
} catch {
|
||
setChannels([])
|
||
message.error('加载渠道失败')
|
||
} finally {
|
||
setLoadingChannels(false)
|
||
}
|
||
}
|
||
|
||
const loadSettings = async () => {
|
||
setLoadingSettings(true)
|
||
try {
|
||
const res = await getTenantSettings()
|
||
const data = res.data
|
||
setSettings(data)
|
||
basicForm.setFieldsValue({
|
||
display_name: data.display_name,
|
||
agent_nickname: data.agent_nickname,
|
||
timezone: data.timezone || 'Asia/Shanghai',
|
||
language: 'zh-CN',
|
||
})
|
||
autoReplyForm.setFieldsValue({
|
||
offline_prompt: data.offline_prompt,
|
||
})
|
||
setWelcomeSegments(normalizeWelcomeFromSettings(data))
|
||
{
|
||
const workFields: Record<string, unknown> = {
|
||
worktime_prompt: data.worktime_prompt,
|
||
}
|
||
weekDays.forEach(d => {
|
||
const parsed = parseWorkSlot(data.work_hours?.[d.key])
|
||
workFields[`${d.key}_mode`] = parsed.mode
|
||
workFields[`${d.key}_range`] = parsed.range
|
||
})
|
||
workForm.setFieldsValue(workFields)
|
||
}
|
||
notifyForm.setFieldsValue({
|
||
notify_new_session: data.notify_new_session,
|
||
notify_offline_leave: data.notify_offline_leave,
|
||
notify_daily_report: data.notify_daily_report,
|
||
})
|
||
assignForm.setFieldsValue({
|
||
assign_strategy: data.assign_strategy || 'least_load',
|
||
max_active_per_agent: data.max_active_per_agent ?? 0,
|
||
})
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '加载设置失败')
|
||
} finally {
|
||
setLoadingSettings(false)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (activeTab === 'channels') loadChannels()
|
||
if (['basic', 'autoreply', 'worktime', 'notify', 'assignment'].includes(activeTab)) loadSettings()
|
||
if (activeTab === 'staff' && canViewStaff) loadStaff()
|
||
if (activeTab === 'tags') void loadCustomerTags()
|
||
}, [activeTab])
|
||
|
||
const openCreateStaff = () => {
|
||
setEditingStaff(null)
|
||
staffForm.resetFields()
|
||
staffForm.setFieldsValue({ role: 'agent' })
|
||
setStaffModalOpen(true)
|
||
}
|
||
|
||
const openEditStaff = (s: StaffUser) => {
|
||
setEditingStaff(s)
|
||
staffForm.resetFields()
|
||
staffForm.setFieldsValue({
|
||
nickname: s.nickname,
|
||
role: s.role === 'admin' ? 'admin' : s.role,
|
||
status: s.status,
|
||
password: undefined,
|
||
})
|
||
setStaffModalOpen(true)
|
||
}
|
||
|
||
const handleSaveStaff = async (values: {
|
||
username?: string; password?: string; nickname?: string; role?: string; status?: string
|
||
}) => {
|
||
setSavingStaff(true)
|
||
try {
|
||
if (editingStaff) {
|
||
await updateStaff(editingStaff.id, {
|
||
nickname: values.nickname,
|
||
role: values.role === 'admin' ? 'admin' : values.role,
|
||
status: values.status,
|
||
password: values.password || undefined,
|
||
})
|
||
message.success('坐席已更新')
|
||
} else {
|
||
await createStaff({
|
||
username: values.username!.trim(),
|
||
password: values.password!,
|
||
nickname: values.nickname?.trim(),
|
||
role: values.role || 'agent',
|
||
})
|
||
message.success('坐席已创建')
|
||
}
|
||
setStaffModalOpen(false)
|
||
await loadStaff()
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '保存失败')
|
||
} finally {
|
||
setSavingStaff(false)
|
||
}
|
||
}
|
||
|
||
const handleDisableStaff = async (s: StaffUser) => {
|
||
try {
|
||
await deleteStaff(s.id)
|
||
message.success('已禁用')
|
||
await loadStaff()
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '操作失败')
|
||
}
|
||
}
|
||
|
||
const handleEnableStaff = async (s: StaffUser) => {
|
||
try {
|
||
await updateStaff(s.id, { status: 'offline' })
|
||
message.success('已启用')
|
||
await loadStaff()
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '启用失败')
|
||
}
|
||
}
|
||
|
||
const savePartial = async (payload: Parameters<typeof updateTenantSettings>[0], okText = '已保存') => {
|
||
setSaving(true)
|
||
try {
|
||
const res = await updateTenantSettings(payload)
|
||
setSettings(res.data)
|
||
if (payload.welcome_messages || res.data?.welcome_messages) {
|
||
setWelcomeSegments(normalizeWelcomeFromSettings(res.data))
|
||
}
|
||
message.success(okText)
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '保存失败')
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
const copyScript = async (script: string) => {
|
||
try {
|
||
const origin = window.location.origin
|
||
const text = script.includes('src="/widget.js"')
|
||
? script.replace('src="/widget.js"', `src="${origin}/widget.js"`)
|
||
: script
|
||
await navigator.clipboard.writeText(text)
|
||
message.success('已复制接入代码')
|
||
} catch {
|
||
message.error('复制失败')
|
||
}
|
||
}
|
||
|
||
const toggleChannel = async (ch: Channel, enabled: boolean) => {
|
||
setTogglingId(ch.id)
|
||
try {
|
||
const res = await updateChannel(ch.id, { status: enabled ? 'enabled' : 'disabled' })
|
||
setChannels(prev => prev.map(c => (c.id === ch.id ? res.data : c)))
|
||
message.success(enabled ? '渠道已启用' : '渠道已停用')
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '更新失败')
|
||
} finally {
|
||
setTogglingId(null)
|
||
}
|
||
}
|
||
|
||
const ensureWebChannel = async () => {
|
||
try {
|
||
await createChannel({ type: 'web', name: '网页聊天' })
|
||
message.success('已创建网页渠道')
|
||
await loadChannels()
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '创建失败')
|
||
}
|
||
}
|
||
|
||
const addChannelType = async (t: string) => {
|
||
try {
|
||
await createChannel({ type: t, name: typeMeta[t].label })
|
||
message.success('已添加')
|
||
await loadChannels()
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '添加失败')
|
||
}
|
||
}
|
||
|
||
const missingTypes = Object.keys(typeMeta).filter(t => !channels.some(c => c.type === t))
|
||
|
||
const panelHeaderAction = activeTab === 'channels' && missingTypes.includes('web') ? (
|
||
<Button type="primary" size="small" icon={<PlusOutlined />} className="!h-8" onClick={ensureWebChannel}>
|
||
开通网页渠道
|
||
</Button>
|
||
) : activeTab === 'channels' && missingTypes.length > 0 ? (
|
||
<Button type="primary" size="small" icon={<PlusOutlined />} className="!h-8" onClick={() => addChannelType(missingTypes[0])}>
|
||
添加新渠道
|
||
</Button>
|
||
) : null
|
||
|
||
return (
|
||
<div className="h-full flex min-h-0 overflow-hidden bg-slate-50/60">
|
||
{/* 左侧设置导航 — 顶栏 56px */}
|
||
<aside className="w-[210px] shrink-0 flex flex-col bg-white border-r border-slate-200/80">
|
||
<div
|
||
className="shrink-0 px-4 flex flex-col justify-center border-b border-slate-100"
|
||
style={{ height: 'var(--header-height)' }}
|
||
>
|
||
<div className="text-xs font-bold text-slate-900 leading-tight">系统设置</div>
|
||
<div className="text-[10px] text-slate-400 truncate leading-tight mt-0.5 font-medium">配置与渠道接入</div>
|
||
</div>
|
||
<nav className="flex-1 overflow-y-auto p-2 space-y-0.5">
|
||
{tabItems.map(item => {
|
||
const active = activeTab === item.key
|
||
return (
|
||
<button
|
||
key={item.key}
|
||
type="button"
|
||
onClick={() => setActiveTab(item.key)}
|
||
className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-xl text-xs text-left border-0 cursor-pointer transition-all ${
|
||
active
|
||
? 'bg-blue-50/80 text-blue-600 font-semibold shadow-2xs'
|
||
: 'bg-transparent text-slate-600 hover:bg-slate-50 hover:text-slate-900'
|
||
}`}
|
||
>
|
||
<span className={`text-sm leading-none ${active ? 'text-blue-600' : 'text-slate-400'}`}>
|
||
{item.icon}
|
||
</span>
|
||
<span className="truncate">{item.label}</span>
|
||
</button>
|
||
)
|
||
})}
|
||
</nav>
|
||
</aside>
|
||
|
||
{/* 右侧内容 */}
|
||
<section className="flex-1 flex flex-col min-w-0 overflow-hidden">
|
||
<div
|
||
className="shrink-0 px-6 flex items-center justify-between gap-3 border-b border-slate-200/80 bg-white"
|
||
style={{ height: 'var(--header-height)' }}
|
||
>
|
||
<div className="min-w-0">
|
||
<h1 className="text-sm font-bold text-slate-900 m-0 truncate">{currentTab.label}</h1>
|
||
<p className="text-[11px] text-slate-400 m-0 leading-tight">{currentTab.desc}</p>
|
||
</div>
|
||
{panelHeaderAction}
|
||
{activeTab === 'staff' && isAdmin && (
|
||
<Button
|
||
type="primary"
|
||
size="small"
|
||
icon={<PlusOutlined />}
|
||
className="!h-8 !rounded-lg !text-xs !font-semibold !bg-gradient-to-r !from-blue-600 !to-blue-500 shadow-sm shadow-blue-500/20"
|
||
disabled={seatLimit > 0 && seatUsed >= seatLimit}
|
||
onClick={openCreateStaff}
|
||
>
|
||
添加坐席
|
||
</Button>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-auto px-6 py-5">
|
||
<div className={activeTab === 'staff' ? 'max-w-4xl' : 'max-w-3xl'}>
|
||
<p className="text-xs text-neutral-400 mt-0 mb-5">{currentTab.desc}</p>
|
||
|
||
{activeTab === 'basic' && (
|
||
<div className="bg-white rounded-xl border border-neutral-200 shadow-sm p-6">
|
||
{loadingSettings && !settings ? (
|
||
<div className="py-10 text-center"><Spin /></div>
|
||
) : (
|
||
<Form
|
||
form={basicForm}
|
||
layout="vertical"
|
||
onFinish={values => savePartial({
|
||
display_name: values.display_name,
|
||
agent_nickname: values.agent_nickname,
|
||
timezone: values.timezone,
|
||
})}
|
||
>
|
||
<Form.Item name="display_name" label="租户名称" rules={[{ required: true }, { min: 1, max: 100 }]}>
|
||
<Input placeholder="公司名称 / 访客端展示名" />
|
||
</Form.Item>
|
||
<Form.Item name="agent_nickname" label="客服默认昵称">
|
||
<Input placeholder="客服在访客端显示的昵称" maxLength={50} />
|
||
</Form.Item>
|
||
<Form.Item name="timezone" label="时区">
|
||
<Select options={[
|
||
{ value: 'Asia/Shanghai', label: '东八区 (UTC+8)' },
|
||
{ value: 'Asia/Tokyo', label: '东京 (UTC+9)' },
|
||
{ value: 'UTC', label: 'UTC' },
|
||
]}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item name="language" label="语言">
|
||
<Select options={[{ value: 'zh-CN', label: '简体中文' }]} disabled />
|
||
</Form.Item>
|
||
<Form.Item className="!mb-0">
|
||
<Button type="primary" htmlType="submit" loading={saving}>保存设置</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'channels' && (
|
||
<div>
|
||
{loadingChannels ? (
|
||
<div className="py-16 text-center"><Spin /></div>
|
||
) : channels.length === 0 ? (
|
||
<div className="bg-white rounded-xl border border-neutral-200 p-10">
|
||
<Empty description="暂无渠道，请先开通网页渠道">
|
||
<Button type="primary" onClick={ensureWebChannel}>开通网页渠道</Button>
|
||
</Empty>
|
||
</div>
|
||
) : (
|
||
<div className="flex flex-col gap-3">
|
||
{channels.map(ch => {
|
||
const meta = typeMeta[ch.type] || { icon: <LinkOutlined />, label: ch.name || ch.type, desc: '' }
|
||
const enabled = ch.status === 'enabled'
|
||
return (
|
||
<div
|
||
key={ch.id}
|
||
className="bg-white rounded-xl border border-neutral-200 shadow-sm p-4"
|
||
>
|
||
<div className="flex items-start gap-4">
|
||
<div className="w-10 h-10 rounded-lg bg-[#eff6ff] text-[#2563eb] flex items-center justify-center text-lg shrink-0">
|
||
{meta.icon}
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center justify-between gap-3 mb-1">
|
||
<div className="flex items-center gap-2 min-w-0">
|
||
<h3 className="text-sm font-medium text-neutral-900 m-0 truncate">
|
||
{ch.name || meta.label}
|
||
</h3>
|
||
<span
|
||
className={`inline-flex items-center rounded px-2 py-0.5 text-[11px] font-medium whitespace-nowrap ${
|
||
enabled ? 'bg-[#f0fdf4] text-[#16a34a]' : 'bg-neutral-100 text-neutral-500'
|
||
}`}
|
||
>
|
||
{enabled ? '已启用' : '未启用'}
|
||
</span>
|
||
</div>
|
||
<Switch
|
||
checked={enabled}
|
||
size="small"
|
||
loading={togglingId === ch.id}
|
||
onChange={v => toggleChannel(ch, v)}
|
||
/>
|
||
</div>
|
||
{meta.desc && (
|
||
<p className="text-xs text-neutral-400 m-0 mb-3">{meta.desc}</p>
|
||
)}
|
||
{ch.channel_key && (
|
||
<div className="flex items-center gap-2 text-xs mb-2">
|
||
<span className="text-neutral-400">渠道 ID</span>
|
||
<code className="bg-neutral-100 text-neutral-600 px-2 py-0.5 rounded">
|
||
{ch.channel_key}
|
||
</code>
|
||
</div>
|
||
)}
|
||
{ch.type === 'web' && ch.script_code && (
|
||
<div className="mt-2">
|
||
<div className="text-xs text-neutral-400 mb-1">接入代码</div>
|
||
<div className="bg-neutral-50 border border-neutral-200 rounded-lg p-2.5 flex items-start justify-between gap-2">
|
||
<code className="text-[11px] text-neutral-600 break-all leading-relaxed">
|
||
{ch.script_code.replace(
|
||
'src="/widget.js"',
|
||
`src="${window.location.origin}/widget.js"`,
|
||
)}
|
||
</code>
|
||
<button
|
||
type="button"
|
||
className="shrink-0 w-7 h-7 rounded-md flex items-center justify-center text-neutral-400 hover:text-[#2563eb] hover:bg-blue-50 border-0 bg-transparent cursor-pointer"
|
||
title="复制"
|
||
onClick={() => copyScript(ch.script_code)}
|
||
>
|
||
<CopyOutlined />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{ch.type !== 'web' && (
|
||
<div className="text-xs text-neutral-400 mt-1">
|
||
本期仅网页渠道可完整接入，其他类型预留开关。
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{missingTypes.length > 0 && channels.length > 0 && (
|
||
<div className="mt-5">
|
||
<div className="text-xs text-neutral-400 mb-2">可添加渠道类型</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
{missingTypes.map(t => (
|
||
<Button key={t} size="small" icon={<PlusOutlined />} onClick={() => addChannelType(t)}>
|
||
{typeMeta[t].label}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'assignment' && (
|
||
<div className="space-y-4">
|
||
{loadingSettings ? (
|
||
<div className="py-16 text-center"><Spin /></div>
|
||
) : (
|
||
<>
|
||
<div className="bg-white rounded-xl border border-[#dbeafe] shadow-sm p-5">
|
||
<div className="flex items-start gap-3">
|
||
<div className="w-9 h-9 rounded-lg bg-[#eff6ff] text-[#2563eb] flex items-center justify-center shrink-0">
|
||
<TeamOutlined />
|
||
</div>
|
||
<div className="min-w-0">
|
||
<div className="text-sm font-medium text-neutral-800">自动分配规则</div>
|
||
<div className="text-xs text-neutral-500 mt-1.5 leading-relaxed">
|
||
工作时间内，访客进线会按下列策略分配给<strong className="font-medium text-neutral-700">在线一线客服</strong>；
|
||
非工作时间或无可接坐席时进入排队/留言。人工领取与转接不受此策略限制。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-xl border border-neutral-200 shadow-sm p-5">
|
||
<Form
|
||
form={assignForm}
|
||
layout="vertical"
|
||
disabled={!isAdmin}
|
||
onFinish={async (values: {
|
||
assign_strategy: 'least_load' | 'round_robin'
|
||
max_active_per_agent: number
|
||
}) => {
|
||
await savePartial({
|
||
assign_strategy: values.assign_strategy,
|
||
max_active_per_agent: Number(values.max_active_per_agent) || 0,
|
||
}, '分配规则已保存')
|
||
}}
|
||
>
|
||
<Form.Item
|
||
name="assign_strategy"
|
||
label="分配策略"
|
||
rules={[{ required: true, message: '请选择策略' }]}
|
||
extra="负载最低：优先进行中会话更少的坐席；轮询：在可接坐席中依次分配，更均匀。"
|
||
>
|
||
<Select
|
||
options={[
|
||
{ value: 'least_load', label: '负载最低（推荐）' },
|
||
{ value: 'round_robin', label: '轮询分配' },
|
||
]}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="max_active_per_agent"
|
||
label="每位坐席最大进行中会话数"
|
||
rules={[
|
||
{ required: true, message: '请填写上限' },
|
||
{
|
||
validator: async (_, v) => {
|
||
const n = Number(v)
|
||
if (!Number.isFinite(n) || n < 0 || n > 200) {
|
||
throw new Error('请填写 0–200 的整数，0 表示不限制')
|
||
}
|
||
},
|
||
},
|
||
]}
|
||
extra="达到上限的坐席不再自动分入新会话；全部坐席已满时会话保持排队。0 = 不限制。"
|
||
>
|
||
<Input type="number" min={0} max={200} placeholder="0 表示不限制" />
|
||
</Form.Item>
|
||
{isAdmin ? (
|
||
<Button type="primary" htmlType="submit" loading={saving}>
|
||
保存分配规则
|
||
</Button>
|
||
) : (
|
||
<p className="text-xs text-neutral-400 m-0">仅租户管理员可修改分配规则</p>
|
||
)}
|
||
</Form>
|
||
</div>
|
||
|
||
<div className="bg-neutral-50 rounded-xl border border-neutral-200 p-4 text-xs text-neutral-500 leading-relaxed space-y-1">
|
||
<div className="font-medium text-neutral-700 mb-1">说明</div>
|
||
<p className="m-0">· 候选范围：角色为客服、状态为「在线」的账号（忙碌/离线不参与自动分配）。</p>
|
||
<p className="m-0">· 技能组 / 渠道专属坐席将在后续版本支持。</p>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'staff' && (
|
||
<div>
|
||
{!canViewStaff ? (
|
||
<div className="bg-white rounded-xl border border-neutral-200 p-8 text-center text-sm text-neutral-500">
|
||
仅管理员或主管可查看坐席列表
|
||
</div>
|
||
) : loadingStaff ? (
|
||
<div className="py-16 text-center"><Spin /></div>
|
||
) : (
|
||
<>
|
||
<div className="flex items-center gap-4 mb-4 flex-wrap">
|
||
<div className="rounded-xl bg-white border border-neutral-200 px-4 py-3 min-w-[140px]">
|
||
<div className="text-[11px] text-neutral-400 mb-0.5">坐席占用</div>
|
||
<div className="text-lg font-semibold text-neutral-900 tabular-nums">
|
||
{seatUsed}
|
||
<span className="text-sm font-normal text-neutral-400"> / {seatLimit}</span>
|
||
</div>
|
||
</div>
|
||
<div className="text-xs text-neutral-400 flex-1 min-w-[200px]">
|
||
启用中的管理员、主管、客服各占 1 个坐席。禁用账号释放配额。角色：客服接待会话；主管可看统计与客户；管理员可改系统设置。
|
||
</div>
|
||
</div>
|
||
|
||
{staffList.length === 0 ? (
|
||
<Empty description="暂无坐席账号" className="bg-white rounded-xl border border-neutral-200 py-12" />
|
||
) : (
|
||
<div className="rounded-xl border border-neutral-200 bg-white overflow-hidden">
|
||
<table className="w-full border-collapse min-w-[640px]">
|
||
<thead>
|
||
<tr className="bg-neutral-50 text-[11px] font-semibold text-neutral-500">
|
||
<th className="text-left px-4 py-2.5 border-b border-neutral-200">账号</th>
|
||
<th className="text-left px-4 py-2.5 border-b border-neutral-200">昵称</th>
|
||
<th className="text-left px-4 py-2.5 border-b border-neutral-200">角色</th>
|
||
<th className="text-left px-4 py-2.5 border-b border-neutral-200">状态</th>
|
||
<th className="text-left px-4 py-2.5 border-b border-neutral-200">创建时间</th>
|
||
{isAdmin && (
|
||
<th className="text-right px-4 py-2.5 border-b border-neutral-200">操作</th>
|
||
)}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{staffList.map(s => {
|
||
const st = statusLabel[s.status] || statusLabel.offline
|
||
return (
|
||
<tr key={s.id} className="hover:bg-neutral-50 border-t border-neutral-100">
|
||
<td className="px-4 py-3 text-sm font-medium text-neutral-800">{s.username}</td>
|
||
<td className="px-4 py-3 text-sm text-neutral-700">{s.nickname || '—'}</td>
|
||
<td className="px-4 py-3">
|
||
<span className="text-xs px-2 py-0.5 rounded-full bg-neutral-100 text-neutral-600">
|
||
{roleLabel[s.role] || s.role}
|
||
</span>
|
||
</td>
|
||
<td className="px-4 py-3">
|
||
<span className={`text-xs px-2 py-0.5 rounded-full font-medium ${st.className}`}>
|
||
{st.text}
|
||
</span>
|
||
</td>
|
||
<td className="px-4 py-3 text-xs text-neutral-400 whitespace-nowrap">
|
||
{s.created_at ? s.created_at.slice(0, 16) : '—'}
|
||
</td>
|
||
{isAdmin && (
|
||
<td className="px-4 py-3 text-right" onClick={e => e.stopPropagation()}>
|
||
<div className="inline-flex items-center gap-1">
|
||
<button
|
||
type="button"
|
||
title="编辑"
|
||
className="w-7 h-7 rounded-md flex items-center justify-center text-neutral-400 hover:text-[#2563eb] hover:bg-blue-50 border-0 bg-transparent cursor-pointer"
|
||
onClick={() => openEditStaff(s)}
|
||
>
|
||
<EditOutlined className="text-xs" />
|
||
</button>
|
||
{s.status === 'disabled' ? (
|
||
<button
|
||
type="button"
|
||
title="启用"
|
||
className="w-7 h-7 rounded-md flex items-center justify-center text-neutral-400 hover:text-emerald-600 hover:bg-emerald-50 border-0 bg-transparent cursor-pointer"
|
||
onClick={() => handleEnableStaff(s)}
|
||
>
|
||
<CheckCircleOutlined className="text-xs" />
|
||
</button>
|
||
) : (
|
||
<Popconfirm
|
||
title="确认禁用该账号？"
|
||
description="禁用后无法登录，并释放坐席"
|
||
onConfirm={() => handleDisableStaff(s)}
|
||
disabled={s.id === user?.user_id}
|
||
>
|
||
<button
|
||
type="button"
|
||
title="禁用"
|
||
disabled={s.id === user?.user_id}
|
||
className="w-7 h-7 rounded-md flex items-center justify-center text-neutral-400 hover:text-red-500 hover:bg-red-50 border-0 bg-transparent cursor-pointer disabled:opacity-30"
|
||
>
|
||
<StopOutlined className="text-xs" />
|
||
</button>
|
||
</Popconfirm>
|
||
)}
|
||
</div>
|
||
</td>
|
||
)}
|
||
</tr>
|
||
)
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'autoreply' && (
|
||
<div className="bg-white rounded-xl border border-neutral-200 shadow-sm p-6">
|
||
{loadingSettings && !settings ? (
|
||
<div className="py-10 text-center"><Spin /></div>
|
||
) : (
|
||
<Form
|
||
form={autoReplyForm}
|
||
layout="vertical"
|
||
onFinish={async values => {
|
||
if (welcomeSegments.length === 0) {
|
||
message.error('至少保留一段欢迎语')
|
||
return
|
||
}
|
||
for (let i = 0; i < welcomeSegments.length; i++) {
|
||
const seg = welcomeSegments[i]
|
||
if (seg.type === 'text') {
|
||
const plain = seg.content.replace(/<[^>]+>/g, '').replace(/ /g, ' ').trim()
|
||
if (!plain) {
|
||
message.error(`第 ${i + 1} 段文本不能为空`)
|
||
return
|
||
}
|
||
}
|
||
if (seg.type === 'image' && !seg.content.trim()) {
|
||
message.error(`第 ${i + 1} 段请上传图片`)
|
||
return
|
||
}
|
||
}
|
||
await savePartial({
|
||
welcome_messages: welcomeSegments.map(s => ({
|
||
type: s.type,
|
||
content: s.content.trim(),
|
||
})),
|
||
offline_prompt: values.offline_prompt,
|
||
}, '自动回复已保存')
|
||
}}
|
||
>
|
||
<div className="mb-5">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div>
|
||
<div className="text-sm font-medium text-neutral-800">欢迎语（多段）</div>
|
||
<p className="text-xs text-neutral-500 m-0 mt-0.5">
|
||
访客打开窗口且尚无消息时按顺序展示；可混排富文本与图片，最多 {MAX_WELCOME_SEGMENTS} 段。
|
||
选中文字可设置<strong className="font-medium text-neutral-600">颜色、字号、加粗</strong>等（仅欢迎语；正常聊天仍为 Markdown）。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-3">
|
||
{welcomeSegments.map((seg, idx) => (
|
||
<div
|
||
key={idx}
|
||
className="rounded-lg border border-neutral-200 bg-neutral-50/60 p-3"
|
||
>
|
||
<div className="flex items-center justify-between gap-2 mb-2">
|
||
<span className="text-xs font-medium text-neutral-500">
|
||
第 {idx + 1} 段 · {seg.type === 'image' ? '图片' : '文本'}
|
||
</span>
|
||
<div className="flex items-center gap-1">
|
||
<Button
|
||
type="text"
|
||
size="small"
|
||
icon={<ArrowUpOutlined />}
|
||
disabled={idx === 0}
|
||
onClick={() => {
|
||
setWelcomeSegments(prev => {
|
||
if (idx <= 0) return prev
|
||
const next = [...prev]
|
||
;[next[idx - 1], next[idx]] = [next[idx], next[idx - 1]]
|
||
return next
|
||
})
|
||
}}
|
||
/>
|
||
<Button
|
||
type="text"
|
||
size="small"
|
||
icon={<ArrowDownOutlined />}
|
||
disabled={idx >= welcomeSegments.length - 1}
|
||
onClick={() => {
|
||
setWelcomeSegments(prev => {
|
||
if (idx >= prev.length - 1) return prev
|
||
const next = [...prev]
|
||
;[next[idx], next[idx + 1]] = [next[idx + 1], next[idx]]
|
||
return next
|
||
})
|
||
}}
|
||
/>
|
||
<Button
|
||
type="text"
|
||
size="small"
|
||
danger
|
||
icon={<DeleteOutlined />}
|
||
disabled={welcomeSegments.length <= 1}
|
||
onClick={() => {
|
||
setWelcomeSegments(prev => prev.filter((_, i) => i !== idx))
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
{seg.type === 'text' ? (
|
||
<RichTextEditor
|
||
value={seg.content}
|
||
placeholder="输入欢迎语，选中文字后设置颜色、字号…"
|
||
onChange={v => {
|
||
setWelcomeSegments(prev =>
|
||
prev.map((s, i) => (i === idx ? { ...s, content: v } : s)),
|
||
)
|
||
}}
|
||
/>
|
||
) : (
|
||
<div className="flex flex-wrap items-start gap-3">
|
||
{seg.content ? (
|
||
<img
|
||
src={seg.content}
|
||
alt={`欢迎图 ${idx + 1}`}
|
||
className="max-h-28 max-w-[200px] rounded-lg border border-neutral-200 object-contain bg-white"
|
||
/>
|
||
) : (
|
||
<div className="w-28 h-20 rounded-lg border border-dashed border-neutral-300 flex items-center justify-center text-neutral-400 text-xs bg-white">
|
||
未上传
|
||
</div>
|
||
)}
|
||
<Upload
|
||
accept="image/*"
|
||
showUploadList={false}
|
||
customRequest={async ({ file, onSuccess, onError }) => {
|
||
setUploadingWelcomeIdx(idx)
|
||
try {
|
||
const res = await uploadImage(file as File)
|
||
const url = res.data?.url
|
||
if (!url) throw new Error('上传未返回地址')
|
||
setWelcomeSegments(prev =>
|
||
prev.map((s, i) => (i === idx ? { ...s, content: url } : s)),
|
||
)
|
||
onSuccess?.(res)
|
||
message.success('图片已上传')
|
||
} catch (e) {
|
||
const err = e instanceof Error ? e : new Error('上传失败')
|
||
onError?.(err)
|
||
message.error(err.message)
|
||
} finally {
|
||
setUploadingWelcomeIdx(null)
|
||
}
|
||
}}
|
||
>
|
||
<Button
|
||
icon={<PictureOutlined />}
|
||
loading={uploadingWelcomeIdx === idx}
|
||
size="small"
|
||
>
|
||
{seg.content ? '重新上传' : '上传图片'}
|
||
</Button>
|
||
</Upload>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="flex flex-wrap gap-2 mt-3">
|
||
<Button
|
||
size="small"
|
||
icon={<PlusOutlined />}
|
||
disabled={welcomeSegments.length >= MAX_WELCOME_SEGMENTS}
|
||
onClick={() =>
|
||
setWelcomeSegments(prev =>
|
||
prev.length >= MAX_WELCOME_SEGMENTS
|
||
? prev
|
||
: [...prev, { type: 'text', content: '' }],
|
||
)
|
||
}
|
||
>
|
||
添加文本
|
||
</Button>
|
||
<Button
|
||
size="small"
|
||
icon={<PictureOutlined />}
|
||
disabled={welcomeSegments.length >= MAX_WELCOME_SEGMENTS}
|
||
onClick={() =>
|
||
setWelcomeSegments(prev =>
|
||
prev.length >= MAX_WELCOME_SEGMENTS
|
||
? prev
|
||
: [...prev, { type: 'image', content: '' }],
|
||
)
|
||
}
|
||
>
|
||
添加图片
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<Form.Item
|
||
name="offline_prompt"
|
||
label="离线留言提示"
|
||
rules={[{ max: 500 }]}
|
||
extra="点工具栏设置加粗、列表、链接、表情；可点「预览」查看效果"
|
||
>
|
||
<MarkdownEditor
|
||
rows={3}
|
||
maxLength={500}
|
||
showCount
|
||
placeholder="无客服在线时展示…"
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item className="!mb-0">
|
||
<Button type="primary" htmlType="submit" loading={saving}>保存</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'worktime' && (
|
||
<div className="bg-white rounded-xl border border-neutral-200 shadow-sm p-6">
|
||
{loadingSettings && !settings ? (
|
||
<div className="py-10 text-center"><Spin /></div>
|
||
) : (
|
||
<Form
|
||
form={workForm}
|
||
layout="vertical"
|
||
onFinish={values => {
|
||
const work_hours: WorkHours = {}
|
||
for (const d of weekDays) {
|
||
const mode = values[`${d.key}_mode`] as WorkMode | undefined
|
||
const range = values[`${d.key}_range`] as [Dayjs, Dayjs] | null | undefined
|
||
if (mode === 'custom' && (!range?.[0] || !range?.[1])) {
|
||
message.error(`${d.label} 请选择自定义时间范围`)
|
||
return
|
||
}
|
||
work_hours[d.key] = encodeWorkSlot(mode, range)
|
||
}
|
||
return savePartial({
|
||
work_hours,
|
||
worktime_prompt: values.worktime_prompt,
|
||
}, '工作时间已保存')
|
||
}}
|
||
>
|
||
<p className="text-sm text-neutral-500 mb-3">
|
||
每天可设为休息、全天或自定义时段（支持跨午夜，如 22:00-06:00）。
|
||
非工作时间访客将看到下方提示并可留言。
|
||
</p>
|
||
<div className="flex flex-wrap gap-2 mb-4">
|
||
<Button
|
||
size="small"
|
||
onClick={() => {
|
||
const patch: Record<string, unknown> = {}
|
||
weekDays.forEach((d, i) => {
|
||
if (i < 5) {
|
||
patch[`${d.key}_mode`] = 'custom'
|
||
patch[`${d.key}_range`] = defaultCustomRange()
|
||
} else {
|
||
patch[`${d.key}_mode`] = 'rest'
|
||
patch[`${d.key}_range`] = undefined
|
||
}
|
||
})
|
||
workForm.setFieldsValue(patch)
|
||
}}
|
||
>
|
||
工作日 09:00-18:00
|
||
</Button>
|
||
<Button
|
||
size="small"
|
||
onClick={() => {
|
||
const patch: Record<string, unknown> = {}
|
||
weekDays.forEach(d => {
|
||
patch[`${d.key}_mode`] = 'allday'
|
||
patch[`${d.key}_range`] = undefined
|
||
})
|
||
workForm.setFieldsValue(patch)
|
||
}}
|
||
>
|
||
全部全天
|
||
</Button>
|
||
<Button
|
||
size="small"
|
||
onClick={() => {
|
||
const patch: Record<string, unknown> = {}
|
||
weekDays.forEach(d => {
|
||
patch[`${d.key}_mode`] = 'rest'
|
||
patch[`${d.key}_range`] = undefined
|
||
})
|
||
workForm.setFieldsValue(patch)
|
||
}}
|
||
>
|
||
全部休息
|
||
</Button>
|
||
</div>
|
||
<div className="rounded-lg border border-neutral-100 overflow-hidden mb-4">
|
||
{weekDays.map((day, i) => (
|
||
<div
|
||
key={day.key}
|
||
className={`flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2.5 ${
|
||
i < weekDays.length - 1 ? 'border-b border-neutral-50' : ''
|
||
}`}
|
||
>
|
||
<span className="text-sm text-neutral-700 w-12 shrink-0">{day.label}</span>
|
||
<Form.Item name={`${day.key}_mode`} className="!mb-0" initialValue="rest">
|
||
<Select
|
||
options={workModeOptions}
|
||
className="!w-[120px]"
|
||
size="small"
|
||
onChange={(mode: WorkMode) => {
|
||
if (mode === 'custom' && !workForm.getFieldValue(`${day.key}_range`)) {
|
||
workForm.setFieldValue(`${day.key}_range`, defaultCustomRange())
|
||
}
|
||
}}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
noStyle
|
||
shouldUpdate={(prev, cur) =>
|
||
prev[`${day.key}_mode`] !== cur[`${day.key}_mode`]
|
||
}
|
||
>
|
||
{() =>
|
||
workForm.getFieldValue(`${day.key}_mode`) === 'custom' ? (
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Form.Item
|
||
name={`${day.key}_range`}
|
||
className="!mb-0"
|
||
rules={[{ required: true, message: '请选择时间范围' }]}
|
||
>
|
||
<TimePicker.RangePicker
|
||
format="HH:mm"
|
||
size="small"
|
||
allowClear={false}
|
||
order={false}
|
||
needConfirm={false}
|
||
placeholder={['开始', '结束']}
|
||
className="!w-[200px]"
|
||
/>
|
||
</Form.Item>
|
||
<div className="flex flex-wrap gap-0.5">
|
||
{workRangePresets.map(p => (
|
||
<Button
|
||
key={p.label}
|
||
type="link"
|
||
size="small"
|
||
className="!px-1.5 !h-6 text-xs text-neutral-500"
|
||
onClick={() => {
|
||
workForm.setFieldsValue({
|
||
[`${day.key}_mode`]: 'custom',
|
||
[`${day.key}_range`]: [
|
||
dayjs(p.start, 'HH:mm'),
|
||
dayjs(p.end, 'HH:mm'),
|
||
],
|
||
})
|
||
}}
|
||
>
|
||
{p.label}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : null
|
||
}
|
||
</Form.Item>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<Form.Item name="worktime_prompt" label="非工作时间提示" rules={[{ max: 500 }]}>
|
||
<Input placeholder="当前为非工作时间，我们会在工作时段尽快回复您" maxLength={500} />
|
||
</Form.Item>
|
||
<Form.Item className="!mb-0">
|
||
<Button type="primary" htmlType="submit" loading={saving}>保存工作时间</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'notify' && (
|
||
<div className="bg-white rounded-xl border border-neutral-200 shadow-sm p-6">
|
||
{loadingSettings && !settings ? (
|
||
<div className="py-10 text-center"><Spin /></div>
|
||
) : (
|
||
<Form
|
||
form={notifyForm}
|
||
layout="vertical"
|
||
onFinish={values => savePartial({
|
||
notify_new_session: values.notify_new_session,
|
||
notify_offline_leave: values.notify_offline_leave,
|
||
notify_daily_report: values.notify_daily_report,
|
||
}, '通知设置已保存')}
|
||
>
|
||
<div className="space-y-3 mb-5">
|
||
{[
|
||
{ name: 'notify_new_session', title: '新会话提醒', desc: '有新访客进线时提醒；浏览器通知与声音可在工作台铃铛中配置' },
|
||
{ name: 'notify_offline_leave', title: '离线留言通知', desc: '访客提交离线留言时提醒' },
|
||
{ name: 'notify_daily_report', title: '日报推送', desc: '每日服务数据摘要' },
|
||
].map(item => (
|
||
<div
|
||
key={item.name}
|
||
className="flex items-center justify-between p-3.5 border border-neutral-100 rounded-lg"
|
||
>
|
||
<div className="min-w-0 pr-3">
|
||
<div className="text-sm font-medium text-neutral-800">{item.title}</div>
|
||
<div className="text-xs text-neutral-400 mt-0.5">{item.desc}</div>
|
||
</div>
|
||
<Form.Item name={item.name} valuePropName="checked" className="!mb-0">
|
||
<Switch />
|
||
</Form.Item>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<Form.Item className="!mb-0">
|
||
<Button type="primary" htmlType="submit" loading={saving}>保存通知设置</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'tags' && (
|
||
<div className="bg-white rounded-xl border border-neutral-200 shadow-sm p-6">
|
||
<div className="flex items-start justify-between gap-3 mb-4">
|
||
<div>
|
||
<p className="text-sm text-neutral-500 m-0">
|
||
在此创建标签后，客户管理与工作台中员工只能从列表选择，不能随意输入新标签。
|
||
</p>
|
||
</div>
|
||
<Button
|
||
type="primary"
|
||
size="small"
|
||
icon={<PlusOutlined />}
|
||
onClick={() => {
|
||
setEditingTag(null)
|
||
tagForm.resetFields()
|
||
tagForm.setFieldsValue({ color: 'blue' })
|
||
setTagModalOpen(true)
|
||
}}
|
||
>
|
||
新建标签
|
||
</Button>
|
||
</div>
|
||
{loadingTags ? (
|
||
<div className="py-10 text-center"><Spin /></div>
|
||
) : customerTags.length === 0 ? (
|
||
<Empty description="暂无标签，请先创建" />
|
||
) : (
|
||
<div className="space-y-2">
|
||
{customerTags.map(tag => {
|
||
const style = tagColorStyle(tag.color)
|
||
return (
|
||
<div
|
||
key={tag.id}
|
||
className="flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg border border-neutral-100"
|
||
>
|
||
<span
|
||
className="inline-flex items-center px-2.5 py-0.5 rounded text-xs font-medium"
|
||
style={{ backgroundColor: style.bg, color: style.color }}
|
||
>
|
||
{tag.name}
|
||
</span>
|
||
<div className="flex items-center gap-1">
|
||
<Button
|
||
type="text"
|
||
size="small"
|
||
icon={<EditOutlined />}
|
||
onClick={() => {
|
||
setEditingTag(tag)
|
||
tagForm.setFieldsValue({ name: tag.name, color: tag.color || 'slate' })
|
||
setTagModalOpen(true)
|
||
}}
|
||
/>
|
||
<Popconfirm
|
||
title="删除该标签？"
|
||
description="将从标签库移除，并同步去掉客户上的此标签"
|
||
onConfirm={async () => {
|
||
try {
|
||
await deleteCustomerTag(tag.id)
|
||
message.success('已删除')
|
||
await loadCustomerTags()
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '删除失败')
|
||
}
|
||
}}
|
||
>
|
||
<Button type="text" size="small" danger icon={<DeleteOutlined />} />
|
||
</Popconfirm>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Modal
|
||
title={editingTag ? '编辑客户标签' : '新建客户标签'}
|
||
open={tagModalOpen}
|
||
onCancel={() => setTagModalOpen(false)}
|
||
onOk={() => tagForm.submit()}
|
||
confirmLoading={savingTag}
|
||
destroyOnHidden
|
||
okText="保存"
|
||
width={400}
|
||
>
|
||
<Form
|
||
form={tagForm}
|
||
layout="vertical"
|
||
className="mt-2"
|
||
onFinish={async values => {
|
||
setSavingTag(true)
|
||
try {
|
||
const payload = {
|
||
name: String(values.name || '').trim(),
|
||
color: values.color || 'slate',
|
||
}
|
||
if (editingTag) {
|
||
await updateCustomerTag(editingTag.id, payload)
|
||
message.success('标签已更新')
|
||
} else {
|
||
await createCustomerTag(payload)
|
||
message.success('标签已创建')
|
||
}
|
||
setTagModalOpen(false)
|
||
await loadCustomerTags()
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '保存失败')
|
||
} finally {
|
||
setSavingTag(false)
|
||
}
|
||
}}
|
||
>
|
||
<Form.Item
|
||
name="name"
|
||
label="标签名称"
|
||
rules={[{ required: true, message: '请输入名称' }, { max: 30, message: '最多 30 字' }]}
|
||
>
|
||
<Input maxLength={30} placeholder="如：VIP客户、高意向" />
|
||
</Form.Item>
|
||
<Form.Item name="color" label="颜色" rules={[{ required: true }]}>
|
||
<Select
|
||
options={tagColorPresets.map(p => ({
|
||
value: p.value,
|
||
label: (
|
||
<span className="inline-flex items-center gap-2">
|
||
<span className="w-3 h-3 rounded-full" style={{ backgroundColor: p.color }} />
|
||
{p.label}
|
||
</span>
|
||
),
|
||
}))}
|
||
/>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
<Modal
|
||
title={editingStaff ? '编辑坐席' : '添加坐席'}
|
||
open={staffModalOpen}
|
||
onCancel={() => setStaffModalOpen(false)}
|
||
onOk={() => staffForm.submit()}
|
||
confirmLoading={savingStaff}
|
||
destroyOnClose
|
||
okText="保存"
|
||
width={440}
|
||
>
|
||
<Form form={staffForm} layout="vertical" onFinish={handleSaveStaff} className="mt-2" requiredMark={false}>
|
||
{!editingStaff && (
|
||
<>
|
||
<Form.Item
|
||
name="username"
|
||
label="登录用户名"
|
||
rules={[{ required: true, message: '请输入用户名' }, { min: 3, max: 30, message: '3-30 个字符' }]}
|
||
>
|
||
<Input placeholder="英文/数字，全局唯一" autoComplete="off" />
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="password"
|
||
label="初始密码"
|
||
rules={[{ required: true, message: '请输入密码' }, { min: 6, max: 64, message: '至少 6 位' }]}
|
||
>
|
||
<Input.Password placeholder="至少 6 位" autoComplete="new-password" />
|
||
</Form.Item>
|
||
</>
|
||
)}
|
||
<Form.Item name="nickname" label="显示昵称" rules={[{ max: 50 }]}>
|
||
<Input placeholder="工作台显示名称" />
|
||
</Form.Item>
|
||
<Form.Item name="role" label="角色" rules={[{ required: true }]}>
|
||
<Select
|
||
options={
|
||
editingStaff?.role === 'admin'
|
||
? [
|
||
{ value: 'admin', label: '管理员' },
|
||
{ value: 'supervisor', label: '主管' },
|
||
{ value: 'agent', label: '客服' },
|
||
]
|
||
: [
|
||
{ value: 'agent', label: '客服' },
|
||
{ value: 'supervisor', label: '主管' },
|
||
...(isAdmin ? [{ value: 'admin', label: '管理员' }] : []),
|
||
]
|
||
}
|
||
/>
|
||
</Form.Item>
|
||
{editingStaff && (
|
||
<>
|
||
<Form.Item name="status" label="状态">
|
||
<Select
|
||
options={[
|
||
{ value: 'online', label: '在线' },
|
||
{ value: 'offline', label: '离线' },
|
||
{ value: 'busy', label: '忙碌' },
|
||
{ value: 'disabled', label: '禁用' },
|
||
]}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item name="password" label="重置密码" extra="留空则不修改">
|
||
<Input.Password placeholder="可选，至少 6 位" autoComplete="new-password" />
|
||
</Form.Item>
|
||
</>
|
||
)}
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Settings
|