01 · 摘要summary
这一版把系统从「本地单页工具」变成「有站点的工具」:zxsub.com 首页是引导页,/subtool 是工作台,/login 与 /register 是认证页;账号与字幕组存在服务器,换台设备登录仍是同一个组。注册分「组成员」与「组管理」两种身份,组成员的组名从服务器已有组名里下拉选择,不必再手打猜。视觉上做了一次彻底拍平——此前所有控件都靠「上亮下暗渐变 + 上下双圈内棱」立起来,这正是被反复指出的「厚」;现在只保留纯色填充与 1px 细边,厚度归零。桌面端去边框、自绘标题栏,产出免安装单文件 exe。所有操作反馈(建组、改权限、复制命令、导出字幕)统一成顶部下滑的通知卡——不再有页面里那种一闪而过、看不住的小字。
02 · 变更要点10 items
01
站点三入口:/ 引导页、/subtool 工作台、/login 与 /register 认证页;nginx 内部 rewrite,无扩展名路径也能直达,不再 404/403
02
注册分身份:组成员(组名从服务器已有组名同步下拉,没有可现场创建)与组管理(建组即所有者,组名重复会被拒)
03
账号 / 会话 / 字幕组 / 成员权限全部落库:单文件 PHP + SQLite,无 Composer、无框架、无 vendor,不新增常驻进程
04
全部控件拍平:删掉主按钮、品牌标识、头像、侧栏选中项上的纵向深浅渐变与上下双圈内倒角——厚度只剩 1px 细边
05
揪出「怎么改都还是厚」的真凶:prefers-reduced-transparency 降级分支里另写了一份 160° 渐变,无头 Chrome 与关闭透明效果的 Windows 都命中它,把平涂覆盖回「上亮下暗」的壳
06
主按钮改纯色 #2470EE:白字对比度 3.89 → 4.54;禁用态不再整体压到 42% 透明(那会让白字直接糊在浅蓝上)
07
桌面端自绘窗体:decorations:false + 自绘标题栏(拖拽 / 最小化 / 最大化 / 关闭全 SVG),零原生窗控件,免安装
08
新增 verify-flat 断言脚本:直接量线上控件的 backgroundImage 与 boxShadow,要求 0 处渐变、0 处 inset
09
提示改为顶部下滑通知:42px 色块图标 + 应用名 + 标题 / 正文,距顶 40px 不贴边,宽 288–460px 随内容收放;页面里那些贴边小条全部拆掉,复制 / 导出 / 建组 / 改权限都走同一条通道
10
复制统一走 copyText:navigator.clipboard 不可用(桌面端 / 非安全上下文)时退回 execCommand,不会再「点了没反应也没提示」
03 · 实拍凭证screens
主按钮与芯片:纯色,无渐变「新建项目」由浅蓝→深蓝渐变 + 白顶棱 + 暗底棱改成纯色 「#2470EE」;「1080p」这类强调芯片同样是纯色块。此前白字压在最浅的一段渐变上,几乎读不出来。
侧栏:选中项只剩一片淡蓝 + 左竖条选中态原来是「渐变玻璃球 + 底部渐变条」,现在改成 「rgba(46,125,247,.12)」 平涂 + 左侧 2.5px 实心竖条;序号块与头像也都是纯色。
总览:面板改平涂面板与认证卡从 160° 三段渐变改为单一 alpha 的平涂(「rgba(255,255,255,.6)」,降级分支 .74),通透度不再随高度变化。
注册:组名从服务器同步选「组成员」后,组名是下拉而不是输入框,选项来自服务器已有字幕组;组名表为空时才给「创建新组」的入口。
注册:身份两张卡「组成员」与「组管理」各自一张可点卡片,选中靠内描边,不靠投影;说明文字直接写在卡片里,不用再猜两个词的区别。
登录页认证卡同样是平涂 + 白细边;右上角「返回引导页」不再把人困在登录页里。
团队与权限(服务端)字幕组与成员权限现在存在服务器:组名全局唯一、所有者可转移、管理员可删组;成员只能看到自己加入的组。
字幕编辑器分段控件拍平后白底压白底,选中块会消失——凹槽底改成中性灰蓝 「rgba(120,150,190,.13)」,选中块才是纯白 + 蓝细边。
游客只读提示:悬浮胶囊底部提示条仍是四边留空的玻璃胶囊,但去掉了内倒角;左侧「只读」标签改为纯色块,不再是一枚凸起的小球。
游客视角全貌未登录也能进 /subtool 只读浏览,任何写操作入口要么禁用、要么在数据层被拦下。
顶部下滑通知42px 色块图标 + 应用名 + 标题 / 正文;距顶 40px 不贴边,宽度随内容收放。复制、导出、建组、改权限都走这一条通道。
04 · 验收记录checks
| 项目 | 结果 |
|---|---|
| 平面化断言 | PASS15 个控件逐个读计算样式:backgroundImage 全为 none、boxShadow 不含 inset(PASS:0 个) |
| 按钮对比度 | PASS#2470EE 底 + #FFFFFF 字 = 4.54:1(改前 #2E7DF7 只有 3.89:1) |
| 面板背景 | PASSbackgroundImage = none,backgroundColor = rgba(255,255,255,.74),boxShadow = none |
| 线上路由 | PASS/ · /subtool · /login · /register · /guide · /glass · /devlog 全部 200 |
| API | PASS/api/ 返回 JSON;/api/groups 可读;/api/.data/zxsub.db 直连被拒(403) |
| 注册链路 | PASS组成员加入已有组 → session 返回组与权限;组管理建新组 → 自动成为所有者 |
| 前端体积 | PASSgzip JS 98.4 KB + CSS 8.7 KB ≈ 107 KB,运行时依赖仍只有 react + react-dom |
05 · 复现reproduce
网页版由仓库根目录的构建脚本产出,线上是 /subtool 这一份;桌面端用 Tauri 的无打包模式编译,直接得到免安装 exe。发版前跑两套验收:一套实拍线上控件、断言零渐变零内阴影,一套核对进度条数、折叠侧栏、面板间距与通知几何。确认无误后打 tag 推送主干。