1. 新增功能，实现可拖拽侧边栏功能

Author: git-hub-cc

vue/src/App.vue

@@ -7,11 +7,22 @@
         <AppSkeletonLoader />
       </div>
 
-      <div v-else class="app-container" :class="appContainerClasses">
+      <!-- ✅ MODIFICATION START: Bind dynamic style for sidebar width and a class for collapsed state -->
+      <div
+          v-else
+          class="app-container"
+          :class="appContainerClasses"
+          :style="{ '--sidebar-width': `${uiStore.sidebarWidth}px` }"
+      >
+        <!-- ✅ MODIFICATION END -->
         <aside class="sidebar-container">
           <ChatList />
         </aside>
 
+        <!-- ✅ MODIFICATION START: Add SidebarResizer component between sidebar and main content -->
+        <SidebarResizer />
+        <!-- ✅ MODIFICATION END -->
+
         <div class="main-content-wrapper">
           <main class="main-view-container">
             <ChatView v-if="chatStore.currentChatId" :key="chatStore.currentChatId" />
@@ -49,8 +60,6 @@
             v-if="uiStore.activeModal === 'locationPicker'"
             v-motion-pop
         />
-        <!-- --- [移除] --- -->
-        <!-- BindManualConnectionModal is no longer needed -->
         <ScreenshotGuideModal
             v-if="uiStore.activeModal === 'screenshotGuide'"
             v-motion-pop
@@ -63,8 +72,6 @@
             v-if="uiStore.activeModal === 'confirmation'"
             v-motion-pop
         />
-        <!-- --- [移除] --- -->
-        <!-- CommentModal is no longer a global modal -->
       </div>
     </Transition>
 
@@ -120,12 +127,13 @@ import WelcomeHeader from '@/components/ChatView/WelcomeHeader.vue';
 import FloatingCallWidget from '@/components/Shared/FloatingCallWidget.vue';
 import SettingsModalSkeleton from '@/components/Shared/SettingsModalSkeleton.vue';
 import MobileGlobalHeader from '@/components/Shared/MobileGlobalHeader.vue';
+// ✅ MODIFICATION START: Import the new resizer component
+import SidebarResizer from '@/components/Shared/SidebarResizer.vue';
+// ✅ MODIFICATION END
 
 const SettingsModal = defineAsyncComponent(() => import('@/components/Modals/SettingsModal.vue'));
 const NewContactModal = defineAsyncComponent(() => import('@/components/Modals/NewContactModal.vue'));
 const LocationPickerModal = defineAsyncComponent(() => import('@/components/Modals/LocationPickerModal.vue'));
-// --- [移除] ---
-// const BindManualConnectionModal = ...
 const ScreenshotEditor = defineAsyncComponent(() => import('@/components/Modals/ScreenshotEditor.vue'));
 const ScreenshotGuideModal = defineAsyncComponent(() => import('@/components/Modals/ScreenshotGuideModal.vue'));
 const IncomingCallModal = defineAsyncComponent(() => import('@/components/Modals/IncomingCallModal.vue'));
