@puresnake/snake-ui 0.0.0-stage → 0.0.1

package/components/snake-coupon/snake-coupon.vue

@@ -0,0 +1,209 @@
+<template>
+    <view class="coupon">
+        <!-- 页面显示 -->
+        <view @click="handleReceiveCoupon" v-if="datas.modeType === 'page'">
+            <view v-show="isCouponCheck">
+                <image :src="datas.beforeImage" mode="widthFix" style="display: block; width: 100%" />
+            </view>
+            <view v-show="!isCouponCheck">
+                <image :src="datas.afterImage" mode="widthFix" style="display: block; width: 100%" />
+            </view>
+        </view>
+        <!-- 弹窗显示 -->
+        <template v-if="datas.modeType === 'popup'">
+            <snake-popup
+                v-model="show"
+                :mode="datas.popupMode"
+                :bg-color="datas.popupMode === 'bottom' ? 'var(--snake-color-surface, #fff)' : 'transparent'"
+            >
+                <view class="popup-container">
+                    <view :class="[`coupon-popup coupon-popup--${datas.popupMode}`]">
+                        <view
+                            :class="[`close close--${datas.popupMode}`]"
+                            @click.stop="show = false"
+                            v-if="!datas.popupMode || datas.popupMode === 'bottom'"
+                        >
+                            <snake-icon name="close" color="var(--snake-color-text, #26273a)" size="18"></snake-icon>
+                        </view>
+                        <image
+                            class="coupon-img"
+                            mode="aspectFill"
+                            :src="datas.beforeImage"
+                            @click.stop="handleReceiveCoupon"
+                        ></image>
+                    </view>
+                    <view
+                        :class="[`close close--${datas.popupMode}`]"
+                        @click.stop="show = false"
+                        v-if="datas.popupMode === 'center'"
+                    >
+                        <snake-icon name="close" color="#fff" size="28"></snake-icon>
+                    </view>
+                </view>
+            </snake-popup>
+        </template>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Coupon
+ * @description 检查领取资格，以页面图片或弹窗形式展示优惠券，并在领取后执行内部或外部跳转。
+ */
+
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { resolveCmsOptions } from '../../libs/cms';
+import { sleep } from '../../libs/function/sleep';
+import { toast } from '../../libs/function/toast';
+import { CmsError } from '../snake-cms/types';
+import type { CouponEmits, CouponProps } from './types';
+
+defineOptions({ name: 'Coupon', options: { virtualHost: true, styleIsolation: 'shared' } });
+
+const props = withDefaults(defineProps<CouponProps>(), {
+    datas: () => ({}),
+    couponService: undefined,
+    linkService: undefined,
+    pageInfo: () => ({})
+});
+const emit = defineEmits<CouponEmits>();
+const resolved = computed(() => resolveCmsOptions());
+const couponService = computed(() => props.couponService || resolved.value.services?.coupon);
+const linkService = computed(() => props.linkService || resolved.value.services?.link);
+const isCouponCheck = ref(true);
+const tipMessage = ref('');
+const show = ref(false);
+
+let restoreTabBarTimer: ReturnType<typeof setTimeout> | undefined;
+let tabBarHidden = false;
+watch(show, value => {
+    if (props.datas.modeType !== 'popup' || props.datas.popupMode !== 'bottom') return;
+    if (restoreTabBarTimer) clearTimeout(restoreTabBarTimer);
+    if (value) {
+        uni.hideTabBar({ animation: true });
+        tabBarHidden = true;
+    } else {
+        restoreTabBarTimer = setTimeout(() => {
+            uni.showTabBar({ animation: true });
+            tabBarHidden = false;
+        }, 300);
+    }
+});
+
+async function getCouponCheck(): Promise<void> {
+    if (!couponService.value) return;
+    try {
+        const result = await couponService.value.check({ config: props.datas, pageInfo: props.pageInfo });
+        isCouponCheck.value = result.claimable;
+        tipMessage.value = result.message || '';
+        if (props.datas.modeType === 'popup' && result.claimable) {
+            await sleep(30);
+            show.value = true;
+        }
+    } catch (cause) {
+        emit('error', new CmsError('coupon', '优惠券状态加载失败', cause));
+    }
+}
+
+async function openAfterAction(): Promise<void> {
+    if (!props.datas.afterUrl) return;
+    if (!linkService.value) {
+        toast('未配置 CMS 跳转服务');
+        return;
+    }
+    await linkService.value.open(
+        { type: props.datas.type === '10' ? 'navigate' : 'external', url: props.datas.afterUrl },
+        { pageInfo: props.pageInfo }
+    );
+}
+
+async function handleReceiveCoupon(): Promise<void> {
+    if (!isCouponCheck.value) {
+        toast(tipMessage.value || '您已经领取过啦');
+        await openAfterAction();
+        return;
+    }
+    if (!couponService.value) {
+        const error = new CmsError('coupon', '未配置 CMS 优惠券服务');
+        emit('error', error);
+        toast(error.message);
+        return;
+    }
+    try {
+        const result = await couponService.value.receive({ config: props.datas, pageInfo: props.pageInfo });
+        if (!result.success) {
+            toast(result.message || '领取失败');
+            await getCouponCheck();
+            return;
+        }
+        isCouponCheck.value = false;
+        show.value = false;
+        toast(result.message || '领取成功');
+        emit('received');
+        await sleep(1000);
+        await openAfterAction();
+    } catch (cause) {
+        const error = new CmsError('coupon', '优惠券领取失败', cause);
+        emit('error', error);
+        toast(error.message);
+    }
+}
+
+onMounted(() => {
+    void getCouponCheck();
+});
+onBeforeUnmount(() => {
+    if (restoreTabBarTimer) clearTimeout(restoreTabBarTimer);
+    if (tabBarHidden) {
+        uni.showTabBar({ animation: true });
+    }
+});
+</script>
+
+<style lang="scss" scoped>
+.coupon {
+    width: 100%;
+    height: 100%;
+}
+
+.popup-container {
+    width: 100%;
+    height: 100%;
+
+    .coupon-popup {
+        box-sizing: border-box;
+        width: 100%;
+        height: 572rpx;
+        background-color: var(--snake-color-surface, #fff);
+
+        &--center {
+            width: 540rpx;
+            height: 740rpx;
+            background: var(--snake-color-surface, #fff);
+
+            .coupon-img {
+                height: 740rpx !important;
+            }
+        }
+
+        .coupon-img {
+            display: block;
+            width: 100%;
+            height: 524rpx;
+        }
+    }
+
+    .close {
+        display: flex;
+        justify-content: flex-end;
+        padding-top: 16rpx;
+        padding-right: 16rpx;
+
+        &--center {
+            display: flex;
+            justify-content: center;
+            margin-top: 70rpx;
+        }
+    }
+}
+</style>

package/components/snake-coupon/types.ts

@@ -0,0 +1,21 @@
+import type { CmsCouponService, CmsError, CmsLinkService, CmsPageInfo } from '../snake-cms/types';
+
+/** Coupon 组件的公开属性。 */
+export interface CouponProps<Data extends Record<string, any> = Record<string, any>> {
+    /** CMS 装修组件配置数据。 */
+    datas?: Data;
+    /** coupon service 配置。 */
+    couponService?: CmsCouponService;
+    /** link service 配置。 */
+    linkService?: CmsLinkService;
+    /** CMS 页面上下文信息。 */
+    pageInfo?: CmsPageInfo;
+}
+
+/** Coupon 组件的事件契约。 */
+export type CouponEmits = {
+    /** error 事件携带的参数。 */
+    error: [error: CmsError];
+    /** received 事件携带的参数。 */
+    received: [];
+};

package/components/snake-custom-module/snake-custom-module.vue

@@ -0,0 +1,25 @@
+<template>
+    <view class="custommodule">
+        <!-- <slot :name="datas.slotName" /> -->
+        <slot />
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component CustomModule
+ * @description 为 CMS 配置中的自定义内容提供一个通用插槽容器。
+ */
+
+import type { CustomModuleProps, CustomModuleSlots } from './types';
+
+defineOptions({ name: 'CustomModule', options: { virtualHost: true, styleIsolation: 'shared' } });
+withDefaults(defineProps<CustomModuleProps>(), { datas: () => ({}) });
+defineSlots<CustomModuleSlots>();
+</script>
+
+<style scoped lang="scss">
+.custommodule {
+    height: 100%;
+}
+</style>

package/components/snake-custom-module/types.ts

@@ -0,0 +1,11 @@
+/** CustomModule 组件的公开属性。 */
+export interface CustomModuleProps<Data extends Record<string, any> = Record<string, any>> {
+    /** CMS 装修组件配置数据。 */
+    datas?: Data;
+}
+
+/** CustomModuleSlots 类型定义。 */
+export interface CustomModuleSlots {
+    /** default 配置。 */
+    default?: () => unknown;
+}

package/components/snake-drop-menu/snake-drop-menu.vue

@@ -0,0 +1,123 @@
+<template>
+    <view
+        class="snake-drop-menu"
+        :class="[customClass, { 'snake-drop-menu--border': borderBottom }]"
+        :style="[{ height: addUnit(height, 'px'), zIndex: props.zIndex }, customStyle]"
+    >
+        <slot />
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component DropMenu
+ * @description 负责多个 `DropMenuItem` 的布局、互斥展开和弹层定位。面板打开前会真实测量菜单底部位置，适用于普通布局和吸顶布局。
+ * @see /components/drop-menu
+ */
+
+import { getCurrentInstance, onMounted, provide, ref, toRef, watch } from 'vue';
+import zIndex from '../../libs/config/zIndex';
+import { addUnit } from '../../libs/function/unit';
+import { dropMenuKey } from './types';
+import type { DropMenuEmits, DropMenuExpose, DropMenuProps } from './types';
+
+defineOptions({ name: 'DropMenu', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = withDefaults(defineProps<DropMenuProps>(), {
+    activeColor: 'var(--snake-color-primary, #06D290)',
+    inactiveColor: 'var(--snake-color-text-secondary, #606266)',
+    closeOnClickMask: true,
+    closeOnClickSelf: true,
+    duration: 300,
+    height: 40,
+    borderBottom: false,
+    titleSize: 28,
+    menuIcon: 'down',
+    menuIconSize: 18,
+    zIndex: zIndex.dropdown,
+    customClass: '',
+    customStyle: ''
+});
+const emit = defineEmits<DropMenuEmits>();
+const instance = getCurrentInstance();
+const activeItem = ref<symbol | null>(null);
+const highlighted = ref<number>();
+const menuTop = ref(0);
+const items: symbol[] = [];
+function register(item: symbol) {
+    if (!items.includes(item)) items.push(item);
+    return items.indexOf(item);
+}
+function unregister(item: symbol) {
+    const index = items.indexOf(item);
+    if (index >= 0) items.splice(index, 1);
+    if (activeItem.value === item) activeItem.value = null;
+}
+const indexOf = (item: symbol) => items.indexOf(item);
+function openItem(item: symbol) {
+    activeItem.value = item;
+}
+function close() {
+    activeItem.value = null;
+}
+function open(index: number) {
+    if (items[index]) openItem(items[index]);
+}
+function highlight(index?: number) {
+    highlighted.value = index;
+}
+async function updateDropMenuRect() {
+    if (typeof uni === 'undefined') return;
+    await new Promise<void>(resolve => {
+        uni.createSelectorQuery()
+            .in(instance?.proxy as any)
+            .select('.snake-drop-menu')
+            .boundingClientRect((rect: any) => {
+                if (rect) menuTop.value = Number(rect.bottom) || 0;
+            })
+            .exec(() => resolve());
+    });
+}
+function colseAll() {
+    close();
+}
+watch(activeItem, (value, previous) => {
+    if (previous) emit('close', indexOf(previous));
+    if (value) {
+        void updateDropMenuRect();
+        emit('open', indexOf(value));
+    }
+});
+provide(dropMenuKey, {
+    activeItem,
+    highlighted,
+    menuTop,
+    activeColor: toRef(props, 'activeColor'),
+    inactiveColor: toRef(props, 'inactiveColor'),
+    titleSize: toRef(props, 'titleSize'),
+    menuIcon: toRef(props, 'menuIcon'),
+    menuIconSize: toRef(props, 'menuIconSize'),
+    duration: toRef(props, 'duration'),
+    closeOnClickMask: toRef(props, 'closeOnClickMask'),
+    closeOnClickSelf: toRef(props, 'closeOnClickSelf'),
+    zIndex: toRef(props, 'zIndex'),
+    register,
+    unregister,
+    indexOf,
+    open: openItem,
+    close,
+    updateRect: updateDropMenuRect
+});
+onMounted(() => void updateDropMenuRect());
+defineExpose<DropMenuExpose>({ updateDropMenuRect, colseAll, close, open, highlight });
+</script>
+<style scoped>
+.snake-drop-menu {
+    position: relative;
+    display: flex;
+    width: 100%;
+    background: var(--snake-color-surface, #fff);
+}
+.snake-drop-menu--border {
+    border-bottom: 1px solid var(--snake-color-divider, #e4e7ed);
+}
+</style>

package/components/snake-drop-menu/types.ts

@@ -0,0 +1,95 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+/** DropMenu 组件的公开属性。 */
+export interface DropMenuProps {
+    /** 激活状态颜色。 */
+    activeColor?: string;
+    /** 未激活状态颜色。 */
+    inactiveColor?: string;
+    /** close on click mask 配置。 */
+    closeOnClickMask?: boolean;
+    /** close on click self 配置。 */
+    closeOnClickSelf?: boolean;
+    /** 动画持续时间。 */
+    duration?: number;
+    /** 组件高度。 */
+    height?: UnitValue;
+    /** 是否显示底部边框。 */
+    borderBottom?: boolean;
+    /** 标题文字尺寸，数值按 rpx 处理。 */
+    titleSize?: UnitValue;
+    /** menu icon 配置。 */
+    menuIcon?: string;
+    /** menu icon size 配置。 */
+    menuIconSize?: UnitValue;
+    /** 组件层级。 */
+    zIndex?: number;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+/** DropMenu 组件的事件契约。 */
+export type DropMenuEmits = {
+    /** open 事件携带的参数。 */
+    open: [index: number];
+    /** close 事件携带的参数。 */
+    close: [index: number];
+};
+/** DropMenu 组件实例公开的方法和状态。 */
+export interface DropMenuExpose {
+    /** updateDropMenuRect 方法。 */
+    updateDropMenuRect(): Promise<void>;
+    /** colseAll 方法。 */
+    colseAll(): void;
+    /** close 方法。 */
+    close(): void;
+    /** open 方法。 */
+    open(index: number): void;
+    /** highlight 方法。 */
+    highlight(index?: number): void;
+}
+
+/** DropMenu 向 DropMenuItem 注入的配对上下文。 */
+export interface DropMenuContext {
+    /** 当前展开项的标识，null 表示全部收起。 */
+    activeItem: Ref<symbol | null>;
+    /** 键盘导航高亮的选项下标。 */
+    highlighted: Ref<number | undefined>;
+    /** 菜单栏距页面顶部的偏移。 */
+    menuTop: Ref<number>;
+    /** 激活状态颜色。 */
+    activeColor: Ref<string>;
+    /** 未激活状态颜色。 */
+    inactiveColor: Ref<string>;
+    /** 标题文字尺寸。 */
+    titleSize: Ref<string | number | null | undefined>;
+    /** 标题右侧图标名。 */
+    menuIcon: Ref<string>;
+    /** 标题右侧图标尺寸。 */
+    menuIconSize: Ref<string | number | null | undefined>;
+    /** 面板动画时长。 */
+    duration: Ref<number>;
+    /** 点击遮罩是否关闭。 */
+    closeOnClickMask: Ref<boolean>;
+    /** 再次点击已展开标题是否关闭。 */
+    closeOnClickSelf: Ref<boolean>;
+    /** 组件层级。 */
+    zIndex: Ref<number>;
+    /** 注册一个菜单项并返回其下标。 */
+    register(item: symbol): number;
+    /** 注销一个菜单项。 */
+    unregister(item: symbol): void;
+    /** 查询菜单项下标。 */
+    indexOf(item: symbol): number;
+    /** 展开指定菜单项。 */
+    open(item: symbol): void;
+    /** 收起全部菜单项。 */
+    close(): void;
+    /** 重新测量菜单栏位置。 */
+    updateRect(): Promise<void>;
+}
+
+/** DropMenu ↔ DropMenuItem 配对注入键。 */
+export const dropMenuKey: InjectionKey<DropMenuContext> = Symbol('snake-drop-menu');

package/components/snake-drop-menu-item/snake-drop-menu-item.vue

@@ -0,0 +1,181 @@
+<template>
+    <view class="snake-drop-item">
+        <view
+            class="snake-drop-item__trigger"
+            :style="{ color, fontSize: addUnit(menu?.titleSize.value || 28, 'rpx') }"
+            @click="toggle"
+        >
+            <text class="snake-drop-item__title">{{ displayTitle }}</text>
+            <snake-icon
+                class="snake-drop-item__arrow"
+                :name="isOpen ? 'arrow-up' : 'arrow-down'"
+                :size="menu?.menuIconSize.value || 18"
+                aria-hidden="true"
+            />
+        </view>
+        <view
+            v-if="isOpen"
+            class="snake-drop-item__mask"
+            :style="{ top: `${menu?.menuTop.value || 0}px`, zIndex: menu?.zIndex.value || zIndex.dropdown }"
+            @click="maskClick"
+        />
+        <snake-transition
+            :show="isOpen"
+            name="fade-down"
+            :duration="menu?.duration.value || 300"
+            custom-class="snake-drop-item__panel"
+            :custom-style="panelStyle"
+        >
+            <slot v-if="$slots.default" />
+            <scroll-view v-else class="snake-drop-item__options" scroll-y>
+                <view
+                    v-for="(option, index) in options"
+                    :key="index"
+                    class="snake-drop-item__option"
+                    :class="{ 'is-active': option.value === modelValue, 'is-disabled': option.disabled }"
+                    @click="select(option.value, option.disabled)"
+                >
+                    <text>{{ option.label }}</text>
+                    <snake-icon v-if="option.value === modelValue" name="checkmark" />
+                </view>
+            </scroll-view>
+        </snake-transition>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component DropMenuItem
+ * @description 提供菜单触发器、遮罩和内容面板，必须作为 `DropMenu` 的直接子组件使用。可通过 options 快速生成选项，也可完全自定义内容。
+ * @see /components/drop-menu
+ */
+
+import { computed, inject, onBeforeUnmount, watch, type CSSProperties } from 'vue';
+import zIndex from '../../libs/config/zIndex';
+import { addUnit } from '../../libs/function/unit';
+import { dropMenuKey } from '../snake-drop-menu/types';
+import Icon from '../snake-icon/snake-icon.vue';
+import Transition from '../snake-transition/snake-transition.vue';
+import type { DropMenuItemEmits, DropMenuItemProps } from './types';
+
+defineOptions({ name: 'DropMenuItem', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = withDefaults(defineProps<DropMenuItemProps>(), {
+    title: '',
+    options: () => [],
+    disabled: false,
+    height: 'auto',
+    beforeToggle: undefined,
+    customStyle: ''
+});
+const emit = defineEmits<DropMenuItemEmits>();
+const menu = inject(dropMenuKey);
+const itemId = Symbol('snake-drop-menu-item');
+const itemIndex = menu?.register(itemId) ?? -1;
+const isOpen = computed(() => menu?.activeItem.value === itemId || props.show === true);
+const selected = computed(() => props.options.find(option => option.value === props.modelValue));
+const displayTitle = computed(() => props.title || selected.value?.label || '请选择');
+const color = computed(() =>
+    isOpen.value || menu?.highlighted.value === itemIndex ? menu?.activeColor.value : menu?.inactiveColor.value
+);
+const panelStyle = computed(() => [
+    {
+        // 面板定位/底色直接内联，避免依赖跨组件 scoped class（custom-class 应用在
+        // snake-transition 根节点上，而 scoped 样式带的是本组件 data-v，选择器匹配不上）。
+        position: 'fixed',
+        top: `${menu?.menuTop.value || 0}px`,
+        left: 0,
+        right: 0,
+        zIndex: (menu?.zIndex.value || zIndex.dropdown) + 1,
+        maxHeight: props.height === 'auto' ? '70vh' : addUnit(props.height, 'rpx'),
+        boxSizing: 'border-box',
+        overflow: 'hidden',
+        background: 'var(--snake-color-surface, #fff)',
+        boxShadow: '0 18rpx 48rpx var(--snake-color-shadow, rgba(15, 30, 24, 0.12))'
+    } as CSSProperties,
+    props.customStyle
+]);
+function requestOpen() {
+    if (!props.beforeToggle) return Promise.resolve(true);
+    return new Promise<boolean>(resolve => props.beforeToggle?.({ resolve }));
+}
+async function toggle() {
+    if (!menu || props.disabled) return;
+    if (isOpen.value) {
+        if (menu.closeOnClickSelf.value) menu.close();
+        return;
+    }
+    if (await requestOpen()) {
+        await menu.updateRect();
+        menu.open(itemId);
+        emit('open');
+    }
+}
+function close() {
+    menu?.close();
+}
+function maskClick() {
+    if (menu?.closeOnClickMask.value) close();
+}
+function select(value: unknown, disabled?: boolean) {
+    if (disabled) return;
+    emit('update:modelValue', value);
+    emit('change', value);
+    close();
+}
+watch(isOpen, (value, previous) => {
+    if (previous && !value) emit('close');
+});
+onBeforeUnmount(() => menu?.unregister(itemId));
+</script>
+
+<style scoped>
+.snake-drop-item {
+    flex: 1;
+    min-width: 0;
+}
+.snake-drop-item__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8rpx;
+    width: 100%;
+    height: 100%;
+    padding: 0 12rpx;
+    line-height: 1;
+}
+.snake-drop-item__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.snake-drop-item__arrow {
+    flex: none;
+    line-height: 1;
+}
+.snake-drop-item__mask {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.45);
+}
+/* 面板定位/底色已内联在 panelStyle（跨组件 custom-class 无法命中 scoped 选择器） */
+.snake-drop-item__options {
+    max-height: 70vh;
+}
+.snake-drop-item__option {
+    display: flex;
+    min-height: 88rpx;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 32rpx;
+    border-bottom: 1px solid var(--snake-color-divider, #e4e7ed);
+    color: var(--snake-color-text-secondary, #606266);
+}
+.snake-drop-item__option.is-active {
+    color: var(--snake-color-primary, #06d290);
+}
+.snake-drop-item__option.is-disabled {
+    opacity: 0.45;
+}
+</style>