feat(ai-web): 完成图片上传和显示

service-web/client/src/pages/ai/feedback/Feedback.tsx

@@ -1,9 +1,25 @@
 import React from 'react'
-import {amisRender, commonInfo, crudCommonOptions} from '../../../util/amis.tsx'
+import styled from 'styled-components'
+import {amisRender, commonInfo, crudCommonOptions, mappingField, mappingItem} from '../../../util/amis.tsx'
+
+const FeedbackDiv = styled.div`
+    .feedback-list-images {
+        .antd-Img-container {
+            width: 32px;
+            height: 32px;
+        }
+    }
+`
+
+const statusMapping = [
+  mappingItem('分析中', 'ANALYSIS_PROCESSING', 'label-warning'),
+  mappingItem('分析完成', 'ANALYSIS_SUCCESS', 'label-primary'),
+  mappingItem('处理完成', 'FINISHED', 'label-success'),
+]
 
 const Feedback: React.FC = () => {
   return (
-    <div className="feedback">
+    <FeedbackDiv className="feedback">
       {amisRender(
         {
           type: 'page',
@@ -28,10 +44,7 @@ const Feedback: React.FC = () => {
                     body: {
                       debug: commonInfo.debug,
                       type: 'form',
-                      api: {
-                        url: `${commonInfo.baseAiUrl}/feedback/add`,
-                        dataType: 'form',
-                      },
+                      api: `${commonInfo.baseAiUrl}/feedback/add`,
                       body: [
                         {
                           type: 'editor',
@@ -50,12 +63,14 @@ const Feedback: React.FC = () => {
                           label: '相关截图',
                           autoUpload: false,
                           multiple: true,
+                          joinValues: false,
+                          extractValue: true,
                           // 5MB 5242880
                           // 100MB 104857600
                           // 500MB 524288000
                           // 1GB 1073741824
                           maxSize: 5242880,
-                          receiver: `${commonInfo.baseAiUrl}/upload`
+                          receiver: `${commonInfo.baseAiUrl}/upload`,
                         },
                       ],
                     },
@@ -66,11 +81,26 @@ const Feedback: React.FC = () => {
                 {
                   name: 'id',
                   label: '编号',
+                  width: 150,
+                },
+                {
+                  name: 'source',
+                  label: '故障描述',
+                },
+                {
+                  name: 'pictures',
+                  label: '相关截图',
+                  width: 200,
+                  className: 'feedback-list-images',
+                  type: 'images',
+                  enlargeAble: true,
+                  enlargeWithGallary: true,
                 },
                 {
-                  name: 'status',
                   label: '状态',
                   width: 80,
+                  align: 'center',
+                  ...mappingField('status', statusMapping),
                 },
                 {
                   type: 'operation',
@@ -101,7 +131,7 @@ const Feedback: React.FC = () => {
           ],
         },
       )}
-    </div>
+    </FeedbackDiv>
   )
 }