fix: 数据闪烁问题

IdeaLeap · Feb 2, 2023 · a83eb4b · a83eb4b
1 parent 0cdca56
commit a83eb4b
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>