From a2b6ec69a74539e9d69c500cdad2dbc6e92f9a34 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 25 Sep 2023 21:54:58 +0800
Subject: [PATCH 1/6] =?UTF-8?q?[bugfix]=E8=A7=A3=E5=86=B3carousel=E5=BD=93?=
 =?UTF-8?q?=E5=89=8D=E6=BF=80=E6=B4=BB=E7=9A=84=E7=B4=A2=E5=BC=95=EF=BC=88?=
 =?UTF-8?q?activeIndex=EF=BC=89=E4=B8=8E=E8=B0=83=E7=94=A8active=E6=96=B9?=
 =?UTF-8?q?=E6=B3=95=E4=BC=A0=E5=85=A5=E7=9A=84=E7=B4=A2=E5=BC=95=E4=B8=80?=
 =?UTF-8?q?=E8=87=B4=E6=97=B6=EF=BC=8C=E5=B0=86=E4=B8=AD=E6=96=ADcarousel?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=92=AD=E6=94=BE=E8=A1=8C=E4=B8=BA--#I848XL?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/carousel/OCarousel.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/opendesign/src/carousel/OCarousel.vue b/packages/opendesign/src/carousel/OCarousel.vue
index cc54895b..35aac75b 100644
--- a/packages/opendesign/src/carousel/OCarousel.vue
+++ b/packages/opendesign/src/carousel/OCarousel.vue
@@ -62,9 +62,15 @@ const activeSlideByIndex = (index: number): Promise<boolean> => {
     const to = fixIndex(index);
     const from = activeIndex.value;
 
-    if (isChanging || !slideElList.value || to === from) {
+    if (isChanging || !slideElList.value) {
       return Promise.resolve(false);
     }
+
+    // fix https://gitee.com/openeuler/opendesign-components/issues/I848XL?from=project-issue
+    if (to === from) {
+      return Promise.resolve(true);
+    }
+
     isChanging = true;
 
     if (slidesInstance) {
-- 
Gitee


From 01a880ec97f4e3bd5cd51b803851cddb62cc2473 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 25 Sep 2023 22:58:46 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=E8=BD=AE=E6=92=ADactive-index=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BAv-model,=20=E8=87=AA=E5=8A=A8=E8=BD=AE=E6=92=AD?=
 =?UTF-8?q?=E6=97=B6=EF=BC=8C=E9=94=9A=E7=82=B9=E6=8C=87=E7=A4=BA=E4=B8=8D?=
 =?UTF-8?q?=E5=87=86=E7=A1=AE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/carousel/OCarousel.vue     | 29 +++++++++++++------
 .../src/carousel/__demo__/CarouselBasic.vue   | 12 ++++++--
 .../opendesign/src/carousel/style/style.scss  | 19 +++++++-----
 packages/opendesign/src/carousel/types.ts     |  2 +-
 4 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/packages/opendesign/src/carousel/OCarousel.vue b/packages/opendesign/src/carousel/OCarousel.vue
index 35aac75b..b287e6d3 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);
@@ -63,18 +64,21 @@ const activeSlideByIndex = (index: number): Promise<boolean> => {
     const from = activeIndex.value;
 
     if (isChanging || !slideElList.value) {
-      return Promise.resolve(false);
+      resolve(false);
+      return;
     }
 
     // fix https://gitee.com/openeuler/opendesign-components/issues/I848XL?from=project-issue
     if (to === from) {
-      return Promise.resolve(true);
+      resolve(true);
+      return;
     }
 
     isChanging = true;
 
     if (slidesInstance) {
       activeIndex.value = to;
+      emits('update:activeIndex', to);
       slidesInstance.active(to).then(() => {
         isChanging = false;
         resolve(true);
@@ -87,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);
@@ -105,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);
     }
   });
 };
@@ -130,7 +139,7 @@ const initSlides = () => {
     },
     onTouchend: () => {
       // 恢复自动播放
-      if (props.autoPlay) {
+      if (isAutoPlay.value) {
         startPlay();
       }
     },
@@ -139,6 +148,7 @@ const initSlides = () => {
     },
     onChanged: (to: number, from: number) => {
       activeIndex.value = to;
+      emits('update:activeIndex', to);
       emits('change', to, from);
     },
   };
