br-dionysus 1.3.3 → 1.4.1

package/README.md

@@ -2088,3 +2088,1950 @@ const list = ref<{ name: string, className: string }[]>([
 
 
 
+
++ moneyFormat([](#))
+
+
+对话框
+=================
+
+### 1) 基础用法
+
+
+
+```html
+
+<template>
+  <div>
+    <p>弹窗</p>
+    <el-button @click="dialogVisible = true">默认</el-button>
+    <m-dialog
+      v-model="dialogVisible"
+      draggable
+      title="这是标题"
+      resize
+      @resized="test"
+      @opened="opened"
+    >
+      <div class="u-box j-box">
+        <p
+          class="u-table j-table"
+          :style="'height: ' + height + 'px'"
+        >
+          这是一条消息{{ height }}
+        </p>
+        <div>这是干扰元素</div>
+        <div class="u-pa">这是绝对<br/>定位元素</div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">
+            确认
+          </el-button>
+        </div>
+      </template>
+    </m-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MDialog } from 'packages/MDialog'
+import { useRemainingSpace } from 'packages/index'
+
+const dialogVisible = ref<boolean>(false)
+
+const test = (size: { width: number, height: number }) => {
+  // console.log('size', size)
+}
+
+const { height, init } = useRemainingSpace('j-box', 'j-table')
+const opened = () => {
+  init()
+}
+</script>
+
+<style scoped lang="scss">
+.u-box {
+  //position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #000;
+  flex-direction: column;
+
+  .u-table {
+    border: 1px solid red;
+    box-sizing: border-box;
+  }
+
+  .u-pa {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+}
+</style>
+
+
+```
+
+### 2) Attributes
+
+| 参数     |      说明       |   类型    | 可选值 |                       默认值                       |
+|--------|:-------------:|:-------:|:---:|:-----------------------------------------------:|
+| resize |  是否开启拖拽改变大小   | boolean |  -  |                      false                      |
+| 其余参数   | 参考el官网的dialog |    -    |  -  | https://element-plus.org/zh-CN/component/dialog |
+
+### 2) Events
+
+| 方法名     |      说明       |                           参数                           |
+|---------|:-------------:|:------------------------------------------------------:|
+| resized |  窗口大小改变完成事件   | (contentsSize: { width: number, height: number })内容物大小 |
+| 其余参数    | 参考el官网的dialog |    https://element-plus.org/zh-CN/component/dialog     |
+
+
+
+
+筛选
+=================
+
+### 1) 基础用法
+
+
+
+```html
+
+<template>
+  <div class="g-demo-m-inline-box">
+    <m-inline size="small">
+      <template #inlineBtn>
+        <el-button
+          type="primary"
+          size="small"
+          icon="Plus"
+        >
+          新增
+        </el-button>
+        <el-button
+          type="success"
+          size="small"
+          icon="Edit"
+        >
+          编辑
+        </el-button>
+        <el-button
+          type="warning"
+          size="small"
+          icon="Delete"
+        >
+          删除
+        </el-button>
+      </template>
+      <template #default>
+        <el-form
+          :model="formInline"
+          labelWidth="80px"
+          :showMessage="false"
+          size="small"
+          @submit.prevent
+          data-box
+        >
+          <el-form-item
+            label="编码"
+            prop="code"
+            data-item
+          >
+            <el-input
+              v-model="formInline.code"
+              clearable
+              placeholder="请输入编码"
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item
+            label="角色名"
+            prop="name"
+            data-item
+          >
+            <el-input
+              v-model="formInline.name"
+              clearable
+              placeholder="请输入角色名"
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item
+            label="时间"
+            prop="time"
+            data-item
+          >
+            <el-input
+              v-model="formInline.time"
+              clearable
+              placeholder="请输入时间"
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item
+            label="编码"
+            prop="code"
+            data-item
+          >
+            <el-input
+              v-model="formInline.code"
+              clearable
+              placeholder="请输入编码"
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item
+            label="角色名"
+            prop="name"
+            data-item
+          >
+            <el-input
+              v-model="formInline.name"
+              clearable
+              placeholder="请输入角色名"
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item
+            label="时间"
+            prop="time"
+            data-item
+          >
+            <el-input
+              v-model="formInline.time"
+              clearable
+              placeholder="请输入时间"
+            >
+            </el-input>
+          </el-form-item>
+        </el-form>
+      </template>
+      <template #submitBtn>
+        <el-button
+          type="primary"
+          icon="Search"
+          size="small"
+        >
+          搜索
+        </el-button>
+      </template>
+    </m-inline>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+// 列表过滤条件表单
+const formInline = reactive({
+  name: '',
+  code: '',
+  time: ''
+})
+</script>
+
+<style scoped>
+.g-demo-m-inline-box {
+  max-width: 1000px;
+}
+</style>
+
+
+```
+
+### 2) Attributes
+
+| 参数       |  说明   |   类型   |            可选值            |   默认值   |
+|----------|:-----:|:------:|:-------------------------:|:-------:|
+| minWidth | 列最小宽度 | number |             -             |   200   |
+| maxWidth | 列最大宽度 | number |             -             |   300   |
+| size     | 组件尺寸  |  enum  | large \| default \| small | default |
+
+### 2) Events
+
+| 方法名    |           说明           |       参数        |
+|--------|:----------------------:|:---------------:|
+| switch | 当切换展开与折叠模式时触发,返回当前展开状态 | unfold(boolean) |
+
+
+
+
+数值输入框组件
+=================
+
+### 1) 基础用法
+
+
+```html
+
+<template>
+  <div class="g-demo-m-input-number-box">
+    <m-input-number v-model="test"></m-input-number>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const test = ref<number>(0)
+</script>
+
+<style scoped>
+.g-demo-m-input-number-box {
+  max-width: 1000px;
+}
+</style>
+
+
+```
+
+### 2) Attributes
+
+| 参数               |        说明         |   类型    |        可选值         |    默认值    |
+|------------------|:-----------------:|:-------:|:------------------:|:---------:|
+| value / v-model  |        绑定值        | number  |         -          |    ''     |
+| min              |   设置数值输入框允许的最小值   | number  |         -          | -Infinity |
+| max              |   设置数值输入框允许的最大值   | number  |         -          | Infinity  |
+| step             |      数值输入框步长      | number  |         -          |     1     |
+| step-strictly    |  是否只能输入 step 的倍数  | boolean |         -          |   true    |
+| size             |      数值输入框尺寸      | string  | large, small, mini |     -     |
+| disabled         |     是否禁用数值输入框     | boolean |         -          |   false   |
+| placeholder      | 输入框默认 placeholder | string  |         -          |    ''     |
+| thousandth-place |    输入框是否显示千分位     | boolean |         -          |   false   |
+| no-border        |      是否不要边框       | boolean |         -          |   false   |
+| no-spacing       |       不要边距        | boolean |         -          |   false   |
+
+### 3) Events
+
+| 方法名    |       说明        |           参数           |
+|--------|:---------------:|:----------------------:|
+| change |    绑定值被改变时触发    | currentValue, oldValue |
+| focus  | 当 input 获得焦点时触发 |     (event: Event)     |
+| blur   | 当 input 失去焦点时触发 |     (event: Event)     |
+
+
+
+
+下拉选择器组件
+=================
+
+### 1) 基础用法
+
+
+
+```html
+
+<template>
+  <div class="g-demo-m-select-box">
+    <m-select
+      v-model="test"
+      checkboxMode
+      multiple
+    >
+      <m-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      ></m-option>
+    </m-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const test = ref<string>('')
+
+const options: Option[] = [{
+  label: '这是选项一',
+  value: 'a'
+}, {
+  label: '这是选项二',
+  value: 'b'
+}]
+</script>
+
+<style scoped>
+.g-demo-m-select-box {
+  max-width: 1000px;
+}
+</style>
+
+
+```
+
+### 2) Attributes
+
+| 参数                            |                            说明                             |   类型    | 可选值 |  默认值  |
+|-------------------------------|:---------------------------------------------------------:|:-------:|:---:|:-----:|
+| value / v-model               |                            绑定值                            | number  |  -  |  ''   |
+| checkbox-mode                 |                      是否为复选框模式（只影响样式）                      | boolean |  -  | false |
+| 其他属性同element-plus的el-select组件 | https://element-plus.gitee.io/zh-CN/component/select.html |    -    |  -  |   -   |
+
+
+
+
+下拉表格选择器
+=================
+
+### 1) 基础用法
+
+
+
+```html
+
+<template>
+  <div>
+    <p>多选</p>
+    <p>第一个选择器的值： {{ code }}</p>
+    <m-select-table
+      class="u-select"
+      ref="selectRef"
+      v-model="code"
+      placeholder="请选择单号"
+      :tableTitle="commodityOptionsTitle"
+      :options="options"
+      :keywords="{ label: 'ApprovedQtyPU', value: 'DocNo' }"
+      @selected="selected"
+      @selectMultiple="selectMultiple"
+      tableHeight="200"
+      @toPage="toPage"
+      :total="total"
+      scrollbarAlwaysOn
+      filterable
+      remote
+      multiple
+      allowCreate
+      border
+      :remoteMethod="remoteMethod"
+    ></m-select-table>
+    <p>多选单绑定的value为字符串类型</p>
+    <p>第二个选择器的值： {{ code2 }}</p>
+    <m-select-table
+      class="u-select"
+      ref="selectRef"
+      v-model="code2"
+      :name="code2Name"
+      placeholder="请选择单号"
+      :tableTitle="commodityOptionsTitle"
+      :options="options"
+      :keywords="{ label: 'ApprovedQtyPU', value: 'DocNo' }"
+      @selected="selected"
+      @selectMultiple="selectMultiple"
+      tableHeight="200"
+      @toPage="toPage"
+      :total="total"
+      scrollbarAlwaysOn
+      filterable
+      remote
+      multiple
+      border
+      :remoteMethod="remoteMethod"
+      @clear="test"
+    ></m-select-table>
+    <p>单选</p>
+    <p>第三个择器的值： {{ code3 }}</p>
+    <m-select-table
+      class="u-select"
+      ref="selectRef"
+      v-model="code3"
+      placeholder="请选择单号"
+      :tableTitle="commodityOptionsTitle"
+      :options="options"
+      :keywords="{ label: 'ApprovedQtyPU', value: 'DocNo' }"
+      @selected="selected"
+      @selectMultiple="selectMultiple"
+      tableHeight="200"
+      @toPage="toPage"
+      :total="total"
+      scrollbarAlwaysOn
+      filterable
+      remote
+      allowCreate
+      :remoteMethod="remoteMethod"
+      :popupWidth="800"
+    ></m-select-table>
+    <!--<el-select-->
+    <!--  v-model="code2"-->
+    <!--  multiple-->
+    <!--&gt;-->
+    <!--  <el-option-->
+    <!--    v-for="item in options"-->
+    <!--    :key="item.DocNo"-->
+    <!--    :label="item.ApprovedQtyPU"-->
+    <!--    :value="item.DocNo"-->
+    <!--  ></el-option>-->
+    <!--</el-select>-->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { Page } from 'packages/typings/class'
+
+const test = () => {
+  console.log('xxx')
+}
+
+const commodityOptionsTitle: TableTitle[] = [{
+  prop: 'PRDocType',
+  label: '单据类型'
+  // minWidth: 200
+}, {
+  prop: 'DocNo',
+  label: '请购单号'
+  // minWidth: 200
+}, {
+  prop: 'ApprovedQtyPU',
+  // minWidth: 300,
+  label: '名称'
+
+}, {
+  prop: 'ACCode',
+  label: '货币'
+  // minWidth: 200
+}]
+const selectRef: any = ref<HTMLElement | null>(null)
+
+const code = ref<string | number | Array<string | number>>([])
+const code2 = ref<string | number | Array<string | number>>('')
+const code2Name = ref<string | number | Array<string | number>>([])
+const code3 = ref<string | number | Array<string | number>>('')
+
+const total = ref(0)
+const options = ref<any[]>([])
+const mockData: any[] = []
+for (let i = 0; i < 1000; i++) {
+  mockData.push({
+    PRDocType: '测试数据' + (i + 1),
+    DocNo: i + 1,
+    ApprovedQtyPU: 'ApprovedQtyPU' + (i + 1),
+    ACCode: 'ACCode'
+  })
+}
+const getDataList = (page: Page = new Page(), str: string = '') => {
+  setTimeout(() => {
+    options.value = mockData.filter(item => item.PRDocType.includes(str)).slice(0, page.pageSize)
+    total.value = mockData.length
+  })
+}
+
+setTimeout(() => {
+  options.value = [{
+    PRDocType: 'xxxPRDocType1',
+    DocNo: 1,
+    ApprovedQtyPU: 'xxxApprovedQtyPU1',
+    ACCode: 'xxxACCode1'
+  }, {
+    PRDocType: 'xxxPRDocType2',
+    DocNo: 2,
+    ApprovedQtyPU: 'xxxApprovedQtyPU2',
+    ACCode: 'xxxACCode2'
+  }]
+  code.value = [1, 2]
+  code2.value = ''
+  code2Name.value = ['xxxApprovedQtyPU2', 'xxxApprovedQtyPU3', 'xxxApprovedQtyPU4']
+  code3.value = 1
+
+  // setTimeout(() => {
+  //   options.value = []
+  // }, 2500)
+}, 1000)
+
+const selected = (value: string | number | Array<number | string>) => {
+  // console.log(value)
+  // code.value = value
+  // console.log('selected',value)
+  // // console.log('selected', row)
+}
+
+const toPage = (page: Page, str: any) => {
+  getDataList(page, str)
+}
+const selectMultiple = (value: string | number | Array<number | string>) => {
+  code.value = value
+}
+
+const remoteMethod = async (query: string, page: Page = new Page()) => {
+  await getData(query, page)
+}
+const getData = async (query: string, page: any) => {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      const start = (page.currentPage - 1) * page.pageSize
+      options.value = mockData.filter(item => item.PRDocType.includes(query)).slice(start, start + page.pageSize)
+      total.value = mockData.length
+      resolve()
+    }, 500)
+  })
+}
+
+onMounted(() => {
+  getDataList()
+})
+// const filterMethod = (searchValue: string, page: Page) => {
+//   // 手动过滤的得 保留一份原始数据
+//   const arr = JSON.parse(JSON.stringify(options.value))
+//   options.value = arr.filter((item: any) => item.ApprovedQtyPU.toString().includes(searchValue))
+// }
+</script>
+
+<style>
+.u-select {
+  width: 240px;
+}
+</style>
+
+
+```
+
+### 2)  Attributes
+
+| 参数                | 说明                                                       | 类型                                  | 可选                        | 是否必填 | 默认值                             |
+|-------------------|----------------------------------------------------------|-------------------------------------|---------------------------|:----:|---------------------------------|
+| value / v-model   | 绑定值                                                      | number,string, Array<number,string> | -                         |  否   | ''                              |
+| name              | 显示值，有值时覆盖所有显示逻辑，直接显示name                                 | number,string, Array<number,string> | -                         |  否   | ''                              |
+| placeholder       | 占位符                                                      | string                              | -                         |  否   | 请选择                             |
+| disabled          | 是否禁用                                                     | boolean                             | -                         |  否   | false                           |
+| size              | 大小                                                       | enum                                | large \| default \| small |  否   | default                         |
+| options           | 下拉表的 表内数据,详情见Option接口                                    | Option[]                            | -                         |  否   | []                              |
+| total             | 总数量 当有值时，出现分页器                                           | number                              | null                      |  否   | null                            |
+| filterMethod      | 自定义搜索方法   (使用时必须传递filterable)                            | Function                            | null                      |  否   | null                            |
+| filterable        | 是否开启筛选    (如果开启但没有传递自定义搜索方法 效果为筛选当前页数据的 keywords[label]) | boolean                             | -                         |  否   | false                           |
+| remote            | 是否使用远程搜索                                                 | boolean                             | -                         |  否   | false                           |
+| remoteMethod      | 自定义远程搜索方法 (使用时必须传递filterable和remote)                     | Function                            | -                         |  否   | {}                              |
+| tableTitle        | 下拉表的 表头定义,详情见TableTitle接口                                | TableTitle[]                        | -                         |  否   | []                              |
+| multiple          | 是否开启多选                                                   | boolean                             | -                         |  否   | false                           |
+| keywords          | 关键字配置（value-key 配置）映射关键字                                 | Option                              | -                         |  否   | {label: 'label' ,value:'value'} |
+| reserveSelection  | 是否打开翻页多选      需要是多选才有效                                   | boolean                             | -                         |  否   | false                           |
+| tableHeight       | 表格高度                                                     | string                              | number                    |  否   | 200                             |
+| isAffirmBtn       | 是否有确认按钮  当使用此按钮时    selected事件无效 需使用selectMultiple事件     | boolean                             | -                         |  否   | false                           |
+| scrollbarAlwaysOn | 是否常态显示滚动条                                                | boolean                             | -                         |  否   | false                           |
+| allowCreate       | 是否能够创建条目                                                 | boolean                             | -                         |  否   | false                           |
+| popupWidth        | 弹窗的宽度                                                    | string,number                       | -                         |  否   | 500                             |
+| border            | 表格边框                                                     | boolean                             | -                         |  否   | false                           |
+
+#### Options（选项接口）
+
+| 参数                  |          说明           |        类型         | 可选值 | 是否必填 |
+|---------------------|:---------------------:|:-----------------:|:---:|:----:|
+| label               | 选项的标签，若不设置则默认与value相同 |      string       |  -  |  是   |
+| value               |         选项的值          | string  \| number |  -  |  是   |
+| disabled            |        是否禁用该选项        |      boolean      |  -  |  否   |
+| \[propName: string] |         额外字段          | string  \| number |  -  |  否   |
+
+#### Page (分页对象)
+
+| 参数               | 说明      | 类型       |
+|------------------|---------|----------|
+| total            | 总数      | number   |
+| pageSize         | 分页大小    | number   |
+| currentPage      | 页码      | number   |
+| pageSizesOptions | 分页大小可选项 | number[] |
+
+### 3)  events
+
+| 事件名            | 说明                           | 回调参数                                                          |
+|----------------|------------------------------|---------------------------------------------------------------|
+| selected       | 单选或多选之后的回调                   | 根据多选和单选的模式不同 返回的也有所区别  单选为  (value,row)  多选为(values[],rows[]) |
+| toPage         | 当没有使用filterMethod时候才会有回调否则没有 | page 表格分页                                                     |
+| selectMultiple | 多选确认按钮时的回调 配合isAffirmBtn使用   | (values: Array<string \| number>, rows: Option[])             |
+| clear          | 用户点击清空按钮时触发                  | -                                                             |
+| removeTag      | 多选模式下移除tag时触发                | (tag: any)                                                    |
+
+### 4)  Methods
+
+| 方法名                  | 说明                                                                       |
+|----------------------|--------------------------------------------------------------------------|
+| defaultBackFillValue | 手动重载反填 使用场景 当前开启多选 并且开启翻页多选的时候 这个时候需要默认反填上值的话 需要赋值之后 延迟调用此方法  其余场景 为默认反填 |
+| clear                | 清空已选择                                                                    |
+| focus                | 聚焦下拉框                                                                    |
+
+#### filterMethod
+
+| 返回值         | 类型     | 说明     |
+|-------------|--------|--------|
+| searchValue | string | 返回输入的值 |
+| Page        | Page   | 整个分页类  |
+
+#### remoteMethod
+
+| 返回值         | 类型     | 说明     |
+|-------------|--------|--------|
+| searchValue | string | 返回输入的值 |
+| Page        | Page   | 整个分页类  |
+
+
+
+
+下拉表格选择器（旧版，只做维护不更新）
+=================
+
+### 1) 基础用法
+
+
+
+```html
+
+<template>
+  <div class="g-m-select-table-box">
+    <m-select-table-v1
+      v-model="code"
+      placeholder="请选择单号"
+      :remoteMethod="remoteMethod"
+      :options="options"
+      :tableTitle="commodityOptionsTitle"
+      focusShow
+      clearable
+      @clear="clearCall"
+    ></m-select-table-v1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Page } from '../../typings/class'
+
+const code = ref<string>('')
+const options = ref<Option[]>()
+const commodityOptionsTitle: TableTitle[] = [{
+  prop: 'sn',
+  label: '单号'
+}, {
+  prop: 'fileName',
+  label: '文件名'
+}, {
+  prop: 'createdUserName',
+  label: '上传者'
+}, {
+  prop: 'createdTimeStr',
+  label: '上传时间'
+}]
+
+const mockData = [{
+  sn: 'SC201564981241',
+  fileName: '测试文件1.zip',
+  createdUserName: '绫波丽',
+  createdTimeStr: '2024-05-06'
+}, {
+  sn: 'SC201564981242',
+  fileName: '测试文件2.zip',
+  createdUserName: '绫波丽',
+  createdTimeStr: '2024-05-06',
+  disabled: true
+}, {
+  sn: 'SC201564981243',
+  fileName: '测试文件3.zip',
+  createdUserName: '绫波丽',
+  createdTimeStr: '2024-05-06'
+}, {
+  sn: 'SC201564981244',
+  fileName: '测试文件4.zip',
+  createdUserName: '绫波丽',
+  createdTimeStr: '2024-05-06'
+}]
+const clearCall = (e: any) => {
+  console.log(e)
+  console.log('!@#@#')
+}
+const remoteMethod = async (query: string = '', page: Page) => {
+  console.log('page', page)
+  options.value = mockData.map(item => ({
+    label: item.fileName,
+    value: item.sn,
+    sn: item.sn,
+    fileName: item.fileName,
+    createdUserName: item.createdUserName,
+    createdTimeStr: item.createdTimeStr,
+    disabled: item.disabled
+  }))
+}
+</script>
+
+<style lang="scss">
+</style>
+
+
+```
+
+### 2)  Attributes
+
+| 参数                |            说明            |    类型    |         可选值          |   默认值   |
+|-------------------|:------------------------:|:--------:|:--------------------:|:-------:|
+| value / v-model   |           绑定值            |  string  |        number        |    -    | ''   |
+| placeholder       |    输入框默认 placeholder     |  string  |          -           |   ''    |
+| disabled          |           是否禁用           | boolean  |          -           |  false  |
+| size              |         数值输入框尺寸          |  string  | 'large', 'small', '' |   ''    |
+| options           |    选项内容，详情见Options接口     | Option[] |          -           |   []    |
+| total             |     总数据量，当有值时，出现分页器      |  number  |         null         |    -    |
+| remoteMethod      |        自定义远程搜索方法         | Function |          -           |    -    |
+| tableTitle        |          表格标题配置          |  any[]   |          -           |   []    |
+| isSelect          |           是否多选           | boolean  |          -           |  false  |
+| allowCreate       |       是否允许用户创建新条目        | boolean  |          -           |  false  |
+| focusShow         | 是否聚焦显示（既，当搜索值为空时是否显示选择器） |    -     |        false         |    -    |
+| clearable         |         是否可以清空选项         | boolean  |          -           |  false  |
+| scrollbarAlwaysOn |         总是显示滚动条          | boolean  |          -           |    -    |
+| labelKey          |        label映射key        |  string  |          -           | 'label' |
+
+#### Options（选项接口）
+
+| 参数                  |          说明           |        类型         | 可选值 | 是否必填 |
+|---------------------|:---------------------:|:-----------------:|:---:|:----:|
+| label               | 选项的标签，若不设置则默认与value相同 |      string       |  -  |  是   |
+| value               |         选项的值          | string  \| number |  -  |  是   |
+| disabled            |        是否禁用该选项        |      boolean      |  -  |  否   |
+| \[propName: string] |         额外字段          | string  \| number |  -  |  否   |
+
+### 3) Events
+
+| 方法名            |     说明      |          参数           |
+|----------------|:-----------:|:---------------------:|
+| selectMultiple | 多选确认按钮点击时触发 | selectedRow(所选行构成的数组) |
+| change         |  绑定值被改变时触发  |         value         |
+| selected       | 单选模式点击行时触发  |   selectedRow（所选行）    |
+| clear          |  清空选择之后回调   |           -           |
+
+
+
+
+下拉选择器V2组件
+=================
+
+### 1) 基础用法
+
+
+
+```html
+
+<template>
+  <div class="g-demo-m-select-box">
+    <m-select-v2
+      v-model="test"
+      checkboxMode
+      multiple
+      :options="options"
+      showAll
+    >
+    </m-select-v2>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const test = ref<string>('')
+
+const options: Option[] = [{
+  label: '这是选项一',
+  value: 'a'
+}, {
+  label: '这是选项二',
+  value: 'b'
+}, {
+  label: '这是选项三',
+  value: 'c',
+  disabled: true
+}]
+</script>
+
+<style scoped>
+.g-demo-m-select-box {
+  max-width: 1000px;
+}
+</style>
+
+
+```
+
+### 2) Attributes
+
+| 参数                            |                            说明                             |    类型    | 可选值 |  默认值  |
+|-------------------------------|:---------------------------------------------------------:|:--------:|:---:|:-----:|
+| value / v-model               |                            绑定值                            |  number  |  -  |  ''   |
+| checkbox-mode                 |                      是否为复选框模式（只影响样式）                      | boolean  |  -  | false |
+| multiple                      |                           是否多选                            | boolean  |  -  | false |
+| show-all                      |               是否显示全选选项（只在multiple为true时生效）                | boolean  |  -  | false |
+| options                       |                            选项值                            | Option[] |  -  |  []   |
+| 其他属性同element-plus的el-select组件 | https://element-plus.gitee.io/zh-CN/component/select.html |    -     |  -  |   -   |
+
+#### Option（选项对象）
+
+| 参数       |          说明           |   类型    | 必填 | 可选值 |  默认值  |
+|----------|:---------------------:|:-------:|:--:|:---:|:-----:|
+| label    | 选项的标签，若不设置则默认与value相同 | string  | 否  |  -  |   -   |
+| value    |         选项的值          | number  | 是  |  -  |   -   |
+| disabled |        是否禁用该选项        | boolean | 否  |  -  | false |
+
+
+
+
+表格组件
+=================
+
+### 1) 基础用法
+
+
+
+
+```html
+
+<template>
+  <div>
+    <MTable :data="tableData" @pasteData="pasteData" sole="date">
+      <el-table-column label="Date" prop="date"/>
+      <el-table-column prop="address" label="Address"></el-table-column>
+      <el-table-column prop="name" label="name">
+        <template #default="scope">
+          <el-input v-model="scope.row.name"></el-input>
+        </template>
+      </el-table-column>
+    </MTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface User {
+  date: string;
+  name: string;
+  address: string;
+  tag: string;
+}
+
+const tableData = ref(<User[]>[
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Home'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Home'
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
+  }
+])
+
+const pasteData = (obj: any, data: any) => {
+  tableData.value = data
+}
+</script>
+
+<style lang="scss"></style>
+
+
+```
+
+### 2) Attributes
+| 参数              |            说明            |    类型    |         可选值          |  默认值 |
+| ----------- | ------- | ---------------------------- |-----|--------|
+|data               |表格的数据                  | Array      |           -            |    [ ]   |
+|sole               |行的唯一值                  |String , number     |    -              |    key  |
+|filtersValue       |表格内容筛选                |Function    |   -                    |  () => void   |
+|其余参数            |参考el官网的table           |any         |        -               |https://element-plus.org/zh-CN/component/table.html|
+## 要求
+```
+sole 必须传递在表格数据内为唯一的值  如id key 等不会发生重复的关键字
+```
+
+### 3) Events
+| 方法名          |     说明      |          回调参数           |
+| ----------- | ------- | ---------------------------- |
+| pasteData      | 表格粘贴方法   |  共有2个参数,依次为粘贴动作的数据PasteAction ,表格原始数据tableData |
+|其余方法          |参考el官网的table           |https://element-plus.org/zh-CN/component/table.html|
+
+### 4) PasteAction
+|参数  |  说明  | 类型  | 
+|-----|-------|-------|
+|editRow|返回粘贴的对应行的原始数据|Object|
+|editColumn|返回粘贴时鼠标所在列的 表格prop值|String|
+|arr|返回粘贴时候处理之后的 数组信息|Array|
+|rowIndex|根据sole的值 去data内查找   当前操作的 粘贴行在data内的序号|number|
+
+
+
+
+
+表格列组件
+=================
+
+### 1) 基础用法
+
+
+
+
+```html
+
+<template>
+  <div>
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+    >
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :minWidth="item.minWidth"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+        :children="item.children||[]"
+      >
+        <template #default="aa">
+        </template>
+      </MTableColumn>
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+interface FilterValue {
+  [key: string]: Array<string | number>
+}
+const filtersValue = ref<FilterValue>({})
+interface User {
+  date: string;
+  name: string;
+  address: string;
+  tag: string;
+}
+const tableData = ref<User[]>([
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Home'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Home'
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
+  }
+])
+const tableTitle = [
+  {
+    label: '日期',
+    prop: 'date',
+    minWidth: '172px'
+  },
+  {
+    label: '名称',
+    prop: 'name',
+    minWidth: '134px'
+  },
+  {
+    label: '地址',
+    children: [
+      {
+        label: '123',
+        children: [
+          {
+            label: '222222222222',
+            prop: 'address',
+            minWidth: '134px'
+
+          },
+          {
+            label: 'qqqqqq',
+            prop: 'address',
+            minWidth: '134px'
+
+          }
+        ]
+      },
+      {
+        label: '2222',
+        prop: 'address',
+        minWidth: '134px'
+      }
+    ]
+
+  },
+  {
+    label: '标签',
+    prop: 'tag',
+    minWidth: '134px'
+  }
+]
+</script>
+
+<style lang="scss"></style>
+
+
+```
+
+### 2) Attributes
+| 参数         | 说明                                | 类型               | 可选值 | 默认值                                              |
+| ------------ | ----------------------------------- | ------------------ | ------ | --------------------------------------------------- |
+| filtersValue | 列筛选过滤条件                      | object             | -      | { }                                                 |
+| filters      | 表格筛选数据                        | string[],number[]  | -      | any[]                                               |
+| filterMethod | 筛选方法                            | Function           | -      | () => void                                          |
+| children     | 多级表头 时使用传递对应数据进行循环 | Table-column API[] | -      | []                                                  |
+| 其余参数     | 参考el官网的table                   | any                | -      | https://element-plus.org/zh-CN/component/table.html |
+
+
+
+
+表格头设置组件
+=================
+
+### 1) 基础用法
+
+
+
+
+```html
+
+<template>
+  <div>
+    <MTableColumnSet
+      v-model="tableConfig"
+      foldMode
+    />
+    <div>
+      {{ tableConfig }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tableConfig = ref({
+  date: {
+    minWidth: 100,
+    show: true,
+    sort: 0,
+    label: 'date'
+  },
+  name: {
+    minWidth: 100,
+    show: true,
+    sort: 1,
+    label: 'name'
+  },
+  address: {
+    minWidth: 100,
+    show: true,
+    sort: 2,
+    label: 'address'
+  }
+})
+
+</script>
+
+<style lang="scss"></style>
+
+
+```
+
+### 2) Attributes
+
+| 参数                    | 说明                                                 | 类型                                     | 可选值 | 默认值   |
+|-----------------------| ---------------------------------------------------- | ---------------------------------------- | ------ |-------|
+| model-value / v-model | 绑定值                                               | {  [propName: string]: TableConfigItem } | -      | {}    |
+| link                  | 是否为链接按钮                                               | boolean | -      | false |
+| foldMode              | 是否开启折叠 开启的话需要父级元素为flex布局/grid布局 | boolean                                  | -      | false |
+
+
+### 3) TableConfigItem 
+| 参数        | 说明                                              | 类型                       |
+| ----------- | ------------------------------------------------- | -------------------------- |
+| minWidth    | 最小列宽                                          | number,string              |
+| show        | 是否显示                                          | boolean                    |
+| sort        | 排序                                              | number                     |
+| label       | 列名                                              | string                     |
+| headerAlign | 表头对齐方式， 若不设置该项，则使用表格的对齐方式 | 'left' ,'center' , 'right' |
+
+
+
+
+皮肤设置
+=================
+
+### 1) 基础用法
+
+
+
+```html
+
+<template>
+  <div class="g-demo-skin-config-box">
+    <SkinConfig
+      ref="shinConfigRef"
+      @change="size = $event.size"
+    ></SkinConfig>
+
+    <div class="m-box">
+      <div class="u-color-box">
+        <h3>色卡</h3>
+        <ul>
+          <li
+            class="u-li"
+            v-for="item in list"
+            :class="item.className"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
+      <div class="u-el">
+        <h3>元素</h3>
+        <div>
+          <el-button :size="size">Default</el-button>
+          <el-button
+            type="primary"
+            :size="size"
+          >
+            Primary
+          </el-button>
+          <el-button
+            type="success"
+            :size="size"
+          >
+            Success
+          </el-button>
+          <el-button
+            type="info"
+            :size="size"
+          >
+            Info
+          </el-button>
+          <el-button
+            type="warning"
+            :size="size"
+          >
+            Warning
+          </el-button>
+          <el-button
+            type="danger"
+            :size="size"
+          >
+            Danger
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { SkinConfig } from 'packages/SkinConfig'
+
+const size = ref<string>('')
+const shinConfigRef = ref<InstanceType<typeof SkinConfig> | null>(null)
+onMounted(() => {
+  const config = shinConfigRef.value ? shinConfigRef.value.getSkin() : null
+  if (config) size.value = config.size
+})
+
+const list = ref<{ name: string, className: string }[]>([
+  {
+    name: '--el-color-primary',
+    className: 'el-color-primary'
+  },
+  {
+    name: '--el-color-primary-light-3',
+    className: 'el-color-primary-light-3'
+  },
+  {
+    name: '--el-color-primary-light-5',
+    className: 'el-color-primary-light-5'
+  },
+  {
+    name: '--el-color-primary-light-7',
+    className: 'el-color-primary-light-7'
+  },
+  {
+    name: '--el-color-primary-light-8',
+    className: 'el-color-primary-light-8'
+  },
+  {
+    name: '--el-color-primary-light-9',
+    className: 'el-color-primary-light-9'
+  },
+  {
+    name: '--el-color-primary-dark-2',
+    className: 'el-color-primary-dark-2'
+  },
+  {
+    name: '--el-color-success',
+    className: 'el-color-success'
+  },
+  {
+    name: '--el-color-success-light-3',
+    className: 'el-color-success-light-3'
+  },
+  {
+    name: '--el-color-success-light-5',
+    className: 'el-color-success-light-5'
+  },
+  {
+    name: '--el-color-success-light-7',
+    className: 'el-color-success-light-7'
+  },
+  {
+    name: '--el-color-success-light-8',
+    className: 'el-color-success-light-8'
+  },
+  {
+    name: '--el-color-success-light-9',
+    className: 'el-color-success-light-9'
+  },
+  {
+    name: '--el-color-success-dark-2',
+    className: 'el-color-success-dark-2'
+  },
+  {
+    name: '--el-color-warning',
+    className: 'el-color-warning'
+  },
+  {
+    name: '--el-color-warning-light-3',
+    className: 'el-color-warning-light-3'
+  },
+  {
+    name: '--el-color-warning-light-5',
+    className: 'el-color-warning-light-5'
+  },
+  {
+    name: '--el-color-warning-light-7',
+    className: 'el-color-warning-light-7'
+  },
+  {
+    name: '--el-color-warning-light-8',
+    className: 'el-color-warning-light-8'
+  },
+  {
+    name: '--el-color-warning-light-9',
+    className: 'el-color-warning-light-9'
+  },
+  {
+    name: '--el-color-warning-dark-2',
+    className: 'el-color-warning-dark-2'
+  },
+  {
+    name: '--el-color-danger',
+    className: 'el-color-danger'
+  },
+  {
+    name: '--el-color-danger-light-3',
+    className: 'el-color-danger-light-3'
+  },
+  {
+    name: '--el-color-danger-light-5',
+    className: 'el-color-danger-light-5'
+  },
+  {
+    name: '--el-color-danger-light-7',
+    className: 'el-color-danger-light-7'
+  },
+  {
+    name: '--el-color-danger-light-8',
+    className: 'el-color-danger-light-8'
+  },
+  {
+    name: '--el-color-danger-light-9',
+    className: 'el-color-danger-light-9'
+  },
+  {
+    name: '--el-color-danger-dark-2',
+    className: 'el-color-danger-dark-2'
+  },
+  {
+    name: '--el-color-error',
+    className: 'el-color-error'
+  },
+  {
+    name: '--el-color-error-light-3',
+    className: 'el-color-error-light-3'
+  },
+  {
+    name: '--el-color-error-light-5',
+    className: 'el-color-error-light-5'
+  },
+  {
+    name: '--el-color-error-light-7',
+    className: 'el-color-error-light-7'
+  },
+  {
+    name: '--el-color-error-light-8',
+    className: 'el-color-error-light-8'
+  },
+  {
+    name: '--el-color-error-light-9',
+    className: 'el-color-error-light-9'
+  },
+  {
+    name: '--el-color-error-dark-2',
+    className: 'el-color-error-dark-2'
+  },
+  {
+    name: '--el-color-info',
+    className: 'el-color-info'
+  },
+  {
+    name: '--el-color-info-light-3',
+    className: 'el-color-info-light-3'
+  },
+  {
+    name: '--el-color-info-light-5',
+    className: 'el-color-info-light-5'
+  },
+  {
+    name: '--el-color-info-light-7',
+    className: 'el-color-info-light-7'
+  },
+  {
+    name: '--el-color-info-light-8',
+    className: 'el-color-info-light-8'
+  },
+  {
+    name: '--el-color-info-light-9',
+    className: 'el-color-info-light-9'
+  },
+  {
+    name: '--el-color-info-dark-2',
+    className: 'el-color-info-dark-2'
+  },
+  {
+    name: '--el-box-shadow',
+    className: 'el-box-shadow'
+  },
+  {
+    name: '--el-box-shadow-light',
+    className: 'el-box-shadow-light'
+  },
+  {
+    name: '--el-box-shadow-lighter',
+    className: 'el-box-shadow-lighter'
+  },
+  {
+    name: '--el-box-shadow-dark',
+    className: 'el-box-shadow-dark'
+  },
+  {
+    name: '--el-bg-color-page',
+    className: 'el-bg-color-page'
+  },
+  {
+    name: '--el-bg-color',
+    className: 'el-bg-color'
+  },
+  {
+    name: '--el-bg-color-overlay',
+    className: 'el-bg-color-overlay'
+  },
+  {
+    name: '--el-text-color-primary',
+    className: 'el-text-color-primary'
+  },
+  {
+    name: '--el-text-color-regular',
+    className: 'el-text-color-regular'
+  },
+  {
+    name: '--el-text-color-secondary',
+    className: 'el-text-color-secondary'
+  },
+  {
+    name: '--el-text-color-placeholder',
+    className: 'el-text-color-placeholder'
+  },
+  {
+    name: '--el-text-color-disabled',
+    className: 'el-text-color-disabled'
+  },
+  {
+    name: '--el-border-color-darker',
+    className: 'el-border-color-darker'
+  },
+  {
+    name: '--el-border-color-dark',
+    className: 'el-border-color-dark'
+  },
+  {
+    name: '--el-border-color',
+    className: 'el-border-color'
+  },
+  {
+    name: '--el-border-color-light',
+    className: 'el-border-color-light'
+  },
+  {
+    name: '--el-border-color-lighter',
+    className: 'el-border-color-lighter'
+  },
+  {
+    name: '--el-border-color-extra-light',
+    className: 'el-border-color-extra-light'
+  },
+  {
+    name: '--el-fill-color-darker',
+    className: 'el-fill-color-darker'
+  },
+  {
+    name: '--el-fill-color-dark',
+    className: 'el-fill-color-dark'
+  },
+  {
+    name: '--el-fill-color',
+    className: 'el-fill-color'
+  },
+  {
+    name: '--el-fill-color-light',
+    className: 'el-fill-color-light'
+  },
+  {
+    name: '--el-fill-color-lighter',
+    className: 'el-fill-color-lighter'
+  },
+  {
+    name: '--el-fill-color-extra-light',
+    className: 'el-fill-color-extra-light'
+  },
+  {
+    name: '--el-fill-color-blank',
+    className: 'el-fill-color-blank'
+  },
+  {
+    name: '--el-mask-color',
+    className: 'el-mask-color'
+  },
+  {
+    name: '--el-mask-color-extra-light',
+    className: 'el-mask-color-extra-light'
+  }
+])
+</script>
+
+<style lang="scss">
+:root[data-dark="true"] {
+  color-scheme: dark;
+  --el-color-primary: #409eff;
+  --el-color-primary-light-3: #3375b9;
+  --el-color-primary-light-5: #2a598a;
+  --el-color-primary-light-7: #213d5b;
+  --el-color-primary-light-8: #1d3043;
+  --el-color-primary-light-9: #18222c;
+  --el-color-primary-dark-2: #66b1ff;
+  --el-color-success: #67c23a;
+  --el-color-success-light-3: #4e8e2f;
+  --el-color-success-light-5: #3e6b27;
+  --el-color-success-light-7: #2d481f;
+  --el-color-success-light-8: #25371c;
+  --el-color-success-light-9: #1c2518;
+  --el-color-success-dark-2: #85ce61;
+  --el-color-warning: #e6a23c;
+  --el-color-warning-light-3: #a77730;
+  --el-color-warning-light-5: #7d5b28;
+  --el-color-warning-light-7: #533f20;
+  --el-color-warning-light-8: #3e301c;
+  --el-color-warning-light-9: #292218;
+  --el-color-warning-dark-2: #ebb563;
+  --el-color-danger: #f56c6c;
+  --el-color-danger-light-3: #b25252;
+  --el-color-danger-light-5: #854040;
+  --el-color-danger-light-7: #582e2e;
+  --el-color-danger-light-8: #412626;
+  --el-color-danger-light-9: #2b1d1d;
+  --el-color-danger-dark-2: #f78989;
+  --el-color-error: #f56c6c;
+  --el-color-error-light-3: #b25252;
+  --el-color-error-light-5: #854040;
+  --el-color-error-light-7: #582e2e;
+  --el-color-error-light-8: #412626;
+  --el-color-error-light-9: #2b1d1d;
+  --el-color-error-dark-2: #f78989;
+  --el-color-info: #909399;
+  --el-color-info-light-3: #6b6d71;
+  --el-color-info-light-5: #525457;
+  --el-color-info-light-7: #393a3c;
+  --el-color-info-light-8: #2d2d2f;
+  --el-color-info-light-9: #202121;
+  --el-color-info-dark-2: #a6a9ad;
+
+  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .36), 0px 8px 20px rgba(0, 0, 0, .72);
+  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .72);
+  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .72);
+  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
+  --el-bg-color-page: #0a0a0a;
+  --el-bg-color: #141414;
+  --el-bg-color-overlay: #1d1e1f;
+  --el-text-color-primary: #E5EAF3;
+  --el-text-color-regular: #CFD3DC;
+  --el-text-color-secondary: #A3A6AD;
+  --el-text-color-placeholder: #8D9095;
+  --el-text-color-disabled: #6C6E72;
+  --el-border-color-darker: #636466;
+  --el-border-color-dark: #58585B;
+  --el-border-color: #4C4D4F;
+  --el-border-color-light: #414243;
+  --el-border-color-lighter: #363637;
+  --el-border-color-extra-light: #2B2B2C;
+  --el-fill-color-darker: #424243;
+  --el-fill-color-dark: #39393A;
+  --el-fill-color: #303030;
+  --el-fill-color-light: #262727;
+  --el-fill-color-lighter: #1D1D1D;
+  --el-fill-color-extra-light: #191919;
+  --el-fill-color-blank: transparent;
+  --el-mask-color: rgba(0, 0, 0, .8);
+  --el-mask-color-extra-light: rgba(0, 0, 0, .3);
+}
+</style>
+
+<style scoped lang="scss">
+.g-demo-skin-config-box {
+  max-width: 1000px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--m-scrollbar-thumb-hover-color);
+}
+
+.el-color-primary {
+  background-color: var(--el-color-primary);
+}
+.el-color-primary-light-3 {
+  background-color: var(--el-color-primary-light-3);
+}
+.el-color-primary-light-5 {
+  background-color: var(--el-color-primary-light-5);
+}
+.el-color-primary-light-7 {
+  background-color: var(--el-color-primary-light-7);
+}
+.el-color-primary-light-8 {
+  background-color: var(--el-color-primary-light-8);
+}
+.el-color-primary-light-9 {
+  background-color: var(--el-color-primary-light-9);
+}
+.el-color-primary-dark-2 {
+  background-color: var(--el-color-primary-dark-2);
+}
+.el-color-success {
+  background-color: var(--el-color-success);
+}
+.el-color-success-light-3 {
+  background-color: var(--el-color-success-light-3);
+}
+.el-color-success-light-5 {
+  background-color: var(--el-color-success-light-5);
+}
+.el-color-success-light-7 {
+  background-color: var(--el-color-success-light-7);
+}
+.el-color-success-light-8 {
+  background-color: var(--el-color-success-light-8);
+}
+.el-color-success-light-9 {
+  background-color: var(--el-color-success-light-9);
+}
+.el-color-success-dark-2 {
+  background-color: var(--el-color-success-dark-2);
+}
+.el-color-warning {
+  background-color: var(--el-color-warning);
+}
+.el-color-warning-light-3 {
+  background-color: var(--el-color-warning-light-3);
+}
+.el-color-warning-light-5 {
+  background-color: var(--el-color-warning-light-5);
+}
+.el-color-warning-light-7 {
+  background-color: var(--el-color-warning-light-7);
+}
+.el-color-warning-light-8 {
+  background-color: var(--el-color-warning-light-8);
+}
+.el-color-warning-light-9 {
+  background-color: var(--el-color-warning-light-9);
+}
+.el-color-warning-dark-2 {
+  background-color: var(--el-color-warning-dark-2);
+}
+.el-color-danger {
+  background-color: var(--el-color-danger);
+}
+.el-color-danger-light-3 {
+  background-color: var(--el-color-danger-light-3);
+}
+.el-color-danger-light-5 {
+  background-color: var(--el-color-danger-light-5);
+}
+.el-color-danger-light-7 {
+  background-color: var(--el-color-danger-light-7);
+}
+.el-color-danger-light-8 {
+  background-color: var(--el-color-danger-light-8);
+}
+.el-color-danger-light-9 {
+  background-color: var(--el-color-danger-light-9);
+}
+.el-color-danger-dark-2 {
+  background-color: var(--el-color-danger-dark-2);
+}
+.el-color-error {
+  background-color: var(--el-color-error);
+}
+.el-color-error-light-3 {
+  background-color: var(--el-color-error-light-3);
+}
+.el-color-error-light-5 {
+  background-color: var(--el-color-error-light-5);
+}
+.el-color-error-light-7 {
+  background-color: var(--el-color-error-light-7);
+}
+.el-color-error-light-8 {
+  background-color: var(--el-color-error-light-8);
+}
+.el-color-error-light-9 {
+  background-color: var(--el-color-error-light-9);
+}
+.el-color-error-dark-2 {
+  background-color: var(--el-color-error-dark-2);
+}
+.el-color-info {
+  background-color: var(--el-color-info);
+}
+.el-color-info-light-3 {
+  background-color: var(--el-color-info-light-3);
+}
+.el-color-info-light-5 {
+  background-color: var(--el-color-info-light-5);
+}
+.el-color-info-light-7 {
+  background-color: var(--el-color-info-light-7);
+}
+.el-color-info-light-8 {
+  background-color: var(--el-color-info-light-8);
+}
+.el-color-info-light-9 {
+  background-color: var(--el-color-info-light-9);
+}
+.el-color-info-dark-2 {
+  background-color: var(--el-color-info-dark-2);
+}
+.el-box-shadow {
+  background-color: var(--el-box-shadow);
+}
+.el-box-shadow-light {
+  background-color: var(--el-box-shadow-light);
+}
+.el-box-shadow-lighter {
+  background-color: var(--el-box-shadow-lighter);
+}
+.el-box-shadow-dark {
+  background-color: var(--el-box-shadow-dark);
+}
+.el-bg-color-page {
+  background-color: var(--el-bg-color-page);
+}
+.el-bg-color {
+  background-color: var(--el-bg-color);
+}
+.el-bg-color-overlay {
+  background-color: var(--el-bg-color-overlay);
+}
+.el-text-color-primary {
+  background-color: var(--el-text-color-primary);
+}
+.el-text-color-regular {
+  background-color: var(--el-text-color-regular);
+}
+.el-text-color-secondary {
+  background-color: var(--el-text-color-secondary);
+}
+.el-text-color-placeholder {
+  background-color: var(--el-text-color-placeholder);
+}
+.el-text-color-disabled {
+  background-color: var(--el-text-color-disabled);
+}
+.el-border-color-darker {
+  background-color: var(--el-border-color-darker);
+}
+.el-border-color-dark {
+  background-color: var(--el-border-color-dark);
+}
+.el-border-color {
+  background-color: var(--el-border-color);
+}
+.el-border-color-light {
+  background-color: var(--el-border-color-light);
+}
+.el-border-color-lighter {
+  background-color: var(--el-border-color-lighter);
+}
+.el-border-color-extra-light {
+  background-color: var(--el-border-color-extra-light);
+}
+.el-fill-color-darker {
+  background-color: var(--el-fill-color-darker);
+}
+.el-fill-color-dark {
+  background-color: var(--el-fill-color-dark);
+}
+.el-fill-color {
+  background-color: var(--el-fill-color);
+}
+.el-fill-color-light {
+  background-color: var(--el-fill-color-light);
+}
+.el-fill-color-lighter {
+  background-color: var(--el-fill-color-lighter);
+}
+.el-fill-color-extra-light {
+  background-color: var(--el-fill-color-extra-light);
+}
+.el-fill-color-blank {
+  background-color: var(--el-fill-color-blank);
+}
+.el-mask-color {
+  background-color: var(--el-mask-color);
+}
+.el-mask-color-extra-light {
+  background-color: var(--el-mask-color-extra-light);
+}
+</style>
+
+<style lang="scss">
+/*浏览器滚动条*/
+// 滚动条凹槽的颜色，还可以设置边框属性
+::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+
+// 滚动条的宽度
+::-webkit-scrollbar {
+  width: var(--m-scrollbar-thumb-width);
+  height: 9px;
+}
+
+// 滚动条的设置
+::-webkit-scrollbar-thumb {
+  background-color: var(--m-scrollbar-thumb-color);
+  background-clip: padding-box;
+  border-radius: 5px;
+  min-height: 28px;
+}
+</style>
+
+<style scoped lang="scss">
+.u-li {
+  width: 300px;
+}
+
+.m-box {
+  display: flex;
+}
+
+.u-el {
+  margin-left: 20px;
+}
+</style>
+
+
+```
+
+### 2) Exposes
+
+| 方法名     |    说明    |        参数        |       返回值        |
+|---------|:--------:|:----------------:|:----------------:|
+| setSkin |  设置主题配置  | SkinConfig（皮肤对象） |       void       |
+| getSkin | 获取当前主题配置 |        -         | SkinConfig（皮肤对象） |
+
+#### SkinConfig（皮肤对象）
+
+| 参数           |   说明    |   类型    |            可选值            |    默认值    |
+|--------------|:-------:|:-------:|:-------------------------:|:---------:|
+| darkTheme    | 是否为深色主题 | boolean |             -             |   false   |
+| followSystem | 是否跟随系统  | boolean |             -             |   false   |
+| size         |   大小    |  enum   | large \| default \| small |  default  |
+| primaryColor |   主题色   | string  |             -             | '#646CFF' |
+| successColor |   成功色   | string  |             -             | '#67c23a' |
+| warningColor |   警告色   | string  |             -             | '#e6a23c' |
+| dangerColor  |   危险色   | string  |             -             | '#f56c6c' |
+| infoColor    |   信息色   | string  |             -             | '#909399' |
+
+### 3) 说明
+
+组件通过修改全局的css变量来实现的效果，故暗夜模式需手动在全局加css，具体见示例。组件一被引用，就会自动读取本地配置生效，无本地配置时，以默认值计算。
+
+### 4) Events
+
+| 方法名    |    说明     |     参数     |
+|--------|:---------:|:----------:|
+| change | 绑定值被改变时触发 | SkinConfig |
+
+
+
+
+标签页组件
+=================
+
+
+
+# 霸软组件Tool说明
+
+## Tool列表
+
+
+
+### 1) moneyFormat
+
+| 参数        | 描述           | 类型          | 默认值 |
+| ----------- | -------------- | ------------- | ------ |
+| val         | 要转换的数字   | number,string | 0      |
+| isThousands | 是否需要千分位 | boolean       | true   |
+| roundDTo    | 四舍五入位数   | number        | 2      |
+| config      | 配置项         | ConfigType    | {}     |
+
+### 2) ConfigType
+| 参数        | 描述         | 类型   | 默认值 |
+| ----------- | ------------ | ------ | ------ |
+| moneySymbol | 补的金钱符号 | string | -      |
+| repairZero  | 末尾补几位零 | number | -      |
+
+