hy-app 0.5.8 → 0.5.10

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>

package/components/hy-table/index.scss

@@ -0,0 +1,197 @@
+@use "../../libs/css/theme" as *;
+@use "../../libs/css/mixin" as *;
+
+/* 变量定义 */
+$border-color: #ebeef5;
+$header-bg: $hy-background--table-header;
+$text-color: #606266;
+$header-text-color: #909399;
+$stripe-bg: $hy-background--table-header;
+$hover-bg: #f5f7fa;
+
+/*#1d1d1d*/
+
+@include b(table) {
+  width: 100%;
+  background-color: $hy-background--container;
+  border: $hy-border-line;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  @include e(container) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+  }
+
+  /* 表头区域 */
+  @include e(header) {
+    display: flex;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: $header-bg;
+    border-bottom: $hy-border-line;
+  }
+
+  /* 左固定表头 */
+  @include e(header--left) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: flex;
+    background-color: $header-bg;
+    z-index: 12;
+  }
+
+  /* 中间表头 */
+  @include e(header--center) {
+    display: flex;
+    flex: 1;
+    overflow-x: hidden;
+  }
+
+  /* 右固定表头 */
+  @include e(header--right) {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    background-color: $header-bg;
+    z-index: 12;
+  }
+
+  /* 表头单元格 */
+  @include e(header__th) {
+    @include flex(center);
+    padding: 0 20rpx;
+    height: 88rpx;
+    box-sizing: border-box;
+    background-color: $header-bg;
+    font-size: 28rpx;
+    color: $header-text-color;
+    font-weight: bold;
+    border-bottom: $hy-border-line;
+    border-right: $hy-border-line;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  /* 表头文本 */
+  @include e(header__th--text) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+
+  /* 表头排序 */
+  @include e(header__th--sort) {
+    @include flex(column);
+    margin-left: 8rpx;
+
+    .hy-icon {
+      color: $text-color;
+      opacity: 0.3;
+      margin-bottom: 2rpx;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &.is-active {
+        color: $hy-primary;
+        opacity: 1;
+      }
+    }
+  }
+
+  /* 内容区域 */
+  @include e(body) {
+    flex: 1;
+    overflow-y: auto;
+    position: relative;
+    z-index: 1;
+  }
+
+  /* 内容包装器 */
+  @include e(body__wrapper) {
+    display: flex;
+    width: 100%;
+    min-height: 100%;
+  }
+
+  /* 左固定内容 */
+  @include e(body--left) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    background-color: $hy-background--container;
+    z-index: 11;
+  }
+
+  /* 中间内容 */
+  @include e(body--center) {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow-x: hidden;
+  }
+
+  /* 右固定内容 */
+  @include e(body--right) {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    background-color: $hy-background--container;
+    z-index: 11;
+  }
+
+  /* 行 */
+  @include e(body__tr) {
+    @include flex(row);
+    box-sizing: border-box;
+    width: 100%;
+
+    &:nth-child(even) {
+      background-color: $stripe-bg;
+    }
+  }
+
+  /* 单元格 */
+  @include e(body__td) {
+    @include flex(center);
+    padding: 0 20rpx;
+    height: 88rpx;
+    box-sizing: border-box;
+    font-size: 28rpx;
+    color: $text-color;
+    border-bottom: $hy-border-line;
+    border-right: $hy-border-line;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  /* 省略号 */
+  @include e(body__td--ellipsis) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+
+  /* 加载状态 */
+  @include e(body--loading) {
+    min-height: 400rpx;
+  }
+}

package/components/hy-table/props.ts

@@ -0,0 +1,47 @@
+import type { PropType } from 'vue'
+import type { ITableColumn } from './typing'
+
+const tableProps = {
+    /** 数据源 */
+    data: {
+        type: Array,
+        default: () => []
+    },
+    /** 列配置 */
+    columns: {
+        type: Array as PropType<ITableColumn[]>,
+        default: () => []
+    },
+    /** 表格高度，如 '500rpx' */
+    height: {
+        type: [String, Number],
+        default: 'auto'
+    },
+    /** 是否斑马纹 */
+    stripe: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否带有纵向边框 */
+    border: {
+        type: Boolean,
+        default: true
+    },
+    /** 加载状态 */
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    /** 空数据提示 */
+    emptyText: {
+        type: String,
+        default: '暂无数据'
+    },
+    /** 行数据的唯一键名 */
+    rowKey: {
+        type: String,
+        default: 'id'
+    }
+}
+
+export default tableProps

package/components/hy-table/typing.d.ts

@@ -0,0 +1,34 @@
+export interface ITableColumn {
+    /** 列标题 */
+    title: string
+    /** 对应数据字段名 */
+    key: string
+    /** 列宽 (数字默认 px) */
+    width?: number | string
+    /** 对齐方式 */
+    align?: HyApp.RowCenterType
+    /** 是否开启排序 */
+    sortable?: boolean
+    /** 是否固定 ('left' | 'right' | false) */
+    fixed?: 'left' | 'right' | false
+    /** 是否开启文本超长省略 */
+    ellipsis?: boolean
+    /** 开启省略后，是否开启点击显示完整内容(Tooltip) */
+    tooltip?: boolean
+}
+
+export type SortType = 'asc' | 'desc' | 'normal'
+
+interface ISortParams {
+    key: string
+    type: SortType
+}
+
+export interface ITableEmits {
+    /** 当某一行被点击时会触发该事件 */
+    (e: 'row-click', row: any, index: number): void
+    /** 单元格点击触发该事件 */
+    (e: 'cell-click', row: any, col: ITableColumn): void
+    /** 触发本地排序或远程排序事件 */
+    (e: 'sort-change', params: ISortParams): void
+}

package/components/hy-tabs/index.scss

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

package/components/hy-tag/index.scss

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

package/components/hy-text/hy-text.vue

@@ -229,7 +229,7 @@ const toLink = () => {
 
 <style scoped lang="scss">
 @import './index.scss';
-@import '../../libs/css/mixin.scss';
+@import '../../libs/css/mixin';
 /*超出出现省略号*/
 .hy-text__value--lines {
     @include multiEllipsis(v-bind(lines));

package/components/hy-text/index.scss

@@ -1,4 +1,4 @@
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 @use "../../libs/css/theme" as *;
 
 

package/components/hy-textarea/hy-textarea.vue

@@ -111,7 +111,7 @@ watch(
 // 组件的类名
 const textareaClass = computed(() => {
     let classes: string[] = []
-    props.border === 'surround' && (classes = classes.concat(['hy-border', 'hy-textarea__radius']))
+    props.border === 'surround' && (classes = classes.concat(['hy-textarea__border', 'hy-textarea__radius']))
     props.border === 'bottom' &&
         (classes = classes.concat(['hy-border__bottom', 'hy-textarea__no-radius']))
     props.disabled && classes.push('hy-textarea__disabled')

package/components/hy-textarea/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 @include b(textarea) {
   border-radius: $hy-border-radius-sm;
@@ -7,6 +7,11 @@
   @include flex;
   flex: 1;
   padding: $hy-border-margin-padding-sm;
+  
+  @include e(border) {
+  	/* TODO: 先这样写，因为在某些pda中写$hy-border-line，边框不显示，后续排除问题 */
+  	border: 1px solid #e8e8e8;
+  }
 
   @include e(radius) {
     border-radius: $hy-border-radius-sm;