优化new组件避免重复api请求

app/components/news/new.vue

@@ -1,12 +1,9 @@
 <script lang="ts" setup>
-import {onMounted, ref} from "vue";
-
-// 导入API配置
-import {getArticleApiUrl} from '~/config/api'
+import {computed} from "vue";
 
 // 组件属性
 interface Props {
-  articleData?: {
+  articleData: {
     title: string
     publishDate: string
     category: string
@@ -20,103 +17,16 @@ interface Props {
       url: string
     }
   }
-  loading?: boolean
-  error?: string
+  loading: boolean
+  error: string
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  articleData: () => ({
-    title: '',
-    publishDate: '',
-    category: '',
-    content: '',
-    prevArticle: {
-      title: '',
-      url: '#'
-    },
-    nextArticle: {
-      title: '',
-      url: '#'
-    }
-  }),
-  loading: true,
-  error: ''
-})
+const props = defineProps<Props>()
 
-// 内部文章数据（当没有外部传入时使用）
-const internalArticleData = ref({
-  title: '',
-  publishDate: '',
-  category: '',
-  content: '',
-  prevArticle: {
-    title: '',
-    url: '#'
-  },
-  nextArticle: {
-    title: '',
-    url: '#'
-  }
-})
-
-// 内部加载状态
-const internalLoading = ref(true)
-const internalError = ref('')
-
-// 使用外部传入的数据或内部数据
-const articleData = computed(() => props.articleData || internalArticleData.value)
-const loading = computed(() => props.loading !== undefined ? props.loading : internalLoading.value)
-const error = computed(() => props.error || internalError.value)
-
-// 获取文章详情
-const fetchArticle = async (id: number) => {
-  try {
-    internalLoading.value = true
-    internalError.value = ''
-
-    const response = await fetch(getArticleApiUrl('GET', id))
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
-
-    const res = await response.json()
-    const data = res.data
-
-    console.log('api请求数据', data)
-
-    // 分类映射配置
-    const categoryMapping: Record<string, string> = {
-      'solution': '解决方案',
-      'developKnowledge': '开发知识',
-      'industryTrend': '行业动态',
-      'aboutUs': '关于我们'
-    }
-
-    data.code = categoryMapping[data.code] || '暂无分类'
-
-    // 更新内部文章数据
-    internalArticleData.value = {
-      title: data.title || '暂无标题',
-      publishDate: data.createTime || '暂无日期',
-      category: data.code || '暂无分类',
-      content: data.content || '暂无内容',
-      prevArticle: data.prevArticle || {
-        title: '暂无上一篇',
-        url: '#'
-      },
-      nextArticle: data.nextArticle || {
-        title: '暂无下一篇',
-        url: '#'
-      }
-    }
-  } catch (err) {
-    console.error('获取文章失败:', err)
-    internalError.value = '获取文章失败，请稍后重试'
-  } finally {
-    internalLoading.value = false
-  }
-}
+// 使用传入的数据
+const articleData = computed(() => props.articleData)
+const loading = computed(() => props.loading)
+const error = computed(() => props.error)
 
 // 热门标签
 const hotTags = ref([
@@ -124,6 +34,12 @@ const hotTags = ref([
   '共享汽车软件开发', '共享雨伞APP开发', '共享雨伞软件开发', '共享货车开发'
 ])
 
+// 重新加载页面方法
+const reloadPage = () => {
+  if (typeof window !== 'undefined') {
+    window.location.reload()
+  }
+}
 
 onMounted(() => {
   // 加载CSS样式文件
@@ -131,11 +47,6 @@ onMounted(() => {
 
   // 加载JavaScript文件
   loadJSFiles()
-
-  // 如果没有外部传入的文章数据，则获取文章详情（使用id=1进行测试）
-  if (!props.articleData || !props.articleData.title) {
-    fetchArticle(1)
-  }
 })
 
 const loadJSFiles = () => {
@@ -143,7 +54,6 @@ const loadJSFiles = () => {
     '/news/jquery.1.11.3.min.js',
     '/news/bootstrap.min.js',
     '/news/float.js',
-
   ]
 
   jsFiles.forEach(src => {
@@ -192,9 +102,9 @@ const loadCSSFiles = () => {
             <span>创特科技</span>
           </button>
           <a href="/"><img
+              alt="logo"
               class="img-responsive"
-              src="/news/top_logo.png"
-              style='margin-top:4px'></a>
+              src="/news/top_logo.png" style='margin-top:4px'></a>
         </div>
 
         <div id="mynav" class="collapse navbar-collapse">
@@ -255,7 +165,7 @@ const loadCSSFiles = () => {
             <p>{{ error }}</p>
             <button
                 style="margin-top: 20px; padding: 10px 20px; background: #ff8200; color: white; border: none; border-radius: 4px; cursor: pointer;"
-                @click="() => { if (!props.articleData || !props.articleData.title) fetchArticle(1) }">
+                @click="reloadPage">
               重新加载
             </button>
           </div>
@@ -335,19 +245,10 @@ const loadCSSFiles = () => {
   margin: 15px 0;
 }
 
-/* 文本截断样式 */
-.line-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
 
 /* 响应式调整 */
 @media (max-width: 1024px) {
-  .grid-cols-4 {
-    grid-template-columns: 1fr;
-  }
+
 
   .col-md-8, .col-md-4 {
     width: 100%;
@@ -355,22 +256,6 @@ const loadCSSFiles = () => {
   }
 }
 
-/* 悬停效果 */
-.hover\:bg-gray-50:hover {
-  background-color: rgb(249 250 251);
-}
-
-.dark .hover\:bg-gray-50:hover {
-  background-color: rgb(55 65 81);
-}
-
-.hover\:bg-gray-100:hover {
-  background-color: rgb(243 244 246);
-}
-
-.dark .hover\:bg-gray-100:hover {
-  background-color: rgb(75 85 99);
-}
 
 /* 标签云样式 */
 .tag-cloud li {