diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index 3ab14bd95b65d7a7bb451957f013e052ec12724d..232cf56d0fcb6a09bf203588b65718aad7386cff 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opendesign",
-  "version": "0.0.30",
+  "version": "0.0.35",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
@@ -28,14 +28,9 @@
   },
   "devDependencies": {
     "@opensig/opensig-scripts": "workspace:^0.0.8",
-    "@types/lodash-es": "^4.17.6",
     "typescript": "^4.6.4",
     "vue": "^3.2.41",
     "vue-tsc": "^1.0.13"
   },
-  "dependencies": {
-    "intersection-observer-polyfill": "^0.1.0",
-    "lodash-es": "^4.17.21",
-    "resize-observer-polyfill": "^1.5.1"
-  }
+  "dependencies": {}
 }
diff --git a/packages/opendesign/src/components/_shared/export.ts b/packages/opendesign/src/components/_shared/export.ts
index 54b272ab148b6db290dbc23fbc902bf2f5442b0b..1551a1ff0dd1831ebe071eedfae38c53bef479d2 100644
--- a/packages/opendesign/src/components/_shared/export.ts
+++ b/packages/opendesign/src/components/_shared/export.ts
@@ -3,3 +3,5 @@ export { initSize, initRound } from './global';
 export * from './init-icons';
 
 export * from './is';
+
+export * from './utils';
diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts
index b5deb32e1f4dea1a5c366797e8b529e0db161ca0..7a850a52344fb648770fa191a7145346a73c3366 100644
--- a/packages/opendesign/src/components/_shared/global.ts
+++ b/packages/opendesign/src/components/_shared/global.ts
@@ -1,4 +1,5 @@
 import { ref } from 'vue';
+import { ColorPool } from './utils';
 
 // 尺寸
 export const SizeTypes = ['large', 'medium', 'small'] as const;
@@ -27,3 +28,10 @@ export type ColorT = typeof ColorTypes[number];
 
 export const Color2Types = ['normal', 'success', 'warning', 'danger'] as const;
 export type Color2T = typeof ColorTypes[number];
