refactor(services): 移除未使用的服务方法以简化代码结构

清理多个服务文件中未使用或重复的方法，包括登录、分类、分类属性和留言服务

README_API.md

@@ -0,0 +1,481 @@
+# 前端API调用文档
+
+## 项目概述
+
+这是一个基于Vue 3的博客前端项目，提供文章展示、分类管理、留言板、用户认证和疯言疯语等功能。项目使用Vue 3 Composition API进行开发，集成了Vue Router进行路由管理，并使用Element Plus等UI库提供用户界面。
+
+## 技术栈
+
+- **前端框架**: Vue 3
+- **构建工具**: Vite
+- **路由管理**: Vue Router 4
+- **UI组件库**: Element Plus
+- **HTTP客户端**: Axios
+- **类型定义**: TypeScript类型接口
+
+## 项目结构
+
+```
+src/
+├── App.vue                # 应用根组件
+├── main.js                # 应用入口文件
+├── router/                # 路由配置
+├── services/              # API服务模块
+│   ├── apiService.js      # 基础API服务配置
+│   ├── articleService.js  # 文章相关API
+│   ├── categoryService.js # 分类相关API
+│   ├── categoryAttributeService.js # 分类属性相关API
+│   ├── loginService.js    # 用户认证相关API
+│   ├── messageService.js  # 留言相关API
+│   ├── nonsenseService.js # 疯言疯语相关API
+│   └── index.js           # 服务导出文件
+├── types/                 # 类型定义
+│   └── index.ts           # 所有接口类型定义
+├── views/                 # 视图组件
+└── components/            # 可复用组件
+```
+
+## API服务模块详解
+
+### 1. 基础API服务 (apiService.js)
+
+基础API服务配置了Axios实例，设置请求拦截器和响应拦截器，统一处理认证信息和错误响应。
+
+```javascript
+// 创建axios实例
+const api = axios.create({
+  baseURL:'http://localhost:8080/api', // API基础URL
+  timeout: 10000, // 请求超时时间
+  withCredentials: true // 允许跨域请求携带凭证
+})
+```
+
+**核心功能**：
+- 自动添加认证token到请求头
+- 统一处理HTTP错误（401、403、404、500等）
+- 自动显示错误提示信息
+- 未授权时自动清除token并重定向到登录页
+
+### 2. 文章服务 (articleService.js)
+
+提供文章的CRUD操作和各种查询功能。
+
+**主要方法**：
+
+| 方法名 | 说明 | 参数 | 返回类型 |
+|-------|------|------|----------|
+| getAllArticles | 获取已发布文章列表 | params: PaginationParams（可选） | Promise<ApiResponse<Article[]>> |
+| getArticlesByStatus | 根据状态获取文章列表 | status: number（0：未发表 1：已发表 2：已删除） | Promise<ApiResponse<Article[]>> |
+| getAllArticlesWithDeleted | 获取所有文章列表（包含已删除） | params: PaginationParams（可选） | Promise<ApiResponse<Article[]>> |
+| getArticleById | 根据ID获取文章详情 | articleid: number | Promise<ApiResponse<Article>> |
+| getArticlesByAttributeId | 根据属性ID获取文章列表 | attributeid: number | Promise<ApiResponse<Article[]>> |
+| getArticlesByTitle | 根据标题查询文章列表 | title: string | Promise<ApiResponse<Article[]>> |
+| getPopularArticles | 获取热门文章 | 无 | Promise<ApiResponse<Article[]>> |
+| createArticle | 创建文章 | articleData: ArticleDto | Promise<ApiResponse<Article>> |
+| updateArticle | 更新文章 | articleid: number, articleData: ArticleDto | Promise<ApiResponse<Article>> |
+| deleteArticle | 删除文章 | articleid: number | Promise<ApiResponse<boolean>> |
+| getArticlesByCategory | 根据分类获取文章 | categoryid: number | Promise<ApiResponse<Article[]>> |
+| incrementArticleViews | 增加文章浏览量 | articleid: number | Promise<ApiResponse<boolean>> |
+| getLatestArticlesByAttribute | 根据属性ID获取最新文章 | attributeid: number | Promise<ApiResponse<Article[]>> |
+| likeArticle | 点赞文章 | articleid: number | Promise<ApiResponse<boolean>> |
+
+### 3. 分类服务 (categoryService.js)
+
+提供分类的管理功能。
+
+**主要方法**：
+
+| 方法名 | 说明 | 参数 | 返回类型 |
+|-------|------|------|----------|
+| getAllCategories | 获取所有分类 | 无 | Promise<ApiResponse<Category[]>> |
+| getCategory | 获取指定分类 | typeid: number | Promise<ApiResponse<Category>> |
+| createCategory | 创建新分类 | categoryData: CategoryDto | Promise<ApiResponse<Category>> |
+| updateCategory | 更新分类 | typeid: number, categoryData: CategoryDto | Promise<ApiResponse<Category>> |
+| deleteCategory | 删除分类 | typeid: number | Promise<ApiResponse<boolean>> |
+
+### 4. 分类属性服务 (categoryAttributeService.js)
+
+提供分类属性（标签）的管理功能。
+
+**主要方法**：
+
+| 方法名 | 说明 | 参数 | 返回类型 |
+|-------|------|------|----------|
+| getAllAttributes | 获取所有分类属性 | 无 | Promise<ApiResponse<CategoryAttribute[]>> |
+| getAttributeById | 根据ID获取分类属性 | attributeid: number | Promise<ApiResponse<CategoryAttribute>> |
+| getAttributesByCategory | 根据分类ID获取属性列表 | categoryid: number | Promise<ApiResponse<CategoryAttribute[]>> |
+| createAttribute | 创建分类属性 | attributeData: CategoryAttributeDto | Promise<ApiResponse<CategoryAttribute>> |
+| updateAttribute | 更新分类属性 | attributeid: number, attributeData: CategoryAttributeDto | Promise<ApiResponse<CategoryAttribute>> |
+| deleteAttribute | 删除分类属性 | attributeid: number | Promise<ApiResponse<boolean>> |
+| checkAttributeExists | 检查分类下是否存在指定名称的属性 | categoryid: number, attributename: string | Promise<ApiResponse<boolean>> |
+
+### 5. 用户认证服务 (loginService.js)
+
+提供用户登录、注册和个人信息管理功能。
+
+**主要方法**：
+
+| 方法名 | 说明 | 参数 | 返回类型 |
+|-------|------|------|----------|
+| login | 用户登录 | loginData: LoginDto | Promise<ApiResponse<User>> |
+| register | 用户注册 | registerData: RegisterDto | Promise<ApiResponse<User>> |
+| logout | 用户登出 | 无 | Promise<any> |
+| getCurrentUser | 获取当前用户信息 | 无 | Promise<ApiResponse<User>> |
+| updateUser | 更新用户信息 | userData: UserDto | Promise<ApiResponse<User>> |
+| changePassword | 修改密码 | passwordData: ChangePasswordDto | Promise<ApiResponse<boolean>> |
+
+### 6. 留言服务 (messageService.js)
+
+提供留言的管理和查询功能。
+
+**主要方法**：
+
+| 方法名 | 说明 | 参数 | 返回类型 |
+|-------|------|------|----------|
+| getAllMessages | 获取所有留言 | 无 | Promise<ApiResponse<Message[]>> |
+| getMessageById | 获取单条留言 | messageid: number | Promise<ApiResponse<Message>> |
+| getMessagesByArticleId | 根据文章ID获取留言 | articleid: number | Promise<ApiResponse<Message[]>> |
+| getRootMessages | 获取根留言 | 无 | Promise<ApiResponse<Message[]>> |
+| getRepliesByParentId | 根据父留言ID获取回复 | parentid: number | Promise<ApiResponse<Message[]>> |
+| searchMessagesByNickname | 根据昵称搜索留言 | nickname: string | Promise<ApiResponse<Message[]>> |
+| getMessageCountByArticleId | 获取文章评论数量 | articleid: number | Promise<ApiResponse<number>> |
+| saveMessage | 创建留言 | messageData: MessageDto | Promise<ApiResponse<Message>> |
+| deleteMessage | 删除留言 | messageid: number | Promise<ApiResponse<boolean>> |
+| likeMessage | 点赞留言 | messageid: number | Promise<ApiResponse<boolean>> |
+
+### 7. 疯言疯语服务 (nonsenseService.js)
+
+提供疯言疯语内容的管理功能。
+
+**主要方法**：
+
+| 方法名 | 说明 | 参数 | 返回类型 |
+|-------|------|------|----------|
+| getAllNonsense | 获取所有疯言疯语内容 | 无 | Promise<ApiResponse<Nonsense[]>> |
+| getNonsenseByStatus | 根据状态获取疯言疯语内容 | status: number（1:已发表, 0:草稿） | Promise<ApiResponse<Nonsense[]>> |
+| saveNonsense | 保存疯言疯语内容 | nonsense: Nonsense | Promise<ApiResponse<Nonsense>> |
+| deleteNonsense | 删除疯言疯语内容 | id: number | Promise<ApiResponse<boolean>> |
+| updateNonsense | 更新疯言疯语内容 | nonsense: Nonsense | Promise<ApiResponse<Nonsense>> |
+
+## 数据模型定义
+
+### 1. 文章 (Article)
+
+```typescript
+interface Article {
+  articleid: number
+  title: string
+  content: string
+  attributeid: Number
+  categoryName: string
+  img?: string
+  createdAt: string
+  updatedAt: string
+  viewCount?: number
+  likes?: number
+  commentCount?: number
+  status?: number
+  markdownscontent: string
+}
+
+interface ArticleDto {
+  id?: number
+  title: string
+  content: string
+  attributeid: number
+  img?: string
+  status?: number
+  viewCount?: number
+  likes?: number
+  markdownscontent: string
+}
+```
+
+### 2. 分类 (Category)
+
+```typescript
+interface Category {
+  typeid: number
+  typename: string
+  description?: string
+  createdAt?: string
+  updatedAt?: string
+  articleCount?: number
+}
+
+interface CategoryDto {
+  typename: string
+  description?: string
+}
+```
+
+### 3. 分类属性 (CategoryAttribute)
+
+```typescript
+interface CategoryAttribute {
+  attributeid: number
+  categoryid: number
+  attributename: string
+}
+
+interface CategoryAttributeDto {
+  categoryid: number
+  attributename: string
+}
+```
+
+### 4. 留言 (Message)
+
+```typescript
+interface Message {
+  messageid: number
+  content: string
+  nickname: string
+  email: string
+  articleid?: number
+  parentid?: number
+  createdAt: string
+  replyid?: number
+  likes?: number
+  messageimg?: string
+}
+
+interface MessageDto {
+  messageid?: number
+  nickname?: string
+  email?: string
+  content?: string
+  createdAt?: string
+  parentid?: number
+  replyid?: number
+  articleid?: number
+  messageimg?: string
+}
+```
+
+### 5. 用户 (User)
+
+```typescript
+interface User {
+  id?: number
+  username?: string
+  password?: string
+  email?: string
+  phone?: string
+  role?: number
+  createTime?: string
+  avatar?: string
+  token?: string
+}
+
+interface UserDto {
+  username: string
+  password: string
+  email: string
+  phone: string
+  role?: number
+}
+```
+
+### 6. 疯言疯语 (Nonsense)
+
+```typescript
+interface Nonsense {
+  nonsenseid: number
+  content: string
+  status?: number
+  time: string
+}
+
+interface NonsenseDto {
+  content: string
+  status?: number
+  time?: string
+}
+```
+
+### 7. API响应 (ApiResponse)
+
+```typescript
+interface ApiResponse<T = any> {
+  success: boolean
+  code: number
+  message?: string
+  data?: T
+  total?: number
+}
+```
+
+## API调用示例
+
+### 导入服务
+
+```javascript
+import { articleService, categoryService, messageService, loginService } from '@/services'
+```
+
+### 文章相关调用示例
+
+```javascript
+// 获取文章列表
+async function fetchArticles() {
+  try {
+    const response = await articleService.getAllArticles({ page: 1, size: 10 })
+    if (response.success) {
+      console.log('文章列表:', response.data)
+    } else {
+      console.error('获取文章列表失败:', response.message)
+    }
+  } catch (error) {
+    console.error('请求错误:', error)
+  }
+}
+
+// 创建新文章
+async function createNewArticle() {
+  try {
+    const articleData = {
+      title: '新文章标题',
+      content: '文章内容',
+      attributeid: 1,
+      markdownscontent: '# 文章标题\n文章内容'
+    }
+    const response = await articleService.createArticle(articleData)
+    if (response.success) {
+      console.log('文章创建成功:', response.data)
+    }
+  } catch (error) {
+    console.error('创建文章失败:', error)
+  }
+}
+```
+
+### 分类相关调用示例
+
+```javascript
+// 获取所有分类
+async function fetchCategories() {
+  try {
+    const response = await categoryService.getAllCategories()
+    if (response.success) {
+      console.log('分类列表:', response.data)
+    }
+  } catch (error) {
+    console.error('获取分类失败:', error)
+  }
+}
+
+// 创建新分类
+async function createCategory() {
+  try {
+    const categoryData = {
+      typename: '新技术',
+      description: '关于新技术的文章分类'
+    }
+    const response = await categoryService.createCategory(categoryData)
+    if (response.success) {
+      console.log('分类创建成功:', response.data)
+    }
+  } catch (error) {
+    console.error('创建分类失败:', error)
+  }
+}
+```
+
+### 用户认证调用示例
+
+```javascript
+// 用户登录
+async function userLogin() {
+  try {
+    const loginData = {
+      username: 'testuser',
+      password: 'password123'
+    }
+    const response = await loginService.login(loginData)
+    if (response.success) {
+      // 保存token
+      localStorage.setItem('token', response.data.token)
+      console.log('登录成功:', response.data)
+    }
+  } catch (error) {
+    console.error('登录失败:', error)
+  }
+}
+
+// 获取当前用户信息
+async function getCurrentUserInfo() {
+  try {
+    const response = await loginService.getCurrentUser()
+    if (response.success) {
+      console.log('用户信息:', response.data)
+    }
+  } catch (error) {
+    console.error('获取用户信息失败:', error)
+  }
+}
+```
+
+## 错误处理机制
+
+前端API服务集成了统一的错误处理机制，包括：
+
+1. **HTTP状态码处理**：
+   - 401: 未授权，自动清除token并跳转登录页
+   - 403: 拒绝访问
+   - 404: 请求资源不存在
+   - 500: 服务器错误
+
+2. **请求错误处理**：
+   - 网络连接错误
+   - 请求超时
+   - 服务器无响应
+
+3. **错误信息提示**：
+   - 所有错误通过Element Plus的ElMessage组件显示
+   - 支持自定义错误消息
+
+## 开发指南
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 启动开发服务器
+
+```bash
+npm run dev
+```
+
+开发服务器将在 http://localhost:3000 启动
+
+### 构建生产版本
+
+```bash
+npm run build
+```
+
+构建后的文件将生成在 `dist` 目录中
+
+### 预览生产版本
+
+```bash
+npm run preview
+```
+
+## 部署说明
+
+1. 确保后端服务已部署并运行在正确的端口上
+2. 修改 `apiService.js` 中的基础URL指向实际的后端服务地址
+3. 构建生产版本并部署到Web服务器
+4. 配置Web服务器以支持单页应用路由 (SPA fallback)
+
+## 注意事项
+
+1. 所有API调用都应该使用services目录下导出的服务实例
+2. 对于需要认证的操作，确保用户已登录并持有有效的token
+3. 在生产环境中，确保修改API基础URL为实际的后端服务地址
+4. 对于分页查询，合理设置page和size参数以优化性能
+5. 图片上传等大文件操作需要特别处理，避免超时

index.html

@@ -2,7 +2,7 @@
 <html lang="">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="/blogicon.jpg">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>清疯不颠</title>
   </head>

jsconfig.json

@@ -1,4 +1,5 @@
 {
+  "include": ["src/**/*"],
   "compilerOptions": {
     "paths": {
       "@/*": ["./src/*"]

package.json

@@ -13,10 +13,13 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "ant-design-vue": "^4.2.6",
-    "antd": "^5.27.3",
-    "axios": "^1.11.0",
-    "element-plus": "^2.11.2",
+    "@element-plus/icons-vue": "^2.3.2",
+    "axios": "^1.12.2",
+    "element-plus": "^2.11.5",
+    "md-editor-v3": "^6.1.0",
+    "pinia": "^3.0.3",
+    "sass": "^1.93.2",
+    "undraw-ui": "^1.3.2",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
   },
@@ -25,7 +28,7 @@
     "@vue/test-utils": "^2.4.6",
     "jsdom": "^26.1.0",
     "unplugin-auto-import": "^20.1.0",
-    "unplugin-vue-components": "^29.0.0",
+    "unplugin-vue-components": "^29.2.0",
     "vite": "^7.0.6",
     "vite-plugin-vue-devtools": "^8.0.0",
     "vitest": "^3.2.4"

src/App.vue

@@ -1,9 +1,24 @@
 <template>
-  <Index/>
+  <div id="apps">
+    <MainLayout />
+  </div>
 </template>
-<script setup>
-import Index from './index.vue';
-</script>
-<style scoped>
 
+<script setup lang="ts">
+import MainLayout from './layouts/MainLayout.vue'
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#apps {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
 </style>

src/components/LeftModule.vue

@@ -0,0 +1,443 @@
+<template>
+  <div id="alld">
+    <div id="top">
+      <div class="top1">
+        <h3>小颠公告栏</h3>
+      </div>
+      <div class="top2">
+        <p>站主发癫中请勿靠近</p>
+      </div>
+    </div>
+    <div id="cont">
+      <div class="cont1">
+        <h3>小颠片刻</h3>
+        <p>左眼右右眼左，四十五度成就美</p>
+      </div>
+      <div class="cont2">
+        <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
+          <el-menu-item index="/home">
+            <el-icon>
+            </el-icon>
+            <span>首页</span>
+          </el-menu-item>
+          <el-menu-item index="/articlelist">
+            <el-icon>
+            </el-icon>
+            <span>目录</span>
+          </el-menu-item>
+          <el-menu-item index="/nonsense">
+            <el-icon>
+            </el-icon>
+            <span>疯言疯语</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+    </div>
+    <div id="bot" :class="{ 'botrelative': scrollY }">
+      <el-tabs v-model="activeName" :stretch="true" class="demo-tabs">
+        <el-tab-pane label="个人简介" name="first">
+          <div class="mylogo">
+            <el-avatar class="mylogo_avatar" :src="state.circleUrl" />
+          </div>
+          <a href="http://www.qf1121.top/">
+            <h6 class="mylogo_name logo-text">清疯不颠</h6>
+          </a>
+          <h6 class="mylogo_description">重度精神失常患者</h6>
+          <div class="stat-container">
+            <div>
+              <a href="#" class="stat-link">
+                <span class="site-state-item-count">{{ articleCount }}</span>
+                <span class="site-state-item-name">文章</span>
+              </a>
+            </div>
+            <div>
+              <a href="#" class="stat-link" @click.prevent="showCategoriesModel">
+                <span class="site-state-item-count">{{ categoryCount }}</span>
+                <span class="site-state-item-name">分类</span>
+              </a>
+            </div>
+            <div>
+              <a href="#" class="stat-link" @click.prevent="showAttributesModel">
+                <span class="site-state-item-count">{{ AttributeCount }}</span>
+                <span class="site-state-item-name">标签</span>
+              </a>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="功能" name="second">
+          <div>还在开发中.....</div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { articleService, categoryService, categoryAttributeService } from "@/services";
+
+// 当前激活菜单
+const activeIndex = ref('/:type')
+const router = useRouter()
+const activeName = ref('first')
+const state = reactive({
+  circleUrl: '/blogicon.jpg',
+  squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
+  sizeList: ['small', '', 'large'] as const,
+})
+
+// 分类相关状态
+// defineEmits
+const emit = defineEmits(['update-data', 'CategoryModal', 'AttributeModal'])
+
+// 标签相关状态
+// 处理菜单选择跳转
+const handleSelect = (key: string) => {
+  router.push({ path: key })
+}
+
+// 路由切换时同步菜单高亮
+router.beforeEach((to) => {
+  activeIndex.value = to.path
+})
+
+// 文章数量状态
+const articleCount = ref(0)
+// 分类数量状态
+const categoryCount = ref(0)
+// 标签数量状态
+const AttributeCount = ref(0)
+
+// 获取文章数量
+const fetchArticleCount = async () => {
+  try {
+    const response = await articleService.getAllArticles();
+    articleCount.value = response.data?.length || 0
+  } catch (error) {
+    console.error('获取文章数量失败:', error)
+    articleCount.value = 0
+  }
+}
+
+// 获取分类数据
+const fetchCategories = async () => {
+
+  // 分类数据状态
+  const categories = ref<any[]>([])
+  try {
+    const response = await categoryService.getAllCategories();
+    // 如果API返回的数据结构不包含count属性，我们可以模拟一些数据
+    categories.value = response.data?.map((category: any) => ({
+      ...category,
+      count: 0
+    })) || [];
+    categories.value.forEach(async (category: any) => {
+      const attributeResponse = await categoryAttributeService.getAttributesByCategory(category.categoryid)
+      if (attributeResponse.data?.length) {
+        category.count = attributeResponse.data?.length || 0
+      }
+    })
+    categoryCount.value = categories.value.length
+  } catch (error) {
+
+    console.error('获取分类失败:', error)
+    // 如果API调用失败，使用模拟数据
+    categories.value = [
+
+    ];
+    categoryCount.value = categories.value.length
+  }
+  return categories.value
+}
+
+// 获取标签数据
+const fetchAttributes = async () => {
+  // 标签数据状态
+  const attributes = ref<any[]>([])
+  try {
+    const response = await categoryAttributeService.getAllAttributes();
+    // 如果API返回的数据结构不包含count属性，我们可以模拟一些数据
+    attributes.value = response.data?.map((attribute: any) => ({
+      ...attribute,
+      count: 0
+    })) || [];
+    attributes.value.forEach(async (attribute: any) => {
+      const articleResponse = await articleService.getArticlesByAttributeId(attribute.attributeid)
+      if (articleResponse.data?.length) {
+        attribute.count = articleResponse.data?.length || 0
+      }
+    })
+    AttributeCount.value = attributes.value.length
+  } catch (error) {
+    console.error('获取标签失败:', error)
+    // 如果API调用失败，使用模拟数据
+    attributes.value = [
+    ];
+    AttributeCount.value = attributes.value.length
+  }
+  return attributes.value
+}
+
+// 向父组件传递标签数据
+const sendData = () => {
+  const data = { fetchAttributes: fetchAttributes(), fetchCategories: fetchCategories() }
+  emit('update-data', data)
+}
+
+// 显示标签蒙版
+const showAttributesModel = () => {
+  emit('AttributeModal', { ifmodal: true })
+}
+// 显示分类蒙版
+const showCategoriesModel = () => {
+  emit('CategoryModal', { ifmodal: true })
+}
+
+
+// 控制底部模块吸顶效果
+const scrollY = ref(false)
+const handleScroll = () => {
+  scrollY.value = window.scrollY > 1100
+}
+
+// 生命周期管理事件监听，防止内存泄漏
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll)
+  fetchArticleCount() // 组件挂载时获取文章数量
+  sendData() // 组件挂载时获取标签数据和分类数据
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<style scoped>
+/* 整体布局外层，每个子div底部间距 */
+#alld div {
+  margin-bottom: 15px;
+}
+
+/* 顶部公告栏样式 */
+#top {
+  height: 100px;
+  border-radius: 10px;
+  background-color: rgba(102, 161, 216, 0.9);
+  /* 蓝色半透明背景 */
+}
+
+#alld #top .top1 {
+  padding-top: 20px;
+  margin-bottom: 0;
+  text-align: center;
+  color: white;
+}
+
+#alld #top .top2 {
+  text-align: center;
+  color: white;
+}
+
+/* 内容区域样式 */
+#cont {
+  padding: 0 0 10px 0;
+  border-radius: 10px;
+  background-color: rgba(255, 255, 255, 0.9);
+  /* 白色半透明背景 */
+}
+
+#cont .cont1 {
+  margin-bottom: 5px;
+}
+
+#cont .cont2 {
+  margin-bottom: 0px;
+}
+
+.cont1 {
+  text-align: center;
+  padding: 25px 10px 25px 10px;
+  background-color: rgba(102, 161, 216, 0.9);
+  /* 蓝色半透明背景 */
+  border-radius: 10px 10px 0 0;
+}
+
+.cont1 h3 {
+  margin-bottom: 10px;
+}
+
+.cont1 p {
+  color: white;
+  font-size: 14px;
+}
+
+/* 菜单样式 */
+.cont2 .el-menu-vertical-demo {
+  display: block;
+  background-color: rgba(0, 0, 0, 0);
+  /* 白色半透明背景 */
+}
+
+.cont2 .el-menu-vertical-demo li {
+  font-size: 14px;
+  height: 35px;
+}
+
+.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);
+}
+
+/* 分类列表样式 */
+.cont3 {
+  margin-top: 20px;
+  padding: 15px;
+  border-radius: 10px;
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+.cont3 h3 {
+  text-align: center;
+  color: #333;
+  margin-bottom: 15px;
+  font-size: 16px;
+}
+
+.category-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.category-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background-color: rgba(240, 240, 240, 0.5);
+}
+
+.category-item:hover {
+  background-color: rgba(52, 152, 219, 0.2);
+  transform: translateX(5px);
+}
+
+.category-name {
+  color: #333;
+  font-size: 14px;
+}
+
+.category-count {
+  color: #7f8c8d;
+  font-size: 12px;
+  background-color: rgba(127, 140, 141, 0.1);
+  padding: 2px 8px;
+  border-radius: 12px;
+}
+
+/* 底部标签页样式 */
+#bot {
+  border-radius: 10px;
+  background-color: rgba(255, 255, 255, 0.9);
+  /* 白色半透明背景 */
+  padding: 10px;
+}
+
+.site-state-item-count {
+  display: block;
+  text-align: center;
+  color: #32325d;
+  font-weight: bold;
+}
+
+.demo-tabs {
+  transition: all 0.3s ease-in-out;
+}
+
+.el-tabs__nav-scroll .el-tabs__nav .el-tabs__item {
+  margin-left: 100px;
+  padding: 10px 20px;
+}
+
+.mylogo_name {
+  font-size: 13px;
+}
+
+.mylogo_description {
+  font-size: 13px;
+  opacity: 0.8;
+  color: #c21f30;
+  margin: 10px 0;
+}
+
+.stat-container {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  font-size: 10px;
+
+}
+
+
+.stat-container div:not(:first-child) {
+  border-left: 1px solid #ccc;
+  padding-left: 10px;
+}
+
+/* 头像样式 */
+#pane-first .mylogo {
+  text-align: center;
+  padding: 6px;
+  margin-bottom: 0px;
+}
+
+.mylogo_avatar {
+  height: 60px;
+  width: 60px;
+}
+
+/* 直接应用到el-avatar组件上的悬浮效果 */
+.el-avatar.mylogo_avatar {
+  transition: transform 0.3s ease;
+}
+
+.el-avatar.mylogo_avatar:hover {
+  transform: scale(1.2);
+}
+
+/* 吸顶效果 */
+.botrelative {
+  position: sticky;
+  top: 20px;
+  z-index: 100;
+  animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+
+</style>

src/index.vue

@@ -1,362 +0,0 @@
-<template>
-  <div class="elrow-top" :class="elrowtop">
-    <el-row justify="center">
-      <el-col :span="4" v-if="windowwidth">
-        <div class="grid-content ep-bg-purple-dark">
-          <!-- <div><img src="../public/favicon.ico" alt=""></div> -->
-          <div>清疯不颠</div>
-        </div>
-      </el-col>
-      <el-col :span="14" justify="center">
-        <div class="grid-content ep-bg-purple-dark">
-          <el-menu :default-active="activeIndex" class="el-menu-demo" :collapse="false"
-            @select="handleSelect">
-            <el-menu-item index="/:type">
-              首页
-            </el-menu-item>
-            <el-menu-item index="/aericle">
-              文章
-            </el-menu-item>
-            <el-menu-item index="/nonsense">
-              疯言疯语
-            </el-menu-item>
-            <el-menu-item index="/about">
-              关于
-            </el-menu-item>
-            <el-menu-item index="/message">
-              留言板
-            </el-menu-item>
-          </el-menu>
-        </div>
-      </el-col>
-      <el-col :span="2" class="search-container" v-if="windowwidth">
-
-      </el-col>
-    </el-row>
-  </div>
-  <div class="hero" :class="{ 'newhero': classhero }" v-if="windowwidth">
-    <h1>如果感到累了撸一管就好了</h1>
-  </div>
-
-  <div id="content-section" :class="{ 'visible': isconts }">
-    <div class="nonsensetitle" v-if="classnonsenset">
-      <div class="nonsensetitleconst" v-if="windowwidth">
-        <h1>发癫中QAQ</h1>
-      </div>
-    </div>
-    <!-- 状态模块 -->
-    <leftmodlue class="leftmodluepage" :class="{ 'nonsensetmargintop': classnonsenset }" v-if="windowwidth" />
-    <!-- 内容模块 -->
-    <RouterView class="RouterViewpage" :class="{ 'nonsensetmargintop': classnonsenset }" />
-  </div>
-  <!-- 分页 -->
-  <div class="Pagination">
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref, computed } from 'vue';
-import { useRouter } from 'vue-router'
-import leftmodlue from '@/views/leftmodlue.vue'
-
-// hero 的高度更新
-const classhero = ref(false);
-const isconts = ref(false); // 内容
-const isScrollingleftmodlue = ref(false);
-const elrowtop = ref(); // 导航
-const classnonsenset = ref(false) // 疯言疯语
-const windowwidth = ref(true) // 屏幕
-// 路由
-const router = useRouter()
-const handleSelect = (key: string) => {
-  router.push({
-    path: key
-  })
-}
-// 是否在某页面
-const isclass = (url: any) => {
-  classhero.value = url != '/:type';
-  classnonsenset.value = url == '/nonsense'
-}
-
-// url监听
-// 使用router.beforeEach或router.afterEach全局守卫
-router.beforeEach((to) => {
-  // console.log("从", from.path, "到", to.path);
-  isclass(to.path)
-  // 回到顶部
-  window.scrollTo({
-    top: 0,
-    behavior: 'smooth' // 平滑滚动
-  });
-
-});
-// 滚动事件
-const handleScroll = () => {
-  const scrollYmo = window.scrollY;
-  // 只有首页才会执行页面内容滚动效果
-  if (location.pathname == '/:type') {
-    isconts.value = window.scrollY > 200;
-    isScrollingleftmodlue.value = window.scrollY > 600;
-  }else{
-    isconts.value = true;
-    isScrollingleftmodlue.value = true;
-  }
-  // 导航
-  if (scrollYmo > 1200) {
-    elrowtop.value = 'hide'
-  } else {
-    elrowtop.value = window.scrollY > 100 ? 'solid' : 'transparent';
-  }
-};
-const addScrollListener = () => {
-  window.addEventListener('scroll', handleScroll);
-};
-const removeScrollListener = () => {
-  window.removeEventListener('scroll', handleScroll);
-};
-
-const mediaquery = () => {
-  // 在这里处理屏幕大小变化
-  if (window.innerWidth < 768) {
-    removeScrollListener();
-    windowwidth.value = false
-    isScrollingleftmodlue.value = true
-    classnonsenset.value = false
-    isconts.value = true;
-  } else {
-    addScrollListener();
-    windowwidth.value = true
-  }
-};
-
-// 页面加载完成后执行
-const activeIndex = ref('/:type')
-const isactiveindex = () => {
-  // 获取当前路径
-  const currentPath = window.location.pathname;
-  // 判断路径并设置hero值
-  activeIndex.value = currentPath;
-}
-
-window.addEventListener('DOMContentLoaded', () => {
-  isactiveindex();
-  mediaquery();
-});
-
-window.addEventListener('resize', mediaquery);
-
-window.addEventListener('DOMContentLoaded', isactiveindex);
-// 输入框
-
-</script>
-<style></style>
-<!-- <style>
-body {
-  /* background-image: url(./img/8.21.1.jpg); */
-  background-size: 120% 120%;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-attachment: fixed;
-}
-
-body ul {
-  border-bottom: 0px;
-}
-
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: inherit;
-  font-weight: 400;
-  line-height: 1.5;
-  margin-bottom: .5rem;
-  color: #32325d;
-}
-
-p {
-  font-size: 1rem;
-  font-weight: 300;
-  line-height: 1.7;
-}
-
-.cont {
-  margin-top: 5%;
-}
-
-/* 导航 */
-.elrow-top {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  padding: 20px 40px;
-  justify-content: space-between;
-  align-items: center;
-  z-index: 1000;
-  transition: all 0.4s ease;
-  font-size: inherit;
-}
-
-.elrow-top.transparent {
-  background-color: transparent;
-}
-
-.elrow-top.solid {
-  background-color: rgba(145, 196, 238, 0.85);
-  padding: 15px 40px;
-  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
-}
-
-.elrow-top.hide {
-  background-color: rgba(145, 196, 238, 0);
-  box-shadow: 0 5px 20px rgba(0, 0, 0, 0);
-  top: -100px;
-  transition: all 0.8s ease;
-}
-
-.elrow-top .el-row .el-col .grid-content .el-menu--horizontal {
-  border-bottom: 0px;
-}
-
-.el-menu--horizontal {
-  background: rgb(0, 0, 0, 0);
-}
-
-.el-menu-demo {
-  font-weight: bold;
-  font-size: 20px;
-  left: 10%;
-}
-
-.el-menu-demo .el-menu-item {
-  margin-left: 10px;
-}
-
-.el-menu.el-menu--horizontal.el-menu-demo .el-menu-item {
-  font-size: inherit;
-}
-
-.el-menu.el-menu--horizontal.el-menu-demo .el-menu-item:hover,
-.el-menu.el-menu--horizontal.el-menu-demo .el-menu-item.is-active {
-  background-color: rgb(0, 0, 0, 0);
-}
-
-
-/* 内容 */
-#content-section {
-  min-height: 100vh;
-  padding: 100px 10%;
-  opacity: 0;
-  transform: translateY(50px);
-  transition: all 0.8s ease-out;
-  /* margin: 20px 0; */
-  border-radius: 10px;
-  display: flex;
-}
-
-#content-section.visible {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.search {
-  margin-top: 12px;
-}
-
-.grid-content {
-  text-align: center;
-}
-
-.RouterViewpage {
-  width: 80%;
-  margin-left: 5%;
-  margin-right: 5%;
-}
-
-/* 分页 */
-.Pagination {
-  align-self: center;
-  background-color: aqua;
-}
-
-#search {
-  display: flex;
-}
-
-.el-button {
-  background-color: rgb(0, 0, 0, 0);
-  border: 0px;
-}
-
-/* 状态栏 */
-.leftmodluepage {
-  width: 20%;
-}
-
-
-/* 开头标题样式*/
-.hero {
-  height: 600px;
-  margin-top: 5%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  color: white;
-}
-
-.hero.newhero {
-  height: 200px;
-  transition: all 0.3s ease;
-}
-
-.hero h1 {
-  font-size: 3.5rem;
-  margin-bottom: 20px;
-}
-
-.hero p {
-  font-size: 1.5rem;
-  max-width: 700px;
-  margin: 0 auto 30px;
-}
-
-/* 疯言疯语标题 */
-.nonsensetitle {
-  text-align: center;
-  position: absolute;
-  top: 0;
-  width: 76.5%;
-  padding: 20px;
-  margin-bottom: 50px;
-  background: rgba(255, 255, 255, 0.1) !important;
-  backdrop-filter: blur(10px);
-  border-radius: 20px;
-}
-
-.nonsensetitle .nonsensetitleconst {
-  padding: 1.5rem;
-  flex: 1 1 auto;
-  box-sizing: border-box;
-}
-
-.nonsensetitle .nonsensetitleconst p {
-  font-size: 1rem;
-}
-
-/* 调整样式 */
-.nonsensetmargintop {
-  margin-top: 130px;
-}
-
-/* 输入框 */
-</style> -->

