ran
简体中文

设计方法、组件与工具

使用 Ran Design、ranui 组件和 ranuts 工具构建产品。三者可独立使用，为开发者和 agent 提供指引。

使用 agent 构建前往 GitHub
示例

邀请成员

只读编辑管理员
模拟请求失败发送邀请

这个示例对应的指南章节交互文字

真实的 ranui 组件。不填邮箱或模拟失败，就能看到每种状态。

组件
41
工具函数
90+
语言
8
协议
MIT

用 ranui 组合的真实状态

上传中
quarterly-report.pdf64%
取消
Agent 运行
  1. 读取 4 个文件
  2. 运行测试
  3. 创建 Pull Request
加载中
玻璃材质
<r-glass>

选择从哪里开始

ranui

框架无关的 Web Components 组件库。41 个开箱即用的 r- 元素，可放进 Vue、React 或纯 HTML 的任意技术栈。

查看组件

ranuts

提供字符串、对象、颜色、时间、文件与 DOM 等 TypeScript 工具，支持按需引入。

查看工具

Ran Design

涵盖布局、交互、动效和实际验收的方法，不依赖特定组件库。

探索设计方法

多数库没有的能力

ranui组件
  • 播放器 <r-player>HLS 自适应码率视频播放器，模块化的控制器内核。
  • 取色器 <r-colorpicker>完整 HSV 取色，带色相 + 透明度滑块，实时输出 HEX / RGBA。
  • 雷达图 <r-radar>Canvas 绘制的雷达图，支持逐轴标签与逐轴标签样式。
  • 数学公式 <r-math>通过懒加载的 Temml，用一个属性把 LaTeX 公式渲染成原生 MathML。
  • 刮刮卡 <r-scratch>可交互的 Canvas 刮开揭晓，带完成度阈值。
ranuts工具函数
  • Bridge 通信桥 PostMessageBridge基于 postMessage 的 Promise 化 RPC，跨 iframe、Worker 与标签页通信，结构化克隆传输、通道隔离。
  • Visual 渲染引擎 ApplicationPixiJS 风格的场景图，可插拔 WebGPU / WebGL / Canvas 渲染后端。
  • 虚拟 DOM h() · init()snabbdom 风格的 vDOM：hyperscript、patch、可插拔模块与生命周期钩子。
  • TOTP 验证码 TOTPRFC-6238 一次性口令，支持 SHA-1 到 SHA3-512，零加密依赖。
  • MIME 注册表 getMime()约 1000 条的 MIME ⇄ 文件扩展名双向查询。

安装与使用

安装两个包，注册一次元素，即可在任意地方使用，无需构建步骤，也不依赖任何框架。

npm i ranui ranuts
安装并注册
$ npm i ranui ranuts

// register the <r-*> elements once
import 'ranui'
import { debounce } from 'ranuts'
随处使用
<!-- Vue, React, or plain HTML -->
<r-button type="primary">Save</r-button>
<r-progress percent="66"></r-progress>