stellar-ui-plus 1.20.22 → 1.20.24

package/components/ste-barcode/encode.ts

@@ -172,7 +172,7 @@ export function stringToCode128(text: string) {
 
     codes = codes.concat(codesForChar(b1, b2, barc.currcs))
     // code C takes 2 chars each time
-    if (barc.currcs === CODESET.C)
+    if (barc.currcs === CODESET.C)
       i++
   }
 
@@ -203,7 +203,7 @@ export function stringToCode128(text: string) {
   function perhapsCodeC(bytes: number[], codeset: number) {
     for (let i = 0; i < bytes.length; i++) {
       const b = bytes[i]
-      if ((b < 48 || b > 57) && b !== CHAR_TILDE)
+      if ((b < 48 || b > 57) && b !== CHAR_TILDE)
         return codeset
     }
     return CODESET.C
@@ -221,13 +221,13 @@ export function stringToCode128(text: string) {
         if (chr2 === -1) {
           shifter === SET_CODEB
           currcs = CODESET.B
-        }
+        }
         else if (chr2 !== -1 && !charCompatible(chr2, currcs)) {
           // need to check ahead as well
           if (charCompatible(chr2, CODESET.A)) {
             shifter = SET_CODEA
             currcs = CODESET.A
-          }
+          }
           else {
             shifter = SET_CODEB
             currcs = CODESET.B
@@ -235,7 +235,7 @@ export function stringToCode128(text: string) {
         }
       }
       /* eslint-enable no-unused-expressions */
-    }
+    }
     else {
       // if there is a next char AND that next char is also not compatible
 
@@ -251,11 +251,11 @@ export function stringToCode128(text: string) {
             currcs = CODESET.A
             break
         }
-      }
+      }
       else {
         // no need to shift code sets, a temporary SHIFT will suffice
         shifter = SET_SHIFT
-      }
+      }
     }
 
     // ok some type of shift is nessecary
@@ -263,12 +263,12 @@ export function stringToCode128(text: string) {
       result.push(shifter)
       // result.push(codeValue(chr2));-----------------------------------
       result.push(codeValue(chr1))
-    }
+    }
     else {
       if (currcs === CODESET.C) {
         // include next as well
         result.push(codeValue(chr1, chr2))
-      }
+      }
       else {
         result.push(codeValue(chr1))
       }
@@ -284,19 +284,19 @@ function codeValue(chr1: number, chr2: any = undefined) {
   if (typeof chr2 === 'undefined')
     return chr1 >= 32 ? chr1 - 32 : chr1 + 64
   else
-    return Number.parseInt(String.fromCharCode(chr1) + String.fromCharCode(chr2))
+    return Number.parseInt(String.fromCharCode(chr1) + String.fromCharCode(chr2))
 }
 
 function charCompatible(chr: number, codeset: number) {
   const csa = codeSetAllowedFor(chr)
-  if (csa === CODESET.ANY)
+  if (csa === CODESET.ANY)
     return true
     // if we need to change from current
-  if (csa === CODESET.AB)
+  if (csa === CODESET.AB)
     return true
-  if (csa === CODESET.A && codeset === CODESET.A)
+  if (csa === CODESET.A && codeset === CODESET.A)
     return true
-  if (csa === CODESET.B && codeset === CODESET.B)
+  if (csa === CODESET.B && codeset === CODESET.B)
     return true
   return false
 }
