JX-BPOS/apps/web/src/app/app-shell.tsx

/**
 * 工作台外壳 —— 自原型 `(proto)/page.tsx` 平移(README《前端 UI · 原型 1:1 平移》)。
 *
 * 左轨 = 品牌 → **工作台五要素**(任务 / 审批 / 消息 / 纪要 / 汇报)→ 轨底身份;
 * 任务四区 = 左栏列表区 / 中上标题区 / 中下工作区 / 右栏对话区。
 *
 * **前端零过程状态**:数据全部来自服务端投影,刷新即从投影重建(§9.2)。
 */
import { useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import type { Session, TaskCard, TaskDetail } from '@contracts';
import { listApprovalsForMeRoute, listMessagesRoute, listTasksRoute, replyWorkOrderRoute, sayRoute, sessionRoute, taskDetailRoute } from '@contracts';
import { TaskChat, TaskList, ViewRegion } from '@features/desk-task';
import { ApprovalDesk } from '@features/desk-approval';
import { MessageDesk } from '@features/desk-message';
import { MinuteDesk } from '@features/desk-minute';
import { ReportDesk } from '@features/desk-report';
import { Ico } from '@web-shared/Ico.tsx';
import { call } from '@web-shared/typed-fetch.ts';
import { useChatWidth } from '@web-shared/useChatWidth.ts';
import { queryKeys } from './query.ts';

type ModuleKey = 'tasks' | 'approvals' | 'messages' | 'minutes' | 'report';

const NAV_MODULES: ReadonlyArray<{ key: ModuleKey; label: string; icon: string }> = [
  { key: 'tasks', label: '任务', icon: 'list-checks' },
  { key: 'approvals', label: '审批', icon: 'file-check' },
  { key: 'messages', label: '消息', icon: 'messages-square' },
  { key: 'minutes', label: '纪要', icon: 'notebook-pen' },
  { key: 'report', label: '汇报', icon: 'bar-chart' },
];

export function AppShell() {
  const queryClient = useQueryClient();
  const [module, setModule] = useState<ModuleKey>('tasks');
  const [taskId, setTaskId] = useState('');
  const [collapsed, setCollapsed] = useState(false);
  const split = useChatWidth();

  const session = useQuery({
    queryKey: queryKeys.session,
    queryFn: () => call<Session>(sessionRoute),
  });

  const tasks = useQuery({
    queryKey: queryKeys.tasks,
    queryFn: () => call<{ tasks: TaskCard[] }>(listTasksRoute),
  });

  // 角标常驻:责任面要一眼看见「什么在等我」,不能等切过去才知道
  const messages = useQuery({
    queryKey: queryKeys.messages,
    queryFn: () => call<{ messages: Array<{ id: string; read: boolean }> }>(listMessagesRoute),
  });
  const approvals = useQuery({
    queryKey: ['approvals'],
    queryFn: () => call<{ approvals: Array<{ state: string }> }>(listApprovalsForMeRoute),
  });

  const list = tasks.data?.tasks ?? [];
  const active = list.filter((t) => t.terminal === undefined);
  const current = taskId !== '' ? taskId : (active[0]?.id ?? list[0]?.id ?? '');

  const detail = useQuery({
    queryKey: queryKeys.task(current),
    queryFn: () => call<TaskDetail>(taskDetailRoute, { params: { taskId: current } }),
    enabled: current !== '',
  });

  const reply = useMutation({
    mutationFn: (payload: Record<string, unknown>) =>
      call<{ ok: boolean }>(replyWorkOrderRoute, { body: { reply: payload } }),
    // 回传后按目标失效缓存 —— 组件不自行轮询
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: queryKeys.task(current) });
      void queryClient.invalidateQueries({ queryKey: queryKeys.tasks });
    },
  });

  const say = useMutation({
    mutationFn: (text: string) => call(sayRoute, { params: { taskId: current }, body: { text } }),
    onSuccess: () => void queryClient.invalidateQueries({ queryKey: queryKeys.task(current) }),
  });

  const me = session.data?.staff.name ?? '—';
  // composer 锁:有卡在等作答时锁住自由输入
  const locked = (detail.data?.workOrders ?? []).some((o) => o.done === undefined);

  return (
    <div className="app-shell">
      <div className="app-body">
        <nav className="app-nav">
          <div className="app-nav-mark" title="JCAI 智能协同工作台">
            <Ico name="bot" s={20} />
          </div>
          <span className="jc-rail-brand">JCAI</span>
          {NAV_MODULES.map((m) => {
            const badge =
              m.key === 'tasks'
                ? active.length
                : m.key === 'approvals'
                  ? (approvals.data?.approvals ?? []).filter((a) => a.state === 'pending').length
                  : m.key === 'messages'
                    ? (messages.data?.messages ?? []).filter((x) => !x.read).length
                    : undefined;
            return (
              <button
                key={m.key}
                className={module === m.key ? 'active' : ''}
                onClick={() => setModule(m.key)}
                aria-current={module === m.key ? 'page' : undefined}
              >
                <span className="app-nav-icon-wrap">
                  <Ico name={m.icon} s={20} />
                  {badge !== undefined && badge > 0 ? <span className="app-nav-badge">{badge}</span> : null}
                </span>
                <span>{m.label}</span>
              </button>
            );
          })}
          <div className="jc-rail-foot">
            <div className="jc-nav-user" title={`${me}(本工作台所有者)`}>
              <span className="jc-nav-ava">{me.slice(0, 1)}</span>
              <span className="jc-nav-name">{me}</span>
            </div>
          </div>
        </nav>

        {module === 'tasks' ? (
          <div className={'workspace' + (collapsed ? ' jc-side-collapsed' : '')} style={split.style}>
            {collapsed && (
              <button
                type="button"
                className="jc-wl-expand"
                title="展开列表区"
                aria-label="展开列表区"
                onClick={() => setCollapsed(false)}
              >
                <Ico name="chevron-right" s={12} />
              </button>
            )}
            <TaskList
              tasks={list}
              selectedId={current}
              collapsed={collapsed}
              onPick={setTaskId}
              onCollapse={() => setCollapsed(true)}
            />
            {detail.data !== undefined ? (
              <ViewRegion key={current} detail={detail.data} onReply={(payload) => reply.mutate(payload)} />
            ) : (
              <main className="execution-panel jc-panel-card">
                <div className="jc-list-empty">
                  <Ico name="list-checks" s={18} />
                  {tasks.isLoading ? '载入中…' : '还没有落到你工位的任务'}
                </div>
              </main>
            )}
            {detail.data !== undefined && (
              <i
                className="jc-vsplit"
                title="拖拽调整对话区宽度 · 双击复位"
                onPointerDown={split.onSplitDown}
                onDoubleClick={split.onSplitReset}
              />
            )}
            {detail.data !== undefined && (
              <TaskChat
                key={current}
                chat={detail.data.chat}
                locked={locked}
                onSay={(text) => say.mutate(text)}
                onDecide={() => undefined}
              />
            )}
          </div>
        ) : module === 'approvals' ? (
          <ApprovalDesk />
        ) : module === 'messages' ? (
          <MessageDesk />
        ) : module === 'minutes' ? (
          <MinuteDesk />
        ) : (
          <ReportDesk />
        )}
      </div>
    </div>
  );
}