diff --git a/.eslintrc.js b/.eslintrc.js
index 277d700..e003b13 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -25,8 +25,8 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:vue/vue3-recommended',
     'prettier',
-    './.eslintrc-auto-import.json',
-    './tests/.eslintrc-unit-test.json'
+    './.eslintrc-auto-import.json'
+    // './tests/.eslintrc-unit-test.json'
   ],
   parserOptions: {
     parser: '@typescript-eslint/parser',
diff --git a/babel.config.js b/babel.config.js
deleted file mode 100644
index 3cf1f98..0000000
--- a/babel.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  //change esm to require
-  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript']
-}
diff --git a/components.d.ts b/components.d.ts
index bf281df..fbb8ecc 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,7 +8,6 @@ declare module '@vue/runtime-core' {
     ElSvgIcon: typeof import('./src/components/ElSvgIcon.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    TestUnit: typeof import('./src/components/TestUnit.vue')['default']
   }
 }
 
diff --git a/jest.config.js b/jest.config.js
deleted file mode 100644
index 1c607b1..0000000
--- a/jest.config.js
+++ /dev/null
@@ -1,38 +0,0 @@
-//Thanks for https://juejin.cn/post/7039146473878978596
-module.exports = {
-  moduleFileExtensions: [
-    'ts',
-    'js',
-    'jsx',
-    'tsx',
-    'json',
-    // tell Jest to handle *.vue files
-    'vue'
-  ],
-  transform: {
-    // process *.vue files with vue-jest
-    '^.+\\.vue$': require.resolve('vue-jest'),
-    '^.+\\.tsx?$': require.resolve('ts-jest'),
-    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': require.resolve('jest-transform-stub'),
-    '^.+\\.jsx?$': require.resolve('babel-jest')
-  },
-  transformIgnorePatterns: ['/node_modules/'],
-  // support the same @ -> src alias mapping in source code
-  moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1'
-  },
-  // testEnvironment: 'jest-environment-jsdom-fifteen',
-  // serializer for snapshots
-  snapshotSerializers: ['jest-serializer-vue'],
-  testMatch: ['**/tests/**/**/*.spec.[jt]s?(x)', '**/__tests__/*.[jt]s?(x)'],
-  collectCoverageFrom: [
-    'src/utils/**/*.{js,vue}',
-    '!src/utils/auth.js',
-    '!src/utils/axiosReq.js',
-    'src/components/**/*.{js,vue}'
-  ],
-  coverageDirectory: '<rootDir>/tests/coverage',
-  // collectCoverage: true,
-  // https://github.com/facebook/jest/issues/6766
-  testURL: 'http://localhost/'
-}
diff --git a/package.json b/package.json
index 6571256..e77ef6f 100644
--- a/package.json
+++ b/package.json
@@ -13,16 +13,14 @@
     "lint": "eslint --ext .js,.jsx,.vue,.ts,.tsx src --fix",
     "prepare": "husky install",
     "tsc-check": "tsc",
-    "test:unit": "vue-cli-service test:unit",
-    "test:watchAll": "vue-cli-service test:unit --watchAll",
-    "test:cov": "vue-cli-service test:unit --coverage",
-    "test:majestic": "majestic"
+    "vitest": "vitest --ui",
+    "coverage": "vitest run --coverage"
   },
   "peerDependencies": {
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.0.4",
+    "@element-plus/icons-vue": "^2.0.9",
     "js-error-collection": "^1.0.7",
     "axios": "0.21.3",
     "echarts": "5.3.2",
@@ -59,20 +57,7 @@
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-style-import": "1.2.1",
     "vite-plugin-svg-icons": "1.0.5",
-    "jest": "<27",
-    "ts-jest": "<27",
-    "tslib": "^2.4.0",
-    "vue-jest": "^5.0.0-alpha.10",
-    "@babel/preset-env": "^7.17.10",
-    "@types/jest": "<27",
-    "@vue/test-utils": "^2.0.0-rc.18",
-    "babel-jest": "<27",
-    "jest-serializer-vue": "^2.0.2",
-    "jest-transform-stub": "^2.0.0",
-    "@babel/preset-typescript": "7.16.7",
-    "ts-node": "^10.7.0",
     "majestic": "^1.8.1",
-    "@vue/cli-plugin-unit-jest": "4.5.17",
     "@vue/cli-service": "4.5.17",
     "@types/node": "^17.0.35",
     "@vitejs/plugin-vue": "^2.3.3",
@@ -85,29 +70,35 @@
     "vue-tsc": "^0.34.16",
     "vite-plugin-mkcert": "^1.7.2",
     "unplugin-vue-define-options": "^0.6.1",
-    "unocss": "^0.33.5"
+    "unocss": "^0.33.5",
+    "@vitest/coverage-c8": "^0.22.1",
+    "@vitest/ui": "^0.22.1",
+    "vitest": "^0.22.1",
+    "@vue/test-utils": "^2.0.2",
+    "resize-observer-polyfill": "^1.5.1",
+    "jsdom": "16.4.0"
   },
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [
-          "html-webpack-plugin",
-          "vite-plugin-mock",
-          "unplugin-auto-import",
-          "unplugin-vue-components",
-          "vue-template-compiler",
-          "unocss",
-          "unplugin",
-          "vite-plugin-mock",
-          "@vitejs/plugin-legacy",
-          "@vitejs/plugin-vue",
-          "@vitejs/*",
-          "@babel/*",
-          "vite",
-          "vue",
-          "@unocss/vite",
-          "rollup",
-          "vue-jest",
-          "@babel/*"
+        "html-webpack-plugin",
+        "vite-plugin-mock",
+        "unplugin-auto-import",
+        "unplugin-vue-components",
+        "vue-template-compiler",
+        "unocss",
+        "unplugin",
+        "vite-plugin-mock",
+        "@vitejs/plugin-legacy",
+        "@vitejs/plugin-vue",
+        "@vitejs/*",
+        "@babel/*",
+        "vite",
+        "vue",
+        "@unocss/vite",
+        "rollup",
+        "vue-jest",
+        "@babel/*"
       ]
     }
   },
