导航栏特殊列
This commit is contained in:
@@ -43,6 +43,18 @@
|
|||||||
</div>
|
</div>
|
||||||
</Teleport>
|
</Teleport>
|
||||||
</div>
|
</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>
|
||||||
<!-- 右侧用户区域 -->
|
<!-- 右侧用户区域 -->
|
||||||
<div class="nav-right">
|
<div class="nav-right">
|
||||||
@@ -56,11 +68,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed } from 'vue';
|
import { ref, computed, onMounted } from 'vue';
|
||||||
import { useRouter, useRoute } from 'vue-router';
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
import type { SysMenu } from '@/types';
|
import type { SysMenu } from '@/types';
|
||||||
import { MenuType } from '@/types/enums';
|
import { MenuType } from '@/types/enums';
|
||||||
|
import type { Tag } from '@/types/resource';
|
||||||
|
import { resourceTagApi } from '@/apis/resource';
|
||||||
// @ts-ignore - Vue 3.5 组件导入兼容性
|
// @ts-ignore - Vue 3.5 组件导入兼容性
|
||||||
import {UserDropdown, Search, Notice} from '@/components/base';
|
import {UserDropdown, Search, Notice} from '@/components/base';
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@@ -70,11 +84,32 @@ const store = useStore();
|
|||||||
const activeDropdown = ref<string | null>(null);
|
const activeDropdown = ref<string | null>(null);
|
||||||
const searchKeyword = ref('');
|
const searchKeyword = ref('');
|
||||||
const dropdownPositions = ref<Record<string, { left: number; top: number; width: number }>>({});
|
const dropdownPositions = ref<Record<string, { left: number; top: number; width: number }>>({});
|
||||||
|
const specialTags = ref<Tag[]>([]); // 特殊标签:专题报告和思政案例
|
||||||
|
|
||||||
// 获取所有菜单
|
// 获取所有菜单
|
||||||
const allMenus = computed(() => store.getters['auth/menuTree']);
|
const allMenus = computed(() => store.getters['auth/menuTree']);
|
||||||
const userInfo = computed(() => store.getters['auth/user']);
|
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),过滤掉用户相关菜单
|
// 获取第一层的导航菜单(MenuType.NAVIGATION),过滤掉用户相关菜单
|
||||||
const navigationMenus = computed(() => {
|
const navigationMenus = computed(() => {
|
||||||
const menus = allMenus.value.filter((menu: SysMenu) => {
|
const menus = allMenus.value.filter((menu: SysMenu) => {
|
||||||
@@ -116,6 +151,15 @@ function getNavigationChildren(menu: SysMenu): SysMenu[] {
|
|||||||
function isActive(menu: SysMenu): boolean {
|
function isActive(menu: SysMenu): boolean {
|
||||||
if (!menu.url) return false;
|
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;
|
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) {
|
function handleSearch(keyword: string) {
|
||||||
if (keyword && keyword.trim()) {
|
if (keyword && keyword.trim()) {
|
||||||
|
|||||||
@@ -37,11 +37,15 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<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 { ResourceSideBar, ResourceList, ResourceArticle } from './components';
|
||||||
import { Search, CenterHead } from '@/components/base';
|
import { Search, CenterHead } from '@/components/base';
|
||||||
import type { Resource, Tag } from '@/types/resource';
|
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 showArticle = ref(false);
|
||||||
const currentCategoryId = ref('tag_article_001');
|
const currentCategoryId = ref('tag_article_001');
|
||||||
@@ -51,16 +55,59 @@ const searchKeyword = ref('');
|
|||||||
const resourceListRef = ref();
|
const resourceListRef = ref();
|
||||||
const resourceList = ref<Resource[]>([]);
|
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) {
|
function handleCategoryChange(category: Tag) {
|
||||||
currentCategoryId.value = category.tagID || category.id || '';
|
currentCategoryId.value = category.tagID || category.id || '';
|
||||||
currentCategoryName.value = category.name || '';
|
currentCategoryName.value = category.name || '';
|
||||||
searchKeyword.value = '';
|
searchKeyword.value = '';
|
||||||
showArticle.value = false;
|
showArticle.value = false;
|
||||||
|
|
||||||
|
// 清除 URL 中的 tagID 参数,确保 URL 与实际显示的分类一致
|
||||||
|
if (route.query.tagID) {
|
||||||
|
router.replace({ path: route.path, query: {} });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSearch(keyword: string) {
|
function handleSearch(keyword: string) {
|
||||||
searchKeyword.value = keyword;
|
searchKeyword.value = keyword;
|
||||||
showArticle.value = false;
|
showArticle.value = false;
|
||||||
|
|
||||||
|
// 清除 URL 中的 tagID 参数
|
||||||
|
if (route.query.tagID) {
|
||||||
|
router.replace({ path: route.path, query: {} });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleListUpdated(list: Resource[]) {
|
function handleListUpdated(list: Resource[]) {
|
||||||
|
|||||||
Reference in New Issue
Block a user