From 4c10184311f32e94e9d5399ddb08f256cb2cabf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E4=BC=9F=E5=BA=9A?= <zhaoweigeng@wodcloud.com>
Date: Tue, 27 Dec 2022 17:28:16 +0800
Subject: [PATCH] =?UTF-8?q?update=EF=BC=9Abg-ui=E6=94=B9=E5=86=99=E4=B8=BA?=
 =?UTF-8?q?vue3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/bg-ui/bg-btns.vue                  |  33 +--
 src/bg-ui/bg-card.vue                  |  23 +-
 src/bg-ui/bg-code-editor.vue           | 182 ++++++------
 src/bg-ui/bg-detail-table.vue          | 181 ++++++------
 src/bg-ui/bg-detail-table2.vue         | 135 ++++-----
 src/bg-ui/bg-detail.vue                | 156 +++++-----
 src/bg-ui/bg-filter-date.vue           |  46 ++-
 src/bg-ui/bg-filter-group.vue          |  74 +++--
 src/bg-ui/bg-filter.vue                | 139 +++++----
 src/bg-ui/bg-filtrate.vue              | 128 ++++-----
 src/bg-ui/bg-icon.vue                  |  18 +-
 src/bg-ui/bg-info.vue                  | 271 +++++++++---------
 src/bg-ui/bg-inner-tabs.vue            |  89 +++---
 src/bg-ui/bg-layout-card.vue           | 141 +++++-----
 src/bg-ui/bg-list.vue                  |  44 ++-
 src/bg-ui/bg-nav-list.vue              | 115 ++++----
 src/bg-ui/bg-nav.vue                   |  38 ++-
 src/bg-ui/bg-pagination.vue            |  31 +-
 src/bg-ui/bg-permission-option.vue     | 123 ++++----
 src/bg-ui/bg-permission.vue            | 375 +++++++++++--------------
 src/bg-ui/bg-rich-text.vue             | 139 +++++----
 src/bg-ui/bg-sort.vue                  |  73 +++--
 src/bg-ui/bg-step.vue                  |  42 ---
 src/bg-ui/bg-steps.vue                 | 106 -------
 src/bg-ui/bg-switch-ele.vue            |  41 ++-
 src/bg-ui/bg-switch.vue                | 160 +++++------
 src/bg-ui/bg-tab.vue                   |  81 +++---
 src/bg-ui/bg-table-btn.vue             |  39 ++-
 src/bg-ui/bg-table-pro.vue             | 259 ++++++++---------
 src/bg-ui/bg-table.vue                 | 140 ++++-----
 src/bg-ui/bg-tabs.vue                  |  76 +++--
 src/bg-ui/bg-tags.vue                  |  86 +++---
 src/bg-ui/bg-upload-image.vue          | 354 +++++++++++------------
 src/bg-ui/bg-upload.vue                | 288 +++++++++----------
 src/bg-ui/bg-user-upload-image.vue     |  97 ++++---
 src/bg-ui/index.js                     |   4 -
 src/bg-ui/index.scss                   | 170 -----------
 src/components/ability-card.vue        | 113 ++++----
 src/components/ability-list.vue        |  42 +--
 src/components/input-table.vue         | 298 ++++++++++----------
 src/components/table/MyTableColumn.vue |  29 +-
 41 files changed, 2215 insertions(+), 2764 deletions(-)
 delete mode 100644 src/bg-ui/bg-step.vue
 delete mode 100644 src/bg-ui/bg-steps.vue

diff --git a/src/bg-ui/bg-btns.vue b/src/bg-ui/bg-btns.vue
index abe7773..a806416 100644
--- a/src/bg-ui/bg-btns.vue
+++ b/src/bg-ui/bg-btns.vue
@@ -7,32 +7,27 @@
           'is-active': modelValue === btn.value,
         }"
         :key="btn.value"
-        @click="selectBtn(btn)"
-      >
+        @click="selectBtn(btn)">
         {{ btn.name }}
       </li>
     </ul>
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgBtns",
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: "",
-    },
-    options: {
-      type: Array,
-      default: () => [],
-    },
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: "",
   },
-  emits: ["update:modelValue"],
-  methods: {
-    selectBtn({ value }) {
-      this.$emit("update:modelValue", value);
-    },
+  options: {
+    type: Array,
+    default: () => [],
   },
+});
+const emit = defineEmits(["update:modelValue"]);
+
+const selectBtn = ({ value }) => {
+  emit("update:modelValue", value);
 };
 </script>
diff --git a/src/bg-ui/bg-card.vue b/src/bg-ui/bg-card.vue
index 11f5baf..d5191ab 100644
--- a/src/bg-ui/bg-card.vue
+++ b/src/bg-ui/bg-card.vue
@@ -12,18 +12,15 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgCard",
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    icon: {
-      type: String,
-      default: "",
-    },
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
   },
-};
+  icon: {
+    type: String,
+    default: "",
+  },
+});
 </script>
diff --git a/src/bg-ui/bg-code-editor.vue b/src/bg-ui/bg-code-editor.vue
index dbcfcfd..d239f2c 100644
--- a/src/bg-ui/bg-code-editor.vue
+++ b/src/bg-ui/bg-code-editor.vue
@@ -2,72 +2,69 @@
   <VAceEditor
     v-model:value="states.content"
     class="vue-ace-editor"
-    :class="{'vue-ace-editor-disable':props.disabled}"
-    @input="codeChange"     
+    :class="{ 'vue-ace-editor-disable': props.disabled }"
+    @input="codeChange"
     :lang="props.lang"
     :theme="props.theme"
-    :options="{ 
+    :options="{
       useWorker: true,
       readOnly: props.disabled,
-      wrap: true
-    }"
-  />
+      wrap: true,
+    }" />
 </template>
 <script setup>
-import { reactive, toRefs, watch,onMounted } from "vue";
+import { reactive, toRefs, watch, onMounted } from "vue";
 import { VAceEditor } from "vue3-ace-editor";
-import ace from 'ace-builds';
-import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url';
-import modeJavascriptUrl from 'ace-builds/src-noconflict/mode-javascript?url';
-import modeHtmlUrl from 'ace-builds/src-noconflict/mode-html?url';
-import themeGithubUrl from 'ace-builds/src-noconflict/theme-github?url';
-import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url';
-import themeMonokaiUrl from 'ace-builds/src-noconflict/theme-monokai?url';
-import workerBaseUrl from 'ace-builds/src-noconflict/worker-base?url';
-import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url';
-import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url';
-import workerHtmlUrl from 'ace-builds/src-noconflict/worker-html?url';
-ace.config.setModuleUrl('ace/mode/json', modeJsonUrl);
-ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl);
-ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl);
-ace.config.setModuleUrl('ace/theme/github', themeGithubUrl);
-ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl);
-ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl);
-ace.config.setModuleUrl('ace/mode/base', workerBaseUrl);
-ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl);
-ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl);
-ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl);
-const props = defineProps(
-    {
-        modelValue: {
-          type:String,
-          default:"",
-        },
-        disabled:{
-          type:Boolean,
-          default:false
-        },
-        // lang:{
-        //   type:String,
-        //   default:"json"
-        // },
-        // theme:{
-        //   type:String,
-        //   default:"themeChromeUrl"
-        // },
-        width:{
-          type:String,
-          default:"100%"
-        },
-    }
-)
-const emit = defineEmits(['update:modelValue'])
-watch(
-  props.modelValue,
-  (n,o) => {
-    states.content = n
-  }
-)
+import ace from "ace-builds";
+import modeJsonUrl from "ace-builds/src-noconflict/mode-json?url";
+import modeJavascriptUrl from "ace-builds/src-noconflict/mode-javascript?url";
+import modeHtmlUrl from "ace-builds/src-noconflict/mode-html?url";
+import themeGithubUrl from "ace-builds/src-noconflict/theme-github?url";
+import themeChromeUrl from "ace-builds/src-noconflict/theme-chrome?url";
+import themeMonokaiUrl from "ace-builds/src-noconflict/theme-monokai?url";
+import workerBaseUrl from "ace-builds/src-noconflict/worker-base?url";
+import workerJsonUrl from "ace-builds/src-noconflict/worker-json?url";
+import workerJavascriptUrl from "ace-builds/src-noconflict/worker-javascript?url";
+import workerHtmlUrl from "ace-builds/src-noconflict/worker-html?url";
+ace.config.setModuleUrl("ace/mode/json", modeJsonUrl);
+ace.config.setModuleUrl("ace/mode/javascript", modeJavascriptUrl);
+ace.config.setModuleUrl("ace/mode/html", modeHtmlUrl);
+ace.config.setModuleUrl("ace/theme/github", themeGithubUrl);
+ace.config.setModuleUrl("ace/theme/chrome", themeChromeUrl);
+ace.config.setModuleUrl("ace/theme/monokai", themeMonokaiUrl);
+ace.config.setModuleUrl("ace/mode/base", workerBaseUrl);
+ace.config.setModuleUrl("ace/mode/json_worker", workerJsonUrl);
+ace.config.setModuleUrl("ace/mode/javascript_worker", workerJavascriptUrl);
+ace.config.setModuleUrl("ace/mode/html_worker", workerHtmlUrl);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // lang:{
+  //   type:String,
+  //   default:"json"
+  // },
+  // theme:{
+  //   type:String,
+  //   default:"themeChromeUrl"
+  // },
+  width: {
+    type: String,
+    default: "100%",
+  },
+});
+const emit = defineEmits(["update:modelValue"]);
+// watch(
+//   props.modelValue,
+//   (n,o) => {
+//     states.content = n
+//   }
+// )
 
 const states = reactive({
   lang: "json",
@@ -75,32 +72,33 @@ const states = reactive({
   content: "",
 });
 
-watch(
-  states.content,
-  (n,o) => {
-    emit("update:modelValue", n);
-  }
-)
+// watch(
+//   states.content,
+//   (n,o) => {
+//     emit("update:modelValue", n);
+//   }
+// )
 
-const codeChange = (val,val1,val2)=>{
+const codeChange = () => {
   emit("update:modelValue", states.content);
-}
+};
 
 onMounted(() => {
   let obj = "";
-    // console.log(typeof JSON.parse(this.datas));
-    try {
-      if (typeof JSON.parse(props.modelValue) == "object") {
-        obj = JSON.stringify(JSON.parse(props.modelValue), null, "\t");
-      }
-    } catch (e) {
+  // console.log(typeof JSON.parse(this.datas));
+  try {
+    if (typeof JSON.parse(props.modelValue) == "object") {
+      obj = JSON.stringify(JSON.parse(props.modelValue), null, "\t");
+    } else {
       obj = props.modelValue;
     }
-  states.content = obj
-})
-
-const {content} = toRefs(states)
+  } catch (e) {
+    obj = props.modelValue;
+  }
+  states.content = obj;
+});
 
+const { content } = toRefs(states);
 </script>
 
 <style scoped>
@@ -114,48 +112,48 @@ const {content} = toRefs(states)
   border-radius: 4px;
   overflow: hidden;
 }
