stellar-ui-plus 1.24.25 → 1.24.27

package/components/ste-app-update/method.ts

@@ -88,6 +88,7 @@ export function download(
                                 },
                             });
                         } else {
+                            // 整包升级时，执行到此处更新并未完成，只是弹出了安装提示，无法获悉用户是否安装了更新包，若是在此处清除资源，会导致升级包被删除，后续流程无法继续执行
                             success?.();
                         }
                     },

package/components/ste-app-update/ste-app-update.vue

@@ -33,7 +33,6 @@ const packageFileSize = ref('0');
 const tempFilePath = ref('');
 
 // 资源管理
-let downloadTask: UniApp.DownloadTask | null = null;
 let timeoutTimer: ReturnType<typeof setTimeout> | null = null;
 
 // 跳过版本相关
@@ -90,10 +89,6 @@ const skipVersion = () => {
 
 // 清理函数
 const cleanup = () => {
-    if (downloadTask) {
-        downloadTask.abort();
-        downloadTask = null;
-    }
     if (timeoutTimer) {
         clearTimeout(timeoutTimer);
         timeoutTimer = null;
@@ -244,7 +239,7 @@ const confirm = () => {
     if (data.package_type == 0) {
         if (data.updateFile.includes('.apk')) {
             updateBtn.value = false;
-            downloadTask = downloadMethod(data, {
+            downloadMethod(data, {
                 onProgressUpdate,
                 downloadSuccess: path => (tempFilePath.value = path),
                 error: () => {
@@ -263,7 +258,7 @@ const confirm = () => {
         }
     } else {
         updateBtn.value = false;
-        downloadTask = downloadMethod(data, {
+        downloadMethod(data, {
             onProgressUpdate,
             downloadSuccess: path => (tempFilePath.value = path),
             error: () => {

package/components/ste-dropdown-menu/props.ts

@@ -26,6 +26,7 @@ export default dropDownMenuProps;
 export const dropDownMenuEmits = {
     close: () => true,
     open: () => true,
+    maskClick: () => true,
     change: (value: Array<any>) => Array.isArray(value),
     'item-choose': (item: any) => item,
     'update:modelValue': (value: Array<any>) => Array.isArray(value),

package/components/ste-dropdown-menu/ste-dropdown-menu.vue

@@ -235,6 +235,7 @@ function choose(item: DropdownItem) {
 function handleMaskClick() {
     if (props.isMaskClick) {
         close();
+        emits('maskClick');
     }
 }
 function handleMenuConentClick() {}

package/components/ste-filter-tool/ATTRIBUTES.md

@@ -15,3 +15,4 @@
 | `confirm` | 点击确认按钮时触发 | `values`：当前所有选中的值 | - |
 | `reset` | 点击重置按钮时触发 | - | - |
 | `itemClick` | 点击任意筛选项时触发（实时） | `item`：当前操作的筛选项数据 | - |
+| `maskClose` | 点击蒙层关闭了弹窗后触发 | - | - |

package/components/ste-filter-tool/props.ts

@@ -35,6 +35,7 @@ export const filterToolEmits = {
     // 值变化（实时）
     'update:value': (values: FilterValue[]) => Array.isArray(values),
     itemClick: (item: FilterValue) => item instanceof Object,
+    maskClose: () => true,
 };
 
 export type FilterToolProps = ExtractPropTypes<typeof props>;

package/components/ste-filter-tool/ste-filter-tool.easycom.json

@@ -67,6 +67,12 @@
                     "description": "当前操作的筛选项数据"
                 }
             ]
+        },
+        {
+            "name": "[event]maskClose",
+            "description": "点击蒙层关闭了弹窗后触发",
+            "type": "() => void",
+            "params": []
         }
     ]
 }

package/components/ste-filter-tool/ste-filter-tool.vue

@@ -1,6 +1,6 @@
 <template>
     <view class="ste-filter-tool--root" :style="[rootStyleVar, { '--category-count': categoryData.length }]">
-        <ste-dropdown-menu ref="steDropMenu" class="filter-box-menu" :activeColor="activeColor" dropDownIconColor="#000" v-model:showPopup="showMenu">
+        <ste-dropdown-menu ref="steDropMenu" class="filter-box-menu" :activeColor="activeColor" dropDownIconColor="#000" v-model:showPopup="showMenu" @maskClick="handleMaskClick">
             <template #title>
                 <slot>
                     <view></view>
@@ -146,7 +146,7 @@ const rootStyleVar = computed(() => ({
 }));
 
 // 使用简化的筛选逻辑组合式函数
-const { handleFilterClick, handleCheckboxChange, handleReset, handleConfirm } = useData(props, emits, filtersData);
+const { handleFilterClick, handleCheckboxChange, handleReset, handleConfirm, handleMaskClose } = useData(props, emits, filtersData);
 
 // 工具类实例
 const calculator = new ScrollCalculator(instance, filtersData);
@@ -217,6 +217,10 @@ const toggleExpand = (item: FilterItem) => {
     item.expand = !item.expand;
 };
 
+function handleMaskClick() {
+    handleMaskClose();
+}
+
 // 监听器
 watch(
     () => props.data,

package/components/ste-filter-tool/useData.ts

@@ -138,6 +138,13 @@ export default function useSimpleFilterLogic(props: FilterToolProps, emits: Setu
         emits('confirm', currentValues);
     };
 
+    /**
+     * 点击蒙层关闭了弹窗后触发
+     */
+    const handleMaskClose = () => {
+        emits('maskClose');
+    };
+
     // 监听props.value变化，同步到组件内部状态
     watch(
         () => props.value,
@@ -156,6 +163,7 @@ export default function useSimpleFilterLogic(props: FilterToolProps, emits: Setu
         handleCheckboxChange,
         handleReset,
         handleConfirm,
+        handleMaskClose,
         collectCurrentValues,
         setValuesFromProps,
     };

package/components/ste-select-seat/ATTRIBUTES.md

@@ -0,0 +1,18 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `modelValue` | 已选座位坐标列表（仅包含 row/col） | `SteSelectSeatValue[]` | - | - | - |
+| `rows` | 行数 | `number` | - | - | - |
+| `cols` | 列数 | `number` | - | - | - |
+| `width` | 组件宽度(px) | `number` | `350` | - | - |
+| `height` | 组件高度(px) | `number` | `400` | - | - |
+| `seats` | 座位属性配置（未配置的位置会自动补齐为默认座位） | `SteSelectSeatItem[]` | - | - | - |
+| `seatSize` | 座位尺寸(rpx) | `number` | `40` | - | - |
+| `seatGap` | 座位间距(rpx) | `number` | `8` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `seat-click` | 点击有效座位事件（empty/disabled 不触发） | - | - |
+| `move` | 拖动/缩放事件 | - | - |

package/components/ste-select-seat/README.md

@@ -0,0 +1,280 @@
+# SelectSeat 座位选择
+
+用于电影院、演出、车厢选座等场景的座位选择组件，基于 Canvas 渲染，支持单指拖拽、双指缩放，适合中大规模座位图展示。
+
+---$
+
+## 代码演示
+
+### 基础用法
+
+最简单的用法只需要传入行列数和画布尺寸。
+
+```html
+<template>
+    <ste-select-seat v-model="selected" :rows="5" :cols="8" :width="340" :height="240" />
+</template>
+
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    import type { SteSelectSeatValue } from 'stellar-ui-plus/components/ste-select-seat/types';
+
+    const selected = ref<SteSelectSeatValue[]>([]);
+</script>
+```
+
+### 自定义座位
+
+通过 `seats` 可以覆盖指定坐标的座位属性，常见场景包括：
+
+- `empty: true` 表示该位置留空，不渲染座位
+- `disabled: true` 表示该位置不可选
+- 也可以单独配置某个区域的颜色
+
+```html
+<template>
+    <ste-select-seat v-model="selected" :rows="5" :cols="8" :width="340" :height="240" :seats="customSeats" selectedBgColor="#007aff" />
+</template>
+
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    import type { SteSelectSeatItem, SteSelectSeatValue } from 'stellar-ui-plus/components/ste-select-seat/types';
+
+    const selected = ref<SteSelectSeatValue[]>([]);
+
+    const customSeats: SteSelectSeatItem[] = [
+        { row: 0, col: 2, empty: true },
+        { row: 0, col: 3, empty: true },
+        { row: 1, col: 0, disabled: true },
+        { row: 1, col: 1, disabled: true },
+        { row: 2, col: 4, bgColor: '#fff3e0', borderColor: '#ff9800', selectedBgColor: '#ff9800' },
+        { row: 2, col: 5, bgColor: '#fff3e0', borderColor: '#ff9800', selectedBgColor: '#ff9800' },
+        { row: 4, col: 0, empty: true },
+        { row: 4, col: 7, empty: true },
+    ];
+</script>
+```
+
+### 预选座位
+
+预选本质上就是给 `v-model` 初始值。这里的坐标只表示“已选状态”，不负责定义座位是否禁用、是否留空。
+
+```html
+<template>
+    <ste-select-seat v-model="selected" :rows="5" :cols="8" :width="340" :height="240" />
+</template>
+
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    import type { SteSelectSeatValue } from 'stellar-ui-plus/components/ste-select-seat/types';
+
+    const selected = ref<SteSelectSeatValue[]>([
+        { row: 1, col: 3 },
+        { row: 1, col: 4 },
+        { row: 2, col: 3 },
+        { row: 2, col: 4 },
+    ]);
+</script>
+```
+
+### 重置位置
+
+组件实例暴露了 `reset()`，用于把当前缩放和拖拽视口恢复到初始状态，不会清空已选座位。
+
+```html
+<template>
+    <ste-select-seat ref="seatRef" v-model="selected" :rows="5" :cols="8" :width="340" :height="240" />
+    <button @click="reset">重置位置</button>
+</template>
+
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    import type { SteSelectSeatValue } from 'stellar-ui-plus/components/ste-select-seat/types';
+
+    const seatRef = ref<any>(null);
+    const selected = ref<SteSelectSeatValue[]>([]);
+
+    const reset = () => {
+        seatRef.value?.reset();
+    };
+</script>
+```
+
+### 电影院座位图
+
+复杂场景通常会同时用到以下能力：
+
+- 通过 `seats` 区分已售、优选区、情侣座
+- 通过 `empty` 留出过道、边角空位
+- 通过 `move` 事件同步顶部银幕等浮层位置
+
+```html
+<script lang="ts" setup>
+    import { computed, ref } from 'vue';
+    import type { SteSelectSeatItem, SteSelectSeatMoveEvent, SteSelectSeatValue } from 'stellar-ui-plus/components/ste-select-seat/types';
+
+    type SeatCoord = { row: number; col: number };
+
+    const rows = 12;
+    const cols = 20;
+    const selected = ref<SteSelectSeatValue[]>([
+        { row: 6, col: 7 },
+        { row: 6, col: 8 },
+    ]);
+    const viewport = ref<SteSelectSeatMoveEvent>({
+        translateX: 0,
+        translateY: 0,
+        scale: 1,
+        screenTranslateX: 0,
+    });
+
+    const soldSeatCoords: SeatCoord[] = [
+        { row: 2, col: 3 },
+        { row: 2, col: 4 },
+        { row: 4, col: 6 },
+        { row: 7, col: 14 },
+    ];
+
+    const vipSeatCoords: SeatCoord[] = [
+        { row: 6, col: 6 },
+        { row: 6, col: 7 },
+        { row: 6, col: 8 },
+        { row: 6, col: 11 },
+        { row: 6, col: 12 },
+        { row: 6, col: 13 },
+    ];
+
+    const coupleSeatCoords: SeatCoord[] = [
+        { row: 10, col: 5 },
+        { row: 10, col: 6 },
+        { row: 10, col: 13 },
+        { row: 10, col: 14 },
+    ];
+
+    const toSeatKey = ({ row, col }: SeatCoord) => `${row}-${col}`;
+    const soldSeatSet = new Set(soldSeatCoords.map(toSeatKey));
+    const vipSeatSet = new Set(vipSeatCoords.map(toSeatKey));
+    const coupleSeatSet = new Set(coupleSeatCoords.map(toSeatKey));
+
+    const isAisleCol = (col: number) => col === 9 || col === 10;
+    const isFrontSideGap = (row: number, col: number) => (row === 0 || row === 1) && (col <= 1 || col >= 18);
+    const isBackCornerGap = (row: number, col: number) => row === 11 && (col === 0 || col === 19);
+    const isEmptySeat = (row: number, col: number) => isAisleCol(col) || isFrontSideGap(row, col) || isBackCornerGap(row, col);
+
+    const seats = computed<SteSelectSeatItem[]>(() => {
+        const list: SteSelectSeatItem[] = [];
+
+        for (let row = 0; row < rows; row++) {
+            for (let col = 0; col < cols; col++) {
+                if (isEmptySeat(row, col)) {
+                    list.push({ row, col, empty: true });
+                    continue;
+                }
+
+                const key = `${row}-${col}`;
+
+                if (soldSeatSet.has(key)) {
+                    list.push({ row, col, disabled: true, bgColor: '#cfd4dc', borderColor: '#cfd4dc' });
+                    continue;
+                }
+
+                if (vipSeatSet.has(key)) {
+                    list.push({ row, col, bgColor: '#fff4d6', borderColor: '#ffb400', selectedBgColor: '#ffb400' });
+                    continue;
+                }
+
+                if (coupleSeatSet.has(key)) {
+                    list.push({ row, col, bgColor: '#ffe4ea', borderColor: '#ff7a9d', selectedBgColor: '#ff5c8a' });
+                    continue;
+                }
+            }
+        }
+
+        return list;
+    });
+
+    const onMove = (event: SteSelectSeatMoveEvent) => {
+        viewport.value = event;
+    };
+</script>
+
+<template>
+    <view class="seat-stage">
+        <view class="screen" :style="{ transform: `translateX(${viewport.screenTranslateX}px)` }">银幕中央</view>
+
+        <ste-select-seat
+            v-model="selected"
+            :rows="rows"
+            :cols="cols"
+            :width="340"
+            :height="200"
+            :seat-size="30"
+            :seat-gap="6"
+            :border-radius="8"
+            :seats="seats"
+            selected-bg-color="#2d6cdf"
+            @move="onMove"
+        />
+    </view>
+</template>
+```
+
+---$
+
+## API
+
+<!-- props -->
+
+### 组件方法(Methods)
+
+通过组件实例 `ref` 可调用以下方法：
+
+| 方法名     | 说明                                             | 参数                                                           |
+| ---------- | ------------------------------------------------ | -------------------------------------------------------------- |
+| `setSeat`  | 设置指定座位属性，不直接控制选中状态             | `(row: number, col: number, data: Partial<SteSelectSeatItem>)` |
+| `getSeats` | 获取内部当前全量座位数据，包含自动补齐的普通座位 | -                                                              |
+| `reset`    | 重置当前缩放和拖拽位置，不清空 `modelValue`      | -                                                              |
+
+`setSeat()` 常用于接口返回后，动态更新某个座位的可售状态或颜色。
+
+## 数据说明
+
+### 坐标约定
+
+- 所有 `row`、`col` 均从 `0` 开始计数
+- `row: 0, col: 0` 表示第一行第一列
+- 页面展示给用户时，通常会自行转成 `row + 1`、`col + 1`
+
+### `modelValue` 与 `seats` 的区别
+
+- `modelValue` 只表示当前选中了哪些座位
+- `seats` 只表示这些座位是什么属性
+- 两者职责分离，避免把“选中状态”和“座位配置”混在一起
+
+例如：
+
+- 某个座位是已售：应在 `seats` 中配置 `disabled: true`
+- 某个座位默认选中：应在 `modelValue` 中写入对应坐标
+- 某个位置是过道：应在 `seats` 中配置 `empty: true`
+
+## 注意事项
+
+- `rows` 和 `cols` 必须为大于 `0` 的整数，否则不会正常渲染座位，并输出告警。
+- `seats` 中缺少合法 `row/col`、或坐标超出 `rows/cols` 范围的项会被忽略，并输出告警。
+- `seats` 中如果存在重复坐标，后一个配置会覆盖前一个，并输出告警。
+- `setSeat()` 同样会校验坐标合法性，越界或非法时不会生效。
+- `empty: true` 的位置不会渲染，也不会触发点击。
+- `disabled: true` 的位置会渲染，但不可选、不会切换选中状态。
+- `width`、`height` 决定可视区域大小；如果座位图较大，建议配合拖拽缩放使用。
+- `showRowLabels` 适合影院、车厢等纵向较长的座位图场景，小型座位图可关闭以减少干扰。
+
+## 使用建议
+
+- 普通场景只传 `rows`、`cols`、`v-model` 即可。
+- 有过道、不可售、分区价格时，再补充 `seats`。
+- 如果需要“银幕跟随”“顶部浮层跟随”等效果，监听 `move` 事件即可。
+- 如果业务里存在实时锁座、出票状态刷新，建议用 `setSeat()` 做局部更新，而不是每次重建整张座位图。
+
+---$
+
+{{fuyuwei}}

package/components/ste-select-seat/canvasUtils.ts

@@ -0,0 +1,42 @@
+/**
+ * Canvas 绘制工具函数（纯函数，无外部依赖）
+ */
+
+/**
+ * 绘制圆角矩形路径（不填充/描边，需调用方自行 fill/stroke）
+ */
+export const drawRoundRect = (ctx: any, x: number, y: number, w: number, h: number, r: number) => {
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.arcTo(x + w, y, x + w, y + r, r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+    ctx.lineTo(x + r, y + h);
+    ctx.arcTo(x, y + h, x, y + h - r, r);
+    ctx.lineTo(x, y + r);
+    ctx.arcTo(x, y, x + r, y, r);
+    ctx.closePath();
+};
+
+/**
+ * 在指定中心点绘制勾选标记（stroke）
+ * 视觉上尽量贴近 ste-radio 里的选中 icon，但保持纯 Canvas path，
+ * 避免依赖 iconfont 在各端 Canvas 中的字体加载能力。
+ * @param cx 中心 x
+ * @param cy 中心 y
+ * @param size 座位宽度，用于计算线宽与比例
+ * @param color 线条颜色
+ */
+export const drawCheck = (ctx: any, cx: number, cy: number, size: number, color: string) => {
+    ctx.beginPath();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = Math.max(1.4, size * 0.1);
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    const s = size * 0.34;
+    ctx.moveTo(cx - s * 0.62, cy - s * 0.02);
+    ctx.lineTo(cx - s * 0.14, cy + s * 0.42);
+    ctx.lineTo(cx + s * 0.62, cy - s * 0.36);
+    ctx.stroke();
+};

package/components/ste-select-seat/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "业务组件",
+    "title": "SelectSeat 座位选择",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/select-seat.png"
+}

package/components/ste-select-seat/internals/gridUtils.ts

@@ -0,0 +1,23 @@
+export interface SteSelectSeatGridSize {
+  rows: number
+  cols: number
+}
+
+export const isInteger = (value: unknown): value is number => {
+  return typeof value === 'number' && Number.isInteger(value)
+}
+
+export const isPositiveInteger = (value: unknown): value is number => {
+  return isInteger(value) && value > 0
+}
+
+export const getSafeGridSize = (rows: number, cols: number): SteSelectSeatGridSize => {
+  return {
+    rows: isPositiveInteger(rows) ? rows : 0,
+    cols: isPositiveInteger(cols) ? cols : 0,
+  }
+}
+
+export const isSeatInBounds = (row: number, col: number, rows: number, cols: number) => {
+  return row >= 0 && row < rows && col >= 0 && col < cols
+}

package/components/ste-select-seat/internals/seatLayout.ts

@@ -0,0 +1,169 @@
+export interface SteSelectSeatContentSize {
+  width: number
+  height: number
+}
+
+export interface SteSelectSeatViewport {
+  scale: number
+  translateX: number
+  translateY: number
+}
+
+export interface SteSelectSeatRowLabelItem {
+  row: number
+  top: number
+  rowHeight: number
+  style: {
+    top: string
+    height: string
+    lineHeight: string
+    fontSize: string
+  }
+}
+
+export const INTERNAL_MAX_SCALE = 3
+
+export const getLabelWidth = (showRowLabels: boolean, seatSize: number, seatGap: number) => {
+  return showRowLabels ? seatSize + seatGap : 0
+}
+
+export const getSeatContentSize = (params: {
+  rows: number
+  cols: number
+  seatSize: number
+  seatGap: number
+  labelWidth: number
+}): SteSelectSeatContentSize => {
+  const { rows, cols, seatSize, seatGap, labelWidth } = params
+  if (!rows || !cols) return { width: 0, height: 0 }
+
+  return {
+    width: labelWidth + cols * (seatSize + seatGap) + seatGap,
+    height: rows * (seatSize + seatGap) + seatGap,
+  }
+}
+
+export const getFitScale = (params: {
+  width: number
+  height: number
+  contentWidth: number
+  contentHeight: number
+}) => {
+  const { width, height, contentWidth, contentHeight } = params
+  if (!contentWidth || !contentHeight) return 1
+  return Math.min(1, width / contentWidth, height / contentHeight)
+}
+
+export const clampSeatScale = (scale: number, fitScale: number, maxScale = INTERNAL_MAX_SCALE) => {
+  return Math.min(Math.max(scale, fitScale), maxScale)
+}
+
+export const getSeatTranslateBounds = (params: {
+  scale: number
+  width: number
+  height: number
+  contentWidth: number
+  contentHeight: number
+}) => {
+  const { scale, width, height, contentWidth, contentHeight } = params
+  if (!contentWidth || !contentHeight) {
+    return { minX: 0, maxX: 0, minY: 0, maxY: 0 }
+  }
+
+  const scaledWidth = contentWidth * scale
+  const scaledHeight = contentHeight * scale
+  const centerX = (width / scale - contentWidth) / 2
+  const centerY = (height / scale - contentHeight) / 2
+  const marginX = width * 0.2 / scale
+  const marginY = height * 0.2 / scale
+
+  return {
+    minX: scaledWidth > width ? width / scale - contentWidth - marginX : centerX - marginX,
+    maxX: scaledWidth > width ? marginX : centerX + marginX,
+    minY: scaledHeight > height ? height / scale - contentHeight - marginY : centerY - marginY,
+    maxY: scaledHeight > height ? marginY : centerY + marginY,
+  }
+}
+
+export const getDefaultSeatViewport = (params: {
+  fitScale: number
+  width: number
+  height: number
+  contentWidth: number
+  contentHeight: number
+  maxScale?: number
+}): SteSelectSeatViewport => {
+  const { fitScale, width, height, contentWidth, contentHeight, maxScale = INTERNAL_MAX_SCALE } = params
+  if (!contentWidth || !contentHeight) {
+    return {
+      scale: 1,
+      translateX: 0,
+      translateY: 0,
+    }
+  }
+
+  const scale = clampSeatScale(fitScale, fitScale, maxScale)
+  return {
+    scale,
+    translateX: (width / scale - contentWidth) / 2,
+    translateY: (height / scale - contentHeight) / 2,
+  }
+}
+
+export const getScreenTranslateX = (params: {
+  scale: number
+  translateX: number
+  width: number
+  defaultViewport: SteSelectSeatViewport
+}) => {
+  const { scale, translateX, width, defaultViewport } = params
+  const anchorX = width / (2 * defaultViewport.scale) - defaultViewport.translateX
+  return (anchorX + translateX) * scale - width / 2
+}
+
+export const buildRowLabelItems = (params: {
+  rows: number
+  height: number
+  seatSize: number
+  seatGap: number
+  translateY: number
+  scale: number
+}): SteSelectSeatRowLabelItem[] => {
+  const { rows, height, seatSize, seatGap, translateY, scale } = params
+  const rowHeight = seatSize * scale
+  const fontSize = Math.max(10, Math.min(13, rowHeight * 0.3))
+
+  return Array.from({ length: rows }, (_, row) => {
+    const top = (row * (seatSize + seatGap) + seatGap / 2 + translateY) * scale
+    return {
+      row,
+      top,
+      rowHeight,
+      style: {
+        top: `${top}px`,
+        height: `${rowHeight}px`,
+        lineHeight: `${rowHeight}px`,
+        fontSize: `${fontSize}px`,
+      },
+    }
+  }).filter(item => item.top + rowHeight > 0 && item.top < height)
+}
+
+export const getRowLabelTrackStyle = (items: SteSelectSeatRowLabelItem[], height: number) => {
+  if (!items.length) {
+    return {
+      display: 'none',
+    }
+  }
+
+  const first = items[0]
+  const last = items[items.length - 1]
+  const padding = 8
+  const top = Math.max(0, first.top - padding)
+  const bottom = Math.min(height, last.top + last.rowHeight + padding)
+
+  return {
+    top: `${top}px`,
+    height: `${Math.max(32, bottom - top)}px`,
+  }
+}