优化部分代码

src/utils/authSessionState.js

@@ -1,7 +1,3 @@
 import { ref } from 'vue';
 
-// This flag is used by the router guard to know if a navigation
-// is occurring immediately after a successful login.
-// If true, the guard can choose to bypass an immediate session check (e.g., getUserInfo)
-// for that first navigation, assuming the new token is valid.
 export const justLoggedIn = ref(false); 

src/views/index/DemandList.vue

@@ -42,6 +42,7 @@
         </tbody>
       </table>
     </div>
+
 <!--    回复查看表单，联系方式，昵称，相关建议-->
     <div v-if="replyModal" class="modal-overlay" @click="closeReplyModal">
       <div class="modal-content" @click.stop>
@@ -51,6 +52,24 @@
         </div>
         <div class="modal-body">
           <form class="add-modal-form" @submit.prevent="submitReply">
+            <div class="form-row">
+              <span class="label">昵称：</span>
+              <input
+                v-model="addForm.author"
+                class="input"
+                placeholder="请输入您的昵称"
+                required
+              />
+            </div>
+            <div class="form-row">
+              <span class="label">QQ号：</span>
+              <input
+                v-model="addForm.author_contact"
+                class="input"
+                placeholder="请输入您的QQ号"
+                required
+              />
+            </div>
             <div class="form-row">
               <span class="label">相关建议：</span>
               <textarea
@@ -60,6 +79,7 @@
                 rows="3"
                 ref="autoTextarea"
                 @input="autoResize"
+                required
               ></textarea>
             </div>
             <div v-if="addError" class="error">{{ addError }}</div>
@@ -118,7 +138,14 @@
               </div>
               <div v-else class="no-reply">
                 <div v-if="selectedDemand?.sendcontent">
-                  <div class="reply-content">{{ selectedDemand.sendcontent }}</div>
+                  <div v-for="(reply, index) in selectedDemand.sendcontent.split('|')" :key="index" class="reply-content">
+                    <div class="reply-with-avatar">
+                      <img :src="`https://q1.qlogo.cn/g?b=qq&nk=${reply.match(/\((\d+)\)/)?.[1] || ''}&s=40`" alt="User Avatar" class="reply-avatar" />
+                      <div class="reply-text">
+                        <b>{{ reply.split(')：')[0] + '）' }}</b>{{ reply.split(')：')[1] }}
+                      </div>
+                    </div>
+                  </div>
                 </div>
                 <div v-else>
                   暂无回复
@@ -193,7 +220,9 @@ const addForm = ref({
   content: '',
   reward: '',
   qq_code: '',
-  sendcontent: ''
+  sendcontent: '',
+  author: '',
+  author_contact: ''
 })
 const addLoading = ref(false)
 const autoTextarea = ref(null)
@@ -239,9 +268,25 @@ const showReply = (demand) => {
   reply.value = demand
   replyModal.value = true
 }
+
 // 关闭回复弹窗
 const closeReplyModal = () => {
-  replyModal.value = false
+  replyModal.value = false;
+  resetReplyForm();
+}
+
+// 重置回复表单
+const resetReplyForm = () => {
+  addForm.value = {
+    sendcontent: '',
+    author: '',
+    author_contact: ''
+  };
+  addError.value = '';
+  // 重置文本框高度
+  if (autoTextarea.value) {
+    autoTextarea.value.style.height = 'auto';
+  }
 }
 
 // 显示详情弹窗
@@ -257,16 +302,10 @@ const closeModal = () => {
 }
 
 // 打开弹窗
-function openAddModal() {
+const openAddModal = (demand) => {
-  addForm.value = { 
+  reply.value = demand;
-    requester: '',
+  replyModal.value = true;
-    content: '',
+  resetReplyForm();
-    reward: '', 
-    qq_code: '',
-    sendcontent: ''
-  }
-  addError.value = ''
-  showAddModal.value = true
 }
 
 // 关闭弹窗
@@ -313,27 +352,47 @@ const submitReply = async () => {
     addError.value = '回复内容不能为空';
     return;
   }
+  if (!addForm.value.author?.trim()) {
+    addError.value = '昵称不能为空';
+    return;
+  }
+  if (!addForm.value.author_contact?.trim()) {
+    addError.value = 'QQ号不能为空';
+    return;
+  }
+  // 验证QQ号是否为纯数字
+  if (!/^\d+$/.test(addForm.value.author_contact)) {
+    addError.value = 'QQ号必须为纯数字';
+    return;
+  }
+  
   addLoading.value = true;
   addError.value = '';
   try {
     const now = new Date();
     const dateStr = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2,'0')}-${now.getDate().toString().padStart(2,'0')} ${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}:${now.getSeconds().toString().padStart(2,'0')}`;
+    
+    // 拼接回复内容
+    const newReply = `${addForm.value.author}(${addForm.value.author_contact})：${addForm.value.sendcontent}`;
+    const formattedContent = reply.value.sendcontent 
+      ? `${reply.value.sendcontent}|${newReply}`
+      : newReply;
+    
     const payload = {
       requester: reply.value.requester || '',
-      sendcontent: addForm.value.sendcontent,
+      sendcontent: formattedContent,
       content: reply.value.content,
       reward: reply.value.reward || '',
       date: dateStr,
-      qq_code: reply.value.qq_code || ''
+      qq_code: reply.value.qq_code || '',
+      author: addForm.value.author,
+      author_contact: addForm.value.author_contact
     };
     
     console.log('提交的回复数据:', payload);
     await updateDemand(reply.value.id, payload);
     replyModal.value = false;
-    addForm.value.sendcontent = '';
+    resetReplyForm();
-    if (autoTextarea.value) {
-      autoTextarea.value.style.height = 'auto';
-    }
     fetchDemands(); // 刷新列表
   } catch (e) {
     console.error('提交回复失败:', e);
@@ -641,15 +700,15 @@ function autoResize() {
 }
 
 .reply-list {
-  max-height: 300px;
+  background: none;
-  overflow-y: auto;
+  border-radius: 0;
+  padding: 0 0 0 0;
 }
 
 .reply-item {
-  background: #f7faff;
+  background: none;
-  border-radius: 8px;
+  border-radius: 0;
-  padding: 15px;
+  padding: 0 0 0 0;
-  margin-bottom: 15px;
 }
 
 .reply-header {
@@ -693,4 +752,46 @@ function autoResize() {
   background: transparent;
   box-shadow: none;
 }
+
+.reply-with-avatar {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.reply-with-avatar:last-child {
+  margin-bottom: 0;
+}
+
+.reply-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  object-fit: cover;
+  flex-shrink: 0;
+  background: #f3f6fa;
+}
+
+.reply-text {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  font-size: 15px;
+  color: #222;
+  line-height: 1.7;
+  padding-left: 14px;
+  background: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.reply-text b {
+  font-weight: 600;
+  margin-right: 6px;
+  color: #2563eb;
+  font-size: 15px;
+}
 </style>