|
@@ -49,7 +49,7 @@
|
|
|
<div class="case-content">
|
|
|
<h1 class="case-title">{{ currentCase?.title || '' }}</h1>
|
|
|
<div class="case-body" v-html="currentCase?.content || ''"></div>
|
|
|
- <img :src="imgHost+currentCase?.image" style="max-width: 100%;" alt="" srcset="">
|
|
|
+ <img :src="imgHost + currentCase?.image" style="max-width: 100%;" alt="" srcset="">
|
|
|
|
|
|
<!-- 导航按钮 -->
|
|
|
<div class="navigation">
|
|
@@ -388,63 +388,165 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 根据ID查找并高亮案例
|
|
|
- const findAndHighlightCase = async (caseId, skipRouteUpdate = false) => {
|
|
|
- const id = parseInt(caseId) || caseId // 支持字符串ID
|
|
|
- console.log('查找并高亮案例', { caseId, id, skipRouteUpdate })
|
|
|
+ // 根据classifyId判断分类是否有children
|
|
|
+ const getClassifyInfo = (classifyId) => {
|
|
|
+ const id = parseInt(classifyId)
|
|
|
+ return menuItems.value.find(menu => menu.originalId === id)
|
|
|
+ }
|
|
|
|
|
|
- let foundCase = null
|
|
|
- let parentMenuId = null
|
|
|
+ // 根据ID和classifyId获取案例详情
|
|
|
+ const fetchCaseDetailByParams = async (caseId, classifyId) => {
|
|
|
+ const id = parseInt(caseId)
|
|
|
+ const classify = getClassifyInfo(classifyId)
|
|
|
|
|
|
- // 查找案例 - 需要同时匹配原始ID和带前缀的ID
|
|
|
- for (const menu of menuItems.value) {
|
|
|
- if (menu.children && menu.children.length > 0) {
|
|
|
- // 在子菜单中查找 - 匹配原始ID
|
|
|
- const found = menu.children.find(child =>
|
|
|
- child.originalId === id || child.id === id || child.id === `project_${id}`
|
|
|
- )
|
|
|
- if (found) {
|
|
|
- foundCase = found
|
|
|
- parentMenuId = menu.id
|
|
|
- break
|
|
|
+ console.log('根据参数获取案例详情', { caseId, classifyId, classify })
|
|
|
+
|
|
|
+ if (classify) {
|
|
|
+ if (classify.children && classify.children.length > 0) {
|
|
|
+ // 有children的情况:直接通过项目ID获取详情
|
|
|
+ console.log('分类有children,通过项目ID获取详情')
|
|
|
+ const response = await getProjectList({
|
|
|
+ projectType: 2,
|
|
|
+ id: id
|
|
|
+ })
|
|
|
+
|
|
|
+ if (response.rows && response.rows.length > 0) {
|
|
|
+ const caseData = response.rows[0]
|
|
|
+ return {
|
|
|
+ id: `project_${id}`,
|
|
|
+ originalId: id,
|
|
|
+ title: caseData.projectName || '未命名案例',
|
|
|
+ content: caseData.projectDescribe || caseData.projectProfile || '<p>暂无详细内容</p>',
|
|
|
+ image: caseData.projectImage,
|
|
|
+ type: 'project',
|
|
|
+ needFetchDetail: true
|
|
|
+ }
|
|
|
}
|
|
|
} else {
|
|
|
- // 在一级菜单中查找 - 匹配原始ID
|
|
|
- if (menu.originalId === id || menu.id === id || menu.id === `category_${id}`) {
|
|
|
- foundCase = menu
|
|
|
- break
|
|
|
+ // 没有children的情况:通过classifyId获取该分类下的项目列表
|
|
|
+ console.log('分类没有children,通过classifyId获取分类下的项目')
|
|
|
+ const response = await getProjectList({
|
|
|
+ projectType: 2,
|
|
|
+ classifyId: parseInt(classifyId)
|
|
|
+ })
|
|
|
+
|
|
|
+ if (response.rows && response.rows.length > 0) {
|
|
|
+ // 如果传入了具体的项目ID,查找对应的项目
|
|
|
+ let caseData = response.rows[0] // 默认取第一个
|
|
|
+ if (id) {
|
|
|
+ const foundProject = response.rows.find(item => item.id === id)
|
|
|
+ if (foundProject) {
|
|
|
+ caseData = foundProject
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ id: `category_${classifyId}`,
|
|
|
+ originalId: parseInt(classifyId),
|
|
|
+ title: caseData.projectName || classify.title,
|
|
|
+ content: caseData.projectDescribe || caseData.projectProfile || '<p>暂无详细内容</p>',
|
|
|
+ image: caseData.projectImage,
|
|
|
+ type: 'category',
|
|
|
+ classifyId: parseInt(classifyId),
|
|
|
+ needFetchByClassify: true
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- if (foundCase) {
|
|
|
- console.log('找到案例', foundCase)
|
|
|
- // 展开父菜单(如果有的话)
|
|
|
- if (parentMenuId && !expandedMenus.value.includes(parentMenuId)) {
|
|
|
- expandedMenus.value.push(parentMenuId)
|
|
|
- }
|
|
|
+ return null
|
|
|
+ }
|
|
|
|
|
|
- // 选中案例
|
|
|
- await selectCase(foundCase, skipRouteUpdate)
|
|
|
- } else {
|
|
|
- console.log('在菜单中没找到案例,尝试直接获取详情')
|
|
|
- // 如果在菜单中没找到,可能是直接通过URL访问,尝试直接获取详情
|
|
|
- const caseDetail = await fetchCaseDetail(id)
|
|
|
+ // 根据ID查找并高亮案例
|
|
|
+ const findAndHighlightCase = async (caseId, classifyId = null, skipRouteUpdate = false) => {
|
|
|
+ const id = parseInt(caseId) || caseId // 支持字符串ID
|
|
|
+ console.log('查找并高亮案例', { caseId, classifyId, id, skipRouteUpdate })
|
|
|
+
|
|
|
+ let foundCase = null
|
|
|
+ let parentMenuId = null
|
|
|
+
|
|
|
+ // 如果提供了classifyId,使用新的逻辑
|
|
|
+ if (classifyId) {
|
|
|
+ console.log('使用classifyId逻辑获取案例详情')
|
|
|
+ const caseDetail = await fetchCaseDetailByParams(caseId, classifyId)
|
|
|
if (caseDetail) {
|
|
|
- // 为直接访问的案例创建一个临时的带前缀ID
|
|
|
- const tempId = `direct_${id}`
|
|
|
- currentCaseId.value = tempId
|
|
|
- currentCase.value = {
|
|
|
- ...caseDetail,
|
|
|
- id: tempId
|
|
|
+ // 查找对应的菜单项来设置高亮和展开状态
|
|
|
+ const classify = getClassifyInfo(classifyId)
|
|
|
+ if (classify) {
|
|
|
+ if (classify.children && classify.children.length > 0) {
|
|
|
+ // 有children的情况:高亮对应的子项
|
|
|
+ const childCase = classify.children.find(child => child.originalId === parseInt(caseId))
|
|
|
+ if (childCase) {
|
|
|
+ foundCase = childCase
|
|
|
+ parentMenuId = classify.id
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 没有children的情况:高亮分类本身
|
|
|
+ foundCase = classify
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置当前案例
|
|
|
+ currentCaseId.value = caseDetail.id
|
|
|
+ currentCase.value = caseDetail
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 原有的查找逻辑
|
|
|
+ for (const menu of menuItems.value) {
|
|
|
+ if (menu.children && menu.children.length > 0) {
|
|
|
+ // 在子菜单中查找 - 匹配原始ID
|
|
|
+ const found = menu.children.find(child =>
|
|
|
+ child.originalId === id || child.id === id || child.id === `project_${id}`
|
|
|
+ )
|
|
|
+ if (found) {
|
|
|
+ foundCase = found
|
|
|
+ parentMenuId = menu.id
|
|
|
+ break
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 在一级菜单中查找 - 匹配原始ID
|
|
|
+ if (menu.originalId === id || menu.id === id || menu.id === `category_${id}`) {
|
|
|
+ foundCase = menu
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (foundCase) {
|
|
|
+ console.log('找到案例', foundCase)
|
|
|
+ // 选中案例
|
|
|
+ await selectCase(foundCase, skipRouteUpdate)
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ console.log('在菜单中没找到案例,尝试直接获取详情')
|
|
|
+ // 如果在菜单中没找到,可能是直接通过URL访问,尝试直接获取详情
|
|
|
+ const caseDetail = await fetchCaseDetail(id)
|
|
|
+ if (caseDetail) {
|
|
|
+ // 为直接访问的案例创建一个临时的带前缀ID
|
|
|
+ const tempId = `direct_${id}`
|
|
|
+ currentCaseId.value = tempId
|
|
|
+ currentCase.value = {
|
|
|
+ ...caseDetail,
|
|
|
+ id: tempId
|
|
|
+ }
|
|
|
}
|
|
|
+ return
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ // 展开父菜单(如果有的话)
|
|
|
+ if (parentMenuId && !expandedMenus.value.includes(parentMenuId)) {
|
|
|
+ expandedMenus.value.push(parentMenuId)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 监听路由变化
|
|
|
- watch(() => route.query.id, async (newId, oldId) => {
|
|
|
- console.log('路由变化监听', { newId, oldId, currentCaseId: currentCaseId.value, isUpdatingRoute: isUpdatingRoute.value })
|
|
|
+ watch(() => [route.query.id, route.query.classifyId], async ([newId, newClassifyId], [oldId, oldClassifyId]) => {
|
|
|
+ console.log('路由变化监听', {
|
|
|
+ newId, newClassifyId, oldId, oldClassifyId,
|
|
|
+ currentCaseId: currentCaseId.value,
|
|
|
+ isUpdatingRoute: isUpdatingRoute.value
|
|
|
+ })
|
|
|
|
|
|
// 如果正在更新路由,跳过处理
|
|
|
if (isUpdatingRoute.value) {
|
|
@@ -457,15 +559,16 @@ export default {
|
|
|
? currentCaseId.value.split('_')[1]
|
|
|
: currentCaseId.value
|
|
|
|
|
|
- if (newId && parseInt(newId) === parseInt(currentOriginalId)) {
|
|
|
+ if (newId && parseInt(newId) === parseInt(currentOriginalId) &&
|
|
|
+ (!newClassifyId || newClassifyId === oldClassifyId)) {
|
|
|
console.log('新ID和当前案例原始ID相同,跳过处理')
|
|
|
return
|
|
|
}
|
|
|
|
|
|
// 只有当ID真正发生变化且菜单数据已加载时才执行
|
|
|
- if (newId && newId !== oldId && menuItems.value.length > 0) {
|
|
|
+ if (newId && (newId !== oldId || newClassifyId !== oldClassifyId) && menuItems.value.length > 0) {
|
|
|
console.log('执行路由变化处理')
|
|
|
- await findAndHighlightCase(newId, true) // 跳过路由更新,因为这是由路由变化触发的
|
|
|
+ await findAndHighlightCase(newId, newClassifyId, true) // 跳过路由更新,因为这是由路由变化触发的
|
|
|
}
|
|
|
})
|
|
|
|
|
@@ -475,8 +578,10 @@ export default {
|
|
|
|
|
|
// 初始化时根据URL参数加载案例
|
|
|
const caseId = route.query.id
|
|
|
+ const classifyId = route.query.classifyId
|
|
|
+
|
|
|
if (caseId) {
|
|
|
- await findAndHighlightCase(caseId)
|
|
|
+ await findAndHighlightCase(caseId, classifyId)
|
|
|
} else {
|
|
|
// 默认选择第一个案例并展开其父菜单
|
|
|
const firstCase = flattenedCases.value[0]
|