fix: 增加文章链接

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;