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

<template>
  <div class="task-list-panel">
    <!-- 操作区域（顶部） -->
    <div class="options-area">
      <div v-for="item in optionItems" :key="item.type" :class="['options-area-item', `options-${item.type}`]" @click="handleOptionClick(item.type)">
        <div class="options-img">
          <div class="options-icon"></div>
        </div>
        <a-button size="small" type="primary">{{ item.label }}</a-button>
      </div>
    </div>

    <!-- 搜索模式 -->
    <div class="search-header">
      <a-input v-model:value="searchKeyword" placeholder="搜索任务名称..." allow-clear size="small" class="search-input" />
    </div>
    <!-- 置顶任务区域 -->
    <div v-if="pinnedTaskList.length > 0" class="pinned-task-list">
      <div
        v-for="(task, index) in pinnedTaskList"
        :key="'pinned-' + task.id"
        :class="['task-item', { active: currentTaskId === task.id }]"
        @click="emit('switch-task', task.id)"
      >
        <div class="task-pin-icon pinned" @click.stop="togglePin(task)" title="取消置顶"></div>
        <span class="task-name">{{ task.name }}</span>
        <div class="task-right">
          <span v-if="task.isStreaming" class="task-loading"></span>
          <span v-else class="task-time">{{ formatRelativeTime(task.updatedAt) }}</span>
          <div class="task-delete" @click.stop="emit('delete-task', task, index)" title="删除"></div>
        </div>
      </div>
    </div>

    <div class="task-list">
      <div
        v-for="(task, index) in filteredTaskList"
        :key="index"
        :class="['task-item', { active: currentTaskId === task.id }]"
        @click="emit('switch-task', task.id)"
      >
        <div class="task-pin-icon" @click.stop="togglePin(task)" title="置顶"></div>
        <span class="task-name">{{ task.name }}</span>
        <div class="task-right">
          <span v-if="task.isStreaming" class="task-loading"></span>
          <span v-else class="task-time">{{ formatRelativeTime(task.updatedAt) }}</span>
          <div class="task-delete" @click.stop="emit('delete-task', task, index)" title="删除"></div>
        </div>
      </div>
      <div v-if="searchKeyword && filteredTaskList.length === 0" class="empty-hint"> 未找到匹配的任务 </div>
      <div v-else-if="filteredTaskList.length === 0" class="empty-hint"> 还没有任务 </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue';
  import type { Task } from './types';

  const props = defineProps<{
    taskList: Task[];
    currentTaskId: string;
  }>();

  const emit = defineEmits<{
    (e: 'switch-task', taskId: string): void;
    (e: 'create-task'): void;
    (e: 'delete-task', task: Task, index: number): void;
    (e: 'pin-task', task: Task): void;
    (e: 'toggle-skill'): void;
    (e: 'toggle-schedules'): void;
    (e: 'toggle-sub-agents'): void;
  }>();

  type OptionType = 'add' | 'search' | 'skill' | 'schedules' | 'sub-agents';

  const activeOption = ref<OptionType>('add');
  const searchKeyword = ref('');

  const pinnedTaskList = computed(() => {
    let list = props.taskList.filter((task) => task.sortOrder === 1);
    if (searchKeyword.value.trim()) {
      const keyword = searchKeyword.value.trim().toLowerCase();
      list = list.filter((task) => task.name.toLowerCase().includes(keyword));
    }
    return list;
  });

  const filteredTaskList = computed(() => {
    let list = props.taskList.filter((task) => task.sortOrder !== 1);
    if (searchKeyword.value.trim()) {
      const keyword = searchKeyword.value.trim().toLowerCase();
      list = list.filter((task) => task.name.toLowerCase().includes(keyword));
    }
    return list;
  });

  const togglePin = (task: Task) => {
    emit('pin-task', task);
  };

  const optionItems = [
    { type: 'add' as OptionType, label: '新建任务' },
    // { type: 'search' as OptionType, label: '搜索' },
    { type: 'skill' as OptionType, label: '技能' },
    { type: 'sub-agents' as OptionType, label: '子智能体' },
    { type: 'schedules' as OptionType, label: '定时任务' },
  ];

  const formatRelativeTime = (dateStr?: string) => {
    if (!dateStr) return '刚刚';
    const now = Date.now();
    const time = new Date(dateStr).getTime();
    const diff = now - time;
    if (diff < 60 * 1000) return '刚刚';
    if (diff < 60 * 60 * 1000) return `${Math.floor(diff / (60 * 1000))}分钟前`;
    if (diff < 24 * 60 * 60 * 1000) return `${Math.floor(diff / (60 * 60 * 1000))}小时前`;
    return `${Math.floor(diff / (24 * 60 * 60 * 1000))}天前`;
  };

  const handleOptionClick = (type: OptionType) => {
    if (type === 'add') {
      emit('create-task');
    } else if (type === 'skill') {
      emit('toggle-skill');
    } else if (type === 'sub-agents') {
      emit('toggle-sub-agents');
    } else if (type === 'schedules') {
      emit('toggle-schedules');
    } else {
      activeOption.value = type;
      searchKeyword.value = '';
    }
  };
