diff --git a/src/pages/User/register-result/style.style.ts b/src/pages/User/register-result/style.style.ts
index 0191d0d2..ebc1b282 100644
--- a/src/pages/User/register-result/style.style.ts
+++ b/src/pages/User/register-result/style.style.ts
@@ -9,7 +9,7 @@ const useStyles = createStyles(() => {
       padding: '80px',
       background: 'none',
     },
-    '.anticon': {
+    anticon: {
       fontSize: '64px',
     },
     title: {
@@ -19,9 +19,7 @@ const useStyles = createStyles(() => {
     },
     actions: {
       marginTop: '40px',
-    },
-    'a + a': {
-      marginLeft: '8px',
+      'a + a': { marginLeft: '8px' },
     },
   };
 });
diff --git a/src/pages/User/register/style.style.ts b/src/pages/User/register/style.style.ts
index dc424779..1e22102a 100644
--- a/src/pages/User/register/style.style.ts
+++ b/src/pages/User/register/style.style.ts
@@ -1,44 +1,41 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     main: {
-      width: '368px',
-      margin: '0 auto',
-    },
-    h3: {
-      marginBottom: '20px',
-      fontSize: '16px',
+      width: "368px",
+      margin: "0 auto",
+      h3: { marginBottom: "20px", fontSize: "16px" },
     },
     password: {
-      marginBottom: '24px',
-    },
-    '.ant-form-item-explain': {
-      display: 'none',
+      marginBottom: "24px",
+      ".ant-form-item-explain": { display: "none" },
     },
     getCaptcha: {
-      display: 'block',
-      width: '100%',
+      display: "block",
+      width: "100%",
     },
     submit: {
-      width: '50%',
+      width: "50%",
     },
     login: {
-      float: 'right',
+      float: "right",
       lineHeight: token.controlHeight,
     },
     success: {
+      transition: "color 0.3s",
       color: token.colorSuccess,
     },
     warning: {
+      transition: "color 0.3s",
       color: token.colorWarning,
     },
     error: {
+      transition: "color 0.3s",
       color: token.colorError,
     },
-    '.progress-pass > .progress': {},
-    '.ant-progress-bg': {
-      backgroundColor: token.colorWarning,
+    "progress-pass > .progress": {
+      ".ant-progress-bg": { backgroundColor: token.colorWarning },
     },
   };
 });
diff --git a/src/pages/account/center/Center.style.ts b/src/pages/account/center/Center.style.ts
index 7412c65a..d761d17c 100644
--- a/src/pages/account/center/Center.style.ts
+++ b/src/pages/account/center/Center.style.ts
@@ -1,65 +1,67 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     avatarHolder: {
-      marginBottom: '24px',
-      textAlign: 'center',
-      '& > img': { width: '104px', height: '104px', marginBottom: '20px' },
+      marginBottom: "24px",
+      textAlign: "center",
+      "& > img": { width: "104px", height: "104px", marginBottom: "20px" },
     },
     name: {
-      marginBottom: '4px',
+      marginBottom: "4px",
       color: token.colorTextHeading,
-      fontWeight: '500',
-      fontSize: '20px',
-      lineHeight: '28px',
+      fontWeight: "500",
+      fontSize: "20px",
+      lineHeight: "28px",
     },
-    detail: {},
-    p: {
-      position: 'relative',
-      marginBottom: '8px',
-      paddingLeft: '26px',
-      '&:last-child': { marginBottom: '0' },
-    },
-    i: {
-      position: 'absolute',
-      top: '4px',
-      left: '0',
-      width: '14px',
-      height: '14px',
+    detail: {
+      p: {
+        position: "relative",
+        marginBottom: "8px",
+        paddingLeft: "26px",
+        "&:last-child": {
+          marginBottom: "0",
+        },
+      },
+      i: {
+        position: "absolute",
+        top: "4px",
+        left: "0",
+        width: "14px",
+        height: "14px",
+      },
     },
     tagsTitle: {
-      marginBottom: '12px',
+      marginBottom: "12px",
       color: token.colorTextHeading,
-      fontWeight: '500',
+      fontWeight: "500",
     },
     teamTitle: {
-      marginBottom: '12px',
+      marginBottom: "12px",
       color: token.colorTextHeading,
-      fontWeight: '500',
-    },
-    tags: {},
-    '.ant-tag': {
-      marginBottom: '8px',
+      fontWeight: "500",
     },
-    team: {},
-    '.ant-avatar': {
-      marginRight: '12px',
+    tags: {
+      ".ant-tag": { marginBottom: "8px" },
     },
-    a: {
-      display: 'block',
-      marginBottom: '24px',
-      overflow: 'hidden',
-      color: token.colorText,
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      wordBreak: 'break-all',
-      transition: 'color 0.3s',
-      '&:hover': { color: token.colorPrimary },
+    team: {
+      ".ant-avatar": { marginRight: "12px" },
+      a: {
+        display: "block",
+        marginBottom: "24px",
+        overflow: "hidden",
+        color: token.colorText,
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
+        wordBreak: "break-all",
+        transition: "color 0.3s",
+        "&:hover": {
+          color: token.colorPrimary,
+        },
+      },
     },
-    tabsCard: {},
-    '.ant-card-head': {
-      padding: '0 16px',
+    tabsCard: {
+      ".ant-card-head": { padding: "0 16px" },
     },
   };
 });
diff --git a/src/pages/account/center/components/Applications/index.style.ts b/src/pages/account/center/components/Applications/index.style.ts
index 280cb2b7..ff3d76b2 100644
--- a/src/pages/account/center/components/Applications/index.style.ts
+++ b/src/pages/account/center/components/Applications/index.style.ts
@@ -1,48 +1,42 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     filterCardList: {
-      marginBottom: '-24px',
-    },
-    '.ant-card-meta-content': {
-      marginTop: '0',
-    },
-    '// disabled white space .ant-card-meta-avatar': {
-      fontSize: '0',
-    },
-    '.ant-list .ant-list-item-content-single': {
-      maxWidth: '100%',
+      marginBottom: "-24px",
+      ".ant-card-meta-content": { marginTop: "0" },
+      ".ant-card-meta-avatar": { fontSize: "0" },
+      ".ant-list .ant-list-item-content-single": { maxWidth: "100%" },
     },
     cardInfo: {
-      marginTop: '16px',
-      marginLeft: '40px',
-      zoom: '1',
-      '&::before, &::after': { display: 'table', content: "' '" },
-      '&::after': {
-        clear: 'both',
-        height: '0',
-        fontSize: '0',
-        visibility: 'hidden',
+      marginTop: "16px",
+      marginLeft: "40px",
+      zoom: "1",
+      "&::before, &::after": { display: "table", content: "' '" },
+      "&::after": {
+        clear: "both",
+        height: "0",
+        fontSize: "0",
+        visibility: "hidden",
       },
-      '& > div': {
-        position: 'relative',
-        float: 'left',
-        width: '50%',
-        textAlign: 'left',
+      "& > div": {
+        position: "relative",
+        float: "left",
+        width: "50%",
+        textAlign: "left",
+        p: {
+          margin: "0",
+          fontSize: "24px",
+          lineHeight: "32px",
+        },
+        "p:first-child": {
+          marginBottom: "4px",
+          color: token.colorTextSecondary,
+          fontSize: "12px",
+          lineHeight: "20px",
+        },
       },
     },
-    p: {
-      margin: '0',
-      fontSize: '24px',
-      lineHeight: '32px',
-    },
-    'p:first-child': {
-      marginBottom: '4px',
-      color: token.colorTextSecondary,
-      fontSize: '12px',
-      lineHeight: '20px',
-    },
   };
 });
 
