feat(order-service): 增加提交资料确认与核对摘要

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

@@ -40,8 +40,8 @@ import {
   saveAdminOrderServiceProfile,
   type AdminOrderServiceAutoPublishJob,
   type AdminOrderServiceProfile,
-  type OrderServiceAnnouncement,
   type OrderServiceField,
+  type OrderServiceMaterialConfirmation,
 } from '@/services/admin/worker-platform'
 import { uploadFile } from '@/services/files'
 import type { UploadedFile } from '@/types/worker-platform'
@@ -72,7 +72,7 @@ type OrderServiceFormValues = {
   successText: string
   screenshots: ScreenshotForm
   autoPublish: AutoPublishForm
-  announcement: OrderServiceAnnouncement
+  materialConfirmation: OrderServiceMaterialConfirmation
 }
 
 const DEFAULT_SCREENSHOTS: ScreenshotForm = {
@@ -90,15 +90,13 @@ const DEFAULT_AUTO_PUBLISH: AutoPublishForm = {
   retryMax: 3,
 }
 
-const DEFAULT_ANNOUNCEMENT: OrderServiceAnnouncement = {
+const DEFAULT_MATERIAL_CONFIRMATION: OrderServiceMaterialConfirmation = {
   enabled: true,
-  title: '公告',
-  content: '由于个人资料填写错误，导致的赠送错误，店铺概不负责！',
-  fontSize: 14,
-  color: '#8a4b00',
-  backgroundColor: '#fff7e6',
-  fontWeight: 'bold',
-  textAlign: 'left',
+  title: '提交资料确认',
+  content:
+    '请确认资料填写准确无误。资料提交后不能修改，因个人资料填写错误导致的赠送错误，店铺概不负责！',
+  confirmText: '确认提交',
+  cancelText: '返回检查',
 }
 
 export default function OrderServicePanel() {
@@ -154,7 +152,8 @@ export default function OrderServicePanel() {
     (file: File, scene: string) => uploadFile(file, scene, 'admin'),
     [],
   )
-  const announcementPreview = Form.useWatch('announcement', form) || DEFAULT_ANNOUNCEMENT
+  const materialConfirmationPreview =
+    Form.useWatch('materialConfirmation', form) || DEFAULT_MATERIAL_CONFIRMATION
 
   useEffect(() => {
     if (selectedCategoryId !== null || categories.length === 0) return
@@ -174,7 +173,7 @@ export default function OrderServicePanel() {
       successText: nextProfile?.successText || '资料已提交，请等待处理',
       screenshots: nextProfile?.screenshots || DEFAULT_SCREENSHOTS,
       autoPublish: nextProfile?.autoPublish || DEFAULT_AUTO_PUBLISH,
-      announcement: nextProfile?.announcement || DEFAULT_ANNOUNCEMENT,
+      materialConfirmation: nextProfile?.materialConfirmation || DEFAULT_MATERIAL_CONFIRMATION,
     })
     setFields(normalizeFieldOrder(nextProfile?.fields || []))
     setGuideImage(nextProfile?.guideImage || null)
@@ -247,7 +246,7 @@ export default function OrderServicePanel() {
         fields: normalizedFields,
         screenshots: values.screenshots,
         autoPublish: values.autoPublish,
-        announcement: values.announcement,
+        materialConfirmation: values.materialConfirmation,
         submitText: values.submitText,
         successText: values.successText,
       })
@@ -528,13 +527,15 @@ export default function OrderServicePanel() {
                   <section className="order-service-section">
                     <div className="order-service-section-head">
                       <div>
-                        <Text strong>页面公告</Text>
-                        <Text type="secondary">显示在客户资料页顶部，可自定义内容和文字样式。</Text>
+                        <Text strong>提交资料确认</Text>
+                        <Text type="secondary">
+                          客户点击提交时弹窗确认，可自定义提示内容和按钮文字。
+                        </Text>
                       </div>
                       <Space size={8}>
-                        <Text type="secondary">显示公告</Text>
+                        <Text type="secondary">启用确认</Text>
                         <Form.Item
-                          name={['announcement', 'enabled']}
+                          name={['materialConfirmation', 'enabled']}
                           valuePropName="checked"
                           noStyle
                         >
@@ -543,63 +544,33 @@ export default function OrderServicePanel() {
                       </Space>
                     </div>
                     <Row gutter={[12, 0]}>
-                      <Col xs={24} md={10}>
-                        <Form.Item label="公告标题" name={['announcement', 'title']}>
-                          <Input maxLength={30} placeholder="例如：公告" />
+                      <Col xs={24} md={12}>
+                        <Form.Item label="确认标题" name={['materialConfirmation', 'title']}>
+                          <Input maxLength={40} placeholder="例如：提交资料确认" />
                         </Form.Item>
                       </Col>
-                      <Col xs={12} md={4}>
-                        <Form.Item label="字号" name={['announcement', 'fontSize']}>
-                          <InputNumber
-                            min={12}
-                            max={24}
-                            addonAfter="px"
-                            style={{ width: '100%' }}
-                          />
+                      <Col xs={12} md={6}>
+                        <Form.Item label="确认按钮" name={['materialConfirmation', 'confirmText']}>
+                          <Input maxLength={12} placeholder="确认提交" />
                         </Form.Item>
                       </Col>
-                      <Col xs={12} md={5}>
-                        <Form.Item label="文字颜色" name={['announcement', 'color']}>
-                          <Input type="color" className="order-service-color-input" />
-                        </Form.Item>
-                      </Col>
-                      <Col xs={12} md={5}>
-                        <Form.Item label="背景颜色" name={['announcement', 'backgroundColor']}>
-                          <Input type="color" className="order-service-color-input" />
-                        </Form.Item>
-                      </Col>
-                      <Col xs={12} md={4}>
-                        <Form.Item label="字重" name={['announcement', 'fontWeight']}>
-                          <Select
-                            options={[
-                              { value: 'normal', label: '正常' },
-                              { value: 'bold', label: '加粗' },
-                            ]}
-                          />
-                        </Form.Item>
-                      </Col>
-                      <Col xs={12} md={4}>
-                        <Form.Item label="对齐" name={['announcement', 'textAlign']}>
-                          <Select
-                            options={[
-                              { value: 'left', label: '左对齐' },
-                              { value: 'center', label: '居中' },
-                            ]}
-                          />
+                      <Col xs={12} md={6}>
+                        <Form.Item label="取消按钮" name={['materialConfirmation', 'cancelText']}>
+                          <Input maxLength={12} placeholder="返回检查" />
                         </Form.Item>
                       </Col>
                       <Col span={24}>
-                        <Form.Item label="公告内容" name={['announcement', 'content']}>
+                        <Form.Item label="确认内容" name={['materialConfirmation', 'content']}>
                           <Input.TextArea
-                            autoSize={{ minRows: 2, maxRows: 5 }}
+                            autoSize={{ minRows: 3, maxRows: 6 }}
                             maxLength={500}
                             showCount
-                            placeholder="请输入需要客户注意的公告内容"
+                            placeholder="请输入客户提交资料前需要确认的内容"
                           />
                         </Form.Item>
                       </Col>
                     </Row>
-                    <AnnouncementPreview announcement={announcementPreview} />
+                    <MaterialConfirmationPreview confirmation={materialConfirmationPreview} />
                   </section>
 
                   <section className="order-service-section">
@@ -903,28 +874,30 @@ function resolveProfileStatus(profile: AdminOrderServiceProfile | undefined) {
   return { label: '已归档', tone: 'muted' }
 }
 
-function AnnouncementPreview({ announcement }: { announcement: OrderServiceAnnouncement }) {
+function MaterialConfirmationPreview({
+  confirmation,
+}: {
+  confirmation: OrderServiceMaterialConfirmation
+}) {
   return (
     <div
-      className={`order-service-announcement-preview${announcement.enabled ? '' : ' is-disabled'}`}
-      style={{
-        color: announcement.color,
-        backgroundColor: announcement.backgroundColor,
-        textAlign: announcement.textAlign,
-      }}
+      className={`order-service-confirmation-preview${confirmation.enabled ? '' : ' is-disabled'}`}
     >
-      <Text strong className="order-service-announcement-preview-title">
-        {announcement.title || '公告'}
-      </Text>
-      <div
-        style={{
-          fontSize: announcement.fontSize,
-          fontWeight: announcement.fontWeight,
-        }}
-      >
-        {announcement.content || '公告内容'}
+      <strong>{confirmation.title || '提交资料确认'}</strong>
+      <div className="order-service-confirmation-preview-summary">
+        <span>商品：示例商品</span>
+        <span>游戏账号：customer@example.com</span>
+        <span>区服：安卓</span>
+        <span>截图：2 张</span>
       </div>
-      {!announcement.enabled ? <span>当前已关闭，不会在客户页显示</span> : null}
+      <div className="order-service-confirmation-preview-content">
+        {confirmation.content || '提交资料确认内容'}
+      </div>
+      <div className="order-service-confirmation-preview-actions">
+        <span>{confirmation.cancelText || '返回检查'}</span>
+        <span className="is-primary">{confirmation.confirmText || '确认提交'}</span>
+      </div>
+      {!confirmation.enabled ? <small>当前已关闭，点击提交将直接提交资料</small> : null}
     </div>
   )
 }