win-chart 1.0.0

package/src/components/WinMenu/components/PinDialog.tsx

@@ -0,0 +1,72 @@
+import { CnDialog, CnTagCloseable, CnTagGroup } from '@cainiaofe/cn-ui';
+import { MAX_PINNED_LENGTH } from '../utils/const';
+import { IMenuItem } from '../utils/interface';
+
+export interface IProps {
+  show: boolean;
+  operateItem?: IMenuItem;
+  pinnedMenuList: IMenuItem[];
+  onConfirmPin: (data: IMenuItem) => void;
+  onClose: () => void;
+}
+
+export const PinDialog = ({
+  pinnedMenuList,
+  show: showDialog,
+  operateItem,
+  onClose,
+  onConfirmPin,
+}: IProps) => {
+  const canPin = pinnedMenuList.length < MAX_PINNED_LENGTH;
+
+  return (
+    <CnDialog
+      title={`当前导航菜单已满 ${MAX_PINNED_LENGTH} 个`}
+      visible={showDialog}
+      okProps={{
+        disabled: !canPin,
+      }}
+      onOk={() => {
+        if (operateItem) {
+          onConfirmPin(operateItem);
+          onClose();
+        }
+      }}
+      onCancel={onClose}
+      onClose={onClose}
+    >
+      <div>
+        {`导航空间最多可展示 ${MAX_PINNED_LENGTH} 个菜单，如需添加新菜单，请选择当前导航上的已有菜单任意一个进行替换。`}
+      </div>
+      <div>
+        如需添加，请至少取消以下其中一个，点击确认后即可添加
+        <span
+          style={{
+            margin: '0 4px',
+            color: '#3D84FF',
+          }}
+        >
+          {operateItem?.menuTitle}
+        </span>
+        菜单。
+      </div>
+      <CnTagGroup
+        style={{
+          marginTop: 16,
+        }}
+      >
+        {pinnedMenuList.map((item) => (
+          <CnTagCloseable
+            key={item.menuCode}
+            onClose={() => {
+              onConfirmPin(item);
+              return false;
+            }}
+          >
+            {item.menuTitle}
+          </CnTagCloseable>
+        ))}
+      </CnTagGroup>
+    </CnDialog>
+  );
+};

package/src/components/WinMenu/components/PinnedMenuBox.tsx