@@ -134,8 +142,6 @@ const MediaViewerModal = defineAsyncComponent(() => import('@/components/Modals/
 const LocationViewerModal = defineAsyncComponent(() => import('@/components/Modals/LocationViewerModal.vue'));
 const WorldMapModal = defineAsyncComponent(() => import('@/components/Modals/WorldMapModal.vue'));
 const ImageCropperModal = defineAsyncComponent(() => import('@/components/Modals/ImageCropperModal.vue'));
-// --- [移除] ---
-// const CommentModal = ... // No longer needed here
 
 const userStore = useUserStore();
 const chatStore = useChatStore();
@@ -147,9 +153,17 @@ const memoryStore = useMemoryStore();
 
 const globalAudioSink = ref(null);
 
+// ✅ MODIFICATION START: Define sidebar collapsed threshold and computed property
+const SIDEBAR_COLLAPSED_THRESHOLD = 80;
+const isSidebarCollapsed = computed(() => uiStore.sidebarWidth < SIDEBAR_COLLAPSED_THRESHOLD);
+// ✅ MODIFICATION END
+
 const appContainerClasses = computed(() => ({
   'details-panel-open': uiStore.isDetailsPanelOpen,
-  'chat-active': uiStore.isChatViewActiveOnMobile
+  'chat-active': uiStore.isChatViewActiveOnMobile,
+  // ✅ MODIFICATION START: Add collapsed class dynamically
+  'sidebar-collapsed': isSidebarCollapsed.value,
+  // ✅ MODIFICATION END
 }));
 
 const appRootClasses = computed(() => ({
@@ -178,8 +192,6 @@ onMounted(async () => {
     await memoryStore.init();
     callStore.setGlobalAudioElement(globalAudioSink.value);
     webrtcService.init(userStore.userId);
-    // --- [移除] ---
-    // eventBus.on('webrtc:manual-connection-ready', ...)
   } catch (error) {
     console.error("应用初始化失败:", error);
   } finally {
@@ -213,11 +225,9 @@ function handleBackButton() {
   } else if (uiStore.activeModal) {
     uiStore.hideModal();
     handled = true;
-    // ✅ MODIFICATION START: Add check for EmojiPicker
   } else if (uiStore.isEmojiPickerVisible) {
     uiStore.toggleEmojiPicker(false);
     handled = true;
-    // ✅ MODIFICATION END
   } else if (uiStore.isDetailsPanelOpen) {
     uiStore.toggleDetailsPanel(false);
     handled = true;
@@ -307,7 +317,18 @@ body {
   width: var(--sidebar-width);
   flex-shrink: 0;
   background-color: var(--color-background-panel);
+  /* ✅ MODIFICATION START: Add smooth transition for width changes */
+  transition: width 0.2s ease-out;
+  will-change: width;
+  /* ✅ MODIFICATION END */
 }
+
+/* ✅ MODIFICATION START: Disable transition during drag for "跟手" effect */
+body.is-resizing .sidebar-container {
+  transition: none;
+}
+/* ✅ MODIFICATION END */
+
 .details-panel-container {
   background-color: var(--color-background-panel);
   border-left: 1px solid var(--color-border);

vue/src/assets/styles/_base.css

@@ -28,6 +28,17 @@ body {
     transition: background-color 0.3s var(--transition-easing), color 0.3s var(--transition-easing);
 }
 
+/* --- ✅ MODIFICATION START: Global styles for resizing state --- */
+body.is-resizing {
+    cursor: ew-resize !important;
+    user-select: none !important;
+}
+body.is-resizing * {
+    /* Prevent iframes or other elements from capturing mouse events during drag */
+    pointer-events: none;
+}
+/* --- ✅ MODIFICATION END --- */
+
 /* --- Scrollbar Styling (Telegram Style) --- */
 ::-webkit-scrollbar {
     width: 6px;

vue/src/components/ChatList/ChatListItem.vue

@@ -1,16 +1,13 @@
 <template>
-  <!-- --- MODIFICATION START --- -->
   <div
       class="chat-list-item"
       :class="{ active: isActive, 'special-contact': item.isSpecial, [item.id]: item.isSpecial, 'highlight-new-message': isHighlighted }"
   >
-    <!-- --- [动画] START: 为头像添加悬浮效果 --- -->
     <Avatar :entity="item" :is-online="isOnline"
             v-motion
             :hovered="{ scale: 1.1 }"
             :tapped="{ scale: 0.9 }"
     />
-    <!-- --- [动画] END --- -->
     <div class="chat-info">
       <div class="info-top">
         <span class="name">{{ item.name }}</span>
@@ -25,9 +22,7 @@
 </template>
 
 <script setup>
-// --- MODIFICATION START ---
 import { computed, ref, watch } from 'vue';
-// --- MODIFICATION END ---
 import { useUserStore } from '@/stores/userStore';
 import Avatar from '@/components/Shared/Avatar.vue';
 import { formatDate } from '@/utils';
@@ -44,9 +39,7 @@ const props = defineProps({
 });
 
 const userStore = useUserStore();
-// --- MODIFICATION START ---
 const isHighlighted = ref(false);
-// --- MODIFICATION END ---
 
 const combinedStatus = computed(() => userStore.getContactCombinedStatus(props.item.id));
 
@@ -63,7 +56,6 @@ const unreadCount = computed(() => {
   return props.item.unread > 99 ? '99+' : props.item.unread;
 });
 
-// --- MODIFICATION START: Watch for new unread messages to trigger highlight animation ---
 watch(
     () => props.item.unread,
     (newUnread, oldUnread) => {
@@ -78,8 +70,6 @@ watch(
       }
     }
 );
-// --- MODIFICATION END ---
-
 </script>
 
 <style scoped>
@@ -88,17 +78,14 @@ watch(
   align-items: center;
   padding: var(--spacing-3) var(--spacing-4);
   cursor: pointer;
-  /* --- [动画] START: 优化过渡效果 --- */
   transition: background-color var(--transition-duration-normal) ease,
   transform var(--transition-duration-fast) var(--transition-easing);
-  /* --- [动画] END --- */
   height: 72px; /* Fixed height for virtual scroller */
   border-bottom: 1px solid var(--color-border);
   position: relative; /* For the highlight bar */
   overflow: hidden; /* Hide the highlight bar initially */
 }
 
-/* --- [动画] START: 新消息提醒动画 & 悬浮效果 --- */
 @keyframes highlight-bar {
   0% {
     transform: translateX(-100%);
@@ -136,10 +123,22 @@ watch(
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
 }
-/* --- [动画] END --- */
 
 .chat-list-item.active { background-color: var(--color-background-active); }
-.chat-info { flex-grow: 1; margin-left: var(--spacing-3); overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
+
+.chat-info {
+  flex-grow: 1;
+  margin-left: var(--spacing-3);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  /* ✅ MODIFICATION START: Add transition for smooth appearance */
+  transition: opacity 0.1s ease-out, transform 0.2s ease-out;
+  opacity: 1;
+  transform: translateX(0);
+  /* ✅ MODIFICATION END */
+}
 .info-top, .info-bottom { display: flex; justify-content: space-between; align-items: center; }
 .info-bottom { margin-top: 2px; }
 .name { font-weight: var(--font-weight-semibold); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; flex-grow: 1; }
@@ -148,4 +147,23 @@ watch(
 .timestamp { font-size: var(--font-size-xs); color: var(--color-text-secondary); flex-shrink: 0; margin-left: var(--spacing-2); }
 .preview { font-size: var(--font-size-sm); color: var(--color-text-secondary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; flex-grow: 1; line-height: 1.4; }
 .unread-badge { background-color: var(--color-brand-secondary); color: var(--color-text-on-brand); border-radius: var(--border-radius-pill); padding: 2px 8px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); min-width: 20px; text-align: center; flex-shrink: 0; margin-left: var(--spacing-2); }
+
+/* --- ✅ MODIFICATION START: Styles for the collapsed sidebar state --- */
+/*
+  Use `:deep()` to target the `.sidebar-collapsed` class which is applied on a parent component (`App.vue`).
+  This allows us to style this component based on a global layout state.
+*/
+:deep(.sidebar-collapsed) .chat-list-item {
+  justify-content: center; /* Center the avatar horizontally */
+  padding: var(--spacing-2) 0; /* Adjust padding for a centered look */
+}
+
+:deep(.sidebar-collapsed) .chat-list-item .chat-info {
+  /* Instead of `display: none`, use opacity and transform for a smoother transition */
+  opacity: 0;
+  transform: translateX(-10px);
+  pointer-events: none; /* Prevent interaction with hidden elements */
+  position: absolute; /* Take it out of the layout flow */
+}
+/* --- ✅ MODIFICATION END --- */
 </style>

vue/src/components/Shared/AnimatedSticker.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script setup>
-// --- ✅ MODIFICATION START ---
-import { ref, onMounted, onUnmounted, watch, defineExpose } from 'vue';
-// --- ✅ MODIFICATION END ---
+// ✅ MODIFICATION START: Removed defineExpose from import
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+// ✅ MODIFICATION END
 import lottie from 'lottie-web';
 import pako from 'pako';
 
@@ -14,7 +14,6 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  // ✅ MODIFICATION START: Add loop prop
   loop: {
     type: Boolean,
     default: false,
@@ -43,10 +42,8 @@ const loadAnimation = async () => {
       animationInstance = lottie.loadAnimation({
         container: lottieContainer.value,
         renderer: 'svg',
-        // ✅ MODIFICATION START: Use loop prop for loop and autoplay
         loop: props.loop,
         autoplay: props.loop,
-        // ✅ MODIFICATION END
         animationData: animationData,
       });
 
@@ -59,7 +56,7 @@ const loadAnimation = async () => {
   }
 };
 
-// --- ✅ MODIFICATION START: Expose control methods to parent component ---
+// Expose control methods to the parent component
 defineExpose({
   /**
    * Plays the animation from the beginning.
@@ -80,7 +77,6 @@ defineExpose({
     }
   }
 });
-// --- ✅ MODIFICATION END ---
 
 
 onMounted(() => {