stellar-ui-plus 1.24.26 → 1.25.0

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

@@ -0,0 +1,37 @@
+import type { PropType } from 'vue'
+import type { SteSelectSeatItem, SteSelectSeatValue } from './types'
+
+export default {
+  // 已选座位 v-model
+  modelValue: { type: Array as PropType<SteSelectSeatValue[]>, default: () => [] },
+  // 行数
+  rows: { type: Number, default: 0 },
+  // 列数
+  cols: { type: Number, default: 0 },
+  // 组件宽度(px)
+  width: { type: Number, default: 350 },
+  // 组件高度(px)
+  height: { type: Number, default: 400 },
+  // 自定义座位数据
+  seats: { type: Array as PropType<SteSelectSeatItem[]>, default: () => [] },
+  // 座位尺寸(rpx)
+  seatSize: { type: Number, default: 40 },
+  // 座位间距(rpx)
+  seatGap: { type: Number, default: 8 },
+  // 座位圆角(rpx)
+  borderRadius: { type: Number, default: 8 },
+  // 边框宽度
+  borderWidth: { type: Number, default: 1 },
+  // 座位背景色
+  bgColor: { type: String, default: '#ffffff' },
+  // 边框颜色
+  borderColor: { type: String, default: '#e5e5e5' },
+  // 选中背景色（默认用主题色）
+  selectedBgColor: { type: String, default: '' },
+  // 选中图标颜色
+  selectedColor: { type: String, default: '#ffffff' },
+  // 禁用背景色
+  disabledBgColor: { type: String, default: '#cccccc' },
+  // 显示行号
+  showRowLabels: { type: Boolean, default: true },
+}

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

@@ -0,0 +1,62 @@
+{
+    "name": "ste-select-seat",
+    "description": "基于 Canvas 的座位选择组件",
+    "example": "<ste-select-seat v-model='selected' :rows='5' :cols='10'></ste-select-seat>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui-plus&menu=%E7%BB%84%E4%BB%B6&active=ste-select-seat",
+    "attributes": [
+        {
+            "name": "modelValue",
+            "description": "已选座位坐标列表（仅包含 row/col）",
+            "type": "SteSelectSeatValue[]"
+        },
+        {
+            "name": "rows",
+            "description": "行数",
+            "type": "number"
+        },
+        {
+            "name": "cols",
+            "description": "列数",
+            "type": "number"
+        },
+        {
+            "name": "width",
+            "description": "组件宽度(px)",
+            "type": "number",
+            "default": "350"
+        },
+        {
+            "name": "height",
+            "description": "组件高度(px)",
+            "type": "number",
+            "default": "400"
+        },
+        {
+            "name": "seats",
+            "description": "座位属性配置（未配置的位置会自动补齐为默认座位）",
+            "type": "SteSelectSeatItem[]"
+        },
+        {
+            "name": "seatSize",
+            "description": "座位尺寸(rpx)",
+            "type": "number",
+            "default": "40"
+        },
+        {
+            "name": "seatGap",
+            "description": "座位间距(rpx)",
+            "type": "number",
+            "default": "8"
+        },
+        {
+            "name": "[event]seat-click",
+            "description": "点击有效座位事件（empty/disabled 不触发）",
+            "type": "(seat: SteSelectSeatItem) => void"
+        },
+        {
+            "name": "[event]move",
+            "description": "拖动/缩放事件",
+            "type": "(data: { translateX, translateY, scale, screenTranslateX }) => void"
+        }
+    ]
+}

package/components/ste-select-seat/ste-select-seat.vue

