From 6c7929bdc4c768835143a835a5313576f27f2bf3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=8B=E6=9D=B0?= <better_sj@126.com>
Date: Wed, 1 Oct 2025 14:25:15 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=96=B0=E5=88=B6=E4=BD=9C=E6=89=8B?=
 =?UTF-8?q?=E6=9C=BA=E7=AB=AF=E4=B8=8B=E6=8B=89=E9=80=89=E6=8B=A9=E6=A1=86?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/homePage.vue | 168 ++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 161 insertions(+), 7 deletions(-)

diff --git a/src/views/homePage.vue b/src/views/homePage.vue
index 1b8eb5f..7bd779b 100644
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@@ -100,13 +100,74 @@ const activeIndex = ref(
 
 // 手机端选择器的值，与activeTab保持同步
 const activeTabMobile = ref(activeTab.value);
+// 下拉菜单开关状态
+const isDropdownOpen = ref(false);
+
+// 模型选项数据
+const modelOptions = [
+  { 
+    label: "夺宝奇兵大模型", 
+    value: "AIchat", 
+    image: "https://d31zlh4on95l9h.cloudfront.net/images/0389f08c458c20b715be7acebf7a8eb2.png"
+  },
+  { 
+    label: "AI情绪大模型", 
+    value: "AiEmotion", 
+    image: "https://d31zlh4on95l9h.cloudfront.net/images/aed3597ea187c5af6c88d5a5c67fc9c1.png"
+  },
+  { 
+    label: "深度九大模型", 
+    value: "deepNine", 
+    image: "https://d31zlh4on95l9h.cloudfront.net/images/35bf808538183be0062e4647570a9abd.png"
+  }
+];
 
 // 监听activeTab变化，同步到activeTabMobile
 watch(activeTab, (newVal) => {
   activeTabMobile.value = newVal;
 });
 
-// 手机端选择器变化处理
+// 切换下拉菜单显示状态
+const toggleDropdown = () => {
+  isDropdownOpen.value = !isDropdownOpen.value;
+};
+
+// 选择选项
+const selectOption = (value) => {
+  activeTabMobile.value = value;
+  isDropdownOpen.value = false;
+  
+  const tabIndexMap = {
+    "AIchat": 0,
+    "AiEmotion": 1,
+    "deepNine": 2
+  };
+  setActiveTab(value, tabIndexMap[value]);
+};
+
+// 获取当前选中选项的标签
+const getSelectedOptionLabel = () => {
+  const option = modelOptions.find(opt => opt.value === activeTabMobile.value);
+  return option ? option.label : "请选择模型";
+};
+
+// 获取当前选中选项的图片
+const getSelectedOptionImage = () => {
+  const option = modelOptions.find(opt => opt.value === activeTabMobile.value);
+  return option ? option.image : "";
+};
+
+// 点击外部关闭下拉菜单
+onMounted(() => {
+  document.addEventListener('click', (e) => {
+    const container = document.querySelector('.custom-select-container');
+    if (container && !container.contains(e.target) && isDropdownOpen.value) {
+      isDropdownOpen.value = false;
+    }
+  });
+});
+
+// 手机端选择器变化处理（保留原函数以兼容其他地方可能的调用）
 const handleMobileTabChange = (value) => {
   const tabIndexMap = {
     "AIchat": 0,
@@ -1468,13 +1529,33 @@ onUnmounted(() => {
                 " @click="setActiveTab('deepNine', 2)" class="action-btn model-btn" alt="深度九大模型" />
             </template>
 
-            <!-- 手机端下拉选择 -->
+            <!-- 手机端下拉选择 - 自定义组件 -->
             <template v-else>
-              <el-select v-model="activeTabMobile" class="mobile-model-select" @change="handleMobileTabChange">
-                <el-option label="夺宝奇兵大模型" value="AIchat" />
-                <el-option label="AI情绪大模型" value="AiEmotion" />
-                <el-option label="深度九大模型" value="deepNine" />
-              </el-select>
+              <div class="custom-select-container">
+                <div class="custom-select-header" @click="toggleDropdown">
+                  <div class="select-option-with-image">
+                    <img :src="getSelectedOptionImage()" class="option-image" />
+                    <span>{{ getSelectedOptionLabel() }}</span>
+                  </div>
+                  <div class="dropdown-arrow" :class="{ 'arrow-up': isDropdownOpen }">
+                    <img src="https://d31zlh4on95l9h.cloudfront.net/images/5f96dfcbff643cbbcf0f2790dbb4e54a.png" style="width: 24px;height: 24px;object-fit: contain;" alt="箭头">
+                  </div>
+                </div>
+                <div class="custom-select-dropdown" v-if="isDropdownOpen">
+                  <div 
+                    v-for="option in modelOptions" 
+                    :key="option.value" 
+                    class="custom-select-option" 
+                    :class="{ 'option-selected': activeTabMobile === option.value }"
+                    @click="selectOption(option.value)"
+                  >
+                    <div class="select-option-with-image">
+                      <img :src="option.image" class="option-image" />
+                      <span>{{ option.label }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </template>
             <!-- <img v-if="
               getCurrentAudioStore().isVoiceEnabled &&
@@ -2908,4 +2989,77 @@ body {
   transform: translateY(-2px);
   box-shadow: 0 2px 8px rgba(78, 134, 254, 0.3);
 }
+
+/* 自定义下拉选择框样式 */
+.custom-select-container {
+  position: relative;
+  width: 100%;
+  margin-bottom: 10px;
+  font-size: 14px;
+  user-select: none;
+}
+
+.custom-select-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: #3549B9;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.dropdown-arrow {
+  transition: transform 0.3s ease;
+  display: flex;
+}
+
+.arrow-up {
+  transform: rotate(180deg);
+}
+
+.custom-select-dropdown {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  width: 100%;
+  max-height: 200px;
+  overflow-y: auto;
+  background: #3549B9;
+  border-radius: 4px;
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 100;
+  margin-bottom: 4px;
+  color: white;
+}
+
+.custom-select-option {
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.custom-select-option:hover {
+  background-color: #f5f7fa;
+}
+
+.option-selected {
+  background-color: #6A00FF;
+  color: white;
+  font-weight: 500;
+}
+
+.select-option-with-image {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.option-image {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
 </style>