refactor(views): 重构多个视图组件代码和样式
重构了多个视图组件的代码结构和样式，包括： 1. 重命名变量和类名以提高可读性 2. 优化CSS样式结构和响应式设计 3. 添加过渡动画和悬停效果 4. 统一组件命名规范 5. 改进表单验证和交互体验 6. 增强代码注释和文档 feat(types): 修改Article接口定义 更新Article接口字段，将categoryId改为attributeid，并将categoryName和tags改为数组类型 fix(services): 修改文章服务接口 更新getAllArticles方法，改为获取已发布文章 style(layouts): 调整主布局样式 修改导航栏背景透明度和布局间距 chore(assets): 更新背景图片 替换旧的背景图片文件
This commit is contained in:
qingfeng1121
@@ -215,9 +215,9 @@ onUnmounted(() => {
|
||||
background-color: rgba(255, 255, 255, 0.9); /* 白色半透明背景 */
|
||||
padding: 15px;
|
||||
}
|
||||
.demo-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav-scroll{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
.el-tabs__nav-scroll .el-tabs__nav .el-tabs__item{
|
||||
margin-left: 100px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
/* 头像样式 */
|
||||
.mylogo {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 MiB |
BIN
src/img/bg.jpg
Normal file
BIN
src/img/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 MiB |
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="elrow-top" :class="elrowtop">
|
||||
<el-row justify="center">
|
||||
<el-col :span="4" v-if="windowwidth">
|
||||
<el-col :span="6" v-if="windowwidth">
|
||||
<div class="grid-content ep-bg-purple-dark">
|
||||
<div class="logo-text">清疯不颠</div>
|
||||
</div>
|
||||
|
||||
@@ -6,12 +6,12 @@ import apiService from './apiService'
|
||||
*/
|
||||
class ArticleService {
|
||||
/**
|
||||
* 获取所有文章
|
||||
* 获取已发布文章
|
||||
* @param {Object} params - 查询参数
|
||||
* @returns {Promise}
|
||||
*/
|
||||
getAllArticles(params = {}) {
|
||||
return apiService.get('/articles', { params })
|
||||
return apiService.get('/articles/published', { params })
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
/* 导航栏默认内边距 */
|
||||
--nav-padding-small: 10px 25px;
|
||||
/* 导航栏收缩后内边距 */
|
||||
--nav-bg: rgba(145, 196, 238, 0.85);
|
||||
--nav-bg: rgba(145, 196, 238, 0.95);
|
||||
/* 导航栏背景色 */
|
||||
--nav-bg-transparent: transparent;
|
||||
/* 导航栏透明背景 */
|
||||
@@ -60,7 +60,7 @@
|
||||
/* 导航栏隐藏时背景 */
|
||||
--nav-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
||||
/* 导航栏阴影 */
|
||||
--nav-is-active: rgba(255, 0, 255, 0.5);
|
||||
--nav-is-active: rgba(255, 0, 255, 0.75);
|
||||
/* 导航栏激活项字体颜色 */
|
||||
/* 字体颜色和菜单样式 */
|
||||
--font-color-title: #AF7AC5;
|
||||
@@ -69,7 +69,7 @@
|
||||
/* 菜单字体大小 */
|
||||
--font-weight-menu: bold;
|
||||
/* 菜单字体加粗 */
|
||||
--body-background-img: url('../img/8.21.1.jpg');
|
||||
--body-background-img: url('../img/bg.jpg');
|
||||
/* 页面背景图片 */
|
||||
}
|
||||
|
||||
@@ -173,7 +173,7 @@ p {
|
||||
background: transparent;
|
||||
font-weight: var(--font-weight-menu);
|
||||
font-size: var(--font-size-menu);
|
||||
left: 18%;
|
||||
/* left: 18%; */
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,9 +10,10 @@ export interface Article {
|
||||
author: string
|
||||
createTime: string
|
||||
updateTime: string
|
||||
categoryId: number
|
||||
categoryName?: string
|
||||
tags?: string
|
||||
// categoryId: number
|
||||
attributeid?: number
|
||||
categoryName?: string[]
|
||||
tags?: string[]
|
||||
viewCount?: number
|
||||
commentCount?: number
|
||||
articleid?: string
|
||||
|
||||
@@ -1,70 +1,70 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="about-wrapper">
|
||||
<div class="about-page-container">
|
||||
<div class="about-content-wrapper">
|
||||
<!-- 页面头部 -->
|
||||
<div class="about-header">
|
||||
<h1 class="about-title">关于我</h1>
|
||||
<div class="about-subtitle">一个热爱技术的全栈开发者</div>
|
||||
<div class="about-page-header">
|
||||
<h1 class="about-page-title">关于我</h1>
|
||||
<div class="about-page-subtitle">一个热爱技术的全栈开发者</div>
|
||||
</div>
|
||||
|
||||
<!-- 关于内容 -->
|
||||
<div class="about-content">
|
||||
<div class="about-intro">
|
||||
<div class="about-main-content">
|
||||
<div class="about-personal-intro">
|
||||
<p>你好！欢迎来到我的个人博客。我是一名热爱技术的全栈开发者，热衷于探索新技术和解决复杂问题。</p>
|
||||
<p>这个博客是我分享技术见解、学习心得和生活感悟的地方。希望通过这个平台，能够与更多志同道合的朋友交流和学习。</p>
|
||||
</div>
|
||||
|
||||
<div class="about-skills">
|
||||
<div class="about-skill-section">
|
||||
<h3>前端技术栈</h3>
|
||||
<div class="skills-list">
|
||||
<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank" class="skill-link"><el-tag type="primary">HTML5</el-tag></a>
|
||||
<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS" target="_blank" class="skill-link"><el-tag type="primary">CSS3</el-tag></a>
|
||||
<a href="https://tailwindcss.com/" target="_blank" class="skill-link"><el-tag type="primary">Tailwind CSS</el-tag></a>
|
||||
<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript" target="_blank" class="skill-link"><el-tag type="primary">JavaScript (ES6+)</el-tag></a>
|
||||
<a href="https://www.typescriptlang.org/" target="_blank" class="skill-link"><el-tag type="primary">TypeScript</el-tag></a>
|
||||
<a href="https://vuejs.org/" target="_blank" class="skill-link"><el-tag type="primary">Vue.js 3</el-tag></a>
|
||||
<a href="https://pinia.vuejs.org/" target="_blank" class="skill-link"><el-tag type="primary">Pinia</el-tag></a>
|
||||
<a href="https://react.dev/" target="_blank" class="skill-link"><el-tag type="primary">React 18</el-tag></a>
|
||||
<a href="https://nodejs.org/" target="_blank" class="skill-link"><el-tag type="primary">Node.js</el-tag></a>
|
||||
<a href="https://vite.dev/" target="_blank" class="skill-link"><el-tag type="primary">Vite</el-tag></a>
|
||||
<a href="https://webpack.js.org/" target="_blank" class="skill-link"><el-tag type="primary">Webpack</el-tag></a>
|
||||
<a href="https://element-plus.org/" target="_blank" class="skill-link"><el-tag type="primary">Element Plus</el-tag></a>
|
||||
<a href="https://git-scm.com/" target="_blank" class="skill-link"><el-tag type="primary">Git</el-tag></a>
|
||||
<div class="skills-display-list">
|
||||
<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank" class="skill-tag-link"><el-tag type="primary">HTML5</el-tag></a>
|
||||
<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS" target="_blank" class="skill-tag-link"><el-tag type="primary">CSS3</el-tag></a>
|
||||
<a href="https://tailwindcss.com/" target="_blank" class="skill-tag-link"><el-tag type="primary">Tailwind CSS</el-tag></a>
|
||||
<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript" target="_blank" class="skill-tag-link"><el-tag type="primary">JavaScript (ES6+)</el-tag></a>
|
||||
<a href="https://www.typescriptlang.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">TypeScript</el-tag></a>
|
||||
<a href="https://vuejs.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Vue.js 3</el-tag></a>
|
||||
<a href="https://pinia.vuejs.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Pinia</el-tag></a>
|
||||
<a href="https://react.dev/" target="_blank" class="skill-tag-link"><el-tag type="primary">React 18</el-tag></a>
|
||||
<a href="https://nodejs.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Node.js</el-tag></a>
|
||||
<a href="https://vite.dev/" target="_blank" class="skill-tag-link"><el-tag type="primary">Vite</el-tag></a>
|
||||
<a href="https://webpack.js.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Webpack</el-tag></a>
|
||||
<a href="https://element-plus.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Element Plus</el-tag></a>
|
||||
<a href="https://git-scm.com/" target="_blank" class="skill-tag-link"><el-tag type="primary">Git</el-tag></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-skills">
|
||||
<div class="about-skill-section">
|
||||
<h3>后端技术栈</h3>
|
||||
<div class="skills-list">
|
||||
<a href="https://spring.io/projects/spring-boot" target="_blank" class="skill-link"><el-tag type="success">Spring Boot 3.x</el-tag></a>
|
||||
<a href="https://spring.io/projects/spring-security" target="_blank" class="skill-link"><el-tag type="success">Spring Security</el-tag></a>
|
||||
<a href="https://spring.io/projects/spring-data-jpa" target="_blank" class="skill-link"><el-tag type="success">Spring Data JPA</el-tag></a>
|
||||
<a href="https://mybatis.org/mybatis-3/" target="_blank" class="skill-link"><el-tag type="success">MyBatis-Plus</el-tag></a>
|
||||
<a href="https://www.mysql.com/" target="_blank" class="skill-link"><el-tag type="success">MySQL 8</el-tag></a>
|
||||
<a href="https://www.postgresql.org/" target="_blank" class="skill-link"><el-tag type="success">PostgreSQL</el-tag></a>
|
||||
<a href="https://redis.io/" target="_blank" class="skill-link"><el-tag type="success">Redis</el-tag></a>
|
||||
<a href="https://projectlombok.org/" target="_blank" class="skill-link"><el-tag type="success">Lombok</el-tag></a>
|
||||
<a href="https://mapstruct.org/" target="_blank" class="skill-link"><el-tag type="success">MapStruct</el-tag></a>
|
||||
<a href="https://maven.apache.org/" target="_blank" class="skill-link"><el-tag type="success">Maven</el-tag></a>
|
||||
<a href="https://gradle.org/" target="_blank" class="skill-link"><el-tag type="success">Gradle</el-tag></a>
|
||||
<a href="https://www.oracle.com/java/technologies/java17.html" target="_blank" class="skill-link"><el-tag type="success">Java 17+</el-tag></a>
|
||||
<div class="skills-display-list">
|
||||
<a href="https://spring.io/projects/spring-boot" target="_blank" class="skill-tag-link"><el-tag type="success">Spring Boot 3.x</el-tag></a>
|
||||
<a href="https://spring.io/projects/spring-security" target="_blank" class="skill-tag-link"><el-tag type="success">Spring Security</el-tag></a>
|
||||
<a href="https://spring.io/projects/spring-data-jpa" target="_blank" class="skill-tag-link"><el-tag type="success">Spring Data JPA</el-tag></a>
|
||||
<a href="https://mybatis.org/mybatis-3/" target="_blank" class="skill-tag-link"><el-tag type="success">MyBatis-Plus</el-tag></a>
|
||||
<a href="https://www.mysql.com/" target="_blank" class="skill-tag-link"><el-tag type="success">MySQL 8</el-tag></a>
|
||||
<a href="https://www.postgresql.org/" target="_blank" class="skill-tag-link"><el-tag type="success">PostgreSQL</el-tag></a>
|
||||
<a href="https://redis.io/" target="_blank" class="skill-tag-link"><el-tag type="success">Redis</el-tag></a>
|
||||
<a href="https://projectlombok.org/" target="_blank" class="skill-tag-link"><el-tag type="success">Lombok</el-tag></a>
|
||||
<a href="https://mapstruct.org/" target="_blank" class="skill-tag-link"><el-tag type="success">MapStruct</el-tag></a>
|
||||
<a href="https://maven.apache.org/" target="_blank" class="skill-tag-link"><el-tag type="success">Maven</el-tag></a>
|
||||
<a href="https://gradle.org/" target="_blank" class="skill-tag-link"><el-tag type="success">Gradle</el-tag></a>
|
||||
<a href="https://www.oracle.com/java/technologies/java17.html" target="_blank" class="skill-tag-link"><el-tag type="success">Java 17+</el-tag></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-hobbies">
|
||||
<div class="about-hobbies-section">
|
||||
<h3>兴趣爱好</h3>
|
||||
<ul>
|
||||
<ul class="hobbies-list">
|
||||
<li>阅读技术书籍和博客</li>
|
||||
<li>参与开源项目</li>
|
||||
<li>学习新技术和框架</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="about-contact">
|
||||
<div class="about-contact-section">
|
||||
<h3>联系方式</h3>
|
||||
<p>如果你有任何问题或建议，欢迎随时联系我！</p>
|
||||
<div class="contact-list">
|
||||
<el-button type="primary" plain>留言板</el-button>
|
||||
<div class="contact-options">
|
||||
<el-button type="primary" plain @click="goToMessageBoard">留言板</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -76,159 +76,211 @@
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
|
||||
// 跳转到留言板
|
||||
/**
|
||||
* 跳转到留言板页面
|
||||
* 当用户点击留言板按钮时触发
|
||||
*/
|
||||
const goToMessageBoard = () => {
|
||||
router.push('/message')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 主容器样式 */
|
||||
.about-page-container {
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.about-wrapper {
|
||||
/* 内容包装器样式 */
|
||||
.about-content-wrapper {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.about-header {
|
||||
/* 内容包装器悬浮效果 */
|
||||
.about-content-wrapper:hover {
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* 页面头部样式 */
|
||||
.about-page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 2px solid #ecf0f1;
|
||||
}
|
||||
|
||||
.about-title {
|
||||
/* 页面标题样式 */
|
||||
.about-page-title {
|
||||
font-size: 2.2rem;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.about-subtitle {
|
||||
/* 页面副标题样式 */
|
||||
.about-page-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
/* 关于内容 */
|
||||
.about-content {
|
||||
/* 主要内容区域样式 */
|
||||
.about-main-content {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.8;
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
/* 个人介绍 */
|
||||
.about-intro {
|
||||
/* 个人介绍样式 */
|
||||
.about-personal-intro {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.about-intro p {
|
||||
.about-personal-intro p {
|
||||
margin-bottom: 16px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* 技术栈 */
|
||||
.about-skills {
|
||||
/* 技能部分样式 */
|
||||
.about-skill-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.about-skills h3 {
|
||||
.about-skill-section h3 {
|
||||
color: #2c3e50;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.skills-list {
|
||||
/* 技能列表样式 */
|
||||
.skills-display-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 技能链接样式 */
|
||||
.skill-link {
|
||||
/* 技能标签链接样式 */
|
||||
.skill-tag-link {
|
||||
text-decoration: none;
|
||||
transition: transform 0.2s ease;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.skill-link:hover {
|
||||
/* 技能标签链接悬浮效果 */
|
||||
.skill-tag-link:hover {
|
||||
transform: translateY(-2px);
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.skill-link:hover .el-tag {
|
||||
.skill-tag-link:hover .el-tag {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* 兴趣爱好 */
|
||||
.about-hobbies {
|
||||
/* 兴趣爱好部分样式 */
|
||||
.about-hobbies-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.about-hobbies h3 {
|
||||
.about-hobbies-section h3 {
|
||||
color: #2c3e50;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.about-hobbies ul {
|
||||
/* 兴趣爱好列表样式 */
|
||||
.hobbies-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.about-hobbies li {
|
||||
.hobbies-list li {
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
margin-bottom: 12px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.about-hobbies li::before {
|
||||
.hobbies-list li:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.hobbies-list li::before {
|
||||
content: '✦';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #3498db;
|
||||
font-size: 1.2rem;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
/* 联系方式 */
|
||||
.about-contact {
|
||||
.hobbies-list li:hover::before {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* 联系方式部分样式 */
|
||||
.about-contact-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.about-contact h3 {
|
||||
.about-contact-section h3 {
|
||||
color: #2c3e50;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.about-contact p {
|
||||
.about-contact-section p {
|
||||
margin-bottom: 16px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* 联系方式选项样式 */
|
||||
.contact-options {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
#about-container {
|
||||
.about-page-container {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.about-wrapper {
|
||||
|
||||
.about-content-wrapper {
|
||||
padding: 20px;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.about-title {
|
||||
.about-page-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.about-subtitle {
|
||||
.about-page-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
.about-main-content {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.about-header {
|
||||
.about-page-header {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.contact-options {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.skills-display-list {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,32 +1,32 @@
|
||||
<template>
|
||||
<div id="allstyle">
|
||||
<div class="header">
|
||||
<div class="page-header">
|
||||
<h3>文章目录</h3>
|
||||
</div>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading-container">
|
||||
<div v-if="loading" class="loading-state-container">
|
||||
<el-skeleton :count="5" />
|
||||
</div>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<div v-else-if="error" class="error-container">
|
||||
<div v-else-if="error" class="error-state-container">
|
||||
<el-alert :title="error" type="error" show-icon />
|
||||
<el-button type="primary" @click="fetchCategories">重新加载</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 分类列表 -->
|
||||
<div v-else-if="categories.length > 0" class="post_content" id="category-list">
|
||||
<div v-else-if="categories.length > 0" class="article-content" id="category-list">
|
||||
<p><strong></strong></p>
|
||||
<div class="alert alert-primary"><strong><span class="alert-inner--text">文章分类如下，点击跳转</span></strong></div>
|
||||
<div class="alert alert-primary"><strong><span class="alert-inner-text">文章分类如下，点击跳转</span></strong></div>
|
||||
<div v-for="categoryGroup in categories" :key="categoryGroup.typeid"
|
||||
class="category-group">
|
||||
class="category-group-container">
|
||||
<div v-if="categoryGroup.attributes.length > 0">
|
||||
<h2 id="header-id-1">{{ categoryGroup.typename }}</h2>
|
||||
<span class="badge badge-primary">共 {{ categoryGroup.attributes.length }} 篇</span>
|
||||
<ul class="wp-block-list">
|
||||
<ul class="category-item-list">
|
||||
<li v-for="category in categoryGroup.attributes" :key="category.typeid">
|
||||
<a class="btn" @click="handleCategoryClick(category)"><kbd>{{ category.attributename
|
||||
<a class="category-link" @click="handleCategoryClick(category)"><kbd>{{ category.attributename
|
||||
}}</kbd></a>
|
||||
— —({{ category.articles.length }})
|
||||
</li>
|
||||
@@ -37,7 +37,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else class="empty-container">
|
||||
<div v-else class="empty-state-container">
|
||||
<el-empty description="暂无分类" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -178,34 +178,39 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
/* 页面标题样式 */
|
||||
.page-header {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
.page-header h1 {
|
||||
color: #2c3e50;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.post_content {
|
||||
/* 文章内容区域 */
|
||||
.article-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.category-group ul li {
|
||||
/* 分类组样式 */
|
||||
.category-group-container ul li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.category-group ul li .btn::before {
|
||||
/* 分类链接样式 */
|
||||
.category-group-container ul li .category-link::before {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.category-group ul li .btn:hover {
|
||||
.category-group-container ul li .category-link:hover {
|
||||
background-color: rgb(245, 247, 250, 0.7);
|
||||
}
|
||||
|
||||
/* 提示框样式 */
|
||||
.alert:not(.alert-secondary) {
|
||||
color: #fff;
|
||||
}
|
||||
@@ -223,7 +228,12 @@ onMounted(() => {
|
||||
background-color: #7889e8;
|
||||
}
|
||||
|
||||
.btn kbd {
|
||||
.alert-inner-text {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 键盘样式 */
|
||||
.category-link kbd {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
padding: 4px 8px;
|
||||
@@ -239,14 +249,15 @@ onMounted(() => {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
|
||||
.category-group {
|
||||
/* 分类组容器样式 */
|
||||
.category-group-container {
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* 徽章样式 */
|
||||
.badge {
|
||||
padding: .25em .4em;
|
||||
font-size: 75%;
|
||||
@@ -259,6 +270,7 @@ onMounted(() => {
|
||||
margin: 10px 6px;
|
||||
}
|
||||
|
||||
/* 分类标题样式 */
|
||||
.category-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -274,7 +286,8 @@ onMounted(() => {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pcont_ul {
|
||||
/* 项目列表样式 */
|
||||
.project-content-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
@@ -283,7 +296,7 @@ onMounted(() => {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.pcont_li {
|
||||
.project-content-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
@@ -293,12 +306,13 @@ onMounted(() => {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pcont_li:hover {
|
||||
.project-content-item:hover {
|
||||
transform: translateY(-2px);
|
||||
background-color: rgba(236, 240, 241, 0.9);
|
||||
}
|
||||
|
||||
.btn {
|
||||
/* 分类链接样式 */
|
||||
.category-link {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: #34495e;
|
||||
@@ -315,7 +329,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
/* 透明方块效果 */
|
||||
.btn::before {
|
||||
.category-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -331,12 +345,13 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
/* 悬浮效果 */
|
||||
.btn:hover::before {
|
||||
.category-link:hover::before {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
background: rgba(145, 196, 238, 0.85);
|
||||
}
|
||||
|
||||
/* 分类计数样式 */
|
||||
.category-count {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9rem;
|
||||
@@ -366,42 +381,42 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-container {
|
||||
.loading-state-container {
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 错误状态 */
|
||||
.error-container {
|
||||
.error-state-container {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.error-container .el-button {
|
||||
.error-state-container .el-button {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-container {
|
||||
.empty-state-container {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header {
|
||||
.page-header {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
.page-header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.post_content {
|
||||
.article-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.category-group {
|
||||
.category-group-container {
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@@ -412,7 +427,7 @@ onMounted(() => {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pcont_ul {
|
||||
.project-content-list {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="article-detail-page">
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading-container">
|
||||
<el-skeleton :count="1" />
|
||||
<el-skeleton :count="3" />
|
||||
<div v-if="loading" class="loading-state-container">
|
||||
<el-skeleton :count="1" />
|
||||
<el-skeleton :count="3" />
|
||||
</div>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<div v-else-if="error" class="error-container">
|
||||
<el-alert :title="error" type="error" show-icon />
|
||||
<div v-else-if="error" class="error-state-container">
|
||||
<el-alert :title="error" type="error" show-icon />
|
||||
<el-button type="primary" @click="fetchArticleDetail">重新加载</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 文章详情 -->
|
||||
<div v-else-if="article && Object.keys(article).length > 0" class="article-wrapper">
|
||||
<!-- 文章头部 -->
|
||||
<div class="article-header">
|
||||
<h1 class="article-title">{{ article.title }}</h1>
|
||||
<div v-else-if="article && Object.keys(article).length > 0" class="article-detail-wrapper">
|
||||
<!-- 文章头部信息 -->
|
||||
<div class="article-header-section">
|
||||
<h1 class="article-main-title">{{ article.title }}</h1>
|
||||
|
||||
<div class="article-meta">
|
||||
<div class="article-meta-info">
|
||||
<span class="meta-item">
|
||||
<i class="el-icon-date"></i>
|
||||
{{ formatDate(article.createTime) }}
|
||||
@@ -34,31 +34,32 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文章内容 -->
|
||||
<div class="article-content">
|
||||
<!-- 文章内容区域 -->
|
||||
<div class="article-content-area">
|
||||
<div v-html="article.content"></div>
|
||||
</div>
|
||||
|
||||
<!-- 文章底部 -->
|
||||
<div class="article-footer">
|
||||
<div class="tag-list">
|
||||
<!-- 文章底部信息 -->
|
||||
<div class="article-footer-section">
|
||||
<div class="article-tag-list">
|
||||
<span v-for="tag in article.tags || []" :key="tag" class="el-tag el-tag--primary">
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 文章操作 -->
|
||||
<div class="article-actions">
|
||||
<!-- 文章操作按钮 -->
|
||||
<div class="article-actions-group">
|
||||
<el-button type="primary" @click="goBack" plain>
|
||||
返回
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 相关文章 -->
|
||||
<div class="related-articles" v-if="relatedArticles.length > 0">
|
||||
|
||||
<!-- 相关文章推荐 -->
|
||||
<div class="related-articles-section" v-if="relatedArticles.length > 0">
|
||||
<h3>相关文章</h3>
|
||||
<div class="related-articles-list">
|
||||
<div v-for="item in relatedArticles" :key="item.id" class="related-article-item"
|
||||
<div v-for="item in relatedArticles" :key="item.id" class="related-article-card"
|
||||
@click="handleRelatedArticleClick(item.id)">
|
||||
<i class="el-icon-document"></i>
|
||||
<span>{{ item.title }}</span>
|
||||
@@ -67,41 +68,43 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else class="empty-container">
|
||||
<!-- 空状态 - 文章不存在 -->
|
||||
<div v-else class="empty-state-container">
|
||||
<el-empty description="文章不存在" />
|
||||
</div>
|
||||
|
||||
<!-- 评论区 -->
|
||||
<!-- 评论区组件 -->
|
||||
<div>
|
||||
<messageboard class="message-board" v-if="article && Object.keys(article).length > 0" />
|
||||
<messageboard class="comment-section" v-if="article && Object.keys(article).length > 0" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 导入必要的依赖
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { articleService } from '@/services'
|
||||
import { messageService } from '@/services'
|
||||
import {categoryAttributeService} from '@/services'
|
||||
import { categoryAttributeService } from '@/services'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { Article } from '@/types'
|
||||
import { formatDate } from '@/utils/dateUtils'
|
||||
import messageboard from './messageboard.vue'
|
||||
|
||||
// 路由相关
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// 响应式状态
|
||||
// 响应式状态管理
|
||||
const article = ref<Article | null>(null) // 使用 null 作为初始值，避免类型不匹配问题
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const relatedArticles = ref<Article[]>([])
|
||||
|
||||
/**
|
||||
* 获取文章详情
|
||||
* 获取文章详情数据
|
||||
*/
|
||||
const fetchArticleDetail = async () => {
|
||||
try {
|
||||
@@ -116,11 +119,15 @@ const fetchArticleDetail = async () => {
|
||||
}
|
||||
|
||||
// 获取文章详情
|
||||
const res = await articleService.getArticleById(Number(articleId))
|
||||
const response = await articleService.getArticleById(Number(articleId))
|
||||
|
||||
if (res.data) {
|
||||
article.value = res.data
|
||||
article.value.categoryName = await categoryAttributeService.getAttributeById(article.value.categoryId)|| '未分类'
|
||||
if (response.data) {
|
||||
article.value = response.data
|
||||
|
||||
// 获取并设置分类名称
|
||||
const categoryResponse = await categoryAttributeService.getAttributeById(article.value.attributeid)
|
||||
article.value.categoryName = categoryResponse.data.attributename || '未分类'
|
||||
|
||||
// 增加文章浏览量
|
||||
try {
|
||||
await articleService.incrementArticleViews(Number(articleId))
|
||||
@@ -137,29 +144,18 @@ const fetchArticleDetail = async () => {
|
||||
}
|
||||
|
||||
// 获取相关文章（同属性下的其他文章）
|
||||
if (article.value.categoryId) {
|
||||
if (article.value.attributeid) {
|
||||
try {
|
||||
const relatedRes = await articleService.getArticlesByCategory(article.value.categoryId)
|
||||
const relatedResponse = await articleService.getArticlesByCategory(article.value.attributeid)
|
||||
// 过滤掉当前文章，并取前5篇作为相关文章
|
||||
relatedArticles.value = relatedRes.data
|
||||
? relatedRes.data.filter((item: Article) => item.id !== article.value?.id).slice(0, 5)
|
||||
relatedArticles.value = relatedResponse.data
|
||||
? relatedResponse.data.filter((item: Article) => item.id !== article.value?.id).slice(0, 5)
|
||||
: []
|
||||
} catch (err) {
|
||||
console.error('获取相关文章失败:', err)
|
||||
// 不阻止主流程
|
||||
}
|
||||
}
|
||||
// 兼容旧的categoryId
|
||||
else if (article.value.categoryId) {
|
||||
try {
|
||||
const relatedRes = await articleService.getArticlesByCategory(article.value.categoryId)
|
||||
relatedArticles.value = relatedRes.data
|
||||
? relatedRes.data.filter((item: Article) => item.id !== article.value?.id).slice(0, 5)
|
||||
: []
|
||||
} catch (err) {
|
||||
console.error('获取相关文章失败:', err)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
throw new Error('文章不存在或已被删除')
|
||||
}
|
||||
@@ -183,7 +179,8 @@ const goBack = () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理相关文章点击
|
||||
* 处理相关文章点击事件
|
||||
* @param {number} id - 相关文章ID
|
||||
*/
|
||||
const handleRelatedArticleClick = (id: number) => {
|
||||
router.push({
|
||||
@@ -201,29 +198,69 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#article-container {
|
||||
/* 页面主容器 */
|
||||
#article-detail-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.article-wrapper {
|
||||
/* 文章详情容器 */
|
||||
.article-detail-wrapper {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 文章头部 */
|
||||
.article-header {
|
||||
/* 加载状态容器 */
|
||||
.loading-state-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 错误状态容器 */
|
||||
.error-state-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 40px;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.error-state-container .el-button {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* 空状态容器 */
|
||||
.empty-state-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 40px;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 文章头部区域 */
|
||||
.article-header-section {
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 2px solid #ecf0f1;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
/* 文章标题 */
|
||||
.article-main-title {
|
||||
font-size: 2rem;
|
||||
color: #2c3e50;
|
||||
line-height: 1.4;
|
||||
@@ -231,7 +268,8 @@ onMounted(() => {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
/* 文章元信息 */
|
||||
.article-meta-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
@@ -239,90 +277,109 @@ onMounted(() => {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* 元信息项 */
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 文章内容 */
|
||||
.article-content {
|
||||
font-size: 1.1rem;
|
||||
/* 文章内容区域 */
|
||||
.article-content-area {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.8;
|
||||
color: #333;
|
||||
color: #34495e;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.article-content p {
|
||||
/* 文章内容中的段落 */
|
||||
.article-content-area p {
|
||||
margin-bottom: 16px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.article-content h2 {
|
||||
font-size: 1.6rem;
|
||||
/* 文章内容中的二级标题 */
|
||||
.article-content-area h2 {
|
||||
color: #2c3e50;
|
||||
font-size: 1.5rem;
|
||||
margin: 32px 0 16px 0;
|
||||
color: #2c3e50;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #ecf0f1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-content h3 {
|
||||
font-size: 1.4rem;
|
||||
margin: 24px 0 16px 0;
|
||||
color: #2c3e50;
|
||||
/* 文章内容中的三级标题 */
|
||||
.article-content-area h3 {
|
||||
color: #34495e;
|
||||
font-size: 1.3rem;
|
||||
margin: 24px 0 12px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-content img {
|
||||
/* 文章内容中的图片 */
|
||||
.article-content-area img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
margin: 16px 0;
|
||||
margin: 20px auto;
|
||||
display: block;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.article-content blockquote {
|
||||
/* 文章内容中的引用 */
|
||||
.article-content-area blockquote {
|
||||
border-left: 4px solid #3498db;
|
||||
padding-left: 16px;
|
||||
color: #7f8c8d;
|
||||
margin: 16px 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* 文章底部 */
|
||||
.article-footer {
|
||||
/* 文章底部区域 */
|
||||
.article-footer-section {
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #ecf0f1;
|
||||
border-top: 2px solid #ecf0f1;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
/* 标签列表 */
|
||||
.article-tag-list {
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.article-actions {
|
||||
/* 文章操作按钮组 */
|
||||
.article-actions-group {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* 相关文章 */
|
||||
.related-articles {
|
||||
/* 相关文章区域 */
|
||||
.related-articles-section {
|
||||
padding-top: 32px;
|
||||
border-top: 2px solid #ecf0f1;
|
||||
}
|
||||
|
||||
.related-articles h3 {
|
||||
/* 相关文章标题 */
|
||||
.related-articles-section h3 {
|
||||
font-size: 1.3rem;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 相关文章列表容器 */
|
||||
.related-articles-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.related-article-item {
|
||||
/* 相关文章卡片 */
|
||||
.related-article-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
@@ -331,164 +388,103 @@ onMounted(() => {
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.related-article-item:hover {
|
||||
/* 相关文章卡片悬停效果 */
|
||||
.related-article-card:hover {
|
||||
background-color: #e9ecef;
|
||||
transform: translateX(5px);
|
||||
border-color: #3498db;
|
||||
}
|
||||
|
||||
.related-article-item i {
|
||||
.related-article-card i {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.related-article-item span {
|
||||
.related-article-card span {
|
||||
font-size: 1rem;
|
||||
color: #495057;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
/* 错误和空状态 */
|
||||
.error-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
.related-article-card:hover span {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.empty-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.article-wrapper {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 文章内容 */
|
||||
.article-content {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.8;
|
||||
color: #34495e;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.article-content p {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.article-content h2 {
|
||||
color: #2c3e50;
|
||||
font-size: 1.5rem;
|
||||
margin: 32px 0 16px 0;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #ecf0f1;
|
||||
}
|
||||
|
||||
.article-content h3 {
|
||||
color: #34495e;
|
||||
font-size: 1.3rem;
|
||||
margin: 24px 0 12px 0;
|
||||
}
|
||||
|
||||
.article-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 文章底部 */
|
||||
.article-footer {
|
||||
padding-top: 24px;
|
||||
border-top: 2px solid #ecf0f1;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.article-actions {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* 错误状态 */
|
||||
.error-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 40px;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-container .el-button {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 40px;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
/* 评论区 */
|
||||
.message-board {
|
||||
/* 评论区样式 */
|
||||
.comment-section {
|
||||
margin-top: 32px;
|
||||
}
|
||||
/* 响应式设计 */
|
||||
|
||||
/* 响应式设计 - 平板和手机 */
|
||||
@media (max-width: 768px) {
|
||||
#article-container {
|
||||
#article-detail-page {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.article-wrapper,
|
||||
.loading-container,
|
||||
.error-container,
|
||||
.empty-container {
|
||||
.article-detail-wrapper,
|
||||
.loading-state-container,
|
||||
.error-state-container,
|
||||
.empty-state-container {
|
||||
padding: 20px;
|
||||
margin: 0 15px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.article-title {
|
||||
.article-main-title {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
gap: 15px;
|
||||
.article-meta-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
.article-content-area {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.article-content-area h2 {
|
||||
font-size: 1.3rem;
|
||||
margin: 24px 0 12px 0;
|
||||
}
|
||||
|
||||
.article-content-area h3 {
|
||||
font-size: 1.2rem;
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
|
||||
.related-articles-section h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.related-article-card {
|
||||
padding: 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.related-article-card span {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 - 小屏幕手机 */
|
||||
@media (max-width: 480px) {
|
||||
.article-detail-wrapper {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.article-main-title {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.article-meta-info {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,24 +11,25 @@
|
||||
<transition-group name="article-item" tag="div" v-else>
|
||||
<div
|
||||
class="article-card"
|
||||
v-for="item in datas"
|
||||
:key="item.articleid"
|
||||
@click="handleArticleClick(item)"
|
||||
v-for="article in articleList"
|
||||
:key="article.articleId"
|
||||
@click="handleArticleClick(article)"
|
||||
>
|
||||
<h2 class="article-title">{{ item.title }}</h2>
|
||||
<div v-if="item.mg" class="article-tag">mg</div>
|
||||
<p class="article-preview">{{ formatContentPreview(item.content, 150) }}</p>
|
||||
<div class="article-meta">
|
||||
<span class="article-date">{{ formatDateDisplay(item.createdAt || item.createTime) }}</span>
|
||||
<span v-if="item.viewCount" class="article-views">{{ item.viewCount }} 阅读</span>
|
||||
<span v-if="item.likes" class="article-likes">{{ item.likes }} 点赞</span>
|
||||
<span v-if="item.messageCount" class="article-comments">{{ item.messageCount }} 评论</span>
|
||||
<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>
|
||||
<div class="article-meta-info">
|
||||
<span class="article-publish-date">{{ formatDateDisplay(article.createdAt || article.createTime) }}</span>
|
||||
<span v-if="article.viewCount" class="article-views-count">{{ article.viewCount }} 阅读</span>
|
||||
<span v-if="article.categoryName" class="article-category-badge"> {{ article.categoryName }} </span>
|
||||
<span v-if="article.likes > 0" class="article-likes-count">{{ article.likes }} 点赞</span>
|
||||
<span v-if="article.commentCount > 0" class="article-comments-count">{{ article.commentCount }} 评论</span>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="!loading && datas.length === 0" class="empty-container">
|
||||
<div v-if="!loading && articleList.length === 0" class="empty-state-container">
|
||||
<el-empty description="暂无文章" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -41,63 +42,79 @@ import { articleService } from '@/services'
|
||||
import { formatDate, formatRelativeTime } from '@/utils/dateUtils'
|
||||
import { formatContentPreview } from '@/utils/stringUtils'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { messageService } from '@/services'
|
||||
import { messageService, categoryAttributeService } from '@/services'
|
||||
import { useGlobalStore } from '@/store/globalStore'
|
||||
|
||||
// 全局状态管理
|
||||
const globalStore = useGlobalStore()
|
||||
// 路由实例
|
||||
|
||||
// 路由相关
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
|
||||
|
||||
// 响应式状态
|
||||
const datas = ref([])
|
||||
const articleList = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
|
||||
/**
|
||||
* 获取文章列表
|
||||
*/
|
||||
const fetchArticles = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
let res = {} // 使用let而不是const
|
||||
let response = {}
|
||||
|
||||
// 检查URL参数
|
||||
const localhome = route.path.split('/')[2];
|
||||
// 检查URL参数，确定获取文章的方式
|
||||
const pathSegment = route.path.split('/')[2];
|
||||
|
||||
// 优先使用attributeId参数（新接口）
|
||||
if (localhome==='aericletype') {
|
||||
const data = globalStore.getValue('attribute')
|
||||
res = await articleService.getArticlesByAttributeId(data.id)
|
||||
}
|
||||
// 搜索标题
|
||||
else if (localhome==='aericletitle') {
|
||||
const data = globalStore.getValue('title')
|
||||
res = await articleService.getArticlesByTitle(data.title)
|
||||
}
|
||||
// 获取所有文章
|
||||
else {
|
||||
// 根据不同路径获取不同文章
|
||||
if (pathSegment === 'aericletype') {
|
||||
// 按属性类型获取文章
|
||||
const attributeData = globalStore.getValue('attribute')
|
||||
response = await articleService.getArticlesByAttributeId(attributeData.id)
|
||||
} else if (pathSegment === 'aericletitle') {
|
||||
// 按标题搜索文章
|
||||
const titleData = globalStore.getValue('title')
|
||||
response = await articleService.getArticlesByTitle(titleData.title)
|
||||
} else {
|
||||
// 获取所有文章
|
||||
console.log('获取所有文章列表')
|
||||
res = await articleService.getAllArticles()
|
||||
response = await articleService.getAllArticles()
|
||||
}
|
||||
// 获取每个文章的留言数量
|
||||
for (const item of res.data) {
|
||||
|
||||
// 为每个文章获取留言数量和分类名称
|
||||
for (const article of response.data) {
|
||||
try {
|
||||
const msgRes = await messageService.getMessagesByArticleId(item.articleid)
|
||||
if (msgRes && msgRes.data) {
|
||||
item.messageCount = msgRes.data.length
|
||||
// 获取留言数量
|
||||
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 {
|
||||
item.messageCount = 0
|
||||
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(`获取文章${item.articleid}留言数量失败:`, err)
|
||||
item.messageCount = 0
|
||||
console.error(`获取文章${article.articleid}留言数量失败:`, err)
|
||||
article.commentCount = 0
|
||||
}
|
||||
}
|
||||
// 修复：使用正确的属性名data而不是date
|
||||
console.log(res.data)
|
||||
datas.value = res.data || []
|
||||
|
||||
// 更新文章列表
|
||||
console.log(response.data)
|
||||
articleList.value = response.data || []
|
||||
} catch (error) {
|
||||
console.error('获取文章列表失败:', error)
|
||||
ElMessage.error('获取文章列表失败，请稍后重试')
|
||||
@@ -106,21 +123,24 @@ const fetchArticles = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 处理文章点击事件
|
||||
* @param {Object} article - 文章对象
|
||||
*/
|
||||
const handleArticleClick = (article) => {
|
||||
console.log('文章点击:', article)
|
||||
globalStore.setValue('articlebutn', {
|
||||
id: article.articleid,
|
||||
|
||||
// 存储文章信息到全局状态
|
||||
globalStore.setValue('articleInfo', {
|
||||
id: article.articleId,
|
||||
name: article.title || '未命名文章',
|
||||
})
|
||||
router.push({
|
||||
path: '/article/:url',
|
||||
query: { url: article.articleid }
|
||||
})
|
||||
|
||||
// 跳转到文章详情页
|
||||
router.push({
|
||||
path: '/article/:url',
|
||||
query: { url: article.articleId }
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -155,32 +175,38 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 文章列表容器样式 */
|
||||
.article-list-container {
|
||||
max-width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
/* 分类筛选区域 */
|
||||
/* 加载状态 */
|
||||
/* 加载状态容器 */
|
||||
.loading-container {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 文章卡片 */
|
||||
/* 文章卡片样式 */
|
||||
.article-card {
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
transition: all 0.4s ease;
|
||||
gap: 12px;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 文章卡片悬停渐变效果 */
|
||||
.article-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -189,82 +215,155 @@ onMounted(() => {
|
||||
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%);
|
||||
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;
|
||||
}
|
||||
|
||||
/* 文章卡片悬停效果 */
|
||||
.article-card:hover {
|
||||
transform: translateY(-5px) perspective(2000px) rotateX(0);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25),
|
||||
0 0 50px rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15),
|
||||
0 0 30px rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
.article-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 文章标题 */
|
||||
/* 文章过渡动画 */
|
||||
.article-item {
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
/* 文章标题样式 */
|
||||
.article-title {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin: 0;
|
||||
transition: color 0.3s ease;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.article-card:hover .article-title {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
/* 文章元信息 */
|
||||
.article-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
font-size: 0.875rem;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
/* 文章分类 */
|
||||
.article-category {
|
||||
padding: 2px 8px;
|
||||
background-color: rgba(52, 152, 219, 0.1);
|
||||
color: #3498db;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* 文章标签 */
|
||||
.article-tag {
|
||||
/* 特殊标记标签样式 */
|
||||
.article-special-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background-color: rgba(52, 152, 219, 0.1);
|
||||
padding: 3px 10px;
|
||||
background-color: rgba(52, 152, 219, 0.15);
|
||||
color: #3498db;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
align-self: flex-start;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 文章预览 */
|
||||
.article-preview {
|
||||
/* 文章内容预览样式 */
|
||||
.article-content-preview {
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-container {
|
||||
/* 文章元信息容器 */
|
||||
.article-meta-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
font-size: 0.875rem;
|
||||
color: #7f8c8d;
|
||||
margin-top: auto;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 发布日期样式 */
|
||||
.article-publish-date {
|
||||
font-weight: 500;
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
/* 阅读数量样式 */
|
||||
.article-views-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
.article-views-count::before {
|
||||
content: '|';
|
||||
margin-right: 12px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* 分类标签样式 */
|
||||
.article-category-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px 10px;
|
||||
background-color: rgba(52, 152, 219, 0.1);
|
||||
color: #3498db;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.article-category-badge::before {
|
||||
content: '|';
|
||||
margin-right: 12px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* 点赞数量样式 */
|
||||
.article-likes-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
.article-likes-count::before {
|
||||
content: '|';
|
||||
margin-right: 12px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* 评论数量样式 */
|
||||
.article-comments-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
.article-comments-count::before {
|
||||
content: '|';
|
||||
margin-right: 12px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* 空状态容器样式 */
|
||||
.empty-state-container {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
/* 过渡动画 */
|
||||
/* 过渡动画配置 */
|
||||
.article-item-enter-active,
|
||||
.article-item-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
@@ -276,19 +375,55 @@ onMounted(() => {
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
/* 响应式设计 - 平板和手机 */
|
||||
@media (max-width: 768px) {
|
||||
.article-list-container {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
padding: 18px;
|
||||
margin-bottom: 18px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
.article-meta-info {
|
||||
font-size: 0.8rem;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.article-content-preview {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 响应式元信息分隔符 */
|
||||
.article-views-count::before,
|
||||
.article-category-badge::before,
|
||||
.article-likes-count::before,
|
||||
.article-comments-count::before {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 - 小屏幕手机 */
|
||||
@media (max-width: 480px) {
|
||||
.article-card {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.article-meta-info {
|
||||
font-size: 0.75rem;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.article-special-tag {
|
||||
font-size: 0.7rem;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,80 +1,79 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="message-board">
|
||||
<div class="message-board-container">
|
||||
<!-- 留言内容区 -->
|
||||
<div class="message-list">
|
||||
<h3 class="title">留言板</h3>
|
||||
<div class="message-list-wrapper">
|
||||
<h3 class="message-board-title">留言板</h3>
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading-container">
|
||||
<div v-if="loading" class="loading-state-container">
|
||||
<el-skeleton :count="5" />
|
||||
</div>
|
||||
|
||||
<!-- 留言列表 -->
|
||||
<div class="comment-list">
|
||||
<div v-for="comment in messageBoardData" :key="comment.messageid" class="comment-item">
|
||||
<div class="comment-header">
|
||||
<!-- <img :src="getAvatar(comment.nickname)" :alt="" class="avatar"> -->
|
||||
<img :src="getAvatar()" class="avatar">
|
||||
<div class="user-info">
|
||||
<div class="username">{{ comment.displayName || comment.nickname }}</div>
|
||||
<div class="time">{{ formatDate(comment.createdAt) || '刚刚' }}</div>
|
||||
<div class="comment-list-container">
|
||||
<div v-for="comment in messageBoardData" :key="comment.messageid" class="comment-item-wrapper">
|
||||
<div class="comment-header-info">
|
||||
<!-- 头像 -->
|
||||
<img :src="getAvatar()" class="user-avatar">
|
||||
<div class="user-meta-info">
|
||||
<div class="user-nickname">{{ comment.displayName || comment.nickname }}</div>
|
||||
<div class="comment-time">{{ formatDate(comment.createdAt) || '刚刚' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-content" v-html="comment.content"></div>
|
||||
<div class="comment-actions">
|
||||
<span class="likes-btn" @click="handleLike(comment)">
|
||||
<span v-if="comment.likes && comment.likes > 0" class="likes-count">{{ comment.likes }}</span>
|
||||
<div class="comment-content-text" v-html="comment.content"></div>
|
||||
<div class="comment-actions-bar">
|
||||
<span class="like-button" @click="handleLike(comment)">
|
||||
<span v-if="comment.likes && comment.likes > 0" class="like-count">{{ comment.likes }}</span>
|
||||
👍 赞
|
||||
</span>
|
||||
<span class="reply-btn" @click="handleReply(null, comment)">回复</span>
|
||||
<span class="reply-button" @click="handleReply(null, comment)">回复</span>
|
||||
</div>
|
||||
<!-- 回复列表 -->
|
||||
<div v-if="comment.replies && comment.replies && comment.replies.length > 0" class="reply-list">
|
||||
<div v-for="reply in comment.replies" :key="reply.messageid" class="reply-item">
|
||||
<div class="reply-header">
|
||||
<img :src="getAvatar()" class="avatar">
|
||||
<div class="user-info">
|
||||
<div class="username">{{ reply.displayName || reply.nickname }}</div>
|
||||
<div class="time">{{ formatDate(reply.createdAt) || '刚刚' }}</div>
|
||||
<div v-if="comment.replies && comment.replies && comment.replies.length > 0" class="reply-list-container">
|
||||
<div v-for="reply in comment.replies" :key="reply.messageid" class="reply-item-wrapper">
|
||||
<div class="reply-header-info">
|
||||
<img :src="getAvatar()" class="user-avatar">
|
||||
<div class="user-meta-info">
|
||||
<div class="user-nickname">{{ reply.displayName || reply.nickname }}</div>
|
||||
<div class="comment-time">{{ formatDate(reply.createdAt) || '刚刚' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reply-content">{{ reply.content }}</div>
|
||||
<div class="reply-actions">
|
||||
<span class="likes-btn" @click="handleLike(reply)">
|
||||
<span v-if="reply.likes && reply.likes > 0" class="likes-count">{{ reply.likes }}</span>
|
||||
<div class="reply-content-text">{{ reply.content }}</div>
|
||||
<div class="reply-actions-bar">
|
||||
<span class="like-button" @click="handleLike(reply)">
|
||||
<span v-if="reply.likes && reply.likes > 0" class="like-count">{{ reply.likes }}</span>
|
||||
👍 赞
|
||||
</span>
|
||||
<span class="reply-btn" @click="handleReply(comment, reply)">回复</span>
|
||||
<span class="reply-button" @click="handleReply(comment, reply)">回复</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 无留言提示 -->
|
||||
<div v-if="!loading && messageBoardData.length === 0 "
|
||||
class="message-empty">
|
||||
<div v-if="!loading && messageBoardData.length === 0" class="empty-message-state">
|
||||
还没有留言，快来抢沙发吧！
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 留言输入区 -->
|
||||
<div class="message-form-section">
|
||||
<h2>发送评论（请正确填写邮箱地址，否则将会当成垃圾评论处理）</h2>
|
||||
<div v-if="replyingTo.id" class="reply-preview">
|
||||
<div class="comment-form-section">
|
||||
<h2 class="comment-form-title">发送评论（请正确填写邮箱地址，否则将会当成垃圾评论处理）</h2>
|
||||
<div v-if="replyingTo.id" class="reply-preview-container">
|
||||
<span>
|
||||
正在回复 <b>{{ replyingTo.nickname }}</b> 的评论:
|
||||
</span>
|
||||
<div class="reply-preview-content">
|
||||
<div class="reply-preview-text">
|
||||
{{ replyingTo.content }}
|
||||
</div>
|
||||
<button class="reply-cancel-btn" @click="cancelReply">取消回复</button>
|
||||
<button class="cancel-reply-button" @click="cancelReply">取消回复</button>
|
||||
</div>
|
||||
<el-form :model="form" :rules="rules" ref="formRef" label-width="0">
|
||||
<el-form-item prop="content">
|
||||
<el-input v-model="form.content" placeholder="评论内容" type="textarea" rows="4" clearable
|
||||
:disabled="submitting" />
|
||||
</el-form-item>
|
||||
<div class="form-input-row">
|
||||
<div class="form-input-row form-input-row--inline">
|
||||
<el-form-item prop="nickname">
|
||||
<el-input v-model="form.nickname" placeholder="昵称" clearable :disabled="submitting" />
|
||||
</el-form-item>
|
||||
@@ -82,7 +81,7 @@
|
||||
<el-input v-model="form.email" placeholder="邮箱/QQ号" clearable :disabled="submitting" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="captcha">
|
||||
<div class="captcha-container">
|
||||
<div class="captcha-input-wrapper">
|
||||
<el-input
|
||||
v-model="form.captcha"
|
||||
placeholder="验证码"
|
||||
@@ -91,7 +90,7 @@
|
||||
@focus="showCaptchaHint = true"
|
||||
@blur="showCaptchaHint = false"
|
||||
/>
|
||||
<div class="captcha-hint" @click="generateCaptcha" v-show="showCaptchaHint">
|
||||
<div class="captcha-hint-popup" @click="generateCaptcha" v-show="showCaptchaHint">
|
||||
{{ captchaHint }}
|
||||
<span class="refresh-icon">↻</span>
|
||||
</div>
|
||||
@@ -464,442 +463,274 @@ const handleLike = async (msg) => {
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.message-board {
|
||||
<style scoped lang="scss">
|
||||
/* 主容器样式 */
|
||||
.message-board-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.message-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.message-section h4 {
|
||||
color: #3498db;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #3498db;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.message-item:hover {
|
||||
background-color: #e9ecef;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.message-avatar-container {
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.message-content-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.message-item-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.message-nickname {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 0.8rem;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
color: #34495e;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.reply-to {
|
||||
color: #e74c3c;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.message-item-bottom {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
.reply-btn:hover {
|
||||
color: #2980b9;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.likes-btn {
|
||||
margin-right: 15px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.likes-btn:hover {
|
||||
color: #e74c3c;
|
||||
background-color: rgba(231, 76, 60, 0.1);
|
||||
}
|
||||
|
||||
.likes-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.likes-count {
|
||||
margin-right: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.replies {
|
||||
margin-top: 15px;
|
||||
padding-left: 20px;
|
||||
border-left: 3px solid #3498db;
|
||||
}
|
||||
|
||||
.reply-item {
|
||||
margin-bottom: 15px;
|
||||
/* padding: 10px; */
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.reply-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.message-empty {
|
||||
text-align: center;
|
||||
color: #7f8c8d;
|
||||
padding: 40px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.message-form-section {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.message-form-section h2 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.reply-preview {
|
||||
background-color: #e8f4fd;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.reply-preview-content {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 4px;
|
||||
font-style: italic;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.reply-cancel-btn {
|
||||
background: none;
|
||||
border: 1px solid #e74c3c;
|
||||
color: #e74c3c;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.reply-cancel-btn:hover {
|
||||
background-color: #e74c3c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.form-input-row {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-input-row .el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.article-message-group {
|
||||
margin-bottom: 25px;
|
||||
padding: 15px;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.article-message-header {
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ecf0f1;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
color: #3498db;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.form-input-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message-avatar-container {
|
||||
margin-right: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.message-list {
|
||||
/* 留言列表容器 */
|
||||
.message-list-wrapper {
|
||||
margin-bottom: 24px;
|
||||
background: #f8fafd;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.replies {
|
||||
margin-left: 40px;
|
||||
border-top: 2px solid #eee;
|
||||
padding: 12px;
|
||||
/* 留言板标题 */
|
||||
.message-board-title {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 16px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 14px 18px;
|
||||
/* 加载状态样式 */
|
||||
.loading-state-container {
|
||||
padding: 40px 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 评论列表容器 */
|
||||
.comment-list-container {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 评论项容器 */
|
||||
.comment-item-wrapper {
|
||||
background-color: #fff;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.comment-item-wrapper:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 评论头部信息 */
|
||||
.comment-header-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
position: relative;
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
/* 用户头像 */
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
float: left;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.message-item-top {
|
||||
/* 用户元信息 */
|
||||
.user-meta-info {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 用户名 */
|
||||
.user-nickname {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #409eff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* 评论时间 */
|
||||
.comment-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 评论内容文本 */
|
||||
.comment-content-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 12px;
|
||||
word-break: break-word;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 评论操作栏 */
|
||||
.comment-actions-bar {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 点赞按钮 */
|
||||
.like-button {
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.like-button:hover {
|
||||
color: #e74c3c;
|
||||
background-color: rgba(231, 76, 60, 0.1);
|
||||
}
|
||||
|
||||
.like-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 点赞数量 */
|
||||
.like-count {
|
||||
margin-right: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 回复按钮 */
|
||||
.reply-button {
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reply-button:hover {
|
||||
color: #409eff;
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 回复列表容器 */
|
||||
.reply-list-container {
|
||||
margin-top: 16px;
|
||||
padding-left: 52px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 16px;
|
||||
}
|
||||
/**
|
||||
* 内联表单输入行样式
|
||||
* 用于将表单输入项与标签或其他元素对齐
|
||||
*/
|
||||
.form-input-row--inline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message-nickname {
|
||||
font-weight: bold;
|
||||
color: #409eff;
|
||||
.form-input-row--inline div:nth-child(2) {
|
||||
margin-left: 9%;
|
||||
margin-right: 9%;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
/* 回复项容器 */
|
||||
.reply-item-wrapper {
|
||||
background-color: #fafafa;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.reply-item-wrapper:hover {
|
||||
background-color: #f0f0f0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 回复头部信息 */
|
||||
.reply-header-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 回复内容文本 */
|
||||
.reply-content-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
/* 回复操作栏 */
|
||||
.reply-actions-bar {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
color: #666;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.message-item-bottom {
|
||||
height: 45px;
|
||||
/* 固定高度以防跳动 */
|
||||
/* 空状态提示 */
|
||||
.empty-message-state {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.message-empty {
|
||||
color: #bbb;
|
||||
text-align: center;
|
||||
padding: 32px 0;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.message-form-section {
|
||||
/* 评论表单区域 */
|
||||
.comment-form-section {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.message-form-section h2 {
|
||||
font-size: 1.1rem;
|
||||
/* 评论表单标题 */
|
||||
.comment-form-title {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 18px;
|
||||
color: #333;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.reply-preview {
|
||||
/* 回复预览容器 */
|
||||
.reply-preview-container {
|
||||
background: #f0f9ff;
|
||||
border-left: 4px solid #409eff;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.reply-preview-content {
|
||||
/* 回复预览文本 */
|
||||
.reply-preview-text {
|
||||
margin-top: 6px;
|
||||
padding: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 4px;
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.reply-cancel-btn {
|
||||
/* 取消回复按钮 */
|
||||
.cancel-reply-button {
|
||||
background: #fff;
|
||||
color: #409eff;
|
||||
border: 1px solid #409eff;
|
||||
border-radius: 6px;
|
||||
padding: 2px 10px;
|
||||
padding: 4px 12px;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
margin-top: 10px;
|
||||
font-size: 0.95rem;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.reply-cancel-btn:hover {
|
||||
.cancel-reply-button:hover {
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.form-input-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-input-row .el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.el-form-item .el-input__inner,
|
||||
.el-form-item .el-textarea__inner {
|
||||
min-height: 45px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-container {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
/* 过渡动画 */
|
||||
.message-item-enter-active,
|
||||
.message-item-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.message-item-enter-from,
|
||||
.message-item-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.comment-list {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.comment-item {
|
||||
background-color: #fff;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 12px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* 验证码相关样式 */
|
||||
.captcha-container {
|
||||
/* 验证码输入包装器 */
|
||||
.captcha-input-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.captcha-hint {
|
||||
/* 验证码提示弹窗 */
|
||||
.captcha-hint-popup {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
right: 0;
|
||||
@@ -918,85 +749,43 @@ const handleLike = async (msg) => {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.captcha-hint:hover {
|
||||
.captcha-hint-popup:hover {
|
||||
background-color: #e6f7ff;
|
||||
border-color: #91d5ff;
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.captcha-hint:hover .refresh-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.comment-actions {
|
||||
text-align: right;
|
||||
gap: 20px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.comment-actions .likes {
|
||||
margin-right: 86%;
|
||||
}
|
||||
|
||||
.likes,
|
||||
.reply-btn {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-list {
|
||||
margin-top: 16px;
|
||||
padding-left: 52px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.reply-item {
|
||||
background-color: #fafafa;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.reply-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.reply-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.reply-actions {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.message-board {
|
||||
.message-board-container {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.message-form-section {
|
||||
|
||||
.message-list-wrapper {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
|
||||
.comment-form-section {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.form-input-row {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.comment-header-info,
|
||||
.reply-header-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
margin-right: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.reply-list-container {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div id="aericle-style">
|
||||
<div class="aericle-list">
|
||||
<div class="nonsense-container">
|
||||
<div class="nonsense-list">
|
||||
<div
|
||||
class="aericle-item"
|
||||
v-for="item in aericleList"
|
||||
class="nonsense-item"
|
||||
v-for="item in nonsenseList"
|
||||
:key="item.id"
|
||||
>
|
||||
<div class="aericle-meta">
|
||||
<span class="aericle-time">{{ item.time }}</span>
|
||||
<div class="nonsense-meta-info">
|
||||
<span class="nonsense-time">{{ item.time }}</span>
|
||||
</div>
|
||||
<div class="aericle-content">{{ item.content }}</div>
|
||||
<div class="nonsense-content">{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -18,8 +18,11 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 吐槽数据（仅站长可见/可发）
|
||||
const aericleList = ref([
|
||||
/**
|
||||
* 吐槽数据列表
|
||||
* 仅站长可见/可发
|
||||
*/
|
||||
const nonsenseList = ref([
|
||||
{
|
||||
id: 1,
|
||||
content: '嘿嘿 嘿嘿嘿（流口水ing）',
|
||||
@@ -29,70 +32,101 @@ const aericleList = ref([
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#aericle-style {
|
||||
/* 吐槽页面主容器样式 */
|
||||
.nonsense-container {
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 12px;
|
||||
padding: 32px 20px 24px 20px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.aericle-header {
|
||||
/* 吐槽页面主容器悬浮效果 */
|
||||
.nonsense-container:hover {
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* 吐槽头部样式 */
|
||||
.nonsense-header {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.aericle-header h1 {
|
||||
|
||||
.nonsense-header h1 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 8px;
|
||||
color: #409eff;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.aericle-desc {
|
||||
|
||||
.nonsense-description {
|
||||
color: #888;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.aericle-list {
|
||||
/* 吐槽列表样式 */
|
||||
.nonsense-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.aericle-item {
|
||||
/* 吐槽项样式 */
|
||||
.nonsense-item {
|
||||
background: #f8fafd;
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px 14px 20px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.03);
|
||||
position: relative;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.aericle-item:hover {
|
||||
box-shadow: 0 4px 16px rgba(64,158,255,0.12);
|
||||
transition: box-shadow 0.2s, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.aericle-meta {
|
||||
/* 吐槽项悬浮效果 */
|
||||
.nonsense-item:hover {
|
||||
box-shadow: 0 4px 16px rgba(64,158,255,0.12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 吐槽元信息样式 */
|
||||
.nonsense-meta-info {
|
||||
font-size: 13px;
|
||||
color: #aaa;
|
||||
margin-bottom: 8px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.aericle-content {
|
||||
/* 吐槽内容样式 */
|
||||
.nonsense-content {
|
||||
font-size: 1.08rem;
|
||||
color: #333;
|
||||
line-height: 1.8;
|
||||
word-break: break-all;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
#aericle-style {
|
||||
.nonsense-container {
|
||||
padding: 14px 4px 10px 4px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.aericle-header h1 {
|
||||
|
||||
.nonsense-header h1 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.aericle-content {
|
||||
|
||||
.nonsense-content {
|
||||
font-size: 0.98rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.nonsense-list {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nonsense-item {
|
||||
padding: 14px 16px 10px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,18 +1,53 @@
|
||||
<template>
|
||||
<div style="max-width: 600px">
|
||||
<el-alert title="Primary alert" type="primary" />
|
||||
<el-alert title="Success alert" type="success" />
|
||||
<el-alert title="Info alert" type="info" />
|
||||
<el-alert title="Warning alert" type="warning" />
|
||||
<el-alert title="Error alert" type="error" />
|
||||
<div class="alert-demo-container">
|
||||
<!-- 主要警告 -->
|
||||
<el-alert title="主要警告" type="primary" />
|
||||
|
||||
<!-- 成功警告 -->
|
||||
<el-alert title="成功警告" type="success" />
|
||||
|
||||
<!-- 信息警告 -->
|
||||
<el-alert title="信息警告" type="info" />
|
||||
|
||||
<!-- 警告提醒 -->
|
||||
<el-alert title="警告提醒" type="warning" />
|
||||
|
||||
<!-- 错误警告 -->
|
||||
<el-alert title="错误警告" type="error" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.el-alert {
|
||||
margin: 20px 0 0;
|
||||
/* 警告框演示容器样式 */
|
||||
.alert-demo-container {
|
||||
max-width: 600px;
|
||||
}
|
||||
.el-alert:first-child {
|
||||
|
||||
/* 警告框样式 */
|
||||
.alert-demo-container .el-alert {
|
||||
margin: 20px 0 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 第一个警告框的特殊样式（移除顶部外边距） */
|
||||
.alert-demo-container .el-alert:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
/* 警告框悬浮效果 */
|
||||
.alert-demo-container .el-alert:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.alert-demo-container {
|
||||
max-width: 100%;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.alert-demo-container .el-alert {
|
||||
margin: 15px 0 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user