feat(worker-hall): 抢单大厅支持分类与全部按钮图标自定义及PNG透明通道修复

apps/frontend/src/pages/admin/panels/HallConfigPanel.tsx

@@ -1,4 +1,5 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { UploadOutlined } from '@ant-design/icons'
 import {
   App,
   Avatar,
@@ -6,11 +7,13 @@ import {
   Card,
   Descriptions,
   Form,
+  Input,
   InputNumber,
   Space,
   Switch,
   Table,
   Tag,
+  Upload,
 } from 'antd'
 import { useEffect, useMemo, useState } from 'react'
 
@@ -19,11 +22,13 @@ import {
   fetchAdminWorkerHallConfig,
   saveAdminWorkerHallConfig,
 } from '@/services/admin'
+import { uploadFile } from '@/services/files'
 import type { WorkCategory } from '@/types/worker-platform'
 
 type HallConfigFormValues = {
   maxVisibleOrders: number
   showSubcategories: boolean
+  allIconUrl?: string
   categoryMaxVisibleOrders: Record<string, number>
 }
 
@@ -32,6 +37,9 @@ export default function HallConfigPanel() {
   const queryClient = useQueryClient()
   const [form] = Form.useForm<HallConfigFormValues>()
   const [saving, setSaving] = useState(false)
+  const [uploadingAllIcon, setUploadingAllIcon] = useState(false)
+  const currentAllIconUrl = Form.useWatch('allIconUrl', form)
+
   const configQuery = useQuery({
     queryKey: ['admin-worker-hall-config'],
     queryFn: fetchAdminWorkerHallConfig,
@@ -43,6 +51,7 @@ export default function HallConfigPanel() {
       form.setFieldsValue({
         maxVisibleOrders: config.maxVisibleOrders,
         showSubcategories: config.showSubcategories ?? true,
+        allIconUrl: config.allIconUrl || '',
         categoryMaxVisibleOrders: config.categoryMaxVisibleOrders || {},
       })
     }
@@ -74,12 +83,27 @@ export default function HallConfigPanel() {
     })
   }, [categoriesQuery.data?.data.items])
 
+  async function handleUploadAllIcon(file: File) {
+    setUploadingAllIcon(true)
+    try {
+      const uploaded = await uploadFile(file, 'hall_icon', 'admin')
+      form.setFieldValue('allIconUrl', uploaded.url)
+      message.success('「全部」图标上传成功')
+    } catch (error) {
+      message.error(error instanceof Error ? error.message : '图标上传失败')
+    } finally {
+      setUploadingAllIcon(false)
+    }
+    return false
+  }
+
   async function saveConfig(values: HallConfigFormValues) {
     setSaving(true)
     try {
       await saveAdminWorkerHallConfig({
         maxVisibleOrders: Number(values.maxVisibleOrders),
         showSubcategories: Boolean(values.showSubcategories),
+        allIconUrl: values.allIconUrl ? String(values.allIconUrl).trim() : null,
         categoryMaxVisibleOrders: values.categoryMaxVisibleOrders || {},
       })
       await Promise.all([
@@ -96,7 +120,7 @@ export default function HallConfigPanel() {
 
   return (
     <Card title="大厅配置" bordered={false} loading={configQuery.isLoading}>
-      <Space direction="vertical" size="middle" style={{ width: '100%', maxWidth: 640 }}>
+      <Space direction="vertical" size="middle" style={{ width: '100%', maxWidth: 700 }}>
         <Descriptions size="small" column={3}>
           <Descriptions.Item label="展示中">{config?.visibleOrderCount || 0}</Descriptions.Item>
           <Descriptions.Item label="等待入厅">{config?.queuedOrderCount || 0}</Descriptions.Item>
@@ -110,7 +134,7 @@ export default function HallConfigPanel() {
               rules={[{ required: true, message: '请输入大厅订单总数' }]}
               style={{ marginBottom: 12 }}
             >
-              <InputNumber min={1} max={500} precision={0} style={{ width: 160 }} />
+              <InputNumber min={1} max={500} precision={0} style={{ width: 140 }} />
             </Form.Item>
             <Form.Item
               name="showSubcategories"
@@ -121,6 +145,29 @@ export default function HallConfigPanel() {
             >
               <Switch checkedChildren="开启展示" unCheckedChildren="关闭展示" />
             </Form.Item>
+            <Form.Item
+              name="allIconUrl"
+              label="「全部」按钮图标"
+              tooltip="接单大厅第一个「全部」按钮展示的自定义图标。留空则显示默认应用图标。"
+              style={{ marginBottom: 12, minWidth: 280 }}
+            >
+              <Space.Compact style={{ width: '100%' }}>
+                {currentAllIconUrl ? (
+                  <Avatar
+                    src={currentAllIconUrl}
+                    size={32}
+                    shape="square"
+                    style={{ marginRight: 8, flexShrink: 0 }}
+                  />
+                ) : null}
+                <Input placeholder="图标 URL（可选）" allowClear />
+                <Upload showUploadList={false} beforeUpload={handleUploadAllIcon} accept="image/*">
+                  <Button icon={<UploadOutlined />} loading={uploadingAllIcon}>
+                    上传
+                  </Button>
+                </Upload>
+              </Space.Compact>
+            </Form.Item>
           </Space>
 
           <Form.Item>