stellar-ui-plus 1.25.0 → 1.25.2

package/components/ste-marquee/ste-marquee.easycom.json

@@ -0,0 +1,132 @@
+{
+    "name": "ste-marquee",
+    "description": "走马灯组件，用于水平滚动展示公告、中奖名单等信息",
+    "example": "<ste-marquee :list=\"list\"></ste-marquee>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui-plus&menu=%E7%BB%84%E4%BB%B6&active=ste-marquee",
+    "attributes": [
+        {
+            "name": "list",
+            "description": "数据列表",
+            "type": "MarqueeItem[]",
+            "default": "[]"
+        },
+        {
+            "name": "speed",
+            "description": "滚动速度(px/s)",
+            "type": "number",
+            "default": 50
+        },
+        {
+            "name": "pauseOnHover",
+            "description": "悬停时是否暂停",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "loop",
+            "description": "是否循环播放",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "gap",
+            "description": "消息之间的间距(rpx)",
+            "type": "number",
+            "default": 20
+        },
+        {
+            "name": "height",
+            "description": "容器高度",
+            "type": "string",
+            "default": "auto"
+        },
+        {
+            "name": "fillScreen",
+            "description": "是否填满屏幕宽度",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "clickable",
+            "description": "是否可点击",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "containerBg",
+            "description": "容器背景色",
+            "type": "string",
+            "default": "transparent"
+        },
+        {
+            "name": "containerPadding",
+            "description": "容器内边距",
+            "type": "string",
+            "default": "0rpx"
+        },
+        {
+            "name": "containerRadius",
+            "description": "容器圆角",
+            "type": "string",
+            "default": "0rpx"
+        },
+        {
+            "name": "itemBg",
+            "description": "消息项背景色",
+            "type": "string",
+            "default": "transparent"
+        },
+        {
+            "name": "itemPadding",
+            "description": "消息项内边距",
+            "type": "string",
+            "default": "0rpx 20rpx"
+        },
+        {
+            "name": "itemRadius",
+            "description": "消息项圆角",
+            "type": "string",
+            "default": "0rpx"
+        },
+        {
+            "name": "[event]click",
+            "description": "点击消息时触发",
+            "params": [
+                { "name": "item", "description": "点击的数据项" },
+                { "name": "index", "description": "数据项索引" }
+            ]
+        },
+        {
+            "name": "[event]complete",
+            "description": "一轮播放完成时触发"
+        },
+        {
+            "name": "[method]play",
+            "description": "开始播放"
+        },
+        {
+            "name": "[method]pause",
+            "description": "暂停播放"
+        },
+        {
+            "name": "[method]resume",
+            "description": "恢复播放"
+        },
+        {
+            "name": "[method]stop",
+            "description": "停止播放并回到初始位置"
+        },
+        {
+            "name": "[slot]default",
+            "description": "默认插槽，自定义整个内容区域"
+        },
+        {
+            "name": "[slot]item",
+            "description": "自定义单项内容",
+            "params": [
+                { "name": "item", "description": "数据项对象" },
+                { "name": "index", "description": "数据项索引" }
+            ]
+        }
+    ]
+}

