@freightos/freightwind (英语)
FredWind Design System — React UI组件用于Fredos应用.
安装
npm install @freightos/freightwind @freightos/freightwind/icons
使用量
import { Button, Alert, Badge } from '@freightos/freightwind';
import '@freightos/freightwind/tokens.css';
组件需要用 FDS 设计符号装入 Tailwind CSS v4 tokens.css。 。 。 .
主机隔离( WebCargo)
在 WebCargo 主机内安装货运窗口时, 也会导入 WebCargo
将您的 App 包装到 .fw-root 元素 :
import '@freightos/freightwind/tokens.css';
import '@freightos/freightwind/host-isolation/webcargo.css';
<div className="fw-root">
<App />
</div>
图纸端口 Tailwind的标准飞行前范围 .fw-root 通过
:where() (0个添加的特异性),加上有焦点的取消键
编辑 .fw-base 每个元素标记,所以它覆盖了所提供的FW组件
在 Radix 门户内部(Dialog / Popover / Tooltip / Dropdown Menu / 选择).
它的存在完全是为了中和WebCargo的"靴子"式主机CSS
目标赤元素选择器( e)h1-h6 { margin-bottom: .5rem }, (中文(简体) ),
button { border-radius: 0 }, (中文(简体) ), button:focus { outline: 5px auto … },(.)——
它不强制FW特定型号, 所以它从来不从FW设计中漂移
标志.
在干净的主机中消耗货运窗口时跳过此文件( Vite player, greenfield Next.js apps,合作伙伴站点没有"靴子")——没有主机 CSS在那里战斗.
MCP Apps (英语:@freightos/freightwind/mcp-app(中文(简体) )
将货运窗口表面作为AI聊天内的互动卡(Claude,
ChatGPT)通过MCP Apps标准. useMcpApp 连接到主机、 镜像
会议主题.dark)和语言(dir编号 :lang把工具结果交给你,
并停止旧卡发送 一旦更新它.
import { useMcpApp } from '@freightos/freightwind/mcp-app';
function Card() {
const { data, isSuperseded, updateModelContext, sendMessage } = useMcpApp<MyData>({
appInfo: { name: 'my-card', version: '1.0.0' },
supersessionChannel: 'my-app:show_thing',
instanceKeyOf: (d) => ({ issuedAt: d.issuedAt, seq: d.seq }),
});
// updateModelContext(text) informs the model quietly; sendMessage(text) posts to the chat.
}
安装可选的同位素以使用 : @modelcontextprotocol/ext-apps (>= 1.7.5 < 2)
财务报告和审定财务报表 @modelcontextprotocol/sdk (^ 1.29) (中文(简体) ). 副路径是仅限无害环境管理,例如:
ext-apps本身。 超级会话使用 a BroadcastChannel,所以一个新的卡在
又一次公开聊天也标志着年长者已经过时。 全向导:货运窗口
文件 – AI – MCP Apps.
同伴依赖关系
react第18条react-dom第18条@freightos/freightwind/icons>= 1.0.0@modelcontextprotocol/ext-apps>= 1.7.5 < 2和@modelcontextprotocol/sdk^1.29(可选,用于/mcp-app仅限)
许可证
麻省理工学院