From ebf0cd86385e9b1162b6bd3c14b8dd665436f371 Mon Sep 17 00:00:00 2001
From: aolinpk <2755561608@qq.com>
Date: Fri, 31 May 2024 17:29:37 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(ActionTimeline):=20ActionTimeline?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?icon=E4=BD=8D=E7=BD=AE=E7=9A=84=E5=86=85=E5=AE=B9=E6=8F=92?=
 =?UTF-8?q?=E6=A7=BD=EF=BC=8C=E6=9C=AA=E4=BC=A0=E5=85=A5=E6=97=B6=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E4=BD=BF=E7=94=A8=E5=8E=9F=E6=96=B9=E5=BC=8F=EF=BC=8C?=
 =?UTF-8?q?=E5=AF=B9=E7=8E=B0=E6=9C=89=E4=BD=BF=E7=94=A8=E4=B8=8D=E5=BD=B1?=
 =?UTF-8?q?=E5=93=8D=E3=80=82#1846?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../action-timeline/src/action-timeline.tsx   |   9 +-
 .../docs/components/action-timeline/index.md  | 113 ++++++++++++++++++
 2 files changed, 118 insertions(+), 4 deletions(-)

diff --git a/packages/devui-vue/devui/action-timeline/src/action-timeline.tsx b/packages/devui-vue/devui/action-timeline/src/action-timeline.tsx
index 1b00f9d192..e013c8510a 100644
--- a/packages/devui-vue/devui/action-timeline/src/action-timeline.tsx
+++ b/packages/devui-vue/devui/action-timeline/src/action-timeline.tsx
@@ -9,6 +9,7 @@ export default defineComponent({
   props: actionTimelineProps,
   emits: ['actionLoadMore'],
   setup(props: ActionTimelineProps, ctx: SetupContext) {
+    console.log(ctx.slots.content)
     const { layout, data, showTailLine, showStatusBgColor, showStatusLineColor, loadMoreConfig } = toRefs(props);
     const isVertical = computed(() => layout.value === 'vertical');
     const containerClass = computed(() => ({
@@ -48,10 +49,10 @@ export default defineComponent({
         <div class={timelineItemClass(index, parentIndex, actionData, item)}>
           <div class="vertical-list-item-top">
             <div class="vertical-list-item-top-left">
-              <div class={itemIconClass(item, true)}>
+              {ctx.slots.iconContent?.({ option: item }) || <div class={itemIconClass(item, true)}>
                 {!item.icon && <div class="list-empty-icon-dot"></div>}
                 <em class={itemIconClass(item)}></em>
-              </div>
+              </div>}
               <div class="vertical-list-item-top-left-title">{ctx.slots.title?.({ option: item })}</div>
             </div>
             <div class="dp-action-timeline-item-data">{item.createdAt}</div>
@@ -62,10 +63,10 @@ export default defineComponent({
     const renderHorizontalBody = (actionData: ActionData, parentIndex: number) =>
       actionData.actions?.map((item, index) => (
         <div class={timelineItemClass(index, parentIndex, actionData, item)}>
-          <div class={itemIconClass(item, true)}>
+          {ctx.slots.iconContent?.({ option: item }) || <div class={itemIconClass(item, true)}>
             {!item.icon && <div class="list-empty-icon-dot"></div>}
             <em class={itemIconClass(item)}></em>
-          </div>
+          </div>}
           <div class="dp-action-timeline-list-data">{ctx.slots.content?.({ option: item })}</div>
           <div class="dp-action-timeline-item-date">{item.createdAt}</div>
           {!(actionData.actions && data?.value && index === actionData.actions.length - 1 && parentIndex === data?.value?.length - 1) && (
diff --git a/packages/devui-vue/docs/components/action-timeline/index.md b/packages/devui-vue/docs/components/action-timeline/index.md
index 72610019f7..cc344a2452 100644
--- a/packages/devui-vue/docs/components/action-timeline/index.md
+++ b/packages/devui-vue/docs/components/action-timeline/index.md
@@ -180,6 +180,118 @@ export default defineComponent({
 
 :::
 
+### 自定义Icon位置的代码
+
+icon区域想要自定义样式和事件，可以通过iconContent插槽实现。
+
+:::demo
+
+```vue
+<template>
+  <d-action-timeline :data="timeData" :load-more-config="loadMoreConfig" layout="vertical" :show-tail-line="false">
+    <template #title="page">
+      <div>{{ page.option.action }}</div>
+    </template>
+    <template #content="page">
+      <div class="custom-content">{{ page.option.actionContent }}</div>
+    </template>
+    <template #iconContent="page">
+      <d-tooltip position="top" :content="page.option.iconDes">
+        <div class="custom-icon">{{ page.option.icon }}</div>
+      </d-tooltip>
+    </template>
+  </d-action-timeline>
+</template>
+
+<script>
+import { defineComponent, reactive, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const timeData = [
+      {
+        time: '2022-07-01',
+        actions: [
+          {
+            action: '操作信息',
+            actionContent: '操作内容1',
+            createdAt: '2022-07-01T07:30:09.681Z',
+            icon: 'A',
+            iconDes: '该事件发生在2022-07-01 07:30:09，进行了操作内容1的调整',
+          },
+          {
+            action: '操作信息',
+            actionContent: '操作内容2',
+            icon: 'B',
+            createdAt: '2022/07/01 9:38:00',
+            iconDes: '该事件发生在2022/07/01 9:38:00，进行了操作内容2的调整',
+          },
+        ],
+      },
+      {
+        time: '2022-06-30',
+        actions: [
+          {
+            action: '操作信息',
+            actionContent: '操作内容3',
+            createdAt: '2022-06-30 21:39:25',
+            icon: 'C',
+            iconDes: '该事件发生在2022-06-30 21:39:25，进行了操作内容3的调整',
+          },
+          {
+            action: '操作信息',
+            actionContent: '操作内容4',
+            createdAt: 'Fri Jun 30 2022 15:21:54 GMT+0800（中国标准时间）',
+            icon: 'D',
+            iconDes: '该事件发生在Fri Jun 30 2022 15:21:54，进行了操作内容4的调整',
+          },
+          {
+            action: '操作信息',
+            actionContent: '操作内容5',
+            createdAt: 'Fri Jun 30 2022 15:21:54 GMT+0800（中国标准时间）',
+            iconDes: '该事件发生在Fri Jun 30 2022 15:21:54，进行了操作内容5的调整',
+            icon: 'E',
+          },
+        ],
+      },
+    ];
+    const loadMoreConfig = {
+      type: 'button',
+    };
+    return {
+      timeData,
+      loadMoreConfig,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.custom-content {
+  background: #fff;
+  box-shadow: var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-feedback-overlay-shadow, rgba(37, 43, 58, 0.16));
+  border-radius: 4px;
+  margin-left: 32px;
+  margin-top: 12px;
+  padding: 12px 20px;
+}
+.custom-icon {
+  width: 24px;
+  height: 24px;
+  background: #abcdef;
+  border-radius: 50%;
+  line-height: 24px;
+  text-align: center;
+  color: #FFFFFF;
+  position: relative;
+  margin-right: 8px;
+  z-index: 3;
+}
+</style>
+```
+
+:::
+
 ### ActionTimeline 参数
 
 | 参数名                 | 类型                              | 默认值     | 说明                               |
@@ -203,6 +315,7 @@ export default defineComponent({
 | :------ | :----------------------- | :------------------------------------------- |
 | content | `{ option: ActionItem }` | 必选，内容区域插槽                           |
 | title   | `{ option: ActionItem }` | 标题区域插槽，横向布局时可选，纵向布局时必选 |
+| iconContent   | `{ option: ActionItem }` | 可选，图标区域插槽 |
 
 ### 接口定义
 

From d919502b636ee1da178bb0ee83de4dd534244b1f Mon Sep 17 00:00:00 2001
From: aolinpk <2755561608@qq.com>
Date: Fri, 31 May 2024 17:32:07 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(ActionTimeline):=20=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=A4=9A=E4=BD=99=E7=9A=84console=20#1846?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/action-timeline/src/action-timeline.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/devui-vue/devui/action-timeline/src/action-timeline.tsx b/packages/devui-vue/devui/action-timeline/src/action-timeline.tsx
index e013c8510a..c5adaf3918 100644
--- a/packages/devui-vue/devui/action-timeline/src/action-timeline.tsx
+++ b/packages/devui-vue/devui/action-timeline/src/action-timeline.tsx
@@ -9,7 +9,6 @@ export default defineComponent({
   props: actionTimelineProps,
   emits: ['actionLoadMore'],
   setup(props: ActionTimelineProps, ctx: SetupContext) {
-    console.log(ctx.slots.content)
     const { layout, data, showTailLine, showStatusBgColor, showStatusLineColor, loadMoreConfig } = toRefs(props);
     const isVertical = computed(() => layout.value === 'vertical');
     const containerClass = computed(() => ({