diff --git a/src/components/TestUnit.vue b/src/components/TestUnit.vue
deleted file mode 100644
index fc0f0a1..0000000
--- a/src/components/TestUnit.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div>TestUnit.vue</div>
-</template>
-
-<script setup>
-import { onMounted, getCurrentInstance, watch, ref, toRefs, reactive, computed } from 'vue'
-//获取store和router
-// import {useRouter} from 'vue-router'
-// import {useStore} from 'vuex'
-let { proxy } = getCurrentInstance()
-const props = defineProps({
-  msg: {
-    require: true,
-    default: 'fai',
-    type: String
-  }
-})
-// const state = reactive({
-//   levelList: null
-// });
-
-//const routes = computed(() => {
-//    return proxy.$store.state.permission.routes;
-//  });
-// watch(() => props.name, (oldValue,newValue) => {
-//
-//   },
-//   { immediate: true }
-// );
-
-// const store = useStore()
-// const router = useRouter()
-// onMounted(()=>{
-//   console.log("页面挂载了")
-// })
-// let helloFunc = () => {
-//   console.log("helloFunc");
-// };
-//导出给refs使用
-// defineExpose({ helloFunc });
-//导出属性到页面中使用
-// let {levelList} = toRefs(state);
-</script>
-
-<style scoped lang="scss"></style>
diff --git a/src/components/__tests__/el-svgIcon.test.tsx b/src/components/__tests__/el-svgIcon.test.tsx
new file mode 100644
index 0000000..1543ac2
--- /dev/null
+++ b/src/components/__tests__/el-svgIcon.test.tsx
@@ -0,0 +1,237 @@
+import { markRaw, nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, test } from 'vitest'
+import { Loading, Search } from '@element-plus/icons-vue'
+
+import ElSvgIcon from '../ElSvgIcon.vue'
+
+// const AXIOM = 'Rem is the best girl'
+
+describe('ElSvgIcon.vue', () => {
+  it('create', () => {
+    const wrapper = mount(() => <ElSvgIcon name="Edit" size={30} color={'red'} />)
+
+    // console.log(111111, wrapper.classes())
+    // expect(wrapper.classes()).toContain('el-icon')
+  })
+
+  // it('icon', () => {
+  //   const wrapper = mount(() => <ElSvgIcon icon={markRaw(Search)} />)
+  //   expect(wrapper.findAll('Search11222')).toBeTruthy()
+  // })
+  //
+  // it('size', () => {
+  //   const wrapper = mount(() => <ElSvgIcon size="20px" />)
+  //   expect(wrapper.findAll('20px')).toBeTruthy()
+  // })
+  //
+  // it('color', () => {
+  //   const wrapper = mount(() => <ElSvgIcon color={'red'} />)
+  //   expect(wrapper.findAll('red')).toBeTruthy()
+  // })
+  //
+  // it('nativeType', () => {
+  //   const wrapper = mount(() => <ElSvgIcon nativeType="submit" />)
+  //
+  //   expect(wrapper.attributes('type')).toBe('submit')
+  // })
+  //
+  // it('loading', () => {
+  //   const wrapper = mount(() => <ElSvgIcon loading />)
+  //
+  //   expect(wrapper.classes()).toContain('is-loading')
+  //   expect(wrapper.findComponent(Loading).exists()).toBeTruthy()
+  // })
+  //
+  // it('size', () => {
+  //   const wrapper = mount(() => <ElSvgIcon size="large" />)
+  //
+  //   expect(wrapper.classes()).toContain('el-button--large')
+  // })
+  //
+  // it('plain', () => {
+  //   const wrapper = mount(() => <ElSvgIcon plain />)
+  //
+  //   expect(wrapper.classes()).toContain('is-plain')
+  // })
+  //
+  // it('round', () => {
+  //   const wrapper = mount(() => <ElSvgIcon round />)
+  //   expect(wrapper.classes()).toContain('is-round')
+  // })
+  //
+  // it('circle', () => {
+  //   const wrapper = mount(() => <ElSvgIcon circle />)
+  //
+  //   expect(wrapper.classes()).toContain('is-circle')
+  // })
+
+  // it('text', async () => {
+  //   const bg = ref(false)
+  //
+  //   const wrapper = mount(() => <ElSvgIcon text bg={bg.value} />)
+  //
+  //   expect(wrapper.classes()).toContain('is-text')
+  //
+  //   bg.value = true
+  //
+  //   await nextTick()
+  //
+  //   expect(wrapper.classes()).toContain('is-has-bg')
+  // })
+
+  // it('link', async () => {
+  //   const wrapper = mount(() => <ElSvgIcon link />)
+  //
+  //   expect(wrapper.classes()).toContain('is-link')
+  // })
+
+  // test('render text', () => {
+  //   const wrapper = mount(() => (
+  //     <ElSvgIcon
+  //       v-slots={{
+  //         default: () => AXIOM
+  //       }}
+  //     />
+  //   ))
+  //
+  //   expect(wrapper.text()).toEqual(AXIOM)
+  // })
+  //
+  // test('handle click', async () => {
+  //   const wrapper = mount(() => (
+  //     <ElSvgIcon
+  //       v-slots={{
+  //         default: () => AXIOM
+  //       }}
+  //     />
+  //   ))
+  //
+  //   await wrapper.trigger('click')
+  //   expect(wrapper.emitted()).toBeDefined()
+  // })
+  //
+  // test('handle click inside', async () => {
+  //   const wrapper = mount(() => (
+  //     <ElSvgIcon
+  //       v-slots={{
+  //         default: () => <span class="inner-slot"></span>
+  //       }}
+  //     />
+  //   ))
+  //
+  //   wrapper.find('.inner-slot').trigger('click')
+  //   expect(wrapper.emitted()).toBeDefined()
+  // })
+  //
+  // test('loading implies disabled', async () => {
+  //   const wrapper = mount(() => (
+  //     <ElSvgIcon
+  //       v-slots={{
+  //         default: () => AXIOM
+  //       }}
+  //       loading
+  //     />
+  //   ))
+  //
+  //   await wrapper.trigger('click')
+  //   expect(wrapper.emitted('click')).toBeUndefined()
+  // })
+  //
+  // it('disabled', async () => {
+  //   const wrapper = mount(() => <ElSvgIcon disabled />)
+  //
+  //   expect(wrapper.classes()).toContain('is-disabled')
+  //   await wrapper.trigger('click')
+  //   expect(wrapper.emitted('click')).toBeUndefined()
+  // })
+  //
+  // it('loading icon', () => {
+  //   const wrapper = mount(() => <ElSvgIcon loadingIcon={markRaw(Search)} loading />)
+  //
+  //   expect(wrapper.findComponent(Search).exists()).toBeTruthy()
+  // })
+  //
+  // it('loading slot', () => {
+  //   const wrapper = mount({
+  //     setup: () => () => (
+  //       <ElSvgIcon v-slots={{ loading: () => <span class="custom-loading">111</span> }} loading={true}>
+  //         Loading
+  //       </ElSvgIcon>
+  //     )
+  //   })
+  //
+  //   expect(wrapper.find('.custom-loading').exists()).toBeTruthy()
+  // })
+})
+// describe('ElSvgIcon Group', () => {
+//   it('create', () => {
+//     const wrapper = mount({
+//       setup: () => () =>
+//         (
+//           <ButtonGroup>
+//             <ElSvgIcon type="primary">Prev</ElSvgIcon>
+//             <ElSvgIcon type="primary">Next</ElSvgIcon>
+//           </ButtonGroup>
+//         )
+//     })
+//     expect(wrapper.classes()).toContain('el-button-group')
+//     expect(wrapper.findAll('button').length).toBe(2)
+//   })
+//
+//   it('button group reactive size', async () => {
+//     const size = ref<ComponentSize>('small')
+//     const wrapper = mount({
+//       setup: () => () =>
+//         (
+//           <ButtonGroup size={size.value}>
+//             <ElSvgIcon type="primary">Prev</ElSvgIcon>
+//             <ElSvgIcon type="primary">Next</ElSvgIcon>
+//           </ButtonGroup>
+//         )
+//     })
+//     expect(wrapper.classes()).toContain('el-button-group')
+//     expect(wrapper.findAll('.el-button-group button.el-button--small').length).toBe(2)
+//
+//     size.value = 'large'
+//     await nextTick()
+//
+//     expect(wrapper.findAll('.el-button-group button.el-button--large').length).toBe(2)
+//   })
+//
+//   it('button group type', async () => {
+//     const wrapper = mount({
+//       setup: () => () =>
+//         (
+//           <ButtonGroup type="warning">
+//             <ElSvgIcon type="primary">Prev</ElSvgIcon>
+//             <ElSvgIcon>Next</ElSvgIcon>
+//           </ButtonGroup>
+//         )
+//     })
+//     expect(wrapper.classes()).toContain('el-button-group')
+//     expect(wrapper.findAll('.el-button-group button.el-button--primary').length).toBe(1)
+//     expect(wrapper.findAll('.el-button-group button.el-button--warning').length).toBe(1)
+//   })
+//
+//   it('add space in two Chinese characters', async () => {
+//     const wrapper = mount(() => (
+//       <ElSvgIcon
+//         v-slots={{
+//           default: () => '中文'
+//         }}
+//         autoInsertSpace
+//       />
+//     ))
+//
+//     expect(wrapper.find('.el-button span').text()).toBe('中文')
+//     expect(wrapper.find('.el-button span').classes()).toContain('el-button__text--expand')
+//   })
+//
+//   it('add space between two Chinese characters even if there is whitespace at both ends', async () => {
+//     const wrapper = mount(() => <ElSvgIcon autoInsertSpace>&nbsp;中文&nbsp;</ElSvgIcon>)
+//
+//     expect(wrapper.find('.el-button span').text()).toBe('中文')
+//     expect(wrapper.find('.el-button span').classes()).toContain('el-button__text--expand')
+//   })
+// })
diff --git a/src/theme/lighting/css-vars.scss b/src/theme/lighting/css-vars.scss
deleted file mode 100644
index 425aa19..0000000
--- a/src/theme/lighting/css-vars.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@use 'sass:map';
-
-// CSS3 var
-@use './var' as *;
-@use 'element-plus/theme-chalk/src/mixins/_var.scss' as *;
-@use 'element-plus/theme-chalk/src/mixins/mixins.scss' as *;
-
-html.lighting-theme {
-  color-scheme: 'lighting-theme';
-
-  // hex colors
-  //@each $type in (primary, success, warning, danger, error, info) {
-  //  @include set-css-color-type($colors, $type);
-  //}
-  //
-  //// --el-box-shadow-#{$type}
-  //@include set-component-css-var('box-shadow', $box-shadow);
-  //
-  //// color-scheme
-  //// Background --el-bg-color-#{$type}
-  //@include set-component-css-var('bg-color', $bg-color);
-  //// --el-text-color-#{$type}
-  //@include set-component-css-var('text-color', $text-color);
-  //// --el-border-color-#{$type}
-  //@include set-component-css-var('border-color', $border-color);
-  //// Fill --el-fill-color-#{$type}
-  //@include set-component-css-var('fill-color', $fill-color);
-  //@include set-component-css-var('mask-color', $mask-color);
-}
diff --git a/src/theme/lighting/custom/lc-css-vars.scss b/src/theme/lighting/custom/lc-css-vars.scss
new file mode 100644
index 0000000..3414e06
--- /dev/null
+++ b/src/theme/lighting/custom/lc-css-vars.scss
@@ -0,0 +1,77 @@
+html.lighting-theme {
+  --el-menu-active-color: var(--el-color-primary);
+  --el-menu-text-color: var(--el-text-color-primary);
+  --el-menu-hover-text-color: var(--el-menu-active-color);
+  --el-menu-bg-color: var(--el-fill-color-blank);
+  --el-menu-hover-bg-color: var(--el-color-primary-light-9);
+  --el-menu-item-height: 56px;
+  --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
+  --el-menu-horizontal-sub-item-height: 36px;
+  --el-menu-item-font-size: var(--el-font-size-base);
+  --el-menu-item-hover-fill: var(--el-color-primary-light-9);
+  --el-menu-border-color: none;
+  --el-menu-base-level-padding: 20px;
+  --el-menu-level-padding: 20px;
+  --el-menu-icon-width: 24px;
+
+  .el-menu-item.is-active {
+    color: var(--el-menu-active-color);
+    background-color: #ffece6;
+  }
+
+  .el-menu-item:hover {
+    background-color: var(--el-menu-hover-bg-color);
+    color: var(--el-menu-active-color);
+  }
+  /*element-plus section */
+  //--el-menu-active-color: #409eff;
+  //--el-menu-text-color: #bfcbd9;
+  //--el-menu-hover-text-color: var(--el-color-primary);
+  //--el-menu-bg-color: #304156;
+  //--el-menu-hover-bg-color: #263445;
+  //--el-menu-item-height: 56px;
+
+  /*layout section*/
+  //layout
+  --layout-border-left-color: #ddd;
+  //Breadcrumb
+  --breadcrumb-no-redirect: #97a8be;
+  //Hamburger
+  --hamburger-width: 20px;
+  --hamburger-height: 20px;
+  //Sidebar
+  --sidebar-el-icon-size: 20px;
+  --sidebar-logo-background: #fff;
+  --sidebar-logo-color: #ff9901;
+  --sidebar-logo-width: 32px;
+  --sidebar-logo-height: 32px;
+  --sidebar-logo-title-color: #2b2f3a;
+  --side-bar-width: 210px;
+  --side-bar-border-right-color: '#ddd';
+  //TagsView
+  --tags-view-background: #fff;
+  --tags-view-border-bottom: #d8dce5;
+  --tags-view-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  --tags-view-item-background: #fff;
+  --tags-view-item-border-color: #d8dce5;
+  --tags-view-item-color: #495060;
+  --tag-view-height: 32px;
+  --tags-view-item-active-background: #42b983;
+  --tags-view-item-active-color: #fff;
+  --tags-view-item-active-border-color: #42b983;
+  --tags-view-contextmenu-background: #fff;
+  --tags-view-contextmenu-color: #333;
+  --tags-view-contextmenu-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+  --tags-view-contextmenu-hover-background: #eee;
+  //close-icon
+  --tags-view-close-icon-hover-background: #b4bccc;
+  --tags-view-close-icon-hover-color: #fff;
+  //AppMain.vue
+  --app-main-padding: 10px;
+  --app-main-background: #fff;
+  //Navbar.vue
+  --nav-bar-height: 50px;
+  --nav-bar-background: #fff;
+  --nav-bar-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  --nav-bar-right-menu-background: #fff;
+}
diff --git a/src/theme/lighting/custom/lc-var.scss b/src/theme/lighting/custom/lc-var.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/theme/lighting/element-plus/button.scss b/src/theme/lighting/element-plus/button.scss
new file mode 100644
index 0000000..8c6e71b
--- /dev/null
+++ b/src/theme/lighting/element-plus/button.scss
@@ -0,0 +1,123 @@
+html.lighting-theme {
+  color-scheme: lighting-theme;
+  .at-button-low {
+    --el-button-text-color: #262626;
+    --el-button-bg-color: #ffffff;
+    --el-button-border-color: #d9d9d9;
+    --el-button-outline-color: #d9d9d9;
+
+    --el-button-hover-text-color: #c72210;
+    --el-button-hover-link-text-color: #c72210;
+    --el-button-hover-bg-color: #ffece6;
+    --el-button-hover-border-color: transparent;
+
+    --el-button-active-color: #a8150a;
+    --el-button-active-bg-color: #a8150a;
+    --el-button-active-border-color: transparent;
+
+    --el-button-disabled-text-color: #a6a6a6;
+    --el-button-disabled-bg-color: #ffece6;
+    --el-button-disabled-border-color: #c72210;
+    //loading
+    --el-button-loading-text-color: #c72210;
+    --el-button-loading-bg-color: #ffece6;
+    --el-button-loading-border-color: #c72210;
+  }
+
+  .at-button-middle {
+    --el-button-text-color: #c72210;
+    --el-button-bg-color: #ffece6;
+    --el-button-border-color: #c72210;
+    --el-button-outline-color: #c72210;
+
+    --el-button-hover-text-color: #ffffff;
+    --el-button-hover-link-text-color: #ffffff;
+    --el-button-hover-bg-color: #c72210;
+    --el-button-hover-border-color: #c72210;
+
+    --el-button-active-color: #ffffff;
+    --el-button-active-bg-color: #a8150a;
+    --el-button-active-border-color: #a8150a;
+
+    --el-button-disabled-text-color: #a6a6a6;
+    --el-button-disabled-bg-color: #ffffff;
+    --el-button-disabled-border-color: #d9d9d9;
+
+    //loading
+    --el-button-loading-text-color: #c72210;
+    --el-button-loading-bg-color: #ffece6;
+    --el-button-loading-border-color: #c72210;
+  }
+
+  .at-button-height {
+    --el-button-text-color: #ffffff;
+    --el-button-bg-color: #c72210;
+    --el-button-border-color: transparent;
+    --el-button-outline-color: transparent;
+
+    --el-button-hover-text-color: #ffffff;
+    --el-button-hover-link-text-color: #ffffff;
+    --el-button-hover-bg-color: #dd715b;
+    --el-button-hover-border-color: #c72210;
+
+    --el-button-active-color: #ffffff;
+    --el-button-active-bg-color: #a8150a;
+    --el-button-active-border-color: transparent;
+
+    --el-button-disabled-text-color: #a6a6a6;
+    --el-button-disabled-bg-color: #f5f5f5;
+    --el-button-disabled-border-color: transparent;
+
+    //loading
+    --el-button-loading-text-color: #ffffff;
+    --el-button-loading-bg-color: #c72210;
+    --el-button-loading-border-color: transparent;
+  }
+
+  .at-button-text {
+    --el-button-text-color: #477ef5;
+    --el-fill-color-light: transparent;
+    --el-fill-color: transparent;
+
+    --el-button-hover-text-color: #86b2f9;
+
+    --el-button-active-color: #2c59cb;
+
+    --el-button-disabled-text-color: #a6a6a6;
+
+    //loading
+    --el-button-loading-text-color: #477ef5;
+  }
+
+  .el-button {
+    //default
+    --el-button-size: 36px;
+    height: var(--el-button-size);
+    padding: 8px 30px;
+    font-size: 14px;
+    //loading
+    .is-loading {
+      color: var(--el-button-loading-text-color);
+      background-color: var(--el-button-loading-bg-color);
+      border-color: var(--el-button-loading-border-color);
+    }
+  }
+
+  .el-button--small {
+    --el-button-size: 27px;
+    height: var(--el-button-size);
+    padding: 5px 24px;
+    font-size: 12px;
+  }
+
+  .el-button--large {
+    --el-button-size: 40px;
+    height: var(--el-button-size);
+    padding: 10px 30px;
+    font-size: 14px;
+  }
+
+  .el-button + .el-button {
+    margin-left: 12px;
+  }
+}
diff --git a/src/theme/lighting/element-plus/checkbox.scss b/src/theme/lighting/element-plus/checkbox.scss
new file mode 100644
index 0000000..34e4ced
--- /dev/null
+++ b/src/theme/lighting/element-plus/checkbox.scss
@@ -0,0 +1,27 @@
+html.lighting-theme {
+  .el-checkbox {
+    --el-checkbox-font-size: 14px;
+    --el-checkbox-font-weight: var(--el-font-weight-primary);
+    --el-checkbox-text-color: #262626;
+    --el-checkbox-input-height: 14px;
+    --el-checkbox-input-width: 14px;
+    --el-checkbox-border-radius: var(--el-border-radius-small);
+    --el-checkbox-bg-color: var(--el-fill-color-blank);
+    --el-checkbox-input-border: var(--el-border);
+
+    //disabled
+    --el-checkbox-disabled-border-color: var(--el-border-color);
+    --el-checkbox-disabled-input-fill: var(--el-fill-color-light);
+    --el-checkbox-disabled-icon-color: var(--el-text-color-placeholder);
+    --el-checkbox-disabled-checked-input-fill: var(--el-border-color-extra-light);
+    --el-checkbox-disabled-checked-input-border-color: var(--el-border-color);
+    --el-checkbox-disabled-checked-icon-color: var(--el-text-color-placeholder);
+
+    //check
+    --el-checkbox-checked-text-color: #262626;
+    --el-checkbox-checked-input-border-color: transparent;
+    --el-checkbox-checked-bg-color: #c72210;
+    --el-checkbox-checked-icon-color: #ffffff;
+    --el-checkbox-input-border-color-hover: #c72210;
+  }
+}
diff --git a/src/theme/lighting/element-plus/css-vars.scss b/src/theme/lighting/element-plus/css-vars.scss
new file mode 100644
index 0000000..e9c6865
--- /dev/null
+++ b/src/theme/lighting/element-plus/css-vars.scss
@@ -0,0 +1,18 @@
+@use 'sass:map';
+
+@use './var' as *;
+@use '../../mixins/var'  as *;
+@use '../../mixins/mixins'  as *;
+
+html.lighting-theme {
+  color-scheme: lighting-theme;
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-rgb($type);
+  }
+
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+
+  //--el-color-primary: #c72210;
+}
diff --git a/src/theme/lighting/element-plus/form.scss b/src/theme/lighting/element-plus/form.scss
new file mode 100644
index 0000000..9e81c0f
--- /dev/null
+++ b/src/theme/lighting/element-plus/form.scss
@@ -0,0 +1,20 @@
+html.lighting-theme {
+  //date
+  .el-date-range-picker {
+    --el-datepicker-text-color: var(--el-text-color-regular);
+    --el-datepicker-off-text-color: var(--el-text-color-placeholder);
+    --el-datepicker-header-text-color: var(--el-text-color-regular);
+    --el-datepicker-icon-color: var(--el-text-color-primary);
+    --el-datepicker-border-color: var(--el-disabled-border-color);
+    --el-datepicker-inner-border-color: var(--el-border-color-light);
+    --el-datepicker-inrange-bg-color: #ffece6;
+    --el-datepicker-inrange-hover-bg-color: var(--el-border-color-extra-light);
+    --el-datepicker-active-color: var(--el-color-primary);
+    --el-datepicker-hover-text-color: var(--el-color-primary);
+  }
+
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background-color: #ffece6;
+  }
+}
diff --git a/src/theme/lighting/element-plus/pagination.scss b/src/theme/lighting/element-plus/pagination.scss
new file mode 100644
index 0000000..1ef781a
--- /dev/null
+++ b/src/theme/lighting/element-plus/pagination.scss
@@ -0,0 +1,30 @@
+html.lighting-theme {
+  .el-pagination {
+    --el-text-color-regular: #8c8c8c;
+    --el-pagination-font-size: 14px;
+    --el-pagination-bg-color: var(--el-fill-color-blank);
+    --el-pagination-text-color: var(--el-text-color-primary);
+    --el-pagination-border-radius: 3px;
+    --el-pagination-button-color: var(--el-text-color-primary);
+    --el-pagination-button-width: 32px;
+    --el-pagination-button-height: 32px;
+    --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
+    --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
+    --el-pagination-button-bg-color: var(--el-fill-color);
+    --el-pagination-hover-color: var(--el-color-primary);
+    --el-pagination-height-extra-small: 24px;
+    --el-pagination-line-height-extra-small: var(--el-pagination-height-extra-small);
+    white-space: nowrap;
+    padding: 2px 5px;
+    color: var(--el-pagination-text-color);
+    font-weight: 400;
+    display: flex;
+    align-items: center;
+  }
+
+  .el-pagination__total {
+    margin-right: 16px;
+    font-weight: 400;
+    color: var(--el-text-color-regular);
+  }
+}
diff --git a/src/theme/lighting/element-plus/redio.scss b/src/theme/lighting/element-plus/redio.scss
new file mode 100644
index 0000000..78784c1
--- /dev/null
+++ b/src/theme/lighting/element-plus/redio.scss
@@ -0,0 +1,18 @@
+html.lighting-theme {
+  .el-radio {
+    --el-radio-font-size: var(--el-font-size-base);
+    --el-radio-text-color: #262626;
+    --el-radio-font-weight: var(--el-font-weight-primary);
+    --el-radio-input-height: 14px;
+    --el-radio-input-width: 14px;
+    --el-radio-input-border-radius: var(--el-border-radius-circle);
+    --el-radio-input-bg-color: var(--el-fill-color-blank);
+    --el-radio-input-border: var(--el-border);
+    --el-radio-input-border-color: transparent;
+    //--el-radio-input-border-color-hover: transparent;
+  }
+
+  .el-radio__input.is-checked + .el-radio__label {
+    color: #262626;
+  }
+}
diff --git a/src/theme/lighting/element-plus/table.scss b/src/theme/lighting/element-plus/table.scss
new file mode 100644
index 0000000..473c73e
--- /dev/null
+++ b/src/theme/lighting/element-plus/table.scss
@@ -0,0 +1,17 @@
+html.lighting-theme {
+  .el-table {
+    --el-table-border-color: #f0f0f0;
+    --el-table-border: 1px solid #f0f0f0;
+    --el-table-text-color: var(--el-text-color-regular);
+    --el-table-header-text-color: var(--el-text-color-secondary);
+    --el-table-row-hover-bg-color: #ffece6;
+    --el-table-current-row-bg-color: var(--el-color-primary-light-9);
+    --el-table-header-bg-color: #fafafa;
+    --el-table-fixed-box-shadow: var(--el-box-shadow-light);
+    --el-table-bg-color: var(--el-fill-color-blank);
+    --el-table-tr-bg-color: var(--el-fill-color-blank);
+    --el-table-expanded-cell-bg-color: var(--el-fill-color-blank);
+    --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
+    --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
+  }
+}
diff --git a/src/theme/lighting/element-plus/var.scss b/src/theme/lighting/element-plus/var.scss
new file mode 100644
index 0000000..3cd7b37
--- /dev/null
+++ b/src/theme/lighting/element-plus/var.scss
@@ -0,0 +1,63 @@
+/* Element Chalk Variables */
+@use 'sass:math';
+@use 'sass:map';
+@use '../../mixins/function.scss' as *;
+
+// types
+$types: primary, success, warning, danger, error, info;
+
+// change color
+$colors: () !default;
+$colors: map.deep-merge(
+  (
+    'white': #ffffff,
+    'black': #000000,
+    'primary': (
+      'base': #c72210//#409eff
+    ),
+    'success': (
+      'base': #45b207
+    ),
+    'warning': (
+      'base': #ec8828
+    ),
+    'danger': (
+      'base': #f56c6c
+    ),
+    'error': (
+      'base': #d24934
+    ),
+    'info': (
+      'base': #909399
+    )
+  ),
+  $colors
+);
+
+$color-white: map.get($colors, 'white') !default;
+$color-black: map.get($colors, 'black') !default;
+$color-primary: map.get($colors, 'primary', 'base') !default;
+$color-success: map.get($colors, 'success', 'base') !default;
+$color-warning: map.get($colors, 'warning', 'base') !default;
+$color-danger: map.get($colors, 'danger', 'base') !default;
+$color-error: map.get($colors, 'error', 'base') !default;
+$color-info: map.get($colors, 'info', 'base') !default;
+
+//$colors添加 --el-color-primary-light-7
+@mixin set-color-mix-level($type, $number, $mode: 'light', $mix-color: $color-white) {
+  $colors: map.deep-merge(
+    (
+      $type: (
+        '#{$mode}-#{$number}': mix($mix-color, map.get($colors, $type, 'base'), math.percentage(math.div($number, 10)))
+      )
+    ),
+    $colors
+  ) !global;
+}
+
+// $colors.primary.light-i
+@each $type in $types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'light', $color-white);
+  }
+}
diff --git a/src/theme/lighting/index.scss b/src/theme/lighting/index.scss
index c496fac..161688f 100644
--- a/src/theme/lighting/index.scss
+++ b/src/theme/lighting/index.scss
@@ -1,81 +1,13 @@
-/*custom  variables*/
-$--colors: (
-  'primary': (
-    'base': #589ef8
-  ),
-  'success': (
-    'base': #21ba45
-  ),
-  'warning': (
-    'base': #f2711c
-  ),
-  'danger': (
-    'base': #db2828
-  ),
-  'error': (
-    'base': #db2828
-  ),
-  'info': (
-    'base': #42b8dd
-  )
-);
+/*lighting-theme*/
+@use "./element-plus/css-vars";
+@use "./element-plus/var";
+@use "./element-plus/button";
+@use "./element-plus/checkbox";
+@use "./element-plus/redio";
+@use "./element-plus/pagination";
+@use "./element-plus/form";
+@use "./element-plus/table";
 
