diff --git a/packages/opendesign/src/_utils/export.ts b/packages/opendesign/src/_utils/export.ts
index b78a3e5b124ff0ba3ad5520d7bfc53c3bf66e6c4..ec65a764cbaf176ea3c573c83e17c79fecd8391a 100644
--- a/packages/opendesign/src/_utils/export.ts
+++ b/packages/opendesign/src/_utils/export.ts
@@ -1,6 +1,6 @@
 export * from './types';
 
-export { initSize, initRound, initZIndex } from './global';
+export { initSize, initRound, initZIndex, initPrestColor, initMediaPoint } from './global';
 
 export * from './init-icons';
 
diff --git a/packages/opendesign/src/carousel/OCarousel.vue b/packages/opendesign/src/carousel/OCarousel.vue
index cc54895b7f19b8434cb5dffad1257e10bb8a5e21..b287e6d350d74a9cb8dd6c407bb34a17438a7b2a 100644
--- a/packages/opendesign/src/carousel/OCarousel.vue
+++ b/packages/opendesign/src/carousel/OCarousel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, computed, onMounted, onUnmounted, provide } from 'vue';
+import { ref, watch, computed, onMounted, onUnmounted, provide, nextTick } from 'vue';
 import { IconChevronLeft, IconChevronRight } from '../_utils/icons';
 import Gallery from './gallery';
 import Toggle from './toggle';
@@ -13,6 +13,7 @@ const props = defineProps(carouselProps);
 const emits = defineEmits<{
   (e: 'before-change', to: number, from: number): void;
   (e: 'change', to: number, from: number): void;
+  (e: 'update:activeIndex', value: number): void;
 }>();
 
 const containerRef = ref<HTMLElement | null>(null);
