From 2b952b6104615588b946647d68aff1b318612218 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Fri, 24 Feb 2023 17:09:10 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Ebreadcrumb?=
 =?UTF-8?q?=E9=9D=A2=E5=8C=85=E5=B1=91=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/breadcrumb.md                   | 15 ++++++
 .../src/components/breadcrumb/OBreadcrumb.vue | 21 ++++++++
 .../components/breadcrumb/OBreadcrumbItem.vue | 41 +++++++++++++++
 .../breadcrumb/__demo__/BreadcrumbBasic.vue   | 18 +++++++
 .../__demo__/BreadcrumbSeparator.vue          | 47 +++++++++++++++++
 .../breadcrumb/__demo__/IndexBreadcrumb.vue   | 12 +++++
 .../src/components/breadcrumb/index.ts        | 20 ++++++++
 .../src/components/breadcrumb/provide.ts      |  7 +++
 .../components/breadcrumb/style/index.scss    | 37 ++++++++++++++
 .../src/components/breadcrumb/style/index.ts  |  2 +
 .../src/components/breadcrumb/style/var.scss  |  9 ++++
 .../src/components/breadcrumb/types.ts        | 51 +++++++++++++++++++
 packages/portal/src/router.ts                 |  6 +++
 13 files changed, 286 insertions(+)
 create mode 100644 packages/docs/breadcrumb.md
 create mode 100644 packages/opendesign/src/components/breadcrumb/OBreadcrumb.vue
 create mode 100644 packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue
 create mode 100644 packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbBasic.vue
 create mode 100644 packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue
 create mode 100644 packages/opendesign/src/components/breadcrumb/__demo__/IndexBreadcrumb.vue
 create mode 100644 packages/opendesign/src/components/breadcrumb/index.ts
 create mode 100644 packages/opendesign/src/components/breadcrumb/provide.ts
 create mode 100644 packages/opendesign/src/components/breadcrumb/style/index.scss
 create mode 100644 packages/opendesign/src/components/breadcrumb/style/index.ts
 create mode 100644 packages/opendesign/src/components/breadcrumb/style/var.scss
 create mode 100644 packages/opendesign/src/components/breadcrumb/types.ts

diff --git a/packages/docs/breadcrumb.md b/packages/docs/breadcrumb.md
new file mode 100644
index 00000000..aaa575a3
--- /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/breadcrumb/OBreadcrumb.vue b/packages/opendesign/src/components/breadcrumb/OBreadcrumb.vue
new file mode 100644
index 00000000..844d4cb3
--- /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 00000000..a22f2432
--- /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 00000000..04452644
--- /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 00000000..bbd3e03e
--- /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 00000000..5f1c96e7
--- /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 00000000..d3cf4d9b
--- /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 00000000..08f1678f
--- /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 00000000..e712d451
--- /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 00000000..591b2fbd
--- /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 00000000..e70a036d
--- /dev/null
+++ b/packages/opendesign/src/components/breadcrumb/style/var.scss
@@ -0,0 +1,9 @@
+.o-breadcrumb {
+  --breadcrumb-color: var(--o-color-text3);
+  --breadcrumb-color-active: var(--o-color-text1);
+
+  --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 00000000..f5eee09f
--- /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/portal/src/router.ts b/packages/portal/src/router.ts
index 4db0e099..e64b38e4 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({
-- 
Gitee


From cbccad2806cff670f19ddeed81dd1c3388d15933 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Sat, 25 Feb 2023 09:46:55 +0800
Subject: [PATCH 2/2] =?UTF-8?q?chore:=20=E6=A0=B7=E5=BC=8F=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/badge/__demo__/BadgeBasic.vue  |  6 ++--
 .../components/badge/__demo__/BadgeColor.vue  |  9 +++--
 .../components/badge/__demo__/BadgeDot.vue    |  2 +-
 .../components/badge/__demo__/BadgeOffset.vue |  6 ++--
 .../components/badge/__demo__/BadgeSlot.vue   |  2 +-
 .../src/components/badge/style/var.scss       |  9 +++--
 .../src/components/breadcrumb/style/var.scss  |  4 +--
 .../src/components/button/style/var.scss      |  2 +-
 .../src/components/checkbox/OCheckbox.vue     |  2 +-
 .../src/components/checkbox/style/index.scss  | 33 ++++++++++---------
 .../src/components/checkbox/style/var.scss    | 16 ++++++---
 .../src/components/divider/style/index.scss   | 15 +++++----
 .../src/components/divider/style/var.scss     |  5 +--
 .../src/components/radio/ORadio.vue           |  2 +-
 .../src/components/radio/style/index.scss     | 20 +++++------
 .../src/components/radio/style/var.scss       | 13 +++++---
 .../src/components/rate/style/index.scss      |  2 +-
 .../src/components/rate/style/var.scss        |  6 ++--
 .../src/components/switch/style/index.scss    |  6 ++--
 .../src/components/switch/style/var.scss      | 10 +++---
 .../src/components/tag/style/var.scss         | 12 +++----
 packages/portal/src/App.vue                   |  2 +-
 22 files changed, 106 insertions(+), 78 deletions(-)

diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue b/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue
index 7d7da99d..48a38f4a 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 f367ad5c..78ac6645 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 3cd80fe2..78a23715 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 c65059e8..472adc08 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 9c84d405..9fd99674 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 ef9b2432..36566620 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/style/var.scss b/packages/opendesign/src/components/breadcrumb/style/var.scss
index e70a036d..a0a014c6 100644
--- a/packages/opendesign/src/components/breadcrumb/style/var.scss
+++ b/packages/opendesign/src/components/breadcrumb/style/var.scss
@@ -1,6 +1,6 @@
 .o-breadcrumb {
-  --breadcrumb-color: var(--o-color-text3);
-  --breadcrumb-color-active: var(--o-color-text1);
+  --breadcrumb-color: var(--o-color-info3);
+  --breadcrumb-color-active: var(--o-color-info1);
 
   --breadcrumb-gap: var(--o-gap-1);
 
diff --git a/packages/opendesign/src/components/button/style/var.scss b/packages/opendesign/src/components/button/style/var.scss
index dff05dfe..5ffb3c7a 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 5242f95e..43e64388 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 0c0144e0..fa4636cf 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 515c2649..80bb23d0 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 5a69e5d4..5de2a1e7 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 f258e800..66cf2a81 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 5db632cc..7a28e6ee 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 ade6f348..9eddfbd1 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 e4fe24b6..2f0e0ff7 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 6be90c31..efd7fde6 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 f8b3c464..6938ef23 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 9642e003..07cafb6e 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 9cc97762..4f02d5a3 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 3b524dea..ff444ada 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 23013dd5..a3bb9432 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>
-- 
Gitee