dukang/apps/admin-web/src/pages/WechatBindingsPage.tsx

import { useEffect, useState } from 'react';
import {
  Button, Descriptions, Drawer, Form, Input, Select, Space, Table, Tag, Typography,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { request } from '../lib/api';
import { AdminCellLine } from '../components/AdminCellLine';
import { fmtTime, maskPhone } from '../lib/constants';
import { useAdminList } from '../lib/useAdminList';

type ActorType = 'USER' | 'STORE' | 'PARTNER' | 'HQ';

type Identity = {
  actorType: ActorType;
  actorId: string;
  phone: string | null;
  name: string | null;
  wxOpenId: string;
  wxUnionId: string | null;
  phoneVerified?: boolean;
  refLabel: string | null;
  refId: string | null;
  lastLoginAt: string | null;
  status: string | number;
};

type GroupRow = {
  groupKey: string;
  unionId: string | null;
  identityCount: number;
  actorTypes: ActorType[];
  multiRole: boolean;
  primaryPhone: string | null;
  latestLoginAt: string | null;
  identities: Identity[];
};

const ACTOR_TYPE_LABELS: Record<ActorType, string> = {
  USER: 'C 端用户',
  STORE: '门店账号',
  PARTNER: '合伙人账号',
  HQ: 'HQ 账号',
};

const ACTOR_TYPE_COLORS: Record<ActorType, string> = {
  USER: 'blue',
  STORE: 'green',
  PARTNER: 'orange',
  HQ: 'purple',
};

function renderActorTags(types: ActorType[]) {
  return types.map((t) => (
    <Tag key={t} color={ACTOR_TYPE_COLORS[t]}>
      {ACTOR_TYPE_LABELS[t]}
    </Tag>
  ));
}

export default function WechatBindingsPage() {
  const [form] = Form.useForm();
  const [filters, setFilters] = useState<Record<string, string>>({
    actorType: '',
    phone: '',
    unionId: '',
    openId: '',
  });
  const { data, loading, page, pageSize, setPage, setPageSize, reload } = useAdminList<GroupRow>(
    '/admin/wechat-bindings',
    () => {
      const qs = new URLSearchParams();
      if (filters.actorType) qs.set('actorType', filters.actorType);
      if (filters.phone) qs.set('phone', filters.phone);
      if (filters.unionId) qs.set('unionId', filters.unionId);
      if (filters.openId) qs.set('openId', filters.openId);
      return qs;
    },
    [filters],
  );
  const [detail, setDetail] = useState<GroupRow | null>(null);
  const [drawerOpen, setDrawerOpen] = useState(false);

  useEffect(() => {
    form.setFieldsValue(filters);
  }, [form, filters]);

  async function openDetail(row: GroupRow) {
    const res = await request<GroupRow>(`/admin/wechat-bindings/${encodeURIComponent(row.groupKey)}`);
    setDetail(res);
    setDrawerOpen(true);
  }

  const columns: ColumnsType<GroupRow> = [
    {
      title: 'unionId',
      dataIndex: 'unionId',
      width: 180,
      ellipsis: true,
      render: (v) => v || <Tag>无 unionId</Tag>,
    },
    {
      title: '身份数',
      dataIndex: 'identityCount',
      width: 90,
      render: (v, r) => (
        <Space size={4}>
          <span>{v}</span>
          {r.multiRole ? <Tag color="red">一人多角色</Tag> : null}
        </Space>
      ),
    },
    {
      title: '端类型',
      dataIndex: 'actorTypes',
      width: 220,
      render: (types: ActorType[]) => renderActorTags(types),
    },
    {
      title: '手机号',
      dataIndex: 'primaryPhone',
      width: 140,
      render: (v) => maskPhone(v),
    },
    {
      title: '身份摘要',
      ellipsis: true,
      render: (_, r) => (
        <AdminCellLine
          primary={r.identities.map((i) => ACTOR_TYPE_LABELS[i.actorType]).join(' / ')}
          secondary={r.identities
            .map((i) => i.refLabel || i.name || (i.phone ? maskPhone(i.phone) : ''))
            .filter(Boolean)
            .join(' · ')}
        />
      ),
    },
    {
      title: '最近登录',
      dataIndex: 'latestLoginAt',
      width: 160,
      render: fmtTime,
    },
    {
      title: '操作',
      width: 80,
      render: (_, row) => (
        <Button type="link" size="small" onClick={() => void openDetail(row)}>
          详情
        </Button>
      ),
    },
  ];

  const identityColumns: ColumnsType<Identity> = [
    {
      title: '端类型',
      dataIndex: 'actorType',
      width: 120,
      render: (t: ActorType) => <Tag color={ACTOR_TYPE_COLORS[t]}>{ACTOR_TYPE_LABELS[t]}</Tag>,
    },
    {
      title: '账号',
      ellipsis: true,
      render: (_, r) => (
        <AdminCellLine
          primary={r.name || '—'}
          secondary={[r.phone ? maskPhone(r.phone) : null, `#${r.actorId}`].filter(Boolean).join(' ')}
        />
      ),
    },
    {
      title: '归属',
      dataIndex: 'refLabel',
      width: 160,
      ellipsis: true,
      render: (v, r) => (v ? `${v}${r.refId ? ` #${r.refId}` : ''}` : '—'),
    },
    {
      title: 'wxOpenId',
      dataIndex: 'wxOpenId',
      width: 160,
      ellipsis: true,
    },
    {
      title: '手机验证',
      width: 90,
      render: (_, r) =>
        r.actorType === 'USER' ? (
          r.phoneVerified ? <Tag color="blue">已验证</Tag> : <Tag>未验证</Tag>
        ) : (
          '—'
        ),
    },
    {
      title: '最近登录',
      dataIndex: 'lastLoginAt',
      width: 160,
      render: fmtTime,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 90,
      render: (v) => String(v),
    },
  ];

  return (
    <div>
      <Typography.Title level={4}>微信绑定总览</Typography.Title>
      <Typography.Paragraph type="secondary">
        按 unionId 聚合展示已绑定微信的 C 端用户、门店账号、合伙人账号与 HQ 账号；无 unionId 时按单账号分组。
      </Typography.Paragraph>

      <Form
        form={form}
        layout="inline"
        style={{ marginBottom: 16 }}
        onFinish={(values) => {
          setPage(1);
          setFilters({
            actorType: values.actorType ?? '',
            phone: values.phone?.trim() ?? '',
            unionId: values.unionId?.trim() ?? '',
            openId: values.openId?.trim() ?? '',
          });
        }}
      >
        <Form.Item name="actorType" label="端类型">
          <Select
            allowClear
            placeholder="全部"
            style={{ width: 140 }}
            options={[
              { value: 'USER', label: 'C 端用户' },
              { value: 'STORE', label: '门店账号' },
              { value: 'PARTNER', label: '合伙人账号' },
              { value: 'HQ', label: 'HQ 账号' },
            ]}
          />
        </Form.Item>
        <Form.Item name="phone" label="手机号">
          <Input allowClear placeholder="模糊匹配" style={{ width: 140 }} />
        </Form.Item>
        <Form.Item name="unionId" label="unionId">
          <Input allowClear placeholder="精确匹配" style={{ width: 180 }} />
        </Form.Item>
        <Form.Item name="openId" label="openId">
          <Input allowClear placeholder="精确匹配" style={{ width: 180 }} />
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button
              onClick={() => {
                form.resetFields();
                setPage(1);
                setFilters({ actorType: '', phone: '', unionId: '', openId: '' });
              }}
            >
              重置
            </Button>
            <Button onClick={() => void reload()}>刷新</Button>
          </Space>
        </Form.Item>
      </Form>

      <Table<GroupRow>
        rowKey="groupKey"
        loading={loading}
        columns={columns}
        dataSource={data?.items ?? []}
        pagination={{
          current: page,
          pageSize,
          total: data?.total ?? 0,
          showSizeChanger: true,
          onChange: (p, ps) => {
            setPage(p);
            setPageSize(ps);
          },
        }}
      />

      <Drawer
        title="微信绑定详情"
        width={960}
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
      >
        {detail ? (
          <>
            <Descriptions column={2} size="small" bordered style={{ marginBottom: 16 }}>
              <Descriptions.Item label="groupKey">{detail.groupKey}</Descriptions.Item>
              <Descriptions.Item label="unionId">{detail.unionId || '—'}</Descriptions.Item>
              <Descriptions.Item label="身份数">{detail.identityCount}</Descriptions.Item>
              <Descriptions.Item label="端类型">{renderActorTags(detail.actorTypes)}</Descriptions.Item>
              <Descriptions.Item label="一人多角色">
                {detail.multiRole ? <Tag color="red">是</Tag> : <Tag>否</Tag>}
              </Descriptions.Item>
              <Descriptions.Item label="最近登录">{fmtTime(detail.latestLoginAt)}</Descriptions.Item>
            </Descriptions>
            <Table<Identity>
              rowKey={(r) => `${r.actorType}-${r.actorId}`}
              size="small"
              columns={identityColumns}
              dataSource={detail.identities}
              pagination={false}
            />
          </>
        ) : null}
      </Drawer>
    </div>
  );
}