diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index c07a70645ef40c6a3f51387a546bf0903c303cfa..09f53d01beb93ef47f86aee7fb9b4aefcee7de4b 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -20,7 +20,7 @@
     "gen:icon": "opensig-scripts gen:icon --config ./src/icons/icon.config.ts",
     "build:component": "opensig-scripts build:component",
     "build:style": "opensig-scripts build:style",
-    "build": "opensig-scripts gen:icon && opensig-scripts build:component && opensig-scripts build:style"
+    "build": "pnpm gen:icon && pnpm build:component && pnpm build:style"
   },
   "peerDependencies": {
     "vue": "^3.1.0"
diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts
index bc88dd0fe7f45df410678d9bf46bd72d8c3865f9..8be32c05f6fac79a408f2f6e3b7282025f7ac3b5 100644
--- a/packages/opendesign/src/components/_shared/global.ts
+++ b/packages/opendesign/src/components/_shared/global.ts
@@ -14,8 +14,6 @@ export const defaultRound = ref<'pill' | 'normal'>('normal');
 export function initRound(type: 'pill' | 'normal') {
   defaultRound.value = type;
 }
-// TODO 全局变量增加 o-radius-control-s o-radius-control-m o-radius-control-l
-
 
 // 方向
 export type DirectionT = 'h' | 'v';
diff --git a/packages/opendesign/src/components/card/OCard.vue b/packages/opendesign/src/components/card/OCard.vue
index 5013452c0dae992089d6713ee148ec82fff7b36a..6c8ae1552625724fde96b9fdaf9611b26df3c765 100644
--- a/packages/opendesign/src/components/card/OCard.vue
+++ b/packages/opendesign/src/components/card/OCard.vue
@@ -28,36 +28,38 @@ const hasContent = computed(() => {
       '--card-detail-max-row': props.detailMaxRow,
     }"
   >
-    <div
-      v-if="$slots.cover || props.cover"
-      class="o-card-cover"
-      :class="[
-        props.coverClass,
-        `o-card-cover-${props.layout}`,
-        {
-          'o-card-only-cover': !hasContent && !$slots.title && !$slots.default,
-        },
-      ]"
-    >
-      <slot name="cover">
-        <OFigure :ratio="props.coverRatio" class="o-card-cover-img" :src="props.cover" :class="{ 'is-full': !props.coverRatio }" />
-      </slot>
-    </div>
-    <div v-if="hasContent || $slots.title || $slots.content || $slots.default" class="o-card-main">
-      <slot>
-        <div>
-          <div v-if="props.title || $slots.title" class="o-card-title">
-            <slot name="title">{{ props.title }}</slot>
+    <slot name="card">
+      <div
+        v-if="$slots.cover || props.cover"
+        class="o-card-cover"
+        :class="[
+          props.coverClass,
+          `o-card-cover-${props.layout}`,
+          {
+            'o-card-only-cover': !hasContent && !$slots.title && !$slots.default,
+          },
+        ]"
+      >
+        <slot name="cover">
+          <OFigure :ratio="props.coverRatio" class="o-card-cover-img" :src="props.cover" :class="{ 'is-full': !props.coverRatio }" />
+        </slot>
+      </div>
+      <div v-if="hasContent || $slots.title || $slots.main || $slots.default" class="o-card-main">
+        <slot name="main">
+          <div>
+            <div v-if="props.title || $slots.title" class="o-card-title">
+              <slot name="title">{{ props.title }}</slot>
+            </div>
+            <div class="o-card-content">
+              <div v-if="props.content" class="o-card-detail">{{ props.content }}</div>
+              <slot></slot>
+            </div>
           </div>
-          <div class="o-card-content">
-            <div v-if="props.content" class="o-card-detail">{{ props.content }}</div>
-            <slot name="content"></slot>
+          <div v-if="$slots.bottom" class="o-card-bottom">
+            <slot name="bottom"></slot>
           </div>
-        </div>
-        <div v-if="$slots.actions" class="o-card-actions">
-          <slot name="actions"></slot>
-        </div>
-      </slot>
-    </div>
+        </slot>
+      </div>
+    </slot>
   </HtmlTag>
 </template>
diff --git a/packages/opendesign/src/components/card/__demo__/CardBasic.vue b/packages/opendesign/src/components/card/__demo__/CardBasic.vue
index 26869dc25947a1da1a7d5f57653134cc86ca8320..2ef7ed1657f2b088afcb21a3602ae008f3042ac8 100644
--- a/packages/opendesign/src/components/card/__demo__/CardBasic.vue
+++ b/packages/opendesign/src/components/card/__demo__/CardBasic.vue
@@ -38,6 +38,26 @@ const card = {
           </div>
         </template>
       </OCard>
+      <OCard
+        class="card col2 card2"
+        :cover="card.cover"
+        :cover-ratio="16 / 9"
+        :title="card.title"
+        :content="card.content"
+        layout="hr"
+        cover-class="card-cover"
+        :title-max-row="1"
+        :detail-max-row="2"
+      >
+        <template #actions>
+          <div class="actions">
+            <div class="date">2023/02/09</div>
+            <div class="btns">
+              <div class="btn"><IconStar /> 文本</div>
+            </div>
+          </div>
+        </template>
+      </OCard>
     </div>
     <div>
       <OCard
@@ -75,14 +95,17 @@ const card = {
       </OCard>
     </div>
     <div class="flex">
-      <OCard class="card col3" hoverable>
-        <div class="card-icon">
-          <div class="icon"><IconStar /></div>
-          <div>
-            <div class="title">{{ card.title }}</div>
-            <div class="btns">{{ card.content }}</div>
+      <OCard class="card col3" hoverable style="height: 350px">
+        <template #main>
+          <div class="card-icon">
+            <div class="icon"><IconStar /></div>
+            <div>
+              <div class="title">{{ card.title }}</div>
+              <div class="btns">{{ card.content }}</div>
+            </div>
           </div>
-        </div>
+          1123
+        </template>
       </OCard>
     </div>
   </section>
diff --git a/packages/opendesign/src/components/card/style/index.scss b/packages/opendesign/src/components/card/style/index.scss
index e670142cf1af0ad560e559f085c280a64c235d55..624bb5471e748dedaef0f53873e28a69cf426184 100644
--- a/packages/opendesign/src/components/card/style/index.scss
+++ b/packages/opendesign/src/components/card/style/index.scss
@@ -4,6 +4,7 @@
   background-color: var(--o-color-control-light);
   border-radius: var(--card-radius);
   overflow: hidden;
+  display: flex;
 }
 .o-card-cover {
   flex-shrink: 0;
@@ -46,6 +47,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  flex: 1;
 }
 
 .o-card-content {
@@ -82,15 +84,19 @@
     }
   }
 }
-.o-card-actions {
+.o-card-bottom {
   margin-top: 24px;
   font-size: var(--o-font_size-tip1);
   line-height: var(--o-line_height-tip1);
   color: var(--o-color-info3);
 }
-
+.o-card-layout-v {
+  display: flex;
+  flex-direction: column;
+}
 .o-card-layout-h {
   display: flex;
+  flex-direction: row;
 }
 .o-card-layout-hr {
   display: flex;
diff --git a/packages/opendesign/src/components/checkbox-group/style/index.scss b/packages/opendesign/src/components/checkbox-group/style/index.scss
index 80be7f6a536da02895a71f29a3bbc79430a4bb66..59ba2eae15056d9d2741e2ca20ff39a4478be6d6 100644
--- a/packages/opendesign/src/components/checkbox-group/style/index.scss
+++ b/packages/opendesign/src/components/checkbox-group/style/index.scss
@@ -6,6 +6,6 @@
   gap: var(--checkbox-group-gap);
 }
 
-.o-checkbox-group-direction-vertical {
+.o-checkbox-group-direction-v {
   flex-direction: column;
 }
diff --git a/packages/opendesign/src/components/divider/style/index.scss b/packages/opendesign/src/components/divider/style/index.scss
index 1a5e334e16fb91759550afddbb8532ceacd7bfdb..d4a0eaac29a6e77d6c37a3ec5866a57b3c186a88 100644
--- a/packages/opendesign/src/components/divider/style/index.scss
+++ b/packages/opendesign/src/components/divider/style/index.scss
@@ -42,7 +42,7 @@
   }
 }
 
