🛠 功能组件

面向具体业务场景的功能型组件，位于 src/componentsui/，直接引入使用。

import { TimeLineTurn, CsdnErweimaCard, ZanwuShuju } from '@taibai/vue'

TimeLineTurn 拐弯时间线

飞行/轨迹类"拐弯时间线"组件，用 SVG 绘制带箭头连线和时间节点的轨迹图，适合展示过程节点（起飞、转弯、降落、返航等）。

特点

• SVG 绘制，自带箭头方向指示
• 每个节点展示时间 + 节点名称（加粗）
• 尺寸自适应容器

Props

属性	类型	默认值	说明
svgWidth	number	—	SVG 宽度（默认自适应）
svgHeight	number	—	SVG 高度（默认自适应）

节点数据（time / label）目前为组件内置示例数据，可根据业务需求扩展为 props 传入。

示例

<template>
  <div style="width: 100%; height: 300px">
    <TimeLineTurn />
  </div>
</template>

效果说明

连线为折线带箭头，节点为实心圆点，节点右侧显示时间（14px）和标签（16px 加粗）：

● 2025-07-08 14:20 起飞
  └──→ ● 2025-07-08 14:22 转弯
        └──→ ● 2025-07-08 14:25 发现问题
              └──→ ... 降落 / 返航

CsdnErweimaCard 二维码卡片

营销推广二维码卡片组件，内置"年度回忆录"示例内容，图片自动缩放适配容器，常用于分享页/落地页。

特点

• 固定设计稿尺寸（900 × 560），自动等比缩放适配容器
• 默认不允许放大（ALLOW_SCALE_UP: false），保证小屏不溢出
• 监听窗口 resize 自动重算缩放

Props

属性	类型	默认值	说明
—	—	—	目前无 props，内容为内置示例

示例

<template>
  <div style="width: 100%; height: 400px">
    <CsdnErweimaCard />
  </div>
</template>

组件内部 CONFIG 可配置：ALLOW_SCALE_UP（允许放大）、MAX_SCALE（最大缩放 1.5）、MIN_SCALE（最小缩放 0.5）。

ZanwuShuju 暂无数据

空状态占位组件，居中展示"暂无数据"图片和文字，用于列表/表格无数据时的友好提示。

特点

• 图片 + 文字居中布局，垂直水平都居中
• 全容器填充（h-full w-full）

Props

属性	类型	默认值	说明
—	—	—	无 props

示例

<template>
  <div style="height: 300px">
    <ZanwuShuju v-if="list.length === 0" />
  </div>
</template>

内置图片来自 https://diag.wuzhengai.com/nexusimgs/images/zanwushujutu.png，如内网环境无法访问可替换为本地静态资源。