feat: AsideBase item

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

@@ -4,8 +4,15 @@ import { Icon } from '@iconify/vue'
 import { useTempReplyStore } from '@/store/temp/topic/reply'
 import { storeToRefs } from 'pinia'
 
+import { asideItem } from './asideItem'
+
 const { isScrollToTop, replyRequest } = storeToRefs(useTempReplyStore())
 
+const handleSortReply = (sortField: string) => {
+  useTempReplyStore().resetPageStatus()
+  replyRequest.value.sortField = sortField
+}
+
 const orderAscending = () => {
   useTempReplyStore().resetPageStatus()
   replyRequest.value.sortOrder = 'asc'
@@ -27,6 +34,13 @@ const handleBackToTop = () => {
     appear
   >
     <div class="item">
+      <span
+        v-for="kun in asideItem"
+        :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>
@@ -47,23 +61,22 @@ const handleBackToTop = () => {
   justify-content: center;
   align-items: center;
   color: var(--kungalgame-font-color-3);
+
   span {
     margin-top: 20px;
-    transition: all 0.2s;
+
     &:hover {
+      transition: color 0.2s;
       color: var(--kungalgame-blue-4);
-      margin-top: 25px;
-    }
-    &:active {
-      transition: 0.1s;
-      margin-top: 15px;
     }
+
     &:last-child {
       margin-top: 50px;
     }
   }
   .sort {
     color: var(--kungalgame-blue-4);
+
     &:hover {
       color: var(--kungalgame-red-4);
     }

src/views/topic/components/Bar.vue

@@ -10,9 +10,7 @@ const { isScrollToTop } = storeToRefs(useTempReplyStore())
 <template>
   <div class="bar">
     <div class="top" @click="isScrollToTop = true">
-      <div class="icon">
-        <Icon icon="line-md:arrow-close-up" />
-      </div>
+      <Icon class="icon" icon="line-md:arrow-close-up" />
     </div>
   </div>
 </template>
@@ -26,7 +24,7 @@ const { isScrollToTop } = storeToRefs(useTempReplyStore())
   display: flex;
   flex-direction: column;
 }
-.sort,
+
 .top {
   display: flex;
   flex-direction: column;