wx/src/views/chat/ChatModeSelector.vue

<template>
  <div>
    <div 
      class="mode-selector-backdrop" 
      :class="{ visible: !settingsStore.sidebarCollapsed }"
      @click="settingsStore.toggleSidebar"
      v-if="isMobile"
    ></div>
    <div class="mode-selector" :class="{ 'collapsed': settingsStore.sidebarCollapsed }">
      <div class="mode-header">
        <div class="mode-title" v-if="!settingsStore.sidebarCollapsed">
          <img 
            src="/lgogo.svg" 
            alt="Logo" 
            class="lgoo-icon" 
          />
        </div>
        <div class="collapsed-logo" v-else>
          <img 
            src="/logo.svg" 
            alt="Collapsed Logo" 
            class="lgoo-icon-small" 
          />
        </div>
        <div v-if="!settingsStore.sidebarCollapsed" class="header-actions">
          <!-- <HistoryButton v-if="!settingsStore.sidebarCollapsed" :icon-only="true" /> -->
          <el-button 
            
            class="collapse-btn" 
            :icon="Fold"
            text 
            bg
            @click="settingsStore.toggleSidebar"
          />
        </div>
      </div>
      <div class="mode-list">
        <div
          v-for="mode in chatModes"
          :key="mode.id"
          :class="['mode-item', { active: chatStore.currentMode === mode.id }]"
          @click="selectMode(mode.id)"
        >
          <span class="emoji-icon">{{ mode.icon }}</span>
          <span v-if="!settingsStore.sidebarCollapsed" class="mode-name">{{ mode.name }}</span>
          <ModeSetting v-if="!settingsStore.sidebarCollapsed" @command="(cmd) => handleModeSettings(cmd, mode.id)">
            <el-dropdown-item command="edit">
              <el-icon><EditPen /></el-icon>
              编辑设置
            </el-dropdown-item>
            <el-dropdown-item command="reset">
              <el-icon><RefreshRight /></el-icon>
              重置设置
            </el-dropdown-item>
            <el-dropdown-item command="delete" divided>
              <el-icon><Delete /></el-icon>
              删除场景
            </el-dropdown-item>
          </ModeSetting>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useChatStore } from '@/store/chat'
import { useSettingsStore } from '@/store/settings'
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { Delete, EditPen, RefreshRight, Expand, Fold } from '@element-plus/icons-vue'
import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElButton, ElMessageBox } from 'element-plus'
import ModeSetting from '@/components/chat/ModeSetting.vue'
import HistoryButton from '@/components/chat/HistoryButton.vue'

const chatStore = useChatStore()
const settingsStore = useSettingsStore()

const chatModes = computed(() => {
  return Object.keys(chatStore.chatModes).map(key => ({
    id: key,
    name: chatStore.chatModes[key].name,
    icon: chatStore.chatModes[key].icon
  }))
})

// 获取当前模式下的历史会话
const currentModeHistory = computed(() => {
  return chatStore.conversations.filter(chat => chat.mode === chatStore.currentMode)
})

// 格式化会话标题
const formatChatTitle = (chat) => {
  // 使用第一条消息作为标题，如果没有则使用默认标题
  if (chat.messages && chat.messages.length > 0) {
    const firstMessage = chat.messages[0].question
    return firstMessage.length > 20 ? firstMessage.substring(0, 20) + '...' : firstMessage
  }
  return `会话 ${chat.conversationId.substring(0, 8)}`
}

const selectMode = (modeId) => {
  chatStore.setCurrentMode(modeId)
}

const handleHistorySelect = (conversationId) => {
  chatStore.switchConversation(conversationId)
}

const handleDelete = async (conversationId) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这个会话吗？删除后无法恢复。',
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    chatStore.deleteConversation(conversationId)
  } catch {
    // 用户取消删除
  }
}

const handleModeSettings = (command, modeId) => {
  switch (command) {
    case 'edit':
      // TODO: 实现编辑设置的逻辑
      console.log('编辑设置:', modeId)
      break
    case 'reset':
      // TODO: 实现重置设置的逻辑
      console.log('重置设置:', modeId)
      break
    case 'delete':
      // TODO: 实现删除场景的逻辑
      console.log('删除场景:', modeId)
      break
  }
}

const isMobile = ref(false)

const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
}

onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})
</script>

