geo/apps/admin-web/src/components/KnowledgeDetailDrawer.vue

<script setup lang="ts">
import { useQuery, useQueryClient } from "@tanstack/vue-query";
import { computed, watch } from "vue";

import MarkdownPreview from "@/components/MarkdownPreview.vue";
import { knowledgeApi } from "@/lib/api";
import { formatDateTime } from "@/lib/display";

const props = defineProps<{
  open: boolean;
  itemId: number | null;
}>();

const emit = defineEmits<{
  close: [];
}>();

const queryClient = useQueryClient();
const enabled = computed(() => props.open && Boolean(props.itemId));

const detailQuery = useQuery({
  queryKey: computed(() => ["knowledge", "detail", props.itemId]),
  enabled,
  queryFn: () => knowledgeApi.detail(props.itemId as number),
});

const detail = computed(() => detailQuery.data.value);
const hasMarkdown = computed(() => Boolean(detail.value?.markdown_content?.trim()));
const isProcessing = computed(() =>
  detail.value?.status === "pending" || detail.value?.status === "processing",
);
const isFailed = computed(() => detail.value?.status === "failed");
const statusLabel = computed(() => formatKnowledgeStatus(detail.value?.status));
const statusColor = computed(() => {
  if (detail.value?.status === "completed") return "success";
  if (detail.value?.status === "failed") return "error";
  if (isProcessing.value) return "processing";
  return "default";
});

watch(
  [() => props.open, () => props.itemId, () => detail.value?.status],
  ([open, itemId, status], _prev, onCleanup) => {
    if (!open || !itemId || (status !== "pending" && status !== "processing")) {
      return;
    }

    const timer = window.setInterval(() => {
      void Promise.all([
        detailQuery.refetch(),
        queryClient.invalidateQueries({ queryKey: ["knowledge", "items"] }),
      ]);
    }, 2500);

    onCleanup(() => {
      window.clearInterval(timer);
    });
  },
  { immediate: true },
);

function handleClose(): void {
  emit("close");
}

function formatKnowledgeStatus(status?: string): string {
  switch (status) {
    case "completed":
      return "学习完成";
    case "processing":
      return "处理中";
    case "failed":
      return "解析失败";
    case "pending":
      return "待处理";
    case "deleted":
      return "已删除";
    default:
      return status || "未知状态";
  }
}
</script>

<template>
  <a-drawer
    :open="open"
    width="760"
    title="知识详情"
    class="knowledge-detail-drawer"
    @close="handleClose"
  >
    <div v-if="detailQuery.isPending.value" class="knowledge-detail-drawer__loading">
      <a-skeleton active :paragraph="{ rows: 10 }" />
    </div>

    <template v-else-if="detail">
      <section class="knowledge-detail-drawer__hero">
        <div>
          <h2>{{ detail.name }}</h2>
          <div class="knowledge-detail-drawer__meta">
            <span>{{ detail.group_name }}</span>
            <span>{{ formatDateTime(detail.created_at) }}</span>
            <span v-if="detail.source_uri">{{ detail.source_uri }}</span>
          </div>
        </div>
        <a-tag :color="statusColor">{{ statusLabel }}</a-tag>
      </section>

      <a-alert
        v-if="isProcessing"
        type="info"
        show-icon
        message="处理中"
        description="内容正在解析并整理为 Markdown，抽屉会自动刷新。"
        class="knowledge-detail-drawer__alert"
      />

      <a-alert
        v-else-if="isFailed"
        type="error"
        show-icon
        message="解析失败"
        :description="detail.error_message || '当前内容解析失败，请稍后重试。'"
        class="knowledge-detail-drawer__alert"
      />

      <div v-if="hasMarkdown" class="knowledge-detail-drawer__content">
        <MarkdownPreview :content="detail.markdown_content || ''" />
      </div>
      <a-empty v-else description="无可预览文本" />
    </template>

    <a-result
      v-else
      status="404"
      title="未找到知识内容"
      sub-title="该内容可能已删除，或当前租户无权访问。"
    />
  </a-drawer>
</template>

<style scoped>
.knowledge-detail-drawer__loading {
  padding-top: 8px;
}

.knowledge-detail-drawer__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.knowledge-detail-drawer__hero h2 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 22px;
  font-weight: 700;
}

.knowledge-detail-drawer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: #6b7280;
  font-size: 13px;
}

.knowledge-detail-drawer__alert {
  margin-bottom: 16px;
}

.knowledge-detail-drawer__content {
  padding: 20px 24px;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  background: #fff;
}
</style>