</script>

<style scoped lang="less">
  .task-list-panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-image: var(--img-chat-task-panel-bg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 8px;
    flex-shrink: 0;
    padding: 10px;

    .search-header {
      padding-bottom: 10px;

      .search-input {
        height: 32px;
        background: rgba(10, 132, 255, 0.1);
        border: 1px solid rgba(63, 80, 106, 0.5);
        color: #e0e6ed;

        :deep(.zxm-input) {
          background: transparent;
          color: #e0e6ed;
        }
      }
    }

    .pinned-task-list {
      max-height: 180px;
      overflow-y: auto;
      border-bottom: 1px solid rgba(63, 80, 106, 0.3);
      margin-bottom: 8px;
      padding-bottom: 8px;
    }

    .task-list {
      flex: 1;
      overflow-y: auto;
    }

    .pinned-task-list,
    .task-list {
      .task-item {
        height: 36px;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px;
        cursor: pointer;
        transition: all 0.3s;
        margin-bottom: 4px;
        color: #e0e6ed;

        &:hover {
          background: rgba(10, 132, 255, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        &.active {
          background: transparent;
          box-shadow: inset 0 0 8px rgba(10, 132, 255, 0.4);
          border: 1px solid rgba(10, 132, 255, 0.3);
          color: #e0e6ed;
        }

        .task-pin-icon {
          width: 28px;
          height: 28px;
          flex-shrink: 0;
          background-image: var(--img-chat-pin-icon);
          background-repeat: no-repeat;
          background-size: 16px 16px;
          background-position: center;
          opacity: 0;
          transition: opacity 0.2s;
          border-radius: 4px;

          &.pinned {
            opacity: 1;
          }

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

        &:hover .task-pin-icon {
          opacity: 1;
        }

        .task-icon {
          width: 16px;
          height: 16px;
          flex-shrink: 0;
          background-image: var(--img-chat-task-add-icon);
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        .task-name {
          font-size: 14px;
          font-weight: 400;
          line-height: 1.4;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          flex: 1;
        }

        .task-right {
          display: flex;
          align-items: center;
          gap: 6px;
          flex-shrink: 0;
        }

        .task-time {
          font-size: 12px;
          color: #8b949e;
          flex-shrink: 0;
          white-space: nowrap;
        }

        .task-loading {
          width: 14px;
          height: 14px;
          flex-shrink: 0;
          border: 2px solid rgba(10, 132, 255, 0.2);
          border-top-color: rgba(10, 132, 255, 0.8);
          border-radius: 50%;
          animation: task-spin 0.8s linear infinite;
        }

        .task-delete {
          flex-shrink: 0;
          width: 28px;
          height: 28px;
          display: none;
          background-image: var(--img-chat-delete-icon);
          background-repeat: no-repeat;
          background-size: 16px 16px;
          background-position: center;
          transition: all 0.2s;
          border-radius: 4px;

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

        &:hover .task-time,
        &:hover .task-loading {
          display: none;
        }

        &:hover .task-delete {
          display: flex;
        }
      }

      .empty-hint {
        text-align: center;
        color: #8b949e;
        font-size: 13px;
        padding: 20px 0;
      }
    }

    @keyframes task-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .options-area {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(63, 80, 106, 0.3);

      .options-area-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        border-radius: 6px;
        padding: 6px 8px;
        transition: all 0.3s;

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

        .options-img {
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          background-image: var(--img-chat-options-icon-border);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: center;
        }

        .options-icon {
          width: 14px;
          height: 14px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: center;
        }

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

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

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

        &.options-schedules .options-icon {
          background-image: var(--img-chat-options-schedule-icon);
        }

        &.options-sub-agents .options-icon {
          background-image: var(--img-chat-options-sub-agent-icon);
        }

        .zxm-btn {
          font-size: 14px;
          padding: 0;
          height: auto;
          background: transparent !important;
          border: none;
          color: #e0e6ed;
          box-shadow: none;
        }
      }
    }
  }
</style>