refactor: 优化仪表盘办事处勾选人的样式

src/pages/Workbench/Dashboard/index.jsx

@@ -17,6 +17,7 @@ import styles from './index.less'
 import { isDevMode } from '@/utils/env'
 import { isMobile } from '@/utils/is'
 import { useModal } from '@/components/ModalStore'
+import classNames from 'classnames'
 
 const Dashboard = ({ dispatch, departments = [] }) => {
   const { initialState: { currentUser } = { currentUser: {} } } = useModel('@@initialState')
@@ -76,7 +77,6 @@ const Dashboard = ({ dispatch, departments = [] }) => {
       pageSize: 100
     })
     if (code === consts.RET_CODE.SUCCESS && canSetState) {
-      // list存起来
       setState({
         ...state,
         staffList: list
@@ -357,8 +357,8 @@ const Dashboard = ({ dispatch, departments = [] }) => {
         </Row> */}
       </div>
 
-      <div className="mt-4 flex flex-row ">
-        <span className="mx-4 my-4">
+      <div className="flex flex-wrap">
+        <div className="mr-4 my-4 flex">
           <Select
             disabled={state.disabled}
             loading={state.loading}
@@ -367,14 +367,14 @@ const Dashboard = ({ dispatch, departments = [] }) => {
             defaultValue={defaultCyclicalValue}
             onChange={handleCyclicalChange}
           />
-          <span className="mx-4">
+          <div className="mx-2">
             <PermSelect
               loading={state.loading}
               disabled={state.disabled}
               onConfirm={handlePermChange}
               dataType="workbench"
             />
-          </span>
+          </div>
           {state.params.dataPermission === 'all' ? (
             <TreeSelect
               size="middle"
@@ -398,106 +398,99 @@ const Dashboard = ({ dispatch, departments = [] }) => {
               }}
             />
           ) : null}
-        </span>
+        </div>
 
         <div className="flex items-center flex-row ml-2">
           {['all', 'department'].includes(state.params.dataPermission) &&
             state.staffList.map(item => (
-              <div key={item.id} onClick={() => handleStaffClick(item.id)}>
-                <div
-                  className={[
-                    'relative',
-                    'cursor-pointer',
-                    state.selectId === item.id ? styles.imgBg : styles.paddingBg
-                  ].join(' ')}
-                >
-                  <img
-                    className="w-full max-w-30px h-30px border rounded-30px"
-                    src={
-                      (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
-                      (item?.avatar ?? consts.DEFAULT_AVATAR)
-                    }
-                  />
-                  <span className={['absolute', styles.avtraName].join(' ')}>
-                    <span className={styles.bb}>{item.username}</span>
-                  </span>
-                </div>
+              <div
+                className={classNames('relative cursor-pointer', styles.staffItem, {
+                  [styles.active]: state.selectId === item.id
+                })}
+                key={item.id}
+                onClick={() => handleStaffClick(item.id)}
+              >
+                <img
+                  className="w-full max-w-30px h-30px border rounded-30px"
+                  src={
+                    (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
+                    (item?.avatar ?? consts.DEFAULT_AVATAR)
+                  }
+                />
+                <span className={styles.extra}>{item.username}</span>
               </div>
             ))}
         </div>
       </div>
-      <div className="mt-4">
-        <Row gutter={[8, 8]}>
-          <Col xs={24} sm={24} md={24} lg={8} xl={8}>
-            <div className="p-4 bg-white border rounded-2px border-hex-f0f0f0 shadow-card">
-              {state.loading ? (
-                <Skeleton active avatar />
-              ) : (
-                <Row className="cursor-pointer" onClick={() => handleRatioCard(cardTypeMap.CLIENT)}>
-                  <Col span={6}>
-                    <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
-                      <AddressBook size="26" fill="#fff" />
-                    </div>
-                  </Col>
-                  <Col span={18} flex="wrap">
-                    <div className="flex items-center justify-between ">
-                      <div className="text-2xl">{state.clientChainRatio.count}</div>
-                      <span
-                        className={[
-                          'text-xl',
-                          state.clientChainRatio.percentage.startsWith('-')
-                            ? 'text-green-500'
-                            : 'text-red-500'
-                        ].join(' ')}
-                      >
-                        {state.clientChainRatio.percentage}
-                      </span>
-                    </div>
-                    <div className="flex justify-between items-center">
-                      <div>新增客户</div>
-                      <span>{cyclicalOp.find(item => item.value === state.params.cyclical)?.title}</span>
-                    </div>
-                  </Col>
-                </Row>
-              )}
-            </div>
-          </Col>
-          <Col xs={24} sm={24} md={24} lg={8} xl={8}>
-            <div className="p-4 bg-white border rounded-2px border-hex-f0f0f0 shadow-card">
-              {state.loading ? (
-                <Skeleton active avatar />
-              ) : (
-                <Row className="cursor-pointer" onClick={() => handleRatioCard(cardTypeMap.COMPANY)}>
-                  <Col span={6}>
-                    <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
-                      <City size="26" fill="#fff" />
-                    </div>
-                  </Col>
-                  <Col span={18} flex="wrap">
-                    <div className="flex items-center justify-between ">
-                      <div className="text-2xl">{state.customerChainRatio.count}</div>
-                      <span
-                        className={[
-                          'text-xl',
-                          state.customerChainRatio.percentage.startsWith('-')
-                            ? 'text-green-500'
-                            : 'text-red-500'
-                        ].join(' ')}
-                      >
-                        {state.customerChainRatio.percentage}
-                      </span>
-                    </div>
+      <Row gutter={[8, 8]}>
+        <Col xs={24} sm={24} md={24} lg={8} xl={8}>
+          <div className="p-4 bg-white border rounded-2px border-hex-f0f0f0 shadow-card">
+            {state.loading ? (
+              <Skeleton active avatar />
+            ) : (
+              <Row className="cursor-pointer" onClick={() => handleRatioCard(cardTypeMap.CLIENT)}>
+                <Col span={6}>
+                  <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
+                    <AddressBook size="26" fill="#fff" />
+                  </div>
+                </Col>
+                <Col span={18} flex="wrap">
+                  <div className="flex items-center justify-between ">
+                    <div className="text-2xl">{state.clientChainRatio.count}</div>
+                    <span
+                      className={[
+                        'text-xl',
+                        state.clientChainRatio.percentage.startsWith('-') ? 'text-green-500' : 'text-red-500'
+                      ].join(' ')}
+                    >
+                      {state.clientChainRatio.percentage}
+                    </span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <div>新增客户</div>
+                    <span>{cyclicalOp.find(item => item.value === state.params.cyclical)?.title}</span>
+                  </div>
+                </Col>
+              </Row>
+            )}
+          </div>
+        </Col>
+        <Col xs={24} sm={24} md={24} lg={8} xl={8}>
+          <div className="p-4 bg-white border rounded-2px border-hex-f0f0f0 shadow-card">
+            {state.loading ? (
+              <Skeleton active avatar />
+            ) : (
+              <Row className="cursor-pointer" onClick={() => handleRatioCard(cardTypeMap.COMPANY)}>
+                <Col span={6}>
+                  <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
+                    <City size="26" fill="#fff" />
+                  </div>
+                </Col>
+                <Col span={18} flex="wrap">
+                  <div className="flex items-center justify-between ">
+                    <div className="text-2xl">{state.customerChainRatio.count}</div>
+                    <span
+                      className={[
+                        'text-xl',
+                        state.customerChainRatio.percentage.startsWith('-')
+                          ? 'text-green-500'
+                          : 'text-red-500'
+                      ].join(' ')}
+                    >
+                      {state.customerChainRatio.percentage}
+                    </span>
+                  </div>
 
-                    <div className="flex justify-between items-center">
-                      <div>新增单位</div>
-                      <span>{cyclicalOp.find(item => item.value === state.params.cyclical)?.title}</span>
-                    </div>
-                  </Col>
-                </Row>
-              )}
-            </div>
-          </Col>
-          {/* <Col xs={24} sm={24} md={24} lg={6} xl={6}>
+                  <div className="flex justify-between items-center">
+                    <div>新增单位</div>
+                    <span>{cyclicalOp.find(item => item.value === state.params.cyclical)?.title}</span>
+                  </div>
+                </Col>
+              </Row>
+            )}
+          </div>
+        </Col>
+        {/* <Col xs={24} sm={24} md={24} lg={6} xl={6}>
             <div className="p-4 bg-white border rounded-2px border-hex-f0f0f0 shadow-card">
               {state.loading ? (
                 <Skeleton active avatar />
@@ -535,43 +528,42 @@ const Dashboard = ({ dispatch, departments = [] }) => {
               )}
             </div>
           </Col> */}
-          <Col xs={24} sm={24} md={24} lg={8} xl={8}>
-            <div className="p-4 bg-white border rounded-2px border-hex-f0f0f0 shadow-card">
-              {state.loading ? (
-                <Skeleton active avatar />
-              ) : (
-                <Row onClick={() => handleRatioCard(cardTypeMap.SERVICE)} className="cursor-pointer">
-                  <Col span={6}>
-                    <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
-                      <Comment size="26" fill="#fff" />
-                    </div>
-                  </Col>
-                  <Col span={18} flex="wrap">
-                    <div className="flex items-center justify-between ">
-                      <div className="text-2xl">{state.serviceLogChainRatio.count}</div>
-                      <span
-                        className={[
-                          'text-xl',
-                          state.serviceLogChainRatio.percentage.startsWith('-')
-                            ? 'text-green-500'
-                            : 'text-red-500'
-                        ].join(' ')}
-                      >
-                        {state.serviceLogChainRatio.percentage}
-                      </span>
-                    </div>
+        <Col xs={24} sm={24} md={24} lg={8} xl={8}>
+          <div className="p-4 bg-white border rounded-2px border-hex-f0f0f0 shadow-card">
+            {state.loading ? (
+              <Skeleton active avatar />
+            ) : (
+              <Row onClick={() => handleRatioCard(cardTypeMap.SERVICE)} className="cursor-pointer">
+                <Col span={6}>
+                  <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
+                    <Comment size="26" fill="#fff" />
+                  </div>
+                </Col>
+                <Col span={18} flex="wrap">
+                  <div className="flex items-center justify-between ">
+                    <div className="text-2xl">{state.serviceLogChainRatio.count}</div>
+                    <span
+                      className={[
+                        'text-xl',
+                        state.serviceLogChainRatio.percentage.startsWith('-')
+                          ? 'text-green-500'
+                          : 'text-red-500'
+                      ].join(' ')}
+                    >
+                      {state.serviceLogChainRatio.percentage}
+                    </span>
+                  </div>
 
-                    <div className="flex justify-between items-center">
-                      <div>服务记录</div>
-                      <span>{cyclicalOp.find(item => item.value === state.params.cyclical)?.title}</span>
-                    </div>
-                  </Col>
-                </Row>
-              )}
-            </div>
-          </Col>
-        </Row>
-      </div>
+                  <div className="flex justify-between items-center">
+                    <div>服务记录</div>
+                    <span>{cyclicalOp.find(item => item.value === state.params.cyclical)?.title}</span>
+                  </div>
+                </Col>
+              </Row>
+            )}
+          </div>
+        </Col>
+      </Row>
       <div className="mt-4">
         <Row gutter={[8, 8]}>
           {/* <Col xs={24} sm={24} md={24} lg={12} xl={12}>

src/pages/Workbench/Dashboard/index.less

@@ -14,31 +14,24 @@
   &::-webkit-scrollbar {
     display: none;
   }
-  .avtraName {
-    position: absolute;
-    bottom: 0;
-    left: 8px;
-    width: 30px;
-    margin: 0 auto;
-    white-space: nowrap;
-    transform: scale(0.8);
-  }
-  .bb {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-  }
-}
-
-.paddingBg {
-  padding: 5px 8px 18px 8px;
-  background: #f0f2f5;
-}
-.imgBg {
-  padding: 5px 8px 18px 8px;
-  background: #886ab5;
-  :global(.absolute) {
-    color: white;
+  .staffItem {
+    padding: 5px 8px 18px 8px;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    &.active {
+      background: #886ab5;
+      color: white;
+    }
+    .extra {
+      position: absolute;
+      bottom: -2px;
+      left: 8px;
+      width: 30px;
+      margin: 0 auto;
+      white-space: nowrap;
+      transform: scale(0.8);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }