diff --git a/packages/opendesign/src/components/_shared/client-only.ts b/packages/opendesign/src/components/_shared/components/client-only.ts
similarity index 100%
rename from packages/opendesign/src/components/_shared/client-only.ts
rename to packages/opendesign/src/components/_shared/components/client-only.ts
diff --git a/packages/opendesign/src/components/_shared/components/html-tag.ts b/packages/opendesign/src/components/_shared/components/html-tag.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c8fee7e7ce83b96c7675ae1f363fcb5f05b9949f
--- /dev/null
+++ b/packages/opendesign/src/components/_shared/components/html-tag.ts
@@ -0,0 +1,20 @@
+import { defineComponent, h } from 'vue';
+
+/**
+ * 只渲染一个子元素
+ */
+export default defineComponent({
+  name: 'HtmlTag',
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  setup(props, { slots, attrs }) {
+
+    return () => {
+      return h(props.tag, attrs, slots.default?.());
+    };
+  },
+});
diff --git a/packages/opendesign/src/components/_shared/utils.ts b/packages/opendesign/src/components/_shared/utils.ts
index c600242b41c34c954bf1e795ee3ab7dccad8ff1d..aacccf1fe10188797181eca1265b3c26274f53e9 100644
--- a/packages/opendesign/src/components/_shared/utils.ts
+++ b/packages/opendesign/src/components/_shared/utils.ts
@@ -45,3 +45,38 @@ export function throttleRAF<T extends (...args: Array<unknown>) => unknown>(fn:
   };
   return rlt;
 }
