feat: ModalStore对手机端宽度适应问题

src/pages/Customer/Business/components/BusinessDetail/index.jsx

@@ -12,15 +12,7 @@ import './index.less'
 
 const Detail = props => {
   const { initialState } = useModel('@@initialState')
-  const {
-    visible,
-    onClose,
-    dispatch,
-    updateKey = 'business',
-    refresh,
-    dataId,
-    orderIds = []
-  } = props
+  const { visible, onClose, dispatch, updateKey = 'business', refresh, dataId, orderIds = [] } = props
   const shouldUpdate = refresh[dataId ?? updateKey] || false
   const [state, setState] = useState({
     loading: false,
@@ -75,7 +67,7 @@ const Detail = props => {
   }, [visible])
 
   return (
-    <Drawer visible={visible} onClose={onClose} className="zh-drawer">
+    <Drawer visible={visible} onClose={onClose} className="zh-drawer" contentWrapperStyle={{ width: 'unset' }}>
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>
@@ -87,9 +79,7 @@ const Detail = props => {
                       fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
                       size="20"
                       onClick={() => flipFn(FlipOverEnum.UP)}
-                      className={[
-                        flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'
-                      ].join(' ')}
+                      className={[flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'].join(' ')}
                     />
                   </Tooltip>
                   <Tooltip title="下一条记录">
@@ -97,10 +87,9 @@ const Detail = props => {
                       fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
                       size="20"
                       onClick={() => flipFn(FlipOverEnum.DOWN)}
-                      className={[
-                        flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer',
-                        'ml-1'
-                      ].join(' ')}
+                      className={[flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer', 'ml-1'].join(
+                        ' '
+                      )}
                     />
                   </Tooltip>
                 </div>
@@ -115,11 +104,7 @@ const Detail = props => {
               </div>
             </Col>
             <Col span={14} className="sheet-box-right">
-              <TabList
-                businessId={state.business.id}
-                clientList={state.linkClient.client}
-                isOwner={isOwner}
-              />
+              <TabList businessId={state.business.id} clientList={state.linkClient.client} isOwner={isOwner} />
               <LowerList log={state.log} serviceLog={state.serviceLog} />
             </Col>
           </Row>

src/pages/Customer/Client/components/ClientDetail/index.jsx

@@ -10,15 +10,7 @@ import { Up, Down } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
 
 const ClientDetail = props => {
-  const {
-    refresh,
-    visible,
-    dispatch,
-    updateKey = 'client',
-    dataId,
-    orderIds = [],
-    ...resetDrawerProps
-  } = props
+  const { refresh, visible, dispatch, updateKey = 'client', dataId, orderIds = [], ...resetDrawerProps } = props
   const shouldUpdate = refresh?.[dataId ?? updateKey] || false
   const [state, setState] = useState({
     loading: false,
@@ -59,18 +51,11 @@ const ClientDetail = props => {
   }, [visible])
 
   return (
-    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer">
+    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer" contentWrapperStyle={{ width: 'unset' }}>
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>
-            <Col
-              span={9}
-              // sm={{ span: 24 }}
-              // md={{ span: 24 }}
-              // lg={{ span: 9 }}
-              // xl={{ span: 9 }}
-              className="sheet-box-left"
-            >
+            <Col span={9} className="sheet-box-left">
               {orderIds.length ? (
                 <div className="mb-3">
                   <Tooltip title="上一条记录">
@@ -78,9 +63,7 @@ const ClientDetail = props => {
                       fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
                       size="20"
                       onClick={() => flipFn(FlipOverEnum.UP)}
-                      className={[
-                        flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'
-                      ].join(' ')}
+                      className={[flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'].join(' ')}
                     />
                   </Tooltip>
                   <Tooltip title="下一条记录">
@@ -88,19 +71,15 @@ const ClientDetail = props => {
                       fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
                       size="20"
                       onClick={() => flipFn(FlipOverEnum.DOWN)}
-                      className={[
-                        flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer',
-                        'ml-1'
-                      ].join(' ')}
+                      className={[flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer', 'ml-1'].join(
+                        ' '
+                      )}
                     />
                   </Tooltip>
                 </div>
               ) : null}
               <div className="sheet-left-panel pr-4">
-                <ClientForm
-                  client={state.client}
-                  updatePayload={{ main: updateKey, target: dataId }}
-                />
+                <ClientForm client={state.client} updatePayload={{ main: updateKey, target: dataId }} />
               </div>
             </Col>
             <Col
@@ -109,8 +88,7 @@ const ClientDetail = props => {
               // md={{ span: 24 }}
               // lg={{ span: 15 }}
               // xl={{ span: 15 }}
-              className="sheet-box-right"
-            >
+              className="sheet-box-right">
               <ClientTabList
                 clientId={state.client.id}
                 software={state.software}

src/pages/Customer/Company/components/CompanyDetail/index.jsx

@@ -10,15 +10,7 @@ import { Up, Down } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
 
 const CompanyDetail = props => {
-  const {
-    visible,
-    dispatch,
-    updateKey = 'company',
-    dataId,
-    orderIds = [],
-    refresh,
-    ...resetDrawerProps
-  } = props
+  const { visible, dispatch, updateKey = 'company', dataId, orderIds = [], refresh, ...resetDrawerProps } = props
   const shouldUpdate = refresh?.[dataId ?? updateKey] || false
   const [state, setState] = useState({
     loading: false,
@@ -32,14 +24,7 @@ const CompanyDetail = props => {
   const initData = async (id = dataId) => {
     setState({ ...state, loading: true })
     const {
-      data: {
-        customer = {},
-        log = [],
-        serviceLog = [],
-        software = {},
-        client = {},
-        business = {}
-      } = {},
+      data: { customer = {}, log = [], serviceLog = [], software = {}, client = {}, business = {} } = {},
       code = -1
     } = await apiCompanyDetail(id)
     if (code === consts.RET_CODE.SUCCESS) {
@@ -63,7 +48,7 @@ const CompanyDetail = props => {
     visible && initData(dataId)
   }, [visible])
   return (
-    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer">
+    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer" contentWrapperStyle={{ width: 'unset' }}>
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>
@@ -73,8 +58,7 @@ const CompanyDetail = props => {
               // md={{ span: 24 }}
               // lg={{ span: 9 }}
               // xl={{ span: 9 }}
-              className="sheet-box-left"
-            >
+              className="sheet-box-left">
               {orderIds.length ? (
                 <div className="mb-3">
                   <Tooltip title="上一条记录">
@@ -82,9 +66,7 @@ const CompanyDetail = props => {
                       fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
                       size="20"
                       onClick={() => flipFn(FlipOverEnum.UP)}
-                      className={[
-                        flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'
-                      ].join(' ')}
+                      className={[flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'].join(' ')}
                     />
                   </Tooltip>
                   <Tooltip title="下一条记录">
@@ -92,20 +74,16 @@ const CompanyDetail = props => {
                       fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
                       size="20"
                       onClick={() => flipFn(FlipOverEnum.DOWN)}
-                      className={[
-                        flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer',
-                        'ml-1'
-                      ].join(' ')}
+                      className={[flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer', 'ml-1'].join(
+                        ' '
+                      )}
                     />
                   </Tooltip>
                 </div>
               ) : null}
 
               <div className="sheet-left-panel pr-4">
-                <CompanyForm
-                  customer={state.customer}
-                  updatePayload={{ main: updateKey, target: dataId }}
-                />
+                <CompanyForm customer={state.customer} updatePayload={{ main: updateKey, target: dataId }} />
               </div>
             </Col>
             <Col
@@ -115,8 +93,7 @@ const CompanyDetail = props => {
               // lg={{ span: 15 }}
               // xl={{ span: 15 }}
               flex={{ flexDirection: 'column' }}
-              className="sheet-box-right"
-            >
+              className="sheet-box-right">
               <CompanyTabList
                 updatePayload={{ main: updateKey, target: dataId }}
                 initData={initData}

src/pages/Customer/Company/components/CompanyDetail/index.less

@@ -1,33 +0,0 @@
-.tableCont {
-  // :global(.arco-table-th-item) {
-  //   padding: 0;
-  // }
-  // :global(.arco-table-col-has-sorter .arco-table-cell-with-sorter) {
-  //   padding: 0;
-  // }
-  // :global(.arco-table .arco-table-td) {
-  //   padding: 12px 8px;
-  //   background-color: #fafafa;
-  // }
-  // :global(.arco-table-tr:hover) {
-  //   background-color: #fafafa !important;
-  // }
-  // :global(.arco-checkbox-indeterminate .arco-checkbox-mask) {
-  //   background-color: #886ab5;
-  // }
-  // :global(.arco-checkbox-checked .arco-checkbox-mask) {
-  //   background-color: #886ab5;
-  // }
-  // :global(.arco-table thead > .arco-table-tr > .arco-table-th) {
-  //   padding: 12px 8px;
-  // }
-}
-
-.tableSyncClient {
-  // :global(.arco-checkbox-indeterminate .arco-checkbox-mask) {
-  //   background-color: #886ab5;
-  // }
-  // :global(.arco-checkbox-checked .arco-checkbox-mask) {
-  //   background-color: #886ab5;
-  // }
-}

src/pages/Hr/Employee/components/EmployeeDetail/index.jsx

@@ -41,15 +41,12 @@ const EmployeeDetail = props => {
     visible && initData(dataId)
   }, [visible])
   return (
-    <Drawer visible={visible} onClose={onClose} className="zh-drawer">
+    <Drawer visible={visible} onClose={onClose} className="zh-drawer" contentWrapperStyle={{ width: 'unset' }}>
       <div className="sheet-box">
         <Row>
           <Col span={12} className="sheet-box-left">
             <div className="sheet-left-panel pr-4">
-              <EmployeeForm
-                staff={state.staff}
-                actionPayload={{ main: updateKey, target: dataId }}
-              />
+              <EmployeeForm staff={state.staff} actionPayload={{ main: updateKey, target: dataId }} />
             </div>
           </Col>
           <Col span={12} className="sheet-box-right">

src/pages/Hr/Notification/components/MessageDetail.jsx

@@ -8,7 +8,7 @@ const MessageDetail = props => {
   const intl = useIntl()
   if (!id) return null
   return (
-    <Drawer {...otherProps} className="zh-drawer">
+    <Drawer {...otherProps} className="zh-drawer" contentWrapperStyle={{ width: 'unset' }}>
       <div className="px-5 vditor-reset h-full">
         <div className="max-h-20vh">
           <span className="pt-5 block">
@@ -22,8 +22,7 @@ const MessageDetail = props => {
           className={[
             'overflow-y-auto max-h-80vh py-3 px-4 bg-hex-f9f9f9 rounded-md boxShadow',
             styles.NotificationCont
-          ].join(' ')}
-        >
+          ].join(' ')}>
           <Typography.Paragraph>
             <MarkDown>{content}</MarkDown>
           </Typography.Paragraph>

src/pages/Product/Cloud/components/Detail/index.jsx

@@ -85,7 +85,7 @@ const CloudDetail = props => {
   }, [visible])
 
   return (
-    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer">
+    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer" contentWrapperStyle={{ width: 'unset' }}>
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>

src/pages/Product/Lock/LockStore/components/LockDetail/index.jsx

@@ -10,15 +10,7 @@ import { Down, Up } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
 
 const LockDetail = props => {
-  const {
-    visible,
-    dispatch,
-    dataId,
-    refresh,
-    orderIds = [],
-    updateKey = 'software',
-    ...resetDrawerProps
-  } = props
+  const { visible, dispatch, dataId, refresh, orderIds = [], updateKey = 'software', ...resetDrawerProps } = props
   const shouldUpdate = refresh?.[dataId ?? updateKey] || false
   const [state, setState] = useState({
     loading: false,
@@ -30,10 +22,8 @@ const LockDetail = props => {
 
   const initData = async id => {
     setState({ ...state, loading: true })
-    const {
-      data: { longle = {}, log = [], longleLog = [] } = { longle: {}, longleLog: [] },
-      code = -1
-    } = await apiSoftwareDetail({ id })
+    const { data: { longle = {}, log = [], longleLog = [] } = { longle: {}, longleLog: [] }, code = -1 } =
+      await apiSoftwareDetail({ id })
     if (code === consts.RET_CODE.SUCCESS) {
       if (shouldUpdate) {
         dispatch({
@@ -61,7 +51,7 @@ const LockDetail = props => {
   const { flipFn, flipConsts } = useFlipOver(initData, dataId, orderIds)
 
   return (
-    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer">
+    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer" contentWrapperStyle={{ width: 'unset' }}>
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>
@@ -73,9 +63,7 @@ const LockDetail = props => {
                       fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
                       size="20"
                       onClick={() => flipFn(FlipOverEnum.UP)}
-                      className={[
-                        flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'
-                      ].join(' ')}
+                      className={[flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'].join(' ')}
                     />
                   </Tooltip>
                   <Tooltip title="下一条记录">
@@ -83,19 +71,15 @@ const LockDetail = props => {
                       fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
                       size="20"
                       onClick={() => flipFn(FlipOverEnum.DOWN)}
-                      className={[
-                        flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer',
-                        'ml-1'
-                      ].join(' ')}
+                      className={[flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer', 'ml-1'].join(
+                        ' '
+                      )}
                     />
                   </Tooltip>
                 </div>
               ) : null}
               <div className="sheet-left-panel pr-4">
-                <LockForm
-                  longle={state.longle}
-                  actionPayload={{ main: updateKey, target: dataId }}
-                />
+                <LockForm longle={state.longle} actionPayload={{ main: updateKey, target: dataId }} />
               </div>
             </Col>
             <Col span={15} className="sheet-box-right">

src/pages/Product/Road/Enterprise/components/Detail/index.jsx

@@ -100,7 +100,7 @@ const EnterpriseDetail = props => {
     visible && initData(dataId)
   }, [visible])
   return (
-    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer">
+    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer" contentWrapperStyle={{ width: 'unset' }}>
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>
@@ -118,8 +118,7 @@ const EnterpriseDetail = props => {
                           type="primary"
                           ghost
                           size="small"
-                          onClick={() => pricingUnLinkCompany(state.company.cld?.customerId)}
-                        >
+                          onClick={() => pricingUnLinkCompany(state.company.cld?.customerId)}>
                           <LinkInterrupt size="14" />
                           <span className="ml-5px">移除CLD单位信息</span>
                         </Button>

src/pages/Product/Road/Personal/components/Detail/index.jsx

@@ -93,7 +93,7 @@ const PersonalDetail = props => {
     visible && initData(dataId)
   }, [visible])
   return (
-    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer">
+    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer" contentWrapperStyle={{ width: 'unset' }}>
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>