diff --git a/packages/docs/breadcrumb.md b/packages/docs/breadcrumb.md
new file mode 100644
index 0000000000000000000000000000000000000000..aaa575a3c8e2dff137bcb22a4a68b07723674454
--- /dev/null
+++ b/packages/docs/breadcrumb.md
@@ -0,0 +1,15 @@
+# Breadcrumb 面包屑
+
+| name      | type             | 默认值 | 说明             |
+| :-------- | :--------------- | :----- | ---------------- |
+| separator | string \| number | -      | 可选，分隔符字符 |
+
+# BreadcrumbItem
+
+| name      | type                                           | 默认值   | 说明                                     |
+| :-------- | :--------------------------------------------- | :------- | ---------------------------------------- |
+| href      | string                                         | -        | 可选，链接跳转地址                       |
+| target    | '\_blank' \| '\_parent' \| '\_self' \| '\_top' | '\_self' | 可选，链接跳转方式                       |
+| to        | string \| obeject                              | -        | 可选，路由跳转对象，同 vue-router        |
+| replace   | boolean                                        | false    | 可选，路由跳转时，是否覆盖浏览器历史记录 |
+| separator | string \| number                               | -        | 可选，分隔符字符                         |
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue b/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue
index 7d7da99d3399d2b10ab24222e2faa746bc605309..48a38f4a73c17234ca97812918fde32be6ee7224 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue
@@ -8,13 +8,13 @@ import { OBadge } from '../index';
   <h4>基础用法</h4>
   <section>
     <OBadge :value="9">
-      <OButton variant="fill" />
+      <OButton variant="solid" />
     </OBadge>
     <OBadge :value="100">
-      <OButton variant="fill" />
+      <OButton variant="solid" />
     </OBadge>
     <OBadge value="hot">
-      <OButton variant="fill" />
+      <OButton variant="solid" />
     </OBadge>
   </section>
 </template>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeColor.vue b/packages/opendesign/src/components/badge/__demo__/BadgeColor.vue
index f367ad5cf45b8a901a01ab39a1e7bfb7afd92f1f..78ac6645b92cd1f591d620a6d48225983d4ecb9e 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeColor.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeColor.vue
@@ -8,13 +8,16 @@ import { OBadge } from '../index';
   <h4>基础用法</h4>
   <section>
     <OBadge :value="9" color="primary">
-      <OButton variant="fill" />
+      <OButton variant="solid" />
     </OBadge>
     <OBadge :value="100" color="success">
-      <OButton variant="fill" />
+      <OButton variant="solid" />
     </OBadge>
     <OBadge value="hot" color="warning">
-      <OButton variant="fill" />
+      <OButton variant="solid" />
+    </OBadge>
+    <OBadge value="hot" color="danger">
+      <OButton variant="solid" />
     </OBadge>
   </section>
 </template>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue b/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue
index 3cd80fe2400efc62824b1caa199678c70205c597..78a23715ac5ab67635c515c499ac811e1a4da334 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue
@@ -12,7 +12,7 @@ const link = 'www.openeuler.org';
   <h4>红点徽章</h4>
   <section>
     <OBadge dot>
-      <OButton variant="fill" />
+      <OButton variant="solid" />
     </OBadge>
     <OBadge dot>
       <OLink :href="link">普通链接</OLink>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue b/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue
index c65059e83da0fe1e3b5850329866602b665cc92d..472adc082677f8cedb8485b027a87c839f1b6b07 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue
@@ -8,13 +8,13 @@ import { OBadge } from '../index';
   <h4>徽章位置偏移</h4>
   <section>
     <OBadge :value="9" :offset="[5, 10]">
-      <OButton variant="fill" />
+      <OButton variant="solid" />
     </OBadge>
     <OBadge :value="9" :offset="[5, 20]">
-      <OButton variant="fill" />
+      <OButton variant="solid" />
     </OBadge>
     <OBadge :value="9" :offset="['50%', '20%']">
-      <OButton variant="fill" />
+      <OButton variant="solid" />
     </OBadge>
   </section>
 </template>
diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue b/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue
index 9c84d405e011dae64fa443248a96d424df0fba8a..9fd9967433d6583e195e826a198355e05944cfff 100644
--- a/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue
+++ b/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue
@@ -9,7 +9,7 @@ import { OBadge } from '../index';
   <h4>自定义徽章内容</h4>
   <section>
     <OBadge>