diff --git a/src/pages/account/center/components/ArticleListContent/index.style.ts b/src/pages/account/center/components/ArticleListContent/index.style.ts
index c993635f..a75afb02 100644
--- a/src/pages/account/center/components/ArticleListContent/index.style.ts
+++ b/src/pages/account/center/components/ArticleListContent/index.style.ts
@@ -1,25 +1,25 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     description: {
-      maxWidth: '720px',
-      lineHeight: '22px',
+      maxWidth: "720px",
+      lineHeight: "22px",
     },
     extra: {
-      marginTop: '16px',
+      marginTop: "16px",
       color: token.colorTextSecondary,
-      lineHeight: '22px',
-      '& > em': {
-        marginLeft: '16px',
+      lineHeight: "22px",
+      "& > em": {
+        marginLeft: "16px",
         color: token.colorTextDisabled,
-        fontStyle: 'normal',
+        fontStyle: "normal",
       },
       [`@media screen and (max-width: ${token.screenXS}px)`]: {
-        '& > em': {
-          display: 'block',
-          marginTop: '8px',
-          marginLeft: '0',
+        "& > em": {
+          display: "block",
+          marginTop: "8px",
+          marginLeft: "0",
         },
       },
     },
diff --git a/src/pages/account/center/components/Articles/index.style.ts b/src/pages/account/center/components/Articles/index.style.ts
index 5f87a85a..8d8df0f9 100644
--- a/src/pages/account/center/components/Articles/index.style.ts
+++ b/src/pages/account/center/components/Articles/index.style.ts
@@ -1,12 +1,11 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
-    articleList: {},
-    '.ant-list-item:first-child': {
-      paddingTop: '0',
+    articleList: {
+      ".ant-list-item:first-child": { paddingTop: "0" },
     },
-    'a.listItemMetaTitle': {
+    "a.listItemMetaTitle": {
       color: token.colorTextHeading,
     },
   };
diff --git a/src/pages/account/center/components/AvatarList/index.style.ts b/src/pages/account/center/components/AvatarList/index.style.ts
index 68d62237..51db29d0 100644
--- a/src/pages/account/center/components/AvatarList/index.style.ts
+++ b/src/pages/account/center/components/AvatarList/index.style.ts
@@ -1,26 +1,18 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     avatarList: {
-      display: 'inline-block',
-    },
-    ul: {
-      display: 'inline-block',
-      marginLeft: '8px',
-      fontSize: '0',
+      display: "inline-block",
+      ul: { display: "inline-block", marginLeft: "8px", fontSize: "0" },
     },
     avatarItem: {
-      display: 'inline-block',
+      display: "inline-block",
       width: token.controlHeight,
       height: token.controlHeight,
-      marginLeft: '-8px',
+      marginLeft: "-8px",
       fontSize: token.fontSize,
-    },
-    '.ant-avatar': {
-      width: '20px',
-      height: '20px',
-      lineHeight: '20px',
+      ".ant-avatar": { border: "1px solid @border-color-base" },
     },
     avatarItemLarge: {
       width: token.controlHeightLG,
@@ -31,12 +23,17 @@ const useStyles = createStyles(({ token }) => {
       height: token.controlHeightSM,
     },
     avatarItemMini: {
-      width: '20px',
-      height: '20px',
-    },
-    '.ant-avatar-string': {
-      fontSize: '12px',
-      lineHeight: '18px',
+      width: "20px",
+      height: "20px",
+      ".ant-avatar": {
+        width: "20px",
+        height: "20px",
+        lineHeight: "20px",
+        ".ant-avatar-string": {
+          fontSize: "12px",
+          lineHeight: "18px",
+        },
+      },
     },
   };
 });
diff --git a/src/pages/account/center/components/Projects/index.style.ts b/src/pages/account/center/components/Projects/index.style.ts
index 32572b7a..6000cc13 100644
--- a/src/pages/account/center/components/Projects/index.style.ts
+++ b/src/pages/account/center/components/Projects/index.style.ts
@@ -1,47 +1,47 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
-    coverCardList: {},
     card: {
-      '&:hover': {},
-    },
-    '.ant-card-meta-title': {
-      marginBottom: '4px',
-      '& > a': {
-        display: 'inline-block',
-        maxWidth: '100%',
-        color: token.colorTextHeading,
+      ".ant-card-meta-title": {
+        marginBottom: "4px",
+        "& > a": {
+          display: "inline-block",
+          maxWidth: "100%",
+          color: token.colorTextHeading,
+        },
+      },
+      ".ant-card-meta-description": {
+        height: "44px",
+        overflow: "hidden",
+        lineHeight: "22px",
+      },
+      "&:hover": {
+        ".ant-card-meta-title > a": {
+          color: token.colorPrimary,
+        },
       },
-    },
-    '.ant-card-meta-description': {
-      height: '44px',
-      overflow: 'hidden',
-      lineHeight: '22px',
-    },
-    '.ant-card-meta-title > a': {
-      color: token.colorPrimary,
     },
     cardItemContent: {
-      display: 'flex',
-      height: '20px',
-      marginTop: '16px',
-      marginBottom: '-4px',
-      lineHeight: '20px',
-      '& > span': {
-        flex: '1',
+      display: "flex",
+      height: "20px",
+      marginTop: "16px",
+      marginBottom: "-4px",
+      lineHeight: "20px",
+      "& > span": {
+        flex: "1",
         color: token.colorTextSecondary,
-        fontSize: '12px',
+        fontSize: "12px",
       },
     },
     avatarList: {
-      flex: '0 1 auto',
+      flex: "0 1 auto",
     },
     cardList: {
-      marginTop: '24px',
+      marginTop: "24px",
     },
-    '.ant-list .ant-list-item-content-single': {
-      maxWidth: '100%',
+    coverCardList: {
+      ".ant-list .ant-list-item-content-single": { maxWidth: "100%" },
     },
   };
 });
diff --git a/src/pages/account/settings/components/BaseView.style.ts b/src/pages/account/settings/components/BaseView.style.ts
index 04661f83..3912eed2 100644
--- a/src/pages/account/settings/components/BaseView.style.ts
+++ b/src/pages/account/settings/components/BaseView.style.ts
@@ -1,51 +1,58 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     baseView: {
+      display: "flex",
+      paddingTop: "12px",
+      ".ant-legacy-form-item .ant-legacy-form-item-control-wrapper": {
+        width: "100%",
+      },
       [`@media screen and (max-width: ${token.screenXL}px)`]: {
-        flexDirection: 'column-reverse',
+        flexDirection: "column-reverse",
       },
     },
-    '.ant-legacy-form-item .ant-legacy-form-item-control-wrapper': {
-      width: '100%',
-    },
     left: {
-      minWidth: '224px',
-      maxWidth: '448px',
+      minWidth: "224px",
+      maxWidth: "448px",
     },
     right: {
+      flex: "1",
+      paddingLeft: "104px",
       [`@media screen and (max-width: ${token.screenXL}px)`]: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        maxWidth: '448px',
-        padding: '20px',
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        maxWidth: "448px",
+        padding: "20px",
       },
     },
     avatar_title: {
+      height: "22px",
+      marginBottom: "8px",
+      color: token.colorTextHeading,
+      fontSize: token.fontSize,
+      lineHeight: "22px",
       [`@media screen and (max-width: ${token.screenXL}px)`]: {
-        display: 'none',
+        display: "none",
       },
     },
     avatar: {
-      width: '144px',
-      height: '144px',
-      marginBottom: '12px',
-      overflow: 'hidden',
-    },
-    img: {
-      width: '100%',
+      width: "144px",
+      height: "144px",
+      marginBottom: "12px",
+      overflow: "hidden",
+      img: { width: "100%" },
     },
     button_view: {
-      width: '144px',
-      textAlign: 'center',
+      width: "144px",
+      textAlign: "center",
     },
     area_code: {
-      width: '72px',
+      width: "72px",
     },
     phone_number: {
-      width: '214px',
+      width: "214px",
     },
   };
 });
diff --git a/src/pages/account/settings/style.style.ts b/src/pages/account/settings/style.style.ts
index 0c217efc..063733be 100644
--- a/src/pages/account/settings/style.style.ts
+++ b/src/pages/account/settings/style.style.ts
@@ -1,74 +1,72 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     main: {
+      display: "flex",
+      width: "100%",
+      height: "100%",
+      paddingTop: "16px",
+      paddingBottom: "16px",
+      backgroundColor: token.colorBgContainer,
+      ".ant-list-split .ant-list-item:last-child": {
+        borderBottom: "1px solid @border-color-split",
+      },
+      ".ant-list-item": { paddingTop: "14px", paddingBottom: "14px" },
       [`@media screen and (max-width: ${token.screenMD}px)`]: {
-        flexDirection: 'column',
+        flexDirection: "column",
       },
     },
     leftMenu: {
+      width: "224px",
+      borderRight: `${token.lineWidth} ${token.borderStyle} ${token.colorSplit}`,
+      ".ant-menu-inline": { border: "none" },
+      ".ant-menu-horizontal": { fontWeight: "bold" },
       [`@media screen and (max-width: ${token.screenMD}px)`]: {
-        width: '100%',
-        border: 'none',
+        width: "100%",
+        border: "none",
       },
     },
-    '.ant-menu-inline': {
-      border: 'none',
-    },
-    '.ant-menu-horizontal': {
-      fontWeight: 'bold',
-    },
     right: {
+      flex: "1",
+      padding: "8px 40px",
       [`@media screen and (max-width: ${token.screenMD}px)`]: {
-        padding: '40px',
+        padding: "40px",
       },
     },
     title: {
-      marginBottom: '12px',
+      marginBottom: "12px",
       color: token.colorTextHeading,
-      fontWeight: '500',
-      fontSize: '20px',
-      lineHeight: '28px',
-    },
-    '.ant-list-split .ant-list-item:last-child': {
-      borderBottom: '1px solid @border-color-split',
+      fontWeight: "500",
+      fontSize: "20px",
+      lineHeight: "28px",
     },
-    '.ant-list-item': {
-      paddingTop: '14px',
-      paddingBottom: '14px',
-    },
-    '.ant-list-item-meta': {},
-    '// 账号绑定图标 .taobao': {
-      display: 'block',
-      color: '#ff4000',
-      fontSize: '48px',
-      lineHeight: '48px',
+    taobao: {
+      display: "block",
+      color: "#ff4000",
+      fontSize: "48px",
+      lineHeight: "48px",
       borderRadius: token.borderRadius,
     },
     dingding: {
-      margin: '2px',
-      padding: '6px',
-      color: '#fff',
-      fontSize: '32px',
-      lineHeight: '32px',
-      backgroundColor: '#2eabff',
+      margin: "2px",
+      padding: "6px",
+      color: "#fff",
+      fontSize: "32px",
+      lineHeight: "32px",
+      backgroundColor: "#2eabff",
       borderRadius: token.borderRadius,
     },
     alipay: {
-      color: '#2eabff',
-      fontSize: '48px',
-      lineHeight: '48px',
+      color: "#2eabff",
+      fontSize: "48px",
+      lineHeight: "48px",
       borderRadius: token.borderRadius,
     },
-    '// 密码强度 font.strong': {
-      color: token.colorSuccess,
-    },
-    'font.medium': {
-      color: token.colorWarning,
-    },
-    'font.weak': {
-      color: token.colorError,
+    ":global": {
+      "font.strong": { color: token.colorSuccess },
+      "font.medium": { color: token.colorWarning },
+      "font.weak": { color: token.colorError },
     },
   };
 });
diff --git a/src/pages/dashboard/analysis/components/Charts/ChartCard/index.style.ts b/src/pages/dashboard/analysis/components/Charts/ChartCard/index.style.ts
index 562910c0..87997495 100644
--- a/src/pages/dashboard/analysis/components/Charts/ChartCard/index.style.ts
+++ b/src/pages/dashboard/analysis/components/Charts/ChartCard/index.style.ts
@@ -1,77 +1,75 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     chartCard: {
-      position: 'relative',
+      position: "relative",
     },
     chartTop: {
-      position: 'relative',
-      width: '100%',
-      overflow: 'hidden',
+      position: "relative",
+      width: "100%",
+      overflow: "hidden",
     },
     chartTopMargin: {
-      marginBottom: '12px',
+      marginBottom: "12px",
     },
     chartTopHasMargin: {
-      marginBottom: '20px',
+      marginBottom: "20px",
     },
     metaWrap: {
-      float: 'left',
+      float: "left",
     },
     avatar: {
-      position: 'relative',
-      top: '4px',
-      float: 'left',
-      marginRight: '20px',
-    },
-    img: {
-      borderRadius: '100%',
+      position: "relative",
+      top: "4px",
+      float: "left",
+      marginRight: "20px",
+      img: { borderRadius: "100%" },
     },
     meta: {
-      height: '22px',
+      height: "22px",
       color: token.colorTextSecondary,
       fontSize: token.fontSize,
-      lineHeight: '22px',
+      lineHeight: "22px",
     },
     action: {
-      position: 'absolute',
-      top: '4px',
-      right: '0',
-      lineHeight: '1',
-      cursor: 'pointer',
+      position: "absolute",
+      top: "4px",
+      right: "0",
+      lineHeight: "1",
+      cursor: "pointer",
     },
     total: {
-      height: '38px',
-      marginTop: '4px',
-      marginBottom: '0',
-      overflow: 'hidden',
+      height: "38px",
+      marginTop: "4px",
+      marginBottom: "0",
+      overflow: "hidden",
       color: token.colorTextHeading,
-      fontSize: '30px',
-      lineHeight: '38px',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      wordBreak: 'break-all',
+      fontSize: "30px",
+      lineHeight: "38px",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      wordBreak: "break-all",
     },
     content: {
-      position: 'relative',
-      width: '100%',
-      marginBottom: '12px',
+      position: "relative",
+      width: "100%",
+      marginBottom: "12px",
     },
     contentFixed: {
-      position: 'absolute',
-      bottom: '0',
-      left: '0',
-      width: '100%',
+      position: "absolute",
+      bottom: "0",
+      left: "0",
+      width: "100%",
     },
     footer: {
-      marginTop: '8px',
-      paddingTop: '9px',
-      borderTop: '1px solid @border-color-split',
-      '& > *': { position: 'relative' },
+      marginTop: "8px",
+      paddingTop: "9px",
+      borderTop: "1px solid @border-color-split",
+      "& > *": { position: "relative" },
     },
     footerMargin: {
-      marginTop: '20px',
+      marginTop: "20px",
     },
   };
 });
