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