From 8f52ec5ff4027b16b9d1bf336907710f7e0d1eaf Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Fri, 8 Apr 2022 18:19:52 +0800
Subject: [PATCH 1/9] =?UTF-8?q?refactor(loading):=20=E4=BC=98=E5=8C=96load?=
 =?UTF-8?q?ing=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/auto-complete/src/components/dropdown.tsx       | 2 +-
 packages/devui-vue/devui/button/src/button.tsx            | 2 +-
 packages/devui-vue/devui/loading/index.ts                 | 6 ++++--
 .../loading/src/{directive.ts => loading-directive.ts}    | 6 +++---
 .../devui/loading/src/{service.ts => loading-service.ts}  | 6 +++---
 .../devui/loading/src/{types.ts => loading-types.ts}      | 8 ++++----
 packages/devui-vue/devui/loading/src/loading.tsx          | 6 +++---
 packages/devui-vue/devui/tree/src/tree.tsx                | 2 +-
 8 files changed, 20 insertions(+), 18 deletions(-)
 rename packages/devui-vue/devui/loading/src/{directive.ts => loading-directive.ts} (94%)
 rename packages/devui-vue/devui/loading/src/{service.ts => loading-service.ts} (90%)
 rename packages/devui-vue/devui/loading/src/{types.ts => loading-types.ts} (85%)

diff --git a/packages/devui-vue/devui/auto-complete/src/components/dropdown.tsx b/packages/devui-vue/devui/auto-complete/src/components/dropdown.tsx
index fbe952842e..e865804900 100644
--- a/packages/devui-vue/devui/auto-complete/src/components/dropdown.tsx
+++ b/packages/devui-vue/devui/auto-complete/src/components/dropdown.tsx
@@ -1,6 +1,6 @@
 import { defineComponent, inject } from 'vue';
 import { DropdownProps, DropdownPropsKey, SourceItemObj } from '../auto-complete-types';
