pay-bridge/frontend/src/pages/app/index.tsx

import { useState } from 'react'
import {
  Table, Tag, Button, Space, Card, Modal, Form, Input,
  message, Popconfirm, Alert, Typography,
} from 'antd'
import { KeyOutlined, PlusOutlined } from '@ant-design/icons'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import type { ColumnsType } from 'antd/es/table'
import dayjs from 'dayjs'
import { appApi } from '../../api/app'
import type { App } from '../../types'

const { Text } = Typography

export default function AppPage() {
  const [createOpen, setCreateOpen] = useState(false)
  const [secretModal, setSecretModal] = useState<{ appID: string; secret: string; tip: string } | null>(null)
  const [form] = Form.useForm()
  const qc = useQueryClient()

  const { data, isLoading } = useQuery({
    queryKey: ['apps'],
    queryFn: () => appApi.list({ limit: 50, offset: 0 }),
  })

  const createMutation = useMutation({
    mutationFn: appApi.create,
    onSuccess: (res) => {
      setCreateOpen(false)
      form.resetFields()
      qc.invalidateQueries({ queryKey: ['apps'] })
      const d = res.data.data
      setSecretModal({ appID: d.app_id, secret: d.app_secret, tip: d.secret_tip })
    },
  })

  const disableMutation = useMutation({
    mutationFn: appApi.disable,
    onSuccess: () => {
      message.success('已禁用')
      qc.invalidateQueries({ queryKey: ['apps'] })
    },
  })

  const enableMutation = useMutation({
    mutationFn: appApi.enable,
    onSuccess: () => {
      message.success('已启用')
      qc.invalidateQueries({ queryKey: ['apps'] })
    },
  })

  const resetMutation = useMutation({
    mutationFn: appApi.resetSecret,
    onSuccess: (res) => {
      const d = res.data.data
      setSecretModal({ appID: d.app_id, secret: d.app_secret, tip: d.secret_tip })
    },
  })

  const columns: ColumnsType<App> = [
    { title: 'App ID', dataIndex: 'app_id', width: 200 },
    { title: '应用名称', dataIndex: 'app_name', width: 160 },
    {
      title: '状态',
      dataIndex: 'status',
      width: 80,
      render: (v: number) =>
        v === 1 ? <Tag color="success">启用</Tag> : <Tag color="default">禁用</Tag>,
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      width: 180,
      render: (v) => dayjs(v).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '操作',
      width: 220,
      render: (_, record) => (
        <Space>
          <Popconfirm
            title="重置后旧密钥立即失效，确认重置？"
            onConfirm={() => resetMutation.mutate(record.app_id)}
          >
            <Button size="small" icon={<KeyOutlined />}>重置密钥</Button>
          </Popconfirm>
          {record.status === 1 ? (
            <Popconfirm title="禁用后该应用将无法访问，确认？" onConfirm={() => disableMutation.mutate(record.app_id)}>
              <Button size="small" danger>禁用</Button>
            </Popconfirm>
          ) : (
            <Popconfirm title="确认启用该应用？" onConfirm={() => enableMutation.mutate(record.app_id)}>
              <Button size="small">启用</Button>
            </Popconfirm>
          )}
        </Space>
      ),
    },
  ]

  const list: App[] = data?.data?.data?.list ?? []

  return (
    <>
      <Card
        extra={
          <Button type="primary" icon={<PlusOutlined />} onClick={() => setCreateOpen(true)}>
            新建应用
          </Button>
        }
      >
        <Table
          rowKey="app_id"
          columns={columns}
          dataSource={list}
          loading={isLoading}
          scroll={{ x: 800 }}
        />
      </Card>

      {/* 新建应用弹窗 */}
      <Modal
        title="新建接入应用"
        open={createOpen}
        onOk={() => form.submit()}
        onCancel={() => { setCreateOpen(false); form.resetFields() }}
        confirmLoading={createMutation.isPending}
      >
        <Form form={form} layout="vertical" onFinish={(v) => createMutation.mutate(v)}>
          <Form.Item name="app_name" label="应用名称" rules={[{ required: true, message: '请输入应用名称' }]}>
            <Input placeholder="例如：商城系统、ERP系统" />
          </Form.Item>
        </Form>
        <Alert
          type="info"
          showIcon
          message="App ID 和 App Secret 将在创建后自动生成，Secret 仅展示一次，请妥善保存。"
          style={{ marginTop: 8 }}
        />
      </Modal>

      {/* Secret 展示弹窗（创建/重置后） */}
      <Modal
        title="请妥善保存以下凭证"
        open={!!secretModal}
        footer={<Button type="primary" onClick={() => setSecretModal(null)}>我已保存</Button>}
        onCancel={() => setSecretModal(null)}
        closable={false}
        maskClosable={false}
      >
        {secretModal && (
          <>
            <Alert
              type="warning"
              showIcon
              message={secretModal.tip}
              style={{ marginBottom: 16 }}
            />
            <Form layout="vertical">
              <Form.Item label="App ID">
                <Text copyable code>{secretModal.appID}</Text>
              </Form.Item>
              <Form.Item label="App Secret">
                <Text copyable code>{secretModal.secret}</Text>
              </Form.Item>
            </Form>
          </>
        )}
      </Modal>
    </>
  )
}