fix: 样式调整

src/pages/Workbench/Dashboard/index.jsx

@@ -93,11 +93,12 @@ const Dashboard = ({ dispatch, departments = [] }) => {
     }
   }
   const handleStaffClick = id => {
+    const sId = `s_${id}`
     setState({
       ...state,
       selectId: id,
       immediate: true,
-      params: { ...state.params, staffIds: [id] }
+      params: { ...state.params, staffIds: [sId] }
     })
   }
   const initData = async payload => {
@@ -251,6 +252,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
         ...state,
         immediate: true,
         staffList: [],
+        selectId: '',
         params: { ...state.params, staffIds, dataPermission: 'custom' }
       })
       return
@@ -259,6 +261,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
       ...state,
       immediate: true,
       staffList: [],
+      selectId: '',
       params: { ...state.params, staffIds: null, dataPermission }
     })
   }
@@ -287,15 +290,17 @@ const Dashboard = ({ dispatch, departments = [] }) => {
         />
       </div>
       <div className="mt-4 flex items-center flex-row">
-        <Select
-          disabled={state.disabled}
-          loading={state.loading}
-          options={cyclicalOp}
-          dropdownMatchSelectWidth={false}
-          defaultValue={defaultCyclicalValue}
-          onChange={handleCyclicalChange}
-        />
-        <span className="ml-4">
+        <span className="mb-7">
+          <Select
+            disabled={state.disabled}
+            loading={state.loading}
+            options={cyclicalOp}
+            dropdownMatchSelectWidth={false}
+            defaultValue={defaultCyclicalValue}
+            onChange={handleCyclicalChange}
+          />
+        </span>
+        <span className="ml-4 mb-7">
           <PermSelect
             loading={state.loading}
             disabled={state.disabled}
@@ -304,7 +309,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
           />
         </span>
         {state.params.dataPermission === 'all' ? (
-          <span className="ml-4">
+          <span className="ml-4 mr-3 mb-7">
             <TreeSelect
               style={{ width: 150 }}
               dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
@@ -318,34 +323,40 @@ const Dashboard = ({ dispatch, departments = [] }) => {
             />
           </span>
         ) : null}
-        {state.params.dataPermission === 'all' &&
-          state.staffList.map(item => (
-            <div className="ml-4" key={item.id} onClick={() => handleStaffClick(item.id)}>
-              {state.selectId === item.id ? (
-                <div className={['relative', 'cursor-pointer', styles.imgBg].join(' ')}>
-                  <img
-                    className="w-full max-w-30px h-30px border rounded-30px"
-                    src={
-                      (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
-                      (item?.avatar ? item.avatar : '/global/img/avtra_2.jpg')
-                    }
-                  />
-                  <span className={['absolute', styles.avtraName].join(' ')}>{item.username}</span>
-                </div>
-              ) : (
-                <div className="relative cursor-pointer">
-                  <img
-                    className="w-full max-w-30px h-30px border rounded-30px"
-                    src={
-                      (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
-                      (item?.avatar ? item.avatar : '/global/img/avtra_2.jpg')
-                    }
-                  />
-                  <span className={styles.avtraName}>{item.username}</span>
-                </div>
-              )}
-            </div>
-          ))}
+        <div>
+          {state.params.dataPermission === 'all' &&
+            state.staffList.map(item => (
+              <div className="inline-block" key={item.id} onClick={() => handleStaffClick(item.id)}>
+                {state.selectId === item.id ? (
+                  <div className={['relative', 'cursor-pointer', styles.imgBg].join(' ')}>
+                    <img
+                      className="w-full max-w-30px h-30px border rounded-30px"
+                      src={
+                        (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
+                        (item?.avatar ? item.avatar : '/global/img/avtra_2.jpg')
+                      }
+                    />
+                    <span className={['absolute', styles.avtraName].join(' ')}>
+                      <span className={styles.bb}>{item.username}</span>
+                    </span>
+                  </div>
+                ) : (
+                  <div className={['relative', 'cursor-pointer', 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 ? item.avatar : '/global/img/avtra_2.jpg')
+                      }
+                    />
+                    <span className={styles.avtraName}>
+                      <span className={styles.bb}>{item.username}</span>
+                    </span>
+                  </div>
+                )}
+              </div>
+            ))}
+        </div>
       </div>
       <div className="mt-4">
         <Row gutter={[8, 8]}>

src/pages/Workbench/Dashboard/index.less

@@ -16,14 +16,29 @@
   }
   .avtraName {
     position: absolute;
+    bottom: 0;
+    left: 8px;
+    width: 30px;
+    margin: 0 auto;
     white-space: nowrap;
-    transform: scale(0.8) translate(-15%, -30%);
+    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 15px 8px;
+  padding: 5px 8px 18px 8px;
   background: #886ab5;
   :global(.absolute) {
-    color: #ffffff;
+    color: white;
   }
 }