视图路径修改

2025-10-27 17:29:25 +08:00
parent 5fa4e1cd42
commit 0033ac10ec
69 changed files with 162 additions and 1199 deletions
--- a/schoolNewsWeb/src/views/user/resource-center/ResourceCenterView.vue
+++ b/schoolNewsWeb/src/views/user/resource-center/ResourceCenterView.vue
@@ -0,0 +1,150 @@
+<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-if="!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>