+
+/**
+ * 颜色池
+ */
+class ColorPool {
+  pool: Array<string>;
+  tmpPool: Array<string>;
+
+  constructor(pool: Array<string>) {
+    this.pool = pool;
+    this.tmpPool = [...pool];
+  }
+  /**
+   * 返回指定位置颜色，或者从颜色池随机返回一个颜色
+   * @param index
+   * @returns
+   */
+  pick(index?: number): string {
+    if (index !== undefined) {
+      return this.pool[index % this.pool.length];
+    }
+    const { length } = this.tmpPool;
+    if (length === 0) {
+      this.tmpPool = [...this.pool];
+    }
+    const idx = Math.floor(Math.random() * length);
+    const color = this.tmpPool[idx];
+    this.tmpPool.splice(idx, 1);
+
+    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/button/OButton.vue b/packages/opendesign/src/components/button/OButton.vue
index fe91c64799cd8576aa2a6f38347d02f56128b5be..a5cd049c5a62c2d888d504f0c0aa4d34ebe1f1b3 100644
--- a/packages/opendesign/src/components/button/OButton.vue
+++ b/packages/opendesign/src/components/button/OButton.vue
@@ -3,13 +3,16 @@ import { defaultSize } from '../_shared/global';
 import { IconLoading } from '../_shared/icons';
 import { getRoundClass } from '../_shared/style-class';
 import { buttonProps } from './types';
+import HtmlTag from '../_shared/components/html-tag';
 
 const props = defineProps(buttonProps);
 
 const round = getRoundClass(props, 'btn');
 </script>
 <template>
-  <button
+  <HtmlTag
+    :tag="!!props.href ? 'a' : 'button'"
+    :href="props.href"
     type="button"
     class="o-btn"
     :class="[
@@ -32,5 +35,5 @@ const round = getRoundClass(props, 'btn');
     <span v-if="$slots.iconSuffix" class="o-btn-icon suffix">
       <slot name="iconSuffix"></slot>
     </span>
-  </button>
+  </HtmlTag>
 </template>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnLoading.vue b/packages/opendesign/src/components/button/__demo__/BtnLoading.vue
index d90811ebeda155f6ec8d7aaa9840b445a68db65d..475ceec11ececa7f370366254db75ca066a27591 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnLoading.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnLoading.vue
@@ -17,12 +17,12 @@ const showLoading = (key: 'loading1' | 'loading2' | 'loading3', val: boolean) =>
 <template>
   <h4>Loading</h4>
   <section>
-    <OButton type="primary" :loading="rlt.loading1" @click="showLoading('loading1', true)">Primary Button</OButton>
-    <OButton type="outline" :loading="rlt.loading2" @click="showLoading('loading2', true)">
+    <OButton color="primary" :loading="rlt.loading1" @click="showLoading('loading1', true)">Primary Button</OButton>
+    <OButton variant="outline" :loading="rlt.loading2" @click="showLoading('loading2', true)">
       <template #icon><IconAdd /></template>Outline Button
     </OButton>
-    <OButton type="text" :loading="rlt.loading3" @click="showLoading('loading3', true)">Text Button</OButton>
-    <OButton type="link" :loading="!rlt.loading3" @click="showLoading('loading3', true)">Link Button</OButton>
+    <OButton variant="text" :loading="rlt.loading3" @click="showLoading('loading3', true)">Text Button</OButton>
+    <OButton :loading="!rlt.loading3" href="https://hiascend.com" target="__blank">Link Button</OButton>
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/button/style/index.scss b/packages/opendesign/src/components/button/style/index.scss
index 478de982f8f2f9778223f02e3c04f52439cd9d75..ed75acbd706d3f5f703c8eb537404381c5f9fb77 100644
--- a/packages/opendesign/src/components/button/style/index.scss
+++ b/packages/opendesign/src/components/button/style/index.scss
@@ -6,12 +6,12 @@
   border: 1px solid transparent;
   transition: all var(--o-duration-s) var(--o-easing-standard);
   white-space: nowrap;
-
+  text-decoration: none;
   border-radius: var(--btn-radius);
-
   display: inline-flex;
   align-items: center;
   justify-content: center;
+
   &:hover {
     cursor: pointer;
   }
diff --git a/packages/opendesign/src/components/button/types.ts b/packages/opendesign/src/components/button/types.ts
index 9aec18fee4767b48c87a987ff409fd3915a53a92..98dcbc5390f2528486e2c5540e1b5e73fc561df0 100644
--- a/packages/opendesign/src/components/button/types.ts
+++ b/packages/opendesign/src/components/button/types.ts
@@ -42,6 +42,12 @@ export const buttonProps = {
   disabled: {
     type: Boolean
   },
+  /**
+   * 链接跳转
+   */
+  href: {
+    type: String,
+  }
 };
 
 export type ButtonPropsT = ExtractPropTypes<typeof buttonProps>;
diff --git a/packages/opendesign/src/components/card/OCard.vue b/packages/opendesign/src/components/card/OCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d856473d231e96a8e983655deb9289308fd39558
--- /dev/null
+++ b/packages/opendesign/src/components/card/OCard.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { dialogProps } from './types';
+import { OFigure } from '../figure';
+import HtmlTag from '../_shared/components/html-tag';
+
+const props = defineProps(dialogProps);
+
+const hasContent = computed(() => {
+  return props.title || props.content;
+});
+</script>
+<template>
+  <HtmlTag
+    :tag="!!props.href ? 'a' : 'div'"
+    :href="props.href"
+    class="o-card"
+    tabindex="-1"
+    :class="[
+      `o-card-${props.size}`,
+      `o-card-layout-${props.layout}`,
+      {
+        'o-card-hoverable': props.hoverable || !!props.href,
+      },
+    ]"
+    :style="{
+      '--card-title-max-row': props.titleMaxRow,
+      '--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.default" class="o-card-main">
+      <div>
+        <div class="o-card-title">
+          <slot name="title">{{ props.title }}</slot>
+        </div>
+        <div class="o-card-content">
+          <div class="o-card-detail">{{ props.content }}</div>
+          <slot></slot>
+        </div>
+      </div>
+      <div v-if="$slots.actions" class="o-card-actions">
+        <slot name="actions"></slot>
+      </div>
+    </div>
+  </HtmlTag>
+</template>
diff --git a/packages/opendesign/src/components/card/__demo__/CardBasic.vue b/packages/opendesign/src/components/card/__demo__/CardBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..835fbac39ecc7a50ef4f824d3bba8392f6952f3f
--- /dev/null
+++ b/packages/opendesign/src/components/card/__demo__/CardBasic.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { OCard } from '../index';
+import { IconStar } from '../../icons';
+
+const card = {
+  cover: 'https://www.hiascend.com/p/resource/202303/0a66367d573f4369a6d160909c33fa6e.png',
+  title: '荆棘鸟携手昇腾AI，打造总控室“大屏”变“小屏”的秘密武器',
+  content:
+    '传统的工厂安全总控室里，都是一整面墙花花绿绿的屏幕，安全员要在屏幕前目不转睛的24小时监督，不但费神费力，还难免疏漏。但现在，这一方小屏就能实现整个工厂的安全监察。',
+};
+</script>
+<template>
+  <h4>基本</h4>
+  <section>
+    <div class="row">
+      <OCard class="card col3" asdf :cover="card.cover" :cover-ratio="16 / 9" :title="card.title" :content="card.content" />
+      <OCard class="card col3" :cover="card.cover" :cover-ratio="16 / 9" :title="card.title" :content="card.content" hoverable />
+    </div>
+
+    <div class="flex">
+      <OCard
+        class="card col2 card2"
+        :cover="card.cover"
+        :cover-ratio="16 / 9"
+        :title="card.title"
+        :content="card.content"
+        layout="h"
+        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
+        class="card card2"
+        :cover="card.cover"
+        :cover-ratio="16 / 9"
+        size="large"
+        :title="card.title"
+        :content="card.content"
+        layout="h"
+        cover-class="card-cover"
+      >
+        <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 class="flex">
+      <OCard class="card col3" :title="card.title" :content="card.content" />
+      <OCard class="card col3" :title="card.title" :content="card.content" hoverable>
+        <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>
+  </section>
+</template>
+<style lang="scss">
+.flex {
+  display: flex;
+  gap: 8px;
+}
+.row {
+  gap: 8px;
+}
+.col2 {
+  width: calc(50% - 4px);
+}
+.col3 {
+  width: calc(33.333% - 5px);
+}
+.col4 {
+  width: calc(25% - 6px);
+}
+.actions {
+  // margin-top: ;
+  display: flex;
+  justify-content: space-between;
+}
+.card2 {
+  // height: 260px;
+}
+</style>
diff --git a/packages/opendesign/src/components/card/__demo__/IndexCard.vue b/packages/opendesign/src/components/card/__demo__/IndexCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ab6c750493b3a788a447b660f973d67b9a7b0601
--- /dev/null
+++ b/packages/opendesign/src/components/card/__demo__/IndexCard.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import '../style';
+import CardBasic from './CardBasic.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <CardBasic />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/card/index.ts b/packages/opendesign/src/components/card/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..99344ab4876f11b40e806c51c4a8f600252f4863
--- /dev/null
+++ b/packages/opendesign/src/components/card/index.ts
@@ -0,0 +1,12 @@
+import _OCard from './OCard.vue';
+import type { App } from 'vue';
+
+const OCard = Object.assign(_OCard, {
+  install(app: App) {
+    app.component(_OCard.name, _OCard);
+  },
+});
+
+export {
+  OCard,
+};
diff --git a/packages/opendesign/src/components/card/style/index.scss b/packages/opendesign/src/components/card/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..38bc008701474c52dfbd2a9ba23a95bd0b237fc0
--- /dev/null
+++ b/packages/opendesign/src/components/card/style/index.scss
@@ -0,0 +1,108 @@
+@use './var.scss';
+
+.o-card {
+  background-color: var(--o-color-control-light);
+  border-radius: var(--card-radius);
+  overflow: hidden;
+}
+.o-card-cover {
+  flex-shrink: 0;
+}
+.o-card-cover-v {
+  padding: 8px 8px 0;
+}
+.o-card-cover-h {
+  padding: 8px 0 8px 8px;
+}
+.o-card-cover-hr {
+  padding: 8px 8px 8px 0;
+}
+
+.o-card-only-cover {
+  padding: 0;
+}
+
+.o-card-cover-img {
+  width: 100%;
+  border-radius: calc(var(--card-radius) / 2);
+  &.is-full {
+    height: 100%;
+  }
+}
+
+.o-card-title {
+  font-size: var(--o-font_size-h3);
+  line-height: var(--o-line_height-h3);
+  color: var(--o-color-info1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--card-title-max-row);
+  -webkit-box-orient: vertical;
+}
+
+.o-card-main {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.o-card-content {
+  font-size: var(--o-font_size-text1);
+  line-height: var(--o-line_height-text1);
+  color: var(--o-color-info2);
+  .o-card-title + & {
+    margin-top: 12px;
+  }
+}
+.o-card-detail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--card-detail-max-row);
+  -webkit-box-orient: vertical;
+}
+
+.o-card-hoverable {
+  position: relative;
+  cursor: pointer;
+  transition: box-shadow var(--o-easing-standard) var(--o-duration-m2);
+
+  &:hover {
+    box-shadow: var(--o-shadow-2);
+    .o-card-cover img {
+      transform: scale(1.05);
+    }
+  }
+  &:active {
+    box-shadow: var(--o-shadow-1);
+    .o-card-cover img {
+      transform: scale(1.02);
+    }
+  }
+}
+.o-card-actions {
+  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-h {
+  display: flex;
+}
+.o-card-layout-hr {
+  display: flex;
+  flex-direction: row-reverse;
+}
+.o-card-cover-h,
+.o-card-cover-hr {
+  width: var(--card-h-cover-width);
+}
+
+.o-card-large {
+  .o-card-main {
+    padding: 24px 32px;
+  }
+}
diff --git a/packages/opendesign/src/components/card/style/index.ts b/packages/opendesign/src/components/card/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8da214d055299fb83f830967b3af4b7f67966a5e
--- /dev/null
+++ b/packages/opendesign/src/components/card/style/index.ts
@@ -0,0 +1,3 @@
+import '../../style';
+import '../../figure/style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/card/style/var.scss b/packages/opendesign/src/components/card/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6b71a6757ac95532827a57e77c3250eefb0f1c09
--- /dev/null
+++ b/packages/opendesign/src/components/card/style/var.scss
@@ -0,0 +1,12 @@
+.o-card {
+  --card-radius: var(--o-radius-control-l);
+  --card-title-max-row: 0;
+  --card-detail-max-row: 0;
+}
+
+.o-card-medium {
+  --card-h-cover-width: 274px;
+}
+.o-card-large {
+  --card-h-cover-width: 442px;
+}
diff --git a/packages/opendesign/src/components/card/types.ts b/packages/opendesign/src/components/card/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0f4a32fdd7d1e8f1a5b13e1d855959d9bf37c33a
--- /dev/null
+++ b/packages/opendesign/src/components/card/types.ts
@@ -0,0 +1,75 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export const dialogProps = {
+  /**
+   * 封面
+   */
+  layout: {
+    type: String as PropType<'h' | 'v' | 'hr'>,
+    default: 'v'
+  },
+  /**
+   * 封面
+   */
+  cover: {
+    type: String,
+  },
+  /**
+   * 封面长宽比
+   */
+  coverRatio: {
+    type: Number,
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+  },
+  /**
+   * 标题
+   */
+  content: {
+    type: String,
+  },
+  /**
+   * 可hover
+   */
+  hoverable: {
+    type: Boolean,
+  },
+  /**
+   * cover classname
+   */
+  coverClass: {
+    type: String,
+  },
+  /**
+   * 尺寸
+   */
+  size: {
+    type: String as PropType<'medium' | 'large'>,
+    default: 'medium'
+  },
+  /**
+   * 标题最大行数
+   */
+  titleMaxRow: {
+    type: Number,
+  },
+  /**
+   * 详情最大行数
+   */
+  detailMaxRow: {
+    type: Number,
+  },
+  /**
+   * 链接跳转
+   */
+  href: {
+    type: String,
+  }
+
+};
+
+export type DialogPropsT = ExtractPropTypes<typeof dialogProps>;
diff --git a/packages/opendesign/src/components/dialog/ODialog.vue b/packages/opendesign/src/components/dialog/ODialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8f0bd25efbd097f64272fb1de7c02d1c9d51e9f8
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/ODialog.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { IconClose } from '../_shared/icons';
+
+import { dialogProps } from './types';
+
+const props = defineProps(dialogProps);
+
+const emits = defineEmits<{
+  (e: 'change', val: boolean): void;
+  (e: 'update:modelValue', val: boolean, evt: MouseEvent): void;
+}>();
+
+const toMount = ref(false);
+const isMounted = computed(() => {
+  return toMount.value || isShow.value || !props.unmountOnHide;
+});
+
+const isShow = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (v: boolean) => {
+    if (isShow.value !== v) {
+      isShow.value = v;
+      emits('change', v);
+    }
+  }
+);
+
+const onCloseClick = (e: MouseEvent) => {
+  isShow.value = false;
+  emits('change', false);
+  emits('update:modelValue', false, e);
+};
+
+const onMaskClick = (e: MouseEvent) => {
+  isShow.value = false;
+  emits('change', false);
+  emits('update:modelValue', false, e);
+};
+</script>
+<template>
+  <teleport :to="props.wrapper">
+    <div
+      class="o-dialog"
+      :class="{
+        'is-show': isShow,
+      }"
+    >
+      <transition name="o-fade-up-enter">
+        <div v-if="isMounted" class="o-dlg-mask" @click="onMaskClick"></div>
+      </transition>
+      <transition :name="props.transition">
+        <div v-if="isMounted" class="o-dlg-main" :class="props.wrapClass">
+          <div class="o-dlg-btn-close" @click="onCloseClick"><IconClose /></div>
+          <div v-if="$slots.header" class="o-dlg-head">
+            <slot name="header"></slot>
+          </div>
+          <div class="o-dlg-body">
+            <slot></slot>
+          </div>
+          <div v-if="$slots.footer" class="o-dlg-foot">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </teleport>
+</template>
diff --git a/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue b/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ac12485b4e2d3455e640df247b2db0c5abd24144
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OButton } from '../../button';
+import '../../button/style';
+import { ODialog } from '../index';
+
+const showDlg = ref(false);
+
+const toggle = (show?: boolean) => {
+  if (show === undefined) {
+    showDlg.value = !showDlg.value;
+  } else {
+    showDlg.value = show;
+  }
+};
+const onChane = (v: boolean) => {
+  console.log('dialog change', v);
+};
+</script>
+<template>
+  <h4>基本</h4>
+  <section>
+    <OButton @click="toggle(true)">Open</OButton>
+    <ODialog v-model="showDlg" :unmount-on-hide="true" @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 @click="toggle(false)">取消</OButton>
+        </div>
+      </template>
+    </ODialog>
+  </section>
+</template>
+<style lang="scss">
+.dlg-action {
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+}
+</style>
diff --git a/packages/opendesign/src/components/dialog/__demo__/IndexDialog.vue b/packages/opendesign/src/components/dialog/__demo__/IndexDialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d90af5c2be4b135c4bb7b051caf8ee87b3b3503b
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/__demo__/IndexDialog.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import '../style';
+import DialogBasic from './DialogBasic.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <DialogBasic />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/dialog/index.ts b/packages/opendesign/src/components/dialog/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4050065fbba5bec838b2d2b720ddf1b884c54ea1
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/index.ts
@@ -0,0 +1,12 @@
+import _ODialog from './ODialog.vue';
+import type { App } from 'vue';
+
+const ODialog = Object.assign(_ODialog, {
+  install(app: App) {
+    app.component(_ODialog.name, _ODialog);
+  },
+});
+
+export {
+  ODialog,
+};
diff --git a/packages/opendesign/src/components/dialog/style/index.scss b/packages/opendesign/src/components/dialog/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2dd4310281b54d7093070a93b500def5741932db
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/style/index.scss
@@ -0,0 +1,59 @@
+@use './var.scss';
+
+.o-dialog {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--dlg-z-index);
+  display: none;
+  &.is-show {
+    display: flex;
+  }
+}
+.o-dlg-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: var(--o-color-mask1);
+}
+.o-dlg-main {
+  position: relative;
+  background-color: var(--o-color-control-light);
+  min-width: 200px;
+  box-shadow: var(--o-shadow-1);
+}
+
+.o-dlg-btn-close {
+  position: absolute;
+  right: var(--o-gap-3);
+  top: var(--o-gap-3);
+  font-size: var(--o-icon_size-s);
+  color: var(--dlg-close-color);
+  border-radius: var(--dlg-close-radius);
+  display: flex;
+  &:hover {
+    text-decoration: none;
+    color: var(--dlg-close-color-hover);
+    background-color: var(--dlg-close-bg-color-hover);
+  }
+  &:active {
+    color: var(--dlg-close-color-active);
+    background-color: var(--dlg-close-bg-color-active);
+  }
+}
+
+.o-dlg-head {
+  padding: 8px 16px;
+}
+.o-dlg-body {
+  padding: 8px 16px;
+}
+.o-dlg-foot {
+  padding: 8px 16px;
+}
diff --git a/packages/opendesign/src/components/dialog/style/index.ts b/packages/opendesign/src/components/dialog/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/dialog/style/var.scss b/packages/opendesign/src/components/dialog/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..664c3d71e96d4e28f8cb59704dbf902cd724ff61
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/style/var.scss
@@ -0,0 +1,9 @@
+.o-dialog {
+  --dlg-close-color: var(--o-color-info2);
+  --dlg-close-color-hover: var(--o-color-primary2);
+  --dlg-close-color-active: var(--o-color-primary3);
+  --dlg-close-bg-color-hover: var(--o-color-control1-light);
+  --dlg-close-bg-color-active: var(--o-color-control2-light);
+  --dlg-close-radius: 50%;
+  --dlg-z-index: calc(var(--o-z-index-base) + 10);
+}
diff --git a/packages/opendesign/src/components/dialog/types.ts b/packages/opendesign/src/components/dialog/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..487360b544345876b089410bdbbb9eacbac96be9
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/types.ts
@@ -0,0 +1,46 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export const dialogProps = {
+  /**
+   * 控制对话框是否显示
+   */
+  modelValue: {
+    type: Boolean,
+  },
+  /**
+   * 挂载容器，默认为body
+   */
+  wrapper: {
+    type: [String, Object] as PropType<string | HTMLElement>,
+    default: 'body',
+  },
+  /**
+   * 是否隐藏可以关闭
+   */
+  hideClose: {
+    type: Boolean,
+  },
+  /**
+   * 是否在popup隐藏时unmout
+   */
+  unmountOnHide: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 挂载容器，默认为body
+   */
+  wrapClass: {
+    type: String,
+  },
+  /**
+   * 过渡名称
+   */
+  transition: {
+    type: String,
+    default: 'o-zoom-fade',
+  },
+
+};
+
+export type DialogPropsT = ExtractPropTypes<typeof dialogProps>;
diff --git a/packages/opendesign/src/components/figure/OFigure.vue b/packages/opendesign/src/components/figure/OFigure.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5abeeb81f87da8d3a44128fc58a3506108e88760
--- /dev/null
+++ b/packages/opendesign/src/components/figure/OFigure.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { PrestColorPool } from '../_shared/utils';
+import HtmlTag from '../_shared/components/html-tag';
+
+import { figureProps } from './types';
+
+const props = defineProps(figureProps);
+
+const emits = defineEmits<{ (e: 'error'): void }>();
+
+const isLoading = ref(true);
+const isError = ref(false);
+const prestColor = PrestColorPool.pick();
+
+const bgSrc = computed(() => {
+  if (props.background && props.ratio) {
+    return `url(${props.src})`;
+  }
+  return '';
+});
+
+const paddingTop = computed(() => {
+  if (props.ratio) {
+    return `${((1 / props.ratio) * 100).toFixed(2)}%`;
+  }
+  return '';
+});
+
+const fit = computed(() => props.fit);
+const position = computed(() => props.position);
+
+const onImgLoaded = () => {
+  isLoading.value = false;
+  isError.value = false;
+};
+const onImgError = () => {
+  isLoading.value = false;
+  isError.value = true;
+  emits('error');
+};
+
+watch(
+  () => props.src,
+  (src?: string) => {
+    if (src && props.background) {
+      const img = document.createElement('img');
+      img.onload = onImgLoaded;
+      img.onerror = onImgError;
+      img.src = src;
+    }
+  },
+  { immediate: true }
+);
+</script>
+<template>
+  <HtmlTag
+    :tag="!!props.href ? 'a' : 'div'"
+    class="o-figure"
+    :href="props.href"
+    :class="{
+      'is-loading': isLoading,
+      'is-error': isError,
+      'o-figure-hoverable': props.hoverable || !!props.href,
+    }"
+    :style="{
+      '--figure-prest-color': prestColor,
+      '--figure-padding-top': paddingTop,
+      '--figure-fit': fit,
+      '--figure-position': position,
+    }"
+  >
+    <template v-if="props.src">
+      <div
+        v-if="paddingTop"
+        class="o-figure-wrapper"
+        :class="{
+          'o-figure-bg': props.background,
+        }"
+        :style="{
+          backgroundImage: bgSrc,
+        }"
+      >
+        <img v-if="!props.background && !isError" :src="props.src" :alt="props.alt" class="o-figure-img-ratio" @load="onImgLoaded" @error="onImgError" />
+      </div>
+      <img v-else-if="!isError" :src="props.src" :alt="props.alt" class="o-figure-img" @load="onImgLoaded" @error="onImgError" />
+    </template>
+    <slot></slot>
+  </HtmlTag>
+</template>
diff --git a/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3a127b6a843793f4eec672fbd81af3c2fe277d42
--- /dev/null
+++ b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { OFigure } from '../index';
+const img = 'https://www.hiascend.com/p/resource/202303/0a66367d573f4369a6d160909c33fa6e.png';
+</script>
+<template>
+  <h4>基本</h4>
+  <section>
+    <OFigure class="img" :src="img" />
+    <OFigure class="img" :src="img" :ratio="16 / 9" fit="contain" />
+    <OFigure class="img" src="123" :ratio="16 / 9" fit="cover" />
+    <OFigure class="img" :src="img" :ratio="16 / 9" fit="cover" background />
+    <OFigure class="img" hoverable :src="img" />
+    <OFigure class="img" href="https://hiascend.com" target="__blank" :src="img" />
+  </section>
+</template>
+<style lang="scss">
+.dlg-action {
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+}
+.img {
+  width: 25%;
+}
+</style>
diff --git a/packages/opendesign/src/components/figure/__demo__/IndexFigure.vue b/packages/opendesign/src/components/figure/__demo__/IndexFigure.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0e8aec36975eeab8e03a63b731031d8165c6906b
--- /dev/null
+++ b/packages/opendesign/src/components/figure/__demo__/IndexFigure.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import '../style';
+import FigureBasic from './FigureBasic.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <FigureBasic />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/figure/index.ts b/packages/opendesign/src/components/figure/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f94942b8c16aada5bf57183203ca7faf94f4f869
--- /dev/null
+++ b/packages/opendesign/src/components/figure/index.ts
@@ -0,0 +1,12 @@
+import _OFigure from './OFigure.vue';
+import type { App } from 'vue';
+
+const OFigure = Object.assign(_OFigure, {
+  install(app: App) {
+    app.component(_OFigure.name, _OFigure);
+  },
+});
+
+export {
+  OFigure,
+};
diff --git a/packages/opendesign/src/components/figure/style/index.scss b/packages/opendesign/src/components/figure/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9ad288474e7c0907628ae38bdfb3ea8cdf79cacf
--- /dev/null
+++ b/packages/opendesign/src/components/figure/style/index.scss
@@ -0,0 +1,64 @@
+@use './var.scss';
+
+.o-figure {
+  display: inline-block;
+  vertical-align: top;
+  overflow: hidden;
+  transition: background-color var(--o-duration-m2);
+  &.is-loading {
+    background-color: var(--figure-prest-color);
+    img {
+      opacity: 0;
+    }
+  }
+  img {
+    vertical-align: top;
+    opacity: 1;
+    transition: opacity var(--o-duration-m2), transform var(--o-easing-standard) var(--o-duration-m2);
+    will-change: transform;
+  }
+  &.is-error {
+    background-color: var(--o-color-control4);
+  }
+}
+.o-figure-hoverable {
+  cursor: pointer;
+
+  &:hover {
+    img {
+      transform: scale(1.05);
+    }
+  }
+  &:active {
+    img {
+      transform: scale(1.02);
+    }
+  }
+}
+.o-figure-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding-top: var(--figure-padding-top);
+}
+.o-figure-bg {
+  background-size: var(--figure-fit);
+  background-position: var(--figure-position);
+  background-repeat: no-repeat;
+}
+.o-figure-img-ratio {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--figure-fit);
+  object-position: var(--figure-position);
+}
+
+.o-figure-img {
+  width: 100%;
+  height: 100%;
+  object-fit: var(--figure-fit);
+  object-position: var(--figure-position);
+}
diff --git a/packages/opendesign/src/components/figure/style/index.ts b/packages/opendesign/src/components/figure/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716
--- /dev/null
+++ b/packages/opendesign/src/components/figure/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/figure/style/var.scss b/packages/opendesign/src/components/figure/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1f49819f9362fab25a272c17eeea43b39e3aea57
--- /dev/null
+++ b/packages/opendesign/src/components/figure/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/figure/types.ts b/packages/opendesign/src/components/figure/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9a5642446e17d7a1571523e88b5e8f57b9b586a3
--- /dev/null
+++ b/packages/opendesign/src/components/figure/types.ts
@@ -0,0 +1,56 @@
+import { ExtractPropTypes } from 'vue';
+
+export const figureProps = {
+  /**
+   * 地址
+   */
+  src: {
+    type: String,
+  },
+  /**
+   * 长宽比
+   */
+  ratio: {
+    type: Number,
+  },
+  /**
+   * 适配方式
+   */
+  position: {
+    type: String,
+    default: 'center'
+  },
+  /**
+   * 适配方式
+   */
+  fit: {
+    type: String,
+    default: 'cover'
+  },
+  /**
+   * img alt
+   */
+  alt: {
+    type: String,
+  },
+  /**
+   * 使用背景
+   */
+  background: {
+    type: Boolean,
+  },
+  /**
+   * 可hover
+   */
+  hoverable: {
+    type: Boolean,
+  },
+  /**
+   * 链接跳转
+   */
+  href: {
+    type: String,
+  }
+};
+
+export type FigurePropsT = ExtractPropTypes<typeof figureProps>;
diff --git a/packages/opendesign/src/components/index.scss b/packages/opendesign/src/components/index.scss
index c7ffbf783ee7c53bca373f684232a0a8102c9913..98be40f872e1c6129eac9eecd206cdb4e2cb208f 100644
--- a/packages/opendesign/src/components/index.scss
+++ b/packages/opendesign/src/components/index.scss
@@ -24,3 +24,4 @@
 @use './form/style//index.scss' as *;
 @use './menu/style//index.scss' as *;
 @use './breadcrumb/style//index.scss' as *;
