stellar-ui-plus 1.22.18 → 1.22.20

package/components/ste-app-update/ATTRIBUTES.md

@@ -4,6 +4,7 @@
 | `clientId` | 应用编码 | `string` | `` | - | - |
 | `clientSecret` | 应用密钥 | `string` | `` | - | - |
 | `apiUrl` | 更新API地址 | `string` | `https://zboa.whzb.com/inte-cloud-dev/blade-system/api/inte/client/ver/currentDetail` | - | - |
+| `appType` | APP环境,版本号的最后一位为环境标识 | `string` | `` | - | - |
 
 
 #### Events

package/components/ste-app-update/ste-app-update.vue

@@ -45,7 +45,7 @@ const getData = (callback?: (resVersion: { name: string; code: string; updateFil
             if (_data.code == 200) {
                 data.code = _data.data.code;
                 data.name = _data.data.name;
-                data.content = _data.data.content + _data.data.desc;
+                data.content = `${_data.data.content}${_data.data.desc ? '\n' + _data.data.desc : ''}`.replaceAll('\n', '<br />');
                 data.isForce = _data.data.isForce;
                 data.updateFile = _data.data.entireFile ? _data.data.entireFile : _data.data.updateFile;
                 data.package_type = _data.data.entireFile ? 0 : 1;
@@ -63,7 +63,7 @@ const getData = (callback?: (resVersion: { name: string; code: string; updateFil
                         return;
                     }
                 }
-                if (data.updateFile && data.code > version.value) {
+                if (data.updateFile && data.code !== version.value) {
                     open.value = true;
                     emits('update');
                     // 如果是强制更新，直接开始下载
@@ -167,8 +167,8 @@ defineExpose({
         <view class="content botton-radius">
             <view class="content-top">
                 <view class="content-top-text">
-                    <text class="">发现新版本 v{{ data.code }}</text>
-                    <text class="version">当前版本：{{ version }}</text>
+                    <text class="">发现新版本 v{{ data.name }}</text>
+                    <!--                         <text class="version">当前版本：{{ version }}</text>                     -->
                 </view>
                 <image class="content-top" style="top: 0" width="100%" height="100%" src="../../static/bg_top.png"></image>
             </view>
@@ -176,8 +176,12 @@ defineExpose({
             <view class="content-body">
                 <view class="title"><text>更新内容</text></view>
                 <view class="body">
-                    <scroll-view class="box-des-scroll" scroll-y><rich-text :nodes="data.content"></rich-text></scroll-view>
+                    <scroll-view class="box-des-scroll" scroll-y>
+                        <rich-text v-if="data.content" :nodes="data.content"></rich-text>
+                        <text v-else>-</text>
+                    </scroll-view>
                 </view>
+
                 <view class="footer">
                     <view class="progress-box flex-column" v-if="!updateBtn">
                         <progress class="progress" border-radius="35" :percent="percent" activeColor="#3DA7FF" show-info stroke-width="10" />
@@ -274,6 +278,7 @@ defineExpose({
 .footer {
     min-height: 150rpx;
     padding-bottom: 12rpx;
+    margin-top: 24rpx;
 }
 
 .box-des-scroll {

package/components/ste-comment/ATTRIBUTES.md

@@ -0,0 +1,8 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `tags` | 标签数组 | `string[]` | `[]` | - | - |
+| `total` | 总数 | `number` | `0` | - | - |
+| `comments` | 评价数组 | `CommentType[]` | `[]` | - | - |
+
+

package/components/ste-comment/README.md

@@ -0,0 +1,61 @@
+# Comment 评论组件
+
+用于在商品详情页面展示评论信息
+
+---$
+
+### 基础用法
+
+- 属性`tags`用于接收顶部标签列表，默认值`[]`
+- 属性`total`用于接收评论总数，默认值`0`
+- 属性`comments`用于接收评论列表，默认值`[]`
+
+```html
+<script setup lang="ts">
+    import type { CommentType } from '@/uni_modules/stellar-ui-plus/components/ste-comment/props';
+    import { ref } from 'vue';
+
+    const comments = ref<CommentType[]>([
+        {
+            evaluateText: '牛肉很新鲜，价格便宜，质量不错，推荐',
+            imgList: [
+                'https://image.whzb.com/chain/StellarUI/image/comment_1.png',
+                'https://image.whzb.com/chain/StellarUI/image/comment_2.png',
+                'https://image.whzb.com/chain/StellarUI/image/comment_3.png',
+                'https://image.whzb.com/chain/StellarUI/image/comment_4.png',
+            ],
+            type: 1,
+            date: '2024.10.05',
+            userName: '匿名用户',
+            userAvatar: 'https://image.whzb.com/chain/StellarUI/图片.jpg',
+        },
+    ]);
+
+    const tags = ref(['牛肉很新鲜 22', '牛肉不错 13', '牛肉品质高 6']);
+</script>
+<template>
+    <page-layout title="用户评论" contentStyle="padding: 20rpx;background-color: #f5f5f5;">
+        <ste-comment :comments="comments" :tags="tags" :total="0"></ste-comment>
+    </page-layout>
+</template>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### CommentType
+
+| 属性         | 说明         | 类型       |
+| ------------ | ------------ | ---------- |
+| evaluateText | 评价内容     | `string`   |
+| date         | 日期         | `string`   |
+| imgList      | 评价图片列表 | `string[]` |
+| type         | 1好评 2差评  | `1 / 2`    |
+| userName     | 用户名       | `string`   |
+| userAvatar   | 用户头像     | `string`   |
+
+---$
+{{xuyajun}}

package/components/ste-comment/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "业务组件",
+    "title": "Comment 评价",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/评价.png"
+}

package/components/ste-comment/props.ts

@@ -0,0 +1,28 @@
+import type { PropType } from 'vue';
+
+export interface CommentType extends Record<string, any> {
+    evaluateText: string;
+    imgList: string[];
+    type: 1 | 2;
+    date: string;
+    userName: string;
+    userAvatar: string;
+}
+
+export default {
+    /** 标签数据 */
+    tags: {
+        type: Array as PropType<string[]>,
+        default: () => [],
+    },
+    /** 总数 */
+    total: {
+        type: Number,
+        default: 0,
+    },
+    /** 评论数据 */
+    comments: {
+        type: Array as PropType<CommentType[]>,
+        default: () => [],
+    },
+};

package/components/ste-comment/ste-comment.easycom.json

@@ -0,0 +1,26 @@
+{
+    "name": "ste-goods-info",
+    "description": "按钮组件",
+    "example": "<ste-goods-info></ste-goods-info>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=goods-info",
+    "attributes": [
+        {
+            "name": "tags",
+            "description": "标签数组",
+            "type": "string[]",
+            "default": "[]"
+        },
+        {
+            "name": "total",
+            "description": "总数",
+            "type": "number",
+            "default": 0
+        },
+        {
+            "name": "comments",
+            "description": "评价数组",
+            "type": "CommentType[]",
+            "default": "[]"
+        }
+    ]
+}

package/components/ste-comment/ste-comment.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import steIcon from '../ste-icon/ste-icon.vue';
+import propsData from './props';
+const props = defineProps(propsData);
+const totalData = computed(() => Math.max(props.total, props.comments.length));
+
+const headRight = computed(() => {
+    if (totalData.value === 0) {
+        return '期待你的首评';
+    }
+    return '全部评价';
+});
+</script>
+<template>
+    <view class="ste-comment-root" :class="{ not: totalData === 0 }">
+        <view class="comment-head">
+            <view class="comment-head-title">商品评价({{ totalData }})</view>
+            <view class="comment-head-right">
+                {{ headRight }}
+                <ste-icon v-if="headRight === '全部评价'" code="&#xe674;" />
+            </view>
+        </view>
+        <view class="comment-content" v-if="totalData > 0 || comments.length > 0">
+            <view class="comment-tags" v-if="tags.length > 0">
+                <view class="comment-tag" v-for="(tag, index) in tags" :key="index">
+                    {{ tag }}
+                </view>
+            </view>
+            <view class="comment-list">
+                <view class="comment-item" v-for="(item, index) in comments" :key="index">
+                    <view class="comment-head-info">
+                        <image class="comment-head-avatar" :src="item.userAvatar" mode="aspectFill" />
+                        <view class="comment-head-right">
+                            <view class="comment-head-name">
+                                {{ item.userName }}
+                                <image class="good-tag" v-if="item.type === 1" src="https://image.whzb.com/chain/StellarUI/component-icons/好评.png" />
+                            </view>
+                            <view class="comment-head-time">{{ item.date }}</view>
+                        </view>
+                    </view>
+                    <view class="comment-content">
+                        {{ item.evaluateText }}
+                    </view>
+                    <view class="comment-images">
+                        <image class="comment-image" v-for="(image, index) in item.imgList" :key="index" :src="image" mode="aspectFill" />
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.ste-comment-root {
+    width: 100%;
+    background: #fff;
+    &.not {
+        background: linear-gradient(161deg, #ffffff 0%, #ffffff 42%, #fff1ed 100%);
+    }
+    .comment-head {
+        width: 100%;
+        height: 92rpx;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 20rpx 0 24rpx;
+        .comment-head-title {
+            font-weight: 800;
+            font-size: 32rpx;
+            color: #000000;
+        }
+        .comment-head-right {
+            font-size: 28rpx;
+            color: #858585;
+        }
+    }
+    .comment-content {
+        width: 100%;
+        padding: 0 24rpx 20rpx 24rpx;
+        .comment-tags {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            font-weight: 500;
+            font-size: 24rpx;
+            color: #f65419;
+            margin-top: 4rpx;
+            .comment-tag {
+                background: rgba($color: #f65419, $alpha: 0.08);
+                padding: 10rpx 28rpx;
+                margin-right: 20rpx;
+                margin-bottom: 20rpx;
+                border-radius: 26rpx;
+            }
+        }
+
+        .comment-list {
+            width: 100%;
+            .comment-item {
+                width: 100%;
+                background: #f9f9fb;
+                border-radius: 16rpx;
+                padding: 24rpx 18rpx 16rpx 18rpx;
+                .comment-head-info {
+                    width: 100%;
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    .comment-head-avatar {
+                        width: 64rpx;
+                        height: 64rpx;
+                        border-radius: 50%;
+                    }
+                    .comment-head-right {
+                        font-size: 24rpx;
+                        line-height: 32rpx;
+                        padding-left: 16rpx;
+                        height: 64rpx;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-between;
+                        .comment-head-name {
+                            color: #000000;
+                            font-weight: bold;
+                            display: flex;
+                            flex-direction: row;
+                            align-items: center;
+                            .good-tag {
+                                width: 84rpx;
+                                height: 32rpx;
+                                margin-left: 16rpx;
+                            }
+                        }
+                        .comment-head-time {
+                            color: #999999;
+                            font-weight: 400;
+                        }
+                    }
+                }
+                .comment-content {
+                    font-size: 28rpx;
+                    color: #000000;
+                    line-height: 42rpx;
+                    margin-top: 18rpx;
+                    margin-bottom: 16rpx;
+                }
+
+                .comment-images {
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: wrap;
+                    .comment-image {
+                        width: 150rpx;
+                        height: 150rpx;
+                        margin-right: 8rpx;
+                        margin-bottom: 8rpx;
+                        &:nth-child(4n) {
+                            margin-right: 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

package/components/ste-guide-qa/ATTRIBUTES.md

@@ -0,0 +1,15 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `data` | 问答数据列表 | `GuideQaItem[]` | `[]` | - | - |
+| `mode` | 显示模式 | `string` | `1` | `1`：简单模式<br/>`2`：完整模式 | - |
+| `title` | 标题文本 | `string` | `常见问题` | - | - |
+| `actionTitle` | 操作按钮文本 | `string` | `全部` | - | - |
+| `showNum` | 是否显示问答数量 | `boolean` | `true` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `click-item` | 点击问题或答案时触发 | - | - |
+| `click-all` | 点击查看全部时触发 | - | - |

package/components/ste-guide-qa/README.md

@@ -0,0 +1,123 @@
+# GuideQA 引导服务区
+
+问答组件，用于展示常见问题和答案
+
+---$
+
+### 代码演示
+
+#### 简单模式
+
+通过`mode="1"`设置为简单模式，默认显示模式
+
+```html
+<template>
+    <ste-guide-qa :data="data" @click-all="handleClickAll"></ste-guide-qa>
+</template>
+
+<script setup>
+    import { ref } from 'vue';
+
+    const data = ref([
+        {
+            question: '如何快速上手这个组件？',
+            answer: '请查看我们的快速入门指南，按照步骤操作即可。',
+        },
+        {
+            question: '支持哪些浏览器？',
+            answer: '支持 Chrome 80+、Firefox 78+、Safari 14+、Edge 88+ 等现代浏览器。',
+        },
+        {
+            question: '如何自定义样式？',
+            answer: '可以通过 CSS 变量或者传入自定义的 class 来覆盖默认样式。',
+        },
+        {
+            question: '遇到问题如何反馈？',
+            answer: '可以通过 GitHub Issues 或者官方交流群进行反馈。',
+        },
+    ]);
+
+    const handleClickAll = () => {
+        console.log('点击查看全部');
+    };
+</script>
+```
+
+#### 完整模式
+
+通过`mode="2"`设置为完整模式，支持点击问题和答案
+
+```html
+<template>
+    <ste-guide-qa :data="data" mode="2" @click-item="handleClickItem"></ste-guide-qa>
+</template>
+
+<script setup>
+    import { ref } from 'vue';
+
+    const data = ref([
+        {
+            question: '如何快速上手这个组件？',
+            answer: '请查看我们的快速入门指南，按照步骤操作即可。',
+        },
+        {
+            question: '支持哪些浏览器？',
+            answer: '支持 Chrome 80+、Firefox 78+、Safari 14+、Edge 88+ 等现代浏览器。',
+        },
+    ]);
+
+    const handleClickItem = (type, item) => {
+        console.log(`点击了${type === 'q' ? '问题' : '答案'}:`, item);
+    };
+</script>
+```
+
+#### 自定义标题
+
+通过`title`设置标题文本，`actionTitle`设置操作按钮文本
+
+```html
+<template>
+    <ste-guide-qa :data="data" title="帮助中心" actionTitle="查看更多" @click-all="handleClickAll"></ste-guide-qa>
+</template>
+```
+
+#### 是否显示数量
+
+通过`showNum`控制是否显示数量
+
+```html
+<template>
+    <ste-guide-qa :data="data" :showNum="false"></ste-guide-qa>
+</template>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### Slots
+
+| 插槽名     | 说明     | 插槽参数 | 支持版本 |
+| ---------- | -------- | -------- | -------- |
+| `prefix-q` | 问题前缀 | -        | -        |
+| `prefix-a` | 答案前缀 | -        | -        |
+
+#### Types
+
+```typescript
+export interface GuideQaItem {
+    question: string;
+    answer: string;
+    [key: string]: any;
+}
+
+export type ClickType = 'q' | 'a';
+```
+
+---$
+{{fuyuwei}}
+
+{{qinpengfei}}

package/components/ste-guide-qa/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "业务组件",
+    "title": "GuideQA 引导服务区",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/guide.png"
+}

package/components/ste-guide-qa/props.ts

@@ -0,0 +1,22 @@
+import type { PropType } from 'vue';
+
+export interface GuideQaItem {
+    question: string;
+    answer: string;
+    [key: string]: any;
+}
+
+export type ClickType = 'q' | 'a';
+
+export default {
+    data: { type: Array as PropType<GuideQaItem[]>, default: () => [] },
+    mode: { type: String as PropType<'1' | '2'>, default: '1' },
+    title: { type: String, default: '常见问题' },
+    actionTitle: { type: String, default: '全部' },
+    showNum: { type: Boolean, default: true },
+};
+
+export interface GuideQaEmits {
+    (e: 'click-item', type: ClickType, item: GuideQaItem): void;
+    (e: 'click-all'): void;
+}

package/components/ste-guide-qa/ste-guide-qa.easycom.json

@@ -0,0 +1,58 @@
+{
+    "name": "ste-guide-qa",
+    "description": "引导服务区组件",
+    "example": "<ste-guide-qa :data=\"data\"></ste-guide-qa>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=guide-qa",
+    "attributes": [
+        {
+            "name": "data",
+            "description": "问答数据列表",
+            "type": "GuideQaItem[]",
+            "default": "[]"
+        },
+        {
+            "name": "mode",
+            "description": "显示模式",
+            "type": "string",
+            "values": [
+                {
+                    "name": "1",
+                    "description": "简单模式"
+                },
+                {
+                    "name": "2",
+                    "description": "完整模式"
+                }
+            ],
+            "default": "1"
+        },
+        {
+            "name": "title",
+            "description": "标题文本",
+            "type": "string",
+            "default": "常见问题"
+        },
+        {
+            "name": "actionTitle",
+            "description": "操作按钮文本",
+            "type": "string",
+            "default": "全部"
+        },
+        {
+            "name": "showNum",
+            "description": "是否显示问答数量",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "[event]click-item",
+            "description": "点击问题或答案时触发",
+            "type": "(type: 'q' | 'a', item: GuideQaItem) => void"
+        },
+        {
+            "name": "[event]click-all",
+            "description": "点击查看全部时触发",
+            "type": "() => void"
+        }
+    ]
+}