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

<template>
  <!-- 顶部任务选择器 -->
  <div class="chat-header">
    <!-- 任务列表收起时显示导航按钮 -->
    <template v-if="panelCollapsed">
      <div :class="['nav-btn', { disabled: !canGoPrev }]" @click="emit('go-to-prev')">
        <div class="nav-icon prev-icon"></div>
      </div>
      <div :class="['nav-btn', { disabled: !canGoNext }]" @click="emit('go-to-next')">
        <div class="nav-icon next-icon"></div>
      </div>
      <div class="nav-btn" @click="emit('create-task')">
        <div class="nav-icon add-icon"></div>
      </div>
    </template>

    <!-- 会话标题区域（含编辑功能） -->
    <div v-if="currentTask?.sessionId" class="chat-header-title-wrapper">
      <template v-if="editingTitle">
        <input
          ref="titleInputRef"
          v-model="editTitleValue"
          class="title-edit-input"
          @keyup.enter="handleSaveTitle"
          @keyup.escape="cancelEditTitle"
          @blur="handleSaveTitle"
        />
      </template>
      <template v-else>
        <div class="title-edit-btn" @click="startEditTitle" title="编辑标题"></div>
        <span class="chat-header-title">{{ currentTask.name }}</span>
      </template>
    </div>

    <!-- 会话导出 -->
    <div v-if="currentTask?.sessionId" ref="exportWrapRef" class="export-wrapper">
      <div class="export-bg" title="导出会话" @click="toggleExportPopup">
        <div class="export-icon"></div>
      </div>
      <div v-if="showExportPopup" class="export-popup" @click.stop>
        <div class="export-item" @click="handleExport('md')">
          <div class="export-item-icon md-icon"></div>
          <span class="export-item-text">导出 Markdown (.md)</span>
        </div>
        <div class="export-item" @click="handleExport('word')">
          <div class="export-item-icon word-icon"></div>
          <span class="export-item-text">导出 Word (.docx)</span>
        </div>
      </div>
    </div>

    <!-- Word 报告下载按钮 -->
    <div v-if="currentWordUrl" class="upload-bg" @click="emit('download-word')">
      <div class="download-icon"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, nextTick } from 'vue';
  import { onClickOutside } from '@vueuse/core';
  import type { Task } from './types';

  interface Props {
    currentTask: Task | undefined;
    panelCollapsed: boolean;
    canGoPrev: boolean;
    canGoNext: boolean;
    currentWordUrl: string;
  }

  const props = defineProps<Props>();

  const emit = defineEmits<{
    'go-to-prev': [];
    'go-to-next': [];
    'create-task': [];
    // 保存标题时触发，参数为新标题（父组件负责 API 调用和状态更新）
    'save-title': [newTitle: string];
    'download-word': [];
    'export-md': [];
    'export-word': [];
  }>();

  // 导出气泡状态
  const exportWrapRef = ref<HTMLElement>();
  const showExportPopup = ref(false);

  const toggleExportPopup = () => {
    showExportPopup.value = !showExportPopup.value;
  };

  const handleExport = (type: 'md' | 'word') => {
    showExportPopup.value = false;
    if (type === 'md') emit('export-md');
    else emit('export-word');
  };

  onClickOutside(exportWrapRef, () => {
    showExportPopup.value = false;
  });

  // 标题编辑状态（UI 交互逻辑，内聚在子组件中）
  const editingTitle = ref(false);
  const editTitleValue = ref('');
  const titleInputRef = ref<HTMLInputElement | null>(null);

  const startEditTitle = () => {
    if (!props.currentTask?.sessionId) return;
    editTitleValue.value = props.currentTask.name;
    editingTitle.value = true;
    nextTick(() => {
      titleInputRef.value?.focus();
      titleInputRef.value?.select();
    });
  };

  const handleSaveTitle = () => {
    const newTitle = editTitleValue.value.trim();
    editingTitle.value = false;
    // 标题有变化时通知父组件保存
    if (props.currentTask?.sessionId && newTitle && newTitle !== props.currentTask.name) {
      emit('save-title', newTitle);
    }
  };

  const cancelEditTitle = () => {
    editingTitle.value = false;
  };
</script>

<style scoped lang="less">
  .chat-header {
    display: flex;
    padding: 12px 20px;
    flex-shrink: 0;
    align-items: center;
    background: rgba(2, 53, 100, 0.3);

    .chat-header-title {
      font-size: 16px;
      color: #e0e6ed;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 10px;
    }

    .chat-header-title-wrapper {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;

      &:hover .title-edit-btn {
        opacity: 1;
      }

      .title-edit-btn {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        background-image: var(--img-chat-edit-icon);
        background-repeat: no-repeat;
        background-size: 16px 16px;
        background-position: center;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.2s;
        border-radius: 4px;
        margin-right: 4px;

        &:hover {
          background-color: rgba(10, 132, 255, 0.2);
        }
      }

      .chat-header-title {
        margin-left: 0;
        flex: 1;
        min-width: 0;
      }

      .title-edit-input {
        flex: 1;
        min-width: 0;
        height: 28px;
        padding: 0 8px;
        font-size: 14px;
        color: #e0e6ed;
        background: rgba(10, 132, 255, 0.1);
        border: 1px solid rgba(10, 132, 255, 0.5);
        border-radius: 4px;
        outline: none;

        &:focus {
          border-color: rgba(10, 132, 255, 0.8);
        }
      }
    }

    .nav-btn {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 4px;
      transition: background 0.2s;

      &:hover:not(.disabled) {
        background: rgba(10, 132, 255, 0.15);
      }

      &.disabled {
        opacity: 0.3;
        cursor: not-allowed;
      }

      .nav-icon {
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .prev-icon {
        background-image: var(--img-chat-prev-icon);
      }

      .next-icon {
        background-image: var(--img-chat-next-icon);
      }

      .add-icon {
        background-image: var(--img-chat-options-add-icon);
      }
    }

    .export-wrapper {
      position: relative;
      flex-shrink: 0;
    }

    .export-bg {
      cursor: pointer;
      width: 36px;
      height: 36px;
      margin-left: 8px;
      display: flex;
      align-items: center;
      justify-content: center;

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

    .export-popup {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: #0a2a3f;
      border: 1px solid #1a4a6f;
      border-radius: 8px;
      min-width: 180px;
      z-index: 1000;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      padding: 4px;

      .export-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 16px;
        cursor: pointer;
        transition: background 0.2s;
        border-radius: 6px;

        &:hover {
          background: rgba(10, 132, 255, 0.15);
        }

        .export-item-icon {
          width: 18px;
          height: 18px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          flex-shrink: 0;
        }

        .md-icon {
          background-image: var(--img-chat-file-md-icon);
        }

        .word-icon {
          background-image: var(--img-chat-file-word-icon);
        }

        .export-item-text {
          font-size: 13px;
          color: #e0e6ed;
          white-space: nowrap;
        }
      }
    }

    .upload-bg {
      cursor: pointer;
      width: 36px;
      height: 36px;
      background-image: var(--img-chat-close-bg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      position: relative;
    }

    .download-icon {
      width: 20px;
      height: 20px;
      background-image: var(--img-chat-download-icon);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
</style>