From a7effca5c61c7fdaf4fe26d7accb986d368ba840 Mon Sep 17 00:00:00 2001
From: jacknan <zhumaonan@aliyun.com>
Date: Thu, 9 Mar 2023 17:30:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(timeline):=20timeline=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=20(#38)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: MNZhu <zhumaonan@aliyun.com>
---
 .../demo/mobile/time-line/different-data.vue  |  82 --------
 .../demo/mobile/time-line/mobileTimeLine.vue  | 185 +++++++++++-------
 example/src/demo/mobile/time-line/steps.vue   | 135 +++++++++++++
 example/src/docs/mobile/time-line/steps.md    |  18 ++
 example/src/nav.config.comp.mobile.json       |   8 +-
 example/src/route.config.comp.mobile.js       |  10 +-
 packages/time-line/src/mobile.vue             | 113 +++++++----
 7 files changed, 349 insertions(+), 202 deletions(-)
 delete mode 100644 example/src/demo/mobile/time-line/different-data.vue
 create mode 100644 example/src/demo/mobile/time-line/steps.vue
 create mode 100644 example/src/docs/mobile/time-line/steps.md

diff --git a/example/src/demo/mobile/time-line/different-data.vue b/example/src/demo/mobile/time-line/different-data.vue
deleted file mode 100644
index 57ed61f66..000000000
--- a/example/src/demo/mobile/time-line/different-data.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <tiny-time-line :data="data" name-field="statusText" time-field="date"></tiny-time-line>
-</template>
-
-<script>
-import { TimeLine } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTimeLine: TimeLine
-  },
-  data() {
-    return {
-      active: 1,
-      data: [
-        {
-          status: 'current',
-          date: '2019-11-12 14:20:15',
-          statusText: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'success',
-          date: '2019-11-12 14:20:15',
-          statusText: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'fail',
-          date: '2019-11-12 14:20:15',
-          statusText: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          date: '2019-11-12 14:20:15',
-          statusText: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          date: '2019-11-12 14:20:15',
-          statusText: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          date: '2019-11-11 00:01:30',
-          statusText: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        }
-      ]
-    }
-  },
-  methods: {
-    click(index, node) {
-      this.active = index
-    }
-  }
-}
-</script>
-
-<style scoped>
-.tiny-mobile-timeline__date-time {
-  padding: 15px 22px 15px 4px !important;
-}
-.tiny-mobile-timeline__content {
-  padding: 15px 16px 14px 22px !important;
-}
-</style>
diff --git a/example/src/demo/mobile/time-line/mobileTimeLine.vue b/example/src/demo/mobile/time-line/mobileTimeLine.vue
index fb285c868..412ebdda9 100644
--- a/example/src/demo/mobile/time-line/mobileTimeLine.vue
+++ b/example/src/demo/mobile/time-line/mobileTimeLine.vue
@@ -1,15 +1,43 @@
 <template>
-  <div class="timeline">
-    <div class="page__hd">
-      <h1 class="page__title">Timeline</h1>
-      <p class="page__desc">时间轴</p>
+  <div>
+    <div class="title">横向步骤条 正向</div>
+    <tiny-time-line :data="data3" type="timeline" :active="timeActive1" @click="timeClick1"></tiny-time-line>
+    <tiny-time-line :data="data4" type="timeline" :active="timeActive1" @click="timeClick1">
+      <template v-slot:bottom>
+        <div class="text-content">
+          <div class="main-text">标题文字</div>
+          <div class="sub-text">辅助信息文字辅助信息文字辅助信息文字辅助信息文字</div>
+        </div>
+      </template>
+    </tiny-time-line>
+    <div class="half-div">
+      <div class="title">竖式步骤条 正向</div>
+      <tiny-time-line :data="data4" type="timeline" vertical :active="timeActive2" @click="timeClick2">
+        <template v-slot:content>
+          <div class="content-view">
+            <div>内容区</div>
+            <div>内容区</div>
+            <div>内容区</div>
+          </div>
+        </template>
+      </tiny-time-line>
+    </div>
+    <div class="half-div">
+      <div class="title">竖式步骤条 反向</div>
+      <tiny-time-line :data="data3" reverse type="timeline" vertical :active="timeActive3" @click="timeClick3">
+        <template v-slot:header="{ item }">
+          <div class="header-content">
+            <div class="name">{{ item.name }}</div>
+            <div class="label">标签</div>
+          </div>
+        </template>
+      </tiny-time-line>
     </div>
