win-chart 1.0.0

package/src/components/ResponsiveReactGridLayout.tsx

@@ -0,0 +1,218 @@
+import { styled } from 'styled-components';
+import { WidthProvider, Responsive, ResponsiveProps } from 'react-grid-layout';
+
+export type { ResponsiveProps };
+
+export const ResponsiveReactGridLayout = styled(WidthProvider(Responsive))`
+  position: relative;
+
+  .react-grid-layout {
+    position: relative;
+    transition: height 200ms ease;
+  }
+
+  .react-grid-item {
+    transition: all 200ms ease;
+    transition-property: left, top, width, height;
+  }
+
+  .react-grid-item img {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .react-grid-item.cssTransforms {
+    transition-property: transform, width, height;
+  }
+
+  .react-grid-item.resizing {
+    transition: none;
+    z-index: 1;
+    will-change: width, height;
+  }
+
+  .react-grid-item.react-draggable-dragging {
+    transition: none;
+    z-index: 3;
+    will-change: transform;
+  }
+
+  .react-grid-item.dropping {
+    visibility: hidden;
+  }
+
+  .react-grid-item.react-grid-placeholder {
+    background: red;
+    opacity: 0.2;
+    transition-duration: 100ms;
+    z-index: 2;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+  }
+
+  .react-grid-item.react-grid-placeholder.placeholder-resizing {
+    transition: none;
+  }
+
+  .react-grid-item > .react-resizable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+  }
+
+  .react-grid-item > .react-resizable-handle::after {
+    content: '';
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    width: 5px;
+    height: 5px;
+    border-right: 2px solid rgba(0, 0, 0, 0.4);
+    border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+  }
+
+  .react-resizable-hide > .react-resizable-handle {
+    display: none;
+  }
+
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
+    bottom: 0;
+    left: 0;
+    cursor: sw-resize;
+    transform: rotate(90deg);
+  }
+
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+    bottom: 0;
+    right: 0;
+    cursor: se-resize;
+  }
+
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
+    top: 0;
+    left: 0;
+    cursor: nw-resize;
+    transform: rotate(180deg);
+  }
+
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
+    top: 0;
+    right: 0;
+    cursor: ne-resize;
+    transform: rotate(270deg);
+  }
+
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-w,
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+    top: 50%;
+    margin-top: -10px;
+    cursor: ew-resize;
+  }
+
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-w {
+    left: 0;
+    transform: rotate(135deg);
+  }
+
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+    right: 0;
+    transform: rotate(315deg);
+  }
+
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-n,
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+    left: 50%;
+    margin-left: -10px;
+    cursor: ns-resize;
+  }
+
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-n {
+    top: 0;
+    transform: rotate(225deg);
+  }
+
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+    bottom: 0;
+    transform: rotate(45deg);
+  }
+
+  .react-resizable {
+    position: relative;
+  }
+
+  .react-resizable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    box-sizing: border-box;
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
+    background-position: bottom right;
+    padding: 0 3px 3px 0;
+  }
+
+  .react-resizable-handle-sw {
+    bottom: 0;
+    left: 0;
+    cursor: sw-resize;
+    transform: rotate(90deg);
+  }
+
+  .react-resizable-handle-se {
+    bottom: 0;
+    right: 0;
+    cursor: se-resize;
+  }
+
+  .react-resizable-handle-nw {
+    top: 0;
+    left: 0;
+    cursor: nw-resize;
+    transform: rotate(180deg);
+  }
+
+  .react-resizable-handle-ne {
+    top: 0;
+    right: 0;
+    cursor: ne-resize;
+    transform: rotate(270deg);
+  }
+
+  .react-resizable-handle-w,
+  .react-resizable-handle-e {
+    top: 50%;
+    margin-top: -10px;
+    cursor: ew-resize;
+  }
+
+  .react-resizable-handle-w {
+    left: 0;
+    transform: rotate(135deg);
+  }
+
+  .react-resizable-handle-e {
+    right: 0;
+    transform: rotate(315deg);
+  }
+
+  .react-resizable-handle-n,
+  .react-resizable-handle-s {
+    left: 50%;
+    margin-left: -10px;
+    cursor: ns-resize;
+  }
+
+  .react-resizable-handle-n {
+    top: 0;
+    transform: rotate(225deg);
+  }
+
+  .react-resizable-handle-s {
+    bottom: 0;
+    transform: rotate(45deg);
+  }
+`;

package/src/components/SliderDecoration.tsx

