From 4d9b3a903804e5a7514d273b2f994205fef878f7 Mon Sep 17 00:00:00 2001
From: baishun <baishun@wodcloud.com>
Date: Fri, 17 Feb 2023 09:47:11 +0800
Subject: [PATCH] update bg-ui with 'apaas-portal-ui'

---
 src/bg-ui/bg-btns.vue              |  35 ++-
 src/bg-ui/bg-card.vue              |  67 +++--
 src/bg-ui/bg-detail-table.vue      | 181 +++++++-------
 src/bg-ui/bg-detail-table2.vue     | 135 ++++------
 src/bg-ui/bg-detail.vue            | 105 ++++----
 src/bg-ui/bg-filter-date.vue       |  50 ++--
 src/bg-ui/bg-filter-group.vue      |  96 ++++---
 src/bg-ui/bg-filter.vue            |  59 ++---
 src/bg-ui/bg-filtrate.vue          | 136 +++++-----
 src/bg-ui/bg-icon.vue              |  18 +-
 src/bg-ui/bg-info.vue              | 176 +++++++------
 src/bg-ui/bg-layout-card.vue       | 140 +++++------
 src/bg-ui/bg-list.vue              |  44 ++--
 src/bg-ui/bg-nav-list.vue          | 134 ++++++----
 src/bg-ui/bg-nav.vue               |  40 ++-
 src/bg-ui/bg-pagination.vue        | 102 ++++----
 src/bg-ui/bg-rich-text.vue         | 249 ++++++++-----------
 src/bg-ui/bg-sort.vue              |  75 +++---
 src/bg-ui/bg-step.vue              |  42 ----
 src/bg-ui/bg-steps.vue             | 106 --------
 src/bg-ui/bg-switch.vue            | 159 ++++++------
 src/bg-ui/bg-tab.vue               |  84 +++----
 src/bg-ui/bg-table-btn.vue         |  41 ++-
 src/bg-ui/bg-table-btns.vue        |   6 +-
 src/bg-ui/bg-table-btns2.vue       | 169 +++++++++++++
 src/bg-ui/bg-table-pro.vue         | 263 ++++++++++----------
 src/bg-ui/bg-table.vue             | 314 ++++++++++++-----------
 src/bg-ui/bg-tabs.vue              |  74 +++---
 src/bg-ui/bg-tags.vue              |  84 +++----
 src/bg-ui/bg-upload-image.vue      | 387 ++++++++++++++---------------
 src/bg-ui/bg-upload.vue            | 287 ++++++++++-----------
 src/bg-ui/bg-user-upload-image.vue |  97 ++++----
 src/bg-ui/index.js                 |   6 +-
 src/bg-ui/index.scss               |  93 +++++--
 34 files changed, 2001 insertions(+), 2053 deletions(-)
 delete mode 100644 src/bg-ui/bg-step.vue
 delete mode 100644 src/bg-ui/bg-steps.vue
 create mode 100644 src/bg-ui/bg-table-btns2.vue

diff --git a/src/bg-ui/bg-btns.vue b/src/bg-ui/bg-btns.vue
index abe7773..1140505 100644
--- a/src/bg-ui/bg-btns.vue
+++ b/src/bg-ui/bg-btns.vue
@@ -15,24 +15,21 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgBtns",
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: "",
-    },
-    options: {
-      type: Array,
-      default: () => [],
-    },
+<script setup>
+import { reactive, ref,onBeforeMount,toRefs  } from 'vue'
+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 a473955..c34605e 100644
--- a/src/bg-ui/bg-card.vue
+++ b/src/bg-ui/bg-card.vue
@@ -1,29 +1,58 @@
 <template>
   <div class="bg-card">
-    <h3 class="card-title text-clip">
-      <span class="title-icon" v-if="icon">
-        <bg-icon :icon="icon" />
-      </span>
-      <span class="title-text">{{ title }}</span>
-    </h3>
+    <div class="card-header">
+      <slot name="title">
+        <h3 class="card-title text-clip">
+          <span class="title-icon" v-if="icon">
+            <bg-icon :icon="icon" />
+          </span>
+          <span class="easy-icon" v-if="easyIcon"></span>
+          <span class="title-text">{{ title }}</span>
+          <span class="subtitle-text" v-if="subTitle">{{ subTitle }}</span>
+        </h3>
+      </slot>
+      <slot name="title-extra"></slot>
+    </div>
     <div class="card-content" ref="content">
       <slot />
     </div>
   </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: "",
+  },
+  subTitle:{
+    type: String,
+    default: "",
   },
-};
+  icon: {
+    type: String,
+    default: "",
+  },
+  easyIcon:{
+    type:Boolean,
+    default:false,
+  }
+})
 </script>
+
+<style scoped>
+.easy-icon{
+  width: 4px;
+	height: 14px;
+	background-color: #3759be;
+	border-radius: 2px;
+  margin-right: 8px;
+}
+.subtitle-text{
+  font-size: 14px;
+	color: #909bb6;
+  font-weight: 400;
+  line-height: 5px;
+  margin-top: 4px;
+}
+</style>
\ No newline at end of file
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..2dd7202 100644
--- a/src/bg-ui/bg-detail.vue
+++ b/src/bg-ui/bg-detail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-detail bg-form">
+  <div class="bg-detail bg-form" ref="bgDetail">
     <!-- 固定导航 -->
     <div class="bg-tabs-nav--fixed" v-show="showFixedBars">
       <ul v-if="calcTabs().length">