+@use './dialog/style//index.scss' as *;
diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts
index c3df0fb14678d87c805747a5306da60b3cad1223..d5aeec58be56f58c1f6e82e50cb99752aaba9347 100644
--- a/packages/opendesign/src/components/index.ts
+++ b/packages/opendesign/src/components/index.ts
@@ -28,6 +28,7 @@ export * from './menu';
 export * from './breadcrumb';
 // export * from './dropdown';
 // export * from './scrollbar';
+export * from './dialog';
 
 export * from './intersection-observer';
 export * from './resize-observer';
diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index 7bc488124f5fe3c4e828290032304bbd55759438..d021b666a946f30cd7885295ded7274be00b9679 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -9,7 +9,7 @@ import { toInputString } from './input';
 import { OResizeObserver } from '../resize-observer';
 import { inputProps } from './types';
 import { getRoundClass } from '../_shared/style-class';
-import ClientOnly from '../_shared/client-only';
+import ClientOnly from '../_shared/components/client-only';
 
 const props = defineProps(inputProps);
 
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 8a1a4640b66b029baa575091f8624bfb7069cc86..3adb623480162cd3b42039ef086019e96ac50fbe 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -15,7 +15,7 @@ import { OResizeObserver } from '../resize-observer';
 import { useIntersectionObserver } from '../hooks';
 import type { IntersectionListenerT } from '../hooks';
 import { OChildOnly } from '../child-only';
