✨ feat(account): remove less (#10975)

* ✨ feat(account): remove less

* ✨ feat(account): fix menu bugs

src/pages/account/center/Center.less

@@ -1,86 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.avatarHolder {
-  margin-bottom: 24px;
-  text-align: center;
-
-  & > img {
-    width: 104px;
-    height: 104px;
-    margin-bottom: 20px;
-  }
-
-  .name {
-    margin-bottom: 4px;
-    color: @heading-color;
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 28px;
-  }
-}
-
-.detail {
-  p {
-    position: relative;
-    margin-bottom: 8px;
-    padding-left: 26px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  i {
-    position: absolute;
-    top: 4px;
-    left: 0;
-    width: 14px;
-    height: 14px;
-  }
-}
-
-.tagsTitle,
-.teamTitle {
-  margin-bottom: 12px;
-  color: @heading-color;
-  font-weight: 500;
-}
-
-.tags {
-  :global {
-    .ant-tag {
-      margin-bottom: 8px;
-    }
-  }
-}
-
-.team {
-  :global {
-    .ant-avatar {
-      margin-right: 12px;
-    }
-  }
-
-  a {
-    display: block;
-    margin-bottom: 24px;
-    overflow: hidden;
-    color: @text-color;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    transition: color 0.3s;
-
-    &:hover {
-      color: @primary-color;
-    }
-  }
-}
-
-.tabsCard {
-  :global {
-    .ant-card-head {
-      padding: 0 16px;
-    }
-  }
-}

src/pages/account/center/components/Applications/index.less

@@ -1,51 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.filterCardList {
-  margin-bottom: -24px;
-  :global {
-    .ant-card-meta-content {
-      margin-top: 0;
-    }
-    // disabled white space
-    .ant-card-meta-avatar {
-      font-size: 0;
-    }
-
-    .ant-list .ant-list-item-content-single {
-      max-width: 100%;
-    }
-  }
-  .cardInfo {
-    margin-top: 16px;
-    margin-left: 40px;
-    zoom: 1;
-    &::before,
-    &::after {
-      display: table;
-      content: ' ';
-    }
-    &::after {
-      clear: both;
-      height: 0;
-      font-size: 0;
-      visibility: hidden;
-    }
-    & > div {
-      position: relative;
-      float: left;
-      width: 50%;
-      text-align: left;
-      p {
-        margin: 0;
-        font-size: 24px;
-        line-height: 32px;
-      }
-      p:first-child {
-        margin-bottom: 4px;
-        color: @text-color-secondary;
-        font-size: 12px;
-        line-height: 20px;
-      }
-    }
-  }
-}

src/pages/account/center/components/ArticleListContent/index.less

@@ -1,38 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.listContent {
-  .description {
-    max-width: 720px;
-    line-height: 22px;
-  }
-  .extra {
-    margin-top: 16px;
-    color: @text-color-secondary;
-    line-height: 22px;
-    & > :global(.ant-avatar) {
-      position: relative;
-      top: 1px;
-      width: 20px;
-      height: 20px;
-      margin-right: 8px;
-      vertical-align: top;
-    }
-    & > em {
-      margin-left: 16px;
-      color: @disabled-color;
-      font-style: normal;
-    }
-  }
-}
-
-@media screen and (max-width: @screen-xs) {
-  .listContent {
-    .extra {
-      & > em {
-        display: block;
-        margin-top: 8px;
-        margin-left: 0;
-      }
-    }
-  }
-}

src/pages/account/center/components/Articles/index.less

@@ -1,12 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.articleList {
-  :global {
-    .ant-list-item:first-child {
-      padding-top: 0;
-    }
-  }
-}
-.listItemMetaTitle {
-  color: @heading-color;
-}

src/pages/account/center/components/AvatarList/index.less

@@ -1,50 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.avatarList {
-  display: inline-block;
-  ul {
-    display: inline-block;
-    margin-left: 8px;
-    font-size: 0;
-  }
-}
-
-.avatarItem {
-  display: inline-block;
-  width: @avatar-size-base;
-  height: @avatar-size-base;
-  margin-left: -8px;
-  font-size: @font-size-base;
-  :global {
-    .ant-avatar {
-      border: 1px solid @border-color-base;
-    }
-  }
-}
-
-.avatarItemLarge {
-  width: @avatar-size-lg;
-  height: @avatar-size-lg;
-}
-
-.avatarItemSmall {
-  width: @avatar-size-sm;
-  height: @avatar-size-sm;
-}
-
-.avatarItemMini {
-  width: 20px;
-  height: 20px;
-  :global {
-    .ant-avatar {
-      width: 20px;
-      height: 20px;
-      line-height: 20px;
-
-      .ant-avatar-string {
-        font-size: 12px;
-        line-height: 18px;
-      }
-    }
-  }
-}

src/pages/account/center/components/AvatarList/index.tsx

@@ -18,13 +18,14 @@ export type AvatarListProps = {
   style?: React.CSSProperties;
   children: React.ReactElement<AvatarItemProps> | React.ReactElement<AvatarItemProps>[];
 };
-const avatarSizeToClassName = (size?: SizeType | 'mini') =>
+const Item: React.FC<AvatarItemProps> = ({ src, size, tips, onClick = () => { } }) => {
-  classNames(styles.avatarItem, {
+  const { styles } = useStyles();
-    [styles.avatarItemLarge]: size === 'large',
+  const avatarSizeToClassName = (size?: SizeType | 'mini') =>
-    [styles.avatarItemSmall]: size === 'small',
+    classNames(styles.avatarItem, {
-    [styles.avatarItemMini]: size === 'mini',
+      [styles.avatarItemLarge]: size === 'large',
-  });
+      [styles.avatarItemSmall]: size === 'small',
-const Item: React.FC<AvatarItemProps> = ({ src, size, tips, onClick = () => {} }) => {
+      [styles.avatarItemMini]: size === 'mini',
+    });
   const cls = avatarSizeToClassName(size);
   return (
     <li className={cls} onClick={onClick}>

src/pages/account/center/components/Projects/index.less

@@ -1,54 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.coverCardList {
-  .card {
-    :global {
-      .ant-card-meta-title {
-        margin-bottom: 4px;
-        & > a {
-          display: inline-block;
-          max-width: 100%;
-          color: @heading-color;
-        }
-      }
-      .ant-card-meta-description {
-        height: 44px;
-        overflow: hidden;
-        line-height: 22px;
-      }
-    }
-
-    &:hover {
-      :global {
-        .ant-card-meta-title > a {
-          color: @primary-color;
-        }
-      }
-    }
-  }
-
-  .cardItemContent {
-    display: flex;
-    height: 20px;
-    margin-top: 16px;
-    margin-bottom: -4px;
-    line-height: 20px;
-    & > span {
-      flex: 1;
-      color: @text-color-secondary;
-      font-size: 12px;
-    }
-    .avatarList {
-      flex: 0 1 auto;
-    }
-  }
-  .cardList {
-    margin-top: 24px;
-  }
-
-  :global {
-    .ant-list .ant-list-item-content-single {
-      max-width: 100%;
-    }
-  }
-}

src/pages/account/settings/components/index.less

@@ -1,65 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.baseView {
-  display: flex;
-  padding-top: 12px;
-
-  :global {
-    .ant-legacy-form-item .ant-legacy-form-item-control-wrapper {
-      width: 100%;
-    }
-  }
-
-  .left {
-    min-width: 224px;
-    max-width: 448px;
-  }
-  .right {
-    flex: 1;
-    padding-left: 104px;
-    .avatar_title {
-      height: 22px;
-      margin-bottom: 8px;
-      color: @heading-color;
-      font-size: @font-size-base;
-      line-height: 22px;
-    }
-    .avatar {
-      width: 144px;
-      height: 144px;
-      margin-bottom: 12px;
-      overflow: hidden;
-      img {
-        width: 100%;
-      }
-    }
-    .button_view {
-      width: 144px;
-      text-align: center;
-    }
-  }
-}
-
-.area_code {
-  width: 72px;
-}
-.phone_number {
-  width: 214px;
-}
-
-@media screen and (max-width: @screen-xl) {
-  .baseView {
-    flex-direction: column-reverse;
-
-    .right {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      max-width: 448px;
-      padding: 20px;
-      .avatar_title {
-        display: none;
-      }
-    }
-  }
-}

src/pages/account/settings/index.tsx

@@ -6,7 +6,6 @@ import BindingView from './components/binding';
 import NotificationView from './components/notification';
 import SecurityView from './components/security';
 import useStyles from './style.style';
-const { Item } = Menu;
 type SettingsStateKeys = 'base' | 'security' | 'binding' | 'notification';
 type SettingsState = {
   mode: 'inline' | 'horizontal';
@@ -54,7 +53,7 @@ const Settings: React.FC = () => {
     };
   }, [dom.current]);
   const getMenu = () => {
-    return Object.keys(menuMap).map((item) => <Item key={item}>{menuMap[item]}</Item>);
+    return Object.keys(menuMap).map((item) => ({ key: item, label: menuMap[item] }));
   };
   const renderChildren = () => {
     const { selectKey } = initConfig;
@@ -91,9 +90,8 @@ const Settings: React.FC = () => {
                 selectKey: key as SettingsStateKeys,
               });
             }}
-          >
+            items={getMenu()}
-            {getMenu()}
+          />
-          </Menu>
         </div>
         <div className={styles.right}>
           <div className={styles.title}>{menuMap[initConfig.selectKey]}</div>

src/pages/account/settings/style.less

@@ -1,93 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.main {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  padding-top: 16px;
-  padding-bottom: 16px;
-  background-color: @menu-bg;
-  .leftMenu {
-    width: 224px;
-    border-right: @border-width-base @border-style-base @border-color-split;
-    :global {
-      .ant-menu-inline {
-        border: none;
-      }
-      .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
-        font-weight: bold;
-      }
-    }
-  }
-  .right {
-    flex: 1;
-    padding: 8px 40px;
-    .title {
-      margin-bottom: 12px;
-      color: @heading-color;
-      font-weight: 500;
-      font-size: 20px;
-      line-height: 28px;
-    }
-  }
-  :global {
-    .ant-list-split .ant-list-item:last-child {
-      border-bottom: 1px solid @border-color-split;
-    }
-    .ant-list-item {
-      padding-top: 14px;
-      padding-bottom: 14px;
-    }
-  }
-}
-:global {
-  .ant-list-item-meta {
-    // 账号绑定图标
-    .taobao {
-      display: block;
-      color: #ff4000;
-      font-size: 48px;
-      line-height: 48px;
-      border-radius: @border-radius-base;
-    }
-    .dingding {
-      margin: 2px;
-      padding: 6px;
-      color: #fff;
-      font-size: 32px;
-      line-height: 32px;
-      background-color: #2eabff;
-      border-radius: @border-radius-base;
-    }
-    .alipay {
-      color: #2eabff;
-      font-size: 48px;
-      line-height: 48px;
-      border-radius: @border-radius-base;
-    }
-  }
-
-  // 密码强度
-  font.strong {
-    color: @success-color;
-  }
-  font.medium {
-    color: @warning-color;
-  }
-  font.weak {
-    color: @error-color;
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .main {
-    flex-direction: column;
-    .leftMenu {
-      width: 100%;
-      border: none;
-    }
-    .right {
-      padding: 40px;
-    }
-  }
-}