规范化代码和bg-ui一些问题修复

.editorconfig

+root = true
+
+[*]
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true

.eslintignore

+auto-imports.d.ts
+components.d.ts
+env.d.ts
+pnpm-lock.yaml
+*.md
+iconfont.js

.eslintrc.js

+const INLINE_ELEMENTS = [
+  "a",
+  "abbr",
+  "audio",
+  "b",
+  "bdi",
+  "bdo",
+  "canvas",
+  "cite",
+  "code",
+  "data",
+  "del",
+  "dfn",
+  "em",
+  "i",
+  "iframe",
+  "ins",
+  "kbd",
+  "label",
+  "map",
+  "mark",
+  "noscript",
+  "object",
+  "output",
+  "picture",
+  "q",
+  "ruby",
+  "s",
+  "samp",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup",
+  "svg",
+  "time",
+  "u",
+  "var",
+  "video",
+];
+
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  parser: "vue-eslint-parser",
+  extends: [
+    "plugin:vue/vue3-recommended",
+    "eslint:recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: 2021,
+  },
+  rules: {
+    "quote-props": ["error", "as-needed"],
+    "import/prefer-default-export": "off",
+    "no-param-reassign": "off",
+    "space-before-function-paren": ["error", "never"],
+    "no-unused-vars": "off",
+    "no-undef": "off", // auto import
+    "prefer-rest-params": "off",
+    "vue/script-setup-uses-vars": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    // "@typescript-eslint/no-explicit-any": "off",
+    // "@typescript-eslint/no-var-requires": "off",
+    "no-empty-function": "off",
+    "no-non-null-assertion": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    quotes: [2, "double"],
+    semi: [2, "always"],
+    "vue/html-closing-bracket-newline": [
+      2,
+      {
+        singleline: "never",
+        multiline: "never",
+      },
+    ],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/max-attributes-per-line": [
+      2,
+      {
+        singleline: 3,
+        multiline: 1,
+      },
+    ],
+    "vue/html-self-closing": [
+      "error",
+      {
+        html: {
+          normal: "never",
+          void: "always",
+        },
+        svg: "always",
+        math: "always",
+      },
+    ],
+    "vue/no-unused-vars": [
+      "error",
+      {
+        ignorePattern: "^[_scope]",
+      },
+    ],
+    "vue/no-setup-props-destructure": "off",
+    "vue/no-mutating-props": "off",
+    "eslint no-empty": "off",
+    "vue/multiline-html-element-content-newline": [
+      "error",
+      {
+        ignoreWhenEmpty: true,
+        ignores: ["el-button", ...INLINE_ELEMENTS],
+        allowEmptyLines: false,
+      },
+    ],
+  },
+};

.prettierignore

+node_modules
+dist
+pnpm-lock.yaml
+auto-imports.d.ts
+components.d.ts

.prettierrc

+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "semi": true,
+  "singleQuote": false
+}

package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint --ext .js,vue --ignore-pattern '!.*ignore' .",
+    "lint:fix": "pnpm lint --fix"
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.10",
@@ -22,6 +24,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
+    "eslint": "^8.34.0",
+    "eslint-define-config": "^1.15.0",
+    "eslint-plugin-vue": "^9.9.0",
     "sass": "^1.58.2",
     "vite": "^4.1.1"
   }

src/App.vue

@@ -121,7 +121,7 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card);
 
   <div class="container">
     <cw title="bg-btns">
-      <bg-btns :options="btnsOption" v-model="btnsCurrentValue"></bg-btns>
+      <bg-btns v-model="btnsCurrentValue" :options="btnsOption" />
     </cw>
 
     <cw title="bg-card">
@@ -134,29 +134,33 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card);
       </bg-card>
     </cw>
 
-    <cw title="bg-code-editor"></cw>
+    <cw title="bg-code-editor" />
 
     <cw title="bg-detail-table">
-      <bg-detail-table :data="detailTable.data" :layout="{ line_num: 4 }"></bg-detail-table>
+      <bg-detail-table :data="detailTable.data" :layout="{ line_num: 4 }" />
     </cw>
 
     <cw title="bg-detail-table2">
-      <bg-detail-table2 :list="[{ label: 'label', value: 'table2 demo' }]" itemWidth="200px"></bg-detail-table2>
+      <bg-detail-table2 :list="[{ label: 'label', value: 'table2 demo' }]" item-width="200px" />
     </cw>
 
-    <cw title="bg-filter-date"></cw>
-    <cw title="bg-filter-group"></cw>
-    <cw title="bg-filter"></cw>
-    <cw title="bg-filtrate"></cw>
+    <cw title="bg-filter-date" />
+    <cw title="bg-filter-group" />
+    <cw title="bg-filter" />
+    <cw title="bg-filtrate" />
     <cw title="bg-icon">
-      <bg-icon icon="#bg-ic-s-circle-close"></bg-icon>
-      <bg-icon icon="#bg-ic-c-file-doc"></bg-icon>
+      <bg-icon icon="#bg-ic-s-circle-close" />
+      <bg-icon icon="#bg-ic-c-file-doc" />
     </cw>
     <cw title="bg-info">
-      <bg-info :data="info.data"></bg-info>
+      <bg-info :data="info.data" />
     </cw>
     <cw title="bg-inner-tabs">
-      <bg-inner-tabs :data="['a', 'b', 'c']" :v-model="1" :default="1" :height="[36, 32, 16]"></bg-inner-tabs>
+      <bg-inner-tabs
+        :data="['a', 'b', 'c']"
+        :v-model="1"
+        :default="1"
+        :height="[36, 32, 16]" />
     </cw>
     <cw title="bg-layout-card">
       <!-- <bg-layout-card title="title" width="420px" :btns="[1, 2]" @update:btn="handleUpdateBtnIndex"></bg-layout-card> -->
@@ -167,24 +171,24 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card);
         <template #header>list header</template>
       </bg-list>
     </cw>
-    <cw title="bg-nav-list"></cw>
-    <cw title="bg-nav"></cw>
-    <cw title="bg-pagination"></cw>
-    <cw title="bg-rich-text"></cw>
-    <cw title="bg-sort"></cw>
-    <cw title="bg-step"></cw>
-    <cw title="bg-steps"></cw>
-    <cw title="bg-switch"></cw>
+    <cw title="bg-nav-list" />
+    <cw title="bg-nav" />
+    <cw title="bg-pagination" />
+    <cw title="bg-rich-text" />
+    <cw title="bg-sort" />
+    <cw title="bg-step" />
+    <cw title="bg-steps" />
+    <cw title="bg-switch" />
     <!-- <cw title="bg-tab">
       <bg-tab label="label">
         <div>content</div>
       </bg-tab>
     </cw> -->
-    <cw title="bg-table-btn"></cw>
-    <cw title="bg-table-btns-more"></cw>
-    <cw title="bg-table-btns"></cw>
-    <cw title="bg-table-pro"></cw>
-    <cw title="bg-table"></cw>
+    <cw title="bg-table-btn" />
+    <cw title="bg-table-btns-more" />
+    <cw title="bg-table-btns" />
+    <cw title="bg-table-pro" />
+    <cw title="bg-table" />
     <!-- <cw title="bg-tabs">
       <bg-tabs>
         <div>a</div>
@@ -204,15 +208,14 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card);
           (v) => {
             console.log(v);
           }
-        "
-      ></bg-tags>
+        " />
       <template #notes>该组件引用了的el-button需要调整size，以便兼容Element-Plus</template>
     </cw>
-    <cw title="bg-upload-image"></cw>
+    <cw title="bg-upload-image" />
     <cw title="bg-upload">
       <!-- <bg-upload :data="upload.data"></bg-upload> -->
     </cw>
-    <cw title="bg-user-upload-image"></cw>
+    <cw title="bg-user-upload-image" />
   </div>
 </template>
 

src/bg-ui/bg-btns.vue

@@ -3,12 +3,11 @@
     <ul>
       <li
         v-for="btn in options"
+        :key="btn.value"
         :class="{
           'is-active': modelValue === btn.value,
         }"
-        :key="btn.value"
-        @click="selectBtn(btn)"
-      >
+        @click="selectBtn(btn)">
         {{ btn.name }}
       </li>
     </ul>
@@ -16,20 +15,20 @@
 </template>
 
 <script setup>
-import { reactive, ref,onBeforeMount,toRefs  } from 'vue'
+import { reactive, ref,onBeforeMount,toRefs  } from "vue";
 const props = defineProps({
   modelValue: {
     type: [String, Number],
-    default: []
+    default: 0
   },
   options: {
     type: Array,
     default: () => [],
   }
-})
-const emit = defineEmits(['update:modelValue'])
+});
+const emit = defineEmits(["update:modelValue"]);
 
 const selectBtn = ({value})=>{
   emit("update:modelValue", value);
-}
+};
 </script>

src/bg-ui/bg-card.vue

@@ -3,18 +3,18 @@
     <div class="card-header">
       <slot name="title">
         <h3 class="card-title text-clip">
-          <span class="title-icon" v-if="icon">
+          <span v-if="icon" class="title-icon">
             <bg-icon :icon="icon" />
           </span>
-          <span class="easy-icon" v-if="easyIcon"></span>
+          <span v-if="easyIcon" class="easy-icon"></span>
           <span class="title-text">{{ title }}</span>