-      <OButton variant="fill" />
+      <OButton variant="solid" />
       <template #content> <IconAdd /></template>
     </OBadge>
   </section>
diff --git a/packages/opendesign/src/components/badge/style/var.scss b/packages/opendesign/src/components/badge/style/var.scss
index ef9b24328ceba3247b599cc739e7899cd7910945..36566620e11a05a75022e68185491e6107498cc4 100644
--- a/packages/opendesign/src/components/badge/style/var.scss
+++ b/packages/opendesign/src/components/badge/style/var.scss
@@ -3,25 +3,30 @@
   --badge-text-height: var(--o-line_height-tip1);
 
   --badge-border: var(--o-radius-l);
-  --badge-color: var(--o-color-text1-inverse);
 
-  --badge-bg: var(--o-color-danger1);
+  --badge-color: var(--o-color-info1);
+
+  --badge-bg: var(--o-color-control1);
 
   --badge-padding: 20px;
 }
 
 .o-badge-primary {
+  --badge-color: var(--o-color-fill1);
   --badge-bg: var(--o-color-primary1);
 }
 
 .o-badge-success {
+  --badge-color: var(--o-color-fill1);
   --badge-bg: var(--o-color-success1);
 }
 
 .o-badge-warning {
+  --badge-color: var(--o-color-fill1);
   --badge-bg: var(--o-color-warning1);
 }
 
 .o-badge-danger {
+  --badge-color: var(--o-color-fill1);
   --badge-bg: var(--o-color-danger1);
 }
