新增 React Ant Design 前端骨架

2026-07-07 18:15:02 +08:00
parent c2c168f18e
commit 45d4df74fc
61 changed files with 6869 additions and 0 deletions
@@ -0,0 +1,191 @@
+import { ReloadOutlined, SearchOutlined } from '@ant-design/icons'
+import { Button, Card, Form, Input, Select, Space, Table, Typography } from 'antd'
+import type { TableColumnsType } from 'antd'
+import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { useNavigate, useSearchParams } from 'react-router'
+
+import PageHeader from '@/components/admin/PageHeader'
+import StatusTag from '@/components/admin/StatusTag'
+import { fetchAdminTasks } from '@/services/admin'
+import type { AdminTaskListItem } from '@/types/admin'
+import { adminTaskStatusOptions } from '@/utils/admin-options'
+import { formatAdminDateTime } from '@/utils/admin-time'
+
+type TaskFilterForm = {
+  status?: string
+  platformOrderId?: string
+  taskNo?: string
+  skuCode?: string
+  roleId?: string
+}
+
+export default function AdminTasksPage() {
+  const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const page = Number(searchParams.get('page') || 1) || 1
+  const pageSize = Number(searchParams.get('pageSize') || 20) || 20
+  const filters = {
+    status: searchParams.get('status') || '',
+    platformOrderId: searchParams.get('platformOrderId') || '',
+    taskNo: searchParams.get('taskNo') || '',
+    skuCode: searchParams.get('skuCode') || '',
+    roleId: searchParams.get('roleId') || '',
+  }
+
+  const queryParams = useMemo(
+    () => ({ page, pageSize, ...filters }),
+    [
+      filters.platformOrderId,
+      filters.roleId,
+      filters.skuCode,
+      filters.status,
+      filters.taskNo,
+      page,
+      pageSize,
+    ],
+  )
+  const query = useQuery({
+    queryKey: ['admin-tasks', queryParams],
+    queryFn: () => fetchAdminTasks(queryParams),
+  })
+  const data = query.data?.data
+
+  const columns: TableColumnsType<AdminTaskListItem> = [
+    {
+      title: '任务 / 订单',
+      minWidth: 230,
+      render: (_, row) => (
+        <div className="cell-stack">
+          <Typography.Link onClick={() => navigate(`/admin/tasks/${row.taskId}`)}>
+            {row.taskNo}
+          </Typography.Link>
+          <span className="muted">{row.platformOrderId}</span>
+        </div>
+      ),
+    },
+    {
+      title: '商品',
+      minWidth: 210,
+      render: (_, row) => (
+        <div className="cell-stack">
+          <span>{row.skuName || '-'}</span>
+          <span className="muted">{row.skuCode || row.executorKey}</span>
+        </div>
+      ),
+    },
+    {
+      title: '状态',
+      minWidth: 250,
+      render: (_, row) => (
+        <Space size={[0, 6]} wrap>
+          <StatusTag value={row.status} kind="task" />
+          <StatusTag value={row.resourceStatus} kind="resource" />
+          <StatusTag value={row.customerStatus} kind="customer" />
+        </Space>
+      ),
+    },
+    {
+      title: '角色',
+      minWidth: 180,
+      render: (_, row) => (
+        <div className="cell-stack">
+          <span>{row.roleName || '-'}</span>
+          <span className="muted">{row.roleId || row.loginType || '-'}</span>
+        </div>
+      ),
+    },
+    {
+      title: '时间 / 异常',
+      minWidth: 220,
+      render: (_, row) => (
+        <div className="cell-stack">
+          <span>{formatAdminDateTime(row.updatedAt)}</span>
+          <span className="muted">{row.lastError || '-'}</span>
+        </div>
+      ),
+    },
+  ]
+
+  function applyFilters(values: TaskFilterForm) {
+    setSearchParams(cleanParams({ ...values, page: 1, pageSize }))
+  }
+
+  function resetFilters() {
+    setSearchParams(cleanParams({ page: 1, pageSize }))
+  }
+
+  return (
+    <section className="page-stack">
+      <PageHeader title="任务" description="跟踪履约任务状态、客户步骤和资源准备进度。" />
+
+      <Card>
+        <Form<TaskFilterForm>
+          layout="inline"
+          initialValues={filters}
+          onFinish={applyFilters}
+          className="filter-form"
+        >
+          <Form.Item name="status">
+            <Select
+              allowClear
+              placeholder="任务状态"
+              options={adminTaskStatusOptions}
+              style={{ minWidth: 170 }}
+            />
+          </Form.Item>
+          <Form.Item name="platformOrderId">
+            <Input allowClear placeholder="平台订单号" />
+          </Form.Item>
+          <Form.Item name="taskNo">
+            <Input allowClear placeholder="任务号" />
+          </Form.Item>
+          <Form.Item name="roleId">
+            <Input allowClear placeholder="角色 ID" />
+          </Form.Item>
+          <Form.Item>
+            <Space>
+              <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
+                查询
+              </Button>
+              <Button icon={<ReloadOutlined />} onClick={resetFilters}>
+                重置
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Card>
+
+      <Card>
+        <Table<AdminTaskListItem>
+          rowKey="taskId"
+          loading={query.isLoading || query.isFetching}
+          columns={columns}
+          dataSource={data?.items || []}
+          scroll={{ x: 1080 }}
+          pagination={{
+            current: data?.pagination.page || page,
+            pageSize: data?.pagination.pageSize || pageSize,
+            total: data?.pagination.total || 0,
+            showSizeChanger: true,
+            showTotal: (total) => `共 ${total} 条`,
+            onChange: (nextPage, nextPageSize) => {
+              setSearchParams(cleanParams({ ...filters, page: nextPage, pageSize: nextPageSize }))
+            },
+          }}
+        />
+      </Card>
+    </section>
+  )
+}
+
+function cleanParams(params: Record<string, unknown>) {
+  const next = new URLSearchParams()
+  Object.entries(params).forEach(([key, value]) => {
+    const normalized = String(value ?? '').trim()
+    if (normalized) {
+      next.set(key, normalized)
+    }
+  })
+  return next
+}