补齐后台埋点导出和任务事件选择

后台埋点查询支持日期筛选和导出全部模式

新增后台真实 event key 列表接口

任务配置页改用真实 user 埋点 key 候选

更新后台埋点查询文档和定向测试
This commit is contained in:
2026-06-26 16:49:33 +08:00
parent 607042a250
commit a8c3f8cf0f
10 changed files with 613 additions and 88 deletions
@@ -1,46 +1,55 @@
import {Download, Eye, RefreshCcw, Search, X} from 'lucide-react';
import {FormEvent, useEffect, useMemo, useState} from 'react';
import { Download, Eye, RefreshCcw, Search, X } from 'lucide-react';
import { FormEvent, useEffect, useMemo, useState } from 'react';
import {listAdminTrackingEvents} from '../api/adminApiClient';
import {
listAdminTrackingEventKeys,
listAdminTrackingEvents,
} from '../api/adminApiClient';
import type {
AdminTrackingEventEntryPayload,
AdminTrackingEventKeyPayload,
TrackingScopeKind,
} from '../api/adminApiTypes';
import {
buildAdminTrackingEventKeyOptions,
filterAdminTrackingEventKeyOptions,
filterAdminTrackingEventDefinitions,
findAdminTrackingEventDefinition,
} from '../config/trackingEventDefinitions';
import {handlePageError} from './pageUtils';
import { handlePageError } from './pageUtils';
interface AdminTrackingEventsPageProps {
token: string;
onUnauthorized: (message?: string) => void;
}
const scopeKindOptions: Array<{value: TrackingScopeKind | ''; label: string}> = [
{value: '', label: '全部'},
{value: 'site', label: 'site'},
{value: 'work', label: 'work'},
{value: 'module', label: 'module'},
{value: 'user', label: 'user'},
const scopeKindOptions: Array<{
value: TrackingScopeKind | '';
label: string;
}> = [
{ value: '', label: '全部' },
{ value: 'site', label: 'site' },
{ value: 'work', label: 'work' },
{ value: 'module', label: 'module' },
{ value: 'user', label: 'user' },
];
const exportColumns: Array<{
key: keyof AdminTrackingEventEntryPayload;
label: string;
}> = [
{key: 'eventId', label: '事件 ID'},
{key: 'eventKey', label: 'Event Key'},
{key: 'eventTitle', label: '事件名称'},
{key: 'scopeKind', label: 'Scope Kind'},
{key: 'scopeId', label: 'Scope ID'},
{key: 'dayKey', label: 'Day Key'},
{key: 'userId', label: 'User ID'},
{key: 'ownerUserId', label: 'Owner User ID'},
{key: 'profileId', label: 'Profile ID'},
{key: 'moduleKey', label: 'Module Key'},
{key: 'metadataJson', label: 'Metadata JSON'},
{key: 'occurredAt', label: '发生时间'},
{ key: 'eventId', label: '事件 ID' },
{ key: 'eventKey', label: 'Event Key' },
{ key: 'eventTitle', label: '事件名称' },
{ key: 'scopeKind', label: 'Scope Kind' },
{ key: 'scopeId', label: 'Scope ID' },
{ key: 'dayKey', label: 'Day Key' },
{ key: 'userId', label: 'User ID' },
{ key: 'ownerUserId', label: 'Owner User ID' },
{ key: 'profileId', label: 'Profile ID' },
{ key: 'moduleKey', label: 'Module Key' },
{ key: 'metadataJson', label: 'Metadata JSON' },
{ key: 'occurredAt', label: '发生时间' },
];
export function AdminTrackingEventsPage({
@@ -52,21 +61,47 @@ export function AdminTrackingEventsPage({
const [userId, setUserId] = useState('');
const [scopeKind, setScopeKind] = useState<TrackingScopeKind | ''>('');
const [scopeId, setScopeId] = useState('');
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
const [limit, setLimit] = useState('200');
const [eventKeys, setEventKeys] = useState<AdminTrackingEventKeyPayload[]>(
[],
);
const [errorMessage, setErrorMessage] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [isExportingAll, setIsExportingAll] = useState(false);
const [detailEntry, setDetailEntry] =
useState<AdminTrackingEventEntryPayload | null>(null);
useEffect(() => {
void refreshTrackingEventKeys();
void refreshTrackingEvents();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token]);
const filteredEventDefinitions = useMemo(
() => filterAdminTrackingEventDefinitions(eventKey),
[eventKey],
const eventKeyOptions = useMemo(
() => buildAdminTrackingEventKeyOptions(eventKeys),
[eventKeys],
);
const filteredEventDefinitions = useMemo(() => {
const dynamicOptions = filterAdminTrackingEventKeyOptions(
eventKeyOptions,
eventKey,
);
if (dynamicOptions.length) {
return dynamicOptions;
}
return filterAdminTrackingEventDefinitions(eventKey);
}, [eventKey, eventKeyOptions]);
async function refreshTrackingEventKeys() {
try {
const response = await listAdminTrackingEventKeys(token);
setEventKeys(response.eventKeys);
} catch {
setEventKeys([]);
}
}
async function refreshTrackingEvents() {
setIsLoading(true);
@@ -77,6 +112,8 @@ export function AdminTrackingEventsPage({
userId,
scopeKind,
scopeId,
startDate,
endDate,
limit: parseLimit(limit),
});
setEntries(response.entries);
@@ -100,6 +137,32 @@ export function AdminTrackingEventsPage({
exportTrackingEventsAsExcel(entries);
}
async function handleExportAll() {
setIsExportingAll(true);
setErrorMessage('');
try {
const response = await listAdminTrackingEvents(token, {
eventKey,
userId,
scopeKind,
scopeId,
startDate,
endDate,
limit: 100_000,
exportAll: true,
});
if (!response.entries.length) {
setErrorMessage('当前没有可导出的埋点数据');
return;
}
exportTrackingEventsAsExcel(response.entries);
} catch (error: unknown) {
handlePageError(error, onUnauthorized, setErrorMessage);
} finally {
setIsExportingAll(false);
}
}
return (
<section className="admin-page admin-page-wide">
<div className="admin-page-heading">
@@ -110,7 +173,7 @@ export function AdminTrackingEventsPage({
<div className="admin-action-row">
<button
className="admin-secondary-button"
disabled={isLoading}
disabled={isLoading || isExportingAll}
type="button"
onClick={refreshTrackingEvents}
>
@@ -126,6 +189,15 @@ export function AdminTrackingEventsPage({
<Download size={17} aria-hidden="true" />
<span>导出 Excel</span>
</button>
<button
className="admin-secondary-button"
disabled={isExportingAll}
type="button"
onClick={handleExportAll}
>
<Download size={17} aria-hidden="true" />
<span>{isExportingAll ? '导出中' : '导出全部'}</span>
</button>
</div>
</div>
@@ -186,7 +258,27 @@ export function AdminTrackingEventsPage({
onChange={(event) => setLimit(event.target.value)}
/>
</label>
<button className="admin-secondary-button" disabled={isLoading} type="submit">
<label className="admin-field">
<span>开始日期</span>
<input
type="date"
value={startDate}
onChange={(event) => setStartDate(event.target.value)}
/>
</label>
<label className="admin-field">
<span>结束日期</span>
<input
type="date"
value={endDate}
onChange={(event) => setEndDate(event.target.value)}
/>
</label>
<button
className="admin-secondary-button"
disabled={isLoading}
type="submit"
>
<Search size={17} aria-hidden="true" />
<span>{isLoading ? '查询中' : '查询'}</span>
</button>
@@ -353,9 +445,13 @@ function formatMetadataJson(value: string) {
}
}
function exportTrackingEventsAsExcel(entries: AdminTrackingEventEntryPayload[]) {
function exportTrackingEventsAsExcel(
entries: AdminTrackingEventEntryPayload[],
) {
const tableRows = [
exportColumns.map((column) => `<th>${escapeHtml(column.label)}</th>`).join(''),
exportColumns
.map((column) => `<th>${escapeHtml(column.label)}</th>`)
.join(''),
...entries.map((entry) =>
exportColumns
.map(
@@ -368,7 +464,9 @@ function exportTrackingEventsAsExcel(entries: AdminTrackingEventEntryPayload[])
const html = `\uFEFF<html><head><meta charset="UTF-8" /></head><body><table>${tableRows
.map((row) => `<tr>${row}</tr>`)
.join('')}</table></body></html>`;
const blob = new Blob([html], {type: 'application/vnd.ms-excel;charset=utf-8'});
const blob = new Blob([html], {
type: 'application/vnd.ms-excel;charset=utf-8',
});
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
@@ -379,7 +477,10 @@ function exportTrackingEventsAsExcel(entries: AdminTrackingEventEntryPayload[])
URL.revokeObjectURL(url);
}
function formatExportCell(value: unknown, key?: keyof AdminTrackingEventEntryPayload) {
function formatExportCell(
value: unknown,
key?: keyof AdminTrackingEventEntryPayload,
) {
if (value === null || typeof value === 'undefined') {
return '';
}