package/components/ste-marquee/ste-marquee.vue

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, nextTick, getCurrentInstance } from 'vue';
+import propsData, { type MarqueeItem } from './props';
+
+const props = defineProps(propsData);
+const instance = getCurrentInstance();
+const emits = defineEmits<{
+    (e: 'click', item: MarqueeItem, index: number): void;
+}>();
+
+// ─── 状态 ──────────────────────────────────────────────────────
+const displayQueue = ref<(MarqueeItem & { _key: string })[]>([]);
+const contentWidth = ref(0);
+const isReady = ref(false);
+let copyCount = 2;
+let keySeed = 0;
+
+// ─── 样式 ──────────────────────────────────────────────────────
+const containerStyle = computed(() => ({
+    height: props.height === 'auto' ? undefined : props.height,
+    background: props.containerBg,
+    padding: props.containerPadding,
+    borderRadius: props.containerRadius,
+}));
+
+// 使用 CSS 变量控制动画
+const cssVariables = computed(() => {
+    if (!isReady.value || contentWidth.value <= 0) {
+        return {};
+    }
+    const duration = contentWidth.value / props.speed;
+    return {
+        '--marquee-duration': `${duration}s`,
+        '--marquee-width': `${contentWidth.value}px`,
+    };
+});
+
+const animationClass = computed(() => {
+    if (!isReady.value || contentWidth.value <= 0) {
+        return '';
+    }
+    return 'is-animating';
+});
+
+const getItemStyle = (item: MarqueeItem) => ({
+    color: item.color || '',
+    background: item.background || props.itemBg,
+    padding: props.itemPadding,
+    borderRadius: props.itemRadius,
+    marginRight: `${props.gap}rpx`,
+});
+
+// ─── 测量 ──────────────────────────────────────────────────────
+const queryWidth = (selector: string): Promise<number> =>
+    new Promise(resolve => {
+        uni.createSelectorQuery()
+            .in(instance)
+            .select(selector)
+            .boundingClientRect((rect: any) => resolve(rect ? rect.width : 0))
+            .exec();
+    });
+
+// ─── 构建队列 ──────────────────────────────────────────────────
+const mkKey = (id: string | number, copy: number, seed: number) => `${id}_c${copy}_s${seed}`;
+
+const buildQueue = async (sourceList: MarqueeItem[]) => {
+    if (!sourceList.length) {
+        displayQueue.value = [];
+        isReady.value = false;
+        return;
+    }
+
+    isReady.value = false;
+    const currentSeed = keySeed++;
+
+    // 先渲染单份测量
+    displayQueue.value = sourceList.map(it => ({ ...it, _key: mkKey(it.id, 0, currentSeed) }));
+
+    await nextTick();
+    await new Promise(r => setTimeout(r, 50));
+
+    const containerWidth = await queryWidth('.ste-marquee');
+    const singleWidth = await queryWidth('.ste-mq-content');
+
+    if (singleWidth <= 0) {
+        await new Promise(r => setTimeout(r, 100));
+        const retryWidth = await queryWidth('.ste-mq-content');
+        if (retryWidth <= 0) {
+            contentWidth.value = 0;
+            return;
+        }
+        contentWidth.value = retryWidth;
+    } else {
+        contentWidth.value = singleWidth;
+    }
+
+    // 计算份数（防止除零）
+    if (contentWidth.value <= 0) {
+        copyCount = 2;
+    } else if (contentWidth.value >= containerWidth) {
+        copyCount = 2;
+    } else {
+        copyCount = Math.max(3, Math.ceil((containerWidth * 3) / contentWidth.value) + 1);
+    }
+
+    // 构建多份
+    const filled: (MarqueeItem & { _key: string })[] = [];
+    for (let c = 0; c < copyCount; c++) {
+        sourceList.forEach(it => filled.push({ ...it, _key: mkKey(it.id, c, currentSeed) }));
+    }
+    displayQueue.value = filled;
+
+    await nextTick();
+    isReady.value = true;
+
+    console.log('[ste-marquee] built queue, contentWidth:', contentWidth.value, 'copies:', copyCount);
+};
+
+// ─── 初始化 ────────────────────────────────────────────────────
+const init = async (list: MarqueeItem[], { keepPaused = false } = {}) => {
+    if (!keepPaused) {
+        isPaused.value = false;
+    }
+    await buildQueue(list);
+};
+
+// ─── 控制 ──────────────────────────────────────────────────────
+const isPaused = ref(false);
+
+const play = () => {
+    isPaused.value = false;
+};
+const pause = () => {
+    isPaused.value = true;
+};
+const resume = () => {
+    isPaused.value = false;
+};
+const stop = async () => {
+    isPaused.value = true;
+    // 重新初始化回到起始位置，保持暂停状态
+    await init(props.list, { keepPaused: true });
+};
+
+// ─── 监听 ──────────────────────────────────────────────────────
+let isInitialized = false;
+watch(
+    () => props.list,
+    newList => {
+        if (!isInitialized) return;
+        init(newList);
+    },
+    { deep: true }
+);
+
+// ─── 生命周期 ──────────────────────────────────────────────────
+onMounted(() => {
+    setTimeout(async () => {
+        await init(props.list);
+        isInitialized = true;
+    }, 100);
+});
+
+// ─── 交互 ──────────────────────────────────────────────────────
+const handleClick = (item: MarqueeItem, index: number) => {
+    if (!props.clickable) return;
+    emits('click', item, index);
+};
+const handleMouseEnter = () => {
+    if (props.pauseOnHover) pause();
+};
+const handleMouseLeave = () => {
+    if (props.pauseOnHover) resume();
+};
+
+defineExpose({ play, pause, resume, stop });
+</script>
+
+<template>
+    <view class="ste-marquee" :style="[containerStyle, cssVariables]" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @touchstart="handleMouseEnter" @touchend="handleMouseLeave">
+        <view class="ste-mq-wrapper" :class="{ 'is-paused': isPaused }">
+            <view class="ste-mq-content" :class="animationClass">
+                <view v-for="(item, index) in displayQueue" :key="item._key" class="ste-mq-item" :style="getItemStyle(item)" @click="handleClick(item, index)">
+                    <slot name="item" :item="item" :index="index">
+                        <image v-if="item.icon" class="ste-mq-icon" :src="item.icon" mode="aspectFit" />
+                        <text class="ste-mq-text">{{ item.text }}</text>
+                    </slot>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.ste-marquee {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+}
+
+.ste-mq-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    white-space: nowrap;
+
+    &.is-paused .ste-mq-content {
+        animation-play-state: paused !important;
+    }
+}
+
+.ste-mq-content {
+    display: flex;
+    flex-shrink: 0;
+    will-change: transform;
+
+    &.is-animating {
+        animation: marquee-scroll var(--marquee-duration, 10s) linear infinite;
+    }
+}
+
+@keyframes marquee-scroll {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(calc(var(--marquee-width, 0px) * -1));
+    }
+}
+
+.ste-mq-item {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    cursor: pointer;
+}
+
+.ste-mq-icon {
+    width: 40rpx;
+    height: 40rpx;
+    margin-right: 10rpx;
+    border-radius: 50%;
+}
+
+.ste-mq-text {
+    font-size: 28rpx;
+    line-height: 1.5;
+}
+</style>