-.vue-ace-editor :deep() .ace_scrollbar-v{
-  width: 0px!important;
+.vue-ace-editor :deep() .ace_scrollbar-v {
+  width: 0px !important;
 }
 
-.vue-ace-editor :deep() .ace_gutter{
+.vue-ace-editor :deep() .ace_gutter {
   font-size: 14px;
-	color: #ffffff;
+  color: #ffffff;
   background-color: #262626;
 }
-.vue-ace-editor :deep() .ace_gutter-cell{
+.vue-ace-editor :deep() .ace_gutter-cell {
   line-height: 22px;
   background-color: #262626;
 }
-.vue-ace-editor :deep() .ace_print-margin{
+.vue-ace-editor :deep() .ace_print-margin {
   width: 0;
 }
-.vue-ace-editor :deep() .ace_scroller{
+.vue-ace-editor :deep() .ace_scroller {
   background-color: #1a1a1a;
   color: #fff;
-  caret-color:#fff;
+  caret-color: #fff;
 }
 /* 光标颜色 */
-.vue-ace-editor :deep() .ace_cursor{
+.vue-ace-editor :deep() .ace_cursor {
   color: #fff;
 }
-.vue-ace-editor-disable :deep() .ace_scrollbar-v{
-  width: 6px!important;
+.vue-ace-editor-disable :deep() .ace_scrollbar-v {
+  width: 6px !important;
 }
-.vue-ace-editor-disable :deep() .ace_gutter{
+.vue-ace-editor-disable :deep() .ace_gutter {
   background-color: #202531;
 }
-.vue-ace-editor-disable :deep() .ace_gutter-cell{
+.vue-ace-editor-disable :deep() .ace_gutter-cell {
   background-color: #202531;
 }
 
-.vue-ace-editor-disable :deep() .ace_scroller{
+.vue-ace-editor-disable :deep() .ace_scroller {
   background-color: #fff;
   color: #202531;
 }
 
 /* 光标颜色 */
-.vue-ace-editor-disable :deep() .ace_cursor{
+.vue-ace-editor-disable :deep() .ace_cursor {
   color: #000;
 }
 </style>
diff --git a/src/bg-ui/bg-detail-table.vue b/src/bg-ui/bg-detail-table.vue
index da685d3..ab0af92 100644
--- a/src/bg-ui/bg-detail-table.vue
+++ b/src/bg-ui/bg-detail-table.vue
@@ -1,102 +1,105 @@
 <template>
-    <div class="detail_box">
-      <div class="detail_text text_clip" :style="index==data.length-1?last_width:unit_width" v-for="(item,index) in data" :key="'data'+index">
-        <span>{{item.title}}</span>
-        <!-- 拓展功能 -->
-        <template v-if="item.slot">
-            <span>
-                <slot v-bind:item="item" :name="item.slot"></slot>
-            </span>
-        </template>
-        <!-- 原有下载功能 -->
-        <template v-else>
-            <span v-if="!item.urls" :title="item.info" @click="down_file(item.url)" :style="item.url?{color:'#515fe7',cursor:'pointer'}:''">{{item.info}}</span>
-            <span v-else :title="item.info">
-                <span v-for="(it,idx) in item.urls" @click="down_file(it)" style="color:#515fe7;cursor:pointer;" :key="'urls'+idx">{{helper.downloadFileFormatNew(it)}}、</span>
-            </span>
-        </template>
-      </div>
-      <div class="bg" :style="{top:(2*index+1)*42+'px'}" v-for="(item,index) in bg_num" :key="'bg'+index"></div>
+  <div class="detail_box">
+    <div
+      class="detail_text text_clip"
+      :style="index == data.length - 1 ? last_width : unit_width"
+      v-for="(item, index) in data"
+      :key="'data' + index">
+      <span>{{ item.title }}</span>
+      <!-- 拓展功能 -->
+      <template v-if="item.slot">
+        <span>
+          <slot v-bind:item="item" :name="item.slot"></slot>
+        </span>
+      </template>
+      <!-- 原有下载功能 -->
+      <template v-else>
+        <span
+          v-if="!item.urls"
+          :title="item.info"
+          @click="down_file(item.url)"
+          :style="item.url ? { color: '#515fe7', cursor: 'pointer' } : ''"
+          >{{ item.info }}</span
+        >
+        <span v-else :title="item.info">
+          <span
+            v-for="(it, idx) in item.urls"
+            @click="down_file(it)"
+            style="color: #515fe7; cursor: pointer"
+            :key="'urls' + idx"
+            >{{ helper.downloadFileFormatNew(it) }}、</span
+          >
+        </span>
+      </template>
     </div>
+    <div
+      class="bg"
+      :style="{ top: (2 * index + 1) * 42 + 'px' }"
+      v-for="(item, index) in bg_num"
+      :key="'bg' + index"></div>
+  </div>
 </template>
 
-<script>
-import helper from './utils/index.js'
+<script setup>
+import { reactive, ref, onBeforeMount, toRefs, watch } from "vue";
+import helper from "./utils/index.js";
 console.log(helper);
-export default {
-    props: {
-        data:{
-            type: Array,
-            default: () => [],
-        },
-        layout:{
-            line_num:4
-        }
-    },
-    components: {
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  layout: {
+    line_num: 4,
+  },
+});
 
-    },
-    data() {
-        return {
-            helper,
-            unit_width:0,
-            last_width:0,
-            bg_num:0,
-        };
-    },
-    watch: {
-        data:{
-            handler: function(n, o) {
-                if(this.layout.line_num){
-                    this.unit_width = {width:100/this.layout.line_num +'%'}
-                }
-                if(this.layout.line_num&&n.length%this.layout.line_num!==0){//计算最后一个格子的宽度
-                    this.last_width = {width:(this.layout.line_num-(n.length%this.layout.line_num)+1)/this.layout.line_num*100+'%'}
-                }else{
-                    this.last_width = {width:100/this.layout.line_num +'%'}
-                }
-                if(n.length<this.layout.line_num){
-                    return
-                }else{
-                    this.bg_num = Math.floor((Math.ceil(n.length/this.layout.line_num))/2)
-                }
-            },
-            immediate: true
-        }
-        
-    },
-    computed: {
-       
-    },
-    created() {
-        
-    },
-    mounted() {
+const unit_width = ref(0);
+const last_width = ref(0);
+const bg_num = ref(0);
 
-    },
-    methods: {
-        down_file(url){
-            if(url){
-                console.log(url);
-                const a = document.createElement("a"); // 创建a标签
-                a.setAttribute("download", ""); // download属性
-                a.setAttribute("href", url); // href链接
-                a.click(); // 自执行点击事件
-            }
-        }
-    },
+watch(
+  () => props.data,
+  (n, o) => {
+    if (props.layout.line_num) {
+      unit_width.value = { width: 100 / props.layout.line_num + "%" };
+    }
+    if (props.layout.line_num && n.length % props.layout.line_num !== 0) {
+      //计算最后一个格子的宽度
+      last_width.value = {
+        width: ((props.layout.line_num - (n.length % this.layout.line_num) + 1) / this.layout.line_num) * 100 + "%",
+      };
+    } else {
+      last_width.value = { width: 100 / props.layout.line_num + "%" };
+    }
+    if (n.length < props.layout.line_num) {
+      return;
+    } else {
+      bg_num.value = Math.floor(Math.ceil(n.length / props.layout.line_num) / 2);
+    }
+  }
+);
+
+const down_file = (url) => {
+  if (url) {
+    console.log(url);
+    const a = document.createElement("a"); // 创建a标签
+    a.setAttribute("download", ""); // download属性
+    a.setAttribute("href", url); // href链接
+    a.click(); // 自执行点击事件
+  }
 };
 </script>
 
 <style scoped>
-.detail_box{
+.detail_box {
   width: 100%;
   border-bottom: 1px solid #e3e5ef;
   border-right: 1px solid #e3e5ef;
   overflow: hidden;
   position: relative;
 }
-.detail_box .detail_text{
+.detail_box .detail_text {
   width: 25%;
   height: 42px;
   line-height: 42px;
@@ -107,16 +110,16 @@ export default {
   position: relative;
   z-index: 1;
 }
-.detail_box .detail_text span:nth-of-type(1){
+.detail_box .detail_text span:nth-of-type(1) {
   color: #616f94;
 }
-.detail_box .detail_text span:nth-of-type(2){
+.detail_box .detail_text span:nth-of-type(2) {
   color: #404a62;
 }
-.bg{
-    background-color:#f7f8f9;
-    width: 100%;
-    height: 42px;
-    position: absolute;
+.bg {
+  background-color: #f7f8f9;
+  width: 100%;
+  height: 42px;
+  position: absolute;
 }
 </style>
diff --git a/src/bg-ui/bg-detail-table2.vue b/src/bg-ui/bg-detail-table2.vue
index 19757d2..fe1fd13 100644
--- a/src/bg-ui/bg-detail-table2.vue
+++ b/src/bg-ui/bg-detail-table2.vue
@@ -1,94 +1,69 @@
 <template>
-    <div class="out-detail">
-        <div class="row-box" v-for="(item,index) in list" :style="{width:item.width}" :key="'row-box'+index">
-            <p class="detail-module" v-if="!item.slot">
-                <span :style="{width:itemWidth}">{{item.label}}</span>
-                <span class="text_clip" :title="item.value" v-if="!item.childSlot">{{item.value}}</span>
-                <span v-else>
-                    <slot :name="item.childSlot" :data="item"></slot>
-                </span>
-            </p>
-            <template v-else>
-                <slot :name="item.slot" :data="item"></slot>
-            </template>
-        </div>
+  <div class="out-detail">
+    <div class="row-box" v-for="(item, index) in list" :style="{ width: item.width }" :key="'row-box' + index">
+      <p class="detail-module" v-if="!item.slot">
+        <span :style="{ width: itemWidth }">{{ item.label }}</span>
+        <span class="text_clip" :title="item.value" v-if="!item.childSlot">{{ item.value }}</span>
+        <span v-else>
+          <slot :name="item.childSlot" :data="item"></slot>
+        </span>
+      </p>
+      <template v-else>
+        <slot :name="item.slot" :data="item"></slot>
+      </template>
     </div>
+  </div>
 </template>
 
-<script>
-export default {
-    props: {
-        list:{
-            type:Array,
-            default:()=>[]
-        },
-        itemWidth:{
-            type:String,
-            default:''
-        }
-    },
-    components: {
-
-    },
-    data() {
-        return {
-
-        };
-    },
-    watch: {
-
-    },
-    computed: {
-
-    },
-    created() {
-
-    },
-    mounted() {
-
-    },
-    methods: {
-
-    },
-};
+<script setup>
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  itemWidth: {
+    type: String,
+    default: "",
+  },
+});
 </script>
 
 <style scoped>
-.out-detail{
-    width: 100%;
-    overflow: hidden;
-    display: flex;
-    flex-wrap: wrap;
-    border-right: solid 1px #dadee7;
-    border-bottom: solid 1px #dadee7;
+.out-detail {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  border-right: solid 1px #dadee7;
+  border-bottom: solid 1px #dadee7;
 }
-.row-box{
-    width: 50%;
-    flex-grow:1;
-    text-align: left;
-    line-height: 48px;
-    min-height: 48px;
-    border-left: solid 1px #dadee7;
-    border-top: solid 1px #dadee7;
-    font-size: 14px;
-	color: #404a62;
+.row-box {
+  width: 50%;
+  flex-grow: 1;
+  text-align: left;
+  line-height: 48px;
+  min-height: 48px;
+  border-left: solid 1px #dadee7;
+  border-top: solid 1px #dadee7;
+  font-size: 14px;
+  color: #404a62;
 }
-.row-box .detail-module{
-    height: 100%;
-    display: flex;
+.row-box .detail-module {
+  height: 100%;
+  display: flex;
 }
-.row-box .detail-module span{
-    height: 100%;
-    display: inline-block;
-    padding-left: 15px;
-    box-sizing: border-box;
+.row-box .detail-module span {
+  height: 100%;
+  display: inline-block;
+  padding-left: 15px;
+  box-sizing: border-box;
 }
-.row-box .detail-module span:nth-of-type(1){
-    background-color: #f7f7f9;
-    min-width: 114px;
-    border-right: solid 1px #dadee7;
+.row-box .detail-module span:nth-of-type(1) {
+  background-color: #f7f7f9;
+  min-width: 114px;
+  border-right: solid 1px #dadee7;
 }
-.row-box .detail-module span:nth-of-type(2){
-    flex-grow:1;
+.row-box .detail-module span:nth-of-type(2) {
+  flex-grow: 1;
 }
 </style>
diff --git a/src/bg-ui/bg-detail.vue b/src/bg-ui/bg-detail.vue
index 8ea63e1..7b45e8f 100644
--- a/src/bg-ui/bg-detail.vue
+++ b/src/bg-ui/bg-detail.vue
@@ -9,8 +9,7 @@
           :class="{
             current: activeName === item.name,
           }"
-          @click="changeActiveName(item, index)"
-        >
+          @click="changeActiveName(item, index)">
           {{ item.label }}
         </li>
         <li>
@@ -44,8 +43,7 @@
             :class="{
               current: activeName === item.name,
             }"
-            @click="changeActiveName(item, index)"
-          >
+            @click="changeActiveName(item, index)">
             {{ item.label }}
           </li>
           <li>
@@ -60,84 +58,76 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgDetail",
-  provide() {
-    return {
-      getActiveName: () => {
-        return this.activeName;
-      },
-      getIsTabs: () => {
-        return false;
-      },
-    };
-  },
-  data() {
-    return {
-      activeName: "",
-      showFixedBars: false,
-      scrollCallback: null,
-    };
-  },
-  methods: {
-    calcTabs() {
-      let tabSlots = [];
-
-      if (this.$slots.default) {
-        tabSlots = this.$slots.default
-          .filter(
-            (vnode) =>
-              vnode.tag &&
-              vnode.componentOptions &&
-              vnode.componentOptions.Ctor.options.name === "BgTab"
-          )
-          .map((vnode) => vnode.componentOptions.propsData);
-      }
-
-      return tabSlots;
-    },
-    changeActiveName({ name }, index) {
-      let targetEl = this.$el.querySelectorAll(`.bg-tab`)[index];
-      let targetCtx = document.querySelector(`.bg-main`);
-
-      targetCtx.scrollTop = targetEl && targetEl.offsetTop - 165;
-
-      this.activeName = name;
-      this.scrollCallback = () => {
-        this.activeName = name;
-      };
-    },
-    scrollAction() {
-      let targetCtx = document.querySelector(`.bg-main`);
-      let ctxScrollTop = targetCtx.scrollTop || 0;
-      let targetEls = this.$el.querySelectorAll(`.bg-tab`);
-      let tabs = this.calcTabs();
-
-      for (let i = 0; i < targetEls.length; i++) {
-        let targetEl = targetEls[i];
-
-        if (ctxScrollTop >= targetEl.offsetTop) {
-          this.activeName = tabs[i].name;
-        }
-      }
-
-      this.showFixedBars = ctxScrollTop > 222;
-      this.scrollCallback && this.scrollCallback();
-      this.scrollCallback = null;
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      let tabs = this.calcTabs();
-      this.activeName = tabs[0] && tabs[0].name;
-
-      this.scrollAction();
-      window.addEventListener("scroll", this.scrollAction, true);
-    });
-  },
-  destroyed() {
-    window.removeEventListener("scroll", this.scrollAction, true);
-  },
+<script setup>
+import { ref, provide, reactive, onBeforeMount, onMounted, onUnmounted, nextTick, toRefs, useSlots } from "vue";
+
+const slots = useSlots();
+
+const activeName = ref("");
+
+const bgDetail = ref(null);
+provide("getActiveName", activeName.value);
+
+provide("getIsTabs", false);
+
+const showFixedBars = ref(false);
+
+const state = reactive({
+  scrollCallback: null,
+});
+
+const calcTabs = () => {
+  let tabSlots = [];
+
+  if (slots.default()) {
+    tabSlots = slots
+      .default()
+      .filter((vnode) => vnode.tag && vnode.componentOptions && vnode.componentOptions.Ctor.options.name === "BgTab")
+      .map((vnode) => vnode.componentOptions.propsData);
+  }
+
+  return tabSlots;
 };
+const changeActiveName = ({ name }, index) => {
+  let targetEl = bgDetail.value.querySelectorAll(`.bg-tab`)[index];
+  let targetCtx = document.querySelector(`.bg-main`);
+
+  targetCtx.scrollTop = targetEl && targetEl.offsetTop - 165;
+
+  activeName.value = name;
+  state.scrollCallback = () => {
+    activeName.value = name;
+  };
+};
+const scrollAction = () => {
+  let targetCtx = document.querySelector(`.bg-main`);
+  let ctxScrollTop = targetCtx.scrollTop || 0;
+  let targetEls = bgDetail.value.querySelectorAll(`.bg-tab`);
+  let tabs = calcTabs();
+
+  for (let i = 0; i < targetEls.length; i++) {
+    let targetEl = targetEls[i];
+
+    if (ctxScrollTop >= targetEl.offsetTop) {
+      activeName.value = tabs[i].name;
+    }
+  }
+
+  showFixedBars.value = ctxScrollTop > 222;
+  state.scrollCallback && state.scrollCallback();
+  state.scrollCallback = null;
+};
+
+onMounted(() => {
+  nextTick().then(() => {
+    let tabs = calcTabs();
+    activeName.value = tabs[0] && tabs[0].name;
+    scrollAction();
+    window.addEventListener("scroll", scrollAction, true);
+  });
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", scrollAction, true);
+});
 </script>
diff --git a/src/bg-ui/bg-filter-date.vue b/src/bg-ui/bg-filter-date.vue
index 27421d7..f73061a 100644
--- a/src/bg-ui/bg-filter-date.vue
+++ b/src/bg-ui/bg-filter-date.vue
@@ -3,7 +3,7 @@
     <span class="bg-filtrate-text">{{ name }}：</span>
     <div class="bg-filtrate-list">
       <el-date-picker
-        v-model="value"
+        v-model="useTime"
         type="daterange"
         value-format="yyyy-MM-dd"
         range-separator="~"
@@ -15,31 +15,27 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgFilterDate",
-  model: {
-    prop: "time",
-    event: "change",
+<script setup>
+import { reactive, ref, onBeforeMount, toRefs, computed, watch } from "vue";
+const props = defineProps({
+  name: {
+    type: String,
+    default: "",
   },
-  props: {
-    name: {
-      type: String,
-      default: "",
-    },
+  time: {
+    type: String,
+    default: "",
   },
-  data() {
-    return {
-      value: ""
-    }
-  },
-  computed: {
-  
+});
+
+const emit = defineEmits(["update:time"]);
+
+const useTime = computed({
+  get() {
+    return props.time;
   },
-  methods: {
-    change(event) {
-       this.$emit("change", event);
-    },
+  set(value) {
+    emit("update:time", value);
   },
-};
-</script>
\ No newline at end of file
+});
+</script>
diff --git a/src/bg-ui/bg-filter-group.vue b/src/bg-ui/bg-filter-group.vue
index bd1b994..70afbd6 100644
--- a/src/bg-ui/bg-filter-group.vue
+++ b/src/bg-ui/bg-filter-group.vue
@@ -1,70 +1,84 @@
 <template>
-  <div class="bg-filter-group" :style="{'border-bottom': showFlag? 'none' : '','padding-bottom': showFlag? '8px':'16px'}">
+  <div
+    class="bg-filter-group"
+    :style="{ 'border-bottom': showFlag ? 'none' : '', 'padding-bottom': showFlag ? '8px' : '16px' }">
     <div class="top-filter">
       <div class="left-slot">
         <slot name="left_action"></slot>
       </div>
       <div class="right-filter">
-        <el-input v-if="showSearch" :placeholder="placeholder" @keydown.enter="search" @clear="search" clearable v-model.trim="value">
+        <el-input
+          v-if="showSearch"
+          :placeholder="placeholder"
+          @keydown.enter="search"
+          @clear="search"
+          clearable
+          v-model.trim="modelValue">
           <template #append>
             <div class="append-btn" @click="search">
-              <bg-icon style="font-size: 12px; color: #404a62; " icon="#bg-ic-search"></bg-icon>
+              <bg-icon style="font-size: 12px; color: #404a62" icon="#bg-ic-search"></bg-icon>
             </div>
           </template>
         </el-input>
-        <div class="more-btn" :class="showFlag ? 'more-btn1': ''" v-if="$slots.filter_group">
+        <div class="more-btn" :class="showFlag ? 'more-btn1' : ''" v-if="$slots.filter_group">
           <el-button type="default" class="more-filter" @click="moreFilter">
             高级搜索
-            <bg-icon style="font-size: 8px; color: #404a62; margin-left: 8px" icon="#bg-ic-arrow-down" v-if="!showFlag"></bg-icon>
+            <bg-icon
+              style="font-size: 8px; color: #404a62; margin-left: 8px"
+              icon="#bg-ic-arrow-down"
+              v-if="!showFlag"></bg-icon>
             <bg-icon style="font-size: 8px; color: #404a62; margin-left: 8px" icon="#bg-ic-arrow-up" v-else></bg-icon>
           </el-button>
         </div>
       </div>
     </div>
-    <div class="filter-group" v-if="showFlag">
+    <div class="filter-group" v-show="showFlag">
       <slot name="filter_group"></slot>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, reactive, toRefs, watch,ref } from "vue"
-  
+import { computed, onMounted, reactive, toRefs, watch, ref } from "vue";
+
 const state = reactive({
   showFlag: false,
-  value: ""
-})
+  modelValue: "",
+});
 
 const props = defineProps({
   modelValue: {
     type: String,
-    default: '',
+    default: "",
   },
   placeholder: {
     type: String,
-    default: "请输入关键词"
+    default: "请输入关键词",
   },
   showSearch: {
     type: Boolean,
-    default: true
-  }
-})
+    default: true,
+  },
+});
 
-watch(props,(n,o) => {
-  state.value = n.modelValue
-})
-watch(() => state.value,(n,o) => {
-  emit('update:modelValue',n)
-})
-const emit = defineEmits(['search','update:modelValue'])
+watch(props, (n, o) => {
+  state.modelValue = n.modelValue;
+});
+watch(
+  () => state.modelValue,
+  (n, o) => {
+    emit("update:modelValue", n);
+  }
+);
+const emit = defineEmits(["search", "update:modelValue"]);
 const search = () => {
-  emit('search',state.value)
-}
+  emit("search", state.modelValue);
+};
 const moreFilter = () => {
-  state.showFlag = !state.showFlag
-}
+  state.showFlag = !state.showFlag;
+};
 onMounted(() => {
-  state.value = props.modelValue
-})
-const { value,showFlag } = toRefs(state)
-</script>
\ No newline at end of file
+  state.modelValue = props.modelValue;
+});
+const { modelValue, showFlag } = toRefs(state);
+</script>
diff --git a/src/bg-ui/bg-filter.vue b/src/bg-ui/bg-filter.vue
index 699265a..4e9fd4f 100644
--- a/src/bg-ui/bg-filter.vue
+++ b/src/bg-ui/bg-filter.vue
@@ -7,91 +7,82 @@
         v-for="(item, index) in fullOptions"
         :class="{ current: selection.indexOf(item.value) > -1 }"
         :key="'li_' + index"
-        @click="selectAction(item)"
-      >
+        @click="selectAction(item)">
         {{ item.name }}
       </li>
     </ul>
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgFilter",
-  model: {
-    prop: "value",
-    event: "change",
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  modelValue: {
+    type: [Number, String],
+    default: "",
   },
-  props: {
-    isCalc:{
-      type:Boolean,
-      default:false,
-    },
-    value: {
-      type: [Number, String],
-      default: "",
-    },
-    name: {
-      type: String,
-      default: "",
-    },
-    options: {
-      type: Array,
-      default: () => [],
-    },
-    optionName: {
-      type: String,
-      default: "name",
-    },
-    optionValue: {
-      type: String,
-      default: "value",
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
+  isCalc: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    default: "",
+  },
+  options: {
+    type: Array,
+    default: () => [],
   },
-  computed: {
-    fullOptions() {
-      return [
-        {
-          name: "全部",
-          value: "",
-        },
-        ...this.options.map((item) => {
-          return {
-            name: item[this.optionName],
-            value: item[this.optionValue] + "",
-            sub_cate: item.sub_cate ? item.sub_cate : "",
-          };
-        }),
-      ];
+  optionName: {
+    type: String,
+    default: "name",
+  },
+  optionValue: {
+    type: String,
+    default: "value",
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:modelValue"]);
+const fullOptions = computed(() => {
+  return [
+    {
+      name: "全部",
+      value: "",
     },
-    selection() {
-      let value = this.value + "";
+    ...props.options.map((item) => {
+      return {
+        name: item[props.optionName],
+        value: item[props.optionValue] + "",
+        sub_cate: item.sub_cate ? item.sub_cate : "",
+      };
+    }),
+  ];
+});
 
-      return value.split(",");
-    },
-    
-  },
-  methods: {
-    selectAction({ value, name, sub_cate }) {
-      if (value && this.multiple) {
-        let selection = [...this.selection].filter((v) => v !== "");
-        let index = selection.findIndex((v) => v === value);
+const selection = computed(() => {
+  let value = props.modelValue + "";
 
-        if (index > -1) {
-          selection.splice(index, 1);
-        } else {
-          selection.push(value);
-        }
+  return value.split(",");
+});
 
-        this.$emit("change", selection.join(","));
-      } else {
-        this.$emit("change", value, name, sub_cate ? sub_cate : "");
-      }
-    },
-  },
+const selectAction = ({ value, name, sub_cate }) => {
+  if (value && props.multiple) {
+    let selection = [...props.selection].filter((v) => v !== "");
+    let index = selection.findIndex((v) => v === value);
+
+    if (index > -1) {
+      selection.splice(index, 1);
+    } else {
+      selection.push(value);
+    }
+
+    emit("update:modelValue", selection.join(","));
+  } else {
+    emit("update:modelValue", value, name, sub_cate ? sub_cate : "");
+  }
 };
 </script>
diff --git a/src/bg-ui/bg-filtrate.vue b/src/bg-ui/bg-filtrate.vue
index ac50c8d..ae06e23 100644
--- a/src/bg-ui/bg-filtrate.vue
+++ b/src/bg-ui/bg-filtrate.vue
@@ -6,85 +6,75 @@
         v-for="(item, index) in fullOptions"
         :class="{ current: selection.indexOf(item.value) > -1 }"
         :key="'li_' + index"
-        @click="selectAction(item)"
-      >
+        @click="selectAction(item)">
         {{ item.name }}
       </li>
     </ul>
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgFiltrate",
-  model: {
-    prop: "value",
-    event: "change",
+<script setup>
+import { computed } from "vue-demi";
+const props = defineProps({
+  modelValue: {
+    type: [Number, String],
+    default: "",
   },
-  props: {
-    value: {
-      type: [Number, String],
-      default: "",
-    },
-    name: {
-      type: String,
-      default: "",
-    },
-    options: {
-      type: Array,
-      default: () => [],
-    },
-    optionName: {
-      type: String,
-      default: "name",
-    },
-    optionValue: {
-      type: String,
-      default: "value",
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
+  name: {
+    type: String,
+    default: "",
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  optionName: {
+    type: String,
+    default: "name",
   },
-  computed: {
-    fullOptions() {
-      return [
-        {
-          name: "全部",
-          value: "",
-        },
-        ...this.options.map((item) => {
-          return {
-            name: item[this.optionName],
-            value: item[this.optionValue] + "",
-          };
-        }),
-      ];
+  optionValue: {
+    type: String,
+    default: "value",
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+});
+const fullOptions = computed(() => {
+  return [
+    {
+      name: "全部",
+      value: "",
     },
-    selection() {
-      let value = this.value + "";
+    ...props.options.map((item) => {
+      return {
+        name: item[props.optionName],
+        value: item[props.optionValue] + "",
+      };
+    }),
+  ];
+});
+const selection = computed(() => {
+  let value = props.modelValue + "";
 
-      return value.split(",");
-    },
-  },
-  methods: {
-    selectAction({ value, name }) {
-      if (value && this.multiple) {
-        let selection = [...this.selection].filter((v) => v !== "");
-        let index = selection.findIndex((v) => v === value);
+  return value.split(",");
+});
 
-        if (index > -1) {
-          selection.splice(index, 1);
-        } else {
-          selection.push(value);
-        }
+const selectAction = ({ value, name }) => {
+  if (value && props.multiple) {
+    let selection = [...props.selection].filter((v) => v !== "");
+    let index = selection.findIndex((v) => v === value);
 
-        this.$emit("change", selection.join(","));
-      } else {
-        this.$emit("change", value, name);
-      }
-    },
-  },
+    if (index > -1) {
+      selection.splice(index, 1);
+    } else {
+      selection.push(value);
+    }
+
+    emit("update:modelValue", selection.join(","));
+  } else {
+    emit("update:modelValue", value, name);
+  }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/bg-ui/bg-icon.vue b/src/bg-ui/bg-icon.vue
index 2ff2984..0a2ca40 100644
--- a/src/bg-ui/bg-icon.vue
+++ b/src/bg-ui/bg-icon.vue
@@ -4,15 +4,13 @@
   </svg>
 </template>
 
-<script>
-import "https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_19654_219.e913701ac6c36991a671b81b5a7654f2.js";
+<script setup>
+import "https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_19654_226.2578d57f3d5174aa1f23c90c15983cb6.js";
 
-export default {
-  props: {
-    icon: {
-      type: String,
-      default: "",
-    },
+const props = defineProps({
+  icon: {
+    type: String,
+    default: "",
   },
-};
-</script>
\ No newline at end of file
+});
+</script>
diff --git a/src/bg-ui/bg-info.vue b/src/bg-ui/bg-info.vue
index 738d54b..98db35d 100644
--- a/src/bg-ui/bg-info.vue
+++ b/src/bg-ui/bg-info.vue
@@ -6,161 +6,162 @@
         :key="'li_' + index"
         :style="{
           width: item.full ? `100%` : `calc(100% / ${col})`,
-        }"
-      >
-        <span :style="{ width: item.nameWidth ? item.nameWidth + 'px' : '50%'}">
+        }">
+        <span :style="{ width: item.nameWidth ? item.nameWidth + 'px' : '50%' }">
           {{ item.name }}
         </span>
-        <span :style="{ width: item.nameWidth ? `calc( 100% - ${item.nameWidth + 'px'})` : '50%'}">
-          <span 
-            style="display: inline-block;width: 100%;white-space: normal;word-break: break-all" 
+        <span :style="{ width: item.nameWidth ? `calc( 100% - ${item.nameWidth + 'px'})` : '50%' }">
+          <span
+            style="display: inline-block; width: 100%; white-space: normal; word-break: break-all"
             :style="{
-              width: item.copy ? 'calc(100% - 36px)' : item.download || item.password ? 'calc(100% - 22px)': '100%',
-              color: item.download ? '#3759be' : '#404a62'
-            }"
-          >
-          <span v-if="item.state" :style="{color: stateColor[item.state]}"> <span class="state-dot" :style="{backgroundColor: stateColor[item.state]}"></span>{{item.value}}</span>
-           <span v-else-if="item.secret">{{secret(item.value)}}</span>
-           <span v-else-if="item.idCard">{{idCardShow ? item.value : idcard(item.value)}}</span>
-           <span v-else-if="item.callback"  @click.stop="item.callback && item.callback()" class="can_click_text">{{item.value}}</span>
-          <span v-else>{{ item.value }}</span>
+              width: item.copy ? 'calc(100% - 36px)' : item.download || item.password ? 'calc(100% - 22px)' : '100%',
+              color: item.download ? '#3759be' : '#404a62',
+            }">
+            <span v-if="item.state" :style="{ color: stateColor[item.state] }">
+              <span class="state-dot" :style="{ backgroundColor: stateColor[item.state] }"></span>{{ item.value }}</span
+            >
+            <span v-else-if="item.secret">{{ secret(item.value) }}</span>
+            <span v-else-if="item.idCard">{{ idCardShow ? item.value : idcard(item.value) }}</span>
+            <span v-else-if="item.callback" @click.stop="item.callback && item.callback()" class="can_click_text">{{
+              item.value
+            }}</span>
+            <span v-else>{{ item.value }}</span>
           </span>
-          <a
+          <a class="copy-btn" @click="copyText(item.value, $event)" v-if="item.copy"> 复制 </a>
+          <bg-icon
+            v-if="item.copy_icon"
+            @click="copyIcon(item.value)"
             class="copy-btn"
-            @click="copyText(item.value, $event)"
-            v-if="item.copy"
-          >
-            复制
-          </a>
-          <bg-icon v-if="item.copy_icon" @click="copyIcon(item.value)" class="copy-btn" style="font-size: 14px; color: #a9b1c7;cursor: pointer;" icon="#bg-ic-copy"></bg-icon>
-          <bg-icon v-if="item.idCard" @click="idCardShow = !idCardShow" class="copy-btn" style="font-size: 14px; color: #a9b1c7;cursor: pointer;" icon="#bg-ic-eye"></bg-icon>
-          <bg-icon 
+            style="font-size: 14px; color: #a9b1c7; cursor: pointer"
+            icon="#bg-ic-copy"></bg-icon>
+          <bg-icon
+            v-if="item.idCard"
+            @click="idCardShow = !idCardShow"
             class="copy-btn"
-            style="font-size: 14px; color: #a9b1c7;cursor: pointer;" 
-            icon="#bg-ic-download" 
+            style="font-size: 14px; color: #a9b1c7; cursor: pointer"
+            icon="#bg-ic-eye"></bg-icon>
+          <bg-icon
+            class="copy-btn"
+            style="font-size: 14px; color: #a9b1c7; cursor: pointer"
+            icon="#bg-ic-download"
             v-if="item.download"
-            @click="download(item.url)"
-          ></bg-icon>
-          <bg-icon 
+            @click="download(item.url)"></bg-icon>
+          <bg-icon
             class="copy-btn"
-            style="font-size: 14px; color: #a9b1c7;cursor: pointer;" 
-            :icon="show ? '#bg-ic-eye-close' : '#bg-ic-eye'" 
+            style="font-size: 14px; color: #a9b1c7; cursor: pointer"
+            :icon="show ? '#bg-ic-eye-close' : '#bg-ic-eye'"
             v-if="item.password"
-            @click="changeView(item)"
-          ></bg-icon>
+            @click="changeView(item)"></bg-icon>
         </span>
       </li>
     </ul>
   </div>
 </template>
 
-<script>
+<script setup>
 import Clipboard from "clipboard";
-
-export default {
-  name: "BgInfo",
-  props: {
-    data: {
-      type: Array,
-      default: () => [],
-    },
-    col: {
-      type: Number,
-      default: 2,
-    },
+import { reactive, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  col: {
+    type: Number,
+    default: 2,
   },
-  model: {
-      prop: 'data',
-      event: 'newValue'
-    },
-  data() {
-    return {
-      show: false,
-      idCardShow: false,
-      stateColor: {
-        success: '#48ad97',
-        danger: '#d75138',
-        default: '#787878'
-      }
-    }
+});
+const state = reactive({
+  show: false,
+  idCardShow: false,
+  stateColor: {
+    success: "#48ad97",
+    danger: "#d75138",
+    default: "#787878",
   },
-  methods: {
-    clipboardSuccess() {
-      this.$message({
-        type: "success",
-        message: "复制成功",
-        duration: 1500,
-      });
-    },
-    clipboardError() {
-      this.$message({
-        message: "浏览器不支持自动复制",
-        type: "warning",
-      });
-    },
-    copyText(text, e) {
-      console.log(text)
-      console.log(e)
-      const clipboard = new Clipboard(e.target, {
-        text: () => text,
-      });
+});
 
-      clipboard.on("success", () => {
-        this.clipboardSuccess();
-        // 释放内存
-        clipboard.destroy();
-      });
+const clipboardSuccess = () => {
+  ElMessage({
+    type: "success",
+    message: "复制成功",
+    duration: 1500,
+  });
+};
 
-      clipboard.on("error", () => {
-        // 不支持复制
-        this.clipboardError();
-        // 释放内存
-        clipboard.destroy();
-      });
-      
-      // 解决第一次点击不生效的问题，如果没有，第一次点击会不生效
-      clipboard.onClick(e);
-    },
-    copyIcon(data) {
-      navigator.clipboard.writeText(data).then(
-        function () {
-        },
-        function () {
-          
-        }
-      );
-    },
-    download(url) {
-      const a = document.createElement("a"); // 创建a标签
-      a.setAttribute("download", ""); // download属性
-      a.setAttribute("href", url); // href链接
-      a.click(); // 自执行点击事件  
-    },
-    changeView(item) {
-      if (!this.show) {
-        item.value = item.realValue
-      }else {
-        item.value = "***************"
-      }
-      this.show = !this.show
-    },
-    secret(value) {
-      const len = value.length;
-      const str1 = value.substring(0,3);
-      const str2 = value.substring(value.length-6,value.length);
-      const passwordStr = value.substring(3,value.length-6).split('').map(item => '*').join('');
-      return str1+passwordStr+str2
-    },
-    idcard(value) {
-      const len = value.length;
-      const str1 = value.substring(0,3);
-      const str2 = value.substring(value.length-4,value.length);
-      const passwordStr = value.substring(3,value.length-4).split('').map(item => '*').join('');
-      return str1+passwordStr+str2
-    },
-    viewIdCard() {
+const clipboardError = () => {
+  ElMessage({
+    type: "warning",
+    message: "浏览器不支持自动复制",
+  });
+};
 
-    } 
-  },
+const copyText = (text, e) => {
+  const clipboard = new Clipboard(e.target, {
+    text: () => text,
+  });
+
+  clipboard.on("success", () => {
+    clipboardSuccess();
+    // 释放内存
+    clipboard.destroy();
+  });
+
+  clipboard.on("error", () => {
+    // 不支持复制
+    clipboardError();
+    // 释放内存
+    clipboard.destroy();
+  });
+
+  // 解决第一次点击不生效的问题，如果没有，第一次点击会不生效
+  clipboard.onClick(e);
+};
+
+const copyIcon = (data) => {
+  navigator.clipboard.writeText(data).then(
+    function () {},
+    function () {}
+  );
+};
+
+const download = (url) => {
+  const a = document.createElement("a"); // 创建a标签
+  a.setAttribute("download", ""); // download属性
+  a.setAttribute("href", url); // href链接
+  a.click(); // 自执行点击事件
+};
+const changeView = (item) => {
+  if (!state.show) {
+    item.value = item.realValue;
+  } else {
+    item.value = "***************";
+  }
+  state.show = !state.show;
+};
+
+const secret = (value) => {
+  const len = value.length;
+  const str1 = value.substring(0, 3);
+  const str2 = value.substring(value.length - 6, value.length);
+  const passwordStr = value
+    .substring(3, value.length - 6)
+    .split("")
+    .map((item) => "*")
+    .join("");
+  return str1 + passwordStr + str2;
+};
+const idcard = (value) => {
+  const len = value.length;
+  const str1 = value.substring(0, 3);
+  const str2 = value.substring(value.length - 4, value.length);
+  const passwordStr = value
+    .substring(3, value.length - 4)
+    .split("")
+    .map((item) => "*")
+    .join("");
+  return str1 + passwordStr + str2;
 };
+const { show, idCardShow, stateColor } = toRefs(state);
 </script>
diff --git a/src/bg-ui/bg-inner-tabs.vue b/src/bg-ui/bg-inner-tabs.vue
index 2726a63..c17e1dc 100644
--- a/src/bg-ui/bg-inner-tabs.vue
+++ b/src/bg-ui/bg-inner-tabs.vue
@@ -1,64 +1,71 @@
 <template>
-    <div class="inner-container" :style="{height:height[0]+'px',fontSize:height[2]+'px'}">
-        <div :style="{height:height[1]+'px',lineHeight:height[1]-2+'px'}" :class="{'now-inner':nowIndex==index}" @click="changeInner(index)" v-for="(item,index) in data" :key="'inner'+index">{{item}}</div>
+  <div class="inner-container" :style="{ height: height[0] + 'px', fontSize: height[2] + 'px' }">
+    <div
+      :style="{ height: height[1] + 'px', lineHeight: height[1] - 2 + 'px' }"
+      :class="{ 'now-inner': nowIndex == index }"
+      @click="changeInner(index)"
+      v-for="(item, index) in data"
+      :key="'inner' + index">
+      {{ item }}
     </div>
+  </div>
 </template>
 
 <script setup>
-import { reactive, ref,onBeforeMount,toRefs  } from 'vue'
+import { reactive, ref, onBeforeMount, toRefs } from "vue";
 const props = defineProps({
-  modelValue:{
-    type: [String,Number],
+  modelValue: {
+    type: [String, Number],
     default: 0,
   },
   data: {
     type: Array,
     default: [],
   },
-  default:{
-    type: [String,Number],
-    default: 0
+  default: {
+    type: [String, Number],
+    default: 0,
+  },
+  height: {
+    type: Array,
+    default: [36, 32, 16],
   },
-  height:{
-    type:Array,
-    default:[36,32,16]
-  }
-})
-const emit = defineEmits(['update:modelValue','change'])
+});
+const emit = defineEmits(["update:modelValue", "change"]);
 
-const nowIndex = ref('')
+const nowIndex = ref("");
 
-const changeInner = (val)=>{
-    nowIndex.value = val
-    emit('update:modelValue',val)
-    emit('change',val)
-}
+const changeInner = (val) => {
+  nowIndex.value = val;
+  emit("update:modelValue", val);
+  emit("change", val);
+};
 
-onBeforeMount(()=>{
-    nowIndex.value = props.default
-})
+onBeforeMount(() => {
+  nowIndex.value = props.default;
+});
 </script>
 
 <style scoped>
-.inner-container{
-    height: 36px;
-	background-color: #edeef0;
-	border-radius: 4px;
-    padding: 2px;
-    display: inline-block;
-    overflow: hidden;
+.inner-container {
+  height: 36px;
+  background-color: #edeef0;
+  border-radius: 4px;
+  padding: 2px;
+  display: inline-block;
+  overflow: hidden;
 }
-.inner-container div{
-    height: 32px;
-    line-height: 30px;
-	border-radius: 4px;
-    padding:0 15px;
-    float: left;
-    color: #404a62;
-    cursor: pointer;
+.inner-container div {
+  height: 32px;
+  line-height: 30px;
+  border-radius: 4px;
+  padding: 0 15px;
+  float: left;
+  color: #404a62;
+  cursor: pointer;
 }
-.inner-container .now-inner{
-    background-color: #2b4695;
-    color: #ffffff;
+.inner-container .now-inner {
+  background-color: #2b4695;
+  color: #ffffff;
 }
 </style>
diff --git a/src/bg-ui/bg-layout-card.vue b/src/bg-ui/bg-layout-card.vue
index 7e545d9..b2e4518 100644
--- a/src/bg-ui/bg-layout-card.vue
+++ b/src/bg-ui/bg-layout-card.vue
@@ -7,8 +7,7 @@
           v-for="(item, index) in btns"
           :key="item"
           :class="{ current: index === btn }"
-          @click="$emit('update:btn', index)"
-        >
+          @click="$emit('update:btn', index)">
           {{ item }}
         </li>
       </ul>
@@ -17,8 +16,7 @@
         @click="downloadAction"
         v-loading="downloading"
         element-loading-spinner="el-icon-loading"
-        v-if="download"
-      >
+        v-if="download">
         <img src="./imgs/btn_daochu.png" />
       </div>
     </div>
@@ -28,87 +26,82 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { reactive, ref, onBeforeMount, toRefs, computed, nextTick } from "vue";
 import html2canvas from "html2canvas";
 
-export default {
-  name: "BgLayoutCard",
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    width: {
-      type: String,
-      default: "25%",
-    },
-    height: {
-      type: String,
-      default: "278px",
-    },
-    btn: {
-      type: Number,
-      default: 0,
-    },
-    btns: {
-      type: Array,
-      default: () => [],
-    },
-    download: {
-      type: Boolean,
-      default: false,
-    },
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
   },
-  computed: {
-    style() {
-      return {
-        width: `calc(${this.width} - 20px)`,
-        height: this.height,
-      };
-    },
+  width: {
+    type: String,
+    default: "25%",
   },
-  data() {
-    return {
-      downloading: false,
-    };
+  height: {
+    type: String,
+    default: "278px",
   },
-  methods: {
-    getScrollTop() {
-      let scrollTop = 0;
+  btn: {
+    type: Number,
+    default: 0,
+  },
+  btns: {
+    type: Array,
+    default: () => [],
+  },
+  download: {
+    type: Boolean,
+    default: false,
+  },
+});
 
-      if (document.documentElement && document.documentElement.scrollTop) {
-        scrollTop = document.documentElement.scrollTop;
-      } else if (document.body) {
-        scrollTop = document.body.scrollTop;
-      }
+const style = computed(() => {
+  return {
+    width: `calc(${props.width} - 20px)`,
+    height: props.height,
+  };
+});
 
-      return scrollTop;
-    },
-    downloadAction() {
-      if (this.downloading) {
-        return;
-      }
+const downloading = ref(false);
 
-      let content = this.$refs.content;
-      let { top, left } = content.getBoundingClientRect();
-      let scrollTop = this.getScrollTop();
+const content = ref(null);
 
-      this.downloading = true;
+const getScrollTop = () => {
+  let scrollTop = 0;
 
-      html2canvas(content, { x: left, y: top + scrollTop }).then((canvas) => {
-        let imgUrl = canvas.toDataURL("image/png");
-        let a = document.createElement("a"); // 生成一个a元素
-        let event = new MouseEvent("click"); // 创建一个单击事件
+  if (document.documentElement && document.documentElement.scrollTop) {
+    scrollTop = document.documentElement.scrollTop;
+  } else if (document.body) {
+    scrollTop = document.body.scrollTop;
+  }
 
-        this.$nextTick(() => {
-          a.download = this.title; // 设置图片名称
-          a.href = imgUrl; // 将生成的URL设置为a.href属性
-          a.dispatchEvent(event); // 触发a的单击事件
+  return scrollTop;
+};
 
-          this.downloading = false;
-        });
-      });
-    },
-  },
+const downloadAction = () => {
+  if (downloading.value) {
+    return;
+  }
+
+  let { top, left } = content.value.getBoundingClientRect();
+  let scrollTop = getScrollTop();
+
+  downloading.value = true;
+
+  html2canvas(content.value, { x: left, y: top + scrollTop }).then((canvas) => {
+    let imgUrl = canvas.toDataURL("image/png");
+    let a = document.createElement("a"); // 生成一个a元素
+    let event = new MouseEvent("click"); // 创建一个单击事件
+
+    nextTick().then(() => {
+      a.download = props.title; // 设置图片名称
+      a.href = imgUrl; // 将生成的URL设置为a.href属性
+      a.dispatchEvent(event); // 触发a的单击事件
+
+      downloading.value = false;
+    });
+  });
 };
 </script>
diff --git a/src/bg-ui/bg-list.vue b/src/bg-ui/bg-list.vue
index f896beb..6ce311d 100644
--- a/src/bg-ui/bg-list.vue
+++ b/src/bg-ui/bg-list.vue
@@ -30,10 +30,7 @@
           <slot name="filter" />
         </div>
       </div>
-      <div
-        class="filter-content"
-        :class="{ 'inline-filters': inlineFilters, 'show-more': visible }"
-      >
+      <div class="filter-content" :class="{ 'inline-filters': inlineFilters, 'show-more': visible }">
         <div class="filter-list">
           <slot name="filters" />
         </div>
@@ -41,12 +38,8 @@
           <div class="filters-right" v-if="$slots['filters-right']">
             <slot name="filters-right" />
           </div>
-          <el-button type="primary2" @click="$emit('search-action')">
-            查询
-          </el-button>
-          <el-button type="default2" @click="$emit('search-reset')">
-            重置
-          </el-button>
+          <el-button type="primary2" @click="$emit('search-action')"> 查询 </el-button>
+          <el-button type="default2" @click="$emit('search-reset')"> 重置 </el-button>
         </div>
       </div>
     </div>
@@ -73,22 +66,19 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgList",
-  props: {
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    noMoreFilters: {
-      type: Boolean,
-      default: false,
-    },
-    inlineFilters: {
-      type: Boolean,
-      default: false,
-    },
+<script setup>
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  noMoreFilters: {
+    type: Boolean,
+    default: false,
+  },
+  inlineFilters: {
+    type: Boolean,
+    default: false,
   },
-};
+});
 </script>
diff --git a/src/bg-ui/bg-nav-list.vue b/src/bg-ui/bg-nav-list.vue
index 97ff048..e487a06 100644
--- a/src/bg-ui/bg-nav-list.vue
+++ b/src/bg-ui/bg-nav-list.vue
@@ -1,18 +1,23 @@
 <template>
-  <ul class="nav-list" v-if="list&&list.length">
-    <li v-for="(item, index) in list" v-show="item.menuType!==2" :key="'nav_' + index">
-      <template v-if="item.children && item.children.length&&item.menuType==0">
+  <ul class="nav-list" v-if="list && list.length">
+    <li v-for="(item, index) in list" v-show="item.menuType !== 2" :key="'nav_' + index">
+      <template v-if="item.children && item.children.length && item.menuType == 0">
         <div
           class="nav-item nav-more text-clip"
           :class="{ current: isCurrent([item.path]) }"
-          @click="showMoreAction(index)"
-        >
-          <span :style="{ paddingLeft: `${deep*2}em` }">
+          @click="showMoreAction(index)">
+          <span :style="{ paddingLeft: `${deep * 2}em` }">
             <!-- <img v-if="item.icon" :src="item.icon" alt=""> -->
-            <bg-icon v-if="item.icon" style="color:#7c8292;" :icon="'#'+item.icon"></bg-icon>
+            <bg-icon v-if="item.icon" style="color: #7c8292" :icon="'#' + item.icon"></bg-icon>
             {{ item.menuName }}
-            <bg-icon v-show="showMore[index] !== false" style="font-size:8px;position: absolute;right: 10px;top: 20px;" icon="#bg-ic-arrow-up"></bg-icon>
-            <bg-icon v-show="showMore[index] == false" style="font-size:8px;position: absolute;right: 10px;top: 20px;" icon="#bg-ic-arrow-down"></bg-icon>
+            <bg-icon
+              v-show="showMore[index] !== false"
+              style="font-size: 8px; position: absolute; right: 10px; top: 20px"
+              icon="#bg-ic-arrow-up"></bg-icon>
+            <bg-icon
+              v-show="showMore[index] == false"
+              style="font-size: 8px; position: absolute; right: 10px; top: 20px"
+              icon="#bg-ic-arrow-down"></bg-icon>
           </span>
           &ensp;
         </div>
@@ -21,18 +26,20 @@
             :list="item.children"
             :deep="deep + 1"
             :highlight-parent-rule="highlightParentRule"
-            v-if="showMore[index] !== false"
-          />
+            v-if="showMore[index] !== false" />
         </transition>
       </template>
       <template v-else>
         <div
           class="nav-item text-clip"
-          :class="{current:isCurrent(item.children&&item.children.length?[...getChildrenPath(item.children),item.path]:[item.path])}"
-          @click="$router.push(item.path)"
-        >
-          <span :style="{ paddingLeft: item.icon ? `${deep*2 - 1.37}em` :`${deep*2}em` }">
-            <bg-icon v-if="item.icon" style="color:#7c8292;" :icon="'#'+item.icon"></bg-icon>
+          :class="{
+            current: isCurrent(
+              item.children && item.children.length ? [...getChildrenPath(item.children), item.path] : [item.path]
+            ),
+          }"
+          @click="$router.push(item.path)">
+          <span :style="{ paddingLeft: item.icon ? `${deep * 2 - 1.37}em` : `${deep * 2}em` }">
+            <bg-icon v-if="item.icon" style="color: #7c8292" :icon="'#' + item.icon"></bg-icon>
             {{ item.menuName }}
           </span>
         </div>
@@ -44,48 +51,46 @@
 <script>
 export default {
   name: "NavList",
-  props: {
-    list: {
-      type: Array,
-      required: true,
-    }, // 导航列表 [ { name: "xxx", path: "xxx" } ]
-    deep: {
-      type: Number,
-      default: 0,
-    },
-    highlightParentRule: {
-      type: Function,
-    },
+};
+</script>
+<script setup>
+import { reactive } from "vue";
+const props = defineProps({
+  list: {
+    type: Array,
+    required: true,
+  }, // 导航列表 [ { name: "xxx", path: "xxx" } ]
+  deep: {
+    type: Number,
+    default: 0,
   },
-  data() {
-    return {
-      showMore: {},
-    };
+  highlightParentRule: {
+    type: Function,
   },
-  methods: {
-    showMoreAction(index) {
-      let flag = this.showMore[index];
+});
 
-      if (flag === undefined) {
-        flag = true;
-      }
+const showMore = reactive({});
 
-      this.showMore[index] = !flag
-    },
-    getChildrenPath(arr,temp=[]){
-      arr.forEach(e => {
-        temp.push(e.path)
-        if(e.children&&e.children.length){
-          this.getChildrenPath(e.children,temp)
-        }
-      });
-      return temp
-    },
-    isCurrent(path) {
-      return (
-        (this.highlightParentRule && this.highlightParentRule(path)) || false
-      );
-    },
-  },
+const showMoreAction = (index) => {
+  let flag = showMore[index];
+  if (flag === undefined) {
+    flag = true;
+  }
+
+  showMore[index] = !flag;
+};
+
+const getChildrenPath = (arr, temp = []) => {
+  arr.forEach((e) => {
+    temp.push(e);
+    if (e.children && e.children.length) {
+      getChildrenPath(e.children, temp);
+    }
+  });
+  return temp;
+};
+
+const isCurrent = (path) => {
+  return (props.highlightParentRule && props.highlightParentRule(path)) || false;
 };
 </script>
diff --git a/src/bg-ui/bg-nav.vue b/src/bg-ui/bg-nav.vue
index e23ba78..8cfb342 100644
--- a/src/bg-ui/bg-nav.vue
+++ b/src/bg-ui/bg-nav.vue
@@ -9,30 +9,24 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import NavList from "./bg-nav-list.vue";
 
-export default {
-  name: "BgNav",
-  components: {
-    NavList,
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
   },
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    width: {
-      type: String,
-      default: "184px",
-    }, // 宽度
-    list: {
-      type: Array,
-      required: true,
-    }, // 导航列表 [ { name: "xxx", path: "xxx" } ]
-    highlightParentRule: {
-      type: Function,
-    },
+  width: {
+    type: String,
+    default: "184px",
+  }, // 宽度
+  list: {
+    type: Array,
+    required: true,
+  }, // 导航列表 [ { name: "xxx", path: "xxx" } ]
+  highlightParentRule: {
+    type: Function,
   },
-};
+});
 </script>
diff --git a/src/bg-ui/bg-pagination.vue b/src/bg-ui/bg-pagination.vue
index 6a32325..8abad5f 100644
--- a/src/bg-ui/bg-pagination.vue
+++ b/src/bg-ui/bg-pagination.vue
@@ -10,8 +10,7 @@
       @size-change="changeSize"
       @current-change="changePage"
       :background="background"
-      :disabled="disabled"
-    />
+      :disabled="disabled" />
   </div>
 </template>
 
@@ -19,11 +18,11 @@
 const props = defineProps({
   small: {
     type: Boolean,
-    default: () => false
+    default: () => false,
   },
   page: {
     type: Number,
-    default: 1
+    default: 1,
   },
   size: {
     type: Number,
@@ -31,32 +30,32 @@ const props = defineProps({
   },
   pageSizes: {
     type: Array,
-    default: [10,50,100]
+    default: [10, 50, 100],
   },
   total: {
     type: Number,
-    default: 0
+    default: 0,
   },
   layout: {
     type: String,
-    default: "total, sizes, prev, pager, next, jumper"
+    default: "total, sizes, prev, pager, next, jumper",
   },
   background: {
     type: Boolean,
-    default: false
+    default: false,
   },
   disabled: {
     type: Boolean,
-    default: false
-  }
-})
-const emit = defineEmits(['change-page','change-size'])
+    default: false,
+  },
+});
+const emit = defineEmits(["change-page", "change-size"]);
 
 const changePage = (val) => {
-  emit("change-page",val)
-}
+  emit("change-page", val);
+};
 
 const changeSize = (val) => {
-  emit("change-size",val)
-}
+  emit("change-size", val);
+};
 </script>
diff --git a/src/bg-ui/bg-permission-option.vue b/src/bg-ui/bg-permission-option.vue
index 6f84284..4257367 100644
--- a/src/bg-ui/bg-permission-option.vue
+++ b/src/bg-ui/bg-permission-option.vue
@@ -4,24 +4,18 @@
       class="bg-permission-option--self"
       :class="{
         'full-option': !(option.children && option.children.length > 0),
-      }"
-    >
-      <el-checkbox
-        v-model="option.isSelected"
-        :indeterminate="option.isIndeterminate"
-        @change="changeSelf"
-      >
+      }">
+      <el-checkbox v-model="option.isSelected" :indeterminate="option.isIndeterminate" @change="changeSelf">
         <span :title="option.name + (option.remark ? `(${option.remark})` : '')">
           {{ option.name }}
-          {{option.remark ? `(${option.remark})` : ""}}
+          {{ option.remark ? `(${option.remark})` : "" }}
         </span>
       </el-checkbox>
     </div>
     <div
       class="bg-permission-option--list"
       :class="{ 'flex-wrap': deep === depth - 1 }"
-      v-if="option.children && option.children.length > 0"
-    >
+      v-if="option.children && option.children.length > 0">
       <BgPermissionOption
         v-for="(item, index) in option.children"
         :ref="`child${index}`"
@@ -29,71 +23,66 @@
         :key="`opt_${index}`"
         :deep="deep + 1"
         :depth="depth"
-        @change="changeChild"
-      />
+        @change="changeChild" />
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgPermissionOption",
-  props: {
-    option: {
-      type: Object,
-      require: true,
-    }, // 数据项
-    depth: {
-      type: Number,
-      default: 0,
-    },
-    deep: {
-      type: Number,
-      default: 1,
-    },
+<script setup>
+import { nextTick } from "vue";
+const props = defineProps({
+  option: {
+    type: Object,
+    require: true,
+  }, // 数据项
+  depth: {
+    type: Number,
+    default: 0,
   },
-  methods: {
-    changeSelf() {
-      let isSelected = this.option.isSelected;
-      let children = this.option.children || [];
-
-      // 将自己的选中状态赋值给子级
-      if (children.length > 0) {
-        children.forEach((v, i) => {
-          v.isSelected = isSelected;
-
-          this.$nextTick(() => {
-            this.$refs[`child${i}`][0].changeSelf();
-          });
-        });
-      }
-
-      // 关于自己选中都是全选和不选，所以不存在半选状态
-      this.option.isIndeterminate = false;
-
-      // 修改完自己和自己子级，告诉父级更新
-      this.$emit("change");
-    }, // 本级选中状态发生变化
-    changeChild() {
-      let isSelected = true;
-      let isIndeterminate = false;
-      let children = this.option.children;
+  deep: {
+    type: Number,
+    default: 1,
+  },
+});
 
-      children.forEach((v, i) => {
-        isSelected = isSelected && v.isSelected; // 所有子级都为选中时，自己才为选中状态
-        isIndeterminate = isIndeterminate || v.isIndeterminate || v.isSelected; // 只要有下级为半选状态或选中状态，自己就为半选状态
-      });
+const dealData = (arr, flag) => {
+  arr.forEach((e) => {
+    e.isSelected = flag;
+    if (e.children && e.children.length) {
+      dealData(e.children, flag);
+    }
+  });
+};
+const emit = defineEmits(["change"]);
 
-      // 自己为全选状态时，半选不生效
-      isIndeterminate = isSelected ? false : isIndeterminate;
+const changeSelf = () => {
+  let isSelected = props.option.isSelected;
+  let children = props.option.children || [];
 
-      // 赋值
-      this.option.isSelected = isSelected;
-      this.option.isIndeterminate = isIndeterminate;
+  // 将自己的选中状态赋值给子级
+  if (children.length > 0) {
+    dealData(children, isSelected);
+  }
+  // 关于自己选中都是全选和不选，所以不存在半选状态
+  props.option.isIndeterminate = false;
+  // 修改完自己和自己子级，告诉父级更新
+  emit("change");
+};
 
-      // 修改完自己和自己子级，告诉父级更新
-      this.$emit("change");
-    }, // 下级选中状态发生变化
-  },
+const changeChild = () => {
+  let isSelected = true;
+  let isIndeterminate = false;
+  let children = props.option.children;
+  children.forEach((v, i) => {
+    isSelected = isSelected && v.isSelected; // 所有子级都为选中时，自己才为选中状态
+    isIndeterminate = isIndeterminate || v.isIndeterminate || v.isSelected; // 只要有下级为半选状态或选中状态，自己就为半选状态
+  });
+  // 自己为全选状态时，半选不生效
+  isIndeterminate = isSelected ? false : isIndeterminate;
+  // 赋值
+  props.option.isSelected = isSelected;
+  props.option.isIndeterminate = isIndeterminate;
+  // 修改完自己和自己子级，告诉父级更新
+  emit("change");
 };
 </script>
diff --git a/src/bg-ui/bg-permission.vue b/src/bg-ui/bg-permission.vue
index 7b20194..3a5283b 100644
--- a/src/bg-ui/bg-permission.vue
+++ b/src/bg-ui/bg-permission.vue
@@ -1,13 +1,7 @@
 <template>
   <div class="bg-permission">
     <div class="permission-header" v-if="selectAll">
-      <el-checkbox
-        v-model="isSelected"
-        :indeterminate="isIndeterminate"
-        @change="changeSelf"
-      >
-        全选
-      </el-checkbox>
+      <el-checkbox v-model="isSelected" :indeterminate="isIndeterminate" @change="changeSelf"> 全选 </el-checkbox>
     </div>
     <div class="permission-null" v-if="permissionData.length === 0">
       <p>暂无数据</p>
@@ -20,215 +14,184 @@
         :key="`opt_${index}`"
         :props="props"
         :depth="depth"
-        @change="changeChild"
-      />
+        @change="changeChild" />
     </div>
   </div>
 </template>
 
-<script>
-import { val } from "dom7";
+<script setup>
+import { computed, reactive, toRefs, watch, nextTick, onMounted } from "vue";
 import BgPermissionOption from "./bg-permission-option.vue";
 
-export default {
-  name: "BgPermission",
-  components: {
-    BgPermissionOption,
-  },
-  model: {
-    prop: "values",
-    event: "change",
-  },
+const props = defineProps({
+  values: {
+    type: Array,
+    default: () => [],
+  }, // 选中的值
+  options: {
+    type: Array,
+    default: () => [],
+  }, // 菜单项
   props: {
-    values: {
-      type: Array,
-      default: () => [],
-    }, // 选中的值
-    options: {
-      type: Array,
-      default: () => [],
-    }, // 菜单项
-    props: {
-      type: Object,
-      default: () => ({
-        name: "name",
-        value: "value",
-        children: "children",
-      }),
-    }, // 配置项（节点的一些字段）
-    selectAll: {
-      type: Boolean,
-      default: true,
-    }, // 是否在顶部显示全选按钮
-  },
-  data() {
-    return {
-      initFlag: true, // 是否需要初始化
-      permissionData: [], // 数据项
-      isSelected: false, // 是否全选
-      isIndeterminate: false, // 是否半选
-    };
-  },
-  computed: {
-    depth() {
-      return this.getDepth({ children: this.permissionData });
-    }, // 数据层级深度
-  },
-  watch: {
-    values: {
-      handler() {
-        if (this.initFlag) {
-          this.initPermissionData();
-        }
-
-        this.initFlag = true;
-      },
-      deep: true,
-    },
-    options: {
-      handler() {
-        this.initPermissionData();
-      },
-      deep: true,
-    },
-  },
-  methods: {
-    initPermissionData() {
-      let {
-        name: nameProp,
-        value: valueProp,
-        children: childrenProp,
-        remark: remarkProp,
-      } = this.props;
-      let permissionData = [];
-      let traverseOptions = (item) => {
-        let result = {};
-        let name = item[nameProp];
-        let value = item[valueProp];
-        let children = item[childrenProp];
-        let isSelected = this.values.indexOf(value) > -1;
-        let isIndeterminate = false;
-        let remark = item[remarkProp];
-
-        result.name = name;
-        result.value = value;
-        result.remark = remark;
-
-        if (children && children.length > 0) {
-          
-          result.children = [];
-          isSelected = true; // 如果存在子节点，则根据子节点反推当前节点选中状态
-          isIndeterminate = false; // 当前节点半选状态
-          children.forEach((v) => {
-            result.children.push(traverseOptions(v));
-          });
-
-          result.children.forEach((v) => {
-            isSelected = isSelected && v.isSelected; // 所有子节点都为选中状态，则当前节点选中状态为真
-            isIndeterminate = isIndeterminate || v.isSelected || v.isIndeterminate; // 所有下级节点只要存在一个选中状态，则当前节点半选状态为真
-          });
-          
-        }
-
-        result.isSelected = isSelected;
-        result.isIndeterminate = isSelected ? false : isIndeterminate; // 当前节点选中状态为真时，半选为假
-
-        return result;
-      };
-
-      this.options.forEach((v) => {
-        permissionData.push(traverseOptions(v));
+    type: Object,
+    default: () => ({
+      name: "name",
+      value: "value",
+      children: "children",
+    }),
+  }, // 配置项（节点的一些字段）
+  selectAll: {
+    type: Boolean,
+    default: true,
+  }, // 是否在顶部显示全选按钮
+});
+
+const state = reactive({
+  initFlag: true, // 是否需要初始化
+  permissionData: [], // 数据项
+  isSelected: false, // 是否全选
+  isIndeterminate: false, // 是否半选
+});
+
+const emit = defineEmits(["changeMenu"]);
+
+const depth = computed(() => {
+  return getDepth({ children: state.permissionData });
+});
+
+watch(
+  () => props.values,
+  () => {
+    if (state.initFlag) {
+      initPermissionData();
+    }
+    state.initFlag = true;
+  }
+);
+
+watch(
+  () => props.options,
+  () => {
+    initPermissionData();
+  }
+);
+
+const getDepth = (node) => {
+  if (!node.children || node.children.length === 0) {
+    return 1;
+  }
+
+  let maxChildrenDepth = [...node.children].map((v) => getDepth(v));
+
+  return Math.max(...maxChildrenDepth) + 1;
+}; // 获取JsonTree深度
+
+const initPermissionData = () => {
+  let { name: nameProp, value: valueProp, children: childrenProp, remark: remarkProp } = props.props;
+  let permissionData = [];
+  let traverseOptions = (item) => {
+    let result = {};
+    let name = item[nameProp];
+    let value = item[valueProp];
+    let children = item[childrenProp];
+    let isSelected = props.values.indexOf(value) > -1;
+    let isIndeterminate = false;
+    let remark = item[remarkProp];
+    result.name = name;
+    result.value = value;
+    result.remark = remark;
+    if (children && children.length > 0) {
+      result.children = [];
+      isSelected = true; // 如果存在子节点，则根据子节点反推当前节点选中状态
+      isIndeterminate = false; // 当前节点半选状态
+      children.forEach((v) => {
+        result.children.push(traverseOptions(v));
       });
-      this.permissionData = permissionData;
-
-      // 初始化完数据项后要更新一下全选半选状态
-      if (permissionData.length > 0) {
-        this.$nextTick(() => {
-          this.changeChild();
-        });
-      }
-    }, // 初始化数据项
-    getDepth(node) {
-      if (!node.children || node.children.length === 0) {
-        return 1;
-      }
-
-      let maxChildrenDepth = [...node.children].map((v) => this.getDepth(v));
-
-      return Math.max(...maxChildrenDepth) + 1;
-    }, // 获取JsonTree深度
-    changeSelf() {
-      let isSelected = this.isSelected;
-      let children = this.permissionData || [];
-
-      // 将自己的选中状态赋值给子级
-      if (children.length > 0) {
-        children.forEach((v, i) => {
-          v.isSelected = isSelected;
-
-          this.$nextTick(() => {
-            this.$refs[`child${i}`][0].changeSelf();
-          });
-        });
-      }
-
-      // 关于自己选中都是全选和不选，所以不存在半选状态
-      this.isIndeterminate = false;
-
-      // 出发双向绑定事件
-      this.changeValues();
-    }, // 改变全选状态
-    changeChild() {
-      let isSelected = true;
-      let isIndeterminate = false;
-      let children = this.permissionData;
-
-      children.forEach((v, i) => {
-        isSelected = isSelected && v.isSelected; // 所有子级都为选中时，自己才为选中状态
-        isIndeterminate = isIndeterminate || v.isIndeterminate || v.isSelected; // 只要有下级为半选状态，自己就为半选状态
+      result.children.forEach((v) => {
+        isSelected = isSelected && v.isSelected; // 所有子节点都为选中状态，则当前节点选中状态为真
+        isIndeterminate = isIndeterminate || v.isSelected || v.isIndeterminate; // 所有下级节点只要存在一个选中状态，则当前节点半选状态为真
       });
+    }
+    result.isSelected = isSelected;
+    result.isIndeterminate = isSelected ? false : isIndeterminate; // 当前节点选中状态为真时，半选为假
+    return result;
+  };
+  props.options.forEach((v) => {
+    permissionData.push(traverseOptions(v));
+  });
+  state.permissionData = permissionData;
+  // 初始化完数据项后要更新一下全选半选状态
+  if (permissionData.length > 0) {
+    nextTick(() => {
+      changeChild();
+    });
+  }
+}; // 初始化数据项
+
+const dealData = (arr, flag) => {
+  arr.forEach((e) => {
+    e.isSelected = !!flag;
+    if (e.children && e.children.length) {
+      dealData(e.children, flag);
+    }
+  });
+};
 
-      // 自己为全选状态时，半选不生效
-      isIndeterminate = isSelected ? false : isIndeterminate;
-
-      // 赋值
-      this.isSelected = isSelected;
-      this.isIndeterminate = isIndeterminate;
-
-      // 出发双向绑定事件
-      this.changeValues();
-    }, // 下级选中状态发生变化
-    changeValues() {
-      let values = [];
-      let traverseOptions = ({
-        isSelected,
-        isIndeterminate,
-        value,
-        children,
-      }) => {
-        if (isSelected) {
-          values.push(value);
-        }
-        if (isIndeterminate) {
-          values.push(value);
-        }
-
-        if (children && children.length > 0) {
-          children.forEach((v) => {
-            traverseOptions(v);
-          });
-        }
-      };
-
-      this.permissionData.forEach((v) => {
+const changeSelf = () => {
+  let isSelected = state.isSelected;
+  let children = state.permissionData || [];
+  // 将自己的选中状态赋值给子级
+  if (children.length > 0) {
+    dealData(children, isSelected);
+  }
+  // 关于自己选中都是全选和不选，所以不存在半选状态
+  state.isIndeterminate = false;
+  // 出发双向绑定事件
+  changeValues();
+}; // 改变全选状态
+const changeChild = () => {
+  let isSelected = true;
+  let isIndeterminate = false;
+  let children = state.permissionData;
+  children.forEach((v, i) => {
+    isSelected = isSelected && v.isSelected; // 所有子级都为选中时，自己才为选中状态
+    isIndeterminate = isIndeterminate || v.isIndeterminate || v.isSelected; // 只要有下级为半选状态，自己就为半选状态
+  });
+  // 自己为全选状态时，半选不生效
+  isIndeterminate = isSelected ? false : isIndeterminate;
+  // 赋值
+  state.isSelected = isSelected;
+  state.isIndeterminate = isIndeterminate;
+  // 出发双向绑定事件
+  changeValues();
+}; // 下级选中状态发生变化
+
+const changeValues = () => {
+  let values = [];
+  let i = 1;
+  let traverseOptions = ({ isSelected, isIndeterminate, value, children, name }) => {
+    if (isSelected) {
+      values.push(value);
+    }
+    if (isIndeterminate) {
+      values.push(value);
+    }
+    if (children && children.length > 0) {
+      children.forEach((v) => {
         traverseOptions(v);
       });
-      this.initFlag = false; // 防止在watch中出发重新初始化
-      this.$emit("changeMenu", values);
-    }, // 双向绑定的处理
-  },
-  mounted() {
-    this.initPermissionData();
-  },
-};
+    }
+  };
+  state.permissionData.forEach((v) => {
+    traverseOptions(v);
+  });
+  state.initFlag = false; // 防止在watch中出发重新初始化
+  emit("changeMenu", values);
+}; // 双向绑定的处理
+
+onMounted(() => {
+  initPermissionData();
+});
+
+const { permissionData, isSelected, isIndeterminate } = toRefs(state);
 </script>
diff --git a/src/bg-ui/bg-rich-text.vue b/src/bg-ui/bg-rich-text.vue
index 693255e..d1bac2a 100644
--- a/src/bg-ui/bg-rich-text.vue
+++ b/src/bg-ui/bg-rich-text.vue
@@ -1,87 +1,118 @@
 <template>
-  <div style="border: 1px solid #ccc;z-index: 100;">
-    <Toolbar
-      style="border-bottom: 1px solid #ccc"
-      :editor="editorRef"
-      :defaultConfig="toolbarConfig"
-      :mode="mode"
-    />
+  <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;"
+      style="height: 500px; overflow-y: hidden"
       v-model="valueHtml"
       @onChange="handleChange"
       @onBlur="handleBlur"
       :defaultConfig="editorConfig"
       :mode="mode"
-      @onCreated="handleCreated"
-    />
+      @onCreated="handleCreated" />
   </div>
 </template>
 
 <script setup>
-import '@wangeditor/editor/dist/css/style.css' // 引入 css
+import "@wangeditor/editor/dist/css/style.css"; // 引入 css
 
-import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue'
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 
-import {
-  useFormItem,
-} from 'element-plus'
+import { useFormItem } from "element-plus";
 
 const props = defineProps({
   modelValue: {
     type: String,
-    default: '',
+    default: "",
   },
-  disabled:{
-    type:Boolean,
-    default:false
+  disabled: {
+    type: Boolean,
+    default: false,
   },
   mode: {
     type: String,
-    default: 'default'
-  }
-})
+    default: "default",
+  },
+});
 
-const emit = defineEmits(['update:modelValue','change','blur'])
+const emit = defineEmits(["update:modelValue", "change", "blur"]);
 
-const valueHtml = ref('')
+const valueHtml = ref("");
+// change次数
+let changeNum = ref(0);
 
-const { formItem } = useFormItem()
+const { formItem } = useFormItem();
 
-const editorRef = shallowRef()
+const editorRef = shallowRef();
 
 onMounted(() => {
-  setTimeout(()=>{
-    valueHtml.value = props.modelValue
-  })
-})
+  setTimeout(() => {
+    valueHtml.value = props.modelValue;
+  });
+});
 
-const toolbarConfig = {}
-const editorConfig = { placeholder: '请输入内容...' }
+const toolbarConfig = {};
+const editorConfig = {
+  placeholder: "请输入内容...",
+  MENU_CONF: {
+    uploadImage: {
+      server: "/apaas/common/image/upload", // 服务器地址
+      fieldName: "file", // 上传的文件的字段名称
+      meta: {
+        directory: "image",
+      }, // 上传图片必须携带的参数
+      maxFileSize: 2 * 1024 * 1024, // 图片最大2M
+      timeout: 3 * 60 * 1000, // 超时时间3分钟
+      allowedFileTypes: ["image/jpg", "image/png", "image/gif", "image/jpeg"],
+      customInsert(res, insertFn) {
+        // res 即服务端的返回结果
+        // 从 res 中找到 url alt href ，然后插图图片 url是必须，href和alt可以为""
+        let url = res.data;
+        let alt = "";
+        let href = res.data;
+        insertFn(url, alt, href);
+      },
+      onBeforeUpload(file) {
+        // 可以 return
+        // 1. return file 或者 new 一个 file ，接下来将上传
+        // 2. return false ，不上传这个 file
+        let allowedType = ["jpg", "png", "jpeg", "gif", "bmp", "tiff"]; // 常见的图片格式
+        let data = Object.values(file)[0];
+        if (allowedType.indexOf(data.extension) == -1) {
+          alert(`图片验证未通过，【${data.name}】不是图片`);
+          return false;
+        } else {
+          return file;
+        }
+      },
+      onError(file, err, res) {
+        console.log(`${file.name} 上传出错`, err, res);
+      },
+    },
+  },
+};
 
 onBeforeUnmount(() => {
-  const editor = editorRef.value
-  if (editor == null) return
-  editor.destroy()
-})
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
 const handleCreated = (editor) => {
-  editorRef.value = editor // 记录 editor 实例，重要！
-  if(props.disabled){
-    editor.disable()
+  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
+};
+const handleChange = () => {
+  //初始化会默认赋值<p><br></p>
+  //会对原有数据造成影响，return掉
+  changeNum.value++;
+  if (changeNum.value == 1) {
+    return;
   }
-)
-</script>   
\ No newline at end of file
+  emit("update:modelValue", valueHtml.value);
+};
+const handleBlur = () => {
+  formItem?.validate?.("blur").catch((err) => console.warn(err));
+};
+</script>
diff --git a/src/bg-ui/bg-sort.vue b/src/bg-ui/bg-sort.vue
index c0b2eb1..caa9765 100644
--- a/src/bg-ui/bg-sort.vue
+++ b/src/bg-ui/bg-sort.vue
@@ -3,52 +3,43 @@
     <a
       v-for="(item, index) in types"
       :key="'name_' + index"
-      :class="{ current: item.value === value }"
-      @click="selectAction(item)"
-    >
+      :class="{ current: item.value === modelValue }"
+      @click="selectAction(item)">
       {{ item.name }}
     </a>
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgSort",
-  model: {
-    prop: "value",
-    event: "change",
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: [Number, String],
+    default: "",
   },
-  props: {
-    value: {
-      type: [Number, String],
-      default: "",
-    },
-    types: {
-      type: Array,
-      default: () => [
-        {
-          name: "综合排序",
-          value: 0,
-        },
-        {
-          name: "最近更新",
-          value: 1,
-        },
-        {
-          name: "最高人气",
-          value: 2,
-        },
-        {
-          name: "最好评价",
-          value: 3,
-        },
-      ],
-    },
-  },
-  methods: {
-    selectAction({ value }) {
-      this.$emit("change", value);
-    },
+  types: {
+    type: Array,
+    default: () => [
+      {
+        name: "综合排序",
+        value: 0,
+      },
+      {
+        name: "最近更新",
+        value: 1,
+      },
+      {
+        name: "最高人气",
+        value: 2,
+      },
+      {
+        name: "最好评价",
+        value: 3,
+      },
+    ],
   },
+});
+const emit = defineEmits(["update:modelValue"]);
+const selectAction = ({ value }) => {
+  emit("update:modelValue", value);
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/bg-ui/bg-step.vue b/src/bg-ui/bg-step.vue
deleted file mode 100644
index c757568..0000000
--- a/src/bg-ui/bg-step.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div class="bg-step" v-show="active === step">
-    <div class="step-content">
-      <slot />
-    </div>
-    <div class="step-action bg-form">
-      <slot name="action" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "BgStep",
-  inject: {
-    getActive: {
-      type: Function,
-      default: () => {
-        return this.$parent.getActive;
-      },
-    },
-  },
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    step: {
-      type: Number,
-      required: true,
-    },
-    icon: {
-      required: true,
-    },
-  },
-  computed: {
-    active() {
-      return this.getActive();
-    },
-  },
-};
-</script>
diff --git a/src/bg-ui/bg-steps.vue b/src/bg-ui/bg-steps.vue
deleted file mode 100644
index a17dfa2..0000000
--- a/src/bg-ui/bg-steps.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <div class="bg-steps">
-    <div class="bg-steps-container">
-      <div class="steps-nav">
-        <ul>
-          <template v-for="(item, index) in calcSteps()" :key="'tab_' + index">
-            <li
-              class="step-line"
-              :class="{
-                done: active > index,
-                current: active === index,
-              }"
-              v-if="index > 0"
-            ></li>
-            <li
-              class="step-item"
-              :class="{
-                done: active > index,
-                current: active === index,
-              }"
-            >
-              <div class="step-icon">
-                <!--  -->
-              </div>
-              <div class="step-hightlight-icon">
-                <img :src="item.icon" />
-              </div>
-              <div class="step-title">
-                <p>
-                  {{ item.title || "完成" }}
-                </p>
-                <p v-if="item.title">
-                  <template v-if="active > index">
-                    已完成
-                  </template>
-                  <template v-else-if="active === index">
-                    进行中
-                  </template>
-                  <template v-else>
-                    未进行
-                  </template>
-                </p>
-              </div>
-            </li>
-            <li
-              class="step-line"
-              :class="{
-                done: active > index,
-                current: active === index,
-              }"
-              v-if="index < calcSteps().length - 1"
-            ></li>
-          </template>
-        </ul>
-      </div>
-      <div class="steps-content">
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "BgDetail",
-  provide() {
-    return {
-      getActive: () => {
-        return this.active;
-      },
-    };
-  },
-  props: {
-    active: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      showFixedBars: false,
-      scrollCallback: null,
-    };
-  },
-  methods: {
-    calcSteps() {
-      let stepSlots = [];
-
-      if (this.$slots.default) {
-        stepSlots = this.$slots.default
-          .filter(
-            (vnode) =>
-              vnode.tag &&
-              vnode.componentOptions &&
-              vnode.componentOptions.Ctor.options.name === "BgStep"
-          )
-          .map((vnode) => {
-            return vnode.componentOptions.propsData;
-          });
-      }
-
-      return stepSlots;
-    },
-  },
-};
-</script>
diff --git a/src/bg-ui/bg-switch-ele.vue b/src/bg-ui/bg-switch-ele.vue
index 1646344..a9ff623 100644
--- a/src/bg-ui/bg-switch-ele.vue
+++ b/src/bg-ui/bg-switch-ele.vue
@@ -7,17 +7,16 @@
     inline-prompt
     :active-text="activeText"
     :inactive-text="inactiveText"
-    @change="changeState"
-  />
+    @change="changeState" />
 </template>
 
 <script setup>
-import { onMounted, reactive, toRefs, watch } from "vue"
+import { onMounted, reactive, toRefs, watch } from "vue";
 
 const props = defineProps({
   modelValue: {
     type: Number,
-    default: 0
+    default: 0,
   },
   activeText: {
     type: String,
@@ -25,30 +24,30 @@ const props = defineProps({
   },
   inactiveText: {
     type: String,
-    default: "否"
+    default: "否",
   },
   rowId: {
     type: Number,
-    default: null
-  }
-})
+    default: null,
+  },
+});
 const state = reactive({
-  value: 1
-})
-const emit = defineEmits(['changeState'])
+  value: 1,
+});
+const emit = defineEmits(["changeState"]);
 const changeState = () => {
   if (props.rowId) {
     let params = {
       state: state.value,
-      id: props.rowId
-    }
-    emit('changeState',params)
-  }else {
-    emit('changeState',state.value)
+      id: props.rowId,
+    };
+    emit("changeState", params);
+  } else {
+    emit("changeState", state.value);
   }
-}
-onMounted(()=> {
-  state.value = props.modelValue
-})
-const { value } = toRefs(state)
+};
+onMounted(() => {
+  state.value = props.modelValue;
+});
+const { value } = toRefs(state);
 </script>
diff --git a/src/bg-ui/bg-switch.vue b/src/bg-ui/bg-switch.vue
index 71463f8..97a81f7 100644
--- a/src/bg-ui/bg-switch.vue
+++ b/src/bg-ui/bg-switch.vue
@@ -1,11 +1,5 @@
 <template>
-  <div
-    ref="bg_switch"
-    class="bg-switch"
-    :class="{ disabled: disabled }"
-    :style="now_style"
-    @click="switch_data"
-  >
+  <div ref="bgSwitch" class="bg-switch" :class="{ disabled: disabled }" :style="now_style" @click="switch_data">
     <span class="label" :style="now_label_style">
       {{ labels[now_index] }}
     </span>
@@ -15,86 +9,86 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgSwitch",
-  props: {
-    modelValue: {
-      type: [Boolean, Number, String],
-      default: 0,
-    },
-    labels: {
-      type: Array,
-      default: () => ["停用", "启用"],
-    },
-    values: {
-      type: Array,
-      default: () => [0, 1],
-    },
-    colors: {
-      type: Array,
-      default: () => ["#cbced7", "#2b4695"],
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+<script setup>
+import { ref, computed, onMounted } from "vue";
+const props = defineProps({
+  modelValue: {
+    type: [Boolean, Number, String],
+    default: 0,
   },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      gap: 0,
-      box_height: 0,
-      circle_height: 0,
-    };
+  labels: {
+    type: Array,
+    default: () => ["停用", "启用"],
   },
-  computed: {
-    now_index() {
-      if (this.values[0] == this.modelValue) {
-        return 0;
-      } else {
-        return 1;
-      }
-    },
-    now_style() {
-      return {
-        borderColor: this.colors[this.now_index],
-        backgroundColor: this.colors[this.now_index],
-      };
-    },
-    now_label_style() {
-      return this.now_index == 0
-        ? { left: this.circle_height + this.gap + 5 + "px" }
-        : { left: "6px" };
-    },
-    now_circle_style() {
-      return this.now_index == 0
-        ? {
-            left: this.gap + "px",
-            
-          }
-        : {
-            left: 'calc(100% - 15px)',
-          };
-    },
+  values: {
+    type: Array,
+    default: () => [0, 1],
   },
-  methods: {
-    switch_data() {
-      if (this.disabled) {
-        return;
-      }
-
-      if (this.values[0] == this.modelValue) {
-        this.$emit("update:modelValue", this.values[1]);
-      } else {
-        this.$emit("update:modelValue", this.values[0]);
-      }
-    },
+  colors: {
+    type: Array,
+    default: () => ["#cbced7", "#2b4695"],
   },
-  mounted() {
-    this.box_height = this.$refs.bg_switch.offsetHeight;
-    this.circle_height = this.$refs.circle.offsetHeight;
-    this.gap = (this.box_height - this.circle_height - 4) / 2;
+  disabled: {
+    type: Boolean,
+    default: false,
   },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const gap = ref(0);
+
+const box_height = ref(0);
+
+const circle_height = ref(0);
+
+const now_index = computed(() => {
+  if (props.values[0] == props.modelValue) {
+    return 0;
+  } else {
+    return 1;
+  }
+});
+
+const now_style = computed(() => {
+  return {
+    borderColor: props.colors[now_index.value],
+    backgroundColor: props.colors[now_index.value],
+  };
+});
+
+const now_label_style = computed(() => {
+  return now_index.value == 0 ? { left: circle_height.value + gap.value + 5 + "px" } : { left: "6px" };
+});
+
+const now_circle_style = computed(() => {
+  return now_index.value == 0
+    ? {
+        left: gap.value + "px",
+      }
+    : {
+        left: "calc(100% - 16px)",
+      };
+});
+
+const switch_data = () => {
+  if (props.disabled) {
+    return;
+  }
+
+  if (props.values[0] == props.modelValue) {
+    emit("update:modelValue", props.values[1]);
+  } else {
+    emit("update:modelValue", props.values[0]);
+  }
 };
+
+const bgSwitch = ref(null);
+const circle = ref(null);
+
+onMounted(() => {
+  box_height.value = bgSwitch.value.offsetHeight;
+  circle_height.value = circle.value.offsetHeight;
+  gap.value = (box_height.value - circle_height.value - 4) / 2;
+});
 </script>
diff --git a/src/bg-ui/bg-tab.vue b/src/bg-ui/bg-tab.vue
index 36a6b54..3d7e3da 100644
--- a/src/bg-ui/bg-tab.vue
+++ b/src/bg-ui/bg-tab.vue
@@ -9,51 +9,44 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgTab",
-  inject: {
-    getActiveName: {
-      type: Function,
-      default: () => {
-        return this.$parent.activeName;
-      },
-    },
-    getIsTabs: {
-      type: Function,
-      default: () => {
-        return false;
-      },
-    },
+<script setup>
+import { reactive, ref, onBeforeMount, toRefs, computed, inject } from "vue";
+
+const getActiveName = inject(
+  "activeName",
+  () => {
+    return "";
   },
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    name: {
-      type: String,
-      required: true,
-    },
+  false
+);
+const getIsTabs = inject("isTabs", false);
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
   },
-  computed: {
-    activeName() {
-      return this.getActiveName();
-    },
-    isTabs() {
-      return this.getIsTabs();
-    },
-    showTab() {
-      if (this.isTabs) {
-        if (this.activeName === this.name) {
-          return true;
-        } else {
-          return false;
-        }
-      } else {
-        return true;
-      }
-    },
+  name: {
+    type: String,
+    required: true,
   },
-};
+});
+
+const activeName = computed(() => {
+  return getActiveName();
+});
+const isTabs = computed(() => {
+  return getIsTabs;
+});
+const showTab = computed(() => {
+  if (isTabs.value) {
+    if (activeName.value === props.name) {
+      return true;
+    } else {
+      return false;
+    }
+  } else {
+    return true;
+  }
+});
 </script>
diff --git a/src/bg-ui/bg-table-btn.vue b/src/bg-ui/bg-table-btn.vue
index e2e2181..6154065 100644
--- a/src/bg-ui/bg-table-btn.vue
+++ b/src/bg-ui/bg-table-btn.vue
@@ -4,30 +4,25 @@
   </a>
 </template>
 
-<script>
-export default {
-  name: "BgTableBtn",
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    click: {
-      type: Function,
-      default: () => null,
-    },
+<script setup>
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  emits: ["click"],
-  methods: {
-    clickAction() {
-      if (this.disabled) {
-        return;
-      }
+  click: {
+    type: Function,
+    default: () => null,
+  },
+});
 
-      this.$emit("click");
+const emit = defineEmits(["click"]);
 
-      this.click && this.click();
-    },
-  },
+const clickAction = () => {
+  if (props.disabled) {
+    return;
+  }
+  emit("click");
+  props.click && props.click();
 };
 </script>
diff --git a/src/bg-ui/bg-table-pro.vue b/src/bg-ui/bg-table-pro.vue
index 40441c7..8e61ac8 100644
--- a/src/bg-ui/bg-table-pro.vue
+++ b/src/bg-ui/bg-table-pro.vue
@@ -3,13 +3,12 @@
     ref="table"
     class="bg-table bg-table-pro"
     :class="{ 'bg-table-tree': !!rowKey }"
-    v-bind="$attrs"
+    v-bind="attrs"
     :data="data"
     :row-key="rowKey"
     :tree-props="treeProps"
     @selection-change="selectionChange"
-    :default-expand-all="defaultExpandAll"
-  >
+    :default-expand-all="defaultExpandAll">
     <el-table-column width="60" v-if="showIndex">
       <template v-slot:header>
         <p style="width: 100%; text-align: center">序号</p>
@@ -18,13 +17,7 @@
         <p style="width: 100%; text-align: center">{{ $index + 1 }}</p>
       </template>
     </el-table-column>
-    <el-table-column
-      type="selection"
-      :selectable="selectable"
-      width="60"
-      align="center"
-      v-if="showSelctColumn"
-    />
+    <el-table-column type="selection" :selectable="selectable" width="60" align="center" v-if="showSelectColumn" />
     <el-table-column
       v-for="(header, index) in headers"
       :key="`col_${index}`"
@@ -32,8 +25,7 @@
       :label="header.label"
       :align="header.align"
       :show-overflow-tooltip="!$slots[header.prop]"
-      :fixed="header.fixed"
-    >
+      :fixed="header.fixed">
       <template v-slot:header>
         <template v-if="$slots[`header-${header.prop}`]">
           <slot :name="`header-${header.prop}`" />
@@ -62,135 +54,128 @@
     </el-table-column>
   </el-table>
 </template>
-  
-  <script>
-export default {
-  name: "BgTablePro",
-  props: {
-    headers: {
-      type: Array,
-      require: true,
-    },
-    data: {
-      type: Array,
-    },
-    rowKey: {
-      type: String,
-    },
-    treeProps: {
-      type: Object,
-    },
-    showIndex: {
-      type: Boolean,
-      default: false,
-    },
-    selectable: {
-      type: Function,
-    },
-    defaultExpandAll: {
-      type: Boolean,
-      default: false,
-    },
+
+<script setup>
+import { useAttrs, ref, computed, watch, nextTick } from "vue";
+
+const attrs = useAttrs();
+
+const props = defineProps({
+  headers: {
+    type: Array,
+    require: true,
   },
-  data() {
-    return {
-      allSelection: [], // 所有页面上的选中的数据
-    };
+  data: {
+    type: Array,
   },
-  computed: {
-    showSelctColumn() {
-      return (
-        this.$attrs &&
-        (this.$attrs["selection-change"] || this.$attrs["select"])
-      );
-    }, // 是否显示选中列
-    addSelectEvent() {
-      return this.$attrs && this.$attrs["select"];
-    }, // 是否监听select事件 select事件会记录所有页面上的选中的数据
+  rowKey: {
+    type: String,
   },
-  watch: {
-    data: {
-      handler() {
-        this.recoverSelection();
-      },
-      deep: true,
-    },
+  treeProps: {
+    type: Object,
   },
-  methods: {
-    recoverSelection() {
-      let selectionIds = this.allSelection.map((v) => v[this.rowKey]);
-
-      this.data.forEach((v) => {
-        if (selectionIds.indexOf(v[this.rowKey]) > -1) {
-          this.$nextTick(() => {
-            console.log({ ...v });
-            this.$refs.table.toggleRowSelection(v, true);
-          });
-        }
-      });
-    }, // 恢复选中
-    selectionChange(selection) {
-      if (!this.addSelectEvent) return; // 如果用户未监听select事件，则不执行
-
-      if (!this.rowKey) throw Error("监听select事件时，row-key必须传入！");
-
-      this.upAllSelection(selection);
-
-      this.$emit("select", this.allSelection);
-    }, // select事件
-    upAllSelection(selection) {
-      let rowIds = this.data.map((v) => v[this.rowKey]);
-      let allSelection = [...this.allSelection];
-      let selectionIds = allSelection.map((v) => v[this.rowKey]);
-
-      // 首先把当前页的选中全部移除
-      selectionIds = selectionIds.filter((v) => rowIds.indexOf(v) === -1);
-
-      // allSelection仅保留selectionIds存在的
-      allSelection = allSelection.filter(
-        (v) => selectionIds.indexOf(v[this.rowKey]) > -1
-      );
-
-      // 然后再加入当前页的选中
-      allSelection.push(...selection);
-
-      this.allSelection = allSelection;
-    }, // 更新当前全部被选中的数据
-    clearSelection() {
-      this.$refs.table.clearSelection();
-      this.allSelectio = [];
-    }, // 清空选中
-    getRowInfo(row, key) {
-      let currentIndex = -1;
-      let parentRows = null;
-      let propPath = "";
-      let childrenKey = this.treeProps.children;
-      let recursionItems = (items, prop) => {
-        for (let i = 0; i < items.length; i++) {
-          let item = items[i];
-
-          propPath += `${i}.`;
-
-          if (item[prop] === row[prop]) {
-            currentIndex = i;
-            parentRows = items;
-            break;
-          } else if (item[childrenKey] && item[childrenKey].length > 0) {
-            propPath += `${childrenKey}.`;
-            recursionItems(item[childrenKey], prop);
-          }
-        }
-      };
-
-      recursionItems(this.data, key, "");
-
-      return {
-        index: currentIndex,
-        rows: parentRows,
-        $_prop_path: propPath,
-      };
-    },
+  showIndex: {
+    type: Boolean,
+    default: false,
+  },
+  selectable: {
+    type: Function,
+  },
+  defaultExpandAll: {
+    type: Boolean,
+    default: false,
   },
+});
+
+const emit = defineEmits(["select"]);
+
+const allSelection = ref([]);
+
+const showSelectColumn = computed(() => {
+  return attrs && (attrs["selection-change"] || attrs["select"]);
+}); // 是否显示选中列
+
+const addSelectEvent = computed(() => {
+  return attrs && attrs["select"];
+});
+
+watch(
+  () => props.data,
+  () => {
+    recoverSelection();
+  }
+);
+
+const table = ref(null);
+
+const recoverSelection = () => {
+  let selectionIds = allSelection.value.map((v) => v[props.rowKey]);
+  props.data.forEach((v) => {
+    if (selectionIds.indexOf(v[props.rowKey]) > -1) {
+      nextTick(() => {
+        table.value.toggleRowSelection(v, true);
+      });
+    }
+  });
+}; // 恢复选中
+
+const selectionChange = (selection) => {
+  if (!addSelectEvent.value) return; // 如果用户未监听select事件，则不执行
+
+  if (!props.rowKey) throw Error("监听select事件时，row-key必须传入！");
+
+  upAllSelection(selection);
+
+  emit("select", allSelection.value);
+}; // select事件
+const upAllSelection = (selection) => {
+  let rowIds = props.data.map((v) => v[props.rowKey]);
+  let allSelection1 = [...allSelection.value];
+  let selectionIds = allSelection1.map((v) => v[props.rowKey]);
+
+  // 首先把当前页的选中全部移除
+  selectionIds = selectionIds.filter((v) => rowIds.indexOf(v) === -1);
+
+  // allSelection仅保留selectionIds存在的
+  allSelection1 = allSelection1.filter((v) => selectionIds.indexOf(v[props.rowKey]) > -1);
+
+  // 然后再加入当前页的选中
+  allSelection1.push(...selection);
+
+  allSelection.value = allSelection1;
+}; // 更新当前全部被选中的数据
+const clearSelection = () => {
+  table.value.clearSelection();
+  allSelection.value = [];
+}; // 清空选中
+const getRowInfo = (row, key) => {
+  let currentIndex = -1;
+  let parentRows = null;
+  let propPath = "";
+  let childrenKey = props.treeProps.children;
+  let recursionItems = (items, prop) => {
+    for (let i = 0; i < items.length; i++) {
+      let item = items[i];
+
+      propPath += `${i}.`;
+
+      if (item[prop] === row[prop]) {
+        currentIndex = i;
+        parentRows = items;
+        break;
+      } else if (item[childrenKey] && item[childrenKey].length > 0) {
+        propPath += `${childrenKey}.`;
+        recursionItems(item[childrenKey], prop);
+      }
+    }
+  };
+
+  recursionItems(props.data, key, "");
+
+  return {
+    index: currentIndex,
+    rows: parentRows,
+    $_prop_path: propPath,
+  };
 };
 </script>
-  
\ No newline at end of file
diff --git a/src/bg-ui/bg-table.vue b/src/bg-ui/bg-table.vue
index 9b41286..4198ee8 100644
--- a/src/bg-ui/bg-table.vue
+++ b/src/bg-ui/bg-table.vue
@@ -9,35 +9,18 @@
     @select-all="selectActionAll"
     :stripe="stripe"
     :row-class-name="stripe ? tableRowClassName : ''"
-    tooltip-effect="light"
-  >
+    tooltip-effect="light">
     <template v-slot:empty>
       <div class="empty_container">
-        <img src="../assets/imgs/img-no-data.png" alt="">
-        <div class="text">
-          暂无数据
-        </div>
+        <img src="../assets/imgs/img-no-data.png" alt="" />
+        <div class="text">暂无数据</div>
       </div>
     </template>
-    <el-table-column
-      v-if="paddingLeft > 10"
-      :width="paddingLeft - 10"
-    ></el-table-column>
-    <el-table-column
-      type="selection"
-      :selectable="selectable"
-      width="38"
-      v-if="select"
-    >
+    <el-table-column v-if="paddingLeft > 10" :width="paddingLeft - 10"></el-table-column>
+    <el-table-column type="selection" :selectable="selectable" width="38" v-if="select">
       <!-- checkbox -->
     </el-table-column>
-    <el-table-column
-      v-if="isIndex"
-      type="index"
-      :label="indexLabel"
-      width="54"
-      align="left"
-    >
+    <el-table-column v-if="isIndex" type="index" :label="indexLabel" width="54" align="left">
       <!-- 序号 -->
     </el-table-column>
     <el-table-column
@@ -47,8 +30,7 @@
       :align="header.align"
       :key="'col_' + index"
       :fixed="header.fixed"
-      show-overflow-tooltip
-    >
+      show-overflow-tooltip>
       <template v-slot:header>
         <template v-if="$slots[`header-${header.prop}`]">
           <slot :name="`header-${header.prop}`" />
@@ -68,21 +50,14 @@
 </template>
 
 <script setup>
-import { watch, ref, } from 'vue'
-import { selectTableMixin } from './hook/mixin-select-table'
-let {
-  nowSelectData,
-  allSelectData,
-  selectData,
-  initSelectTableData,
-  runPage,
-  dealSelectData
-} = selectTableMixin()
+import { watch, ref } from "vue";
+import { selectTableMixin } from "./hook/mixin-select-table";
+let { nowSelectData, allSelectData, selectData, initSelectTableData, runPage, dealSelectData } = selectTableMixin();
 
 const props = defineProps({
   height: {
     type: [Number, String],
-    default: 'auto'
+    default: "auto",
   },
   headers: {
     type: Array,
@@ -101,15 +76,15 @@ const props = defineProps({
   // },
   isIndex: {
     type: Boolean,
-    default: false
+    default: false,
   },
   indexLabel: {
     type: String,
-    default: "序号"
+    default: "序号",
   },
   stripe: {
     type: Boolean,
-    default: false
+    default: false,
   },
   paddingLeft: {
     type: [Number, String],
@@ -117,84 +92,85 @@ const props = defineProps({
   },
   canEdit: {
     type: Boolean,
-    default: false
+    default: false,
   }, // 多选框是否禁用
   canEditFlag: {
-    typr : Boolean,
-    default: ""
+    typr: Boolean,
+    default: "",
   }, // 决定多选框是否禁用的字段
-})
+});
 
-const table = ref(null)
+const table = ref(null);
 
-const emit = defineEmits(['selectAc','select'])
+const emit = defineEmits(["selectAc", "select"]);
 watch(
   () => props.rows,
-  (n,o) => {
+  (n, o) => {
     if (n.length && props.select) {
-      runPage()
-      initSelectTableData(n).then((selectData)=>{
-        if(selectData.length){
-          setTimeout(()=>{
-            toggleRowArrSelection(selectData)
-          })
+      runPage();
+      initSelectTableData(n).then((selectData) => {
+        if (selectData.length) {
+          setTimeout(() => {
+            toggleRowArrSelection(selectData);
+          });
         }
-      })
+      });
     }
   }
-)
+);
 
 const toggleRowSelection = (row, flag = true) => {
   table.value.toggleRowSelection(row, flag);
-}
+};
 const selectAction = (selection) => {
-  emit("selectAc", {allLength:Object.keys(allSelectData).length+nowSelectData.length,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:[]});
-}
+  emit("select", { allLength: Object.keys(allSelectData).length + nowSelectData.length, selection: [] });
+};
 const setSelectedRow = (row) => {
   toggleRowSelection(row);
-}
+};
 const toggleRowArrSelection = (arr, flag = true) => {
-  arr.forEach(e => {
+  arr.forEach((e) => {
     toggleRowSelection(e, flag);
   });
-}
-const selectActionRow = (selection,row) => {
-  selectData(selection)
-  emit("select", {allLength:Object.keys(allSelectData).length+nowSelectData.length,selection});
-}
+};
+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=[]
+  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) => {
+};
+const selectable = (row, index) => {
   if (props.canEdit) {
     if (row[props.canEditFlag] && row[props.canEditFlag] == 1) {
-      return false
-    }else {
-      return true
+      return false;
+    } else {
+      return true;
     }
-  }else {
-    return true
+  } else {
+    return true;
   }
-}
+};
 defineExpose({
   clearTable,
   toggleRowSelection,
-})
+});
 </script>
diff --git a/src/bg-ui/bg-tabs.vue b/src/bg-ui/bg-tabs.vue
index 8a9ddf3..cd66891 100644
--- a/src/bg-ui/bg-tabs.vue
+++ b/src/bg-ui/bg-tabs.vue
@@ -8,8 +8,7 @@
           :class="{
             current: modelValue === item.name,
           }"
-          @click="changeActiveName(item, index)"
-        >
+          @click="changeActiveName(item, index)">
           {{ item.label }}
         </li>
         <li>
@@ -26,50 +25,39 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgTabs",
-  provide() {
-    return {
-      getActiveName: () => {
-        return this.modelValue;
-      },
-      getIsTabs: () => {
-        return true;
-      },
-    };
-  },
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      isTabs: true,
-    };
-  },
-  methods: {
-    calcTabs() {
-      let tabSlots = [];
+<script setup>
+import { reactive, ref, onBeforeMount, toRefs, provide, useSlots } from "vue";
 
-      if (this.$slots.default()) {
-        tabSlots = this.$slots.default()
-          .filter(
-            (vnode) =>
-              vnode.type &&
-              vnode.type.name === "BgTab"
-          )
-          .map((vnode) => vnode.props);
-      }
+const slots = useSlots();
 
-      return tabSlots;
-    },
-    changeActiveName({ name }) {
-      this.$emit("update:modelValue", name);
-    },
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
   },
+});
+
+const getActiveName = provide("activeName", () => {
+  return props.modelValue;
+});
+const getIsTabs = provide("isTabs", true);
+
+const emit = defineEmits(["update:modelValue"]);
+
+const isTabs = ref(true);
+
+const calcTabs = () => {
+  let tabSlots = [];
+  if (slots.default()) {
+    tabSlots = slots
+      .default()
+      .filter((vnode) => vnode.type && vnode.type.__name === "bg-tab")
+      .map((vnode) => vnode.props);
+  }
+
+  return tabSlots;
+};
+const changeActiveName = ({ name }) => {
+  emit("update:modelValue", name);
 };
 </script>
diff --git a/src/bg-ui/bg-tags.vue b/src/bg-ui/bg-tags.vue
index 73190db..6cf00b0 100644
--- a/src/bg-ui/bg-tags.vue
+++ b/src/bg-ui/bg-tags.vue
@@ -10,67 +10,51 @@
         </a>
       </li>
       <li v-if="!disabled">
-        <el-button
-          type="primary2"
-          size="mini"
-          @click="showInput = true"
-          v-if="!showInput"
-        >
-          新增
-        </el-button>
-        <el-input v-model="newTag" @blur="addTag" v-else />
+        <el-button type="primary2" size="mini" @click="showInput = true" v-if="!showInput"> 新增 </el-button>
+        <el-input v-model.trim="newTag" @blur="addTag" v-else />
       </li>
     </ul>
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgTags",
-  model: {
-    prop: "value",
-    event: "change",
+<script setup>
+import { reactive, ref, onBeforeMount, toRefs, computed, useSlots } from "vue";
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
   },
-  props: {
-    value: {
-      type: String,
-      default: "",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  data() {
-    return {
-      newTag: "",
-      showInput: false,
-    };
-  },
-  computed: {
-    tags() {
-      return (this.value && this.value.split(",")) || [];
-    },
-  },
-  methods: {
-    deleteTag(index) {
-      let tags = [...this.tags];
+});
 
-      tags.splice(index, 1);
+const emit = defineEmits(["update:modelValue"]);
 
-      this.$emit("change", tags.join(","));
-    },
-    addTag() {
-      let tags = [...this.tags];
+const newTag = ref("");
+const showInput = ref(false);
 
-      if (this.newTag) {
-        tags.push(this.newTag);
-      }
+const tags = computed(() => {
+  return (props.modelValue && props.modelValue.split(",")) || [];
+});
 
-      this.$emit("change", tags.join(","));
-      this.newTag = "";
-      this.showInput = false;
-    },
-  },
+const deleteTag = (index) => {
+  let tags = [...tags.value];
+
+  tags.splice(index, 1);
+
+  emit("update:modelValue", tags.join(","));
+};
+const addTag = () => {
+  let tags = [...tags.value];
+
+  if (newTag.value) {
+    tags.push(newTag.value);
+  }
+
+  emit("update:modelValue", tags.join(","));
+  newTag.value = "";
+  showInput.value = false;
 };
 </script>
diff --git a/src/bg-ui/bg-upload-image.vue b/src/bg-ui/bg-upload-image.vue
index bf31b3e..be3d404 100644
--- a/src/bg-ui/bg-upload-image.vue
+++ b/src/bg-ui/bg-upload-image.vue
@@ -1,6 +1,6 @@
 <template>
   <el-upload
-    ref="upload"
+    ref="uploadRef"
     class="bg-upload"
     v-bind="$attrs"
     :file-list="fileList"
@@ -44,188 +44,188 @@
   </el-dialog>
 </template>
 
-<script>
+<script setup>
 import { UploadFilled } from "@element-plus/icons-vue";
-export default {
-  name: "BgUploadImage",
-  props: {
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
-    action: {
-      type: String,
-      default: "/apaas/common/image/upload",
-    },
-    autoUpload: {
-      type: Boolean,
-      default: true,
-    },
-    listType: {
-      type: String,
-      default: "text",
-    },
-    limit: {
-      type: Number,
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-
-    accept: {
-      type: [Array, String],
-    }, // 接受类型
-    fileSize: {
-      type: Number,
-    }, // 文件大小
-    fileSizeUnit: {
-      type: String,
-      default: "MB",
-    }, // 文件单位 KB/MB/GB
-    triggerText: {
-      type: String,
-      default: "点击上传",
-    }, // 按钮文字
-    showTips: {
-      type: Boolean,
-      default: false,
-    }, // 显示提示
-    customTips: {
-      type: String,
-      default: "",
-    }, // 自定义提示内容
+import { computed, watch, nextTick, onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
   },
-  emits: ["update:modelValue", "change"],
-  computed: {
-    acceptTypes() {
-      if (Array.isArray(this.accept)) {
-        return this.accept.join(",");
-      } else {
-        return this.accept;
-      }
-    },
-    types() {
-      return this.acceptTypes.split(",").filter((v) => v !== "");
-    },
-    tips() {
-      let str = "";
-
-      if (this.types.length > 0) {
-        str += `后缀为 ${this.types.join("、")} `;
-      }
-
-      if (this.fileSize) {
-        if (str) str += " 且";
-
-        str += `大小不超过 ${this.fileSize}${this.fileSizeUnit}`;
-      }
-
-      if (str) str += "的文件";
-
-      if (this.limit) {
-        str += `，最多上传 ${this.limit} 个文件`;
-      }
-
-      if (str) {
-        str = "支持" + str;
-      }
-
-      return str;
-    },
+  action: {
+    type: String,
+    default: "/apaas/common/image/upload",
   },
-  data() {
-    return {
-      fileList: [],
-      UploadFilled,
-      dialogImageUrl: "",
-      dialogVisible: false,
-    };
+  autoUpload: {
+    type: Boolean,
+    default: true,
   },
-  watch: {
-    modelValue() {
-      let newStr = this.modelValue.map((v) => v.url).join(",");
-      let oldStr = this.fileList.map((v) => (v.response && v.response.data) || v.url).join(",");
-
-      if (newStr !== oldStr) {
-        this.fileList = [...this.modelValue];
-      }
-      this.$nextTick().then(() => {
-        this.checkLimit(this.modelValue);
-      });
-    },
+  listType: {
+    type: String,
+    default: "text",
   },
-  methods: {
-    checkLimit(filelist) {
-      const limit = this.limit;
-      const uploadDom = this.$refs["upload"];
-      const length = uploadDom.$el.children[0].children.length;
-      if (filelist.length === limit) {
-        uploadDom.$el.children[0].children[length - 1].style.display = "none";
-      } else {
-        uploadDom.$el.children[0].children[length - 1]
-          ? (uploadDom.$el.children[0].children[length - 1].style.display = "")
-          : "";
-      }
-    },
-    handleBeforeUpload(file) {
-      let units = {
-        KB: 1024,
-        MB: 1024 * 1024,
-        GB: 1024 * 1024 * 1024,
-      };
-      let temp = file.name.split(".");
-      let type = "." + temp[temp.length - 1].toLocaleLowerCase();
-      let fileTypeIsOk = this.types.length === 0 || this.types.indexOf(type) > -1;
-      let fileSizeIsOk =
-        this.fileSize === 0 || this.fileSize === undefined || file.size / units[this.fileSizeUnit] <= this.fileSize;
-      let checked = fileTypeIsOk && fileSizeIsOk;
-
-      if (!checked) {
-        this.$message.error(this.tips);
-      }
-
-      return checked;
-    },
-    handleSuccess(response, file, fileList) {
-      this.updateFileList(fileList);
-      this.checkLimit(fileList);
-    },
-    handleRemove(file, fileList) {
-      this.updateFileList(fileList);
-      this.checkLimit(fileList);
-    },
-    handlePreview({ name, url }) {
-      this.dialogImageUrl = url;
-      this.dialogVisible = true;
-      // let a = document.createElement("a"); // 生成一个a元素
-      // let event = new MouseEvent("click"); // 创建一个单击事件
-
-      // a.download = name; // 设置图片名称
-      // a.href = url; // 将生成的URL设置为a.href属性
-      // a.dispatchEvent(event); // 触发a的单击事件
-    },
-    updateFileList(fileList) {
-      let values = fileList.map((v) => {
-        return {
-          name: v.name,
-          url: (v.response && v.response.data) || v.url,
-        };
-      });
-
-      this.fileList = fileList;
-
-      console.log(values);
-
-      this.$emit("update:modelValue", values);
-      this.$emit("change", values);
-    },
-    submitUpload() {
-      this.$refs.upload.submit();
-    },
+  limit: {
+    type: Number,
   },
-  mounted() {
-    this.fileList = [...this.modelValue];
+  multiple: {
+    type: Boolean,
+    default: false,
   },
+
+  accept: {
+    type: [Array, String],
+  }, // 接受类型
+  fileSize: {
+    type: Number,
+  }, // 文件大小
+  fileSizeUnit: {
+    type: String,
+    default: "MB",
+  }, // 文件单位 KB/MB/GB
+  triggerText: {
+    type: String,
+    default: "点击上传",
+  }, // 按钮文字
+  showTips: {
+    type: Boolean,
+    default: false,
+  }, // 显示提示
+  customTips: {
+    type: String,
+    default: "",
+  }, // 自定义提示内容
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const uploadRef = ref(null);
+
+const state = reactive({
+  fileList: [],
+  dialogImageUrl: "",
+  dialogVisible: false,
+});
+
+const acceptTypes = computed(() => {
+  if (Array.isArray(props.accept)) {
+    return props.accept.join(",");
+  } else {
+    return props.accept;
+  }
+});
+
+const types = computed(() => {
+  return acceptTypes.value.split(",").filter((v) => v !== "");
+});
+
+const tips = computed(() => {
+  let str = "";
+  if (types.value.length > 0) {
+    str += `后缀为${types.value.join("、")}`;
+  }
+  if (props.fileSize) {
+    if (str) str += "且";
+    str += `大小不超过${props.fileSize}${props.fileSizeUnit}`;
+  }
+  if (str) str += "的文件";
+
+  if (props.limit) {
+    str += `，最多上传 ${props.limit} 个文件`;
+  }
+  if (str) {
+    str = "支持" + str;
+  }
+  return str;
+});
+
+const checkLimit = (filelist) => {
+  const limit = props.limit;
+  const uploadDom = uploadRef.value;
+  const length = uploadDom.$el.children[0].children.length;
+  if (filelist.length === limit) {
+    uploadDom.$el.children[0].children[length - 1].style.display = "none";
+  } else {
+    uploadDom.$el.children[0].children[length - 1]
+      ? (uploadDom.$el.children[0].children[length - 1].style.display = "")
+      : "";
+  }
+};
+
+watch(
+  () => props.modelValue,
+  () => {
+    let newStr = props.modelValue.map((v) => v.url).join(",");
+    let oldStr = state.fileList.map((v) => (v.response && v.response.data) || v.url).join(",");
+    if (newStr !== oldStr) {
+      state.fileList = [...props.modelValue];
+    }
+    nextTick().then(() => {
+      checkLimit(props.modelValue);
+    });
+  }
+);
+
+const handleBeforeUpload = (file) => {
+  let units = {
+    KB: 1024,
+    MB: 1024 * 1024,
+    GB: 1024 * 1024 * 1024,
+  };
+  let temp = file.name.split(".");
+  let type = "." + temp[temp.length - 1].toLocaleLowerCase();
+  let fileTypeIsOk = types.value.length === 0 || types.value.indexOf(type) > -1;
+  let fileSizeIsOk =
+    props.fileSize === 0 || props.fileSize === undefined || file.size / units[props.fileSizeUnit] <= props.fileSize;
+  let checked = fileTypeIsOk && fileSizeIsOk;
+
+  if (!checked) {
+    ElMessage.error(tips.value);
+  }
+
+  return checked;
+};
+const handleSuccess = (response, file, fileList) => {
+  updateFileList(fileList);
+  checkLimit(fileList);
+};
+const handleRemove = (file, fileList) => {
+  updateFileList(fileList);
+  checkLimit(fileList);
+};
+const handlePreview = ({ name, url }) => {
+  state.dialogImageUrl = url;
+  state.dialogVisible = true;
+  // let a = document.createElement("a"); // 生成一个a元素
+  // let event = new MouseEvent("click"); // 创建一个单击事件
+  // a.download = name; // 设置图片名称
+  // a.href = url; // 将生成的URL设置为a.href属性
+  // a.dispatchEvent(event); // 触发a的单击事件
+};
+const updateFileList = (fileList) => {
+  let values = fileList.map((v) => {
+    return {
+      name: v.name,
+      url: (v.response && v.response.data) || v.url,
+    };
+  });
+
+  state.fileList = fileList;
+
+  console.log(values);
+
+  emit("update:modelValue", values);
+  emit("change", values);
+};
+const submitUpload = () => {
+  uploadRef.value.submit();
 };
+onMounted(() => {
+  state.fileList = [...props.modelValue];
+  nextTick().then(() => {
+    checkLimit(props.modelValue);
+  });
+});
+const { fileList, dialogImageUrl, dialogVisible } = toRefs(state);
 </script>
diff --git a/src/bg-ui/bg-upload.vue b/src/bg-ui/bg-upload.vue
index 5bbf77d..8e7ecea 100644
--- a/src/bg-ui/bg-upload.vue
+++ b/src/bg-ui/bg-upload.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="bg-upload"
-    :class="{ 'is-disabled': actionDisabled, 'is-easy': isEasy }"
-  >
+  <div class="bg-upload" :class="{ 'is-disabled': actionDisabled, 'is-easy': isEasy }">
     <el-upload
       action="/apaas/common/file/upload"
       :data="{
@@ -15,12 +12,10 @@
       :on-preview="handlePreview"
       :on-remove="handleRemove"
       :file-list="fileList"
-      :limit="limit"
       :disabled="actionDisabled"
       style="max-width: 600px"
-      multiple
       drag
-    >
+      multiple>
       <!-- <el-button type="primary">
         上传附件
       </el-button>
@@ -29,11 +24,7 @@
       </div> -->
       <template v-if="isEasy">
         <el-button type="primary" size="mini">
-          <bg-icon
-            :icon="`#${triggerIcon}`"
-            v-if="triggerIcon"
-            style="margin-right: 8px"
-          />
+          <bg-icon :icon="`#${triggerIcon}`" v-if="triggerIcon" style="margin-right: 8px" />
           {{ triggerText }}
         </el-button>
       </template>
@@ -51,7 +42,7 @@
         </p>
       </div>
       <template v-slot:tip v-if="otherInfo != ''">
-        <div class="el-upload__tip" style="color: #909bb6">
+        <div class="el-upload__tip" style="color: #909bb6; line-height: 18px">
           {{ otherInfo }}
         </div>
       </template>
@@ -59,163 +50,138 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgUpload",
-  // model: {
-  //   prop: "value",
-  //   event: "change",
-  // },
-  props: {
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
-    limit: {
-      type: Number,
-    },
-    fileTypes: {
-      type: Array,
-      default: () => [
-        "doc",
-        "docx",
-        "xls",
-        "xlsx",
-        "pdf",
-        "jpg",
-        "jpeg",
-        "png",
-      ],
-    },
-    fileMaxSize: {
-      type: Number,
-      default: 20, // 单位：M
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    refresh: {
-      type: Boolean,
-      default: false,
-    }, // 是否重新初始化附件（手动刷新组件的附件列表）
-    customTips: {
-      type: Boolean,
-      default: false,
-    }, // 是否自定义提示
-    isEasy: {
-      type: Boolean,
-      default: false,
-    },
-    triggerText: {
-      type: String,
-      default: "请上传",
-    },
-    triggerIcon: {
-      type: String,
-      default: "bg-ic-file",
-    },
-    otherInfo: {
-      type: String,
-      default: "",
-    },
+<script setup>
+import { computed, watch, onMounted, reactive, ref, nextTick, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
   },
-  emits: ["update:modelValue"],
-  data() {
-    return {
-      fileList: [],
-    };
+  fileTypes: {
+    type: Array,
+    default: () => ["doc", "docx", "xls", "xlsx", "pdf", "jpg", "jpeg", "png"],
+  },
+  fileMaxSize: {
+    type: Number,
+    default: 20, // 单位：M
   },
-  computed: {
-    actionDisabled() {
-      return this.disabled ;//|| this.fileList.length === this.limit; 文件数量 === limit 会导致无法删除已上传文件
-    },
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  watch: {
-    modelValue() {
-      let newStr = this.modelValue.map((v) => v.url).join(",");
-      let oldStr = this.fileList
-        .map((v) => (v.response && v.response.data) || v.url)
-        .join(",");
-
-      if (newStr !== oldStr) {
-        this.fileList = [...this.modelValue];
-      }
-    },
+  refresh: {
+    type: Boolean,
+    default: false,
+  }, // 是否重新初始化附件（手动刷新组件的附件列表）
+  customTips: {
+    type: Boolean,
+    default: false,
+  }, // 是否自定义提示
+  isEasy: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    initFileList() {
-      let urls = (this.value && this.value.split(",")) || [];
-
-      this.fileList = urls.map((url, index) => {
-        let temp = url.split("/");
-        let name = temp[temp.length - 1] || `附件_${index + 1}`;
-
-        return { name, url };
-      });
-
-      this.$emit("update:refresh", false);
-    },
-    handleBeforeUpload(file) {
-      let temp = file.name.split(".");
-      let type = temp[temp.length - 1].toLocaleLowerCase();
-      let fileTypesOk = this.fileTypes.indexOf(type) > -1;
-      let fileMaxSizeOk = file.size / 1024 / 1024 <= this.fileMaxSize;
-
-      if (!fileTypesOk) {
-        this.$message.error(
-          `上传文件只能是${this.fileTypes.join("、")}这些格式！`
-        );
-      }
-
-      if (!fileMaxSizeOk) {
-        this.$message.error(`上传文件大小不能超过${this.fileMaxSize}M!`);
-      }
-
-      return fileTypesOk && fileMaxSizeOk;
-    },
-    handleExceed(file, fileList) {
-      console.log(file, fileList);
-      if (fileList && fileList.length == this.limit) {
-        this.$message.error(`最多只允许上传${this.limit}个文件`)
-        return false
-      }
-    },
-    handlePreview(val) {
-      let a = document.createElement("a"); // 生成一个a元素
-      let event = new MouseEvent("click"); // 创建一个单击事件
-
-      a.download = val.name; // 设置图片名称
-      a.href = val.url || val.response.data; // 将生成的URL设置为a.href属性
-      a.dispatchEvent(event); // 触发a的单击事件
-    },
-    handleRemove(file, fileList) {
-      this.updateFileList(fileList);
-    },
-    handleSuccess(response, file, fileList) {
-      this.updateFileList(fileList);
-    },
-    updateFileList(fileList) {
-      let values = fileList.map((v) => {
-        return {
-          name: v.name,
-          url: (v.response && v.response.data) || v.url,
-        };
-      });
-
-      this.fileList = fileList;
-
-      this.$emit("update:modelValue", values);
-      this.$emit("change");
-    },
+  triggerText: {
+    type: String,
+    default: "请上传",
   },
-  mounted() {
-    this.fileList = [...this.modelValue];
+  triggerIcon: {
+    type: String,
+    default: "bg-ic-file",
   },
+  otherInfo: {
+    type: String,
+    default: "",
+  },
+  limit: {
+    type: Number,
+    default: 9999,
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const state = reactive({
+  fileList: [],
+});
+
+const actionDisabled = computed(() => {
+  return props.disabled;
+});
+
+watch(
+  () => props.modelValue,
+  () => {
+    let newStr = props.modelValue.map((v) => v.url).join(",");
+    let oldStr = state.fileList.map((v) => (v.response && v.response.data) || v.url).join(",");
+
+    if (newStr !== oldStr) {
+      state.fileList = [...props.modelValue];
+    }
+  }
+);
+const handleBeforeUpload = (file) => {
+  if (state.fileList && state.fileList.length >= props.limit) {
+    ElMessage.error(`只允许上传${props.limit}个文件`);
+    return false;
+  }
+  let temp = file.name.split(".");
+  let type = temp[temp.length - 1].toLocaleLowerCase();
+  let fileTypesOk = props.fileTypes.indexOf(type) > -1 || props.fileTypes.length == 0;
+  let fileMaxSizeOk = file.size / 1024 / 1024 <= props.fileMaxSize;
+
+  if (!fileTypesOk) {
+    ElMessage.error(`上传文件只能是${props.fileTypes.join("、")}这些格式！`);
+  }
+
+  if (!fileMaxSizeOk) {
+    ElMessage.error(`上传文件大小不能超过${props.fileMaxSize}M!`);
+  }
+
+  return fileTypesOk && fileMaxSizeOk;
 };
+const handleExceed = (file, fileList) => {
+  console.log(file, fileList);
+};
+const handlePreview = (val) => {
+  let a = document.createElement("a"); // 生成一个a元素
+  let event = new MouseEvent("click"); // 创建一个单击事件
+
+  a.download = val.name; // 设置图片名称
+  a.href = val.url || val.response.data; // 将生成的URL设置为a.href属性
+  a.dispatchEvent(event); // 触发a的单击事件
+};
+const handleRemove = (file, fileList) => {
+  updateFileList(fileList);
+};
+const handleSuccess = (response, file, fileList) => {
+  updateFileList(fileList);
+};
+const updateFileList = (fileList) => {
+  let values = fileList.map((v) => {
+    return {
+      name: v.name,
+      url: (v.response && v.response.data) || v.url,
+    };
+  });
+
+  state.fileList = fileList;
+
+  emit("update:modelValue", values);
+  emit("change", values);
+};
+
+onMounted(() => {
+  state.fileList = [...props.modelValue];
+});
+
+const { fileList } = toRefs(state);
 </script>
+
 <style>
-.bg-upload .el-upload-dragger{
+.bg-upload .el-upload-dragger {
   padding: 0;
   border: 0;
 }
diff --git a/src/bg-ui/bg-user-upload-image.vue b/src/bg-ui/bg-user-upload-image.vue
index 8e4ded1..2d2409a 100644
--- a/src/bg-ui/bg-user-upload-image.vue
+++ b/src/bg-ui/bg-user-upload-image.vue
@@ -6,8 +6,7 @@
       :auto-upload="false"
       :on-change="onChangeFile"
       :file-list="fileList"
-      :disabled="disabled"
-    >
+      :disabled="disabled">
       <template v-slot:trigger>
         <div class="trigger-content">
           <div class="image-trigger" v-if="modelValue">
@@ -25,62 +24,60 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgUploadImage",
-  props: {
-    modelValue: {
-      type: String,
-      default: "",
-    },
-    disabled:{
-      type:Boolean,
-      default:false
-    }
+<script setup>
+import { computed, watch, onMounted, reactive, ref, nextTick, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
   },
-  emits: ['update:modelValue'],
-  data(){
-      return{
-          fileList:[]
-      }
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  created(){
+});
 
-  },
-  methods: {
-    handleAvatarSuccess({ data }) {
-      this.$emit("update:modelValue", data.visitURL);
-    },
-    beforeAvatarUpload(file) {
-      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
-      const isLt1M = file.size / 1024 / 1024 < 1;
+const emit = defineEmits(["update:modelValue"]);
 
-      if (!isJPG) {
-        this.$message.error("上传的图片只能是 JPG、PNG 格式!");
-      }
-      if (!isLt1M) {
-        this.$message.error("上传的图片大小不能超过 1MB!");
-      }
+const state = reactive({
+  fileList: [],
+});
 
-      return isJPG && isLt1M;
-    },
-    onChangeFile(file, fileList){
-        console.log(file, fileList);
-        if(!this.beforeAvatarUpload(file.raw)){
-            return
-        }
-        var reader = new FileReader();
-        reader.readAsDataURL(file.raw); // 一定要传入file格式  
-        reader.onload = () => {
-            this.$emit("update:modelValue", reader.result);
-        };
-    }
-  },
+const handleAvatarSuccess = ({ data }) => {
+  emit("update:modelValue", data.visitURL);
+};
+const beforeAvatarUpload = (file) => {
+  const isJPG = file.type === "image/jpeg" || file.type === "image/png";
+  const isLt1M = file.size / 1024 / 1024 < 1;
+
+  if (!isJPG) {
+    ElMessage.error("上传的图片只能是 JPG、PNG 格式!");
+  }
+  if (!isLt1M) {
+    ElMessage.error("上传的图片大小不能超过 1MB!");
+  }
+
+  return isJPG && isLt1M;
 };
+const onChangeFile = (file, fileList) => {
+  console.log(file, fileList);
+  if (!beforeAvatarUpload(file.raw)) {
+    return;
+  }
+  var reader = new FileReader();
+  reader.readAsDataURL(file.raw); // 一定要传入file格式
+  reader.onload = () => {
+    emit("update:modelValue", reader.result);
+  };
+};
+
+const { fileList } = toRefs(state);
 </script>
 
 <style scoped>
-.user-upload-image :deep() .el-upload-list{
-    display: none;
+.user-upload-image :deep() .el-upload-list {
+  display: none;
 }
 </style>
diff --git a/src/bg-ui/index.js b/src/bg-ui/index.js
index f3c02e3..cdd7163 100644
--- a/src/bg-ui/index.js
+++ b/src/bg-ui/index.js
@@ -14,8 +14,6 @@
  import BgLayoutCard from './bg-layout-card.vue'
  import BgCard from './bg-card.vue'
  import BgInfo from './bg-info.vue'
- import BgSteps from './bg-steps.vue'
- import BgStep from './bg-step.vue'
  import BgBtns from './bg-btns.vue'
  import BgUpload from './bg-upload.vue'
  import BgUploadImage from './bg-upload-image.vue'
@@ -52,8 +50,6 @@ const components = {
   BgLayoutCard, // 带标题的卡片
   BgCard, // 详情卡片
   BgInfo, // 表格信息
-  BgSteps, // 步骤条
-  BgStep, // 步骤条
   BgBtns, // 按钮组
   BgUpload, // 上传附件
   BgUploadImage, // 上传单张图片
diff --git a/src/bg-ui/index.scss b/src/bg-ui/index.scss
index f71ab04..459fe85 100644
--- a/src/bg-ui/index.scss
+++ b/src/bg-ui/index.scss
@@ -1529,176 +1529,6 @@ a {
   }
 }
 
-.bg-steps {
-  background-color: #ffffff;
-  box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1);
-  border-radius: 6px;
-  padding: 14px;
-
-  > .bg-steps-container {
-    .steps-nav {
-      padding: 18px 16px 31px;
-      border-bottom: 1px solid #f4f7fc;
-
-      > ul {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        > .step-item {
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-          margin: 0 16px;
-
-          > .step-icon {
-            position: relative;
-            width: 30px;
-            height: 30px;
-            border-radius: 50%;
-            background-color: #e3e5ef;
-
-            &::before {
-              content: "";
-              width: 16px;
-              height: 16px;
-              border-radius: 50%;
-              background-color: #bcc1d0;
-              position: absolute;
-              top: 7px;
-              left: 7px;
-            }
-          }
-
-          > .step-hightlight-icon {
-            position: relative;
-            width: 70px;
-            height: 70px;
-            border-radius: 50%;
-            background-color: #2d96c9;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            display: none;
-
-            &::before {
-              content: "";
-              width: 60px;
-              height: 60px;
-              border: solid 3px #84bfdc;
-              box-sizing: border-box;
-              border-radius: 50%;
-              position: absolute;
-              top: 5px;
-              left: 5px;
-            }
-          }
-
-          > .step-title {
-            margin-left: 15px;
-
-            > p {
-              line-height: 1;
-              color: #bcc1d0;
-
-              &:nth-child(1) {
-                font-weight: bolder;
-                font-size: 18px;
-              }
-
-              &:nth-child(2) {
-                font-size: 14px;
-                margin-top: 12px;
-              }
-            }
-          }
-
-          &.done,
-          &.current {
-            > .step-icon {
-              display: none;
-            }
-
-            > .step-hightlight-icon {
-              display: flex;
-            }
-          }
-
-          > .step-title {
-            margin-left: 15px;
-
-            > p {
-              &:nth-child(1) {
-                color: #242c43;
-              }
-
-              &:nth-child(2) {
-                color: #8890a7;
-              }
-            }
-          }
-        }
-
-        > .step-line {
-          width: 100px;
-          flex: 1 1 auto;
-          height: 4px;
-          background-color: #e3e5ef;
-          border-radius: 2px 0px 0px 2px;
-
-          &.done,
-          &.current {
-            background-color: #2d96c9;
-          }
-        }
-      }
-    }
-
-    .steps-content {
-      margin-top: 20px;
-    }
-  }
-}
-
-.bg-step {
-  .step-done {
-    display: flex;
-    justify-self: center;
-    align-items: center;
-
-    > .done-icon {
-      margin-right: 15px;
-    }
-
-    > .done-info {
-      > p {
-        line-height: 1.5;
-
-        &:nth-child(1) {
-          font-weight: bolder;
-          font-size: 18px;
-          color: #242c43;
-        }
-
-        &:nth-child(2) {
-          font-size: 14px;
-          color: #8890a7;
-          margin-top: 5px;
-        }
-      }
-    }
-  }
-
-  > .step-action {
-    overflow: hidden;
-    margin-top: 20px;
-
-    > .fr {
-      float: right;
-    }
-  }
-}
-
 .bg-btns {
   display: inline-block;
 
diff --git a/src/components/ability-card.vue b/src/components/ability-card.vue
index 924c656..3d2c77e 100644
--- a/src/components/ability-card.vue
+++ b/src/components/ability-card.vue
@@ -1,68 +1,64 @@
 <template>
-  <div class="item_card" :style="{'height':props.flag ? '242px' : '206px'}">
+  <div class="item_card" :style="{ height: props.flag ? '242px' : '206px' }">
     <div class="action_box" v-if="props.flag">
       <div class="can_click_text" @click="deleteItem(props.item)">删除</div>
       <div class="can_click_text" @click="move(1)" :class="props.item.canDown ? '' : 'disabled'">下移</div>
       <div class="can_click_text" @click="move(2)" :class="props.item.canUp ? '' : 'disabled'">上移</div>
     </div>
-    <div class="top_info" :style="{'padding-left': !props.flag ? '8px' : '24px'}">
+    <div class="top_info" :style="{ 'padding-left': !props.flag ? '8px' : '24px' }">
       <el-checkbox
         v-if="!props.flag"
         class="select_box"
         v-model="props.item.checked"
-        @change="change_check"
-      ></el-checkbox>
+        @change="change_check"></el-checkbox>
       <div class="logo">
-        <img v-if="props.item.ability_logo" :src="props.item.ability_logo" alt="">
-        <img v-else src="../assets/imgs/img_cover_ability.png" alt="">
+        <img v-if="props.item.ability_logo" :src="props.item.ability_logo" alt="" />
+        <img v-else src="../assets/imgs/img_cover_ability.png" alt="" />
       </div>
       <div class="info">
         <div class="name">
-          <span class="ability_name">{{props.item.ability_name}}</span>
-          <span class="icon_box openness" :class="openClassObj[props.item.openness_id]">{{props.item.openness}}</span>
+          <span class="ability_name">{{ props.item.ability_name }}</span>
+          <span class="icon_box openness" :class="openClassObj[props.item.openness_id]">{{ props.item.openness }}</span>
           <span class="icon_box mock" v-if="props.item.include_mock_service">mock</span>
         </div>
         <div class="count">
           <div class="box1">
             <div class="score_box">
-              <el-rate
-              v-model="props.item.score"
-              disabled
-            />
+              <el-rate v-model="props.item.score" disabled />
             </div>
-            <span class="score">{{props.item.score}}</span>
+            <span class="score">{{ props.item.score }}</span>
           </div>
           <div class="line"></div>
           <div class="box2">
             阅读{{
               props.item.browse_count == 0 || (props.item.browse_count && props.item.browse_count < 10000)
-              ? props.item.browse_count 
-              : props.item.browse_count < 10000000 
-              ? Math.floor(props.item.browse_count/10000) + '万+' 
-              : '999万+'
+                ? props.item.browse_count
+                : props.item.browse_count < 10000000
+                ? Math.floor(props.item.browse_count / 10000) + "万+"
+                : "999万+"
             }}
           </div>
           <div class="line"></div>
           <div class="box3">
             调用{{
               props.item.call_count == 0 || (props.item.call_count && props.item.call_count < 10000)
-              ? props.item.call_count 
-              : props.item.call_count < 10000000 
-              ? Math.floor(props.item.call_count/10000) + '万+' 
-              : '999万+'
+                ? props.item.call_count
+                : props.item.call_count < 10000000
+                ? Math.floor(props.item.call_count / 10000) + "万+"
+                : "999万+"
             }}
           </div>
         </div>
       </div>
     </div>
-    <div class="bottom_info" :style="{'height':props.flag ? 'calc(100% - 128px)' : 'calc(100% - 92px)'}">
+    <div class="bottom_info" :style="{ height: props.flag ? 'calc(100% - 128px)' : 'calc(100% - 92px)' }">
       <div class="desc" :title="props.item.synopsis">
-        {{props.item.synopsis}}
+        {{ props.item.synopsis }}
       </div>
       <div class="action">
         <span class="fws" :title="props.item.develop">
-          <bg-icon style="font-size: 14px; color: #909bb6;" icon="#bg-ic-shop" />
-          {{props.item.develop}}
+          <bg-icon style="font-size: 14px; color: #909bb6" icon="#bg-ic-shop" />
+          {{ props.item.develop }}
         </span>
       </div>
     </div>
@@ -70,56 +66,54 @@
 </template>
 
 <script setup>
-import { useRouter } from "vue-router"
+import { useRouter } from "vue-router";
 
-const router = useRouter()
+const router = useRouter();
 const props = defineProps({
   item: {
     type: Object,
-    default: {}
+    default: {},
   },
   flag: {
     type: Boolean,
-    default: false
-  }
-})
-const emit = defineEmits(["change_check","deleteItem","move"])
+    default: false,
+  },
+});
+const emit = defineEmits(["change_check", "deleteItem", "move"]);
 const openClassObj = {
-  '9de06ba6-6ee2-4449-91d9-31a1c7554311':'open',
-  '4e8b4c37-e565-4195-8303-3b1ccd48dd13':'share',
-  '4e8b4c37-e565-4195-8303-3b1ccd48dd12':'limit',
-  '4e8b4c37-e565-4195-8303-3b1ccd48dd16':'sensitive'
-}
+  "9de06ba6-6ee2-4449-91d9-31a1c7554311": "open",
+  "4e8b4c37-e565-4195-8303-3b1ccd48dd13": "share",
+  "4e8b4c37-e565-4195-8303-3b1ccd48dd12": "limit",
+  "4e8b4c37-e565-4195-8303-3b1ccd48dd16": "sensitive",
+};
 
 const change_check = () => {
-  console.log(props.item)
-  emit("change_check",props.item)
-}
+  console.log(props.item);
+  emit("change_check", props.item);
+};
 const deleteItem = (item) => {
-  emit("deleteItem",item)
-}
+  emit("deleteItem", item);
+};
 const move = (type) => {
   if ((type == 1 && !props.item.canDown) || (type == 2 && !props.item.canUp)) {
-    return
+    return;
   }
   let temp = {
     item: props.item,
-    type: type
-  }
-  emit("move",temp)
-}
+    type: type,
+  };
+  emit("move", temp);
+};
 </script>
 
 <style lang="scss" scoped>
-
 .item_card {
   width: 384px;
   // margin-right: 16px;
   margin-bottom: 16px;
   height: 206px;
   background-color: #ffffff;
-  box-shadow: 0px 4px 16px 0px 
-    rgba(18, 30, 63, 0.08);
+  box-shadow: 0px 4px 16px 0px rgba(18, 30, 63, 0.08);
   border-radius: 6px;
   &:nth-child(3n) {
     margin-right: 0;
@@ -144,7 +138,7 @@ const move = (type) => {
     width: 100%;
     height: 92px;
     padding: 0 16px 0 8px;
-    
+
     padding-top: 24px;
     border-bottom: 1px solid #edeff2;
     display: flex;
@@ -194,22 +188,21 @@ const move = (type) => {
           border-color: #a1cfc5;
         }
 
-        .open{
+        .open {
           background-color: #f0f5eb;
-          border-color:#bbd19e;
+          border-color: #bbd19e;
           color: #78a33d;
         }
-        .share{
-          
+        .share {
         }
-        .limit{
+        .limit {
           background-color: #fcf0e6;
-	        border-color: #f2b380;
+          border-color: #f2b380;
           color: #e56600;
         }
-        .sensitive{
+        .sensitive {
           background-color: #fbeeeb;
-	        border-color: #eba89c;
+          border-color: #eba89c;
           color: #d75138;
         }
         .mock {
@@ -298,4 +291,4 @@ const move = (type) => {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/ability-list.vue b/src/components/ability-list.vue
index 89a7ebc..c771a84 100644
--- a/src/components/ability-list.vue
+++ b/src/components/ability-list.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="card_list">
-    <div v-for="(e,i) in props.list" :key="'card' + i" class="item">
-      <ability-card v-if="e.id" :item="e" @change_check="changeCheck" :flag="props.flag" @deleteItem="deleteItem" @move="move"/>
+    <div v-for="(e, i) in props.list" :key="'card' + i" class="item">
+      <ability-card
+        v-if="e.id"
+        :item="e"
+        @change_check="changeCheck"
+        :flag="props.flag"
+        @deleteItem="deleteItem"
+        @move="move" />
       <div v-else class="empty_card" @click="open">
         <span>+</span>
       </div>
@@ -10,31 +16,31 @@
 </template>
 
 <script setup>
-import abilityCard from "./ability-card.vue"
+import abilityCard from "./ability-card.vue";
 const props = defineProps({
   list: {
     type: Array,
-    default: []
+    default: [],
   },
   flag: {
     type: Boolean,
-    default: false
-  }
-})
-const emit = defineEmits(["changeCheck","openBox","deleteItem","move"])
+    default: false,
+  },
+});
+const emit = defineEmits(["changeCheck", "openBox", "deleteItem", "move"]);
 const changeCheck = (item) => {
-  emit("changeCheck",item)
-}
+  emit("changeCheck", item);
+};
 const open = () => {
-  console.log(3333)
-  emit("openBox")
-}
+  console.log(3333);
+  emit("openBox");
+};
 const deleteItem = (item) => {
-  emit("deleteItem",item)
-}
+  emit("deleteItem", item);
+};
 const move = (temp) => {
-  emit("move",temp)
-}
+  emit("move", temp);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -62,4 +68,4 @@ const move = (temp) => {
     font-weight: 100;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/input-table.vue b/src/components/input-table.vue
index b301f32..d3ca6a7 100644
--- a/src/components/input-table.vue
+++ b/src/components/input-table.vue
@@ -1,47 +1,40 @@
 <template>
-  <el-form
-    ref="ruleFormRef"
-    class="ruleForm"
-    :model="tableRows"
-    :size="formSize"
-    :rules="formRules"
-  >
-    <bg-table-pro
-      :headers="headers"
-      :data="tableRows"
-      ref="input-table"
-      :border="true"
-      :stripe="false"
-    >
-      <template v-slot:name="{ row,index }">
-        <el-form-item
-          :prop="`[${index}].name`"
-          :rules="formRules.name"
-        >
-          <el-input @change="changeName" :disabled="disabled||acDisable" v-model="row.name" />
+  <el-form ref="ruleFormRef" class="ruleForm" :model="tableRows" :size="formSize" :rules="formRules">
+    <bg-table-pro :headers="headers" :data="tableRows" ref="input-table" :border="true" :stripe="false">
+      <template v-slot:name="{ row, index }">
+        <el-form-item :prop="`[${index}].name`" :rules="formRules.name" style="width: 100%">
+          <el-input @change="changeName" :disabled="disabled || acDisable" v-model.trim="row.name" />
         </el-form-item>
       </template>
-      <template v-slot:value="{ row,index }">
-        <el-form-item
-          :prop="`[${index}].value`"
-          :rules="formRules.value"
-        >
-          <el-input @change="changeValue" :disabled="disabled" v-model="row.value" />
+      <template v-slot:value="{ row, index }">
+        <el-form-item :prop="`[${index}].value`" :rules="formRules.value" style="width: 100%">
+          <el-input @change="changeValue" :disabled="disabled" v-model.trim="row.value" />
         </el-form-item>
       </template>
-      <template v-slot:desc="{ row,index }">
-        <el-form-item
-          :prop="`[${index}].desc`"
-          :rules="formRules.desc"
-        >
-          <el-input :disabled="disabled" v-model="row.desc" />
+      <template v-slot:desc="{ row, index }">
+        <el-form-item :prop="`[${index}].desc`" :rules="formRules.desc" style="width: 100%">
+          <el-input @change="changeDesc" :disabled="disabled" v-model.trim="row.desc" />
         </el-form-item>
       </template>
 
-      <template v-slot:action="{ row,index }">
-        <bg-table-btn :disabled="disabled||acDisable" :click="()=>{addParam(index)}">增加</bg-table-btn>
-        <bg-table-btn :disabled="disabled||acDisable" :click="()=>{removeParam(row, index)}">
-            删除
+      <template v-slot:action="{ row, index }">
+        <bg-table-btn
+          :disabled="disabled || acDisable"
+          :click="
+            () => {
+              addParam(index);
+            }
+          "
+          >增加</bg-table-btn
+        >
+        <bg-table-btn
+          :disabled="disabled || acDisable"
+          :click="
+            () => {
+              removeParam(row, index);
+            }
+          ">
+          删除
         </bg-table-btn>
       </template>
     </bg-table-pro>
@@ -49,67 +42,60 @@
 </template>
 
 <script setup>
-import {
-  reactive,
-  toRefs,
-  onBeforeMount,
-  onMounted,
-  ref,
-  getCurrentInstance,
-} from "vue";
+import { reactive, toRefs, onBeforeMount, onMounted, ref, getCurrentInstance } from "vue";
 import { v4 as uuidv4 } from "uuid";
 const props = defineProps({
-    data: {
-      type: Array,
-      default:()=>[]
-    },
-    disabled:{
-      type:Boolean,
-      default:false
-    },
-    acDisable:{
-      type:Boolean,
-      default:false
-    }
-})
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  acDisable: {
+    type: Boolean,
+    default: false,
+  },
+});
 
-const emit = defineEmits(['change'])
+const emit = defineEmits(["change"]);
 const formSize = ref("default");
 const ruleFormRef = ref(null);
 
 const formRules = reactive({
-    name:[
-      {
-        required: true, 
-        message: '请输入键', 
-        trigger: 'blur'
-      },
-      {
-        max: 30,
-        message: '最多30个字符', 
-        trigger: 'blur'
-      }
-    ],
-    value:[
-      {
-        required: true, 
-        message: '请输入值', 
-        trigger: 'blur'
-      },
-      {
-        min: 0,
-        max: 50,
-        message: '最多50个字符', 
-        trigger: 'blur'
-      }
-    ],
-    desc:[
-      {
-        max: 50,
-        message: '最多50个字符', 
-        trigger: 'blur'
-      }
-    ]
+  name: [
+    {
+      required: true,
+      message: "请输入键",
+      trigger: "blur",
+    },
+    {
+      max: 50,
+      message: "最多50个字符",
+      trigger: "blur",
+    },
+  ],
+  value: [
+    {
+      required: true,
+      message: "请输入值",
+      trigger: "blur",
+    },
+    {
+      min: 0,
+      max: 500,
+      message: "最多500个字符",
+      trigger: "blur",
+    },
+  ],
+  desc: [
+    {
+      max: 500,
+      message: "最多500个字符",
+      trigger: "blur",
+    },
+  ],
 });
 
 const headers = reactive([
@@ -133,76 +119,84 @@ const headers = reactive([
 ]);
 
 const state = reactive({
-    tableRows:[]
+  tableRows: [],
 });
 
-onBeforeMount(()=>{
-    initTable()
-})
-
-var initTable = ()=>{
-    if(props.data&&props.data.length>=1){
-        state.tableRows = props.data
-    }else{
-        addParam(0)
-    }
-}
-
-var createRow = ()=>{
-    return{
-        id:uuidv4(),
-        name:'',
-        value:'',
-        desc:''
-    }
-}
-
-var addParam = (index)=>{changeName
-    state.tableRows.splice(index + 1, 0, createRow());
-}
+onBeforeMount(() => {
+  initTable();
+});
 
-var removeParam = (row, index)=>{
-    state.tableRows.splice(index, 1);
-    if (state.tableRows.length === 0) {
-        addParam(0);
+var initTable = () => {
+  if (props.data && props.data.length >= 1) {
+    state.tableRows = props.data;
+  } else {
+    state.tableRows = [];
+    addParam(0);
+  }
+};
+
+var createRow = () => {
+  return {
+    id: uuidv4(),
+    name: "",
+    value: "",
+    desc: "",
+  };
+};
+
+var addParam = (index) => {
+  state.tableRows.splice(index + 1, 0, createRow());
+};
+
+var removeParam = (row, index) => {
+  state.tableRows.splice(index, 1);
+  if (state.tableRows.length === 0) {
+    addParam(0);
+  }
+};
+
+const changeName = () => {
+  emit("change", {
+    type: "name",
+    data: state.tableRows,
+  });
+};
+
+const changeValue = () => {
+  emit("change", {
+    type: "value",
+    data: state.tableRows,
+  });
+};
+
+const changeDesc = () => {
+  emit("change", {
+    type: "desc",
+    data: state.tableRows,
+  });
+};
+
+var getInputData = () => {
+  let lastData = [];
+  let tempObj = {};
+  state.tableRows.forEach((e) => {
+    tempObj[e.name] = e;
+  });
+  for (const key in tempObj) {
+    if (key && tempObj[key].value) {
+      lastData.push(tempObj[key]);
     }
-}
-
-const changeName = ()=>{
-  emit('change',{
-    type:'name',
-    data:state.tableRows
-  })
-}
-
-const changeValue= ()=>{
-  emit('change',{
-    type:'value',
-    data:state.tableRows
-  })
-}
-
-var getInputData = ()=>{
-    let lastData = []
-    let tempObj = {}
-    state.tableRows.forEach(e => {
-      tempObj[e.name] = e
-    });
-    for (const key in tempObj) {
-      if(key&&tempObj[key].value){
-        lastData.push(tempObj[key])
-      }
-    }
-    return lastData
-}
+  }
+  return lastData;
+};
 
-const {tableRows} = toRefs(state)
+const { tableRows } = toRefs(state);
 
 //暴露获取数据方法
 defineExpose({
-    getInputData,
-    initTable
-})
+  getInputData,
+  initTable,
+});
 </script>
 
 <style scoped></style>
diff --git a/src/components/table/MyTableColumn.vue b/src/components/table/MyTableColumn.vue
index 731f122..3d24462 100644
--- a/src/components/table/MyTableColumn.vue
+++ b/src/components/table/MyTableColumn.vue
@@ -1,30 +1,23 @@
 <template>
   <el-table-column :label="coloumnHeader.label" header-align="center">
-    <template v-for="(item,index) in coloumnHeader.children" :key="'header' + index">
-      <MyTableColumn
-        v-if="item.children && item.children.length"
-        :coloumnHeader="item"
-      ></MyTableColumn>
+    <template v-for="(item, index) in coloumnHeader.children" :key="'header' + index">
+      <MyTableColumn v-if="item.children && item.children.length" :coloumnHeader="item"></MyTableColumn>
       <el-table-column
         v-else
         :label="item.label"
         :prop="item.prop"
         header-align="center"
         :align="item.align"
-        :width="item.width"
-      ></el-table-column>
+        :width="item.width"></el-table-column>
     </template>
   </el-table-column>
 </template>
 
-<script>
-export default {
-  name: "MyTableColumn",
-  props: {
-    coloumnHeader: {
-      type: Object,
-      default: {}
-    }
-  }
-}
-</script>
\ No newline at end of file
+<script setup>
+const props = defineProps({
+  coloumnHeader: {
+    type: Object,
+    default: {},
+  },
+});
+</script>
-- 
2.26.0