@@ -305,11 +305,11 @@ function codeSetAllowedFor(chr: number) {
   if (chr >= 48 && chr <= 57) {
     // 0-9
     return CODESET.ANY
-  }
+  }
   else if (chr >= 32 && chr <= 95) {
     // 0-9 A-Z
     return CODESET.AB
-  }
+  }
   else {
     // if non printable
     return chr < 32 ? CODESET.A : CODESET.B

package/components/ste-button/ste-button.vue

@@ -203,7 +203,14 @@ function handleClick(e: any) {
     background-size: cover;
     border-radius: 10rpx;
     margin: 0;
+
+    // #ifndef MP-ALIPAY
     border-width: 10rpx;
+    // #endif
+
+    // #ifdef MP-ALIPAY
+    border-width: 2rpx;
+    // #endif
 
     .btn-box {
         width: 100%;

package/components/ste-category/ste-category.vue

@@ -40,7 +40,7 @@ const initData = () => {
     });
 };
 
-watch(() => props.data, initData, { immediate: true });
+watch(() => props.data, initData, { immediate: true, deep: true });
 
 const handleCategoryClick = (item: CategoryItem, index: number) => {
     categoryData.forEach((item, i) => {

package/components/ste-function-list/ATTRIBUTES.md

@@ -18,6 +18,6 @@
 #### Events
 | 事件名 | 说明  | 事件参数 | 支持版本 |
 | ----- | ----- | ------- | -------- |
-| `click-header` | 点击列表头部触发 | `type`：点击的区域类型（可选值：`title`, `subhead`,`more`） | - |
-| `click-item` | 点击列表项触发 | `type`：点击的区域类型（可选值：`image` , `title` , `subhead` , `status` , `button`） | - |
+| `click-header` | 点击列表头部触发 | `type`：点击的区域类型（可选值：`empty`, `title`, `subhead`,`more`） | - |
+| `click-item` | 点击列表项触发 | `type`：点击的区域类型（可选值：`empty`, `image` , `title` , `subhead` , `status` , `button`）<br/>`item`：当前点击的数据项 | - |
 | `click-empty` | 数据为空时点击内容触发 | `type`：点击的区域类型（可选值：`image` , `text` , `button`） | - |

package/components/ste-function-list/ste-function-list.easycom.json

@@ -73,22 +73,26 @@
         {
             "name": "[event]click-header",
             "description": "点击列表头部触发",
-            "type": "(type: 'title' | 'subhead' | 'more') => void",
+            "type": "(type: 'empty' | 'title' | 'subhead' | 'more') => void",
             "params": [
                 {
                     "name": "type",
-                    "description": "点击的区域类型（可选值：`title`, `subhead`,`more`）"
+                    "description": "点击的区域类型（可选值：`empty`, `title`, `subhead`,`more`）"
                 }
             ]
         },
         {
             "name": "[event]click-item",
             "description": "点击列表项触发",
-            "type": "(type: 'image' | 'title' | 'subhead' | 'status' | 'button') => void",
+            "type": "(type: 'empty' | 'image' | 'title' | 'subhead' | 'status' | 'button'; item:FunctionListItem) => void",
             "params": [
                 {
                     "name": "type",
-                    "description": "点击的区域类型（可选值：`image` , `title` , `subhead` , `status` , `button`）"
+                    "description": "点击的区域类型（可选值：`empty`, `image` , `title` , `subhead` , `status` , `button`）"
+                },
+                {
+                    "name": "item",
+                    "description": "当前点击的数据项"
                 }
             ]
         },

package/components/ste-function-list/ste-function-list.vue

@@ -12,23 +12,23 @@ const rootStyle = computed(() => {
 });
 
 const emits = defineEmits<{
-    (e: 'click-header', type: 'title' | 'subhead' | 'more'): void;
-    (e: 'click-item', type: 'image' | 'title' | 'subhead' | 'status' | 'button', item: FunctionListItem): void;
+    (e: 'click-header', type: 'empty' | 'title' | 'subhead' | 'more'): void;
+    (e: 'click-item', type: 'empty' | 'image' | 'title' | 'subhead' | 'status' | 'button', item: FunctionListItem): void;
     (e: 'click-empty', type: 'image' | 'text' | 'button'): void;
 }>();
 
-const onClickHeader = (type: 'title' | 'subhead' | 'more') => emits('click-header', type);
+const onClickHeader = (type: 'empty' | 'title' | 'subhead' | 'more') => emits('click-header', type);
 
-const onClickItem = (type: 'image' | 'title' | 'subhead' | 'status' | 'button', item: FunctionListItem) => emits('click-item', type, item);
+const onClickItem = (type: 'empty' | 'image' | 'title' | 'subhead' | 'status' | 'button', item: FunctionListItem) => emits('click-item', type, item);
 
 const onClickEmpty = (type: 'image' | 'text' | 'button') => emits('click-empty', type);
 </script>
 <template>
     <view class="ste-function-list-root" :style="[rootStyle]">
-        <view class="ste-function-list-header">
+        <view class="ste-function-list-header" @click="onClickHeader('empty')">
             <view class="ste-function-list-header-l">
-                <view class="ste-function-list-title" @click="onClickHeader('title')">{{ title }}</view>
-                <view class="ste-function-list-subhead" @click="onClickHeader('subhead')">
+                <view class="ste-function-list-title" @click.stop="onClickHeader('title')">{{ title }}</view>
+                <view class="ste-function-list-subhead" @click.stop="onClickHeader('subhead')">
                     <slot name="subhead">
                         {{ subhead }}
                     </slot>
@@ -36,7 +36,7 @@ const onClickEmpty = (type: 'image' | 'text' | 'button') => emits('click-empty',
             </view>
             <view class="ste-function-list-header-r">
                 <slot name="header-right">
-                    <view class="ste-function-list-more" @click="onClickHeader('more')">
+                    <view class="ste-function-list-more" @click.stop="onClickHeader('more')">
                         更多
                         <ste-icon code="&#xe674;" color="#353535"></ste-icon>
                     </view>
@@ -45,24 +45,17 @@ const onClickEmpty = (type: 'image' | 'text' | 'button') => emits('click-empty',
         </view>
         <view class="ste-function-list-content" v-if="data?.length">
             <scroll-view scroll-x class="content-list" :class="{ multiple: data?.length > 1 }">
-                <view class="content-list-item" v-for="(item, index) in data" :key="index">
-                    <view class="content-list-item-image" @click="onClickItem('image', item)">
+                <view class="content-list-item" v-for="(item, index) in data" :key="index" @click="onClickItem('empty', item)">
+                    <view class="content-list-item-image" @click.stop="onClickItem('image', item)">
                         <ste-image :src="item.image" mode="aspectFill"></ste-image>
                     </view>
                     <view class="content-list-item-info">
-                        <view class="content-list-item-info-title" @click="onClickItem('title', item)">{{ item.title }}</view>
-                        <view class="content-list-item-info-subhead" v-if="item.subhead" @click="onClickItem('subhead', item)">{{ item.subhead }}</view>
+                        <view class="content-list-item-info-title" @click.stop="onClickItem('title', item)">{{ item.title }}</view>
+                        <view class="content-list-item-info-subhead" v-if="item.subhead" @click.stop="onClickItem('subhead', item)">{{ item.subhead }}</view>
                         <view class="content-list-item-info-footer">
-                            <view class="content-list-item-info-status" @click="onClickItem('status', item)">{{ item.statusText }}</view>
-                            <view class="content-list-item-info-button" v-if="item.buttonText || buttonText || item.buttonIcon || buttonIcon">
-                                <ste-button
-                                    :mode="100"
-                                    :rootStyle="{ height: '56rpx' }"
-                                    type="primary"
-                                    @click="onClickItem('button', item)"
-                                    :background="item.buttonBg || buttonBg"
-                                    :color="item.buttonColor || buttonColor"
-                                >
+                            <view class="content-list-item-info-status" @click.stop="onClickItem('status', item)">{{ item.statusText }}</view>
+                            <view class="content-list-item-info-button" v-if="item.buttonText || buttonText || item.buttonIcon || buttonIcon" @click.stop="onClickItem('button', item)">
+                                <ste-button :mode="100" :rootStyle="{ height: '56rpx' }" type="primary" :background="item.buttonBg || buttonBg" :color="item.buttonColor || buttonColor">
                                     <ste-icon :code="item.buttonIcon || buttonIcon" :color="item.buttonColor || buttonColor" />
                                     {{ item.buttonText || buttonText }}
                                 </ste-button>
@@ -73,7 +66,7 @@ const onClickEmpty = (type: 'image' | 'text' | 'button') => emits('click-empty',
             </scroll-view>
         </view>
         <view class="ste-function-list-empty" v-else>
-            <ste-image :src="emptyImage" width="96" height="96" @clicl="onClickEmpty('image')" />
+            <ste-image :src="emptyImage" width="96" height="96" @click="onClickEmpty('image')" />
             <view class="empty-message" @click="onClickEmpty('text')">{{ emptyText }}</view>
             <ste-button :mode="100" :rootStyle="{ height: '56rpx' }" type="primary" :background="buttonBg" :color="buttonColor" @click="onClickEmpty('button')">
                 {{ emptyButtonText }}

package/components/ste-goods-info/ATTRIBUTES.md

@@ -34,8 +34,8 @@
 | 事件名 | 说明  | 事件参数 | 支持版本 |
 | ----- | ----- | ------- | -------- |
 | `change` | 数值/选择改变时触发 | `data`：正在发生改变的数据：{ number?: number; checked?: boolean; applyForNumber?: number }<br/>`goods`：当前商品信息 | - |
-| `click` | 点击确定按钮时触发 | `type`：点击位置:'image' / 'title' / 'code' / 'price' / 'originalPrice' / 'stepper' | - |
+| `click` | 点击确定按钮时触发 | `type`：点击位置: `empty` , `image` , `title` , `code` , `price` , `originalPrice` , `stepper` | - |
 | `plus` | 点击加号前置钩子函数 | `value`：改变后的绑定值<br/>`suspend`：等待<br/>`next`：继续<br/>`stop`：停止 | - |
 | `minus` | 点击减号前置钩子函数 | `value`：改变后的绑定值<br/>`suspend`：等待<br/>`next`：继续<br/>`stop`：停止 | - |
-| `click-suggest` | 点击建议模块触发 | `type`：点击的区域：'method' / 'back' / 'item' / 'right'<br/>`item`：type为item时，点击的item对象 | - |
+| `click-suggest` | 点击建议模块触发 | `type`：点击的区域：`method`, `back`, `item`, `right`<br/>`item`：type为item时，点击的item对象 | - |
 | `click-stepper-input` | 点击步进器输入框触发 | - | - |

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

@@ -189,11 +189,11 @@
         {
             "name": "[event]click",
             "description": "点击确定按钮时触发",
-            "type": "(type: 'image' | 'title' | 'code' | 'price' | 'originalPrice' | 'stepper') => void",
+            "type": "(type:'empty' | 'image' | 'title' | 'code' | 'price' | 'originalPrice' | 'stepper') => void",
             "params": [
                 {
                     "name": "type",
-                    "description": "点击位置:'image' | 'title' | 'code' | 'price' | 'originalPrice' | 'stepper'"
+                    "description": "点击位置: `empty` , `image` , `title` , `code` , `price` , `originalPrice` , `stepper`"
                 }
             ]
         },
@@ -250,7 +250,7 @@
             "params": [
                 {
                     "name": "type",
-                    "description": "点击的区域：'method' | 'back' | 'item' | 'right'"
+                    "description": "点击的区域：`method`, `back`, `item`, `right`"
                 },
                 {
                     "name": "item",

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

@@ -16,7 +16,7 @@ const emits = defineEmits<{
     (e: 'update:number', number?: number): void;
     (e: 'update:checked', checked?: boolean): void;
     (e: 'change', change: { number?: number; checked?: boolean; applyForNumber?: number }, data: GoodsInfoType): void;
-    (e: 'click', type: 'image' | 'title' | 'code' | 'price' | 'originalPrice' | 'stepper'): void;
+    (e: 'click', type: 'empty' | 'image' | 'title' | 'code' | 'price' | 'originalPrice' | 'stepper'): void;
     (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;
@@ -83,7 +83,7 @@ const checkboxChange = () => {
     emits('change', { checked: _checked.value }, props.data);
 };
 
-const onClick = (type: 'image' | 'title' | 'code' | 'price' | 'originalPrice' | 'stepper') => {
+const onClick = (type: 'empty' | 'image' | 'title' | 'code' | 'price' | 'originalPrice' | 'stepper') => {
     emits('click', type);
 };
 
@@ -168,14 +168,14 @@ const viewClass = computed(() => {
             <view @click="clickChecked" class="ste-goods-info-checkbox left" v-if="checkbox === 'left'">
                 <setCheckbox :disabled="checkboxDisabled" iconSize="30" :model-value="_checked" />
             </view>
-            <view class="ste-goods-info-view" :class="viewClass">
-                <view class="ste-goods-info-image">
-                    <setImage :radius="imageRadius" :src="data.image" :width="imageSize" :height="imageSize" @click="onClick('image')" />
+            <view class="ste-goods-info-view" :class="viewClass" @click="onClick('empty')">
+                <view class="ste-goods-info-image" @click.stop="onClick('image')">
+                    <setImage :radius="imageRadius" :src="data.image" :width="imageSize" :height="imageSize" />
                 </view>
                 <view class="ste-goods-info-content">
                     <view class="content-header">
                         <view class="ste-goods-info-header">
-                            <view class="ste-goods-info-title" :style="[titleStyle]" @click="onClick('title')">
+                            <view class="ste-goods-info-title" :style="[titleStyle]" @click.stop="onClick('title')">
                                 <view class="ste-goods-info-tag-box" v-if="data.tag">
                                     <view class="ste-goods-info-tag" :style="{ background: _tagBg }">{{ data.tag }}</view>
                                 </view>
@@ -185,7 +185,7 @@ const viewClass = computed(() => {
                                 <setCheckbox :disabled="checkboxDisabled" iconSize="30" :model-value="_checked" />
                             </view>
                         </view>
-                        <view class="ste-goods-info-codes" @click="onClick('code')">
+                        <view class="ste-goods-info-codes" @click.stop="onClick('code')">
                             {{ data.code }}
                             <span style="color: #e6e8ea">|</span>
                             {{ data.barCode }}
@@ -196,21 +196,26 @@ const viewClass = computed(() => {
                     </view>
                     <view class="content-footer">
                         <view class="ste-goods-info-price" v-if="showPriceRow">
-                            <view class="ste-goods-info-price-left" v-if="!hidePrice">
-                                <setPrice :value="data.price" :digits="2" bold :styleType="3" :line-price-color="priceColor" :fontSize="priceSize" @click="onClick('price')" />
-                                <setPrice
-                                    v-if="data.originalPrice"
-                                    :digits="2"
-                                    :value="data.originalPrice"
-                                    isSuggestPrice
-                                    line-price-color="#666666"
-                                    marginLeft="16"
-                                    fontSize="20"
-                                    @click="onClick('originalPrice')"
-                                    :showUnit="false"
-                                />
+                            <view class="ste-goods-info-price-left">
+                                <block v-if="!hidePrice">
+                                    <view @click.stop="onClick('price')">
+                                        <setPrice :value="data.price" :digits="2" bold :styleType="3" :line-price-color="priceColor" :fontSize="priceSize" />
+                                    </view>
+                                    <view @click.stop="onClick('originalPrice')">
+                                        <setPrice
+                                            v-if="data.originalPrice"
+                                            :digits="2"
+                                            :value="data.originalPrice"
+                                            isSuggestPrice
+                                            line-price-color="#666666"
+                                            marginLeft="16"
+                                            fontSize="20"
+                                            :showUnit="false"
+                                        />
+                                    </view>
+                                </block>
                             </view>
-                            <view class="ste-goods-info-price-right" @click="onClick('stepper')">
+                            <view class="ste-goods-info-price-right" @click.stop="onClick('stepper')">
                                 <slot name="stepper">
                                     <view v-if="stepper" :class="{ readonly: readonlyStepper }" @click.stop="true">
                                         <steStepper
@@ -347,10 +352,16 @@ const viewClass = computed(() => {
 
                 .ste-goods-info-price {
                     width: 100%;
-                    height: 34rpx;
+                    line-height: 34rpx;
                     display: flex;
                     justify-content: space-between;
-                    align-items: anchor-center;
+                    align-items: center;
+                    .ste-goods-info-price-left {
+                        display: flex;
+                        flex-direction: row;
+                        align-items: flex-end;
+                    }
+
                     .ste-goods-info-price-right .readonly {
                         pointer-events: none;
                     }

package/components/ste-login/ATTRIBUTES.md

@@ -2,6 +2,7 @@
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `mode` | 登录模式 | `string` | `base` | `base`：基础登录<br/>`mode1`：复杂登录 | - |
+| `color` | 颜色统一设置，包括按钮、输入框图标、协议超链接等，默认跟随主题色 | `string` | `` | - | - |
 | `protocolCheck` | 是否勾选协议 | `boolean` | `false` | - | - |
 | `baseProtocol` | 协议可读部分内容 | `string` | `` | - | - |
 | `protocolData` | 协议配置数据 | `ProtocolItem[]` | `[]` | - | - |
@@ -9,7 +10,8 @@
 | `primaryBtn` | 主要按钮配置 | `BtnItem[]` | `[]` | - | - |
 | `secondaryBtn` | 次要按钮配置 | `BtnItem[]` | `[]` | - | - |
 | `loginGroup` | 登录表单配置 | `LoginGroupItem[]` | `[]` | - | - |
-| `loginBackground` | 登录框背景 | `string` | `` | - | - |
+| `loginBoxBackground` | 登录框背景 | `string` | `` | - | - |
+| `loginBoxHeight` | 登录框高度，默认占整个高度的67%，也可以为具体像素值 | `string` | `67%` | - | - |
 | `bottomTip` | 底部提示 | `string` | `` | - | - |
 
 
@@ -21,3 +23,4 @@
 | `secondaryBtnClick` | 次要按钮点击时触发 | `item`：所点击的按钮项 | - |
 | `tabChange` | 复杂登录时tab切换时触发 | `item`：当前选项卡项 | - |
 | `formDataChange` | 复杂登录时输入框或者下拉框改变时触发 | `data`：所有表单值 | - |
+| `getCode` | 当配置输入类型为验证码时，点击获取验证码时触发 | - | - |

package/components/ste-login/README.md

@@ -65,13 +65,15 @@
 </script>
 ```
 
-#### 复杂登录
+#### 复杂登录 - 示例1
 
 - `mode`值为`mode1`时为复杂登录
 - 此时`primaryBtnData`样式不变，`secondaryBtnData`为文字按钮
 - 若需要拿到表单数据
     - `@form-data-change`事件监听，事件参数为表单数据
     - 通过ref方式获取`formData`属性
+- 根据`loginGroup`属性动态生成tab栏和表单
+- 其中`items`属性配置具体输入，其中`type` 支持`number`/`password`/`select`/`txt`/`validate`（数字、密码、下拉框、文本提示、验证码）
 
 ```html
 <template>
@@ -86,7 +88,7 @@
             :bottomTip="baseTip"
             :loginGroup="loginGroup"
             loginImgUrl="https://image.whzb.com/chain/inte-cloud-tour-uniapp/00-普通图片/00-开发版//login/bg2.png?202408121"
-            loginBackgroundImg="https://image.whzb.com/chain/inte-cloud-tour-uniapp/00-普通图片/00-开发版//login/bg1.png?202408121"
+            loginBoxBackground="https://image.whzb.com/chain/inte-cloud-tour-uniapp/00-普通图片/00-开发版//login/bg1.png?202408121"
             @tabChange="tabChange"
             @primaryBtnClick="handleClick"
             @secondary-btn-click="handleClick"
@@ -197,16 +199,111 @@
 </script>
 ```
 
+#### 复杂登录 - 示例2
+
+- 当`loginGroup`配置为一个数据时，顶部tab栏会隐藏显示
+- 可在单个表单中配置`iconColor`改变图标颜色
+
+```html
+<template>
+    <view style="width: 100vw; height: 100vh;padding-top: 186rpx">
+        <ste-login
+            ref="myLogin"
+            mode="mode1"
+            color="#EC3E1A"
+            :baseProtocol="base"
+            :protocolData="protocolData"
+            :primaryBtn="primaryBtnData"
+            :secondaryBtn="secondaryBtnData"
+            :bottomTip="baseTip"
+            :loginGroup="loginGroup"
+            loginImgUrl="https://image.whzb.com/chain/StellarUI/image/食堂登录.png"
+            loginBoxBackground="rgba(255, 255, 255, .75)"
+            @primaryBtnClick="handleClick"
+            @secondary-btn-click="handleClick"
+            @protocol-click="protocolClick"
+            @form-data-change="formDataChange"
+        />
+    </view>
+</template>
+<script lang="ts" setup>
+    import { reactive, ref } from 'vue';
+    import type { RefLogin } from '@/uni_modules/stellar-ui-plus/types/refComponents';
+    const baseTip = '版本信息 V1.0.0';
+
+    const myLogin = ref<RefLogin>();
+
+    const base = '登录即同意';
+    const protocolData = reactive([{ title: '中百食堂隐私郑策', key: 'p1' }]);
+
+    const loginGroup = reactive([
+        {
+            title: '登陆',
+            key: 'bind',
+            items: [
+                {
+                    title: '手机号',
+                    key: 'username',
+                    type: 'number' as const,
+                    style: {
+                        iconColor: '#FFAFA4',
+                    },
+                },
+                {
+                    title: '验证码',
+                    key: 'validate',
+                    type: 'validate' as const,
+                    style: {
+                        iconColor: '#FFAFA4',
+                    },
+                },
+            ],
+        },
+    ]);
+
+    const primaryBtnData = reactive([
+        {
+            title: '登录',
+            key: 'wx',
+        },
+    ]);
+
+    const secondaryBtnData = reactive([
+        {
+            title: '微信一键登录',
+            key: 'wxOneKey',
+        },
+    ]);
+
+    const handleClick = (item: any) => {
+        console.log(item);
+        if (item.key === 'wx') {
+            console.log('点击了微信登录');
+            console.log(myLogin.value?.formData);
+        }
+    };
+
+    const formDataChange = (data: any) => {
+        console.log(data);
+    };
+
+    const protocolClick = (item: any) => {
+        console.log(item);
+    };
+</script>
+```
+
 ---$
 
 ### API
 
 #### BaseConfigItem & ProtocolItem & BtnItem
 
-| 属性名  | 说明       | 是否必填 | 类型     |
-| ------- | ---------- | -------- | -------- |
-| `title` | 显示的内容 | 是       | `string` |
-| `key`   | 标识符     | 是       | `string` |
+| 属性名  | 说明                           | 是否必填 | 类型     |
+| ------- | ------------------------------ | -------- | -------- |
+| `title` | 显示的内容                     | 是       | `string` |
+| `key`   | 标识符                         | 是       | `string` |
+| `style` | 对应配置的样式(暂时只支持部分) | 否       | `object` |
 
 #### LoginGroupItem
 
@@ -218,17 +315,17 @@
 
 #### LoginItem
 
-| 属性名        | 说明                                               | 是否必填 | 类型               |
-| ------------- | -------------------------------------------------- | -------- | ------------------ |
-| `title`       | 显示的内容                                         | 是       | `string`           |
-| `key`         | 标识符                                             | 是       | `string`           |
-| `type`        | 输入类型，暂支持`number`/`password`/`select`/`txt` | 否       | `string`           |
-| `value`       | 默认值                                             | 否       | `string`           |
-| `selectData`  | 选项数据，仅当`type`为`select`时生效               | 否       | `BaseConfigItem[]` |
-| `maxLength`   | 最大长度                                           | 否       | `number`           |
-| `disabled`    | 禁用                                               | 否       | `boolean`          |
-| `icon`        | 输入框模式下对应的前缀图标code                     | 否       | `string`           |
-| `placeholder` | 输入框模式下对应的placeholder                      | 否       | `string`           |
+| 属性名        | 说明                                                          | 是否必填 | 类型               |
+| ------------- | ------------------------------------------------------------- | -------- | ------------------ |
+| `title`       | 显示的内容                                                    | 是       | `string`           |
+| `key`         | 标识符                                                        | 是       | `string`           |
+| `type`        | 输入类型，暂支持`number`/`password`/`select`/`txt`/`validate` | 否       | `string`           |
+| `value`       | 默认值                                                        | 否       | `string`           |
+| `selectData`  | 选项数据，仅当`type`为`select`时生效                          | 否       | `BaseConfigItem[]` |
+| `maxLength`   | 最大长度                                                      | 否       | `number`           |
+| `disabled`    | 禁用                                                          | 否       | `boolean`          |
+| `icon`        | 输入框模式下对应的前缀图标code                                | 否       | `string`           |
+| `placeholder` | 输入框模式下对应的placeholder                                 | 否       | `string`           |
 
 <!-- props -->