temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
apps/demo/main.ts
+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;
}
llms-full.txt
+4 -2
View File
@@ -2185,6 +2185,7 @@ node packages/tools/cli/bin/ua.js <index|list|info <包名|组件id>|docs|tokens
- --ua-color-highlight: rgba(255, 255, 255, 0.5)（暗色 rgba(255, 255, 255, 0.08)）
- --ua-color-accent: #185fa5（暗色 #378add）
- --ua-color-accent-contrast: #ffffff（暗色 #042c53）
- --ua-color-accent-soft: color-mix(in srgb, var(--ua-color-accent) 72%, var(--ua-color-bg))（暗色 color-mix(in srgb, var(--ua-color-accent) 82%, var(--ua-color-bg))）
- --ua-color-tint-accent: color-mix(in srgb, var(--ua-color-accent) 10%, transparent)（暗色 color-mix(in srgb, var(--ua-color-accent) 14%, transparent)）
- --ua-color-tint-accent-weak: color-mix(in srgb, var(--ua-color-accent) 5%, transparent)（暗色 color-mix(in srgb, var(--ua-color-accent) 8%, transparent)）
- --ua-color-danger: #a32d2d（暗色 #d96a6a）
@@ -2193,6 +2194,7 @@ node packages/tools/cli/bin/ua.js <index|list|info <包名|组件id>|docs|tokens
- --ua-radius-sm: 4px
- --ua-radius-md: 8px
- --ua-radius-lg: 12px
- --ua-radius-md-inset: calc(var(--ua-radius-md) - 1px)
- --ua-space-1: 4px
- --ua-space-2: 8px
- --ua-space-3: 12px
@@ -2253,7 +2255,7 @@ node packages/tools/cli/bin/ua.js <index|list|info <包名|组件id>|docs|tokens
- --ua-focus-ring-warning: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 25%, transparent)（暗色 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 34%, transparent)）
- --ua-focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 18%, transparent)（暗色 0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 30%, transparent)）
- --ua-focus-ring-pulse: 0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 4%, transparent)（暗色 0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 8%, transparent)）
- --ua-focus-ring-selected: 0 0 0 2px var(--ua-color-accent)
- --ua-focus-ring-selected: 0 0 0 1.5px var(--ua-color-accent-soft)
- --ua-control-h-sm: 28px
- --ua-control-h-md: 34px
- --ua-control-h-lg: 40px
@@ -2462,7 +2464,7 @@ effect(() => {
document.documentElement.style.colorScheme = dark() ? 'dark' : 'light'; // 原生控件（date/滚动条）跟着变
localStorage.setItem('ua-theme', dark() ? 'dark' : 'light');
});
floatButton({ icon: '🌗', label: '切换主题', onClick: () => dark(!dark()) });
floatButton({ label: '切换主题', onClick: () => dark(!dark()) });
```
要点：
packages/design/tokens/tokens.css
+5 -2
View File
@@ -19,6 +19,7 @@
--ua-color-highlight: rgba(255, 255, 255, 0.5); /* 内高光白：主按钮等实色控件顶缘的 1px 高光（暗色必须降档，否则刺眼） */
--ua-color-accent: #185fa5; /* 强调色：主操作、选中态、焦点环底色 */
--ua-color-accent-contrast: #ffffff; /* 强调色上的文字色：保证主按钮对比度 */
--ua-color-accent-soft: color-mix(in srgb, var(--ua-color-accent) 72%, var(--ua-color-bg)); /* 柔和强调色：细线 / 指示条 / 内嵌焦点环用，纯 accent 做 2px 实线会发刺 */
--ua-color-tint-accent: color-mix(in srgb, var(--ua-color-accent) 10%, transparent); /* 语义淡底标准档：选中底、激活项底 */
--ua-color-tint-accent-weak: color-mix(in srgb, var(--ua-color-accent) 5%, transparent); /* 语义淡底弱档：悬停底、极弱强调底 */
--ua-color-danger: #a32d2d; /* 危险色：错误、删除、校验失败 */
@@ -29,6 +30,7 @@
--ua-radius-sm: 4px; /* 小圆角：按钮 / 输入框 / 标签等控件 */
--ua-radius-md: 8px; /* 中圆角：卡片 / 面板 / 分组容器 */
--ua-radius-lg: 12px; /* 大圆角：弹窗 / 抽屉等浮层外壳 */
--ua-radius-md-inset: calc(var(--ua-radius-md) - 1px); /* 内衬圆角：贴边的内层块（输入附加块等）与外层弧线对齐，减去 1px 边框 */
/* ---- 间距：4px 基准四档 + 表格单元格复合值 ---- */
--ua-space-1: 4px; /* 间距 1 档：图标与文字之间、紧邻元素 */
@@ -105,7 +107,7 @@
--ua-focus-ring-warning: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 25%, transparent); /* 语义警告焦点环：评分等以警告色为主色的控件 */
--ua-focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 18%, transparent); /* 错误强调环：校验失败时叠在被标红控件外侧，比 danger 描边更外扩一圈 */
--ua-focus-ring-pulse: 0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 4%, transparent); /* 呼吸光晕档：与焦点环交替出现做脉冲动画（时间线条目） */
--ua-focus-ring-selected: 0 0 0 2px var(--ua-color-accent); /* 选中环（非焦点）：色板格子等「当前选中」标记，实色不透明 */
--ua-focus-ring-selected: 0 0 0 1.5px var(--ua-color-accent-soft); /* 选中环（非焦点）：细一档 + 柔和色，2px 实色在色板/网格里像加粗边框 */
/* ---- 控件高度：三档，略放大以提升可点面积 ---- */
--ua-control-h-sm: 28px; /* 小控件高度：紧凑工具栏、标签内嵌按钮 */
@@ -136,6 +138,7 @@
--ua-color-highlight: rgba(255, 255, 255, 0.08); /* 暗色内高光：暗底上白高光刺眼，降到 8% 只留一道细光 */
--ua-color-accent: #378add; /* 暗色强调色：提亮以保证暗底可读 */
--ua-color-accent-contrast: #042c53; /* 暗色强调色上的文字色：深色反白，维持对比 */
--ua-color-accent-soft: color-mix(in srgb, var(--ua-color-accent) 82%, var(--ua-color-bg)); /* 暗色柔和强调色：与亮色同结构，混入暗底即自然降饱和 */
--ua-color-tint-accent: color-mix(in srgb, var(--ua-color-accent) 14%, transparent); /* 暗色淡底标准档：暗底上淡底不可见，透明度升一档 */
--ua-color-tint-accent-weak: color-mix(in srgb, var(--ua-color-accent) 8%, transparent); /* 暗色淡底弱档：透明度升一档 */
--ua-color-danger: #d96a6a; /* 暗色危险色 */
@@ -159,5 +162,5 @@
--ua-focus-ring-warning: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 34%, transparent); /* 暗色警告焦点环 */
--ua-focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 30%, transparent); /* 暗色错误强调环 */
--ua-focus-ring-pulse: 0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 8%, transparent); /* 暗色呼吸光晕：暗底上低透明度看不见，加倍 */
--ua-focus-ring-selected: 0 0 0 2px var(--ua-color-accent); /* 暗色选中环：随 accent 翻转，与亮色同结构 */
--ua-focus-ring-selected: 0 0 0 1.5px var(--ua-color-accent-soft); /* 暗色选中环：随 accent 翻转并与亮色同口径 */
}
packages/design/tokens/tokens.json
+42 -1
View File
@@ -44,12 +44,53 @@
"warning": {
"light": "#9a6b1f",
"dark": "#d9a94f"
},
"surface2": {
"light": "color-mix(in srgb, var(--ua-color-text) 4%, var(--ua-color-bg))",
"dark": "color-mix(in srgb, var(--ua-color-text) 5%, var(--ua-color-bg))"
},
"surface3": {
"light": "color-mix(in srgb, var(--ua-color-text) 8%, var(--ua-color-bg))",
"dark": "color-mix(in srgb, var(--ua-color-text) 10%, var(--ua-color-bg))"
},
"surfaceInset": {
"light": "color-mix(in srgb, var(--ua-color-text) 5%, var(--ua-color-bg))",
"dark": "color-mix(in srgb, var(--ua-color-text) 6%, var(--ua-color-bg))"
},
"textSecondary": {
"light": "#4b5158",
"dark": "#b4bac2"
},
"textFaint": {
"light": "#9aa0a8",
"dark": "#62676f"
},
"overlay": {
"light": "rgba(0, 0, 0, 0.45)",
"dark": "rgba(0, 0, 0, 0.6)"
},
"overlayStrong": {
"light": "rgba(0, 0, 0, 0.6)",
"dark": "rgba(0, 0, 0, 0.7)"
},
"tintAccent": {
"light": "color-mix(in srgb, var(--ua-color-accent) 10%, transparent)",
"dark": "color-mix(in srgb, var(--ua-color-accent) 14%, transparent)"
},
"tintAccentWeak": {
"light": "color-mix(in srgb, var(--ua-color-accent) 5%, transparent)",
"dark": "color-mix(in srgb, var(--ua-color-accent) 8%, transparent)"
},
"accentSoft": {
"light": "color-mix(in srgb, var(--ua-color-accent) 72%, var(--ua-color-bg))",
"dark": "color-mix(in srgb, var(--ua-color-accent) 82%, var(--ua-color-bg))"
}
},
"radius": {
"sm": "4px",
"md": "8px",
"lg": "12px"
"lg": "12px",
"mdInset": "calc(var(--ua-radius-md) - 1px)"
},
"space": {
"1": "4px",
packages/skin/ui/src/dataTable.ts
+2 -2
View File
@@ -6,7 +6,7 @@ import {
sortPlugin,
} from '@ui-arch/table-core';
import type { RowKey } from '@ui-arch/table-core';
import { computed, effect, h, renderList, signal } from '@ui-arch/frame';
import { iconSearch } from './icons.js'; import { computed, effect, h, renderList, signal } from '@ui-arch/frame';
import { attachResize } from './columnResize.js';
import { exportButton } from './csv.js';
import { button } from './button.js';
@@ -168,7 +168,7 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
const filterInput = textField({
placeholder: `筛选 ${filterKey}…`,
prefix: '🔍',
prefix: iconSearch(),
value: keyword, // 受控信号：空状态里的「清除筛选」能同时清掉输入框内容
disabled: props.loading, // 加载中禁止筛选，避免与在途结果竞争
onInput: (value) => {
packages/skin/ui/src/icons.ts
+30
View File
@@ -0,0 +1,30 @@
/*** 内联图标工厂：组件内部用小图标一律走 SVG，不用 emoji —— emoji 在 Windows / macOS 会渲染成彩色位图，尺寸、颜色、基线都不可控 ***/
const NS = 'http://www.w3.org/2000/svg'; // SVG 命名空间常量，createElementNS 必填
/*** 放大镜图标：搜索框的默认前缀。外层 span 承载布局，返回 HTMLElement 以兼容 prefix 入参类型 ***/
export function iconSearch(): HTMLElement {
const holder = document.createElement('span');
holder.style.display = 'inline-flex'; // 让图标与输入文本在同一基线居中
holder.setAttribute('aria-hidden', 'true'); // 纯装饰：语义由输入框 placeholder / label 承担
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;
}
packages/skin/ui/ui.css
+38 -16
View File
@@ -485,8 +485,8 @@ body.ua-col-resizing {
但两者的密集列表换成内嵌描边后更整齐；与 cascader 项保持同一口径 */
.ua-option:focus-visible,
.ua-menu-item:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline-offset: -2px;
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline-offset: -1.5px;
}
/* 选中态：低视觉比重——淡色底 + 弱化文字，不抢焦点 */
.ua-option-selected {
@@ -537,6 +537,16 @@ body.ua-col-resizing {
left: auto;
right: 0;
}
/* 首末项补圆角：面板内距 4px 小于 8px 圆角，悬停底色块的直角会压出面板弧线 */
.ua-menu-pop > .ua-menu-item:first-child {
border-radius: var(--ua-radius-sm) var(--ua-radius-sm) 0 0;
}
.ua-menu-pop > .ua-menu-item:last-child {
border-radius: 0 0 var(--ua-radius-sm) var(--ua-radius-sm);
}
.ua-menu-pop > .ua-menu-item:only-child {
border-radius: var(--ua-radius-sm);
}
.ua-menu-pop.is-flip {
top: auto; /* 空间不足翻到触发器上方 */
bottom: calc(100% + 4px);
@@ -1666,8 +1676,8 @@ button.ua-step-dot:hover {
.ua-tab:focus-visible {
/* 页签条是 overflow-x:auto 的滚动容器，外偏移焦点环会被裁掉，
这里改用与 seg-btn 一致的内嵌描边，键盘用户才真看得见焦点 */
outline: 2px solid var(--ua-color-accent);
outline-offset: -2px;
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline-offset: -1.5px;
color: var(--ua-color-accent);
}
.ua-tab:disabled {
@@ -1724,9 +1734,9 @@ button.ua-step-dot:hover {
bottom: -1px;
left: 0;
width: 0;
height: 2px;
height: 1.5px; /* 指示条不做 2px 实线：细一档已足够标识，粗条在浅底上过于抢眼 */
border-radius: 1px;
background: var(--ua-color-accent);
background: var(--ua-color-accent-soft); /* 柔和强调色：纯 accent 满饱和做长条会发刺 */
transition: left var(--ua-duration-slow) var(--ua-ease-out), width var(--ua-duration-slow) var(--ua-ease-out);
}
@@ -2206,6 +2216,16 @@ button.ua-step-dot:hover {
font-size: var(--ua-font-size-md);
user-select: none;
}
/* 附加块自带底色，首末两端必须跟组圆角对齐（减去 1px 边框），否则直角会压出外层圆角 */
.ua-input-group > .ua-input-addon:first-child {
border-radius: var(--ua-radius-md-inset) 0 0 var(--ua-radius-md-inset);
}
.ua-input-group > .ua-input-addon:last-child {
border-radius: 0 var(--ua-radius-md-inset) var(--ua-radius-md-inset) 0;
}
.ua-input-group > .ua-input-addon:only-child {
border-radius: var(--ua-radius-md-inset);
}
.ua-input-clear-group {
display: inline-flex; /* 清空按钮 / 计数 + 原有 suffix 并排 */
align-items: center;
@@ -2411,8 +2431,8 @@ button.ua-step-dot:hover {
color: var(--ua-color-text);
}
.ua-seg-btn:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline-offset: -2px;
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline-offset: -1.5px;
}
.ua-seg-btn.is-active {
color: var(--ua-color-accent);
@@ -3220,8 +3240,8 @@ button.ua-step-dot:hover {
cursor: not-allowed;
}
.ua-cascader-opt:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline-offset: -2px;
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline-offset: -1.5px;
}
.ua-cascader-arrow {
color: var(--ua-color-text-muted);
@@ -3424,6 +3444,7 @@ button.ua-step-dot:hover {
border-radius: var(--ua-radius-md);
background: var(--ua-color-surface);
box-shadow: var(--ua-shadow-4);
overflow: clip; /* 裁掉内层格子的直角底：不建滚动容器，日历/色板本身不需要滚动 */
}
.ua-datepicker-pop.ua-open {
display: block;
@@ -3503,8 +3524,8 @@ button.ua-step-dot:hover {
cursor: not-allowed;
}
.ua-datepicker-day:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline-offset: -2px;
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline-offset: -1.5px;
}
.ua-datepicker-foot {
display: flex;
@@ -3667,6 +3688,7 @@ button.ua-step-dot:hover {
border-radius: var(--ua-radius-md);
background: var(--ua-color-surface);
box-shadow: var(--ua-shadow-4);
overflow: clip; /* 裁掉内层格子的直角底：不建滚动容器，日历/色板本身不需要滚动 */
}
.ua-colorpicker-pop.ua-open {
display: block;
@@ -4064,10 +4086,10 @@ button.ua-step-dot:hover {
position: absolute;
left: calc(-1 * var(--ua-space-3));
top: 50%;
width: 2px;
width: 1.5px;
height: 70%;
transform: translateY(-50%);
background: var(--ua-color-accent);
background: var(--ua-color-accent-soft);
border-radius: 1px;
}
.ua-anchor-link.is-disabled {
@@ -4722,8 +4744,8 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
background: var(--ua-color-tint-accent-weak);
}
.ua-row-clickable:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline-offset: -2px; /* 环画在行内，避免被表格滚动容器裁掉 */
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline-offset: -1.5px; /* 环画在行内，避免被表格滚动容器裁掉 */
}
/* —— 通知角落：右上与 toast 同侧，左列放次要信息 —— */
packages/tools/cli/recipes.md
+1 -1
View File
@@ -194,7 +194,7 @@ effect(() => {
document.documentElement.style.colorScheme = dark() ? 'dark' : 'light'; // 原生控件（date/滚动条）跟着变
localStorage.setItem('ua-theme', dark() ? 'dark' : 'light');
});
floatButton({ icon: '🌗', label: '切换主题', onClick: () => dark(!dark()) });
floatButton({ label: '切换主题', onClick: () => dark(!dark()) });
```
要点：