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
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 同侧，左列放次要信息 —— */