@@ -183,7 +193,7 @@ watch(
 );
 const init = () => {
   initSlides();
-  if (props.autoPlay) {
+  if (isAutoPlay.value) {
     startPlay();
   }
 };
@@ -227,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}`,
     ]"
@@ -246,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 a66069ce..39d20bb3 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 5c008c26..ba708031 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 0c21aba6..860df235 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,
-- 
Gitee


From 2b1fa6c768e4f8a21ad0acc20fcfddfa57049c70 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 25 Sep 2023 23:07:20 +0800
Subject: [PATCH 3/6] =?UTF-8?q?tab=20Medium=E3=80=81small=E9=94=9A?=
 =?UTF-8?q?=E7=82=B9=E9=AB=98=E5=BA=A6=E5=9C=A8=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E4=B8=BA2=20tab=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=AD=97=E5=8F=B7?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/tab/style/media.scss | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/opendesign/src/tab/style/media.scss b/packages/opendesign/src/tab/style/media.scss
index 415ccf02..f72cd8db 100644
--- a/packages/opendesign/src/tab/style/media.scss
+++ b/packages/opendesign/src/tab/style/media.scss
@@ -30,8 +30,8 @@
 
 @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;
@@ -41,10 +41,9 @@
     }
   }
   .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;
     }
@@ -56,7 +55,6 @@
     --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;
     }
-- 
Gitee


From 231ed9af16b06788af35158e99f48c12f16e81f7 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 9 Oct 2023 14:51:52 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E5=A2=9E=E5=8A=A0useTheme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/hooks/use-theme.ts | 40 ++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 packages/opendesign/src/hooks/use-theme.ts

diff --git a/packages/opendesign/src/hooks/use-theme.ts b/packages/opendesign/src/hooks/use-theme.ts
new file mode 100644
index 00000000..aac9ff31
--- /dev/null
+++ b/packages/opendesign/src/hooks/use-theme.ts
@@ -0,0 +1,40 @@
+import { isFunction } from 'src/_utils/is';
+import { ref, watchEffect } from 'vue';
+
+const THEME_KEY = '__theme__';
+
+const currentTheme = ref<string>('');
+
+interface ThemeSetting {
+  onChange?: (theme: string) => void;
+}
+const settings: ThemeSetting = {};
+
+let initialized = false;
+
+const initTheme = (theme?: string, onChange?: ((theme: string) => void) | null) => {
+  currentTheme.value = localStorage.getItem(THEME_KEY) || theme || 'light';
+  if (isFunction(onChange)) {
+    settings.onChange = onChange;
+  }
+  document.documentElement.dataset.theme = currentTheme.value;
+  initialized = true;
+};
+
+watchEffect(() => {
+  if (!initialized) {
+    return;
+  }
+  const theme = currentTheme.value;
+  if (settings.onChange) {
+    settings.onChange(theme);
+  }
+  localStorage.setItem(THEME_KEY, theme);
+});
+
+export function useTheme() {
+  return {
+    initTheme,
+    theme: currentTheme,
+  };
+}
-- 
Gitee


From 173308d764cdd3d2abfa8bf9f89273d5200e3bf0 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 9 Oct 2023 16:02:22 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9demo=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/_utils/export.ts     |  2 +-
 packages/opendesign/src/hooks/index.ts       |  1 +
 packages/opendesign/src/hooks/use-theme.ts   | 29 +------
 packages/portal/index.html                   |  2 +-
 packages/portal/src/components/TheHeader.vue | 90 ++++++++------------
 5 files changed, 44 insertions(+), 80 deletions(-)

diff --git a/packages/opendesign/src/_utils/export.ts b/packages/opendesign/src/_utils/export.ts
index b78a3e5b..ec65a764 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/hooks/index.ts b/packages/opendesign/src/hooks/index.ts
index 27f2a3f5..c544a627 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
index aac9ff31..fc5b13ff 100644
--- a/packages/opendesign/src/hooks/use-theme.ts
+++ b/packages/opendesign/src/hooks/use-theme.ts
@@ -1,40 +1,19 @@
-import { isFunction } from 'src/_utils/is';
 import { ref, watchEffect } from 'vue';
 
 const THEME_KEY = '__theme__';
 
-const currentTheme = ref<string>('');
-
-interface ThemeSetting {
-  onChange?: (theme: string) => void;
-}
-const settings: ThemeSetting = {};
-
-let initialized = false;
-
-const initTheme = (theme?: string, onChange?: ((theme: string) => void) | null) => {
-  currentTheme.value = localStorage.getItem(THEME_KEY) || theme || 'light';
-  if (isFunction(onChange)) {
-    settings.onChange = onChange;
-  }
-  document.documentElement.dataset.theme = currentTheme.value;
-  initialized = true;
-};
+const currentTheme = ref<string>(localStorage.getItem(THEME_KEY) || 'light');
 
 watchEffect(() => {
-  if (!initialized) {
-    return;
-  }
   const theme = currentTheme.value;
-  if (settings.onChange) {
-    settings.onChange(theme);
-  }
+
+  document.documentElement.dataset.oTheme = theme;
+
   localStorage.setItem(THEME_KEY, theme);
 });
 
 export function useTheme() {
   return {
-    initTheme,
     theme: currentTheme,
   };
 }
diff --git a/packages/portal/index.html b/packages/portal/index.html
index 59faba57..47a21a9b 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 0d540d0a..29782504 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>
-- 
Gitee


From f9226e76f265105235b997d2b36fe95ca3b2353e Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 4 Dec 2023 17:39:45 +0800
Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=20=C2=A0=E5=8D=95=E8=AF=8D=E6=8B=BC?=
 =?UTF-8?q?=E5=86=99=E9=94=99=E8=AF=AF=20archor=20->=20anchor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/tab/OTab.vue         | 20 ++++++++++----------
 packages/opendesign/src/tab/style/media.scss |  6 +++---
 packages/opendesign/src/tab/style/style.scss | 10 +++++-----
 packages/opendesign/src/tab/style/var.scss   |  4 ++--
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/opendesign/src/tab/OTab.vue b/packages/opendesign/src/tab/OTab.vue
index 8d1f8d51..c7f5449f 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 f72cd8db..a5235a82 100644
--- a/packages/opendesign/src/tab/style/media.scss
+++ b/packages/opendesign/src/tab/style/media.scss
@@ -34,7 +34,7 @@
     --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;
@@ -47,7 +47,7 @@
     &.o-tab-text {
       --tab-nav-padding: 0 0 2px;
     }
-    .o-tab-nav-archor-line {
+    .o-tab-nav-anchor-line {
       width: 16px;
     }
   }
@@ -59,7 +59,7 @@
       --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 6a48f63f..972189f9 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 8d48bb73..bc33e83d 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);
-- 
Gitee