Merge branch 'next' of https://github.com/jdf2e/nutui into next

jd/createComponentMode.js

@@ -8,21 +8,24 @@ const inquirer = require('inquirer');
 // import { from } from 'core-js/fn/array';
 const path = require('path');
 const fs = require('fs');
+const config =require("../src/config");
+const nav=config.nav;
 // const copy = require('copy');
 //const createPkgDeclare = require('./createPkgDeclare');
 // const t = require('@babel/types');
 // const { parse } = require('@babel/parser');
 // const { default: traverse } = require('@babel/traverse');
 // const { default: generate } = require('@babel/generator');
+console.log("module.exports = "+JSON.stringify(config, null, 2)+";")
 
 var newCpt = {
   version: '1.0.0',
   name: '',
   type: '',
-  chnName: '',
+  cName: '',
   desc: '',
   sort: '',
-  showDemo: true,
+  show: false,
   author: '',
   star: undefined
 };
@@ -34,18 +37,18 @@ function init() {
         name: 'name',
         message: '组件英文名(每个单词的首字母都大写，如TextBox)：',
         validate(value) {
-          //   let repeat = false;
-          //   for (var i = 0; i < nav.length; i++) {
-          //     for (var j = 0; j < nav[i].packages.length; j++) {
-          //       if (nav[i].packages[j].name === value) {
-          //         repeat = true;
-          //       }
-          //     }
-          //   }
+            let repeat = false;
+            for (var i = 0; i < nav.length; i++) {
+              for (var j = 0; j < nav[i].packages.length; j++) {
+                if (nav[i].packages[j].name === value) {
+                  repeat = true;
+                }
+              }
+            }
 
-          //   if (repeat) {
-          //     return '该组件名已存在！';
-          //   }
+            if (repeat) {
+              return '该组件名已存在！';
+            }
           const pass = value && value.match(/^[A-Z]/);
           if (pass) {
             return true;
@@ -55,7 +58,7 @@ function init() {
       },
       {
         type: 'input',
-        name: 'chnName',
+        name: 'cName',
         message: '组件中文名(十个字以内)：',
         validate(value) {
           const pass = value && value.length <= 10;
@@ -83,19 +86,18 @@ function init() {
           return '输入有误！请输入选项前编号';
         }
       },
-      //   {
-      //     type: 'rawlist',
-      //     name: 'sort',
-      //     message: '请选择组件分类(输入编号)：',
-      //     // choices: sorts,
-      //     validate(value) {
-      //       const pass = /^[1-7]$/.test(value);
-      //       if (pass) {
-      //         return true;
-      //       }
-      //       return '输入有误！请输入选项前编号';
-      //     }
-      //   },
+        {
+          type: 'input',
+          name: 'sort',
+          message: '请选择组件分类(输入编号)：1布局组件，2操作反馈，3基础组件，4导航组件，5数据录入，6业务组件',
+          validate(value) {
+            const pass = /^[1-6]$/.test(value);
+            if (pass) {
+              return true;
+            }
+            return '输入有误！请输入选项前编号';
+          }
+        },
       //   {
       //     type: 'confirm',
       //     name: 'showDemo',
@@ -247,15 +249,22 @@ export default {
 }
 
 function addToPackageJson() {
-  // return new Promise((resolve, reject) => {
-  //     conf.packages.push(newCpt);
-  //     const dirPath = path.join(__dirname, `../`);
-  //     const filePath = path.join(dirPath, `config.json`);
-  //     fs.writeFile(filePath, JSON.stringify(conf, null, 2), (err) => {
-  //         if (err) throw err;
-  //         resolve(`修改config.json文件成功`);
-  //     });
-  // });
+  return new Promise((resolve, reject) => {
+      let sort=newCpt.sort;
+      newCpt.sort=nav[sort-1].packages.length+1;
+      console.log(newCpt)
+      nav[sort-1].packages.push(newCpt);
+      config.nav=nav;
+      // conf.packages.push(newCpt);
+       const dirPath = path.join(__dirname, `../`);
+       const filePath = path.join(dirPath, `src/config.js`);
+       
+       var tempfile="module.exports = "+JSON.stringify(config, null, 2)+";"
+      fs.writeFile(filePath, tempfile, (err) => {
+          if (err) throw err;
+          resolve(`修改config.json文件成功`);
+      });
+  });
 }
 function createScss() {
   return new Promise((resolve, reject) => {
@@ -306,7 +315,7 @@ function createNew() {
       return createDoc();
     })
     .then(() => {
-      // return addToPackageJson();
+       return addToPackageJson();
     })
     .then(() => {
       console.log('组件模板生成完毕，请开始你的表演~');

src/config.js

@@ -0,0 +1,228 @@
+module.exports = {
+  versions: [
+    { name: '1.x', link: '/1x/' },
+    { name: '2.x', link: '/' },
+    { name: '3.x', link: '/3x/' }
+  ],
+  header: [
+    {
+      name: 'guide',
+      cName: '指南',
+      path: '/'
+    },
+    {
+      name: '/',
+      cName: '组件',
+      path: '/'
+    },
+    {
+      name: 'example',
+      cName: '示例',
+      path: '/'
+    },
+    {
+      name: 'resource',
+      cName: '资源',
+      path: '/resource'
+    }
+  ],
+
+  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
+      }
+    ]
+  },
+
+  nav: [
+    {
+      name: '布局组件',
+      packages: [
+        {
+          name: 'Button',
+          sort: 1,
+          cName: '按钮组件',
+          type: 'component',
+          show: true,
+          desc: '按钮用于触发一个操作，如提交表单。',
+          author: 'richard1015'
+        },
+        {
+          name: 'collapse',
+          sort: 2,
+          cName: '折叠面板',
+          type: 'component',
+          show: true,
+          desc: '折叠面板',
+          author: 'Ymm0008'
+        },
+        {
+          name: 'collapse',
+          sort: 3,
+          cName: '折叠面板-item',
+          type: 'component',
+          show: false,
+          desc: '折叠面板-item',
+          author: 'Ymm0008'
+        }
+      ]
+    },
+    {
+      name: '操作反馈',
+      packages: [
+        {
+          name: 'BackTop',
+          sort: '1',
+          cName: '回到顶部',
+          type: 'component',
+          show: true,
+          desc: '较长页面快捷回到顶部',
+          author: 'liqiong43'
+        }
+      ]
+    },
+    {
+      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: 'Checkbox',
+          sort: 5,
+          cName: '复选按钮',
+          type: 'component',
+          show: true,
+          desc: '复选按钮',
+          author: 'Ymm0008'
+        },
+        {
+          name: 'Swiper',
+          sort: 6,
+          cName: '轮播',
+          type: 'component',
+          show: true,
+          desc: '轮播',
+          author: 'ailululu'
+        },
+        {
+          name: 'Avatar',
+          sort: 7,
+          cName: '头像',
+          type: 'component',
+          show: true,
+          desc: '头像',
+          author: 'ailululu'
+        }
+      ]
+    },
+    {
+      name: '导航组件',
+      packages: [
+        {
+          name: 'Navbar',
+          sort: 3,
+          cName: '导航组件',
+          type: 'componment',
+          show: true,
+          desc: '导航组件',
+          author: 'liqiong43'
+        },
+        {
+          name: 'tab',
+          sort: 1,
+          cName: '标签组件',
+          type: 'component',
+          show: true,
+          desc: '标签组件',
+          author: 'zhenyulei'
+        }
+      ]
+    },
+    {
+      name: '数据录入',
+      packages: [
+        {
+          name: 'InputNumber',
+          sort: 1,
+          cName: '数字输入框',
+          type: 'component',
+          show: true,
+          desc: '数字输入框组件',
+          author: 'szg2008'
+        }
+      ]
+    },
+    {
+      name: '业务组件',
+      packages: []
+    }
+  ]
+};

src/config.ts

@@ -1,227 +0,0 @@
-export const versions = [
-  { name: '1.x', link: '/1x/' },
-  { name: '2.x', link: '/' },
-  { name: '3.x', link: '/3x/' }
-];
-
-export const header = [
-  {
-    name: 'guide',
-    cName: '指南',
-    path: '/'
-  },
-  {
-    name: '/',
-    cName: '组件',
-    path: '/'
-  },
-  {
-    name: 'example',
-    cName: '示例',
-    path: '/'
-  },
-  {
-    name: 'resource',
-    cName: '资源',
-    path: '/resource'
-  }
-];
-
-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: 'collapse',
-        sort: 2,
-        cName: '折叠面板',
-        type: 'component',
-        show: true,
-        desc: '折叠面板',
-        author: 'Ymm0008'
-      },
-      {
-        name: 'collapse',
-        sort: 3,
-        cName: '折叠面板-item',
-        type: 'component',
-        show: false,
-        desc: '折叠面板-item',
-        author: 'Ymm0008'
-      }
-    ]
-  },
-  {
-    name: '操作反馈',
-    packages: [
-      {
-        name: 'BackTop',
-        sort: '1',
-        cName: '回到顶部',
-        type: 'component',
-        show: true,
-        desc: '较长页面快捷回到顶部',
-        author: 'liqiong43'
-      }
-    ]
-  },
-  {
-    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: 'Checkbox',
-        sort: 5,
-        cName: '复选按钮',
-        type: 'component',
-        show: true,
-        desc: '复选按钮',
-        author: 'Ymm0008'
-      },
-      {
-        name: 'Swiper',
-        sort: 6,
-        cName: '轮播',
-        type: 'component',
-        show: true,
-        desc: '轮播',
-        author: 'ailululu'
-      },
-      {
-        name: 'Avatar',
-        sort: 7,
-        cName: '头像',
-        type: 'component',
-        show: true,
-        desc: '头像',
-        author: 'ailululu'
-      }
-    ]
-  },
-  {
-    name: '导航组件',
-    packages: [
-      {
-        name: 'Navbar',
-        sort: 3,
-        cName: '导航组件',
-        type: 'componment',
-        show: true,
-        desc: '导航组件',
-        author: 'liqiong43'
-      },
-      {
-        name: 'tab',
-        sort: 1,
-        cName: '标签组件',
-        type: 'component',
-        show: true,
-        desc: '标签组件',
-        author: 'zhenyulei'
-      }
-    ]
-  },
-  {
-    name: '数据录入',
-    packages: [
-      {
-        name: 'InputNumber',
-        sort: 1,
-        cName: '数字输入框',
-        type: 'component',
-        show: true,
-        desc: '数字输入框组件',
-        author: 'szg2008'
-      }
-    ]
-  },
-  {
-    name: '业务组件',
-    packages: []
-  }
-];