+
+// 随机颜色池
+const PrestColor = ['#d9e6c3', '#ebd5be', '#d1e6de', '#e0ceeb', '#ebd3c7', '#e6dada', '#e3deeb', '#dedae6', '#cad0e8', '#cedeeb'];
+export const PrestColorPool = ref(new ColorPool(PrestColor));
+export function initPrestColor(colors: string[]) {
+  PrestColorPool.value = new ColorPool(colors);
+}
diff --git a/packages/opendesign/src/components/_shared/utils.ts b/packages/opendesign/src/components/_shared/utils.ts
index aacccf1fe10188797181eca1265b3c26274f53e9..9e240eb13216f33bf1b9081208add098ab1c88b1 100644
--- a/packages/opendesign/src/components/_shared/utils.ts
+++ b/packages/opendesign/src/components/_shared/utils.ts
@@ -1,14 +1,3 @@
-import { throttle as _throttle, debounce as _debounce } from 'lodash-es';
-import type { ThrottleSettings, DebounceSettings } from 'lodash-es';
-
-// 防抖
-export function debounce<T extends (...args: Array<unknown>) => unknown>(fn: T, wait?: number, ctx?: unknown | null, opts?: ThrottleSettings) {
-  return _debounce.apply(ctx, [fn, wait, opts]);
-}
-// 节流
-export function throttle<T extends (...args: Array<unknown>) => unknown>(fn: T, wait?: number, ctx?: unknown | null, opts?: DebounceSettings) {
-  return _throttle.apply(ctx, [fn, wait, opts]);
-}
 // 防抖 时间为一个一帧
 export function debounceRAF<T extends (...args: Array<unknown>) => any>(fn: T) {
   let handle = 0;
@@ -49,7 +38,7 @@ export function throttleRAF<T extends (...args: Array<unknown>) => unknown>(fn:
 /**
  * 颜色池
  */
-class ColorPool {
+export class ColorPool {
   pool: Array<string>;
   tmpPool: Array<string>;
 
@@ -77,6 +66,3 @@ class ColorPool {
     return color;
   }
 }
-
-const PrestColor = ['#d9e6c3', '#ebd5be', '#d1e6de', '#e0ceeb', '#ebd3c7', '#e6dada', '#e3deeb', '#dedae6', '#cad0e8', '#cedeeb'];
-export const PrestColorPool = new ColorPool(PrestColor);
\ No newline at end of file
diff --git a/packages/opendesign/src/components/carousel/OCarousel.vue b/packages/opendesign/src/components/carousel/OCarousel.vue
index 13fed7f1b3290e69a925c11b6183d989c5bffbb8..93f14b1f37f8115cf65ef896f1fb989366271922 100644
--- a/packages/opendesign/src/components/carousel/OCarousel.vue
+++ b/packages/opendesign/src/components/carousel/OCarousel.vue
@@ -52,10 +52,10 @@ const slideElList = computed(() => {
   return c ? Array.from(c).map((el) => el as HTMLElement) : null;
 });
 
-let isChanging = false;
-
 // gallery
 let slidesInstance: InstanceType<typeof Effect> | null = null;
+// 避免同一时间多次切换
+let isChanging = false;
 
 const activeSlideByIndex = (index: number): Promise<boolean> => {
   return new Promise((resolve) => {
@@ -65,13 +65,16 @@ const activeSlideByIndex = (index: number): Promise<boolean> => {
     if (isChanging || !slideElList.value || to === from) {
       return Promise.resolve(false);
     }
+    isChanging = true;
 
     if (slidesInstance) {
       activeIndex.value = to;
       slidesInstance.active(to).then(() => {
+        isChanging = false;
         resolve(true);
       });
     } else {
+      isChanging = false;
       resolve(false);
     }
   });
@@ -125,11 +128,9 @@ const initSlides = () => {
       }
     },
     onBeforeChange: (to: number, from: number) => {
-      isChanging = true;
       emits('before-change', to, from);
     },
     onChanged: (to: number, from: number) => {
-      isChanging = false;
       activeIndex.value = to;
       emits('change', to, from);
     },
@@ -232,7 +233,7 @@ defineExpose({
     </div>
     <div v-if="!props.hideIndicator" class="o-carousel-indicator-wrap" :class="props.indicatorWrapClass">
       <div v-for="(item, idx) in total" :key="item" class="o-carousel-indicator-item" @click="props.indicatorClick && activeSlide(idx)">
-        <slot name="indicator" :active="item - 1 === activeIndex">
+        <slot name="indicator" :active="item - 1 === activeIndex" :index="idx">
           <div
             class="o-carousel-indicator-bar"
             :class="{
diff --git a/packages/opendesign/src/components/carousel/gallery.ts b/packages/opendesign/src/components/carousel/gallery.ts
index a48bbdecefdf8f577231c74a354ec7fcb21774e9..6e6d8205db8ad36043f1536a928139ed514c9459 100644
--- a/packages/opendesign/src/components/carousel/gallery.ts
+++ b/packages/opendesign/src/components/carousel/gallery.ts
@@ -2,7 +2,7 @@ import { isFunction } from '../_shared/is';
 import { PointMoveT } from '../_shared/pointer';
 import Effect, { EffectOptionT } from './effect';
 import { useResizeObserver } from '../hooks';
-import { throttleRAF } from '../_shared/utils';
+import { debounceRAF } from '../_shared/utils';
 
 interface GalleryItemT {
   index: number;
@@ -75,7 +75,7 @@ export default class Gallery extends Effect {
     };
 
     const or = useResizeObserver();
-    const listener = throttleRAF(() => {
+    const listener = debounceRAF(() => {
       this.update(slideElList, slideContainer);
       this.active(activeIndex, false, true);
     });
diff --git a/packages/opendesign/src/components/dialog/ODialog.vue b/packages/opendesign/src/components/dialog/ODialog.vue
index 9145375dcb52f75909bddbc1e2c3597a02fd6044..64a1cc3f098620514d51a0c0cefea34cf1577c1b 100644
--- a/packages/opendesign/src/components/dialog/ODialog.vue
+++ b/packages/opendesign/src/components/dialog/ODialog.vue
@@ -15,8 +15,14 @@ const emits = defineEmits<{
 const layerRef = ref<InstanceType<typeof OLayer> | null>(null);
 
 const onCloseClick = () => {
-  layerRef.value?.hide();
+  layerRef.value?.toggle(false);
 };
+
+defineExpose({
+  toggle(show?: boolean) {
+    layerRef.value?.toggle(show);
+  },
+});
 </script>
 <template>
   <OLayer
@@ -24,7 +30,6 @@ const onCloseClick = () => {
     class="o-dialog"
     :visible="props.visible"
     :wrapper="props.wrapper"
-    :to-body="props.toBody"
     :unmount-on-hide="props.unmountOnHide"
     :main-class="mergeClass('o-dlg-main', props.mainClass)"
     :main-transition="props.mainTransition"
diff --git a/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue b/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue
index ced4d092a007476be37ec1378e184e3e88453962..ea4afbb1aa644baacfb4a8e652f314434fc3ea49 100644
--- a/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue
+++ b/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue
@@ -64,7 +64,7 @@ const onChane = (v: boolean) => {
       This is Dialog
       <template #footer>
         <div class="dlg-action">
-          <OButton color="primary" variant="solid" @click="toggle(false)">确定</OButton>
+          <OButton color="primary" variant="solid" @click="toggle2(false)">确定</OButton>
           <OButton @click="toggle2(false)">取消</OButton>
         </div>
       </template>
@@ -73,12 +73,12 @@ const onChane = (v: boolean) => {
   <h4>局部弹窗</h4>
   <section class="wrap">
     <OButton @click="toggle3(true)">Open to parent</OButton>
-    <ODialog v-model:visible="showDlg3" @change="onChane">
+    <ODialog v-model:visible="showDlg3" :wrapper="null" @change="onChane">
       <template #header>Dialog Title</template>
       This is Dialog
       <template #footer>
         <div class="dlg-action">
-          <OButton color="primary" variant="solid" @click="toggle(false)">确定</OButton>
+          <OButton color="primary" variant="solid" @click="toggle3(false)">确定</OButton>
           <OButton @click="toggle3(false)">取消</OButton>
         </div>
       </template>
@@ -90,7 +90,7 @@ const onChane = (v: boolean) => {
       This is Dialog
       <template #footer>
         <div class="dlg-action">
-          <OButton color="primary" variant="solid" @click="toggle(false)">确定</OButton>
+          <OButton color="primary" variant="solid" @click="toggle4(false)">确定</OButton>
           <OButton @click="toggle4(false)">取消</OButton>
         </div>
       </template>
diff --git a/packages/opendesign/src/components/dialog/style/index.scss b/packages/opendesign/src/components/dialog/style/index.scss
index 2105ddcd686c565f3e4f757cfe5bda1d58187c38..0cf71ab16f2c80764eeed4fe688b6dcb7cbbe824 100644
--- a/packages/opendesign/src/components/dialog/style/index.scss
+++ b/packages/opendesign/src/components/dialog/style/index.scss
@@ -17,6 +17,7 @@
   color: var(--dlg-close-color);
   display: flex;
   transition: transform var(--o-easing-standard) var(--o-duration-m2);
+  cursor: pointer;
   &:hover {
     color: var(--dlg-close-color-hover);
   }
diff --git a/packages/opendesign/src/components/figure/OFigure.vue b/packages/opendesign/src/components/figure/OFigure.vue
index 5e01eacc38e4c80a5cd96d3ffd1fa98f9d8f5c16..1550a0bceeeab9068c76ad9b8ca18f1b23410545 100644
--- a/packages/opendesign/src/components/figure/OFigure.vue
+++ b/packages/opendesign/src/components/figure/OFigure.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, computed, onMounted } from 'vue';
-import { PrestColorPool } from '../_shared/utils';
+import { PrestColorPool } from '../_shared/global';
 import HtmlTag from '../_shared/components/html-tag';
 
 import { figureProps } from './types';
@@ -12,7 +12,7 @@ const imgRef = ref<HTMLImageElement | null>(null);
 
 const isLoading = ref(true);
 const isError = ref(false);
-const prestColor = props.colorful ? PrestColorPool.pick() : '';
+const prestColor = props.colorful ? PrestColorPool.value.pick() : '';
 
 const bgSrc = computed(() => {
   if (props.background && props.ratio) {
diff --git a/packages/opendesign/src/components/figure/style/index.scss b/packages/opendesign/src/components/figure/style/index.scss
index e1fb34c1a3573af37c03664f5382859901905a48..4dcdf4a2e8ad3d3351cd42e36c8ae3bb1db028ce 100644
--- a/packages/opendesign/src/components/figure/style/index.scss
+++ b/packages/opendesign/src/components/figure/style/index.scss
@@ -4,6 +4,8 @@
   display: inline-flex;
   overflow: hidden;
   transition: background-color var(--o-duration-m2);
+  border-radius: var(--figure-radius);
+
   &.is-loading {
     &.is-colorful {
       background-color: var(--figure-prest-color);
@@ -65,3 +67,18 @@
   object-fit: var(--figure-fit);
   object-position: var(--figure-position);
 }
+
+.o-figure-view {
+  cursor: zoom-in;
+}
+
+.o-figure-view-layer {
+  width: 100%;
+  height: 100%;
+  cursor: zoom-out;
+}
+.o-figure-view-figure {
+  width: 100%;
+  height: 100%;
+  --figure-fit: contain;
+}
diff --git a/packages/opendesign/src/components/flex/OFlex.vue b/packages/opendesign/src/components/flex/OFlex.vue
index e00ed3b0aab4cee16b936c744fa56342251651d3..6dbb2942afeadfcb043cdd41220d129c383c0144 100644
--- a/packages/opendesign/src/components/flex/OFlex.vue
+++ b/packages/opendesign/src/components/flex/OFlex.vue
@@ -25,6 +25,12 @@ const getMediaGap = (opts?: FlexMediaT) => {
 const gap = computed(() => {
   return getMediaGap(props);
 });
+const x3lGap = computed(() => {
+  return getMediaGap(props.x3l);
+});
+const x2lGap = computed(() => {
+  return getMediaGap(props.x2l);
+});
 const xlGap = computed(() => {
   return getMediaGap(props.xl);
 });
@@ -65,6 +71,10 @@ const xsGap = computed(() => {
       '--flex-lg-gap-y': lgGap?.y,
       '--flex-xl-gap-x': xlGap?.x,
       '--flex-xl-gap-y': xlGap?.y,
+      '--flex-x2l-gap-x': x2lGap?.x,
+      '--flex-x2l-gap-y': x2lGap?.y,
+      '--flex-x3l-gap-x': x3lGap?.x,
+      '--flex-x3l-gap-y': x3lGap?.y,
     }"
     :class="{
       'o-flex-xs': !!props.xs,
@@ -72,6 +82,8 @@ const xsGap = computed(() => {
       'o-flex-md': !!props.md,
       'o-flex-lg': !!props.lg,
       'o-flex-xl': !!props.xl,
+      'o-flex-x2l': !!props.x2l,
+      'o-flex-x3l': !!props.x3l,
     }"
   >
     <slot></slot>
diff --git a/packages/opendesign/src/components/flex/OFlexItem.vue b/packages/opendesign/src/components/flex/OFlexItem.vue
index d7c38582c12f7783e010954e5f2cc4769c63332a..896cf68991d9d4fe2db8e89e3219a017220f461f 100644
--- a/packages/opendesign/src/components/flex/OFlexItem.vue
+++ b/packages/opendesign/src/components/flex/OFlexItem.vue
@@ -14,6 +14,8 @@ const props = defineProps(flexItemProps);
       '--flex-item-md-flex': props.md?.flex,
       '--flex-item-lg-flex': props.lg?.flex,
       '--flex-item-xl-flex': props.xl?.flex,
+      '--flex-item-x2l-flex': props.x2l?.flex,
+      '--flex-item-x3l-flex': props.x3l?.flex,
     }"
     :class="{
       'o-flex-item-xs': !!props.xs,
@@ -21,6 +23,8 @@ const props = defineProps(flexItemProps);
       'o-flex-item-md': !!props.md,
       'o-flex-item-lg': !!props.lg,
       'o-flex-item-xl': !!props.xl,
+      'o-flex-item-x2l': !!props.x2l,
+      'o-flex-item-x3l': !!props.x3l,
     }"
   >
     <slot></slot>
diff --git a/packages/opendesign/src/components/flex/__demo__/FlexBasic.vue b/packages/opendesign/src/components/flex/__demo__/FlexBasic.vue
index 58521b1d793a12bc1f3599bd8b85da3fcbb805a0..c39f7011e5fcbaa5d5e1e93faa9bf66c6bb372b9 100644
--- a/packages/opendesign/src/components/flex/__demo__/FlexBasic.vue
+++ b/packages/opendesign/src/components/flex/__demo__/FlexBasic.vue
@@ -42,9 +42,19 @@ import { OFlex, OFlexItem } from '../index';
       </OFlexItem>
     </OFlex>
     <br />
-    <OFlex gap-x="16px" gap-y="16px" :xs="{ gap: '4px' }" :sm="{ gap: '8px' }" :md="{ gap: '16px' }" :lg="{ gap: '24px' }" :xl="{ gap: '32px' }">
+    <OFlex
+      gap-x="16px"
+      gap-y="16px"
+      :xs="{ gap: '4px' }"
+      :sm="{ gap: '8px' }"
+      :md="{ gap: '16px' }"
+      :lg="{ gap: '24px' }"
+      :xl="{ gap: '32px' }"
+      :x2l="{ gap: '48px' }"
+      :x3l="{ gap: '64px' }"
+    >
       <OFlexItem v-for="item in 10" :key="item" flex="20%" class="colored">
-        <div class="box">{{ item }}</div>
+        <div class="box">111{{ item }}</div>
       </OFlexItem>
     </OFlex>
     <br />
@@ -53,6 +63,12 @@ import { OFlex, OFlexItem } from '../index';
       <div class="colored"><div class="box">box</div></div>
       <div class="colored"><div class="box">box</div></div>
     </OFlex>
+    <br />
+    <OFlex gap="16px">
+      <OFlexItem class="colored"><div class="box">box</div></OFlexItem>
+      <OFlexItem class="colored"><div class="box">box</div></OFlexItem>
+      <OFlexItem class="colored"><div class="box">box</div></OFlexItem>
+    </OFlex>
   </div>
 </template>
 <style lang="scss">
diff --git a/packages/opendesign/src/components/flex/index.ts b/packages/opendesign/src/components/flex/index.ts
index 23a0d43f5d10b1445e18505bb151cc520387da2c..55c72fd1685928655fa6afa60c1be0b6aab1d858 100644
--- a/packages/opendesign/src/components/flex/index.ts
+++ b/packages/opendesign/src/components/flex/index.ts
@@ -6,6 +6,7 @@ const OFlex = Object.assign(_OFlex, {
   OFlexItem,
   install(app: App) {
     app.component(_OFlex.name, _OFlex);
+    app.component(OFlexItem.name, OFlexItem);
   },
 });
 
diff --git a/packages/opendesign/src/components/flex/style/index.scss b/packages/opendesign/src/components/flex/style/index.scss
index 50064341d95d8dd69a2315fb94e5a7b419303e47..1c29b1565cb1852bdda01794df1510fef67c22a1 100644
--- a/packages/opendesign/src/components/flex/style/index.scss
+++ b/packages/opendesign/src/components/flex/style/index.scss
@@ -1,10 +1,11 @@
 @use './var.scss';
 $media-xs: 576px;
 $media-sm: 720px;
-$media-md: 1200px;
-$media-lg: 1440px;
-$media-xl: 1680px;
-$media-xxl: 1920px;
+$media-md: 960px;
+$media-lg: 1200px;
+$media-xl: 1440px;
+$media-x2l: 1680px;
+$media-x3l: 1920px;
 
 .o-flex {
   display: flex;
@@ -28,7 +29,24 @@ $media-xxl: 1920px;
 .o-flex-item {
   flex: var(--flex-item-flex);
 }
-
+@media (max-width: $media-x3l) {
+  .o-flex-xl {
+    --flex-item-gap-x: calc(var(--flex-x3l-gap-x) / 2);
+    --flex-item-gap-y: var(--flex-x3l-gap-y);
+  }
+  .o-flex-item-xl {
+    flex: var(--flex-item-x3l-flex);
+  }
+}
+@media (max-width: $media-x2l) {
+  .o-flex-xl {
+    --flex-item-gap-x: calc(var(--flex-x2l-gap-x) / 2);
+    --flex-item-gap-y: var(--flex-x2l-gap-y);
+  }
+  .o-flex-item-xl {
+    flex: var(--flex-item-x2l-flex);
+  }
+}
 @media (max-width: $media-xl) {
   .o-flex-xl {
     --flex-item-gap-x: calc(var(--flex-xl-gap-x) / 2);
diff --git a/packages/opendesign/src/components/flex/types.ts b/packages/opendesign/src/components/flex/types.ts
index ec43a113fd3a4065ef05cb455235a381ae52a4bc..e748713d5ca185a88f18c2e252144a51774adcd2 100644
--- a/packages/opendesign/src/components/flex/types.ts
+++ b/packages/opendesign/src/components/flex/types.ts
@@ -71,23 +71,35 @@ export const flexProps = {
     type: Object as PropType<FlexMediaT>,
   },
   /**
-   * @media (max-width: 1200px)
+   * @media (max-width: 960px)
    */
   md: {
     type: Object as PropType<FlexMediaT>,
   },
   /**
-   * @media (max-width: 1440px)
+   * @media (max-width: 1200px)
    */
   lg: {
     type: Object as PropType<FlexMediaT>,
   },
   /**
-   * @media (max-width: 1680px)
+   * @media (max-width: 1440px)
    */
   xl: {
     type: Object as PropType<FlexMediaT>,
   },
+  /**
+   * @media (max-width: 1680px)
+   */
+  x2l: {
+    type: Object as PropType<FlexMediaT>,
+  },
+  /**
+   * @media (max-width: 1920px)
+   */
+  x3l: {
+    type: Object as PropType<FlexMediaT>,
+  },
 };
 
 export const flexItemProps = {
@@ -96,7 +108,7 @@ export const flexItemProps = {
    */
   flex: {
     type: String,
-    default: '0 1 auto',
+    default: '1 0 auto',
   },
   /**
    * 同 align-self
@@ -111,29 +123,41 @@ export const flexItemProps = {
     type: Object as PropType<FlexItemMediaT>,
   },
   /**
-   * @media (max-width: 721px)
+   * @media (max-width: 720px)
    */
   sm: {
     type: Object as PropType<FlexItemMediaT>,
   },
   /**
-   * @media (max-width: 1201px)
+   * @media (max-width: 960px)
    */
   md: {
     type: Object as PropType<FlexItemMediaT>,
   },
   /**
-   * @media (max-width: 1441px)
+   * @media (max-width: 1200px)
    */
   lg: {
     type: Object as PropType<FlexItemMediaT>,
   },
   /**
-   * @media (max-width: 1681px)
+   * @media (max-width: 1440px)
    */
   xl: {
     type: Object as PropType<FlexItemMediaT>,
   },
+  /**
+   * @media (max-width: 1680px)
+   */
+  x2l: {
+    type: Object as PropType<FlexItemMediaT>,
+  },
+  /**
+   * @media (max-width: 1920px)
+   */
+  x3l: {
+    type: Object as PropType<FlexItemMediaT>,
+  },
 };
 
 export type FlexPropsT = ExtractPropTypes<typeof flexProps>;
diff --git a/packages/opendesign/src/components/grid/index.ts b/packages/opendesign/src/components/grid/index.ts
index 88ecc8a4bcf0a1ba1ce661b1b77c3e650eb29a2b..32d222e2b81f491c45a05e78711b6bebfe83d6f2 100644
--- a/packages/opendesign/src/components/grid/index.ts
+++ b/packages/opendesign/src/components/grid/index.ts
@@ -6,6 +6,7 @@ const ORow = Object.assign(_ORow, {
   OCol,
   install(app: App) {
     app.component(_ORow.name, _ORow);
+    app.component(OCol.name, OCol);
   },
 });
 
diff --git a/packages/opendesign/src/components/hooks/use-intersection-observer.ts b/packages/opendesign/src/components/hooks/use-intersection-observer.ts
index 07d9366948094f8e3f8d7afb92e1302f65870466..366c519dff7bb60a481666b9f8df75f406045fb8 100644
--- a/packages/opendesign/src/components/hooks/use-intersection-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-intersection-observer.ts
@@ -1,4 +1,3 @@
-// import IntersectionObserver from 'intersection-observer-polyfill';
 import { isFunction } from '../_shared/is';
 
 export type IntersectionListenerT = (entry: IntersectionObserverEntry) => void;
diff --git a/packages/opendesign/src/components/hooks/use-resize-observer.ts b/packages/opendesign/src/components/hooks/use-resize-observer.ts
index c6c536ccbad75148bb093e0f2caa7f27c03843cb..deccd7d67c4c3aa518fa2c4aab4546b6f5977a7e 100644
--- a/packages/opendesign/src/components/hooks/use-resize-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-resize-observer.ts
@@ -1,4 +1,3 @@
-// import ResizeObserver from 'resize-observer-polyfill';
 import { isFunction } from '../_shared/is';
 
 /**
diff --git a/packages/opendesign/src/components/layer/OLayer.vue b/packages/opendesign/src/components/layer/OLayer.vue
index 5d1092d7548ae519fe0ab7dacbf6a3cb89c08595..ffc542d63646ea0428995139b23dd32cd46b034b 100644
--- a/packages/opendesign/src/components/layer/OLayer.vue
+++ b/packages/opendesign/src/components/layer/OLayer.vue
@@ -4,7 +4,7 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { ref, watch, computed, onMounted } from 'vue';
+import { ref, watch, computed, onMounted, nextTick } from 'vue';
 import { layerProps } from './types';
 
 const props = defineProps(layerProps);
@@ -18,38 +18,28 @@ const emits = defineEmits<{
 const visible = ref(props.visible);
 const toMount = ref(props.visible);
 
-const wrapper = computed(() => {
-  if (props.wrapper) {
-    return props.wrapper;
-  } else if (props.toBody) {
-    return 'body';
-  }
-  return null;
-});
-
 const isToBody = ref(false);
-
+const LayerClass = {
+  OPEN: 'o-layer-open',
+};
 // 挂载目标
 let wrapperEl: HTMLElement | null = null;
-const getWrapperEl = () => {
-  if (!wrapperEl && wrapper.value) {
-    if (typeof wrapper.value === 'string') {
-      wrapperEl = document.querySelector(wrapper.value);
-    } else {
-      wrapperEl = wrapper.value;
-    }
-  }
-  isToBody.value = wrapperEl === document.body;
-};
+const layerRef = ref<HTMLElement | null>(null);
+
 const handleWrapperScroll = () => {
-  getWrapperEl();
-  if (wrapperEl) {
-    if (visible.value) {
-      wrapperEl.classList.add('o-layer-open');
-    } else {
-      wrapperEl.classList.remove('o-layer-open');
+  nextTick(() => {
+    if (!wrapperEl && layerRef.value) {
+      wrapperEl = layerRef.value.offsetParent as HTMLElement;
+      isToBody.value = wrapperEl === document.body;
     }
-  }
+    if (wrapperEl) {
+      if (visible.value) {
+        wrapperEl.classList.add(LayerClass.OPEN);
+      } else {
+        wrapperEl.classList.remove(LayerClass.OPEN);
+      }
+    }
+  });
 };
 
 watch(
@@ -63,22 +53,19 @@ watch(
   }
 );
 
-const show = () => {
-  if (!visible.value) {
-    visible.value = true;
-    emits('update:visible', true);
-    emits('change', true);
-    handleWrapperScroll();
+const toggle = (show?: boolean) => {
+  if (visible.value === show) {
+    return;
   }
-};
 
-const hide = () => {
-  if (visible.value) {
-    visible.value = false;
-    emits('update:visible', false);
-    emits('change', false);
-    handleWrapperScroll();
+  if (show === undefined) {
+    visible.value = !visible.value;
+  } else {
+    visible.value = show;
   }
+  emits('update:visible', visible.value);
+  emits('change', visible.value);
+  handleWrapperScroll();
 };
 
 const isMounted = computed(() => {
@@ -99,7 +86,7 @@ const handleTransitionEnd = () => {
 
 const onMaskClick = (e: MouseEvent) => {
   if (props.maskClose) {
-    hide();
+    toggle(false);
   }
   emits('click:mask', e);
 };
@@ -111,13 +98,12 @@ onMounted(() => {
 });
 
 defineExpose({
-  show,
-  hide,
+  toggle,
 });
 </script>
 <template>
-  <teleport :to="wrapper" :disabled="!wrapper">
-    <div v-if="isMounted" v-show="visible || toMount" class="o-layer" v-bind="$attrs" :class="{ 'o-layer-to-body': isToBody }">
+  <teleport :to="props.wrapper" :disabled="!props.wrapper">
+    <div v-if="isMounted" v-show="visible || toMount" v-bind="$attrs" ref="layerRef" class="o-layer" :class="{ 'o-layer-to-body': isToBody }">
       <template v-if="props.mask">
         <transition :name="props.maskTransition" :appear="true">
           <div v-show="visible" class="o-layer-mask" @click="onMaskClick"></div>
diff --git a/packages/opendesign/src/components/layer/__demo__/LayerBasic.vue b/packages/opendesign/src/components/layer/__demo__/LayerBasic.vue
index d8b513cb7a1fc07f60bbe4cc9f8e31702c06b1ae..c366adbb47b6d21943f1377cd68aa08e76b27869 100644
--- a/packages/opendesign/src/components/layer/__demo__/LayerBasic.vue
+++ b/packages/opendesign/src/components/layer/__demo__/LayerBasic.vue
@@ -32,6 +32,15 @@ const toggle3 = (show?: boolean) => {
   }
 };
 
+const show4 = ref(false);
+const toggle4 = (show?: boolean) => {
+  if (show === undefined) {
+    show4.value = !show4.value;
+  } else {
+    show4.value = show;
+  }
+};
+
 const onChane = (v: boolean) => {
   console.log('dialog change', v);
 };
@@ -64,6 +73,14 @@ const onChane = (v: boolean) => {
         <OButton @click="toggle3()">Close</OButton>
       </div>
     </OLayer>
+    <OButton @click="toggle4(true)">Open to Parent</OButton>
+    <OLayer v-model:visible="show4" :wrapper="null" @change="onChane">
+      <div class="box">
+        <h2>title</h2>
+        <p>this is content this is content this is content this is content this is content this is content this is content this is content</p>
+        <OButton @click="toggle4()">Close</OButton>
+      </div>
+    </OLayer>
   </section>
 </template>
 <style lang="scss" scoped>
diff --git a/packages/opendesign/src/components/layer/types.ts b/packages/opendesign/src/components/layer/types.ts
index b6efb5e889c883167096f11d5dfce8ec8be79968..a3f8ab5c8778fb72e4df143c0461652c9c296be2 100644
--- a/packages/opendesign/src/components/layer/types.ts
+++ b/packages/opendesign/src/components/layer/types.ts
@@ -7,19 +7,14 @@ export const layerProps = {
    */
   visible: {
     type: Boolean,
+    default: false,
   },
   /**
-   * 挂载容器，默认为当前父元素
+   * 挂载容器，默认为body, null代表当前父元素
    */
   wrapper: {
     type: [String, Object] as PropType<string | HTMLElement | null>,
-  },
-  /**
-   * 是否挂载到body
-   */
-  toBody: {
-    type: Boolean,
-    default: false,
+    default: 'body',
   },
   /**
    * 是否在隐藏时unmout
@@ -33,6 +28,7 @@ export const layerProps = {
    */
   mainClass: {
     type: [String, Array] as PropType<string | any[]>,
+    default: '',
   },
   /**
    * main过渡名称
diff --git a/packages/opendesign/src/components/loading/OLoading.vue b/packages/opendesign/src/components/loading/OLoading.vue
index 9f6891ea454f449d0bf2029a6d0b73d791a514a9..101d5cdb495818d5a25ab14b09877781e9ede7c5 100644
--- a/packages/opendesign/src/components/loading/OLoading.vue
+++ b/packages/opendesign/src/components/loading/OLoading.vue
@@ -15,11 +15,8 @@ const emits = defineEmits<{
 const layerRef = ref<InstanceType<typeof OLayer> | null>(null);
 
 defineExpose({
-  show() {
-    layerRef.value?.show();
-  },
-  hide() {
-    layerRef.value?.hide();
+  toggle(show?: boolean) {
+    layerRef.value?.toggle(show);
   },
 });
 </script>
@@ -29,7 +26,6 @@ defineExpose({
     class="o-loading"
     :visible="props.visible"
     :wrapper="props.wrapper"
-    :to-body="props.toBody"
     :unmount-on-hide="props.unmountOnHide"
     :main-class="mergeClass('o-loading-main', props.mainClass)"
     :main-transition="props.mainTransition"
@@ -41,10 +37,13 @@ defineExpose({
   >
     <slot>
       <div class="o-loading-icon">
-        <slot name="icon"><IconLoading class="o-rotating" /></slot>
+        <slot name="icon">
+          <component :is="props.icon" v-if="props.icon" :class="{ 'o-rotating': props.iconRotating }" />
+          <IconLoading v-else class="o-rotating" />
+        </slot>
       </div>
-      <div v-if="$slots.label" class="o-loading-label">
-        <slot name="label"></slot>
+      <div v-if="$slots.label || props.label" class="o-loading-label">
+        <slot name="label">{{ props.label }}</slot>
       </div>
     </slot>
   </OLayer>
diff --git a/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue b/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue
index 9dc5c8408e7b79bcc5ee1cf4d9f6364330c3d3b3..9f9429f0c74929a2913ed0c424bdbf3f6dd24092 100644
--- a/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue
+++ b/packages/opendesign/src/components/loading/__demo__/LoadingBasic.vue
@@ -15,44 +15,47 @@ const showLoading1 = () => {
 
 const show2 = ref(false);
 const show3 = ref(false);
+const show4 = ref(false);
 
 const box1 = ref();
 const l1 = useLoading();
-const l2 = useLoading(box1, undefined);
+const l2 = useLoading(box1, {
+  label: 'loading',
+  icon: IconAdd,
+  iconRotating: true,
+});
 const toggleLoading1 = () => {
-  l1.show();
+  l1.toggle(true);
   setTimeout(() => {
-    l1.hide();
+    l1.toggle(false);
   }, 1000);
 };
 const toggleLoading2 = () => {
-  l2.show();
+  l2.toggle();
 };
 </script>
 <template>
   <h4>全局</h4>
   <OButton @click="showLoading1">show1:{{ show1 }}</OButton>
-  <OLoading v-model:visible="show1" to-body />
+  <OLoading v-model:visible="show1" />
   <h4>局部</h4>
   <OButton @click="show2 = !show2">show2:{{ show2 }}</OButton>
   <section>
     <div class="box">
       show2
-      <OLoading v-model:visible="show2" />
+      <OLoading v-model:visible="show2" :wrapper="null" />
     </div>
     <div class="box">
       show2
-      <OLoading v-model:visible="show2">自定义<IconAdd class="o-rotating" /></OLoading>
+      <OLoading v-model:visible="show2" :wrapper="null">自定义<IconAdd class="o-rotating" /></OLoading>
     </div>
   </section>
   <h4>指令</h4>
   <OButton @click="show3 = !show3">show3:{{ show3 }}</OButton>
+  <OButton v-loading.body="show4" @click="show4 = !show4">show4 body:{{ show4 }}</OButton>
   <section>
-    <div v-loading="show3" class="box">show3</div>
-    <div class="box">
-      show3
-      <OLoading v-model:visible="show3">自定义<IconAdd class="o-rotating" /></OLoading>
-    </div>
+    <div v-loading="show3" class="box b1">show3</div>
+    <div v-loading.nomask="show3" class="box b2">show3 nomask</div>
   </section>
   <h4>服务</h4>
   <OButton @click="toggleLoading1">service to body</OButton>
diff --git a/packages/opendesign/src/components/loading/__demo__/IndexLoading.vue b/packages/opendesign/src/components/loading/__demo__/TheIndex.vue
similarity index 100%
rename from packages/opendesign/src/components/loading/__demo__/IndexLoading.vue
rename to packages/opendesign/src/components/loading/__demo__/TheIndex.vue
diff --git a/packages/opendesign/src/components/loading/types.ts b/packages/opendesign/src/components/loading/types.ts
index d92afc9504297a36f4c004c7a1c8b49736f222b2..22fa4d689290a51ea777d83f148785ef76f3804a 100644
--- a/packages/opendesign/src/components/loading/types.ts
+++ b/packages/opendesign/src/components/loading/types.ts
@@ -6,6 +6,24 @@ const { maskClose, ...extractProps } = layerProps;
 
 export const loadingProps = {
   ...extractProps,
+  /**
+   * loading文本
+   */
+  label: {
+    type: String,
+  },
+  /**
+   * loading图标
+   */
+  icon: {
+    type: Object,
+  },
+  /**
+   * loading图标是否旋转
+   */
+  iconRotating: {
+    type: Boolean,
+  },
 };
 
 export type LoadingPropsT = ExtractPropTypes<typeof loadingProps>;
diff --git a/packages/opendesign/src/components/loading/use-loading.ts b/packages/opendesign/src/components/loading/use-loading.ts
index 4b8800c3eee830a6a4b3cfa57f185f86261d5884..8804e17a033fb8bab4a01bb7058cbca57eb079ef 100644
--- a/packages/opendesign/src/components/loading/use-loading.ts
+++ b/packages/opendesign/src/components/loading/use-loading.ts
@@ -1,8 +1,8 @@
-import { createVNode, render, isRef, Ref, watch, ComponentInternalInstance } from 'vue';
+import { createVNode, render, isRef, Ref, watch, ComponentInternalInstance, onMounted } from 'vue';
 import OLoading from './OLoading.vue';
 import { LoadingPropsT } from './types';
 
-const initLoading = (opt?: LoadingPropsT, el?: HTMLElement) => {
+const initLoading = (opt?: Partial<LoadingPropsT>, el?: HTMLElement) => {
   const vnode = createVNode(OLoading, Object.assign(opt || {}, { wrapper: el }));
   if (el) {
     render(vnode, el);
@@ -10,33 +10,32 @@ const initLoading = (opt?: LoadingPropsT, el?: HTMLElement) => {
   return vnode.component;
 };
 
-const useLoading = (wrap: Ref<HTMLElement> | HTMLElement | string = 'body', opt?: LoadingPropsT) => {
+const useLoading = (wrap: Ref<HTMLElement> | HTMLElement | string = 'body', opt?: Partial<LoadingPropsT>) => {
   let instance: ComponentInternalInstance | null = null;
-  if (typeof wrap === 'string') {
-    const el = document.querySelector(wrap);
-    if (el) {
-      instance = initLoading(opt, el as HTMLElement);
-    }
-  } else if ((wrap as HTMLElement).nodeType === 1) {
-    instance = initLoading(opt, wrap as HTMLElement);
-  } else if (isRef(wrap)) {
+  if (isRef(wrap)) {
     watch(
       () => wrap.value,
       (el) => {
         instance = initLoading(opt, el);
+      },
+      {
+        immediate: true,
       }
     );
+  } else if ((wrap as HTMLElement).nodeType === 1) {
+    instance = initLoading(opt, wrap as HTMLElement);
+  } else if (typeof wrap === 'string') {
+    onMounted(() => {
+      const el = document.querySelector(wrap);
+      if (el) {
+        instance = initLoading(opt, el as HTMLElement);
+      }
+    });
   }
+
   return {
-    show() {
-      if (instance) {
-        instance.exposed?.show();
-      }
-    },
-    hide() {
-      if (instance) {
-        instance.exposed?.hide();
-      }
+    toggle(show?: boolean) {
+      instance?.exposed?.toggle(show);
     },
   };
 };
diff --git a/packages/opendesign/src/components/loading/v-loading.ts b/packages/opendesign/src/components/loading/v-loading.ts
index a9ed34832f6f8b9cfba5c400046858fe3fd04259..61d89219507cc1ff23b95ed09c8d28248f4e0c1d 100644
--- a/packages/opendesign/src/components/loading/v-loading.ts
+++ b/packages/opendesign/src/components/loading/v-loading.ts
@@ -3,20 +3,29 @@ import OLoading from './OLoading.vue';
 
 const vLoading: ObjectDirective = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
-    const vnode = createVNode(OLoading, { show: binding.value });
-    render(vnode, el);
+    const vnode = createVNode(OLoading, {
+      visible: binding.value,
+      wrapper: binding.modifiers.body ? 'body' : null,
+      mask: !binding.modifiers.nomask,
+    });
+
+    if (binding.modifiers.body) {
+      render(vnode, document.body);
+    } else {
+      render(vnode, el);
+    }
+
     const vm = vnode.component;
     (el as any).__loading_data = {
       instance: vm,
     };
   },
   updated(el: HTMLElement, binding: DirectiveBinding) {
-    const data = (el as any).__loading_data;
-    if (data) {
-      if (binding.value) {
-        data.instance.exposed.show();
-      } else {
-        data.instance.exposed.hide();
+    if (binding.value !== binding.oldValue) {
+      const data = (el as any).__loading_data;
+
+      if (data) {
+        data.instance.exposed.toggle(!!binding.value);
       }
     }
   },
diff --git a/packages/opendesign/src/components/style/common.scss b/packages/opendesign/src/components/style/common.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a8197ec6c4a86e2b0e74a16d7df6eb5f3a2e69ba
--- /dev/null
+++ b/packages/opendesign/src/components/style/common.scss
@@ -0,0 +1,8 @@
+$text-types: display1, display2, display3, display4, display5, h1, h2, h3, h4, text1, text2, tip1, tip2;
+
+@each $type in $text-types {
+  .o-txt-#{$type} {
+    font-size: var(--o-font_size-#{$type});
+    line-height: var(--o-line_height-#{$type});
+  }
+}
diff --git a/packages/opendesign/src/components/style/icon.scss b/packages/opendesign/src/components/style/icon.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1f8eb89978d40bd69dbbfe579700ffe2be25bc12
--- /dev/null
+++ b/packages/opendesign/src/components/style/icon.scss
@@ -0,0 +1,21 @@
+// icons
+.o-icon {
+  --icon-g1: var(--o-color-text1);
+  --icon-g2: var(--o-color-primary1);
+}
+
+.o-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.2em;
+  color: inherit;
+  font-style: normal;
+  outline: none;
+  &.type-stroke {
+    stroke: currentColor;
+  }
+  &.type-fill {
+    fill: currentColor;
+  }
+}
diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss
index 8fa3561de81283c5e417b554db019b282cfc7ec4..c64c03a288eaa40f05ca1a865085405f11a0be4f 100644
--- a/packages/opendesign/src/components/style/index.scss
+++ b/packages/opendesign/src/components/style/index.scss
@@ -1,32 +1,12 @@
-@import './animation.scss';
+@use './animation.scss';
+@use './common.scss';
+@use './icon.scss';
 
 [class^='o-'],
-[class^='o-'] * {
+[class^='o-'] {
   box-sizing: border-box;
 }
 
 :root {
   --o-z-index-base: 100;
 }
-
-// icons
-.o-icon {
-  --icon-g1: var(--o-color-text1);
-  --icon-g2: var(--o-color-primary1);
-}
-
-.o-icon {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.2em;
-  color: inherit;
-  font-style: normal;
-  outline: none;
-  &.type-stroke {
-    stroke: currentColor;
-  }
-  &.type-fill {
-    fill: currentColor;
-  }
-}
diff --git a/packages/opendesign/src/components/tab/OTab.vue b/packages/opendesign/src/components/tab/OTab.vue
index 1a1f7cb16abc83def1eb0a78ce7b6cfed17fe87c..f6664c1315c5198d493b44e403ea4b384537f180 100644
--- a/packages/opendesign/src/components/tab/OTab.vue
+++ b/packages/opendesign/src/components/tab/OTab.vue
@@ -102,12 +102,11 @@ const onHeadResize = () => {
 };
 </script>
 <template>
-  <div class="o-tab">
+  <div class="o-tab" :class="[`o-tab-${props.variant}`]">
     <OResizeObserver @resize="onHeadResize">
       <div
         class="o-tab-head"
         :class="[
-          `o-tab-${props.variant}`,
           {
             'with-act': $slots.suffix || $slots.prefix,
             'show-line': props.line,
diff --git a/packages/opendesign/src/components/tab/index.ts b/packages/opendesign/src/components/tab/index.ts
index 124c7219ed93cd206f2c89cec72d254586b47fe1..fbdabe79799ac6ec8bc117b2cdb2525a3be44ef4 100644
--- a/packages/opendesign/src/components/tab/index.ts
+++ b/packages/opendesign/src/components/tab/index.ts
@@ -6,6 +6,7 @@ const OTab = Object.assign(_OTab, {
   OTabPane,
   install(app: App) {
     app.component(_OTab.name, _OTab);
+    app.component(OTabPane.name, OTabPane);
   },
 });
 
diff --git a/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue b/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
index 3eea2a6c6b0b96b5baf404441415e22be7214166..5d82d9b132ce02fb3309e7a761abfde2121a88dd 100644
--- a/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
+++ b/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
@@ -2,15 +2,15 @@
 import { ref } from 'vue';
 import { OTextarea } from '../index';
 
-const val1 = ref('max width: 300px <OTextarea v-model="val1" auto-height /> <OTextarea v-model="val1" auto-height />');
-const val2 = ref('min width: 100px');
+const val1 = ref('max Height: 300px <OTextarea v-model="val1" auto-height /> <OTextarea v-model="val1" auto-height />');
+const val2 = ref('min Height: 100px');
 setTimeout(() => {
   val1.value = '123';
-  val2.value = 'max width: 300px <OTextarea v-model="val1" auto-height />';
+  val2.value = 'max Height: 300px <OTextarea v-model="val1" auto-height />';
 }, 2000);
 </script>
 <template>
-  <h4>Auto Width</h4>
+  <h4>Auto Height</h4>
   <section>
     <div>
       <OTextarea v-model="val1" auto-height />
diff --git a/packages/opendesign/src/components/vite-env.d.ts b/packages/opendesign/src/components/vite-env.d.ts
index 8fd2afcddd240bd40b8abb86ea88761b3b743645..af36df349a654c7c39061abbf656a6e5b5b48f8c 100644
--- a/packages/opendesign/src/components/vite-env.d.ts
+++ b/packages/opendesign/src/components/vite-env.d.ts
@@ -5,7 +5,3 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
-
-// declare module 'intersection-observer-polyfill' {
-//   export default IntersectionObserver;
-// }
\ No newline at end of file
diff --git a/packages/opendesign/tsconfig.json b/packages/opendesign/tsconfig.json
index 492992fd143df55759e57ba913209e72d6450c2d..d04b701042763ac8a3003722243266e2837556b6 100644
--- a/packages/opendesign/tsconfig.json
+++ b/packages/opendesign/tsconfig.json
@@ -16,11 +16,7 @@
     "skipLibCheck": true,
     "noEmit": true,
     "baseUrl": "./",
-    "paths": {
-      "resize-observer-polyfill": [
-        "node_modules/resize-observer-polyfill"
-      ]
-    }
+    "paths": {}
   },
   "include": [
     "src/**/*.ts",
diff --git a/packages/portal/src/pages/TheHome.vue b/packages/portal/src/pages/TheHome.vue
index 0d550dd4d3e44dbb0a18f58e912d2d8788614387..37855a6c25db7bce1e92eb789a77650c10d6ed94 100644
--- a/packages/portal/src/pages/TheHome.vue
+++ b/packages/portal/src/pages/TheHome.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import '@components/style';
+
 const title = 'Home';
 </script>
 <template>
   <div class="page-demo">
     {{ title }}
+    <h1 class="o-txt-h1">h1</h1>
   </div>
 </template>
 <style lang="scss">
diff --git a/packages/portal/src/pages/TheText.vue b/packages/portal/src/pages/TheText.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a398e42bc994ddc76bcfa82666dc8dc32bbb6884
--- /dev/null
+++ b/packages/portal/src/pages/TheText.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import '@components/style';
+const list = ['display1', 'display2', 'display3', 'display4', 'h1', 'h2', 'h3', 'text1', 'text2', 'tip1', 'tip2'];
+const title = 'Text';
+</script>
+<template>
+  <div class="page-demo">
+    <h1>{{ title }}</h1>
+    <div v-for="t in list" :key="t" :class="[`o-txt-${t}`]">{{ t }}</div>
+  </div>
+</template>
+<style lang="scss">
+.the-home {
+  color: #333;
+}
+</style>
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index c041e9ed9091c45a2f4347f5eab5dabdab9ec158..2d200bb215b62a3fe6c5f45279d7c907cfa8b141 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -8,6 +8,12 @@ export const routes = [
     label: '通用',
     component: TheHome,
   },
+  {
+    path: '/text',
+    name: 'Text',
+    label: '文本 Text',
+    component: () => import('./pages/TheText.vue'),
+  },
   {
     path: '/icons',
     name: 'Icons',
@@ -168,7 +174,7 @@ export const routes = [
     path: '/loading',
     name: 'Loading',
     label: '加载 Loading',
-    component: () => import('@components/loading/__demo__/IndexLoading.vue'),
+    component: () => import('@components/loading/__demo__/TheIndex.vue'),
   },
   {
     path: '/figure',