Merge pull request #147 from hocgin/feature-scss

Feature scss
hocgin · Nov 3, 2023 · 670bead · 670bead
2 parents f50f556 + f862cb7
commit 670bead
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 65 deletions.
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -2,7 +2,7 @@ import { defineConfig } from 'dumi';
 import { resolve } from 'path';
 
 export const useLogger = () => {
-  let result: any = [];
+  let result = [];
   let offLogger = process.env.USE_LOG !== 'true';
   console.debug(`[${offLogger ? '禁用' : '启用'}]日志打印`);
   if (offLogger) {
@@ -20,7 +20,7 @@ export default defineConfig({
   themeConfig: {
     name: 'HUI',
     logo: 'https://cdn.hocgin.top/uPic/mp_logo.png',
-    footer: false
+    footer: false,
   },
   locales: [
     { id: 'zh-CN', name: '中文' },
@@ -31,9 +31,7 @@ export default defineConfig({
   alias: {
     '@': `${resolve(__dirname, 'src')}`,
   },
-  extraBabelPlugins: [
-    ...useLogger(),
-  ],
+  extraBabelPlugins: [...useLogger()],
   resolve: { entryFile: './src/index.tsx' },
   ssr: process.env.NODE_ENV === 'development' ? false : {},
 });
diff --git a/.fatherrc.ts b/.fatherrc.ts
@@ -5,7 +5,7 @@ import { IFatherConfig } from 'father/dist/types';
 export const ANT_PREFIX_CLS = 'hui-';
 
 export const useLogger = () => {
-  let result: any = [];
+  let result = [];
   let offLogger = process.env.USE_LOG !== 'true';
   console.debug(`[${offLogger ? '禁用' : '启用'}]日志打印`);
   if (offLogger) {
@@ -25,7 +25,5 @@ export default defineConfig({
     '@': resolve(__dirname, './src'),
     '@@': resolve(__dirname, './src/.dumi/tmp'),
   },
-  extraBabelPlugins: [
-    ...useLogger(),
-  ],
+  extraBabelPlugins: [...useLogger()],
 } as IFatherConfig);
diff --git a/src/Header/components/Header/index.tsx b/src/Header/components/Header/index.tsx
@@ -1,20 +1,18 @@
 import React, { useEffect, useState } from 'react';
-import { configResponsive, useResponsive, useRequest } from 'ahooks';
+import { useResponsive, useRequest } from 'ahooks';
 import classnames from 'classnames';
-import { MenuOutlined, CloseOutlined } from '@ant-design/icons';
+import {
+  MenuOutlined,
+  CloseOutlined,
+  LoadingOutlined,
+} from '@ant-design/icons';
 
 import { ConfigContext } from '@/ConfigProvider';
 import { Divider } from 'antd';
 import { DoveService } from '@/Request';
 import { PromiseKit } from '@hocgin/hkit';
 import Promise from '../../../Promise';
 
-configResponsive({
-  small: 0,
-  middle: 800,
-  large: 1200,
-});
-
 type Mode = 'none' | 'fixed' | 'sticky';
 
 type Props = {
@@ -30,7 +28,7 @@ const HeaderMenu: React.FC<Props> = ({ menus, prefix, suffix, ...props }) => {
   const responsive = useResponsive();
   let [isOpenMenu, setIsOpenMenu] = useState(responsive?.middle);
   let [user, setUser] = useState<any>(PromiseKit.CacheKit.getUser());
-  let { run } = useRequest(
+  let { run, loading } = useRequest(
     async () => {
       return await DoveService.getCurrentUser(false);
     },
@@ -65,7 +63,9 @@ const HeaderMenu: React.FC<Props> = ({ menus, prefix, suffix, ...props }) => {
           })}
         >
           {(menus || []).map(({ label }, index) => (
-            <li key={index}>{label}</li>
+            <li className={`${prefixCls}-navigation-item`} key={index}>
+              {label}
+            </li>
           ))}
         </ul>
         {prefix && <PrefixMenu prefixCls={prefixCls}>{prefix}</PrefixMenu>}
@@ -84,9 +84,15 @@ const HeaderMenu: React.FC<Props> = ({ menus, prefix, suffix, ...props }) => {
           <>
             <Divider type="vertical" />
             {!user ? (
-              <a className={`${prefixCls}-login`} href="/login">
-                登陆
-              </a>
+              loading ? (
+                <>
+                  <LoadingOutlined />
+                </>
+              ) : (
+                <a className={`${prefixCls}-login`} href="/login">
+                  登陆
+                </a>
+              )
             ) : (
               <Promise.UserAvatar defaultParams={user} />
             )}

diff --git a/src/Header/demos/index.tsx b/src/Header/demos/index.tsx
@@ -7,24 +7,20 @@ import { Header, Notification } from '@hocgin/ui';
 
 export default () => {
   return (
-    <div style={{ backgroundColor: 'black', height: '500px' } as any}>
+    <div style={{ backgroundColor: 'black', height: '500px' }}>
       <Header
-        style={{ padding: '0 10px 0' } as any}
+        style={{ padding: '0 10px 0' }}
         mode={'sticky'}
         logo={<Header.TextLogo title={'你好'} />}
-        prefix={
-          <>
-            <Notification.Indicator count={0} />
-          </>
-        }
+        prefix={<Notification.Indicator count={0} />}
         // suffix={<><Notification.Indicator /></>}
         menus={[
           { label: <a href={'www.baidu.com'}>🐰 标题</a> },
           { label: <a href={'www.baidu.com'}>🖍️ 标题</a> },
         ]}
         logined
       />
-      <div style={{ height: 500 } as any}>4</div>
+      <div style={{ height: 500 }}>4</div>
     </div>
   );
 };
diff --git a/src/Header/style/index.scss b/src/Header/style/index.scss
@@ -2,14 +2,11 @@
 @import '../../mixin.scss';
 
 $header-prefix-cls: $hui-prefix + '-header';
-$header-menu-prefix-cls: $hui-prefix + '-menu';
-
-$largeHeaderHeight: var(--large-header-height, 70px);
-$middleHeaderHeight: var(--small-header-height, 70px);
+$header-menu-prefix-cls: $header-prefix-cls + '-menu';
 
 .#{$header-prefix-cls} {
   width: 100%;
-  height: $largeHeaderHeight;
+  height: var(--large-header-height, 70px);
   z-index: 1000;
   display: flex;
   align-items: center;
@@ -90,6 +87,8 @@ $middleHeaderHeight: var(--small-header-height, 70px);
 }
 
 .#{$header-menu-prefix-cls} {
+  display: flex;
+
   &-action {
     display: flex;
     align-items: center;
@@ -112,35 +111,36 @@ $middleHeaderHeight: var(--small-header-height, 70px);
       list-style: none;
       user-select: none;
 
-      a {
-        color: #111111;
-        text-decoration: none;
-        font-size: 16px;
-        //margin: 0 10px;
-        font-weight: 500;
-        display: inline-block;
-        padding: 2px 4px;
-        border-radius: 2px;
-
-        &:hover {
-          background-color: #11111108;
-        }
-
-        &:hover:before {
-          visibility: visible;
-          width: 100%;
-        }
-
-        &:before {
-          content: '';
-          position: absolute;
-          height: 3px;
-          width: 0;
-          bottom: 0;
-          left: 0;
-          visibility: hidden;
-          transition: all 0.3s ease-in-out 0s;
-        }
+    }
+
+    li a {
+      color: #111111;
+      text-decoration: none;
+      font-size: 16px;
+      //margin: 0 10px;
+      font-weight: 500;
+      display: inline-block;
+      padding: 2px 4px;
+      border-radius: 2px;
+
+      &:hover {
+        background-color: #11111108;
+      }
+
+      &:hover:before {
+        visibility: visible;
+        width: 100%;
+      }
+
+      &:before {
+        content: '';
+        position: absolute;
+        height: 3px;
+        width: 0;
+        bottom: 0;
+        left: 0;
+        visibility: hidden;
+        transition: all 0.3s ease-in-out 0s;
       }
     }
 
@@ -203,8 +203,9 @@ $middleHeaderHeight: var(--small-header-height, 70px);
 
 @include mobile {
   .#{$header-prefix-cls} {
-    height: $middleHeaderHeight;
+    height: var(--small-header-height, 70px);
   }
+
   .#{$header-menu-prefix-cls} {
     &-navigation {
       position: fixed;

diff --git a/typings/global/index.d.ts b/typings/global/index.d.ts
@@ -1,5 +1,6 @@
 declare module '*.css';
 declare module '*.less';
+declare module '*.scss';
 declare module '*.png';
 declare module '*.jpg';
 declare module '*.gif';