stellar-ui-plus 1.20.13 → 1.20.14

package/components/ste-date-user/ste-date-user.vue

@@ -69,7 +69,7 @@ onMounted(async () => {
 <style lang="scss" scoped>
 .ste-date-user-root {
     .box {
-        min-width: 336rpx;
+        width: 336rpx;
         height: 128rpx;
         border-radius: 12rpx;
         display: flex;
@@ -80,7 +80,7 @@ onMounted(async () => {
         .left {
             width: 80rpx;
             height: 80rpx;
-            background: #e6e8ea;
+            background: #f4f5f6;
             border-radius: 8rpx;
             margin: 0 28rpx;
             display: flex;
@@ -109,6 +109,10 @@ onMounted(async () => {
                 height: 40rpx;
                 font-size: var(--font-size-28, 28rpx);
                 color: #1c1f23;
+                width: 160rpx; /* 设置固定宽度，也可以是百分比或者其他单位 */
+                white-space: nowrap; /* 禁止换行 */
+                overflow: hidden; /* 隐藏溢出内容 */
+                text-overflow: ellipsis; /* 溢出时显示省略号 */
             }
 
             .bottom {

package/components/ste-dropdown-menu/ATTRIBUTES.md

@@ -12,7 +12,6 @@
 | `zIndex` | 弹窗层级z-index | `number` | - | - | - |
 | `type` | 下拉选项的形状 | `string` | `block` | `round`：圆形<br/>`block`：块状 | - |
 | `max` | 可选数量 | `number` | `1` | - | - |
-| `showPopup` | 是否显示菜单弹窗 | `boolean` | `false` | - | `1.21.0` |
 
 
 #### Events

package/components/ste-filter-tool/ste-filter-tool.vue

@@ -127,7 +127,7 @@ const scrollTop = ref(0);
 
 // 计算属性
 const rootStyleVar = computed(() => ({
-    '--active-color': props.activeColor || getColor().themeColor,
+    '--active-color': props.activeColor || getColor().steThemeColor,
     '--inactive-color': props.inactiveColor,
 }));
 

package/components/ste-goods-info/props.ts

@@ -95,6 +95,11 @@ export default {
         type: Boolean,
         default: () => false,
     },
+    /** 步进器输入框只读 */
+    readonlyStepperInput: {
+        type: Boolean,
+        default: () => false,
+    },
     /** 禁用步进器 */
     disabledStepper: {
         type: Boolean,

package/components/ste-goods-info/ste-goods-info.easycom.json

@@ -99,6 +99,12 @@
             "type": "boolean",
             "default": false
         },
+        {
+            "name": "readonlyStepperInput",
+            "description": "步进器输入框只读",
+            "type": "boolean",
+            "default": false
+        },
         {
             "name": "disabledStepper",
             "description": "禁用步进器",
@@ -239,6 +245,11 @@
                     "description": "type为item时，点击的item对象"
                 }
             ]
+        },
+        {
+            "name": "[event]click-stepper-input",
+            "description": "点击步进器输入框触发",
+            "type": "() => void"
         }
     ]
 }

package/components/ste-goods-info/ste-goods-info.vue

@@ -20,6 +20,7 @@ const emits = defineEmits<{
     (e: 'plus', value: number | string, suspend: () => void, next: () => void, stop: () => void): void;
     (e: 'minus', value: number | string, suspend: () => void, next: () => void, stop: () => void): void;
     (e: 'click-suggest', type: 'method' | 'back' | 'item' | 'right', item?: { label: string; value: string | number }): void;
+    (e: 'click-stepper-input'): void;
 }>();
 
 const _number = ref(1);
@@ -149,6 +150,8 @@ const clickSuggest = (type: 'method' | 'back' | 'item' | 'right', item?: { label
     }
     emits('click-suggest', type, item);
 };
+
+const clickInput = () => emits('click-stepper-input');
 </script>
 <template>
     <view class="ste-goods-info-root" :style="[rootStyle]">
@@ -174,7 +177,7 @@ const clickSuggest = (type: 'method' | 'back' | 'item' | 'right', item?: { label
                     </view>
                     <view class="ste-goods-info-codes" @click="onClick('code')">
                         {{ data.code }}
-                        <span>|</span>
+                        <span style="color: #e6e8ea">|</span>
                         {{ data.barCode }}
                     </view>
                     <slot>
@@ -209,9 +212,11 @@ const clickSuggest = (type: 'method' | 'back' | 'item' | 'right', item?: { label
                                     :disableInput="disableInput"
                                     :disablePlus="disablePlus"
                                     :disableMinus="disableMinus"
+                                    :readonlyInput="readonlyStepperInput"
                                     @change="numberChange"
                                     @plus="plus"
                                     @minus="minus"
+                                    @click-input="clickInput"
                                 />
                             </view>
                         </view>
@@ -422,7 +427,7 @@ const clickSuggest = (type: 'method' | 'back' | 'item' | 'right', item?: { label
             display: flex;
             align-items: center;
             justify-content: space-between;
-            height: 72px;
+            height: 72rpx;
             background: #f4f5f6;
             border-radius: 4px;
             .ste-goods-info-suggest-items {

package/components/ste-main-info/README.md

@@ -0,0 +1,157 @@
+# MainInfo 主数据展示
+
+用于展示一些主要信息
+
+---$
+
+#### 基础用法
+
+```html
+<template>
+    <view style="width: 100%">
+        <ste-main-info
+            @data-click="handleDataClick"
+            @avatar-click="handleAvatarClick"
+            @user-click="handleUserClick"
+            mainColor="#EC3E1A"
+            :infoData="data1.infoData"
+            :infoUser="data1.infoUser"
+            :infoCode="data1.infoCode"
+            :avatarUrl="data1.avatarUrl"
+        />
+    </view>
+</template>
+<script lang="ts" setup>
+    import { reactive } from 'vue';
+
+    const data1 = reactive({
+        avatarUrl: 'https://image.whzb.com/chain/StellarUI/头像/付宇威1.png',
+        infoUser: {
+            title: '嗨，小百百百',
+            subTitle: '中百食堂',
+            subTitleIcon: '&#xe677;',
+        },
+        infoData: [
+            { name: '数据1', value: '100', key: '1' },
+            { name: '数据2', value: '8', key: '2' },
+            { name: '数据3', value: '10', key: '3' },
+        ],
+        infoCode: {
+            name: '核销码',
+            img: 'https://image.whzb.com/chain/StellarUI/image/code1.png',
+        },
+    });
+</script>
+```
+
+#### 2数据&有核销码
+
+```html
+<template>
+    <view style="width: 100%">
+        <ste-main-info mainColor="#EC3E1A" :infoData="data2.infoData" :infoUser="data2.infoUser" :infoCode="data2.infoCode" :avatarUrl="data2.avatarUrl" />
+    </view>
+</template>
+<script lang="ts" setup>
+    import { reactive } from 'vue';
+
+    const data2 = reactive({
+        avatarUrl: 'https://image.whzb.com/chain/StellarUI/头像/付宇威1.png',
+        infoUser: {
+            title: '嗨，小百百百',
+            subTitle: '中百食堂',
+            subTitleIcon: '&#xe677;',
+        },
+        infoData: [
+            { name: '数据1', value: '100', key: 1 },
+            { name: '数据2', value: '8', key: 2 },
+        ],
+        infoCode: {
+            name: '核销码',
+            img: 'https://image.whzb.com/chain/StellarUI/image/code1.png',
+        },
+    });
+</script>
+```
+
+#### 3数据&无核销码
+
+```html
+<template>
+    <view style="width: 100%">
+        <ste-main-info mainColor="#EC3E1A" :infoData="data3.infoData" :infoUser="data3.infoUser" :avatarUrl="data2.avatarUrl" />
+    </view>
+</template>
+<script lang="ts" setup>
+    import { reactive } from 'vue';
+
+    const data3 = reactive({
+        avatarUrl: 'https://image.whzb.com/chain/StellarUI/头像/付宇威1.png',
+        infoUser: {
+            title: '嗨，小百百百',
+            subTitle: '中百食堂',
+            subTitleIcon: '&#xe677;',
+        },
+        infoData: [
+            { name: '数据1', value: '100', key: 1 },
+            { name: '数据2', value: '8', key: 2 },
+            { name: '数据3', value: '10', key: 3 },
+        ],
+    });
+</script>
+```
+
+#### 无头像名称&有3个数据&有核销码
+
+```html
+<template>
+    <view style="width: 100%">
+        <ste-main-info mainColor="#EC3E1A" :infoData="data4.infoData" :infoCode="data4.infoCode" />
+    </view>
+</template>
+<script lang="ts" setup>
+    import { reactive } from 'vue';
+
+    const data4 = reactive({
+        infoData: [
+            { name: '数据1', value: '100', key: 1 },
+            { name: '数据2', value: '8', key: 2 },
+            { name: '数据3', value: '10', key: 3 },
+        ],
+        infoCode: {
+            name: '核销码',
+            img: 'https://image.whzb.com/chain/StellarUI/image/code1.png',
+        },
+    });
+</script>
+```
+
+#### 无头像名称&有3个数据&无核销码
+
+```html
+<template>
+    <view style="width: 100%">
+        <ste-main-info mainColor="#EC3E1A" :infoData="data5.infoData" />
+    </view>
+</template>
+<script lang="ts" setup>
+    import { reactive } from 'vue';
+
+    const data5 = reactive({
+        infoData: [
+            { name: '数据1', value: '100', key: 1 },
+            { name: '数据2', value: '8', key: 2 },
+            { name: '数据3', value: '10', key: 3 },
+        ],
+    });
+</script>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+---$
+{{fuyuwei}}

package/components/{ste-user-info → ste-main-info}/config.json

@@ -1,5 +1,5 @@
 {
     "group": "业务组件",
-    "title": "UserInfo 用户信息",
-    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/人员信息.png"
+    "title": "MainInfo 主数据展示",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/筛选选框.png"
 }

package/components/ste-main-info/props.ts

@@ -0,0 +1,19 @@
+import type { PropType } from 'vue';
+import type { InfoItem, InfoUser } from './type';
+
+const mainInfoProps = {
+    mainColor: { type: String, default: '' },
+    showAvatar: { type: Boolean, default: true },
+    avatarUrl: { type: String, default: '' },
+    infoUser: { type: Object as PropType<InfoUser>, default: () => ({}) },
+    infoData: { type: Array as PropType<InfoItem[]>, default: () => [] },
+    infoCode: { type: Object as PropType<InfoItem>, default: () => ({}) },
+};
+
+export const mainInfoEmits = {
+    'data-click': (item: InfoItem) => !!item,
+    'avatar-click': () => true,
+    'user-click': () => true,
+};
+
+export default mainInfoProps;

package/components/ste-main-info/ste-main-info.easycom.json

@@ -0,0 +1,62 @@
+{
+    "name": "ste-main-info",
+    "description": "主信息展示",
+    "example": "<ste-main-info></ste-main-info>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=main-info",
+    "attributes": [
+        {
+            "name": "mainColor",
+            "description": "主颜色",
+            "type": "string",
+            "default": ""
+        },
+        {
+            "name": "showAvatar",
+            "description": "是否显示头像，若未配置头像url也不显示头像",
+            "type": "boolean",
+            "default": "true"
+        },
+        {
+            "name": "avatarUrl",
+            "description": "头像url",
+            "type": "string",
+            "default": ""
+        },
+        {
+            "name": "infoUser",
+            "description": "用户数据",
+            "type": "InfoUser",
+            "default": "{}"
+        },
+        {
+            "name": "infoData",
+            "description": "中间数据",
+            "type": "InfoItem[]",
+            "default": "[]"
+        },
+        {
+            "name": "infoCode",
+            "description": "最后部分数据",
+            "type": "InfoItem",
+            "default": "{}"
+        },
+        {
+            "name": "[event]data-click",
+            "description": "中间数据点击时触发",
+            "type": "(item: InfoItem) => void",
+            "params": [{ "name": "item", "description": "点击的项" }]
+        },
+        {
+            "name": "[event]avatar-click",
+            "description": "头像点击时触发",
+            "type": "(]) => void",
+            "params": []
+        },
+        {
+            "name": "[event]user-click",
+            "description": "用户数据点击时触发",
+            "type": "(]) => void",
+            "params": []
+        }
+    ]
+}

package/components/ste-main-info/ste-main-info.scss

@@ -0,0 +1,90 @@
+.ste-main-info--root {
+    // 数据完全显示
+    &.full-mode {
+        .user-block {
+            .user-info {
+                .name {
+                    max-width: 140rpx;
+                    font-size: var(--font-size-24, 24rpx);
+                }
+                .desc {
+                    font-size: var(--font-size-20, 20rpx);
+                }
+            }
+        }
+        .info-block {
+            .item-block {
+                .info {
+                    font-size: var(--font-size-28, 28rpx);
+                }
+                .desc {
+                    font-size: var(--font-size-24, 24rpx);
+                }
+            }
+        }
+        .divider {
+            margin: 0 28rpx;
+        }
+
+        .code-block {
+            .desc {
+                font-size: var(--font-size-24, 24rpx);
+            }
+        }
+    }
+
+    // 模式1
+    &.mode-1 {
+        padding-right: 46rpx;
+        .user-block {
+            .user-info {
+                .name {
+                    max-width: 162rpx;
+                    font-size: var(--font-size-28, 28rpx);
+                }
+                .desc {
+                    font-size: var(--font-size-24, 24rpx);
+                }
+            }
+        }
+        .info-block {
+            .item-block {
+                .info {
+                    font-size: var(--font-size-32, 32rpx);
+                }
+                .desc {
+                    font-size: var(--font-size-24, 24rpx);
+                }
+            }
+        }
+        .divider {
+            margin: 0 46rpx;
+        }
+        .code-block {
+            .desc {
+                font-size: var(--font-size-24, 24rpx);
+            }
+        }
+    }
+
+    // 模式2
+    &.mode-2 {
+        .info-block {
+            justify-content: space-around;
+            .item-block {
+                .info {
+                    font-size: var(--font-size-36, 36rpx);
+                }
+                .desc {
+                    font-size: var(--font-size-28, 28rpx);
+                }
+            }
+        }
+
+        .code-block {
+            .desc {
+                font-size: var(--font-size-28, 28rpx);
+            }
+        }
+    }
+}

package/components/ste-main-info/ste-main-info.vue

@@ -0,0 +1,187 @@
+<template>
+    <view class="ste-main-info--root" :style="[compRootStyle]" :class="[{ 'full-mode': compClassFullMode, 'mode-1': compClassMode1, 'mode-2': compClassMode2 }]">
+        <view class="user-block" v-if="compShowUser || compShowAvatar">
+            <view class="avatar" v-if="compShowAvatar" @click="handleAvatarClick">
+                <ste-image :src="avatarUrl" width="80" height="80" radius="50%" />
+            </view>
+            <view class="user-info" v-if="compShowUser" @click="handleUserClick">
+                <view class="name">{{ infoUser.title }}</view>
+                <view class="desc">
+                    <view class="desc-icon">
+                        <ste-icon :code="infoUser.subTitleIcon" size="26" :color="compMainColor" marginRight="4" />
+                    </view>
+                    <text>{{ infoUser.subTitle }}</text>
+                </view>
+            </view>
+        </view>
+        <template v-if="compShowUser || compShowAvatar">
+            <view class="info-block" :class="[{ 'only-info': !compShowUser && !compShowCode }]">
+                <view class="item-block" v-for="item in infoData" :key="item.key" @click="handleDataItemClick(item)">
+                    <view class="info">{{ item.value }}</view>
+                    <view class="desc">{{ item.name }}</view>
+                </view>
+            </view>
+            <view class="divider" v-if="compShowDivider" />
+            <view class="code-block" v-if="compShowCode" @click="handleDataItemClick(infoCode)">
+                <view class="code-image">
+                    <ste-image :src="infoCode.img" width="60" height="60" />
+                </view>
+                <view class="desc">
+                    <text>{{ infoCode.name }}</text>
+                </view>
+            </view>
+        </template>
+        <template v-else>
+            <view class="info-block" :class="[{ 'only-info': !compShowUser && !compShowCode }]">
+                <view class="item-block" v-for="item in infoData" :key="item.key">
+                    <view class="info">{{ item.value }}</view>
+                    <view class="desc">{{ item.name }}</view>
+                </view>
+                <view class="code-block" v-if="compShowCode" @click="handleDataItemClick(infoCode)">
+                    <view class="code-image">
+                        <ste-image :src="infoCode.img" width="60" height="60" />
+                    </view>
+                    <view class="desc">
+                        <text>{{ infoCode.name }}</text>
+                    </view>
+                </view>
+            </view>
+        </template>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useColorStore } from '../../store/color';
+// import utils from '../../utils/utils';
+import type { InfoItem } from './type';
+
+import propsData, { mainInfoEmits } from './props';
+const props = defineProps(propsData);
+const emits = defineEmits(mainInfoEmits);
+
+const { getColor } = useColorStore();
+
+const compMainColor = computed(() => {
+    return props.mainColor || getColor().steThemeColor;
+});
+
+const compRootStyle = computed(() => {
+    return {
+        '--main-color': compMainColor.value,
+    };
+});
+
+const compShowUser = computed(() => {
+    return props.infoUser && props.infoUser.title;
+});
+
+const compShowAvatar = computed(() => {
+    return props.showAvatar && props.avatarUrl;
+});
+
+const compShowCode = computed(() => {
+    return props.infoCode && props.infoCode.img && props.infoCode.name;
+});
+
+const compShowDivider = computed(() => {
+    return props.infoUser && props.infoUser.title && compShowCode.value;
+});
+
+const compClassFullMode = computed(() => {
+    return compShowUser.value && compShowAvatar.value && compShowCode.value && props.infoData.length >= 3;
+});
+
+const compClassMode1 = computed(() => {
+    return (props.infoData.length < 3 || !compShowCode.value) && compShowUser.value;
+});
+
+const compClassMode2 = computed(() => {
+    return !compShowUser.value && !compShowAvatar.value;
+});
+
+const handleDataItemClick = (item: InfoItem) => {
+    emits('data-click', item);
+};
+
+const handleAvatarClick = () => {
+    emits('avatar-click');
+};
+
+const handleUserClick = () => {
+    emits('user-click');
+};
+</script>
+
+<style lang="scss" scoped>
+@import './ste-main-info.scss';
+.ste-main-info--root {
+    background-color: #fff;
+    border-radius: 12rpx;
+
+    padding: 0 20rpx 0 18rpx;
+    display: flex;
+    align-items: center;
+    height: 148rpx;
+
+    .user-block {
+        display: flex;
+        align-items: center;
+
+        .avatar {
+            border-radius: 50%;
+            margin-right: 14rpx;
+        }
+        .user-info {
+            .name {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .desc {
+                display: inline-flex;
+                align-items: center;
+                margin-top: 10rpx;
+                color: var(--main-color);
+            }
+        }
+        margin-right: 34rpx;
+    }
+
+    .info-block {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .item-block {
+            text-align: center;
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            .info {
+                font-weight: bold;
+                margin-bottom: 12rpx;
+            }
+        }
+    }
+
+    .divider {
+        width: 2rpx;
+        height: 50rpx;
+        background-color: #f1f1f1;
+    }
+    .code-block {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+
+        .desc {
+            margin-top: 12rpx;
+            color: var(--main-color);
+        }
+    }
+}
+</style>

package/components/ste-main-info/type.d.ts

@@ -0,0 +1,12 @@
+export interface InfoItem {
+    name: string;
+    key?: string | number;
+    value?: string;
+    img?: string;
+}
+
+export interface InfoUser {
+    title?: string;
+    subTitle?: string;
+    subTitleIcon?: string;
+}

package/components/ste-number-keyboard/ATTRIBUTES.md

@@ -12,8 +12,6 @@
 | `customKeys` | 自定义按键，建议数量不大于2 | `string[]` | `[]` | - | - |
 | `showClear` | 是否显示清空按钮 | `boolean` | `true` | - | - |
 | `textColor` | 按键文字颜色 | `string` | `#000000` | - | - |
-| `keyBg` | 按键背景颜色 | `string` | `#fff` | - | - |
-| `background` | 背景颜色 | `string` | `#f9f9f9` | - | - |
 | `textSize` | 按键文字大小 | `number / string` | `48` | - | - |
 | `confirmBg` | 确定按钮背景颜色 | `string` | `#0090FF` | - | - |
 | `confirmColor` | 确定按钮文字颜色 | `string` | `#ffffff` | - | - |