-          <span class="subtitle-text" v-if="subTitle">{{ subTitle }}</span>
+          <span v-if="subTitle" class="subtitle-text">{{ subTitle }}</span>
         </h3>
       </slot>
       <slot name="title-extra"></slot>
     </div>
-    <div class="card-content" ref="content">
-      <slot />
+    <div ref="content" class="card-content">
+      <slot></slot>
     </div>
   </div>
 </template>
@@ -37,7 +37,7 @@ const props = defineProps({
     type:Boolean,
     default:false,
   }
-})
+});
 </script>
 
 <style scoped>

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

@@ -3,7 +3,6 @@
     v-model:value="states.content"
     class="vue-ace-editor"
     :class="{'vue-ace-editor-disable':props.disabled}"
-    @input="codeChange"     
     :lang="props.lang"     
     :theme="props.theme"
     :options="{ 
@@ -11,32 +10,32 @@
       readOnly: props.disabled,
       wrap: true
     }"
-  />
+    @input="codeChange" />
 </template>
 <script setup>
 import { reactive, toRefs, watch,onMounted } from "vue";
 import { VAceEditor } from "vue3-ace-editor";
-import ace from 'ace-builds';
-import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url';
-import modeJavascriptUrl from 'ace-builds/src-noconflict/mode-javascript?url';
-import modeHtmlUrl from 'ace-builds/src-noconflict/mode-html?url';
-import themeGithubUrl from 'ace-builds/src-noconflict/theme-github?url';
-import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url';
-import themeMonokaiUrl from 'ace-builds/src-noconflict/theme-monokai?url';
-import workerBaseUrl from 'ace-builds/src-noconflict/worker-base?url';
-import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url';
-import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url';
-import workerHtmlUrl from 'ace-builds/src-noconflict/worker-html?url';
-ace.config.setModuleUrl('ace/mode/json', modeJsonUrl);
-ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl);
-ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl);
-ace.config.setModuleUrl('ace/theme/github', themeGithubUrl);
-ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl);
-ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl);
-ace.config.setModuleUrl('ace/mode/base', workerBaseUrl);
-ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl);
-ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl);
-ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl);
+import ace from "ace-builds";
+import modeJsonUrl from "ace-builds/src-noconflict/mode-json?url";
+import modeJavascriptUrl from "ace-builds/src-noconflict/mode-javascript?url";
+import modeHtmlUrl from "ace-builds/src-noconflict/mode-html?url";
+import themeGithubUrl from "ace-builds/src-noconflict/theme-github?url";
+import themeChromeUrl from "ace-builds/src-noconflict/theme-chrome?url";
+import themeMonokaiUrl from "ace-builds/src-noconflict/theme-monokai?url";
+import workerBaseUrl from "ace-builds/src-noconflict/worker-base?url";
+import workerJsonUrl from "ace-builds/src-noconflict/worker-json?url";
+import workerJavascriptUrl from "ace-builds/src-noconflict/worker-javascript?url";
+import workerHtmlUrl from "ace-builds/src-noconflict/worker-html?url";
+ace.config.setModuleUrl("ace/mode/json", modeJsonUrl);
+ace.config.setModuleUrl("ace/mode/javascript", modeJavascriptUrl);
+ace.config.setModuleUrl("ace/mode/html", modeHtmlUrl);
+ace.config.setModuleUrl("ace/theme/github", themeGithubUrl);
+ace.config.setModuleUrl("ace/theme/chrome", themeChromeUrl);
+ace.config.setModuleUrl("ace/theme/monokai", themeMonokaiUrl);
+ace.config.setModuleUrl("ace/mode/base", workerBaseUrl);
+ace.config.setModuleUrl("ace/mode/json_worker", workerJsonUrl);
+ace.config.setModuleUrl("ace/mode/javascript_worker", workerJavascriptUrl);
+ace.config.setModuleUrl("ace/mode/html_worker", workerHtmlUrl);
 const props = defineProps(
     {
         modelValue: {
@@ -60,8 +59,8 @@ const props = defineProps(
           default:"100%"
         },
     }
-)
-const emit = defineEmits(['update:modelValue'])
+);
+const emit = defineEmits(["update:modelValue"]);
 // watch(
 //   props.modelValue,
 //   (n,o) => {
@@ -84,7 +83,7 @@ const states = reactive({
 
 const codeChange = ()=>{
   emit("update:modelValue", states.content);
-}
+};
 
 onMounted(() => {
   let obj = "";
@@ -98,10 +97,10 @@ onMounted(() => {
     } catch (e) {
       obj = props.modelValue;
     }
-  states.content = obj
-})
+  states.content = obj;
+});
 
-const {content} = toRefs(states)
+const {content} = toRefs(states);
 
 </script>
 

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

 <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">
+      :key="'data' + index"
+      class="detail_text text_clip"
+      :style="index == data.length - 1 ? last_width : unit_width">
       <span>{{ item.title }}</span>
       <!-- 拓展功能 -->
       <template v-if="item.slot">
         <span>
-          <slot v-bind:item="item" :name="item.slot"></slot>
+          <slot :item="item" :name="item.slot"></slot>
         </span>
       </template>
       <!-- 原有下载功能 -->
@@ -17,40 +17,38 @@
         <span
           v-if="!item.urls"
           :title="item.info"
-          @click="down_file(item.url)"
           :style="item.url ? { color: '#515fe7', cursor: 'pointer' } : ''"
-          >{{ item.info }}</span
-        >
+          @click="down_file(item.url)">{{ 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
-          >
+            style="color: #515fe7; cursor: pointer"
+            @click="down_file(it)">{{ 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>
+      :key="'bg' + index"
+      class="bg"
+      :style="{ top: (2 * index + 1) * 42 + 'px' }"></div>
   </div>
 </template>
 
 <script setup>
 import { reactive, ref, onBeforeMount, toRefs, watch } from "vue";
 import helper from "./utils/index.js";
-console.log(helper);
 const props = defineProps({
   data: {
     type: Array,
     default: () => [],
   },
   layout: {
-    line_num: 4,
+    type: Object,
+    default: () => {
+      4;
+    },
   },
 });
 
@@ -67,7 +65,11 @@ watch(
     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 + "%",
+        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 + "%" };
@@ -75,7 +77,9 @@ watch(
     if (n.length < props.layout.line_num) {
       return;
     } else {
-      bg_num.value = Math.floor(Math.ceil(n.length / props.layout.line_num) / 2);
+      bg_num.value = Math.floor(
+        Math.ceil(n.length / props.layout.line_num) / 2
+      );
     }
   }
 );

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

 <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">
+    <div
+      v-for="(item, index) in list"
+      :key="'row-box' + index"
+      class="row-box"
+      :style="{ width: item.width }">
+      <p v-if="!item.slot" class="detail-module">
         <span :style="{ width: itemWidth }">{{ item.label }}</span>
-        <span class="text_clip" :title="item.value" v-if="!item.childSlot">{{ item.value }}</span>
+        <span v-if="!item.childSlot" class="text_clip" :title="item.value">{{ item.value }}</span>
         <span v-else>
           <slot :name="item.childSlot" :data="item"></slot>
         </span>

src/bg-ui/bg-detail.vue

 <template>
-  <div class="bg-detail bg-form" ref="bgDetail">
+  <div ref="bgDetail" class="bg-detail bg-form">
     <!-- 固定导航 -->
-    <div class="bg-tabs-nav--fixed" v-show="showFixedBars">
+    <div v-show="showFixedBars" class="bg-tabs-nav--fixed">
       <ul v-if="calcTabs().length">
         <li
           v-for="(item, index) in calcTabs()"
@@ -9,8 +9,7 @@
           :class="{
             current: activeName === item.name,
           }"
-          @click="changeActiveName(item, index)"
-        >
+          @click="changeActiveName(item, index)">
           {{ item.label }}
         </li>
         <li>
@@ -21,22 +20,22 @@
 
     <!-- 面包屑 -->
     <div class="bg-breadcrumb">
-      <slot name="breadcrumb" />
+      <slot name="breadcrumb"></slot>
     </div>
 
     <!-- 基本信息 -->
-    <div class="bg-detail-info" v-if="$slots.info">
-      <slot name="info" />
+    <div v-if="$slots.info" class="bg-detail-info">
+      <slot name="info"></slot>
     </div>
 
     <!-- 兼容意外模块 -->
     <div v-if="$slots.other">
-      <slot name="other" />
+      <slot name="other"></slot>
     </div>
 
     <!-- 详情 -->
     <div class="bg-tabs bg-detail-tabs">
-      <div class="bg-tabs-nav" v-if="calcTabs().length">
+      <div v-if="calcTabs().length" class="bg-tabs-nav">
         <ul>
           <li
             v-for="(item, index) in calcTabs()"
@@ -44,8 +43,7 @@
             :class="{
               current: activeName === item.name,
             }"
-            @click="changeActiveName(item, index)"
-          >
+            @click="changeActiveName(item, index)">
             {{ item.label }}
           </li>
           <li>
@@ -54,30 +52,30 @@
         </ul>
       </div>
       <div class="bg-tabs-content">
-        <slot />
+        <slot></slot>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, provide,reactive,onBeforeMount,onMounted,onUnmounted,nextTick,toRefs,useSlots } from 'vue'
+import { ref, provide,reactive,onBeforeMount,onMounted,onUnmounted,nextTick,toRefs,useSlots } from "vue";
 