src/packages/input/index.vue

@@ -1,43 +1,41 @@
 <template>
-		<view :class="classes" @click="handleClick">
-		  <view>{{ name }}</view>
-		  <view>{{ txt }}</view>
-		</view>
-	  </template>
-	  <script lang="ts">
-	  import { toRefs } from 'vue';
-	  import { createComponent } from '@/utils/create';
-	  const { componentName, create } = createComponent('temp');
-	  
-	  export default create({
-		props: {
-		  name: {
-			type: String,
-			default: ''
-		  },
-		  txt: {
-			type: String,
-			default: ''
-		  }
-		},
-		components: {},
-		emits: ['click'],
-	  
-		setup(props, { emit }) {
-		  console.log('componentName', componentName);
-	  
-		  const { name, txt } = toRefs(props);
-	  
-		  const handleClick = (event: Event) => {
-			emit('click', event);
-		  };
-	  
-		  return { name, txt, handleClick };
-		}
-	  });
-	  </script>
-	  
-	  <style lang="scss">
-	  @import 'index.scss';
-	  </style>
-	  
+  <view :class="classes" @click="handleClick">
+  
+  </view>
+</template>
+<script lang="ts">
+import { toRefs } from 'vue';
+import { createComponent } from '@/utils/create';
+const { componentName, create } = createComponent('temp');
+
+export default create({
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    txt: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {},
+  emits: ['click'],
+
+  setup(props, { emit }) {
+    console.log('componentName', componentName);
+
+    const { name, txt } = toRefs(props);
+
+    const handleClick = (event: Event) => {
+      emit('click', event);
+    };
+
+    return { name, txt, handleClick };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

src/sites/doc/components/Header.vue

@@ -12,27 +12,42 @@
       <div class="nav-box">
         <ul class="nav-list">
           <li class="nav-item" :class="{ active: isActive(header[0].name) }">
-            <router-link :to="header[0].name">{{ header[0].cName }}</router-link>
+            <router-link :to="header[0].name">{{
+              header[0].cName
+            }}</router-link>
           </li>
           <li class="nav-item" :class="{ active: isActive(header[1].name) }">
-            <router-link :to="header[1].name">{{ header[1].cName }}</router-link>
+            <router-link :to="header[1].name">{{
+              header[1].cName
+            }}</router-link>
           </li>
           <li class="nav-item" :class="{ active: isActive(header[2].name) }"
-            ><a href="http://localhost:8080/demo.html#/" style="color:#fff">{{ header[2].cName }}</a></li
+            ><a href="http://localhost:8080/demo.html#/">{{
+              header[2].cName
+            }}</a></li
           >
           <li class="nav-item" :class="{ active: isActive(header[3].name) }">
-            <router-link :to="header[3].name">{{ header[3].cName }}</router-link>
+            <router-link :to="header[3].name">{{
+              header[3].cName
+            }}</router-link>
           </li>
-          <!-- <li :class="{ active: isActive(_package.name) }" v-for="_package in docs.packages" :key="_package">
-            <router-link v-if="!_package.isLink" :to="_package.name.toLowerCase()">{{ _package.cName }}</router-link>
-            <a v-else :href="_package.name" target="_blank">{{ _package.cName }}</a>
-          </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-hd">{{ data.verson }}<i class=""></i></div>
+            <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.name, 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>
@@ -87,6 +102,13 @@ export default defineComponent({
       data.isShowSelect = false;
       data.activeIndex = index;
       data.verson = item;
+      if (index === 0) {
+        window.location.href = '//nutui.jd.com/1x/';
+      } else if (index === 1) {
+        window.location.href = 'https://nutui.jd.com/#/index';
+      } else {
+        // window.location.href = ""
+      }
     };
     return {
       header,
@@ -157,7 +179,8 @@ export default defineComponent({
         padding-left: 42px;
         font-size: 14px;
         vertical-align: middle;
-        background: transparent url('../../assets/images/input-search.png') no-repeat;
+        background: transparent url('../../assets/images/input-search.png')
+          no-repeat;
       }
     }
     .nav-box {
@@ -258,7 +281,8 @@ export default defineComponent({
     .header {
       &-logo {
         .logo-link {
-          background: url('../../assets/images/logo-header-white.png') no-repeat center/100%;
+          background: url('../../assets/images/logo-header-white.png') no-repeat
+            center/100%;
         }
         .logo-border {
           background: $theme-red-border;
@@ -333,7 +357,8 @@ export default defineComponent({
     .header {
       &-logo {
         .logo-link {
-          background: url('../../assets/images/logo-header-red.png') no-repeat center/100%;
+          background: url('../../assets/images/logo-header-red.png') no-repeat
+            center/100%;
         }
         .logo-border {
           background: $theme-white-border;
@@ -408,7 +433,8 @@ export default defineComponent({
     .header {
       &-logo {
         .logo-link {
-          background: url('../../assets/images/logo-header-red.png') no-repeat center/100%;
+          background: url('../../assets/images/logo-header-red.png') no-repeat
+            center/100%;
         }
         .logo-border {
           background: $theme-black-border;

src/sites/doc/views/Resource.vue

@@ -6,26 +6,48 @@
       <p class="sub-desc">这里汇总了Nut UI 相关的所有的资源</p>
     </div>
   </div>
+  <!-- 设计资源 -->
   <div class="resource-content">
-    <div class="resource-block">
+    <div class="resource-block" v-if="data.articleList.length === 0">
       <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>
       </div>
     </div>
-    <div class="resource-block">
+    <div class="resource-block" v-else>
       <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" v-for="item in data.articleList" :key="item.id">
+          <div
+            class="design-item"
+            v-for="item in data.articleList"
+            :key="item.id"
+            @click="toLink(item.id)"
+          >
             <img class="img-design" :src="item.cover_image" />
             <p class="design-title">{{ item.title }}</p>
           </div>
@@ -33,18 +55,27 @@
         <div class="tab-bd" v-show="data.activeIndex === 1">
           <div class="design-item">
             <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
+            <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>
+            <p class="design-title"
+              >NutUI 落地实践-让组件库服务慧采协同采购业务</p
+            >
           </div>
         </div>
       </div>
     </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">
@@ -63,7 +94,11 @@
 </template>
 <script lang="ts">
 import { defineComponent, onMounted, reactive } from 'vue';
-import { onBeforeRouteUpdate, RouteLocationNormalized, useRoute } from 'vue-router';
+import {
+  onBeforeRouteUpdate,
+  RouteLocationNormalized,
+  useRoute
+} from 'vue-router';
 import Header from '@/sites/doc/components/Header.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
 import { currentRoute } from '@/sites/assets/util/ref';
@@ -81,18 +116,18 @@ export default defineComponent({
       tabData: [
         {
           title: '全部文章'
+        },
+        {
+          title: '性能体验'
+        },
+        {
+          title: '性能体验1'
         }
         // {
         //   title: '性能体验'
         // },
         // {
         //   title: '性能体验'
-        // },
-        // {
-        //   title: '性能体验'
-        // },
-        // {
-        //   title: '性能体验'
         // }
       ],
       activeIndex: 0
@@ -119,9 +154,13 @@ export default defineComponent({
     const clickTab = (index: number) => {
       data.activeIndex = index;
     };
+    const toLink = (id: number) => {
+      window.open('//jelly.jd.com/article/' + id);
+    };
     return {
       data,
-      clickTab
+      clickTab,
+      toLink
     };
   }
 });
@@ -202,7 +241,7 @@ $mainRed: #fa685d;
     display: flex;
     width: 100%;
     flex-wrap: wrap;
-    justify-content: space-between;
+    justify-content: flex-start;
   }
   &-hd-item {
     margin-right: 40px;
@@ -221,7 +260,12 @@ $mainRed: #fa685d;
 .design {
   &-item {
     width: 280px;
+    margin-right: 26px;
     margin-bottom: 45px;
+    cursor: pointer;
+    &:nth-child(4n) {
+      margin-right: 0;
+    }
     .img-design {
       width: 280px;
       height: 170px;

tsconfig.json

@@ -11,6 +11,7 @@
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "sourceMap": true,
+    "noImplicitAny": false,
     "baseUrl": ".",
     "types": [
       "webpack-env"