package/components/ste-media-preview/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `show` | 是否显示 | `boolean` | `false` | - | - |
@@ -12,10 +14,18 @@
 | `zIndex` | 弹出层级 | `number` | `997` | - | - |
 
 
-#### Events
+### Events
 | 事件名 | 说明  | 事件参数 | 支持版本 |
 | ----- | ----- | ------- | -------- |
-| `beforeClose` | 关闭前触发 | - | - |
-| `close` | 关闭后触发 | - | - |
+| `beforeClose` | 关闭前触发 | `data`：() => void | - |
+| `close` | 关闭后触发 | `data`：() => void | - |
 | `change` | 切换时触发 | `index`：切换后的下标 | - |
 | `longpress` | 长按时触发 | `index`：当前下标 | - |
+
+
+### Slots
+| 插槽名 | 说明  | 参数 | 支持版本 |
+| ----- | ----- | --- | -------- |
+| `default` | 默认插槽：图片底部居中展示 | - | - |
+
+

package/components/ste-media-preview/README.md

@@ -4,17 +4,17 @@
 
 ---$
 
--   APP兼容性问题
-    -   APP对于视频预览只支持单个视频预览
-    -   不支持视频图片混合预览
-    -   APP预览多个媒体时，统一当作图片处理
+- APP兼容性问题
+    - APP对于视频预览只支持单个视频预览
+    - 不支持视频图片混合预览
+    - APP预览多个媒体时，统一当作图片处理
 
-### 代码演示
+## 代码演示
 
-#### 基础用法
+## 基础用法
 
--   `show`属性控制是否展示预览弹窗，支持`sync`双向绑定
--   `urls`属性为要预览的媒体URL数组
+- `show`属性控制是否展示预览弹窗，支持`sync`双向绑定
+- `urls`属性为要预览的媒体URL数组
 
 ```html
 <template>
@@ -35,9 +35,9 @@
 </script>
 ```
 
-#### 自动轮播
+## 自动轮播
 
--   `autoplay`属性控制自动轮播间隔时间，单位为毫秒，为`0`时不轮播
+- `autoplay`属性控制自动轮播间隔时间，单位为毫秒，为`0`时不轮播
 
 ```html
 <template>
@@ -59,9 +59,9 @@
 </script>
 ```
 
-#### 前后衔接循环播放
+## 前后衔接循环播放
 
--   `loop`属性可开启前后衔接循环播放
+- `loop`属性可开启前后衔接循环播放
 
 ```html
 <template>
@@ -84,9 +84,9 @@
 </script>
 ```
 
-#### 默认展示下标为2的媒体资源
+## 默认展示下标为2的媒体资源
 
--   `index`属性可控制从第几页开始展示
+- `index`属性可控制从第几页开始展示
 
 ```html
 <template>
@@ -109,9 +109,9 @@
 </script>
 ```
 
-#### 隐藏左下角索引标签
+## 隐藏左下角索引标签
 
--   `showIndex`属性可控制左下角页签显示
+- `showIndex`属性可控制左下角页签显示
 
 ```html
 <template>
@@ -134,9 +134,9 @@
 </script>
 ```
 
-#### 双指缩放
+## 双指缩放
 
--   `scale`属性可开启双指缩放功能
+- `scale`属性可开启双指缩放功能
 
 ```html
 <template>
@@ -159,9 +159,9 @@
 </script>
 ```
 
-#### 长按触发事件
+## 长按触发事件
 
--   事件`longpress`在用户长按时触发
+- 事件`longpress`在用户长按时触发
 
 ```html
 <template>
@@ -190,10 +190,10 @@
 </script>
 ```
 
-#### 关闭前/后事件
+## 关闭前/后事件
 
--   事件`beforeClose`在关闭前被触发
--   事件`close`在关闭后被触发
+- 事件`beforeClose`在关闭前被触发
+- 事件`close`在关闭后被触发
 
 ```html
 <template>
@@ -244,16 +244,7 @@
 
 ---$
 
-### API
-
 <!-- props -->
 
-#### 组件插槽(Slots)
-
-| 插槽名  | 说明         | 插槽参数 | 支持版本 |
-| ------- | ------------ | -------- | -------- |
-| default | 默认插槽：图片底部居中展示 | -        | -        |
-
-
 ---$
 {{xuyajun}}

package/components/ste-media-preview/ste-media-preview.easycom.json

@@ -61,17 +61,26 @@
         {
             "name": "[event]beforeClose",
             "description": "关闭前触发",
-            "type": "() => void"
+            "params": [
+                {
+                    "name": "data",
+                    "description": "() => void"
+                }
+            ]
         },
         {
             "name": "[event]close",
             "description": "关闭后触发",
-            "type": "() => void"
+            "params": [
+                {
+                    "name": "data",
+                    "description": "() => void"
+                }
+            ]
         },
         {
             "name": "[event]change",
             "description": "切换时触发",
-            "type": "(index: number) => void",
             "params": [
                 {
                     "name": "index",
@@ -82,13 +91,16 @@
         {
             "name": "[event]longpress",
             "description": "长按时触发",
-            "type": "(index: number) => void",
             "params": [
                 {
                     "name": "index",
                     "description": "当前下标"
                 }
             ]
+        },
+        {
+            "name": "[slot]default",
+            "description": "默认插槽：图片底部居中展示"
         }
     ]
 }

package/components/ste-message-box/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `title` | 提示的标题 | `String` | `` | - | - |

package/components/ste-message-box/README.md

@@ -4,9 +4,9 @@
 
 ---$
 
-### 使用方法
+## 使用方法
 
-#### 组合函数使用方法
+## 组合函数使用方法
 
 ps：注意 目前 useMessageBox 只能在 setup 作用域下使用  
 父组件引入组件 组合函数调用showMsgBox方法，打开轻提示
@@ -25,7 +25,7 @@ ps：注意 目前 useMessageBox 只能在 setup 作用域下使用
 </template>
 ```
 
-#### Ref用法
+## Ref用法
 
 父组件引入组件 绑定ref 通过ref调用showMsgBox方法，打开轻提示
 
@@ -46,7 +46,7 @@ ps：注意 目前 useMessageBox 只能在 setup 作用域下使用
 </template>
 ```
 
-#### 全局引入
+## 全局引入
 
 配合 [https://github.com/smartXJ/vue3-inset-loader](https://github.com/smartXJ/vue3-inset-loader) 插件， 将 ste-message-box 节点置于每个页面中，可以更进一步简化使用
 
@@ -61,9 +61,9 @@ insetLoader: {
 }
 ```
 
-### 代码演示
+## 代码演示
 
-#### 基础使用
+## 基础使用
 
 可在标题(`title`)和内容(`content`)中使用`\n`来实现换行
 
@@ -83,7 +83,7 @@ insetLoader: {
 </script>
 ```
 
-#### 带图标
+## 带图标
 
 - 内置三种图标类型：`info`、`success`、`error`
 - 当显示图标时，内容(`content`)会失效，只显示标题(`title`)
@@ -119,7 +119,7 @@ insetLoader: {
 </script>
 ```
 
-#### 自定义按钮
+## 自定义按钮
 
 ```html
 <template>
@@ -163,7 +163,7 @@ insetLoader: {
 </script>
 ```
 
-#### 显示输入框
+## 显示输入框
 
 当显示输入框时，内容(`content`)将不显示
 
@@ -188,7 +188,7 @@ insetLoader: {
 </script>
 ```
 
-#### 插槽
+## 插槽
 
 如果提供的弹框内容不满足需求，可以使用插槽自定义弹框内容。
 可以通过指定唯一标识`selector`的方式，在一个页面中使用多个`ste-message-box`，`useSteMsgBox(selector)`会返回一个指定了selector的组件实例。
@@ -216,7 +216,7 @@ insetLoader: {
 </script>
 ```
 
-#### 回调事件
+## 回调事件
 
 ```html
 <template>
@@ -263,8 +263,6 @@ insetLoader: {
 
 ---$
 
-### API
-
 <!-- props -->
 
 ---$