Yi.Framework/Yi.Ai.Vue3/src/components/ModelSelect/index.vue

<!-- 切换模型 -->
<script setup lang="ts">
import type { GetSessionListVO } from '@/api/model/types';
import { Lock } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import Popover from '@/components/Popover/index.vue';

import SvgIcon from '@/components/SvgIcon/index.vue';
import { useUserStore } from '@/stores';
import { useModelStore } from '@/stores/modules/model';
import { showProductPackage } from '@/utils/product-package.ts';
import { isUserVip } from '@/utils/user';

const router = useRouter();

const userStore = useUserStore();
const modelStore = useModelStore();
// 检查模型是否可用
function isModelAvailable(item: GetSessionListVO) {
  return isUserVip() || item.modelId?.includes('DeepSeek-R1-0528') || userStore.userInfo?.user?.userName === 'cc';
}

onMounted(async () => {
  await modelStore.requestModelList();
  // 设置默认模型
  if (
    modelStore.modelList.length > 0
    && (!modelStore.currentModelInfo || !modelStore.currentModelInfo.modelId)
  ) {
    modelStore.setCurrentModelInfo(modelStore.modelList[0]);
  }
});

const currentModelName = computed(
  () => modelStore.currentModelInfo && modelStore.currentModelInfo.modelName,
);
const popoverList = computed(() => modelStore.modelList);

/* 弹出面板 开始 */
const popoverStyle = ref({
  width: '200px',
  padding: '4px',
  height: 'fit-content',
  background: 'var(--el-bg-color, #fff)',
  border: '1px solid var(--el-border-color-light)',
  borderRadius: '8px',
  boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
});
const popoverRef = ref();

// 显示
async function showPopover() {
  // 获取最新的模型列表
  await modelStore.requestModelList();
}

// 点击
// 处理模型点击
function handleModelClick(item: GetSessionListVO) {
  console.log('modelStore.modelList', modelStore.modelList);
  if (!isModelAvailable(item)) {
    ElMessageBox.confirm(
      `
    <div class="text-center leading-relaxed">
      <h3 class="text-lg font-bold mb-3">${isUserVip() ? 'YiXinAI-VIP 会员' : '成为 YiXinAI-VIP'}</h3>
      <p class="mb-2">
        ${
          isUserVip()
            ? '您已是尊贵会员，享受全部 AI 模型与专属服务。感谢支持！'
            : '解锁所有 AI 模型，无限加速，专属客服，尽享尊贵体验。'
        }
      </p>
      ${
        isUserVip()
          ? '<p class="text-sm text-gray-500">您可随时访问产品页面查看更多特权内容。</p>'
          : '<p class="text-sm text-gray-500">请点击右上角登录按钮，登录后进行购买！</p>'
      }
    </div>
    `,
      isUserVip() ? '会员状态' : '会员尊享',
      {
        confirmButtonText: '产品查看',
        cancelButtonText: '关闭',
        dangerouslyUseHTMLString: true,
        type: 'info',
        center: true,
        roundButton: true,
      },
    )
      .then(() => {
        showProductPackage();

        // router.push({
        //   name: 'products', // 使用命名路由
        //   query: { from: isUserVip() ? 'vip' : 'user' }, // 可选：添加来源标识
        // });
      })
      .catch(() => {
        // 点击右上角关闭或“关闭”按钮，不执行任何操作
      });
  }

  modelStore.setCurrentModelInfo(item);
  popoverRef.value?.hide?.();
}
</script>

<template>
  <div class="model-select">
    <Popover
      ref="popoverRef"
      placement="top-start"
      :offset="[4, 0]"
      popover-class="popover-content"
      :popover-style="popoverStyle"
      trigger="clickTarget"
      @show="showPopover"
    >
      <!-- 触发元素插槽 -->
      <template #trigger>
        <div
          class="model-select-box select-none flex items-center gap-4px p-10px rounded-10px cursor-pointer font-size-12px border-[rgba()]"
        >
          <div class="model-select-box-icon">
            <SvgIcon name="models" size="12" />
          </div>
          <div class="model-select-box-text font-size-12px">
            {{ currentModelName }}
          </div>
        </div>
      </template>

      <div class="popover-content-box">
        <div
          v-for="item in popoverList"
          :key="item.id"
          class="popover-content-box-items w-full rounded-8px select-none transition-all transition-duration-300 flex items-center hover:cursor-pointer hover:bg-[rgba(0,0,0,.04)]"
        >
          <Popover
            trigger-class="popover-trigger-item-text"
            popover-class="rounded-tooltip"
            placement="right"
            trigger="hover"
            :offset="[12, 0]"
          >
            <template #trigger>
              <div
                class="popover-content-box-item p-4px font-size-12px text-overflow line-height-16px relative"
                :class="[
                  { 'bg-[rgba(0,0,0,.04)] is-select': item.modelName === currentModelName },
                  { 'cursor-not-allowed opacity-60': !isModelAvailable(item) },
                ]"
                @click="handleModelClick(item)"
              >
                {{ item.modelName }}
                <!-- VIP锁定图标 -->
                <el-icon
                  v-if="!isModelAvailable(item)"
                  class="absolute right-1 top-1/2 transform -translate-y-1/2"
                >
                  <Lock />
                </el-icon>
              </div>
            </template>
            <div
              class="popover-content-box-item-text text-wrap max-w-200px rounded-lg p-8px font-size-12px line-height-tight"
            >
              {{ item.remark }}
            </div>
          </Popover>
        </div>
      </div>
    </Popover>
  </div>
</template>

<style scoped lang="scss">
.model-select-box {
  color: var(--el-color-primary, #409eff);
  background: var(--el-color-primary-light-9, rgb(235.9 245.3 255));
  border: 1px solid var(--el-color-primary, #409eff);
  border-radius: 10px;
}
.popover-content-box-item.is-select {
  font-weight: 700;
  color: var(--el-color-primary, #409eff);
}
.popover-content-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 200px;
  overflow: hidden auto;
  .popover-content-box-items {
    :deep() {
      .popover-trigger-item-text {
        width: 100%;
      }
    }
  }
  .popover-content-box-item-text {
    color: white;
    background-color: black;
  }

  // 滚动条样式
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-track {
    background: #f5f5f5;
  }
  &::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 4px;
  }
}
</style>