refactor(monitoring): simplify brand dashboard and harden citation rendering
- drop brand_time_buckets and sparkline/coverage UI; dashboard now returns a single day - compute mention rate from total actual samples instead of averaging per-platform rates - canonicalize ai_platform_id across services and aggregate platform-overview snapshots - strip mojibake and non-answer noise from callback payloads and question detail answers - keep Kimi citations panel-only; still store raw search_results for audit - render linked [n] inline citations for qwen/yuanbao answers with scroll-to-source behavior - restrict立即采集 to today's business date with a clear i18n hint - refresh content-citations into an ant-design table with truncation and hover styling Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -6,8 +6,9 @@ import type {
|
||||
MonitoringQuestionCitationAnalysisItem,
|
||||
MonitoringQuestionDetailCitation,
|
||||
MonitoringQuestionDetailPlatform,
|
||||
MonitoringSourceItem,
|
||||
} from "@geo/shared-types";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
@@ -15,6 +16,7 @@ import MarkdownPreview from "@/components/MarkdownPreview.vue";
|
||||
import { monitoringApi } from "@/lib/api";
|
||||
import { formatDateTime } from "@/lib/display";
|
||||
import { formatError } from "@/lib/errors";
|
||||
import { isMonitoringPlatformId, normalizeMonitoringPlatformId } from "@/lib/monitoring-platforms";
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
@@ -28,7 +30,10 @@ 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 requestedPlatformId = computed(() => normalizeQueryValue(route.query.ai_platform_id));
|
||||
const requestedPlatformId = computed(() => {
|
||||
const platformId = normalizeMonitoringPlatformId(normalizeQueryValue(route.query.ai_platform_id));
|
||||
return isMonitoringPlatformId(platformId) ? platformId : "";
|
||||
});
|
||||
const businessDate = computed(() => normalizeTrackingBusinessDate(route.query.business_date) || trackingToday);
|
||||
const dateFrom = computed(() => {
|
||||
return normalizeQueryValue(route.query.date_from) || businessDate.value;
|
||||
@@ -59,9 +64,15 @@ const detailQuery = useQuery({
|
||||
});
|
||||
|
||||
const activePlatformId = ref("");
|
||||
const detailPlatforms = computed<MonitoringQuestionDetailPlatform[]>(() => detailQuery.data.value?.platforms ?? []);
|
||||
const detailCitationAnalysis = computed<MonitoringQuestionCitationAnalysisItem[]>(() => detailQuery.data.value?.citation_analysis ?? []);
|
||||
const citationSourcesScrollRef = ref<HTMLElement | null>(null);
|
||||
const highlightedCitationIndex = ref<number | null>(null);
|
||||
|
||||
let citationHighlightTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
watch(
|
||||
() => detailQuery.data.value?.platforms,
|
||||
detailPlatforms,
|
||||
(platforms) => {
|
||||
if (!platforms?.length) {
|
||||
activePlatformId.value = "";
|
||||
@@ -85,12 +96,10 @@ 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 activePlatform = computed<MonitoringQuestionDetailPlatform | null>(() => detailPlatforms.value.find((item) => item.ai_platform_id === activePlatformId.value) ?? null);
|
||||
|
||||
const activeCitationAnalysis = computed<MonitoringQuestionCitationAnalysisItem[]>(() => {
|
||||
const items = detailQuery.data.value?.citation_analysis ?? [];
|
||||
const items = detailCitationAnalysis.value;
|
||||
if (!activePlatformId.value) {
|
||||
return items;
|
||||
}
|
||||
@@ -98,7 +107,7 @@ const activeCitationAnalysis = computed<MonitoringQuestionCitationAnalysisItem[]
|
||||
});
|
||||
|
||||
const latestSampledAt = computed<string | null>(() => {
|
||||
const platforms = detailQuery.data.value?.platforms ?? [];
|
||||
const platforms = detailPlatforms.value;
|
||||
const sampledAtValues = platforms
|
||||
.map((item) => item.sampled_at)
|
||||
.filter((value): value is string => Boolean(value));
|
||||
@@ -129,8 +138,8 @@ type TrackingAnalyzedContentCitation = {
|
||||
citedURL: string | null;
|
||||
};
|
||||
|
||||
const sanitizedAnswerText = computed<string | null>(() => {
|
||||
return stripAnswerCitationMarkers(activePlatform.value?.answer_text);
|
||||
const renderedAnswerContent = computed<string | null>(() => {
|
||||
return formatAnswerContent(activePlatform.value);
|
||||
});
|
||||
|
||||
const activeInlineContentCitations = computed<TrackingAnalyzedContentCitation[]>(() => {
|
||||
@@ -141,6 +150,14 @@ const shouldShowInlineContentCitations = computed(() => {
|
||||
return activeInlineContentCitations.value.length > 0;
|
||||
});
|
||||
|
||||
watch(activePlatformId, () => {
|
||||
clearCitationHighlight();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearCitationHighlight();
|
||||
});
|
||||
|
||||
function goBack(): void {
|
||||
void router.push({
|
||||
name: "tracking",
|
||||
@@ -183,24 +200,198 @@ function resolveCitationTitle(citation: MonitoringQuestionDetailCitation): strin
|
||||
return citation.cited_title || citation.article_title || citation.cited_url;
|
||||
}
|
||||
|
||||
function isLinkedInlineCitationPlatform(platformId: string | null | undefined): boolean {
|
||||
return platformId === "qwen" || platformId === "yuanbao";
|
||||
}
|
||||
|
||||
function isKimiInlineCitationPlatform(platformId: string | null | undefined): boolean {
|
||||
return platformId === "kimi";
|
||||
}
|
||||
|
||||
function createQwenSourceGroupPattern(): RegExp {
|
||||
return /\[\[source_group_web_(\d+)\]\]/g;
|
||||
}
|
||||
|
||||
function stripAnswerCitationMarkers(answerText: string | null | undefined): string | null {
|
||||
function createYuanbaoCitationPattern(): RegExp {
|
||||
return /\[citation:\s*(\d+)\]/gi;
|
||||
}
|
||||
|
||||
function createYuanbaoCitationStripPattern(): RegExp {
|
||||
return /\[\s*citation\s*:[^\[\]]*?\]/gi;
|
||||
}
|
||||
|
||||
function createQwenSourceGroupStripPattern(): RegExp {
|
||||
return /\[\[\s*source_group_web_[^\[\]]*?\]\]/gi;
|
||||
}
|
||||
|
||||
function createMarkdownLinkPattern(): RegExp {
|
||||
return /\[([^\]\n]+)\]\((https?:\/\/[^)\s]+)\)/g;
|
||||
}
|
||||
|
||||
function collectInlineCitationIndexes(answerText: string): number[] {
|
||||
const matches = [
|
||||
...answerText.matchAll(createQwenSourceGroupPattern()),
|
||||
...answerText.matchAll(createYuanbaoCitationPattern()),
|
||||
];
|
||||
|
||||
return matches
|
||||
.map((match) => Number(match[1]))
|
||||
.filter((value) => Number.isFinite(value) && value > 0);
|
||||
}
|
||||
|
||||
function normalizeInlineCitationUrl(value: string | null | undefined): string {
|
||||
const normalized = String(value ?? "").trim();
|
||||
if (!normalized) {
|
||||
return "";
|
||||
}
|
||||
|
||||
try {
|
||||
const url = new URL(normalized);
|
||||
url.hash = "";
|
||||
return url.toString();
|
||||
} catch {
|
||||
return normalized;
|
||||
}
|
||||
}
|
||||
|
||||
function deriveCitationChannelName(url: string): string {
|
||||
try {
|
||||
return new URL(url).hostname || "--";
|
||||
} catch {
|
||||
return "--";
|
||||
}
|
||||
}
|
||||
|
||||
function collectKimiInlineCitationOccurrences(answerText: string): Array<{
|
||||
url: string;
|
||||
label: string | null;
|
||||
citationCount: number;
|
||||
}> {
|
||||
const counts = new Map<string, { label: string | null; citationCount: number }>();
|
||||
const pattern = createMarkdownLinkPattern();
|
||||
|
||||
for (const match of answerText.matchAll(pattern)) {
|
||||
const matchIndex = match.index ?? 0;
|
||||
if (matchIndex > 0 && answerText[matchIndex - 1] === "!") {
|
||||
continue;
|
||||
}
|
||||
|
||||
const label = String(match[1] ?? "").trim() || null;
|
||||
const url = normalizeInlineCitationUrl(match[2]);
|
||||
if (!url) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const existing = counts.get(url);
|
||||
if (existing) {
|
||||
counts.set(url, {
|
||||
label: existing.label ?? label,
|
||||
citationCount: existing.citationCount + 1,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
counts.set(url, {
|
||||
label,
|
||||
citationCount: 1,
|
||||
});
|
||||
}
|
||||
|
||||
return Array.from(counts.entries()).map(([url, value]) => ({
|
||||
url,
|
||||
label: value.label,
|
||||
citationCount: value.citationCount,
|
||||
}));
|
||||
}
|
||||
|
||||
function buildInlineCitationSourceLookup(platform: MonitoringQuestionDetailPlatform | null): Map<string, MonitoringSourceItem> {
|
||||
const lookup = new Map<string, MonitoringSourceItem>();
|
||||
for (const item of platform?.inline_citations ?? []) {
|
||||
const normalizedURL = normalizeInlineCitationUrl(item.normalized_url ?? item.url);
|
||||
if (!normalizedURL || lookup.has(normalizedURL)) {
|
||||
continue;
|
||||
}
|
||||
lookup.set(normalizedURL, item);
|
||||
}
|
||||
return lookup;
|
||||
}
|
||||
|
||||
function countHanCharacters(value: string): number {
|
||||
return value.match(/[\u3400-\u9fff]/g)?.length ?? 0;
|
||||
}
|
||||
|
||||
function countSuspiciousMojibakeCharacters(value: string): number {
|
||||
return value.match(/[\u00c0-\u017f\u2000-\u20ff]/g)?.length ?? 0;
|
||||
}
|
||||
|
||||
function looksLikeNonAnswerNoise(value: string): boolean {
|
||||
const hanCount = countHanCharacters(value);
|
||||
const suspiciousCount = countSuspiciousMojibakeCharacters(value);
|
||||
if (hanCount === 0) {
|
||||
return suspiciousCount >= 4;
|
||||
}
|
||||
return suspiciousCount >= 8 && suspiciousCount > hanCount * 3;
|
||||
}
|
||||
|
||||
function sanitizeAnswerBody(answerText: string | null | undefined): string | null {
|
||||
const normalized = String(answerText ?? "").trim();
|
||||
if (!normalized) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const cleaned = normalized
|
||||
.replace(createQwenSourceGroupPattern(), "")
|
||||
const lines = normalized.split(/\r?\n+/).map((line) => line.trim()).filter(Boolean);
|
||||
const keptLines = lines.filter((line) => !looksLikeNonAnswerNoise(line));
|
||||
const sanitized = (keptLines.length ? keptLines.join("\n") : normalized)
|
||||
.replace(/[ \t]+([,.;:!?，。！？；：])/g, "$1")
|
||||
.replace(/[ \t]{2,}/g, " ")
|
||||
.replace(/\n{3,}/g, "\n\n")
|
||||
.trim();
|
||||
|
||||
return cleaned || null;
|
||||
return sanitized || null;
|
||||
}
|
||||
|
||||
function buildInlineCitationMarker(
|
||||
sourceGroupIndex: number,
|
||||
platform: MonitoringQuestionDetailPlatform | null,
|
||||
): string {
|
||||
if (!Number.isFinite(sourceGroupIndex) || sourceGroupIndex < 1) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const hasCitation = Boolean(platform?.citations[sourceGroupIndex - 1]);
|
||||
const className = hasCitation
|
||||
? "tracking-inline-citation"
|
||||
: "tracking-inline-citation tracking-inline-citation--muted";
|
||||
|
||||
if (!hasCitation) {
|
||||
return `<span class="${className}">[${sourceGroupIndex}]</span>`;
|
||||
}
|
||||
|
||||
return `<button type="button" class="${className}" data-citation-index="${sourceGroupIndex}">[${sourceGroupIndex}]</button>`;
|
||||
}
|
||||
|
||||
function formatAnswerContent(platform: MonitoringQuestionDetailPlatform | null): string | null {
|
||||
const sanitized = sanitizeAnswerBody(platform?.answer_text);
|
||||
if (!sanitized) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const withInlineMarkers = isLinkedInlineCitationPlatform(platform?.ai_platform_id)
|
||||
? sanitized
|
||||
.replace(createQwenSourceGroupPattern(), (_, sourceGroupIndex) => {
|
||||
return buildInlineCitationMarker(Number(sourceGroupIndex), platform);
|
||||
})
|
||||
.replace(createYuanbaoCitationPattern(), (_, sourceGroupIndex) => {
|
||||
return buildInlineCitationMarker(Number(sourceGroupIndex), platform);
|
||||
})
|
||||
: sanitized;
|
||||
|
||||
return withInlineMarkers
|
||||
.replace(createQwenSourceGroupStripPattern(), "")
|
||||
.replace(createYuanbaoCitationStripPattern(), "")
|
||||
.replace(/[ \t]{2,}/g, " ")
|
||||
.replace(/\n{3,}/g, "\n\n")
|
||||
.trim();
|
||||
}
|
||||
|
||||
function analyzeInlineContentCitations(
|
||||
@@ -211,17 +402,47 @@ function analyzeInlineContentCitations(
|
||||
return [];
|
||||
}
|
||||
|
||||
const matches = Array.from(answerText.matchAll(createQwenSourceGroupPattern()));
|
||||
if (!matches.length) {
|
||||
if (isKimiInlineCitationPlatform(platform?.ai_platform_id)) {
|
||||
const occurrences = collectKimiInlineCitationOccurrences(answerText);
|
||||
if (!occurrences.length) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const totalCitationCount = occurrences.reduce((sum, item) => sum + item.citationCount, 0);
|
||||
if (!totalCitationCount) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const inlineCitationLookup = buildInlineCitationSourceLookup(platform);
|
||||
return occurrences
|
||||
.sort((left, right) => {
|
||||
if (right.citationCount !== left.citationCount) {
|
||||
return right.citationCount - left.citationCount;
|
||||
}
|
||||
return left.url.localeCompare(right.url, "zh-CN");
|
||||
})
|
||||
.map((item) => {
|
||||
const source = inlineCitationLookup.get(item.url);
|
||||
const contentName = source?.title?.trim() || item.label || item.url;
|
||||
const channelName = source?.site_name?.trim() || deriveCitationChannelName(item.url);
|
||||
return {
|
||||
key: `kimi-${item.url}`,
|
||||
contentName,
|
||||
channelName,
|
||||
citationCount: item.citationCount,
|
||||
citationRate: item.citationCount / totalCitationCount,
|
||||
citedURL: item.url,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const sourceGroupIndexes = collectInlineCitationIndexes(answerText);
|
||||
if (!sourceGroupIndexes.length) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const citationCounts = new Map<number, number>();
|
||||
for (const match of matches) {
|
||||
const sourceGroupIndex = Number(match[1]);
|
||||
if (!Number.isFinite(sourceGroupIndex) || sourceGroupIndex <= 0) {
|
||||
continue;
|
||||
}
|
||||
for (const sourceGroupIndex of sourceGroupIndexes) {
|
||||
citationCounts.set(sourceGroupIndex, (citationCounts.get(sourceGroupIndex) ?? 0) + 1);
|
||||
}
|
||||
|
||||
@@ -237,20 +458,81 @@ function analyzeInlineContentCitations(
|
||||
}
|
||||
return left[0] - right[0];
|
||||
})
|
||||
.map(([sourceGroupIndex, citationCount]) => {
|
||||
.flatMap(([sourceGroupIndex, citationCount]) => {
|
||||
const citation = platform?.citations[sourceGroupIndex - 1] ?? null;
|
||||
const citedURL = citation?.cited_url?.trim() ?? "";
|
||||
if (!citedURL) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return {
|
||||
key: `${sourceGroupIndex}-${citation?.cited_url ?? `source_group_web_${sourceGroupIndex}`}`,
|
||||
return [{
|
||||
key: `${sourceGroupIndex}-${citedURL}`,
|
||||
contentName: citation ? resolveCitationTitle(citation) : `引用内容 #${sourceGroupIndex}`,
|
||||
channelName: citation?.site_name ?? "--",
|
||||
citationCount,
|
||||
citationRate: citationCount / totalCitationCount,
|
||||
citedURL: citation?.cited_url ?? null,
|
||||
};
|
||||
citedURL,
|
||||
}];
|
||||
});
|
||||
}
|
||||
|
||||
function clearCitationHighlight(): void {
|
||||
if (citationHighlightTimer !== null) {
|
||||
clearTimeout(citationHighlightTimer);
|
||||
citationHighlightTimer = null;
|
||||
}
|
||||
highlightedCitationIndex.value = null;
|
||||
}
|
||||
|
||||
async function focusCitationSource(sourceGroupIndex: number): Promise<void> {
|
||||
if (!Number.isFinite(sourceGroupIndex) || sourceGroupIndex < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
await nextTick();
|
||||
const citationCard = citationSourcesScrollRef.value?.querySelector<HTMLElement>(
|
||||
`[data-citation-index="${sourceGroupIndex}"]`,
|
||||
);
|
||||
if (!citationCard) {
|
||||
return;
|
||||
}
|
||||
|
||||
highlightedCitationIndex.value = sourceGroupIndex;
|
||||
citationCard.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "nearest",
|
||||
inline: "nearest",
|
||||
});
|
||||
|
||||
if (citationHighlightTimer !== null) {
|
||||
clearTimeout(citationHighlightTimer);
|
||||
}
|
||||
citationHighlightTimer = setTimeout(() => {
|
||||
highlightedCitationIndex.value = null;
|
||||
citationHighlightTimer = null;
|
||||
}, 2400);
|
||||
}
|
||||
|
||||
function handleAnswerContentClick(event: MouseEvent): void {
|
||||
const target = event.target;
|
||||
if (!(target instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const trigger = target.closest("[data-citation-index]") as HTMLElement | null;
|
||||
if (!trigger) {
|
||||
return;
|
||||
}
|
||||
|
||||
const sourceGroupIndex = Number(trigger.dataset.citationIndex ?? "");
|
||||
if (!Number.isFinite(sourceGroupIndex) || sourceGroupIndex < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
void focusCitationSource(sourceGroupIndex);
|
||||
}
|
||||
|
||||
function normalizeQueryValue(value: unknown): string {
|
||||
const raw = Array.isArray(value) ? value[0] : value;
|
||||
return String(raw ?? "").trim();
|
||||
@@ -282,6 +564,20 @@ function parsePositiveNumber(value: unknown): number | null {
|
||||
}
|
||||
return parsed;
|
||||
}
|
||||
|
||||
const citationAnalysisColumns = computed(() => [
|
||||
{ title: t("tracking.columns.sourcePlatform"), key: "sourcePlatform", dataIndex: "site_name", width: "30%" },
|
||||
{ title: t("tracking.columns.domain"), key: "domain", dataIndex: "site_domain", width: "30%", align: "center" as const },
|
||||
{ title: t("tracking.columns.citations"), key: "citationCount", dataIndex: "citation_count", align: "center" as const, width: "20%" },
|
||||
{ title: t("tracking.columns.share"), key: "citationRate", dataIndex: "citation_rate", align: "center" as const, width: "20%" },
|
||||
]);
|
||||
|
||||
const contentCitationColumns = computed(() => [
|
||||
{ title: t("tracking.columns.contentName"), key: "contentName", dataIndex: "contentName", width: "40%" },
|
||||
{ title: t("tracking.columns.channelName"), key: "channelName", dataIndex: "channelName", width: "20%", align: "center" as const },
|
||||
{ title: t("tracking.columns.citations"), key: "citationCount", dataIndex: "citationCount", align: "center" as const, width: "20%" },
|
||||
{ title: t("tracking.columns.share"), key: "citationRate", dataIndex: "citationRate", align: "center" as const, width: "20%" },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -320,7 +616,7 @@ function parsePositiveNumber(value: unknown): number | null {
|
||||
class="tracking-question-tabs"
|
||||
>
|
||||
<a-tab-pane
|
||||
v-for="platform in detailQuery.data.value?.platforms ?? []"
|
||||
v-for="platform in detailPlatforms"
|
||||
:key="platform.ai_platform_id"
|
||||
>
|
||||
<template #tab>
|
||||
@@ -351,8 +647,9 @@ function parsePositiveNumber(value: unknown): number | null {
|
||||
|
||||
<div class="tracking-question-answer__content custom-scrollbar">
|
||||
<MarkdownPreview
|
||||
v-if="sanitizedAnswerText"
|
||||
:content="sanitizedAnswerText"
|
||||
v-if="renderedAnswerContent"
|
||||
:content="renderedAnswerContent"
|
||||
@click="handleAnswerContentClick"
|
||||
/>
|
||||
<a-empty v-else :description="t('tracking.noAnswer')" />
|
||||
</div>
|
||||
@@ -372,17 +669,20 @@ function parsePositiveNumber(value: unknown): number | null {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tracking-question-card__scroll-area custom-scrollbar">
|
||||
<div ref="citationSourcesScrollRef" 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"
|
||||
v-for="(citation, index) in activePlatform.citations"
|
||||
:key="citation.cited_url"
|
||||
:href="citation.cited_url"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="tracking-question-source-card"
|
||||
:class="{ 'is-linked': highlightedCitationIndex === index + 1 }"
|
||||
:data-citation-index="index + 1"
|
||||
>
|
||||
<div class="tracking-question-source-card__headline">
|
||||
<span class="tracking-question-source-card__index">[{{ index + 1 }}]</span>
|
||||
<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>
|
||||
@@ -397,6 +697,7 @@ function parsePositiveNumber(value: unknown): number | null {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Citation Analysis -->
|
||||
<section
|
||||
:class="[
|
||||
'tracking-question-card',
|
||||
@@ -410,35 +711,41 @@ function parsePositiveNumber(value: unknown): number | null {
|
||||
</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 class="tracking-question-card__scroll-area custom-scrollbar" style="margin: 0; padding: 0;">
|
||||
<a-table
|
||||
v-if="activeCitationAnalysis.length"
|
||||
row-key="site_key"
|
||||
class="modern-table"
|
||||
:columns="citationAnalysisColumns"
|
||||
:data-source="activeCitationAnalysis"
|
||||
:pagination="false"
|
||||
size="middle"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'sourcePlatform'">
|
||||
<div class="cell-primary-stack">
|
||||
<strong class="table-text" :title="record.site_name">{{ record.site_name }}</strong>
|
||||
<small v-if="record.content_citation_count > 0" class="meta-subtext">
|
||||
{{ t("tracking.contentCitationMeta", { count: record.content_citation_count }) }}
|
||||
</small>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'domain'">
|
||||
<span class="tracking-question-table__secondary">{{ record.site_domain || record.site_key }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'citationCount'">
|
||||
<span class="metric-value">{{ record.citation_count }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'citationRate'">
|
||||
<strong class="metric-highlight">{{ formatPercent(record.citation_rate) }}</strong>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-empty v-else :description="t('tracking.noCitationAnalysis')" style="margin-top: 40px;" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Citations -->
|
||||
<section v-if="shouldShowInlineContentCitations" class="tracking-question-card">
|
||||
<div class="tracking-question-card__header">
|
||||
<div class="tracking-question-card__section-title">
|
||||
@@ -447,41 +754,42 @@ function parsePositiveNumber(value: unknown): number | null {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tracking-question-card__scroll-area custom-scrollbar">
|
||||
<div class="tracking-question-table">
|
||||
<div class="tracking-question-table__head">
|
||||
<span>{{ t("tracking.columns.contentName") }}</span>
|
||||
<span>{{ t("tracking.columns.channelName") }}</span>
|
||||
<span>{{ t("tracking.columns.citations") }}</span>
|
||||
<span>{{ t("tracking.columns.share") }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="item in activeInlineContentCitations"
|
||||
:key="item.key"
|
||||
class="tracking-question-table__row"
|
||||
>
|
||||
<div class="tracking-question-table__primary">
|
||||
<a
|
||||
v-if="item.citedURL"
|
||||
:href="item.citedURL"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
:title="item.contentName"
|
||||
>
|
||||
{{ item.contentName }}
|
||||
</a>
|
||||
<strong v-else>{{ item.contentName }}</strong>
|
||||
</div>
|
||||
<span class="tracking-question-table__secondary">{{ item.channelName }}</span>
|
||||
<div class="tracking-question-table__metric">
|
||||
<span>{{ item.citationCount }}</span>
|
||||
</div>
|
||||
<div class="tracking-question-table__metric">
|
||||
<strong>{{ formatPercent(item.citationRate) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tracking-question-card__scroll-area custom-scrollbar" style="margin: 0; padding: 0;">
|
||||
<a-table
|
||||
row-key="key"
|
||||
class="modern-table"
|
||||
:columns="contentCitationColumns"
|
||||
:data-source="activeInlineContentCitations"
|
||||
:pagination="false"
|
||||
size="middle"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'contentName'">
|
||||
<div class="cell-primary-stack">
|
||||
<a
|
||||
v-if="record.citedURL"
|
||||
:href="record.citedURL"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
:title="record.contentName"
|
||||
class="table-link"
|
||||
>
|
||||
{{ record.contentName }}
|
||||
</a>
|
||||
<strong v-else class="table-text" :title="record.contentName">{{ record.contentName }}</strong>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'channelName'">
|
||||
<span class="tracking-question-table__secondary" :title="record.channelName">{{ record.channelName }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'citationCount'">
|
||||
<span class="metric-value">{{ record.citationCount }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'citationRate'">
|
||||
<strong class="metric-highlight">{{ formatPercent(record.citationRate) }}</strong>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -755,6 +1063,12 @@ function parsePositiveNumber(value: unknown): number | null {
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.05);
|
||||
}
|
||||
|
||||
.tracking-question-source-card.is-linked {
|
||||
border-color: #93c5fd;
|
||||
background: #eef6ff;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
|
||||
}
|
||||
|
||||
.tracking-question-source-card__headline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -762,6 +1076,21 @@ function parsePositiveNumber(value: unknown): number | null {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tracking-question-source-card__index {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 34px;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
background: #e8f1ff;
|
||||
color: #1d4ed8;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tracking-question-source-card__headline strong {
|
||||
display: block;
|
||||
color: #2563eb;
|
||||
@@ -805,70 +1134,137 @@ function parsePositiveNumber(value: unknown): number | null {
|
||||
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;
|
||||
.tracking-question-answer__content :deep(.tracking-inline-citation) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.tracking-question-table__head {
|
||||
color: #9ca3af;
|
||||
font-size: 13px;
|
||||
justify-content: center;
|
||||
min-width: 28px;
|
||||
height: 22px;
|
||||
margin-left: 6px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
}
|
||||
|
||||
.tracking-question-table__row {
|
||||
color: #4b5563;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
.tracking-question-answer__content :deep(.tracking-inline-citation:hover) {
|
||||
border-color: #93c5fd;
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.tracking-question-answer__content :deep(.tracking-inline-citation--muted) {
|
||||
cursor: default;
|
||||
color: #94a3b8;
|
||||
border-color: #e2e8f0;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
/* Modern Enterprise Table Styles */
|
||||
:deep(.modern-table) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.modern-table .ant-table-thead > tr > th) {
|
||||
background-color: transparent !important;
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
:deep(.modern-table .ant-table-tbody > tr > td) {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
vertical-align: middle;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
:deep(.modern-table .ant-table-tbody > tr:last-child > td) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
:deep(.modern-table .ant-table-tbody > tr:hover > td) {
|
||||
background-color: #f8fafc !important;
|
||||
}
|
||||
|
||||
.cell-primary-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.table-link {
|
||||
color: #2563eb;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.table-link:hover {
|
||||
color: #1d4ed8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.table-text {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tracking-question-table__secondary {
|
||||
color: #94a3b8;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tracking-question-table__metric {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.meta-subtext {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tracking-question-table__metric strong,
|
||||
.tracking-question-table__row > strong {
|
||||
color: #4b5563;
|
||||
font-size: 16px;
|
||||
justify-self: end;
|
||||
.metric-value {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
color: #475569;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.metric-highlight {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
color: #0ea5e9;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
background: #f0f9ff;
|
||||
padding: 4px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e0f2fe;
|
||||
}
|
||||
|
||||
.tracking-question-card--debug {
|
||||
@@ -1030,8 +1426,7 @@ function parsePositiveNumber(value: unknown): number | null {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.tracking-question-source-card__meta,
|
||||
.tracking-question-table__metric {
|
||||
.tracking-question-source-card__meta {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user