complete main page topic nav

src/views/Home/content/article/header/ArticleHeader.vue

@@ -1,50 +1,23 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
+import SortTopic from './SortTopic.vue'
 </script>
 
 <template>
   <!-- 文章区顶部交互区 -->
   <div class="nav-article">
     <!-- 排序区域容器 -->
-    <div class="nav-article-sort-container">
+
-      <span>筛选</span>
+    <SortTopic />
-      <Icon class="filter" icon="bi:sort-down" />
+
-      <!-- 排序的二级菜单 -->
-      <div class="sort-container">
-        <div class="sort-submenu">
-          <div>
-            <Icon class="icon-item" icon="svg-spinners:clock" />按照时间排序
-          </div>
-          <div>
-            <Icon
-              class="icon-item"
-              icon="ic:outline-remove-red-eye"
-            />按浏览数排序
-          </div>
-          <div>
-            <Icon
-              class="icon-item"
-              icon="line-md:thumbs-up-twotone"
-            />按点赞数排序
-          </div>
-          <div>
-            <Icon
-              class="icon-item"
-              icon="fa-regular:comment-dots"
-            />按评论数排序
-          </div>
-          <div><Icon class="icon-item" icon="bi:fire" />按热度值排序</div>
-        </div>
-      </div>
-    </div>
     <!-- 搜索框 -->
     <KUNGalgameSearchBox :isMainPage="true" />
     <!-- 交互区域进入全部话题 -->
-    <div class="nav-article-more-topic">
+    <RouterLink to="/pool/index" class="more">
       <span>全部帖子</span>
       <Icon class="all-topic" icon="line-md:chevron-triple-right" />
-    </div>
+    </RouterLink>
   </div>
 </template>
 
@@ -59,71 +32,9 @@ import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
   border-bottom: 1px solid var(--kungalgame-trans-blue-4);
   color: var(--kungalgame-font-color-3);
 }