-import ClientOnly from '../_shared/client-only';
+import ClientOnly from '../_shared/components/client-only';
 
 // TODO 处理嵌套
 
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index dcb74c0fecf53bb4c389425df02c3ef95952be6f..6d58d2919814a7df638047c6f25b7455a288f273 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -2,7 +2,7 @@
 
 .o-popup {
   position: absolute;
-  z-index: 100;
+  z-index: var(--popup-z-index);
   opacity: 1;
   transition: opacity var(--o-duration-m1) var(--o-easing-standard);
   &.out-view {
diff --git a/packages/opendesign/src/components/popup/style/var.scss b/packages/opendesign/src/components/popup/style/var.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..dc25e3cc3d35d5eb8f63efd2c0b8132e7a1fc2d5 100644
--- a/packages/opendesign/src/components/popup/style/var.scss
+++ b/packages/opendesign/src/components/popup/style/var.scss
@@ -0,0 +1,3 @@
+.o-popup {
+  --popup-z-index: var(--o-z-index-base);
+}
diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue
index 114a5de92ea864bc293611daf534fa721a033842..334e2f86819bf0b9984630210d27a5942deec2f1 100644
--- a/packages/opendesign/src/components/select/OSelect.vue
+++ b/packages/opendesign/src/components/select/OSelect.vue
@@ -6,7 +6,7 @@ import { OPopup } from '../popup';
 import { selectOptionInjectKey } from './provide';
 import { SelectOptionT, selectProps } from './types';
 import { getRoundClass } from '../_shared/style-class';
-import ClientOnly from '../_shared/client-only';
+import ClientOnly from '../_shared/components/client-only';
 
 const props = defineProps(selectProps);
 const emits = defineEmits<{
diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss
index 910d07e821ac9c9ed4fa8ab0b763453c412bbf72..8fa3561de81283c5e417b554db019b282cfc7ec4 100644
--- a/packages/opendesign/src/components/style/index.scss
+++ b/packages/opendesign/src/components/style/index.scss
@@ -5,6 +5,10 @@
   box-sizing: border-box;
 }
 
+:root {
+  --o-z-index-base: 100;
+}
+
 // icons
 .o-icon {
   --icon-g1: var(--o-color-text1);
diff --git a/packages/opendesign/src/components/tabs/OTabPane.vue b/packages/opendesign/src/components/tabs/OTabPane.vue
index 60abf5db731d3415daa13b7f0ab6e5ce8b2e1b6b..4a6afa76b1abe4ed83ee63e4ebd24ca71950c3c5 100644
--- a/packages/opendesign/src/components/tabs/OTabPane.vue
+++ b/packages/opendesign/src/components/tabs/OTabPane.vue
@@ -8,7 +8,7 @@ import { computed, getCurrentInstance, inject, onMounted, nextTick, ref, watch }
 import { tabsInjectKey } from './provide';
 import { tabPaneProps } from './types';
 import { IconClose } from '../_shared/icons';
-import ClientOnly from '../_shared/client-only';
+import ClientOnly from '../_shared/components/client-only';
 
 const props = defineProps(tabPaneProps);
 
diff --git a/packages/opendesign/src/components/textarea/OTextarea.vue b/packages/opendesign/src/components/textarea/OTextarea.vue
index c16be7b7ba968abc617ce4c0a6854c2a8428f089..16409d646d8bb380abe11088e13450f925c56234 100644
--- a/packages/opendesign/src/components/textarea/OTextarea.vue
+++ b/packages/opendesign/src/components/textarea/OTextarea.vue
@@ -8,7 +8,7 @@ import { toInputString } from './textarea';
 import { OResizeObserver } from '../resize-observer';
 import { textareaProps } from './types';
 import { getRoundClass } from '../_shared/style-class';
-import ClientOnly from '../_shared/client-only';
+import ClientOnly from '../_shared/components/client-only';
 
 const props = defineProps(textareaProps);
 
diff --git a/packages/portal/package.json b/packages/portal/package.json
index e7d0aa07326467ecd2af3ab3da02799bf67fca1f..1642235048aa19ab8019ea60bf417838490d55ee 100644
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -21,4 +21,4 @@
     "vite": "^3.2.3",
     "vue-tsc": "^1.0.13"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index af82290c48b3872aaf9f309a28cca75741ddaf23..f57e6dfadd7fd9fa23a8401f07a62d8eccb37a70 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -146,6 +146,24 @@ export const routes = [
     label: '进度条',
     component: () => import('@components/progress/__demo__/IndexProgress.vue'),
   },
+  {
+    path: '/dialog',
+    name: 'Dialog',
+    label: '对话框',
+    component: () => import('@components/dialog/__demo__/IndexDialog.vue'),
+  },
+  {
+    path: '/figure',
+    name: 'Figure',
+    label: '图片',
+    component: () => import('@components/figure/__demo__/IndexFigure.vue'),
+  },
+  {
+    path: '/card',
+    name: 'Card',
+    label: '卡片',
+    component: () => import('@components/card/__demo__/IndexCard.vue'),
+  },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',