From a5865dd5597bb2da3fade36329bc11999755977a Mon Sep 17 00:00:00 2001
From: Jafeng <2998840497@qq.com>
Date: Mon, 25 Aug 2025 20:51:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE(chore):=20=E5=89=8D=E7=AB=AF=20-=20?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E3=80=81=E7=A7=BB=E9=99=A4=E5=BD=93=E5=89=8D=E4=BC=9A=E8=AF=9D?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=B8=8E=E5=9B=BE=E6=A0=87=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.vue                | 104 ++++++++++++++++++----------
 frontend/src/components/Sidebar.vue | 100 ++++++++++++++++++++++++++
 frontend/src/views/ChatView.vue     |   2 +-
 3 files changed, 170 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/components/Sidebar.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 03d2c66..4ca616d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,52 +1,28 @@
 <template>
   <div class="layout">
-    <aside class="sidebar">
-        <div class="top">
-          <h1 class="logo">AI Chat</h1>
-          <nav>
-            <!-- chat icon removed per request -->
-          </nav>
-        </div>
-        <ConversationList @new="handleNewConv" />
-        <div class="sidebar-bottom">
-          <div class="avatar-area left-align" style="position:relative;">
-            <button class="avatar-btn" @click="authStore.isAuthed ? (showUserMenu = !showUserMenu) : goLogin()">
-              <img v-if="authStore.user" :src="avatarUrlForName(authStore.user.userName || authStore.user.email)" alt="avatar" />
-              <div v-else class="avatar-fallback">{{ userInitial }}</div>
-            </button>
-            <div v-if="showUserMenu" class="user-menu">
-              <div class="user-info">
-                <div class="user-name">{{ authStore.user?.userName || '访客' }}</div>
-                <div class="user-id" v-if="authStore.user">ID: {{ authStore.user.userId }}</div>
-                <div class="user-status">{{ authStore.isAuthed ? '已登录' : '未登录' }}</div>
-              </div>
-              <div class="user-actions">
-                <button v-if="authStore.isAuthed" @click="logout">登出</button>
-                <button v-else @click="goLogin">登录</button>
-                <button @click="goSettings">设置</button>
-              </div>
-            </div>
-          </div>
-          <div class="right-icons">
-            <button class="icon-btn" title="设置" @click="goSettings">⚙️</button>
-            <button class="icon-btn" title="关于" @click="goAbout">ℹ️</button>
-            <button class="theme-toggle" @click="toggleTheme" :title="themeLabel">{{ themeStore.theme === 'dark' ? '🌙' : '☀️' }}</button>
-          </div>
-        </div>
-      </aside>
+  <Sidebar :collapsed="!showSidebar && !mobileOpen" :mobileOpen="mobileOpen" @toggle="toggleSidebar" @new="handleNewConv" />
+  <!-- mobile overlay when sidebar is open on small screens -->
+  <div v-if="mobileOpen" class="overlay" @click="closeMobileSidebar"></div>
     <main class="main">
+      <div class="topbar">
+        <!-- Show a single global toggle only when the sidebar is fully hidden (desktop collapsed or mobile closed) -->
+        <button v-if="!showSidebar && !mobileOpen" class="global-toggle" @click="toggleSidebar" aria-label="打开侧边栏">☰</button>
+        <!-- when sidebar is visible (desktop expanded or mobile open) the Sidebar component shows its own close icon; no duplicate icon here -->
+      </div>
       <RouterView />
     </main>
+  <!-- global left-top toggle when sidebar is hidden is rendered inside the topbar only -->
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, onMounted } from 'vue';
 import { useModelStore, type ModelInfo } from './stores/modelStore';
 import { storeToRefs } from 'pinia';
 import { useThemeStore } from './stores/themeStore';
 import { useConversationStore } from './stores/conversationStore';
 import ConversationList from './components/ConversationList.vue';
+import Sidebar from './components/Sidebar.vue';
 import { useAuthStore } from './stores/authStore';
 import { useRouter } from 'vue-router';
 
@@ -59,11 +35,42 @@ const { currentModel } = storeToRefs(modelStore);
 const models = ref(modelStore.supportedModels);
 const themeLabel = computed(() => themeStore.theme === 'dark' ? '切换为浅色' : '切换为深色');
 const menuOpen = ref(false);
+const showSidebar = ref(true);
+const mobileOpen = ref(false);
+
+function toggleSidebar() {
+  // on small screens open mobile drawer, on desktop just toggle collapse
+  if (window.innerWidth <= 768) {
+    mobileOpen.value = !mobileOpen.value;
+  } else {
+    showSidebar.value = !showSidebar.value;
+  }
+}
+
+function closeMobileSidebar() { mobileOpen.value = false; }
+
+onMounted(() => {
+  // auto-collapse on small screens
+  if (window.innerWidth <= 768) showSidebar.value = false;
+  window.addEventListener('resize', () => {
+    if (window.innerWidth > 768) {
+      // leaving mobile: close mobile drawer
+      mobileOpen.value = false;
+    } else {
+      // entering mobile: if sidebar was open on desktop, convert it to mobile drawer
+      if (showSidebar.value) {
+        mobileOpen.value = true;
+        showSidebar.value = false;
+      }
+    }
+  });
+});
 
 const userEmail = computed(() => authStore.user?.email || '');
 const userInitial = computed(() => authStore.user ? (authStore.user.userName || authStore.user.email)[0] : '访');
 const showUserMenu = ref(false);
 
