X-Financial/web/src/components/logs/KnowledgeIngestRunPanel.vue

<template>
  <article class="knowledge-ingest-panel panel">
    <header class="ingest-head">
      <div>
        <span class="eyebrow">LightRAG 知识归集</span>
        <h3>{{ model.folder || '未指定目录' }}</h3>
        <p>{{ model.phaseLabel }} · {{ model.statusLabel }}</p>
      </div>
      <div class="progress-ring" :aria-label="`归集进度 ${model.progress.percent}%`">
        <strong>{{ model.progress.percent }}%</strong>
        <span>进度</span>
      </div>
    </header>

    <div class="progress-bar" aria-hidden="true">
      <span :style="{ width: `${model.progress.percent}%` }"></span>
    </div>

    <KnowledgeIngestRunInfo :run="props.run" :model="model" />

    <KnowledgeIngestGraphView :graph="model.graph" />
  </article>
</template>

<script setup>
import { computed } from 'vue'

import KnowledgeIngestGraphView from './KnowledgeIngestGraphView.vue'
import KnowledgeIngestRunInfo from './KnowledgeIngestRunInfo.vue'
import { buildKnowledgeIngestLogModel } from '../../utils/knowledgeIngestLogModel.js'

const props = defineProps({
  run: {
    type: Object,
    required: true
  }
})

const model = computed(() => buildKnowledgeIngestLogModel(props.run))
</script>

<style scoped>
.knowledge-ingest-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(1080px, 1fr);
  gap: 14px;
  height: clamp(1500px, calc(100dvh + 860px), 1880px);
  min-height: 1500px;
  padding: 18px;
  overflow: hidden;
}

.ingest-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.eyebrow {
  color: var(--theme-primary-active);
  font-size: 12px;
  font-weight: 800;
}

.ingest-head h3 {
  margin: 5px 0 0;
  color: #0f172a;
  font-size: 18px;
}

.ingest-head p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

.progress-ring {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #d7e0ea;
  border-radius: 50%;
  background: #f8fafc;
}

.progress-ring strong,
.progress-ring span {
  grid-area: 1 / 1;
}

.progress-ring strong {
  margin-top: -12px;
  color: #0f172a;
  font-size: 17px;
}

.progress-ring span {
  margin-top: 26px;
  color: #64748b;
  font-size: 11px;
}

.progress-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eaf0;
}

.progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--theme-primary-active), var(--theme-secondary));
  transition: width 0.24s ease;
}

@media (max-width: 980px) {
  .knowledge-ingest-panel {
    height: clamp(1460px, calc(100dvh + 840px), 1840px);
    min-height: 1460px;
  }
}

@media (max-width: 620px) {
  .ingest-head {
    flex-direction: column;
  }

  .progress-ring {
    width: 64px;
    height: 64px;
  }

  .knowledge-ingest-panel {
    height: clamp(1520px, calc(100dvh + 900px), 1900px);
    min-height: 1520px;
  }
}
</style>