fix: 频道聊天，点击写个回复没反应，点击小箭头才行 #916

frontend_nuxt/assets/global.css

@@ -18,7 +18,9 @@
   --background-color-blur: rgba(255, 255, 255, 0.57);
   --menu-border-color: lightgray;
   --normal-border-color: lightgray;
-  --menu-selected-background-color: rgba(242, 242, 242, 0.884);
+  --menu-selected-background-color: rgba(88, 241, 255, 0.166);
+  --normal-light-background-color: rgba(242, 242, 242, 0.884);
+  --menu-selected-background-color-hover: rgba(242, 242, 242, 0.884);
   --menu-text-color: rgb(99, 99, 99);
   --scroller-background-color: rgba(130, 175, 180, 0.5);
   /* --normal-background-color: rgb(241, 241, 241); */
@@ -58,6 +60,8 @@
   --menu-border-color: #555;
   --normal-border-color: #555;
   --menu-selected-background-color: rgba(255, 255, 255, 0.1);
+  --normal-light-background-color: rgba(255, 255, 255, 0.1);
+  --menu-selected-background-color-hover: rgba(17, 182, 197, 0.082);
   --menu-text-color: rgb(173, 173, 173);
   /* --normal-background-color: #000000; */
   --normal-background-color: #333;
@@ -162,7 +166,7 @@ body {
   padding-left: 1em;
   border-left: 4px solid #d0d7de;
   color: var(--blockquote-text-color);
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
   padding-top: 1px;
   padding-bottom: 1px;
 }
@@ -295,7 +299,7 @@ body {
 
 /* 鼠标悬停行高亮 */
 .info-content-text tbody tr:hover {
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
   transition: background-color 0.2s ease;
 }
 

frontend_nuxt/components/MenuComponent.vue

@@ -316,6 +316,10 @@ const gotoTag = (t) => {
   align-items: center;
 }
 
+.menu-item:hover {
+  background-color: var(--menu-selected-background-color-hover);
+}
+
 .menu-item.selected {
   font-weight: bold;
   background-color: var(--menu-selected-background-color);
@@ -407,7 +411,7 @@ const gotoTag = (t) => {
 }
 
 .section-item:hover {
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--menu-selected-background-color-hover);
 }
 
 .section-item-text-count {

frontend_nuxt/components/PostEditor.vue

@@ -136,7 +136,7 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background: var(--menu-selected-background-color);
+  background: var(--normal-light-background-color);
   display: flex;
   align-items: center;
   justify-content: center;

frontend_nuxt/components/ReactionsGroup.vue

@@ -331,11 +331,11 @@ onMounted(async () => {
 
 .reactions-viewer-item.placeholder,
 .reactions-viewer-single-item.selected {
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
 }
 
 .reaction-option.selected {
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
 }
 
 @media (max-width: 768px) {

frontend_nuxt/pages/index.vue

@@ -65,16 +65,17 @@
           class="article-item"
           v-for="article in articles"
           :key="article.id"
+          @click="navigateTo(`/posts/${article.id}`)"
         >
           <div class="article-main-container">
-            <NuxtLink class="article-item-title main-item" :to="`/posts/${article.id}`">
+            <NuxtLink class="article-item-title main-item">
               <pin v-if="article.pinned" theme="outline" class="pinned-icon" />
               <gift v-if="article.type === 'LOTTERY'" class="lottery-icon" />
               <ranking-list v-else-if="article.type === 'POLL'" class="poll-icon" />
               <star v-if="!article.rssExcluded" class="featured-icon" />
               {{ article.title }}
             </NuxtLink>
-            <NuxtLink class="article-item-description main-item" :to="`/posts/${article.id}`">
+            <NuxtLink class="article-item-description main-item">
               {{ sanitizeDescription(article.description) }}
             </NuxtLink>
             <div class="article-info-container main-item">
@@ -488,6 +489,11 @@ const sanitizeDescription = (text) => stripMarkdown(text)
   border-bottom: 1px solid var(--normal-border-color);
 }
 
+.article-item:hover {
+  background-color: var(--menu-selected-background-color-hover);
+  cursor: pointer;
+}
+
 .article-main-container,
 .header-item.main-item {
   width: calc(60% - 20px);

frontend_nuxt/pages/message-box/[id].vue

@@ -48,7 +48,7 @@
               :content-id="item.id"
               @update:modelValue="(v) => (item.reactions = v)"
             >
-              <div class="reply-btn"><next @click="setReply(item)" /> 写个回复...</div>
+              <div @click="setReply(item)" class="reply-btn"><next /> 写个回复...</div>
             </ReactionsGroup>
           </template>
         </BaseTimeline>
@@ -614,7 +614,7 @@ function goBack() {
   border-left: 5px solid var(--primary-color);
   margin-bottom: 5px;
   font-size: 13px;
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
 }
 
 .reply-author {
@@ -634,7 +634,7 @@ function goBack() {
 }
 
 .active-reply {
-  background-color: var(--bg-color-soft);
+  background-color: var(--normal-light-background-color);
   padding: 5px 10px;
   border-left: 5px solid var(--primary-color);
   margin-bottom: 5px;

frontend_nuxt/pages/message-box/index.vue

@@ -419,7 +419,7 @@ function minimize() {
 }
 
 .conversation-item:hover {
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
 }
 
 .conversation-avatar {