diff --git a/src/pages/dashboard/analysis/components/Charts/Field/index.style.ts b/src/pages/dashboard/analysis/components/Charts/Field/index.style.ts
index 22192d8a..49286c62 100644
--- a/src/pages/dashboard/analysis/components/Charts/Field/index.style.ts
+++ b/src/pages/dashboard/analysis/components/Charts/Field/index.style.ts
@@ -1,19 +1,19 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     field: {
-      margin: '0',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
+      margin: "0",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
     },
     label: {
       fontSize: token.fontSize,
-      lineHeight: '22px',
+      lineHeight: "22px",
     },
     number: {
-      marginLeft: '8px',
+      marginLeft: "8px",
       color: token.colorTextHeading,
     },
   };
diff --git a/src/pages/dashboard/analysis/components/Charts/index.style.ts b/src/pages/dashboard/analysis/components/Charts/index.style.ts
index 057193b8..29f85452 100644
--- a/src/pages/dashboard/analysis/components/Charts/index.style.ts
+++ b/src/pages/dashboard/analysis/components/Charts/index.style.ts
@@ -10,10 +10,7 @@ const useStyles = createStyles(() => {
       position: 'absolute',
       bottom: '-28px',
       width: '100%',
-    },
-    '> div': {
-      margin: '0 -5px',
-      overflow: 'hidden',
+      '> div': { margin: '0 -5px', overflow: 'hidden' },
     },
     chartLoading: {
       position: 'absolute',
diff --git a/src/pages/dashboard/analysis/components/NumberInfo/index.style.ts b/src/pages/dashboard/analysis/components/NumberInfo/index.style.ts
index bb73dc16..024041b0 100644
--- a/src/pages/dashboard/analysis/components/NumberInfo/index.style.ts
+++ b/src/pages/dashboard/analysis/components/NumberInfo/index.style.ts
@@ -1,51 +1,55 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
-    numberInfo: {},
     suffix: {
-      marginLeft: '4px',
+      marginLeft: "4px",
       color: token.colorText,
-      fontSize: '16px',
-      fontStyle: 'normal',
+      fontSize: "16px",
+      fontStyle: "normal",
     },
     numberInfoTitle: {
-      marginBottom: '16px',
+      marginBottom: "16px",
       color: token.colorText,
       fontSize: token.fontSizeLg,
-      transition: 'all 0.3s',
+      transition: "all 0.3s",
     },
     numberInfoSubTitle: {
-      height: '22px',
-      overflow: 'hidden',
+      height: "22px",
+      overflow: "hidden",
       color: token.colorTextSecondary,
       fontSize: token.fontSize,
-      lineHeight: '22px',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      wordBreak: 'break-all',
+      lineHeight: "22px",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      wordBreak: "break-all",
     },
     numberInfoValue: {
-      '& > span': { color: token.colorText },
+      marginTop: "4px",
+      overflow: "hidden",
+      fontSize: "0",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      wordBreak: "break-all",
+      "& > span": { color: token.colorText },
     },
     subTotal: {
-      marginRight: '0',
+      marginRight: "0",
       color: token.colorTextSecondary,
       fontSize: token.fontSizeLg,
-      verticalAlign: 'top',
+      verticalAlign: "top",
     },
-    '.anticon': {
-      marginLeft: '4px',
-      fontSize: '12px',
-      transform: 'scale(0.82)',
+    anticon: {
+      marginLeft: "4px",
+      fontSize: "12px",
+      transform: "scale(0.82)",
     },
-    '.anticon-caret-up': {
+    "anticon-caret-up": {
       color: token.red6,
     },
-    '.anticon-caret-down': {
+    "anticon-caret-down": {
       color: token.green6,
     },
-    numberInfolight: {},
   };
 });
 
diff --git a/src/pages/dashboard/analysis/components/Trend/index.style.ts b/src/pages/dashboard/analysis/components/Trend/index.style.ts
index 9fafc272..e3e83d4c 100644
--- a/src/pages/dashboard/analysis/components/Trend/index.style.ts
+++ b/src/pages/dashboard/analysis/components/Trend/index.style.ts
@@ -1,30 +1,26 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     trendItem: {
-      display: 'inline-block',
+      display: "inline-block",
       fontSize: token.fontSize,
-      lineHeight: '22px',
+      lineHeight: "22px",
     },
     up: {
       color: token.red6,
     },
     down: {
-      top: '-1px',
+      top: "-1px",
       color: token.green6,
     },
-    span: {
-      fontSize: '12px',
-      transform: 'scale(0.83)',
-    },
-    'trendItemGrey .up, trendItemGrey .down': {
+    "trendItemGrey .up, trendItemGrey .down": {
       color: token.colorText,
     },
-    'reverseColor .up': {
+    "reverseColor .up": {
       color: token.green6,
     },
-    'reverseColor .down': {
+    "reverseColor .down": {
       color: token.red6,
     },
   };
diff --git a/src/pages/dashboard/analysis/style.style.ts b/src/pages/dashboard/analysis/style.style.ts
index 8ef98de7..e0e4a86b 100644
--- a/src/pages/dashboard/analysis/style.style.ts
+++ b/src/pages/dashboard/analysis/style.style.ts
@@ -1,144 +1,149 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
-    iconGroup: {},
-    'span.anticon': {
-      marginLeft: '16px',
-      color: token.colorTextSecondary,
-      cursor: 'pointer',
-      transition: 'color 0.32s',
-      '&:hover': { color: token.colorText },
+    iconGroup: {
+      "span.anticon": {
+        marginLeft: "16px",
+        color: token.colorTextSecondary,
+        cursor: "pointer",
+        transition: "color 0.32s",
+        "&:hover": {
+          color: token.colorText,
+        },
+      },
     },
     rankingList: {
-      [`@media screen and (max-width: ${token.screenLG}px)`]: {},
-    },
-    li: {
-      [`@media screen and (max-width: ${token.screenLG}px)`]: {},
-    },
-    span: {
-      color: token.colorText,
-      fontSize: '14px',
-      lineHeight: '22px',
+      margin: "25px 0 0",
+      padding: "0",
+      listStyle: "none",
+      li: {
+        display: "flex",
+        alignItems: "center",
+        marginTop: "16px",
+        zoom: "1",
+        "&::before, &::after": {
+          display: "table",
+          content: "' '",
+        },
+        "&::after": {
+          clear: "both",
+          height: "0",
+          fontSize: "0",
+          visibility: "hidden",
+        },
+        span: {
+          color: token.colorText,
+          fontSize: "14px",
+          lineHeight: "22px",
+        },
+        active: {
+          color: "#fff",
+          backgroundColor: "#314659",
+        },
+      },
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {
+        li: {
+          "span:first-child": { marginRight: "8px" },
+        },
+      },
     },
     rankingItemNumber: {
-      display: 'inline-block',
-      width: '20px',
-      height: '20px',
-      marginTop: '1.5px',
-      marginRight: '16px',
-      fontWeight: '600',
-      fontSize: '12px',
-      lineHeight: '20px',
-      textAlign: 'center',
+      display: "inline-block",
+      width: "20px",
+      height: "20px",
+      marginTop: "1.5px",
+      marginRight: "16px",
+      fontWeight: "600",
+      fontSize: "12px",
+      lineHeight: "20px",
+      textAlign: "center",
       backgroundColor: token.tagDefaultBg,
-      borderRadius: '20px',
-    },
-    active: {
-      color: '#fff',
-      backgroundColor: '#314659',
+      borderRadius: "20px",
     },
     rankingItemTitle: {
-      flex: '1',
-      marginRight: '8px',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
+      flex: "1",
+      marginRight: "8px",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
     },
     salesExtra: {
+      display: "inline-block",
+      marginRight: "24px",
+      a: {
+        marginLeft: "24px",
+        color: token.colorText,
+        "&:hover": {
+          color: token.colorPrimary,
+        },
+      },
+      currentDate: { color: token.colorPrimary },
       [`@media screen and (max-width: ${token.screenLG}px)`]: {
-        display: 'none',
+        display: "none",
       },
     },
-    a: {
-      marginLeft: '24px',
-      color: token.colorText,
-      '&:hover': { color: token.colorPrimary },
-    },
-    currentDate: {
-      color: token.colorPrimary,
-    },
-    salesCard: {
-      [`@media screen and (max-width: ${token.screenSM}px)`]: {},
-    },
     salesBar: {
+      padding: "0 0 32px 32px",
       [`@media screen and (max-width: ${token.screenMD}px)`]: {
-        padding: '16px',
+        padding: "16px",
       },
     },
     salesRank: {
-      padding: '0 32px 32px 72px',
-    },
-    '.ant-tabs-bar, .ant-tabs-nav-wrap': {
-      paddingLeft: '16px',
-    },
-    '.ant-tabs-nav .ant-tabs-tab': {
-      paddingTop: '16px',
-      paddingBottom: '14px',
-      lineHeight: '24px',
+      padding: "0 32px 32px 72px",
     },
-    '.ant-tabs-extra-content': {
-      paddingRight: '24px',
-      lineHeight: '55px',
-    },
-    '.ant-card-head': {
-      position: 'relative',
-    },
-    '.ant-card-head-title': {
-      alignItems: 'normal',
+    salesCard: {
+      ".ant-tabs-bar, .ant-tabs-nav-wrap": {
+        paddingLeft: "16px",
+        ".ant-tabs-nav .ant-tabs-tab": {
+          paddingTop: "16px",
+          paddingBottom: "14px",
+          lineHeight: "24px",
+        },
+      },
+      ".ant-tabs-extra-content": { paddingRight: "24px", lineHeight: "55px" },
+      ".ant-card-head": { position: "relative" },
+      ".ant-card-head-title": { alignItems: "normal" },
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
+        padding: "16px",
+      },
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
+        ".ant-tabs-content": {
+          paddingTop: "30px",
+        },
+      },
     },
     salesCardExtra: {
-      height: 'inherit',
+      height: "inherit",
     },
     salesTypeRadio: {
-      position: 'absolute',
-      right: '54px',
-      bottom: '12px',
-    },
-    offlineCard: {},
-    '.ant-tabs-ink-bar': {
-      bottom: 'auto',
-    },
-    '.ant-tabs-bar': {
-      borderBottom: 'none',
-    },
-    '.ant-tabs-nav-container-scrolling': {
-      paddingRight: '40px',
-      paddingLeft: '40px',
-    },
-    '.ant-tabs-tab-prev-icon::before': {
-      position: 'relative',
-      left: '6px',
-    },
-    '.ant-tabs-tab-next-icon::before': {
-      position: 'relative',
-      right: '6px',
-    },
-    '.ant-tabs-tab-active h4': {
-      color: token.colorPrimary,
+      position: "absolute",
+      right: "54px",
+      bottom: "12px",
+    },
+    offlineCard: {
+      ".ant-tabs-ink-bar": { bottom: "auto" },
+      ".ant-tabs-bar": { borderBottom: "none" },
+      ".ant-tabs-nav-container-scrolling": {
+        paddingRight: "40px",
+        paddingLeft: "40px",
+      },
+      ".ant-tabs-tab-prev-icon::before": { position: "relative", left: "6px" },
+      ".ant-tabs-tab-next-icon::before": { position: "relative", right: "6px" },
+      ".ant-tabs-tab-active h4": { color: token.colorPrimary },
     },
     trendText: {
-      marginLeft: '8px',
+      marginLeft: "8px",
       color: token.colorTextHeading,
     },
-    'span:first-child': {
-      [`@media screen and (max-width: ${token.screenLG}px)`]: {
-        marginRight: '8px',
-      },
-    },
     rankingTitle: {
       [`@media screen and (max-width: ${token.screenMD}px)`]: {
-        marginTop: '16px',
+        marginTop: "16px",
       },
     },
     salesExtraWrap: {
       [`@media screen and (max-width: ${token.screenSM}px)`]: {
-        display: 'none',
-      },
-    },
-    '.ant-tabs-content': {
-      [`@media screen and (max-width: ${token.screenSM}px)`]: {
-        paddingTop: '30px',
+        display: "none",
       },
     },
   };
diff --git a/src/pages/dashboard/monitor/components/ActiveChart/index.style.ts b/src/pages/dashboard/monitor/components/ActiveChart/index.style.ts
index 628c016a..4307c905 100644
--- a/src/pages/dashboard/monitor/components/ActiveChart/index.style.ts
+++ b/src/pages/dashboard/monitor/components/ActiveChart/index.style.ts
@@ -5,13 +5,9 @@ const useStyles = createStyles(() => {
     activeChart: {
       position: 'relative',
     },
-    activeChartGrid: {},
-    p: {
-      position: 'absolute',
-      top: '80px',
-    },
-    'p:last-child': {
-      top: '115px',
+    activeChartGrid: {
+      p: { position: 'absolute', top: '80px' },
+      'p:last-child': { top: '115px' },
     },
     activeChartLegend: {
       position: 'relative',
@@ -19,18 +15,9 @@ const useStyles = createStyles(() => {
       marginTop: '8px',
       fontSize: '0',
       lineHeight: '20px',
-    },
-    span: {
-      display: 'inline-block',
-      width: '33.33%',
-      fontSize: '12px',
-      textAlign: 'center',
-    },
-    'span:first-child': {
-      textAlign: 'left',
-    },
-    'span:last-child': {
-      textAlign: 'right',
+      span: { display: 'inline-block', width: '33.33%', fontSize: '12px', textAlign: 'center' },
+      'span:first-child': { textAlign: 'left' },
+      'span:last-child': { textAlign: 'right' },
     },
     dashedLine: {
       position: 'relative',
diff --git a/src/pages/dashboard/monitor/style.style.ts b/src/pages/dashboard/monitor/style.style.ts
index c8f9fd60..22ad0b05 100644
--- a/src/pages/dashboard/monitor/style.style.ts
+++ b/src/pages/dashboard/monitor/style.style.ts
@@ -1,17 +1,15 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     mapChart: {
+      height: "452px",
+      paddingTop: "24px",
+      img: { display: "inline-block", maxWidth: "100%", maxHeight: "437px" },
       [`@media screen and (max-width: ${token.screenLG}px)`]: {
-        height: 'auto',
+        height: "auto",
       },
     },
-    img: {
-      display: 'inline-block',
-      maxWidth: '100%',
-      maxHeight: '437px',
-    },
   };
 });
 
diff --git a/src/pages/dashboard/workplace/components/EditableLinkGroup/index.style.ts b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.style.ts
index 09279efc..1dcef2c1 100644
--- a/src/pages/dashboard/workplace/components/EditableLinkGroup/index.style.ts
+++ b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.style.ts
@@ -1,17 +1,17 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     linkGroup: {
-      padding: '20px 0 8px 24px',
-      fontSize: '0',
-      '& > a': {
-        display: 'inline-block',
-        width: '25%',
-        marginBottom: '13px',
+      padding: "20px 0 8px 24px",
+      fontSize: "0",
+      "& > a": {
+        display: "inline-block",
+        width: "25%",
+        marginBottom: "13px",
         color: token.colorText,
         fontSize: token.fontSize,
-        '&:hover': {
+        "&:hover": {
           color: token.colorPrimary,
         },
       },
diff --git a/src/pages/dashboard/workplace/style.less b/src/pages/dashboard/workplace/style.less
index 46c10e14..18fddb86 100644
--- a/src/pages/dashboard/workplace/style.less
+++ b/src/pages/dashboard/workplace/style.less
@@ -26,6 +26,7 @@
 
 .activitiesList {
   padding: 0 24px 8px 24px;
+
   .username {
     color: @text-color;
   }
diff --git a/src/pages/dashboard/workplace/style.style.ts b/src/pages/dashboard/workplace/style.style.ts
index 4deb07ba..0aaeae42 100644
--- a/src/pages/dashboard/workplace/style.style.ts
+++ b/src/pages/dashboard/workplace/style.style.ts
@@ -1,156 +1,273 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
+    "clearfix()": {
+      zoom: "1",
+      "&::before, &::after": { display: "table", content: "' '" },
+      "&::after": {
+        clear: "both",
+        height: "0",
+        fontSize: "0",
+        visibility: "hidden",
+      },
+    },
     activitiesList: {
-      padding: '0 24px 8px 24px',
+      padding: "0 24px 8px 24px",
     },
     username: {
       color: token.colorText,
     },
     event: {
-      fontWeight: 'normal',
+      fontWeight: "normal",
     },
     pageHeaderContent: {
+      display: "flex",
       [`@media screen and (max-width: ${token.screenSM}px)`]: {
-        display: 'block',
+        display: "block",
       },
     },
     avatar: {
-      flex: '0 1 72px',
-      '& > span': {
-        display: 'block',
-        width: '72px',
-        height: '72px',
-        borderRadius: '72px',
+      flex: "0 1 72px",
+      "& > span": {
+        display: "block",
+        width: "72px",
+        height: "72px",
+        borderRadius: "72px",
       },
     },
     content: {
+      position: "relative",
+      top: "4px",
+      flex: "1 1 auto",
+      marginLeft: "24px",
+      color: token.colorTextSecondary,
+      lineHeight: "22px",
       [`@media screen and (max-width: ${token.screenSM}px)`]: {
-        marginLeft: '0',
+        marginLeft: "0",
       },
     },
     contentTitle: {
-      marginBottom: '12px',
+      marginBottom: "12px",
       color: token.colorTextHeading,
-      fontWeight: '500',
-      fontSize: '20px',
-      lineHeight: '28px',
+      fontWeight: "500",
+      fontSize: "20px",
+      lineHeight: "28px",
     },
     extraContent: {
-      [`@media screen and (max-width: ${token.screenSM}px)`]: {},
+      zoom: "1",
+      "&::before, &::after": { display: "table", content: "' '" },
+      "&::after": {
+        clear: "both",
+        height: "0",
+        fontSize: "0",
+        visibility: "hidden",
+      },
+      float: "right",
+      whiteSpace: "nowrap",
+      [`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]:
+        { marginLeft: "-44px" },
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {
+        float: "none",
+        marginRight: "0",
+      },
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
+        marginLeft: "-16px",
+      },
     },
     statItem: {
-      [`@media screen and (max-width: ${token.screenSM}px)`]: { float: 'none' },
-    },
-    '> p:first-child': {
-      marginBottom: '4px',
-      color: token.colorTextSecondary,
-      fontSize: token.fontSize,
-      lineHeight: '22px',
-    },
-    '> p': {
-      margin: '0',
-      color: token.colorTextHeading,
-      fontSize: '30px',
-      lineHeight: '38px',
-    },
-    '> span': {
-      color: token.colorTextSecondary,
-      fontSize: '20px',
-    },
-    members: {
+      position: "relative",
+      display: "inline-block",
+      padding: "0 32px",
+      "> p:first-child": {
+        marginBottom: "4px",
+        color: token.colorTextSecondary,
+        fontSize: token.fontSize,
+        lineHeight: "22px",
+      },
+      "> p": {
+        margin: "0",
+        color: token.colorTextHeading,
+        fontSize: "30px",
+        lineHeight: "38px",
+        "> span": {
+          color: token.colorTextSecondary,
+          fontSize: "20px",
+        },
+      },
+      "&::after": {
+        position: "absolute",
+        top: "8px",
+        right: "0",
+        width: "1px",
+        height: "40px",
+        backgroundColor: token.colorSplit,
+        content: "''",
+      },
+      "&:last-child": {
+        paddingRight: "0",
+        "&::after": {
+          display: "none",
+        },
+      },
+      [`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]:
+        { padding: "0 16px" },
       [`@media screen and (max-width: ${token.screenLG}px)`]: {
-        marginBottom: '0',
+        padding: "0 16px",
+        textAlign: "left",
+        "&::after": {
+          display: "none",
+        },
       },
+      [`@media screen and (max-width: ${token.screenSM}px)`]: { float: "none" },
     },
-    a: {
-      display: 'inline-block',
-      flex: '1 1 0',
-      color: token.colorTextSecondary,
-      position: 'relative',
-      maxHeight: '4.5em',
-      marginRight: '-1em',
-      paddingRight: '1em',
-      overflow: 'hidden',
-      lineHeight: '1.5em',
-      textAlign: 'justify',
-      '&::before': {
-        position: 'absolute',
-        right: '14px',
-        bottom: '0',
-        padding: '0 1px',
-        background: token.colorBgContainer,
-        content: "'...'",
+    members: {
+      a: {
+        display: "block",
+        height: "24px",
+        margin: "12px 0",
+        color: token.colorText,
+        transition: "all 0.3s",
+        position: "relative",
+        maxHeight: "4.5em",
+        marginRight: "-1em",
+        paddingRight: "1em",
+        overflow: "hidden",
+        lineHeight: "1.5em",
+        textAlign: "justify",
+        "&::before": {
+          position: "absolute",
+          right: "14px",
+          bottom: "0",
+          padding: "0 1px",
+          background: token.colorBgContainer,
+          content: "'...'",
+        },
+        "&::after": {
+          position: "absolute",
+          right: "14px",
+          width: "1em",
+          height: "1em",
+          marginTop: "0.2em",
+          background: "white",
+          content: "''",
+        },
+        "&:hover": {
+          color: token.colorPrimary,
+        },
       },
-      '&::after': {
-        position: 'absolute',
-        right: '14px',
-        width: '1em',
-        height: '1em',
-        marginTop: '0.2em',
-        background: 'white',
-        content: "''",
+      [`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]:
+        { marginBottom: "0" },
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {
+        marginBottom: "0",
       },
-      '&:hover': { color: token.colorPrimary },
     },
     member: {
-      marginLeft: '12px',
+      marginLeft: "12px",
       fontSize: token.fontSize,
-      lineHeight: '24px',
-      verticalAlign: 'top',
+      lineHeight: "24px",
+      verticalAlign: "top",
     },
     projectList: {
-      [`@media screen and (max-width: ${token.screenXS}px)`]: {},
-    },
-    '.ant-card-meta-description': {
-      height: '44px',
-      overflow: 'hidden',
-      color: token.colorTextSecondary,
-      lineHeight: '22px',
+      ".ant-card-meta-description": {
+        height: "44px",
+        overflow: "hidden",
+        color: token.colorTextSecondary,
+        lineHeight: "22px",
+      },
     },
     cardTitle: {
-      fontSize: '0',
+      fontSize: "0",
+      a: {
+        display: "inline-block",
+        height: "24px",
+        marginLeft: "12px",
+        color: token.colorTextHeading,
+        fontSize: token.fontSize,
+        lineHeight: "24px",
+        verticalAlign: "top",
+        "&:hover": {
+          color: token.colorPrimary,
+        },
+      },
     },
     projectGrid: {
-      [`@media screen and (max-width: ${token.screenXS}px)`]: { width: '100%' },
+      width: "33.33%",
+      [`@media screen and (max-width: ${token.screenMD}px)`]: { width: "50%" },
+      [`@media screen and (max-width: ${token.screenXS}px)`]: { width: "100%" },
     },
     projectItemContent: {
-      display: 'flex',
-      height: '20px',
-      marginTop: '8px',
-      overflow: 'hidden',
-      fontSize: '12px',
-      lineHeight: '1.5em',
-      position: 'relative',
-      maxHeight: '4.5em',
-      marginRight: '-1em',
-      paddingRight: '1em',
-      textAlign: 'justify',
-      '&::before': {
-        position: 'absolute',
-        right: '14px',
-        bottom: '0',
-        padding: '0 1px',
+      display: "flex",
+      height: "20px",
+      marginTop: "8px",
+      overflow: "hidden",
+      fontSize: "12px",
+      lineHeight: "1.5em",
+      position: "relative",
+      maxHeight: "4.5em",
+      marginRight: "-1em",
+      paddingRight: "1em",
+      textAlign: "justify",
+      "&::before": {
+        position: "absolute",
+        right: "14px",
+        bottom: "0",
+        padding: "0 1px",
         background: token.colorBgContainer,
         content: "'...'",
       },
-      '&::after': {
-        position: 'absolute',
-        right: '14px',
-        width: '1em',
-        height: '1em',
-        marginTop: '0.2em',
-        background: 'white',
+      "&::after": {
+        position: "absolute",
+        right: "14px",
+        width: "1em",
+        height: "1em",
+        marginTop: "0.2em",
+        background: "white",
         content: "''",
       },
+      a: {
+        display: "inline-block",
+        flex: "1 1 0",
+        color: token.colorTextSecondary,
+        position: "relative",
+        maxHeight: "4.5em",
+        marginRight: "-1em",
+        paddingRight: "1em",
+        overflow: "hidden",
+        lineHeight: "1.5em",
+        textAlign: "justify",
+        "&::before": {
+          position: "absolute",
+          right: "14px",
+          bottom: "0",
+          padding: "0 1px",
+          background: token.colorBgContainer,
+          content: "'...'",
+        },
+        "&::after": {
+          position: "absolute",
+          right: "14px",
+          width: "1em",
+          height: "1em",
+          marginTop: "0.2em",
+          background: "white",
+          content: "''",
+        },
+        "&:hover": {
+          color: token.colorPrimary,
+        },
+      },
     },
     datetime: {
+      flex: "0 0 auto",
+      float: "right",
       color: token.colorTextDisabled,
     },
     activeCard: {
+      [`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]:
+        { marginBottom: "24px" },
       [`@media screen and (max-width: ${token.screenLG}px)`]: {
-        marginBottom: '24px',
+        marginBottom: "24px",
       },
     },
   };
diff --git a/src/pages/form/advanced-form/style.style.ts b/src/pages/form/advanced-form/style.style.ts
index 501b009d..63a8fdef 100644
--- a/src/pages/form/advanced-form/style.style.ts
+++ b/src/pages/form/advanced-form/style.style.ts
@@ -1,48 +1,46 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     card: {
-      marginBottom: '24px',
-    },
-    '.ant-legacy-form-item .ant-legacy-form-item-control-wrapper': {
-      width: '100%',
+      marginBottom: "24px",
+      ".ant-legacy-form-item .ant-legacy-form-item-control-wrapper": {
+        width: "100%",
+      },
     },
     errorIcon: {
-      float: 'left',
-      marginTop: '4px',
-      marginRight: '12px',
-      paddingBottom: '22px',
+      marginRight: "12px",
       color: token.colorError,
-    },
-    'span.anticon': {
-      marginRight: '4px',
-    },
-    errorPopover: {},
-    '.ant-popover-inner-content': {
-      minWidth: '256px',
-      maxHeight: '290px',
-      padding: '0',
-      overflow: 'auto',
+      cursor: "pointer",
+      "span.anticon": { marginRight: "4px" },
+      float: "left",
+      marginTop: "4px",
+      paddingBottom: "22px",
+    },
+    errorPopover: {
+      ".ant-popover-inner-content": {
+        minWidth: "256px",
+        maxHeight: "290px",
+        padding: "0",
+        overflow: "auto",
+      },
     },
     errorListItem: {
-      padding: '8px 16px',
-      listStyle: 'none',
-      borderBottom: '1px solid @border-color-split',
-      cursor: 'pointer',
-      transition: 'all 0.3s',
-      '&:hover': { background: token.colorBgTextActive },
-      '&:last-child': { border: '0' },
+      padding: "8px 16px",
+      listStyle: "none",
+      borderBottom: "1px solid @border-color-split",
+      cursor: "pointer",
+      transition: "all 0.3s",
+      "&:hover": { background: token.colorBgTextActive },
+      "&:last-child": { border: "0" },
     },
     errorField: {
-      marginTop: '2px',
+      marginTop: "2px",
       color: token.colorTextSecondary,
-      fontSize: '12px',
+      fontSize: "12px",
     },
-    editable: {},
-    td: {
-      paddingTop: '13px',
-      paddingBottom: '12.5px',
+    editable: {
+      td: { paddingTop: "13px", paddingBottom: "12.5px" },
     },
   };
 });
diff --git a/src/pages/form/basic-form/style.style.ts b/src/pages/form/basic-form/style.style.ts
index e8a8406b..0a248c90 100644
--- a/src/pages/form/basic-form/style.style.ts
+++ b/src/pages/form/basic-form/style.style.ts
@@ -1,10 +1,10 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     optional: {
       color: token.colorTextSecondary,
-      fontStyle: 'normal',
+      fontStyle: "normal",
     },
   };
 });
diff --git a/src/pages/list/basic-list/style.style.ts b/src/pages/list/basic-list/style.style.ts
index f6af84a1..a38c7237 100644
--- a/src/pages/list/basic-list/style.style.ts
+++ b/src/pages/list/basic-list/style.style.ts
@@ -1,98 +1,139 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     standardList: {
-      '@media screen and (max-width: 1400px)': {},
-    },
-    '.ant-card-head': {
-      borderBottom: 'none',
-    },
-    '.ant-card-head-title': {
+      ".ant-card-head": { borderBottom: "none" },
+      ".ant-card-head-title": { padding: "24px 0", lineHeight: "32px" },
+      ".ant-card-extra": { padding: "24px 0" },
+      ".ant-list-pagination": { marginTop: "24px", textAlign: "right" },
+      ".ant-avatar-lg": { width: "48px", height: "48px", lineHeight: "48px" },
       [`@media screen and (max-width: ${token.screenXS}px)`]: {
-        overflow: 'visible',
+        ".ant-list-item-content": {
+          display: "block",
+          flex: "none",
+          width: "100%",
+        },
+        ".ant-list-item-action": {
+          marginLeft: "0",
+        },
       },
     },
-    '.ant-card-extra': {
-      padding: '24px 0',
-    },
-    '.ant-list-pagination': {
-      marginTop: '24px',
-      textAlign: 'right',
-    },
-    '.ant-avatar-lg': {
-      width: '48px',
-      height: '48px',
-      lineHeight: '48px',
-    },
     headerInfo: {
+      position: "relative",
+      textAlign: "center",
+      "& > span": {
+        display: "inline-block",
+        marginBottom: "4px",
+        color: token.colorTextSecondary,
+        fontSize: token.fontSize,
+        lineHeight: "22px",
+      },
+      "& > p": {
+        margin: "0",
+        color: token.colorTextHeading,
+        fontSize: "24px",
+        lineHeight: "32px",
+      },
+      "& > em": {
+        position: "absolute",
+        top: "0",
+        right: "0",
+        width: "1px",
+        height: "56px",
+        backgroundColor: token.colorSplit,
+      },
       [`@media screen and (max-width: ${token.screenSM}px)`]: {
-        marginBottom: '16px',
-        '& > em': {
-          display: 'none',
+        marginBottom: "16px",
+        "& > em": {
+          display: "none",
         },
       },
     },
     listContent: {
-      '@media screen and (max-width: 1400px)': {
-        textAlign: 'right',
-        '& > div:last-child': {
-          top: '0',
+      fontSize: "0",
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {
+        marginLeft: "0",
+        "& > div": {
+          marginLeft: "0",
+        },
+      },
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
+        "& > div": {
+          display: "block",
+        },
+        "& > div:last-child": {
+          top: "0",
+          width: "100%",
+        },
+      },
+      [`@media screen and (max-width: ${token.screenLG}px) and (min-width: @screen-md)`]:
+        {
+          "& > div": {
+            display: "block",
+          },
+          "& > div:last-child": {
+            top: "0",
+            width: "100%",
+          },
+        },
+      [`@media screen and (max-width: ${token.screenXL}px)`]: {
+        "& > div": {
+          marginLeft: "24px",
+        },
+        "& > div:last-child": {
+          top: "0",
+        },
+      },
+      "@media screen and (max-width: 1400px)": {
+        textAlign: "right",
+        "& > div:last-child": {
+          top: "0",
         },
       },
     },
     listContentItem: {
-      display: 'inline-block',
-      marginLeft: '40px',
+      display: "inline-block",
+      marginLeft: "40px",
       color: token.colorTextSecondary,
       fontSize: token.fontSize,
-      verticalAlign: 'middle',
-    },
-    '> span': {
-      lineHeight: '20px',
-    },
-    '> p': {
-      marginTop: '4px',
-      marginBottom: '0',
-      lineHeight: '22px',
+      verticalAlign: "middle",
+      "> span": { lineHeight: "20px" },
+      "> p": { marginTop: "4px", marginBottom: "0", lineHeight: "22px" },
     },
     extraContentSearch: {
+      width: "272px",
+      marginLeft: "16px",
       [`@media screen and (max-width: ${token.screenSM}px)`]: {
-        width: '100%',
-        marginLeft: '0',
+        width: "100%",
+        marginLeft: "0",
       },
     },
-    '.ant-list-item-content': {
-      [`@media screen and (max-width: ${token.screenXS}px)`]: {
-        display: 'block',
-        flex: 'none',
-        width: '100%',
-      },
-    },
-    '.ant-list-item-action': {
+    listCard: {
       [`@media screen and (max-width: ${token.screenXS}px)`]: {
-        marginLeft: '0',
+        ".ant-card-head-title": {
+          overflow: "visible",
+        },
       },
-    },
-    listCard: {
-      [`@media screen and (max-width: ${token.screenMD}px)`]: {},
-    },
-    '.ant-radio-group': {
       [`@media screen and (max-width: ${token.screenMD}px)`]: {
-        display: 'block',
-        marginBottom: '8px',
+        ".ant-radio-group": {
+          display: "block",
+          marginBottom: "8px",
+        },
       },
     },
-    standardListForm: {},
-    '.ant-form-item': {
-      marginBottom: '12px',
-      '&:last-child': { marginBottom: '32px', paddingTop: '4px' },
+    standardListForm: {
+      ".ant-form-item": {
+        marginBottom: "12px",
+        "&:last-child": {
+          marginBottom: "32px",
+          paddingTop: "4px",
+        },
+      },
     },
     formResult: {
-      width: '100%',
-    },
-    "[class^='title']": {
-      marginBottom: '8px',
+      width: "100%",
+      "[class^='title']": { marginBottom: "8px" },
     },
   };
 });
diff --git a/src/pages/list/basic-list/utils/utils.style.ts b/src/pages/list/basic-list/utils/utils.style.ts
index 0ad5e64a..20ba95d9 100644
--- a/src/pages/list/basic-list/utils/utils.style.ts
+++ b/src/pages/list/basic-list/utils/utils.style.ts
@@ -1,6 +1,12 @@
 import { createStyles } from 'antd-style';
 
 const useStyles = createStyles(() => {
-  return {};
+  return {
+    'clearfix()': {
+      zoom: '1',
+      '&::before, &::after': { display: 'table', content: "' '" },
+      '&::after': { clear: 'both', height: '0', fontSize: '0', visibility: 'hidden' },
+    },
+  };
 });
 export default useStyles;
diff --git a/src/pages/list/card-list/style.style.ts b/src/pages/list/card-list/style.style.ts
index 96d5ca7a..6ef7b805 100644
--- a/src/pages/list/card-list/style.style.ts
+++ b/src/pages/list/card-list/style.style.ts
@@ -1,71 +1,86 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
-    cardList: {},
-    card: {},
-    '.ant-card-meta-title': {
-      marginBottom: '12px',
-      '& > a': {
-        display: 'inline-block',
-        maxWidth: '100%',
-        color: token.colorTextHeading,
+    card: {
+      ".ant-card-meta-title": {
+        marginBottom: "12px",
+        "& > a": {
+          display: "inline-block",
+          maxWidth: "100%",
+          color: token.colorTextHeading,
+        },
+      },
+      ".ant-card-body:hover": {
+        ".ant-card-meta-title > a": {
+          color: token.colorPrimary,
+        },
       },
-    },
-    '.ant-card-body:hover': {},
-    '.ant-card-meta-title > a': {
-      color: token.colorPrimary,
     },
     item: {
-      height: '64px',
+      height: "64px",
     },
-    '.ant-list .ant-list-item-content-single': {
-      maxWidth: '100%',
+    cardList: {
+      ".ant-list .ant-list-item-content-single": { maxWidth: "100%" },
     },
     extraImg: {
+      width: "155px",
+      marginTop: "-20px",
+      textAlign: "center",
+      img: { width: "100%" },
       [`@media screen and (max-width: ${token.screenMD}px)`]: {
-        display: 'none',
-      },
-    },
-    img: {
-      [`@media screen and (max-width: ${token.screenSM}px)`]: {
-        marginRight: '4px',
+        display: "none",
       },
     },
     newButton: {
-      width: '100%',
-      height: '201px',
+      width: "100%",
+      height: "201px",
       color: token.colorTextSecondary,
       backgroundColor: token.colorBgContainer,
       borderColor: token.colorBorder,
     },
     cardAvatar: {
-      width: '48px',
-      height: '48px',
-      borderRadius: '48px',
+      width: "48px",
+      height: "48px",
+      borderRadius: "48px",
     },
     cardDescription: {
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      wordBreak: 'break-all',
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      wordBreak: "break-all",
     },
     pageHeaderContent: {
+      position: "relative",
       [`@media screen and (max-width: ${token.screenSM}px)`]: {
-        paddingBottom: '30px',
+        paddingBottom: "30px",
       },
     },
     contentLink: {
-      [`@media screen and (max-width: ${token.screenSM}px)`]: {
-        position: 'absolute',
-        bottom: '-4px',
-        left: '0',
-        width: '1000px',
+      marginTop: "16px",
+      a: {
+        marginRight: "32px",
+        img: {
+          width: "24px",
+        },
+      },
+      img: { marginRight: "8px", verticalAlign: "middle" },
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {
+        a: {
+          marginRight: "16px",
+        },
       },
-    },
-    a: {
       [`@media screen and (max-width: ${token.screenSM}px)`]: {
-        marginRight: '16px',
+        position: "absolute",
+        bottom: "-4px",
+        left: "0",
+        width: "1000px",
+        a: {
+          marginRight: "16px",
+        },
+        img: {
+          marginRight: "4px",
+        },
       },
     },
   };
diff --git a/src/pages/list/card-list/utils/utils.style.ts b/src/pages/list/card-list/utils/utils.style.ts
index 0ad5e64a..20ba95d9 100644
--- a/src/pages/list/card-list/utils/utils.style.ts
+++ b/src/pages/list/card-list/utils/utils.style.ts
@@ -1,6 +1,12 @@
 import { createStyles } from 'antd-style';
 
 const useStyles = createStyles(() => {
-  return {};
+  return {
+    'clearfix()': {
+      zoom: '1',
+      '&::before, &::after': { display: 'table', content: "' '" },
+      '&::after': { clear: 'both', height: '0', fontSize: '0', visibility: 'hidden' },
+    },
+  };
 });
 export default useStyles;
diff --git a/src/pages/list/search/applications/components/StandardFormRow/index.style.ts b/src/pages/list/search/applications/components/StandardFormRow/index.style.ts
index 8a149135..22a1f288 100644
--- a/src/pages/list/search/applications/components/StandardFormRow/index.style.ts
+++ b/src/pages/list/search/applications/components/StandardFormRow/index.style.ts
@@ -1,53 +1,59 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     standardFormRow: {
-      display: 'flex',
-      marginBottom: '16px',
-      paddingBottom: '16px',
-      borderBottom: '1px dashed @border-color-split',
-    },
-    '.ant-form-item, .ant-legacy-form-item': {
-      '&:last-child': { marginRight: '0' },
-    },
-    '.ant-form-item-label, .ant-legacy-form-item-label': {
-      float: 'left',
+      display: "flex",
+      marginBottom: "16px",
+      paddingBottom: "16px",
+      borderBottom: "1px dashed @border-color-split",
+      ".ant-form-item, .ant-legacy-form-item": { marginRight: "24px" },
+      ".ant-form-item-label, .ant-legacy-form-item-label": {
+        label: {
+          marginRight: "0",
+          color: token.colorText,
+        },
+      },
+      ".ant-form-item-label, .ant-legacy-form-item-label, .ant-form-item-control, .ant-legacy-form-item-control":
+        { padding: "0", lineHeight: "32px" },
     },
     label: {
-      flex: '0 0 auto',
-      marginRight: '24px',
+      flex: "0 0 auto",
+      marginRight: "24px",
       color: token.colorTextHeading,
       fontSize: token.fontSize,
-      textAlign: 'right',
-      '& > span': {
-        display: 'inline-block',
-        height: '32px',
-        lineHeight: '32px',
-        '&::after': {
+      textAlign: "right",
+      "& > span": {
+        display: "inline-block",
+        height: "32px",
+        lineHeight: "32px",
+        "&::after": {
           content: "'：'",
         },
       },
     },
-    '.ant-form-item-label, .ant-legacy-form-item-label, .ant-form-item-control, .ant-legacy-form-item-control':
-      {
-        padding: '0',
-        lineHeight: '32px',
-      },
     content: {
-      flex: '1 1 0',
+      flex: "1 1 0",
+      ".ant-form-item, .ant-legacy-form-item": {
+        "&:last-child": {
+          marginRight: "0",
+        },
+      },
     },
     standardFormRowLast: {
-      marginBottom: '0',
-      paddingBottom: '0',
-      border: 'none',
+      marginBottom: "0",
+      paddingBottom: "0",
+      border: "none",
+    },
+    standardFormRowBlock: {
+      ".ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper":
+        { display: "block" },
+    },
+    standardFormRowGrid: {
+      ".ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper":
+        { display: "block" },
+      ".ant-form-item-label, .ant-legacy-form-item-label": { float: "left" },
     },
-    standardFormRowBlock: {},
-    '.ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper':
-      {
-        display: 'block',
-      },
-    standardFormRowGrid: {},
   };
 });
 
diff --git a/src/pages/list/search/applications/components/TagSelect/index.style.ts b/src/pages/list/search/applications/components/TagSelect/index.style.ts
index e289aed0..07de491e 100644
--- a/src/pages/list/search/applications/components/TagSelect/index.style.ts
+++ b/src/pages/list/search/applications/components/TagSelect/index.style.ts
@@ -1,35 +1,33 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     tagSelect: {
-      position: 'relative',
-      maxHeight: '32px',
-      marginLeft: '-8px',
-      overflow: 'hidden',
-      lineHeight: '32px',
-      transition: 'all 0.3s',
-      userSelect: 'none',
-    },
-    '.ant-tag': {
-      marginRight: '24px',
-      padding: '0 8px',
-      fontSize: token.fontSize,
+      position: "relative",
+      maxHeight: "32px",
+      marginLeft: "-8px",
+      overflow: "hidden",
+      lineHeight: "32px",
+      transition: "all 0.3s",
+      userSelect: "none",
+      ".ant-tag": {
+        marginRight: "24px",
+        padding: "0 8px",
+        fontSize: token.fontSize,
+      },
     },
     expanded: {
-      maxHeight: '200px',
-      transition: 'all 0.3s',
+      maxHeight: "200px",
+      transition: "all 0.3s",
     },
     trigger: {
-      position: 'absolute',
-      top: '0',
-      right: '0',
-    },
-    'span.anticon': {
-      fontSize: '12px',
+      position: "absolute",
+      top: "0",
+      right: "0",
+      "span.anticon": { fontSize: "12px" },
     },
     hasExpandTag: {
-      paddingRight: '50px',
+      paddingRight: "50px",
     },
   };
 });
diff --git a/src/pages/list/search/applications/style.style.ts b/src/pages/list/search/applications/style.style.ts
index 5c1024c7..d77df4d4 100644
--- a/src/pages/list/search/applications/style.style.ts
+++ b/src/pages/list/search/applications/style.style.ts
@@ -1,46 +1,41 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
-    filterCardList: {},
-    '.ant-card-meta-content': {
-      marginTop: '0',
-    },
-    '// disabled white space .ant-card-meta-avatar': {
-      fontSize: '0',
-    },
-    '.ant-list .ant-list-item-content-single': {
-      maxWidth: '100%',
+    filterCardList: {
+      ".ant-card-meta-content": { marginTop: "0" },
+      ".ant-card-meta-avatar": { fontSize: "0" },
+      ".ant-list .ant-list-item-content-single": { maxWidth: "100%" },
     },
     cardInfo: {
-      marginTop: '16px',
-      marginLeft: '40px',
-      zoom: '1',
-      '&::before, &::after': { display: 'table', content: "' '" },
-      '&::after': {
-        clear: 'both',
-        height: '0',
-        fontSize: '0',
-        visibility: 'hidden',
+      marginTop: "16px",
+      marginLeft: "40px",
+      zoom: "1",
+      "&::before, &::after": { display: "table", content: "' '" },
+      "&::after": {
+        clear: "both",
+        height: "0",
+        fontSize: "0",
+        visibility: "hidden",
       },
-      '& > div': {
-        position: 'relative',
-        float: 'left',
-        width: '50%',
-        textAlign: 'left',
+      "& > div": {
+        position: "relative",
+        float: "left",
+        width: "50%",
+        textAlign: "left",
+        p: {
+          margin: "0",
+          fontSize: "24px",
+          lineHeight: "32px",
+        },
+        "p:first-child": {
+          marginBottom: "4px",
+          color: token.colorTextSecondary,
+          fontSize: "12px",
+          lineHeight: "20px",
+        },
       },
     },
-    p: {
-      margin: '0',
-      fontSize: '24px',
-      lineHeight: '32px',
-    },
-    'p:first-child': {
-      marginBottom: '4px',
-      color: token.colorTextSecondary,
-      fontSize: '12px',
-      lineHeight: '20px',
-    },
   };
 });
 
diff --git a/src/pages/list/search/applications/utils/utils.style.ts b/src/pages/list/search/applications/utils/utils.style.ts
index 0ad5e64a..20ba95d9 100644
--- a/src/pages/list/search/applications/utils/utils.style.ts
+++ b/src/pages/list/search/applications/utils/utils.style.ts
@@ -1,6 +1,12 @@
 import { createStyles } from 'antd-style';
 
 const useStyles = createStyles(() => {
-  return {};
+  return {
+    'clearfix()': {
+      zoom: '1',
+      '&::before, &::after': { display: 'table', content: "' '" },
+      '&::after': { clear: 'both', height: '0', fontSize: '0', visibility: 'hidden' },
+    },
+  };
 });
 export default useStyles;
diff --git a/src/pages/list/search/articles/components/ArticleListContent/index.style.ts b/src/pages/list/search/articles/components/ArticleListContent/index.style.ts
index 286b97b6..a75afb02 100644
--- a/src/pages/list/search/articles/components/ArticleListContent/index.style.ts
+++ b/src/pages/list/search/articles/components/ArticleListContent/index.style.ts
@@ -1,20 +1,25 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
-    listContent: {
-      [`@media screen and (max-width: ${token.screenXS}px)`]: {},
-    },
     description: {
-      maxWidth: '720px',
-      lineHeight: '22px',
+      maxWidth: "720px",
+      lineHeight: "22px",
     },
     extra: {
+      marginTop: "16px",
+      color: token.colorTextSecondary,
+      lineHeight: "22px",
+      "& > em": {
+        marginLeft: "16px",
+        color: token.colorTextDisabled,
+        fontStyle: "normal",
+      },
       [`@media screen and (max-width: ${token.screenXS}px)`]: {
-        '& > em': {
-          display: 'block',
-          marginTop: '8px',
-          marginLeft: '0',
+        "& > em": {
+          display: "block",
+          marginTop: "8px",
+          marginLeft: "0",
         },
       },
     },
diff --git a/src/pages/list/search/articles/components/StandardFormRow/index.style.ts b/src/pages/list/search/articles/components/StandardFormRow/index.style.ts
index 704e16c3..9bd74328 100644
--- a/src/pages/list/search/articles/components/StandardFormRow/index.style.ts
+++ b/src/pages/list/search/articles/components/StandardFormRow/index.style.ts
@@ -1,54 +1,61 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     standardFormRow: {
-      display: 'flex',
-      width: '100%',
-      marginBottom: '16px',
-      paddingBottom: '16px',
-      borderBottom: '1px dashed @border-color-split',
-    },
-    '.ant-form-item, .ant-legacy-form-item': {
-      '&:last-child': { display: 'block', marginRight: '0' },
-    },
-    '.ant-form-item-label, .ant-legacy-form-item-label': {
-      float: 'left',
+      display: "flex",
+      width: "100%",
+      marginBottom: "16px",
+      paddingBottom: "16px",
+      borderBottom: "1px dashed @border-color-split",
+      ".ant-form-item, .ant-legacy-form-item": { marginRight: "24px" },
+      ".ant-form-item-label, .ant-legacy-form-item-label": {
+        label: {
+          marginRight: "0",
+          color: token.colorText,
+        },
+      },
+      ".ant-form-item-label, .ant-legacy-form-item-label, .ant-form-item-control, .ant-legacy-form-item-control":
+        { padding: "0", lineHeight: "32px" },
     },
     label: {
-      flex: '0 0 auto',
-      marginRight: '24px',
+      flex: "0 0 auto",
+      marginRight: "24px",
       color: token.colorTextHeading,
       fontSize: token.fontSize,
-      textAlign: 'right',
-      '& > span': {
-        display: 'inline-block',
-        height: '32px',
-        lineHeight: '32px',
-        '&::after': {
+      textAlign: "right",
+      "& > span": {
+        display: "inline-block",
+        height: "32px",
+        lineHeight: "32px",
+        "&::after": {
           content: "'：'",
         },
       },
     },
-    '.ant-form-item-label, .ant-legacy-form-item-label, .ant-form-item-control, .ant-legacy-form-item-control':
-      {
-        padding: '0',
-        lineHeight: '32px',
-      },
     content: {
-      flex: '1 1 0',
+      flex: "1 1 0",
+      ".ant-form-item, .ant-legacy-form-item": {
+        "&:last-child": {
+          display: "block",
+          marginRight: "0",
+        },
+      },
     },
     standardFormRowLast: {
-      marginBottom: '0',
-      paddingBottom: '0',
-      border: 'none',
+      marginBottom: "0",
+      paddingBottom: "0",
+      border: "none",
+    },
+    standardFormRowBlock: {
+      ".ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper":
+        { display: "block" },
+    },
+    standardFormRowGrid: {
+      ".ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper":
+        { display: "block" },
+      ".ant-form-item-label, .ant-legacy-form-item-label": { float: "left" },
     },
-    standardFormRowBlock: {},
-    '.ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper':
-      {
-        display: 'block',
-      },
-    standardFormRowGrid: {},
   };
 });
 
diff --git a/src/pages/list/search/articles/components/TagSelect/index.style.ts b/src/pages/list/search/articles/components/TagSelect/index.style.ts
index e289aed0..07de491e 100644
--- a/src/pages/list/search/articles/components/TagSelect/index.style.ts
+++ b/src/pages/list/search/articles/components/TagSelect/index.style.ts
@@ -1,35 +1,33 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     tagSelect: {
-      position: 'relative',
-      maxHeight: '32px',
-      marginLeft: '-8px',
-      overflow: 'hidden',
-      lineHeight: '32px',
-      transition: 'all 0.3s',
-      userSelect: 'none',
-    },
-    '.ant-tag': {
-      marginRight: '24px',
-      padding: '0 8px',
-      fontSize: token.fontSize,
+      position: "relative",
+      maxHeight: "32px",
+      marginLeft: "-8px",
+      overflow: "hidden",
+      lineHeight: "32px",
+      transition: "all 0.3s",
+      userSelect: "none",
+      ".ant-tag": {
+        marginRight: "24px",
+        padding: "0 8px",
+        fontSize: token.fontSize,
+      },
     },
     expanded: {
-      maxHeight: '200px',
-      transition: 'all 0.3s',
+      maxHeight: "200px",
+      transition: "all 0.3s",
     },
     trigger: {
-      position: 'absolute',
-      top: '0',
-      right: '0',
-    },
-    'span.anticon': {
-      fontSize: '12px',
+      position: "absolute",
+      top: "0",
+      right: "0",
+      "span.anticon": { fontSize: "12px" },
     },
     hasExpandTag: {
-      paddingRight: '50px',
+      paddingRight: "50px",
     },
   };
 });
diff --git a/src/pages/list/search/articles/style.style.ts b/src/pages/list/search/articles/style.style.ts
index 5b5c0f3b..85c2c64c 100644
--- a/src/pages/list/search/articles/style.style.ts
+++ b/src/pages/list/search/articles/style.style.ts
@@ -1,20 +1,27 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
-    'a.listItemMetaTitle': {
+    "a.listItemMetaTitle": {
       color: token.colorTextHeading,
     },
     listItemExtra: {
+      width: "272px",
+      height: "1px",
       [`@media screen and (max-width: ${token.screenLG}px)`]: {
-        width: '0',
-        height: '1px',
+        width: "0",
+        height: "1px",
       },
     },
     selfTrigger: {
+      marginLeft: "12px",
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {
+        display: "block",
+        marginLeft: "0",
+      },
       [`@media screen and (max-width: ${token.screenMD}px)`]: {
-        display: 'block',
-        marginLeft: '0',
+        display: "block",
+        marginLeft: "0",
       },
     },
   };
diff --git a/src/pages/list/search/projects/components/AvatarList/index.style.ts b/src/pages/list/search/projects/components/AvatarList/index.style.ts
index 68d62237..51db29d0 100644
--- a/src/pages/list/search/projects/components/AvatarList/index.style.ts
+++ b/src/pages/list/search/projects/components/AvatarList/index.style.ts
@@ -1,26 +1,18 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     avatarList: {
-      display: 'inline-block',
-    },
-    ul: {
-      display: 'inline-block',
-      marginLeft: '8px',
-      fontSize: '0',
+      display: "inline-block",
+      ul: { display: "inline-block", marginLeft: "8px", fontSize: "0" },
     },
     avatarItem: {
-      display: 'inline-block',
+      display: "inline-block",
       width: token.controlHeight,
       height: token.controlHeight,
-      marginLeft: '-8px',
+      marginLeft: "-8px",
       fontSize: token.fontSize,
-    },
-    '.ant-avatar': {
-      width: '20px',
-      height: '20px',
-      lineHeight: '20px',
+      ".ant-avatar": { border: "1px solid @border-color-base" },
     },
     avatarItemLarge: {
       width: token.controlHeightLG,
@@ -31,12 +23,17 @@ const useStyles = createStyles(({ token }) => {
       height: token.controlHeightSM,
     },
     avatarItemMini: {
-      width: '20px',
-      height: '20px',
-    },
-    '.ant-avatar-string': {
-      fontSize: '12px',
-      lineHeight: '18px',
+      width: "20px",
+      height: "20px",
+      ".ant-avatar": {
+        width: "20px",
+        height: "20px",
+        lineHeight: "20px",
+        ".ant-avatar-string": {
+          fontSize: "12px",
+          lineHeight: "18px",
+        },
+      },
     },
   };
 });
diff --git a/src/pages/list/search/projects/components/StandardFormRow/index.style.ts b/src/pages/list/search/projects/components/StandardFormRow/index.style.ts
index 704e16c3..9bd74328 100644
--- a/src/pages/list/search/projects/components/StandardFormRow/index.style.ts
+++ b/src/pages/list/search/projects/components/StandardFormRow/index.style.ts
@@ -1,54 +1,61 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     standardFormRow: {
-      display: 'flex',
-      width: '100%',
-      marginBottom: '16px',
-      paddingBottom: '16px',
-      borderBottom: '1px dashed @border-color-split',
-    },
-    '.ant-form-item, .ant-legacy-form-item': {
-      '&:last-child': { display: 'block', marginRight: '0' },
-    },
-    '.ant-form-item-label, .ant-legacy-form-item-label': {
-      float: 'left',
+      display: "flex",
+      width: "100%",
+      marginBottom: "16px",
+      paddingBottom: "16px",
+      borderBottom: "1px dashed @border-color-split",
+      ".ant-form-item, .ant-legacy-form-item": { marginRight: "24px" },
+      ".ant-form-item-label, .ant-legacy-form-item-label": {
+        label: {
+          marginRight: "0",
+          color: token.colorText,
+        },
+      },
+      ".ant-form-item-label, .ant-legacy-form-item-label, .ant-form-item-control, .ant-legacy-form-item-control":
+        { padding: "0", lineHeight: "32px" },
     },
     label: {
-      flex: '0 0 auto',
-      marginRight: '24px',
+      flex: "0 0 auto",
+      marginRight: "24px",
       color: token.colorTextHeading,
       fontSize: token.fontSize,
-      textAlign: 'right',
-      '& > span': {
-        display: 'inline-block',
-        height: '32px',
-        lineHeight: '32px',
-        '&::after': {
+      textAlign: "right",
+      "& > span": {
+        display: "inline-block",
+        height: "32px",
+        lineHeight: "32px",
+        "&::after": {
           content: "'：'",
         },
       },
     },
-    '.ant-form-item-label, .ant-legacy-form-item-label, .ant-form-item-control, .ant-legacy-form-item-control':
-      {
-        padding: '0',
-        lineHeight: '32px',
-      },
     content: {
-      flex: '1 1 0',
+      flex: "1 1 0",
+      ".ant-form-item, .ant-legacy-form-item": {
+        "&:last-child": {
+          display: "block",
+          marginRight: "0",
+        },
+      },
     },
     standardFormRowLast: {
-      marginBottom: '0',
-      paddingBottom: '0',
-      border: 'none',
+      marginBottom: "0",
+      paddingBottom: "0",
+      border: "none",
+    },
+    standardFormRowBlock: {
+      ".ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper":
+        { display: "block" },
+    },
+    standardFormRowGrid: {
+      ".ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper":
+        { display: "block" },
+      ".ant-form-item-label, .ant-legacy-form-item-label": { float: "left" },
     },
-    standardFormRowBlock: {},
-    '.ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper':
-      {
-        display: 'block',
-      },
-    standardFormRowGrid: {},
   };
 });
 
diff --git a/src/pages/list/search/projects/components/TagSelect/index.style.ts b/src/pages/list/search/projects/components/TagSelect/index.style.ts
index e289aed0..07de491e 100644
--- a/src/pages/list/search/projects/components/TagSelect/index.style.ts
+++ b/src/pages/list/search/projects/components/TagSelect/index.style.ts
@@ -1,35 +1,33 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     tagSelect: {
-      position: 'relative',
-      maxHeight: '32px',
-      marginLeft: '-8px',
-      overflow: 'hidden',
-      lineHeight: '32px',
-      transition: 'all 0.3s',
-      userSelect: 'none',
-    },
-    '.ant-tag': {
-      marginRight: '24px',
-      padding: '0 8px',
-      fontSize: token.fontSize,
+      position: "relative",
+      maxHeight: "32px",
+      marginLeft: "-8px",
+      overflow: "hidden",
+      lineHeight: "32px",
+      transition: "all 0.3s",
+      userSelect: "none",
+      ".ant-tag": {
+        marginRight: "24px",
+        padding: "0 8px",
+        fontSize: token.fontSize,
+      },
     },
     expanded: {
-      maxHeight: '200px',
-      transition: 'all 0.3s',
+      maxHeight: "200px",
+      transition: "all 0.3s",
     },
     trigger: {
-      position: 'absolute',
-      top: '0',
-      right: '0',
-    },
-    'span.anticon': {
-      fontSize: '12px',
+      position: "absolute",
+      top: "0",
+      right: "0",
+      "span.anticon": { fontSize: "12px" },
     },
     hasExpandTag: {
-      paddingRight: '50px',
+      paddingRight: "50px",
     },
   };
 });
