@puresnake/snake-ui 0.0.0-stage → 0.0.2

package/components/snake-notice-bar/types.ts

@@ -0,0 +1,82 @@
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+/** NoticeBarMode 类型定义。 */
+export type NoticeBarMode = 'horizontal' | 'vertical';
+/** NoticeBarDirection 类型定义。 */
+export type NoticeBarDirection = 'row' | 'column';
+/** NoticeBar 组件的公开属性。 */
+export interface NoticeBarProps {
+    /** 用于渲染的数据列表。 */
+    list?: string[];
+    /** 展示文本。 */
+    text?: string | string[];
+    /** 组件类型或展示模式。 */
+    type?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+    /** 组件展示模式。 */
+    mode?: NoticeBarMode;
+    /** 内容排列或滚动方向。 */
+    direction?: NoticeBarDirection;
+    /** 标准 v-model 可见性。未传入 show 时作为外部控制值。 */
+    modelValue?: boolean;
+    /** 是否显示组件。支持 v-model:show。 */
+    show?: boolean;
+    /** 是否自动播放。 */
+    autoplay?: boolean;
+    /** volume icon 配置。 */
+    volumeIcon?: boolean;
+    /** volume size 配置。 */
+    volumeSize?: UnitValue;
+    /** more icon 配置。 */
+    moreIcon?: boolean;
+    /** 关闭按钮图标名称。 */
+    closeIcon?: boolean;
+    /** 背景颜色。 */
+    bgColor?: string;
+    /** 内容颜色。 */
+    color?: string;
+    /** 文字尺寸，数值按 rpx 处理。 */
+    fontSize?: UnitValue;
+    /** 动画持续时间。 */
+    duration?: number;
+    /** speed 配置。 */
+    speed?: number;
+    /** is circular 配置。 */
+    isCircular?: boolean;
+    /** play state 配置。 */
+    playState?: 'play' | 'paused';
+    /** disable touch 配置。 */
+    disableTouch?: boolean;
+    /** 圆角尺寸。 */
+    borderRadius?: UnitValue;
+    /** padding 配置。 */
+    padding?: string;
+    /** no list hidden 配置。 */
+    noListHidden?: boolean;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+/** NoticeBar 组件的事件契约。 */
+export type NoticeBarEmits = {
+    /** 标准 v-model 更新。 */
+    'update:modelValue': [value: boolean];
+    /** show 双向绑定更新。 */
+    'update:show': [value: boolean];
+    /** click 事件携带的参数。 */
+    click: [index: number];
+    /** change 事件携带的参数。 */
+    change: [index: number];
+    /** close 事件携带的参数。 */
+    close: [];
+    /** getMore 事件携带的参数。 */
+    getMore: [];
+    /** 一次非循环播放完成，或纵向轮播完成一整轮时触发。 */
+    end: [];
+};
+
+/** NoticeBar 组件实例公开的方法。 */
+export interface NoticeBarExpose {
+    /** 从第一条消息重新开始播放并重新测量尺寸。 */
+    reset(): void;
+}

package/components/snake-overlay/snake-overlay.vue

@@ -0,0 +1,73 @@
+<template>
+    <snake-transition
+        :show="visible"
+        name="fade"
+        :duration="duration"
+        :custom-class="['snake-overlay', customClass].filter(Boolean).join(' ')"
+        :custom-style="overlayStyle"
+        @click="click"
+        @after-enter="emit('opened')"
+        @after-leave="emit('closed')"
+        @touchmove.stop.prevent="lockScroll ? stopTouchMove() : undefined"
+    >
+        <slot />
+    </snake-transition>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Overlay
+ * @description 带完整淡入淡出动画的全屏遮罩，可锁定遮罩区域滚动并承载自定义内容。
+ * @see /components/overlay
+ */
+
+import { computed, getCurrentInstance } from 'vue';
+import zIndex from '../../libs/config/zIndex';
+import Transition from '../snake-transition/snake-transition.vue';
+import type { OverlayEmits, OverlayProps } from './types';
+
+defineOptions({ name: 'Overlay', options: { virtualHost: true, styleIsolation: 'shared' } });
+
+const props = withDefaults(defineProps<OverlayProps>(), {
+    modelValue: false,
+    opacity: 0.5,
+    zIndex: zIndex.mask,
+    duration: 300,
+    lockScroll: true,
+    customClass: '',
+    customStyle: ''
+});
+const emit = defineEmits<OverlayEmits>();
+// 与 snake-popup 同理：未绑定 show 时 Boolean casting 会让 `??` 失效，需检测实际绑定来源。
+const showBound = 'show' in (getCurrentInstance()?.vnode?.props ?? {});
+const visible = computed(() => (showBound ? props.show : props.modelValue));
+// 层级：z-index 全权交给行内样式——显示时取 mask 档、隐藏时 -1，
+// 传入值非法（undefined/NaN 会被小程序当作非法声明丢弃）时由 || 退回 mask 档
+const overlayStyle = computed(() => [
+    {
+        backgroundColor: `rgba(0, 0, 0, ${Math.min(1, Math.max(0, props.opacity))})`,
+        zIndex: visible.value ? props.zIndex || zIndex.mask : -1
+    },
+    props.customStyle
+]);
+
+function click(event: unknown) {
+    emit('click', event);
+    emit('update:modelValue', false);
+    emit('update:show', false);
+}
+
+function stopTouchMove() {
+    // uni-app 通过空处理器阻止遮罩上的 touchmove 冒泡。
+}
+</script>
+
+<style>
+.snake-overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+</style>

package/components/snake-overlay/types.ts

@@ -0,0 +1,35 @@
+import type { StyleValue } from '../../types/global';
+
+/** Overlay 组件的公开属性。 */
+export interface OverlayProps {
+    /** 双向绑定的当前值。 */
+    modelValue?: boolean;
+    /** 是否显示组件。 */
+    show?: boolean;
+    /** opacity 配置。 */
+    opacity?: number;
+    /** 组件层级。 */
+    zIndex?: number;
+    /** 动画持续时间。 */
+    duration?: number;
+    /** lock scroll 配置。 */
+    lockScroll?: boolean;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+
+/** Overlay 组件的事件契约。 */
+export type OverlayEmits = {
+    /** update:modelValue 事件携带的参数。 */
+    'update:modelValue': [value: boolean];
+    /** update:show 事件携带的参数。 */
+    'update:show': [value: boolean];
+    /** click 事件携带的参数。 */
+    click: [event: unknown];
+    /** opened 事件携带的参数。 */
+    opened: [];
+    /** closed 事件携带的参数。 */
+    closed: [];
+};

package/components/snake-page-popup/snake-page-popup.vue

@@ -0,0 +1,146 @@
+<template>
+    <view class="page-popup">
+        <snake-popup
+            v-model="show"
+            border-radius="10rpx"
+            :mode="datas.popupMode"
+            :bg-color="datas.popupMode === 'bottom' ? 'var(--snake-color-surface, #fff)' : 'transparent'"
+        >
+            <view class="popup-container">
+                <view :class="[`page-popup-popup page-popup-popup--${datas.popupMode}`]">
+                    <view
+                        :class="[`close close--${datas.popupMode}`]"
+                        @click.stop="show = false"
+                        v-if="datas.popupMode === 'bottom'"
+                    >
+                        <snake-icon name="close" color="var(--snake-color-text, #26273a)" size="18"></snake-icon>
+                    </view>
+                    <image
+                        class="page-popup-img"
+                        mode="aspectFill"
+                        :src="datas.image"
+                        @click.stop="handleToPage"
+                    ></image>
+                </view>
+                <view
+                    :class="[`close close--${datas.popupMode}`]"
+                    @click.stop="show = false"
+                    v-if="datas.popupMode === 'center'"
+                >
+                    <snake-icon name="close-circle-fill" color="#fff" size="28"></snake-icon>
+                </view>
+            </view>
+        </snake-popup>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component PagePopup
+ * @description 页面进入后立即展示居中或底部图片弹窗，并支持图片跳转。
+ */
+
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import type { PagePopupProps } from './types';
+
+defineOptions({ name: 'PagePopup', options: { virtualHost: true, styleIsolation: 'shared' } });
+
+const props = withDefaults(defineProps<PagePopupProps>(), {
+    datas: () => ({}),
+    autoOpen: true
+});
+const show = ref(props.autoOpen);
+
+watch(show, visible => {
+    if (props.datas.popupMode !== 'bottom') return;
+    if (visible) {
+        uni.hideTabBar({ animation: true });
+    } else {
+        uni.$snake.sleep(300).then(() => {
+            if (!show.value || props.datas.popupMode !== 'bottom') uni.showTabBar({ animation: true });
+        });
+    }
+});
+
+watch(
+    () => props.datas.popupMode,
+    (mode, previousMode) => {
+        if (!show.value) return;
+        if (mode === 'bottom') uni.hideTabBar({ animation: true });
+        else if (previousMode === 'bottom') uni.showTabBar({ animation: true });
+    }
+);
+
+onMounted(() => {
+    if (show.value && props.datas.popupMode === 'bottom') {
+        uni.hideTabBar({ animation: true });
+    }
+});
+
+onBeforeUnmount(() => {
+    if (show.value && props.datas.popupMode === 'bottom') uni.showTabBar({ animation: true });
+});
+
+function open() {
+    show.value = true;
+}
+
+function close() {
+    show.value = false;
+}
+
+defineExpose({ open, close });
+
+function handleToPage() {
+    if (props.datas.url) uni.$snake.navTo(props.datas.url);
+}
+</script>
+
+<style lang="scss" scoped>
+.page-popup {
+    width: 100%;
+    height: 100%;
+}
+
+.popup-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .page-popup-popup {
+        box-sizing: border-box;
+        width: 100%;
+        height: 572rpx;
+
+        &--center {
+            width: 540rpx;
+            height: 740rpx;
+
+            .page-popup-img {
+                height: 740rpx !important;
+            }
+        }
+
+        .page-popup-img {
+            display: block;
+            width: 100%;
+            height: 524rpx;
+            border-radius: 6rpx;
+        }
+    }
+
+    .close {
+        display: flex;
+        justify-content: flex-end;
+        padding-top: 16rpx;
+        padding-right: 16rpx;
+
+        &--center {
+            position: absolute;
+            bottom: -100rpx;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+}
+</style>

package/components/snake-page-popup/types.ts

@@ -0,0 +1,28 @@
+/** PagePopupMode 类型定义。 */
+export type PagePopupMode = 'bottom' | 'center';
+
+/** PagePopup 配置数据。 */
+export interface PagePopupData {
+    /** popup mode 配置。 */
+    popupMode?: PagePopupMode;
+    /** 图片地址。 */
+    image?: string;
+    /** 点击后跳转地址。 */
+    url?: string;
+}
+
+/** PagePopup 组件的公开属性。 */
+export interface PagePopupProps {
+    /** CMS 装修组件配置数据。 */
+    datas?: PagePopupData;
+    /** 组件挂载后是否立即打开弹窗。 */
+    autoOpen?: boolean;
+}
+
+/** PagePopup 实例公开的操作。 */
+export interface PagePopupExpose {
+    /** 打开弹窗。 */
+    open(): void;
+    /** 关闭弹窗。 */
+    close(): void;
+}

package/components/snake-parse/audio/audio.vue

@@ -0,0 +1,286 @@
+<template>
+    <view v-if="controls" @click="onClick" class="_contain">
+        <!-- 海报和按钮 -->
+        <view class="_poster" :style="'background-image:url(' + poster + ')'">
+            <view class="_button" @tap="_buttonTap">
+                <view :class="playing ? '_pause' : '_play'" />
+            </view>
+        </view>
+        <!-- 曲名和作者 -->
+        <view class="_title">
+            <view class="_name">{{ name || '未知音频' }}</view>
+            <view class="_author">{{ author || '未知作者' }}</view>
+        </view>
+        <!-- 进度条 -->
+        <slider
+            class="_slider"
+            activeColor="#585959"
+            block-size="12"
+            handle-size="12"
+            :disabled="error"
+            :value="value"
+            @changing="_seeking"
+            @change="_seeked"
+        />
+        <!--播放时间-->
+        <view class="_time">{{ time || '00:00' }}</view>
+    </view>
+</template>
+
+<script>
+/**
+ * @fileoverview audio 组件
+ */
+import context from './context';
+export default {
+    data() {
+        return {
+            error: false,
+            playing: false,
+            time: '00:00',
+            value: 0
+        };
+    },
+    props: {
+        aid: String,
+        name: String, // 音乐名
+        author: String, // 作者
+        poster: String, // 海报图片地址
+        autoplay: [Boolean, String], // 是否自动播放
+        controls: [Boolean, String], // 是否显示控件
+        loop: [Boolean, String], // 是否循环播放
+        src: String // 源地址
+    },
+    watch: {
+        src(src) {
+            this.setSrc(src);
+        }
+    },
+    mounted() {
+        this._ctx = uni.createInnerAudioContext();
+        this._ctx.onError(err => {
+            this.error = true;
+            this.$emit('error', err);
+        });
+        this._ctx.onTimeUpdate(() => {
+            const time = this._ctx.currentTime;
+            const min = parseInt(time / 60);
+            const sec = Math.ceil(time % 60);
+            this.time = (min > 9 ? min : '0' + min) + ':' + (sec > 9 ? sec : '0' + sec);
+            if (!this.lastTime) {
+                this.value = (time / this._ctx.duration) * 100; // 不在拖动状态下
+            }
+        });
+        this._ctx.onEnded(() => {
+            if (!this.loop) {
+                this.playing = false;
+            }
+        });
+        context.set(this.aid, this);
+        this.setSrc(this.src);
+    },
+    // #ifdef VUE2
+    beforeDestroy() {
+        this._ctx.destroy();
+        context.remove(this.aid);
+    },
+    // #endif
+    // #ifdef VUE3
+    beforeUnmount() {
+        this._ctx.destroy();
+        context.remove(this.aid);
+    },
+    // #endif
+    onPageShow() {
+        if (this.playing && this._ctx.paused) {
+            this._ctx.play();
+        }
+    },
+    methods: {
+        // 设置源
+        setSrc(src) {
+            this._ctx.autoplay = this.autoplay;
+            this._ctx.loop = this.loop;
+            this._ctx.src = src;
+            if (this.autoplay && !this.playing) {
+                this.playing = true;
+            }
+        },
+        // 播放
+        play() {
+            this._ctx.play();
+            this.playing = true;
+            this.$emit('play', {
+                target: {
+                    id: this.aid
+                }
+            });
+        },
+        // 暂停
+        pause() {
+            this._ctx.pause();
+            this.playing = false;
+            this.$emit('pause');
+        },
+        // 设置播放速率
+        playbackRate(rate) {
+            this._ctx.playbackRate = rate;
+        },
+        // 移动进度条
+        seek(sec) {
+            this._ctx.seek(sec);
+        },
+        // 内部方法
+        _buttonTap() {
+            if (this.playing) this.pause();
+            else this.play();
+        },
+        _seeking(e) {
+            // 避免过于频繁 setData
+            if (e.timeStamp - this.lastTime < 200) return;
+            const time = Math.round((e.detail.value / 100) * this._ctx.duration);
+            const min = parseInt(time / 60);
+            const sec = time % 60;
+            this.time = (min > 9 ? min : '0' + min) + ':' + (sec > 9 ? sec : '0' + sec);
+            this.lastTime = e.timeStamp;
+        },
+        _seeked(e) {
+            this.seek((e.detail.value / 100) * this._ctx.duration);
+            this.lastTime = undefined;
+        },
+        onClick(e) {
+            this.$emit('onClick', e);
+        }
+    }
+};
+</script>
+
+<style>
+/* 顶层容器 */
+._contain {
+    position: relative;
+    display: inline-flex;
+    width: 290px;
+    background-color: #fcfcfc;
+    border: 1px solid #e0e0e0;
+    border-radius: 2px;
+}
+
+/* 播放、暂停按钮 */
+._button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    overflow: hidden;
+    background-color: rgb(0, 0, 0, 0.2);
+    border: 1px solid white;
+    border-radius: 50%;
+    opacity: 0.9;
+}
+
+._play {
+    margin-left: 2px;
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    border-left: 8px solid white;
+}
+
+._pause {
+    width: 8px;
+    height: 8px;
+    background-color: white;
+}
+
+/* 海报 */
+._poster {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 70px;
+    height: 70px;
+    background-color: #e6e6e6;
+    background-size: contain;
+}
+
+/* 标题栏 */
+._title {
+    flex: 1;
+    margin: 4px 0 0 14px;
+    text-align: left;
+}
+
+._author {
+    width: 45px;
+    font-size: 12px;
+    color: #888;
+}
+
+._name {
+    width: 140px;
+    font-size: 15px;
+    line-height: 39px;
+}
+
+._author,
+._name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* 进度条 */
+._slider {
+    position: absolute;
+    right: 16px;
+    bottom: 8px;
+    width: 140px;
+    margin: 0;
+}
+
+/* 播放时间 */
+._time {
+    margin: 7px 14px 0 0;
+    font-size: 12px;
+    color: #888;
+}
+
+/* 响应式布局，大屏幕用更大的尺寸 */
+@media (min-width: 400px) {
+    ._contain {
+        width: 380px;
+    }
+
+    ._button {
+        width: 26px;
+        height: 26px;
+    }
+
+    ._poster {
+        width: 90px;
+        height: 90px;
+    }
+
+    ._author {
+        width: 60px;
+        font-size: 15px;
+    }
+
+    ._name {
+        width: 180px;
+        font-size: 19px;
+        line-height: 55px;
+    }
+
+    ._slider {
+        right: 20px;
+        bottom: 10px;
+        width: 180px;
+    }
+
+    ._time {
+        font-size: 15px;
+    }
+}
+</style>

package/components/snake-parse/audio/context.js

@@ -0,0 +1,11 @@
+const ctx = {};
+
+export default {
+    get: id => ctx[id],
+    set: (id, vm) => {
+        ctx[id] = vm;
+    },
+    remove: id => {
+        ctx[id] = undefined;
+    }
+};

package/components/snake-parse/audio/index.js

@@ -0,0 +1,34 @@
+/**
+ * @fileoverview audio 插件
+ */
+import context from './context';
+let index = 0;
+
+function Audio(vm) {
+    this.vm = vm;
+}
+
+Audio.prototype.onUpdate = function () {
+    this.audios = [];
+};
+
+Audio.prototype.onParse = function (node) {
+    if (node.name === 'audio') {
+        if (!node.attrs.id) {
+            node.attrs.id = 'a' + index++;
+        }
+        this.audios.push(node.attrs.id);
+    }
+};
+
+Audio.prototype.onLoad = function () {
+    setTimeout(() => {
+        for (let i = 0; i < this.audios.length; i++) {
+            const ctx = context.get(this.audios[i]);
+            ctx.id = this.audios[i];
+            this.vm._videos.push(ctx);
+        }
+    }, 500);
+};
+
+export default Audio;