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

feat: 前端2.4版本

Browse Source
This commit is contained in:
Gsh
2025-11-26 21:05:06 +08:00
parent cf5bf746ef
commit 02a5f69958
6 changed files with 108 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Yi.Ai.Vue3/index.html
View File

@@ -112,7 +112,7 @@
<body> <body>
<!-- 加载动画容器 --> <!-- 加载动画容器 -->
<div id="yixinai-loader" class="loader-container"> <div id="yixinai-loader" class="loader-container">
<div class="loader-title">意心Ai 2.3</div> <div class="loader-title">意心Ai 2.4</div>
<div class="loader-subtitle">海外地址，仅首次访问预计加载约10秒</div> <div class="loader-subtitle">海外地址，仅首次访问预计加载约10秒</div>
<div class="loader-logo"> <div class="loader-logo">
<div class="pulse-box"></div> <div class="pulse-box"></div>

1
Yi.Ai.Vue3/src/components/SvgIcon/index.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
// 图标文档 https://remixicon.com/
const props = defineProps<{ const props = defineProps<{
className?: string; className?: string;
name: string; name: string;

88
Yi.Ai.Vue3/src/layouts/components/Header/components/AiTutorialBtn.vue Normal file
View File

@@ -0,0 +1,88 @@
<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">AI使用教程</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>

6
Yi.Ai.Vue3/src/layouts/components/Header/components/AnnouncementBtn.vue
View File

@@ -33,7 +33,7 @@ function openAnnouncement() {
@click="openAnnouncement" @click="openAnnouncement"
> >
<!-- PC端显示文字 --> <!-- PC端显示文字 -->
<span class="pc-text">公告/活动</span> <span class="pc-text">公告</span>
<!-- 移动端显示图标 --> <!-- 移动端显示图标 -->
<el-icon class="mobile-icon" :size="20"> <el-icon class="mobile-icon" :size="20">
<Bell /> <Bell />
@@ -62,11 +62,11 @@ function openAnnouncement() {
cursor: pointer; cursor: pointer;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: bold; font-weight: bold;
color: #e6a23c; color: #409eff;
transition: all 0.2s; transition: all 0.2s;
&:hover { &:hover {
color: #ebb563; color: #66b1ff;
transform: translateY(-1px); transform: translateY(-1px);
} }

74
Yi.Ai.Vue3/src/layouts/components/Header/components/Avatar.vue
View File

@@ -51,6 +51,11 @@ const popoverList = ref([
title: '用户中心', title: '用户中心',
icon: 'settings-4-fill', icon: 'settings-4-fill',
}, },
{
key: '6',
title: '新手引导',
icon: 'dashboard-fill',
},
{ {
key: '3', key: '3',
divider: true, divider: true,
@@ -100,7 +105,12 @@ function handleNavChange(nav: string) {
function handleContactSupport() { function handleContactSupport() {
rechargeLogRef.value?.contactCustomerService(); rechargeLogRef.value?.contactCustomerService();
} }
const { startHeaderTour } = useGuideTour();
// 开始引导教程
function handleStartTutorial() {
startHeaderTour();
}
// 点击 // 点击
function handleClick(item: any) { function handleClick(item: any) {
switch (item.key) { switch (item.key) {
@@ -113,6 +123,9 @@ function handleClick(item: any) {
case '5': case '5':
openDialog(); openDialog();
break; break;
case '6':
handleStartTutorial();
break;
case '4': case '4':
popoverRef.value?.hide?.(); popoverRef.value?.hide?.();
ElMessageBox.confirm('退出登录不会丢失任何数据，你仍可以登录此账号。', '确认退出登录？', { ElMessageBox.confirm('退出登录不会丢失任何数据，你仍可以登录此账号。', '确认退出登录？', {
@@ -278,49 +291,6 @@ watch(() => guideTourStore.shouldStartUserCenterTour, (shouldStart) => {
<template> <template>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<!-- <div class="text-1.2xl font-bold text-gray-800 hover:text-blue-600 transition-colors"> -->
<!-- <a -->
<!-- href="https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde" -->
<!-- target="_blank" -->
<!-- class="flex items-center gap-2 group" -->
<!-- style="color: #E6A23C;" -->
<!-- title="点击跳转YiXinAI玩法指南专栏" -->
<!-- > -->
<!-- AI使用教程 -->
<!-- </a> -->
<!-- </div> -->
<div class="text-1.2xl font-bold text-gray-800 hover:text-blue-600 transition-colors" data-tour="ai-tutorial-link">
<a
href="https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde"
target="_blank"
class="flex items-center gap-2 group"
style="color: #E6A23C;"
title="点击跳转YiXinAI玩法指南专栏"
>
<!-- PC端显示文字 -->
<span class="pc-text">AI使用教程</span>
<!-- 移动端显示图标，这里用一个示例SVG，实际可以换成你想要的 -->
<svg
class="inline md:hidden w-6 h-6 text-yellow-500"
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>
</a>
</div>
<el-button <el-button
class="buy-btn flex items-center gap-2 px-5 py-2 font-semibold shadow-lg" class="buy-btn flex items-center gap-2 px-5 py-2 font-semibold shadow-lg"
data-tour="buy-btn" data-tour="buy-btn"
@@ -523,22 +493,4 @@ watch(() => guideTourStore.shouldStartUserCenterTour, (shouldStart) => {
0%, 100% { transform: translateY(0); } 0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); } 50% { transform: translateY(-4px); }
} }
/* 默认 PC 端文字显示，图标隐藏 */
.pc-text {
display: inline;
}
.mobile-icon {
display: none;
}
/* 移动端显示图标，隐藏文字 */
@media (max-width: 768px) {
.pc-text {
display: none;
}
.mobile-icon {
display: inline;
}
}
</style> </style>

4
Yi.Ai.Vue3/src/layouts/components/Header/index.vue
View File

@@ -4,13 +4,13 @@ import { onKeyStroke } from '@vueuse/core';
import { SIDE_BAR_WIDTH } from '@/config/index'; import { SIDE_BAR_WIDTH } from '@/config/index';
import { useDesignStore, useUserStore } from '@/stores'; import { useDesignStore, useUserStore } from '@/stores';
import { useSessionStore } from '@/stores/modules/session'; import { useSessionStore } from '@/stores/modules/session';
import AiTutorialBtn from './components/AiTutorialBtn.vue';
import AnnouncementBtn from './components/AnnouncementBtn.vue'; import AnnouncementBtn from './components/AnnouncementBtn.vue';
import Avatar from './components/Avatar.vue'; import Avatar from './components/Avatar.vue';
import Collapse from './components/Collapse.vue'; import Collapse from './components/Collapse.vue';
import CreateChat from './components/CreateChat.vue'; import CreateChat from './components/CreateChat.vue';
import LoginBtn from './components/LoginBtn.vue'; import LoginBtn from './components/LoginBtn.vue';
import TitleEditing from './components/TitleEditing.vue'; import TitleEditing from './components/TitleEditing.vue';
import TutorialBtn from './components/TutorialBtn.vue';
const userStore = useUserStore(); const userStore = useUserStore();
const designStore = useDesignStore(); const designStore = useDesignStore();
@@ -72,7 +72,7 @@ onKeyStroke(event => event.ctrlKey && event.key.toLowerCase() === 'k', handleCtr
<!-- 右边 --> <!-- 右边 -->
<div class="right-box flex h-full items-center pr-20px flex-shrink-0 mr-auto flex-row"> <div class="right-box flex h-full items-center pr-20px flex-shrink-0 mr-auto flex-row">
<AnnouncementBtn /> <AnnouncementBtn />
<TutorialBtn /> <AiTutorialBtn />
<Avatar v-show="userStore.userInfo" /> <Avatar v-show="userStore.userInfo" />
<LoginBtn v-show="!userStore.userInfo" /> <LoginBtn v-show="!userStore.userInfo" />
</div> </div>