-import dLoading from '../../../loading/src/directive';
+import dLoading from '../../../loading/src/loading-directive';
 export default defineComponent({
   name: 'DAutoCompleteDropdown',
   directives: {dLoading},
diff --git a/packages/devui-vue/devui/button/src/button.tsx b/packages/devui-vue/devui/button/src/button.tsx
index 50b6ff2f2a..3e97c20307 100644
--- a/packages/devui-vue/devui/button/src/button.tsx
+++ b/packages/devui-vue/devui/button/src/button.tsx
@@ -1,7 +1,7 @@
 import { defineComponent, toRefs } from 'vue';
 import type { SetupContext } from 'vue';
 import { Icon } from '../../icon';
-import loadingDirective from '../../loading/src/directive';
+import loadingDirective from '../../loading/src/loading-directive';
 import { buttonProps, ButtonProps } from './button-types';
 import useButton from './use-button';
 import './button.scss';
diff --git a/packages/devui-vue/devui/loading/index.ts b/packages/devui-vue/devui/loading/index.ts
index 7f68b056d0..63fe2474bb 100644
--- a/packages/devui-vue/devui/loading/index.ts
+++ b/packages/devui-vue/devui/loading/index.ts
@@ -1,6 +1,8 @@
 import { App } from 'vue';
-import Loading from './src/directive';
-import LoadingService from './src/service';
+import Loading from './src/loading-directive';
+import LoadingService from './src/loading-service';
+
+export * from './src/loading-types';
 
 export {
   LoadingService,
diff --git a/packages/devui-vue/devui/loading/src/directive.ts b/packages/devui-vue/devui/loading/src/loading-directive.ts
similarity index 94%
rename from packages/devui-vue/devui/loading/src/directive.ts
rename to packages/devui-vue/devui/loading/src/loading-directive.ts
index 4a1838125d..66cbb920ed 100644
--- a/packages/devui-vue/devui/loading/src/directive.ts
+++ b/packages/devui-vue/devui/loading/src/loading-directive.ts
@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import { defineComponent } from 'vue';
 import Loading from './loading';
-import { LoadingProps, BindingType, TargetHTMLElement } from './types';
+import { LoadingOptions, BindingType, TargetHTMLElement } from './loading-types';
 
 import { createComponent, unmountComponent } from '../../shared/scripts/component';
 
@@ -90,9 +90,9 @@ const removeAttribute = (el: TargetHTMLElement) => {
   el.removeAttribute('loadingtemplateref');
 };
 
-const handleProps = (el: TargetHTMLElement, vprops: LoadingProps | null) => {
+const handleProps = (el: TargetHTMLElement, vprops: LoadingOptions | null) => {
   const props = {
-    ...new LoadingProps(),
+    ...new LoadingOptions(),
     ...vprops
   };
 
diff --git a/packages/devui-vue/devui/loading/src/service.ts b/packages/devui-vue/devui/loading/src/loading-service.ts
similarity index 90%
rename from packages/devui-vue/devui/loading/src/service.ts
rename to packages/devui-vue/devui/loading/src/loading-service.ts
index 517d965805..7f2a1ac05b 100644
--- a/packages/devui-vue/devui/loading/src/service.ts
+++ b/packages/devui-vue/devui/loading/src/loading-service.ts
@@ -3,7 +3,7 @@ import { defineComponent } from 'vue';
 import { createComponent } from '../../shared/scripts/component';
 import Loading from './loading';
 
-import { LoadingProps } from './types';
+import { LoadingOptions } from './loading-types';
 
 const loadingConstructor = defineComponent(Loading);
 
@@ -18,7 +18,7 @@ type IMargeVNodeComponent = VNode['component'] & {
 const cacheTarget = new WeakMap();
 
 const loading = {
-  open(options: LoadingProps = {}): IMargeVNodeComponent {
+  open(options: LoadingOptions = {}): IMargeVNodeComponent {
 
     const parent: TargetElement = options.target || document.body;
 
@@ -31,7 +31,7 @@ const loading = {
 
     const isFull = document.body === parent;
 
-    options = { ...new LoadingProps(), ...options };
+    options = { ...new LoadingOptions(), ...options };
 
     const instance: IMargeVNodeComponent = createComponent(loadingConstructor, {
       ...options,
diff --git a/packages/devui-vue/devui/loading/src/types.ts b/packages/devui-vue/devui/loading/src/loading-types.ts
similarity index 85%
rename from packages/devui-vue/devui/loading/src/types.ts
rename to packages/devui-vue/devui/loading/src/loading-types.ts
index 456c458ebe..756b11e979 100644
--- a/packages/devui-vue/devui/loading/src/types.ts
+++ b/packages/devui-vue/devui/loading/src/loading-types.ts
@@ -14,7 +14,7 @@ class View {
   top?: string = '50%';
   left?: string = '50%';
 }
-export const componentProps = {
+export const loadingProps = {
   message: String,
   backdrop: Boolean,
   view: {
@@ -28,7 +28,7 @@ export const componentProps = {
   }
 } as const;
 
-export class LoadingProps {
+export class LoadingOptions {
   target?: Element | null;
   message?: string;
   loadingTemplateRef?: VNode['component'];
@@ -38,10 +38,10 @@ export class LoadingProps {
   zIndex?: number;
 }
 
-export type ComponentProps = ExtractPropTypes<typeof componentProps>;
+export type LoadingProps = ExtractPropTypes<typeof loadingProps>;
 
 export interface TargetHTMLElement extends HTMLElement {
   mask?: HTMLElement;
   instance?: VNode['component'];
-  options?: LoadingProps;
+  options?: LoadingOptions;
 }
diff --git a/packages/devui-vue/devui/loading/src/loading.tsx b/packages/devui-vue/devui/loading/src/loading.tsx
index 64e2185cb8..866e8aa53f 100644
--- a/packages/devui-vue/devui/loading/src/loading.tsx
+++ b/packages/devui-vue/devui/loading/src/loading.tsx
@@ -1,13 +1,13 @@
 import { CSSProperties, defineComponent, ref } from 'vue';
-import { componentProps, ComponentProps } from './types';
+import { loadingProps, LoadingProps } from './loading-types';
 
 import './loading.scss';
 
 export default defineComponent({
   name: 'DLoading',
   inheritAttrs: false,
-  props: componentProps,
-  setup(props: ComponentProps) {
+  props: loadingProps,
+  setup(props: LoadingProps) {
 
     const style: CSSProperties = {
       top: props.view.top,
diff --git a/packages/devui-vue/devui/tree/src/tree.tsx b/packages/devui-vue/devui/tree/src/tree.tsx
index ec9c77a76e..f13471bb3a 100644
--- a/packages/devui-vue/devui/tree/src/tree.tsx
+++ b/packages/devui-vue/devui/tree/src/tree.tsx
@@ -3,7 +3,7 @@ import type { SetupContext } from 'vue';
 import { treeProps, TreeProps, TreeItem, TreeRootType, Nullable } from './tree-types';
 import { CHECK_CONFIG } from  './config';
 import { preCheckTree, deleteNode, getId } from './util';
-import Loading from '../../loading/src/service';
+import Loading from '../../loading/src/loading-service';
 import Checkbox from '../../checkbox/src/checkbox';
 import useToggle from './composables/use-toggle';
 import useMergeNode from './composables/use-merge-node';

From d1c31d4a998bdbdbd35442ce93d9d9612c03facf Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Fri, 8 Apr 2022 18:25:35 +0800
Subject: [PATCH 2/9] =?UTF-8?q?refactor(modal):=20=E4=BC=98=E5=8C=96modal?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/modal/__tests__/modal.spec.tsx   | 4 ++--
 packages/devui-vue/devui/modal/index.ts                   | 8 +++++---
 .../devui-vue/devui/modal/src/{ => components}/body.tsx   | 0
 .../devui-vue/devui/modal/src/{ => components}/footer.tsx | 0
 .../devui-vue/devui/modal/src/{ => components}/header.tsx | 0
 .../devui/modal/src/{ => composables}/use-modal.ts        | 2 +-
 .../devui/modal/src/{ => composables}/use-moveable.ts     | 0
 packages/devui-vue/devui/modal/src/modal.tsx              | 6 +++---
 8 files changed, 11 insertions(+), 9 deletions(-)
 rename packages/devui-vue/devui/modal/src/{ => components}/body.tsx (100%)
 rename packages/devui-vue/devui/modal/src/{ => components}/footer.tsx (100%)
 rename packages/devui-vue/devui/modal/src/{ => components}/header.tsx (100%)
 rename packages/devui-vue/devui/modal/src/{ => composables}/use-modal.ts (82%)
 rename packages/devui-vue/devui/modal/src/{ => composables}/use-moveable.ts (100%)

diff --git a/packages/devui-vue/devui/modal/__tests__/modal.spec.tsx b/packages/devui-vue/devui/modal/__tests__/modal.spec.tsx
index f0a6ea6307..6e4faa3925 100644
--- a/packages/devui-vue/devui/modal/__tests__/modal.spec.tsx
+++ b/packages/devui-vue/devui/modal/__tests__/modal.spec.tsx
@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils';
 import { nextTick, ref } from 'vue';
 import DModal from '../src/modal';
-import DModalHeader from '../src/header';
-import DModalFooter from '../src/footer';
+import DModalHeader from '../src/components/header';
+import DModalFooter from '../src/components/footer';
 import DIcon from '../../icon/src/icon';
 
 describe('d-modal', () => {
diff --git a/packages/devui-vue/devui/modal/index.ts b/packages/devui-vue/devui/modal/index.ts
index 54d40b84cc..a0e606eb9f 100644
--- a/packages/devui-vue/devui/modal/index.ts
+++ b/packages/devui-vue/devui/modal/index.ts
@@ -1,11 +1,13 @@
 import type { App } from 'vue';
 import Modal from './src/modal';
-import Header from './src/header';
-import Body from './src/body';
-import Footer from './src/footer';
+import Header from './src/components/header';
+import Body from './src/components/body';
+import Footer from './src/components/footer';
 import { ModalService } from './src/services/modal-service';
 import { inBrowser } from '../shared/util/common-var';
 
+export * from './src/modal-types';
+
 export { Modal };
 
 export default {
diff --git a/packages/devui-vue/devui/modal/src/body.tsx b/packages/devui-vue/devui/modal/src/components/body.tsx
similarity index 100%
rename from packages/devui-vue/devui/modal/src/body.tsx
rename to packages/devui-vue/devui/modal/src/components/body.tsx
diff --git a/packages/devui-vue/devui/modal/src/footer.tsx b/packages/devui-vue/devui/modal/src/components/footer.tsx
similarity index 100%
rename from packages/devui-vue/devui/modal/src/footer.tsx
rename to packages/devui-vue/devui/modal/src/components/footer.tsx
diff --git a/packages/devui-vue/devui/modal/src/header.tsx b/packages/devui-vue/devui/modal/src/components/header.tsx
similarity index 100%
rename from packages/devui-vue/devui/modal/src/header.tsx
rename to packages/devui-vue/devui/modal/src/components/header.tsx
diff --git a/packages/devui-vue/devui/modal/src/use-modal.ts b/packages/devui-vue/devui/modal/src/composables/use-modal.ts
similarity index 82%
rename from packages/devui-vue/devui/modal/src/use-modal.ts
rename to packages/devui-vue/devui/modal/src/composables/use-modal.ts
index 0b7f0a7be5..985f15b8b7 100644
--- a/packages/devui-vue/devui/modal/src/use-modal.ts
+++ b/packages/devui-vue/devui/modal/src/composables/use-modal.ts
@@ -1,4 +1,4 @@
-import { ModalProps, EmitEventFn, UseModalFn } from './modal-types';
+import { ModalProps, EmitEventFn, UseModalFn } from '../modal-types';
 
 export function useModal(props: ModalProps, emit: EmitEventFn): UseModalFn {
   function close(): void {
diff --git a/packages/devui-vue/devui/modal/src/use-moveable.ts b/packages/devui-vue/devui/modal/src/composables/use-moveable.ts
similarity index 100%
rename from packages/devui-vue/devui/modal/src/use-moveable.ts
rename to packages/devui-vue/devui/modal/src/composables/use-moveable.ts
diff --git a/packages/devui-vue/devui/modal/src/modal.tsx b/packages/devui-vue/devui/modal/src/modal.tsx
index 9f217468ad..bbcd5ad785 100644
--- a/packages/devui-vue/devui/modal/src/modal.tsx
+++ b/packages/devui-vue/devui/modal/src/modal.tsx
@@ -2,9 +2,9 @@ import { defineComponent, toRefs, Transition } from 'vue';
 import { modalProps, ModalProps } from './modal-types';
 import { Icon } from '../../icon';
 import { FixedOverlay } from '../../overlay';
-import { useModal } from './use-modal';
-import DModalHeader from './header';
-import DModalBody from './body';
+import { useModal } from './composables/use-modal';
+import DModalHeader from './components/header';
+import DModalBody from './components/body';
 import './modal.scss';
 
 export default defineComponent({

From 75d0fe931798b0f444e08eb7e809047d5c0f0ed1 Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Fri, 8 Apr 2022 18:32:17 +0800
Subject: [PATCH 3/9] =?UTF-8?q?refactor(tag-input):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/auto-complete/src/auto-complete.tsx  | 3 ++-
 packages/devui-vue/devui/slider/index.ts                      | 4 +---
 .../devui/tag-input/src/{remove-btn.tsx => icon-remove.tsx}   | 0
 packages/devui-vue/devui/tag-input/src/tag-input.tsx          | 2 +-
 4 files changed, 4 insertions(+), 5 deletions(-)
 rename packages/devui-vue/devui/tag-input/src/{remove-btn.tsx => icon-remove.tsx} (100%)

diff --git a/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx b/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx
index a62dc6b4a8..b0c5fa13ec 100644
--- a/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx
+++ b/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx
@@ -6,10 +6,11 @@ import useInputHandle from './composables/use-input-handle';
 import useSelectHandle from './composables/use-select-handle';
 import useLazyHandle from './composables/use-lazy-handle';
 import useKeyBoardHandle from './composables/use-keyboard-select';
-import './auto-complete.scss';
 import DAutoCompleteDropdown from './components/dropdown';
 import ClickOutside from '../../shared/devui-directive/clickoutside';
 import { FlexibleOverlay } from '../../overlay/src/flexible-overlay';
+import './auto-complete.scss';
+
 export default defineComponent({
   name: 'DAutoComplete',
   directives: { ClickOutside },
diff --git a/packages/devui-vue/devui/slider/index.ts b/packages/devui-vue/devui/slider/index.ts
index 4cc99a4613..98ee2c15ef 100644
--- a/packages/devui-vue/devui/slider/index.ts
+++ b/packages/devui-vue/devui/slider/index.ts
@@ -1,9 +1,7 @@
 import type { App } from 'vue';
 import Slider from './src/slider';
 
-Slider.install = function (app: App): void {
-  app.component(Slider.name, Slider);
-};
+export * from './src/slider-types';
 
 export { Slider };
 
diff --git a/packages/devui-vue/devui/tag-input/src/remove-btn.tsx b/packages/devui-vue/devui/tag-input/src/icon-remove.tsx
similarity index 100%
rename from packages/devui-vue/devui/tag-input/src/remove-btn.tsx
rename to packages/devui-vue/devui/tag-input/src/icon-remove.tsx
diff --git a/packages/devui-vue/devui/tag-input/src/tag-input.tsx b/packages/devui-vue/devui/tag-input/src/tag-input.tsx
index 097930fd07..f5aeaa732e 100644
--- a/packages/devui-vue/devui/tag-input/src/tag-input.tsx
+++ b/packages/devui-vue/devui/tag-input/src/tag-input.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, nextTick, watch, SetupContext } from 'vue';
-import removeBtnSvg from './remove-btn';
+import removeBtnSvg from './icon-remove';
 import { Suggestion, TagInputProps, tagInputProps } from './tag-input-types';
 import './tag-input.scss';
 

From 99cae1e024915f298edaf92997bcb4468900a7fb Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Fri, 8 Apr 2022 18:42:04 +0800
Subject: [PATCH 4/9] =?UTF-8?q?refactor(avatar):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/avatar/src/avatar.tsx                | 4 ++--
 .../devui/avatar/src/{ => components}/avatar-body-icon.tsx    | 0
 .../devui/avatar/src/{ => components}/avatar-nobody-icon.tsx  | 0
 .../devui-vue/devui/avatar/src/{ => components}/icon-body.tsx | 2 +-
 .../devui/avatar/src/{ => components}/icon-nobody.tsx         | 2 +-
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/devui-vue/devui/avatar/src/{ => components}/avatar-body-icon.tsx (100%)
 rename packages/devui-vue/devui/avatar/src/{ => components}/avatar-nobody-icon.tsx (100%)
 rename packages/devui-vue/devui/avatar/src/{ => components}/icon-body.tsx (95%)
 rename packages/devui-vue/devui/avatar/src/{ => components}/icon-nobody.tsx (99%)

diff --git a/packages/devui-vue/devui/avatar/src/avatar.tsx b/packages/devui-vue/devui/avatar/src/avatar.tsx
index 963a286aa8..d461773e16 100644
--- a/packages/devui-vue/devui/avatar/src/avatar.tsx
+++ b/packages/devui-vue/devui/avatar/src/avatar.tsx
@@ -1,7 +1,7 @@
 import { defineComponent, watch, toRefs, ref } from 'vue';
 
-import AvatarBodyIcon from './avatar-body-icon';
-import AvatarNoBodyIcon from './avatar-nobody-icon';
+import AvatarBodyIcon from './components/avatar-body-icon';
+import AvatarNoBodyIcon from './components/avatar-nobody-icon';
 import { AvatarProps, avatarProps } from './avatar-types';
 
 import './avatar.scss';
diff --git a/packages/devui-vue/devui/avatar/src/avatar-body-icon.tsx b/packages/devui-vue/devui/avatar/src/components/avatar-body-icon.tsx
similarity index 100%
rename from packages/devui-vue/devui/avatar/src/avatar-body-icon.tsx
rename to packages/devui-vue/devui/avatar/src/components/avatar-body-icon.tsx
diff --git a/packages/devui-vue/devui/avatar/src/avatar-nobody-icon.tsx b/packages/devui-vue/devui/avatar/src/components/avatar-nobody-icon.tsx
similarity index 100%
rename from packages/devui-vue/devui/avatar/src/avatar-nobody-icon.tsx
rename to packages/devui-vue/devui/avatar/src/components/avatar-nobody-icon.tsx
diff --git a/packages/devui-vue/devui/avatar/src/icon-body.tsx b/packages/devui-vue/devui/avatar/src/components/icon-body.tsx
similarity index 95%
rename from packages/devui-vue/devui/avatar/src/icon-body.tsx
rename to packages/devui-vue/devui/avatar/src/components/icon-body.tsx
index 89d084f82d..221811df27 100644
--- a/packages/devui-vue/devui/avatar/src/icon-body.tsx
+++ b/packages/devui-vue/devui/avatar/src/components/icon-body.tsx
@@ -1,4 +1,4 @@
-import type { IconPropsType } from "./avatar-types";
+import type { IconPropsType } from "../avatar-types";
 
 export const IconBody = (props: IconPropsType): JSX.Element => {
   const { width, height } = props;
diff --git a/packages/devui-vue/devui/avatar/src/icon-nobody.tsx b/packages/devui-vue/devui/avatar/src/components/icon-nobody.tsx
similarity index 99%
rename from packages/devui-vue/devui/avatar/src/icon-nobody.tsx
rename to packages/devui-vue/devui/avatar/src/components/icon-nobody.tsx
index a287a48688..3a0203eb1f 100644
--- a/packages/devui-vue/devui/avatar/src/icon-nobody.tsx
+++ b/packages/devui-vue/devui/avatar/src/components/icon-nobody.tsx
@@ -1,4 +1,4 @@
-import type { IconPropsType } from "./avatar-types";
+import type { IconPropsType } from "../avatar-types";
 
 export const IconNobody = (props: IconPropsType): JSX.Element => {
   const { width, height } = props;

From e7b35de639190b03707bceb852ce1257ecebf8a9 Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Fri, 8 Apr 2022 18:48:14 +0800
Subject: [PATCH 5/9] =?UTF-8?q?refactor(skeleton):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../skeleton/__tests__/skeleton-item.spec.ts  |  2 +-
 packages/devui-vue/devui/skeleton/index.ts    |  8 +-
 .../skeleton-item-types.ts}                   | 16 ++--
 .../skeleton-item.scss}                       |  0
 .../skeleton/src/components/skeleton-item.tsx | 95 +++++++++++++++++++
 .../devui/skeleton/src/item/item.tsx          | 87 -----------------
 .../devui/skeleton/src/skeleton-types.ts      | 24 ++---
 .../devui-vue/devui/skeleton/src/skeleton.tsx | 83 ++++++++--------
 8 files changed, 162 insertions(+), 153 deletions(-)
 rename packages/devui-vue/devui/skeleton/src/{item/item-types.ts => components/skeleton-item-types.ts} (82%)
 rename packages/devui-vue/devui/skeleton/src/{item/item.scss => components/skeleton-item.scss} (100%)
 create mode 100644 packages/devui-vue/devui/skeleton/src/components/skeleton-item.tsx
 delete mode 100644 packages/devui-vue/devui/skeleton/src/item/item.tsx

diff --git a/packages/devui-vue/devui/skeleton/__tests__/skeleton-item.spec.ts b/packages/devui-vue/devui/skeleton/__tests__/skeleton-item.spec.ts
index 4e5db3877c..14f5680848 100644
--- a/packages/devui-vue/devui/skeleton/__tests__/skeleton-item.spec.ts
+++ b/packages/devui-vue/devui/skeleton/__tests__/skeleton-item.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import DSkeletonItem from '../src/item/item';
+import DSkeletonItem from '../src/components/skeleton-item';
 
 describe('skeleton-item module', () => {
   it('render skeleton-item-avatar', () => {
diff --git a/packages/devui-vue/devui/skeleton/index.ts b/packages/devui-vue/devui/skeleton/index.ts
index f33a01d73c..27c56f1e68 100644
--- a/packages/devui-vue/devui/skeleton/index.ts
+++ b/packages/devui-vue/devui/skeleton/index.ts
@@ -1,10 +1,10 @@
 import type { App } from 'vue';
 import Skeleton from './src/skeleton';
-import SkeletonItem from './src/item/item';
+import SkeletonItem from './src/components/skeleton-item';
 
 export * from './src/skeleton-types';
 
-export { Skeleton,SkeletonItem };
+export { Skeleton, SkeletonItem };
 
 export default {
   title: 'Skeleton 骨架屏',
@@ -12,6 +12,6 @@ export default {
   status: '100%',
   install(app: App): void {
     app.component(Skeleton.name, Skeleton);
-  app.component(SkeletonItem.name, SkeletonItem);
-  }
+    app.component(SkeletonItem.name, SkeletonItem);
+  },
 };
diff --git a/packages/devui-vue/devui/skeleton/src/item/item-types.ts b/packages/devui-vue/devui/skeleton/src/components/skeleton-item-types.ts
similarity index 82%
rename from packages/devui-vue/devui/skeleton/src/item/item-types.ts
rename to packages/devui-vue/devui/skeleton/src/components/skeleton-item-types.ts
index bc83f594e6..e84e86ad2b 100644
--- a/packages/devui-vue/devui/skeleton/src/item/item-types.ts
+++ b/packages/devui-vue/devui/skeleton/src/components/skeleton-item-types.ts
@@ -5,35 +5,35 @@ export type ModelValue = number | string;
 export const itemProps = {
   row: {
     type: Number,
-    default: 0
+    default: 0,
   },
   animate: {
     type: Boolean,
-    default: true
+    default: true,
   },
   round: {
     type: Boolean,
-    default: false
+    default: false,
   },
   loading: {
     type: Boolean,
-    default: true
+    default: true,
   },
   avatarShape: {
     type: String as PropType<'round' | 'square'>,
-    default: 'round'
+    default: 'round',
   },
   titleWidth: {
     type: [String, Number] as PropType<ModelValue>,
-    default: '40%'
+    default: '40%',
   },
   rowWidth: {
     type: [Number, String, Array] as PropType<number | string | Array<number | string>>,
-    default: ['100%']
+    default: ['100%'],
   },
   shape: {
     type: String as PropType<'avatar' | 'image' | 'title' | 'paragraph' | 'button'>,
-  }
+  },
 } as const;
 
 export type ItemProps = ExtractPropTypes<typeof itemProps>;
diff --git a/packages/devui-vue/devui/skeleton/src/item/item.scss b/packages/devui-vue/devui/skeleton/src/components/skeleton-item.scss
similarity index 100%
rename from packages/devui-vue/devui/skeleton/src/item/item.scss
rename to packages/devui-vue/devui/skeleton/src/components/skeleton-item.scss
diff --git a/packages/devui-vue/devui/skeleton/src/components/skeleton-item.tsx b/packages/devui-vue/devui/skeleton/src/components/skeleton-item.tsx
new file mode 100644
index 0000000000..0d05ad8f8f
--- /dev/null
+++ b/packages/devui-vue/devui/skeleton/src/components/skeleton-item.tsx
@@ -0,0 +1,95 @@
+import { defineComponent } from 'vue';
+import { itemProps, ItemProps } from './skeleton-item-types';
+import './skeleton-item.scss';
+
+export default defineComponent({
+  name: 'DSkeletonItem',
+  props: itemProps,
+  setup(props: ItemProps, ctx) {
+    const { slots } = ctx;
+
+    function renderAnimate(isAnimated) {
+      return isAnimated ? 'devui-skeleton__animated' : '';
+    }
+
+    function renderShapeParagraph(rowNum, rowWidth, round) {
+      const arr = [];
+
+      function pushIntoArray(type) {
+        for (let index = 0; index < rowNum; index++) {
+          arr.push({ width: type });
+        }
+      }
+      (function handleRowWidth() {
+        if (rowWidth instanceof Array) {
+          for (let index = 0; index < rowNum; index++) {
+            if (rowWidth[index]) {
+              switch (typeof rowWidth[index]) {
+                case 'string':
+                  arr.push({ width: rowWidth[index] });
+                  break;
+                case 'number':
+                  arr.push({ width: `${rowWidth[index]}px` });
+              }
+            } else {
+              arr.push({ width: 1 });
+            }
+          }
+        } else {
+          switch (typeof rowWidth) {
+            case 'string':
+              pushIntoArray(rowWidth);
+              break;
+            case 'number':
+              pushIntoArray(`${rowWidth}px`);
+              break;
+          }
+        }
+      })();
+
+      return (
+        <div class={`devui-skeleton__shape__paragraph ${renderAnimate(props.animate)}`} {...ctx.attrs}>
+          {arr.map((item) => {
+            return (
+              <div class="devui-skeleton__shape__paragraph__item" style={round ? 'border-radius: 1em;' : '' + `width: ${item.width}`} />
+            );
+          })}
+        </div>
+      );
+    }
+
+    function renderAvatarStyle(avatarShape) {
+      function renderAvatarShape() {
+        return avatarShape === 'square' ? '' : 'border-radius:50%;';
+      }
+
+      return renderAvatarShape(avatarShape);
+    }
+
+    return () => {
+      if (props.loading && props.shape) {
+        switch (props.shape) {
+          case 'avatar':
+            return (
+              <>
+                <div
+                  class={`devui-skeleton__shape__avatar ${renderAnimate(props.animate)}`}
+                  style={renderAvatarStyle(props.avatarShape)}
+                  {...ctx.attrs}
+                />
+              </>
+            );
+          case 'paragraph':
+            return <>{renderShapeParagraph(props.row, props.rowWidth, props.round)}</>;
+          default:
+            return (
+              <>
+                <div class={`devui-skeleton__shape__${props.shape} ${renderAnimate(props.animate)}`} {...ctx.attrs} />
+              </>
+            );
+        }
+      }
+      return <>{slots.default?.()}</>;
+    };
+  },
+});
diff --git a/packages/devui-vue/devui/skeleton/src/item/item.tsx b/packages/devui-vue/devui/skeleton/src/item/item.tsx
deleted file mode 100644
index e334d999df..0000000000
--- a/packages/devui-vue/devui/skeleton/src/item/item.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import './item.scss';
-
-import { defineComponent } from 'vue';
-import { itemProps, ItemProps } from './item-types';
-
-export default defineComponent({
-  name: 'DSkeletonItem',
-  props: itemProps,
-  setup(props: ItemProps, ctx) {
-    const { slots } = ctx;
-
-    function renderAnimate(isAnimated) {
-      return isAnimated ? 'devui-skeleton__animated' : '';
-    }
-
-    function renderShapeParagraph(rowNum, rowWidth, round) {
-      const arr = [];
-
-      function pushIntoArray(type) {
-        for (let index = 0; index < rowNum; index++) {
-          arr.push({ width: type });
-        }
-      }
-      (function handleRowWidth() {
-        if (rowWidth instanceof Array) {
-          for (let index = 0; index < rowNum; index++) {
-            if (rowWidth[index]) {
-              switch (typeof rowWidth[index]) {
-              case 'string':
-                arr.push({ width: rowWidth[index] });
-                break;
-              case 'number':
-                arr.push({ width: `${rowWidth[index]}px` });
-              }
-            } else {
-              arr.push({ width: 1 });
-            }
-          }
-        } else {
-          switch (typeof rowWidth) {
-          case 'string':
-            pushIntoArray(rowWidth);
-            break;
-          case 'number':
-            pushIntoArray(`${rowWidth}px`);
-            break;
-          }
-        }
-      })();
-
-      return <div class={`devui-skeleton__shape__paragraph ${renderAnimate(props.animate)}`} {...ctx.attrs}>{
-        arr.map(item => {
-          return <div class="devui-skeleton__shape__paragraph__item" style={round ? 'border-radius: 1em;' : '' + `width: ${item.width}`} />;
-        })
-      }</div>;
-    }
-
-    function renderAvatarStyle(avatarShape) {
-      function renderAvatarShape() {
-        return avatarShape === 'square' ? '' : 'border-radius:50%;';
-      }
-
-      return (renderAvatarShape(avatarShape));
-    }
-
-    return () => {
-      if (props.loading && props.shape) {
-        switch (props.shape) {
-        case 'avatar':
-          return <>
-            <div class={`devui-skeleton__shape__avatar ${renderAnimate(props.animate)}`}
-              style={renderAvatarStyle(props.avatarShape)} {...ctx.attrs} />
-          </>;
-        case 'paragraph':
-          return <>
-            {renderShapeParagraph(props.row, props.rowWidth, props.round)}
-          </>;
-        default:
-          return <>
-            <div class={`devui-skeleton__shape__${props.shape} ${renderAnimate(props.animate)}`} {...ctx.attrs} />
-          </>;
-        }
-      }
-      return <>{slots.default?.()}</>;
-    };
-  }
-});
diff --git a/packages/devui-vue/devui/skeleton/src/skeleton-types.ts b/packages/devui-vue/devui/skeleton/src/skeleton-types.ts
index 3404de303b..b4ee824f02 100644
--- a/packages/devui-vue/devui/skeleton/src/skeleton-types.ts
+++ b/packages/devui-vue/devui/skeleton/src/skeleton-types.ts
@@ -5,48 +5,48 @@ export type ModelValue = number | string;
 export const skeletonProps = {
   row: {
     type: Number,
-    default: 0
+    default: 0,
   },
   animate: {
     type: Boolean,
-    default: true
+    default: true,
   },
   round: {
     type: Boolean,
-    default: false
+    default: false,
   },
   loading: {
     type: Boolean,
-    default: true
+    default: true,
   },
   avatar: {
     type: Boolean,
-    default: false
+    default: false,
   },
   title: {
     type: Boolean,
-    default: true
+    default: true,
   },
   paragraph: {
     type: Boolean,
-    default: true
+    default: true,
   },
   avatarSize: {
     type: [String, Number] as PropType<ModelValue>,
-    default: '40px'
+    default: '40px',
   },
   avatarShape: {
     type: String as PropType<'round' | 'square'>,
-    default: 'round'
+    default: 'round',
   },
   titleWidth: {
     type: [String, Number] as PropType<ModelValue>,
-    default: '40%'
+    default: '40%',
   },
   rowWidth: {
     type: [Number, String, Array] as PropType<number | string | Array<number | string>>,
-    default: ['100%']
-  }
+    default: ['100%'],
+  },
 } as const;
 
 export type SkeletonProps = ExtractPropTypes<typeof skeletonProps>;
diff --git a/packages/devui-vue/devui/skeleton/src/skeleton.tsx b/packages/devui-vue/devui/skeleton/src/skeleton.tsx
index 871d95092d..afe34fadfc 100644
--- a/packages/devui-vue/devui/skeleton/src/skeleton.tsx
+++ b/packages/devui-vue/devui/skeleton/src/skeleton.tsx
@@ -1,7 +1,6 @@
-import './skeleton.scss';
-
 import { defineComponent } from 'vue';
 import { skeletonProps, SkeletonProps } from './skeleton-types';
+import './skeleton.scss';
 
 export default defineComponent({
   name: 'DSkeleton',
@@ -28,11 +27,11 @@ export default defineComponent({
           for (let index = 0; index < rowNum; index++) {
             if (rowWidth[index]) {
               switch (typeof rowWidth[index]) {
-              case 'string':
-                arr.push({ width: rowWidth[index] });
-                break;
-              case 'number':
-                arr.push({ width: `${rowWidth[index]}px` });
+                case 'string':
+                  arr.push({ width: rowWidth[index] });
+                  break;
+                case 'number':
+                  arr.push({ width: `${rowWidth[index]}px` });
               }
             } else {
               arr.push({ width: 1 });
@@ -40,21 +39,23 @@ export default defineComponent({
           }
         } else {
           switch (typeof rowWidth) {
-          case 'string':
-            pushIntoArray(rowWidth);
-            break;
-          case 'number':
-            pushIntoArray(`${rowWidth}px`);
-            break;
+            case 'string':
+              pushIntoArray(rowWidth);
+              break;
+            case 'number':
+              pushIntoArray(`${rowWidth}px`);
+              break;
           }
         }
       })();
 
-      return <div class="devui-skeleton__paragraph" v-show={isShown}>{
-        arr.map(item => {
-          return <div class="devui-skeleton__item" style={round ? 'border-radius: 1em;' : '' + `width: ${item.width}`} />;
-        })
-      }</div>;
+      return (
+        <div class="devui-skeleton__paragraph" v-show={isShown}>
+          {arr.map((item) => {
+            return <div class="devui-skeleton__item" style={round ? 'border-radius: 1em;' : '' + `width: ${item.width}`} />;
+          })}
+        </div>
+      );
     }
 
     function renderAvatarStyle(avatarSize, avatarShape) {
@@ -63,49 +64,49 @@ export default defineComponent({
       }
       function renderAvatarSize() {
         switch (typeof avatarSize) {
-        case 'string':
-          return `width:${avatarSize};height:${avatarSize};`;
-        case 'number':
-          return `width:${avatarSize}px;height:${avatarSize}px;`;
+          case 'string':
+            return `width:${avatarSize};height:${avatarSize};`;
+          case 'number':
+            return `width:${avatarSize}px;height:${avatarSize}px;`;
         }
       }
 
-      return (renderAvatarSize(avatarSize) + renderAvatarShape(avatarShape));
+      return renderAvatarSize(avatarSize) + renderAvatarShape(avatarShape);
     }
     function renderTitle(isVisible, titleWidth, isRound) {
       function renderTitleWidth() {
         switch (typeof titleWidth) {
-        case 'string':
-          return `width: ${titleWidth};`;
-        case 'number':
-          return `width: ${titleWidth}px;`;
+          case 'string':
+            return `width: ${titleWidth};`;
+          case 'number':
+            return `width: ${titleWidth}px;`;
         }
       }
       function renderTitleVisibility() {
         return isVisible ? null : 'visibility: hidden;';
       }
 
-      return (renderTitleWidth(titleWidth) + renderBorderRadius(isRound) + renderTitleVisibility(isVisible));
+      return renderTitleWidth(titleWidth) + renderBorderRadius(isRound) + renderTitleVisibility(isVisible);
     }
     function renderDefaultSkeleton() {
-      return <>
-        <div class="devui-skeleton__avatar" v-show={props.avatar}>
-          <div class="avatar" style={renderAvatarStyle(props.avatarSize, props.avatarShape)} />
-        </div>
-        <div class="devui-skeleton__group">
-          <div class="devui-skeleton__title" style={renderTitle(props.title, props.titleWidth, props.round)} />
-          {renderParagraph(props.paragraph, props.row, props.rowWidth, props.round)}
-        </div>
-      </>;
+      return (
+        <>
+          <div class="devui-skeleton__avatar" v-show={props.avatar}>
+            <div class="avatar" style={renderAvatarStyle(props.avatarSize, props.avatarShape)} />
+          </div>
+          <div class="devui-skeleton__group">
+            <div class="devui-skeleton__title" style={renderTitle(props.title, props.titleWidth, props.round)} />
+            {renderParagraph(props.paragraph, props.row, props.rowWidth, props.round)}
+          </div>
+        </>
+      );
     }
 
     return () => {
       if (props.loading) {
-        return <div class={`devui-skeleton ${renderAnimate(props.animate)}`}>
-          {renderDefaultSkeleton()}
-        </div>;
+        return <div class={`devui-skeleton ${renderAnimate(props.animate)}`}>{renderDefaultSkeleton()}</div>;
       }
       return <>{slots.default?.()}</>;
     };
-  }
+  },
 });

From d5abf775814a0d3ad59d45ca0ee0d3ff49093824 Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Fri, 8 Apr 2022 18:51:28 +0800
Subject: [PATCH 6/9] =?UTF-8?q?refactor(timeline):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../types.ts => timeline-item-types.ts}       | 16 ++---
 .../index.tsx => timeline-item.tsx}           | 66 +++++++------------
 2 files changed, 33 insertions(+), 49 deletions(-)
 rename packages/devui-vue/devui/timeline/src/components/{timeline-item/types.ts => timeline-item-types.ts} (77%)
 rename packages/devui-vue/devui/timeline/src/components/{timeline-item/index.tsx => timeline-item.tsx} (56%)

diff --git a/packages/devui-vue/devui/timeline/src/components/timeline-item/types.ts b/packages/devui-vue/devui/timeline/src/components/timeline-item-types.ts
similarity index 77%
rename from packages/devui-vue/devui/timeline/src/components/timeline-item/types.ts
rename to packages/devui-vue/devui/timeline/src/components/timeline-item-types.ts
index b349f5e6a4..04485d7a7b 100644
--- a/packages/devui-vue/devui/timeline/src/components/timeline-item/types.ts
+++ b/packages/devui-vue/devui/timeline/src/components/timeline-item-types.ts
@@ -1,5 +1,5 @@
 import type { PropType, ExtractPropTypes } from 'vue';
-import type { LineStyle,TimePosition } from '../../timeline-types';
+import type { LineStyle, TimePosition } from '../timeline-types';
 export type Position = 'top' | 'bottom' | 'left' | 'right';
 export type Type = 'primary' | 'success' | 'warning' | 'error';
 export const timeAxisItemProps = {
@@ -8,31 +8,31 @@ export const timeAxisItemProps = {
   },
   // 可选，自定义时间圈颜色
   dotColor: {
-    type: String
+    type: String,
   },
   // 分界线的样式
   lineStyle: {
     type: String as PropType<LineStyle>,
-    default: 'solid'
+    default: 'solid',
   },
   // 分界线的样式
   lineColor: {
-    type: String
+    type: String,
   },
   // 分界线的样式
   position: {
-    type: String as PropType<Position>
+    type: String as PropType<Position>,
   },
   // 设置时间位置
   timePosition: {
     type: String as PropType<TimePosition>,
-    default: 'left'
+    default: 'left',
   },
   // 时间点类型
   type: {
     type: String as PropType<Type>,
-    default: 'primary'
-  }
+    default: 'primary',
+  },
 } as const;
 
 export type TimelineItemProps = ExtractPropTypes<typeof timeAxisItemProps>;
diff --git a/packages/devui-vue/devui/timeline/src/components/timeline-item/index.tsx b/packages/devui-vue/devui/timeline/src/components/timeline-item.tsx
similarity index 56%
rename from packages/devui-vue/devui/timeline/src/components/timeline-item/index.tsx
rename to packages/devui-vue/devui/timeline/src/components/timeline-item.tsx
index 9496636707..c84d07d075 100644
--- a/packages/devui-vue/devui/timeline/src/components/timeline-item/index.tsx
+++ b/packages/devui-vue/devui/timeline/src/components/timeline-item.tsx
@@ -1,33 +1,21 @@
-import {defineComponent, inject} from 'vue';
-import type {TimelineRootType} from '../../timeline-types';
-import DIcon from '../../../../icon/src/icon';
-import {timeAxisItemProps, TimelineItemProps, Type} from './types';
+import { defineComponent, inject } from 'vue';
+import type { TimelineRootType } from '../timeline-types';
+import DIcon from '../../../icon/src/icon';
+import { timeAxisItemProps, TimelineItemProps, Type } from './timeline-item-types';
 
 export default defineComponent({
   name: 'DTimelineItem',
-  components: {DIcon},
+  components: { DIcon },
   props: timeAxisItemProps,
   emits: [],
   setup(props: TimelineItemProps, ctx) {
     const timeAxis: TimelineRootType = inject('timeAxis');
     const itemClass = 'devui-timeline-item';
     const renderTime = () => {
-      return (
-        <div class={`${itemClass}-time`}>
-          {
-            ctx.slots.time
-              ? ctx.slots.time?.()
-              : props.time
-          }
-        </div>
-      );
+      return <div class={`${itemClass}-time`}>{ctx.slots.time ? ctx.slots.time?.() : props.time}</div>;
     };
     const renderContent = () => {
-      return (
-        <div class={`${itemClass}-content`}>
-          {ctx.slots.default?.(props)}
-        </div>
-      );
+      return <div class={`${itemClass}-content`}>{ctx.slots.default?.(props)}</div>;
     };
     const renderPosition = (types: string[]) => {
       // 如果有设置position的话，就直接用position的内容
@@ -47,43 +35,39 @@ export default defineComponent({
       if (type === 'primary') {
         return '';
       }
-      return <i class={`icon-${type === 'success' ? 'right' : type}-o`}/>;
+      return <i class={`icon-${type === 'success' ? 'right' : type}-o`} />;
     };
     const renderDot = () => {
       if (ctx.slots.dot) {
-        return <div style={{color: props.dotColor}} class={`${itemClass}-dot`}> {ctx.slots.dot?.()}</div>;
+        return (
+          <div style={{ color: props.dotColor }} class={`${itemClass}-dot`}>
+            {' '}
+            {ctx.slots.dot?.()}
+          </div>
+        );
       } else {
-        return (<div class={`${itemClass}-dot ${itemClass}-type-${props.type}`}
-          style={{borderColor: props.dotColor}}
-        >
-          {setTypeIcon(props.type)}
-        </div>);
+        return (
+          <div class={`${itemClass}-dot ${itemClass}-type-${props.type}`} style={{ borderColor: props.dotColor }}>
+            {setTypeIcon(props.type)}
+          </div>
+        );
       }
     };
 
     return () => {
       return (
         <div class={itemClass}>
-          <div class={`${itemClass}-data-left ${itemClass}-data-top`}>
-            {renderPosition(['top', 'left'])}
-          </div>
+          <div class={`${itemClass}-data-left ${itemClass}-data-top`}>{renderPosition(['top', 'left'])}</div>
           <div class={`${itemClass}-axis`}>
-            {
-              renderDot()
-            }
-            {(timeAxis.props.direction === 'vertical' && props.timePosition === 'bottom') ? renderTime() : ''}
-            <div class={`${itemClass}-line ${itemClass}-line-style-${props.lineStyle}`}
-              style={{borderColor: props.lineColor}}
-            >
+            {renderDot()}
+            {timeAxis.props.direction === 'vertical' && props.timePosition === 'bottom' ? renderTime() : ''}
+            <div class={`${itemClass}-line ${itemClass}-line-style-${props.lineStyle}`} style={{ borderColor: props.lineColor }}>
               {ctx.slots.extra ? <div class={`${itemClass}-line-extra`}>{ctx.slots.extra()}</div> : ''}
             </div>
           </div>
-          <div class={`${itemClass}-data-right ${itemClass}-data-bottom`}>
-            {renderPosition(['right', 'bottom'])}
-          </div>
+          <div class={`${itemClass}-data-right ${itemClass}-data-bottom`}>{renderPosition(['right', 'bottom'])}</div>
         </div>
-
       );
     };
-  }
+  },
 });

From d282c3f5ce28bf887bd032a8171b6c8cbcf54c0b Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Fri, 8 Apr 2022 18:54:08 +0800
Subject: [PATCH 7/9] =?UTF-8?q?refactor(grid):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/grid/__tests__/grid.spec.tsx         | 2 +-
 packages/devui-vue/devui/grid/src/col.tsx                     | 2 +-
 .../devui-vue/devui/grid/src/{ => composables}/use-grid.ts    | 2 +-
 .../devui-vue/devui/grid/src/{ => composables}/use-screen.ts  | 0
 packages/devui-vue/devui/grid/src/row.tsx                     | 4 ++--
 5 files changed, 5 insertions(+), 5 deletions(-)
 rename packages/devui-vue/devui/grid/src/{ => composables}/use-grid.ts (98%)
 rename packages/devui-vue/devui/grid/src/{ => composables}/use-screen.ts (100%)

diff --git a/packages/devui-vue/devui/grid/__tests__/grid.spec.tsx b/packages/devui-vue/devui/grid/__tests__/grid.spec.tsx
index d25cfd8995..9cd040044c 100644
--- a/packages/devui-vue/devui/grid/__tests__/grid.spec.tsx
+++ b/packages/devui-vue/devui/grid/__tests__/grid.spec.tsx
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { Row, Col } from '../index';
 import { Justify, Align, ColProps } from '../src/grid-types';
-import { screenMedias } from '../src/use-screen';
+import { screenMedias } from '../src/composables/use-screen';
 
 describe('d-row', () => {
   window.matchMedia = jest.fn().mockImplementation(query => {
diff --git a/packages/devui-vue/devui/grid/src/col.tsx b/packages/devui-vue/devui/grid/src/col.tsx
index 7ce0446ad3..8c991f5ed7 100644
--- a/packages/devui-vue/devui/grid/src/col.tsx
+++ b/packages/devui-vue/devui/grid/src/col.tsx
@@ -1,6 +1,6 @@
 import { defineComponent, computed, CSSProperties, Ref, inject } from 'vue';
 import { colProps, ColProps } from './grid-types';
-import { useSize, CLASS_PREFIX, useColClassNames } from './use-grid';
+import { useSize, CLASS_PREFIX, useColClassNames } from './composables/use-grid';
 import './col.scss';
 
 
diff --git a/packages/devui-vue/devui/grid/src/use-grid.ts b/packages/devui-vue/devui/grid/src/composables/use-grid.ts
similarity index 98%
rename from packages/devui-vue/devui/grid/src/use-grid.ts
rename to packages/devui-vue/devui/grid/src/composables/use-grid.ts
index 7b28402bed..6b23c61ebc 100644
--- a/packages/devui-vue/devui/grid/src/use-grid.ts
+++ b/packages/devui-vue/devui/grid/src/composables/use-grid.ts
@@ -1,5 +1,5 @@
 import { computed, ComputedRef } from 'vue';
-import { ScreenSizes, ColPropsBaseClass, screenSizes, colPropsBaseClass } from './grid-types';
+import { ScreenSizes, ColPropsBaseClass, screenSizes, colPropsBaseClass } from '../grid-types';
 
 export const CLASS_PREFIX = 'devui-col';
 
diff --git a/packages/devui-vue/devui/grid/src/use-screen.ts b/packages/devui-vue/devui/grid/src/composables/use-screen.ts
similarity index 100%
rename from packages/devui-vue/devui/grid/src/use-screen.ts
rename to packages/devui-vue/devui/grid/src/composables/use-screen.ts
diff --git a/packages/devui-vue/devui/grid/src/row.tsx b/packages/devui-vue/devui/grid/src/row.tsx
index cb77432bc5..6530383167 100644
--- a/packages/devui-vue/devui/grid/src/row.tsx
+++ b/packages/devui-vue/devui/grid/src/row.tsx
@@ -1,7 +1,7 @@
 import { defineComponent, computed, ref, Ref, CSSProperties, onMounted, onUnmounted, provide } from 'vue';
 import { rowProps, RowProps } from './grid-types';
-import { formatClass } from './use-grid';
-import { responesScreen, Screen, RESULT_SCREEN, removeSubscribeCb } from './use-screen';
+import { formatClass } from './composables/use-grid';
+import { responesScreen, Screen, RESULT_SCREEN, removeSubscribeCb } from './composables/use-screen';
 import './row.scss';
 
 const CLASS_PREFIX = 'devui-row';

From 20402fab9ec295b0dbd48b1018d84b88b43075cd Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Fri, 8 Apr 2022 19:01:02 +0800
Subject: [PATCH 8/9] =?UTF-8?q?refactor(splitter):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/splitter/__tests__/splitter.spec.ts        |  2 +-
 packages/devui-vue/devui/splitter/index.ts           |  2 +-
 .../splitter-bar-types.tsx}                          |  2 +-
 .../splitter/src/{ => components}/splitter-bar.scss  |  0
 .../splitter/src/{ => components}/splitter-bar.tsx   | 12 ++++++------
 .../splitter-pane-types.tsx}                         |  2 +-
 .../splitter/src/{ => components}/splitter-pane.scss |  0
 .../splitter/src/{ => components}/splitter-pane.tsx  |  8 ++++----
 .../splitter/src/{util => }/d-resize-directive.ts    |  0
 .../devui-vue/devui/splitter/src/splitter-store.ts   |  2 +-
 packages/devui-vue/devui/splitter/src/splitter.tsx   |  2 +-
 11 files changed, 16 insertions(+), 16 deletions(-)
 rename packages/devui-vue/devui/splitter/src/{splitter-bar-type.tsx => components/splitter-bar-types.tsx} (92%)
 rename packages/devui-vue/devui/splitter/src/{ => components}/splitter-bar.scss (100%)
 rename packages/devui-vue/devui/splitter/src/{ => components}/splitter-bar.tsx (95%)
 rename packages/devui-vue/devui/splitter/src/{splitter-pane-type.tsx => components/splitter-pane-types.tsx} (96%)
 rename packages/devui-vue/devui/splitter/src/{ => components}/splitter-pane.scss (100%)
 rename packages/devui-vue/devui/splitter/src/{ => components}/splitter-pane.tsx (94%)
 rename packages/devui-vue/devui/splitter/src/{util => }/d-resize-directive.ts (100%)

diff --git a/packages/devui-vue/devui/splitter/__tests__/splitter.spec.ts b/packages/devui-vue/devui/splitter/__tests__/splitter.spec.ts
index 8e0168bf5c..b9efc62adb 100644
--- a/packages/devui-vue/devui/splitter/__tests__/splitter.spec.ts
+++ b/packages/devui-vue/devui/splitter/__tests__/splitter.spec.ts
@@ -1,7 +1,7 @@
 import { mount, VueWrapper } from '@vue/test-utils';
 import { ComponentPublicInstance, ref } from 'vue';
 import DSplitter from '../src/splitter';
-import DSplitterPane from '../src/splitter-pane';
+import DSplitterPane from '../src/components/splitter-pane';
 
 // 因为 jest 不支持 ResizeObserver，需要 mock 实现
 window.ResizeObserver =
diff --git a/packages/devui-vue/devui/splitter/index.ts b/packages/devui-vue/devui/splitter/index.ts
index 690bf95840..0c76fb0233 100644
--- a/packages/devui-vue/devui/splitter/index.ts
+++ b/packages/devui-vue/devui/splitter/index.ts
@@ -1,6 +1,6 @@
 import type { App } from 'vue';
 import Splitter from './src/splitter';
-import SplitterPane from './src/splitter-pane';
+import SplitterPane from './src/components/splitter-pane';
 
 export * from './src/splitter-types';
 
diff --git a/packages/devui-vue/devui/splitter/src/splitter-bar-type.tsx b/packages/devui-vue/devui/splitter/src/components/splitter-bar-types.tsx
similarity index 92%
rename from packages/devui-vue/devui/splitter/src/splitter-bar-type.tsx
rename to packages/devui-vue/devui/splitter/src/components/splitter-bar-types.tsx
index 237f32ed3b..ce16bb6471 100644
--- a/packages/devui-vue/devui/splitter/src/splitter-bar-type.tsx
+++ b/packages/devui-vue/devui/splitter/src/components/splitter-bar-types.tsx
@@ -1,5 +1,5 @@
 import { PropType, ExtractPropTypes } from 'vue';
-import { SplitterOrientation } from './splitter-types';
+import { SplitterOrientation } from '../splitter-types';
 
 export const splitterBarProps = {
   /**
diff --git a/packages/devui-vue/devui/splitter/src/splitter-bar.scss b/packages/devui-vue/devui/splitter/src/components/splitter-bar.scss
similarity index 100%
rename from packages/devui-vue/devui/splitter/src/splitter-bar.scss
rename to packages/devui-vue/devui/splitter/src/components/splitter-bar.scss
diff --git a/packages/devui-vue/devui/splitter/src/splitter-bar.tsx b/packages/devui-vue/devui/splitter/src/components/splitter-bar.tsx
similarity index 95%
rename from packages/devui-vue/devui/splitter/src/splitter-bar.tsx
rename to packages/devui-vue/devui/splitter/src/components/splitter-bar.tsx
index 1d593fee7d..95d53fe413 100644
--- a/packages/devui-vue/devui/splitter/src/splitter-bar.tsx
+++ b/packages/devui-vue/devui/splitter/src/components/splitter-bar.tsx
@@ -9,12 +9,12 @@ import {
   inject,
 } from 'vue';
 
-import DToolTip from '../../tooltip/src/tooltip';
-import { setStyle } from '../../shared/util/set-style';
-import { addClass, removeClass } from '../../shared/util/class';
-import dresize, { ResizeDirectiveProp } from './util/d-resize-directive';
-import type { SplitterStore, DragState, SplitterPane } from './splitter-store';
-import { splitterBarProps, SplitterBarProps } from './splitter-bar-type';
+import DToolTip from '../../../tooltip/src/tooltip';
+import { setStyle } from '../../../shared/util/set-style';
+import { addClass, removeClass } from '../../../shared/util/class';
+import dresize, { ResizeDirectiveProp } from '../d-resize-directive';
+import type { SplitterStore, DragState, SplitterPane } from '../splitter-store';
+import { splitterBarProps, SplitterBarProps } from './splitter-bar-types';
 import './splitter-bar.scss';
 
 export default defineComponent({
diff --git a/packages/devui-vue/devui/splitter/src/splitter-pane-type.tsx b/packages/devui-vue/devui/splitter/src/components/splitter-pane-types.tsx
similarity index 96%
rename from packages/devui-vue/devui/splitter/src/splitter-pane-type.tsx
rename to packages/devui-vue/devui/splitter/src/components/splitter-pane-types.tsx
index b1773e9edc..e17a69d140 100644
--- a/packages/devui-vue/devui/splitter/src/splitter-pane-type.tsx
+++ b/packages/devui-vue/devui/splitter/src/components/splitter-pane-types.tsx
@@ -1,5 +1,5 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import { CollapseDirection } from './splitter-types';
+import { CollapseDirection } from '../splitter-types';
 
 export const splitterPaneProps = {
   /**
diff --git a/packages/devui-vue/devui/splitter/src/splitter-pane.scss b/packages/devui-vue/devui/splitter/src/components/splitter-pane.scss
similarity index 100%
rename from packages/devui-vue/devui/splitter/src/splitter-pane.scss
rename to packages/devui-vue/devui/splitter/src/components/splitter-pane.scss
diff --git a/packages/devui-vue/devui/splitter/src/splitter-pane.tsx b/packages/devui-vue/devui/splitter/src/components/splitter-pane.tsx
similarity index 94%
rename from packages/devui-vue/devui/splitter/src/splitter-pane.tsx
rename to packages/devui-vue/devui/splitter/src/components/splitter-pane.tsx
index edb54ed8b7..89b410c22a 100644
--- a/packages/devui-vue/devui/splitter/src/splitter-pane.tsx
+++ b/packages/devui-vue/devui/splitter/src/components/splitter-pane.tsx
@@ -6,10 +6,10 @@ import {
   onMounted,
   onUpdated,
 } from 'vue';
-import { addClass, hasClass, removeClass } from '../../shared/util/class';
-import { setStyle } from '../../shared/util/set-style';
-import type { SplitterStore } from './splitter-store';
-import { splitterPaneProps, SplitterPaneProps } from './splitter-pane-type';
+import { addClass, hasClass, removeClass } from '../../../shared/util/class';
+import { setStyle } from '../../../shared/util/set-style';
+import type { SplitterStore } from '../splitter-store';
+import { splitterPaneProps, SplitterPaneProps } from './splitter-pane-types';
 import './splitter-pane.scss';
 
 export default defineComponent({
diff --git a/packages/devui-vue/devui/splitter/src/util/d-resize-directive.ts b/packages/devui-vue/devui/splitter/src/d-resize-directive.ts
similarity index 100%
rename from packages/devui-vue/devui/splitter/src/util/d-resize-directive.ts
rename to packages/devui-vue/devui/splitter/src/d-resize-directive.ts
diff --git a/packages/devui-vue/devui/splitter/src/splitter-store.ts b/packages/devui-vue/devui/splitter/src/splitter-store.ts
index 5210223e3f..d8f2befaa9 100644
--- a/packages/devui-vue/devui/splitter/src/splitter-store.ts
+++ b/packages/devui-vue/devui/splitter/src/splitter-store.ts
@@ -1,4 +1,4 @@
-import SplitterPane from './splitter-pane';
+import SplitterPane from './components/splitter-pane';
 import { reactive } from 'vue';
 
 export interface Pane {
diff --git a/packages/devui-vue/devui/splitter/src/splitter.tsx b/packages/devui-vue/devui/splitter/src/splitter.tsx
index 3e33c7916a..e64660fdea 100644
--- a/packages/devui-vue/devui/splitter/src/splitter.tsx
+++ b/packages/devui-vue/devui/splitter/src/splitter.tsx
@@ -6,7 +6,7 @@ import {
   onUnmounted,
   watch
 } from 'vue';
-import DSplitterBar from './splitter-bar';
+import DSplitterBar from './components/splitter-bar';
 import { SplitterStore, type SplitterPane} from './splitter-store';
 import { splitterProps, SplitterProps, SplitterState } from './splitter-types';
 import './splitter.scss';

From 6ddbe68c75e374c4edc3ddde2062ffac12215d53 Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Fri, 8 Apr 2022 19:16:24 +0800
Subject: [PATCH 9/9] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=BC=95=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/accordion/src/accordion.scss    | 7 +------
 .../devui-vue/devui/auto-complete/src/auto-complete.scss | 3 +--
 packages/devui-vue/devui/avatar/src/avatar.scss          | 2 +-
 packages/devui-vue/devui/badge/src/badge.scss            | 3 +--
 .../devui-vue/devui/breadcrumb/src/breadcrumb-item.scss  | 4 +---
 packages/devui-vue/devui/button/src/button.scss          | 6 +-----
 packages/devui-vue/devui/card/src/card.scss              | 5 +----
 packages/devui-vue/devui/carousel/src/carousel.scss      | 4 +---
 .../devui/cascader/components/cascader-item/index.scss   | 3 +--
 .../devui/cascader/components/cascader-list/index.scss   | 3 +--
 .../cascader/components/cascader-multiple/index.scss     | 4 +---
 .../devui/cascader/components/cascader-tag/index.scss    | 4 +---
 packages/devui-vue/devui/cascader/src/cascader.scss      | 2 +-
 packages/devui-vue/devui/checkbox/src/checkbox.scss      | 4 +---
 .../devui-vue/devui/color-picker/src/color-picker.scss   | 2 +-
 packages/devui-vue/devui/countdown/src/countdown.scss    | 2 +-
 .../devui/editable-select/src/editable-select.scss       | 3 +--
 packages/devui-vue/devui/fullscreen/src/fullscreen.scss  | 2 +-
 .../gantt/src/gantt-bar-parent/gantt-bar-parent.scss     | 2 +-
 .../devui/gantt/src/gantt-scale/gantt-scale.scss         | 4 +---
 .../devui/gantt/src/gantt-tools/gantt-tools.scss         | 5 +----
 .../devui-vue/devui/image-preview/src/image-preview.scss | 5 +----
 .../devui-vue/devui/input-number/src/input-number.scss   | 6 +-----
 packages/devui-vue/devui/loading/src/loading.scss        | 2 +-
 packages/devui-vue/devui/modal/src/modal.scss            | 5 +----
 packages/devui-vue/devui/nav-sprite/src/nav-sprite.scss  | 3 ---
 packages/devui-vue/devui/pagination/src/pagination.scss  | 4 +---
 packages/devui-vue/devui/popover/src/popover.scss        | 5 +----
 packages/devui-vue/devui/progress/src/progress.scss      | 2 +-
 packages/devui-vue/devui/radio/src/radio.scss            | 4 +---
 packages/devui-vue/devui/rate/src/rate.scss              | 3 +--
 packages/devui-vue/devui/read-tip/src/read-tip.scss      | 9 ++-------
 packages/devui-vue/devui/result/src/result.scss          | 3 +--
 packages/devui-vue/devui/search/src/search.scss          | 2 +-
 packages/devui-vue/devui/select/src/select.scss          | 4 +---
 .../devui/shared/devui-codebox/devui-codebox.scss        | 3 +--
 packages/devui-vue/devui/slider/src/slider.scss          | 6 +-----
 .../devui/splitter/src/components/splitter-bar.scss      | 3 +--
 packages/devui-vue/devui/splitter/src/splitter.scss      | 3 +--
 packages/devui-vue/devui/switch/src/switch.scss          | 4 +---
 packages/devui-vue/devui/tag-input/src/tag-input.scss    | 7 +------
 .../time-picker/src/components/popup-line/index.scss     | 5 +----
 .../time-picker/src/components/time-popup/index.scss     | 5 +----
 .../time-picker/src/components/time-scroll/index.scss    | 2 +-
 .../devui-vue/devui/time-picker/src/time-picker.scss     | 5 +----
 packages/devui-vue/devui/timeline/src/timeline.scss      | 2 +-
 packages/devui-vue/devui/transfer/src/transfer.scss      | 2 +-
 .../devui-vue/devui/tree-select/src/tree-select.scss     | 4 +---
 packages/devui-vue/devui/tree/src/tree.scss              | 7 +------
 packages/devui-vue/devui/upload/src/upload.scss          | 7 +------
 50 files changed, 50 insertions(+), 146 deletions(-)

diff --git a/packages/devui-vue/devui/accordion/src/accordion.scss b/packages/devui-vue/devui/accordion/src/accordion.scss
index 44bd109036..1de817d445 100644
--- a/packages/devui-vue/devui/accordion/src/accordion.scss
+++ b/packages/devui-vue/devui/accordion/src/accordion.scss
@@ -1,9 +1,4 @@
-@import '../../style/mixins/index';
-@import '../../style/theme/color';
-@import '../../style/theme/font';
-@import '../../style/theme/shadow';
-@import '../../style/theme/corner';
-@import '../../style/core/animation';
+@import '../../styles-var/devui-var.scss';
 
 .devui-accordion-menu {
   ol,
diff --git a/packages/devui-vue/devui/auto-complete/src/auto-complete.scss b/packages/devui-vue/devui/auto-complete/src/auto-complete.scss
index 22bfb62f67..8762011aa2 100644
--- a/packages/devui-vue/devui/auto-complete/src/auto-complete.scss
+++ b/packages/devui-vue/devui/auto-complete/src/auto-complete.scss
@@ -1,5 +1,4 @@
-@import '../../style/mixins/index';
-@import '../../style/theme/color';
+@import '../../styles-var/devui-var.scss';
 
 .devui-auto-complete,
 .devui-auto-complete-menu {
diff --git a/packages/devui-vue/devui/avatar/src/avatar.scss b/packages/devui-vue/devui/avatar/src/avatar.scss
index 8637a12534..365ff1d2b5 100644
--- a/packages/devui-vue/devui/avatar/src/avatar.scss
+++ b/packages/devui-vue/devui/avatar/src/avatar.scss
@@ -1,4 +1,4 @@
-@import '../../style/theme/color';
+@import '../../styles-var/devui-var.scss';
 
 .devui-avatar {
   display: inline-block;
diff --git a/packages/devui-vue/devui/badge/src/badge.scss b/packages/devui-vue/devui/badge/src/badge.scss
index e8ab08b92f..b8f324ee7d 100644
--- a/packages/devui-vue/devui/badge/src/badge.scss
+++ b/packages/devui-vue/devui/badge/src/badge.scss
@@ -1,5 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/theme/font';
+@import '../../styles-var/devui-var.scss';
 
 .devui-badge {
   position: relative;
diff --git a/packages/devui-vue/devui/breadcrumb/src/breadcrumb-item.scss b/packages/devui-vue/devui/breadcrumb/src/breadcrumb-item.scss
index 5c3a604685..4210a7b81b 100644
--- a/packages/devui-vue/devui/breadcrumb/src/breadcrumb-item.scss
+++ b/packages/devui-vue/devui/breadcrumb/src/breadcrumb-item.scss
@@ -1,6 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/core/_font';
-@import '../../style/core/animation';
+@import '../../styles-var/devui-var.scss';
 
 .devui-breadcrumb-font-style {
   font-size: $devui-font-size;
diff --git a/packages/devui-vue/devui/button/src/button.scss b/packages/devui-vue/devui/button/src/button.scss
index 9287577fa1..c2134f2f7d 100644
--- a/packages/devui-vue/devui/button/src/button.scss
+++ b/packages/devui-vue/devui/button/src/button.scss
@@ -1,8 +1,4 @@
-@import '../../style/mixins/index';
-@import '../../style/theme/color';
-@import '../../style/theme/variables';
-@import '../../style/theme/font';
-@import '../../style/theme/corner';
+@import '../../styles-var/devui-var.scss';
 
 .devui-btn {
   padding: 0 20px;
diff --git a/packages/devui-vue/devui/card/src/card.scss b/packages/devui-vue/devui/card/src/card.scss
index 87c97e5392..3f42731e37 100644
--- a/packages/devui-vue/devui/card/src/card.scss
+++ b/packages/devui-vue/devui/card/src/card.scss
@@ -1,7 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/theme/shadow';
-@import '../../style/theme/corner';
-@import '../../style/core/_font';
+@import '../../styles-var/devui-var.scss';
 
 $card-ele-space: var(--card-ele-space, 8px);
 $card-block-space: var(--card-block-space, 16px);
diff --git a/packages/devui-vue/devui/carousel/src/carousel.scss b/packages/devui-vue/devui/carousel/src/carousel.scss
index a60d1de502..790ef384c9 100644
--- a/packages/devui-vue/devui/carousel/src/carousel.scss
+++ b/packages/devui-vue/devui/carousel/src/carousel.scss
@@ -1,6 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/theme/shadow';
-@import '../../style/core/animation';
+@import '../../styles-var/devui-var.scss';
 
 @mixin fixed-arrow-button() {
   position: absolute;
diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/index.scss b/packages/devui-vue/devui/cascader/components/cascader-item/index.scss
index 35161178bf..1559919e99 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/index.scss
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/index.scss
@@ -1,6 +1,5 @@
 @import '../../../style/mixins/flex';
-@import '../../../style/theme/color';
-@import '../../../style/core/font';
+@import '../../../styles-var/devui-var.scss';
 
 .devui-cascader-li {
   &.devui-dropdown-item {
diff --git a/packages/devui-vue/devui/cascader/components/cascader-list/index.scss b/packages/devui-vue/devui/cascader/components/cascader-list/index.scss
index 76a260c86f..32043fa299 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-list/index.scss
+++ b/packages/devui-vue/devui/cascader/components/cascader-list/index.scss
@@ -1,6 +1,5 @@
 @import '../../../style/mixins/flex';
-@import '../../../style/theme/color';
-@import '../../../style/theme/font';
+@import '../../../styles-var/devui-var.scss';
 
 .devui-cascader-ul {
   height: 180px;
diff --git a/packages/devui-vue/devui/cascader/components/cascader-multiple/index.scss b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.scss
index 315baf646f..625d806955 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-multiple/index.scss
+++ b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.scss
@@ -1,6 +1,4 @@
-@import '../../../style/theme/color';
-@import '../../../style/theme/corner';
-@import '../../../style/core/font';
+@import '../../../styles-var/devui-var.scss';
 
 .devui-tags {
   &-input {
diff --git a/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss b/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss
index 92d20d9b59..7483cbf74a 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss
+++ b/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss
@@ -1,6 +1,4 @@
-@import '../../../style/theme/color';
-@import '../../../style/theme/corner';
-@import '../../../style/core/font';
+@import '../../../styles-var/devui-var.scss';
 
 .devui-tag {
   margin: 2px 4px 2px 0;
diff --git a/packages/devui-vue/devui/cascader/src/cascader.scss b/packages/devui-vue/devui/cascader/src/cascader.scss
index 5bed886b42..06c9a2a740 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.scss
+++ b/packages/devui-vue/devui/cascader/src/cascader.scss
@@ -1,6 +1,6 @@
 @import '../../style/mixins/size';
 @import '../../style/mixins/flex';
-@import '../../style/theme/color';
+@import '../../styles-var/devui-var.scss';
 
 .devui-cascader {
   @include flex(flex-start);
diff --git a/packages/devui-vue/devui/checkbox/src/checkbox.scss b/packages/devui-vue/devui/checkbox/src/checkbox.scss
index f976cd216a..585c927383 100644
--- a/packages/devui-vue/devui/checkbox/src/checkbox.scss
+++ b/packages/devui-vue/devui/checkbox/src/checkbox.scss
@@ -1,6 +1,4 @@
-@import '../../style/mixins/index';
-@import '../../style/theme/color';
-@import '../../style/theme/corner';
+@import '../../styles-var/devui-var.scss';
 
 .devui-checkbox {
   position: relative;
diff --git a/packages/devui-vue/devui/color-picker/src/color-picker.scss b/packages/devui-vue/devui/color-picker/src/color-picker.scss
index 1e51158300..2e67286f21 100644
--- a/packages/devui-vue/devui/color-picker/src/color-picker.scss
+++ b/packages/devui-vue/devui/color-picker/src/color-picker.scss
@@ -1,4 +1,4 @@
-@import '../../style/theme/color';
+@import '../../styles-var/devui-var.scss';
 
 .devui-color-picker {
   position: relative;
diff --git a/packages/devui-vue/devui/countdown/src/countdown.scss b/packages/devui-vue/devui/countdown/src/countdown.scss
index 3bc82c8f32..16dca342e0 100644
--- a/packages/devui-vue/devui/countdown/src/countdown.scss
+++ b/packages/devui-vue/devui/countdown/src/countdown.scss
@@ -1,4 +1,4 @@
-@import '../../style/theme/color';
+@import '../../styles-var/devui-var.scss';
 
 .devui-countdown {
   .countdown-content {
diff --git a/packages/devui-vue/devui/editable-select/src/editable-select.scss b/packages/devui-vue/devui/editable-select/src/editable-select.scss
index 8aac10f3e9..05195bee31 100644
--- a/packages/devui-vue/devui/editable-select/src/editable-select.scss
+++ b/packages/devui-vue/devui/editable-select/src/editable-select.scss
@@ -1,5 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/core/animation';
+@import '../../styles-var/devui-var.scss';
 
 .devui-editable-select {
   .devui-select-chevron-icon {
diff --git a/packages/devui-vue/devui/fullscreen/src/fullscreen.scss b/packages/devui-vue/devui/fullscreen/src/fullscreen.scss
index 717bdf151d..ebe9ea9917 100644
--- a/packages/devui-vue/devui/fullscreen/src/fullscreen.scss
+++ b/packages/devui-vue/devui/fullscreen/src/fullscreen.scss
@@ -1,4 +1,4 @@
-@import '../../style/theme/color';
+@import '../../styles-var/devui-var.scss';
 
 .devui-fullscreen {
   position: fixed;
diff --git a/packages/devui-vue/devui/gantt/src/gantt-bar-parent/gantt-bar-parent.scss b/packages/devui-vue/devui/gantt/src/gantt-bar-parent/gantt-bar-parent.scss
index 6aaae086d6..623654589f 100644
--- a/packages/devui-vue/devui/gantt/src/gantt-bar-parent/gantt-bar-parent.scss
+++ b/packages/devui-vue/devui/gantt/src/gantt-bar-parent/gantt-bar-parent.scss
@@ -1,4 +1,4 @@
-@import '../../style/theme/color';
+@import '../../styles-var/devui-var.scss';
 
 .devui-gantt-bar-parent {
   width: 100%;
diff --git a/packages/devui-vue/devui/gantt/src/gantt-scale/gantt-scale.scss b/packages/devui-vue/devui/gantt/src/gantt-scale/gantt-scale.scss
index bbb3cc42bc..10df24a9f5 100644
--- a/packages/devui-vue/devui/gantt/src/gantt-scale/gantt-scale.scss
+++ b/packages/devui-vue/devui/gantt/src/gantt-scale/gantt-scale.scss
@@ -1,6 +1,4 @@
-@import '../../../style/theme/color';
-@import '../../../style/theme/corner';
-@import '../../../style/core/_font';
+@import '../../../styles-var/devui-var.scss';
 
 .devui-gantt-scale-wrapper {
   display: block;
diff --git a/packages/devui-vue/devui/gantt/src/gantt-tools/gantt-tools.scss b/packages/devui-vue/devui/gantt/src/gantt-tools/gantt-tools.scss
index 45137d7795..67c0d407f0 100644
--- a/packages/devui-vue/devui/gantt/src/gantt-tools/gantt-tools.scss
+++ b/packages/devui-vue/devui/gantt/src/gantt-tools/gantt-tools.scss
@@ -1,7 +1,4 @@
-@import '../../../style/theme/color';
-@import '../../../style/theme/corner';
-@import '../../../style/core/_font';
-@import '../../../style/theme/shadow';
+@import '../../../styles-var/devui-var.scss';
 
 .tools-container {
   position: absolute;
diff --git a/packages/devui-vue/devui/image-preview/src/image-preview.scss b/packages/devui-vue/devui/image-preview/src/image-preview.scss
index 97bfa307ba..fb8b0078f1 100644
--- a/packages/devui-vue/devui/image-preview/src/image-preview.scss
+++ b/packages/devui-vue/devui/image-preview/src/image-preview.scss
@@ -1,7 +1,4 @@
-@import '../../style/theme/_z-index';
-@import '../../style/theme/_shadow';
-@import '../../style/theme/_color';
-@import '../../style/theme/_corner';
+@import '../../styles-var/devui-var.scss';
 
 .devui-image-preview {
   position: fixed;
diff --git a/packages/devui-vue/devui/input-number/src/input-number.scss b/packages/devui-vue/devui/input-number/src/input-number.scss
index 7cf0a9bf91..44ede7ae04 100644
--- a/packages/devui-vue/devui/input-number/src/input-number.scss
+++ b/packages/devui-vue/devui/input-number/src/input-number.scss
@@ -1,8 +1,4 @@
-@import '../../style/mixins/index';
-@import '../../style/theme/color';
-@import '../../style/theme/font';
-@import '../../style/theme/shadow';
-@import '../../style/theme/corner';
+@import '../../styles-var/devui-var.scss';
 
 .devui-input-number {
   position: relative;
diff --git a/packages/devui-vue/devui/loading/src/loading.scss b/packages/devui-vue/devui/loading/src/loading.scss
index 025dc9e656..7599a9237f 100644
--- a/packages/devui-vue/devui/loading/src/loading.scss
+++ b/packages/devui-vue/devui/loading/src/loading.scss
@@ -1,4 +1,4 @@
-@import '../../style/theme/color';
+@import '../../styles-var/devui-var.scss';
 
 @keyframes devui-busy-spinner-anim {
   0% {
diff --git a/packages/devui-vue/devui/modal/src/modal.scss b/packages/devui-vue/devui/modal/src/modal.scss
index d401ba10d3..baaac253e6 100644
--- a/packages/devui-vue/devui/modal/src/modal.scss
+++ b/packages/devui-vue/devui/modal/src/modal.scss
@@ -1,7 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/theme/corner';
-@import '../../style/theme/font';
-@import '../../style/theme/animation';
+@import '../../styles-var/devui-var.scss';
 
 .devui-modal-mask {
   justify-content: center;
diff --git a/packages/devui-vue/devui/nav-sprite/src/nav-sprite.scss b/packages/devui-vue/devui/nav-sprite/src/nav-sprite.scss
index eb16092ec8..719c4e5106 100644
--- a/packages/devui-vue/devui/nav-sprite/src/nav-sprite.scss
+++ b/packages/devui-vue/devui/nav-sprite/src/nav-sprite.scss
@@ -1,6 +1,3 @@
-@import '../../style/theme/color';
-@import '../../style/theme/variables';
-@import '../../style/theme/shadow';
 @import '../../styles-var/devui-var.scss';
 
 .devui-is-sprite {
diff --git a/packages/devui-vue/devui/pagination/src/pagination.scss b/packages/devui-vue/devui/pagination/src/pagination.scss
index c950daef8c..96a5a9ac3c 100644
--- a/packages/devui-vue/devui/pagination/src/pagination.scss
+++ b/packages/devui-vue/devui/pagination/src/pagination.scss
@@ -1,6 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/theme/_corner';
-@import '../../style/core/_font';
+@import '../../styles-var/devui-var.scss';
 
 .devui-pagination {
   font-size: var(--devui-font-size, 12px);
diff --git a/packages/devui-vue/devui/popover/src/popover.scss b/packages/devui-vue/devui/popover/src/popover.scss
index 42ca55d683..0fecac6d19 100644
--- a/packages/devui-vue/devui/popover/src/popover.scss
+++ b/packages/devui-vue/devui/popover/src/popover.scss
@@ -1,7 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style//theme//corner';
-@import '../../style//theme/font';
-@import '../../style//theme//animation';
+@import '../../styles-var/devui-var.scss';
 
 .devui-popover-reference {
   display: inline-block;
diff --git a/packages/devui-vue/devui/progress/src/progress.scss b/packages/devui-vue/devui/progress/src/progress.scss
index 5599f98be5..56a21a941a 100644
--- a/packages/devui-vue/devui/progress/src/progress.scss
+++ b/packages/devui-vue/devui/progress/src/progress.scss
@@ -1,4 +1,4 @@
-@import '../../style/theme/color';
+@import '../../styles-var/devui-var.scss';
 
 .devui-progress--line {
   position: relative;
diff --git a/packages/devui-vue/devui/radio/src/radio.scss b/packages/devui-vue/devui/radio/src/radio.scss
index 3cee5045b8..bb4c8f67b6 100644
--- a/packages/devui-vue/devui/radio/src/radio.scss
+++ b/packages/devui-vue/devui/radio/src/radio.scss
@@ -1,6 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/core/_font';
-@import '../../style/theme/animation';
+@import '../../styles-var/devui-var.scss';
 
 .devui-radio {
   display: flex;
diff --git a/packages/devui-vue/devui/rate/src/rate.scss b/packages/devui-vue/devui/rate/src/rate.scss
index e8790c9393..569e27b02f 100644
--- a/packages/devui-vue/devui/rate/src/rate.scss
+++ b/packages/devui-vue/devui/rate/src/rate.scss
@@ -1,5 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/core/_font';
+@import '../../styles-var/devui-var.scss';
 
 .devui-star-align {
   font-size: $devui-font-size-icon;
diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.scss b/packages/devui-vue/devui/read-tip/src/read-tip.scss
index 893ab48947..d0a5fe14a6 100644
--- a/packages/devui-vue/devui/read-tip/src/read-tip.scss
+++ b/packages/devui-vue/devui/read-tip/src/read-tip.scss
@@ -1,10 +1,5 @@
-@import '../../style/theme/color';
-@import '../../style/theme/variables';
-@import '../../style/mixins/index';
-@import '../../style/theme/shadow';
-@import '../../style/theme/corner';
-@import '../../style/core/_font';
-// @import '../../style/core/z-index';
+@import '../../styles-var/devui-var.scss';
+
 .devui-read-tip {
   position: relative;
 
diff --git a/packages/devui-vue/devui/result/src/result.scss b/packages/devui-vue/devui/result/src/result.scss
index 19a631d240..6c7162266f 100644
--- a/packages/devui-vue/devui/result/src/result.scss
+++ b/packages/devui-vue/devui/result/src/result.scss
@@ -1,5 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/theme/font';
+@import '../../styles-var/devui-var.scss';
 
 .devui-result {
   display: flex;
diff --git a/packages/devui-vue/devui/search/src/search.scss b/packages/devui-vue/devui/search/src/search.scss
index 0e5c186aab..22a6a664b0 100644
--- a/packages/devui-vue/devui/search/src/search.scss
+++ b/packages/devui-vue/devui/search/src/search.scss
@@ -1,6 +1,6 @@
 @import '../../style/mixins/size';
 @import '../../style/mixins/flex';
-@import '../../style/theme/color';
+@import '../../styles-var/devui-var.scss';
 
 .devui-search {
   position: relative;
diff --git a/packages/devui-vue/devui/select/src/select.scss b/packages/devui-vue/devui/select/src/select.scss
index be8ba3b81d..e30ff17c6f 100644
--- a/packages/devui-vue/devui/select/src/select.scss
+++ b/packages/devui-vue/devui/select/src/select.scss
@@ -1,6 +1,4 @@
-@import '../../style/mixins/index';
-@import '../../style/theme/color';
-@import '../../style/theme/corner';
+@import '../../styles-var/devui-var.scss';
 
 $border-change-time: 300ms;
 $border-change-function: cubic-bezier(0.645, 0.045, 0.355, 1);
diff --git a/packages/devui-vue/devui/shared/devui-codebox/devui-codebox.scss b/packages/devui-vue/devui/shared/devui-codebox/devui-codebox.scss
index 757b8db57e..7d44390967 100644
--- a/packages/devui-vue/devui/shared/devui-codebox/devui-codebox.scss
+++ b/packages/devui-vue/devui/shared/devui-codebox/devui-codebox.scss
@@ -1,5 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/core/font';
+@import '../../styles-var/devui-var.scss';
 
 .code-box {
   border: 1px solid $devui-line;
diff --git a/packages/devui-vue/devui/slider/src/slider.scss b/packages/devui-vue/devui/slider/src/slider.scss
index 884e20c027..d77415fe99 100644
--- a/packages/devui-vue/devui/slider/src/slider.scss
+++ b/packages/devui-vue/devui/slider/src/slider.scss
@@ -1,8 +1,4 @@
-@import '../../style/mixins/index';
-@import '../../style/theme/color';
-@import '../../style/theme/shadow';
-@import '../../style/theme/corner';
-@import '../../style/theme/font';
+@import '../../styles-var/devui-var.scss';
 
 .devui-slider {
   position: relative;
diff --git a/packages/devui-vue/devui/splitter/src/components/splitter-bar.scss b/packages/devui-vue/devui/splitter/src/components/splitter-bar.scss
index f78bcb91b1..168acd502b 100644
--- a/packages/devui-vue/devui/splitter/src/components/splitter-bar.scss
+++ b/packages/devui-vue/devui/splitter/src/components/splitter-bar.scss
@@ -1,5 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/theme/corner';
+@import '../../../styles-var/devui-var.scss';
 
 .devui-splitter-bar {
   background-color: $devui-dividing-line;
diff --git a/packages/devui-vue/devui/splitter/src/splitter.scss b/packages/devui-vue/devui/splitter/src/splitter.scss
index a2f5eb8136..739d1ef86d 100644
--- a/packages/devui-vue/devui/splitter/src/splitter.scss
+++ b/packages/devui-vue/devui/splitter/src/splitter.scss
@@ -1,5 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/theme/corner';
+@import '../../styles-var/devui-var.scss';
 
 .devui-splitter {
   display: flex;
diff --git a/packages/devui-vue/devui/switch/src/switch.scss b/packages/devui-vue/devui/switch/src/switch.scss
index 3915cc1bd1..c395db2497 100644
--- a/packages/devui-vue/devui/switch/src/switch.scss
+++ b/packages/devui-vue/devui/switch/src/switch.scss
@@ -1,8 +1,6 @@
 @use 'sass:math';
 
-@import '../../style/theme/color';
-@import '../../style/theme/font';
-@import '../../style/core/animation';
+@import '../../styles-var/devui-var.scss';
 
 :host {
   display: inline-block;
diff --git a/packages/devui-vue/devui/tag-input/src/tag-input.scss b/packages/devui-vue/devui/tag-input/src/tag-input.scss
index 5bc6a29520..6fa23c62bf 100644
--- a/packages/devui-vue/devui/tag-input/src/tag-input.scss
+++ b/packages/devui-vue/devui/tag-input/src/tag-input.scss
@@ -1,9 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/theme/shadow';
-@import '../../style/theme/corner';
-@import '../../style/core/_font';
-@import '../../style/core/animation';
-@import '../../style/theme/z-index';
+@import '../../styles-var/devui-var.scss';
 
 :host {
   display: block;
diff --git a/packages/devui-vue/devui/time-picker/src/components/popup-line/index.scss b/packages/devui-vue/devui/time-picker/src/components/popup-line/index.scss
index d6b63d346f..7b60e438ce 100644
--- a/packages/devui-vue/devui/time-picker/src/components/popup-line/index.scss
+++ b/packages/devui-vue/devui/time-picker/src/components/popup-line/index.scss
@@ -1,7 +1,4 @@
-@import '../../../../style/theme/color';
-@import '../../../../style/theme/shadow';
-@import '../../../../style/theme/corner';
-@import '../../../../style/core/_font';
+@import '../../../../styles-var/devui-var.scss';
 
 .devui-time-list {
   width: 100%;
diff --git a/packages/devui-vue/devui/time-picker/src/components/time-popup/index.scss b/packages/devui-vue/devui/time-picker/src/components/time-popup/index.scss
index 61a8ae49cc..5aa8c08675 100644
--- a/packages/devui-vue/devui/time-picker/src/components/time-popup/index.scss
+++ b/packages/devui-vue/devui/time-picker/src/components/time-popup/index.scss
@@ -1,7 +1,4 @@
-@import '../../../../style/theme/color';
-@import '../../../../style/theme/shadow';
-@import '../../../../style/theme/corner';
-@import '../../../../style/theme/z-index';
+@import '../../../../styles-var/devui-var.scss';
 
 .devui-time-popup {
   height: 310px;
diff --git a/packages/devui-vue/devui/time-picker/src/components/time-scroll/index.scss b/packages/devui-vue/devui/time-picker/src/components/time-scroll/index.scss
index b263596ea6..841aca6432 100644
--- a/packages/devui-vue/devui/time-picker/src/components/time-scroll/index.scss
+++ b/packages/devui-vue/devui/time-picker/src/components/time-scroll/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../style/theme/color';
+@import '../../../../styles-var/devui-var.scss';
 
 .devui-scroll-box {
   width: 100%;
diff --git a/packages/devui-vue/devui/time-picker/src/time-picker.scss b/packages/devui-vue/devui/time-picker/src/time-picker.scss
index 91d712b0ff..35d36b8466 100644
--- a/packages/devui-vue/devui/time-picker/src/time-picker.scss
+++ b/packages/devui-vue/devui/time-picker/src/time-picker.scss
@@ -1,7 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/theme/shadow';
-@import '../../style/theme/corner';
-@import '../../style/core/_font';
+@import '../../styles-var/devui-var.scss';
 
 .devui-time-picker {
   width: 200px;
diff --git a/packages/devui-vue/devui/timeline/src/timeline.scss b/packages/devui-vue/devui/timeline/src/timeline.scss
index 87f1d62668..a828bebb03 100644
--- a/packages/devui-vue/devui/timeline/src/timeline.scss
+++ b/packages/devui-vue/devui/timeline/src/timeline.scss
@@ -1,4 +1,4 @@
-@import '../../style/theme/color';
+@import '../../styles-var/devui-var.scss';
 
 $devui-timeline-item-dot-size: 18px;
 
diff --git a/packages/devui-vue/devui/transfer/src/transfer.scss b/packages/devui-vue/devui/transfer/src/transfer.scss
index 6132d23d1a..bef3244f8f 100644
--- a/packages/devui-vue/devui/transfer/src/transfer.scss
+++ b/packages/devui-vue/devui/transfer/src/transfer.scss
@@ -1,4 +1,4 @@
-@import '../../style/theme/color';
+@import '../../styles-var/devui-var.scss';
 
 $devui-transfer-border-color: #adb0b8;
 $devui-transfer-border-radius: 2px;
diff --git a/packages/devui-vue/devui/tree-select/src/tree-select.scss b/packages/devui-vue/devui/tree-select/src/tree-select.scss
index 1b02d78ccb..aa9d1397a2 100644
--- a/packages/devui-vue/devui/tree-select/src/tree-select.scss
+++ b/packages/devui-vue/devui/tree-select/src/tree-select.scss
@@ -1,6 +1,4 @@
-@import '../../style/mixins/index';
-@import '../../style/theme/color';
-@import '../../style/theme/corner';
+@import '../../styles-var/devui-var.scss';
 
 $tree-select-input-height: 28px;
 $tree-select-dropdown-max-height: 300px;
diff --git a/packages/devui-vue/devui/tree/src/tree.scss b/packages/devui-vue/devui/tree/src/tree.scss
index 6e3c354ca9..2e2f2fc62d 100644
--- a/packages/devui-vue/devui/tree/src/tree.scss
+++ b/packages/devui-vue/devui/tree/src/tree.scss
@@ -1,9 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/theme/variables';
-@import '../../style/mixins/index';
-@import '../../style/theme/corner';
-@import '../../style/core/_font';
-@import '../../style/core/animation';
+@import '../../styles-var/devui-var.scss';
 
 $keyframe-blue: #5e7ce0;
 
diff --git a/packages/devui-vue/devui/upload/src/upload.scss b/packages/devui-vue/devui/upload/src/upload.scss
index 6ed01930fc..57e6944bcb 100644
--- a/packages/devui-vue/devui/upload/src/upload.scss
+++ b/packages/devui-vue/devui/upload/src/upload.scss
@@ -1,9 +1,4 @@
-@import '../../style/theme/color';
-@import '../../style/theme/variables';
-@import '../../style/mixins/index';
-@import '../../style/theme/corner';
-@import '../../style/core/_font';
-@import '../../style/core/animation';
+@import '../../styles-var/devui-var.scss';
 
 .devui-input-group {
   position: relative;