From 6d0ce3f81baba86f11664fcdfa1d4e47953c2cbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=9C=E5=BE=97=E8=AE=A9=E4=BA=BA=E5=8F=91=E6=AF=9B?=
 <2328204591@qq.com>
Date: Fri, 29 Aug 2025 17:27:37 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(doc):=20=E8=A1=A5=E5=85=85ODropdown?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__docs__/__case__/DropdownAsTheme.vue     | 81 +++++++++++++++++++
 .../__docs__/__case__/DropdownNormal.vue      | 79 ++++++++++++++++++
 .../__docs__/__case__/DropdownPrimary.vue     | 80 ++++++++++++++++++
 .../__docs__/__case__/DropdownText.vue        | 78 ++++++++++++++++++
 .../src/dropdown/__docs__/index.en-US.md      |  6 ++
 .../src/dropdown/__docs__/index.zh-CN.md      |  6 ++
 packages/opendesign/src/dropdown/types.ts     | 49 +++++++----
 7 files changed, 364 insertions(+), 15 deletions(-)
 create mode 100644 packages/opendesign/src/dropdown/__docs__/__case__/DropdownAsTheme.vue
 create mode 100644 packages/opendesign/src/dropdown/__docs__/__case__/DropdownNormal.vue
 create mode 100644 packages/opendesign/src/dropdown/__docs__/__case__/DropdownPrimary.vue
 create mode 100644 packages/opendesign/src/dropdown/__docs__/__case__/DropdownText.vue

