fix: 前端联系我们、购买等优化
This commit is contained in:
Gsh
Binary file not shown.
@@ -12,6 +12,8 @@ export interface GetSessionListVO {
|
||||
apiKey?: string;
|
||||
remark?: string;
|
||||
modelId?: string;
|
||||
isFree?: boolean; // 是否为免费模型
|
||||
isPremiumPackage?: boolean; // 是否为尊享套餐模型
|
||||
}
|
||||
|
||||
// 模型类型枚举
|
||||
|
||||
BIN
Yi.Ai.Vue3/src/assets/images/taobao-qr.png
Normal file
BIN
Yi.Ai.Vue3/src/assets/images/taobao-qr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
BIN
Yi.Ai.Vue3/src/assets/images/wx-group-qr.jpg
Normal file
BIN
Yi.Ai.Vue3/src/assets/images/wx-group-qr.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
583
Yi.Ai.Vue3/src/components/ContactUs/index.vue
Normal file
583
Yi.Ai.Vue3/src/components/ContactUs/index.vue
Normal file
@@ -0,0 +1,583 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import { ElMessage, ElImageViewer } from 'element-plus';
|
||||
import { contactConfig } from '@/config/constants';
|
||||
|
||||
export interface ContactType {
|
||||
customerService?: boolean; // 客服微信和二维码
|
||||
communityGroup?: boolean; // 交流群二维码
|
||||
afterSalesGroup?: boolean; // 售后群二维码
|
||||
other?: boolean; // 其他
|
||||
}
|
||||
|
||||
export type ContactScenario = 'regular' | 'afterSales' | 'all' | 'custom';
|
||||
|
||||
interface Props {
|
||||
scenario?: ContactScenario; // 场景类型
|
||||
customTypes?: ContactType; // 自定义展示类型
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
scenario: 'regular',
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const visible = ref(true);
|
||||
const showImageViewer = ref(false);
|
||||
const currentImageUrl = ref('');
|
||||
const isMobile = ref(false);
|
||||
|
||||
// 检测移动端
|
||||
function checkMobile() {
|
||||
isMobile.value = window.innerWidth < 768;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', checkMobile);
|
||||
});
|
||||
|
||||
// 根据场景计算需要展示的联系方式
|
||||
const contactTypes = computed<ContactType>(() => {
|
||||
if (props.scenario === 'custom' && props.customTypes) {
|
||||
return props.customTypes;
|
||||
}
|
||||
|
||||
switch (props.scenario) {
|
||||
case 'regular':
|
||||
return {
|
||||
customerService: true,
|
||||
communityGroup: true,
|
||||
afterSalesGroup: false,
|
||||
other: false,
|
||||
};
|
||||
case 'afterSales':
|
||||
return {
|
||||
customerService: true,
|
||||
communityGroup: false,
|
||||
afterSalesGroup: true,
|
||||
other: false,
|
||||
};
|
||||
case 'all':
|
||||
return {
|
||||
customerService: true,
|
||||
communityGroup: true,
|
||||
afterSalesGroup: true,
|
||||
other: true,
|
||||
};
|
||||
default:
|
||||
return {
|
||||
customerService: true,
|
||||
communityGroup: true,
|
||||
afterSalesGroup: false,
|
||||
other: false,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
function close() {
|
||||
visible.value = false;
|
||||
emit('close');
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
emit('close');
|
||||
}
|
||||
|
||||
// 复制微信号
|
||||
function copyWechatId() {
|
||||
navigator.clipboard.writeText(contactConfig.wechatId).then(() => {
|
||||
ElMessage.success('微信号已复制');
|
||||
}).catch(() => {
|
||||
ElMessage.error('复制失败，请手动复制');
|
||||
});
|
||||
}
|
||||
|
||||
// 查看大图
|
||||
function viewImage(imageUrl: string) {
|
||||
currentImageUrl.value = imageUrl;
|
||||
showImageViewer.value = true;
|
||||
}
|
||||
|
||||
// 关闭图片查看器
|
||||
function closeImageViewer() {
|
||||
showImageViewer.value = false;
|
||||
currentImageUrl.value = '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
title="联系我们"
|
||||
:width="isMobile ? '95%' : '600px'"
|
||||
:fullscreen="isMobile"
|
||||
:show-close="true"
|
||||
destroy-on-close
|
||||
class="contact-us-dialog"
|
||||
@close="onClose"
|
||||
>
|
||||
<div class="contact-us-content">
|
||||
<!-- 客服微信 -->
|
||||
<div v-if="contactTypes.customerService" class="contact-section">
|
||||
<div class="section-header">
|
||||
<el-icon class="section-icon">
|
||||
<i-ep-user />
|
||||
</el-icon>
|
||||
<h3 class="section-title">
|
||||
客服微信
|
||||
</h3>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="info-text">
|
||||
<p class="info-label">
|
||||
微信号
|
||||
</p>
|
||||
<p class="info-value">
|
||||
{{ contactConfig.wechatId }}
|
||||
</p>
|
||||
<el-button size="small" type="primary" @click="copyWechatId">
|
||||
复制微信号
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="contactConfig.images.customerService" class="qr-code">
|
||||
<img
|
||||
:src="contactConfig.images.customerService"
|
||||
alt="客服微信二维码"
|
||||
class="qr-image"
|
||||
@click="viewImage(contactConfig.images.customerService)"
|
||||
>
|
||||
<p class="qr-label">
|
||||
扫码添加客服（点击放大）
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 交流群 -->
|
||||
<div v-if="contactTypes.communityGroup" class="contact-section">
|
||||
<div class="section-header">
|
||||
<el-icon class="section-icon">
|
||||
<i-ep-chat-dot-round />
|
||||
</el-icon>
|
||||
<h3 class="section-title">
|
||||
交流群
|
||||
</h3>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="info-text">
|
||||
<p class="info-desc">
|
||||
加入我们的交流群，与其他用户一起探讨AI应用，获取最新产品动态
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="contactConfig.images.communityGroup" class="qr-code">
|
||||
<img
|
||||
:src="contactConfig.images.communityGroup"
|
||||
alt="交流群二维码"
|
||||
class="qr-image"
|
||||
@click="viewImage(contactConfig.images.communityGroup)"
|
||||
>
|
||||
<p class="qr-label">
|
||||
扫码加入交流群（点击放大）
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 售后群 -->
|
||||
<div v-if="contactTypes.afterSalesGroup" class="contact-section">
|
||||
<div class="section-header">
|
||||
<el-icon class="section-icon">
|
||||
<i-ep-service />
|
||||
</el-icon>
|
||||
<h3 class="section-title">
|
||||
VIP售后服务群
|
||||
</h3>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="info-text">
|
||||
<p class="info-desc">
|
||||
<el-tag type="warning" size="small">
|
||||
VIP专享
|
||||
</el-tag>
|
||||
充值后，加客服微信回复账号名，可专享VIP售后服务
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="contactConfig.images.afterSalesGroup" class="qr-code">
|
||||
<img
|
||||
:src="contactConfig.images.afterSalesGroup"
|
||||
alt="售后群二维码"
|
||||
class="qr-image"
|
||||
@click="viewImage(contactConfig.images.afterSalesGroup)"
|
||||
>
|
||||
<p class="qr-label">
|
||||
扫码加入售后群（点击放大）
|
||||
</p>
|
||||
</div>
|
||||
<div v-else class="qr-code-empty">
|
||||
<el-alert
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
>
|
||||
<template #title>
|
||||
<p>请联系客服微信 <strong>{{ contactConfig.wechatId }}</strong> 加入售后群</p>
|
||||
</template>
|
||||
</el-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 温馨提示 -->
|
||||
<el-alert
|
||||
class="tips-alert"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
>
|
||||
<template #title>
|
||||
<div class="tips-content">
|
||||
<p>温馨提示：</p>
|
||||
<ul>
|
||||
<li>添加客服时请备注您的账号名称，以便更好地为您服务</li>
|
||||
<li>工作时间：9:00-22:00，我们会尽快回复您的消息</li>
|
||||
<li>VIP用户可享受专属售后服务，响应更快</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</el-alert>
|
||||
</div>
|
||||
|
||||
<!-- 图片查看器 -->
|
||||
<el-image-viewer
|
||||
v-if="showImageViewer"
|
||||
:url-list="[currentImageUrl]"
|
||||
:hide-on-click-modal="true"
|
||||
@close="closeImageViewer"
|
||||
/>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.contact-us-dialog {
|
||||
:deep(.el-dialog__header) {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
|
||||
.el-dialog__title {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn .el-dialog__close {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
|
||||
&:hover {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-us-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
background: #fafbfc;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e8ecf0;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid #e8ecf0;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
font-size: 24px;
|
||||
color: #667eea;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.info-desc {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.qr-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #e8ecf0;
|
||||
padding: 4px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qr-label {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tips-alert {
|
||||
border-radius: 8px;
|
||||
background: #f0f9ff;
|
||||
border-color: #bae6fd;
|
||||
|
||||
.tips-content p {
|
||||
margin: 0 0 8px 0;
|
||||
font-weight: 600;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.tips-content ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.tips-content li {
|
||||
margin: 4px 0;
|
||||
font-size: 13px;
|
||||
color: #0c4a6e;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media (max-width: 768px) {
|
||||
.contact-us-dialog {
|
||||
:deep(.el-dialog) {
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__header) {
|
||||
padding: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 12px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-us-content {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.section-icon {
|
||||
font-size: 20px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
|
||||
.info-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info-desc {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #f9fafb;
|
||||
border-radius: 8px;
|
||||
|
||||
.qr-image {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.qr-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-code-empty {
|
||||
width: 100%;
|
||||
|
||||
.el-alert {
|
||||
:deep(.el-alert__content) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips-alert {
|
||||
:deep(.el-alert__content) {
|
||||
.tips-content {
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 12px;
|
||||
margin: 3px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏手机适配 */
|
||||
@media (max-width: 480px) {
|
||||
.contact-us-dialog {
|
||||
:deep(.el-dialog__header) {
|
||||
padding: 14px;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.qr-code .qr-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -12,7 +12,7 @@ import { isUserVip } from '@/utils/user';
|
||||
const modelStore = useModelStore();
|
||||
// 检查模型是否可用
|
||||
function isModelAvailable(item: GetSessionListVO) {
|
||||
return isUserVip() || item.modelId?.includes('DeepSeek-R1-0528');
|
||||
return isUserVip() || item.isFree;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -116,8 +116,8 @@ function getModelStyleClass(mode: any) {
|
||||
`;
|
||||
}
|
||||
|
||||
// 规则2：普通灰
|
||||
if (name.includes('deepseek-r1')) {
|
||||
// 规则2：普通灰（免费模型）
|
||||
if (mode.isFree) {
|
||||
return 'text-gray-700';
|
||||
}
|
||||
|
||||
|
||||
@@ -5,9 +5,10 @@ import { ElMessage } from 'element-plus';
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import { createOrder, getOrderStatus } from '@/api';
|
||||
import { getGoodsList, GoodsCategoryType } from '@/api/pay';
|
||||
import SupportModelList from '@/components/userPersonalCenter/components/SupportModelList.vue';
|
||||
import ProductPage from '@/pages/products/index.vue';
|
||||
import { useUserStore } from '@/stores';
|
||||
import { showContactUs } from '@/utils/contact-us.ts';
|
||||
import { contactConfig, promotionConfig, taobaoConfig } from '@/config/constants.ts';
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
@@ -37,6 +38,31 @@ const packagesData = ref<{
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 复制淘口令
|
||||
function copyTaobaoCode() {
|
||||
navigator.clipboard.writeText(taobaoConfig.code).then(() => {
|
||||
ElMessage.success('淘口令已复制，打开手机淘宝即可购买');
|
||||
}).catch(() => {
|
||||
ElMessage.error('复制失败，请手动复制');
|
||||
});
|
||||
}
|
||||
|
||||
// 跳转淘宝
|
||||
function goToTaobao() {
|
||||
window.open(taobaoConfig.link, '_blank');
|
||||
}
|
||||
|
||||
// 跳转模型库
|
||||
function goToModelLibrary() {
|
||||
close();
|
||||
window.location.href = '/model-library';
|
||||
}
|
||||
|
||||
// 联系客服
|
||||
function contactService() {
|
||||
showContactUs({ scenario: 'regular' });
|
||||
}
|
||||
|
||||
const visible = ref(true);
|
||||
const activeTab = ref('member');
|
||||
const selectedId = ref<number | null>(null);
|
||||
@@ -141,6 +167,7 @@ function cleanupPayment() {
|
||||
const tabs = [
|
||||
{ key: 'member', label: '会员套餐' },
|
||||
{ key: 'token', label: '尊享Token包' },
|
||||
{ key: 'newbie', label: '新人特惠' },
|
||||
{ key: 'activation', label: '激活码' },
|
||||
];
|
||||
|
||||
@@ -381,18 +408,72 @@ function goToActivation() {
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- Tab 切换（无修改） -->
|
||||
<div class="flex border-b mb-6 overflow-x-auto">
|
||||
<!-- Tab 切换 -->
|
||||
<div class="tabs-container">
|
||||
<div
|
||||
v-for="tab in tabs" :key="tab.key"
|
||||
class="cursor-pointer px-5 py-2 -mb-px border-b-2 transition whitespace-nowrap"
|
||||
:class="activeTab === tab.key ? 'border-orange-500 text-orange-500 font-semibold' : 'border-transparent text-gray-500 hover:text-orange-500'"
|
||||
class="tab-item"
|
||||
:class="{ 'tab-active': activeTab === tab.key }"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新人特惠页面 -->
|
||||
<div v-if="activeTab === 'newbie'" class="newbie-guide-container">
|
||||
<div class="newbie-content">
|
||||
<div class="newbie-header">
|
||||
<div class="header-icon">🎉</div>
|
||||
<h3 class="header-title">新人特惠组合包</h3>
|
||||
<p class="header-subtitle">超值优惠，仅限首次购买用户</p>
|
||||
</div>
|
||||
|
||||
<div class="newbie-body">
|
||||
<!-- 购买方式卡片 -->
|
||||
<div class="purchase-card">
|
||||
<div class="card-row">
|
||||
<div class="card-col">
|
||||
<div class="method-label">方法一</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="goToTaobao"
|
||||
>
|
||||
<el-icon><i-ep-link /></el-icon>
|
||||
淘宝链接
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="card-col">
|
||||
<div class="method-label">方法二</div>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
@click="copyTaobaoCode"
|
||||
>
|
||||
<el-icon><i-ep-document-copy /></el-icon>
|
||||
复制淘口令
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 淘口令展示 -->
|
||||
<div class="taobao-code-box">
|
||||
<div class="code-label">淘口令</div>
|
||||
<div class="code-text">{{ taobaoConfig.code }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 温馨提示 -->
|
||||
<div class="tips-box">
|
||||
<p class="tips-title"><el-icon><i-ep-info-filled /></el-icon> 温馨提示</p>
|
||||
<p class="tips-text">新人特惠仅限首次购买 · 购买后联系客服激活</p>
|
||||
<p class="tips-text">客服微信：{{ contactConfig.wechatId }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 激活码引导页 -->
|
||||
<div v-if="activeTab === 'activation'" class="activation-guide-container">
|
||||
<div class="activation-content">
|
||||
@@ -543,19 +624,23 @@ function goToActivation() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-between;margin-top: 15px;">
|
||||
<div>
|
||||
<p style="color: #f97316;font-weight: 800">
|
||||
全站任意充值，每累计充值10元永久优惠尊享包10元，最高可优惠50元
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;margin-top: 15px;padding: 16px;background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);border-radius: 8px;border: 1px solid #fbbf24;">
|
||||
<div style="flex: 1;">
|
||||
<p style="color: #f97316;font-weight: 800;margin: 0 0 10px 0;">
|
||||
{{ promotionConfig.rechargeDiscount }}
|
||||
</p>
|
||||
<p style="margin-top: 10px;">
|
||||
充值后，加客服微信回复账号名，可专享vip售后服务
|
||||
</p>
|
||||
<p style="margin-top: 10px;">
|
||||
客服微信号：chengzilaoge520 或扫描右侧二维码
|
||||
<p style="margin: 0 0 10px 0;color: #78350f;">
|
||||
{{ promotionConfig.vipServiceTip }}
|
||||
</p>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
@click="contactService"
|
||||
>
|
||||
<el-icon><i-ep-service /></el-icon>
|
||||
联系客服
|
||||
</el-button>
|
||||
</div>
|
||||
<div><img style="height: 80px;width: 80px;" src="/src/assets/images/wx.png" alt=""></div>
|
||||
</div>
|
||||
|
||||
<!-- 权益预览（无修改） -->
|
||||
@@ -572,11 +657,31 @@ function goToActivation() {
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<SupportModelList />
|
||||
<!-- 查看模型库按钮 -->
|
||||
<div class="model-library-section">
|
||||
<el-divider />
|
||||
<div class="model-library-card">
|
||||
<div class="card-icon">
|
||||
<el-icon :size="32"><i-ep-box /></el-icon>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h4 class="card-title">查看支持的模型</h4>
|
||||
<p class="card-desc">查看意心AI支持的所有模型列表及详细信息</p>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="goto-btn"
|
||||
@click="goToModelLibrary"
|
||||
>
|
||||
前往模型库
|
||||
<el-icon class="ml-1"><i-ep-arrow-right /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 支付区域（无修改） -->
|
||||
<div class="payment-area">
|
||||
<div v-if="activeTab !== 'newbie' && activeTab !== 'activation'" class="payment-area">
|
||||
<div v-if="false" class="agreement-text">
|
||||
登录和注册都代表同意YiXinAI的会员协议
|
||||
</div>
|
||||
@@ -622,7 +727,7 @@ function goToActivation() {
|
||||
|
||||
<!-- 左栏 套餐卡片 + 支付（核心修改：Token套餐价格展示） -->
|
||||
<div v-else class="w-[60%] flex flex-col justify-between">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<div class="flex flex-wrap gap-4 package-cards-container">
|
||||
<div
|
||||
v-for="pkg in currentPackages" :key="pkg.id" class="package-card"
|
||||
:class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)"
|
||||
@@ -730,20 +835,22 @@ function goToActivation() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-between;margin-top: 15px;">
|
||||
<div>
|
||||
<p style="color: #f97316;font-weight: 800">
|
||||
全站任意充值，每累计充值10元永久优惠尊享包10元，最高可优惠50元
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 10px;">
|
||||
充值后，加客服微信回复账号名，可专享vip售后服务
|
||||
</p>
|
||||
<p style="margin-top: 10px;">
|
||||
客服微信号：chengzilaoge520 或扫描右侧二维码
|
||||
</p>
|
||||
</div>
|
||||
<div><img style="height: 80px;width: 80px;" src="/src/assets/images/wx.png" alt=""></div>
|
||||
<div style="margin-top: 15px;padding: 16px;background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);border-radius: 8px;border: 1px solid #fbbf24;">
|
||||
<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>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
block
|
||||
@click="contactService"
|
||||
>
|
||||
<el-icon><i-ep-service /></el-icon>
|
||||
联系客服
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 支付按钮（无修改） -->
|
||||
@@ -827,8 +934,27 @@ function goToActivation() {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="activeTab === 'member'" class="extra-description ">
|
||||
<SupportModelList />
|
||||
<div v-if="activeTab === 'member'" class="extra-description">
|
||||
<!-- 查看模型库按钮 -->
|
||||
<div class="model-library-section-mobile">
|
||||
<el-divider />
|
||||
<div class="model-library-card-mobile">
|
||||
<div class="card-header-mobile">
|
||||
<el-icon :size="24"><i-ep-box /></el-icon>
|
||||
<h4 class="card-title-mobile">查看支持的模型</h4>
|
||||
</div>
|
||||
<p class="card-desc-mobile">查看意心AI支持的所有模型列表及详细信息</p>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="goto-btn-mobile"
|
||||
block
|
||||
@click="goToModelLibrary"
|
||||
>
|
||||
前往模型库
|
||||
<el-icon class="ml-1"><i-ep-arrow-right /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-details" />
|
||||
@@ -842,6 +968,45 @@ function goToActivation() {
|
||||
.product-package-dialog {
|
||||
.el-dialog__header { display: none; }
|
||||
|
||||
/* Tab 切换样式 */
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
margin-bottom: 24px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari */
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex-shrink: 0;
|
||||
padding: 12px 20px;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
border-bottom: 3px solid transparent;
|
||||
margin-bottom: -2px;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
&.tab-active {
|
||||
color: #f97316;
|
||||
font-weight: 600;
|
||||
border-bottom-color: #f97316;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 详情页样式（无修改） */
|
||||
.details-view {
|
||||
height: 600px; overflow-y: auto; padding-right: 8px;
|
||||
@@ -859,6 +1024,297 @@ function goToActivation() {
|
||||
}
|
||||
}
|
||||
|
||||
/* 新人特惠页面样式 - 紧凑版（匹配激活码页面风格） */
|
||||
.newbie-guide-container {
|
||||
padding: 20px 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 300px;
|
||||
background: linear-gradient(to bottom, #fff, #fdfdfd);
|
||||
border-radius: 8px;
|
||||
|
||||
.newbie-content {
|
||||
text-align: center;
|
||||
max-width: 450px;
|
||||
width: 100%;
|
||||
|
||||
.newbie-header {
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
|
||||
.header-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
opacity: 0.95;
|
||||
}
|
||||
}
|
||||
|
||||
.newbie-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
|
||||
// 购买方式卡片
|
||||
.purchase-card {
|
||||
background: #f7f8fa;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
border: 2px solid #e8ecf0;
|
||||
|
||||
.card-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
|
||||
.card-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.method-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 淘口令展示
|
||||
.taobao-code-box {
|
||||
background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
border: 2px dashed #bae6fd;
|
||||
|
||||
.code-label {
|
||||
font-size: 12px;
|
||||
color: #0369a1;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.code-text {
|
||||
font-size: 11px;
|
||||
color: #667eea;
|
||||
font-family: 'Courier New', monospace;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
background: white;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// 温馨提示
|
||||
.tips-box {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
text-align: left;
|
||||
|
||||
.tips-title {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #0369a1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-text {
|
||||
margin: 4px 0;
|
||||
font-size: 12px;
|
||||
color: #0c4a6e;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式：移动端优化 */
|
||||
@media (max-width: 768px) {
|
||||
/* Tab 移动端优化 */
|
||||
.tabs-container {
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 2px;
|
||||
gap: 4px;
|
||||
justify-content: flex-start;
|
||||
|
||||
.tab-item {
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
min-width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
/* 新人特惠移动端优化 */
|
||||
.newbie-guide-container {
|
||||
padding: 16px 12px;
|
||||
min-height: auto;
|
||||
|
||||
.newbie-content {
|
||||
max-width: 100%;
|
||||
|
||||
.newbie-header {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.newbie-body {
|
||||
gap: 12px;
|
||||
|
||||
.purchase-card {
|
||||
padding: 14px;
|
||||
border-radius: 8px;
|
||||
|
||||
.card-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
|
||||
.card-col {
|
||||
.method-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.taobao-code-box {
|
||||
padding: 12px;
|
||||
|
||||
.code-label {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.code-text {
|
||||
font-size: 10px;
|
||||
padding: 6px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-box {
|
||||
padding: 12px;
|
||||
|
||||
.tips-title {
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.el-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-text {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏手机进一步优化 */
|
||||
@media (max-width: 480px) {
|
||||
.tabs-container {
|
||||
gap: 2px;
|
||||
|
||||
.tab-item {
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
min-width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
.newbie-guide-container {
|
||||
padding: 12px 8px;
|
||||
|
||||
.newbie-content {
|
||||
.newbie-header {
|
||||
padding: 12px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.newbie-body {
|
||||
.purchase-card {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.taobao-code-box {
|
||||
padding: 10px;
|
||||
|
||||
.code-text {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-box {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 激活码引导页样式 */
|
||||
.activation-guide-container {
|
||||
padding: 40px 20px;
|
||||
@@ -1296,6 +1752,67 @@ function goToActivation() {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 模型库卡片样式 - 桌面端 */
|
||||
.model-library-section {
|
||||
margin-top: 16px;
|
||||
|
||||
.model-library-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
|
||||
border-radius: 12px;
|
||||
border: 2px solid #bae6fd;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
color: #667eea;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
|
||||
.card-title {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.goto-btn {
|
||||
flex-shrink: 0;
|
||||
font-weight: 600;
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-details-btn {
|
||||
@@ -1336,6 +1853,33 @@ function goToActivation() {
|
||||
|
||||
/* 桌面端样式 */
|
||||
.desktop-layout {
|
||||
/* 套餐卡片容器样式 - 限制高度并添加滚动 */
|
||||
.package-cards-container {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-right: 8px;
|
||||
|
||||
/* 滚动条样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f5f5f5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #d0d7de;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #a8b3c1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.package-card {
|
||||
cursor: pointer; position: relative; width: calc(50% - 0.5rem);
|
||||
border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;
|
||||
@@ -1612,6 +2156,55 @@ function goToActivation() {
|
||||
}
|
||||
}
|
||||
|
||||
/* 模型库卡片样式 - 移动端 */
|
||||
.model-library-section-mobile {
|
||||
margin-top: 16px;
|
||||
|
||||
.model-library-card-mobile {
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
|
||||
border-radius: 12px;
|
||||
border: 2px solid #bae6fd;
|
||||
transition: all 0.3s;
|
||||
|
||||
.card-header-mobile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.el-icon {
|
||||
color: #667eea;
|
||||
background: white;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.card-title-mobile {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
}
|
||||
|
||||
.card-desc-mobile {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.goto-btn-mobile {
|
||||
font-weight: 600;
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 累计充值优惠提示卡片样式 - 桌面端
|
||||
.recharge-tip-card {
|
||||
display: flex; align-items: center; gap: 12px; padding: 12px 16px;
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import SupportModelList from '@/components/userPersonalCenter/components/SupportModelList.vue';
|
||||
|
||||
const models = [
|
||||
{ name: 'DeepSeek-R1', price: '2', desc: '国产开源，深度思索模式，不过幻读问题比较大，同时具备思考响应链，在开源模型中永远的神!' },
|
||||
{ name: 'DeepSeek-chat', price: '1', desc: '国产开源，简单聊天模式，对于中文文章语义体验较好，但响应速度一般' },
|
||||
@@ -27,6 +25,10 @@ const models = [
|
||||
|
||||
{ name: '更多模型请订阅查看....', price: '....', desc: '带深度思考的模型，响应速度可能会降低，请根据使用场景进行选择' },
|
||||
];
|
||||
|
||||
function goToModelLibrary() {
|
||||
window.location.href = '/model-library';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -39,8 +41,36 @@ const models = [
|
||||
</p>
|
||||
|
||||
<!-- 网格布局，默认2列 -->
|
||||
<SupportModelList layout="grid" />
|
||||
|
||||
<!-- <SupportModelList layout="grid" /> -->
|
||||
<!-- 查看模型库按钮 -->
|
||||
<div class="model-library-section">
|
||||
<el-divider />
|
||||
<div class="model-library-card">
|
||||
<div class="card-icon">
|
||||
<el-icon :size="32">
|
||||
<i-ep-box />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h4 class="card-title">
|
||||
查看支持的模型
|
||||
</h4>
|
||||
<p class="card-desc">
|
||||
查看意心AI支持的所有模型列表及详细信息
|
||||
</p>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="goto-btn"
|
||||
@click="goToModelLibrary"
|
||||
>
|
||||
前往模型库
|
||||
<el-icon class="ml-1">
|
||||
<i-ep-arrow-right />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 v-if="false" class="text-2xl font-semibold mb-4 text-center">
|
||||
热门大模型价格排行榜
|
||||
</h2>
|
||||
@@ -80,7 +110,7 @@ const models = [
|
||||
热门大模型价格实时排行榜
|
||||
</h2>
|
||||
<div class="rounded-2xl shadow-lg overflow-hidden border border-gray-200 flex justify-center items-center p-4">
|
||||
<a href="https://openrouter.ai/models">https://openrouter.ai/models</a>
|
||||
<a href="https://openrouter.ai/models">https://openrouter.ai/models</a>
|
||||
</div>
|
||||
<p class="text-sm text-center text-gray-500 mt-2">
|
||||
来源：openrouter 模型榜
|
||||
@@ -101,4 +131,64 @@ const models = [
|
||||
th, td {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
/* 模型库卡片样式 - 桌面端 */
|
||||
.model-library-section {
|
||||
margin-top: 16px;
|
||||
|
||||
.model-library-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
|
||||
border-radius: 12px;
|
||||
border: 2px solid #bae6fd;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
color: #667eea;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
|
||||
.card-title {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.goto-btn {
|
||||
flex-shrink: 0;
|
||||
font-weight: 600;
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { ElMessage } from 'element-plus';
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { getRechargeLog } from '@/api/model/index.ts';
|
||||
import { isUserVip } from '@/utils/user.ts';
|
||||
import { showContactUs } from '@/utils/contact-us.ts';
|
||||
|
||||
interface RechargeLog {
|
||||
id: string;
|
||||
@@ -17,14 +18,11 @@ interface RechargeLog {
|
||||
}
|
||||
|
||||
const loading = ref(false);
|
||||
const innerVisibleContact = ref(false);
|
||||
const logData = ref<RechargeLog[]>([]);
|
||||
const searchText = ref('');
|
||||
const currentSort = ref({ prop: '', order: '' });
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const showWechatFullscreen = ref(false);
|
||||
const showWxGroupFullscreen = ref(false);
|
||||
|
||||
// 移动端检测
|
||||
const isMobile = ref(false);
|
||||
@@ -33,40 +31,6 @@ function checkMobile() {
|
||||
isMobile.value = window.innerWidth < 768;
|
||||
}
|
||||
|
||||
const wxSrc = computed(
|
||||
() => `/src/assets/images/wx.png`,
|
||||
);
|
||||
const wxGroupQD = computed(
|
||||
() => `/src/assets/images/wx.png`,
|
||||
);
|
||||
|
||||
// 复制微信号
|
||||
function copyWechatId() {
|
||||
navigator.clipboard.writeText('chengzilaoge520').then(() => {
|
||||
ElMessage({
|
||||
message: '微信号已复制到剪贴板',
|
||||
type: 'success',
|
||||
duration: 2000,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 显示微信二维码全屏
|
||||
function showWechatFullscreenImage() {
|
||||
showWechatFullscreen.value = true;
|
||||
}
|
||||
|
||||
// 显示微信群二维码全屏
|
||||
function showWxGroupFullscreenImage() {
|
||||
showWxGroupFullscreen.value = true;
|
||||
}
|
||||
|
||||
// 关闭全屏图片
|
||||
function closeFullscreenImage() {
|
||||
showWechatFullscreen.value = false;
|
||||
showWxGroupFullscreen.value = false;
|
||||
}
|
||||
|
||||
// 模拟数据获取
|
||||
async function fetchRechargeLog() {
|
||||
try {
|
||||
@@ -108,7 +72,13 @@ function refreshLog() {
|
||||
|
||||
// 联系售后弹窗
|
||||
function contactCustomerService() {
|
||||
innerVisibleContact.value = !innerVisibleContact.value;
|
||||
// 如果用户有购买记录，则显示售后群
|
||||
if (logData.value.length > 0) {
|
||||
showContactUs({ scenario: 'afterSales' });
|
||||
}
|
||||
else {
|
||||
showContactUs({ scenario: 'regular' });
|
||||
}
|
||||
}
|
||||
|
||||
// 暴露方法给父组件使用
|
||||
@@ -166,74 +136,6 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="innerVisibleContact"
|
||||
width="500"
|
||||
title="售后支持"
|
||||
append-to-body
|
||||
>
|
||||
<h3 class="text-lg font-bold mb-3">
|
||||
请扫码加入微信交流群<br>
|
||||
备注“AI”获取专属客服支持
|
||||
</h3>
|
||||
<div class="mb-4 flex items-center justify-center space-x-2">
|
||||
<span class="font-semibold">站长微信账号：</span>
|
||||
<span id="wechat-id" class="text-blue-600 font-mono select-text">chengzilaoge520</span>
|
||||
<span
|
||||
class="cursor-pointer"
|
||||
title="点击复制"
|
||||
@click="copyWechatId"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 opacity-70 hover:opacity-100" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v16h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 18H8V7h11v16z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-center mb-4">
|
||||
<div class="px-4">
|
||||
<h4>站长微信(备注“AI”以便通过)</h4>
|
||||
|
||||
<img
|
||||
:src="wxSrc"
|
||||
class="w-50 py-5 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
|
||||
alt="微信二维码"
|
||||
@click="showWechatFullscreenImage"
|
||||
>
|
||||
</div>
|
||||
<!-- <div class="px-4"> -->
|
||||
<!-- <h4>微信交流群</h4> -->
|
||||
<!-- <img -->
|
||||
<!-- :src="wxGroupQD" -->
|
||||
<!-- class="w-50 py-5 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105" -->
|
||||
<!-- alt="微信二维码" -->
|
||||
<!-- @click="showWxGroupFullscreenImage" -->
|
||||
<!-- > -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
<!-- 全屏放大二维码 -->
|
||||
<div
|
||||
v-if="showWechatFullscreen"
|
||||
class="fullscreen-image-overlay"
|
||||
@click="closeFullscreenImage"
|
||||
>
|
||||
<img
|
||||
:src="wxSrc"
|
||||
class="fullscreen-image"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="showWxGroupFullscreen"
|
||||
class="fullscreen-image-overlay"
|
||||
@click="closeFullscreenImage"
|
||||
>
|
||||
<img
|
||||
:src="wxGroupQD"
|
||||
class="fullscreen-image"
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<div class="recharge-log-container">
|
||||
<div class="log-header">
|
||||
<h2 class="log-title">
|
||||
|
||||
@@ -43,9 +43,9 @@ const gridTemplateColumns = computed(() => {
|
||||
<template v-if="model.modelPrice === 0">
|
||||
<span
|
||||
class="free-tag"
|
||||
:class="model.modelId === 'DeepSeek-R1-0528' ? 'free' : 'vip'"
|
||||
:class="model.isFree ? 'free' : 'vip'"
|
||||
>
|
||||
{{ model.modelId === 'DeepSeek-R1-0528' ? '免费' : 'Vip专享' }}
|
||||
{{ model.isFree ? '免费' : 'Vip专享' }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
|
||||
38
Yi.Ai.Vue3/src/config/constants.ts
Normal file
38
Yi.Ai.Vue3/src/config/constants.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* 联系方式配置
|
||||
*/
|
||||
export const contactConfig = {
|
||||
// 客服微信号
|
||||
wechatId: 'chengzilaoge520',
|
||||
|
||||
// 二维码图片路径
|
||||
images: {
|
||||
customerService: '/src/assets/images/wx.png', // 客服微信二维码
|
||||
communityGroup: '/src/assets/images/wx-group-qr.jpg', // 交流群二维码
|
||||
afterSalesGroup: '', // 售后群二维码
|
||||
taobaoQr: '/src/assets/images/taobao-qr.png', // 淘宝店铺二维码
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 淘宝店铺配置
|
||||
*/
|
||||
export const taobaoConfig = {
|
||||
// 淘宝店铺链接
|
||||
link: 'https://e.tb.cn/h.7RqUAtwFh8V5ywg?tk=m7KGUc6DoNQ',
|
||||
|
||||
// 淘口令
|
||||
code: '【淘宝】https://e.tb.cn/h.7RqUAtwFh8V5ywg?tk=m7KGUc6DoNQ HU293 「ClaudeCode/Codex/Gemini Ai聚合API服务/会员Token包/人工售后」\n'
|
||||
+ '点击链接直接打开 或者 淘宝搜索直接打开',
|
||||
};
|
||||
|
||||
/**
|
||||
* 优惠活动配置
|
||||
*/
|
||||
export const promotionConfig = {
|
||||
// 累计充值优惠描述
|
||||
rechargeDiscount: '全站任意充值，每累计充值10元永久优惠尊享包10元，最高可优惠50元',
|
||||
|
||||
// VIP售后服务提示
|
||||
vipServiceTip: '充值后，联系客服回复账号名，可专享VIP售后服务',
|
||||
};
|
||||
2
Yi.Ai.Vue3/src/config/model.ts
Normal file
2
Yi.Ai.Vue3/src/config/model.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export const modelSystemSetting: any = {
|
||||
};
|
||||
@@ -0,0 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
import { showContactUs } from '@/utils/contact-us';
|
||||
|
||||
function handleClick() {
|
||||
showContactUs({ scenario: 'regular' });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="contact-us-btn-container">
|
||||
<div
|
||||
class="contact-us-btn"
|
||||
title="联系我们"
|
||||
@click="handleClick"
|
||||
>
|
||||
<!-- PC端显示文字 -->
|
||||
<span class="pc-text">联系我们</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.contact-us-btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact-us-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #409eff;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.contact-us-btn:hover {
|
||||
color: #66b1ff;
|
||||
transform: translateY(-1px);
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
/* PC端文字样式 */
|
||||
.pc-text {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
line-height: 1.2;
|
||||
padding: 2px 8px 2px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -2,12 +2,13 @@
|
||||
import { computed, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import logo from '@/assets/images/logo.png';
|
||||
import ConsoleBtn from '@/layouts/components0/Header/components/ConsoleBtn.vue';
|
||||
import ConsoleBtn from '@/layouts/components/Header/components/ConsoleBtn.vue';
|
||||
import { useUserStore } from '@/stores';
|
||||
import AiTutorialBtn from './components/AiTutorialBtn.vue';
|
||||
import AnnouncementBtn from './components/AnnouncementBtn.vue';
|
||||
import Avatar from './components/Avatar.vue';
|
||||
import BuyBtn from './components/BuyBtn.vue';
|
||||
import ContactUsBtn from './components/ContactUsBtn.vue';
|
||||
import LoginBtn from './components/LoginBtn.vue';
|
||||
import ModelLibraryBtn from './components/ModelLibraryBtn.vue';
|
||||
import ThemeBtn from './components/ThemeBtn.vue';
|
||||
@@ -113,6 +114,11 @@ function toggleMobileMenu() {
|
||||
<AiTutorialBtn />
|
||||
</el-menu-item>
|
||||
|
||||
<!-- 联系我们 -->
|
||||
<el-menu-item class="custom-menu-item" index="no-route">
|
||||
<ContactUsBtn />
|
||||
</el-menu-item>
|
||||
|
||||
<!-- 控制台菜单 -->
|
||||
<el-sub-menu index="console" class="console-submenu" popper-class="custom-popover">
|
||||
<template #title>
|
||||
@@ -196,7 +202,7 @@ function toggleMobileMenu() {
|
||||
:size="280"
|
||||
:close-on-click-modal="true"
|
||||
:lock-scroll="true"
|
||||
:modal-class="'mobile-drawer-modal'"
|
||||
modal-class="mobile-drawer-modal"
|
||||
class="mobile-drawer"
|
||||
>
|
||||
<template #header>
|
||||
@@ -216,10 +222,18 @@ function toggleMobileMenu() {
|
||||
<el-icon><ChatDotRound /></el-icon>
|
||||
<span>AI应用</span>
|
||||
</template>
|
||||
<el-menu-item index="/chat/conversation">AI对话</el-menu-item>
|
||||
<el-menu-item index="/chat/image">AI图片</el-menu-item>
|
||||
<el-menu-item index="/chat/video">AI视频</el-menu-item>
|
||||
<el-menu-item index="/chat/agent">AI智能体</el-menu-item>
|
||||
<el-menu-item index="/chat/conversation">
|
||||
AI对话
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/chat/image">
|
||||
AI图片
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/chat/video">
|
||||
AI视频
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/chat/agent">
|
||||
AI智能体
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<!-- 模型库 -->
|
||||
@@ -234,14 +248,30 @@ function toggleMobileMenu() {
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span>控制台</span>
|
||||
</template>
|
||||
<el-menu-item index="/console/user">用户信息</el-menu-item>
|
||||
<el-menu-item index="/console/apikey">API密钥</el-menu-item>
|
||||
<el-menu-item index="/console/recharge-log">充值记录</el-menu-item>
|
||||
<el-menu-item index="/console/usage">用量统计</el-menu-item>
|
||||
<el-menu-item index="/console/premium">尊享服务</el-menu-item>
|
||||
<el-menu-item index="/console/daily-task">每日任务</el-menu-item>
|
||||
<el-menu-item index="/console/invite">每周邀请</el-menu-item>
|
||||
<el-menu-item index="/console/activation">激活码兑换</el-menu-item>
|
||||
<el-menu-item index="/console/user">
|
||||
用户信息
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/console/apikey">
|
||||
API密钥
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/console/recharge-log">
|
||||
充值记录
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/console/usage">
|
||||
用量统计
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/console/premium">
|
||||
尊享服务
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/console/daily-task">
|
||||
每日任务
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/console/invite">
|
||||
每周邀请
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/console/activation">
|
||||
激活码兑换
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<!-- 其他功能 -->
|
||||
@@ -252,6 +282,9 @@ function toggleMobileMenu() {
|
||||
<div class="action-item">
|
||||
<AiTutorialBtn />
|
||||
</div>
|
||||
<div class="action-item">
|
||||
<ContactUsBtn />
|
||||
</div>
|
||||
<div v-if="userStore.userInfo" class="action-item">
|
||||
<BuyBtn :is-menu-item="false" />
|
||||
</div>
|
||||
|
||||
@@ -1,725 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { ConversationItem } from 'vue-element-plus-x/types/Conversations';
|
||||
import type { ChatSessionVo } from '@/api/session/types';
|
||||
import { ChatLineSquare, Expand, Fold, MoreFilled, Plus } from '@element-plus/icons-vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { get_session } from '@/api';
|
||||
import { useDesignStore } from '@/stores';
|
||||
import { useSessionStore } from '@/stores/modules/session';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const designStore = useDesignStore();
|
||||
const sessionStore = useSessionStore();
|
||||
|
||||
const sessionId = computed(() => route.params?.id);
|
||||
const conversationsList = computed(() => sessionStore.sessionList);
|
||||
const loadMoreLoading = computed(() => sessionStore.isLoadingMore);
|
||||
const active = ref<string | undefined>();
|
||||
const isCollapsed = computed(() => designStore.isCollapseConversationList);
|
||||
|
||||
onMounted(async () => {
|
||||
await sessionStore.requestSessionList();
|
||||
if (conversationsList.value.length > 0 && sessionId.value) {
|
||||
const currentSessionRes = await get_session(`${sessionId.value}`);
|
||||
sessionStore.setCurrentSession(currentSessionRes.data);
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => sessionStore.currentSession,
|
||||
(newValue) => {
|
||||
active.value = newValue ? `${newValue.id}` : undefined;
|
||||
},
|
||||
);
|
||||
|
||||
// 创建会话
|
||||
function handleCreatChat() {
|
||||
sessionStore.createSessionBtn();
|
||||
}
|
||||
|
||||
// 切换会话
|
||||
function handleChange(item: ConversationItem<ChatSessionVo>) {
|
||||
sessionStore.setCurrentSession(item);
|
||||
router.replace({
|
||||
name: 'chatConversationWithId',
|
||||
params: {
|
||||
id: item.id,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 处理组件触发的加载更多事件
|
||||
async function handleLoadMore() {
|
||||
if (!sessionStore.hasMore)
|
||||
return;
|
||||
await sessionStore.loadMoreSessions();
|
||||
}
|
||||
|
||||
// 右键菜单
|
||||
function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo>) {
|
||||
switch (command) {
|
||||
case 'delete':
|
||||
ElMessageBox.confirm('删除后，聊天记录将不可恢复。', '确定删除对话？', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
confirmButtonClass: 'el-button--danger',
|
||||
cancelButtonClass: 'el-button--info',
|
||||
roundButton: true,
|
||||
autofocus: false,
|
||||
})
|
||||
.then(() => {
|
||||
sessionStore.deleteSessions([item.id!]);
|
||||
nextTick(() => {
|
||||
if (item.id === active.value) {
|
||||
sessionStore.createSessionBtn();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
// 取消删除
|
||||
});
|
||||
break;
|
||||
case 'rename':
|
||||
ElMessageBox.prompt('', '编辑对话名称', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputErrorMessage: '请输入对话名称',
|
||||
confirmButtonClass: 'el-button--primary',
|
||||
cancelButtonClass: 'el-button--info',
|
||||
roundButton: true,
|
||||
inputValue: item.sessionTitle,
|
||||
autofocus: false,
|
||||
inputValidator: (value) => {
|
||||
return !!value;
|
||||
},
|
||||
}).then(({ value }) => {
|
||||
sessionStore
|
||||
.updateSession({
|
||||
id: item.id!,
|
||||
sessionTitle: value,
|
||||
sessionContent: item.sessionContent,
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '修改成功',
|
||||
});
|
||||
nextTick(() => {
|
||||
if (sessionStore.currentSession?.id === item.id) {
|
||||
sessionStore.setCurrentSession({
|
||||
...item,
|
||||
sessionTitle: value,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 折叠/展开侧边栏
|
||||
function toggleSidebar() {
|
||||
designStore.setIsCollapseConversationList(!designStore.isCollapseConversationList);
|
||||
}
|
||||
|
||||
// 点击logo创建新会话（仅在折叠状态）
|
||||
function handleLogoClick() {
|
||||
if (isCollapsed.value) {
|
||||
handleCreatChat();
|
||||
}
|
||||
}
|
||||
|
||||
// 处理右键菜单
|
||||
function handleContextMenu(event: MouseEvent, item: ConversationItem<ChatSessionVo>) {
|
||||
event.preventDefault();
|
||||
// 在折叠状态下触发菜单
|
||||
ElMessageBox.confirm('删除后，聊天记录将不可恢复。', '确定删除对话？', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
confirmButtonClass: 'el-button--danger',
|
||||
cancelButtonClass: 'el-button--info',
|
||||
roundButton: true,
|
||||
autofocus: false,
|
||||
})
|
||||
.then(() => {
|
||||
sessionStore.deleteSessions([item.id!]);
|
||||
nextTick(() => {
|
||||
if (item.id === active.value) {
|
||||
sessionStore.createSessionBtn();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
// 取消删除
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="aside-container"
|
||||
:class="{ 'aside-collapsed': isCollapsed }"
|
||||
>
|
||||
<div class="aside-wrapper">
|
||||
<!-- 头部 -->
|
||||
<div class="aside-header">
|
||||
<!-- 展开状态显示logo和标题 -->
|
||||
<div
|
||||
v-if="!isCollapsed"
|
||||
class="header-content-expanded flex items-center gap-8px hover:cursor-pointer"
|
||||
@click="handleCreatChat"
|
||||
>
|
||||
<span class="logo-text max-w-150px text-overflow">会话</span>
|
||||
</div>
|
||||
|
||||
<!-- 折叠状态只显示logo -->
|
||||
<div
|
||||
v-else
|
||||
class="header-content-collapsed flex items-center justify-center hover:cursor-pointer"
|
||||
@click="handleLogoClick"
|
||||
>
|
||||
<el-icon size="20">
|
||||
<ChatLineSquare />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<!-- 折叠按钮 -->
|
||||
<el-tooltip
|
||||
:content="isCollapsed ? '展开侧边栏' : '折叠侧边栏'"
|
||||
placement="bottom"
|
||||
>
|
||||
<el-button
|
||||
class="collapse-btn"
|
||||
type="text"
|
||||
@click="toggleSidebar"
|
||||
>
|
||||
<el-icon v-if="isCollapsed">
|
||||
<Expand />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<Fold />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="aside-body">
|
||||
<!-- 创建会话按钮 -->
|
||||
<div class="creat-chat-btn-wrapper">
|
||||
<div
|
||||
class="creat-chat-btn"
|
||||
:class="{ 'creat-chat-btn-collapsed': isCollapsed }"
|
||||
@click="handleCreatChat"
|
||||
>
|
||||
<el-icon class="add-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
<span v-if="!isCollapsed" class="creat-chat-text">
|
||||
新对话
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 会话列表 -->
|
||||
<div class="aside-content">
|
||||
<div v-if="conversationsList.length > 0" class="conversations-wrap">
|
||||
<Conversations
|
||||
v-model:active="active"
|
||||
:items="conversationsList"
|
||||
:label-max-width="200"
|
||||
:show-tooltip="!isCollapsed"
|
||||
:tooltip-offset="60"
|
||||
show-built-in-menu
|
||||
groupable
|
||||
row-key="id"
|
||||
label-key="sessionTitle"
|
||||
:tooltip-placement="isCollapsed ? 'right-start' : 'right'"
|
||||
:load-more="handleLoadMore"
|
||||
:load-more-loading="loadMoreLoading"
|
||||
:items-style="{
|
||||
marginLeft: '8px',
|
||||
marginRight: '8px',
|
||||
userSelect: 'none',
|
||||
borderRadius: isCollapsed ? '12px' : '10px',
|
||||
padding: isCollapsed ? '12px 8px' : '8px 12px',
|
||||
justifyContent: isCollapsed ? 'center' : 'space-between',
|
||||
width: isCollapsed ? '64px' : 'auto',
|
||||
height: isCollapsed ? '64px' : 'auto',
|
||||
minHeight: '48px',
|
||||
flexDirection: isCollapsed ? 'column' : 'row',
|
||||
position: 'relative',
|
||||
}"
|
||||
:items-active-style="{
|
||||
backgroundColor: '#fff',
|
||||
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
|
||||
color: 'rgba(0, 0, 0, 0.85)',
|
||||
}"
|
||||
:items-hover-style="{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
||||
}"
|
||||
@menu-command="handleMenuCommand"
|
||||
@change="handleChange"
|
||||
@contextmenu="handleContextMenu"
|
||||
>
|
||||
<!-- 自定义折叠状态下的会话项内容 -->
|
||||
<template #default="{ item }">
|
||||
<div class="conversation-item-content">
|
||||
<div v-if="isCollapsed" class="collapsed-item">
|
||||
<div
|
||||
class="avatar-circle"
|
||||
@contextmenu="(e) => handleContextMenu(e, item)"
|
||||
>
|
||||
{{ item.sessionTitle?.charAt(0) || 'A' }}
|
||||
</div>
|
||||
<div v-if="item.unreadCount" class="unread-indicator">
|
||||
{{ item.unreadCount }}
|
||||
</div>
|
||||
<!-- 折叠状态下的更多操作按钮 -->
|
||||
<div
|
||||
class="collapsed-menu-trigger"
|
||||
@click.stop="handleMenuCommand('rename', item)"
|
||||
@contextmenu.stop="(e) => handleContextMenu(e, item)"
|
||||
>
|
||||
<el-icon size="14">
|
||||
<MoreFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="expanded-item">
|
||||
<div class="conversation-info">
|
||||
<div class="conversation-title">
|
||||
{{ item.sessionTitle }}
|
||||
</div>
|
||||
<div v-if="item.sessionContent" class="conversation-preview">
|
||||
{{ item.sessionContent.substring(0, 30) }}{{ item.sessionContent.length > 30 ? '...' : '' }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 展开状态下的更多操作按钮（Conversations组件自带） -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Conversations>
|
||||
</div>
|
||||
|
||||
<el-empty
|
||||
v-else
|
||||
class="h-full flex-center"
|
||||
:description="isCollapsed ? '' : '暂无对话记录'"
|
||||
>
|
||||
<template #description>
|
||||
<span v-if="!isCollapsed">暂无对话记录</span>
|
||||
</template>
|
||||
</el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 基础样式
|
||||
.aside-container {
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
border-right: 0.5px solid var(--s-color-border-tertiary, rgb(0 0 0 / 8%));
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
background-color: var(--sidebar-background-color, #f9fafb);
|
||||
|
||||
&.aside-collapsed {
|
||||
width: 100px;
|
||||
|
||||
.aside-wrapper {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.conversations-wrap {
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aside-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 240px;
|
||||
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
// 头部样式
|
||||
.aside-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 56px;
|
||||
padding: 0 12px;
|
||||
border-bottom: 1px solid var(--s-color-border-tertiary, rgb(0 0 0 / 8%));
|
||||
background-color: var(--sidebar-header-bg, #ffffff);
|
||||
|
||||
.header-content-expanded {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-content-collapsed {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: rgb(0 0 0 / 85%);
|
||||
transform: skewX(-2deg);
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
color: var(--el-text-color-secondary);
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-text-color-primary);
|
||||
background-color: var(--el-fill-color-light);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 内容区域
|
||||
.aside-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//padding: 0 4px;
|
||||
overflow: hidden;
|
||||
|
||||
.creat-chat-btn-wrapper {
|
||||
padding: 12px 8px 4px;
|
||||
|
||||
.creat-chat-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
color: #0057ff;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: rgb(0 87 255 / 6%);
|
||||
border: 1px solid rgb(0 102 255 / 15%);
|
||||
border-radius: 12px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(0 87 255 / 12%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&.creat-chat-btn-collapsed {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.creat-chat-text {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
margin-left: 6px;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aside-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.conversations-wrap {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0 4px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.conversation-item-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.collapsed-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.avatar-circle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.unread-indicator {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
background-color: #ff4d4f;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.collapsed-menu-trigger {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 2;
|
||||
|
||||
.el-icon {
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .collapsed-menu-trigger {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.expanded-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.conversation-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 8px;
|
||||
|
||||
.conversation-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
line-height: 1.4;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.conversation-preview {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 样式穿透 - 重点优化操作按钮区域
|
||||
:deep() {
|
||||
.conversations-list {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.conversation-group-title {
|
||||
padding-left: 12px !important;
|
||||
background-color: transparent !important;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.title-text {
|
||||
opacity: 0.6;
|
||||
font-size: 12px;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-item {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
// 确保操作按钮区域在折叠状态下可见
|
||||
.conversation-item-actions {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.el-button {
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 折叠状态样式
|
||||
.aside-collapsed {
|
||||
.conversation-group-title {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.conversation-item {
|
||||
justify-content: center !important;
|
||||
padding: 12px 8px !important;
|
||||
height: 64px !important;
|
||||
min-height: 64px !important;
|
||||
|
||||
&-label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&-actions {
|
||||
// 隐藏默认的操作按钮，使用自定义的
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
.aside-container {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
width: 280px !important;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
|
||||
&.aside-collapsed {
|
||||
transform: translateX(-100%);
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
&:not(.aside-collapsed) {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.aside-wrapper {
|
||||
width: 280px !important;
|
||||
|
||||
.aside-collapsed & {
|
||||
width: 100px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端遮罩层
|
||||
.aside-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// 动画
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +0,0 @@
|
||||
<!-- DesignConfig -->
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div>配置页面</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -1,88 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
// 打开AI使用教程（跳转到外部链接）
|
||||
function openTutorial() {
|
||||
window.open('https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde', '_blank');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ai-tutorial-btn-container" data-tour="ai-tutorial-link">
|
||||
<div
|
||||
class="ai-tutorial-btn"
|
||||
title="点击跳转YiXinAI玩法指南专栏"
|
||||
@click="openTutorial"
|
||||
>
|
||||
<!-- PC端显示文字 -->
|
||||
<span class="pc-text">文档</span>
|
||||
<!-- 移动端显示图标 -->
|
||||
<svg
|
||||
class="mobile-icon w-6 h-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 14l9-5-9-5-9 5 9 5z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 14l6.16-3.422A12.083 12.083 0 0118 13.5c0 2.579-3.582 4.5-6 4.5s-6-1.921-6-4.5c0-.432.075-.85.198-1.244L12 14z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ai-tutorial-btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ai-tutorial-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #E6A23C;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #F1B44C;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
// PC端显示文字，隐藏图标
|
||||
.pc-text {
|
||||
display: inline;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.mobile-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端显示图标，隐藏文字
|
||||
@media (max-width: 768px) {
|
||||
.ai-tutorial-btn-container {
|
||||
.ai-tutorial-btn {
|
||||
.pc-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-icon {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,112 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useAnnouncementStore } from '@/stores';
|
||||
|
||||
const announcementStore = useAnnouncementStore();
|
||||
const { announcements } = storeToRefs(announcementStore);
|
||||
|
||||
// 计算未读公告数量（系统公告数量）
|
||||
const unreadCount = computed(() => {
|
||||
if (!Array.isArray(announcements.value))
|
||||
return 0;
|
||||
return announcements.value.filter(a => a.type === 'System').length;
|
||||
});
|
||||
|
||||
// 打开公告弹窗
|
||||
function openAnnouncement() {
|
||||
announcementStore.openDialog();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="announcement-btn-container" data-tour="announcement-btn">
|
||||
<el-badge
|
||||
is-dot
|
||||
class="announcement-badge"
|
||||
>
|
||||
<!-- :value="unreadCount" -->
|
||||
<!-- :hidden="unreadCount === 0" -->
|
||||
<!-- :max="99" -->
|
||||
<div
|
||||
class="announcement-btn"
|
||||
title="查看公告"
|
||||
@click="openAnnouncement"
|
||||
>
|
||||
<!-- PC端显示文字 -->
|
||||
<span class="pc-text">公告</span>
|
||||
<!-- 移动端显示图标 -->
|
||||
<svg
|
||||
class="mobile-icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
|
||||
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
||||
</svg>
|
||||
</div>
|
||||
</el-badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.announcement-btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.announcement-badge {
|
||||
:deep(.el-badge__content) {
|
||||
background-color: #f56c6c;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.announcement-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #409eff;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #66b1ff;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
// PC端显示文字，隐藏图标
|
||||
.pc-text {
|
||||
display: inline;
|
||||
margin: 0 12px;
|
||||
|
||||
}
|
||||
|
||||
.mobile-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端显示图标，隐藏文字
|
||||
@media (max-width: 768px) {
|
||||
.announcement-btn-container {
|
||||
.announcement-btn {
|
||||
.pc-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-icon {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,499 +0,0 @@
|
||||
<!-- 头像 -->
|
||||
<script setup lang="ts">
|
||||
import { ChatLineRound } from '@element-plus/icons-vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { nextTick, onMounted, ref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import Popover from '@/components/Popover/index.vue';
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue';
|
||||
import { useGuideTour } from '@/hooks/useGuideTour';
|
||||
import { useAnnouncementStore, useGuideTourStore, useUserStore } from '@/stores';
|
||||
import { useSessionStore } from '@/stores/modules/session';
|
||||
import { getUserProfilePicture, isUserVip } from '@/utils/user';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const userStore = useUserStore();
|
||||
const sessionStore = useSessionStore();
|
||||
const guideTourStore = useGuideTourStore();
|
||||
const announcementStore = useAnnouncementStore();
|
||||
const { startUserCenterTour } = useGuideTour();
|
||||
|
||||
/* 弹出面板 开始 */
|
||||
const popoverStyle = ref({
|
||||
width: '200px',
|
||||
padding: '4px',
|
||||
height: 'fit-content',
|
||||
});
|
||||
const popoverRef = ref();
|
||||
|
||||
// 弹出面板内容
|
||||
const popoverList = ref([
|
||||
|
||||
{
|
||||
key: '5',
|
||||
title: '控制台',
|
||||
icon: 'settings-4-fill',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
divider: true,
|
||||
},
|
||||
{
|
||||
key: '7',
|
||||
title: '公告',
|
||||
icon: 'notification-fill',
|
||||
},
|
||||
{
|
||||
key: '8',
|
||||
title: '模型库',
|
||||
icon: 'apps-fill',
|
||||
},
|
||||
{
|
||||
key: '9',
|
||||
title: '文档',
|
||||
icon: 'book-fill',
|
||||
},
|
||||
|
||||
{
|
||||
key: '6',
|
||||
title: '新手引导',
|
||||
icon: 'dashboard-fill',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
divider: true,
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
title: '退出登录',
|
||||
icon: 'logout-box-r-line',
|
||||
},
|
||||
]);
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
const rechargeLogRef = ref();
|
||||
const activeNav = ref('user');
|
||||
|
||||
// ============ 邀请码分享功能 ============
|
||||
/** 从 URL 获取的邀请码 */
|
||||
const externalInviteCode = ref<string>('');
|
||||
|
||||
const navItems = [
|
||||
{ name: 'user', label: '用户信息', icon: 'User' },
|
||||
// { name: 'role', label: '角色管理', icon: 'Avatar' },
|
||||
// { name: 'permission', label: '权限管理', icon: 'Key' },
|
||||
// { name: 'userInfo', label: '用户信息', icon: 'User' },
|
||||
{ name: 'apiKey', label: 'API密钥', icon: 'Key' },
|
||||
|
||||
{ name: 'rechargeLog', label: '充值记录', icon: 'Document' },
|
||||
{ name: 'usageStatistics', label: '用量统计', icon: 'Histogram' },
|
||||
{ name: 'premiumService', label: '尊享服务', icon: 'ColdDrink' },
|
||||
{ name: 'dailyTask', label: '每日任务（限时）', icon: 'Trophy' },
|
||||
{ name: 'cardFlip', label: '每周邀请（限时）', icon: 'Present' },
|
||||
// { name: 'usageStatistics2', label: '用量统计2', icon: 'Histogram' },
|
||||
{ name: 'activationCode', label: '激活码兑换', icon: 'MagicStick' },
|
||||
];
|
||||
function openDialog() {
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
function handleConfirm(activeNav: string) {
|
||||
ElMessage.success('操作成功');
|
||||
}
|
||||
|
||||
// 导航切换
|
||||
function handleNavChange(nav: string) {
|
||||
activeNav.value = nav;
|
||||
// 同步更新 store 中的 tab 状态，防止下次通过 store 打开同一 tab 时因值未变而不触发 watch
|
||||
if (userStore.userCenterActiveTab !== nav) {
|
||||
userStore.userCenterActiveTab = nav;
|
||||
}
|
||||
}
|
||||
|
||||
// 联系售后
|
||||
function handleContactSupport() {
|
||||
rechargeLogRef.value?.contactCustomerService();
|
||||
}
|
||||
const { startHeaderTour } = useGuideTour();
|
||||
|
||||
// 开始引导教程
|
||||
function handleStartTutorial() {
|
||||
startHeaderTour();
|
||||
}
|
||||
// 点击
|
||||
function handleClick(item: any) {
|
||||
switch (item.key) {
|
||||
case '1':
|
||||
ElMessage.warning('暂未开放');
|
||||
break;
|
||||
case '2':
|
||||
ElMessage.warning('暂未开放');
|
||||
break;
|
||||
case '5':
|
||||
// 打开控制台
|
||||
popoverRef.value?.hide?.();
|
||||
router.push('/console');
|
||||
break;
|
||||
case '6':
|
||||
handleStartTutorial();
|
||||
break;
|
||||
case '7':
|
||||
// 打开公告
|
||||
popoverRef.value?.hide?.();
|
||||
announcementStore.openDialog();
|
||||
break;
|
||||
case '8':
|
||||
// 打开模型库
|
||||
popoverRef.value?.hide?.();
|
||||
router.push('/model-library');
|
||||
break;
|
||||
case '9':
|
||||
// 打开文档
|
||||
popoverRef.value?.hide?.();
|
||||
window.open('https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde', '_blank');
|
||||
break;
|
||||
case '4':
|
||||
popoverRef.value?.hide?.();
|
||||
ElMessageBox.confirm('退出登录不会丢失任何数据，你仍可以登录此账号。', '确认退出登录？', {
|
||||
confirmButtonText: '确认退出',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
confirmButtonClass: 'el-button--danger',
|
||||
cancelButtonClass: 'el-button--info',
|
||||
roundButton: true,
|
||||
autofocus: false,
|
||||
})
|
||||
.then(async () => {
|
||||
// 在这里执行退出方法
|
||||
await userStore.logout();
|
||||
// 清空回话列表并回到默认页
|
||||
await sessionStore.requestSessionList(1, true);
|
||||
await sessionStore.createSessionBtn();
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '退出成功',
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
// ElMessage({
|
||||
// type: 'info',
|
||||
// message: '取消',
|
||||
// });
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function openVipGuide() {
|
||||
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">点击下方按钮，立即升级为 VIP 会员！</p>'
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
isUserVip() ? '会员状态' : '会员尊享',
|
||||
{
|
||||
confirmButtonText: '前往产品页面',
|
||||
cancelButtonText: '关闭',
|
||||
dangerouslyUseHTMLString: true,
|
||||
type: 'info',
|
||||
center: true,
|
||||
roundButton: true,
|
||||
},
|
||||
)
|
||||
.then(() => {
|
||||
router.push({
|
||||
name: 'products', // 使用命名路由
|
||||
query: { from: isUserVip() ? 'vip' : 'user' }, // 可选：添加来源标识
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
// 点击右上角关闭或“关闭”按钮，不执行任何操作
|
||||
});
|
||||
}
|
||||
|
||||
// ============ 监听对话框打开事件，切换到邀请码标签页 ============
|
||||
watch(dialogVisible, (newVal) => {
|
||||
if (newVal && externalInviteCode.value) {
|
||||
// 对话框打开后，切换标签页（已通过 :default-active 绑定，会自动响应）
|
||||
// console.log('[Avatar] watch: 对话框已打开，切换到 cardFlip 标签页');
|
||||
nextTick(() => {
|
||||
activeNav.value = 'cardFlip';
|
||||
// console.log('[Avatar] watch: 已设置 activeNav 为', activeNav.value);
|
||||
});
|
||||
}
|
||||
|
||||
// 对话框关闭时，清除邀请码状态和 URL 参数
|
||||
if (!newVal && externalInviteCode.value) {
|
||||
// console.log('[Avatar] watch: 对话框关闭，清除邀请码状态');
|
||||
externalInviteCode.value = '';
|
||||
|
||||
// 清除 URL 中的 inviteCode 参数
|
||||
const url = new URL(window.location.href);
|
||||
if (url.searchParams.has('inviteCode')) {
|
||||
url.searchParams.delete('inviteCode');
|
||||
window.history.replaceState({}, '', url.toString());
|
||||
// console.log('[Avatar] watch: 已清除 URL 中的 inviteCode 参数');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ============ 监听 URL 参数，实现邀请码快捷分享 ============
|
||||
onMounted(() => {
|
||||
// 获取 URL 查询参数
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const inviteCode = urlParams.get('inviteCode');
|
||||
|
||||
if (inviteCode && inviteCode.trim()) {
|
||||
// console.log('[Avatar] onMounted: 检测到邀请码', inviteCode);
|
||||
|
||||
// 保存邀请码
|
||||
externalInviteCode.value = inviteCode.trim();
|
||||
|
||||
// 先设置标签页为 cardFlip
|
||||
activeNav.value = 'cardFlip';
|
||||
// console.log('[Avatar] onMounted: 设置 activeNav 为', activeNav.value);
|
||||
|
||||
// 延迟打开对话框，确保状态已更新
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
// console.log('[Avatar] onMounted: 打开用户中心对话框');
|
||||
dialogVisible.value = true;
|
||||
}, 200);
|
||||
});
|
||||
|
||||
// 注意：不立即清除 URL 参数，保留给登录后使用
|
||||
// URL 参数会在对话框关闭时清除
|
||||
}
|
||||
});
|
||||
|
||||
// ============ 监听引导状态，自动打开用户中心并开始引导 ============
|
||||
watch(() => guideTourStore.shouldStartUserCenterTour, (shouldStart) => {
|
||||
if (shouldStart) {
|
||||
// 清除触发标记
|
||||
guideTourStore.clearUserCenterTourTrigger();
|
||||
|
||||
// 注册导航切换回调
|
||||
guideTourStore.setUserCenterNavChangeCallback((nav: string) => {
|
||||
activeNav.value = nav;
|
||||
});
|
||||
|
||||
// 注册关闭弹窗回调
|
||||
guideTourStore.setUserCenterCloseCallback(() => {
|
||||
dialogVisible.value = false;
|
||||
});
|
||||
|
||||
// 打开用户中心弹窗
|
||||
nextTick(() => {
|
||||
dialogVisible.value = true;
|
||||
|
||||
// 等待弹窗打开后开始引导
|
||||
setTimeout(() => {
|
||||
startUserCenterTour();
|
||||
}, 600);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// ============ 监听 Store 状态，控制用户中心弹窗 (新增) ============
|
||||
watch(() => userStore.isUserCenterVisible, (val) => {
|
||||
dialogVisible.value = val;
|
||||
if (val && userStore.userCenterActiveTab) {
|
||||
activeNav.value = userStore.userCenterActiveTab;
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => userStore.userCenterActiveTab, (val) => {
|
||||
if (val) {
|
||||
activeNav.value = val;
|
||||
}
|
||||
});
|
||||
|
||||
// 监听本地 dialogVisible 变化，同步回 Store（可选，为了保持一致性）
|
||||
watch(dialogVisible, (val) => {
|
||||
if (!val) {
|
||||
userStore.closeUserCenter();
|
||||
}
|
||||
});
|
||||
|
||||
// ============ 暴露方法供外部调用 ============
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-2 ">
|
||||
<!-- 用户信息区域 -->
|
||||
<div class="user-info-display cursor-pointer flex flex-col text-right mr-2 leading-tight" @click="openDialog">
|
||||
<div class="text-sm font-semibold text-gray-800">
|
||||
{{ userStore.userInfo?.user.nick ?? '未登录用户' }}
|
||||
</div>
|
||||
|
||||
<!-- 角色展示 -->
|
||||
<div>
|
||||
<span
|
||||
v-if="isUserVip()"
|
||||
class="inline-block px-2 py-0.5 text-xs text-yellow-700 bg-yellow-100 rounded-full font-semibold"
|
||||
>
|
||||
YiXinAI-VIP
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-else
|
||||
class="inline-block px-2 py-0.5 text-xs text-gray-600 bg-gray-100 rounded-full cursor-pointer hover:bg-yellow-50 hover:text-yellow-700 transition"
|
||||
>
|
||||
普通用户
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 头像区域 -->
|
||||
<div class="avatar-container" data-tour="user-avatar">
|
||||
<Popover
|
||||
ref="popoverRef"
|
||||
placement="bottom-end"
|
||||
trigger="clickTarget"
|
||||
:trigger-style="{ cursor: 'pointer' }"
|
||||
popover-class="popover-content"
|
||||
:popover-style="popoverStyle"
|
||||
>
|
||||
<template #trigger>
|
||||
<el-avatar :src="getUserProfilePicture()" :size="28" fit="fit" shape="circle" />
|
||||
</template>
|
||||
|
||||
<div class="popover-content-box shadow-lg">
|
||||
<!-- 用户信息 -->
|
||||
<div class="user-info-box flex items-center gap-8px p-8px rounded-lg mb-2">
|
||||
<el-avatar :src="getUserProfilePicture()" :size="32" fit="fit" shape="circle" />
|
||||
<div class="flex flex-col text-sm">
|
||||
<div class="font-semibold text-gray-800">
|
||||
{{ userStore.userInfo?.user.nick ?? '未登录用户' }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
<span
|
||||
v-if="isUserVip()"
|
||||
class="inline-block px-2 py-0.5 text-xs text-yellow-700 bg-yellow-100 rounded-full font-semibold"
|
||||
>
|
||||
YiXinAI-VIP
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-else
|
||||
class="inline-block px-2 py-0.5 text-xs text-gray-600 bg-gray-100 rounded-full cursor-pointer hover:bg-yellow-50 hover:text-yellow-700 transition"
|
||||
>
|
||||
普通用户
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divder h-1px bg-gray-200 my-4px" />
|
||||
|
||||
<div v-for="item in popoverList" :key="item.key" class="popover-content-box-items h-full">
|
||||
<div
|
||||
v-if="!item.divider"
|
||||
class="popover-content-box-item flex items-center h-full gap-8px p-8px pl-10px pr-12px rounded-lg hover:cursor-pointer hover:bg-[rgba(0,0,0,.04)]"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<SvgIcon :name="item.icon!" size="16" class-name="flex-none" />
|
||||
<div class="popover-content-box-item-text font-size-14px text-overflow max-h-120px">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="item.divider" class="divder h-1px bg-gray-200 my-4px" />
|
||||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<nav-dialog
|
||||
v-model="dialogVisible"
|
||||
title="控制台"
|
||||
:nav-items="navItems"
|
||||
:default-active="activeNav"
|
||||
@confirm="handleConfirm"
|
||||
@nav-change="handleNavChange"
|
||||
>
|
||||
<template #extra-actions>
|
||||
<el-tooltip v-if="isUserVip() && activeNav === 'rechargeLog'" content="联系售后" placement="bottom">
|
||||
<el-button circle plain size="small" @click="handleContactSupport">
|
||||
<el-icon color="#07c160">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<!-- 用户管理内容 -->
|
||||
<template #user>
|
||||
<user-management />
|
||||
</template>
|
||||
<!-- 用量统计 -->
|
||||
<template #usageStatistics>
|
||||
<usage-statistics />
|
||||
</template>
|
||||
<!-- 尊享服务 -->
|
||||
<template #premiumService>
|
||||
<premium-service />
|
||||
</template>
|
||||
<!-- 用量统计 -->
|
||||
<!-- <template #usageStatistics2> -->
|
||||
<!-- <usage-statistics2 /> -->
|
||||
<!-- </template> -->
|
||||
|
||||
<!-- 角色管理内容 -->
|
||||
<template #role>
|
||||
<!-- < /> -->
|
||||
</template>
|
||||
|
||||
<!-- 权限管理内容 -->
|
||||
<template #permission>
|
||||
<!-- <permission-management /> -->
|
||||
</template>
|
||||
|
||||
<template #apiKey>
|
||||
<APIKeyManagement />
|
||||
</template>
|
||||
<template #activationCode>
|
||||
<activation-code />
|
||||
</template>
|
||||
<template #dailyTask>
|
||||
<daily-task />
|
||||
</template>
|
||||
<template #cardFlip>
|
||||
<card-flip-activity :external-invite-code="externalInviteCode" />
|
||||
</template>
|
||||
<template #rechargeLog>
|
||||
<recharge-log ref="rechargeLogRef" />
|
||||
</template>
|
||||
</nav-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.popover-content {
|
||||
width: 520px;
|
||||
height: 520px;
|
||||
}
|
||||
.popover-content-box {
|
||||
padding: 8px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
|
||||
}
|
||||
</style>
|
||||
@@ -1,68 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { showProductPackage } from '@/utils/product-package';
|
||||
|
||||
// 点击购买按钮
|
||||
function onProductPackage() {
|
||||
showProductPackage();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="buy-btn-container">
|
||||
<el-button
|
||||
class="buy-btn flex items-center gap-2 px-5 py-2 font-semibold shadow-lg"
|
||||
data-tour="buy-btn"
|
||||
@click="onProductPackage"
|
||||
>
|
||||
<span>立即购买</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.buy-btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 22px 0 0;
|
||||
|
||||
.buy-btn {
|
||||
background: linear-gradient(90deg, #FFD700, #FFC107);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
|
||||
background: linear-gradient(90deg, #FFC107, #FFD700);
|
||||
}
|
||||
|
||||
.icon-rocket {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.animate-bounce {
|
||||
animation: bounce 1.2s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端，屏幕小于756px
|
||||
@media screen and (max-width: 756px) {
|
||||
.buy-btn-container {
|
||||
margin: 0 ;
|
||||
|
||||
.buy-btn {
|
||||
font-size: 12px;
|
||||
max-width: 60px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-4px); }
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +0,0 @@
|
||||
<!-- 侧边栏折叠按钮 -->
|
||||
<script setup lang="ts">
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue';
|
||||
import { useDesignStore } from '@/stores';
|
||||
|
||||
// const { changeCollapse } = useCollapseToggle();
|
||||
const designStore = useDesignStore();
|
||||
|
||||
function handleChangeCollapse() {
|
||||
designStore.setIsCollapseConversationList(!designStore.isCollapseConversationList);
|
||||
// 待定
|
||||
// changeCollapse();
|
||||
// // 每次切换折叠状态，重置安全区状态
|
||||
// designStore.isSafeAreaHover = false;
|
||||
// // 重置首次激活悬停状态
|
||||
// designStore.hasActivatedHover = false;
|
||||
// if (!designStore.isCollapse) {
|
||||
// document.documentElement.style.setProperty(
|
||||
// `--sidebar-left-container-default-width`,
|
||||
// `${SIDE_BAR_WIDTH}px`,
|
||||
// );
|
||||
// }
|
||||
// else {
|
||||
// document.documentElement.style.setProperty(`--sidebar-left-container-default-width`, ``);
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="collapse-container btn-icon-btn" @click="handleChangeCollapse">
|
||||
<SvgIcon v-if="!designStore.isCollapseConversationList" name="ms-left-panel-close-outline" size="24" />
|
||||
<SvgIcon v-if="designStore.isCollapseConversationList" name="ms-left-panel-open-outline" size="24" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .collapse-container {
|
||||
// }
|
||||
</style>
|
||||
@@ -1,91 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from '@/stores';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 打开用户中心对话框（通过调用 Avatar 组件的方法）
|
||||
function openConsole() {
|
||||
// 触发事件，由父组件处理
|
||||
emit('open-console');
|
||||
}
|
||||
|
||||
const emit = defineEmits(['open-console']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="console-btn-container" data-tour="console-btn">
|
||||
<div
|
||||
class="console-btn"
|
||||
title="打开控制台"
|
||||
@click="openConsole"
|
||||
>
|
||||
<!-- PC端显示文字 -->
|
||||
<span class="pc-text">控制台</span>
|
||||
<!-- 移动端显示图标 -->
|
||||
<svg
|
||||
class="mobile-icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
|
||||
<line x1="8" y1="21" x2="16" y2="21" />
|
||||
<line x1="12" y1="17" x2="12" y2="21" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.console-btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.console-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #606266;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #909399;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
// PC端显示文字，隐藏图标
|
||||
.pc-text {
|
||||
display: inline;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.mobile-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端显示图标，隐藏文字
|
||||
@media (max-width: 768px) {
|
||||
.console-btn-container {
|
||||
.console-btn {
|
||||
.pc-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-icon {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,47 +0,0 @@
|
||||
<!-- 添加新会话按钮 -->
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
import { useSessionStore } from '@/stores/modules/session';
|
||||
|
||||
const sessionStore = useSessionStore();
|
||||
|
||||
/* 创建会话 开始 */
|
||||
function handleCreatChat() {
|
||||
if (!sessionStore.currentSession)
|
||||
return;
|
||||
// 创建会话, 跳转到默认聊天
|
||||
sessionStore.createSessionBtn();
|
||||
}
|
||||
/* 创建会话 结束 */
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="create-chat-container flex-center flex-none p-6px pl-8px pr-8px c-#0057ff b-#0057ff b-rounded-12px border-1px hover:bg-#0057ff hover:c-#fff hover:b-#fff hover:cursor-pointer border-solid select-none"
|
||||
:class="{
|
||||
'is-disabled': !sessionStore.currentSession,
|
||||
}"
|
||||
@click="handleCreatChat"
|
||||
>
|
||||
<el-icon size="12" class="flex-center flex-none w-14px h-14px">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
<span class="ml-4px font-size-14px font-700">新对话</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.is-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
color: #0057ff;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
border-color: #0057ff;
|
||||
border-style: solid;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,29 +0,0 @@
|
||||
<!-- LoginBtn 登录按钮 -->
|
||||
<script setup lang="ts">
|
||||
import LoginDialog from '@/components/LoginDialog/index.vue';
|
||||
import { useUserStore } from '@/stores';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const isLoginDialogVisible = computed(() => userStore.isLoginDialogVisible);
|
||||
|
||||
// 点击登录按钮时调用Store方法打开弹框
|
||||
function handleClickLogin() {
|
||||
userStore.openLoginDialog();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-btn-wrapper">
|
||||
<div
|
||||
class="login-btn bg-#191c1f c-#fff font-size-14px rounded-8px flex-center text-overflow p-10px pl-12px pr-12px min-w-49px h-16px cursor-pointer hover:bg-#232629 select-none"
|
||||
@click="handleClickLogin"
|
||||
>
|
||||
登录
|
||||
</div>
|
||||
|
||||
<!-- 登录弹框 -->
|
||||
<LoginDialog v-model:visible="isLoginDialogVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -1,88 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function goToModelLibrary() {
|
||||
router.push('/model-library');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="model-library-btn-container" data-tour="model-library-btn">
|
||||
<div
|
||||
class="model-library-btn"
|
||||
title="查看模型库"
|
||||
@click="goToModelLibrary"
|
||||
>
|
||||
<!-- PC端显示文字 -->
|
||||
<span class="pc-text">模型库</span>
|
||||
<!-- 移动端显示图标 -->
|
||||
<svg
|
||||
class="mobile-icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect x="3" y="3" width="7" height="7" />
|
||||
<rect x="14" y="3" width="7" height="7" />
|
||||
<rect x="14" y="14" width="7" height="7" />
|
||||
<rect x="3" y="14" width="7" height="7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.model-library-btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.model-library-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #606266;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #606266;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
// PC端显示文字，隐藏图标
|
||||
.pc-text {
|
||||
display: inline;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.mobile-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端显示图标，隐藏文字
|
||||
@media (max-width: 768px) {
|
||||
.model-library-btn-container {
|
||||
.model-library-btn {
|
||||
.pc-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-icon {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,84 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
// 检查是否在聊天页面
|
||||
const isOnChatPage = computed(() => {
|
||||
return route.path.startsWith('/chat');
|
||||
});
|
||||
|
||||
function goToChat() {
|
||||
router.push('/chat/conversation');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="!isOnChatPage" class="start-chat-btn-container" data-tour="start-chat-btn">
|
||||
<div
|
||||
class="start-chat-btn"
|
||||
title="开始聊天"
|
||||
@click="goToChat"
|
||||
>
|
||||
<el-icon class="chat-icon">
|
||||
<i-ep-chat-dot-round />
|
||||
</el-icon>
|
||||
<span class="btn-text">开始聊天</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.start-chat-btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 12px;
|
||||
|
||||
.start-chat-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.chat-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端隐藏文字
|
||||
@media (max-width: 768px) {
|
||||
.start-chat-btn-container {
|
||||
margin-right: 8px;
|
||||
|
||||
.start-chat-btn {
|
||||
padding: 8px;
|
||||
|
||||
.btn-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,95 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useColorMode } from '@vueuse/core';
|
||||
|
||||
// 使用 VueUse 的 useColorMode
|
||||
const mode = useColorMode({
|
||||
attribute: 'class',
|
||||
modes: {
|
||||
light: 'light',
|
||||
dark: 'dark',
|
||||
},
|
||||
});
|
||||
|
||||
// 切换主题
|
||||
function toggleTheme() {
|
||||
mode.value = mode.value === 'dark' ? 'light' : 'dark';
|
||||
}
|
||||
|
||||
// 主题图标
|
||||
const themeIcon = computed(() => {
|
||||
return mode.value === 'dark' ? 'Sunny' : 'Moon';
|
||||
});
|
||||
|
||||
// 主题标题
|
||||
const themeTitle = computed(() => {
|
||||
return mode.value === 'dark' ? '切换到浅色模式' : '切换到深色模式';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="theme-btn-container" data-tour="theme-btn">
|
||||
<div
|
||||
class="theme-btn"
|
||||
:title="themeTitle"
|
||||
@click="toggleTheme"
|
||||
>
|
||||
<!-- PC端显示文字 + 图标 -->
|
||||
<el-icon class="theme-icon">
|
||||
<component :is="`i-ep-${themeIcon}`" />
|
||||
</el-icon>
|
||||
<span class="pc-text">主题</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.theme-btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.theme-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
color: var(--el-text-color-regular);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.theme-icon {
|
||||
font-size: 18px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&:hover .theme-icon {
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
|
||||
// PC端显示文字
|
||||
.pc-text {
|
||||
display: inline;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端隐藏文字
|
||||
@media (max-width: 768px) {
|
||||
.theme-btn-container {
|
||||
.theme-btn {
|
||||
padding: 8px;
|
||||
|
||||
.pc-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,87 +0,0 @@
|
||||
<!-- 标题编辑 -->
|
||||
<script setup lang="ts">
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue';
|
||||
import { useSessionStore } from '@/stores/modules/session';
|
||||
|
||||
const sessionStore = useSessionStore();
|
||||
|
||||
const currentSession = computed(() => sessionStore.currentSession);
|
||||
|
||||
function handleClickTitle() {
|
||||
ElMessageBox.prompt('', '编辑对话名称', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputErrorMessage: '请输入对话名称',
|
||||
confirmButtonClass: 'el-button--primary',
|
||||
cancelButtonClass: 'el-button--info',
|
||||
roundButton: true,
|
||||
inputValue: currentSession.value?.sessionTitle,
|
||||
inputValidator: (value) => {
|
||||
if (!value) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
})
|
||||
.then(({ value }) => {
|
||||
sessionStore
|
||||
.updateSession({
|
||||
id: currentSession.value!.id,
|
||||
sessionTitle: value,
|
||||
sessionContent: currentSession.value!.sessionContent,
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '修改成功',
|
||||
});
|
||||
nextTick(() => {
|
||||
// 如果是当前会话，则更新当前选中会话信息
|
||||
sessionStore.setCurrentSession({
|
||||
...currentSession.value,
|
||||
sessionTitle: value,
|
||||
});
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
// ElMessage({
|
||||
// type: 'info',
|
||||
// message: '取消修改',
|
||||
// });
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="currentSession" class="w-full h-full flex flex-col justify-center">
|
||||
<div class="box-border mr-20px">
|
||||
<div
|
||||
class="title-editing-container p-4px w-fit max-w-full flex items-center justify-start cursor-pointer select-none hover:bg-[rgba(0,0,0,.04)] cursor-pointer rounded-md font-size-14px"
|
||||
@click="handleClickTitle"
|
||||
>
|
||||
<div class="text-overflow select-none pr-8px">
|
||||
{{ currentSession.sessionTitle }}
|
||||
</div>
|
||||
<SvgIcon name="draft-line" size="14" class="flex-none c-gray-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.title-editing-container {
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
.svg-icon {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.svg-icon {
|
||||
display: none;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,75 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { QuestionFilled } from '@element-plus/icons-vue';
|
||||
import { useGuideTour } from '@/hooks/useGuideTour';
|
||||
|
||||
const { startHeaderTour } = useGuideTour();
|
||||
|
||||
// 开始引导教程
|
||||
function handleStartTutorial() {
|
||||
startHeaderTour();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tutorial-btn-container" data-tour="tutorial-btn">
|
||||
<div
|
||||
class="tutorial-btn"
|
||||
@click="handleStartTutorial"
|
||||
>
|
||||
<!-- PC端显示文字 -->
|
||||
<span class="pc-text">新手引导</span>
|
||||
<!-- 移动端显示图标 -->
|
||||
<el-icon class="mobile-icon" :size="20">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tutorial-btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tutorial-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #409eff;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #66b1ff;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
// PC端显示文字，隐藏图标
|
||||
.pc-text {
|
||||
display: inline;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.mobile-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端显示图标，隐藏文字
|
||||
@media (max-width: 768px) {
|
||||
.tutorial-btn-container {
|
||||
.tutorial-btn {
|
||||
.pc-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-icon {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,122 +0,0 @@
|
||||
<!-- Header 头部 -->
|
||||
<script setup lang="ts">
|
||||
import { onKeyStroke } from '@vueuse/core';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { SIDE_BAR_WIDTH } from '@/config/index';
|
||||
import { useDesignStore, useUserStore } from '@/stores';
|
||||
import { useSessionStore } from '@/stores/modules/session';
|
||||
import AiTutorialBtn from './components/AiTutorialBtn.vue';
|
||||
import AnnouncementBtn from './components/AnnouncementBtn.vue';
|
||||
import Avatar from './components/Avatar.vue';
|
||||
import BuyBtn from './components/BuyBtn.vue';
|
||||
import Collapse from './components/Collapse.vue';
|
||||
import ConsoleBtn from './components/ConsoleBtn.vue';
|
||||
import CreateChat from './components/CreateChat.vue';
|
||||
import LoginBtn from './components/LoginBtn.vue';
|
||||
import ModelLibraryBtn from './components/ModelLibraryBtn.vue';
|
||||
import StartChatBtn from './components/StartChatBtn.vue';
|
||||
import ThemeBtn from './components/ThemeBtn.vue';
|
||||
import TitleEditing from './components/TitleEditing.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const designStore = useDesignStore();
|
||||
const sessionStore = useSessionStore();
|
||||
|
||||
const avatarRef = ref();
|
||||
|
||||
const currentSession = computed(() => sessionStore.currentSession);
|
||||
|
||||
onMounted(() => {
|
||||
// 全局设置侧边栏默认宽度 (这个是不变的，一开始就设置)
|
||||
document.documentElement.style.setProperty(`--sidebar-default-width`, `${SIDE_BAR_WIDTH}px`);
|
||||
if (designStore.isCollapse) {
|
||||
document.documentElement.style.setProperty(`--sidebar-left-container-default-width`, ``);
|
||||
}
|
||||
else {
|
||||
document.documentElement.style.setProperty(
|
||||
`--sidebar-left-container-default-width`,
|
||||
`${SIDE_BAR_WIDTH}px`,
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// 定义 Ctrl+K 的处理函数
|
||||
function handleCtrlK(event: KeyboardEvent) {
|
||||
event.preventDefault(); // 防止默认行为
|
||||
sessionStore.createSessionBtn();
|
||||
}
|
||||
|
||||
// 设置全局的键盘按键监听
|
||||
onKeyStroke(event => event.ctrlKey && event.key.toLowerCase() === 'k', handleCtrlK, {
|
||||
passive: false,
|
||||
});
|
||||
|
||||
// 打开控制台
|
||||
function handleOpenConsole() {
|
||||
router.push('/console');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="header-container">
|
||||
<div class="header-box relative z-10 top-0 left-0 right-0">
|
||||
<div class="absolute left-0 right-0 top-0 bottom-0 flex items-center flex-row">
|
||||
<div
|
||||
class="overflow-hidden flex h-full items-center flex-row flex-1 w-fit flex-shrink-0 min-w-0"
|
||||
>
|
||||
<div class="w-full flex items-center flex-row">
|
||||
<!-- 左边 -->
|
||||
<div
|
||||
v-if="designStore.isCollapse"
|
||||
class="left-box flex h-full items-center pl-20px gap-12px flex-shrink-0 flex-row"
|
||||
>
|
||||
<Collapse />
|
||||
<CreateChat />
|
||||
<div v-if="currentSession" class="w-0.5px h-30px bg-[rgba(217,217,217)]" />
|
||||
</div>
|
||||
|
||||
<!-- 中间 -->
|
||||
<div class="middle-box flex-1 min-w-0 ml-12px">
|
||||
<TitleEditing />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-box flex h-full items-center pr-20px flex-shrink-0 mr-auto flex-row">
|
||||
<StartChatBtn />
|
||||
<AnnouncementBtn />
|
||||
<ModelLibraryBtn />
|
||||
<ThemeBtn />
|
||||
<AiTutorialBtn />
|
||||
<ConsoleBtn @open-console="handleOpenConsole" />
|
||||
<BuyBtn v-show="userStore.userInfo" />
|
||||
<Avatar v-show="userStore.userInfo" ref="avatarRef" />
|
||||
<LoginBtn v-show="!userStore.userInfo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
.header-box {
|
||||
width: 100%;
|
||||
width: calc(
|
||||
100% - var(--sidebar-left-container-default-width, 0px) - var(
|
||||
--sidebar-right-container-default-width,
|
||||
0px
|
||||
)
|
||||
);
|
||||
height: var(--header-container-default-heigth);
|
||||
margin: 0 var(--sidebar-right-container-default-width, 0) 0
|
||||
var(--sidebar-left-container-default-width, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +0,0 @@
|
||||
<!-- Logo -->
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div>Logo</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -1,89 +0,0 @@
|
||||
<!-- Main -->
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useDesignStore } from '@/stores';
|
||||
import { useKeepAliveStore } from '@/stores/modules/keepAlive';
|
||||
|
||||
const designStore = useDesignStore();
|
||||
const keepAliveStore = useKeepAliveStore();
|
||||
const useroute = useRoute();
|
||||
|
||||
const transitionName = computed(() => {
|
||||
if (useroute.meta.isDefaultChat) {
|
||||
return 'slide';
|
||||
}
|
||||
else {
|
||||
return designStore.pageAnimateType;
|
||||
}
|
||||
});
|
||||
|
||||
// 刷新当前路由页面缓存方法
|
||||
const isRouterShow = ref(true);
|
||||
const refreshMainPage = (val: boolean) => (isRouterShow.value = val);
|
||||
provide('refresh', refreshMainPage);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-main
|
||||
class="layout-main"
|
||||
:class="{ 'layout-main-overfow-hidden': useroute.meta.isDefaultChat }"
|
||||
>
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition :name="transitionName" mode="out-in" appear>
|
||||
<keep-alive :max="10" :include="keepAliveStore.keepAliveName">
|
||||
<component :is="Component" v-if="isRouterShow" :key="route.fullPath" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.layout-main-overfow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 默认聊天页面：上下滑动动画 */
|
||||
.slide-enter-from {
|
||||
margin-top: 200px;
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: all 0.3s; /* 缓出动画 */
|
||||
}
|
||||
.slide-enter-to {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
.slide-leave-from {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
.slide-leave-to {
|
||||
margin-top: 200px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 带id聊天页面：中间缩放动画 */
|
||||
// .zoom-fade-enter-from {
|
||||
// transform: scale(0.9); /* 进入前：缩小隐藏 */
|
||||
// opacity: 0;
|
||||
// }
|
||||
// .zoom-fade-enter-active,
|
||||
// .zoom-fade-leave-active {
|
||||
// transition: all 0.3s; /* 缓入动画 */
|
||||
// }
|
||||
// .zoom-fade-enter-to {
|
||||
// transform: scale(1); /* 进入后：正常大小 */
|
||||
// opacity: 1;
|
||||
// }
|
||||
// .zoom-fade-leave-from {
|
||||
// transform: scale(1); /* 离开前：正常大小 */
|
||||
// opacity: 1;
|
||||
// }
|
||||
// .zoom-fade-leave-to {
|
||||
// transform: scale(0.9); /* 离开后：缩小隐藏 */
|
||||
// opacity: 0;
|
||||
// }
|
||||
</style>
|
||||
@@ -7,8 +7,8 @@ import { ElMessage } from 'element-plus';
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import ModelSelect from '@/components/ModelSelect/index.vue';
|
||||
import WelecomeText from '@/components/WelecomeText/index.vue';
|
||||
import Collapse from '@/layouts/components0/Header/components/Collapse.vue';
|
||||
import CreateChat from '@/layouts/components0/Header/components/CreateChat.vue';
|
||||
import Collapse from '@/layouts/components/Header/components/Collapse.vue';
|
||||
import CreateChat from '@/layouts/components/Header/components/CreateChat.vue';
|
||||
import { useUserStore } from '@/stores';
|
||||
import { useFilesStore } from '@/stores/modules/files';
|
||||
import { useSessionStore } from '@/stores/modules/session';
|
||||
|
||||
@@ -13,10 +13,10 @@ import { Sender } from 'vue-element-plus-x';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { send } from '@/api';
|
||||
import ModelSelect from '@/components/ModelSelect/index.vue';
|
||||
import Collapse from '@/layouts/components0/Header/components/Collapse.vue';
|
||||
import Collapse from '@/layouts/components/Header/components/Collapse.vue';
|
||||
|
||||
import CreateChat from '@/layouts/components0/Header/components/CreateChat.vue';
|
||||
import TitleEditing from '@/layouts/components0/Header/components/TitleEditing.vue';
|
||||
import CreateChat from '@/layouts/components/Header/components/CreateChat.vue';
|
||||
import TitleEditing from '@/layouts/components/Header/components/TitleEditing.vue';
|
||||
import { useDesignStore, useGuideTourStore } from '@/stores';
|
||||
import { useChatStore } from '@/stores/modules/chat';
|
||||
import { useFilesStore } from '@/stores/modules/files';
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script lang="ts" setup>
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import SupportModelProducts from '@/components/SupportModelProducts/indexl.vue';
|
||||
import wx from '/src/assets/images/wx.png'
|
||||
import wx from '/src/assets/images/wx.png';
|
||||
|
||||
const wxSrc = computed(
|
||||
() => wx,
|
||||
);
|
||||
@@ -192,7 +193,7 @@ function openContact() {
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6 flex justify-center">
|
||||
<div class="text-center relative">
|
||||
<div v-if="false" class="text-center relative">
|
||||
<h3 class="text-lg font-bold mb-3">
|
||||
请扫码加入微信交流群<br>
|
||||
备注ai获取专属客服支持
|
||||
@@ -344,10 +345,10 @@ function openContact() {
|
||||
</p>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<el-divider class="my-16">
|
||||
<el-divider v-if="false" class="my-16">
|
||||
加入群聊
|
||||
</el-divider>
|
||||
<el-collapse class="max-w-3xl mx-auto flex justify-center" accordion>
|
||||
<el-collapse v-if="false" class="max-w-3xl mx-auto flex justify-center" accordion>
|
||||
<el-image
|
||||
style="width: 200px; height: 200px;"
|
||||
:src="wxGroupQD"
|
||||
|
||||
43
Yi.Ai.Vue3/src/utils/contact-us.ts
Normal file
43
Yi.Ai.Vue3/src/utils/contact-us.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
|
||||
import ElementPlus from 'element-plus';
|
||||
import { createApp, h } from 'vue';
|
||||
import ContactUs from '@/components/ContactUs/index.vue';
|
||||
import type { ContactScenario, ContactType } from '@/components/ContactUs/index.vue';
|
||||
import router from '@/routers';
|
||||
import store from '@/stores';
|
||||
|
||||
export interface ShowContactUsOptions {
|
||||
scenario?: ContactScenario;
|
||||
customTypes?: ContactType;
|
||||
}
|
||||
|
||||
export function showContactUs(options: ShowContactUsOptions = {}) {
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
|
||||
const app = createApp({
|
||||
render() {
|
||||
return h(ContactUs, {
|
||||
scenario: options.scenario || 'regular',
|
||||
customTypes: options.customTypes,
|
||||
onClose: () => {
|
||||
app.unmount();
|
||||
div.remove();
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// 关键：必须在 mount 之前按顺序注册所有依赖
|
||||
app.use(store); // 1. 先注册 store
|
||||
app.use(router); // 2. 再注册 router
|
||||
app.use(ElementPlus); // 3. 最后注册 ElementPlus
|
||||
|
||||
// 注册 Element Plus 图标
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component);
|
||||
}
|
||||
|
||||
// 最后才挂载应用
|
||||
app.mount(div);
|
||||
}
|
||||
16
Yi.Ai.Vue3/types/components.d.ts
vendored
16
Yi.Ai.Vue3/types/components.d.ts
vendored
@@ -12,16 +12,20 @@ declare module 'vue' {
|
||||
ActivationCode: typeof import('./../src/components/userPersonalCenter/components/ActivationCode.vue')['default']
|
||||
APIKeyManagement: typeof import('./../src/components/userPersonalCenter/components/APIKeyManagement.vue')['default']
|
||||
CardFlipActivity: typeof import('./../src/components/userPersonalCenter/components/CardFlipActivity.vue')['default']
|
||||
ContactUs: typeof import('./../src/components/ContactUs/index.vue')['default']
|
||||
DailyTask: typeof import('./../src/components/userPersonalCenter/components/DailyTask.vue')['default']
|
||||
DeepThinking: typeof import('./../src/components/DeepThinking/index.vue')['default']
|
||||
ElAlert: typeof import('element-plus/es')['ElAlert']
|
||||
ElAvatar: typeof import('element-plus/es')['ElAvatar']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCard: typeof import('element-plus/es')['ElCard']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCheckTag: typeof import('element-plus/es')['ElCheckTag']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElCollapse: typeof import('element-plus/es')['ElCollapse']
|
||||
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
|
||||
ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
|
||||
ElContainer: typeof import('element-plus/es')['ElContainer']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElDivider: typeof import('element-plus/es')['ElDivider']
|
||||
ElDrawer: typeof import('element-plus/es')['ElDrawer']
|
||||
@@ -31,21 +35,30 @@ declare module 'vue' {
|
||||
ElHeader: typeof import('element-plus/es')['ElHeader']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElImage: typeof import('element-plus/es')['ElImage']
|
||||
ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElMain: typeof import('element-plus/es')['ElMain']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
||||
ElSegmented: typeof import('element-plus/es')['ElSegmented']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
|
||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElTimeline: typeof import('element-plus/es')['ElTimeline']
|
||||
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
|
||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||
FilesSelect: typeof import('./../src/components/FilesSelect/index.vue')['default']
|
||||
IconSelect: typeof import('./../src/components/IconSelect/index.vue')['default']
|
||||
Indexl: typeof import('./../src/components/SupportModelProducts/indexl.vue')['default']
|
||||
@@ -74,6 +87,7 @@ declare module 'vue' {
|
||||
WelecomeText: typeof import('./../src/components/WelecomeText/index.vue')['default']
|
||||
}
|
||||
export interface GlobalDirectives {
|
||||
vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
|
||||
vLoading: typeof import('element-plus/es')['ElLoadingDirective']
|
||||
}
|
||||
}
|
||||
|
||||
47
Yi.Ai.Vue3/项目优化0108.text
Normal file
47
Yi.Ai.Vue3/项目优化0108.text
Normal file
@@ -0,0 +1,47 @@
|
||||
1.免费模型逻辑更改:
|
||||
原本的免费模型是通过前端写死的（'DeepSeek-R1-0528'），现在后端会返回IsFree =true 代表免费模型。请更改：
|
||||
1.1 Yi.Ai.Vue3/src/components/ModelSelect/index.vue
|
||||
1.2 Yi.Ai.Vue3/src/components/userPersonalCenter/components/SupportModelList.vue
|
||||
|
||||
|
||||
|
||||
3.立即购买弹窗现在虽然做成了随处可调用，但是没法用router，你看下怎么改改。
|
||||
代码：Yi.Ai.Vue3/src/utils/product-package.ts
|
||||
使用的地方有：
|
||||
Yi.Ai.Vue3/src/components/ModelSelect/index.vue；
|
||||
Yi.Ai.Vue3/src/layouts/components/Header/components/BuyBtn.vue
|
||||
Yi.Ai.Vue3/src/layouts/components/Header/components/BuyBtn.vue
|
||||
Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumPackageInfo.vue
|
||||
|
||||
|
||||
3.顶部菜单增加“联系我们”，点击后弹窗展示群二维码和客服微信二维码，参考”立即购买“弹窗底部的添加客服，我认为这个弹窗你应该作为可配置的，比如把这个按钮组件放在随便那里点击就能弹出，然后把现在的联系我们相关内容替换，然后联系方式里面：
|
||||
2.1 客服微信和二维码
|
||||
2.2 交流群二维码
|
||||
2.3 售后群二维码
|
||||
2.4 其他
|
||||
然后可以配置需要展示那种内容，比如
|
||||
场景1：常规 展示微信交流群与客服
|
||||
场景2：售后 展示售后群与客服
|
||||
场景3：展示所有
|
||||
场景4：xxx
|
||||
使用场景：
|
||||
顶部菜单：Yi.Ai.Vue3/src/layouts/components/Header/index.vue
|
||||
购买弹窗：Yi.Ai.Vue3/src/utils/product-package.ts
|
||||
购买记录联系售后：
|
||||
Yi.Ai.Vue3/src/components/userPersonalCenter/components/RechargeLog.vue（这个页面有购买记录就可以展示售后群）
|
||||
|
||||
4.立即购买弹窗里面加一个tab页面，”新人特惠“，新人特惠组合包，提示前往淘宝店铺购买，然后放淘宝链接（点击跳转、）淘口令（点击复制），产品二维码（提示打开淘宝扫描）
|
||||
|
||||
|
||||
5.立即购买的左侧展示模型列表的换成跳转模型库，详情页也是（ // 模型库
|
||||
{
|
||||
path: 'model-library',
|
||||
name: 'modelLibrary',
|
||||
component: () => import('@/pages/modelLibrary/index.vue'),
|
||||
meta: {
|
||||
title: '意心Ai-模型库',
|
||||
keepAlive: 0,
|
||||
isDefaultChat: false,
|
||||
layout: 'default',
|
||||
},
|
||||
},）
|
||||
Reference in New Issue
Block a user