stellar-ui-plus 1.24.26 → 1.25.0

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

@@ -0,0 +1,179 @@
+import { ref, computed, watch } from 'vue'
+import type { SteSelectSeatItem, SteSelectSeatValue } from './types'
+import { getSafeGridSize, isInteger, isSeatInBounds } from './internals/gridUtils'
+
+export function useData(props: {
+  rows: number
+  cols: number
+  seats: SteSelectSeatItem[]
+  modelValue: SteSelectSeatValue[]
+}) {
+  // 内部座位数据 Map: `${row}-${col}` => SteSelectSeatItem
+  const seatMap = ref<Map<string, SteSelectSeatItem>>(new Map())
+  const warnedMessages = new Set<string>()
+
+  const getKey = (row: number, col: number) => `${row}-${col}`
+
+  const warn = (message: string) => {
+    if (warnedMessages.has(message)) return
+    warnedMessages.add(message)
+    console.warn(`[ste-select-seat] ${message}`)
+  }
+
+  const getGridSize = () => {
+    const shouldWarn = props.rows !== 0 || props.cols !== 0 || props.seats.length > 0 || props.modelValue.length > 0
+    const { rows, cols } = getSafeGridSize(props.rows, props.cols)
+
+    if (!rows && shouldWarn) {
+      warn(`rows 应为大于 0 的整数，当前值为 ${String(props.rows)}`)
+    }
+    if (!cols && shouldWarn) {
+      warn(`cols 应为大于 0 的整数，当前值为 ${String(props.cols)}`)
+    }
+
+    return { rows, cols }
+  }
+
+  const normalizeSeat = (seat: SteSelectSeatItem, index: number, rows: number, cols: number) => {
+    if (!isInteger(seat?.row) || !isInteger(seat?.col)) {
+      warn(`seats[${index}] 缺少合法的 row/col 整数，已忽略`)
+      return null
+    }
+
+    if (!isSeatInBounds(seat.row, seat.col, rows, cols)) {
+      warn(`seats[${index}] 的坐标 (${seat.row}, ${seat.col}) 超出范围 rows=${rows}, cols=${cols}，已忽略`)
+      return null
+    }
+
+    return { ...seat }
+  }
+
+  // 初始化座位数据
+  const initSeats = () => {
+    const { rows, cols } = getGridSize()
+    const map = new Map<string, SteSelectSeatItem>()
+
+    if (!rows || !cols) {
+      seatMap.value = map
+      return
+    }
+
+    if (props.seats && props.seats.length > 0) {
+      for (let index = 0; index < props.seats.length; index++) {
+        const seat = normalizeSeat(props.seats[index], index, rows, cols)
+        if (!seat) continue
+
+        const key = getKey(seat.row, seat.col)
+        if (map.has(key)) {
+          warn(`seats[${index}] 的坐标 (${seat.row}, ${seat.col}) 重复，后一个配置将覆盖前一个`)
+        }
+        map.set(key, seat)
+      }
+    }
+
+    // 补齐 rows*cols 中未定义的座位
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        const key = getKey(r, c)
+        if (!map.has(key)) {
+          map.set(key, { row: r, col: c })
+        }
+      }
+    }
+    seatMap.value = map
+  }
+
+  // 获取某个座位数据
+  const getSeat = (row: number, col: number): SteSelectSeatItem | undefined => {
+    return seatMap.value.get(getKey(row, col))
+  }
+
+  // 设置某个座位数据
+  const setSeat = (row: number, col: number, data: Partial<SteSelectSeatItem>) => {
+    const { rows, cols } = getGridSize()
+    if (!rows || !cols) {
+      warn('当前 rows/cols 非法，setSeat 已忽略')
+      return
+    }
+    if (!isInteger(row) || !isInteger(col)) {
+      warn(`setSeat 的 row/col 应为整数，当前值为 (${String(row)}, ${String(col)})`)
+      return
+    }
+    if (!isSeatInBounds(row, col, rows, cols)) {
+      warn(`setSeat 的坐标 (${row}, ${col}) 超出范围 rows=${rows}, cols=${cols}`)
+      return
+    }
+
+    const key = getKey(row, col)
+    const existing = seatMap.value.get(key)
+    if (existing) {
+      seatMap.value.set(key, { ...existing, ...data })
+    } else {
+      seatMap.value.set(key, { row, col, ...data })
+    }
+    // 触发响应式更新
+    seatMap.value = new Map(seatMap.value)
+  }
+
+  // 获取所有座位
+  const getSeats = (): SteSelectSeatItem[] => {
+    return Array.from(seatMap.value.values())
+  }
+
+  // 按行获取座位（用于渲染）
+  const seatRows = computed(() => {
+    const { rows: totalRows, cols: totalCols } = getGridSize()
+    const rows: SteSelectSeatItem[][] = []
+    for (let r = 0; r < totalRows; r++) {
+      const row: SteSelectSeatItem[] = []
+      for (let c = 0; c < totalCols; c++) {
+        const seat = seatMap.value.get(getKey(r, c))
+        if (seat) {
+          row.push(seat)
+        } else {
+          row.push({ row: r, col: c })
+        }
+      }
+      rows.push(row)
+    }
+    return rows
+  })
+
+  // 判断座位是否选中
+  const isSelected = (row: number, col: number): boolean => {
+    return props.modelValue.some(v => v.row === row && v.col === col)
+  }
+
+  // 切换座位选中状态，返回新的选中列表
+  const toggleSeat = (row: number, col: number): SteSelectSeatValue[] => {
+    const seat = getSeat(row, col)
+    if (!seat || seat.disabled || seat.empty) return [...props.modelValue]
+
+    const idx = props.modelValue.findIndex(v => v.row === row && v.col === col)
+    const newValue = [...props.modelValue]
+    if (idx >= 0) {
+      newValue.splice(idx, 1)
+    } else {
+      newValue.push({ row, col })
+    }
+    return newValue
+  }
+
+  // 监听 seats 和 rows/cols 变化重新初始化
+  watch(
+    () => [props.seats, props.rows, props.cols],
+    () => initSeats(),
+    { immediate: true, deep: true },
+  )
+
+  return {
+    seatMap,
+    seatRows,
+    getSeat,
+    setSeat,
+    getSeats,
+    isSelected,
+    toggleSeat,
+    initSeats,
+  }
+}

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

