本文由 FlintHub 开发文档归档发布。原始文档日期见标题前缀，来源：暂存20260913/docs/三步走计划可行性分析.md。

三步走计划 — 可行性分析报告

分析日期：2026-07-20

分析对象：SoSite 轻量级 PHP 社区系统

当前版本：V4.x（自定义 PHP + Modern 主题 + FontAwesome 4 + 原生 JS）

目录

1. 项目现状基线
2. 第一步：引入原版三件套，模板重构
3. 第二步：按需精简裁剪
4. 第三步：完全自研复刻
5. 综合风险评估
6. 我的建议

1. 项目现状基线

当前技术栈

关键数据

• 视图文件：约 40+ 个 PHP 文件（前台 + 后台 + 插件）
• 内联样式：原有 91 处，已修复约 90 处
• 内联 JS 事件：原有 56 处，已修复约 54 处
• CSS 文件：style.css、layout.css、forum.css、pages.css、blog.css、home.css、admin.css、modern.css + 各插件独立 CSS
• 编辑器：WYSIWYG 编辑器（data-editor="content"），与 Tailwind 样式存在冲突风险

2. 第一步：引入原版三件套，模板重构

方案概要

将 htmx、Alpine.js、Tailwind CSS 的静态文件放入 assets/，本地加载，全站一次性重构所有模板。

可行性分析

✅ 可行的方面

⚠️ 需要重点关注的问题

关键问题详解

编辑器冲突

这是最可能卡住整个计划的问题。当前编辑器使用 data-editor="content" 属性标记，这是 CKEditor 5 或类似编辑器的初始化方式。编辑器的内部 UI 依赖自己的 CSS reset，而 Tailwind 的 @tailwind base 会重置所有 HTML 元素的样式，导致编辑器：

• 工具栏按钮样式丢失
• 下拉菜单定位错误
• 弹窗背景色异常

可能的解决方案（按推荐程度排序）：

1. 编辑器 iframe 加载：将编辑器放入 <iframe>，与主页面样式隔离。改动最大，但最彻底
2. Tailwind 禁用 base：@tailwind components; @tailwind utilities; 跳过 base，但需要手动处理全局 reset
3. CSS 隔离层：用 @layer 或 :where() 降低 Tailwind 优先级，在编辑器容器上恢复默认样式
4. 编辑器内容区独立：仅编辑器的内容区域（.ck-content）做样式重置，工具栏保持原样

模板重构顺序

建议的前后台并行策略：

第一周：确定基础主题 + 配置 Tailwind + 搭建组件库
第二周：前台核心页面（首页、帖子列表、帖子详情、个人中心）
第三周：前台剩余页面 + 后台核心页面
第四周：插件适配 + 集成测试 + 修复兼容问题

3. 第二步：按需精简裁剪

方案概要

在三件套稳定运行后，删除各自用不上的代码，轻量化。

可行性分析

Tailwind 裁剪

裁剪方式：使用 Tailwind 内置的 content 配置 + safelist 白名单，配合 purge 自动 Tree-shaking，不手动删除源码文件。

Alpine.js 裁剪

结论：Alpine 核心功能（数据绑定、事件、显隐）约 80% 会被使用，复杂功能约 20% 可裁剪。Alpine 本身体积很小（~7KB gzip），裁剪收益有限。

htmx 裁剪

结论：htmx 的核心功能约占 50%，可裁剪部分约 50%。但 htmx 本身只有 ~10KB gzip，裁剪收益有限。

裁剪收益估算

注意：Tailwind 的 purge 是在构建时完成的，不是手动裁剪的。使用 tailwind.config.js 的 content 配置 + purge 即可自动移除未使用的样式，无需手动删除源码文件。这一步跟"第二步"的目标是重合的——配置好 purge 即可，不需要额外工作。

4. 第三步：完全自研复刻

方案概要

在吃透三件套核心逻辑后，从头手写自研版本，命名为 SoCSS/SoState/SoAjax，统一 s- 前缀。

可行性分析

✅ 可行的方面

• 统一品牌：s- 前缀与 SoSite 统一，有利于项目认知
• 深度适配：可以针对性适配编辑器、模板引擎、PHP 渲染逻辑
• 零第三方依赖：彻底消除版本变更风险
• 完全可控：任何 bug 都可自行修复

⚠️ 风险与挑战

自研 vs 裁剪版 对比

5. 综合风险评估

可行性总评

第一步：可行度 75% — 主要风险在编辑器兼容性
第二步：可行度 90% — Tailwind purge 自动完成，Alpine/htmx 裁剪收益有限
第三步：可行度 50% — SoCSS 收益不高，SoState 有一定价值，SoAjax 最简单

时间估算

6. 我的建议

基于对 SoSite 代码库的深入理解，我的建议是：

推荐方案：走第一步，第二步顺带完成，第三步暂缓

理由

1. 第一步收益最大，风险可控

当前项目最大的痛点是：

• 91 处内联样式（已修复 90 处，但本质问题没解决）
• 56 处内联 JS 事件（已修复 54 处，但依然零散）
• 两套模板（默认 + Modern）CSS 维护困难

Tailwind + Alpine + htmx 一次性解决这三个问题，效率最高。

编辑器兼容性建议采用方案②（Tailwind 禁用 base），在编辑器容器上手动恢复基础样式，改动最小。

2. 第二步是 Tailwind 自带的，不需要额外工作

Tailwind 的 purge 配置正确后，自动移除未使用的样式，不需要手动裁剪源码。Alpine 和 htmx 本身体积很小（~7KB + ~10KB gzip），裁剪收益不大，建议保留完整版。

3. 第三步收益与投入不成正比

自研三套工具需要 2-4 周，但裁剪版三件套已经能满足所有需求。自研版本的前缀统一（s- vs hx-/x-/class）对最终用户来说差异不大，但维护成本却高很多。

如果一定要自研，建议只做 SoAjax，因为：

• htmx 的核心逻辑最简单（~300行）
• 当前项目只有 ~5 处 AJAX，工作量小
• 自定义前缀可以直接替换 hx- 为 s-
• 可以深度适配 PHP 的 CSRF 和 Session 机制

推荐的执行路线

第1周：搭建 Tailwind + Alpine + htmx 开发环境
       - 配置 Tailwind（禁用 base）
       - 将 htmx、Alpine 引入 layouts/main.php
       - 验证编辑器兼容性，确定隔离方案
       - 搭建基础组件库（按钮、卡片、表单、表格）

第2周：前台核心页面重构
       - 首页 / 论坛列表 / 帖子详情
       - 个人中心 / 登录注册
       - 替换内联样式为 Tailwind utility
       - 替换内联 JS 为 Alpine 指令

第3周：前台剩余页面 + 后台重构
       - 博客 / 搜索 / 消息
       - 后台管理所有页面（admin.css 替换）
       - 后台组件统一

第4周：插件适配 + 集成测试
       - 15+ 插件的视图更新
       - 编辑器兼容性最终验证
       - 全功能回归测试

总结

如果未来确实需要自研，建议从 SoAjax 开始（最简单、最实用），再评估是否继续做 SoState 和 SoCSS。