diff --git a/src/pages/list/search/projects/style.style.ts b/src/pages/list/search/projects/style.style.ts
index 32572b7a..6000cc13 100644
--- a/src/pages/list/search/projects/style.style.ts
+++ b/src/pages/list/search/projects/style.style.ts
@@ -1,47 +1,47 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
-    coverCardList: {},
     card: {
-      '&:hover': {},
-    },
-    '.ant-card-meta-title': {
-      marginBottom: '4px',
-      '& > a': {
-        display: 'inline-block',
-        maxWidth: '100%',
-        color: token.colorTextHeading,
+      ".ant-card-meta-title": {
+        marginBottom: "4px",
+        "& > a": {
+          display: "inline-block",
+          maxWidth: "100%",
+          color: token.colorTextHeading,
+        },
+      },
+      ".ant-card-meta-description": {
+        height: "44px",
+        overflow: "hidden",
+        lineHeight: "22px",
+      },
+      "&:hover": {
+        ".ant-card-meta-title > a": {
+          color: token.colorPrimary,
+        },
       },
-    },
-    '.ant-card-meta-description': {
-      height: '44px',
-      overflow: 'hidden',
-      lineHeight: '22px',
-    },
-    '.ant-card-meta-title > a': {
-      color: token.colorPrimary,
     },
     cardItemContent: {
-      display: 'flex',
-      height: '20px',
-      marginTop: '16px',
-      marginBottom: '-4px',
-      lineHeight: '20px',
-      '& > span': {
-        flex: '1',
+      display: "flex",
+      height: "20px",
+      marginTop: "16px",
+      marginBottom: "-4px",
+      lineHeight: "20px",
+      "& > span": {
+        flex: "1",
         color: token.colorTextSecondary,
-        fontSize: '12px',
+        fontSize: "12px",
       },
     },
     avatarList: {
-      flex: '0 1 auto',
+      flex: "0 1 auto",
     },
     cardList: {
-      marginTop: '24px',
+      marginTop: "24px",
     },
-    '.ant-list .ant-list-item-content-single': {
-      maxWidth: '100%',
+    coverCardList: {
+      ".ant-list .ant-list-item-content-single": { maxWidth: "100%" },
     },
   };
 });
