cyber-narrator-cn-ui/src/components/setting/GalaxyProxyDebug.vue

<template>
  <el-dialog
      v-model="show"
      :top="top"
      :modal="modal"
      :custom-class="customClass"
      :show-close="showClose"
      :width="width"
      @close="closeDebug"
      @open="openDebug"
      destroy-on-close
  >

    <div class="wrapper">
        <el-select v-model="name" filterable placeholder="Select" class="item item-1" allow-create
                   @change="changPath">
          <template v-for="(proxy,index) in galaxyProxyData" :key="proxy.id">
            <el-option :label="proxy.name" :value="index"></el-option>
          </template>
        </el-select>
      <div class="item item-2 sub-grid-send">
        <el-select v-model="method" filterable placeholder="Select" style="width:100px;" >
          <el-option
              v-for="item in methodOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input v-model="fullPathWithParams" placeholder="Please input" readonly/>
        <el-button @click="send">{{$t('galaxyProxy.debug.send')}}</el-button>
      </div>

      <div class="item item-3 sub-grid-params">
        <div class="sub-grid-params-add">
            <span style="padding-left: 15px;">{{$t('galaxyProxy.debug.requestParams')}}</span>
            <el-button size="mini" @click="handleAddDetails"><i class="cn-icon-add cn-icon"></i></el-button>
        </div>

        <el-table :data="paramsTableData"
                  width="100%"
                  @selection-change="handleDetailSelectionChange"
                  :row-class-name="rowClassName"
                  ref="tb">

          <el-table-column  type="selection" align="center" label="" width="30px" style="border-left:0px;" />

          <el-table-column  prop="key"  align="center"  width="80px" >
            <template #header>
              <div class="table-operation-title">{{$t('galaxyProxy.debug.key')}}</div>
            </template>
            <template #default="scope">
              <el-input   @change="paramsChange(scope.row)"  v-model="scope.row.key"></el-input>
            </template>
          </el-table-column>

          <el-table-column prop="value"   align="center" >
            <template #header>
              <div class="table-operation-title">{{$t('galaxyProxy.debug.value')}}</div>
            </template>
            <template #default="scope">
              <el-input  @change="paramsChange(scope.row)"  v-model="scope.row.value"></el-input>
            </template>
          </el-table-column>

          <el-table-column  align="center" style="border-right:0px;" width="70px">
            <template #header>
              <div class="table-operation-title">{{$t('overall.option')}}</div>
            </template>
            <template #default="scope">
              <div @click="deleteRow(scope.$index)"  class="debug__params-delete">{{$t('overall.delete')}}</div>
            </template>
          </el-table-column>
          <template v-slot:empty>
            <div style="height:0px;"></div>
          </template>

        </el-table>

      </div>
      <div class="item item-4">
        <div class="request-header" >{{$t('galaxyProxy.debug.request.header')}}</div>
        <div class="request-header-content" ><pre v-html="proxyRequestHeader"  style="height: 98%;width: 98%;margin-left: -15px;margin-top: -10px;"></pre></div>
        <div class="response-header">{{$t('galaxyProxy.debug.response.header')}}</div>
        <div class="response-body">{{$t('galaxyProxy.debug.response.body')}}</div>
        <div class="response-header-content"><pre v-html="proxyResponseHeader"  style="height: 98%;width: 98%;margin-left: -15px;margin-top: -10px;"></pre></div>
        <div class="response-body-content color-pre__style">
          <v-ace-editor
                  v-model:value="proxyResponseBody"
                  lang="json"
                  readonly="true"
                  theme="chrome"
                  style="height: 100%" />
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { ref, defineComponent } from 'vue'
import { api } from '@/utils/api'
import { get, getForDebug, postForDebug } from '@/utils/http'
import axios from 'axios'
import { VAceEditor } from 'vue3-ace-editor'
import 'ace-builds/src-noconflict/mode-javascript'
import 'ace-builds/src-noconflict/mode-json'
import 'ace-builds/src-noconflict/theme-chrome'