+  /* make sure the global toggle sits above content when sidebar is hidden */
 function logout() { authStore.logout(); showUserMenu.value = false; router.push('/'); }
 
 function toggleTheme() { themeStore.toggle(); }
@@ -149,10 +156,37 @@ button:hover { filter: brightness(1.05); }
 button:active { filter: brightness(.95); }
 .main { flex: 1; display: flex; flex-direction: column; }
 .main { overflow:hidden; }
+/* responsive sidebar */
+.hamburger { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; margin-right:8px; border-radius:8px; background:var(--input-bg); border:1px solid var(--input-border); cursor:pointer; }
+.sidebar { width:240px; transition: width .18s ease, transform .18s ease, opacity .18s ease; position:relative; z-index:30; flex: 0 0 240px; }
+.sidebar-collapsed { width:0; flex: 0 0 0; padding:0; margin:0; overflow:hidden; opacity:0; }
+.mobile-open { transform: translateX(0); position:fixed; left:0; top:0; bottom:0; background:var(--sidebar-bg); box-shadow:2px 0 12px rgba(0,0,0,0.2); }
+.overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:20; }
+
+/* small screens: hide sidebar by default and allow sliding in */
+@media (max-width: 768px) {
+  .sidebar { position:fixed; left:-320px; top:0; bottom:0; height:100vh; width:280px; transform:translateX(-100%); flex: 0 0 280px; }
+  .sidebar.mobile-open { transform: translateX(0); }
+  .main { padding: 12px; }
+  .logo { font-size:18px; }
+    /* prevent global-toggle from overlapping page content on small screens */
+    .main { padding-top:56px; }
+    .topbar { position:relative; }
+
+    /* icon theme variables (can be toggled via theme store) */
+    :root { --icon-bg: var(--input-bg); --icon-fg: var(--text-color); --icon-border: var(--input-border); }
+}
+
+/* Ensure main takes remaining space when sidebar collapsed */
+.layout { align-items: stretch; }
+.main { flex: 1 1 auto; min-width:0; }
+.topbar { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--border-color); }
 /* user menu positioning */
 .user-menu { position:absolute; bottom:56px; left:0; background:var(--sidebar-bg); border:1px solid var(--input-border); padding:8px; border-radius:8px; min-width:160px; box-shadow:0 6px 18px rgba(0,0,0,0.12); }
 .user-menu .user-name { font-weight:600; }
 .user-menu .user-id { font-size:12px; opacity:.7; }
 .user-menu .user-actions { display:flex; gap:8px; margin-top:8px; }
 .user-menu button { padding:6px 8px; border-radius:6px; }
