im-ui-mobile 0.1.1 → 0.1.3

package/components/im-tabs/tabs-navigation.vue

@@ -0,0 +1,489 @@
+<!-- components/im-tabs/tabs-navigation.vue -->
+<template>
+    <view ref="navRef" :class="[
+        'im-tabs-nav',
+        navClass,
+        {
+            'im-tabs-nav-scrollable': scrollable,
+            'im-tabs-nav-centered': centered && !scrollable
+        }
+    ]" :style="navStyle" :scroll-x="scrollable" :scroll-with-animation="true" :scroll-left="scrollLeft"
+        :scroll-into-view="scrollIntoView" @scroll="onScroll">
+        <!-- 标签项 -->
+        <view v-for="(item, index) in items" :key="item.id || index" :id="`tab-${index}`" :class="[
+            'im-tabs-tab',
+            item.class,
+            `im-tabs-tab-icon-${iconPosition}`,
+            {
+                'im-tabs-tab-active': currentIndex === index,
+                'im-tabs-tab-disabled': item.disabled
+            }
+        ]" :style="[tabStyle, item.style]" :data-index="index" @click="handleTabClick(index, item)"
+            @touchstart="onTouchStart">
+            <!-- 自定义渲染 -->
+            <template v-if="item.renderTitle">
+                <view class="im-tabs-tab-content">
+                    {{ item.renderTitle(item, currentIndex === index) }}
+                </view>
+            </template>
+
+            <template v-else>
+                <view class="im-tabs-tab-content"
+                    :class="{ 'im-tabs-tab-content-badge': item.badge || item.badgeType === 'dot' }">
+                    <!-- 图标 -->
+                    <im-icon v-if="showIcon && (item.icon || item.activeIcon)"
+                        :name="currentIndex === index && item.activeIcon ? item.activeIcon : item.icon"
+                        class="im-tabs-tab-icon" :color="getIconColor(item, index)" />
+
+                    <!-- 徽标 -->
+                    <template v-if="item.badge || item.badgeType === 'dot'">
+                        <im-badge v-if="item.badgeType === 'dot'" size="small" dot>
+                            <!-- 标题 -->
+                            <text class="im-tabs-tab-title">
+                                {{ item.title }}
+                            </text>
+                        </im-badge>
+                        <im-badge v-else-if="item.badgeType === 'number' && item.badge" size="small"
+                            :value="item.badge">
+                            <!-- 标题 -->
+                            <text class="im-tabs-tab-title">
+                                {{ item.title }}
+                            </text>
+                        </im-badge>
+                        <im-badge v-else-if="item.badgeType === 'text' && item.badge" size="small" :value="item.badge">
+                            <!-- 标题 -->
+                            <text class="im-tabs-tab-title">
+                                {{ item.title }}
+                            </text>
+                        </im-badge>
+                    </template>
+                    <!-- 标题 -->
+                    <text v-else class="im-tabs-tab-title">
+                        {{ item.title }}
+                    </text>
+                </view>
+            </template>
+        </view>
+
+        <!-- 滑动条 -->
+        <view v-if="showSlider && type === 'line'" class="im-tabs-slider" :style="sliderStyle" />
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, inject } from 'vue'
+import type { TabItem } from '../../types/components/tabs'
+
+// 注入父组件数据
+const tabsData = inject<any>('tabs')
+
+if (!tabsData) {
+    console.error('tabs-navigation: 未找到父组件注入的 tabs 数据')
+}
+
+const {
+    items = [],
+    type = 'line',
+    showSlider = true,
+    sliderStyle = {},
+    scrollable = false,
+    centered = false,
+    gutter = 0,
+    showIcon = false,
+    iconPosition = 'left',
+    minTabWidth = 0,
+    maxTabWidth = 0,
+    onTabClick,
+    navClass = ''
+} = tabsData || {}
+
+const navRef = ref<any>(null)
+const scrollLeft = ref(0)
+const scrollIntoView = ref('')
+
+// 定义属性
+const props = defineProps<{
+    currentIndex: 0
+}>()
+
+// 监听 currentIndex 变化，更新 scroll-into-view
+watch(() => props.currentIndex, (newVal) => {
+    if (scrollable && newVal >= 0) {
+        scrollIntoView.value = `tab-${newVal}`
+
+        // 在小程序环境中，延迟更新以确保生效
+        setTimeout(() => {
+            scrollIntoView.value = `tab-${newVal}`
+        }, 50)
+    }
+}, { immediate: true })
+
+// 计算属性
+const navStyle = computed(() => {
+    const style: Record<string, any> = {}
+
+    if (gutter > 0) {
+        style.gap = `${gutter}px`
+    }
+
+    // 如果是可滚动模式，设置滚动相关样式
+    if (scrollable) {
+        style.whiteSpace = 'nowrap'
+        style.display = 'flex'
+        style.flexWrap = 'nowrap'
+    }
+
+    return style
+})
+
+const tabStyle = computed(() => {
+    const style: Record<string, any> = {}
+
+    if (minTabWidth > 0) {
+        style.minWidth = `${minTabWidth}px`
+    }
+
+    if (maxTabWidth > 0) {
+        style.maxWidth = `${maxTabWidth}px`
+    }
+
+    if (centered && !scrollable) {
+        style.flex = 1
+    }
+
+    // 如果是可滚动模式，设置为行内块元素
+    if (scrollable) {
+        style.display = 'inline-flex'
+        style.flexShrink = 0
+    }
+
+    return style
+})
+
+// 获取图标颜色
+const getIconColor = (item: TabItem, index: number | string) => {
+    if (item.disabled) {
+        return '#c8c9cc'
+    }
+
+    if (props.currentIndex === index) {
+        return '#1989fa'
+    }
+
+    return '#646566'
+}
+
+// 触摸开始
+const onTouchStart = () => {
+    // 可以在这里添加触摸反馈
+}
+
+// 滚动事件
+const onScroll = (event: any) => {
+    if (scrollable) {
+        scrollLeft.value = event.detail?.scrollLeft || 0
+    }
+}
+
+// 标签点击
+const handleTabClick = (index: number | string, tab: TabItem) => {
+    if (onTabClick) {
+        onTabClick(index, tab)
+    }
+}
+
+// 暴露方法供父组件调用
+defineExpose({
+    getNavRef: () => navRef.value,
+    getScrollLeft: () => scrollLeft.value
+})
+</script>
+
+<style lang="scss" scoped>
+.im-tabs-nav {
+    display: flex;
+    position: relative;
+    flex-shrink: 0;
+    z-index: 1;
+    overflow: hidden;
+
+    // 水平布局
+    .im-tabs-top &,
+    .im-tabs-bottom & {
+        flex-direction: row;
+    }
+
+    // 垂直布局
+    .im-tabs-left &,
+    .im-tabs-right & {
+        flex-direction: column;
+        width: auto;
+        min-width: 80px;
+        max-width: 200px;
+    }
+
+    // 可滚动模式
+    &-scrollable {
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        .im-tabs-tab {
+            flex-shrink: 0;
+        }
+    }
+
+    // 居中模式（非滚动时）
+    &-centered {
+        justify-content: center;
+    }
+}
+
+.im-tabs-tab {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    cursor: pointer;
+    transition: all 0.3s;
+    user-select: none;
+    padding: 0 12px;
+    box-sizing: border-box;
+
+    // 水平布局
+    .im-tabs-top &,
+    .im-tabs-bottom & {
+        height: 100%;
+    }
+
+    // 垂直布局
+    .im-tabs-left &,
+    .im-tabs-right & {
+        width: 100%;
+        padding: 12px;
+        justify-content: flex-start;
+    }
+
+    // 禁用状态
+    &-disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+
+        &:active {
+            opacity: 0.5;
+        }
+    }
+
+    // 激活状态
+    &-active {
+        font-weight: 600;
+    }
+
+    // 图标位置
+    &-icon-left {
+        flex-direction: row;
+
+        .im-tabs-tab-icon {
+            margin-right: 4px;
+        }
+    }
+
+    &-icon-right {
+        flex-direction: row-reverse;
+
+        .im-tabs-tab-icon {
+            margin-left: 4px;
+        }
+    }
+
+    &-icon-top {
+        flex-direction: column;
+
+        .im-tabs-tab-icon {
+            margin-bottom: 4px;
+        }
+    }
+
+    &-icon-bottom {
+        flex-direction: column-reverse;
+
+        .im-tabs-tab-icon {
+            margin-top: 4px;
+        }
+    }
+}
+
+.im-tabs-tab-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    white-space: nowrap;
+
+    &-badge {
+        height: 77rpx;
+    }
+}
+
+.im-tabs-tab-title {
+    font-size: 14px;
+    line-height: 1.4;
+    transition: color 0.3s;
+
+    .im-tabs-line & {
+        color: #646566;
+    }
+
+    .im-tabs-tab-active & {
+        color: #1989fa;
+    }
+
+    .im-tabs-card &,
+    .im-tabs-button &,
+    .im-tabs-segment & {
+        color: #323233;
+    }
+
+    .im-tabs-card &-active,
+    .im-tabs-button &-active,
+    .im-tabs-segment &-active {
+        color: #1989fa;
+    }
+}
+
+.im-tabs-tab-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    transition: color 0.3s;
+
+    .im-tabs-line & {
+        color: #646566;
+    }
+
+    .im-tabs-tab-active & {
+        color: #1989fa;
+    }
+}
+
+// 滑动条
+.im-tabs-slider {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    border-radius: 2px;
+
+    .im-tabs-bottom & {
+        top: 0;
+        bottom: auto;
+    }
+
+    .im-tabs-left & {
+        right: 0;
+        left: auto;
+        top: 0;
+        width: 2px;
+        height: auto;
+    }
+
+    .im-tabs-right & {
+        left: 0;
+        top: 0;
+        width: 2px;
+        height: auto;
+    }
+}
+
+// 不同类型
+.im-tabs-nav {
+    .im-tabs-line & {
+        .im-tabs-tab {
+            background-color: transparent;
+        }
+    }
+
+    .im-tabs-card & {
+        background-color: #f2f3f5;
+        padding: 4px;
+        border-radius: 8px;
+
+        .im-tabs-tab {
+            background-color: transparent;
+            border-radius: 6px;
+            margin: 0 2px;
+
+            &-active {
+                background-color: #ffffff;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            }
+        }
+    }
+
+    .im-tabs-button & {
+        .im-tabs-tab {
+            border: 1px solid #ebedf0;
+            margin: 0 4px;
+            border-radius: 20px;
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+
+            &-active {
+                border-color: #1989fa;
+                background-color: #1989fa;
+
+                .im-tabs-tab-title,
+                .im-tabs-tab-icon {
+                    color: #ffffff;
+                }
+            }
+        }
+    }
+
+    .im-tabs-segment & {
+        background-color: #f2f3f5;
+        border-radius: 20px;
+        padding: 2px;
+
+        .im-tabs-tab {
+            flex: 1;
+            border-radius: 18px;
+
+            &-active {
+                background-color: #ffffff;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            }
+        }
+    }
+}
+
+// 响应式
+@media (max-width: 768px) {
+    .im-tabs-tab-title {
+        font-size: 13px;
+    }
+
+    .im-tabs-tab-icon {
+        font-size: 16px;
+    }
+
+    .im-tabs-left,
+    .im-tabs-right {
+        .im-tabs-nav {
+            min-width: 70px;
+        }
+    }
+}
+</style>

package/components/im-tabs/utils/helper.ts

@@ -0,0 +1,181 @@
+import type { TabItem } from '../../../types/components/tabs'
+
+/**
+ * 验证标签页配置
+ */
+export function validateTabsConfig(config: any) {
+    const errors: string[] = []
+
+    if (!Array.isArray(config.items)) {
+        errors.push('items 必须是数组')
+    }
+
+    if (config.height && config.height < 30) {
+        errors.push('高度不能小于30px')
+    }
+
+    if (config.duration && config.duration < 0) {
+        errors.push('动画持续时间不能为负数')
+    }
+
+    return errors
+}
+
+/**
+ * 计算标签宽度
+ */
+export function calculateTabWidth(
+    tabs: TabItem[],
+    options: {
+        containerWidth?: number
+        minTabWidth?: number
+        maxTabWidth?: number
+        gutter?: number
+        centered?: boolean
+    }
+): number {
+    if (!tabs.length) return 0
+
+    const { containerWidth = 0, minTabWidth = 0, maxTabWidth = 0, gutter = 0, centered = false } = options
+
+    // 如果有容器宽度，计算合适的宽度
+    if (containerWidth > 0) {
+        const availableWidth = containerWidth - gutter * (tabs.length - 1)
+        let calculatedWidth = availableWidth / tabs.length
+
+        // 应用最小和最大宽度限制
+        if (minTabWidth > 0) {
+            calculatedWidth = Math.max(calculatedWidth, minTabWidth)
+        }
+
+        if (maxTabWidth > 0) {
+            calculatedWidth = Math.min(calculatedWidth, maxTabWidth)
+        }
+
+        return calculatedWidth
+    }
+
+    // 如果没有容器宽度，返回0（使用内容自适应）
+    return 0
+}
+
+/**
+ * 获取激活的标签索引
+ */
+export function getActiveIndex(
+    items: TabItem[],
+    modelValue?: number,
+    activeKey?: string | number
+): number {
+    if (activeKey !== undefined) {
+        const index = items.findIndex(item =>
+            (item.id !== undefined && item.id === activeKey) ||
+            item.title === activeKey
+        )
+        if (index !== -1) return index
+    }
+
+    if (modelValue !== undefined) {
+        return Math.max(0, Math.min(modelValue, items.length - 1))
+    }
+
+    return 0
+}
+
+/**
+ * 更新标签徽标
+ */
+export function updateTabBadge(
+    items: TabItem[],
+    index: number,
+    badge: number | string,
+    type: 'number' | 'text' = 'number'
+): TabItem[] {
+    return items.map((item, i) => {
+        if (i === index) {
+            return {
+                ...item,
+                badge: typeof badge === 'number' ? badge : undefined,
+                badgeText: typeof badge === 'string' ? badge : undefined,
+                badgeType: type
+            }
+        }
+        return item
+    })
+}
+
+/**
+ * 更新标签红点状态
+ */
+export function updateTabRedDot(
+    items: TabItem[],
+    index: number,
+    showRedDot: boolean
+): TabItem[] {
+    return items.map((item, i) => {
+        if (i === index) {
+            return {
+                ...item,
+                showRedDot
+            }
+        }
+        return item
+    })
+}
+
+/**
+ * 禁用/启用标签
+ */
+export function toggleTabDisabled(
+    items: TabItem[],
+    index: number,
+    disabled: boolean
+): TabItem[] {
+    return items.map((item, i) => {
+        if (i === index) {
+            return {
+                ...item,
+                disabled
+            }
+        }
+        return item
+    })
+}
+
+/**
+ * 生成标签样式
+ */
+export function generateTabStyles(options: {
+    type?: string
+    position?: string
+    height?: number
+    background?: string
+    border?: boolean
+}): Record<string, any> {
+    const styles: Record<string, any> = {}
+
+    // 基础样式
+    if (options.height) {
+        styles.height = `${options.height}px`
+    }
+
+    if (options.background) {
+        styles.backgroundColor = options.background
+    }
+
+    // 位置相关样式
+    if (options.position === 'left' || options.position === 'right') {
+        styles.flexDirection = 'column'
+    }
+
+    // 边框样式
+    if (options.border) {
+        if (options.position === 'top') {
+            styles.borderBottom = '1px solid #ebedf0'
+        } else if (options.position === 'bottom') {
+            styles.borderTop = '1px solid #ebedf0'
+        }
+    }
+
+    return styles
+}