diff --git a/src/pages/list/search/projects/utils/utils.style.ts b/src/pages/list/search/projects/utils/utils.style.ts
index 0ad5e64a..20ba95d9 100644
--- a/src/pages/list/search/projects/utils/utils.style.ts
+++ b/src/pages/list/search/projects/utils/utils.style.ts
@@ -1,6 +1,12 @@
 import { createStyles } from 'antd-style';
 
 const useStyles = createStyles(() => {
-  return {};
+  return {
+    'clearfix()': {
+      zoom: '1',
+      '&::before, &::after': { display: 'table', content: "' '" },
+      '&::after': { clear: 'both', height: '0', fontSize: '0', visibility: 'hidden' },
+    },
+  };
 });
 export default useStyles;
diff --git a/src/pages/profile/advanced/style.style.ts b/src/pages/profile/advanced/style.style.ts
index e8966e3d..802e3032 100644
--- a/src/pages/profile/advanced/style.style.ts
+++ b/src/pages/profile/advanced/style.style.ts
@@ -1,40 +1,37 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
-    main: {},
-    '.ant-descriptions-row > td': {
-      paddingBottom: '8px',
-    },
-    '.ant-page-header-heading-extra': {
-      flexDirection: 'column',
+    main: {
+      ".ant-descriptions-row > td": { paddingBottom: "8px" },
+      ".ant-page-header-heading-extra": { flexDirection: "column" },
     },
     headerList: {
-      marginBottom: '4px',
+      marginBottom: "4px",
+      ".ant-descriptions-row > td": { paddingBottom: "8px" },
     },
     stepDescription: {
-      [`@media screen and (max-width: ${token.screenSM}px)`]: { left: '8px' },
-    },
-    '> div': {
-      marginTop: '8px',
-      marginBottom: '4px',
+      position: "relative",
+      left: "38px",
+      paddingTop: "8px",
+      fontSize: "14px",
+      textAlign: "left",
+      "> div": { marginTop: "8px", marginBottom: "4px" },
+      [`@media screen and (max-width: ${token.screenSM}px)`]: { left: "8px" },
     },
     pageHeader: {
-      [`@media screen and (max-width: ${token.screenSM}px)`]: {},
-    },
-    '.ant-page-header-heading-extra > * + *': {
-      marginLeft: '8px',
-    },
-    moreInfo: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      width: '200px',
-    },
-    '.ant-pro-page-header-wrap-row': {
+      ".ant-page-header-heading-extra > * + *": { marginLeft: "8px" },
       [`@media screen and (max-width: ${token.screenSM}px)`]: {
-        flexDirection: 'column',
+        ".ant-pro-page-header-wrap-row": {
+          flexDirection: "column",
+        },
       },
     },
