From 56a67571907dcbf152f97fa508336fb582c0db28 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Fri, 11 Jul 2025 13:42:19 +0800
Subject: [PATCH] feat: update reaction panel ui

---
 .../src/components/ReactionsGroup.vue          | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/open-isle-cli/src/components/ReactionsGroup.vue b/open-isle-cli/src/components/ReactionsGroup.vue
index 0e26e02db..88b13002d 100644
--- a/open-isle-cli/src/components/ReactionsGroup.vue
+++ b/open-isle-cli/src/components/ReactionsGroup.vue
@@ -14,9 +14,9 @@
       </div>
     </div>
     <div class="make-reaction-container">
-      <div class="make-reaction-item like-reaction" @click="toggleReaction('LIKE')"
-        :class="{ selected: userReacted('LIKE') }">
-        <i class="far fa-heart"></i>
+      <div class="make-reaction-item like-reaction" @click="toggleReaction('LIKE')">
+        <i v-if="!userReacted('LIKE')" class="far fa-heart"></i>
+        <i v-else class="fas fa-heart"></i>
         <span class="reactions-count" v-if="likeCount">{{ likeCount }}</span>
       </div>
       <slot></slot>
@@ -254,19 +254,25 @@ export default {
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 5px;
+  max-width: 240px;
   display: flex;
   flex-direction: row;
-  gap: 5px;
+  flex-wrap: wrap;
   z-index: 10;
+  gap: 2px;
 }
 
 .reaction-option {
   cursor: pointer;
-  padding: 5px;
+  padding: 2px 4px;
   border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
 }
 
 .reaction-option.selected {
-  background-color: #e2e2e2;
+  background-color: rgb(236, 236, 236);
 }
 </style>