fix: 飞书告警改用交互卡片展示 + 通知渠道与联系人合并为通知管理Tab
- 飞书: sendFeishuCard 改用 msg_type=interactive 卡片格式(header+template+fields+note) - 飞书: splitLines 处理 \n 转义 → 卡片字段逐行渲染 lark_md - 飞书: header.template 按级别着色(red/orange/green/blue) - 飞书: 测试通知改为卡片格式: 测试时间/来源/状态 - UI: 合并通知渠道+报警联系人为一个「通知管理」Tab(4列Tab栏) - UI: 通知管理下分【渠道配置】+【报警联系人】两个区域
This commit is contained in:
attacker committed
1 parent
e1cfbaf45e
commit
e1f75f0bc4
2 files changed
+124
-67
No files matched your search
@@ -262,11 +262,10 @@ const AlertCenter: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList className="grid w-full grid-cols-5 lg:w-[600px] h-9">
|
||||
<TabsList className="grid w-full grid-cols-4 lg:w-[480px] h-9">
|
||||
<TabsTrigger value="alerts" className="text-xs">告警列表</TabsTrigger>
|
||||
<TabsTrigger value="rules" className="text-xs">告警规则</TabsTrigger>
|
||||
<TabsTrigger value="channels" className="text-xs">通知渠道</TabsTrigger>
|
||||
<TabsTrigger value="contacts" className="text-xs">报警联系人</TabsTrigger>
|
||||
<TabsTrigger value="contacts" className="text-xs">通知管理</TabsTrigger>
|
||||
<TabsTrigger value="groups" className="text-xs">报警联系组</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
@@ -502,62 +501,59 @@ const AlertCenter: React.FC = () => {
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
{/* 通知渠道 Tab — 自包含子组件 */}
|
||||
<TabsContent value="channels">
|
||||
<AlertChannelsTab refreshKey={0} />
|
||||
</TabsContent>
|
||||
|
||||
{/* 报警联系人 Tab */}
|
||||
{/* 通知管理 Tab — 渠道 + 联系人合并 */}
|
||||
<TabsContent value="contacts" className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<Button variant="outline" onClick={fetchContacts}>
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
刷新
|
||||
</Button>
|
||||
<Button onClick={() => { setEditingContact(null); setContactDialogOpen(true); }}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
添加联系人
|
||||
</Button>
|
||||
<AlertChannelsTab refreshKey={0} />
|
||||
<div className="border-t border-border pt-4 mt-1">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<h3 className="text-sm font-medium">报警联系人</h3>
|
||||
<Button size="sm" onClick={() => { setEditingContact(null); setContactDialogOpen(true); }}>
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
添加联系人
|
||||
</Button>
|
||||
</div>
|
||||
{contacts.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground border border-dashed rounded-lg text-xs">
|
||||
暂无报警联系人，点击「添加联系人」创建
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{contacts.map((c) => (
|
||||
<Card key={c.id} className="hover:border-primary/50 transition-colors">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-start justify-between">
|
||||
<CardTitle className="text-sm">{c.name}</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-1 text-xs text-muted-foreground">
|
||||
{c.phone && <div>📱 {c.phone}</div>}
|
||||
{c.email && <div>📧 {c.email}</div>}
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{c.dingtalk && <Badge variant="outline" className="text-[10px]">钉钉</Badge>}
|
||||
{c.feishu && <Badge variant="outline" className="text-[10px]">飞书</Badge>}
|
||||
{c.wechat && <Badge variant="outline" className="text-[10px]">企微</Badge>}
|
||||
</div>
|
||||
<div className="flex gap-1.5 pt-1.5">
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs flex-1"
|
||||
onClick={() => { setEditingContact(c); setContactDialogOpen(true); }}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs"
|
||||
onClick={async () => {
|
||||
const ok = await _confirm({ title: '删除联系人', description: `确定删除「${c.name}」？`, confirmText: '删除', variant: 'destructive' });
|
||||
if (!ok) return;
|
||||
try { await alertApi.deleteContact(c.id); toast.success('已删除'); fetchContacts(); }
|
||||
catch { toast.error('删除失败'); }
|
||||
}}>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{contacts.length === 0 ? (
|
||||
<div className="text-center py-16 text-muted-foreground border border-dashed rounded-lg">
|
||||
暂无报警联系人，点击「添加联系人」创建
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{contacts.map((c) => (
|
||||
<Card key={c.id} className="hover:border-primary/50 transition-colors">
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<CardTitle className="text-base">{c.name}</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-1 text-sm text-muted-foreground">
|
||||
{c.phone && <div>📱 {c.phone}</div>}
|
||||
{c.email && <div>📧 {c.email}</div>}
|
||||
{c.dingtalk && <div>🔷 钉钉已配置</div>}
|
||||
{c.feishu && <div>🟢 飞书已配置</div>}
|
||||
{c.wechat && <div>💚 企业微信已配置</div>}
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Button variant="outline" size="sm" className="flex-1"
|
||||
onClick={() => { setEditingContact(c); setContactDialogOpen(true); }}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button variant="outline" size="sm"
|
||||
onClick={async () => {
|
||||
const ok = await _confirm({ title: '删除联系人', description: `确定删除联系人「${c.name}」？`, confirmText: '删除', variant: 'destructive' });
|
||||
if (!ok) return;
|
||||
try { await alertApi.deleteContact(c.id); toast.success('已删除'); fetchContacts(); }
|
||||
catch { toast.error('删除失败'); }
|
||||
}}>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
{/* 报警联系组 Tab */}
|
||||
|
||||
Reference in new issue
Block a user