mod: remove topic aside asideNavItem

src/language/en.ts

@@ -113,7 +113,7 @@ export default {
       floorSort: 'Floor Sort',
       timeSort: 'Time Sort',
       likeSort: 'Like Sort',
-      commentSort: 'Reply Sort',
+      commentSort: 'Comment Sort',
       updatedSort: 'Update Sort',
       tags: 'Topics Under the Same Tags',
       tagsEmpty: 'The tags currently has no other topics',

src/views/topic/aside/components/AsideActive.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import TopicAsideNav from './TopicAsideNav.vue'
 import TopicOtherTag from './TopicOtherTag.vue'
 import TopicMaster from './TopicMaster.vue'
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
@@ -19,7 +18,6 @@ const { tags, uid } = toRefs(props)
     appear
   >
     <div class="aside">
-      <TopicAsideNav />
       <TopicOtherTag style="margin-bottom: 17px" :tags="tags" />
       <TopicMaster :uid="uid" />
       <KUNGalgameFooter />

src/views/topic/aside/components/AsideBase.vue

@@ -1,17 +1,11 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { asideNavItem } from './asideNavItem'
 
 import { useTempReplyStore } from '@/store/temp/topic/reply'
 import { storeToRefs } from 'pinia'
 
 const { isScrollToTop, replyRequest } = storeToRefs(useTempReplyStore())
 
-const handleSortReply = (sortField: string) => {
-  useTempReplyStore().resetPageStatus()
-  replyRequest.value.sortField = sortField
-}
-
 const orderAscending = () => {
   useTempReplyStore().resetPageStatus()
   replyRequest.value.sortOrder = 'asc'
@@ -33,13 +27,6 @@ const handleBackToTop = () => {
     appear
   >
     <div class="item">
-      <span
-        v-for="kun in asideNavItem"
-        :key="kun.index"
-        @click="handleSortReply(kun.sortField)"
-      >
-        <Icon class="icon" :icon="kun.icon" />
-      </span>
       <span class="sort" @click="orderAscending">
         <Icon class="icon" icon="tdesign:order-ascending" />
       </span>

src/views/topic/aside/components/TopicAsideNav.vue

@@ -1,145 +0,0 @@
-<!-- 
-  This is the functional area of the topic section, including functions like scrolling back to the top.
--->
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { asideNavItem } from './asideNavItem'
-
-import { useTempReplyStore } from '@/store/temp/topic/reply'
-import { storeToRefs } from 'pinia'
-
-const { isScrollToTop, replyRequest } = storeToRefs(useTempReplyStore())
-
-const handleSortReply = (sortField: string) => {
-  useTempReplyStore().resetPageStatus()
-  replyRequest.value.sortField = sortField
-}
-
-const orderAscending = () => {
-  useTempReplyStore().resetPageStatus()
-  replyRequest.value.sortOrder = 'asc'
-}
-
-const orderDescending = () => {
-  useTempReplyStore().resetPageStatus()
-  replyRequest.value.sortOrder = 'desc'
-}
-
-const handleBackToTop = () => {
-  useTempReplyStore().resetPageStatus()
-  isScrollToTop.value = true
-}
-</script>
-
-<template>
-  <div class="nav">
-    <!-- Interactive area container -->
-    <div class="item">
-      <span @click="handleBackToTop">
-        <Icon class="icon" icon="line-md:arrow-close-up" />{{
-          $tm('topic.aside.top')
-        }}
-      </span>
-      <span
-        v-for="kun in asideNavItem"
-        :key="kun.index"
-        @click="handleSortReply(kun.sortField)"
-      >
-        <Icon class="icon" :icon="kun.icon" />{{
-          $tm(`topic.aside['${kun.name}']`)
-        }}
-      </span>
-    </div>
-    <div class="sort-order">
-      <span @click="orderAscending">
-        <Icon icon="tdesign:order-ascending" />
-      </span>
-      <span @click="orderDescending">
-        <Icon icon="tdesign:order-descending" />
-      </span>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.nav {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  border: 1px solid var(--kungalgame-trans-blue-4);
-  background-color: var(--kungalgame-trans-blue-0);
-  box-shadow: var(--shadow);
-  border-radius: 5px;
-  margin-bottom: 17px;
-  overflow: hidden;
-
-  .item {
-    flex-grow: 1;
-    display: flex;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-
-    & > span {
-      height: 40px;
-      padding: 0 11px;
-      display: flex;
-      align-items: center;
-      position: relative;
-      overflow: hidden;
-      white-space: nowrap;
-      cursor: pointer;
-      font-size: 15px;
-
-      &:nth-child(1) {
-        color: var(--kungalgame-blue-4);
-      }
-
-      &::before {
-        transform: scaleX(0);
-        transform-origin: bottom right;
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        inset: 0 0 0 0;
-        background-color: var(--kungalgame-red-4);
-        z-index: -1;
-        transition: transform 0.3s ease;
-      }
-
-      &:hover::before {
-        transform: scaleX(1);
-        transform-origin: bottom left;
-      }
-    }
-  }
-}
-
-.icon {
-  margin-right: 4px;
-  font-size: 17px;
-}
-
-.sort-order {
-  width: 100%;
-  display: flex;
-  cursor: default;
-
-  span {
-    height: 27px;
-    color: var(--kungalgame-blue-4);
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 17px;
-
-    &:hover {
-      transition: all 0.2s;
-      color: var(--kungalgame-red-4);
-    }
-  }
-}
-</style>

src/views/topic/aside/components/TopicMaster.vue

@@ -1,6 +1,3 @@
-<!-- 
-  这里是楼主的其他话题组件
- -->
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
@@ -96,11 +93,11 @@ onMounted(async () => {
       height: 100%;
       margin: 0 17px;
       color: var(--kungalgame-font-color-3);
-      overflow: hidden; /* Hide the overflow */
+      overflow: hidden;
-      text-overflow: ellipsis; /* Display ellipsis (three dots) for overflowed text */
+      text-overflow: ellipsis;
-      display: -webkit-box; /* Convert the text box into a flexible box */
+      display: -webkit-box;
-      -webkit-box-orient: vertical; /* Set it to arrange vertically */
+      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2; /* Display two lines of text */
+      -webkit-line-clamp: 2;
       font-size: small;
       display: flex;
       align-items: center;

src/views/topic/aside/components/asideNavItem.ts

@@ -1,39 +0,0 @@
-interface navItem {
-  index: number
-  sortField: string
-  icon: string
-  name: string
-}
-
-export const asideNavItem: navItem[] = [
-  {
-    index: 1,
-    sortField: 'floor',
-    icon: 'line-md:arrows-vertical',
-    name: 'floorSort',
-  },
-  {
-    index: 2,
-    sortField: 'time',
-    icon: 'eos-icons:hourglass',
-    name: 'timeSort',
-  },
-  {
-    index: 3,
-    sortField: 'likes',
-    icon: 'line-md:thumbs-up-twotone',
-    name: 'likeSort',
-  },
-  {
-    index: 4,
-    sortField: 'comment',
-    icon: 'fa-regular:comment-dots',
-    name: 'commentSort',
-  },
-  {
-    index: 5,
-    sortField: 'updatedAt',
-    icon: 'line-md:arrow-up-square',
-    name: 'updatedSort',
-  },
-]