@@ -0,0 +1,27 @@
+import { Slider } from '@cainiaofe/cn-ui';
+import { rgba } from 'polished';
+import { css, styled } from 'styled-components';
+
+export const SliderDecoration = styled(Slider).attrs({
+  pauseOnHover: true,
+  autoplay: true,
+  autoplaySpeed: 5000,
+  arrows: false,
+  dotsRender: (index, current) => <Dot checked={index === current} />,
+})``;
+
+const Dot = styled.span<{ checked?: boolean }>`
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 500px;
+  background-color: ${rgba('#828c9e', 0.5)};
+  transform: translateY(32px);
+
+  ${({ checked }) =>
+    checked &&
+    css`
+      width: 18px;
+      background-color: #828c9e;
+    `}
+`;

package/src/components/VisionUserConfigContext.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IVisionUserConfig } from 'src/types';
+
+export const VisionUserConfigContext = React.createContext<
+  IVisionUserConfig | undefined
+>(undefined);

package/src/components/WinMenu/README.md

@@ -0,0 +1,11 @@
+# 更新日志
+
+## 231013
+
+1. 根据地址判定请求参数
+2. 未登入 Query 失效修复
+
+## 231017
+
+1. 幻视获取全路径
+2. 更改查询菜单统一入参

package/src/components/WinMenu/WinHeader.tsx

@@ -0,0 +1,5 @@
+import { IKeyValueItem } from '@/types';
+import Header from '@alife/dwork-cnstr-header';
+import { styled } from 'styled-components';
+
+export const WinHeader = styled(Header)<IKeyValueItem>``;

package/src/components/WinMenu/components/ExtraBox.tsx

@@ -0,0 +1,61 @@
+import { styled } from 'styled-components';
+import { LangSwitch } from './LangSwitch';
+import { CnBox, CnTooltip } from '@cainiaofe/cn-ui';
+import { IMenuItem } from '../utils/interface';
+import { getHandleOpenLink, menuTreeFind } from '../utils/tool';
+import { RELATED_SYSTEM_LOGO } from '../utils/const';
+
+interface IProps {
+  data?: IMenuItem[];
+  downloadCenterUrl?: string;
+}
+
+export const ExtraBox = ({ data = [], downloadCenterUrl }: IProps) => {
+  const curItem = menuTreeFind(
+    data,
+    (item) => !!item.menuUrl && location.href.includes(item.menuUrl),
+  );
+
+  return (
+    <CnBox direction='row' spacing={16} align='center'>
+      {!!curItem?.docName && (
+        <CnTooltip
+          trigger={
+            <img
+              alt=''
+              src={RELATED_SYSTEM_LOGO}
+              onClick={getHandleOpenLink(curItem.docUrl)}
+              style={{
+                margin: '0 8px',
+                cursor: 'pointer',
+                display: 'inline-block',
+                width: 20,
+                height: 20,
+                objectFit: 'contain',
+              }}
+            />
+          }
+          align='br'
+          popupStyle={{
+            marginTop: 20,
+          }}
+        >
+          {curItem.docName}
+        </CnTooltip>
+      )}
+      {downloadCenterUrl && (
+        <MainLinkItem onClick={getHandleOpenLink(downloadCenterUrl)}>
+          下载中心
+        </MainLinkItem>
+      )}
+      <LangSwitch />
+    </CnBox>
+  );
+};
+
+const MainLinkItem = styled.div`
+  width: 70px;
+  font-size: 16px;
+  color: #fff;
+  cursor: pointer;
+`;

package/src/components/WinMenu/components/FullMenuBox.tsx