@@ -0,0 +1,517 @@
+<script setup lang="ts">
+import { watch, nextTick, onMounted, getCurrentInstance, computed, ref } from 'vue';
+import type { ComponentPublicInstance } from 'vue';
+import propsData from './props';
+import { useData } from './useData';
+import { useColorStore } from '../../store/color';
+import utils from '../../utils/utils';
+import TouchScaleing from '../ste-media-preview/TouchScaleing';
+import type { SteSelectSeatItem, SteSelectSeatValue, SteSelectSeatMoveEvent } from './types';
+import { drawRoundRect, drawCheck } from './canvasUtils';
+import { getSafeGridSize } from './internals/gridUtils';
+import {
+    INTERNAL_MAX_SCALE,
+    buildRowLabelItems,
+    clampSeatScale,
+    getDefaultSeatViewport,
+    getFitScale,
+    getLabelWidth,
+    getRowLabelTrackStyle,
+    getScreenTranslateX as getSeatScreenTranslateX,
+    getSeatContentSize,
+    getSeatTranslateBounds,
+} from './internals/seatLayout';
+import { useSeatInteraction } from './internals/useSeatInteraction';
+import { getTouchX, getTouchY } from './useTouchCompat';
+
+const componentName = 'ste-select-seat';
+const { getColor } = useColorStore();
+const themeColor = getColor()?.steThemeColor || '#0090FF';
+
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+
+const instance = getCurrentInstance() as unknown as ComponentPublicInstance;
+const props = defineProps(propsData);
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: SteSelectSeatValue[]): void;
+    (e: 'seat-click', seat: SteSelectSeatItem): void;
+    (e: 'move', data: SteSelectSeatMoveEvent): void;
+}>();
+
+const { getSeat, setSeat, getSeats, isSelected, toggleSeat } = useData(props);
+
+const canvasId = 'ste-select-seat-' + utils.guid(8);
+const touchHandler = new TouchScaleing();
+
+// ─── 手势状态变量 ────────────────────────────────────────────────────────────
+let canvasCtx: any = null;
+let dpr = 1;
+
+// ─── 响应式视口状态 ───────────────────────────────────────────────────────────
+const viewportTranslateY = ref(0);
+const viewportScale = ref(1);
+
+// ─── 尺寸 / 布局计算 ─────────────────────────────────────────────────────────
+const seatSizePx = computed(() => utils.formatPx(props.seatSize, 'num') as number);
+const seatGapPx = computed(() => utils.formatPx(props.seatGap, 'num') as number);
+const borderRadiusPx = computed(() => utils.formatPx(props.borderRadius, 'num') as number);
+const safeGrid = computed(() => getSafeGridSize(props.rows, props.cols));
+const safeRows = computed(() => safeGrid.value.rows);
+const safeCols = computed(() => safeGrid.value.cols);
+const labelWidthPx = computed(() => getLabelWidth(props.showRowLabels, seatSizePx.value, seatGapPx.value));
+const rowLabelTrackWidthPx = computed(() => 18);
+const labelOverlayWidth = computed(() => `${rowLabelTrackWidthPx.value}px`);
+
+const canvasStyle = computed(() => ({
+    width: `${props.width}px`,
+    height: `${props.height}px`,
+}));
+
+const getContentSize = () => {
+    return getSeatContentSize({
+        rows: safeRows.value,
+        cols: safeCols.value,
+        seatSize: seatSizePx.value,
+        seatGap: seatGapPx.value,
+        labelWidth: labelWidthPx.value,
+    });
+};
+
+const fitScale = computed(() => {
+    const contentSize = getContentSize();
+    return getFitScale({
+        width: props.width,
+        height: props.height,
+        contentWidth: contentSize.width,
+        contentHeight: contentSize.height,
+    });
+});
+
+const effectiveMinScale = computed(() => fitScale.value);
+
+const clampScale = (scale: number): number => {
+    return clampSeatScale(scale, effectiveMinScale.value, INTERNAL_MAX_SCALE);
+};
+
+// ─── Canvas 绘制 ───────────────────────────────────────────────────────────────
+
+const draw = () => {
+    const ctx = canvasCtx;
+    if (!ctx) return;
+
+    const userScale = clampScale(touchHandler.scale);
+    viewportTranslateY.value = touchHandler.translateY;
+    viewportScale.value = userScale;
+    const tx = touchHandler.translateX;
+    const ty = touchHandler.translateY;
+    const size = seatSizePx.value;
+    const gap = seatGapPx.value;
+    const radius = borderRadiusPx.value;
+    const labelWidth = labelWidthPx.value;
+    const defaultSelectedBg = props.selectedBgColor || themeColor;
+
+    ctx.clearRect(0, 0, props.width, props.height);
+
+    // #ifndef APP
+    ctx.save();
+    ctx.translate(tx * userScale, ty * userScale);
+    ctx.scale(userScale, userScale);
+    // #endif
+
+    for (let r = 0; r < safeRows.value; r++) {
+        for (let c = 0; c < safeCols.value; c++) {
+            const seat = getSeat(r, c);
+            if (!seat || seat.empty) continue;
+
+            const selected = isSelected(r, c);
+
+            // #ifndef APP
+            const x = labelWidth + c * (size + gap) + gap / 2;
+            const y = r * (size + gap) + gap / 2;
+            const w = size;
+            const h = size;
+            const r_ = radius;
+            // #endif
+            // #ifdef APP
+            const x = tx * userScale + (labelWidth + c * (size + gap) + gap / 2) * userScale;
+            const y = ty * userScale + (r * (size + gap) + gap / 2) * userScale;
+            const w = size * userScale;
+            const h = size * userScale;
+            const r_ = radius * userScale;
+            // #endif
+
+            if (seat.disabled) {
+                ctx.fillStyle = props.disabledBgColor;
+            } else if (selected) {
+                ctx.fillStyle = seat.selectedBgColor || defaultSelectedBg;
+            } else {
+                ctx.fillStyle = seat.bgColor || props.bgColor;
+            }
+
+            drawRoundRect(ctx, x, y, w, h, r_);
+            ctx.fill();
+
+            if (!seat.disabled && !selected) {
+                ctx.strokeStyle = seat.borderColor || props.borderColor;
+                ctx.lineWidth = props.borderWidth;
+                drawRoundRect(ctx, x, y, w, h, r_);
+                ctx.stroke();
+            }
+
+            if (selected && !seat.disabled) {
+                drawCheck(ctx, x + w / 2, y + h / 2, w, seat.selectedColor || props.selectedColor);
+            }
+        }
+    }
+
+    // #ifndef APP
+    ctx.restore();
+    // #endif
+
+    // #ifdef H5 || APP
+    if (ctx.draw) ctx.draw(true);
+    // #endif
+};
+
+// ─── Canvas 初始化 / 生命周期 ──────────────────────────────────────────────────
+
+const initCanvas = () => {
+    nextTick(() => {
+        // #ifdef H5 || APP
+        canvasCtx = uni.createCanvasContext(canvasId, instance);
+        dpr = 1;
+        applyDefaultViewport();
+        draw();
+        // #endif
+
+        // #ifdef MP-WEIXIN || MP-ALIPAY
+        uni.createSelectorQuery()
+            .in(instance)
+            .select(`#${canvasId}`)
+            .node((res: any) => {
+                if (!res || !res.node) return;
+                const canvasNode = res.node;
+                dpr = utils.System.getWindowInfo().pixelRatio;
+                canvasNode.width = props.width * dpr;
+                canvasNode.height = props.height * dpr;
+                canvasCtx = canvasNode.getContext('2d');
+                canvasCtx.scale(dpr, dpr);
+                applyDefaultViewport();
+                draw();
+            })
+            .exec();
+        // #endif
+    });
+};
+
+// ─── 触摸命中检测 ────────────────────────────────────────────────────────────
+
+const getTouchSeat = (touchX: number, touchY: number): SteSelectSeatItem | null => {
+    const scale = clampScale(touchHandler.scale);
+    const size = seatSizePx.value;
+    const gap = seatGapPx.value;
+    const labelWidth = labelWidthPx.value;
+    const tx = touchHandler.translateX;
+    const ty = touchHandler.translateY;
+
+    const col = Math.floor((touchX / scale - tx - labelWidth - gap / 2) / (size + gap));
+    const row = Math.floor((touchY / scale - ty - gap / 2) / (size + gap));
+
+    if (row < 0 || row >= safeRows.value || col < 0 || col >= safeCols.value) return null;
+    return getSeat(row, col) || null;
+};
+
+const getTouchLocalPoint = (touch: any, rect?: { left?: number; top?: number } | null) => {
+    if (!touch) return { x: 0, y: 0 };
+    if (typeof touch.x === 'number' && typeof touch.y === 'number') {
+        return { x: touch.x, y: touch.y };
+    }
+    return {
+        x: getTouchX(touch) - (rect?.left ?? 0),
+        y: getTouchY(touch) - (rect?.top ?? 0),
+    };
+};
+
+// ─── 视口变换辅助 ─────────────────────────────────────────────────────────────
+
+const getScreenTranslateX = (scale = clampScale(touchHandler.scale), translateX = touchHandler.translateX) => {
+    return getSeatScreenTranslateX({
+        scale,
+        translateX,
+        width: props.width,
+        defaultViewport: getDefaultViewport(),
+    });
+};
+
+const emitMove = () => {
+    const scale = clampScale(touchHandler.scale);
+    emit('move', {
+        translateX: touchHandler.translateX,
+        translateY: touchHandler.translateY,
+        scale,
+        screenTranslateX: getScreenTranslateX(scale, touchHandler.translateX),
+    });
+};
+
+const getTranslateBounds = (scale = touchHandler.scale) => {
+    const contentSize = getContentSize();
+    return getSeatTranslateBounds({
+        scale: clampScale(scale),
+        width: props.width,
+        height: props.height,
+        contentWidth: contentSize.width,
+        contentHeight: contentSize.height,
+    });
+};
+
+const applyAxisResistance = (value: number, min: number, max: number) => {
+    const overscrollResistance = 0.35;
+    if (value < min) {
+        return min + (value - min) * overscrollResistance;
+    }
+    if (value > max) {
+        return max + (value - max) * overscrollResistance;
+    }
+    return value;
+};
+
+const applyTranslateResistance = (x: number, y: number, scale = touchHandler.scale) => {
+    const bounds = getTranslateBounds(scale);
+    return {
+        x: applyAxisResistance(x, bounds.minX, bounds.maxX),
+        y: applyAxisResistance(y, bounds.minY, bounds.maxY),
+    };
+};
+
+const clampTranslate = (x: number, y: number, scale = touchHandler.scale) => {
+    const bounds = getTranslateBounds(scale);
+    return {
+        x: Math.min(bounds.maxX, Math.max(bounds.minX, x)),
+        y: Math.min(bounds.maxY, Math.max(bounds.minY, y)),
+    };
+};
+
+const rowLabelItems = computed(() => {
+    if (!props.showRowLabels) return [];
+    return buildRowLabelItems({
+        rows: safeRows.value,
+        height: props.height,
+        seatSize: seatSizePx.value,
+        seatGap: seatGapPx.value,
+        translateY: viewportTranslateY.value,
+        scale: viewportScale.value,
+    });
+});
+
+const rowLabelTrackStyle = computed(() => {
+    return getRowLabelTrackStyle(rowLabelItems.value, props.height);
+});
+
+const getDefaultViewport = () => {
+    const contentSize = getContentSize();
+    return getDefaultSeatViewport({
+        fitScale: fitScale.value,
+        width: props.width,
+        height: props.height,
+        contentWidth: contentSize.width,
+        contentHeight: contentSize.height,
+        maxScale: INTERNAL_MAX_SCALE,
+    });
+};
+
+const applyDefaultViewport = () => {
+    const viewport = getDefaultViewport();
+    touchHandler.scale = viewport.scale;
+    touchHandler.baseScale = viewport.scale;
+    touchHandler.translateX = viewport.translateX;
+    touchHandler.translateY = viewport.translateY;
+    touchHandler.baseTranslateX = viewport.translateX;
+    touchHandler.baseTranslateY = viewport.translateY;
+};
+
+const { rowLabelsVisible, setShowRowLabelsVisible, onTouchStart, onTouchMove, onTouchEnd, onMouseDown, onMouseMove, onMouseUp, reset } = useSeatInteraction({
+    instance,
+    canvasId,
+    getShowRowLabels: () => props.showRowLabels,
+    touchHandler,
+    clampScale,
+    applyTranslateResistance,
+    clampTranslate,
+    getTouchSeat,
+    getTouchLocalPoint,
+    applyDefaultViewport,
+    draw,
+    emitMove,
+    emitSeatClick: seat => emit('seat-click', seat),
+    emitModelValue: value => emit('update:modelValue', value),
+    toggleSeat,
+});
+
+onMounted(() => {
+    initCanvas();
+});
+
+watch(
+    () => props.showRowLabels,
+    value => {
+        setShowRowLabelsVisible(value);
+    }
+);
+
+watch(
+    () => [
+        props.modelValue,
+        props.seats,
+        props.rows,
+        props.cols,
+        props.width,
+        props.height,
+        props.seatSize,
+        props.seatGap,
+        props.borderRadius,
+        props.borderWidth,
+        props.bgColor,
+        props.borderColor,
+        props.selectedBgColor,
+        props.selectedColor,
+        props.disabledBgColor,
+        props.showRowLabels,
+    ],
+    () => {
+        if (canvasCtx) draw();
+    },
+    { deep: true }
+);
+
+// ─── 对外暴露接口 ─────────────────────────────────────────────────────────────
+
+defineExpose({
+    setSeat: (row: number, col: number, data: Partial<SteSelectSeatItem>) => {
+        setSeat(row, col, data);
+        nextTick(() => draw());
+    },
+    getSeats,
+    reset,
+});
+</script>
+
+<template>
+    <view class="ste-select-seat-root" :style="canvasStyle">
+        <!-- #ifdef H5 -->
+        <canvas
+            :canvas-id="canvasId"
+            :id="canvasId"
+            :style="canvasStyle"
+            class="seat-canvas"
+            disable-scroll
+            @touchstart="onTouchStart"
+            @touchmove.stop.prevent="onTouchMove"
+            @touchend="onTouchEnd"
+            @mousedown="onMouseDown"
+            @mousemove="onMouseMove"
+            @mouseup="onMouseUp"
+            @mouseleave="onMouseUp"
+        />
+        <!-- #endif -->
+
+        <!-- #ifdef APP -->
+        <canvas
+            :canvas-id="canvasId"
+            :id="canvasId"
+            :style="canvasStyle"
+            class="seat-canvas"
+            disable-scroll
+            @touchstart="onTouchStart"
+            @touchmove="onTouchMove"
+            @touchend="onTouchEnd"
+            @touchcancel="onTouchEnd"
+        />
+        <!-- #endif -->
+
+        <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+        <canvas
+            type="2d"
+            :id="canvasId"
+            :style="canvasStyle"
+            class="seat-canvas"
+            disable-scroll
+            @touchstart="onTouchStart"
+            @touchmove.stop.prevent="onTouchMove"
+            @touchend="onTouchEnd"
+            @touchcancel="onTouchEnd"
+        />
+        <!-- #endif -->
+
+        <view v-if="props.showRowLabels" class="row-label-overlay" :class="{ 'is-visible': rowLabelsVisible }">
+            <view class="row-label-track" :style="rowLabelTrackStyle" />
+            <view v-for="item in rowLabelItems" :key="item.row" class="row-label-item" :style="item.style">
+                {{ item.row + 1 }}
+            </view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.ste-select-seat-root {
+    overflow: hidden;
+    position: relative;
+    touch-action: none;
+    user-select: none;
+}
+
+.seat-canvas {
+    display: block;
+}
+
+.row-label-overlay {
+    position: absolute;
+    left: 6px;
+    top: 0;
+    bottom: 0;
+    width: v-bind(labelOverlayWidth);
+    pointer-events: none;
+    opacity: 0;
+    transform: translateX(-4px);
+    transition:
+        opacity 160ms ease,
+        transform 160ms ease;
+}
+
+.row-label-overlay.is-visible {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.row-label-track {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    border-radius: 999px;
+    background: rgba(199, 199, 199, 0.68);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
+    transition:
+        opacity 160ms ease,
+        transform 160ms ease;
+}
+
+.row-label-item {
+    position: absolute;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    color: rgba(255, 255, 255, 0.98);
+    font-weight: 400;
+    letter-spacing: 0;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    transition:
+        opacity 160ms ease,
+        transform 160ms ease;
+}
+</style>

package/components/ste-select-seat/types.d.ts

@@ -0,0 +1,33 @@
+/** 选中的座位值，仅表示已选中的座位坐标 */
+export interface SteSelectSeatValue {
+  row: number
+  col: number
+}
+
+/** 座位项数据，用于描述座位属性，不表示选中状态 */
+export interface SteSelectSeatItem {
+  /** 行号（从0开始） */
+  row: number
+  /** 列号（从0开始） */
+  col: number
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否为空位（不渲染） */
+  empty?: boolean
+  /** 自定义背景色 */
+  bgColor?: string
+  /** 自定义边框颜色 */
+  borderColor?: string
+  /** 自定义选中背景色 */
+  selectedBgColor?: string
+  /** 自定义选中文字/图标颜色 */
+  selectedColor?: string
+}
+
+/** 移动事件参数 */
+export interface SteSelectSeatMoveEvent {
+  translateX: number
+  translateY: number
+  scale: number
+  screenTranslateX: number
+}