优化系统设置页布局并对齐顶栏
左右栏固定 56px 顶栏，设置分类导航与各配置面板视觉对齐效果图，保留渠道与租户设置能力。
This commit is contained in:
yml2213
+388
-319
@@ -1,22 +1,24 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Form, Input, Switch, Select, Button, Card, Tag, message, Spin, Empty } from 'antd'
|
||||
import { useEffect, useState, type ReactNode } from 'react'
|
||||
import { Form, Input, Switch, Select, Button, message, Spin, Empty } from 'antd'
|
||||
import {
|
||||
LinkOutlined, WechatOutlined, PhoneOutlined, MailOutlined, MobileOutlined, CopyOutlined, PlusOutlined,
|
||||
LinkOutlined, WechatOutlined, PhoneOutlined, MailOutlined, MobileOutlined, CopyOutlined,
|
||||
PlusOutlined, SettingOutlined, ApiOutlined, TeamOutlined, SafetyCertificateOutlined,
|
||||
MessageOutlined, ClockCircleOutlined, BellOutlined, GlobalOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import {
|
||||
createChannel, getChannels, getTenantSettings, updateChannel, updateTenantSettings,
|
||||
type Channel, type TenantSettings, type WorkHours,
|
||||
} from '@/services/api'
|
||||
|
||||
const typeMeta: Record<string, { icon: React.ReactNode; label: string }> = {
|
||||
web: { icon: <LinkOutlined />, label: '网页聊天' },
|
||||
wechat: { icon: <WechatOutlined />, label: '微信公众号' },
|
||||
app: { icon: <MobileOutlined />, label: 'APP 内嵌' },
|
||||
phone: { icon: <PhoneOutlined />, label: '电话客服' },
|
||||
email: { icon: <MailOutlined />, label: '邮件工单' },
|
||||
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: keyof WorkHours | string; label: string }[] = [
|
||||
const weekDays: { key: string; label: string }[] = [
|
||||
{ key: 'monday', label: '周一' },
|
||||
{ key: 'tuesday', label: '周二' },
|
||||
{ key: 'wednesday', label: '周三' },
|
||||
@@ -33,6 +35,16 @@ const hourOptions = [
|
||||
{ value: '全天', label: '全天' },
|
||||
]
|
||||
|
||||
const tabItems: { key: string; label: string; desc: string; icon: ReactNode }[] = [
|
||||
{ key: 'basic', label: '基本设置', desc: '租户展示名称、默认昵称与时区', icon: <SettingOutlined /> },
|
||||
{ key: 'channels', label: '渠道管理', desc: '配置客户服务接入渠道与嵌入代码', icon: <ApiOutlined /> },
|
||||
{ key: 'assignment', label: '客服分配规则', desc: '会话自动分配策略说明', icon: <TeamOutlined /> },
|
||||
{ key: 'permission', label: '权限管理', desc: '角色与能力说明', icon: <SafetyCertificateOutlined /> },
|
||||
{ key: 'autoreply', label: '自动回复', desc: '欢迎语与离线留言提示', icon: <MessageOutlined /> },
|
||||
{ key: 'worktime', label: '工作时间', desc: '在线服务时段与非工作时间提示', icon: <ClockCircleOutlined /> },
|
||||
{ key: 'notify', label: '通知设置', desc: '新会话、留言与日报偏好', icon: <BellOutlined /> },
|
||||
]
|
||||
|
||||
const Settings = () => {
|
||||
const [activeTab, setActiveTab] = useState('basic')
|
||||
const [basicForm] = Form.useForm()
|
||||
@@ -46,15 +58,7 @@ const Settings = () => {
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [togglingId, setTogglingId] = useState<number | null>(null)
|
||||
|
||||
const tabItems = [
|
||||
{ key: 'basic', label: '基本设置' },
|
||||
{ key: 'channels', label: '渠道管理' },
|
||||
{ key: 'assignment', label: '分配规则' },
|
||||
{ key: 'permission', label: '权限管理' },
|
||||
{ key: 'autoreply', label: '自动回复' },
|
||||
{ key: 'worktime', label: '工作时间' },
|
||||
{ key: 'notify', label: '通知设置' },
|
||||
]
|
||||
const currentTab = tabItems.find(t => t.key === activeTab) || tabItems[0]
|
||||
|
||||
const loadChannels = async () => {
|
||||
setLoadingChannels(true)
|
||||
@@ -136,7 +140,7 @@ const Settings = () => {
|
||||
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))
|
||||
setChannels(prev => prev.map(c => (c.id === ch.id ? res.data : c)))
|
||||
message.success(enabled ? '渠道已启用' : '渠道已停用')
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '更新失败')
|
||||
@@ -155,323 +159,388 @@ const Settings = () => {
|
||||
}
|
||||
}
|
||||
|
||||
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">
|
||||
<div className="w-[200px] flex-shrink-0 bg-white border-r border-neutral-200 py-4">
|
||||
<div className="px-4 mb-3">
|
||||
<span className="text-xs text-neutral-400 font-medium">系统设置</span>
|
||||
<div className="h-full flex min-h-0 overflow-hidden bg-neutral-50">
|
||||
{/* 左侧设置导航 — 顶栏 56px 对齐 */}
|
||||
<aside className="w-[220px] shrink-0 flex flex-col bg-white border-r border-neutral-200">
|
||||
<div
|
||||
className="shrink-0 px-4 flex flex-col justify-center border-b border-neutral-200"
|
||||
style={{ height: 'var(--header-height)' }}
|
||||
>
|
||||
<div className="text-sm font-semibold text-neutral-900 leading-tight">系统设置</div>
|
||||
<div className="text-[11px] text-neutral-400 truncate leading-tight mt-0.5">配置与渠道接入</div>
|
||||
</div>
|
||||
{tabItems.map(item => (
|
||||
<div
|
||||
key={item.key}
|
||||
className={`px-4 py-2 text-sm cursor-pointer transition-colors ${
|
||||
activeTab === item.key
|
||||
? 'bg-blue-50 text-blue-600 font-medium border-r-2 border-blue-500'
|
||||
: 'text-neutral-600 hover:bg-neutral-50'
|
||||
}`}
|
||||
onClick={() => setActiveTab(item.key)}
|
||||
>
|
||||
{item.label}
|
||||
<nav className="flex-1 overflow-y-auto py-2 px-2">
|
||||
{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-md text-sm text-left border-0 cursor-pointer transition-colors mb-0.5 ${
|
||||
active
|
||||
? 'bg-[#eff6ff] text-[#2563eb] font-medium'
|
||||
: 'bg-transparent text-neutral-600 hover:bg-neutral-50'
|
||||
}`}
|
||||
>
|
||||
<span className={`text-base leading-none ${active ? 'text-[#2563eb]' : 'text-neutral-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-neutral-200 bg-white"
|
||||
style={{ height: 'var(--header-height)' }}
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-base font-semibold text-neutral-900 m-0 truncate">{currentTab.label}</h1>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{panelHeaderAction}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto p-6">
|
||||
{activeTab === 'basic' && (
|
||||
<Card title="基本设置" className="max-w-2xl">
|
||||
{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>
|
||||
<Button type="primary" htmlType="submit" loading={saving}>保存设置</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
<div className="flex-1 overflow-auto px-6 py-5">
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-xs text-neutral-400 mt-0 mb-5">{currentTab.desc}</p>
|
||||
|
||||
{activeTab === 'channels' && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-neutral-800 m-0">渠道管理</h3>
|
||||
<p className="text-xs text-neutral-400 mt-1 mb-0">配置接入渠道开关与网页聊天嵌入代码</p>
|
||||
</div>
|
||||
{missingTypes.includes('web') && (
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={ensureWebChannel}>开通网页渠道</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loadingChannels ? (
|
||||
<div className="py-16 text-center"><Spin /></div>
|
||||
) : channels.length === 0 ? (
|
||||
<Empty description="暂无渠道，请先开通网页渠道">
|
||||
<Button type="primary" onClick={ensureWebChannel}>开通网页渠道</Button>
|
||||
</Empty>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{channels.map(ch => {
|
||||
const meta = typeMeta[ch.type] || { icon: <LinkOutlined />, label: ch.name || ch.type }
|
||||
const enabled = ch.status === 'enabled'
|
||||
return (
|
||||
<Card
|
||||
key={ch.id}
|
||||
size="small"
|
||||
className="!rounded-lg"
|
||||
title={(
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-blue-500">{meta.icon}</span>
|
||||
<span className="text-sm font-medium">{ch.name || meta.label}</span>
|
||||
<Tag color={enabled ? 'green' : 'default'} className="ml-1">{enabled ? '已启用' : '未启用'}</Tag>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<div className="space-y-3">
|
||||
{ch.channel_key && (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-neutral-400">渠道 ID</span>
|
||||
<code className="text-xs bg-neutral-100 px-2 py-0.5 rounded">{ch.channel_key}</code>
|
||||
</div>
|
||||
)}
|
||||
{ch.type === 'web' && ch.script_code && (
|
||||
<div>
|
||||
<div className="text-sm text-neutral-400 mb-1">接入代码</div>
|
||||
<div className="bg-neutral-50 border border-neutral-200 rounded p-2 flex items-start justify-between gap-2">
|
||||
<code className="text-xs text-neutral-600 break-all">
|
||||
{ch.script_code.replace('src="/widget.js"', `src="${window.location.origin}/widget.js"`)}
|
||||
</code>
|
||||
<CopyOutlined
|
||||
className="text-neutral-400 cursor-pointer hover:text-blue-500 flex-shrink-0 mt-0.5"
|
||||
onClick={() => copyScript(ch.script_code)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{ch.type !== 'web' && (
|
||||
<div className="text-xs text-neutral-400">本期仅网页渠道可完整接入，其他渠道预留开关。</div>
|
||||
)}
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-neutral-400">启用状态</span>
|
||||
<Switch checked={enabled} size="small" loading={togglingId === ch.id} onChange={v => toggleChannel(ch, v)} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{missingTypes.length > 0 && channels.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<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={async () => {
|
||||
try {
|
||||
await createChannel({ type: t, name: typeMeta[t].label })
|
||||
message.success('已添加')
|
||||
await loadChannels()
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '添加失败')
|
||||
}
|
||||
}}
|
||||
>
|
||||
{typeMeta[t].label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'assignment' && (
|
||||
<Card title="客服分配规则" className="max-w-2xl">
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 border border-blue-100 bg-blue-50 rounded-lg">
|
||||
<div className="text-sm font-medium text-neutral-800">当前生效：负载最低优先 + 工作时间</div>
|
||||
<div className="text-xs text-neutral-500 mt-1">
|
||||
工作时间内，自动分配给进行中会话最少的在线客服；非工作时间或无客服在线时，访客可留言。
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 border border-neutral-200 rounded-lg opacity-60">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-neutral-800">轮询分配</div>
|
||||
<div className="text-xs text-neutral-400 mt-1">后续版本可切换</div>
|
||||
</div>
|
||||
<Switch disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{activeTab === 'permission' && (
|
||||
<Card title="权限管理" className="max-w-2xl">
|
||||
<p className="text-sm text-neutral-500 m-0">
|
||||
角色权限由系统内置（平台管理员 / 租户管理员 / 主管 / 一线客服），自定义角色将在后续版本开放。
|
||||
</p>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{activeTab === 'autoreply' && (
|
||||
<Card title="自动回复" className="max-w-2xl">
|
||||
{loadingSettings && !settings ? (
|
||||
<div className="py-10 text-center"><Spin /></div>
|
||||
) : (
|
||||
<Form
|
||||
form={autoReplyForm}
|
||||
layout="vertical"
|
||||
onFinish={values => savePartial({
|
||||
welcome_message: values.welcome_message,
|
||||
offline_prompt: values.offline_prompt,
|
||||
}, '自动回复已保存')}
|
||||
>
|
||||
<Form.Item name="welcome_message" label="欢迎语" rules={[{ max: 500 }]}>
|
||||
<Input.TextArea rows={3} maxLength={500} showCount placeholder="访客打开窗口时展示" />
|
||||
</Form.Item>
|
||||
<Form.Item name="offline_prompt" label="离线留言提示" rules={[{ max: 500 }]}>
|
||||
<Input.TextArea rows={3} maxLength={500} showCount placeholder="无客服在线时展示" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" loading={saving}>保存</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{activeTab === 'worktime' && (
|
||||
<Card title="工作时间" className="max-w-2xl">
|
||||
{loadingSettings && !settings ? (
|
||||
<div className="py-10 text-center"><Spin /></div>
|
||||
) : (
|
||||
<Form
|
||||
form={workForm}
|
||||
layout="vertical"
|
||||
onFinish={values => {
|
||||
const work_hours: WorkHours = {}
|
||||
weekDays.forEach(d => {
|
||||
work_hours[d.key] = values[d.key] || ''
|
||||
})
|
||||
return savePartial({
|
||||
work_hours,
|
||||
worktime_prompt: values.worktime_prompt,
|
||||
}, '工作时间已保存')
|
||||
}}
|
||||
>
|
||||
<p className="text-sm text-neutral-500 mb-4">
|
||||
非工作时间访客将看到下方提示并可留言；清空某天时段表示休息。
|
||||
</p>
|
||||
{weekDays.map(day => (
|
||||
<div key={day.key} className="flex items-center justify-between py-2 border-b border-neutral-50">
|
||||
<span className="text-sm text-neutral-700 w-12">{day.label}</span>
|
||||
<Form.Item name={day.key} className="!mb-0">
|
||||
<Select
|
||||
placeholder="休息"
|
||||
className="w-40"
|
||||
size="small"
|
||||
allowClear
|
||||
options={hourOptions}
|
||||
{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>
|
||||
</div>
|
||||
))}
|
||||
<Form.Item name="worktime_prompt" label="非工作时间提示" className="mt-4" rules={[{ max: 500 }]}>
|
||||
<Input placeholder="当前为非工作时间，我们会在工作时段尽快回复您" maxLength={500} />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" loading={saving}>保存工作时间</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<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>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{activeTab === 'notify' && (
|
||||
<Card title="通知设置" className="max-w-2xl">
|
||||
{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-4">
|
||||
<div className="flex items-center justify-between p-3 border border-neutral-100 rounded-lg">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-neutral-800">新会话提醒</div>
|
||||
<div className="text-xs text-neutral-400">有新访客进线时提醒（偏好开关，推送通道后续接入）</div>
|
||||
</div>
|
||||
<Form.Item name="notify_new_session" valuePropName="checked" className="!mb-0">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
{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 items-center justify-between p-3 border border-neutral-100 rounded-lg">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-neutral-800">离线留言通知</div>
|
||||
<div className="text-xs text-neutral-400">访客提交离线留言时提醒</div>
|
||||
</div>
|
||||
<Form.Item name="notify_offline_leave" valuePropName="checked" className="!mb-0">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
) : (
|
||||
<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>
|
||||
<div className="flex items-center justify-between p-3 border border-neutral-100 rounded-lg">
|
||||
)}
|
||||
|
||||
{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-3">
|
||||
<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>
|
||||
<div className="text-sm font-medium text-neutral-800">日报推送</div>
|
||||
<div className="text-xs text-neutral-400">每日服务数据摘要</div>
|
||||
<div className="text-sm font-medium text-neutral-800">当前生效：负载最低优先 + 工作时间</div>
|
||||
<div className="text-xs text-neutral-500 mt-1.5 leading-relaxed">
|
||||
工作时间内，新会话自动分配给进行中会话最少的在线客服；非工作时间或无客服在线时，访客可提交离线留言。
|
||||
</div>
|
||||
</div>
|
||||
<Form.Item name="notify_daily_report" valuePropName="checked" className="!mb-0">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" loading={saving}>保存通知设置</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<div className="bg-white rounded-xl border border-neutral-200 p-5 opacity-70">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-neutral-800">轮询分配</div>
|
||||
<div className="text-xs text-neutral-400 mt-1">后续版本可切换策略</div>
|
||||
</div>
|
||||
<Switch disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{activeTab === 'permission' && (
|
||||
<div className="bg-white rounded-xl border border-neutral-200 shadow-sm p-6">
|
||||
<div className="text-sm text-neutral-600 leading-relaxed space-y-3">
|
||||
<p className="m-0">角色权限由系统内置，自定义角色将在后续版本开放：</p>
|
||||
<ul className="m-0 pl-5 space-y-2 text-sm text-neutral-600">
|
||||
<li><span className="font-medium text-neutral-800">租户管理员</span> — 全部配置、知识库、统计、坐席管理</li>
|
||||
<li><span className="font-medium text-neutral-800">主管</span> — 会话监管、客户与知识库管理、数据统计</li>
|
||||
<li><span className="font-medium text-neutral-800">一线客服</span> — 工作台接待、查看客户与知识库</li>
|
||||
</ul>
|
||||
</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={values => savePartial({
|
||||
welcome_message: values.welcome_message,
|
||||
offline_prompt: values.offline_prompt,
|
||||
}, '自动回复已保存')}
|
||||
>
|
||||
<Form.Item name="welcome_message" label="欢迎语" rules={[{ max: 500 }]}>
|
||||
<Input.TextArea rows={3} maxLength={500} showCount placeholder="访客打开窗口时展示" />
|
||||
</Form.Item>
|
||||
<Form.Item name="offline_prompt" label="离线留言提示" rules={[{ max: 500 }]}>
|
||||
<Input.TextArea 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 = {}
|
||||
weekDays.forEach(d => {
|
||||
work_hours[d.key] = values[d.key] || ''
|
||||
})
|
||||
return savePartial({
|
||||
work_hours,
|
||||
worktime_prompt: values.worktime_prompt,
|
||||
}, '工作时间已保存')
|
||||
}}
|
||||
>
|
||||
<p className="text-sm text-neutral-500 mb-4">
|
||||
非工作时间访客将看到下方提示并可留言；清空某天时段表示休息。
|
||||
</p>
|
||||
<div className="rounded-lg border border-neutral-100 overflow-hidden mb-4">
|
||||
{weekDays.map((day, i) => (
|
||||
<div
|
||||
key={day.key}
|
||||
className={`flex items-center justify-between px-4 py-2.5 ${
|
||||
i < weekDays.length - 1 ? 'border-b border-neutral-50' : ''
|
||||
}`}
|
||||
>
|
||||
<span className="text-sm text-neutral-700 w-12">{day.label}</span>
|
||||
<Form.Item name={day.key} className="!mb-0">
|
||||
<Select
|
||||
placeholder="休息"
|
||||
className="!w-44"
|
||||
size="small"
|
||||
allowClear
|
||||
options={hourOptions}
|
||||
/>
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user