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

apps/demo/main.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
-  outline-offset: -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: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
-  outline-offset: -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: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
-  outline-offset: -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: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
-  outline-offset: -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: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
-  outline-offset: -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: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
-  outline-offset: -2px; /* 环画在行内，避免被表格滚动容器裁掉 */
+  outline-offset: -1.5px; /* 环画在行内，避免被表格滚动容器裁掉 */
 }
 
 /* —— 通知角落：右上与 toast 同侧，左列放次要信息 —— */

packages/tools/cli/recipes.md

@@ -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()) });
 ```
 
 要点：