sax-design-vue

关于

大家好，自荐一下我一个人维护的开源项目 Sax Design Vue：基于 Vue3 和 TypeScript 的 UI 组件库，最近发布了 2.1.0，MIT 协议。 Vuesax 的 Vue3 版本停止持续更新后，我想尝试把它复活。做着做着，又决定在原有视觉语言上做点更大胆、更不一样的东西：让它既能做出有辨识度的界面，也能承接复杂数据业务与 Agent 应用。表格的功能和交互参考了 vxe-table，感谢这两个项目带来的启发。 特色目录 | 能力 | 值得一看的地方 | | --- | --- | | 基于路由的 Anchor | 同一份目录混合路由章节和页内锚点；支持页首 / 页尾继续滚动切换章节，以及相邻路由预取。 | | 动态行高与双向虚拟表格 | 根据内容测量实际行高，配合行列虚拟化和按索引数据源；固定列、多级表头等业务能力仍可组合使用。 | | Form / Table 共享渲染器 | 同一份渲染器定义服务于单元格展示、编辑、表单与筛选，复用标准控件和业务规则。 | | 14 个 Agent 交互组件 | 覆盖输入、消息、流式输出、推理步骤、引用、计划审批等过程；模型能力通过数据配置联动。 | | 液态镜片 Card | 用 SVG 滤镜实现背景折射，材质、布局和交互效果可以独立组合。 | | 弧形与 3D Carousel | 弧形扇面、卡片层叠、环形轨道和棱柱展示，共用导航、拖动和自动播放能力。 | | 暗水印与截图显影 | 除明水印外，也能生成低可见度的暗水印，并提供截图显影示例。 | | 声明式 Skeleton | 用圆、方块、长条与嵌套行的简易配置组合骨架屏，避免每种布局都手写占位结构。 | 下面用几个实际示例介绍其中的重点。 1. 有自己的美术风格 延续 Vuesax 的设计语言，以无边框、圆角、柔和阴影和渐变建立层次，强调卡片、控件、浮层之间的一致性；支持浅色 / 深色主题，也提供玻璃材质、气泡纹理进度条等视觉能力。 输入、选择、反馈和弹出层都沿用这套视觉语言，配合霓虹文字、材质和动效做一点大胆的尝试。 2. 表格的业务能力与大数据渲染一起做 Table 在同一个组件中提供多级表头、固定列、树形与分组、汇总、合并单元格、编辑校验、变更跟踪、查找替换、行列拖拽，以及查询表单、工具栏和请求代理。Form 与 Table 共用渲染器机制，常见输入与操作可以通过配置复用。 动态行高会按内容自动测量，支持换行文本与不同高度的行，并与行列虚拟化配合，不要求每一行都写死高度。 性能方面支持行列双向虚拟化和按索引数据源 virtualSource。虚拟化减少 DOM；索引数据源进一步避免为了描述巨量逻辑行列而先创建完整数组。 下面是文档中的 10 万行 × 10 万列逻辑数据示例，支持在起点、中部和末端之间跳转，只读取当前窗口，并保留固定列。它表示逻辑规模，不会一次创建或渲染全部单元格。文档还提供百万行生成源的校验与图表取数示例。 可以直接体验：表格基础 · 编辑与校验 · 虚拟化与大数据 3. 内置 14 个常用 Agent 交互组件 覆盖聊天输入、角色消息、消息虚拟滚动、聊天历史、流式文本、推理步骤、引用、代码块、文件差异、任务列表、计划审批、问题卡片、图像生成状态和 Agent Editor。 聊天输入：文件选择与图片预览、语音输入入口、模型选择、Fast 和思考强度设置；模型能力由应用传入，切换模型时联动可用选项。 消息与输出：用户 / Agent 的不同布局和操作，动态行高虚拟滚动、历史懒加载、流式展示和引用。 执行过程：推理步骤、任务列表、可展开的计划与批准反馈，以及收集用户回答的问题卡片。 这些组件负责界面和交互，模型服务及业务流程由应用接入。可以从现成组件开始组合，而不必逐个重写聊天与执行过程的基础 UI。 项目提供中英文文档、可运行示例、代码查看与在线 Playground。

收录记录

1. 阮一峰周刊·用户投稿

   2026年10月12日 · 1 次收录