fix(router): merge xyh

Next xyh

src/components/Player/ScreenPlayer.tsx

@@ -4,6 +4,15 @@ import LivePlayer from './index';
 import { Radio } from 'antd';
 import { useFullscreen } from 'ahooks';
 import './index.less';
+import {
+  CaretLeftOutlined,
+  CaretUpOutlined,
+  CaretDownOutlined,
+  CaretRightOutlined,
+  PlusOutlined,
+  MinusOutlined,
+  AudioOutlined,
+} from '@ant-design/icons';
 
 type Player = {
   id?: string;
@@ -15,40 +24,16 @@ interface ScreenProps {
   id?: string;
   /**
    *
-   * @param id 当时播发视频ID
-   * @param type 鼠标按下状态，true 为按下， false 为松开
+   * @param id 当前选中播发视频ID
+   * @param type 当前操作动作
    */
-  onLeft?: (id: string, type: boolean) => void;
+  onMouseDown?: (id: string, type: string) => void;
   /**
    *
-   * @param id 当时播发视频ID
-   * @param type 鼠标按下状态，true 为按下， false 为松开
+   * @param id 当前选中播发视频ID
+   * @param type 当前操作动作
    */
-  onUp?: (id: string, type: boolean) => void;
-  /**
-   *
-   * @param id 当时播发视频ID
-   * @param type 鼠标按下状态，true 为按下， false 为松开
-   */
-  onRight?: (id: string, type: boolean) => void;
-  /**
-   *
-   * @param id 当时播发视频ID
-   * @param type 鼠标按下状态，true 为按下， false 为松开
-   */
-  onDown?: (id: string, type: boolean) => void;
-  /**
-   *
-   * @param id 当时播发视频ID
-   * @param type 鼠标按下状态，true 为按下， false 为松开
-   */
-  onZoomIn?: (id: string, type: boolean) => void;
-  /**
-   *
-   * @param id 当时播发视频ID
-   * @param type 鼠标按下状态，true 为按下， false 为松开
-   */
-  onZoomOut?: (id: string, type: boolean) => void;
+  onMouseLeave?: (id: string, type: string) => void;
 }
 
 export default (props: ScreenProps) => {
@@ -136,7 +121,117 @@ export default (props: ScreenProps) => {
           </div>
         </div>
       </div>
-      <div className={'live-player-tools'}></div>
+      <div className={'live-player-tools'}>
+        <div className={'direction'}>
+          <div
+            className={'direction-item up'}
+            onMouseDown={() => {
+              if (props.onMouseDown && props.id) {
+                props.onMouseDown(props.id, '');
+              }
+            }}
+            onMouseLeave={() => {
+              if (props.onMouseLeave && props.id) {
+                props.onMouseLeave(props.id, '');
+              }
+            }}
+          >
+            <CaretUpOutlined className={'direction-icon'} />
+          </div>
+          <div
+            className={'direction-item right'}
+            onMouseDown={() => {
+              if (props.onMouseDown && props.id) {
+                props.onMouseDown(props.id, '');
+              }
+            }}
+            onMouseLeave={() => {
+              if (props.onMouseLeave && props.id) {
+                props.onMouseLeave(props.id, '');
+              }
+            }}
+          >
+            <CaretRightOutlined className={'direction-icon'} />
+          </div>
+          <div
+            className={'direction-item left'}
+            onMouseDown={() => {
+              if (props.onMouseDown && props.id) {
+                props.onMouseDown(props.id, '');
+              }
+            }}
+            onMouseLeave={() => {
+              if (props.onMouseLeave && props.id) {
+                props.onMouseLeave(props.id, '');
+              }
+            }}
+          >
+            <CaretLeftOutlined className={'direction-icon'} />
+          </div>
+          <div
+            className={'direction-item down'}
+            onMouseDown={() => {
+              if (props.onMouseDown && props.id) {
+                props.onMouseDown(props.id, '');
+              }
+            }}
+            onMouseLeave={() => {
+              if (props.onMouseLeave && props.id) {
+                props.onMouseLeave(props.id, '');
+              }
+            }}
+          >
+            <CaretDownOutlined className={'direction-icon'} />
+          </div>
+          <div
+            className={'direction-audio'}
+            onMouseDown={() => {
+              if (props.onMouseDown && props.id) {
+                props.onMouseDown(props.id, '');
+              }
+            }}
+            onMouseLeave={() => {
+              if (props.onMouseLeave && props.id) {
+                props.onMouseLeave(props.id, '');
+              }
+            }}
+          >
+            <AudioOutlined />
+          </div>
+        </div>
+        <div className={'zoom'}>
+          <div
+            className={'zoom-item zoom-in'}
+            onMouseDown={() => {
+              if (props.onMouseDown && props.id) {
+                props.onMouseDown(props.id, '');
+              }
+            }}
+            onMouseLeave={() => {
+              if (props.onMouseLeave && props.id) {
+                props.onMouseLeave(props.id, '');
+              }
+            }}
+          >
+            <PlusOutlined />
+          </div>
+          <div
+            className={'zoom-item zoom-out'}
+            onMouseDown={() => {
+              if (props.onMouseDown && props.id) {
+                props.onMouseDown(props.id, '');
+              }
+            }}
+            onMouseLeave={() => {
+              if (props.onMouseLeave && props.id) {
+                props.onMouseLeave(props.id, '');
+              }
+            }}
+          >
+            <MinusOutlined />
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

src/components/Player/index.less

@@ -1,4 +1,6 @@
+@import '~antd/es/style/themes/default.less';
 @padding: 20px;
+@grid-gap: 2px;
 
 .live-player-warp {
   display: flex;
@@ -59,6 +61,105 @@
 
   .live-player-tools {
     flex-basis: 290px;
-    padding: 50px 12px 0 12px;
+    padding: 50px 12px 0 40px;
+
+    .direction {
+      position: relative;
+      display: grid;
+      grid-gap: @grid-gap;
+      grid-template-rows: 1fr 1fr;
+      grid-template-columns: 1fr 1fr;
+      margin-bottom: 30px;
+      overflow: hidden;
+      border-radius: 50%;
+      transform: rotateZ(45deg);
+
+      .direction-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-bottom: 100%;
+        font-size: 36px;
+        background-color: rgba(#000, 0.1);
+        transition: background-color 0.3s;
+
+        .direction-icon {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%) rotateZ(-45deg);
+        }
+      }
+
+      .direction-audio {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 45%;
+        height: 45%;
+        font-size: 30px;
+        background-color: #fff;
+        border-radius: 50%;
+        transform: translate(-50%, -50%) rotateZ(-45deg);
+      }
+
+      .zoom .zoom-item,
+      & .direction-item {
+        &:hover {
+          color: #fff;
+          background-color: @primary-color-hover;
+        }
+
+        &:active {
+          color: #fff;
+          background-color: @primary-color-active;
+        }
+      }
+
+      > div {
+        cursor: pointer;
+        &.disable {
+          color: @disabled-color;
+        }
+      }
+    }
+
+    .zoom {
+      display: grid;
+      grid-gap: @grid-gap;
+      grid-template-columns: 1fr 1fr;
+
+      .zoom-item {
+        padding: 8px 0;
+        font-size: 24px;
+        text-align: center;
+        background-color: rgba(#000, 0.1);
+        cursor: pointer;
+
+        &:hover {
+          color: #fff;
+          background-color: @primary-color-hover;
+        }
+
+        &:active {
+          color: #fff;
+          background-color: @primary-color-active;
+        }
+      }
+
+      .zoom-in {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+      }
+
+      .zoom-out {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+    }
   }
 }

src/pages/media/SplitScreen/index.tsx

@@ -13,7 +13,6 @@ const SplitScreen = () => {
           <div className="right-content">
             <ScreenPlayer />
           </div>
-          ;
         </div>
       </Card>
     </PageContainer>

src/utils/menu/index.ts

@@ -67,24 +67,27 @@ const findDetailRoute = (baseCode: string, url: string): MenuItem | undefined =>
 
 const findExtraRoutes = (baseCode: string, children: any[], url: string) => {
   const allComponents = findComponents(require.context('@/pages', true, /index(\.tsx)$/));
-  return children.map((route) => {
-    const code = `${baseCode}/${route.code}`;
-    const path = `${url}/${route.code}`;
-    const component = allComponents[code];
-
-    const _route: any = {
-      path: path,
-      url: path,
-      name: route.name,
-      hideInMenu: true,
-      code: code,
-    };
-
-    if (route.children && route.children.length) {
-      _route.children = findExtraRoutes(code, route.children, path);
-    }
-    return component ? _route : undefined;
-  });
+  return children
+    .map((route) => {
+      const code = `${baseCode}/${route.code}`;
+      const path = `${url}/${route.code}`;
+      const component = allComponents[code];
+
+      const _route: any = {
+        path: path,
+        url: path,
+        name: route.name,
+        hideInMenu: true,
+        code: code,
+      };
+
+      if (route.children && route.children.length) {
+        _route.children = findExtraRoutes(code, route.children, path);
+      }
+
+      return component ? _route : undefined;
+    })
+    .filter((item) => !!item);
 };
 
 /**
@@ -96,11 +99,10 @@ export const handleRoutes = (routes?: MenuItem[], level = 1): MenuItem[] => {
   return routes
     ? routes.map((item) => {
         // 判断当前是否有额外子路由
-        debugger;
         const extraRoutes = extraRouteObj[item.code];
 
         if (extraRoutes) {
-          if (extraRoutes) {
+          if (extraRoutes.children) {
             const eRoutes = findExtraRoutes(item.code, extraRoutes.children, item.url);
             item.children = item.children ? [...eRoutes, ...item.children] : eRoutes;
           }
@@ -117,7 +119,6 @@ export const handleRoutes = (routes?: MenuItem[], level = 1): MenuItem[] => {
         }
         item.level = level;
 
-        console.log(item.code, item);
         return item;
       })
     : [];