chore(web-platform): release V0.6.1 工程质量优化
This commit is contained in:
@@ -1,7 +1,141 @@
|
||||
import {useEffect,useRef} from 'react';
|
||||
import {Bell,CheckCircle2,Info,Trash2,TriangleAlert,XCircle} from 'lucide-react';
|
||||
import {Badge,IconButton,Popover} from '../../components/ui';
|
||||
export interface WorkbenchNotification{id:number;title:string;detail?:string;tone:'success'|'warning'|'danger'|'info';at:number;}
|
||||
const icons={success:CheckCircle2,warning:TriangleAlert,danger:XCircle,info:Info};
|
||||
export function NotificationCenter({items,onDismiss,onClear,onOpenLog}:{items:WorkbenchNotification[];onDismiss:(id:number)=>void;onClear:()=>void;onOpenLog?:()=>void}){return <Popover label="通知中心" trigger={({open,toggle})=><IconButton tooltip="通知中心" aria-label="通知中心" aria-expanded={open} onClick={toggle}><Bell className="h-4 w-4"/>{items.length>0&&<span className="absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-warning"/>}</IconButton>}>{({close})=><div className="w-80 overflow-hidden rounded-lg border border-border bg-surface-elevated shadow-xl"><header className="flex h-9 items-center justify-between border-b border-border px-3"><h2 className="text-xs font-semibold">通知</h2><div className="flex gap-2">{onOpenLog&&<button className="text-[10px] text-accent" onClick={()=>{close();onOpenLog();}}>事件日志</button>}{items.length>0&&<button className="flex items-center gap-1 text-[10px] text-text-tertiary hover:text-danger" onClick={onClear}><Trash2 className="h-3 w-3"/>清空</button>}</div></header><div className="panel-scroll max-h-80 overflow-auto">{items.length?items.map(item=>{const Icon=icons[item.tone];return <article key={item.id} className="flex gap-2 border-b border-border px-3 py-2.5 last:border-0"><Icon className={`mt-0.5 h-4 w-4 shrink-0 ${item.tone==='success'?'text-success':item.tone==='warning'?'text-warning':item.tone==='danger'?'text-danger':'text-accent'}`}/><div className="min-w-0 flex-1"><div className="flex items-center gap-2"><h3 className="truncate text-xs font-medium">{item.title}</h3><Badge>{new Date(item.at).toLocaleTimeString('zh-CN',{hour:'2-digit',minute:'2-digit'})}</Badge></div>{item.detail&&<p className="mt-1 line-clamp-3 text-[10px] leading-4 text-text-tertiary">{item.detail}</p>}</div><IconButton aria-label={`移除通知：${item.title}`} tooltip="移除" onClick={()=>onDismiss(item.id)}><XCircle className="h-3.5 w-3.5"/></IconButton></article>}):<p className="p-6 text-center text-xs text-text-tertiary">当前没有通知</p>}</div></div>}</Popover>;}
|
||||
export function ToastViewport({item,onDismiss}:{item?:WorkbenchNotification;onDismiss:(id:number)=>void}){const dismissRef=useRef(onDismiss);useEffect(()=>{dismissRef.current=onDismiss;},[onDismiss]);useEffect(()=>{if(!item)return;const timer=window.setTimeout(()=>dismissRef.current(item.id),4000);return()=>window.clearTimeout(timer);},[item]);if(!item)return null;const Icon=icons[item.tone];return <div role="status" className="pointer-events-auto absolute right-4 top-4 z-30 flex w-80 gap-2 rounded-lg border border-border bg-surface-elevated p-3 shadow-xl"><Icon className="h-4 w-4 shrink-0 text-accent"/><div className="min-w-0 flex-1"><p className="text-xs font-medium">{item.title}</p>{item.detail&&<p className="mt-1 line-clamp-2 text-[10px] text-text-tertiary">{item.detail}</p>}</div></div>;}
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { Bell, CheckCircle2, Info, Trash2, TriangleAlert, XCircle } from 'lucide-react';
|
||||
import { Badge, IconButton, Popover } from '../../components/ui';
|
||||
export interface WorkbenchNotification {
|
||||
id: number;
|
||||
title: string;
|
||||
detail?: string;
|
||||
tone: 'success' | 'warning' | 'danger' | 'info';
|
||||
at: number;
|
||||
}
|
||||
const icons = { success: CheckCircle2, warning: TriangleAlert, danger: XCircle, info: Info };
|
||||
export function NotificationCenter({
|
||||
items,
|
||||
onDismiss,
|
||||
onClear,
|
||||
onOpenLog,
|
||||
}: {
|
||||
items: WorkbenchNotification[];
|
||||
onDismiss: (id: number) => void;
|
||||
onClear: () => void;
|
||||
onOpenLog?: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Popover
|
||||
label="通知中心"
|
||||
trigger={({ open, toggle }) => (
|
||||
<IconButton tooltip="通知中心" aria-label="通知中心" aria-expanded={open} onClick={toggle}>
|
||||
<Bell className="h-4 w-4" />
|
||||
{items.length > 0 && (
|
||||
<span className="absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-warning" />
|
||||
)}
|
||||
</IconButton>
|
||||
)}
|
||||
>
|
||||
{({ close }) => (
|
||||
<div className="w-80 overflow-hidden rounded-lg border border-border bg-surface-elevated shadow-xl">
|
||||
<header className="flex h-9 items-center justify-between border-b border-border px-3">
|
||||
<h2 className="text-xs font-semibold">通知</h2>
|
||||
<div className="flex gap-2">
|
||||
{onOpenLog && (
|
||||
<button
|
||||
className="text-[10px] text-accent"
|
||||
onClick={() => {
|
||||
close();
|
||||
onOpenLog();
|
||||
}}
|
||||
>
|
||||
事件日志
|
||||
</button>
|
||||
)}
|
||||
{items.length > 0 && (
|
||||
<button
|
||||
className="flex items-center gap-1 text-[10px] text-text-tertiary hover:text-danger"
|
||||
onClick={onClear}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
清空
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
<div className="panel-scroll max-h-80 overflow-auto">
|
||||
{items.length ? (
|
||||
items.map((item) => {
|
||||
const Icon = icons[item.tone];
|
||||
return (
|
||||
<article
|
||||
key={item.id}
|
||||
className="flex gap-2 border-b border-border px-3 py-2.5 last:border-0"
|
||||
>
|
||||
<Icon
|
||||
className={`mt-0.5 h-4 w-4 shrink-0 ${item.tone === 'success' ? 'text-success' : item.tone === 'warning' ? 'text-warning' : item.tone === 'danger' ? 'text-danger' : 'text-accent'}`}
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="truncate text-xs font-medium">{item.title}</h3>
|
||||
<Badge>
|
||||
{new Date(item.at).toLocaleTimeString('zh-CN', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</Badge>
|
||||
</div>
|
||||
{item.detail && (
|
||||
<p className="mt-1 line-clamp-3 text-[10px] leading-4 text-text-tertiary">
|
||||
{item.detail}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<IconButton
|
||||
aria-label={`移除通知：${item.title}`}
|
||||
tooltip="移除"
|
||||
onClick={() => onDismiss(item.id)}
|
||||
>
|
||||
<XCircle className="h-3.5 w-3.5" />
|
||||
</IconButton>
|
||||
</article>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="p-6 text-center text-xs text-text-tertiary">当前没有通知</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
export function ToastViewport({
|
||||
item,
|
||||
onDismiss,
|
||||
}: {
|
||||
item?: WorkbenchNotification;
|
||||
onDismiss: (id: number) => void;
|
||||
}) {
|
||||
const dismissRef = useRef(onDismiss);
|
||||
useEffect(() => {
|
||||
dismissRef.current = onDismiss;
|
||||
}, [onDismiss]);
|
||||
useEffect(() => {
|
||||
if (!item) return;
|
||||
const timer = window.setTimeout(() => dismissRef.current(item.id), 4000);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [item]);
|
||||
if (!item) return null;
|
||||
const Icon = icons[item.tone];
|
||||
return (
|
||||
<div
|
||||
role="status"
|
||||
className="pointer-events-auto absolute right-4 top-4 z-30 flex w-80 gap-2 rounded-lg border border-border bg-surface-elevated p-3 shadow-xl"
|
||||
>
|
||||
<Icon className="h-4 w-4 shrink-0 text-accent" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs font-medium">{item.title}</p>
|
||||
{item.detail && (
|
||||
<p className="mt-1 line-clamp-2 text-[10px] text-text-tertiary">{item.detail}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user