feat(order-service): 优化用户引导图配置与展示

apps/frontend/src/pages/public/OrderServicePage.tsx

@@ -601,6 +601,8 @@ function OrderServiceForm({
     label: '截图',
     helpText: '',
   }
+  const guideImageUrl =
+    item.guideImage && 'url' in item.guideImage ? String(item.guideImage.url || '').trim() : ''
 
   return (
     <Card size="small" className="collect-link-order-card">
@@ -618,14 +620,6 @@ function OrderServiceForm({
         {item.title ? <Title level={5}>{item.title}</Title> : null}
         {item.description ? <Text type="secondary">{item.description}</Text> : null}
 
-        {item.guideImage && 'url' in item.guideImage && item.guideImage.url ? (
-          <img
-            alt="填写引导图"
-            src={String(item.guideImage.url)}
-            style={{ width: '100%', borderRadius: 8 }}
-          />
-        ) : null}
-
         {item.fields && item.fields.length > 0 ? (
           <Form layout="vertical" initialValues={item.values || {}} onFinish={onSubmit}>
             {item.fields.map((field) => (
@@ -672,24 +666,47 @@ function OrderServiceForm({
                 }
                 extra={rule.helpText}
               >
-                <ImageUpload
-                  scene="collect-material"
-                  scope="collect"
-                  maxCount={rule.maxCount}
-                  showPasteHint
-                  captureGlobalPaste
-                  value={screenshots}
-                  onChange={onScreenshotsChange}
-                  uploader={async (file, scene) => {
-                    const response = await uploadOrderServiceFile(
-                      file,
-                      scene,
-                      code,
-                      item.workOrderId,
-                    )
-                    return response.data.file
-                  }}
-                />
+                <div
+                  className={`collect-link-screenshot-control ${guideImageUrl ? 'has-guide' : ''}`}
+                >
+                  <div className="collect-link-screenshot-upload">
+                    <ImageUpload
+                      scene="collect-material"
+                      scope="collect"
+                      maxCount={rule.maxCount}
+                      showPasteHint
+                      captureGlobalPaste
+                      value={screenshots}
+                      onChange={onScreenshotsChange}
+                      uploader={async (file, scene) => {
+                        const response = await uploadOrderServiceFile(
+                          file,
+                          scene,
+                          code,
+                          item.workOrderId,
+                        )
+                        return response.data.file
+                      }}
+                    />
+                  </div>
+                  {guideImageUrl ? (
+                    <aside className="collect-link-guide-example">
+                      <Image
+                        alt="买家主页截图填写示例"
+                        height={88}
+                        preview={{ mask: '查看大图' }}
+                        src={guideImageUrl}
+                        width={128}
+                      />
+                      <div className="collect-link-guide-copy">
+                        <Text strong>截图填写参考</Text>
+                        <Text type="secondary">
+                          {item.guideImageDescription?.trim() || '点击图片可查看大图'}
+                        </Text>
+                      </div>
+                    </aside>
+                  ) : null}
+                </div>
               </Form.Item>
             ) : null}