Merge pull request #128 from MarleneJiang/issue-54-新增文章列表

Issue 54 新增文章列表
IdeaLeap · Feb 1, 2023 · 6437792 · 6437792 · vercel · Feb 1, 2023
2 parents 1a50331 + 3023cc5
commit 6437792
Show file tree

Hide file tree

Showing 12 changed files with 153 additions and 101 deletions.
diff --git a/backend/.tmp/data.db b/backend/.tmp/data.db
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,11 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
+<<<<<<< HEAD
+    "x-generation-date": "2023-01-31T11:23:22.255Z"
+=======
     "x-generation-date": "2023-01-31T16:13:30.302Z"
+>>>>>>> 1a5033131415b92a7b73ce09625c5308c0f517ef
   },
   "x-strapi-config": {
     "path": "/documentation",

diff --git a/frontend/components/ArticlesList/Items/Bottombar.vue b/frontend/components/ArticlesList/Items/Bottombar.vue
@@ -25,5 +25,3 @@ const format = (num: number) => {
     </div>
   </div>
 </template>
-
-<style scoped></style>
diff --git a/frontend/components/ArticlesList/Items/Link.vue b/frontend/components/ArticlesList/Items/Link.vue
@@ -6,16 +6,19 @@ defineProps({
 </script>
 
 <template>
-  <NuxtLink v-if="id" class="flex-1 pl-[1.67rem] truncate" :to="`/article/${id}`">
+  <NuxtLink v-if="id" class="link" :to="`/article/${id}`">
     <slot />
   </NuxtLink>
-  <NuxtLink v-if="url" class="flex-1 pl-[1.67rem] truncate" :to="`/article/${url}`">
+  <NuxtLink v-if="url" class="link" :to="`/article/${url}`">
     <slot />
   </NuxtLink>
 </template>
 
 <style scoped>
-  a:visited {
-    color: #909090;
-  }
+a:visited {
+  color: #909090;
+}
+.link {
+  @apply flex-1 pl-[1.67rem] truncate
+}
 </style>
diff --git a/frontend/components/ArticlesList/Items/Mainbar.vue b/frontend/components/ArticlesList/Items/Mainbar.vue
@@ -7,11 +7,20 @@ defineProps({
 
 <template>
   <div class="py-4">
-    <div class="truncate text-jj_sec-app text-[16px] title font-semibold tracking-wide">
+    <div class="title">
       {{ title }}
     </div>
-    <div class="truncate pt-4 text-jj_thirdly text-[13px]">
+    <div class="summary">
       {{ summary }}
     </div>
   </div>
 </template>
+
+<style scoped>
+.title {
+  @apply truncate text-jj_sec-app text-[16px] title font-semibold tracking-wide
+}
+.summary {
+  @apply truncate pt-4 text-jj_thirdly text-[13px]
+}
+</style>
diff --git a/frontend/components/ArticlesList/Items/Topbar.vue b/frontend/components/ArticlesList/Items/Topbar.vue
@@ -12,13 +12,34 @@ defineProps({
 
 <template>
   <div class="flex items-center pr-4 text-[13px]">
-    <span class="text-jj_sec-app px-3 border-r-1 pl-0">{{ name }}</span>
-    <span class="text-jj_thirdly px-3 border-r-1">{{ duration }}</span>
-    <div class="flex px-3">
-      <div v-for="(item, index) of tags" :key="item.tag" class="items-center flex">
-        <span class="px-0 text-jj_thirdly">{{ item.alias }}</span>
-        <div v-if="index !== tags.length - 1" class="i-carbon-circle-solid px-2 text-[0.15rem]" />
+    <span class="name">{{ name }}</span>
+    <span class="duration">{{ duration }}</span>
+    <div class="tag_container">
+      <div v-for="(item, index) of tags" :key="item.tag" class="tag">
+        <span class="tag_content">{{ item.tag }}</span>
+        <div v-if="index !== tags.length - 1" class="tag_icon" />
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.name {
+  @apply text-jj_sec-app px-3 border-r-1 pl-0
+}
+.duration {
+  @apply text-jj_thirdly px-3 border-r-1
+}
+.tag_container {
+  @apply flex px-3
+}
+.tag {
+  @apply items-center flex
+}
+.tag_content {
+  @apply px-0 text-jj_thirdly
+}
+.tag_icon {
+  @apply i-carbon-circle-solid px-2 text-[0.15rem]
+}
+</style>
diff --git a/frontend/components/ArticlesList/Items/index.vue b/frontend/components/ArticlesList/Items/index.vue
@@ -11,7 +11,7 @@ defineProps({
   <li
     v-for="artItem in artlistItem"
     :key="artItem.id"
-    class="f-c-c py-4 transition-all hover:bg-[#FAFAFA] b-b b-grey all-cursor-pointer"
+    class="container"
   >
     <ArticlesListItemsLink :id="artItem.id">
       <ArticlesListItemsTopbar
@@ -35,3 +35,9 @@ defineProps({
     />
   </li>
 </template>
+
+<style scoped>
+.container {
+  @apply dark:bg-jj_bg_gray dark:b-[#333] dark:hover:bg-[#111] f-c-c py-4 transition-all hover:bg-[#FAFAFA] b-b b-grey all-cursor-pointer
+}
+</style>
diff --git a/frontend/components/ArticlesList/Navigation/Link.vue b/frontend/components/ArticlesList/Navigation/Link.vue
@@ -9,12 +9,12 @@ const initArtlistData = () => {
 </script>
 
 <template>
-  <div all-px-5 all-my-4 flex all-cursor-pointer>
+  <div class="all-px-5 all-my-4 flex all-cursor-pointer">
     <NuxtLink
       :to="`${artlistPath === '' ? '/' : artlistPath}`"
       :class="`${
         $route.query.sort ? 'text-gray-500' : 'text-link'
-      } border-r-1 focus:text-link hover:text-link pl-0`"
+      } border-r-1 text_style pl-0`"
       @click="initArtlistData()"
     >
       推荐
@@ -23,7 +23,7 @@ const initArtlistData = () => {
       :to="`${artlistPath}?sort=newest`"
       :class="`${
         $route.query.sort === 'newest' ? 'text-link' : 'text-gray-500'
-      } border-r-1 focus:text-link hover:text-link`"
+      } border-r-1 text_style`"
       @click="initArtlistData()"
     >
       最新
@@ -32,10 +32,16 @@ const initArtlistData = () => {
       :to="`${artlistPath}?sort=three_days_hottest`"
       :class="`${
         ($route.query.sort && $route.query.sort?.indexOf('hottest') !== -1) ? 'text-link' : 'text-gray-500'
-      } focus:text-link hover:text-link`"
+      } text_style`"
       @click="initArtlistData()"
     >
       热榜
     </NuxtLink>
   </div>
 </template>
+
+<style scoped>
+.text_style {
+  @apply focus:text-link hover:text-link
+}
+</style>
diff --git a/frontend/components/ArticlesList/Navigation/Select.vue b/frontend/components/ArticlesList/Navigation/Select.vue
@@ -25,22 +25,22 @@ const iptValueHandler = (time: string) => {
         <div class="text-[#b2bac2]" i-carbon:caret-up :class="!isShow ? 'toggled' : ''" style="transition: all 0.5s" />
       </div>
       <ul v-if="isShow" class="dropdown-menu">
-        <li class="route-active">
+        <li>
           <NuxtLink :to="`${artlistPath}?sort=three_days_hottest`" @click="iptValueHandler('3天内')">
             3天内
           </NuxtLink>
         </li>
-        <li class="router-link-exact-active route-active">
+        <li>
           <NuxtLink :to="`${artlistPath}?sort=weekly_hottest`" aria-current="page" @click="iptValueHandler('7天内')">
             7天内
           </NuxtLink>
         </li>
-        <li class="route-active">
+        <li>
           <NuxtLink :to="`${artlistPath}?sort=monthly_hottest`" @click="iptValueHandler('30天内')">
             30天内
           </NuxtLink>
         </li>
-        <li class="route-active">
+        <li>
           <NuxtLink :to="`${artlistPath}?sort=hottest`" @click="iptValueHandler('全部')">
             全部
           </NuxtLink>
@@ -51,76 +51,76 @@ const iptValueHandler = (time: string) => {
 </template>
 
 <style scoped>
-  .dorp-down-area {
-    position: relative;
-    z-index: 9;
-  }
-  .dorp-down-area .drop-down {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-  }
-  .drop-down {
-    position: relative;
-    color: #909097;
-    min-width: 4rem;
-  }
-  li {
-    list-style: none;
-  }
-  .dropdown-toggle {
-    box-sizing: border-box;
-    min-width: 7rem;
-    font-size: 1rem;
-    border-radius: 2px;
-    padding: 2px 10px;
-    font-weight: 400;
-    border: 1px solid #ebebeb;
-  }
-  .dropdown-toggle:hover {
-    background-color: #fafafb;
-    cursor: pointer;
-  }
-  .toggled {
-    transform: rotate(-180deg);
-    transition: all 0.5s;
-  }
-
-  .dropdown-menu {
-    box-sizing: border-box;
-    position: absolute;
-    top: 105%;
-    left: 0;
-    z-index: 1000;
-    min-width: 7rem;
-    font-size: 1rem;
-    list-style: none;
-    text-align: left;
-    border-radius: 0.17rem;
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
-    border: 1px solid #ebebeb;
-    background-color: #fff;
-  }
-
-  .dropdown-menu li {
-    overflow: hidden;
-    width: 100%;
-  }
-
-  .dropdown-menu li a {
-    display: block;
-    clear: both;
-    padding: 0.83rem;
-    line-height: 1.17;
-    color: #909097;
-  }
-  .dropdown-menu li a:hover {
-    background-color: #fafafb;
-  }
-  a {
-    text-decoration: none;
-    cursor: pointer;
-    color: #909090;
-  }
+.dorp-down-area {
+  position: relative;
+  z-index: 9;
+}
+.dorp-down-area .drop-down {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+.drop-down {
+  position: relative;
+  color: #909097;
+  min-width: 4rem;
+}
+li {
+  list-style: none;
+  @apply dark:bg-jj_bg_gray
+}
+.dropdown-toggle {
+  box-sizing: border-box;
+  min-width: 7rem;
+  font-size: 1rem;
+  border-radius: 2px;
+  padding: 2px 10px;
+  font-weight: 400;
+  border: 1px solid #ebebeb;
+}
+.dropdown-toggle:hover {
+  cursor: pointer;
+  @apply bg-[#fafafb] dark:hover-bg-[#111]
+}
+.toggled {
+  transform: rotate(-180deg);
+  transition: all 0.5s;
+}
+.dropdown-menu {
+  box-sizing: border-box;
+  position: absolute;
+  top: 105%;
+  left: 0;
+  z-index: 1000;
+  min-width: 7rem;
+  font-size: 1rem;
+  list-style: none;
+  text-align: left;
+  border-radius: 0.17rem;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  border: 1px solid #ebebeb;
+  background-color: #fff;
+  @apply b-[#333]
+}
+.dropdown-menu li {
+  overflow: hidden;
+  width: 100%;
+}
+.dropdown-menu li a {
+  display: block;
+  clear: both;
+  padding: 0.83rem;
+  line-height: 1.17;
+  color: #909097;
+}
+.dropdown-menu li a:hover {
+  background-color: #fafafb;
+  @apply bg-[#fafafb] dark:hover-bg-[#111]
+}
+a {
+  text-decoration: none;
+  cursor: pointer;
+  color: #909090;
+}
 </style>
diff --git a/frontend/components/ArticlesList/Navigation/index.vue b/frontend/components/ArticlesList/Navigation/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex text-[1.17rem] pl-[1.67rem] border-b-1">
+  <div class="flex text-[1.17rem] pl-[1.67rem] border-b-1 dark:bg-jj_bg_gray">
     <ArticlesListNavigationLink />
     <ArticlesListNavigationSelect />
   </div>

diff --git a/frontend/components/ArticlesList/Skeleton.vue b/frontend/components/ArticlesList/Skeleton.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="all-py-5 all-px-7">
+  <div class="container">
     <div class="skeleton w-2/5">
       <div />
     </div>
@@ -9,26 +9,32 @@
     <div class="skeleton w-4/5">
       <div />
     </div>
-    <div class="skeleton w-3/5">
+    <div class="skeleton mb-5 w-3/5">
       <div />
     </div>
   </div>
 </template>
 
 <style scoped>
+.container {
+  @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;
 }
 
 .skeleton div {
   width: 100%;
   height: 100%;
   border-radius: 2px;
   background-color: #E5E7EC;
+  @apply dark:bg-[#555]
 }
 
 .skeleton::after {