Add monitoring service and database schema
- Implement monitoring service with heartbeat, lease tasks, resume tasks, and task result handling. - Create monitoring time utilities for business date calculations. - Add unit tests for date window resolution and business day handling. - Define database schema for monitoring-related tables including quotas, daily reports, and task management. - Establish migration scripts for creating and dropping monitoring tables.
This commit is contained in:
@@ -0,0 +1,943 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeftOutlined } from "@ant-design/icons-vue";
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import dayjs from "dayjs";
|
||||
import type {
|
||||
MonitoringQuestionCitationAnalysisItem,
|
||||
MonitoringQuestionContentCitation,
|
||||
MonitoringQuestionDetailCitation,
|
||||
MonitoringQuestionDetailPlatform,
|
||||
} from "@geo/shared-types";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
import MarkdownPreview from "@/components/MarkdownPreview.vue";
|
||||
import { monitoringApi } from "@/lib/api";
|
||||
import { formatDateTime } from "@/lib/display";
|
||||
import { formatError } from "@/lib/errors";
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const trackingMaxHistoryDays = 30;
|
||||
const trackingToday = dayjs().format("YYYY-MM-DD");
|
||||
|
||||
const brandId = computed(() => parsePositiveNumber(route.params.brandId));
|
||||
const questionId = computed(() => parsePositiveNumber(route.params.questionId));
|
||||
const questionHash = computed(() => normalizeQueryValue(route.query.question_hash));
|
||||
const questionTitleFallback = computed(() => normalizeQueryValue(route.query.question_text));
|
||||
const keywordId = computed(() => normalizeQueryValue(route.query.keyword_id));
|
||||
const businessDate = computed(() => normalizeTrackingBusinessDate(route.query.business_date) || trackingToday);
|
||||
const dateFrom = computed(() => {
|
||||
return normalizeQueryValue(route.query.date_from) || businessDate.value;
|
||||
});
|
||||
const dateTo = computed(() => {
|
||||
return normalizeQueryValue(route.query.date_to) || businessDate.value;
|
||||
});
|
||||
|
||||
const detailQuery = useQuery({
|
||||
queryKey: computed(() => [
|
||||
"tracking",
|
||||
"question-detail-page",
|
||||
brandId.value,
|
||||
questionId.value,
|
||||
questionHash.value,
|
||||
dateFrom.value,
|
||||
dateTo.value,
|
||||
]),
|
||||
enabled: computed(() => Boolean(brandId.value && questionId.value)),
|
||||
queryFn: () =>
|
||||
monitoringApi.questionDetail(brandId.value as number, questionId.value as number, {
|
||||
date_from: dateFrom.value,
|
||||
date_to: dateTo.value,
|
||||
question_hash: questionHash.value || undefined,
|
||||
}),
|
||||
});
|
||||
|
||||
const activePlatformId = ref("");
|
||||
|
||||
watch(
|
||||
() => detailQuery.data.value?.platforms,
|
||||
(platforms) => {
|
||||
if (!platforms?.length) {
|
||||
activePlatformId.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const requestedPlatformId = normalizeQueryValue(route.query.ai_platform_id);
|
||||
const requestedPlatform = requestedPlatformId
|
||||
? platforms.find((item) => item.ai_platform_id === requestedPlatformId)
|
||||
: null;
|
||||
const sampledPlatform = platforms.find((item) => item.sample_status === "sampled");
|
||||
const nextPlatform = requestedPlatform ?? sampledPlatform ?? platforms[0];
|
||||
|
||||
if (!platforms.some((item) => item.ai_platform_id === activePlatformId.value)) {
|
||||
activePlatformId.value = nextPlatform.ai_platform_id;
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const pageTitle = computed(() => {
|
||||
return detailQuery.data.value?.question_text ?? questionTitleFallback.value ?? t("tracking.questionDetailFallback");
|
||||
});
|
||||
|
||||
const activePlatform = computed<MonitoringQuestionDetailPlatform | null>(() => {
|
||||
return detailQuery.data.value?.platforms.find((item) => item.ai_platform_id === activePlatformId.value) ?? null;
|
||||
});
|
||||
|
||||
const activeCitationAnalysis = computed<MonitoringQuestionCitationAnalysisItem[]>(() => {
|
||||
const items = detailQuery.data.value?.citation_analysis ?? [];
|
||||
if (!activePlatformId.value) {
|
||||
return items;
|
||||
}
|
||||
return items.filter((item) => item.ai_platform_id === activePlatformId.value);
|
||||
});
|
||||
|
||||
const activeContentCitations = computed<MonitoringQuestionContentCitation[]>(() => {
|
||||
const items = detailQuery.data.value?.content_citations ?? [];
|
||||
return items.filter((item) => item.ai_platform_id === activePlatformId.value);
|
||||
});
|
||||
|
||||
const latestSampledAt = computed<string | null>(() => {
|
||||
const platforms = detailQuery.data.value?.platforms ?? [];
|
||||
const sampledAtValues = platforms
|
||||
.map((item) => item.sampled_at)
|
||||
.filter((value): value is string => Boolean(value));
|
||||
|
||||
if (!sampledAtValues.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return sampledAtValues.reduce((latest, current) => {
|
||||
if (!latest) {
|
||||
return current;
|
||||
}
|
||||
return dayjs(current).isAfter(dayjs(latest)) ? current : latest;
|
||||
}, sampledAtValues[0] ?? null);
|
||||
});
|
||||
|
||||
const collectedAtDisplay = computed(() => {
|
||||
const sampledAt = activePlatform.value?.sampled_at || latestSampledAt.value;
|
||||
return sampledAt ? formatDateTime(sampledAt) : "--";
|
||||
});
|
||||
|
||||
function goBack(): void {
|
||||
void router.push({
|
||||
name: "tracking",
|
||||
query: {
|
||||
brand_id: brandId.value ? String(brandId.value) : undefined,
|
||||
keyword_id: keywordId.value || undefined,
|
||||
business_date: businessDate.value,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function formatPercent(value: number | null | undefined): string {
|
||||
if (value === null || value === undefined) {
|
||||
return "--";
|
||||
}
|
||||
return `${(value * 100).toFixed(2)}%`;
|
||||
}
|
||||
|
||||
function statusTagColor(status: string): string {
|
||||
switch (status) {
|
||||
case "sampled":
|
||||
return "green";
|
||||
case "pending":
|
||||
return "gold";
|
||||
case "not_logged_in":
|
||||
return "default";
|
||||
case "unavailable":
|
||||
return "red";
|
||||
default:
|
||||
return "default";
|
||||
}
|
||||
}
|
||||
|
||||
function statusLabel(status: string): string {
|
||||
return t(`tracking.status.${status}`);
|
||||
}
|
||||
|
||||
function resolveCitationTitle(citation: MonitoringQuestionDetailCitation): string {
|
||||
return citation.cited_title || citation.article_title || citation.cited_url;
|
||||
}
|
||||
|
||||
function normalizeQueryValue(value: unknown): string {
|
||||
const raw = Array.isArray(value) ? value[0] : value;
|
||||
return String(raw ?? "").trim();
|
||||
}
|
||||
|
||||
function normalizeTrackingBusinessDate(value: unknown): string | null {
|
||||
const normalized = normalizeQueryValue(value);
|
||||
if (!normalized) {
|
||||
return null;
|
||||
}
|
||||
const parsed = dayjs(normalized);
|
||||
if (!parsed.isValid() || parsed.format("YYYY-MM-DD") !== normalized) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const today = dayjs().startOf("day");
|
||||
const earliestAllowed = today.subtract(trackingMaxHistoryDays - 1, "day");
|
||||
if (parsed.isAfter(today, "day") || parsed.isBefore(earliestAllowed, "day")) {
|
||||
return null;
|
||||
}
|
||||
return normalized;
|
||||
}
|
||||
|
||||
function parsePositiveNumber(value: unknown): number | null {
|
||||
const raw = Array.isArray(value) ? value[0] : value;
|
||||
const parsed = Number(raw);
|
||||
if (!Number.isFinite(parsed) || parsed <= 0) {
|
||||
return null;
|
||||
}
|
||||
return parsed;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="tracking-question-page">
|
||||
<div class="tracking-question-page__hero">
|
||||
<div class="tracking-question-page__header-top">
|
||||
<button type="button" class="tracking-question-page__back" @click="goBack">
|
||||
<ArrowLeftOutlined />
|
||||
<span>{{ t("tracking.backToQuestions") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tracking-question-page__copy">
|
||||
<p class="tracking-question-page__eyebrow">{{ t("tracking.questionDetailEyebrow") }}</p>
|
||||
<h1>{{ pageTitle }}</h1>
|
||||
<p class="tracking-question-page__meta">
|
||||
{{ t("tracking.questionDetailCollectedAt", { time: collectedAtDisplay }) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-alert
|
||||
v-if="detailQuery.error.value"
|
||||
type="error"
|
||||
show-icon
|
||||
:message="formatError(detailQuery.error.value)"
|
||||
class="tracking-question-page__alert"
|
||||
/>
|
||||
|
||||
<a-spin :spinning="detailQuery.isLoading.value">
|
||||
<div class="tracking-question-page__content">
|
||||
<div class="tracking-question-page__tabs-wrapper">
|
||||
<a-tabs
|
||||
v-model:activeKey="activePlatformId"
|
||||
size="large"
|
||||
class="tracking-question-tabs"
|
||||
>
|
||||
<a-tab-pane
|
||||
v-for="platform in detailQuery.data.value?.platforms ?? []"
|
||||
:key="platform.ai_platform_id"
|
||||
>
|
||||
<template #tab>
|
||||
<span :class="platform.sample_status !== 'sampled' ? 'is-muted' : ''">
|
||||
{{ platform.platform_name }}
|
||||
</span>
|
||||
</template>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
||||
<div class="tracking-question-grid">
|
||||
<section class="tracking-question-card tracking-question-card--answer">
|
||||
<div class="tracking-question-card__header">
|
||||
<div class="tracking-question-card__section-title">
|
||||
<span class="tracking-question-card__accent" />
|
||||
<span>{{ t("tracking.answerContent") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tracking-question-card__body">
|
||||
<div class="tracking-question-answer__headline">
|
||||
<h2>{{ activePlatform?.platform_name ?? t("common.noData") }}</h2>
|
||||
<a-tag :color="statusTagColor(activePlatform?.sample_status ?? 'pending')">
|
||||
{{ statusLabel(activePlatform?.sample_status ?? 'pending') }}
|
||||
</a-tag>
|
||||
</div>
|
||||
|
||||
<div class="tracking-question-answer__content custom-scrollbar">
|
||||
<MarkdownPreview
|
||||
v-if="activePlatform?.answer_text"
|
||||
:content="activePlatform.answer_text"
|
||||
/>
|
||||
<a-empty v-else :description="t('tracking.noAnswer')" />
|
||||
</div>
|
||||
|
||||
<div class="tracking-question-answer__meta">
|
||||
<span>{{ activePlatform?.sampled_at ? formatDateTime(activePlatform.sampled_at) : "--" }}</span>
|
||||
<span>{{ activePlatform?.provider_model ?? "--" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="tracking-question-card">
|
||||
<div class="tracking-question-card__header">
|
||||
<div class="tracking-question-card__section-title">
|
||||
<span class="tracking-question-card__accent" />
|
||||
<span>{{ t("tracking.citationSourcesTitle") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tracking-question-card__scroll-area custom-scrollbar">
|
||||
<div v-if="activePlatform?.citations?.length" class="tracking-question-source-list">
|
||||
<a
|
||||
v-for="citation in activePlatform.citations"
|
||||
:key="citation.cited_url"
|
||||
:href="citation.cited_url"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="tracking-question-source-card"
|
||||
>
|
||||
<div class="tracking-question-source-card__headline">
|
||||
<strong>{{ citation.site_name }}</strong>
|
||||
<span class="tracking-question-source-card__divider" v-if="resolveCitationTitle(citation)">·</span>
|
||||
<span class="tracking-question-source-card__title" :title="resolveCitationTitle(citation)">{{ resolveCitationTitle(citation) }}</span>
|
||||
<a-tag v-if="citation.article_id" color="blue" class="tracking-question-source-card__badge">{{ t("tracking.contentCitationBadge") }}</a-tag>
|
||||
</div>
|
||||
<div class="tracking-question-source-card__link">
|
||||
{{ citation.cited_url }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<a-empty v-else :description="t('tracking.noCitations')" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="tracking-question-card">
|
||||
<div class="tracking-question-card__header">
|
||||
<div class="tracking-question-card__section-title">
|
||||
<span class="tracking-question-card__accent" />
|
||||
<span>{{ t("tracking.citationAnalysisTitle") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tracking-question-card__scroll-area custom-scrollbar">
|
||||
<div v-if="activeCitationAnalysis.length" class="tracking-question-table">
|
||||
<div class="tracking-question-table__head">
|
||||
<span>{{ t("tracking.columns.sourcePlatform") }}</span>
|
||||
<span>{{ t("tracking.columns.domain") }}</span>
|
||||
<span>{{ t("tracking.columns.citations") }}</span>
|
||||
<span>{{ t("tracking.columns.share") }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="item in activeCitationAnalysis"
|
||||
:key="`${item.ai_platform_id}-${item.site_key}`"
|
||||
class="tracking-question-table__row"
|
||||
>
|
||||
<span class="tracking-question-table__primary">
|
||||
<strong>{{ item.site_name }}</strong>
|
||||
<small v-if="item.content_citation_count > 0">
|
||||
{{ t("tracking.contentCitationMeta", { count: item.content_citation_count }) }}
|
||||
</small>
|
||||
</span>
|
||||
<span class="tracking-question-table__secondary">{{ item.site_domain || item.site_key }}</span>
|
||||
<span>{{ item.citation_count }}</span>
|
||||
<strong>{{ formatPercent(item.citation_rate) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<a-empty v-else :description="t('tracking.noCitationAnalysis')" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="tracking-question-card">
|
||||
<div class="tracking-question-card__header">
|
||||
<div class="tracking-question-card__section-title">
|
||||
<span class="tracking-question-card__accent" />
|
||||
<span>{{ t("tracking.contentCitationsTitle") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tracking-question-card__scroll-area custom-scrollbar">
|
||||
<div v-if="activeContentCitations.length" class="tracking-question-table">
|
||||
<div
|
||||
class="tracking-question-table__head"
|
||||
>
|
||||
<span>{{ t("tracking.columns.contentName") }}</span>
|
||||
<span>{{ t("tracking.columns.publishPlatform") }}</span>
|
||||
<span>{{ t("tracking.columns.citations") }}</span>
|
||||
<span>{{ t("tracking.columns.share") }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="item in activeContentCitations"
|
||||
:key="`${item.ai_platform_id}-${item.article_id}`"
|
||||
class="tracking-question-table__row"
|
||||
>
|
||||
<div class="tracking-question-table__primary">
|
||||
<router-link :to="`/articles/${item.article_id}/edit`">{{ item.article_title }}</router-link>
|
||||
</div>
|
||||
<span class="tracking-question-table__secondary">{{ item.publish_platform }}</span>
|
||||
<div class="tracking-question-table__metric">
|
||||
<span>{{ item.citation_count }}</span>
|
||||
</div>
|
||||
<div class="tracking-question-table__metric">
|
||||
<strong>{{ formatPercent(item.citation_rate) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-empty v-else :description="t('tracking.noContentCitations')" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tracking-question-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tracking-question-page__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tracking-question-page__hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 24px 32px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e8edf5;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
}
|
||||
|
||||
.tracking-question-page__header-top {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tracking-question-page__back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
height: 32px;
|
||||
padding: 0 12px 0 8px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.tracking-question-page__back:hover {
|
||||
background: #e2e8f0;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.tracking-question-page__copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tracking-question-page__eyebrow {
|
||||
margin: 0;
|
||||
color: #2563eb;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tracking-question-page__copy h1 {
|
||||
margin: 0;
|
||||
color: #0f172a;
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.tracking-question-page__meta {
|
||||
margin: 8px 0 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
background: #f1f5f9;
|
||||
border-radius: 6px;
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.tracking-question-page__alert {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.tracking-question-page__tabs-wrapper {
|
||||
background: #ffffff;
|
||||
padding: 4px 24px 0;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #e8edf5;
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
|
||||
}
|
||||
|
||||
.tracking-question-tabs :deep(.ant-tabs-nav) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tracking-question-tabs .is-muted {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.tracking-question-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
|
||||
grid-auto-rows: 800px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tracking-question-card {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px 28px;
|
||||
border: 1px solid #e8edf5;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
|
||||
}
|
||||
|
||||
.tracking-question-card--answer {
|
||||
/* removed min-height, grid-auto-rows handles this universally */
|
||||
}
|
||||
|
||||
.tracking-question-card__header {
|
||||
margin-bottom: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tracking-question-card__header--split {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.tracking-question-card__section-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
color: #111827;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tracking-question-card__accent {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.tracking-question-card__hint {
|
||||
margin: 0;
|
||||
max-width: 420px;
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.tracking-question-card__body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tracking-question-card__scroll-area {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
margin-right: -12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.tracking-question-answer__headline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tracking-question-answer__content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
margin-right: -12px;
|
||||
padding-right: 12px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #e2e8f0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
.tracking-question-answer__headline h2 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.tracking-question-answer__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 18px;
|
||||
margin-top: auto;
|
||||
padding-top: 18px;
|
||||
color: #9ca3af;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tracking-question-source-list,
|
||||
.tracking-question-content-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.tracking-question-source-card,
|
||||
.tracking-question-content-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 10px;
|
||||
background: #f8fbff;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tracking-question-source-card:hover,
|
||||
.tracking-question-content-card:hover {
|
||||
border-color: #dbeafe;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.05);
|
||||
}
|
||||
|
||||
.tracking-question-source-card__headline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tracking-question-source-card__headline strong {
|
||||
display: block;
|
||||
color: #2563eb;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tracking-question-source-card__divider {
|
||||
color: #cbd5e1;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tracking-question-source-card__title {
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tracking-question-source-card__badge {
|
||||
margin: 0;
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tracking-question-source-card__link {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tracking-question-content-card__copy a {
|
||||
color: #2563eb;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tracking-question-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tracking-question-table__head,
|
||||
.tracking-question-table__row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) 92px 92px;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.tracking-question-table__head {
|
||||
color: #9ca3af;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.tracking-question-table__row {
|
||||
color: #4b5563;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.tracking-question-table__row:last-child {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.tracking-question-table__primary {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tracking-question-table__primary strong,
|
||||
.tracking-question-table__primary a {
|
||||
color: #111827;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tracking-question-table__primary small {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.tracking-question-table__secondary {
|
||||
color: #94a3b8;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.tracking-question-table__metric {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.tracking-question-table__metric strong,
|
||||
.tracking-question-table__row > strong {
|
||||
color: #4b5563;
|
||||
font-size: 16px;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.tracking-question-card--debug {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.tracking-task-debug-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.tracking-task-debug-card {
|
||||
padding: 20px 22px;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
|
||||
}
|
||||
|
||||
.tracking-task-debug-card__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.tracking-task-debug-card__headline {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tracking-task-debug-card__headline strong {
|
||||
color: #111827;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tracking-task-debug-card__headline small {
|
||||
color: #94a3b8;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.tracking-task-debug-card__tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tracking-task-debug-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.tracking-task-debug-grid__item {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.tracking-task-debug-grid__item span {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tracking-task-debug-grid__item strong {
|
||||
color: #1f2937;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.tracking-task-debug-notes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.tracking-task-debug-notes__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.tracking-task-debug-notes__item span {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tracking-task-debug-notes__item strong {
|
||||
color: #1f2937;
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.tracking-task-debug-notes__item.is-error {
|
||||
background: #fff7f7;
|
||||
}
|
||||
|
||||
.tracking-task-debug-notes__item.is-error strong {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.tracking-question-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.tracking-task-debug-grid,
|
||||
.tracking-task-debug-notes {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.tracking-question-page__hero {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tracking-question-page__copy h1 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.tracking-question-card {
|
||||
padding: 22px 18px;
|
||||
}
|
||||
|
||||
.tracking-question-card__header--split,
|
||||
.tracking-task-debug-card__header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tracking-question-card__hint,
|
||||
.tracking-task-debug-card__tags {
|
||||
max-width: none;
|
||||
text-align: left;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.tracking-question-table__head,
|
||||
.tracking-question-table__row {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.tracking-question-source-card,
|
||||
.tracking-question-content-card {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.tracking-question-source-card__meta,
|
||||
.tracking-question-table__metric {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.tracking-task-debug-grid,
|
||||
.tracking-task-debug-notes {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user