stellar-ui-plus 1.24.26 → 1.25.0

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

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

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

@@ -16,7 +16,7 @@ export default {
         default: '',
         validator: (value: string) => {
             return typeof value === 'string' && value.length > 0;
-        }
+        },
     },
     clientSecret: {
         type: String,
@@ -24,7 +24,7 @@ export default {
         default: '',
         validator: (value: string) => {
             return typeof value === 'string' && value.length > 0;
-        }
+        },
     },
     apiUrl: {
         type: String,
@@ -34,37 +34,37 @@ export default {
             try {
                 new URL(value);
                 return true;
-            } catch {
+            } catch (e) {
                 return false;
             }
-        }
+        },
     },
     appType: {
         type: String,
         default: '',
         validator: (value: string) => {
             return typeof value === 'string';
-        }
+        },
     },
     btnText: {
         type: String,
         default: '立即体验',
         validator: (value: string) => {
             return typeof value === 'string' && value.length > 0;
-        }
+        },
     },
     appVersion: {
         type: String,
         default: '',
         validator: (value: string) => {
             return typeof value === 'string';
-        }
+        },
     },
     zIndex: {
         type: [Number, String],
         default: () => 998,
         validator: (value: any) => {
-            return typeof value === 'number' || typeof value === 'string'
-        }
-    }
-} satisfies Record<keyof AppUpdateProps, any>;
+            return typeof value === 'number' || typeof value === 'string';
+        },
+    },
+} satisfies Record<keyof AppUpdateProps, any>;

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-radio/README.md

@@ -249,7 +249,7 @@
 | 参数                | 说明                              | 类型            | 默认值    | 可选值                            | 支持版本  |
 | ------------------- | --------------------------------- | --------------- | --------- | --------------------------------- | --------- |
 | `value`             | 当前选中值（支持v-model双向绑定） | `String`        | ``        | -                                 | -         |
-| `direction`         | 排列方式                          | `String`        | `row`     | `column`：横向 <br/>`row`：纵向   | -         |
+| `direction`         | 排列方式                          | `String`        | `column`  | `row`：横向 <br/>`column`：纵向   | -         |
 | `disabled`          | 是否禁用                          | `Boolean`       | `false`   | -                                 | -         |
 | `readonly`          | 只读 (不置灰)                     | `Boolean`       | `false`   | -                                 | -         |
 | `shape`             | 形状                              | `String`        | `circle`  | `circle`：圆形 <br/>`squar`：方形 | -         |

package/components/ste-radio/ste-radio.vue

@@ -44,6 +44,7 @@ const cmpRootStyle = computed(() => {
         flexDirection: textPosition === 'right' ? 'row' : 'row-reverse',
         marginLeft: utils.formatPx(getDefaultData('marginLeft', '0')),
         marginRight: utils.formatPx(getDefaultData('marginRight', '0')),
+        columnGap: utils.formatPx(getDefaultData('columnGap', '16')),
     };
 
     // #ifdef H5
@@ -62,12 +63,6 @@ const cmpRootStyle = computed(() => {
     return style;
 });
 
-const cmpIconStyle = computed(() => {
-    return {
-        marginRight: utils.formatPx(getDefaultData('columnGap', '16')),
-    } as CSSProperties;
-});
-
 const cmpInputStyle = computed(() => {
     const shape = getDefaultData('shape', 'circle');
     const iconSize = getDefaultData('iconSize', 36);
@@ -162,7 +157,7 @@ const getDefaultData = <T,>(key: PropsKeyType, defaultValue: T): T => {
 
 <template>
     <view class="ste-radio-root" :style="[cmpRootStyle]" @click="click">
-        <view class="icon" :style="[cmpIconStyle]">
+        <view class="icon">
             <slot name="icon" :slotProps="cmpSlotProps">
                 <view class="input-icon" :style="[cmpInputStyle]">
                     <ste-icon v-if="cmpChecked" :size="cmpIconProps.size" code="&#xe67a;" :color="cmpIconProps.color" bold></ste-icon>

package/components/ste-radio-group/ste-radio-group.vue

@@ -28,7 +28,8 @@ function updateValue(value: string) {
 
 <style lang="scss" scoped>
 .ste-radio-group-root {
-    display: grid;
+    display: flex;
+    column-gap: 16rpx;
     row-gap: 16rpx;
 }
 </style>

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
+}