docs: 官网文档修改

src/docs/start.md

@@ -25,11 +25,15 @@ npm i @nutui/nutui-taro
 
 #### Vite 构建工具 通过 vite-plugin 使用按需加载
 
+#### 为什么只按需引入样式
+
+由于 vite 本身已按需导入了组件库，因此仅样式不是按需导入的，因此只需按需导入样式即可。
+
 [Vite](https://vitejs.dev/) 构建工具，使用 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) 实现按需引入。
 
 ##### 安装插件
 ``` bash
-npm install babel-plugin-import --save-dev
+npm install vite-plugin-style-import --save-dev
 ```
 在 `vite.config` 中添加配置：
 ``` javascript
@@ -53,6 +57,7 @@ export default {
   css: {
     preprocessorOptions: {
       scss: {
+        // 配置 nutui 全局 scss 变量
         additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
       }
     }

src/packages/__VUE/toast/doc.md

@@ -109,14 +109,14 @@ toast.hide();
 | duration            | 展示时长（毫秒）<br>值为 0 时，toast 不会自动消失      | Number        | 2000                          |
 | center              | 是否展示在页面中部（为false时展示在底部）                                     | Boolean       | true                          |
 | bottom              | 距页面底部的距离（像素），option.center为false时生效                          | Number       | 30                          |
-| text-align-center     | 多行文案是否居中                                                              | Boolean       | true                          |
-| bg-color             | 背景颜色（透明度）                                                            | String        | "rgba(0, 0, 0, 0.8)"       |
-| custom-class         | 自定义类名                                                                    | String        | ""                            |
+| textAlignCenter     | 多行文案是否居中                                                              | Boolean       | true                          |
+| bgColor             | 背景颜色（透明度）                                                            | String        | "rgba(0, 0, 0, 0.8)"       |
+| customClass         | 自定义类名                                                                    | String        | ""                            |
 | icon                | 自定义图标，**支持图片链接或base64格式**                                        | String        | ""                            |
 | size                | 文案尺寸，**small**/**base**/**large**三选一                                                  | String        | "base"                        |
 | cover               | 是否显示遮罩层                                          | Boolean       | false |
 | cover-color          | 遮罩层颜色，默认透明                                                          | String        | "rgba(0,0,0,0)"               |
-| loading-rotate       | loading图标是否旋转，仅对loading类型生效                                      | Boolean       | true                          |
+| loadingRotate       | loading图标是否旋转，仅对loading类型生效                                      | Boolean       | true                          |
 | on-close             | 关闭时触发的事件                                                              | function      | null                          |
 | close-on-click-overlay | 是否在点击遮罩层后关闭提示                                                    | Boolean       | false                         |
 | toast-style          | 提示框style                                                        | object       | {}                         |

src/packages/__VUE/toast/index.ts

@@ -4,20 +4,20 @@ const defaultOptions = {
   msg: '',
   id: '',
   duration: 2000, //显示时间(毫秒)
-  center: true,
+  center: true, // 未实现
   type: 'text',
-  customClass: '',
-  bottom: 30,
-  size: 'base',
-  icon: null,
-  textAlignCenter: true,
-  loadingRotate: true,
+  customClass: '', // 未实现
+  bottom: 30, // 未实现
+  size: 'base', // 未实现
+  icon: null, // 未实现
+  textAlignCenter: true, // 未实现
+  loadingRotate: true, // 未实现
   bgColor: 'rgba(0, 0, 0, .8)',
-  onClose: null,
+  onClose: null, // 未实现
   unmount: null,
-  cover: false, //透明遮罩层
-  coverColor: 'rgba(0, 0, 0, 0)',
-  closeOnClickOverlay: false
+  cover: false, //透明遮罩层 // 未实现
+  coverColor: 'rgba(0, 0, 0, 0)', // 未实现
+  closeOnClickOverlay: false // 未实现
 };
 
 let idsMap: string[] = [];
@@ -25,13 +25,13 @@ let optsMap: any[] = [];
 const clearToast = (id?: string) => {
   if (id) {
     const container = document.getElementById(id);
-    optsMap = optsMap.filter(item => item.id !== id);
-    idsMap = idsMap.filter(item => item !== id);
+    optsMap = optsMap.filter((item) => item.id !== id);
+    idsMap = idsMap.filter((item) => item !== id);
     if (container) {
       document.body.removeChild(container);
     }
   } else {
-    idsMap.forEach(item => {
+    idsMap.forEach((item) => {
       const container = document.getElementById(item);
       if (container) {
         document.body.removeChild(container);
@@ -45,7 +45,7 @@ const clearToast = (id?: string) => {
 const updateToast = (opts: any) => {
   const container = document.getElementById(opts.id);
   if (container) {
-    const currentOpt = optsMap.find(item => item.id === opts.id);
+    const currentOpt = optsMap.find((item) => item.id === opts.id);
     if (currentOpt) {
       opts = { ...defaultOptions, ...currentOpt, ...opts };
     } else {
@@ -63,7 +63,7 @@ const mountToast = (opts: any) => {
   // 如果是更新已有的toast
   if (opts.id) {
     _id = opts.id;
-    if (idsMap.find(item => item === opts.id)) {
+    if (idsMap.find((item) => item === opts.id)) {
       return updateToast(opts);
     }
   } else {

src/sites/doc/views/Main.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="v3-banner" :class="{ active: false }"
-    >NutUI 现已发布 Vue3.x 版本，带来更强大的功能和出色的体验</div
-  >
+  <div class="v3-banner" :class="{ active: false }">NutUI 现已发布 Vue3.x 版本，带来更强大的功能和出色的体验</div>
   <doc-header></doc-header>
   <div class="doc-content" :class="themeName()">
     <div class="doc-content-index">
@@ -44,6 +42,11 @@
           <p class="features-desc">遵循京东 App 10.0 设计规范</p>
         </li>
         <li class="features-item">
+          <img src="../../assets/images/img-home-features3.png" />
+          <p class="features-title">前沿技术</p>
+          <p class="features-desc">vue3 vite2.x typescript</p>
+        </li>
+        <li class="features-item">
           <img src="../../assets/images/img-home-features5.png" />
           <p class="features-title">适配多端</p>
           <p class="features-desc a-l">基于 Taro 轻松开发多端小程序</p>
@@ -51,18 +54,13 @@
         <li class="features-item">
           <img src="../../assets/images/img-home-features2.png" />
           <p class="features-title">组件丰富</p>
-          <p class="features-desc a-l">提供 70+ 组件，覆盖绝大多数业务场景</p>
-        </li>
-        <li class="features-item">
-          <img src="../../assets/images/img-home-features3.png" />
-          <p class="features-title">前沿技术</p>
-          <p class="features-desc">vue3 vite2.x typescript</p>
+          <p class="features-desc a-l">70+ 组件，覆盖多数业务场景</p>
         </li>
-        <li class="features-item">
+        <!-- <li class="features-item">
           <img src="../../assets/images/img-home-features4.png" />
           <p class="features-title">贴心通道</p>
           <p class="features-desc">社区维护 高效服务<br />技术支持 经验沉淀</p>
-        </li>
+        </li> -->
       </ul>
     </div>
     <!-- taro楼层 -->
@@ -97,9 +95,7 @@
               <img src="./../../assets/images/cat-title.png" alt="" />
             </div>
             <p class="cat-content-right-desc">基于 NutUI 的大促组件</p>
-            <div class="cat-content-right-godetail" @click="toDetail"
-              >查看详情</div
-            >
+            <div class="cat-content-right-godetail" @click="toDetail">查看详情</div>
           </div>
         </div>
         <div class="marketing-content">
@@ -111,17 +107,9 @@
               <img src="./../../assets/images/marketing-title.png" alt="" />
             </div>
             <p class="marketing-content-right-desc">基于 NutUI 的营销组件</p>
-            <div class="marketing-content-right-godetail" @click="goAwait"
-              >敬请期待</div
-            >
-          </div>
-          <div
-            class="marketing-content-mask"
-            v-if="showAwait"
-            @click="hideAwait"
-          >
-            正在建设中，敬请期待~
+            <div class="marketing-content-right-godetail" @click="goAwait">敬请期待</div>
           </div>
+          <div class="marketing-content-mask" v-if="showAwait" @click="hideAwait"> 正在建设中，敬请期待~ </div>
         </div>
       </div>
     </div>
@@ -132,10 +120,7 @@
       </div>
       <div class="doc-content-cases-content">
         <div class="doc-content-cases-content__main">
-          <div
-            class="doc-content-cases-content__main-lefticon"
-            @click="onLeft"
-          ></div>
+          <div class="doc-content-cases-content__main-lefticon" @click="onLeft"></div>
           <div class="doc-content-cases-content__main-iconinfo">
             <h4>{{ currentCaseItem.product_name }}</h4>
             <p>{{ currentCaseItem.product_info }}</p>
@@ -149,21 +134,11 @@
           >
             <img src="../../assets/images/iphone-cases.png" alt="" srcset="" />
           </div>
-          <div
-            class="doc-content-cases-content__main-righticon"
-            @click="onRight"
-          ></div>
+          <div class="doc-content-cases-content__main-righticon" @click="onRight"></div>
         </div>
         <div class="doc-content-cases-content__list">
-          <div
-            class="swiper-wrapper"
-            :class="[themeNameValue() == 'black' ? 'noShadow' : '']"
-          >
-            <div
-              class="swiper-slide"
-              v-for="(item, index) in casesImages"
-              :key="index"
-            >
+          <div class="swiper-wrapper" :class="[themeNameValue() == 'black' ? 'noShadow' : '']">
+            <div class="swiper-slide" v-for="(item, index) in casesImages" :key="index">
               <img :src="item.cover_image" />
             </div>
           </div>
@@ -176,12 +151,7 @@
         <a class="sub-more" href="#/resource">More</a>
       </div>
       <ul class="more-list">
-        <li
-          class="more-item"
-          v-for="item in articleList.slice(0, 4)"
-          :key="item.id"
-          @click="toLink(item.id)"
-        >
+        <li class="more-item" v-for="item in articleList.slice(0, 4)" :key="item.id" @click="toLink(item.id)">
           <img :src="item.cover_image" />
           <p class="more-title" v-hover>{{ item.title }}</p>
         </li>
@@ -191,14 +161,7 @@
   <doc-footer></doc-footer>
 </template>
 <script lang="ts">
-import {
-  defineComponent,
-  onMounted,
-  reactive,
-  toRefs,
-  computed,
-  ref
-} from 'vue';
+import { defineComponent, onMounted, reactive, toRefs, computed, ref } from 'vue';
 import Header from '@/sites/doc/components/Header.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
 import router from '../router';
@@ -258,13 +221,9 @@ export default defineComponent({
               on: {
                 slideChange: function () {
                   let realIndex = (this as any).realIndex;
-                  data.currentCaseIndex =
-                    realIndex === 0
-                      ? data.casesImages.length - 1
-                      : realIndex - 1;
+                  data.currentCaseIndex = realIndex === 0 ? data.casesImages.length - 1 : realIndex - 1;
                   setTimeout(() => {
-                    data.currentCaseItem =
-                      data.casesImages[data.currentCaseIndex];
+                    data.currentCaseItem = data.casesImages[data.currentCaseIndex];
                   }, 230);
                 }
               }
@@ -891,8 +850,7 @@ export default defineComponent({
       .right-img {
         width: 436px;
         height: 213px;
-        background: url('../../assets/images/img-taro-right-white.png')
-          no-repeat;
+        background: url('../../assets/images/img-taro-right-white.png') no-repeat;
         background-size: cover;
         margin-bottom: 58px;
       }