-/* 筛选、搜索帖子、更多 */
+
-.nav-article-sort-container {
-  height: 100%;
-  width: 1px;
-  /* 居中弹性盒 */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  /* 页面缩小不换行 */
-  white-space: nowrap;
-}
-/* 筛选 */
-.nav-article-sort-container {
-  background-color: var(--kungalgame-trans-red-3);
-  flex-grow: 1;
-  border-radius: 5px 0 0 0;
-  position: relative;
-  border-right: 1px solid var(--kungalgame-trans-blue-4);
-  box-sizing: border-box;
-  cursor: pointer;
-}
-.nav-article-sort-container:hover {
-  background-color: var(--kungalgame-trans-white-5);
-}
-.sort-container {
-  width: 100%;
-  top: 100%;
-  position: absolute;
-}
-.filter {
-  font-size: 18px;
-  margin-left: 5px;
-}
-.sort-submenu {
-  display: none;
-  flex-direction: column;
-  box-shadow: 1px 2px 1px 1px var(--kungalgame-trans-blue-4);
-}
-.nav-article-sort-container:hover .sort-submenu {
-  display: flex;
-}
-.sort-submenu > div {
-  padding: 10px 0;
-  background-color: var(--kungalgame-trans-white-2);
-  font-size: 14px;
-  color: var(--kungalgame-font-color-3);
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-/* 单个二级菜单 hover */
-.sort-submenu > div:hover {
-  background-color: var(--kungalgame-trans-blue-1);
-  backdrop-filter: blur(5px);
-}
-.sort-submenu > div:active {
-  background-color: var(--kungalgame-trans-blue-2);
-}
-.icon-item {
-  color: var(--kungalgame-font-color-2);
-  padding-right: 3px;
-}
 /* 更多 */
-.nav-article-more-topic {
+.more {
   height: 100%;
   width: 1px;
   /* 居中弹性盒 */
@@ -132,19 +43,20 @@ import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
   align-items: center;
   /* 页面缩小不换行 */
   white-space: nowrap;
-  background-color: var(--kungalgame-trans-purple-3);
+  background-color: var(--kungalgame-trans-blue-3);
   flex-grow: 1;
   border-radius: 0 5px 0 0;
   cursor: pointer;
   border-left: 1px solid var(--kungalgame-trans-blue-4);
   box-sizing: border-box;
+  color: var(--kungalgame-font-color-3);
 }
-.nav-article-more-topic:hover {
+.more:hover {
-  background-color: var(--kungalgame-trans-white-5);
-}
-.nav-article-more-topic:active {
   background-color: var(--kungalgame-trans-blue-2);
 }
+.more:active {
+  background-color: var(--kungalgame-trans-blue-4);
+}
 .all-topic {
   font-size: 18px;
 }

src/views/Home/content/article/header/SortTopic.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+// 导入图标
+import { Icon } from '@iconify/vue'
+
+interface Sort {
+  index: number
+  icon: string
+  name: string
+  event: string
+}
+
+const navSortItem: Sort[] = [
+  {
+    index: 1,
+    icon: 'svg-spinners:clock',
+    name: '按照时间排序',
+    event: 'handleTimeSort',
+  },
+  {
+    index: 2,
+    icon: 'ic:outline-remove-red-eye',
+    name: '按照浏览数排序',
+    event: 'handelViewSort',
+  },
+  {
+    index: 3,
+    icon: 'line-md:thumbs-up-twotone',
+    name: '按照点赞数排序',
+    event: 'handleLikeSort',
+  },
+  {
+    index: 4,
+    icon: 'fa-regular:comment-dots',
+    name: '按评论数排序',
+    event: 'handleCommentSort',
+  },
+  {
+    index: 5,
+    icon: 'bi:fire',
+    name: '按照热度值排序',
+    event: 'handleHotSort',
+  },
+]
+</script>
+
+<template>
+  <div class="container">
+    <span>筛选</span>
+    <Icon class="filter" icon="bi:sort-down" />
+    <!-- 排序的二级菜单 -->
+    <div class="sort-container">
+      <div class="sort-submenu">
+        <div v-for="kun in navSortItem" :key="kun.index">
+          <Icon class="icon-item" :icon="kun.icon" />{{ kun.name }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 筛选、搜索帖子、更多 */
+.container {
+  height: 100%;
+  width: 1px;
+  /* 居中弹性盒 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* 页面缩小不换行 */
+  white-space: nowrap;
+}
+/* 筛选 */
+.container {
+  background-color: var(--kungalgame-trans-red-3);
+  flex-grow: 1;
+  border-radius: 5px 0 0 0;
+  position: relative;
+  border-right: 1px solid var(--kungalgame-trans-blue-4);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.container:hover {
+  background-color: var(--kungalgame-trans-white-5);
+}
+.sort-container {
+  width: 100%;
+  top: 100%;
+  position: absolute;
+}
+.filter {
+  font-size: 18px;
+  margin-left: 5px;
+}
+.sort-submenu {
+  display: none;
+  flex-direction: column;
+  box-shadow: 1px 2px 1px 1px var(--kungalgame-trans-blue-4);
+}
+.container:hover .sort-submenu {
+  display: flex;
+}
+.sort-submenu > div {
+  padding: 10px 0;
+  background-color: var(--kungalgame-trans-white-2);
+  font-size: 14px;
+  color: var(--kungalgame-font-color-3);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/* 单个二级菜单 hover */
+.sort-submenu > div:hover {
+  background-color: var(--kungalgame-trans-blue-1);
+  backdrop-filter: blur(5px);
+}
+.sort-submenu > div:active {
+  background-color: var(--kungalgame-trans-blue-2);
+}
+.icon-item {
+  color: var(--kungalgame-font-color-2);
+  padding-right: 3px;
+  font-size: 17px;
+}
+</style>

src/views/edit/components/Tags.vue

@@ -152,7 +152,9 @@ const validateTagName = (tagName: string) => {
 .selected-tag {
   border: 1px solid var(--kungalgame-blue-1);
   margin: 5px;
-  display: block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   white-space: nowrap;
   font-size: 14px;
   padding: 3px;
@@ -162,6 +164,10 @@ const validateTagName = (tagName: string) => {
   }
 }
 
+.close-btn {
+  margin: 0 5px;
+}
+
 /* 标签输入框 */
 .input {
   background-color: var(--kungalgame-trans-white-9);