可信代码库-供应链代码质量检测页面开发

package.json

@@ -31,6 +31,8 @@
     "dayjs": "^1.11.13",
     "devui-theme": "^0.0.7",
     "dompurify": "^3.0.5",
+    "highlight.js": "^11.11.1",
+    "highlightjs-line-numbers.js": "^2.9.0",
     "js-cookie": "^3.0.5",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",

src/utils/highlightjs-line-numbers.js

@@ -0,0 +1,231 @@
+// jshint multistr:true
+
+let TABLE_NAME = 'hljs-ln',
+    LINE_NAME = 'hljs-ln-line',
+    CODE_BLOCK_NAME = 'hljs-ln-code',
+    NUMBERS_BLOCK_NAME = 'hljs-ln-numbers',
+    NUMBER_LINE_NAME = 'hljs-ln-n',
+    DATA_ATTR_NAME = 'data-line-number',
+    BREAK_LINE_REGEXP = /\r\n|\r|\n/g;
+
+addStyles();
+
+function addStyles () {
+    let css = document.createElement('style');
+    css.type = 'text/css';
+    css.innerHTML = format(
+        '.{0}{border-collapse:collapse}' +
+        '.{0} td{padding:0}' +
+        '.{1}:before{content:attr({2})}',
+        [
+            TABLE_NAME,
+            NUMBER_LINE_NAME,
+            DATA_ATTR_NAME
+        ]);
+    document.getElementsByTagName('head')[0].appendChild(css);
+}
+
+function initLineNumbersOnLoad (options) {
+    if (document.readyState === 'interactive' || document.readyState === 'complete') {
+        documentReady(options);
+    } else {
+        window.addEventListener('DOMContentLoaded', function () {
+            documentReady(options);
+        });
+    }
+}
+
+function documentReady (options) {
+    try {
+        let blocks = document.querySelectorAll('code.hljs,code.nohighlight');
+
+        for (let i in blocks) {
+            // eslint-disable-next-line no-prototype-builtins
+            if (blocks.hasOwnProperty(i)) {
+                if (!isPluginDisabledForBlock(blocks[i])) {
+                    lineNumbersBlock(blocks[i], options);
+                }
+            }
+        }
+    } catch (e) {
+        window.console.error('LineNumbers error: ', e);
+    }
+}
+
+function isPluginDisabledForBlock(element) {
+    return element.classList.contains('nohljsln');
+}
+
+function lineNumbersBlock (element, options) {
+    if (typeof element !== 'object') return;
+    element.innerHTML = lineNumbersInternal(element, options);
+}
+
+function lineNumbersInternal (element, options) {
+
+    let internalOptions = mapOptions(element, options);
+
+    duplicateMultilineNodes(element);
+
+    return addLineNumbersBlockFor(element.innerHTML, internalOptions);
+}
+
+function addLineNumbersBlockFor (inputHtml, options) {
+    let lines = getLines(inputHtml);
+
+    // if last line contains only carriage return remove it
+    if (lines[lines.length-1].trim() === '') {
+        lines.pop();
+    }
+
+    if (lines.length > 1 || options.singleLine) {
+        let html = '';
+
+        for (let i = 0, l = lines.length; i < l; i++) {
+            html += format(
+                '<tr>' +
+                '<td class="{0} {1}" {3}="{5}">' +
+                '<div class="{2}" {3}="{5}"></div>' +
+                '</td>' +
+                '<td class="{0} {4}" {3}="{5}">' +
+                '{6}' +
+                '</td>' +
+                '</tr>',
+                [
+                    LINE_NAME,
+                    NUMBERS_BLOCK_NAME,
+                    NUMBER_LINE_NAME,
+                    DATA_ATTR_NAME,
+                    CODE_BLOCK_NAME,
+                    i + options.startFrom,
+                    lines[i].length > 0 ? lines[i] : ' '
+                ]);
+        }
+
+        return format('<table class="{0}">{1}</table>', [ TABLE_NAME, html ]);
+    }
+
+    return inputHtml;
+}
+
+/**
+ * @param {HTMLElement} element Code block.
+ * @param {Object} options External API options.
+ * @returns {Object} Internal API options.
+ */
+function mapOptions (element, options) {
+    options = options || {};
+    return {
+        singleLine: getSingleLineOption(options),
+        startFrom: getStartFromOption(element, options)
+    };
+}
+
+function getSingleLineOption (options) {
+    let defaultValue = false;
+    if (options.singleLine) {
+        return options.singleLine;
+    }
+    return defaultValue;
+}
+
+function getStartFromOption (element, options) {
+    let defaultValue = 1;
+    let startFrom = defaultValue;
+
+    if (isFinite(options.startFrom)) {
+        startFrom = options.startFrom;
+    }
+
+    // can be overridden because local option is priority
+    let value = getAttribute(element, 'data-ln-start-from');
+    if (value !== null) {
+        startFrom = toNumber(value, defaultValue);
+    }
+
+    return startFrom;
+}
+
+/**
+ * Recursive method for fix multi-line elements implementation in highlight.js
+ * Doing deep passage on child nodes.
+ * @param {HTMLElement} element
+ */
+function duplicateMultilineNodes (element) {
+    let nodes = element.childNodes;
+    for (let node in nodes) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (nodes.hasOwnProperty(node)) {
+            let child = nodes[node];
+            if (getLinesCount(child.textContent) > 0) {
+                if (child.childNodes.length > 0) {
+                    duplicateMultilineNodes(child);
+                } else {
+                    duplicateMultilineNode(child.parentNode);
+                }
+            }
+        }
+    }
+}
+
+/**
+ * Method for fix multi-line elements implementation in highlight.js
+ * @param {HTMLElement} element
+ */
+function duplicateMultilineNode (element) {
+    let className = element.className;
+
+    if ( ! /hljs-/.test(className)) return;
+
+    let lines = getLines(element.innerHTML);
+
+    for (var i = 0, result = ''; i < lines.length; i++) {
+        let lineText = lines[i].length > 0 ? lines[i] : ' ';
+        result += format('<span class="{0}">{1}</span>\n', [ className,  lineText ]);
+    }
+
+    element.innerHTML = result.trim();
+}
+
+function getLines (text) {
+    if (text.length === 0) return [];
+    return text.split(BREAK_LINE_REGEXP);
+}
+
+function getLinesCount (text) {
+    return (text.trim().match(BREAK_LINE_REGEXP) || []).length;
+}
+
+
+/**
+ * {@link https://wcoder.github.io/notes/string-format-for-string-formating-in-javascript}
+ * @param {string} format
+ * @param {array} args
+ */
+function format (format, args) {
+    return format.replace(/\{(\d+)\}/g, function(m, n){
+        return args[n] !== undefined ? args[n] : m;
+    });
+}
+
+/**
+ * @param {HTMLElement} element Code block.
+ * @param {String} attrName Attribute name.
+ * @returns {String} Attribute value or empty.
+ */
+function getAttribute (element, attrName) {
+    return element.hasAttribute(attrName) ? element.getAttribute(attrName) : null;
+}
+
+/**
+ * @param {String} str Source string.
+ * @param {Number} fallback Fallback value.
+ * @returns Parsed number or fallback value.
+ */
+function toNumber (str, fallback) {
+    if (!str) return fallback;
+    let number = Number(str);
+    return isFinite(number) ? number : fallback;
+}
+
+export {lineNumbersBlock, initLineNumbersOnLoad}

