refactor: 通讯录小优化

fix: 优化

src/pages/Hr/Contacts/index.tsx

@@ -10,6 +10,7 @@ import consts from '@/consts'
 import { isDevMode } from '@/utils/env'
 import styles from './index.less'
 import { debounce } from 'lodash-es'
+import classNames from 'classnames'
 
 const character = [
   { value: '0', label: '全部' },
@@ -199,24 +200,26 @@ const Contacts: React.FC<ContactsProps> = () => {
                   />
                 ),
                 filter: (
-                  <div className={styles.radioWrap}>
-                    筛选：
-                    <Radio.Group
-                      size="small"
-                      optionType="button"
-                      buttonStyle="solid"
-                      defaultValue="0"
-                      onChange={debounce(HandleOnchange, 300)}>
-                      <Space>
-                        {character.map(item => {
-                          return (
-                            <Radio.Button key={item.value} value={item.value}>
-                              {item.label}
-                            </Radio.Button>
-                          )
-                        })}
-                      </Space>
-                    </Radio.Group>
+                  <div className={classNames(styles.radioWrap, 'flex justify-start items-center')}>
+                    <div>筛选：</div>
+                    <div>
+                      <Radio.Group
+                        size="small"
+                        optionType="button"
+                        buttonStyle="solid"
+                        defaultValue="0"
+                        onChange={debounce(HandleOnchange, 300)}>
+                        <Space>
+                          {character.map(item => {
+                            return (
+                              <Radio.Button key={item.value} value={item.value}>
+                                {item.label}
+                              </Radio.Button>
+                            )
+                          })}
+                        </Space>
+                      </Radio.Group>
+                    </div>
                   </div>
                 ),
                 actions: [
@@ -234,16 +237,16 @@ const Contacts: React.FC<ContactsProps> = () => {
                             setState({ ...state, type: 'birthdayMonth' })
                           }}
                           content={content}
-                          title={'本月寿星：'}
+                          title="本月寿星："
                           trigger="click"
                           placement="bottomLeft">
                           <div className="flex items-center cursor-pointer">
                             <span className="mr-2">本月寿星：</span>
-                            {state.birthdayMonth?.map(item => {
+                            {state.birthdayMonth?.slice(0, 5).map(item => {
                               return (
                                 <span
                                   key={item.id}
-                                  className="inline-block rounded-1/2 border-[#ccc] border-1 bg-[#fff] w-26px h-26px -ml-3 my-2px relative">
+                                  className="inline-block rounded-1/2 border-hex-ccc border-1 bg-white w-26px h-26px -ml-3 my-2px relative">
                                   <img
                                     className="rounded-1/2 w-20px h-20px absolute top-2px left-2px"
                                     src={`${
@@ -270,21 +273,19 @@ const Contacts: React.FC<ContactsProps> = () => {
                           placement="bottomLeft">
                           <div className="flex items-center cursor-pointer">
                             本日：
-                            {state.birthdayDay?.map(item => {
-                              return (
-                                <span
-                                  key={item.id}
-                                  className="inline-block rounded-1/2 border-[#ccc] border-1 bg-[#fff] w-26px h-26px -ml-3 my-2px relative">
-                                  <img
-                                    className="rounded-1/2 w-20px h-20px absolute top-2px left-2px"
-                                    src={`${
-                                      (isDevMode() ? 'http://cld2qa.com' : window.location.origin) +
-                                      (item.avatar ?? consts.DEFAULT_AVATAR)
-                                    }`}
-                                  />
-                                </span>
-                              )
-                            })}
+                            {state.birthdayDay?.slice(0, 5).map(item => (
+                              <span
+                                key={item.id}
+                                className="inline-block rounded-1/2 border-hex-ccc border-1 bg-white w-26px h-26px -ml-3 my-2px relative">
+                                <img
+                                  className="rounded-1/2 w-20px h-20px absolute top-2px left-2px"
+                                  src={`${
+                                    (isDevMode() ? 'http://cld2qa.com' : window.location.origin) +
+                                    (item.avatar ?? consts.DEFAULT_AVATAR)
+                                  }`}
+                                />
+                              </span>
+                            ))}
                           </div>
                         </Popover>
                       </Tag>