update：废弃setup()写法替换为<script setup>

src/bg-ui/bg-filter-group.vue

@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="filter-group" v-if="showFlag">
-        <slot name="filter_group"></slot>
+      <slot name="filter_group"></slot>
     </div>
   </div>
 </template>

src/bg-ui/bg-pagination.vue

@@ -15,54 +15,48 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "pagination",
-  props: {
-    small: {
-      type: Boolean,
-      default: () => false
-    },
-    page: {
-      type: Number,
-      default: 1
-    },
-    size: {
-      type: Number,
-      default: 10,
-    },
-    pageSizes: {
-      type: Array,
-      default: [10,50,100]
-    },
-    total: {
-      type: Number,
-      default: 0
-    },
-    layout: {
-      type: String,
-      default: "total, sizes, prev, pager, next, jumper"
-    },
-    background: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
+<script setup>
+const props = defineProps({
+  small: {
+    type: Boolean,
+    default: () => false
   },
-  setup(props, context) {
-    const changePage = (val) => {
-      context.emit("change-page",val)
-    }
-    const changeSize = (val) => {
-      context.emit("change-size",val)
-    }
-    return {
-      changePage,
-      changeSize
-    }
+  page: {
+    type: Number,
+    default: 1
   },
+  size: {
+    type: Number,
+    default: 10,
+  },
+  pageSizes: {
+    type: Array,
+    default: [10,50,100]
+  },
+  total: {
+    type: Number,
+    default: 0
+  },
+  layout: {
+    type: String,
+    default: "total, sizes, prev, pager, next, jumper"
+  },
+  background: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['change-page','change-size'])
+
+const changePage = (val) => {
+  emit("change-page",val)
+}
+
+const changeSize = (val) => {
+  emit("change-size",val)
 }
 </script>

src/bg-ui/bg-rich-text.vue

 <template>
-    <div style="border: 1px solid #ccc;z-index: 100;">
-      <Toolbar
-        style="border-bottom: 1px solid #ccc"
-        :editor="editorRef"
-        :defaultConfig="toolbarConfig"
-        :mode="mode"
-      />
-      <Editor
-        style="height: 500px; overflow-y: hidden;"
-        v-model="valueHtml"
-        @onChange="handleChange"
-        @onBlur="handleBlur"
-        :defaultConfig="editorConfig"
-        :mode="mode"
-        @onCreated="handleCreated"
-      />
-    </div>
+  <div style="border: 1px solid #ccc;z-index: 100;">
+    <Toolbar
+      style="border-bottom: 1px solid #ccc"
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+    />
+    <Editor
+      style="height: 500px; overflow-y: hidden;"
+      v-model="valueHtml"
+      @onChange="handleChange"
+      @onBlur="handleBlur"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      @onCreated="handleCreated"
+    />
+  </div>
 </template>
 
-<script>
+<script setup>
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
 
-import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
+import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 
 import {
   useFormItem,
 } from 'element-plus'
 
-
-export default {
-  components: { Editor, Toolbar },
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-    },
-    disabled:{
-      type:Boolean,
-      default:false
-    }
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
   },
-  emits: ['update:modelValue','change','blur'],
-  watch:{
-    modelValue(n,o){
-      this.valueHtml = n
-    }
+  disabled:{
+    type:Boolean,
+    default:false
   },
-  setup(props,{ emit }) {
-    //引入form-item
-    const { formItem } = useFormItem()
-    // 编辑器实例，必须用 shallowRef
-    const editorRef = shallowRef()
-
-    // 内容 HTML
-    const valueHtml = ref('')
-
-    // 模拟 ajax 异步获取内容
-    onMounted(() => {
-      setTimeout(()=>{
-        valueHtml.value = props.modelValue
-        // console.log(valueHtml.value);
-      })
-    })
+  mode: {
+    type: String,
+    default: 'default'
+  }
+})
 
-    const toolbarConfig = {}
-    const editorConfig = { placeholder: '请输入内容...' }
+const emit = defineEmits(['update:modelValue','change','blur'])
 
-    // watch(
-    //   props,modelValue,
-    //   (n,o) => {
-        
-    //   }
-    // )
+const valueHtml = ref('')
 
-    // 组件销毁时，也及时销毁编辑器
-    onBeforeUnmount(() => {
-        const editor = editorRef.value
-        if (editor == null) return
-        editor.destroy()
-    })
+const { formItem } = useFormItem()
 
-    const handleCreated = (editor) => {
-      editorRef.value = editor // 记录 editor 实例，重要！
-      if(props.disabled){
-        editor.disable()
-      }
-    }
+const editorRef = shallowRef()
 
-    const handleChange = ()=>{
-      emit("update:modelValue", valueHtml.value);
-      // formItem?.validate?.('change').catch((err) => debugWarn(err))
-    }
+onMounted(() => {
+  setTimeout(()=>{
+    valueHtml.value = props.modelValue
+  })
+})
 
-    const handleBlur = ()=>{
-      formItem?.validate?.('blur').catch((err) => console.warn(err))
-    }
+const toolbarConfig = {}
+const editorConfig = { placeholder: '请输入内容...' }
 
-    return {
-      editorRef,
-      valueHtml,
-      mode: 'default', // 或 'simple'
-      toolbarConfig,
-      editorConfig,
-      handleCreated,
-      handleChange,
-      handleBlur,
-    };
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+const handleCreated = (editor) => {
+  editorRef.value = editor // 记录 editor 实例，重要！
+  if(props.disabled){
+    editor.disable()
   }
 }
+const handleChange = ()=>{
+  emit("update:modelValue", valueHtml.value);
+}
+const handleBlur = ()=>{
+  formItem?.validate?.('blur').catch((err) => console.warn(err))
+}
+
+watch(
+  () => props.modelValue,
+  (n,o) => {
+    valueHtml.value = n
+  }
+)
 </script>   
\ No newline at end of file

src/bg-ui/bg-table.vue

 <template>
   <el-table
+    :height="height"
     ref="table"
     class="bg-table"
     :data="rows"
@@ -31,10 +32,10 @@
       <!-- checkbox -->
     </el-table-column>
     <el-table-column
-      v-if="isIndex" 
-      type="index" 
-      :label="indexLabel" 
-      width="54" 
+      v-if="isIndex"
+      type="index"
+      :label="indexLabel"
+      width="54"
       align="left"
     >
       <!-- 序号 -->
@@ -66,148 +67,134 @@
   </el-table>
 </template>
 
-<script>
+<script setup>
+import { watch, ref, } from 'vue'
 import { selectTableMixin } from './hook/mixin-select-table'
-export default {
-  name: "BgTable",
-  setup() {
-    const { 
-      nowSelectData,
-      allSelectData,
-      selectData,
-      initSelectTableData,
-      runPage,
-      dealSelectData 
-    } = selectTableMixin()
+let {
+  nowSelectData,
+  allSelectData,
+  selectData,
+  initSelectTableData,
+  runPage,
+  dealSelectData
+} = selectTableMixin()
 
-    return { 
-      nowSelectData,
-      allSelectData,
-      selectData,
-      initSelectTableData,
-      runPage,
-      dealSelectData 
-    }
+const props = defineProps({
+  height: {
+    type: [Number, String],
+    default: 'auto'
   },
-  props: {
-    headers: {
-      type: Array,
-      require: true,
-    },
-    rows: {
-      type: Array,
-      default: () => [],
-    },
-    select: {
-      type: Boolean,
-      default: false,
-    },
-    // selectable: {
-    //   type: Function,
-    // },
-    isIndex: { 
-      type: Boolean,
-      default: false 
-    },
-    indexLabel: { 
-      type: String, 
-      default: "序号" 
-    },
-    stripe: {
-      type: Boolean,
-      default: false
-    },
-    paddingLeft: {
-      type: [Number, String],
-      default: () => 12,
-    },
-    canEdit: {
-      type: Boolean,
-      default: false
-    }, // 多选框是否禁用
-    canEditFlag: {
-      typr : Boolean,
-      default: ""
-    }, // 决定多选框是否禁用的字段
+  headers: {
+    type: Array,
+    require: true,
   },
-  /* filters: {
-    ellipsis(value, max) {
-      if (!value) {
-        return "";
-      } else if (max && value.length > max) {
-        return value.slice(0, max - 1) + "...";
-      } else {
-        return value;
-      }
-    },
-  }, */
-  watch:{
-    rows(n,o){
-      if(n.length&&this.select){
-        this.runPage()
-        this.initSelectTableData(n).then((selectData)=>{
-          if(selectData.length){
-            setTimeout(()=>{
-              this.toggleRowArrSelection(selectData)
-            })
-          }
-        })
-      }
-    }
+  rows: {
+    type: Array,
+    default: () => [],
+  },
+  select: {
+    type: Boolean,
+    default: false,
+  },
+  // selectable: {
+  //   type: Function,
+  // },
+  isIndex: {
+    type: Boolean,
+    default: false
+  },
+  indexLabel: {
+    type: String,
+    default: "序号"
+  },
+  stripe: {
+    type: Boolean,
+    default: false
   },
-  created(){
-    console.log(this.$attrs)
+  paddingLeft: {
+    type: [Number, String],
+    default: () => 12,
   },
-  methods: {
-    toggleRowSelection(row, flag = true) {
-      this.$refs.table.toggleRowSelection(row, flag);
-    },
-    selectAction(selection) {
-      this.$emit("selectAc", {allLength:Object.keys(this.allSelectData).length+this.nowSelectData.length,selection});
-    },
-    clearSelection() {
-      this.$refs.table.clearSelection();
-       this.$emit("select", {allLength:Object.keys(this.allSelectData).length+this.nowSelectData.length,selection:[]});
-    },
-    setSelectedRow(row) {
-      this.$refs.table.toggleRowSelection(row);
-    },
-    toggleRowArrSelection(arr, flag = true){
-      arr.forEach(e => {
-        this.$refs.table.toggleRowSelection(e, flag);
-      });
-    },
-    selectActionRow(selection,row){
-      this.selectData(selection)
-      this.$emit("select", {allLength:Object.keys(this.allSelectData).length+this.nowSelectData.length,selection});
-    },
-    selectActionAll(selection){
-      this.selectData(selection)
-      this.$emit("select", {allLength:Object.keys(this.allSelectData).length+this.nowSelectData.length,selection});
-    },
-    clearTable(){//清除选中数据,在页面状态更新时使用
-      this.allSelectData={}
-      this.nowSelectData=[]
-      this.clearSelection();
-    },
-    tableRowClassName({ row, rowIndex }) {
-      if (rowIndex % 2 == 0) {
-        return "white-row";
-      } else {
-        return "stripe-row";
-      }
-    },
-    selectable(row,index) {
-      if (this.canEdit) {
-        if (row[this.canEditFlag] && row[this.canEditFlag] == 1) {
-          return false
-        }else {
-          return true
+  canEdit: {
+    type: Boolean,
+    default: false
+  }, // 多选框是否禁用
+  canEditFlag: {
+    typr : Boolean,
+    default: ""
+  }, // 决定多选框是否禁用的字段
+})
+
+const table = ref(null)
+
+const emit = defineEmits(['selectAc','select'])
+watch(
+  () => props.rows,
+  (n,o) => {
+    if (n.length && props.select) {
+      runPage()
+      initSelectTableData(n).then((selectData)=>{
+        if(selectData.length){
+          setTimeout(()=>{
+            toggleRowArrSelection(selectData)
+          })
         }
-      }else {
-        return true
-      }
+      })
     }
-  },
-};
+  }
+)
+
+const toggleRowSelection = (row, flag = true) => {
+  table.value.toggleRowSelection(row, flag);
+}
+const selectAction = (selection) => {
+  emit("selectAc", {allLength:Object.keys(allSelectData).length+nowSelectData.length,selection});
+}
+const clearSelection = () => {
+  table.value.clearSelection();
+  emit("select", {allLength:Object.keys(allSelectData).length+nowSelectData.length,selection:[]});
+}
+const setSelectedRow = (row) => {
+  toggleRowSelection(row);
+}
+const toggleRowArrSelection = (arr, flag = true) => {
+  arr.forEach(e => {
+    toggleRowSelection(e, flag);
+  });
+}
+const selectActionRow = (selection,row) => {
+  selectData(selection)
+  emit("select", {allLength:Object.keys(allSelectData).length+nowSelectData.length,selection});
+}
+const selectActionAll = (selection) => {
+  selectData(selection)
+  emit("select", {allLength:Object.keys(allSelectData).length+nowSelectData.length,selection});
+}
+const clearTable = () => {//清除选中数据,在页面状态更新时使用
+  allSelectData={}
+  nowSelectData=[]
+  clearSelection();
+}
+const tableRowClassName = ({ row, rowIndex }) => {
+  if (rowIndex % 2 == 0) {
+    return "white-row";
+  } else {
+    return "stripe-row";
+  }
+}
+const selectable = (row,index) => {
+  if (props.canEdit) {
+    if (row[props.canEditFlag] && row[props.canEditFlag] == 1) {
+      return false
+    }else {
+      return true
+    }
+  }else {
+    return true
+  }
+}
+defineExpose({
+  clearTable,
+  toggleRowSelection,
+})
 </script>

src/components/ability-detail/base-info.vue

-<template>
-  <div class="base-info" v-if="data">
-    <div class="info-icon" v-if="data.ability_logo">
-      <img :src="data.ability_logo" />
-    </div>
-    <div class="info-detail">
-      <h3>
-        <span>{{ data.ability_name }}</span>
-        <span class="openness" v-if="data.openness_name != ''">{{ data.openness_name }}</span>
-      </h3>
-      <p>{{ data.synopsis }}</p>
-      <ul>
-        <li class="text-clip">
-          <bg-icon icon="#bg-ic-layers" />
-          <span>业务类型：</span>
-          <span>{{ data.business_type_name }}</span>
-        </li>
-        <li class="text-clip">
-          <bg-icon icon="#bg-ic-user" />
-          <span>联系人：&emsp;</span>
-          <span>{{ data.contact_person }}</span>
-        </li>
-        <li class="text-clip">
-          <bg-icon icon="#bg-ic-time" />
-          <span>发布时间：&emsp;&emsp;</span>
-          <span>{{ data.created_time }}</span>
-        </li>
-        <li class="text-clip">
-          <bg-icon icon="#bg-ic-layout-4" />
-          <span>业务领域：</span>
-          <span>{{ data.sectors_name }}</span>
-        </li>
-        <li class="text-clip">
-          <bg-icon icon="#bg-ic-phone-call" />
-          <span>联系电话：</span>
-          <span>{{ data.contact_phone }}</span>
-        </li>
-        <li class="text-clip">
-          <bg-icon icon="#bg-ic-time" />
-          <span>最后更新时间：</span>
-          <span>{{ data.updated_time }}</span>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "BaseInfo",
-  props: {
-    data: {
-      type: Object,
-      default: () => null,
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.base-info {
-  padding: 24px;
-  background-color: #fff;
-  box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
-  border-radius: 6px;
-  margin-bottom: 16px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-
-  > .info-icon {
-    flex: 0 0 144px;
-    height: 144px;
-    background-color: #f5f6fa;
-    border-radius: 4px;
-    overflow: hidden;
-    margin-right: 24px;
-
-    > img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  > .info-detail {
-    flex: 1;
-    > h3 {
-      font-weight: bold;
-      font-size: 16px;
-      line-height: 32px;
-      color: #202531;
-      .openness {
-        margin-left: 10px;
-        display: inline-block;
-        border: 1px solid #9ad5c8;
-        background-color: #f1f9f7;
-        border-radius: 3px;
-        font-size: 12px;
-        line-height: 1;
-        padding: 3px 6px;
-        color: #429e8a;
-        font-weight: normal;
-      }
-    }
-
-    > p {
-      font-size: 14px;
-      line-height: 20px;
-      color: #202531;
-    }
-
-    > ul {
-      padding: 16px;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-      align-items: center;
-      background-color: #f5f6fa;
-      border-radius: 4px;
-      overflow: hidden;
-      margin-top: 16px;
-
-      > li {
-        width: 30%;
-        margin-right: 16px;
-
-        > .bg-icon {
-          margin-right: 8px;
-        }
-
-        > span {
-          font-size: 14px;
-          line-height: 34px;
-          color: #616f94;
-
-          > :nth-child(2) {
-            color: #202531;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
\ No newline at end of file

src/components/ability-detail/folder-info.vue

-<template>
-  <div class="folder-info">
-    <div class="left-part" :class="include_mock_service? '' : 'padding-reset'">
-      <bg-btns v-model="type" :options="types" v-if="!mockDetail && include_mock_service" />
-      <el-tree
-        :data="data"
-        node-key="code"
-        default-expand-all
-        @node-click="handleNodeClick"
-      >
-        <template #default="{ data }">
-          <div class="custom-tree-node" pointer-events="none">
-            <template v-if="data.node_type === 0">
-              <bg-icon
-                icon="#bg-ic-s-folder-opened"
-                v-if="fileOpenState[data.code] !== false"
-              />
-              <bg-icon icon="#bg-ic-s-folder" v-else />
-            </template>
-            <template v-else>
-              <el-tooltip
-                effect="dark"
-                :content="testStateTexts[data.test_state]"
-                placement="top"
-              >
-                <bg-icon
-                  v-if="data.service_type != 'cda56bb2-d00d-436d-9fc2-0508737fe503'"
-                  :class="`state-${data.test_state}`"
-                  :icon="testStateIcons[data.test_state]"
-                />
-              </el-tooltip>
-            </template>
-            <span :style="data.service_type != 'cda56bb2-d00d-436d-9fc2-0508737fe503' ? {} : { marginLeft: '20px' }">{{ data.node_name }}</span>
-          </div>
-        </template>
-      </el-tree>
-    </div>
-    <div class="right-part" v-if="nodeDetail">
-      <folder
-        class="folder-detail"
-        :data="nodeDetail"
-        :disabled="true"
-        v-if="nodeDetail.node_type == 0"
-        :showTip="false"
-      />
-      <file :data="nodeDetail" :disabled="true" :detailMock="type == 'configMock' && !mockDetail" v-else />
-    </div>
-  </div>
-</template>
-  
-<script>
-import { reactive, toRefs, watch, onBeforeMount } from "vue";
-import Folder from "@/page/main/ability-register/step2/folder.vue";
-import File from "@/page/main/ability-register/step2/file/index.vue";
-import axios from "@/request/http.js";
-
-export default {
-  name: "BaseInfo",
-  components: { Folder, File },
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    // 是否为mock服务详情
-    mockDetail: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props) {
-    const state = reactive({
-      type: "",
-      data: [],
-      types: [
-        {
-          name: "真实能力",
-          value: "",
-        },
-        {
-          name: "mock能力",
-          value: "configMock",
-        },
-      ],
-      fileOpenState: {},
-      nodeDetail: null,
-      testStateTexts: [
-        "未测试",
-        "测试成功",
-        "测试失败",
-        "其中有服务未测试",
-        "其中有服务测试未通过",
-      ],
-      testStateIcons: [
-        "#bg-ic-s-circle-warning",
-        "#bg-ic-s-circle-check",
-        "#bg-ic-s-circle-close",
-        "#bg-ic-s-circle-question",
-        "#bg-ic-s-circle-question",
-      ],
-      include_mock_service: false, // 真实能力中是否配置mock服务
-    });
-
-    const getTreeData = () => {
-      state.data = [];
-      state.nodeDetail = null;
-
-      axios
-        .get(`/apaas/service/v5/ability/info`, {
-          params: {
-            id: props.id,
-            queryType: props.mockDetail ? "" : state.type,
-          },
-        })
-        .then(({ data }) => {
-          if (data.code == 200) {
-            state.data = data.data.folder;
-            state.include_mock_service = data.data.ability_info.include_mock_service || false
-            console.log(state.include_mock_service)
-          }
-        });
-    };
-
-    const handleNodeClick = (data) => {
-      state.nodeDetail = null;
-
-      if (data.children) {
-        let flag = state.fileOpenState[data.code] !== false;
-
-        state.fileOpenState[data.code] = !flag;
-      }
-
-      if (data.node_type === 0) {
-        setTimeout(() => {
-          state.nodeDetail = { ...data, children: undefined };
-        }, 50);
-      } else {
-        axios
-          .get(`/apaas/service/v5/service/detail?treeCode=${data.code}`)
-          .then(({ data }) => {
-            if (data.code == 200) {
-              state.nodeDetail = data.data;
-            }
-          });
-      }
-    };
-
-    watch(
-      () => state.type,
-      () => {
-        getTreeData();
-      }
-    );
-
-    onBeforeMount(() => {
-      // 如果是mock能力详情，给type赋值后会触发watch然后去获取树形 所以不需要初始化时请求该接口
-      if (props.mockDetail) {
-        state.type = "configMock"
-      }else {
-        getTreeData();
-      }
-    });
-
-    return {
-      ...toRefs(state),
-      handleNodeClick,
-    };
-  },
-};
-</script>
-  
-<style lang="scss" scoped>
-.folder-info {
-  display: flex;
-  justify-content: flex-start;
-  align-items: stretch;
-  overflow: hidden;
-
-  > .left-part {
-    flex: 0 0 281px;
-    padding: 24px 0;
-    border-right: 1px solid #ebedf2;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-
-    > .bg-btns {
-      margin: 0 auto;
-    }
-
-    > .el-tree {
-      width: 100%;
-      margin-top: 16px;
-
-      :deep() {
-        .el-icon.el-tree-node__expand-icon {
-          display: none;
-        }
-      }
-    }
-  }
-  > .padding-reset {
-    padding: 8px 0 24px;
-  }
-
-  > .right-part {
-    // flex: 1 1 calc(100% - 281px);
-    flex: 1;
-    // padding: 16px;
-    box-sizing: border-box;
-
-    .folder-detail {
-      width: 100%;
-      margin: 0;
-      display: flex;
-
-      :deep() {
-        .left-span {
-          width: 80px;
-          padding-top: 68px !important;
-        }
-
-        .right-container {
-          padding: 12px 0;
-          // float: none;
-          // width: 100%;
-
-          // .tips {
-          //   display: none;
-          // }
-        }
-      }
-    }
-  }
-}
-
-.custom-tree-node {
-  padding: 0 16px;
-
-  > .bg-icon {
-    font-size: 12px;
-    margin-right: 8px;
-
-    &.state-0 {
-      color: #dd6955;
-    }
-
-    &.state-1 {
-      color: #48ad97;
-    }
-
-    &.state-2 {
-      color: #dd6955;
-    }
-
-    &.state-3 {
-      color: #dd6955;
-    }
-
-    &.state-4 {
-      color: #dd6955;
-    }
-  }
-}
-</style>
\ No newline at end of file

src/components/api-type/grpc.vue

-<!-- grpc -->
-<template>
-<!-- 去掉操作 -->
-  <div>
-    <div class="baseInfo_box">
-      <div class="baseInfo">
-        <bg-info :data="apiBaseInfo" />
-      </div>
-      <div class="apaas_button test_btn">
-        <el-button type="primary" @click="serviceTest">
-          <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
-          服务测试
-        </el-button>
-      </div>
-    </div>
-    <div class="req_box">
-      <p class="input-title">
-        <span class="before_title"></span>
-          接口文档介绍
-        <span class="after_icon" @click="res_body_open=!res_body_open">
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="res_body_open"></bg-icon>
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
-        </span>
-      </p>
-      <div v-if="res_body_open">
-        <div v-html="detail_data.doc_desc" class="doc_desc"></div>
-      </div>
-    </div>
-
-    <!-- 测试结果弹窗 -->
-    <el-dialog
-      class="dialog_box result_box"
-      title="提示"
-      v-model="showDialog"
-      width="400px"
-      :before-close="
-        () => {
-          dialogClose()
-        }"
-    >
-      <div class="dialog_info">
-        <bg-icon v-if="dialogInfo.state" style="font-size: 26px; color: #429e8a; margin-right: 10px" icon="#bg-ic-circle-check"></bg-icon>
-        <bg-icon v-else style="font-size: 26px; color: #d75138; margin-right: 10px" icon="#bg-ic-circle-close"></bg-icon>
-        <span>{{dialogInfo.msg}}</span>
-      </div>
-      <template v-slot:footer>
-        <div class="apaas_button">
-          <el-button @click="dialogClose">取 消</el-button>
-          <el-button type="primary" @click="dialogClose">确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance  } from 'vue'
-import { useRouter,useRoute } from 'vue-router'
-import { ElMessage } from 'element-plus'
-const { proxy } = getCurrentInstance()
-const { $axios,$message } = proxy
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null
-  }
-})
-const emit = defineEmits(["dialogClose"])
-const router = useRouter()
-const route = useRoute()
-const state = reactive({data1:1})
-const {data1} = toRefs(state)
-const detailData = reactive({
-  apiBaseInfo: [
-    {
-      name: "能力名称",
-      value: "",
-      nameWidth: 112
-    },
-    {
-      name: "调用地址",
-      value: "",
-      nameWidth: 112
-    },
-    {
-      name: "是否TLS协议",
-      value: "",
-      full: true,
-      nameWidth: 112
-    },
-  ], // 基本信息
-  detail_data: {},
-  res_body_open: true,
-  showDialog: false,
-  dialogInfo: {
-    msg: "该服务地址正常",
-    state: true
-  },
-})
-const detail = props.data
-detailData.detail_data = props.data
-if (detail) {
-  detailData.apiBaseInfo[0].value = detail.service_name
-  detailData.apiBaseInfo[1].value = detail.req_url
-  detailData.apiBaseInfo[2].value = ['否','是'][detail.tls_protocol]
-}
-const serviceTest = () => {
-  let params = {
-    interface_type: 2,
-    url: detail.req_url,
-    id: detail.id.toString()
-  }
-  $axios
-    .post(`/apaas/service/v5/service/test`,params)
-    .then((res) => {
-      if (res.data.code !== 200) {
-        $message.error(res.data.data)
-      } else {
-        detailData.showDialog = true
-        if (res.data.data.response_code == 200) { 
-          detailData.dialogInfo = {
-            msg: "该服务地址正常",
-            state: true
-          }
-        }else {
-          detailData.dialogInfo = {
-            msg: "该服务地址异常",
-            state: false
-          }
-        }
-      }
-    })
-}
-const dialogClose = () => {
-  detailData.showDialog = false
-  emit("refresh",detail.ability_tree_code)
-}
-const {
-  apiBaseInfo,
-  detail_data,
-  res_body_open,
-  showDialog,
-  dialogInfo,
-} = toRefs(detailData)
-</script>
-
-<style lang="scss" scoped>
-.baseInfo_box {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  .baseInfo {
-    width: 872px;
-  }
-}
-.req_box {
-  width: 872px;
-  margin-top: 30px;
-  .input-title {
-    font-size: 16px;
-    color: #202531;
-    margin-top: 9px;
-    margin-bottom: 15px;
-    font-weight: 700;
-    line-height: 1;
-    .before_title {
-      display: inline-block;
-      width: 4px;
-      height: 14px;
-      background-color: #2b4695;
-      margin-right: 8px;
-      border-radius: 2px;
-    }
-    .after_icon {
-      float: right;
-      cursor: pointer;
-    }
-  }
-  .doc_desc {
-    width: 100%;
-    height: 406px;
-    padding: 16px 24px;
-    background-color: #fafafa;
-    border-radius: 4px;
-    color: #202531;
-    font-size: 14px;
-  }
-}
-.dialog_info {
-  padding: 27px 0 11px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
\ No newline at end of file

src/components/api-type/mobile-sdk.vue

-<!-- mobileSDK -->
-<template>
-  <div>
-    <div class="baseInfo_box">
-      <div class="baseInfo">
-        <bg-info :data="apiBaseInfo" />
-      </div>
-    </div>
-    <div class="req_box">
-      <p class="input-title">
-        <span class="before_title"></span>
-          接口文档介绍
-        <span class="after_icon" @click="res_body_open=!res_body_open">
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="res_body_open"></bg-icon>
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
-        </span>
-      </p>
-      <div v-if="res_body_open">
-        <div v-html="detail_data.doc_desc" class="doc_desc"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance  } from 'vue'
-import { useRouter,useRoute } from 'vue-router'
-import { ElMessage } from 'element-plus'
-const { proxy } = getCurrentInstance()
-const { $axios,$message } = proxy
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null
-  }
-})
-const router = useRouter()
-const route = useRoute()
-const detailData = reactive({
-  apiBaseInfo: [
-    {
-      name: "能力名称",
-      value: "",
-      full: true,
-      nameWidth: 104
-    },
-    {
-      name: "支持类型",
-      value: "",
-      nameWidth: 104,
-    },
-    {
-      name: "支持系统",
-      value: "",
-      nameWidth: 104,
-    },
-    {
-      name: "SDK包",
-      value: "",
-      nameWidth: 104,
-      download: true,
-      url: ""
-    },
-    {
-      name: "SDK版本号",
-      value: "",
-      nameWidth: 104,
-    },
-    {
-      name: "承诺书",
-      value: "",
-      full: true,
-      nameWidth: 104,
-      download: true,
-      url: ""
-    },
-
-  ], // 基本信息
-  detail_data: {},
-  res_body_open: true,
-})
-const detail = props.data
-detailData.detail_data = props.data
-if (detail) {
-  let sdkFile = detail.msdk_file ? JSON.parse(detail.msdk_file) : []
-  let commitment = detail.commitment ? JSON.parse(detail.commitment) : []
-  detailData.apiBaseInfo[0].value = detail.service_name
-  detailData.apiBaseInfo[1].value = ['','Android','IOS','其它'][detail.msdk_type]
-  detailData.apiBaseInfo[2].value = detail.msdk_system
-  detailData.apiBaseInfo[3].value = sdkFile[0].name
-  detailData.apiBaseInfo[3].url = sdkFile[0].url
-  detailData.apiBaseInfo[4].value = detail.sdk_version
-  detailData.apiBaseInfo[5].value = commitment[0].name
-  detailData.apiBaseInfo[5].url = commitment[0].url
-}
-const {
-  apiBaseInfo,
-  detail_data,
-  res_body_open,
-} = toRefs(detailData)
-</script>
-
-<style lang="scss" scoped>
-.baseInfo_box {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  .baseInfo {
-    width: 872px;
-  }
-}
-.req_box {
-  width: 872px;
-  margin-top: 30px;
-  .input-title {
-    font-size: 16px;
-    color: #202531;
-    margin-top: 9px;
-    margin-bottom: 15px;
-    font-weight: 700;
-    line-height: 1;
-    .before_title {
-      display: inline-block;
-      width: 4px;
-      height: 14px;
-      background-color: #2b4695;
-      margin-right: 8px;
-      border-radius: 2px;
-    }
-    .after_icon {
-      float: right;
-      cursor: pointer;
-    }
-  }
-  .doc_desc {
-    width: 100%;
-    height: 406px;
-    padding: 16px 24px;
-    background-color: #fafafa;
-    border-radius: 4px;
-    color: #202531;
-    font-size: 14px;
-  }
-}
-.dialog_info {
-  padding: 27px 0 17px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
\ No newline at end of file

src/components/api-type/mq.vue

-<!-- MQ -->
-<template>
-  <div>
-    <div class="baseInfo_box">
-      <div class="baseInfo">
-        <bg-info :data="apiBaseInfo" />
-      </div>
-      <div class="apaas_button test_btn">
-        <el-button type="primary" @click="serviceTest">
-          <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
-          服务测试
-        </el-button>
-      </div>
-    </div>
-    <div class="req_box">
-      <p class="input-title">
-        <span class="before_title"></span>
-          Topic
-        <span class="after_icon" @click="topic_open=!topic_open">
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="topic_open"></bg-icon>
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
-        </span>
-      </p>
-      <div v-if="topic_open">
-        <div class="topic_box" v-if="topicInfo && topicInfo.length > 0">
-          <div class="left">
-            <div class="items">
-              <div 
-                v-for="(item,idx) in topicInfo" 
-                :key="idx" 
-                class="topic_item" 
-                :class="currentTopic.id == item.id ? 'current' : ''"
-                @click="changeCurrentTopic(item)"  
-              >
-                <el-tooltip
-                  effect="dark"
-                  :content="iconTipInfo[item.test_state]"
-                  placement="top"
-                >
-                  <bg-icon
-                    class="tree-icon"
-                    :class="classArr[item.test_state]"
-                    :icon="iconArr[item.test_state]"
-                  ></bg-icon>
-                </el-tooltip>
-                {{item.name}}
-              </div>
-            </div>
-          </div>
-          <div class="right">
-            {{currentTopic.desc}}
-          </div>
-        </div>
-        <div class="no_data" v-else>
-          <img src="../../assets/imgs/img-no-data.png" alt="">
-          <div class="text">无参数</div>
-        </div>
-      </div>
-      <p class="input-title mt">
-        <span class="before_title"></span>
-          接口文档介绍
-        <span class="after_icon" @click="res_body_open=!res_body_open">
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="res_body_open"></bg-icon>
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
-        </span>
-      </p>
-      <div v-if="res_body_open">
-        <div v-html="detail_data.doc_desc" class="doc_desc"></div>
-      </div>
-    </div>
-
-    <!-- 测试结果弹窗 -->
-    <el-dialog
-      class="dialog_box result_box"
-      title="提示"
-      v-model="showDialog"
-      width="400px"
-      :before-close="
-        () => {
-          dialogClose()
-        }
-      "
-    >
-      <div class="dialog_info">
-        <bg-icon v-if="dialogInfo.state" style="font-size: 26px; color: #429e8a; margin-right: 10px" icon="#bg-ic-circle-check"></bg-icon>
-        <bg-icon v-else style="font-size: 26px; color: #d75138; margin-right: 10px" icon="#bg-ic-circle-close"></bg-icon>
-        <span>{{dialogInfo.msg}}</span>
-      </div>
-      <template v-slot:footer>
-        <div class="apaas_button">
-          <el-button @click="dialogClose">取 消</el-button>
-          <el-button type="primary" @click="dialogClose">确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance  } from 'vue'
-import { useRouter,useRoute } from 'vue-router'
-import { ElMessage } from 'element-plus'
-const { proxy } = getCurrentInstance()
-const { $axios,$message } = proxy
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null
-  }
-})
-const emit = defineEmits(["dialogClose"])
-const router = useRouter()
-const route = useRoute()
-const detailData = reactive({
-  apiBaseInfo: [
-    {
-      name: "能力名称",
-      value: "",
-      nameWidth: 104
-    },
-    {
-      name: "调用地址",
-      value: "",
-      nameWidth: 104
-    },
-    {
-      name: "平台协议",
-      value: "",
-      nameWidth: 104
-    },
-    {
-      name: "平台版本号",
-      value: "",
-      nameWidth: 104,
-    },
-    {
-      name: "用户名",
-      value: "",
-      nameWidth: 104
-    },
-    {
-      name: "密码",
-      value: "",
-      nameWidth: 104,
-      password: true,
-      realValue: "",
-    },
-  ], // 基本信息
-  topicInfo: [],
-  detail_data: {},
-  res_body_open: true,
-  showDialog: false,
-  dialogInfo: {
-    msg: "该服务地址正常",
-    state: true
-  },
-  topic_open: true,
-  currentTopic: {},
-  classArr: [
-    "question",
-    "success",
-    "close",
-  ],
-  iconArr: [
-    "#bg-ic-s-circle-question",
-    "#bg-ic-s-circle-check",
-    "#bg-ic-s-circle-close"
-  ],
-  iconTipInfo: [
-    "该主题还未进行测试",
-    "该主题测试通过",
-    "该主题测试不通过"
-  ],
-})
-const detail = props.data
-detailData.detail_data = props.data
-if (detail) {
-  detailData.apiBaseInfo[0].value = detail.service_name
-  detailData.apiBaseInfo[1].value = detail.req_url
-  detailData.apiBaseInfo[2].value = ["","kafka","rocketMQ","rabbitMQ"][detail.mq_protocol]
-  detailData.apiBaseInfo[3].value = detail.mq_version
-  detailData.apiBaseInfo[4].value = detail.mq_user_name
-  detailData.apiBaseInfo[5].value = "***************"
-  detailData.apiBaseInfo[5].realValue = detail.mq_password
-  detailData.topicInfo = detail.mq_topic || []
-  detailData.currentTopic = detailData.topicInfo[0] || {}
-}
-const changeCurrentTopic = (item) => {
-  detailData.currentTopic = item
-}
-const serviceTest = () => {
-  let params = {
-    interface_type: 4,
-    url: detail.req_url,
-    mq_protocol: detail.mq_protocol,
-    mq_exchange: detailData.currentTopic.name,
-    mq_password: detail.mq_password,
-    mq_user: detail.mq_user,
-    mq_id: detailData.currentTopic.id,
-    id: detail.id.toString()
-  }
-  $axios
-    .post(`/apaas/service/v5/service/test`,params)
-    .then((res) => {
-      if (res.data.code !== 200) {
-        $message.error(res.data.data)
-      } else {
-        detailData.showDialog = true
-        if (res.data.data.response_code == 200) { 
-          detailData.dialogInfo = {
-            msg: "该服务地址正常",
-            state: true
-          }
-        }else {
-          detailData.dialogInfo = {
-            msg: "该服务地址异常",
-            state: false
-          }
-        }
-      }
-    })
-}
-const dialogClose = () => {
-  detailData.showDialog = false
-  emit("refresh",detail.ability_tree_code)
-}
-const {
-  apiBaseInfo,
-  detail_data,
-  res_body_open,
-  showDialog,
-  dialogInfo,
-  topicInfo,
-  topic_open,
-  currentTopic,
-  classArr,
-  iconArr,
-  iconTipInfo,
-} = toRefs(detailData)
-</script>
-
-<style lang="scss" scoped>
-.baseInfo_box {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  .baseInfo {
-    width: 872px;
-  }
-}
-.req_box {
-  width: 872px;
-  margin-top: 30px;
-  .input-title {
-    font-size: 16px;
-    color: #202531;
-    margin-top: 9px;
-    margin-bottom: 15px;
-    font-weight: 700;
-    line-height: 1;
-    .before_title {
-      display: inline-block;
-      width: 4px;
-      height: 14px;
-      background-color: #2b4695;
-      margin-right: 8px;
-      border-radius: 2px;
-    }
-    .after_icon {
-      float: right;
-      cursor: pointer;
-    }
-  }
-  .mt {
-    margin-top: 24px;
-  }
-  .no_data {
-    text-align: center;
-    .text {
-      font-size: 16px;
-      color: #616f94;
-      line-height: 1;
-    }
-  }
-  .doc_desc {
-    width: 100%;
-    height: 406px;
-    padding: 16px 24px;
-    background-color: #fafafa;
-    border-radius: 4px;
-    color: #202531;
-    font-size: 14px;
-  }
-  .topic_box {
-    display: flex;
-    .left {
-      width: 200px;
-      margin-right: 16px;
-      font-size: 14px;
-      color: #202531;
-      .items {
-        border: 1px solid #dadee7;
-        padding: 4px 0;
-        .topic_item {
-          height: 34px;
-          line-height: 34px;
-          padding: 0 8px;
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          .tree-icon {
-            font-size: 12px;
-            color: #909bb6;
-            margin-right: 6px;
-          }
-          .success {
-            color: #48ad97;
-          }
-          .close {
-            color: #dd6955;
-          }
-        }
-        .current {
-          background-color: #eff2fa;
-          color: #3759be;
-        }
-      }
-    } 
-    .right {
-      flex: 1;
-      height: 332px;
-      background-color: #fafafa;
-      border-radius: 4px;
-      padding: 15px 24px;
-    }
-  }
-}
-.dialog_info {
-  padding: 27px 0 11px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
\ No newline at end of file

src/components/api-type/rest.vue

-<template>
-<!-- 去掉操作 -->
-  <div>
-    <div class="baseInfo_box">
-      <div class="baseInfo">
-        <bg-info :data="apiBaseInfo" />
-      </div>
-      <div class="apaas_button test_btn">
-        <el-button type="primary" @click="serviceTest">
-          <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
-          服务测试
-        </el-button>
-      </div>
-    </div>
-    <div class="req_box">
-      <el-tabs v-model="activeName">
-        <el-tab-pane label="URL参数" name="first">
-          <p class="input-title">
-            <span class="before_title"></span>
-            参数查询
-            <span class="after_icon" @click="cs_open=!cs_open">
-              <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="cs_open"></bg-icon>
-              <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
-            </span>
-          </p>
-          <div v-if="cs_open">
-            <bg-table-pro
-              class="input_table"
-              :headers="headers"
-              :data="norData"
-              ref="cs-table"
-              :border="true"
-              :stripe="false"
-              v-if="norData && norData.length > 0"
-            >
-              <template v-slot:value="{ row }">
-                <el-input
-                  v-model="row.value"
-                />
-              </template>
-            </bg-table-pro>
-            <div class="no_data" v-else>
-              <img src="../../assets/imgs/img-no-data.png" alt="">
-              <div class="text">无参数</div>
-            </div>
-          </div>
-          <p class="input-title mt">
-            <span class="before_title"></span>
-            动态参数
-           <span class="after_icon" @click="dt_open=!dt_open">
-              <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="dt_open"></bg-icon>
-              <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
-           </span>
-          </p>
-          <div v-if="dt_open">
-            <bg-table-pro
-              class="input_table"
-              :headers="headers"
-              :data="actData"
-              ref="dt-table"
-              :border="true"
-              :stripe="false"
-              v-if="actData && actData.length > 0"
-            >
-              <template v-slot:value="{ row }">
-                <el-input
-                  v-model="row.value"
-                />
-              </template>
-            </bg-table-pro>
-            <div class="no_data" v-else>
-              <img src="../../assets/imgs/img-no-data.png" alt="">
-              <div class="text">无参数</div>
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="Header" name="second">
-          <p class="input-title">
-            <span class="before_title"></span>
-              Header
-            <span class="after_icon" @click="header_open=!header_open">
-              <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="header_open"></bg-icon>
-              <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
-            </span>
-          </p>
-          <div v-if="header_open">
-            <bg-table-pro
-              :headers="headers"
-              :data="headerData"
-              ref="header-table"
-              :border="true"
-              :stripe="false"
-              v-if="headerData && headerData.length > 0"
-            >
-              <template v-slot:value="{ row }">
-                <el-input
-                  v-model="row.value"
-                />
-              </template>
-            </bg-table-pro>
-            <div class="no_data" v-else>
-              <img src="../../assets/imgs/img-no-data.png" alt="">
-              <div class="text">无参数</div>
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="body" name="third">
-          <p class="input-title">
-            <span class="before_title"></span>
-              Body
-            <span class="after_icon" @click="body_open=!body_open">
-              <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="body_open"></bg-icon>
-              <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
-            </span>
-          </p>
-          <div v-if="body_open">
-            <!-- raw -->
-            <div v-if="bodyData && bodyData.show_type === 0 && bodyData.data && bodyData.data.length > 0" class="body_code" :style="{'height':bodyData.data_type === 1 || bodyData.data_type === 2 ? '406px' : '240px'}">
-              <!-- json或xml展示代码块 -->
-              <bg-code-editor
-                class="bg-ace-editor"
-                v-model="bodyData.data"
-                v-if="bodyData.data_type === 1 || bodyData.data_type === 2"
-              ></bg-code-editor>
-              <!-- text或html或JavaScript展示多行文本框 -->
-              <el-input
-                v-model="bodyData.data"
-                :rows="10"
-                type="textarea"
-                v-else
-              />
-            </div>
-            <!-- formdata和x-www-form-urlencoded 表格 -->
-            <bg-table-pro
-              :headers="headers"
-              :data="bodyData.data"
-              ref="body-table"
-              :border="true"
-              :stripe="false"
-              v-else-if="bodyData && (bodyData.show_type === 1 || bodyData.show_type === 2) && bodyData.data && bodyData.data.length > 0"
-            >
-              <template v-slot:value="{ row }">
-                <el-input
-                  v-model="row.value"
-                />
-              </template>
-            </bg-table-pro>
-            <div class="no_data" v-else>
-              <img src="../../assets/imgs/img-no-data.png" alt="">
-              <div class="text">无参数</div>
-            </div>
-          </div>
-
-        </el-tab-pane>
-        <el-tab-pane label="授权" name="fourth">
-          <folder :data="detail_data" useType="service" :disabled="true"></folder>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-    <div class="req_box res_box" v-if="test_state">
-      <el-tabs v-model="activeName1">
-        <el-tab-pane label="body" name="first">
-          <div class="body_code">
-            <bg-code-editor
-              class="bg-ace-editor bg-ace-editor-disabled"
-              v-model="backJSONdata"
-              disabled
-            ></bg-code-editor>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-
-  </div>
-</template>
-
-<script setup>
-import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance  } from 'vue'
-import { useRouter,useRoute } from 'vue-router'
-import folder from "@/page/main/ability-register/step2/folder.vue"
-const { proxy } = getCurrentInstance()
-const { $axios,$message } = proxy
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null
-  }
-})
-const emit = defineEmits(["serviceTest"])
-const router = useRouter()
-const route = useRoute()
-const detailData = reactive({
-  cs_open: true,
-  dt_open: true,
-  header_open: true,
-  body_open: true,
-  res_body_open: true,
-  activeName: "first",
-  apiBaseInfo: [
-    {
-      name: "接口名称",
-      value: "",
-      nameWidth: 104
-    },
-    {
-      name: "调用地址",
-      value: "",
-      nameWidth: 104
-    },
-    {
-      name: "请求方式",
-      value: "",
-      nameWidth: 104
-    },
-    {
-      name: "返回格式",
-      value: "",
-      nameWidth: 104
-    },
-  ], // 基本信息
-  headers: [
-    {
-      label: "键",
-      prop: "name",
-    },
-    {
-      label: "值",
-      prop: "value",
-    },
-    {
-      label: "描述",
-      prop: "desc",
-    },
-  ], // 表头
-  rawHeaders: [
-    {
-      label: "参数名称",
-      prop: "paramName",
-    },
-    {
-      label: "参数类型",
-      prop: "paramType",
-    },
-    {
-      label: "示例",
-      prop: "paramValue",
-    },
-    {
-      label: "说明",
-      prop: "desc",
-    },
-  ],
-  bodyData: {
-    show_type: "",
-    data_type: "",
-    data: []
-  },
-  norData: [],
-  actData: [],
-  headerData: [],
-  backJSONdata: "hahahaah",
-  treeProps: { hasChildren: 'hasChildren', children: 'children' },
-  rowKey: "id",
-  detail_data: {},
-  test_state: false,
-  activeName1: "first"
-})
-const detail = props.data
-detailData.detail_data = props.data
-let serviceInfo = detail.service_info
-//json对象转xml字符串
-var json2xml=(o, tab)=> {
-  var toXml = function(v, name, ind) {
-    var xml = "";
-    if (v instanceof Array) {
-      for (var i=0, n=v.length; i<n; i++)
-        xml += ind + toXml(v[i], name, ind+"\t") + "\n";
-    }
-    else if (typeof(v) == "object") {
-      var hasChild = false;
-      xml += ind + "<" + name;
-      for (var m in v) {
-        if (m.charAt(0) == "@")
-          xml += " " + m.substr(1) + "=\"" + v[m].toString() + "\"";
-        else
-          hasChild = true;
-      }
-      xml += hasChild ? ">" : "/>";
-      if (hasChild) {
-        for (var m in v) {
-          if (m == "#text")
-            xml += v[m];
-          else if (m == "#cdata")
-            xml += "<![CDATA[" + v[m] + "]]>";
-          else if (m.charAt(0) != "@")
-            xml += toXml(v[m], m, ind+"\t");
-        }
-        xml += (xml.charAt(xml.length-1)=="\n"?ind:"") + "</" + name + ">";
-      }
-    }
-    else {
-      xml += ind + "<" + name + ">" + v.toString() +  "</" + name + ">";
-    }
-    return xml;
-  }, xml="";
-   for (var m in o)
-    xml += toXml(o[m], m, "");
-   return tab ? xml.replace(/\t/g, tab) : xml.replace(/\t|\n/g, "");
-}
-if (detail) {
-  detailData.apiBaseInfo[0].value = detail.service_name
-  detailData.apiBaseInfo[1].value = detail.req_url
-  detailData.apiBaseInfo[2].value = ['','GET','POST','PUT','DELETE'][detail.req_type]
-  detailData.apiBaseInfo[3].value = ['','JSON','XML','Text','HTML','图片','文件','自动'][detail.res_fields.res_type]
-  detailData.norData = detail.req_query.query_data || []
-  detailData.actData = detail.req_query.param_data || []
-  detailData.headerData = detail.req_headers
-  detailData.bodyData = detail.req_body 
-  let tableRows = detailData.bodyData && detailData.bodyData.data ? detailData.bodyData.data : []
-  let tableStr = JSON.stringify(tableRows)
-  if (detailData.bodyData && detailData.bodyData.show_type == 0 && detailData.bodyData.data_type == 1) {
-    detailData.bodyData.data = tableStr
-  }else if (detailData.bodyData && detailData.bodyData.show_type == 0 && detailData.bodyData.data_type == 2) {
-    detailData.bodyData.data = json2xml(JSON.parse(tableStr))
-  }
-}
-const serviceTest = () => {
-  let header = null
-  if (detail.headers && detail.headers.length > 0) {
-    detail.req_headers.forEach((e,i) => {
-      header[e.name] = [e.value]
-    })
-  }
-  let body = ""
-  if (detailData.bodyData.show_type == 0 && detailData.bodyData.data_type == 1 || detailData.bodyData.show_type == 1 || detailData.bodyData.show_type == 2) {
-    body = detailData.bodyData.data && detailData.bodyData.data.length > 0 ? JSON.stringify(detailData.bodyData.data) : ""
-  }else {
-    body = detailData.bodyData.data && detailData.bodyData.data.length > 0? detailData.bodyData.data : ""
-  }
-  let show_type = detailData.bodyData.show_type
-  let data_type = detailData.bodyData.data_type
-  let content_type = ""
-  if (show_type == 0) {
-    switch (data_type) {
-      case 1:
-        content_type = "application/json";
-        break;
-      case 2: 
-        content_type = "application/xml";
-        break;
-      case 3: 
-        content_type = "application/javascript";
-        break;
-      case 4: 
-        content_type = "text/plain";
-        break;
-      case 5: 
-        content_type = "text/html";
-        break;
-    }
-  }
-  let authData = {
-    req_auth_method: null,
-    req_auth_token: "",
-    req_auth_token_name: "",
-  }
-  let code = detail.ability_tree_code
-  if (detail.req_auth_method != 0) {
-    authData.req_auth_method = detail.req_auth_method
-    authData.req_auth_token= detail.req_auth_token
-    authData.req_auth_token_name= detail.req_auth_key
-  }else {
-    for (let index = 0; index > -1; index++) {
-      if(serviceInfo[code].req_auth_method==0){
-        code = serviceInfo[code].p_code
-      }else{
-        authData.req_auth_method = serviceInfo[code].req_auth_method
-        authData.req_auth_token= serviceInfo[code].req_auth_token
-        authData.req_auth_token_name= serviceInfo[code].req_auth_key
-        break
-      }
-    }
-  }
-  let params = {
-    interface_type: 1,
-    method: detail.req_type,
-    url: detail.req_url,
-    req_auth_method: authData.req_auth_method,
-    req_auth_token: authData.req_auth_token,
-    req_auth_token_name: authData.req_auth_token_name,
-    headers: header,
-    body: body,
-    content_type: content_type,
-    id: detail.id.toString(),
-    params: {
-      query_data: detailData.norData,
-      param_data: detailData.actData,
-    }
-  }
-  $axios
-    .post(`/apaas/service/v5/service/test`,params)
-    .then((res) => {
-      if (res.data.code !== 200) {
-        $message.error(res.data.data)
-      } else {
-        detailData.test_state = true
-        detailData.backJSONdata = res.data.data.response_str
-        emit("refresh",detail.ability_tree_code)
-      }
-    })
-}
-const {
-  cs_open,
-  dt_open,
-  header_open,
-  body_open,
-  res_body_open,
-  headers,
-  apiBaseInfo,
-  activeName,
-  activeName1,
-  norData,
-  actData,
-  headerData,
-  JSONdata,
-  XMLdata,
-  JSdata,
-  Textdata,
-  HTMLdata,
-  backJSONdata,
-  rawHeaders,
-  bodyData,
-  treeProps,
-  rowKey,
-  detail_data,
-  test_state,
-} = toRefs(detailData)
-</script>
-
-<style lang="scss" scoped>
-.baseInfo_box {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  .baseInfo {
-    width: 872px;
-  }
-}
-.req_box {
-  width: 872px;
-  margin-top: 30px;
-  .input-title {
-    font-size: 16px;
-    color: #202531;
-    margin-top: 9px;
-    margin-bottom: 15px;
-    font-weight: 700;
-    line-height: 1;
-    .before_title {
-      display: inline-block;
-      width: 4px;
-      height: 14px;
-      background-color: #2b4695;
-      margin-right: 8px;
-      border-radius: 2px;
-    }
-    .after_icon {
-      float: right;
-      cursor: pointer;
-    }
-  }
-  .mt {
-    margin-top: 24px;
-  }
-  .input_table {
-    :deep().el-table__cell {
-      padding: 14px 0!important;
-      .el-input__inner {
-        height: 33px;
-      }
-    }
-  }
-  .text_box {
-    padding: 16px 24px;
-    background-color: #fafafa;
-    border-radius: 4px;
-    height: 406px;
-  }
-  .body_code {
-    width: 100%;
-    height: 406px;
-    .bg-ace-editor {
-      background-color: #1a1a1a;
-    }
-    .bg-ace-editor-disabled {
-      background-color: #fff;
-      :deep().ace_marker-layer .ace_active-line {
-        background-color: #fff;
-      }
-    }
-  }
-  .no_data {
-    text-align: center;
-    .text {
-      font-size: 16px;
-      color: #616f94;
-      line-height: 1;
-    }
-  }
-  .folder-container {
-    width: 100%;
-    margin-left: 0;
-    margin-top: 9px;
-    :deep().left-span {
-      padding: 0;
-    }
-    :deep().right-container {
-      width: calc(100% - 100px);
-    }
-  }
-}
-</style>
-<style scoped>
-
-</style>

src/components/api-type/socket.vue

-<!-- socket -->
-<template>
-  <div>
-    <div class="baseInfo_box">
-      <div class="baseInfo">
-        <bg-info :data="apiBaseInfo" />
-      </div>
-      <div class="apaas_button test_btn">
-        <el-button type="primary" @click="serviceTest">
-          <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
-          服务测试
-        </el-button>
-      </div>
-    </div>
-    <div class="req_box">
-      <p class="input-title">
-        <span class="before_title"></span>
-          接口文档介绍
-        <span class="after_icon" @click="res_body_open=!res_body_open">
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="res_body_open"></bg-icon>
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
-        </span>
-      </p>
-      <div v-if="res_body_open">
-        <div v-html="detail_data.doc_desc" class="doc_desc"></div>
-      </div>
-    </div>
-
-    <!-- 测试结果弹窗 -->
-    <el-dialog
-      class="dialog_box result_box"
-      title="提示"
-      v-model="showDialog"
-      width="400px"
-      :before-close="
-        () => {
-          dialogClose()
-        }"
-    >
-      <div class="dialog_info">
-        <bg-icon v-if="dialogInfo.state" style="font-size: 26px; color: #429e8a; margin-right: 10px" icon="#bg-ic-circle-check"></bg-icon>
-        <bg-icon v-else style="font-size: 26px; color: #d75138; margin-right: 10px" icon="#bg-ic-circle-close"></bg-icon>
-        <span>{{dialogInfo.msg}}</span>
-      </div>
-      <template v-slot:footer>
-        <div class="apaas_button">
-          <el-button @click="dialogClose">取 消</el-button>
-          <el-button type="primary" @click="dialogClose">确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance  } from 'vue'
-import { useRouter,useRoute } from 'vue-router'
-import { ElMessage } from 'element-plus'
-const { proxy } = getCurrentInstance()
-const { $axios,$message } = proxy
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null
-  }
-})
-const emit = defineEmits(["dialogClose"])
-const router = useRouter()
-const route = useRoute()
-const state = reactive({data1:1})
-const {data1} = toRefs(state)
-const detailData = reactive({
-  apiBaseInfo: [
-    {
-      name: "能力名称",
-      value: "",
-      nameWidth: 104
-    },
-    {
-      name: "调用地址",
-      value: "",
-      nameWidth: 104
-    },
-  ], // 基本信息
-  detail_data: {},
-  res_body_open: true,
-  showDialog: false,
-  dialogInfo: {
-    msg: "该服务地址正常",
-    state: true
-  },
-})
-const detail = props.data
-detailData.detail_data = props.data
-if (detail) {
-  detailData.apiBaseInfo[0].value = detail.service_name
-  detailData.apiBaseInfo[1].value = detail.req_url
-}
-const serviceTest = () => {
-  let params = {
-    interface_type: 2,
-    url: detail.req_url,
-    id: detail.id.toString()
-  }
-  $axios
-    .post(`/apaas/service/v5/service/test`,params)
-    .then((res) => {
-      if (res.data.code !== 200) {
-        $message.error(res.data.data)
-      } else {
-        detailData.showDialog = true
-        if (res.data.data.response_code == 200) { 
-          detailData.dialogInfo = {
-            msg: "该服务地址正常",
-            state: true
-          }
-        }else {
-          detailData.dialogInfo = {
-            msg: "该服务地址异常",
-            state: false
-          }
-        }
-      }
-    })
-}
-const dialogClose = () => {
-  detailData.showDialog = false
-  emit("refresh",detail.ability_tree_code)
-}
-const {
-  apiBaseInfo,
-  detail_data,
-  res_body_open,
-  showDialog,
-  dialogInfo,
-} = toRefs(detailData)
-</script>
-
-<style lang="scss" scoped>
-.baseInfo_box {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  .baseInfo {
-    width: 872px;
-  }
-}
-.req_box {
-  width: 872px;
-  margin-top: 30px;
-  .input-title {
-    font-size: 16px;
-    color: #202531;
-    margin-top: 9px;
-    margin-bottom: 15px;
-    font-weight: 700;
-    line-height: 1;
-    .before_title {
-      display: inline-block;
-      width: 4px;
-      height: 14px;
-      background-color: #2b4695;
-      margin-right: 8px;
-      border-radius: 2px;
-    }
-    .after_icon {
-      float: right;
-      cursor: pointer;
-    }
-  }
-  .doc_desc {
-    width: 100%;
-    height: 406px;
-    padding: 16px 24px;
-    background-color: #fafafa;
-    border-radius: 4px;
-    color: #202531;
-    font-size: 14px;
-  }
-}
-.dialog_info {
-  padding: 27px 0 11px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
\ No newline at end of file

src/components/api-type/ui.vue

-<!-- MQ -->
-<template>
-  <div>
-    <div class="baseInfo_box">
-      <div class="baseInfo">
-        <bg-info :data="apiBaseInfo" />
-      </div>
-      <div class="apaas_button test_btn">
-        <el-button type="primary" class="refresh_btn" @click="refresh" v-if="showRefreshBtn">
-          <bg-icon style="font-size: 10px; color: #fff; margin-right: 10px" icon="#bg-ic-refresh"></bg-icon>
-          刷新
-        </el-button>
-        <el-button type="primary" @click="serviceTest">
-          <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
-          服务测试
-        </el-button>
-      </div>
-    </div>
-    <div class="req_box">
-      <p class="input-title">
-        <span class="before_title"></span>
-          主题
-        <span class="after_icon" @click="topic_open=!topic_open">
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="topic_open"></bg-icon>
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
-        </span>
-      </p>
-      <div v-if="topic_open">
-        <div class="topic_box" v-if="uiInfo && uiInfo.length > 0">
-          <div class="left">
-            <div class="items">
-              <div 
-                v-for="(item,idx) in uiInfo" 
-                :key="idx" 
-                class="topic_item" 
-                :class="currentUi.id == item.id ? 'current' : ''"
-                @click="changeCurrentTopic(item)"  
-              >
-                <el-tooltip
-                  effect="dark"
-                  :content="iconTipInfo[item.test_state]"
-                  placement="top"
-                >
-                  <bg-icon
-                    class="tree-icon"
-                    :class="classArr[item.test_state]"
-                    :icon="iconArr[item.test_state]"
-                  ></bg-icon>
-                </el-tooltip>
-                {{item.theme}}
-              </div>
-            </div>
-          </div>
-          <div class="right">
-            <img :src="currentUi.image[0].url" alt="">
-          </div>
-        </div>
-        <div class="no_data" v-else>
-          <img src="../../assets/imgs/img-no-data.png" alt="">
-          <div class="text">无参数</div>
-        </div>
-      </div>
-      <p class="input-title mt">
-        <span class="before_title"></span>
-          接口文档介绍
-        <span class="after_icon" @click="res_body_open=!res_body_open">
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="res_body_open"></bg-icon>
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
-        </span>
-      </p>
-      <div v-if="res_body_open">
-        <div v-html="detail_data.doc_desc" class="doc_desc"></div>
-      </div>
-    </div>
-
-    <!-- 测试结果弹窗 -->
-    <el-dialog
-      class="dialog_box result_box"
-      title="提示"
-      v-model="showDialog"
-      width="400px"
-      :before-close="
-        () => {
-          showDialog = false;
-        }
-      "
-    >
-      <div class="dialog_info">
-        <bg-icon v-if="dialogInfo.state" style="font-size: 26px; color: #429e8a; margin-right: 10px" icon="#bg-ic-circle-check"></bg-icon>
-        <bg-icon v-else style="font-size: 26px; color: #d75138; margin-right: 10px" icon="#bg-ic-circle-close"></bg-icon>
-        <span>{{dialogInfo.msg}}</span>
-      </div>
-      <template v-slot:footer>
-        <div class="apaas_button">
-          <el-button @click="showDialog = false">取 消</el-button>
-          <el-button type="primary" @click="showDialog = false">确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance  } from 'vue'
-import { useRouter,useRoute } from 'vue-router'
-import { ElMessage } from 'element-plus'
-const { proxy } = getCurrentInstance()
-const { $axios,$message } = proxy
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null
-  }
-})
-const router = useRouter()
-const route = useRoute()
-const detailData = reactive({
-  apiBaseInfo: [
-    {
-      name: "能力名称",
-      value: "",
-      nameWidth: 104
-    },
-    {
-      name: "调用地址",
-      value: "",
-      nameWidth: 104
-    },
-  ], // 基本信息
-  uiInfo: [],
-  detail_data: {},
-  res_body_open: true,
-  showDialog: false,
-  dialogInfo: {
-    msg: "该服务地址正常",
-    state: true
-  },
-  topic_open: true,
-  currentUi: {},
-  classArr: [
-    "question",
-    "success",
-    "close",
-  ],
-  iconArr: [
-    "#bg-ic-s-circle-question",
-    "#bg-ic-s-circle-check",
-    "#bg-ic-s-circle-close"
-  ],
-  iconTipInfo: [
-    "该主题还未进行测试",
-    "该主题测试通过",
-    "该主题测试不通过"
-  ],
-  showRefreshBtn: false
-})
-const emit = defineEmits(['refresh'])
-const detail = props.data
-detailData.detail_data = props.data
-if (detail) {
-  detailData.apiBaseInfo[0].value = detail.service_name
-  detailData.apiBaseInfo[1].value = detail.req_url
-  detailData.uiInfo = detail.ui_theme || []
-  if (detailData.uiInfo.length > 0) {
-    detailData.uiInfo.forEach(e => {
-      e.image = JSON.parse(e.image)
-    })
-  }
-  detailData.currentUi = detailData.uiInfo[0] || {}
-}
-const changeCurrentTopic = (item) => {
-  detailData.currentUi = item
-}
-const serviceTest = () => {
-  let params = {
-    ui_id: detailData.currentUi.id,
-    id: detail.id.toString(),
-    url: detail.req_url,
-    parameters: detailData.currentUi.parameters
-  }
-  localStorage.setItem('params',JSON.stringify(params))
-  let routeData = router.resolve({
-    path: "/ui-example",
-  });
-  window.open(routeData.href, "_blank");
-  detailData.showRefreshBtn = true
-}
-const refresh = () => {
-  emit('refresh',detail.ability_tree_code)
-}
-const {
-  apiBaseInfo,
-  detail_data,
-  res_body_open,
-  showDialog,
-  dialogInfo,
-  uiInfo,
-  topic_open,
-  currentUi,
-  classArr,
-  iconArr,
-  iconTipInfo,
-  showRefreshBtn,
-} = toRefs(detailData)
-</script>
-
-<style lang="scss" scoped>
-.baseInfo_box {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  .baseInfo {
-    width: 872px;
-  }
-  .refresh_btn {
-    background-color: #404a62;
-  }
-}
-.req_box {
-  width: 872px;
-  margin-top: 30px;
-  .input-title {
-    font-size: 16px;
-    color: #202531;
-    margin-top: 9px;
-    margin-bottom: 15px;
-    font-weight: 700;
-    line-height: 1;
-    .before_title {
-      display: inline-block;
-      width: 4px;
-      height: 14px;
-      background-color: #2b4695;
-      margin-right: 8px;
-      border-radius: 2px;
-    }
-    .after_icon {
-      float: right;
-      cursor: pointer;
-    }
-  }
-  .mt {
-    margin-top: 24px;
-  }
-  .no_data {
-    text-align: center;
-    .text {
-      font-size: 16px;
-      color: #616f94;
-      line-height: 1;
-    }
-  }
-  .doc_desc {
-    width: 100%;
-    height: 406px;
-    padding: 16px 24px;
-    background-color: #fafafa;
-    border-radius: 4px;
-    color: #202531;
-    font-size: 14px;
-  }
-  .topic_box {
-    display: flex;
-    .left {
-      width: 200px;
-      margin-right: 16px;
-      font-size: 14px;
-      color: #202531;
-      .items {
-        border: 1px solid #dadee7;
-        padding: 4px 0;
-        .topic_item {
-          height: 34px;
-          line-height: 34px;
-          padding: 0 8px;
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          .tree-icon {
-            font-size: 12px;
-            color: #909bb6;
-            margin-right: 6px;
-          }
-          .success {
-            color: #48ad97;
-          }
-          .close {
-            color: #dd6955;
-          }
-        }
-        .current {
-          background-color: #eff2fa;
-          color: #3759be;
-        }
-      }
-    } 
-    .right {
-      flex: 1;
-      height: 332px;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-}
-.dialog_info {
-  padding: 27px 0 11px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
\ No newline at end of file

src/components/api-type/web-sdk.vue

-<!-- webSDK -->
-<template>
-  <div>
-    <div class="baseInfo_box">
-      <div class="baseInfo">
-        <bg-info :data="apiBaseInfo" />
-      </div>
-      <div class="apaas_button test_btn">
-        <el-button type="primary" @click="serviceTest">
-          <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
-          服务测试
-        </el-button>
-      </div>
-    </div>
-    <div class="req_box">
-      <p class="input-title">
-        <span class="before_title"></span>
-          使用示例
-        <span class="after_icon" @click="example_open=!example_open">
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="example_open"></bg-icon>
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
-        </span>
-      </p>
-      <div v-if="example_open">
-        <video id="video" style="width: 100%" controls autoplay>
-          <source :src="wsdk_use_doc" />
-        </video>
-      </div>
-      <p class="input-title">
-        <span class="before_title"></span>
-          接口文档介绍
-        <span class="after_icon" @click="res_body_open=!res_body_open">
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="res_body_open"></bg-icon>
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
-        </span>
-      </p>
-      <div v-if="res_body_open">
-        <div v-html="detail_data.doc_desc" class="doc_desc"></div>
-      </div>
-    </div>
-
-    <!-- 测试结果弹窗 -->
-    <el-dialog
-      class="dialog_box result_box"
-      title="提示"
-      v-model="showDialog"
-      width="400px"
-      :before-close="
-        () => {
-          dialogClose()
-        }
-      "
-    >
-      <div class="dialog_info">
-        <bg-icon v-if="dialogInfo.state" style="font-size: 26px; color: #429e8a; margin-right: 10px" icon="#bg-ic-circle-check"></bg-icon>
-        <bg-icon v-else style="font-size: 26px; color: #d75138; margin-right: 10px" icon="#bg-ic-circle-close"></bg-icon>
-        <span>{{dialogInfo.msg}}</span>
-      </div>
-      <template v-slot:footer>
-        <div class="apaas_button">
-          <el-button @click="dialogClose">取 消</el-button>
-          <el-button type="primary" @click="dialogClose">确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance  } from 'vue'
-import { useRouter,useRoute } from 'vue-router'
-import { ElMessage } from 'element-plus'
-const { proxy } = getCurrentInstance()
-const { $axios,$message } = proxy
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null
-  }
-})
-const emit = defineEmits(["dialogClose"])
-const router = useRouter()
-const route = useRoute()
-const detailData = reactive({
-  apiBaseInfo: [
-    {
-      name: "能力名称",
-      value: "",
-      nameWidth: 104
-    },
-    {
-      name: "版本号",
-      value: "",
-      nameWidth: 104
-    },
-    {
-      name: "调用地址",
-      value: "",
-      full: true,
-      nameWidth: 104
-    },
-    {
-      name: "安全密钥",
-      value: "",
-      nameWidth: 104,
-      full: true,
-      password: true,
-      realValue: "",
-    },
-  ], // 基本信息
-  detail_data: {},
-  res_body_open: true,
-  showDialog: false,
-  dialogInfo: {
-    msg: "该服务地址正常",
-    state: true
-  },
-  example_open: true,
-  wsdk_use_doc: ""
-})
-const detail = props.data
-detailData.detail_data = props.data
-if (detail) {
-  detailData.apiBaseInfo[0].value = detail.service_name
-  detailData.apiBaseInfo[1].value = detail.sdk_version
-  detailData.apiBaseInfo[2].value = detail.req_url
-  detailData.apiBaseInfo[3].value = "***************"
-  detailData.apiBaseInfo[3].realValue = detail.wsdk_secret_key
-  detailData.wsdk_use_doc = detail.wsdk_use_doc
-}
-const serviceTest = () => {
-  let params = {
-    interface_type: 1,
-    method: 1,
-    url: detail.req_url,
-    id: detail.id.toString()
-  }
-  $axios
-    .post(`/apaas/service/v5/service/test`,params)
-    .then((res) => {
-      if (res.data.code !== 200) {
-        $message.error(res.data.data)
-      } else {
-        detailData.showDialog = true
-        if (res.data.data.response_code == 200) { 
-          detailData.dialogInfo = {
-            msg: "该服务地址正常",
-            state: true
-          }
-        }else {
-          detailData.dialogInfo = {
-            msg: "该服务地址异常",
-            state: false
-          }
-        }
-      }
-    })
-}
-const dialogClose = () => {
-  detailData.showDialog = false
-  emit("refresh",detail.ability_tree_code)
-}
-const {
-  apiBaseInfo,
-  detail_data,
-  res_body_open,
-  showDialog,
-  dialogInfo,
-  example_open,
-  wsdk_use_doc,
-} = toRefs(detailData)
-</script>
-
-<style lang="scss" scoped>
-.baseInfo_box {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  .baseInfo {
-    width: 872px;
-  }
-}
-.req_box {
-  width: 872px;
-  margin-top: 30px;
-  .input-title {
-    font-size: 16px;
-    color: #202531;
-    margin-top: 9px;
-    margin-bottom: 15px;
-    font-weight: 700;
-    line-height: 1;
-    .before_title {
-      display: inline-block;
-      width: 4px;
-      height: 14px;
-      background-color: #2b4695;
-      margin-right: 8px;
-      border-radius: 2px;
-    }
-    .after_icon {
-      float: right;
-      cursor: pointer;
-    }
-  }
-  .doc_desc {
-    width: 100%;
-    height: 406px;
-    padding: 16px 24px;
-    background-color: #fafafa;
-    border-radius: 4px;
-    color: #202531;
-    font-size: 14px;
-  }
-}
-.dialog_info {
-  padding: 27px 0 11px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
\ No newline at end of file

src/components/api-type/websocket.vue

-<!-- websocket -->
-<template>
-  <div>
-    <div class="baseInfo_box">
-      <div class="baseInfo">
-        <bg-info :data="apiBaseInfo" />
-      </div>
-      <div class="apaas_button test_btn">
-        <el-button type="primary" @click="serviceTest">
-          <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
-          服务测试
-        </el-button>
-      </div>
-    </div>
-    <div class="req_box">
-      <p class="input-title">
-        <span class="before_title"></span>
-          接口文档介绍
-        <span class="after_icon" @click="res_body_open=!res_body_open">
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="res_body_open"></bg-icon>
-          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
-        </span>
-      </p>
-      <div v-if="res_body_open">
-        <div v-html="detail_data.doc_desc" class="doc_desc"></div>
-      </div>
-    </div>
-
-    <!-- 测试结果弹窗 -->
-    <el-dialog
-      class="dialog_box result_box"
-      title="提示"
-      v-model="showDialog"
-      width="400px"
-      :before-close="
-        () => {
-          dialogClose()
-        }
-      "
-    >
-      <div class="dialog_info">
-        <bg-icon v-if="dialogInfo.state" style="font-size: 26px; color: #429e8a; margin-right: 10px" icon="#bg-ic-circle-check"></bg-icon>
-        <bg-icon v-else style="font-size: 26px; color: #d75138; margin-right: 10px" icon="#bg-ic-circle-close"></bg-icon>
-        <span>{{dialogInfo.msg}}</span>
-      </div>
-      <template v-slot:footer>
-        <div class="apaas_button">
-          <el-button @click="dialogClose">取 消</el-button>
-          <el-button type="primary" @click="dialogClose">确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance  } from 'vue'
-import { useRouter,useRoute } from 'vue-router'
-import { ElMessage } from 'element-plus'
-const { proxy } = getCurrentInstance()
-const { $axios,$message } = proxy
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null
-  }
-})
-const emit = defineEmits(["dialogClose"])
-const router = useRouter()
-const route = useRoute()
-const state = reactive({data1:1})
-const {data1} = toRefs(state)
-const detailData = reactive({
-  apiBaseInfo: [
-    {
-      name: "能力名称",
-      value: "",
-      nameWidth: 104
-    },
-    {
-      name: "调用地址",
-      value: "",
-      nameWidth: 104
-    },
-    {
-      name: "通信协议",
-      value: "",
-      full: true,
-      nameWidth: 104
-    },
-  ], // 基本信息
-  detail_data: {},
-  res_body_open: true,
-  showDialog: false,
-  dialogInfo: {
-    msg: "该服务地址正常",
-    state: true
-  },
-})
-const detail = props.data
-detailData.detail_data = props.data
-if (detail) {
-  detailData.apiBaseInfo[0].value = detail.service_name
-  detailData.apiBaseInfo[1].value = detail.req_url
-  detailData.apiBaseInfo[2].value = ['','ws','wss'][detail.ws_protocol]
-}
-const serviceTest = () => {
-  let params = {
-    interface_type: 3,
-    url: detail.req_url,
-    id: detail.id.toString()
-  }
-  $axios
-    .post(`/apaas/service/v5/service/test`,params)
-    .then((res) => {
-      if (res.data.code !== 200) {
-        $message.error(res.data.data)
-      } else {
-        detailData.showDialog = true
-        if (res.data.data.response_code == 200) { 
-          detailData.dialogInfo = {
-            msg: "该服务地址正常",
-            state: true
-          }
-        }else {
-          detailData.dialogInfo = {
-            msg: "该服务地址异常",
-            state: false
-          }
-        }
-      }
-    })
-}
-const dialogClose = () => {
-  detailData.showDialog = false
-  emit("refresh",detail.ability_tree_code)
-}
-const {
-  apiBaseInfo,
-  detail_data,
-  res_body_open,
-  showDialog,
-  dialogInfo,
-} = toRefs(detailData)
-</script>
-
-<style lang="scss" scoped>
-.baseInfo_box {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  .baseInfo {
-    width: 872px;
-  }
-}
-.req_box {
-  width: 872px;
-  margin-top: 30px;
-  .input-title {
-    font-size: 16px;
-    color: #202531;
-    margin-top: 9px;
-    margin-bottom: 15px;
-    font-weight: 700;
-    line-height: 1;
-    .before_title {
-      display: inline-block;
-      width: 4px;
-      height: 14px;
-      background-color: #2b4695;
-      margin-right: 8px;
-      border-radius: 2px;
-    }
-    .after_icon {
-      float: right;
-      cursor: pointer;
-    }
-  }
-  .doc_desc {
-    width: 100%;
-    height: 406px;
-    padding: 16px 24px;
-    background-color: #fafafa;
-    border-radius: 4px;
-    color: #202531;
-    font-size: 14px;
-  }
-}
-.dialog_info {
-  padding: 27px 0 11px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
\ No newline at end of file

src/components/general/block-radius.vue

@@ -44,77 +44,76 @@
 
 
 
-<script>
+<script setup>
 import { reactive, toRefs, onBeforeMount } from 'vue'
-export default {
-  props: {
-    show_header: {
-      type: Boolean,
-      default: false,
-    },
-    selectValue: {
-      type: [String,Number],
-      default: ""
-    },
-    selectArr: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    buttons_arr: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    bgIcon: {
-      type: String,
-      default: ""
-    },
-    title: {
-      type: String,
-      default: "",
-    },
-    background_color: {
-      type: String,
-      default: "#fff"
-    }, // header条背景色
-    showLeft: {
-      type: Boolean,
-      default: true
+
+const props = defineProps({
+  show_header: {
+    type: Boolean,
+    default: false,
+  },
+  selectValue: {
+    type: [String,Number],
+    default: ""
+  },
+  selectArr: {
+    type: Array,
+    default: () => {
+      return [];
     },
-    noPadding: {
-      type: Boolean,
-      default: false
+  },
+  buttons_arr: {
+    type: Array,
+    default: () => {
+      return [];
     },
   },
-  
-  setup(props,{ emit }) {
-    const state = reactive({
-      currentSelectValue: null,
-      active_button: 0
-    })
-    const selectChange = (val) => {
-      state.currentSelectValue = val;
-      emit('selectChange', val);
-    }
-    const changeButton = (index) => {
-      if (state.active_button != index) {
-        state.active_button = index;
-        emit("changeButton", index);
-      }
-    }
-    onBeforeMount(() => {
-      state.currentSelectValue = props.selectValue
-    })
-    return {
-      ...toRefs(state),
-      selectChange,
-      changeButton,
-    }
+  bgIcon: {
+    type: String,
+    default: ""
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  background_color: {
+    type: String,
+    default: "#fff"
+  }, // header条背景色
+  showLeft: {
+    type: Boolean,
+    default: true
+  },
+  noPadding: {
+    type: Boolean,
+    default: false
   },
+})
+
+const emit = defineEmits(['selectChange','changeButton'])
+const state = reactive({
+  currentSelectValue: null,
+  active_button: 0
+})
+
+const selectChange = (val) => {
+  state.currentSelectValue = val;
+  emit('selectChange', val);
 }
+const changeButton = (index) => {
+  if (state.active_button != index) {
+    state.active_button = index;
+    emit("changeButton", index);
+  }
+}
+onBeforeMount(() => {
+  state.currentSelectValue = props.selectValue
+})
+
+const {
+  currentSelectValue,
+  active_button,
+} = toRefs(state)
 </script>
 
 <style scoped>

src/page/home.vue

-<template>
-    <div>
-        <span @click="getTableData1">login</span> 
-        <span @click="getSelect">select</span>
-
-        <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :select="true" height="100%"></bg-table>
-    </div>
-</template>
-
-<script>
-import { reactive, toRefs,onBeforeMount,onMounted,ref } from 'vue'
-export default {
-    setup(){
-        const bgTable = ref(null)
-        const state = reactive({
-            bgTable,
-            headers:[
-                {
-                    label: "类型",
-                    prop: "certificateTypeDesc",
-                },
-                {
-                    label: "业务ID",
-                    prop: "businessId",
-                },
-                {
-                    label: "申请主体",
-                    prop: "businessId1",
-                }
-            ],
-            dataTable:[
-                {
-                    certificateTypeDesc:111,
-                    businessId:111,
-                    businessId1:111,
-                    id:1,
-                },
-                {
-                    certificateTypeDesc:111,
-                    businessId:111,
-                    businessId1:111,
-                    id:2,
-                },
-                {
-                    certificateTypeDesc:111,
-                    businessId:111,
-                    businessId1:111,
-                    id:3,
-                },
-                {
-                    certificateTypeDesc:111,
-                    businessId:111,
-                    businessId1:111,
-                    id:4,
-                },
-                {
-                    certificateTypeDesc:111,
-                    businessId:111,
-                    businessId1:111,
-                    id:5,
-                },
-                {
-                    certificateTypeDesc:222,
-                    businessId:22,
-                    businessId1:222,
-                    id:6,
-                },
-                {
-                    certificateTypeDesc:2222,
-                    businessId:2222,
-                    businessId1:2222,
-                    id:7,
-                },
-                {
-                    certificateTypeDesc:2222,
-                    businessId:2222,
-                    businessId1:2222,
-                    id:8,
-                },
-                {
-                    certificateTypeDesc:2222,
-                    businessId:2222,
-                    businessId1:2222,
-                    id:9,
-                },
-                {
-                    certificateTypeDesc:2222,
-                    businessId:2222,
-                    businessId1:2222,
-                    id:10,
-                },
-            ],
-            tableRows:[],
-            nowPage:1
-
-        })
-
-        onBeforeMount(() => {
-            getTableData()
-        })
-
-        onMounted(() => {
-            console.log(state.bgTable);
-        })
-
-        const getTableData=()=>{
-            state.tableRows=[]
-            state.dataTable.forEach((e,idx) => {
-                if(idx>=(state.nowPage-1)*5&&idx<state.nowPage*5){
-                    state.tableRows.push(e)
-                }
-            });
-        }
-
-        const getTableData1=()=>{
-            console.log(1111);
-            if(state.nowPage==1){
-                state.nowPage = 2
-            }else{
-                state.nowPage = 1
-            }
-            getTableData()
-        }
-
-        const getSelect=()=>{
-            let select = state.bgTable.dealSelectData()
-            console.log(select);
-        }
-
-        return {
-          ...toRefs(state),
-          getTableData,
-          getTableData1,
-          getSelect,
-        }
-    }
-    
-};
-</script>
-
-<style scoped>
-
-</style>

src/page/main/system/role/index.vue

@@ -387,6 +387,7 @@ const distribute_user = (row) => {
 
 const getUserList = () => {
   nextTick(() => {
+    console.log(userTable)
     clearUserSelection()
   })
   let params = {
@@ -407,6 +408,7 @@ const getUserList = () => {
         nextTick(() => {
           userState.userRows.forEach(e => {
             if(e.is_bind == 1) {
+              console.log(userTable)
               userTable.value.toggleRowSelection(e,true)
             }
           })
@@ -445,6 +447,7 @@ const clearAction = (type) => {
 }
 
 const clearUserSelection = () => {
+  console.log(userTable.value)
   userTable.value.clearTable()
 }