@gm-pc/react 1.8.2-alpha.0 → 1.8.6-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.8.2-alpha.0",
+  "version": "1.8.6-alpha.0",
   "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.8.2-alpha.0",
+    "@gm-pc/locales": "^1.8.6-alpha.0",
     "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": "e76d58dfbce746845287f32e3bc2e859fba52aff"
+  "gitHead": "4886b16c37eaf034b055a5b07e14f13fcdb0e6bc"
 }

package/src/component/nav/nav.tsx

@@ -91,7 +91,7 @@ const Nav: FC<NavProps> = ({
         ))}
         {other}
       </Flex>
-      <div className='gm-nav-footer-iot'>
+      <div className={footerConfig && footerConfig.length > 0 ? 'gm-nav-footer-iot' : ''}>
         {footerConfig?.map((item) => (
           <NavItem
             key={item.link}

package/src/component/nav/nav_item.tsx

@@ -69,6 +69,7 @@ const NavItem: FC<NavItemProps> = ({
         >
           <span className='gm-nav-one-icon'>{iconE}</span>
           <span className='gm-nav-one-text'>{name}</span>
+          <i className='gm-nav-one-arrow' />
         </A>
       )}
 

package/src/component/nav/style.less

@@ -1,5 +1,5 @@
 :root {
-  --gm-nav-popup-item-color: #454545;
+  --gm-nav-popup-item-color: #333;
   --gm-nav-popup-item-hover-color: #0363ff;
   --gm-nav-background-color: #282c36;
 }
@@ -21,6 +21,7 @@
   }
 
   .gm-nav-content {
+    padding-top: 16px;
     overflow-y: auto;
 
     &::-webkit-scrollbar {
@@ -29,12 +30,6 @@
     }
   }
 
-  .gm-nav-footer-iot {
-    width: 100%;
-    height: 64px;
-    cursor: pointer;
-  }
-
   .gm-nav-one {
     display: flex;
     align-items: center;
@@ -45,7 +40,7 @@
 
     .gm-nav-one-icon {
       margin-right: 10px;
-      font-size: 18px;
+      font-size: 20px;
       line-height: 1;
     }
 
@@ -53,18 +48,34 @@
       font-size: 16px;
     }
 
-    &::after {
-      content: '';
+    .gm-nav-one-arrow {
       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);
+      top: 25px;
+      right: 16px;
+      width: 10px;
+      color: rgba(0, 0, 0, 0.85);
+      opacity: 0.45;
+      transform: rotate(-90deg);
+
+      &::before {
+        content: '';
+        position: absolute;
+        width: 6px;
+        height: 1.5px;
+        background-color: #fff;
+        border-radius: 2px;
+        transform: rotate(-45deg) translateX(2.5px);
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        width: 6px;
+        height: 1.5px;
+        background-color: #fff;
+        border-radius: 2px;
+        transform: rotate(45deg) translateX(-2.5px);
+      }
     }
   }
 
@@ -87,6 +98,7 @@
         font-size: 16px;
         font-weight: 600;
         color: var(--gm-nav-popup-item-color);
+        letter-spacing: 0.2px;
       }
     }
 
@@ -94,6 +106,7 @@
       position: relative;
       margin-bottom: 8px;
       background: #f7f7f7;
+      border-radius: 2px;
 
       &.gm-nav-three-wrap-bg {
         background-color: #dae7ff;
@@ -102,17 +115,18 @@
       &.active {
         color: var(--gm-color-primary-active);
         background-color: #dae7ff;
+        border-radius: 2px;
       }
 
       .gm-nav-three {
         display: inline-block;
         padding: 8px;
-        // width: 100%;
+        width: 100%;
         font-size: 14px;
-        color: var(--gm-color-default);
+        color: #333;
         text-decoration: none;
         white-space: nowrap;
-        border-radius: 2px;
+        letter-spacing: 0.2px;
 
         &:last-child {
           margin-bottom: 0;
@@ -137,7 +151,7 @@
       .gm-nav-three-create {
         position: absolute;
         top: 7px;
-        right: 4px;
+        right: 8px;
         z-index: 10;
         width: 20px;
         height: 20px;
@@ -159,7 +173,7 @@
     // 三角形
     .gm-nav-one-triangle {
       position: absolute;
-      top: 19px;
+      top: 21px;
       right: -1px;
       display: none;
       width: 0;
@@ -178,44 +192,55 @@
       .gm-nav-one-triangle {
         display: block;
       }
+
+      .gm-nav-one-arrow {
+        opacity: 1;
+      }
     }
 
     &.active {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 136px;
+      text-align: center;
+      padding-top: 10px;
+      padding-bottom: 10px;
+
+      // active hack
       .gm-nav-one {
-        position: relative;
+        width: 120px;
+        height: 34px;
         color: #fff;
-        background: #181b23;
-        opacity: 1;
         font-weight: 600;
+        background: #0363ff;
+        border-radius: 4px;
+        padding-left: 12px;
 
-        &::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;
+        .gm-nav-one-arrow {
+          right: 8px;
+          top: 20px;
           opacity: 1;
-          border-top: none;
-          border-left: none;
-          transform: rotate(-45deg);
         }
       }
 
       .gm-nav-one-triangle {
-        display: block;
+        display: none;
       }
     }
   }
+
+  .gm-nav-footer-iot {
+    width: 100%;
+    height: 64px;
+    cursor: pointer;
+
+    // 兼容 footImage 下的 active 样式不变化
+    .gm-nav-one-box.active {
+      display: block;
+      width: 100%;
+      height: 100%;
+      padding-top: 0;
+    }
+  }
 }