从去年底开始，卓影工作室的官网一直在边开发边使用。直到最近，我们终于腾出时间对整个网站做了一次从技术到体验的集中优化。这篇文章记录了这次优化过程中遇到的具体问题、解决思路和最终效果，希望能给正在做类似项目的朋友一些参考。
一、首页卡片交互：从「过度设计」到「恰到好处」
首页的软件卡片列表是我们最早做出来的模块之一，但一直有个让人头疼的问题：鼠标悬停时卡片变化幅度太大，背景从深色突然变成白色，还带着位移效果，导致整个页面底部跟着「跳」了一下。尤其是在卡片数量不多的情况下，用户一旦悬停在某个卡片上，页脚的上下位移特别明显。
问题根源是分类标签（app-category）默认是隐藏的，悬停时才显示为 block，这个切换导致卡片高度变化，进而推动了整个布局。
我们的解决方案其实很简单：让分类标签始终显示，只是默认半透明，悬停时再高亮。这样卡片高度恒定，页脚自然不会跳动。另外把悬停的 transform: translateY(-2px) 调整到 -3px，同时将边框颜色从绿色改为金色，与网站整体色调统一。
还有一个细节优化：原本的「查看详情」按钮缩在卡片底部，没有居中。通过给卡片容器增加 align-items: center，并调整按钮的 margin 为 auto，让按钮在水平和垂直方向都处于居中位置。
最后，为了让点击体验更好，我们把整个卡片都变成了可点击区域，而不是只能点按钮。用 JavaScript 的 querySelector 获取按钮的链接地址，通过 onclick 跳转，同时保留了按钮自身的事件不冒泡。
二、页脚改造：从「社交链接」到「访客计数器」
原来的页脚放了三个社交图标（GitHub、邮箱、微信），但点击后都是空链接，实用性几乎为零。我们决定把它们替换为一个访客计数器。
计数器实现用了最简单的文件存储方案：创建一个 counter.txt 文件，每次页面访问时读取数字 +1，再用 str_pad 格式化为8位数字显示。文件路径放在 uploads/ 目录下，避免权限问题。
样式上，我们去掉圆角矩形框，让计数器文字直接左对齐放在描述文字下方，不抢眼但够用。
三、后台编辑器：从 CKEditor 到 TinyMCE 的全面升级
用户之前用的是 CKEditor，体验一般，后来换成了 TinyMCE 6.8.3。TinyMCE 本身功能强大，但默认配置下中文支持不够完善，尤其是图片上传对话框的界面完全不符合我们的使用习惯。
中文汉化这块走了点弯路。最初尝试直接从 CDN 加载语言包，但 tinymce-i18n 包在 jsdelivr 上的路径经常变化，加载失败。最终方案是使用一份完整的中文语言包文件，放在 /TinyMCE/langs/zh_CN.js，在初始化时通过 language: 'zh_CN' 加载。这样完全离线可用，不受 CDN 波动影响。
图片上传对话框的问题更棘手。TinyMCE 默认的对话框结构是固定的，用户想要的是：去掉标题栏、TAB标签水平排列、支持拖拽上传、上传后自动填入URL。这些需求用默认对话框无法满足，所以我们完全自定义了一个对话框。
自定义对话框用纯 HTML + CSS + JavaScript 实现，独立于 TinyMCE 的 UI 系统。通过 editor.ui.registry.addButton('customimage', ...) 注册自定义按钮，替代默认的图片按钮。对话框实现了 TAB 切换、拖拽上传、浏览上传、预览、图片参数编辑等功能，上传接口复用了已有的 upload_image.php。
四、后台添加软件页：布局重排
后台的软件添加/编辑页面功能完整，但布局上存在几个问题：控件间距太大、版本号/体积放在右栏不合理、下载设置散落在各处、关键词只能一个个添加效率低。
重构后的布局做了以下调整：
-
版本号和体积从右栏移到左栏，紧跟在软件标题下方，和图标/截图放在同一区域 -
编辑器高度从600px调整到694px -
所有控件间距从15px缩小到10px，布局更紧凑 -
下载设置移到编辑器下方，以水平排列的方式展示 -
关键词支持英文逗号分隔批量添加，输入框和按钮高度统一 -
发布状态下拉框新增「发布并推荐」选项，一键完成发布+推荐设置 -
提交按钮改为10字符宽度，红色背景白色文字，居中显示
五、软件详情页：从「暗色融合」到「层次分明」
之前的详情页所有内容都融在暗色背景中，左栏内容区和右栏卡片区分不开，阅读体验很差。
核心改造思路是给内容区一个浅色背景，让正文从暗色背景中「跳」出来。具体做法：
-
详情介绍区（ software-description）改为白色背景，文字颜色改为深色 -
截图和信息区（ info-grid）同样用白色背景，形成与页面暗色背景的鲜明对比 -
右栏使用 position: sticky; top: 20px，滚动时侧栏跟随，到底部时停住
推荐软件功能是我们这次新增的一个重要模块。数据库层面，在 zhuoying_software 表新增 is_recommended 字段；后台层面，在编辑页面增加推荐选项；前台层面，右侧边栏新增推荐卡片，样式与首页卡片一致，包含分类标签、图标、标题、摘要和查看详情按钮。
广告位方面，在推荐卡片下方新增了一个 300×250 的广告卡片，白色边框 5px，同时保留了「广告」标识。
六、一些值得记录的经验
关于 CDN 缓存：网站使用了腾讯云 CDN，静态资源（CSS/JS）更新后需要刷新CDN缓存或加版本号参数才能生效。我们在 CSS 链接中加了 ?v=2 参数来绕过缓存，同时也可以让用户在需要时关闭 CDN 进行调试。
关于 HTML 实体转义：数据库中的文章内容包含 和 · 等HTML实体，在首页卡片摘要中使用 strip_tags 提取纯文本时，这些实体不会被自动转换。需要用 html_entity_decode($text, ENT_QUOTES, 'UTF-8') 手动转换。
关于服务器 fail2ban：连续多次尝试 SSH 连接导致我的 IP 被 fail2ban 封锁，需要在服务器上用 fail2ban-client set sshd unbanip [IP] 解封。这个机制对安全是好事，但开发调试时需要留意。
从这次优化来看，网站的很多问题其实不是功能缺失，而是细节打磨不到位。功能跑起来只是第一步，让用户用得顺手、看得舒服，才是真正需要投入时间的地方。希望这篇记录能给正在做网站优化的朋友一些启发。
