From 65d8e67a01d7acbacdf2981d4ea2dbec8bdb2eab Mon Sep 17 00:00:00 2001
From: Plumbiu <99574369+Plumbiu@users.noreply.github.com>
Date: Fri, 3 Feb 2023 23:56:01 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BD=9C=E8=80=85=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E6=97=A0=E6=B3=95=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../documentation/1.0.0/full_documentation.json       |  2 +-
 frontend/components/ArticlesList/Item/AuthorInfo.vue  |  6 ++++--
 frontend/components/ArticlesList/Item/Topbar.vue      | 11 +++++++----
 frontend/components/ArticlesList/Item/index.vue       |  4 ++--
 .../components/ArticlesList/Navigation/Select.vue     |  9 ++++++---
 frontend/components/ArticlesList/Skeleton.vue         | 10 +++++-----
 6 files changed, 25 insertions(+), 17 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 b6c4c3e..67511fd 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-03T13:01:19.465Z"
+    "x-generation-date": "2023-02-03T15:36:35.496Z"
   },
   "x-strapi-config": {
     "path": "/documentation",
diff --git a/frontend/components/ArticlesList/Item/AuthorInfo.vue b/frontend/components/ArticlesList/Item/AuthorInfo.vue
index bba2ef4..d43cc1b 100644
--- a/frontend/components/ArticlesList/Item/AuthorInfo.vue
+++ b/frontend/components/ArticlesList/Item/AuthorInfo.vue
@@ -31,7 +31,8 @@ defineProps({
 <style scoped>
 .author_panel {
   box-shadow: 0 8px 24px rgb(81 87 103 / 16%);
-  @apply bg-white dark:shadow-jj_author_info dark:bg-jj-article dark:text-white absolute top-[-9.5rem] left-0 mlg:left-[-1.67rem] bg-white
+  @apply bg-white absolute top-[-9.5rem] left-0 mlg:left-[-1.67rem]
+  @apply dark:shadow-jj_author_info dark:bg-jj-article dark:text-white
 }
 .author {
   @apply flex m-[1rem] mb-0
@@ -47,6 +48,7 @@ defineProps({
   transform: translate(-50%, 100%);
   border: 10px solid transparent;
   border-top-color: white;
-  @apply dark:border-t-jj_bg_gray border-t-white absolute bottom-0 left-1/2 w-0 h-0
+  @apply border-t-white absolute bottom-0 left-1/2 w-0 h-0
+  @apply dark:border-t-jj_bg_gray
 }
 </style>
diff --git a/frontend/components/ArticlesList/Item/Topbar.vue b/frontend/components/ArticlesList/Item/Topbar.vue
index 443749b..fb35e57 100644
--- a/frontend/components/ArticlesList/Item/Topbar.vue
+++ b/frontend/components/ArticlesList/Item/Topbar.vue
@@ -13,7 +13,7 @@ defineProps({
 <template>
   <div class="topbar">
     <div class="author_id">
-      {{ name }}
+      <span class="name">{{ name }}</span>
       <ArticlesListItemAuthorInfo
         :name="name"
         :duration="duration"
@@ -38,10 +38,13 @@ defineProps({
   @apply transition text-jj-font px-3 border-r-1 pl-0 hover:text-[#1E80FF]
 }
 .author_info {
-  @apply display-none
+  @apply scale-0 delay-150 transition-all
 }
-.author_id:hover .author_info {
-  @apply display-block
+.author_info:hover {
+  @apply scale-100;
+}
+.name:hover+.author_info {
+  @apply scale-100
 }
 .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 14f3836..e3fd2a1 100644
--- a/frontend/components/ArticlesList/Item/index.vue
+++ b/frontend/components/ArticlesList/Item/index.vue
@@ -55,9 +55,9 @@ const hideHandler = () => {
   @apply flex-1 truncate
 }
 .link_container {
-  @apply  transition dark:b-[#333] hover:bg-jj-hover f-c-c py-4 transition-all b-b b-grey all-cursor-pointer flex-1 pl-[1.67rem] truncate
+  @apply transition hover:bg-jj-hover f-c-c py-4 transition-all b-b b-grey all-cursor-pointer flex-1 pl-[1.67rem] truncate
+  @apply dark:b-[#333]
 }
-
 .icon {
   @apply i-carbon-close display-none cursor-pointer text-[16px] text-jj-fourthly hover:text-primary transition absolute top-[1rem] right-[1.67rem]
 }
diff --git a/frontend/components/ArticlesList/Navigation/Select.vue b/frontend/components/ArticlesList/Navigation/Select.vue
index d9e54dd..aa3ab13 100644
--- a/frontend/components/ArticlesList/Navigation/Select.vue
+++ b/frontend/components/ArticlesList/Navigation/Select.vue
@@ -42,11 +42,13 @@ li {
   @apply box-border min-w-[7rem] text-[1rem] rounded-[2px] px-[10px] py-[2px] border border-solid border-[#ebebeb]
 }
 .dropdown-toggle:hover {
-  @apply bg-[#fafafb] dark:hover-bg-[#111] cursor-pointer
+  @apply bg-[#fafafb] cursor-pointer
+  @apply dark:hover-bg-[#111]
 }
 .dropdown-menu {
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
-  @apply dark:b-[#333] text-left bg-white border border-[#ebebeb] absolute box-border top-[105%] left-0 z-1000 min-w-[7rem] text-[1rem] rounded-[0.17rem]
+  @apply text-left bg-white border border-[#ebebeb] absolute box-border top-[105%] left-0 z-1000 min-w-[7rem] text-[1rem] rounded-[0.17rem]
+  @apply dark:b-[#333]
 }
 .dropdown-menu li {
   @apply overflow-hidden w-full
@@ -58,6 +60,7 @@ li {
   @apply rotate-180
 }
 .dropdown-menu li a:hover {
-  @apply bg-[#fafafb] dark:hover-bg-[#111]
+  @apply bg-[#fafafb]
+  @apply dark:hover-bg-[#111]
 }
 </style>
diff --git a/frontend/components/ArticlesList/Skeleton.vue b/frontend/components/ArticlesList/Skeleton.vue
index 7404f55..bf2d495 100644
--- a/frontend/components/ArticlesList/Skeleton.vue
+++ b/frontend/components/ArticlesList/Skeleton.vue
@@ -17,23 +17,23 @@
 
 <style scoped>
 .skeleton_container {
-  @apply p-5 dark:bg-jj_bg_gray
+  @apply px-[1.67rem] py-[0.8rem]
+  @apply dark:bg-jj_bg_gray
 }
 .skeleton {
   @apply align-middle relative inline-block overflow-hidden rounded-[4px] mx-[5px] my-[7px] h-[1.35rem]
 }
 .skeleton div {
-  @apply dark:bg-[#555] w-full h-full bg-[#E5E7EC] rounded-[2px]
+  @apply w-full h-full bg-[#E5E7EC] rounded-[2px]
+  @apply dark:bg-[#555]
 }
 .skeleton::after {
-  content: "";
   animation: shan .75s ease 0s infinite;
   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
+  @apply content-none absolute top-0 w-7/10 h-full -skew-45
 }
 @keyframes shan {
   0% {