更新bg-ui

src/bg-ui/bg-code-editor.vue

@@ -140,6 +140,20 @@ const { content } = toRefs(states);
 }
 .vue-ace-editor-disable :deep() .ace_scrollbar-v {
   width: 6px !important;
+  right: 2px;
+}
+
+.vue-ace-editor-disable :deep().ace_scrollbar::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+.vue-ace-editor-disable :deep().ace_scrollbar::-webkit-scrollbar-track {
+  background-color: #f7f7f9; /* Matches ace monokai */
+  border-radius: 3px;
+}
+.vue-ace-editor-disable :deep().ace_scrollbar::-webkit-scrollbar-thumb {
+  background-color: #c1c7d7;
+  border-radius: 3px;
 }
 .vue-ace-editor-disable :deep() .ace_gutter {
   background-color: #202531;

src/bg-ui/bg-detail-table.vue

@@ -17,13 +17,13 @@
         <span
           v-if="!item.urls"
           :title="item.info"
-          :style="item.url ? { color: '#515fe7', cursor: 'pointer' } : ''"
+          :style="item.url ? { color: '#2b4695', cursor: 'pointer' } : ''"
           @click="down_file(item.url)">{{ item.info }}</span>
         <span v-else :title="item.info">
           <span
             v-for="(it, idx) in item.urls"
             :key="'urls' + idx"
-            style="color: #515fe7; cursor: pointer"
+            style="color: #2b4695; cursor: pointer"
             @click="down_file(it)">{{ helper.downloadFileFormatNew(it) }}、</span>
         </span>
       </template>

src/bg-ui/bg-detail-table2.vue

@@ -7,9 +7,11 @@
       :style="{ width: item.width }">
       <p v-if="!item.slot" class="detail-module">
         <span :style="{ width: itemWidth }">{{ item.label }}</span>
-        <span v-if="!item.childSlot" class="text_clip" :title="item.value">{{
-          item.value
-        }}</span>
+        <span
+          v-if="!item.childSlot"
+          :class="item.className ? item.className : ''"
+          class="text_clip"
+          :title="item.value">{{ item.value }}</span>
         <span v-else>
           <slot :name="item.childSlot" :data="item"></slot>
         </span>
@@ -70,6 +72,6 @@ const props = defineProps({
   border-right: solid 1px #dadee7;
 }
 .row-box .detail-module span:nth-of-type(2) {
-  flex-grow: 1;
+  flex: 1;
 }
 </style>

src/bg-ui/bg-icon.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import "https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_19654_229.cab419d7be9fcc68760c67d9dcb0cb4a.js";
+import "https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_19654_258.0138c935a6a18458165ca353bdcd9fda.js";
 
 const props = defineProps({
   icon: {

src/bg-ui/bg-switch.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-import { reactive, ref, onBeforeMount, toRefs, computed, onMounted } from "vue";
+import { ref, computed, onMounted } from "vue";
 const props = defineProps({
   modelValue: {
     type: [Boolean, Number, String],
@@ -31,7 +31,7 @@ const props = defineProps({
   },
   colors: {
     type: Array,
-    default: () => ["#c1c7d7", "#275a9d"],
+    default: () => ["#cbced7", "#2b4695"],
   },
   disabled: {
     type: Boolean,
@@ -42,7 +42,9 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue"]);
 
 const gap = ref(0);
+
 const box_height = ref(0);
+
 const circle_height = ref(0);
 
 const now_index = computed(() => {
@@ -52,26 +54,27 @@ const now_index = computed(() => {
     return 1;
   }
 });
+
 const now_style = computed(() => {
   return {
-    color: props.colors[now_index.value],
     borderColor: props.colors[now_index.value],
+    backgroundColor: props.colors[now_index.value],
   };
 });
+
 const now_label_style = computed(() => {
   return now_index.value == 0
     ? { left: circle_height.value + gap.value + 5 + "px" }
-    : { left: "10px" };
+    : { left: "6px" };
 });
+
 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],
+        left: "calc(100% - 16px)",
       };
 });
 

src/bg-ui/bg-table-btns2.vue

 <template>
   <div ref="bgTableBtnsRef" class="bg-table-btns">
     <slot></slot>
-    <span
-      v-if="state.children.length > limit"
-      id="more_btn"
-      ref="lastEl"
-      class="bg-table-btn more"
-      @mouseenter="showMoreBtns"
-      @mouseleave="hideMoreBtns">
-      <bg-icon style="font-size: 12px; color: #2b4695" icon="#bg-ic-s-more" />
-      <teleport to="body">
-        <div
-          v-if="state.showMore"
-          class="more-box"
-          :style="state.style"
-          @mouseenter="showMoreBtns"
-          @mouseleave="hideMoreBtns">
-          <span
-            v-for="(item, index) in state.lastChildren"
-            :key="'as' + index"
-            :class="item.disabled ? 'disabled' : ''"
-            @click="action(item.onClick, item.disabled)">{{ item.name }}</span>
-        </div>
-      </teleport>
-    </span>
+    <el-popover :width="88" :popper-style="bgTablePopover" trigger="hover">
+      <div class="more-box" :style="state.style">
+        <span
+          v-for="(item, index) in state.lastChildren"
+          :key="'as' + index"
+          :class="item.disabled ? 'disabled' : ''"
+          @click="action(item.onClick, item.disabled)">{{ item.name }}</span>
+      </div>
+      <template #reference>
+        <span
+          v-if="state.children.length - 1 > limit"
+          id="more_btn"
+          ref="lastEl"
+          class="bg-table-btn more">
+          <bg-icon
+            style="font-size: 12px; color: #2b4695"
+            icon="#bg-ic-s-more" />
+        </span>
+        <!-- 解决不需显示时警告问题 -->
+        <span v-else></span>
+      </template>
+    </el-popover>
   </div>
 </template>
 
@@ -36,8 +35,7 @@ import {
   toRefs,
   provide,
   useSlots,
-  h,
-  render,
+  watch,
   nextTick,
 } from "vue";
 const slots = useSlots();
@@ -47,6 +45,10 @@ const props = defineProps({
     type: Number,
     default: 3,
   },
+  tableData: {
+    type: Array,
+    default: () => [],
+  },
 });
 
 const bgTableBtnsRef = ref(null);
@@ -60,6 +62,20 @@ const state = reactive({
   showMore: false,
 });
 
+watch(
+  () => props.tableData,
+  () => {
+    setTimeout(() => {
+      nextTick(() => {
+        calcTabs();
+        dealData();
+      });
+    }, 1000);
+  },
+  {
+    deep: true,
+  }
+);
 const action = (event, disable) => {
   if (disable) {
     return;
@@ -70,10 +86,31 @@ const action = (event, disable) => {
 
 const calcTabs = () => {
   let tabSlots = slots.default() || [];
+  let tempSlots = [];
   state.lastChildren = [];
-  if (tabSlots) {
-    tabSlots.forEach((e, idx) => {
-      if (idx + 2 > props.limit && tabSlots.length > props.limit && e.props) {
+  tabSlots.forEach((e) => {
+    //注释和v-if忽略
+    if (e.type.toString() == "Symbol(Comment)") {
+      //v-for 再次遍历
+    } else if (e.type.toString() == "Symbol(Fragment)") {
+      let children = e.children || [];
+      children.forEach((el) => {
+        //注释和v-if忽略
+        if (el.type.toString() == "Symbol(Comment)") {
+          console.log(el.type);
+        } else {
+          tempSlots.push(el);
+        }
+      });
+      //普通节点
+    } else {
+      tempSlots.push(e);
+    }
+  });
+  //   debugger;
+  if (tempSlots) {
+    tempSlots.forEach((e, idx) => {
+      if (idx + 2 > props.limit && tempSlots.length > props.limit && e.props) {
         // console.log(e);
         // console.log(e.props);
 
@@ -110,13 +147,13 @@ const updateSytle = () => {
 const dealData = () => {
   let children = bgTableBtnsRef.value.children || [];
   state.children = children;
-  if (children.length > props.limit) {
+  if (children.length - 1 > 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++) {
+  for (let index = 0; index < children.length - 1; index++) {
     const e = children[index];
     if (
       index + 1 > props.limit &&
@@ -130,6 +167,12 @@ const dealData = () => {
   }
 };
 
+const bgTablePopover = {
+  width: "88px",
+  padding: "4px 0",
+  minWidth: "60px",
+};
+
 onMounted(() => {
   calcTabs();
   dealData();
@@ -142,17 +185,6 @@ onMounted(() => {
   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;

src/bg-ui/bg-upload.vue

@@ -18,7 +18,8 @@
       :disabled="actionDisabled"
       style="max-width: 600px"
       drag
-      multiple>
+      multiple
+      v-bind="$attrs">
       <!-- <el-button type="primary">
         上传附件
       </el-button>
@@ -138,6 +139,10 @@ const props = defineProps({
     type: String,
     default: "url",
   },
+  otherData: {
+    type: Boolean,
+    default: false,
+  }, // 应用构建时部署文件需要接收解析后的值并作为参数传给后端
 });
 
 const emit = defineEmits(["update:modelValue", "change", "delete"]);
@@ -170,7 +175,6 @@ watch(
     let oldStr = state.fileList
       .map((v) => (v.response && v.response.data) || v.url)
       .join(",");
-
     if (newStr !== oldStr) {
       let newFileList = [];
       props.modelValue.forEach((file) => {
@@ -178,6 +182,9 @@ watch(
       });
       state.fileList = newFileList;
     }
+    if (newStr == "") {
+      state.fileList = [];
+    }
   }
 );
 
@@ -229,10 +236,18 @@ const updateFileList = (fileList) => {
         url: (v.response && v.response.data) || v.url2 || v.raw,
       };
     } else {
-      return {
-        name: v.name,
-        url: v.raw,
-      };
+      if (!props.otherData) {
+        return {
+          name: v.name,
+          url: v.raw,
+        };
+      } else {
+        return {
+          name: v.name,
+          url: v.raw,
+          otherData: (v.response && v.response.data) || null,
+        };
+      }
     }
   });
 

src/bg-ui/index.scss

@@ -647,11 +647,11 @@ a {
   }
   th,
   td {
-    padding: 12px 0 !important;
+    padding: 11px 0 !important;
     > .cell {
       padding: 0 10px !important;
       color: #404a62;
-      line-height: 18px;
+      line-height: 20px;
     }
   }
 
@@ -1310,7 +1310,7 @@ a {
     .el-input-number__decrease,
     .el-input-number__increase {
       border: none;
-      color: #515fe7;
+      color: #2b4695;
     }
   }
 
@@ -2052,29 +2052,33 @@ a {
 .bg-switch {
   display: inline-block;
   vertical-align: middle;
-  width: 64px;
-  height: 28px;
-  border-radius: 14px;
-  border: solid 2px #275a9d;
+  width: 44px;
+  height: 20px;
+  border-radius: 10px;
+  border: solid 2px #2b4695;
   position: relative;
-  color: #275a9d;
+  color: #fff;
+  background-color: #2b4695;
   cursor: pointer;
   user-select: none;
+  transition: all 0.3s;
 
   > .label {
     font-size: 12px;
-    font-weight: 600;
-    line-height: 24px;
+    font-weight: 400;
+    line-height: 15px;
     position: absolute;
+    color: #fff;
   }
 
   > .circle {
-    width: 18px;
-    height: 18px;
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
     position: absolute;
-    top: 3px;
-    background-color: #275a9d;
+    // top: 2px;
+    background-color: #fff;
+    transition: all 0.3s;
   }
 
   &.disabled {
@@ -2190,7 +2194,7 @@ a {
     cursor: pointer;
 
     &.current {
-      color: #515fe7;
+      color: #2b4695;
     }
 
     & + a {
@@ -2501,7 +2505,7 @@ a {
 .bg-table-btns {
   position: relative;
   display: inline-block;
-  vertical-align: middle;
+  // vertical-align: middle; // 对表格行内高度有影响
 }
 
 .bg-table-btns-more {