1 line
2.2 KiB
JavaScript
1 line
2.2 KiB
JavaScript
import{Or as e,Tr as t,t as n}from"./jsx-runtime-NwRKtVrk.js";import{t as r}from"./space-Dvitgohy.js";import{t as i}from"./card-D7XvzVif.js";import{c as a,t as o}from"./XinForm-ihfVpzb6.js";import{M as s,b as c,h as l}from"./index-B7MUL4ct.js";var u=e(t(),1),d=n(),{Title:f,Paragraph:p,Text:m}=l,h=()=>{let[e,t]=(0,u.useState)(``),n=(0,u.useRef)(void 0);return(0,d.jsxs)(`div`,{children:[(0,d.jsxs)(l,{style:{margin:`12px 0 24px 0`},children:[(0,d.jsx)(f,{level:2,children:`图标选择器组件示例`}),(0,d.jsx)(p,{children:`基于 Ant Design Select + Modal + Tabs 封装的图标选择器组件，支持多分类图标选择。`})]}),(0,d.jsxs)(r,{direction:`vertical`,size:`large`,style:{width:`100%`},children:[(0,d.jsxs)(i,{title:`独立使用`,bordered:!0,children:[(0,d.jsx)(m,{children:`基础用法：`}),(0,d.jsx)(`div`,{className:`mt-2`,children:(0,d.jsx)(a,{value:e,onChange:e=>{t(e||``),e?c.success(`选中图标: ${e}`):c.info(`已清空图标`)},placeholder:`请选择图标`})}),(0,d.jsx)(s,{}),(0,d.jsx)(m,{children:`禁用状态：`}),(0,d.jsx)(`div`,{className:`mt-2`,children:(0,d.jsx)(a,{value:`HomeOutlined`,disabled:!0,placeholder:`禁用状态`})}),(0,d.jsx)(s,{}),(0,d.jsx)(m,{children:`只读状态：`}),(0,d.jsx)(`div`,{className:`mt-2`,children:(0,d.jsx)(a,{value:`SettingOutlined`,readonly:!0,placeholder:`只读状态`})}),(0,d.jsx)(m,{type:`secondary`,className:`mt-2 block text-sm`,children:`只读模式下不能打开选择弹窗，但可以清空`})]}),(0,d.jsx)(i,{title:`在 XinForm 中使用`,bordered:!0,children:(0,d.jsx)(o,{formRef:n,columns:[{dataIndex:`systemName`,title:`系统名称`,valueType:`text`,rules:[{required:!0,message:`请输入系统名称`}],fieldProps:{placeholder:`请输入系统名称`}},{dataIndex:`systemIcon`,title:`系统图标`,rules:[{required:!0,message:`请选择系统图标`}],fieldRender:()=>(0,d.jsx)(a,{placeholder:`请选择系统图标`})},{dataIndex:`description`,title:`系统描述`,valueType:`textarea`,fieldProps:{placeholder:`请输入系统描述`,rows:4}}],onFinish:async e=>(console.log(`XinForm 提交:`,e),c.success(`提交成功！`),c.info(`系统图标: ${e.systemIcon}`),!0),submitter:{submitText:`提交表单`,render:e=>e.submit}})})]})]})};export{h as default}; |