refactor: optimize directory structure

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,

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 {

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 },

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},

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;

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';

packages/devui-vue/devui/avatar/src/icon-body.tsx → 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;

packages/devui-vue/devui/avatar/src/icon-nobody.tsx → 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;

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;

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;

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;

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';

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);

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;

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 {

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;

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 {

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;

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);

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;

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;

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 {

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 {

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;

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%;

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;

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;

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 => {

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';
 
 

packages/devui-vue/devui/grid/src/use-grid.ts → 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';
 

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';

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;

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;

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,

packages/devui-vue/devui/loading/src/directive.ts → 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
   };
 

packages/devui-vue/devui/loading/src/service.ts → 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,

packages/devui-vue/devui/loading/src/types.ts → 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;
 }

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% {

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,

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', () => {