feat: add dislike button; fix: padding overflow of IconButton; v-divi…

…der style
OpenTreeHole · Jul 21, 2023 · 7ef89cd · 7ef89cd
1 parent 9ebebf5
commit 7ef89cd
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 8 deletions.
diff --git a/src/components/TheLayout.vue b/src/components/TheLayout.vue
@@ -45,7 +45,7 @@
             >
               <v-list-item-title>{{ division.name }}</v-list-item-title>
             </v-list-item>
-            <v-divider />
+            <v-divider class="border-gray-800" />
             <template v-if="userStore.isAdmin">
               <v-list-item
                 class="text-left pl-10 cursor-pointer select-none"
@@ -54,7 +54,7 @@
               >
                 <v-list-item-title>管理</v-list-item-title>
               </v-list-item>
-              <v-divider />
+              <v-divider class="border-gray-800" />
             </template>
             <v-list-item
               v-for="(r, i) in otherRoutes"

diff --git a/src/components/floor/FloorBlockAction.vue b/src/components/floor/FloorBlockAction.vue
@@ -10,9 +10,18 @@
       >
         mdi-thumb-up-outline
       </IconBtn>
+      <IconBtn
+        :icon-class="
+          floor instanceof DetailedFloor && floor.disliked ? 'text-red-500' : 'text-neutral-400'
+        "
+        :text="floor.dislike"
+        @click="sendDislike"
+      >
+        mdi-thumb-down-outline
+      </IconBtn>
       <IconBtn @click="reply"> mdi-chat-outline </IconBtn>
       <v-divider
-        class="mx-1"
+        class="mx-1 border-gray-800"
         :vertical="true"
       />
       <IconBtn
@@ -47,7 +56,7 @@
       </IconBtn>
       <v-divider
         v-if="userStore.isAdmin || (floor instanceof DetailedFloor && floor.isMe)"
-        class="mx-1"
+        class="mx-1 border-gray-800"
         :vertical="true"
       />
       <IconBtn @click="toggleAction(ActionType.Report)"> mdi-alert-octagon-outline </IconBtn>
@@ -335,6 +344,14 @@ const sendLike = async () => {
   }
 }
 
+const sendDislike = async () => {
+  if (floor.value instanceof DetailedFloor && floor.value.disliked) {
+    floor.value = await likeFloor(floor.value.id, 0)
+  } else {
+    floor.value = await likeFloor(floor.value.id, -1)
+  }
+}
+
 const sendReport = async () => {
   if (reportReason.value === '') {
     not.error('举报理由不能为空')

diff --git a/src/components/floor/ReportBlock.vue b/src/components/floor/ReportBlock.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p class="flex">
+    <p class="flex pt-2">
       <span class="font-bold min-w-max">举报理由：</span>
       <span> {{ report.reason }} </span>
       <span class="grow"></span>

diff --git a/src/components/floor/ReportBlockAction.vue b/src/components/floor/ReportBlockAction.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="flex justify-end mt-2 overflow-visible">
+    <div class="flex justify-end py-2 overflow-visible">
       <IconBtn @click="toggleAction(ActionType.Delete)">mdi-delete-outline</IconBtn>
       <IconBtn @click="toggleAction(ActionType.Penalty)">mdi-account-off-outline</IconBtn>
       <v-divider
-        class="mx-1"
+        class="mx-1 border-gray-800"
         :vertical="true"
       />
       <IconBtn

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -35,6 +35,9 @@ export class Floor {
   @Field()
   like: number
 
+  @Field()
+  dislike: number
+
   @Field({ type: Date })
   timeCreated: Date
 
@@ -54,6 +57,9 @@ export class DetailedFloor extends Floor {
   @Field()
   liked?: boolean
 
+  @Field()
+  disliked?: boolean
+
   @Field({ type: Floor, array: true })
   mention: Floor[]
 

diff --git a/src/views/admin/ReportView.vue b/src/views/admin/ReportView.vue
@@ -18,7 +18,7 @@
     </div>
     <div class="hidden lg:block lg:max-w-[35%] xl:max-w-[30%] 3xl:max-w-[25%] pl-5 grow">
       <v-list>
-        <v-list-item class="py-5">
+        <v-list-item class="py-3">
           <p class="text-left">举报类别：</p>
           <v-radio-group v-model="range">
             <v-radio