qingfeng/MyfronyProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(views): 重构多个视图组件代码结构，优化类型定义和逻辑组织

Browse Source 
feat(services): 新增文章分页查询方法，支持按状态筛选文章

style(styles): 调整主布局样式，优化分页组件显示效果

docs(README): 更新API文档，完善服务模块说明和类型定义

fix(components): 修复左侧模块点击属性时使用错误字段名的问题

chore(package): 移除未使用的依赖项，清理项目依赖

perf(layouts): 优化主布局组件性能，拆分功能模块，减少重复计算

test(views): 为分页组件添加基础测试用例

build: 更新构建配置，优化生产环境打包

ci: 调整CI配置，添加类型检查步骤
This commit is contained in:
qingfeng1121
2025-11-14 15:30:29 +08:00
parent 4ae0ff7c2a
commit 1dc5bdd93f
16 changed files with 1883 additions and 2456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
src/views/home.vue
View File

@@ -1,20 +1,16 @@
<!-- 文章列表组件 -->
<template>
<div class="article-list-container">
<!-- 加载状态 -->
<div v-if="loading" class="loading-container">
<el-skeleton :count="5" />
</div>
<!-- 文章列表 -->
<transition-group name="article-item" tag="div" v-else>
<div
class="article-card"
v-for="article in articleList"
:key="article.articleId"
@click="handleArticleClick(article)"
>
<transition-group name="article-item" tag="div" class="article-list-content" v-else>
<div class="article-card" v-for="article in displayedArticles" :key="article.articleId"
@click="handleArticleClick(article)">
<h6 class="article-title">{{ article.title }}</h6>
<div v-if="article.marked" class="article-special-tag">标记文章</div>
<p class="article-content-preview">{{ formatContentPreview(article.content, 150) }}</p>
@@ -31,6 +27,8 @@
</div>
</div>
</div>
<!-- 分页区域 -->
<PaginationComponent class="pagination-container" :list="articleList" :pageSize="10" @changePage="handleCurrentDataUpdate" />
</transition-group>
<!-- 空状态 -->
<div v-if="!loading && articleList.length === 0" class="empty-state-container">
@@ -42,12 +40,15 @@
<script setup>
import { useRouter, useRoute } from 'vue-router'
import { ref, onMounted, watch } from 'vue'
import { formatDate, formatRelativeTime } from '@/utils/dateUtils'
import { formatRelativeTime } from '@/utils/dateUtils'
import { formatContentPreview } from '@/utils/stringUtils'
import { ElMessage } from 'element-plus'
import { articleService, messageService, categoryAttributeService } from '@/services'
import PaginationComponent from '@/views/page.vue'
import { useGlobalStore } from '@/store/globalStore'
// ========== 组件初始化 ==========
// 全局状态管理
const globalStore = useGlobalStore()
@@ -57,108 +58,190 @@ const route = useRoute()
// 响应式状态
const articleList = ref([])
const displayedArticles = ref([])
const loading = ref(false)
// ========== 分页数据处理 ==========
/**
* 获取文章列表
* 处理分页组件的数据更新
* @param {Array} data - 分页组件传递的当前页数据
*/
const handleCurrentDataUpdate = (data) => {
displayedArticles.value = data
console.log('更新后的当前页数据：', data)
}
// ========== 文章数据获取模块 ==========
/**
* 根据路由路径获取对应的文章列表
* @returns {Promise<Object>} 文章列表响应数据
*/
const getArticlesByRoute = async () => {
// 检查URL参数，确定获取文章的方式
const pathSegment = route.path.split('/')[2]
console.log('当前路由分段:', pathSegment)
switch (pathSegment) {
case 'aericletype':
// 按属性类型获取文章
const attributeData = globalStore.getValue('attribute')
return await articleService.getArticlesByAttributeId(attributeData?.id)
case 'aericletitle':
// 按标题搜索文章
const titleData = globalStore.getValue('articleserarch')
return await articleService.getArticlesByTitle(titleData?.name)
case 'aericlestatus':
// 按状态获取文章
const statusData = globalStore.getValue('articlestatus')
return await articleService.getArticlesByStatus(statusData?.status)
default:
// 默认获取所有文章
console.log('获取所有文章列表')
return await articleService.getAllArticles()
}
}
/**
* 为单篇文章补充额外信息（留言数量、分类名称等）
* @param {Object} article - 文章对象
* @returns {Promise<Object>} 补充信息后的文章对象
*/
const enrichArticleWithExtraInfo = async (article) => {
try {
// 获取留言数量
const messageResponse = await messageService.getMessagesByArticleId(article.articleid)
// 获取分类名称
const categoryResponse = await categoryAttributeService.getAttributeById(article.attributeid)
// 设置分类名称
article.categoryName = categoryResponse?.data?.attributename || '未分类'
// 设置评论数量
article.commentCount = messageResponse?.data?.length || 0
// 标准化标记字段名
article.marked = article.mg
return article
} catch (err) {
console.error(`获取文章${article.articleid}额外信息失败:`, err)
// 错误情况下设置默认值
article.commentCount = 0
article.categoryName = '未分类'
return article
}
}
/**
* 批量为文章列表补充额外信息
* @param {Array} articles - 原始文章列表
* @returns {Promise<Array>} 补充信息后的文章列表
*/
const enrichArticlesWithExtraInfo = async (articles) => {
const enrichedArticles = []
for (const article of articles) {
const enrichedArticle = await enrichArticleWithExtraInfo(article)
enrichedArticles.push(enrichedArticle)
}
return enrichedArticles
}
/**
* 初始化显示文章列表
* @param {Array} articles - 完整文章列表
*/
const initializeDisplayedArticles = (articles) => {
// 初始显示前3条数据
displayedArticles.value = articles.slice(0, 3)
}
/**
* 获取文章列表主函数
*/
const fetchArticles = async () => {
let response = {}
try {
loading.value = true
let response = {}
// 检查URL参数，确定获取文章的方式
const pathSegment = route.path.split('/')[2];
console.log(pathSegment)
// 根据不同路径获取不同文章
switch (pathSegment) {
case 'aericletype':
// 按属性类型获取文章
const attributeData = globalStore.getValue('attribute')
response = await articleService.getArticlesByAttributeId(attributeData.id)
break
case 'aericletitle':
// 按标题搜索文章
const titleData = globalStore.getValue('articleserarch')
response = await articleService.getArticlesByTitle(titleData.name)
break
case 'aericlestatus':
// 按状态获取文章
const statusData = globalStore.getValue('articlestatus')
response = await articleService.getArticlesByStatus(statusData.status)
break
default:
// 默认情况下，根据用户权限决定获取方式
if (globalStore.Login) {
// 获取所有文章（包含已删除）
console.log('管理员获取所有文章列表（包含已删除）')
response = await articleService.getAllArticlesWithDeleted()
} else {
// 获取所有文章
console.log('获取所有文章列表')
response = await articleService.getAllArticles()
}
// 1. 根据路由获取文章列表
response = await getArticlesByRoute()
// 2. 确保数据存在
if (!response.data || !Array.isArray(response.data)) {
articleList.value = []
displayedArticles.value = []
return
}
// 为每个文章获取留言数量和分类名称
for (const article of response.data) {
try {
// 获取留言数量
const messageResponse = await messageService.getMessagesByArticleId(article.articleid)
// console.log(`文章ID: ${article.articleid}, 分类ID: ${article.attributeid}`)
// 获取分类名称
const categoryResponse = await categoryAttributeService.getAttributeById(article.attributeid)
if (categoryResponse && categoryResponse.data) {
article.categoryName = categoryResponse.data.attributename
} else {
article.categoryName = '未分类'
}
// 设置评论数量
article.commentCount = messageResponse.data.length > 0 ? messageResponse.data.length : 0
// 标准化ID字段名
article.articleId = article.articleid
// 标准化标记字段名
article.marked = article.mg
} catch (err) {
console.error(`获取文章${article.articleid}留言数量失败:`, err)
article.commentCount = 0
}
}
// 3. 为文章列表补充额外信息
const enrichedArticles = await enrichArticlesWithExtraInfo(response.data)
// 4. 更新文章列表
articleList.value = enrichedArticles
// 5. 初始化显示的文章
initializeDisplayedArticles(enrichedArticles)
// 更新文章列表
// console.log(response.data)
articleList.value = response.data || []
} catch (error) {
console.error('获取文章列表失败:', error)
ElMessage.error('获取文章列表失败，请稍后重试')
} finally {
console.log('最终文章列表数据:', articleList.value)
loading.value = false
}
}
// ========== 文章交互模块 ==========
/**
* 处理文章点击事件
* @param {Object} article - 文章对象
*/
const handleArticleClick = (article) => {
// 增加文章浏览量
articleService.incrementArticleViews(article.articleId)
// 清除之前的文章信息
globalStore.removeValue('articleInfo')
// 存储文章信息到全局状态
globalStore.setValue('articleInfo', article)
// 跳转到文章详情页
router.push({
path: '/article',
})
try {
// 增加文章浏览量（异步操作，不阻塞后续流程）
articleService.incrementArticleViews(article.articleId).catch(err => {
console.error('增加文章浏览量失败:', err)
})
// 清除之前的文章信息
globalStore.removeValue('articleInfo')
// 存储文章信息到全局状态
globalStore.setValue('articleInfo', article)
// 跳转到文章详情页
router.push({
path: '/article',
})
} catch (error) {
console.error('处理文章点击事件失败:', error)
ElMessage.error('操作失败，请稍后重试')
}
}
// ========== 生命周期和监听器 ==========
/**
* 处理路由变化的回调函数
*/
const handleRouteChange = () => {
fetchArticles()
console.log('路由变化，重新获取文章列表')
}
/**
* 处理文章列表变化的回调函数
* @param {Array} newList - 新的文章列表
*/
const handleArticleListChange = (newList) => {
if (newList && newList.length > 0) {
displayedArticles.value = newList.slice(0, 3)
}
}
//刷新时挂载获取数据
// 组件挂载时获取数据
onMounted(() => {
@@ -170,10 +253,14 @@ watch(
// 监听路由路径和查询参数变化
() => [route.path, route.query],
// 路由变化时触发获取文章列表
() => {
fetchArticles()
console.log('路由变化，重新获取文章列表')
},
handleRouteChange,
{ deep: true }
)
// 监听原始文章列表变化，确保初始数据正确显示
watch(
() => articleList.value,
handleArticleListChange,
{ deep: true }
)
</script>
@@ -182,7 +269,6 @@ watch(
/* 文章列表容器样式 */
.article-list-container {
max-width: 100%;
padding: 0 15px;
}
/* 加载状态容器 */
@@ -209,6 +295,7 @@ watch(
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.05);
}
/* 文章卡片悬停渐变效果 */
.article-card::before {
content: '';
@@ -217,10 +304,10 @@ watch(
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.05) 100%);
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.05) 100%);
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
@@ -230,7 +317,7 @@ watch(
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15),
0 0 30px rgba(255, 255, 255, 0.2);
0 0 30px rgba(255, 255, 255, 0.2);
border-color: rgba(52, 152, 219, 0.3);
}
@@ -270,7 +357,18 @@ watch(
text-transform: uppercase;
letter-spacing: 0.5px;
}
.article-list-content {
position: relative;
padding: 0 0 30px 0;
height: 100%;
}
.pagination-container {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
}
/* 文章内容预览样式 */
.article-content-preview {
color: #555;
@@ -320,26 +418,26 @@ watch(
.article-list-container {
padding: 0 10px;
}
.article-card {
padding: 18px;
margin-bottom: 18px;
gap: 10px;
}
.article-title {
font-size: 1.125rem;
}
.article-meta-info {
font-size: 0.8rem;
gap: 8px;
}
.article-content-preview {
font-size: 0.9rem;
}
/* 响应式元信息分隔符 */
.article-views-count::before,
.article-category-badge::before,
@@ -355,12 +453,12 @@ watch(
padding: 16px;
margin-bottom: 16px;
}
.article-meta-info {
font-size: 0.75rem;
gap: 6px;
}
.article-special-tag {
font-size: 0.7rem;
padding: 2px 8px;