feat: add customer portal and RTC voice diagnostics
This commit is contained in:
Codex Local
Generated
+975
-3
File diff suppressed because it is too large
Load Diff
+3
-1
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "data-terminal-cloud-web",
|
||||
"name": "elder-companion-customer-portal",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
@@ -11,7 +11,9 @@
|
||||
"generate:api": "openapi-typescript ../openapi/openapi.yaml -o src/api/schema.d.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^6.3.2",
|
||||
"@vitejs/plugin-react": "latest",
|
||||
"antd": "^6.6.1",
|
||||
"oidc-client-ts": "^3.5.0",
|
||||
"openapi-typescript": "latest",
|
||||
"react": "latest",
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { Badge, Card } from "antd";
|
||||
|
||||
type StatusCardProps = {
|
||||
label: string;
|
||||
value: string;
|
||||
@@ -6,14 +8,16 @@ type StatusCardProps = {
|
||||
};
|
||||
|
||||
export function StatusCard({ label, value, detail, tone }: StatusCardProps) {
|
||||
const status = tone === "good" ? "success" : tone === "warning" ? "warning" : "default";
|
||||
|
||||
return (
|
||||
<article className={`status-card status-card--${tone}`}>
|
||||
<Card className={`status-card status-card--${tone}`} bordered>
|
||||
<div className="status-card__topline">
|
||||
<span>{label}</span>
|
||||
<span className="status-card__dot" aria-hidden="true" />
|
||||
<Badge status={status} />
|
||||
</div>
|
||||
<strong>{value}</strong>
|
||||
<p>{detail}</p>
|
||||
</article>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
+44
-2
@@ -1,10 +1,52 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { PlatformOverview } from "./pages/PlatformOverview";
|
||||
import { ConfigProvider } from "antd";
|
||||
import zhCN from "antd/locale/zh_CN";
|
||||
import { CustomerPortal } from "./pages/CustomerPortal";
|
||||
import "./styles.css";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<PlatformOverview />
|
||||
<ConfigProvider
|
||||
locale={zhCN}
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: "#5b5ce2",
|
||||
colorInfo: "#5b5ce2",
|
||||
colorSuccess: "#1f9d68",
|
||||
colorWarning: "#d98b12",
|
||||
colorError: "#d84a4a",
|
||||
colorText: "#1f2329",
|
||||
colorTextSecondary: "#646a73",
|
||||
colorBgLayout: "#f5f6f8",
|
||||
colorBorder: "#e3e6eb",
|
||||
borderRadius: 8,
|
||||
borderRadiusLG: 10,
|
||||
fontFamily: 'Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif'
|
||||
},
|
||||
components: {
|
||||
Layout: {
|
||||
headerBg: "#ffffff",
|
||||
siderBg: "#f7f8fa",
|
||||
bodyBg: "#f5f6f8"
|
||||
},
|
||||
Menu: {
|
||||
itemBg: "transparent",
|
||||
itemSelectedBg: "#ebe9ff",
|
||||
itemSelectedColor: "#5b5ce2",
|
||||
itemBorderRadius: 8
|
||||
},
|
||||
Button: {
|
||||
borderRadius: 8,
|
||||
controlHeight: 36
|
||||
},
|
||||
Card: {
|
||||
borderRadiusLG: 10
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<CustomerPortal />
|
||||
</ConfigProvider>
|
||||
</StrictMode>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,209 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
Alert,
|
||||
Avatar,
|
||||
Badge,
|
||||
Breadcrumb,
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
Descriptions,
|
||||
Dropdown,
|
||||
Empty,
|
||||
Input,
|
||||
Layout,
|
||||
Menu,
|
||||
Row,
|
||||
Space,
|
||||
Spin,
|
||||
Tag,
|
||||
Tooltip,
|
||||
Typography,
|
||||
type MenuProps
|
||||
} from "antd";
|
||||
import {
|
||||
BellOutlined,
|
||||
BookOutlined,
|
||||
CaretDownOutlined,
|
||||
CommentOutlined,
|
||||
CreditCardOutlined,
|
||||
DashboardOutlined,
|
||||
HeartOutlined,
|
||||
HomeOutlined,
|
||||
LaptopOutlined,
|
||||
LockOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
MessageOutlined,
|
||||
SafetyCertificateOutlined,
|
||||
SearchOutlined,
|
||||
SettingOutlined,
|
||||
TeamOutlined,
|
||||
UserOutlined
|
||||
} from "@ant-design/icons";
|
||||
import { useAuth } from "../auth/useAuth";
|
||||
import { SaaSWorkspace, type CustomerSection } from "./SaaSWorkspace";
|
||||
|
||||
type PortalSection = CustomerSection | "profile";
|
||||
|
||||
const sectionMeta: Record<PortalSection, { title: string; description: string; breadcrumb: string }> = {
|
||||
home: { title: "家庭首页", description: "陪伴服务状态、长者近况与家庭待办一目了然。", breadcrumb: "首页" },
|
||||
members: { title: "家庭管理", description: "管理家庭空间、家人邀请、成员角色和所有权。", breadcrumb: "家庭管理" },
|
||||
subjects: { title: "长者管理", description: "维护长者档案、交流偏好、稳定事实和分项授权。", breadcrumb: "长者管理" },
|
||||
devices: { title: "设备管理", description: "绑定陪伴设备，查看在线状态、固件版本和音量配置。", breadcrumb: "设备管理" },
|
||||
conversations: { title: "通话记录", description: "按长者筛选通话，查看文字内容、媒体授权和单次费用。", breadcrumb: "通话记录" },
|
||||
stories: { title: "故事与记忆", description: "核对智能整理的故事，沉淀经过家庭确认的长期记忆。", breadcrumb: "故事与记忆" },
|
||||
sharing: { title: "资源分享", description: "面向指定家人分享故事、文字或录音，并随时撤销权限。", breadcrumb: "授权与隐私 / 资源分享" },
|
||||
privacy: { title: "隐私请求", description: "申请访问、导出或删除个人数据，并跟踪处理状态。", breadcrumb: "授权与隐私 / 隐私请求" },
|
||||
billing: { title: "费用与额度", description: "查看当前家庭可见通话的实际计量和费用说明。", breadcrumb: "费用与额度" },
|
||||
messages: { title: "消息中心", description: "查看设备、通话、故事和隐私请求的实时状态提醒。", breadcrumb: "消息中心" },
|
||||
profile: { title: "个人中心", description: "查看当前登录身份、客户组织和家庭角色。", breadcrumb: "个人中心" }
|
||||
};
|
||||
|
||||
export function CustomerPortal() {
|
||||
const auth = useAuth();
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [section, setSection] = useState<PortalSection>(() => sectionFromURL());
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
const meta = sectionMeta[section];
|
||||
|
||||
useEffect(() => {
|
||||
const onPopState = () => setSection(sectionFromURL());
|
||||
window.addEventListener("popstate", onPopState);
|
||||
return () => window.removeEventListener("popstate", onPopState);
|
||||
}, []);
|
||||
|
||||
const menuItems = useMemo<MenuProps["items"]>(() => [
|
||||
{ key: "home", icon: <HomeOutlined />, label: "首页" },
|
||||
{ key: "members", icon: <TeamOutlined />, label: "家庭管理" },
|
||||
{ key: "subjects", icon: <HeartOutlined />, label: "长者管理" },
|
||||
{
|
||||
key: "privacy-group",
|
||||
icon: <SafetyCertificateOutlined />,
|
||||
label: "授权与隐私",
|
||||
children: [
|
||||
{ key: "sharing", icon: <TeamOutlined />, label: "资源分享" },
|
||||
{ key: "privacy", icon: <LockOutlined />, label: "隐私请求" }
|
||||
]
|
||||
},
|
||||
{ key: "devices", icon: <LaptopOutlined />, label: "设备管理" },
|
||||
{ key: "conversations", icon: <CommentOutlined />, label: "通话记录" },
|
||||
{ key: "stories", icon: <BookOutlined />, label: "故事与记忆" },
|
||||
{ key: "billing", icon: <CreditCardOutlined />, label: "费用与额度" },
|
||||
{ key: "messages", icon: <MessageOutlined />, label: "消息中心" },
|
||||
{ type: "divider" },
|
||||
{ key: "profile", icon: <UserOutlined />, label: "个人中心" }
|
||||
], []);
|
||||
|
||||
function navigate(next: PortalSection) {
|
||||
setSection(next);
|
||||
const url = new URL(window.location.href);
|
||||
if (next === "home") url.searchParams.delete("section"); else url.searchParams.set("section", next);
|
||||
window.history.pushState({}, "", url);
|
||||
}
|
||||
|
||||
function search() {
|
||||
const value = searchValue.trim().toLowerCase();
|
||||
if (!value) return;
|
||||
const matches: Array<[string[], PortalSection]> = [
|
||||
[["设备", "终端", "音量", "device"], "devices"],
|
||||
[["通话", "语音", "录音", "conversation"], "conversations"],
|
||||
[["故事", "回忆", "记忆", "story"], "stories"],
|
||||
[["隐私", "导出", "删除", "授权", "privacy"], "privacy"],
|
||||
[["分享", "share"], "sharing"],
|
||||
[["费用", "额度", "账单", "cost"], "billing"],
|
||||
[["消息", "通知", "提醒"], "messages"],
|
||||
[["长者", "老人", "档案", "subject"], "subjects"],
|
||||
[["家庭", "成员", "邀请", "member"], "members"]
|
||||
];
|
||||
const target = matches.find(([keywords]) => keywords.some((keyword) => value.includes(keyword)))?.[1];
|
||||
if (target) navigate(target);
|
||||
}
|
||||
|
||||
const accountMenu: MenuProps["items"] = [
|
||||
{ key: "profile", icon: <UserOutlined />, label: "个人中心", onClick: () => navigate("profile") },
|
||||
{ key: "logout", icon: <SettingOutlined />, label: "退出登录", onClick: () => void auth.logout() }
|
||||
];
|
||||
|
||||
return <Layout className="customer-layout">
|
||||
<Layout.Header className="customer-header">
|
||||
<div className="customer-header__brand">
|
||||
<Button type="text" icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} aria-label={collapsed ? "展开菜单" : "收起菜单"} onClick={() => setCollapsed((value) => !value)} />
|
||||
<span className="customer-brand-mark" aria-hidden="true"><HeartOutlined /></span>
|
||||
<strong>安心陪伴</strong>
|
||||
<span className="customer-brand-divider" />
|
||||
<span>家庭中心</span>
|
||||
</div>
|
||||
<div className="customer-header__actions">
|
||||
<Input.Search value={searchValue} onChange={(event) => setSearchValue(event.target.value)} onSearch={search} prefix={<SearchOutlined />} placeholder="搜索长者、设备、通话" allowClear className="customer-search" />
|
||||
<Tooltip title="消息中心"><Badge dot><Button type="text" icon={<BellOutlined />} aria-label="打开消息中心" onClick={() => navigate("messages")} /></Badge></Tooltip>
|
||||
{auth.currentUser ? <Dropdown menu={{ items: accountMenu }} placement="bottomRight">
|
||||
<Button type="text" className="customer-account-button">
|
||||
<Avatar size={30} icon={<UserOutlined />} />
|
||||
<span>{auth.currentUser.identity.display_name || auth.currentUser.identity.preferred_username}</span>
|
||||
<CaretDownOutlined />
|
||||
</Button>
|
||||
</Dropdown> : <Button type="primary" onClick={() => void auth.login()}>登录</Button>}
|
||||
</div>
|
||||
</Layout.Header>
|
||||
|
||||
<Layout className="customer-layout__body">
|
||||
<Layout.Sider className="customer-sider" width={224} collapsedWidth={72} collapsed={collapsed} trigger={null}>
|
||||
<div className="customer-sider__title"><DashboardOutlined />{collapsed ? null : <span>家庭服务</span>}</div>
|
||||
<Menu mode="inline" selectedKeys={[section]} defaultOpenKeys={["privacy-group"]} items={menuItems} onClick={({ key }) => navigate(key as PortalSection)} />
|
||||
<div className="customer-sider__help"><SafetyCertificateOutlined />{collapsed ? null : <div><strong>隐私受保护</strong><span>仅展示当前家庭数据</span></div>}</div>
|
||||
</Layout.Sider>
|
||||
|
||||
<Layout.Content className="customer-content">
|
||||
<main className="customer-page">
|
||||
<Breadcrumb items={[{ title: "家庭中心" }, { title: meta.breadcrumb }]} />
|
||||
<header className="customer-page__header">
|
||||
<div><h1>{meta.title}</h1><p>{meta.description}</p></div>
|
||||
{auth.currentUser ? <Tag color="green">家庭权限已校验</Tag> : null}
|
||||
</header>
|
||||
|
||||
{auth.loading ? <Card className="customer-auth-state"><Spin /><span>正在读取登录状态…</span></Card> : null}
|
||||
{!auth.loading && auth.error ? <Alert type="error" showIcon message="登录信息读取失败" description={auth.error} action={<Space><Button onClick={() => void auth.retry()}>重试</Button><Button type="primary" onClick={() => void auth.login()}>重新登录</Button></Space>} /> : null}
|
||||
{!auth.loading && !auth.currentUser && !auth.error ? <CustomerLogin onLogin={() => void auth.login()} /> : null}
|
||||
{auth.currentUser && auth.oidcUser && section !== "profile" ? <SaaSWorkspace accessToken={auth.oidcUser.access_token} accounts={auth.currentUser.accounts} section={section} onSectionChange={navigate} showNavigation={false} /> : null}
|
||||
{auth.currentUser && section === "profile" ? <CustomerProfile currentUser={auth.currentUser} onLogout={() => void auth.logout()} /> : null}
|
||||
</main>
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
</Layout>;
|
||||
}
|
||||
|
||||
function CustomerLogin({ onLogin }: { onLogin: () => void }) {
|
||||
return <Card className="customer-login-card">
|
||||
<span className="customer-login-icon"><LockOutlined /></span>
|
||||
<Typography.Title level={2}>登录家庭陪伴中心</Typography.Title>
|
||||
<Typography.Paragraph>登录后可查看自己家庭内的长者、设备、通话和故事。家庭角色不会自动获得录音播放或下载权限。</Typography.Paragraph>
|
||||
<Button type="primary" size="large" icon={<UserOutlined />} onClick={onLogin}>登录并进入家庭</Button>
|
||||
<div className="customer-login-notes"><span><SafetyCertificateOutlined /> OIDC 安全登录</span><span><LockOutlined /> 家庭数据隔离</span></div>
|
||||
</Card>;
|
||||
}
|
||||
|
||||
function CustomerProfile({ currentUser, onLogout }: { currentUser: NonNullable<ReturnType<typeof useAuth>["currentUser"]>; onLogout: () => void }) {
|
||||
return <div className="customer-profile">
|
||||
<Card>
|
||||
<div className="customer-profile__identity"><Avatar size={64} icon={<UserOutlined />} /><div><h2>{currentUser.identity.display_name || currentUser.identity.preferred_username}</h2><p>{currentUser.identity.preferred_username}</p></div><Button onClick={onLogout}>退出登录</Button></div>
|
||||
</Card>
|
||||
{currentUser.accounts.length ? <Row gutter={[16, 16]}>{currentUser.accounts.map((account) => <Col xs={24} xl={12} key={account.user_id}><Card title={account.tenant_name} extra={<Tag color="blue">客户账号</Tag>}>
|
||||
<Descriptions column={1} size="small" items={[
|
||||
{ key: "display", label: "账号名称", children: account.display_name },
|
||||
{ key: "role", label: "平台角色", children: account.platform_role },
|
||||
{ key: "policy", label: "隐私政策版本", children: account.policy_version || "当前版本" }
|
||||
]} />
|
||||
<div className="customer-membership-list"><h4>家庭角色</h4>{account.household_memberships.length ? account.household_memberships.map((membership) => <div key={membership.household_id}><div><strong>{membership.household_name}</strong><span>{roleLabel(membership.role)}</span></div><small>{membership.capabilities.length} 项业务权限</small></div>) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="尚未加入家庭" />}</div>
|
||||
</Card></Col>)}</Row> : <Empty description="当前账号没有可用的客户组织" />}
|
||||
</div>;
|
||||
}
|
||||
|
||||
function sectionFromURL(): PortalSection {
|
||||
const value = new URL(window.location.href).searchParams.get("section");
|
||||
return value && value in sectionMeta ? value as PortalSection : "home";
|
||||
}
|
||||
|
||||
function roleLabel(role: string) {
|
||||
return ({ owner: "所有者", admin: "管理员", editor: "编辑者", viewer: "查看者" } as Record<string, string>)[role] ?? role;
|
||||
}
|
||||
+246
-129
@@ -1,4 +1,33 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
Alert,
|
||||
Avatar,
|
||||
Badge,
|
||||
Breadcrumb,
|
||||
Button,
|
||||
Input,
|
||||
Layout,
|
||||
Menu,
|
||||
Space,
|
||||
Tag,
|
||||
Tooltip
|
||||
} from "antd";
|
||||
import {
|
||||
AlertOutlined,
|
||||
ApiOutlined,
|
||||
BellOutlined,
|
||||
CloudServerOutlined,
|
||||
DashboardOutlined,
|
||||
DollarOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
ReloadOutlined,
|
||||
SearchOutlined,
|
||||
SettingOutlined,
|
||||
TeamOutlined,
|
||||
ToolOutlined,
|
||||
UserOutlined
|
||||
} from "@ant-design/icons";
|
||||
import { platformApi } from "../api/client";
|
||||
import { StatusCard } from "../components/StatusCard";
|
||||
import { useAuth } from "../auth/useAuth";
|
||||
@@ -24,6 +53,7 @@ const workspaceKeys: WorkspaceKey[] = ["family", "config", "billing", "alerts",
|
||||
export function PlatformOverview() {
|
||||
const [state, setState] = useState<ViewState>({ loading: true });
|
||||
const [activeWorkspace, setActiveWorkspace] = useState<WorkspaceKey>(() => workspaceFromURL());
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const auth = useAuth();
|
||||
|
||||
const refresh = useCallback(async (signal?: AbortSignal) => {
|
||||
@@ -95,148 +125,235 @@ export function PlatformOverview() {
|
||||
pushWorkspaceURL(workspace);
|
||||
}
|
||||
|
||||
const activeOption = workspaceOptions.find((option) => option.key === activeWorkspace) ?? workspaceOptions[0];
|
||||
const menuItems = [
|
||||
{
|
||||
type: "group" as const,
|
||||
label: "业务中心",
|
||||
children: workspaceOptions.map((option) => ({
|
||||
key: option.key,
|
||||
icon: workspaceIcon(option.key),
|
||||
label: option.label,
|
||||
title: option.detail
|
||||
}))
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<main>
|
||||
<header className="hero">
|
||||
<div>
|
||||
<p className="eyebrow">DATA TERMINAL · CLOUD PLATFORM</p>
|
||||
<h1>让每一次陪伴，都安全抵达</h1>
|
||||
<p className="hero__description">
|
||||
数据采集终端—云端系统研发工作台。当前版本已经接入家庭、长者、授权、设备与通话业务链路。
|
||||
</p>
|
||||
<Layout className="app-layout">
|
||||
<Layout.Header className="app-header">
|
||||
<div className="app-header__brand">
|
||||
<Button
|
||||
type="text"
|
||||
className="app-header__collapse"
|
||||
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
aria-label={collapsed ? "展开导航" : "收起导航"}
|
||||
onClick={() => setCollapsed((current) => !current)}
|
||||
/>
|
||||
<div className="brand-mark" aria-hidden="true"><CloudServerOutlined /></div>
|
||||
<strong>长者语音云平台</strong>
|
||||
<Tag color="blue">本地研发</Tag>
|
||||
</div>
|
||||
<button type="button" onClick={() => void refresh()} disabled={state.loading}>
|
||||
{state.loading ? "检查中…" : "重新检查"}
|
||||
</button>
|
||||
</header>
|
||||
<div className="app-header__tools">
|
||||
<Input className="header-search" prefix={<SearchOutlined />} placeholder="搜索设备、长者、通话" allowClear />
|
||||
<Tooltip title="平台服务状态">
|
||||
<Badge status={state.ready === "ready" ? "success" : state.loading ? "processing" : "warning"} />
|
||||
</Tooltip>
|
||||
<Button type="text" icon={<BellOutlined />} aria-label="通知" />
|
||||
{auth.currentUser ? (
|
||||
<Space size={8}>
|
||||
<Avatar size={30} icon={<UserOutlined />} />
|
||||
<span className="header-user">{auth.currentUser.identity.display_name || auth.currentUser.identity.preferred_username}</span>
|
||||
</Space>
|
||||
) : (
|
||||
<Button type="primary" onClick={() => void auth.login()}>登录</Button>
|
||||
)}
|
||||
</div>
|
||||
</Layout.Header>
|
||||
|
||||
{state.error ? (
|
||||
<section className="notice notice--error" role="alert">
|
||||
<div>
|
||||
<strong>暂时无法连接云端服务</strong>
|
||||
<p>{state.error}。请确认API、PostgreSQL和Redis已经启动。</p>
|
||||
<Layout className="app-layout__body">
|
||||
<Layout.Sider
|
||||
className="app-sider"
|
||||
width={232}
|
||||
collapsedWidth={72}
|
||||
collapsed={collapsed}
|
||||
trigger={null}
|
||||
>
|
||||
<div className="sider-product">
|
||||
<ApiOutlined />
|
||||
{!collapsed ? <span>数据终端 · 云端</span> : null}
|
||||
</div>
|
||||
<button type="button" onClick={() => void refresh()}>重试</button>
|
||||
</section>
|
||||
) : null}
|
||||
<Menu
|
||||
mode="inline"
|
||||
selectedKeys={auth.currentUser ? [activeWorkspace] : []}
|
||||
items={menuItems}
|
||||
onClick={({ key }) => selectWorkspace(key as WorkspaceKey)}
|
||||
/>
|
||||
<div className="sider-meta">
|
||||
{!collapsed ? (
|
||||
<>
|
||||
<span>平台版本</span>
|
||||
<strong>{state.version ?? "dev"}</strong>
|
||||
</>
|
||||
) : <DashboardOutlined />}
|
||||
</div>
|
||||
</Layout.Sider>
|
||||
|
||||
<section className="status-grid" aria-label="平台状态">
|
||||
<StatusCard
|
||||
label="API进程"
|
||||
value={state.loading ? "检查中" : state.live === "alive" ? "运行正常" : "等待启动"}
|
||||
detail={state.service ? `当前服务：${state.service}` : "尚未获得服务信息"}
|
||||
tone={state.live === "alive" ? "good" : "neutral"}
|
||||
/>
|
||||
<StatusCard
|
||||
label="必要依赖"
|
||||
value={state.loading ? "检查中" : state.ready === "ready" ? "全部就绪" : "需要处理"}
|
||||
detail={dependencySummary}
|
||||
tone={state.ready === "ready" ? "good" : state.loading ? "neutral" : "warning"}
|
||||
/>
|
||||
<StatusCard
|
||||
label="构建版本"
|
||||
value={state.version ?? "dev"}
|
||||
detail="版本、提交和构建时间将在流水线中自动注入"
|
||||
tone="neutral"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="identity-panel" aria-label="登录和权限状态">
|
||||
<div className="identity-panel__intro">
|
||||
<p className="eyebrow">IDENTITY & ACCESS</p>
|
||||
<h2>身份与家庭权限</h2>
|
||||
<p>OIDC只证明登录身份，客户组织与家庭权限全部由服务端关系推导。</p>
|
||||
</div>
|
||||
{auth.loading ? (
|
||||
<div className="identity-panel__state">正在读取登录状态…</div>
|
||||
) : auth.currentUser ? (
|
||||
<div className="identity-panel__account">
|
||||
<div className="identity-panel__account-head">
|
||||
<Layout.Content className="app-content">
|
||||
<main className="page-container">
|
||||
<Breadcrumb
|
||||
className="page-breadcrumb"
|
||||
items={[{ title: "控制台" }, { title: activeOption?.label ?? "平台总览" }]}
|
||||
/>
|
||||
<header className="hero">
|
||||
<div>
|
||||
<strong>{auth.currentUser.identity.display_name || auth.currentUser.identity.preferred_username}</strong>
|
||||
<span>{auth.currentUser.identity.preferred_username}</span>
|
||||
<Space size={10} align="center">
|
||||
<span className="page-icon">{workspaceIcon(activeWorkspace)}</span>
|
||||
<h1>{activeOption?.label ?? "平台总览"}</h1>
|
||||
</Space>
|
||||
<p className="hero__description">
|
||||
{activeOption?.detail ?? "数据采集终端—云端系统研发工作台"}。统一管理家庭、长者、授权、设备与语音通话链路。
|
||||
</p>
|
||||
</div>
|
||||
<button type="button" className="button-secondary" onClick={() => void auth.logout()}>退出登录</button>
|
||||
</div>
|
||||
{auth.currentUser.accounts.map((account) => (
|
||||
<article className="account-card" key={account.user_id}>
|
||||
<p>{account.tenant_name}</p>
|
||||
<strong>{account.display_name}</strong>
|
||||
{account.household_memberships.map((membership) => (
|
||||
<div className="membership" key={membership.household_id}>
|
||||
<span>{membership.household_name}</span>
|
||||
<span>{roleLabel(membership.role)} · {membership.capabilities.length}项一般权限</span>
|
||||
<Button type="default" icon={<ReloadOutlined />} onClick={() => void refresh()} loading={state.loading}>
|
||||
重新检查
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
{state.error ? (
|
||||
<Alert
|
||||
type="error"
|
||||
showIcon
|
||||
message="暂时无法连接云端服务"
|
||||
description={`${state.error}。请确认 API、PostgreSQL 和 Redis 已经启动。`}
|
||||
action={<Button size="small" danger onClick={() => void refresh()}>重试</Button>}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<section className="status-grid" aria-label="平台状态">
|
||||
<StatusCard
|
||||
label="API进程"
|
||||
value={state.loading ? "检查中" : state.live === "alive" ? "运行正常" : "等待启动"}
|
||||
detail={state.service ? `当前服务：${state.service}` : "尚未获得服务信息"}
|
||||
tone={state.live === "alive" ? "good" : "neutral"}
|
||||
/>
|
||||
<StatusCard
|
||||
label="必要依赖"
|
||||
value={state.loading ? "检查中" : state.ready === "ready" ? "全部就绪" : "需要处理"}
|
||||
detail={dependencySummary}
|
||||
tone={state.ready === "ready" ? "good" : state.loading ? "neutral" : "warning"}
|
||||
/>
|
||||
<StatusCard
|
||||
label="构建版本"
|
||||
value={state.version ?? "dev"}
|
||||
detail="版本、提交和构建时间将在流水线中自动注入"
|
||||
tone="neutral"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="identity-panel" aria-label="登录和权限状态">
|
||||
<div className="identity-panel__intro">
|
||||
<p className="eyebrow">IDENTITY & ACCESS</p>
|
||||
<h2>身份与家庭权限</h2>
|
||||
<p>OIDC 只证明登录身份，客户组织与家庭权限全部由服务端关系推导。</p>
|
||||
</div>
|
||||
{auth.loading ? (
|
||||
<div className="identity-panel__state">正在读取登录状态…</div>
|
||||
) : auth.currentUser ? (
|
||||
<div className="identity-panel__account">
|
||||
<div className="identity-panel__account-head">
|
||||
<div>
|
||||
<strong>{auth.currentUser.identity.display_name || auth.currentUser.identity.preferred_username}</strong>
|
||||
<span>{auth.currentUser.identity.preferred_username}</span>
|
||||
</div>
|
||||
<Button onClick={() => void auth.logout()}>退出登录</Button>
|
||||
</div>
|
||||
))}
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="identity-panel__login">
|
||||
<strong>{auth.error ? "登录信息读取失败" : "尚未登录"}</strong>
|
||||
<p>{auth.error ?? "进入本地Keycloak完成授权码与PKCE登录。研发账号见权限矩阵文档。"}</p>
|
||||
<div>
|
||||
{auth.error && auth.oidcUser ? (
|
||||
<button type="button" className="button-secondary" onClick={() => void auth.retry()}>重新读取</button>
|
||||
) : null}
|
||||
<button type="button" onClick={() => void auth.login()}>{auth.error ? "重新登录" : "登录研发环境"}</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
{auth.currentUser.accounts.map((account) => (
|
||||
<article className="account-card" key={account.user_id}>
|
||||
<p>{account.tenant_name}</p>
|
||||
<strong>{account.display_name}</strong>
|
||||
{account.household_memberships.map((membership) => (
|
||||
<div className="membership" key={membership.household_id}>
|
||||
<span>{membership.household_name}</span>
|
||||
<span>{roleLabel(membership.role)} · {membership.capabilities.length} 项一般权限</span>
|
||||
</div>
|
||||
))}
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="identity-panel__login">
|
||||
<strong>{auth.error ? "登录信息读取失败" : "尚未登录"}</strong>
|
||||
<p>{auth.error ?? "进入本地 Keycloak 完成授权码与 PKCE 登录。研发账号见权限矩阵文档。"}</p>
|
||||
<Space>
|
||||
{auth.error && auth.oidcUser ? <Button onClick={() => void auth.retry()}>重新读取</Button> : null}
|
||||
<Button type="primary" onClick={() => void auth.login()}>{auth.error ? "重新登录" : "登录研发环境"}</Button>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{auth.currentUser && auth.oidcUser ? (
|
||||
<section className="workspace-shell" aria-label="业务工作台">
|
||||
<div className="workspace-shell__heading">
|
||||
<div>
|
||||
<p className="eyebrow">BUSINESS WORKSPACES</p>
|
||||
<h2>业务工作台</h2>
|
||||
</div>
|
||||
<p>根据当前账号权限显示可用入口；切换入口时才加载对应业务数据。</p>
|
||||
</div>
|
||||
<nav className="workspace-nav" aria-label="业务工作台导航">
|
||||
{workspaceOptions.map((option) => (
|
||||
<button
|
||||
type="button"
|
||||
key={option.key}
|
||||
className={activeWorkspace === option.key ? "workspace-nav__item active" : "workspace-nav__item"}
|
||||
aria-current={activeWorkspace === option.key ? "page" : undefined}
|
||||
onClick={() => selectWorkspace(option.key)}
|
||||
>
|
||||
<strong>{option.label}</strong>
|
||||
<span>{option.detail}</span>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
<div className="workspace-shell__content">
|
||||
{activeWorkspace === "family" ? <SaaSWorkspace accessToken={auth.oidcUser.access_token} accounts={auth.currentUser.accounts} /> : null}
|
||||
{activeWorkspace === "config" && hasOperationsAccess ? <OpsConfigWorkspace accessToken={auth.oidcUser.access_token} accounts={auth.currentUser.accounts} /> : null}
|
||||
{activeWorkspace === "billing" && hasOperationsAccess ? <OpsBillingWorkspace accessToken={auth.oidcUser.access_token} accounts={auth.currentUser.accounts} /> : null}
|
||||
{activeWorkspace === "alerts" && hasOperationsAccess ? <OpsAlertWorkspace accessToken={auth.oidcUser.access_token} accounts={auth.currentUser.accounts} /> : null}
|
||||
{activeWorkspace === "diagnostics" && hasOperationsAccess ? <OpsDiagnosticsWorkspace accessToken={auth.oidcUser.access_token} accounts={auth.currentUser.accounts} /> : null}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
{auth.currentUser && auth.oidcUser ? (
|
||||
<section className="workspace-shell" aria-label="业务工作台">
|
||||
<div className="workspace-shell__heading">
|
||||
<div>
|
||||
<p className="eyebrow">{workspaceKicker(activeWorkspace)}</p>
|
||||
<h2>{activeOption?.label}</h2>
|
||||
</div>
|
||||
<p>{activeOption?.detail}；当前内容按账号权限加载。</p>
|
||||
</div>
|
||||
<div className="workspace-shell__content">
|
||||
{activeWorkspace === "family" ? <SaaSWorkspace accessToken={auth.oidcUser.access_token} accounts={auth.currentUser.accounts} /> : null}
|
||||
{activeWorkspace === "config" && hasOperationsAccess ? <OpsConfigWorkspace accessToken={auth.oidcUser.access_token} accounts={auth.currentUser.accounts} /> : null}
|
||||
{activeWorkspace === "billing" && hasOperationsAccess ? <OpsBillingWorkspace accessToken={auth.oidcUser.access_token} accounts={auth.currentUser.accounts} /> : null}
|
||||
{activeWorkspace === "alerts" && hasOperationsAccess ? <OpsAlertWorkspace accessToken={auth.oidcUser.access_token} accounts={auth.currentUser.accounts} /> : null}
|
||||
{activeWorkspace === "diagnostics" && hasOperationsAccess ? <OpsDiagnosticsWorkspace accessToken={auth.oidcUser.access_token} accounts={auth.currentUser.accounts} /> : null}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
<section className="milestone-panel">
|
||||
<div>
|
||||
<p className="eyebrow">CURRENT MILESTONE</p>
|
||||
<h2>M8 · 联调、试点与上线准备</h2>
|
||||
</div>
|
||||
<ol>
|
||||
<li className="done"><span>M0</span>需求与架构基线</li>
|
||||
<li className="done"><span>M1</span>工程与环境</li>
|
||||
<li className="done"><span>M2</span>公共业务底座</li>
|
||||
<li className="done"><span>M3</span>端到端语音闭环</li>
|
||||
<li className="done"><span>M4—M6</span>SaaS与数据闭环</li>
|
||||
<li className="done"><span>M7</span>运营与生产加固</li>
|
||||
<li className="active"><span>M8</span>联调、试点与上线</li>
|
||||
</ol>
|
||||
</section>
|
||||
</main>
|
||||
<section className="milestone-panel">
|
||||
<div>
|
||||
<p className="eyebrow">CURRENT MILESTONE</p>
|
||||
<h2>M8 · 联调、试点与上线准备</h2>
|
||||
</div>
|
||||
<ol>
|
||||
<li className="done"><span>M0</span>需求与架构基线</li>
|
||||
<li className="done"><span>M1</span>工程与环境</li>
|
||||
<li className="done"><span>M2</span>公共业务底座</li>
|
||||
<li className="done"><span>M3</span>端到端语音闭环</li>
|
||||
<li className="done"><span>M4—M6</span>SaaS与数据闭环</li>
|
||||
<li className="done"><span>M7</span>运营与生产加固</li>
|
||||
<li className="active"><span>M8</span>联调、试点与上线</li>
|
||||
</ol>
|
||||
</section>
|
||||
</main>
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
function workspaceIcon(workspace: WorkspaceKey) {
|
||||
return {
|
||||
family: <TeamOutlined />,
|
||||
config: <SettingOutlined />,
|
||||
billing: <DollarOutlined />,
|
||||
alerts: <AlertOutlined />,
|
||||
diagnostics: <ToolOutlined />
|
||||
}[workspace];
|
||||
}
|
||||
|
||||
function workspaceKicker(workspace: WorkspaceKey) {
|
||||
return {
|
||||
family: "FAMILY OPERATIONS",
|
||||
config: "RUNTIME CONFIGURATION",
|
||||
billing: "BILLING & QUOTA",
|
||||
alerts: "ALERT MANAGEMENT",
|
||||
diagnostics: "DIAGNOSTICS"
|
||||
}[workspace];
|
||||
}
|
||||
|
||||
function roleLabel(role: string) {
|
||||
return ({ owner: "所有者", admin: "管理员", editor: "编辑者", viewer: "查看者" } as Record<string, string>)[role] ?? role;
|
||||
}
|
||||
|
||||
+204
-26
@@ -41,7 +41,8 @@ import {
|
||||
type Story
|
||||
} from "../api/client";
|
||||
|
||||
type Tab = "members" | "subjects" | "devices" | "firmware" | "conversations" | "stories" | "sharing" | "privacy";
|
||||
export type CustomerSection = "home" | "members" | "subjects" | "devices" | "conversations" | "stories" | "sharing" | "privacy" | "billing" | "messages";
|
||||
type Tab = CustomerSection | "firmware";
|
||||
type LoadState = "idle" | "loading" | "ready" | "error";
|
||||
type MediaLoadState = "idle" | "loading" | "ready" | "restricted" | "error";
|
||||
type EventStreamState = "connecting" | "connected" | "reconnecting";
|
||||
@@ -86,8 +87,15 @@ type FamilyControlDraft =
|
||||
| { kind: "sharing_grant_create"; subjectID: string; subjectName: string; granteeName: string; resourceLabel: string; input: SharingGrantInput; acknowledged: boolean; confirmation: string }
|
||||
| { kind: "sharing_revoke"; item: SharingGrant; acknowledged: boolean; confirmation: string };
|
||||
|
||||
export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string; accounts: CurrentUser["accounts"] }) {
|
||||
const [tab, setTab] = useState<Tab>("subjects");
|
||||
export function SaaSWorkspace({ accessToken, accounts, section = "home", onSectionChange, showNavigation = true, enableFirmware = false }: {
|
||||
accessToken: string;
|
||||
accounts: CurrentUser["accounts"];
|
||||
section?: CustomerSection;
|
||||
onSectionChange?: (section: CustomerSection) => void;
|
||||
showNavigation?: boolean;
|
||||
enableFirmware?: boolean;
|
||||
}) {
|
||||
const [tab, setTab] = useState<Tab>(section);
|
||||
const [state, setState] = useState<LoadState>("loading");
|
||||
const [error, setError] = useState<string>();
|
||||
const [households, setHouseholds] = useState<Household[]>([]);
|
||||
@@ -179,10 +187,21 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
const [rollbackReleaseID, setRollbackReleaseID] = useState("");
|
||||
const [eventStreamState, setEventStreamState] = useState<EventStreamState>("connecting");
|
||||
const [lastEventAt, setLastEventAt] = useState<string>();
|
||||
const [eventNotices, setEventNotices] = useState<Array<{ id: string; type: string; resourceType: string; status: string; occurredAt: string }>>([]);
|
||||
const [billingUsages, setBillingUsages] = useState<ConversationUsage[]>([]);
|
||||
const [billingLoading, setBillingLoading] = useState(false);
|
||||
const [billingError, setBillingError] = useState<string>();
|
||||
const eventRefreshTimer = useRef<number | undefined>(undefined);
|
||||
const lastEventRefreshAt = useRef(0);
|
||||
const conversationDetailController = useRef<AbortController | undefined>(undefined);
|
||||
|
||||
useEffect(() => setTab(section), [section]);
|
||||
|
||||
function selectSection(next: CustomerSection) {
|
||||
setTab(next);
|
||||
onSectionChange?.(next);
|
||||
}
|
||||
|
||||
const scheduleEventRefresh = useCallback(() => {
|
||||
if (eventRefreshTimer.current !== undefined) return;
|
||||
const minimumIntervalMS = 2000;
|
||||
@@ -276,6 +295,18 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
window.sessionStorage.setItem(storageKey, id);
|
||||
if (data) {
|
||||
setLastEventAt(new Date().toISOString());
|
||||
try {
|
||||
const item = JSON.parse(data) as { id?: number; type?: string; resource_type?: string; status?: string; occurred_at?: string };
|
||||
setEventNotices((current) => [{
|
||||
id: String(item.id ?? id),
|
||||
type: item.type ?? "resource.updated",
|
||||
resourceType: item.resource_type ?? "resource",
|
||||
status: item.status ?? "UPDATED",
|
||||
occurredAt: item.occurred_at ?? new Date().toISOString()
|
||||
}, ...current.filter((notice) => notice.id !== String(item.id ?? id))].slice(0, 50));
|
||||
} catch {
|
||||
// The event still triggers an authoritative REST refresh when a legacy payload cannot be decoded.
|
||||
}
|
||||
scheduleEventRefresh();
|
||||
}
|
||||
}
|
||||
@@ -401,6 +432,23 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
return () => controller.abort();
|
||||
}, [accessToken, conversationEngineMode, conversationFrom, conversationStatus, conversationTo, refreshRevision, selectedSubjectID]);
|
||||
|
||||
useEffect(() => {
|
||||
if (tab !== "billing" || conversations.length === 0) {
|
||||
if (tab === "billing") setBillingUsages([]);
|
||||
return;
|
||||
}
|
||||
const controller = new AbortController();
|
||||
setBillingLoading(true);
|
||||
setBillingError(undefined);
|
||||
void Promise.all(conversations.map((item) => platformApi.conversationUsage(item.id, accessToken, controller.signal)))
|
||||
.then((responses) => setBillingUsages(responses.map((response) => response.data)))
|
||||
.catch((cause) => {
|
||||
if (!(cause instanceof DOMException && cause.name === "AbortError")) setBillingError(errorMessage(cause));
|
||||
})
|
||||
.finally(() => { if (!controller.signal.aborted) setBillingLoading(false); });
|
||||
return () => controller.abort();
|
||||
}, [accessToken, conversations, tab]);
|
||||
|
||||
useEffect(() => {
|
||||
if (devices.length === 0) { setPresence({}); setTwins({}); return; }
|
||||
const controller = new AbortController();
|
||||
@@ -428,7 +476,7 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
const canReviewStory = selectedHousehold?.capabilities.includes("story.review") ?? false;
|
||||
const canReadPrivacy = selectedHousehold?.capabilities.includes("privacy.read") ?? false;
|
||||
const canManagePrivacy = selectedHousehold?.capabilities.includes("privacy.manage") ?? false;
|
||||
const canManageFirmware = selectedHousehold?.capabilities.includes("firmware.manage") ?? false;
|
||||
const canManageFirmware = enableFirmware && (selectedHousehold?.capabilities.includes("firmware.manage") ?? false);
|
||||
const canManageRecordingAccess = selectedHousehold?.role === "owner" || selectedHousehold?.role === "admin";
|
||||
const canManageSharing = selectedHousehold?.role === "owner" || selectedHousehold?.role === "admin";
|
||||
const policyVersion = accounts.find((account) => account.tenant_id === selectedHousehold?.tenant_id)?.policy_version ?? "";
|
||||
@@ -551,7 +599,7 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
}
|
||||
|
||||
async function openStoryConversation(story: Story) {
|
||||
setTab("conversations");
|
||||
selectSection("conversations");
|
||||
await openConversation(story.conversation_id);
|
||||
}
|
||||
|
||||
@@ -1084,9 +1132,9 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
<section className="workspace" aria-label="家庭业务工作台">
|
||||
<div className="workspace__header">
|
||||
<div>
|
||||
<p className="eyebrow">FAMILY OPERATIONS</p>
|
||||
<h2>家庭业务工作台</h2>
|
||||
<p>家庭、长者、授权、设备和通话数据均按服务端成员关系隔离。</p>
|
||||
<p className="eyebrow">FAMILY COMPANION</p>
|
||||
<h2>{customerSectionTitle(tab)}</h2>
|
||||
<p>{customerSectionDescription(tab)}</p>
|
||||
</div>
|
||||
<div className="workspace__actions">
|
||||
<span className={`event-stream-status event-stream-status--${eventStreamState}`} title={lastEventAt ? `最近事件：${formatDate(lastEventAt)}` : "等待状态事件"}>{eventStreamState === "connected" ? "状态实时更新" : eventStreamState === "reconnecting" ? "状态重连中" : "状态连接中"}</span>
|
||||
@@ -1100,12 +1148,12 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form className="accept-invitation" onSubmit={(event) => void acceptInvitation(event)}>
|
||||
{tab === "members" ? <form className="accept-invitation" onSubmit={(event) => void acceptInvitation(event)}>
|
||||
<label><span>收到家庭邀请？</span><input value={acceptInvitationToken} minLength={32} maxLength={128} autoComplete="off" onChange={(event) => setAcceptInvitationToken(event.target.value)} placeholder="粘贴一次性邀请凭据" /><small>先只读预览目标客户组织、家庭、角色和到期时间，确认后才建立成员关系。</small></label>
|
||||
<button type="submit" className="button-secondary" disabled={actionBusy || acceptInvitationToken.trim().length < 32 || acceptInvitationToken.trim().length > 128}>{actionBusy ? "正在核验…" : "预览并接受"}</button>
|
||||
</form>
|
||||
</form> : null}
|
||||
|
||||
<details className="household-create" open={households.length === 0}>
|
||||
{tab === "members" || households.length === 0 ? <details className="household-create" open={households.length === 0}>
|
||||
<summary>{households.length === 0 ? "创建第一个家庭" : "新增家庭"}</summary>
|
||||
<form className="tool-form" onSubmit={(event) => void createHousehold(event)}>
|
||||
<div><strong>建立家庭空间</strong><span>创建成功后，当前账号自动成为所有者，可继续新增长者档案和邀请成员。</span></div>
|
||||
@@ -1113,7 +1161,7 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
<label><span>家庭名称</span><input value={newHouseholdName} maxLength={200} onChange={(event) => setNewHouseholdName(event.target.value)} placeholder="例如：王家陪伴空间" required /></label>
|
||||
<button type="submit" disabled={actionBusy || !newHouseholdTenantID || !newHouseholdName.trim()}>创建家庭</button>
|
||||
</form>
|
||||
</details>
|
||||
</details> : null}
|
||||
|
||||
{state === "loading" ? <StatePanel title="正在载入家庭数据" detail="正在校验客户组织和家庭成员关系…" /> : null}
|
||||
{state === "error" ? <StatePanel title="家庭数据载入失败" detail={error ?? "未知错误"} action={() => void loadRoot()} /> : null}
|
||||
@@ -1124,28 +1172,35 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
|
||||
{state === "ready" && selectedHousehold ? (
|
||||
<>
|
||||
<div className="workspace__summary">
|
||||
{tab === "home" ? <div className="workspace__summary">
|
||||
<Metric label="长者档案" value={subjects.length} detail={canWriteSubject ? "当前角色可编辑" : "当前角色只读"} />
|
||||
<Metric label="有效分项授权" value={effectiveConsents} detail="共五类独立授权" />
|
||||
<Metric label="已确认事实" value={confirmedFacts} detail={`${facts.length - confirmedFacts}项等待核对`} />
|
||||
<Metric label="家庭设备" value={devices.filter((item) => item.household_id === selectedHousehold.id).length} detail={`${Object.values(presence).filter((item) => item.online).length}台在线`} />
|
||||
</div>
|
||||
<Metric label="家庭设备" value={devices.filter((item) => item.household_id === selectedHousehold.id).length} detail={`${devices.filter((item) => item.household_id === selectedHousehold.id && presence[item.id]?.online).length}台在线`} />
|
||||
</div> : null}
|
||||
|
||||
{selectedSubject ? <ConversationReadinessPanel readiness={conversationReadiness} subject={selectedSubject}
|
||||
loading={subjectLoading} onAction={(action) => setTab(action === "EDIT_PROFILE" || action === "MANAGE_CONSENTS" ? "subjects" : "devices")} /> : null}
|
||||
{tab === "home" && selectedSubject ? <ConversationReadinessPanel readiness={conversationReadiness} subject={selectedSubject}
|
||||
loading={subjectLoading} onAction={(action) => selectSection(action === "EDIT_PROFILE" || action === "MANAGE_CONSENTS" ? "subjects" : "devices")} /> : null}
|
||||
|
||||
<nav className="workspace__tabs" aria-label="业务模块">
|
||||
<TabButton active={tab === "members"} onClick={() => setTab("members")}>家庭成员</TabButton>
|
||||
<TabButton active={tab === "subjects"} onClick={() => setTab("subjects")}>长者与授权</TabButton>
|
||||
<TabButton active={tab === "devices"} onClick={() => setTab("devices")}>设备管理</TabButton>
|
||||
{showNavigation ? <nav className="workspace__tabs" aria-label="业务模块">
|
||||
<TabButton active={tab === "home"} onClick={() => selectSection("home")}>首页</TabButton>
|
||||
<TabButton active={tab === "members"} onClick={() => selectSection("members")}>家庭成员</TabButton>
|
||||
<TabButton active={tab === "subjects"} onClick={() => selectSection("subjects")}>长者与授权</TabButton>
|
||||
<TabButton active={tab === "devices"} onClick={() => selectSection("devices")}>设备管理</TabButton>
|
||||
{canManageFirmware ? <TabButton active={tab === "firmware"} onClick={() => setTab("firmware")}>固件发布</TabButton> : null}
|
||||
<TabButton active={tab === "conversations"} onClick={() => setTab("conversations")}>通话记录</TabButton>
|
||||
<TabButton active={tab === "stories"} onClick={() => setTab("stories")}>故事与记忆</TabButton>
|
||||
{canManageSharing ? <TabButton active={tab === "sharing"} onClick={() => setTab("sharing")}>资源分享</TabButton> : null}
|
||||
{canReadPrivacy ? <TabButton active={tab === "privacy"} onClick={() => setTab("privacy")}>隐私请求</TabButton> : null}
|
||||
</nav>
|
||||
<TabButton active={tab === "conversations"} onClick={() => selectSection("conversations")}>通话记录</TabButton>
|
||||
<TabButton active={tab === "stories"} onClick={() => selectSection("stories")}>故事与记忆</TabButton>
|
||||
{canManageSharing ? <TabButton active={tab === "sharing"} onClick={() => selectSection("sharing")}>资源分享</TabButton> : null}
|
||||
{canReadPrivacy ? <TabButton active={tab === "privacy"} onClick={() => selectSection("privacy")}>隐私请求</TabButton> : null}
|
||||
<TabButton active={tab === "billing"} onClick={() => selectSection("billing")}>费用与额度</TabButton>
|
||||
<TabButton active={tab === "messages"} onClick={() => selectSection("messages")}>消息中心</TabButton>
|
||||
</nav> : null}
|
||||
|
||||
{subjectError ? <div className="workspace__inline-error" role="alert">{subjectError}</div> : null}
|
||||
{tab === "home" ? <CustomerHomePanel household={selectedHousehold} subject={selectedSubject} subjects={subjects}
|
||||
devices={devices.filter((item) => item.household_id === selectedHousehold.id)} presence={presence}
|
||||
conversations={conversations} stories={stories} privacyRequests={privacyRequests}
|
||||
onOpen={(section) => selectSection(section)} /> : null}
|
||||
{tab === "members" ? <MemberPanel household={selectedHousehold} members={members} invitations={invitations}
|
||||
canManage={canManageMembers} canTransfer={canTransferOwnership} actionBusy={actionBusy}
|
||||
inviteeHint={inviteeHint} onInviteeHint={setInviteeHint} inviteRole={inviteRole} onInviteRole={setInviteRole}
|
||||
@@ -1238,12 +1293,135 @@ export function SaaSWorkspace({ accessToken, accounts }: { accessToken: string;
|
||||
{tab === "privacy" && canReadPrivacy ? <PrivacyPanel subjects={subjects} selectedID={selectedSubjectID} onSelect={setSelectedSubjectID}
|
||||
requests={privacyRequests} exports={exportTasks} loading={subjectLoading} canManage={canManagePrivacy} actionBusy={actionBusy}
|
||||
onCreateAccess={createPrivacyAccessRequest} onCreateDelete={createPrivacyDeleteRequest} onCreateExport={createExportTask} onDownloadExport={downloadExport} /> : null}
|
||||
{tab === "privacy" && !canReadPrivacy ? <StatePanel title="当前角色不能查看隐私请求" detail="家庭查看者没有隐私请求读取权限，请联系家庭所有者或管理员。" /> : null}
|
||||
{tab === "sharing" && !canManageSharing ? <StatePanel title="当前角色不能管理资源分享" detail="仅家庭所有者或管理员可以创建、撤销故事、文字和录音分享。" /> : null}
|
||||
{tab === "billing" ? <CustomerBillingPanel conversations={conversations} usages={billingUsages} loading={billingLoading} error={billingError} onOpenConversations={() => selectSection("conversations")} /> : null}
|
||||
{tab === "messages" ? <CustomerMessagePanel notices={eventNotices} devices={devices.filter((item) => item.household_id === selectedHousehold.id)} presence={presence} stories={stories} privacyRequests={privacyRequests} eventState={eventStreamState} /> : null}
|
||||
</>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CustomerHomePanel({ household, subject, subjects, devices, presence, conversations, stories, privacyRequests, onOpen }: {
|
||||
household: Household;
|
||||
subject?: Subject;
|
||||
subjects: Subject[];
|
||||
devices: ManagedDevice[];
|
||||
presence: Record<string, DevicePresence>;
|
||||
conversations: ConversationSummary[];
|
||||
stories: Story[];
|
||||
privacyRequests: PrivacyRequest[];
|
||||
onOpen: (section: CustomerSection) => void;
|
||||
}) {
|
||||
const onlineDevices = devices.filter((item) => presence[item.id]?.online).length;
|
||||
const activeConversations = conversations.filter((item) => ["PREPARING", "ROOM_ISSUED", "STARTING_AGENT", "ACTIVE", "STOPPING"].includes(item.status)).length;
|
||||
const pendingStories = stories.filter((item) => item.status === "CANDIDATE" || item.status === "IN_REVIEW").length;
|
||||
return <div className="customer-home">
|
||||
<section className="customer-welcome-card">
|
||||
<div><p className="eyebrow">WELCOME HOME</p><h3>{subject ? `守护${subject.preferred_name}的每一次陪伴` : `欢迎进入${household.name}`}</h3><p>设备状态、通话进展、授权和家庭故事都在同一处更新，所有内容只对有权限的家庭成员开放。</p></div>
|
||||
<button type="button" onClick={() => onOpen(subject ? "conversations" : "subjects")}>{subject ? "查看最近通话" : "添加长者档案"}</button>
|
||||
</section>
|
||||
<section className="customer-quick-grid" aria-label="家庭概况">
|
||||
<button type="button" onClick={() => onOpen("subjects")}><span>长者档案</span><strong>{subjects.length}</strong><small>{subject?.preferred_name ?? "等待添加档案"}</small></button>
|
||||
<button type="button" onClick={() => onOpen("devices")}><span>在线设备</span><strong>{onlineDevices}/{devices.length}</strong><small>{devices.length ? "查看设备与音量配置" : "等待绑定设备"}</small></button>
|
||||
<button type="button" onClick={() => onOpen("conversations")}><span>进行中通话</span><strong>{activeConversations}</strong><small>当前长者已加载 {conversations.length} 条记录</small></button>
|
||||
<button type="button" onClick={() => onOpen("stories")}><span>待确认故事</span><strong>{pendingStories}</strong><small>{stories.length} 条故事候选与回忆</small></button>
|
||||
</section>
|
||||
<section className="customer-action-list">
|
||||
<div><p className="eyebrow">QUICK ACTIONS</p><h3>常用入口</h3></div>
|
||||
<button type="button" onClick={() => onOpen("members")}><strong>邀请家人</strong><span>添加成员并分配查看或编辑权限</span></button>
|
||||
<button type="button" onClick={() => onOpen("sharing")}><strong>分享故事</strong><span>创建定向分享并随时撤销</span></button>
|
||||
<button type="button" onClick={() => onOpen("privacy")}><strong>隐私申请</strong><span>{privacyRequests.length} 条访问、导出或删除申请</span></button>
|
||||
</section>
|
||||
</div>;
|
||||
}
|
||||
|
||||
function CustomerBillingPanel({ conversations, usages, loading, error, onOpenConversations }: {
|
||||
conversations: ConversationSummary[];
|
||||
usages: ConversationUsage[];
|
||||
loading: boolean;
|
||||
error?: string;
|
||||
onOpenConversations: () => void;
|
||||
}) {
|
||||
const totals = new Map<string, number>();
|
||||
const categories = new Map<string, { cost: number; currency: string }>();
|
||||
usages.forEach((usage) => {
|
||||
const currency = usage.currency || "CNY";
|
||||
totals.set(currency, (totals.get(currency) ?? 0) + usage.cost_micros);
|
||||
usage.lines.forEach((line) => {
|
||||
const key = `${line.usage_category}:${line.currency}`;
|
||||
const current = categories.get(key) ?? { cost: 0, currency: line.currency };
|
||||
current.cost += line.cost_micros;
|
||||
categories.set(key, current);
|
||||
});
|
||||
});
|
||||
return <section className="customer-billing-panel">
|
||||
<div className="panel-title"><div><p className="eyebrow">USAGE & COST</p><h3>费用与额度</h3></div><button type="button" className="button-secondary" onClick={onOpenConversations}>查看通话明细</button></div>
|
||||
<p className="workspace__readonly-note">家庭端只汇总当前长者已加载通话的已核价费用；平台价格、供应商任务号和组织硬额度由运维端管理。</p>
|
||||
{loading ? <StatePanel title="正在汇总通话费用" detail={`正在读取 ${conversations.length} 次通话的计量结果…`} /> : null}
|
||||
{error ? <div className="workspace__inline-error" role="alert">{error}</div> : null}
|
||||
{!loading ? <div className="billing-total-grid">
|
||||
{[...totals.entries()].map(([currency, cost]) => <article key={currency}><span>已加载通话费用</span><strong>{formatUsageMoney(cost, currency)}</strong><small>{usages.length} 次通话已有计量结果</small></article>)}
|
||||
{totals.size === 0 ? <article><span>已加载通话费用</span><strong>{formatUsageMoney(0, "CNY")}</strong><small>当前没有已核价费用</small></article> : null}
|
||||
<article><span>家庭可见范围</span><strong>{conversations.length}</strong><small>当前长者、当前筛选条件</small></article>
|
||||
</div> : null}
|
||||
{!loading && categories.size ? <div className="billing-category-list">{[...categories.entries()].map(([key, item]) => <div key={key}><span>{usageCategoryLabel(key.split(":")[0])}</span><strong>{formatUsageMoney(item.cost, item.currency)}</strong></div>)}</div> : null}
|
||||
<div className="quota-note"><strong>额度说明</strong><p>家庭端不会读取或修改平台级额度策略。创建通话时，后端仍会实时执行额度校验；如果额度不足，页面会显示服务端返回的明确原因。</p></div>
|
||||
</section>;
|
||||
}
|
||||
|
||||
function CustomerMessagePanel({ notices, devices, presence, stories, privacyRequests, eventState }: {
|
||||
notices: Array<{ id: string; type: string; resourceType: string; status: string; occurredAt: string }>;
|
||||
devices: ManagedDevice[];
|
||||
presence: Record<string, DevicePresence>;
|
||||
stories: Story[];
|
||||
privacyRequests: PrivacyRequest[];
|
||||
eventState: EventStreamState;
|
||||
}) {
|
||||
const offline = devices.filter((item) => presence[item.id] && !presence[item.id].online);
|
||||
const pendingStories = stories.filter((item) => item.status === "CANDIDATE" || item.status === "IN_REVIEW");
|
||||
const activePrivacy = privacyRequests.filter((item) => !["COMPLETED", "REJECTED", "FAILED"].includes(item.status));
|
||||
const derived = [
|
||||
...offline.map((item) => ({ id: `offline-${item.id}`, title: "设备当前离线", detail: `${item.subject_name} · ${item.model}`, tone: "warning" })),
|
||||
...pendingStories.map((item) => ({ id: `story-${item.id}`, title: "故事等待家庭确认", detail: item.title, tone: "info" })),
|
||||
...activePrivacy.map((item) => ({ id: `privacy-${item.id}`, title: "隐私请求处理中", detail: `${item.request_type} · ${item.status}`, tone: "info" }))
|
||||
];
|
||||
return <section className="customer-message-panel">
|
||||
<div className="panel-title"><div><p className="eyebrow">MESSAGE CENTER</p><h3>消息中心</h3><p>这里只展示状态提醒，不在通知中携带转写、录音、故事正文或隐私原因。</p></div><span className={`event-stream-status event-stream-status--${eventState}`}>{eventState === "connected" ? "实时连接" : eventState === "reconnecting" ? "重新连接" : "正在连接"}</span></div>
|
||||
{derived.length ? <div className="message-list">{derived.map((item) => <article key={item.id} className={`message-item message-item--${item.tone}`}><span aria-hidden="true" /><div><strong>{item.title}</strong><p>{item.detail}</p></div></article>)}</div> : <p className="workspace__readonly-note">当前没有需要处理的家庭提醒。</p>}
|
||||
<div className="message-timeline"><h4>本次登录收到的实时事件</h4>{notices.length ? notices.map((notice) => <article key={notice.id}><time>{formatDate(notice.occurredAt)}</time><div><strong>{eventTypeLabel(notice.type)}</strong><p>{resourceTypeLabel(notice.resourceType)} · {notice.status}</p></div></article>) : <p>暂未收到新的状态事件。服务端事件到达后会自动出现在这里。</p>}</div>
|
||||
</section>;
|
||||
}
|
||||
|
||||
function customerSectionTitle(section: Tab) {
|
||||
return ({ home: "家庭首页", members: "家庭管理", subjects: "长者管理", devices: "设备管理", firmware: "固件发布", conversations: "通话记录", stories: "故事与记忆", sharing: "资源分享", privacy: "隐私请求", billing: "费用与额度", messages: "消息中心" } as Record<Tab, string>)[section];
|
||||
}
|
||||
|
||||
function customerSectionDescription(section: Tab) {
|
||||
return ({
|
||||
home: "查看家庭陪伴服务的最新状态和待办事项。",
|
||||
members: "管理家庭空间、成员邀请、角色和所有权。",
|
||||
subjects: "维护长者档案、稳定事实和分项授权。",
|
||||
devices: "绑定陪伴设备，查看在线状态并调整安全配置。",
|
||||
firmware: "管理设备固件发布。",
|
||||
conversations: "查看通话进展、文字内容、录音授权和单次费用。",
|
||||
stories: "核对从通话中整理的故事和长期记忆。",
|
||||
sharing: "按资源和权限范围向指定家庭成员分享内容。",
|
||||
privacy: "提交访问、导出或删除申请并跟踪处理进度。",
|
||||
billing: "汇总当前可见通话的实际计量费用。",
|
||||
messages: "集中查看设备、通话、故事和隐私请求的状态提醒。"
|
||||
} as Record<Tab, string>)[section];
|
||||
}
|
||||
|
||||
function eventTypeLabel(type: string) {
|
||||
return ({ "device.presence.changed": "设备在线状态变化", "conversation.started": "通话已开始", "conversation.completed": "通话已完成", "conversation.failed": "通话启动失败", "story.created": "生成新的故事候选", "story.revised": "故事内容已更新", "media.upload.completed": "通话媒体上传完成", "export.ready": "隐私导出已就绪", "privacy_request.updated": "隐私请求状态变化", "device.command.updated": "设备指令状态变化" } as Record<string, string>)[type] ?? "业务状态已更新";
|
||||
}
|
||||
|
||||
function resourceTypeLabel(type: string) {
|
||||
return ({ device: "设备", conversation: "通话", story: "故事", upload_batch: "媒体", export_task: "导出任务", privacy_request: "隐私请求", device_command: "设备指令" } as Record<string, string>)[type] ?? "业务资源";
|
||||
}
|
||||
|
||||
function ConversationReadinessPanel({ readiness, subject, loading, onAction }: {
|
||||
readiness?: ConversationReadiness; subject: Subject; loading: boolean; onAction: (action: string) => void;
|
||||
}) {
|
||||
|
||||
@@ -891,3 +891,721 @@ form[aria-label="联调问题流转编辑"] label small { color: #7b898d; font-w
|
||||
.alert-config-form > div, .alert-config-form__wide { grid-column: auto; }
|
||||
.alert-config-form button { justify-self: stretch; }
|
||||
}
|
||||
|
||||
/* Customer portal: a separate family-facing shell. */
|
||||
.customer-layout {
|
||||
min-height: 100vh;
|
||||
color: #1f2329;
|
||||
background: #f5f6f8;
|
||||
}
|
||||
|
||||
.customer-layout button:hover { transform: none; }
|
||||
.customer-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 60px;
|
||||
padding: 0 22px 0 14px;
|
||||
border-bottom: 1px solid #e8eaee;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(31, 35, 41, 0.04);
|
||||
}
|
||||
|
||||
.customer-header__brand,
|
||||
.customer-header__actions,
|
||||
.customer-account-button,
|
||||
.customer-sider__title,
|
||||
.customer-sider__help,
|
||||
.customer-profile__identity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.customer-header__brand { gap: 10px; color: #646a73; white-space: nowrap; }
|
||||
.customer-header__brand > strong { color: #1f2329; font-size: 18px; }
|
||||
.customer-brand-mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 7px;
|
||||
color: #fff;
|
||||
background: #5b5ce2;
|
||||
font-size: 17px;
|
||||
}
|
||||
.customer-brand-divider { width: 1px; height: 22px; margin: 0 5px; background: #e3e6eb; }
|
||||
.customer-header__actions { gap: 10px; }
|
||||
.customer-search { width: min(320px, 28vw); }
|
||||
.customer-account-button { gap: 8px; height: 42px; padding: 0 8px; color: #3f444c; background: transparent; }
|
||||
|
||||
.customer-layout__body { min-height: calc(100vh - 60px); }
|
||||
.customer-sider {
|
||||
position: sticky !important;
|
||||
top: 60px;
|
||||
align-self: flex-start;
|
||||
height: calc(100vh - 60px);
|
||||
overflow: auto;
|
||||
border-right: 1px solid #e8eaee;
|
||||
background: #fff !important;
|
||||
}
|
||||
.customer-sider__title { gap: 10px; height: 58px; padding: 0 24px; color: #30343b; font-weight: 700; }
|
||||
.customer-sider .ant-menu { border-inline-end: 0 !important; padding: 0 10px; background: transparent; }
|
||||
.customer-sider .ant-menu-item,
|
||||
.customer-sider .ant-menu-submenu-title { margin-block: 3px; font-size: 14px; }
|
||||
.customer-sider__help {
|
||||
gap: 10px;
|
||||
margin: 22px 14px;
|
||||
padding: 12px;
|
||||
border: 1px solid #e8eaee;
|
||||
border-radius: 8px;
|
||||
color: #5b5ce2;
|
||||
background: #f8f8ff;
|
||||
}
|
||||
.customer-sider__help div { display: grid; gap: 2px; }
|
||||
.customer-sider__help strong { color: #3f444c; font-size: 12px; }
|
||||
.customer-sider__help span { color: #8b9199; font-size: 10px; }
|
||||
|
||||
.customer-content { min-width: 0; background: #f5f6f8; }
|
||||
.customer-page {
|
||||
width: min(1440px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 22px 28px 48px;
|
||||
}
|
||||
.customer-page__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
margin: 14px 0 18px;
|
||||
}
|
||||
.customer-page__header h1 { max-width: none; color: #1f2329; font-family: inherit; font-size: 26px; line-height: 1.35; }
|
||||
.customer-page__header p { margin: 6px 0 0; color: #646a73; line-height: 1.6; }
|
||||
.customer-auth-state { display: flex; justify-content: center; }
|
||||
.customer-auth-state .ant-card-body { display: flex; align-items: center; gap: 12px; color: #646a73; }
|
||||
|
||||
.customer-page > .workspace {
|
||||
margin-top: 0;
|
||||
padding: 20px;
|
||||
border: 1px solid #e3e6eb;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
.customer-page .workspace__header { align-items: center; padding-bottom: 16px; border-bottom: 1px solid #eef0f3; }
|
||||
.customer-page .workspace__header h2 { color: #1f2329; font-size: 18px; }
|
||||
.customer-page .workspace__header > div:first-child > p:last-child { color: #7b818a; font-size: 13px; }
|
||||
.customer-page .eyebrow { margin-bottom: 5px; color: #5b5ce2; font-size: 10px; letter-spacing: .13em; }
|
||||
.customer-page .workspace__actions select { min-width: 160px; border-radius: 7px; }
|
||||
.customer-page .workspace__summary { margin-top: 16px; }
|
||||
.customer-page .metric { border: 1px solid #e8eaee; border-radius: 8px; background: #fafbfc; }
|
||||
.customer-page .conversation-readiness,
|
||||
.customer-page .conversation-readiness--ready,
|
||||
.customer-page .conversation-readiness--blocked { border-radius: 8px; background: #fff; }
|
||||
|
||||
.customer-welcome-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
margin-top: 16px;
|
||||
padding: 24px;
|
||||
border: 1px solid #dedfff;
|
||||
border-radius: 10px;
|
||||
background: #f7f7ff;
|
||||
}
|
||||
.customer-welcome-card h3 { color: #22263d; font-size: 22px; }
|
||||
.customer-welcome-card p:not(.eyebrow) { max-width: 650px; margin: 8px 0 0; color: #686e7b; line-height: 1.7; }
|
||||
.customer-welcome-card > button { flex: none; border-radius: 7px; color: #fff; background: #5b5ce2; }
|
||||
.customer-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
|
||||
.customer-quick-grid button {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
border: 1px solid #e6e8ec;
|
||||
border-radius: 8px;
|
||||
color: #646a73;
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
}
|
||||
.customer-quick-grid button:hover { border-color: #b8b9f5; background: #fafaff; }
|
||||
.customer-quick-grid strong { color: #1f2329; font-size: 24px; }
|
||||
.customer-quick-grid small { overflow: hidden; color: #8b9199; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.customer-action-list { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 12px; margin-top: 14px; }
|
||||
.customer-action-list > div,
|
||||
.customer-action-list > button { padding: 16px; border: 1px solid #e6e8ec; border-radius: 8px; background: #fff; text-align: left; }
|
||||
.customer-action-list > div { border: 0; padding-left: 0; }
|
||||
.customer-action-list > button { display: grid; gap: 6px; color: #1f2329; }
|
||||
.customer-action-list > button span { color: #8b9199; font-size: 12px; font-weight: 400; line-height: 1.5; }
|
||||
|
||||
.customer-billing-panel,
|
||||
.customer-message-panel { margin-top: 16px; }
|
||||
.panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
|
||||
.panel-title h3 { color: #1f2329; font-size: 18px; }
|
||||
.panel-title p:not(.eyebrow) { margin: 6px 0 0; color: #7b818a; }
|
||||
.billing-total-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 14px 0; }
|
||||
.billing-total-grid article { padding: 20px; border: 1px solid #e6e8ec; border-radius: 8px; background: #fafbfc; }
|
||||
.billing-total-grid span,
|
||||
.billing-total-grid small { display: block; color: #7b818a; }
|
||||
.billing-total-grid strong { display: block; margin: 8px 0; color: #1f2329; font-size: 26px; }
|
||||
.billing-category-list { border: 1px solid #e6e8ec; border-radius: 8px; overflow: hidden; }
|
||||
.billing-category-list div { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #eef0f3; }
|
||||
.billing-category-list div:last-child { border-bottom: 0; }
|
||||
.quota-note { margin-top: 14px; padding: 16px; border-left: 3px solid #5b5ce2; background: #f7f7ff; }
|
||||
.quota-note p { margin: 5px 0 0; color: #646a73; line-height: 1.65; }
|
||||
|
||||
.message-list,
|
||||
.message-timeline { display: grid; gap: 8px; }
|
||||
.message-item { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid #e6e8ec; border-radius: 8px; background: #fff; }
|
||||
.message-item > span { width: 8px; height: 8px; border-radius: 50%; background: #5b5ce2; }
|
||||
.message-item--warning > span { background: #d98b12; }
|
||||
.message-item strong { color: #30343b; }
|
||||
.message-item p { margin: 3px 0 0; color: #8b9199; }
|
||||
.message-timeline { margin-top: 18px; }
|
||||
.message-timeline h4 { margin: 0 0 4px; }
|
||||
.message-timeline article { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid #eef0f3; }
|
||||
.message-timeline time,
|
||||
.message-timeline p { color: #8b9199; }
|
||||
.message-timeline p { margin: 3px 0 0; }
|
||||
|
||||
.customer-login-card { max-width: 560px; margin: 70px auto 0; text-align: center; }
|
||||
.customer-login-card .ant-card-body { padding: 42px; }
|
||||
.customer-login-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 12px; color: #5b5ce2; background: #eeeeff; font-size: 23px; }
|
||||
.customer-login-notes { display: flex; justify-content: center; gap: 22px; margin-top: 24px; color: #7b818a; font-size: 12px; }
|
||||
.customer-profile { display: grid; gap: 16px; }
|
||||
.customer-profile__identity { gap: 18px; }
|
||||
.customer-profile__identity > div { flex: 1; }
|
||||
.customer-profile__identity h2,
|
||||
.customer-profile__identity p { margin: 0; }
|
||||
.customer-profile__identity p { margin-top: 4px; color: #8b9199; }
|
||||
.customer-membership-list { margin-top: 18px; }
|
||||
.customer-membership-list > div { padding: 12px 0; border-top: 1px solid #eef0f3; }
|
||||
.customer-membership-list > div > div { display: flex; justify-content: space-between; }
|
||||
.customer-membership-list small { color: #8b9199; }
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.customer-search { display: none; }
|
||||
.customer-quick-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.customer-action-list { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.customer-header { padding-inline: 8px; }
|
||||
.customer-header__brand > strong,
|
||||
.customer-header__brand > span:not(.customer-brand-mark),
|
||||
.customer-account-button > span,
|
||||
.customer-account-button > .anticon-down { display: none; }
|
||||
.customer-sider { position: fixed !important; z-index: 90; }
|
||||
.customer-content { margin-left: 72px; }
|
||||
.customer-page { padding: 16px 12px 32px; }
|
||||
.customer-page__header { flex-direction: column; gap: 8px; }
|
||||
.customer-page > .workspace { padding: 14px; }
|
||||
.customer-page .workspace__header,
|
||||
.customer-welcome-card { align-items: flex-start; flex-direction: column; }
|
||||
.customer-page .workspace__actions { align-items: stretch; flex-direction: column; width: 100%; }
|
||||
.customer-quick-grid,
|
||||
.billing-total-grid { grid-template-columns: 1fr; }
|
||||
.message-timeline article { grid-template-columns: 1fr; gap: 4px; }
|
||||
}
|
||||
|
||||
/* Ant Design enterprise console refresh */
|
||||
:root {
|
||||
color: #1f2329;
|
||||
background: #f5f6f8;
|
||||
--console-primary: #5b5ce2;
|
||||
--console-primary-soft: #ebe9ff;
|
||||
--console-text: #1f2329;
|
||||
--console-muted: #646a73;
|
||||
--console-border: #e3e6eb;
|
||||
--console-fill: #f7f8fa;
|
||||
--console-white: #fff;
|
||||
}
|
||||
|
||||
html { background: #f5f6f8; }
|
||||
|
||||
body {
|
||||
color: var(--console-text);
|
||||
background: #f5f6f8;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 34px;
|
||||
border: 1px solid var(--console-primary);
|
||||
border-radius: 8px;
|
||||
padding: 0.42rem 0.9rem;
|
||||
color: #fff;
|
||||
background: var(--console-primary);
|
||||
box-shadow: none;
|
||||
font-size: 0.82rem;
|
||||
transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: none;
|
||||
border-color: #7979eb;
|
||||
background: #6c6de8;
|
||||
}
|
||||
|
||||
button:disabled { opacity: 0.55; }
|
||||
|
||||
.button-secondary {
|
||||
border-color: #d8dbe2;
|
||||
color: #3d424a;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.app-layout { min-height: 100vh; }
|
||||
|
||||
.app-header {
|
||||
position: fixed;
|
||||
inset: 0 0 auto;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
height: 60px;
|
||||
padding: 0 22px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--console-border);
|
||||
line-height: normal;
|
||||
box-shadow: 0 1px 5px rgba(31, 35, 41, 0.04);
|
||||
}
|
||||
|
||||
.app-header__brand,
|
||||
.app-header__tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.app-header__brand > strong {
|
||||
color: #15181d;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-header__collapse.ant-btn {
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
color: #3d424a;
|
||||
}
|
||||
|
||||
.brand-mark,
|
||||
.page-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #1677ff, #6c4cff);
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.header-search { width: min(300px, 24vw); }
|
||||
.header-user { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.app-layout__body { min-height: 100vh; padding-top: 60px; }
|
||||
|
||||
.app-sider {
|
||||
position: sticky !important;
|
||||
top: 60px;
|
||||
height: calc(100vh - 60px);
|
||||
overflow: auto;
|
||||
border-right: 1px solid var(--console-border);
|
||||
}
|
||||
|
||||
.app-sider .ant-layout-sider-children {
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sider-product {
|
||||
display: flex;
|
||||
height: 58px;
|
||||
padding: 0 20px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #252a31;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sider-product .anticon { color: var(--console-primary); font-size: 18px; }
|
||||
.app-sider .ant-menu { flex: 1; border-inline-end: 0 !important; padding: 0 10px; }
|
||||
.app-sider .ant-menu-item { height: 42px; margin-block: 4px; line-height: 42px; }
|
||||
.app-sider .ant-menu-item-group-title { padding: 12px 14px 4px; color: #8f959e; font-size: 12px; }
|
||||
.app-sider .ant-menu-item-selected { font-weight: 600; }
|
||||
|
||||
.sider-meta {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
margin: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--console-border);
|
||||
border-radius: 8px;
|
||||
color: var(--console-muted);
|
||||
background: #fff;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.sider-meta strong { color: #363b43; font-size: 12px; }
|
||||
|
||||
.app-content { min-width: 0; background: #f5f6f8; }
|
||||
|
||||
.page-container {
|
||||
width: 100%;
|
||||
max-width: 1560px;
|
||||
margin: 0 auto;
|
||||
padding: 22px 28px 40px;
|
||||
}
|
||||
|
||||
.page-breadcrumb { margin-bottom: 14px; color: #8f959e; font-size: 12px; }
|
||||
|
||||
.hero {
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
margin: 0 0 20px;
|
||||
padding: 4px 0 2px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
max-width: none;
|
||||
color: #171a1f;
|
||||
font-family: inherit;
|
||||
font-size: 24px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.hero__description {
|
||||
max-width: 64rem;
|
||||
margin: 8px 0 0 46px;
|
||||
color: var(--console-muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 7px;
|
||||
color: var(--console-primary);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 { color: var(--console-text); }
|
||||
h2 { font-size: 20px; }
|
||||
h3 { font-size: 16px; }
|
||||
|
||||
.status-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
min-height: 132px;
|
||||
padding: 0;
|
||||
border-color: var(--console-border);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.status-card .ant-card-body { padding: 18px 20px; }
|
||||
.status-card__topline { color: #7b818a; font-size: 13px; }
|
||||
.status-card strong { margin-top: 19px; color: #1f2329; font-size: 22px; line-height: 1.2; }
|
||||
.status-card p { overflow: hidden; margin: 8px 0 0; color: #7b818a; font-size: 12px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.identity-panel,
|
||||
.workspace-shell,
|
||||
.milestone-panel,
|
||||
.workspace,
|
||||
.ops-workspace {
|
||||
border: 1px solid var(--console-border);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.identity-panel {
|
||||
grid-template-columns: minmax(260px, 0.75fr) minmax(360px, 1.5fr);
|
||||
gap: 34px;
|
||||
margin-top: 14px;
|
||||
padding: 22px 24px;
|
||||
}
|
||||
|
||||
.identity-panel__intro > p:last-child,
|
||||
.identity-panel__state,
|
||||
.identity-panel__login,
|
||||
.identity-panel__login p {
|
||||
color: var(--console-muted);
|
||||
}
|
||||
|
||||
.identity-panel__intro h2 { font-size: 19px; }
|
||||
.identity-panel__login strong { color: var(--console-text); font-size: 16px; }
|
||||
.identity-panel__account-head span { color: #8a9099; }
|
||||
|
||||
.account-card {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--console-border);
|
||||
border-radius: 8px;
|
||||
background: var(--console-fill);
|
||||
}
|
||||
|
||||
.account-card > strong { color: var(--console-text); }
|
||||
.membership { border-color: var(--console-border); color: #535961; }
|
||||
|
||||
.workspace-shell {
|
||||
margin-top: 14px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workspace-shell__heading {
|
||||
align-items: center;
|
||||
padding: 18px 22px;
|
||||
border-bottom: 1px solid var(--console-border);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.workspace-shell__heading h2 { font-size: 19px; }
|
||||
.workspace-shell__heading > p { color: var(--console-muted); font-size: 12px; }
|
||||
.workspace-shell__content { padding: 0; }
|
||||
.workspace-shell__content > .workspace,
|
||||
.workspace-shell__content > .ops-workspace { margin-top: 0; }
|
||||
|
||||
.workspace,
|
||||
.ops-workspace {
|
||||
margin-top: 0;
|
||||
padding: 22px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.workspace__header,
|
||||
.ops-workspace__head { align-items: center; }
|
||||
.workspace__header > div:first-child > p:last-child,
|
||||
.ops-workspace__head p { color: var(--console-muted); }
|
||||
|
||||
.workspace__tabs {
|
||||
gap: 4px;
|
||||
margin: 20px 0 16px;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--console-border);
|
||||
border-radius: 8px;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
min-height: 32px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
color: #5f656d;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tab-button:hover { color: var(--console-primary); background: #f0efff; }
|
||||
.tab-button.active { color: var(--console-primary); background: #fff; box-shadow: 0 1px 4px rgba(31, 35, 41, 0.08); }
|
||||
|
||||
.workspace select,
|
||||
.workspace input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
|
||||
.workspace textarea,
|
||||
.ops-workspace select,
|
||||
.ops-workspace input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
|
||||
.ops-workspace textarea {
|
||||
min-height: 36px;
|
||||
border: 1px solid #d8dbe2;
|
||||
border-radius: 7px;
|
||||
padding: 7px 10px;
|
||||
color: #252a31;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workspace input:focus,
|
||||
.workspace select:focus,
|
||||
.workspace textarea:focus,
|
||||
.ops-workspace input:focus,
|
||||
.ops-workspace select:focus,
|
||||
.ops-workspace textarea:focus {
|
||||
outline: none;
|
||||
border-color: #7778e6;
|
||||
box-shadow: 0 0 0 2px rgba(91, 92, 226, 0.12);
|
||||
}
|
||||
|
||||
.workspace label,
|
||||
.ops-workspace label,
|
||||
.ops-config-form label,
|
||||
.billing-form label,
|
||||
.alert-config-form label,
|
||||
.diagnostic-search label {
|
||||
color: #5d636c;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tool-form,
|
||||
.subject-create-form,
|
||||
.profile-editor,
|
||||
.conversation-readiness,
|
||||
.panel-section,
|
||||
.ops-config-form,
|
||||
.ops-gate-card,
|
||||
.ops-rollout-panel,
|
||||
.billing-form,
|
||||
.conversation-usage,
|
||||
.diagnostic-search,
|
||||
.alert-config-form,
|
||||
.privacy-delete-confirmation,
|
||||
.firmware-recovery-form,
|
||||
.firmware-impact {
|
||||
border-color: var(--console-border);
|
||||
border-radius: 8px;
|
||||
background: var(--console-fill);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.summary-card,
|
||||
.device-card,
|
||||
.diagnostic-card,
|
||||
.billing-summary-grid article,
|
||||
.alert-summary-grid article,
|
||||
.ops-ledger,
|
||||
.ops-version-group,
|
||||
.billing-ledger,
|
||||
.billing-policy-list,
|
||||
.alert-ledger-grid > section,
|
||||
.firmware-key-ledger,
|
||||
.firmware-key-card,
|
||||
.firmware-impact__metrics article,
|
||||
.firmware-impact__devices article {
|
||||
border-color: var(--console-border);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workspace__split,
|
||||
.conversation-layout,
|
||||
.story-layout,
|
||||
.alert-queue-layout,
|
||||
.billing-rate-table {
|
||||
border-color: var(--console-border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.resource-list,
|
||||
.conversation-list,
|
||||
.story-sidebar,
|
||||
.alert-queue,
|
||||
.billing-rate-table > div,
|
||||
.ops-ledger > div,
|
||||
.ops-version-group > div:first-child,
|
||||
.billing-ledger > div,
|
||||
.billing-policy-list > div,
|
||||
.alert-queue__toolbar,
|
||||
.alert-ledger-grid section > div {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.resource-button,
|
||||
.conversation-row {
|
||||
border-radius: 7px;
|
||||
color: #50565e;
|
||||
}
|
||||
|
||||
.resource-button:hover,
|
||||
.conversation-row:hover { background: #eeeff2; }
|
||||
.resource-button.active,
|
||||
.conversation-row.active { color: var(--console-primary); background: #fff; box-shadow: 0 1px 4px rgba(31, 35, 41, 0.08); }
|
||||
|
||||
.ops-billing,
|
||||
.ops-alerts,
|
||||
.ops-diagnostics { background: #fff; }
|
||||
|
||||
.billing-summary-grid strong,
|
||||
.alert-summary-grid strong,
|
||||
.summary-card strong,
|
||||
.diagnostic-card__head strong { color: var(--console-text); }
|
||||
|
||||
.status-pill,
|
||||
.event-stream-status,
|
||||
.alert-severity,
|
||||
.alert-detail__title b {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.event-stream-status { color: #137a50; background: #e9f7f0; }
|
||||
.event-stream-status--connecting,
|
||||
.event-stream-status--reconnecting { color: #a86500; background: #fff5df; }
|
||||
|
||||
.workspace__inline-error { border: 1px solid #ffd6d2; border-radius: 7px; color: #b42318; background: #fff2f0; }
|
||||
.workspace__action-message { border: 1px solid #cdebdc; border-radius: 7px; color: #137a50; background: #edf9f3; }
|
||||
.workspace__readonly-note,
|
||||
.ops-config-form__note { border-radius: 7px; color: #646a73; background: #f2f3f5; }
|
||||
|
||||
.alert-queue li.selected { box-shadow: inset 3px 0 var(--console-primary); background: #f4f3ff; }
|
||||
.alert-timeline ol::before { background: #d8dbe2; }
|
||||
.alert-timeline li::before { background: var(--console-primary); box-shadow: 0 0 0 1px #c8c9f6; }
|
||||
|
||||
.milestone-panel {
|
||||
grid-template-columns: 300px 1fr;
|
||||
gap: 30px;
|
||||
margin-top: 14px;
|
||||
padding: 20px 24px;
|
||||
color: var(--console-text);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.milestone-panel h2 { color: var(--console-text); font-size: 18px; }
|
||||
.milestone-panel ol { gap: 10px; }
|
||||
.milestone-panel li { color: #8b9199; font-size: 11px; }
|
||||
.milestone-panel li span { margin-bottom: 7px; color: #a5abb3; font-size: 14px; font-weight: 700; }
|
||||
.milestone-panel li.done,
|
||||
.milestone-panel li.active { color: #4d535b; }
|
||||
.milestone-panel li.done span { color: #1f9d68; }
|
||||
.milestone-panel li.active span { color: var(--console-primary); }
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.header-search { display: none; }
|
||||
.identity-panel { grid-template-columns: 1fr; gap: 18px; }
|
||||
.milestone-panel { grid-template-columns: 1fr; }
|
||||
.milestone-panel ol { grid-template-columns: repeat(4, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.app-header { padding: 0 10px; }
|
||||
.app-header__brand > strong,
|
||||
.app-header__brand .ant-tag,
|
||||
.header-user,
|
||||
.app-header__tools > .ant-badge { display: none; }
|
||||
.app-sider { position: fixed !important; z-index: 80; }
|
||||
.app-sider:not(.ant-layout-sider-collapsed) { box-shadow: 8px 0 24px rgba(31, 35, 41, 0.12); }
|
||||
.app-content { margin-left: 72px; }
|
||||
.page-container { padding: 16px 12px 28px; }
|
||||
.hero { align-items: flex-start; gap: 14px; }
|
||||
.hero__description { margin-left: 0; }
|
||||
.status-grid { grid-template-columns: 1fr; }
|
||||
.identity-panel { gap: 16px; padding: 18px; }
|
||||
.workspace-shell__heading { align-items: flex-start; flex-direction: column; gap: 6px; }
|
||||
.workspace-shell__heading > p { text-align: left; }
|
||||
.workspace,
|
||||
.ops-workspace { padding: 16px; }
|
||||
.milestone-panel { padding: 18px; }
|
||||
.milestone-panel ol { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user