@@ -60,32 +60,30 @@
   </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() {
+<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 (this.$slots.default) {
-        tabSlots = this.$slots.default
+      if (slots.default()) {
+        tabSlots = slots.default()
           .filter(
             (vnode) =>
               vnode.tag &&
@@ -96,48 +94,47 @@ export default {
       }
 
       return tabSlots;
-    },
-    changeActiveName({ name }, index) {
-      let targetEl = this.$el.querySelectorAll(`.bg-tab`)[index];
+    }
+const changeActiveName=({ name }, index)=> {
+      let targetEl = bgDetail.value.querySelectorAll(`.bg-tab`)[index];
       let targetCtx = document.querySelector(`.bg-main`);
 
       targetCtx.scrollTop = targetEl && targetEl.offsetTop - 165;
 
-      this.activeName = name;
-      this.scrollCallback = () => {
-        this.activeName = name;
+      activeName.value = name;
+      state.scrollCallback = () => {
+        activeName.value = name;
       };
-    },
-    scrollAction() {
+    }
+const scrollAction=()=> {
       let targetCtx = document.querySelector(`.bg-main`);
       let ctxScrollTop = targetCtx.scrollTop || 0;
-      let targetEls = this.$el.querySelectorAll(`.bg-tab`);
-      let tabs = this.calcTabs();
+      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) {
-          this.activeName = tabs[i].name;
+          activeName.value = 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);
-  },
-};
+      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..c2f3d6e 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,31 @@
   </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 change=(event)=> {
+//   emit("update:time", event);
+// }
+
+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 2965825..d4358b0 100644
--- a/src/bg-ui/bg-filter-group.vue
+++ b/src/bg-ui/bg-filter-group.vue
@@ -1,66 +1,100 @@
 <template>
-  <div class="bg-filter-group" :style="{'border-bottom': showFlag? 'none' : '','padding-bottom': showFlag? '8px':'16px'}">
+  <div
+    class="bg-filter-group"
+    :style="
+      showFlag
+        ? { 'border-bottom': 'none', 'padding-bottom': '8px' }
+        : { 'border-bottom': '', 'padding-bottom': '16px' }
+    ">
     <div class="top-filter">
       <div class="left-slot">
         <slot name="left_action"></slot>
       </div>
       <div class="right-filter">
-        <el-input :placeholder="placeholder" @keydown.enter="search" @clear="search" clearable v-model.trim="modelValue">
+        <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">
-        <slot name="filter_group"></slot>
+    <div class="filter-group" ref="filterGroup" 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, nextTick } from "vue";
+
 const state = reactive({
-  showFlag: false,
-  modelValue: ""
-})
+  showFlag: true,
+  modelValue: "",
+});
+
+// const filterGroup = ref(null);
 
 const props = defineProps({
   modelValue: {
     type: String,
-    default: '',
+    default: "",
   },
   placeholder: {
     type: String,
-    default: "请输入关键词"
-  }
-})
+    default: "请输入关键词",
+  },
+  showSearch: {
+    type: Boolean,
+    default: true,
+  },
+});
 
-watch(props,(n,o) => {
-  state.modelValue = n.modelValue
-})
-watch(() => state.modelValue,(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",
+  // "changeHeight"
+]);
 const search = () => {
-  emit('search',state.modelValue)
-}
+  emit("search", state.modelValue);
+};
 const moreFilter = () => {
-  state.showFlag = !state.showFlag
-}
+  state.showFlag = !state.showFlag;
+  // nextTick().then(() => {
+  //   console.dir(filterGroup.value)
+  //   let height = filterGroup.value.offsetHeight
+  //   // console.log(height)
+  //   emit("changeHeight",height)
+  // })
+};
 onMounted(() => {
-  state.modelValue = props.modelValue
-})
-const { modelValue,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..9554431 100644
--- a/src/bg-ui/bg-filter.vue
+++ b/src/bg-ui/bg-filter.vue
@@ -15,22 +15,17 @@
   </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:{
+  isCalc:{
       type:Boolean,
       default:false,
     },
-    value: {
-      type: [Number, String],
-      default: "",
-    },
     name: {
       type: String,
       default: "",
@@ -51,34 +46,34 @@ export default {
       type: Boolean,
       default: false,
     },
-  },
-  computed: {
-    fullOptions() {
+});
+
+const emit = defineEmits(['update:modelValue'])
+
+const fullOptions = computed(()=> {
       return [
         {
           name: "全部",
           value: "",
         },
-        ...this.options.map((item) => {
+        ...props.options.map((item) => {
           return {
-            name: item[this.optionName],
-            value: item[this.optionValue] + "",
+            name: item[props.optionName],
+            value: item[props.optionValue] + "",
             sub_cate: item.sub_cate ? item.sub_cate : "",
           };
         }),
       ];
-    },
-    selection() {
-      let value = this.value + "";
+    })
+const selection = computed(()=> {
+      let value = props.modelValue + "";
 
       return value.split(",");
-    },
-    
-  },
-  methods: {
-    selectAction({ value, name, sub_cate }) {
-      if (value && this.multiple) {
-        let selection = [...this.selection].filter((v) => v !== "");
+    })
+
+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) {
@@ -87,11 +82,9 @@ export default {
           selection.push(value);
         }
 
-        this.$emit("change", selection.join(","));
+        emit("update:modelValue", selection.join(","));
       } else {
-        this.$emit("change", value, name, sub_cate ? sub_cate : "");
+        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..0140afa 100644
--- a/src/bg-ui/bg-filtrate.vue
+++ b/src/bg-ui/bg-filtrate.vue
@@ -6,85 +6,83 @@
         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";
+
+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,
-    },
+  isCalc: {
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    fullOptions() {
-      return [
-        {
-          name: "全部",
-          value: "",
-        },
-        ...this.options.map((item) => {
-          return {
-            name: item[this.optionName],
-            value: item[this.optionValue] + "",
-          };
-        }),
-      ];
-    },
-    selection() {
-      let value = this.value + "";
-
-      return value.split(",");
-    },
+  name: {
+    type: String,
+    default: "",
   },
-  methods: {
-    selectAction({ value, name }) {
-      if (value && this.multiple) {
-        let selection = [...this.selection].filter((v) => v !== "");
-        let index = selection.findIndex((v) => v === value);
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  optionName: {
+    type: String,
+    default: "name",
+  },
+  optionValue: {
+    type: String,
+    default: "value",
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+});
 
-        if (index > -1) {
-          selection.splice(index, 1);
-        } else {
-          selection.push(value);
-        }
+const emit = defineEmits(["update:modelValue"]);
 
-        this.$emit("change", selection.join(","));
-      } else {
-        this.$emit("change", value, name);
-      }
+const fullOptions = computed(() => {
+  return [
+    {
+      name: "全部",
+      value: "",
     },
-  },
+    ...props.options.map((item) => {
+      return {
+        name: item[props.optionName],
+        value: item[props.optionValue] + "",
+      };
+    }),
+  ];
+});
+const selection = computed(() => {
+  let value = props.modelValue + "";
+
+  return value.split(",");
+});
+
+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);
+  }
 };
-</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 6a96702..a66160d 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_220.40af3ff1115b250314027a7e199e042a.js";
+<script setup>
+import "https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_19654_229.cab419d7be9fcc68760c67d9dcb0cb4a.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 1790258..613a36f 100644
--- a/src/bg-ui/bg-info.vue
+++ b/src/bg-ui/bg-info.vue
@@ -6,115 +6,109 @@
         :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'
-            }"
-          >{{ item.value }}</span>
-          <a
+              width: item.copy ? 'calc(100% - 36px)' : item.download || item.password ? 'calc(100% - 22px)' : '100%',
+              color: item.download ? '#3759be' : '#404a62',
+            }">
+            <span v-if="item.callback" @click.stop="item.callback && item.callback()" class="can_click_text" style="text-decoration:underline">{{
+              item.value
+            }}</span>
+            <span v-else>{{ item.value }}</span>
+          </span>
+          <a class="copy-btn" @click="copyText(item.value, $event)" v-if="item.copy"> 复制 </a>
+          <bg-icon
             class="copy-btn"
