优化咨询客服

frontend/src/layouts/AppLayout.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
 import {
   ArrowDown,
   ChatDotRound,
@@ -13,6 +14,7 @@ import {
   UserFilled,
   Wallet,
 } from "@element-plus/icons-vue";
+import { ensureSupportChat } from "@/api/chats";
 import { useSessionStore } from "@/stores/session";
 
 const session = useSessionStore();
@@ -26,12 +28,30 @@ const navItems = [
 ];
 
 const showUserDropdown = ref(false);
+const supportLoading = ref(false);
 
 function handleLogout() {
   session.logout();
   showUserDropdown.value = false;
   router.replace("/");
 }
+
+async function handleSupportClick() {
+  if (!session.isLoggedIn) {
+    router.push({ path: "/login", query: { redirect: router.currentRoute.value.fullPath } });
+    return;
+  }
+  if (supportLoading.value) return;
+  supportLoading.value = true;
+  try {
+    const chat = await ensureSupportChat();
+    router.push(`/messages/${chat.id}`);
+  } catch {
+    ElMessage.error("联系客服失败，请稍后重试");
+  } finally {
+    supportLoading.value = false;
+  }
+}
 </script>
 
 <template>
@@ -63,10 +83,10 @@ function handleLogout() {
       </div>
 
       <div class="pc-user-actions">
-        <RouterLink class="pc-icon-link service-link" to="/notifications" title="联系客服">
+        <button class="pc-icon-link service-link" type="button" title="联系客服" @click="handleSupportClick">
           <el-icon><Service /></el-icon>
-          <span>客服</span>
-        </RouterLink>
+          <span>{{ supportLoading ? "接入中" : "客服" }}</span>
+        </button>
 
         <RouterLink class="pc-post-link" :to="session.isLoggedIn ? '/seller/listings/create' : '/login'">
           <el-icon><CirclePlus /></el-icon>
@@ -310,6 +330,7 @@ function handleLogout() {
   font-size: 14px;
   font-weight: 700;
   text-decoration: none;
+  cursor: pointer;
   transition: all 0.2s;
   white-space: nowrap;
 }