@puresnake/snake-ui 0.0.0-stage → 0.0.1

package/components/snake-navbar/types.ts

@@ -0,0 +1,54 @@
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+
+/** Navbar 组件的公开属性。 */
+export interface NavbarProps {
+    /** 标题文本。 */
+    title?: string;
+    /** 组件高度。 */
+    height?: UnitValue;
+    /** back icon color 配置。 */
+    backIconColor?: string;
+    /** back icon name 配置。 */
+    backIconName?: string;
+    /** back icon size 配置。 */
+    backIconSize?: UnitValue;
+    /** back text 配置。 */
+    backText?: string;
+    /** back text style 配置。 */
+    backTextStyle?: StyleValue;
+    /** title width 配置。 */
+    titleWidth?: UnitValue;
+    /** title color 配置。 */
+    titleColor?: string;
+    /** 标题文字尺寸，数值按 rpx 处理。 */
+    titleSize?: UnitValue;
+    /** title bold 配置。 */
+    titleBold?: boolean;
+    /** is back 配置。 */
+    isBack?: boolean;
+    /** background 配置。 */
+    background?: StyleValue;
+    /** 是否使用固定定位。 */
+    fixed?: boolean;
+    /** immersive 配置。 */
+    immersive?: boolean;
+    /** 是否适配顶部安全区域。 */
+    safeAreaInsetTop?: boolean;
+    /** 是否显示底部边框。 */
+    borderBottom?: boolean;
+    /** 组件层级。 */
+    zIndex?: UnitValue;
+    /** custom back 配置。 */
+    customBack?: (() => void) | null;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+
+/** Navbar 组件的事件契约。 */
+export type NavbarEmits = {
+    /** back 事件携带的参数。 */
+    back: [event: unknown];
+};

package/components/snake-no-network/snake-no-network.vue

@@ -0,0 +1,125 @@
+<template>
+    <view
+        v-if="!isConnected"
+        class="snake-no-network"
+        :style="{ zIndex: layerZIndex }"
+        @touchmove.stop.prevent="() => {}"
+    >
+        <view class="snake-no-network__inner">
+            <image class="snake-no-network__icon" :src="image || imageSrc" mode="widthFix" />
+            <view class="snake-no-network__tips">{{ tipsValue }}</view>
+            <view
+                class="snake-no-network__retry"
+                :hover-stay-time="150"
+                hover-class="snake-no-network__retry--hover"
+                @click="retry"
+            >
+                {{ t('retry') }}
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component NoNetwork
+ * @description 无网络提示，引入即用，自动监听网络状态，断网时全屏展示提示并支持重试。
+ * @see /components/no-network
+ */
+
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import zIndex from '../../libs/config/zIndex';
+import { useLocale } from '../../libs/hooks/useLocale';
+import { noNetworkProps, type NoNetworkEmits, type NoNetworkExpose } from './types';
+
+// 断网提示配图（内联 base64，保持组件目录仅两个文件）
+const imageSrc =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEYCAMAAABFglBLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0U3MjVFMzQwNEY1MTFFQUE4MTNDOUEzMTVBREMxQjIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0U3MjVFMzUwNEY1MTFFQUE4MTNDOUEzMTVBREMxQjIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozRTcyNUUzMjA0RjUxMUVBQTgxM0M5QTMxNUFEQzFCMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozRTcyNUUzMzA0RjUxMUVBQTgxM0M5QTMxNUFEQzFCMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkHIU9QAAAMAUExURdHW2OWiou7u7tve4dnc3/vw8N3g4sPCwvjn5+jo6M7Q0u6+vtyEhPXY2Li+wuikpPXW1uXo6dba3Pbg4Na5u+qurqqyt/HJydjb3fjo6LrAxO7Bwey1td6MjOrs7fbc3OTn6Maytf7+/vz19eqqqrzCxvzz87a8wLO6vuqxsf78/PDFxenr7L/FyNTY26+2u/z09MjMzqy0udnZ2dvb27G4vMjN0O7v8P339+Ll5u3v8NDS1ODj5frt7bC3vP76+u24uOKamtTW2MTIy9zc3N7e3vPQ0OCTk8DGyfDDw9LR0c7S1LussNbY2fPOztLU1cLHyrK6vvji4vrv78bKzPX29/np6crP0vjk5Ozu78bLzuepqczR1MHFyMDEyOq1tfTS0vP09cLIy9DU173Ex8bGxvHy88/U18vO0LK4vM7OzsTKzcPJzPLMzM/T1sbMz8HJy+7FxbW8wNTW18XKzvb3+MjLzczP0d3e3+Dh4r3Dxtna29zd3rK5vdPU1cfM0Prq6uOenuPm58HGyfHz8/ro6Lq/w8nO0bzCxcrKytjZ2uXm5vTU1LvBxbW7v+rp6eefn/39/eLi4u3t7Ozs7Pj4+Pr6+vX19fHx8erq6vPz8+Xl5ff39+fn5/v7+/z8/PLx8fX09Pb29ri4uOTk5PHw8OPj4/Py8ubm5vn5+e3s7Pb19fTz8/f29tfX1+7t7cvQ0+zr6/Ly8u3t7fr5+efm5quzuOvq6vT19uvr6/j5+a61uuy6uvb39/T09Ojn5+jq6621uvn6+t/i5KyzuPn4+Le+wvv6+s3S1fj4+fDw8OHk5vv7/Pr7++Xk5LS7v7y8vObl5fz9/ff4+OTj48DEx8XJy+Hk5euysu/x8re9wfn5+v38/Pv8/Pr6++vt7uLi4+Pi4ubl5uXk5dPV1tbV1fHMzNPX2e7u7ejn6PT19fX19PDw7/b29f39/vnr6+Hh4a+3u+7t7q61uePi48PHyf35+enp6fLz9PPz8qmxtuDg4N/f3/Dv7////////1cfN/UAAAEAdFJOU////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wBT9wclAAAlqElEQVR42uydCXwUVZrAk5CEJBAQshACCGyjIRwBJR0It6JBGZZBkRtm5PBgFXAXHBghqAMz6LjGTrd9n7lvwn0JQhARxYNxVJTMwcwOM+7uzK6Z3VXcrnTXVr2q6q7urrvfq26c+n4egXTSVfXv993veym4JkklKdoj0IBoogHRgGiiAdGAaKIB0YBoogHRgGiiAdFEA6IBUVuwx+vqet/v1YAkhxwmcNT9gvjnsAYkGcT7eN1TtThe+1TdL2o1IEkg+rrvUV90MF9oQBIqv6ijF4a3d51XA5J4jVVXx3z587ojGpDEm/QwkO9pQJJB2CvksAYk8fJUXT31xZG63ppRTwI5QgcgR35Rd1MDkgxSX1f31P33P1V3i3u936HUyc3edWSsjuEakKRRW3r9kVv+JrRsrwbklpKTnXs+z0wfONOtAUm8rJu55oqfkZ0TOzUgCZS3Zh7s54+S5RqQhNGYMsnPISkakCSiQcjkNzUgasvUDaVsBF1fb9GXd//B0ziliPzjEA2IujLqGRaMST+cawgLNpn4q30aEDV1Va+dYRqzNy00RMoYUmdpQNTzcb8sCtuKH8w9Z4iWLuIbVzQgapmOBedDOO6c0WjgENK2vKwBUUUmvBSiUbrqxwZuOU18d5MGhEe/dI6a2WvIxA0HX1hfvH7V8gUpA9Mz3x/VuVTRLxvwdAhH5aJjBj4hv39QAxIl743ITHm6azBPnOCfVLwlc6pR3upYFbLjvIuDlEUqRYZo38JYS4gVt5rNZhMQO46byksoMeG4w8QIjtvMpJA/wP1EdZ0bKvkitkh555mBA3zSLnBlSFnNnlJvEJJ95ItW3pJAamvtZhy3m/T0g7fhthJGiG+EviYgmEJ/wHFP6GsbnlZSoicoucxmGwHVguPTBz543C9LHky/Jnql1w5KxWGo8KsThsAFYneYMOb5mlnP11ZCrwOPjfgGI8RqsZuZtUOsFmbllFhZP+zEbc8vGcqzMibv7qos3rd7Mg+TrQv2vCVkiLYc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';
+
+defineOptions({ name: 'NoNetwork', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = defineProps(noNetworkProps);
+const emit = defineEmits<NoNetworkEmits>();
+const { t } = useLocale('noNetwork');
+
+const tipsValue = computed(() => props.tips || t('tips'));
+// 是否有网络连接
+const isConnected = ref(true);
+// 网络类型
+const networkType = ref<string>('none');
+// 优先使用 props，否则取 zIndex.noNetwork
+const layerZIndex = computed(() => Number(props.zIndex) || zIndex.noNetwork);
+
+function onNetworkStatusChange(res: { isConnected: boolean; networkType: string }) {
+    isConnected.value = res.isConnected;
+    networkType.value = res.networkType;
+}
+
+onMounted(() => {
+    uni.onNetworkStatusChange(onNetworkStatusChange);
+    uni.getNetworkType({
+        success: res => {
+            networkType.value = res.networkType;
+            isConnected.value = res.networkType !== 'none';
+        }
+    });
+});
+onBeforeUnmount(() => uni.offNetworkStatusChange(onNetworkStatusChange));
+
+/** 重新检查网络并发出 retry 事件。 */
+function retry() {
+    uni.getNetworkType({
+        success: res => {
+            networkType.value = res.networkType;
+            if (res.networkType === 'none') {
+                uni.showToast({ title: t('noConnection'), icon: 'none', position: 'top' });
+                isConnected.value = false;
+            } else {
+                uni.showToast({ title: t('connected'), icon: 'none', position: 'top' });
+                isConnected.value = true;
+            }
+        }
+    });
+    emit('retry');
+}
+
+defineExpose<NoNetworkExpose>({ retry });
+</script>
+
+<style scoped>
+.snake-no-network {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--snake-color-surface, #fff);
+}
+.snake-no-network__inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin-top: -15%;
+}
+.snake-no-network__tips {
+    padding: 30rpx 0;
+    font-size: 28rpx;
+    color: var(--snake-color-text-muted, #909399);
+}
+.snake-no-network__icon {
+    width: 300rpx;
+}
+.snake-no-network__retry {
+    margin-top: 30rpx;
+    padding: 6rpx 30rpx;
+    font-size: 28rpx;
+    color: var(--snake-color-text-muted, #909399);
+    border: 1px solid var(--snake-color-text-muted, #909399);
+    border-radius: 3px;
+}
+.snake-no-network__retry--hover {
+    color: var(--snake-color-white, #fff);
+    background-color: var(--snake-color-text-muted, #909399);
+}
+</style>

package/components/snake-no-network/types.ts

@@ -0,0 +1,27 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import zIndex from '../../libs/config/zIndex';
+
+/** noNetworkProps 运行时属性及默认值。 */
+export const noNetworkProps = {
+    /** 没有网络时的提示语。 */
+    tips: { type: String, default: '' },
+    /** 组件的层级值。 */
+    zIndex: { type: [Number, String] as PropType<number | string>, default: zIndex.noNetwork },
+    /** 无网络的图片提示，可用的图片地址或 base64 图片。 */
+    image: { type: String, default: '' }
+} as const;
+
+/** NoNetwork 组件的公开属性。 */
+export type NoNetworkProps = ExtractPropTypes<typeof noNetworkProps>;
+
+/** NoNetwork 组件的事件契约。 */
+export type NoNetworkEmits = {
+    /** 用户点击重试按钮时触发。 */
+    retry: [];
+};
+
+/** NoNetwork 组件实例公开的方法。 */
+export interface NoNetworkExpose {
+    /** 重新检查网络并发出 retry 事件。 */
+    retry(): void;
+}

package/components/snake-notice/snake-notice.vue

@@ -0,0 +1,44 @@
+<template>
+    <view>
+        <snake-notice-bar
+            :volume-icon="datas.isLeftIcon ? true : false"
+            :list="noticeList"
+            :bg-color="datas.backColor"
+            :mode="datas.direction === 'row' ? 'horizontal' : 'vertical'"
+            :color="datas.textColor"
+            :custom-style="{
+                height: (datas.height || 72) + 'rpx',
+                lineHeight: (datas.height || 72) + 'rpx',
+                padding: `0 ${datas.pageMargin}rpx`
+            }"
+            @click="handleNotice"
+        />
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Notice
+ * @description 使用 Snake UI NoticeBar 展示单条横向公告或多条纵向轮播公告。
+ */
+
+import { computed } from 'vue';
+import { navTo } from '../../libs/function/route';
+import type { NoticeProps } from './types';
+
+defineOptions({ name: 'Notice', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = withDefaults(defineProps<NoticeProps>(), { datas: () => ({}) });
+const noticeList = computed(() => {
+    if (props.datas.direction === 'row') {
+        return Array.isArray(props.datas.noticeText) ? props.datas.noticeText : [props.datas.noticeText || ''];
+    }
+    return Array.isArray(props.datas.textList) ? props.datas.textList.map(item => item.text || '') : [];
+});
+
+function handleNotice(index: number) {
+    const url = props.datas.direction === 'row' ? props.datas.url : props.datas.textList?.[index]?.url;
+    if (url) navTo(url);
+}
+</script>
+
+<style></style>

package/components/snake-notice/types.ts

@@ -0,0 +1,5 @@
+/** Notice 组件的公开属性。 */
+export interface NoticeProps<Data extends Record<string, any> = Record<string, any>> {
+    /** CMS 装修组件配置数据。 */
+    datas?: Data;
+}

package/components/snake-notice-bar/snake-notice-bar.vue

@@ -0,0 +1,336 @@
+<template>
+    <view
+        v-if="visible"
+        class="snake-notice-bar"
+        :class="customClass"
+        :style="rootStyle"
+        @click="emit('click', current)"
+    >
+        <snake-icon v-if="volumeIcon" class="snake-notice-bar__leading" name="volume" :size="volumeSize ?? 'inherit'" />
+        <swiper
+            v-if="vertical"
+            class="snake-notice-bar__swiper"
+            vertical
+            circular
+            :autoplay="playing"
+            :interval="duration"
+            :duration="300"
+            :disable-touch="disableTouch"
+            @change="change"
+        >
+            <swiper-item v-for="(item, index) in items" :key="`${item}-${index}`" class="snake-notice-bar__item">
+                <text class="snake-notice-bar__text">{{ item }}</text>
+            </swiper-item>
+        </swiper>
+        <view v-else class="snake-notice-bar__marquee">
+            <view
+                :key="marqueeKey"
+                class="snake-notice-bar__marquee-track"
+                :class="{
+                    'is-playing': playing && (isCircular ? hasMarqueeDimensions : canScroll),
+                    'is-circular': isCircular
+                }"
+                :style="marqueeStyle"
+                @animationend="marqueeEnd"
+            >
+                <view class="snake-notice-bar__marquee-primary">{{ marqueeText }}</view>
+            </view>
+            <view class="snake-notice-bar__marquee-measure">{{ marqueeText }}</view>
+        </view>
+        <snake-icon v-if="moreIcon" class="snake-notice-bar__trailing" name="right" @click="more" />
+        <snake-icon v-if="closeIcon" class="snake-notice-bar__trailing" name="close" @click="close" />
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component NoticeBar
+ * @description 用于公告、活动提示和多条消息轮播，支持横向跑马灯、纵向轮播、关闭与更多操作。
+ * @see /components/notice-bar
+ */
+
+import {
+    computed,
+    getCurrentInstance,
+    nextTick,
+    onActivated,
+    onBeforeUnmount,
+    onDeactivated,
+    onMounted,
+    ref,
+    watch
+} from 'vue';
+import { onPageHide, onPageShow } from '@dcloudio/uni-app';
+import { addUnit } from '../../libs/function/unit';
+import snakeIcon from '../snake-icon/snake-icon.vue';
+import type { NoticeBarEmits, NoticeBarProps } from './types';
+
+defineOptions({ name: 'NoticeBar', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = withDefaults(defineProps<NoticeBarProps>(), {
+    list: () => [],
+    text: '',
+    type: 'warning',
+    mode: 'horizontal',
+    direction: 'row',
+    modelValue: undefined,
+    show: undefined,
+    autoplay: true,
+    volumeIcon: false,
+    volumeSize: 34,
+    moreIcon: false,
+    closeIcon: false,
+    bgColor: '',
+    color: '',
+    fontSize: 28,
+    duration: 3000,
+    speed: 80,
+    isCircular: true,
+    playState: 'play',
+    disableTouch: true,
+    borderRadius: 0,
+    padding: '18rpx 24rpx',
+    noListHidden: true,
+    customClass: '',
+    customStyle: ''
+});
+const emit = defineEmits<NoticeBarEmits>();
+const instance = getCurrentInstance();
+const vnodeProps = instance?.vnode.props ?? {};
+const showBound = 'show' in vnodeProps;
+const modelValueBound = 'modelValue' in vnodeProps;
+const current = ref(0);
+const lastVerticalIndex = ref(0);
+const localShow = ref(true);
+const pageActive = ref(true);
+const marqueeKey = ref(0);
+const marqueeWidth = ref(0);
+const contentWidth = ref(0);
+let staticItemTimer: ReturnType<typeof setTimeout> | undefined;
+let measurementId = 0;
+
+const items = computed(() =>
+    props.list.length ? props.list : Array.isArray(props.text) ? props.text : [props.text].filter(Boolean)
+);
+const vertical = computed(() => props.mode === 'vertical' || props.direction === 'column');
+const externalShow = computed(() => (showBound ? props.show : modelValueBound ? props.modelValue : undefined));
+const visible = computed(() => localShow.value && (!props.noListHidden || items.value.length > 0));
+const playing = computed(() => visible.value && pageActive.value && props.autoplay && props.playState === 'play');
+const currentText = computed(() => items.value[current.value] ?? '');
+const marqueeText = computed(() => (props.isCircular ? items.value.join('    ') : currentText.value));
+const canScroll = computed(() => marqueeWidth.value > 0 && contentWidth.value > marqueeWidth.value);
+const hasMarqueeDimensions = computed(() => marqueeWidth.value > 0 && contentWidth.value > 0);
+const speedInPixels = computed(() => {
+    const speed = Math.max(1, Number(props.speed) || 1);
+    return typeof uni === 'undefined' ? speed / 2 : Math.max(1, uni.upx2px(speed));
+});
+const marqueeDuration = computed(() => {
+    const distance = marqueeWidth.value + contentWidth.value;
+    return `${Math.max(0.5, distance / speedInPixels.value)}s`;
+});
+const themeColor = computed(
+    () => props.color || `var(--snake-color-${props.type}, var(--snake-color-notice, #FF9900))`
+);
+const themeBg = computed(
+    () => props.bgColor || `var(--snake-color-${props.type}-light, var(--snake-color-notice-background, #fff8e6))`
+);
+const rootStyle = computed(() => [
+    {
+        color: themeColor.value,
+        backgroundColor: themeBg.value,
+        fontSize: addUnit(props.fontSize, 'rpx'),
+        borderRadius: addUnit(props.borderRadius, 'rpx'),
+        padding: props.padding
+    },
+    props.customStyle
+]);
+const marqueeStyle = computed(() => ({
+    animationDuration: marqueeDuration.value,
+    paddingLeft: !props.isCircular && canScroll.value ? `${marqueeWidth.value}px` : undefined,
+    '--snake-notice-marquee-width': `${marqueeWidth.value}px`,
+    '--snake-notice-content-width': `${contentWidth.value}px`
+}));
+
+function clearStaticItemTimer() {
+    if (staticItemTimer) clearTimeout(staticItemTimer);
+    staticItemTimer = undefined;
+}
+function measure() {
+    if (vertical.value || !visible.value || typeof uni === 'undefined') return;
+    const id = ++measurementId;
+    nextTick(() => {
+        const query = uni.createSelectorQuery().in(instance?.proxy as any);
+        query.select('.snake-notice-bar__marquee').boundingClientRect();
+        query.select('.snake-notice-bar__marquee-primary').boundingClientRect();
+        query.select('.snake-notice-bar__marquee-measure').boundingClientRect();
+        query.exec(result => {
+            if (id !== measurementId) return;
+            const wrap = result?.[0] as UniApp.NodeInfo | undefined;
+            const content = result?.[1] as UniApp.NodeInfo | undefined;
+            const measureText = result?.[2] as UniApp.NodeInfo | undefined;
+            marqueeWidth.value = Number(wrap?.width) || 0;
+            contentWidth.value = Number(measureText?.width) || Number(content?.width) || 0;
+            scheduleStaticItem();
+        });
+    });
+}
+function scheduleStaticItem() {
+    clearStaticItemTimer();
+    if (vertical.value || props.isCircular || !playing.value || canScroll.value || items.value.length < 2) return;
+    staticItemTimer = setTimeout(nextHorizontalItem, Math.max(0, Number(props.duration) || 0));
+}
+function reset() {
+    clearStaticItemTimer();
+    current.value = 0;
+    lastVerticalIndex.value = 0;
+    marqueeWidth.value = 0;
+    contentWidth.value = 0;
+    marqueeKey.value += 1;
+    measure();
+    scheduleStaticItem();
+}
+function nextHorizontalItem() {
+    if (current.value >= items.value.length - 1) {
+        emit('end');
+        return;
+    }
+    current.value += 1;
+    marqueeKey.value += 1;
+    measure();
+    scheduleStaticItem();
+}
+function change(event: any) {
+    current.value = Number(event.detail?.current) || 0;
+    emit('change', current.value);
+    if (lastVerticalIndex.value === items.value.length - 1 && current.value === 0 && items.value.length > 1)
+        emit('end');
+    lastVerticalIndex.value = current.value;
+}
+function close(event: any) {
+    event?.stopPropagation?.();
+    localShow.value = false;
+    emit('update:show', false);
+    emit('update:modelValue', false);
+    emit('close');
+}
+function more(event: any) {
+    event?.stopPropagation?.();
+    emit('getMore');
+}
+function marqueeEnd() {
+    if (!props.isCircular) nextHorizontalItem();
+}
+
+watch(
+    externalShow,
+    value => {
+        if (value !== undefined) localShow.value = value;
+        reset();
+    },
+    { immediate: true }
+);
+watch([items, vertical, () => props.isCircular, () => props.speed, () => props.duration], reset, { deep: true });
+watch(playing, value => {
+    if (value) {
+        marqueeKey.value += 1;
+        measure();
+        scheduleStaticItem();
+    } else clearStaticItemTimer();
+});
+onMounted(measure);
+onActivated(() => {
+    pageActive.value = true;
+    reset();
+});
+onDeactivated(() => {
+    pageActive.value = false;
+    clearStaticItemTimer();
+});
+onPageShow(() => {
+    pageActive.value = true;
+    reset();
+});
+onPageHide(() => {
+    pageActive.value = false;
+    clearStaticItemTimer();
+});
+onBeforeUnmount(() => {
+    measurementId += 1;
+    clearStaticItemTimer();
+});
+defineExpose({ reset });
+</script>
+
+<style scoped>
+.snake-notice-bar {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    overflow: hidden;
+    line-height: 1.5;
+}
+.snake-notice-bar__leading {
+    flex: none;
+    margin-right: 12rpx;
+}
+.snake-notice-bar__trailing {
+    flex: none;
+    margin-left: 12rpx;
+}
+.snake-notice-bar__swiper {
+    flex: 1;
+    height: 42rpx;
+}
+.snake-notice-bar__item {
+    display: flex;
+    align-items: center;
+}
+.snake-notice-bar__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.snake-notice-bar__marquee {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+}
+.snake-notice-bar__marquee-measure {
+    position: absolute;
+    visibility: hidden;
+    width: max-content;
+    white-space: nowrap;
+}
+.snake-notice-bar__marquee-track {
+    display: inline-flex;
+    width: max-content;
+    white-space: nowrap;
+}
+.snake-notice-bar__marquee-primary {
+    flex: none;
+}
+.snake-notice-bar__marquee-track.is-playing.is-circular {
+    animation: snake-notice-marquee-loop linear infinite;
+}
+.snake-notice-bar__marquee-track.is-playing:not(.is-circular) {
+    animation: snake-notice-marquee-once linear both;
+}
+@keyframes snake-notice-marquee-loop {
+    from {
+        transform: translateX(var(--snake-notice-marquee-width));
+    }
+    to {
+        transform: translateX(calc(-1 * var(--snake-notice-content-width)));
+    }
+}
+@keyframes snake-notice-marquee-once {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(-100%);
+    }
+}
+</style>