优化CozeAPI调用保存逻辑和前端图标修复

- 修复前端TrendingUpOutlined图标导入错误，改为LineChartOutlined - 优化CozeAPI调用记录保存逻辑： * 正确保存创建人和更新人字段为当前用户ID * 正确传递和保存message_id字段 * 新增带messageId的WebSocket聊天方法重载 - 修复WebSocket处理器中的用户消息保存逻辑 - 确保CozeApiCallService正确设置创建人和更新人字段 - 改进AI回复保存时的创建人设置逻辑
2025-07-26 10:46:47 +08:00
parent 0dfabc35d7
commit 6903ac1c0d
8 changed files with 856 additions and 90 deletions
@@ -1,16 +1,21 @@
 <template>
-  <header class="app-header">
+  <header class="app-header" :class="{ 'scrolled': isScrolled }">
    <div class="header-content">
      <!-- Logo -->
      <router-link to="/" class="logo">
+        <svg width="32" height="32" viewBox="0 0 100 100" class="logo-icon">
+          <path fill="currentColor" d="M85.4,37.3C85.4,37.3,85.4,37.3,85.4,37.3c-2.8-9.9-10-17.7-19.1-21.2c-0.2-0.1-0.5-0.1-0.7-0.2c-0.1,0-0.2-0.1-0.3-0.1 c-1.2-0.4-2.5-0.8-3.7-1.1c-1-0.2-2-0.4-3-0.6c-1.1-0.2-2.1-0.3-3.2-0.4c-1.2-0.1-2.4-0.2-3.6-0.2c-0.1,0-0.2,0-0.3,0h-0.1 c-0.1,0-0.2,0-0.3,0c-1.2,0-2.4,0.1-3.6,0.2c-1.1,0.1-2.1,0.2-3.2,0.4c-1,0.2-2,0.4-3,0.6c-1.3,0.3-2.5,0.6-3.7,1.1 c-0.1,0-0.2,0.1-0.3,0.1c-0.2,0.1-0.5,0.1-0.7,0.2C21.6,19.6,14.4,27.4,11.6,37.3c0,0,0,0.1-0.1,0.1C8,47.7,8,58.8,11.5,69.2 c0,0.1,0.1,0.1,0.1,0.2c2.8,9.9,10,17.7,19.1,21.2c0.2,0.1,0.5,0.1,0.7,0.2c0.1,0,0.2,0.1,0.3,0.1c1.2,0.4,2.5,0.8,3.7,1.1 c1,0.2,2,0.4,3,0.6c1.1,0.2,2.1,0.3,3.2,0.4c1.2,0.1,2.4,0.2,3.6,0.2c0.1,0,0.2,0,0.3,0h0.1c0.1,0,0.2,0,0.3,0 c1.2,0,2.4-0.1,3.6-0.2c-1.1-0.1-2.1-0.2-3.2-0.4c1-0.2,2-0.4,3-0.6c1.3-0.3,2.5-0.6,3.7-1.1c0.1,0,0.2-0.1,0.3-0.1 c0.2-0.1,0.5-0.1,0.7-0.2c9.1-3.5,16.3-11.3,19.1-21.2c0-0.1,0.1-0.1,0.1-0.2C89,58.8,89,47.7,85.4,37.3z M50,77.9 c-15.4,0-27.9-12.5-27.9-27.9S34.6,22.1,50,22.1s27.9,12.5,27.9,27.9S65.4,77.9,50,77.9z"></path>
+          <path fill="#F5A623" d="M50,88.8c-21.4,0-38.8-17.4-38.8-38.8S28.6,11.2,50,11.2s38.8,17.4,38.8,38.8S71.4,88.8,50,88.8z M50,16.2 c-18.7,0-33.8,15.1-33.8,33.8S31.3,83.8,50,83.8s33.8-15.1,33.8-33.8S68.7,16.2,50,16.2z"></path>
+        </svg>
        <span class="logo-text">开心APP</span>
      </router-link>

      <!-- 导航菜单 -->
