feat(admin): add database table query page

2026-05-08 16:39:44 +08:00
parent b08127031c
commit 72fce47187
12 changed files with 964 additions and 29 deletions
--- a/apps/admin-web/src/api/adminApiClient.ts
+++ b/apps/admin-web/src/api/adminApiClient.ts
@@ -3,6 +3,9 @@ import type {
  AdminDebugHttpResponse,
  AdminDisableProfileRedeemCodeRequest,
  AdminDisableProfileTaskConfigRequest,
+  AdminDatabaseTableListResponse,
+  AdminDatabaseTableRowsQuery,
+  AdminDatabaseTableRowsResponse,
  AdminLoginResponse,
  AdminMeResponse,
  AdminOverviewResponse,
@@ -129,6 +132,23 @@ export function getAdminOverview(token: string) {
  return request<AdminOverviewResponse>('/admin/api/overview', {token});
 }

+export function getAdminDatabaseTables(token: string) {
+  return request<AdminDatabaseTableListResponse>('/admin/api/database/tables', {
+    token,
+  });
+}
+
+export function getAdminDatabaseTableRows(
+  token: string,
+  tableName: string,
+  query: AdminDatabaseTableRowsQuery = {},
+) {
+  return request<AdminDatabaseTableRowsResponse>(
+    `/admin/api/database/tables/${encodeURIComponent(tableName)}/rows${buildDatabaseTableRowsQuery(query)}`,
+    {token},
+  );
+}
+
 export function debugAdminHttp(token: string, payload: AdminDebugHttpRequest) {
  return request<AdminDebugHttpResponse>('/admin/api/debug/http', {
    method: 'POST',
@@ -257,6 +277,17 @@ function buildQueryString(query: AdminTrackingEventListQuery) {
  return queryString ? `?${queryString}` : '';
 }

+function buildDatabaseTableRowsQuery(query: AdminDatabaseTableRowsQuery) {
+  const params = new URLSearchParams();
+  appendQueryParam(params, 'search', query.search);
+  appendQueryParam(params, 'filters', query.filters);
+  if (typeof query.limit === 'number' && Number.isFinite(query.limit)) {
+    params.set('limit', String(query.limit));
+  }
+  const queryString = params.toString();
+  return queryString ? `?${queryString}` : '';
+}
+
 function appendQueryParam(
  params: URLSearchParams,
  key: string,
--- a/apps/admin-web/src/api/adminApiTypes.ts
+++ b/apps/admin-web/src/api/adminApiTypes.ts
@@ -72,6 +72,30 @@ export interface AdminDatabaseOverviewPayload {
  fetchErrors: string[];
 }

+export interface AdminDatabaseTableListResponse {
+  tables: string[];
+  fetchErrors: string[];
+}
+
+export interface AdminDatabaseTableRowsQuery {
+  limit?: number;
+  search?: string;
+  filters?: string;
+}
+
+export interface AdminDatabaseTableRowPayload {
+  cells: Record<string, unknown>;
+  raw: unknown;
+}
+
+export interface AdminDatabaseTableRowsResponse {
+  tableName: string;
+  columns: string[];
+  rows: AdminDatabaseTableRowPayload[];
+  totalReturned: number;
+  limit: number;
+}
+
 export interface AdminDatabaseTableStatPayload {
  tableName: string;
  rowCount: number | null;
--- a/apps/admin-web/src/app/AdminApp.tsx
+++ b/apps/admin-web/src/app/AdminApp.tsx
@@ -18,6 +18,7 @@ import {
  setStoredAdminToken,
 } from '../auth/adminAuthStore';
 import {AdminDebugHttpPage} from '../pages/AdminDebugHttpPage';
+import {AdminDatabaseTablesPage} from '../pages/AdminDatabaseTablesPage';
 import {AdminInviteCodePage} from '../pages/AdminInviteCodePage';
 import {AdminLoginPage} from '../pages/AdminLoginPage';
 import {AdminOverviewPage} from '../pages/AdminOverviewPage';
@@ -160,6 +161,12 @@ export function AdminApp() {
      {routeId === 'overview' ? (
        <AdminOverviewPage token={token} onUnauthorized={handleUnauthorized} />
      ) : null}
+      {routeId === 'tables' ? (
+        <AdminDatabaseTablesPage
+          token={token}
+          onUnauthorized={handleUnauthorized}
+        />
+      ) : null}
      {routeId === 'debug' ? (
        <AdminDebugHttpPage token={token} onUnauthorized={handleUnauthorized} />
      ) : null}
--- a/apps/admin-web/src/app/AdminShell.tsx
+++ b/apps/admin-web/src/app/AdminShell.tsx
@@ -4,6 +4,7 @@ import {
  LogOut,
  ShieldCheck,
  ListChecks,
+  Database,
  Table2,
  TicketCheck,
  TicketPercent,
@@ -24,6 +25,7 @@ interface AdminShellProps {

 const routeIcons = {
  overview: LayoutDashboard,
+  tables: Database,
  debug: Bug,
  tracking: Table2,
  redeem: TicketPercent,
--- a/apps/admin-web/src/app/adminRoutes.ts
+++ b/apps/admin-web/src/app/adminRoutes.ts
@@ -1,4 +1,11 @@
-export type AdminRouteId = 'overview' | 'debug' | 'tracking' | 'redeem' | 'invite' | 'tasks';
+export type AdminRouteId =
+  | 'overview'
+  | 'tables'
+  | 'debug'
+  | 'tracking'
+  | 'redeem'
+  | 'invite'
+  | 'tasks';

 export interface AdminRouteDefinition {
  id: AdminRouteId;
@@ -8,6 +15,7 @@ export interface AdminRouteDefinition {

 export const adminRoutes: AdminRouteDefinition[] = [
  {id: 'overview', label: '总览', hash: '#overview'},
+  {id: 'tables', label: '表查询', hash: '#tables'},
  {id: 'debug', label: 'API 调试', hash: '#debug'},
  {id: 'tracking', label: '埋点数据', hash: '#tracking'},
  {id: 'redeem', label: '兑换码', hash: '#redeem'},
@@ -16,7 +24,7 @@ export const adminRoutes: AdminRouteDefinition[] = [
 ];

 export function resolveAdminRoute(hash: string): AdminRouteId {
-  const normalizedHash = hash.trim().toLowerCase();
+  const normalizedHash = hash.trim().toLowerCase().split('?')[0] ?? '';
  return (
    adminRoutes.find((route) => route.hash === normalizedHash)?.id ??
    'overview'
--- a/apps/admin-web/src/pages/AdminDatabaseTablesPage.tsx
+++ b/apps/admin-web/src/pages/AdminDatabaseTablesPage.tsx
@@ -0,0 +1,314 @@
+import {Eye, RefreshCcw, Search, X} from 'lucide-react';
+import {FormEvent, useEffect, useMemo, useState} from 'react';
+
+import {
+  getAdminDatabaseTableRows,
+  getAdminDatabaseTables,
+} from '../api/adminApiClient';
+import type {
+  AdminDatabaseTableRowPayload,
+  AdminDatabaseTableRowsResponse,
+} from '../api/adminApiTypes';
+import {handlePageError} from './pageUtils';
+
+interface AdminDatabaseTablesPageProps {
+  token: string;
+  onUnauthorized: (message?: string) => void;
+}
+
+export function AdminDatabaseTablesPage({
+  token,
+  onUnauthorized,
+}: AdminDatabaseTablesPageProps) {
+  const [tables, setTables] = useState<string[]>([]);
+  const [tableName, setTableName] = useState(() => readHashTableName());
+  const [search, setSearch] = useState('');
+  const [filters, setFilters] = useState('');
+  const [limit, setLimit] = useState('100');
+  const [result, setResult] = useState<AdminDatabaseTableRowsResponse | null>(null);
+  const [detailRow, setDetailRow] = useState<AdminDatabaseTableRowPayload | null>(null);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isLoadingTables, setIsLoadingTables] = useState(false);
+  const [isLoadingRows, setIsLoadingRows] = useState(false);
+
+  useEffect(() => {
+    void loadTables();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  useEffect(() => {
+    const nextTableName = readHashTableName();
+    if (nextTableName) {
+      setTableName(nextTableName);
+    }
+    const handleHashChange = () => {
+      const tableFromHash = readHashTableName();
+      if (tableFromHash) {
+        setTableName(tableFromHash);
+        void refreshRows(tableFromHash);
+      }
+    };
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (tables.length && !tableName) {
+      setTableName(tables[0] ?? '');
+    }
+  }, [tableName, tables]);
+
+  useEffect(() => {
+    if (tableName) {
+      void refreshRows(tableName);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableName]);
+
+  const visibleColumns = useMemo(() => {
+    const columns = result?.columns ?? [];
+    if (columns.length) {
+      return columns;
+    }
+    const firstRow = result?.rows[0];
+    return firstRow ? Object.keys(firstRow.cells) : [];
+  }, [result]);
+
+  async function loadTables() {
+    setIsLoadingTables(true);
+    setErrorMessage('');
+    try {
+      const response = await getAdminDatabaseTables(token);
+      setTables(response.tables);
+      if (response.fetchErrors.length) {
+        setErrorMessage(response.fetchErrors.join('；'));
+      }
+    } catch (error: unknown) {
+      handlePageError(error, onUnauthorized, setErrorMessage);
+    } finally {
+      setIsLoadingTables(false);
+    }
+  }
+
+  async function refreshRows(nextTableName = tableName) {
+    const normalizedTableName = nextTableName.trim();
+    if (!normalizedTableName) {
+      return;
+    }
+    setIsLoadingRows(true);
+    setErrorMessage('');
+    try {
+      const response = await getAdminDatabaseTableRows(token, normalizedTableName, {
+        search,
+        filters,
+        limit: parseLimit(limit),
+      });
+      setResult(response);
+    } catch (error: unknown) {
+      handlePageError(error, onUnauthorized, setErrorMessage);
+    } finally {
+      setIsLoadingRows(false);
+    }
+  }
+
+  function handleSearch(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    void refreshRows();
+  }
+
+  function handleTableChange(nextTableName: string) {
+    setTableName(nextTableName);
+    const nextHash = `#tables?table=${encodeURIComponent(nextTableName)}`;
+    if (window.location.hash !== nextHash) {
+      window.location.hash = nextHash;
+    }
+  }
+
+  return (
+    <section className="admin-page admin-page-wide">
+      <div className="admin-page-heading">
+        <div>
+          <h2>表查询</h2>
+          <p>SpacetimeDB 行数据</p>
+        </div>
+        <div className="admin-action-row">
+          <button
+            className="admin-secondary-button"
+            disabled={isLoadingTables}
+            type="button"
+            onClick={() => void loadTables()}
+          >
+            <RefreshCcw size={17} aria-hidden="true" />
+            <span>{isLoadingTables ? '刷新中' : '刷新表'}</span>
+          </button>
+          <button
+            className="admin-primary-button"
+            disabled={!tableName || isLoadingRows}
+            type="button"
+            onClick={() => void refreshRows()}
+          >
+            <Search size={17} aria-hidden="true" />
+            <span>{isLoadingRows ? '查询中' : '查询'}</span>
+          </button>
+        </div>
+      </div>
+
+      <form className="admin-panel admin-form" onSubmit={handleSearch}>
+        <div className="admin-table-query-grid">
+          <label className="admin-field">
+            <span>表</span>
+            <select
+              value={tableName}
+              onChange={(event) => handleTableChange(event.target.value)}
+            >
+              {tableName && !tables.includes(tableName) ? (
+                <option value={tableName}>{tableName}</option>
+              ) : null}
+              {tables.map((name) => (
+                <option key={name} value={name}>
+                  {name}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="admin-field">
+            <span>关键词</span>
+            <input
+              placeholder="全部"
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+            />
+          </label>
+          <label className="admin-field">
+            <span>筛选 JSON</span>
+            <input
+              placeholder='{"user_id":"u1"}'
+              value={filters}
+              onChange={(event) => setFilters(event.target.value)}
+            />
+          </label>
+          <label className="admin-field admin-field-compact">
+            <span>条数</span>
+            <input
+              inputMode="numeric"
+              value={limit}
+              onChange={(event) => setLimit(event.target.value)}
+            />
+          </label>
+          <button className="admin-secondary-button" disabled={isLoadingRows} type="submit">
+            <Search size={17} aria-hidden="true" />
+            <span>{isLoadingRows ? '查询中' : '查询'}</span>
+          </button>
+        </div>
+      </form>
+
+      {errorMessage ? (
+        <div className="admin-alert" role="status">
+          {errorMessage}
+        </div>
+      ) : null}
+
+      <section className="admin-panel">
+        <div className="admin-panel-heading">
+          <h3>{result?.tableName || tableName || '数据行'}</h3>
+          <span>{result?.totalReturned ?? 0} 条</span>
+        </div>
+        <div className="admin-table-wrap">
+          <table className="admin-table admin-table-wide">
+            <thead>
+              <tr>
+                {visibleColumns.map((column) => (
+                  <th key={column}>{column}</th>
+                ))}
+                <th>详情</th>
+              </tr>
+            </thead>
+            <tbody>
+              {result?.rows.length ? (
+                result.rows.map((row, rowIndex) => (
+                  <tr
+                    key={buildRowKey(row, rowIndex)}
+                    data-clickable="true"
+                    onClick={() => setDetailRow(row)}
+                  >
+                    {visibleColumns.map((column) => (
+                      <td key={column}>{formatCellValue(row.cells[column])}</td>
+                    ))}
+                    <td>
+                      <button
+                        className="admin-secondary-button"
+                        type="button"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          setDetailRow(row);
+                        }}
+                      >
+                        <Eye size={16} aria-hidden="true" />
+                        <span>详情</span>
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td colSpan={Math.max(visibleColumns.length + 1, 1)}>暂无数据</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {detailRow ? (
+        <div className="admin-confirm-backdrop" role="presentation">
+          <section className="admin-detail-panel" role="dialog" aria-modal="true">
+            <div className="admin-panel-heading">
+              <h3>行详情</h3>
+              <button
+                className="admin-ghost-button"
+                title="关闭"
+                type="button"
+                onClick={() => setDetailRow(null)}
+              >
+                <X size={17} aria-hidden="true" />
+              </button>
+            </div>
+            <pre className="admin-code-block">
+              {JSON.stringify(detailRow.cells, null, 2)}
+            </pre>
+          </section>
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+function readHashTableName() {
+  const hash = window.location.hash;
+  const queryIndex = hash.indexOf('?');
+  if (queryIndex < 0) {
+    return '';
+  }
+  return new URLSearchParams(hash.slice(queryIndex + 1)).get('table')?.trim() ?? '';
+}
+
+function parseLimit(value: string) {
+  const parsed = Number.parseInt(value.trim(), 10);
+  return Number.isFinite(parsed) ? parsed : 100;
+}
+
+function buildRowKey(row: AdminDatabaseTableRowPayload, rowIndex: number) {
+  const firstValue = Object.values(row.cells)[0];
+  return `${rowIndex}-${String(firstValue ?? '')}`;
+}
+
+function formatCellValue(value: unknown) {
+  if (value === null || typeof value === 'undefined' || value === '') {
+    return '-';
+  }
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+    return String(value);
+  }
+  return <pre className="admin-json-preview">{JSON.stringify(value, null, 2)}</pre>;
+}
--- a/apps/admin-web/src/pages/AdminOverviewPage.tsx
+++ b/apps/admin-web/src/pages/AdminOverviewPage.tsx
@@ -155,7 +155,17 @@ function InfoPanel({
 function TableStatRow({stat}: {stat: AdminDatabaseTableStatPayload}) {
  return (
    <tr>
-      <td>{stat.tableName}</td>
+      <td>
+        <button
+          className="admin-text-button"
+          type="button"
+          onClick={() => {
+            window.location.hash = `#tables?table=${encodeURIComponent(stat.tableName)}`;
+          }}
+        >
+          {stat.tableName}
+        </button>
+      </td>
      <td>{typeof stat.rowCount === 'number' ? stat.rowCount : '-'}</td>
      <td>
        {stat.errorMessage ? (
--- a/apps/admin-web/src/styles/admin.css
+++ b/apps/admin-web/src/styles/admin.css
@@ -302,6 +302,28 @@ button:disabled {
  align-items: end;
 }

+.admin-table-query-grid {
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) minmax(160px, 1fr) minmax(220px, 1.2fr) minmax(96px, 0.45fr) auto;
+  gap: 12px;
+  align-items: end;
+}
+
+.admin-table tbody tr[data-clickable="true"] {
+  cursor: pointer;
+}
+
+.admin-table tbody tr[data-clickable="true"]:hover {
+  background: #f5fafb;
+}
+
+.admin-text-button:hover,
+.admin-text-button:focus-visible {
+  color: #126e82;
+  text-decoration: underline;
+  outline: none;
+}
+
 .admin-action-row {
  display: flex;
  flex-wrap: wrap;
@@ -811,7 +833,8 @@ button:disabled {
  .admin-two-column,
  .admin-two-column-wide,
  .admin-form-row,
-  .admin-filter-grid {
+  .admin-filter-grid,
+  .admin-table-query-grid {
    grid-template-columns: 1fr;
  }