@@ -0,0 +1,183 @@
+import { Box } from '@cainiaofe/cn-ui';
+import { THEME } from '../utils/const';
+import { IWinHeaderProps } from '../utils/interface';
+import { useEffect, useState } from 'react';
+import { styled, css } from 'styled-components';
+import {
+  checkCurLink,
+  checkEntityArr,
+  getCurLocationFirstIdByMenuList,
+  getHandleJump,
+} from '../utils/tool';
+
+export const PinnedMenuBox = ({
+  data = [],
+  isMiniOverlay,
+}: IWinHeaderProps) => {
+  const [curFirstMenuCode, setCurFirstMenuCode] = useState<
+    number | string | undefined
+  >();
+
+  useEffect(() => {
+    if (data.length !== 0) {
+      setCurFirstMenuCode(getCurLocationFirstIdByMenuList(data));
+    }
+  }, [data]);
+
+  return (
+    <Box direction='row' align='center' spacing={40} style={{ height: 64 }}>
+      {data.map((item) => (
+        <FirstMenuItem
+          $mini={isMiniOverlay}
+          key={item.menuTitle}
+          theme={{ checked: item.menuCode === curFirstMenuCode }}
+        >
+          <div>{item.menuTitle}</div>
+          <MenuOverlay $mini={isMiniOverlay} data-overlay>
+            {item.children?.map((secondMenu) => {
+              if (!checkEntityArr(secondMenu.children)) {
+                // 二级菜单为叶子节点
+                return (
+                  // <div onClick={getHandleJump(secondMenu)} key={item.menuTitle}>
+                  //   <span
+                  //     style={{
+                  //       color: THEME.mainColor,
+                  //       marginRight: 4,
+                  //     }}
+                  //   >
+                  //     {secondMenu.menuTitle}
+                  //   </span>
+                  //   {secondMenu.menuUrl && <IconBox size={12} src={LINK} />}
+                  // </div>
+                  <LinkItem
+                    onClick={getHandleJump(secondMenu)}
+                    key={item.menuTitle}
+                    theme={{
+                      checked: checkCurLink(secondMenu),
+                    }}
+                    style={{
+                      fontSize: 16,
+                      height: 22,
+                    }}
+                  >
+                    {secondMenu.menuTitle}
+                  </LinkItem>
+                );
+              }
+              // 三极菜单为叶子节点
+              return (
+                <SecondMenuItem key={secondMenu.menuTitle}>
+                  <div>{secondMenu.menuTitle}</div>
+                  <LinkBox>
+                    {secondMenu.children?.map((thirdMenu) => (
+                      <LinkItem
+                        key={thirdMenu.menuTitle}
+                        onClick={getHandleJump(thirdMenu)}
+                        theme={{
+                          checked: checkCurLink(thirdMenu),
+                        }}
+                      >
+                        {thirdMenu.menuTitle}
+                      </LinkItem>
+                    ))}
+                  </LinkBox>
+                </SecondMenuItem>
+              );
+            })}
+          </MenuOverlay>
+        </FirstMenuItem>
+      ))}
+    </Box>
+  );
+};
+
+export const FirstMenuItem = styled.div<{ $mini?: boolean }>`
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 16px;
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: max-content;
+  cursor: pointer;
+
+  ${(props) =>
+    props.theme.checked &&
+    css`
+      color: #fff;
+      border-bottom: 4px solid ${THEME.mainColor};
+      box-sizing: border-box;
+    `}
+
+  &:hover {
+    [data-overlay] {
+      display: inherit;
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  ${(props) =>
+    props.$mini &&
+    css`
+      position: relative;
+    `}
+`;
+
+export const MenuOverlay = styled.div<{ $mini?: boolean }>`
+  width: 100vw;
+  background: #fff;
+  color: #000;
+  padding: 50px;
+  display: grid;
+  grid: auto-flow / repeat(auto-fill, minmax(220px, 1fr));
+  gap: 40px;
+  box-shadow: 0 2px 6px 0 rgb(32 33 37 / 10%);
+  position: absolute;
+  left: 0;
+  top: 64px;
+  min-width: max-content;
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.5s, visibility 0s, transform 0.25s;
+
+  ${(props) =>
+    props.$mini &&
+    css`
+      left: 50%;
+      width: max-content;
+      transform: translateX(-50%);
+    `}
+`;
+
+export const SecondMenuItem = styled.div`
+  color: #347fff;
+  font-size: 16px;
+  cursor: default;
+`;
+
+export const LinkBox = styled.div`
+  color: #000;
+  margin-top: 16px;
+  display: grid;
+  grid: 'auto-flow / 1fr';
+  gap: 8px;
+`;
+
+const LinkItem = styled.div`
+  font-size: 14px;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  width: max-content;
+
+  ${(props) =>
+    props.theme.checked && {
+      color: THEME.mainColor,
+    }};
+
+  &:hover {
+    color: ${THEME.mainColor};
+    border-bottom-color: ${THEME.mainColor};
+  }
+`;

package/src/components/WinMenu/components/UserBox.tsx

@@ -0,0 +1,83 @@
+import { styled } from 'styled-components';
+import { THEME, getLogoutUrl } from '../utils/const';
+import { Box, CnBalloon, CnButton } from '@cainiaofe/cn-ui';
+import { IWinHeaderProps } from '../utils/interface';
+
+export const UserBox = ({ userInfo }: IWinHeaderProps) => {
+  const { employeeName, employeeId } = userInfo ?? {};
+
+  return (
+    <CnBalloon
+      v2
+      align='bl'
+      triggerType={['click']}
+      trigger={
+        <Avatar
+          theme={{
+            size: '32px',
+          }}
+        >
+          <span
+            style={{
+              fontSize: 12,
+            }}
+          >
+            {employeeName}
+          </span>
+        </Avatar>
+      }
+    >
+      <Box spacing={8} align='center'>
+        <UserInfo>
+          <Box spacing={16}>
+            <div data-name>{employeeName}</div>
+            <div data-id>{`用户ID: ${employeeId ?? ''}`}</div>
+          </Box>
+        </UserInfo>
+        <CnButton
+          size='small'
+          style={{ width: 100 }}
+          onClick={() => {
+            window.location.href = getLogoutUrl();
+          }}
+        >
+          退出登入
+        </CnButton>
+      </Box>
+    </CnBalloon>
+  );
+};
+
+const Avatar = styled.div`
+  width: ${(props) => props.theme.size};
+  height: ${(props) => props.theme.size};
+  border-radius: 100%;
+  background-color: ${THEME.mainColor};
+  white-space: nowrap;
+  overflow: hidden;
+  color: #fff;
+  font-size: 16px;
+  display: grid;
+  place-items: center;
+  border: 4px solid transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+`;
+
+const UserInfo = styled.div`
+  padding: 20px;
+  display: grid;
+  /* grid: auto-flow / 100px 1fr; */
+  place-items: center;
+  gap: 16px;
+  width: 220px;
+
+  [data-name] {
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  [data-id] {
+    font-size: 12px;
+  }
+`;