-      <nav class="nav-menu">
-        <router-link to="/chat" class="nav-link">聊天</router-link>
-        <router-link to="/diary" class="nav-link">日记</router-link>
-        <router-link to="/dashboard" class="nav-link">展板</router-link>
+      <nav class="nav-menu" :class="{ 'mobile-hidden': !mobileMenuVisible }">
+        <router-link to="/chat" class="nav-link" @click="closeMobileMenu">聊天</router-link>
+        <router-link to="/diary" class="nav-link" @click="closeMobileMenu">日记</router-link>
+        <router-link to="/dashboard" class="nav-link" @click="closeMobileMenu">展板</router-link>
+        <router-link to="/topic-tracker" class="nav-link" @click="closeMobileMenu">话题追踪</router-link>
      </nav>

      <!-- 右侧操作区 -->
@@ -62,25 +67,66 @@
            </template>
          </a-dropdown>
        </template>
+
+        <!-- 移动端菜单按钮 -->
+        <a-button
+          type="text"
+          class="mobile-menu-btn"
+          @click="toggleMobileMenu"
+        >
+          <MenuOutlined v-if="!mobileMenuVisible" />
+          <CloseOutlined v-else />
+        </a-button>
      </div>
    </div>
+
+    <!-- 移动端菜单 -->
+    <div v-if="mobileMenuVisible" class="mobile-menu">
+      <nav class="mobile-nav">
+        <router-link to="/chat" class="mobile-nav-link" @click="closeMobileMenu">聊天</router-link>
+        <router-link to="/diary" class="mobile-nav-link" @click="closeMobileMenu">日记</router-link>
+        <router-link to="/dashboard" class="mobile-nav-link" @click="closeMobileMenu">展板</router-link>
+        <router-link to="/topic-tracker" class="mobile-nav-link" @click="closeMobileMenu">话题追踪</router-link>
+      </nav>
+    </div>
  </header>
 </template>

 <script setup lang="ts">
+  import { ref, onMounted, onUnmounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { message } from 'ant-design-vue'
  import {
    UserOutlined,
    DownOutlined,
    SettingOutlined,
-    LogoutOutlined
+    LogoutOutlined,
+    MenuOutlined,
+    CloseOutlined
  } from '@ant-design/icons-vue'
  import { useUserStore } from '@/stores/user'

  const router = useRouter()
  const userStore = useUserStore()

+  // 响应式状态
+  const isScrolled = ref(false)
+  const mobileMenuVisible = ref(false)
+
+  // 滚动监听
+  const handleScroll = () => {
+    isScrolled.value = window.scrollY > 50
+  }
+
+  // 移动端菜单控制
+  const toggleMobileMenu = () => {
+    mobileMenuVisible.value = !mobileMenuVisible.value
+  }
+
+  const closeMobileMenu = () => {
+    mobileMenuVisible.value = false
+  }
+
  // 退出登录
  const handleLogout = async () => {
    try {
@@ -91,42 +137,85 @@
      message.error('退出登录失败')
    }
  }
+
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll)
+    handleScroll() // 初始检查
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll)
+  })
 </script>

 <style lang="scss" scoped>
@use "@/assets/styles/variables.scss" as *;
-  .app-header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-    background: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(16px);
-    border-bottom: 1px solid #e8e8e8;
-    padding: 0;
-    height: 64px;
-    line-height: 64px;
+
+.app-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(16px);
+  border-bottom: 1px solid transparent;
+  transition: all 0.3s ease;
+
+  &.scrolled {
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+    border-bottom-color: #e5e7eb;
+  }
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+
+  @media (max-width: 768px) {
+    padding: 12px 16px;
+  }
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  color: $tech-blue;
+  font-weight: 700;
+  font-size: 24px;
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(1.05);
  }

-  .header-content {
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 0 24px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 100%;
-  }
-
-  .logo {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    color: #4A90E2;
-    font-weight: bold;
+  @media (max-width: 768px) {
    font-size: 20px;
  }
+}
+
+.logo-icon {
+  color: $tech-blue;
+  flex-shrink: 0;
+
+  @media (max-width: 768px) {
+    width: 28px;
+    height: 28px;
+  }
+}
+
+.logo-text {
+  @media (max-width: 480px) {
+    display: none;
+  }
+}

  .nav-menu {
    display: flex;