<style lang="scss" scoped>
$primary-color: #4CAF50;
$text-color: #333;
$text-color-dark: #fff;
$background-color: #F7F7F7;
$background-color-dark: #1e1e1e;
$border-color: #e0e0e0;
$border-color-dark: #333;
$hover-color: #f5f5f5;
$hover-color-dark: #2d2d2d;

.mode-selector {
  width: 240px;
  min-width: 240px;
  background: $background-color;
  border-right: 1px solid $border-color;
  height: 100%;
  padding: 0;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1000;

  &.collapsed {
    width: 64px;
    min-width: 64px;

    .mode-header {
      justify-content: center;
      padding: 0;
    }

    .mode-item {
      padding: 15px 0;
      justify-content: center;

      .mode-name {
        display: none;
      }

      .emoji-icon {
        font-size: 24px;
        width: 32px;
      }
    }
    
    .header-actions {
      width: 100%;
      justify-content: center;
    }
  }

  .mode-header {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    border-bottom: 1px solid #e5e5e5;
    
    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .mode-title {
      color: $text-color;
      font-size: 16px;
      font-weight: 500;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      justify-content: center;

      .lgoo-icon {
        vertical-align: middle;
        transition: all 0.3s ease;
        height: 36px;
        width: auto;
      }
    }

    .collapsed-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      
      .lgoo-icon-small {
        height: 36px;
        width: auto;
      }
    }

    .history-btn {
      font-size: 14px;
      height: 32px;
      padding: 4px 12px;
      color: $text-color;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 4px;
      
      &:hover {
        color: #07c160;
        background: rgba(7, 193, 96, 0.1);
      }

      :deep(.el-icon) {
        font-size: 16px;
      }
    }

    .collapse-btn {
      font-size: 14px;
      height: 32px;
      width: 32px;
      padding: 0;
      color: $text-color;
      transition: all 0.3s ease;
      border: none !important;
      background: transparent !important;
      
      &:hover {
        color: $primary-color;
        background: transparent !important;
      }

      &:focus {
        outline: none;
        box-shadow: none;
      }

      :deep(.el-icon) {
        font-size: 16px;
      }
    }
  }

  .mode-list {
    padding: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
  }

  .mode-item {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: $text-color;
    position: relative;

    &:hover {
      background: $hover-color;
      
      :deep(.setting-btn) {
        opacity: 1;
        transform: translateX(0);
      }
    }

    &.active {
      background: $primary-color;
      color: white;
    }

    .emoji-icon {
      font-size: 20px;
      width: 24px;
      height: 24px;
      text-align: center;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .mode-name {
      font-size: 14px;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    :deep(.mode-setting) {
      margin-left: auto;
    }
  }
}

:deep(.el-dropdown-menu__item) {
  font-size: 13px;
  padding: 8px 16px;
  line-height: 1.4;
  max-width: 300px;
  overflow-x: hidden;

  &:hover .delete-btn {
    opacity: 1;
    transform: translateX(0);
  }
}

:deep(.el-dropdown-menu) {
  min-width: 200px;
  max-width: 300px;
}

.history-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  position: relative;
  min-width: 0;
}

.history-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 24px;
  min-width: 0;
}

.delete-btn {
  position: absolute;
  right: -8px;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;
  height: 24px;
  width: 24px;
  padding: 0;
  color: #f56c6c;
  flex-shrink: 0;
  
  &:hover {
    color: #f56c6c;
    background-color: rgba(245, 108, 108, 0.1);
  }
  
  :deep(.el-icon) {
    font-size: 14px;
  }
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .mode-selector {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    z-index: 1000;

    &.collapsed {
      transform: translateX(-100%);
      width: 64px;
      min-width: 64px;

      .collapsed-logo {
        padding: 0 5px;
      }
    }

    &:not(.collapsed) {
      transform: translateX(0);
    }
  }

  .mode-selector-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;

    &.visible {
      opacity: 1;
      visibility: visible;
    }
  }
}

// @media (prefers-color-scheme: dark) {
//   .mode-selector {
//     background: $background-color-dark;
//     border-right-color: $border-color-dark;

//     .mode-title {
//       color: $text-color-dark;
//     }

//     .mode-item {
//       color: $text-color-dark;

//       &:hover {
//         background: $hover-color-dark;
//       }
//     }

//     .history-btn {
//       color: $text-color-dark;
      
//       &:hover {
//         color: $primary-color;
//         background: rgba($primary-color, 0.15);
//       }
//     }
//   }

//   .delete-btn {
//     &:hover {
//       background-color: rgba(245, 108, 108, 0.15);
//     }
//   }
// }
</style>