src/layouts/MainLayout.vue

@@ -0,0 +1,842 @@
+<template>
+  <div class="elrow-top" :class="elrowtop">
+    <el-row justify="center">
+      <el-col :span="6" v-if="windowwidth">
+        <div class="grid-content ep-bg-purple-dark">
+          <div class="logo-text"> <a href="http://www.qf1121.top/">清疯不颠</a></div>
+        </div>
+      </el-col>
+      <el-col :span="14" justify="center">
+        <div class="grid-content ep-bg-purple-dark">
+          <el-menu :default-active="activeIndex" class="el-menu-demo" :collapse="false" @select="handleSelect">
+            <el-menu-item index="home">
+              首页
+            </el-menu-item>
+            <el-menu-item index="articlelist">
+              目录
+            </el-menu-item>
+            <el-menu-item index="nonsense">
+              疯言疯语
+            </el-menu-item>
+            <el-menu-item index="about">
+              关于
+            </el-menu-item>
+            <el-menu-item index="message">
+              留言板
+            </el-menu-item>
+          </el-menu>
+        </div>
+      </el-col>
+      <el-col :span="2" class="search-container" v-if="windowwidth">
+        <!-- 搜索功能 -->
+        <div class="search-wrapper">
+          <button class="search-icon-btn" @click="toggleSearchBox" :class="{ 'active': isSearchBoxOpen }">
+            <svg t="1761567058506" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+              p-id="5586" width="32" height="32">
+              <path
+                d="M512 858.3168c-194.816 0-352-166.2464-352-370.4832S317.184 117.3504 512 117.3504s352 166.2464 352 370.4832-157.184 370.4832-352 370.4832z m0-64c158.6688 0 288-136.8576 288-306.4832 0-169.6768-129.3312-306.4832-288-306.4832S224 318.1568 224 487.8336c0 169.6256 129.3312 306.4832 288 306.4832zM717.312 799.9488a32 32 0 0 1 46.4896-43.9808l91.4432 96.7168a32 32 0 0 1-46.4896 43.9808l-91.4432-96.768z"
+                fill="#5A5A68" p-id="5587"></path>
+            </svg>
+          </button>
+          <div class="search-box-container" :class="{ 'open': isSearchBoxOpen }">
+            <el-input v-model="searchKeyword" placeholder="回车搜索文章..." class="search-input" @keyup.enter="performSearch"
+              @blur="closeSearchBoxWithDelay" />
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+
+  <!-- Hero 区域 -->
+  <div class="hero" :class="{ 'small-hero': classsmallhero }" v-if="windowwidth"
+    :style="{ marginBottom: heroMarginBottom, transform: heroTransform }">
+    <h1 class="typewriter">{{ heroText }}</h1>
+  </div>
+
+  <!-- 内容区域 -->
+  <div id="content-section" :class="{ 'visible': iscontentvisible }">
+    <div class="nonsensetitle" v-if="classnonsenset">
+      <div class="nonsensetitleconst">
+        <h1>{{ Cardtitle }}</h1>
+      </div>
+    </div>
+
+    <!-- 左侧模块 -->
+    <div class="leftmodluecontainer" v-if="isleftmodluecontainer">
+      <LeftModule class="leftmodluepage" @update-data="updateData" @CategoryModal="CategoryModal"
+        @AttributeModal="AttributeModal" :class="{ 'nonsensetmargintop': classmoduleorrouter }" v-if="windowwidth" />
+    </div>
+
+    <!-- 内容模块 -->
+    <div class="RouterViewpage">
+      <RouterView :class="{ 'forbidwidth': !isleftmodluecontainer, 'nonsensetmargintop': classmoduleorrouter }" />
+      <!-- 页脚 -->
+      <Footer class="footer-container" v-if="windowwidth" />
+    </div>
+  </div>
+  <!-- 分类蒙板组件 -->
+  <Transition name="modal">
+    <div v-if="showCategoryModal" class="category-modal" @click.self="closeCategoryModal">
+      <div class="category-modal-content">
+        <div class="category-modal-header">
+          <h3>所有分类</h3>
+          <button class="category-modal-close" @click="closeCategoryModal">×</button>
+        </div>
+        <div class="category-modal-body">
+          <button v-for="category in categories" :key="category.typeid" class="category-button"
+            @click="handleCategoryClick(category)">
+            {{ category.typename }} <span class="category-button-count">({{ category.count || 0 }})</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+
+  <!-- 标签蒙板组件 -->
+  <Transition name="modal">
+    <div v-if="showAttributeModal" class="category-modal" @click.self="closeAttributeModal">
+      <div class="category-modal-content">
+        <div class="category-modal-header">
+          <h3>所有标签</h3>
+          <button class="category-modal-close" @click="closeAttributeModal">×</button>
+        </div>
+        <div class="category-modal-body">
+          <button v-for="attribute in attributes" :key="attribute.attributeid" class="category-button"
+            @click="handleAttributeClick(attribute)">
+            {{ attribute.attributename }} <span class="category-button-count">({{ attribute.count || 0 }})</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+  <!-- 管理员 -->
+  <Establish class="establish-container" v-if="Login" />
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import LeftModule from '@/components/LeftModule.vue';
+import Establish from '@/layouts/establish.vue';
+import Footer from '@/views/Footer.vue';
+
+// ========== 组件初始化 ==========
+
+// 路由相关
+const router = useRouter();
+const route = useRoute();
+
+// 全局状态管理
+import { useGlobalStore } from '@/store/globalStore';
+const globalStore = useGlobalStore();
+const Login = computed(() => globalStore.Login);
+
+// ========== 响应式状态定义 ==========
+// 页面标题和样式相关状态
+const Cardtitle = ref('');
+const classmoduleorrouter = ref(false);
+const classnonsenset = ref(false);
+const classsmallhero = ref(false);
+const elrowtop = ref('transparent');
+// hero区域的margin值，用于实现滚动时动态变化
+const heroMarginBottom = ref('45%');
+// hero区域的初始margin值，从CSS变量获取
+const initialHeroMarginBottom = 45;
+// hero是否开始向上移动
+const heroIsMoving = ref(false);
+// hero的transform值，用于实现向上移动和吸附效果
+const heroTransform = ref('translateY(450px)');
+const heroTransformValue = 450;
+// hero的位置状态：static(静态)、moving(移动中)、sticky(吸附顶部)
+const heroPosition = ref('static');
+
+// 布局相关状态
+const isleftmodluecontainer = ref(true);
+const iscontentvisible = ref(false);
+const isScrollingleftmodlue = ref(false);
+const windowwidth = ref(true);
+
+// 导航相关状态
+const activeIndex = ref('home');
+const localhome = 'home';
+let rpsliturl = route.path.split('/');
+
+// 搜索相关状态
+const isSearchBoxOpen = ref(false);
+const searchKeyword = ref('');
+let searchCloseTimer: number | undefined;
+
+// 打字机效果相关
+let fullHeroText = '清疯不颠';
+const heroText = ref('');
+let heroIndex = 0;
+let heroTimer: number | undefined;
+
+// 蒙版相关状态
+const categories = ref<any[]>([])
+const showCategoryModal = ref(false)
+const attributes = ref<any[]>([])
+const showAttributeModal = ref(false)
+// 显示分类蒙板
+const openCategoryModal = () => {
+  showCategoryModal.value = true;
+}
+// 关闭分类蒙板
+const closeCategoryModal = () => {
+  showCategoryModal.value = false;
+}
+// 显示标签蒙板
+const openAttributeModal = () => {
+  showAttributeModal.value = true;
+}
+// 关闭标签蒙板
+const closeAttributeModal = () => {
+  showAttributeModal.value = false;
+}
+// 左侧状态栏传值
+const updateData = (data: any) => {
+  // 处理异步数据
+  if (data.fetchCategories && typeof data.fetchCategories.then === 'function') {
+    data.fetchCategories.then(result => {
+      categories.value = result || []
+    })
+  } else {
+    categories.value = data.fetchCategories || []
+  }
+  if (data.fetchAttributes && typeof data.fetchAttributes.then === 'function') {
+    data.fetchAttributes.then(result => {
+      attributes.value = result || []
+    })
+  } else {
+    attributes.value = data.fetchAttributes || []
+  }
+}
+// 分类相关状态
+const CategoryModal = async (data: any) => {
+  if (data.ifmodal) {
+    openCategoryModal()
+    // console.log('打开分类蒙板')
+  } else {
+    closeCategoryModal()
+    // console.log('关闭分类蒙板')
+  }
+}
+// 标签相关状态
+const AttributeModal = async (data: any) => {
+  if (data.ifmodal) {
+    openAttributeModal()
+    // console.log('打开标签蒙板')
+  } else {
+    closeAttributeModal()
+    // console.log('关闭标签蒙板')
+  }
+}
+//  ========== 蒙版事件 ==========
+
+// 处理分类点击
+const handleCategoryClick = (category: any) => {
+  // 这里可以根据实际需求跳转到对应分类的文章列表页
+  // 重置全局属性状态
+  globalStore.removeValue('category')
+
+  globalStore.setValue('category', {
+    id: category.categoryid,
+    name: category.categoryname
+  })
+  console.log(category)
+  router.push('/home/aericlecategory',)
+  closeCategoryModal()
+}
+
+// 处理标签点击
+const handleAttributeClick = (attribute: any) => {
+  // 重置全局属性状态
+  globalStore.removeValue('attribute')
+
+  globalStore.setValue('attribute', {
+    id: attribute.attributeid,
+    name: attribute.attributename
+  })
+  console.log(attribute)
+  router.push('/home/aericletype',)
+  closeAttributeModal()
+}
+
+// ========== 打字机效果模块 ==========
+
+/**
+ * 初始化并启动打字机效果
+ * @param {string} text - 要显示的完整文本
+ */
+const startTypewriter = (text: string) => {
+  // 重置状态
+  heroText.value = '';
+  heroIndex = 0;
+
+  // 清除可能存在的定时器
+  if (heroTimer) {
+    clearInterval(heroTimer);
+  }
+
+  // 设置新的定时器，逐字显示文本
+  heroTimer = window.setInterval(() => {
+    if (heroIndex < text.length) {
+      heroText.value += text[heroIndex];
+      heroIndex++;
+    } else {
+      // 文本显示完毕，清除定时器
+      clearInterval(heroTimer);
+    }
+  }, 100);
+};
+
+/**
+ * 停止打字机效果并显示完整文本
+ */
+const stopTypewriter = () => {
+  // 清除定时器
+  if (heroTimer) {
+    clearInterval(heroTimer);
+  }
+  // 非首页时清空hero内容
+  if (rpsliturl[1] !== localhome) {
+    heroText.value = '';
+  } else {
+    // 首页直接显示完整文本
+    heroText.value = fullHeroText;
+  }
+};
+
+// ========== 导航和路由处理模块 ==========
+
+/**
+ * 处理菜单选择并跳转到对应路由
+ * @param {string} key - 菜单项的key值，对应路由路径
+ */
+const handleSelect = (key: string) => {
+  router.push({ path: '/' + key });
+};
+
+/**
+ * 设置当前激活的菜单项并存储路径信息
+ * @param {string} path - 当前路由路径
+ */
+const setActiveIndex = (path: string) => {
+  // 存储当前路径到全局状态
+  globalStore.setValue('localpath', {
+    name: path
+  });
+
+  // 特殊处理消息页面，清除文章信息
+  if (path === 'message') {
+    globalStore.removeValue('articleInfo');
+  }
+
+  // 更新激活菜单项
+  activeIndex.value = path;
+};
+
+/**
+ * 根据路由路径设置页面状态
+ */
+const updatePageState = () => {
+  // 根据是否为主页根路径设置hero区域状态
+  classsmallhero.value = !(rpsliturl[1] == localhome && rpsliturl[2] == undefined);
+  // 控制左侧模块容器的显示/隐藏
+  isleftmodluecontainer.value = rpsliturl[1] !== "articlesave";
+};
+
+/**
+ * 更新文章标题和相关显示状态
+ */
+const updateArticleTitle = () => {
+  let articledata: any = null;
+  // 根据不同路由参数获取文章标题数据
+  if (rpsliturl[2] === 'aericleattribute') {
+    // 按属性类型获取
+    articledata = globalStore.getValue('attribute')?.name;
+  }
+  else if (rpsliturl[2] === 'aericletitle') {
+    // 按标题搜索获取
+    articledata = globalStore.getValue('articleserarch')?.name;
+  }
+  else if (rpsliturl[1] === 'nonsense') {
+    // 疯言疯语页面特殊处理
+    articledata = "疯言疯语";
+  }
+
+  // 确定标题区域的显示状态
+  const shouldHideTitle =
+    // 特殊页面不需要显示标题
+    (rpsliturl[1] === 'articlelist' ||
+      rpsliturl[1] === 'message' ||
+      rpsliturl[1] === 'about') ||
+    // 在主页且无标题数据时，不显示标题
+    (rpsliturl[1] === localhome && !articledata);
+
+  // 更新标题显示状态
+  classnonsenset.value = !shouldHideTitle && !!articledata;
+  classmoduleorrouter.value = !shouldHideTitle && !!articledata;
+
+  // 设置标题内容
+  if (articledata) {
+    Cardtitle.value = articledata;
+  }
+};
+
+// ========== 搜索功能模块 ==========
+
+/**
+ * 切换搜索框的显示/隐藏状态
+ */
+const toggleSearchBox = () => {
+  isSearchBoxOpen.value = !isSearchBoxOpen.value;
+
+  // 如果打开搜索框，清除之前的延时关闭定时器
+  if (isSearchBoxOpen.value && searchCloseTimer) {
+    clearTimeout(searchCloseTimer);
+  }
+};
+
+/**
+ * 立即关闭搜索框
+ */
+const closeSearchBox = () => {
+  isSearchBoxOpen.value = false;
+};
+
+/**
+ * 带延迟关闭搜索框
+ * 用于处理点击搜索按钮后的情况，让用户有时间看到反馈
+ */
+const closeSearchBoxWithDelay = () => {
+  // 清除可能存在的定时器
+  if (searchCloseTimer) {
+    clearTimeout(searchCloseTimer);
+  }
+
+  // 设置新的延迟关闭定时器
+  searchCloseTimer = window.setTimeout(() => {
+    isSearchBoxOpen.value = false;
+  }, 300);
+};
+
+/**
+ * 执行搜索操作
+ * 将搜索关键词存储到全局状态并跳转到搜索结果页面
+ */
+const performSearch = () => {
+  // 验证搜索关键词不为空
+  if (searchKeyword.value.trim()) {
+    // 清除全局搜索关键词
+    globalStore.removeValue('articleserarch');
+    // 存储搜索关键词到全局状态
+    globalStore.setValue('articleserarch', {
+      name: searchKeyword.value
+    });
+    // 跳转到搜索结果页面
+    router.push({ path: `/home/aericletitle` });
+  }
+
+  // 搜索后保持搜索框打开状态
+  if (searchCloseTimer) {
+    clearTimeout(searchCloseTimer);
+  }
+};
+
+// ========== 响应式处理模块 ==========
+
+/**
+ * 处理窗口大小变化
+ * 根据屏幕宽度调整布局和内容显示
+ */
+const handleResize = () => {
+
+  // 更新窗口宽度状态
+  windowwidth.value = window.innerWidth > 768;
+
+  // 首页特殊处理：小屏幕下默认显示内容区
+  if (rpsliturl[1] === localhome) {
+    iscontentvisible.value = window.innerWidth <= 768;
+  }
+  // 移动端首页默认显示内容区，桌面端初始隐藏
+  iscontentvisible.value = window.innerWidth <= 768;
+};
+
+/**
+ * 处理页面滚动事件
+ * 根据滚动位置调整导航栏样式和内容显示动画
+ */
+const handleScroll = () => {
+  let scrollY = 0;
+  scrollY = window.scrollY;
+  // 小屏幕设备只切换导航栏样式
+  if (window.innerWidth <= 768) {
+    updateNavbarStyle(scrollY);
+    return;
+  }
+
+  // 大屏幕设备完整处理
+  updateNavbarStyle(scrollY);
+  // 仅在首页根路径应用滚动动画
+  if (rpsliturl[1] === localhome && rpsliturl[2] == undefined) {
+    // 首页滚动动画处理
+    if (scrollY <= 350) {
+      HeroState(scrollY);
+    }
+    // 控制左侧模块的滚动状态
+    isScrollingleftmodlue.value = scrollY > 600;
+  }
+};
+// ========== 首页滚动动画模块 ==========
+const HeroState = (scrollY: number) => {
+  const windowHeight = window.innerHeight;
+  // 计算滚动距离与窗口高度的比例，用于内容渐显
+  const contentScrollRatio = Math.min(scrollY / windowHeight, 1);
+  // 计算新的底部margin值，从初始值45%逐渐减少到25%
+  const newMarginBottom = Math.max(initialHeroMarginBottom - (initialHeroMarginBottom * contentScrollRatio), 0);
+  // 更新hero的底部margin值
+  heroMarginBottom.value = `${newMarginBottom}%`;
+  // 计算新的translateY值，从初始值450px逐渐减少到150px
+  const translateYValue = Math.max(heroTransformValue - (heroTransformValue * contentScrollRatio * 5), 90);
+  heroTransform.value = `translateY(${translateYValue}px)`;
+  // 当滚动超过100px时开始显示，滚动到一屏高度时完全显示
+  iscontentvisible.value = scrollY > 100;
+  // 当滚动超过287px时logo被顶出屏幕，触发移动状态
+  if (scrollY > 287) {
+    heroPosition.value = 'moving';
+    const translateYValue = Math.min(heroTransformValue - (heroTransformValue * contentScrollRatio * 5), 0);
+    heroTransform.value = `translateY(${translateYValue / 2}px)`;
+  }
+};
+/**
+ * 根据滚动位置更新导航栏样式
+ * @param {number} scrollY - 当前滚动位置
+ */
+const updateNavbarStyle = (scrollY: number) => {
+  // 根据滚动位置设置导航栏样式
+  // 当滚动超过1200px且屏幕宽度大于768px时隐藏导航栏
+  if (scrollY > 1200 && window.innerWidth > 768) {
+    elrowtop.value = 'hide'; // 隐藏导航栏
+  } else {
+    elrowtop.value = scrollY > 50 ? 'solid' : 'transparent'; // 固定或透明样式
+  }
+};
+
+// ========== 路由监听和页面初始化 ==========
+
+/**
+ * 处理路由变化的核心函数
+ * 更新页面状态、标题、激活菜单项等
+ */
+const handleRouteChange = () => {
+  // 重新解析路由路径
+  rpsliturl = route.path.split('/');
+  // 更新页面相关状态
+  updatePageState();
+  setActiveIndex(rpsliturl[1]);
+  updateArticleTitle();
+
+  // 页面跳转后回到顶部
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+
+  // 根据是否为首页决定是否启动打字机效果
+  if (rpsliturl[1] === localhome && rpsliturl[2] == undefined) {
+    // 首页启动打字机效果
+    startTypewriter(fullHeroText);
+    // 重置hero的margin值为初始值
+    heroMarginBottom.value = `${initialHeroMarginBottom}%`;
+    // 重置hero的移动状态
+    heroTransform.value = `translateY(${heroTransformValue}px)`;
+    heroIsMoving.value = false;
+    heroPosition.value = 'static';
+  } else {
+    iscontentvisible.value = true;
+    startTypewriter(fullHeroText);
+    heroMarginBottom.value = `${5}%`;
+    heroTransform.value = ``;
+  }
+};
+
+/**
+ * 初始化页面
+ */
+const initializePage = () => {
+  // 初始化窗口大小
+  handleResize();
+  // 启动打字机效果（如果是首页）
+  if (rpsliturl[1] === localhome && rpsliturl[2] == undefined) {
+    // 首页启动打字机效果
+    startTypewriter(fullHeroText);
+    // 重置hero的margin值为初始值
+    heroMarginBottom.value = `${initialHeroMarginBottom}%`;
+    // 重置hero的移动状态
+    heroIsMoving.value = false;
+    heroPosition.value = 'static';
+    // 移动端首页默认显示内容区，桌面端初始隐藏
+    iscontentvisible.value = window.innerWidth <= 768;
+  } else {
+    startTypewriter(fullHeroText);
+    heroMarginBottom.value = `${2.5}%`;
+  }
+
+};
+
+// ========== 生命周期钩子 ==========
+
+/**
+ * 组件挂载时执行
+ */
+onMounted(() => {
+  // 初始化页面
+  initializePage();
+
+  // 添加事件监听器
+  window.addEventListener('resize', handleResize);
+  window.addEventListener('scroll', handleScroll);
+});
+
+/**
+ * 组件卸载时执行
+ */
+onUnmounted(() => {
+  // 清理事件监听器
+  window.removeEventListener('resize', handleResize);
+  window.removeEventListener('scroll', handleScroll);
+
+  // 清理定时器
+  if (heroTimer) {
+    clearInterval(heroTimer);
+  }
+  if (searchCloseTimer) {
+    clearTimeout(searchCloseTimer);
+  }
+});
+
+// ========== 监听器 ==========
+
+/**
+ * 监听路由变化
+ * 当路由变化时更新页面状态
+ */
+watch(
+  () => route.path,
+  handleRouteChange
+);
+</script>
+
+<style scoped>
+/* 搜索框样式 */
+.search-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.search-icon-btn {
+  background: none;
+  border: none;
+  color: #fff;
+  font-size: 18px;
+  cursor: pointer;
+  /* padding: 8px; */
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.search-icon-btn:hover,
+.search-icon-btn.active {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.search-box-container {
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 4px;
+  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
+  overflow: hidden;
+  width: 0;
+  opacity: 0;
+  transition: all 0.3s ease;
+  z-index: 1000;
+}
+
+.search-box-container.open {
+  width: 100%;
+  opacity: 1;
+}
+
+.el-input__wrapper {
+  width: 80px;
+}
+
+.search-input {
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 36px;
+  /* padding: 0 8px; */
+  border: none;
+}
+
+.search-btn,
+.close-btn {
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  color: #606266;
+  transition: color 0.3s ease;
+}
+
+.search-btn:hover,
+.close-btn:hover {
+  color: #409eff;
+}
+
+.footer-container {
+  margin-top: 20px;
+}
+
+/* 搜索框样式 */
+/* ... 现有搜索框样式 ... */
+
+/* 蒙版样式 */
+.category-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  margin: 0;
+  padding: 0;
+}
+
+.category-modal-content {
+  background-color: white;
+  border-radius: 10px;
+  width: 90%;
+  max-width: 500px;
+  max-height: 80vh;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.category-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.category-modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.category-modal-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #999;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all 0.3s;
+}
+
+.category-modal-close:hover {
+  background-color: #f5f5f5;
+  color: #333;
+}
+
+.category-modal-body {
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 12px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.category-button {
+  background-color: rgba(102, 161, 216, 0.1);
+  border: 1px solid rgba(102, 161, 216, 0.3);
+  border-radius: 6px;
+  padding: 10px 15px;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-size: 14px;
+  color: #333;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.category-button:hover {
+  background-color: rgba(102, 161, 216, 0.3);
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(102, 161, 216, 0.2);
+}
+
+.category-button-count {
+  font-size: 12px;
+  color: #66a1d8;
+  font-weight: 500;
+}
+
+/* 蒙板动画 */
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-active .category-modal-content,
+.modal-leave-active .category-modal-content {
+  transition: transform 0.3s ease;
+}
+
+.modal-enter-from .category-modal-content {
+  transform: scale(0.9);
+}
+
+.modal-leave-to .category-modal-content {
+  transform: scale(0.9);
+}
+
+/* 页脚样式 */
+.footer-container {
+  margin-top: 20px;
+}
+
+/* 防止搜索框在小屏幕上重叠 */
+@media screen and (max-width: 1200px) {
+  .search-box-container.open {
+    width: 150px;
+  }
+}
+</style>

src/layouts/establish.vue

@@ -0,0 +1,783 @@
+<template>
+  <div class="establish-component-root">
+    <div class="establish-container">
+      <!-- 弹出的按钮容器 -->
+      <!-- <div class="expanded-buttons" :class="{ 'show': isExpanded }"> -->
+      <button v-for="(btn, index) in isbuttonsave()" :class="['action-button', { 'show': isExpanded }]"
+        :style="getButtonStyle(index)" :key="btn.id" @click="handleButtonClick(btn)">
+        <!-- <i :class="btn.icon"></i> -->
+        <span>{{ btn.label }}</span>
+      </button>
+      <!-- </div> -->
+
+      <!-- 主圆形按钮 -->
+      <button class="main-button" :class="{ 'active': isExpanded }" @click="toggleExpand">
+        <i class="icon">+</i>
+      </button>
+    </div>
+    <!-- 标签蒙板组件 -->
+    <Transition name="modal">
+      <div v-if="showAttributeModal" class="category-modal" @click.self="closeAttributeModal">
+        <div class="category-modal-content">
+          <div class="category-modal-header">
+            <h3>新建标签</h3>
+            <button class="category-modal-close" @click="closeAttributeModal">×</button>
+          </div>
+          <div class="category-modal-body">
+
+            <el-select v-model="CategoryAttributeDto.categoryid"  placeholder="请选择">
+              <el-option v-for="item in categories" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+
+            <el-input v-model="CategoryAttributeDto.name" placeholder="输入新标签" />
+            <el-button type="primary"
+              @click="saveAttribute(CategoryAttributeDto)">保存</el-button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+// 组件导入和初始化
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { articleService, categoryAttributeService, nonsenseService, categoryService, loginService } from '@/services'
+
+// 全局状态管理
+import { useGlobalStore } from '@/store/globalStore'
+const globalStore = useGlobalStore()
+const router = useRouter()
+
+// ==============================
+// 状态管理模块
+// ==============================
+/**
+ * 按钮展开状态
+ * @type {import('vue').Ref<boolean>}
+ */
+const isExpanded = ref(false)
+
+/**
+ * 分类列表
+ * @type {import('vue').Ref<Array<{value: string, label: string}>>}
+ */
+const categories = ref([])
+
+/**
+ * 标签模态框显示状态
+ * @type {import('vue').Ref<boolean>}
+ */
+const showAttributeModal = ref(false)
+
+/**
+ * 疯言疯语模态框显示状态
+ * @type {import('vue').Ref<boolean>}
+ */
+const isNonsenseModalVisible = ref(false)
+
+/**
+ * 疯言疯语内容
+ * @type {import('vue').Ref<string>}
+ */
+const nonsenseContent = ref('')
+
+/**
+ * 标签数据传输对象
+ * @type {import('vue').Ref<{categoryid: string, name: string}>}
+ */
+const CategoryAttributeDto = ref({
+  categoryid: '',
+  name: ''
+})
+
+// ==============================
+// 按钮配置和管理模块
+// ==============================
+
+/**
+ * 基础按钮配置
+ * @type {Array<{id: string, label: string, icon: string}>}
+ */
+const baseButtons = [
+  { id: 'logout', label: '登出', icon: 'icon-logout' },
+  { id: 'reload', label: '刷新', icon: 'icon-reload' }
+]
+
+/**
+ * 页面特定按钮配置映射
+ * @type {Object.<string, Array<{id: string, label: string, icon: string}>>}
+ */
+const pageButtons = {
+  // 文章详情页按钮
+  article: [
+    { id: 'edit-article', label: '修改', icon: 'icon-add-article' },
+    { id: 'delete-article', label: '删除', icon: 'icon-create-category' },
+    ...baseButtons
+  ],
+
+  // 首页按钮
+  home: [
+    { id: 'create-article', label: '新建', icon: 'icon-add-article' },
+    { id: 'del-articles', label: '已删除', icon: 'icon-new-tag' },
+    { id: 'unpublished-articles', label: '未发表', icon: 'icon-new-tag' },
+    { id: 'published-articles', label: '已发表', icon: 'icon-new-tag' },
+    ...baseButtons
+  ],
+
+  // 疯言疯语页面按钮
+  nonsense: [
+    { id: 'create-nonsense', label: '说说', icon: 'icon-upload-file' },
+    ...baseButtons
+  ],
+
+  // 分类页面按钮
+  articlelist: [
+    { id: 'create-category', label: '分类', icon: 'icon-create-category' },
+    { id: 'create-tag', label: '标签', icon: 'icon-create-tag' },
+    ...baseButtons
+  ],
+
+  // 标签页面按钮
+  tag: [
+    { id: 'create-tag', label: '新建', icon: 'icon-new-tag' },
+    ...baseButtons
+  ],
+
+  // 文章保存页面按钮
+  articlesave: [
+    { id: 'view-articles', label: '查看文章列表', icon: 'icon-new-tag' },
+    ...baseButtons
+  ],
+
+  // 默认按钮
+  default: baseButtons
+}
+
+/**
+ * 根据当前页面返回对应的按钮配置
+ * @returns {Array<{id: string, label: string, icon: string}>} 按钮配置数组
+ */
+const isbuttonsave = () => {
+  try {
+    // 获取当前页面路径名称
+    const currentPath = globalStore.getValue('localpath')?.name || 'default';
+    // 返回对应页面的按钮配置，如果没有则返回默认配置
+    return pageButtons[currentPath] || pageButtons.default;
+  } catch (error) {
+    console.error('获取页面按钮配置失败:', error);
+    return pageButtons.default;
+  }
+}
+
+/**
+ * 切换按钮展开/收起状态
+ * @param {Event} event - 点击事件对象
+ */
+const toggleExpand = (event) => {
+  isExpanded.value = !isExpanded.value
+  // 防止点击弹出的按钮后再次触发主按钮的点击事件
+  event.stopPropagation()
+}
+
+/**
+ * 为每个按钮计算动态样式
+ * @param {number} index - 按钮索引
+ * @returns {Object} CSS样式对象
+ */
+const getButtonStyle = (index) => {
+  // 计算过渡时间，确保显示时从上到下逐渐出现，隐藏时从下到上逐渐消失
+  const showDelay = Math.max(0.1, 0.2 + index * 0.2);
+  const hideDelay = 0.3 + index * 0.2;
+
+  // 根据是否展开返回不同的过渡样式
+  if (isExpanded.value) {
+    return {
+      transition: `all ${showDelay}s ease-in-out`
+    };
+  } else {
+    return {
+      transition: `all ${hideDelay}s ease-in-out`
+    };
+  }
+};
+
+// ==============================
+// 模态框管理模块
+// ==============================
+
+/**
+ * 显示标签模态框
+ */
+const showAttributes = () => {
+  showAttributeModal.value = true
+}
+
+/**
+ * 关闭标签模态框
+ */
+const closeAttributeModal = () => {
+  showAttributeModal.value = false
+}
+
+/**
+ * 显示疯言疯语模态框
+ */
+const showNonsenseModal = () => {
+  nonsenseContent.value = '' // 清空输入框
+  isNonsenseModalVisible.value = true
+
+  ElMessageBox.prompt('请输入您的疯言疯语：', '发表疯言疯语', {
+    confirmButtonText: '保存',
+    cancelButtonText: '取消',
+    inputPlaceholder: '在这里输入您想说的话...',
+    inputType: 'textarea',
+    inputRows: 4,
+    showCancelButton: true
+  }).then(({ value }) => {
+    // 保存疯言疯语
+    saveNonsense(value)
+  }).catch(() => {
+    // 取消操作，静默处理
+  })
+}
+
+// ==============================
+// 功能操作方法模块
+// ==============================
+
+/**
+ * 处理错误响应的工具函数
+ * @param {Error} error - 错误对象
+ * @param {string} defaultMessage - 默认错误消息
+ */
+const handleErrorResponse = (error, defaultMessage = '操作失败') => {
+  console.error('操作失败:', error)
+  ElMessage.error(error.message || defaultMessage)
+}
+
+/**
+ * 根据文章状态获取并跳转文章列表
+ * @param {number} status - 文章状态 0:未发表 1:已发表 2:已删除
+ */
+const getButtonsByStatus = (status) => {
+  globalStore.removeValue('articlestatus')
+  globalStore.setValue('articlestatus', {
+    status: status
+  })
+  
+  // 跳转文章列表页面，添加时间戳参数确保页面刷新
+  try {
+    const timestamp = new Date().getTime();
+    router.push({ path: `/home/aericlestatus`, query: { t: timestamp } })
+  } catch (error) {
+    console.error('页面跳转失败:', error)
+  }
+}
+
+/**
+ * 保存疯言疯语
+ * @param {string} content - 疯言疯语内容
+ */
+const saveNonsense = (content) => {
+  if (!content || content.trim() === '') {
+    ElMessage.warning('内容不能为空')
+    return
+  }
+
+  // 调用服务保存疯言疯语
+  nonsenseService.createNonsense({
+    content: content.trim(),
+    time: new Date(),
+    status: 1
+  }).then(response => {
+    if (response.code === 200) {
+      ElMessage.success('疯言疯语发布成功')
+      // 刷新页面
+      router.push({ path: `/nonsense`});
+    } else {
+      ElMessage.error(response.message || '发布失败')
+    }
+  }).catch(err => handleErrorResponse(err, '发布失败'))
+}
+
+/**
+ * 新建分类
+ */
+const createCategory = () => {
+  ElMessageBox.prompt('请输入分类名称：', '新建分类', {
+    confirmButtonText: '保存',
+    cancelButtonText: '取消',
+    inputPlaceholder: '请输入分类名称',
+    inputType: 'text',
+    showCancelButton: true,
+    // 输入验证
+    inputValidator: (value) => {
+      if (!value || value.trim() === '') {
+        return '分类名称不能为空';
+      }
+      if (value.trim().length < 2) {
+        return '分类名称至少需要2个字符';
+      }
+      return true;
+    }
+  }).then(({ value }) => {
+    // 保存分类
+    saveCategory(value.trim());
+  }).catch(() => {
+    // 取消操作，静默处理
+  });
+};
+
+/**
+ * 保存分类
+ * @param {string} typename - 分类名称
+ */
+const saveCategory = (typename) => {
+  // console.log('保存分类')
+  categoryService.createCategory({
+    typename: typename
+  }).then(response => {
+    if (response.code === 200) {
+      ElMessage.success('分类创建成功');
+      // 刷新页面
+      router.push({ path: `/articlelist`});
+    } else {
+      ElMessage.error(response.message || '创建分类失败');
+    }
+  }).catch(err => handleErrorResponse(err, '创建分类失败'));
+};
+
+/**
+ * 新建标签
+ */
+const createAttribute = async () => {
+  showAttributes()
+  try {
+    const response = await categoryService.getAllCategories();
+    if (response.code === 200) {
+      categories.value = response.data.map(item => ({
+        value: item.typeid,
+        label: item.typename
+      }))
+    }
+  } catch (error) {
+    handleErrorResponse(error, '获取分类失败');
+  } finally {
+    // console.log(categories.value)
+  }
+};
+
+/**
+ * 保存标签
+ * @param {{categoryid: string, name: string}} dto - 标签数据传输对象
+ */
+const saveAttribute = (dto) => {
+  if (!dto.categoryid || !dto.name) {
+    ElMessage.warning('请选择分类和输入标签名称')
+    return
+  }
+  
+  categoryAttributeService.createAttribute({
+    categoryid: Number(dto.categoryid),
+    attributename: dto.name
+  }).then(response => {
+    if (response.code === 200) {
+      closeAttributeModal()
+      ElMessage.success('标签创建成功');
+      // 刷新页面
+      router.push({ path: `/articlelist`});
+    } else {
+      ElMessage.error(response.message || '创建标签失败');
+    }
+  }).catch(err => handleErrorResponse(err, '创建标签失败'));
+};
+
+/**
+ * 删除文章
+ */
+const deleteArticle = () => {
+  const articleId = globalStore.getValue('articleInfo')?.articleid
+  if (!articleId) {
+    ElMessage.warning('缺少文章ID参数')
+    return
+  }
+  
+  // 确认删除
+  ElMessageBox.confirm('确定删除该文章吗？', '删除确认', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    // 调用删除文章接口
+    articleService.deleteArticle(Number(articleId))
+      .then(response => {
+        if (response.code === 200) {
+          ElMessage.success('文章删除成功')
+          // 跳转回文章列表页
+          router.push({ path: '/home' })
+        } else {
+          ElMessage.error(response.message || '删除失败')
+        }
+      })
+      .catch(err => handleErrorResponse(err, '删除失败'))
+  }).catch(() => {
+    // 取消删除，静默处理
+  })
+}
+
+/**
+ * 修改文章
+ */
+const updateArticle = () => {
+  const articleId = globalStore.getValue('articleInfo')
+  if (!articleId) {
+    ElMessage.warning('缺少文章参数')
+    return
+  }
+  
+  // 确认修改
+  ElMessageBox.confirm('确定修改该文章吗？', '修改确认', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    globalStore.setValue('updatearticle', articleId)
+    router.push({ path: '/articlesave' })
+  }).catch(() => {
+    // 取消修改，静默处理
+  })
+}
+
+/**
+ * 登出系统
+ */
+const logout = () => {
+  // 调用登出接口
+  loginService.logout()
+    .then(response => {
+      if (response.code === 200) {
+        ElMessage.success('登出成功')
+        // 清空全局状态
+        globalStore.clearAll()
+        // 清除localStorage中的token
+        localStorage.removeItem('token')
+        // 跳转首页
+        router.push({ path: '/' })
+      } else {
+        ElMessage.error(response.message || '登出失败')
+      }
+    })
+    .catch(err => handleErrorResponse(err, '登出失败'))
+}
+
+/**
+ * 刷新页面
+ */
+const reloadPage = () => {
+  globalStore.clearAll()
+}
+
+// ==============================
+// 事件处理模块
+// ==============================
+
+/**
+ * 处理按钮点击事件
+ * @param {{id: string, label: string, icon: string}} button - 按钮对象
+ */
+const handleButtonClick = (button) => {
+  // console.log('点击了按钮:', button.id, button.label)
+
+  // 使用按钮ID进行处理，更可靠且易于维护
+  switch (button.id) {
+    // 新增操作
+    case 'create-article':
+      router.push({ path: '/articlesave' })
+      break
+    case 'create-category':
+      createCategory()
+      break
+    case 'create-tag':
+      createAttribute()
+      break
+    case 'create-nonsense':
+      showNonsenseModal()
+      break
+
+    // 修改操作
+    case 'edit-article':
+      updateArticle()
+      break
+
+    // 删除操作
+    case 'delete-article':
+      deleteArticle();
+      break
+
+    // 查看操作
+    case 'del-articles':
+      getButtonsByStatus(2)
+      break
+    case 'unpublished-articles':
+      getButtonsByStatus(0)
+      break
+    case 'published-articles':
+      getButtonsByStatus(1)
+      break
+    case 'view-articles':
+      router.push({ path: '/home' })
+      break
+
+    // 系统操作
+    case 'logout':
+      logout();
+      break
+    case 'reload':
+      reloadPage()
+      break
+
+    default:
+      console.warn('未处理的按钮类型:', button.id, button.label)
+      ElMessage.info(`功能 ${button.label} 暂未实现`)
+  }
+
+  // 点击后收起按钮菜单
+  isExpanded.value = false
+}
+
+/**
+ * 点击外部区域收起按钮的处理函数
+ * @param {Event} e - 点击事件对象
+ */
+const handleClickOutside = (e) => {
+  const mainButton = document.querySelector('.main-button')
+  const actionButtons = document.querySelectorAll('.action-button')
+
+  // 检查是否点击了主按钮
+  const clickedMainButton = mainButton && mainButton.contains(e.target)
+
+  // 检查是否点击了任何一个操作按钮
+  const clickedActionButton = Array.from(actionButtons).some(button => button.contains(e.target))
+
+  // 如果点击的不是主按钮和操作按钮，则收起
+  if (!clickedMainButton && !clickedActionButton) {
+    isExpanded.value = false
+  }
+}
+
+// ==============================
+// 组件生命周期
+// ==============================
+
+/**
+ * 组件挂载时添加事件监听
+ */
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+/**
+ * 组件卸载前清理事件监听
+ */
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<style scoped>
+.establish-container {
+  width: 230px;
+  position: fixed;
+  z-index: 1000;
+  bottom: 50px;
+  right: -80px;
+}
+
+/* 主圆形按钮样式 */
+.main-button {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: #409eff;
+  border: none;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  z-index: 1001;
+  margin-left: 80px;
+}
+
+.main-button:hover {
+  background-color: #66b1ff;
+  transform: scale(1.05);
+}
+
+.main-button.active {
+  background-color: #f56c6c;
+  transform: rotate(45deg);
+}
+
+.main-button.active:hover {
+  background-color: #f78989;
+}
+
+.main-button .icon {
+  font-style: normal;
+  transition: transform 0.3s ease;
+}
+
+
+/* 弹出的按钮样式 */
+.action-button {
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 10px 15px;
+  background-color: white;
+  border: 1px solid #dcdfe6;
+  border-radius: 20px;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  margin-bottom: 10px;
+  opacity: 0;
+  /* 从右侧滑入 */
+}
+
+.action-button:hover span {
+  color: red;
+}
+
+.action-button i {
+  margin-right: 8px;
+  font-style: normal;
+  color: #409eff;
+  font-size: 16px;
+}
+
+.action-button span {
+  color: #606266;
+  font-size: 14px;
+}
+
+/* 按钮展开状态样式 */
+.action-button.show {
+  margin-left: 70px;
+  opacity: 1;
+}
+
+/* 按钮默认状态样式 */
+.action-button {
+  margin-left: 150px;
+  opacity: 1;
+}
+
+/* 分类蒙板样式 */
+.category-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  /* 确保在任何情况下都能居中显示 */
+  margin: 0;
+  padding: 0;
+}
+
+.category-modal-content {
+  background-color: white;
+  border-radius: 10px;
+  width: 90%;
+  max-width: 500px;
+  max-height: 80vh;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  /* 确保内容块在父容器中完美居中 */
+}
+
+.category-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.category-modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.category-modal-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #999;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all 0.3s;
+}
+
+.category-modal-close:hover {
+  background-color: #f5f5f5;
+  color: #333;
+}
+
+.category-modal-body {
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 12px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .establish-container {
+    bottom: 20px;
+    right: 20px;
+  }
+
+  .main-button {
+    width: 50px;
+    height: 50px;
+    font-size: 20px;
+    bottom: 0;
+    right: 0;
+  }
+
+  .expanded-buttons.show {
+    width: 130px;
+  }
+
+  .action-button {
+    min-width: 100px;
+    padding: 8px 12px;
+  }
+
+  .action-button span {
+    font-size: 12px;
+  }
+}
+</style>