@@ -62,13 +63,22 @@ const activeSlideByIndex = (index: number): Promise<boolean> => {
     const to = fixIndex(index);
     const from = activeIndex.value;
 
-    if (isChanging || !slideElList.value || to === from) {
-      return Promise.resolve(false);
+    if (isChanging || !slideElList.value) {
+      resolve(false);
+      return;
+    }
+
+    // fix https://gitee.com/openeuler/opendesign-components/issues/I848XL?from=project-issue
+    if (to === from) {
+      resolve(true);
+      return;
     }
+
     isChanging = true;
 
     if (slidesInstance) {
       activeIndex.value = to;
+      emits('update:activeIndex', to);
       slidesInstance.active(to).then(() => {
         isChanging = false;
         resolve(true);
@@ -81,15 +91,19 @@ const activeSlideByIndex = (index: number): Promise<boolean> => {
 };
 
 let timer: number | null = null;
+const isPlaying = ref(isAutoPlay.value);
+
 const pausePlay = () => {
   if (timer) {
     clearInterval(timer);
     timer = null;
+    isPlaying.value = false;
   }
 };
 // TODO 导出增加播放进度
 const startPlay = () => {
   pausePlay();
+  isPlaying.value = true;
   timer = window.setInterval(() => {
     activeSlideByIndex(activeIndex.value + 1);
   }, props.interval);
@@ -99,15 +113,16 @@ const startPlay = () => {
 const activeSlide = (index: number) => {
   // 停止自动播放
   pausePlay();
-
   return activeSlideByIndex(index).then((success) => {
     if (!success) {
       return;
     }
 
     // 恢复自动播放
-    if (props.autoPlay) {
-      startPlay();
+    if (isAutoPlay.value) {
+      setTimeout(() => {
+        startPlay();
+      }, 0);
     }
   });
 };
@@ -124,7 +139,7 @@ const initSlides = () => {
     },
     onTouchend: () => {
       // 恢复自动播放
-      if (props.autoPlay) {
+      if (isAutoPlay.value) {
         startPlay();
       }
     },
@@ -133,6 +148,7 @@ const initSlides = () => {
     },
     onChanged: (to: number, from: number) => {
       activeIndex.value = to;
+      emits('update:activeIndex', to);
       emits('change', to, from);
     },
   };
@@ -177,7 +193,7 @@ watch(
 );
 const init = () => {
   initSlides();
-  if (props.autoPlay) {
+  if (isAutoPlay.value) {
     startPlay();
   }
 };
@@ -221,6 +237,8 @@ defineExpose({
         'o-carousel-visible': initialized,
         'o-carousel-click-to-switch': props.clickToSwitch,
         'o-carousel-hover-arrow': props.arrow === 'hover',
+        'o-carousel-autoplay': isAutoPlay,
+        'is-playing': isPlaying,
       },
       `o-carousel-effect-${props.effect}`,
     ]"
@@ -240,7 +258,6 @@ defineExpose({
             class="o-carousel-indicator-bar"
             :class="{
               'o-carousel-indicator-bar-selected': item - 1 === activeIndex,
-              'is-autoplay': isAutoPlay,
             }"
           >
             <div class="o-carousel-indicator-line"></div>
diff --git a/packages/opendesign/src/carousel/__demo__/CarouselBasic.vue b/packages/opendesign/src/carousel/__demo__/CarouselBasic.vue
index a66069cea8ab31acacb8d06580f6689112df12ad..39d20bb368a9f0faeeecc0e2a1eb886ccf9445cb 100644
--- a/packages/opendesign/src/carousel/__demo__/CarouselBasic.vue
+++ b/packages/opendesign/src/carousel/__demo__/CarouselBasic.vue
@@ -29,6 +29,11 @@ const next = () => {
     console.log('done', idx);
   });
 };
+const active1 = () => {
+  slidesRef.value?.active(1).then(() => {
+    console.log('done', 1);
+  });
+};
 const startPlay = () => {
   slidesRef.value?.play();
 };
@@ -46,16 +51,17 @@ const initSlides = () => {
     <h4>gallery</h4>
     <div class="block">
       <div class="btn" @click="next">Next</div>
+      <div class="btn" @click="active1">slide 1</div>
       <div class="btn" @click="startPlay">Start</div>
       <div class="btn" @click="stopPlay">Pause</div>
       <div class="center"></div>
       <OCarousel
         ref="slidesRef"
+        v-model:active-index="idx"
         indicator-click
         loop
         class="gallery-carousel"
         :auto-play="false"
-        :active-index="idx"
         click-to-switch
         @change="onChange"
         @before-change="onBeforeChange"
@@ -88,10 +94,10 @@ const initSlides = () => {
         effect="toggle"
         indicator-click
         active-class="current-slide"
-        @change="onChange"
-        @before-change="onBeforeChange"
         data-o-theme="dark"
         auto-play
+        @change="onChange"
+        @before-change="onBeforeChange"
       >
         <OCarouselItem v-for="(s, idx) in carousel" :key="s">
           <OFigure class="img" :src="s" />
diff --git a/packages/opendesign/src/carousel/style/style.scss b/packages/opendesign/src/carousel/style/style.scss
index 5c008c263d3b0db78444b66f2c187cd89a3687e5..ba708031328447b141cc7916eb4cdfb32e71efca 100644
--- a/packages/opendesign/src/carousel/style/style.scss
+++ b/packages/opendesign/src/carousel/style/style.scss
@@ -126,19 +126,20 @@
     z-index: 1;
     top: 0;
     left: 0;
-    width: 0;
+    width: 100%;
     height: var(--carousel-indicator-height);
     border-radius: var(--carousel-indicator-height);
     background-color: var(--carousel-indicator-bg-color);
+    transform-origin: 0 center;
   }
 }
 
 @keyframes indicator-grow {
   from {
-    width: 0;
+    transform: scaleX(0);
   }
   to {
-    transform: 100%;
+    transform: scaleX(100%);
   }
 }
 
@@ -146,12 +147,16 @@
   .o-carousel-indicator-line {
     &::after {
       background-color: var(--carousel-indicator-bg-color-selected);
-      width: 100%;
     }
   }
-  &.is-autoplay {
-    .o-carousel-indicator-line {
-      &::after {
+}
+.o-carousel-autoplay {
+  .o-carousel-indicator-line::after {
+    transform: scaleX(0);
+  }
+  &.is-playing {
+    .o-carousel-indicator-bar-selected {
+      .o-carousel-indicator-line::after {
         animation: indicator-grow var(--carousel-interval, '5000ms') var(--o-easing-linear);
       }
     }
diff --git a/packages/opendesign/src/carousel/types.ts b/packages/opendesign/src/carousel/types.ts
index 0c21aba629c03306cc298514a6736505d5dee79e..860df23526616f439acfdd5a8562f53732244db8 100644
--- a/packages/opendesign/src/carousel/types.ts
+++ b/packages/opendesign/src/carousel/types.ts
@@ -2,7 +2,7 @@ import { ExtractPropTypes, PropType } from 'vue';
 
 export const carouselProps = {
   /**
-   * 激活索引
+   * 激活索引 v-model
    */
   activeIndex: {
     type: Number,
diff --git a/packages/opendesign/src/hooks/index.ts b/packages/opendesign/src/hooks/index.ts
index 27f2a3f5522fb8c70f0c3263ed21cea264ff87fa..c544a627cbf10470fa6d21c1a88ee95ac2116d3e 100644
--- a/packages/opendesign/src/hooks/index.ts
+++ b/packages/opendesign/src/hooks/index.ts
@@ -3,3 +3,4 @@ export * from './use-intersection-observer';
 export * from './use-element';
 export * from './use-element-resize';
 export * from './use-element-intersection';
+export * from './use-theme';
diff --git a/packages/opendesign/src/hooks/use-theme.ts b/packages/opendesign/src/hooks/use-theme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fc5b13ff02f9b2f6565ab1082ac537f5c32f8846
--- /dev/null
+++ b/packages/opendesign/src/hooks/use-theme.ts
@@ -0,0 +1,19 @@
+import { ref, watchEffect } from 'vue';
+
+const THEME_KEY = '__theme__';
+
+const currentTheme = ref<string>(localStorage.getItem(THEME_KEY) || 'light');
+
+watchEffect(() => {
+  const theme = currentTheme.value;
+
+  document.documentElement.dataset.oTheme = theme;
+
+  localStorage.setItem(THEME_KEY, theme);
+});
+
+export function useTheme() {
+  return {
+    theme: currentTheme,
+  };
+}
diff --git a/packages/opendesign/src/tab/OTab.vue b/packages/opendesign/src/tab/OTab.vue
index 8d1f8d51df58ef76af9406a6ebf5378edfc5edd0..c7f5449f634d7496955984ee53b49bae2fdcbe6f 100644
--- a/packages/opendesign/src/tab/OTab.vue
+++ b/packages/opendesign/src/tab/OTab.vue
@@ -17,7 +17,7 @@ const emits = defineEmits<{
 }>();
 
 const activeKey = ref(props.modelValue);
-const archorStyle = ref<Record<string, string>>({});
+const anchorStyle = ref<Record<string, string>>({});
 
 const navWrapRef = ref<HTMLElement | null>(null);
 const navsRef = ref<HTMLElement | null>(null);
@@ -74,19 +74,19 @@ watch(
     activeKey.value = v;
   }
 );
-const updateArchor = () => {
+const updateAnchor = () => {
   nextTick(() => {
     if (!activeNavEl) {
       return;
     }
     const { clientWidth, offsetLeft } = activeNavEl;
-    archorStyle.value = {
+    anchorStyle.value = {
       transform: `translate3d(${offsetLeft}px, 0px, 0px)`,
       width: `${clientWidth}px`,
     };
   });
 };
-watch(() => isScroll.value, updateArchor);
+watch(() => isScroll.value, updateAnchor);
 
 // 更新tab当前选中值
 const updateValue = (value: string | number, navEl: HTMLElement | null) => {
@@ -99,7 +99,7 @@ const updateValue = (value: string | number, navEl: HTMLElement | null) => {
 
   if (navEl) {
     activeNavEl = navEl;
-    updateArchor();
+    updateAnchor();
 
     scrollActiveNavIntoView();
   }
@@ -119,7 +119,7 @@ const initValue = (value: string | number, navEl: HTMLElement | null) => {
 
   if (activeKey.value === value && navEl) {
     activeNavEl = navEl;
-    updateArchor();
+    updateAnchor();
   }
 };
 // 删除页签
@@ -153,7 +153,7 @@ provide(tabInjectKey, {
   initValue,
 });
 const onHeadResize = debounceRAF(() => {
-  updateArchor();
+  updateAnchor();
   updateNavScroll();
   scrollActiveNavIntoView();
 });
@@ -189,9 +189,9 @@ const navScroll = (to: 'prev' | 'next') => {
           </div>
           <div ref="navWrapRef" class="o-tab-navs-wrap o-hide-scrollbar" @scroll.passive="onWrapScroll">
             <div ref="navsRef" class="o-tab-nav-list"></div>
-            <div v-if="props.variant === 'text'" class="o-tab-nav-archor" :style="archorStyle">
-              <slot name="archor">
-                <div class="o-tab-nav-archor-line"></div>
+            <div v-if="props.variant === 'text'" class="o-tab-nav-anchor" :style="anchorStyle">
+              <slot name="anchor">
+                <div class="o-tab-nav-anchor-line"></div>
               </slot>
             </div>
           </div>
diff --git a/packages/opendesign/src/tab/style/media.scss b/packages/opendesign/src/tab/style/media.scss
index 415ccf0244e6aa426912fc9a051db833003e093f..a5235a825c23157ffe518cca110976d3110b78e9 100644
--- a/packages/opendesign/src/tab/style/media.scss
+++ b/packages/opendesign/src/tab/style/media.scss
@@ -30,25 +30,24 @@
 
 @include respond-to('<=pad') {
   .o-tab-large {
-    --tab-nav-text-size: var(--o-font_size-text1);
-    --tab-nav-text-height: var(--o-line_height-text1);
+    --tab-nav-text-size: var(--o-font_size-tip1);
+    --tab-nav-text-height: var(--o-line_height-tip1);
     --tab-nav-icon-size: var(--o-icon_size_control-s);
     --tab-nav-gap: 16px;
-    --tab-nav-archor-height: 1px;
+    --tab-nav-anchor-height: 1px;
 
     &.o-tab-text {
       --tab-nav-padding: 0 0 8px;
     }
   }
   .o-tab-medium {
-    --tab-nav-text-size: var(--o-font_size-text1);
-    --tab-nav-text-height: var(--o-line_height-text1);
+    --tab-nav-text-size: var(--o-font_size-tip1);
+    --tab-nav-text-height: var(--o-line_height-tip1);
     --tab-nav-gap: 16px;
-    --tab-nav-archor-height: 1px;
     &.o-tab-text {
       --tab-nav-padding: 0 0 2px;
     }
-    .o-tab-nav-archor-line {
+    .o-tab-nav-anchor-line {
       width: 16px;
     }
   }
@@ -56,12 +55,11 @@
     --tab-nav-text-size: var(--o-font_size-tip1);
     --tab-nav-text-height: var(--o-line_height-tip1);
     --tab-nav-gap: 12px;
-    --tab-nav-archor-height: 1px;
     &.o-tab-text {
       --tab-nav-padding: 0 0 2px;
     }
 
-    .o-tab-nav-archor-line {
+    .o-tab-nav-anchor-line {
       width: 16px;
     }
   }
diff --git a/packages/opendesign/src/tab/style/style.scss b/packages/opendesign/src/tab/style/style.scss
index 6a48f63fb8557bd470fb4141a6ebc3991c1a0568..972189f94cd8aecfa6166ce137b0754cd36b9b4d 100644
--- a/packages/opendesign/src/tab/style/style.scss
+++ b/packages/opendesign/src/tab/style/style.scss
@@ -132,7 +132,7 @@
 .o-tab-head-suffix {
   flex-shrink: 0;
 }
-.o-tab-nav-archor {
+.o-tab-nav-anchor {
   position: absolute;
   left: 0;
   bottom: 0;
@@ -142,11 +142,11 @@
   display: flex;
   justify-content: center;
 }
-.o-tab-nav-archor-line {
+.o-tab-nav-anchor-line {
   width: 100%;
-  height: var(--tab-nav-archor-height);
-  background-color: var(--tab-nav-archor-color);
-  border-radius: var(--tab-nav-archor-height);
+  height: var(--tab-nav-anchor-height);
+  background-color: var(--tab-nav-anchor-color);
+  border-radius: var(--tab-nav-anchor-height);
 }
 .o-tab-nav-close {
   font-size: var(--tab-nav-close-size);
diff --git a/packages/opendesign/src/tab/style/var.scss b/packages/opendesign/src/tab/style/var.scss
index 8d48bb735766759e48686a1c51b24b9633e7f7b7..bc33e83dbf66574ff29b43512fe673edbf6b23e7 100644
--- a/packages/opendesign/src/tab/style/var.scss
+++ b/packages/opendesign/src/tab/style/var.scss
@@ -12,8 +12,8 @@
   --tab-icon-color-disabled: var(--o-color-info4);
 
   --tab-nav-divider: 1px solid var(--o-color-control1);
-  --tab-nav-archor-color: var(--o-color-primary1);
-  --tab-nav-archor-height: 2px;
+  --tab-nav-anchor-color: var(--o-color-primary1);
+  --tab-nav-anchor-height: 2px;
 
   --tab-nav-close-size: var(--o-icon_size_control-xs);
   --tab-nav-icon-size: var(--o-icon_size_control-m);
diff --git a/packages/portal/index.html b/packages/portal/index.html
index 59faba578f841fa14fddaaef228755dc36e3216a..47a21a9b986894f213ee7f5a0f96b0e610c22114 100644
--- a/packages/portal/index.html
+++ b/packages/portal/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>opendesign</title>
   </head>
-  <body data-o-theme="light">
+  <body>
     <div id="app"></div>
     <script type="module" src="src/main.ts"></script>
   </body>
diff --git a/packages/portal/src/components/TheHeader.vue b/packages/portal/src/components/TheHeader.vue
index 0d540d0a99e30fa802ae430b7f14194281313654..297825049358e90dba7ddaa2b831427b7747453d 100644
--- a/packages/portal/src/components/TheHeader.vue
+++ b/packages/portal/src/components/TheHeader.vue
@@ -1,71 +1,55 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, watchEffect } from 'vue';
 import { initIconLoading, initRound, initSize, ODropdown, ODropdownItem } from '@opensig/opendesign/src';
 import { OIconAdd } from '@opensig/opendesign/src/icon-components';
 
 import '../../../opendesign/src/dropdown/style';
 
+import { useTheme } from '@opensig/opendesign/src';
+
 const themeInfo = [
   {
-    prefix: 'default',
-    name: 'opendesign',
+    key: 'light',
+    name: '[light]opendesign',
+  },
+  {
+    key: 'dark',
+    name: '[dark]opendesign',
+  },
+  {
+    key: 'a.light',
+    name: '[light]A',
   },
   {
-    prefix: 'a',
-    name: 'a',
+    key: 'a.dark',
+    name: '[dark]A',
   },
   {
-    prefix: 'k',
-    name: 'k',
+    key: 'k.light',
+    name: '[light]K',
+  },
+  {
+    key: 'k.dark',
+    name: '[dark]K',
   },
 ];
 
-const ATTR_NAME = 'data-o-theme';
-const THEME_KEY = 'o-theme';
-
-const localTheme = localStorage.getItem(THEME_KEY);
-initRound(localTheme?.startsWith('a') ? 'pill' : void 0);
-
-const currentStyle = ref(localTheme?.split('.')[1] || 'light');
-const currentThemeIdx = ref(
-  Math.max(
-    themeInfo.findIndex((item) => {
-      return item.prefix === localTheme?.split('.')[0];
-    }),
-    0
-  )
-);
-
-const currentThemeAttr = computed(() => {
-  if (currentThemeIdx.value === 0) {
-    return currentStyle.value;
-  }
+const { theme } = useTheme();
+if (!theme.value) {
+  theme.value = themeInfo[0].key;
+}
 
-  return `${themeInfo[currentThemeIdx.value].prefix}.${currentStyle.value}`;
+const themeName = computed(() => {
+  const themeItem = themeInfo.find((item) => item.key === theme.value);
+  return themeItem ? themeItem.name : '--';
 });
 
-watch(
-  () => currentThemeAttr.value,
-  (val) => {
-    document.body.setAttribute(ATTR_NAME, val);
-    localStorage.setItem('o-theme', `${themeInfo[currentThemeIdx.value].prefix}.${currentStyle.value}`);
-  },
-  {
-    immediate: true,
-  }
-);
-
-const changeTheme = (idx: number) => {
-  currentThemeIdx.value = idx;
-  if (idx === 1) {
-    initRound('pill');
-  } else {
-    initRound();
-  }
-};
+watchEffect(() => {
+  initRound(theme.value.startsWith('a') ? 'pill' : void 0);
+});
 
-const changeStyle = () => {
-  currentStyle.value = currentStyle.value === 'light' ? 'dark' : 'light';
+const changeTheme = (key: string) => {
+  theme.value = key;
 };
 
 const globalSetting = () => {
@@ -75,7 +59,7 @@ const globalSetting = () => {
 </script>
 <template>
   <div class="the-header">
-    {{ themeInfo[currentThemeIdx].name }}
+    {{ themeName }}
     <div class="tools">
       <div class="tool-item">
         <ODropdown>
@@ -86,11 +70,11 @@ const globalSetting = () => {
             />
           </svg>
           <template #dropdown>
-            <ODropdownItem v-for="(item, index) in themeInfo" :key="item.name" :label="item.name" :value="item.name" @click="changeTheme(index)" />
+            <ODropdownItem v-for="item in themeInfo" :key="item.name" :label="item.name" :value="item.name" @click="changeTheme(item.key)" />
           </template>
         </ODropdown>
       </div>
-      <div class="tool-item" @click="changeStyle">
+      <!-- <div class="tool-item" @click="changeStyle">
         <svg v-if="currentStyle === 'light'" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32">
           <path
             fill="currentColor"
@@ -103,7 +87,7 @@ const globalSetting = () => {
             d="M10.643 6.363c0.282 3.891 1.958 7.55 4.72 10.302 2.744 2.744 6.384 4.407 10.253 4.684-2.324 3.939-6.85 6.016-11.348 5.207s-8.019-4.333-8.828-8.835c-0.808-4.502 1.267-9.033 5.203-11.358v0zM12.523 2.667h-0.187c-6.218 1.884-10.24 7.902-9.604 14.374s5.751 11.591 12.216 12.227c6.466 0.636 12.479-3.389 14.361-9.613v0c0.064-0.242-0.002-0.499-0.173-0.681l-0.12-0.12c-0.138-0.125-0.321-0.187-0.507-0.174h-0.080c-0.54 0.069-1.083 0.104-1.627 0.107-3.89 0.002-7.595-1-10.175-4.58s-3.788-6.795-3.319-10.66c0.015-0.207-0.057-0.41-0.2-0.561l-0.12-0.12c-0.124-0.125-0.291-0.196-0.467-0.2z"
           />
         </svg>
-      </div>
+      </div> -->
       <div class="tool-item" @click="globalSetting">全局设置</div>
     </div>
   </div>