TUI

<template>
  <TsTimeAxis :list="axisListSimple"></TsTimeAxis>
</template>
<script setup lang="ts">
  const axisListSimple = [
    { label: '创建订单', children: [{ label: '打包发货' }, { label: '订单完成' }]},
    { label: '打包发货', children: [] },
    { label: '订单完成', children: [] },
  ];
</script>

<template>
  <div style="width: 390px">
    <TsTimeAxis :list="axisList" placement="center" :pointSize="10" :progressSize="20" pointColor="#fa8c16">
      <template #label="{ item }">
        <div class="self-label">
          <div>{{ item.label }}</div>
          <div>{{ item.time }}</div>
        </div>
      </template>
      <template #children="{ item }">
        <div class="children">
          <div class="children-item" v-for="(childItem, cIndex) in item.children || []" :key="cIndex">
            <div class="label">{{ childItem.label }}</div>
            <div class="children-time">操作时间：{{ childItem.time }}</div>
          </div>
        </div>
      </template>
    </TsTimeAxis>
  </div>
</template>
<script setup lang="ts">
  const axisList = [
    {
      time: '2022-01-01 11:11:12',
      label: '仓库处理',
      desc: '货物打包完成',
      status: 'in-progress',
      children: [
        { time: '2022-01-01 11:11:12', label: '商品打包', desc: '打包完成' },
        { time: '2022-01-01 11:11:12', label: '商品出库', desc: '出库成功' },
      ],
    },
    {
      time: '2022-01-01 11:11:11',
      label: '订单支付',
      desc: '支付成功',
    },
    {
      time: '2022-01-01 11:11:11',
      label: '商品下单',
      desc: '订单创建成功',
    },
  ];
</script>

<template>
  <div style="width: 300px">
    <TsTimeAxis :list="axisCommonList" />
  </div>
</template>
<script setup lang="ts">
  const axisCommonList = [
    { label: '创建订单', status: 'done' },
    { label: '打包发货', status: 'in-progress' },
    { label: '订单完成', status: 'pending' },
  ];
</script>

<template>
  <div style="width: 300px">
    <TsTimeAxis :list="axisCommonList" :pointSize="12" :progressSize="20" pointColor="#52c41a" />
  </div>
</template>
<script setup lang="ts">
  const axisCommonList = [
    { label: '创建订单', status: 'done' },
    { label: '打包发货', status: 'in-progress' },
    { label: '订单完成', status: 'pending' },
  ];
</script>

<template>
  <div style="width: 400px">
    <TsTimeAxis :list="axisList">
      <template #label="{ item }">
        <div class="self-label">
          <div>{{ item.label }}</div>
          <div>{{ item.time }}</div>
        </div>
      </template>
      <template #children="{ item }">
        <div class="children">
          <div class="children-item" v-for="child in item.children || []" :key="child.label" style="border: 1px solid #e5e5e5; padding: 8px; border-radius: 4px; margin-bottom: 8px">
            <div class="label">{{ child.label }}</div>
            <div class="children-time">{{ child.time }}</div>
          </div>
        </div>
      </template>
    </TsTimeAxis>
  </div>
</template>
<script setup lang="ts">
  const axisList = [
    {
      time: '2022-01-01 11:11:12',
      label: '仓库处理',
      desc: '货物打包完成',
      status: 'in-progress',
      children: [
        { time: '2022-01-01 11:11:12', label: '商品打包', desc: '打包完成' },
        { time: '2022-01-01 11:11:12', label: '商品出库', desc: '出库成功' },
      ],
    },
    {
      time: '2022-01-01 11:11:11',
      label: '订单支付',
      desc: '支付成功',
    },
    {
      time: '2022-01-01 11:11:11',
      label: '商品下单',
      desc: '订单创建成功',
    },
  ];
</script>