TUI

<template>
  <div style="width: 390px">
    <TsTimeAxis :list="axisListSimple"></TsTimeAxis>
  </div>
</template>

<script setup lang="ts">
import { TsTimeAxis } from 'tui';
import type { TimeAxisItem } from 'tui/components/time-axis/src/types';

const axisListSimple: TimeAxisItem[] = [
  { 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 #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">
import { TsTimeAxis } from 'tui';
import type { TimeAxisItem } from 'tui/components/time-axis/src/types';

interface MockAxisItem extends TimeAxisItem {
  time: string;
  label: string;
  desc: string;
  status?: 'done' | 'in-progress' | 'pending';
  children?: MockAxisItem[];
}

const axisList: MockAxisItem[] = [
  {
    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>

<style scoped>
.children {
  .children-item {
    display: flex;
    align-items: center;
    margin-top: 12px;
    .label {
      color: #737373;
      font-size: 14px;
      margin-right: 8px;
      white-space: nowrap;
    }
    .children-time {
      margin-left: 12px;
      color: #1e60da;
    }
  }
}
</style>

<template>
  <div style="width: 300px">
    <TsTimeAxis :list="axisCommonList" />
  </div>
</template>

<script setup lang="ts">
import { TsTimeAxis } from 'tui';
import type { TimeAxisItem } from 'tui/components/time-axis/src/types';

const axisCommonList: TimeAxisItem[] = [
  { 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">
import { TsTimeAxis } from 'tui';
import type { TimeAxisItem } from 'tui/components/time-axis/src/types';

const axisCommonList: TimeAxisItem[] = [
  { 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">
import { TsTimeAxis } from 'tui';
import type { TimeAxisItem } from 'tui/components/time-axis/src/types';

interface MockAxisItem extends TimeAxisItem {
  time: string;
  label: string;
  desc: string;
  status?: 'done' | 'in-progress' | 'pending';
  children?: MockAxisItem[];
}

const axisList: MockAxisItem[] = [
  {
    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>
<style scoped>
.self-label {
  display: flex;
  align-items: center;
  column-gap: 12px;
}
.children {
  .children-item {
    display: flex;
    align-items: center;
    margin-top: 12px;
    .label {
      color: #737373;
      font-size: 14px;
      margin-right: 8px;
      white-space: nowrap;
    }
    .children-time {
      margin-left: 12px;
      color: #1e60da;
    }
  }
}
</style>