-.o-divider-vertical {
+.o-divider-v {
   display: inline-block;
   width: 1px;
   height: 1em;
@@ -53,21 +53,21 @@
 }
 
 .o-divider-solid {
-  &.o-divider-vertical,
+  &.o-divider-v,
   .o-divider-line {
     border-style: solid;
   }
 }
 
 .o-divider-dashed {
-  &.o-divider-vertical,
+  &.o-divider-v,
   .o-divider-line {
     border-style: dashed;
   }
 }
 
 .o-divider-dotted {
-  &.o-divider-vertical,
+  &.o-divider-v,
   .o-divider-line {
     border-style: dotted;
   }
diff --git a/packages/opendesign/src/components/divider/style/var.scss b/packages/opendesign/src/components/divider/style/var.scss
index c15c6f690fd25efe21eda507e78b3d4b49349d56..17ab3cf511b490d8d31f48c108818068f4691783 100644
--- a/packages/opendesign/src/components/divider/style/var.scss
+++ b/packages/opendesign/src/components/divider/style/var.scss
@@ -11,6 +11,6 @@
   --o-divider-gap: var(--o-gap-3);
 }
 
-.o-divider-vertical {
+.o-divider-v {
   --o-divider-gap: var(--o-gap-3);
 }
diff --git a/packages/opendesign/src/components/figure/OFigure.vue b/packages/opendesign/src/components/figure/OFigure.vue
index 4d563d67220d2ab52c3bdb47a03cb308d600eee7..d6b0e3abda012b6ff8a89e79ed9242c35be878fd 100644
--- a/packages/opendesign/src/components/figure/OFigure.vue
+++ b/packages/opendesign/src/components/figure/OFigure.vue
@@ -12,7 +12,7 @@ const imgRef = ref<HTMLImageElement | null>(null);
 
 const isLoading = ref(true);
 const isError = ref(false);
-const prestColor = PrestColorPool.pick();
+const prestColor = props.colorfull ? PrestColorPool.pick() : '';
 
 const bgSrc = computed(() => {
   if (props.background && props.ratio) {
@@ -68,6 +68,7 @@ onMounted(() => {
     :class="{
       'is-loading': isLoading,
       'is-error': isError,
+      'is-colorfull': props.colorfull,
       'o-figure-hoverable': props.hoverable || !!props.href,
     }"
     :style="{
diff --git a/packages/opendesign/src/components/figure/style/index.scss b/packages/opendesign/src/components/figure/style/index.scss
index 9ad288474e7c0907628ae38bdfb3ea8cdf79cacf..956933f29b8b8291126952cba1bc8c0491a3ac7f 100644
--- a/packages/opendesign/src/components/figure/style/index.scss
+++ b/packages/opendesign/src/components/figure/style/index.scss
@@ -6,12 +6,15 @@
   overflow: hidden;
   transition: background-color var(--o-duration-m2);
   &.is-loading {
-    background-color: var(--figure-prest-color);
+    &.is-colorfull {
+      background-color: var(--figure-prest-color);
+    }
     img {
       opacity: 0;
     }
   }
   img {
+    max-width: 100%;
     vertical-align: top;
     opacity: 1;
     transition: opacity var(--o-duration-m2), transform var(--o-easing-standard) var(--o-duration-m2);
diff --git a/packages/opendesign/src/components/figure/types.ts b/packages/opendesign/src/components/figure/types.ts
index 9a5642446e17d7a1571523e88b5e8f57b9b586a3..dde3eee188fdbb518417a2865e08fee6c6a391d7 100644
--- a/packages/opendesign/src/components/figure/types.ts
+++ b/packages/opendesign/src/components/figure/types.ts
@@ -50,7 +50,13 @@ export const figureProps = {
    */
   href: {
     type: String,
-  }
+  },
+  /**
+   * 预置随机多彩背景
+   */
+  colorfull: {
+    type: Boolean,
+  },
 };
 
 export type FigurePropsT = ExtractPropTypes<typeof figureProps>;
diff --git a/packages/opendesign/src/components/index.scss b/packages/opendesign/src/components/index.scss
index 658e74d34c5f73da54d3bafdbba2d44be950c3d3..3d2a8ae15b835606b564fe9ceefa51541713f062 100644
--- a/packages/opendesign/src/components/index.scss
+++ b/packages/opendesign/src/components/index.scss
@@ -29,3 +29,4 @@
 @use './dialog/style/index.scss' as *;
 @use './figure/style/index.scss' as *;
 @use './card/style/index.scss' as *;
+@use './slides/style/index.scss' as *;
diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts
index ed6a810df01762aaf9fb4b9310cf49c157ba942c..52a3c2b518375de8756bc35164cd122f0df7615d 100644
--- a/packages/opendesign/src/components/index.ts
+++ b/packages/opendesign/src/components/index.ts
@@ -33,6 +33,7 @@ export * from './dialog';
 export * from './figure';
 export * from './card';
 export * from './message';
+export * from './slides';
 
 // export * from './scrollbar';
 
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss
index b0f610e407719b8451c6ae85f31452ef7abe768d..07e34562c35388a91b89fcc509a17932d659d9a8 100644
--- a/packages/opendesign/src/components/input/style/index.scss
+++ b/packages/opendesign/src/components/input/style/index.scss
@@ -46,7 +46,9 @@
     border-bottom-right-radius: 0;
   }
 }
-
+.o-input-input-wrap {
+  width: 100%;
+}
 .o-input-input {
   outline: none;
   border: none;
diff --git a/packages/opendesign/src/components/input/style/var.scss b/packages/opendesign/src/components/input/style/var.scss
index 2c36b6da8306133801757e6d13de0f23798a1e66..bb2302c37e94852acb9299db8f7e23023b15ab22 100644
--- a/packages/opendesign/src/components/input/style/var.scss
+++ b/packages/opendesign/src/components/input/style/var.scss
@@ -5,7 +5,7 @@
 
   --input-bg-color: transparent;
   --input-bg-color-hover: transparent;
-  --input-bg-color-focus: var(--o-color-control-white);
+  --input-bg-color-focus: var(--o-color-control-light);
 
   --input-prepend-append-bd-color: var(--o-color-control1);
 }
diff --git a/packages/opendesign/src/components/radio-group/style/index.scss b/packages/opendesign/src/components/radio-group/style/index.scss
index 383b4dfc4e42e8b82dd747c103bddf458e026c76..e4ec1f55c0fedca8fb902e6221f771e181b458c2 100644
--- a/packages/opendesign/src/components/radio-group/style/index.scss
+++ b/packages/opendesign/src/components/radio-group/style/index.scss
@@ -6,6 +6,6 @@
   gap: var(--radio-group-gap);
 }
 
-.o-radio-group-direction-vertical {
+.o-radio-group-direction-v {
   flex-direction: column;
 }
diff --git a/packages/opendesign/src/components/slides/OSlideItem.vue b/packages/opendesign/src/components/slides/OSlideItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d4a662951e55f93b027c2a48d340a6f053729771
--- /dev/null
+++ b/packages/opendesign/src/components/slides/OSlideItem.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="o-slide-item">
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/slides/OSlides.vue b/packages/opendesign/src/components/slides/OSlides.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0d403b7ea0b93be9d36d32644e3bc964b8c0558d
--- /dev/null
+++ b/packages/opendesign/src/components/slides/OSlides.vue
@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { ref, watch, computed, onMounted, onUnmounted } from 'vue';
+import { IconChevronLeft, IconChevronRight } from '../icons';
+
+import { slidesProps } from './types';
+
+const props = defineProps(slidesProps);
+
+const emits = defineEmits<{ (e: 'change', now: number, last: number): void }>();
+
+const activeIndex = ref(props.activeIndex || 0);
+watch(
+  () => props.activeIndex,
+  (v) => {
+    activeIndex.value = v ?? 0;
+  }
+);
+
+enum ClassNames {
+  ACTIVE = 'o-slide-item-active',
+  ANIMATING = 'o-slide-item-animating',
+  ACTIVE_IN = 'o-slide-item-in',
+  ACTIVE_IN_REVERSE = 'o-slide-item-in-reverse',
+  ACTIVE_OUT = 'o-slide-item-out',
+  ACTIVE_OUT_REVERSE = 'o-slide-item-out-reverse',
+}
+const initialized = ref(false);
+
+const slideWrapRef = ref<HTMLElement | null>(null);
+const slideElList = computed(() => {
+  const c = slideWrapRef.value?.children;
+  return c ? Array.from(c).map((el) => el as HTMLElement) : null;
+});
+const total = computed(() => {
+  return slideWrapRef.value?.children.length;
+});
+let activeEl: Element | null = null;
+
+const isAnimating = ref(false);
+
+const fixIndex = (idx: number) => {
+  if (!total.value) {
+    return idx;
+  }
+  const i = idx % total.value;
+  return i >= 0 ? i : i + total.value;
+};
+/**
+ * @param index 激活的slide索引
+ * @param animate 切换是否执行过度动画
+ */
+const activeSwitchSlideByIndex = (index: number, animate = true, reverse = false) => {
+  if (!slideElList.value || !total.value) {
+    return;
+  }
+  let lastActiveIndex = activeIndex.value;
+
+  activeIndex.value = fixIndex(index);
+
+  let lastActiveEl = activeEl;
+  activeEl = slideElList.value[activeIndex.value];
+
+  lastActiveEl?.classList.remove(ClassNames.ACTIVE);
+  activeEl.classList.add(ClassNames.ACTIVE);
+  emits('change', activeIndex.value, lastActiveIndex);
+  if (animate) {
+    // 先移除所有过渡动画类
+    lastActiveEl?.classList.remove(
+      ClassNames.ACTIVE_IN,
+      ClassNames.ACTIVE_IN_REVERSE,
+      ClassNames.ACTIVE_OUT,
+      ClassNames.ACTIVE_OUT_REVERSE,
+      ClassNames.ANIMATING
+    );
+
+    activeEl?.classList.remove(ClassNames.ACTIVE_IN, ClassNames.ACTIVE_IN_REVERSE, ClassNames.ACTIVE_OUT, ClassNames.ACTIVE_OUT_REVERSE, ClassNames.ANIMATING);
+
+    if (!reverse) {
+      lastActiveEl?.classList.add(ClassNames.ACTIVE_OUT, ClassNames.ANIMATING);
+      activeEl?.classList.add(ClassNames.ACTIVE_IN, ClassNames.ANIMATING);
+    } else {
+      lastActiveEl?.classList.add(ClassNames.ACTIVE_OUT_REVERSE, ClassNames.ANIMATING);
+      activeEl?.classList.add(ClassNames.ACTIVE_IN_REVERSE, ClassNames.ANIMATING);
+    }
+  }
+};
+
+const ininSwitchSlides = () => {
+  if (!slideElList.value) {
+    return;
+  }
+  activeSwitchSlideByIndex(activeIndex.value, false);
+
+  // 监听过度动画
+  slideElList.value.forEach((el) => {
+    el.addEventListener('animationend', () => {
+      el?.classList.remove(ClassNames.ACTIVE_IN, ClassNames.ACTIVE_IN_REVERSE, ClassNames.ACTIVE_OUT, ClassNames.ACTIVE_OUT_REVERSE, ClassNames.ANIMATING);
+      if (el === activeEl) {
+        isAnimating.value = false;
+      }
+    });
+    el.addEventListener('animationstart', () => {
+      if (el === activeEl) {
+        isAnimating.value = true;
+      }
+    });
+  });
+};
+
+const activeCarouselSlideByIndex = (index: number) => {
+  if (!slideElList.value || !total.value) {
+    return;
+  }
+  activeIndex.value = index;
+
+  const d = slideElList.value[index].offsetLeft;
+  if (slideWrapRef.value) {
+    slideWrapRef.value.style.transform = `translate3d(-${d}px, 0, 0)`;
+  }
+};
+const ininCarouselSlides = () => {
+  if (!slideElList.value) {
+    return;
+  }
+
+  slideElList.value.forEach((el, idx) => {
+    const { clientWidth } = el;
+    el.style.left = `${clientWidth * idx}px`;
+    el.addEventListener('click', () => {
+      activeCarouselSlideByIndex(idx);
+    });
+  });
+
+  activeCarouselSlideByIndex(activeIndex.value);
+};
+
+const initSlides = () => {
+  switch (props.type) {
+    case 'switch': {
+      ininSwitchSlides();
+      break;
+    }
+    case 'carousel': {
+      ininCarouselSlides();
+      break;
+    }
+  }
+  initialized.value = true;
+};
+const activeSlideByIndex = (index: number, animate = true, reverse = false) => {
+  const i = fixIndex(index);
+  switch (props.type) {
+    case 'switch': {
+      activeSwitchSlideByIndex(i, animate, reverse);
+      break;
+    }
+    case 'carousel': {
+      activeCarouselSlideByIndex(i);
+      break;
+    }
+  }
+};
+const changeActiveSlide = (add: number) => {
+  if (isAnimating.value) {
+    return;
+  }
+  activeSlideByIndex(activeIndex.value + add, true, add < 0);
+};
+
+let timer: number | null = null;
+onMounted(() => {
+  initSlides();
+  if (props.autoPlay) {
+    timer = window.setInterval(() => {
+      activeSlideByIndex(activeIndex.value + 1);
+    }, props.interval);
+  }
+});
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+});
+</script>
+<template>
+  <div
+    class="o-slides"
+    :class="{
+      'o-slides-visible': initialized,
+    }"
+  >
+    <div ref="slideWrapRef" class="o-slides-wrap" :class="[`o-slides-type-${props.type}`]">
+      <slot></slot>
+    </div>
+    <div class="o-slides-indicator-wrap">
+      <div v-for="(item, idx) in total" :key="item" class="o-slides-indicator-item" @click="activeSlideByIndex(idx)">
+        <slot name="indicator" :active="item - 1 === activeIndex">
+          <div
+            class="o-slides-indicator-dot"
+            :class="{
+              'o-slides-indicator-dot-active': item - 1 === activeIndex,
+            }"
+          ></div>
+        </slot>
+      </div>
+    </div>
+    <div class="o-slides-arrow-wrap">
+      <div class="o-slides-arrow-prev" @click="changeActiveSlide(-1)">
+        <slot name="arrow-prev">
+          <div class="o-slides-arrow-icon">
+            <slot name="arrow-prev-icon">
+              <IconChevronLeft />
+            </slot>
+          </div>
+        </slot>
+      </div>
+      <div class="o-slides-arrow-next" @click="changeActiveSlide(1)">
+        <slot name="arrow-next">
+          <div class="o-slides-arrow-icon">
+            <slot name="arrow-next-icon">
+              <IconChevronRight />
+            </slot>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/slides/__demo__/IndexSlides.vue b/packages/opendesign/src/components/slides/__demo__/IndexSlides.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3282793605a51c243f0b87791a22ab120ca245f3
--- /dev/null
+++ b/packages/opendesign/src/components/slides/__demo__/IndexSlides.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import '../style';
+import SlidesBasic from './SlidesBasic.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <SlidesBasic />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c8a28dd67f17f63684c2081af286873ca70eaa1e
--- /dev/null
+++ b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { OFigure } from '../../figure';
+import '../../figure/style';
+import { OSlides, OSlideItem } from '../index';
+const slides = [
+  'https://www.hiascend.com/p/resource/202303/95e2eec7ebe049628f402b04731b675b.png',
+  'https://www.hiascend.com/p/resource/202303/2422385450af46418ca68b03b13e4494.png',
+  'https://www.hiascend.com/p/resource/202303/4d94234f0bab4612883906a30d595391.png',
+];
+
+const onChange = (now: number, last: number) => {
+  console.log(now, last);
+};
+</script>
+<template>
+  <h4>基本</h4>
+  <section>
+    <OSlides class="slides" auto-play @change="onChange">
+      <OSlideItem v-for="s in slides" :key="s">
+        <OFigure class="img" :src="s" />
+      </OSlideItem>
+    </OSlides>
+  </section>
+  <section>
+    <OSlides class="slides2" type="carousel" auto-play @change="onChange">
+      <OSlideItem v-for="s in slides" :key="s" class="slide-item2">
+        <OFigure class="img" :src="s" />
+      </OSlideItem>
+    </OSlides>
+  </section>
+</template>
+<style lang="scss">
+.slides {
+  height: 300px;
+  width: 100%;
+}
+.slides2 {
+  width: 50%;
+  margin: auto;
+  height: 200px;
+  background-color: red;
+}
+.slide-item2 {
+  width: 100%;
+  padding: 0 8px;
+}
+.img {
+  width: 100%;
+  height: 300px;
+}
+</style>
diff --git a/packages/opendesign/src/components/slides/index.ts b/packages/opendesign/src/components/slides/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..437e94412e0d0a07acf77a4b8ead6b9e4a4546fe
--- /dev/null
+++ b/packages/opendesign/src/components/slides/index.ts
@@ -0,0 +1,15 @@
+import _OSlides from './OSlides.vue';
+import OSlideItem from './OSlideItem.vue';
+import type { App } from 'vue';
+
+const OSlides = Object.assign(_OSlides, {
+  OSlideItem,
+  install(app: App) {
+    app.component(_OSlides.name, _OSlides);
+  },
+});
+
+export {
+  OSlides,
+  OSlideItem
+};
diff --git a/packages/opendesign/src/components/slides/provide.ts b/packages/opendesign/src/components/slides/provide.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e70f164f98ac91627b607011c96b21206a0d10a6
--- /dev/null
+++ b/packages/opendesign/src/components/slides/provide.ts
@@ -0,0 +1,10 @@
+import { InjectionKey, Ref } from 'vue';
+
+
+export const slidesInjectKey: InjectionKey<{
+  currentIndex: Ref<number>
+  // Ref: Ref<HTMLElement | null>,
+  // updateValue: (value: string | number, navEl: HTMLElement | null) => void,
+  // onDeletePane: (value: string | number, evt: MouseEvent) => void,
+}> = Symbol('provide-slides');
+
diff --git a/packages/opendesign/src/components/slides/style/index.scss b/packages/opendesign/src/components/slides/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2a48014a97b259e1c17244b867f4a10607ab6750
--- /dev/null
+++ b/packages/opendesign/src/components/slides/style/index.scss
@@ -0,0 +1,157 @@
+@use './var.scss';
+
+.o-slides {
+  position: relative;
+  visibility: hidden;
+}
+.o-slides-visible {
+  visibility: visible;
+}
+
+.o-slides-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+// arrow
+.o-slides-arrow-prev,
+.o-slides-arrow-next {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  user-select: none;
+  cursor: pointer;
+}
+.o-slides-arrow-prev {
+  top: 50%;
+  left: 12px;
+  transform: translate3d(0, -50%, 0);
+}
+.o-slides-arrow-next {
+  top: 50%;
+  right: 12px;
+  transform: translate3d(0, -50%, 0);
+}
+.o-slides-arrow-icon {
+  font-size: 48px;
+  color: var(--o-color-control-light);
+  background-color: rgba(var(--o-gray-1), 0.3);
+  border-radius: 50%;
+  opacity: 0.6;
+  &:hover {
+    opacity: 1;
+  }
+}
+// indicator
+.o-slides-indicator-wrap {
+  position: absolute;
+  left: 0;
+  bottom: 12px;
+  display: flex;
+  justify-content: center;
+  z-index: 2;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+.o-slides-indicator-dot {
+  width: 48px;
+  height: 3px;
+  background-color: var(--o-color-control-light);
+  margin: 4px;
+  border-radius: 3px;
+  opacity: 0.3;
+  cursor: pointer;
+}
+.o-slides-indicator-dot-active {
+  opacity: 1;
+}
+
+// slide
+.o-slides-type-switch {
+  overflow: hidden;
+  .o-slide-item {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 1;
+    opacity: 0;
+  }
+  .o-slide-item-animating {
+    opacity: 1;
+  }
+  .o-slide-item-active {
+    z-index: 5;
+    opacity: 1;
+  }
+}
+
+.o-slide-item-in {
+  z-index: 5;
+  opacity: 1;
+  animation: slides-slide-x-in var(--o-duration-l) var(--o-easing-standard-in);
+}
+.o-slide-item-out {
+  z-index: 3;
+  animation: slides-slide-x-out var(--o-duration-l) var(--o-easing-standard-in);
+}
+.o-slide-item-in-reverse {
+  z-index: 5;
+  animation: slides-slide-x-in-reverse var(--o-duration-l) var(--o-easing-standard-in);
+}
+.o-slide-item-out-reverse {
+  z-index: 3;
+  animation: slides-slide-x-out-reverse var(--o-duration-l) var(--o-easing-standard-in);
+}
+
+@keyframes slides-slide-x-in {
+  0% {
+    transform: translate3d(100%, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes slides-slide-x-in-reverse {
+  0% {
+    transform: translate3d(-100%, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes slides-slide-x-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+@keyframes slides-slide-x-out-reverse {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.o-slides-type-carousel {
+  --slide-gap: 16px;
+  transition: transform var(--o-duration-l) var(--o-easing-emphasized);
+  .o-slide-item {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 100%;
+    overflow: hidden;
+    z-index: 1;
+  }
+}
diff --git a/packages/opendesign/src/components/slides/style/index.ts b/packages/opendesign/src/components/slides/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716
--- /dev/null
+++ b/packages/opendesign/src/components/slides/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/slides/style/var.scss b/packages/opendesign/src/components/slides/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1f49819f9362fab25a272c17eeea43b39e3aea57
--- /dev/null
+++ b/packages/opendesign/src/components/slides/style/var.scss
@@ -0,0 +1,5 @@
+.o-figure {
+  --figure-padding-top: 50%;
+  --figure-fit: 'cover';
+  --figure-position: 'center';
+}
diff --git a/packages/opendesign/src/components/slides/types.ts b/packages/opendesign/src/components/slides/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1481c9e43e7717d77250785fc1d93318e865d558
--- /dev/null
+++ b/packages/opendesign/src/components/slides/types.ts
@@ -0,0 +1,32 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export const slidesProps = {
+  /**
+   * 激活索引
+   */
+  activeIndex: {
+    type: Number,
+  },
+  /**
+   * 样式类型
+   */
+  type: {
+    type: String as PropType<'carousel'|'switch'>,
+    default: 'switch'
+  },
+  /**
+   * 自动播放
+   */
+  autoPlay: {
+    type: Boolean
+  },
+  /**
+   * 自动播放间隔
+   */
+  interval: {
+    type: Number,
+    default: 5000
+  },
+};
+
+export type SlidesPropsT = ExtractPropTypes<typeof slidesProps>;
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index dad4b4cdb95268b7575956bb87658d3fc5418e46..3974fa0d56e5911344150bf97029c1db6dad21cd 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -176,6 +176,12 @@ export const routes = [
     label: '消息提示 Message',
     component: () => import('@components/message/__demo__/IndexMessage.vue'),
   },
+  {
+    path: '/slides',
+    name: 'Slides',
+    label: '幻灯片 Slides',
+    component: () => import('@components/slides/__demo__/IndexSlides.vue'),
+  },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',
diff --git a/packages/scripts/src/gen-icons/index.ts b/packages/scripts/src/gen-icons/index.ts
index f1794bc7a5eef5f13c02b0084b9ae05203f8e4ec..90e8caabe515e8bab0d0729ee0188d71423f8275 100644
--- a/packages/scripts/src/gen-icons/index.ts
+++ b/packages/scripts/src/gen-icons/index.ts
@@ -20,7 +20,7 @@ export interface TokenConfigT {
  */
 async function readConfig(cfg: string) {
   const base = process.cwd();
-  const configFile = path.resolve(base, cfg || './icons.config.ts');
+  const configFile = path.resolve(base, cfg || './icon.config.ts');
   const cfgDir = path.dirname(configFile);
 
   const configData: IconsConfig = await require(configFile);