seecoder-devcloud-frontend/src/components/CodeDifferencePlate.vue

<template>
  <div class="container">
    <ElCollapse v-model="activeNames" v-for="item in data" :key="item.newPath">
      <ElCollapseItem name="item.newPath">
        <template v-slot:title><i class="el-icon-s-order"/>{{item.newPath}}</template>
        <!-- <el-input type="textarea" :autosize="{maxRows: 25}" v-model="item.diff" readonly></el-input> -->
        <table class="code-area" cellspacing="0"  v-for="msg in item.diff.split('\n')" :key="item.diff.indexOf(msg)">
          <tr class="normal-line" v-if="getLineType(msg) === 0">{{msg}}</tr>
          <tr class="delete-line" v-if="getLineType(msg) === 1">{{msg}}</tr>
          <tr class="insert-line" v-if="getLineType(msg) === 2">{{msg}}</tr>
        </table>
      </ElCollapseItem>
    </ElCollapse>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';

interface DifferenceMsg {
  a_mode: string;
  b_mode: string;
  deleteFile: boolean;
  diff: string;
  newFile: boolean;
  newPath: string;
  oldPath: string;
  renamedFile: boolean;
}

export default defineComponent({
  name: 'CodeDifferencePlate',
  props: {
    data: Array as PropType<DifferenceMsg[]>,
  },
  setup() {
    const getLineType = (msg: string) => {
      if (msg.startsWith('+++') || msg.startsWith('---')) return 3;
      if (msg.startsWith('+')) return 2;
      if (msg.startsWith('-')) return 1;
      if (msg.startsWith('\\') || msg.startsWith('@')) return 3;
      if (msg.length === 0) return 3;
      return 0;
    };
    const activeNames: string[] = [];
    return {
      activeNames,
      getLineType,
    };
  },
});
</script>
<style lang="scss" scoped>
::v-deep {
  .el-collapse {
    .el-collapse-item__header {
      font-size: 17px;
      font-weight: 500;
    }
  }
}
.el-icon-s-order {
    margin-right: 5px;
    color: gray;
}
.code-area {
  font-family: "Lucida Console";
  width: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
  .tr {
    height: 100%;
  }
}
.delete-line {
  background-color: #fbe9eb;
}
.insert-line {
  background-color: #ecfdf0;
}
</style>