-            @click="copyText(item.value, $event)"
-            v-if="item.copy"
-          >
-            复制
-          </a>
-          <bg-icon 
-            class="copy-btn"
-            style="font-size: 14px;cursor: pointer;" 
-            icon="#bg-ic-download" 
+            :class="item.url.indexOf('/') == -1 ? 'copy-btn-dis' : ''"
+            style="font-size: 14px; 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;cursor: pointer;" 
-            :icon="show ? '#bg-ic-eye-close' : '#bg-ic-eye'" 
+            style="font-size: 14px; 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 { reactive, ref, onBeforeMount, toRefs } from "vue";
 import Clipboard from "clipboard";
+import { ElMessage } from "element-plus";
 
-export default {
-  name: "BgInfo",
-  props: {
-    data: {
-      type: Array,
-      default: () => [],
-    },
-    col: {
-      type: Number,
-      default: 2,
-    },
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
   },
-  data() {
-    return {
-      show: false
-    }
+  col: {
+    type: Number,
+    default: 2,
   },
-  methods: {
-    clipboardSuccess() {
-      this.$message({
-        type: "success",
-        message: "复制成功",
-        duration: 1500,
-      });
-    },
-    clipboardError() {
-      this.$message({
-        message: "浏览器不支持自动复制",
-        type: "warning",
-      });
-    },
-    copyText(text, e) {
-      const clipboard = new Clipboard(e.target, {
-        text: () => text,
-      });
+});
 
-      clipboard.on("success", () => {
-        this.clipboardSuccess();
-        // 释放内存
-        clipboard.destroy();
-      });
+const show = ref(false);
 
-      clipboard.on("error", () => {
-        // 不支持复制
-        this.clipboardError();
-        // 释放内存
-        clipboard.destroy();
-      });
-      
-      // 解决第一次点击不生效的问题，如果没有，第一次点击会不生效
-      clipboard.onClick(e);
-    },
-    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
-    }
-  },
+const clipboardSuccess = () => {
+  ElMessage({
+    type: "success",
+    message: "复制成功",
+    duration: 1500,
+  });
+};
+const clipboardError = () => {
+  ElMessage({
+    message: "浏览器不支持自动复制",
+    type: "warning",
+  });
+};
+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 download = (url) => {
+  if (url.indexOf("/") == -1) {
+    return;
+  }
+  const a = document.createElement("a"); // 创建a标签
+  a.setAttribute("download", ""); // download属性
+  a.setAttribute("href", url); // href链接
+  a.click(); // 自执行点击事件
+};
+const changeView = (item) => {
+  if (!show.value) {
+    item.value = item.realValue;
+  } else {
+    item.value = "***************";
+  }
+  show.value = !show.value;
 };
 </script>
diff --git a/src/bg-ui/bg-layout-card.vue b/src/bg-ui/bg-layout-card.vue
index 7e545d9..708e139 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,81 @@
   </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;
+};
+const downloadAction = () => {
+  if (downloading.value) {
+    return;
+  }
 
-          this.downloading = false;
-        });
-      });
-    },
-  },
+  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..bde6ff9 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 bg-no-scroll" 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>
@@ -41,51 +48,68 @@
   </ul>
 </template>
 
+
 <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, ref, onBeforeMount, toRefs, onMounted } 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.path);
+    if (e.children && e.children.length) {
+      getChildrenPath(e.children, temp);
+    }
+  });
+  return temp;
+};
+const isCurrent = (path) => {
+  return (props.highlightParentRule && props.highlightParentRule(path)) || false;
 };
+
+/**
+ * @description 菜单高度过长，对于不在视野中的元素需要scrollIntoView
+ */
+const setCurrentIntoView = ()=>{
+  let current = document.querySelector(".current")
+  if(!current){
+    return
+  }
+  let screenHeight = document.body.clientHeight
+  let currentClient = current.getBoundingClientRect()
+  if(currentClient.top+currentClient.height>screenHeight-10){
+    current.scrollIntoView()
+  }
+}
+
+onMounted(()=>{
+  setCurrentIntoView()
+})
 </script>
diff --git a/src/bg-ui/bg-nav.vue b/src/bg-ui/bg-nav.vue
index e23ba78..d7726a6 100644
--- a/src/bg-ui/bg-nav.vue
+++ b/src/bg-ui/bg-nav.vue
@@ -3,36 +3,30 @@
     <div class="bg-nav-title" v-if="title">
       <h3 class="text-clip">{{ title }}</h3>
     </div>
-    <div class="bg-nav-list bg-scroll">
+    <div class="bg-nav-list">
       <NavList :list="list" :highlight-parent-rule="highlightParentRule" />
     </div>
   </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 8397bd6..260e403 100644
--- a/src/bg-ui/bg-pagination.vue
+++ b/src/bg-ui/bg-pagination.vue
@@ -1,63 +1,63 @@
 <template>
   <div class="bg-pagination">
     <el-pagination
-      :currentPage="page"
-      :page-size="size"
+      :small="small"
+      :currentPage="numberOfPage"
+      :page-size="numberOfPageSize"
       :page-sizes="pageSizes"
       :layout="layout"
       :total="total"
       @size-change="changeSize"
       @current-change="changePage"
       :background="background"
-      :disabled="disabled"
-    />
+      :disabled="disabled" />
   </div>
 </template>
 
