@tfdesign/c-voip-end

体服平台 C 端 VoIP 设计规范 NPM 包：React 组件、Tailwind v4 theme.css、以及 Agent Skill「产品设计-体服平台C端Voip-界面生成」。

安装

npm i react react-dom lucide-react @tfdesign/c-voip-end

或一键初始化（推荐在业务项目根目录由 AI 执行）：

npx -y -p @tfdesign/c-voip-end@latest tfds-voip-setup

入口 CSS

@import "tailwindcss";
@import "@tfdesign/c-voip-end/theme.css";
@source "./**/*.{js,jsx,ts,tsx}";
@source "../node_modules/@tfdesign/c-voip-end/**/*.{js,jsx}";

使用 Skill

安装后 postinstall 会同步 Skill 到 .cursor/skills/产品设计-体服平台C端Voip-界面生成/ 等目录。

在 Cursor 中输入：/产品设计-体服平台C端Voip-界面生成

页面模板

• VoipSmartPagePattern — C 端智能语音通话页
• VoipHumanPagePattern — 人工客服通话页
• 其它 VoIP 场景模板见 components.summary.json

与 @tfdesign/c-end 的区别

| 包 | 场景 | | --- | --- | | @tfdesign/c-end | C 端 IM 文字会话、办理 H5、猜你想问等 | | @tfdesign/c-voip-end | C 端 VoIP 语音通话页 |

请勿混用两套包的组件与 Skill。

AI Skill 索引

• components.summary.json — 组件/模板选型
• components.index.json — props / rules / examples 详情

集成自检：

node node_modules/@tfdesign/c-voip-end/scripts/check-tfds-integration.mjs

硬门禁：ESLint（@tfdesign/c-voip-end/eslint）

VoIP 项目请使用 c-voip-end preset（锁定 VoipSmartPagePattern 等全屏页模板）：

npm i -D eslint @eslint/js eslint-plugin-react eslint-plugin-react-hooks globals @tfdesign/c-voip-end

eslint.config.js：

import tfds from '@tfdesign/c-voip-end/eslint';
export default [...tfds];

CI 建议：

npx eslint .
node node_modules/@tfdesign/c-voip-end/scripts/check-tfds-contract.mjs

| 工具 | 作用 | |------|------| | @tfdesign/c-voip-end/eslint | spacing 白名单、禁止样式漂移、锁定 VoIP/IM 页面模板 | | check-tfds-contract.mjs | 禁混用 b-end/c-end、外链图片等 |

规则事实源：scripts/eslint/（随包 eslint/ 子路径发布，与包版本对齐）。