-const slots = useSlots()
+const slots = useSlots();
 
-const activeName = ref('')
+const activeName = ref("");
 
-const bgDetail = ref(null)
+const bgDetail = ref(null);
 
-provide('getActiveName',activeName.value)
+provide("getActiveName",activeName.value);
 
-provide('getIsTabs',false)
+provide("getIsTabs",false);
 
-const showFixedBars = ref(false)
+const showFixedBars = ref(false);
 
 const state = reactive({
   scrollCallback:null
-})
+});
 
 const calcTabs=()=> {
       let tabSlots = [];
@@ -94,10 +92,10 @@ const calcTabs=()=> {
       }
 
       return tabSlots;
-    }
+    };
 const changeActiveName=({ name }, index)=> {
-      let targetEl = bgDetail.value.querySelectorAll(`.bg-tab`)[index];
-      let targetCtx = document.querySelector(`.bg-main`);
+      let targetEl = bgDetail.value.querySelectorAll(".bg-tab")[index];
+      let targetCtx = document.querySelector(".bg-main");
 
       targetCtx.scrollTop = targetEl && targetEl.offsetTop - 165;
 
@@ -105,11 +103,11 @@ const changeActiveName=({ name }, index)=> {
       state.scrollCallback = () => {
         activeName.value = name;
       };
-    }
+    };
 const scrollAction=()=> {
-      let targetCtx = document.querySelector(`.bg-main`);
+      let targetCtx = document.querySelector(".bg-main");
       let ctxScrollTop = targetCtx.scrollTop || 0;
-      let targetEls = bgDetail.value.querySelectorAll(`.bg-tab`);
+      let targetEls = bgDetail.value.querySelectorAll(".bg-tab");
       let tabs = calcTabs();
 
       for (let i = 0; i < targetEls.length; i++) {
@@ -123,7 +121,7 @@ const scrollAction=()=> {
       showFixedBars.value = ctxScrollTop > 222;
       state.scrollCallback && state.scrollCallback();
       state.scrollCallback = null;
-    }
+    };
 
 onMounted(()=>{
   nextTick().then(() => {
@@ -132,9 +130,9 @@ onMounted(()=>{
     scrollAction();
     window.addEventListener("scroll", scrollAction, true);
   });
-})
+});
 
 onUnmounted(()=>{
   window.removeEventListener("scroll", scrollAction, true);
-})
+});
 </script>

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

@@ -9,8 +9,7 @@
         range-separator="~"
         start-placeholder="开始日期"
         end-placeholder="结束日期"
-        @change="change">
-      </el-date-picker>
+        @change="change" />
     </div>
   </div>
 </template>

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

@@ -13,30 +13,30 @@
       <div class="right-filter">
         <el-input
           v-if="showSearch"
+          v-model.trim="modelValue"
           :placeholder="placeholder"
-          @keydown.enter="search"
-          @clear="search"
           clearable
-          v-model.trim="modelValue">
+          @keydown.enter="search"
+          @clear="search">
           <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" />
             </div>
           </template>
         </el-input>
-        <div class="more-btn" :class="showFlag ? 'more-btn1' : ''" v-if="$slots.filter_group">
+        <div v-if="$slots.filter_group" class="more-btn" :class="showFlag ? 'more-btn1' : ''">
           <el-button type="default" class="more-filter" @click="moreFilter">
             高级搜索
             <bg-icon
+              v-if="!showFlag"
               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>
+              icon="#bg-ic-arrow-down" />
+            <bg-icon v-else style="font-size: 8px; color: #404a62; margin-left: 8px" icon="#bg-ic-arrow-up" />
           </el-button>
         </div>
       </div>
     </div>
-    <div class="filter-group" ref="filterGroup" v-show="showFlag">
+    <div v-show="showFlag" ref="filterGroup" class="filter-group">
       <slot name="filter_group"></slot>
     </div>
   </div>
@@ -46,7 +46,7 @@
 import { computed, onMounted, reactive, toRefs, watch, ref, nextTick } from "vue";
 
 const state = reactive({
-  showFlag: true,
+  showFlag: false,
   modelValue: "",
 });
 

src/bg-ui/bg-filter.vue

 <template>
-  <div class="bg-filter" v-if="options.length > 0">
+  <div v-if="options.length > 0" class="bg-filter">
     <span>{{ name }}：</span>
 
     <ul>
       <li
         v-for="(item, index) in fullOptions"
-        :class="{ current: selection.indexOf(item.value) > -1 }"
         :key="'li_' + index"
-        @click="selectAction(item)"
-      >
+        :class="{ current: selection.indexOf(item.value) > -1 }"
+        @click="selectAction(item)">
         {{ item.name }}
       </li>
     </ul>
@@ -20,7 +19,7 @@ import {computed} from "vue";
 const props = defineProps({
   modelValue: {
     type: [Number, String],
-    default: '',
+    default: "",
   },
   isCalc:{
       type:Boolean,
@@ -48,7 +47,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(["update:modelValue"]);
 
 const fullOptions = computed(()=> {
       return [
@@ -64,12 +63,12 @@ const fullOptions = computed(()=> {
           };
         }),
       ];
-    })
+    });
 const selection = computed(()=> {
       let value = props.modelValue + "";
 
       return value.split(",");
-    })
+    });
 
 const selectAction = ({ value, name, sub_cate })=> {
       if (value && props.multiple) {
@@ -86,5 +85,5 @@ const selectAction = ({ value, name, sub_cate })=> {
       } else {
         emit("update:modelValue", value, name, sub_cate ? sub_cate : "");
       }
-    }
+    };
 </script>

src/bg-ui/bg-filtrate.vue

@@ -4,8 +4,8 @@
     <ul class="bg-filtrate-list">
       <li
         v-for="(item, index) in fullOptions"
-        :class="{ current: selection.indexOf(item.value) > -1 }"
         :key="'li_' + index"
+        :class="{ current: selection.indexOf(item.value) > -1 }"
         @click="selectAction(item)">
         {{ item.name }}
       </li>

src/bg-ui/bg-icon.vue

 <template>
   <svg class="bg-icon" aria-hidden="true">
-    <use :xlink:href="icon"></use>
+    <use :xlink:href="icon" />
   </svg>
 </template>
 
@@ -12,5 +12,5 @@ const props = defineProps({
     type: String,
     default: "",
   },
-})
+});
 </script>

src/bg-ui/bg-info.vue

@@ -17,25 +17,29 @@
               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">{{
+            <span
+              v-if="item.callback"
+              class="can_click_text"
+              style="text-decoration:underline"
+              @click.stop="item.callback && item.callback()">{{
                 item.value
               }}</span>
             <span v-else>{{ item.value }}</span>
           </span>
-          <a class="copy-btn" @click="copyText(item.value, $event)" v-if="item.copy"> 复制 </a>
+          <a v-if="item.copy" class="copy-btn" @click="copyText(item.value, $event)"> 复制 </a>
           <bg-icon
+            v-if="item.download"
             class="copy-btn"
             :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>
+            @click="download(item.url)" />
           <bg-icon
+            v-if="item.password"
             class="copy-btn"
             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)" />
         </span>
       </li>
     </ul>

src/bg-ui/bg-inner-tabs.vue

 <template>
-    <div class="inner-container" :style="{height:height[0]+'px',fontSize:height[2]+'px'}">
-        <div :style="{height:height[1]+'px',lineHeight:height[1]-2+'px'}" :class="{'now-inner':nowIndex==index}" @click="changeInner(index)" v-for="(item,index) in data" :key="'inner'+index">{{item}}</div>
+  <div
+    class="inner-container"
+    :style="{ height: height[0] + 'px', fontSize: height[2] + 'px' }">
+    <div
+      v-for="(item, index) in data"
+      :key="'inner' + index"
+      :style="{ height: height[1] + 'px', lineHeight: height[1] - 2 + 'px' }"
+      :class="{ 'now-inner': nowIndex == index }"
+      @click="changeInner(index)">
+      {{ item }}
+    </div>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref,onBeforeMount,toRefs  } from 'vue'
+import { reactive, ref, onBeforeMount, toRefs } from "vue";
 const props = defineProps({
-  modelValue:{
-    type: [String,Number],
+  modelValue: {
+    type: [String, Number],
     default: 0,
   },
   data: {
     type: Array,
-    default: [],
+    default: () => [],
   },
-  default:{
-    type: [String,Number],
-    default: 0
+  default: {
+    type: [String, Number],
+    default: 0,
   },
-  height:{
-    type:Array,
-    default:[36,32,16]
-  }
-})
-const emit = defineEmits(['update:modelValue','change'])
+  height: {
+    type: Array,
+    default: () => [36, 32, 16],
+  },
+});
+const emit = defineEmits(["update:modelValue", "change"]);
 
-const nowIndex = ref('')
+const nowIndex = ref("");
 
-const changeInner = (val)=>{
-    nowIndex.value = val
-    emit('update:modelValue',val)
-    emit('change',val)
-}
+const changeInner = (val) => {
+  nowIndex.value = val;
+  emit("update:modelValue", val);
+  emit("change", val);
+};
 