-<script>
-export default {
-  name: "pagination",
-  props: {
-    page: {
-      type: Number,
-      default: 1
-    },
-    size: {
-      type: Number,
-      default: 10,
-    },
-    pageSizes: {
-      type: Array,
-      default: [10,50,100]
-    },
-    total: {
-      type: Number,
-      default: 0
-    },
-    layout: {
-      type: String,
-      default: "total, sizes, prev, pager, next, jumper"
-    },
-    background: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props, context) {
-    const changePage = (val) => {
-      context.emit("change-page",val)
-    }
-    const changeSize = (val) => {
-      context.emit("change-size",val)
-    }
-    return {
-      changePage,
-      changeSize
-    }
-  },
-}
-</script>
\ No newline at end of file
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  small: {
+    type: Boolean,
+    default: () => false,
+  },
+  page: {
+    type: [String, Number],
+    default: 1,
+  },
+  size: {
+    type: [String, Number],
+    default: 10,
+  },
+  pageSizes: {
+    type: Array,
+    default: [10, 50, 100],
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+  layout: {
+    type: String,
+    default: "total, sizes, prev, pager, next, jumper",
+  },
+  background: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["change-page", "change-size"]);
+const numberOfPage = computed(() => Number(props.page))
+const numberOfPageSize = computed(() => Number(props.size))
+const changePage = (val) => {
+  emit("change-page", val);
+};
+
+const changeSize = (val) => {
+  emit("change-size", val);
+};
+</script>
diff --git a/src/bg-ui/bg-rich-text.vue b/src/bg-ui/bg-rich-text.vue
index a0f7172..d1bac2a 100644
--- a/src/bg-ui/bg-rich-text.vue
+++ b/src/bg-ui/bg-rich-text.vue
@@ -1,169 +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>
-import '@wangeditor/editor/dist/css/style.css' // 引入 css
-
-import { onBeforeUnmount, ref, shallowRef, onMounted, reactive, toRefs } from 'vue'
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+<script setup>
+import "@wangeditor/editor/dist/css/style.css"; // 引入 css
 
-import {
-useFormItem,
-} from 'element-plus'
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 
+import { useFormItem } from "element-plus";
 
-export default {
-components: { Editor, Toolbar },
-props: {
+const props = defineProps({
   modelValue: {
     type: String,
-    default: '',
+    default: "",
   },
-  disabled:{
-    type:Boolean,
-    default:false
-  }
-},
-emits: ['update:modelValue','change','blur'],
-watch:{
-  modelValue(n,o){
-    this.valueHtml = n
-  }
-},
-setup(props,{ emit }) {
-  //引入form-item
-  const { formItem } = useFormItem()
-  // 编辑器实例，必须用 shallowRef
-  const editorRef = shallowRef()
-
-  // 内容 HTML
-  const valueHtml = ref('')
-
-  // change次数
-  let changeNum = ref(0)
-
-  // 模拟 ajax 异步获取内容
-  onMounted(() => {
-    setTimeout(()=>{
-      valueHtml.value = props.modelValue
-      // console.log(valueHtml.value);
-    })
-  })
-
-  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)
-        },
-      }
-  }
-  }
-
-  // watch(
-  //   props,modelValue,
-  //   (n,o) => {
-      
-  //   }
-  // )
-
-  // 组件销毁时，也及时销毁编辑器
-  onBeforeUnmount(() => {
-      const editor = editorRef.value
-      if (editor == null) return
-      editor.destroy()
-  })
-
-  const handleCreated = (editor) => {
-    editorRef.value = editor // 记录 editor 实例，重要！
-    if(props.disabled){
-      editor.disable()
-    }
-  }
-
-  const handleChange = ()=>{
-    //初始化会默认赋值<p><br></p>
-    //会对原有数据造成影响，return掉
-    changeNum.value++
-    if(changeNum.value==1){
-      return
-    }
-    emit("update:modelValue", valueHtml.value);
-    // formItem?.validate?.('change').catch((err) => debugWarn(err))
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  mode: {
+    type: String,
+    default: "default",
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "change", "blur"]);
+
+const valueHtml = ref("");
+// change次数
+let changeNum = ref(0);
+
+const { formItem } = useFormItem();
+
+const editorRef = shallowRef();
+
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = props.modelValue;
+  });
+});
+
+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 handleCreated = (editor) => {
+  editorRef.value = editor; // 记录 editor 实例，重要！
+  if (props.disabled) {
+    editor.disable();
   }
-
-  const handleBlur = ()=>{
-    formItem?.validate?.('blur').catch((err) => console.warn(err))
+};
+const handleChange = () => {
+  //初始化会默认赋值<p><br></p>
+  //会对原有数据造成影响，return掉
+  changeNum.value++;
+  if (changeNum.value == 1) {
+    return;
   }
-
-  return {
-    editorRef,
-    valueHtml,
-    mode: 'default', // 或 'simple'
-    toolbarConfig,
-    editorConfig,
-    handleCreated,
-    handleChange,
-    handleBlur,
-  };
-}
-}
+  emit("update:modelValue", valueHtml.value);
+};
+const handleBlur = () => {
+  formItem?.validate?.("blur").catch((err) => console.warn(err));
+};
 </script>
-
-<style>
-.w-e-toolbar p, .w-e-text-container p, .w-e-menu-panel p {
-  font-size: 14px !important;
-  color: #202531!important;
-}
-.w-e-text-container{
-  word-break: break-all;
-}
-</style>
\ No newline at end of file
diff --git a/src/bg-ui/bg-sort.vue b/src/bg-ui/bg-sort.vue
index c0b2eb1..2bd5aa7 100644
--- a/src/bg-ui/bg-sort.vue
+++ b/src/bg-ui/bg-sort.vue
@@ -3,52 +3,45 @@
     <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: [String, Number],
+    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.vue b/src/bg-ui/bg-switch.vue
index 62c03cd..282b67b 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,87 +9,84 @@
   </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: () => ["#c1c7d7", "#275a9d"],
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+<script setup>
+import { reactive, ref, onBeforeMount, toRefs, 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 {
-        color: this.colors[this.now_index],
-        borderColor: this.colors[this.now_index],
-      };
-    },
-    now_label_style() {
-      return this.now_index == 0
-        ? { left: this.circle_height + this.gap + 5 + "px" }
-        : { left: "10px" };
-    },
-    now_circle_style() {
-      return this.now_index == 0
-        ? {
-            left: this.gap + "px",
-            backgroundColor: this.colors[this.now_index],
-          }
-        : {
-            right: this.gap + "px",
-            backgroundColor: this.colors[this.now_index],
-          };
-    },
+  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: () => ["#c1c7d7", "#275a9d"],
   },
-  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 {
+    color: props.colors[now_index.value],
+    borderColor: props.colors[now_index.value],
+  };
+});
+const now_label_style = computed(() => {
+  return now_index.value == 0 ? { left: circle_height.value + gap.value + 5 + "px" } : { left: "10px" };
+});
+const now_circle_style = computed(() => {
+  return now_index.value == 0
+    ? {
+        left: gap.value + "px",
+        backgroundColor: props.colors[now_index.value],
+      }
+    : {
+        right: gap.value + "px",
+        backgroundColor: props.colors[now_index.value],
+      };
+});
+
+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..618e9a1 100644
--- a/src/bg-ui/bg-tab.vue
+++ b/src/bg-ui/bg-tab.vue
@@ -9,51 +9,47 @@
   </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..7a80ba0 100644
