laoyang/FeedLite
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

表单控件统一：输入框/下拉框/按钮同高、自绘下拉列表、删除下载地址字段 #8

New Issue
Closed
opened 2026-11-04 13:16:43 +00:00 by laoyang · 1 comment
laoyang commented 2026-11-04 13:16:43 +00:00
Owner
Copy Link
Copy Source

背景

用户 2026-11-04：

现在很多输入的控件的按钮太丑了。比如选择图片那个按钮，
还有下面排序的那个输入框，以及前端进行筛选的那些输入框、下拉框之类的，
都特别丑，一点设计感都没有。它们的高度之类的，现在都太随意了。
还有那个添加软件的时候，有个什么下载链接，这个东西不要。

后续又提：

所有下拉框拉下来之后怎么全是灰色的？需要全部重新设计一下。
排序那个怎么删了？排序还得留着呀。

改法

1. 统一控件尺度

原来样式散在 6 处，padding 有 8/9/12px 三种，select 与 input 高度不等。

改为 CSS 变量体系：

  • --ctl-h: 38px / --ctl-h-sm: 32px / --ctl-h-lg: 42px
  • 统一圆角 9px、左右内边距 12px、边框与阴影
  • 高度用固定 height + line-height 居中，不用 padding 撑

2. 选择器必须放宽

第一版限定在 .field / .filters 里，导致后台零散布局中的裸 select/input
没匹配上，高度只有 19px / 21px，与旁边 38px 按钮并排参差不齐。
改成按 type 通吃（用 :not() 排除 checkbox/radio/color/range/file）。

3. 自绘下拉列表

原生 <select> 的展开列表由浏览器绘制，CSS 只能改 option 底色，
改不了圆角/行高/hover，各平台样式还不一样（Windows 是灰方框）。

做法：不重写 HTML（全站 16 个 select，逐个改会漏、
也会破坏 onchange="this.form.submit()"），
原生 select 视觉隐藏但仍参与提交与 change 事件，JS 生成按钮 + 浮层列表。
浮层 position:fixed 挂 body，避免被 overflow 裁；支持键盘 ↑↓ Home End Enter Esc。

4. 排序字段

不是被删，是只在 if ($esw) 分支渲染 —— 新建软件时确实没有。
已移出该分支，新建/编辑都显示，默认值 = 当前最大排序 + 1。

5. 删除「下载地址」

唯一用途是「已解决」邮件里把按钮换成「下载最新版本」，
收益小、每个软件都要维护一条 URL。表单删除，mailer 分支一并删除。
数据库 download_url 列保留不删 —— 删列不可逆，万一要恢复还得迁一次。

验收

  • 10 类控件高度全部 38px，文本域 110px，同行垂直中心完全一致
  • 裸 select/input 从 19/21px 修正到 38px
  • 下拉箭头 SVG 生效、搜索框放大镜生效
  • 真实三页面（提交/列表/详情）检查：没有 checkbox/radio/file 被误改
  • 下拉面板白底、圆角 11px、双层阴影；选中项带对勾；键盘操作正常
  • 排序字段 3 处（软件/分类/状态）齐全
  • 源码与输出中均无 download_url 表单项

为什么单独建单

与 #6/#7 无关：本单是控件尺寸与外观体系重构（含自绘下拉、删除下载地址字段），动 admin_taxonomy.php/mailer.php/style.css/app.js

## 背景 用户 2026-11-04： > 现在很多输入的控件的按钮太丑了。比如选择图片那个按钮， > 还有下面排序的那个输入框，以及前端进行筛选的那些输入框、下拉框之类的， > 都特别丑，一点设计感都没有。它们的高度之类的，现在都太随意了。 > 还有那个添加软件的时候，有个什么下载链接，这个东西不要。 后续又提： > 所有下拉框拉下来之后怎么全是灰色的？需要全部重新设计一下。 > 排序那个怎么删了？排序还得留着呀。 ## 改法 ### 1. 统一控件尺度 原来样式散在 6 处，`padding` 有 8/9/12px 三种，select 与 input 高度不等。 改为 CSS 变量体系： - `--ctl-h: 38px` / `--ctl-h-sm: 32px` / `--ctl-h-lg: 42px` - 统一圆角 9px、左右内边距 12px、边框与阴影 - 高度用**固定 height + line-height 居中**，不用 padding 撑 ### 2. 选择器必须放宽 第一版限定在 `.field` / `.filters` 里，导致后台零散布局中的裸 select/input 没匹配上，高度只有 **19px / 21px**，与旁边 38px 按钮并排参差不齐。 改成按 `type` 通吃（用 `:not()` 排除 checkbox/radio/color/range/file）。 ### 3. 自绘下拉列表 原生 `<select>` 的展开列表由浏览器绘制，CSS 只能改 option 底色， 改不了圆角/行高/hover，各平台样式还不一样（Windows 是灰方框）。 做法：**不重写 HTML**（全站 16 个 select，逐个改会漏、 也会破坏 `onchange="this.form.submit()"`）， 原生 select 视觉隐藏但仍参与提交与 change 事件，JS 生成按钮 + 浮层列表。 浮层 `position:fixed` 挂 body，避免被 overflow 裁；支持键盘 ↑↓ Home End Enter Esc。 ### 4. 排序字段 不是被删，是只在 `if ($esw)` 分支渲染 —— **新建软件时确实没有**。 已移出该分支，新建/编辑都显示，默认值 = 当前最大排序 + 1。 ### 5. 删除「下载地址」 唯一用途是「已解决」邮件里把按钮换成「下载最新版本」， 收益小、每个软件都要维护一条 URL。表单删除，mailer 分支一并删除。 **数据库 `download_url` 列保留不删** —— 删列不可逆，万一要恢复还得迁一次。 ## 验收 - 10 类控件高度全部 38px，文本域 110px，同行垂直中心完全一致 - 裸 select/input 从 19/21px 修正到 38px - 下拉箭头 SVG 生效、搜索框放大镜生效 - 真实三页面（提交/列表/详情）检查：没有 checkbox/radio/file 被误改 - 下拉面板白底、圆角 11px、双层阴影；选中项带对勾；键盘操作正常 - 排序字段 3 处（软件/分类/状态）齐全 - 源码与输出中均无 download_url 表单项 --- ### 为什么单独建单 与 #6/#7 无关：本单是控件尺寸与外观体系重构（含自绘下拉、删除下载地址字段），动 admin_taxonomy.php/mailer.php/style.css/app.js
laoyang commented 2026-11-04 13:17:29 +00:00
Author
Owner
Copy Link
Copy Source

