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 v-if="activeOption === 'search'" class="search-header">
      <a-input v-model:value="searchKeyword" placeholder="搜索任务名称..." allow-clear size="small" class="search-input" />
    </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)"
      >
        <span class="task-name">{{ task.name }}</span>
        <div class="task-right">
          <span class="task-time">{{ formatRelativeTime(task.updatedAt) }}</span>
          <div class="task-delete" @click.stop="emit('delete-task', task, index)">
            <DeleteOutlined />
          </div>
        </div>
      </div>
      <div v-if="activeOption === 'search' && searchKeyword && filteredTaskList.length === 0" class="empty-hint"> 未找到匹配的任务 </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue';
  import { DeleteOutlined } from '@ant-design/icons-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;
  }>();

  type OptionType = 'add' | 'search' | 'skill';

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

  const optionItems = [
    { type: 'add' as OptionType, label: '新建任务' },
    { type: 'search' as OptionType, label: '搜索' },
    { type: 'skill' as OptionType, label: '技能' },
  ];

  const filteredTaskList = computed(() => {
    if (activeOption.value !== 'search' || !searchKeyword.value.trim()) {
      return props.taskList;
    }
    const keyword = searchKeyword.value.trim().toLowerCase();
    return props.taskList.filter((task) => task.name.toLowerCase().includes(keyword));
  });

  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') {
      // TODO: 技能点击事件
    } else {
      activeOption.value = type;
      searchKeyword.value = '';
    }
  };
</script>

<style scoped lang="less">
  .task-list-panel {
    width: 260px;
    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;
        }
      }
    }

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

      .task-item {
        height: 36px;
        display: flex;
        align-items: center;
        gap: 10px;
        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-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-time {
          font-size: 12px;
          color: #8b949e;
          flex-shrink: 0;
          white-space: nowrap;
        }

        .task-delete {
          flex-shrink: 0;
          width: 28px;
          height: 28px;
          display: none;
          align-items: center;
          justify-content: center;
          border-radius: 4px;
          color: #8b949e;
          font-size: 14px;
          transition: all 0.2s;

          &:hover {
            color: #ff4d4f;
            background: rgba(220, 38, 38, 0.1);
          }
        }

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

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

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

    .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);
        }

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