@puresnake/snake-ui 0.0.0-stage → 0.0.1

package/components/snake-commodity-search/snake-commodity-search.vue

@@ -0,0 +1,234 @@
+<template>
+    <!-- 外层添加高度 防止高度塌陷 -->
+    <view :style="{ height: height }">
+        <view :class="{ 'search-fixed': datas.position === 1 }">
+            <!-- 搜索 -->
+            <view class="search" :style="{ background: datas.backgroundColor, padding: `0 ${datas.pageMargin}rpx` }">
+                <!-- 搜索框 -->
+                <view
+                    class="center"
+                    :style="{
+                        height: datas.heights + 'rpx',
+                        background: datas.borderBgColor,
+                        borderRadius: datas.borderRadius + 'rpx',
+                        border: datas.showBorder ? `${datas.borderSize}rpx solid ${datas.borderColor}` : 'none'
+                    }"
+                >
+                    <view class="search-left">
+                        <snake-icon name="search" size="44rpx" :color="datas.textColor"></snake-icon>
+                        <!-- 占位符 -->
+                        <view v-if="!datas.textList.length" class="input-search" @click="toPage(datas.url)">
+                            <input
+                                v-if="datas.isSearch"
+                                class="input"
+                                :type="datas.inputType"
+                                :disabled="!datas.isSearch"
+                                :placeholder="datas.searchText"
+                                @confirm="confirm"
+                            />
+                            <text class="text" v-else :style="{ color: datas.textColor }">{{ datas.searchText }}</text>
+                        </view>
+                        <!-- 热词竖向滚动 -->
+                        <view :style="{ width: hotordsWidth + 'px' }" v-else>
+                            <snake-notice-bar
+                                :datas="datas"
+                                direction="column"
+                                :icon="null"
+                                :text="hotordsList"
+                                :bgColor="datas.borderBgColor"
+                                :color="datas.textColor"
+                                :duration="3000"
+                                :customStyle="{ padding: '9rpx 12rpx' }"
+                                @click="hotordsClick"
+                            ></snake-notice-bar>
+                        </view>
+                    </view>
+                    <view
+                        class="search-right"
+                        :style="{ paddingRight: datas.rightImage.marginRight + 'rpx' }"
+                        v-if="datas.rightImage.show"
+                    >
+                        <image
+                            class="search-right-image"
+                            :src="datas.rightImage.src"
+                            :style="{
+                                borderRadius: datas.rightImage.borderRadius + 'rpx',
+                                width: datas.rightImage.width + 'rpx',
+                                height: datas.rightImage.height + 'rpx'
+                            }"
+                        />
+                    </view>
+                </view>
+                <!-- 右侧icon图片 最多两个 -->
+                <template v-if="datas.iconImgList.length !== 0">
+                    <view
+                        :id="item.id"
+                        class="right"
+                        v-for="(item, index) in datas.iconImgList"
+                        :key="index"
+                        @click="uni.$snake.navTo(item.url)"
+                    >
+                        <image
+                            class="right-image"
+                            :src="item.src"
+                            :style="{ width: item.width + 'rpx', height: item.height + 'rpx' }"
+                        />
+                    </view>
+                </template>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+/**
+ * @component CommoditySearch
+ * @description 提供可吸顶的商城搜索栏，支持输入搜索、热词轮播、右侧图片和快捷图标。
+ */
+
+import { getCurrentInstance } from 'vue';
+export default {
+    name: 'commoditysearch',
+    options: { virtualHost: true, styleIsolation: 'shared' },
+    props: { datas: Object },
+    emits: ['search'],
+    setup() {
+        const instance = getCurrentInstance();
+        return { instance };
+    },
+    data() {
+        return {
+            hotordsWidth: 0, // 热词滚动的宽度
+            height: 0 // 容器高度
+        };
+    },
+    computed: {
+        // 热词列表
+        hotordsList() {
+            let list = [];
+            if (this.datas.textList.length) {
+                list = this.datas.textList.map(item => item.text);
+            }
+            return list;
+        }
+    },
+    async mounted() {
+        await uni.$snake.sleep(100);
+        if (this.datas.position === 1) {
+            // 组件吸顶 获取占位的高度
+            uni.$snake.getRect('.search-fixed', this.instance).then(size => {
+                this.height = `${size.height}px`;
+            });
+        } else {
+            this.height = 'auto';
+        }
+        // 获取搜索框的占位文本，用于热词滚动的宽度
+        this.hotordsWidth = (await uni.$snake.getRect('.search-left', this.instance)).width;
+        if (this.datas.rightImage.show) {
+            this.hotordsWidth -= (await uni.$snake.getRect('.search-right', this.instance)).width;
+        }
+    },
+    methods: {
+        // 点击热词跳转
+        hotordsClick(index) {
+            uni.$snake.navTo(this.datas.textList[index].url);
+        },
+        toPage() {
+            // 如果可以回车搜索 则不能跳转
+            if (this.datas.isSearch) {
+                return false;
+            }
+            uni.$snake.navTo(this.datas.url);
+        },
+        confirm(e) {
+            const keyword = e.detail.value;
+            this.$emit('search', keyword);
+            if (this.datas.url) uni.$snake.navTo(this.datas.url + keyword);
+        }
+    }
+};
+</script>
+
+<style scoped lang="scss">
+.search-fixed {
+    position: fixed;
+    /* #ifndef MP-WEIXIN */
+    top: 0;
+    /* #endif */
+    /* #ifdef H5 */
+    top: 44px;
+    /* #endif */
+    left: 50%;
+    z-index: 9;
+    box-sizing: border-box;
+    width: 100%;
+    transform: translateX(-50%);
+}
+
+.search {
+    display: flex;
+    flex: 1;
+    align-items: center;
+
+    /* 搜索框 */
+    .center {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        padding-left: 20rpx;
+        overflow: hidden;
+        font-size: 24rpx;
+
+        .search-left {
+            display: flex;
+            flex: 1;
+            align-items: center;
+
+            text:nth-child(2) {
+                width: 100%;
+                padding-left: 5rpx;
+                overflow: hidden; //超出的文本隐藏
+                text-overflow: ellipsis; //用省略号显示
+                font-size: 24rpx;
+                white-space: nowrap; //不换行
+            }
+
+            .input-search {
+                width: 100%;
+                padding-left: 10rpx;
+
+                .input {
+                    width: 100%;
+                    font-size: 24rpx;
+                }
+                .text {
+                    font-size: 26rpx;
+                }
+            }
+        }
+
+        .search-right {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .search-right-image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    .right {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+
+        .right-image {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+</style>

package/components/snake-commodity-search/types.ts

@@ -0,0 +1,11 @@
+/** CommoditySearch 组件的公开属性。 */
+export interface CommoditySearchProps<Data extends Record<string, any> = Record<string, any>> {
+    /** CMS 装修组件配置数据。 */
+    datas?: Data;
+}
+
+/** 输入框确认搜索时发出的事件。 */
+export interface CommoditySearchEmits {
+    /** 用户确认搜索时输入的关键词。 */
+    search: [keyword: string];
+}

package/components/snake-config-provider/snake-config-provider.vue

@@ -0,0 +1,61 @@
+<template>
+    <view
+        :class="['snake-config-provider', `snake-theme-${mode}`, customClass]"
+        :data-snake-theme-mode="mode"
+        :style="[$themeStyle, customStyle]"
+    >
+        <slot />
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component ConfigProvider
+ * @description `snake-config-provider` 是 Snake UI 主题系统的页面入口组件，负责把当前主题的 CSS 变量注入页面，并根据主题模式附加明亮或暗黑类名。将它与 `Root` 插件配合使用，可以让主题配置自动作用于每个页面，无需逐页添加组件。
+ * @see /components/config-provider
+ */
+
+/**
+ * snake-config-provider 全局主题配置入口
+ *
+ * 把主题引擎的 CSS 变量内联到页面根部并携带暗色 class:
+ * - uni-app H5 会把 `page` 选择器编译为 uni-page-body,自定义属性在声明处
+ *   完成 var() 代换后按字面值继承,仅挂在 html 上的暗色覆写无法穿透页面内容;
+ * - 本组件经 vite-plugin-snake-root 包裹到每个页面根部后,主题变量对全页生效,
+ *   小程序端(无 document)同样可用。
+ *
+ * 可选 bootstrap:传入 currentTheme / darkMode 时,挂载及变化时同步到主题引擎
+ * (含 storage 持久化),便于在 App.root.vue 中声明式固定初始主题。
+ */
+import { computed, onMounted, watch } from 'vue';
+import { currentTheme, setDarkMode, setTheme, darkMode, systemDark } from '../../libs/config/theme';
+import type { ConfigProviderEmits, ConfigProviderProps } from './types';
+
+defineOptions({ name: 'ConfigProvider', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = withDefaults(defineProps<ConfigProviderProps>(), {
+    darkMode: undefined,
+    currentTheme: '',
+    customClass: '',
+    customStyle: ''
+});
+const emit = defineEmits<ConfigProviderEmits>();
+
+const mode = computed<'light' | 'dark'>(() =>
+    darkMode.value === 'auto' ? (systemDark.value ? 'dark' : 'light') : darkMode.value
+);
+
+function bootstrap() {
+    if (props.currentTheme && props.currentTheme !== currentTheme.value.name) {
+        if (setTheme(props.currentTheme)) emit('theme-change', props.currentTheme);
+    }
+    if (props.darkMode && props.darkMode !== darkMode.value) {
+        setDarkMode(props.darkMode);
+        emit('mode-change', mode.value);
+    }
+}
+
+onMounted(bootstrap);
+watch(() => [props.currentTheme, props.darkMode], bootstrap);
+</script>
+
+<style lang="scss" scoped></style>

package/components/snake-config-provider/types.ts

@@ -0,0 +1,22 @@
+import type { DarkMode } from '../../libs/config/types';
+import type { StyleValue } from '../../types/global';
+
+/** ConfigProvider 组件的公开属性。 */
+export interface ConfigProviderProps {
+    /** 初始化/切换暗黑模式(light | dark | auto),不传则沿用当前引擎状态 */
+    darkMode?: DarkMode;
+    /** 初始化/切换主题名(需已通过 app.use 注册主题),不传则沿用当前主题 */
+    currentTheme?: string;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+
+/** ConfigProvider 组件的事件契约。 */
+export type ConfigProviderEmits = {
+    /** theme-change 事件携带的参数。 */
+    'theme-change': [themeName: string];
+    /** mode-change 事件携带的参数。 */
+    'mode-change': [mode: 'light' | 'dark'];
+};

package/components/snake-count-down/snake-count-down.vue

@@ -0,0 +1,231 @@
+<template>
+    <view class="snake-countdown" :class="customClass" :style="customStyle">
+        <view class="snake-countdown__item" :style="itemStyle" v-if="showDays && (!hideZeroDay || d !== '00')">
+            <view class="snake-countdown__time" :style="letterStyle">
+                {{ d }}
+            </view>
+        </view>
+        <view
+            class="snake-countdown__colon"
+            :style="{
+                fontSize: separatorSize + 'rpx',
+                color: separatorColor,
+                paddingBottom: separator === 'colon' ? '4rpx' : 0
+            }"
+            v-if="showDays && (!hideZeroDay || d !== '00')"
+        >
+            {{ separator === 'colon' && showHours ? ':' : t('day') }}
+        </view>
+        <view class="snake-countdown__item" :style="itemStyle" v-if="showHours">
+            <view class="snake-countdown__time" :style="{ fontSize: fontSize + 'rpx', color: color }">
+                {{ h }}
+            </view>
+        </view>
+        <view
+            class="snake-countdown__colon"
+            :style="{
+                fontSize: separatorSize + 'rpx',
+                color: separatorColor,
+                paddingBottom: separator === 'colon' ? '4rpx' : 0
+            }"
+            v-if="showHours"
+        >
+            {{ separator === 'colon' && showMinutes ? ':' : t('hour') }}
+        </view>
+        <view class="snake-countdown__item" :style="itemStyle" v-if="showMinutes">
+            <view class="snake-countdown__time" :style="{ fontSize: fontSize + 'rpx', color: color }">
+                {{ i }}
+            </view>
+        </view>
+        <view
+            class="snake-countdown__colon"
+            :style="{
+                fontSize: separatorSize + 'rpx',
+                color: separatorColor,
+                paddingBottom: separator === 'colon' ? '4rpx' : 0
+            }"
+            v-if="showMinutes"
+        >
+            {{ separator === 'colon' && showSeconds ? ':' : t('minute') }}
+        </view>
+        <view class="snake-countdown__item" :style="itemStyle" v-if="showSeconds">
+            <view class="snake-countdown__time" :style="{ fontSize: fontSize + 'rpx', color: color }">
+                {{ s }}
+            </view>
+        </view>
+        <view
+            class="snake-countdown__colon"
+            :style="{ fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: 0 }"
+            v-if="showSeconds && separator === 'zh'"
+        >
+            {{ t('second') }}
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component CountDown
+ * @description 倒计时组件，用于活动截止等场景，通过数字变化给用户明确的时间感受；支持时分秒显示开关、分隔符形态与样式定制。
+ * @see /components/count-down
+ */
+
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useLocale } from '../../libs/hooks/useLocale';
+import { countDownProps } from './types';
+import type { CountDownEmits, CountDownExpose } from './types';
+
+defineOptions({ name: 'CountDown', options: { virtualHost: true, styleIsolation: 'shared' } });
+
+const props = defineProps(countDownProps);
+const emit = defineEmits<CountDownEmits>();
+const { t } = useLocale('countDown');
+
+const d = ref('00'); // 天
+const h = ref('00'); // 小时
+const i = ref('00'); // 分钟
+const s = ref('00'); // 秒
+const timer = ref<ReturnType<typeof setInterval> | null>(null); // 定时器
+const seconds = ref(0);
+
+/** 数字块（时分秒部分）的样式。 */
+const itemStyle = computed(() => {
+    const style: Record<string, string> = {};
+    if (props.height) {
+        style.height = props.height + 'rpx';
+        style.width = props.height + 'rpx';
+    }
+    if (props.showBorder) {
+        style.borderStyle = 'solid';
+        style.borderColor = props.borderColor;
+        style.borderWidth = '1px';
+    }
+    if (props.bgColor) {
+        style.backgroundColor = props.bgColor;
+    }
+    return style;
+});
+
+/** 数字文字的样式。 */
+const letterStyle = computed(() => {
+    const style: Record<string, string> = {};
+    if (props.fontSize) style.fontSize = props.fontSize + 'rpx';
+    if (props.color) style.color = props.color;
+    return style;
+});
+
+// 时间戳变化时重新开始倒计时
+watch(
+    () => props.timestamp,
+    () => {
+        clearTimer();
+        start();
+    }
+);
+
+onMounted(() => {
+    if (props.autoplay && props.timestamp) {
+        start();
+    }
+});
+onBeforeUnmount(clearTimer);
+
+/** 开始倒计时。 */
+function start() {
+    // 避免可能出现的倒计时重叠
+    clearTimer();
+    if (Number(props.timestamp) <= 0) return;
+    seconds.value = Number(props.timestamp);
+    formatTime(seconds.value);
+    timer.value = setInterval(() => {
+        seconds.value--;
+        emit('change', seconds.value);
+        if (seconds.value < 0) {
+            end();
+            return;
+        }
+        formatTime(seconds.value);
+    }, 1000);
+}
+
+/** 将剩余秒数格式化到 d/h/i/s。 */
+function formatTime(sec: number) {
+    if (sec <= 0) end();
+    const dayNum = Math.floor(sec / (60 * 60 * 24));
+    const hourNum = Math.floor(sec / (60 * 60)) - dayNum * 24;
+    // 不显示天时，把天的部分折算进小时
+    let showHour: string;
+    if (props.showDays) {
+        showHour = hourNum < 10 ? `0${hourNum}` : String(hourNum);
+    } else {
+        const hourTotal = Math.floor(sec / (60 * 60));
+        showHour = hourTotal < 10 ? `0${hourTotal}` : String(hourTotal);
+    }
+    const minuteNum = Math.floor(sec / 60) - hourNum * 60 - dayNum * 24 * 60;
+    const secondNum = Math.floor(sec) - dayNum * 24 * 60 * 60 - hourNum * 60 * 60 - minuteNum * 60;
+    const minute = minuteNum < 10 ? `0${minuteNum}` : String(minuteNum);
+    const second = secondNum < 10 ? `0${secondNum}` : String(secondNum);
+    const day = dayNum < 10 ? `0${dayNum}` : String(dayNum);
+    d.value = day;
+    h.value = showHour;
+    i.value = minute;
+    s.value = second;
+}
+
+/** 结束倒计时。 */
+function end() {
+    clearTimer();
+    emit('end');
+}
+
+/**
+ * 主动停止倒计时，不触发 end 事件。
+ * 适用于父组件切换场景或业务主动销毁计时任务。
+ */
+function destroy() {
+    clearTimer();
+}
+
+/** 清除定时器。 */
+function clearTimer() {
+    if (timer.value) {
+        clearInterval(timer.value);
+        timer.value = null;
+    }
+}
+
+defineExpose<CountDownExpose>({
+    start,
+    end,
+    destroy
+});
+</script>
+
+<style scoped>
+.snake-countdown {
+    display: inline-flex;
+    align-items: center;
+}
+.snake-countdown__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rpx;
+    border-radius: 6rpx;
+    white-space: nowrap;
+    transform: translateZ(0);
+}
+.snake-countdown__time {
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+}
+.snake-countdown__colon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 5rpx;
+    padding-bottom: 4rpx;
+    line-height: 1;
+}
+</style>

package/components/snake-count-down/types.ts

@@ -0,0 +1,103 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { StyleValue } from '../../types/global';
+
+/** countDownProps 运行时属性及默认值。 */
+export const countDownProps = {
+    /** 根节点自定义类名。 */
+    customClass: { type: String, default: '' },
+    /** 根节点自定义样式。 */
+    customStyle: { type: [String, Object, Array] as PropType<StyleValue>, default: '' },
+    /** 倒计时剩余秒数。 */
+    timestamp: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 是否挂载后自动开始倒计时。 */
+    autoplay: { type: Boolean, default: true },
+    /** 分隔符形态，colon 为英文冒号，zh 为中文单位。 */
+    separator: { type: String as PropType<'colon' | 'zh'>, default: 'colon' },
+    /** 分隔符大小，单位 rpx。 */
+    separatorSize: { type: [Number, String] as PropType<number | string>, default: 30 },
+    /** 分隔符颜色。 */
+    separatorColor: { type: String, default: 'var(--snake-color-text, #22292f)' },
+    /** 倒计时数字颜色。 */
+    color: { type: String, default: 'var(--snake-color-text, #22292f)' },
+    /** 倒计时数字大小，单位 rpx。 */
+    fontSize: { type: [Number, String] as PropType<number | string>, default: 30 },
+    /** 倒计时数字背景颜色。 */
+    bgColor: { type: String, default: 'var(--snake-color-surface, #fff)' },
+    /** 数字块高度（宽度同值），单位 rpx。 */
+    height: { type: [Number, String] as PropType<number | string>, default: 'auto' },
+    /** 是否显示数字边框。 */
+    showBorder: { type: Boolean, default: false },
+    /** 数字边框颜色。 */
+    borderColor: { type: String, default: 'var(--snake-color-text, #22292f)' },
+    /** 是否显示秒。 */
+    showSeconds: { type: Boolean, default: true },
+    /** 是否显示分钟。 */
+    showMinutes: { type: Boolean, default: true },
+    /** 是否显示小时。 */
+    showHours: { type: Boolean, default: true },
+    /** 是否显示天。 */
+    showDays: { type: Boolean, default: true },
+    /** 天数为 0 时是否隐藏天部分。 */
+    hideZeroDay: { type: Boolean, default: false }
+} as const;
+
+/** CountDownResolved 组件的解析属性。 */
+export type CountDownResolvedProps = ExtractPropTypes<typeof countDownProps>;
+
+/** CountDown 组件的公开属性。 */
+export interface CountDownProps {
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+    /** 倒计时剩余秒数。 */
+    timestamp?: number | string;
+    /** 是否挂载后自动开始倒计时。 */
+    autoplay?: boolean;
+    /** 分隔符形态，colon 为英文冒号，zh 为中文单位。 */
+    separator?: 'colon' | 'zh';
+    /** 分隔符大小，单位 rpx。 */
+    separatorSize?: number | string;
+    /** 分隔符颜色。 */
+    separatorColor?: string;
+    /** 倒计时数字颜色。 */
+    color?: string;
+    /** 倒计时数字大小，单位 rpx。 */
+    fontSize?: number | string;
+    /** 倒计时数字背景颜色。 */
+    bgColor?: string;
+    /** 数字块高度（宽度同值），单位 rpx。 */
+    height?: number | string;
+    /** 是否显示数字边框。 */
+    showBorder?: boolean;
+    /** 数字边框颜色。 */
+    borderColor?: string;
+    /** 是否显示秒。 */
+    showSeconds?: boolean;
+    /** 是否显示分钟。 */
+    showMinutes?: boolean;
+    /** 是否显示小时。 */
+    showHours?: boolean;
+    /** 是否显示天。 */
+    showDays?: boolean;
+    /** 天数为 0 时是否隐藏天部分。 */
+    hideZeroDay?: boolean;
+}
+
+/** CountDown 组件的事件契约。 */
+export type CountDownEmits = {
+    /** 倒计时结束时触发。 */
+    end: [];
+    /** 每秒触发一次，参数为剩余秒数。 */
+    change: [seconds: number];
+};
+
+/** CountDown 组件暴露的方法。 */
+export interface CountDownExpose {
+    /** 开始倒计时。 */
+    start: () => void;
+    /** 结束倒计时。 */
+    end: () => void;
+    /** 主动停止倒计时，不触发 end 事件。 */
+    destroy: () => void;
+}