web-资源中心修改

schoolNewsWeb/src/views/article/ArticleShowView.vue

@@ -12,26 +12,21 @@
       <!-- 文章头部信息 -->
       <div class="article-header">
         <h1 class="article-title">{{ articleData.title }}</h1>
-        <div class="article-meta">
-          <span v-if="articleData.category" class="meta-item">
-            分类：{{ getCategoryLabel(articleData.category) }}
-          </span>
-          <span v-if="articleData.tags && articleData.tags.length" class="meta-item">
-            标签：{{ getTagsString(articleData.tags) }}
-          </span>
-          <span v-if="articleData.author" class="meta-item">
-            作者：{{ articleData.author }}
-          </span>
-          <span v-if="articleData.createTime" class="meta-item">
-            发布时间：{{ formatDate(articleData.createTime) }}
-          </span>
+        <div class="article-meta-info">
+          <div class="meta-item" v-if="articleData.publishTime || articleData.createTime">
+            发布时间：{{ formatDateSimple(articleData.publishTime || articleData.createTime || '') }}
+          </div>
+          <div class="meta-item" v-if="articleData.viewCount !== undefined">
+            浏览次数：{{ articleData.viewCount }}
+          </div>
+          <div class="meta-item" v-if="articleData.source">
+            来源：{{ articleData.source }}
+          </div>
         </div>
       </div>
 
-      <!-- 封面图片 -->
-      <div v-if="articleData.coverImage" class="article-cover">
-        <img :src="FILE_DOWNLOAD_URL + articleData.coverImage" class="cover-image" />
-      </div>
+      <!-- 分隔线 -->
+      <div class="separator"></div>
 
       <!-- 文章内容 -->
       <div class="article-content ql-editor" v-html="articleData.content"></div>
@@ -48,26 +43,21 @@
     <!-- 文章头部信息 -->
     <div class="article-header">
       <h1 class="article-title">{{ articleData.title }}</h1>
-      <div class="article-meta">
-        <span v-if="articleData.category" class="meta-item">
-          分类：{{ getCategoryLabel(articleData.category) }}
-        </span>
-        <span v-if="articleData.tags && articleData.tags.length" class="meta-item">
-          标签：{{ getTagsString(articleData.tags) }}
-        </span>
-        <span v-if="articleData.author" class="meta-item">
-          作者：{{ articleData.author }}
-        </span>
-        <span v-if="articleData.createTime" class="meta-item">
-          发布时间：{{ formatDate(articleData.createTime) }}
-        </span>
+      <div class="article-meta-info">
+        <div class="meta-item" v-if="articleData.publishTime || articleData.createTime">
+          发布时间：{{ formatDateSimple(articleData.publishTime || articleData.createTime || '') }}
+        </div>
+        <div class="meta-item" v-if="articleData.viewCount !== undefined">
+          浏览次数：{{ articleData.viewCount }}
+        </div>
+        <div class="meta-item" v-if="articleData.source">
+          来源：{{ articleData.source }}
+        </div>
       </div>
     </div>
 
-    <!-- 封面图片 -->
-    <div v-if="articleData.coverImage" class="article-cover">
-      <img :src="FILE_DOWNLOAD_URL + articleData.coverImage" class="cover-image" />
-    </div>
+    <!-- 分隔线 -->
+    <div class="separator"></div>
 
     <!-- 文章内容 -->
     <div class="article-content ql-editor" v-html="articleData.content"></div>
@@ -77,25 +67,15 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { ElDialog, ElButton } from 'element-plus';
-import { FILE_DOWNLOAD_URL } from '@/config';
-import { ResourceCategory } from '@/types/resource';
+import { ResourceCategory, Resource, Tag } from '@/types';
 
-interface ArticleData {
-  title?: string;
-  content?: string;
-  coverImage?: string;
-  category?: string;
-  tags?: Array<{ name?: string }> | string[]; // 支持对象数组或字符串数组
-  author?: string;
-  createTime?: string | Date;
-}
 
 interface Props {
   modelValue?: boolean; // Dialog 模式下的显示状态
   asDialog?: boolean; // 是否作为 Dialog 使用
   title?: string; // Dialog 标题
   width?: string; // Dialog 宽度
-  articleData?: ArticleData; // 文章数据
+  articleData?: Resource; // 文章数据
   categoryList?: Array<ResourceCategory>; // 分类列表
   showEditButton?: boolean; // 是否显示编辑按钮
 }
@@ -122,43 +102,17 @@ const visible = computed({
   set: (val) => props.asDialog ? emit('update:modelValue', val) : undefined
 });
 
-// 获取标签字符串
-function getTagsString(tags: Array<{ name?: string }> | string[]): string {
-  if (!tags || tags.length === 0) return '';
-  
-  if (typeof tags[0] === 'string') {
-    return (tags as string[]).join(', ');
-  } else {
-    return (tags as Array<{ name?: string }>)
-      .map(tag => tag.name || '')
-      .filter(name => name)
-      .join(', ');
-  }
-}
 
-// 获取分类标签
-function getCategoryLabel(categoryId: string): string {
-  if (!props.categoryList || !categoryId) return '';
-  
-  const category = props.categoryList.find(cat => 
-    cat.id === categoryId || cat.categoryID === categoryId
-  );
-  
-  return category?.name || categoryId;
-}
-
-// 格式化日期
-function formatDate(date: string | Date): string {
+// 格式化日期（简单格式：YYYY-MM-DD）
+function formatDateSimple(date: string | Date): string {
   if (!date) return '';
   
   const d = new Date(date);
-  return d.toLocaleDateString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit'
-  });
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  
+  return `${year}-${month}-${day}`;
 }
 
 // 关闭处理
@@ -189,45 +143,44 @@ defineExpose({
 .article-show-container {
   max-width: 100%;
   margin: 0 auto;
-  padding: 20px;
   background: #fff;
-  border-radius: 8px;
 }
 
 .article-header {
-  margin-bottom: 24px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #ebeef5;
+  margin-bottom: 36px;
 }
 
 .article-title {
+  font-family: 'PingFang SC';
+  font-weight: 600;
   font-size: 28px;
-  font-weight: bold;
-  color: #303133;
-  margin: 0 0 16px 0;
-  line-height: 1.4;
+  line-height: 28px;
+  color: #141F38;
+  margin: 0 0 30px 0;
+  text-align: center;
 }
 
-.article-meta {
+.article-meta-info {
   display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  color: #909399;
-  font-size: 14px;
+  align-items: center;
+  gap: 48px;
+  margin-top: 30px;
+  justify-content: center;
 }
 
 .meta-item {
-  display: flex;
-  align-items: center;
-  
-  &::before {
-    content: '';
-    width: 4px;
-    height: 4px;
-    background: #909399;
-    border-radius: 50%;
-    margin-right: 8px;
-  }
+  font-family: 'PingFang SC';
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 28px;
+  color: #979797;
+}
+
+.separator {
+  width: 100%;
+  height: 1px;
+  background: #E9E9E9;
+  margin-bottom: 40px;
 }
 
 .article-cover {
@@ -243,9 +196,11 @@ defineExpose({
 }
 
 .article-content {
-  line-height: 1.8;
-  color: #303133;
+  font-family: 'PingFang SC';
+  font-weight: 400;
   font-size: 16px;
+  line-height: 30px;
+  color: #334155;
   
   // 继承富文本编辑器的样式
   :deep(img) {