Timeline 时间线 ​

<template>
  <w-timeline style="max-width: 600px">
    <w-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp"
    >
      {{ activity.content }}
    </w-timeline-item>
  </w-timeline>
</template>

<script lang="ts" setup>
const activities = [
  {
    content: '申请',
    timestamp: '2025-07-15',
  },
  {
    content: '审阅',
    timestamp: '2025-07-13',
  },
  {
    content: '指派',
    timestamp: '2025-07-11',
  },
]
</script>

<template>
  <w-timeline mode="horizontal" class="mt-4">
    <w-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp"
    >
      {{ activity.content }}
    </w-timeline-item>
  </w-timeline>
  <w-timeline mode="horizontal" class="mt-12">
    <w-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      placement="top"
      :timestamp="activity.timestamp"
    >
      {{ activity.content }}
    </w-timeline-item>
  </w-timeline>
  <w-timeline mode="horizontal" class="mt-12">
    <w-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      placement="header"
      :timestamp="activity.timestamp"
    >
      {{ activity.content }}
    </w-timeline-item>
  </w-timeline>
  <w-timeline mode="horizontal" class="mt-12">
    <w-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      content-placement="header"
      :timestamp="activity.timestamp"
    >
      {{ activity.content }}
    </w-timeline-item>
  </w-timeline>
</template>

<script lang="ts" setup>
const activities = [
  {
    content: '申请',
    timestamp: '2025-07-15',
  },
  {
    content: '审阅',
    timestamp: '2025-07-13',
  },
  {
    content: '指派',
    timestamp: '2025-07-11',
  },
]
</script>

<template>
  <w-timeline style="max-width: 600px">
    <w-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :icon="activity.icon"
      :type="activity.type"
      :color="activity.color"
      :size="activity.size"
      :hollow="activity.hollow"
      :timestamp="activity.timestamp"
    >
      {{ activity.content }}
    </w-timeline-item>
  </w-timeline>
</template>

<script lang="ts" setup>
import { OthersFilled } from '@win-design-next/icons-vue'
import type { TimelineItemProps } from 'win-design-next'

interface ActivityType extends Partial<TimelineItemProps> {
  content: string
}

const activities: ActivityType[] = [
  {
    content: 'Custom icon',
    timestamp: '2025-07-12 20:46',
    size: 'large',
    type: 'primary',
    icon: OthersFilled,
  },
  {
    content: 'Custom color',
    timestamp: '2025-07-03 20:46',
    color: '#0bbd87',
  },
  {
    content: 'Custom size',
    timestamp: '2025-07-03 20:46',
    size: 'large',
  },
  {
    content: 'Custom hollow',
    timestamp: '2025-07-03 20:46',
    type: 'error',
    hollow: true,
  },
  {
    content: 'Default node',
    timestamp: '2025-07-03 20:46',
  },
]
</script>

<template>
  <w-timeline style="max-width: 600px">
    <w-timeline-item timestamp="2025-07-22 10:42:34" placement="top">
      手术预约成功
      <div class="card-wrapper">
        <span>执行医生: 李力群</span>
        <span>具体时刻: 10:00:56</span>
      </div>
    </w-timeline-item>
    <w-timeline-item timestamp="2025-07-24 10:42:34" placement="top">
      执行手术
      <div class="card-wrapper">
        <span>执行医生: 李力群</span>
        <span>具体时刻: 13:00:08</span>
      </div>
    </w-timeline-item>
    <w-timeline-item timestamp="2025-07-26 10:42:34" placement="top">
      完成手术
      <div class="card-wrapper">
        <span>执行医生: 李力群</span>
        <span>具体时刻: 15:10:23</span>
      </div>
    </w-timeline-item>
  </w-timeline>
</template>

<template>
  <w-timeline style="max-width: 600px">
    <w-timeline-item center timestamp="2025-07-01" placement="top">
      <w-card>
        <h6>标题</h6>
        <p>2025-07-01 20:46</p>
      </w-card>
    </w-timeline-item>
    <w-timeline-item center timestamp="2025-07-01" placement="top">
      <w-card>
        <h6>标题</h6>
        <p>2025-07-01 20:46</p>
      </w-card>
    </w-timeline-item>
    <w-timeline-item center timestamp="2025-07-01" placement="top">
      Event start
    </w-timeline-item>
    <w-timeline-item center timestamp="2025-07-01" placement="top">
      Event end
    </w-timeline-item>
  </w-timeline>
</template>