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

<template>
  <div class="schedule-detail-panel">
    <div v-if="!hideHeader" class="schedule-detail-header">
      <span class="schedule-detail-title">定时任务</span>
      <div class="schedule-detail-close" @click="emit('close')">
        <div class="close-icon"></div>
      </div>
    </div>

    <div class="schedule-detail-body" v-if="task">
      <!-- 任务卡片 -->
      <div class="detail-task-card">
        <div class="detail-task-name">
          <div class="detail-task-icon"></div>
          <span class="detail-task-name-text">{{ task.name }}</span>
          <div class="detail-task-actions">
            <a-switch :checked="task.enabled" size="small" class="schedule-switch" @change="handleToggle" />
            <div class="more-btn-wrapper" ref="morePopupRef">
              <div class="detail-more-btn" @click="toggleMorePopup"></div>
              <div v-if="showMorePopup" class="more-popup" @click.stop>
                <div class="more-menu">
                  <div class="more-menu-item" :class="{ disabled: !task.enabled }" @click="handleAction('run')">
                    <div class="more-menu-icon run-icon"></div>
                    <span>立即执行</span>
                  </div>
                  <div class="more-menu-item" @click="handleAction('edit')">
                    <div class="more-menu-icon edit-icon"></div>
                    <span>编辑</span>
                  </div>
                  <div class="more-menu-item delete" @click="handleAction('delete')">
                    <div class="more-menu-icon delete-icon"></div>
                    <span>删除</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-task-prompt">{{ task.prompt }}</div>
        <div class="detail-task-meta">
          <div class="detail-task-cron">
            <span class="info-label">执行计划：</span>
            <span class="info-value">{{ task.cron_human || task.cron_expr }}</span>
          </div>
          <div v-if="task.next_run_at" class="detail-task-next">
            <span class="info-label">下次执行：</span>
            <span class="info-value">{{ task.next_run_at }}</span>
          </div>
        </div>
      </div>

      <!-- 执行历史 -->
      <div class="detail-history-section">
        <div class="detail-history-title">
          <span>执行历史</span>
          <span v-if="historyStats" class="history-stats">
            <span class="stats-total">共{{ historyStats.total }}次</span>
            <span class="stats-sep">·</span>
            <span class="stats-success">{{ historyStats.success }}次成功</span>
            <span class="stats-sep">·</span>
            <span class="stats-failed">{{ historyStats.failed }}次失败</span>
          </span>
        </div>
        <div class="detail-history-list" v-if="!historyLoading">
          <template v-if="historyList.length">
            <div v-for="run in historyList" :key="run.id" class="history-item">
              <div class="history-item-header">
                <a-tag :color="runStatusColor(run.status)" class="history-status">{{ runStatusLabel(run.status) }}</a-tag>
                <span class="history-time">{{ run.started_at }}</span>
                <span v-if="run.duration_ms" class="history-duration">{{ (run.duration_ms / 1000).toFixed(0) }}s</span>
              </div>
              <div v-if="run.output" class="history-output">{{ run.output }}</div>
              <div v-if="run.error" class="history-error">{{ run.error }}</div>
            </div>
          </template>
          <div v-else class="history-empty">暂无执行记录</div>
        </div>
        <div v-else class="detail-history-loading">
          <a-spin size="small" />
        </div>
      </div>
    </div>

    <CreateScheduleModal :visible="showEditModal" :editData="editData" @close="showEditModal = false" @updated="refreshHistory" />
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { onClickOutside } from '@vueuse/core';
  import { message, Modal } from 'ant-design-vue';
  import { getScheduleRuns, pauseSchedule, resumeSchedule, deleteSchedule } from '../../api';
  import CreateScheduleModal from './CreateScheduleModal.vue';
  import type { ScheduleTask } from './types';

  const props = defineProps<{ task: ScheduleTask | null; hideHeader?: boolean }>();
  const emit = defineEmits<{
    (e: 'close'): void;
    (e: 'deleted'): void;
    (e: 'updated'): void;
    (e: 'open-session', sessionId: string, prompt: string): void;
  }>();

  const morePopupRef = ref<HTMLElement>();
  const showMorePopup = ref(false);
  const showEditModal = ref(false);
  const editData = ref<ScheduleTask | null>(null);

  const toggleMorePopup = () => {
    showMorePopup.value = !showMorePopup.value;
  };

  onClickOutside(morePopupRef, () => {
    showMorePopup.value = false;
  });

  watch(showEditModal, (val) => {
    if (!val) editData.value = null;
  });

  const handleToggle = async () => {
    if (!props.task) return;
    try {
      if (props.task.enabled) {
        await pauseSchedule(props.task.id);
        message.success(`已暂停任务「${props.task.name}」`);
      } else {
        await resumeSchedule(props.task.id);
        message.success(`已恢复任务「${props.task.name}」`);
      }
      props.task.enabled = !props.task.enabled; // eslint-disable-line vue/no-mutating-props
      emit('updated');
    } catch {
      message.error('操作失败');
    }
  };

  const handleRunNow = async () => {
    if (!props.task || !props.task.enabled) return;
    if (props.task.feedback_session_id) {
      emit('open-session', props.task.feedback_session_id, props.task.prompt);
    } else {
      message.warning('该任务暂无关联会话');
    }
  };

  const handleEdit = () => {
    if (!props.task) return;
    editData.value = props.task;
    showEditModal.value = true;
  };

  const handleDelete = () => {
    if (!props.task) return;
    const taskName = props.task.name;
    const taskId = props.task.id;
    Modal.confirm({
      title: '提示',
      content: `是否删除定时任务「${taskName}」？`,
      okText: '确认',
      cancelText: '取消',
      wrapClassName: 'delete-task-confirm-modal',
      onOk: async () => {
        try {
          await deleteSchedule(taskId);
          message.success('删除成功');
          emit('deleted');
        } catch {
          message.error('删除失败');
        }
      },
    });
  };

  const handleAction = (action: 'run' | 'edit' | 'delete') => {
    showMorePopup.value = false;
    if (action === 'run') handleRunNow();
    else if (action === 'edit') handleEdit();
    else if (action === 'delete') handleDelete();
  };

  const refreshHistory = () => {
    if (props.task) fetchHistory(props.task.id);
    emit('updated');
  };

  const historyList = ref<any[]>([]);
  const historyLoading = ref(false);
  const historyStats = ref<{ total: number; success: number; failed: number } | null>(null);

  const fetchHistory = async (taskId: number) => {
    historyLoading.value = true;
    try {
      const res = await getScheduleRuns(taskId);
      const runs = res?.runs || (Array.isArray(res) ? res : []);
      historyList.value = runs;
      historyStats.value = {
        total: res?.total ?? runs.length,
        success: runs.filter((r: any) => r.status === 'success').length,
        failed: runs.filter((r: any) => r.status === 'failed').length,
      };
    } catch {
      historyList.value = [];
      historyStats.value = null;
    } finally {
      historyLoading.value = false;
    }
  };

  const runStatusLabel = (status: string) => {
    const map: Record<string, string> = { running: '执行中', success: '成功', failed: '失败', skipped: '跳过' };
    return map[status] || status;
  };

  const runStatusColor = (status: string) => {
    const map: Record<string, string> = { running: 'blue', success: 'green', failed: 'red', skipped: 'default' };
    return map[status] || 'default';
  };

  watch(
    () => props.task,
    (newTask) => {
      if (newTask) {
        fetchHistory(newTask.id);
      } else {
        historyList.value = [];
        historyStats.value = null;
      }
    },
    { immediate: true }
  );