+/* global left-top toggle when sidebar is hidden */
+.global-toggle { position:fixed; left:12px; top:12px; z-index:40; width:40px; height:40px; border-radius:8px; background:var(--input-bg); border:1px solid var(--input-border); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
 </style>
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
new file mode 100644
index 0000000..12256ea
--- /dev/null
+++ b/frontend/src/components/Sidebar.vue
@@ -0,0 +1,100 @@
+<template>
+  <aside :class="['sidebar', { 'sidebar-collapsed': collapsed, 'mobile-open': mobileOpen }]">
+    <div class="top">
+      <div class="top-left">
+        <h1 class="logo">AI Chat</h1>
+      </div>
+      <div class="top-right">
+        <button class="hamburger" @click="$emit('toggle')" aria-label="切换侧边栏">☰</button>
+      </div>
+    </div>
+
+    <ConversationList @new="$emit('new')" />
+
+    <div class="sidebar-bottom">
+      <div class="avatar-area" style="position:relative;">
+        <button class="avatar-btn" @click="authStore.isAuthed ? (showUserMenu = !showUserMenu) : goLogin()">
+          <img v-if="authStore.user" :src="avatarUrlForName(authStore.user.userName || authStore.user.email)" alt="avatar" />
+          <div v-else class="avatar-fallback">{{ userInitial }}</div>
+        </button>
+
+        <div v-if="showUserMenu" class="user-menu">
+          <div class="user-info">
+            <div class="user-name">{{ authStore.user?.userName || '访客' }}</div>
+            <div class="user-id" v-if="authStore.user">ID: {{ authStore.user.userId }}</div>
+            <div class="user-status">{{ authStore.isAuthed ? '已登录' : '未登录' }}</div>
+          </div>
+          <div class="user-actions">
+            <button v-if="authStore.isAuthed" @click="logout">登出</button>
+            <button v-else @click="goLogin">登录</button>
+            <button @click="goSettings">设置</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="right-icons">
+        <button class="icon-btn" title="设置" @click="goSettings">⚙️</button>
+        <button class="icon-btn" title="关于" @click="goAbout">ℹ️</button>
+        <button class="theme-toggle" @click="toggleTheme" :title="themeLabel">{{ themeStore.theme === 'dark' ? '🌙' : '☀️' }}</button>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import ConversationList from '@/components/ConversationList.vue';
+import { useAuthStore } from '@/stores/authStore';
+import { useThemeStore } from '@/stores/themeStore';
+import { useRouter } from 'vue-router';
+
+const { collapsed, mobileOpen } = defineProps<{ collapsed: boolean; mobileOpen: boolean }>();
+const emit = defineEmits(['toggle', 'new']);
+
+const authStore = useAuthStore();
+const themeStore = useThemeStore();
+const router = useRouter();
+const showUserMenu = ref(false);
+
+const userInitial = computed(() => authStore.user ? (authStore.user.userName || authStore.user.email)[0] : '访');
+const themeLabel = computed(() => themeStore.theme === 'dark' ? '切换为浅色' : '切换为深色');
+
+function logout() { authStore.logout(); showUserMenu.value = false; router.push('/'); }
+function toggleTheme() { themeStore.toggle(); }
+function goSettings() { router.push('/settings'); }
+function goAbout() { router.push('/about'); }
+function goLogin() { router.push('/login'); }
+
+function avatarUrlForName(name: string) {
+  const initials = (name || '访客').trim().split(/\s+/).slice(0,2).map(s => s[0]).join('').toUpperCase();
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  const hue = Math.abs(hash) % 360;
+  const bg = `hsl(${hue} 60% 45%)`;
+  const fg = '#fff';
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><rect width='100%' height='100%' fill='${bg}' rx='16'/><text x='50%' y='52%' dominant-baseline='middle' text-anchor='middle' font-family='system-ui,Segoe UI,Roboto,Helvetica,Arial' font-size='32' fill='${fg}'>${initials}</text></svg>`;
+  return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg);
+}
+</script>
+
+<style scoped>
+.sidebar { width:240px; padding:16px; background:var(--sidebar-bg); display:flex; flex-direction:column; gap:16px; box-shadow:2px 0 6px var(--shadow-color); transition: width .18s ease, transform .18s ease, opacity .18s ease; flex: 0 0 240px; position:relative; }
+.icon-btn, .hamburger, .theme-toggle, .avatar-btn { color: var(--icon-fg); background: var(--icon-bg); border-color: var(--icon-border); }
+.top { display:flex; align-items:center; gap:8px; }
+.top-left { display:flex; align-items:center; }
+.top-right { margin-left:auto; display:flex; align-items:center; }
+.logo { margin:0; }
+.hamburger { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; margin-right:8px; border-radius:8px; background:var(--input-bg); border:1px solid var(--input-border); cursor:pointer; }
+.sidebar-collapsed { width:0 !important; padding:0 !important; overflow:hidden; opacity:0; pointer-events:none; }
+.sidebar.mobile-open { transform: translateX(0); position:fixed; left:0; top:0; bottom:0; z-index:30; }
+.sidebar-bottom { margin-top:auto; display:flex; justify-content:space-between; align-items:center; }
+.avatar-area { display:flex; gap:8px; align-items:center; }
+.avatar-btn { width:40px; height:40px; border-radius:50%; overflow:hidden; border:none; display:inline-flex; align-items:center; justify-content:center; background:var(--button-bg); color:#fff; }
+.user-menu { position:absolute; bottom:56px; left:0; background:var(--sidebar-bg); border:1px solid var(--input-border); padding:8px; border-radius:8px; min-width:160px; box-shadow:0 6px 18px rgba(0,0,0,0.12); }
+
+@media (max-width: 768px) {
+  .sidebar { position:fixed; left:-100vw; top:0; bottom:0; height:100vh; width:80vw; transform:translateX(-100%); }
+  .sidebar.mobile-open { transform:translateX(0); left:0; }
+}
+.icon-btn, .hamburger, .theme-toggle, .avatar-btn { /* ensure consistent sizing */ border:1px solid var(--icon-border); }
+</style>
diff --git a/frontend/src/views/ChatView.vue b/frontend/src/views/ChatView.vue
index 001c0ba..1782c6f 100644
--- a/frontend/src/views/ChatView.vue
+++ b/frontend/src/views/ChatView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="chat-view">
-    <div class="conv-meta" v-if="conversationId">当前会话: {{ conversationId }}</div>
+  <!-- conv-meta removed as per UI: hide current conversation id -->
       <div class="messages" ref="messagesEl">
         <template v-for="m in messages" :key="m.id">
       <div v-if="m.role==='system'" class="msg system">