From f4fe2006dbc8c10006d6907a5cb1a32597bfc124 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Fri, 30 Oct 2026 17:35:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(chat):=20=E6=94=AF=E6=8C=81=E4=BA=8C?=
 =?UTF-8?q?=E7=BB=B4=E7=A0=81=E6=89=B9=E9=87=8F=E5=AF=BC=E5=85=A5=E4=B8=8E?=
 =?UTF-8?q?=20OCR=20=E8=AF=86=E5=88=AB=EF=BC=8C=E6=96=B0=E5=A2=9E=E6=AC=A2?=
 =?UTF-8?q?=E8=BF=8E=E8=AF=AD=E9=85=8D=E7=BD=AE=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/AppRouter.tsx                |   6 +
 .../features/admin/AdminChatWelcomePage.tsx   | 153 +++++++++++++++++
 .../features/admin/AdminQrCodePoolPage.tsx    | 158 +++++++++++++++++-
 frontend/src/features/admin/api.ts            |  41 +++++
 frontend/src/layouts/AdminLayout.tsx          |   5 +
 5 files changed, 361 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/features/admin/AdminChatWelcomePage.tsx

diff --git a/frontend/src/app/AppRouter.tsx b/frontend/src/app/AppRouter.tsx
index 81a4478..1597ea4 100644
--- a/frontend/src/app/AppRouter.tsx
+++ b/frontend/src/app/AppRouter.tsx
@@ -345,6 +345,11 @@ const AdminChatsPage = lazy(() =>
     default: module.AdminChatsPage,
   }))
 )
