feat(analytics): add SEO/GEO page dashboard and retire Rybbit SSO

Expose Umami memind-pages discoveryChannel data in adm with a public-page
style table, proxy it via admin-api, and remove Rybbit configuration paths.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
john
2026-08-12 01:34:01 +08:00
parent ed8bc6d1b1
commit 0e26db1857
10 changed files with 567 additions and 37 deletions
+1
View File
@@ -33,6 +33,7 @@ const NAV_SECTIONS: NavSection[] = [
{ to: '/wechat', label: '服务号' },
{ to: '/mindspace', label: 'MindSpace 配置' },
{ to: '/analytics', label: 'Analytics 配置' },
{ to: '/analytics/seo-geo', label: 'SEO / GEO 流量' },
{ to: '/memory-v2', label: 'Memory V2' },
{ to: '/mindsearch', label: 'MindSearch' },
{ to: '/skill-runtime', label: 'Skill Runtime' },
+7 -19
View File
@@ -1,5 +1,6 @@
import { useCallback, useEffect, useState, type FormEvent } from 'react';
import { getMindSpaceAdminConfig, getRybbitSsoUrl, getUmamiSsoUrl, updateMindSpaceAdminConfig } from '../../api/client';
import { Link } from 'react-router-dom';
import { getMindSpaceAdminConfig, getUmamiSsoUrl, updateMindSpaceAdminConfig } from '../../api/client';
const initial = {
enabled: false,
@@ -17,7 +18,6 @@ export function AnalyticsConfigPage() {
const [error, setError] = useState<string | null>(null);
const [message, setMessage] = useState<string | null>(null);
const [openingUmami, setOpeningUmami] = useState(false);
const [openingRybbit, setOpeningRybbit] = useState(false);
const load = useCallback(async () => {
setLoading(true);
@@ -63,28 +63,15 @@ export function AnalyticsConfigPage() {
}
};
const openRybbit = async () => {
setOpeningRybbit(true);
setError(null);
try {
window.location.assign(await getRybbitSsoUrl());
} catch (err) {
setError(err instanceof Error ? err.message : '无法打开 Rybbit');
setOpeningRybbit(false);
}
};
return <div className="admin-page">
<div className="admin-page-head"><h2>Analytics </h2><p className="muted"> Memind Umami </p></div>
<div className="admin-page-head"><h2>Analytics </h2><p className="muted"> Umami Rybbit 退 Memind analytics-platform.md</p></div>
{error && <p className="banner banner-error">{error}</p>}
{message && <p className="banner banner-info">{message}</p>}
<section className="admin-card">
<h2>Rybbit </h2>
<p className="muted">访</p>
<h2>SEO / GEO </h2>
<p className="muted">访 Umami</p>
<div className="admin-actions">
<button type="button" className="send-btn" onClick={() => void openRybbit()} disabled={openingRybbit}>
{openingRybbit ? '正在进入 Rybbit...' : '打开 Rybbit 分析后台'}
</button>
<Link to="/analytics/seo-geo" className="send-btn"> SEO / GEO </Link>
</div>
</section>
<section className="admin-card">
@@ -96,6 +83,7 @@ export function AnalyticsConfigPage() {
<label className="admin-form-row"><span>Umami </span><input value={config.analyticsUrl} disabled={loading || busy} onChange={(e) => setConfig({ ...config, analyticsUrl: e.target.value })} placeholder="http://127.0.0.1:3100" /></label>
<label className="admin-form-row"><span></span><input value={config.domains} disabled={loading || busy} onChange={(e) => setConfig({ ...config, domains: e.target.value })} placeholder="127.0.0.1,localhost" /></label>
<label className="admin-form-row"><span> {config.idSecretConfigured ? '(已配置,留空保持不变)' : ''}</span><input type="password" value={secret} disabled={loading || busy} onChange={(e) => setSecret(e.target.value)} placeholder={config.idSecretConfigured ? '留空保持当前密钥' : '输入本地随机密钥'} autoComplete="new-password" /></label>
<p className="muted">SEO/GEO memind_adm <code>UMAMI_ADMIN_PASSWORD</code> Umami admin </p>
<div className="admin-actions"><button type="submit" className="send-btn" disabled={busy || loading}>{busy ? '保存中...' : '保存配置'}</button><button type="button" className="ghost-btn" onClick={() => void load()} disabled={busy}></button></div>
</form>
</section>
+342
View File
@@ -0,0 +1,342 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { getSeoGeoAnalyticsPages, getUmamiSsoUrl } from '../../api/client';
type DiscoveryChannel = 'seo' | 'geo';
type PageRow = {
urlPath: string;
pageUrl?: string;
hostname?: string;
pageTitle: string;
views: number;
visitors: number;
visits: number;
clicks: number;
engagedVisits: number;
forms: number;
generatedAt?: string | null;
generatedAtInferred?: boolean;
firstSeenAt?: string | null;
};
type PageSort =
| 'generatedAt'
| 'views'
| 'visitors'
| 'visits'
| 'clicks'
| 'engagedVisits'
| 'forms'
| 'pageTitle'
| 'firstSeenAt';
function formatNumber(value: number) {
return new Intl.NumberFormat('zh-CN').format(Number(value) || 0);
}
function resolvePageUrl(row: PageRow) {
const exact = String(row.pageUrl ?? '').trim();
if (/^https?:\/\//i.test(exact)) return exact;
const hostname = String(row.hostname ?? '').trim();
if (hostname === '127.0.0.1' || hostname === 'localhost') {
return `http://${hostname}:8081${row.urlPath}`;
}
return hostname ? `https://${hostname}${row.urlPath}` : row.urlPath;
}
function defaultRange() {
const end = new Date();
const start = new Date(end);
start.setDate(start.getDate() - 29);
return {
startDate: start.toISOString().slice(0, 10),
endDate: end.toISOString().slice(0, 10),
};
}
function toRangeMs(startDate: string, endDate: string) {
const startAt = new Date(`${startDate}T00:00:00`).getTime();
const endAt = new Date(`${endDate}T23:59:59.999`).getTime();
return { startAt, endAt };
}
export function SeoGeoAnalyticsPage() {
const initialRange = useMemo(() => defaultRange(), []);
const [channel, setChannel] = useState<DiscoveryChannel>('seo');
const [startDate, setStartDate] = useState(initialRange.startDate);
const [endDate, setEndDate] = useState(initialRange.endDate);
const [generatedStartDate, setGeneratedStartDate] = useState('');
const [generatedEndDate, setGeneratedEndDate] = useState('');
const [sortBy, setSortBy] = useState<PageSort>('views');
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
const [page, setPage] = useState(1);
const [rows, setRows] = useState<PageRow[]>([]);
const [total, setTotal] = useState(0);
const [totalViews, setTotalViews] = useState(0);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [openingUmami, setOpeningUmami] = useState(false);
const pageCount = Math.max(1, Math.ceil(total / 10));
const load = useCallback(async () => {
setLoading(true);
setError(null);
try {
const { startAt, endAt } = toRangeMs(startDate, endDate);
const result = await getSeoGeoAnalyticsPages({
discoveryChannel: channel,
startAt,
endAt,
timezone: 'Asia/Shanghai',
page,
pageSize: 10,
sortBy,
sortOrder,
generatedStartAt: generatedStartDate
? new Date(`${generatedStartDate}T00:00:00`).getTime()
: undefined,
generatedEndAt: generatedEndDate
? new Date(`${generatedEndDate}T23:59:59.999`).getTime()
: undefined,
});
setRows(Array.isArray(result.data) ? result.data : []);
setTotal(Number(result.total) || 0);
setTotalViews(Number(result.totalViews) || 0);
} catch (err) {
setError(err instanceof Error ? err.message : '加载 SEO/GEO 页面统计失败');
setRows([]);
setTotal(0);
setTotalViews(0);
} finally {
setLoading(false);
}
}, [
channel,
endDate,
generatedEndDate,
generatedStartDate,
page,
sortBy,
sortOrder,
startDate,
]);
useEffect(() => {
void load();
}, [load]);
useEffect(() => {
setPage(1);
}, [channel, startDate, endDate, generatedStartDate, generatedEndDate, sortBy, sortOrder]);
const openUmami = async () => {
setOpeningUmami(true);
setError(null);
try {
window.location.assign(await getUmamiSsoUrl());
} catch (err) {
setError(err instanceof Error ? err.message : '无法打开 Umami');
setOpeningUmami(false);
}
};
const overview = useMemo(() => {
const pages = rows.length;
const views = rows.reduce((sum, row) => sum + Number(row.views || 0), 0);
const visitors = rows.reduce((sum, row) => sum + Number(row.visitors || 0), 0);
const clicks = rows.reduce((sum, row) => sum + Number(row.clicks || 0), 0);
const engaged = rows.reduce((sum, row) => sum + Number(row.engagedVisits || 0), 0);
const forms = rows.reduce((sum, row) => sum + Number(row.forms || 0), 0);
return { pages, views, visitors, clicks, engaged, forms };
}, [rows]);
return (
<div className="admin-page">
<div className="admin-page-head">
<h2>SEO / GEO </h2>
<p className="muted">
SEOGEO访 Umami
</p>
</div>
{error && <p className="banner banner-error">{error}</p>}
<section className="admin-card">
<div className="admin-actions" style={{ marginBottom: 16, flexWrap: 'wrap', gap: 8 }}>
<button
type="button"
className={channel === 'seo' ? 'send-btn' : 'ghost-btn'}
onClick={() => setChannel('seo')}
>
SEO
</button>
<button
type="button"
className={channel === 'geo' ? 'send-btn' : 'ghost-btn'}
onClick={() => setChannel('geo')}
>
GEO
</button>
<button type="button" className="ghost-btn" onClick={() => void load()} disabled={loading}>
{loading ? '刷新中…' : '刷新数据'}
</button>
<button type="button" className="ghost-btn" onClick={() => void openUmami()} disabled={openingUmami}>
{openingUmami ? '正在进入 Umami…' : '打开 Umami 完整看板'}
</button>
</div>
<div className="admin-form" style={{ marginBottom: 16 }}>
<label className="admin-form-row">
<span></span>
<input type="date" value={startDate} max={endDate} onChange={(e) => setStartDate(e.target.value)} />
</label>
<label className="admin-form-row">
<span></span>
<input type="date" value={endDate} min={startDate} onChange={(e) => setEndDate(e.target.value)} />
</label>
<label className="admin-form-row">
<span></span>
<input
type="date"
value={generatedStartDate}
max={generatedEndDate || undefined}
onChange={(e) => setGeneratedStartDate(e.target.value)}
/>
</label>
<label className="admin-form-row">
<span></span>
<input
type="date"
value={generatedEndDate}
min={generatedStartDate || undefined}
onChange={(e) => setGeneratedEndDate(e.target.value)}
/>
</label>
<label className="admin-form-row">
<span></span>
<select value={sortBy} onChange={(e) => setSortBy(e.target.value as PageSort)}>
<option value="views"></option>
<option value="visitors">访</option>
<option value="visits">访</option>
<option value="clicks"></option>
<option value="engagedVisits"></option>
<option value="forms"></option>
<option value="generatedAt"></option>
<option value="pageTitle">Title</option>
<option value="firstSeenAt">访</option>
</select>
</label>
<label className="admin-form-row">
<span></span>
<select value={sortOrder} onChange={(e) => setSortOrder(e.target.value as 'asc' | 'desc')}>
<option value="desc"></option>
<option value="asc"></option>
</select>
</label>
</div>
<div className="admin-metrics-grid" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 16 }}>
<div className="admin-card metric-card" style={{ minWidth: 140, padding: 16 }}>
<div className="muted"></div>
<strong>{formatNumber(overview.views)}</strong>
</div>
<div className="admin-card metric-card" style={{ minWidth: 140, padding: 16 }}>
<div className="muted"></div>
<strong>{formatNumber(totalViews)}</strong>
</div>
<div className="admin-card metric-card" style={{ minWidth: 140, padding: 16 }}>
<div className="muted"> {channel.toUpperCase()} </div>
<strong>{formatNumber(total)}</strong>
</div>
<div className="admin-card metric-card" style={{ minWidth: 140, padding: 16 }}>
<div className="muted"> / / </div>
<strong>{formatNumber(overview.clicks)} / {formatNumber(overview.engaged)} / {formatNumber(overview.forms)}</strong>
</div>
</div>
<div className="admin-table-wrap">
<table className="admin-table">
<thead>
<tr>
<th>Title</th>
<th> URL</th>
<th></th>
<th>访</th>
<th>访</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>访</th>
</tr>
</thead>
<tbody>
{loading ? (
<tr>
<td colSpan={11}></td>
</tr>
) : rows.length === 0 ? (
<tr>
<td colSpan={11}> {channel.toUpperCase()} 访</td>
</tr>
) : (
rows.map((row) => {
const pageUrl = resolvePageUrl(row);
const contribution = totalViews
? `${((Number(row.views) / totalViews) * 100).toFixed(2)}%`
: '0.00%';
return (
<tr key={`${row.urlPath}-${row.firstSeenAt ?? ''}`}>
<td className="admin-table-path" title={row.pageTitle}>{row.pageTitle}</td>
<td className="admin-table-path">
<a href={pageUrl} target="_blank" rel="noreferrer" title={pageUrl}>
{pageUrl}
</a>
</td>
<td>{formatNumber(row.views)}</td>
<td>{formatNumber(row.visitors)}</td>
<td>{formatNumber(row.visits)}</td>
<td>{formatNumber(row.clicks)}</td>
<td>{formatNumber(row.engagedVisits)}</td>
<td>{formatNumber(row.forms)}</td>
<td>{contribution}</td>
<td>
{row.generatedAt
? `${new Date(row.generatedAt).toLocaleDateString('zh-CN')}${row.generatedAtInferred ? '(首访回推)' : ''}`
: '—'}
</td>
<td>
{row.firstSeenAt
? new Date(row.firstSeenAt).toLocaleString('zh-CN')
: '—'}
</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
<div className="admin-actions" style={{ marginTop: 16 }}>
<button type="button" className="ghost-btn" disabled={page <= 1 || loading} onClick={() => setPage((p) => p - 1)}>
</button>
<span className="muted">
{page} / {pageCount} {formatNumber(total)}
</span>
<button
type="button"
className="ghost-btn"
disabled={page >= pageCount || loading}
onClick={() => setPage((p) => p + 1)}
>
</button>
</div>
</section>
</div>
);
}