fix: 优化实体列表性能

.gitlab-ci.yml

@@ -10,6 +10,7 @@ cache:
       - package.json
   paths:
     - node_modules
+    - dist/
 
 before_script:
   - export CNUI_TAG=$(date +%Y%m%d%H%M%S)
@@ -23,9 +24,6 @@ generate_git-log:
     - "git log -100 --pretty=format:'%ad : %s' >> ./public/git-log.html"
     - echo "</pre></body></html>" >> ./public/git-log.html
     - echo "处理 git-log.html 结束"
-  artifacts:
-    paths:
-      - public
   only:
     - dev
   tags:
@@ -38,9 +36,6 @@ build_project:
     - npm install --save-dev --unsafe-perm
     - echo "npm run build"
     - npm run build
-  artifacts:
-    paths:
-      - dist
   only:
     - dev
     - tags

src/assets/css/common.scss

@@ -70,3 +70,15 @@ g [aria-labelledby$=-title] {
   opacity: 0.1;
   transform: translateX(calc(100% - 52px)) scale(.7);
 }
+
+.no-data {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  color: #999;
+}
+.no-data-hide {
+  display: none;
+}

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1634635259684') format('woff2'),
-       url('iconfont.woff?t=1634635259684') format('woff'),
-       url('iconfont.ttf?t=1634635259684') format('truetype');
+  src: url('iconfont.woff2?t=1636701851616') format('woff2'),
+       url('iconfont.woff?t=1636701851616') format('woff'),
+       url('iconfont.ttf?t=1636701851616') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-debug:before {
+  content: "\e606";
+}
+
+.cn-icon-override:before {
+  content: "\e68a";
+}
+
+.cn-icon-download1:before {
+  content: "\e6ab";
+}
+
+.cn-icon-upload1:before {
+  content: "\e6ac";
+}
+
 .cn-icon-position2:before {
   content: "\e745";
 }

src/components/charts/chart-table-title.js

@@ -13,7 +13,7 @@ export const tableTitleMapping = {
     prop: 'ip'
   },
   appId: {
-    label: 'APP ID',
+    label: 'APP',
     prop: 'appId'
   },
   app: {
@@ -47,5 +47,8 @@ export const legendMapping = {
   session_rate: i18n.global.t('trafficSummary.sessionsPerSecond'),
   packets_rate: i18n.global.t('trafficSummary.packetsPerSecond'),
   packets_received_rate: i18n.global.t('trafficSummary.packetsPerSecondC2s'),
-  packets_sent_rate: i18n.global.t('trafficSummary.packetsPerSecondS2c')
+  packets_sent_rate: i18n.global.t('trafficSummary.packetsPerSecondS2c'),
+  ip_packets_rate: i18n.global.t('trafficSummary.packetsPerSecond'),
+  ip_packets_received_rate: i18n.global.t('trafficSummary.packetsPerSecondC2s'),
+  ip_packets_sent_rate: i18n.global.t('trafficSummary.packetsPerSecondS2c')
 }

src/components/charts/panel.scss

@@ -458,7 +458,7 @@
     }
     .detail-header__operation {
       display: flex;
-      align-items: end;
+      align-items: flex-end;
 
       .panel__time {
         display: flex;
@@ -493,7 +493,7 @@
       }
       &>.el-tabs { // 底部对齐
         display: flex;
-        align-items: end;
+        align-items: flex-end;
       }
     }
   }

src/components/common/popBox/topToolMoreOptions.vue

