feat: add customer portal and RTC voice diagnostics
This commit is contained in:
Codex Local
+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;
|
||||
}) {
|
||||
|
||||
Reference in New Issue
Block a user