标题字号折中;软件选择移入右上角汉堡菜单
用户反馈三点: 1. 顶栏图标太大(56px) 2. 顶栏文字反而比内容区还小 —— 主次颠倒 3. 不要再整页显示「选择软件:」,改成右上角三横线按钮,点开下拉选 字号标准(用户给的基准): 「选择软件」标签 13.5px,比它大两号 ≈ 17px。 → 顶栏 17px 字 / 30px 图标;内容区 15px 字 / 24px 图标。 这样 17 > 15,层级正确。 之前两轮都搞错了: - 先给顶栏 46px 图标 + 22px 字:图标过大 - 再给 56px + 26px:更大 - 而且内容区当时是 30px,比顶栏还大,视觉上「上面比下面小」 软件选择改造: - 顶栏右侧新增汉堡按钮(三横线,展开变×) - 抽屉面板放在 header 内、正文之上,默认 hidden - 列出软件:图标 + 名字 + 当前项标记 - index.php 删除整行「选择软件:」+ chips - new.php 表单内也删除那排 chip(同一选择不该出现两次) - 交互:点击展开/再点收起/点外部关闭/Esc 关闭 - 宽屏抽屉横向排列,窄屏纵向 验证(CDP 驱动真实浏览器): 汉堡按钮存在、初始收起、点击展开、aria 同步、软件条目与当前标记齐全、 再点收起、点外部关闭 —— 全部 PASS; 顶栏字号 17px > 内容区 15px,页面无裸露 ?>; 全部路由 200;窄屏 15px/13px 层级仍正确。
This commit is contained in:
@@ -801,6 +801,44 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 顶栏软件抽屉(右上角汉堡按钮) ----------
|
||||
* 原来「选择软件」平铺在列表上方占一整行,软件一多就把内容往下推。
|
||||
* 现在收进抽屉:点击展开 / 再次点击收起 / 点外部关闭 / Esc 关闭。
|
||||
* 用 hidden 属性而非纯 class,保证无 JS 时抽屉默认不显示(不会闪一下)。 */
|
||||
function bindSoftwarePanel() {
|
||||
var btn = document.getElementById('swToggle');
|
||||
var panel = document.getElementById('swPanel');
|
||||
if (!btn || !panel) { return; }
|
||||
|
||||
function open() {
|
||||
panel.hidden = false;
|
||||
btn.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
function close() {
|
||||
panel.hidden = true;
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
function toggle() {
|
||||
if (panel.hidden) { open(); } else { close(); }
|
||||
}
|
||||
|
||||
btn.addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
toggle();
|
||||
});
|
||||
|
||||
// 点面板内部不算「点外部」
|
||||
panel.addEventListener('click', function (e) { e.stopPropagation(); });
|
||||
|
||||
document.addEventListener('click', function () {
|
||||
if (!panel.hidden) { close(); }
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape' && !panel.hidden) { close(); btn.focus(); }
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- 邮件测试发送(后台设置页) ---------- */
|
||||
function bindMailTest() {
|
||||
var btn = document.getElementById('mailTestBtn');
|
||||
@@ -853,6 +891,7 @@
|
||||
bindWontfixPanel();
|
||||
bindColorPicker();
|
||||
bindIconPicker();
|
||||
bindSoftwarePanel();
|
||||
bindMailTest();
|
||||
bindInlineValidate(); // ★ 必须在 bindNoDoubleSubmit 之前
|
||||
bindNoDoubleSubmit();
|
||||
|
||||
Reference in New Issue
Block a user