@@ -0,0 +1,80 @@
+import { CnIcon, CnPopup, CnTooltip } from '@cainiaofe/cn-ui';
+import { IWinHeaderProps } from '../utils/interface';
+import { FullMenuContainer } from './FullMenuContainer';
+import { GLOBAL_MENU_TITLE } from '../utils/const';
+import { rgba } from 'polished';
+import { styled } from 'styled-components';
+import { checkEntityArr } from '../utils/tool';
+
+export const FullMenuBox = ({ data, onPinned }: IWinHeaderProps) => {
+  return (
+    <CnPopup
+      trigger={
+        <div
+          style={{
+            zIndex: 1000,
+            transform: 'translateY(2px)',
+          }}
+        >
+          <CnTooltip
+            trigger={
+              <CnIcon
+                type='hamburger'
+                color='#fff'
+                size='large'
+                style={{
+                  cursor: 'pointer',
+                }}
+              />
+            }
+            align='br'
+            popupStyle={{
+              marginTop: 20,
+            }}
+          >
+            {GLOBAL_MENU_TITLE}
+          </CnTooltip>
+        </div>
+      }
+      triggerType='click'
+      align='tl bl'
+      followTrigger
+    >
+      {checkEntityArr(data) && (
+        <FullMenuWrapper>
+          <div className='menu-title'>
+            <h3>{GLOBAL_MENU_TITLE}</h3>
+          </div>
+          <div className='menu-list'>
+            <FullMenuContainer data={data} onPinned={onPinned} />
+          </div>
+        </FullMenuWrapper>
+      )}
+    </CnPopup>
+  );
+};
+
+const FullMenuWrapper = styled.div`
+  left: -20px !important;
+  top: -40px !important;
+  z-index: 998 !important;
+  background-color: #fff;
+  box-shadow: 0 8px 16px 0 ${rgba('#272e3a', 0.2)};
+
+  .menu-title {
+    padding: 17px 24px 18px;
+    font-size: 20px;
+    color: #272e3a;
+
+    h3 {
+      margin: 0;
+      font-weight: 500;
+    }
+  }
+
+  .menu-list {
+    box-shadow: 0 -1px 0 0 #e2e5eb;
+    max-height: calc(100vh - 130px);
+    overflow: auto;
+  }
+`;

package/src/components/WinMenu/components/FullMenuContainer.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { Grid } from '@cainiaofe/cn-ui';
+import { FullMenuItem } from './FullMenuItem';
+import { IWinHeaderProps } from '../utils/interface';
+import { checkEntityArr } from '../utils/tool';
+
+export function FullMenuContainer({ data = [], onPinned }: IWinHeaderProps) {
+  const [active, setActive] = useState<string>();
+
+  return (
+    <Grid.Row>
+      <div
+        style={{
+          boxShadow: '-1px 0 0 0 #e2e5eb',
+        }}
+      >
+        {data.map((item) => {
+          return (
+            <div
+              key={item.menuCode}
+              onMouseOver={() => {
+                setActive(item.menuCode);
+              }}
+            >
+              <FullMenuItem
+                itemInfo={item}
+                isSelect={active === item.menuCode}
+                onPinned={onPinned}
+              />
+            </div>
+          );
+        })}
+      </div>
+      <Grid.Row>
+        {data.map((item) => {
+          return (
+            active === item.menuCode &&
+            checkEntityArr(item.children) && (
+              <FullMenuContainer
+                key={item.menuCode}
+                data={item.children}
+                onPinned={onPinned}
+              />
+            )
+          );
+        })}
+      </Grid.Row>
+    </Grid.Row>
+  );
+}

package/src/components/WinMenu/components/FullMenuItem.tsx

@@ -0,0 +1,128 @@
+import { Box } from '@cainiaofe/cn-ui';
+import { styled } from 'styled-components';
+import { noSelectImg, selectImg } from '../utils/const';
+import { IMenuItem, IWinHeaderProps } from '../utils/interface';
+import { checkCurLink, checkEntityArr, getHandleJump } from '../utils/tool';
+
+interface IProps extends IWinHeaderProps {
+  isSelect: boolean;
+  itemInfo: IMenuItem;
+}
+
+export function FullMenuItem({ isSelect, itemInfo, onPinned }: IProps) {
+  const isCurLink =
+    !checkEntityArr(itemInfo.children) && checkCurLink(itemInfo);
+
+  return (
+    <BoxDecoration
+      direction='row'
+      style={{
+        backgroundColor: isSelect ? '#f7f8fa' : 'transparent',
+      }}
+    >
+      <Box justify='center' className='text' onClick={getHandleJump(itemInfo)}>
+        <span
+          className='menu-item-text'
+          style={{
+            color: isSelect || isCurLink ? '#3076FC' : '#394252',
+          }}
+        >
+          {itemInfo.menuTitle}
+        </span>
+      </Box>
+      {(checkEntityArr(itemInfo.children) || itemInfo.pinned) && (
+        <Box
+          className='no-select'
+          justify='center'
+          style={{
+            marginLeft: 20,
+          }}
+        >
+          <div
+            style={{
+              cursor: 'pointer',
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+              onPinned?.(itemInfo);
+            }}
+          >
+            <img
+              src={itemInfo.pinned ? selectImg : noSelectImg}
+              alt='tackSelect'
+            />
+          </div>
+        </Box>
+      )}
+      <Box
+        style={{
+          marginLeft: 32,
+        }}
+        justify='center'
+      >
+        <div
+          className='iconRight'
+          style={{
+            borderColor: isSelect ? '#3076FC' : '#394252',
+            opacity: checkEntityArr(itemInfo.children) ? 1 : 0,
+          }}
+        />
+      </Box>
+    </BoxDecoration>
+  );
+}
+
+const BoxDecoration = styled(Box)`
+  min-width: 240px;
+  height: 44px;
+  padding: 0 20px 0 25px;
+  transition: all 0.2s;
+  cursor: pointer;
+
+  & > div:first-child {
+    max-width: 180px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &:hover {
+    background-color: #f7f8fa;
+  }
+
+  &:hover .text span {
+    color: #3076fc !important;
+  }
+
+  &:hover .iconRight {
+    border-color: #3076fc !important;
+  }
+
+  .menu-item-icon {
+    span {
+      background: rgb(129, 140, 161);
+      height: 16px;
+      line-height: 16px;
+      color: #fff;
+    }
+  }
+
+  .menu-item-text {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .iconRight {
+    width: 8px;
+    height: 8px;
+    transform: rotateZ(45deg);
+    border-right: 1px solid;
+    border-top: 1px solid;
+  }
+
+  .text {
+    flex: 1;
+    padding-left: 4px;
+  }
+`;