--- a/src/bg-ui/bg-table-btn.vue
+++ b/src/bg-ui/bg-table-btn.vue
@@ -4,30 +4,27 @@
   </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-btns.vue b/src/bg-ui/bg-table-btns.vue
index f2adb80..c0e2ec4 100644
--- a/src/bg-ui/bg-table-btns.vue
+++ b/src/bg-ui/bg-table-btns.vue
@@ -11,7 +11,7 @@
     </bg-table-btn>
     <a
       class="bg-table-btn"
-      @mouseenter="showMOreBtns"
+      @mouseenter="showMoreBtns"
       @mouseleave="hideMoreBtns"
       v-if="otherOperations.length > 0"
     >
@@ -19,7 +19,7 @@
       <bg-icon style="font-size: 12px; color: #2b4695;" icon="#bg-ic-s-more" />
       <bg-table-btns-more
         :operations="otherOperations"
-        @mouseenter="showMOreBtns"
+        @mouseenter="showMoreBtns"
         @mouseleave="hideMoreBtns"
         v-if="showMore"
       />
@@ -78,7 +78,7 @@ export default {
         return name;
       }
     },
-    showMOreBtns() {
+    showMoreBtns() {
       if (this.timer) clearTimeout(this.timer);
 
       this.showMore = true;
diff --git a/src/bg-ui/bg-table-btns2.vue b/src/bg-ui/bg-table-btns2.vue
new file mode 100644
index 0000000..7b95478
--- /dev/null
+++ b/src/bg-ui/bg-table-btns2.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="bg-table-btns" ref="bgTableBtnsRef">
+    <slot></slot>
+    <span
+      class="bg-table-btn more"
+      id="more_btn"
+      v-if="state.children.length > limit"
+      ref="lastEl"
+      @mouseenter="showMoreBtns"
+      @mouseleave="hideMoreBtns">
+      <bg-icon style="font-size: 12px; color: #2b4695" icon="#bg-ic-s-more" />
+      <teleport to="body">
+        <div
+          class="more-box"
+          :style="state.style"
+          v-if="state.showMore"
+          @mouseenter="showMoreBtns"
+          @mouseleave="hideMoreBtns">
+          <span
+            v-for="(item, index) in state.lastChildren"
+            :key="'as' + index"
+            @click="action(item.onClick, item.disabled)"
+            :class="item.disabled ? 'disabled' : ''"
+            >{{ item.name }}</span
+          >
+        </div>
+      </teleport>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, onBeforeMount, onMounted, toRefs, provide, useSlots, h, render, nextTick } from "vue";
+const slots = useSlots();
+
+const props = defineProps({
+  limit: {
+    type: Number,
+    default: 3,
+  },
+});
+
+const bgTableBtnsRef = ref(null);
+const lastEl = ref(null);
+const state = reactive({
+  children: [],
+  index: 0,
+  lastChildren: [],
+  style: {},
+  timer: null,
+  showMore: false,
+});
+
+const action = (event, disable) => {
+  if (disable) {
+    return;
+  }
+  event();
+  state.showMore = false
+};
+
+const calcTabs = () => {
+  let tabSlots = slots.default() || [];
+  state.lastChildren = [];
+  if (tabSlots) {
+    tabSlots.forEach((e, idx) => {
+      if (idx + 2 > props.limit && tabSlots.length > props.limit && e.props) {
+        // console.log(e);
+        // console.log(e.props);
+
+        state.lastChildren.push(e.props);
+      }
+    });
+  }
+};
+
+const showMoreBtns = () => {
+  calcTabs();
+  dealData();
+  nextTick(() => {
+    updateSytle();
+    if (state.timer) clearTimeout(state.timer);
+    state.showMore = true;
+  });
+};
+const hideMoreBtns = () => {
+  if (state.timer) clearTimeout(state.timer);
+  state.timer = setTimeout(() => {
+    state.showMore = false;
+  }, 50);
+};
+const updateSytle = () => {
+  let { top, right } = lastEl.value.getBoundingClientRect();
+  let { width } = window.document.body.getBoundingClientRect();
+  state.style = {
+    top: `${top + 16}px`,
+    right: `${width - right - 16}px`,
+  };
+};
+
+const dealData = () => {
+  let children = bgTableBtnsRef.value.children || [];
+  state.children = children;
+  if (children.length > props.limit) {
+    children[props.limit - 1].style.display = "none";
+    children[props.limit - 1].style.width = "0px";
+    state.index = props.limit - 2;
+    state.lastChildren[0].name = children[props.limit - 1].innerText;
+  }
+  for (let index = 0; index < children.length; index++) {
+    const e = children[index];
+    if (index + 1 > props.limit && e.tagName == "A" && e.className.indexOf("bg-table-btn") !== -1) {
+      e.style.display = "none";
+      e.style.width = "0px";
+      state.lastChildren[index - props.limit + 1].name = e.innerText;
+    }
+  }
+};
+
+onMounted(() => {
+  calcTabs();
+  dealData();
+});
+</script>
+
+<style scoped>
+.more {
+  position: relative;
+  z-index: 200;
+}
+
+.more-box {
+  position: fixed;
+  padding: 4px 0;
+  background-color: #ffffff;
+  box-shadow: 0px 4px 12px 0px rgba(18, 30, 63, 0.1);
+  border-radius: 4px;
+  border: solid 1px #e6e9ef;
+  width: 88px;
+  z-index: 300;
+}
+
+.more-box span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+  padding: 10px 16px;
+  color: #404a62;
+  line-height: 1;
+  font-size: 14px;
+  cursor: pointer;
+}
+.more-box span:hover {
+  background-color: #f2f3f7;
+}
+.more-box .disabled {
+  color: #a9b1c7;
+  cursor: not-allowed;
+}
+.more-box .disabled:hover {
+  background-color: #f2f3f7;
+  color: #a9b1c7;
+}
+.more-box span::before {
+  display: none;
+}
+</style>
diff --git a/src/bg-ui/bg-table-pro.vue b/src/bg-ui/bg-table-pro.vue
index b46b7ff..958144f 100644
--- a/src/bg-ui/bg-table-pro.vue
+++ b/src/bg-ui/bg-table-pro.vue
@@ -3,14 +3,13 @@
     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"
     tooltip-effect="light"
-  >
+    :default-expand-all="defaultExpandAll">
     <el-table-column width="60" v-if="showIndex">
       <template v-slot:header>
         <p style="width: 100%; text-align: center">序号</p>
@@ -19,13 +18,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}`"
@@ -33,8 +26,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}`" />
@@ -63,135 +55,132 @@
     </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.allSelection = [];
