@gm-pc/react 1.7.1 → 1.8.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.7.1",
+  "version": "1.8.0-alpha.1",
   "description": "观麦前端基础组件库",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@gm-common/hooks": "^2.10.0",
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/locales": "^1.7.1",
+    "@gm-pc/locales": "^1.8.0-alpha.1",
     "big.js": "^6.0.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19",
@@ -46,5 +46,5 @@
     "react-dom": "^16.14.0",
     "react-window": "^1.8.5"
   },
-  "gitHead": "f8875bd29bb3261e9d9d835fb579d2a0d537abe8"
+  "gitHead": "9bce7f92e1098221071c39a89a77d6080e5909b0"
 }

package/src/component/nav/nav.tsx

@@ -10,10 +10,13 @@ const Nav: FC<NavProps> = ({
   data,
   selected,
   onSelect,
+  onPushCreate,
   showActive,
   other,
   className,
   style,
+  footerImage,
+  footerConfig,
   ...rest
 }) => {
   // 根据鼠标点到导航栏右边的线距离，判断移动方向
@@ -83,10 +86,25 @@ const Nav: FC<NavProps> = ({
             data={one}
             selected={selected}
             onSelect={onSelect}
+            onPushCreate={onPushCreate}
           />
         ))}
         {other}
       </Flex>
+      <div className='gm-nav-footer-iot'>
+        {footerConfig?.map((item) => (
+          <NavItem
+            key={item.link}
+            showSub={hoverLink === item.link}
+            onMouseMove={handleMouseMove}
+            data={item}
+            selected={selected}
+            onSelect={onSelect}
+            onPushCreate={onPushCreate}
+            footerImage={footerImage}
+          />
+        ))}
+      </div>
       <div id='gmNavPopupContainer' />
     </Flex>
   )

package/src/component/nav/nav_item.tsx