</script>

<style scoped lang="less">
  .schedule-detail-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    // background-image: var(--img-chat-panel-bg);
    // background-repeat: no-repeat;
    // background-size: 100% 100%;
    border-radius: 4px;
  }

  .schedule-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgb(63 80 106 / 25%);
    flex-shrink: 0;

    .schedule-detail-title {
      font-size: 16px;
      font-weight: 600;
      color: #e8edf3;
      letter-spacing: 1px;
    }

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

      &:hover {
        background: rgb(255 77 79 / 15%);
      }

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

  .schedule-detail-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px;
    overflow: hidden;
    gap: 16px;
  }

  /* 任务卡片 */
  .detail-task-card {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border: 1px solid rgb(63 80 106 / 15%);
    background: rgb(10 132 255 / 3%);
    border-radius: 8px;
    gap: 10px;
  }

  .detail-task-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #e8edf3;

    .detail-task-name-text {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .detail-task-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .detail-more-btn {
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 4px;
    background-image: var(--img-chat-schedule-more-icon);
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: center;
    transition: background-color 0.2s;

    &:hover {
      background-color: rgb(10 132 255 / 15%);
    }
  }

  .schedule-switch {
    :deep(.zxm-switch) {
      min-width: 36px;
      height: 20px;
      background: rgb(63 80 106 / 50%);

      &::after {
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        background: #fff;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 50%;
        box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
      }

      &.zxm-switch-checked {
        background: rgb(10 132 255 / 60%);

        &::after {
          left: calc(100% - 18px);
        }
      }
    }
  }

  .detail-task-icon {
    width: 20px;
    height: 20px;
    background-image: var(--img-chat-options-schedule-icon);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    opacity: 0.8;
  }

  .detail-task-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
  }

  .detail-task-cron,
  .detail-task-next {
    .info-label {
      color: #6a7a8a;
    }

    .info-value {
      color: #5cb8ff;
    }
  }

  .detail-task-prompt {
    font-size: 13px;
    color: #8b949e;
    line-height: 1.6;
    max-height: 120px;
    overflow-y: auto;
    word-break: break-all;

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgb(63 80 106 / 40%);
      border-radius: 2px;
    }
  }

  /* 执行历史 */
  .detail-history-section {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    gap: 10px;
  }

  .detail-history-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: #e8edf3;

    .history-stats {
      display: inline-flex;
      align-items: center;
      gap: 0;
      font-size: 11px;
      font-weight: 400;
      line-height: 1.5;

      .stats-total {
        color: #8b949e;
      }

      .stats-sep {
        margin: 0 4px;
        color: #4a5568;
      }

      .stats-success {
        color: #52c41a;
      }

      .stats-failed {
        color: #ff7875;
      }
    }
  }

  .detail-history-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgb(63 80 106 / 40%);
      border-radius: 2px;
    }
  }

  .detail-history-loading {
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }

  .history-item {
    padding: 10px 12px;
    border: 1px solid rgb(63 80 106 / 15%);
    background: rgb(10 132 255 / 4%);
    border-radius: 6px;
  }

  .history-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;

    .history-status {
      font-size: 12px;
    }

    .history-time {
      font-size: 12px;
      color: #6a7a8a;
    }

    .history-duration {
      font-size: 12px;
      color: #8b949e;
      margin-left: auto;
    }
  }

  .history-output {
    display: -webkit-box;
    color: #c9d1d9;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.6;
    max-height: 60px;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .history-error {
    font-size: 12px;
    color: #ff7875;
    line-height: 1.6;
  }

  .history-empty {
    padding: 8px 0;
    color: #6a7a8a;
    text-align: center;
    font-size: 12px;
  }
</style>

<style scoped lang="less">
  .more-btn-wrapper {
    position: relative;
  }

  .more-popup {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    padding: 4px;
    border: 1px solid rgb(63 80 106 / 40%);
    background: linear-gradient(135deg, #0a1628 0%, #0d2137 50%, #0a1e35 100%);
    margin-top: 4px;
    border-radius: 8px;
    min-width: 120px;
  }

  .more-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;

    .more-menu-item {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      color: #e0e6ed;
      cursor: pointer;
      transition: background 0.2s;
      gap: 8px;
      border-radius: 6px;
      font-size: 13px;

      &:hover {
        background: rgb(10 132 255 / 15%);
      }

      &.delete {
        color: #ff7875;

        &:hover {
          background: rgb(255 77 79 / 10%);
        }
      }

      &.disabled {
        cursor: not-allowed;
        opacity: 0.4;
        pointer-events: none;
      }

      .more-menu-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        background-repeat: no-repeat;
        background-size: 14px 14px;
        background-position: center;

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

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

        &.delete-icon {
          background-image: var(--img-chat-delete-icon);
        }
      }
    }
  }
</style>