hy-app 0.5.7 → 0.5.9

package/components/hy-rolling-num/props.ts

@@ -0,0 +1,68 @@
+import type { CSSProperties, PropType } from 'vue'
+
+const rollingNumProps = {
+    /** 要显示的数字或字符串值 */
+    value: {
+        type: [String, Number],
+        default: 0
+    },
+    /** 数字字体大小 */
+    size: {
+        type: [String, Number],
+        default: '32rpx'
+    },
+    /** 数字颜色 */
+    color: {
+        type: String,
+        default: '#333'
+    },
+    /** 字体粗细 */
+    fontWeight: {
+        type: [String, Number],
+        default: 'normal'
+    },
+    /** 单个数字的高度 */
+    height: {
+        type: [String, Number],
+        default: '40rpx'
+    },
+    /** 滚动动画持续时间（秒） */
+    duration: {
+        type: Number,
+        default: 1.5
+    },
+    /** 数字间距 */
+    letterSpacing: {
+        type: [String, Number],
+        default: 0
+    },
+    /**
+     * 滚动方向：向上、向下或交替
+     * @values up,down,alternate
+     * */
+    scrollDirection: {
+        type: String,
+        default: 'up'
+    },
+    /**
+     * 滚动停止顺序：从左到右或从右到左
+     * @values ltr,rtl
+     * */
+    stopOrder: {
+        type: String,
+        default: 'ltr'
+    },
+    /** 每个数字滚动的延迟时间间隔（秒） */
+    delayStep: {
+        type: Number,
+        default: 0.1
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default rollingNumProps

package/components/hy-scroll-list/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 /* 暗色主题 */
 @include b(theme){

package/components/hy-search/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 $hy-search-close-size: 20px !default;
 

package/components/hy-signature/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 @include b(signature) {
   @include e(content) {

package/components/hy-slider/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 
 @include b(slider) {

package/components/hy-status-bar/index.scss

@@ -1,4 +1,4 @@
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 @include b(status-bar) {
   // nvue会默认100%，如果nvue下，显式写100%的话，会导致宽度不为100%而异常

package/components/hy-steps/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 @include b(steps) {
   @include flex;

package/components/hy-sticky/hy-sticky.vue

@@ -20,7 +20,7 @@
 import { ref, computed, onMounted, onUnmounted, nextTick, getCurrentInstance, watch } from 'vue'
 import type { CSSProperties } from 'vue'
 import { onPageScroll } from '@dcloudio/uni-app'
-import { addUnit, getRect } from '../../libs'
+import { addUnit, getRect, guid } from '../../libs'
 import type { IStickyEmits } from './typing'
 import stickyProps from './props'
 
@@ -28,7 +28,7 @@ const props = defineProps(stickyProps)
 const emit = defineEmits<IStickyEmits>()
 
 const instance = getCurrentInstance()
-const sentinelId = `hy-sticky-sentinel-${Math.random().toString(36).slice(2, 9)}`
+const sentinelId = guid()
 const stickyRef = ref<HTMLElement | null>(null)
 const isFixed = ref(false)
 const placeholderHeight = ref(0)
@@ -81,9 +81,9 @@ const querySentinel = (): Promise<{
                     .exec((r2: any[]) => {
                         const stickyRect = (r2 && r2[0]) || {}
                         resolve({
-                            sentinelTop: sentinelRect.top ?? 0,
-                            sentinelBottom: sentinelRect.bottom ?? 0,
-                            stickyHeight: stickyRect.height ?? 0
+                            sentinelTop: sentinelRect.top || 0,
+                            sentinelBottom: sentinelRect.bottom || 0,
+                            stickyHeight: stickyRect.height || 0
                         })
                     })
             })

package/components/hy-sticky/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 @include b(sticky) {
   width: 100%;

package/components/hy-submit-bar/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 
 @include b(submit-bar) {

package/components/hy-subsection/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 
 @include b(subsection) {

package/components/hy-swipe-action/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 @include b(swipe-action) {
   position: relative;

package/components/hy-swiper/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 
 @include b(swiper) {
@@ -24,7 +24,7 @@
         flex: 1;
 
 
-        @include m([image, video]){
+        @include m(image, video){
           flex: 1;
         }
 

package/components/hy-switch/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 @include b(switch) {
   @include flex(row);

package/components/hy-tabbar/hy-tabbar.vue

@@ -95,7 +95,6 @@ watch(
 onMounted(() => {
     nextTick(() => {
         getRect('.list', true, instance).then((res) => {
-            console.log(res, current.value)
             rectList.value = res
         })
     })

package/components/hy-tabbar/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 @include b(tabbar) {
   height: 70px;

package/components/hy-tabbar-group/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 @include b(tabbar-group) {
   display: flex;

package/components/hy-tabbar-item/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 
 @include b(tabbar-item) {

package/components/hy-table/hy-table.vue

@@ -0,0 +1,358 @@
+<template>
+    <view class="hy-table" :style="{ height: addUnit(height) }">
+        <!-- 主容器 -->
+        <view class="hy-table__container">
+            <!-- 表头区域 -->
+            <view class="hy-table__header">
+                <!-- 固定左列表头 -->
+                <view v-if="leftFixedColumns.length > 0" class="hy-table__header--left">
+                    <view
+                        class="hy-table__header__th"
+                        v-for="(col, index) in leftFixedColumns"
+                        :key="col.key || index"
+                        :style="[getCellStyle(col, true)]"
+                        @click="handleSort(col)"
+                    >
+                        <text class="hy-table__header__th--text">{{ col.title }}</text>
+                        <!-- 排序图标 -->
+                        <view v-if="col.sortable" class="hy-table__header__th--sort">
+                            <hy-icon
+                                :name="IconConfig.ARROW_UP_FILL"
+                                size="10"
+                                :custom-class="sortKey === col.key && sortType === 'asc' ? 'is-active' : ''"
+                            />
+                            <hy-icon
+                                :name="IconConfig.ARROW_DOWN_FILL"
+                                size="10"
+                                :custom-class="sortKey === col.key && sortType === 'desc' ? 'is-active' : ''"
+                            />
+                        </view>
+                    </view>
+                </view>
+                <!-- 中间表头 -->
+                <view class="hy-table__header--center" :style="{ paddingLeft: `${leftFixedWidth}px`, paddingRight: `${rightFixedWidth}px` }">
+                    <view
+                        class="hy-table__header__th"
+                        v-for="(col, index) in scrollColumns"
+                        :key="col.key || index"
+                        :style="[getCellStyle(col, true)]"
+                        @click="handleSort(col)"
+                    >
+                        <text class="hy-table__header__th--text">{{ col.title }}</text>
+                        <!-- 排序图标 -->
+                        <view v-if="col.sortable" class="hy-table__header__th--sort">
+                            <hy-icon
+                                :name="IconConfig.ARROW_UP_FILL"
+                                size="10"
+                                :custom-class="sortKey === col.key && sortType === 'asc' ? 'is-active' : ''"
+                            />
+                            <hy-icon
+                                :name="IconConfig.ARROW_DOWN_FILL"
+                                size="10"
+                                :custom-class="sortKey === col.key && sortType === 'desc' ? 'is-active' : ''"
+                            />
+                        </view>
+                    </view>
+                </view>
+                <!-- 固定右列表头 -->
+                <view v-if="rightFixedColumns.length > 0" class="hy-table__header--right">
+                    <view
+                        class="hy-table__header__th"
+                        v-for="(col, index) in rightFixedColumns"
+                        :key="col.key || index"
+                        :style="[getCellStyle(col, true)]"
+                        @click="handleSort(col)"
+                    >
+                        <text class="hy-table__header__th--text">{{ col.title }}</text>
+                        <!-- 排序图标 -->
+                        <view v-if="col.sortable" class="hy-table__header__th--sort">
+                            <hy-icon
+                                :name="IconConfig.ARROW_UP_FILL"
+                                size="10"
+                                :custom-class="sortKey === col.key && sortType === 'asc' ? 'is-active' : ''"
+                            />
+                            <hy-icon
+                                :name="IconConfig.ARROW_DOWN_FILL"
+                                size="10"
+                                :custom-class="sortKey === col.key && sortType === 'desc' ? 'is-active' : ''"
+                            />
+                        </view>
+                    </view>
+                </view>
+            </view>
+            
+            <!-- 内容区域 -->
+            <scroll-view 
+                class="hy-table__body"
+                scroll-y
+                :scroll-top="scrollTop"
+                @scroll="handleScroll"
+            >
+                <!-- 内容包装器 -->
+                <view class="hy-table__body__wrapper">
+                    <!-- 固定左列内容 -->
+                    <view v-if="leftFixedColumns.length > 0" class="hy-table__body--left">
+                        <view
+                            class="hy-table__body__tr"
+                            v-for="(row, rowIndex) in tableData"
+                            :key="`left-${row[rowKey] || rowIndex}`"
+                        >
+                            <view
+                                class="hy-table__body__td"
+                                v-for="(col, colIndex) in leftFixedColumns"
+                                :key="col.key || colIndex"
+                                :style="[getCellStyle(col, false)]"
+                                @click.stop="handleCellClick(row, col)"
+                            >
+                                <slot name="default" :row="row" :col="col" :index="rowIndex">
+                                    <text :class="{ 'hy-table__body__td--ellipsis': col.ellipsis }">{{ row[col.key] }}</text>
+                                </slot>
+                            </view>
+                        </view>
+                    </view>
+                    <!-- 中间内容 -->
+                    <view class="hy-table__body--center" :style="{ paddingLeft: `${leftFixedWidth}px`, paddingRight: `${rightFixedWidth}px` }">
+                        <view
+                            class="hy-table__body__tr"
+                            v-for="(row, rowIndex) in tableData"
+                            :key="row[rowKey] || rowIndex"
+                            @click="handleRowClick(row, rowIndex)"
+                        >
+                            <view
+                                class="hy-table__body__td"
+                                v-for="(col, colIndex) in scrollColumns"
+                                :key="col.key || colIndex"
+                                :style="[getCellStyle(col, false)]"
+                                @click.stop="handleCellClick(row, col)"
+                            >
+                                <slot name="default" :row="row" :col="col" :index="rowIndex">
+                                    <text :class="{ 'hy-table__body__td--ellipsis': col.ellipsis }">{{ row[col.key] }}</text>
+                                </slot>
+                            </view>
+                        </view>
+                    </view>
+                    <!-- 固定右列内容 -->
+                    <view v-if="rightFixedColumns.length > 0" class="hy-table__body--right">
+                        <view
+                            class="hy-table__body__tr"
+                            v-for="(row, rowIndex) in tableData"
+                            :key="`right-${row[rowKey] || rowIndex}`"
+                        >
+                            <view
+                                class="hy-table__body__td"
+                                v-for="(col, colIndex) in rightFixedColumns"
+                                :key="col.key || colIndex"
+                                :style="[getCellStyle(col, false)]"
+                                @click.stop="handleCellClick(row, col)"
+                            >
+                                <slot name="default" :row="row" :col="col" :index="rowIndex">
+                                    <text :class="{ 'hy-table__body__td--ellipsis': col.ellipsis }">{{ row[col.key] }}</text>
+                                </slot>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                
+                <!-- 空状态 -->
+                <hy-empty
+                    v-if="!loading && tableData.length === 0"
+                    :description="emptyText"
+                ></hy-empty>
+                
+                <!-- 加载状态 -->
+                <hy-loading
+                    v-if="loading"
+                    text="加载中..."
+                    mode="circle"
+                    direction="column"
+                    custom-class="hy-table__body--loading"
+                ></hy-loading>
+            </scroll-view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-table',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import tableProps from './props'
+import type { ITableColumn, ITableEmits, SortType } from './typing'
+import { addUnit, IconConfig } from '../../libs'
+// 组件
+import HyEmpty from '../hy-empty/hy-empty.vue'
+import HyLoading from '../hy-loading/hy-loading.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+/**
+ * 用于展示多条结构类似的数据， 可对数据进行排序等操作。
+ * @displayName hy-table
+ */
+defineOptions({})
+
+const props = defineProps(tableProps)
+const emit = defineEmits<ITableEmits>()
+
+// --- 状态管理 ---
+const sortKey = ref<string>('')
+const sortType = ref<SortType>('normal')
+const tableData = ref<any[]>([]) // 内部维护的数据，用于排序展示
+const scrollTop = ref<number>(0) // 滚动位置，用于控制表头定位
+
+// --- 监听数据变化 ---
+watch(
+    () => props.data,
+    (val) => {
+        tableData.value = [...val]
+        // 如果当前有排序状态，重新应用排序
+        if (sortKey.value && sortType.value) {
+            localSort()
+        }
+    },
+    { immediate: true, deep: true }
+)
+
+// --- 计算固定列和滚动列 ---
+const leftFixedColumns = computed(() => {
+    return props.columns.filter(col => col.fixed === 'left')
+})
+
+const rightFixedColumns = computed(() => {
+    return props.columns.filter(col => col.fixed === 'right')
+})
+
+const scrollColumns = computed(() => {
+    return props.columns.filter(col => !col.fixed)
+})
+
+// --- 计算固定列总宽度 ---
+const leftFixedWidth = computed(() => {
+    let width = 0
+    leftFixedColumns.value.forEach(col => {
+        const w = parseInt(String(col.width || 100))
+        width += w
+    })
+    return width
+})
+
+const rightFixedWidth = computed(() => {
+    let width = 0
+    rightFixedColumns.value.forEach(col => {
+        const w = parseInt(String(col.width || 100))
+        width += w
+    })
+    return width
+})
+
+// --- 计算总宽度 (用于 scroll-view 横向滚动) ---
+const totalMinWidth = computed(() => {
+    let width = 0
+    scrollColumns.value.forEach((col) => {
+        // 简单估算：如果有明确宽度则累加，否则给个默认值 100
+        const w = parseInt(String(col.width || 100))
+        width += w
+    })
+    return width
+})
+
+// --- 事件处理 ---
+// 处理滚动事件
+const handleScroll = (e: any) => {
+    scrollTop.value = e.detail.scrollTop
+}
+
+// --- 样式计算 ---
+const getCellStyle = (col: ITableColumn, isHeader: boolean) => {
+    const style: any = {}
+
+    // 处理宽度
+    if (col.width) {
+        const w = typeof col.width === 'number' ? `${col.width}px` : col.width
+        style.width = w
+        style.flex = `0 0 ${w}` // 固定宽度，不伸缩
+    } else {
+        style.flex = 1 // 自动填充
+        style.minWidth = '150rpx' // 最小宽度防止太挤
+    }
+
+    // 处理对齐
+    style.justifyContent =
+        col.align === 'center' ? 'center' : col.align === 'right' ? 'flex-end' : 'flex-start'
+    style.textAlign = col.align || 'left'
+
+    return style
+}
+
+// --- 排序逻辑 ---
+const handleSort = (col: ITableColumn) => {
+    if (!col.sortable) return
+
+    // 切换排序状态: '' -> 'asc' -> 'desc' -> ''
+    if (sortKey.value !== col.key) {
+        sortKey.value = col.key
+        sortType.value = 'asc'
+    } else {
+        if (sortType.value === 'asc') sortType.value = 'desc'
+        else if (sortType.value === 'desc') sortType.value = 'normal'
+        else sortType.value = 'asc' // 逻辑闭环
+    }
+
+    // 触发本地排序或远程排序事件
+    localSort()
+    emit('sort-change', { key: sortKey.value, type: sortType.value })
+}
+
+const localSort = () => {
+    if (!sortType.value) {
+        tableData.value = [...props.data] // 还原
+        return
+    }
+
+    tableData.value.sort((a, b) => {
+        const valA = a[sortKey.value]
+        const valB = b[sortKey.value]
+
+        // 简单的数字和字符串比较
+        if (valA === valB) return 0
+
+        let result = 0
+        if (typeof valA === 'number' && typeof valB === 'number') {
+            result = valA - valB
+        } else {
+            result = String(valA).localeCompare(String(valB))
+        }
+
+        return sortType.value === 'asc' ? result : -result
+    })
+}
+
+// --- 交互逻辑 ---
+const handleRowClick = (row: any, index: number) => {
+    emit('row-click', row, index)
+}
+
+// 处理单元格点击（主要用于Tooltip）
+const handleCellClick = (row: any, col: ITableColumn) => {
+    // 如果开启了 tooltip，显示完整内容
+    if (col.tooltip && col.ellipsis) {
+        const content = row[col.key]
+        if (content) {
+            uni.showToast({ title: String(content), icon: 'none' })
+        }
+    }
+    emit('cell-click', row, col)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>