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: '挂号成功，分配至呼吸内科 3 号诊室',
    timestamp: '2026-10-12 08:30',
  },
  {
    content: '分诊台完成血压、体温测量',
    timestamp: '2026-10-12 08:52',
  },
  {
    content: '医师接诊，开具血常规检验',
    timestamp: '2026-10-12 09:15',
  },
  {
    content: '检验报告出具，完成取药离院',
    timestamp: '2026-10-12 11:40',
  },
]
</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: '2026-10-12 20:15',
  },
  {
    content: '完成 CT 检查',
    timestamp: '2026-10-12 20:40',
  },
  {
    content: '外科医师接诊',
    timestamp: '2026-10-12 21:05',
  },
  {
    content: '收治入院',
    timestamp: '2026-10-12 21:30',
  },
]
</script>

<template>
  <w-radio-group v-model="mode">
    <w-radio-button value="start">start</w-radio-button>
    <w-radio-button value="alternate">alternate</w-radio-button>
    <w-radio-button value="alternate-reverse">
      alternate-reverse
    </w-radio-button>
    <w-radio-button value="end">end</w-radio-button>
  </w-radio-group>

  <w-timeline class="mt-4" :mode="mode">
    <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>
import { ref } from 'vue'

const activities = [
  {
    content: '门诊提交会诊申请',
    timestamp: '2026-10-08 09:30',
  },
  {
    content: '医务科审核通过',
    timestamp: '2026-10-08 10:15',
  },
  {
    content: '心内科医师接诊会诊',
    timestamp: '2026-10-08 14:00',
  },
  {
    content: '会诊意见已回写病历',
    timestamp: '2026-10-08 15:20',
  },
]

const mode = ref<'start' | 'alternate' | 'alternate-reverse' | 'end'>('start')
</script>

<template>
  <w-switch v-model="reverse" active-text="reverse" />

  <w-timeline class="mt-2" :reverse="reverse">
    <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>
import { ref } from 'vue'

const reverse = ref(true)

const activities = [
  {
    content: '患者入院，完成术前检查',
    timestamp: '2026-10-08',
  },
  {
    content: '行腹腔镜手术，手术顺利',
    timestamp: '2026-10-09',
  },
  {
    content: '术后第一天，生命体征平稳',
    timestamp: '2026-10-10',
  },
  {
    content: '拆线出院，预约复诊',
    timestamp: '2026-10-12',
  },
]
</script>

<template>
  <w-timeline style="max-width: 600px">
    <w-timeline-item center timestamp="2026-10-08" placement="top">
      <w-card>
        <h6>入院登记</h6>
        <p>2026-10-08 09:20 收治呼吸内科 12 床</p>
      </w-card>
    </w-timeline-item>
    <w-timeline-item center timestamp="2026-10-09" placement="top">
      <w-card>
        <h6>术前讨论</h6>
        <p>2026-10-09 15:30 完成术前讨论与签字</p>
      </w-card>
    </w-timeline-item>
    <w-timeline-item center timestamp="2026-10-10" placement="top">
      术后转入病房，生命体征平稳
    </w-timeline-item>
    <w-timeline-item center timestamp="2026-10-12" placement="top">
      达到出院标准，办理出院
    </w-timeline-item>
  </w-timeline>
</template>

<template>
  <w-timeline>
    <w-timeline-item vertical-center timestamp="2025-07-01" placement="top">
      <w-card>
        <h6>会诊记录</h6>
        <p>2025-07-01 20:46</p>
        <p>
          患者入室后取左侧卧位，术者沿胃镜示食管下段黏膜充血糜烂，遂行活检一枚。
        </p>
      </w-card>
    </w-timeline-item>
    <w-timeline-item vertical-center timestamp="2025-07-02" placement="top">
      <w-card>
        <h6>影像报告</h6>
        <p>2025-07-02 09:12</p>
        <p>
          腹部超声示肝胆胰脾未见明显异常，双肾集合系统分离约 8
          mm，建议一月后复查。
        </p>
      </w-card>
    </w-timeline-item>
    <w-timeline-item vertical-center timestamp="2025-07-03" placement="top">
      <w-card>
        <h6>出院随访</h6>
        <p>2025-07-03 15:30</p>
        <p>嘱低脂饮食，规律服药，两周后门诊复诊并携带本次活检病理报告。</p>
      </w-card>
    </w-timeline-item>
  </w-timeline>
</template>

<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: '长期医嘱开始执行（自定义图标）',
    timestamp: '2026-10-12 08:00',
    size: 'large',
    type: 'primary',
    icon: OthersFilled,
  },
  {
    content: '静脉输液已完成（自定义颜色）',
    timestamp: '2026-10-12 09:30',
    color: '#0bbd87',
  },
  {
    content: '皮试观察中（自定义尺寸）',
    timestamp: '2026-10-12 10:10',
    size: 'large',
  },
  {
    content: '医嘱暂停，待医师确认（空心节点）',
    timestamp: '2026-10-12 11:00',
    type: 'error',
    hollow: true,
  },
  {
    content: '默认样式的待执行医嘱',
    timestamp: '2026-10-12 14:00',
  },
]
</script>

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