@@ -0,0 +1,89 @@
+/**
+ * 跨端触摸事件兼容层（纯函数，无外部依赖）
+ *
+ * APP 端 touch 坐标字段为 x/y，H5 端为 pageX/pageY。
+ * APP 端 touches 是类对象 {0: {...}, 1: {...}}，没有 length 属性。
+ */
+import type { UniTouch, UniTouchEvent } from '../../types/event';
+
+/** 获取触摸点 X 坐标（兼容 APP / H5） */
+export const getTouchX = (touch: UniTouch | undefined | null): number => {
+    if (!touch) return 0;
+    // #ifdef APP
+    if (typeof touch.x === 'number') return touch.x;
+    // #endif
+    if (typeof touch.pageX === 'number') return touch.pageX;
+    if (typeof touch.x === 'number') return touch.x;
+    return 0;
+};
+
+/** 获取触摸点 Y 坐标（兼容 APP / H5） */
+export const getTouchY = (touch: UniTouch | undefined | null): number => {
+    if (!touch) return 0;
+    // #ifdef APP
+    if (typeof touch.y === 'number') return touch.y;
+    // #endif
+    if (typeof touch.pageY === 'number') return touch.pageY;
+    if (typeof touch.y === 'number') return touch.y;
+    return 0;
+};
+
+/**
+ * 将 touches / changedTouches 转为标准数组
+ * APP 端返回类对象（无 length），H5/MP 端返回类数组
+ */
+export const toTouchArray = (
+    touches: UniTouchEvent['touches'] | UniTouchEvent['changedTouches'] | undefined | null
+): UniTouch[] => {
+    if (!touches) return [];
+    if (typeof touches.length !== 'number') {
+        return Object.keys(touches)
+            .filter(k => !isNaN(Number(k)))
+            .map(k => (touches as any)[k])
+            .filter(Boolean) as UniTouch[];
+    }
+    return Array.from({ length: touches.length }, (_, index) => touches[index]).filter(Boolean) as UniTouch[];
+};
+
+/** 获取触摸点唯一标识（优先 identifier，回退 index） */
+export const getTouchIdentifier = (touch: UniTouch | undefined | null, index: number): number | string => {
+    if (touch && typeof touch.identifier === 'number') return touch.identifier;
+    return `touch-${index}`;
+};
+
+/** 计算两指之间的距离 */
+export const getTouchDistance = (touches: UniTouch[]): number => {
+    if (touches.length < 2) return 0;
+    const dx = getTouchX(touches[0]) - getTouchX(touches[1]);
+    const dy = getTouchY(touches[0]) - getTouchY(touches[1]);
+    return Math.sqrt(dx * dx + dy * dy);
+};
+
+/** 计算两指中心坐标 */
+export const getTouchCenter = (touches: UniTouch[]): { x: number; y: number } => {
+    if (touches.length < 2) {
+        return { x: getTouchX(touches[0]), y: getTouchY(touches[0]) };
+    }
+    return {
+        x: (getTouchX(touches[0]) + getTouchX(touches[1])) / 2,
+        y: (getTouchY(touches[0]) + getTouchY(touches[1])) / 2,
+    };
+};
+
+/**
+ * 将触摸点转为 canvas 内部本地坐标
+ * APP 端 touch.x/y 已是本地坐标；H5 端需减去 bounding rect
+ */
+export const getTouchLocalPoint = (
+    touch: UniTouch | undefined | null,
+    rect?: { left?: number; top?: number } | null
+): { x: number; y: number } => {
+    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),
+    };
+};

