Winston Builds

WINSTON UI / 0.1.0

少一点重复，
多一点清楚。

可独立安装的 UI 模块库。把基础样式、Demo 体验路径和解释型图表带到下一个项目。

预览设置

01 / 体验路径

看见 → 体验 → 观察 → 理解 → 验证

场景先于解释；主动作只有一个；结果成为高潮；实现细节留给想继续的人。

体验骨架 · 模拟数据

先看候选，再试一次偏好变化

场景先出现，主动作只有一个。结果和职责边界紧跟在交互后面，更深的输入方式再展开。

默认偏好 · 候选排序

分数为预设教学数据，用于展示交互变化。

  • A-12 · 分区更匹配88 分
  • B-03 · 距离更近76 分
  • C-08 · 空间更充裕70 分
当前推荐 A-12
默认偏好兼顾分区与距离。点击一次即可比较结果。
  1. 输入选择偏好
    用户表达决策意图
  2. 代码重新排序
    固定规则计算候选分数
  3. 结果显示变化
    推荐与分数立即可见
数据
固定示例
推理
规则演示 · 无模型调用
执行
仅浏览器内状态
高级控制 · 自由输入

样例仅识别：优先距离

为什么这样设计？

先看到场景，再做一次明显操作，然后看到结果与职责边界。自由输入和实现说明不抢占第一注意力。

模块只负责体验层次；业务数据、算法与执行权限仍由应用自己决定。

02 / UI 基础

统一，但不僵硬

白底、深灰文字和少量强调色。使用文字与图标共同传达状态。

基础色与字体

背景#FFFFFF
正文#26332F
强调#006B5E
分隔#E8ECE9

清楚、舒适，信息足够。

正文 16px · 标签 14px · 行高 1.6 · 8px 间距基准

动作与状态

完成待确认失败

提示说明用途，不替代输入标签。

加载、空数据与失败，同样需要设计

还没有结果
先选择一个示例，或输入自己的任务。

以上为显式切换的状态样例，不代表后台请求。

03 / 图表模块

先确定要解释什么，再选图

五类基础表达。所有数据均为组件示例，不是业务成果。

变化了多少？
调整前
24m
调整后
12m

前后对比：单位保持一致，由业务解释变化是否有利。

随时间怎样变化？

按输入顺序展示，支持负值与单点。

26 件0 件周一周五
查看完整数据
LabelValue 件
周一12
周二18
周三15
周四26
周五24
为什么选这个？

用排序说明选项差异，规则和约束另外解释。

  • 选项 B94 分
  • 选项 C72 分
  • 选项 A66 分
什么时候做什么？

展示时间区间，不承担排产计算。

8h18h
  • 任务 A8–11h
  • 任务 B11–15h
  • 任务 C14–17h

谁负责哪一步？

  1. AI 提出建议

    理解任务与候选方案

  2. 规则校验

    检查约束与可执行性

  3. 人工决定

    按风险设置确认

  4. 系统执行

    写入并回读结果

04 / 跨项目复用

带到下一个项目

React 组件与纯 CSS。无需本站路由、Supabase、Tailwind 或 AI 服务。

直接复制源码

组件位于本仓库 src/ui，无外部依赖和全局副作用；其他项目直接复制源码文件即可复用。

源码与 API →

按需使用

只取颜色、只用按钮，或组合完整体验框架。主题可以覆盖，业务数据通过 props 传入，升级由各项目自己决定。

当前为站内共享实现；3D 场景与业务算法仍归各项目维护。