fix(hermes): improve dashboard touch targets

This commit is contained in:
晴天
2026-05-26 01:05:17 +08:00
parent f4f65449f8
commit bc7fa7b11b
2 changed files with 47 additions and 2 deletions

View File

@@ -433,6 +433,15 @@
text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
text-underline-offset: 3px;
}
[data-engine="hermes"] button.hm-native-dashboard-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0 10px;
touch-action: manipulation;
}
[data-engine="hermes"] .hm-native-dashboard-link:hover {
color: var(--hm-accent);
}
@@ -656,8 +665,10 @@
}
[data-engine="hermes"] .hm-btn--icon {
width: 34px;
height: 34px;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 0;
background: transparent;
border: 1px solid transparent;
@@ -715,6 +726,10 @@
background: var(--hm-accent);
box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.25);
}
[data-engine="hermes"] button.hm-pill {
min-height: 44px;
touch-action: manipulation;
}
/* ==========================================================================
* 7 · Form controls — understated, print-inspired

View File

@@ -0,0 +1,30 @@
import test from 'node:test'
import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
const css = readFileSync(new URL('../src/engines/hermes/style/hermes.css', import.meta.url), 'utf8')
function cssBlock(selector) {
const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
return css.match(new RegExp(`${escaped}\\s*\\{([^}]*)\\}`))?.[1] || ''
}
test('Hermes dashboard 图标按钮必须满足移动端触控尺寸', () => {
const block = cssBlock('[data-engine="hermes"] .hm-btn--icon')
assert.match(block, /width:\s*44px/, '图标按钮宽度必须至少 44px')
assert.match(block, /height:\s*44px/, '图标按钮高度必须至少 44px')
assert.match(block, /min-width:\s*44px/, '图标按钮需要显式保留 44px 最小宽度')
assert.match(block, /min-height:\s*44px/, '图标按钮需要显式保留 44px 最小高度')
})
test('Hermes dashboard 原生面板入口必须满足移动端触控尺寸', () => {
const block = cssBlock('[data-engine="hermes"] button.hm-native-dashboard-link')
assert.match(block, /min-width:\s*44px/, '原生 Dashboard 入口宽度必须至少 44px')
assert.match(block, /min-height:\s*44px/, '原生 Dashboard 入口高度必须至少 44px')
assert.match(block, /inline-flex/, '原生 Dashboard 入口需要扩展可点区域并居中内容')
})
test('Hermes dashboard pill 选择器必须满足移动端触控尺寸', () => {
const block = cssBlock('[data-engine="hermes"] button.hm-pill')
assert.match(block, /min-height:\s*44px/, 'pill 选择器高度必须至少 44px')
})