temp-save
This commit is contained in:
WindowBird
parent
f4ed5f5db5
commit
c1296a21b4
316
app/components/news/new.vue
Normal file
316
app/components/news/new.vue
Normal file
|
|
@ -0,0 +1,316 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {computed} from "vue";
|
||||||
|
import {useImageStyles} from '~/composables/useImageStyles';
|
||||||
|
|
||||||
|
// 组件属性
|
||||||
|
interface Props {
|
||||||
|
articleData: {
|
||||||
|
title: string
|
||||||
|
publishDate: string
|
||||||
|
category: string
|
||||||
|
content: string
|
||||||
|
prevArticle: {
|
||||||
|
title: string
|
||||||
|
url: string
|
||||||
|
}
|
||||||
|
nextArticle: {
|
||||||
|
title: string
|
||||||
|
url: 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 articleData = computed(() => props.articleData)
|
||||||
|
const loading = computed(() => props.loading)
|
||||||
|
const error = computed(() => props.error)
|
||||||
|
|
||||||
|
// 热门标签
|
||||||
|
const hotTags = ref([
|
||||||
|
'景区单车', '政务平台', '共享经济', '共享汽车APP开发', '共享类',
|
||||||
|
'共享汽车软件开发', '共享雨伞APP开发', '共享雨伞软件开发', '共享货车开发'
|
||||||
|
])
|
||||||
|
|
||||||
|
// 重新加载页面方法
|
||||||
|
const reloadPage = () => {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
window.location.reload()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用图片样式处理 composable
|
||||||
|
const {initImageStyles} = useImageStyles(
|
||||||
|
() => props.articleData?.content || '',
|
||||||
|
'.article-content',
|
||||||
|
{
|
||||||
|
maxWidth: '100%',
|
||||||
|
margin: '15px 0',
|
||||||
|
display: 'block',
|
||||||
|
boxSizing: 'border-box'
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 使用 Nuxt 的 useHead 来管理页面资源
|
||||||
|
useHead({
|
||||||
|
title: computed(() => articleData.value?.title ? `${articleData.value.title} - 创特科技` : '文章详情 - 创特科技'),
|
||||||
|
meta: [
|
||||||
|
{
|
||||||
|
name: 'description',
|
||||||
|
content: computed(() => articleData.value?.content ? articleData.value.content.substring(0, 160) + '...' : '创特科技专业文章')
|
||||||
|
},
|
||||||
|
{name: 'keywords', content: '创特科技,技术文章,共享单车,软件开发,解决方案'}
|
||||||
|
],
|
||||||
|
link: [
|
||||||
|
{rel: 'stylesheet', href: '/news/bootstrap.min.css'},
|
||||||
|
|
||||||
|
{rel: 'stylesheet', href: '/news/main22.css'},
|
||||||
|
|
||||||
|
{rel: 'stylesheet', href: '/news/new_index.css'},
|
||||||
|
{rel: 'stylesheet', href: '/news/float.css'},
|
||||||
|
{rel: 'stylesheet', href: '/news/animate.min.css'},
|
||||||
|
{rel: 'stylesheet', href: '/css/main2.css'},
|
||||||
|
],
|
||||||
|
script: [
|
||||||
|
|
||||||
|
{src: '/news/float.js', defer: true}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 初始化图片样式处理
|
||||||
|
initImageStyles()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 顶部 -->
|
||||||
|
|
||||||
|
<!-- 文章正文 -->
|
||||||
|
<section class="container" style="margin-top: 88px;">
|
||||||
|
<div class="row">
|
||||||
|
<!-- 左边部分 -->
|
||||||
|
<div class="col-md-8 wow fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;">
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<div v-if="loading" class="loading-container" style="text-align: center; padding: 50px;">
|
||||||
|
<div
|
||||||
|
class="loading-spinner"
|
||||||
|
style="border: 4px solid #f3f3f3; border-top: 4px solid #ff8200; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto;"/>
|
||||||
|
<p style="margin-top: 20px; color: #666;">正在加载文章...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 错误提示 -->
|
||||||
|
<div v-else-if="error" class="error-container" style="text-align: center; padding: 50px; color: #ff6b6b;">
|
||||||
|
<p>{{ error }}</p>
|
||||||
|
<button
|
||||||
|
style="margin-top: 20px; padding: 10px 20px; background: #ff8200; color: white; border: none; border-radius: 4px; cursor: pointer;"
|
||||||
|
@click="reloadPage">
|
||||||
|
重新加载
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 文章内容 -->
|
||||||
|
<div v-else class="row">
|
||||||
|
<div class="col-xs-12">
|
||||||
|
<h2>{{ articleData?.title || '暂无标题' }}</h2>
|
||||||
|
<p id="label" style="border-bottom: 1px solid #ddd; margin-top: 20px;">
|
||||||
|
<span>{{ articleData?.publishDate || '暂无日期' }}</span>
|
||||||
|
<span class="pull-right">分类：{{ articleData?.category || '暂无分类' }}</span>
|
||||||
|
</p>
|
||||||
|
<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>
|
||||||
|
</li>
|
||||||
|
<li class="pull-right">下一篇：
|
||||||
|
<a :href="articleData?.nextArticle?.url || '#'">{{ articleData?.nextArticle?.title || '暂无下一篇' }}</a>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
<br><br><br><br>
|
||||||
|
</div><!--左边部分-->
|
||||||
|
|
||||||
|
<!-- 右边部分 -->
|
||||||
|
<aside class="col-md-4" style="border-left: 1px solid #eee; background: #fefefe;">
|
||||||
|
<!-- 热门标签 -->
|
||||||
|
<div
|
||||||
|
class="widget tags wow fadeInRight animated"
|
||||||
|
style="margin-bottom: 30px !important; visibility: visible; animation-name: fadeInRight;">
|
||||||
|
<h4>热门标签</h4>
|
||||||
|
<ul class="tag-cloud">
|
||||||
|
<li v-for="tag in hotTags" :key="tag">
|
||||||
|
<a class="btn btn-xs" href="#" @click.prevent>{{ tag }}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- 热门标签 -->
|
||||||
|
|
||||||
|
<!-- 推荐文章 -->
|
||||||
|
<div
|
||||||
|
class="sy_news animated" data-wow-delay="200ms"
|
||||||
|
style="visibility: visible; animation-delay: 200ms; animation-name: fadeInDown;">
|
||||||
|
<RecommendedArticles
|
||||||
|
:articles-per-type="3"
|
||||||
|
:show-title="false"
|
||||||
|
:show-types="['solution', 'developKnowledge', 'industryTrend']"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</aside><!-- 右边部分 -->
|
||||||
|
|
||||||
|
</div><!--/.row-->
|
||||||
|
</section><!--/#blog-->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 文章内容样式 */
|
||||||
|
.article-content {
|
||||||
|
margin-top: 20px;
|
||||||
|
line-height: 1.8;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
overflow: hidden; /* 防止内容溢出 */
|
||||||
|
word-wrap: break-word; /* 长单词换行 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-content p {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 响应式调整 */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.col-md-8, .col-md-4 {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 标签云样式 */
|
||||||
|
.tag-cloud li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-cloud a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 8px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
color: #666;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-cloud a:hover {
|
||||||
|
background-color: #ff8200;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 推荐文章样式 */
|
||||||
|
.sy_news ul li {
|
||||||
|
padding: 8px 0;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sy_news ul li:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sy_news ul li a {
|
||||||
|
color: #333;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.4;
|
||||||
|
display: block;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sy_news ul li a:hover {
|
||||||
|
color: #ff8200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sy_news ul li a span {
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 上一篇下一篇样式 */
|
||||||
|
.nextorpre {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nextorpre li {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nextorpre a {
|
||||||
|
color: #ff8200;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nextorpre a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 加载动画 */
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 加载状态样式 */
|
||||||
|
.loading-container {
|
||||||
|
min-height: 200px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 错误状态样式 */
|
||||||
|
.error-container {
|
||||||
|
min-height: 200px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
160
app/composables/useArticleApi.ts
Normal file
160
app/composables/useArticleApi.ts
Normal file
|
|
@ -0,0 +1,160 @@
|
||||||
|
// 文章API服务
|
||||||
|
// 导入API配置
|
||||||
|
import {getApiUrl, API_CONFIG} from '~/config/api'
|
||||||
|
|
||||||
|
export interface Article {
|
||||||
|
id: string
|
||||||
|
title: string
|
||||||
|
brief: string | null
|
||||||
|
content: string | null
|
||||||
|
createTime: string
|
||||||
|
code: string | null
|
||||||
|
status: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ArticleListResponse {
|
||||||
|
msg: string
|
||||||
|
code: number
|
||||||
|
data: Article[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ArticleListParams {
|
||||||
|
code?: string // 文章类型：solution、developKnowledge、industryTrend
|
||||||
|
orderByColumn?: string
|
||||||
|
isAsc?: string
|
||||||
|
pageNum?: number
|
||||||
|
pageSize?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文章列表
|
||||||
|
* @param params 查询参数
|
||||||
|
* @returns Promise<ArticleListResponse>
|
||||||
|
*/
|
||||||
|
export const fetchArticleList = async (params: ArticleListParams = {}): Promise<ArticleListResponse> => {
|
||||||
|
try {
|
||||||
|
// 构建查询参数
|
||||||
|
const queryParams = new URLSearchParams()
|
||||||
|
|
||||||
|
if (params.code) queryParams.append('code', params.code)
|
||||||
|
if (params.orderByColumn) queryParams.append('orderByColumn', params.orderByColumn)
|
||||||
|
if (params.isAsc) queryParams.append('isAsc', params.isAsc)
|
||||||
|
if (params.pageNum) queryParams.append('pageNum', params.pageNum.toString())
|
||||||
|
if (params.pageSize) queryParams.append('pageSize', params.pageSize.toString())
|
||||||
|
|
||||||
|
const url = `${getApiUrl(API_CONFIG.ENDPOINTS.ARTICLE.LIST)}?${queryParams.toString()}`
|
||||||
|
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: API_CONFIG.REQUEST.HEADERS,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const result: ArticleListResponse = await response.json()
|
||||||
|
return result
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取文章列表失败:', error)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取推荐文章（按类型分组）
|
||||||
|
* @param types 文章类型数组
|
||||||
|
* @param pageSize 每页数量
|
||||||
|
* @returns Promise<Record<string, Article[]>>
|
||||||
|
*/
|
||||||
|
export const fetchRecommendedArticles = async (
|
||||||
|
types: string[] = ['solution', 'developKnowledge', 'industryTrend'],
|
||||||
|
pageSize: number = 5
|
||||||
|
): Promise<Record<string, Article[]>> => {
|
||||||
|
try {
|
||||||
|
const result: Record<string, Article[]> = {}
|
||||||
|
|
||||||
|
// 并发获取各类型文章
|
||||||
|
const promises = types.map(async (type) => {
|
||||||
|
const response = await fetchArticleList({
|
||||||
|
code: type,
|
||||||
|
orderByColumn: 'createTime',
|
||||||
|
isAsc: 'descending',
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: pageSize
|
||||||
|
})
|
||||||
|
return {type, articles: response.data}
|
||||||
|
})
|
||||||
|
|
||||||
|
const responses = await Promise.all(promises)
|
||||||
|
|
||||||
|
// 整理结果
|
||||||
|
responses.forEach(({type, articles}) => {
|
||||||
|
result[type] = articles
|
||||||
|
})
|
||||||
|
|
||||||
|
return result
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取推荐文章失败:', error)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 文章类型映射
|
||||||
|
*/
|
||||||
|
export const ARTICLE_TYPE_MAP: Record<string, string> = {
|
||||||
|
'solution': '解决方案',
|
||||||
|
'developKnowledge': '开发知识',
|
||||||
|
'industryTrend': '行业动态',
|
||||||
|
'aboutUs': '关于我们'
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文章类型的中文名称
|
||||||
|
* @param code 文章类型代码
|
||||||
|
* @returns 中文名称
|
||||||
|
*/
|
||||||
|
export const getArticleTypeName = (code: string): string => {
|
||||||
|
return ARTICLE_TYPE_MAP[code] || '未知类型'
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 文章API Composable
|
||||||
|
* @returns 文章API相关方法
|
||||||
|
*/
|
||||||
|
export const useArticleApi = () => {
|
||||||
|
/**
|
||||||
|
* 获取文章列表
|
||||||
|
* @param params 查询参数
|
||||||
|
* @returns Promise<Article[]>
|
||||||
|
*/
|
||||||
|
const getArticles = async (params: ArticleListParams = {}): Promise<Article[]> => {
|
||||||
|
try {
|
||||||
|
const response = await fetchArticleList(params)
|
||||||
|
return response.data || []
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取文章列表失败:', error)
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取推荐文章（按类型分组）
|
||||||
|
* @param types 文章类型数组
|
||||||
|
* @param pageSize 每页数量
|
||||||
|
* @returns Promise<Record<string, Article[]>>
|
||||||
|
*/
|
||||||
|
const getRecommendedArticles = async (
|
||||||
|
types: string[] = ['solution', 'developKnowledge', 'industryTrend'],
|
||||||
|
pageSize: number = 5
|
||||||
|
): Promise<Record<string, Article[]>> => {
|
||||||
|
return await fetchRecommendedArticles(types, pageSize)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
getArticles,
|
||||||
|
getRecommendedArticles,
|
||||||
|
getArticleTypeName
|
||||||
|
}
|
||||||
|
}
|
||||||
82
app/composables/useImageStyles.ts
Normal file
82
app/composables/useImageStyles.ts
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
import {nextTick, watch, watchEffect, onMounted, type Ref} from 'vue'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 图片样式处理 Composable
|
||||||
|
* 用于强制处理 v-html 内容中的图片样式
|
||||||
|
*/
|
||||||
|
export const useImageStyles = (
|
||||||
|
contentRef: Ref<string> | (() => string),
|
||||||
|
containerSelector: string = '.article-content',
|
||||||
|
options: {
|
||||||
|
maxWidth?: string
|
||||||
|
margin?: string
|
||||||
|
display?: string
|
||||||
|
boxSizing?: string
|
||||||
|
} = {}
|
||||||
|
) => {
|
||||||
|
// 默认配置
|
||||||
|
const defaultOptions = {
|
||||||
|
maxWidth: 'calc(100% - 0px)',
|
||||||
|
margin: '15px 0',
|
||||||
|
display: 'block',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
...options
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 强制处理图片样式
|
||||||
|
*/
|
||||||
|
const forceImageStyles = () => {
|
||||||
|
if (typeof document === 'undefined') return
|
||||||
|
|
||||||
|
const images = document.querySelectorAll(`${containerSelector} img`)
|
||||||
|
images.forEach((img: any) => {
|
||||||
|
// 强制设置样式
|
||||||
|
img.style.maxWidth = defaultOptions.maxWidth
|
||||||
|
img.style.height = 'auto'
|
||||||
|
img.style.width = 'auto'
|
||||||
|
img.style.display = defaultOptions.display
|
||||||
|
img.style.margin = defaultOptions.margin
|
||||||
|
img.style.boxSizing = defaultOptions.boxSizing
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理图片样式的核心方法
|
||||||
|
*/
|
||||||
|
const processImageStyles = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
forceImageStyles()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化图片样式处理
|
||||||
|
*/
|
||||||
|
const initImageStyles = () => {
|
||||||
|
// 组件挂载时处理
|
||||||
|
onMounted(() => {
|
||||||
|
processImageStyles()
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听内容变化
|
||||||
|
if (typeof contentRef === 'function') {
|
||||||
|
// 如果是函数，使用 watchEffect 监听
|
||||||
|
watchEffect(() => {
|
||||||
|
contentRef() // 触发函数执行
|
||||||
|
processImageStyles()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 如果是 Ref，监听其值
|
||||||
|
watch(contentRef, () => {
|
||||||
|
processImageStyles()
|
||||||
|
}, {deep: true})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
forceImageStyles,
|
||||||
|
processImageStyles,
|
||||||
|
initImageStyles
|
||||||
|
}
|
||||||
|
}
|
||||||
61
app/config/api.ts
Normal file
61
app/config/api.ts
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
/**
|
||||||
|
* API配置文件
|
||||||
|
* 统一管理所有API相关配置
|
||||||
|
*/
|
||||||
|
|
||||||
|
// API基础地址配置
|
||||||
|
export const API_CONFIG = {
|
||||||
|
// 开发环境API地址
|
||||||
|
BASE_URL: 'http://192.168.1.4:4101',
|
||||||
|
|
||||||
|
// API端点配置
|
||||||
|
ENDPOINTS: {
|
||||||
|
// 文章相关API
|
||||||
|
ARTICLE: {
|
||||||
|
LIST: '/app/owArticle/list',
|
||||||
|
GET: '/app/owArticle/get',
|
||||||
|
CREATE: '/app/owArticle/create',
|
||||||
|
UPDATE: '/app/owArticle/update',
|
||||||
|
DELETE: '/app/owArticle/delete'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 请求配置
|
||||||
|
REQUEST: {
|
||||||
|
TIMEOUT: 10000, // 请求超时时间（毫秒）
|
||||||
|
RETRY_COUNT: 3, // 重试次数
|
||||||
|
HEADERS: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} as const
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取完整的API URL
|
||||||
|
* @param endpoint API端点
|
||||||
|
* @returns 完整的API URL
|
||||||
|
*/
|
||||||
|
export const getApiUrl = (endpoint: string): string => {
|
||||||
|
return `${API_CONFIG.BASE_URL}${endpoint}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文章API URL
|
||||||
|
* @param action 操作类型
|
||||||
|
* @param id 文章ID（可选）
|
||||||
|
* @returns 文章API URL
|
||||||
|
*/
|
||||||
|
export const getArticleApiUrl = (action: keyof typeof API_CONFIG.ENDPOINTS.ARTICLE, id?: string | number): string => {
|
||||||
|
const endpoint = API_CONFIG.ENDPOINTS.ARTICLE[action]
|
||||||
|
const baseUrl = getApiUrl(endpoint)
|
||||||
|
|
||||||
|
if (id && (action === 'GET' || action === 'UPDATE' || action === 'DELETE')) {
|
||||||
|
return `${baseUrl}/${id}`
|
||||||
|
}
|
||||||
|
|
||||||
|
return baseUrl
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出默认配置
|
||||||
|
export default API_CONFIG
|
||||||
103
app/pages/news/[id].vue
Normal file
103
app/pages/news/[id].vue
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// 设置页面布局
|
||||||
|
// 导入API配置
|
||||||
|
import {getArticleApiUrl} from '~/config/api'
|
||||||
|
|
||||||
|
|
||||||
|
// 获取路由参数
|
||||||
|
const route = useRoute()
|
||||||
|
const articleId = route.params.id as string
|
||||||
|
|
||||||
|
// 文章数据
|
||||||
|
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) => {
|
||||||
|
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(() => {
|
||||||
|
if (articleId) {
|
||||||
|
fetchArticle(articleId)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听路由变化
|
||||||
|
watch(() => route.params.id, (newId) => {
|
||||||
|
if (newId) {
|
||||||
|
fetchArticle(newId as string)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<NewsNew :article-data="articleData" :error="error" :loading="loading"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
BIN
public/img/news/banner2.png
Normal file
BIN
public/img/news/banner2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Loading…
Reference in New Issue
Block a user