wangjia
911ceca079
Select 组件（用户拍板：下拉框全端共用一个真相源）： - design/components/forms/Select.jsx：自绘下拉——触发器同 Input （control-sm/radius-sm/border-1 + chevronDown），弹层同菜单 （radius-md/shadow-menu、选中项前置对勾、hover surface-2）， 外点/Esc 收起；登记簿加卡；icons.js 新增 chevronDown 并登记 icon-map - 原型 SettingsTray 与桌面 SettingsApp 同步换用（替换原生 select—— 其系统弹层样式/位置不可控，即 12A 截图问题） 原型组件运行时可再生（修复单源缺口）： - design-pipeline/bundle-components.mjs：用 desktop 现成 esbuild 重建 _ds_bundle.js（此前为 Claude 导出产物、仓库内无法再生，组件一改即 过期）；import 'react' 经全局 shim，命名空间不变；已实测原型页正常 - _ds_bundle.js 重建（15 个组件，含 Select/Icon） 设置窗口无边框： - tauri.conf settings 窗口 titleBarStyle=Overlay + hiddenTitle， 系统红绿灯悬浮左上；SettingsApp 自绘顶条（surface-2 + 下边框 + data-tauri-drag-region 可拖拽），对齐原型 MacWindow 规格 合并 feat/design-truth-source（真相源与闸体系）进本分支 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
39 lines
2.0 KiB
JavaScript
39 lines
2.0 KiB
JavaScript
/* ============================================================
|
||
dudu · UI 图标单源（web 侧）
|
||
Lucide 线条图标（ISC）：24 网格、2px 圆头描边、currentColor。
|
||
新增图标：从 lucide.dev 复制 path → 在此登记 → icon-map.json
|
||
补跨端映射 → 登记簿（design/index.html）自动展示。
|
||
禁止在业务代码里内联 <path>——check-code 闸会拦。
|
||
============================================================ */
|
||
|
||
/** 24 网格图标 path 片段（不含 <svg> 外壳） */
|
||
export const icons = {
|
||
/** 麦克风（识别/录音） */
|
||
mic: '<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/>',
|
||
/** 对勾（完成/选中） */
|
||
check: '<path d="M20 6 9 17l-5-5"/>',
|
||
/** 关闭 */
|
||
x: '<path d="M18 6 6 18M6 6l12 12"/>',
|
||
/** 添加图片（反馈附图） */
|
||
imagePlus:
|
||
'<path d="M16 5h6"/><path d="M19 2v6"/><path d="M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
|
||
/** 钥匙（权限引导） */
|
||
key: '<path d="m15.5 7.5 3 3L22 7l-3-3"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/>',
|
||
/** 下拉箭头（Select 等展开指示） */
|
||
chevronDown: '<path d="m6 9 6 6 6-6"/>',
|
||
};
|
||
|
||
/** 品牌 mark（48 网格、3.5 圆头——圆嘴 + 三条声波，与 assets/logo-mark.svg 同构） */
|
||
export const logoMark =
|
||
'<circle cx="24" cy="24" r="18"/><path d="M17 20.5v7"/><path d="M24 16.5v15"/><path d="M31 20.5v7"/>';
|
||
|
||
/** 生成完整 <svg> 字符串（框架无关，官网/innerHTML 场景用） */
|
||
export function svgIcon(name, { size = 16, sw = 2 } = {}) {
|
||
const body = icons[name];
|
||
if (!body) throw new Error(`unknown icon: ${name}`);
|
||
return (
|
||
`<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" ` +
|
||
`stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`
|
||
);
|
||
}
|