diff --git a/packages/components/auto-complete/auto-complete.tsx b/packages/components/auto-complete/auto-complete.tsx
index 75a92b261b..f2986e8345 100644
--- a/packages/components/auto-complete/auto-complete.tsx
+++ b/packages/components/auto-complete/auto-complete.tsx
@@ -4,7 +4,7 @@ import { TdAutoCompleteProps } from './type';
 import TInput, { InputProps, StrInputProps } from '../input';
 import Popup, { PopupProps } from '../popup';
 import useCommonClassName from '../hooks/useCommonClassName';
-import AutoCompleteOptionList from './option-list';
+import AutoCompleteOptionList from './components/option-list';
 import useVModel from '../hooks/useVModel';
 import { useConfig } from '../config-provider/hooks/useConfig';
 import { ClassName } from '../common';
diff --git a/packages/components/auto-complete/option-list.tsx b/packages/components/auto-complete/components/option-list.tsx
similarity index 93%
rename from packages/components/auto-complete/option-list.tsx
rename to packages/components/auto-complete/components/option-list.tsx
index 4c89c8a4fa..268d5a5c42 100644
--- a/packages/components/auto-complete/option-list.tsx
+++ b/packages/components/auto-complete/components/option-list.tsx
@@ -1,18 +1,15 @@
 import { ref, computed, defineComponent, PropType, h, watch, onBeforeUnmount } from 'vue';
-import { isFunction } from 'lodash-es';
-import HighlightOption from './highlight-option';
-import { CommonClassNameType } from '../hooks/useCommonClassName';
-import { AutoCompleteOptionObj, TdAutoCompleteProps } from './type';
+import { isFunction, isString, escapeRegExp } from 'lodash-es';
+import HighlightOption from '../highlight-option';
+import { CommonClassNameType } from '../../hooks/useCommonClassName';
+import { AutoCompleteOptionObj, TdAutoCompleteProps } from '../type';
 import log from '@tdesign/common-js/log/index';
