Merge branch 'main' into issue-67-新增nav菜单

IdeaLeap · Jan 26, 2023 · a92fce7 · a92fce7
2 parents 6cb1b08 + 869b173
commit a92fce7
Show file tree

Hide file tree

Showing 12 changed files with 200 additions and 181 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
   // "prettier.enable": false,
   "editor.codeActionsOnSave": {
-    // "source.fixAll": true
+    "source.fixAll": true
   },
   "files.associations": {
     "*.css": "postcss"
@@ -23,9 +23,9 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[javascript]": {
-      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[json]": {
-      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-}
+}
diff --git a/backend/.tmp/data.db b/backend/.tmp/data.db
diff --git a/backend/src/api/article/content-types/article/schema.json b/backend/src/api/article/content-types/article/schema.json
@@ -42,7 +42,7 @@
     },
     "cover": {
       "type": "string",
-      "required": true
+      "required": false
     },
     "summary": {
       "type": "string",

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-01-25T04:39:01.335Z"
+    "x-generation-date": "2023-01-26T05:03:19.417Z"
   },
   "x-strapi-config": {
     "path": "/documentation",
@@ -101,7 +101,6 @@
               "shared",
               "commented",
               "content",
-              "cover",
               "summary"
             ],
             "type": "object",

diff --git a/frontend/components/Articles/Link.vue b/frontend/components/Articles/Link.vue
@@ -0,0 +1,28 @@
+<template>
+  <div all-px-7 all-my-4 flex all-cursor-pointer>
+    <NuxtLink
+      to="/"
+      :class="`${
+        $route.query.sort ? 'text-gray-500' : 'text-[#007fff]'
+      } border-r-1 focus:text-[#007fff] hover:text-[#007fff]`"
+    >
+      推荐
+    </NuxtLink>
+    <NuxtLink
+      to="/?sort=newest"
+      :class="`${
+        $route.query.sort === 'newest' ? 'text-[#007fff]' : 'text-gray-500'
+      } border-r-1 focus:text-[#007fff] hover:text-[#007fff]`"
+    >
+      最新
+    </NuxtLink>
+    <NuxtLink
+      to="/?sort=three_days_hottest"
+      :class="`${
+        ($route.query.sort && $route.query.sort?.indexOf('hottest') !== -1) ? 'text-[#007fff]' : 'text-gray-500'
+      } border-r-1 focus:text-[#007fff] hover:text-[#007fff]`"
+    >
+      热榜
+    </NuxtLink>
+  </div>
+</template>
diff --git a/frontend/components/Articles/index.vue b/frontend/components/Articles/index.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import type { IPanel } from '../../types/IPanel'
+const route = useRoute()
+watchEffect(() => {
+  // TODO: 请求数据
+})
 let pagenum = 0
 const isLoading = useState('isLoading', () => false)
-const artlistNav = useState('artlistNav', () => 'recommend')
-const hotRange = useState('hotRange', () => 'all')
-const hotRangeHandler = () => {
-  // TODO: 热度选择天数范围
-}
 const initialItem = await useFetchPostData()
-const artlistData = useState('artlist', () => [...initialItem] as IPanel[])
+const artlistData = useArtlist(initialItem)
 const addArtListItem = () => {
   if (useScrollBottom()) {
     const timer = setTimeout(async () => {
@@ -21,19 +19,6 @@ const addArtListItem = () => {
     }, 1000)
   }
 }
-const artModeHandler = (mode: string) => {
-  artlistNav.value = mode
-  const allEl = document.querySelectorAll('.navlist') as unknown as HTMLElement[]
-  allEl.forEach((item) => {
-    item.style.color = '#6b7280'
-  })
-  const el = document.getElementById(mode) as unknown as HTMLElement
-  if (el.style)
-    el.style.color = 'deepskyblue'
-  artlistData.value = []
-  // TODO: 请求数据
-  artlistData.value = initialItem
-}
 let EmployeeWindow
 onMounted(() => {
   EmployeeWindow = window as any
@@ -46,52 +31,17 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="all-text-black pb-5 box-border w-full">
+  <div class="pb-5 box-border w-full">
     <div class="flex" style="font-size: 13.67px;" border-b-1>
-      <ul all-px-7 all-my-4 flex all-cursor-pointer all-text-gray-500>
-        <li id="recommend" class="text-blue navlist border-r-1" @click="artModeHandler('recommend')">
-          推荐
-        </li>
-        <li id="latest" class="navlist border-r-1" @click="artModeHandler('latest')">
-          最新
-        </li>
-        <li id="hot" class="navlist" @click="artModeHandler('hot')">
-          热榜
-        </li>
-      </ul>
-      <!-- <select
-        v-if="artlistNav === 'hot'" v-model="hotRange" class="text-2 px-2 border-1"
-        @change="hotRangeHandler"
-      >
-        <option class="" :value="24 * 60 * 60 * 1000 * 3">
-          3天内
-        </option>
-        <option class="" :value="24 * 60 * 60 * 1000 * 7">
-          7天内
-        </option>
-        <option class="" :value="24 * 60 * 60 * 1000 * 30">
-          30天内
-        </option>
-        <option value="all">
-          全部
-        </option>
-      </select> -->
-      <UnoSelect class="" />
+      <ArticlesLink />
+      <UnoSelect />
     </div>
-    <ul v-if="!isLoading && initialItem">
+    <ul v-if="!isLoading && artlistData">
       <ArticlesItem
         v-for="items in artlistData" :key="items.uname" :uname="items.uname" :duration="items.duration"
         :title="items.title" :desc="items.desc" :tags="items.tags" :topic-heat="items.topicHeat"
       />
     </ul>
-    <div v-else>
-      <ArticlesSkeleton />
-    </div>
+    <ArticlesSkeleton v-else />
   </div>
 </template>
-
-<style scoped>
-li:hover {
-  color: deepskyblue!important;
-}
-</style>
diff --git a/frontend/components/Aside/LinkList.vue b/frontend/components/Aside/LinkList.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ILink } from 'types/ILink'
+defineProps({
+  links: {
+    type: Array<ILink>,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <div display="block" class="">
+    <div class="bg-[#ffffff]">
+      <ul class=" flex-col gap-3 items-center flex">
+        <li v-for="i in links" :key="i.url" class="h-[100%] w-[100%]">
+          <nuxt-link
+            :to="i.url"
+            class="flex flex-row justify-start items-center gap-3 hover:bg-[#fbfbfb] p-3"
+          >
+            <nuxt-img :src="i.icon" class="w-12 h-12" />
+            <div class="text-lg text-[#333333]">
+              {{ i.title }}
+            </div>
+          </nuxt-link>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/frontend/components/Aside/SuspensionPanel.vue b/frontend/components/Aside/SuspensionPanel.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const to_top = () => {
+  window.scrollTo({
+    top: 0,
+  })
+}
+</script>
+
+<template>
+  <div display="block" class="p-5 flex flex-col">
+    <div
+      class="my-2 bg-light-50 p-4 rounded-full shadow hover:shadow-md"
+      @click="to_top"
+    >
+      <div>
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M2.75 1C2.33579 1 2 1.33579 2 1.75C2 2.16421 2.33579 2.5 2.75 2.5H13.25C13.6642 2.5 14 2.16421 14 1.75C14 1.33579 13.6642 1 13.25 1H2.75ZM7.24407 3.87287C7.64284 3.41241 8.35716 3.41241 8.75593 3.87287L13.0622 8.84535C13.6231 9.49299 13.163 10.5 12.3063 10.5H10V14C10 14.5523 9.55228 15 9 15H7C6.44772 15 6 14.5523 6 14V10.5H3.69371C2.83696 10.5 2.37691 9.49299 2.93778 8.84535L7.24407 3.87287Z"
+            fill="#8A919F"
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="my-3 bg-light-50 p-4 rounded-full shadow hover:shadow-md">
+      <div>
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M1.8252 4.002C1.8252 2.80032 2.79935 1.82617 4.00102 1.82617H12.001C13.2027 1.82617 14.1768 2.80032 14.1768 4.002V9.71628C14.1768 10.918 13.2027 11.8921 12.001 11.8921H9.43308L6.92709 14.1281C6.4455 14.5578 5.68234 14.216 5.68234 13.5706V11.8921H4.00102C2.79934 11.8921 1.8252 10.918 1.8252 9.71628V4.002ZM11.2414 7.86753C11.3826 7.65526 11.3249 7.36878 11.1126 7.22764C10.9004 7.08651 10.6139 7.14417 10.4728 7.35643C9.94042 8.15705 9.03153 8.68309 7.99997 8.68309C6.96841 8.68309 6.05952 8.15705 5.52719 7.35643C5.38605 7.14417 5.09957 7.08651 4.88731 7.22764C4.67504 7.36878 4.61738 7.65526 4.75852 7.86753C5.45467 8.91452 6.64645 9.60617 7.99997 9.60617C9.35349 9.60617 10.5453 8.91452 11.2414 7.86753Z"
+            fill="#1E80FF"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>
diff --git a/frontend/components/Aside/index.vue b/frontend/components/Aside/index.vue
@@ -7,8 +7,10 @@ const { data: GlobalData } = await useFetch('/api/global')
     <AsideSign class="mb-5" />
     <AsideGadgets class="mb-5" :gadgets="GlobalData.gadgets" />
     <AsideAuthorList class="sidebar-block mb-5" />
+    <AsideLinkList class="mb-5" :links="GlobalData.links" />
     <!-- <AsideArticleList class="sidebar-block mb-5" /> -->
-    2333
+    <AsideFooters class="mb-5" />
+    <AsideSuspensionPanel class="fixed right-3 bottom-1" />
   </div>
 </template>