src/main.js

@@ -1,8 +1,30 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './App.vue'
 import Router from './router/Router'
-import './assets/index.css'
+
+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')

src/router/Router.js

@@ -1,54 +1,133 @@
 import { createWebHistory, createRouter } from 'vue-router'
-import Aericle from '../views/aericle.vue'
-import home from '../views/home.vue'
-import nonsense from '../views/nonsense.vue'
-import messageboard from '../views/messageboard.vue'
-import about from '../views/aboutme.vue'
-import articlecontents from '../views/articlecontents.vue'
+// 导入视图组件
+import ArticleList from '../views/aericlelist.vue'
+import HomePage from '../views/home.vue'
+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 LoginPage from '../views/login.vue'
+import ArticleSavePage from '../views/articlesave.vue'
+
+/**
+ * 路由配置数组
+ * 定义了应用的所有路由路径和对应的组件
+ */
 const routes = [
   {
     path: '/',
-    redirect: '/:type' // 默认跳转到首页
+    redirect: '/home' // 默认跳转到首页，显示所有文章
   },
   {
-    path: '/:type',
-    // 如果type为空则是所有不为空查询相对应属性的文章
-    name: '/home',
-    component: home
+    path: '/home',
+    name: 'home',
+    component: HomePage,
+    meta: { title: '首页' },
+    children: [
+      {
+        path: 'aericleattribute',
+        name: 'homeByAttribute',
+        component: HomePage
+      },
+      {
+        path: 'aericlecategory',
+        name: 'homeByCategory',
+        component: HomePage
+      },
+
+      {
+        path: 'aericletitle',
+        name: 'homeByTitle',
+        component: HomePage
+      },
+      {
+        path: 'aericlestatus',
+        name: 'homeByStatus',
+        component: HomePage
+      }
+      
+    ]
   },
   {
-    path: '/aericle',
-    name: 'Aericle',
-    component: Aericle
+    path: '/articlelist',
+    name: 'articleList',
+    component: ArticleList,
+    meta: {
+      title: '文章目录'
+    }
   },
   {
     path: '/nonsense',
     name: 'nonsense',
-    component: nonsense
-
+    component: NonsensePage,
+    meta: {
+      title: '随笔'
+    }
   },
   {
     path: '/message',
-    name: 'messageboard',
-    component: messageboard
-
+    name: 'messageBoard',
+    component: MessageBoardPage,
+    meta: {
+      title: '留言板'
+    }
   },
   {
     path: '/about',
-    name: 'about',
-    component: about
-
+    name: 'aboutMe',
+    component: AboutMePage,
+    meta: {
+      title: '关于我'
+    }
   },
   {
-    path: '/articlecontents/:url',
-    name: 'articlecontents',
-    component: articlecontents
+    path: '/article',
+    name: 'articleContent',
+    component: ArticleContentPage,
+    meta: {
+      title: '文章详情'
+    }
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: LoginPage,
+    meta: {
+      title: '登录'
+    }
+  },
+  {
+    path: '/articlesave',
+    name: 'articlesave',
+    component: ArticleSavePage,
+    meta: {
+      title: '保存文章'
+    }
   }
 ]
 
+/**
+ * 创建路由实例
+ */
 const router = createRouter({
   history: createWebHistory(),
   routes,
+  scrollBehavior() {
+    // 路由切换时滚动到页面顶部
+    return { top: 0 }
+  }
+})
+
+/**
+ * 全局路由守卫 - 处理页面标题
+ */
+router.beforeEach((to, from, next) => {
+  if (to.meta.title) {
+    document.title = to.meta.title + ' - 个人博客'
+  } else {
+    document.title = '个人博客'
+  }
+  next()
 })
 
 export default router;

src/services/apiService.js