package/src/components/WinMenu/hooks/useUserInfo.ts

@@ -0,0 +1,21 @@
+import { useCallback, useEffect, useState } from 'react';
+import { WinService } from '@/components/WinMenu/services/WinService';
+import { IUserInfo } from '@/components/WinMenu/utils/interface';
+
+export const useUserInfo = () => {
+  const [state, setState] = useState<Partial<IUserInfo>>({});
+
+  const queryData = useCallback(async () => {
+    try {
+      setState(await WinService.queryLoginInfo());
+    } catch (error) {
+      // CnMessage.error(error.message);
+    }
+  }, []);
+
+  useEffect(() => {
+    queryData();
+  }, [queryData]);
+
+  return state;
+};

package/src/components/WinMenu/hooks/useUserMenu.ts

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useState } from 'react';
+import { WinService } from '@/components/WinMenu/services/WinService';
+import { IMenuItem } from '@/components/WinMenu/utils/interface';
+import { allProduceCodeList } from '../utils/const';
+
+const productCodesStr = JSON.stringify(allProduceCodeList);
+
+export const useUserMenu = () => {
+  const [state, setState] = useState<{
+    menuList: IMenuItem[];
+    pinnedMenuList: IMenuItem[];
+  }>({
+    menuList: [],
+    pinnedMenuList: [],
+  });
+
+  const queryData = useCallback(async () => {
+    if (productCodesStr) {
+      try {
+        setState({
+          menuList: await WinService.queryUserMenu(productCodesStr),
+          pinnedMenuList: await WinService.queryUserMenu(productCodesStr, true),
+        });
+      } catch (error) {
+        // CnMessage.error(error.message);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    queryData();
+  }, [queryData]);
+
+  return { userMenu: state, refreshUserMenu: queryData };
+};

package/src/components/WinMenu/index.tsx

@@ -0,0 +1,100 @@
+import { IMenuItem } from './utils/interface';
+import { MAX_PINNED_LENGTH } from './utils/const';
+import { LogoBox } from './components/LogoBox';
+import { PinnedMenuBox } from './components/PinnedMenuBox';
+import { styled } from 'styled-components';
+import { UserBox } from './components/UserBox';
+import { ExtraBox } from './components/ExtraBox';
+import { FullMenuBox } from './components/FullMenuBox';
+import { CnMessage } from '@cainiaofe/cn-ui';
+import { WinService } from './services/WinService';
+import { useUserMenu } from './hooks/useUserMenu';
+import { useUserInfo } from './hooks/useUserInfo';
+import React, { useState } from 'react';
+import { menuConfigMap } from './utils/map';
+import { getDefaultMenuBizTypeByHref } from './utils/tool';
+import { PinDialog } from './components/PinDialog';
+
+export * from './utils/tool';
+export * from './utils/map';
+export * from './hooks/useUserMenu';
+
+export const MenuContext = React.createContext(getDefaultMenuBizTypeByHref());
+
+export const WinMenu = () => {
+  const [curMenuBizType, setCurMenuBizType] = useState(
+    getDefaultMenuBizTypeByHref(),
+  );
+  const { title, logo, productCodes, downloadCenterUrl } =
+    menuConfigMap.get(curMenuBizType) ?? {};
+  const {
+    userMenu: { menuList, pinnedMenuList },
+    refreshUserMenu,
+  } = useUserMenu();
+  const userInfo = useUserInfo();
+  const [showDialog, setShowDialog] = useState(false);
+  const [operateItem, setOperateItem] = useState<IMenuItem>();
+  const canPin = pinnedMenuList.length < MAX_PINNED_LENGTH;
+
+  const handleCloseDialog = () => {
+    setShowDialog(false);
+    setOperateItem(undefined);
+  };
+
+  // 处理钉
+  const handlePinned = async (data: IMenuItem) => {
+    try {
+      if (data.pinned) {
+        // 取消钉
+        await WinService.unPinMenu(data.menuCode);
+      } else {
+        await WinService.pinMenu(data.menuCode);
+      }
+      refreshUserMenu();
+    } catch (error) {
+      CnMessage.error(error.message);
+    }
+  };
+
+  // 查验钉
+  const handleCheckPinned = (data: IMenuItem) => {
+    if (!canPin && !data.pinned) {
+      setOperateItem(data);
+      setShowDialog(true);
+    } else {
+      handlePinned(data);
+    }
+  };
+
+  return (
+    <MenuContext.Provider value={curMenuBizType}>
+      <NavWrapper>
+        <FullMenuBox data={menuList} onPinned={handleCheckPinned} />
+        <LogoBox src={logo} text={title} />
+        <PinnedMenuBox data={pinnedMenuList} />
+        <ExtraBox data={menuList} downloadCenterUrl={downloadCenterUrl} />
+        <UserBox userInfo={userInfo} />
+        <PinDialog
+          show={showDialog}
+          operateItem={operateItem}
+          pinnedMenuList={pinnedMenuList}
+          onConfirmPin={handlePinned}
+          onClose={handleCloseDialog}
+        />
+      </NavWrapper>
+    </MenuContext.Provider>
+  );
+};
+
+export const NavWrapper = styled.div`
+  background-color: #000;
+  height: 64px;
+  max-height: 64px;
+  display: grid;
+  grid: auto-flow / auto auto 1fr auto auto;
+  place-items: center normal;
+  position: relative;
+  padding: 0 20px;
+  gap: 40px;
+  z-index: 100;
+`;

package/src/components/WinMenu/services/WinService.ts

@@ -0,0 +1,79 @@
+import { IMenuItem, IUserInfo } from '@/components/WinMenu/utils/interface';
+import { winRequest } from './request';
+import { getDefaultMenuBizTypeByHref, handleCnResult } from '../utils/tool';
+import { MenuBizType } from '../utils/enum';
+
+export class WinService {
+  /**
+   * 全部有权限菜单树
+   */
+  public static async queryUserMenu(productCodes: string, pinned?: boolean) {
+    const data = handleCnResult(
+      await winRequest<IMenuItem[]>({
+        url: '/menu/queryUserMenu',
+        method: 'POST',
+        data: {
+          startMenuCode: 'dwork_menu',
+          productCodes: JSON.parse(productCodes),
+          pinned,
+          fullUrl: getDefaultMenuBizTypeByHref() === MenuBizType.VISION,
+        },
+      }),
+    );
+
+    return data;
+  }
+
+  /**
+   * 钉住菜单
+   * @param menuCode
+   * @returns
+   */
+  public static async pinMenu(menuCode: string) {
+    const data = handleCnResult<boolean>(
+      await winRequest({
+        url: '/menu/pinMenu',
+        method: 'POST',
+        data: {
+          menuCode,
+        },
+      }),
+    );
+
+    return data;
+  }
+
+  /**
+   * 用户取消钉住菜单
+   * @param menuCode
+   * @returns
+   */
+  public static async unPinMenu(menuCode: string) {
+    const data = handleCnResult(
+      await winRequest<boolean>({
+        url: '/menu/unPinMenu',
+        method: 'POST',
+        data: {
+          menuCode,
+        },
+      }),
+    );
+
+    return data;
+  }
+
+  /**
+   * 查询当前登录用户信息
+   * @returns
+   */
+  public static async queryLoginInfo() {
+    const data = handleCnResult(
+      await winRequest<IUserInfo>({
+        url: '/menu/queryLoginInfo',
+        method: 'POST',
+      }),
+    );
+
+    return data;
+  }
+}

package/src/components/WinMenu/services/request.ts

@@ -0,0 +1,53 @@
+import cnRequest, { CnRequestConfig } from '@alife/cn-request';
+import { IResponse } from '../utils/interface';
+
+const axiosConfig = {
+  withCredentials: true,
+};
+
+const cnOptions = {
+  turnOffLog: true,
+  loginCallback: () => {},
+};
+
+const request = cnRequest(axiosConfig, cnOptions);
+
+request.interceptors.response.use(
+  (response) => {
+    const obj = response.data;
+    const { code, msg, success, errorMsg, errorCode } = obj;
+
+    if (code === '9999') {
+      return Promise.reject({
+        ...obj,
+        message: msg,
+      });
+    }
+
+    if (errorCode === '1000') {
+      const curHref = encodeURIComponent(
+        encodeURIComponent(window.parent.location.href),
+      );
+      location.href = errorMsg + curHref;
+    }
+
+    if (!success) {
+      return Promise.reject({
+        ...obj,
+        message: errorMsg,
+      });
+    }
+
+    return obj;
+  },
+  (err) => {
+    console.error('network error', err);
+    return Promise.reject(err);
+  },
+);
+
+export const winRequest = async <T>(config: CnRequestConfig) => {
+  const resp: IResponse<T> = (await request<IResponse<T>>(config)) as any;
+
+  return Promise.resolve(resp);
+};

package/src/components/WinMenu/utils/const.ts

@@ -0,0 +1,80 @@
+export const THEME = {
+  mainColor: 'var(--color-primary, #3379ff)',
+  defaultColor: '#272f3d',
+};
+
+export const allProduceCodeList = [
+  'SMART_PARK',
+  'WAREHOUSE_BUSINESS',
+  'PLATFORM',
+  'ASSET',
+  'BOSS',
+  'VISION',
+  'COST',
+];
+
+/**
+ * 最大钉数量
+ */
+export const MAX_PINNED_LENGTH = 6;
+
+export const GLOBAL_MENU_TITLE = '全局导航';
+
+export const DEFAULT_LOGO =
+  'https://img.alicdn.com/imgextra/i3/O1CN01vfE10325TsIKkgGes_!!6000000007528-2-tps-148-52.png';
+/**
+ * Link
+ */
+export const LINK =
+  'https://img.alicdn.com/imgextra/i2/O1CN01IuML6l1oOyiuWwY2z_!!6000000005216-55-tps-4-8.svg';
+
+export const selectImg =
+  'https://img.alicdn.com/imgextra/i1/O1CN01dXAMby1yK4SMLiY4G_!!6000000006559-55-tps-16-16.svg';
+export const noSelectImg =
+  'https://img.alicdn.com/imgextra/i1/O1CN01cNSFHz1gte8TOXat1_!!6000000004200-55-tps-16-16.svg';
+
+/**
+ * 球状语言LOGO
+ */
+export const LANG_LOGO =
+  'https://img.alicdn.com/imgextra/i3/O1CN01bp9Xxw1IxGfQSC63a_!!6000000000959-55-tps-16-16.svg';
+
+/**
+ * 当前环境
+ */
+export const env = location.hostname.endsWith('test')
+  ? 'daily'
+  : location.hostname.startsWith('pre')
+  ? 'pre'
+  : 'prod';
+
+/**
+ * 获取登录地址
+ * @returns
+ */
+export const getLoginUrl = () => {
+  const urls = {
+    daily: `https://cnlogin.cainiao.test/miniLogin?isNewLogin=true&showin=true&showdd=true&redirectURL=${window.location.href}`,
+    pre: `https://pre-cnlogin.cainiao.com/miniLogin?isNewLogin=true&showin=true&showdd=true&redirectURL=${window.location.href}`,
+    prod: `https://cnlogin.cainiao.com/miniLogin?isNewLogin=true&showin=true&showdd=true&redirectURL=${window.location.href}`,
+  };
+
+  return urls[env];
+};
+
+/**
+ * 获取退出登录地址
+ * @returns
+ */
+export const getLogoutUrl = () => {
+  const urls = {
+    daily: `http://cnlogin.cainiao.test/logout?redirectURL=${window.location.href}`,
+    pre: `http://pre-cnlogin.cainiao.com/logout?redirectURL=${window.location.href}`,
+    prod: `http://cnlogin.cainiao.com/logout?redirectURL=${window.location.href}`,
+  };
+
+  return urls[env];
+};
+
+export const RELATED_SYSTEM_LOGO =
+  'https://img.alicdn.com/imgextra/i2/O1CN01HGDION1WcZR2CtV7X_!!6000000002809-55-tps-15-16.svg';