test3

app/components/RecommendedArticles.vue

@@ -61,7 +61,10 @@ const loadRecommendedArticles = async () => {
 
 // 组件挂载时加载数据
 onMounted(() => {
-  loadRecommendedArticles()
+  // 只在客户端执行
+  if (typeof window !== 'undefined') {
+    loadRecommendedArticles()
+  }
 })
 </script>
 

app/components/news/new.vue

@@ -22,7 +22,24 @@ interface Props {
   error: string
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  articleData: () => ({
+    title: '',
+    publishDate: '',
+    category: '',
+    content: '',
+    prevArticle: {
+      title: '',
+      url: '#'
+    },
+    nextArticle: {
+      title: '',
+      url: '#'
+    }
+  }),
+  loading: true,
+  error: ''
+})
 
 // 使用传入的数据
 const articleData = computed(() => props.articleData)
@@ -44,7 +61,7 @@ const reloadPage = () => {
 
 // 使用图片样式处理 composable
 const {initImageStyles} = useImageStyles(
-    () => props.articleData.content,
+    () => props.articleData?.content || '',
     '.article-content',
     {
       maxWidth: '100%',
@@ -55,17 +72,22 @@ const {initImageStyles} = useImageStyles(
 )
 
 onMounted(() => {
-  // 加载CSS样式文件
+  // 只在客户端执行
-  loadCSSFiles()
+  if (typeof window !== 'undefined') {
+    // 加载CSS样式文件
+    loadCSSFiles()
 
-  // 加载JavaScript文件
+    // 加载JavaScript文件
-  loadJSFiles()
+    loadJSFiles()
+  }
 })
 
 // 初始化图片样式处理
 initImageStyles()
 
 const loadJSFiles = () => {
+  if (typeof document === 'undefined') return
+  
   const jsFiles = [
     '/news/jquery.1.11.3.min.js',
     '/news/bootstrap.min.js',
@@ -85,6 +107,8 @@ const loadJSFiles = () => {
 }
 
 const loadCSSFiles = () => {
+  if (typeof document === 'undefined') return
+  
   const cssFiles = [
     '/news/bootstrap.min.css',
     '/news/main22.css',
@@ -189,22 +213,22 @@ const loadCSSFiles = () => {
           <!-- 文章内容 -->
           <div v-else class="row">
             <div class="col-xs-12">
-              <h2>{{ articleData.title }}</h2>
+              <h2>{{ articleData?.title || '暂无标题' }}</h2>
               <p id="label" style="border-bottom: 1px solid #ddd; margin-top: 20px;">
-                <span>{{ articleData.publishDate }}</span>
+                <span>{{ articleData?.publishDate || '暂无日期' }}</span>
-                <span class="pull-right">分类：{{ articleData.category }}</span>
+                <span class="pull-right">分类：{{ articleData?.category || '暂无分类' }}</span>
               </p>
-              <div class="article-content" v-html="articleData.content"/>
+              <div class="article-content" v-html="articleData?.content || '暂无内容'"/>
             </div>
           </div>
 
           <!-- 上一篇/下一篇 -->
           <div class="nextorpre" style="margin-top: 38px; border-top: 1px solid #ddd; padding-top: 8px;">
             <li class="pull-left">上一篇：
-              <a :href="articleData.prevArticle.url">{{ articleData.prevArticle.title }}</a>
+              <a :href="articleData?.prevArticle?.url || '#'">{{ articleData?.prevArticle?.title || '暂无上一篇' }}</a>
             </li>
             <li class="pull-right">下一篇：
-              <a :href="articleData.nextArticle.url">{{ articleData.nextArticle.title }}</a>
+              <a :href="articleData?.nextArticle?.url || '#'">{{ articleData?.nextArticle?.title || '暂无下一篇' }}</a>
             </li>
           </div>
           <br><br><br><br>

app/composables/useImageStyles.ts

@@ -1,4 +1,4 @@
-import {nextTick, watch, onMounted, type Ref} from 'vue'
+import {nextTick, watch, watchEffect, onMounted, type Ref} from 'vue'
 
 /**
  * 图片样式处理 Composable
@@ -61,10 +61,11 @@ export const useImageStyles = (
 
         // 监听内容变化
         if (typeof contentRef === 'function') {
-            // 如果是函数，直接监听
+            // 如果是函数，使用 watchEffect 监听
-            watch(contentRef, () => {
+            watchEffect(() => {
+                contentRef() // 触发函数执行
                 processImageStyles()
-            }, {deep: true})
+            })
         } else {
             // 如果是 Ref，监听其值
             watch(contentRef, () => {
@@ -76,7 +77,6 @@ export const useImageStyles = (
     return {
         forceImageStyles,
         processImageStyles,
-        initImageStyles,
+        initImageStyles
-     
     }
 }

app/pages/new.vue

@@ -3,11 +3,93 @@
 definePageMeta({
   layout: 'no-navigation'
 })
+
+// 导入API配置
+import {getArticleApiUrl} from '~/config/api'
+
+// 文章数据
+const articleData = ref({
+  title: '',
+  publishDate: '',
+  category: '',
+  content: '',
+  prevArticle: {
+    title: '',
+    url: '#'
+  },
+  nextArticle: {
+    title: '',
+    url: '#'
+  }
+})
+
+// 加载状态
+const loading = ref(true)
+const error = ref('')
+
+// 获取文章详情
+const fetchArticle = async (id: string = '437') => {
+  try {
+    loading.value = true
+    error.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] || '暂无分类'
+
+    // 更新文章数据
+    articleData.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)
+    error.value = '获取文章失败，请稍后重试'
+  } finally {
+    loading.value = false
+  }
+}
+
+// 组件挂载时获取文章详情
+onMounted(() => {
+  fetchArticle()
+})
 </script>
 
 <template>
   <view>
-    <NewsNew/>
+    <NewsNew 
+      :article-data="articleData"
+      :loading="loading"
+      :error="error"
+    />
   </view>
 </template>