-import { useConfig, usePrefixClass } from '../hooks/useConfig';
-import { on, off } from '../utils/dom';
-import { isString } from 'lodash-es';
-import { escapeRegExp } from 'lodash-es';
+import { useConfig, usePrefixClass } from '../../hooks/useConfig';
+import { on, off } from '../../utils/dom';
 import { ARROW_UP_REG, ARROW_DOWN_REG, ENTER_REG } from '@tdesign/common-js/common';
 
 export default defineComponent({
   name: 'AutoCompleteOptionList',
-
   props: {
     sizeClassNames: Object as PropType<CommonClassNameType['sizeClassNames']>,
     value: String,
@@ -24,9 +21,7 @@ export default defineComponent({
     filter: Function as PropType<TdAutoCompleteProps['filter']>,
     empty: [String, Function] as PropType<TdAutoCompleteProps['empty']>,
   },
-
   emits: ['select'],
-
   setup(props, { emit, slots, expose }) {
     const active = ref('');
     const classPrefix = usePrefixClass();
diff --git a/packages/components/loading/plugin.tsx b/packages/components/loading/plugin.tsx
index 00f78e839f..5bbfe976de 100644
--- a/packages/components/loading/plugin.tsx
+++ b/packages/components/loading/plugin.tsx
@@ -31,14 +31,8 @@ function createLoading(props: TdLoadingProps): LoadingInstance {
   const component = defineComponent({
     setup() {
       const loadingOptions = reactive(mergedProps);
-      return {
-        loadingOptions,
-      };
-    },
-    render() {
-      return h(LoadingComponent, {
-        ...this.loadingOptions,
-      });
+
+      return () => h(LoadingComponent, loadingOptions);
     },
   });
 
diff --git a/packages/components/select/select-panel.tsx b/packages/components/select/components/select-panel.tsx
similarity index 81%
rename from packages/components/select/select-panel.tsx
rename to packages/components/select/components/select-panel.tsx
index 5bbd855c15..d1442efc8f 100644
--- a/packages/components/select/select-panel.tsx
+++ b/packages/components/select/components/select-panel.tsx
@@ -1,16 +1,16 @@
 import { computed, defineComponent, inject, Slots, ref } from 'vue';
 import { omit } from 'lodash-es';
-import { Styles } from '../common';
+import { Styles } from '../../common';
 
-import { SelectOption, SelectOptionGroup, TdOptionProps } from './type';
-import Option from './option';
-import OptionGroup from './option-group';
-import TdSelectProps from './props';
+import { SelectOption, SelectOptionGroup, TdOptionProps } from '../type';
+import Option from '../option';
+import OptionGroup from '../option-group';
+import TdSelectProps from '../props';
 
-import { useTNodeJSX, useTNodeDefault } from '../hooks/tnode';
-import { useConfig, usePrefixClass } from '../hooks/useConfig';
-import { usePanelVirtualScroll } from './hooks/usePanelVirtualScroll';
-import { selectInjectKey } from './consts';
+import { useTNodeJSX, useTNodeDefault } from '../../hooks/tnode';
+import { useConfig, usePrefixClass } from '../../hooks/useConfig';
+import { usePanelVirtualScroll } from '../hooks/usePanelVirtualScroll';
+import { selectInjectKey } from '../consts';
 
 export default defineComponent({
   name: 'TSelectPanel',
@@ -134,32 +134,24 @@ export default defineComponent({
         {!isEmpty.value && renderOptionsContent(options)}
       </div>
     );
-    return {
-      renderPanel,
-      panelStyle,
-      cursorStyle,
-      isVirtual,
-      displayOptions,
-      visibleData,
-      renderTNodeJSX,
+
+    return () => {
+      return isVirtual.value ? (
+        <>
+          {renderTNodeJSX('panelTopContent')}
+          <div>
+            <div style={cursorStyle.value}></div>
+            {renderPanel(visibleData.value, panelStyle.value)}
+          </div>
+          {renderTNodeJSX('panelBottomContent')}
+        </>
+      ) : (
+        <>
+          {renderTNodeJSX('panelTopContent')}
+          {renderPanel(displayOptions.value)}
+          {renderTNodeJSX('panelBottomContent')}
+        </>
+      );
     };
   },
-  render() {
-    return this.isVirtual ? (
-      <>
-        {this.renderTNodeJSX('panelTopContent')}
-        <div>
-          <div style={this.cursorStyle}></div>
-          {this.renderPanel(this.visibleData, this.panelStyle)}
-        </div>
-        {this.renderTNodeJSX('panelBottomContent')}
-      </>
-    ) : (
-      <>
-        {this.renderTNodeJSX('panelTopContent')}
-        {this.renderPanel(this.displayOptions)}
-        {this.renderTNodeJSX('panelBottomContent')}
-      </>
-    );
-  },
 });
diff --git a/packages/components/select/select.tsx b/packages/components/select/select.tsx
index c97305f9aa..42cec940e6 100644
--- a/packages/components/select/select.tsx
+++ b/packages/components/select/select.tsx
@@ -8,7 +8,7 @@ import { get } from 'lodash-es';
 import { intersection } from 'lodash-es';
 import FakeArrow from '../common-components/fake-arrow';
 import SelectInput from '../select-input';
-import SelectPanel from './select-panel';
+import SelectPanel from './components/select-panel';
 import props from './props';
 // hooks
 import { useDisabled } from '../hooks/useDisabled';
diff --git a/packages/components/tree-select/index.ts b/packages/components/tree-select/index.ts
index 0e5b4ed4d6..ac72e3f6be 100644
--- a/packages/components/tree-select/index.ts
+++ b/packages/components/tree-select/index.ts
@@ -3,6 +3,6 @@ import withInstall from '../utils/withInstall';
 
 import './style';
 
-export * from './interface';
+export * from './types';
 export const TreeSelect = withInstall(_TreeSelect);
 export default TreeSelect;
diff --git a/packages/components/tree-select/tree-select.tsx b/packages/components/tree-select/tree-select.tsx
index 1f40c6c2cc..16767cb3cb 100644
--- a/packages/components/tree-select/tree-select.tsx
+++ b/packages/components/tree-select/tree-select.tsx
@@ -11,7 +11,7 @@ import SelectInput, { TdSelectInputProps } from '../select-input';
 import FakeArrow from '../common-components/fake-arrow';
 import { PopupVisibleChangeContext } from '../popup';
 
-import { INodeOptions } from './interface';
+import { INodeOptions } from './types';
 import { TreeSelectValue, TdTreeSelectProps, TreeSelectValueChangeTrigger } from './type';
 import { TreeOptionData } from '../common';
 import props from './props';
diff --git a/packages/components/tree-select/interface.ts b/packages/components/tree-select/types.ts
similarity index 100%
rename from packages/components/tree-select/interface.ts
rename to packages/components/tree-select/types.ts
diff --git a/packages/components/typography/ellipsis.tsx b/packages/components/typography/components/ellipsis.tsx
similarity index 91%
rename from packages/components/typography/ellipsis.tsx
rename to packages/components/typography/components/ellipsis.tsx
index 74d73fb9a2..1a6e9d3354 100644
--- a/packages/components/typography/ellipsis.tsx
+++ b/packages/components/typography/components/ellipsis.tsx
@@ -1,17 +1,15 @@
 import { defineComponent, computed, ref } from 'vue';
-import { usePrefixClass } from '../hooks/useConfig';
-import props from './paragraph-props';
-import TTooltip from '../tooltip/index';
-import { useConfig } from '../config-provider/hooks/useConfig';
+import { usePrefixClass } from '../../hooks/useConfig';
+import props from '../paragraph-props';
+import TTooltip from '../../tooltip/index';
+import { useConfig } from '../../config-provider/hooks/useConfig';
 
-import type { TypographyEllipsis } from './type';
+import type { TypographyEllipsis } from '../type';
 
 export default defineComponent({
   name: 'TEllipsis',
   components: { TTooltip },
-  props: {
-    ...props,
-  },
+  props,
   setup(props, { slots }) {
     const COMPONENT_NAME = usePrefixClass('typography');
     const { globalConfig } = useConfig('typography');
diff --git a/packages/components/typography/paragraph.tsx b/packages/components/typography/paragraph.tsx
index 577d37574a..4aad7bb2ab 100644
--- a/packages/components/typography/paragraph.tsx
+++ b/packages/components/typography/paragraph.tsx
@@ -2,7 +2,7 @@ import { defineComponent, computed, PropType } from 'vue';
 import { usePrefixClass } from '../hooks/useConfig';
 import props from './paragraph-props';
 import TTooltip from '../tooltip/index';
-import Ellipsis from './ellipsis';
+import Ellipsis from './components/ellipsis';
 
 export default defineComponent({
   name: 'TTypographyParagraph',
diff --git a/packages/components/typography/text.tsx b/packages/components/typography/text.tsx
index 17c81b8a7a..11b4c04601 100644
--- a/packages/components/typography/text.tsx
+++ b/packages/components/typography/text.tsx
@@ -3,7 +3,7 @@ import { usePrefixClass } from '../hooks/useConfig';
 import props from './text-props';
 import copy from './utils/copy-to-clipboard';
 import { CopyIcon, CheckIcon } from 'tdesign-icons-vue-next';
-import Ellipsis from './ellipsis';
+import Ellipsis from './components/ellipsis';
 import TTooltip from '../tooltip';
 import TButton from '../button';
 import { useConfig } from '../config-provider/hooks/useConfig';
diff --git a/packages/components/typography/title.tsx b/packages/components/typography/title.tsx
index 73aaf1093b..bb5e94b86d 100644
--- a/packages/components/typography/title.tsx
+++ b/packages/components/typography/title.tsx
@@ -1,7 +1,7 @@
 import { defineComponent, h } from 'vue';
 import { usePrefixClass } from '../hooks/useConfig';
 import props from './title-props';
-import Ellipsis from './ellipsis';
+import Ellipsis from './components/ellipsis';
 import { useContent } from '../hooks/tnode';
 
 export default defineComponent({
diff --git a/packages/components/typography/typography.tsx b/packages/components/typography/typography.tsx
index 2d9023e1ab..453807fcf3 100644
--- a/packages/components/typography/typography.tsx
+++ b/packages/components/typography/typography.tsx
@@ -1,11 +1,9 @@
 import { defineComponent } from 'vue';
 import { useTNodeJSX } from '../hooks/tnode';
-
 import Text from './text';
 
 export default defineComponent({
   name: 'TTypography',
-
   setup() {
     const renderTNodeJSX = useTNodeJSX();
     return () => {
diff --git a/packages/components/typography/utils/copy-to-clipboard/index.ts b/packages/components/typography/utils/copy-to-clipboard.ts
similarity index 100%
rename from packages/components/typography/utils/copy-to-clipboard/index.ts
rename to packages/components/typography/utils/copy-to-clipboard.ts
diff --git a/packages/components/upload/themes/README.md b/packages/components/upload/components/README.md
similarity index 100%
rename from packages/components/upload/themes/README.md
rename to packages/components/upload/components/README.md
diff --git a/packages/components/upload/themes/custom-file.tsx b/packages/components/upload/components/custom-file.tsx
similarity index 93%
rename from packages/components/upload/themes/custom-file.tsx
rename to packages/components/upload/components/custom-file.tsx
index c88251578b..fa50d49498 100644
--- a/packages/components/upload/themes/custom-file.tsx
+++ b/packages/components/upload/components/custom-file.tsx
@@ -1,9 +1,9 @@
 import { defineComponent, PropType, toRefs } from 'vue';
 import useDrag, { UploadDragEvents } from '../hooks/useDrag';
-import { CommonDisplayFileProps } from '../interface';
-import { commonProps } from '../constants';
+import { CommonDisplayFileProps } from '../types';
+import { commonProps } from '../consts';
 import { useContent } from '../../hooks/tnode';
-import { TdUploadProps } from '../type';
+import { TdUploadProps } from '../types';
 
 export interface CustomFileProps extends CommonDisplayFileProps {
   dragEvents: UploadDragEvents;
@@ -17,7 +17,6 @@ export interface CustomFileProps extends CommonDisplayFileProps {
 
 export default defineComponent({
   name: 'UploadCustomFile',
-
   props: {
     ...commonProps,
     dragEvents: Object as PropType<CustomFileProps['dragEvents']>,
@@ -28,7 +27,6 @@ export default defineComponent({
     triggerUpload: Function as PropType<CustomFileProps['triggerUpload']>,
     childrenNode: [String, Function] as PropType<CustomFileProps['childrenNode']>,
   },
-
   setup(props, { slots }) {
     const { classPrefix, displayFiles, accept } = toRefs(props);
     const drag = useDrag(props.dragEvents, accept);
diff --git a/packages/components/upload/themes/dragger-file.tsx b/packages/components/upload/components/dragger-file.tsx
similarity index 98%
rename from packages/components/upload/themes/dragger-file.tsx
rename to packages/components/upload/components/dragger-file.tsx
index d7387d87a6..35b8fd08f2 100644
--- a/packages/components/upload/themes/dragger-file.tsx
+++ b/packages/components/upload/components/dragger-file.tsx
@@ -6,8 +6,8 @@ import {
 import { abridgeName, getFileSizeText } from '@tdesign/common-js/upload/utils';
 import { TdUploadProps, UploadFile } from '../type';
 import Button from '../../button';
-import { CommonDisplayFileProps } from '../interface';
-import { commonProps } from '../constants';
+import { CommonDisplayFileProps } from '../types';
+import { commonProps } from '../consts';
 import useCommonClassName from '../../hooks/useCommonClassName';
 import TLoading from '../../loading';
 import useDrag, { UploadDragEvents } from '../hooks/useDrag';
@@ -27,7 +27,6 @@ export interface DraggerProps extends CommonDisplayFileProps {
 
 export default defineComponent({
   name: 'UploadDraggerFile',
-
   props: {
     ...commonProps,
     trigger: Function as PropType<DraggerProps['trigger']>,
@@ -36,7 +35,6 @@ export default defineComponent({
     cancelUpload: Function as PropType<DraggerProps['cancelUpload']>,
     dragEvents: Object as PropType<DraggerProps['dragEvents']>,
   },
-
   setup(props, { slots }) {
     const { displayFiles, disabled, accept } = toRefs(props);
     const locale = computed(() => props.locale as UploadConfig);
diff --git a/packages/components/upload/themes/image-card.tsx b/packages/components/upload/components/image-card.tsx
similarity index 98%
rename from packages/components/upload/themes/image-card.tsx
rename to packages/components/upload/components/image-card.tsx
index 360239bae9..23f65d9120 100644
--- a/packages/components/upload/themes/image-card.tsx
+++ b/packages/components/upload/components/image-card.tsx
@@ -8,8 +8,8 @@ import {
 import Loading from '../../loading';
 import useGlobalIcon from '../../hooks/useGlobalIcon';
 import ImageViewer, { ImageViewerProps } from '../../image-viewer';
-import { CommonDisplayFileProps } from '../interface';
-import { commonProps } from '../constants';
+import { CommonDisplayFileProps } from '../types';
+import { commonProps } from '../consts';
 import { TdUploadProps, UploadFile } from '../type';
 import { abridgeName } from '@tdesign/common-js/upload/utils';
 import { UploadConfig } from '../../config-provider';
@@ -30,7 +30,6 @@ export interface ImageCardUploadProps extends CommonDisplayFileProps {
 
 export default defineComponent({
   name: 'UploadImageCard',
-
   props: {
     ...commonProps,
     multiple: Boolean,
diff --git a/packages/components/upload/themes/multiple-flow-list.tsx b/packages/components/upload/components/multiple-flow-list.tsx
similarity index 99%
rename from packages/components/upload/themes/multiple-flow-list.tsx
rename to packages/components/upload/components/multiple-flow-list.tsx
index 2b60ba95e6..4471c8ebe5 100644
--- a/packages/components/upload/themes/multiple-flow-list.tsx
+++ b/packages/components/upload/components/multiple-flow-list.tsx
@@ -16,10 +16,10 @@ import { isFunction } from 'lodash-es';
 import { isObject } from 'lodash-es';
 import useGlobalIcon from '../../hooks/useGlobalIcon';
 import ImageViewer, { ImageViewerProps } from '../../image-viewer';
-import { CommonDisplayFileProps } from '../interface';
-import { commonProps } from '../constants';
+import { CommonDisplayFileProps } from '../types';
+import { commonProps } from '../consts';
 import TButton from '../../button';
-import { UploadFile, TdUploadProps } from '../type';
+import { UploadFile, TdUploadProps } from '../types';
 import useDrag, { UploadDragEvents } from '../hooks/useDrag';
 import {
   abridgeName,
@@ -51,7 +51,6 @@ export interface ImageFlowListProps extends CommonDisplayFileProps {
 
 export default defineComponent({
   name: 'UploadMultipleFlowList',
-
   props: {
     ...commonProps,
     showThumbnail: Boolean,
@@ -66,7 +65,6 @@ export default defineComponent({
     cancelUploadButton: Object as PropType<ImageFlowListProps['cancelUploadButton']>,
     onPreview: Function as PropType<ImageFlowListProps['onPreview']>,
   },
-
   setup(props, { slots }) {
     // locale 已经在 useUpload 中统一处理优先级
     const { uploading, disabled, displayFiles, classPrefix, accept } = toRefs(props);
diff --git a/packages/components/upload/themes/normal-file.tsx b/packages/components/upload/components/normal-file.tsx
similarity index 98%
rename from packages/components/upload/themes/normal-file.tsx
rename to packages/components/upload/components/normal-file.tsx
index 700df5377e..aa140f3bef 100644
--- a/packages/components/upload/themes/normal-file.tsx
+++ b/packages/components/upload/components/normal-file.tsx
@@ -12,8 +12,8 @@ import { useTNodeJSX } from '../../hooks/tnode';
 import { UploadFile } from '../type';
 import { abridgeName } from '@tdesign/common-js/upload/utils';
 import { useGlobalIcon } from '../../hooks/useGlobalIcon';
-import { CommonDisplayFileProps } from '../interface';
-import { commonProps } from '../constants';
+import { CommonDisplayFileProps } from '../types';
+import { commonProps } from '../consts';
 import { UploadConfig } from '../../config-provider';
 
 export interface NormalFileProps extends CommonDisplayFileProps {
@@ -22,12 +22,10 @@ export interface NormalFileProps extends CommonDisplayFileProps {
 
 const NormalFile = defineComponent({
   name: 'UploadNormalFile',
-
   props: {
     multiple: Boolean,
     ...commonProps,
   },
-
   setup(props, { slots }) {
     const { theme, disabled, classPrefix } = toRefs(props);
 
diff --git a/packages/components/upload/themes/style/css.js b/packages/components/upload/components/style/css.js
similarity index 100%
rename from packages/components/upload/themes/style/css.js
rename to packages/components/upload/components/style/css.js
diff --git a/packages/components/upload/themes/style/index.js b/packages/components/upload/components/style/index.js
similarity index 100%
rename from packages/components/upload/themes/style/index.js
rename to packages/components/upload/components/style/index.js
diff --git a/packages/components/upload/constants.ts b/packages/components/upload/consts/index.ts
similarity index 96%
rename from packages/components/upload/constants.ts
rename to packages/components/upload/consts/index.ts
index 1a242d0434..3dad20d946 100644
--- a/packages/components/upload/constants.ts
+++ b/packages/components/upload/consts/index.ts
@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { CommonDisplayFileProps } from './interface';
+import { CommonDisplayFileProps } from '../types';
 
 export const commonProps = {
   accept: String,
diff --git a/packages/components/upload/index.ts b/packages/components/upload/index.ts
index 85da97511c..f83ade760d 100644
--- a/packages/components/upload/index.ts
+++ b/packages/components/upload/index.ts
@@ -3,7 +3,6 @@ import withInstall from '../utils/withInstall';
 
 import './style';
 
-export * from './interface';
-
+export * from './types';
 export const Upload = withInstall(_Upload);
 export default Upload;
diff --git a/packages/components/upload/interface.ts b/packages/components/upload/types.ts
similarity index 100%
rename from packages/components/upload/interface.ts
rename to packages/components/upload/types.ts
diff --git a/packages/components/upload/upload.tsx b/packages/components/upload/upload.tsx
index 40b8388784..95abab2f28 100644
--- a/packages/components/upload/upload.tsx
+++ b/packages/components/upload/upload.tsx
@@ -1,13 +1,13 @@
 import { computed, defineComponent } from 'vue';
 import { UploadIcon as TdUploadIcon } from 'tdesign-icons-vue-next';
 import props from './props';
-import NormalFile from './themes/normal-file';
-import DraggerFile from './themes/dragger-file';
-import ImageCard from './themes/image-card';
-import MultipleFlowList from './themes/multiple-flow-list';
+import NormalFile from './components/normal-file';
+import DraggerFile from './components/dragger-file';
+import ImageCard from './components/image-card';
+import MultipleFlowList from './components/multiple-flow-list';
 import Button from '../button';
-import { CommonDisplayFileProps, UploadProps } from './interface';
-import CustomFile from './themes/custom-file';
+import { CommonDisplayFileProps, UploadProps } from './types';
+import CustomFile from './components/custom-file';
 
 import { UploadDragEvents } from './hooks/useDrag';
 import useUpload from './hooks/useUpload';
@@ -17,9 +17,7 @@ import { useGlobalIcon } from '../hooks/useGlobalIcon';
 
 export default defineComponent({
   name: 'TUpload',
-
   props,
-
   setup(props: UploadProps, { slots, expose }) {
     const renderContent = useContent();
     const renderTNodeJSX = useTNodeJSX();