Loongship UI

Appearance

Ship Voyage 船舶航程 ​

展示航程港口、时间、剩余时长和进度。

命令行安装 ​

bash
npx @loongship-kit/ui add ship-voyage

基础用法 ​

船舶航程
出发地香港 维多利亚港
剩余时间
48h 36m
目的地KAOHSIUNG, TW
离港时间2026-06-10 17:23:38
预计到达2026-06-12 23:00:00
查看代码
vue
<script setup lang="ts">
import { ShipVoyage } from '@/components/loongship/ship-voyage'

const departTime = new Date(2026, 5, 10, 17, 23, 38).getTime()
const destinationTime = new Date(2026, 5, 12, 23, 0, 0).getTime()
const currentTimestamp = departTime + 5 * 60 * 60 * 1000
</script>

<template>
  <ShipVoyage
    depart-port-name="香港 维多利亚港"
    :depart-time="departTime"
    destination-port-name="KAOHSIUNG, TW"
    :destination-time="destinationTime"
    :current-timestamp="currentTimestamp"
  />
</template>

航程状态 ​

currentTimestamp 适合回放、截图和测试；不传时组件会使用当前时间并按自然分钟刷新。

未出发
出发地香港
剩余时间
54h 36m
目的地高雄
离港时间2026-06-10 17:23:38
预计到达2026-06-12 23:00:00
航行中
出发地香港
剩余时间
48h 36m
目的地高雄
离港时间2026-06-10 17:23:38
预计到达2026-06-12 23:00:00
已抵达
出发地香港
已到达
目的地高雄
离港时间2026-06-10 17:23:38
预计到达2026-06-12 23:00:00
查看代码
vue
<template>
  <div class="vp-demo-showcase-column">
    <ShipVoyage
      title="未出发"
      depart-port-name="香港"
      :depart-time="departTime"
      destination-port-name="高雄"
      :destination-time="destinationTime"
      :current-timestamp="notStartedTimestamp"
    />
    <ShipVoyage
      title="航行中"
      depart-port-name="香港"
      :depart-time="departTime"
      destination-port-name="高雄"
      :destination-time="destinationTime"
      :current-timestamp="currentTimestamp"
    />
    <ShipVoyage
      title="已抵达"
      depart-port-name="香港"
      :depart-time="departTime"
      destination-port-name="高雄"
      :destination-time="destinationTime"
      :current-timestamp="arrivedTimestamp"
    />
  </div>
</template>

自定义剩余文案 ​

船舶航程
出发地香港
剩余时间
剩余约 49 小时
目的地高雄
离港时间2026-06-10 17:23:38
预计到达2026-06-12 23:00:00
查看代码
vue
<script setup lang="ts">
import { ShipVoyage } from '@/components/loongship/ship-voyage'
import type { ShipVoyageStatus } from '@/components/loongship/ship-voyage'

function formatRemainingText(remainingMs: number, status: ShipVoyageStatus) {
  if (status === 'arrived') return '已抵达目的港'
  return `剩余约 ${Math.ceil(remainingMs / 3_600_000)} 小时`
}
</script>

<template>
  <ShipVoyage
    depart-port-name="香港"
    :depart-time="departTime"
    destination-port-name="高雄"
    :destination-time="destinationTime"
    :current-timestamp="currentTimestamp"
    :format-remaining-text="formatRemainingText"
  />
</template>

API ​

属性 ​

属性类型默认值说明
titlestring'船舶航程'空字符串时隐藏
departPortNamestring-出发地，必填
departTimenumber-离港毫秒时间戳，必填
destinationPortNamestring-目的地，必填
destinationTimenumber-预计到达毫秒时间戳，必填
currentTimestampnumberDate.now()固定快照时间；不传时内部刷新
formatRemainingText(remainingMs, status) => string内置格式自定义剩余文案

插槽 ​

无内容插槽。