@@ -124,15 +124,16 @@ onUnmounted(() => {
.cont1 {
text-align: center;
padding: 25px;
+ background-color: rgba(102, 161, 216, 0.9); /* 蓝色半透明背景 */
+ border-radius: 10px 10px 0 0;
}
-.cont1 h2 {
- color: #333;
+.cont1 h3 {
margin-bottom: 10px;
}
.cont1 p {
- color: #666;
+ color: white;
font-size: 14px;
}
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index ff5bfd7..1c5ecfb 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -129,6 +129,7 @@ const startTypewriter = () => {
* 菜单选择跳转
*/
const handleSelect = (key: string) => {
+ globalStore.clearAll()
router.push({ path: '/' + key });
};
diff --git a/src/main.js b/src/main.js
index 7350cf6..f114293 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,15 +2,28 @@ 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 UndrawUi from 'undraw-ui'
+import 'undraw-ui/dist/style.css'
+
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import './styles/MainLayout.css'
// 创建Pinia实例
const pinia = createPinia()
const app = createApp(App)
+app.use(UndrawUi)
app.use(Router)
app.use(ElementPlus)
app.use(pinia) // 添加Pinia支持
+
+// 注册所有Element Plus图标
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+ app.component(key, component)
+}
+
app.mount('#app')
\ No newline at end of file
diff --git a/src/router/Router.js b/src/router/Router.js
index 64af3de..be78935 100644
--- a/src/router/Router.js
+++ b/src/router/Router.js
@@ -6,7 +6,6 @@ import NonsensePage from '../views/nonsense.vue'
import MessageBoardPage from '../views/messageboard.vue'
import AboutMePage from '../views/aboutme.vue'
import ArticleContentPage from '../views/articlecontents.vue'
-import CommentDemoPage from '../views/commentDemo.vue'
/**
* 路由配置数组
@@ -17,14 +16,6 @@ const routes = [
path: '/',
redirect: '/home' // 默认跳转到首页，显示所有文章
},
- {
- path: '/comment-demo',
- name: 'commentDemo',
- component: CommentDemoPage,
- meta: {
- title: '嵌套留言Demo'
- }
- },
{
path: '/home',
name: 'home',
@@ -41,30 +32,6 @@ const routes = [
}
]
},
- // {
- // path: '/home',
- // name: 'home',
- // component: HomePage,
- // meta: {
- // title: '首页'
- // }
- // },
- // {
- // path: '/home/aericletype/:type',
- // name: 'homeByType',
- // component: HomePage,
- // meta: {
- // title: '首页'
- // }
- // },
- // {
- // path: '/home/aericletitle/:title',
- // name: 'homeByTitle',
- // component: HomePage,
- // meta: {
- // title: '首页'
- // }
- // },
{
path: '/article-list',
name: 'articleList',
diff --git a/src/services/articleService.js b/src/services/articleService.js
index 976d83a..be92e9a 100644
--- a/src/services/articleService.js
+++ b/src/services/articleService.js
@@ -84,7 +84,7 @@ class ArticleService {
* @returns {Promise}
*/
incrementArticleViews(id) {
- return apiService.post(`/articles/${id}/views`)
+ return apiService.post(`/articles/view/${id}`)
}
/**
diff --git a/src/store/globalStore.js b/src/store/globalStore.js
index 4674610..d6ce485 100644
--- a/src/store/globalStore.js
+++ b/src/store/globalStore.js
@@ -4,17 +4,24 @@ import { defineStore } from 'pinia'
* 全局状态管理store
* 提供全局的传值和获取值的功能
* 任何页面都可以调用和获取其中的值
+ * 添加了localStorage持久化功能，确保刷新页面后数据不会丢失
*/
export const useGlobalStore = defineStore('global', {
// 状态定义
- state: () => ({
- // 全局数据对象，存储所有需要共享的数据
- globalData: {},
- // 可以在这里定义特定的状态属性，便于类型提示和直接使用
- user: null,
- loading: false,
- notifications: []
- }),
+ state: () => {
+ // 从localStorage读取持久化的数据
+ const savedGlobalData = localStorage.getItem('globalStoreData')
+ const initialGlobalData = savedGlobalData ? JSON.parse(savedGlobalData) : {}
+
+ return {
+ // 全局数据对象，存储所有需要共享的数据
+ globalData: initialGlobalData,
+ // 可以在这里定义特定的状态属性，便于类型提示和直接使用
+ user: null,
+ loading: false,
+ notifications: []
+ }
+ },
// 计算属性 - 用于获取和转换状态
getters: {
@@ -54,6 +61,20 @@ export const useGlobalStore = defineStore('global', {
*/
setValue(key, value) {
this.globalData[key] = value
+ // 持久化到localStorage
+ this._persistData()
+ },
+
+ /**
+ * 将数据持久化到localStorage的内部方法
+ * @private
+ */
+ _persistData() {
+ try {
+ localStorage.setItem('globalStoreData', JSON.stringify(this.globalData))
+ } catch (error) {
+ console.error('Failed to persist data to localStorage:', error)
+ }
},
/**
@@ -63,6 +84,8 @@ export const useGlobalStore = defineStore('global', {
setMultipleValues(data) {
if (typeof data === 'object' && data !== null) {
Object.assign(this.globalData, data)
+ // 持久化到localStorage
+ this._persistData()
}
},
@@ -73,6 +96,8 @@ export const useGlobalStore = defineStore('global', {
removeValue(key) {
if (Object.prototype.hasOwnProperty.call(this.globalData, key)) {
delete this.globalData[key]
+ // 持久化到localStorage
+ this._persistData()
}
},
@@ -81,6 +106,12 @@ export const useGlobalStore = defineStore('global', {
*/
clearAll() {
this.globalData = {}
+ // 清除localStorage中的数据
+ try {
+ localStorage.removeItem('globalStoreData')
+ } catch (error) {
+ console.error('Failed to clear data from localStorage:', error)
+ }
},
/**
diff --git a/src/styles/MainLayout.css b/src/styles/MainLayout.css
index 3b87fc6..2025993 100644
--- a/src/styles/MainLayout.css
+++ b/src/styles/MainLayout.css
@@ -389,6 +389,7 @@ p {
.RouterViewpage {
width: 100%;
+ margin-top: 11%;
}
.nonsensetitle {
diff --git a/src/types/index.ts b/src/types/index.ts
index 7971516..db51f39 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -13,7 +13,7 @@ export interface Article {
categoryId: number
categoryName?: string
tags?: string
- views?: number
+ viewCount?: number
commentCount?: number
articleid?: string
publishedAt?: string
@@ -31,7 +31,7 @@ export interface Message {
articleId?: number
parentId?: number
createdAt: string
- replies?: Message[]
+ replyid?: number
time?: string
}
diff --git a/src/views/aboutme.vue b/src/views/aboutme.vue
index 6673ca1..8ac9d24 100644
--- a/src/views/aboutme.vue
+++ b/src/views/aboutme.vue
@@ -19,12 +19,16 @@
diff --git a/src/views/articlecontents.vue b/src/views/articlecontents.vue
index b8209b1..306c61f 100644
--- a/src/views/articlecontents.vue
+++ b/src/views/articlecontents.vue
@@ -5,19 +5,19 @@