🎨 工具名称和规则名称统一展示

web/packages/tca-analysis/src/components/react-highlight/index.tsx

@@ -0,0 +1,53 @@
+import React, { useRef, useEffect } from 'react';
+import hljs from 'highlight.js';
+
+
+interface HighlightProps {
+  children: React.ReactNode | React.ReactNode[];
+  element?: React.ReactNode;
+  className: any;
+}
+
+const Highlight = (props: HighlightProps) => {
+  const ele = useRef(null);
+
+  useEffect(() => {
+    highlightCode();
+  });
+
+  const highlightCode = () => {
+    const nodes = ele.current.querySelectorAll('pre code');
+
+    nodes?.forEach((element: any) => {
+      hljs.highlightBlock(element);
+    });
+
+    // for (let i = 0; i < nodes.length; i++) {
+    //   hljs.highlightBlock(nodes[i]);
+    // }
+  };
+
+  const {
+    children,
+    className,
+    // element: Element = null,
+    // innerHTML = false,
+  } = props;
+  // const eleProps = { ref: ele, className };
+
+  // if (innerHTML) {
+  //   eleProps.dangerouslySetInnerHTML = { __html: children };
+
+  //   if (Element) {
+  //     return <Element {...eleProps} />;
+  //   }
+  //   return <div {...eleProps} />;
+  // }
+
+  // if (Element) {
+  //   return <Element {...eleProps}>{children}</Element>;
+  // }
+  return <pre ref={ele}><code className={className}>{children}</code></pre>;
+};
+
+export default Highlight;

web/packages/tca-analysis/src/modules/projects/issues/index.tsx

@@ -355,10 +355,10 @@ const Issues = (props: IssuesProps) => {
           />
           <Column
             title="规则"
-            dataIndex="checkrule_display_name"
-            key="checkrule_display_name"
+            dataIndex="checkrule_real_name"
+            key="checkrule_real_name"
             sorter
-            sortOrder={sort.key === 'checkrule_display_name' ? sort.order : undefined}
+            sortOrder={sort.key === 'checkrule_real_name' ? sort.order : undefined}
             render={(name: any, item: any) => (
               <Tooltip title={item.msg}>
                 <span>{name}</span>
@@ -440,11 +440,10 @@ const Issues = (props: IssuesProps) => {
         </Table>
       </div>
       <IssueModal
-        curSchemeId={curScheme}
         visible={issueModal.visible}
         issueId={issueModal.issueId}
-        isFirstIssue={issueModal.isFirstIssue}
-        isLastIssue={issueModal.isLastIssue}
+        issuesData={data}
+        listLoading={loading}
         params={[orgSid, teamName, repoId, projectId]}
         prevIssue={prevIssue}
         nextIssue={nextIssue}