导航栏特殊列
This commit is contained in:
@@ -43,6 +43,18 @@
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
|
||||
<!-- 特殊标签:专题报告和思政案例 -->
|
||||
<div
|
||||
v-for="tag in specialTags"
|
||||
:key="tag.tagID"
|
||||
class="nav-item special-tag"
|
||||
:class="{ active: isTagActive(tag) }"
|
||||
>
|
||||
<div class="nav-link" @click="handleTagClick(tag)">
|
||||
<span>{{ tag.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧用户区域 -->
|
||||
<div class="nav-right">
|
||||
@@ -56,11 +68,13 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import type { SysMenu } from '@/types';
|
||||
import { MenuType } from '@/types/enums';
|
||||
import type { Tag } from '@/types/resource';
|
||||
import { resourceTagApi } from '@/apis/resource';
|
||||
// @ts-ignore - Vue 3.5 组件导入兼容性
|
||||
import {UserDropdown, Search, Notice} from '@/components/base';
|
||||
const router = useRouter();
|
||||
@@ -70,11 +84,32 @@ const store = useStore();
|
||||
const activeDropdown = ref<string | null>(null);
|
||||
const searchKeyword = ref('');
|
||||
const dropdownPositions = ref<Record<string, { left: number; top: number; width: number }>>({});
|
||||
const specialTags = ref<Tag[]>([]); // 特殊标签:专题报告和思政案例
|
||||
|
||||
// 获取所有菜单
|
||||
const allMenus = computed(() => store.getters['auth/menuTree']);
|
||||
const userInfo = computed(() => store.getters['auth/user']);
|
||||
|
||||
// 加载特殊标签
|
||||
onMounted(async () => {
|
||||
await loadSpecialTags();
|
||||
});
|
||||
|
||||
// 加载特殊标签(专题报告和思政案例)
|
||||
async function loadSpecialTags() {
|
||||
try {
|
||||
const res = await resourceTagApi.getTagsByType(1); // 1 = 文章分类标签
|
||||
if (res.success && res.dataList) {
|
||||
// 只获取专题报告(tag005)和思政案例(tag006)
|
||||
specialTags.value = res.dataList.filter((tag: Tag) =>
|
||||
tag.tagID === 'tag_article_005' || tag.tagID === 'tag_article_006'
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载特殊标签失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取第一层的导航菜单(MenuType.NAVIGATION),过滤掉用户相关菜单
|
||||
const navigationMenus = computed(() => {
|
||||
const menus = allMenus.value.filter((menu: SysMenu) => {
|
||||
@@ -116,6 +151,15 @@ function getNavigationChildren(menu: SysMenu): SysMenu[] {
|
||||
function isActive(menu: SysMenu): boolean {
|
||||
if (!menu.url) return false;
|
||||
|
||||
// 特殊处理:如果是资源中心菜单,且 URL 中有特殊标签的 tagID,则不激活
|
||||
if (menu.url === '/resource-center' && route.path === '/resource-center') {
|
||||
const tagID = route.query.tagID as string;
|
||||
// 如果 tagID 是特殊标签(专题报告或思政案例),则不激活资源中心菜单
|
||||
if (tagID === 'tag_article_005' || tagID === 'tag_article_006') {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 精确匹配
|
||||
if (route.path === menu.url) return true;
|
||||
|
||||
@@ -206,6 +250,20 @@ function handleNavClick(menu: SysMenu) {
|
||||
}
|
||||
}
|
||||
|
||||
// 处理特殊标签点击
|
||||
function handleTagClick(tag: Tag) {
|
||||
// 导航到资源中心,并传递 tagID 参数
|
||||
router.push({
|
||||
path: '/resource-center',
|
||||
query: { tagID: tag.tagID }
|
||||
});
|
||||
}
|
||||
|
||||
// 判断标签是否激活
|
||||
function isTagActive(tag: Tag): boolean {
|
||||
return route.path === '/resource-center' && route.query.tagID === tag.tagID;
|
||||
}
|
||||
|
||||
// 处理搜索
|
||||
function handleSearch(keyword: string) {
|
||||
if (keyword && keyword.trim()) {
|
||||
|
||||
@@ -37,11 +37,15 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { ResourceSideBar, ResourceList, ResourceArticle } from './components';
|
||||
import { Search, CenterHead } from '@/components/base';
|
||||
import type { Resource, Tag } from '@/types/resource';
|
||||
import { resourceApi } from '@/apis/resource';
|
||||
import { resourceApi, resourceTagApi } from '@/apis/resource';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const showArticle = ref(false);
|
||||
const currentCategoryId = ref('tag_article_001');
|
||||
@@ -51,16 +55,59 @@ const searchKeyword = ref('');
|
||||
const resourceListRef = ref();
|
||||
const resourceList = ref<Resource[]>([]);
|
||||
|
||||
// 组件加载时检查 URL 参数
|
||||
onMounted(async () => {
|
||||
const tagID = route.query.tagID as string;
|
||||
if (tagID) {
|
||||
await loadTagInfo(tagID);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听路由参数变化
|
||||
watch(() => route.query.tagID, async (newTagID) => {
|
||||
if (newTagID && typeof newTagID === 'string') {
|
||||
await loadTagInfo(newTagID);
|
||||
}
|
||||
});
|
||||
|
||||
// 加载标签信息
|
||||
async function loadTagInfo(tagID: string) {
|
||||
try {
|
||||
const res = await resourceTagApi.getTagsByType(1); // 1 = 文章分类标签
|
||||
if (res.success && res.dataList) {
|
||||
const tag = res.dataList.find((t: Tag) => t.tagID === tagID);
|
||||
if (tag) {
|
||||
currentCategoryId.value = tag.tagID || '';
|
||||
currentCategoryName.value = tag.name || '';
|
||||
searchKeyword.value = '';
|
||||
showArticle.value = false;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载标签信息失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function handleCategoryChange(category: Tag) {
|
||||
currentCategoryId.value = category.tagID || category.id || '';
|
||||
currentCategoryName.value = category.name || '';
|
||||
searchKeyword.value = '';
|
||||
showArticle.value = false;
|
||||
|
||||
// 清除 URL 中的 tagID 参数,确保 URL 与实际显示的分类一致
|
||||
if (route.query.tagID) {
|
||||
router.replace({ path: route.path, query: {} });
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch(keyword: string) {
|
||||
searchKeyword.value = keyword;
|
||||
showArticle.value = false;
|
||||
|
||||
// 清除 URL 中的 tagID 参数
|
||||
if (route.query.tagID) {
|
||||
router.replace({ path: route.path, query: {} });
|
||||
}
|
||||
}
|
||||
|
||||
function handleListUpdated(list: Resource[]) {
|
||||
|
||||
Reference in New Issue
Block a user