+    moreInfo: {
+      display: "flex",
+      justifyContent: "space-between",
+      width: "200px",
+    },
   };
 });
 
diff --git a/src/pages/profile/basic/style.style.ts b/src/pages/profile/basic/style.style.ts
index 154eb819..b44de5fb 100644
--- a/src/pages/profile/basic/style.style.ts
+++ b/src/pages/profile/basic/style.style.ts
@@ -1,12 +1,12 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     title: {
-      marginBottom: '16px',
+      marginBottom: "16px",
       color: token.colorTextHeading,
-      fontWeight: '500',
-      fontSize: '16px',
+      fontWeight: "500",
+      fontSize: "16px",
     },
   };
 });
diff --git a/src/pages/result/fail/index.style.ts b/src/pages/result/fail/index.style.ts
index 7cb682d9..25852186 100644
--- a/src/pages/result/fail/index.style.ts
+++ b/src/pages/result/fail/index.style.ts
@@ -1,4 +1,4 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
@@ -6,10 +6,10 @@ const useStyles = createStyles(({ token }) => {
       color: token.colorBgTextActive,
     },
     title: {
-      marginBottom: '16px',
+      marginBottom: "16px",
       color: token.colorTextHeading,
-      fontWeight: '500',
-      fontSize: '16px',
+      fontWeight: "500",
+      fontSize: "16px",
     },
   };
 });
diff --git a/src/pages/result/success/index.style.ts b/src/pages/result/success/index.style.ts
index 169a71f1..8c0523e3 100644
--- a/src/pages/result/success/index.style.ts
+++ b/src/pages/result/success/index.style.ts
@@ -1,18 +1,18 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token }) => {
   return {
     title: {
-      position: 'relative',
+      position: "relative",
       color: token.colorText,
-      fontSize: '12px',
-      textAlign: 'center',
+      fontSize: "12px",
+      textAlign: "center",
     },
-    'head-title': {
-      marginBottom: '20px',
+    "head-title": {
+      marginBottom: "20px",
       color: token.colorTextHeading,
-      fontWeight: '500px',
-      fontSize: '16px',
+      fontWeight: "500px",
+      fontSize: "16px",
     },
   };
 });