NebulaShell/website/community/UPDATE_PROFILE.md

用户个人主页功能更新

改动概述

为用户社区添加了完整的个人主页系统，包括用户信息展示、文章管理、个人简介编辑等功能。

新增文件

1. profile.php - 用户个人主页

功能：

• 显示用户头像、用户名、角色徽章
• 显示用户个人简介（bio）
• 显示注册时间和邮箱（仅本人可见）
• 统计数据卡片：文章数、回复数、总浏览、总点赞
• 最近发表的文章列表（最新 10 篇）
• 最近的回复列表（最新 5 条）
• 支持查看其他用户的主页（通过 ?id=用户ID 参数）
• 本人访问时显示"编辑资料"按钮

访问方式：

• profile.php - 查看当前登录用户的个人主页
• profile.php?id=123 - 查看指定用户的个人主页

2. edit-profile.php - 编辑个人资料

功能：

• 编辑个人简介（bio）
• 实时预览功能
• 显示用户名和邮箱（只读）
• 保存成功后显示提示信息

访问方式：

• 从个人主页点击"编辑资料"按钮进入

3. my-posts.php - 我的文章（已更新）

更新内容：

• 支持查看其他用户的文章（通过 ?id=用户ID 参数）
• 只有文章作者才能看到"编辑"和"删除"按钮
• 页面标题动态显示用户名

4. migrate-add-bio.php - 数据库迁移脚本

用途：

• 为现有的 users 表添加 bio 字段
• 检查字段是否已存在，避免重复添加

运行方式：

php website/community/migrate-add-bio.php

修改的文件

1. includes/dock.php

改动：

• 用户头像链接从 # 改为 profile.php，点击跳转到个人主页
• 用户面板新增"个人主页"菜单项
• 保留"我的文章"菜单项，并显示文章数量徽章

2. api/auth.php

改动：

• 新增 my-post-count API 端点
• 用于获取当前登录用户的文章数量
• 在用户面板中实时显示文章数徽章

3. css/dock.css

改动：

• 新增 .dock-user-avatar 样式
• 用户头像图标显示为青色高亮
• 鼠标悬停时有缩放和背景效果

4. assets/css/dock-popover.css

改动：

• 新增 .popover-menu 菜单区域样式
• 新增 .menu-item 菜单项样式（带图标、文字、徽章）
• 新增 .menu-badge 徽章样式

5. assets/js/dock-popover.js

改动：

• 新增 fetchMyPostCount() 函数
• 页面加载时自动获取并显示用户文章数量
• 保留原有的退登和注销功能

6. schema.sql

改动：

• users 表新增 bio TEXT 字段
• 用于存储用户的个人简介

使用方法

1. 运行数据库迁移

首次部署需要运行迁移脚本添加 bio 字段：

cd website/community
php migrate-add-bio.php

2. 访问个人主页

• 点击左侧 Dock 栏的用户头像图标
• 或访问 community/profile.php

3. 编辑个人简介

• 在个人主页点击"编辑资料"按钮
• 或访问 community/edit-profile.php

4. 查看我的文章

• 在用户面板中点击"我的文章"
• 或访问 community/my-posts.php

5. 查看其他用户的主页

• 访问 community/profile.php?id=用户ID

技术细节

数据库查询优化

• 使用子查询统计回复数，避免 JOIN 导致的性能问题
• 使用 SUM 聚合函数统计总浏览和总点赞
• 所有查询都使用参数化查询防止 SQL 注入

安全性

• 所有用户输入都经过 htmlspecialchars() 转义
• 只有本人才能编辑和删除自己的文章
• Session 验证确保用户只能访问自己的数据

响应式设计

• 适配桌面端和移动端
• 小屏幕时自动调整布局和字体大小
• Dock 栏在移动端自动移到底部

后续可扩展功能

1. 头像上传 - 支持用户上传自定义头像
2. 关注系统 - 用户可以互相关注
3. 成就徽章 - 根据用户活跃度颁发徽章
4. 社交链接 - 添加 GitHub、Twitter 等社交链接
5. 活动日志 - 记录用户的登录、发帖等活动