Loongship UI

Appearance

Ship Detail 船舶详情 ​

按字段配置展示船舶数据，支持排序、布局、格式化和折叠。

命令行安装 ​

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

基础用法 ​

船舶详情
MMSI
636024395
呼号
V7A6391
航速
10.0kn
状态
在航
更新
2026-06-10 16:07:38 (5m前)

最近事件：暂无

查看代码
vue
<script setup lang="ts">
import { ref } from 'vue'
import { ShipDetail, defineShipFields } from '@/components/loongship/ship-detail'

const collapsed = ref(false)
const lastEvent = ref('暂无')
const ship = {
  mmsi: '636024395',
  callSign: 'V7A6391',
  speed: '10.0kn',
  status: '在航',
  updatedAt: '2026-06-10 16:07:38',
  updatedAtRelative: '5m前'
}
const fields = defineShipFields<typeof ship>()([
  { key: 'mmsi', label: 'MMSI', collapsedVisible: true, order: 1 },
  { key: 'callSign', label: '呼号', order: 2 },
  { key: 'speed', label: '航速', collapsedVisible: true, order: 3 },
  { key: 'status', label: '状态', order: 4 },
  {
    key: 'updatedAt',
    label: '更新',
    span: 2,
    collapsedVisible: true,
    order: 5,
    formatter: (_, data) => `${data.updatedAt} (${data.updatedAtRelative})`,
    collapsedFormatter: (_, data) => data.updatedAtRelative
  }
])
</script>

<template>
  <ShipDetail
    v-model:collapsed="collapsed"
    :data="ship"
    :fields="fields"
    @expand="lastEvent = 'expand'"
    @collapse="lastEvent = 'collapse'"
  />
  <p>最近事件：{{ lastEvent }}</p>
</template>

垂直布局和字段插槽 ​

船舶详情
MMSI
636024395
呼号
V7A6391
航速
10.0kn
状态
状态：在航
更新
2026-06-10 16:07:38 (5m前)
查看代码
vue
<template>
  <ShipDetail :data="ship" :fields="fields" layout="vertical" :collapsible="false">
    <template #field-status="{ value }"><strong>状态：{{ value }}</strong></template>
  </ShipDetail>
</template>

自定义折叠内容 ​

船舶详情
MMSI
636024395
呼号
V7A6391
航速
10.0kn
状态
在航
更新
2026-06-10 16:07:38 (5m前)
查看代码
vue
<template>
  <ShipDetail v-model:collapsed="collapsed" :data="ship" :fields="fields">
    <template #collapsed="{ visibleFields, allFields }">
      已折叠：显示 {{ visibleFields.length }} / {{ allFields.length }} 项
    </template>
  </ShipDetail>
</template>

API ​

ShipFieldConfigItem ​

属性类型默认值说明
keykeyof TData & string-对应数据字段，必填
labelstring-字段标签，必填
span1 | 21字段占用列数
formatter(value, data) => string-展开状态的格式化函数
emptyTextstring'-'空值占位文本
collapsedVisibleboolean-显式指定折叠时显示；均未指定时取前 4 项
collapsedFormatter(value, data) => string-折叠状态的格式化函数
ordernumber999显示顺序，数值较小的排在前面

属性 ​

属性类型默认值说明
dataRecord<string, unknown>-船舶数据，必填
fieldsShipFieldConfigItem[]-字段配置，必填
titlestring'船舶详情'空字符串时隐藏
layout'horizontal' | 'vertical''horizontal'字段布局
collapsiblebooleantrue是否允许折叠
v-model:collapsedbooleanfalse折叠状态

事件 ​

事件参数说明
update:collapsedvalue: boolean折叠状态变化，支持双向绑定
expand无用户展开详情后触发
collapse无用户折叠详情后触发

插槽 ​

插槽参数说明
field-{key}{ value, data, field }自定义指定字段的展示内容
collapsed{ data, fields, visibleFields, allFields }完全替换折叠状态下的内容