diff --git a/package-lock.json b/package-lock.json index a330f84..17c9a94 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "antd": "^5.27.3", "axios": "^1.12.2", "element-plus": "^2.11.2", + "pinia": "^3.0.3", "vue": "^3.5.18", "vue-router": "^4.5.1" }, @@ -2681,7 +2682,6 @@ "version": "2.5.0", "resolved": "https://registry.npmmirror.com/birpc/-/birpc-2.5.0.tgz", "integrity": "sha512-VSWO/W6nNQdyP520F1mhf+Lc2f8pjGQOtoHHm7Ze8Go1kX7akpVIrtTa0fn+HB0QJEDVacl6aO08YE0PgXfdnQ==", - "dev": true, "license": "MIT", "funding": { "url": "https://github.com/sponsors/antfu" @@ -2938,7 +2938,6 @@ "version": "3.0.5", "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-3.0.5.tgz", "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==", - "dev": true, "license": "MIT", "dependencies": { "is-what": "^4.1.8" @@ -3693,7 +3692,6 @@ "version": "5.5.3", "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz", "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==", - "dev": true, "license": "MIT" }, "node_modules/html-encoding-sniffer": { @@ -3917,7 +3915,6 @@ "version": "4.1.16", "resolved": "https://registry.npmmirror.com/is-what/-/is-what-4.1.16.tgz", "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==", - "dev": true, "license": "MIT", "engines": { "node": ">=12.13" @@ -4227,7 +4224,6 @@ "version": "3.0.1", "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz", "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==", - "dev": true, "license": "MIT" }, "node_modules/mlly": { @@ -4486,7 +4482,6 @@ "version": "1.0.0", "resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-1.0.0.tgz", "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==", - "dev": true, "license": "MIT" }, "node_modules/picocolors": { @@ -4508,6 +4503,60 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/pinia": { + "version": "3.0.3", + "resolved": "https://registry.npmmirror.com/pinia/-/pinia-3.0.3.tgz", + "integrity": "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==", + "license": "MIT", + "dependencies": { + "@vue/devtools-api": "^7.7.2" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "typescript": ">=4.4.4", + "vue": "^2.7.0 || ^3.5.11" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/pinia/node_modules/@vue/devtools-api": { + "version": "7.7.7", + "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-7.7.7.tgz", + "integrity": "sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==", + "license": "MIT", + "dependencies": { + "@vue/devtools-kit": "^7.7.7" + } + }, + "node_modules/pinia/node_modules/@vue/devtools-kit": { + "version": "7.7.7", + "resolved": "https://registry.npmmirror.com/@vue/devtools-kit/-/devtools-kit-7.7.7.tgz", + "integrity": "sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==", + "license": "MIT", + "dependencies": { + "@vue/devtools-shared": "^7.7.7", + "birpc": "^2.3.0", + "hookable": "^5.5.3", + "mitt": "^3.0.1", + "perfect-debounce": "^1.0.0", + "speakingurl": "^14.0.1", + "superjson": "^2.2.2" + } + }, + "node_modules/pinia/node_modules/@vue/devtools-shared": { + "version": "7.7.7", + "resolved": "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-7.7.7.tgz", + "integrity": "sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==", + "license": "MIT", + "dependencies": { + "rfdc": "^1.4.1" + } + }, "node_modules/pkg-types": { "version": "2.3.0", "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-2.3.0.tgz", @@ -5275,7 +5324,6 @@ "version": "1.4.1", "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz", "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==", - "dev": true, "license": "MIT" }, "node_modules/rollup": { @@ -5472,7 +5520,6 @@ "version": "14.0.1", "resolved": "https://registry.npmmirror.com/speakingurl/-/speakingurl-14.0.1.tgz", "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==", - "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -5645,7 +5692,6 @@ "version": "2.2.2", "resolved": "https://registry.npmmirror.com/superjson/-/superjson-2.2.2.tgz", "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==", - "dev": true, "license": "MIT", "dependencies": { "copy-anything": "^3.0.2" diff --git a/package.json b/package.json index 1067cf0..18ea265 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "antd": "^5.27.3", "axios": "^1.12.2", "element-plus": "^2.11.2", + "pinia": "^3.0.3", "vue": "^3.5.18", "vue-router": "^4.5.1" }, diff --git a/src/components/LeftModule.vue b/src/components/LeftModule.vue index c57dce4..9e84d89 100644 --- a/src/components/LeftModule.vue +++ b/src/components/LeftModule.vue @@ -15,7 +15,7 @@
- + 首页 @@ -144,9 +144,18 @@ onUnmounted(() => { display: block; background-color: rgba(0, 0, 0,0 ); /* 白色半透明背景 */ } -.cont2 .el-menu-vertical-demo ul li:hover{ - background-color: rgba(220, 53, 69, 0.9); /* 红色半透明背景 */ - color: white; +.cont2 .el-menu-vertical-demo .el-menu-item:nth-child(3){ + border-radius: 0 0 10px 10px; +} +.cont2 .el-menu-vertical-demo .el-menu-item:hover{ + background-color: rgba(64, 158, 255, 0.9); +} +.cont2 .el-menu-vertical-demo .el-menu-item.is-active:hover{ + color: black; /* 蓝色半透明背景 */ +} + +.cont2 .el-menu-vertical-demo .el-menu-item.is-active{ + color: var(--nav-is-active); } /* 分类列表样式 */ diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index 91fe6ff..ff5bfd7 100644 --- a/src/layouts/MainLayout.vue +++ b/src/layouts/MainLayout.vue @@ -9,19 +9,19 @@
- + 首页 - + 目录 - + 疯言疯语 - + 关于 - + 留言板 @@ -81,6 +81,9 @@ import LeftModule from '@/components/LeftModule.vue'; // 路由相关 const router = useRouter(); const route = useRoute(); +// 全局状态管理 +import { useGlobalStore } from '@/store/globalStore' +const globalStore = useGlobalStore() // 响应式状态 const classhero = ref(false); @@ -89,9 +92,10 @@ const isScrollingleftmodlue = ref(false); const elrowtop = ref('transparent'); const classnonsenset = ref(false); const windowwidth = ref(true); -const activeIndex = ref('/home'); -const localhome= '/home'; +const activeIndex = ref('home'); +const localhome= 'home'; +let rpsliturl = route.path.split('/')[1]; // 搜索相关状态 const isSearchBoxOpen = ref(false); @@ -99,7 +103,7 @@ const searchKeyword = ref(''); let searchCloseTimer: number | undefined; // 打字机效果相关 -const fullHeroText = '测试打字机效果'; +let fullHeroText = '测试打字机效果'; const heroText = ref(''); let heroIndex = 0; let heroTimer: number | undefined; @@ -125,7 +129,7 @@ const startTypewriter = () => { * 菜单选择跳转 */ const handleSelect = (key: string) => { - router.push({ path: key }); + router.push({ path: '/' + key }); }; /** @@ -181,16 +185,19 @@ const performSearch = () => { */ const updatePageState = (url: string) => { classhero.value = url !== localhome; - classnonsenset.value = url === '/nonsense'; + classnonsenset.value = url === 'nonsense'; }; /** * 设置当前激活的菜单项 */ const setActiveIndex = (path: string) => { - activeIndex.value = path; + console.log('设置激活索引:', path); + activeIndex.value =path; }; + + /** * 处理窗口大小变化 */ @@ -198,7 +205,7 @@ const handleResize = () => { windowwidth.value = window.innerWidth > 768; // 根据屏幕大小调整内容区可见性 - if (route.path === localhome) { + if (rpsliturl === localhome) { isconts.value = window.innerWidth <= 768 ? true : false; } }; @@ -221,7 +228,7 @@ const handleScroll = () => { } // 首页内容区滚动动画 - if (route.path === localhome) { + if (rpsliturl === localhome) { isconts.value = window.scrollY > 200; isScrollingleftmodlue.value = window.scrollY > 600; } @@ -231,16 +238,30 @@ const handleScroll = () => { * 监听路由变化 */ watch(() => route.path, (newPath) => { - updatePageState(newPath); - setActiveIndex(newPath); + rpsliturl = route.path.split('/')[1]; + updatePageState(rpsliturl); + setActiveIndex(rpsliturl); + const localname = route.path.split('/')[2]; + let articledata; + // 优先使用attributeId参数（新接口） + if (localname==='aericletype') { + articledata = globalStore.getValue('attribute') + } + // 搜索标题 + if (localname==='aericletitle') { + articledata = globalStore.getValue('title') + } + // hero 标题 + if (articledata) { + fullHeroText = articledata.name + } // 跳转后回到顶部 window.scrollTo({ top: 0, behavior: 'smooth' }); - // 首页内容区滚动动画仅大屏下生效 - if (newPath === localhome) { + if (newPath.split('/')[1] === localhome) { isconts.value = window.innerWidth <= 768 ? true : false; - // 首页时启动打字机 + // 首页时启动打字机效果 startTypewriter(); } else { isconts.value = true; @@ -257,7 +278,6 @@ onMounted(() => { handleResize(); - // 添加事件监听器 window.addEventListener('resize', handleResize); window.addEventListener('scroll', handleScroll); diff --git a/src/main.js b/src/main.js index f7c133d..7350cf6 100644 --- a/src/main.js +++ b/src/main.js @@ -1,11 +1,16 @@ import { createApp } from 'vue' +import { createPinia } from 'pinia' import App from './App.vue' import Router from './router/Router' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import './styles/MainLayout.css' +// 创建Pinia实例 +const pinia = createPinia() + const app = createApp(App) app.use(Router) app.use(ElementPlus) +app.use(pinia) // 添加Pinia支持 app.mount('#app') \ No newline at end of file diff --git a/src/router/Router.js b/src/router/Router.js index b6f10e0..64af3de 100644 --- a/src/router/Router.js +++ b/src/router/Router.js @@ -32,11 +32,11 @@ const routes = [ meta: { title: '首页' }, children: [ { - path: 'aericletype/:type', + path: 'aericletype', name: 'homeByType' }, { - path: 'aericletitle/:title', + path: 'aericletitle', name: 'homeByTitle' } ] diff --git a/src/store/globalStore.js b/src/store/globalStore.js new file mode 100644 index 0000000..4674610 --- /dev/null +++ b/src/store/globalStore.js @@ -0,0 +1,124 @@ +import { defineStore } from 'pinia' + +/** + * 全局状态管理store + * 提供全局的传值和获取值的功能 + * 任何页面都可以调用和获取其中的值 + */ +export const useGlobalStore = defineStore('global', { + // 状态定义 + state: () => ({ + // 全局数据对象，存储所有需要共享的数据 + globalData: {}, + // 可以在这里定义特定的状态属性，便于类型提示和直接使用 + user: null, + loading: false, + notifications: [] + }), + + // 计算属性 - 用于获取和转换状态 + getters: { + /** + * 检查全局数据中是否存在指定的键 + * @param {string} key - 要检查的键名 + * @returns {boolean} - 如果存在返回true，否则返回false + */ + hasValue: (state) => (key) => { + return Object.prototype.hasOwnProperty.call(state.globalData, key) + }, + + /** + * 获取指定键的值 + * @param {string} key - 要获取的键名 + * @returns {any} - 对应的值，如果不存在则返回undefined + */ + getValue: (state) => (key) => { + return state.globalData[key] + }, + + /** + * 获取所有全局数据 + * @returns {Object} - 所有全局数据 + */ + getAllData: (state) => { + return { ...state.globalData } + } + }, + + // 操作方法 - 用于修改状态 + actions: { + /** + * 设置全局数据 + * @param {string} key - 键名 + * @param {any} value - 要存储的值 + */ + setValue(key, value) { + this.globalData[key] = value + }, + + /** + * 批量设置多个键值对 + * @param {Object} data - 包含多个键值对的对象 + */ + setMultipleValues(data) { + if (typeof data === 'object' && data !== null) { + Object.assign(this.globalData, data) + } + }, + + /** + * 删除指定的全局数据 + * @param {string} key - 要删除的键名 + */ + removeValue(key) { + if (Object.prototype.hasOwnProperty.call(this.globalData, key)) { + delete this.globalData[key] + } + }, + + /** + * 清空所有全局数据 + */ + clearAll() { + this.globalData = {} + }, + + /** + * 设置用户信息 + * @param {Object} userInfo - 用户信息对象 + */ + setUser(userInfo) { + this.user = userInfo + }, + + /** + * 设置加载状态 + * @param {boolean} status - 加载状态 + */ + setLoading(status) { + this.loading = status + }, + + /** + * 添加通知 + * @param {Object} notification - 通知对象 + */ + addNotification(notification) { + this.notifications.push({ + id: Date.now(), + ...notification + }) + }, + + /** + * 移除通知 + * @param {number} id - 通知ID + */ + removeNotification(id) { + const index = this.notifications.findIndex(notification => notification.id === id) + if (index !== -1) { + this.notifications.splice(index, 1) + } + } + } +}) \ No newline at end of file diff --git a/src/store/useExample.md b/src/store/useExample.md new file mode 100644 index 0000000..8fd33f1 --- /dev/null +++ b/src/store/useExample.md @@ -0,0 +1,208 @@ +# Pinia 全局状态管理使用示例 + +## 1. 基础使用方法 + +### 在任意组件中使用全局状态 + +```vue + + + +``` + +## 2. 页面间数据传递示例 + +### 页面A - 设置数据 + +```vue + +``` + +### 页面B - 获取数据 + +```vue + +``` + +## 3. 批量操作示例 + +```javascript +import { useGlobalStore } from '@/store/globalStore' + +const globalStore = useGlobalStore() + +// 批量设置多个键值对 +globalStore.setMultipleValues({ + appConfig: { + theme: 'dark', + language: 'zh-CN' + }, + userPreferences: { + notifications: true, + fontSize: 16 + }, + lastUpdated: new Date().toISOString() +}) + +// 获取所有全局数据 +const allData = globalStore.getAllData() +console.log('所有全局数据:', allData) + +// 清空所有数据 +globalStore.clearAll() +``` + +## 4. 用户状态管理示例 + +```vue + + + +``` + +## 5. 注意事项 + +1. **数据持久化**：默认情况下，Pinia状态只在内存中存在，页面刷新后会丢失。如果需要持久化，可以考虑： + - 使用localStorage/sessionStorage结合Pinia插件 + - 使用Cookie存储关键信息 + +2. **性能考虑**：避免在全局状态中存储过大的数据，这可能会影响应用性能 + +3. **类型安全**：如果使用TypeScript，可以为store添加类型定义 + +4. **模块化**：随着应用复杂度增加，可以考虑将不同功能的数据分开存储到多个store中 + +5. **调试**：Pinia提供了良好的开发工具支持，可以通过Vue Devtools进行调试 \ No newline at end of file diff --git a/src/styles/MainLayout.css b/src/styles/MainLayout.css index af8b597..3b87fc6 100644 --- a/src/styles/MainLayout.css +++ b/src/styles/MainLayout.css @@ -6,7 +6,7 @@ /* 内容区圆角 */ /* 首页 hero 区域高度和间距 */ - --hero-height: 600px; + --hero-height: 768px; /* hero 默认高度 */ --hero-height-small: 150px; /* hero 收缩后高度 */ @@ -48,9 +48,9 @@ /* 分页区背景色 */ /* 导航栏样式 */ - --nav-padding: 20px 40px; + --nav-padding: 15px 35px; /* 导航栏默认内边距 */ - --nav-padding-small: 15px 40px; + --nav-padding-small: 10px 25px; /* 导航栏收缩后内边距 */ --nav-bg: rgba(145, 196, 238, 0.85); /* 导航栏背景色 */ @@ -60,7 +60,8 @@ /* 导航栏隐藏时背景 */ --nav-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* 导航栏阴影 */ - + --nav-is-active: rgba(255, 0, 255, 0.5); + /* 导航栏激活项字体颜色 */ /* 字体颜色和菜单样式 */ --font-color-title: #AF7AC5; /* 标题字体颜色 */ @@ -115,7 +116,7 @@ p { width: 100%; padding: var(--nav-padding); z-index: 1000; - transition: all 0.4s ease; + transition: all 1s ease; font-size: inherit; /* display: flex; */ justify-content: space-between; @@ -179,12 +180,21 @@ p { .el-menu-demo .el-menu-item { margin-left: 10px; font-size: inherit; + color: rgba(255, 255, 255, .95); +} +.el-menu-demo .el-menu-item.is-active{ + color: var(--nav-is-active); } - /* 菜单项悬停和激活状态 */ -.el-menu-item:hover, -.el-menu-item.is-active { +.el-menu-demo .el-menu-item:hover{ background-color: transparent; + color: rgba(255, 200, 255, 0.5); + opacity: 0.85; +} +.el-menu-demo .el-menu-item.is-active { + background-color: transparent; + color: var(--nav-is-active); + opacity: 0.85; } /* 去除菜单项悬停和激活时的背景色 */ diff --git a/src/views/aboutme.vue b/src/views/aboutme.vue index e6cee67..6673ca1 100644 --- a/src/views/aboutme.vue +++ b/src/views/aboutme.vue @@ -17,30 +17,30 @@

前端技术栈

- HTML5 - CSS3 - JavaScript - TypeScript - Vue.js - React - Node.js - Webpack - Git + HTML5 + CSS3 + JavaScript + TypeScript + Vue.js + React + Node.js + Webpack + Git

后端技术栈

- Spring Boot 2.6.13 - Spring Security - Spring Data JPA - MyBatis - MySQL - Lombok - EHCache - Maven - Java 8 + Spring Boot 2.6.13 + Spring Security + Spring Data JPA + MyBatis + MySQL + Lombok + EHCache + Maven + Java 8
@@ -139,6 +139,20 @@ const goToMessageBoard = () => { gap: 10px; } +/* 技能链接样式 */ +.skill-link { + text-decoration: none; + transition: transform 0.2s ease; +} + +.skill-link:hover { + transform: translateY(-2px); +} + +.skill-link:hover .el-tag { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +} + /* 兴趣爱好 */ .about-hobbies { margin-bottom: 32px; diff --git a/src/views/aericlelist.vue b/src/views/aericlelist.vue index a5cde9c..b0dd9be 100644 --- a/src/views/aericlelist.vue +++ b/src/views/aericlelist.vue @@ -26,9 +26,9 @@ 共 {{ categoryGroup.attributes.length }} 篇
@@ -50,7 +50,9 @@ import { ref, onMounted } from 'vue' // 以下代码仅作示例，实际需根据 '@/services' 模块的真实导出调整 import { ElMessage } from 'element-plus' import { categoryService, categoryAttributeService, articleService } from '@/services' +import { useGlobalStore } from '@/store/globalStore' +const globalStore = useGlobalStore() const router = useRouter() // 响应式状态 @@ -141,12 +143,14 @@ const getCategoryAttributes = async (processedCategories: any[]) => { * 注意：现在实际上使用的是属性ID而不是分类ID * @param {string | number} attributeId - 属性ID */ -const handleCategoryClick = (attributeId: string | number) => { +const handleCategoryClick = (attribute: any) => { + globalStore.setValue('attribute', { + id: attribute.typeid || attribute.categoryid, + name: attribute.attributename || attribute.typename || '未命名属性', + }) + console.log(attribute) router.push({ path: '/home/aericletype', - query: { - attributeId: String(attributeId) - } }) } @@ -192,7 +196,6 @@ onMounted(() => { .category-group ul li { display: flex; align-items: center; - padding: 5px 0; } .category-group ul li .btn::before { @@ -201,7 +204,6 @@ onMounted(() => { .category-group ul li .btn:hover { background-color: rgb(245, 247, 250, 0.7); - border-bottom: #4b64f0 2px solid; } .alert:not(.alert-secondary) { diff --git a/src/views/home.vue b/src/views/home.vue index baefc73..8a4018a 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -12,16 +12,15 @@

{{ item.title }}

- {{ item.author || '清疯不颠' }} - {{ formatDateDisplay(item.publishedAt || item.createTime) }} + {{ item.categoryName }} - {{ item.views }} 阅读 - {{ item.commentCount }} 评论 + {{ item.views }} 阅读 +
mg

{{ formatContentPreview(item.content, 150) }}

@@ -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('获取文章列表失败，请稍后重试')