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="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-button type="primary" link size="small" @click="goToModelLibrary">
前往模型库 前往模型库
<el-icon class="ml-1"> <el-icon class="ml-1">

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

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