stellar-ui-plus 1.25.1 → 1.25.3

package/components/ste-marquee/README.md

@@ -0,0 +1,123 @@
+# ste-marquee 走马灯
+
+用于展示滚动公告、中奖名单等水平滚动信息。
+
+---$
+
+## 使用场景
+
+- 抽奖活动中奖名单滚动展示
+- 系统公告、通知滚动
+- 实时交易动态
+- 新闻头条滚动
+
+## 基础用法
+
+```vue
+<template>
+    <ste-marquee :list="list" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const list = ref([
+    { id: 1, text: '恭喜用户138****1234获得一等奖' },
+    { id: 2, text: '恭喜用户139****5678获得二等奖' },
+    { id: 3, text: '恭喜用户137****9012获得三等奖' },
+]);
+</script>
+```
+
+## 自定义样式
+
+```vue
+<ste-marquee :list="list" containerBg="#f5f5f5" containerPadding="20rpx" containerRadius="16rpx" itemBg="#ffffff" itemPadding="16rpx 24rpx" itemRadius="8rpx" />
+```
+
+## 填满屏幕
+
+当数据较少时，使用 `fillScreen` 自动复制数据填满屏幕，实现流畅滚动：
+
+```vue
+<ste-marquee :list="shortList" :fillScreen="true" />
+```
+
+## 调整滚动速度
+
+```vue
+<ste-marquee :list="list" :speed="100" />
+```
+
+## 使用插槽自定义内容
+
+```vue
+<ste-marquee :list="list">
+    <template #item="{ item, index }">
+        <view class="custom-item">
+            <image :src="item.avatar" class="avatar" />
+            <text>{{ item.text }}</text>
+        </view>
+    </template>
+</ste-marquee>
+```
+
+## 播放控制
+
+通过 ref 可以控制走马灯的播放、暂停和停止：
+
+```vue
+<template>
+    <ste-marquee ref="marqueeRef" :list="list" />
+    <button @click="play">播放</button>
+    <button @click="pause">暂停</button>
+    <button @click="stop">停止</button>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const marqueeRef = ref();
+
+const play = () => marqueeRef.value?.play();
+const pause = () => marqueeRef.value?.pause();
+const stop = () => marqueeRef.value?.stop();
+</script>
+```
+
+## 点击事件
+
+```vue
+<ste-marquee :list="list" @click="onClick" />
+
+<script setup>
+const onClick = (item, index) => {
+    console.log('点击了:', item.text);
+};
+</script>
+```
+
+## 数据类型
+
+```typescript
+interface MarqueeItem {
+    /** 唯一标识 */
+    id: string | number;
+    /** 显示文本 */
+    text: string;
+    /** 图标URL（可选） */
+    icon?: string;
+    /** 文本颜色（可选） */
+    color?: string;
+    /** 背景色（可选） */
+    background?: string;
+}
+```
+
+---$
+
+<!-- props -->
+
+---$
+
+{{xuyajun}}

package/components/ste-marquee/config.json

@@ -0,0 +1,5 @@
+{
+	"group": "展示组件",
+	"title": "Marquee 走马灯",
+	"icon": "https://image.whzb.com/chain/StellarUI/%E7%BB%84%E4%BB%B6%E5%9B%BE%E6%A0%87/marquee.png"
+}

package/components/ste-marquee/props.ts

@@ -0,0 +1,106 @@
+// 走马灯组件 Props 类型定义
+
+export interface MarqueeItem {
+    /** 唯一标识 */
+    id: string | number;
+    /** 显示文本 */
+    text: string;
+    /** 图标URL（可选） */
+    icon?: string;
+    /** 文本颜色（可选） */
+    color?: string;
+    /** 背景色（可选） */
+    background?: string;
+    /** 自定义数据（可选） */
+    data?: any;
+}
+
+export interface MarqueeProps {
+    /** 数据列表 */
+    list: MarqueeItem[];
+    /** 滚动速度(px/s) */
+    speed: number;
+    /** 悬停是否暂停 */
+    pauseOnHover: boolean;
+    /** 是否循环播放 */
+    loop: boolean;
+    /** 消息间隔(px) */
+    gap: number;
+    /** 容器高度 */
+    height: string;
+    /** 是否填满屏幕 */
+    fillScreen: boolean;
+    /** 是否可点击 */
+    clickable: boolean;
+    /** 容器背景色 */
+    containerBg: string;
+    /** 容器内边距 */
+    containerPadding: string;
+    /** 容器圆角 */
+    containerRadius: string;
+    /** 消息项背景色 */
+    itemBg: string;
+    /** 消息项内边距 */
+    itemPadding: string;
+    /** 消息项圆角 */
+    itemRadius: string;
+}
+
+export default {
+    list: {
+        type: Array as () => MarqueeItem[],
+        default: () => [],
+    },
+    speed: {
+        type: Number,
+        default: 50,
+    },
+    pauseOnHover: {
+        type: Boolean,
+        default: true,
+    },
+    loop: {
+        type: Boolean,
+        default: true,
+    },
+    gap: {
+        type: Number,
+        default: 20,
+    },
+    height: {
+        type: String,
+        default: 'auto',
+    },
+    fillScreen: {
+        type: Boolean,
+        default: false,
+    },
+    clickable: {
+        type: Boolean,
+        default: true,
+    },
+    containerBg: {
+        type: String,
+        default: 'transparent',
+    },
+    containerPadding: {
+        type: String,
+        default: '0rpx',
+    },
+    containerRadius: {
+        type: String,
+        default: '0rpx',
+    },
+    itemBg: {
+        type: String,
+        default: 'transparent',
+    },
+    itemPadding: {
+        type: String,
+        default: '0rpx 20rpx',
+    },
+    itemRadius: {
+        type: String,
+        default: '0rpx',
+    },
+} satisfies Record<keyof MarqueeProps, any>;

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` | 默认插槽：图片底部居中展示 | - | - |
+
+