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

筛选区改为固定两行：反馈类型与筛选表单不再互相挤占 #9

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

背景

用户 2026-11-04：

在筛选的时候，反馈类型 bug 功能建议，和后面的下拉框，不在一条线上，
如果反馈类型比较多，那么下拉框就被挤到下一行去了。
我建议统一，是不是应该都是分两行，这样也就没有对齐的问题了。

根因

.filters 是 display:flex + flex-wrap，
分类 chips 和筛选表单被当成同一行的兄弟元素，分类一多就把表单挤下去。
而且两者形态不同（chips 是胶囊、表单是控件），本来也对不齐。

改法

固定两行，各管各的：

第 1 行  [全部] [Bug] [功能建议] ...     ← 分类可无限换行
第 2 行  [全部状态] [排序] [搜索] [按钮]  ← 永远在一起

.filters 改 flex-direction:column。

两个必须注意的点

  1. 文件里有两处 .filters 定义，后面那处是 display:flex + flex-wrap，
    会把前台的两行布局覆盖回横向。已删除那处的 flex 声明。
  2. 后台筛选栏是纯控件横排、没有分类 chips，不能跟着变竖排 ——
    给 admin.php 的筛选表单加 .filters-row 类，用
    .filters.filters-row 覆盖回 row。

验收

注入 16 个额外分类（共 21 个）压测：

视口 分类数 分类占高 表单位置 表单内行数
1280px 21 109→276 286（下方） 1 行
900px 21 109→276 286（下方） 1 行
700px 21 109→276 286（下方） 1 行
500px 21 103→400 410（下方） 2 行（窄屏正常）
  • 前台 .filters flex-direction = column
  • 后台 .filters.filters-row = row，7 个控件垂直中心统一 92.8
  • 5 个路由 200

为什么单独建单

与 #8 同属样式但互不重叠：#8 管单个控件长什么样，本单管筛选区整体行布局，且需要改 admin.php 加 .filters-row 类

## 背景 用户 2026-11-04： > 在筛选的时候，反馈类型 bug 功能建议，和后面的下拉框，不在一条线上， > 如果反馈类型比较多，那么下拉框就被挤到下一行去了。 > 我建议统一，是不是应该都是分两行，这样也就没有对齐的问题了。 ## 根因 `.filters` 是 `display:flex + flex-wrap`， 分类 chips 和筛选表单被当成**同一行的兄弟元素**，分类一多就把表单挤下去。 而且两者形态不同（chips 是胶囊、表单是控件），本来也对不齐。 ## 改法 固定两行，各管各的： ``` 第 1 行 [全部] [Bug] [功能建议] ... ← 分类可无限换行 第 2 行 [全部状态] [排序] [搜索] [按钮] ← 永远在一起 ``` `.filters` 改 `flex-direction:column`。 ### 两个必须注意的点 1. 文件里有**两处** `.filters` 定义，后面那处是 `display:flex + flex-wrap`， 会把前台的两行布局覆盖回横向。已删除那处的 flex 声明。 2. 后台筛选栏是纯控件横排、没有分类 chips，不能跟着变竖排 —— 给 admin.php 的筛选表单加 `.filters-row` 类，用 `.filters.filters-row` 覆盖回 `row`。 ## 验收 注入 16 个额外分类（共 21 个）压测： | 视口 | 分类数 | 分类占高 | 表单位置 | 表单内行数 | |---|---|---|---|---| | 1280px | 21 | 109→276 | 286（下方） | 1 行 | | 900px | 21 | 109→276 | 286（下方） | 1 行 | | 700px | 21 | 109→276 | 286（下方） | 1 行 | | 500px | 21 | 103→400 | 410（下方） | 2 行（窄屏正常） | - 前台 `.filters` flex-direction = column - 后台 `.filters.filters-row` = row，7 个控件垂直中心统一 92.8 - 5 个路由 200 --- ### 为什么单独建单 与 #8 同属样式但互不重叠：#8 管单个控件长什么样，本单管筛选区整体行布局，且需要改 admin.php 加 .filters-row 类
laoyang commented 2026-11-04 13:17:30 +00:00
Author
Owner
Copy Link
Copy Source

追溯关联（补记）

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

对应提交

  • 832f112 筛选区改成固定两行，分类再多也不会把表单挤走

实际验证结果

注入 16 个额外分类（共 21 个）压测：

视口 分类数 分类占高 表单位置 表单内行数
1280px 21 109→276 286（下方） 1 行
900px 21 109→276 286（下方） 1 行
700px 21 109→276 286（下方） 1 行
500px 21 103→400 410（下方） 2 行（窄屏正常）
  • 前台 .filters flex-direction = column
  • 后台 .filters.filters-row = row，7 个控件垂直中心统一 92.8
  • 5 个路由 200

过程中修掉的隐患

改 .filters 时误删了 .chips 的基础 flex 样式，已补回
（.chips{display:flex;flex-wrap:wrap;gap:8px}）。不补的话分类会变成竖排堆叠。

遗留

无。两行布局已固定，分类数量不再影响表单位置。

## 追溯关联（补记） 本单是**事后补建**的工单 —— 改动在 2026-11-04 已上线，当时未按铁律先建单，此处补录。 ## 对应提交 - `832f112` 筛选区改成固定两行，分类再多也不会把表单挤走 ## 实际验证结果 注入 16 个额外分类（共 21 个）压测： | 视口 | 分类数 | 分类占高 | 表单位置 | 表单内行数 | |---|---|---|---|---| | 1280px | 21 | 109→276 | 286（下方） | 1 行 | | 900px | 21 | 109→276 | 286（下方） | 1 行 | | 700px | 21 | 109→276 | 286（下方） | 1 行 | | 500px | 21 | 103→400 | 410（下方） | 2 行（窄屏正常） | - 前台 `.filters` flex-direction = **column** - 后台 `.filters.filters-row` = **row**，7 个控件垂直中心统一 92.8 - 5 个路由 200 ## 过程中修掉的隐患 改 `.filters` 时误删了 `.chips` 的基础 flex 样式，已补回 （`.chips{display:flex;flex-wrap:wrap;gap:8px}`）。不补的话分类会变成竖排堆叠。 ## 遗留 无。两行布局已固定，分类数量不再影响表单位置。
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#9