From 9f42b9a8bb7d8b7d90d948ce963a8662ebe0bf1e Mon Sep 17 00:00:00 2001
From: xjc <2324881835@qq.com>
Date: Tue, 26 Jul 2022 14:26:09 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat=EF=BC=9A=20=E5=B0=81=E8=A3=85OCollapse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/.vitepress/src/views/TheDemo.vue  | 12 +++++++++++
 opendesign/collapse/OCollapse.vue     | 31 +++++++++++++++++++++++++++
 opendesign/collapse/OCollapseItem.vue | 13 +++++++++++
 opendesign/collapse/index.ts          | 10 +++++++++
 opendesign/index.ts                   |  3 +++
 5 files changed, 69 insertions(+)
 create mode 100644 opendesign/collapse/OCollapse.vue
 create mode 100644 opendesign/collapse/OCollapseItem.vue
 create mode 100644 opendesign/collapse/index.ts

diff --git a/app/.vitepress/src/views/TheDemo.vue b/app/.vitepress/src/views/TheDemo.vue
index deb84b448..d1cd72c35 100644
--- a/app/.vitepress/src/views/TheDemo.vue
+++ b/app/.vitepress/src/views/TheDemo.vue
@@ -246,6 +246,18 @@ onMounted(() => {
         </div>
       </div>
     </div>
+    <div class="demo-box">
+      <h4>OCollapse</h4>
+      <OCollapse>
+        <OCollapseItem title="title1">
+          <div>
+            Consistent with real life: in line with the process and logic of
+            real life, and comply with languages and habits that the users are
+            used to;
+          </div>
+        </OCollapseItem>
+      </OCollapse>
+    </div>
   </div>
 </template>
 
diff --git a/opendesign/collapse/OCollapse.vue b/opendesign/collapse/OCollapse.vue
new file mode 100644
index 000000000..8b0f430bd
--- /dev/null
+++ b/opendesign/collapse/OCollapse.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue';
+
+const attrs = useAttrs();
+</script>
+
+<template>
+  <ElCollapse class="o-collapse" v-bind="attrs">
+    <slot></slot>
+  </ElCollapse>
+</template>
+
+<style scoped lang="scss">
+.o-collapse {
+  :deep.el-collapse {
+    border-left: 2px solid var(--o-color-brand);
+    .el-collapse-item__header {
+      color: var(--o-color-text2);
+      padding-left: var(--o-spacing-h6);
+      background-color: var(--o-color-bg);
+      font-size: var(--o-font-size-h7);
+      line-height: var(--o-line-height-h7);
+    }
+    .el-collapse-item__content {
+      background-color: var(--o-color-bg2);
+      color: var(--o-color-text2);
+      padding: var(--o-spacing-h8);
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/opendesign/collapse/OCollapseItem.vue b/opendesign/collapse/OCollapseItem.vue
new file mode 100644
index 000000000..266341fe1
--- /dev/null
+++ b/opendesign/collapse/OCollapseItem.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue';
+
+const attrs = useAttrs();
+</script>
+
+<template>
+  <ElCollapseItem class="o-collapse-item" v-bind="attrs">
+    <slot></slot>
+  </ElCollapseItem>
+</template>
+
+<style lang="scss"></style>
diff --git a/opendesign/collapse/index.ts b/opendesign/collapse/index.ts
new file mode 100644
index 000000000..c10f2b117
--- /dev/null
+++ b/opendesign/collapse/index.ts
@@ -0,0 +1,10 @@
+import type { App } from 'vue';
+import Collapse from './OCollapse.vue';
+import CollapseItem from './OCollapseItem.vue';
+Collapse.install = function (app: App) {
+  app.component('OCollapse', Collapse);
+};
+CollapseItem.install = function (app: App) {
+  app.component('OCollapseItem', CollapseItem);
+};
+export { Collapse, CollapseItem };
diff --git a/opendesign/index.ts b/opendesign/index.ts
index 15ebeac85..c67e04508 100644
--- a/opendesign/index.ts
+++ b/opendesign/index.ts
@@ -14,6 +14,7 @@ import { Pagination } from './pagination';
 import { Table, TableColumn } from './table';
 import { Timeline } from './timeline';
 import { Search } from './search';
+import { Collapse, CollapseItem } from './collapse';
 
 const components = [
   Button,
@@ -32,6 +33,8 @@ const components = [
   TabPane,
   Tree,
   Search,
+  Collapse,
+  CollapseItem,
 ];
 export default {
   install(app: App): void {
-- 
Gitee


From 913ddaf4a2503a497d67363b08b03291906c02d0 Mon Sep 17 00:00:00 2001
From: xjc <2324881835@qq.com>
Date: Tue, 26 Jul 2022 15:07:14 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat=EF=BC=9A=20=E5=B0=81=E8=A3=85OCollapse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/.vitepress/src/views/TheDemo.vue  | 20 +++++++++++++++++++-
 opendesign/collapse/OCollapseItem.vue |  3 +++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/.vitepress/src/views/TheDemo.vue b/app/.vitepress/src/views/TheDemo.vue
index d1cd72c35..11740315d 100644
--- a/app/.vitepress/src/views/TheDemo.vue
+++ b/app/.vitepress/src/views/TheDemo.vue
@@ -247,7 +247,7 @@ onMounted(() => {
       </div>
     </div>
     <div class="demo-box">
-      <h4>OCollapse</h4>
+      <h4>OCollapse不带图片</h4>
       <OCollapse>
         <OCollapseItem title="title1">
           <div>
@@ -258,6 +258,24 @@ onMounted(() => {
         </OCollapseItem>
       </OCollapse>
     </div>
+    <div class="demo-box">
+      <h4>OCollapse带图片</h4>
+      <OCollapse>
+        <OCollapseItem>
+          <template #title>
+            <div style="display: flex">
+              <img src="@/assets/svg-icons/icon-time.svg" />
+              <p style="padding: 5px">title2</p>
+            </div>
+          </template>
+          <div>
+            Consistent with real life: in line with the process and logic of
+            real life, and comply with languages and habits that the users are
+            used to;
+          </div>
+        </OCollapseItem>
+      </OCollapse>
+    </div>
   </div>
 </template>
 
diff --git a/opendesign/collapse/OCollapseItem.vue b/opendesign/collapse/OCollapseItem.vue
index 266341fe1..263ccfb9f 100644
--- a/opendesign/collapse/OCollapseItem.vue
+++ b/opendesign/collapse/OCollapseItem.vue
@@ -6,6 +6,9 @@ const attrs = useAttrs();
 
 <template>
   <ElCollapseItem class="o-collapse-item" v-bind="attrs">
+    <template #title>
+      <slot name="title"></slot>
+    </template>
     <slot></slot>
   </ElCollapseItem>
 </template>
-- 
Gitee


From fc17f79520a1c0a7bb7b214e4b2ca64f24e14a96 Mon Sep 17 00:00:00 2001
From: xjc <2324881835@qq.com>
Date: Tue, 26 Jul 2022 14:26:09 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat=EF=BC=9A=20=E5=B0=81=E8=A3=85OCollapse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat： 封装OCollapse
---
 app/.vitepress/src/views/TheDemo.vue  | 30 ++++++++++++++++++++++++++
 opendesign/collapse/OCollapse.vue     | 31 +++++++++++++++++++++++++++
 opendesign/collapse/OCollapseItem.vue | 16 ++++++++++++++
 opendesign/collapse/index.ts          | 10 +++++++++
 opendesign/index.ts                   |  3 +++
 5 files changed, 90 insertions(+)
 create mode 100644 opendesign/collapse/OCollapse.vue
 create mode 100644 opendesign/collapse/OCollapseItem.vue
 create mode 100644 opendesign/collapse/index.ts

diff --git a/app/.vitepress/src/views/TheDemo.vue b/app/.vitepress/src/views/TheDemo.vue
index deb84b448..11740315d 100644
--- a/app/.vitepress/src/views/TheDemo.vue
+++ b/app/.vitepress/src/views/TheDemo.vue
@@ -246,6 +246,36 @@ onMounted(() => {
         </div>
       </div>
     </div>
+    <div class="demo-box">
+      <h4>OCollapse不带图片</h4>
+      <OCollapse>
+        <OCollapseItem title="title1">
+          <div>
+            Consistent with real life: in line with the process and logic of
+            real life, and comply with languages and habits that the users are
+            used to;
+          </div>
+        </OCollapseItem>
+      </OCollapse>
+    </div>
+    <div class="demo-box">
+      <h4>OCollapse带图片</h4>
+      <OCollapse>
+        <OCollapseItem>
+          <template #title>
+            <div style="display: flex">
+              <img src="@/assets/svg-icons/icon-time.svg" />
+              <p style="padding: 5px">title2</p>
+            </div>
+          </template>
+          <div>
+            Consistent with real life: in line with the process and logic of
+            real life, and comply with languages and habits that the users are
+            used to;
+          </div>
+        </OCollapseItem>
+      </OCollapse>
+    </div>
   </div>
 </template>
 
diff --git a/opendesign/collapse/OCollapse.vue b/opendesign/collapse/OCollapse.vue
new file mode 100644
index 000000000..8b0f430bd
--- /dev/null
+++ b/opendesign/collapse/OCollapse.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue';
+
+const attrs = useAttrs();
+</script>
+
+<template>
+  <ElCollapse class="o-collapse" v-bind="attrs">
+    <slot></slot>
+  </ElCollapse>
+</template>
+
+<style scoped lang="scss">
+.o-collapse {
+  :deep.el-collapse {
+    border-left: 2px solid var(--o-color-brand);
+    .el-collapse-item__header {
+      color: var(--o-color-text2);
+      padding-left: var(--o-spacing-h6);
+      background-color: var(--o-color-bg);
+      font-size: var(--o-font-size-h7);
+      line-height: var(--o-line-height-h7);
+    }
+    .el-collapse-item__content {
+      background-color: var(--o-color-bg2);
+      color: var(--o-color-text2);
+      padding: var(--o-spacing-h8);
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/opendesign/collapse/OCollapseItem.vue b/opendesign/collapse/OCollapseItem.vue
new file mode 100644
index 000000000..263ccfb9f
--- /dev/null
+++ b/opendesign/collapse/OCollapseItem.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue';
+
+const attrs = useAttrs();
+</script>
+
+<template>
+  <ElCollapseItem class="o-collapse-item" v-bind="attrs">
+    <template #title>
+      <slot name="title"></slot>
+    </template>
+    <slot></slot>
+  </ElCollapseItem>
+</template>
+
+<style lang="scss"></style>
diff --git a/opendesign/collapse/index.ts b/opendesign/collapse/index.ts
new file mode 100644
index 000000000..c10f2b117
--- /dev/null
+++ b/opendesign/collapse/index.ts
@@ -0,0 +1,10 @@
+import type { App } from 'vue';
+import Collapse from './OCollapse.vue';
+import CollapseItem from './OCollapseItem.vue';
+Collapse.install = function (app: App) {
+  app.component('OCollapse', Collapse);
+};
+CollapseItem.install = function (app: App) {
+  app.component('OCollapseItem', CollapseItem);
+};
+export { Collapse, CollapseItem };
diff --git a/opendesign/index.ts b/opendesign/index.ts
index 15ebeac85..c67e04508 100644
--- a/opendesign/index.ts
+++ b/opendesign/index.ts
@@ -14,6 +14,7 @@ import { Pagination } from './pagination';
 import { Table, TableColumn } from './table';
 import { Timeline } from './timeline';
 import { Search } from './search';
+import { Collapse, CollapseItem } from './collapse';
 
 const components = [
   Button,
@@ -32,6 +33,8 @@ const components = [
   TabPane,
   Tree,
   Search,
+  Collapse,
+  CollapseItem,
 ];
 export default {
   install(app: App): void {
-- 
Gitee


From cfad7116f0619930df600649248af36b00571371 Mon Sep 17 00:00:00 2001
From: xjc <2324881835@qq.com>
Date: Tue, 26 Jul 2022 15:28:15 +0800
Subject: [PATCH 4/4] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96OCollapse?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 opendesign/collapse/OCollapse.vue | 33 ++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/opendesign/collapse/OCollapse.vue b/opendesign/collapse/OCollapse.vue
index 8b0f430bd..34578c911 100644
--- a/opendesign/collapse/OCollapse.vue
+++ b/opendesign/collapse/OCollapse.vue
@@ -10,22 +10,31 @@ const attrs = useAttrs();
   </ElCollapse>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
 .o-collapse {
-  :deep.el-collapse {
-    border-left: 2px solid var(--o-color-brand);
+  --o-collapse-color-bg: var(--o-color-bg);
+  --o-collapse-color-border: var(--o-color-brand);
+  --o-collapse-color-text: var(--o-color-text2);
+  --o-collapse-padding-left: var(--o-spacing-h6);
+  --o-collapse-padding: var(--o-spacing-h8);
+  --o-collapse-font-size: var(--o-font-size-h7);
+  --o-collapse-line-height: var(--o-line-height-h7);
+  --o-collapse-color-bg2: var(--o-color-bg2);
+
+  &.el-collapse {
+    border-left: 2px solid var(--o-collapse-color-border);
     .el-collapse-item__header {
-      color: var(--o-color-text2);
-      padding-left: var(--o-spacing-h6);
-      background-color: var(--o-color-bg);
-      font-size: var(--o-font-size-h7);
-      line-height: var(--o-line-height-h7);
+      color: var(--o-collapse-color-text);
+      padding-left: var(--o-collapse-padding-left);
+      background-color: var(--o-collapse-color-bg);
+      font-size: var(--o-collapse-font-size);
+      line-height: var(--o-collapse-line-height);
     }
     .el-collapse-item__content {
-      background-color: var(--o-color-bg2);
-      color: var(--o-color-text2);
-      padding: var(--o-spacing-h8);
+      background-color: var(--o-collapse-color-bg2);
+      color: var(--o-collapse-color-text);
+      padding: var(--o-collapse-padding);
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
-- 
Gitee