{"id":524,"date":"2026-06-23T21:56:42","date_gmt":"2026-06-23T13:56:42","guid":{"rendered":"https:\/\/mitongxue.cn\/?p=524"},"modified":"2026-06-23T21:56:42","modified_gmt":"2026-06-23T13:56:42","slug":"%e5%b8%b8%e7%94%a8%e7%bb%84%e4%bb%b6%e5%b0%81%e8%a3%85","status":"publish","type":"post","link":"https:\/\/mitongxue.cn\/index.php\/2026\/06\/23\/%e5%b8%b8%e7%94%a8%e7%bb%84%e4%bb%b6%e5%b0%81%e8%a3%85\/","title":{"rendered":"\u5e38\u7528\u7ec4\u4ef6\u5c01\u88c5"},"content":{"rendered":"\n

Dialog \u5f39\u7a97<\/h2>\n\n\n\n
import React from 'react';\nimport { Modal } from 'antd';\nconst Dialog = ({title, dialogStatus, render, setDialogStatus, width= 600}) => {\n    return (\n        <Modal\n         width= {width}\n         destroyOnHidden={true}\n         title={title}\n         open={dialogStatus}\n         onCancel={setDialogStatus}\n         footer={null}\n        >\n            {render()}\n        <\/Modal>\n    );\n}\n\nexport default Dialog;\n<\/code><\/pre>\n\n\n\n
Drawer \u62bd\u5c49\u7ec4\u4ef6<\/h2>\n\n\n\n
import React from 'react';\nimport { Drawer, Modal, message } from 'antd';\nimport { useSelector, useDispatch } from 'umi';\nimport IconMap from 'components\/IconMap';\nimport $http from 'api';\nimport '.\/index.less';\n\nconst DrawerComponent = ({title=\"\u8be6\u60c5\", interfaceName, _id, render, reloadList}) => {\n    const { isShowDetailDialog } = useSelector(state => state.common);\n    const dispatch = useDispatch();\n      \/\/- \u6253\u5f00\u5220\u9664\u7684\u5bf9\u8bdd\u6846\n    const openModelDialog = ()=> {\n        Modal.confirm({\n            title:'\u6e29\u99a8\u63d0\u793a',\n            content:'\u786e\u5b9a\u8981\u5220\u9664\u5f53\u524d\u7528\u6237\u4fe1\u606f\u4e48?',\n            onOk:_deleteItem\n        })\n    }\n\n  \/\/- \u5220\u9664\u6307\u5b9a\u7684\u5217\u8868\u9879\uff08\u8be6\u60c5\u5c55\u793a\u7684\u8fd9\u4e00\u9879\u6570\u636e\uff09\n  const _deleteItem = async ()=> {\n    const { code, msg } = await $http[interfaceName]({ids:[_id]})\n    if(code) return ;\n    message.success(msg);\n    closeDialog();\n    reloadList();\n  }\n\n  \/\/- \u5173\u95ed\u5f39\u7a97\n  const closeDialog = ()=> {\n    dispatch({ type: 'common\/changeIsShowDetailDialog', payload: { isShowDetailDialog:false}})\n  }\n  \/* \u5de6\u8fb9\u5934\u90e8\u5185\u5bb9 *\/\n  const titleNode = (\n    <>\n      <span>{IconMap.copy}<\/span>\n      <span>{title}<\/span>\n    <\/>\n  )\n\n  const extra = (\n    <>\n      <span className=\"icon\" onClick={openModelDialog}>{IconMap.delMul}<\/span>\n      <span className=\"line\"><\/span>\n      <span className=\"icon\" onClick={closeDialog}>{IconMap.close}<\/span>\n    <\/>\n  )\n\n    return (\n        \n            <Drawer \n                title={titleNode}\n                width={500}\n                placement=\"right\"\n                closable={false}\n                destroyOnClose={true}\n                open={isShowDetailDialog}\n                extra={extra}\n            >\n            {render()}\n            <\/Drawer>\n       \n    );\n}\n\nexport default DrawerComponent;\n<\/code><\/pre>\n\n\n\n
Loading\u7ec4\u4ef6\uff0c\u52a0\u8f7d\u6846<\/h2>\n\n\n\n
import React from 'react';\nimport '.\/index.less';\nimport classnames from 'classnames';\nconst Loading = ({isLoading, part=false}) => {\n    const loadingStyle = part ? {\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        height: '100px',\n        width: '100px',\n        transform: 'translate(-50%, -50%)',\n    } : {};\n    return (\n        <div style={loadingStyle} className={classnames('loader', 'fullScreen', {hidden: !isLoading})}>\n            <div className='wrapper'>\n                <div className='inner'><\/div>\n                <div className='text'>LOADING<\/div>\n            <\/div>\n        <\/div>\n    );\n};\n\nexport default Loading;\n<\/code><\/pre>\n\n\n\n
loading\u6837\u5f0f<\/h2>\n\n\n\n
.loader {\n  background-color: #fff;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 100000;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  opacity: 1;\n  text-align: center;\n\n  &.fullScreen {\n    position: fixed;\n  }\n\n  .wrapper {\n    width: 100px;\n    height: 100px;\n    display: inline-flex;\n    flex-direction: column;\n    justify-content: space-around;\n  }\n\n  .inner {\n    width: 40px;\n    height: 40px;\n    margin: 0 auto;\n    text-indent: -12345px;\n    border-top: 1px solid rgba(0, 0, 0, 0.08);\n    border-right: 1px solid rgba(0, 0, 0, 0.08);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n    border-left: 1px solid rgba(0, 0, 0, 0.7);\n    border-radius: 50%;\n    z-index: 100001;\n    animation: spinner 600ms infinite linear;\n  }\n\n  .text {\n    width: 100px;\n    height: 20px;\n    text-align: center;\n    font-size: 12px;\n    letter-spacing: 4px;\n    color: #000;\n  }\n\n  &.hidden {\n    z-index: -1;\n    opacity: 0;\n    transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;\n  }\n}\n@keyframes spinner {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n<\/code><\/pre>\n\n\n\n
\u4fa7\u8fb9\u5bfc\u822a\u83dc\u5355\u680f<\/h2>\n\n\n\n
import React from 'react';\nimport { Link, history } from 'umi';\nimport img from 'common\/img\/logo.png';\nimport IconMap from 'components\/IconMap.jsx';\nconst Index = ({ Sider, Menu, collapse }) => {\n    const pathname = history.location.pathname;\n    const  routeList = JSON.parse(sessionStorage.getItem('routeList'));\n    \/\/ console.log(routeList,'routeList');\n    const items = routeList?.map((item) => ({\n        key: item.route,\n        icon: IconMap[item.icon] || item.icon,\n        label: <Link to={item.route}>{item.zhName}<\/Link>,\n    }));\n    \/\/ console.log(items,'items');\n    return (\n        <Sider theme=\"light\" className=\"side-bar\" collapsed={collapse}>\n            <div className=\"brand\">\n                <div className=\"logo\">\n                    <img src={img} alt=\"\" \/>\n                    {!collapse && <h1>\u4eba\u529b\u8d44\u6e90\u7cfb\u7edf<\/h1>}    \n                <\/div>\n            <\/div>\n            <div className=\"menu-container\">\n                <Menu mode=\"inline\" selectedKeys={[pathname]} items={items}><\/Menu>\n            <\/div>\n        <\/Sider>\n    );\n}\n\nexport default Index;\n<\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Dialog \u5f39\u7a97 Drawer \u62bd\u5c49\u7ec4\u4ef6 Loa..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,12,11],"tags":[31,40,28],"class_list":["post-524","post","type-post","status-publish","format-standard","hentry","category-css","category-react-","category-front","tag-ant-design","tag-css","tag-react"],"featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":""},"author_info":{"info":["\u9648 \u67d0\u4eba"]},"category_info":"CSS<\/a> React<\/a> \u524d\u7aef<\/a>","tag_info":"\u524d\u7aef","comment_count":"0","_links":{"self":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/comments?post=524"}],"version-history":[{"count":2,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/524\/revisions"}],"predecessor-version":[{"id":526,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/524\/revisions\/526"}],"wp:attachment":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/media?parent=524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/categories?post=524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/tags?post=524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}