Nvidia/BossAI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add workspace and claude messages support

Browse Source
This commit is contained in:
boos
2026-05-22 05:57:37 +08:00
parent c1074ddf71
commit 7cdb02ef1d
24 changed files with 3282 additions and 479 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/App.tsx
+169 -2
View File
@@ -4,7 +4,7 @@ import { ToastProvider, useToast } from './components/Toast.js';
import SearchModal from './components/SearchModal.js';
import NotificationPanel from './components/NotificationPanel.js';
import TooltipLayer from './components/TooltipLayer.js';
import { api } from './api.js';
import { api, userApi } from './api.js';
import { clearSession, getSessionToken } from './authSession.js';
import {
FIRST_USE_DOC_REMINDER_KEY,
@@ -20,6 +20,7 @@ import { MobileDrawer } from './components/MobileDrawer.js';
import CenteredModal from './components/CenteredModal.js';
import AdminLoginPage from './pages/auth/AdminLoginPage.js';
import UserLoginPage from './pages/auth/UserLoginPage.js';
import { SiteAnnouncementContent } from './pages/helpers/siteAnnouncementPresentation.js';
const Dashboard = lazy(() => import('./pages/Dashboard.js'));
const Sites = lazy(() => import('./pages/Sites.js'));
const Accounts = lazy(() => import('./pages/Accounts.js'));
@@ -38,6 +39,7 @@ const ModelTester = lazy(() => import('./pages/ModelTester.js'));
const ComfyUI = lazy(() => import('./pages/ComfyUI.js'));
const ComfyUIAgent = lazy(() => import('./pages/ComfyUIAgent.js'));
const PictureAgent = lazy(() => import('./pages/PictureAgent.js'));
const Workspace = lazy(() => import('./pages/Workspace.js'));
const Monitors = lazy(() => import('./pages/Monitors.js'));
const OAuthManagement = lazy(() => import('./pages/OAuthManagement.js'));
const SiteAnnouncements = lazy(() => import('./pages/SiteAnnouncements.js'));
@@ -46,6 +48,7 @@ const UserDashboard = lazy(() => import('./pages/UserDashboard.js'));
const UsageRecords = lazy(() => import('./pages/UsageRecords.js'));
const UserKeys = lazy(() => import('./pages/UserKeys.js'));
const UserProfile = lazy(() => import('./pages/UserProfile.js'));
const UserAnnouncements = lazy(() => import('./pages/UserAnnouncements.js'));
const UserManagement = lazy(() => import('./pages/UserManagement.js'));
type ThemeMode = 'system' | 'light' | 'dark';
type UserProfile = {
@@ -53,6 +56,14 @@ type UserProfile = {
avatarSeed: string;
avatarStyle: string;
};
type UserAnnouncementPopupRow = {
id: number;
title: string;
content: string;
level?: 'info' | 'warning' | 'error' | string;
publishedAt?: string | null;
firstSeenAt?: string | null;
};
const DICEBEAR_STYLES = [
'pixel-art',
'pixel-art-neutral',
@@ -240,13 +251,96 @@ function UserProfileModal({
</CenteredModal>
);
}
function UserAnnouncementPopup({
rows,
pending,
onClose,
onMarkRead,
onMarkAllRead,
t,
}: {
rows: UserAnnouncementPopupRow[];
pending: boolean;
onClose: () => void;
onMarkRead: (id: number) => void;
onMarkAllRead: () => void;
t: (text: string) => string;
}) {
const [index, setIndex] = useState(0);
useEffect(() => {
setIndex((current) => Math.min(current, Math.max(0, rows.length - 1)));
}, [rows.length]);
const row = rows[index] || null;
const level = row?.level === 'warning' || row?.level === 'error' ? row.level : 'info';
const levelLabel = level === 'error' ? t('紧急') : level === 'warning' ? t('重要') : t('普通');
return (
<CenteredModal
open={rows.length > 0}
onClose={onClose}
title={t('用户公告')}
maxWidth={640}
closeOnBackdrop
closeOnEscape
bodyStyle={{ display: 'flex', flexDirection: 'column', gap: 12 }}
footer={(
<>
{rows.length > 1 && (
<button
type="button"
className="btn btn-ghost"
onClick={() => setIndex((current) => (current + 1) % rows.length)}
disabled={pending}
>
{t('下一条')} {index + 1}/{rows.length}
</button>
)}
<button type="button" className="btn btn-ghost" onClick={onClose} disabled={pending}>
{t('稍后')}
</button>
<button type="button" className="btn btn-ghost" onClick={onMarkAllRead} disabled={pending}>
{pending ? t('处理中...') : t('全部已读')}
</button>
<button
type="button"
className="btn btn-primary"
onClick={() => row && onMarkRead(row.id)}
disabled={pending || !row}
>
{pending ? t('处理中...') : t('我知道了')}
</button>
</>
)}
>
{row && (
<>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
<span className={`badge ${level === 'error' ? 'badge-error' : level === 'warning' ? 'badge-warning' : 'badge-info'}`}>
{levelLabel}
</span>
<span style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>
{row.publishedAt || row.firstSeenAt || ''}
</span>
</div>
<div style={{ fontSize: 18, fontWeight: 700, color: 'var(--color-text-primary)' }}>
{row.title}
</div>
<div style={{ maxHeight: 360, overflow: 'auto' }}>
<SiteAnnouncementContent content={row.content} />
</div>
</>
)}
</CenteredModal>
);
}
export const sidebarGroups = [
{
label: '控制台',
items: [
{ to: '/', label: '仪表盘', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M4 5a1 1 0 011-1h4a1 1 0 011 1v5a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v2a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 12a1 1 0 011-1h4a1 1 0 011 1v7a1 1 0 01-1 1h-4a1 1 0 01-1-1v-7z" /></svg> },
{ to: '/sites', label: '站点管理', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /></svg> },
{ to: '/site-announcements', label: '站点公告', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M7 8h10M7 12h10M7 16h6M5 4h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z" /></svg> },
{ to: '/site-announcements', label: '用户公告', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M7 8h10M7 12h10M7 16h6M5 4h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z" /></svg> },
{ to: '/accounts', label: '连接管理', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg> },
{ to: '/oauth', label: 'OAuth 管理', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M15 7a3 3 0 106 0 3 3 0 00-6 0zM3 17a3 3 0 106 0 3 3 0 00-6 0zM15 17a3 3 0 106 0 3 3 0 00-6 0zM6 14V10m0 0a3 3 0 113-3m-3 3a3 3 0 003 3h6" /></svg> },
{ to: '/downstream-keys', label: '下游密钥', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M15 7a4 4 0 11-8 0 4 4 0 018 0z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M7 21a6 6 0 0110.8-3.6M15.5 18.5l2-2m0 0l2 2m-2-2V21" /></svg> },
@@ -256,6 +350,7 @@ export const sidebarGroups = [
{ to: '/picture-agent', label: '生图助手', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-5-6h.01M5 4h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z" /></svg> },
{ to: '/video-agent', label: '视频工作台', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg> },
{ to: '/comfyui-agent', label: '视频助手', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> },
{ to: '/workspace', label: '工作空间', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 7a2 2 0 012-2h4l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2V7z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 13h8M8 16h5" /></svg> },
],
},
{
@@ -275,6 +370,8 @@ export const userSidebarGroups = [
items: [
{ to: '/user/dashboard', label: '个人中心', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg> },
{ to: '/user/usage', label: '使用记录', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /></svg> },
{ to: '/user/announcements', label: '用户公告', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M7 8h10M7 12h10M7 16h6M5 4h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z" /></svg> },
{ to: '/user/about', label: '关于', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M13 16h-1v-4h-1m1-4h.01M12 3a9 9 0 110 18 9 9 0 010-18z" /></svg> },
],
},
{
@@ -283,6 +380,7 @@ export const userSidebarGroups = [
{ to: '/user/picture-agent', label: '生图助手', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-5-6h.01M5 4h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z" /></svg> },
{ to: '/user/video-agent', label: '视频工作台', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg> },
{ to: '/user/comfyui-agent', label: '视频助手', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> },
{ to: '/user/workspace', label: '工作空间', icon: <svg className="sidebar-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 7a2 2 0 012-2h4l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2V7z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 13h8M8 16h5" /></svg> },
],
},
];
@@ -292,6 +390,7 @@ const topNavItems = [
{ label: '生图助手', to: '/picture-agent' },
{ label: '视频工作台', to: '/video-agent' },
{ label: '视频助手', to: '/comfyui-agent' },
{ label: '工作空间', to: '/workspace' },
{ label: '关于', to: '/about' },
];
function PageTransition({ children }: { children: React.ReactNode }) {
@@ -322,6 +421,9 @@ function AppShell() {
const [showProfileModal, setShowProfileModal] = useState(false);
const [showSearch, setShowSearch] = useState(false);
const [showNotifications, setShowNotifications] = useState(false);
const [announcementPopupRows, setAnnouncementPopupRows] = useState<UserAnnouncementPopupRow[]>([]);
const [announcementPopupHidden, setAnnouncementPopupHidden] = useState(false);
const [announcementPopupPending, setAnnouncementPopupPending] = useState(false);
const [drawerOpen, setDrawerOpen] = useState(false);
const themeMenuPresence = useAnimatedVisibility(showThemeMenu, 160);
const userMenuPresence = useAnimatedVisibility(showUserMenu, 160);
@@ -439,6 +541,29 @@ function AppShell() {
localStorage.setItem(FIRST_USE_DOC_REMINDER_KEY, '1');
toast.info(`${t('首次使用建议先阅读站点文档：')}${SITE_DOCS_URL}`);
}, [authed, t, toast]);
useEffect(() => {
if (!userAuthed || !location.pathname.startsWith('/user/') || location.pathname === '/user/login') {
setAnnouncementPopupRows([]);
setAnnouncementPopupHidden(false);
return;
}
let cancelled = false;
const loadUnreadAnnouncements = async () => {
try {
const data = await userApi.getAnnouncements('read=false&limit=5');
if (cancelled) return;
const rows = Array.isArray(data) ? data : [];
setAnnouncementPopupRows(rows);
setAnnouncementPopupHidden(false);
} catch {
// Do not block the user dashboard if announcements fail to load.
}
};
void loadUnreadAnnouncements();
return () => {
cancelled = true;
};
}, [location.pathname, userAuthed]);
useEffect(() => {
const handler = (e: MouseEvent) => {
if (userMenuRef.current && !userMenuRef.current.contains(e.target as Node)) {
@@ -469,6 +594,33 @@ function AppShell() {
setShowProfileModal(false);
toast.success(t('个人信息已保存'));
};
const handleAnnouncementPopupClose = () => {
setAnnouncementPopupHidden(true);
};
const handleAnnouncementPopupMarkRead = async (id: number) => {
setAnnouncementPopupPending(true);
try {
await userApi.markAnnouncementRead(id);
setAnnouncementPopupRows((current) => current.filter((row) => row.id !== id));
toast.success(t('已标记为已读'));
} catch (error: any) {
toast.error(error?.message || t('标记失败'));
} finally {
setAnnouncementPopupPending(false);
}
};
const handleAnnouncementPopupMarkAllRead = async () => {
setAnnouncementPopupPending(true);
try {
await userApi.markAllAnnouncementsRead();
setAnnouncementPopupRows([]);
toast.success(t('已全部标记为已读'));
} catch (error: any) {
toast.error(error?.message || t('标记失败'));
} finally {
setAnnouncementPopupPending(false);
}
};
const isUserPage = location.pathname.startsWith('/user/');
const isAdminLoginPage = location.pathname === '/boos';
const isPublicUserPage = ['/user/login', '/user/register'].includes(location.pathname);
@@ -525,8 +677,11 @@ function AppShell() {
const currentSidebarGroups = isUserPage ? userSidebarGroups : sidebarGroups;
const currentTopNavItems = isUserPage ? [
{ label: '个人中心', to: '/user/dashboard' },
{ label: '用户公告', to: '/user/announcements' },
{ label: '视频工作台', to: '/user/video-agent' },
{ label: '视频助手', to: '/user/comfyui-agent' },
{ label: '工作空间', to: '/user/workspace' },
{ label: '关于', to: '/user/about' },
] : topNavItems;
return (
<>
@@ -764,6 +919,7 @@ function AppShell() {
<Route path="/picture-agent" element={<PictureAgent />} />
<Route path="/video-agent" element={<ComfyUI />} />
<Route path="/comfyui-agent" element={<ComfyUIAgent />} />
<Route path="/workspace" element={<Workspace />} />
<Route path="/about" element={<About />} />
<Route path="/users" element={<UserManagement />} />
@@ -775,9 +931,12 @@ function AppShell() {
<Route path="/user/dashboard/keys" element={<UserKeys />} />
<Route path="/user/dashboard/profile" element={<UserProfile />} />
<Route path="/user/usage" element={<UsageRecords />} />
<Route path="/user/announcements" element={<UserAnnouncements />} />
<Route path="/user/picture-agent" element={<PictureAgent />} />
<Route path="/user/video-agent" element={<ComfyUI />} />
<Route path="/user/comfyui-agent" element={<ComfyUIAgent />} />
<Route path="/user/workspace" element={<Workspace />} />
<Route path="/user/about" element={<About />} />
<Route path="*" element={<Navigate to={isUserPage ? "/user/dashboard" : "/"} />} />
</Routes>
@@ -792,6 +951,14 @@ function AppShell() {
onSave={handleSaveProfile}
t={t}
/>
<UserAnnouncementPopup
rows={announcementPopupHidden ? [] : announcementPopupRows}
pending={announcementPopupPending}
onClose={handleAnnouncementPopupClose}
onMarkRead={(id) => { void handleAnnouncementPopupMarkRead(id); }}
onMarkAllRead={() => { void handleAnnouncementPopupMarkAllRead(); }}
t={t}
/>
<SearchModal open={showSearch} onClose={() => setShowSearch(false)} />
</>
);
src/web/api.ts
+77
View File
@@ -1044,6 +1044,43 @@ export type DownstreamApiKeyTrendResponse = {
buckets: DownstreamApiKeyTrendBucket[];
};
export type WorkspaceAsset = {
id: number;
publicId: string;
userId?: number | null;
source: string;
kind: string;
title?: string | null;
prompt?: string | null;
model?: string | null;
status: string;
mimeType?: string | null;
fileName?: string | null;
hasLocalFile?: boolean;
remoteUrl?: string | null;
sizeBytes?: number;
createdAt?: string;
updatedAt?: string;
metadata?: unknown;
};
export type WorkspaceAssetsResponse = {
success: boolean;
items: WorkspaceAsset[];
total: number;
page: number;
pageSize: number;
};
export type WorkspaceAssetQuery = {
source?: string;
kind?: string;
q?: string;
userId?: number;
page?: number;
pageSize?: number;
};
export const api = {
// Sites
getSites: async () => {
@@ -1549,6 +1586,32 @@ export const api = {
clearEvents: () => request("/api/events", { method: "DELETE" }),
getSiteAnnouncements: (params?: string) =>
request(`/api/site-announcements${params ? "?" + params : ""}`),
createSiteAnnouncement: (payload: {
title: string;
content: string;
level?: string;
status?: string;
startsAt?: string | null;
endsAt?: string | null;
}) =>
request("/api/site-announcements", {
method: "POST",
body: JSON.stringify(payload),
}),
updateSiteAnnouncement: (id: number, payload: {
title: string;
content: string;
level?: string;
status?: string;
startsAt?: string | null;
endsAt?: string | null;
}) =>
request(`/api/site-announcements/${id}`, {
method: "PUT",
body: JSON.stringify(payload),
}),
deleteSiteAnnouncement: (id: number) =>
request(`/api/site-announcements/${id}`, { method: "DELETE" }),
markSiteAnnouncementRead: (id: number) =>
request(`/api/site-announcements/${id}/read`, { method: "POST" }),
markAllSiteAnnouncementsRead: () =>
@@ -1872,6 +1935,10 @@ export const api = {
request(`/api/admin/users/${userId}/keys/${keyId}/reset`, { method: "POST" }),
updateUserKey: (userId: number, keyId: number, data: any) =>
request(`/api/admin/users/${userId}/keys/${keyId}`, { method: "PATCH", body: JSON.stringify(data) }),
getWorkspaceAssets: (params?: WorkspaceAssetQuery) =>
request<WorkspaceAssetsResponse>(`/api/workspace/assets${buildQueryString(params)}`),
deleteWorkspaceAsset: (publicId: string) =>
request(`/api/workspace/assets/${encodeURIComponent(publicId)}`, { method: "DELETE" }),
};
export const userApi = {
register: (data: { username: string; email: string; password: string }) =>
@@ -1893,4 +1960,14 @@ export const userApi = {
getLogs: (params?: { limit?: number; offset?: number; page?: number; page_size?: number; q?: string; status?: string; date_from?: string; date_to?: string }) =>
userRequest(`/api/user/logs${buildQueryString(params)}`),
getSummary: () => userRequest("/api/user/summary"),
getAnnouncements: (params?: string) =>
userRequest(`/api/user/announcements${params ? "?" + params : ""}`),
markAnnouncementRead: (id: number) =>
userRequest(`/api/user/announcements/${id}/read`, { method: "POST" }),
markAllAnnouncementsRead: () =>
userRequest("/api/user/announcements/read-all", { method: "POST" }),
getWorkspaceAssets: (params?: Omit<WorkspaceAssetQuery, "userId">) =>
userRequest<WorkspaceAssetsResponse>(`/api/user/workspace/assets${buildQueryString(params)}`),
deleteWorkspaceAsset: (publicId: string) =>
userRequest(`/api/user/workspace/assets/${encodeURIComponent(publicId)}`, { method: "DELETE" }),
};
src/web/pages/About.tsx
+2 -106
View File
@@ -1,10 +1,4 @@
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { api } from '../api.js';
import { tr } from '../i18n.js';
import { SITE_DOCS_URL } from '../docsLink.js';
import { buildUpdateReminder } from './helpers/updateCenterPresentation.js';
const VERSION = '1.3.0';
@@ -30,14 +24,9 @@ const TECH_STACK = [
{ name: 'ComfyUI / Docker', desc: '视频工作台和多租户工作流容器运行环境。' },
];
const LINKS = [
{ label: 'GitHub', href: 'https://github.com/cita-777/boosapi', icon: 'GH' },
{ label: 'Docker Hub', href: 'https://hub.docker.com/r/1467078763/boosapi', icon: 'DH' },
{ label: '站点文档', href: SITE_DOCS_URL, icon: 'DOC' },
];
const ENDPOINTS = [
{ path: '/v1/chat/completions', desc: 'OpenAI 兼容对话代理，支持非流式与流式。' },
{ path: '/v1/messages', desc: 'Claude Messages API 兼容入口，支持 Anthropic 请求、响应和流式事件。' },
{ path: '/v1/responses', desc: 'Responses API 兼容代理，可接入支持该协议的上游。' },
{ path: '/v1/images/generations', desc: '图像生成代理，供生图助手和 ComfyUI 图像节点使用。' },
{ path: '/v1/videos', desc: '视频生成任务入口，已适配火山方舟任务创建。' },
@@ -46,49 +35,6 @@ const ENDPOINTS = [
];
export default function About() {
const [currentVersion, setCurrentVersion] = useState(`v${VERSION}`);
const [latestGitHubVersion, setLatestGitHubVersion] = useState('');
const [latestDockerHubVersion, setLatestDockerHubVersion] = useState('');
const [updateReminder, setUpdateReminder] = useState(() => buildUpdateReminder({
currentVersion: VERSION,
helper: null,
githubRelease: null,
dockerHubTag: null,
}));
useEffect(() => {
let cancelled = false;
const loadStatus = async () => {
try {
const status = await api.getUpdateCenterStatus() as {
currentVersion?: string;
githubRelease?: { normalizedVersion?: string; displayVersion?: string; tagName?: string | null; digest?: string | null } | null;
dockerHubTag?: { normalizedVersion?: string; displayVersion?: string; tagName?: string | null; digest?: string | null } | null;
helper?: { imageTag?: string | null; imageDigest?: string | null } | null;
};
const resolvedCurrentVersion = String(status.currentVersion || VERSION);
if (cancelled) return;
setCurrentVersion(`v${resolvedCurrentVersion}`);
setLatestGitHubVersion(String(status.githubRelease?.displayVersion || status.githubRelease?.normalizedVersion || ''));
setLatestDockerHubVersion(String(status.dockerHubTag?.displayVersion || status.dockerHubTag?.normalizedVersion || ''));
setUpdateReminder(buildUpdateReminder({
currentVersion: resolvedCurrentVersion,
helper: status.helper,
githubRelease: status.githubRelease,
dockerHubTag: status.dockerHubTag,
}));
} catch {
// ignore update-center lookup failures on about page
}
};
void loadStatus();
return () => {
cancelled = true;
};
}, []);
return (
<div className="animate-fade-in" style={{ maxWidth: 860 }}>
{/* Header */}
@@ -106,7 +52,7 @@ export default function About() {
/>
<div>
<div style={{ fontSize: 18, fontWeight: 700 }}>BoosAPI</div>
<div style={{ fontSize: 12, color: 'var(--color-text-tertiary)', marginTop: 2 }}>{currentVersion}</div>
<div style={{ fontSize: 12, color: 'var(--color-text-tertiary)', marginTop: 2 }}>v{VERSION}</div>
</div>
</div>
<div style={{ fontSize: 14, color: 'var(--color-text-secondary)', lineHeight: 1.8 }}>
@@ -131,27 +77,6 @@ export default function About() {
</div>
</div>
<div className="card animate-slide-up stagger-1" style={{ padding: 22, marginBottom: 14 }}>
<h3 style={{ fontSize: 15, fontWeight: 600, marginBottom: 12 }}>更新提醒</h3>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 10 }}>
<span className={`${updateReminder.badgeClassName} ${updateReminder.highlight ? 'stat-value-glow' : ''}`.trim()}>
{updateReminder.label}
</span>
<span className={updateReminder.highlight ? 'stat-value-glow' : ''} style={{ fontSize: 13, color: 'var(--color-text-primary)', fontWeight: 600 }}>
{updateReminder.detail}
</span>
</div>
<div style={{ display: 'grid', gap: 8, fontSize: 13 }}>
<div>GitHub 稳定版：{latestGitHubVersion || '暂无数据'}</div>
<div>Docker Hub：{latestDockerHubVersion || '暂无数据'}</div>
<div>
<Link to="/settings" style={{ color: 'var(--color-primary)', textDecoration: 'none', fontWeight: 600 }}>
前往更新中心
</Link>
</div>
</div>
</div>
{/* Features */}
<div className="card animate-slide-up stagger-2" style={{ padding: 22, marginBottom: 14 }}>
<h3 style={{ fontSize: 15, fontWeight: 600, marginBottom: 14 }}>{tr('核心特色')}</h3>
@@ -242,35 +167,6 @@ export default function About() {
</div>
</div>
{/* Links */}
<div className="card animate-slide-up stagger-5" style={{ padding: 22, marginBottom: 14 }}>
<h3 style={{ fontSize: 15, fontWeight: 600, marginBottom: 14 }}>{tr('项目链接')}</h3>
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
{LINKS.map((l) => (
<a
key={l.label}
href={l.href}
target="_blank"
rel="noopener noreferrer"
style={{
display: 'inline-flex', alignItems: 'center', gap: 6,
padding: '8px 16px', borderRadius: 8,
border: '1px solid var(--color-border-light)',
background: 'var(--color-bg-secondary)',
color: 'var(--color-text-primary)',
textDecoration: 'none', fontSize: 13, fontWeight: 500,
transition: 'border-color 0.15s',
}}
onMouseEnter={(e) => (e.currentTarget.style.borderColor = 'var(--color-primary)')}
onMouseLeave={(e) => (e.currentTarget.style.borderColor = 'var(--color-border-light)')}
>
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>{l.icon}</span>
<span>{tr(l.label)}</span>
</a>
))}
</div>
</div>
{/* Privacy */}
<div className="card animate-slide-up stagger-5" style={{ padding: 22 }}>
<h3 style={{ fontSize: 15, fontWeight: 600, marginBottom: 10 }}>{tr('数据与隐私')}</h3>
src/web/pages/About.update-center.test.tsx
+10 -37
View File
@@ -1,4 +1,4 @@
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { afterEach, describe, expect, it, vi } from 'vitest';
import { act, create, type ReactTestInstance, type ReactTestRenderer } from 'react-test-renderer';
import { MemoryRouter } from 'react-router-dom';
@@ -28,32 +28,12 @@ async function flushMicrotasks() {
});
}
describe('About update center', () => {
beforeEach(() => {
vi.clearAllMocks();
apiMock.getUpdateCenterStatus.mockResolvedValue({
currentVersion: '1.2.3',
githubRelease: {
normalizedVersion: '1.3.0',
displayVersion: '1.3.0',
url: 'https://github.com/cita-777/metapi/releases/tag/v1.3.0',
},
dockerHubTag: {
normalizedVersion: 'latest',
displayVersion: 'latest @ sha256:efb2ee655386',
},
helper: {
imageTag: 'latest',
imageDigest: 'sha256:cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc',
},
});
});
describe('About page', () => {
afterEach(() => {
vi.clearAllMocks();
});
it('shows current version, newer release summaries, and a highlighted update reminder', async () => {
it('shows product information without update prompts or project links', async () => {
let root!: ReactTestRenderer;
try {
await act(async () => {
@@ -66,20 +46,13 @@ describe('About update center', () => {
await flushMicrotasks();
const text = collectText(root.root);
expect(text).toContain('v1.2.3');
expect(text).toContain('GitHub 稳定版');
expect(text).toContain('1.3.0');
expect(text).toContain('Docker Hub');
expect(text).toContain('latest @ sha256:efb2ee655386');
expect(text).toContain('发现新版本');
expect(text).toContain('前往更新中心');
const highlightedReminder = root.root.find((node) => (
typeof node.props.className === 'string'
&& node.props.className.includes('stat-value-glow')
&& collectText(node).includes('发现新版本')
));
expect(collectText(highlightedReminder)).toContain('发现新版本');
expect(text).toContain('关于 BoosAPI');
expect(text).toContain('核心特色');
expect(text).toContain('兼容入口');
expect(text).not.toContain('更新提醒');
expect(text).not.toContain('前往更新中心');
expect(text).not.toContain('项目链接');
expect(apiMock.getUpdateCenterStatus).not.toHaveBeenCalled();
} finally {
root?.unmount();
}
src/web/pages/SiteAnnouncements.tsx
+259 -158
View File
@@ -1,77 +1,82 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useEffect, useMemo, useState } from 'react';
import { api } from '../api.js';
import { useToast } from '../components/Toast.js';
import { clearFocusParams, readFocusAnnouncementId } from './helpers/navigationFocus.js';
import {
formatSiteAnnouncementSeenAt,
readClientTimeZone,
resolveSiteAnnouncementTimeZone,
SiteAnnouncementContent,
} from './helpers/siteAnnouncementPresentation.js';
import { SiteAnnouncementContent } from './helpers/siteAnnouncementPresentation.js';
import { tr } from '../i18n.js';
type SiteAnnouncementRow = {
type AnnouncementLevel = 'info' | 'warning' | 'error';
type AnnouncementStatus = 'draft' | 'published' | 'archived';
type AnnouncementRow = {
id: number;
siteId: number;
platform: string;
sourceKey: string;
title: string;
content: string;
level: 'info' | 'warning' | 'error';
level: AnnouncementLevel;
status?: AnnouncementStatus;
firstSeenAt?: string | null;
lastSeenAt?: string | null;
readAt?: string | null;
publishedAt?: string | null;
readCount?: number | null;
};
type SiteRow = {
id: number;
name: string;
platform?: string | null;
type AnnouncementForm = {
id: number | null;
title: string;
content: string;
level: AnnouncementLevel;
status: AnnouncementStatus;
};
const emptyForm: AnnouncementForm = {
id: null,
title: '',
content: '',
level: 'info',
status: 'published',
};
const levelLabels: Record<AnnouncementLevel, string> = {
info: '普通',
warning: '重要',
error: '紧急',
};
const statusLabels: Record<AnnouncementStatus, string> = {
draft: '草稿',
published: '已发布',
archived: '已归档',
};
function normalizeStatus(value: string | undefined | null): AnnouncementStatus {
return value === 'draft' || value === 'archived' ? value : 'published';
}
function normalizeLevel(value: string | undefined | null): AnnouncementLevel {
return value === 'warning' || value === 'error' ? value : 'info';
}
export default function SiteAnnouncements() {
const location = useLocation();
const navigate = useNavigate();
const toast = useToast();
const [rows, setRows] = useState<SiteAnnouncementRow[]>([]);
const [sites, setSites] = useState<SiteRow[]>([]);
const [rows, setRows] = useState<AnnouncementRow[]>([]);
const [loading, setLoading] = useState(true);
const [refreshing, setRefreshing] = useState(false);
const [saving, setSaving] = useState(false);
const [clearing, setClearing] = useState(false);
const [markingAll, setMarkingAll] = useState(false);
const [serverTimeZone, setServerTimeZone] = useState<string | undefined>(undefined);
const [highlightAnnouncementId, setHighlightAnnouncementId] = useState<number | null>(null);
const rowRefs = useRef<Map<number, HTMLDivElement>>(new Map());
const highlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const viewerTimeZone = useMemo(() => readClientTimeZone(), []);
const displayTimeZone = resolveSiteAnnouncementTimeZone(viewerTimeZone, serverTimeZone);
const [form, setForm] = useState<AnnouncementForm>(emptyForm);
const siteNameById = useMemo(() => {
const map = new Map<number, string>();
for (const site of sites) {
map.set(site.id, site.name);
}
return map;
}, [sites]);
const publishedCount = useMemo(
() => rows.filter((row) => normalizeStatus(row.status) === 'published').length,
[rows],
);
const load = async (silent = false) => {
if (silent) setRefreshing(true);
else setLoading(true);
try {
const [announcementRows, siteRows, runtimeInfo] = await Promise.all([
api.getSiteAnnouncements(),
api.getSites(),
api.getRuntimeSettings().catch(() => null),
]);
const announcementRows = await api.getSiteAnnouncements();
setRows(Array.isArray(announcementRows) ? announcementRows : []);
setSites(Array.isArray(siteRows) ? siteRows : []);
const nextServerTimeZone = typeof runtimeInfo?.serverTimeZone === 'string'
? runtimeInfo.serverTimeZone.trim()
: '';
setServerTimeZone(nextServerTimeZone || undefined);
} catch (error: any) {
toast.error(error?.message || '加载站点公告失败');
toast.error(error?.message || '加载用户公告失败');
} finally {
setLoading(false);
setRefreshing(false);
@@ -80,47 +85,75 @@ export default function SiteAnnouncements() {
useEffect(() => {
void load();
return () => {
const win = globalThis as typeof globalThis & {
clearTimeout?: typeof clearTimeout;
};
if (highlightTimerRef.current && typeof win.clearTimeout === 'function') {
win.clearTimeout(highlightTimerRef.current);
}
};
}, []);
useEffect(() => {
const focusAnnouncementId = readFocusAnnouncementId(location.search);
if (!focusAnnouncementId || loading) return;
const row = rowRefs.current.get(focusAnnouncementId);
const nextSearch = clearFocusParams(location.search);
const win = globalThis as typeof globalThis & {
setTimeout?: typeof setTimeout;
clearTimeout?: typeof clearTimeout;
};
if (!row) {
navigate({ pathname: location.pathname, search: nextSearch }, { replace: true });
const resetForm = () => setForm(emptyForm);
const editRow = (row: AnnouncementRow) => {
setForm({
id: row.id,
title: row.title || '',
content: row.content || '',
level: normalizeLevel(row.level),
status: normalizeStatus(row.status),
});
};
const submit = async () => {
const title = form.title.trim();
const content = form.content.trim();
if (!title) {
toast.error('请填写公告标题');
return;
}
row.scrollIntoView?.({ behavior: 'smooth', block: 'center' });
setHighlightAnnouncementId(focusAnnouncementId);
if (highlightTimerRef.current && typeof win.clearTimeout === 'function') {
win.clearTimeout(highlightTimerRef.current);
if (!content) {
toast.error('请填写公告内容');
return;
}
if (typeof win.setTimeout === 'function') {
highlightTimerRef.current = win.setTimeout(() => {
setHighlightAnnouncementId((current) => (current === focusAnnouncementId ? null : current));
}, 2200);
setSaving(true);
try {
const payload = {
title,
content,
level: form.level,
status: form.status,
};
if (form.id) {
await api.updateSiteAnnouncement(form.id, payload);
toast.success('公告已更新');
} else {
await api.createSiteAnnouncement(payload);
toast.success(form.status === 'published' ? '公告已发布' : '草稿已保存');
}
resetForm();
await load(true);
} catch (error: any) {
toast.error(error?.message || '保存公告失败');
} finally {
setSaving(false);
}
navigate({ pathname: location.pathname, search: nextSearch }, { replace: true });
}, [loading, location.pathname, location.search, navigate, rows]);
};
const removeRow = async (row: AnnouncementRow) => {
if (typeof window !== 'undefined' && !window.confirm(`确定删除公告「${row.title}」吗？`)) return;
try {
await api.deleteSiteAnnouncement(row.id);
setRows((current) => current.filter((item) => item.id !== row.id));
if (form.id === row.id) resetForm();
toast.success('公告已删除');
} catch (error: any) {
toast.error(error?.message || '删除公告失败');
}
};
const clearAll = async () => {
if (typeof window !== 'undefined' && !window.confirm('确定清空全部用户公告吗？')) return;
setClearing(true);
try {
await api.clearSiteAnnouncements();
setRows([]);
resetForm();
toast.success('公告已清空');
} catch (error: any) {
toast.error(error?.message || '清空公告失败');
@@ -129,35 +162,27 @@ export default function SiteAnnouncements() {
}
};
const markAllRead = async () => {
setMarkingAll(true);
try {
await api.markAllSiteAnnouncementsRead();
setRows((current) => current.map((row) => ({
...row,
readAt: row.readAt || new Date().toISOString(),
})));
toast.success('已标记全部为已读');
} catch (error: any) {
toast.error(error?.message || '标记失败');
} finally {
setMarkingAll(false);
}
};
const triggerSync = async () => {
try {
await api.syncSiteAnnouncements();
toast.success('公告同步任务已启动');
} catch (error: any) {
toast.error(error?.message || '启动同步失败');
}
const inputStyle: React.CSSProperties = {
width: '100%',
padding: '10px 12px',
border: '1px solid var(--color-border)',
borderRadius: 8,
background: 'var(--color-bg)',
color: 'var(--color-text-primary)',
fontSize: 13,
outline: 'none',
boxSizing: 'border-box',
};
return (
<div className="animate-fade-in">
<div className="page-header">
<h2 className="page-title">{tr('站点公告')}</h2>
<div>
<h2 className="page-title">{tr('用户公告')}</h2>
<div style={{ marginTop: 4, fontSize: 12, color: 'var(--color-text-tertiary)' }}>
管理员发布给普通用户的站内公告，会在普通用户面板中展示。
</div>
</div>
<div className="page-actions">
<button
onClick={() => load(true)}
@@ -167,24 +192,9 @@ export default function SiteAnnouncements() {
>
{refreshing ? <><span className="spinner spinner-sm" /> 刷新中...</> : '刷新'}
</button>
<button
onClick={markAllRead}
disabled={markingAll}
className="btn btn-ghost"
style={{ border: '1px solid var(--color-border)', padding: '8px 14px' }}
>
{markingAll ? <><span className="spinner spinner-sm" /> 标记中...</> : '全部已读'}
</button>
<button
onClick={triggerSync}
className="btn btn-ghost"
style={{ border: '1px solid var(--color-border)', padding: '8px 14px' }}
>
手动同步
</button>
<button
onClick={clearAll}
disabled={clearing}
disabled={clearing || rows.length === 0}
className="btn btn-link btn-link-danger"
>
{clearing ? <><span className="spinner spinner-sm" /> 清空中...</> : '清空公告'}
@@ -192,48 +202,139 @@ export default function SiteAnnouncements() {
</div>
</div>
<div className="card" style={{ padding: 0 }}>
{loading ? (
<div style={{ padding: 24, textAlign: 'center' }}>
<span className="spinner spinner-sm" />
</div>
) : rows.length === 0 ? (
<div style={{ padding: 32, textAlign: 'center' }}>
<div className="empty-state-title">暂无公告</div>
<div className="empty-state-desc">当前没有可显示的站点公告。</div>
</div>
) : (
rows.map((row, index) => (
<div
key={row.id}
ref={(node) => {
if (node) rowRefs.current.set(row.id, node);
else rowRefs.current.delete(row.id);
}}
className={`animate-slide-up stagger-${Math.min(index + 1, 5)} ${highlightAnnouncementId === row.id ? 'row-focus-highlight' : ''}`.trim()}
style={{
padding: '16px 18px',
borderBottom: index === rows.length - 1 ? 'none' : '1px solid var(--color-border-light)',
}}
>
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'center', marginBottom: 6 }}>
<div style={{ fontSize: 15, fontWeight: 600 }}>{row.title}</div>
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
<span className="badge badge-muted">{siteNameById.get(row.siteId) || `站点 #${row.siteId}`}</span>
<span className="badge badge-info">{row.platform}</span>
<span className={`badge ${row.readAt ? 'badge-muted' : 'badge-warning'}`}>{row.readAt ? '已读' : '未读'}</span>
</div>
</div>
<SiteAnnouncementContent content={row.content} />
<div
style={{ marginTop: 8, fontSize: 12, color: 'var(--color-text-muted)' }}
title={displayTimeZone ? `本地时区：${displayTimeZone}` : undefined}
>
首次发现：{formatSiteAnnouncementSeenAt(row.firstSeenAt || row.lastSeenAt || '', displayTimeZone)}
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'minmax(280px, 360px) 1fr', gap: 14, alignItems: 'start' }}>
<div className="card" style={{ padding: 18 }}>
<h3 style={{ fontSize: 15, fontWeight: 600, marginBottom: 14 }}>
{form.id ? '编辑公告' : '发布公告'}
</h3>
<div style={{ display: 'grid', gap: 12 }}>
<label style={{ display: 'grid', gap: 6 }}>
<span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>标题</span>
<input
value={form.title}
onChange={(event) => setForm((current) => ({ ...current, title: event.target.value }))}
placeholder="例如：系统维护通知"
style={inputStyle}
/>
</label>
<label style={{ display: 'grid', gap: 6 }}>
<span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>公告内容</span>
<textarea
value={form.content}
onChange={(event) => setForm((current) => ({ ...current, content: event.target.value }))}
placeholder="写给普通用户看的公告内容，支持简单 Markdown。"
rows={8}
style={{ ...inputStyle, resize: 'vertical', lineHeight: 1.6 }}
/>
</label>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
<label style={{ display: 'grid', gap: 6 }}>
<span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>级别</span>
<select
value={form.level}
onChange={(event) => setForm((current) => ({ ...current, level: event.target.value as AnnouncementLevel }))}
style={inputStyle}
>
<option value="info">普通</option>
<option value="warning">重要</option>
<option value="error">紧急</option>
</select>
</label>
<label style={{ display: 'grid', gap: 6 }}>
<span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>状态</span>
<select
value={form.status}
onChange={(event) => setForm((current) => ({ ...current, status: event.target.value as AnnouncementStatus }))}
style={inputStyle}
>
<option value="published">发布</option>
<option value="draft">草稿</option>
<option value="archived">归档</option>
</select>
</label>
</div>
))
)}
<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
{form.id && (
<button type="button" className="btn btn-ghost" onClick={resetForm}>
取消编辑
</button>
)}
<button type="button" className="btn btn-primary" onClick={submit} disabled={saving}>
{saving ? <><span className="spinner spinner-sm" /> 保存中...</> : form.id ? '保存修改' : '发布公告'}
</button>
</div>
</div>
</div>
<div className="card" style={{ padding: 0 }}>
<div
style={{
padding: '14px 18px',
borderBottom: '1px solid var(--color-border-light)',
display: 'flex',
justifyContent: 'space-between',
gap: 12,
alignItems: 'center',
}}
>
<div style={{ fontSize: 14, fontWeight: 600 }}>公告列表</div>
<div style={{ fontSize: 12, color: 'var(--color-text-tertiary)' }}>
共 {rows.length} 条，已发布 {publishedCount} 条
</div>
</div>
{loading ? (
<div style={{ padding: 24, textAlign: 'center' }}>
<span className="spinner spinner-sm" />
</div>
) : rows.length === 0 ? (
<div style={{ padding: 32, textAlign: 'center' }}>
<div className="empty-state-title">暂无公告</div>
<div className="empty-state-desc">发布后普通用户可以在用户面板查看。</div>
</div>
) : (
rows.map((row, index) => {
const status = normalizeStatus(row.status);
const level = normalizeLevel(row.level);
return (
<div
key={row.id}
className={`animate-slide-up stagger-${Math.min(index + 1, 5)}`}
style={{
padding: '16px 18px',
borderBottom: index === rows.length - 1 ? 'none' : '1px solid var(--color-border-light)',
}}
>
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'flex-start', marginBottom: 8 }}>
<div>
<div style={{ fontSize: 15, fontWeight: 600 }}>{row.title}</div>
<div style={{ marginTop: 5, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
<span className={`badge ${level === 'error' ? 'badge-error' : level === 'warning' ? 'badge-warning' : 'badge-info'}`}>
{levelLabels[level]}
</span>
<span className={`badge ${status === 'published' ? 'badge-success' : status === 'draft' ? 'badge-muted' : 'badge-warning'}`}>
{statusLabels[status]}
</span>
<span className="badge badge-muted">已读 {row.readCount || 0}</span>
</div>
</div>
<div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
<button type="button" className="btn btn-link btn-link-primary" onClick={() => editRow(row)}>
编辑
</button>
<button type="button" className="btn btn-link btn-link-danger" onClick={() => removeRow(row)}>
删除
</button>
</div>
</div>
<SiteAnnouncementContent content={row.content} />
<div style={{ marginTop: 8, fontSize: 12, color: 'var(--color-text-muted)' }}>
发布时间：{row.publishedAt || row.firstSeenAt || '-'}
</div>
</div>
);
})
)}
</div>
</div>
</div>
);
src/web/pages/UserAnnouncements.tsx
+159
View File
@@ -0,0 +1,159 @@
import { useEffect, useState } from 'react';
import { userApi } from '../api.js';
import { useToast } from '../components/Toast.js';
import { SiteAnnouncementContent } from './helpers/siteAnnouncementPresentation.js';
type UserAnnouncementRow = {
id: number;
title: string;
content: string;
level: 'info' | 'warning' | 'error';
publishedAt?: string | null;
firstSeenAt?: string | null;
read?: boolean;
readAt?: string | null;
};
const levelLabels = {
info: '普通',
warning: '重要',
error: '紧急',
} as const;
export default function UserAnnouncements() {
const toast = useToast();
const [rows, setRows] = useState<UserAnnouncementRow[]>([]);
const [loading, setLoading] = useState(true);
const [refreshing, setRefreshing] = useState(false);
const [markingAll, setMarkingAll] = useState(false);
const [pending, setPending] = useState<Record<number, boolean>>({});
const load = async (silent = false) => {
if (silent) setRefreshing(true);
else setLoading(true);
try {
const data = await userApi.getAnnouncements();
setRows(Array.isArray(data) ? data : []);
} catch (error: any) {
toast.error(error?.message || '加载公告失败');
} finally {
setLoading(false);
setRefreshing(false);
}
};
useEffect(() => {
void load();
}, []);
const markRead = async (id: number) => {
setPending((current) => ({ ...current, [id]: true }));
try {
await userApi.markAnnouncementRead(id);
setRows((current) => current.map((row) => (
row.id === id ? { ...row, read: true, readAt: new Date().toISOString() } : row
)));
} catch (error: any) {
toast.error(error?.message || '标记失败');
} finally {
setPending((current) => ({ ...current, [id]: false }));
}
};
const markAllRead = async () => {
setMarkingAll(true);
try {
await userApi.markAllAnnouncementsRead();
const now = new Date().toISOString();
setRows((current) => current.map((row) => ({ ...row, read: true, readAt: row.readAt || now })));
toast.success('已全部标记为已读');
} catch (error: any) {
toast.error(error?.message || '标记失败');
} finally {
setMarkingAll(false);
}
};
return (
<div className="animate-fade-in">
<div className="page-header">
<h2 className="page-title">用户公告</h2>
<div className="page-actions">
<button
type="button"
onClick={() => load(true)}
disabled={refreshing}
className="btn btn-ghost"
style={{ border: '1px solid var(--color-border)', padding: '8px 14px' }}
>
{refreshing ? <><span className="spinner spinner-sm" /> 刷新中...</> : '刷新'}
</button>
<button
type="button"
onClick={markAllRead}
disabled={markingAll || rows.length === 0}
className="btn btn-ghost"
style={{ border: '1px solid var(--color-border)', padding: '8px 14px' }}
>
{markingAll ? <><span className="spinner spinner-sm" /> 标记中...</> : '全部已读'}
</button>
</div>
</div>
<div className="card" style={{ padding: 0 }}>
{loading ? (
<div style={{ padding: 24, textAlign: 'center' }}>
<span className="spinner spinner-sm" />
</div>
) : rows.length === 0 ? (
<div style={{ padding: 32, textAlign: 'center' }}>
<div className="empty-state-title">暂无公告</div>
<div className="empty-state-desc">管理员发布的公告会显示在这里。</div>
</div>
) : (
rows.map((row, index) => {
const level = row.level === 'warning' || row.level === 'error' ? row.level : 'info';
return (
<div
key={row.id}
className={`animate-slide-up stagger-${Math.min(index + 1, 5)}`}
style={{
padding: '16px 18px',
borderBottom: index === rows.length - 1 ? 'none' : '1px solid var(--color-border-light)',
}}
>
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'flex-start', marginBottom: 8 }}>
<div>
<div style={{ fontSize: 15, fontWeight: 600 }}>{row.title}</div>
<div style={{ marginTop: 5, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
<span className={`badge ${level === 'error' ? 'badge-error' : level === 'warning' ? 'badge-warning' : 'badge-info'}`}>
{levelLabels[level]}
</span>
<span className={`badge ${row.read ? 'badge-muted' : 'badge-warning'}`}>
{row.read ? '已读' : '未读'}
</span>
</div>
</div>
{!row.read && (
<button
type="button"
className="btn btn-link btn-link-primary"
disabled={!!pending[row.id]}
onClick={() => markRead(row.id)}
>
{pending[row.id] ? <span className="spinner spinner-sm" /> : '标记已读'}
</button>
)}
</div>
<SiteAnnouncementContent content={row.content} />
<div style={{ marginTop: 8, fontSize: 12, color: 'var(--color-text-muted)' }}>
发布时间：{row.publishedAt || row.firstSeenAt || '-'}
</div>
</div>
);
})
)}
</div>
</div>
);
}
src/web/pages/UserDashboard.tsx
+45 -12
View File
@@ -54,23 +54,48 @@ export default function UserDashboard({ onLogout }: { onLogout?: () => void }) {
const loadData = useCallback(async () => {
if (!checkAuth()) return;
setLoading(true);
setError('');
try {
const [profileRes, keysRes, summaryRes, logsRes] = await Promise.all([
userApi.me(),
userApi.getApiKeys(),
userApi.getSummary(),
userApi.getLogs({ limit: 5 }),
]);
const profileRes = await userApi.me();
setProfile(profileRes.user);
setKeys(Array.isArray(keysRes) ? keysRes : (keysRes.keys || []));
setSummary(summaryRes);
setRecentLogs(logsRes.items || []);
} catch (err: any) {
setError(err?.message || '加载失败');
} finally {
if (String(err?.message || '').includes('401') || String(err?.message || '').includes('Unauthorized')) {
clearSession('user', localStorage);
navigate('/user/login', { replace: true });
}
setLoading(false);
return;
}
}, [checkAuth]);
const [keysRes, summaryRes, logsRes] = await Promise.allSettled([
userApi.getApiKeys(),
userApi.getSummary(),
userApi.getLogs({ limit: 5 }),
]);
if (keysRes.status === 'fulfilled') {
const payload: any = keysRes.value;
setKeys(Array.isArray(payload) ? payload : (payload.keys || []));
} else {
setKeys([]);
}
if (summaryRes.status === 'fulfilled') {
setSummary(summaryRes.value as UserSummary);
} else {
setSummary({ totalRequests: 0, successRequests: 0, totalCost: 0 });
}
if (logsRes.status === 'fulfilled') {
const payload: any = logsRes.value;
setRecentLogs(Array.isArray(payload?.items) ? payload.items : []);
} else {
setRecentLogs([]);
}
setLoading(false);
}, [checkAuth, navigate]);
useEffect(() => { loadData(); }, [loadData]);
@@ -88,7 +113,15 @@ export default function UserDashboard({ onLogout }: { onLogout?: () => void }) {
);
}
if (!profile) return null;
if (!profile) {
return (
<div className="page-container" style={{ padding: '24px', maxWidth: '1200px', margin: '0 auto' }}>
<div className="card" style={{ padding: 20, color: 'var(--color-danger)' }}>
{error || '用户信息加载失败'}
</div>
</div>
);
}
const successRate = summary && summary.totalRequests > 0
? ((summary.successRequests / summary.totalRequests) * 100).toFixed(1)
src/web/pages/Workspace.tsx
+572
View File
@@ -0,0 +1,572 @@
import React, { CSSProperties, useCallback, useEffect, useMemo, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { api, fetchSessionResponse, userApi, type WorkspaceAsset } from '../api.js';
import type { SessionAudience } from '../authSession.js';
const SOURCE_OPTIONS = [
{ value: 'all', label: '全部来源' },
{ value: 'picture-agent', label: '生图助手' },
{ value: 'comfyui-agent', label: '视频助手' },
{ value: 'video-agent', label: '视频工作台' },
{ value: 'comfyui', label: 'ComfyUI' },
];
const KIND_OPTIONS = [
{ value: 'all', label: '全部类型' },
{ value: 'image', label: '图片' },
{ value: 'video', label: '视频' },
{ value: 'audio', label: '音频' },
{ value: 'workflow', label: '工作流' },
{ value: 'file', label: '文件' },
];
function formatBytes(value?: number) {
const bytes = Number(value || 0);
if (!bytes) return '未记录';
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
}
function sourceLabel(value: string) {
return SOURCE_OPTIONS.find((item) => item.value === value)?.label || value || '未知来源';
}
function kindLabel(value: string) {
return KIND_OPTIONS.find((item) => item.value === value)?.label || value || '文件';
}
function statusLabel(value?: string) {
if (value === 'failed') return '归档失败';
if (value === 'pending') return '处理中';
return '已归档';
}
function assetTitle(asset: WorkspaceAsset) {
return asset.title || asset.prompt || asset.fileName || asset.publicId;
}
export default function Workspace() {
const location = useLocation();
const audience: SessionAudience = location.pathname.startsWith('/user/') ? 'user' : 'admin';
const [items, setItems] = useState<WorkspaceAsset[]>([]);
const [total, setTotal] = useState(0);
const [source, setSource] = useState('all');
const [kind, setKind] = useState('all');
const [query, setQuery] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [previewUrls, setPreviewUrls] = useState<Record<string, string>>({});
const [selectedId, setSelectedId] = useState('');
const selected = items.find((item) => item.publicId === selectedId) || items[0] || null;
const sourceStats = useMemo(() => {
const counts = new Map<string, number>();
items.forEach((item) => counts.set(item.source, (counts.get(item.source) || 0) + 1));
return Array.from(counts.entries())
.sort((a, b) => b[1] - a[1])
.slice(0, 4);
}, [items]);
const localCount = useMemo(() => items.filter((item) => item.hasLocalFile).length, [items]);
const params = useMemo(() => ({
source: source === 'all' ? undefined : source,
kind: kind === 'all' ? undefined : kind,
q: query.trim() || undefined,
page: 1,
pageSize: 60,
}), [kind, query, source]);
const load = useCallback(async () => {
setLoading(true);
setError('');
try {
const response = audience === 'user'
? await userApi.getWorkspaceAssets(params)
: await api.getWorkspaceAssets(params);
setItems(Array.isArray(response.items) ? response.items : []);
setTotal(Number(response.total || 0));
setSelectedId((current) => {
if (current && response.items?.some((item) => item.publicId === current)) return current;
return response.items?.[0]?.publicId || '';
});
} catch (err: any) {
setError(err?.message || '工作空间加载失败');
} finally {
setLoading(false);
}
}, [audience, params]);
useEffect(() => {
void load();
}, [load]);
useEffect(() => {
let cancelled = false;
const objectUrls: string[] = [];
async function hydratePreviews() {
const candidates = items
.filter((item) => item.hasLocalFile && (item.kind === 'image' || item.kind === 'video' || item.kind === 'audio'))
.slice(0, 24);
const next: Record<string, string> = {};
await Promise.all(candidates.map(async (asset) => {
try {
const response = await fetchSessionResponse(
audience,
`${audience === 'user' ? '/api/user' : '/api'}/workspace/assets/${encodeURIComponent(asset.publicId)}/file`,
{ timeoutMs: 30_000 },
);
if (!response.ok) return;
const blob = await response.blob();
const url = URL.createObjectURL(blob);
objectUrls.push(url);
next[asset.publicId] = url;
} catch {
// Preview hydration is best-effort; the asset row still remains usable.
}
}));
if (!cancelled) setPreviewUrls(next);
}
void hydratePreviews();
return () => {
cancelled = true;
objectUrls.forEach((url) => URL.revokeObjectURL(url));
};
}, [audience, items]);
const handleDelete = async (asset: WorkspaceAsset) => {
if (!window.confirm(`删除「${assetTitle(asset)}」？`)) return;
try {
if (audience === 'user') {
await userApi.deleteWorkspaceAsset(asset.publicId);
} else {
await api.deleteWorkspaceAsset(asset.publicId);
}
await load();
} catch (err: any) {
setError(err?.message || '删除失败');
}
};
const handleDownload = async (asset: WorkspaceAsset) => {
const previewUrl = previewUrls[asset.publicId];
const href = previewUrl || asset.remoteUrl || '';
if (!href) return;
const link = document.createElement('a');
link.href = href;
link.download = asset.fileName || `${asset.publicId}`;
link.rel = 'noopener';
document.body.appendChild(link);
link.click();
link.remove();
};
return (
<div>
<div className="page-header">
<div>
<h1 className="page-title">工作空间</h1>
<p className="page-subtitle">
{audience === 'user' ? '你的创作成品库' : '全部用户的创作成品库'} · 自动归档生图助手、视频助手和 ComfyUI 产出
</p>
</div>
<div className="page-actions">
<button type="button" className="btn btn-ghost" onClick={() => void load()} disabled={loading}>
{loading ? '刷新中...' : '刷新'}
</button>
</div>
</div>
<div style={summaryStyle}>
<div style={summaryItemStyle}>
<span style={summaryLabelStyle}>当前结果</span>
<strong style={summaryValueStyle}>{total}</strong>
</div>
<div style={summaryItemStyle}>
<span style={summaryLabelStyle}>本地文件</span>
<strong style={summaryValueStyle}>{localCount}</strong>
</div>
<div style={summaryItemStyle}>
<span style={summaryLabelStyle}>主要来源</span>
<strong style={{ ...summaryValueStyle, fontSize: 14 }}>
{sourceStats.length > 0 ? sourceStats.map(([name, count]) => `${sourceLabel(name)} ${count}`).join(' · ') : '暂无'}
</strong>
</div>
</div>
{error && <div className="alert alert-error" style={{ marginBottom: 12 }}>{error}</div>}
<div style={layoutStyle}>
<section>
<div style={toolbarStyle}>
<input
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="搜索标题、提示词、模型或来源"
style={inputStyle}
/>
<div style={filterRowStyle}>
{SOURCE_OPTIONS.map((option) => (
<button
key={option.value}
type="button"
style={source === option.value ? activeChipStyle : chipStyle}
onClick={() => setSource(option.value)}
>
{option.label}
</button>
))}
</div>
<div style={filterRowStyle}>
{KIND_OPTIONS.map((option) => (
<button
key={option.value}
type="button"
style={kind === option.value ? activeChipStyle : chipStyle}
onClick={() => setKind(option.value)}
>
{option.label}
</button>
))}
</div>
</div>
<div style={gridStyle}>
{items.length === 0 ? (
<div className="empty-state" style={{ minHeight: 360, gridColumn: '1 / -1' }}>
<div className="empty-state-title">{loading ? '正在加载工作空间' : '暂无成品产出'}</div>
<div className="empty-state-desc">生图助手、视频助手和 ComfyUI 的产出会归档到这里。</div>
</div>
) : items.map((asset) => {
const preview = previewUrls[asset.publicId] || asset.remoteUrl || '';
const active = selected?.publicId === asset.publicId;
return (
<button
type="button"
key={asset.publicId}
style={{
...cardStyle,
borderColor: active ? 'var(--color-primary)' : 'var(--color-border)',
boxShadow: active ? '0 14px 32px color-mix(in srgb, var(--color-primary) 16%, transparent)' : undefined,
}}
onClick={() => setSelectedId(asset.publicId)}
>
<div style={thumbStyle}>
{asset.kind === 'image' && preview ? (
<img src={preview} alt="" style={mediaStyle} />
) : asset.kind === 'video' && preview ? (
<video src={preview} style={mediaStyle} muted />
) : asset.kind === 'audio' ? (
<div style={placeholderStyle}>音频</div>
) : (
<div style={placeholderStyle}>{kindLabel(asset.kind)}</div>
)}
<span style={typeBadgeStyle}>{kindLabel(asset.kind)}</span>
</div>
<div style={cardBodyStyle}>
<strong style={cardTitleStyle}>{assetTitle(asset)}</strong>
<span style={metaStyle}>{sourceLabel(asset.source)} · {asset.model || '未记录模型'}</span>
<div style={cardFooterStyle}>
<span style={statusPillStyle}>{statusLabel(asset.status)}</span>
<span style={metaStyle}>{asset.createdAt || ''}</span>
</div>
</div>
</button>
);
})}
</div>
</section>
<aside style={detailStyle}>
{selected ? (
<>
<div style={detailHeaderStyle}>
<div>
<div style={detailEyebrowStyle}>{sourceLabel(selected.source)} · {kindLabel(selected.kind)}</div>
<h2 style={{ margin: '6px 0 0', fontSize: 18 }}>{assetTitle(selected)}</h2>
</div>
<span style={statusPillStyle}>{statusLabel(selected.status)}</span>
</div>
<div style={detailPreviewStyle}>
{selected.kind === 'image' && (previewUrls[selected.publicId] || selected.remoteUrl) ? (
<img src={previewUrls[selected.publicId] || selected.remoteUrl || ''} alt="" style={mediaStyle} />
) : selected.kind === 'video' && (previewUrls[selected.publicId] || selected.remoteUrl) ? (
<video src={previewUrls[selected.publicId] || selected.remoteUrl || ''} controls style={mediaStyle} />
) : selected.kind === 'audio' && previewUrls[selected.publicId] ? (
<audio src={previewUrls[selected.publicId]} controls style={{ width: '100%' }} />
) : (
<div style={placeholderStyle}>{kindLabel(selected.kind)}</div>
)}
</div>
<div style={detailMetaStyle}>
<div><span>用户</span><strong>{selected.userId ?? '管理员/系统'}</strong></div>
<div><span>模型</span><strong>{selected.model || '未记录'}</strong></div>
<div><span>大小</span><strong>{formatBytes(selected.sizeBytes)}</strong></div>
<div><span>文件</span><strong>{selected.hasLocalFile ? '本地归档' : '远程引用'}</strong></div>
</div>
{selected.prompt && (
<div style={promptPanelStyle}>
<span>提示词</span>
<p style={promptStyle}>{selected.prompt}</p>
</div>
)}
<div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
<button type="button" className="btn btn-primary" onClick={() => void handleDownload(selected)}>
下载
</button>
<button type="button" className="btn btn-ghost" onClick={() => void handleDelete(selected)}>
删除
</button>
</div>
</>
) : (
<div className="empty-state" style={{ minHeight: 260 }}>
<div className="empty-state-title">选择一个成品</div>
<div className="empty-state-desc">详情、预览和下载操作会显示在这里。</div>
</div>
)}
</aside>
</div>
</div>
);
}
const toolbarStyle: CSSProperties = {
display: 'flex',
flexDirection: 'column',
gap: 12,
marginBottom: 16,
padding: 14,
border: '1px solid var(--color-border)',
borderRadius: 8,
background: 'var(--color-bg-card)',
};
const inputStyle: CSSProperties = {
height: 40,
border: '1px solid var(--color-border)',
borderRadius: 6,
padding: '0 12px',
background: 'var(--color-bg-card)',
color: 'var(--color-text-primary)',
};
const layoutStyle: CSSProperties = {
display: 'grid',
gridTemplateColumns: 'minmax(0, 1fr) minmax(300px, 380px)',
gap: 16,
alignItems: 'start',
};
const gridStyle: CSSProperties = {
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(210px, 1fr))',
gap: 14,
};
const cardStyle: CSSProperties = {
textAlign: 'left',
border: '1px solid var(--color-border)',
borderRadius: 8,
overflow: 'hidden',
background: 'var(--color-bg-card)',
color: 'var(--color-text-primary)',
padding: 0,
cursor: 'pointer',
transition: 'border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease',
};
const thumbStyle: CSSProperties = {
position: 'relative',
aspectRatio: '16 / 11',
background: 'var(--color-bg-subtle)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
};
const mediaStyle: CSSProperties = {
width: '100%',
height: '100%',
objectFit: 'contain',
};
const placeholderStyle: CSSProperties = {
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'var(--color-text-muted)',
fontWeight: 700,
background: 'linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)), var(--color-bg-card))',
};
const cardBodyStyle: CSSProperties = {
display: 'flex',
flexDirection: 'column',
gap: 6,
padding: 12,
};
const cardTitleStyle: CSSProperties = {
fontSize: 13,
lineHeight: 1.35,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
};
const metaStyle: CSSProperties = {
fontSize: 12,
color: 'var(--color-text-muted)',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
};
const detailStyle: CSSProperties = {
border: '1px solid var(--color-border)',
borderRadius: 8,
background: 'var(--color-bg-card)',
padding: 16,
position: 'sticky',
top: 84,
};
const detailPreviewStyle: CSSProperties = {
aspectRatio: '16 / 11',
borderRadius: 6,
overflow: 'hidden',
background: 'var(--color-bg-subtle)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
};
const detailMetaStyle: CSSProperties = {
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: 10,
fontSize: 12,
color: 'var(--color-text-muted)',
marginTop: 14,
};
const promptStyle: CSSProperties = {
margin: '6px 0 0',
color: 'var(--color-text-secondary)',
fontSize: 13,
lineHeight: 1.6,
maxHeight: 160,
overflow: 'auto',
};
const summaryStyle: CSSProperties = {
display: 'grid',
gridTemplateColumns: '160px 160px minmax(0, 1fr)',
gap: 12,
marginBottom: 14,
};
const summaryItemStyle: CSSProperties = {
border: '1px solid var(--color-border)',
borderRadius: 8,
background: 'var(--color-bg-card)',
padding: '12px 14px',
minHeight: 70,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
gap: 4,
};
const summaryLabelStyle: CSSProperties = {
fontSize: 12,
color: 'var(--color-text-muted)',
};
const summaryValueStyle: CSSProperties = {
fontSize: 22,
color: 'var(--color-text-primary)',
lineHeight: 1.2,
};
const filterRowStyle: CSSProperties = {
display: 'flex',
flexWrap: 'wrap',
gap: 8,
};
const chipStyle: CSSProperties = {
border: '1px solid var(--color-border)',
borderRadius: 999,
background: 'var(--color-bg)',
color: 'var(--color-text-secondary)',
padding: '7px 12px',
cursor: 'pointer',
fontSize: 12,
};
const activeChipStyle: CSSProperties = {
...chipStyle,
borderColor: 'var(--color-primary)',
background: 'var(--color-primary-light)',
color: 'var(--color-primary)',
fontWeight: 700,
};
const typeBadgeStyle: CSSProperties = {
position: 'absolute',
left: 10,
top: 10,
borderRadius: 999,
padding: '4px 8px',
background: 'rgba(0, 0, 0, 0.56)',
color: '#fff',
fontSize: 12,
fontWeight: 700,
};
const cardFooterStyle: CSSProperties = {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
gap: 8,
};
const statusPillStyle: CSSProperties = {
display: 'inline-flex',
alignItems: 'center',
borderRadius: 999,
padding: '4px 8px',
background: 'color-mix(in srgb, var(--color-success) 12%, var(--color-bg-card))',
color: 'var(--color-success)',
fontSize: 12,
fontWeight: 700,
whiteSpace: 'nowrap',
};
const detailHeaderStyle: CSSProperties = {
display: 'flex',
alignItems: 'flex-start',
justifyContent: 'space-between',
gap: 12,
marginBottom: 12,
};
const detailEyebrowStyle: CSSProperties = {
fontSize: 12,
color: 'var(--color-text-muted)',
};
const promptPanelStyle: CSSProperties = {
marginTop: 14,
border: '1px solid var(--color-border-light)',
borderRadius: 8,
padding: 12,
background: 'var(--color-bg)',
fontSize: 12,
color: 'var(--color-text-muted)',
};
src/web/pages/siteAnnouncements.test.tsx
+17 -31
View File
@@ -8,12 +8,12 @@ import { sidebarGroups } from '../App.js';
const { apiMock } = vi.hoisted(() => ({
apiMock: {
getSiteAnnouncements: vi.fn(),
getSites: vi.fn(),
getRuntimeSettings: vi.fn(),
createSiteAnnouncement: vi.fn(),
updateSiteAnnouncement: vi.fn(),
deleteSiteAnnouncement: vi.fn(),
markSiteAnnouncementRead: vi.fn(),
markAllSiteAnnouncementsRead: vi.fn(),
clearSiteAnnouncements: vi.fn(),
syncSiteAnnouncements: vi.fn(),
},
}));
@@ -47,44 +47,38 @@ function collectText(node: any): string {
describe('SiteAnnouncements page', () => {
beforeEach(() => {
vi.clearAllMocks();
apiMock.getSites.mockResolvedValue([
{ id: 9, name: 'Sub Site', platform: 'sub2api' },
]);
apiMock.getRuntimeSettings.mockResolvedValue({
serverTimeZone: 'UTC',
});
apiMock.getSiteAnnouncements.mockResolvedValue([
{
id: 12,
siteId: 9,
platform: 'sub2api',
sourceKey: 'announcement:12',
title: 'Maintenance',
content: 'Window starts at 10:00',
title: '维护通知',
content: '今晚 10:00 维护',
level: 'info',
status: 'published',
firstSeenAt: '2026-03-20 04:23:27',
lastSeenAt: '2026-03-20 04:23:27',
readAt: null,
publishedAt: '2026-03-20 04:23:27',
readCount: 3,
},
]);
apiMock.clearSiteAnnouncements.mockResolvedValue({ success: true });
apiMock.markAllSiteAnnouncementsRead.mockResolvedValue({ success: true });
apiMock.syncSiteAnnouncements.mockResolvedValue({ success: true, queued: true, taskId: 'task-1' });
apiMock.createSiteAnnouncement.mockResolvedValue({ success: true });
apiMock.updateSiteAnnouncement.mockResolvedValue({ success: true });
apiMock.deleteSiteAnnouncement.mockResolvedValue({ success: true });
});
afterEach(() => {
vi.clearAllMocks();
});
it('exposes the renamed sidebar item and the site announcements entry', () => {
it('exposes the user announcements sidebar entry', () => {
const consoleGroup = sidebarGroups.find((group) => group.label === '控制台');
const labels = (consoleGroup?.items || []).map((item) => item.label);
expect(labels).toContain('站点管理');
expect(labels).toContain('站点公告');
expect(labels).toContain('用户公告');
});
it('loads announcements, highlights the focused row, and clears local rows', async () => {
it('loads admin announcements and clears local rows', async () => {
let root!: WebTestRenderer;
try {
await act(async () => {
@@ -111,17 +105,9 @@ describe('SiteAnnouncements page', () => {
await flushMicrotasks();
expect(apiMock.getSiteAnnouncements).toHaveBeenCalled();
expect(apiMock.getSites).toHaveBeenCalled();
expect(apiMock.getRuntimeSettings).toHaveBeenCalled();
expect(JSON.stringify(root!.toJSON())).toContain('站点公告');
expect(JSON.stringify(root!.toJSON())).toContain('Maintenance');
expect(JSON.stringify(root!.toJSON())).toContain('2026/03/20 12:23:27');
const highlightedRows = root!.root.findAll((node) => {
const className = typeof node.props.className === 'string' ? node.props.className : '';
return className.includes('row-focus-highlight') && collectText(node).includes('Maintenance');
});
expect(highlightedRows).toHaveLength(1);
expect(JSON.stringify(root!.toJSON())).toContain('用户公告');
expect(JSON.stringify(root!.toJSON())).toContain('维护通知');
expect(JSON.stringify(root!.toJSON())).toContain('今晚 10:00 维护');
const clearButton = root!.root.find((node) => (
node.type === 'button'