内容中心

用户中心(百搭) - YtUser 13.6.4优化报告

本次升级对 Z-BlogPHP 的 YtUser 插件的无皮模板状态进行了全面的 UI/UX 现代化改造和代码规范化清理。核心目标是移除陈旧的内联样式,引入基于 CSS 变量的现代化设计系统,并优化文件结构,提升代码的可维护性。

升级内容:

1.文件结构规范化

为了解决插件文件杂乱的问题,我们执行了以下文件整理工作:

样式文件归档: 新创建的ytuser.css被规范放置于 style/ 目录下,而不是散落在插件根目录。

逻辑文件归档: 根目录下的其他 PHP 功能文件也被规范整理到了逻辑目录中,保持了根目录的整洁。

模板与逻辑分离: 确保 PHP 逻辑文件(function/)只负责数据处理,所有的样式表现都剥离到 CSS 文件中。

2. 视觉与体验升级 (UI/UX)

核心设计系统 (style/ytuser.css)

我们引入了一套全新的、基于 CSS 变量的设计系统,确保视觉风格的统一与现代感:

色彩体系: 定义了主色调 (Indigo 靛蓝)、中性灰背景和提示色,支持未来轻松更换主题。

现代化组件:

按钮 (.yt-btn): 扁平化设计,配合微妙的悬停上浮与阴影效果,交互感更强。

输入框 (.yt-input): 统一的高度与圆角,聚焦时带有品牌色光晕,提升输入专注度。

验证码 (.verify-img): 规范了验证码图片的尺寸与对齐方式,使其与输入框完美融合。

页面重构

用户中心 (t_user.php):

摒弃了过时的列表布局,转为卡片式网格布局。

关键数据(VIP等级、余额、积分)使用图标卡片展示,视觉层级更清晰。

登录与注册 (t_login.php, t_register.php):

采用居中悬浮卡片设计,增强页面的聚焦感。

优化了移动端的响应式表现,确保在手机上也能流畅操作。

3. 代码重构与清理 (Code Refactoring)

yt_event.php深度清理

针对插件核心逻辑文件进行了彻底的“去内联化”重构,实现了结构与表现的完全分离:

移除硬编码: 删除了数百处 style="border:none; width:90%..." 等陈旧的内联样式代码。

语义化类名: 将原有样式全面替换为 .yt-table、.yt-input、.yt-btn 等语义化 CSS 类。

覆盖范围:

账户管理(修改用户名、修改资料)

安全设置(找回密码)

增值服务(购买VIP、积分充值)

内容创作(文章投稿编辑器)

逻辑优化

数据库查询: 将部分手写的 SQL 查询替换为 Z-BlogPHP 标准的 Ytuser::GetList 方法,提高了代码的安全性和兼容性。

对象属性: 修复了某些对象属性访问的逻辑错误(如 __get方法的代理机制)。