mky-vent-base/src/views/ventAI/manageAssistent/components/AiAssistantModal.vue

<template>
  <a-modal
    :visible="props.visible"
    @cancel="emit('close')"
    :width="modalWidth"
    :footer="null"
    destroyOnClose
    :closable="showControls"
    :zIndex="props.zIndex"
    :get-container="getModalContainer"
    :class="['ai-assistant-modal', { fullscreen: isFullscreen }]"
  >
    <template #title>
      <div :class="['draggable-title', { 'no-drag': isFullscreen }]" @mousedown="onDragStart">"通安智风"大模型</div>
    </template>
    <!-- 最大化/还原按钮 -->
    <div v-if="showControls" class="maximize-btn" @click="toggleFullscreen">
      <div :class="['maximize-icon', { minimized: isFullscreen }]"></div>
    </div>
    <!-- 收起/展开按钮 -->
    <div class="collapse-btn" @click="togglePanel">
      <div :class="['collapse-icon', { collapsed: panelCollapsed }]"></div>
    </div>
    <div class="ai-container" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
      <!-- 拖拽经过时的「可放置」提示。pointer-events: none 不能去掉：遮罩一旦能命中，
           它自己会连续触发 dragenter/dragleave，反馈会持续闪断 -->
      <div v-if="isDragOver" class="drop-overlay">
        <div class="drop-overlay-text">松开鼠标添加附件</div>
      </div>
      <!-- 左侧任务列表 -->
      <div :class="['task-panel-wrapper', { collapsed: panelCollapsed }]">
        <TaskListPanel
          :taskList="taskList"
          :currentTaskId="currentTaskId"
          @switch-task="switchTask"
          @create-task="createNewTask"
          @delete-task="handleDeleteTask"
          @pin-task="handlePinTask"
          @toggle-skill="toggleSkillPanel"
          @toggle-sub-agents="toggleSubAgentPanel"
          @toggle-schedules="toggleSchedulePanel"
        />
        <!-- 「技能」「子智能体」两个入口对所有角色都显示：角色差异收敛在面板内部
             （非管理员只读：隐藏创建/编辑/删除、禁用启停开关），而不是把入口整个藏掉。 -->
      </div>

      <!-- 右侧内容区：根据 activePanel 切换显示 -->
      <!-- 聊天区域 -->
      <template v-if="activePanel === 'chat'">
        <div class="chat-panel">
          <!-- 顶部任务选择器 -->
          <ChatHeader
            :currentTask="currentTask"
            :panelCollapsed="panelCollapsed"
            :canGoPrev="canGoPrev"
            :canGoNext="canGoNext"
            :currentWordUrl="currentWordUrl"
            :capsule-files="capsuleFiles"
            :capsule-links="capsuleLinks"
            :capsule-agents="capsuleAgents"
            @go-to-prev="goToPrev"
            @go-to-next="goToNext"
            @create-task="createNewTask"
            @save-title="handleSaveTitle"
            @download-word="downloadWordReport"
            @export-md="handleExportMarkdown"
            @export-word="handleExportWord"
            @file-preview="handleAttachmentPreview"
            @download-attachment="handleAttachmentDownload"
            @agent-detail-click="handleAgentDetailClick"
            @locate-message="handleLocateMessage"
            @open-link="handleOpenLink"
          />

          <!-- 附件列表面板 -->
          <FileListPanel :visible="showFileList" :files="getCurrentTaskFiles()" @close="showFileList = false" @file-click="handleAttachmentPreview" />

          <!-- 消息列表 -->
          <ChatMessages
            ref="chatMessagesRef"
            :messages="messages"
            :history-loading="isCurrentHistoryLoading"
            :orphan-attachments="currentTask?.orphanAttachments || []"
            @file-preview="handleAttachmentPreview"
            @download-attachment="handleAttachmentDownload"
            @download-word="downloadWordFile"
            @open-file-preview="handleOpenFilePreview"
            @ask-user-submit="handleAskUserSubmit"
            @ask-user-cancel="handleAskUserCancel"
            @agent-detail-click="handleAgentDetailClick"
            @open-markdown-tab="openMarkdownPreviewTab"
            @open-link="handleOpenLink"
            @delete-message="handleDeleteMessage"
            @regenerate="handleRegenerate"
            @edit-resend="handleEditResend"
          />

          <!-- 任务进度条 -->
          <TodoListBar v-if="showTodoBar" :todos="currentTodos" />

          <!-- 输入区域 -->
          <!-- [审计-第四轮 M3] 重放自我方 fix/base-agent-token（M1/M2/M3）：:isAdmin 透传给输入区，
               由输入区隐藏「思考级别」切换控件；注意只隐藏"切换"，
               思考级别的读取（getModelMsg）对所有人保持开放 -->
          <ChatInputArea
            ref="chatInputRef"
            v-model="inputMessage"
            :pendingFile="pendingFile"
            :loading="loading || !!currentPendingApproval"
            :streaming="loading"
            :contextUsed="contextUsed"
            :contextMax="contextMax"
            :contextPercent="contextPercent"
            :contextBreakdown="contextBreakdown"
            :usageLimit="usageToday?.limit_tokens ?? 0"
            :usageSpent="usageToday?.spent_tokens ?? 0"
            :usageRemaining="usageToday?.remaining_tokens ?? 0"
            :usageByModel="usageToday?.by_model ?? []"
            :initialThinkLevel="thinkLevel"
            :isAdmin="isAdmin"
            :initialEditMode="editMode"
            :taskList="taskList"
            :currentTaskId="currentTaskId"
            @send="handleSendMessage"
            @stop="stopStreaming"
            @file-upload="triggerFileUpload"
            @file-change="handleFileUpload"
            @file-add="handleFileAdded"
            @remove-pending-file="removePendingFile"
            @pending-file-preview="openFilePreview"
            @think-level-change="handleThinkLevelChange"
            @edit-mode-change="handleEditModeChange"
            @update:selected-sessions="handleUpdateSelectedSessions"
            @update:selected-skill="handleUpdateSelectedSkill"
          />
        </div>
      </template>

      <!--
        右侧辅助面板（标签页容器）：
        - 始终挂载，用 v-show 控制显隐；这样关闭二维标签后 iframe 仍保留，只隐藏不销毁；
        - 处于技能/子智能体/定时任务面板时同样只隐藏；
        - 关闭整个助手弹框时，由 Modal 的 destroyOnClose 真正销毁。
      -->
      <Transition name="right-panel-slide" @after-leave="onPanelLeaveEnd">
        <RightPanelTabs
          v-show="activePanel === 'chat' && currentRightPanels.tabs.length > 0"
          :tabs="currentRightPanels.tabs"
          :activeTabId="currentRightPanels.activeTabId"
          :messages="messages"
          :model-preview-loaded="modelPreview.loaded"
          :model-preview-visible="modelPreviewVisible"
          :model-preview-route="modelPreview.route"
          @switch-tab="activateTab"
          @close-tab="closeTab"
          @save-success="handleSaveSuccess"
          @schedule-deleted="handleScheduleDeleted"
          @schedule-updated="handleScheduleUpdated"
          @open-schedule-session="handleOpenScheduleSession"
          @open-markdown-tab="openMarkdownPreviewTab"
        />
      </Transition>

      <!-- 技能面板：非管理员只读（面板内部按 isAdmin 隐藏/禁用写操作） -->
      <div v-if="activePanel === 'skill'" class="right-panel full">
        <SkillPanel :is-admin="isAdmin" @close="activePanel = 'chat'" />
      </div>

      <!-- 子智能体面板：非管理员只读 -->
      <div v-if="activePanel === 'sub-agents'" class="right-panel full">
        <SubAgentPanel :is-admin="isAdmin" @close="activePanel = 'chat'" />
      </div>

      <!-- 定时任务面板 -->
      <div v-if="activePanel === 'schedules'" class="right-panel full">
        <SchedulePanel
          ref="schedulePanelRef"
          @close="activePanel = 'chat'"
          @open-session="handleOpenScheduleSession"
          @data-changed="fetchScheduleListForDetail"
        />
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, nextTick, watch, computed, onBeforeUnmount, reactive } from 'vue';
  import dayjs from 'dayjs';
  // [审计-第四轮 M3] 重放自我方 fix/base-agent-token（M1/M2/M3）：引入 getMe 用于按 is_admin 隐藏管理入口
  import { getDetail, deleteSession, deleteMessage, StreamError, getMe } from '/@/views/ventAI/manageAssistent/api';
  import { message, Modal } from 'ant-design-vue';
  import TaskListPanel from '/@/views/ventAI/manageAssistent/components/panels/TaskListPanel.vue';
  import ChatHeader from '/@/views/ventAI/manageAssistent/components/chat/ChatHeader.vue';
  import FileListPanel from '/@/views/ventAI/manageAssistent/components/panels/FileListPanel.vue';
  import ChatMessages from '/@/views/ventAI/manageAssistent/components/chat/ChatMessages.vue';
  import ChatInputArea from '/@/views/ventAI/manageAssistent/components/chat/ChatInputArea.vue';
  import TodoListBar from '/@/views/ventAI/manageAssistent/components/chat/TodoListBar.vue';
  import SkillPanel from '/@/views/ventAI/manageAssistent/components/panels/SkillPanel.vue';
  import SubAgentPanel from '/@/views/ventAI/manageAssistent/components/panels/SubAgentPanel.vue';
  import SchedulePanel from '/@/views/ventAI/manageAssistent/components/panels/SchedulePanel.vue';
  import RightPanelTabs from '/@/views/ventAI/manageAssistent/components/panels/RightPanelTabs.vue';
  import { getScheduleList } from '/@/views/ventAI/manageAssistent/api';
  import type { AttachedFile, Message, ScheduleTask, SubAppRoute, Task } from '/@/views/ventAI/manageAssistent/types/index';
  import { buildCapsuleFiles, buildCapsuleLinks, buildCapsuleAgents } from '/@/views/ventAI/manageAssistent/lib/capsule';
  import { parseModalPreviewLink, isFileDownloadLink, downloadLinkFile } from '/@/views/ventAI/manageAssistent/lib/index';
  import { locateDevice, locateDeviceReport, locateTunnel, onLocateResult } from '/@/views/ventAI/manageAssistent/lib/modalPreviewBridge';
  import { useChatStream } from '../hooks/useChatStream';
  import { useChatTasks } from '../hooks/useChatTasks';
  import { useChatPanels } from '../hooks/useChatPanels';
  import { useChatDrag } from '../hooks/useChatDrag';
  import { useChatApproval } from '../hooks/useChatApproval';
  import { useChatSend } from '../hooks/useChatSend';
  import { useChatScroll } from '../hooks/useChatScroll';
  import { useChatFiles } from '../hooks/useChatFiles';
  import { useFileDrop } from '../hooks/useFileDrop';
  import { useChatQuota } from '../hooks/useChatQuota';
  import { useChatExport } from '../hooks/useChatExport';
  import { useChatAttachments } from '../hooks/useChatAttachments';

  interface Props {
    visible: boolean;
    // 初始即全屏显示（首页等嵌入场景）
    defaultFullscreen?: boolean;
    // 是否显示窗口控制按钮（最大化/还原、关闭）
    showControls?: boolean;
    zIndex?: number;
    // 挂载容器：不传则默认挂到 body；首页等场景传入 adaptive-container，使其与页面同坐标系、同缩放
    getContainer?: () => HTMLElement;
  }

  interface Emits {
    (e: 'close'): void;
  }

  const props = withDefaults(defineProps<Props>(), {
    defaultFullscreen: false,
    showControls: true,
  });
  const emit = defineEmits<Emits>();

  // 弹框真正渲染/被 antd 滚动锁锁定的目标：包一层 size-0 空壳，
  // 避免 antd Modal 打开时滚动锁直接改写 #adaptive-container 的宽度（导致整页缩放错乱、露出白边）
  const portalWrapper = ref<HTMLDivElement | null>(null);

  const getModalContainer = (): HTMLElement => {
    if (portalWrapper.value) return portalWrapper.value;
    const target = props.getContainer ? props.getContainer() : document.body;
    const wrapper = document.createElement('div');
    wrapper.style.cssText = 'position:absolute;top:0;left:0;width:0;height:0;';
    target.appendChild(wrapper);
    portalWrapper.value = wrapper;
    return wrapper;
  };

  // —— 会话状态与列表相关职责已下沉到 useChatTasks ——
  const {
    taskList,
    currentTaskId,
    currentTask,
    messages,
    historyLoadedTasks,
    historyLoadingTaskIds,
    setHistoryLoading,
    getDefaultMessages,
    transformHistoryToMessages,
    fetchSessionList,
    handlePinTask,
    handleSaveTitle,
    setCurrentSessionId,
  } = useChatTasks();

  // 当前任务的历史是否正在拉取：切换任务时新任务的 messages 要等接口回来才填充，
  // 消息区据此显示加载态，避免中间先闪一屏空会话缺省图。
  const isCurrentHistoryLoading = computed(() => historyLoadingTaskIds.value.includes(currentTaskId.value));

  // —— 右侧面板/标签页/全屏相关职责已下沉到 useChatPanels ——
  const {
    showFileList,
    activePanel,
    panelCollapsed,
    togglePanel,
    toggleSkillPanel,
    toggleSchedulePanel,
    toggleSubAgentPanel,
    isFullscreen,
    currentRightPanels,
    modalWidth,
    onPanelLeaveEnd,
    toggleFullscreen,
    getPanelState,
    activateTab,
    removeTab,
    closeTab,
    handleAgentDetailClick,
    handleLocateMessage,
    openMarkdownPreviewTab,
    openFilePreview,
    openModalPreviewTab,
    handleOpenFilePreview,
    handleSaveSuccess,
    getCurrentTaskFiles,
  } = useChatPanels({
    getCurrentTask: () => currentTask.value,
    getMessages: () => messages.value,
    getChatMessages: () => chatMessagesRef.value,
    getContainer: () => (props.getContainer ? props.getContainer() : document.body),
    resetModalPosition: () => drag.centerModal(),
    defaultFullscreen: !!props.defaultFullscreen,
  });

  // —— 会话附件历史：列表按会话拉取，附件内容在预览/下载时按需取回 ——
  const { loadHistoryAttachments, handleAttachmentPreview: previewAttachment, handleAttachmentDownload } = useChatAttachments();
  const handleAttachmentPreview = (file: AttachedFile) => previewAttachment(file, openFilePreview);

  // ===== 二维模型生命周期：单活模型 + 关闭隐藏 + 空闲超时销毁 =====
  interface ModelPreviewCache {
    loaded: boolean;
    ownerSessionId: string;
    modelId: string;
    route: SubAppRoute | null;
  }

  // 标签关闭/切换到其他面板时模型只隐藏；超过该时长未再次显示才真正销毁
  const MODEL_PREVIEW_IDLE_MS = 5 * 60 * 1000;
  const modelPreview = reactive<ModelPreviewCache>({
    loaded: false,
    ownerSessionId: '',
    modelId: '',
    route: null,
  });
  let modelPreviewIdleTimer: ReturnType<typeof setTimeout> | null = null;
  let modelPreviewTransition: Promise<void> | null = null;
  let pendingModelPreviewRoute: SubAppRoute | null = null;
  let modelPreviewEpoch = 0;
  let lastModelLocateSignature = '';

  // 当前会话归属：优先用后端 session_id，空白任务用前端任务 id 兜底
  const currentSessionKey = (): string => {
    const task = taskList.value.find((t) => t.id === currentTaskId.value);
    return task?.sessionId || task?.id || '';
  };

  // 只有“二维标签处于激活状态 + 聊天面板可见 + 模型已加载”才算可见
  const modelPreviewVisible = computed(() => {
    if (activePanel.value !== 'chat' || !modelPreview.loaded) return false;
    const state = currentRightPanels.value;
    const active = state.tabs.find((tab) => tab.id === state.activeTabId);
    return active?.type === 'model2d';
  });

  const clearModelPreviewIdleTimer = () => {
    if (modelPreviewIdleTimer !== null) {
      clearTimeout(modelPreviewIdleTimer);
      modelPreviewIdleTimer = null;
    }
  };

  const destroyModelPreview = () => {
    modelPreviewEpoch++;
    pendingModelPreviewRoute = null;
    clearModelPreviewIdleTimer();
    modelPreview.loaded = false;
    modelPreview.modelId = '';
    modelPreview.route = null;
    modelPreview.ownerSessionId = '';
    lastModelLocateSignature = '';
  };

  const scheduleModelPreviewIdleDestroy = () => {
    clearModelPreviewIdleTimer();
    if (!modelPreview.loaded) return;
    modelPreviewIdleTimer = setTimeout(() => {
      modelPreviewIdleTimer = null;
      destroyModelPreview();
    }, MODEL_PREVIEW_IDLE_MS);
  };

  /**
   * 同一模型下只做定位，不重载 iframe：
   * tunid → 巷道定位，locationId → 设备定位，locationName → 报表定位。
   */
  const applyModelLocate = (route: SubAppRoute | null): boolean => {
    const query = route?.query || {};
    const modelId = query.model_id || modelPreview.modelId;
    if (!modelId) return false;
    const signature = [modelId, query.tunid || '', query.locationId || '', query.locationName || '', query.deviceType || ''].join('|');
    if (signature === lastModelLocateSignature) return false;
    lastModelLocateSignature = signature;

    const deviceType = query.deviceType || (query.tunid ? 'tun' : 'fanlocal');
    if (query.tunid) {
      locateTunnel({ model_id: modelId, tunid: query.tunid, deviceType });
    } else if (query.locationId) {
      locateDevice({ model_id: modelId, deviceType, locationId: query.locationId });
    } else if (query.locationName) {
      locateDeviceReport({ model_id: modelId, deviceType, locationName: query.locationName });
    }
    return true;
  };

  /**
   * 确保当前加载的模型与目标路由一致：
   * - 未加载：加载；
   * - model_id 相同：只隐藏/显示，定位参数走 bridge，不重载；
   * - model_id 不同：先卸载旧 iframe，下一帧再挂载新模型。
   */
  const ensureModelPreview = async (route: SubAppRoute | null) => {
    if (!route) return;
    const modelId = route.query?.model_id || '';

    if (modelPreview.loaded && modelPreview.modelId === modelId) {
      modelPreview.ownerSessionId = currentSessionKey();
      // 同一个模型只做定位；定位参数也没变时界面不会有任何变化，明确提示一下
      if (!applyModelLocate(route)) message.info('当前显示的已是该模型');
      return;
    }

    pendingModelPreviewRoute = route;
    if (modelPreviewTransition) return;

    modelPreviewTransition = (async () => {
      while (pendingModelPreviewRoute) {
        const target = pendingModelPreviewRoute;
        pendingModelPreviewRoute = null;
        const targetModelId = target.query?.model_id || '';

        if (modelPreview.loaded && modelPreview.modelId === targetModelId) {
          modelPreview.ownerSessionId = currentSessionKey();
          if (!applyModelLocate(target)) message.info('当前显示的已是该模型');
          continue;
        }

        const epoch = modelPreviewEpoch;
        clearModelPreviewIdleTimer();
        modelPreview.loaded = false;
        // 先让旧 iframe 真正卸载，再挂载新模型，避免同帧复用组件导致旧模型残留
        await nextTick();
        if (epoch !== modelPreviewEpoch) return;

        modelPreview.route = target;
        modelPreview.modelId = targetModelId;
        modelPreview.ownerSessionId = currentSessionKey();
        lastModelLocateSignature = '';
        modelPreview.loaded = true;

        // 子应用只靠模型 id 不会主动加载模型；首次打开必须补发一次链接里的定位消息，
        // 由子应用在 locate 处理里完成“加载模型 + 定位”。等 ModalPreview 挂载/注册桥接后再发，
        // 未 ready 时桥接会自动排队，ready 后补发。
        await nextTick();
        applyModelLocate(target);
      }
    })().finally(() => {
      modelPreviewTransition = null;
      if (pendingModelPreviewRoute) {
        void ensureModelPreview(pendingModelPreviewRoute);
      }
    });

    await modelPreviewTransition;
  };

  // 会话切换、标签激活/关闭、面板切换后，按当前激活标签同步模型状态
  const syncModelPreviewForActiveTab = () => {
    if (!props.visible || activePanel.value !== 'chat') return;
    const state = currentRightPanels.value;
    const active = state.tabs.find((tab) => tab.id === state.activeTabId);
    if (active?.type !== 'model2d') return;
    void ensureModelPreview(active.subAppRoute || { path: '/modal-preview' });
  };

  const openModelPreview = (route: SubAppRoute, title?: string) => {
    const tab = openModalPreviewTab({ title: title || '二维模型', subAppRoute: route });
    if (!tab) {
      // 没有当前会话时开不了标签页，不提示的话点击就是“没反应”
      message.warning('请先新建或选择一个会话，再打开模型预览');
      return;
    }
    void ensureModelPreview(route);
  };

  // 子应用没能定位（例如链接里的设备在模型里找不到）时界面不会有任何变化，必须提示用户，
  // 否则表现就是“点了没反应”
  const offLocateResult = onLocateResult((result) => {
    if (result.ok) return;
    message.warning(result.message || '未能在模型中找到该位置，请检查链接参数');
  });

  // 隐藏后开始 5 分钟空闲倒计时；重新显示立即取消
  watch(modelPreviewVisible, (visible) => {
    if (visible) clearModelPreviewIdleTimer();
    else scheduleModelPreviewIdleDestroy();
  });

  watch(
    () => [currentTaskId.value, currentRightPanels.value.activeTabId, activePanel.value] as const,
    () => syncModelPreviewForActiveTab()
  );

  /**
   * 聊天链接分流：
   *   1) 链接里带 modal-preview → 右侧面板打开二维模型预览，并把链接参数传给子应用；
   *   2) 文件下载链接 → 直接下载（带令牌取回文件再保存）；
   *   3) 其余链接 → 浏览器新标签页打开。
   */
  const handleOpenLink = async (payload: { url: string; title?: string }) => {
    if (!payload?.url) return;

    const route = parseModalPreviewLink(payload.url);
    if (route) {
      openModelPreview(route, payload.title);
      return;
    }

    if (isFileDownloadLink(payload.url)) {
      const close = message.loading('正在下载文件…', 0);
      const handled = await downloadLinkFile(payload.url);
      close();
      if (!handled) message.error('文件下载失败，请稍后重试');
      return;
    }

    window.open(payload.url, '_blank', 'noopener,noreferrer');
  };

  // 二维模型标签/模型可由业务入口按需打开（宿主可通过组件 ref 调用）
  defineExpose({ openModalPreviewTab, openModelPreview });

  // —— 拖拽/居中职责已下沉到 useChatDrag（与面板全屏共用 lib/modalWrap） ——
  const drag = useChatDrag({
    getIsFullscreen: () => isFullscreen.value,
    getVisible: () => props.visible,
  });
  const { onDragStart } = drag;

  // —— 待审批流程已下沉到 useChatApproval ——
  const { setTaskPendingApproval, currentPendingApproval, migrateTaskApproval, handleAskUserSubmit, handleAskUserCancel } = useChatApproval({
    getTaskList: () => taskList.value,
    getCurrentTaskId: () => currentTaskId.value,
    switchTask: (id) => switchTask(id),
    setTaskAbortController: (id, controller) => setTaskAbortController(id, controller),
    handleStreamEvent: (data, aiMsg, taskId) => chatStream.handleEvent(data, aiMsg, taskId),
    scrollToBottom: (force) => scrollToBottom(force),
    scrollToBottomThrottled: (force) => scrollToBottomThrottled(force),
    refreshUsage: () => fetchTodayUsage(),
    resetTodos: () => {
      showTodoBar.value = false;
      currentTodos.value = [];
    },
    setCurrentSessionId: (id) => setCurrentSessionId(id),
    // 延迟求值：useChatSend 在下面才初始化（与其它依赖同一约定，避免 setup 期 TDZ）
    hydrateMessageIds: (sessionId, msgs) => hydrateSendMessageIds(sessionId, msgs),
  });

  // —— 发送/流式管线已下沉到 useChatSend（handleSendMessage 作为输入框编排留在组件里） ——
  const {
    loading,
    stopStreaming,
    setTaskAbortController,
    abortAllStreams,
    getSkillRefIconUrl,
    getSessionRefIconUrl,
    sendTextOnly,
    sendWithAttachment,
    handleRegenerate,
    handleEditResend,
    hydrateMessageIds: hydrateSendMessageIds,
  } = useChatSend({
    getTaskList: () => taskList.value,
    getCurrentTaskId: () => currentTaskId.value,
    setCurrentTaskId: (taskId) => {
      currentTaskId.value = taskId;
    },
    getMessages: () => messages.value,
    setTaskList: (next) => {
      taskList.value = next;
    },
    getEditMode: () => editMode.value,
    getPendingApproval: () => currentPendingApproval.value,
    getChatMessages: () => chatMessagesRef.value,
    handleStreamEvent: (data, aiMsg, taskId) => chatStream.handleEvent(data, aiMsg, taskId),
    scrollToBottomThrottled: (force) => scrollToBottomThrottled(force),
    resetTodos: () => {
      showTodoBar.value = false;
      currentTodos.value = [];
    },
    migrateTaskApproval: (from, to) => migrateTaskApproval(from, to),
    historyLoadedTasks,
    transformHistoryToMessages,
  });

  // 胶囊聚合数据：转换逻辑内聚在 capsuleData 纯函数模块中，此处只做响应式接线
  const capsuleFiles = computed(() => buildCapsuleFiles(currentTask.value, messages.value));
  const capsuleLinks = computed(() => buildCapsuleLinks(capsuleFiles.value, messages.value));
  const capsuleAgents = computed(() => buildCapsuleAgents(messages.value, (i) => chatMessagesRef.value?.isAnswerVisible(i)));

  // 顶部上一个/下一个会话导航
  const currentTaskIndex = computed(() => taskList.value.findIndex((t) => t.id === currentTaskId.value));
  const canGoPrev = computed(() => currentTaskIndex.value > 0);
  const canGoNext = computed(() => currentTaskIndex.value >= 0 && currentTaskIndex.value < taskList.value.length - 1);

  const goToPrev = () => {
    if (!canGoPrev.value) return;
    const prevTask = taskList.value[currentTaskIndex.value - 1];
    if (prevTask) switchTask(prevTask.id);
  };

  const goToNext = () => {
    if (!canGoNext.value) return;
    const nextTask = taskList.value[currentTaskIndex.value + 1];
    if (nextTask) switchTask(nextTask.id);
  };

  // 消息被删除后，附件文件仍保留在服务端（message_id 变为 null）；
  // 这里把本地附件立即转入兜底列表，避免要刷新后才重新出现。
  const moveAttachmentsToOrphans = (task: Task | undefined, files: AttachedFile[]) => {
    if (!task || !files.length) return;
    const merged = [...(task.orphanAttachments || [])];
    for (const file of files) {
      if (!merged.some((item) => item.id === file.id)) merged.push(file);
    }
    task.orphanAttachments = merged;
  };

  // 删除单条消息：先删数据库行，后端再清空该会话内存线程，下轮从数据库重建上下文
  const handleDeleteMessage = (msg: Message) => {
    if (!msg.id) return;
    // 确认框与删除请求都是异步的，用户可能在这期间切到别的会话：记住这条消息所属的任务，
    // 写回它而不是「当前任务」，否则被删的消息会一直留在原任务里直到刷新。
    const ownerTask = currentTask.value;
    Modal.confirm({
      title: '提示',
      content: '是否删除该条消息？',
      okText: '确认',
      cancelText: '取消',
      wrapClassName: 'delete-task-confirm-modal',
      onOk: async () => {
        try {
          await deleteMessage(msg.id!);
          // 被中断拆成两段的回答里，前一段也是后端单独一条记录，一并删除；失败只记日志不阻断本地移除
          // ——主行已删，界面上这条消息本就该消失（残留的前段刷新后会单独出现，属可接受的退化）
          for (const absorbedId of msg.absorbedRowIds ?? []) {
            try {
              await deleteMessage(absorbedId);
            } catch (e) {
              console.error('删除被中断段落失败:', e);
            }
          }
          message.success('消息已删除');
          if (ownerTask) {
            ownerTask.messages = ownerTask.messages.filter((m) => m !== msg);
            moveAttachmentsToOrphans(ownerTask, [msg.attachedFile, ...(msg.attachedFiles || [])].filter(Boolean) as AttachedFile[]);
          }
        } catch {
          message.error('删除失败');
        }
      },
    });
  };
  const chatInputRef = ref<InstanceType<typeof ChatInputArea>>();
  const chatMessagesRef = ref<InstanceType<typeof ChatMessages>>();

  const scheduleListForDetail = ref<ScheduleTask[]>([]);

  const fetchScheduleListForDetail = async () => {
    try {
      const res = await getScheduleList();
      // getScheduleList 已按真实契约标注 { tasks, total }
      scheduleListForDetail.value = res?.tasks ?? [];
    } catch (e) {
      console.error('获取定时任务列表失败:', e);
      scheduleListForDetail.value = [];
      message.error('获取定时任务列表失败，定时任务详情可能不是最新');
    }
  };

  const currentTodos = ref<Array<{ content: string; status: string }>>([]);
  const showTodoBar = ref(false);

  const syncTodoBarFromMessages = () => {
    for (let i = messages.value.length - 1; i >= 0; i--) {
      const msg = messages.value[i];
      if (msg.type === 'ai' && msg.thinkingSteps) {
        for (let j = msg.thinkingSteps.length - 1; j >= 0; j--) {
          const step = msg.thinkingSteps[j];
          if (step.type === 'updated_todo_list' && step.todos) {
            currentTodos.value = [...step.todos];
            showTodoBar.value = true;
            return;
          }
        }
      }
    }
    showTodoBar.value = false;
    currentTodos.value = [];
  };

  const handleOpenScheduleSession = async (sessionId: string, prompt?: string) => {
    activePanel.value = 'chat';
    await fetchSessionList();
    await fetchScheduleListForDetail();
    const existing = taskList.value.find((t) => t.sessionId === sessionId);
    if (existing) {
      await switchTask(existing.id);
    } else {
      const newTask: Task = {
        id: sessionId,
        name: '定时任务',
        sessionId,
        messages: [],
        attachedFiles: [],
      };
      taskList.value.unshift(newTask);
      historyLoadedTasks.delete(sessionId);
      await switchTask(newTask.id);
    }

    // 如果有 prompt，自动发送消息
    if (prompt) {
      inputMessage.value = prompt;
      await nextTick();
      await handleSendMessage();
    }
  };

  const schedulePanelRef = ref();

  const handleScheduleDeleted = () => {
    const task = currentTask.value;
    if (task?.rightPanels) {
      const tab = task.rightPanels.tabs.find((t) => t.type === 'schedule');
      if (tab) removeTab(task.rightPanels, tab.id);
    }
    fetchScheduleListForDetail();
    schedulePanelRef.value?.fetchScheduleList?.();
  };

  const handleScheduleUpdated = async () => {
    await fetchScheduleListForDetail();
    // 同步标签内任务对象为最新数据（编辑/启停后）
    const task = currentTask.value;
    const tab = task?.rightPanels?.tabs.find((t) => t.type === 'schedule');
    if (tab?.type === 'schedule') {
      const fresh = scheduleListForDetail.value.find((s) => s.id === tab.task.id);
      if (fresh) tab.task = fresh;
    }
    schedulePanelRef.value?.fetchScheduleList?.();
  };

  const inputMessage = ref('');
  const selectedSessions = ref<Array<{ id: string; name: string }>>([]);
  const selectedSkill = ref<{ name: string; display_name: string } | null>(null);
  // [审计-第四轮 M3] 重放自我方 fix/base-agent-token（M1/M2/M3）：当前登录用户是否管理员
  // （TfAgents /ventAI/api/model/me 的 is_admin；原审计写 /api/me，经实测校正，见交付说明 §⑩）。
  // 默认 false = 保守语义：取不到权限信息时按非管理员处理，管理入口隐藏。
  const isAdmin = ref(false);

  // —— 以下四组职责已下沉到 composables（额度/导出/滚动/文件），组件只做接线 ——
  const { scrollToBottom, scrollToBottomThrottled } = useChatScroll(() => chatMessagesRef.value);
  const { pendingFile, activeFileReader, triggerFileUpload, handleFileUpload, addFile, removePendingFile } = useChatFiles(() => chatInputRef.value);

  // 拖拽 / 粘贴进来的文件与「选择文件」共用同一条入队路径：校验与读取分流都在 addFile 内
  const handleFileAdded = (file: File) => {
    addFile(file);
  };

  const handleDropFiles = (files: File[]) => {
    // 待发附件是单值，多文件拖入时取第一个并说明，避免用户以为全都加上了
    if (files.length > 1) message.warning('一次只能添加一个附件，已取第一个文件');
    addFile(files[0]);
  };

  const { isDragOver, dragHandlers } = useFileDrop({
    onFiles: handleDropFiles,
    isVisible: () => props.visible,
  });
  const { onDragEnter, onDragOver, onDragLeave, onDrop } = dragHandlers;
  const {
    usageToday,
    fetchTodayUsage,
    contextUsed,
    contextMax,
    contextPercent,
    contextBreakdown,
    thinkLevel,
    editMode,
    fetchModelMsg,
    fetchSessionMode,
    fetchContext,
    invalidateQuotaFetch,
    handleThinkLevelChange,
    handleEditModeChange,
  } = useChatQuota(() => getCurrentSessionId());
  const { currentWordUrl, downloadWordFile, downloadWordReport, handleExportMarkdown, handleExportWord } = useChatExport(
    () => messages.value,
    () => currentTask.value
  );

  const handleUpdateSelectedSessions = (sessions: Array<{ id: string; name: string }>) => {
    selectedSessions.value = sessions;
  };

  const handleUpdateSelectedSkill = (skill: { name: string; display_name: string } | null) => {
    selectedSkill.value = skill;
  };

  const getCurrentSessionId = (): string => {
    const currentTask = taskList.value.find((t) => t.id === currentTaskId.value);
    return currentTask?.sessionId || '';
  };

  /**
   * 拉取单个会话的历史消息与附件。
   * 流式中的任务不拉历史（避免覆盖在途消息）；附件加载失败不阻断消息展示。
   */
  const loadTaskHistory = async (task: Task) => {
    const sessionId = task.sessionId;
    if (!sessionId || historyLoadedTasks.has(task.id) || task.isStreaming) return;

    setHistoryLoading(task.id, true);
    try {
      const res = await getDetail(sessionId);
      const history = Array.isArray(res?.messages) ? transformHistoryToMessages(res.messages) : [];
      task.messages = history;
      await loadHistoryAttachments(task, sessionId, history);
      historyLoadedTasks.add(task.id);
    } catch (error) {
      // 拉不到历史时界面会是空白会话，容易被误认为「对话丢了」，必须给出提示
      console.error('加载历史会话失败:', error);
      message.error('加载历史会话失败，请稍后重试');
    } finally {
      setHistoryLoading(task.id, false);
    }
  };

  const switchTask = async (taskId: string) => {
    activePanel.value = 'chat';

    // 单一数据源：messages 直接读当前任务，切换任务前无需把视图数组回写到旧任务
    currentTaskId.value = taskId;
    const newTask = taskList.value.find((t) => t.id === taskId);
    if (!newTask) return;

    inputMessage.value = '';
    pendingFile.value = null;
    showFileList.value = false;

    if (newTask.sessionId && !historyLoadedTasks.has(taskId)) {
      // 流式中的任务由 loadTaskHistory 内部跳过，但下面的上下文/模式/进度条初始化必须继续执行
      await loadTaskHistory(newTask);
    }

    if (newTask.sessionId) {
      fetchContext(newTask.sessionId);
      fetchSessionMode(newTask.sessionId);
    } else {
      // 空白会话不拉取额度：作废在途请求，否则上一条会话的响应会盖掉下面刚重置的默认值
      invalidateQuotaFetch();
      contextUsed.value = 0;
      contextPercent.value = 0;
      contextBreakdown.value = { messages: 0, mcp: 0, skills: 0, system_prompt: 0, other: 0 };
      editMode.value = 'full';
    }

    syncTodoBarFromMessages();

    // 切换任务时检测是否为定时任务会话：自动打开/关闭定时任务详情标签
    const scheduleItem = newTask.sessionId ? scheduleListForDetail.value.find((s) => s.feedback_session_id === newTask.sessionId) : undefined;
    const panelState = getPanelState(newTask);
    const existingScheduleTab = panelState.tabs.find((t) => t.type === 'schedule');
    if (scheduleItem) {
      if (existingScheduleTab) {
        panelState.activeTabId = existingScheduleTab.id;
      } else {
        panelState.tabs.push({ id: 'schedule', type: 'schedule', title: scheduleItem.name || '定时任务', task: scheduleItem });
        panelState.activeTabId = 'schedule';
      }
    } else if (existingScheduleTab) {
      removeTab(panelState, existingScheduleTab.id);
    }

    await nextTick();
    chatMessagesRef.value?.forceScrollToBottom();
  };

  const createNewTask = () => {
    const existingBlank = taskList.value.find((t) => !t.sessionId && t.messages.length === 0);
    if (existingBlank) {
      switchTask(existingBlank.id);
      return;
    }

    const newTask: Task = {
      id: `task-${Date.now()}`,
      name: '新任务',
      sessionId: '',
      messages: getDefaultMessages(),
      attachedFiles: [],
    };

    invalidateQuotaFetch();
    contextUsed.value = 0;
    contextPercent.value = 0;
    contextBreakdown.value = { messages: 0, mcp: 0, skills: 0, system_prompt: 0, other: 0 };
    editMode.value = 'full';
    taskList.value.unshift(newTask);
    switchTask(newTask.id);
  };

  const handleDeleteTask = (task: Task, _index: number) => {
    Modal.confirm({
      title: '提示',
      content: '是否删除该对话？',
      okText: '确认',
      cancelText: '取消',
      wrapClassName: 'delete-task-confirm-modal',
      onOk: async () => {
        try {
          if (task.sessionId) {
            await deleteSession(task.sessionId);
          }
          // 删除的是当前已加载模型所属的会话：直接销毁模型（而不是等空闲超时）
          const ownerKey = task.sessionId || task.id;
          if (modelPreview.ownerSessionId && modelPreview.ownerSessionId === ownerKey) {
            destroyModelPreview();
          }
          const realIndex = taskList.value.findIndex((t) => t.id === task.id);
          if (realIndex !== -1) {
            taskList.value.splice(realIndex, 1);
          }
          if (currentTaskId.value === task.id) {
            if (taskList.value.length > 0) {
              switchTask(taskList.value[0].id);
            } else {
              // 任务已清空：没有当前任务后 messages 自动回落到空数组
              currentTaskId.value = '';
            }
          }
          message.success('删除成功');
        } catch {
          message.error('删除失败');
        }
      },
    });
  };

  const handleSendMessage = async () => {
    const hasText = inputMessage.value.trim();
    const hasFile = pendingFile.value;

    // 发送前置快照：请求失败时按这份内容回填输入区（文本 + 附件）。
    // 必须在 createNewTask 之前取：createNewTask -> switchTask 会清空输入区。
    // 输入框清空会触发输入区内部把 # 会话 / $ 技能引用一起清掉，这里只回填用户能直接看到的两项；
    // 引用标签需要用户重新选择（避免父组件状态与输入区内部状态不同步）。
    const draftText = inputMessage.value;
    const draftFile = pendingFile.value;

    // 后端 message 为必填字段，纯附件不能单独发送，必须有文字
    if (!hasText) {
      message.warning('请输入消息内容');
      return;
    }
    if (loading.value) return;
    if (currentPendingApproval.value) {
      message.warning('请先审批执行计划');
      return;
    }
    // 没有当前任务时（例如会话被全部删除）先建一个：消息是挂在任务上的，
    // 否则 push 出去的消息会落在视图之外的临时数组里，之后再也不会显示
    if (!currentTask.value) {
      await createNewTask();
      if (!currentTask.value) {
        // 建任务失败时也把草稿还回去，避免空白任务创建异常把用户输入吞掉
        inputMessage.value = draftText;
        pendingFile.value = draftFile;
        return;
      }
      // createNewTask -> switchTask 会清空输入区，把刚捕获的草稿放回去再组装请求
      inputMessage.value = draftText;
      pendingFile.value = draftFile;
    }

    const sessionPrefix = selectedSessions.value.length > 0 ? selectedSessions.value.map((s) => `#session:${s.id}`).join(' ') + ' ' : '';
    const skillPrefix = selectedSkill.value ? `#skill:${selectedSkill.value.name} ` : '';
    const userInput = skillPrefix + sessionPrefix + inputMessage.value.trim();

    let displayContent = inputMessage.value.trim();
    if (selectedSkill.value) {
      const skillIconUrl = getSkillRefIconUrl();
      displayContent = `[<img src="${skillIconUrl}" class="session-ref-icon" /> 技能：${selectedSkill.value.display_name}] ${displayContent}`;
    }
    if (selectedSessions.value.length > 0) {
      const names = selectedSessions.value.map((s) => s.name).join('、');
      const iconUrl = getSessionRefIconUrl();
      displayContent = `[<img src="${iconUrl}" class="session-ref-icon" /> 引用 ${selectedSessions.value.length} 个会话：${names}] ${displayContent}`;
    }

    inputMessage.value = '';
    pendingFile.value = null;
    selectedSessions.value = [];
    selectedSkill.value = null;

    // 记住本次发送属于哪个任务：请求期间用户可能切到别的会话，失败时的报错必须落回发起它的任务，
    // 否则报错气泡会塞进正在看的那条会话，而发起任务的占位消息没人清理（永远停在「正在输入」）。
    const originTask = currentTask.value;

    try {
      await nextTick();
      chatMessagesRef.value?.forceScrollToBottom();

      if (hasFile) {
        await sendWithAttachment(draftFile!, userInput, displayContent);
      } else {
        await sendTextOnly(userInput, displayContent);
      }
    } catch (error) {
      console.error('发送消息失败:', error);
      const isStreamError = error instanceof StreamError;
      const errText = isStreamError ? error.message : '发送失败，请重试';
      message.error(errText);
      if (isStreamError) fetchTodayUsage();

      // 归位到发起本次请求的任务。任务可能在请求期间被删除，那时只保留上面的提示。
      if (originTask) {
        const msgs = originTask.messages;
        const lastMsg = msgs[msgs.length - 1];
        if (lastMsg && lastMsg.type === 'ai' && lastMsg.isLoading) {
          msgs.pop();
        }
        msgs.push({
          type: 'ai',
          content: isStreamError ? error.message : '抱歉，请求失败，请稍后重试。',
          time: dayjs().format('HH:mm'),
          // 这轮请求失败了，后端没有对应记录：标记为仅前端消息，回填主键时跳过
          localOnly: true,
        });

        // 失败回填：只在用户仍停留在发起任务上时恢复，避免把旧会话的草稿塞进正在看的另一个会话。
        // 输入框/附件已被用户重新填写时不覆盖（宁可保留用户新输入，也不要把旧内容盖上去）。
        if (currentTask.value === originTask) {
          if (!inputMessage.value) inputMessage.value = draftText;
          if (!pendingFile.value) pendingFile.value = draftFile;
        }
      }
    } finally {
      // 自动滚到底只对「用户仍停在这条任务上」有意义，否则会把正在看的别的会话拽到底部。
      // 按对象身份比较：任务在拿到真实 session_id 后会被改名（id 会变），用 id 比较会误判。
      if (currentTask.value === originTask) {
        await scrollToBottom(true);
      }
    }
  };

  // 统一对话流（SSE）事件管线：事件 → 消息状态的映射收敛在 hooks/useChatStream 内，
  // 本组件只注入「任务查找 / 进度条 / 用量刷新 / 待审批登记 / 答案初始化」这些视图侧钩子。
  const chatStream = useChatStream({
    findTask: (taskId) => taskList.value.find((t) => t.id === taskId),
    isCurrentTask: (taskId) => currentTaskId.value === taskId,
    setTodos: (todos) => {
      currentTodos.value = [...todos];
      showTodoBar.value = true;
    },
    refreshContext: (sessionId) => {
      fetchContext(sessionId);
    },
    refreshUsage: () => {
      fetchTodayUsage();
    },
    markPendingApproval: (taskId, sessionId, threadId) => {
      setTaskPendingApproval(taskId, sessionId, threadId);
    },
    initAskUserAnswers: (aiMsg, questions) => {
      chatMessagesRef.value?.initAskUserAnswers(aiMsg, questions);
    },
  });

  /**
   * 拉取当前登录用户的权限信息（TfAgents 的 GET /ventAI/api/model/me）。
   *
   * [审计-第四轮 M3] 重放自我方 fix/base-agent-token（M1/M2/M3）。
   * 为什么需要：TfAgents 已把「技能上传/启停、子智能体增删改、思考级别切换」等全局变更端点收归管理员
   * （用户已定案方案 B：后端返回 is_admin，前端隐藏入口），基座据此隐藏对应入口，避免非管理员点了才被 403。
   *
   * 安全语义（保守失败，历史踩坑点必须保留）：任何异常（未登录 401 / 接口未上线 404 / 网络失败）
   * 一律按「非管理员」处理——isAdmin 置 false，且不缓存结果（每次打开都重新拉取，管理员名单可能在
   * 服务端 .env 变更）。注意这只是界面可见性，真正的拦截仍在 TfAgents 后端——前端隐藏不等于安全。
   */
  const fetchMe = async () => {
    try {
      const me = await getMe();
      isAdmin.value = !!me?.is_admin;
    } catch (e) {
      // 取不到（未登录/接口未上线/令牌失效）→ 按非管理员处理，隐藏管理入口
      isAdmin.value = false;
      console.warn('获取当前用户权限失败，管理入口将隐藏:', e);
    }
  };

  // 发送流式 AI 回答的核心：推送一条空的 AI 消息 → 建 AbortController → 调 SSE → 处理 session_id 迁移 → 异常/清理。
  // 正常发送、编辑重发、重新生成都复用此函数，file 存在且带 originalFile 时走 PDF 审查流，否则走纯文本流。
  // Throttled version for SSE streaming (no await, uses rAF)
  // immediate：组件若在挂载时就已经是可见状态（例如宿主页面默认展开、或恢复了上次的展开状态），
  // false→true 的边沿不会发生，初始化就永远不执行，面板会停在空白状态。立即执行一次并让不可见分支
  // 直接返回，等价于「打开时才初始化」的懒加载语义。
  watch(
    () => props.visible,
    async (newVisible) => {
      // 关闭弹框无需任何回写：消息单一数据源直接挂在任务对象上；仅在打开时做初始化
      if (newVisible) {
        await fetchSessionList();
        fetchModelMsg();
        fetchScheduleListForDetail();
        fetchTodayUsage();
        // [审计-第四轮 M3] 重放自我方 fix/base-agent-token（M1/M2/M3）：每次打开时刷新权限（不缓存；失败置 false 见 fetchMe）
        fetchMe();

        // 去除重复的空白任务，只保留一个
        taskList.value = taskList.value.filter((task, index) => {
          if (task.sessionId) return true;
          return index === taskList.value.findIndex((t) => !t.sessionId);
        });

        // 优先回到关闭前所在的任务（如流式中的新任务），否则默认选中第一条历史记录
        const firstHistoryTask = taskList.value.find((t) => t.sessionId);
        const prevTask = taskList.value.find((t) => t.id === currentTaskId.value);

        let targetTask: Task;
        if (prevTask) {
          targetTask = prevTask;
        } else if (firstHistoryTask) {
          targetTask = firstHistoryTask;
        } else {
          // 没有历史记录时才创建空白新任务
          targetTask = {
            id: `task-${Date.now()}`,
            name: '新任务',
            sessionId: '',
            messages: getDefaultMessages(),
            attachedFiles: [],
          };
          taskList.value.unshift(targetTask);
        }

        currentTaskId.value = targetTask.id;

        // 如果是历史任务，加载其消息与附件
        if (targetTask.sessionId && !historyLoadedTasks.has(targetTask.id)) {
          await loadTaskHistory(targetTask);
        }

        if (targetTask.sessionId) {
          fetchContext(targetTask.sessionId);
          fetchSessionMode(targetTask.sessionId);
        } else {
          invalidateQuotaFetch();
          contextUsed.value = 0;
          contextPercent.value = 0;
          contextBreakdown.value = { messages: 0, mcp: 0, skills: 0, system_prompt: 0, other: 0 };
          editMode.value = 'full';
        }

        syncTodoBarFromMessages();

        pendingFile.value = null;
        showFileList.value = false;
        inputMessage.value = '';

        await nextTick(() => {
          chatMessagesRef.value?.forceScrollToBottom();
          // 重新打开助手时，如果当前标签就是二维模型，按需重新加载
          syncModelPreviewForActiveTab();
        });
      } else {
        // 关闭整个助手弹框：模型立即销毁，而不是隐藏
        destroyModelPreview();
      }
    },
    { immediate: true }
  );

  onBeforeUnmount(() => {
    offLocateResult();
    // 移除挂载空壳，避免残留
    portalWrapper.value?.remove();
    portalWrapper.value = null;
    // 组件卸载时主动断开所有任务的流式连接
    abortAllStreams();
    // Abort in-flight FileReader if any
    if (activeFileReader.value) {
      activeFileReader.value.abort();
      activeFileReader.value = null;
    }
    // 清掉二维模型的空闲销毁定时器，避免卸载后仍回调
    clearModelPreviewIdleTimer();
  });
