用途:这是 PanelUI 的 Web 集合,用于构建 React 网页界面,组件基于 shadcn/ui,使用 Tailwind CSS v4 与项目已有的主题令牌着色,因此能直接沿用项目的颜色、圆角与深色模式,无需额外设置。它不适用于 React Native,后者是另一个独立包和技能。
主要能力与用法:写 UI 前先读 components.md 查看已有组件,优先使用已有组件而不是自行编写。使用某组件前先读 components/ 中该组件的文件,里面有导入行、各个部件与全部 prop,均来自源码,不要猜测 prop。安装方式有两种:若项目中有 components.json 且含 @panelui 注册表,则用 shadcn CLI 复制组件;若 package.json 中有 panelui-web,则从包导入,详见 setup.md。
规则:颜色是角色而非数值,凡带颜色的组件都接受 color="primary" | "info" | "success" | "warning" | "destructive",不要传入十六进制值或 Tailwind 调色板类作为组件自身颜色;按含义选角色,success 表示好、warning 表示需注意、destructive 表示坏、info 表示中性强调,其余用 primary,不要让同一屏幕所有组件都用同一种颜色。数据需用自己的文本,标签、计数与名称应来自项目数据,不要复用示例文本。复合部件与服务器组件:在带 "use client" 的文件中用点号写法如 Planet.Globe;服务器组件无法读取客户端模块属性,因此每个部件按名称导入,如 PlanetGlobe;Kpi 不是客户端模块,可在任何处用点号写法。以框架打头:作为面板展示的组件置于框架中,即带标题的弱化色条围绕内部有边框的卡片,参见各组件文件示例。为屏幕阅读器标注:组件接受 label,显示数值处接受 valueText,需传入,因为默认值较为通用。
限制:资料未提供具体组件清单、版本、价格、平台支持与效果保证等信息。