From a3b9adf424e569dca2e0d53f5323cd9ec483da15 Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Wed, 30 Jul 2025 14:53:40 +0800
Subject: [PATCH] =?UTF-8?q?feat[doc]:=20=E6=96=B0=E5=A2=9Ecollapse?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__docs__/__case__/CollapseAccordion.vue   | 37 +++++++++++++
 .../__docs__/__case__/CollapseControl.vue     | 55 +++++++++++++++++++
 .../__docs__/__case__/CollapseCustom.vue      | 49 +++++++++++++++++
 .../src/collapse/__docs__/index.en-US.md      | 15 +++++
 .../src/collapse/__docs__/index.zh-CN.md      | 15 +++++
 packages/opendesign/src/collapse/types.ts     | 18 ++++--
 6 files changed, 183 insertions(+), 6 deletions(-)
 create mode 100644 packages/opendesign/src/collapse/__docs__/__case__/CollapseAccordion.vue
 create mode 100644 packages/opendesign/src/collapse/__docs__/__case__/CollapseControl.vue
 create mode 100644 packages/opendesign/src/collapse/__docs__/__case__/CollapseCustom.vue
 create mode 100644 packages/opendesign/src/collapse/__docs__/index.en-US.md
 create mode 100644 packages/opendesign/src/collapse/__docs__/index.zh-CN.md