-    <tiny-time-line :data="data"></tiny-time-line>
   </div>
 </template>
 
 <script>
-import { TimeLine } from '@opentiny/vue'
+import { TimeLine, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -17,86 +45,91 @@ export default {
   },
   data() {
     return {
-      data: [
-        {
-          status: 'current',
-          time: '2019-11-12 14:20:15',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'success',
-          time: '2019-11-12 14:20:15',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'fail',
-          time: '2019-11-12 14:20:15',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          time: '2019-11-12 14:20:15',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          time: '2019-11-12 14:20:15',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          time: '2019-11-11 00:01:30',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        }
+      timeActive1: 1,
+      timeActive2: 0,
+      timeActive3: 0,
+      data3: [
+        { name: '已下单', state: 'normal', fold: true },
+        { name: '运输中', state: 'success', fold: false, showFoldBtn: true },
+        { name: '已签收', state: 'error' },
+        { name: '已确认收货', state: 'handing' }
+      ],
+      data4: [
+        { name: '已下单', state: 'normal', showFoldBtn: true, fold: false },
+        { name: '运输中', state: 'success', showFoldBtn: true, fold: true },
+        { name: '已签收', state: 'error', showFoldBtn: true, fold: true },
+        { name: '已确认收货', state: 'handing', showFoldBtn: true, fold: true }
       ]
     }
+  },
+  methods: {
+    timeClick1(index, node) {
+      this.timeActive1 = index
+
+      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+    },
+    timeClick2(index) {
+      this.timeActive2 = index
+    },
+    timeClick3(index) {
+      this.timeActive3 = index
+    }
   }
 }
 </script>
 
-<style scoped>
-.timeline {
-  height: calc(100% - 118px);
-  width: 100%;
-  overflow: hidden;
-  overflow-y: auto;
+<style lang="less" scoped>
+.half-div {
+  display: inline-block;
+  width: 49%;
+  margin-top: 60px;
+  margin-bottom: 50px;
+  padding-left: 50px;
 }
-.page__hd {
-  padding: 40px;
+
+.title {
+  font-weight: bold;
+  margin-bottom: 30px;
 }
-.page__title {
-  font-weight: 400;
-  font-size: 21px;
-  text-align: left;
+
+.text-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
-.page__desc {
-  margin-top: 5px;
-  color: #888;
-  font-size: 14px;
-  text-align: left;
+
+.main-text {
+  font-size: 12px;
 }
-.tiny-mobile-timeline__date-time {
-  padding: 15px 22px 15px 4px !important;
+
+.sub-text {
+  font-size: 10px;
+  color: #999;
+  width: 80%;
+  line-height: 16px;
 }
-.tiny-mobile-timeline__content {
-  padding: 15px 16px 14px 22px !important;
+
+.header-content {
+  display: flex;
+  font-size: 12px;
+  align-items: center;
+
+  .name {
+    margin-left: 12px;
+  }
+  .label {
+    background: rgba(102, 135, 255, 0.1);
+    height: 18px;
+    line-height: 18px;
+    width: 28px;
+    margin-left: 8px;
+    text-align: center;
+    padding: 3px;
+    border-radius: 4px;
+  }
+}
+
+.content-view {
+  background: #f6f6f6;
 }
 </style>
diff --git a/example/src/demo/mobile/time-line/steps.vue b/example/src/demo/mobile/time-line/steps.vue
new file mode 100644
index 000000000..522017fc5
--- /dev/null
+++ b/example/src/demo/mobile/time-line/steps.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <div class="title">横向步骤条 正向</div>
+    <tiny-time-line :data="data3" type="timeline" :active="timeActive1" @click="timeClick1"></tiny-time-line>
+    <tiny-time-line :data="data4" type="timeline" :active="timeActive1" @click="timeClick1">
+      <template v-slot:bottom>
+        <div class="text-content">
+          <div class="main-text">标题文字</div>
+          <div class="sub-text">辅助信息文字辅助信息文字辅助信息文字辅助信息文字</div>
+        </div>
+      </template>
+    </tiny-time-line>
+    <div class="half-div">
+      <div class="title">竖式步骤条 正向</div>
+      <tiny-time-line :data="data4" type="timeline" vertical :active="timeActive2" @click="timeClick2">
+        <template v-slot:content>
+          <div class="content-view">
+            <div>内容区</div>
+            <div>内容区</div>
+            <div>内容区</div>
+          </div>
+        </template>
+      </tiny-time-line>
+    </div>
+    <div class="half-div">
+      <div class="title">竖式步骤条 反向</div>
+      <tiny-time-line :data="data3" reverse type="timeline" vertical :active="timeActive3" @click="timeClick3">
+        <template v-slot:header="{ item }">
+          <div class="header-content">
+            <div class="name">{{ item.name }}</div>
+            <div class="label">标签</div>
+          </div>
+        </template>
+      </tiny-time-line>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TimeLine, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLine
+  },
+  data() {
+    return {
+      timeActive1: 1,
+      timeActive2: 0,
+      timeActive3: 0,
+      data3: [
+        { name: '已下单', state: 'normal', fold: true, time: '2019-11-12 14:20:15' },
+        { name: '运输中', state: 'success', fold: false, showFoldBtn: true, time: '2019-11-12 14:20:15' },
+        { name: '已签收', state: 'error', time: '2019-11-12 14:20:15' },
+        { name: '已确认收货', state: 'handing', time: '2019-11-12 14:20:15' }
+      ],
+      data4: [
+        { name: '已下单', state: 'normal', showFoldBtn: true, fold: false },
+        { name: '运输中', state: 'success', showFoldBtn: true, fold: true },
+        { name: '已签收', state: 'error', showFoldBtn: true, fold: true },
+        { name: '已确认收货', state: 'handing', showFoldBtn: true, fold: true }
+      ]
+    }
+  },
+  methods: {
+    timeClick1(index, node) {
+      this.timeActive1 = index
+
+      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+    },
+    timeClick2(index) {
+      this.timeActive2 = index
+    },
+    timeClick3(index) {
+      this.timeActive3 = index
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.half-div {
+  display: inline-block;
+  width: 49%;
+  margin-top: 60px;
+  margin-bottom: 50px;
+  padding-left: 50px;
+}
+
+.title {
+  font-weight: bold;
+  margin-bottom: 30px;
+}
+
+.text-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.main-text {
+  font-size: 12px;
+}
+
+.sub-text {
+  font-size: 10px;
+  color: #999;
+  width: 80%;
+  line-height: 16px;
+}
+
+.header-content {
+  display: flex;
+  font-size: 12px;
+  align-items: center;
+
+  .name {
+    margin-left: 12px;
+  }
+  .label {
+    background: rgba(102, 135, 255, 0.1);
+    height: 18px;
+    line-height: 18px;
+    width: 28px;
+    margin-left: 8px;
+    text-align: center;
+    padding: 3px;
+    border-radius: 4px;
+  }
+}
+
+.content-view {
+  background: #f6f6f6;
+}
+</style>
diff --git a/example/src/docs/mobile/time-line/steps.md b/example/src/docs/mobile/time-line/steps.md
new file mode 100644
index 000000000..17239738a
--- /dev/null
+++ b/example/src/docs/mobile/time-line/steps.md
@@ -0,0 +1,18 @@
+<div class="demo-header">
+<p class="overviewicon">
+  <span class="wapi-ui-time-line wapi-navigation-steps"/>
+</p>
+
+## TimeLine 时间轴
+
+<mobile-uxlink widget-name="TimeLine"></mobile-uxlink>
+
+</div>
+
+### 步骤条样式
+
+<mobile-view link="time-line/steps"></mobile-view>
+
+<br>
+
+<!-- <mobile-attributes link="time-line"></mobile-attributes> -->
diff --git a/example/src/nav.config.comp.mobile.json b/example/src/nav.config.comp.mobile.json
index d2dc6853a..b0e6b9a99 100644
--- a/example/src/nav.config.comp.mobile.json
+++ b/example/src/nav.config.comp.mobile.json
@@ -93,10 +93,6 @@
           "path": "/time-line",
           "name": "TimeLine 时间轴",
           "children": [
-            {
-              "path": "/time-line/different-data",
-              "name": "数据映射"
-            },
             {
               "path": "/time-line/slot",
               "name": "插槽"
@@ -104,6 +100,10 @@
             {
               "path": "/time-line/space",
               "name": "设置高度"
+            },
+            {
+              "path": "/time-line/steps",
+              "name": "步骤条"
             }
           ]
         }
diff --git a/example/src/route.config.comp.mobile.js b/example/src/route.config.comp.mobile.js
index 7cd2ed565..74c9108e5 100644
--- a/example/src/route.config.comp.mobile.js
+++ b/example/src/route.config.comp.mobile.js
@@ -765,16 +765,16 @@ const router = [
     meta: { title: 'mobileTimeLine 时间轴组件 - 插槽', lang: 'zh-CN' },
     component: () => import(/* webpackChunkName: "mobileComp" */ './docs/mobile/time-line/slot.md')
   },
-  {
-    path: 'time-line/different-data',
-    meta: { title: 'mobileTimeLine 时间轴组件 - 数据映射', lang: 'zh-CN' },
-    component: () => import(/* webpackChunkName: "mobileComp" */ './docs/mobile/time-line/different-data.md')
-  },
   {
     path: 'time-line/space',
     meta: { title: 'mobileTimeLine 时间轴组件 - 高度', lang: 'zh-CN' },
     component: () => import(/* webpackChunkName: "mobileComp" */ './docs/mobile/time-line/space.md')
   },
+  {
+    path: 'time-line/steps',
+    meta: { title: 'mobileTimeLine 时间轴组件 - 步骤条', lang: 'zh-CN' },
+    component: () => import(/* webpackChunkName: "mobileComp" */ './docs/mobile/time-line/steps.md')
+  },
   {
     path: 'dropdown-menu',
     meta: { title: 'mobileDropdownMenu 筛选排序组件', lang: 'zh-CN' },
diff --git a/packages/time-line/src/mobile.vue b/packages/time-line/src/mobile.vue
index b035a10f8..f0d1815c2 100644
--- a/packages/time-line/src/mobile.vue
+++ b/packages/time-line/src/mobile.vue
@@ -10,43 +10,67 @@
  *
  -->
 <template>
-  <div :class="['tiny-mobile-timeline']">
-    <div
-      v-for="(node, index) in state.nodes"
-      :key="index"
-      :style="{
-        height: index === state.nodes.length - 1 ? '' : space ? space + 'px' : '88px'
-      }"
-      :class="['tiny-mobile-timeline__item', node.status]"
-    >
-      <ul class="tiny-mobile-timeline__list">
-        <slot name="left" :slot-scope="node">
-          <li class="tiny-mobile-timeline__date-time">
-            <span class="tiny-mobile-timeline__date">{{ getDate(node[timeField]).date }}</span>
-            <span class="tiny-mobile-timeline__time">{{ getDate(node[timeField]).time }}</span>
-          </li>
+  <div :class="['tiny-mobile-steps', { 'is-horizontal': horizontal && !vertical }]">
+    <div v-if="!vertical" class="tiny-mobile-steps-normal">
+      <div
+        v-for="(node, index) in state.nodes"
+        :key="index"
+        :style="{
+          width: horizontal ? 'auto' : space ? space + 'px' : 100 / state.nodes.length + '%'
+        }"
+        :class="['normal', getStatusCls(index)]"
+      >
+        <slot name="top" :slot-scope="node">
+          <div class="date-time">
+            <span class="time">{{ getDate(node[timeField]).date }} {{ getDate(node[timeField]).time }}</span>
+          </div>
         </slot>
-        <li
-          :style="{
-            height: index === state.nodes.length - 1 ? '' : space ? space + 'px' : '88px'
-          }"
-          class="tiny-mobile-timeline__line"
-        >
-          <div class="tiny-mobile-timeline__icon"></div>
-        </li>
-        <slot name="right" :slot-scope="node">
-          <li class="tiny-mobile-timeline__content">
-            <div>
-              <span class="tiny-mobile-timeline__title">{{ node[nameField] }}</span>
-              <span class="tiny-mobile-timeline__cycle">{{ node.cycle }}</span>
+        <div class="icon" @click="handleClick({ index, node })">
+          <span v-if="index >= state.current">{{ showNumber ? index + start : '' }}</span>
+          <span v-else :custom-title="index + start" class="icon-wrap">
+            <icon-yes class="tiny-svg-size fixicon" />
+          </span>
+        </div>
+        <div
+          :class="[
+            'line',
+            {
+              'line-done': index < state.current,
+              'line-end': index === state.nodes.length - 1
+            }
+          ]"
+        ></div>
+        <div class="node-description">
+          <slot name="bottom" v-bind:item="node">
+            <div class="name" v-text="node[nameField]"></div>
+            <div class="status">
+              {{ showStatus ? getStatus(index) : '' }}
             </div>
-            <div>
-              <span class="tiny-mobile-timeline__user">{{ node.personInfo }}</span>
-              <span class="tiny-mobile-timeline__tip">{{ node.overdue }}</span>
+          </slot>
+        </div>
+      </div>
+    </div>
+    <div v-else :class="['tiny-mobile-steps-timeline', { reverse }]">
+      <div v-for="(node, index) in state.nodes" :key="index" class="timeline">
+        <ul>
+          <li>
+            <div class="header">
+              <div v-if="node.time" class="date-time-vertical">
+                <span class="time">{{ getDate(node[timeField]).date }} {{ getDate(node[timeField]).time }}</span>
+              </div>
+              <span :class="['round', `round-${node.state}`]"></span>
+              <slot name="header" v-bind:item="node">
+                <div class="name">{{ node.name }}</div>
+              </slot>
+              <div v-if="node.showFoldBtn" :class="['arrow-btn', node.fold ? 'arrow-btn-fold' : '']" @click="node.fold = !node.fold"></div>
             </div>
+            <div v-if="!node.fold" :class="['content', node.time ? 'content-left-margin' : null]">
+              <slot name="content"> </slot>
+            </div>
+            <div :class="['line', node.time ? 'line-left-margin' : null]"></div>
           </li>
-        </slot>
-      </ul>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -54,10 +78,29 @@
 <script>
 import { renderless, api } from '@opentiny/vue-renderless/time-line/vue'
 import { props, setup } from '@opentiny/vue-common'
-import '@opentiny/vue-theme-mobile/time-line/index.css'
+import { iconYes } from '@opentiny/vue-icon'
+import '@opentiny/vue-theme-mobile/steps/index.css'
 
 export default {
-  props: [...props, 'nameField', 'timeField', 'data', 'space'],
+  emits: ['click'],
+  props: [
+    ...props,
+    'vertical',
+    'horizontal',
+    'showNumber',
+    'nameField',
+    'timeField',
+    'start',
+    'data',
+    'space',
+    'active',
+    'reverse',
+    'showStatus',
+    'showFoldBtn'
+  ],
+  components: {
+    IconYes: iconYes()
+  },
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }