stellar-ui-plus 1.24.26 → 1.25.0

package/components/ste-simple-calendar/ste-simple-calendar.vue

@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import utils from '../../utils/utils';
+import propsData from './props';
+import { useSimpleCalendar } from './useData';
+import type { SimpleCalendarEmits, SimpleCalendarExpose } from './type.d';
+
+const componentName = 'ste-simple-calendar';
+
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+
+const props = defineProps(propsData);
+
+const emit = defineEmits<SimpleCalendarEmits>();
+
+const { dateInfo, formattedMonth, setDate, getDateInfo, today } = useSimpleCalendar(props, emit);
+
+// 获取安全区域信息
+const { safeArea } = utils.System.getWindowInfo();
+
+// 控制日历弹窗显示
+const showPopup = ref(false);
+
+// 日历选中的日期列表
+const calendarList = computed(() => {
+    return [pendingSelectedDate.value];
+});
+
+// 日历默认日期（格式化为时间戳）
+const calendarDefaultDate = computed(() => {
+    return utils.dayjs(pendingSelectedDate.value).valueOf();
+});
+
+// 弹窗中待确认的日期
+const pendingSelectedDate = ref<string | number>(dateInfo.value.date);
+
+// 根节点样式
+const rootStyle = computed(() => {
+    return {
+        ...props.customStyle,
+    };
+});
+
+// 日期数字样式
+const dayStyle = computed(() => {
+    return {
+        color: props.color,
+    };
+});
+
+// 星期文本样式
+const weekStyle = computed(() => {
+    return {
+        color: props.color,
+    };
+});
+
+// 年月文本样式
+const monthStyle = computed(() => {
+    return {
+        color: props.color,
+    };
+});
+
+// 底部按钮区域样式（包含安全距离）
+const actionBoxStyle = computed(() => {
+    const bottomSafeArea = safeArea.bottom || 0;
+    const screenHeight = utils.System.getWindowInfo().screenHeight || 0;
+    const safeAreaInsetBottom = screenHeight - bottomSafeArea;
+
+    return {
+        paddingBottom: `calc(20rpx + ${safeAreaInsetBottom}px)`,
+    };
+});
+
+// 点击组件
+const handleClick = () => {
+    emit('click', dateInfo.value);
+    if (props.showCalendar) {
+        pendingSelectedDate.value = dateInfo.value.date;
+        showPopup.value = true;
+    }
+};
+
+// 重置日历
+const handleReset = () => {
+    setDate(Date.now());
+    pendingSelectedDate.value = utils.dayjs().format('YYYY-MM-DD');
+    showPopup.value = false;
+};
+
+// 日历选择日期
+const handleCalendarSelect = (days: (string | number)[], day: string | number) => {
+    pendingSelectedDate.value = day || days?.[0] || pendingSelectedDate.value;
+};
+
+// 日历确认选择
+const handleCalendarConfirm = () => {
+    setDate(pendingSelectedDate.value);
+    showPopup.value = false;
+};
+
+// 暴露方法
+defineExpose<SimpleCalendarExpose>({
+    setDate,
+    getDateInfo,
+    today,
+});
+</script>
+
+<template>
+    <view :class="['ste-simple-calendar', customClass]" :style="rootStyle" @click="handleClick">
+        <!-- 日期数字 -->
+        <view class="ste-simple-calendar__day-box">
+            <text class="ste-simple-calendar__day" :style="dayStyle">{{ dateInfo.day }}</text>
+        </view>
+
+        <!-- 星期标签 -->
+        <view class="ste-simple-calendar__week-box">
+            <text v-for="(char, index) in dateInfo.weekText" :key="index" class="ste-simple-calendar__week-text" :style="weekStyle">
+                {{ char }}
+            </text>
+        </view>
+
+        <!-- 年月文本 -->
+        <view class="ste-simple-calendar__month-box">
+            <text class="ste-simple-calendar__month" :style="monthStyle">
+                {{ formattedMonth }}
+            </text>
+        </view>
+    </view>
+
+    <!-- 日历弹窗 -->
+    <ste-popup v-model:show="showPopup" height="60vh" position="bottom" :showClose="false">
+        <view class="calendar-popup">
+            <view class="calendar-wrapper">
+                <ste-calendar :list="calendarList" :defaultDate="calendarDefaultDate" :showConfirm="false" :show-title="false" @select="handleCalendarSelect" />
+            </view>
+            <view class="action-box" :style="actionBoxStyle">
+                <view class="btn reset" @click="handleReset">
+                    <text class="btn-text">重置</text>
+                </view>
+                <view class="btn confirm" @click="handleCalendarConfirm">
+                    <text class="btn-text">确认</text>
+                </view>
+            </view>
+        </view>
+    </ste-popup>
+</template>
+
+<style lang="scss" scoped>
+.ste-simple-calendar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+    height: 45rpx;
+
+    &__day-box {
+        background-color: var(--simple-calendar-day-bg, #f3f3f3);
+        border-radius: 2rpx;
+        padding: 0 10rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        margin-right: 6rpx;
+    }
+
+    &__day {
+        font-size: var(--simple-calendar-day-font-size, 32rpx);
+        font-weight: bold;
+        color: var(--simple-calendar-day-color, #000000);
+        line-height: 1;
+    }
+
+    &__week-box {
+        background-color: var(--simple-calendar-week-bg, #f3f3f3);
+        border-radius: 2rpx;
+        padding: 0 10rpx;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        margin-right: 6rpx;
+    }
+
+    &__week-text {
+        font-size: var(--simple-calendar-week-font-size, 16rpx);
+        color: var(--simple-calendar-week-color, #333333);
+        line-height: 1.1;
+    }
+
+    &__month-box {
+        background-color: var(--simple-calendar-month-bg, #f3f3f3);
+        border-radius: 2rpx;
+        padding: 0 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+    }
+
+    &__month {
+        font-size: var(--simple-calendar-month-font-size, 24rpx);
+        color: var(--simple-calendar-month-color, #333333);
+        line-height: 1;
+    }
+}
+
+.calendar-popup {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+
+    .calendar-wrapper {
+        flex: 1;
+        overflow: hidden;
+    }
+
+    .action-box {
+        flex-shrink: 0;
+        display: flex;
+        padding: 20rpx 32rpx;
+        background-color: #fff;
+        border-top: 1rpx solid #f0f0f0;
+
+        .btn {
+            flex: 1;
+            height: 80rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 8rpx;
+            cursor: pointer;
+
+            &.reset {
+                background-color: #f5f5f5;
+                margin-right: 20rpx;
+
+                .btn-text {
+                    color: #666;
+                    font-size: 28rpx;
+                }
+            }
+
+            &.confirm {
+                background-color: var(--ste-theme-color, #0090ff);
+
+                .btn-text {
+                    color: #fff;
+                    font-size: 28rpx;
+                }
+            }
+        }
+    }
+}
+</style>

package/components/ste-simple-calendar/type.d.ts

@@ -0,0 +1,30 @@
+/** 日期信息对象 */
+export interface DateInfo {
+    /** 完整日期字符串，格式为 YYYY-MM-DD */
+    date: string;
+    /** 年份 */
+    year: number;
+    /** 月份，1-12 */
+    month: number;
+    /** 日期，1-31 */
+    day: number;
+    /** 星期几，0-6（0=周日） */
+    weekday: number;
+    /** 星期文本 */
+    weekText: string;
+    /** 时间戳 */
+    timestamp: number;
+}
+
+/** 组件 Emits 类型定义 */
+export interface SimpleCalendarEmits {
+    (e: 'click', dateInfo: DateInfo): void;
+    (e: 'date-change', dateInfo: DateInfo): void;
+}
+
+/** 组件暴露的方法 */
+export interface SimpleCalendarExpose {
+    setDate: (date: string | number | Date) => void;
+    getDateInfo: () => DateInfo;
+    today: () => void;
+}

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

@@ -0,0 +1,60 @@
+import { computed, ref, watch } from 'vue';
+import utils from '../../utils/utils';
+import type { DateInfo } from './type.d';
+
+export const useSimpleCalendar = (props: any, emit: any) => {
+    const currentDate = ref<any>(props.date);
+
+    // 计算日期信息
+    const dateInfo = computed<DateInfo>(() => {
+        const d = utils.dayjs(currentDate.value);
+        return {
+            date: d.format('YYYY-MM-DD'),
+            year: d.year(),
+            month: d.month() + 1,
+            day: d.date(),
+            weekday: d.day(),
+            weekText: props.weekTexts[d.day()],
+            timestamp: d.valueOf(),
+        };
+    });
+
+    // 格式化年月
+    const formattedMonth = computed(() => {
+        return utils.dayjs(currentDate.value).format(props.formatter);
+    });
+
+    // 监听 date 属性变化
+    watch(
+        () => props.date,
+        (newVal) => {
+            currentDate.value = newVal;
+            emit('date-change', dateInfo.value);
+        }
+    );
+
+    // 设置日期
+    const setDate = (date: string | number | Date) => {
+        currentDate.value = date;
+        emit('date-change', dateInfo.value);
+    };
+
+    // 获取日期信息
+    const getDateInfo = (): DateInfo => {
+        return dateInfo.value;
+    };
+
+    // 回到今天
+    const today = () => {
+        currentDate.value = Date.now();
+        emit('date-change', dateInfo.value);
+    };
+
+    return {
+        dateInfo,
+        formattedMonth,
+        setDate,
+        getDateInfo,
+        today,
+    };
+};

package/components/ste-skeleton/ATTRIBUTES.md

@@ -0,0 +1,7 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `loading` | 是否显示骨架图 | `boolean` | `true` | - | - |
+| `type` | 骨架图类型 | `string` | `text` | `text`：文本<br/>`image`：图片<br/>`circle`：圆形<br/>`button`：按钮 | - |
+
+

package/components/ste-skeleton/README.md

@@ -0,0 +1,82 @@
+# Skeleton 骨架图
+
+骨架图组件用于在数据加载过程中显示页面的基本结构，避免页面的突然变化，为用户提供更好的视觉体验。组件支持多种预设类型，也可以通过组合使用来构建复杂的骨架结构。
+
+---$
+
+### 代码演示
+
+JavaScript后面的演示代码中涉及到的变量和方法都使用本`javascript`代码
+
+```javascript
+import { ref, onMounted } from 'vue';
+const loading = ref(true);
+
+onMounted(() => {
+    setTimeout(() => {
+        loading.value = false;
+    }, 3000);
+});
+```
+
+#### 骨架类型
+
+通过`type`属性，设置骨架图类型
+
+##### 基础文本骨架
+
+最简单的文本内容骨架图用法
+
+```html
+<template>
+    <!-- 显示骨架图 -->
+    <ste-skeleton :loading="loading">
+        <ste-text>床前明月光，疑是地上霜。</ste-text>
+    </ste-skeleton>
+
+    <!-- 隐藏骨架图，显示真实内容 -->
+    <ste-skeleton :loading="false">
+        <ste-text>床前明月光，疑是地上霜。</ste-text>
+    </ste-skeleton>
+</template>
+```
+
+##### 图片骨架
+
+适用于矩形图片的骨架展示：
+
+```html
+<template>
+    <ste-skeleton :loading="loading" type="image">
+        <ste-image src="https://image.whzb.com/chain/StellarUI/图片.jpg" width="120" height="120" />
+    </ste-skeleton>
+</template>
+```
+
+##### 圆形头像骨架
+
+适用于圆形头像或图标的骨架展示：
+
+```html
+<template>
+    <ste-skeleton :loading="loading" type="circle">
+        <ste-image src="https://image.whzb.com/chain/StellarUI/图片.jpg" width="120" height="120" radius="50" />
+    </ste-skeleton>
+</template>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### 组件插槽(Slots)
+
+| 名称    | 说明     | 支持版本 |
+| ------- | -------- | -------- |
+| default | 默认插槽 | -        |
+
+---$
+
+{{qinpengfei}}

package/components/ste-skeleton/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "基础组件",
+    "title": "Skeleton 骨架屏",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/skeleton.png"
+}

package/components/ste-skeleton/props.ts

@@ -0,0 +1,7 @@
+import type { TypeSkeleton } from '../../types';
+import { type PropType } from 'vue';
+
+export default {
+    loading: { type: Boolean, default: true },
+    type: { type: String as PropType<TypeSkeleton>, default: 'text' },
+};

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

@@ -0,0 +1,38 @@
+{
+    "name": "ste-skeleton",
+    "description": "骨架屏组件",
+    "example": "<ste-skeleton></ste-skeleton>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui-plus&menu=%E7%BB%84%E4%BB%B6&active=ste-skeleton",
+    "attributes": [
+        {
+            "name": "loading",
+            "description": "是否显示骨架图",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "type",
+            "description": "骨架图类型",
+            "type": "string",
+            "values": [
+                {
+                    "name": "text",
+                    "description": "文本"
+                },
+                {
+                    "name": "image",
+                    "description": "图片"
+                },
+                {
+                    "name": "circle",
+                    "description": "圆形"
+                },
+                {
+                    "name": "button",
+                    "description": "按钮"
+                }
+            ],
+            "default": "text"
+        }
+    ]
+}

package/components/ste-skeleton/ste-skeleton.vue

@@ -0,0 +1,90 @@
+<template>
+    <view
+        class="ste-skeleton"
+        :class="[
+            {
+                'ste-skeleton--loading': loading,
+            },
+            `ste-skeleton--${type}`,
+        ]"
+    >
+        <template v-if="loading">
+            <ste-icon v-if="type == 'image'" :size="20" code="&#xe693;"></ste-icon>
+        </template>
+
+        <template v-else>
+            <slot></slot>
+        </template>
+    </view>
+</template>
+
+<script setup lang="ts">
+import propsData from './props';
+const componentName = `ste-skeleton`;
+
+defineOptions({
+    name: componentName,
+});
+const props = defineProps(propsData);
+</script>
+
+<style lang="scss" scoped>
+.ste-skeleton {
+    &.ste-skeleton--loading {
+        background-color: #fafafb;
+        border-radius: 8rpx;
+
+        &.ste-skeleton--text {
+            height: 32rpx;
+            width: 300rpx;
+            border-radius: 8rpx;
+        }
+
+        &.ste-skeleton--image {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: row;
+            width: 120rpx;
+            height: 120rpx;
+            border-radius: 16rpx;
+        }
+
+        &.ste-skeleton--circle {
+            border-radius: 50%;
+            width: 120rpx;
+            height: 120rpx;
+        }
+
+        &.ste-skeleton--button {
+            border-radius: 16rpx;
+            height: 64rpx;
+            width: 176rpx;
+        }
+    }
+}
+
+/* 定义骨架屏闪烁动画 */
+@keyframes skeleton-blink {
+    0% {
+        opacity: 0.3;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+/* 骨架屏基础样式与动画绑定 */
+.ste-skeleton--loading {
+    /* 对应 duration: 2000ms */
+    animation-duration: 2s;
+    /* 对应 loop: -1 (无限循环) */
+    animation-iteration-count: infinite;
+    /* 对应 alternate: true (交替方向) */
+    animation-direction: alternate;
+    /* 动画名称 */
+    animation-name: skeleton-blink;
+    /* 保证动画平滑过渡 */
+    animation-timing-function: ease-in-out;
+}
+</style>

package/components/ste-slide-verify/ATTRIBUTES.md

@@ -0,0 +1,27 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `modelValue` | 验证状态（支持 v-model 双向绑定） | `Boolean` | `false` | - | - |
+| `mode` | 验证模式，可选值为 slide / image | `String` | `slide` | - | - |
+| `size` | 轨道高度和滑块大小，默认单位 rpx | `Number/String` | `40` | - | - |
+| `disabled` | 是否禁用 | `Boolean` | `false` | - | - |
+| `imageUrl` | 图片旋转模式下的图片地址 | `String` | `` | - | - |
+| `imageSize` | 图片旋转模式下的图片尺寸，默认单位 rpx | `Number/String` | `150` | - | - |
+| `angleThreshold` | 图片旋转验证的角度容差 | `Number` | `10` | - | - |
+| `text` | 默认提示文案 | `String` | `` | - | - |
+| `successText` | 验证成功文案 | `String` | `验证成功` | - | - |
+| `showFail` | 失败时是否显示失败态 | `Boolean` | `true` | - | - |
+| `failText` | 失败提示文案 | `String` | `验证失败` | - | - |
+| `failDuration` | 失败态停留时长，单位 ms | `Number` | `800` | - | - |
+| `activeColor` | 拖动过程中的激活颜色 | `String` | `#0090FF` | - | - |
+| `inactiveColor` | 未激活背景色 | `String` | `#f3f4f6` | - | - |
+| `successColor` | 成功态颜色 | `String` | `#13ce66` | - | - |
+| `failColor` | 失败态颜色 | `String` | `#ee0a24` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `change` | 拖动过程中实时触发 | - | - |
+| `success` | 验证成功时触发 | - | - |
+| `fail` | 验证失败时触发 | - | - |