fix(ui): 收敛激活态描边、修正内层圆角溢出并替换 emoji 图标

This commit is contained in:
HIsheR
2026-10-26 18:47:04 +08:00
parent 6c4796cded
commit 106bbcaa56
8 changed files with 147 additions and 27 deletions
+24 -2
View File
@@ -316,7 +316,7 @@ const content = h(
'双向绑定',
'textField 与信号双向同步:输入即回显;prefix/suffix 渲染为输入框内侧附加块;clearable 开启后有值即显一键清空。',
textField({ placeholder: '输入名字…', value: name }),
textField({ placeholder: '搜索…', value: name, prefix: '🔍', clearable: true }),
textField({ placeholder: '搜索…', value: name, prefix: searchIcon(), clearable: true }),
textField({ value: price, suffix: '元', clearable: true }),
h('span', { class: 'out' }, () => (name() ? `你好,${name()}!` : '等待输入…')),
),
@@ -663,7 +663,7 @@ const content = h(
button({ label: '切换数据态', onClick: () => noResult(!noResult()) }),
),
() => (noResult()
? empty({ title: '暂无匹配结果', description: '试试放宽筛选条件,或清空关键词重新搜索。', icon: '🔍', action: button({ label: '重置筛选', variant: 'ghost', onClick: () => noResult(false) }) })
? empty({ title: '暂无匹配结果', description: '试试放宽筛选条件,或清空关键词重新搜索。', icon: searchIcon(), action: button({ label: '重置筛选', variant: 'ghost', onClick: () => noResult(false) }) })
: card({ title: '搜索结果' }, h('p', null, '这里展示命中的数据列表。'))),
),
section(
@@ -1585,3 +1585,25 @@ const app = h('div', { class: 'shell' }, toc, content);
mount('#app', () => app);
buildToc(toc, content);
/*** 放大镜图标:demo 内联 SVG,避免 emoji 在不同系统渲染成彩色位图 ***/
function searchIcon(): HTMLElement {
const ns = 'http://www.w3.org/2000/svg';
const holder = document.createElement('span');
holder.style.display = 'inline-flex';
const svg = document.createElementNS(ns, 'svg');
svg.setAttribute('viewBox', '0 0 16 16');
svg.setAttribute('width', '14');
svg.setAttribute('height', '14');
svg.setAttribute('fill', 'none');
svg.setAttribute('stroke', 'currentColor');
svg.setAttribute('stroke-width', '1.5');
svg.setAttribute('stroke-linecap', 'round');
const lens = document.createElementNS(ns, 'circle');
lens.setAttribute('cx', '7'); lens.setAttribute('cy', '7'); lens.setAttribute('r', '4.5');
const handle = document.createElementNS(ns, 'line');
handle.setAttribute('x1', '10.5'); handle.setAttribute('y1', '10.5'); handle.setAttribute('x2', '14'); handle.setAttribute('y2', '14');
svg.append(lens, handle);
holder.append(svg);
return holder;
}