fix: up

.prettierrc

@@ -3,7 +3,8 @@
   "semi": true,
   "bracketSpacing": true,
   "tabWidth": 2,
-  "printWidth": 150,
+  "printWidth": 300,
   "useTabs": false,
-  "htmlWhitespaceSensitivity": "strict"
+  "htmlWhitespaceSensitivity": "strict",
+  "trailingComma": "none"
 }

package.json

@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "@types/swiper": "^5.4.1",
+    "axios": "^0.21.0",
     "core-js": "^3.6.5",
     "sass": "^1.27.0",
     "sass-loader": "^10.0.4",
@@ -70,13 +71,13 @@
     "loader-utils": "^2.0.0",
     "markdown-it": "^12.0.2",
     "markdown-it-anchor": "^6.0.0",
+    "markdown-it-chain": "^1.3.0",
+    "markdown-it-container": "^3.0.0",
     "prettier": "^1.19.1",
     "transliteration": "^2.2.0",
     "typescript": "~3.9.3",
     "vue-loader": "16.0.0-beta.7",
-    "vue-template-compiler": "^2.6.12",
-    "markdown-it-chain": "^1.3.0",
-    "markdown-it-container": "^3.0.0"
+    "vue-template-compiler": "^2.6.12"
   },
   "eslintConfig": {
     "root": true,

src/config.js

@@ -1,116 +0,0 @@
-export const versions = [
-  { name: '1.x', link: '/1x/' },
-  { name: '2.x', link: '/' },
-  { name: '3.x', link: '/3x/' }
-];
-
-export const docs = {
-  name: '指南',
-  packages: [
-    {
-      name: 'intro',
-      cName: '介绍',
-      show: true
-    },
-    {
-      name: 'start',
-      cName: '快速上手',
-      show: true
-    },
-    {
-      name: 'theme',
-      cName: '主题定制',
-      show: true
-    },
-    {
-      name: 'international',
-      cName: '国际化',
-      show: true
-    },
-    {
-      name: 'https://github.com/jdf2e/nutui/releases',
-      cName: '更新日志',
-      show: true,
-      isLink: true
-    }
-  ]
-};
-
-export const nav = [
-  {
-    name: '布局组件',
-    packages: [
-      {
-        name: 'Button',
-        sort: 1,
-        cName: '按钮组件',
-        type: 'component',
-        show: true,
-        desc: '按钮用于触发一个操作，如提交表单。',
-        author: 'richard1015'
-      }
-    ]
-  },
-  {
-    name: '操作反馈',
-    packages: []
-  },
-  {
-    name: '基础组件',
-    packages: [
-      {
-        name: 'Temp',
-        sort: 1,
-        cName: '模板组件',
-        type: 'component',
-        show: true,
-        desc: '组件模板示例',
-        author: 'richard1015'
-      },
-      {
-        name: 'Cell',
-        sort: 1,
-        cName: '单元格组件',
-        type: 'component',
-        show: true,
-        desc: '展示列表',
-        author: 'richard1015'
-      },
-      {
-        name: 'Uploader',
-        sort: 2,
-        cName: '上传组件',
-        type: 'component',
-        show: true,
-        desc: '上传文件、图片',
-        author: 'richard1015'
-      },
-      {
-        name: 'Icon',
-        sort: 3,
-        cName: '图标组件',
-        type: 'component',
-        show: true,
-        desc: '图标',
-        author: 'richard1015'
-      },
-      {
-        name: 'Price',
-        sort: 4,
-        cName: '价格组件',
-        type: 'component',
-        show: true,
-        desc: '价格组件',
-        author: 'ailululu'
-      }
-    ]
-  },
-  {
-    name: '导航组件',
-    packages: []
-  },
-  {
-    name: '业务组件',
-    packages: []
-  }
-];

src/packages/avatar/demo.vue

@@ -20,7 +20,7 @@
     </nut-cell>
     <h2>修改背景图片</h2>
     <nut-cell>
-      <nut-avatar bg-icon bg-image="https://img14.360buyimg.com/imagetools/jfs/t1/139441/32/16630/31987/5fc6f541E66763039/5f17cb6954f419b2.png"></nut-avatar>
+      <nut-avatar bg-icon bg-image="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar>
     </nut-cell>
     <h2>可以修改头像的内容</h2>
     <nut-cell>
@@ -37,10 +37,15 @@ import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('avatar');
 export default createDemo({
   props: {},
-  methods: {
-    activeAvatar(event) {
+
+  setup() {
+    const activeAvatar = (event: Event) => {
       console.log('点击了头像', event);
-    }
+    };
+
+    return {
+      activeAvatar
+    };
   }
 });
 </script>
@@ -52,7 +57,6 @@ export default createDemo({
     & > h2 {
       padding: 0 25px;
     }
-
   }
 }
 

src/packages/swiper/index.vue

@@ -16,7 +16,8 @@ import { createComponent } from '@/utils/create';
 const { create } = createComponent('swiper');
 // import 'swiper/dist/css/swiper.min.css';
 // import { reactive, onMounted } from 'vue';
-import { onMounted } from 'vue';
+import { onMounted, PropType } from 'vue';
+type PaginationType = 'bullets' | 'fraction' | 'progressbar' | 'custom';
 export default create({
   props: {
     variableClass: {
@@ -52,7 +53,7 @@ export default create({
       default: ''
     },
     paginationType: {
-      type: String,
+      type: String as PropType<PaginationType>,
       default: 'bullets'
     }
   },
@@ -77,8 +78,8 @@ export default create({
       // );
       new Swiper('.' + props.swipeid, {
         loop: props.loop,
-        slidesPerView: props.slidesPerView,
-        spaceBetween: props.spaceBetween,
+        slidesPerView: props.slidesPerView as number | 'auto',
+        spaceBetween: props.spaceBetween as number,
         //分页器
         pagination: {
           el: '.' + props.paginationClass,

src/sites/config/env.ts

@@ -0,0 +1,38 @@
+type EnvConfig = {
+  baseUrl: string;
+  buildTime: number | string | undefined;
+  isPrd: boolean;
+};
+
+/**
+ * 配置编译环境和线上环境之间的切换
+ *
+ * baseUrl: 域名地址
+ * articleUrl: 文章地址
+ */
+
+const config: EnvConfig = {
+  baseUrl: '',
+  buildTime: process.env.buildTime,
+  isPrd: true // 是否为线上
+};
+
+console.log('NODE_ENV', process.env.NODE_ENV);
+
+switch (process.env.NODE_ENV) {
+  case 'development':
+    /*
+     * 开发环境    => npm run dev
+     */
+    config.isPrd = false;
+    config.baseUrl = '/devServer';
+    break;
+  case 'production':
+    /*
+     * 线上环境 => npm run build
+     */
+    config.isPrd = true;
+    config.baseUrl = 'https://nutui-server.jd.com';
+    break;
+}
+export default config;

src/sites/doc/App.vue

@@ -9,6 +9,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+::selection {
+  background: $doc-default-color;
+  color: #fff;
+}
 #doc {
   font-family: PingFangSC-Regular;
   -webkit-font-smoothing: antialiased;

src/sites/doc/components/Header.vue

@@ -13,7 +13,7 @@
     </div>
     <div class="header-nav">
       <div class="search-box">
-        <input type="text" class="search-input" placeholder="在nut.ui 中搜索" />
+        <input type="text" class="search-input" placeholder="在 NutUI 中搜索" />
       </div>
       <div class="nav-box">
         <ul class="nav-list">
@@ -33,20 +33,10 @@
           </li> -->
 
           <li class="nav-item">
-            <div
-              class="header-select-box"
-              @click.stop="data.isShowSelect = !data.isShowSelect"
-              :class="[data.isShowSelect == true ? 'select-up' : 'select-down']"
-            >
+            <div class="header-select-box" @click.stop="data.isShowSelect = !data.isShowSelect" :class="[data.isShowSelect == true ? 'select-up' : 'select-down']">
               <div class="header-select-hd">{{ data.verson }}<i class=""></i></div>
               <div class="header-select-bd" v-show="data.isShowSelect">
-                <div
-                  class="header-select-item"
-                  v-for="(item, index) in data.versonList"
-                  :key="index"
-                  @click.stop="checkTheme(item, index)"
-                  :class="{ active: data.activeIndex === index }"
-                >
+                <div class="header-select-item" v-for="(item, index) in data.versonList" :key="index" @click.stop="checkTheme(item.name, index)" :class="{ active: data.activeIndex === index }">
                   {{ item.name }}
                 </div>
               </div>
@@ -90,14 +80,14 @@ export default defineComponent({
     const isActive = computed(() => {
       return function(name: string) {
         // console.log('currentRoute', this.$router.currentRoute.name)
-        console.log('name', name)
+        console.log('name', name);
         return currentRoute.value == name.toLowerCase();
       };
     });
     const checkTheme = (item: any, index: number) => {
       data.isShowSelect = false;
       data.activeIndex = index;
-      data.verson = item.name;
+      data.verson = verson;
     };
     return {
       header,

src/sites/doc/components/Nav.vue

@@ -103,12 +103,17 @@ export default defineComponent({
             }
           }
           a {
+            &.router-link-active {
+              color: $doc-default-color !important;
+            }
+
             &:hover {
               color: $doc-default-color;
               &:visited {
                 color: $doc-default-color;
               }
             }
+            &:link,
             &:visited {
               color: $title-color;
             }

src/sites/doc/views/Index.vue

@@ -10,8 +10,8 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
-import { onBeforeRouteUpdate } from 'vue-router';
+import { defineComponent, onMounted, reactive } from 'vue';
+import { onBeforeRouteUpdate, RouteLocationNormalized, useRoute } from 'vue-router';
 import Header from '@/sites/doc/components/Header.vue';
 import Nav from '@/sites/doc/components/Nav.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
@@ -30,10 +30,19 @@ export default defineComponent({
       demoUrl: 'demo.html'
     });
 
-    onBeforeRouteUpdate(to => {
+    const watchDemoUrl = (router: RouteLocationNormalized) => {
       const { origin, pathname } = window.location;
-      currentRoute.value = to.name as string;
-      data.demoUrl = `${origin}${pathname.replace('index.html', '')}demo.html#${to.path}`;
+      currentRoute.value = router.name as string;
+      data.demoUrl = `${origin}${pathname.replace('index.html', '')}demo.html#${router.path}`;
+    };
+
+    onMounted(() => {
+      const route = useRoute();
+      watchDemoUrl(route);
+    });
+
+    onBeforeRouteUpdate(to => {
+      watchDemoUrl(to);
     });
 
     return data;

src/sites/doc/views/Resource.vue

@@ -9,10 +9,7 @@
   <div class="resource-content">
     <div class="resource-block">
       <h4 class="sub-title">设计资源</h4>
-      <p class="sub-desc"
-        >这里提供 NUT UI 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。你可以在这个<span class="sub-red">地址</span>中反馈对新版本
-        Sketch Symbols 组件的意见。</p
-      >
+      <p class="sub-desc">这里提供 NUT UI 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。你可以在这个<span class="sub-red">地址</span>中反馈对新版本 Sketch Symbols 组件的意见。</p>
       <div class="no-data">
         <img class="nodata-img-joy" src="../../assets/images/img-joy.png" />
         <p class="nodata-desc">敬请期待</p>
@@ -20,58 +17,17 @@
     </div>
     <div class="resource-block">
       <h4 class="sub-title">设计资源</h4>
-      <p class="sub-desc"
-        >想要了解 Nut Ui 设计体系背后的故事？如何才能更好的应用 Ant Design？你可以查阅下述我们为你精挑细选的文章。也欢迎关注Nut Ui
-        官方专栏，这里常有关于Nut Ui 设计体系下相关话题内容的最新分享和讨论.</p
-      >
+      <p class="sub-desc">想要了解 Nut Ui 设计体系背后的故事？如何才能更好的应用 Ant Design？你可以查阅下述我们为你精挑细选的文章。也欢迎关注Nut Ui 官方专栏，这里常有关于Nut Ui 设计体系下相关话题内容的最新分享和讨论.</p>
       <div class="tab-box">
         <div class="tab-hd">
-          <div
-            class="tab-hd-item"
-            :class="{ active: data.activeIndex === index }"
-            v-for="(item, index) in data.tabData"
-            :key="index"
-            @click="clickTab(index)"
-          >
+          <div class="tab-hd-item" :class="{ active: data.activeIndex === index }" v-for="(item, index) in data.tabData" :key="index" @click="clickTab(index)">
             {{ item.title }}
           </div>
         </div>
         <div class="tab-bd" v-show="data.activeIndex === 0">
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">Webpack那些你不知道的事</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务Webpack那些你不知道那些你不知道那些你不知道</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
+          <div class="design-item" v-for="item in data.articleList" :key="item.id">
+            <img class="img-design" :src="item.cover_image" />
+            <p class="design-title">{{ item.title }}</p>
           </div>
         </div>
         <div class="tab-bd" v-show="data.activeIndex === 1">
@@ -88,10 +44,7 @@
     </div>
     <div class="resource-block">
       <h4 class="sub-title">社区文章</h4>
-      <p class="sub-desc"
-        >想要了解 Nut Ui 设计体系背后的故事？如何才能更好的应用 Nut Ui？你可以查阅下述我们为你精挑细选的文章。也欢迎关注Nut Ui
-        官方专栏，这里常有关于Nut Ui 设计体系下相关话题内容的最新分享和讨论.</p
-      >
+      <p class="sub-desc">想要了解 Nut Ui 设计体系背后的故事？如何才能更好的应用 Nut Ui？你可以查阅下述我们为你精挑细选的文章。也欢迎关注Nut Ui 官方专栏，这里常有关于Nut Ui 设计体系下相关话题内容的最新分享和讨论.</p>
       <ul class="article-box">
         <li class="article-item">
           <a class="article-link">
@@ -109,9 +62,10 @@
   <doc-footer></doc-footer>
 </template>
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, onMounted, reactive } from 'vue';
 import Header from '@/sites/doc/components/Header.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
+import { ArticleApiService } from '@/sites/service/ArticleApiService';
 export default defineComponent({
   name: 'doc',
   components: {
@@ -119,26 +73,38 @@ export default defineComponent({
     [Footer.name]: Footer
   },
   setup() {
+    const articleList: any[] = [];
     const data = reactive({
+      articleList,
       tabData: [
         {
           title: '全部文章'
-        },
-        {
-          title: '性能体验'
-        },
-        {
-          title: '性能体验'
-        },
-        {
-          title: '性能体验'
-        },
-        {
-          title: '性能体验'
         }
+        // {
+        //   title: '性能体验'
+        // },
+        // {
+        //   title: '性能体验'
+        // },
+        // {
+        //   title: '性能体验'
+        // },
+        // {
+        //   title: '性能体验'
+        // }
       ],
       activeIndex: 0
     });
+    onMounted(() => {
+      console.log('mounted');
+      const articleApiService = new ArticleApiService();
+      articleApiService.getArticle().then(res => {
+        if (res?.state == 0) {
+          data.articleList = res.value.data.arrays as any[];
+        }
+      });
+    });
+
     const clickTab = (index: number) => {
       console.log('22', index);
       data.activeIndex = index;

src/sites/service/ArticleApiService.ts

@@ -0,0 +1,16 @@
+import { HttpClient } from './HttpClient';
+export class ArticleApiService {
+  private httpClient: HttpClient;
+
+  constructor() {
+    this.httpClient = new HttpClient();
+  }
+  /**
+   * 获取nutui文章
+   * @returns
+   * @memberof ArticleApiService
+   */
+  getArticle() {
+    return this.httpClient.request('/article/list', 'get', {});
+  }
+}

src/sites/service/HttpClient.ts

@@ -0,0 +1,60 @@
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
+import config from '../config/env';
+
+export class HttpClient {
+  private checkStatus(response: AxiosResponse<any>): ResponseData {
+    const resData: ResponseData = {
+      state: 0,
+      value: {},
+      message: ''
+    };
+    // 如果http状态码正常，则直接返回数据
+    if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
+      // 如果不需要除了data之外的数据，可以直接 return response.data
+      resData.value = response.data;
+    }
+    return resData;
+  }
+  /**
+   * request请求
+   * @param {string} url url
+   * @param {string} method get|post
+   * @param {*} [params] 请求参数
+   */
+  public async request(url: string, method: string, params: any): Promise<ResponseData | null> {
+    const defaultHeaders = {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    };
+    const headers = Object.assign(defaultHeaders, params.header);
+    try {
+      const options = {
+        method,
+        url: config.baseUrl + url,
+        data: params,
+        params: params,
+        timeout: 1000 * 30,
+        withCredentials: true,
+        crossDomain: true,
+        headers
+      };
+
+      const res = await axios(options as AxiosRequestConfig);
+      return this.checkStatus(res);
+    } catch (error) {
+      console.error(error);
+      return null;
+    }
+  }
+}
+
+/**
+ * 响应对象
+ * @param {number} state 0 成功 1失败
+ * @param {any} value 接口响应数据
+ * @param {string} message 服务器响应信息msg
+ */
+interface ResponseData {
+  state: number;
+  value?: any;
+  message: string;
+}

src/styles/font/demo_index.html

@@ -31,6 +31,102 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon nutui-iconfont">&#xe600;</span>
+                <div class="name">plus</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe6ab;</span>
+                <div class="name">minus</div>
+                <div class="code-name">&amp;#xe6ab;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe6a6;</span>
+                <div class="name">arrow-up2</div>
+                <div class="code-name">&amp;#xe6a6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe6a7;</span>
+                <div class="name">arrow-down2</div>
+                <div class="code-name">&amp;#xe6a7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe6a8;</span>
+                <div class="name">screen-little</div>
+                <div class="code-name">&amp;#xe6a8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe6a9;</span>
+                <div class="name">arrow-right2</div>
+                <div class="code-name">&amp;#xe6a9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe6aa;</span>
+                <div class="name">close-little</div>
+                <div class="code-name">&amp;#xe6aa;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe6a5;</span>
+                <div class="name">joy-smile</div>
+                <div class="code-name">&amp;#xe6a5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe6a2;</span>
+                <div class="name">arrow-down</div>
+                <div class="code-name">&amp;#xe6a2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe6a3;</span>
+                <div class="name">arrow-right</div>
+                <div class="code-name">&amp;#xe6a3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe6a4;</span>
+                <div class="name">arrow-up</div>
+                <div class="code-name">&amp;#xe6a4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe69e;</span>
+                <div class="name">heart</div>
+                <div class="code-name">&amp;#xe69e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe69f;</span>
+                <div class="name">heart-fill</div>
+                <div class="code-name">&amp;#xe69f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe6a0;</span>
+                <div class="name">star</div>
+                <div class="code-name">&amp;#xe6a0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe6a1;</span>
+                <div class="name">star-fill</div>
+                <div class="code-name">&amp;#xe6a1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe69d;</span>
+                <div class="name">heart</div>
+                <div class="code-name">&amp;#xe69d;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon nutui-iconfont">&#xe69c;</span>
                 <div class="name">github</div>
                 <div class="code-name">&amp;#xe69c;</div>
@@ -465,6 +561,150 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-plus"></span>
+            <div class="name">
+              plus
+            </div>
+            <div class="code-name">.nut-icon-plus
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-minus"></span>
+            <div class="name">
+              minus
+            </div>
+            <div class="code-name">.nut-icon-minus
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-arrow-up2"></span>
+            <div class="name">
+              arrow-up2
+            </div>
+            <div class="code-name">.nut-icon-arrow-up2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-arrow-down2"></span>
+            <div class="name">
+              arrow-down2
+            </div>
+            <div class="code-name">.nut-icon-arrow-down2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-screen-little"></span>
+            <div class="name">
+              screen-little
+            </div>
+            <div class="code-name">.nut-icon-screen-little
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-arrow-right2"></span>
+            <div class="name">
+              arrow-right2
+            </div>
+            <div class="code-name">.nut-icon-arrow-right2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-close-little"></span>
+            <div class="name">
+              close-little
+            </div>
+            <div class="code-name">.nut-icon-close-little
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-joy-smile"></span>
+            <div class="name">
+              joy-smile
+            </div>
+            <div class="code-name">.nut-icon-joy-smile
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-arrow-down"></span>
+            <div class="name">
+              arrow-down
+            </div>
+            <div class="code-name">.nut-icon-arrow-down
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-arrow-right"></span>
+            <div class="name">
+              arrow-right
+            </div>
+            <div class="code-name">.nut-icon-arrow-right
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-arrow-up"></span>
+            <div class="name">
+              arrow-up
+            </div>
+            <div class="code-name">.nut-icon-arrow-up
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-heart1"></span>
+            <div class="name">
+              heart
+            </div>
+            <div class="code-name">.nut-icon-heart1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-heart-fill"></span>
+            <div class="name">
+              heart-fill
+            </div>
+            <div class="code-name">.nut-icon-heart-fill
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-star1"></span>
+            <div class="name">
+              star
+            </div>
+            <div class="code-name">.nut-icon-star1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-star-fill"></span>
+            <div class="name">
+              star-fill
+            </div>
+            <div class="code-name">.nut-icon-star-fill
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-heart"></span>
+            <div class="name">
+              heart
+            </div>
+            <div class="code-name">.nut-icon-heart
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon nutui-iconfont nut-icon-github"></span>
             <div class="name">
               github
@@ -1071,6 +1311,134 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-plus"></use>
+                </svg>
+                <div class="name">plus</div>
+                <div class="code-name">#nut-icon-plus</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-minus"></use>
+                </svg>
+                <div class="name">minus</div>
+                <div class="code-name">#nut-icon-minus</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-arrow-up2"></use>
+                </svg>
+                <div class="name">arrow-up2</div>
+                <div class="code-name">#nut-icon-arrow-up2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-arrow-down2"></use>
+                </svg>
+                <div class="name">arrow-down2</div>
+                <div class="code-name">#nut-icon-arrow-down2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-screen-little"></use>
+                </svg>
+                <div class="name">screen-little</div>
+                <div class="code-name">#nut-icon-screen-little</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-arrow-right2"></use>
+                </svg>
+                <div class="name">arrow-right2</div>
+                <div class="code-name">#nut-icon-arrow-right2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-close-little"></use>
+                </svg>
+                <div class="name">close-little</div>
+                <div class="code-name">#nut-icon-close-little</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-joy-smile"></use>
+                </svg>
+                <div class="name">joy-smile</div>
+                <div class="code-name">#nut-icon-joy-smile</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-arrow-down"></use>
+                </svg>
+                <div class="name">arrow-down</div>
+                <div class="code-name">#nut-icon-arrow-down</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-arrow-right"></use>
+                </svg>
+                <div class="name">arrow-right</div>
+                <div class="code-name">#nut-icon-arrow-right</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-arrow-up"></use>
+                </svg>
+                <div class="name">arrow-up</div>
+                <div class="code-name">#nut-icon-arrow-up</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-heart1"></use>
+                </svg>
+                <div class="name">heart</div>
+                <div class="code-name">#nut-icon-heart1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-heart-fill"></use>
+                </svg>
+                <div class="name">heart-fill</div>
+                <div class="code-name">#nut-icon-heart-fill</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-star1"></use>
+                </svg>
+                <div class="name">star</div>
+                <div class="code-name">#nut-icon-star1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-star-fill"></use>
+                </svg>
+                <div class="name">star-fill</div>
+                <div class="code-name">#nut-icon-star-fill</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-heart"></use>
+                </svg>
+                <div class="name">heart</div>
+                <div class="code-name">#nut-icon-heart</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#nut-icon-github"></use>
                 </svg>
                 <div class="name">github</div>

src/styles/font/iconfont.json

@@ -6,6 +6,118 @@
   "description": "nutui 3.0字体管理",
   "glyphs": [
     {
+      "icon_id": "18536362",
+      "name": "plus",
+      "font_class": "plus",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "18535598",
+      "name": "minus",
+      "font_class": "minus",
+      "unicode": "e6ab",
+      "unicode_decimal": 59051
+    },
+    {
+      "icon_id": "18254512",
+      "name": "arrow-up2",
+      "font_class": "arrow-up2",
+      "unicode": "e6a6",
+      "unicode_decimal": 59046
+    },
+    {
+      "icon_id": "18254513",
+      "name": "arrow-down2",
+      "font_class": "arrow-down2",
+      "unicode": "e6a7",
+      "unicode_decimal": 59047
+    },
+    {
+      "icon_id": "18254514",
+      "name": "screen-little",
+      "font_class": "screen-little",
+      "unicode": "e6a8",
+      "unicode_decimal": 59048
+    },
+    {
+      "icon_id": "18254515",
+      "name": "arrow-right2",
+      "font_class": "arrow-right2",
+      "unicode": "e6a9",
+      "unicode_decimal": 59049
+    },
+    {
+      "icon_id": "18254516",
+      "name": "close-little",
+      "font_class": "close-little",
+      "unicode": "e6aa",
+      "unicode_decimal": 59050
+    },
+    {
+      "icon_id": "18246005",
+      "name": "joy-smile",
+      "font_class": "joy-smile",
+      "unicode": "e6a5",
+      "unicode_decimal": 59045
+    },
+    {
+      "icon_id": "18245929",
+      "name": "arrow-down",
+      "font_class": "arrow-down",
+      "unicode": "e6a2",
+      "unicode_decimal": 59042
+    },
+    {
+      "icon_id": "18245930",
+      "name": "arrow-right",
+      "font_class": "arrow-right",
+      "unicode": "e6a3",
+      "unicode_decimal": 59043
+    },
+    {
+      "icon_id": "18245931",
+      "name": "arrow-up",
+      "font_class": "arrow-up",
+      "unicode": "e6a4",
+      "unicode_decimal": 59044
+    },
+    {
+      "icon_id": "18194679",
+      "name": "heart",
+      "font_class": "heart1",
+      "unicode": "e69e",
+      "unicode_decimal": 59038
+    },
+    {
+      "icon_id": "18194680",
+      "name": "heart-fill",
+      "font_class": "heart-fill",
+      "unicode": "e69f",
+      "unicode_decimal": 59039
+    },
+    {
+      "icon_id": "18194681",
+      "name": "star",
+      "font_class": "star1",
+      "unicode": "e6a0",
+      "unicode_decimal": 59040
+    },
+    {
+      "icon_id": "18194682",
+      "name": "star-fill",
+      "font_class": "star-fill",
+      "unicode": "e6a1",
+      "unicode_decimal": 59041
+    },
+    {
+      "icon_id": "18194643",
+      "name": "heart",
+      "font_class": "heart",
+      "unicode": "e69d",
+      "unicode_decimal": 59037
+    },
+    {
       "icon_id": "18193891",
       "name": "github",
       "font_class": "github",

vue.config.js

@@ -7,7 +7,16 @@ module.exports = {
   devServer: {
     host: '0.0.0.0',
     disableHostCheck: true,
-    open: true
+    open: true,
+    proxy: {
+      '/devServer': {
+        target: 'https://nutui-server.jd.com',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/devServer': ''
+        }
+      }
+    }
   },
   css: {
     loaderOptions: {