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

feat: 添加Pinia全局状态管理并重构路由逻辑

Browse Source 
添加Pinia作为全局状态管理工具，重构路由参数传递方式
移除URL中的动态参数，改为通过Pinia store传递数据
优化导航菜单样式和交互效果，修复路由激活状态问题
新增全局状态管理示例文档，说明基础使用方法
调整页面布局和样式，提升用户体验
This commit is contained in:
qingfeng1121
2025-10-20 11:59:53 +08:00
parent 02d17d7260
commit b042e2a511
12 changed files with 525 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/views/home.vue
View File

@@ -12,16 +12,15 @@
<div
class="article-card"
v-for="item in datas"
:key="item.id || (item.title + item.publishedAt)"
:key="item.articleid"
@click="handleArticleClick(item.articleid)"
>
<h2 class="article-title">{{ item.title }}</h2>
<div class="article-meta">
<span class="article-author">{{ item.author || '清疯不颠' }}</span>
<span class="article-date">{{ formatDateDisplay(item.publishedAt || item.createTime) }}</span>
<!-- <span class="article-date">{{ formatDateDisplay(item.publishedAt || item.createTime) }}</span> -->
<span v-if="item.categoryName" class="article-category">{{ item.categoryName }}</span>
<span v-if="item.views" class="article-views">{{ item.views }} 阅读</span>
<span v-if="item.commentCount" class="article-comments">{{ item.commentCount }} 评论</span>
<span v-if="item.viewCount" class="article-views">{{ item.views }} 阅读</span>
<!-- <span v-if="item.content" class="article-comments">{{ item.commentCount }} 评论</span> -->
</div>
<div v-if="item.mg" class="article-tag">mg</div>
<p class="article-preview">{{ formatContentPreview(item.content, 150) }}</p>
@@ -42,7 +41,9 @@ import { articleService } from '@/services'
import { formatDate, formatRelativeTime } from '@/utils/dateUtils'
import { formatContentPreview } from '@/utils/stringUtils'
import { ElMessage } from 'element-plus'
import { useGlobalStore } from '@/store/globalStore'
const globalStore = useGlobalStore()
// 路由实例
const router = useRouter()
const route = useRoute()
@@ -58,38 +59,33 @@ const loading = ref(false)
* 获取文章列表
*/
const fetchArticles = async () => {
try {
try {
loading.value = true
let res = {} // 使用let而不是const
// 检查URL参数
const query = route.query
const params = route.params
const localhome = route.path.split('/')[2];
// 优先使用attributeId参数（新接口）
if (query.attributeId) {
console.log('根据属性ID获取文章列表')
res = await articleService.getArticlesByAttribute(query.attributeId)
}
// 兼容旧的type参数
else if (params.type) {
console.log('根据类型ID获取文章列表（兼容模式）')
res = await articleService.getArticlesByCategory(params.type)
if (localhome==='aericletype') {
const data = globalStore.getValue('attribute')
res = await articleService.getArticlesByAttributeId(data.id)
}
// 搜索标题
else if (params.title || query.title) {
const title = params.title || query.title
console.log('根据标题获取文章列表')
res = await articleService.getArticlesByTitle(title)
else if (localhome==='aericletitle') {
const data = globalStore.getValue('title')
res = await articleService.getArticlesByTitle(data.title)
}
// 获取所有文章
else {
res = await articleService.getAllArticles()
console.log('获取所有文章列表')
res = await articleService.getAllArticles()
}
// 修复：使用正确的属性名data而不是date
console.log('获取文章列表成功:', res.data)
datas.value = res.data || []
console.log('获取文章列表成功:', datas.value)
console.log('文章数据已赋值:', datas.value)
} catch (error) {
console.error('获取文章列表失败:', error)
ElMessage.error('获取文章列表失败，请稍后重试')