xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 模型选择优化

Browse Source
This commit is contained in:
Gsh
2026-01-11 19:21:48 +08:00
parent 3a19c75ca1
commit 4090046946
2 changed files with 178 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Yi.Ai.Vue3/src/components/ModelSelect/index.vue
View File

@@ -234,7 +234,7 @@ function getWrapperClass(item: GetSessionListVO) {
>
<div class="model-list-container relative">
<!-- 右上角前往模型库按钮 -->
<div class="absolute right-0 top-0 z-10">
<div class="absolute right-0 top-1 z-10">
<el-button type="primary" link size="small" @click="goToModelLibrary">
前往模型库
<el-icon class="ml-1">

236
Yi.Ai.Vue3/src/components/ProductPackage/PackageTab.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { CircleCheck, Loading } from '@element-plus/icons-vue';
import { ArrowRight, Box, CircleCheck, Loading, Right, Service } from '@element-plus/icons-vue';
import { computed } from 'vue';
import { promotionConfig } from '@/config/constants.ts';
import { useUserStore } from '@/stores';
@@ -173,44 +173,47 @@ const selectedPackage = computed(() => {
<!-- 权益预览 -->
<div class="benefits-preview">
<!-- Token包累计充值优惠提示 -->
<div v-if="packageType === 'token'" class="recharge-tip-card">
<div class="tip-icon">
💝
</div>
<div class="tip-content">
<div class="tip-title">
累计充值优惠
<div class="cards-stack">
<!-- Token包累计充值优惠提示 -->
<div v-if="packageType === 'token'" class="recharge-tip-card">
<div class="tip-icon">
💝
</div>
<div class="tip-desc">
充值越多，优惠越多，长期使用更划算
<div class="tip-content">
<div class="tip-title">
累计充值优惠
</div>
<div class="tip-desc">
充值越多，优惠越多，长期使用更划算
</div>
</div>
</div>
</div>
<br>
<!-- 联系客服卡片 -->
<div class="contact-service-card">
<div style="flex: 1;">
<p style="color: #f97316;font-weight: 800;margin: 0 0 10px 0;">
{{ promotionConfig.rechargeDiscount }}
</p>
<p style="margin: 0 0 10px 0;color: #78350f;">
{{ promotionConfig.vipServiceTip }}
</p>
<!-- 联系客服卡片 -->
<div class="contact-service-card">
<div class="service-info">
<p class="discount-text">
{{ promotionConfig.rechargeDiscount }}
</p>
<p class="tip-text">
{{ promotionConfig.vipServiceTip }}
</p>
</div>
<el-button
type="success"
size="small"
class="contact-btn"
@click="contactService"
>
<el-icon><i-ep-service /></el-icon>
<el-icon class="mr-1">
<Service />
</el-icon>
联系客服
</el-button>
</div>
</div>
<br>
<div class="section-title">
<div class="section-title mt-4">
专属权益
</div>
<ul class="benefits-list">
@@ -224,12 +227,12 @@ const selectedPackage = computed(() => {
</ul>
<!-- 会员套餐显示模型库入口 -->
<div class="model-library-section">
<div v-if="packageType === 'member'" class="model-library-section">
<el-divider />
<div class="model-library-card">
<div class="card-icon">
<el-icon :size="32">
<i-ep-box />
<Box />
</el-icon>
</div>
<div class="card-content">
@@ -247,7 +250,7 @@ const selectedPackage = computed(() => {
>
前往模型库
<el-icon class="ml-1">
<i-ep-arrow-right />
<Right />
</el-icon>
</el-button>
</div>
@@ -388,19 +391,23 @@ const selectedPackage = computed(() => {
<!-- 联系客服卡片 -->
<div class="contact-service-card">
<p style="color: #f97316;font-weight: 800;margin: 0 0 10px 0;">
{{ promotionConfig.rechargeDiscount }}
</p>
<p style="margin: 0 0 10px 0;color: #78350f;">
{{ promotionConfig.vipServiceTip }}
</p>
<div class="service-info">
<p class="discount-text">
{{ promotionConfig.rechargeDiscount }}
</p>
<p class="tip-text">
{{ promotionConfig.vipServiceTip }}
</p>
</div>
<el-button
type="success"
size="small"
block
class="contact-btn"
@click="contactService"
>
<el-icon><i-ep-service /></el-icon>
<el-icon class="mr-1">
<Service />
</el-icon>
联系客服
</el-button>
</div>
@@ -490,7 +497,7 @@ const selectedPackage = computed(() => {
<div class="model-library-card-mobile">
<div class="card-header-mobile">
<el-icon :size="24">
<i-ep-box />
<Box />
</el-icon>
<h4 class="card-title-mobile">
查看支持的模型
@@ -507,7 +514,7 @@ const selectedPackage = computed(() => {
>
前往模型库
<el-icon class="ml-1">
<i-ep-arrow-right />
<ArrowRight />
</el-icon>
</el-button>
</div>
@@ -815,39 +822,98 @@ const selectedPackage = computed(() => {
}
}
/* 移动端卡片堆叠容器 */
.cards-stack {
display: flex;
flex-direction: column;
gap: 12px;
}
// 累计充值优惠提示卡片样式
.recharge-tip-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
border-radius: 8px;
border: 1px solid #fbbf24;
margin-top: 0;
gap: 12px;
padding: 12px 16px;
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border-radius: 12px;
border: 1px solid #fcd34d;
box-shadow: 0 2px 6px rgba(251, 191, 36, 0.1);
transition: all 0.3s ease;
&:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
}
.tip-icon {
font-size: 22px;
font-size: 24px;
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}
.tip-content {
flex: 1;
.tip-title {
font-size: 13px;
font-size: 14px;
font-weight: 700;
color: #78350f;
margin-bottom: 3px;
color: #92400e;
margin-bottom: 4px;
}
.tip-desc {
font-size: 11px;
color: #92400e;
font-size: 12px;
color: #b45309;
line-height: 1.4;
}
}
}
/* 联系客服卡片优化 */
.contact-service-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border-radius: 12px;
border: 1px solid #6ee7b7;
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.1);
margin-top: 0; /* 由父容器控制间距 */
.service-info {
flex: 1;
margin-right: 12px;
.discount-text {
color: #047857;
font-weight: 800;
font-size: 14px;
margin: 0 0 4px 0;
}
.tip-text {
margin: 0;
color: #065f46;
font-size: 12px;
line-height: 1.4;
}
}
.contact-btn {
flex-shrink: 0;
background-color: #10b981;
border-color: #10b981;
font-weight: 600;
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
&:hover {
background-color: #059669;
border-color: #059669;
}
}
}
.benefits-preview {
background-color: #f9fafb;
border-radius: 8px;
@@ -1275,29 +1341,81 @@ const selectedPackage = computed(() => {
align-items: center;
gap: 12px;
padding: 12px 16px;
background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
border-radius: 8px;
border: 1px solid #fbbf24;
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border-radius: 12px;
border: 1px solid #fcd34d;
box-shadow: 0 2px 6px rgba(251, 191, 36, 0.1);
margin-top: 16px;
transition: all 0.3s ease;
&:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
}
.tip-icon {
font-size: 28px;
font-size: 24px;
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}
.tip-content {
flex: 1;
.tip-title {
font-size: 15px;
font-size: 14px;
font-weight: 700;
color: #78350f;
color: #92400e;
margin-bottom: 4px;
}
.tip-desc {
font-size: 13px;
color: #92400e;
line-height: 1.5;
font-size: 12px;
color: #b45309;
line-height: 1.4;
}
}
}
.contact-service-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border-radius: 12px;
border: 1px solid #6ee7b7;
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.1);
margin-top: 12px;
.service-info {
flex: 1;
margin-right: 12px;
.discount-text {
color: #047857;
font-weight: 800;
font-size: 14px;
margin: 0 0 4px 0;
}
.tip-text {
margin: 0;
color: #065f46;
font-size: 12px;
line-height: 1.4;
}
}
.contact-btn {
flex-shrink: 0;
background-color: #10b981;
border-color: #10b981;
font-weight: 600;
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
&:hover {
background-color: #059669;
border-color: #059669;
}
}
}