diff --git a/packages/opendesign/src/collapse/__docs__/__case__/CollapseAccordion.vue b/packages/opendesign/src/collapse/__docs__/__case__/CollapseAccordion.vue
new file mode 100644
index 00000000..66bc88ef
--- /dev/null
+++ b/packages/opendesign/src/collapse/__docs__/__case__/CollapseAccordion.vue
@@ -0,0 +1,37 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 手风琴
+
+手风琴模式：`accordion` 设置为 `true` 时，折叠面板只能展开一个面板。
+
+<!-- en-US -->
+
+### Accordion
+
+Accordion mode: When `accordion` is set to `true`, only one panel can be expanded.
+</docs>
+
+<script setup lang="ts">
+import { OCollapse, OCollapseItem } from '@opensig/opendesign';
+</script>
+<template>
+  <OCollapse accordion>
+    <OCollapseItem title="title 1" :value="1">
+      <div class="content1"></div>
+    </OCollapseItem>
+    <OCollapseItem title="title 2" :value="2">
+      <div class="content2"></div>
+    </OCollapseItem>
+  </OCollapse>
+</template>
+<style lang="scss" scoped>
+.content1 {
+  background-color: yellowgreen;
+  height: 150px;
+}
+.content2 {
+  background-color: lightblue;
+  height: 200px;
+}
+</style>
diff --git a/packages/opendesign/src/collapse/__docs__/__case__/CollapseControl.vue b/packages/opendesign/src/collapse/__docs__/__case__/CollapseControl.vue
new file mode 100644
index 00000000..6e0b2378
--- /dev/null
+++ b/packages/opendesign/src/collapse/__docs__/__case__/CollapseControl.vue
@@ -0,0 +1,55 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 受控组件
+
+通过自定义处理 `onUpdate:modelValue` 事件，可以实现比手风琴更加复杂的交互效果，如：有且仅有一个面板打开。
+
+<!-- en-US -->
+
+### Controlled
+
+By customizing the `onUpdate:modelValue` event, you can implement more complex interactions than accordions, such as: There is one and only one panel open.
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OCollapse, OCollapseItem } from '@opensig/opendesign';
+
+const collapseValue = ref<Array<string | number>>([1]);
+const handleUpdate = (val: Array<string | number>) => {
+  for (const item of val) {
+    if (!collapseValue.value.includes(item)) {
+      collapseValue.value = [item];
+      return;
+    }
+  }
+};
+</script>
+<template>
+  <OCollapse :model-value="collapseValue" @update:modelValue="handleUpdate">
+    <OCollapseItem title="title 1" :value="1">
+      <div class="content1"></div>
+    </OCollapseItem>
+    <OCollapseItem title="title 2" :value="2">
+      <div class="content2"></div>
+    </OCollapseItem>
+    <OCollapseItem title="title 3" :value="3">
+      <div class="content3"></div>
+    </OCollapseItem>
+  </OCollapse>
+</template>
+<style lang="scss" scoped>
+.content1 {
+  background-color: yellowgreen;
+  height: 160px;
+}
+.content2 {
+  background-color: lightblue;
+  height: 200px;
+}
+.content3 {
+  background-color: pink;
+  height: 240px;
+}
+</style>
diff --git a/packages/opendesign/src/collapse/__docs__/__case__/CollapseCustom.vue b/packages/opendesign/src/collapse/__docs__/__case__/CollapseCustom.vue
new file mode 100644
index 00000000..ddd4a582
--- /dev/null
+++ b/packages/opendesign/src/collapse/__docs__/__case__/CollapseCustom.vue
@@ -0,0 +1,49 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 自定义标题
+
+通过 `title` 插槽可以自定义标题
+
+<!-- en-US -->
+
+### Custom Title
+
+You can customize the title through the `title` slot
+</docs>
+<script setup lang="ts">
+import { OCollapse, OCollapseItem, OIconFile } from '@opensig/opendesign';
+</script>
+
+<template>
+  <OCollapse accordion>
+    <OCollapseItem :value="1">
+      <template #title>
+        <OIconFile class="icon" />
+        <span>title 1</span>
+      </template>
+      <div class="content1"></div>
+    </OCollapseItem>
+    <OCollapseItem title="title 2" :value="2">
+      <template #title>
+        <OIconFile class="icon" />
+        <span>title 2</span>
+      </template>
+      <div class="content2"></div>
+    </OCollapseItem>
+  </OCollapse>
+</template>
+<style lang="scss" scoped>
+.icon {
+  font-size: var(--o-icon_size-m);
+  margin-right: var(--o-gap-2);
+}
+.content1 {
+  background-color: yellowgreen;
+  height: 150px;
+}
+.content2 {
+  background-color: lightblue;
+  height: 200px;
+}
+</style>
diff --git a/packages/opendesign/src/collapse/__docs__/index.en-US.md b/packages/opendesign/src/collapse/__docs__/index.en-US.md
new file mode 100644
index 00000000..664e9ff8
--- /dev/null
+++ b/packages/opendesign/src/collapse/__docs__/index.en-US.md
@@ -0,0 +1,15 @@
+---
+sidebar: OCollapse
+---
+
+# OCollapse
+## Demo
+
+<!-- @case CollapseAccordion -->
+<!-- @case CollapseControl -->
+<!-- @case CollapseCustom -->
+
+## API
+
+<!-- @api OCollapse -->
+<!-- @api OCollapseItem -->
diff --git a/packages/opendesign/src/collapse/__docs__/index.zh-CN.md b/packages/opendesign/src/collapse/__docs__/index.zh-CN.md
new file mode 100644
index 00000000..89deedc5
--- /dev/null
+++ b/packages/opendesign/src/collapse/__docs__/index.zh-CN.md
@@ -0,0 +1,15 @@
+---
+sidebar: OCollapse 折叠面板
+---
+
+# OCollapse 折叠面板
+## 示例
+
+<!-- @case CollapseAccordion -->
+<!-- @case CollapseControl -->
+<!-- @case CollapseCustom -->
+
+## API
+
+<!-- @api OCollapse -->
+<!-- @api OCollapseItem -->
diff --git a/packages/opendesign/src/collapse/types.ts b/packages/opendesign/src/collapse/types.ts
index 1c0c8631..2c6e78e1 100644
--- a/packages/opendesign/src/collapse/types.ts
+++ b/packages/opendesign/src/collapse/types.ts
@@ -2,7 +2,9 @@ import { ExtractPropTypes, PropType } from 'vue';
 
 export const collapseProps = {
   /**
-   * 是否开启手风琴模式
+   * @zh-CN 是否开启手风琴模式
+   * @en-US Whether to enable accordion mode
+   * @default false
    */
   accordion: {
     type: Boolean,
@@ -10,13 +12,15 @@ export const collapseProps = {
   },
 
   /**
-   * 折叠面板双向绑定值
+   * @zh-CN 展开的面板，双向绑定值
+   * @en-US Expanded panel, two-way binding value
    */
   modelValue: {
     type: Array as PropType<Array<string | number>>,
   },
   /**
-   * 非受控模式时，默认展开的面板值
+   * @zh-CN 非受控模式时，默认展开的面板值
+   * @en-US Default value when not controlled
    */
   defaultValue: {
     type: Array as PropType<Array<string | number>>,
@@ -26,14 +30,16 @@ export const collapseProps = {
 
 export const collapseItemProps = {
   /**
-   * 折叠面板value
+   * @zh-CN 折叠面板value
+   * @en-US Collapse panel value
    */
   value: {
     type: [String, Number],
-    required: true,
+    required: true as const,
   },
   /**
-   * 折叠面板标题
+   * @zh-CN 折叠面板标题
+   * @en-US Collapse panel title
    */
   title: {
     type: String,
-- 
Gitee