fix: basic ui

frontend_nuxt/pages/message.vue

@@ -14,6 +14,12 @@
         >
           未读
         </div>
+        <div
+          :class="['message-tab-item', { selected: selectedTab === 'control' }]"
+          @click="selectedTab = 'control'"
+        >
+          消息设置
+        </div>
       </div>
 
       <div class="message-page-header-right">
@@ -24,6 +30,20 @@
       </div>
     </div>
 
+    <div v-if="selectedTab === 'control'">
+      <div class="message-control-container">
+        <div class="message-control-title">通知设置</div>
+        <div class="message-control-push-item-container">
+          <div class="message-control-push-item">已读通知</div>
+          <div class="message-control-push-item select">订阅者发帖通知</div>
+          <div class="message-control-push-item">订阅者回复通知</div>
+          <div class="message-control-push-item">关注者发帖通知</div>
+          <div class="message-control-push-item">评论回复通知</div>
+        </div>
+      </div>
+    </div>
+
+    <template v-else>
       <div v-if="isLoadingMessage" class="loading-message">
         <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
       </div>
@@ -450,6 +470,7 @@
           </template>
         </BaseTimeline>
       </div>
+    </template>
   </div>
 </template>
 
@@ -915,6 +936,38 @@ export default {
   border-bottom: 2px solid var(--primary-color);
 }
 
+.message-control-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.message-control-container {
+  padding: 20px;
+}
+
+.message-control-push-item-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.message-control-push-item {
+  font-size: 14px;
+  margin-bottom: 5px;
+  padding: 8px 16px;
+  border: 1px solid var(--normal-border-color);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.message-control-push-item.select {
+  background-color: var(--primary-color);
+  color: white;
+}
+
 @media (max-width: 768px) {
   .has_read_button {
     display: none;