export default {
  name: 'GalaxyProxyDebug',
  components: {
    VAceEditor
  },
  props: {
    showDebug: Boolean,
    top: {
      type: String,
      default: '5vh'
    },
    modal: {
      type: Boolean,
      default: true
    },
    customClass: {
      type: String,
      default: 'proxy-debug__dialog'
    },
    showClose: {
      type: Boolean,
      default: true
    },
    width: { // 高度需要通过customClass自行定义
      type: [String, Number],
      default: '90vw'
    },
    curGalaxyProxy: Object // 实体，{ name: '', path: '', icon: icon-class }
  },
  components: {
    VAceEditor
  },
  data () {
    return {
      show: false,
      galaxyProxyData: [],
      name: '',
      paramsTableData: [

      ],
      // 选中的数据
      checkedDetail: {},
      checkedRowData: [],
      methodOptions: [
        {
          value: 'GET',
          label: 'GET'
        },
        {
          value: 'POST',
          label: 'POST'
        }
      ],
      method: 'GET',
      path: '', // 不带参数的路径，用于请求URL
      fullPathWithParams: '', // 带参数的完整路径，用于界面显示
      proxyResponseBody: '',
      proxyRequestHeader: '',
      proxyResponseHeader: ''
    }
  },
  setup () {
  },
  methods: {

    handleAddDetails () {
      if (this.paramsTableData == undefined) {
        this.paramsTableData = new Array()
      }
      const obj = {}
      obj.key = ''
      obj.value = ''

      this.paramsTableData.push(obj)
    },

    // 删除当前行
    deleteRow (index) {
      this.paramsTableData.splice(index, 1)
      this.updateUrlParams()
    },

    rowClassName ({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
    },

    // 参数发送改变时
    paramsChange (row) {
      this.fullPathWithParams = this.path
      this.checkedDetail = {}
      this.checkedRowData.forEach(t => {
        if (t.key != '') {
          this.checkedDetail[t.key] = t.value
        }
      })
      if (this.fullPathWithParams != '') {
        this.updateUrlParams()
      }
    },

    updateUrlParams () {
      this.fullPathWithParams = this.path
      let params = ''
      for (const key in this.checkedDetail) {
        if (key != '') {
          params = params + key + '=' + this.checkedDetail[key] + '&'
        }
      }
      if (params.endsWith('&')) {
        params = params.substring(0, params.length - 1)
      }
      if (params != '') {
        this.fullPathWithParams = this.fullPathWithParams + '?' + params
      }
    },

    // 单选框选中数据
    handleDetailSelectionChange (selection) {
      this.checkedDetail = {}
      this.checkedRowData = selection
      selection.forEach((item, index) => {
        this.checkedDetail[item.key] = item.value
      })
      this.updateUrlParams()
    },

    async getGalaxyProxyData (value) {
      await get(api.galaxyProxy + '?pageSize=-1').then(response => {
        if (response.code === 200) {
          this.galaxyProxyData = response.data.list
        }
      })
    },

    syntaxUrl (json) {
      if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 2)
      }
      return json = json.replace(/,/g, '&').replace(/{/g, '').replace(/}/g, '').replace(/"/g, '').replace(/:/g, '=').replace(/ /g, '')
    },

    changPath (index) {
      // 修改input的值
      this.path = axios.defaults.baseURL + 'interface' + this.galaxyProxyData[index].path
      this.updateUrlParams()
      this.method = this.galaxyProxyData[index].method.toUpperCase()
    },

    send () {
      // this.path = "galaxy/setting?pageNo=1&pageSize=1"
      // 注意有GET与POST两种方式
      if (this.method.toUpperCase() == 'GET') {
        getForDebug(this.path, this.checkedDetail).then(response => {
          this.proxyResponseBody = this.syntaxJson(JSON.parse(JSON.stringify(response.data)))
          this.proxyResponseHeader = this.syntaxJson(JSON.parse(JSON.stringify(response.headers)))
          this.proxyRequestHeader = this.syntaxJson(JSON.parse(JSON.stringify(response.config.headers)))
          this.proxyResponseHeader = this.proxyResponseHeader.replace(/{/g, '').replace(/}/g, '').replace(/"/g, '')
          this.proxyRequestHeader = this.proxyRequestHeader.replace(/{/g, '').replace(/}/g, '').replace(/"/g, '')
        })
      } else if (this.method.toUpperCase() == 'POST') {
        postForDebug(this.path, this.checkedDetail).then(response => {
          if (response) {
            this.proxyResponseBody = this.syntaxJson(JSON.parse(JSON.stringify(response.data)))
            this.proxyResponseHeader = this.syntaxJson(JSON.parse(JSON.stringify(response.headers)))
            this.proxyRequestHeader = this.syntaxJson(JSON.parse(JSON.stringify(response.config.headers)))

            this.proxyResponseHeader = this.proxyResponseHeader.replace(/{/g, '').replace(/}/g, '').replace(/"/g, '')
            this.proxyRequestHeader = this.proxyRequestHeader.replace(/{/g, '').replace(/}/g, '').replace(/"/g, '')
          }
        })
      }
    },
    // 格式化json
    syntaxJson (json) {
      if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 2)
      }
      return json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
    },
    closeDebug () {
      this.paramsTableData = []// JSON.parse(JSON.stringify(paramsTableData))
      this.proxyResponseBody = ''
      this.proxyResponseHeader = ''
      this.proxyRequestHeader = ''
      this.name = ''
      this.path = ''
      this.fullPathWithParams = ''
      for (const key in this.curGalaxyProxy) {
        delete this.curGalaxyProxy[key]
      }
    },
    openDebug () {
      if (this.curGalaxyProxy.path) {
        this.name = this.curGalaxyProxy.name
        this.path = axios.defaults.baseURL + 'interface' + this.curGalaxyProxy.path
        this.fullPathWithParams = this.path
        this.method = this.curGalaxyProxy.method.toUpperCase()
      } else {
        this.name = ''
        this.path = ''
        this.method = 'GET'
      }
    }
  },
  mounted () {
    // 获取代理名称及路径
    this.getGalaxyProxyData()
  },
  watch: {
    showDebug (n, o) {
      this.show = n
    },
    show (n, o) {
      this.$emit('update:show-debug', n)
    },
    path (n, o) {
      this.updateUrlParams()
    }
  }
}
</script>

<style lang="scss">

  .proxy-debug__dialog {
    height: 90vh;
    overflow: hidden;
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      height: 100%;
      padding: 0;
    }
  }
  .my-editor {
    margin-top: 4px;
    border: 1px solid $--right-box-border-color;

    .prism-editor__textarea {
      outline: none;
    }
  }
  .wrapper{
      width: 100%;
      height:100%;
      background: #fff;
      text-align: center;
      display: grid;
      grid-template-columns: 25% auto;
      grid-template-rows: 60px auto;
      grid-row-gap: 20px;
      grid-column-gap: 20px;
      padding:25px;

      .item{
        text-align: center;
        border:1px solid #bbbbbb;
        font-size: 4em;
        text-align: center;

        color: #000C18;
        line-height: 60px;
        font-size: 16px;
        text-align: left;
      }

      .item-1 {
        border:0px;
      }

      .item-2 {
        background-color: #ffffff;
        border:0px;
        .el-input__inner {
          border-radius: 0px;
          border-left: 0px;
          border-right:0px;
          border-top: 1px solid #bbbbbb;
          border-bottom: 1px solid #bbbbbb;
          color: #606266;
          height: 60px;
          line-height: 60px;
          padding: 0 15px;
        }
      }

      .sub-grid-send{
        width: 100%;
        height:100%;
        background: #fff;
        text-align: center;
        display: grid;
        grid-template-columns: 100px auto 80px;
        grid-template-rows: 60px;
        grid-row-gap: 0px;
        grid-column-gap: 0px;
        padding:0px;
      }

      .item-3 {
        background-color: #ffffff;
        .el-input__inner{
          border: 0px;
        }
        .el-input__inner:hover {
          border: 0px;
        }
        .el-input__inner:focus {
          border: 1px solid #bbbbbb;
        }

        .el-table__header, .el-table__body{
          witdh:100% !important;
        }

        .el-table__header-wrapper{
          height: 60px;
        }

        .el-table__empty-block{
          height:0px;
          min-height:0px;
        }

        .el-table th.is-leaf, .el-table td {
          border-top: 1px solid #bbbbbb;
          border-left: 1px solid #bbbbbb;
          border-right: 0px;
          padding-top: 3px;
          padding-bottom: 3px;
        }

        .el-table{
          border-bottom: 1px solid #bbbbbb;
          border-right: 0px solid #bbbbbb;
          border-left: 0px solid #bbbbbb;
        }

        .el-table .cell {
          line-height: 23px;
          padding-left: 3px;
          padding-right: 3px;
          text-align: center;
        }

        .el-table__body tr:hover >td {
          background-color: #ffffff;
        }

        .el-table__body tr:focus >td {
          background-color: cadetblue;
        }
        .debug__params-delete:hover{
          color:#0091FF;
          cursor: pointer;
        }
      }

      .item-4 {
        height:100%;
        overflow:hidden;
        background-color: #ffffff;
        display: grid;
        grid-template-columns: 40% 60%;
        grid-template-rows: 60px  minmax(100px, 1fr) 60px minmax(100px, 2fr);
        grid-row-gap: 0px;
        grid-column-gap: 0px;

        pre {outline: 0px; padding: 0px; margin: 0px;height:360px;line-height: 20px; font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;}
        .color-pre__style{
          height: 95%;
          width: 95%;
        }
        .request-header {
          grid-column-start: 1;
          grid-column-end: 3;
          border-bottom:1px solid #bbbbbb;
          padding-left: 15px;
        }

        .request-header-content{
          grid-column-start: 1;
          grid-column-end: 3;
          border-bottom:1px solid #bbbbbb;
          padding-left: 0px;
          overflow:scroll;
          height: 100%;
          width:100%;
          line-height: 30px;
        }

        .response-header {
          border-right:1px solid #bbbbbb;
          border-bottom:1px solid #bbbbbb;
          padding-left: 15px;
        }

        .response-header-content {
          border-right:1px solid #bbbbbb;
          padding-left: 0px;
          height: 100%;
          width:100%;
          overflow:scroll;
          line-height: 30px;
        }

        .response-body {
          border-bottom:1px solid #bbbbbb;
          padding-left: 15px;
        }

        .response-body-content {
          padding-left: 5px;
          height:100%;
          width:100%;
          overflow:scroll;
        }
      }

      .sub-grid-params{
            width: 100%;
            height:100%;
            background: #fff;
            text-align: center;
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: 60px auto;
            grid-row-gap: 0px;
            grid-column-gap: 0px;
            padding:0px;
            justify-items: center;

      }

      .sub-grid-params-add{
        width: 96%;
        height:100%;
        background: #fff;
        text-align: left;
        display: grid;
        grid-template-columns: 70% 30%;
        grid-template-rows:100%;
        grid-row-gap: 0px;
        grid-column-gap: 0px;
        padding:0px;
      }

      .el-select .el-input .el-input__inner{
        height: 60px;
        border-radius:0px;
        border:1px solid #bbbbbb;
      }
      .el-select .el-input .el-select__caret {
        line-height:60px;
        font-weight: bolder;
        color:black;
      }

      .el-button {
        border-color: #bbbbbb;
      }

      .sub-grid-params-add  .el-button {
        height: 38px;
        margin-top: 11px;
        margin-right: 10px;
      }
  }
</style>