fix: 前端页面架构重构初版
This commit is contained in:
Gsh
226
Yi.Ai.Vue3/src/pages/chat/components/ConversationList.vue
Normal file
226
Yi.Ai.Vue3/src/pages/chat/components/ConversationList.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { useSessionStore } from '@/stores';
|
||||
|
||||
const router = useRouter();
|
||||
const sessionStore = useSessionStore();
|
||||
|
||||
// 会话列表加载状态
|
||||
const loading = computed(() => sessionStore.isLoading);
|
||||
const sessionList = computed(() => sessionStore.sessionList);
|
||||
|
||||
// 新建对话
|
||||
function handleNewChat() {
|
||||
router.push('/chat/conversation');
|
||||
}
|
||||
|
||||
// 选择对话
|
||||
function handleSelectSession(sessionId: string) {
|
||||
router.push(`/chat/conversation/${sessionId}`);
|
||||
}
|
||||
|
||||
// 删除对话
|
||||
async function handleDeleteSession(sessionId: string, sessionTitle: string) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除对话"${sessionTitle}"吗？`,
|
||||
'删除确认',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
},
|
||||
);
|
||||
|
||||
await sessionStore.deleteSessions([sessionId]);
|
||||
ElMessage.success('删除成功');
|
||||
|
||||
// 如果删除的是当前对话，跳转到新建页面
|
||||
if (router.currentRoute.value.params.id === sessionId) {
|
||||
router.push('/chat/conversation');
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 重命名对话
|
||||
async function handleRenameSession(sessionId: string, oldTitle: string) {
|
||||
try {
|
||||
const { value: newTitle } = await ElMessageBox.prompt('请输入新的对话名称', '重命名对话', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputValue: oldTitle,
|
||||
inputPattern: /\S+/,
|
||||
inputErrorMessage: '对话名称不能为空',
|
||||
});
|
||||
|
||||
if (newTitle && newTitle !== oldTitle) {
|
||||
await sessionStore.updateSession({
|
||||
id: sessionId,
|
||||
title: newTitle,
|
||||
});
|
||||
ElMessage.success('重命名成功');
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('重命名失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
function handleLoadMore() {
|
||||
sessionStore.loadMoreSessions();
|
||||
}
|
||||
|
||||
// 初始化加载
|
||||
onMounted(() => {
|
||||
if (sessionList.value.length === 0) {
|
||||
sessionStore.requestSessionList();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="conversation-list">
|
||||
<!-- 新建对话按钮 -->
|
||||
<div class="new-chat-btn">
|
||||
<el-button type="primary" size="large" style="width: 100%;" @click="handleNewChat">
|
||||
<el-icon><i-ep-plus /></el-icon>
|
||||
新建对话
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 对话列表 -->
|
||||
<div v-loading="loading" class="session-list">
|
||||
<div
|
||||
v-for="session in sessionList"
|
||||
:key="session.id"
|
||||
class="session-item"
|
||||
:class="{ active: $route.params.id === session.id }"
|
||||
@click="handleSelectSession(session.id)"
|
||||
>
|
||||
<div class="session-content">
|
||||
<div class="session-title">
|
||||
{{ session.title || '未命名对话' }}
|
||||
</div>
|
||||
<div class="session-time">
|
||||
{{ session.updateTime || session.createTime }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="session-actions">
|
||||
<el-dropdown trigger="click" @command="(cmd: string) => cmd === 'delete' ? handleDeleteSession(session.id, session.title) : handleRenameSession(session.id, session.title)">
|
||||
<el-button size="small" text circle @click.stop>
|
||||
<el-icon><i-ep-more-filled /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="rename">
|
||||
<el-icon><i-ep-edit /></el-icon>
|
||||
重命名
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="delete">
|
||||
<el-icon><i-ep-delete /></el-icon>
|
||||
删除
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<div v-if="sessionStore.hasMore" class="load-more">
|
||||
<el-button text @click="handleLoadMore">
|
||||
加载更多
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<el-empty v-if="!loading && sessionList.length === 0" description="暂无对话记录" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.conversation-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 260px;
|
||||
border-right: 1px solid var(--el-border-color);
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
|
||||
.new-chat-btn {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.session-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.session-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
border-left: 3px solid var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.session-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.session-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.session-time {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.session-actions {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
.session-item:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
}
|
||||
</style>
|
||||
44
Yi.Ai.Vue3/src/pages/chat/conversation/index.vue
Normal file
44
Yi.Ai.Vue3/src/pages/chat/conversation/index.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router';
|
||||
import ChatAside from '@/layouts/components/ChatAside/index.vue';
|
||||
import { useDesignStore } from '@/stores';
|
||||
import ChatDefault from '../layouts/chatDefaul/index.vue';
|
||||
import ChatWithId from '../layouts/chatWithId/index.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const designStore = useDesignStore();
|
||||
|
||||
const sessionId = computed(() => route.params?.id);
|
||||
// const sessionId = true;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="conversation-page">
|
||||
<!-- 左侧对话列表 -->
|
||||
<!-- <ConversationList /> -->
|
||||
<!-- <ChatAside v-show="designStore.isCollapseConversationList" /> -->
|
||||
<ChatAside />
|
||||
<!-- 右侧聊天内容 -->
|
||||
<div class="chat-content">
|
||||
<ChatDefault v-if="!sessionId" />
|
||||
<ChatWithId v-else />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.conversation-page {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--header-container-default-height));
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
26
Yi.Ai.Vue3/src/pages/chat/image/index.vue
Normal file
26
Yi.Ai.Vue3/src/pages/chat/image/index.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
// 图片生成功能 - 预留
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="image-generation-page">
|
||||
<el-empty description="图片生成功能开发中，敬请期待">
|
||||
<template #image>
|
||||
<el-icon style="font-size: 80px; color: var(--el-color-primary);">
|
||||
<i-ep-picture />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-empty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.image-generation-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +1,304 @@
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router';
|
||||
import ChatDefaul from '@/pages/chat/layouts/chatDefaul/index.vue';
|
||||
import ChatWithId from '@/pages/chat/layouts/chatWithId/index.vue';
|
||||
import { Expand, Fold } from '@element-plus/icons-vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
const sessionId = computed(() => route.params?.id);
|
||||
const router = useRouter();
|
||||
|
||||
// 控制侧边栏折叠状态
|
||||
const isCollapsed = ref(false);
|
||||
|
||||
// 菜单项配置
|
||||
const navItems = [
|
||||
{ name: 'conversation', label: '对话', icon: 'ChatDotRound', path: '/chat/conversation' },
|
||||
{ name: 'image', label: '图片生成', icon: 'Picture', path: '/chat/image' },
|
||||
{ name: 'video', label: '视频生成', icon: 'VideoCamera', path: '/chat/video' },
|
||||
];
|
||||
|
||||
// 当前激活的菜单
|
||||
const activeNav = computed(() => {
|
||||
const path = route.path;
|
||||
const item = navItems.find(item => item.path === path);
|
||||
return item?.name || 'user';
|
||||
});
|
||||
|
||||
// 切换菜单
|
||||
function handleNavSelect(menu: typeof navItems[0]) {
|
||||
router.push(menu.path);
|
||||
}
|
||||
|
||||
// 在移动端默认折叠侧边栏
|
||||
const isMobile = ref(false);
|
||||
function checkIsMobile() {
|
||||
isMobile.value = window.innerWidth <= 768;
|
||||
// 移动端默认折叠
|
||||
if (isMobile.value) {
|
||||
isCollapsed.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
// 初始检查和监听窗口大小变化
|
||||
checkIsMobile();
|
||||
window.addEventListener('resize', checkIsMobile);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chat-container">
|
||||
<!-- 默认聊天页面 -->
|
||||
<ChatDefaul v-if="!sessionId" />
|
||||
<!-- 带id的聊天页面 -->
|
||||
<ChatWithId v-else />
|
||||
<div class="console-page" :class="{ 'is-collapsed': isCollapsed }">
|
||||
<!-- 侧边栏导航 -->
|
||||
<div class="nav-sidebar" :class="{ 'is-collapsed': isCollapsed }">
|
||||
<div class="nav-header">
|
||||
<h2 v-show="!isCollapsed" class="nav-title">
|
||||
AI聊天
|
||||
</h2>
|
||||
<div class="collapse-btn" @click="isCollapsed = !isCollapsed">
|
||||
<el-icon>
|
||||
<Expand v-if="isCollapsed" />
|
||||
<Fold v-else />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<el-menu
|
||||
:default-active="activeNav"
|
||||
class="nav-menu"
|
||||
:collapse="isCollapsed"
|
||||
:collapse-transition="false"
|
||||
>
|
||||
<el-menu-item
|
||||
v-for="item in navItems"
|
||||
:key="item.name"
|
||||
:index="item.name"
|
||||
@click="handleNavSelect(item)"
|
||||
>
|
||||
<el-icon>
|
||||
<component :is="item.icon" />
|
||||
</el-icon>
|
||||
<template #title>
|
||||
<span>{{ item.label }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
|
||||
<!-- 折叠遮罩层（移动端） -->
|
||||
<div
|
||||
v-if="isMobile && !isCollapsed"
|
||||
class="sidebar-overlay"
|
||||
@click="isCollapsed = true"
|
||||
/>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="content-main">
|
||||
<div v-if="isMobile" class="content-header">
|
||||
<div class="mobile-toggle" @click="isCollapsed = false">
|
||||
<el-icon><i-ep-expand /></el-icon>
|
||||
<span>菜单</span>
|
||||
</div>
|
||||
</div>
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive>
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chat-container {
|
||||
position: relative;
|
||||
<style scoped lang="scss">
|
||||
.console-page {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
&.is-collapsed {
|
||||
.content-main {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sidebar {
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
border-right: var(--header-border);
|
||||
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
|
||||
&.is-collapsed {
|
||||
width: 64px;
|
||||
|
||||
.nav-title {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 70px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// width: calc(100% - 32px);
|
||||
height: 100%;
|
||||
padding: 0 16px;
|
||||
overflow-anchor: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
color: var(--el-text-color-secondary);
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
flex: 1;
|
||||
border-right: none;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
:deep(.el-menu-item) {
|
||||
&.is-active {
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
span {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.el-menu--collapse) {
|
||||
:deep(.el-menu-item) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.content-main {
|
||||
flex: 1;
|
||||
//padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-header {
|
||||
display: none;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.mobile-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--el-fill-color-light);
|
||||
cursor: pointer;
|
||||
color: var(--el-text-color-primary);
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color);
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
.console-page {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1001;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&.is-collapsed {
|
||||
transform: translateX(-100%);
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
&:not(.is-collapsed) {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content-header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content-main {
|
||||
//padding: 15px;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 平板适配
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.nav-sidebar {
|
||||
width: 200px;
|
||||
|
||||
&.is-collapsed {
|
||||
width: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-main {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,162 +7,259 @@ import { ElMessage } from 'element-plus';
|
||||
import { nextTick, ref, watch } from 'vue';
|
||||
import ModelSelect from '@/components/ModelSelect/index.vue';
|
||||
import WelecomeText from '@/components/WelecomeText/index.vue';
|
||||
import { useGuideTourStore, useUserStore } from '@/stores';
|
||||
import { useUserStore } from '@/stores';
|
||||
import { useFilesStore } from '@/stores/modules/files';
|
||||
|
||||
import { useSessionStore } from '@/stores/modules/session';
|
||||
|
||||
// Store 实例
|
||||
const userStore = useUserStore();
|
||||
const sessionStore = useSessionStore();
|
||||
const filesStore = useFilesStore();
|
||||
const guideTourStore = useGuideTourStore();
|
||||
|
||||
const senderValue = ref('');
|
||||
const senderRef = ref();
|
||||
// 响应式数据
|
||||
const senderValue = ref(''); // 输入框内容
|
||||
const senderRef = ref(); // Sender 组件引用
|
||||
const isSending = ref(false); // 发送状态标志
|
||||
|
||||
// 防抖发送函数
|
||||
const debouncedSend = useDebounceFn(async () => {
|
||||
if (!senderValue.value.trim()) {
|
||||
ElMessage.warning('消息内容不能为空');
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* 防抖发送消息函数
|
||||
*/
|
||||
const debouncedSend = useDebounceFn(
|
||||
async () => {
|
||||
// 1. 验证输入
|
||||
if (!senderValue.value.trim()) {
|
||||
ElMessage.warning('消息内容不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
if (isSending.value) {
|
||||
ElMessage.warning('请等待上一条消息发送完成');
|
||||
return;
|
||||
}
|
||||
// 2. 检查是否正在发送
|
||||
if (isSending.value) {
|
||||
ElMessage.warning('请等待上一条消息发送完成');
|
||||
return;
|
||||
}
|
||||
|
||||
const content = senderValue.value;
|
||||
isSending.value = true;
|
||||
// 3. 准备发送数据
|
||||
const content = senderValue.value.trim();
|
||||
isSending.value = true;
|
||||
|
||||
try {
|
||||
localStorage.setItem('chatContent', content);
|
||||
await sessionStore.createSessionList({
|
||||
userId: userStore.userInfo?.userId as number,
|
||||
sessionContent: content,
|
||||
sessionTitle: content.slice(0, 10),
|
||||
remark: content.slice(0, 10),
|
||||
});
|
||||
senderValue.value = ''; // 清空输入框
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error('发送消息失败:', error);
|
||||
ElMessage.error(error);
|
||||
}
|
||||
finally {
|
||||
isSending.value = false;
|
||||
}
|
||||
}, 800, { leading: true, trailing: false }); // 800ms防抖
|
||||
try {
|
||||
// 4. 保存到本地存储（可选，用于页面刷新后恢复）
|
||||
localStorage.setItem('chatContent', content);
|
||||
|
||||
// 处理发送事件
|
||||
// 5. 创建会话
|
||||
await sessionStore.createSessionList({
|
||||
userId: userStore.userInfo?.userId as number,
|
||||
sessionContent: content,
|
||||
sessionTitle: content.slice(0, 10),
|
||||
remark: content.slice(0, 10),
|
||||
});
|
||||
|
||||
// 6. 清空输入框
|
||||
senderValue.value = '';
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error('发送消息失败:', error);
|
||||
ElMessage.error(error.message || '发送消息失败');
|
||||
}
|
||||
finally {
|
||||
// 7. 重置发送状态
|
||||
isSending.value = false;
|
||||
}
|
||||
},
|
||||
800, // 防抖延迟
|
||||
{ leading: true, trailing: false }, // 立即执行第一次，忽略后续快速点击
|
||||
);
|
||||
|
||||
/**
|
||||
* 触发发送消息
|
||||
*/
|
||||
function handleSend() {
|
||||
debouncedSend();
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除文件卡片
|
||||
* @param _item 文件项
|
||||
* @param index 文件索引
|
||||
*/
|
||||
function handleDeleteCard(_item: FilesCardProps, index: number) {
|
||||
filesStore.deleteFileByIndex(index);
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听文件列表变化，自动展开/收起 Sender 头部
|
||||
*/
|
||||
watch(
|
||||
() => filesStore.filesList.length,
|
||||
(val) => {
|
||||
if (val > 0) {
|
||||
nextTick(() => {
|
||||
nextTick(() => {
|
||||
if (val > 0) {
|
||||
senderRef.value?.openHeader();
|
||||
});
|
||||
}
|
||||
else {
|
||||
nextTick(() => {
|
||||
}
|
||||
else {
|
||||
senderRef.value?.closeHeader();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chat-defaul-wrap">
|
||||
<WelecomeText />
|
||||
<Sender
|
||||
ref="senderRef"
|
||||
v-model="senderValue"
|
||||
class="chat-defaul-sender"
|
||||
data-tour="chat-sender"
|
||||
:auto-size="{
|
||||
maxRows: 9,
|
||||
minRows: 3,
|
||||
}"
|
||||
variant="updown"
|
||||
clearable
|
||||
allow-speech
|
||||
:loading="isSending"
|
||||
@submit="handleSend"
|
||||
>
|
||||
<template #header>
|
||||
<div class="sender-header p-12px pt-6px pb-0px">
|
||||
<Attachments
|
||||
:items="filesStore.filesList"
|
||||
:hide-upload="true"
|
||||
@delete-card="handleDeleteCard"
|
||||
>
|
||||
<template #prev-button="{ show, onScrollLeft }">
|
||||
<div
|
||||
v-if="show"
|
||||
class="prev-next-btn left-8px flex-center w-22px h-22px rounded-8px border-1px border-solid border-[rgba(0,0,0,0.08)] c-[rgba(0,0,0,.4)] hover:bg-#f3f4f6 bg-#fff font-size-10px"
|
||||
@click="onScrollLeft"
|
||||
>
|
||||
<el-icon>
|
||||
<ArrowLeftBold />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<div class="chat-default">
|
||||
<div class="chat-default-wrap">
|
||||
<!-- 欢迎文本 -->
|
||||
<WelecomeText />
|
||||
|
||||
<template #next-button="{ show, onScrollRight }">
|
||||
<div
|
||||
v-if="show"
|
||||
class="prev-next-btn right-8px flex-center w-22px h-22px rounded-8px border-1px border-solid border-[rgba(0,0,0,0.08)] c-[rgba(0,0,0,.4)] hover:bg-#f3f4f6 bg-#fff font-size-10px"
|
||||
@click="onScrollRight"
|
||||
>
|
||||
<el-icon>
|
||||
<ArrowRightBold />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</Attachments>
|
||||
</div>
|
||||
</template>
|
||||
<template #prefix>
|
||||
<div class="flex-1 flex items-center gap-8px flex-none w-fit overflow-hidden">
|
||||
<FilesSelect />
|
||||
<!-- 消息发送器 -->
|
||||
<Sender
|
||||
ref="senderRef"
|
||||
v-model="senderValue"
|
||||
class="chat-default-sender"
|
||||
data-tour="chat-sender"
|
||||
:auto-size="{
|
||||
maxRows: 9,
|
||||
minRows: 3,
|
||||
}"
|
||||
variant="updown"
|
||||
clearable
|
||||
allow-speech
|
||||
:loading="isSending"
|
||||
@submit="handleSend"
|
||||
>
|
||||
<!-- 头部：文件附件区域 -->
|
||||
<template #header>
|
||||
<div class="sender-header">
|
||||
<Attachments
|
||||
:items="filesStore.filesList"
|
||||
:hide-upload="true"
|
||||
@delete-card="handleDeleteCard"
|
||||
>
|
||||
<!-- 左侧滚动按钮 -->
|
||||
<template #prev-button="{ show, onScrollLeft }">
|
||||
<div
|
||||
v-if="show"
|
||||
class="scroll-btn prev-btn"
|
||||
@click="onScrollLeft"
|
||||
>
|
||||
<el-icon>
|
||||
<ArrowLeftBold />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<ModelSelect />
|
||||
</div>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<el-icon v-if="isSending" class="is-loading">
|
||||
<Loading />
|
||||
</el-icon>
|
||||
</template>
|
||||
</Sender>
|
||||
<!-- 右侧滚动按钮 -->
|
||||
<template #next-button="{ show, onScrollRight }">
|
||||
<div
|
||||
v-if="show"
|
||||
class="scroll-btn next-btn"
|
||||
@click="onScrollRight"
|
||||
>
|
||||
<el-icon>
|
||||
<ArrowRightBold />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</Attachments>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 前缀：文件选择和模型选择 -->
|
||||
<template #prefix>
|
||||
<div class="sender-prefix">
|
||||
<FilesSelect />
|
||||
<ModelSelect />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 后缀：发送加载动画 -->
|
||||
<template #suffix>
|
||||
<el-icon v-if="isSending" class="loading-icon">
|
||||
<Loading />
|
||||
</el-icon>
|
||||
</template>
|
||||
</Sender>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.chat-defaul-wrap {
|
||||
.chat-default {
|
||||
width: 100%;
|
||||
//background: #ff11f3;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
//padding: 0 0 100px;
|
||||
}
|
||||
.chat-default-wrap {
|
||||
//background: #0bdcb7;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
min-height: 450px;
|
||||
.chat-defaul-sender {
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.chat-default-sender {
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-icon.is-loading) {
|
||||
.sender-header {
|
||||
padding: 12px 12px 0 12px;
|
||||
}
|
||||
|
||||
.sender-prefix {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: none;
|
||||
width: fit-content;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroll-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
background-color: #fff;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #f3f4f6;
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
&.prev-btn {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
&.next-btn {
|
||||
right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
margin-left: 8px;
|
||||
color: var(--el-color-primary);
|
||||
animation: rotating 2s linear infinite;
|
||||
@@ -176,4 +273,21 @@ watch(
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.chat-default-wrap {
|
||||
padding: 12px;
|
||||
min-height: calc(100vh - 120px);
|
||||
|
||||
.chat-default-sender {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.sender-prefix {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -562,14 +562,16 @@ function handleImagePreview(url: string) {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.chat-with-id-container {
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
height: 100%;
|
||||
.chat-warp {
|
||||
max-width: 1000px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
26
Yi.Ai.Vue3/src/pages/chat/video/index.vue
Normal file
26
Yi.Ai.Vue3/src/pages/chat/video/index.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
// 视频生成功能 - 预留
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="video-generation-page">
|
||||
<el-empty description="视频生成功能开发中，敬请期待">
|
||||
<template #image>
|
||||
<el-icon style="font-size: 80px; color: var(--el-color-primary);">
|
||||
<i-ep-video-camera />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-empty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.video-generation-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
</style>
|
||||
313
Yi.Ai.Vue3/src/pages/console/index.vue
Normal file
313
Yi.Ai.Vue3/src/pages/console/index.vue
Normal file
@@ -0,0 +1,313 @@
|
||||
<script setup lang="ts">
|
||||
import { Expand, Fold } from '@element-plus/icons-vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
// 控制侧边栏折叠状态
|
||||
const isCollapsed = ref(false);
|
||||
|
||||
// 菜单项配置
|
||||
const navItems = [
|
||||
{ name: 'user', label: '用户信息', icon: 'User', path: '/console/user' },
|
||||
{ name: 'apikey', label: 'API密钥', icon: 'Key', path: '/console/apikey' },
|
||||
{ name: 'recharge-log', label: '充值记录', icon: 'Document', path: '/console/recharge-log' },
|
||||
{ name: 'usage', label: '用量统计', icon: 'Histogram', path: '/console/usage' },
|
||||
{ name: 'premium', label: '尊享服务', icon: 'ColdDrink', path: '/console/premium' },
|
||||
{ name: 'daily-task', label: '每日任务（限时）', icon: 'Trophy', path: '/console/daily-task' },
|
||||
{ name: 'invite', label: '每周邀请（限时）', icon: 'Present', path: '/console/invite' },
|
||||
{ name: 'activation', label: '激活码兑换', icon: 'MagicStick', path: '/console/activation' },
|
||||
];
|
||||
|
||||
// 当前激活的菜单
|
||||
const activeNav = computed(() => {
|
||||
const path = route.path;
|
||||
const item = navItems.find(item => item.path === path);
|
||||
return item?.name || 'user';
|
||||
});
|
||||
|
||||
// 切换菜单
|
||||
function handleNavSelect(menu: typeof navItems[0]) {
|
||||
router.push(menu.path);
|
||||
}
|
||||
|
||||
// 在移动端默认折叠侧边栏
|
||||
const isMobile = ref(false);
|
||||
function checkIsMobile() {
|
||||
isMobile.value = window.innerWidth <= 768;
|
||||
// 移动端默认折叠
|
||||
if (isMobile.value) {
|
||||
isCollapsed.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
// 初始检查和监听窗口大小变化
|
||||
checkIsMobile();
|
||||
window.addEventListener('resize', checkIsMobile);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="console-page" :class="{ 'is-collapsed': isCollapsed }">
|
||||
<!-- 侧边栏导航 -->
|
||||
<div class="nav-sidebar" :class="{ 'is-collapsed': isCollapsed }">
|
||||
<div class="nav-header">
|
||||
<h2 v-show="!isCollapsed" class="nav-title">
|
||||
控制台
|
||||
</h2>
|
||||
<div class="collapse-btn" @click="isCollapsed = !isCollapsed">
|
||||
<el-icon>
|
||||
<Expand v-if="isCollapsed" />
|
||||
<Fold v-else />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<el-menu
|
||||
:default-active="activeNav"
|
||||
class="nav-menu"
|
||||
:collapse="isCollapsed"
|
||||
:collapse-transition="false"
|
||||
>
|
||||
<el-menu-item
|
||||
v-for="item in navItems"
|
||||
:key="item.name"
|
||||
:index="item.name"
|
||||
@click="handleNavSelect(item)"
|
||||
>
|
||||
<el-icon>
|
||||
<component :is="item.icon" />
|
||||
</el-icon>
|
||||
<template #title>
|
||||
<span>{{ item.label }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
|
||||
<!-- 折叠遮罩层（移动端） -->
|
||||
<div
|
||||
v-if="isMobile && !isCollapsed"
|
||||
class="sidebar-overlay"
|
||||
@click="isCollapsed = true"
|
||||
/>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="content-main">
|
||||
<div v-if="isMobile" class="content-header">
|
||||
<div class="mobile-toggle" @click="isCollapsed = false">
|
||||
<el-icon><i-ep-expand /></el-icon>
|
||||
<span>菜单</span>
|
||||
</div>
|
||||
</div>
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive>
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.console-page {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
&.is-collapsed {
|
||||
.content-main {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sidebar {
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
border-right: var(--header-border);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
|
||||
&.is-collapsed {
|
||||
width: 64px;
|
||||
|
||||
.nav-title {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
padding: 20px;
|
||||
//border-bottom:var(--header-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 70px;
|
||||
box-sizing: border-box;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
color: var(--el-text-color-secondary);
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
flex: 1;
|
||||
border-right: none;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
:deep(.el-menu-item) {
|
||||
&.is-active {
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
span {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.el-menu--collapse) {
|
||||
:deep(.el-menu-item) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.content-main {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
min-width: 0;
|
||||
transition: margin-left 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-header {
|
||||
display: none;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.mobile-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--el-fill-color-light);
|
||||
cursor: pointer;
|
||||
color: var(--el-text-color-primary);
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color);
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
.console-page {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1001;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&.is-collapsed {
|
||||
transform: translateX(-100%);
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
&:not(.is-collapsed) {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content-header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content-main {
|
||||
padding: 15px;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 平板适配
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.nav-sidebar {
|
||||
width: 200px;
|
||||
|
||||
&.is-collapsed {
|
||||
width: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-main {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -266,6 +266,7 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
<el-button
|
||||
v-if="false"
|
||||
:icon="HomeFilled"
|
||||
class="home-btn"
|
||||
round
|
||||
@@ -536,8 +537,8 @@ onMounted(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.model-library-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
|
||||
overflow: auto;
|
||||
|
||||
// 顶部横幅
|
||||
.banner-section {
|
||||
@@ -570,7 +571,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
max-width: 1400px;
|
||||
//max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@@ -686,7 +687,7 @@ onMounted(() => {
|
||||
padding: 32px 16px;
|
||||
|
||||
.content-wrapper {
|
||||
max-width: 100%;
|
||||
//max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
@@ -1137,7 +1138,7 @@ onMounted(() => {
|
||||
.model-library-container {
|
||||
.banner-section {
|
||||
padding: 24px 16px;
|
||||
|
||||
|
||||
.banner-content {
|
||||
.banner-header {
|
||||
flex-direction: column;
|
||||
@@ -1148,18 +1149,18 @@ onMounted(() => {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
|
||||
|
||||
.stats-cards {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.home-btn {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1178,7 +1179,7 @@ onMounted(() => {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
&.mobile-active {
|
||||
width: auto;
|
||||
height: auto;
|
||||
@@ -1211,18 +1212,18 @@ onMounted(() => {
|
||||
|
||||
.filter-section {
|
||||
margin: 0;
|
||||
|
||||
|
||||
.filter-header {
|
||||
.filter-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
|
||||
.close-btn {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: #909399;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: #606266;
|
||||
}
|
||||
@@ -1242,13 +1243,13 @@ onMounted(() => {
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 12px 4px;
|
||||
margin: -16px -4px 16px -4px;
|
||||
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.pagination-wrapper {
|
||||
:deep(.el-pagination) {
|
||||
.el-pagination__jump {
|
||||
@@ -1259,12 +1260,12 @@ onMounted(() => {
|
||||
|
||||
.model-grid {
|
||||
margin-bottom: 24px;
|
||||
|
||||
|
||||
.model-card {
|
||||
padding: 20px; // 增加内边距
|
||||
margin-bottom: 16px; // 增加卡片间距
|
||||
border-radius: 16px;
|
||||
|
||||
|
||||
.copy-btn-corner {
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
@@ -1285,7 +1286,7 @@ onMounted(() => {
|
||||
font-size: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
.icon-img {
|
||||
border-radius: 10px;
|
||||
}
|
||||
@@ -1297,21 +1298,21 @@ onMounted(() => {
|
||||
margin-bottom: 4px;
|
||||
padding-right: 36px; // 移动端预留更多空间给复制按钮
|
||||
}
|
||||
|
||||
|
||||
.model-provider {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.model-id {
|
||||
padding: 6px 10px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
|
||||
.model-id-label {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
|
||||
.model-id-value {
|
||||
font-size: 11px;
|
||||
}
|
||||
@@ -1324,7 +1325,7 @@ onMounted(() => {
|
||||
min-height: auto;
|
||||
-webkit-line-clamp: 2;
|
||||
max-height: 3em;
|
||||
|
||||
|
||||
&:hover {
|
||||
/* 移动端取消悬停展开，或者改为点击展开（这里简单处理为取消悬停效果以免遮挡） */
|
||||
-webkit-line-clamp: 2;
|
||||
@@ -1340,10 +1341,10 @@ onMounted(() => {
|
||||
.model-footer {
|
||||
padding-top: 12px;
|
||||
gap: 8px;
|
||||
|
||||
|
||||
.model-tags {
|
||||
gap: 4px;
|
||||
|
||||
|
||||
:deep(.el-tag) {
|
||||
height: 20px;
|
||||
padding: 0 6px;
|
||||
@@ -1353,11 +1354,11 @@ onMounted(() => {
|
||||
|
||||
.model-pricing {
|
||||
padding: 4px 8px;
|
||||
|
||||
|
||||
.pricing-label {
|
||||
display: none; // 移动端隐藏"计费倍率"文字，只显示数字
|
||||
}
|
||||
|
||||
|
||||
.pricing-value {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user