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:
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import DOMPurify from "dompurify";
|
||||
import MarkdownIt from "markdown-it";
|
||||
import { computed } from "vue";
|
||||
|
||||
@@ -12,7 +13,10 @@ const renderer = new MarkdownIt({
|
||||
breaks: true,
|
||||
});
|
||||
|
||||
const html = computed(() => renderer.render(props.content || ""));
|
||||
const html = computed(() => {
|
||||
const rawHtml = renderer.render(props.content || "");
|
||||
return DOMPurify.sanitize(rawHtml);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -28,13 +28,13 @@ withDefaults(
|
||||
<style scoped>
|
||||
.page-hero {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding: 28px 30px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
|
||||
border: 1px solid #e6edf5;
|
||||
border-radius: 24px;
|
||||
padding: 24px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #f0f3fa;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.page-hero__copy {
|
||||
@@ -52,8 +52,9 @@ withDefaults(
|
||||
|
||||
.page-hero h1 {
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
line-height: 1.08;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.page-hero p:last-child {
|
||||
|
||||
@@ -50,6 +50,8 @@ const enUS = {
|
||||
upgrade: "Upgrade",
|
||||
copy: "Copy",
|
||||
copySuccess: "Content copied",
|
||||
yes: "Yes",
|
||||
no: "No",
|
||||
},
|
||||
nav: {
|
||||
workspace: "Workspace",
|
||||
@@ -123,7 +125,11 @@ const enUS = {
|
||||
},
|
||||
tracking: {
|
||||
title: "Data Details",
|
||||
description: "No matching backend APIs exist in this repository yet.",
|
||||
description: "Inspect plugin-sampled brand performance, platform coverage, hot questions, and citation attribution.",
|
||||
},
|
||||
trackingQuestion: {
|
||||
title: "Question Detail",
|
||||
description: "Inspect answer content, citation sources, citation analysis, and content citations for a single question.",
|
||||
},
|
||||
knowledge: {
|
||||
title: "Knowledge Base",
|
||||
@@ -155,6 +161,131 @@ const enUS = {
|
||||
emptyTemplates: "No template cards available yet",
|
||||
noRecentArticles: "No recent generations yet",
|
||||
},
|
||||
tracking: {
|
||||
eyebrow: "AI Brand Monitoring",
|
||||
brandPlaceholder: "Select brand",
|
||||
keywordPlaceholder: "Select keyword",
|
||||
collectNow: "Collect Now",
|
||||
collectKeywordRequired: "Select a keyword before collecting the current question set.",
|
||||
pluginMode: "Plugin sampling",
|
||||
pluginHint: "Plugin-mode data depends on device uptime. Low coverage should be treated as directional only.",
|
||||
awaitingSnapshot: "Waiting for the next valid snapshot",
|
||||
infoStrip:
|
||||
"{mode} · target {desired} · planned {planned} · sampled {actual} · coverage {coverage} · updated {updatedAt} · {trigger}",
|
||||
latestSnapshot: "Latest Snapshot",
|
||||
coverage: "Coverage",
|
||||
coverageTitle: "Sampling Coverage",
|
||||
coverageSummary: "Target {desired} · Sampled {actual} · Coverage {coverage}",
|
||||
platformMatrix: "Platform Matrix",
|
||||
platformMatrixTitle: "Platform Comparison Matrix",
|
||||
hotQuestions: "Hot Questions",
|
||||
hotQuestionsTitle: "Hot Questions",
|
||||
hotQuestionsHint: "Questions come from the brand library under the selected keyword.",
|
||||
questionSearchPlaceholder: "Search questions under the selected keyword",
|
||||
questionDetailEyebrow: "Question Detail",
|
||||
questionDetailCollectedAt: "Collected at {time}",
|
||||
questionDetailFallback: "Question Detail",
|
||||
backToQuestions: "Back to questions",
|
||||
citationRanking: "Citation Ranking",
|
||||
citationRankingTitle: "Citation Ranking",
|
||||
citationRankingHint: "Track how often content published from this system appears across model answers.",
|
||||
citedArticles: "Cited Articles",
|
||||
citedArticlesTitle: "Cited Articles",
|
||||
answerContent: "Answer Content",
|
||||
citationSources: "Citation Sources",
|
||||
citationSourcesTitle: "Citation Sources",
|
||||
citationAnalysis: "Citation Analysis",
|
||||
citationAnalysisTitle: "Citation Analysis",
|
||||
contentCitations: "Content Citations",
|
||||
contentCitationsTitle: "Content Citations",
|
||||
taskDebugTitle: "Async Task Debug",
|
||||
taskDebugHint: "For troubleshooting the callback -> queue -> worker flow only. The four main content sections above stay unchanged.",
|
||||
contentCitationBadge: "Content Citation",
|
||||
noQuestions: "No hot questions for the current filters",
|
||||
noCitationRanking: "No attributable citations in the current window",
|
||||
noCitedArticles: "No content citations in the current window",
|
||||
noAnswer: "No sampled answer for this platform",
|
||||
noCitations: "No citations for this platform",
|
||||
noCitationAnalysis: "No citation analysis for this platform",
|
||||
noContentCitations: "No content citations for the active platform",
|
||||
noTaskDebug: "No async task debug data for the current filters",
|
||||
samples: "samples",
|
||||
citations: "citations",
|
||||
citedArticleMeta: "{count} cited articles",
|
||||
contentCitationMeta: "{count} content references",
|
||||
manual: "Manual",
|
||||
automatic: "Automatic",
|
||||
noChange: "Flat",
|
||||
metrics: {
|
||||
mentionRate: "Mention Rate",
|
||||
top1MentionRate: "Top-1 Mention Rate",
|
||||
firstRecommendRate: "First Recommendation Rate",
|
||||
positiveMentionRate: "Positive Mention Rate",
|
||||
},
|
||||
columns: {
|
||||
platform: "Platform",
|
||||
appearances: "Appearances",
|
||||
citedAnswers: "Cited Answers",
|
||||
citedArticles: "Cited Articles",
|
||||
citationRate: "Citation Rate",
|
||||
citations: "Citations",
|
||||
sourcePlatform: "Source",
|
||||
domain: "Domain",
|
||||
share: "Share",
|
||||
contentName: "Content",
|
||||
publishPlatform: "Publish Platform",
|
||||
distinctSites: "Distinct Sites",
|
||||
brandContent: "Has Brand Content",
|
||||
},
|
||||
status: {
|
||||
sampled: "Sampled",
|
||||
partial: "Partially Sampled",
|
||||
unsampled: "Unsampled",
|
||||
pending: "Pending",
|
||||
not_logged_in: "Not Logged In",
|
||||
unavailable: "Unavailable",
|
||||
},
|
||||
confidence: {
|
||||
high: "High confidence",
|
||||
medium: "Medium confidence",
|
||||
low: "Low confidence",
|
||||
},
|
||||
taskDebug: {
|
||||
labels: {
|
||||
plannedAt: "Planned At",
|
||||
leasedAt: "Leased At",
|
||||
callbackReceivedAt: "Callback Received At",
|
||||
queueEnqueuedAt: "Queued At",
|
||||
completedAt: "Completed At",
|
||||
leaseExpiresAt: "Lease Expires At",
|
||||
runId: "Run ID",
|
||||
runStatus: "Run Status",
|
||||
providerModel: "Model",
|
||||
requestId: "Request ID",
|
||||
providerRequestId: "Provider Request ID",
|
||||
receivedAlertCount: "Received Alert Count",
|
||||
receivedAlertedAt: "Last Alerted At",
|
||||
skipReason: "Skip Reason",
|
||||
errorMessage: "Task Error",
|
||||
lastQueuePublishError: "Queue Publish Error",
|
||||
},
|
||||
taskStatus: {
|
||||
pending: "Pending",
|
||||
leased: "Leased",
|
||||
received: "Received",
|
||||
completed: "Completed",
|
||||
failed: "Failed",
|
||||
skipped: "Skipped",
|
||||
expired: "Expired",
|
||||
},
|
||||
queueStatus: {
|
||||
pending: "Pending Queue",
|
||||
queued: "Queued",
|
||||
publish_failed: "Publish Failed",
|
||||
invalid_payload: "Invalid Payload",
|
||||
},
|
||||
},
|
||||
},
|
||||
templateMeta: {
|
||||
top_x_article: {
|
||||
eyebrow: "Ranked Content",
|
||||
|
||||
@@ -50,6 +50,8 @@ const zhCN = {
|
||||
upgrade: "去升级",
|
||||
copy: "复制",
|
||||
copySuccess: "内容已复制",
|
||||
yes: "是",
|
||||
no: "否",
|
||||
},
|
||||
nav: {
|
||||
workspace: "工作台",
|
||||
@@ -123,7 +125,11 @@ const zhCN = {
|
||||
},
|
||||
tracking: {
|
||||
title: "数据详情",
|
||||
description: "当前仓库还没有匹配的后端接口，页面暂保持为设计占位。",
|
||||
description: "围绕插件采样快照查看品牌表现、平台矩阵、高频问题和引用归因。",
|
||||
},
|
||||
trackingQuestion: {
|
||||
title: "问题详情",
|
||||
description: "按问题查看大模型回答、引用来源、引用分析和内容引用。",
|
||||
},
|
||||
knowledge: {
|
||||
title: "知识库",
|
||||
@@ -155,6 +161,131 @@ const zhCN = {
|
||||
emptyTemplates: "暂无模版卡片数据",
|
||||
noRecentArticles: "暂无最近生成内容",
|
||||
},
|
||||
tracking: {
|
||||
eyebrow: "AI Brand Monitoring",
|
||||
brandPlaceholder: "选择品牌",
|
||||
keywordPlaceholder: "选择关键词",
|
||||
collectNow: "立即采集",
|
||||
collectKeywordRequired: "请先选择关键词，再立即采集当前问题",
|
||||
pluginMode: "插件采样",
|
||||
pluginHint: "插件模式下结果受设备在线率影响，低覆盖样本仅供趋势参考。",
|
||||
awaitingSnapshot: "等待下一次有效快照",
|
||||
infoStrip:
|
||||
"{mode} · 目标 {desired} · 计划 {planned} · 已采样 {actual} · 覆盖率 {coverage} · 更新于 {updatedAt} · {trigger}",
|
||||
latestSnapshot: "Latest Snapshot",
|
||||
coverage: "Coverage",
|
||||
coverageTitle: "采样覆盖条",
|
||||
coverageSummary: "目标 {desired} · 已采样 {actual} · 覆盖率 {coverage}",
|
||||
platformMatrix: "Platform Matrix",
|
||||
platformMatrixTitle: "平台对比矩阵",
|
||||
hotQuestions: "Hot Questions",
|
||||
hotQuestionsTitle: "高频问题",
|
||||
hotQuestionsHint: "高频问题来自品牌库当前关键词下的全部问题。",
|
||||
questionSearchPlaceholder: "搜索当前关键词下的问题",
|
||||
questionDetailEyebrow: "Question Detail",
|
||||
questionDetailCollectedAt: "采集时间 {time}",
|
||||
questionDetailFallback: "问题详情",
|
||||
backToQuestions: "返回问题列表",
|
||||
citationRanking: "Citation Ranking",
|
||||
citationRankingTitle: "引用排行",
|
||||
citationRankingHint: "统计系统发布内容在各模型回答中出现的次数与覆盖率。",
|
||||
citedArticles: "Cited Articles",
|
||||
citedArticlesTitle: "被引用文章",
|
||||
answerContent: "答案内容",
|
||||
citationSources: "Citation Sources",
|
||||
citationSourcesTitle: "引用来源",
|
||||
citationAnalysis: "Citation Analysis",
|
||||
citationAnalysisTitle: "引用分析",
|
||||
contentCitations: "Content Citations",
|
||||
contentCitationsTitle: "内容引用",
|
||||
taskDebugTitle: "异步任务调试",
|
||||
taskDebugHint: "仅用于排查 callback -> queue -> worker 的异步流转，不影响上方四块主内容。",
|
||||
contentCitationBadge: "内容引用",
|
||||
noQuestions: "当前筛选条件下暂无高频问题",
|
||||
noCitationRanking: "当前时间窗口内暂无可归因引用",
|
||||
noCitedArticles: "当前时间窗口内暂无内容引用",
|
||||
noAnswer: "该平台暂无采样回答",
|
||||
noCitations: "该平台无引用来源",
|
||||
noCitationAnalysis: "该平台暂无引用分析",
|
||||
noContentCitations: "当前平台暂无内容引用",
|
||||
noTaskDebug: "当前条件下暂无异步任务调试数据",
|
||||
samples: "次采样",
|
||||
citations: "次引用",
|
||||
citedArticleMeta: "{count} 篇内容被引用",
|
||||
contentCitationMeta: "含 {count} 条内容引用",
|
||||
manual: "手动",
|
||||
automatic: "自动",
|
||||
noChange: "持平",
|
||||
metrics: {
|
||||
mentionRate: "提及率",
|
||||
top1MentionRate: "首位提及率",
|
||||
firstRecommendRate: "首选推荐率",
|
||||
positiveMentionRate: "正面提及率",
|
||||
},
|
||||
columns: {
|
||||
platform: "平台",
|
||||
appearances: "出现次数",
|
||||
citedAnswers: "引用回答数",
|
||||
citedArticles: "引用文章数",
|
||||
citationRate: "引用率",
|
||||
citations: "引用次数",
|
||||
sourcePlatform: "来源平台",
|
||||
domain: "来源域名",
|
||||
share: "占比",
|
||||
contentName: "内容名称",
|
||||
publishPlatform: "发布平台",
|
||||
distinctSites: "引用站点数",
|
||||
brandContent: "含品牌内容",
|
||||
},
|
||||
status: {
|
||||
sampled: "已采样",
|
||||
partial: "部分采样",
|
||||
unsampled: "未采样",
|
||||
pending: "等待采样",
|
||||
not_logged_in: "未登录",
|
||||
unavailable: "不可用",
|
||||
},
|
||||
confidence: {
|
||||
high: "高置信度",
|
||||
medium: "中等置信度",
|
||||
low: "低置信度",
|
||||
},
|
||||
taskDebug: {
|
||||
labels: {
|
||||
plannedAt: "计划时间",
|
||||
leasedAt: "领取时间",
|
||||
callbackReceivedAt: "回调收到时间",
|
||||
queueEnqueuedAt: "入队时间",
|
||||
completedAt: "完成时间",
|
||||
leaseExpiresAt: "租约过期时间",
|
||||
runId: "Run ID",
|
||||
runStatus: "Run 状态",
|
||||
providerModel: "模型",
|
||||
requestId: "请求 ID",
|
||||
providerRequestId: "Provider Request ID",
|
||||
receivedAlertCount: "Received 告警次数",
|
||||
receivedAlertedAt: "最近告警时间",
|
||||
skipReason: "跳过原因",
|
||||
errorMessage: "任务错误",
|
||||
lastQueuePublishError: "队列投递错误",
|
||||
},
|
||||
taskStatus: {
|
||||
pending: "待采集",
|
||||
leased: "已领取",
|
||||
received: "已收到回调",
|
||||
completed: "已完成",
|
||||
failed: "已失败",
|
||||
skipped: "已跳过",
|
||||
expired: "已过期",
|
||||
},
|
||||
queueStatus: {
|
||||
pending: "待入队",
|
||||
queued: "已入队",
|
||||
publish_failed: "入队失败",
|
||||
invalid_payload: "消息无效",
|
||||
},
|
||||
},
|
||||
},
|
||||
templateMeta: {
|
||||
top_x_article: {
|
||||
eyebrow: "榜单内容",
|
||||
|
||||
@@ -32,6 +32,9 @@ import type {
|
||||
LoginRequest,
|
||||
LoginResponse,
|
||||
MediaPlatform,
|
||||
MonitoringCollectNowResponse,
|
||||
MonitoringDashboardCompositeResponse,
|
||||
MonitoringQuestionDetailResponse,
|
||||
PlatformAccount,
|
||||
PublishRecord,
|
||||
RegisterPluginInstallationRequest,
|
||||
@@ -549,6 +552,40 @@ export const mediaApi = {
|
||||
},
|
||||
};
|
||||
|
||||
export const monitoringApi = {
|
||||
dashboardComposite(params: {
|
||||
brand_id?: number;
|
||||
keyword_id?: number | null;
|
||||
days?: number;
|
||||
business_date?: string;
|
||||
}) {
|
||||
return apiClient.get<MonitoringDashboardCompositeResponse>("/api/tenant/monitoring/dashboard/composite", {
|
||||
params,
|
||||
});
|
||||
},
|
||||
questionDetail(
|
||||
brandId: number,
|
||||
questionId: number,
|
||||
params: {
|
||||
date_from?: string;
|
||||
date_to?: string;
|
||||
question_hash?: string;
|
||||
ai_platform_id?: string;
|
||||
},
|
||||
) {
|
||||
return apiClient.get<MonitoringQuestionDetailResponse>(
|
||||
`/api/tenant/monitoring/brands/${brandId}/questions/${questionId}/detail`,
|
||||
{ params },
|
||||
);
|
||||
},
|
||||
collectNow(brandId: number, payload?: { keyword_id?: number | null }) {
|
||||
return apiClient.post<MonitoringCollectNowResponse, { keyword_id?: number | null }>(
|
||||
`/api/tenant/monitoring/brands/${brandId}/collect-now`,
|
||||
payload ?? {},
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const promptRulesApi = {
|
||||
list(params?: PromptRuleListParams) {
|
||||
return apiClient.get<PromptRuleListResponse>("/api/tenant/prompt-rules", { params });
|
||||
|
||||
@@ -40,6 +40,12 @@ const errorMessageMap: Record<string, string> = {
|
||||
publisher_plugin_empty_response: "浏览器插件未返回数据，请刷新当前页面后重试",
|
||||
publisher_plugin_invalid_response: "浏览器插件返回了无效数据，请刷新当前页面后重试",
|
||||
publisher_plugin_unknown_error: "浏览器插件调用失败，请稍后重试",
|
||||
monitoring_plugin_timeout: "监测插件响应超时，请稍后重试",
|
||||
monitoring_plugin_invalid_response: "监测插件返回了无效数据，请稍后重试",
|
||||
monitoring_plugin_unknown_error: "监测插件调用失败，请稍后重试",
|
||||
monitoring_plugin_required: "请先安装并打开浏览器插件",
|
||||
monitoring_plugin_register_required: "浏览器插件正在初始化，请稍后重试",
|
||||
installation_offline: "监测插件离线，请打开浏览器插件后重试",
|
||||
network_error: "网络连接失败，请稍后重试",
|
||||
unknown_error: "发生未知错误",
|
||||
};
|
||||
|
||||
@@ -0,0 +1,155 @@
|
||||
import type {
|
||||
MonitoringCycleKickoffResponse,
|
||||
MonitoringCycleResult,
|
||||
MonitoringHeartbeatSyncResult,
|
||||
MonitoringLocalPlatformState,
|
||||
MonitoringPluginPingResponse,
|
||||
MonitoringRuntimeStateSnapshot,
|
||||
} from "@geo/shared-types";
|
||||
|
||||
type MonitoringAction = "ping" | "detectPlatforms" | "syncHeartbeat" | "runCycle" | "kickoffCycle" | "getState";
|
||||
|
||||
type MonitoringPluginSuccessPayload<T> = {
|
||||
source: "geo-extension";
|
||||
type: "geo.monitoring.response";
|
||||
requestId: string;
|
||||
success: true;
|
||||
data: T;
|
||||
};
|
||||
|
||||
type MonitoringPluginErrorPayload = {
|
||||
source: "geo-extension";
|
||||
type: "geo.monitoring.response";
|
||||
requestId: string;
|
||||
success: false;
|
||||
error: string;
|
||||
};
|
||||
|
||||
type MonitoringPluginPayloadMap = {
|
||||
ping: MonitoringPluginPingResponse;
|
||||
detectPlatforms: MonitoringLocalPlatformState[];
|
||||
syncHeartbeat: MonitoringHeartbeatSyncResult;
|
||||
runCycle: MonitoringCycleResult;
|
||||
kickoffCycle: MonitoringCycleKickoffResponse;
|
||||
getState: MonitoringRuntimeStateSnapshot;
|
||||
};
|
||||
|
||||
function isPlainObject(value: unknown): value is Record<string, unknown> {
|
||||
return typeof value === "object" && value !== null;
|
||||
}
|
||||
|
||||
function isMonitoringPingPayload(value: unknown): value is MonitoringPluginPingResponse {
|
||||
return isPlainObject(value) && typeof value.installed === "boolean";
|
||||
}
|
||||
|
||||
function isMonitoringDetectPayload(value: unknown): value is MonitoringLocalPlatformState[] {
|
||||
return Array.isArray(value);
|
||||
}
|
||||
|
||||
function isMonitoringHeartbeatPayload(value: unknown): value is MonitoringHeartbeatSyncResult {
|
||||
return isPlainObject(value) && typeof value.success === "boolean" && Array.isArray(value.platform_states);
|
||||
}
|
||||
|
||||
function isMonitoringCyclePayload(value: unknown): value is MonitoringCycleResult {
|
||||
return (
|
||||
isPlainObject(value) &&
|
||||
typeof value.success === "boolean" &&
|
||||
typeof value.leased_task_count === "number" &&
|
||||
typeof value.processed_task_count === "number" &&
|
||||
typeof value.failed_task_count === "number" &&
|
||||
typeof value.skipped_task_count === "number"
|
||||
);
|
||||
}
|
||||
|
||||
function isMonitoringKickoffPayload(value: unknown): value is MonitoringCycleKickoffResponse {
|
||||
return isPlainObject(value) && value.accepted === true && typeof value.status === "string";
|
||||
}
|
||||
|
||||
function isMonitoringStatePayload(value: unknown): value is MonitoringRuntimeStateSnapshot {
|
||||
return isPlainObject(value) && typeof value.installation_key === "string" && Array.isArray(value.monitoring_platforms);
|
||||
}
|
||||
|
||||
function isMonitoringPayloadValid<T extends MonitoringAction>(action: T, value: unknown): value is MonitoringPluginPayloadMap[T] {
|
||||
switch (action) {
|
||||
case "ping":
|
||||
return isMonitoringPingPayload(value);
|
||||
case "detectPlatforms":
|
||||
return isMonitoringDetectPayload(value);
|
||||
case "syncHeartbeat":
|
||||
return isMonitoringHeartbeatPayload(value);
|
||||
case "runCycle":
|
||||
return isMonitoringCyclePayload(value);
|
||||
case "kickoffCycle":
|
||||
return isMonitoringKickoffPayload(value);
|
||||
case "getState":
|
||||
return isMonitoringStatePayload(value);
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function nextRequestId(): string {
|
||||
if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
|
||||
return crypto.randomUUID();
|
||||
}
|
||||
return `geo-monitoring-${Date.now()}-${Math.random().toString(36).slice(2)}`;
|
||||
}
|
||||
|
||||
async function requestMonitoringPlugin<T extends MonitoringAction>(action: T, timeoutMs = 5000): Promise<MonitoringPluginPayloadMap[T]> {
|
||||
if (typeof window === "undefined") {
|
||||
throw new Error("plugin bridge is only available in browser contexts");
|
||||
}
|
||||
|
||||
const requestId = nextRequestId();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const timer = window.setTimeout(() => {
|
||||
cleanup();
|
||||
reject(new Error("monitoring_plugin_timeout"));
|
||||
}, timeoutMs);
|
||||
|
||||
const handleMessage = (event: MessageEvent<MonitoringPluginSuccessPayload<MonitoringPluginPayloadMap[T]> | MonitoringPluginErrorPayload>) => {
|
||||
if (event.source !== window || !event.data || event.data.type !== "geo.monitoring.response") {
|
||||
return;
|
||||
}
|
||||
if (event.data.requestId !== requestId || event.data.source !== "geo-extension") {
|
||||
return;
|
||||
}
|
||||
|
||||
cleanup();
|
||||
if (event.data.success) {
|
||||
if (!isMonitoringPayloadValid(action, event.data.data)) {
|
||||
reject(new Error("monitoring_plugin_invalid_response"));
|
||||
return;
|
||||
}
|
||||
resolve(event.data.data);
|
||||
return;
|
||||
}
|
||||
reject(new Error(event.data.error || "monitoring_plugin_unknown_error"));
|
||||
};
|
||||
|
||||
const cleanup = () => {
|
||||
window.clearTimeout(timer);
|
||||
window.removeEventListener("message", handleMessage);
|
||||
};
|
||||
|
||||
window.addEventListener("message", handleMessage);
|
||||
window.postMessage(
|
||||
{
|
||||
source: "geo-admin",
|
||||
type: "geo.monitoring.request",
|
||||
requestId,
|
||||
action,
|
||||
},
|
||||
window.location.origin,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export async function runMonitoringCycle(): Promise<MonitoringCycleResult> {
|
||||
return requestMonitoringPlugin("runCycle", 30000);
|
||||
}
|
||||
|
||||
export async function kickoffMonitoringCycle(): Promise<MonitoringCycleKickoffResponse> {
|
||||
return requestMonitoringPlugin("kickoffCycle", 5000);
|
||||
}
|
||||
@@ -109,13 +109,23 @@ const router = createRouter({
|
||||
{
|
||||
path: "tracking",
|
||||
name: "tracking",
|
||||
component: () => import("@/views/FeatureStubView.vue"),
|
||||
component: () => import("@/views/TrackingView.vue"),
|
||||
meta: {
|
||||
titleKey: "route.tracking.title",
|
||||
descriptionKey: "route.tracking.description",
|
||||
navKey: "/tracking",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "tracking/questions/:brandId/:questionId",
|
||||
name: "tracking-question-detail",
|
||||
component: () => import("@/views/TrackingQuestionDetailView.vue"),
|
||||
meta: {
|
||||
titleKey: "route.trackingQuestion.title",
|
||||
descriptionKey: "route.trackingQuestion.description",
|
||||
navKey: "/tracking",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "knowledge",
|
||||
name: "knowledge",
|
||||
|
||||
@@ -818,7 +818,7 @@ async function submitCompetitor(): Promise<void> {
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
border-radius: 2px;
|
||||
background: #111827;
|
||||
background: #1f5cff;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user