stellar-ui-plus 1.22.28 → 1.22.30

package/components/ste-checkbox/ste-checkbox.vue

@@ -164,6 +164,16 @@ const cmpSlotProps = computed(() => ({
     readonly: getDefaultData('readonly', false),
 }));
 
+const cmpIconMargin = computed(() => {
+    // #ifdef APP-PLUS
+    return 2;
+    // #endif
+
+    // #ifndef APP-PLUS
+    return 0;
+    // #endif
+});
+
 // 批处理更新相关
 const isBatchUpdating = ref(false);
 const pendingUpdate = ref(false);
@@ -257,7 +267,7 @@ const getDefaultData = <T,>(key: PropsKeyType, defaultValue: T): T => {
         <view class="icon" :style="[cmpIconStyle]">
             <slot name="icon" :slotProps="cmpSlotProps">
                 <view class="input-icon" :style="[cmpInputStyle]">
-                    <ste-icon v-if="cmpChecked" :size="getDefaultData('iconSize', 36) * 0.8" code="&#xe67a;" :color="cmpDisabled ? '#bbbbbb' : '#fff'" bold />
+                    <ste-icon v-if="cmpChecked" :size="getDefaultData('iconSize', 36) * 0.8" code="&#xe67a;" :color="cmpDisabled ? '#bbbbbb' : '#fff'" bold :marginBottom="cmpIconMargin" />
                 </view>
             </slot>
         </view>

package/components/ste-login/ste-login.vue

@@ -47,13 +47,21 @@
                     </view>
                     <view class="btn-group">
                         <view class="btn-item primary" v-for="(item, k) in primaryBtn" :key="k">
-                            <ste-button width="100%" :mode="300" @click="handleBtnClick(item, 'primary')" :round="item.round" :background="mainColor">
-                                <text class="btn-text">{{ item.title }}</text>
+                            <ste-button
+                                width="100%"
+                                :mode="300"
+                                @click="handleBtnClick(item, 'primary')"
+                                :round="item.round"
+                                :background="item.style?.background ? item.style?.background : mainColor"
+                                :border-color="item.style?.borderColor"
+                                :color="item.style?.color"
+                            >
+                                <text class="btn-text" :style="{ fontSize: item.style?.fontSize }">{{ item.title }}</text>
                             </ste-button>
                         </view>
                         <view class="secondary-box" :class="[{ two: secondaryBtn.length === 2, one: secondaryBtn.length === 1 }]">
-                            <view v-for="(item, k) in secondaryBtn" :key="k" class="btn-item secondary">
-                                <text class="btn-text">{{ item.title }}</text>
+                            <view v-for="(item, k) in secondaryBtn" :key="k" class="btn-item secondary" @click="handleBtnClick(item, 'secondary')">
+                                <text class="btn-text" :style="{ color: item.style?.color, fontSize: item.style?.fontSize }">{{ item.title }}</text>
                             </view>
                         </view>
                     </view>

package/components/ste-table/README.md

@@ -618,6 +618,58 @@
 </template>
 ```
 
+#### 合并单元格
+
+当某列的数据为数组类型时，该列会自动触发合并单元格模式，将数组中的每个元素作为一行展示。这在需要展示一对多关系的数据时非常有用。
+
+**功能特点：**
+- 自动检测数组类型数据
+- 自动合并显示为多行
+- 支持边框样式
+- 自动统一行高，保持视觉一致
+
+```html
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    const rows = ref([
+        {
+            project: '入店时的寒暄语',
+            desc: [
+                '打招呼的声音很小，听不到，没有看着顾客一方等。',
+                '店员看着顾客一方，可以听到响亮且有朝气的问候声。',
+                '「感觉普通」店员看着顾客一方有问候，但是声音不响亮无朝气。',
+            ],
+            score: [5, 11, 1],
+            sum: 0,
+        },
+        {
+            project: '收银机前的引导',
+            desc: [
+                '・POS收银机前排队等待的顾客≦3人(不含正在结账的顾客)。',
+                '其他店员没有注意到有3位以上的顾客在排队，或收银的店员不向其他收银台引导。'
+            ],
+            score: [5, 1],
+            sum: 0,
+        },
+    ]);
+</script>
+<template>
+    <ste-table :data="rows" border>
+        <template v-slot="{ row }">
+            <ste-table-column label="评价项目" prop="project"></ste-table-column>
+            <ste-table-column label="评价标准" prop="desc"></ste-table-column>
+            <ste-table-column label="分值" prop="score" width="150"></ste-table-column>
+            <ste-table-column label="得分" prop="sum" width="150"></ste-table-column>
+        </template>
+    </ste-table>
+</template>
+```
+
+在上面的示例中：
+- `desc` 和 `score` 列的值是数组，会自动合并显示为多行
+- `project` 和 `sum` 列的值是普通类型，会正常显示单行
+- 建议配合 `border` 属性使用，可以更清晰地展示单元格边界
+
 ---$
 
 ### API

package/components/ste-table-column/ste-table-column.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref, type CSSProperties, type Ref } from 'vue';
+import { computed, ref, watch, type CSSProperties, type Ref } from 'vue';
 import type { Obj } from '../../types';
 import propsData from './props';
 import utils from '../../utils/utils';
@@ -9,6 +9,7 @@ import { TABLE_KEY, SELECTION_COLOR_CONFIG, type TableProps } from '../ste-table
 import CheckBoxIcon from './checkbox-icon.vue';
 import RadioIcon from './radio-icon.vue';
 import TablePopover from './table-popover.vue';
+import SubTable from './sub-table.vue';
 
 const componentName = `ste-table-column`;
 defineOptions({
@@ -26,9 +27,21 @@ const parentProps = Parent.parent?.props as TableProps;
 
 const row = ref<Obj>({});
 const selectionIconColor = ref<typeof SELECTION_COLOR_CONFIG>(parentProps.selectionIconColor);
+const rowSpan = ref(false);
 
 defineExpose({ row });
 
+// 监听 row 数据变化，判断是否需要合并单元格
+watch(
+    () => row.value[props.prop],
+    val => {
+        if (Array.isArray(val)) {
+            rowSpan.value = true;
+        }
+    },
+    { immediate: true }
+);
+
 const cmpRootStyle = computed(() => {
     let style: CSSProperties = {};
     if (props.width) {
@@ -69,6 +82,10 @@ const cmpRootClass = computed(() => {
         classArr.push('popover');
     }
 
+    if (rowSpan.value) {
+        classArr.push('row-span');
+    }
+
     const cellClassParam = {
         column: props,
         columnIndex: row.value.colIndex,
@@ -103,6 +120,10 @@ const cmpReadonlyCheck = computed(() => {
     return false;
 });
 
+const cmpBorder = computed(() => {
+    return parentProps.border;
+});
+
 function changeCheck() {
     if (!cmpDisableCheck.value && !cmpReadonlyCheck.value) {
         parent?.handleCheck(row.value);
@@ -149,7 +170,8 @@ function cellClick(event: any) {
         </template>
         <template v-else>
             <slot v-if="row[prop] || !$slots.empty">
-                <view class="cell-box">
+                <sub-table :rows="row[prop]" v-if="rowSpan" :border="cmpBorder" />
+                <view class="cell-box" v-else>
                     <template v-if="!parentProps.isPopover">
                         {{ cellText() }}
                     </template>

package/components/ste-table-column/sub-table.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, getCurrentInstance, type ComponentPublicInstance, type CSSProperties } from 'vue';
+import utils from '../../utils/utils';
+
+defineOptions({
+    name: 'ste-sub-table',
+    options: {
+        virtualHost: true,
+    },
+});
+
+const props = defineProps({
+    rows: {
+        type: [Array, null],
+        default: () => [],
+    },
+    border: {
+        type: [Boolean, null],
+        default: false,
+    },
+});
+
+const instance = getCurrentInstance() as unknown as ComponentPublicInstance;
+
+const rowEls = ref<UniApp.NodeInfo[]>([]);
+
+onMounted(() => {
+    utils.querySelector('.sub-table-root .row', instance, true).then(rec => {
+        rowEls.value = rec;
+    });
+});
+
+const cmpRootClass = computed(() => {
+    let classArr: string[] = [];
+    if (props.border) {
+        classArr.push('border');
+    }
+    return classArr.join(' ');
+});
+
+const cmpRowStyle = computed(() => {
+    let style: CSSProperties = {};
+    if (rowEls.value.length > 0) {
+        let maxHeight = findMaxInRange(
+            0.5,
+            rowEls.value.map(e => e.height || 0)
+        );
+        if (maxHeight > 0) {
+            style.flexBasis = maxHeight + 'px';
+            style.flexGrow = 0;
+        }
+    }
+    return style;
+});
+
+function findMaxInRange(tolerance: number, numbers: number[] = []) {
+    if (numbers.length === 0) return 0;
+
+    let max = Math.max(...numbers);
+    let min = Math.min(...numbers);
+
+    // 如果最大值和最小值的差值在浮动范围内，返回 0
+    if (max - min <= tolerance) {
+        return 0;
+    }
+
+    // 返回最大值
+    return max;
+}
+</script>
+
+<template>
+    <view class="sub-table-root" :class="[cmpRootClass]">
+        <view class="row" v-for="(v, i) in rows" :key="i" :style="[cmpRowStyle]">
+            <view class="cell">
+                {{ v }}
+            </view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+@import './var.scss';
+.sub-table-root {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &.border {
+        .row {
+            .cell {
+                border-bottom: $default-border;
+            }
+        }
+    }
+
+    .row {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        flex: 1;
+        .cell {
+            @import './common.scss';
+            @include cell;
+
+            border-bottom: none;
+            padding: 24rpx 32rpx;
+        }
+        &:nth-last-child(1) {
+            .cell {
+                border-bottom: none;
+            }
+        }
+    }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stellar-ui-plus",
-    "version": "1.22.28",
+    "version": "1.22.30",
     "description": "",
     "author": "",
     "license": "MIT",