初始化

.gitignore

@@ -0,0 +1 @@
+node_modules

src/CustomerService.vue

@@ -98,8 +98,8 @@
             </div>
           </aside>
 
-          <main class="right-panel" v-if="!showChat">
-            <div class="agents-container" @wheel="handleWheel">
+          <main class="right-panel" v-if="!showChat" @wheel="handleWheel">
+            <div class="agents-container">
               <div class="agents-list">
                 <div
                   v-for="agent in paginatedAgents"
@@ -113,8 +113,6 @@
                   <div class="agent-name">{{ agent.name }}</div>
                 </div>
               </div>
-            </div>
-            <div class="agents-footer">
               <div class="pagination-dots" v-if="totalPages > 1">
                 <span
                   v-for="page in totalPages"
@@ -124,6 +122,8 @@
                   @click="currentPage = page - 1"
                 ></span>
               </div>
+            </div>
+            <div class="agents-footer">
               <el-button type="primary" round size="large" class="start-btn" @click="showChat = true">
                 开始对话
               </el-button>
@@ -232,9 +232,12 @@ const paginatedAgents = computed(() => {
 
 const handleWheel = (e) => {
   e.preventDefault()
-  if (e.deltaY > 0 && currentPage.value < totalPages.value - 1) {
+  // 支持垂直滚动（上下）和水平滚动（左右）
+  const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY
+
+  if (delta > 0 && currentPage.value < totalPages.value - 1) {
     currentPage.value++
-  } else if (e.deltaY < 0 && currentPage.value > 0) {
+  } else if (delta < 0 && currentPage.value > 0) {
     currentPage.value--
   }
 }
@@ -300,7 +303,7 @@ const handleWheel = (e) => {
   max-width: 1200px;
   border-radius: 24px !important;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
-  height: calc(100vh - 32px);
+  height: calc(100vh - 117px);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -405,6 +408,7 @@ const handleWheel = (e) => {
   height: 100%;
   overflow: hidden;
   min-width: 0;
+  position: relative;
 }
 
 .time-info {
@@ -422,18 +426,29 @@ const handleWheel = (e) => {
   align-items: center;
   padding-top: 36px;
   padding-bottom: 0;
-  overflow: hidden;
+  overflow: visible;
   min-height: 0;
+  position: relative;
+}
+
+.agents-container .pagination-dots {
+  position: absolute;
+  top: calc(36px + 220px + 16px + 220px + 24px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
 }
 
 .agents-footer {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 12px;
-  padding: 0 12px 0;
+  padding: 0;
   flex-shrink: 0;
-  margin-top: 16px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: calc(36px + 220px + 16px + 220px + 24px + 40px);
 }
 
 .agents-list {