diff --git a/packages/opendesign/src/dropdown/__docs__/__case__/DropdownAsTheme.vue b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownAsTheme.vue
new file mode 100644
index 00000000..862dc23b
--- /dev/null
+++ b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownAsTheme.vue
@@ -0,0 +1,81 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 运营按钮
+
+- **配置方式**：为按钮组件添加类名 `c-btn-activity` 或 `c-btn-ascend`（二选一）
+
+<!-- en-US -->
+
+#### Operational Buttons
+
+- **Configuration Method**: Add either the class name `c-btn-activity` or `c-btn-ascend` (choose one) to the button component.
+</docs>
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { ODropdown, ODropdownItem, OButton, OIconChevronDown, type ButtonSizeT, type PopupTriggerT } from '@opensig/opendesign';
+interface ListT {
+  size: ButtonSizeT;
+  btnClass: string;
+  visible: boolean;
+  forbid: boolean;
+  trigger: PopupTriggerT;
+}
+const list = reactive<Array<ListT>>([
+  {
+    size: 'large',
+    btnClass: 'c-btn-activity',
+    visible: false,
+    forbid: false,
+    trigger: 'click',
+  },
+  {
+    size: 'medium',
+    btnClass: 'c-btn-ascend',
+    visible: false,
+    forbid: false,
+    trigger: 'click',
+  },
+  {
+    size: 'medium',
+    btnClass: 'c-btn-activity',
+    visible: false,
+    forbid: true,
+    trigger: 'none',
+  },
+]);
+const options = [
+  { label: '选项一', value: 'opt1' },
+  { label: '选项二', value: 'opt2' },
+  { label: '选项三', value: 'opt3' },
+];
+</script>
+<template>
+  <div class="row">
+    <template v-for="(item, idx) in list" :key="idx">
+      <ODropdown v-model:visible="item.visible" :trigger="item.trigger">
+        <OButton round="pill" :size="item.size" :class="item.btnClass" :disabled="item.forbid">
+          下拉按钮
+          <template #suffix>
+            <OIconChevronDown class="icon" :class="{ active: item.visible }" />
+          </template>
+        </OButton>
+        <template #dropdown>
+          <ODropdownItem v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            {{ item.label }}
+          </ODropdownItem>
+        </template>
+      </ODropdown>
+    </template>
+  </div>
+</template>
+<style scoped lang="scss">
+.icon {
+  transform: rotate(0);
+  transition: all 0.2s linear;
+}
+.active {
+  transform: rotate(180deg);
+  transition: all 0.2s linear;
+}
+</style>
diff --git a/packages/opendesign/src/dropdown/__docs__/__case__/DropdownNormal.vue b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownNormal.vue
new file mode 100644
index 00000000..e5365205
--- /dev/null
+++ b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownNormal.vue
@@ -0,0 +1,79 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 普通按钮
+
+- **配置方式**：需同时传递两个参数
+  `color="primary"`（标识颜色为主题色） + `variant="outline"`（线框样式）
+
+<!-- en-US -->
+
+#### Normal Buttons
+
+- **Configuration Method**: Requires passing two parameters simultaneously:
+  `color="primary"` (indicates the color as the theme color) + `variant="outline"` (outline style).
+</docs>
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { ODropdown, ODropdownItem, OButton, OIconChevronDown, type ButtonSizeT, type PopupTriggerT } from '@opensig/opendesign';
+interface ListT {
+  size: ButtonSizeT;
+  visible: boolean;
+  forbid: boolean;
+  trigger: PopupTriggerT;
+}
+const list = reactive<Array<ListT>>([
+  {
+    size: 'large',
+    visible: false,
+    forbid: false,
+    trigger: 'click',
+  },
+  {
+    size: 'medium',
+    visible: false,
+    forbid: false,
+    trigger: 'click',
+  },
+  {
+    size: 'medium',
+    visible: false,
+    forbid: true,
+    trigger: 'none',
+  },
+]);
+const options = [
+  { label: '选项一', value: 'opt1' },
+  { label: '选项二', value: 'opt2' },
+  { label: '选项三', value: 'opt3' },
+];
+</script>
+<template>
+  <div class="row">
+    <template v-for="(item, idx) in list" :key="idx">
+      <ODropdown v-model:visible="item.visible" :trigger="item.trigger">
+        <OButton round="pill" :size="item.size" :disabled="item.forbid" color="primary" variant="outline">
+          下拉按钮
+          <template #suffix>
+            <OIconChevronDown class="icon" :class="{ active: item.visible }" />
+          </template>
+        </OButton>
+        <template #dropdown>
+          <ODropdownItem v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            {{ item.label }}
+          </ODropdownItem>
+        </template>
+      </ODropdown>
+    </template>
+  </div>
+</template>
+<style scoped lang="scss">
+.icon {
+  transform: rotate(0);
+  transition: all 0.2s linear;
+}
+.active {
+  transform: rotate(180deg);
+  transition: all 0.2s linear;
+}
+</style>
diff --git a/packages/opendesign/src/dropdown/__docs__/__case__/DropdownPrimary.vue b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownPrimary.vue
new file mode 100644
index 00000000..1f1eeb92
--- /dev/null
+++ b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownPrimary.vue
@@ -0,0 +1,80 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 强调按钮
+
+- **配置方式**：需同时传递两个参数
+  `color="primary"`（标识颜色为主题色） + `variant="solid"`（实心样式）
+- **下拉禁用**：需给 `OButton` 传递 `disabled` 属性，并同时给 `ODropdown` 传递 `trigger="none"` 属性
+<!-- en-US -->
+
+#### Primary Buttons (Main Action Buttons)
+
+- **Configuration Method**: Requires passing two parameters simultaneously:
+  `color="primary"` (indicates the color as the theme color) + `variant="solid"` (solid style).
+- **Dropdown disabled**：The 'disabled' attribute needs to be passed to `OButton`, and at the same time, the 'trigger="none"' attribute should be passed to `ODropdown`.
+</docs>
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { ODropdown, ODropdownItem, OButton, OIconChevronDown, type ButtonSizeT, type PopupTriggerT } from '@opensig/opendesign';
+interface ListT {
+  size: ButtonSizeT;
+  visible: boolean;
+  forbid: boolean;
+  trigger: PopupTriggerT;
+}
+const list = reactive<Array<ListT>>([
+  {
+    size: 'large',
+    visible: false,
+    forbid: false,
+    trigger: 'click',
+  },
+  {
+    size: 'medium',
+    visible: false,
+    forbid: false,
+    trigger: 'click',
+  },
+  {
+    size: 'medium',
+    visible: false,
+    forbid: true,
+    trigger: 'none',
+  },
+]);
+const options = [
+  { label: '选项一', value: 'opt1' },
+  { label: '选项二', value: 'opt2' },
+  { label: '选项三', value: 'opt3' },
+];
+</script>
+<template>
+  <div class="row">
+    <template v-for="(item, idx) in list" :key="idx">
+      <ODropdown v-model:visible="item.visible" :trigger="item.trigger">
+        <OButton round="pill" :size="item.size" :disabled="item.forbid" color="primary" variant="solid">
+          下拉按钮
+          <template #suffix>
+            <OIconChevronDown class="icon" :class="{ active: item.visible }" />
+          </template>
+        </OButton>
+        <template #dropdown>
+          <ODropdownItem v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            {{ item.label }}
+          </ODropdownItem>
+        </template>
+      </ODropdown>
+    </template>
+  </div>
+</template>
+<style scoped lang="scss">
+.icon {
+  transform: rotate(0);
+  transition: all 0.2s linear;
+}
+.active {
+  transform: rotate(180deg);
+  transition: all 0.2s linear;
+}
+</style>
diff --git a/packages/opendesign/src/dropdown/__docs__/__case__/DropdownText.vue b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownText.vue
new file mode 100644
index 00000000..dc6001c4
--- /dev/null
+++ b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownText.vue
@@ -0,0 +1,78 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 文本按钮
+
+- **基础组件**：使用 `OLink` 组件实现
+- **下拉禁用**：需给 `OLink` 传递 `disabled` 属性，并同时给 `ODropdown` 传递 `trigger="none"` 属性
+<!-- en-US -->
+
+#### Text Buttons
+
+- **Base Component**: Implemented using the `OLink` component.
+- **Dropdown disabled**：The 'disabled' attribute needs to be passed to `OLink`, and at the same time, the 'trigger="none"' attribute should be passed to `ODropdown`.
+</docs>
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { ODropdown, ODropdownItem, OLink, OIconChevronDown, type ButtonSizeT, type PopupTriggerT } from '@opensig/opendesign';
+interface ListT {
+  size: ButtonSizeT;
+  visible: boolean;
+  forbid: boolean;
+  trigger: PopupTriggerT;
+}
+const list = reactive<Array<ListT>>([
+  {
+    size: 'large',
+    visible: false,
+    forbid: false,
+    trigger: 'click',
+  },
+  {
+    size: 'medium',
+    visible: false,
+    forbid: false,
+    trigger: 'click',
+  },
+  {
+    size: 'medium',
+    visible: false,
+    forbid: true,
+    trigger: 'none',
+  },
+]);
+const options = [
+  { label: '选项一', value: 'opt1' },
+  { label: '选项二', value: 'opt2' },
+  { label: '选项三', value: 'opt3' },
+];
+</script>
+<template>
+  <div class="row">
+    <template v-for="(item, idx) in list" :key="idx">
+      <ODropdown v-model:visible="item.visible" :trigger="item.trigger">
+        <OLink :size="item.size" :disabled="item.forbid" color="normal">
+          下拉按钮
+          <template #suffix>
+            <OIconChevronDown class="icon" :class="{ active: item.visible }" />
+          </template>
+        </OLink>
+        <template #dropdown>
+          <ODropdownItem v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            {{ item.label }}
+          </ODropdownItem>
+        </template>
+      </ODropdown>
+    </template>
+  </div>
+</template>
+<style scoped lang="scss">
+.icon {
+  transform: rotate(0);
+  transition: all 0.2s linear;
+}
+.active {
+  transform: rotate(180deg);
+  transition: all 0.2s linear;
+}
+</style>
diff --git a/packages/opendesign/src/dropdown/__docs__/index.en-US.md b/packages/opendesign/src/dropdown/__docs__/index.en-US.md
index 6bb278f6..21ace16b 100644
--- a/packages/opendesign/src/dropdown/__docs__/index.en-US.md
+++ b/packages/opendesign/src/dropdown/__docs__/index.en-US.md
@@ -8,6 +8,12 @@ sidebar: ODropdown
 
 <!-- @usage DropdownUsage -->
 