package/components/ste-simple-calendar/ATTRIBUTES.md

@@ -0,0 +1,17 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `date` | 展示的日期 | `string / number / Date` | `Date.now()` | - | - |
+| `formatter` | 年月显示的格式化模板 | `string` | `YYYY年M月` | - | - |
+| `weekTexts` | 星期文本数组 | `string[]` | `['周日','周一','周二','周三','周四','周五','周六']` | - | - |
+| `color` | 日期、星期和年月文字颜色 | `string` | `#000000` | - | - |
+| `showCalendar` | 点击后是否弹出内置日历 | `boolean` | `true` | - | - |
+| `customStyle` | 自定义根节点样式对象 | `object` | `{}` | - | - |
+| `customClass` | 自定义根节点 class | `string` | `` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `click` | 点击组件时触发 | - | - |
+| `date-change` | 当 date 属性变化时触发 | - | - |

package/components/ste-simple-calendar/README.md

@@ -0,0 +1,112 @@
+# SimpleCalendar 简单日历
+
+轻量级日期展示组件，由日期、星期和年月三部分组成。点击组件后可弹出日历进行日期选择。
+
+---$
+
+### 代码演示
+
+#### 基础使用
+
+默认展示当前日期，点击组件后会弹出日历进行选择。
+
+```html
+<template>
+    <ste-simple-calendar />
+</template>
+```
+
+#### 指定日期
+
+通过`date`属性设置展示日期，支持时间戳、日期字符串和`Date`对象。
+
+```html
+<template>
+    <ste-simple-calendar date="2026-02-24" />
+</template>
+```
+
+#### 禁用日历弹窗
+
+- 通过`showCalendar`属性可以关闭内置日历弹窗
+- 关闭后可结合`click`事件自行处理点击逻辑
+
+```html
+<script setup lang="ts">
+    const handleClick = (dateInfo: any) => {
+        console.log('点击日期:', dateInfo);
+    };
+</script>
+
+<template>
+    <ste-simple-calendar :showCalendar="false" @click="handleClick" />
+</template>
+```
+
+#### 自定义年月格式
+
+通过`formatter`属性设置年月展示格式，格式规则与`dayjs`一致。
+
+```html
+<template>
+    <ste-simple-calendar formatter="YYYY/MM" />
+</template>
+```
+
+#### 自定义星期文案
+
+通过`weekTexts`属性设置星期显示内容。
+
+```html
+<template>
+    <ste-simple-calendar :weekTexts="['日', '一', '二', '三', '四', '五', '六']" />
+</template>
+```
+
+#### 自定义颜色
+
+通过`color`属性统一设置日期、星期和年月文字颜色。
+
+```html
+<template>
+    <ste-simple-calendar color="#0090FF" />
+</template>
+```
+
+#### 调用实例方法
+
+通过`ref`可以调用组件暴露的方法，例如重置为今天。
+
+```html
+<script setup lang="ts">
+    import { ref } from 'vue';
+
+    const calendarRef = ref();
+
+    const setToday = () => {
+        calendarRef.value?.today();
+    };
+</script>
+
+<template>
+    <ste-button @click="setToday">回到今天</ste-button>
+    <ste-simple-calendar ref="calendarRef" date="2026-02-24" />
+</template>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### Methods
+
+| 方法名        | 说明             | 方法参数                   | 支持版本 |
+| ------------- | ---------------- | -------------------------- | -------- |
+| `setDate`     | 设置当前展示日期 | `string \| number \| Date` | -        |
+| `getDateInfo` | 获取当前日期信息 | -                          | -        |
+| `today`       | 重置为今天       | -                          | -        |
+
+---$
+{{fuyuwei}}

package/components/ste-simple-calendar/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "业务组件",
+    "title": "SimpleCalendar 简单日历",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/simple-calendar.png"
+}

package/components/ste-simple-calendar/props.ts

@@ -0,0 +1,32 @@
+import type { PropType, CSSProperties } from 'vue';
+
+export default {
+    date: {
+        type: [String, Number, Date] as PropType<string | number | Date>,
+        default: () => Date.now(),
+    },
+    formatter: {
+        type: String,
+        default: () => 'YYYY年M月',
+    },
+    weekTexts: {
+        type: Array as PropType<string[]>,
+        default: () => ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    },
+    color: {
+        type: String,
+        default: () => '#000000',
+    },
+    showCalendar: {
+        type: Boolean,
+        default: () => true,
+    },
+    customStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: () => ({}),
+    },
+    customClass: {
+        type: String,
+        default: () => '',
+    },
+};

package/components/ste-simple-calendar/ste-simple-calendar.easycom.json

@@ -0,0 +1,60 @@
+{
+    "name": "ste-simple-calendar",
+    "description": "简单日历组件，紧凑展示当前日期信息",
+    "example": "<ste-simple-calendar></ste-simple-calendar>",
+    "tutorial": "",
+    "attributes": [
+        {
+            "name": "date",
+            "description": "展示的日期",
+            "type": "string | number | Date",
+            "default": "Date.now()"
+        },
+        {
+            "name": "formatter",
+            "description": "年月显示的格式化模板",
+            "type": "string",
+            "default": "YYYY年M月"
+        },
+        {
+            "name": "weekTexts",
+            "description": "星期文本数组",
+            "type": "string[]",
+            "default": "['周日','周一','周二','周三','周四','周五','周六']"
+        },
+        {
+            "name": "color",
+            "description": "日期、星期和年月文字颜色",
+            "type": "string",
+            "default": "#000000"
+        },
+        {
+            "name": "showCalendar",
+            "description": "点击后是否弹出内置日历",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "customStyle",
+            "description": "自定义根节点样式对象",
+            "type": "object",
+            "default": "{}"
+        },
+        {
+            "name": "customClass",
+            "description": "自定义根节点 class",
+            "type": "string",
+            "default": ""
+        },
+        {
+            "name": "[event]click",
+            "description": "点击组件时触发",
+            "type": "(dateInfo: DateInfo) => void"
+        },
+        {
+            "name": "[event]date-change",
+            "description": "当 date 属性变化时触发",
+            "type": "(dateInfo: DateInfo) => void"
+        }
+    ]
+}