-@forward "./var.scss" with (
-  $colors: $--colors
-);
-
-/*import theme 起作用*/
-//@use "./css-vars.scss" as *;
-html.lighting-theme {
-  /*element-plus section */
-  //--el-menu-active-color: #409eff;
-  //--el-menu-text-color: #bfcbd9;
-  //--el-menu-hover-text-color: var(--el-color-primary);
-  //--el-menu-bg-color: #304156;
-  //--el-menu-hover-bg-color: #263445;
-  //--el-menu-item-height: 56px;
-  --el-menu-border-color: none;
-  /*layout section*/
-  //layout
-  --layout-border-left-color: #ddd;
-  //Breadcrumb
-  --breadcrumb-no-redirect: #97a8be;
-  //Hamburger
-  --hamburger-width: 20px;
-  --hamburger-height: 20px;
-  //Sidebar
-  --sidebar-el-icon-size: 20px;
-  --sidebar-logo-background: #fff;
-  --sidebar-logo-color: #ff9901;
-  --sidebar-logo-width: 32px;
-  --sidebar-logo-height: 32px;
-  --sidebar-logo-title-color: #2b2f3a;
-  --side-bar-width: 210px;
-  --side-bar-border-right-color: '#ddd';
-  //TagsView
-  --tags-view-background: #fff;
-  --tags-view-border-bottom: #d8dce5;
-  --tags-view-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
-  --tags-view-item-background: #fff;
-  --tags-view-item-border-color: #d8dce5;
-  --tags-view-item-color: #495060;
-  --tag-view-height: 32px;
-  --tags-view-item-active-background: #42b983;
-  --tags-view-item-active-color: #fff;
-  --tags-view-item-active-border-color: #42b983;
-  --tags-view-contextmenu-background: #fff;
-  --tags-view-contextmenu-color: #333;
-  --tags-view-contextmenu-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
-  --tags-view-contextmenu-hover-background: #eee;
-  //close-icon
-  --tags-view-close-icon-hover-background: #b4bccc;
-  --tags-view-close-icon-hover-color: #fff;
-  //AppMain.vue
-  --app-main-padding: 10px;
-  --app-main-background: #fff;
-  //Navbar.vue
-  --nav-bar-height: 50px;
-  --nav-bar-background: #fff;
-  --nav-bar-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-  --nav-bar-right-menu-background: #fff;
-}
+//custom
+@use "./custom/lc-css-vars";
+@use "./custom/lc-var";
diff --git a/src/theme/lighting/var.scss b/src/theme/lighting/var.scss
deleted file mode 100644
index a80d649..0000000
--- a/src/theme/lighting/var.scss
+++ /dev/null
@@ -1,211 +0,0 @@
-@use 'sass:map';
-@use 'sass:math';
-
-@use 'element-plus/theme-chalk/src/common/var.scss' as common;
-@use 'element-plus/theme-chalk/src/mixins/mixins.scss' as *;
-@use 'element-plus/theme-chalk/src/color/index.scss' as *;
-
-$colors: () !default;
-@each $type in common.$types {
-  $colors: map.deep-merge(
-    (
-      $type: (
-        'base': map.get(common.$colors, $type, 'base')
-      )
-    ),
-    $colors
-  ) !global;
-}
-
-// https://sass-lang.com/documentation/values/maps#immutability
-// mix colors with white/black to generate light/lighting level
-@mixin set-color-mix-level($type, $number, $mode: 'light', $mix-color: $color-white) {
-  // hex mix color
-  $colors: map.deep-merge(
-    (
-      $type: (
-        '#{$mode}-#{$number}': mix($mix-color, map.get($colors, $type, 'base'), math.percentage(math.div($number, 10)))
-      )
-    ),
-    $colors
-  ) !global;
-
-  // for designer to view transparent
-  // $colors: map.deep-merge(
-  //   (
-  //     $type: (
-  //       '#{$mode}-#{$number}':
-  //         rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
-  //     ),
-  //   ),
-  //   $colors
-  // ) !global;
-}
-
-// Background
-$bg-color: () !default;
-$bg-color: map.merge(
-  (
-    'page': #0a0a0a,
-    '': #141414,
-    'overlay': #1d1e1f
-  ),
-  $bg-color
-);
-
-// lighting-mode
-@each $type in common.$types {
-  @for $i from 1 through 9 {
-    @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
-  }
-}
-@each $type in common.$types {
-  @include set-color-mix-level($type, 2, 'lighting', common.$color-white);
-}
-
-// border
-$border-color-base: #f5f8ff;
-$border-color: () !default;
-$border-color: map.merge(
-  (
-    'lightinger': rgba($border-color-base, 0.35),
-    'lighting': rgba($border-color-base, 0.3),
-    '': rgba($border-color-base, 0.25),
-    'light': rgba($border-color-base, 0.2),
-    'lighter': rgba($border-color-base, 0.15),
-    'extra-light': rgba($border-color-base, 0.1)
-  ),
-  $border-color
-);
-
-// mix to hex to avoid overlay issues
-@each $key, $val in $border-color {
-  $border-color: map.merge(
-    $border-color,
-    (
-      $key: mix-overlay-color($val, map.get($bg-color, ''))
-    )
-  ) !global;
-}
-
-// Box-shadow
-$box-shadow: () !default;
-$box-shadow: map.merge(
-  (
-    '': (
-      0px 12px 32px 4px rgba(0, 0, 0, 0.36),
-      0px 8px 20px rgba(0, 0, 0, 0.72)
-    ),
-    'light': (
-      0px 0px 12px rgba(0, 0, 0, 0.72)
-    ),
-    'lighter': (
-      0px 0px 6px rgba(0, 0, 0, 0.72)
-    ),
-    'lighting': (
-      0px 16px 48px 16px rgba(0, 0, 0, 0.72),
-      0px 12px 32px #000000,
-      0px 8px 16px -8px #000000
-    )
-  ),
-  $box-shadow
-);
-
-// fill
-$fill-color-base: #fafcff;
-$fill-color: () !default;
-$fill-color: map.merge(
-  (
-    'lightinger': rgba($fill-color-base, 0.2),
-    'lighting': rgba($fill-color-base, 0.16),
-    '': rgba($fill-color-base, 0.12),
-    'light': rgba($fill-color-base, 0.08),
-    'lighter': rgba($fill-color-base, 0.04),
-    'extra-light': rgba($fill-color-base, 0.02),
-    'blank': transparent
-  ),
-  $fill-color
-);
-
-// mix to hex to avoid overlay issues
-@each $key, $val in $fill-color {
-  @if ($key != 'blank') {
-    $fill-color: map.merge(
-      $fill-color,
-      (
-        $key: mix-overlay-color($val, map.get($bg-color, ''))
-      )
-    ) !global;
-  }
-}
-
-// text
-$text-color-base: #f0f5ff;
-$text-color: () !default;
-$text-color: map.merge(
-  (
-    'primary': rgba($text-color-base, 0.95),
-    'regular': rgba($text-color-base, 0.85),
-    'secondary': rgba($text-color-base, 0.65),
-    'placeholder': rgba($text-color-base, 0.55),
-    'disabled': rgba($text-color-base, 0.4)
-  ),
-  $text-color
-);
-// mix to hex to avoid overlay issues
-@each $key, $val in $text-color {
-  $text-color: map.merge(
-    $text-color,
-    (
-      $key: mix-overlay-color($val, map.get($bg-color, ''))
-    )
-  ) !global;
-}
-
-// mask
-$mask-color: () !default;
-$mask-color: map.merge(
-  (
-    '': rgba(0, 0, 0, 0.8),
-    'extra-light': rgba(0, 0, 0, 0.3)
-  ),
-  $mask-color
-);
-
-// Button
-// css3 var in packages/theme-chalk/src/button.scss
-$button: () !default;
-$button: map.merge(
-  (
-    'disabled-text-color': rgba(255, 255, 255, 0.5)
-  ),
-  $button
-);
-
-// card
-$card: () !default;
-$card: map.merge(
-  (
-    'bg-color': getCssVar('bg-color', 'overlay')
-  ),
-  $card
-);
-
-// Empty
-// css3 var in packages/theme-chalk/src/empty.scss
-$empty: () !default;
-$empty: map.merge(
-  (
-    'fill-color-0': getCssVar('color-black'),
-    'fill-color-1': #4b4b52,
-    'fill-color-2': #36383d,
-    'fill-color-3': #1e1e20,
-    'fill-color-4': #262629,
-    'fill-color-5': #202124,
-    'fill-color-6': #212224,
-    'fill-color-7': #1b1c1f,
-    'fill-color-8': #1c1d1f,
-    'fill-color-9': #18181a
-  ),
-  $empty
-);
diff --git a/src/theme/mixins/_button.scss b/src/theme/mixins/_button.scss
new file mode 100644
index 0000000..8a51582
--- /dev/null
+++ b/src/theme/mixins/_button.scss
@@ -0,0 +1,162 @@
+@use 'sass:map';
+
+@use '../mixins/var' as *;
+@use '../mixins/function' as *;
+@use '../common/var' as *;
+
+@mixin button-plain($type) {
+  $button-color-types: (
+    '': (
+      'text-color': (
+        'color',
+        $type
+      ),
+      'bg-color': (
+        'color',
+        $type,
+        'light-9'
+      ),
+      'border-color': (
+        'color',
+        $type,
+        'light-5'
+      )
+    ),
+    'hover': (
+      'text-color': (
+        'color',
+        'white'
+      ),
+      'bg-color': (
+        'color',
+        $type
+      ),
+      'border-color': (
+        'color',
+        $type
+      )
+    ),
+    'active': (
+      'text-color': (
+        'color',
+        'white'
+      )
+    )
+  );
+
+  @each $type, $typeMap in $button-color-types {
+    @each $typeColor, $list in $typeMap {
+      @include css-var-from-global(('button', $type, $typeColor), $list);
+    }
+  }
+
+  &.is-disabled {
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+      color: getCssVar('color', $type, 'light-5');
+      background-color: getCssVar('color', $type, 'light-9');
+      border-color: getCssVar('color', $type, 'light-8');
+    }
+  }
+}
+
+@mixin button-variant($type) {
+  $button-color-types: (
+    '': (
+      'text-color': (
+        'color',
+        'white'
+      ),
+      'bg-color': (
+        'color',
+        $type
+      ),
+      'border-color': (
+        'color',
+        $type
+      ),
+      'outline-color': (
+        'color',
+        $type,
+        'light-5'
+      ),
+      'active-color': (
+        'color',
+        $type,
+        'dark-2'
+      )
+    ),
+    'hover': (
+      'text-color': (
+        'color',
+        'white'
+      ),
+      'link-text-color': (
+        'color',
+        $type,
+        'light-5'
+      ),
+      'bg-color': (
+        'color',
+        $type,
+        'light-3'
+      ),
+      'border-color': (
+        'color',
+        $type,
+        'light-3'
+      )
+    ),
+    'active': (
+      'bg-color': (
+        'color',
+        $type,
+        'dark-2'
+      ),
+      'border-color': (
+        'color',
+        $type,
+        'dark-2'
+      )
+    ),
+    'disabled': (
+      'text-color': (
+        'color',
+        'white'
+      ),
+      'bg-color': (
+        'color',
+        $type,
+        'light-5'
+      ),
+      'border-color': (
+        'color',
+        $type,
+        'light-5'
+      )
+    )
+  );
+
+  @each $type, $typeMap in $button-color-types {
+    @each $typeColor, $list in $typeMap {
+      @include css-var-from-global(('button', $type, $typeColor), $list);
+    }
+  }
+
+  &.is-plain,
+  &.is-text,
+  &.is-link {
+    @include button-plain($type);
+  }
+}
+
+@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
+  padding: $padding-vertical $padding-horizontal;
+  font-size: $font-size;
+  border-radius: $border-radius;
+  &.is-round {
+    padding: $padding-vertical $padding-horizontal;
+  }
+}
diff --git a/src/theme/mixins/_var.scss b/src/theme/mixins/_var.scss
new file mode 100644
index 0000000..f66a8fc
--- /dev/null
+++ b/src/theme/mixins/_var.scss
@@ -0,0 +1,56 @@
+/*var mixin*/
+@use 'sass:map';
+
+@use 'config';
+@use 'function' as *;
+@use '../lighting/element-plus/var' as *;
+
+// set css var value, because we need translate value to string
+// for example:
+// @include set-css-var-value(('color', 'primary'), red);
+// --el-color: red;
+// --el-$name-: $value;
+@mixin set-css-var-value($name, $value) {
+  #{joinVarName($name)}: #{$value};
+}
+
+@mixin set-css-color-type($colors, $type) {
+  @include set-css-var-value(('color', $type), map.get($colors, $type, 'base'));
+  @each $i in (3, 5, 7, 8, 9) {
+    // --el-color-primary-light-7: #c6e2ff;
+    @include set-css-var-value(('color', $type, 'light', $i), map.get($colors, $type, 'light-#{$i}'));
+  }
+
+  //@include set-css-var-value(
+  //      ('color', $type, 'dark-2'),
+  //    map.get($colors, $type, 'dark-2')
+  //);
+}
+
+//el-$name-$attribute-$value
+@mixin set-component-css-var($name, $variables) {
+  @each $attribute, $value in $variables {
+    @if $attribute == 'default' {
+      #{getCssVarName($name)}: #{$value};
+    } @else {
+      #{getCssVarName($name, $attribute)}: #{$value};
+    }
+  }
+}
+
+// --el-color-error-rgb: 245, 108, 108;
+// --el-color-$type-rgb: 245, 108, 108;
+@mixin set-css-color-rgb($type) {
+  $color: map.get($colors, $type, 'base');
+  @include set-css-var-value(('color', $type, 'rgb'), #{red($color), green($color), blue($color)});
+}
+
+// generate css var from existing css var
+// for example:
+// @include css-var-from-global(('button', 'text-color'), ('color', $type))
+// --el-button-text-color: var(--el-color-#{$type});
+@mixin css-var-from-global($var, $gVar) {
+  $varName: joinVarName($var);
+  $gVarName: joinVarName($gVar);
+  #{$varName}: var(#{$gVarName});
+}
diff --git a/src/theme/mixins/config.scss b/src/theme/mixins/config.scss
new file mode 100644
index 0000000..954f652
--- /dev/null
+++ b/src/theme/mixins/config.scss
@@ -0,0 +1,5 @@
+$namespace: 'el' !default;
+$common-separator: '-' !default;
+$element-separator: '__' !default;
+$modifier-separator: '--' !default;
+$state-prefix: 'is-' !default;
diff --git a/src/theme/mixins/function.scss b/src/theme/mixins/function.scss
new file mode 100644
index 0000000..14883fc
--- /dev/null
+++ b/src/theme/mixins/function.scss
@@ -0,0 +1,60 @@
+@use 'config';
+
+// getCssVarName('button', 'text-color') => '--el-button-text-color'
+@function getCssVarName($args...) {
+  @return joinVarName($args);
+}
+
+// getCssVar('button', 'text-color') => var(--el-button-text-color)
+@function getCssVar($args...) {
+  @return var(#{joinVarName($args)});
+}
+
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+  @return $selector;
+}
+
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, config.$modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+@function hitAllSpecialNestRule($selector) {
+  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+}
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, '.' + config.$state-prefix) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+// join var name
+// joinVarName(('button', 'text-color')) => '--el-button-text-color'
+@function joinVarName($list) {
+  $name: '--' + config.$namespace;
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
diff --git a/src/theme/mixins/mixins.scss b/src/theme/mixins/mixins.scss
new file mode 100644
index 0000000..5e2f1f9
--- /dev/null
+++ b/src/theme/mixins/mixins.scss
@@ -0,0 +1,61 @@
+//input function
+@use 'function' as *;
+@forward 'function';
+
+@forward 'config';
+@use 'config' as *;
+// el-button{}
+@mixin b($block) {
+  $B: $namespace + '-' + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+@mixin e($element) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $element {
+    //el-button__text
+    $currentSelector: #{$currentSelector + '.' + $B + $element-separator + $unit + ','};
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + $selector + $modifier-separator + $unit + ','};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
diff --git a/src/views/error-log/ErrorLog.vue b/src/views/error-log/ErrorLog.vue
index cf513e3..52be4f5 100644
--- a/src/views/error-log/ErrorLog.vue
+++ b/src/views/error-log/ErrorLog.vue
@@ -134,7 +134,7 @@ const errorLogImg = () => {
 
 /*表格查询和筛选*/
 let usertableData = ref([])
-import packages from '/package.json'
+import packages from '../../../package.json'
 let searchForm: ObjTy = reactive({
   errorLog: '',
   pageUrl: `https://github.jzfai.top/${packages.name}`,
diff --git a/src/views/example/vuex-use/VuexUse.vue b/src/views/example/vuex-use/VuexUse.vue
index 64d7fa6..7e6c007 100644
--- a/src/views/example/vuex-use/VuexUse.vue
+++ b/src/views/example/vuex-use/VuexUse.vue
@@ -15,7 +15,7 @@
 import { useAppStore } from '@/store/app'
 const appStore = useAppStore()
 /*getter*/
-const getterValue = ref(null)
+const getterValue = ref()
 const getterFunc = () => {
   getterValue.value = appStore.cachedViews
 }
diff --git a/tests/.eslintrc-unit-test.json b/tests/.eslintrc-unit-test.json
deleted file mode 100644
index 9992fd3..0000000
--- a/tests/.eslintrc-unit-test.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "globals": {
-    "describe": true,
-    "expect": true,
-    "it": true
-  }
-}
diff --git a/tests/components/example.spec.ts b/tests/components/example.spec.ts
deleted file mode 100644
index 1a4b3da..0000000
--- a/tests/components/example.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { mount } from '@vue/test-utils'
-import TestUnit from '@/components/TestUnit.vue'
-
-describe('TestUnit.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'Hello world'
-    const wrapper = mount(TestUnit, {
-      props: {
-        msg
-      }
-    })
-    //wrapper.vm相当于this
-    //using learn for https://test-utils.vuejs.org/guide/essentials/a-crash-course.html#making-the-test-pass
-    expect(wrapper.vm.msg).toMatch(msg)
-  })
-})
diff --git a/tests/unit/test.spec.ts b/tests/unit/test.spec.ts
deleted file mode 100644
index 1ff4185..0000000
--- a/tests/unit/test.spec.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- 基本方法：
-分组（Test Group）：descripe(描述语,function)
-测试用例（Test Case）：test(描述语,function)
-断言（Assert）：expect(运行需测试的方法并返回实际结果).toBe(预期结果)
-参考来自：https://juejin.cn/post/7039146473878978596
-* */
-describe('分组', () => {
-  it('', () => {
-    // test.fai()
-    expect(2 + 2).toBe(4)
-    // expect(2 + 1).toBe(4)
-  })
-})
diff --git a/tsconfig.base.json b/tsconfig.base.json
new file mode 100644
index 0000000..92e8b1e
--- /dev/null
+++ b/tsconfig.base.json
@@ -0,0 +1,49 @@
+{
+  "files": [],
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    //	启用所有严格类型检查选项。
+    //启用 --strict相当于启用 --noImplicitAny, --noImplicitThis, --alwaysStrict， --strictNullChecks和 --strictFunctionTypes和--strictPropertyInitialization。
+    "strict": true,
+    // 允许编译器编译JS，JSX文件
+    "allowJs": false,
+    // 允许在JS文件中报错，通常与allowJS一起使用
+    "checkJs": false,
+    // 允许使用jsx
+    "jsx": "preserve",
+    "declaration": true,
+    //移除注解
+    "removeComments": true,
+    //不可以忽略any
+    "noImplicitAny": false,
+    //关闭 this 类型注解提示
+    "noImplicitThis": true,
+    //null/undefined不能作为其他类型的子类型：
+    //let a: number = null; //这里会报错.
+    "strictNullChecks": true,
+    //生成枚举的映射代码
+    "preserveConstEnums": true,
+    //根目录
+    //输出目录
+    "outDir": "./ts-out-dir",
+    //是否输出src2.js.map文件
+    "sourceMap": true,
+    //变量定义了但是未使用
+    "noUnusedLocals": false,
+    //是否允许把json文件当做模块进行解析
+    "resolveJsonModule": true,
+    //和noUnusedLocals一样，针对func
+    "noUnusedParameters": false,
+    // 模块解析策略，ts默认用node的解析策略，即相对的方式导入
+    "moduleResolution": "node",
+    //允许export=导出，由import from 导入
+    "esModuleInterop": true,
+    //忽略所有的声明文件（ *.d.ts）的类型检查。
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    //指定默认读取的目录
+    //"typeRoots": ["./node_modules/@types/", "./types"],
+    "lib": ["ES2018", "DOM"]
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index f5580f6..2a405b3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,59 +1,11 @@
 {
+  "extends": "./tsconfig.base.json",
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    //	启用所有严格类型检查选项。
-    //启用 --strict相当于启用 --noImplicitAny, --noImplicitThis, --alwaysStrict， --strictNullChecks和 --strictFunctionTypes和--strictPropertyInitialization。
-    "strict": true,
-    // 允许编译器编译JS，JSX文件
-    "allowJs": false,
-    // 允许在JS文件中报错，通常与allowJS一起使用
-    "checkJs": false,
-    // 允许使用jsx
-    "jsx": "preserve",
-    "declaration": true,
-    //移除注解
-    "removeComments": true,
-    //不可以忽略any
-    "noImplicitAny": false,
-    //关闭 this 类型注解提示
-    "noImplicitThis": true,
-    //null/undefined不能作为其他类型的子类型：
-    //let a: number = null; //这里会报错.
-    "strictNullChecks": true,
-    //生成枚举的映射代码
-    "preserveConstEnums": true,
-    //根目录
-    //输出目录
-    "outDir": "./ts-out-dir",
-    //是否输出src2.js.map文件
-    "sourceMap": true,
-    //变量定义了但是未使用
-    "noUnusedLocals": false,
-    //是否允许把json文件当做模块进行解析
-    "resolveJsonModule": true,
-    //和noUnusedLocals一样，针对func
-    "noUnusedParameters": false,
-    // 模块解析策略，ts默认用node的解析策略，即相对的方式导入
-    "moduleResolution": "node",
-    //允许export=导出，由import from 导入
-    "esModuleInterop": true,
-    //忽略所有的声明文件（ *.d.ts）的类型检查。
-    "skipLibCheck": true,
-    "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],
       "~/*": ["typings/*"]
-    },
-    //指定默认读取的目录
-    //"typeRoots": ["./node_modules/@types/", "./types"],
-    "lib": ["ES2018", "DOM"]
+    }
   },
