refactor: tapd详情支持图片

backend/src/main/java/io/metersphere/track/issue/AbstractIssuePlatform.java

@@ -41,6 +41,8 @@ import java.util.ArrayList;
 import java.util.List;
 import java.util.Optional;
 import java.util.UUID;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
 
 public abstract class AbstractIssuePlatform implements IssuesPlatform {
 
@@ -222,10 +224,48 @@ public abstract class AbstractIssuePlatform implements IssuesPlatform {
         document.select("br").append("\\n");
         document.select("p").prepend("\\n\\n");
         String s = document.html().replaceAll("\\\\n", "\n");
-        String desc = Jsoup.clean(s, "", Whitelist.none(), new Document.OutputSettings().prettyPrint(false));
+        String desc = htmlImg2MsImg(s);
+        desc = Jsoup.clean(desc, "", Whitelist.none(), new Document.OutputSettings().prettyPrint(false));
         return desc.replace(" ", "");
     }
 
+    protected String msImg2HtmlImg(String input, String endpoint) {
+        // ![中心主题.png](/resource/md/get/a0b19136_中心主题.png) -> <img src="xxx/resource/md/get/a0b19136_中心主题.png"/>
+        String regex = "(\\!\\[.*?\\]\\((.*?)\\))";
+        Pattern pattern = Pattern.compile(regex);
+        Matcher matcher = pattern.matcher(input);
+        String result = "";
+        while (matcher.find()) {
+            String path = matcher.group(2);
+            if (endpoint.endsWith("/")) {
+                endpoint = endpoint.substring(0, endpoint.length() -1);
+            }
+            path = " <img src=\"" + endpoint + path + "\"/>";
+            result = matcher.replaceFirst(path);
+            matcher = pattern.matcher(result);
+        }
+        return result;
+    }
+
+    protected String htmlImg2MsImg(String input) {
+        // <img src="xxx/resource/md/get/a0b19136_中心主题.png"/> ->  ![中心主题.png](/resource/md/get/a0b19136_中心主题.png)
+        String regex = "(<img\\s*src=\\\"(.*?)\\\"/?>)";
+        Pattern pattern = Pattern.compile(regex);
+        Matcher matcher = pattern.matcher(input);
+        String result = input;
+        while (matcher.find()) {
+            String url = matcher.group(2);
+            if (url.contains("/resource/md/get/")) {
+                String path = url.substring(url.indexOf("/resource/md/get/"));
+                String name = path.substring(path.lastIndexOf("/") + 10);
+                String mdLink = "![" + name + "](" + path +  ")";
+                result = matcher.replaceFirst(mdLink);
+                matcher = pattern.matcher(result);
+            }
+        }
+        return result;
+    }
+
     protected UserDTO.PlatformInfo getUserPlatInfo(String orgId) {
         return userService.getCurrentPlatformInfo(orgId);
     }

backend/src/main/java/io/metersphere/track/issue/TapdPlatform.java

@@ -11,11 +11,13 @@ import io.metersphere.commons.constants.IssuesManagePlatform;
 import io.metersphere.commons.constants.IssuesStatus;
 import io.metersphere.commons.exception.MSException;
 import io.metersphere.commons.utils.BeanUtils;
+import io.metersphere.commons.utils.CommonBeanFactory;
 import io.metersphere.commons.utils.LogUtil;
 import io.metersphere.commons.utils.SessionUtils;
 import io.metersphere.controller.ResultHolder;
 import io.metersphere.dto.CustomFieldItemDTO;
 import io.metersphere.dto.UserDTO;
+import io.metersphere.service.SystemParameterService;
 import io.metersphere.track.dto.DemandDTO;
 import io.metersphere.track.issue.client.TapdClient;
 import io.metersphere.track.issue.domain.PlatformUser;
@@ -140,6 +142,8 @@ public class TapdPlatform extends AbstractIssuePlatform {
     }
 
     private String msDescription2Tapd(String msDescription) {
+        SystemParameterService parameterService = CommonBeanFactory.getBean(SystemParameterService.class);
+        msDescription = msImg2HtmlImg(msDescription, parameterService.getValue("base.url"));
         return msDescription.replaceAll("\\n", "<br/>");
     }
 

frontend/src/business/components/track/case/components/FormRichTextItem.vue

@@ -1,7 +1,7 @@
 <template>
   <el-form-item :disable="true" :label="title" :prop="prop" :label-width="labelWidth">
     <mavon-editor v-if="active" :editable="!disabled" @imgAdd="imgAdd" :default-open="disabled ? 'preview' : null" class="mavon-editor"
-                  :subfield="disabled ? false : true" :toolbars="toolbars"  @imgDel="imgDel" v-model="data[prop]"  ref="md"/>
+                  :subfield="disabled ? false : true" :toolbars="toolbars" :toolbarsFlag="disabled ? false : true" @imgDel="imgDel" v-model="data[prop]"  ref="md"/>
   </el-form-item>
 </template>
 

frontend/src/business/components/track/issue/IssueDescriptionTableItem.vue

@@ -11,8 +11,8 @@
         trigger="hover"
         popper-class="issues-popover"
       >
-        <ckeditor :editor="editor" disabled :config="readConfig"
+        <mavon-editor :editable="false" default-open="preview" class="mavon-editor"
-                  v-model="scope.row.description"/>
+                      :subfield="false" :toolbarsFlag="false" v-model="scope.row.description" ref="md"/>
         <el-button slot="reference" type="text">{{ $t('test_track.issue.preview') }}</el-button>
       </el-popover>
     </template>
@@ -20,15 +20,12 @@
 </template>
 
 <script>
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 import MsTableColumn from "@/business/components/common/components/table/MsTableColumn";
-import {getCustomTableWidth} from "@/common/js/tableUtils";
 export default {
   name: "IssueDescriptionTableItem",
   components: {MsTableColumn},
   data() {
     return {
-      editor: ClassicEditor,
       readConfig: {toolbar: []},
     };
   },