151 lines
3.7 KiB
Vue
151 lines
3.7 KiB
Vue
<template>
|
|
<div class="resource-center-view">
|
|
<CenterHead
|
|
title="资源中心"
|
|
:category-name="currentCategoryName"
|
|
:show-article-mode="showArticle"
|
|
/>
|
|
<div class="search-wrapper">
|
|
<Search @search="handleSearch" />
|
|
</div>
|
|
<div class="content-wrapper">
|
|
<div class="content-container">
|
|
<ResourceSideBar
|
|
:activeTagID="currentCategoryId"
|
|
@category-change="handleCategoryChange"
|
|
/>
|
|
<ResourceList
|
|
v-show="!showArticle"
|
|
ref="resourceListRef"
|
|
:tagID="currentCategoryId"
|
|
:search-keyword="searchKeyword"
|
|
@resource-click="handleResourceClick"
|
|
@list-updated="handleListUpdated"
|
|
/>
|
|
<ResourceArticle
|
|
v-if="showArticle"
|
|
:resource-id="currentResourceId"
|
|
:tagID="currentCategoryId"
|
|
:resource-list="resourceList"
|
|
@resource-change="handleResourceChange"
|
|
@navigate="handleArticleNavigate"
|
|
@back-to-list="backToList"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { ResourceSideBar, ResourceList, ResourceArticle } from './components';
|
|
import { Search, CenterHead } from '@/components/base';
|
|
import type { Resource, Tag } from '@/types/resource';
|
|
|
|
const showArticle = ref(false);
|
|
const currentCategoryId = ref('party_history');
|
|
const currentCategoryName = ref('党史学习');
|
|
const currentResourceId = ref('');
|
|
const searchKeyword = ref('');
|
|
const resourceListRef = ref();
|
|
const resourceList = ref<Resource[]>([]);
|
|
|
|
function handleCategoryChange(category: Tag) {
|
|
currentCategoryId.value = category.tagID || category.id || '';
|
|
currentCategoryName.value = category.name || '';
|
|
searchKeyword.value = '';
|
|
showArticle.value = false;
|
|
}
|
|
|
|
function handleSearch(keyword: string) {
|
|
searchKeyword.value = keyword;
|
|
showArticle.value = false;
|
|
}
|
|
|
|
function handleListUpdated(list: Resource[]) {
|
|
resourceList.value = list;
|
|
}
|
|
|
|
function handleResourceClick(resource: Resource) {
|
|
currentResourceId.value = resource.resourceID || '';
|
|
showArticle.value = true;
|
|
}
|
|
|
|
function handleResourceChange(resourceId: string) {
|
|
currentResourceId.value = resourceId;
|
|
// ArticleShowView 会自动重新加载
|
|
}
|
|
|
|
function backToList() {
|
|
showArticle.value = false;
|
|
currentResourceId.value = '';
|
|
}
|
|
|
|
// 文章内前后切换时，靠近列表头部或尾部触发列表翻页
|
|
async function handleArticleNavigate(direction: 'prev' | 'next', resourceId: string) {
|
|
const list = resourceListRef.value?.getResources?.() || [];
|
|
const index = list.findIndex((r: any) => r.resourceID === resourceId);
|
|
if (index === -1) return;
|
|
const nearHead = index <= 2;
|
|
const nearTail = index >= list.length - 3;
|
|
if (nearHead && direction === 'prev') {
|
|
await resourceListRef.value?.loadPrevPage?.();
|
|
} else if (nearTail && direction === 'next') {
|
|
await resourceListRef.value?.loadNextPage?.();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.resource-center-view {
|
|
background: #F9F9F9;
|
|
}
|
|
|
|
.search-wrapper {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 20px 0;
|
|
|
|
:deep(.resource-search) {
|
|
width: 1200px;
|
|
height: 60px;
|
|
padding: 0;
|
|
|
|
.search-box {
|
|
height: 60px;
|
|
|
|
input {
|
|
font-size: 20px;
|
|
padding: 0 100px 0 40px;
|
|
}
|
|
|
|
.search-button {
|
|
width: 72px;
|
|
height: 60px;
|
|
|
|
img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-wrapper {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
.content-container {
|
|
width: 1200px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 24px;
|
|
height: 100%;
|
|
}
|
|
</style>
|