package/src/components/WinMenu/components/LangSwitch.tsx

@@ -0,0 +1,84 @@
+import { Box, CnCard, CnIcon, Icon } from '@cainiaofe/cn-ui';
+import { styled } from 'styled-components';
+import $i18n from 'panda-i18n';
+import { langList } from '../utils/map';
+import { THEME } from '../utils/const';
+import { getListLabelByValue } from '../utils/tool';
+import { WinLanguage } from '../utils/type';
+
+const lang = $i18n.getLang();
+const handleSetLang = (lang: WinLanguage) => {
+  $i18n.setLang(lang);
+  location.reload();
+};
+
+export const LangSwitch = () => {
+  return (
+    <Wrapper>
+      <Box direction="row" align="center" spacing={4}>
+        {/* <IconBox src={LANG_LOGO} size={16} /> */}
+        <div>
+          <span data-lang-label>{getListLabelByValue(langList, lang)}</span>
+          <CnIcon type="arrow-down" size={12} />
+        </div>
+      </Box>
+      <LangCard data-card>
+        <Box spacing={16}>
+          {langList.map((item, index) => (
+            <Box
+              key={index}
+              data-lang-list-item
+              direction="row"
+              justify="space-between"
+              onClick={() => handleSetLang(item.value)}
+            >
+              <span>{item.label}</span>
+              {item.value === lang && (
+                <Icon
+                  type="select"
+                  style={{
+                    color: THEME.mainColor,
+                  }}
+                />
+              )}
+            </Box>
+          ))}
+        </Box>
+      </LangCard>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  color: #fff;
+  position: relative;
+  height: 56px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    [data-name='CnCard'] {
+      transform: scaleY(1);
+    }
+  }
+
+  [data-lang-label] {
+    margin-right: 2px;
+  }
+
+  [data-lang-list-item] {
+    width: 100px;
+    cursor: pointer;
+  }
+`;
+
+const LangCard = styled(CnCard)`
+  position: absolute;
+  right: -12px;
+  top: 64px;
+  color: ${THEME.defaultColor};
+  transform: scaleY(0);
+  transform-origin: 0 0;
+  transition: 0.5s;
+`;

package/src/components/WinMenu/components/LogoBox.tsx

@@ -0,0 +1,29 @@
+import { Box, Divider } from '@cainiaofe/cn-ui';
+import { styled } from 'styled-components';
+
+export const LogoBox = ({ src = '', text = '' }) => {
+  return (
+    <Box direction='row' align='center' style={{ width: 'max-content' }}>
+      <ImgBox
+        src={src}
+        alt=''
+        onClick={() => {
+          location.href = `/`;
+        }}
+      />
+      <Divider direction={'ver'} style={{ height: 20 }} />
+      <TextBox>{text}</TextBox>
+    </Box>
+  );
+};
+
+const ImgBox = styled.img({
+  objectFit: 'contain',
+  height: '24px',
+  cursor: 'pointer',
+});
+
+const TextBox = styled.span({
+  color: '#fff',
+  fontSize: '20px',
+});