BPOS-MVP/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, WorkOrderReply } from '@contracts';
import {
  listApprovalsForMeRoute,
  listMessagesRoute,
  listTasksRoute,
  logoutRoute,
  replyWorkOrderRoute,
  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 { EmptyState } from '@web-shared/desk/module-kit.tsx';
import { SURFACE_META, canSeeSurface } from '@web-shared/gov/surfaces.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 logout = useMutation({
    mutationFn: () => call<{ ok: boolean }>(logoutRoute),
    onSuccess: () => {
      queryClient.clear();
      // 整页导航:SSE 连接、组件状态、路由位置一并归零 —— 登出不留残影
      window.location.assign('/');
    },
  });

  const me = session.data?.staff.name ?? '—';

  /**
   * 工单回传 —— 视图区与对话区同一条口。
   * 回传后按键失效、画面由服务端重投影:前端不自行推演卡与工单的状态(§9.2)。
   */
  const replyOrder = useMutation({
    mutationFn: (reply: WorkOrderReply) => call(replyWorkOrderRoute, { body: { reply } }),
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: ['desk'] });
    },
  });

  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">
            {/*
              另两面的入口 —— 按授权亮灯:没有治理授权的人根本看不见,不给点了才说没权。
              两枚并排、只留章不留名:轨底还得放身份钮,竖排三件会把左轨撑出滚动条(实测)。
            */}
            {(canSeeSurface(session.data, 'design') || canSeeSurface(session.data, 'ops')) && (
              <div className="jc-nav-user" style={{ flexDirection: 'row', gap: 6, paddingTop: 0 }}>
                {canSeeSurface(session.data, 'design') && (
                  <a
                    className="jc-nav-ava"
                    href={SURFACE_META.design.path}
                    title="设计中心 —— 定义企业怎么运转"
                    style={{ width: 26, height: 26, fontSize: 11, background: 'linear-gradient(140deg,#4954e6,#232b6e)' }}
                  >
                    设
                  </a>
                )}
                {canSeeSurface(session.data, 'ops') && (
                  <a
                    className="jc-nav-ava"
                    href={SURFACE_META.ops.path}
                    title="运营中心 —— 看企业今天跑得怎样"
                    style={{ width: 26, height: 26, fontSize: 11, background: 'linear-gradient(140deg,#12b886,#0b7a5c)' }}
                  >
                    运
                  </a>
                )}
              </div>
            )}
            {/* 轨底身份即登出入口 —— 会话在服务端,点它是真作废,不只是清本地 */}
            <button
              type="button"
              className="jc-nav-user"
              title={`${me}(本工作台所有者)· 点击登出`}
              disabled={logout.isPending}
              onClick={() => logout.mutate()}
            >
              <span className="jc-nav-ava">{me.slice(0, 1)}</span>
              <span className="jc-nav-name">{me}</span>
            </button>
          </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}
                onReplyOrder={(reply) => replyOrder.mutate(reply)}
              />
            ) : (
              <main className="execution-panel">
                {tasks.isLoading ? (
                  <div className="jc-list-empty">
                    <Ico name="list-checks" s={18} />
                    载入中…
                  </div>
                ) : (
                  <EmptyState
                    ico="list-checks"
                    tone="brand"
                    title="手上没有任务"
                    desc="流程走到你负责的活动时,任务会连同办这件事要用的全部上下文一起送到这里 —— 待处理的事、往来记录、产出的文件都在一屏之内。"
                    hint="有新任务时左侧列表会亮角标"
                  />
                )}
              </main>
            )}
            <i
              className="jc-vsplit"
              title="拖拽调整对话区宽度 · 双击复位"
              onPointerDown={split.onSplitDown}
              onDoubleClick={split.onSplitReset}
            />
            <section className="session-chat">
              {detail.data !== undefined ? (
                <TaskChat key={current} detail={detail.data} onLocate={() => undefined} />
              ) : (
                <div className="jc-tch">
                  <header className="jc-tch-head">
                    <span className="jc-tch-mark">
                      <Ico name="bot" s={15} />
                    </span>
                    <b className="jc-tch-name">任务助理</b>
                    <em className="jc-tch-tag">Agent</em>
                    <span className="jc-tch-desc">开一单即可对话</span>
                  </header>
                  <div className="jc-tch-scroll">
                    <EmptyState
                      ico="messages-square"
                      tone="brand"
                      title="还没有可对话的任务"
                      desc="每一单任务都有自己的对话:AI 有结论、要派工、或者要你拿个主意,都在那一单里说 —— 所以得先有一单在手。"
                    />
                  </div>
                  <div className="copilot-composer session-composer">
                    <div className="composer-row">
                      <textarea rows={2} disabled placeholder="选中一单任务后就能在这里交代" />
                      <button className="copilot-send" disabled>
                        <Ico name="send" s={14} /> 发送
                      </button>
                    </div>
                  </div>
                </div>
              )}
            </section>
          </div>
        ) : module === 'approvals' ? (
          <ApprovalDesk />
        ) : module === 'messages' ? (
          <MessageDesk />
        ) : module === 'minutes' ? (
          <MinuteDesk />
        ) : (
          <ReportDesk />
        )}
      </div>
    </div>
  );
}