@@ -0,0 +1,243 @@
+<template>
+  <el-dropdown :size="size" style="margin-left: 0px;">
+    <button id="more" :class="triggerButtonClass" title="more...">
+      <i class="cn-icon cn-icon-more-arrow-down" style="font-size: 12px;"></i>
+    </button>
+    <template #dropdown>
+        <el-dropdown-menu >
+          <!-- import、export之前的内容 -->
+          <slot name="before"></slot>
+          <el-dropdown-item v-if="importUrl">
+            <div id="chart-import" @click="showImportBox(1)"><i class="cn-icon cn-icon-upload1"></i>{{$t('overall.import')}}</div>
+          </el-dropdown-item>
+          <el-dropdown-item v-if="exportUrl">
+            <div id="chart-export" @click="exportAll"><i class="cn-icon cn-icon-download1"></i>{{$t('overall.export')}}</div>
+          </el-dropdown-item>
+          <!-- import、export之后的内容 -->
+          <slot name="after"></slot>
+        </el-dropdown-menu>
+    </template>
+    <el-dialog :close-on-click-modal="importBox.type!=3" :show-close="true" :title="importBox.title"  v-model="importBox.show" :width="importBox.width" append-to-body custom-class="cn-dialog" @close="closeDialog">
+      <div v-if="importBox.type == 1">
+        <div class="upload-body">
+          <el-upload :id="id+'-json-input-file'"
+                     ref="uploadExcel"
+                     :auto-upload="false"
+                     :file-list="importFileList"
+                     :on-change="importChange"
+                     accept=".json"
+                     action=""
+                     class="upload-demo"
+                     drag>
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
+            <template #tip>
+              <div class="el-upload__tip" >
+                {{$t('overall.importTip')}}
+              </div>
+            </template>
+          </el-upload>
+        </div>
+        <div slot="footer" class="footer">
+          <div class="el-message-box__btns" style="text-align: right;">
+            <button :id="id+'-json-import-template'" class="el-button el-button--default el-button--small" @click="downloadTemplate">
+              <span>{{$t('overall.template')}}</span>
+            </button>
+            <button  :id="id+'-json-import-add'" :class="{'cn-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="cn-btn el-button el-button--default el-button--small" @click="importJson">
+              <span>{{$t('overall.import')}}</span>
+            </button>
+            <button :id="id+'-json-import-esc'" class="el-button el-button--default el-button--small" @click="closeDialog">
+              <span>{{$t('overall.cancel')}}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </el-dropdown>
+</template>
+
+<script>
+import axios from 'axios'
+import { post } from '@/utils/http'
+let timeout
+export default {
+  name: 'topToolMoreOptions',
+  props: {
+    size: {
+      type: String,
+      default: 'small'
+    },
+    exportUrl: { type: String, default: '' },
+    params: { type: Object },
+    params2: { type: Object },
+    exportFileName: { type: String },
+    importUrl: { type: String, default: '' }, // 为空时不显示导入按钮
+    link: { type: Object }, // 为空时不显示导出按钮
+    showCur: { type: Boolean, default: true },
+    id: { type: String, default: 'export' },
+    triggerButtonClass: { // 触发下拉事件的按钮的class
+      type: String,
+      default: 'top-tool-btn'
+    }
+  },
+  data () {
+    return {
+      importBox: { show: false, title: this.$t('overall.import'), type: 1, width: '600px' },
+      importFile: null,
+      importFileList: [],
+      importResult: null,
+      exportShow: false,
+      paramsType: ''
+    }
+  },
+  mounted () {
+    this.getParamsType()
+  },
+  methods: {
+    importChange (file, fileList) {
+      if (fileList.length > 0) {
+        this.importFileList = [fileList[fileList.length - 1]]
+      }
+      this.importFile = this.importFileList[0]
+    },
+    importJson () {
+      if (this.importFile && this.importFile.raw) {
+        this.prevent_opt.import = true
+        const form = new FormData()
+        form.append('file', this.importFile.raw)
+        if (this.paramsType) {
+          form.append('type', this.paramsType)
+        }
+        form.append('language', localStorage.getItem('cn-language') ? localStorage.getItem('cn-language') : 'en')
+        post(this.importUrl, form, { 'Content-Type': 'multipart/form-data' }).then(response => {
+          if (response.code == 200 && response.msg == 'success') {
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.importSuccess') })
+          } else {
+            this.$message.error(response.msg)
+          }
+          this.prevent_opt.import = false
+        })
+      } else {
+        this.$message.error(this.$t('tip.noImportFile'))
+      }
+    },
+    closeDialog () {
+      this.importBox.show = false
+      this.importResult = null
+      this.importFileList = []
+      this.importFile = null
+    },
+    downloadTemplate () {
+      const language = localStorage.getItem('cn-language') || 'en' // 初始未选择默认 en 英文
+      const fileName = this.exportFileName + '-' + this.$t('overall.template') + '-' + this.getTimeString() + '.json'
+
+      let url = null
+      const param = { language: language }
+      if (this.paramsType === 'galaxy') {
+        url = '/galaxy/setting/export'
+        param.type = 'galaxy'
+      }
+
+      if (!url) {
+        console.error('no interface support')
+      }
+      this.export(url, param, fileName)
+    },
+    exportAll () {
+      const params = JSON.parse(JSON.stringify(this.params))
+      if (this.params2) {
+        Object.keys(this.params2).forEach(key => {
+          if (params[key]) {
+            if (params[key].prototype.toString.call(val) === '[object Object]') {
+              Object.assign(params[key], this.params2[key])
+            } else if (params[key].prototype.toString.call(val) === '[object Array]') {
+              params[key].concat(this.params2[key])
+            }
+          } else {
+            params[key] = this.params2[key]
+          }
+        })
+      }
+      params.pageSize = -1
+      params.language = localStorage.getItem('cn-language') || 'en'
+
+      this.export(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.json')
+      this.closeDialog()
+    },
+    export (url, params, fileName) {
+      if (this.paramsType) {
+        params.type = this.paramsType
+      }
+      axios.get(url, { responseType: 'blob', params: params }).then(res => {
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res.data])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
+        } else {
+          const url = URL.createObjectURL(new Blob([res.data]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = fileName
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
+        }
+      }, error => {
+        const $self = this
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const responseText = reader.result
+          const exception = JSON.parse(responseText)
+          if (exception.message) {
+            $self.$message.error(exception.message)
+          } else {
+            console.error(error)
+          }
+        }
+        reader.readAsText(error.response.data)
+      })
+    },
+    showImportBox (type) {
+      this.importBox.show = true
+      this.importBox.type = type
+      if (type == 1) { // import
+        this.importBox.title = this.$t('overall.import')
+        this.importBox.width = '600px'
+      }
+    },
+    getTimeString () {
+      const split = '-'
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = this.formatNum(date.getMonth() + 1)
+      const day = this.formatNum(date.getDate())
+      const hours = this.formatNum(date.getHours())
+      const minutes = this.formatNum(date.getMinutes())
+      const seconds = this.formatNum(date.getSeconds())
+      return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds
+    },
+    formatNum (num) {
+      return num > 9 ? num : '0' + num
+    },
+    getParamsType () {
+      const path = this.$route.path
+      switch (path) {
+        case '/galaxyProxy': this.paramsType = 'galaxy'; break
+        default: this.paramsType = ''; break
+      }
+    }
+  },
+  watch: {
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .cn-dialog {
+    overflow: hidden;
+  }
+  .upload-body{
+    text-align: center;
+  }
+</style>

src/components/entities/EntityList.vue

@@ -83,7 +83,7 @@
           </template>
           <template v-else-if="from === 'app'">
             <div class="body__row">
-              <span class="body__row-label"><i class="cn-icon cn-icon-id"></i>APP ID：</span>
+              <span class="body__row-label"><i class="cn-icon cn-icon-id"></i>APP：</span>
               <div class="body__row-value" :title="d.appId">{{d.appId || '-'}}</div>
             </div>
             <div class="body__row">

src/components/rightBox/settings/ChartBox.vue

@@ -103,8 +103,12 @@
           </el-form-item>
 
           <!--params-->
-          <el-form-item :label="$t('config.chart.params')">
-            <el-input maxlength="1024" show-word-limit :rows="2" size='mini' type="textarea" v-model="editObject.params" id="chart-box-params"/>
+          <el-form-item :label="$t('config.chart.params')" prop="params">
+            <v-ace-editor
+                    v-model:value="editObject.params"
+                    lang="json"
+                    theme="chrome"
+                    style="height: 300px" />
           </el-form-item>
           <!--remark-->
           <el-form-item :label="$t('config.chart.remark')">
@@ -130,10 +134,17 @@ import rightBoxMixin from '@/mixins/rightBox'
 import { get, post, put } from '@/utils/http'
 import { panelTypeAndRouteMapping } from '@/utils/constants'
 import { api } from '@/utils/api'
+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: 'ChartBox',
   mixins: [rightBoxMixin],
+  components: {
+    VAceEditor
+  },
   data () {
     return {
       url: api.chart,
@@ -380,3 +391,13 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+  .my-editor {
+    margin-top: 4px;
+    border: 1px solid $--right-box-border-color;
+
+    .prism-editor__textarea {
+      outline: none;
+    }
+  }
+</style>

src/components/setting/GalaxyProxyDebug.vue

@@ -0,0 +1,525 @@
+<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="path" placeholder="Please input" />
+        <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" style="width: 100%;"
+                  @selection-change="handleDetailSelectionChange"
+                  ref="tb">
+          <el-table-column  type="selection" align="center" label="" width="50px" style="border-left:0px;" />
+
+          <el-table-column prop="key"  label="Key" align="center" width="100px" >
+            <template #default="scope">
+              <el-input   @change=""  v-model="scope.row.key"></el-input>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="value"  label="Value" align="center" style="border-right:0px;">
+            <template #default="scope">
+              <el-input  @change=""  v-model="scope.row.value"></el-input>
+            </template>
+          </el-table-column>
+
+        </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">
+            <pre v-html="proxyResponseBody"  style="height: 95%;width: 95%;"></pre>
+        </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',
+  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: [
+        {
+          key: 'q',
+          value: 'ip'
+        },
+        {
+          key: 'addr',
+          value: '192'
+        }
+      ],
+      // 选中的数据
+      checkedDetail: {},
+      methodOptions: [
+        {
+          value: 'GET',
+          label: 'GET'
+        },
+        {
+          value: 'POST',
+          label: 'POST'
+        }
+      ],
+      method: 'GET',
+      path: '',
+      proxyResponseBody: '',
+      proxyRequestHeader: '',
+      proxyResponseHeader: ''
+    }
+  },
+  setup () {
+  },
+  methods: {
+
+    handleAddDetails () {
+      if (this.paramsTableData == undefined) {
+        this.paramsTableData = new Array()
+      }
+      const obj = {}
+      obj.key = ''
+      obj.value = ''
+
+      this.paramsTableData.push(obj)
+    },
+
+    // 单选框选中数据
+    handleDetailSelectionChange (selection) {
+      this.checkedDetail = {}
+      selection.forEach(t => {
+        this.checkedDetail[t.key] = t.value
+      })
+    },
+
+    async getGalaxyProxyData (value) {
+      await get(api.galaxyProxy + '?pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.galaxyProxyData = response.data.list
+        }
+      })
+    },
+
+    changPath (index) {
+      // 修改input的值
+      this.path = this.galaxyProxyData[index].path
+      this.method = this.galaxyProxyData[index].method.toUpperCase()
+    },
+
+    send () {
+      // this.path = "galaxy/setting?pageNo=1&pageSize=1"
+      const finalUrl = axios.defaults.baseURL + 'interface' + this.path
+      // 注意有GET与POST两种方式
+      if (this.method.toUpperCase() == 'GET') {
+        getForDebug(finalUrl, this.checkedDetail).then(response => {
+          this.proxyResponseBody = this.syntaxHighlight(JSON.parse(JSON.stringify(response.data)))
+          this.proxyResponseHeader = this.syntaxHighlight(JSON.parse(JSON.stringify(response.headers)))
+          this.proxyRequestHeader = this.syntaxHighlight(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(finalUrl, this.checkedDetail).then(response => {
+          if (response) {
+            this.proxyResponseBody = this.syntaxHighlight(JSON.parse(JSON.stringify(response.data)))
+            this.proxyResponseHeader = this.syntaxHighlight(JSON.parse(JSON.stringify(response.headers)))
+            this.proxyRequestHeader = this.syntaxHighlight(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
+    syntaxHighlight (json) {
+      if (typeof json != 'string') {
+        json = JSON.stringify(json, undefined, 2)
+      }
+      json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
+      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+        let cls = 'number'
+        if (/^"/.test(match)) {
+          if (/:$/.test(match)) {
+            cls = 'key'
+          } else {
+            cls = 'string'
+          }
+        } else if (/true|false/.test(match)) {
+          cls = 'boolean'
+        } else if (/null/.test(match)) {
+          cls = 'null'
+        }
+        return '<span class="' + cls + '">' + match + '</span>'
+      })
+    },
+
+    closeDebug () {
+      const paramsTableData = []
+      const q = {}
+      q.key = 'q'
+      q.value = 'ip'
+      const addr = {}
+      addr.key = 'addr'
+      addr.value = '192'
+
+      paramsTableData.push(q)
+      paramsTableData.push(addr)
+
+      this.paramsTableData = JSON.parse(JSON.stringify(paramsTableData))
+      this.proxyResponseBody = ''
+      this.proxyResponseHeader = ''
+      this.proxyRequestHeader = ''
+      this.name = ''
+      this.path = ''
+      for (const key in this.curGalaxyProxy) {
+        delete this.curGalaxyProxy[key]
+      }
+    },
+    openDebug () {
+      if (this.curGalaxyProxy.path) {
+        this.name = this.curGalaxyProxy.name
+        this.path = this.curGalaxyProxy.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)
+    }
+  }
+}
+</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 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: 1px 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;
+        }
+      }
+
+      .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%;
+          .string { color: green; }
+          .number { color: darkorange; }
+          .boolean { color: blue; }
+          .null { color: magenta; }
+          .key { color: red; }
+        }
+        .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;
+
+      }
+
+      .sub-grid-params-add{
+        width: 100%;
+        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>

src/components/table/settings/GalaxyProxyTable.vue

@@ -97,8 +97,9 @@
             </div>
             <template #dropdown>
               <el-dropdown-menu >
-                <el-dropdown-item :command="['copy', scope.row]"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
+                <el-dropdown-item :command="['copy', scope.row]"><i class="cn-icon cn-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
                 <el-dropdown-item :command="['delete', scope.row]"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+                <el-dropdown-item :command="['debug', scope.row]"><i class="cn-icon cn-icon-debug"></i><span class="operation-dropdown-text">{{$t('overall.debug')}}</span></el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>

src/components/table/settings/OperationLogTable.vue

@@ -4,6 +4,7 @@
     ref="dataTable"
     :data="tableData"
     :height="height"
+    tooltip-effect="light"
     border
     class="no-operation"
     @header-dragend="dragend"
@@ -27,17 +28,32 @@
       :sort-orders="['ascending', 'descending']"
       :width="`${item.width}`"
       class="data-column"
+      :show-overflow-tooltip="['params', 'response'].indexOf(item.prop) > -1"
     >
       <template #header>
         <span class="data-column__span">{{item.label}}</span>
         <div class="col-resize-area"></div>
       </template>
       <template  #default="scope">
-        <span v-if="item.prop === 'time'">
-                {{scope.row[item.prop]}} ms
+        <span v-if="item.prop === 'duration'">
+                {{scope.row[item.prop]}}ms
               </span>
+        <span v-else-if="item.prop === 'state'">
+          <template v-if="scope.row[item.prop]==operationLogStateMapping.success">
+            {{$t('operationLog.state.success')}}
+          </template>
+          <template v-else-if="scope.row[item.prop]==operationLogStateMapping.fail">
+            {{$t('operationLog.state.fail')}}
+          </template>
+          <template v-else>
+            {{scope.row[item.prop]}}
+          </template>
+        </span>
         <span v-else-if="item.prop === 'username'">{{formatUsername(scope.row)}}</span>
         <span v-else-if="item.prop === 'ctime'">{{utcTimeToSysTime(scope.row[item.prop])}}</span>
+        <template v-else-if="item.prop === 'params' || item.prop === 'response'">
+          <span>{{scope.row[item.prop]}}</span>
+        </template>
         <span v-else>{{scope.row[item.prop]}}</span>
       </template>
     </el-table-column>
@@ -46,11 +62,14 @@
 
 <script>
 import table from '@/mixins/table'
+import { operationLogStateMapping } from '@/utils/constants'
+
 export default {
   name: 'roleTable',
   mixins: [table],
   data () {
     return {
+      operationLogStateMapping: operationLogStateMapping,
       tableTitle: [
         {
           label: this.$t('config.operationlog.id'),
@@ -99,18 +118,20 @@ export default {
         },
         {
           label: this.$t('config.operationlog.time'),
-          prop: 'time',
+          prop: 'duration',
           show: false
         },
         {
           label: this.$t('config.operationlog.params'),
           prop: 'params',
-          show: false
+          show: false,
+          width: 150
         },
         {
           label: this.$t('config.operationlog.response'),
           prop: 'response',
-          show: false
+          show: false,
+          width: 150
         }
       ]
     }

src/mixins/dataList.js

@@ -179,7 +179,9 @@ export default {
     let localStorageTableTitle = localStorage.getItem('cn-tableTitle-' + localStorage.getItem('cn-username') + '-' + this.tableId)
     localStorageTableTitle = localStorageTableTitle ? JSON.parse(localStorageTableTitle) : this.$refs.dataTable.tableTitle
     this.tools.customTableTitle = this.$refs.dataTable.tableTitle.map((item, index) => { // 修复切换中英文的问题
-      item.show = localStorageTableTitle[index].show
+      if (localStorageTableTitle[index]) {
+        item.show = localStorageTableTitle[index].show
+      }
       return item
     })
     if (localStorageTableTitle && (localStorageTableTitle.length > this.$refs.dataTable.tableTitle.length)) {

src/utils/api.js

@@ -118,7 +118,7 @@ export async function getI18n () {
 export async function getIso36112JsonData (suffix) {
   const request = new Promise(resolve => {
     axios({
-      url: `${window.location.protocol}//${window.location.host}:${window.location.port}/geojson/${suffix}.json`,
+      url: `${window.location.protocol}//${window.location.host}:${window.location.port}/geojson/${suffix}.json`
     }).then(response => {
       resolve(response.data || response || null)
     })

src/utils/constants.js

@@ -39,6 +39,12 @@ export const panelTypeAndRouteMapping = {
   appEntityDetail: 6
 }
 
+/* operationLog state 执行状态属性 值与名称之间的映射 */
+export const operationLogStateMapping = {
+  success: 1,
+  fail: 0
+}
+
 export const position = {
   tableHeight: {
     normal: 'calc(100% - 48px)' // 常规高度，特例在下方定义
@@ -46,9 +52,9 @@ export const position = {
 }
 
 export const entityType = {
-  ip: 'IP',
+  app: 'APP',
   domain: 'Domain',
-  app: 'APP'
+  ip: 'IP'
 }
 
 export const entityFilterType = {

src/utils/http.js

@@ -55,6 +55,36 @@ axios.interceptors.response.use(
     return Promise.reject(error)
   }
 )
+export function getForDebug (url, params) {
+  return new Promise((resolve) => {
+    axios.get(url, {
+      params: params
+    }).then(response => {
+      resolve(response)
+    }).catch(err => {
+      if (err.response) {
+        resolve(err.response)
+      } else if (err.message) {
+        resolve(err.message)
+      }
+    })
+  })
+}
+
+export function postForDebug (url, params, headers) {
+  return new Promise(resolve => {
+    axios.post(url, params, { headers: headers }).then(response => {
+      resolve(response, response)
+    }).catch(err => {
+      if (err.response) {
+        resolve(err.response)
+      } else if (err.message) {
+        resolve(err.message)
+      }
+    })
+  })
+}
+
 export function get (url, params) {
   return new Promise((resolve) => {
     axios.get(url, {

src/utils/tools.js

@@ -346,11 +346,33 @@ export const clickOutside = {
     delete el.__vueClickOutside__
   }
 }
+
+const noDataDom = document.createElement('div')
+noDataDom.setAttribute('class', 'no-data')
+noDataDom.innerText = 'No data'
 export const noData = {
   updated (el, binding) {
-    if (el) {
+    if (el && binding.oldValue !== binding.value) {
       if (binding.value) {
-        el.innerHTML = '<div style="display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; color: #999;">No data</div>'
+        setTimeout(() => {
+          el.childNodes.forEach(node => {
+            node.style && (node.style.display = 'none')
+          })
+          el.insertBefore(noDataDom, el.childNodes[0])
+        })
+      } else {
+        setTimeout(() => {
+          for (let i = 0; i < el.childNodes.length; i++) {
+            const node = el.childNodes[i]
+            if (node.innerText === 'No data') {
+              el.removeChild(node)
+              break
+            }
+          }
+          el.childNodes.forEach(node => {
+            node.style && (node.style.display = '')
+          })
+        })
       }
     }
   }

src/views/charts/Chart.vue

@@ -858,7 +858,8 @@ export default {
         polygonTemplate.fill = am4Core.color('rgba(176,196,222,.5)')
         polygonTemplate.events.on('hit', ev => {
           const countryId = ev.target.dataItem.dataContext.id
-          if (countryId) {
+          // countryId = countryId === 'Private IP' ? 'China' : countryId
+          if (countryId && countryId !== 'Private IP') {
             ev.target.series.chart.zoomToMapObject(ev.target)
             ev.target.isHover = false
             this.countrySeries = chart.series.push(new am4Maps.MapPolygonSeries())
@@ -1284,24 +1285,21 @@ export default {
     initSankey (chartParams) {
       const vm = this
       const entityName = this.entity.ip || this.entity.domain || this.entity.app
+      const queryParams = { ...this.queryTimeRange, ...this.entity }
       this.chartOption.series[0].tooltip = {
-        formatter: function ({ name }) {
+        formatter: function (param) {
           return `
             <div class="sankey__tooltip">
               <div class="sankey__tooltip-row">
                 <div class="sankey__row-label">Via:</div>
-                <div class="sankey__row-value">1521</div>
-              </div>
-              <div class="sankey__tooltip-row">
-                <div class="sankey__row-label">To:</div>
-                <div class="sankey__row-value">21522</div>
+                <div class="sankey__row-value">${param.data.name}</div>
               </div>
               <div class="sankey__tooltip-row">
                 <div style="margin: 6px 0; height: 1px; width: 100%; background-color: #E7EAED;"></div>
               </div>
               <div class="sankey__tooltip-row">
                 <div class="sankey__row-label">Traffic:</div>
-                <div class="sankey__row-value">150bps(8%)</div>
+                <div class="sankey__row-value">${param.data.convert[0]}${param.data.convert[1]}&nbsp;(${param.data.percent[0]}%)</div>
               </div>
               <div class="sankey__tooltip-row">
                 <div class="sankey__row-label">Performance:</div>
@@ -1309,150 +1307,151 @@ export default {
               <div class="sankey__tooltip-table">
                 <div class="sankey__table-row">
                   <div class="sankey__table-cell">${vm.$t('networkAppPerformance.tripTime')}:</div>
-                  <div class="sankey__table-cell">58ms</div>
+                  <div class="sankey__table-cell">${param.data.latency[0]}&nbsp;${param.data.latency[1]}</div>
                 </div>
                 <div class="sankey__table-row">
                   <div class="sankey__table-cell">${vm.$t('overall.packetLoss')}:</div>
-                  <div class="sankey__table-cell">5%</div>
+                  <div class="sankey__table-cell">${param.data.lossPercent[0]}&nbsp;%</div>
                 </div>
                 <div class="sankey__table-row">
                   <div class="sankey__table-cell">${vm.$t('overall.packetRetrans')}:</div>
-                  <div class="sankey__table-cell">58%</div>
+                  <div class="sankey__table-cell">${param.data.retransPercent[0]}&nbsp;%</div>
                 </div>
               </div>
             </div>
           `
         }
       }
-      this.chartOption.series[0].data = [
-        {
-          name: '1521'
-        },
-        {
-          name: '2714'
-        },
-        {
-          name: entityName,
-          label: {
-            show: false
+      get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
+        if (response.code === 200) {
+          if (this.$_.isEmpty(response.data.result)) {
+            this.noData = true
+          } else {
+            this.noData = false
+            let inTotalValue = 0
+            let outTotalValue = 0
+
+            /* 测试代码
+            const t = []
+            for (const k in response.data.result) {
+              t.push(response.data.result[k])
+            }
+            response.data.result = t */
+
+            response.data.result.forEach(item => {
+              if (item.direction === 'in') {
+                inTotalValue += parseInt(item.bytes)
+              } else if (item.direction === 'out') {
+                outTotalValue += parseInt(item.bytes)
+              }
+            })
+            const data = response.data.result.map(item => {
+              return {
+                ...item,
+                name: item.linkID,
+                percent: valueToRangeValue(parseInt(item.bytes) / (item.direction === 'in' ? inTotalValue : outTotalValue) * 100, unitTypes.percent),
+                convert: unitConvert(item.bytes, unitTypes.byte),
+                latency: valueToRangeValue(item.latency, unitTypes.time),
+                lossPercent: valueToRangeValue(item.lossPercent, unitTypes.percent),
+                retransPercent: valueToRangeValue(item.retransPercent, unitTypes.percent),
+                bytes: parseFloat(item.bytes)
+              }
+            })
+            data.push({ name: entityName })
+
+            const link = data.map(item => {
+              const source = item.direction === 'in' ? item.linkID : entityName
+              const target = item.direction === 'in' ? entityName : item.linkID
+              return {
+                ...item,
+                source,
+                target,
+                value: item.bytes
+              }
+            })
+            this.chartOption.series[0].data = data
+            this.chartOption.series[0].links = link
+            this.myChart.setOption(this.chartOption)
           }
-        },
-        {
-          name: '21521'
-        },
-        {
-          name: '22714'
-        },
-        {
-          name: '29047'
-        },
-        {
-          name: '21522'
-        },
-        {
-          name: '22715'
-        },
-        {
-          name: '29048'
-        },
-        {
-          name: '121521'
-        },
-        {
-          name: '122714'
-        },
-        {
-          name: '129047'
-        },
-        {
-          name: '121522'
-        },
-        {
-          name: '122715'
-        },
-        {
-          name: '129048'
         }
-      ]
-      this.chartOption.series[0].links = [
-        {
-          source: '1521',
-          target: entityName,
-          value: 6779
-        },
-        {
-          source: '2714',
-          target: entityName,
-          value: 4417
-        },
-        {
-          source: entityName,
-          target: '21521',
-          value: 704
-        },
-        {
-          source: entityName,
-          target: '22714',
-          value: 55
-        },
-        {
-          source: entityName,
-          target: '29047',
-          value: 509
-        },
-        {
-          source: entityName,
-          target: '21522',
-          value: 3140
-        },
-        {
-          source: entityName,
-          target: '22715',
-          value: 550
-        },
-        {
-          source: entityName,
-          target: '29048',
-          value: 1290
-        },
-        {
-          source: entityName,
-          target: '121521',
-          value: 704
-        },
-        {
-          source: entityName,
-          target: '122714',
-          value: 55
-        },
-        {
-          source: entityName,
-          target: '129047',
-          value: 509
-        },
-        {
-          source: entityName,
-          target: '121522',
-          value: 2040
-        },
-        {
-          source: entityName,
-          target: '122715',
-          value: 550
-        },
-        {
-          source: entityName,
-          target: '129048',
-          value: 1090
-        }
-      ]
-      this.myChart.setOption(this.chartOption)
-      setTimeout(() => {
-        this.loading = false
-        this.$nextTick(() => {
-          this.echartsResize()
+      }).finally(() => {
+        setTimeout(() => {
+          this.loading = false
+          this.$nextTick(() => {
+            this.echartsResize()
+          })
+        }, 250)
+      })
+      /* const inDirection = new Promise(resolve =>
+        get(replaceUrlPlaceholder(chartParams.url, { ...queryParams, direction: 'ingress' })).then(response => {
+          if (response.code === 200) {
+            if (this.$_.isEmpty(response.data.result)) {
+              this.noData = true
+            } else {
+              this.noData = false
+              resolve(handleData(response.data.result, 'in'))
+            }
+          }
+          resolve()
         })
-      }, 250)
+      )
+      const outDirection = new Promise(resolve =>
+        get(replaceUrlPlaceholder(chartParams.url, { ...queryParams, direction: 'egress' })).then(response => {
+          if (response.code === 200) {
+            if (this.$_.isEmpty(response.data.result)) {
+              this.noData = true
+            } else {
+              this.noData = false
+              resolve(handleData(response.data.result, 'out'))
+            }
+          }
+          resolve()
+        })
+      )
+      Promise.all([inDirection, outDirection]).then(responses => {
+        const inData = responses[0]
+        const outData = responses[1]
+        this.chartOption.series[0].data = inData.data.concat(outData.data)
+        this.chartOption.series[0].links = inData.link.concat(outData.link)
+        this.myChart.setOption(this.chartOption)
+      }).finally(() => {
+        setTimeout(() => {
+          this.loading = false
+          this.$nextTick(() => {
+            this.echartsResize()
+          })
+        }, 250)
+      })
+
+      function handleData (originalData, direction) {
+        let totalValue = 0
+        originalData.forEach(item => {
+          totalValue += parseInt(item.bytes)
+        })
+        const data = originalData.map(item => {
+          return {
+            ...item,
+            name: item.linkID,
+            percent: unitConvert(parseInt(item.bytes) / totalValue, unitTypes.byte),
+            bytes: unitConvert(item.bytes, unitTypes.byte)
+          }
+        })
+
+        const link = data.map(item => {
+          const source = direction === 'in' ? item.linkID : entityName
+          const target = direction === 'in' ? entityName : item.linkID
+          return {
+            ...item,
+            source,
+            target,
+            value: item.bytes
+          }
+        })
+        return {
+          data,
+          link
+        }
+      } */
     },
     initIpOpenPort (chartParams) {
       get(replaceUrlPlaceholder(chartParams.url, { ip: this.entity.ip })).then(response => {
@@ -2081,7 +2080,7 @@ export default {
 }
 .sankey__tooltip {
   width: 270px;
-  height: 200px;
+  height: 170px;
   padding: 5px;
   display: flex;
   flex-direction: column;

src/views/charts/Panel.vue

@@ -63,7 +63,15 @@
     </div>
     <div class="entity-detail__body">
       <div class="cn-panel">
-        <chart v-for="chart in detailChartList" :key="chart.id" :chart="chart" :time-filter="timeFilter" :ref="`chart-${chart.id}`" :entity="entity"></chart>
+        <chart
+            v-for="chart in detailChartList"
+            :key="chart.id"
+            :chart="chart"
+            :time-filter="timeFilter"
+            :ref="`chart-${chart.id}`"
+            :entity="entity"
+            @getCurrentTimeRange="getCurrentTimeRange"
+        ></chart>
       </div>
     </div>
   </div>

src/views/settings/GalaxyProxy.vue

@@ -18,6 +18,23 @@
                 type="button" @click="add">
           <i class="cn-icon-add cn-icon"></i>
         </button>
+        <button id="galaxy-proxy-debug" class="top-tool-btn margin-r-10"  :title="$t('overall.debug')"
+                type="button" @click="debug(true,{})">
+          <i class="cn-icon-category cn-icon"></i>
+        </button>
+        <top-tool-more-options
+                ref="export"
+                id="model"
+                :params="searchLabel"
+                class="top-tool-export margin-l-10 margin-r-10"
+                export-file-name="galaxyProxy"
+                export-url="/galaxy/setting/export"
+                import-url="/galaxy/setting/import"
+                @afterImport="getTableData"
+        >
+          <template v-slot:before>
+          </template>
+        </top-tool-more-options>
       </template>
       <template v-slot:default>
         <galaxy-proxy-table
@@ -33,6 +50,7 @@
             @reload="getTableData"
             @selectionChange="selectionChange"
             @copy="copy"
+            @debug="debugRow"
         ></galaxy-proxy-table>
       </template>
       <!-- 分页组件 -->
@@ -49,6 +67,11 @@
       <galaxy-proxy-box :object="object" @close="closeRightBox"></galaxy-proxy-box>
     </el-drawer>
   </div>
+  <galaxy-proxy-debug
+          v-model:show-debug="showDebug"
+          top="5vh"
+          :show-close="false"
+          :curGalaxyProxy="curGalaxyProxy"></galaxy-proxy-debug>
 </template>
 
 <script>
@@ -58,13 +81,17 @@ import galaxyProxyTable from '@/components/table/settings/GalaxyProxyTable'
 import dataListMixin from '@/mixins/dataList'
 import { api } from '@/utils/api'
 import { get, put } from '@/utils/http'
+import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
+import galaxyProxyDebug from '@/components/setting/GalaxyProxyDebug'
 
 export default {
   name: 'GalaxyProxy',
   components: {
     cnDataList,
     galaxyProxyBox,
-    galaxyProxyTable
+    galaxyProxyTable,
+    topToolMoreOptions,
+    galaxyProxyDebug
   },
   mixins: [dataListMixin],
   data () {
@@ -73,7 +100,9 @@ export default {
       tableId: 'galaxySettingTable', // 需要分页的table的id，用于记录每页数量
       blankObject: { // 空白对象
         name: ''
-      }
+      },
+      showDebug: false,
+      curGalaxyProxy: {}
     }
   },
   methods: {
@@ -90,6 +119,15 @@ export default {
         }
       })
     },
+    debug (isTopDebug, u) {
+      if (!isTopDebug && u) {
+        this.curGalaxyProxy = JSON.parse(JSON.stringify(u))
+      }
+      this.showDebug = true
+    },
+    debugRow (u) {
+      this.debug(false, u)
+    },
     clearCache () {
       put(`${this.url}/clearCache`).then(response => {
         if (response.code === 200) {
@@ -101,6 +139,7 @@ export default {
         this.$message.error(this.$t('tip.unknownError'))
       })
     }
+
   }
 }
 </script>