diff --git a/src/pages/Membership.tsx b/src/pages/Membership.tsx
new file mode 100644
index 0000000..741666e
--- /dev/null
+++ b/src/pages/Membership.tsx
@@ -0,0 +1,79 @@
+import { useState } from 'react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { Table, Button, Typography, App, Modal, Input, InputNumber, Tag, Tabs, Space } from 'antd'
+import { ReloadOutlined, PlusOutlined, DollarOutlined } from '@ant-design/icons'
+import { api } from '@/services/http-client'
+import dayjs from 'dayjs'
+
+const { Title } = Typography
+
+function MembershipPage() {
+  const { message } = App.useApp()
+  const qc = useQueryClient()
+  const [addOpen, setAddOpen] = useState(false)
+  const [newPlan, setNewPlan] = useState({ name: '', code: '', priceMonthly: 0, monthlyChatCount: 10 })
+
+  const { data: plans } = useQuery({ queryKey: ['quota', 'plans'], queryFn: (): Promise<any> => api.get('/admin-api/quota/plans') })
+  const { data: memberships } = useQuery({ queryKey: ['quota', 'memberships'], queryFn: (): Promise<any> => api.get('/admin-api/quota/memberships') })
+  const { data: costs } = useQuery({ queryKey: ['quota', 'costs'], queryFn: (): Promise<any> => api.get('/admin-api/quota/costs') })
+
+  const addPlan = async () => {
+    await api.post('/admin-api/quota/plans', newPlan)
+    message.success('已添加')
+    setAddOpen(false)
+    qc.invalidateQueries({ queryKey: ['quota'] })
+  }
+
+  const planCols = [
+    { title: '名称', dataIndex: 'name', width: 120 },
+    { title: '代码', dataIndex: 'code', width: 100 },
+    { title: '月费', dataIndex: 'priceMonthly', width: 80, render: (v: number) => `¥${v}` },
+    { title: '年费', dataIndex: 'priceYearly', width: 80, render: (v: number) => `¥${v}` },
+    { title: '月聊天', dataIndex: 'monthlyChatCount', width: 80 },
+    { title: '月OCR', dataIndex: 'monthlyOcrPages', width: 80 },
+    { title: '状态', dataIndex: 'isActive', width: 70, render: (v: boolean) => <Tag color={v ? 'green' : 'default'}>{v ? '启用' : '禁用'}</Tag> },
+  ]
+
+  const memberCols = [
+    { title: '用户', dataIndex: ['user', 'email'], width: 200 },
+    { title: '计划', dataIndex: ['plan', 'name'], width: 120 },
+    { title: '开始', dataIndex: 'startedAt', width: 100, render: (d: string) => dayjs(d).format('MM-DD') },
+    { title: '状态', dataIndex: 'active', width: 70, render: (v: boolean) => <Tag color={v ? 'green' : 'red'}>{v ? '有效' : '失效'}</Tag> },
+  ]
+
+  const costCols = [
+    { title: '日期', dataIndex: 'date', width: 100, render: (d: string) => dayjs(d).format('MM-DD') },
+    { title: '服务商', dataIndex: 'provider', width: 80 },
+    { title: '模型', dataIndex: 'model', width: 120 },
+    { title: '调用', dataIndex: 'calls', width: 70, align: 'center' as const },
+    { title: 'Token', dataIndex: 'tokens', width: 90, align: 'center' as const },
+    { title: '费用', dataIndex: 'cost', width: 80, render: (v: number) => `¥${v.toFixed(4)}` },
+  ]
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
+        <Title level={5} style={{ margin: 0 }}><DollarOutlined /> 会员与额度</Title>
+        <Space>
+          <Button icon={<PlusOutlined />} type="primary" onClick={() => setAddOpen(true)}>新增计划</Button>
+          <Button icon={<ReloadOutlined />} onClick={() => qc.invalidateQueries({ queryKey: ['quota'] })}>刷新</Button>
+        </Space>
+      </div>
+
+      <Tabs items={[
+        { key: 'plans', label: '会员计划', children: <Table dataSource={plans || []} columns={planCols} rowKey="id" pagination={false} size="small" /> },
+        { key: 'members', label: '用户会员', children: <Table dataSource={memberships || []} columns={memberCols} rowKey="id" pagination={{ pageSize: 20 }} size="small" /> },
+        { key: 'costs', label: '成本汇总', children: <Table dataSource={costs || []} columns={costCols} rowKey="id" pagination={{ pageSize: 20 }} size="small" /> },
+      ]} />
+
+      <Modal title="新增会员计划" open={addOpen} onOk={addPlan} onCancel={() => setAddOpen(false)} okText="添加">
+        <Input placeholder="名称" value={newPlan.name} onChange={e => setNewPlan({ ...newPlan, name: e.target.value })} style={{ marginBottom: 12 }} />
+        <Input placeholder="代码" value={newPlan.code} onChange={e => setNewPlan({ ...newPlan, code: e.target.value })} style={{ marginBottom: 12 }} />
+        <InputNumber placeholder="月费" value={newPlan.priceMonthly} onChange={v => setNewPlan({ ...newPlan, priceMonthly: v || 0 })} style={{ width: '100%', marginBottom: 12 }} prefix="¥" />
+        <InputNumber placeholder="月聊天次数" value={newPlan.monthlyChatCount} onChange={v => setNewPlan({ ...newPlan, monthlyChatCount: v || 0 })} style={{ width: '100%' }} />
+      </Modal>
+    </div>
+  )
+}
+
+export default MembershipPage