feat: 小程序demo增加顶导

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

@@ -112,10 +112,10 @@ User can custom divider style with style attribute.
 
 | Attribute         | Description                             | Type   | Default           |
 |--------------|----------------------------------|--------|------------------|
-| dashed         | 	Whether to use dashed border             | Boolean | false                |
-| hairline        | Whether to use hairline                         | Boolean | true                |
-| content-position        | Content position, can be set to left or right                       | String | center                |
-| direction         | The direction of divider             | String | 'horizontal'                |
+| dashed         | 	Whether to use dashed border             | boolean | `false`                |
+| hairline        | Whether to use hairline                         | boolean | `true`                |
+| content-position        | Content position, can be set to `left` or `right`                       | string | `center`                |
+| direction         | The direction of divider             | string | `horizontal`                |
 
 ### Slots
 

src/packages/__VUE/divider/doc.md

@@ -112,10 +112,10 @@ app.use(Divider);
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| dashed         | 是否使用虚线               | Boolean | false                |
-| hairline        | 是否使用 0.5px 线                         | Boolean | true                |
-| content-position        | 内容位置，可选值为left right                         | String | center                |
-| direction        | 水平还是垂直类型               | String | 'horizontal'                |
+| dashed         | 是否使用虚线               | boolean | `false`                |
+| hairline        | 是否使用 0.5px 线                         | boolean | `true`                |
+| content-position        | 内容位置，可选值为 `left`、`right`                         | string | `center`                |
+| direction        | 水平还是垂直类型               | string | `horizontal`                |
 
 ### Slots
 

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

@@ -112,10 +112,10 @@ app.use(Divider);
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| dashed         | 是否使用虚线               | Boolean | false                |
-| hairline        | 是否使用 0.5px 线                         | Boolean | true                |
-| content-position        | 内容位置，可选值为left right                         | String | center                |
-| direction         | 水平还是垂直类型               | String | 'horizontal'                |
+| dashed         | 是否使用虚线               | boolean | `false`                |
+| hairline        | 是否使用 0.5px 线                         | boolean | `true`                |
+| content-position        | 内容位置，可选值为 `left`、`right`                         | string | `center`                |
+| direction         | 水平还是垂直类型               | string | `horizontal`                |
 
 ### Slots
 

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

