br-dionysus 0.4.1 → 0.5.0

package/README.md

@@ -1,83 +1,34 @@
-# 霸软业务组件库
+# 霸软业务组件库
+
+## 组件列表
+
++ MInline([筛选](#MInlinetitle))
+
++ MInputNumber([数值输入框组件](#MInputNumbertitle))
+
++ MSelectTable([下拉表格选择器](#MSelectTabletitle))
+
++ MTable([表格选择器](#MTabletitle))
+
++ SkinConfig([皮肤设置](#SkinConfigtitle))
+
++ TabPage([标签页组件](#TabPagetitle))
+--- 
+
+ ### MInline(筛选)
+---
+
 
----
 
-## 组件列表
-
-+ TaBPage([标签页组件](#tabpage标签页组件))
-+ MInputNumber([数值输入框组件](#minputnumber数值输入框组件))
-+ MInline([筛选组件](#minline筛选组件))
-+ SkinConfig([皮肤配置](#skinconfig皮肤设置))
-+ MSelectTable([下拉表格选择器](#mselecttable下拉表格选择器))
-
----
-
-### TaBPage(标签页组件)
+# 筛选
+=================
 
----
+### 1) 基础用法
 
-### MInputNumber(数值输入框组件)
 
-#### 1) 基础用法
 
-```
-<template>
-    <m-input-number v-model="value" size="mini"></m-input-number>
-</template>
-<script>
-import MInputNumber from '@/components/MInputNumber/index.vue'
-
-export default {
-  components: {
-    MInputNumber
-  },
-  data () {
-    return {
-      value: 0
-    }
-  }
-}
-</script>
-```
-
-#### 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)     |
-
----
-
-### MInline(筛选组件)
-
-<script setup>
-import demo from './demo.vue'
-</script>
-
-筛选
-=================
-
-#### 1) 基础用法
-
-```
+```js
+
 <template>
   <div class="g-demo-m-inline-box">
     <m-inline>
@@ -216,71 +167,101 @@ const formInline = reactive({
   max-width: 1000px;
 }
 </style>
-```
-
-#### 2) Attributes
+
+
+```
+
+### 2) Attributes
 
-| 参数       |  说明   |   类型   | 可选值 | 默认值 |
-|----------|:-----:|:------:|:---:|:---:|
+| 参数       |  说明   |   类型   | 可选值 |   默认值   |
+|----------|:-----:|:------:|:---:|:-------:|
 | minWidth | 列最小宽度 | number |  -  | 200 |
 | maxWidth | 列最大宽度 | number |  -  | 300 |
 
-#### 3) Events
+### 2) Events
 
 | 方法名    |           说明           |       参数        |
 |--------|:----------------------:|:---------------:|
 | switch | 当切换展开与折叠模式时触发,返回当前展开状态 | unfold(boolean) |
+
+
+--- 
+
+ ### MInputNumber(数值输入框组件)
+---
+
 
----
 
-### SkinConfig(皮肤设置)
+# 数值输入框组件
+=================
 
-#### 1) 基础用法
+### 1) 基础用法
 
-```
-<template>
-  <div class="g-demo-skin-config-box">
-    <skin-config></skin-config>
 
-    <div class="m-box">
-      <h3>色卡</h3>
-      <ul>
-        <li
-          class="u-li"
-          v-for="item in list"
-          :class="item.className"
-        >{{ item.name }}</li>
-      </ul>
-    </div>
+```js
+
+<template>
+  <div class="g-demo-m-input-number-box">
+    <m-input-number v-model="test"></m-input-number>
   </div>
 </template>
-```
 
-### 2) Exposes
+<script setup lang="ts">
+import { ref } from 'vue'
 
-| 方法名     |   说明   |        参数        |
-|---------|:------:|:----------------:|
-| setSkin | 设置主题配置 | SkinConfig（皮肤对象） |
+const test = ref<number>(0)
+</script>
 
-#### SkinConfig（皮肤对象）
+<style scoped>
+.g-demo-m-input-number-box {
+  max-width: 1000px;
+}
+</style>
+
+
+```
+
+### 2) Attributes
 
-| 参数           |   说明    |   类型    | 可选值 |    默认值    |
-|--------------|:-------:|:-------:|:---:|:---------:|
-| darkTheme    | 是否为深色主题 | boolean |  -  |   false   |
-| followSystem | 是否跟随系统  | boolean |  -  |   false   |
-| primaryColor |   主题色   | string  |  -  | '#646CFF' |
+| 参数               |        说明         |   类型    |        可选值         |    默认值    |
+|------------------|:-----------------:|:-------:|:------------------:|:---------:|
+| 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) 说明
+### 3) Events
 
-组件通过修改全局的css变量来实现的效果，故暗夜模式需手动在全局加css，具体见示例。组件一被引用，就会自动读取本地配置生效，无本地配置时，以默认值计算。
+| 方法名    |       说明        |           参数           |
+|--------|:---------------:|:----------------------:|
+| change |    绑定值被改变时触发    | currentValue, oldValue |
+| focus  | 当 input 获得焦点时触发 |     (event: Event)     |
+| blur   | 当 input 失去焦点时触发 |     (event: Event)     |
+
+
+--- 
+
+ ### MSelectTable(下拉表格选择器)
+---
+
 
----
 
-### MSelectTable(下拉表格选择器)
+# 下拉表格选择器
+=================
 
-#### 1) 基础用法
+### 1) 基础用法
 
-```
+
+
+```js
+
 <template>
   <div class="g-m-select-table-box">
     <m-select-table
@@ -346,9 +327,14 @@ const remoteMethod = async (query: string = '') => {
   }))
 }
 </script>
-```
 
-#### 2) Attributes
+<style lang="scss">
+</style>
+
+
+```
+
+### 2)  Attributes
 
 | 参数              |            说明            |    类型    |         可选值          |  默认值  |
 |-----------------|:------------------------:|:--------:|:--------------------:|:-----:|
@@ -374,10 +360,828 @@ const remoteMethod = async (query: string = '') => {
 | disabled            |        是否禁用该选项        |      boolean      |  -  |  否   |
 | \[propName: string] |         额外字段          | string  \| number |  -  |  否   |
 
-#### 3) Events
+### 3) Events
 
 | 方法名            |     说明      |          参数           |
 |----------------|:-----------:|:---------------------:|
 | selectMultiple | 多选确认按钮点击时触发 | selectedRow(所选行构成的数组) |
 | change         |  绑定值被改变时触发  |         value         |
-| selected       | 单选模式点击行时触发  |   selectedRow（所选行）    |
+| selected       | 单选模式点击行时触发  |   selectedRow（所选行）    |
+
+
+--- 
+
+ ### MTable(表格选择器)
+---
+
+
+
+# 表格选择器
+=================
+
+### 1) 基础用法
+
+
+
+
+```js
+
+<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    |   -                    |   {}    |
+## 要求
+```
+sole 必须传递在表格数据内为唯一的值  如id key 等不会发生重复的关键字
+```
+
+### 3) Events
+| 方法名          |     说明      |          参数           |
+| ----------- | ------- | ---------------------------- |
+| pasteData      | 表格粘贴方法   |  {editRow,editColumn,arr,rowIndex},tableData|
+
+##### 方法参数描述
+```ts
+const editRow : Object // 返回粘贴的对应行的原始数据
+
+const editColumn: String // 返回粘贴时鼠标所在列的 表格prop值
+
+const arr: Array  // 返回粘贴时候处理之后的 数组信息
+
+const rowIndex: number // 根据sole的值 去data内查找   当前操作的 粘贴行在data内的序号
+
+```
+
+
+--- 
+
+ ### SkinConfig(皮肤设置)
+---
+
+
+
+# 皮肤设置
+=================
+
+### 1) 基础用法
+
+
+
+```js
+
+<template>
+  <div class="g-demo-skin-config-box">
+    <skin-config
+      ref="shinConfigRef"
+      @change="size = $event.size"
+    ></skin-config>
+
+    <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;
+}
+
+.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 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' |
+
+### 3) 说明
+
+组件通过修改全局的css变量来实现的效果，故暗夜模式需手动在全局加css，具体见示例。组件一被引用，就会自动读取本地配置生效，无本地配置时，以默认值计算。
+
+### 4) Events
+
+| 方法名    |    说明     |     参数     |
+|--------|:---------:|:----------:|
+| change | 绑定值被改变时触发 | SkinConfig |
+
+
+--- 
+
+ ### TabPage(标签页组件)
+---
+
+
+
+# 标签页组件
+
+
+