update：工作流程跟踪

src/app-register.ts

@@ -139,6 +139,7 @@ import AppCtrlPos from './components/layout-element/structure/app-ctrl-pos/app-c
 import AppPresetButton from './components/layout-element/interactive/app-preset-button/app-preset-button.vue';
 import AppFieldImageDynamic from './components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue';
 import AppTodoList from './components/app-todo-list/app-todo-list.vue';
+import ExtendActionTimeline from './components/extend-action-timeline/extend-action-timeline.vue';
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -293,5 +294,6 @@ export const AppComponents = {
         v.component('app-preset-button',AppPresetButton);
         v.component('app-field-image-dynamic', AppFieldImageDynamic);
         v.component('app-todo-list',AppTodoList);
+        v.component('extend-action-timeline',ExtendActionTimeline);
     },
 };
\ No newline at end of file

src/components/extend-action-timeline/extend-action-timeline.less

+.extend-action-timeline {
+    height: 100%;
+    overflow: scroll;
+}
+
+.extend-action-timeline-table {
+    border-collapse: separate;
+    border-spacing: 0px 40px;
+
+    .extend-action-timeline-thead {
+        th:nth-child(1) {
+            min-width: 200px;
+        }
+
+        th:nth-child(2) {
+            width: 100%;
+        }
+    }
+}
+
+.extend-action-timeline-body__timeline.timeline-head {
+    padding: 8px 16px;
+    height: 45px;
+    line-height: 45px;
+    padding: 0 16px;
+
+    .timeline-wrapper>div {
+        height: 45px;
+        line-height: 45px;
+    }
+
+    .type {
+        padding-left: 16px;
+    }
+}
+
+.extend-action-timeline-body {
+    width: 100%;
+
+    .timeline-content .timeline-wrapper__authorname {
+        color: #57a3fd;
+    }
+
+    .timeline-wrapper__authorname__tooltips {
+        width: 214px;
+        display: flex;
+        flex-wrap: wrap;
+
+        .tooltips-content {
+            width: 30%;
+            margin: 5px 15px;
+        }
+    }
+
+    .timeline-draw {
+        height: auto;
+        background-color: #fafafa;
+        border-bottom: 1px solid #e8eaec;
+        }
+        .timeline-wrapper {
+            height: auto;
+        }
+
+        .timeline-wrapper__timeline-index {
+            width: 60px;
+            height: auto;
+        }
+
+        .timeline-wrapper__usertaskname {
+            width: 100%;
+        }
+
+        .timeline-wrapper__authorname {
+            display: flex;
+            width: 100%;
+            height: auto;
+            flex-wrap: wrap;
+
+            >div {
+                width: 110px;
+            }
+        }
+    }
+
+.extend-action-timeline-body__timeline {
+    position: relative;
+    width: 100%;
+    padding: 0 16px;
+    height: 65px;
+    line-height: 65px;
+    font-size: 14px;
+
+    .timeline-wrapper {
+        display: flex;
+        width: 100%;
+
+        .timeline-wrapper__usertaskname,
+        .timeline-wrapper__authorname,
+        .timeline-wrapper__last-time,
+        .timeline-wrapper__type,
+        .timeline-wrapper__fullmessage {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .timeline-wrapper__tooltip .el-popover__reference {
+            max-width: 500px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        >div {
+            text-align: center;
+            margin: 0 5px;
+        }
+
+        .timeline-wrapper__type {
+            width: 9%;
+            min-width: 180px;
+            text-align: start;
+
+            .dot {
+                width: 8px;
+                height: 8px;
+                display: inline-block;
+                line-height: 100%;
+                margin: 0 10px 0 3px;
+                background-color: #46cf4a;
+                border-radius: 50%;
+            }
+        }
+    }
+
+    .timeline-wrapper__timeline-index {
+        width: 50px;
+        height: 65px;
+        position: relative;
+
+        span {
+            display: inline-block;
+            width: 25px;
+            height: 25px;
+            line-height: 25px;
+            color: #fff;
+            background-color: #57a3fd;
+            border-radius: 50%;
+        }
+
+        .icon-bottom {
+            color: #57a3fd;
+            position: absolute;
+            left: 50%;
+            top: 0;
+            height: 30px;
+            line-height: 0;
+            font-size: 18px;
+            transform: translateX(-50%) translateY(-2px);
+        }
+
+        .icon-top {
+            height: 14px;
+            width: 0;
+            border: 1px solid #57a3fd;
+            border-width: 0 1px 0 0;
+            position: absolute;
+            bottom: -1px;
+            left: 50%;
+            transform: translateX(-0.4px);
+        }
+
+        .icon-line {
+            height: 102%;
+            width: 0;
+            border: 1px solid #57a3fd;
+            border-width: 0 1px 0 0;
+            position: absolute;
+            bottom: -1px;
+            left: 50%;
+            transform: translateX(-0.4px);
+        }
+    }
+
+    .ivu-tooltip {
+        width: 100%;
+    }
+
+    .ivu-tooltip-rel {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .timeline-wrapper__usertaskname {
+        width: 9%;
+        min-width: 160px;
+    }
+
+    .timeline-wrapper__authorname {
+        width: 15%;
+        min-width: 110px;
+    }
+
+    .timeline-wrapper__last-time {
+        width: 15%;
+        min-width: 100px;
+    }
+
+    .timeline-arrow {
+        position: absolute;
+        right: 24px;
+        bottom: 50%;
+        transform: translateY(-50%);
+        float: right;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        font-size: 24px;
+        font-weight: bold;
+        color: #999;
+    }
+}
\ No newline at end of file