@puresnake/snake-ui 0.0.0-stage → 0.0.1

package/components/snake-tabbar/snake-tabbar.vue

@@ -0,0 +1,306 @@
+<template>
+    <view v-if="show" class="snake-tabbar-spacer" :style="spacerStyle" />
+    <view
+        v-if="show"
+        :class="[
+            'snake-tabbar',
+            customClass,
+            {
+                'snake-tabbar--fixed': fixed,
+                'snake-tabbar--safe': safeAreaInsetBottom,
+                'snake-tabbar--border': borderTop
+            }
+        ]"
+        :style="rootStyle"
+        role="navigation"
+        @touchmove.stop.prevent="() => {}"
+    >
+        <view class="snake-tabbar__inner" :style="{ height: addUnit(height, 'rpx') }">
+            <view
+                v-for="(item, index) in tabItems"
+                :key="String(itemKey(item, index))"
+                :class="[
+                    'snake-tabbar__item',
+                    {
+                        'snake-tabbar__item--active': isActive(item, index),
+                        'snake-tabbar__item--disabled': item.disabled,
+                        'snake-tabbar__item--mid': midButton && item.midButton
+                    }
+                ]"
+                hover-class="snake-tabbar__item--hover"
+                :style="itemStyle(item)"
+                :aria-label="item.text || ''"
+                :aria-current="isActive(item, index) ? 'page' : undefined"
+                @tap.stop="clickItem(item, index)"
+            >
+                <view class="snake-tabbar__icon-wrap" :style="{ gap: addUnit(item.gap ?? gap, 'rpx') }">
+                    <SnakeIcon
+                        v-if="iconName(item, index)"
+                        :name="iconName(item, index)"
+                        :size="itemIconSize(item)"
+                        :bold="isActive(item, index)"
+                        :color="isActive(item, index) ? activeColor : inactiveColor"
+                        :custom-prefix="iconPrefix(item)"
+                    />
+                    <text
+                        v-if="item.badge !== undefined || item.count !== undefined || item.isDot"
+                        class="snake-tabbar__badge"
+                    >
+                        {{ item.isDot ? '' : (item.badge ?? item.count) }}
+                    </text>
+                </view>
+                <text class="snake-tabbar__label" :style="{ fontSize: addUnit(itemTextSize(item), 'rpx') }">
+                    {{ item.text }}
+                </text>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Tabbar
+ * @description 底部导航栏，提供跨端安全区、激活态、徽标和禁用状态。
+ * @see /components/tabbar
+ */
+import { computed, getCurrentInstance, onMounted } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import SnakeIcon from '../snake-icon/snake-icon.vue';
+import type { TabbarEmits, TabbarItem, TabbarProps } from './types';
+
+defineOptions({
+    name: 'Tabbar',
+    options: { addGlobalClass: true, styleIsolation: 'shared' }
+});
+
+const props = withDefaults(defineProps<TabbarProps>(), {
+    items: () => [],
+    list: () => [],
+    current: '',
+    modelValue: 0,
+    show: true,
+    fixed: true,
+    safeAreaInsetBottom: true,
+    customStyle: '',
+    customClass: '',
+    activeColor: 'var(--snake-color-primary, #06D290)',
+    inactiveColor: 'var(--snake-color-text-muted, #909399)',
+    bgColor: 'var(--snake-color-surface)',
+    borderTop: true,
+    hideTabBar: true,
+    midButton: false,
+    iconSize: 40,
+    midButtonSize: 100,
+    textSize: 22,
+    gap: 5,
+    height: 104,
+    zIndex: 120
+});
+
+const emit = defineEmits<TabbarEmits>();
+// `items` 是推荐字段；`list` 保留为旧配置字段。
+const tabItems = computed(() => (props.items.length ? props.items : props.list));
+// 只有调用方显式传入 v-model 时才按索引高亮，避免默认值覆盖 `current`。
+const usesModelValue = computed(() => 'modelValue' in (getCurrentInstance()?.vnode.props ?? {}));
+// 任一项指定宽度后，未指定项必须改为填充剩余空间，不能再按百分比分配。
+const hasCustomWidth = computed(() =>
+    tabItems.value.some(item => item.width !== undefined && item.width !== null && item.width !== '')
+);
+const currentPage = computed(() => {
+    const pages = getCurrentPages();
+    return pages.length ? `/${pages[pages.length - 1].route}` : '';
+});
+const rootStyle = computed(() => [
+    {
+        '--snake-tabbar-active': props.activeColor,
+        '--snake-tabbar-inactive': props.inactiveColor,
+        zIndex: props.zIndex,
+        backgroundColor: props.bgColor
+    },
+    props.customStyle
+]);
+const spacerStyle = computed(() => {
+    if (!props.fixed) return { height: '0' };
+
+    // 凸起按钮会越过栏顶；占位同步增加 60rpx，防止页面末尾内容被遮住。
+    const midButtonHeight = props.midButton ? '60rpx' : '1px';
+    const safeAreaHeight = props.safeAreaInsetBottom ? ' + env(safe-area-inset-bottom)' : '';
+    return { height: `calc(${addUnit(props.height, 'rpx')} + ${midButtonHeight}${safeAreaHeight})` };
+});
+
+onMounted(() => {
+    if (!props.hideTabBar) return;
+
+    // uni-app only permits this API on pages declared in the native tabBar.
+    // A component library cannot inspect the consumer's pages.json at runtime,
+    // so explicitly consume that expected failure on ordinary pages.
+    uni.hideTabBar({ fail: () => {} });
+});
+
+function isActive(item: TabbarItem, index: number) {
+    // pagePath 模式以真实路由为准；纯组件模式才由 v-model/current 控制。
+    if (item.pagePath) return item.pagePath === currentPage.value;
+    if (usesModelValue.value) return index === props.modelValue;
+    return item.key === props.current;
+}
+
+function iconName(item: TabbarItem, index: number) {
+    const normal = item.iconPath ?? item.icon;
+    return isActive(item, index) ? item.selectedIconPath || normal : normal;
+}
+
+function iconPrefix(item: TabbarItem) {
+    if (typeof item.customIcon === 'string') return item.customIcon;
+    return item.customIcon ? 'custom-icon' : 'sicon';
+}
+
+function itemIconSize(item: TabbarItem) {
+    if (props.midButton && item.midButton) return props.midButtonSize;
+    return item.iconSize ?? props.iconSize;
+}
+
+function itemTextSize(item: TabbarItem) {
+    return item.textSize ?? props.textSize;
+}
+
+function itemKey(item: TabbarItem, index: number) {
+    return item.key ?? index;
+}
+
+function itemStyle(item: TabbarItem): Record<string, string> {
+    const style: Record<string, string> = {};
+    if (item.width !== undefined && item.width !== null && item.width !== '') {
+        const width = addUnit(item.width, 'rpx');
+        style.flex = `0 0 ${width}`;
+        style.width = width;
+    } else if (hasCustomWidth.value) {
+        style.flex = '1 1 auto';
+        style.width = 'auto';
+    } else if (tabItems.value.length) {
+        const width = `${100 / tabItems.value.length}%`;
+        style.flex = `0 0 ${width}`;
+        style.width = width;
+    }
+
+    if (props.midButton && item.midButton) {
+        // 图标绝对定位后不再参与文档流，额外顶部内边距为标签留出空间。
+        const size =
+            Number.parseFloat(String(itemIconSize(item))) || Number.parseFloat(String(props.midButtonSize)) || 100;
+        style.paddingTop = addUnit(size / 2 + 8, 'rpx');
+        style.boxSizing = 'border-box';
+    }
+    return style;
+}
+
+async function clickItem(item: TabbarItem, index: number) {
+    if (item.disabled) return;
+
+    if (props.beforeSwitch) {
+        try {
+            // 同步场景必须明确返回 true；Promise resolve 即表示放行。
+            const result = props.beforeSwitch(index);
+            if (typeof result === 'object' && result !== null && 'then' in result) await result;
+            else if (result !== true) return;
+        } catch {
+            return;
+        }
+    }
+
+    emit('change', itemKey(item, index), item);
+    // 原生 tabBar 页面只能通过 switchTab 切换；没有 pagePath 时才更新本地 v-model。
+    if (item.pagePath) uni.switchTab({ url: item.pagePath });
+    else emit('update:modelValue', index);
+}
+</script>
+
+<style lang="scss" scoped>
+.snake-tabbar-spacer {
+    width: 100%;
+}
+.snake-tabbar {
+    box-shadow: 0 -6rpx 24rpx rgba(6, 39, 28, 0.07);
+    color: var(--snake-tabbar-inactive);
+}
+.snake-tabbar--border {
+    border-top: 1px solid var(--snake-color-divider);
+}
+.snake-tabbar--fixed {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+.snake-tabbar--safe {
+    padding-bottom: env(safe-area-inset-bottom);
+}
+.snake-tabbar__inner {
+    display: flex;
+    max-width: 760px;
+    margin: 0 auto;
+    align-items: stretch;
+}
+.snake-tabbar__item {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 5rpx;
+    color: var(--snake-tabbar-inactive);
+    transition:
+        background-color 0.2s,
+        color 0.2s;
+}
+.snake-tabbar__item--active {
+    color: var(--snake-tabbar-active);
+    font-weight: 650;
+}
+.snake-tabbar__item--disabled {
+    opacity: 0.45;
+}
+.snake-tabbar__item--mid {
+    position: relative;
+}
+.snake-tabbar__item--mid .snake-tabbar__icon-wrap {
+    position: absolute;
+    top: -55rpx;
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 50%;
+    background: var(--snake-color-surface);
+    box-shadow: 0 0 0 1px var(--snake-color-divider);
+}
+.snake-tabbar__item--hover {
+    background: var(--snake-color-surface-muted);
+}
+.snake-tabbar__icon-wrap {
+    position: relative;
+    display: flex;
+    height: 42rpx;
+    align-items: center;
+    justify-content: center;
+}
+.snake-tabbar__badge {
+    position: absolute;
+    top: -8rpx;
+    right: -24rpx;
+    min-width: 24rpx;
+    padding: 2rpx 6rpx;
+    border-radius: 999rpx;
+    color: #fff;
+    background: var(--snake-color-error, #f56c6c);
+    font-size: 16rpx;
+    line-height: 20rpx;
+    text-align: center;
+}
+.snake-tabbar__label {
+    font-size: 22rpx;
+    line-height: 1.2;
+}
+@media (prefers-reduced-motion: reduce) {
+    .snake-tabbar__item {
+        transition: none;
+    }
+}
+</style>

package/components/snake-tabbar/types.ts

@@ -0,0 +1,93 @@
+import type { StyleValue } from '../../types/global';
+
+/** Tabbar 导航项。 */
+export interface TabbarItem {
+    /** 导航项唯一标识。 */
+    key?: string | number;
+    /** 展示文字。 */
+    text?: string;
+    /** 图标名称。 */
+    icon?: string;
+    /** 未选中时的图标名称。 */
+    iconPath?: string;
+    /** 选中时的图标名称。 */
+    selectedIconPath?: string;
+    /** 图标字体前缀；`true` 使用 `custom-icon`，字符串直接作为前缀。 */
+    customIcon?: boolean | string;
+    /** 页面路径；提供后会根据当前页面自动确定激活状态。 */
+    pagePath?: string;
+    /** 是否作为中间凸起按钮显示。 */
+    midButton?: boolean;
+    /** 单项宽度；设置任意一项后，其余未设置项自动填充剩余空间。 */
+    width?: string | number;
+    /** 单项图标尺寸。 */
+    iconSize?: string | number;
+    /** 单项文字尺寸。 */
+    textSize?: string | number;
+    /** 单项图标和文字间距。 */
+    gap?: string | number;
+    /** 角标数量。 */
+    count?: string | number;
+    /** 是否显示点状角标。 */
+    isDot?: boolean;
+    /** 是否禁用。 */
+    disabled?: boolean;
+    /** 徽标文字或数字。 */
+    badge?: string | number;
+}
+
+/** Tabbar 组件的公开属性。 */
+export interface TabbarProps {
+    /** 导航项列表。 */
+    items?: TabbarItem[];
+    /** 备用导航项列表；未传 `items` 时使用。 */
+    list?: TabbarItem[];
+    /** 当前激活项 key。 */
+    current?: string | number;
+    /** 通过 v-model 绑定的激活项索引。 */
+    modelValue?: string | number;
+    /** 是否显示 tabbar。 */
+    show?: boolean;
+    /** 是否固定在底部。 */
+    fixed?: boolean;
+    /** 是否预留底部安全区。 */
+    safeAreaInsetBottom?: boolean;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 激活颜色。 */
+    activeColor?: string;
+    /** 未激活颜色。 */
+    inactiveColor?: string;
+    /** tabbar 背景色。 */
+    bgColor?: string;
+    /** 是否展示顶部边框。 */
+    borderTop?: boolean;
+    /** 是否在挂载后隐藏原生 tabBar；默认开启。非原生 tabBar 页面会安全忽略。 */
+    hideTabBar?: boolean;
+    /** 切换前的拦截器；返回 `true` 或 resolve 的 Promise 才会继续切换。 */
+    beforeSwitch?: (index: number) => boolean | Promise<unknown>;
+    /** 是否启用中间凸起按钮。 */
+    midButton?: boolean;
+    /** 常规图标尺寸。 */
+    iconSize?: string | number;
+    /** 中间凸起按钮图标尺寸。 */
+    midButtonSize?: string | number;
+    /** 常规文字尺寸。 */
+    textSize?: string | number;
+    /** 图标和文字间距。 */
+    gap?: string | number;
+    /** 导航栏高度，单位 rpx。 */
+    height?: string | number;
+    /** 层级。 */
+    zIndex?: number;
+}
+
+/** Tabbar 组件事件。 */
+export type TabbarEmits = {
+    /** 点击导航项时返回 key 和完整项。 */
+    change: [key: string | number, item: TabbarItem];
+    /** 更新 v-model 激活项索引。 */
+    'update:modelValue': [value: string | number];
+};

package/components/snake-tabs/snake-tabs.vue

@@ -0,0 +1,305 @@
+<template>
+    <view class="snake-tabs" :style="rootStyle" :class="customClass">
+        <view>
+            <scroll-view
+                scroll-x
+                class="snake-tabs__scroll-view"
+                :scroll-left="scrollLeft"
+                :show-scrollbar="false"
+                scroll-with-animation
+            >
+                <view :id="id" class="snake-tabs__scroll-box" :class="{ 'snake-tabs__scroll-flex': !isScroll }">
+                    <view
+                        v-for="(item, index) in list"
+                        :id="`${id}-item-${index}`"
+                        :key="index"
+                        class="snake-tabs__item snake-line-1"
+                        :class="{ 'snake-tabs__item--hidden': item.hidden }"
+                        :style="tabItemStyle(index)"
+                        @tap="clickTab(index)"
+                    >
+                        <view
+                            v-if="Number(badgeCount(item)) !== 0"
+                            class="snake-tabs__badge"
+                            :class="{ 'snake-tabs__badge--dot': isDot }"
+                            :style="{ top: `${offset[0]}rpx`, right: `${offset[1]}rpx` }"
+                        >
+                            {{ badgeText(item) }}
+                        </view>
+                        {{ itemValue(item, name, 'name') }}
+                    </view>
+                    <view v-if="showBar" class="snake-tabs__bar" :style="tabBarStyle" />
+                </view>
+            </scroll-view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Tabs
+ * @description tabs 标签组件，支持横向滚动、激活项居中、徽标和滑块。
+ * @see /components/tabs
+ */
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import type { TabItem, TabsEmits, TabsProps } from './types';
+
+defineOptions({
+    name: 'Tabs',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+});
+
+const props = withDefaults(defineProps<TabsProps>(), {
+    customStyle: '',
+    customClass: '',
+    isScroll: true,
+    list: () => [],
+    current: 0,
+    height: 80,
+    fontSize: 30,
+    duration: 0.5,
+    activeColor: 'var(--snake-color-primary, #06D290)',
+    inactiveColor: 'var(--snake-color-text, #303133)',
+    barWidth: 40,
+    barHeight: 6,
+    gutter: 30,
+    bgColor: '#fff',
+    name: 'name',
+    count: 'count',
+    offset: () => [5, 20],
+    isDot: false,
+    bold: true,
+    activeItemStyle: () => ({}),
+    showBar: true,
+    barStyle: () => ({}),
+    itemWidth: 'auto'
+});
+
+const emit = defineEmits<TabsEmits>();
+const instance = getCurrentInstance();
+const scrollLeft = ref(0);
+const tabQueryInfo = ref<UniApp.NodeInfo[]>([]);
+const componentWidth = ref(0);
+const scrollBarLeft = ref(0);
+const parentLeft = ref(0);
+const id = `snake-tabs-${instance?.uid ?? 0}`;
+const currentIndex = ref<number | string>(props.current);
+const barFirstTimeMove = ref(true);
+let initTimer: ReturnType<typeof setTimeout> | undefined;
+let firstMoveTimer: ReturnType<typeof setTimeout> | undefined;
+
+const rootStyle = computed(() => [{ background: props.bgColor }, props.customStyle]);
+const tabBarStyle = computed(() => [
+    {
+        width: addUnit(props.barWidth, 'rpx'),
+        transform: `translate(${scrollBarLeft.value}px, -100%)`,
+        transitionDuration: `${barFirstTimeMove.value ? 0 : props.duration}s`,
+        backgroundColor: props.activeColor,
+        height: addUnit(props.barHeight, 'rpx'),
+        opacity: barFirstTimeMove.value ? 0 : 1,
+        borderRadius: `${Number(props.barHeight) / 2}px`
+    },
+    props.barStyle
+]);
+
+function itemValue(item: TabItem, key: string, fallback: 'name' | 'count') {
+    return item[key] || item[fallback];
+}
+
+function badgeCount(item: TabItem) {
+    return itemValue(item, props.count, 'count') || 0;
+}
+
+function badgeText(item: TabItem) {
+    if (props.isDot) return '';
+    const value = badgeCount(item);
+    return Number(value) > 99 ? '99+' : value;
+}
+
+function tabItemStyle(index: number) {
+    const style: Record<string, string> = {
+        height: addUnit(props.height, 'rpx'),
+        lineHeight: addUnit(props.height, 'rpx'),
+        fontSize: addUnit(props.fontSize, 'rpx'),
+        transitionDuration: `${props.duration}s`,
+        padding: props.isScroll ? `0 ${addUnit(props.gutter, 'rpx')}` : '',
+        flex: props.isScroll ? 'auto' : '1',
+        width: addUnit(props.itemWidth),
+        color: index === Number(currentIndex.value) ? props.activeColor : props.inactiveColor
+    };
+    if (index === Number(currentIndex.value) && props.bold) style.fontWeight = 'bold';
+    return [style, index === Number(currentIndex.value) ? props.activeItemStyle : {}];
+}
+
+function getRect(selector: string) {
+    return new Promise<UniApp.NodeInfo | null>(resolve => {
+        uni.createSelectorQuery()
+            .in(instance?.proxy as any)
+            .select(selector)
+            .boundingClientRect(rect => resolve((rect as UniApp.NodeInfo | null) ?? null))
+            .exec();
+    });
+}
+
+async function init() {
+    await nextTick();
+    if (typeof uni === 'undefined' || typeof uni.createSelectorQuery !== 'function') return;
+    const tabRect = await getRect(`#${id}`);
+    if (!tabRect) return;
+    parentLeft.value = Number(tabRect.left) || 0;
+    componentWidth.value = Number(tabRect.width) || 0;
+    getTabRect();
+}
+
+function clickTab(index: number) {
+    if (index === Number(currentIndex.value)) return;
+    emit('change', index);
+}
+
+function getTabRect() {
+    const query = uni.createSelectorQuery().in(instance?.proxy as any);
+    for (let index = 0; index < props.list.length; index += 1) {
+        query.select(`#${id}-item-${index}`).fields({ size: true, rect: true }, () => {});
+    }
+    query.exec(results => {
+        tabQueryInfo.value = (results ?? []) as UniApp.NodeInfo[];
+        scrollByIndex();
+    });
+}
+
+function scrollByIndex() {
+    const tabInfo = tabQueryInfo.value[Number(currentIndex.value)];
+    if (!tabInfo) return;
+    const tabWidth = Number(tabInfo.width) || 0;
+    const offsetLeft = (Number(tabInfo.left) || 0) - parentLeft.value;
+    const nextScrollLeft = offsetLeft - (componentWidth.value - tabWidth) / 2;
+    scrollLeft.value = nextScrollLeft < 0 ? 0 : nextScrollLeft;
+    const left = (Number(tabInfo.left) || 0) + tabWidth / 2 - parentLeft.value;
+    scrollBarLeft.value = left - uni.upx2px(Number(props.barWidth)) / 2;
+    if (!barFirstTimeMove.value) return;
+    if (firstMoveTimer) clearTimeout(firstMoveTimer);
+    firstMoveTimer = setTimeout(() => {
+        barFirstTimeMove.value = false;
+        firstMoveTimer = undefined;
+    }, 100);
+}
+
+watch(
+    () => props.list,
+    (nextList, previousList) => {
+        if (nextList.length !== previousList.length) currentIndex.value = 0;
+        void nextTick(init);
+    }
+);
+
+watch(
+    () => props.current,
+    value => {
+        void nextTick(() => {
+            currentIndex.value = value;
+            scrollByIndex();
+        });
+    },
+    { immediate: true }
+);
+
+onMounted(() => {
+    void nextTick(() => {
+        initTimer = setTimeout(() => {
+            initTimer = undefined;
+            void init();
+        }, 500);
+    });
+});
+
+onBeforeUnmount(() => {
+    if (initTimer) clearTimeout(initTimer);
+    if (firstMoveTimer) clearTimeout(firstMoveTimer);
+});
+
+defineExpose({ init, clickTab, scrollByIndex });
+</script>
+
+<style scoped>
+.snake-tabs,
+.snake-tabs__scroll-view,
+.snake-tabs__scroll-box,
+.snake-tabs__item {
+    box-sizing: border-box;
+}
+.snake-tabs__scroll-box {
+    position: relative;
+    white-space: nowrap;
+}
+.snake-tabs__scroll-view {
+    position: relative;
+    width: 100%;
+    white-space: nowrap;
+}
+.snake-tabs__item {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition-property: background-color, color;
+}
+.snake-tabs__item--hidden {
+    display: none;
+}
+.snake-tabs__bar {
+    position: absolute;
+    bottom: 0;
+}
+.snake-tabs__scroll-flex {
+    display: flex;
+    justify-content: space-between;
+}
+.snake-tabs__badge {
+    position: absolute;
+    z-index: 9;
+    display: inline-flex;
+    min-width: 28rpx;
+    height: 28rpx;
+    align-items: center;
+    justify-content: center;
+    padding: 0 7rpx;
+    border-radius: 100rpx;
+    color: #fff;
+    background: var(--snake-color-error, #fa3534);
+    font-size: 18rpx;
+    line-height: 28rpx;
+    transform: scale(0.8);
+    transform-origin: center;
+}
+.snake-tabs__badge--dot {
+    width: 16rpx;
+    min-width: 16rpx;
+    height: 16rpx;
+    padding: 0;
+}
+::-webkit-scrollbar {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+    background: transparent;
+    -webkit-appearance: none;
+}
+/* #ifdef H5 */
+.snake-tabs__scroll-view :deep(::-webkit-scrollbar) {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+    background: transparent;
+    -webkit-appearance: none;
+}
+/* #endif */
+</style>