-    }, // 清空选中
-    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,
+  };
 };
+
+defineExpose({
+  getRowInfo,
+})
 </script>
-  
\ No newline at end of file
diff --git a/src/bg-ui/bg-table.vue b/src/bg-ui/bg-table.vue
index 0230c48..637531a 100644
--- a/src/bg-ui/bg-table.vue
+++ b/src/bg-ui/bg-table.vue
@@ -1,5 +1,6 @@
 <template>
   <el-table
+    :height="height"
     ref="table"
     class="bg-table"
     :data="rows"
@@ -8,38 +9,33 @@
     @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"
-      align="center"
-      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="indexWidth" align="left">
       <!-- 序号 -->
     </el-table-column>
+    <el-table-column v-if="sort" width="54" align="center">
+      <template v-slot:header>
+        <p style="width: 100%; text-align: center">排名</p>
+      </template>
+      <template v-slot:default="{ row,$index }">
+        <p style="width: 100%; text-align: center;display: flex;align-items: center;">
+          <bg-icon style="font-size: 12px; color: #429e8a;margin-right: 9px;" icon="#bg-ic-arrow-up-2" v-if="row.sort == 1" />
+          <bg-icon style="font-size: 12px; color: #d75138;margin-right: 9px;" icon="#bg-ic-arrow-down-2" v-else-if="row.sort == 2" />
+          <bg-icon style="font-size: 12px; color: #909bb6;margin-right: 9px;" icon="#bg-ic-minus" v-else />
+          <span>{{ $index + 1 }}</span>
+        </p>
+      </template>
+    </el-table-column>
     <el-table-column
       v-for="(header, index) in headers"
       :width="header.width"