+<!-- @case:a DropdownAsTheme -->
+<!-- @case:a|k|e DropdownPrimary -->
+<!-- @case:a|k|e DropdownNormal -->
+<!-- @case:a|k|e DropdownText -->
+
 ## Api
 
 <!-- @api ODropdown -->
+<!-- @api ODropdownItem -->
diff --git a/packages/opendesign/src/dropdown/__docs__/index.zh-CN.md b/packages/opendesign/src/dropdown/__docs__/index.zh-CN.md
index c12f2f1c..87bf2035 100644
--- a/packages/opendesign/src/dropdown/__docs__/index.zh-CN.md
+++ b/packages/opendesign/src/dropdown/__docs__/index.zh-CN.md
@@ -8,6 +8,12 @@ sidebar: ODropdown 下拉
 
 <!-- @usage DropdownUsage -->
 
+<!-- @case:a DropdownAsTheme -->
+<!-- @case:a|k|e DropdownPrimary -->
+<!-- @case:a|k|e DropdownNormal -->
+<!-- @case:a|k|e DropdownText -->
+
 ## Api
 
 <!-- @api ODropdown -->
+<!-- @api ODropdownItem -->
diff --git a/packages/opendesign/src/dropdown/types.ts b/packages/opendesign/src/dropdown/types.ts
index d98d99f3..e745a345 100644
--- a/packages/opendesign/src/dropdown/types.ts
+++ b/packages/opendesign/src/dropdown/types.ts
@@ -4,74 +4,90 @@ import type { SizeT, RoundT } from '../_utils/types';
 
 export const dropdownProps = {
   /**
-   * 弹出框是否可见
+   * @zh-CN 弹出框是否可见
+   * @en-US Is the pop-up box visible
    */
   visible: {
     type: Boolean,
   },
   /**
-   * 非受控模式，弹出框是否默认可见
+   * @zh-CN 非受控模式，弹出框是否默认可见
+   * @en-US In uncontrolled mode, is the pop-up box visible by default
+   * @default false
    */
   defaultVisible: {
     type: Boolean,
     default: false,
   },
   /**
-   * 大小 SizeT
+   * @zh-CN 大小
+   * @en-US Size
    */
   size: {
     type: String as PropType<SizeT>,
   },
   /**
-   * 圆角值 RoundT
+   * @zh-CN 圆角值
+   * @en-US Round
    */
   round: {
     type: String as PropType<RoundT>,
   },
   /**
-   * 下拉选项触发方式 PopupTriggerT
+   * @zh-CN 下拉选项触发方式
+   * @en-US The triggering method of the drop-down option
+   * @default 'click'
    */
   trigger: {
     type: String as PropType<PopupTriggerT>,
     default: 'click',
   },
   /**
-   * 下拉选项位置 PopupPositionT
+   * @zh-CN 下拉选项位置
+   * @en-US Drop-down option position
+   * @default 'bl'
    */
   optionPosition: {
     type: String as PropType<PopupPositionT>,
     default: 'bl',
   },
   /**
-   * 下拉选项宽度自适应规则
-   * 'auto':自动 | 'min-width':最小宽度与选择框一致 | 'width': 宽度与选择框一致
+   * @zh-CN 下拉选项宽度自适应规则 'auto':自动 | 'min-width':最小宽度与选择框一致 | 'width': 宽度与选择框一致
+   * @en-US Drop-down option width adaptation rules: 'auto': automatic; 'min-width': minimum width consistent with the selection box; 'width': width consistent with the selection box
+   * @default 'min-width'
    */
   optionWidthMode: {
     type: String as PropType<'auto' | 'min-width' | 'width'>,
     default: 'min-width',
   },
   /**
-   * 挂载容器，默认为body
+   * @zh-CN 挂载容器，默认为body
+   * @en-US Mount the container, with the default being body
+   * @default 'body'
    */
   optionsWrapper: {
     type: [String, Object] as PropType<string | HTMLElement | null>,
     default: 'body',
   },
   /**
-   * 下拉容器自定义类
+   * @zh-CN 下拉容器自定义类
+   * @en-US Drop-down container custom class
    */
   optionWrapClass: {
     type: [String, Array] as PropType<string | any[]>,
   },
   /**
-   * 是否在结束选择时，卸载下拉选项
+   * @zh-CN 是否在结束选择时，卸载下拉选项
+   * @en-US Whether to uninstall the drop-down options when ending the selection
+   * @default true
    */
   unmountOnHide: {
     type: Boolean,
     default: true,
   },
   /**
-   * 过渡名称
+   * @zh-CN 过渡名称
+   * @en-US Transitional name
    */
   transition: {
     type: String,
@@ -82,21 +98,24 @@ export type DropdownPropsT = ExtractPropTypes<typeof dropdownProps>;
 
 export const dropdownItemProps = {
   /**
-   * 显示文本
+   * @zh-CN 选项显示文本
+   * @en-US The option displays text.
    */
   label: {
     type: String,
     default: '',
   },
   /**
-   * 选项值
+   * @zh-CN 选项选中值
+   * @en-US Selected value of the option
    */
   value: {
     type: [String, Number] as PropType<string | number>,
     default: '',
   },
   /**
-   * 是否禁用
+   * @zh-CN 是否禁用
+   * @en-US Whether to disable
    */
   disabled: {
     type: Boolean,
-- 
Gitee


From 9699d6067721ad6baea7796648e404e9d3510d81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=9C=E5=BE=97=E8=AE=A9=E4=BA=BA=E5=8F=91=E6=AF=9B?=
 <2328204591@qq.com>
Date: Mon, 1 Sep 2025 15:14:55 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(doc):=20=E8=A1=A5=E5=85=85ODropdown?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=87=E6=A1=A3=E7=9A=84=E7=9A=AE=E8=82=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__docs__/__case__/DropdownAsTheme.vue     |  6 ++--
 .../__docs__/__case__/DropdownNormal.vue      |  6 ++--
 .../__docs__/__case__/DropdownPrimary.vue     |  6 ++--
 .../__docs__/__case__/DropdownText.vue        |  4 ++-
 .../opendesign/src/dropdown/style/common.scss | 31 +++++++++++++++++++
 .../src/dropdown/style/theme-ascend.scss      | 15 +++++++++
 .../src/dropdown/style/theme-kunpeng.scss     |  1 +
 .../src/dropdown/style/theme-openeuler.scss   |  1 +
 8 files changed, 60 insertions(+), 10 deletions(-)
 create mode 100644 packages/opendesign/src/dropdown/style/common.scss

diff --git a/packages/opendesign/src/dropdown/__docs__/__case__/DropdownAsTheme.vue b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownAsTheme.vue
index 862dc23b..7202e3a7 100644
--- a/packages/opendesign/src/dropdown/__docs__/__case__/DropdownAsTheme.vue
+++ b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownAsTheme.vue
@@ -3,13 +3,13 @@
 
 #### 运营按钮
 
-- **配置方式**：为按钮组件添加类名 `c-btn-activity` 或 `c-btn-ascend`（二选一）
+- **配置方式**：为按钮组件添加类名 `c-btn-activity` 或 `c-btn-ascend`（二选一），同时为 `ODropdown` 组件添加类名 `o-dropdwon-btn-wrap`
 
 <!-- en-US -->
 
 #### Operational Buttons
 
-- **Configuration Method**: Add either the class name `c-btn-activity` or `c-btn-ascend` (choose one) to the button component.
+- **Configuration Method**: Add the class name 'c-btn-activity' or 'c-btn-ascend' (choose one) to the `OButton` component, and add the class name 'o-dropdwon-btn-wrap' to the `ODropdown` component at the same time.
 </docs>
 <script setup lang="ts">
 import { reactive } from 'vue';
@@ -53,7 +53,7 @@ const options = [
 <template>
   <div class="row">
     <template v-for="(item, idx) in list" :key="idx">
-      <ODropdown v-model:visible="item.visible" :trigger="item.trigger">
+      <ODropdown v-model:visible="item.visible" :trigger="item.trigger" class="o-dropdown-btn-wrap">
         <OButton round="pill" :size="item.size" :class="item.btnClass" :disabled="item.forbid">
           下拉按钮
           <template #suffix>
diff --git a/packages/opendesign/src/dropdown/__docs__/__case__/DropdownNormal.vue b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownNormal.vue
index e5365205..aa28c829 100644
--- a/packages/opendesign/src/dropdown/__docs__/__case__/DropdownNormal.vue
+++ b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownNormal.vue
@@ -4,14 +4,14 @@
 #### 普通按钮
 
 - **配置方式**：需同时传递两个参数
-  `color="primary"`（标识颜色为主题色） + `variant="outline"`（线框样式）
+  `color="primary"`（标识颜色为主题色） + `variant="outline"`（线框样式），同时为 `ODropdown` 组件添加类名 `o-dropdwon-btn-wrap`
 
 <!-- en-US -->
 
 #### Normal Buttons
 
 - **Configuration Method**: Requires passing two parameters simultaneously:
-  `color="primary"` (indicates the color as the theme color) + `variant="outline"` (outline style).
+  `color="primary"` (indicates the color as the theme color) + `variant="outline"` (outline style), add the class name 'o-dropdwon-btn-wrap' to the `ODropdown` component.
 </docs>
 <script setup lang="ts">
 import { reactive } from 'vue';
@@ -51,7 +51,7 @@ const options = [
 <template>
   <div class="row">
     <template v-for="(item, idx) in list" :key="idx">
-      <ODropdown v-model:visible="item.visible" :trigger="item.trigger">
+      <ODropdown v-model:visible="item.visible" :trigger="item.trigger" class="o-dropdown-btn-wrap">
         <OButton round="pill" :size="item.size" :disabled="item.forbid" color="primary" variant="outline">
           下拉按钮
           <template #suffix>
diff --git a/packages/opendesign/src/dropdown/__docs__/__case__/DropdownPrimary.vue b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownPrimary.vue
index 1f1eeb92..09c9e29d 100644
--- a/packages/opendesign/src/dropdown/__docs__/__case__/DropdownPrimary.vue
+++ b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownPrimary.vue
@@ -4,14 +4,14 @@
 #### 强调按钮
 
 - **配置方式**：需同时传递两个参数
-  `color="primary"`（标识颜色为主题色） + `variant="solid"`（实心样式）
+  `color="primary"`（标识颜色为主题色） + `variant="solid"`（实心样式），同时为 `ODropdown` 组件添加类名 `o-dropdwon-btn-wrap`
 - **下拉禁用**：需给 `OButton` 传递 `disabled` 属性，并同时给 `ODropdown` 传递 `trigger="none"` 属性
 <!-- en-US -->
 
 #### Primary Buttons (Main Action Buttons)
 
 - **Configuration Method**: Requires passing two parameters simultaneously:
-  `color="primary"` (indicates the color as the theme color) + `variant="solid"` (solid style).
+  `color="primary"` (indicates the color as the theme color) + `variant="solid"` (solid style), add the class name 'o-dropdwon-btn-wrap' to the `ODropdown` component.
 - **Dropdown disabled**：The 'disabled' attribute needs to be passed to `OButton`, and at the same time, the 'trigger="none"' attribute should be passed to `ODropdown`.
 </docs>
 <script setup lang="ts">
@@ -52,7 +52,7 @@ const options = [
 <template>
   <div class="row">
     <template v-for="(item, idx) in list" :key="idx">
-      <ODropdown v-model:visible="item.visible" :trigger="item.trigger">
+      <ODropdown v-model:visible="item.visible" :trigger="item.trigger" class="o-dropdown-btn-wrap">
         <OButton round="pill" :size="item.size" :disabled="item.forbid" color="primary" variant="solid">
           下拉按钮
           <template #suffix>
diff --git a/packages/opendesign/src/dropdown/__docs__/__case__/DropdownText.vue b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownText.vue
index dc6001c4..df447803 100644
--- a/packages/opendesign/src/dropdown/__docs__/__case__/DropdownText.vue
+++ b/packages/opendesign/src/dropdown/__docs__/__case__/DropdownText.vue
@@ -4,12 +4,14 @@
 #### 文本按钮
 
 - **基础组件**：使用 `OLink` 组件实现
+- **配置方式**：为 `ODropdown` 组件添加类名 `o-dropdwon-link-wrap`
 - **下拉禁用**：需给 `OLink` 传递 `disabled` 属性，并同时给 `ODropdown` 传递 `trigger="none"` 属性
 <!-- en-US -->
 
 #### Text Buttons
 
 - **Base Component**: Implemented using the `OLink` component.
+- **Configuration Method**: Add the class name 'o-dropdwon-link-wrap' to the `ODropdown` component.
 - **Dropdown disabled**：The 'disabled' attribute needs to be passed to `OLink`, and at the same time, the 'trigger="none"' attribute should be passed to `ODropdown`.
 </docs>
 <script setup lang="ts">
@@ -50,7 +52,7 @@ const options = [
 <template>
   <div class="row">
     <template v-for="(item, idx) in list" :key="idx">
-      <ODropdown v-model:visible="item.visible" :trigger="item.trigger">
+      <ODropdown v-model:visible="item.visible" :trigger="item.trigger" class="o-dropdown-link-wrap">
         <OLink :size="item.size" :disabled="item.forbid" color="normal">
           下拉按钮
           <template #suffix>
diff --git a/packages/opendesign/src/dropdown/style/common.scss b/packages/opendesign/src/dropdown/style/common.scss
new file mode 100644
index 00000000..77ecf4b5
--- /dev/null
+++ b/packages/opendesign/src/dropdown/style/common.scss
@@ -0,0 +1,31 @@
+.o-dropdown-btn-wrap {
+  .o-btn-medium {
+    --btn-padding: 0 11px 0 15px;
+  }
+
+  .o-btn-large {
+    --btn-padding: 0 15px 0 23px;
+  }
+
+  .o-btn-round-pill {
+    --btn-gap: 8px;
+  }
+}
+
+.o-dropdown-link-wrap {
+  .o-link {
+    display: flex;
+    align-items: center;
+    --link-gap: 8px;
+  }
+
+  .o-link-large {
+    padding: 0 16px 0 24px;
+    height: var(--o-control_size-l);
+  }
+
+  .o-link-medium {
+    padding: 0 12px 0 16px;
+    height: var(--o-control_size-m);
+  }
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/dropdown/style/theme-ascend.scss b/packages/opendesign/src/dropdown/style/theme-ascend.scss
index e69de29b..48952871 100644
--- a/packages/opendesign/src/dropdown/style/theme-ascend.scss
+++ b/packages/opendesign/src/dropdown/style/theme-ascend.scss
@@ -0,0 +1,15 @@
+@use './common.scss' as *;
+
+.o-dropdown-btn-wrap {
+
+  .c-btn-activity,
+  .c-btn-ascend {
+    &.o-btn-medium {
+      --btn-padding: 0 12px 0 16px;
+    }
+
+    &.o-btn-large {
+      --btn-padding: 0 16px 0 24px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/dropdown/style/theme-kunpeng.scss b/packages/opendesign/src/dropdown/style/theme-kunpeng.scss
index e69de29b..a84bc073 100644
--- a/packages/opendesign/src/dropdown/style/theme-kunpeng.scss
+++ b/packages/opendesign/src/dropdown/style/theme-kunpeng.scss
@@ -0,0 +1 @@
+@use "./common.scss" as *;
\ No newline at end of file
diff --git a/packages/opendesign/src/dropdown/style/theme-openeuler.scss b/packages/opendesign/src/dropdown/style/theme-openeuler.scss
index e69de29b..a84bc073 100644
--- a/packages/opendesign/src/dropdown/style/theme-openeuler.scss
+++ b/packages/opendesign/src/dropdown/style/theme-openeuler.scss
@@ -0,0 +1 @@
+@use "./common.scss" as *;
\ No newline at end of file
-- 
Gitee