-  //"files": [],
-  //include包含文件夹会被ts进行读取
-  "include": ["src", "typings", "auto-imports.d.ts"]
-  //exclude 可以去除include中指定的文件，不能去除file指定的文件
-  //  "exclude": [
-  ////    "src/src1.ts"
-  //  ]
+  "include": ["src", "typings", "auto-imports.d.ts"],
+  "exclude": ["node_modules", "**/dist"]
 }
diff --git a/typings/global.d.ts b/typings/global.d.ts
index e66b864..a9bea21 100644
--- a/typings/global.d.ts
+++ b/typings/global.d.ts
@@ -1,12 +1,12 @@
 //global declare file
 //let  function  namespace  class ,module
-declare let GLOBAL_let: Array<any>
-declare let GLOBAL_STRING: string
-declare let onlyOneChild: any
-declare let GLOBAL_VAR: any
-declare let defineOptions: any
-declare let $ref: any
+declare global {
+  declare let GLOBAL_let: Array<any>
+  declare let GLOBAL_STRING: string
+  declare let onlyOneChild: any
+  declare let GLOBAL_VAR: any
+  declare let defineOptions: any
+  declare let $ref: any
+}
 
-//declare import module
-declare module '*/**'
-declare module '*'
+export {}
diff --git a/typings/mixin.d.ts b/typings/mixin.d.ts
deleted file mode 100644
index 557c0e8..0000000
--- a/typings/mixin.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-//the mixin ts file, if you use the mixin props, you need declare
-declare let fileListMixin: Array<any>
-declare let chooseFileNameMixin: string
-declare let commonValueMixin: string
-declare let pageTotalMixin: number
-declare let dialogTitleMixin: string
-declare let detailDialogMixin: boolean
-declare let startEndArrMixin: Array<any>
-declare let searchFormMixin: any
-declare let formRulesMixin: any
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..7924b8c
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vitest/config'
+import Vue from '@vitejs/plugin-vue'
+import VueJsx from '@vitejs/plugin-vue-jsx'
+import DefineOptions from 'unplugin-vue-define-options/vite'
+export default defineConfig({
+  plugins: [Vue(), VueJsx(), DefineOptions()],
+  optimizeDeps: {
+    disabled: true
+  },
+  test: {
+    clearMocks: true,
+    environment: 'jsdom',
+    //setup 文件的路径。它们将运行在每个测试文件之前。
+    setupFiles: ['./vitest.setup.ts'],
+    transformMode: {
+      web: [/\.[jt]sx$/]
+    }
+  }
+})
diff --git a/vitest.setup.ts b/vitest.setup.ts
new file mode 100644
index 0000000..b067789
--- /dev/null
+++ b/vitest.setup.ts
@@ -0,0 +1,7 @@
+import { config } from '@vue/test-utils'
+import { vi } from 'vitest'
+import ResizeObserver from 'resize-observer-polyfill'
+
+vi.stubGlobal('ResizeObserver', ResizeObserver)
+
+config.global.stubs = {}