优化后台UI与开放文档排版设计

frontend/src/pages/PlatformMerchants.tsx

@@ -20,6 +20,7 @@ import { useNavigate } from 'react-router-dom'
 import { platformApi } from '../api'
 import type { Merchant, MerchantMember, PageResult, ProductCatalogItem } from '../types'
 import { formatDateTime } from '../utils/time'
+import { PageHeader } from '../components/PageHeader'
 
 const memberRoleOptions = [
   { value: 'owner', label: '负责人' },
@@ -194,7 +195,23 @@ export default function PlatformMerchants() {
         </Space>
       ),
     },
-    { title: '状态', dataIndex: 'status', width: 90, render: (v) => v === 'active' ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag> },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 100,
+      render: (v) =>
+        v === 'active' ? (
+          <span className="status-tag status-tag--green">
+            <span className="status-dot"></span>
+            已启用
+          </span>
+        ) : (
+          <span className="status-tag status-tag--gray">
+            <span className="status-dot"></span>
+            已禁用
+          </span>
+        ),
+    },
     { title: '创建时间', dataIndex: 'created_at', width: 180, render: formatDateTime },
     {
       title: '操作',
@@ -257,35 +274,34 @@ export default function PlatformMerchants() {
 
   return (
     <div>
-      <Space style={{ marginBottom: 16, width: '100%', justifyContent: 'space-between' }}>
-        <div>
-          <Typography.Title level={4} style={{ margin: 0 }}>
-            商户管理
-          </Typography.Title>
-          <Typography.Text type="secondary">平台管理员维护租户与授权关系。</Typography.Text>
-        </div>
-        <Space>
-          <Button icon={<ReloadOutlined />} onClick={() => load()}>
-            刷新
-          </Button>
-          <Button
-            type="primary"
-            icon={<PlusOutlined />}
-            onClick={() => {
-              createForm.resetFields()
-              createForm.setFieldsValue({
-                features: featureOptions.map((item) => item.value),
-                fee_type: 'rate',
-                fee_rate_bp: 0,
-                fee_fixed_amount: 0,
-              })
-              setCreateOpen(true)
-            }}
-          >
-            新增商户
-          </Button>
-        </Space>
-      </Space>
+      <PageHeader
+        title="平台商户管理"
+        subtitle="平台管理员维护各分销商户租户、分配商品库、配置手续费费率与授权成员"
+        breadcrumbs={[{ title: '商户管理' }]}
+        extra={
+          <Space>
+            <Button icon={<ReloadOutlined />} onClick={() => load()}>
+              刷新
+            </Button>
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={() => {
+                createForm.resetFields()
+                createForm.setFieldsValue({
+                  features: featureOptions.map((item) => item.value),
+                  fee_type: 'rate',
+                  fee_rate_bp: 0,
+                  fee_fixed_amount: 0,
+                })
+                setCreateOpen(true)
+              }}
+            >
+              新增商户
+            </Button>
+          </Space>
+        }
+      />
 
       <Table
         rowKey="id"