feat(order-service): 增加客户页自定义公告

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

@@ -40,6 +40,7 @@ import {
   saveAdminOrderServiceProfile,
   type AdminOrderServiceAutoPublishJob,
   type AdminOrderServiceProfile,
+  type OrderServiceAnnouncement,
   type OrderServiceField,
 } from '@/services/admin/worker-platform'
 import { uploadFile } from '@/services/files'
@@ -71,6 +72,7 @@ type OrderServiceFormValues = {
   successText: string
   screenshots: ScreenshotForm
   autoPublish: AutoPublishForm
+  announcement: OrderServiceAnnouncement
 }
 
 const DEFAULT_SCREENSHOTS: ScreenshotForm = {
@@ -88,6 +90,17 @@ const DEFAULT_AUTO_PUBLISH: AutoPublishForm = {
   retryMax: 3,
 }
 
+const DEFAULT_ANNOUNCEMENT: OrderServiceAnnouncement = {
+  enabled: true,
+  title: '公告',
+  content: '由于个人资料填写错误，导致的赠送错误，店铺概不负责！',
+  fontSize: 14,
+  color: '#8a4b00',
+  backgroundColor: '#fff7e6',
+  fontWeight: 'bold',
+  textAlign: 'left',
+}
+
 export default function OrderServicePanel() {
   const { message } = App.useApp()
   const queryClient = useQueryClient()
@@ -141,6 +154,7 @@ export default function OrderServicePanel() {
     (file: File, scene: string) => uploadFile(file, scene, 'admin'),
     [],
   )
+  const announcementPreview = Form.useWatch('announcement', form) || DEFAULT_ANNOUNCEMENT
 
   useEffect(() => {
     if (selectedCategoryId !== null || categories.length === 0) return
@@ -160,6 +174,7 @@ export default function OrderServicePanel() {
       successText: nextProfile?.successText || '资料已提交，请等待处理',
       screenshots: nextProfile?.screenshots || DEFAULT_SCREENSHOTS,
       autoPublish: nextProfile?.autoPublish || DEFAULT_AUTO_PUBLISH,
+      announcement: nextProfile?.announcement || DEFAULT_ANNOUNCEMENT,
     })
     setFields(normalizeFieldOrder(nextProfile?.fields || []))
     setGuideImage(nextProfile?.guideImage || null)
@@ -232,6 +247,7 @@ export default function OrderServicePanel() {
         fields: normalizedFields,
         screenshots: values.screenshots,
         autoPublish: values.autoPublish,
+        announcement: values.announcement,
         submitText: values.submitText,
         successText: values.successText,
       })
@@ -509,6 +525,83 @@ export default function OrderServicePanel() {
                     </div>
                   </section>
 
+                  <section className="order-service-section">
+                    <div className="order-service-section-head">
+                      <div>
+                        <Text strong>页面公告</Text>
+                        <Text type="secondary">显示在客户资料页顶部，可自定义内容和文字样式。</Text>
+                      </div>
+                      <Space size={8}>
+                        <Text type="secondary">显示公告</Text>
+                        <Form.Item
+                          name={['announcement', 'enabled']}
+                          valuePropName="checked"
+                          noStyle
+                        >
+                          <Switch />
+                        </Form.Item>
+                      </Space>
+                    </div>
+                    <Row gutter={[12, 0]}>
+                      <Col xs={24} md={10}>
+                        <Form.Item label="公告标题" name={['announcement', 'title']}>
+                          <Input maxLength={30} 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%' }}
+                          />
+                        </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: '居中' },
+                            ]}
+                          />
+                        </Form.Item>
+                      </Col>
+                      <Col span={24}>
+                        <Form.Item label="公告内容" name={['announcement', 'content']}>
+                          <Input.TextArea
+                            autoSize={{ minRows: 2, maxRows: 5 }}
+                            maxLength={500}
+                            showCount
+                            placeholder="请输入需要客户注意的公告内容"
+                          />
+                        </Form.Item>
+                      </Col>
+                    </Row>
+                    <AnnouncementPreview announcement={announcementPreview} />
+                  </section>
+
                   <section className="order-service-section">
                     <div className="order-service-section-head">
                       <div>
@@ -809,3 +902,29 @@ function resolveProfileStatus(profile: AdminOrderServiceProfile | undefined) {
   }
   return { label: '已归档', tone: 'muted' }
 }
+
+function AnnouncementPreview({ announcement }: { announcement: OrderServiceAnnouncement }) {
+  return (
+    <div
+      className={`order-service-announcement-preview${announcement.enabled ? '' : ' is-disabled'}`}
+      style={{
+        color: announcement.color,
+        backgroundColor: announcement.backgroundColor,
+        textAlign: announcement.textAlign,
+      }}
+    >
+      <Text strong className="order-service-announcement-preview-title">
+        {announcement.title || '公告'}
+      </Text>
+      <div
+        style={{
+          fontSize: announcement.fontSize,
+          fontWeight: announcement.fontWeight,
+        }}
+      >
+        {announcement.content || '公告内容'}
+      </div>
+      {!announcement.enabled ? <span>当前已关闭，不会在客户页显示</span> : null}
+    </div>
+  )
+}