CN-119 feat: 完成interface页面

2021-09-02 17:12:27 +08:00
parent 5973ca1b6e
commit cbcf111ccf
20 changed files with 496 additions and 130 deletions
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
  "dependencies": {
    "@amcharts/amcharts4": "^4.10.20",
    "@amcharts/amcharts4-geodata": "^4.1.20",
+    "@highlightjs/vue-plugin": "^2.0.1",
    "axios": "^0.21.1",
    "babel-plugin-lodash": "^3.3.4",
    "core-js": "^3.6.5",
@@ -22,11 +23,13 @@
    "moment-timezone": "^0.5.33",
    "node-sass": "^4.14.1",
    "postcss-px2rem-exclude": "0.0.6",
+    "prismjs": "^1.24.1",
    "sass-loader": "^8.0.2",
    "sass-resources-loader": "^2.2.1",
    "vue": "^3.0.0",
    "vue-grid-layout": "^3.0.0-beta1",
    "vue-i18n": "^9.1.6",
+    "vue-prism-editor": "^2.0.0-alpha.2",
    "vue-router": "^4.0.8",
    "vuex": "^4.0.1"
  },
--- a/src/assets/css/rightBoxCommon.scss
+++ b/src/assets/css/rightBoxCommon.scss
@@ -1,3 +1,6 @@
+.el-drawer__body {
+  height: 100%;
+}
 .right-box, .right-sub-box {
  display: flex;
  flex-direction: column;
--- a/src/components/rightBox/settings/GalaxyProxyBox.vue
+++ b/src/components/rightBox/settings/GalaxyProxyBox.vue
@@ -0,0 +1,121 @@
+<template>
+  <div v-click-outside="{object: editObject, func: esc}" class="right-box">
+    <div class="right-box__header">
+      <div class="header__title">{{editObject.id ? $t('overall.edit') : $t('overall.new')}}</div>
+      <div class="header__operation">
+        <span v-cancel="{object: editObject, func: esc}"><i class="cn-icon cn-icon-close"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="userForm" :model="editObject" :rules="rules" label-position="top" label-width="120px">
+          <!--name-->
+          <el-form-item :label="$t('overall.name')" prop="name">
+            <el-input id="proxy-name" v-model="editObject.name"
+                      maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
+          </el-form-item>
+          <!--path-->
+          <el-form-item :label="$t('overall.path')" prop="path">
+            <el-input id="proxy-path" v-model="editObject.path"
+                      placeholder="" show-word-limit size="small" type="text"></el-input>
+          </el-form-item>
+          <!--method-->
+          <el-form-item :label="$t('overall.method')" prop="method">
+            <el-select id="proxy-method"
+                       v-model="editObject.method"
+                       placeholder=" "
+                       size="small"
+                       class="right-box__select"
+                       popper-class="right-box-select-dropdown prevent-clickoutside"
+            >
+              <el-option value="get"></el-option>
+              <el-option value="post"></el-option>
+              <el-option value="put"></el-option>
+              <el-option value="fetch"></el-option>
+            </el-select>
+          </el-form-item>
+          <!--version-->
+          <el-form-item :label="$t('overall.version')" prop="version">
+            <el-input id="proxy-version" v-model="editObject.version" placeholder="" size="small" type="text"></el-input>
+          </el-form-item>
+          <!--target-->
+          <el-form-item :label="$t('galaxyProxy.targetUrl')" prop="targetUrl">
+            <el-input id="proxy-targetUrl" v-model="editObject.targetUrl" placeholder="" size="small" type="text"></el-input>
+          </el-form-item>
+          <!--target param-->
+          <el-form-item :label="$t('galaxyProxy.targetParam')" prop="targetParam">
+            <prism-editor class="my-editor" v-model="editObject.targetParam" :highlight="jsonHl" line-numbers></prism-editor>
+          </el-form-item>
+          <!--target header-->
+          <el-form-item :label="$t('galaxyProxy.targetHeader')" prop="targetHeader">
+            <prism-editor class="my-editor" v-model="editObject.targetHeader" :highlight="jsonHl" line-numbers></prism-editor>
+          </el-form-item>
+          <!--pre handle-->
+          <el-form-item label="Pre handle" prop="preHandle">
+            <prism-editor class="my-editor" v-model="editObject.preHandle" :highlight="javascriptHl" line-numbers></prism-editor>
+          </el-form-item>
+          <!--post handle-->
+          <el-form-item label="Post handle" prop="postHandle">
+            <prism-editor class="my-editor" v-model="editObject.postHandle" :highlight="javascriptHl" line-numbers></prism-editor>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import rightBoxMixin from '@/mixins/rightBox'
+import { api } from '@/utils/api'
+import { PrismEditor } from 'vue-prism-editor'
+import 'vue-prism-editor/dist/prismeditor.min.css'
+import { highlight, languages } from 'prismjs/components/prism-core'
+import 'prismjs/components/prism-clike'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/themes/prism-tomorrow.css'
+
+export default {
+  name: 'GalaxyProxyBox',
+  mixins: [rightBoxMixin],
+  components: {
+    PrismEditor
+  },
+  data () {
+    return {
+      url: api.galaxyProxy,
+      rules: { // 表单校验规则
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    jsonHl (code) {
+      return highlight(code, languages.js, 'json')
+    },
+    javascriptHl (code) {
+      return highlight(code, languages.js, 'javascript')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.my-editor {
+  margin-top: 4px;
+  border: 1px solid $--right-box-border-color;
+
+  .prism-editor__textarea {
+    outline: none;
+  }
+}
+</style>
--- a/src/components/table/CnDataList.vue
+++ b/src/components/table/CnDataList.vue
@@ -14,7 +14,7 @@
            <div v-if="showLayout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20">
              <div style="display: flex">
                <el-input
-                    v-model="keyWord"  size="small" @keyup.enter.native="onsearch"></el-input>
+                    v-model="keyWord"  size="small" @keyup.enter="onsearch"></el-input>
 <!--                <el-button icon="el-icon-search" @click="onsearch" size="small"></el-button>-->
                <button   class="top-tool-btn" style="border-radius: 0px"
                        type="button" @click="onsearch">
--- a/src/components/table/settings/GalaxyProxyTable.vue
+++ b/src/components/table/settings/GalaxyProxyTable.vue
@@ -0,0 +1,209 @@
+<template>
+  <el-table
+    id="userTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    tooltip-effect="light"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitles"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :width="`${item.width}`"
+      :show-overflow-tooltip="['targetParam', 'targetHeader', 'preHandle', 'postHandle'].indexOf(item.prop) === -1"
+    >
+      <template #header>
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template #default="scope" :column="item">
+        <template v-if="item.prop === 'targetParam' || item.prop === 'targetHeader'">
+          <template v-if="scope.row[item.prop]">
+            <el-popover
+                width="250px"
+                popper-class="js-code-highlight"
+                placement="left"
+                trigger="hover"
+            >
+              <template #reference>
+                <span style="color: #41ABFD">{...}</span>
+              </template>
+              <div class="highlight-box">
+                <span class="highlight-box__copy-btn" @click="copyValue(scope.row[item.prop])"><i class="el-icon-document-copy"></i></span>
+                <highlightjs
+                    language="json"
+                    :code="scope.row[item.prop]"
+                />
+              </div>
+            </el-popover>
+          </template>
+          <template v-else>-</template>
+        </template>
+        <template v-else-if="item.prop === 'preHandle' || item.prop === 'postHandle'">
+          <template v-if="scope.row[item.prop]">
+            <el-popover
+                width="250px"
+                popper-class="js-code-highlight"
+                placement="left"
+                trigger="hover"
+            >
+              <template #reference>
+                <span style="color: #41ABFD">{...}</span>
+              </template>
+              <div class="highlight-box">
+                <span class="highlight-box__copy-btn" @click="copyValue(scope.row[item.prop])"><i class="el-icon-document-copy"></i></span>
+                <highlightjs
+                    language="js"
+                    :code="scope.row[item.prop]"
+                />
+              </div>
+            </el-popover>
+          </template>
+          <template v-else>-</template>
+        </template>
+        <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :resizable="false"
+      :width="operationWidth"
+      fixed="right">
+      <template #header>
+        <div class="table-operation-title">{{$t('overall.option')}}</div>
+      </template>
+      <template #default="scope">
+        <div class="table-operation-items">
+          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
+          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
+            <div class="table-operation-item table-operation-item--more">
+              <i class="cn-icon cn-icon-more-arrow-down"></i>
+            </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="['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-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import table from '@/mixins/table'
+import { copyValue } from '@/utils/tools'
+
+export default {
+  name: 'galaxyProxyTable',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true,
+          sortable: 'custom',
+          width: 150
+        }, {
+          label: this.$t('overall.path'),
+          prop: 'path',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('overall.method'),
+          prop: 'method',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('overall.version'),
+          prop: 'version',
+          show: true,
+          minWidth: 150
+        }, {
+          label: this.$t('galaxyProxy.targetUrl'),
+          prop: 'targetUrl',
+          show: true,
+          width: 250
+        }, {
+          label: this.$t('galaxyProxy.targetParam'),
+          prop: 'targetParam',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('galaxyProxy.targetHeader'),
+          prop: 'targetHeader',
+          show: true,
+          width: 150
+        }, {
+          label: 'Pre handle',
+          prop: 'preHandle',
+          show: true,
+          width: 150
+        }, {
+          label: 'Post handle',
+          prop: 'postHandle',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          show: true
+        }
+      ]
+    }
+  },
+  setup () {
+    return {
+      copyValue
+    }
+  }
+}
+</script>
+<style lang="scss">
+.js-code-highlight {
+  height: 250px;
+
+  .highlight-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+
+    .highlight-box__copy-btn {
+      position: absolute;
+      right: 5px;
+      top: 5px;
+      cursor: pointer;
+    }
+  }
+}
+pre code.hljs {
+  overflow-x: visible;
+}
+</style>
--- a/src/components/table/settings/I18nTable.vue
+++ b/src/components/table/settings/I18nTable.vue
@@ -32,26 +32,7 @@
        <div class="col-resize-area"></div>
      </template>
      <template #default="scope" :column="item">
-        <template v-if="item.prop === 'roles'">
-          <template v-if="scope.row[item.prop]">
-            {{scope.row[item.prop].map(t=>t.name).join(',')}}
-          </template>
-          <template v-else>
-            <span>-</span>
-          </template>
-        </template>
-        <template v-else-if="item.prop === 'status'">
-          <el-switch
-              v-if="scope.row.id"
-              v-model="scope.row.status"
-              :active-color="theme.themeColor"
-              active-value="1"
-              :disabled="(scope.row.username === loginName) || (scope.row.username==='admin' && scope.row.id==1) "
-              inactive-value="0"
-              @change="()=>{statusChange(scope.row)}">
-          </el-switch>
-        </template>
-        <span v-else>{{scope.row[item.prop]}}</span>
+        <span>{{scope.row[item.prop]}}</span>
      </template>
    </el-table-column>
    <el-table-column
@@ -70,7 +51,7 @@
            </div>
            <template #dropdown>
              <el-dropdown-menu >
-                <el-dropdown-item v-has="'user_delete'" :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
@@ -82,14 +63,14 @@

 <script>
 import table from '@/mixins/table'
-import { put } from '@/utils/http'
+import { api } from '@/utils/api'

 export default {
  name: 'I18nTable',
  mixins: [table],
  data () {
    return {
-      loginName: localStorage.getItem('cn-username'),
+      url: api.i18n,
      tableTitle: [ // 原始table列
        {
          label: 'ID',
@@ -123,22 +104,6 @@ export default {
        }
      ]
    }
-  },
-  methods: {
-    statusChange (i18n) {
-      if (i18n.roles) {
-        i18n.roleIds = i18n.roles.map(t => t.id)
-      }
-      put('sys/i18n', i18n).then(response => {
-        if (response.code === 200) {
-          this.rightBox.show = false
-          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-        } else {
-          this.$message.error(response.msg)
-        }
-        this.$emit('reload')
-      })
-    }
  }
 }
 </script>
--- a/src/components/table/settings/RoleTable.vue
+++ b/src/components/table/settings/RoleTable.vue
@@ -63,7 +63,7 @@
            </div>
            <template #dropdown>
              <el-dropdown-menu >
-                <el-dropdown-item v-has="'user_delete'" :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
--- a/src/components/table/settings/UserTable.vue
+++ b/src/components/table/settings/UserTable.vue
@@ -70,7 +70,7 @@
            </div>
            <template #dropdown>
              <el-dropdown-menu >
-                <el-dropdown-item v-has="'user_delete'" :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,8 @@ import commonMixin from '@/mixins/common'
 import { cancelWithChange, clickOutside, noData } from '@/utils/tools'
 import { ClickOutside } from 'element-plus/lib/directives'
 import i18n from '@/i18n'
+import hljsVuePlugin from '@highlightjs/vue-plugin'
+import 'highlight.js/styles/color-brewer.css'
 import '@/assets/css/main.scss' // 样式入口
 // import VueGridLayout from 'vue-grid-layout'
 import ElementPlus from 'element-plus'
@@ -30,6 +32,7 @@ app.use(router)
 app.use(store)
 app.use(ElementPlus)
 app.use(i18n)
+app.use(hljsVuePlugin)
 // app.use(VueGridLayout)

 app.directive('has', hasPermission) // 注册指令
--- a/src/mixins/dataList.js
+++ b/src/mixins/dataList.js
@@ -66,11 +66,9 @@ export default {
      if (params) {
        this.searchLabel = { ...this.searchLabel, ...params }
      }
-      // console.log(...this.pageObj)
      this.searchLabel = { ...this.searchLabel, ...this.pageObj }
      this.tools.loading = true
-      // console.log(typeof this.searchLabel)
-      console.log(delete this.searchLabel.total)
+      delete this.searchLabel.total
      get(this.url, this.searchLabel).then(response => {
        this.tools.loading = false
        if (response.code === 200) {
--- a/src/mixins/rightBox.js
+++ b/src/mixins/rightBox.js
@@ -1,3 +1,5 @@
+import { post, put } from '@/utils/http'
+
 export default {
  props: {
    object: {
@@ -17,6 +19,39 @@ export default {
    esc (refresh) {
      this.unblockOperation()
      this.$emit('close', refresh)
+    },
+    save () {
+      if (this.blockOperation.save) { return }
+      this.blockOperation.save = true
+
+      this.$refs.userForm.validate((valid) => {
+        if (valid) {
+          if (this.editObject.id) {
+            put(this.url, this.editObject).then(res => {
+              this.blockOperation.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          } else {
+            post(this.url, this.editObject).then(res => {
+              this.blockOperation.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }
+        } else {
+          this.blockOperation.save = false
+          return false
+        }
+      })
    }
  },
  watch: {
--- a/src/mixins/table.js
+++ b/src/mixins/table.js
@@ -40,18 +40,6 @@ export default {
  methods: {
    tableOperation ([command, row, param]) {
      switch (command) {
-        case 'recordTab': {
-          this.$emit('showBottomBox', 'recordTab', row)
-          break
-        }
-        case 'endpointQuery': {
-          this.$emit('showBottomBox', 'endpointQuery', row)
-          break
-        }
-        case 'fastSilence': {
-          this.$emit('addSilence', row, param)
-          break
-        }
        default:
          this.$emit(command, row)
          break
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -33,6 +33,10 @@ const routes = [
      {
        path: '/entityExplorer',
        component: () => import('@/views/entities/EntityExplorer')
+      },
+      {
+        path: '/galaxyProxy',
+        component: () => import('@/views/settings/GalaxyProxy')
      }
    ]
  }
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -12,6 +12,10 @@ export const api = {
  permission: '/sys/user/permissions',
  i18n: '/sys/i18n/lang',
  dict: '/sys/dict',
+  user: '/sys/user',
+  role: '/sys/role',
+  galaxyProxy: '/galaxy/setting',
+  operationLog: '/sys/log',
  // 业务
  panel: '/visual/panel',
  chart: '/visual/chart',
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -29,7 +29,8 @@ export const fromRoute = {
  trafficSummary: 'trafficSummary',
  networkAppPerformance: 'networkAppPerformance',
  dnsServiceInsights: 'dnsServiceInsights',
-  user: 'user'
+  user: 'user',
+  galaxyProxy: 'galaxyProxy'
 }

 /* panel类别和路由之间的映射 */
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -1,4 +1,4 @@
-import { ElMessageBox } from 'element-plus'
+import { ElMessageBox, ElMessage } from 'element-plus'
 import i18n from '@/i18n'
 import _ from 'lodash'
 import { storageKey, iso36112 } from '@/utils/constants'
@@ -462,3 +462,16 @@ function JSONParse (data) {
    return firstParse
  }
 }
+
+export function copyValue (item) {
+  const str = item
+  const domUrl = document.createElement('input')
+  domUrl.value = JSON.stringify(str)
+  domUrl.id = 'creatDom'
+  document.body.appendChild(domUrl)
+  domUrl.select() // 选择对象
+  document.execCommand('Copy') // 执行浏览器复制命令
+  const creatDom = document.getElementById('creatDom')
+  creatDom.parentNode.removeChild(creatDom)
+  ElMessage.success(i18n.global.t('tip.copySuccess'))
+}
--- a/src/views/settings/GalaxyProxy.vue
+++ b/src/views/settings/GalaxyProxy.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <cn-data-list
+        ref="dataList"
+        :tableId="tableId"
+        v-model:custom-table-title="tools.customTableTitle"
+        :api="url"
+        :from="fromRoute.galaxyProxy"
+        :layout="['columnCustomize','elementSet','searchInput']"
+        @search="search"
+    >
+      <template v-slot:top-tool-right>
+        <button id="galaxy-proxy-add" class="top-tool-btn margin-r-10"
+                type="button" @click="add">
+          <i class="cn-icon-add cn-icon"></i>
+        </button>
+      </template>
+      <template v-slot:default>
+        <galaxy-proxy-table
+            ref="dataTable"
+            v-loading="tools.loading"
+            :api="url"
+            :custom-table-title="tools.customTableTitle"
+            :height="mainTableHeight"
+            :table-data="tableData"
+            @delete="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
+            @copy="copy"
+        ></galaxy-proxy-table>
+      </template>
+      <!-- 分页组件 -->
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+    <el-drawer
+        v-model="rightBox.show"
+        direction="rtl"
+        :size="700"
+        :with-header="false"
+        destroy-on-close>
+      <galaxy-proxy-box :object="object" @close="closeRightBox"></galaxy-proxy-box>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import cnDataList from '@/components/table/CnDataList'
+import galaxyProxyBox from '@/components/rightBox/settings/GalaxyProxyBox'
+import galaxyProxyTable from '@/components/table/settings/GalaxyProxyTable'
+import dataListMixin from '@/mixins/dataList'
+import { api } from '@/utils/api'
+
+export default {
+  name: 'GalaxyProxy',
+  components: {
+    cnDataList,
+    galaxyProxyBox,
+    galaxyProxyTable
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: api.galaxyProxy,
+      tableId: 'galaxySettingTable', // 需要分页的table的id，用于记录每页数量
+      blankObject: { // 空白对象
+        name: ''
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
--- a/src/views/settings/OperationLog.vue
+++ b/src/views/settings/OperationLog.vue
@@ -7,8 +7,7 @@
      :layout="['searchInput', 'elementSet','searchInput']"
      v-model:custom-table-title="tools.customTableTitle"
      :from="fromRoute.operationLog"
-      @search="search"
-      :search-msg="searchMsg">
+      @search="search">
      <template v-slot:default>
        <operation-log-table
          ref="dataTable"
@@ -36,6 +35,7 @@
 import cnDataList from '@/components/table/CnDataList'
 import dataListMixin from '@/mixins/dataList'
 import operationLogTable from '@/components/table/settings/OperationLogTable'
+import { api } from '@/utils/api'

 export default {
  name: 'operationLog',
@@ -46,49 +46,8 @@ export default {
  mixins: [dataListMixin],
  data () {
    return {
-      url: 'sys/log',
-      tableId: 'operationLogTable', // 需要分页的table的id，用于记录每页数量
-      searchMsg: { // 给搜索框子组件传递的信息
-        searchLabelList: [
-          {
-            id: 11,
-            name: this.$t('config.operationlog.type'),
-            type: 'input',
-            label: 'type',
-            disabled: false
-          }, {
-            id: 12,
-            name: this.$t('config.operationlog.username'),
-            type: 'input',
-            label: 'username',
-            disabled: false
-          }, {
-            id: 13,
-            name: this.$t('config.operationlog.operation'),
-            type: 'selectString',
-            label: 'operation',
-            disabled: false
-          }, {
-            id: 14,
-            name: this.$t('config.operationlog.operaId'),
-            type: 'input',
-            label: 'operaId',
-            disabled: false
-          }, {
-            id: 16,
-            name: this.$t('config.operationlog.state'),
-            type: 'selectString',
-            label: 'state',
-            disabled: false
-          }, {
-            id: 17,
-            name: this.$t('config.operationlog.params'),
-            type: 'input',
-            label: 'params',
-            disabled: false
-          }
-        ]
-      }
+      url: api.operationLog,
+      tableId: 'operationLogTable' // 需要分页的table的id，用于记录每页数量
    }
  }
 }
--- a/src/views/settings/Roles.vue
+++ b/src/views/settings/Roles.vue
@@ -10,11 +10,11 @@
            @search="search"
    >
      <template v-slot:top-tool-right>
-        <button id="roles-add" v-has="'role_add'" :title="$t('overall.createRole')" class="top-tool-btn margin-r-10"
+        <button id="roles-add" :title="$t('overall.createRole')" class="top-tool-btn margin-r-10"
                type="button" @click="add">
          <i class="cn-icon-add cn-icon"></i>
        </button>
-        <delete-button id="role-list-batch-delete" v-has="'role_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+        <delete-button id="role-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
      </template>
      <template v-slot:default>
        <roles-table
@@ -29,7 +29,7 @@
          @orderBy="tableDataSort"
          @reload="getTableData"
          @selectionChange="selectionChange"
-          @showBottomBox="(targetTab) => { $refs.dataList.showBottomBox(targetTab, object) }"></roles-table>
+        ></roles-table>
      </template>
      <!-- 分页组件 -->
      <template #pagination>
@@ -51,6 +51,7 @@ import cnDataList from '@/components/table/CnDataList'
 import dataListMixin from '@/mixins/dataList'
 import rolesTable from '@/components/table/settings/RoleTable'
 import roleBox from '@/components/rightBox/settings/RoleBox'
+import { api } from '@/utils/api'

 export default {
  name: 'roles',
@@ -62,28 +63,12 @@ export default {
  mixins: [dataListMixin],
  data () {
    return {
-      url: 'sys/role',
+      url: api.role,
      tableId: 'rolesTable', // 需要分页的table的id，用于记录每页数量
      blankObject: { // 空白对象
        name: ''
-      },
-      searchMsg: { // 给搜索框子组件传递的信息
-        zheze_none: true,
-        searchLabelList: [{
-          id: 10,
-          name: this.$t('config.roles.name'),
-          type: 'input',
-          label: 'name',
-          disabled: false
-        }]
      }
    }
-  },
-  methods: {
-    edit (row) {
-      this.object = { ...row }
-      this.rightBox.show = true
-    }
  }
 }
 </script>
--- a/src/views/settings/User.vue
+++ b/src/views/settings/User.vue
@@ -12,7 +12,6 @@
      <template #top-tool-right>
        <button
          id="account-add"
-          v-has="'user_add'"
          class="top-tool-btn margin-r-10"
          type="button"
          @click="add"
@@ -33,7 +32,6 @@
          @orderBy="tableDataSort"
          @reload="getTableData"
          @selectionChange="selectionChange"
-          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"
        />
      </template>
      <template #pagination>
@@ -58,7 +56,7 @@ import cnDataList from '@/components/table/CnDataList'
 import dataListMixin from '@/mixins/dataList'
 import userTable from '@/components/table/settings/UserTable'
 import userBox from '@/components/rightBox/settings/UserBox'
-import { put } from '@/utils/http'
+import { api } from '@/utils/api'

 export default {
  name: 'User',
@@ -70,7 +68,7 @@ export default {
  },
  data () {
    return {
-      url: 'sys/user',
+      url: api.user,
      blankObject: { // 空白对象
        id: '',
        name: '',
@@ -84,8 +82,6 @@ export default {
      },
      tableId: 'userTable'
    }
-  },
-  methods: {
  }
 }
 </script>