win-chart 1.0.1 → 1.0.3

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

@@ -1,72 +0,0 @@
-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

@@ -1,183 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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';