+const AdminChatWelcomePage = lazy(() =>
+  import('@/features/admin/AdminChatWelcomePage').then(module => ({
+    default: module.AdminChatWelcomePage,
+  }))
+)
 const AdminQrCodePoolPage = lazy(() =>
   import('@/features/admin/AdminQrCodePoolPage').then(module => ({
     default: module.AdminQrCodePoolPage,
@@ -554,6 +559,7 @@ export function AppRouter() {
             <Route path="pickup" element={<AdminPickupsPage />} />
             <Route path="pickup/:id" element={<AdminPickupDetailPage />} />
             <Route path="chats" element={<AdminChatsPage />} />
+            <Route path="chat-welcome" element={<AdminChatWelcomePage />} />
             <Route path="qrcode-pool" element={<AdminQrCodePoolPage />} />
             <Route path="notifications" element={<AdminNotificationsPage />} />
             <Route path="push" element={<AdminPushPage />} />
diff --git a/frontend/src/features/admin/AdminChatWelcomePage.tsx b/frontend/src/features/admin/AdminChatWelcomePage.tsx
new file mode 100644
index 0000000..29be1ab
--- /dev/null
+++ b/frontend/src/features/admin/AdminChatWelcomePage.tsx
@@ -0,0 +1,153 @@
+import { useEffect, useState } from 'react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { Alert, App, Button, Card, Form, Input, Space, Tag, Typography } from 'antd'
+import { ReloadOutlined } from '@ant-design/icons'
+
+import {
+  fetchChatAutoWelcome,
+  fetchListingGroupWelcome,
+  updateChatAutoWelcome,
+  updateListingGroupWelcome,
+} from '@/features/admin/api'
+import { AdminPageHeader } from '@/features/admin/components/AdminPageHeader'
+import { useAdminSessionStore } from '@/stores/adminSession'
+
+function errorText(error: unknown) {
+  const response = (error as { response?: { data?: { message?: string } } })?.response
+  return response?.data?.message || (error instanceof Error ? error.message : '请求失败')
+}
+
+export function AdminChatWelcomePage() {
+  const { message } = App.useApp()
+  const queryClient = useQueryClient()
+  const [autoForm] = Form.useForm<{ message: string }>()
+  const [groupForm] = Form.useForm<{ message: string }>()
+  const [saving, setSaving] = useState<'auto' | 'group' | null>(null)
+  const permissions = useAdminSessionStore(state => state.admin?.permissions)
+  const canView = Boolean(permissions?.includes('*') || permissions?.includes('system_config:view'))
+  const canManage = Boolean(
+    permissions?.includes('*') || permissions?.includes('system_config:update')
+  )
+
+  const autoQuery = useQuery({
+    queryKey: ['chat-auto-welcome'],
+    queryFn: fetchChatAutoWelcome,
+    enabled: canView,
+  })
+  const groupQuery = useQuery({
+    queryKey: ['chat-listing-group-welcome'],
+    queryFn: fetchListingGroupWelcome,
+    enabled: canView,
+  })
+
+  useEffect(() => {
+    if (autoQuery.data != null) autoForm.setFieldsValue({ message: autoQuery.data })
+  }, [autoQuery.data, autoForm])
+
+  useEffect(() => {
+    if (groupQuery.data != null) groupForm.setFieldsValue({ message: groupQuery.data })
+  }, [groupQuery.data, groupForm])
+
+  if (!canView) {
+    return (
+      <div className="admin-page">
+        <AdminPageHeader eyebrow="JIEYOU OPS · 客服" title="欢迎语配置" />
+        <Alert type="warning" showIcon message="当前账号没有系统配置查看权限" />
+      </div>
+    )
+  }
+
+  const save = async (kind: 'auto' | 'group') => {
+    const form = kind === 'auto' ? autoForm : groupForm
+    const values = await form.validateFields()
+    setSaving(kind)
+    try {
+      if (kind === 'auto') {
+        await updateChatAutoWelcome(values.message.trim())
+        await queryClient.invalidateQueries({ queryKey: ['chat-auto-welcome'] })
+      } else {
+        await updateListingGroupWelcome(values.message.trim())
+        await queryClient.invalidateQueries({ queryKey: ['chat-listing-group-welcome'] })
+      }
+      message.success('欢迎语已保存')
+    } catch (error) {
+      message.error(errorText(error))
+    } finally {
+      setSaving(null)
+    }
+  }
+
+  return (
+    <div className="admin-page">
+      <AdminPageHeader
+        eyebrow="JIEYOU OPS · 客服"
+        title="欢迎语配置"
+        description="维护订单群与账号群的自动欢迎语，客服建群后自动发送。"
+        meta={
+          <Space size={8} wrap>
+            <Tag color="geekblue">订单群</Tag>
+            <Tag color="purple">账号群</Tag>
+          </Space>
+        }
+        extra={
+          <Button
+            icon={<ReloadOutlined />}
+            loading={autoQuery.isFetching || groupQuery.isFetching}
+            onClick={() => {
+              void autoQuery.refetch()
+              void groupQuery.refetch()
+            }}
+          >
+            刷新
+          </Button>
+        }
+      />
+
+      <Card title="订单群欢迎语" className="admin-table-card">
+        <Form form={autoForm} layout="vertical" requiredMark={false}>
+          <Form.Item
+            name="message"
+            label="欢迎语"
+            rules={[{ required: true, message: '请输入欢迎语' }, { max: 500 }]}
+            extra="订单群建立后自动发送给租客与号主"
+          >
+            <Input.TextArea rows={4} maxLength={500} showCount disabled={!canManage} />
+          </Form.Item>
+          <Button
+            type="primary"
+            loading={saving === 'auto'}
+            disabled={!canManage}
+            onClick={() => void save('auto')}
+          >
+            保存订单群欢迎语
+          </Button>
+        </Form>
+      </Card>
+
+      <Card title="账号群欢迎语" className="admin-table-card" style={{ marginTop: 16 }}>
+        <Form form={groupForm} layout="vertical" requiredMark={false}>
+          <Form.Item
+            name="message"
+            label="欢迎语"
+            rules={[{ required: true, message: '请输入欢迎语' }, { max: 500 }]}
+            extra="账号群建立后自动发送，引导号主扫码进企业微信群"
+          >
+            <Input.TextArea rows={4} maxLength={500} showCount disabled={!canManage} />
+          </Form.Item>
+          <Button
+            type="primary"
+            loading={saving === 'group'}
+            disabled={!canManage}
+            onClick={() => void save('group')}
+          >
+            保存账号群欢迎语
+          </Button>
+        </Form>
+      </Card>
+
+      <Typography.Paragraph type="secondary" style={{ marginTop: 12 }}>
+        欢迎语保存在系统配置中，修改后对新建立的群生效。
+      </Typography.Paragraph>
+    </div>
+  )
+}
diff --git a/frontend/src/features/admin/AdminQrCodePoolPage.tsx b/frontend/src/features/admin/AdminQrCodePoolPage.tsx
index 6e9b86d..fdf5f49 100644
--- a/frontend/src/features/admin/AdminQrCodePoolPage.tsx
+++ b/frontend/src/features/admin/AdminQrCodePoolPage.tsx
@@ -27,11 +27,13 @@ import {
 import dayjs, { type Dayjs } from 'dayjs'
 
 import {
+  batchCreateAdminQrCodes,
   batchDeleteAdminQrCodes,
   createAdminQrCode,
   deleteAdminQrCode,
   fetchAdminQrCodeStats,
   fetchAdminQrCodes,
+  recognizeQrCodeGroupName,
   updateAdminQrCode,
 } from '@/features/admin/api'
 import { AdminPageHeader } from '@/features/admin/components/AdminPageHeader'
@@ -39,7 +41,7 @@ import { DataTable } from '@/features/admin/components/DataTable'
 import { FilterBar, FilterField } from '@/features/admin/components/FilterBar'
 import type { AdminQrCode } from '@/features/admin/types'
 import { useAdminSessionStore } from '@/stores/adminSession'
-import { uploadFile } from '@/shared/api/files'
+import { uploadAdminFile } from '@/shared/api/files'
 import { formatDateTime, formatText } from '@/shared/utils/format'
 
 interface Filters {
@@ -89,6 +91,11 @@ export function AdminQrCodePoolPage() {
   const [createOpen, setCreateOpen] = useState(false)
   const [editing, setEditing] = useState<AdminQrCode>()
   const [imageURL, setImageURL] = useState('')
+  const [imageFile, setImageFile] = useState<File>()
+  const [ocrLoading, setOcrLoading] = useState(false)
+  const [batchOpen, setBatchOpen] = useState(false)
+  const [batchFiles, setBatchFiles] = useState<Array<{ uid: string; file: File; name: string }>>([])
+  const [batchImporting, setBatchImporting] = useState(false)
   const [uploading, setUploading] = useState(false)
   const [submitting, setSubmitting] = useState(false)
   const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([])
@@ -237,8 +244,9 @@ export function AdminQrCodePoolPage() {
 
   const upload = async (file: File) => {
     setUploading(true)
+    setImageFile(file)
     try {
-      const uploaded = await uploadFile(file, 'qrcode')
+      const uploaded = await uploadAdminFile(file, 'qrcode')
       setImageURL(uploaded.url)
       message.success('图片已上传')
     } catch (error) {
@@ -385,6 +393,16 @@ export function AdminQrCodePoolPage() {
             >
               刷新
             </Button>
+            <Button
+              icon={<UploadOutlined />}
+              disabled={!canManage}
+              onClick={() => {
+                setBatchFiles([])
+                setBatchOpen(true)
+              }}
+            >
+              批量导入
+            </Button>
             <Button type="primary" icon={<PlusOutlined />} disabled={!canManage} onClick={openCreate}>
               添加二维码
             </Button>
@@ -523,6 +541,30 @@ export function AdminQrCodePoolPage() {
                   {imageURL ? '重新上传' : '上传图片'}
                 </Button>
               </Upload>
+              <Button
+                loading={ocrLoading}
+                disabled={!imageFile}
+                onClick={async () => {
+                  if (!imageFile) return
+                  setOcrLoading(true)
+                  try {
+                    const result = await recognizeQrCodeGroupName(imageFile)
+                    const name = (result?.group_name || result?.text || '').trim()
+                    if (!name) {
+                      message.warning('未识别到群名，请手动填写')
+                    } else {
+                      createForm.setFieldValue('group_name', name)
+                      message.success('已识别群名')
+                    }
+                  } catch (error) {
+                    message.error(errorText(error))
+                  } finally {
+                    setOcrLoading(false)
+                  }
+                }}
+              >
+                识别群名
+              </Button>
             </Space>
           </Form.Item>
           <Form.Item name="group_name" label="群名称">
@@ -537,6 +579,118 @@ export function AdminQrCodePoolPage() {
         </Form>
       </Modal>
 
+      <Modal
+        open={batchOpen}
+        title="批量导入二维码"
+        okText={`导入 ${batchFiles.length || ''} 张`}
+        cancelText="取消"
+        width={640}
+        confirmLoading={batchImporting}
+        okButtonProps={{ disabled: batchFiles.length === 0 }}
+        onCancel={() => (batchImporting ? undefined : setBatchOpen(false))}
+        onOk={async () => {
+          if (batchFiles.length === 0) return
+          setBatchImporting(true)
+          try {
+            const items: Array<{ image_url: string; group_name?: string }> = []
+            for (const item of batchFiles) {
+              const uploaded = await uploadAdminFile(item.file, 'qrcode')
+              items.push({ image_url: uploaded.url, group_name: item.name || undefined })
+            }
+            await batchCreateAdminQrCodes(items)
+            message.success(`已导入 ${items.length} 张二维码`)
+            setBatchOpen(false)
+            setBatchFiles([])
+            await invalidate()
+          } catch (error) {
+            message.error(errorText(error))
+          } finally {
+            setBatchImporting(false)
+          }
+        }}
+        maskClosable={!batchImporting}
+      >
+        <Alert
+          type="info"
+          showIcon
+          className="admin-table-alert"
+          message="一次最多导入 20 张，上传后可用「识别群名」自动填充"
+        />
+        <Upload
+          accept="image/*"
+          multiple
+          showUploadList={false}
+          beforeUpload={file => {
+            const f = file as File
+            setBatchFiles(current =>
+              current.length >= 20
+                ? current
+                : [...current, { uid: `${Date.now()}-${Math.random()}`, file: f, name: '' }]
+            )
+            return false
+          }}
+        >
+          <Button icon={<UploadOutlined />}>选择图片（可多选）</Button>
+        </Upload>
+        <div className="admin-stack" style={{ gap: 10, marginTop: 12, maxHeight: 320, overflowY: 'auto' }}>
+          {batchFiles.map(item => (
+            <Space key={item.uid} size={8} align="center" style={{ width: '100%' }}>
+              <Typography.Text ellipsis style={{ maxWidth: 180 }}>
+                {item.file.name}
+              </Typography.Text>
+              <Input
+                size="small"
+                placeholder="群名称（可选）"
+                value={item.name}
+                onChange={event =>
+                  setBatchFiles(current =>
+                    current.map(entry =>
+                      entry.uid === item.uid ? { ...entry, name: event.target.value } : entry
+                    )
+                  )
+                }
+              />
+              <Button
+                size="small"
+                loading={ocrLoading}
+                onClick={async () => {
+                  setOcrLoading(true)
+                  try {
+                    const result = await recognizeQrCodeGroupName(item.file)
+                    const name = (result?.group_name || result?.text || '').trim()
+                    if (name) {
+                      setBatchFiles(current =>
+                        current.map(entry => (entry.uid === item.uid ? { ...entry, name } : entry))
+                      )
+                    } else {
+                      message.warning('未识别到群名')
+                    }
+                  } catch (error) {
+                    message.error(errorText(error))
+                  } finally {
+                    setOcrLoading(false)
+                  }
+                }}
+              >
+                识别
+              </Button>
+              <Button
+                size="small"
+                danger
+                onClick={() =>
+                  setBatchFiles(current => current.filter(entry => entry.uid !== item.uid))
+                }
+              >
+                移除
+              </Button>
+            </Space>
+          ))}
+          {batchFiles.length === 0 ? (
+            <Typography.Text type="secondary">还没有选择图片</Typography.Text>
+          ) : null}
+        </div>
+      </Modal>
+
       <Modal
         open={Boolean(editing)}
         title={editing ? `编辑二维码 #${editing.id}` : '编辑二维码'}
diff --git a/frontend/src/features/admin/api.ts b/frontend/src/features/admin/api.ts
index 0be4b0a..1e7d667 100644
--- a/frontend/src/features/admin/api.ts
+++ b/frontend/src/features/admin/api.ts
@@ -2026,3 +2026,44 @@ export async function updateCrashConfig(payload: Partial<AdminCrashConfig>) {
   )
   return data.data
 }
+
+export async function fetchChatAutoWelcome() {
+  const { data } = await adminClient.get<ApiResponse<{ message: string }>>(
+    '/admin/chats/auto-welcome'
+  )
+  return data.data.message ?? ''
+}
+
+export async function updateChatAutoWelcome(message: string) {
+  const { data } = await adminClient.put<ApiResponse<{ message: string }>>(
+    '/admin/chats/auto-welcome',
+    { message }
+  )
+  return data.data
+}
+
+export async function fetchListingGroupWelcome() {
+  const { data } = await adminClient.get<ApiResponse<{ message: string }>>(
+    '/admin/chats/listing-group-welcome'
+  )
+  return data.data.message ?? ''
+}
+
+export async function updateListingGroupWelcome(message: string) {
+  const { data } = await adminClient.put<ApiResponse<{ message: string }>>(
+    '/admin/chats/listing-group-welcome',
+    { message }
+  )
+  return data.data
+}
+
+export async function recognizeQrCodeGroupName(file: File) {
+  const form = new FormData()
+  form.append('file', file)
+  const { data } = await adminClient.post<{ data: { group_name?: string; text?: string } }>(
+    '/admin/chats/qrcodes/ocr-group-name',
+    form,
+    { headers: { 'Content-Type': 'multipart/form-data' } }
+  )
+  return data.data
+}
diff --git a/frontend/src/layouts/AdminLayout.tsx b/frontend/src/layouts/AdminLayout.tsx
index 3d33c79..8c6731a 100644
--- a/frontend/src/layouts/AdminLayout.tsx
+++ b/frontend/src/layouts/AdminLayout.tsx
@@ -164,6 +164,7 @@ const allNavGroups: NavGroup[] = [
       { key: '/qrcode-pool', label: '二维码池', permission: 'qrcode:view' },
       { key: '/manual-entries', label: '手工录单', permission: 'cs_manual_entry:view' },
       { key: '/chat-quick-replies', label: '快捷回复', permission: 'chat:view' },
+      { key: '/chat-welcome', label: '欢迎语配置', permission: 'system_config:view' },
     ],
   },
   {
@@ -242,6 +243,10 @@ const sectionMeta: Record<string, { title: string; description: string }> = {
     title: '客服会话',
     description: '按阶段筛选会话、回复用户并转接客服。',
   },
+  '/chat-welcome': {
+    title: '欢迎语配置',
+    description: '维护订单群与账号群的自动欢迎语。',
+  },
   '/qrcode-pool': {
     title: '二维码池',
     description: '维护企业微信群二维码，按未使用顺序自动发放。',