cnd-components-mcp

--- group: title: 云原生业务组件 --- # Instance 实例组件 ## 代码库地址 https://code.alibaba-inc.com/cn-lowcode/cnd-instance ## 基本使用 ```tsx preview import React from "react"; import { Instance } from "@ali/cnd"; const Demo = () => { return ( <Instance link={{ value: "bp1ishetaajhkq-z2wj6r", href: "https://www.aliyun.com/", }} text={{ value: "cn-alimaterial", onChange: (value) => { // change value }, }} /> ); }; export default Demo; ``` ## Table 中使用 ```tsx preview import React, { useState } from "react"; import { Table, Button, Instance } from "@ali/cnd"; const Demo = () => { const dataSource = (() => { return [1, 2, 3].map((item) => { return { id: `bp1ishetaajhkqz2wj6r-${item}`, name: `cn-alimaterial-${item}`, networkType: "专用网络", description: `${item}-Quotation for 1PCS Nano 3.0 controller compatible`, status: item % 2 ? true : false, }; }); })(); const render = (value, index, record) => { return ( <Instance disabled={!record.status} link={{ value: record.id, href: "https://www.aliyun.com/", }} text={{ value: record.name, title: "实例名称", onChange: (value) => { // change value }, }} /> ); }; return ( <Table hasBorder={false} dataSource={dataSource}> <Table.Column title="实例ID/名称" dataIndex="id" cell={render} /> <Table.Column title="状态" dataIndex="status" cell={(s) => (s ? "运行中" : "已停止")} /> <Table.Column title="网络类型" dataIndex="networkType" /> <Table.Column title="描述" dataIndex="description" /> <Table.Column title="操作" cell={() => ( <Button text type="primary"> 管理 </Button> )} width="20%" /> </Table> ); }; export default Demo; ``` > title 修改默认编辑标题 ## showIcon ```tsx preview import React from "react"; import { Instance } from "@ali/cnd"; const Demo = () => { return ( <Instance showIcon link={{ value: "bp1ishetaajhkqz2wj6r", href: "https://www.aliyun.com/", }} text={{ value: "cn-alimaterial", onChange: (value) => { // change value }, }} /> ); }; export default Demo; ``` ## beforeText - afterText ```tsx preview import React from "react"; import { Instance, Icon } from "@ali/cnd"; const Demo = () => { return ( <Instance link={{ value: "bp1ishetaajhkqz2wj6r", href: "https://www.aliyun.com/", }} text={{ value: "cn-alimaterial", showCopy: true, onChange: (value) => { // change value }, beforeText: ( <Icon type="management" size="small" style={{ color: "pink" }} /> ), afterText: "高危", afterTextColor: "high", }} /> ); }; export default Demo; ``` ## 自定义 footer ```tsx preview import React from "react"; import { Instance, Tag, Icon } from "@ali/cnd"; const style = { marginLeft: 8, color: "#666666" }; const Demo = () => { const footer = ( <div> <div style={{ color: "#999999" }}>-- 公 192.168.0.01 私｜ 4核</div> <Tag style={{ color: "#333" }} color="#e5edf2" size="small"> # 一般 </Tag> <Icon type="tag-fill" size="xs" style={style} /> </div> ); return ( <div style={{ width: 300 }}> <Instance status="failed" link={{ value: "cn-material-for-instance-ccsfeweasfdafluaeeac332ffsdf3adfadfa9898s", href: "https://www.aliyun.com/", }} footer={footer} /> <hr /> <Instance status="#04aca1" link={{ value: "bp1ishetaajhkqz2wj6r", href: "https://www.aliyun.com/", disabled: true, }} text={{ value: "cn-alimaterial", onChange: (value) => {}, disabled: true, }} footer={ <Tag color="#f37774" size="small"> 已过期 </Tag> } /> </div> ); }; export default Demo; ``` ## 内容过多 ```tsx preview import React from "react"; import { Instance } from "@ali/cnd"; const Demo = () => { return ( <Instance truncateProps={{ threshold: 300, position: "start", type: "width", }} link={{ value: "bp1ishetaajhkqz2wj".repeat(4), href: "https://www.aliyun.com/", }} text={{ value: "cn-alimaterial".repeat(4), onChange: (value) => { // change value }, truncateProps: { type: "width", threshold: 200 }, }} /> ); }; export default Demo; ``` > truncateProps 传入会触发截断效果 <br /> > link、text 中单独书写 truncateProps 属性可覆盖 Instance 中的 truncateProps ## Instance.Link ```tsx preview import React, { useState } from "react"; import { Instance } from "@ali/cnd"; const InstanceLink = Instance.Link; const Demo = () => { const click = () => (window.location = "https://www.aliyun.com/"); return ( <> <InstanceLink value="bp1ishetaajhkqz2wj6r" hasLinkStyle onClick={click} /> <br /> <InstanceLink value="bp1ishetaajhkqz2wj6r" /> </> ); }; export default Demo; ``` ## Instance.Text ```tsx preview import React, { useState } from "react"; import { Instance, Message, Loading } from "@ali/cnd"; const InstanceText = Instance.Text; const Demo = () => { const [data, setData] = useState("sg-bp1ishetaajhkqz2wj6r"); const [loading, setLoading] = useState(false); const rules = [ { pattern: /^[a-zA-Z]{3,10}$/, message: "请输入3～10个字母", trigger: "onChange", }, { required: true, message: "必填项", }, ]; // api mock const fetchApi = (value) => { return new Promise((resolve) => { setTimeout(() => { resolve(value); }, 500); }); }; const onChange = async (value) => { setLoading(true); const res = await fetchApi(value); setLoading(false); setData(res); Message.success("修改成功"); }; return ( <Loading visible={loading}> <InstanceText value={data} onChange={onChange} /> <br /> <br /> <h6>自定义校验规则：</h6> <InstanceText title="Email" value={data} showCopy onChange={onChange} rules={rules} helpMessage="请输入3～10个字母" /> </Loading> ); }; export default Demo; ``` > onChange 不传则没有编辑功能; <br /> > 自定义 rules 会覆盖内置校验和提示语（helpMessage）; ## API ### Instance | 属性 | 说明 | 类型 | 默认值 | | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | --------- | | link | props 同下方 Instance.Link props | object | - | | text | props 同下方 Instance.Text props | object | - | | showIcon | 是否默认显示按钮，支持 '' \| true \| false <br />设置为空字符串时按钮不展示 | boolean \| string | false | | disabled | 全局 disabeld，透传给子属性 | boolean | false | | status | 实例状态，可传自定义 color 值，支持 'succeeded' \| 'failed' \| 'warning' \| 'info' \| '自定义 color'，详见自定义 footer | string | undefined | | truncateProps | 默认没有截断效果，传入则显示截断<br /> 属性透传给 [Truncate 文本截断](https://unpkg.alibaba-inc.com/@ali/cnd-truncate@0.1.1/build/index.html#api)组件 | object | - | | footer | 自定义底部 | ReactNode | - | | showIconTooltip | 是否展示图标 tooltip | boolean|string | false | > link、text 属性中传入 showIcon 会覆盖 showIcon 属性；<br /> > link、text 属性中传入 truncateProps 会覆盖 truncateProps 属性； ### Instance.Link | 属性 | 说明 | 类型 | 默认值 | | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------ | | value | 当前值 | string | '-' | | href | a 标签 href 属性，传入 value 自动高亮 | string | null | | onClick | 鼠标点击事件, 传入 value 自动高亮 | Function | null | | disabled | 内容不可点击 | boolean | false | | hasLinkStyle | 是否展示带下划线样式 | boolean | false | | showIcon | 是否默认显示按钮，支持 '' \| true \| false <br />设置为空字符串时按钮不展示 | boolean \| string | false | | truncateProps | 默认没有截断效果，传入则显示截断<br /> 属性透传给 [Truncate 文本截断](https://unpkg.alibaba-inc.com/@ali/cnd-truncate@0.1.1/build/index.html#api)组件 | object | - | ### Instance.Text | 属性 | 说明 | 类型 | 默认值 | | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------- | | value | 当前值 | string | '-' | | onChange | 修改内容后回调，不传则不显示编辑按钮 <br /><br /> **签名：**<br /> Function(value: string) => void <br /> **参数：**<br />value: 修改后的值 | Function | null | | showCopy | 是否支持复制功能 | boolean | false | | disabled | 修改按钮不可点击 | boolean | false | | beforeText | text 值前添加内容。 | string \| ReactNode | undefined | | afterText | 标签，默认只支持一个，其他场景需要自定义 render，详见 affterText。 | string \| ReactNode | undefined | | afterTextColor | 标签样式，支持"high" \| "middle" \| "warning" \| "safe" \| "info" | string | "info" | | title | 修改框标题 | string | '编辑' | | helpMessage | 修改框底部提示语 | string | 只能输入 1 ~ 63 个含小写字母、-、.、数字的字符，<br />以小写字母开始、小写字母或数字结尾 | | rules | 自定义校验，传入则覆盖内置校验规则<br /><br /> **内置校验规则:** <br />· 必填项<br />· 1 ～ 63 个字符<br />· 以小写字母开始、小写字母或数字结尾，且不能出现 -. , .- , ..<br /><br /> 规则同 Field options.rules | Array< Rule > | - | | showIcon | 是否默认显示按钮，支持 '' \| true \| false <br />设置为空字符串时按钮不展示 | boolean \| string | false | | truncateProps | 默认没有截断效果，传入则显示截断<br /> 属性透传给 [Truncate 文本截断](https://unpkg.alibaba-inc.com/@ali/cnd-truncate@0.1.3/build/index.html#api)组件 | object | - | ### rules 示例 > rules:[{ required: true, message: '必填项' }] > rules:[{required:true,trigger:'onBlur'},{pattern:/abcd/,message:'abcd 不能缺'},{validator:(rule, value, callback)=>{callback('出错了')}}]