feat: tour更新 (#2039)

src/packages/__VUE/comment/components/CmtHeader.taro.vue

@@ -13,7 +13,7 @@
           </view>
 
           <view class="nut-comment-header__user-score">
-            <nut-rate v-model="info.score" size="12" spacing="5" readonly :disabled="true" @change="handleClick" />
+            <nut-rate v-model="info.score" size="12" spacing="5" readonly @change="handleClick" />
           </view>
         </view>
 
@@ -25,7 +25,7 @@
       <view class="nut-comment-header__time" v-if="info.time">{{ info.time }}</view>
     </view>
     <view :class="[`nut-comment-header__${type}-score`]" v-if="type == 'complex'">
-      <nut-rate v-model="info.score" size="12" spacing="3" readonly :disabled="true" />
+      <nut-rate v-model="info.score" size="12" spacing="3" readonly />
       <i :class="[`nut-comment-header__${type}-score-i`]"></i>
       <view :class="[`nut-comment-header__${type}-score-size`]">{{ info.size }}</view>
     </view>

src/packages/__VUE/comment/doc.en-US.md

@@ -40,7 +40,6 @@ By default, images of reviews for individual items are displayed in a single sli
 </template>
 <script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
-import { Dongdong } from '@nutui/icons-vue';
 export default {
   setup() {
     let cmt = ref({});
@@ -244,6 +243,8 @@ const follow = {
   "content": "", // Review content
   "images": [] // Review images
 }
+```
+
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/comment/doc.taro.md

@@ -40,7 +40,7 @@ app.use(Comment);
 </template>
 <script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/taro';
 export default {
   setup() {
     let cmt = ref({});
@@ -104,7 +104,7 @@ export default {
 </template>
 <script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/taro';
 export default {
   setup() {
     let cmt = ref({});
@@ -146,7 +146,7 @@ export default {
 </template>
 <script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/taro';
 export default {
   setup() {
     let cmt = ref({});
@@ -250,6 +250,7 @@ const follow = {
   "content": "", // 追评内容
   "images": [] // 追评图片
 }
+```
 
 ## 主题定制
 

src/packages/__VUE/popover/doc.en-US.md

@@ -164,9 +164,9 @@ Customize the content in the slot named content.
 :::demo
 ```html
 <template>
-  <nut-popover v-model:visible="visible.customized" location="top-start" custom-class="customClass">
+  <nut-popover v-model:visible="visible.customized" location="bottom-start" custom-class="customClass">
      <template #reference>
-       <nut-button type="primary" shape="square">自定义内容</nut-button>
+       <nut-button type="primary" shape="square">Custom Content</nut-button>
      </template>
 
      <template #content>
@@ -481,7 +481,7 @@ export default {
 | visible      | whether to show                 | boolean  | `false`     |
 | theme          | Theme style, can be set to `dark` `light`          | string   | `light`   |
 | location       | pop-up location  | string   | `bottom`  |
-| offset        | the offset of the occurrence position  | number \| string   | `[0, 12]`  |
+| offset        | the offset of the occurrence position  | [number,number]   | `[0, 12]`  |
 | show-arrow        | whether to show small arrows  | boolean  | `true`  |
 | custom-class        | custom class   | string  | `''`  |
 | duration        | Transition duration，Unit second  |  number \| string  | `0.3`  |

src/packages/__VUE/popover/doc.md

@@ -164,7 +164,7 @@ export default {
 :::demo
 ```html
 <template>
-  <nut-popover v-model:visible="visible.customized" location="top-start" custom-class="customClass">
+  <nut-popover v-model:visible="visible.customized" location="bottom-start" custom-class="customClass">
      <template #reference>
        <nut-button type="primary" shape="square">自定义内容</nut-button>
      </template>
@@ -481,7 +481,7 @@ export default {
 | visible      | 是否展示气泡弹出层                 | boolean  | `false`     |
 | theme          | 主题风格，可选值为 `dark`            | string   | `light`   |
 | location       | 弹出位置  | string   | `bottom`  |
-| offset        | 出现位置的偏移量  | number \| string   | `[0, 12]`  |
+| offset        | 出现位置的偏移量  | [number,number]   | `[0, 12]`  |
 | show-arrow        | 是否显示小箭头  | boolean  | `true`  |
 | custom-class        | 自定义 class 值  | string  | `''`  |
 | duration        | 动画时长，单位秒  |  number \| string  | `0.3`  |

src/packages/__VUE/popover/doc.taro.md

@@ -146,6 +146,9 @@ export default {
 </script>
 
 <style>
+.nut-row-flex{
+  padding-top: 100px;
+}
 .nut-popover-content {
     width: 120px;
 }
@@ -164,7 +167,7 @@ export default {
 :::demo
 ```html
 <template>
-  <nut-popover v-model:visible="visible.customized" location="top-start" custom-class="customClass">
+  <nut-popover v-model:visible="visible.customized" location="bottom-start" custom-class="customClass">
      <template #reference>
        <nut-button type="primary" shape="square">自定义内容</nut-button>
      </template>
@@ -415,7 +418,7 @@ export default {
 }
 </script>
 <style>
-page{
+#popid{
   margin-top:300px
 }
 .nut-popover-content {
@@ -462,7 +465,7 @@ export default {
 
 </script>
 <style>
-page{
+page,#app{
   margin-top:300px
 }
 .nut-popover-content {
@@ -481,7 +484,7 @@ page{
 | visible      | 是否展示气泡弹出层                 | boolean  | `false`     |
 | theme          | 主题风格，可选值为 dark            | string   | `light`   |
 | location       | 弹出位置  | string   | `bottom`  |
-| offset        | 出现位置的偏移量  | number \| string   | `[0, 12]`  |
+| offset        | 出现位置的偏移量  | [number,number]   | `[0, 12]`  |
 | show-arrow        | 是否显示小箭头  | boolean  | `true`  |
 | custom-class        | 自定义 class 值  | string  | `''`  |
 | duration        | 动画时长，单位秒  |  number \| string  | `0.3`  |

src/packages/__VUE/tour/demo.vue

@@ -109,7 +109,7 @@
       :steps="steps"
       location="top-start"
       :offset="[0, 0]"
-      maskWidth="50"
+      maskWidth="60"
       maskHeight="50"
     ></nut-tour>
   </div>
@@ -282,4 +282,7 @@ export default createDemo({
     border-color: #fff;
   }
 }
+.nut-tabbar-item_icon-box_nav-word {
+  font-size: 14px;
+}
 </style>

src/packages/__VUE/tour/doc.en-US.md

@@ -50,7 +50,11 @@ export default {
     }
 }
 </script>
-
+<style>
+  .nut-tour-content-inner{
+    white-space: nowrap
+  }
+</style>
 ```
 :::
 
@@ -96,7 +100,11 @@ export default {
     }
 }
 </script>
-
+<style>
+  .nut-tour-content-inner{
+    white-space: nowrap
+  }
+</style>
 ```
 :::
 
@@ -140,7 +148,7 @@ export default {
       showTour2: false,
       steps2: [
         {
-          content: '这里换成关注和粉丝啦，听歌时长点击头像可见',
+          content: '支持一套代码同时开发多端小程序+H5',
           target: 'target6',
           popoverOffset: [40, 12],
           arrowOffset: -36
@@ -152,7 +160,11 @@ export default {
 }
 </script>
 
-
+<style>
+  .nut-tour-content-inner{
+    white-space: nowrap
+  }
+</style>
 
 ```
 :::
@@ -239,7 +251,7 @@ export default {
     :steps="steps"
     location="top-start"
     :offset="[0, 0]"
-    maskWidth="50"
+    maskWidth="60"
     maskHeight="50"
   ></nut-tour>
 </template>
@@ -276,6 +288,14 @@ export default {
 };
 </script>
 
+<style>
+  #app{
+    padding-top:200px
+  }
+  .nut-tabbar-item_icon-box_nav-word{
+  font-size: 14px;
+}
+</style>
 ```
 :::
 
@@ -309,7 +329,7 @@ export default {
 | Attribute | Description | Type | Default |
 |----------------|----------------------|----------|--------|
 | target           | target dom               | Element   | -      |
-| content           | popover content     | String   | ''     |
+| content           | popover content     | string   | ''     |
 | location       | Location of popover,[location](https://nutui.jd.com/#/zh-CN/component/popover)           | string  | `'bottom'`  |
 | popover-offset | Offset of popopver [offset](https://nutui.jd.com/#/zh-CN/component/popover)     | [number, number]   | `[0, 12]`  | 
 | arrow-offset      | Offset of arrow [arrowOffset](https://nutui.jd.com/#/zh-CN/component/popover)           | number  | `0`  | 

src/packages/__VUE/tour/doc.md

@@ -41,7 +41,7 @@ export default {
     const state = reactive({
       showTour3: false,
       steps3: [{
-          content: '邀请有礼，全新改版，奖励多多哦',
+          content: '70+ 高质量组件，覆盖移动端主流场景',
           target: 'target7'
         }]
     });
@@ -49,7 +49,11 @@ export default {
     }
 }
 </script>
-
+<style>
+  .nut-tour-content-inner{
+    white-space: nowrap
+  }
+</style>
 ```
 :::
 
@@ -87,7 +91,7 @@ export default {
     const state = reactive({
       showTour1: false,
       steps1: [{
-          content: '邀请有礼，全新改版，奖励多多哦',
+          content: '70+ 高质量组件，覆盖移动端主流场景',
           target: 'target5'
         }]
     });
@@ -95,7 +99,11 @@ export default {
     }
 }
 </script>
-
+<style>
+  .nut-tour-content-inner{
+    white-space: nowrap
+  }
+</style>
 ```
 :::
 
@@ -139,7 +147,7 @@ export default {
       showTour2: false,
       steps2: [
         {
-          content: '这里换成关注和粉丝啦，听歌时长点击头像可见',
+          content: '支持一套代码同时开发多端小程序+H5',
           target: 'target6',
           popoverOffset: [40, 12],
           arrowOffset: -36
@@ -150,7 +158,11 @@ export default {
     }
 }
 </script>
-
+<style>
+  .nut-tour-content-inner{
+    white-space: nowrap
+  }
+</style>
 
 ```
 :::
@@ -238,7 +250,7 @@ export default {
     :steps="steps"
     location="top-start"
     :offset="[0, 0]"
-    maskWidth="50"
+    maskWidth="60"
     maskHeight="50"
   ></nut-tour>
 </template>
@@ -278,6 +290,9 @@ export default {
   #app{
     padding-top:200px
   }
+  .nut-tabbar-item_icon-box_nav-word{
+  font-size: 14px;
+}
 </style>
 
 ```
@@ -295,15 +310,15 @@ export default {
 | offset       | 镂空遮罩相对于目标元素的偏移量  | [number, number]   | `[8, 10]`  |
 | current      | 类型为 `step` 时，默认展示第几步  | number  | `0`  |
 | custom-class       | 自定义 class 值  | string  | ''  |
-| location      | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)  |  String  | 'bottom'  |
+| location      | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)  |  string  | 'bottom'  |
 | next-step-Txt       | 下一步按钮文案  | string   | `'下一步'`  |
 | prev-step-Txt        | 上一步按钮文案  | string   | `'上一步' ` |
 | complete-txt       | 完成按钮文案  | string   | `'完成'`  |
-| mask       | 是否显示镂空遮罩  | Boolean  | `true` |
-| bg-color       | 自定义背景色  | Boolean  | `''` |
-| theme       | 气泡遮罩层主题,同 Popopver 的[theme 属性](https://nutui.jd.com/#/zh-CN/component/popover)  | String  | `'light'` |
-| mask-width       | 镂空遮罩层宽度  | Number、String  | '' |
-| mask-height       | 镂空遮罩层高度  | Number、String  | '' |
+| mask       | 是否显示镂空遮罩  | boolean  | `true` |
+| bg-color       | 自定义背景色  | boolean  | `''` |
+| theme       | 气泡遮罩层主题,同 Popopver 的[theme 属性](https://nutui.jd.com/#/zh-CN/component/popover)  | string  | `'light'` |
+| mask-width       | 镂空遮罩层宽度  | number \| string  | '' |
+| mask-height       | 镂空遮罩层高度  | number \| string  | '' |
 | close-on-click-overlay      | 是否在点击镂空遮罩层后关闭,同 Popopver 的[closeOnClickOverlay 属性](https://nutui.jd.com/#/zh-CN/component/popover)  | Boolean  | `true` |
 | show-prev-step       | 是否展示上一步按钮  | boolean  | `true` |
 | show-title-bar       | 是否展示标题栏  |  boolean  | `false` |
@@ -313,9 +328,9 @@ export default {
 | 键名            | 说明                 | 类型      | 默认值  |
 |----------------|----------------------|----------|--------|
 | target           | 目标对象               | Element   | -      |
-| content           | 气泡层内容     | String   | ''     |
-| location       | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)           | String  | `'bottom'`  |
-| popover-offset      | 气泡层偏移量，同 Popopver 的[offset 属性](https://nutui.jd.com/#/zh-CN/component/popover)             | string/Array/object  | -  | 
+| content           | 气泡层内容     | string   | ''     |
+| location       | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)           | string  | `'bottom'`  |
+| popover-offset      | 气泡层偏移量，同 Popopver 的[offset 属性](https://nutui.jd.com/#/zh-CN/component/popover)             | [number, number]   | `[0, 12]`  | 
 | arrow-offset      | 小箭头的偏移量，同 Popopver 的[arrowOffset 属性](https://nutui.jd.com/#/zh-CN/component/popover)           | number  | `0`  | 
 
 

src/packages/__VUE/tour/doc.taro.md

@@ -42,7 +42,7 @@ export default {
     const state = reactive({
       showTour3: false,
       steps3: [{
-          content: '邀请有礼，全新改版，奖励多多哦',
+          content: '70+ 高质量组件，覆盖移动端主流场景',
           target: 'target7'
         }]
     });
@@ -51,6 +51,12 @@ export default {
 }
 </script>
 
+<style>
+  .nut-tour-content-inner{
+    white-space: nowrap
+  }
+</style>
+
 ```
 :::
 
@@ -88,7 +94,7 @@ export default {
     const state = reactive({
       showTour1: false,
       steps1: [{
-          content: '邀请有礼，全新改版，奖励多多哦',
+          content: '70+ 高质量组件，覆盖移动端主流场景',
           target: 'target5'
         }]
     });
@@ -97,6 +103,12 @@ export default {
 }
 </script>
 
+<style>
+  .nut-tour-content-inner{
+    white-space: nowrap
+  }
+</style>
+
 ```
 :::
 
@@ -140,7 +152,7 @@ export default {
       showTour2: false,
       steps2: [
         {
-          content: '这里换成关注和粉丝啦，听歌时长点击头像可见',
+          content: '支持一套代码同时开发多端小程序+H5',
           target: 'target6',
           popoverOffset: [40, 12],
           arrowOffset: -36
@@ -152,7 +164,11 @@ export default {
 }
 </script>
 
-
+<style>
+  .nut-tour-content-inner{
+    white-space: nowrap
+  }
+</style>
 ```
 :::
 
@@ -225,25 +241,24 @@ export default {
 :::demo
 ```html
 <template>
-  <nut-cell title="点击试试" @click="showTour = true"></nut-cell>
-
-    <nut-tabbar>
-      <nut-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
-      <nut-tabbar-item id="target2" tab-title="分类"></nut-tabbar-item>
-      <nut-tabbar-item id="target3" tab-title="购物车"></nut-tabbar-item>
-      <nut-tabbar-item id="target4" tab-title="我的"></nut-tabbar-item>
-    </nut-tabbar>
-
-    <nut-tour
-      class="nut-customword-tour"
-      v-model="showTour"
-      :steps="steps"
-      location="top-start"
-      :offset="[0, 0]"
-      maskWidth="50"
-      maskHeight="50"
-      :showTitleBar="false"
-    ></nut-tour>
+    <nut-cell title="点击试试" @click="showTour = true"></nut-cell>
+
+      <nut-tabbar :bottom="true">
+        <nut-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
+        <nut-tabbar-item id="target2" tab-title="分类"></nut-tabbar-item>
+        <nut-tabbar-item id="target3" tab-title="购物车"></nut-tabbar-item>
+        <nut-tabbar-item id="target4" tab-title="我的"></nut-tabbar-item>
+      </nut-tabbar>
+
+      <nut-tour
+        class="nut-customword-tour"
+        v-model="showTour"
+        :steps="steps"
+        location="top-start"
+        :offset="[0, 0]"
+        maskWidth="60"
+        maskHeight="50"
+      ></nut-tour>
 </template>
 
 <script lang="ts">
@@ -281,6 +296,13 @@ export default {
 page{
   padding-top: 200px;
 }
+.nut-tour-content{
+  display: block;
+  width: 200px;
+}
+.nut-tabbar-item_icon-box_nav-word{
+  font-size: 14px;
+}
 </style>
 ```
 :::
@@ -297,15 +319,15 @@ page{
 | offset       | 镂空遮罩相对于目标元素的偏移量  | [number, number]   | `[8, 10]`  |
 | current      | 类型为 `step` 时，默认展示第几步  | number  | `0`  |
 | custom-class       | 自定义 class 值  | string  | ''  |
-| location      | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)  |  String  | `'bottom'`  |
+| location      | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)  |  string  | `'bottom'`  |
 | next-step-Txt       | 下一步按钮文案  | string   | `'下一步'`  |
 | prev-step-Txt        | 上一步按钮文案  | string   | `'上一步'`  |
 | complete-txt       | 完成按钮文案  | string   | `'完成'`  |
-| mask       | 是否显示镂空遮罩  | Boolean  | `true` |
-| bg-color       | 自定义背景色  | Boolean  | '' |
-| theme       | 气泡遮罩层主题,同 Popopver 的[theme 属性](https://nutui.jd.com/#/zh-CN/component/popover)  | String  | `'light'` |
-| mask-width       | 镂空遮罩层宽度  | Number、String  | '' |
-| mask-height       | 镂空遮罩层高度  | Number、String  | '' |
+| mask       | 是否显示镂空遮罩  | boolean  | `true` |
+| bg-color       | 自定义背景色  | boolean  | '' |
+| theme       | 气泡遮罩层主题,同 Popopver 的[theme 属性](https://nutui.jd.com/#/zh-CN/component/popover)  | string  | `'light'` |
+| mask-width       | 镂空遮罩层宽度  | number \|string  | '' |
+| mask-height       | 镂空遮罩层高度  | number \|string  | '' |
 | close-on-click-overlay      | 是否在点击镂空遮罩层后关闭,同 Popopver 的[closeOnClickOverlay 属性](https://nutui.jd.com/#/zh-CN/component/popover)  | Boolean  | `true` |
 | show-prev-step       | 是否展示上一步按钮  | boolean  | `true` |
 | show-title-bar       | 是否展示标题栏  |  boolean  | `false` |
@@ -315,9 +337,9 @@ page{
 | 键名            | 说明                 | 类型      | 默认值  |
 |----------------|----------------------|----------|--------|
 | target           | 目标对象               | Element   | -      |
-| content           | 气泡层内容     | String   | ''     |
-| location       | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)           | String  | `'bottom'`  |
-| popover-offset      | 气泡层偏移量，同 Popopver 的[offset 属性](https://nutui.jd.com/#/zh-CN/component/popover)             | string/Array/object  | -  | 
+| content           | 气泡层内容     | string   | ''     |
+| location       | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)           | string  | `'bottom'`  |
+| popover-offset      | 气泡层偏移量，同 Popopver 的[offset 属性](https://nutui.jd.com/#/zh-CN/component/popover)             | [number, number]   | `[0, 12]` | 
 | arrow-offset      | 小箭头的偏移量，同 Popopver 的[arrowOffset 属性](https://nutui.jd.com/#/zh-CN/component/popover)           | number  | `0`  | 
 
 

src/packages/__VUE/tour/index.scss

@@ -16,10 +16,12 @@
   }
 
   &-content {
+    display: block;
     padding: 10px 12px;
     min-width: 200px;
 
     &-top {
+      display: block;
       text-align: right;
 
       &-close {
@@ -30,6 +32,7 @@
 
     &-inner {
       margin: 10px 0px;
+      font-size: 14px;
     }
 
     &-bottom {

src/packages/__VUE/tour/index.taro.vue

@@ -25,7 +25,7 @@
             <view class="nut-tour-content" v-if="type == 'step'">
               <view class="nut-tour-content-top" v-if="showTitleBar">
                 <view @click="close">
-                  <Close class="nut-tour-content-top-close" />
+                  <Close class="nut-tour-content-top-close" size="10px" />
                 </view>
               </view>
               <view class="nut-tour-content-inner">

src/sites/mobile-taro/vue/src/exhibition/pages/tour/index.vue

@@ -108,9 +108,8 @@
       :steps="steps"
       location="top-start"
       :offset="[0, 0]"
-      maskWidth="50"
+      maskWidth="60"
       maskHeight="50"
-      :showTitleBar="false"
     ></nut-tour>
   </div>
 </template>