@@ -0,0 +1,80 @@
+// 基础API服务
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+
+// 创建axios实例
+const api = axios.create({
+  baseURL: '/api', // API基础URL，使用相对路径，通过Vite代理转发
+  timeout: 10000, // 请求超时时间
+  withCredentials: true // 允许跨域请求携带凭证（如cookies）
+})
+
+// 请求拦截器
+api.interceptors.request.use(
+  config => {
+    // 从localStorage获取token
+    let token = localStorage.getItem('token')
+    if (token) {
+      // 确保不重复添加Bearer前缀
+      if (!token.startsWith('Bearer ')) {
+        config.headers['Authorization'] = `Bearer ${token}`
+      } else {
+        config.headers['Authorization'] = token
+      }
+    }
+    return config
+  },
+  error => {
+    // 请求错误处理
+    console.error('请求错误:', error)
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+api.interceptors.response.use(
+  response => {
+    // 直接返回响应数据
+    return response.data
+  },
+  error => {
+    // 错误处理
+    console.error('响应错误:', error)
+    
+    let message = '请求失败'
+    
+    if (error.response) {
+      // 服务器响应了但状态码不是2xx
+      switch (error.response.status) {
+        case 401:
+          message = '未授权，请重新登录'
+          // 可以在这里处理登出逻辑
+          localStorage.removeItem('token')
+          // 跳转到登录页
+          window.location.href = '/login'
+          break
+        case 403:
+          message = '拒绝访问'
+          break
+        case 404:
+          message = '请求资源不存在'
+          break
+        case 500:
+          message = '服务器错误'
+          break
+        default:
+          message = error.response.data?.message || message
+      }
+    } else if (error.request) {
+      // 请求已发出但没有收到响应
+      message = '网络错误，请检查网络连接'
+    }
+    
+    // 使用Element Plus的消息组件显示错误信息
+    ElMessage.error(message)
+    
+    return Promise.reject(error)
+  }
+)
+
+export default api

src/services/articleService.js

@@ -0,0 +1,97 @@
+// 文章相关API服务
+import api from './apiService'
+
+/**
+ * 文章服务类
+ */
+class ArticleService {
+  /**
+   * 分页查询文章列表
+   * @param {import('../types').PaginationParams} params - 分页查询参数
+    * @param status 文章状态（0：未发表 1：已发表 2：已删除）
+    * @param page 页码，从0开始（可选，默认为0）
+    * @param size 每页大小（可选，默认为10，最大为100）
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Article[]>>}
+   */
+  getPagedArticles(params = {}) {
+    return api.get(`/articles/status/page?title=${params.title || ''}&categoryid=${params.categoryid || 0}&attributeid=${params.attributeid || 0}&status=${params.status || 1}&page=${params.page || 0}&size=${params.size || 10}`)
+  }
+/**
+   * 获取已发布文章列表
+   * @param {import('../types').PaginationParams} params - 查询参数
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Article[]>>}
+   */
+  getAllArticles(params = {}) {
+    return api.get('/articles/published', { params })
+  }
+/**
+   * 获取所有文章列表（包含已删除）
+   * @param {import('../types').PaginationParams} params - 查询参数
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Article[]>>}
+   */
+  getAllArticlesWithDeleted(params = {}) {
+    return api.get('/articles', { params })
+  }
+/**
+   * 根据属性ID获取文章列表
+   * @param {number} attributeid - 属性ID
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Article[]>>}
+   */
+  getArticlesByAttributeId(attributeid) {
+    return api.get(`/articles/attribute/${attributeid}`)
+  }
+
+/**
+   * 获取热门文章
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Article[]>>}
+   */
+  getPopularArticles() {
+    return api.get('/articles/popular')
+  }
+
+  /**
+   * 创建文章
+   * @param {import('../types').ArticleDto} articleData - 文章数据
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Article>>}
+   */
+  createArticle(articleData) {
+    return api.post('/articles', articleData)
+  }
+
+  /**
+   * 更新文章
+   * @param {number} articleid - 文章ID
+   * @param {import('../types').ArticleDto} articleData - 文章数据
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Article>>}
+   */
+  updateArticle(articleid, articleData) {
+    return api.put(`/articles/${articleid}`, articleData)
+  }
+
+  /**
+   * 删除文章
+   * @param {number} articleid - 文章ID
+   * @returns {Promise<import('../types').ApiResponse<boolean>>}
+   */
+  deleteArticle(articleid) {
+    return api.delete(`/articles/${articleid}`)
+  }
+
+/**
+   * 增加文章浏览量
+   * @param {number} articleid - 文章ID
+   * @returns {Promise<import('../types').ApiResponse<boolean>>}
+   */
+  incrementArticleViews(articleid) {
+    return api.post(`/articles/view/${articleid}`)
+  }
+
+
+}
+
+// 创建并导出服务实例
+const articleService = new ArticleService()
+export default articleService
+
+// 导出服务类供特殊场景使用
+export { ArticleService }

src/services/categoryAttributeService.js

@@ -0,0 +1,49 @@
+// 分类属性相关API服务
+import api from './apiService'
+
+/**
+ * 分类属性服务类
+ */
+class CategoryAttributeService {
+  /**
+   * 获取所有分类属性
+   * @returns {Promise<import('../types').ApiResponse<import('../types').CategoryAttribute[]>>}
+   */
+  getAllAttributes() {
+    return api.get('/category-attributes')
+  }
+
+  /**
+   * 根据ID获取分类属性
+   * @param {number} attributeid - 属性ID  
+   * @returns {Promise<import('../types').ApiResponse<import('../types').CategoryAttribute>>}
+   */
+  getAttributeById(attributeid) {
+    return api.get(`/category-attributes/${attributeid}`)
+  }
+
+  /**
+   * 根据分类ID获取属性列表
+   * @param {number} categoryid - 分类ID
+   * @returns {Promise<import('../types').ApiResponse<import('../types').CategoryAttribute[]>>}
+   */
+  getAttributesByCategory(categoryid) {
+    return api.get(`/category-attributes/category/${categoryid}`)
+  }
+
+  /**
+   * 创建分类属性
+   * @param {import('../types').CategoryAttributeDto} attributeData - 属性数据
+   * @returns {Promise<import('../types').ApiResponse<import('../types').CategoryAttribute>>}
+   */
+  createAttribute(attributeData) {
+    return api.post('/category-attributes', attributeData)
+  }
+}
+
+// 创建并导出服务实例
+const categoryAttributeService = new CategoryAttributeService()
+export default categoryAttributeService
+
+// 导出服务类供特殊场景使用
+export { CategoryAttributeService }

src/services/categoryService.js

@@ -0,0 +1,21 @@
+import api from './apiService'
+
+/**
+ * 分类服务
+ */
+class CategoryService {
+  /**
+   * 获取所有分类
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Category[]>>}
+   */
+  getAllCategories() {
+    return api.get('/categories')
+  }
+}
+
+// 创建并导出服务实例
+const categoryService = new CategoryService()
+export default categoryService
+
+// 导出服务类供特殊场景使用
+export { CategoryService }

src/services/index.js

@@ -0,0 +1,19 @@
+// 导出所有服务
+import articleService from './articleService'
+import categoryService from './categoryService'
+import categoryAttributeService from './categoryAttributeService'
+import loginService from './loginService'
+import messageService from './messageService'
+import nonsenseService from './nonsenseService'
+
+
+
+// 导出服务类供特殊场景使用
+export {
+  articleService,
+  categoryService,
+  categoryAttributeService,
+  loginService,
+  messageService,
+  nonsenseService
+}

src/services/loginService.js

@@ -0,0 +1,24 @@
+// 登录相关API服务
+import api from "./apiService";
+
+/**
+ * 登录服务类
+ */
+class LoginService {
+  /**
+   * 用户登录
+   * @param {import('../types').LoginDto} loginData - 登录数据
+   * @returns {Promise<import('../types').ApiResponse<import('../types').User>>}
+   */
+  login(loginData) {
+    return api.post("/auth/login", loginData);
+  }
+
+  /**
+   * 登出
+   */
+  logout() {
+    return api.post("/auth/logout");
+  }
+}
+export default new LoginService();

src/services/messageService.js

@@ -0,0 +1,77 @@
+// 留言相关API服务
+import apiService from './apiService'
+
+/**
+ * 留言服务类
+ */
+class MessageService {
+  /**
+   * 获取留言数量
+   * @param {number} articleid - 文章ID
+   * @returns {Promise<import('../types').ApiResponse<number>>}
+   */
+  getMessageCountByArticleId(articleid) {
+    return apiService.get(`/messages/count?articleid=${articleid}`)
+  }
+
+  /**
+   * 获取分页留言
+   * @param {number} articleid - 文章ID
+   * @param {number} pagenum - 页码
+   * @param {number} pagesize - 每页数量
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Message[]>>}
+   */
+  getMessagesByPage(articleid, pagenum, pagesize) {
+    // 如果文章ID不存在，查询所有留言
+    if (!articleid) {
+      return apiService.get(`/messages/page?pageNum=${pagenum}&pageSize=${pagesize}`)
+    }
+    return apiService.get(`/messages/page?articleid=${articleid}&pageNum=${pagenum}&pageSize=${pagesize}`)
+  }
+  /**
+   * 根据文章ID获取留言
+   * @param {number} articleid - 文章ID
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Message[]>>}
+   */
+  getMessagesByArticleId(articleid) {
+    return apiService.get(`/messages/article/${articleid}`)
+  }
+
+  /**
+   * 获取所有留言
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Message[]>>}
+   */
+  getAllMessages() {
+    return apiService.get('/messages')
+  }
+
+  /**
+   * 创建留言
+   * @param {import('../types').MessageDto} messageData - 留言数据
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Message>>}
+   */
+  saveMessage(messageData) {
+    return apiService.post('/messages', messageData)
+  }
+
+  /**
+   * 删除留言
+   * @param {number} messageid - 留言ID
+   * @returns {Promise<import('../types').ApiResponse<boolean>>}
+   */
+  deleteMessage(messageid) {
+    return apiService.delete(`/messages/${messageid}`)
+  }
+  
+  /**
+   * 点赞留言
+   * @param {number} messageid - 留言ID
+   * @returns {Promise<import('../types').ApiResponse<boolean>>}
+   */
+  likeMessage(messageid) {
+    return apiService.post(`/messages/${messageid}/like`)
+  }
+}
+
+// 导出留言服务实例
+export default new MessageService()

src/services/nonsenseService.js

@@ -0,0 +1,45 @@
+// 疯言疯语相关API服务
+import apiService from './apiService'
+
+class NonsenseService {
+  /**
+   * 获取所有疯言疯语内容
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Nonsense[]>>}
+   */
+  getAllNonsense() {
+    return apiService.get('/nonsense')
+  }
+  /**
+   * 根据状态获取疯言疯语内容
+   * @param {number} status - 状态值(1:已发表, 0:草稿)
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Nonsense[]>>}
+   */
+  getNonsenseByStatus(status){
+    return apiService.get(`/nonsense/status/${status}`)
+  }
+  /**
+   * 保存疯言疯语内容
+   * @param {import('../types').Nonsense} nonsense - 疯言疯语内容对象
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Nonsense>>}
+   */
+  createNonsense(nonsense){
+    return apiService.post('/nonsense', nonsense)
+  }
+  /**
+   * 删除疯言疯语内容
+   * @param {number} id - 疯言疯语内容ID
+   * @returns {Promise<import('../types').ApiResponse<boolean>>}
+   */
+  deleteNonsense(id){
+    return apiService.delete(`/nonsense/${id}`)
+  }
+  /**
+   * 更新疯言疯语内容
+   * @param {import('../types').Nonsense} nonsense - 疯言疯语内容对象
+   * @returns {Promise<import('../types').ApiResponse<import('../types').Nonsense>>}
+   */
+  updateNonsense(nonsense){
+    return apiService.put('/nonsense', nonsense)
+  }
+}
+export default new NonsenseService()

src/store/globalStore.js

@@ -0,0 +1,189 @@
+import Login from '@/views/login.vue'
+import { defineStore } from 'pinia'
+
+/**
+ * 全局状态管理store
+ * 提供全局的传值和获取值的功能
+ * 任何页面都可以调用和获取其中的值
+ * 添加了localStorage持久化功能，确保刷新页面后数据不会丢失
+ */
+export const useGlobalStore = defineStore('global', {
+  // 状态定义
+  state: () => {
+    // 从localStorage读取持久化的数据
+    const savedGlobalData = localStorage.getItem('globalStoreData')
+    const initialGlobalData = savedGlobalData ? JSON.parse(savedGlobalData) : {}
+    
+    // 从localStorage读取特定状态的持久化数据
+    const savedSpecificData = localStorage.getItem('globalStoreSpecificData')
+    const initialSpecificData = savedSpecificData ? JSON.parse(savedSpecificData) : {}
+    
+    return {
+      // 全局数据对象，存储所有需要共享的数据
+      globalData: initialGlobalData,
+      // 特定状态属性，从localStorage读取初始值
+      username: initialSpecificData.username || null,
+      Login: initialSpecificData.Login || false,
+      notifications: initialSpecificData.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
+      // 持久化到localStorage
+      this._persistData()
+    },
+    
+    /**
+     * 将数据持久化到localStorage的内部方法
+     * @private
+     */
+    _persistData() {
+      try {
+        // 持久化globalData
+        localStorage.setItem('globalStoreData', JSON.stringify(this.globalData))
+        // 持久化特定状态属性
+        localStorage.setItem('globalStoreSpecificData', JSON.stringify({
+          username: this.username,
+          Login: this.Login,
+          notifications: this.notifications
+        }))
+      } catch (error) {
+        console.error('Failed to persist data to localStorage:', error)
+      }
+    },
+
+    /**
+     * 批量设置多个键值对
+     * @param {Object} data - 包含多个键值对的对象
+     */
+    setMultipleValues(data) {
+      if (typeof data === 'object' && data !== null) {
+        Object.assign(this.globalData, data)
+        // 持久化到localStorage
+        this._persistData()
+      }
+    },
+
+    /**
+     * 删除指定的全局数据
+     * @param {string} key - 要删除的键名
+     */
+    removeValue(key) {
+      if (Object.prototype.hasOwnProperty.call(this.globalData, key)) {
+        delete this.globalData[key]
+        // 持久化到localStorage
+        this._persistData()
+      }
+    },
+
+    /**
+     * 清空所有全局数据
+     */
+    clearAll() {
+      this.globalData = {}
+      this.username = null
+      this.Login = false
+      this.notifications = []
+      // 清除localStorage中的数据
+      try {
+        localStorage.removeItem('globalStoreData')
+        localStorage.removeItem('globalStoreSpecificData')
+      } catch (error) {
+        console.error('Failed to clear data from localStorage:', error)
+      }
+    },
+
+    /**
+     * 设置用户信息
+     * @param {Object} userInfo - 用户信息对象
+     */
+    setUsername(username) {
+      this.username = username
+      // 持久化到localStorage
+      this._persistData()
+    },
+
+    /**
+     * 设置加载状态
+     * @param {boolean} status - 加载状态
+     */
+    setLoading(status) {
+      this.loading = status
+      // 持久化到localStorage
+      this._persistData()
+    },
+
+    /**
+     * 添加通知
+     * @param {Object} notification - 通知对象
+     */
+    addNotification(notification) {
+      this.notifications.push({
+        id: Date.now(),
+        ...notification
+      })
+      // 持久化到localStorage
+      this._persistData()
+    },
+
+    /**
+     * 移除通知
+     * @param {number} id - 通知ID
+     */
+    removeNotification(id) {
+      const index = this.notifications.findIndex(notification => notification.id === id)
+      if (index !== -1) {
+        this.notifications.splice(index, 1)
+        // 持久化到localStorage
+        this._persistData()
+      }
+    },
+    
+    /**
+     * 设置登录状态
+     * @param {boolean} status - 登录状态
+     */
+    setLoginStatus(status) {
+      this.Login = status
+      // 持久化到localStorage
+      this._persistData()
+    }
+  }
+})

src/store/useExample.md

@@ -0,0 +1,208 @@
+# Pinia 全局状态管理使用示例
+
+## 1. 基础使用方法
+
+### 在任意组件中使用全局状态
+
+```vue
+<template>
+  <div>
+    <h2>全局状态管理示例</h2>
+    
+    <!-- 显示全局数据 -->
+    <div v-if="globalStore.hasValue('exampleData')">
+      <p>从全局store获取的数据: {{ globalStore.getValue('exampleData') }}</p>
+    </div>
+    <div v-else>
+      <p>全局数据尚未设置</p>
+    </div>
+    
+    <!-- 设置全局数据 -->
+    <el-input v-model="inputValue" placeholder="输入要存储的全局数据" />
+    <el-button @click="setGlobalData">设置全局数据</el-button>
+    <el-button @click="checkGlobalData">检查是否存在</el-button>
+    <el-button @click="clearGlobalData" type="danger">清空全局数据</el-button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useGlobalStore } from '@/store/globalStore'
+
+// 获取全局store实例
+const globalStore = useGlobalStore()
+const inputValue = ref('')
+
+// 设置全局数据
+const setGlobalData = () => {
+  globalStore.setValue('exampleData', inputValue.value)
+  ElMessage.success('数据已保存到全局状态')
+}
+
+// 检查数据是否存在
+const checkGlobalData = () => {
+  if (globalStore.hasValue('exampleData')) {
+    ElMessage.info(`数据存在: ${globalStore.getValue('exampleData')}`)
+  } else {
+    ElMessage.warning('数据不存在')
+  }
+}
+
+// 清空全局数据
+const clearGlobalData = () => {
+  globalStore.removeValue('exampleData')
+  ElMessage.success('数据已从全局状态中移除')
+}
+</script>
+```
+
+## 2. 页面间数据传递示例
+
+### 页面A - 设置数据
+
+```vue
+<script setup>
+import { useGlobalStore } from '@/store/globalStore'
+import { useRouter } from 'vue-router'
+
+const globalStore = useGlobalStore()
+const router = useRouter()
+
+const navigateToPageB = () => {
+  // 存储页面间需要传递的数据
+  globalStore.setValue('sharedData', {
+    id: 123,
+    name: '测试数据',
+    timestamp: Date.now()
+  })
+  
+  // 跳转到页面B
+  router.push('/page-b')
+}
+</script>
+```
+
+### 页面B - 获取数据
+
+```vue
+<script setup>
+import { onMounted } from 'vue'
+import { useGlobalStore } from '@/store/globalStore'
+
+const globalStore = useGlobalStore()
+
+onMounted(() => {
+  // 检查并获取从页面A传递过来的数据
+  if (globalStore.hasValue('sharedData')) {
+    const data = globalStore.getValue('sharedData')
+    console.log('从页面A接收的数据:', data)
+    // 使用接收到的数据进行操作
+  }
+})
+</script>
+```
+
+## 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
+<template>
+  <div>
+    <div v-if="globalStore.user">
+      <h3>欢迎回来，{{ globalStore.user.username }}</h3>
+      <el-button @click="logout">登出</el-button>
+    </div>
+    <div v-else>
+      <h3>请登录</h3>
+      <!-- 登录表单 -->
+    </div>
+    
+    <!-- 加载状态指示器 -->
+    <el-loading v-loading="globalStore.loading" :text="'加载中...'">
+      <!-- 内容区域 -->
+    </el-loading>
+  </div>
+</template>
+
+<script setup>
+import { useGlobalStore } from '@/store/globalStore'
+
+const globalStore = useGlobalStore()
+
+const login = async (credentials) => {
+  try {
+    // 设置加载状态
+globalStore.setLoading(true)
+    
+    // 模拟登录请求
+    const response = await authService.login(credentials)
+    
+    // 保存用户信息到全局状态
+globalStore.setUser(response.user)
+    
+    // 添加登录成功通知
+globalStore.addNotification({
+      type: 'success',
+      message: '登录成功！'
+    })
+  } catch (error) {
+    console.error('登录失败:', error)
+  } finally {
+    // 无论成功失败都清除加载状态
+globalStore.setLoading(false)
+  }
+}
+
+const logout = () => {
+  // 清除用户信息
+globalStore.setUser(null)
+  
+  // 添加登出通知
+globalStore.addNotification({
+    type: 'info',
+    message: '您已成功登出'
+  })
+}
+</script>
+```
+
+## 5. 注意事项
+
+1. **数据持久化**：默认情况下，Pinia状态只在内存中存在，页面刷新后会丢失。如果需要持久化，可以考虑：
+   - 使用localStorage/sessionStorage结合Pinia插件
+   - 使用Cookie存储关键信息
+
+2. **性能考虑**：避免在全局状态中存储过大的数据，这可能会影响应用性能
+
+3. **类型安全**：如果使用TypeScript，可以为store添加类型定义
+
+4. **模块化**：随着应用复杂度增加，可以考虑将不同功能的数据分开存储到多个store中
+
+5. **调试**：Pinia提供了良好的开发工具支持，可以通过Vue Devtools进行调试

src/styles/MainLayout.css

@@ -1,18 +1,28 @@
+/* 汉仪唐韵字体声明 */
+@font-face {
+  font-family: 'HanTang';
+  src: url('/fonts/HanTang.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 :root {
+  /* 全局字体设置 */
+  --main-font-family: 'HanTang', sans-serif;
   /* 页面通用间距和圆角 */
-  --main-padding: 100px 10%;
+  --main-padding: 8px 10%;
   /* 内容区内边距 */
   --main-radius: 10px;
   /* 内容区圆角 */
 
   /* 首页 hero 区域高度和间距 */
-  --hero-height: 600px;
+  --hero-height: 100px;
   /* hero 默认高度 */
-  --hero-height-small: 200px;
+  --hero-height-small: 100px;
   /* hero 收缩后高度 */
-  --hero-margin-top: 5%;
-  /* hero 顶部外边距 */
-
+  --hero-margin-top-small: 6%;
+  /* hero 收缩后顶部外边距 */
   /* 标题样式 */
   --title-font-size: 3.5rem;
   /* hero 主标题字号 */
@@ -22,7 +32,7 @@
   /* 内容区宽度和外边距 */
   --content-width: 80%;
   /* 主内容区宽度 */
-  --content-margin: 0 5%;
+  --content-margin: 0 5% 0 5%;
   /* 主内容区左右外边距 */
 
   /* 左侧状态栏宽度 */
@@ -30,7 +40,7 @@
   /* 左侧模块宽度 */
 
   /* 疯言疯语标题区样式 */
-  --nonsense-title-width: 76.5%;
+  --nonsense-title-width: 77.1%;
   /* 疯言疯语标题区宽度 */
   --nonsense-title-padding: 20px;
   /* 疯言疯语标题区内边距 */
@@ -40,7 +50,7 @@
   /* 疯言疯语标题区下边距 */
   --nonsense-titleconst-padding: 1.5rem;
   /* 疯言疯语标题内容区内边距 */
-  --nonsenset-margin-top: 130px;
+  --nonsenset-margin-top: 150px;
   /* 疯言疯语内容区顶部外边距 */
 
   /* 分页背景色 */
@@ -48,11 +58,11 @@
   /* 分页区背景色 */
 
   /* 导航栏样式 */
-  --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);
+  --nav-bg: rgba(145, 196, 238, 0.95);
   /* 导航栏背景色 */
   --nav-bg-transparent: transparent;
   /* 导航栏透明背景 */
@@ -60,18 +70,25 @@
   /* 导航栏隐藏时背景 */
   --nav-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   /* 导航栏阴影 */
-
+  --nav-is-active: rgba(255, 0, 255, 0.75);
+  /* 导航栏激活项字体颜色 */
   /* 字体颜色和菜单样式 */
-  --font-color-title: #32325d;
+  --font-color-title: #AF7AC5;
   /* 标题字体颜色 */
   --font-size-menu: 20px;
   /* 菜单字体大小 */
   --font-weight-menu: bold;
   /* 菜单字体加粗 */
+  --body-background-img: url('../img/bg.jpg');
+  /* 页面背景图片 */
 }
 
 /* 页面背景设置 */
 body {
+  font-family: var(--main-font-family);
+  /* 设置全局字体 */
+  background-image: var(--body-background-img);
+  /* 背景图片 */
   background-size: 120% 120%;
   /* 背景图片缩放比例 */
   background-repeat: no-repeat;
@@ -81,7 +98,17 @@ body {
   background-attachment: fixed;
   /* 背景固定 */
 }
-
+/* a 标签样式 */
+a {
+  font-family: var(--main-font-family);
+  text-decoration: none;
+  color: inherit;
+  cursor: default;
+  display: inline-block;
+}
+p, li ,ul,ol,dl,dt,dd,span,strong,em,code,pre,input,textarea,select,option,label,th,td,tr,tbody,td,th,div{
+  font-family: var(--main-font-family);
+}
 /* 标题通用样式 */
 h1,
 h2,
@@ -89,10 +116,9 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: inherit;
+  font-family: var(--main-font-family);
   font-weight: 400;
   line-height: 1.5;
-  margin-bottom: .5rem;
   color: var(--font-color-title);
 }
 
@@ -102,6 +128,90 @@ p {
   font-weight: 300;
   line-height: 1.7;
 }
+/* 编辑按钮样式 */
+.edit-button{
+  cursor: pointer;
+  transition: color 0.3s ease;
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.edit-button:hover {
+  color: rgb(247, 243, 2);
+  background-color: rgba(231, 205, 60, 0.3);
+}
+/* 删除按钮样式 */
+.delete-button {
+    cursor: pointer;
+    transition: color 0.3s ease;
+    padding: 4px 8px;
+    border-radius: 4px;
+    display: inline-block;
+}
+
+.delete-button:hover {
+    color: rgb(231, 76, 60);
+    background-color: rgba(231, 76, 60, 0.1);
+}
+/* 文章span 样式 */
+
+/* 发布日期样式 */
+.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-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;
+}
 
 /* 顶部导航栏样式 */
 .elrow-top {
@@ -111,13 +221,29 @@ 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;
   align-items: center;
 }
 
+/* Logo文本样式 - 清疯不颠 */
+.logo-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-family: 'HanTang', sans-serif;
+  font-size: 1rem;
+  font-weight: bold;
+  background: linear-gradient(94.75deg, rgb(60, 172, 247) 0%, rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%, rgb(247, 201, 102) 83.76%, rgb(172, 143, 100) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
 /* 导航栏透明状态 */
 .elrow-top.transparent {
   background-color: var(--nav-bg-transparent);
@@ -139,8 +265,10 @@ p {
 }
 
 .grid-content.ep-bg-purple-dark {
+  display: flex;
   align-items: center;
-
+  height: 60px;
+  width: 100%;
 }
 
 /* 菜单样式 */
@@ -149,19 +277,28 @@ p {
   background: transparent;
   font-weight: var(--font-weight-menu);
   font-size: var(--font-size-menu);
-  left: 18%;
+  /* left: 18%; */
   border-bottom: 0;
 }
 
 .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;
 }
 
 /* 去除菜单项悬停和激活时的背景色 */
@@ -180,6 +317,12 @@ p {
   border-right: 0;
 }
 
+/* 内容通用背景区样式 */
+#allstyle {
+  background-color: rgba(255, 255, 255, 0.85);
+  border-radius: 10px;
+}
+
 /* 内容区样式 */
 #content-section {
   min-height: 100vh;
@@ -203,39 +346,65 @@ p {
   margin: var(--content-margin);
 }
 
+.RouterViewpage.forbidwidth {
+  width: 100%;
+}
 /* 分页区样式 */
 .Pagination {
-  align-self: center;
-  background-color: var(--pagination-bg);
+  margin-bottom: 30px;
+}
+.Pagination .el-pagination {
+  /* 水平垂直居中 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-
 /* 左侧状态栏样式 */
-.leftmodluepage {
+.leftmodluecontainer {
   width: var(--leftmodlue-width);
 }
 
 /* 首页 hero 区域样式 */
 .hero {
   height: var(--hero-height);
-  margin-top: var(--hero-margin-top);
+  margin: var(--hero-margin);
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: white;
-  transition: height 0.3s ease;
+  transition: all 0.3s ease;
+  position: sticky;
+  top: 0;
+  z-index: 999;
 }
 
 /* hero 收缩状态 */
-.hero.newhero {
+.hero.small-hero {
   height: var(--hero-height-small);
+  margin-top: var(--hero-margin-top-small);
+  /* 去除 hero 收缩状态下的position */
+  position: static;
+}
+
+/* 打字机效果 */
+.typewriter {
+  white-space: pre;
+  min-height: 2.5em;
+  font-size: var(--title-font-size, 2rem);
+  /* 水平居中 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@keyframes blink {
+  50% {
+    border-color: transparent;
+  }
 }
 
 /* hero 主标题样式 */
-.hero h1 {
-  font-size: var(--title-font-size);
-  margin-bottom: var(--title-margin-bottom);
-}
 
 /* hero 副标题样式 */
 .hero p {
@@ -282,6 +451,10 @@ p {
     --content-margin: 0;
     --leftmodlue-width: 100%;
     --nonsense-title-width: 95%;
+    --nonsense-title-margin-bottom: 15px;
+    --nav-padding-small: 0 8px;
+    --nonsenset-margin-top: 10px;
+    --body-background-img: url(../img/bg.jpg);
   }
 
   .elrow-top {
@@ -315,6 +488,7 @@ p {
     /* 水平居中 */
     align-items: center;
     /* 垂直居中 */
+   
   }
 
   .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item,
@@ -330,12 +504,33 @@ p {
 
   .RouterViewpage {
     width: 100%;
-    margin: 5% 0 0 0;
+    margin-top: 11%;
   }
 
   .nonsensetitle {
-    width: var(--nonsense-title-width);
+    position: relative;
+    margin-top: 10%;
     padding: 10px;
     font-size: 1rem;
   }
-}
+}
+/* 移动端适配：屏幕宽度小于820px时生效 */
+@media (max-width: 820px) {
+  :root {
+    --nav-padding: 0;
+    --hero-height:300px;
+  }
+  .RouterViewpage {
+    height: auto;
+  }
+  .hero {
+    margin-top: 50%;
+  }
+  .el-col-14 {
+    flex: 0 0 0;
+    max-width: 100%;
+  }
+  .elrow-top {
+
+  }
+}

src/types/index.ts

@@ -0,0 +1,168 @@
+// 项目中使用的类型定义
+
+/**
+ * 文章类型接口
+ */
+export interface Article {
+  articleid: number
+  title: string
+  content: string
+  attributeid: Number
+  categoryName: string
+  img?: string
+  createdAt: string
+  updatedAt: string
+  viewCount?: number
+  likes?: number
+  commentCount?: number
+  status?: number
+  markdownscontent: string
+}
+
+/**
+ * 文章DTO接口
+ */
+export interface ArticleDto {
+  id?: number
+  title: string
+  content: string
+  attributeid: number
+  img?: string
+  status?: number
+  viewCount?: number
+  likes?: number
+  markdownscontent: string
+
+}
+
+/**
+ * 留言类型接口
+ */
+export interface Message {
+  messageid: number
+  content: string
+  nickname: string
+  email: string
+  articleid?: number
+  parentid?: number
+  createdAt: string
+  replyid?: number
+  likes?: number
+  messageimg?: string
+}
+
+/**
+ * 留言DTO接口
+ */
+export interface MessageDto {
+  messageid?: number
+  nickname?: string
+  email?: string
+  content?: string
+  createdAt?: string
+  parentid?: number
+  replyid?: number
+  articleid?: number
+  messageimg?: string
+}
+
+/**
+ * 分类类型接口
+ */
+export interface Category {
+  Categoryid: number
+  typename: string
+  description?: string
+  createdAt?: string
+  updatedAt?: string
+  articleCount?: number
+}
+
+/**
+ * 分类DTO接口
+ */
+export interface CategoryDto {
+  typename: string
+  description?: string
+}
+
+
+/**
+ * 分类属性接口
+ */
+export interface CategoryAttribute {
+  map(arg0: (item: any) => any): unknown
+  attributeid: number
+  categoryid: number
+  attributename: string
+}
+
+/**
+ * 分类属性DTO接口
+ */
+export interface CategoryAttributeDto {
+  categoryid: number
+  attributename: string
+}
+
+/**
+ * 用户信息接口
+ */
+export interface User {
+  id?: number
+  username?: string
+  password?: string
+  email?: string
+  phone?: string
+  role?: number
+  createTime?: string
+  avatar?: string
+  token?: string
+}
+
+/**
+ * 用户DTO接口
+ */
+export interface UserDto {
+  username: string
+  password: string
+  email: string
+  phone: string
+  role?: number
+}
+/**
+ * 疯言疯语类型接口
+ */
+export interface Nonsense {
+  nonsenseid: number
+  content: string
+  status?: number
+  time: string
+}
+/**
+ * 疯言疯语DTO接口
+ */
+export interface NonsenseDto {
+  content: string
+  status?: number
+  time?: string
+}
+/**
+ * API响应接口
+ */
+export interface ApiResponse<T = any> {
+  success: boolean
+  code: number
+  message?: string
+  data?: T
+  total?: number
+}
+
+/**
+ * 分页参数接口
+ */
+export interface PaginationParams {
+  pagenum?: number
+  pagesize?: number
+  status?: number
+}

src/utils/dateUtils.js

@@ -0,0 +1,121 @@
+// 日期格式化工具函数
+
+/**
+ * 格式化日期为指定格式，默认去掉秒，且三天内显示为今天、昨天、前天
+ * @param {string|Date} date - 日期对象或日期字符串
+ * @param {string} format - 格式化模板，默认 'YYYY-MM-DD HH:mm'
+ * @returns {string} 格式化后的日期字符串
+ */
+export const formatDate = (date, format = 'YYYY-MM-DD HH:mm') => {
+  if (!date) return ''
+  
+  // 如果是字符串，转换为日期对象
+  const dateObj = typeof date === 'string' ? new Date(date) : date
+  
+  // 检查日期对象是否有效
+  if (isNaN(dateObj.getTime())) return ''
+  
+  // 检查是否在三天内，如果是则返回相对时间
+  const relativeTime = getRelativeDay(dateObj)
+  if (relativeTime) {
+    const hours = String(dateObj.getHours()).padStart(2, '0')
+    const minutes = String(dateObj.getMinutes()).padStart(2, '0')
+    return `${relativeTime} ${hours}:${minutes}`
+  }
+  
+  const year = dateObj.getFullYear()
+  const month = String(dateObj.getMonth() + 1).padStart(2, '0')
+  const day = String(dateObj.getDate()).padStart(2, '0')
+  const hours = String(dateObj.getHours()).padStart(2, '0')
+  const minutes = String(dateObj.getMinutes()).padStart(2, '0')
+  
+  // 替换模板中的日期部分
+  return format
+    .replace('YYYY', year)
+    .replace('MM', month)
+    .replace('DD', day)
+    .replace('HH', hours)
+    .replace('mm', minutes)
+}
+
+/**
+ * 获取相对天数（今天、昨天、前天）
+ * @param {Date} dateObj - 日期对象
+ * @returns {string|null} 相对天数或null
+ */
+export const getRelativeDay = (dateObj) => {
+  const now = new Date()
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  const targetDate = new Date(dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate())
+  
+  // 计算天数差
+  const diffTime = today - targetDate
+  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
+  
+  if (diffDays === 0) {
+    return '今天'
+  } else if (diffDays === 1) {
+    return '昨天'
+  } else if (diffDays === 2) {
+    return '前天'
+  }
+  
+  return null
+}
+
+/**
+ * 计算时间差，返回相对时间
+ * @param {string|Date} date - 日期对象或日期字符串
+ * @returns {string} 相对时间字符串
+ */
+export const formatRelativeTime = (date) => {
+  if (!date) return ''
+  
+  const dateObj = typeof date === 'string' ? new Date(date) : date
+  const now = new Date()
+  const diff = now - dateObj
+  
+  // 转换为秒
+  const seconds = Math.floor(diff / 1000)
+  
+  if (seconds < 60) {
+    return `${seconds}秒前`
+  }
+  
+  // 转换为分钟
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) {
+    return `${minutes}分钟前`
+  }
+  
+  // 转换为小时
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) {
+    return `${hours}小时前`
+  }
+  
+  // 转换为天
+  const days = Math.floor(hours / 24)
+  if (days < 30) {
+    return `${days}天前`
+  }
+  
+  // 转换为月
+  const months = Math.floor(days / 30)
+  if (months < 12) {
+    return `${months}个月前`
+  }
+  
+  // 转换为年
+  const years = Math.floor(months / 12)
+  return `${years}年前`
+}
+
+/**
+ * 获取当前日期
+ * @param {string} format - 格式化模板
+ * @returns {string} 当前日期字符串
+ */
+export const getCurrentDate = (format = 'YYYY-MM-DD HH:mm:ss') => {
+  return formatDate(new Date(), format)
+}

src/utils/stringUtils.js

@@ -0,0 +1,75 @@
+// 字符串处理工具函数
+
+/**
+ * 截断字符串并添加省略号
+ * @param {string} str - 原始字符串
+ * @param {number} length - 保留的长度
+ * @returns {string} 截断后的字符串
+ */
+export const truncateString = (str, length) => {
+  if (!str || typeof str !== 'string' || str.length <= length) {
+    return str
+  }
+  return str.substring(0, length) + '...'
+}
+
+/**
+ * 移除HTML标签
+ * @param {string} html - 包含HTML标签的字符串
+ * @returns {string} 纯文本字符串
+ */
+export const stripHtmlTags = (html) => {
+  if (!html || typeof html !== 'string') {
+    return html
+  }
+  return html.replace(/<[^>]*>/g, '')
+}
+
+/**
+ * 格式化内容预览
+ * @param {string} content - 原始内容
+ * @param {number} maxLength - 最大长度
+ * @returns {string} 格式化后的预览内容
+ */
+export const formatContentPreview = (content, maxLength = 200) => {
+  if (!content) return ''
+  // 先移除HTML标签
+  const plainText = stripHtmlTags(content)
+  // 再截断字符串
+  return truncateString(plainText, maxLength)
+}
+
+/**
+ * 转义HTML特殊字符
+ * @param {string} str - 原始字符串
+ * @returns {string} 转义后的字符串
+ */
+export const escapeHtml = (str) => {
+  if (!str || typeof str !== 'string') {
+    return str
+  }
+  const map = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;'
+  }
+  return str.replace(/[&<>"']/g, (m) => map[m])
+}
+
+/**
+ * 解析URL查询参数
+ * @param {string} url - URL字符串
+ * @returns {Object} 查询参数对象
+ */
+export const parseQueryParams = (url) => {
+  const queryString = url.split('?')[1]
+  if (!queryString) return {}
+  
+  return queryString.split('&').reduce((params, param) => {
+    const [key, value] = param.split('=')
+    params[decodeURIComponent(key)] = decodeURIComponent(value || '')
+    return params
+  }, {})
+}

src/views/Footer.vue

@@ -0,0 +1,136 @@
+<!-- 页脚 -->
+<template>
+  <div class="footer">
+    <div class="footer-content">
+      <!-- 备案信息 -->
+      <p class="footer-beian">
+        备案号：
+        <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
+          皖ICP备2025105428号-1 || 皖公网安备34120202001634号
+        </a>
+      </p>
+      
+      <!-- 版权信息 -->
+      <p class="footer-copyright">
+        网站所有权利保留 &copy; {{ new Date().getFullYear() }} 清疯不颠
+      </p>
+      
+      <!-- 运行时间 -->
+      <p class="footer-runtime">
+        运行时间：<span>{{ runtime }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+// 运行时间响应式状态
+const runtime = ref('计算中...')
+// 网站上线时间 (时间戳)
+const LAUNCH_DATE = new Date('2025-12-01T00:00:00').getTime()
+// 定时器引用
+let runtimeTimer: number | null = null
+
+/**
+ * 更新网站运行时间
+ */
+const updateRuntime = () => {
+  const now = Date.now()
+  const diff = now - LAUNCH_DATE
+  
+  // 计算天、时、分、秒
+  const days = Math.floor(diff / 86400000)
+  const hours = Math.floor((diff % 86400000) / 3600000)
+  const minutes = Math.floor((diff % 3600000) / 60000)
+  const seconds = Math.floor((diff % 60000) / 1000)
+  
+  // 更新运行时间显示
+  runtime.value = `${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`
+}
+
+// 组件挂载时初始化
+onMounted(() => {
+  // 立即更新一次
+  updateRuntime()
+  // 每秒更新一次
+  runtimeTimer = window.setInterval(updateRuntime, 1000)
+})
+
+// 组件卸载时清理定时器
+onUnmounted(() => {
+  if (runtimeTimer) {
+    clearInterval(runtimeTimer)
+    runtimeTimer = null
+  }
+})
+</script>
+
+<style scoped>
+/* 页脚容器 */
+.footer {
+  text-align: center;
+  margin-top: 3rem;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+/* 页脚内容 */
+.footer-content {
+  margin: 0 auto;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 12px;
+  padding: 1.5rem 2rem;
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
+}
+
+/* 通用段落样式 */
+.footer-content p {
+  margin: 0.5rem 0;
+  font-size: 0.9rem;
+  color: #666;
+  line-height: 1.5;
+}
+
+/* 备案信息 */
+.footer-beian a {
+  color: #409eff;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer-beian a:hover {
+  color: #66b1ff;
+  text-decoration: underline;
+}
+
+/* 版权信息 */
+.footer-copyright {
+  font-weight: 500;
+  color: #333;
+}
+
+/* 运行时间 */
+.footer-runtime {
+  font-family: 'Courier New', monospace;
+  color: #67c23a;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .footer {
+    margin-top: 2rem;
+    padding: 1rem 0;
+  }
+  
+  .footer-content {
+    padding: 1rem;
+    margin: 0 1rem;
+  }
+  
+  .footer-content p {
+    font-size: 0.8rem;
+  }
+}
+</style>

src/views/aboutme.vue

@@ -1,11 +1,318 @@
 <template>
-    <div id="allstyle">
-        <div class="header">
-            <h1>关于</h1>
-        </div>
-    </div>
-</template>
-<script>
+  <div class="about-page-container">
+    <div class="about-content-wrapper">
+      <!-- 页面头部 -->
+      <div class="about-page-header">
+        <h3 class="about-page-title">关于</h3>
+      </div>
 
+      <!-- 关于内容 -->
+      <div class="about-main-content">
+        <div class="about-personal-intro">
+          <h4>清风--清疯--清疯不颠</h4>
+          <h5>
+            <!-- “徐徐清风知我意，悠悠湖水荡人心。” -->
+            名字从“清风”起步，但总觉得少了点年轻人的疯狂，于是干脆改叫“清疯”。疯久了，又怕真“颠”了，便在后面补上“不颠”二字，作为提醒。“清疯不颠”就此定下——风与疯，只在一念之间；疯与不颠，则是我给自己的清醒界限。
+            <!-- &nbsp; &nbsp; 让我回忆回忆...大一的时候（还是上学的日子好哈哈哈哈哈！！）跟室友一块玩游戏，因为我的Steam名字叫“清风”，慢慢的这个名儿就这么成了我的外号。说来也怪，被他们这么一叫，心里那点初入大学的陌生和拘谨，
+            好像真被一阵风吹散了似的，
+            哈哈哈哈哈，我还蛮喜欢这个外号的。
+            <br></br>
+            &nbsp; &nbsp; 有段时间，不知道怎么了，精神状态不是很好，好想发疯，突然这疯就像钉子一样扎在我脑海里（哈哈哈哈！）。于是就干脆改名叫“清疯”了——清风，清疯，念起来几乎没差，
+            但内核却从一种理想的淡然，切换成了真实的、带点毛边的鲜活。“悠悠清风荡我心”，只是如今这阵清风熬成了清疯，终于在我心里刮起一场疯——疯啦！
+            <br></br>
+              &nbsp; &nbsp; 又过些日子，玩新游戏要起名，正盯着输入框里的“清疯”发呆， 两个字在脑海里冒出来……疯癫？哎，好像是疯了，但也没完全颠嘛！那种在理智边界试探、却绝不越线的微妙感，一下对味了——干脆就叫“清疯不颠”！
+            名字一出自己先乐了。
+            <br></br>
+            哈哈哈哈哈哈！俗话说天才在左疯子在右，在我这儿，大概是左脑负责疯，右脑负责颠，两个家伙吵吵闹闹，反而让我在这个世界里自得其乐。 -->
+          </h5>
+        </div>
+
+        <div class="about-personal-intro">
+          <h4>疯言疯语</h4>
+          <h5>
+            &nbsp; &nbsp; 我想设计一下独属于清疯的页面，可是我并不清楚该如何去写这个页面。就干脆当一个我发疯的地方吧（哈哈哈哈哈 所以你有看到彩色的小鹿吗？）
+          </h5>
+        </div>
+
+        <div class="about-skill-section">
+          <h4>前端技术栈</h4>
+          <div class="skills-display-list">
+            &nbsp; &nbsp;
+            <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-skill-section">
+          <h4>后端技术栈</h4>
+          <div class="skills-display-list">
+            &nbsp; &nbsp;
+            <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-contact-section">
+          <h4>联系方式</h4>
+          <p>如果你有任何问题或建议，欢迎随时联系我！（我文笔真的很烂QAQ）</p>
+          <div class="contact-options">
+            <el-button type="primary" plain @click="goToMessageBoard">留言板</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+/**
+ * 跳转到留言板页面
+ * 当用户点击留言板按钮时触发
+ */
+const goToMessageBoard = () => {
+  router.push('/message')
+}
 </script>
-<style></style>
+
+<style scoped>
+/* 主容器样式 */
+.about-page-container {
+  width: 80%;
+}
+
+/* 内容包装器样式 */
+.about-content-wrapper {
+  max-width: 900px;
+  margin: 0 auto;
+  background-color: rgba(255, 255, 255, 0.85);
+  border-radius: 12px;
+  padding: 40px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.3s ease;
+}
+
+/* 内容包装器悬浮效果 */
+.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-page-title {
+  font-size: 2.2rem;
+  color: #2c3e50;
+  margin-bottom: 12px;
+  font-weight: 600;
+}
+
+/* 页面副标题样式 */
+.about-page-subtitle {
+  font-size: 1.1rem;
+  color: #7f8c8d;
+}
+
+/* 主要内容区域样式 */
+.about-main-content {
+  font-size: 1.05rem;
+  line-height: 1.8;
+  color: #34495e;
+}
+
+/* 个人介绍样式 */
+.about-personal-intro {
+  margin-bottom: 32px;
+  text-align: left;
+}
+
+.about-personal-intro h5 {
+  color: #34495e;
+  margin-bottom: 16px;
+}
+
+/* 技能部分样式 */
+.about-skill-section {
+  margin-bottom: 32px;
+}
+
+.about-skill-section h4 {
+  text-align: left;
+}
+
+/* 技能列表样式 */
+.skills-display-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+/* 技能标签链接样式 */
+.skill-tag-link {
+  text-decoration: none;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  display: inline-block;
+}
+
+/* 技能标签链接悬浮效果 */
+.skill-tag-link:hover {
+  transform: translateY(-2px);
+  opacity: 0.95;
+}
+
+.skill-tag-link:hover .el-tag {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* 兴趣爱好部分样式 */
+.about-hobbies-section {
+  margin-bottom: 32px;
+}
+
+.about-hobbies-section h3 {
+  color: #2c3e50;
+  font-size: 1.3rem;
+  margin-bottom: 16px;
+  font-weight: 600;
+}
+
+/* 兴趣爱好列表样式 */
+.hobbies-list {
+  list-style: none;
+  padding: 0;
+}
+
+.hobbies-list li {
+  position: relative;
+  padding-left: 24px;
+  margin-bottom: 12px;
+  transition: color 0.2s ease;
+}
+
+.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;
+}
+
+.hobbies-list li:hover::before {
+  transform: scale(1.2);
+}
+
+/* 联系方式部分样式 */
+.about-contact-section {
+  margin-bottom: 20px;
+}
+
+.about-contact-section h3 {
+  color: #2c3e50;
+  font-size: 1.3rem;
+  margin-bottom: 16px;
+  font-weight: 600;
+}
+
+/* 联系方式选项样式 */
+.contact-options {
+  gap: 10px;
+  text-align: center;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .about-page-container {
+    padding: 20px 0;
+  }
+  .about-page-header{
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+  .about-content-wrapper {
+    width: 100%;
+    padding: 20px;
+    margin: 0 5%;
+  }
+
+  .about-page-title {
+    font-size: 1.2rem;
+  }
+
+  .about-page-subtitle {
+    font-size: 1rem;
+  }
+
+  .about-main-content {
+    font-size: 1rem;
+  }
+
+  .about-page-header {
+    margin-bottom: 32px;
+  }
+
+  .contact-options {
+    flex-direction: column;
+  }
+  .skills-display-list {
+    gap: 8px;
+  }
+}
+</style>

src/views/aericle.vue

@@ -1,178 +0,0 @@
-<template>
-  <div id="allstyle">
-    <div class="header">
-      <h1>目录</h1>
-    </div>
-    <div class="post_content">
-      <div v-for="(items, index) in datas" style=" padding: 20px;">
-        <h2>{{ items[index].title }}</h2>
-        <span class="badge badge-primary">共{{ contentsum(items) }}篇</span>
-        <ul class="pcont_ul">
-          <li class="pcont_li" v-for="item in items">
-            <a class="btn" @click="btnonclick(item.contentid)"><kbd>{{ item.content }}</kbd></a> — —({{ item.sum }})
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import { useRouter } from 'vue-router'
-const router = useRouter()
-const btnonclick = (contentid) => {
-  router.push({
-    path: '/:type',
-    query: {
-      type: contentid
-    }
-  })
-}
-const contentsum = (items) => {
-  let nums = 0
-  for (let i = 0; i < items.length; i++) {
-    nums += items[i].sum
-  }
-  return nums
-}
-const datas = [
-  // 学习模块
-  [
-    {
-      title: '学习',
-      contentid: '1',
-      content: '算法',
-      sum: 1,
-
-    },
-    {
-      title: '学习',
-      contentid: '2',
-      content: '前端',
-      sum: 1,
-    },
-    {
-      title: '学习',
-      contentid: '3',
-      content: '后端',
-      sum: 1,
-    },
-    {
-      title: '学习',
-      contentid: '4',
-      content: 'Java',
-      sum: 1,
-    },
-  ],
-  // 生活模块
-  [
-    {
-      title: '生活',
-      contentid: '1',
-      content: '生活',
-      sum: 1,
-
-    },
-    {
-      title: '生活',
-      contentid: '2',
-      content: '书',
-      sum: 1,
-    },
-    {
-      title: '生活',
-      contentid: '2',
-      content: '书',
-      sum: 1,
-    }
-  ]
-
-]
-</script>
-<style>
-#allstyle {
-  background-color: rgba(255, 255, 255, 0.85);
-  border-radius: 10px;
-}
-
-.header {
-  text-align: center;
-  padding: 20px;
-}
-
-.post_content {
-  padding: 20px;
-}
-
-.pcont_ul {
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 15px;
-  margin-top: 20px;
-}
-
-.pcont_li {
-  display: flex;
-  align-items: center;
-  padding: 10px 15px;
-  border-radius: 12px;
-  transition: transform 0.3s ease;
-}
-
-
-.btn {
-  position: relative;
-  text-decoration: none;
-  color: black;
-  padding: 10px 15px;
-  border-radius: 8px;
-  transition: all 0.3s ease;
-  display: inline-block;
-  z-index: 1;
-  overflow: hidden;
-}
-
-/* 透明方块效果 */
-.btn::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  z-index: -1;
-  transition: all 0.3s ease;
-  transform: scale(0.95);
-  opacity: 0.8;
-}
-
-/* 悬浮效果 */
-.btn:hover::before {
-  transform: scale(1.1);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
-  background: rgba(145, 196, 238, 0.85);
-  transform: translateY(-3px);
-}
-
-/* spa */
-.badge {
-  text-transform: uppercase;
-}
-
-.badge-primary {
-  color: #2643e9;
-  background-color: rgba(203, 210, 246, .5);
-}
-
-.badge {
-  font-size: 66%;
-  font-weight: 600;
-  line-height: 1;
-  display: inline-block;
-  padding: .35rem .375rem;
-  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-  text-align: center;
-  vertical-align: baseline;
-  white-space: nowrap;
-  border-radius: .25rem;
-}
-</style>

src/views/aericlelist.vue

@@ -0,0 +1,409 @@
+<template>
+  <div id="allstyle">
+    <div class="page-header">
+      <h3>文章目录</h3>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-state-container">
+      <el-skeleton :count="1" />
+    </div>
+
+    <!-- 错误状态 -->
+    <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="article-content" id="category-list">
+      <p><strong></strong></p>
+      <div class="alert alert-primary"><strong><span class="alert-inner-text">文章分类如下，点击跳转</span> </strong></div>
+      <div v-for="categoryGroup in categories" :key="categoryGroup.Categoryid" class="category-group-container">
+        <div v-if="categoryGroup.attributes.length > 0 && categoryGroup.attributes.some(cat => cat.articles && cat.articles.length > 0)">
+          <h2 id="header-id-1">{{ categoryGroup.typename }}</h2>
+          <!-- 计算该分类组中实际有文章的属性数量 -->
+          <span class="badge badge-primary">共 {{ categoryGroup.attributes.reduce((total, cat) => total + (cat.articles && cat.articles.length ? cat.articles.length : 0), 0) }} 篇</span>
+          <ul class="category-item-list">
+            <div v-for="attribute in categoryGroup.attributes" :key="attribute.attributeid">
+              <li v-if="attribute.articles && attribute.articles.length > 0">
+                &nbsp;&nbsp;<a class="category-link" @click="handleCategoryClick(attribute)"><kbd>{{ attribute.attributename}}</kbd></a>
+                &nbsp; — —({{ attribute.articles.length }})
+              </li>
+              </div>
+          </ul>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-else class="empty-state-container">
+      <el-empty description="暂无分类" />
+    </div>
+     
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { ref, onMounted } from 'vue'
+// 由于模块 '@/services' 没有导出的成员 'CategoryService'，请确认正确的导出名称后修改此处
+// 以下代码仅作示例，实际需根据 '@/services' 模块的真实导出调整
+import { ElMessage } from 'element-plus'
+import { categoryService, categoryAttributeService, articleService } from '@/services'
+import { useGlobalStore } from '@/store/globalStore'
+
+const globalStore = useGlobalStore()
+const router = useRouter()
+
+// 响应式状态
+const categories = ref<any[]>([])
+const loading = ref(false)
+const error = ref('')
+
+/**
+ * 获取文章分类列表
+ */
+const fetchCategories = async () => {
+  try {
+    loading.value = true;
+    const res = await categoryService.getAllCategories();
+    let processedCategories: any[] = [];
+    if (res.code === 200) {
+      processedCategories = res.data.map(item => ({
+        ...item,
+        attributes: [] // 使用更清晰的命名
+      }));
+      
+      // 使用Promise.all等待所有异步操作完成
+      await Promise.all(
+        processedCategories.map(async category => {
+          const attributes = await categoryAttributeService.getAttributesByCategory(category.categoryid);
+          if (attributes.code === 200 && Array.isArray(attributes.data)) {
+            const processedAttributes = await Promise.all(
+              attributes.data.map(async item => {
+                const articleItem = {
+                  ...item,
+                  articles: []
+                };
+                const articlesRes = await articleService.getArticlesByAttributeId(item.attributeid);
+                if(articlesRes.code === 200 && Array.isArray(articlesRes.data)){
+                  articleItem.articles = articlesRes.data;
+                }
+                return articleItem;
+              })
+            );
+            category.attributes = processedAttributes;
+          }
+        })
+      );
+    }
+    categories.value = processedCategories;
+    // console.log('获取分类列表成功:', categories.value);
+  } catch (err) {
+    console.error('获取分类列表失败:', err);
+    ElMessage.error('获取分类列表失败，请稍后重试');
+  }finally{
+    loading.value = false;
+  }
+}
+/**
+* 处理分类点击事件
+* 注意：现在实际上使用的是属性ID而不是分类ID
+* @param {string | number} attributeId - 属性ID
+*/
+const handleCategoryClick = (attribute: any) => {
+  globalStore.removeValue('attribute')
+  globalStore.setValue('attribute', {
+    id:  attribute.attributeid,
+    name: attribute.attributename 
+  })
+  router.push({
+    path: '/home/aericleattribute',
+
+  })
+}
+
+/**
+ * 计算分类组中的文章总数
+ * @param {Array} categoryItems - 分类项数组
+ * @returns {number} 文章总数
+ */
+const getCategorySum = (categoryItems: any[]): number => {
+  if (!categoryItems || !Array.isArray(categoryItems)) {
+    return 0
+  }
+
+  return categoryItems.reduce((total, item) => {
+    return total + (item.sum || 0)
+  }, 0)
+}
+
+/**
+ * 组件挂载时获取分类列表
+ */
+onMounted(() => {
+  fetchCategories()
+})
+</script>
+
+<style scoped>
+/* 页面标题样式 */
+.page-header {
+  text-align: center;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.page-header h1 {
+  color: #2c3e50;
+  font-size: 1.8rem;
+}
+
+/* 文章内容区域 */
+.article-content {
+  padding: 15px;
+}
+
+/* 分类组样式 */
+.category-group-container ul li {
+  display: flex;
+  align-items: center;
+}
+
+/* 分类链接样式 */
+.category-group-container ul li .category-link::before {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.category-group-container ul li .category-link:hover {
+  background-color: rgb(245, 247, 250, 0.7);
+}
+
+/* 提示框样式 */
+.alert:not(.alert-secondary) {
+  color: #fff;
+}
+
+.alert {
+  font-size: .875rem;
+  padding: 1rem 1.5rem;
+  border: 0;
+  border-radius: .25rem;
+}
+
+.alert-primary {
+  color: #fff;
+  border-color: #7889e8;
+  background-color: #7889e8;
+}
+
+.alert-inner-text {
+  font-weight: bold;
+}
+
+/* 键盘样式 */
+.category-link kbd {
+  color: #fff;
+  font-size: 14px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background-color: #2c3e50;
+}
+
+.alert {
+  position: relative;
+  margin-bottom: 1rem;
+  padding: 1rem 1.5rem;
+  border: .0625rem solid transparent;
+  border-radius: .25rem;
+}
+
+/* 分类组容器样式 */
+.category-group-container {
+  text-align: left;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 24px;
+}
+
+/* 徽章样式 */
+.badge {
+  padding: .25em .4em;
+  font-size: 75%;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25rem;
+  margin: 10px 6px;
+}
+
+/* 分类标题样式 */
+.category-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #ecf0f1;
+}
+
+.category-header h2 {
+  color: #34495e;
+  font-size: 1.4rem;
+  margin: 0;
+}
+
+/* 项目列表样式 */
+.project-content-list {
+  list-style: none;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 15px;
+  margin-top: 20px;
+}
+
+.project-content-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 15px;
+  border-radius: 12px;
+  background-color: rgba(245, 247, 250, 0.7);
+  transition: transform 0.3s ease;
+  gap: 10px;
+}
+
+.project-content-item:hover {
+  transform: translateY(-2px);
+  background-color: rgba(236, 240, 241, 0.9);
+}
+
+/* 分类链接样式 */
+.category-link {
+  position: relative;
+  text-decoration: none;
+  color: #34495e;
+  padding: 10px 15px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  display: inline-block;
+  z-index: 1;
+  overflow: hidden;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+/* 透明方块效果 */
+.category-link::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  z-index: -1;
+  transition: all 0.3s ease;
+  transform: scale(0.95);
+  opacity: 0.8;
+  background: rgba(255, 255, 255, 0.5);
+}
+
+/* 悬浮效果 */
+.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;
+}
+
+/* 标签样式 */
+.badge {
+  text-transform: uppercase;
+}
+
+.badge-primary {
+  color: #2643e9;
+  background-color: rgba(203, 210, 246, .5);
+}
+
+.badge {
+  font-size: 66%;
+  font-weight: 600;
+  line-height: 1;
+  display: inline-block;
+  padding: .35rem .375rem;
+  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  text-align: center;
+  vertical-align: baseline;
+  white-space: nowrap;
+  border-radius: .25rem;
+}
+
+/* 加载状态 */
+.loading-state-container {
+  padding: 40px 20px;
+  text-align: center;
+}
+
+/* 错误状态 */
+.error-state-container {
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.error-state-container .el-button {
+  margin-top: 16px;
+}
+
+/* 空状态 */
+.empty-state-container {
+  text-align: center;
+  padding: 60px 20px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .page-header {
+    padding: 15px;
+  }
+
+  .page-header h1 {
+    font-size: 1.5rem;
+  }
+
+  .article-content {
+    padding: 15px;
+  }
+
+  .category-group-container {
+    padding: 15px;
+    margin-bottom: 15px;
+  }
+
+  .category-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .project-content-list {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .category-header h2 {
+    font-size: 1.2rem;
+  }
+}
+</style>

src/views/articlecontents.vue

@@ -1,13 +1,544 @@
 <template>
-    <div id="allstyle">
-        <div class="header">
-            <h1>文章内容页面</h1>
-        </div>
-        <p>通过传来的{{ urls }}向服务器发送请求获取相关文章的链接</p>
+  <div id="article-detail-page">
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-state-container">
+      <el-skeleton :count="1" />
+      <el-skeleton :count="3" />
     </div>
+
+    <!-- 错误状态 -->
+    <div v-else-if="error" class="error-state-container">
+      <el-alert :title="error" type="error" show-icon />
+      <el-button type="primary" @click="initializeArticleDetail">重新加载</el-button>
+    </div>
+
+    <!-- 文章详情 -->
+    <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-info">
+          <span class="article-publish-date">{{ formatRelativeTime(article.createdAt) }}</span>
+          <span v-if="article.categoryName" class="article-category-badge">{{ article.categoryName }} </span>
+          <span v-if="article.viewCount" class="article-views-count">{{ article.viewCount }} 阅读</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 class="article-status-badge-container" v-if="globalStore.Login">
+            <span v-if="article.status === 0" class="article-status-badge badge badge-warning">草稿</span>
+            <span v-if="article.status === 1" class="article-status-badge badge badge-success">已发表</span>
+            <span v-if="article.status === 2" class="article-status-badge badge badge-danger">已删除</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 文章内容区域 -->
+      <div class="article-content-area">
+        <markdownViewer :markdownContent="article.markdownscontent" />
+      </div>
+
+      <!-- 文章底部信息 -->
+      <div class="article-footer-section">
+        <div class="article-tag-list">
+        </div>
+
+        <!-- 文章操作按钮 -->
+        <div class="article-actions-group">
+          <el-button type="primary" @click="navigateBack" plain>
+            返回
+          </el-button>
+        </div>
+      </div>
+
+      <!-- 相关文章推荐 -->
+      <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.articleid" class="related-article-card"
+            @click="handleRelatedArticleClick(item.articleid)">
+            <i class="el-icon-document"></i>
+            <span>{{ item.title }}</span>
+          </div> -->
+        </div>
+      </div>
+    </div>
+
+    <!-- 空状态 - 文章不存在 -->
+    <div v-else class="empty-state-container">
+      <el-empty description="文章不存在" />
+    </div>
+
+    <!-- 评论区组件 -->
+    <div>
+      <messageboard class="comment-section" />
+    </div>
+  </div>
+
 </template>
-<script setup>
-import { useRoute } from 'vue-router';
-const urls = useRoute().query
+
+<script setup lang="ts">
+// =========================================================================
+// 组件导入和初始化
+// =========================================================================
+
+/**
+ * 导入Vue核心功能
+ */
+import { ref, onMounted } from 'vue'
+
+/**
+ * 导入路由相关功能
+ */
+import { useRouter } from 'vue-router'
+
+/**
+ * 导入状态管理和UI组件
+ */
+import { useGlobalStore } from '@/store/globalStore'
+import { ElMessage } from 'element-plus'
+
+/**
+ * 导入类型和工具函数
+ */
+import type { Article } from '@/types'
+import { formatRelativeTime } from '@/utils/dateUtils'
+
+/**
+ * 导入子组件
+ */
+import messageboard from './messageboard.vue'
+import markdownViewer from './markdown.vue'
+
+// =========================================================================
+// 路由和状态初始化
+// =========================================================================
+
+/**
+ * 初始化路由
+ */
+const router = useRouter()
+
+/**
+ * 初始化全局状态管理
+ */
+const globalStore = useGlobalStore()
+
+/**
+ * 响应式状态定义
+ */
+const article = ref<Article | null>(null)  // 文章详情数据，初始为null避免类型不匹配
+const loading = ref(false)                 // 加载状态
+const error = ref('')                      // 错误信息
+const relatedArticles = ref<Article[]>([]) // 相关文章列表
+
+// =========================================================================
+// 文章数据处理模块
+// =========================================================================
+
+/**
+ * 获取文章ID
+ * @returns {number | null} 文章ID或null
+ */
+const getArticleId = (): number | null => {
+  return globalStore.getValue('articleInfo')?.articleid || null
+}
+
+/**
+ * 获取文章详情数据
+ * @returns {Promise<Article | null>} 文章数据或null
+ */
+const fetchArticleData = async (): Promise<Article | null> => {
+  try {
+    // 从全局状态获取文章信息
+    const response = await globalStore.getValue('articleInfo')
+    return response || null
+  } catch (err) {
+    console.error('获取文章数据失败:', err)
+    throw new Error('获取文章数据失败')
+  }
+}
+
+/**
+ * 增加文章浏览量
+ * @param {Article} articleData 文章数据
+ */
+const incrementViewCount = (articleData: Article): void => {
+  if (articleData.viewCount) {
+    articleData.viewCount++
+  } else {
+    articleData.viewCount = 1
+  }
+}
+
+/**
+ * 处理文章不存在的情况
+ */
+const handleArticleNotFound = (): void => {
+  error.value = '文章不存在或已被删除'
+  ElMessage.error(error.value)
+}
+
+/**
+ * 处理获取文章数据过程中的错误
+ * @param {unknown} err 错误对象
+ */
+const handleArticleFetchError = (err: unknown): void => {
+  error.value = err instanceof Error ? err.message : '获取文章详情失败，请稍后重试'
+  console.error('获取文章详情失败:', err)
+  ElMessage.error(error.value)
+}
+
+/**
+ * 初始化文章详情数据
+ */
+const initializeArticleDetail = async (): Promise<void> => {
+  try {
+    loading.value = true
+    error.value = ''
+
+    // 获取文章ID
+    const articleId = getArticleId()
+    if (!articleId) {
+      handleArticleNotFound()
+      return
+    }
+
+    // 获取文章数据
+    const articleData = await fetchArticleData()
+    if (articleData) {
+      article.value = articleData
+      // 增加浏览量
+      incrementViewCount(articleData)
+    } else {
+      handleArticleNotFound()
+    }
+  } catch (err) {
+    handleArticleFetchError(err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// =========================================================================
+// 导航和用户交互模块
+// =========================================================================
+
+/**
+ * 返回上一页
+ */
+const navigateBack = (): void => {
+  router.back()
+}
+
+/**
+ * 导航到相关文章
+ * @param {number} id - 相关文章ID
+ */
+const navigateToRelatedArticle = (id: number): void => {
+  router.push({
+    path: '/article/:url',
+    query: { url: id }
+  })
+}
+
+// =========================================================================
+// 组件生命周期和初始化
+// =========================================================================
+
+/**
+ * 组件挂载时的初始化操作
+ */
+const setupComponent = (): void => {
+  initializeArticleDetail()
+}
+/**
+ * 组件挂载生命周期钩子
+ */
+onMounted(() => {
+  setupComponent()
+})
 </script>
-<style></style>
+
+<style scoped>
+/* 文章详情容器 */
+.article-detail-wrapper {
+  max-width: 900px;
+  margin: 0 auto;
+  background-color: rgba(255, 255, 255, 0.85);
+  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);
+}
+
+/* 加载状态容器 */
+.loading-state-container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 40px;
+  background-color: rgba(255, 255, 255, 0.85);
+  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: rgba(255, 255, 255, 0.85);
+  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: rgba(255, 255, 255, 0.85);
+  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-main-title {
+  font-size: 2rem;
+  color: #2c3e50;
+  line-height: 1.4;
+  margin-bottom: 20px;
+  font-weight: 600;
+}
+
+/* 文章元信息 */
+.article-meta-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  color: #7f8c8d;
+  font-size: 0.95rem;
+}
+
+/* 元信息项 */
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500;
+}
+
+/* 文章内容区域 */
+.article-content-area {
+  font-size: 1.05rem;
+  line-height: 1.8;
+  color: #34495e;
+  margin-bottom: 32px;
+}
+
+/* 文章内容中的段落 */
+.article-content-area p {
+  margin-bottom: 16px;
+  text-align: justify;
+}
+
+/* 文章内容中的二级标题 */
+.article-content-area h2 {
+  color: #2c3e50;
+  font-size: 1.5rem;
+  margin: 32px 0 16px 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ecf0f1;
+  font-weight: 600;
+}
+
+/* 文章内容中的三级标题 */
+.article-content-area h3 {
+  color: #34495e;
+  font-size: 1.3rem;
+  margin: 24px 0 12px 0;
+  font-weight: 600;
+}
+
+/* 文章内容中的图片 */
+.article-content-area img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 20px auto;
+  display: block;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 文章内容中的引用 */
+.article-content-area blockquote {
+  border-left: 4px solid #3498db;
+  padding-left: 16px;
+  color: #7f8c8d;
+  margin: 16px 0;
+  font-style: italic;
+}
+
+/* 文章底部区域 */
+.article-footer-section {
+  padding-top: 24px;
+  border-top: 2px solid #ecf0f1;
+  margin-bottom: 32px;
+}
+
+/* 标签列表 */
+.article-tag-list {
+  margin-bottom: 24px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+/* 文章操作按钮组 */
+.article-actions-group {
+  display: flex;
+  justify-content: flex-start;
+}
+
+/* 相关文章区域 */
+.related-articles-section {
+  padding-top: 32px;
+  border-top: 2px solid #ecf0f1;
+}
+
+/* 相关文章标题 */
+.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-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+}
+
+/* 相关文章卡片悬停效果 */
+.related-article-card:hover {
+  background-color: #e9ecef;
+  transform: translateX(5px);
+  border-color: #3498db;
+}
+
+.related-article-card i {
+  color: #3498db;
+}
+
+.related-article-card span {
+  font-size: 1rem;
+  color: #495057;
+  transition: color 0.3s ease;
+}
+
+.related-article-card:hover span {
+  color: #3498db;
+}
+
+/* 评论区样式 */
+.comment-section {
+  margin-top: 32px;
+}
+
+/* 响应式设计 - 平板和手机 */
+@media (max-width: 768px) {
+  #article-detail-page {
+    padding: 20px 0;
+  }
+
+  .article-detail-wrapper,
+  .loading-state-container,
+  .error-state-container,
+  .empty-state-container {
+    padding: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  .article-main-title {
+    font-size: 1.5rem;
+    line-height: 1.5;
+  }
+  .article-actions-group {
+    /* 文章操作按钮组 - 右对齐 */
+    justify-content: flex-end;
+  }
+  .article-meta-info {
+    gap: 8px;
+    font-size: 0.9rem;
+  }
+
+  .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>

src/views/articlesave.vue

@@ -0,0 +1,480 @@
+<template>
+  <div class="article-save-container">
+    <div class="article-content-wrapper">
+      <div class="article-header-section">
+        <div class="title-container">
+          <input type="text" v-model="Articleform.title" class="article-main-title" placeholder="请输入标题"
+            @focus="($event.target as HTMLInputElement).placeholder = ''"
+            @blur="($event.target as HTMLInputElement).placeholder = '请输入标题'" />
+        </div>
+        <div class="article-meta-info">
+          <span class="meta-item date-item">
+            <i class="el-icon-document"></i>
+            <span> {{ new Date().toLocaleDateString() }} </span>
+          </span>
+          <span class="meta-item status-item">
+            <i class="el-icon-document"></i>
+            <el-select v-model="Articleform.status" placeholder="请选择状态" class="meta-select">
+              <el-option v-for="item in statusoptions" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </span>
+          <span class="meta-item category-item">
+            <i class="el-icon-folder"></i>
+            <el-cascader :options="categorieoptions" v-model="selectedValues" @change="handleCascaderChange"
+              placeholder="选择分类和属性" class="meta-cascader">
+              <template #default="{ node, data }">
+                <span>{{ data.label }}</span>
+                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+              </template>
+            </el-cascader>
+          </span>
+        </div>
+        <div class="article-summary-section">
+          <!-- 文章简介 -->
+          <span class="meta-item summary-item">
+            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入简介"
+              v-model="Articleform.content">
+            </el-input>
+          </span>
+
+        </div>
+      </div>
+      <div class="editor-container">
+        <!-- 编辑区域 -->
+        <MdEditor v-model="Articleform.markdownscontent" class="markdown-editor" @on-save="handleSave" noImgZoomIn
+          noKatex />
+        <!-- 返回列表 -->
+        <el-button type="primary" @click="handleReturn">返回列表</el-button>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { MdEditor } from 'md-editor-v3';
+import 'md-editor-v3/lib/style.css';
+import { categoryService, categoryAttributeService, articleService } from '@/services';
+import type { Article } from '@/types/index.ts';
+import { ElMessage } from 'element-plus';
+import { useGlobalStore } from '@/store/globalStore'
+const globalStore = useGlobalStore()
+// 测试
+// const id = 'preview-only';
+// const scrollElement = document.documentElement;
+
+// 路由
+import router from '@/router/Router';
+const Articleform = ref<Article>({
+  articleid: 0,
+  title: '',
+  content: '',
+  attributeid: 0,
+  categoryName: '',
+  createdAt: '',
+  updatedAt: '',
+  markdownscontent: '',
+})
+
+// 用于级联选择器的值绑定
+const selectedValues = ref([]);
+const categorieoptions = ref([]);
+const statusoptions = ref([
+  {
+    label: '草稿',
+    value: '0'
+  },
+  {
+    label: '发布',
+    value: '1'
+  },
+  {
+    label: '删除',
+    value: '2'
+  }
+]);
+const categories = ref([]);
+// 编辑文章
+const editArticle = globalStore.getValue('updatearticle')
+
+if (editArticle) {
+  Articleform.value = {
+    ...editArticle,
+    // 确保status是字符串格式，与statusoptions的value格式匹配
+    status: editArticle.status !== undefined ? String(editArticle.status) : '0'
+  }
+}
+// 初始化加载分类和属性，构建级联选择器的options
+const loadCategories = async () => {
+  try {
+    const response = await categoryService.getAllCategories();
+    if (response.code === 200) {
+      categories.value = response.data;
+
+      // 为每个分类加载对应的属性，并构建options格式
+      const optionsData = await Promise.all(
+        categories.value.map(async (category) => {
+          try {
+            const attrResponse = await categoryAttributeService.getAttributesByCategory(category.typeid);
+            const children = attrResponse.code === 200 && attrResponse.data ?
+              attrResponse.data.map(attr => ({
+                label: attr.attributename,
+                value: attr.attributeid.toString()
+              })) : [];
+
+            return {
+              label: category.typename,
+              value: category.typeid.toString(),
+              children
+            };
+          } catch (error) {
+            console.error(`加载分类 ${category.typename} 的属性失败:`, error);
+            return {
+              label: category.typename,
+              value: category.typeid.toString(),
+              children: []
+            };
+          }
+        })
+      );
+      categorieoptions.value = optionsData;
+
+      // 如果是编辑模式且有attributeid，设置级联选择器的默认值
+      if (Articleform.value.articleid !== 0 && Articleform.value.attributeid !== 0) {
+        // 查找属性所属的分类
+        for (const category of optionsData) {
+          const foundAttribute = category.children.find(attr => attr.value === Articleform.value.attributeid.toString());
+          if (foundAttribute) {
+            // 设置级联选择器的值：[分类ID, 属性ID]
+            selectedValues.value = [category.value, foundAttribute.value];
+            break;
+          }
+        }
+      }
+
+      // console.log('分类选项:', optionsData);
+      // console.log('选中的值:', selectedValues.value);
+    }
+  } catch (error) {
+    console.error('加载分类失败:', error);
+  }
+};
+
+// 处理级联选择变化
+const handleCascaderChange = (values) => {
+  if (values && values.length > 0) {
+    // 最后一个值是属性ID
+    Articleform.value.attributeid = Number(values[values.length - 1]);
+  } else {
+    Articleform.value.attributeid = 0;
+  }
+};
+
+// 组件挂载时加载分类和属性
+loadCategories();
+
+const handleSave = (markdown) => {
+  Articleform.value.markdownscontent = markdown;
+
+  // 验证必填字段
+  if (!Articleform.value.title || !Articleform.value.attributeid) {
+    ElMessage.warning('请填写必填字段：标题和分类属性');
+    return;
+  }
+
+  // 构建请求数据
+  const articleData = {
+    articleid: Articleform.value.articleid,
+    title: Articleform.value.title,
+    content: Articleform.value.content,
+    attributeid: Number(Articleform.value.attributeid),
+    status: Number(Articleform.value.status),
+    viewCount: 0,
+    likes: 0,
+    markdownscontent: Articleform.value.markdownscontent
+  };
+
+  // console.log('发送文章数据:', articleData);
+  // console.log('当前认证token是否存在:', !!localStorage.getItem('token'));
+
+  // 根据articleid决定调用创建还是更新接口
+  const savePromise = Articleform.value.articleid === 0
+    ? articleService.createArticle(articleData)
+    : articleService.updateArticle(Articleform.value.articleid, articleData);
+  savePromise
+    .then(res => {
+      // console.log('API响应:', res);
+      if (res.code === 200) {
+        ElMessage.success(Articleform.value.articleid === 0 ? '文章创建成功' : '文章更新成功');
+        // 清除全局存储中的article
+        globalStore.removeValue('updatearticle');
+        // 重置表单或保留编辑状态
+        if (Articleform.value.articleid === 0) {
+          // 创建新文章后重置表单
+          Articleform.value = {
+            articleid: 0,
+            title: '',
+            content: '',
+            attributeid: 0,
+            categoryName: '',
+            createdAt: '',
+            updatedAt: '',
+            markdownscontent: ''
+          };
+          selectedValues.value = [];
+        }
+
+        // 返回列表页
+        router.push('/home');
+      } else {
+        ElMessage.error(res.message || (Articleform.value.articleid === 0 ? '文章创建失败' : '文章更新失败'));
+      }
+    })
+    .catch(err => {
+      console.error('保存失败错误详情:', err);
+      // 更详细的错误信息
+      if (err.response) {
+        console.error('错误状态码:', err.response.status);
+        console.error('错误响应数据:', err.response.data);
+
+        const operationType = Articleform.value.articleid === 0 ? '创建' : '更新';
+
+        if (err.response.status === 401) {
+          ElMessage.error('未授权访问，请先登录');
+        } else if (err.response.status === 403) {
+          ElMessage.error(`没有权限${operationType}文章，请检查账号权限`);
+        } else if (err.response.status === 400) {
+          ElMessage.error('数据验证失败: ' + (err.response.data?.message || '请检查输入'));
+        } else {
+          ElMessage.error(`请求被拒绝，错误代码: ${err.response.status}`);
+        }
+      } else {
+        ElMessage.error(err.message || (Articleform.value.articleid === 0 ? '文章创建失败' : '文章更新失败'));
+      }
+    })
+};
+
+/**
+ * 返回列表页
+ */
+const handleReturn = () => {
+  // 确定是否返回列表页
+  if (window.confirm('确定要返回列表页吗？所有未保存的更改将丢失。')) {
+    // 清除全局存储中的article
+    globalStore.removeValue('updatearticle');
+    router.push('/home');
+  }
+};
+</script>
+
+
+<style scoped>
+/* 主容器 */
+.article-save-container {
+  min-height: 100vh;
+  margin: 0;
+}
+
+/* 内容包装器 */
+.article-content-wrapper {
+  max-width: 1000px;
+  margin: 0 auto;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  padding: 40px;
+}
+
+/* 文章头部区域 */
+.article-header-section {
+  margin-bottom: 40px;
+  padding-bottom: 24px;
+  border-bottom: 2px solid #ecf0f1;
+}
+
+/* 标题容器 */
+.title-container {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+/* 文章标题 */
+.article-main-title {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: #2c3e50;
+  text-align: center;
+  padding: 10px 0;
+  transition: all 0.3s ease;
+}
+
+.article-main-title::placeholder {
+  color: #bdc3c7;
+  font-weight: 600;
+}
+
+.article-main-title:focus {
+  color: #2c3e50;
+}
+
+/* 文章元信息 */
+.article-meta-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 30px;
+  align-items: center;
+  justify-content: center;
+  color: #7f8c8d;
+  font-size: 0.95rem;
+}
+
+/* 元信息项 */
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+  transition: color 0.3s ease;
+}
+
+.meta-item:hover {
+  color: #3498db;
+}
+
+/* 元信息选择器样式 */
+.meta-select {
+  width: 160px;
+}
+
+.meta-cascader {
+  width: 280px;
+}
+
+/* 编辑器容器 */
+.editor-container {
+  margin-top: 20px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+/* Markdown编辑器样式 */
+.markdown-editor {
+  border-radius: 8px;
+}
+
+/* 响应式设计 - 平板 */
+@media (max-width: 768px) {
+  .article-content-wrapper {
+    padding: 30px 20px;
+    margin: 0 15px;
+    border-radius: 10px;
+  }
+
+  .article-main-title {
+    font-size: 2rem;
+    line-height: 1.4;
+  }
+
+  .article-meta-info {
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+  }
+
+  .meta-item {
+    justify-content: center;
+    width: 100%;
+  }
+
+  .meta-select,
+  .meta-cascader {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+/* 文章简介区域 */
+.article-summary-section {
+  margin-top: 30px;
+  padding: 0 30px 0 30px;
+}
+
+/* 响应式设计 - 手机 */
+@media (max-width: 480px) {
+  .article-save-container {
+    padding: 15px 0;
+  }
+
+  .article-content-wrapper {
+    padding: 20px 15px;
+    margin: 0 10px;
+    border-radius: 8px;
+  }
+
+  .article-main-title {
+    font-size: 1.75rem;
+    line-height: 1.5;
+  }
+
+  .article-meta-info {
+    font-size: 0.9rem;
+    gap: 12px;
+  }
+
+  .meta-select,
+  .meta-cascader {
+    max-width: 100%;
+  }
+}
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+  .article-save-container {
+    background-color: #1a1a1a;
+  }
+
+  .article-content-wrapper {
+    background-color: #2d2d2d;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  }
+
+  .article-header-section {
+    border-bottom-color: #444;
+  }
+
+  .article-main-title {
+    color: #f0f0f0;
+  }
+
+  .article-main-title::placeholder {
+    color: #666;
+  }
+
+  .article-meta-info {
+    color: #bbb;
+  }
+
+  .meta-item:hover {
+    color: #4a9eff;
+  }
+}
+
+/* 级联选择器ul元素自适应高度 */
+:deep(.el-cascader-menu__list) {
+  height: auto !important;
+  max-height: none !important;
+  overflow-y: visible !important;
+}
+
+/* 确保级联选择器的每个菜单项都能正确显示 */
+:deep(.el-cascader-menu) {
+  height: auto !important;
+  min-height: 200px;
+}
+</style>

src/views/home.vue

@@ -1,162 +1,469 @@
-<!-- 文章模板 -->
+<!-- 文章列表组件 -->
 <template>
-  <div>
-    <div class="button-example" @click="aericleClick(items.aur) " v-for="items in datas">
-      <div v-if="items.mg == ''">
-        <h2>{{ items.title }}</h2>
-        <el-text class="mx-1">{{ items.author }}</el-text>
-        <p>{{ items.publishedAt }}</p>
-      </div>
-      <div  v-else="items.mg != ''">
-        <h2>{{ items.title }}</h2>
-        <el-text class="mx-1">{{ items.author }}</el-text>
-        <div>mg</div>
-        <p>{{ items.publishedAt }}</p>
+  <div class="article-list-container">
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <el-skeleton :count="5" />
+    </div>
+
+    <!-- 文章列表 -->
+    <transition-group name="article-item" tag="div"  class="article-list-content"  v-else>
+      <div class="article-card" v-for="article in articleList" :key="article.articleId"
+        @click="handleArticleClick(article)">
+        <h6 class="article-title">{{ article.title }}</h6>
+        <div v-if="article.marked" class="article-special-tag">标记文章</div>
+        <p class="article-content-preview">{{ formatContentPreview(article.content, 150) }}</p>
+        <div class="article-meta-info">
+          <span class="article-publish-date">{{ formatRelativeTime(article.createdAt || article.createTime) }}</span>
+          <span v-if="article.categoryName" class="article-category-badge">{{ article.categoryName }} </span>
+          <span v-if="article.viewCount" class="article-views-count">{{ article.viewCount }} 阅读</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 class="article-status-badge-container" v-if="globalStore.Login">
+            <span v-if="article.status === 0" class="article-status-badge badge badge-warning">草稿</span>
+            <span v-if="article.status === 1" class="article-status-badge badge badge-success">已发表</span>
+            <span v-if="article.status === 2" class="article-status-badge badge badge-danger">已删除</span>
+          </div>
+        </div>
       </div>
+        <!-- 分页区域 -->
+         <el-pagination size="medium" background :layout="pageLayout" v-model:current-page="pageNum" hide-on-single-page="true"  @current-change="changePage"  :page-size="pageSize"  :page-count="totalPages" class="mt-4" />
+    </transition-group>
+    <!-- 空状态 -->
+    <div v-if="!loading && articleList.length === 0" class="empty-state-container">
+      <el-empty description="暂无文章" />
     </div>
   </div>
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
+import { ref, onMounted, watch } from 'vue'
+import { formatRelativeTime } from '@/utils/dateUtils'
+import { formatContentPreview } from '@/utils/stringUtils'
+import { ElMessage } from 'element-plus'
+import { articleService, messageService, categoryAttributeService } from '@/services'
+import PaginationComponent from '@/views/page.vue'
+import { useGlobalStore } from '@/store/globalStore'
+
+// ========== 组件初始化 ==========
+
+// 全局状态管理
+const globalStore = useGlobalStore()
+
+// 路由相关
 const router = useRouter()
-const aericleClick = (aur) => {
-    router.push({
-        path:'/articlecontents/:url',
-        query:{
-            url:aur
-        }
-    })
+const route = useRoute()
+// 分页属性
+const pageNum = ref(1) // 当前页码
+const pageSize = ref(10) // 每页数量
+const totalPages = ref(0) // 总页数
+const pageLayout = ref('pager, next')// 分页布局
+
+// 响应式状态
+const articleList = ref([])
+const loading = ref(false)
+
+
+
+// ========== 分页数据处理 ==========
+
+/**
+ * 处理分页组件的数据更新
+ * @param {Array} data - 分页组件传递的当前页数据
+ */
+
+// ========== 文章数据获取模块 ==========
+
+/**
+ * 根据路由路径获取对应的文章列表
+ * @returns {Promise<Object>} 文章列表响应数据
+ */
+const getArticlesByRoute = async () => {
+  // 检查URL参数，确定获取文章的方式
+  const pathSegment = route.path.split('/')[2]
+  // console.log('当前路由分段:', pathSegment)
+  
+  switch (pathSegment) {
+    case 'aericleattribute':
+      // 按属性类型获取文章
+      const attributeData = globalStore.getValue('attribute')
+      return await articleService.getPagedArticles({attributeid: attributeData?.id}, pageNum.value, pageSize.value)
+    case 'aericlecategory':
+      // 按分类类型获取文章
+      const categoryData = globalStore.getValue('category')
+      return await articleService.getPagedArticles({categoryid: categoryData?.id}, pageNum.value, pageSize.value)
+    case 'aericletitle':
+      // 按标题搜索文章
+      const titleData = globalStore.getValue('articleserarch')
+      console.log('按标题搜索文章:', titleData.name)
+      return await articleService.getPagedArticles({title: titleData?.name}, pageNum.value, pageSize.value)
+    case 'aericlestatus':
+      // 按状态获取文章
+      const statusData = globalStore.getValue('articlestatus')
+      return await articleService.getPagedArticles({status: statusData?.status}, pageNum.value, pageSize.value)
+    default:
+      // 默认获取所有文章
+      // console.log('获取所有文章列表')
+      return await articleService.getPagedArticles({status: 1}, pageNum.value, pageSize.value)
+  }
 }
-const datas = [
-  {
-    title: '测试1',
-    author: '这是文章模块测试',
-    aur: '链接',
-    mg: '11',
-    publishedAt: '2016-04-10'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-]
+
+/**
+ * 为单篇文章补充额外信息（留言数量、分类名称等）
+ * @param {Object} article - 文章对象
+ * @returns {Promise<Object>} 补充信息后的文章对象
+ */
+const enrichArticleWithExtraInfo = async (article) => {
+  try {
+    // 获取留言数量
+    const messageResponse = await messageService.getMessagesByArticleId(article.articleid)
+    // 获取分类名称
+    const categoryResponse = await categoryAttributeService.getAttributeById(article.attributeid)
+    
+    // 设置分类名称
+    article.categoryName = categoryResponse?.data?.attributename || '未分类'
+    // 设置评论数量
+    article.commentCount = messageResponse?.data?.length || 0
+    // 标准化标记字段名
+    article.marked = article.mg
+    
+    return article
+  } catch (err) {
+    console.error(`获取文章${article.articleid}额外信息失败:`, err)
+    // 错误情况下设置默认值
+    article.commentCount = 0
+    article.categoryName = '未分类'
+    return article
+  }
+}
+
+/**
+ * 批量为文章列表补充额外信息
+ * @param {Array} articles - 原始文章列表
+ * @returns {Promise<Array>} 补充信息后的文章列表
+ */
+const enrichArticlesWithExtraInfo = async (articles) => {
+  const enrichedArticles = []
+  
+  for (const article of articles) {
+    const enrichedArticle = await enrichArticleWithExtraInfo(article)
+    enrichedArticles.push(enrichedArticle)
+  }
+  
+  return enrichedArticles
+}
+
+
+/**
+ * 获取文章列表主函数
+ */
+const fetchArticles = async () => {
+  let response = {}
+  
+  try {
+    loading.value = true
+    
+    // 1. 根据路由获取文章列表
+    response = await getArticlesByRoute()
+    // console.log('更新后的文章列表:', response)
+    
+    // 2. 确保数据存在
+    if (!response.data.content || !Array.isArray(response.data.content)) {
+      articleList.value = []
+      return
+    }
+    
+    // 3. 为文章列表补充额外信息
+    const enrichedArticles = await enrichArticlesWithExtraInfo(response.data.content)
+    
+    // 4. 更新文章列表
+    articleList.value = enrichedArticles
+  } catch (error) {
+    console.error('获取文章列表失败:', error)
+    ElMessage.error('获取文章列表失败，请稍后重试')
+  } finally {
+    loading.value = false
+  }
+}
+
+// ========== 文章交互模块 ==========
+
+/**
+ * 处理文章点击事件
+ * @param {Object} article - 文章对象
+ */
+const handleArticleClick = (article) => {
+  try {
+    // 增加文章浏览量（异步操作，不阻塞后续流程）
+    articleService.incrementArticleViews(article.articleId).catch(err => {
+      console.error('增加文章浏览量失败:', err)
+    })
+    
+    // 清除之前的文章信息
+    globalStore.removeValue('articleInfo')
+    
+    // 存储文章信息到全局状态
+    globalStore.setValue('articleInfo', article)
+    
+    // 跳转到文章详情页
+    router.push({
+      path: '/article',
+    })
+  } catch (error) {
+    console.error('处理文章点击事件失败:', error)
+    ElMessage.error('操作失败，请稍后重试')
+  }
+}
+/**
+ * 处理分页变化事件
+ * @param {number} newPage - 新的页码
+ */
+const changePage = (newPage) => {
+  fetchArticles()
+  // 根据当前页码优化分页布局
+    if (page === 1) {
+        // 第一页只显示页码和下一页按钮
+        pageLayout.value = 'pager, next'
+    } else if (page === totalPages.value) {
+        // 最后一页只显示上一页按钮和页码
+        pageLayout.value = 'prev, pager'
+    } else {
+        // 中间页显示完整的上一页、页码、下一页
+        pageLayout.value = 'prev, pager, next'
+    }
+}
+// ========== 生命周期和监听器 ==========
+
+/**
+ * 处理路由变化的回调函数
+ */
+const handleRouteChange = () => {
+  fetchArticles()
+  // console.log('路由变化，重新获取文章列表') 
+}
+
+/**
+ * 处理文章列表变化的回调函数
+ * @param {Array} newList - 新的文章列表
+ */
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchArticles()
+})
+
+// 监听路由变化，确保刷新时也能重新获取数据
+watch(
+  // 监听路由路径和查询参数变化
+  () => [route.path, route.query],
+  // 路由变化时触发获取文章列表
+  handleRouteChange,
+  { deep: true }
+)
+
+// 监听原始文章列表变化，确保初始数据正确显示
+watch(
+  () => articleList.value,
+  { deep: true }
+)
 </script>
+
 <style scoped>
-.button-example {
-  border-radius: 10px;
+/* 文章列表容器样式 */
+.article-list-container {
+  max-width: 100%;
+}
+
+/* 加载状态容器 */
+.loading-container {
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+/* 文章卡片样式 */
+.article-card {
+  text-align: left;
+  border-radius: 12px;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 12px;
   background-color: rgba(255, 255, 255, 0.85);
-  padding: 15px;
-  margin-bottom: 30px;
+  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);
 }
 
-.button-example {
-    transition: all 0.4s ease;
-    position: relative;
-    overflow: hidden;
+/* 文章卡片悬停渐变效果 */
+.article-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg,
+      rgba(255, 255, 255, 0.6) 0%,
+      rgba(255, 255, 255, 0.2) 50%,
+      rgba(255, 255, 255, 0.05) 100%);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.4s ease;
 }
 
-.button-example::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, 
-              rgba(255,255,255,0.6) 0%, 
-              rgba(255,255,255,0.2) 50%,
-              rgba(255,255,255,0.05) 100%);
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.4s ease;
+/* 文章卡片悬停效果 */
+.article-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15),
+    0 0 30px rgba(255, 255, 255, 0.2);
+  border-color: rgba(52, 152, 219, 0.3);
 }
 
-.button-example: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);
+.article-card:hover::before {
+  opacity: 1;
 }
 
-.button-example:hover::before {
-    opacity: 1;
+/* 文章过渡动画 */
+.article-item {
+  transition: all 0.4s ease;
+}
+
+/* 文章标题样式 */
+.article-title {
+  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-special-tag {
+  display: inline-block;
+  padding: 3px 10px;
+  background-color: rgba(52, 152, 219, 0.15);
+  color: #3498db;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  align-self: flex-start;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.article-list-content {
+  position: relative;
+  padding: 0 0 30px 0;
+}
+.pagination-container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+/* 文章内容预览样式 */
+.article-content-preview {
+  color: #555;
+  line-height: 1.6;
+  margin: 0;
+  font-size: 0.95rem;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 文章元信息容器 */
+.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);
+}
+
+/* 空状态容器样式 */
+.empty-state-container {
+  text-align: center;
+  padding: 60px 20px;
+  color: #7f8c8d;
+}
+
+/* 过渡动画配置 */
+.article-item-enter-active,
+.article-item-leave-active {
+  transition: all 0.5s ease;
+}
+
+.article-item-enter-from,
+.article-item-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+/* 响应式设计 - 平板和手机 */
+@media (max-width: 768px) {
+  .article-list-container {
+  }
+
+  .article-card {
+    padding: 18px;
+    margin-bottom: 18px;
+    gap: 10px;
+  }
+
+  .article-title {
+    font-size: 1.125rem;
+  }
+
+  .article-meta-info {
+    font-size: 0.8rem;
+    gap: 8px;
+  }
+
+  .article-content-preview {
+    font-size: 0.9rem;
+  }
+
+  /* 响应式元信息分隔符 */
+  .article-views-count::before,
+  .article-category-badge::before,
+  .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>

src/views/leftmodlue.vue

@@ -1,181 +0,0 @@
-<template>
-    <div id="alld">
-        <div id="top">
-            <div class="top1">
-                <h3>小颠公告栏</h3>
-            </div>
-            <div class="top2">
-                <p>站主发癫中请勿靠近</p>
-            </div>
-        </div>
-        <div id="cont">
-            <div class="cont1">
-                <h2>小颠片刻</h2>
-                <p>左眼右右眼左，四十五度成就美</p>
-            </div>
-            <div class="cont2">
-                <el-menu class="el-menu-vertical-demo" @select="handleSelect">
-                    <el-menu-item index="/:type">
-                        <el-icon>
-                        </el-icon>
-                        <span>首页</span>
-                    </el-menu-item>
-                    <el-menu-item index="/aericle">
-                        <el-icon>
-                        </el-icon>
-                        <span>文章</span>
-                    </el-menu-item>
-                    <el-menu-item index="/nonsense">
-                        <el-icon>
-                        </el-icon>
-                        <span>疯言疯语</span>
-                    </el-menu-item>
-                </el-menu>
-            </div>
-        </div>
-        <div id="bot" :class="{ 'botrelative': scrollY }">
-            <el-tabs v-model="activeName" class="demo-tabs">
-                <el-tab-pane label="个人简介" name="first">
-                    <div class="mylogo">
-                        <el-avatar :src="state" />
-                    </div>
-                    <p>清疯不颠</p>
-                    <p>···重度精神失常患者···</p>
-                </el-tab-pane>
-                <el-tab-pane label="功能" name="second">
-                </el-tab-pane>
-            </el-tabs>
-        </div>
-    </div>
-</template>
-<script lang="ts" setup>
-import { reactive, ref, onMounted, onUnmounted } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const activeName = ref('first')
-const state = reactive({
-    circleUrl:
-        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
-    squareUrl:
-        'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
-    sizeList: ['small', '', 'large'] as const,
-})
-
-const handleSelect = (key: string, keyPath: string[]) => {
-    router.push({
-        path: key
-    })
-}
-// 滚动事件
-const scrollY = ref(false);
-const handleScroll = () => {
-    const scrollYmo = window.scrollY;
-    scrollY.value = scrollYmo > 1100;
-};
-window.addEventListener('scroll', handleScroll);
-
-</script>
-<style>
-#alld div {
-    margin-bottom: 15px;
-}
-
-#top {
-    height: 100px;
-    border-radius: 10px;
-    background-color: rgb(102, 161, 216, 0.9);
-    text-align: left;
-    padding: 15px;
-}
-
-#top .top2 p {
-    font-size: 15px;
-}
-
-#cont {
-    padding: 15px;
-    height: 350px;
-    border-radius: 10px;
-    padding: 0;
-}
-/*  */
-#cont .cont1 {
-    border-radius:10px 10px 0 0;
-    padding: 15px;
-    text-align: center;
-    margin-bottom: 0;
-    background-color: rgb(102, 161, 216, 0.9);
-}
-#cont .cont2{
-    padding: 10px 0;
-    border-radius:0 0 10px 10px;
-    background-color: rgba(215, 224, 218, 0.9);
-}
-#cont .cont2 .el-menu-vertical-demo{
-    display: inline;
-}
-#cont .cont2 .el-menu-vertical-demo .el-menu-item:hover {
-    background-color: rgb(255, 255, 255 , 0.7);
-}
-.el-menu-vertical-demo {
-    background-color: rgb(0, 0, 0, 0);
-    border-right: 0px;
-}
-
-#cont div,
-#bot div {
-    margin-bottom: 0%;
-}
-/*  */
-#bot {
-    padding: 15px;
-    border-radius: 10px;
-    background-color: rgb(0, 233, 70, 0.7);
-    transition: all 0.4s ease;
-}
-
-#bot.botrelative {
-    transition: all 0.4s ease;
-    position: sticky;
-    top: 20px;
-}
-
-.demo-tabs {
-    text-align: center;
-    color: #6b778c;
-}
-
-
-
-.el-tabs__nav-scroll {
-    height: 45px;
-    margin-bottom: 5px;
-}
-
-.el-tabs__nav {
-    width: 100%;
-}
-
-.el-tabs__item {
-    width: 50%;
-}
-
-.el-tabs__nav-wrap:after {
-    height: 0px;
-}
-
-.mylogo {
-    height: 80px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-}
-
-.el-avatar:hover {
-    transform: scale(2);
-    z-index: 2;
-    transition: all 0.4s ease;
-}
-</style>

src/views/login.vue

@@ -0,0 +1,561 @@
+<template>
+  <div class="login-container">
+    <div class="login-form-wrapper">
+      <!-- 登录表单卡片 -->
+      <div class="login-card">
+        <!-- 标题区域 -->
+        <div class="login-header">
+          <h2 class="login-title">欢迎回来</h2>
+          <p class="login-subtitle">请登录您的账号继续访问</p>
+        </div>
+
+        <!-- 表单区域 -->
+        <form @submit.prevent="handleLogin" class="login-form">
+          <!-- 用户名输入 -->
+          <div class="form-group">
+            <div class="input-wrapper">
+              <!-- <i class="el-icon-user input-icon"></i> -->
+              <input id="username" v-model="loginForm.username" type="text" placeholder="请输入用户名" class="form-input"
+                :class="{ 'input-error': loginForm.username }" @blur="validateField('username')" />
+            </div>
+            <span v-if="errors.username" class="error-message">{{ errors.username }}</span>
+          </div>
+
+          <!-- 密码输入 -->
+          <div class="form-group">
+            <div class="input-wrapper">
+              <!-- <i class="el-icon-lock input-icon"></i> -->
+              <input id="password" v-model="loginForm.password" :type="showPassword ? 'text' : 'password'"
+                placeholder="请输入密码" class="form-input" :class="{ 'input-error': loginForm.password }"
+                @blur="validateField('password')" />
+              <i :class="showPassword ? 'el-icon-view' : 'el-icon-view-off'" class="toggle-password-icon"
+                @click="togglePassword"></i>
+            </div>
+            <span v-if="errors.password" class="error-message">{{ errors.password }}</span>
+          </div>
+
+          <!-- 记住我和忘记密码 -->
+          <div class="form-options">
+            <label class="remember-me">
+              <input type="checkbox" v-model="loginForm.rememberMe" class="remember-checkbox" />
+              <span>记住我</span>
+            </label>
+            <a href="#" class="forgot-password" @click.prevent="handleForgotPassword">忘记密码？</a>
+          </div>
+
+          <!-- 登录按钮 -->
+          <button type="submit" class="login-button" :disabled="isLoading">
+            <span v-if="!isLoading">登录</span>
+            <span v-else class="loading-text">
+              <i class="el-icon-loading"></i> 登录中...
+            </span>
+          </button>
+
+          <!-- 其他登录方式 -->
+          <div class="other-login-methods">
+            <div class="divider">
+              <span>其他登录方式</span>
+            </div>
+            <div class="social-login-buttons">
+              <button type="button" class="social-button wechat" @click="handleSocialLogin('wechat')">
+                <i class="el-icon-chat-dot-square"></i>
+              </button>
+              <button type="button" class="social-button qq" @click="handleSocialLogin('qq')">
+                <i class="el-icon-message"></i>
+              </button>
+              <button type="button" class="social-button github" @click="handleSocialLogin('github')">
+                <i class="el-icon-document-checked"></i>
+              </button>
+            </div>
+          </div>
+        </form>
+
+        <!-- 注册提示 -->
+        <div class="register-prompt">
+          <span>还没有账号？</span>
+          <router-link to="/register" class="register-link">立即注册</router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { loginService } from '@/services'
+import { ElMessage } from 'element-plus'
+// 全局状态管理
+import { useGlobalStore } from '@/store/globalStore'
+const globalStore = useGlobalStore()
+const router = useRouter()
+const errors = ref({
+  username: null,
+  password: null,
+})
+const loginForm = reactive({
+  username: null,
+  password: null,
+})
+
+// 切换密码显示状态
+const togglePassword = () => {
+  form.showPassword = !form.showPassword
+}
+
+// 验证单个字段
+const validateField = (field) => {
+  // console.log('validateField', field)
+  errors.value = {}
+
+  if (field === 'username' && !loginForm.username) {
+    errors.value.username = '请输入用户名'
+  }
+
+  if (field === 'password' && !loginForm.password) {
+    errors.value.password = '请输入密码'
+  } else if (field === 'password' && loginForm.password.length < 6) {
+    errors.value.password = '密码长度至少为6位'
+  }
+}
+
+// 验证整个表单
+const validateForm = () => {
+  errors.value = {}
+  let isValid = true
+
+  if (!loginForm.username) {
+    errors.value.username = '请输入用户名'
+    isValid = false
+  }
+
+  if (!loginForm.password) {
+    errors.value.password = '请输入密码'
+    isValid = false
+  } else if (loginForm.password.length < 6) {
+    errors.value.password = '密码长度至少为6位'
+    isValid = false
+  }
+  return isValid;
+}
+// 处理登录
+const handleLogin = async () => {
+  if (!validateForm()) {
+    return
+  }
+  try {
+    // 模拟登录请求
+    let user = await (await loginService.login(loginForm)).data
+    if (!user) {
+      ElMessage.error('登录失败，请检查用户名和密码')
+      return
+    }
+    // console.log('登录成功', user)
+    // 这里应该是实际的登录API调用
+    // console.log('登录请求数据:', loginForm)
+
+    // 模拟登录成功
+    ElMessage.success('登录成功')
+    // 登录成功后，设置全局状态为已登录
+    globalStore.setLoginStatus(true)
+    // 登录成功后，添加全局状态
+    globalStore.setValue('loginhomestatus', {
+      status: 1 // 2:删除  1:已发布 0:发布登录
+    })
+    // console.log('globalStore.Login', globalStore.Login)
+    // 保存登录状态token
+    if (user.token) {
+      localStorage.setItem('token', user.token)
+    }
+    if (user.username) {
+      // 记住用户名
+      globalStore.setUsername(user.username)
+    }
+    // 跳转到首页
+    router.push('/')
+  } catch (error) {
+    ElMessage.error('登录失败，请检查用户名和密码')
+    console.error('登录错误:', error)
+  } finally {
+    globalStore.setLoading(false)
+  }
+}
+
+// 处理忘记密码
+const handleForgotPassword = () => {
+  ElMessage.info('忘记密码功能开发中')
+}
+// 处理第三方登录
+const handleSocialLogin = (provider) => {
+  ElMessage.info(`${provider} 登录功能开发中`)
+}
+
+// mounted() {
+//   // 从localStorage中恢复用户名
+//   const savedUsername = localStorage.getItem('username')
+//   if (savedUsername) {
+//     loginForm.username = savedUsername
+//     loginForm.rememberMe = true
+//   }
+// }
+</script>
+
+<style scoped>
+/* 登录页面容器 */
+.login-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f7fa;
+  padding: 20px;
+  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 添加背景装饰 */
+.login-container::before,
+.login-container::after {
+  content: '';
+  position: absolute;
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  z-index: 0;
+}
+
+.login-container::before {
+  top: -100px;
+  right: -100px;
+}
+
+.login-container::after {
+  bottom: -100px;
+  left: -100px;
+}
+
+/* 登录表单包装器 */
+.login-form-wrapper {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 450px;
+}
+
+/* 登录卡片 */
+.login-card {
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  padding: 40px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.login-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
+}
+
+/* 登录头部 */
+.login-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.login-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: #333;
+  margin-bottom: 10px;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.login-subtitle {
+  font-size: 16px;
+  color: #666;
+  margin: 0;
+}
+
+/* 表单样式 */
+.login-form {
+  width: 100%;
+}
+
+.form-group {
+  margin-bottom: 24px;
+  position: relative;
+}
+
+.form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.form-input {
+  width: 100%;
+  height: 48px;
+  padding: 0 45px;
+  border: 2px solid #e1e5e9;
+  border-radius: 12px;
+  font-size: 16px;
+  transition: all 0.3s ease;
+  background-color: #fafbfc;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #667eea;
+  background-color: white;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.form-input.input-error {
+  border-color: #f56565;
+}
+
+.input-icon {
+  position: absolute;
+  left: 15px;
+  color: #94a3b8;
+  font-size: 18px;
+}
+
+.toggle-password-icon {
+  position: absolute;
+  right: 15px;
+  color: #94a3b8;
+  font-size: 18px;
+  cursor: pointer;
+  transition: color 0.3s ease;
+}
+
+.toggle-password-icon:hover {
+  color: #667eea;
+}
+
+.error-message {
+  display: block;
+  font-size: 12px;
+  color: #f56565;
+  margin-top: 4px;
+}
+
+/* 表单选项 */
+.form-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.remember-me {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.remember-checkbox {
+  margin-right: 8px;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.forgot-password {
+  font-size: 14px;
+  color: #667eea;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.forgot-password:hover {
+  color: #5a67d8;
+  text-decoration: underline;
+}
+
+/* 登录按钮 */
+.login-button {
+  width: 100%;
+  height: 48px;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-button:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
+}
+
+.login-button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.login-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.loading-text {
+  display: flex;
+  align-items: center;
+}
+
+.loading-text i {
+  margin-right: 8px;
+}
+
+/* 其他登录方式 */
+.other-login-methods {
+  margin-top: 30px;
+}
+
+.divider {
+  position: relative;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.divider span {
+  position: relative;
+  background: white;
+  padding: 0 20px;
+  color: #666;
+  font-size: 14px;
+}
+
+.divider::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #e1e5e9;
+  z-index: 0;
+}
+
+.social-login-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+
+.social-button {
+  width: 44px;
+  height: 44px;
+  border: 2px solid #e1e5e9;
+  border-radius: 50%;
+  background: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  transition: all 0.3s ease;
+}
+
+.social-button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.social-button.wechat:hover {
+  border-color: #07c160;
+  color: #07c160;
+}
+
+.social-button.qq:hover {
+  border-color: #1da1f2;
+  color: #1da1f2;
+}
+
+.social-button.github:hover {
+  border-color: #333;
+  color: #333;
+}
+
+/* 注册提示 */
+.register-prompt {
+  text-align: center;
+  margin-top: 30px;
+  font-size: 14px;
+  color: #666;
+}
+
+.register-link {
+  color: #667eea;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.3s ease;
+}
+
+.register-link:hover {
+  color: #5a67d8;
+  text-decoration: underline;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .login-container {
+    padding: 10px;
+  }
+
+  .login-card {
+    padding: 30px 20px;
+    border-radius: 16px;
+  }
+
+  .login-title {
+    font-size: 24px;
+  }
+
+  .form-input {
+    height: 44px;
+    font-size: 15px;
+  }
+
+  .login-button {
+    height: 44px;
+  }
+}
+
+@media (max-width: 480px) {
+  .login-card {
+    padding: 25px 15px;
+  }
+
+  .social-login-buttons {
+    gap: 12px;
+  }
+
+  .social-button {
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
+  }
+}
+</style>

src/views/markdown.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="markdown-viewer">
+        <div v-if="loading" class="loading-state">加载中...</div>
+        <div v-else-if="error" class="error-state">加载失败: {{ error }}</div>
+        <!-- <v-md-editor 
+            v-else
+            class="editor"
+            v-model="content"
+            mode="preview"
+            :preview-theme="theme"
+            :height="height"
+        /> -->
+           <MdPreview 
+            v-else
+           :modelValue="content"
+            class="editor" 
+            previewTheme="github" 
+            codeTheme="github" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+// 导入v-md-editor相关组件和样式
+import { MdPreview } from 'md-editor-v3'
+import 'md-editor-v3/lib/style.css'
+// 定义组件属性
+const props = defineProps({
+    // 从父组件传入的markdownid内容
+    markdownContent: {
+        type: String,
+        default: ''
+    },
+})
+
+// 响应式数据
+const content = ref('')
+const loading = ref(false)
+const error = ref('')
+
+// 判断内容是否为HTML格式
+
+// 从API获取markdown内容
+const loadMarkdown = async () => {
+    // 如果父组件提供了markdown内容，直接使用
+    loading.value = true
+    error.value = ''
+    try {
+        content.value = props.markdownContent
+    } catch (err) {
+        error.value = err instanceof Error ? err.message : '未知错误'
+        console.error('加载markdown失败:', err)
+    } finally {
+        loading.value = false
+    }
+}
+
+// 组件挂载时加载markdown
+onMounted(() => {
+    loadMarkdown()
+})
+</script>
+
+<style scoped>
+.markdown-viewer {
+    text-align: left;
+    width: 100%;
+    height: 100%;
+}
+
+.editor {
+    box-shadow: 0rgba(0, 0, 0, 0);
+    transition: box-shadow 0.3s ease;
+    background-color: rgba(255, 255, 255,0);
+    padding: 0 0 0 20px;
+}
+
+/* 加载状态样式 */
+.loading-state {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 60px 20px;
+    color: #606266;
+    font-size: 14px;
+    background-color: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+}
+
+/* 错误状态样式 */
+.error-state {
+    padding: 40px 20px;
+    background-color: #fef0f0;
+    border: 1px solid #fbc4c4;
+    border-radius: 8px;
+    color: #f56c6c;
+    font-size: 14px;
+    text-align: center;
+}
+.v-md-editor.v-md-editor--preview {
+    background-color: rgba(240, 240, 240, 0);
+}
+/* 确保编辑器内容在移动设备上正常显示 */
+@media (max-width: 768px) {
+    .editor {
+        border-radius: 4px;
+    }
+    
+    .loading-state,
+    .error-state {
+        padding: 30px 15px;
+        font-size: 13px;
+    }
+}
+</style>

src/views/nonsense.vue

@@ -1,7 +1,411 @@
 <template>
-    <div id="allstyle">
-        <div class="header">
-            <h1>疯言疯语</h1>
+  <div class="nonsense-container">
+    <div class="nonsense-list">
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-state-container">
+        <el-skeleton :count="5" />
+      </div>
+      <!-- 错误状态 -->
+      <div v-if="error" class="error-state-container">
+        <div>加载失败，请稍后重试</div>
+        <el-button type="primary" @click="handleRetry">重试</el-button>
+      </div>
+      <!-- 空状态 -->
+      <div v-if="displayedNonsenseList.length === 0" class="empty-state-container">
+        <div>暂无吐槽内容</div>
+      </div>
+      <div class="nonsense-item" v-for="item in displayedNonsenseList" :key="item.id">
+        <div class="nonsense-meta-info">
+          <span class="nonsense-time">{{ formatRelativeTime(item.time) }}</span>
+          <div class="article-status-badge-container" v-if="globalStore.Login">
+            <span v-if="item.status === 0" class="article-status-badge badge badge-warning">未发表</span>
+            <span v-if="item.status === 1" class="article-status-badge badge badge-success">已发表</span>
+            <span v-if="item.status === 2" class="article-status-badge badge badge-danger">已删除</span>
+            <span class="edit-button" @click="handleEdit(item)">编辑</span>
+            <span class="delete-button" @click="handleDelete(item.id)">删除</span>
+          </div>
         </div>
+        <div class="nonsense-content">
+          <span v-for="(char, index) in item.content.split('')" :key="index" :ref="el => setCharRef(el, item.id, index)"
+            :style="getCharStyle(item.id, index)">{{ char }}</span>
+        </div>
+      </div>
+      // 分页区域
+      <PaginationComponent class="pagination-container" :list="nonsenseList" :pageSize="10"
+        @changePage="handleCurrentDataUpdate" />
     </div>
+  </div>
 </template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { nonsenseService } from '@/services'
+import { ElMessage } from 'element-plus'
+import { ElMessageBox } from 'element-plus'
+import PaginationComponent from '@/views/page.vue'
+import { formatRelativeTime } from '@/utils/dateUtils'
+import { useGlobalStore } from '@/store/globalStore'
+const globalStore = useGlobalStore()
+/**
+ * 吐槽数据列表
+ * 仅站长可见/可发
+ */
+const nonsenseList = ref([])
+
+// 存储字符引用和样式的映射
+const charRefs = ref(new Map())
+const charStyles = ref(new Map())
+// 显示的吐槽内容列表
+const displayedNonsenseList = ref([])
+// 加载状态
+const loading = ref(false)
+// 错误状态
+const error = ref(false)
+
+// 处理分页数据更新
+const handleCurrentDataUpdate = (data) => {
+  displayedNonsenseList.value = data
+  // console.log(data)
+}
+
+// 重试加载
+const handleRetry = () => {
+  error.value = false
+  loadNonsenseList()
+}
+
+// 定时器引用
+let colorChangeTimer = null
+
+/**
+ * 加载所有吐槽内容
+ */
+const loadNonsenseList = async () => {
+  // 设置加载状态
+  loading.value = true
+  error.value = false
+  try {
+    const response = await nonsenseService.getNonsenseByStatus(1)
+    if (response.code === 200) {
+      nonsenseList.value = response.data
+    } else {
+      ElMessage.error('加载吐槽内容失败')
+      error.value = true
+    }
+  } catch (err) {
+    console.error('加载吐槽内容失败:', err)
+    error.value = true
+  } finally {
+    // 结束加载状态
+    loading.value = false
+    // console.log('加载吐槽内容完成')
+  }
+}
+// 编辑吐槽内容
+const handleEdit = (item) => {
+  // 清除更新文章状态
+
+  ElMessageBox.prompt('请输入您的疯言疯语：', '发表疯言疯语', {
+    confirmButtonText: '保存',
+    cancelButtonText: '取消',
+    inputValue: item.content,
+    inputType: 'textarea',
+    inputRows: 4,
+    showCancelButton: true
+  }).then(({ value }) => {
+    // 保存疯言疯语
+    updateNonsense(value, item.id)
+  }).catch(() => {
+    // 取消操作，静默处理
+  })
+}
+// 更新吐槽内容
+const updateNonsense = (content, id) => {
+  if (!content || content.trim() === '') {
+    ElMessage.warning('内容不能为空')
+    return
+  }
+  // 调用服务更新疯言疯语
+  nonsenseService.updateNonsense({
+    id,
+    content: content.trim(),
+    time: new Date(),
+    status: 1
+  }).then(response => {
+    if (response.code === 200) {
+      ElMessage.success('疯言疯语更新成功')
+      loadNonsenseList()
+    } else {
+      ElMessage.error(response.message || '更新失败')
+    }
+  }).catch(err => handleErrorResponse(err, '更新失败'))
+}
+// 删除吐槽内容
+const handleDelete = async (id) => {
+  try {
+    // 确认删除
+    const confirm = window.confirm('确定删除吗？')
+    if (!confirm) return
+    const response = await nonsenseService.deleteNonsense(id)
+    if (response.code === 200) {
+      ElMessage.success('删除成功')
+      loadNonsenseList()
+    } else {
+      ElMessage.error('删除失败')
+    }
+  } catch (error) {
+    console.error('删除失败:', error)
+  }
+}
+// 设置字符引用
+const setCharRef = (el, itemId, index) => {
+  if (el) {
+    const key = `${itemId}_${index}`
+    charRefs.value.set(key, el)
+  }
+}
+
+// 获取字符样式
+const getCharStyle = (itemId, index) => {
+  const key = `${itemId}_${index}`
+  return charStyles.value.get(key) || {}
+}
+
+// 生成随机颜色
+const getRandomColor = () => {
+  const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#6c5ce7', '#e84393', '#00b894', '#fdcb6e']
+  return colors[Math.floor(Math.random() * colors.length)]
+}
+
+// 随机改变部分字体颜色并添加信号故障效果
+const randomChangeColors = () => {
+  const keys = Array.from(charRefs.value.keys())
+  if (keys.length === 0) return
+
+  // 随机选择20-30%的字符改变颜色
+  const countToChange = Math.floor(keys.length * (Math.random() * 0.1 + 0.2))
+  const shuffledKeys = [...keys].sort(() => 0.5 - Math.random())
+  const selectedKeys = shuffledKeys.slice(0, countToChange)
+
+  // 创建信号故障效果
+  createSignalGlitchEffect(selectedKeys)
+}
+
+// 创建数字噪点效果
+const createDigitalNoiseEffect = (selectedKeys) => {
+  // 噪点字符集
+  const noiseChars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+-=[]{}|;:,.<>?';
+
+  selectedKeys.forEach(key => {
+    const charElement = charRefs.value.get(key);
+    if (charElement) {
+      const rect = charElement.getBoundingClientRect();
+      const container = charElement.closest('.nonsense-item');
+      const containerRect = container.getBoundingClientRect();
+
+      // 生成3-5个噪点
+      const noiseCount = Math.floor(Math.random() * 3) + 3;
+
+      for (let i = 0; i < noiseCount; i++) {
+        const noiseEl = document.createElement('span');
+        noiseEl.textContent = noiseChars.charAt(Math.floor(Math.random() * noiseChars.length));
+
+        // 随机位置相对于原字符
+        const x = Math.random() * 30 - 20; // -20到20px
+        const y = Math.random() * 20 - 15; // -15到15px
+
+        // 随机大小和透明度
+        const size = Math.random() * 8 + 8; // 8-16px
+        const opacity = Math.random() * 0.6 + 0.2; // 0.2-0.8
+
+        noiseEl.style.cssText = `
+          position: absolute;
+          left: ${rect.left - containerRect.left + x}px;
+          top: ${rect.top - containerRect.top + y}px;
+          font-size: ${size}px;
+          opacity: ${opacity};
+          color: ${getRandomColor()};
+          pointer-events: none;
+          z-index: 1;
+          font-family: monospace;
+          transition: all 0.2s ease;
+        `;
+        container.appendChild(noiseEl);
+
+        // 噪点逐渐消失
+        setTimeout(() => {
+          noiseEl.style.opacity = '0';
+          setTimeout(() => {
+            if (container.contains(noiseEl)) {
+              container.removeChild(noiseEl);
+            }
+          }, 200);
+        }, Math.random() * 300 + 200); // 200-500ms后开始消失
+      }
+    }
+  });
+};
+
+// 创建信号故障效果
+const createSignalGlitchEffect = (selectedKeys) => {
+  // 第一步：随机偏移字符位置，模拟信号干扰
+  selectedKeys.forEach(key => {
+    const glitchOffset = {
+      transform: `translate(${Math.random() * 6 - 3}px, ${Math.random() * 6 - 3}px)`,
+      opacity: Math.random() * 0.4 + 0.6, // 随机透明度
+      transition: 'all 0.1s ease'
+    }
+    charStyles.value.set(key, glitchOffset)
+  })
+
+  // 同时创建数字噪点效果
+  createDigitalNoiseEffect(selectedKeys);
+
+  // 第二步：快速恢复并闪烁
+  setTimeout(() => {
+    selectedKeys.forEach(key => {
+      const flashStyle = {
+        transform: 'translate(0, 0)',
+        opacity: Math.random() > 0.5 ? 0 : 1, // 闪烁效果
+        transition: 'all 0.05s ease'
+      }
+      charStyles.value.set(key, flashStyle)
+    })
+
+    // 第三步：最终设置新颜色
+    setTimeout(() => {
+      selectedKeys.forEach(key => {
+        const finalStyle = {
+          color: getRandomColor(),
+          opacity: 1,
+          transform: 'translate(0, 0)',
+          transition: 'all 0.3s ease'
+        }
+        charStyles.value.set(key, finalStyle)
+      })
+    }, 80)
+  }, 100)
+}
+
+// 组件挂载时获取数据并启动定时器
+onMounted(() => {
+  loadNonsenseList()
+
+  // 启动定时器
+  colorChangeTimer = setInterval(randomChangeColors, 1000)
+})
+
+// 组件卸载时清除定时器
+onBeforeUnmount(() => {
+  if (colorChangeTimer) {
+    clearInterval(colorChangeTimer)
+    colorChangeTimer = null
+  }
+})
+</script>
+
+<style scoped>
+/* 吐槽页面主容器样式 */
+.nonsense-container {
+  /* background-color: rgba(255, 255, 255, 0.85); */
+  border-radius: 12px;
+  /* box-shadow: 0 2px 12px rgba(0,0,0,0.06); */
+  transition: box-shadow 0.3s ease;
+}
+
+/* 吐槽页面主容器悬浮效果 */
+.nonsense-container:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+}
+
+/* 吐槽头部样式 */
+.nonsense-header {
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.nonsense-header h1 {
+  font-size: 2.2rem;
+  margin-bottom: 8px;
+  color: #409eff;
+  letter-spacing: 2px;
+}
+
+.nonsense-description {
+  color: #888;
+  font-size: 1rem;
+  margin-bottom: 0;
+}
+
+/* 吐槽列表样式 */
+.nonsense-list {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+/* 吐槽项样式 */
+.nonsense-item {
+  background-color: rgba(255, 255, 255, 0.85);
+  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, transform 0.2s ease;
+}
+
+/* 吐槽项悬浮效果 */
+.nonsense-item:hover {
+  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.12);
+  transform: translateY(-2px);
+}
+
+/* 吐槽元信息样式 */
+.nonsense-meta-info {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-size: 13px;
+  color: #aaa;
+  margin-bottom: 8px;
+  text-align: right;
+}
+
+.nonsense-meta-info span {
+  padding: 4px 8px;
+  margin-right: 8px;
+}
+
+/* 吐槽内容样式 */
+.nonsense-content {
+  font-size: 1.08rem;
+  color: #333;
+  line-height: 1.8;
+  word-break: break-all;
+  font-style: italic;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .nonsense-container {
+    margin: 0;
+  }
+
+  .nonsense-header h1 {
+    font-size: 1.4rem;
+  }
+
+  .nonsense-content {
+    font-size: 0.98rem;
+    line-height: 1.6;
+  }
+
+  /* .nonsense-list {
+    gap: 12px;
+  } */
+
+  .nonsense-item {
+    padding: 14px 16px 10px 16px;
+  }
+}
+</style>

src/views/page.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="pagination-container">
+    <!-- 数据渲染区域 -->
+     
+    <!-- 分页按钮区域 - 只在需要分页时显示（totalPages > 0 且 list.length <= pageSize） -->
+    <div class="pagination-controls" v-if="totalPages > 1 ">
+      <button 
+        v-for="page in totalPages" 
+        :key="page"
+        :class="['pagination-btn', { active: currentPage === page }]"
+        @click="changePage(page)"
+      >
+        {{ page }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+
+// 定义组件名称
+defineOptions({
+  name: 'PaginationComponent'
+})
+
+// 定义props
+interface Props {
+  list: any[]
+  pageSize?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  list: () => [],
+  pageSize: 10
+})
+
+// 定义响应式数据
+const currentPage = ref(1)
+const groupedData = ref<any[]>([])
+
+// 定义事件
+const emit = defineEmits<{
+  changePage: [data: any[]]
+}>()
+
+// 计算属性 - 计算总页数
+const totalPages = computed(() => {
+  // 如果列表为空，返回0
+  if (!props.list || props.list.length === 0) return 0
+  // 如果列表长度小于pageSize，不进行分组，返回0表示不分页
+  if (props.list.length <= props.pageSize) return 0
+  // console.log(props.list.length, props.pageSize)
+  
+  // 列表长度小于等于pageSize时，正常计算页数
+  // 如果能整除，直接返回商
+  if (props.list.length % props.pageSize === 0) {
+    return props.list.length / props.pageSize
+  }
+  
+  // 不能整除时，返回商+1（用户需求：将余数添加到最后一组）
+  return Math.floor(props.list.length / props.pageSize) + 1
+})
+
+// 计算当前页数据
+const currentPageData = computed(() => {
+  // 如果列表为空，返回空数组
+  if (!props.list || props.list.length === 0) {
+    return []
+  }
+  
+  // 如果列表长度小于pageSize，不分组，直接返回完整列表
+  if (props.list.length <= props.pageSize) {
+    return [...props.list]
+  }
+  
+  // 如果总页数为0（列表为空的情况已处理），返回空数组
+  if (totalPages.value === 0) {
+    return []
+  }
+  
+  // 确保当前页码不超过总页数
+  if (currentPage.value > totalPages.value) {
+    currentPage.value = 1
+  }
+  
+  // 正常分组逻辑
+  const startIndex = (currentPage.value - 1) * props.pageSize
+  let endIndex = startIndex + props.pageSize
+  
+  // 对于最后一页，确保不会超出列表范围
+  if (currentPage.value === totalPages.value) {
+    endIndex = props.list.length
+  }
+  
+  return props.list.slice(startIndex, endIndex)
+})
+
+// 方法 - 重新实现分组逻辑
+const groupData = () => {
+  groupedData.value = []
+  
+  // 如果列表为空或长度大于pageSize，不进行分组
+  if (!props.list || props.list.length === 0 || props.list.length > props.pageSize) {
+    return
+  }
+  
+  const listLength = props.list.length
+  
+  // 正常分组逻辑，余数会自动添加到最后一组
+  for (let i = 0; i < listLength; i += props.pageSize) {
+    groupedData.value.push(props.list.slice(i, i + props.pageSize))
+  }
+}
+
+const changePage = (page: number) => {
+  // 只有在需要分页的情况下才处理页码变化
+  if (totalPages.value > 0 && page >= 1 && page <= totalPages.value) {
+    currentPage.value = page
+    // 发出事件，传递当前页数据
+    emit('changePage', currentPageData.value)
+  } else if (props.list && props.list.length > 0) {
+    // 当不分组时，直接传递完整列表
+    emit('changePage', [...props.list])
+  }
+}
+
+// 监听数据变化
+watch(() => props.list, () => {
+  currentPage.value = 1
+  groupData()
+  // 数据变化时，立即发出当前数据
+  emit('changePage', currentPageData.value)
+}, { deep: true })
+
+// 生命周期钩子
+onMounted(() => {
+  groupData()
+  // 组件挂载时，立即发出初始数据
+  emit('changePage', currentPageData.value)
+})
+</script>
+
+<style scoped>
+.pagination-container {
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.data-content {
+  margin-bottom: 20px;
+}
+
+.data-item {
+  padding: 10px;
+  border: 1px solid #e0e0e0;
+  margin-bottom: 8px;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+}
+
+.no-data {
+  text-align: center;
+  color: #999;
+  padding: 40px 0;
+}
+
+.pagination-controls {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.pagination-btn {
+  padding: 8px 16px;
+  border: 1px solid #d0d0d0;
+  background-color: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.pagination-btn:hover {
+  background-color: #f0f0f0;
+}
+
+.pagination-btn.active {
+  background-color: #1890ff;
+  color: #fff;
+  border-color: #1890ff;
+}
+
+.pagination-btn.active:hover {
+  background-color: #40a9ff;
+}
+</style>

src/views/toolbar/Alert.vue

@@ -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>

src/views/viewsDemo.vue

@@ -1,336 +0,0 @@
-    <style>
-    * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    }
-
-    body {
-        display: flex;
-        min-height: 100vh;
-        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-        color: #e6e6e6;
-        overflow: hidden;
-    }
-
-    /* 进度条样式 */
-    .progress-container {
-        width: 50px;
-        background: rgba(0, 0, 0, 0.2);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 20px 0;
-        position: relative;
-        z-index: 100;
-    }
-
-    .progress-bar {
-        width: 20px;
-        height: 70vh;
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 10px;
-        overflow: hidden;
-        position: relative;
-    }
-
-    .progress-fill {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        background: linear-gradient(to top, #ff416c, #ff4b2b);
-        height: 0%;
-        transition: height 0.3s ease;
-        border-radius: 10px;
-    }
-
-    .progress-text {
-        writing-mode: vertical-rl;
-        text-orientation: mixed;
-        margin-top: 20px;
-        color: rgba(255, 255, 255, 0.7);
-        font-size: 14px;
-        letter-spacing: 1px;
-    }
-
-    /* 内容区域样式 */
-    .content {
-        flex: 1;
-        padding: 40px;
-        position: relative;
-    }
-
-    h1 {
-        font-size: 2.5rem;
-        margin-bottom: 20px;
-        color: #ff4b2b;
-    }
-
-    p {
-        font-size: 1.1rem;
-        line-height: 1.6;
-        margin-bottom: 15px;
-        max-width: 800px;
-    }
-
-    .warning {
-        color: #ff416c;
-        font-weight: bold;
-    }
-
-    /* 崩坏效果 */
-    .corruption-effect {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-        z-index: 50;
-    }
-
-    .glitch-text {
-        animation: glitch 1s infinite;
-    }
-
-    @keyframes glitch {
-        0% {
-            text-shadow: 2px 2px #ff416c, -2px -2px #2bffc2;
-        }
-
-        25% {
-            text-shadow: -2px 2px #2bffc2, 2px -2px #ff416c;
-        }
-
-        50% {
-            text-shadow: 2px -2px #2bffc2, -2px 2px #ff416c;
-        }
-
-        75% {
-            text-shadow: -2px -2px #ff416c, 2px 2px #2bffc2;
-        }
-
-        100% {
-            text-shadow: 2px 2px #2bffc2, -2px -2px #ff416c;
-        }
-    }
-    /*内容消融 */
-    .dissolve {
-        animation: dissolve 3s forwards;
-    }
-
-    @keyframes dissolve {
-        to {
-            opacity: 0;
-            transform: translateY(20px) rotate(5deg);
-        }
-    }
-
-    /* 模态框样式 */
-    .modal {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.8);
-        z-index: 1000;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .modal-content {
-        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-        padding: 30px;
-        border-radius: 10px;
-        text-align: center;
-        max-width: 500px;
-        width: 90%;
-        border: 2px solid #ff416c;
-        box-shadow: 0 0 25px #ff416c;
-    }
-
-    .modal h2 {
-        color: #ff4b2b;
-        margin-bottom: 20px;
-        font-size: 2rem;
-    }
-
-    .modal p {
-        margin-bottom: 25px;
-        font-size: 1.2rem;
-    }
-
-    .btn {
-        background: linear-gradient(to right, #ff416c, #ff4b2b);
-        color: white;
-        border: none;
-        padding: 12px 30px;
-        border-radius: 30px;
-        font-size: 1rem;
-        cursor: pointer;
-        transition: transform 0.3s, box-shadow 0.3s;
-    }
-
-    .btn:hover {
-        transform: translateY(-3px);
-        box-shadow: 0 5px 15px rgba(255, 75, 43, 0.4);
-    }
-</style>
-    <template>
-        <!-- 进度条 -->
-        <div class="progress-container">
-            <div class="progress-bar">
-                <div class="progress-fill" id="progressFill"></div>
-            </div>
-            <div class="progress-text">系统稳定性进度</div>
-        </div>
-
-        <!-- 内容区域 -->
-        <div class="content">
-            <h1>系统稳定性控制面板</h1>
-            <p>欢迎访问系统控制中心。本面板用于监控和维持系统稳定性。</p>
-            <p class="warning">警告：系统目前处于高度不稳定状态。请勿进行任何关键操作。</p>
-            <p>当前状态：<span id="statusText">监控中...</span></p>
-            <p>系统完整性：<span id="integrityText">98%</span></p>
-            <p>如果系统开始出现异常，请立即保存您的工作并准备撤离。</p>
-            <p>倒计时直到可能的不稳定事件：<span id="countdown">00:30</span></p>
-        </div>
-
-        <!-- 崩坏效果层 -->
-        <div class="corruption-effect" id="corruptionEffect"></div>
-
-        <!-- 模态框 -->
-        <div class="modal" id="modal">
-            <div class="modal-content">
-                <h2>系统崩溃</h2>
-                <p>系统稳定性已降至临界水平。为防止数据丢失，系统将自动关闭。</p>
-                <p>请返回主页并重新登录。</p>
-                <button class="btn" id="homeBtn">返回主页</button>
-            </div>
-        </div>
-    </template>
-
-<script>
-document.addEventListener('DOMContentLoaded', function () {
-    const progressFill = document.getElementById('progressFill');
-    const statusText = document.getElementById('statusText');
-    const integrityText = document.getElementById('integrityText');
-    const countdown = document.getElementById('countdown');
-    const corruptionEffect = document.getElementById('corruptionEffect');
-    const modal = document.getElementById('modal');
-    const homeBtn = document.getElementById('homeBtn');
-    const content = document.querySelector('.content');
-
-    let progress = 0;
-    let countdownTime = 30;
-    let corruptionActive = false;
-
-    // 更新倒计时显示
-    function updateCountdown() {
-        const minutes = Math.floor(countdownTime / 60);
-        const seconds = countdownTime % 60;
-        countdown.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-
-        if (countdownTime > 0) {
-            countdownTime--;
-        }
-    }
-
-    // 初始化倒计时
-    setInterval(updateCountdown, 1000);
-
-    // 更新进度条
-    const progressInterval = setInterval(() => {
-        progress += 1;
-        progressFill.style.height = `${progress}%`;
-
-        if (progress >= 70) {
-            statusText.textContent = "稳定性下降";
-            statusText.classList.add('warning');
-        }
-
-        if (progress >= 85) {
-            integrityText.textContent = "75%";
-        }
-
-        if (progress >= 100) {
-            clearInterval(progressInterval);
-            startCorruption();
-        }
-    }, 100);
-
-    // 开始崩坏效果
-    function startCorruption() {
-        corruptionActive = true;
-        statusText.textContent = "系统崩溃中!";
-        integrityText.textContent = "23%";
-
-        // 添加崩坏效果
-        document.body.classList.add('glitch-text');
-
-        // 文字颜色随机变化
-        const textElements = document.querySelectorAll('p, h1, span');
-        const colorInterval = setInterval(() => {
-            textElements.forEach(el => {
-                el.style.color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
-            });
-        }, 200);
-
-        // 内容逐渐消融
-        content.classList.add('dissolve');
-
-        // 显示模态框
-        setTimeout(() => {
-            modal.style.display = 'flex';
-            clearInterval(colorInterval);
-        }, 3000);
-    }
-
-    // 返回主页按钮事件
-    homeBtn.addEventListener('click', function () {
-        alert('返回主页');
-        // 实际应用中这里可能是 window.location.href = '/';
-    });
-
-    // 添加一些随机崩坏效果
-    function addCorruptionEffects() {
-        if (!corruptionActive) return;
-
-        // 创建随机闪烁元素
-        const effect = document.createElement('div');
-        effect.style.position = 'absolute';
-        effect.style.left = Math.random() * 100 + 'vw';
-        effect.style.top = Math.random() * 100 + 'vh';
-        effect.style.width = Math.random() * 100 + 50 + 'px';
-        effect.style.height = Math.random() * 10 + 2 + 'px';
-        effect.style.background = `linear-gradient(90deg, 
-                    rgba(255, 75, 43, ${Math.random() * 0.7}), 
-                    rgba(255, 65, 108, ${Math.random() * 0.5}))`;
-        effect.style.boxShadow = '0 0 10px rgba(255, 65, 108, 0.7)';
-        effect.style.opacity = Math.random() * 0.7;
-        effect.style.transform = `rotate(${Math.random() * 360}deg)`;
-        effect.style.pointerEvents = 'none';
-
-        corruptionEffect.appendChild(effect);
-
-        // 移除元素
-        setTimeout(() => {
-            if (effect.parentNode) {
-                effect.parentNode.removeChild(effect);
-            }
-        }, 2000);
-    }
-
-    // 当崩坏激活时，定期添加效果
-    setInterval(() => {
-        if (corruptionActive) {
-            for (let i = 0; i < 3; i++) {
-                addCorruptionEffects();
-            }
-        }
-    }, 300);
-});
-</script>

vite.config.js

@@ -26,7 +26,16 @@ export default defineConfig({
     },
   },
   server: {
-    host: '0.0.0.0'
+    host: '0.0.0.0',
+    proxy: {
+      // 配置API代理
+      '/api': {
+        //  target: 'http://www.qf1121.top',
+        target: 'http://localhost:7071',
+        changeOrigin: true,
+        rewrite: (path) => path
+      }
+    }
   },
 
 })