@@ -386,11 +386,11 @@ export default {
 
 | Attribute                        | Description                                                         | Type                    | Default |
 |----------------------------------|---------------------------------------------------------------------|-------------------------|---------|
-| active-color                     | Active color of title and option                                    | String                  | #F2270C |
-| close-on-click-overlay | Whether to close when overlay is clicked                            | Boolean                 | true    |
-| scroll-fixed           | Whether to fixed when window is scrolled, fixed position can be set | Boolean、String、Number | false   |
-| title-class            | Custome title class                                                 | String                  | -       |
-| lock-scroll            | Whether the background is locked                                    | Boolean                 | true    |
+| active-color                     | Active color of title and option                                    | string                  | `#F2270C` |
+| close-on-click-overlay | Whether to close when overlay is clicked                            | boolean                 | `true`    |
+| scroll-fixed           | Whether to fixed when window is scrolled, fixed position can be set | boolean \| string \| number | `false`   |
+| title-class            | Custome title class                                                 | string                  | -       |
+| lock-scroll            | Whether the background is locked                                    | boolean                 | `true`    |
 ### Menu Slots
 | Name | Description |
 |-|-|
@@ -399,14 +399,14 @@ export default {
 
 | Attribute | Description                          | Type    | Default        |
 |-----------|--------------------------------------|---------|----------------|
-| title     | Item title                           | String  | 当前选中项文字 |
+| title     | Item title                           | string  | `当前选中项文字` |
 | options   | Options                              | Array   | -              |
-| disabled  | Whether to disable dropdown item     | Boolean | false          |
-| cols      | Display how many options in one line | Number  | 1              |
+| disabled  | Whether to disable dropdown item     | boolean | `false`          |
+| cols      | Display how many options in one line | number  | 1              |
 
-| direction           | Expand direction, can be set to up   | String  | 'down'         |
-| active-title-class   | Active custome title class           | String  | -              |
-| inactive-title-class | Inactive custome title class         | String  | -              |
+| direction           | Expand direction, can be set to up   | string  | `down`         |
+| active-title-class   | Active custome title class           | string  | -              |
+| inactive-title-class | Inactive custome title class         | string  | -              |
 
 
 ### MenuItem Slots

src/packages/__VUE/menu/doc.md

@@ -387,11 +387,11 @@ export default {
 
 | 参数                             | 说明                           | 类型                    | 默认值  |
 |----------------------------------|--------------------------------|-------------------------|---------|
-| active-color                     | 选项的选中态图标颜色           | String                  | #F2270C |
-| close-on-click-overlay | 是否在点击遮罩层后关闭菜单     | Boolean                 | true    |
-| scroll-fixed           | 滚动后是否固定，可设置固定位置 | Boolean、String、Number | false   |
-| title-class            | 自定义标题样式类               | String                  | -       |
-| lock-scroll            | 背景是否锁定                   | Boolean                 | true    |
+| active-color                     | 选项的选中态图标颜色           | string                  | `#F2270C` |
+| close-on-click-overlay | 是否在点击遮罩层后关闭菜单     | boolean                 | `true`    |
+| scroll-fixed           | 滚动后是否固定，可设置固定位置 | boolean \| string \| number | `false`   |
+| title-class            | 自定义标题样式类               | string                  | -       |
+| lock-scroll            | 背景是否锁定                   | boolean                 | `true`    |
 
 ### Menu Slots
 | 名称 | 说明 |
@@ -402,13 +402,13 @@ export default {
 
 | 参数                          | 说明                                    | 类型    | 默认值           |
 |-------------------------------|-----------------------------------------|---------|------------------|
-| title                         | 菜单项标题                              | String  | 当前选中项文字   |
+| title                         | 菜单项标题                              | string  | `当前选中项文字`   |
 | options                       | 选项数组                                | Array   | -                |
-| disabled                      | 是否禁用菜单                            | Boolean | false            |
-| cols                          | 可以设置一行展示多少列 options          | Number  | 1                |
-| direction          | 菜单展开方向，可选值为up                | String  | 'down'           |
-| active-title-class   | 选项选中时自定义标题样式类              | String  | -                |
-| inactive-title-class | 选项非选中时自定义标题样式类            | String  | -                |
+| disabled                      | 是否禁用菜单                            | boolean | `false`            |
+| cols                          | 可以设置一行展示多少列 options          | number  | 1                |
+| direction          | 菜单展开方向，可选值为up                | string  | `down`           |
+| active-title-class   | 选项选中时自定义标题样式类              | string  | -                |
+| inactive-title-class | 选项非选中时自定义标题样式类            | string  | -                |
 ### MenuItem Slots
 | 名称 | 说明 |
 |-|-|

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

@@ -387,11 +387,11 @@ export default {
 
 | 参数                             | 说明                           | 类型                    | 默认值  |
 |----------------------------------|--------------------------------|-------------------------|---------|
-| active-color                     | 选项的选中态图标颜色           | String                  | #F2270C |
-| close-on-click-overlay | 是否在点击遮罩层后关闭菜单     | Boolean                 | true    |
-| scroll-fixed           | 滚动后是否固定，可设置固定位置 | Boolean、String、Number | false   |
-| title-class           | 自定义标题样式类               | String                  | -       |
-| lock-scroll           | 背景是否锁定                   | Boolean                 | true    |
+| active-color                     | 选项的选中态图标颜色           | string                  | `#F2270C` |
+| close-on-click-overlay | 是否在点击遮罩层后关闭菜单     | boolean                 | `true`    |
+| scroll-fixed           | 滚动后是否固定，可设置固定位置 | boolean \| string \| number | `false`   |
+| title-class           | 自定义标题样式类               | string                  | -       |
+| lock-scroll           | 背景是否锁定                   | boolean                 | `true`    |
 
 ### Menu Slots
 | 名称 | 说明 |
@@ -401,13 +401,13 @@ export default {
 
 | 参数                          | 说明                                    | 类型    | 默认值           |
 |-------------------------------|-----------------------------------------|---------|------------------|
-| title                         | 菜单项标题                              | String  | 当前选中项文字   |
+| title                         | 菜单项标题                              | string  | `当前选中项文字`   |
 | options                       | 选项数组                                | Array   | -                |
-| disabled                      | 是否禁用菜单                            | Boolean | false            |
-| cols                          | 可以设置一行展示多少列 options          | Number  | 1                |
-| direction          | 菜单展开方向，可选值为up                | String  | 'down'           |
-| active-title-class   | 选项选中时自定义标题样式类              | String  | -                |
-| inactive-title-class | 选项非选中时自定义标题样式类            | String  | -                |
+| disabled                      | 是否禁用菜单                            | boolean | `false`            |
+| cols                          | 可以设置一行展示多少列 options          | number  | 1                |
+| direction          | 菜单展开方向，可选值为up                | string  | `down`           |
+| active-title-class   | 选项选中时自定义标题样式类              | string  | -                |
+| inactive-title-class | 选项非选中时自定义标题样式类            | string  | -                |
 ### MenuItem Slots
 | 名称 | 说明 |
 |-|-|

src/sites/mobile-taro/vue/src/app.config.ts

@@ -110,7 +110,7 @@ const subPackages = [
 ];
 
 export default {
-  pages: ['pages/index/index'],
+  pages: ['pages/index/index', 'pages/index/layout'],
   subPackages,
   window: {
     backgroundTextStyle: 'light',

src/sites/mobile-taro/vue/src/components/header.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="applets-demo-header">
+    <div class="back" @click="navigateTo">
+      <Left />
+    </div>
+    <div class="applets-icon">
+      <img
+        src="https://img13.360buyimg.com/imagetools/jfs/t1/67106/30/23857/9375/63b4df85Fce5fd959/35265019206515fe.png"
+      />
+    </div>
+    <div>{{ compName }}</div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Taro from '@tarojs/taro';
+import { Left } from '@nutui/icons-vue';
+export default defineComponent({
+  name: 'header',
+  components: {
+    Left
+  },
+  props: {
+    compName: {
+      type: String,
+      default: ''
+    }
+  },
+  setup() {
+    //返回demo页
+    const navigateTo = () => {
+      Taro.navigateTo({
+        url: `pages/index/index`
+      });
+    };
+
+    return { navigateTo };
+  }
+});
+</script>
+
+<style lang="scss">
+.applets-demo-header {
+  position: fixed;
+  z-index: 10;
+  left: 0;
+  right: 0;
+  height: 57px;
+  line-height: 57px;
+  text-align: center;
+  background: $white;
+  font-weight: bold;
+  font-size: 20px;
+  color: rgba(51, 51, 51, 1);
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.07);
+  .back {
+    position: absolute;
+    left: 0;
+    height: 100%;
+    width: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+  .applets-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    > img {
+      width: 87px;
+      height: 36px;
+    }
+  }
+}
+</style>

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

@@ -17,7 +17,7 @@
         <ul>
           <template v-for="_package in reorder(_nav.packages)" :key="_package">
             <li v-if="_package.show && _package.exportEmpty !== false">
-              <a @click="navigateTo(_package.name.toLowerCase(), _nav.enName)">
+              <a @click="navigateTo(_package.name, _nav.enName)">
                 {{ _package.name }}
                 &nbsp;&nbsp;
                 {{ _package.cName }}
@@ -65,7 +65,8 @@ export default {
 
     const navigateTo = (name, enName) => {
       Taro.navigateTo({
-        url: `/${enName}/pages/${name}/index`
+        // url: `/${enName}/pages/${name}/index`
+        url: `/pages/index/layout?enName=${enName}&name=${name}`
       });
     };
 
@@ -81,7 +82,7 @@ export default {
 .index {
   height: 100%;
   width: 100%;
-  padding-top: 30px;
+  // padding-top: 30px;
 
   &-header {
     display: flex;

src/sites/mobile-taro/vue/src/pages/index/layout.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="index">
+    <Header :compName="compName" />
+    <iframe :src="src"></iframe>
+  </div>
+</template>
+
+<script lang="ts">
+import { getCurrentInstance } from '@tarojs/taro';
+import { ref, computed } from 'vue';
+import Header from '../../components/header.vue';
+export default {
+  name: 'NutUI',
+  components: {
+    Header
+  },
+  setup() {
+    let compName = ref('');
+
+    let $instance = getCurrentInstance();
+
+    compName.value = $instance.router?.params.name;
+
+    const src = computed(() => {
+      return `/#/${$instance.router?.params.enName}/pages/${$instance.router?.params.name}/index`;
+    });
+
+    return {
+      compName,
+      src
+    };
+  }
+};
+</script>
+<style lang="scss">
+.index {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow-y: auto;
+}
+iframe {
+  border: 0;
+  position: fixed;
+  top: 57px;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 57px);
+}
+</style>