feat: 个人中心新增尊享服务、模型列表区分
This commit is contained in:
Gsh
@@ -1,10 +1,8 @@
|
||||
<!-- 切换模型 -->
|
||||
<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';
|
||||
@@ -12,7 +10,6 @@ import { showProductPackage } from '@/utils/product-package.ts';
|
||||
import { isUserVip } from '@/utils/user';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const userStore = useUserStore();
|
||||
const modelStore = useModelStore();
|
||||
// 检查模型是否可用
|
||||
@@ -22,21 +19,14 @@ function isModelAvailable(item: GetSessionListVO) {
|
||||
|
||||
onMounted(async () => {
|
||||
await modelStore.requestModelList();
|
||||
// 设置默认模型
|
||||
if (
|
||||
modelStore.modelList.length > 0
|
||||
&& (!modelStore.currentModelInfo || !modelStore.currentModelInfo.modelId)
|
||||
) {
|
||||
if (modelStore.modelList.length > 0 && !modelStore.currentModelInfo?.modelId) {
|
||||
modelStore.setCurrentModelInfo(modelStore.modelList[0]);
|
||||
}
|
||||
});
|
||||
|
||||
const currentModelName = computed(
|
||||
() => modelStore.currentModelInfo && modelStore.currentModelInfo.modelName,
|
||||
);
|
||||
const currentModelName = computed(() => modelStore.currentModelInfo?.modelName);
|
||||
const popoverList = computed(() => modelStore.modelList);
|
||||
|
||||
/* 弹出面板 开始 */
|
||||
const popoverStyle = ref({
|
||||
width: '200px',
|
||||
padding: '4px',
|
||||
@@ -44,39 +34,33 @@ const popoverStyle = ref({
|
||||
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)',
|
||||
boxShadow: '0 2px 12px 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()
|
||||
<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>
|
||||
`,
|
||||
: '解锁所有 AI 模型，无限加速，专属客服，尽享尊贵体验。'}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
${isUserVip() ? '您可随时访问产品页面查看更多特权内容。' : '请点击右上角登录按钮，登录后进行购买！'}
|
||||
</p>
|
||||
</div>
|
||||
`,
|
||||
isUserVip() ? '会员状态' : '会员尊享',
|
||||
{
|
||||
confirmButtonText: '产品查看',
|
||||
@@ -86,23 +70,63 @@ function handleModelClick(item: GetSessionListVO) {
|
||||
center: true,
|
||||
roundButton: true,
|
||||
},
|
||||
)
|
||||
.then(() => {
|
||||
showProductPackage();
|
||||
|
||||
// router.push({
|
||||
// name: 'products', // 使用命名路由
|
||||
// query: { from: isUserVip() ? 'vip' : 'user' }, // 可选：添加来源标识
|
||||
// });
|
||||
})
|
||||
.catch(() => {
|
||||
// 点击右上角关闭或“关闭”按钮，不执行任何操作
|
||||
});
|
||||
).then(() => showProductPackage());
|
||||
}
|
||||
|
||||
modelStore.setCurrentModelInfo(item);
|
||||
popoverRef.value?.hide?.();
|
||||
}
|
||||
|
||||
/* -------------------------------
|
||||
模型样式规则
|
||||
规则1：普通灰色（免费模型）
|
||||
规则2：金色光泽（VIP/付费）
|
||||
规则3：彩色流光（尊享/高级）
|
||||
-------------------------------- */
|
||||
function getModelStyleClass(item: GetSessionListVO) {
|
||||
const name = item.modelName.toLowerCase();
|
||||
|
||||
// 规则3：彩色流光
|
||||
if (name.includes('claude') || name.includes('platinum')) {
|
||||
return `
|
||||
text-transparent bg-clip-text
|
||||
bg-[linear-gradient(45deg,#ff0000,#ff8000,#ffff00,#00ff00,#00ffff,#0000ff,#8000ff,#ff0080)]
|
||||
bg-[length:400%_400%] animate-gradientFlow
|
||||
`;
|
||||
}
|
||||
|
||||
// 规则2：普通灰
|
||||
if (name.includes('deepseek-r1')) {
|
||||
return 'text-gray-700';
|
||||
}
|
||||
|
||||
// 规则1：金色光泽
|
||||
return `
|
||||
text-[#B38728] font-semibold relative overflow-hidden
|
||||
before:content-[''] before:absolute before:-inset-2 before:-z-10
|
||||
before:animate-goldShine
|
||||
`;
|
||||
// 金色背景
|
||||
// before:bg-[linear-gradient(135deg,#BF953F,#FCF6BA,#B38728,#FBF5B7,#AA771C)]
|
||||
}
|
||||
|
||||
/* -------------------------------
|
||||
外层卡片样式（选中态 + hover 动效）
|
||||
-------------------------------- */
|
||||
function getWrapperClass(item: GetSessionListVO) {
|
||||
const isSelected = item.modelName === currentModelName.value;
|
||||
const available = isModelAvailable(item);
|
||||
|
||||
return [
|
||||
'p-2 rounded-md text-sm transition-all duration-300 relative select-none flex items-center justify-between',
|
||||
available
|
||||
? 'hover:scale-[1.03] hover:shadow-[0_0_8px_rgba(0,0,0,0.1)] hover:border-gray-300'
|
||||
: 'opacity-60 cursor-not-allowed',
|
||||
isSelected
|
||||
? 'border-2 border-blue-700 shadow-[0_0_10px_rgba(29,78,216,0.6)]'
|
||||
: 'border border-transparent cursor-pointer',
|
||||
];
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -111,108 +135,68 @@ function handleModelClick(item: GetSessionListVO) {
|
||||
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()]"
|
||||
class="flex items-center gap-1 p-2 rounded-md border border-blue-500 text-blue-600 cursor-pointer select-none"
|
||||
>
|
||||
<div class="model-select-box-icon">
|
||||
<SvgIcon name="models" size="12" />
|
||||
</div>
|
||||
<div class="model-select-box-text font-size-12px">
|
||||
{{ currentModelName }}
|
||||
</div>
|
||||
<SvgIcon name="models" size="12" />
|
||||
<span class="text-sm font-medium">{{ currentModelName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="popover-content-box">
|
||||
<div class="flex flex-col gap-1 max-h-52 overflow-y-auto p-1">
|
||||
<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)]"
|
||||
:class="getWrapperClass(item)"
|
||||
@click="handleModelClick(item)"
|
||||
>
|
||||
<Popover
|
||||
trigger-class="popover-trigger-item-text"
|
||||
popover-class="rounded-tooltip"
|
||||
placement="right"
|
||||
trigger="hover"
|
||||
:offset="[12, 0]"
|
||||
<span :class="getModelStyleClass(item)">
|
||||
{{ item.modelName }}
|
||||
</span>
|
||||
|
||||
<el-icon
|
||||
v-if="!isModelAvailable(item)"
|
||||
class="absolute right-1 top-1/2 -translate-y-1/2 text-gray-400"
|
||||
>
|
||||
<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>
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</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;
|
||||
<style scoped>
|
||||
/* 彩色流光动画 */
|
||||
@keyframes gradientFlow {
|
||||
0%, 100% { background-position: 0 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
.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;
|
||||
}
|
||||
/* 金色光泽动画 */
|
||||
@keyframes goldShine {
|
||||
0% { transform: translateX(-100%) translateY(-100%); }
|
||||
100% { transform: translateX(100%) translateY(100%); }
|
||||
}
|
||||
|
||||
/* 柔光 hover 动效 */
|
||||
@keyframes glowPulse {
|
||||
0%, 100% { box-shadow: 0 0 6px rgba(37,99,235,0.2); }
|
||||
50% { box-shadow: 0 0 10px rgba(37,99,235,0.5); }
|
||||
}
|
||||
|
||||
.animate-gradientFlow {
|
||||
animation: gradientFlow 3s ease infinite;
|
||||
}
|
||||
.animate-goldShine {
|
||||
animation: goldShine 4s linear infinite;
|
||||
}
|
||||
.animate-glowPulse {
|
||||
animation: glowPulse 2s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user