mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-07-15 01:13:56 +08:00
fix(hermes): improve dashboard touch targets
This commit is contained in:
@@ -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
|
||||
|
||||
30
tests/hermes-dashboard-ui.test.js
Normal file
30
tests/hermes-dashboard-ui.test.js
Normal 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')
|
||||
})
|
||||
Reference in New Issue
Block a user