diff --git a/packages/docs/src/components/DemoContainer.vue b/packages/docs/src/components/DemoContainer.vue
index e71475618184bd4e2d25e6e54c2f492feb959f3f..df230d46c3763f9e28e6933e903053d82e023906 100644
--- a/packages/docs/src/components/DemoContainer.vue
+++ b/packages/docs/src/components/DemoContainer.vue
@@ -108,7 +108,7 @@ const isRender = computed(() => {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  margin-top: 8px;
+  margin-top: 4px;
 }
 .source {
   border: 1px solid var(--o-color-control4);
diff --git a/packages/opendesign/src/rate/ORate.vue b/packages/opendesign/src/rate/ORate.vue
index b49b209ef37c70738420c6cb08ec939e20552763..ae144a31c0f9b21aa0d0421c93c7872d9a28d230 100644
--- a/packages/opendesign/src/rate/ORate.vue
+++ b/packages/opendesign/src/rate/ORate.vue
@@ -59,7 +59,7 @@ const setValue = (index: number, isTopIcon: boolean) => {
 
 // 记录图标状态
 const iconStatus = computed(() => {
-  const statusArr = new Array(props.count).fill('');
+  const statusArr: Array<'' | 'full' | 'half'> = new Array(props.count).fill('');
   for (let i = 0; i < props.count; i++) {
     const val = hoverIndex.value === -1 ? realValue.value ?? -1 : hoverIndex.value;
 
@@ -96,7 +96,7 @@ const showLabel = computed(() => {
       <OPopover v-for="(item, idx) in count" :key="item" :adjust-width="false" :adjust-min-width="false" :visible="false" wrap-class="o-rate-popover">
         <template #target>
           <ORateItem
-            :status="iconStatus[idx]"
+            :status="iconStatus[idx] || 'empty'"
             @hover="
               (isHalf) => {
                 setHoverIndex(idx, isHalf);
@@ -120,7 +120,7 @@ const showLabel = computed(() => {
         v-for="(item, idx) in count"
         :key="item"
         :index="idx"
-        :status="iconStatus[idx]"
+        :status="iconStatus[idx] || 'empty'"
         @hover="
           (isHalf) => {
             setHoverIndex(idx, isHalf);
diff --git a/packages/opendesign/src/rate/__docs__/__case__/CustomIcon.vue b/packages/opendesign/src/rate/__docs__/__case__/CustomIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..76667ff90780cea5e451b967575e9c7a407a40e0
--- /dev/null
+++ b/packages/opendesign/src/rate/__docs__/__case__/CustomIcon.vue
@@ -0,0 +1,110 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 自定义图标
+
+可在 `icon` 插槽中自定义图标
+
+#### 注意事项
+
+##### 1. 图标索引获取
+
+通过 `icon` 插槽的 `index` 属性可获取当前图标索引值，用于：
+
+- 标识图标在评分组件中的位置
+- 实现差异化渲染逻辑（如首尾图标特殊样式）
+
+##### 2. 尺寸适配
+
+当修改 `ORate` 的 `size` 属性时，请确保自定义图标能够响应尺寸变化：
+
+```css
+.custom-icon {
+  /** ORate 组件的 size 属性会修改组件根元素的 font-size 属性值，
+      因此可通过 em 相对单位进行图标大小适配 */
+  width: 1em;
+  height: 1em;
+}
+
+.custom-icon-other {
+  /** 在不方便使用 em 单位的情况下，可以使用 CSS 变量 */
+  width: var(--rate-size);
+  height: var(--rate-size);
+}
+```
+
+##### 3. 选中状态
+
+通过 `icon` 插槽的 `status` 属性可获取当前图标的状态：
+
+- `''`: 未选中
+- `'full'`: 选中
+- `'half'`: 半选中
+
+自定义图标需要基于这些状态对自身的颜色或形状进行修改。注意：可通过 CSS 变量 `--rate-color-selected` 和 `--rate-color` 分别获取图标选中时的颜色和未选中时的颜色。
+
+<!-- en-US -->
+
+### Custom Icons
+
+Icons can be customized within the `icon` slot.
+
+#### Considerations
+
+##### 1. Icon Index Retrieval
+
+The `index` property of the `icon` slot can be used to retrieve the current icon index value, which is useful for:
+
+- Identifying the position of the icon within the rating component.
+- Implementing differentiated rendering logic (e.g., special styles for the first and last icons).
+
+##### 2. Size Adaptation
+
+When modifying the `size` property of `ORate`, ensure that the custom icon can adapt to size changes:
+
+```css
+.custom-icon {
+  /** The size property of the ORate component modifies the font-size value of the root element,
+      so icon size adaptation can be achieved using the em relative unit. */
+  width: 1em;
+  height: 1em;
+}
+
+.custom-icon-other {
+  /** When using em units is not convenient, CSS variables can be used instead. */
+  width: var(--rate-size);
+  height: var(--rate-size);
+}
+```
+
+##### 3. Selected State
+
+The status property of the icon slot can be used to retrieve the current state of the icon:
+
+- `''`: Not selected
+- `'full'`: Selected
+- `'half'`: Half-selected
+
+Custom icons should modify their color or shape based on these states.
+Note: The selected color and unselected color of the icon can be retrieved via the CSS variables `--rate-color-selected` and `--rate-color`, respectively.
+</docs>
+<script setup lang="ts">
+import { ORate } from '@opensig/opendesign';
+</script>
+
+<template>
+  <ORate size="large" color="success" allow-half>
+    <template #icon>
+      <svg viewBox="0 0 24 24" class="custom-icon">
+        <ellipse ry="11" rx="11" cy="12" cx="12" fill="currentColor" />
+      </svg>
+    </template>
+  </ORate>
+</template>
+
+<style lang="scss" scoped>
+.custom-icon {
+  width: 1em;
+  height: 1em;
+}
+</style>
diff --git a/packages/opendesign/src/rate/__docs__/__case__/CustomIconOutline.vue b/packages/opendesign/src/rate/__docs__/__case__/CustomIconOutline.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a855e3195bf211aab4cf878bf05b9f6ed62aa9e7
--- /dev/null
+++ b/packages/opendesign/src/rate/__docs__/__case__/CustomIconOutline.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ORate } from '@opensig/opendesign';
+</script>
+
+<template>
+  <ORate size="large" color="danger" allow-half>
+    <template #icon="{ status }">
+      <svg viewBox="0 0 24 24" :class="['custom-icon', { full: status === 'full', half: status === 'half' }]">
+        <ellipse ry="10" rx="10" cy="12" cx="12" class="outline" />
+        <path d="M 12, 2 A 10, 10, 0, 0, 0, 12, 22 Z" class="left-half" />
+        <path d="M 12, 2 A 10, 10, 0, 0, 1, 12, 22 Z" class="right-half" />
+      </svg>
+    </template>
+  </ORate>
+</template>
+
+<style lang="scss" scoped>
+.custom-icon {
+  width: 1em;
+  height: 1em;
+}
+.outline {
+  fill: none;
+  stroke: var(--rate-color-selected);
+  stroke-width: 2;
+}
+.left-half, .right-half {
+  fill: none;
+  stroke: none;
+}
+.full {
+  .outline {
+    stroke: var(--rate-color-selected);
+  }
+  .left-half,
+  .right-half {
+    fill: var(--rate-color-selected);
+  }
+}
+.half {
+  .outline {
+    stroke: var(--rate-color-selected);
+  }
+  .left-half {
+    fill: var(--rate-color-selected);
+  }
+}
+</style>
diff --git a/packages/opendesign/src/rate/__docs__/__case__/RateLabel.vue b/packages/opendesign/src/rate/__docs__/__case__/RateLabel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3124a7f72ea090edc06f081db755a700963a3354
--- /dev/null
+++ b/packages/opendesign/src/rate/__docs__/__case__/RateLabel.vue
@@ -0,0 +1,22 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 评分提示
+
+通过 `ORate` 组件的 `labels` 属性，可以设置评分提示文案。`labels` 属性接受一个数组，数组长度必须和 `count` 属性一致。
+
+<!-- en-US -->
+
+### Rating Tips
+
+The `labels` prop of the `ORate` component can be used to set rating tip text. The `labels` prop accepts an array whose length must match the `count` prop.
+</docs>
+
+<script setup lang="ts">
+import { ORate } from '@opensig/opendesign';
+
+const labels = ['非常不满意', '不满意', ' 一般', '满意', '非常满意'];
+</script>
+<template>
+  <ORate :labels="labels" size="large" color="primary" :count="labels.length" />
+</template>
diff --git a/packages/opendesign/src/rate/__docs__/__case__/RateUsage.vue b/packages/opendesign/src/rate/__docs__/__case__/RateUsage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..555607ea0e4b39219b84a5d2b8a97c94e3887245
--- /dev/null
+++ b/packages/opendesign/src/rate/__docs__/__case__/RateUsage.vue
@@ -0,0 +1,49 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 使用
+
+<!-- en-US -->
+
+## Usage
+</docs>
+
+<script setup lang="ts">
+import { propsToAttrStr } from '../../../_demo/utils';
+import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types';
+
+const _schema = {
+  count: {
+    type: 'number',
+    default: 5,
+    min: 1,
+  },
+  size: {
+    type: 'list',
+    list: ['medium', 'large'],
+    default: 'large',
+  },
+  color: {
+    type: 'list',
+    list: ['normal', 'primary', 'success', 'warning', 'danger'],
+  },
+  allowHalf: {
+    type: 'boolean',
+    default: false,
+  },
+  clearable: {
+    type: 'boolean',
+    default: false,
+  },
+  readonly: {
+    type: 'boolean',
+    default: false,
+  },
+} satisfies Record<string, DocDemoSchema>;
+
+const _template: DocDemoTemplate<typeof _schema> = (props) => `
+<ORate ${propsToAttrStr(props)} :default-value="1"></ORate>
+`;
+
+const _ctx = {};
+</script>
diff --git a/packages/opendesign/src/rate/__docs__/__case__/ThemeRate.vue b/packages/opendesign/src/rate/__docs__/__case__/ThemeRate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f152033bd3a2894a46a6185b68f81ba1b931faa1
--- /dev/null
+++ b/packages/opendesign/src/rate/__docs__/__case__/ThemeRate.vue
@@ -0,0 +1,53 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 鲲鹏、昇腾及欧拉主题规范
+
+可操作星星，使用 `ORate` 组件：
+
+- 尺寸为 `L`：`size` 属性 设置为 `large`
+- 颜色为红色：`color` 属性设置为 `primary`
+
+纯展示星星，使用 `OIconStar` 组件：
+
+- 尺寸为 `M`：类选择器 `c-star-full` 或 `c-star-empty` 中具有该尺寸的样式声明
+- 无评分颜色为灰色：设置类名 `c-star-empty`
+- 有评分颜色为红色：设置类名 `c-star-full`
+
+<!-- en-US -->
+
+### Kunpeng, Ascend, and Openeuler Theme Specifications
+
+For interactive stars, use the `ORate` component:
+
+- Size `L`: Set the `size` prop to `large`
+- Color red: Set the `color` prop to `primary`
+
+For display-only stars, use the `OIconStar` component:
+
+- Size `M`: The class selectors `c-star-full` or `c-star-empty` contain the corresponding style declarations for this size
+- No rating value (gray color): Apply the class name `c-star-empty`
+- With rating value (red color): Apply the class name `c-star-full`
+</docs>
+<script setup lang="ts">
+import { ORate, OIconStar } from '@opensig/opendesign';
+const labels = ['非常不满意', '不满意', ' 一般', '满意', '非常满意'];
+</script>
+<template>
+  <div class="box"><OIconStar class="c-star-full only-show" />4.0</div>
+  <div class="box"><OIconStar class="c-star-empty only-show" />暂无评分</div>
+  <div class="box operator">
+    <ORate :default-value="1" :count="5" color="primary" size="large" />
+  </div>
+  <div class="box operator with-tip">
+    <ORate :default-value="1" :count="5" color="primary" size="large" :labels="labels" />
+  </div>
+</template>
+<style scoped lang="scss">
+.box + .box {
+  margin-top: 12px;
+}
+.only-show {
+  margin-right: 8px;
+}
+</style>
diff --git a/packages/opendesign/src/rate/__docs__/index.en-US.md b/packages/opendesign/src/rate/__docs__/index.en-US.md
new file mode 100644
index 0000000000000000000000000000000000000000..df90df3c418136ab41b43c66afe46b84187784ed
--- /dev/null
+++ b/packages/opendesign/src/rate/__docs__/index.en-US.md
@@ -0,0 +1,32 @@
+---
+sidebar: ORate
+---
+
+# ORate
+
+## Demo
+
+<!-- @usage RateUsage -->
+<!-- @case RateLabel -->
+<!-- @case CustomIcon -->
+<!-- @case CustomIconOutline -->
+
+<!-- @case:a|k|e ThemeRate -->
+
+## API
+
+### CSS Variables
+
+| CSS Variable | Description |
+| --- | --- |
+| \-\-rate-color | Unselected color of the icon |
+| \-\-rate-color-selected | Selected color of the icon |
+| \-\-rate-size | Size of the icon |
+| \-\-rate-gap | Spacing between icons |
+| \-\-rate-popover-color | Color of the tip text |
+| \-\-rate-popover-text-size | Font size of the tip text |
+| \-\-rate-popover-text-height | Line height of the tip text |
+| \-\-rate-popover-radius | Border radius of the popover |
+| \-\-rate-popover-padding | Padding of the popover |
+
+<!-- @api ORate -->
diff --git a/packages/opendesign/src/rate/__docs__/index.zh-CN.md b/packages/opendesign/src/rate/__docs__/index.zh-CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..11b31ffe96e3e652a623bd60454b0cd6beb72721
--- /dev/null
+++ b/packages/opendesign/src/rate/__docs__/index.zh-CN.md
@@ -0,0 +1,32 @@
+---
+sidebar: ORate 评分
+---
+
+# 评分
+
+## 示例
+
+<!-- @usage RateUsage -->
+<!-- @case RateLabel -->
+<!-- @case CustomIcon -->
+<!-- @case CustomIconOutline -->
+
+<!-- @case:a|k|e ThemeRate -->
+
+## API
+
+### CSS 变量
+
+| CSS 变量 | 描述 |
+| --- | --- |
+| \-\-rate-color | 图标未选中颜色 |
+| \-\-rate-color-selected | 图标选中颜色 |
+| \-\-rate-size | 图标大小 |
+| \-\-rate-gap | 图标间距 |
+| \-\-rate-popover-color | 提示文字颜色 |
+| \-\-rate-popover-text-size | 提示文字大小 |
+| \-\-rate-popover-text-height | 提示文字行高 |
+| \-\-rate-popover-radius | 提示框圆角 |
+| \-\-rate-popover-padding | 提示框内边距 |
+
+<!-- @api ORate -->
diff --git a/packages/opendesign/src/rate/style/theme-ascend.scss b/packages/opendesign/src/rate/style/theme-ascend.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..e42665b2f3712dab586bce60f2ea1a4497f2cf99 100644
--- a/packages/opendesign/src/rate/style/theme-ascend.scss
+++ b/packages/opendesign/src/rate/style/theme-ascend.scss
@@ -0,0 +1,53 @@
+.o-rate-primary {
+  --rate-color-selected: rgb(var(--o-red-huawei));
+}
+
+.o-rate-icon-bottom {
+  .o-icon-star {
+    path {
+      color: transparent;
+    }
+    path:nth-child(1) {
+      color: var(--rate-color-selected);
+    }
+  }
+}
+
+.o-rate-item.is-half {
+  .o-rate-icon-top {
+    .o-icon-star {
+      path:nth-child(2) {
+        color: var(--rate-color-selected);
+      }
+    }
+  }
+}
+
+.o-rate-item.is-full {
+  .o-rate-icon-bottom {
+    .o-icon-star {
+      path:nth-child(2) {
+        color: var(--rate-color-selected);
+      }
+
+      path:nth-child(3) {
+        color: var(--rate-color-selected);
+      }
+    }
+  }
+}
+
+.c-star-full.c-star-full {
+  color: rgb(var(--o-red-huawei));
+}
+
+.c-star-empty.c-star-empty {
+  color: var(--o-color-info4);
+}
+
+.c-star-label {
+  color: var(--o-color-info2);
+  font-size: var(--o-font_size-tip1);
+  line-height: var(--o-line_height-tip1);
+  margin-left: 8px;
+}
diff --git a/packages/opendesign/src/rate/style/theme-kunpeng.scss b/packages/opendesign/src/rate/style/theme-kunpeng.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..e42665b2f3712dab586bce60f2ea1a4497f2cf99 100644
--- a/packages/opendesign/src/rate/style/theme-kunpeng.scss
+++ b/packages/opendesign/src/rate/style/theme-kunpeng.scss
@@ -0,0 +1,53 @@
+.o-rate-primary {
+  --rate-color-selected: rgb(var(--o-red-huawei));
+}
+
+.o-rate-icon-bottom {
+  .o-icon-star {
+    path {
+      color: transparent;
+    }
+    path:nth-child(1) {
+      color: var(--rate-color-selected);
+    }
+  }
+}
+
+.o-rate-item.is-half {
+  .o-rate-icon-top {
+    .o-icon-star {
+      path:nth-child(2) {
+        color: var(--rate-color-selected);
+      }
+    }
+  }
+}
+
+.o-rate-item.is-full {
+  .o-rate-icon-bottom {
+    .o-icon-star {
+      path:nth-child(2) {
+        color: var(--rate-color-selected);
+      }
+
+      path:nth-child(3) {
+        color: var(--rate-color-selected);
+      }
+    }
+  }
+}
+
+.c-star-full.c-star-full {
+  color: rgb(var(--o-red-huawei));
+}
+
+.c-star-empty.c-star-empty {
+  color: var(--o-color-info4);
+}
+
+.c-star-label {
+  color: var(--o-color-info2);
+  font-size: var(--o-font_size-tip1);
+  line-height: var(--o-line_height-tip1);
+  margin-left: 8px;
+}
diff --git a/packages/opendesign/src/rate/style/theme-openeuler.scss b/packages/opendesign/src/rate/style/theme-openeuler.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..6ed2a61a8c8e2fb80cdae631696d789385d9f09f 100644
--- a/packages/opendesign/src/rate/style/theme-openeuler.scss
+++ b/packages/opendesign/src/rate/style/theme-openeuler.scss
@@ -0,0 +1,53 @@
+.o-rate-primary {
+  --rate-color-selected: var(--o-color-danger1);
+}
+
+.o-rate-icon-bottom {
+  .o-icon-star {
+    path {
+      color: transparent;
+    }
+    path:nth-child(1) {
+      color: var(--rate-color-selected);
+    }
+  }
+}
+
+.o-rate-item.is-half {
+  .o-rate-icon-top {
+    .o-icon-star {
+      path:nth-child(2) {
+        color: var(--rate-color-selected);
+      }
+    }
+  }
+}
+
+.o-rate-item.is-full {
+  .o-rate-icon-bottom {
+    .o-icon-star {
+      path:nth-child(2) {
+        color: var(--rate-color-selected);
+      }
+
+      path:nth-child(3) {
+        color: var(--rate-color-selected);
+      }
+    }
+  }
+}
+
+.c-star-full.c-star-full {
+  color: var(--o-color-danger1);
+}
+
+.c-star-empty.c-star-empty {
+  color: var(--o-color-info4);
+}
+
+.c-star-label {
+  color: var(--o-color-info2);
+  font-size: var(--o-font_size-tip1);
+  line-height: var(--o-line_height-tip1);
+  margin-left: 8px;
+}
diff --git a/packages/opendesign/src/rate/types.ts b/packages/opendesign/src/rate/types.ts
index eff9265b194d18701373fec36f44763ca815eae0..a669ec61bb28eb341a0a0626fda4bd2b6ff7015e 100644
--- a/packages/opendesign/src/rate/types.ts
+++ b/packages/opendesign/src/rate/types.ts
@@ -9,61 +9,76 @@ export type RateSizeT = (typeof RateSizeTypes)[number];
 
 export const rateProps = {
   /**
-   * 评分数量
+   * @zh-CN 评分总数
+   * @en-US Total number of ratings
+   * @default 5
    */
   count: {
     type: Number,
     default: 5,
   },
   /**
-   * 双向绑定值
+   * @zh-CN 选中数量
+   * @en-US Selected count
    */
   modelValue: {
     type: Number,
   },
   /**
-   * 非受控状态时，默认值
+   * @zh-CN 非受控默认选中值
+   * @en-US Uncontrolled default selected count
+   * @default 0
    */
   defaultValue: {
     type: Number,
     default: 0,
   },
   /**
-   * 尺寸 RateSizeT
+   * @zh-CN 图标尺寸
+   * @en-US Icon size
    */
   size: {
     type: String as PropType<RateSizeT>,
   },
   /**
-   * 颜色类型 ColorT
+   * @zh-CN 图标颜色
+   * @en-US Icon color
+   * @default 'normal'
    */
   color: {
     type: String as PropType<ColorT>,
     default: 'normal',
   },
   /**
-   * 是否只读
+   * @zh-CN 是否只读
+   * @en-US Whether to read-only
+   * @default false
    */
   readonly: {
     type: Boolean,
     default: false,
   },
   /**
-   * 是否支持半选
+   * @zh-CN 是否支持半选
+   * @en-US Whether to support half selection
+   * @default false
    */
   allowHalf: {
     type: Boolean,
     default: false,
   },
   /**
-   * 是否支持可清空
+   * @zh-CN 是否支持可清空
+   * @en-US Whether to support clearable
+   * @default false
    */
   clearable: {
     type: Boolean,
     default: false,
   },
   /**
-   * 文字
+   * @zh-CN 提示文字（数组长度应该等于count）
+   * @en-US Prompt text (The length of the array should equal to count)
    */
   labels: {
     type: Array as PropType<Array<string>>,