</script>

<style scoped lang="less">
  @import '../styles/tokens.less';

  .ai-container {
    display: flex;
    height: 700px;
    gap: 10px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* 拖拽提示遮罩的定位基准 */
    position: relative;
  }

  /* 拖拽上传提示：z-index 低于弹框的收起/最大化按钮（10），拖拽时窗口控件仍保持可见 */
  .drop-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: @color-primary-a10;
    border: 2px dashed @color-primary-a50;
    border-radius: 4px;
  }

  .drop-overlay-text {
    padding: 8px 20px;
    border-radius: 6px;
    background: @color-panel-bg;
    border: 1px solid @color-panel-border;
    color: @color-text;
    font-size: 13px;
  }

  .collapse-btn {
    position: absolute;
    top: 16px;
    left: 24px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #1a6696;
    cursor: pointer;
    transition: background 0.3s;
    border-radius: 4px;

    &:hover {
      background: #1f7ab8;
    }

    .collapse-icon {
      width: 16px;
      height: 16px;
      background-image: var(--img-chat-collapse-icon);
      background-repeat: no-repeat;
      background-size: 100% 100%;

      &.collapsed {
        background-image: var(--img-chat-expand-icon);
      }
    }
  }

  .task-panel-wrapper {
    width: 300px;
    flex-shrink: 0;
    overflow: hidden;
    transition:
      width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      margin 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s ease;

    &.collapsed {
      width: 0;
      margin: 0;
      opacity: 0;
    }
  }

  .chat-panel {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    background-image: var(--img-chat-panel-bg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 4px;
    min-width: 0;
  }

  .right-panel {
    display: flex;
    flex-direction: column;
    width: calc(50% - 140px);
    height: 100%;
    background-image: var(--img-chat-panel-bg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 4px;
    flex-shrink: 0;

    &.full {
      flex: 1;
      width: auto;
      min-width: 0;
    }
  }

  /* 右侧面板滑入滑出过渡动画 */
  :deep(.right-panel-slide-enter-active) {
    transition:
      opacity 0.3s ease,
      transform 0.3s ease;
  }

  :deep(.right-panel-slide-leave-active) {
    transition:
      opacity 0.25s ease,
      transform 0.25s ease;
  }

  :deep(.right-panel-slide-enter-from) {
    opacity: 0;
    transform: translateX(30px);
  }

  :deep(.right-panel-slide-leave-to) {
    opacity: 0;
    transform: translateX(30px);
  }

  .draggable-title {
    cursor: grab;
    user-select: none;

    &:active {
      cursor: grabbing;
    }

    &.no-drag {
      cursor: default;

      &:active {
        cursor: default;
      }
    }
  }
</style>

<style lang="less">
  @import url('../styles/modal.less');
</style>