web-资源中心修改

schoolNewsWeb/src/views/resource-center/ResourceCenterView.vue

@@ -1,104 +1,149 @@
 <template>
-  <div class="resource-center-page">
-    <!-- 导航栏 -->
-    <div class="resource-nav">
-      <div 
-        class="nav-tab" 
-        v-for="tab in tabs" 
-        :key="tab.key"
-        :class="{ active: activeTab === tab.key }"
-        @click="activeTab = tab.key"
-      >
-        {{ tab.label }}
-      </div>
+  <div class="resource-center-view">
+    <ResourceHead 
+      :category-name="currentCategoryName"
+      :show-article-mode="showArticle"
+    />
+    <div class="search-wrapper">
+      <Search @search="handleSearch" />
     </div>
-
-    <!-- 内容区域 -->
-    <div class="resource-content">
-      <component :is="currentComponent" />
+    <div class="content-wrapper">
+      <div class="content-container">
+        <ResourceSideBar 
+          :active-category-id="currentCategoryId"
+          @category-change="handleCategoryChange"
+        />
+        <ResourceList 
+          v-show="!showArticle"
+          ref="resourceListRef"
+          :category-id="currentCategoryId"
+          :search-keyword="searchKeyword"
+          @resource-click="handleResourceClick"
+          @list-updated="handleListUpdated"
+        />
+        <ResourceArticle 
+          v-show="showArticle"
+          :resource-id="currentResourceId"
+          :category-id="currentCategoryId"
+          :resource-list="resourceList"
+          @resource-change="handleResourceChange"
+          @navigate="handleArticleNavigate"
+          @back-to-list="backToList"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import MediaArchive from './components/MediaArchive.vue';
-import PartyHistoryLearning from './PartyHistoryLearningView.vue';
-import PolicySpeech from './components/PolicySpeech.vue';
-import PolicyInterpretation from './PolicyInterpretationView.vue';
-import RedClassic from './RedClassicView.vue';
-import SpecialReport from './SpecialReportView.vue';
-import WorldCase from './WorldCaseView.vue';
+import { ref } from 'vue';
+import { ResourceHead, ResourceSideBar, ResourceList, ResourceArticle } from './components';
+import { Search } from '@/components/base';
+import type { Resource, ResourceCategory } from '@/types/resource';
 
-const activeTab = ref('media');
+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[]>([]);
 
-const tabs = [
-  { key: 'media', label: '媒体档案' },
-  { key: 'party-history', label: '党史学习' },
-  { key: 'policy-speech', label: '政策讲话' },
-  { key: 'policy-interpretation', label: '政策解读' },
-  { key: 'red-classic', label: '红色经典' },
-  { key: 'special-report', label: '专题报告' },
-  { key: 'world-case', label: '世界案例' }
-];
+function handleCategoryChange(category: ResourceCategory) {
+  currentCategoryId.value = category.categoryID || '';
+  currentCategoryName.value = category.name || '';
+  searchKeyword.value = '';
+  showArticle.value = false;
+}
 
-const componentMap: Record<string, any> = {
-  'media': MediaArchive,
-  'party-history': PartyHistoryLearning,
-  'policy-speech': PolicySpeech,
-  'policy-interpretation': PolicyInterpretation,
-  'red-classic': RedClassic,
-  'special-report': SpecialReport,
-  'world-case': WorldCase
-};
+function handleSearch(keyword: string) {
+  searchKeyword.value = keyword;
+  showArticle.value = false;
+}
 
-const currentComponent = computed(() => componentMap[activeTab.value]);
+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 lang="scss" scoped>
-.resource-center-page {
-  min-height: 100vh;
-  background: #f5f5f5;
+<style scoped lang="scss">
+.resource-center-view {
+  background: #F9F9F9;
 }
 
-.resource-nav {
-  background: white;
-  padding: 0 40px;
+.search-wrapper {
+  width: 100%;
   display: flex;
-  gap: 8px;
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.nav-tab {
-  padding: 16px 24px;
-  cursor: pointer;
-  font-size: 16px;
-  color: #666;
-  position: relative;
-  transition: all 0.3s;
+  justify-content: center;
+  padding: 20px 0;
   
-  &:hover {
-    color: #C62828;
-  }
-  
-  &.active {
-    color: #C62828;
-    font-weight: 600;
+  :deep(.resource-search) {
+    width: 1200px;
+    height: 60px;
+    padding: 0;
     
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 3px;
-      background: #C62828;
+    .search-box {
+      height: 60px;
+      
+      input {
+        font-size: 20px;
+        padding: 0 100px 0 40px;
+      }
+      
+      .search-button {
+        width: 72px;
+        height: 60px;
+        
+        img {
+          width: 24px;
+          height: 24px;
+        }
+      }
     }
   }
 }
 
-.resource-content {
-  padding: 20px;
+.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>
-