From ad3a166f4f5a55bb965ed29b2fee7452325f7644 Mon Sep 17 00:00:00 2001 From: WindowBird <13870814+windows-bird@user.noreply.gitee.com> Date: Fri, 17 Oct 2025 15:25:14 +0800 Subject: [PATCH] test3 --- app/components/RecommendedArticles.vue | 5 +- app/components/news/new.vue | 48 +++++++++++---- app/composables/useImageStyles.ts | 12 ++-- app/pages/new.vue | 84 +++++++++++++++++++++++++- 4 files changed, 129 insertions(+), 20 deletions(-) diff --git a/app/components/RecommendedArticles.vue b/app/components/RecommendedArticles.vue index 48a6ea8..b2ef9c8 100644 --- a/app/components/RecommendedArticles.vue +++ b/app/components/RecommendedArticles.vue @@ -61,7 +61,10 @@ const loadRecommendedArticles = async () => { // 组件挂载时加载数据 onMounted(() => { - loadRecommendedArticles() + // 只在客户端执行 + if (typeof window !== 'undefined') { + loadRecommendedArticles() + } }) diff --git a/app/components/news/new.vue b/app/components/news/new.vue index d8c01b9..9116a66 100644 --- a/app/components/news/new.vue +++ b/app/components/news/new.vue @@ -22,7 +22,24 @@ interface Props { error: string } -const props = defineProps() +const props = withDefaults(defineProps(), { + 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文件 - loadJSFiles() + // 加载JavaScript文件 + 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 = () => {
-

{{ articleData.title }}

+

{{ articleData?.title || '暂无标题' }}

- {{ articleData.publishDate }} - 分类：{{ articleData.category }} + {{ articleData?.publishDate || '暂无日期' }} + 分类：{{ articleData?.category || '暂无分类' }}

-
+
  • 上一篇： - {{ articleData.prevArticle.title }} + {{ articleData?.prevArticle?.title || '暂无上一篇' }}
  • 下一篇： - {{ articleData.nextArticle.title }} + {{ articleData?.nextArticle?.title || '暂无下一篇' }}




    • diff --git a/app/composables/useImageStyles.ts b/app/composables/useImageStyles.ts index 8ede37c..5835063 100644 --- a/app/composables/useImageStyles.ts +++ b/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') { - // 如果是函数，直接监听 - watch(contentRef, () => { + // 如果是函数，使用 watchEffect 监听 + watchEffect(() => { + contentRef() // 触发函数执行 processImageStyles() - }, {deep: true}) + }) } else { // 如果是 Ref，监听其值 watch(contentRef, () => { @@ -76,7 +77,6 @@ export const useImageStyles = ( return { forceImageStyles, processImageStyles, - initImageStyles, - + initImageStyles } } diff --git a/app/pages/new.vue b/app/pages/new.vue index f831e48..d9ba09f 100644 --- a/app/pages/new.vue +++ b/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 = { + '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() +})