Explorar o código

1、处理图生图内重复onMounted隐藏问题
2、优化实验时内菜单栏配置逻辑

liyanbo hai 1 mes
pai
achega
410b1c1ffb
Modificáronse 2 ficheiros con 39 adicións e 51 borrados
  1. 36 45
      src/components/LeftPanel.vue
  2. 3 6
      src/components/ai/image/ImageToImage.vue

+ 36 - 45
src/components/LeftPanel.vue

@@ -72,85 +72,77 @@ const drawerVisible = ref(true)
 // 当前选中索引状态
 const currentActiveIndex = ref('2')
 
-// 路由路径到索引的映射
-const pathIndexMap = {
-  'ai-questions': '0',      // 智能问答
-  'ai-painting': '1',       // 智能绘画
-  'ai-laboratory': '2',     // 数字人老师
-  'ai-poetry': '3' ,         // AI 古诗
-  'ai-ennumerals': '4',     // 英文数字人老师
-  'ai-image': '5',          // 图生图
-  'ai-video': '6',          // 图生视频
-  'ai-grandcanal': '7',     // 大运河
-  'ai-plantexperts': '8',   // 植物专家
-  'virtual-laboratory': '9', // 虚拟实验室
-}
-
-// 菜单项到路由的映射
-const menuRouteMap = {
-  '智能问答': '/ai-questions',
-  '智能绘画': '/ai-painting',
-  '数字人老师': '/ai-laboratory',
-  'AI+古诗人': '/ai-poetry',
-  '英文数字人老师': '/ai-ennumerals',
-  '图生图': '/ai-image',
-  '图生视频': '/ai-video',
-  '大运河': '/ai-grandcanal',
-  '植物专家': '/ai-plantexperts',
-  '虚拟实验室': '/virtual-laboratory',
-}
-
 // 渲染侧边栏
 const groupList = ref([
   {
     icon: question, // 默认图片
     hoverIcon: question02, // 交互图片
-    title: '智能问答'
+    title: '智能问答',
+    path: '/ai-questions',
+    index: '0'
   },
   {
     icon: painting, 
     hoverIcon: painting02,
-    title: '智能绘画'
+    title: '智能绘画',
+    path: '/ai-painting',
+    index: '1'
   },
   {
     icon: Human,
     hoverIcon: Human02,
-    title: '数字人老师'
+    title: '数字人老师',
+    path: '/ai-laboratory',
+    index: '2'
   },
   {
     icon: poetry,
     hoverIcon: poetry02,
-    title: 'AI+古诗人'
+    title: 'AI+古诗人',
+    path: '/ai-poetry',
+    index: '3'
   },
   {
     icon: en,
     hoverIcon: en02,
-    title: '英文数字人老师'
+    title: '英文数字人老师',
+    path: '/ai-ennumerals',
+    index: '4'
   },
   {
     icon: image2image,
     hoverIcon: image2image02,
-    title: '图生图'
+    title: '图生图',
+    path: '/ai-image',
+    index: '5'
   },
   {
     icon: video,
     hoverIcon: video02,
-    title: '图生视频'
+    title: '图生视频',
+    path: '/ai-video',
+    index: '6'
   },
   {
     icon: canal,
     hoverIcon: canal02,
-    title: '大运河'
+    title: '大运河',
+    path: '/ai-grandcanal',
+    index: '7'
   },
   {
     icon: plant,
     hoverIcon: plant02,
-    title: '植物专家'
+    title: '植物专家',
+    path: '/ai-plantexperts',
+    index: '8'
   },
   {
     icon: labImage,
     hoverIcon: labImage02,
-    title: '虚拟实验室'
+    title: '虚拟实验室',
+    path: '/virtual-laboratory',
+    index: '9'
   }
 ])
 
@@ -182,11 +174,10 @@ const updateActiveIndex = () => {
   }
   
   // 查找路径对应的索引
-  for (const [key, index] of Object.entries(pathIndexMap)) {
-    if (path.includes(key)) {
-      currentActiveIndex.value = index
-      return
-    }
+  const menuItem = groupList.value.find(item => path.includes(item.path.replace('/', '')))
+  if (menuItem) {
+    currentActiveIndex.value = menuItem.index
+    return
   }
 }
 
@@ -205,7 +196,7 @@ const personData = ref([])
 
 // 跳转智能问答
 const navigateToAI = async (group) => {
-  const routePath = menuRouteMap[group.title]
+  const routePath = group.path
   
   if (group.title === '智能问答') {
     try {
@@ -360,4 +351,4 @@ defineExpose({
   height: rpx(11);
   margin-right: rpx(2);
 }
-</style>
+</style>

+ 3 - 6
src/components/ai/image/ImageToImage.vue

@@ -218,6 +218,9 @@ onMounted(async () => {
     cacheDataHistoryList.value.push(...props.preDialogueList);
     if (cacheDataHistoryList.value.length > 0) localStorage.setItem(props.cacheDataHistoryKey, JSON.stringify(cacheDataHistoryList.value));
   }
+
+  // 自动刷新 image 列表
+  refreshWatchImagesFun()
 });
 
 // 消息列表和输入内容的响应式变量
@@ -444,12 +447,6 @@ const refreshWatchImages = async () => {
   }
 }
 
-
-/** 组件挂在的时候 */
-onMounted(async () => {
-  refreshWatchImagesFun()
-})
-
 /** 组件取消挂在的时候 */
 onUnmounted(async () => {
   inProgressTimerFun()