-onBeforeMount(()=>{
-    nowIndex.value = props.default
-})
+onBeforeMount(() => {
+  nowIndex.value = props.default;
+});
 </script>
 
 <style scoped>
-.inner-container{
+.inner-container {
   height: 36px;
   background-color: #edeef0;
   border-radius: 4px;
@@ -48,16 +57,16 @@ onBeforeMount(()=>{
   display: inline-block;
   overflow: hidden;
 }
-.inner-container div{
+.inner-container div {
   height: 32px;
   line-height: 30px;
   border-radius: 4px;
-    padding:0 15px;
+  padding: 0 15px;
   float: left;
   color: #404a62;
   cursor: pointer;
 }
-.inner-container .now-inner{
+.inner-container .now-inner {
   background-color: #2b4695;
   color: #ffffff;
 }

src/bg-ui/bg-layout-card.vue

@@ -2,7 +2,7 @@
   <div class="bg-layout-card" :style="style">
     <div class="card-title">
       <h3 class="title-text text-clip">{{ title }}</h3>
-      <ul class="filter-list" v-if="btns.length > 0">
+      <ul v-if="btns.length > 0" class="filter-list">
         <li
           v-for="(item, index) in btns"
           :key="item"
@@ -12,16 +12,16 @@
         </li>
       </ul>
       <div
-        class="download-btn"
-        @click="downloadAction"
+        v-if="download"
         v-loading="downloading"
+        class="download-btn"
         element-loading-spinner="el-icon-loading"
-        v-if="download">
+        @click="downloadAction">
         <img src="./imgs/btn_daochu.png" />
       </div>
     </div>
-    <div class="card-content" ref="content">
-      <slot />
+    <div ref="content" class="card-content">
+      <slot></slot>
     </div>
   </div>
 </template>
@@ -57,6 +57,7 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(["update:btn"]);
 const style = computed(() => {
   return {
     width: `calc(${props.width} - 20px)`,

src/bg-ui/bg-list.vue

@@ -2,67 +2,71 @@
   <div class="bg-list bg-form">
     <!-- 面包屑 -->
     <div class="bg-breadcrumb">
-      <slot name="breadcrumb" />
+      <slot name="breadcrumb"></slot>
     </div>
 
     <!-- 头部 -->
-    <div class="bg-list-header" v-if="$slots.header">
-      <slot name="header" />
+    <div v-if="$slots.header" class="bg-list-header">
+      <slot name="header"></slot>
     </div>
 
     <!-- 筛选条件 -->
-    <div class="bg-list-filter" v-if="$slots.filters">
-      <div class="fiter-header" v-if="!inlineFilters">
+    <div v-if="$slots.filters" class="bg-list-filter">
+      <div v-if="!inlineFilters" class="fiter-header">
         <span v-if="noMoreFilters">
           <!--  -->
         </span>
         <template v-else>
-          <el-button @click="$emit('update:visible', !visible)" v-if="visible">
+          <el-button v-if="visible" @click="$emit('update:visible', !visible)">
             <span>收起</span>
             <i class="el-icon-caret-top el-icon--right"></i>
           </el-button>
-          <el-button @click="$emit('update:visible', !visible)" v-else>
+          <el-button v-else @click="$emit('update:visible', !visible)">
             <span>更多选项</span>
             <i class="el-icon-caret-bottom el-icon--right"></i>
           </el-button>
         </template>
         <div class="filter-header-right">
-          <slot name="filter" />
+          <slot name="filter"></slot>
         </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" />
+          <slot name="filters"></slot>
         </div>
-        <div class="filter-action" v-if="inlineFilters">
-          <div class="filters-right" v-if="$slots['filters-right']">
-            <slot name="filters-right" />
+        <div v-if="inlineFilters" class="filter-action">
+          <div v-if="$slots['filters-right']" class="filters-right">
+            <slot name="filters-right"></slot>
           </div>
-          <el-button type="primary" @click="$emit('search-action')"> 查询 </el-button>
+          <el-button type="primary" @click="$emit('search-action')">
+            查询
+          </el-button>
           <el-button @click="$emit('search-reset')"> 重置 </el-button>
         </div>
       </div>
     </div>
 
     <!-- 其他信息 -->
-    <div class="bg-list-top" v-if="$slots.top">
-      <slot name="top" />
+    <div v-if="$slots.top" class="bg-list-top">
+      <slot name="top"></slot>
     </div>
 
     <!-- 列表 -->
     <div class="bg-list-main" :class="{ 'has-action': !!$slots.action }">
-      <div class="main-action" v-if="$slots.action">
-        <slot name="action" />
+      <div v-if="$slots.action" class="main-action">
+        <slot name="action"></slot>
       </div>
       <div class="main-table">
-        <slot name="table" />
+        <slot name="table"></slot>
       </div>
       <div class="main-pagination">
-        <slot name="pagination" />
+        <slot name="pagination"></slot>
       </div>
     </div>
 
-    <slot />
+    <slot></slot>
   </div>
 </template>
 
@@ -81,4 +85,6 @@ const props = defineProps({
     default: false,
   },
 });
+
+const emit = defineEmits(["update:visible", "search-action", "search-reset"]);
 </script>

src/bg-ui/bg-nav-list.vue

 <template>
-  <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">
+  <ul v-if="list && list.length" class="nav-list bg-no-scroll">
+    <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` }">
             <!-- <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" />
             {{ 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>
+              icon="#bg-ic-arrow-up" />
             <bg-icon
               v-show="showMore[index] == false"
               style="font-size: 8px; position: absolute; right: 10px; top: 20px"
-              icon="#bg-ic-arrow-down"></bg-icon>
+              icon="#bg-ic-arrow-down" />
           </span>
           &ensp;
         </div>
         <transition name="slideOutUp">
           <NavList
+            v-if="showMore[index] !== false"
             :list="item.children"
             :deep="deep + 1"
-            :highlight-parent-rule="highlightParentRule"
-            v-if="showMore[index] !== false" />
+            :highlight-parent-rule="highlightParentRule" />
         </transition>
       </template>
       <template v-else>
@@ -34,12 +41,20 @@
           class="nav-item text-clip"
           :class="{
             current: isCurrent(
-              item.children && item.children.length ? [...getChildrenPath(item.children), item.path] : [item.path]
+              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>
+          <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" />
             {{ item.menuName }}
           </span>
         </div>
@@ -48,7 +63,6 @@
   </ul>
 </template>
 
-
 <script>
 export default {
   name: "NavList",
@@ -67,6 +81,7 @@ const props = defineProps({
   },
   highlightParentRule: {
     type: Function,
+    default: () => null,
   },
 });
 
@@ -91,25 +106,27 @@ const getChildrenPath = (arr, temp = []) => {
   return temp;
 };
 const isCurrent = (path) => {
-  return (props.highlightParentRule && props.highlightParentRule(path)) || false;
+  return (
+    (props.highlightParentRule && props.highlightParentRule(path)) || false
+  );
 };
 
 /**
  * @description 菜单高度过长，对于不在视野中的元素需要scrollIntoView
  */
-const setCurrentIntoView = ()=>{
-  let current = document.querySelector(".current")
-  if(!current){
-    return
+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()
+  let screenHeight = document.body.clientHeight;
+  let currentClient = current.getBoundingClientRect();
+  if (currentClient.top + currentClient.height > screenHeight - 10) {
+    current.scrollIntoView();
   }
-}
+};
 
-onMounted(()=>{
-  setCurrentIntoView()
-})
+onMounted(() => {
+  setCurrentIntoView();
+});
 </script>

src/bg-ui/bg-nav.vue

 <template>
   <div class="bg-nav" :style="{ width: width }">
-    <div class="bg-nav-title" v-if="title">
+    <div v-if="title" class="bg-nav-title">
       <h3 class="text-clip">{{ title }}</h3>
     </div>
     <div class="bg-nav-list">
@@ -27,6 +27,7 @@ const props = defineProps({
   }, // 导航列表 [ { name: "xxx", path: "xxx" } ]
   highlightParentRule: {
     type: Function,
+    default: () => null,
   },
 });
 </script>

src/bg-ui/bg-pagination.vue

@@ -2,20 +2,20 @@
   <div class="bg-pagination">
     <el-pagination
       :small="small"
-      :currentPage="numberOfPage"
+      :current-page="numberOfPage"
       :page-size="numberOfPageSize"
       :page-sizes="pageSizes"
       :layout="layout"
       :total="total"
-      @size-change="changeSize"
-      @current-change="changePage"
       :background="background"
-      :disabled="disabled" />
+      :disabled="disabled"
+      @size-change="changeSize"
+      @current-change="changePage" />
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { computed } from "vue";
 const props = defineProps({
   small: {
     type: Boolean,
@@ -31,7 +31,7 @@ const props = defineProps({
   },
   pageSizes: {
     type: Array,
-    default: [10, 50, 100],
+    default: () => [10, 50, 100],
   },
   total: {
     type: Number,
@@ -51,8 +51,8 @@ const props = defineProps({
   },
 });
 const emit = defineEmits(["change-page", "change-size"]);
-const numberOfPage = computed(() => Number(props.page))
-const numberOfPageSize = computed(() => Number(props.size))
+const numberOfPage = computed(() => Number(props.page));
+const numberOfPageSize = computed(() => Number(props.size));
 const changePage = (val) => {
   emit("change-page", val);
 };

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

 <template>
   <div style="border: 1px solid #ccc; z-index: 100">
-    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
+    <Toolbar
+      style="border-bottom: 1px solid #ccc"
+      :editor="editorRef"
+      :default-config="toolbarConfig"
+      :mode="mode" />
     <Editor
-      style="height: 500px; overflow-y: hidden"
       v-model="valueHtml"
-      @onChange="handleChange"
-      @onBlur="handleBlur"
-      :defaultConfig="editorConfig"
+      style="height: 500px; overflow-y: hidden"
+      :default-config="editorConfig"
       :mode="mode"
-      @onCreated="handleCreated" />
+      @on-change="handleChange"
+      @on-blur="handleBlur"
+      @on-created="handleCreated" />
   </div>
 </template>
 
 <script setup>
 import "@wangeditor/editor/dist/css/style.css"; // 引入 css
-
 import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
 import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
-
 import { useFormItem } from "element-plus";
 
 const props = defineProps({
@@ -34,8 +36,14 @@ const props = defineProps({
     default: "default",
   },
 });
-
-const emit = defineEmits(["update:modelValue", "change", "blur"]);
+const emit = defineEmits([
+  "update:modelValue",
+  "update:visible",
+  "search-action",
+  "search-reset",
+  "change",
+  "blur",
+]);
 
 const valueHtml = ref("");
 // change次数

src/bg-ui/bg-switch.vue

 <template>
-  <div ref="bgSwitch" 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>
-    <span class="circle" :style="now_circle_style" ref="circle">
+    <span ref="circle" class="circle" :style="now_circle_style">
       <!-- circle -->
     </span>
   </div>

src/bg-ui/bg-tab.vue

 <template>
-  <div class="bg-tab" v-show="showTab">
-    <div class="tab-title" v-if="!isTabs">
+  <div v-show="showTab" class="bg-tab">
+    <div v-if="!isTabs" class="tab-title">
       <h3>{{ label }}</h3>
     </div>
     <div class="tab-content">
-      <slot />
+      <slot></slot>
     </div>
   </div>
 </template>
@@ -15,7 +15,7 @@ import { reactive, ref, onBeforeMount, toRefs, computed, inject } from "vue";
 const getActiveName = inject(
   "activeName",
   ()=>{
-    return ''
+    return "";
   },
   false
 );

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

 <template>
   <a class="bg-table-btn" :class="{ disabled: disabled }" @click="clickAction">
-    <slot />
+    <slot></slot>
   </a>
 </template>
 

src/bg-ui/bg-table-btns-more.vue

@@ -4,8 +4,7 @@
       v-for="(item, index) in operations"
       :key="index"
       :disabled="isDisabled(item)"
-      @click="clickAction(item)"
-    >
+      @click="clickAction(item)">
       {{ getName(item) }}
     </bg-table-btn>
   </div>
@@ -25,6 +24,13 @@ export default {
       style: {},
     };
   },
+  mounted() {
+    document.body.append(this.$el);
+    this.upStyle();
+  },
+  beforeUnmount() {
+    this.$el && this.$el.remove();
+  },
   methods: {
     isDisabled({ disabled }) {
       if (typeof disabled === "function") {
@@ -38,7 +44,7 @@ export default {
       }
     },
     clickAction({ callback }) {
-      this.$parent.hideBox()
+      this.$parent.hideBox();
       typeof callback === "function" && callback();
     },
     getName({ name }) {
@@ -59,12 +65,5 @@ export default {
       };
     },
   },
-  mounted() {
-    document.body.append(this.$el);
-    this.upStyle();
-  },
-  beforeDestroy() {
-    this.$el && this.$el.remove();
-  },
 };
 </script>

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

 <template>
   <div class="bg-table-btns">
     <bg-table-btn
-      class="can_click_text"
       v-for="(item, index) in curOperations"
       :key="index"
+      class="can_click_text"
       :disabled="isDisabled(item)"
-      @click="clickAction(item)"
-    >
+      @click="clickAction(item)">
       {{ getName(item) }}
     </bg-table-btn>
     <a
+      v-if="otherOperations.length > 0"
       class="bg-table-btn"
       @mouseenter="showMoreBtns"
-      @mouseleave="hideMoreBtns"
-      v-if="otherOperations.length > 0"
-    >
+      @mouseleave="hideMoreBtns">
       <!-- <i class="el-icon-more" /> -->
       <bg-icon style="font-size: 12px; color: #2b4695;" icon="#bg-ic-s-more" />
       <bg-table-btns-more
+        v-if="showMore"
         :operations="otherOperations"
         @mouseenter="showMoreBtns"
-        @mouseleave="hideMoreBtns"
-        v-if="showMore"
-      />
+        @mouseleave="hideMoreBtns" />
     </a>
   </div>
 </template>
@@ -55,7 +52,7 @@ export default {
   },
   methods: {
     hideBox() {
-      this.showMore = false
+      this.showMore = false;
     },
     isDisabled({ disabled }) {
       if (typeof disabled === "function") {

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

 <template>
-  <div class="bg-table-btns" ref="bgTableBtnsRef">
+  <div ref="bgTableBtnsRef" class="bg-table-btns">
     <slot></slot>
     <span
-      class="bg-table-btn more"
-      id="more_btn"
       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"
-          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
-          >
+            @click="action(item.onClick, item.disabled)">{{ item.name }}</span>
         </div>
       </teleport>
     </span>
@@ -56,7 +54,7 @@ const action = (event, disable) => {
     return;
   }
   event();
-  state.showMore = false
+  state.showMore = false;
 };
 
 const calcTabs = () => {

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

@@ -7,18 +7,23 @@
     :data="data"
     :row-key="rowKey"
     :tree-props="treeProps"
-    @selection-change="selectionChange"
     tooltip-effect="light"
-    :default-expand-all="defaultExpandAll">
-    <el-table-column width="60" v-if="showIndex">
-      <template v-slot:header>
+    :default-expand-all="defaultExpandAll"
+    @selection-change="selectionChange">
+    <el-table-column v-if="showIndex" width="60">
+      <template #header>
         <p style="width: 100%; text-align: center">序号</p>
       </template>
-      <template v-slot:default="{ $index }">
+      <template #default="{ $index }">
         <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="showSelectColumn" />
+    <el-table-column
+      v-if="showSelectColumn"
+      type="selection"
+      :selectable="selectable"
+      width="60"
+      align="center" />
     <el-table-column
       v-for="(header, index) in headers"
       :key="`col_${index}`"
@@ -27,9 +32,9 @@
       :align="header.align"
       :show-overflow-tooltip="!$slots[header.prop]"
       :fixed="header.fixed">
-      <template v-slot:header>
+      <template #header>
         <template v-if="$slots[`header-${header.prop}`]">
-          <slot :name="`header-${header.prop}`" />
+          <slot :name="`header-${header.prop}`"></slot>
         </template>
         <template v-else>
           <p class="text-clip">
@@ -39,13 +44,16 @@
         </template>
       </template>
 
-      <template v-slot:default="{ row, $index }">
+      <template #default="{ row, $index }">
         <template v-if="$slots[header.prop]">
-          <slot :name="header.prop" :row="row" :index="$index" />
+          <slot :name="header.prop" :row="row" :index="$index"></slot>
         </template>
         <template v-else-if="$slots[`text-${header.prop}`]">
           <p class="text-clip">
-            <slot :name="`text-${header.prop}`" :row="row" :index="$index" />
+            <slot
+              :name="`text-${header.prop}`"
+              :row="row"
+              :index="$index"></slot>
           </p>
         </template>
         <template v-else>
@@ -64,16 +72,20 @@ const attrs = useAttrs();
 const props = defineProps({
   headers: {
     type: Array,
+    default: () => [],
     require: true,
   },
   data: {
     type: Array,
+    default: () => [],
   },
   rowKey: {
     type: String,
+    default: "",
   },
   treeProps: {
     type: Object,
+    default: () => {},
   },
   showIndex: {
     type: Boolean,
@@ -81,6 +93,7 @@ const props = defineProps({
   },
   selectable: {
     type: Function,
+    default: () => null,
   },
   defaultExpandAll: {
     type: Boolean,
@@ -138,7 +151,9 @@ const upAllSelection = (selection) => {
   selectionIds = selectionIds.filter((v) => rowIds.indexOf(v) === -1);
 
   // allSelection仅保留selectionIds存在的
-  allSelection1 = allSelection1.filter((v) => selectionIds.indexOf(v[props.rowKey]) > -1);
+  allSelection1 = allSelection1.filter(
+    (v) => selectionIds.indexOf(v[props.rowKey]) > -1
+  );
 
   // 然后再加入当前页的选中
   allSelection1.push(...selection);
@@ -182,5 +197,5 @@ const getRowInfo = (row, key) => {
 
 defineExpose({
   getRowInfo,
-})
+});
 </script>

src/bg-ui/bg-table.vue

 <template>
   <el-table
-    :height="height"
     ref="table"
+    :height="height"
     class="bg-table"
     :data="rows"
-    @selection-change="selectAction"
-    @select="selectActionRow"
-    @select-all="selectActionAll"
     :stripe="stripe"
     :row-class-name="stripe ? tableRowClassName : ''"
-    tooltip-effect="light">
-    <template v-slot:empty>
+    tooltip-effect="light"
+    @selection-change="selectAction"
+    @select="selectActionRow"
+    @select-all="selectActionAll">
+    <template #empty>
       <div class="empty_container">
-        <img src="../assets/imgs/img-no-data.png" alt="" />
+        <img src="./imgs/img-no-data.png" alt="" />
         <div class="text">暂无数据</div>
       </div>
     </template>
-    <el-table-column v-if="paddingLeft > 10" :width="paddingLeft - 10"></el-table-column>
-    <el-table-column type="selection" :selectable="selectable" width="38" v-if="select">
+    <el-table-column v-if="paddingLeft > 10" :width="paddingLeft - 10" />
+    <el-table-column
+      v-if="select"
+      type="selection"
+      :selectable="selectable"
+      width="38">
       <!-- checkbox -->
     </el-table-column>
-    <el-table-column v-if="isIndex" type="index" :label="indexLabel" :width="indexWidth" 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>
+      <template #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 />
+      <template #default="{ row, $index }">
+        <p
+          style="
+            width: 100%;
+            text-align: center;
+            display: flex;
+            align-items: center;
+          ">
+          <bg-icon
+            v-if="row.sort == 1"
+            style="font-size: 12px; color: #429e8a; margin-right: 9px"
+            icon="#bg-ic-arrow-up-2" />
+          <bg-icon
+            v-else-if="row.sort == 2"
+            style="font-size: 12px; color: #d75138; margin-right: 9px"
+            icon="#bg-ic-arrow-down-2" />
+          <bg-icon
+            v-else
+            style="font-size: 12px; color: #909bb6; margin-right: 9px"
+            icon="#bg-ic-minus" />
           <span>{{ $index + 1 }}</span>
         </p>
       </template>
     </el-table-column>
     <el-table-column
       v-for="(header, index) in headers"
+      :key="'col_' + index"
       :width="header.width"
       :min-width="header.minWidth"
       :align="header.align"
-      :key="'col_' + index"
       :fixed="header.fixed"
       show-overflow-tooltip>
-      <template v-slot:header>
+      <template #header>
         <template v-if="$slots[`header-${header.prop}`]">
-          <slot :name="`header-${header.prop}`" />
+          <slot :name="`header-${header.prop}`"></slot>
         </template>
-        <p class="text-clip" v-else>{{ header.label }}</p>
+        <p v-else class="text-clip">{{ header.label }}</p>
       </template>
-      <template v-slot:default="{ row }">
-        <slot v-if="$slots[header.prop]" :name="header.prop" :row="row" />
+      <template #default="{ row, $index }">
+        <slot
+          v-if="$slots[header.prop]"
+          :name="header.prop"
+          :index="$index"
+          :row="row"></slot>
 
         <template v-else>
-          <col-node :val="row[header.prop]" :emptyColPlaceholder="emptyColPlaceholder"></col-node>
+          <col-node
+            :val="row[header.prop]"
+            :empty-col-placeholder="emptyColPlaceholder" />
           <!-- {{ row[header.prop] | ellipsis(header.max) }} -->
         </template>
       </template>
@@ -65,7 +95,14 @@
 <script setup>
 import { h, watch, ref } from "vue";
 import { selectTableMixin } from "./hook/mixin-select-table";
-let { nowSelectData, allSelectData, selectData, initSelectTableData, runPage, dealSelectData } = selectTableMixin();
+let {
+  nowSelectData,
+  allSelectData,
+  selectData,
+  initSelectTableData,
+  runPage,
+  dealSelectData,
+} = selectTableMixin();
 
 const props = defineProps({
   height: {
@@ -74,6 +111,7 @@ const props = defineProps({
   },
   headers: {
     type: Array,
+    default: () => [],
     require: true,
   },
   rows: {
@@ -109,7 +147,7 @@ const props = defineProps({
   }, // 多选框是否禁用
   canEditFlag: {
     type: Boolean,
-    default: "",
+    default: false,
   }, // 决定多选框是否禁用的字段
   sort: {
     type: Boolean,
@@ -121,8 +159,8 @@ const props = defineProps({
   }, // 后端行数据某列为空时显示的占位符号
   indexWidth: {
     type: Number,
-    default: 54
-  }
+    default: 54,
+  },
 });
 
 const table = ref(null);
@@ -148,11 +186,17 @@ const toggleRowSelection = (row, flag = true) => {
   table.value.toggleRowSelection(row, flag);
 };
 const selectAction = (selection) => {
-  emit("selectAc", { allLength: Object.keys(allSelectData).length + nowSelectData.length, selection });
+  emit("selectAc", {
+    allLength: Object.keys(allSelectData).length + nowSelectData.length,
+    selection,
+  });
 };
 const clearSelection = () => {
   table.value.clearSelection();
-  emit("select", { allLength: Object.keys(allSelectData).length + nowSelectData.length, selection: [] });
+  emit("select", {
+    allLength: Object.keys(allSelectData).length + nowSelectData.length,
+    selection: [],
+  });
 };
 const setSelectedRow = (row) => {
   toggleRowSelection(row);
@@ -164,11 +208,17 @@ const toggleRowArrSelection = (arr, flag = true) => {
 };
 const selectActionRow = (selection, row) => {
   selectData(selection);
-  emit("select", { allLength: Object.keys(allSelectData).length + nowSelectData.length, 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 });
+  emit("select", {
+    allLength: Object.keys(allSelectData).length + nowSelectData.length,
+    selection,
+  });
 };
 const clearTable = () => {
   //清除选中数据,在页面状态更新时使用
@@ -203,15 +253,15 @@ const selectable = (row, index) => {
  */
 const colNode = (props) => {
   if (props.val === "") {
-    if (typeof props.emptyColPlaceholder === 'string') {
+    if (typeof props.emptyColPlaceholder === "string") {
       return h("span", props.emptyColPlaceholder);
     }
-    if (typeof props.emptyColPlaceholder === 'function') {
-      return props.emptyColPlaceholder()
+    if (typeof props.emptyColPlaceholder === "function") {
+      return props.emptyColPlaceholder();
     }
   }
   return h("span", props.val);
-}
+};
 defineExpose({
   clearTable,
   toggleRowSelection,

src/bg-ui/bg-tabs.vue

@@ -8,8 +8,7 @@
           :class="{
             current: modelValue === item.name,
           }"
-          @click="changeActiveName(item, index)"
-        >
+          @click="changeActiveName(item, index)">
           {{ item.label }}
         </li>
         <li>
@@ -18,10 +17,10 @@
       </ul>
     </div>
     <div class="bg-tabs-content">
-      <slot />
+      <slot></slot>
     </div>
-    <div class="bg-tabs-action" v-if="$slots.action">
-      <slot name="action" />
+    <div v-if="$slots.action" class="bg-tabs-action">
+      <slot name="action"></slot>
     </div>
   </div>
 </template>
@@ -38,7 +37,7 @@ const props = defineProps({
   },
 });
 
-const getActiveName = provide("activeName", ()=>{return props.modelValue});
+const getActiveName = provide("activeName", ()=>{return props.modelValue;});
 const getIsTabs = provide("isTabs", true);
 
 const emit = defineEmits(["update:modelValue"]);
@@ -54,7 +53,7 @@ const calcTabs = () => {
       .map((vnode) => vnode.props);
   }
 
-  console.log(tabSlots)
+  console.log(tabSlots);
 
   return tabSlots;
 };

src/bg-ui/bg-tags.vue

@@ -5,13 +5,17 @@
         <span>
           {{ tag }}
         </span>
-        <a @click="deleteTag(index)" v-if="!disabled">
+        <a v-if="!disabled" @click="deleteTag(index)">
           <i class="el-icon-close"></i>
         </a>
       </li>
       <li v-if="!disabled">
-        <el-button type="primary" size="small" @click="showInput = true" v-if="!showInput"> 新增 </el-button>
-        <el-input v-model.trim="newTag" @blur="addTag" v-else />
+        <el-button
+          v-if="!showInput"
+          type="primary"
+          size="small"
+          @click="showInput = true"> 新增 </el-button>
+        <el-input v-else v-model.trim="newTag" @blur="addTag" />
       </li>
     </ul>
   </div>

src/bg-ui/bg-upload-image.vue

@@ -18,35 +18,50 @@
     :on-remove="handleRemove"
     :on-preview="handlePreview"
     :multiple="multiple">
-    <template v-slot:trigger>
+    <template #trigger>
       <el-icon v-if="listType === 'picture-card'"><Plus /></el-icon>
       <!-- <i class="el-icon-plus" v-if="listType === 'picture-card'"></i> -->
-      <el-button type="primary" :icon="UploadFilled" v-else>
+      <el-button v-else type="primary" :icon="UploadFilled">
         {{ triggerText }}
       </el-button>
     </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"
+        style="margin-left: 16px"
+        @click="submitUpload">
         上传到服务器
       </el-button>
     </template>
 
-    <template v-slot:tip v-if="showTips && tips">
+    <template v-if="showTips && tips" #tip>
       <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" />
+  <el-dialog v-model="dialogVisible" title="图片预览">
+    <img
+      style="margin: 30px 0; width: 100%"
+      :src="dialogImageUrl"
+      alt="Preview Image" />
   </el-dialog>
 </template>
 
 <script setup>
 import { UploadFilled } from "@element-plus/icons-vue";
-import { computed, watch, onMounted, reactive, ref, nextTick, toRefs } from "vue";
+import {
+  computed,
+  watch,
+  onMounted,
+  reactive,
+  ref,
+  nextTick,
+  toRefs,
+} from "vue";
 import { ElMessage } from "element-plus";
 
 const props = defineProps({
@@ -68,6 +83,7 @@ const props = defineProps({
   },
   limit: {
     type: Number,
+    default: 3,
   },
   multiple: {
     type: Boolean,
@@ -76,9 +92,11 @@ const props = defineProps({
 
   accept: {
     type: [Array, String],
+    default: "",
   }, // 接受类型
   fileSize: {
     type: Number,
+    default: 2048,
   }, // 文件大小
   fileSizeUnit: {
     type: String,
@@ -161,7 +179,9 @@ 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(",");
+    let oldStr = state.fileList
+      .map((v) => (v.response && v.response.data) || v.url)
+      .join(",");
 
     if (newStr !== oldStr) {
       state.fileList = [...props.modelValue];
@@ -182,7 +202,9 @@ const handleBeforeUpload = (file) => {
   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;
+    props.fileSize === 0 ||
+    props.fileSize === undefined ||
+    file.size / units[props.fileSizeUnit] <= props.fileSize;
   let checked = fileTypeIsOk && fileSizeIsOk;
 
   if (!checked) {

src/bg-ui/bg-upload.vue

 <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="{
-        directory: 'file',
-        uniqueCode: false,
-      }"
+      ref="uploadRef"
+      :action="actionUrl"
+      :data="actionData"
+      :name="actionName"
+      :auto-upload="auto"
+      :accept="acceptType"
       :before-upload="handleBeforeUpload"
+      :file-list="fileList"
       :on-exceed="handleExceed"
       :on-success="handleSuccess"
       :on-preview="handlePreview"
       :on-remove="handleRemove"
-      :file-list="fileList"
+      :on-change="auto ? () => {} : onChangeFile"
       :disabled="actionDisabled"
       style="max-width: 600px"
       drag
@@ -23,25 +27,28 @@
         支持上传{{ fileTypes.join("、") }}，最大{{ fileMaxSize }}M
       </div> -->
       <template v-if="isEasy">
-        <el-button type="primary" size="small">
-          <bg-icon :icon="`#${triggerIcon}`" v-if="triggerIcon" style="margin-right: 8px" />
+        <el-button type="primary" size="mini">
+          <bg-icon
+            v-if="triggerIcon"
+            :icon="`#${triggerIcon}`"
+            style="margin-right: 8px" />
           {{ triggerText }}
         </el-button>
       </template>
-      <div class="trigger-content" v-else>
+      <div v-else class="trigger-content">
         <div class="trigger-icon">
           <img src="./imgs/ic_updata_cloud.png" />
         </div>
-        <p class="trigger-tip" style="text-align: center" v-if="customTips">
+        <p v-if="customTips" class="trigger-tip" style="text-align: center">
           <slot></slot>
         </p>
-        <p class="trigger-tip" v-else>
+        <p v-else class="trigger-tip">
           1.最多允许上传{{ limit }}个附件 <br />
           2.单个附件最大{{ fileMaxSize }}M； <br />
           3.允许上传后缀为传{{ fileTypes.join("、") }} <br />
         </p>
       </div>
-      <template v-slot:tip v-if="otherInfo != ''">
+      <template v-if="otherInfo != ''" #tip>
         <div class="el-upload__tip" style="color: #909bb6; line-height: 18px">
           {{ otherInfo }}
         </div>
@@ -51,7 +58,15 @@
 </template>
 
 <script setup>
-import { computed, watch, onMounted, reactive, ref, nextTick, toRefs } from "vue";
+import {
+  computed,
+  watch,
+  onMounted,
+  reactive,
+  ref,
+  nextTick,
+  toRefs,
+} from "vue";
 import { ElMessage } from "element-plus";
 
 const props = defineProps({
@@ -99,29 +114,73 @@ const props = defineProps({
     type: Number,
     default: 9999,
   },
+  /**
+   * @description  true:自动上传 false:手动上传
+   */
+  auto: {
+    type: Boolean,
+    default: true,
+  },
+  actionUrl: {
+    type: String,
+    default: "/apaas/common/file/upload",
+  },
+  actionData: {
+    type: Object,
+    default: () => ({
+      directory: "file",
+      uniqueCode: false,
+    }),
+  },
+  actionName: {
+    type: String,
+    default: "file",
+  },
+  saveType: {
+    type: String,
+    default: "url",
+  },
 });
 
-const emit = defineEmits(["update:modelValue", "change"]);
+const emit = defineEmits(["update:modelValue", "change", "delete"]);
+
+const uploadRef = ref(null);
 
 const state = reactive({
   fileList: [],
+  initFileList: [],
 });
 
 const actionDisabled = computed(() => {
   return props.disabled;
 });
 
+const acceptType = computed(() => {
+  let str = "";
+  props.fileTypes.forEach((e, idx) => {
+    if (idx == props.fileTypes.length - 1) {
+      str = str + "." + e;
+    } else {
+      str = str + "." + e + ",";
+    }
+  });
+  return str;
+});
+
 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(",");
+    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}个文件`);
@@ -129,7 +188,8 @@ const handleBeforeUpload = (file) => {
   }
   let temp = file.name.split(".");
   let type = temp[temp.length - 1].toLocaleLowerCase();
-  let fileTypesOk = props.fileTypes.indexOf(type) > -1 || props.fileTypes.length == 0;
+  let fileTypesOk =
+    props.fileTypes.indexOf(type) > -1 || props.fileTypes.length == 0;
   let fileMaxSizeOk = file.size / 1024 / 1024 <= props.fileMaxSize;
 
   if (!fileTypesOk) {
@@ -155,16 +215,25 @@ const handlePreview = (val) => {
 };
 const handleRemove = (file, fileList) => {
   updateFileList(fileList);
+  emit("delete", file);
 };
 const handleSuccess = (response, file, fileList) => {
   updateFileList(fileList);
 };
 const updateFileList = (fileList) => {
   let values = fileList.map((v) => {
+    //默认保存地址到modelValue，需要保留文件的场景返回文件
+    if (props.saveType == "url") {
+      return {
+        name: v.name,
+        url: (v.response && v.response.data) || v.url || v.raw,
+      };
+    } else {
       return {
         name: v.name,
-      url: (v.response && v.response.data) || v.url,
+        url: v.raw,
       };
+    }
   });
 
   state.fileList = fileList;
@@ -173,8 +242,18 @@ const updateFileList = (fileList) => {
   emit("change", values);
 };
 
+const onChangeFile = (file, fileList) => {
+  console.log(file, fileList);
+  if (!handleBeforeUpload(file.raw)) {
+    state.fileList = state.fileList.filter(({ uid }) => file.uid !== uid);
+    return;
+  }
+  updateFileList(fileList);
+};
+
 onMounted(() => {
   state.fileList = [...props.modelValue];
+  state.initFileList = [...props.modelValue];
 });
 
 const { fileList } = toRefs(state);

src/bg-ui/bg-user-upload-image.vue

 <template>
   <div class="bg-upload-image user-upload-image">
     <el-upload
-      action="#"
       ref="upload"
+      action="#"
       :auto-upload="false"
       :on-change="onChangeFile"
       :file-list="fileList"
       :disabled="disabled">
-      <template v-slot:trigger>
+      <template #trigger>
         <div class="trigger-content">
-          <div class="image-trigger" v-if="modelValue">
+          <div v-if="modelValue" class="image-trigger">
             <img :src="modelValue" />
             <div class="refresh-image">
               <i class="el-icon-refresh-right"></i>
             </div>
           </div>
-          <div class="upload-trigger" v-else>
+          <div v-else class="upload-trigger">
             <span class="upload-icon"></span>
           </div>
         </div>

src/bg-ui/debounce.js

@@ -8,39 +8,39 @@
  */
 
  const debounce = (func, time, type, ctx) => {
-    var timer, lastCall, rtn
+    var timer, lastCall, rtn;
     // 防抖函数
-    if (type === 'debounce') {
+    if (type === "debounce") {
       rtn = (...params) => {
-        if (timer) clearTimeout(timer)
+        if (timer) clearTimeout(timer);
         timer = setTimeout(() => {
-          func.apply(ctx, params)
-        }, time)
-      }
-    } else if (type === 'throttle') {
+          func.apply(ctx, params);
+        }, time);
+      };
+    } else if (type === "throttle") {
       // 节流函数
       rtn = (...params) => {
-        const now = new Date().getTime()
-        if (now - lastCall < time && lastCall) return
-        lastCall = now
-        func.apply(ctx, params)
-      }
+        const now = new Date().getTime();
+        if (now - lastCall < time && lastCall) return;
+        lastCall = now;
+        func.apply(ctx, params);
+      };
     } else {
       // 立即执行的防抖函数
       rtn = (...params) => {
-        if (timer) clearTimeout(timer)
-        let callNow = !timer
+        if (timer) clearTimeout(timer);
+        let callNow = !timer;
         timer = setTimeout(() => {
-          timer = null
-        }, time)
-        if (callNow) func.apply(ctx, params)
-      }
-    }
-    return rtn
+          timer = null;
+        }, time);
+        if (callNow) func.apply(ctx, params);
+      };
     }
+    return rtn;
+  };
 
   export default {
-    name: 'Debounce',
+    name: "Debounce",
     abstract: true,
     props: {
       time: {
@@ -49,33 +49,34 @@
       },
       events: {
         type: String,
-        default: 'click', // 默认点击事件
+        default: "click", // 默认点击事件
       },
       type: {
         type: String,
-        default: 'throttle', // 默认节流
+        default: "throttle", // 默认节流
       },
     },
     created() {
-      this.eventKeys = this.events.split(',') // 分隔事件
-      this.originMap = {} // 储存事件，用于重新render时与子事件的对比
-      this.debouncedMap = {} // 储存防抖节流事件
+      this.eventKeys = this.events.split(","); // 分隔事件
+      this.originMap = {}; // 储存事件，用于重新render时与子事件的对比
+      this.debouncedMap = {}; // 储存防抖节流事件
     },
     render() {
       try {
-        const vnode = this.$slots.default[0]
+        const vnode = this.$slots.default[0];
         this.eventKeys.forEach(key => {
-          const target = vnode.data.on[key]
+          const target = vnode.data.on[key];
           if (target === this.originMap[key] && this.debouncedMap[key]) {
-            vnode.data.on[key] = this.debouncedMap[key]
+            vnode.data.on[key] = this.debouncedMap[key];
           } else if (target) {
-            this.originMap[key] = target
-            this.debouncedMap[key] = debounce(target, this.time, this.type, vnode)
-            vnode.data.on[key] = this.debouncedMap[key] // 重写子组件的事件
+            this.originMap[key] = target;
+            this.debouncedMap[key] = debounce(target, this.time, this.type, vnode);
+            vnode.data.on[key] = this.debouncedMap[key]; // 重写子组件的事件
           }
-        })
-        return vnode
-      } catch (error) {}
-    },
+        });
+        return vnode;
+      } catch (error) {
+        console.error(error);
       }
-  
\ No newline at end of file
+    },
+  };

src/bg-ui/hook/mixin-select-table.js

-import { reactive, toRefs,useAttrs } from 'vue'
+import { reactive, toRefs,useAttrs } from "vue";
 export function selectTableMixin(){
   const state = reactive({
     nowSelectData:[],
     allSelectData:{}
-  })
+  });
 
-  const attrs = useAttrs()
+  const attrs = useAttrs();
 // const nowSelectData = reactive([])
 // const allSelectData = reactive({})
 
 const selectData = (val)=>{
   console.log(val);
-  state.nowSelectData = val
-  console.log('allSelectData');
+  state.nowSelectData = val;
+  console.log("allSelectData");
   console.log(state.allSelectData);
   console.log(Object.keys(state.allSelectData).length);
-}
+};
 
 const initSelectTableData = (data)=>{
   return new Promise((reslove,reject)=>{
     data.forEach(e => {
-      if(state.allSelectData[e[attrs.rowKey||'id']]){
-        delete state.allSelectData[e[attrs.rowKey||'id']]
-        state.nowSelectData.push(e)
+      if(state.allSelectData[e[attrs.rowKey||"id"]]){
+        delete state.allSelectData[e[attrs.rowKey||"id"]];
+        state.nowSelectData.push(e);
       }
     });
     
     console.log(state.nowSelectData);
-    reslove(state.nowSelectData)
-  })
-}
+    reslove(state.nowSelectData);
+  });
+};
 
 const runPage=()=>{//翻页数据推进
   state.nowSelectData.forEach(e => {
-    state.allSelectData[e[attrs.rowKey||'id']] = e
+    state.allSelectData[e[attrs.rowKey||"id"]] = e;
   });
-  state.nowSelectData = []
-}
+  state.nowSelectData = [];
+};
 
 const clearTable=()=>{//清除选中数据,在页面状态更新时使用
-  state.allSelectData={}
-  state.nowSelectData=[]
+  state.allSelectData={};
+  state.nowSelectData=[];
   clearSelection();
-}
+};
 
 const dealSelectData=()=>{//最后提交处理数据
   state.nowSelectData.forEach(e => {
-    state.allSelectData[e[attrs.rowKey||'id']] = e
+    state.allSelectData[e[attrs.rowKey||"id"]] = e;
   });
-  return state.allSelectData
-}
+  return state.allSelectData;
+};
 
-const { nowSelectData, allSelectData } = toRefs(state)
+const { nowSelectData, allSelectData } = toRefs(state);
 
 return{
   nowSelectData,
@@ -61,7 +61,7 @@ return{
   runPage,
   clearTable,
   dealSelectData
-}
+};
 
 }
 

src/bg-ui/index.js

 /**
  * 全局组件
  */
- import BgIcon from './bg-icon.vue' 
- import BgNav from './bg-nav.vue'
- import BgList from './bg-list.vue'
- import BgDetail from './bg-detail.vue'
- import BgFiltrate from './bg-filtrate.vue'
- import BgTable from './bg-table.vue'
- import BgTablePro from './bg-table-pro.vue'
- import BgTableBtn from './bg-table-btn.vue'
- import BgTabs from './bg-tabs.vue'
- import BgTab from './bg-tab.vue'
- import BgLayoutCard from './bg-layout-card.vue'
- import BgCard from './bg-card.vue'
- import BgInfo from './bg-info.vue'
- import BgBtns from './bg-btns.vue'
- import BgUpload from './bg-upload.vue'
- import BgUploadImage from './bg-upload-image.vue'
- import BgTags from './bg-tags.vue'
- import BgSwitch from './bg-switch.vue'
- import BgRichText from './bg-rich-text.vue'
- import BgCodeEditor from './bg-code-editor.vue'
- import BgFilter from './bg-filter.vue'
- import BgSort from './bg-sort.vue'
- import BgFilterDate from './bg-filter-date.vue'
- import bgUserUploadImage from './bg-user-upload-image.vue'
- import bgDetailTable from './bg-detail-table.vue'
- import bgDetailTable2 from './bg-detail-table2.vue'
- import debounce from './debounce'
- import BgPagination from './bg-pagination.vue'
- 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'
+ import BgIcon from "./bg-icon.vue"; 
+ import BgNav from "./bg-nav.vue";
+ import BgList from "./bg-list.vue";
+ import BgDetail from "./bg-detail.vue";
+ import BgFiltrate from "./bg-filtrate.vue";
+ import BgTable from "./bg-table.vue";
+ import BgTablePro from "./bg-table-pro.vue";
+ import BgTableBtn from "./bg-table-btn.vue";
+ import BgTabs from "./bg-tabs.vue";
+ import BgTab from "./bg-tab.vue";
+ import BgLayoutCard from "./bg-layout-card.vue";
+ import BgCard from "./bg-card.vue";
+ import BgInfo from "./bg-info.vue";
+ import BgBtns from "./bg-btns.vue";
+ import BgUpload from "./bg-upload.vue";
+ import BgUploadImage from "./bg-upload-image.vue";
+ import BgTags from "./bg-tags.vue";
+ import BgSwitch from "./bg-switch.vue";
+ import BgRichText from "./bg-rich-text.vue";
+ import BgCodeEditor from "./bg-code-editor.vue";
+ import BgFilter from "./bg-filter.vue";
+ import BgSort from "./bg-sort.vue";
+ import BgFilterDate from "./bg-filter-date.vue";
+ import bgUserUploadImage from "./bg-user-upload-image.vue";
+ import bgDetailTable from "./bg-detail-table.vue";
+ import bgDetailTable2 from "./bg-detail-table2.vue";
+ import debounce from "./debounce";
+ import BgPagination from "./bg-pagination.vue";
+ 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,//字体图标

src/bg-ui/utils/index.js

-var downloadFileFormatNew = function (fileUrl) {
+var downloadFileFormatNew = function(fileUrl) {
     /* 
       input: /apaas/common/docs/image/images/1234_qq234ewr123.png
       output: 1234.png
     */
     if (fileUrl != "") {
-      var temp = fileUrl.split('/')[fileUrl.split('/').length-1]
-      var name = temp.split('_')[0]
-      var type = temp.split('_')[temp.split('_').length-1].split('.')[1]
-      if(temp.indexOf('_')==-1){
-        return name
+      var temp = fileUrl.split("/")[fileUrl.split("/").length-1];
+      var name = temp.split("_")[0];
+      var type = temp.split("_")[temp.split("_").length-1].split(".")[1];
+      if(temp.indexOf("_")==-1){
+        return name;
       }else{
-        return name+'.'+type
+        return name+"."+type;
       }
     } else {
       return "";
     }
-}
+};
 
 export default {
     downloadFileFormatNew
-}
\ No newline at end of file
+};
\ No newline at end of file

src/components/componentWrapper.vue

@@ -14,9 +14,9 @@
 const props = defineProps({
   title: {
     type: String,
-    default: 'component name'
+    default: "component name"
   }
-})
+});
 </script>
 
 <style lang="scss" scoped>