diff --git a/packages/opendesign/src/components/breadcrumb/OBreadcrumb.vue b/packages/opendesign/src/components/breadcrumb/OBreadcrumb.vue
new file mode 100644
index 0000000000000000000000000000000000000000..844d4cb33785ac66095150b4ed1ad653882047d2
--- /dev/null
+++ b/packages/opendesign/src/components/breadcrumb/OBreadcrumb.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { provide, reactive, toRefs } from 'vue';
+import { breadcrumbProps } from './types';
+import { breadcrumbInjectKey } from './provide';
+
+const props = defineProps(breadcrumbProps);
+const { separator } = toRefs(props);
+
+provide(
+  breadcrumbInjectKey,
+  reactive({
+    separator,
+  })
+);
+</script>
+
+<template>
+  <div class="o-breadcrumb">
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue b/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a22f2432ed2c783d9085b2da75bc7b018470849a
--- /dev/null
+++ b/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+
+import { breadcrumbItemProps } from './types';
+import { breadcrumbInjectKey } from './provide';
+import { IconChevronRight } from '../icons';
+
+defineProps(breadcrumbItemProps);
+
+const breadcrumbInjection = inject(breadcrumbInjectKey, null);
+
+const emits = defineEmits<{
+  (e: 'click'): void;
+}>();
+
+const onClick = () => {
+  emits('click');
+};
+</script>
+
+<template>
+  <div class="o-breadcrumb-item">
+    <!-- label -->
+    <a v-if="href" :href="href" :target="target" class="o-breadcrumb-item-label" @click="onClick">
+      <slot></slot>
+    </a>
+    <router-link v-else-if="to" :to="to" :replace="replace" @click="onClick">
+      <slot></slot>
+    </router-link>
+    <span v-else class="o-breadcrumb-item-label" @click="onClick">
+      <slot></slot>
+    </span>
+    <!-- separator -->
+    <span class="o-breadcrumb-item-separator">
+      <slot v-if="$slots.separator" name="separator"></slot>
+      <span v-else-if="separator"> {{ separator }}</span>
+      <template v-else-if="breadcrumbInjection?.separator">{{ breadcrumbInjection?.separator }} </template>
+      <IconChevronRight v-else />
+    </span>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbBasic.vue b/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..044526444b232d5c0b439863d418cd9a8b5b2e20
--- /dev/null
+++ b/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbBasic.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { OBreadcrumb, OBreadcrumbItem } from '../index';
+
+const handleClick = () => {
+  console.log(1);
+};
+</script>
+
+<template>
+  <h4>基础用法</h4>
+  <section>
+    <OBreadcrumb>
+      <OBreadcrumbItem :to="{ name: 'Home' }" @click="handleClick">首页</OBreadcrumbItem>
+      <OBreadcrumbItem href="http://devin-cwd.gitee.io/design-token-editor/#/token-color" target="_blank" @click="handleClick">Token</OBreadcrumbItem>
+      <OBreadcrumbItem @click="handleClick">面包屑</OBreadcrumbItem>
+    </OBreadcrumb>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue b/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bbd3e03e3ab3868568d2f63146c4a8cdd3ed6386
--- /dev/null
+++ b/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { IconAdd } from '../../icons';
+import { OBreadcrumb, OBreadcrumbItem } from '../index';
+
+const handleClick = () => {
+  console.log('click!!!');
+};
+</script>
+
+<template>
+  <h4>自定义分隔符</h4>
+  <section>
+    <OBreadcrumb separator="/">
+      <OBreadcrumbItem :to="{ name: 'Home' }" @click="handleClick">首页</OBreadcrumbItem>
+      <OBreadcrumbItem href="http://devin-cwd.gitee.io/design-token-editor/#/token-color" target="_blank" @click="handleClick">Token</OBreadcrumbItem>
+      <OBreadcrumbItem @click="handleClick">面包屑</OBreadcrumbItem>
+    </OBreadcrumb>
+
+    <OBreadcrumb separator="/">
+      <OBreadcrumbItem :to="{ name: 'Home' }" @click="handleClick">
+        首页
+        <template #separator>
+          <IconAdd />
+        </template>
+      </OBreadcrumbItem>
+      <OBreadcrumbItem href="http://devin-cwd.gitee.io/design-token-editor/#/token-color" target="_blank" @click="handleClick">
+        Token
+        <template #separator>
+          <IconAdd />
+        </template>
+      </OBreadcrumbItem>
+      <OBreadcrumbItem @click="handleClick">
+        面包屑
+        <template #separator>
+          <IconAdd />
+        </template>
+      </OBreadcrumbItem>
+    </OBreadcrumb>
+  </section>
+</template>
+
+<style scoped>
+section {
+  flex-direction: column;
+  align-items: flex-start;
+}
+</style>
diff --git a/packages/opendesign/src/components/breadcrumb/__demo__/IndexBreadcrumb.vue b/packages/opendesign/src/components/breadcrumb/__demo__/IndexBreadcrumb.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5f1c96e77aa2c40f7d67c5a1cb91bc8f5e736e86
--- /dev/null
+++ b/packages/opendesign/src/components/breadcrumb/__demo__/IndexBreadcrumb.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import '../style';
+import BreadcrumbBasic from './BreadcrumbBasic.vue';
+import BreadcrumbSeparator from './BreadcrumbSeparator.vue';
+</script>
+
+<template>
+  <div class="page-demo">
+    <BreadcrumbBasic />
+    <BreadcrumbSeparator />
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/breadcrumb/index.ts b/packages/opendesign/src/components/breadcrumb/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d3cf4d9be6af1ad173aefc9c36ad75b5dc513e3b
--- /dev/null
+++ b/packages/opendesign/src/components/breadcrumb/index.ts
@@ -0,0 +1,20 @@
+import type { App } from 'vue';
+
+import _OBreadcrumb from './OBreadcrumb.vue';
+import _OBreadcrumbItem from './OBreadcrumbItem.vue';
+
+export * from './types';
+
+const OBreadcrumb = Object.assign(_OBreadcrumb, {
+  install(app: App) {
+    app.component(_OBreadcrumb.name, _OBreadcrumb);
+  },
+});
+
+const OBreadcrumbItem = Object.assign(_OBreadcrumbItem, {
+  install(app: App) {
+    app.component(_OBreadcrumbItem.name, _OBreadcrumbItem);
+  },
+});
+
+export { OBreadcrumb, OBreadcrumbItem };
diff --git a/packages/opendesign/src/components/breadcrumb/provide.ts b/packages/opendesign/src/components/breadcrumb/provide.ts
new file mode 100644
index 0000000000000000000000000000000000000000..08f1678fc1245869170b9d0d18d536c7a140d125
--- /dev/null
+++ b/packages/opendesign/src/components/breadcrumb/provide.ts
@@ -0,0 +1,7 @@
+import { InjectionKey } from 'vue';
+
+interface BreadcrumbInjectT {
+  separator: string | number;
+}
+
+export const breadcrumbInjectKey: InjectionKey<BreadcrumbInjectT> = Symbol('provide-breadcrumb');
diff --git a/packages/opendesign/src/components/breadcrumb/style/index.scss b/packages/opendesign/src/components/breadcrumb/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e712d4512c9828a81c8ffe6615d58f89c5510e97
--- /dev/null
+++ b/packages/opendesign/src/components/breadcrumb/style/index.scss
@@ -0,0 +1,37 @@
+@use './var.scss';
+
+.o-breadcrumb {
+  display: inline-flex;
+  align-items: center;
+  color: var(--breadcrumb-color);
+  font-size: var(--breadcrumb-text-size);
+  line-height: var(--breadcrumb-text-height);
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.o-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  &:last-child {
+    color: var(--breadcrumb-color-active);
+
+    .o-breadcrumb-item-label {
+      cursor: default;
+    }
+
+    .o-breadcrumb-item-separator {
+      display: none;
+    }
+  }
+}
+
+.o-breadcrumb-item-label {
+  cursor: pointer;
+}
+
+.o-breadcrumb-item-separator {
+  margin: 0 var(--breadcrumb-gap);
+}
diff --git a/packages/opendesign/src/components/breadcrumb/style/index.ts b/packages/opendesign/src/components/breadcrumb/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716
--- /dev/null
+++ b/packages/opendesign/src/components/breadcrumb/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/breadcrumb/style/var.scss b/packages/opendesign/src/components/breadcrumb/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a0a014c6c775876661bb5d2820f41eea85f0486c
--- /dev/null
+++ b/packages/opendesign/src/components/breadcrumb/style/var.scss
@@ -0,0 +1,9 @@
+.o-breadcrumb {
+  --breadcrumb-color: var(--o-color-info3);
+  --breadcrumb-color-active: var(--o-color-info1);
+
+  --breadcrumb-gap: var(--o-gap-1);
+
+  --breadcrumb-text-size: var(--o-font_size-text);
+  --breadcrumb-text-height: var(--o-line_height-text);
+}
diff --git a/packages/opendesign/src/components/breadcrumb/types.ts b/packages/opendesign/src/components/breadcrumb/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f5eee09fa769597a04c76c2f779e138ee0101292
--- /dev/null
+++ b/packages/opendesign/src/components/breadcrumb/types.ts
@@ -0,0 +1,51 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+export const breadcrumbProps = {
+  /**
+   * 分隔符字符
+   */
+  separator: {
+    type: [String, Number],
+  },
+};
+
+export type TargetTypeT = '_blank' | '_self' | '_parent' | '_top';
+
+export const breadcrumbItemProps = {
+  /**
+   * 链接跳转地址
+   */
+  href: {
+    type: String,
+  },
+  /**
+   * 链接跳转方式
+   */
+  target: {
+    type: String as PropType<TargetTypeT>,
+    default: '_self',
+  },
+  /**
+   * 路由跳转对象
+   */
+  to: {
+    type: [String, Object] as PropType<string | Record<string, unknown>>,
+  },
+  /**
+   * 路由跳转时，是否覆盖浏览器历史记录
+   */
+  replace: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 分隔符字符
+   */
+  separator: {
+    type: [String, Number],
+  },
+};
+
+export type BreadcrumbPropsT = ExtractPropTypes<typeof breadcrumbProps>;
+
+export type BreadcrumbItemProps = ExtractPropTypes<typeof breadcrumbProps>;
diff --git a/packages/opendesign/src/components/button/style/var.scss b/packages/opendesign/src/components/button/style/var.scss
index dff05dfedc20d9605fe8ffd0a4f77c8a35e9ad35..5ffb3c7a78045131722f5a59a8c3ce4e32815873 100644
--- a/packages/opendesign/src/components/button/style/var.scss
+++ b/packages/opendesign/src/components/button/style/var.scss
@@ -1,4 +1,4 @@
-.o-btn-normal {
+.o-btn {
   --btn-color: var(--o-color-info1);
   --btn-color-hover: var(--o-color-info1);
   --btn-color-active: var(--o-color-info1);
diff --git a/packages/opendesign/src/components/checkbox/OCheckbox.vue b/packages/opendesign/src/components/checkbox/OCheckbox.vue
index 5242f95e321ce2a6792ccf60bd4e83072476f280..43e643881c1337df7bcb6b98e4893ac66beb8a60 100644
--- a/packages/opendesign/src/components/checkbox/OCheckbox.vue
+++ b/packages/opendesign/src/components/checkbox/OCheckbox.vue
@@ -119,7 +119,7 @@ defineExpose({
       <input type="checkbox" :value="value" :disabled="isDisabled" :checked="isChecked" @click="onClick" @change="onChange" />
       <slot v-if="$slots.checkbox" name="checkbox" :checked="isChecked" :disabled="isDisabled"></slot>
       <template v-else>
-        <span class="o-checkbox-icon">
+        <span class="o-checkbox-input">
           <IconMinus v-if="indeterminate" />
           <IconDone v-else-if="isChecked" />
         </span>
diff --git a/packages/opendesign/src/components/checkbox/style/index.scss b/packages/opendesign/src/components/checkbox/style/index.scss
index 0c0144e06e68711b407298e78bd4b88424821d1c..fa4636cff8897390c001b5da6537b83d0f0f2ff3 100644
--- a/packages/opendesign/src/components/checkbox/style/index.scss
+++ b/packages/opendesign/src/components/checkbox/style/index.scss
@@ -19,32 +19,32 @@
   }
 
   &:hover {
-    .o-checkbox-icon {
-      border-color: var(--checkbox-icon-checked);
+    .o-checkbox-input {
+      // border-color: var(--checkbox-icon-checked);
     }
   }
 
   &.is-checked,
   &.is-indeterminate {
-    .o-checkbox-icon {
-      background-color: var(--checkbox-icon-checked);
-      border-color: var(--checkbox-icon-checked);
+    .o-checkbox-input {
+      background-color: var(--checkbox-input-bg-checked);
+      border-color: var(--checkbox-input-border-checked);
     }
   }
 
   &.is-disabled {
     cursor: not-allowed;
-    color: var(--checkbox-color_disabled);
-    .o-checkbox-icon {
-      border-color: var(--o-color-border2);
+    color: var(--checkbox-color-disabled);
+    .o-checkbox-input {
+      border-color: var(--checkbox-input-border-disabled);
     }
   }
 
   &.is-checked.is-disabled,
   &.is-indeterminate.is-disabled {
-    .o-checkbox-icon {
-      background-color: var(--checkbox-icon-checked_disabled);
-      border-color: var(--checkbox-icon-checked_disabled);
+    .o-checkbox-input {
+      background-color: var(--checkbox-input-bg-checked-disabled);
+      border-color: var(--checkbox-input-bg-checked-disabled);
     }
   }
 }
@@ -56,14 +56,15 @@
   height: 100%;
 }
 
-.o-checkbox-icon {
-  width: 16px;
-  height: 16px;
-  border: 1px solid var(--o-color-border1);
+.o-checkbox-input {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  color: var(--o-color-text1-inverse);
+  width: 16px;
+  height: 16px;
+  background-color: var(--checkbox-input-bg);
+  color: var(--checkbox-input-color);
+  border: 1px solid var(--checkbox-input-border);
 }
 
 .o-checkbox-label {
diff --git a/packages/opendesign/src/components/checkbox/style/var.scss b/packages/opendesign/src/components/checkbox/style/var.scss
index 515c26498aeebb71dd82148a5a8e9f24d089ea3b..80bb23d075de83f7e576c8a45222284efa7f70df 100644
--- a/packages/opendesign/src/components/checkbox/style/var.scss
+++ b/packages/opendesign/src/components/checkbox/style/var.scss
@@ -1,10 +1,18 @@
 .o-checkbox {
-  --checkbox-color: var(--o-color-text1);
-  --checkbox-color_disabled: var(--o-color-text4);
+  --checkbox-color: var(--o-color-info1);
+  --checkbox-color-disabled: var(--o-color-info4);
 
   --checkbox-text-size: var(--o-font_size-text);
   --checkbox-text-height: var(--o-line_height-text);
 
-  --checkbox-icon-checked: var(--o-color-primary1);
-  --checkbox-icon-checked_disabled: var(--o-color-primary4);
+  --checkbox-input-color: var(--o-color-fill1);
+
+  --checkbox-input-border: var(--o-color-control1);
+  --checkbox-input-border-disabled: var(--o-color-control4);
+  --checkbox-input-border-checked: var(--o-color-primary1);
+  --checkbox-input-border-checked-disabled: var(--o-color-primary4);
+
+  --checkbox-input-bg: var(--o-color-fill1);
+  --checkbox-input-bg-checked: var(--o-color-primary1);
+  --checkbox-input-bg-checked-disabled: var(--o-color-primary4);
 }
diff --git a/packages/opendesign/src/components/divider/style/index.scss b/packages/opendesign/src/components/divider/style/index.scss
index 5a69e5d4e63d45eff5d00a371bf94fea066f69e0..5de2a1e7dfaaaa6019eae0e8de7a81e78fcc7e6a 100644
--- a/packages/opendesign/src/components/divider/style/index.scss
+++ b/packages/opendesign/src/components/divider/style/index.scss
@@ -1,5 +1,12 @@
 @use './var.scss';
 
+.o-divider {
+  color: var(--o-divider-color);
+  font-size: var(--o-divider-text-size);
+  line-height: var(--o-divider-text-height);
+  font-weight: 500;
+}
+
 .o-divider-direction-horizontal {
   display: flex;
   align-items: center;
@@ -12,14 +19,10 @@
   height: 1px;
   border-width: 1px 0 0 0;
   border-style: solid;
-  border-color: var(--o-divider-color);
+  border-color: var(--o-divider-line-color);
 }
 
 .o-divider-content {
-  color: var(--o-divider-text-color);
-  font-size: var(--o-divider-text-size);
-  line-height: var(--o-divider-text-height);
-  font-weight: 500;
   margin: 0 16px;
   white-space: nowrap;
 }
@@ -48,7 +51,7 @@
   vertical-align: middle;
   border-width: 0 0 0 1px;
   border-style: solid;
-  border-color: var(--o-divider-color);
+  border-color: var(--o-divider-line-color);
 }
 
 .o-divider-dashed {
diff --git a/packages/opendesign/src/components/divider/style/var.scss b/packages/opendesign/src/components/divider/style/var.scss
index f258e800ec8f2852712774f9172b05fe858ef100..66cf2a81c7757cf696ec4a256ba6ed8eff6c6820 100644
--- a/packages/opendesign/src/components/divider/style/var.scss
+++ b/packages/opendesign/src/components/divider/style/var.scss
@@ -1,10 +1,11 @@
 .o-divider {
-  --o-divider-color: var(--o-color-division1);
+  --o-divider-color: var(--o-color-info1);
+
+  --o-divider-line-color: var(--o-color-control1);
 
   --o-divider-gap-horizontal: var(--o-gap-4);
   --o-divider-gap-vertical: var(--o-gap-2);
 
-  --o-divider-text-color: var(--o-color-text1);
   --o-divider-text-size: var(--o-font_size-text);
   --o-divider-text-height: var(--o-line_height-text);
 }
diff --git a/packages/opendesign/src/components/radio/ORadio.vue b/packages/opendesign/src/components/radio/ORadio.vue
index 5db632ccd87fc6e60b0da3a363f796c275350b5b..7a28e6eee8000950284c7951b32018d81a45b3d5 100644
--- a/packages/opendesign/src/components/radio/ORadio.vue
+++ b/packages/opendesign/src/components/radio/ORadio.vue
@@ -100,7 +100,7 @@ const onChange = () => {
       <input type="radio" :value="value" :disabled="isDisabled" :checked="isChecked" @click="onClick" @change="onChange" />
       <slot v-if="$slots.radio" name="radio" :checked="isChecked" :disabled="isDisabled"></slot>
       <template v-else>
-        <span class="o-radio-icon"></span>
+        <span class="o-radio-input"></span>
         <span class="o-radio-label">
           <slot></slot>
         </span>
diff --git a/packages/opendesign/src/components/radio/style/index.scss b/packages/opendesign/src/components/radio/style/index.scss
index ade6f34893e48d328687ec594f684f58cd4381d2..9eddfbd116a5f047de545d0b332b185cb1f9ec61 100644
--- a/packages/opendesign/src/components/radio/style/index.scss
+++ b/packages/opendesign/src/components/radio/style/index.scss
@@ -19,25 +19,25 @@
   }
 
   &.is-checked {
-    .o-radio-icon {
+    .o-radio-input {
       &::after {
-        background-color: var(--radio-icon-checked);
+        background-color: var(--radio-input-color-checked);
       }
     }
   }
 
   &.is-disabled {
     cursor: not-allowed;
-    color: var(--radio-color_disabled);
-    .o-radio-icon {
-      border-color: var(--o-color-border2);
+    color: var(--radio-color-disabled);
+    .o-radio-input {
+      border-color: var(--radio-input-border-disabled);
     }
   }
 
   &.is-checked.is-disabled {
-    .o-radio-icon {
+    .o-radio-input {
       &::after {
-        background-color: var(--radio-icon-checked_disabled);
+        background-color: var(--radio-input-color-disabled);
       }
     }
   }
@@ -50,14 +50,14 @@
   height: 100%;
 }
 
-.o-radio-icon {
+.o-radio-input {
   position: relative;
   display: inline-block;
   border-radius: 50%;
   width: 18px;
   height: 18px;
-  background: var(--o-color-bg2);
-  border: 1px solid var(--o-color-border1);
+  background-color: var(--radio-input-bg);
+  border: 1px solid var(--radio-input-border);
 
   &::after {
     content: '';
diff --git a/packages/opendesign/src/components/radio/style/var.scss b/packages/opendesign/src/components/radio/style/var.scss
index e4fe24b67f6b4d29ecf7f4ce1871ea3a050ec26f..2f0e0ff73ffbe6b80ed77e8595a2bc1809554af9 100644
--- a/packages/opendesign/src/components/radio/style/var.scss
+++ b/packages/opendesign/src/components/radio/style/var.scss
@@ -1,10 +1,15 @@
 .o-radio {
-  --radio-color: var(--o-color-text1);
-  --radio-color_disabled: var(--o-color-text4);
+  --radio-color: var(--o-color-info1);
+  --radio-color-disabled: var(--o-color-info4);
 
   --radio-text-size: var(--o-font_size-text);
   --radio-text-height: var(--o-line_height-text);
 
-  --radio-icon-checked: var(--o-color-primary1);
-  --radio-icon-checked_disabled: var(--o-color-primary4);
+  --radio-input-bg: var(--o-color-fill2);
+
+  --radio-input-color-checked: var(--o-color-primary1);
+  --radio-input-color-disabled: var(--o-color-primary4);
+
+  --radio-input-border: var(--o-color-control1);
+  --radio-input-border-disabled: var(--o-color-control4);
 }
diff --git a/packages/opendesign/src/components/rate/style/index.scss b/packages/opendesign/src/components/rate/style/index.scss
index 6be90c311914a230f292aeb411c12d92aa9b0593..efd7fde623c24f7eb12bee57708cb7c4fa16ac62 100644
--- a/packages/opendesign/src/components/rate/style/index.scss
+++ b/packages/opendesign/src/components/rate/style/index.scss
@@ -12,7 +12,7 @@
   position: relative;
 
   & + .o-rate-item {
-    margin-left: 8px;
+    margin-left: var(--rate-gap);
   }
 
   &.is-half-active {
diff --git a/packages/opendesign/src/components/rate/style/var.scss b/packages/opendesign/src/components/rate/style/var.scss
index f8b3c464785ee0a2d26de669a4a3847300c1a4e9..6938ef2302a645978c5537bf96ef1c77daa2b01a 100644
--- a/packages/opendesign/src/components/rate/style/var.scss
+++ b/packages/opendesign/src/components/rate/style/var.scss
@@ -1,6 +1,8 @@
 .o-rate {
-  --rate-color: var(--o-color-info1);
-  --rate-color-active: var(--o-color-major1);
+  --rate-color: var(--o-color-control1-light);
+  --rate-color-active: var(--o-color-warning1);
+
+  --rate-gap: var(--o-gap-2);
 
   --rate-height: var(--o-font_size-h1);
 }
diff --git a/packages/opendesign/src/components/switch/style/index.scss b/packages/opendesign/src/components/switch/style/index.scss
index 9642e003841e5c23ce2e06f4adfd4e6494e3d980..07cafb6e8fb10f720505a419bfe059bab7f933cf 100644
--- a/packages/opendesign/src/components/switch/style/index.scss
+++ b/packages/opendesign/src/components/switch/style/index.scss
@@ -14,15 +14,15 @@
   &.is-disabled,
   &.is-loading {
     cursor: not-allowed;
-    background-color: var(--switch-bg_disabled);
+    background-color: var(--switch-bg-disabled);
   }
 
   &.is-disabled.is-checked,
   &.is-loading.is-checked {
-    background-color: var(--switch-bg-checked_disabled);
+    background-color: var(--switch-bg-checked-disabled);
     .o-switch-handler {
       .o-switch-icon_loading {
-        color: var(--switch-bg-checked_disabled);
+        color: var(--switch-bg-checked-disabled);
       }
     }
   }
diff --git a/packages/opendesign/src/components/switch/style/var.scss b/packages/opendesign/src/components/switch/style/var.scss
index 9cc97762c6af3363a645d6cad885f9e52c7c5d92..4f02d5a3c3c9f7f07e2e7b1ac8cd93618daa54b5 100644
--- a/packages/opendesign/src/components/switch/style/var.scss
+++ b/packages/opendesign/src/components/switch/style/var.scss
@@ -1,12 +1,12 @@
 .o-switch {
-  --switch-bg: var(--o-color-info1);
-  --switch-bg_disabled: var(--o-color-info4);
+  --switch-bg: var(--o-color-control1);
+  --switch-bg-disabled: var(--o-color-control4);
   --switch-bg-checked: var(--o-color-primary1);
-  --switch-bg-checked_disabled: var(--o-color-primary4);
+  --switch-bg-checked-disabled: var(--o-color-primary4);
 
-  --switch-handler-bg: var(--o-color-bg2);
+  --switch-handler-bg: var(--o-color-fill2);
 
-  --switch-color: var(--o-color-text1-inverse);
+  --switch-color: var(--o-color-info1-inverse);
 
   --switch-text-size-l: var(--o-font_size-h4);
   --switch-text-size-m: var(--o-font_size-tip1);
diff --git a/packages/opendesign/src/components/tag/style/var.scss b/packages/opendesign/src/components/tag/style/var.scss
index 3b524dea93021a17a3cf8a16f2fd3f0c237d4707..ff444ada44e6dde12a48af4982408d7db40beba3 100644
--- a/packages/opendesign/src/components/tag/style/var.scss
+++ b/packages/opendesign/src/components/tag/style/var.scss
@@ -1,15 +1,15 @@
 .o-tag {
-  --tag-color: var(--o-color-text2);
-  --tag-color-success: var(--o-color-text1-inverse);
-  --tag-color-warning: var(--o-color-text1-inverse);
-  --tag-color-danger: var(--o-color-text1-inverse);
+  --tag-color: var(--o-color-info1);
+  --tag-color-success: var(--o-color-info1-inverse);
+  --tag-color-warning: var(--o-color-info1-inverse);
+  --tag-color-danger: var(--o-color-info1-inverse);
 
-  --tag-bg: var(--o-color-info1);
+  --tag-bg: var(--o-color-control1-light);
   --tag-bg-success: var(--o-color-success1);
   --tag-bg-warning: var(--o-color-warning1);
   --tag-bg-danger: var(--o-color-danger1);
 
-  --tag-border: var(--o-color-info1);
+  --tag-border: var(--o-color-control1-light);
   --tag-border-success: var(--o-color-success1);
   --tag-border-warning: var(--o-color-warning1);
   --tag-border-danger: var(--o-color-danger1);
diff --git a/packages/portal/src/App.vue b/packages/portal/src/App.vue
index 23013dd56f78f998ad543410c172804e5be95c72..a3bb9432645f1343d45c8b096e9b3141da5bc256 100644
--- a/packages/portal/src/App.vue
+++ b/packages/portal/src/App.vue
@@ -17,6 +17,7 @@ import TheAside from './components/TheAside.vue';
 body {
   --app-header-height: 48px;
   --app-aside-width: 240px;
+  font-family: 'Helvetica', 'Arial', 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 .app-header {
   position: fixed;
@@ -38,6 +39,5 @@ body {
   margin-top: var(--app-header-height);
   margin-left: var(--app-aside-width);
   min-height: calc(100vh - 48px);
-  // background-color: var(--o-color-bg1);
 }
 </style>
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 4db0e099dba1edf31e4c15226735797e3d8cd921..e64b38e4685e1b82fdce709e43c15b45f930bc7b 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -141,6 +141,12 @@ export const routes = [
     label: '评分',
     component: () => import('@components/rate/__demo__/IndexRate.vue'),
   },
+  {
+    path: '/breadcrumb',
+    name: 'Breadcrumb ',
+    label: '面包屑',
+    component: () => import('@components/breadcrumb/__demo__/IndexBreadcrumb.vue'),
+  },
 ];
 
 export const router = createRouter({