src/views/Jyh/Version/Detail/CodeQuality/Code.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+     <pre class="pre-code"><code :data-ln-start-from="1">
+                  <span v-html="renderCode(fixed_code)"></span>
+                </code></pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 引入 highlight.js
+import hljs from 'highlight.js';
+import 'highlight.js/styles/rainbow.css'; // 引入样式
+import {lineNumbersBlock} from "@/utils/highlightjs-line-numbers";
+
+const fixed_code  = '/*'
+
+const renderCode = (code, num = 1) => {
+  return hljs.highlightAuto(code).value;
+};
+// 显示代码行数
+const updateLineNumbers = () => {
+  // 搜索pre、code元素进行高亮和行号添加
+  let blocks = document.querySelectorAll('pre code');
+  console.log(blocks)
+  blocks.forEach((block) => {
+    //高亮
+    // hljs.highlightElement(block)
+    //添加行号
+    lineNumbersBlock(block)
+  })
+}
+
+</script>
+
+
+<style scoped lang="scss">
+.pre-code {
+  background: #474949!important;
+  color: #d1d9e1!important;
+  border-bottom: 0;
+  border-right: 0;
+}
+</style>

src/views/Jyh/Version/Detail/CodeQuality/index.vue

@@ -0,0 +1,295 @@
+<template>
+  <Card simple class="jyh-card mb-4">
+    <d-row class="mb-3">
+      <d-col :span="8">
+        <span class="card-key width-140">问题数<d-icon style="color: grey" name="icon-info-o" size="12px" />
+    </span>
+        <span class="card-val">{{ ReleaseInfo?.basicInfo?.softwareName || '--' }}</span>
+      </d-col>
+      <d-col :span="8">
+        <span class="card-key width-140">未解决问题数<d-icon style="color: grey; margin-left: 4px" name="icon-info-o" size="12px" /></span>
+        <span class="card-val">{{ ReleaseInfo?.basicInfo?.softwareVersion || '--' }}</span>
+      </d-col>
+      <d-col :span="8">
+        <span class="card-key width-140">已解决问题数<d-icon style="color: grey; margin-left: 4px" name="icon-info-o" size="12px" /></span>
+        <span class="card-val">{{ ReleaseInfo?.basicInfo?.mainLanguageType || '--' }}</span>
+      </d-col>
+    </d-row>
+    <d-row>
+      <d-col :span="8">
+        <span class="card-key width-140">代码平均复杂度<d-icon style="color: grey; margin-left: 4px" name="icon-info-o" size="12px" /></span>
+        <span class="card-val">{{ ReleaseInfo?.basicInfo?.developer || '--' }}</span>
+      </d-col>
+      <d-col :span="8">
+        <span class="card-key width-140">代码重复率<d-icon style="color: grey; margin-left: 4px" name="icon-info-o" size="12px" /></span>
+        <span class="card-val">{{ ReleaseInfo?.basicInfo?.developer || '--' }}</span>
+      </d-col>
+      <d-col :span="8">
+        <span class="card-key width-140">代码总行数<d-icon style="color: grey; margin-left: 4px" name="icon-info-o" size="12px" /></span>
+        <span class="card-val">{{ ReleaseInfo?.basicInfo?.developer || '--' }}</span>
+      </d-col>
+    </d-row>
+  </Card>
+  <div class="ai-container">
+    <template v-if="tableData.length > 0">
+      <div class="ai-container-card" style="width: 100%" v-for="(rowItem, index) in tableData" :key="index">
+        <Panel :expand="rowItem.expand">
+          <template #header>
+            <div class="ai-panel-header">
+              <div style="padding: 25px 8px 0px 20px">
+                <img style="width: 36px; height: 33px" src="@/assets/imgs/jyh/warning.png" />
+              </div>
+              <div style="width: 100%; padding: 20px 20px 0px 0">
+                <div class="ai-panel-header-title">
+                  <div>
+                    <d-tag color="red-w98" class="mr-1" size="sm">--</d-tag>
+                    <span>{{ rowItem.libraryName || '--' }}</span>
+                  </div>
+                  <div
+                    style="cursor: pointer; display: flex; gap: 8px; align-items: center"
+                    @click="rowItem.expand = !rowItem.expand"
+                  >
+                    <div style="margin-right: 8px">
+                      <span style="margin-right: 4px" class="weak-text">问题发现时间</span>
+                      <span>{{ rowItem.vulnerabilities.length || '--' }}</span>
+                    </div>
+                    <div style="margin-right: 8px">
+                      <span style="margin-right: 4px" class="weak-text">修改点个数</span>
+                      <span>{{ rowItem.vulnerabilities.length || '--' }}</span>
+                    </div>
+                    <d-icon :name="rowItem.expand ? 'icon-expand-new' : 'icon-drag-new'"></d-icon>
+                    <span>{{ rowItem.expand ? '收起' : '展开' }}</span>
+                  </div>
+                </div>
+                <div class="ai-panel-header-sub-title">
+                  <div>
+                    <span class="weak-text">待处理 </span>
+                    <span>{{ rowItem.vulnerabilities.length || '--' }}</span>
+                  </div>
+                  <!--                  <div>-->
+                  <!--                    <span class="weak-text">修复兼容性</span>-->
+                  <!--                    <span>{{ rowItem.vulnerabilities.length || '&#45;&#45;' }}</span>-->
+                  <!--                    <d-tooltip-->
+                  <!--                      position="bottom"-->
+                  <!--                      content="这个评分是在比较当前版本和推荐版本之间的差异，并建议修复此组件时的复杂程度。"-->
+                  <!--                    >-->
+                  <!--                      <img src="@/assets/imgs/jyh/help.png" class="icon-sm" />-->
+                  <!--                    </d-tooltip>-->
+                  <!--                    <d-tag class="ml-1" type="warning" size="sm">{{'&#45;&#45;'}}</d-tag>-->
+                  <!--                  </div>-->
+                  <div>
+                    <span class="weak-text">负责人</span>
+                    <span>{{ rowItem.currentVersion || '--' }}</span>
+<!--                    <img src="@/assets/imgs/jyh/ic_digital_power_next_step_@2x.png" class="icon-sm" />-->
+<!--                    <span>{{ rowItem.recommendedVersion || '&#45;&#45;' }}</span>-->
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <template #body>
+            <div style="padding: 8px 20px 20px 20px; width: 100%">
+              <Code />
+<!--              <Table class="jyh-table" :tableConfig="tableConfig" :dataSource="rowItem.vulnerabilities" :libraryName="rowItem.libraryName" :currentVersion="rowItem.currentVersion"/>-->
+<!--              <div class="w-full flex items-center justify-end">-->
+<!--                <span>共{{ rowItem.vulnerabilities.length }}条</span>-->
+<!--              </div>-->
+            </div>
+          </template>
+        </Panel>
+      </div>
+      <div class="mt-20 mb-20 flex justify-end" v-if="tableData.length > 0">
+        <d-pagination
+          size="md"
+          :page-size-options="[10, 20, 50]"
+          :total="pager.total"
+          v-model:pageSize="pager.pageSize"
+          v-model:pageIndex="pager.pageIndex"
+          :max-items="5"
+          :can-change-page-size="true"
+          :can-view-total="true"
+          total-item-text="总计"
+          @page-index-change="fetchVulnList()"
+          @page-size-change="fetchVulnList()"
+        />
+      </div>
+    </template>
+    <NoData v-else :small="false"></NoData>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, onMounted, ref } from 'vue';
+import Panel from '@/components/AIRepair/Panel.vue';
+import Table from '@/components/AIRepair/Table.vue';
+import NoData from '@/components/NoData/NoData.vue';
+import Code from './Code.vue';
+import { getVulnList, remediationSearchRemediations } from '@/api/jyh';
+
+const infoList = ref([
+  '当前代码主要风险为易受常见的注入攻击，包括命令注入、SQL注入、表达式注入，针对每种攻击，应提供相应的防范措施，如数据校验、使用安全函数和限制程序权限。',
+  '相对上一次检查，【提升点】在于代码基础编码问题少了47.8%，问题总数降低29.3%；'
+]);
+
+const tableConfig = ref([
+  {
+    field: 'vulnId',
+    header: '安全问题编号',
+    sortable: true,
+    sortMethod: null
+  },
+  {
+    field: 'vulnType',
+    header: '安全问题类型',
+    sortable: false,
+    sortMethod: null,
+    format: (val) => {
+      // val小写转大写
+      return (val || '').toUpperCase();
+    }
+  },
+  {
+    field: 'vulnId',
+    header: 'CWE编号',
+    sortable: false,
+    sortMethod: null
+  },
+  {
+    field: 'cvssScore',
+    header: '分值',
+    sortable: true,
+    sortMethod: null
+  }
+]);
+
+
+const pager = ref({
+  total: 0,
+  pageIndex: 1,
+  pageSize: 10
+});
+
+const propsData = defineProps(['versionId']);
+
+const fetchVulnList = async () => {
+  const { data } = await remediationSearchRemediations({
+    // softwareId: 47,
+    softwareId: propsData.versionId,
+    current: pager.value.pageIndex,
+    size: pager.value.pageSize
+    // componentId: '',
+  });
+
+  if (data.data.code === 200) {
+    tableData.value = data?.data?.data?.records || [];
+    pager.value.total = data?.data?.data?.total || 0;
+    // pager.value.total = data?.data?.data?.total || [];
+  }
+};
+
+const tableData = ref([
+  {
+    "componentId": 1,
+    "libraryName": "",
+    "currentVersion": "",
+
+    expand: true,
+    "vulnerabilities": [ ]
+  }
+]);
+onMounted(() => {
+  // fetchVulnList();
+});
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+
+.ai-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  justify-content: center;
+  &-card {
+    border-top: 2px solid $devui-danger;
+    background-color: $devui-base-bg;
+    border-radius: var(--devui-border-radius-card, 8px);
+    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, 0.12));
+  }
+}
+
+.ai-panel-header {
+  display: flex;
+  flex-direction: row;
+  height: 80px;
+  &-title {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &-sub-title {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+    div {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      margin-right: 20px;
+      position: relative;
+      &:not(:last-child)::after {
+        content: '';
+        position: absolute;
+        right: -10px;
+        height: 100%;
+        width: 1px;
+        background-color: $devui-line;
+      }
+    }
+  }
+}
+
+.weak-text {
+  //margin-right: 4px;
+  color: $devui-text-weak;
+}
+
+.icon-sm {
+  width: 14px;
+  height: 14px;
+}
+
+.info-outside {
+  margin: 20px 0;
+  padding: 1px;
+  border-radius: 8px;
+  background-image: linear-gradient(
+      134.79deg,
+      #a4f7df 0%,
+      #a0cefb 21%,
+      #5f9afe 43%,
+      #d9b9fc 62%,
+      #01efbb 73%,
+      #fbae46 100%
+  );
+}
+
+.info {
+  padding: 10px 20px;
+  border-radius: 8px;
+  background-color: #ffffff;
+  img {
+    width: 24px;
+    height: 24px;
+  }
+  ul {
+    list-style: disc;
+    padding-left: 18px;
+    line-height: 22px;
+  }
+}
+</style>

src/views/Jyh/Version/Detail/index.vue

@@ -52,6 +52,7 @@
         <d-tab id="ai" title="AI修复建议"></d-tab>
         <d-tab id="licenseInfo" title="许可证信息"></d-tab>
         <d-tab id="communityInfo" title="开发者社区信息"></d-tab>
+        <d-tab id="codeQuality" title="代码质量检测"></d-tab>
 <!--        <d-tab id="DeepDetectionAnalysis" title="深度检测分析" />-->
       </d-tabs>
     </div>
@@ -64,6 +65,7 @@
       <AIRepair :versionId="versionId" v-else-if="selectTab === 'ai'"></AIRepair>
       <LicenseInfo :versionId="versionId" v-else-if="selectTab === 'licenseInfo'"></LicenseInfo>
       <Malware :versionId="versionId" v-else-if="selectTab === 'Malware'" />
+      <CodeQuality :versionId="versionId" v-else-if="selectTab === 'codeQuality'" />
 <!--      <DeepDetectionAnalysis :versionId="versionId" v-else-if="selectTab === 'DeepDetectionAnalysis'" />-->
     </div>
   </div>
@@ -81,6 +83,7 @@ import AIRepair from '../../AIRepair/index.vue';
 import LicenseInfo from '../../LicenseInfo/index.vue';
 import Dependence from './Dependency.vue'
 import Malware from "@/views/Jyh/Version/Detail/Malware/Malware.vue";
+import CodeQuality from "@/views/Jyh/Version/Detail/CodeQuality/index.vue";
 import DeepDetectionAnalysis from "@/views/Jyh/Version/Detail/DeepDetectionAnalysis/index.vue";
 const { namespace } = getOrgInfo();
 const route = useRoute(); // 获取路由对象