From a83eb4b9fa66ad5413db9d48fc04ac6a01da7e09 Mon Sep 17 00:00:00 2001
From: Plumbiu <99574369+Plumbiu@users.noreply.github.com>
Date: Thu, 2 Feb 2023 22:43:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=95=B0=E6=8D=AE=E9=97=AA=E7=83=81?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../1.0.0/full_documentation.json             |  2 +-
 frontend/components/ArticlesList/Item/Img.vue |  8 ++++--
 .../components/ArticlesList/Item/Mainbar.vue  |  3 +--
 .../components/ArticlesList/Item/Topbar.vue   |  3 +--
 .../components/ArticlesList/Item/index.vue    |  9 ++++---
 frontend/components/ArticlesList/Skeleton.vue | 25 +++----------------
 frontend/components/ArticlesList/index.vue    |  4 +--
 7 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json b/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
index 99c2386..d724d24 100644
--- a/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
+++ b/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "2023-02-02T11:55:33.790Z"
+    "x-generation-date": "2023-02-02T14:40:09.643Z"
   },
   "x-strapi-config": {
     "path": "/documentation",
diff --git a/frontend/components/ArticlesList/Item/Img.vue b/frontend/components/ArticlesList/Item/Img.vue
index f9546fa..91847ff 100644
--- a/frontend/components/ArticlesList/Item/Img.vue
+++ b/frontend/components/ArticlesList/Item/Img.vue
@@ -14,8 +14,12 @@ defineProps({
     fit="fill"
     quality="80"
     format="webp"
-    class="mx-[1.67rem] mb-[-2rem] w-[120px] h-[80px]"
+    class="cover"
   />
 </template>
 
-<style scoped></style>
+<style scoped>
+.cover {
+  @apply mx-[1.67rem] mb-[-2rem] w-[120px] h-[80px];
+}
+</style>
diff --git a/frontend/components/ArticlesList/Item/Mainbar.vue b/frontend/components/ArticlesList/Item/Mainbar.vue
index 2930834..135a5a8 100644
--- a/frontend/components/ArticlesList/Item/Mainbar.vue
+++ b/frontend/components/ArticlesList/Item/Mainbar.vue
@@ -18,8 +18,7 @@ defineProps({
 
 <style scoped>
 .title {
-  color: text_jj_font_black;
-  @apply truncate dark:text-jj_font_white text-[16px] title font-semibold tracking-wide
+  @apply truncate text_jj_font_black dark:text-jj_font_white text-[16px] title font-semibold tracking-wide
 }
 .summary {
   @apply truncate pt-4 text-jj_thirdly text-[13px]
diff --git a/frontend/components/ArticlesList/Item/Topbar.vue b/frontend/components/ArticlesList/Item/Topbar.vue
index 559b029..80b723c 100644
--- a/frontend/components/ArticlesList/Item/Topbar.vue
+++ b/frontend/components/ArticlesList/Item/Topbar.vue
@@ -25,8 +25,7 @@ defineProps({
 
 <style scoped>
 .name {
-  color: text-jj_font_black;
-  @apply dark:text-jj_font_white px-3 border-r-1 pl-0
+  @apply text-jj_font_black dark:text-jj_font_white px-3 border-r-1 pl-0
 }
 .duration {
   @apply text-jj_thirdly px-3 border-r-1
diff --git a/frontend/components/ArticlesList/Item/index.vue b/frontend/components/ArticlesList/Item/index.vue
index d2cea83..bb1e5de 100644
--- a/frontend/components/ArticlesList/Item/index.vue
+++ b/frontend/components/ArticlesList/Item/index.vue
@@ -26,7 +26,7 @@ const hideHandler = () => {
 <template>
   <li :id="`artlist_${uid}`" class="list_container">
     <NuxtLink :to="`article/${uid}`" class="link_container">
-      <div class="flex-1 truncate">
+      <div class="left">
         <ArticlesListItemTopbar
           :name="name"
           :duration="formatTime(createdAt)"
@@ -46,10 +46,13 @@ const hideHandler = () => {
 
 <style scoped>
 .list_container {
-  position: relative;
+  @apply relative;
 }
 .list_container:hover .icon {
-  display: block;
+  @apply block;
+}
+.left {
+  @apply flex-1 truncate;
 }
 .link_container {
   @apply dark:bg-jj_bg_gray transition dark:b-[#333] dark:hover:bg-[#111] f-c-c py-4 transition-all hover:bg-[#FAFAFA] b-b b-grey all-cursor-pointer flex-1 pl-[1.67rem] truncate;
diff --git a/frontend/components/ArticlesList/Skeleton.vue b/frontend/components/ArticlesList/Skeleton.vue
index 8b9d798..7404f55 100644
--- a/frontend/components/ArticlesList/Skeleton.vue
+++ b/frontend/components/ArticlesList/Skeleton.vue
@@ -3,7 +3,7 @@
     <div class="skeleton w-2/5">
       <div />
     </div>
-    <div class="skeleton w-19/20">
+    <div class="skeleton w-full">
       <div />
     </div>
     <div class="skeleton w-4/5">
@@ -20,42 +20,25 @@
   @apply p-5 dark:bg-jj_bg_gray
 }
 .skeleton {
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-  vertical-align: middle;
-  height: 1.35rem;
-  border-radius: 4px;
-  margin: 7px 5px;
+  @apply align-middle relative inline-block overflow-hidden rounded-[4px] mx-[5px] my-[7px] h-[1.35rem]
 }
-
 .skeleton div {
-  width: 100%;
-  height: 100%;
-  border-radius: 2px;
-  background-color: #E5E7EC;
-  @apply dark:bg-[#555]
+  @apply dark:bg-[#555] w-full h-full bg-[#E5E7EC] rounded-[2px]
 }
-
 .skeleton::after {
   content: "";
-  position: absolute;
   animation: shan .75s ease 0s infinite;
-  top: 0;
-  width: 70%;
-  height: 100%;
   background: linear-gradient(to left,
       rgba(255, 255, 255, 0) 0,
       rgba(255, 255, 255, 0.3) 50%,
       rgba(255, 255, 255, 0) 100%);
   transform: skewX(-45deg);
+  @apply absolute top-0 w-7/10 h-full
 }
-
 @keyframes shan {
   0% {
     left: -100%;
   }
-
   100% {
     left: 120%;
   }
diff --git a/frontend/components/ArticlesList/index.vue b/frontend/components/ArticlesList/index.vue
index 457f962..94925cd 100644
--- a/frontend/components/ArticlesList/index.vue
+++ b/frontend/components/ArticlesList/index.vue
@@ -39,7 +39,8 @@ onUnmounted(() => {
 <template>
   <div class="bg-white box-border">
     <ArticlesListNavigation />
-    <ul v-if="!isLoading && !isEmpty">
+    <ArticlesListSkeleton v-if="isLoading || isEmpty" />
+    <ul v-else>
       <ArticlesListItem
         v-for="item in artlistData"
         :key="item.id"
@@ -56,6 +57,5 @@ onUnmounted(() => {
         :artlist-item="artlistData"
       />
     </ul>
-    <ArticlesListSkeleton v-else />
   </div>
 </template>