feat: 调整仪表盘各卡片的间距

src/components/RightContent/AvatarDropdown.tsx

@@ -50,7 +50,7 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
           icon: <InfoCircleFilled />,
           title: '温馨提示',
           content: '是否确认退出系统？',
-          autoFocusButton: 'null',
+          autoFocusButton: null,
           onOk: () => {
             // 清除AuthCache
             removeToken()

src/pages/Workbench/Dashboard/index.tsx

@@ -408,14 +408,19 @@ const Dashboard = ({ dispatch, departments = [] }) => {
                   <Skeleton active avatar />
                 ) : (
                   <Row className="cursor-pointer" onClick={() => handleRatioCard(CardTypeMap.CLIENT)}>
-                    <Col span={6}>
-                      <div className="w-full max-w-12 h-12 rounded-1/2 bg-hex-0c7cd5 flex items-center justify-center">
-                        <AddressBook size="26" fill="#fff" />
+                    <Col span={16}>
+                      <div className="flex items-center">
+                        <div className="w-12 h-12 rounded-1/2 bg-hex-0c7cd5 flex items-center justify-center">
+                          <AddressBook size="26" fill="#fff" />
+                        </div>
+                        <div className="ml-3">
+                          <div className="text-2xl">{state.clientChainRatio.count}</div>
+                          <div>新增客户</div>
+                        </div>
                       </div>
                     </Col>
-                    <Col span={18} flex="wrap">
-                      <div className="flex items-center justify-between ">
-                        <div className="text-2xl">{state.clientChainRatio.count}</div>
+                    <Col span={8} flex="wrap">
+                      <div className="flex justify-end">
                         <span
                           className={classNames(
                             'text-xl',
@@ -426,8 +431,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
                           {state.clientChainRatio.percentage}
                         </span>
                       </div>
-                      <div className="flex justify-between items-center">
-                        <div>新增客户</div>
+                      <div className="flex justify-end">
                         <span>{cyclicalOp.find(item => item.value === state.params.cyclical)?.title}</span>
                       </div>
                     </Col>
@@ -441,14 +445,19 @@ const Dashboard = ({ dispatch, departments = [] }) => {
                   <Skeleton active avatar />
                 ) : (
                   <Row className="cursor-pointer" onClick={() => handleRatioCard(CardTypeMap.COMPANY)}>
-                    <Col span={6}>
-                      <div className="w-full max-w-12 h-12 rounded-1/2 bg-hex-0c7cd5 flex items-center justify-center">
-                        <City size="26" fill="#fff" />
+                    <Col span={16}>
+                      <div className="flex items-center">
+                        <div className="w-12 h-12 rounded-1/2 bg-hex-0c7cd5 flex items-center justify-center">
+                          <City size="26" fill="#fff" />
+                        </div>
+                        <div className="ml-3">
+                          <div className="text-2xl">{state.customerChainRatio.count}</div>
+                          <div>新增单位</div>
+                        </div>
                       </div>
                     </Col>
-                    <Col span={18} flex="wrap">
-                      <div className="flex items-center justify-between ">
-                        <div className="text-2xl">{state.customerChainRatio.count}</div>
+                    <Col span={8} flex="wrap">
+                      <div className="flex justify-end">
                         <span
                           className={classNames(
                             'text-xl',
@@ -459,9 +468,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
                           {state.customerChainRatio.percentage}
                         </span>
                       </div>
-
-                      <div className="flex justify-between items-center">
-                        <div>新增单位</div>
+                      <div className="flex justify-end">
                         <span>{cyclicalOp.find(item => item.value === state.params.cyclical)?.title}</span>
                       </div>
                     </Col>
@@ -470,57 +477,61 @@ const Dashboard = ({ dispatch, departments = [] }) => {
               </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 />
-              ) : (
-                <Row
-                  className="cursor-pointer"
-                  onClick={() => handleRatioCard(CardTypeMap.BUSINESS)}>
-                  <Col span={6}>
-                    <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
-                      <Finance size="26" fill="#fff" />
-                    </div>
-                  </Col>
-                  <Col span={18} flex="wrap">
-                    <div className="flex items-center justify-between ">
-                      <div className="text-2xl">{state.businessChainRatio.count}</div>
-                      <span
-                        className={[
-                          'text-xl',
-                          state.businessChainRatio.percentage.startsWith('-')
-                            ? 'text-green-500'
-                            : 'text-red-500'
-                        ].join(' ')}>
-                        {state.businessChainRatio.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> */}
+              <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.BUSINESS)}>
+                    <Col span={16}>
+                      <div className="flex items-center">
+                        <div className="w-12 h-12 rounded-1/2 bg-hex-0c7cd5 flex items-center justify-center">
+                          <Finance size="26" fill="#fff" />
+                        </div>
+                        <div className="ml-3">
+                          <div className="text-2xl">{state.businessChainRatio.count}</div>
+                          <div>新增商机</div>
+                        </div>
+                      </div>
+                    </Col>
+                    <Col span={8} flex="wrap">
+                      <div className="flex justify-end">
+                        <span
+                          className={[
+                            'text-xl',
+                            state.businessChainRatio.percentage.startsWith('-')
+                              ? 'text-green-500'
+                              : 'text-red-500'
+                          ].join(' ')}>
+                          {state.businessChainRatio.percentage}
+                        </span>
+                      </div>
+                      <div className="flex justify-end">
+                        <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-sm 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-12 h-12 rounded-1/2 bg-hex-0c7cd5 flex items-center justify-center">
-                        <Comment size="26" fill="#fff" />
+                    <Col span={16}>
+                      <div className="flex items-center">
+                        <div className="w-12 h-12 rounded-1/2 bg-hex-0c7cd5 flex items-center justify-center">
+                          <Comment size="26" fill="#fff" />
+                        </div>
+                        <div className="ml-3">
+                          <div className="text-2xl">{state.serviceLogChainRatio.count}</div>
+                          <div>服务记录</div>
+                        </div>
                       </div>
                     </Col>
-                    <Col span={18} flex="wrap">
-                      <div className="flex items-center justify-between ">
-                        <div className="text-2xl">{state.serviceLogChainRatio.count}</div>
+                    <Col span={8} flex="wrap">
+                      <div className="flex justify-end">
                         <span
                           className={classNames(
                             'text-xl',
@@ -531,9 +542,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
                           {state.serviceLogChainRatio.percentage}
                         </span>
                       </div>
-
-                      <div className="flex justify-between items-center">
-                        <div>服务记录</div>
+                      <div className="flex justify-end">
                         <span>{cyclicalOp.find(item => item.value === state.params.cyclical)?.title}</span>
                       </div>
                     </Col>