@@ -47,8 +43,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}`" />
@@ -59,137 +54,166 @@
         <slot v-if="$slots[header.prop]" :name="header.prop" :row="row" />
 
         <template v-else>
+          <col-node :val="row[header.prop]" :emptyColPlaceholder="emptyColPlaceholder"></col-node>
           <!-- {{ row[header.prop] | ellipsis(header.max) }} -->
-          {{ row[header.prop] }}
         </template>
       </template>
     </el-table-column>
   </el-table>
 </template>
 
-<script>
-import { selectTableMixin } from './hook/mixin-select-table'
-export default {
-  name: "BgTable",
-  setup() {
-    const { 
-      nowSelectData,
-      allSelectData,
-      selectData,
-      initSelectTableData,
-      runPage,
-      dealSelectData 
-    } = selectTableMixin()
+<script setup>
+import { h, watch, ref } from "vue";
+import { selectTableMixin } from "./hook/mixin-select-table";
+let { nowSelectData, allSelectData, selectData, initSelectTableData, runPage, dealSelectData } = selectTableMixin();
 
-    return { 
-      nowSelectData,
-      allSelectData,
-      selectData,
-      initSelectTableData,
-      runPage,
-      dealSelectData 
-    }
+const props = defineProps({
+  height: {
+    type: [Number, String],
+    default: "auto",
   },
-  props: {
-    headers: {
-      type: Array,
-      require: true,
-    },
-    rows: {
-      type: Array,
-      default: () => [],
-    },
-    select: {
-      type: Boolean,
-      default: false,
-    },
-    selectable: {
-      type: Function,
-    },
-    isIndex: { 
-      type: Boolean,
-      default: false 
-    },
-    indexLabel: { 
-      type: String, 
-      default: "序号" 
-    },
-    stripe: {
-      type: Boolean,
-      default: false
-    },
-    paddingLeft: {
-      type: [Number, String],
-      default: () => 33,
-    },
+  headers: {
+    type: Array,
+    require: true,
   },
-  /* filters: {
-    ellipsis(value, max) {
-      if (!value) {
-        return "";
-      } else if (max && value.length > max) {
-        return value.slice(0, max - 1) + "...";
-      } else {
-        return value;
-      }
-    },
-  }, */
-  watch:{
-    rows(n,o){
-      if(n.length&&this.select){
-        this.runPage()
-        this.initSelectTableData(n).then((selectData)=>{
-          if(selectData.length){
-            setTimeout(()=>{
-              this.toggleRowArrSelection(selectData)
-            })
-          }
-        })
-      }
-    }
+  rows: {
+    type: Array,
+    default: () => [],
   },
-  created(){
-    console.log(this.$attrs)
+  select: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    toggleRowSelection(row, flag = true) {
-      this.$refs.table.toggleRowSelection(row, flag);
-    },
-    selectAction(selection) {
-      this.$emit("selectAc", {allLength:Object.keys(this.allSelectData).length+this.nowSelectData.length,selection});
-    },
-    clearSelection() {
-      this.$refs.table.clearSelection();
-       this.$emit("select", {allLength:Object.keys(this.allSelectData).length+this.nowSelectData.length,selection:[]});
-    },
-    setSelectedRow(row) {
-      this.$refs.table.toggleRowSelection(row);
-    },
-    toggleRowArrSelection(arr, flag = true){
-      arr.forEach(e => {
-        this.$refs.table.toggleRowSelection(e, flag);
-      });
-    },
-    selectActionRow(selection,row){
-      this.selectData(selection)
-      this.$emit("select", {allLength:Object.keys(this.allSelectData).length+this.nowSelectData.length,selection});
-    },
-    selectActionAll(selection){
-      this.selectData(selection)
-      this.$emit("select", {allLength:Object.keys(this.allSelectData).length+this.nowSelectData.length,selection});
-    },
-    clearTable(){//清除选中数据,在页面状态更新时使用
-      this.allSelectData={}
-      this.nowSelectData=[]
-      this.clearSelection();
-    },
-    tableRowClassName({ row, rowIndex }) {
-      if (rowIndex % 2 == 0) {
-        return "white-row";
-      } else {
-        return "stripe-row";
-      }
-    },
+  // selectable: {
+  //   type: Function,
+  // },
+  isIndex: {
+    type: Boolean,
+    default: false,
+  },
+  indexLabel: {
+    type: String,
+    default: "序号",
+  },
+  stripe: {
+    type: Boolean,
+    default: false,
   },
+  paddingLeft: {
+    type: [Number, String],
+    default: () => 12,
+  },
+  canEdit: {
+    type: Boolean,
+    default: false,
+  }, // 多选框是否禁用
+  canEditFlag: {
+    type: Boolean,
+    default: "",
+  }, // 决定多选框是否禁用的字段
+  sort: {
+    type: Boolean,
+    default: false,
+  }, // 排名
+  emptyColPlaceholder: {
+    type: [String, Function],
+    default: "-",
+  }, // 后端行数据某列为空时显示的占位符号
+  indexWidth: {
+    type: Number,
+    default: 54
+  }
+});
+
+const table = ref(null);
+
+const emit = defineEmits(["selectAc", "select"]);
+watch(
+  () => props.rows,
+  (n, o) => {
+    if (n.length && props.select) {
+      runPage();
+      initSelectTableData(n).then((selectData) => {
+        if (selectData.length) {
+          setTimeout(() => {
+            toggleRowArrSelection(selectData);
+          });
+        }
+      });
+    }
+  }
+);
+
+const toggleRowSelection = (row, flag = true) => {
+  table.value.toggleRowSelection(row, flag);
+};
+const selectAction = (selection) => {
+  emit("selectAc", { allLength: Object.keys(allSelectData).length + nowSelectData.length, selection });
+};
+const clearSelection = () => {
+  table.value.clearSelection();
+  emit("select", { allLength: Object.keys(allSelectData).length + nowSelectData.length, selection: [] });
+};
+const setSelectedRow = (row) => {
+  toggleRowSelection(row);
+};
+const toggleRowArrSelection = (arr, flag = true) => {
+  arr.forEach((e) => {
+    toggleRowSelection(e, flag);
+  });
+};
+const selectActionRow = (selection, row) => {
+  selectData(selection);
+  emit("select", { allLength: Object.keys(allSelectData).length + nowSelectData.length, selection });
+};
+const selectActionAll = (selection) => {
+  selectData(selection);
+  emit("select", { allLength: Object.keys(allSelectData).length + nowSelectData.length, selection });
 };
+const clearTable = () => {
+  //清除选中数据,在页面状态更新时使用
+  allSelectData = {};
+  nowSelectData = [];
+  clearSelection();
+};
+const tableRowClassName = ({ row, rowIndex }) => {
+  if (rowIndex % 2 == 0) {
+    return "white-row";
+  } else {
+    return "stripe-row";
+  }
+};
+const selectable = (row, index) => {
+  if (props.canEdit) {
+    if (row[props.canEditFlag] && row[props.canEditFlag] == 1) {
+      return false;
+    } else {
+      return true;
+    }
+  } else {
+    return true;
+  }
+};
+
+/**
+ * 该功能用于表格数据某行的列数据后端未处理返回空字符串的情况，前端展示需要灵活处理的解决方案；
+ * 改内部组件val参数为默认的原始数据，emptyColPlaceholder是自定义的类型
+ * 一般情况下默认空则渲染为占位符 "-"
+ * 当然也可以写渲染函数特殊处理此处，以满足特别需求，但是父组件传递的函数必须是渲染函数！
+ */
+const colNode = (props) => {
+  if (props.val === "") {
+    if (typeof props.emptyColPlaceholder === 'string') {
+      return h("span", props.emptyColPlaceholder);
+    }
+    if (typeof props.emptyColPlaceholder === 'function') {
+      return props.emptyColPlaceholder()
+    }
+  }
+  return h("span", props.val);
+}
+defineExpose({
+  clearTable,
+  toggleRowSelection,
+});
 </script>
diff --git a/src/bg-ui/bg-tabs.vue b/src/bg-ui/bg-tabs.vue
index 8099a58..ff7881c 100644
--- a/src/bg-ui/bg-tabs.vue
+++ b/src/bg-ui/bg-tabs.vue
@@ -26,51 +26,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.tag &&
-              vnode.componentOptions &&
-              vnode.componentOptions.Ctor.options.name === "BgTab"
-          )
-          .map((vnode) => vnode.componentOptions.propsData);
-      }
+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);
+  }
+
+  console.log(tabSlots)
+
+  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 5a6ba1a..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-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 346e20e..ca99f4f 100644
--- a/src/bg-ui/bg-upload-image.vue
+++ b/src/bg-ui/bg-upload-image.vue
@@ -1,13 +1,13 @@
 <template>
   <el-upload
-    ref="upload"
+    ref="uploadRef"
     class="bg-upload"
     v-bind="$attrs"
     :file-list="fileList"
     :action="action"
     :data="{
       directory: 'image',
-      uniqueCode: false
+      uniqueCode: false,
     }"
     :auto-upload="autoUpload"
     :list-type="listType"
@@ -17,8 +17,7 @@
     :on-success="handleSuccess"
     :on-remove="handleRemove"
     :on-preview="handlePreview"
-    :multiple="multiple"
-  >
+    :multiple="multiple">
     <template v-slot:trigger>
       <el-icon v-if="listType === 'picture-card'"><Plus /></el-icon>
       <!-- <i class="el-icon-plus" v-if="listType === 'picture-card'"></i> -->
@@ -28,215 +27,213 @@
     </template>
 
     <template v-if="!autoUpload">
-      <el-button
-        type="success"
-        icon="el-icon-position"
-        @click="submitUpload"
-        style="margin-left: 16px"
-      >
+      <el-button type="success" icon="el-icon-position" @click="submitUpload" style="margin-left: 16px">
         上传到服务器
       </el-button>
     </template>
 
     <template v-slot:tip v-if="showTips && tips">
-      <div class="el-upload__tip" style="color:#909bb6;">
-        {{ customTips||tips }}
+      <div class="el-upload__tip" style="color: #909bb6">
+        {{ customTips || tips }}
       </div>
     </template>
   </el-upload>
 
   <el-dialog title="图片预览" v-model="dialogVisible">
-    <img style="margin:30px 0;width: 100%;" :src="dialogImageUrl" alt="Preview Image" />
+    <img style="margin: 30px 0; width: 100%" :src="dialogImageUrl" alt="Preview Image" />
   </el-dialog>
 </template>
 
-<script>
-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: "",
-    },// 自定义提示内容 
+<script setup>
+import { UploadFilled } from "@element-plus/icons-vue";
+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',"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 state = reactive({
+  fileList: [],
+  dialogImageUrl: "",
+  dialogVisible: false,
+});
+
+const uploadRef = ref(null);
+
+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 07d5b43..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="{
@@ -18,8 +15,7 @@
       :disabled="actionDisabled"
       style="max-width: 600px"
       drag
-      multiple
-    >
+      multiple>
       <!-- <el-button type="primary">
         上传附件
       </el-button>
@@ -28,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>
@@ -50,7 +42,7 @@
         </p>
       </div>
       <template v-slot:tip v-if="otherInfo != ''">
-        <div class="el-upload__tip" style="color: #909bb6;line-height: 18px;">
+        <div class="el-upload__tip" style="color: #909bb6; line-height: 18px">
           {{ otherInfo }}
         </div>
       </template>
@@ -58,165 +50,138 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "BgUpload",
-  // model: {
-  //   prop: "value",
-  //   event: "change",
-  // },
-  props: {
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
-    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: "",
-    },
-    limit: {
-      type: Number,
-      default: 9999,
-    },
+<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","change"],
-  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
-    },
+  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) {
-      if (this.fileList && this.fileList.length >= this.limit) {
-        this.$message.error(`只允许上传${this.limit}个文件`)
-        return false
-      }
-      let temp = file.name.split(".");
-      let type = temp[temp.length - 1].toLocaleLowerCase();
-      let fileTypesOk = this.fileTypes.indexOf(type) > -1||this.fileTypes.length==0;
-      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);
-    },
-    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",values);
-    },
+  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 710a6f7..f4455e7 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'
@@ -34,6 +32,7 @@
  import BgInnerTabs from './bg-inner-tabs.vue'
  import BgFilterGroup from './bg-filter-group.vue'
  import BgTableBtns from './bg-table-btns.vue'
+ import BgTableBtns2 from './bg-table-btns2.vue'
  
 const components = {
   BgIcon,//字体图标
@@ -49,8 +48,6 @@ const components = {
   BgLayoutCard, // 带标题的卡片
   BgCard, // 详情卡片
   BgInfo, // 表格信息
-  BgSteps, // 步骤条
-  BgStep, // 步骤条
   BgBtns, // 按钮组
   BgUpload, // 上传附件
   BgUploadImage, // 上传单张图片
@@ -69,6 +66,7 @@ const components = {
   BgInnerTabs,//内部tab
   BgFilterGroup,//列表按钮及筛选
   BgTableBtns,// 表格按钮组
+  BgTableBtns2,
 };
 
 const install = (Vue) => {
diff --git a/src/bg-ui/index.scss b/src/bg-ui/index.scss
index a84eb25..7fa5a38 100644
--- a/src/bg-ui/index.scss
+++ b/src/bg-ui/index.scss
@@ -265,17 +265,17 @@ a {
     padding: 0 10px;
 
     > * {
-      height: 36px !important;
+      height: 32px !important;
       background-color: transparent !important;
       font-size: 14px;
-      line-height: 36px !important;
+      line-height: 32px !important;
       color: #404a62;
     }
 
     > .el-pager > li {
-      height: 36px !important;
+      height: 32px !important;
       background-color: transparent !important;
-      line-height: 36px !important;
+      line-height: 32px !important;
       color: #404a62 !important;
 
       &.active {
@@ -522,7 +522,7 @@ a {
   }
 
   > .bg-nav-list {
-    height: calc(100% - 135px);
+    height: calc(100% - 10px);
     box-sizing: border-box;
 
     ul.nav-list {
@@ -644,17 +644,20 @@ a {
   &::before {
     display: none;
   }
-  .empty_container {
-    height: 500px;
-    padding-top: 247px;
-    img {
-      width: 257px;
-      height: 145px;
-    }
-    .text {
-      font-size: 16px;
-      color: #616f94;
-      line-height: 1;
+  .el-table__empty-block {
+    height: 500px!important;
+    .empty_container {
+      height: 500px;
+      padding-top: 247px;
+      img {
+        width: 257px;
+        height: 145px;
+      }
+      .text {
+        font-size: 16px;
+        color: #616f94;
+        line-height: 1;
+      }
     }
   }
   th,
@@ -746,7 +749,7 @@ a {
     max-width: 388px;
     padding: 15px 12px;
     color: #202531;
-    box-shadow: 0px 4px 12px 0px 
+    box-shadow: 0px 4px 12px 0px
 		rgba(18, 30, 63, 0.1);
 	  border: solid 1px #e6e9ef;
     font-size: 14px;
@@ -760,12 +763,26 @@ a {
     > .cell {
       padding: 0 10px !important;
       overflow: unset;
-      display: flex;
+      display: flex!important;
       justify-content: flex-start;
       align-items: center;
     }
   }
 
+  .el-table-column--selection{
+    border-left: 1px solid #e6e9ef;
+      > .cell {
+        justify-content: center
+      }
+  }
+
+  th.el-table-column--selection{
+      > .cell {
+        display: flex;
+        justify-content: center
+      }
+  }
+
   &.el-table--border {
 
 
@@ -804,7 +821,12 @@ a {
   display: inline;
   color: #3759be;
   cursor: pointer;
-
+  &:hover {
+    color:  #738bd2
+  }
+  &:active {
+    color: #2c4798;
+  }
   &.disabled {
     cursor: not-allowed;
     color: #a9b1c7;
@@ -1495,7 +1517,7 @@ a {
           border-left: 1px solid #e3e5ef;
           color: #404a62;
           position: relative;
-          
+
           > .copy-btn {
             position: absolute;
             top: 50%;
@@ -1512,6 +1534,16 @@ a {
               color: #2b4695;
             }
           }
+          > .copy-btn-dis {
+            color: #dce0e8;
+            cursor: not-allowed!important;
+            &:hover {
+              color: #dce0e8;
+            }
+            &:active {
+              color: #dce0e8;
+            }
+          }
         }
       }
 
@@ -1819,7 +1851,7 @@ a {
 
       > .el-upload-list {
         margin: 0 0 0 16px;
-        
+
         > .el-upload-list__item {
           margin: 0;
 
@@ -2337,6 +2369,9 @@ a {
   height: 32px;
   margin-top: 16px;
   float: right;
+  .el-input {
+    --el-input-height: 32px;
+  }
   .el-pagination {
     text-align: center;
     margin: 0 auto;
@@ -2356,7 +2391,7 @@ a {
       li:hover {
         color: #3759be;
       }
-    } 
+    }
     .el-input__wrapper {
       background-color: #fff;
     }
@@ -2373,14 +2408,20 @@ a {
 
 .bg-card {
   background-color: #ffffff;
-	box-shadow: 0px 1px 4px 0px 
+	box-shadow: 0px 1px 4px 0px
 		rgba(0, 7, 101, 0.15);
 	border-radius: 6px;
   margin-bottom: 16px;
 
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #ebedf2;
+  }
+
   .card-title {
     padding: 16px 16px;
-    border-bottom: 1px solid #ebedf2;
     font-weight: bold;
     display: flex;
     justify-content: flex-start;
@@ -2517,7 +2558,7 @@ a {
       background-color: #f2f3f7;
       color: #202531;
     }
-    
+
     &.disabled {
       color: #a9b1c7;
     }
@@ -2534,4 +2575,4 @@ a {
     height: 10px;
     width: 100%;
   }
-}
\ No newline at end of file
+}
-- 
2.26.0