@@ -19,7 +19,9 @@ const NavItem: FC<NavItemProps> = ({
   selected,
   onSelect,
   onMouseMove,
+  onPushCreate,
   showSub,
+  footerImage,
 }) => {
   const ref = useRef<HTMLDivElement>(null)
   const [rect, setRect] = useState<DOMRect | null>(null)
@@ -47,6 +49,10 @@ const NavItem: FC<NavItemProps> = ({
     setRect(null)
   }
 
+  const handlePushCreate = (data: NavDataLevel2) => {
+    onPushCreate(data)
+  }
+
   let iconE = icon
   if ((rect || active) && iconActive) {
     iconE = iconActive
@@ -54,15 +60,22 @@ const NavItem: FC<NavItemProps> = ({
 
   return (
     <div ref={ref} className={classNames('gm-nav-one-box', { active, hover: !!rect })}>
-      <A
-        href={link}
-        className='gm-nav-one'
-        onClick={handleClick}
-        onMouseMove={(e) => onMouseMove(e, link)}
-      >
-        <span className='gm-nav-one-icon'>{iconE}</span>
-        <span className='gm-nav-one-text'>{name}</span>
-      </A>
+      {footerImage ? (
+        <A href={link} onClick={handleClick} onMouseMove={(e) => onMouseMove(e, link)}>
+          {footerImage}
+        </A>
+      ) : (
+        <A
+          href={link}
+          className='gm-nav-one'
+          onClick={handleClick}
+          onMouseMove={(e) => onMouseMove(e, link)}
+        >
+          <span className='gm-nav-one-icon'>{iconE}</span>
+          <span className='gm-nav-one-text'>{name}</span>
+        </A>
+      )}
+
       {sub && <div className='gm-nav-one-triangle' />}
       {sub && (
         <Portal>
@@ -72,6 +85,7 @@ const NavItem: FC<NavItemProps> = ({
               data={sub}
               selected={selected}
               onSelect={handleSelect}
+              onPushCreate={handlePushCreate}
             />
           )}
         </Portal>

package/src/component/nav/popup.tsx

@@ -1,10 +1,16 @@
-import React, { FC, useLayoutEffect, useRef, useState } from 'react'
+import React, { FC, MouseEventHandler, useLayoutEffect, useRef, useState } from 'react'
 import { PopupProps } from './types'
 import classNames from 'classnames'
 import { Flex } from '../flex'
 import A from './a'
 
-const Popup: FC<PopupProps> = ({ parentRect, data, selected, onSelect }) => {
+const Popup: FC<PopupProps> = ({
+  parentRect,
+  data,
+  selected,
+  onSelect,
+  onPushCreate,
+}) => {
   const refDom = useRef<HTMLDivElement>(null)
   const [marginTop, setMarginTop] = useState(0)
 
@@ -16,31 +22,69 @@ const Popup: FC<PopupProps> = ({ parentRect, data, selected, onSelect }) => {
     }
   }, [parentRect])
 
+  // 获取不同数量二级菜单的宽度
+  const setPopupWidth = (number: number): string => {
+    const baseWidth = 212
+    const arr: number[] = []
+    for (let i = 1; i < 20; i++) {
+      arr.push(baseWidth + i * 172)
+    }
+    const widthArray = [baseWidth].concat(arr).map((i) => i + 'px')
+    return widthArray[number - 1]
+  }
+
+  const handleMouseEnter: MouseEventHandler<HTMLDivElement> = (e) => {
+    e.currentTarget.classList.add('gm-nav-three-wrap-bg')
+  }
+
+  const handleMouseLeave: MouseEventHandler<HTMLDivElement> = (e) => {
+    e.currentTarget.classList.remove('gm-nav-three-wrap-bg')
+  }
+
   return (
     <div
       ref={refDom}
       className='gm-nav-popup'
-      style={{ marginTop: `${marginTop}px`, top: parentRect.top }}
+      style={{
+        marginTop: `${marginTop}px`,
+        top: parentRect.top,
+        width: `${setPopupWidth(data.length)}`,
+        maxWidth: '900px',
+      }}
     >
-      <Flex>
+      <Flex wrap>
         {data.map((v, i) => (
           <div key={i} className='gm-nav-two' style={v.style}>
             {!!v.name && <div className='gm-nav-two-title'>{v.name}</div>}
             <div>
               {v.sub.map((s, si) => (
-                <A
-                  key={si}
-                  href={s.link}
-                  className={classNames('gm-nav-three', {
+                <div
+                  className={classNames('gm-nav-three-wrap', {
                     active: selected.startsWith(s.link),
                   })}
-                  onClick={(event) => {
-                    event.preventDefault()
-                    onSelect(s)
-                  }}
+                  key={si}
+                  onMouseEnter={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
                 >
-                  {s.name}
-                </A>
+                  <A
+                    key={si}
+                    href={s.link}
+                    className='gm-nav-three'
+                    onClick={(event) => {
+                      event.preventDefault()
+                      onSelect(s)
+                    }}
+                  >
+                    {s.name}
+                  </A>
+                  {s.toCreate && (
+                    <span
+                      className='gm-nav-three-create'
+                      title={s.toCreate.tip}
+                      onClick={() => onPushCreate(s)}
+                    />
+                  )}
+                </div>
               ))}
             </div>
           </div>

package/src/component/nav/style.less

@@ -1,19 +1,24 @@
+:root {
+  --gm-nav-popup-item-color: #454545;
+  --gm-nav-popup-item-hover-color: #0363ff;
+  --gm-nav-background-color: #282c36;
+}
+
 .gm-nav {
   width: var(--gm-nav-size-width);
   height: 100vh;
-  background: #243351;
+  background: var(--gm-nav-background-color);
 
   .gm-nav-logo {
-    text-align: center;
-    height: 60px;
     display: flex;
     align-content: center;
     justify-content: center;
+    height: 64px;
+    text-align: center;
     cursor: pointer;
-
-    &:hover {
-      background: #17233d;
-    }
+    background-color: #fff;
+    padding-bottom: 4px;
+    box-shadow: inset -1px 0 0 0 #e8ecf3;
   }
 
   .gm-nav-content {
@@ -25,54 +30,150 @@
     }
   }
 
+  .gm-nav-footer-iot {
+    width: 100%;
+    height: 64px;
+    cursor: pointer;
+  }
+
   .gm-nav-one {
-    height: 50px;
-    padding-left: 20px;
-    text-decoration: none;
-    color: rgba(255, 255, 255, 80%);
     display: flex;
     align-items: center;
-    opacity: 0.8;
+    position: relative;
+    padding: 16px 20px;
+    color: #fff;
+    text-decoration: none;
 
     .gm-nav-one-icon {
+      margin-right: 10px;
       font-size: 18px;
       line-height: 1;
-      margin-right: 6px;
     }
 
     .gm-nav-one-text {
-      font-size: 14px;
+      font-size: 16px;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      right: 20px;
+      top: 21px;
+      height: 7px;
+      width: 7px;
+      border: 1px solid #fff;
+      opacity: 0.36;
+      border-top: none;
+      border-left: none;
+      transform: rotate(-45deg);
     }
   }
 
   .gm-nav-popup {
-    color: var(--gm-color-default);
-    background: white;
     position: absolute;
     top: 0;
     left: var(--gm-nav-size-width);
-    box-shadow: 1px 1px 6px 1px rgba(36, 51, 81, 0.2);
+    padding: 24px 8px 0 32px;
+    color: var(--gm-color-default);
+    background: #fff;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
+
+    .gm-nav-two {
+      min-width: 148px;
+      margin-right: 24px;
+      margin-bottom: 24px;
+
+      .gm-nav-two-title {
+        margin-bottom: 16px;
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--gm-nav-popup-item-color);
+      }
+    }
+
+    .gm-nav-three-wrap {
+      position: relative;
+      margin-bottom: 8px;
+      background: #f7f7f7;
+
+      &.gm-nav-three-wrap-bg {
+        background-color: #dae7ff;
+      }
+
+      &.active {
+        color: var(--gm-color-primary-active);
+        background-color: #dae7ff;
+      }
+
+      .gm-nav-three {
+        display: inline-block;
+        padding: 8px;
+        // width: 100%;
+        font-size: 14px;
+        color: var(--gm-color-default);
+        text-decoration: none;
+        white-space: nowrap;
+        border-radius: 2px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        &:hover {
+          color: var(--gm-nav-popup-item-hover-color);
+          background-color: #dae7ff;
+        }
+
+        span {
+          font-size: 18px;
+          color: #99999a;
+          cursor: pointer;
+
+          &:hover {
+            color: var(--gm-nav-popup-item-hover-color);
+          }
+        }
+      }
+
+      .gm-nav-three-create {
+        position: absolute;
+        top: 7px;
+        right: 4px;
+        z-index: 10;
+        width: 20px;
+        height: 20px;
+        background-image: url(../../images/add.png);
+        background-size: cover;
+        cursor: pointer;
+
+        &:hover {
+          background-image: url(../../images/add-hover.png);
+        }
+      }
+    }
   }
 
+  // 第一级 item
   .gm-nav-one-box {
     position: relative;
 
+    // 三角形
     .gm-nav-one-triangle {
-      display: none;
       position: absolute;
+      top: 19px;
+      right: -1px;
+      display: none;
       width: 0;
       height: 0;
       border: 6px solid transparent;
       border-right: 6px solid white;
-      top: 18px;
-      right: -1px;
     }
 
     &.hover {
       .gm-nav-one {
         color: white;
+        background-color: #1c2129;
         opacity: 1;
-        background: rgba(40, 113, 187, 0.4);
       }
 
       .gm-nav-one-triangle {
@@ -82,9 +183,35 @@
 
     &.active {
       .gm-nav-one {
-        color: white;
+        position: relative;
+        color: #fff;
+        background: #181b23;
         opacity: 1;
-        background: rgba(40, 113, 187, 1);
+        font-weight: 600;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          height: 100%;
+          width: 3px;
+          background-color: #0363ff;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          right: 20px;
+          top: 22px;
+          height: 7px;
+          width: 7px;
+          border: 1px solid #fff;
+          opacity: 1;
+          border-top: none;
+          border-left: none;
+          transform: rotate(-45deg);
+        }
       }
 
       .gm-nav-one-triangle {
@@ -92,40 +219,4 @@
       }
     }
   }
-
-  .gm-nav-two {
-    min-width: 110px;
-    padding: 20px 10px 20px;
-
-    .gm-nav-two-title {
-      color: var(--gm-color-default);
-      padding: 0 0 10px;
-      font-weight: 600;
-      font-size: 14px;
-      border-bottom: 1px solid #f0f1f3;
-      margin: 0 10px 8px;
-    }
-  }
-
-  .gm-nav-three {
-    display: block;
-    padding: 0 10px;
-    margin: 2px 0;
-    font-size: 14px;
-    line-height: 30px;
-    text-decoration: none;
-    color: var(--gm-color-default);
-    border-radius: 2px;
-    white-space: nowrap;
-
-    &:hover {
-      color: var(--gm-color-primary);
-      background-color: var(--gm-color-bg-back);
-    }
-
-    &.active {
-      color: var(--gm-color-primary-active);
-      background-color: var(--gm-color-bg-back);
-    }
-  }
 }

package/src/component/nav/types.ts

@@ -1,8 +1,12 @@
-import { CSSProperties, ReactNode, MouseEvent } from 'react'
+import React, { CSSProperties, ReactNode, MouseEvent, ReactElement } from 'react'
 
 interface NavDataLevel3 {
   link: string
   name: string
+  toCreate?: {
+    tip: string
+    href: string
+  }
 }
 
 interface NavDataLevel2 {
@@ -28,21 +32,28 @@ interface NavProps {
   selected: string
   /** 如果是选中一二级，会直接返回改分级下第三级的 item */
   onSelect(data: NavDataLevel3): void
+  /** 直接到达新建页面 */
+  onPushCreate(data: NavDataLevel3): void
   /** 控制 浮层的线上，如商品库传 merchandise */
   showActive?: string
   other?: ReactNode
   className?: string
   style?: CSSProperties
+  // 底部 iot 图片 & 数据
+  footerImage?: ReactNode
+  footerConfig?: NavData[]
 }
 
 interface NavItemProps {
   data: NavData
   selected: string
   onSelect(data: NavDataLevel3): void
+  onPushCreate(data: NavDataLevel3): void
   /** onMouseMove 的回调 */
   onMouseMove(event: MouseEvent, link: string): void
   /** 控制子导航列表的显示 */
   showSub?: boolean
+  footerImage?: ReactNode
 }
 
 interface PopupProps {
@@ -50,6 +61,7 @@ interface PopupProps {
   data: NavDataLevel2[]
   selected: string
   onSelect(data: NavDataLevel3): void
+  onPushCreate(data: NavDataLevel3): void
 }
 
 type NavSingleItemData = Omit<NavData, 'sub'>

package/src/component/pagination/right.tsx

@@ -54,11 +54,12 @@ const Right: FC<PaginationProps> = ({ paging, onChange }) => {
     }
   }
 
-  const all = Math.ceil((paging.count || 0) / paging.limit)
+  const all = Math.ceil((paging.count || 1) / paging.limit)
 
   return (
     <Flex className='gm-pagination-right'>
       <InputNumber
+        disabled={all <= 1}
         precision={0}
         value={index}
         onChange={handleInput}

package/src/component/tabs/style.less

@@ -1,5 +1,4 @@
 .gm-tabs {
-
   .gm-tabs-head-fix {
     width: 100%;
     height: 40px;
@@ -25,17 +24,6 @@
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
 
-      &::before {
-        position: absolute;
-        width: 100%;
-        content: ' ';
-        height: 2px;
-        right: 0;
-        bottom: 0 !important;
-        z-index: 99;
-        background-color: #fff;
-      }
-
       &.active {
         background: white;
         border-left: 1px solid var(--gm-color-border);
@@ -57,10 +45,9 @@
   cursor: pointer;
   line-height: 28px;
   margin-left: 16px;
-  transition: all .3s cubic-bezier(.645, .045, .355, 1);
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
-
 .gm-tabs-text-overflow-ellipsis {
   max-width: 150px;
   overflow: hidden;
@@ -140,7 +127,6 @@
 
 // 可编辑风格样式
 .gm-tabs-edit {
-
   .gm-tabs-head {
     background: #fff !important;
     padding: 0;
@@ -157,8 +143,7 @@
       &.active {
         color: #1890ff;
         box-sizing: border-box;
-
       }
     }
   }
-}
+}

package/src/css/var/variables.less

@@ -96,7 +96,7 @@
 
   // 具体业务
   // nav
-  --gm-nav-size-width: 92px;
+  --gm-nav-size-width: 136px;
   // modal
   --gm-modal-size-title-height: 40px;
   // switch