追溯关联（补记）

本单是事后补建的工单 —— 改动在 2026-11-04 已上线，当时未按铁律先建单，此处补录。

对应提交

  • 27614d8 统一全部表单控件尺寸与外观；删除下载地址字段
  • 9b971a5 下拉框改为自绘列表；修复新建软件缺排序字段

实际验证结果

控件高度

10 类控件实测全部 38px（文本/数字/下拉/搜索/文件按钮/主按钮/小按钮…），
文本域 110px，同一行垂直中心完全一致（935.3）。

裸 select/input（不在 .field/.filters 容器里的）从 19px / 21px 修正到 38px
—— 这正是用户说的"高度太随意"的根因：选择器限定得太窄，漏掉了零散布局中的控件。

外观

  • 下拉框自绘箭头（内联 SVG）生效，右内边距 34px，圆角 9px
  • 搜索框左侧放大镜生效，左内边距 36px
  • 文件选择按钮重做成 <label class="file-btn"> + 图标 + 文件名
  • 排序字段收窄到 140px（.field-narrow）

真实页面回归

提交页 / 列表页 / 详情页逐一检查：
没有 checkbox / radio / file 被误改，所有可见控件高度收敛为 38（文本域 110）。

下拉列表

面板白底 rgb(255,255,255)、圆角 11px、双层柔和阴影；
选中项带对勾；键盘 ↑↓ Home End Enter Esc 均正常；
选择后 selectedIndex/value 同步、面板自动关闭、change 事件已触发；
浮层 position:fixed，完整可见不被裁切。

排序字段

3 处（软件/分类/状态）齐全；新建软件时也显示，默认值 = 最大排序 + 1。

下载地址

admin.php 输出与源码中均无 download_url 表单项。
DB 列保留未删。

遗留

  1. 数据库 download_url 列保留（删列不可逆），若确定永不使用可另开单清理。
  2. 下拉自绘依赖 JS；无 JS 时原生 select 仍可用，只是样式朴素。
## 追溯关联（补记） 本单是**事后补建**的工单 —— 改动在 2026-11-04 已上线，当时未按铁律先建单，此处补录。 ## 对应提交 - `27614d8` 统一全部表单控件尺寸与外观；删除下载地址字段 - `9b971a5` 下拉框改为自绘列表；修复新建软件缺排序字段 ## 实际验证结果 ### 控件高度 10 类控件实测全部 **38px**（文本/数字/下拉/搜索/文件按钮/主按钮/小按钮…）， 文本域 110px，同一行垂直中心完全一致（935.3）。 裸 select/input（不在 .field/.filters 容器里的）从 **19px / 21px** 修正到 38px —— 这正是用户说的"高度太随意"的根因：选择器限定得太窄，漏掉了零散布局中的控件。 ### 外观 - 下拉框自绘箭头（内联 SVG）生效，右内边距 34px，圆角 9px - 搜索框左侧放大镜生效，左内边距 36px - 文件选择按钮重做成 `<label class="file-btn">` + 图标 + 文件名 - 排序字段收窄到 140px（`.field-narrow`） ### 真实页面回归 提交页 / 列表页 / 详情页逐一检查： **没有 checkbox / radio / file 被误改**，所有可见控件高度收敛为 38（文本域 110）。 ### 下拉列表 面板白底 rgb(255,255,255)、圆角 11px、双层柔和阴影； 选中项带对勾；键盘 ↑↓ Home End Enter Esc 均正常； 选择后 `selectedIndex`/`value` 同步、面板自动关闭、change 事件已触发； 浮层 `position:fixed`，完整可见不被裁切。 ### 排序字段 3 处（软件/分类/状态）齐全；新建软件时也显示，默认值 = 最大排序 + 1。 ### 下载地址 `admin.php` 输出与源码中均无 `download_url` 表单项。 DB 列保留未删。 ## 遗留 1. 数据库 `download_url` 列保留（删列不可逆），若确定永不使用可另开单清理。 2. 下拉自绘依赖 JS；无 JS 时原生 select 仍可用，只是样式朴素。
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
laoyang (老杨)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: laoyang/FeedLite#8