调整文档路径

2026-09-02 17:31:52 +08:00
parent 01b3798e02
commit 674ff09db1
43 changed files with 0 additions and 0 deletions
@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import { Card, Col, Row, Statistic, Table, Tag, Typography } from 'antd';
+import { getStats } from '../../api';
+
+export default function Stats() {
+  const [data, setData] = useState<Awaited<ReturnType<typeof getStats>> | null>(null);
+
+  useEffect(() => {
+    getStats().then(setData).catch(() => {});
+  }, []);
+
+  if (!data) return <Typography>加载中…</Typography>;
+
+  return (
+    <div>
+      <Row gutter={16} style={{ marginBottom: 24 }}>
+        <Col span={6}>
+          <Card>
+            <Statistic title="Token 总数" value={data.total} />
+          </Card>
+        </Col>
+        <Col span={6}>
+          <Card>
+            <Statistic title="活跃" value={data.active} valueStyle={{ color: '#3f8600' }} />
+          </Card>
+        </Col>
+        <Col span={6}>
+          <Card>
+            <Statistic title="已吊销" value={data.revoked} valueStyle={{ color: '#cf1322' }} />
+          </Card>
+        </Col>
+        <Col span={6}>
+          <Card>
+            <Statistic title="近 24h 调用" value={data.calls_24h} />
+          </Card>
+        </Col>
+      </Row>
+
+      <Card title="按服务范围分布" style={{ marginBottom: 24 }}>
+        <Row gutter={16}>
+          {Object.entries(data.by_scope).map(([scope, cnt]) => (
+            <Col key={scope} span={8}>
+              <Statistic title={scope} value={cnt} />
+            </Col>
+          ))}
+          {Object.keys(data.by_scope).length === 0 && (
+            <Typography.Text type="secondary">暂无数据</Typography.Text>
+          )}
+        </Row>
+      </Card>
+
+      <Card title="最近调用">
+        <Table
+          dataSource={data.recent}
+          rowKey={(_, i) => String(i)}
+          pagination={{ pageSize: 10 }}
+          columns={[
+            { title: 'Token', dataIndex: 'token_prefix', key: 'token_prefix' },
+            { title: '客户端', dataIndex: 'client_id', key: 'client_id' },
+            {
+              title: '服务',
+              dataIndex: 'service',
+              key: 'service',
+              render: (s: string) => (s ? <Tag color="blue">{s}</Tag> : '-'),
+            },
+            {
+              title: '调用时间',
+              dataIndex: 'last_used_at',
+              key: 'last_used_at',
+              render: (t: string) => (t ? new Date(t).toLocaleString('zh-CN') : '-'),
+            },
+          ]}
+        />
+      </Card>
+    </div>
+  );
+}