ReportCenterView.vue
3.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<script setup lang="ts">
import { computed } from 'vue'
import ReportStudio from '@/components/report/ReportStudio.vue'
import { useWorkbenchControllerContext } from '@/composables/useWorkbenchController'
const controller = useWorkbenchControllerContext()
const completedReports = computed(() => (
controller.reports.status.value.tasks.filter((item) => item.status === 'completed').length
))
const generatingReports = computed(() => (
controller.reports.status.value.tasks.filter((item) => ['pending', 'running'].includes(item.status)).length
))
</script>
<template>
<section class="report-page">
<div class="report-header archive-shell-block">
<div class="report-header__copy">
<p class="archive-kicker">Delivery Studio</p>
<h2 class="archive-page-title">Report Center</h2>
<p class="archive-copy">
报告中心接住模板编排、任务生成、预览校对和下载交付四个动作。它不再是右侧的小面板，而是一整套可持续工作的编辑工作区。
</p>
</div>
<div class="report-header__stats">
<article class="archive-stat">
<p>Queue</p>
<strong>{{ controller.reports.status.value.tasks.length }}</strong>
<span>全部报告任务与历史成果。</span>
</article>
<article class="archive-stat">
<p>Generating</p>
<strong>{{ generatingReports }}</strong>
<span>仍在分析与拼装流程中的任务。</span>
</article>
<article class="archive-stat">
<p>Completed</p>
<strong>{{ completedReports }}</strong>
<span>已可下载 HTML / Markdown / PDF 的交付物。</span>
</article>
</div>
</div>
<ReportStudio
:status="controller.reports.status.value"
:selected-task="controller.reports.selectedTask.value"
:selected-task-id="controller.reports.selectedTaskId.value"
:custom-template="controller.reports.customTemplate.value"
:preview-url="controller.reports.previewUrl.value"
:loading="controller.reports.loading.value"
:generating="controller.reports.generating.value"
@update:selected-task-id="controller.updateSelectedReportTask"
@update:custom-template="controller.updateCustomTemplate"
@refresh="controller.refreshReports"
@generate="controller.generateReport"
@download="controller.reports.download"
/>
</section>
</template>
<style scoped>
.report-page,
.report-header,
.report-header__stats {
display: grid;
gap: 18px;
}
.report-page {
max-width: 1560px;
margin: 0 auto;
}
.report-header {
grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr);
padding: 30px;
border-radius: 30px;
background:
radial-gradient(circle at top right, rgba(141, 103, 56, 0.16), transparent 24%),
linear-gradient(135deg, rgba(255, 251, 246, 0.94), rgba(243, 236, 226, 0.92));
}
.report-header__copy {
display: grid;
gap: 14px;
}
.report-header__stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1360px) {
.report-header {
grid-template-columns: 1fr;
}
}
@media (max-width: 820px) {
.report-header,
.report-header__stats {
grid-template-columns: 1fr;
}
.report-header {
padding: 22px;
}
}
</style>