win-chart 1.0.0

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

@@ -0,0 +1,19 @@
+/**
+ * 当前菜单业务域
+ */
+export enum MenuBizType {
+  /**
+   * 园区
+   */
+  PARK,
+
+  /**
+   * 幻视
+   */
+  VISION,
+
+  /**
+   * 招商租赁
+   */
+  RENT,
+}

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

@@ -0,0 +1,61 @@
+/**
+ * 菜单
+ */
+export interface IMenuItem {
+  menuCode: string;
+  menuTitle: string;
+  menuUrl?: string;
+  menuIcon?: string;
+
+  /**
+   * 关联的管理制度链接
+   */
+  docUrl?: string;
+
+  /**
+   * 关联的管理制度名
+   */
+  docName?: string;
+  firstMenuCode?: number | string;
+  children?: IMenuItem[];
+
+  /**
+   * 是否被钉住
+   */
+  pinned: boolean;
+}
+
+export interface IUserInfo {
+  employeeName: string;
+  employeeId: string;
+  employeeType: string;
+  tenantName: string;
+  workNo: string;
+  registDate: number;
+}
+
+export interface IListItem<T = string> {
+  label: string;
+  value: T;
+  children?: IListItem<T>[];
+}
+
+export interface IWinHeaderProps {
+  data?: IMenuItem[];
+  pinnedData?: IMenuItem[];
+  title?: string;
+  logo?: string;
+  userInfo?: Partial<IUserInfo>;
+  isMiniOverlay?: boolean;
+  onPinned?: (data: IMenuItem) => void;
+  downloadCenterUrl?: string;
+}
+
+export interface IResponse<T = any> {
+  data: T;
+  errorCode: string;
+  errorMsg: string;
+  msg?: string;
+  success: boolean;
+  code?: string;
+}

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

@@ -0,0 +1,39 @@
+import { DEFAULT_LOGO } from './const';
+import { MenuBizType } from './enum';
+import { IListItem } from './interface';
+import { WinLanguage } from './type';
+
+export const langList: IListItem<WinLanguage>[] = [
+  { label: '中文', value: 'zh-CN' },
+  { label: 'English', value: 'en-US' },
+];
+
+export const langMap = new Map<WinLanguage, string>()
+  .set('zh-CN', '中文')
+  .set('en-US', 'English');
+
+/**
+ * 菜单配置
+ */
+export const menuConfigMap = new Map<
+  MenuBizType,
+  {
+    title: string;
+    logo: string;
+    downloadCenterUrl?: string;
+    productCodes: string[];
+  }
+>();
+
+menuConfigMap.set(MenuBizType.PARK, {
+  title: '智慧园区',
+  logo: DEFAULT_LOGO,
+  productCodes: ['SMART_PARK', 'WAREHOUSE_BUSINESS', 'PLATFORM', 'ASSET'],
+  downloadCenterUrl: '/park/pc#/downloadCenter',
+});
+
+menuConfigMap.set(MenuBizType.VISION, {
+  title: '幻视平台',
+  logo: 'https://tianshu.alicdn.com/d380d002-fbbc-47c0-a17f-8fc3ecc368ee.png',
+  productCodes: ['VISION', 'PLATFORM'],
+});

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

@@ -0,0 +1,142 @@
+import { MenuBizType } from './enum';
+import { IListItem, IMenuItem, IResponse } from './interface';
+
+/**
+ * 处理返回结果
+ * @returns
+ */
+export function handleCnResult<T>({ data }: IResponse<T>): T {
+  return data;
+}
+
+/**
+ * 当前菜单是否为地址栏链接
+ * @param item
+ * @returns
+ */
+export const checkCurLink = (item: IMenuItem) =>
+  !!item.menuUrl &&
+  !checkEntityArr(item.children) &&
+  location.href.includes(item.menuUrl);
+
+/**
+ * 获取当前一级 MenuCode
+ * @param data
+ * @returns
+ */
+export const getCurLocationFirstIdByMenuList = (data: IMenuItem[]) => {
+  for (const firstMenu of data) {
+    if (firstMenu.children) {
+      const item = menuTreeFind(firstMenu.children, checkCurLink);
+
+      if (item) {
+        return firstMenu.menuCode;
+      }
+    }
+  }
+};
+
+/**
+ * 映射一级 MenuCode
+ * @param data
+ * @returns
+ */
+export const initFirstMenuCode = (data: IMenuItem[]) => {
+  const mapFirstMenuCode = (
+    data: IMenuItem[],
+    firstMenuCode: number | string,
+  ): IMenuItem[] => {
+    return data.map((item) => {
+      const newItem = {
+        ...item,
+        firstParentId: firstMenuCode,
+      };
+      if (newItem.children) {
+        newItem.children = mapFirstMenuCode(newItem.children, firstMenuCode);
+      }
+
+      return newItem;
+    });
+  };
+
+  return data.map((item) => {
+    const newItem = { ...item };
+    if (newItem.children) {
+      newItem.children = mapFirstMenuCode(newItem.children, item.menuCode);
+    }
+
+    return newItem;
+  });
+};
+
+/**
+ * 树形递归查找
+ * @param tree
+ * @param fn
+ * @returns
+ */
+export const menuTreeFind = (
+  tree: IMenuItem[],
+  fn: (item: IMenuItem) => boolean,
+): IMenuItem | undefined => {
+  for (const item of tree) {
+    if (fn(item)) {
+      return item;
+    }
+
+    if (item.children) {
+      const res = menuTreeFind(item.children, fn);
+      if (res) {
+        return res;
+      }
+    }
+  }
+};
+
+/**
+ * 判断是否为一个有效数组（有值，并且长度大于 0）
+ * @param data
+ * @returns
+ */
+export const checkEntityArr = (data: unknown) =>
+  Array.isArray(data) && data.length > 0;
+
+/**
+ * 处理跳转
+ * @param data
+ */
+export const getHandleJump = (data: IMenuItem) => () => {
+  if (data.menuUrl) {
+    location.href = data.menuUrl;
+  }
+};
+
+/**
+ * 根据 value 查询列表项 label
+ * @param list
+ * @param value
+ * @returns
+ */
+export const getListLabelByValue = (
+  list: Array<IListItem<string | number>>,
+  value?: number | string,
+) => list.find((item) => item.value === value)?.label;
+
+/**
+ * 获取外部链接跳转处理
+ * @param url
+ * @returns
+ */
+export const getHandleOpenLink = (url?: string | null) => () =>
+  !!url && open(url);
+
+/**
+ * 获取当前菜单业务域类型
+ */
+export const getDefaultMenuBizTypeByHref = () => {
+  if (location.href.includes('vision')) {
+    return MenuBizType.VISION;
+  }
+
+  return MenuBizType.PARK;
+};

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

@@ -0,0 +1 @@
+export type WinLanguage = 'zh-CN' | 'en-US';

package/src/components/hover-view.tsx

@@ -0,0 +1,48 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Balloon } from '@cainiaofe/cn-ui';
+import { IStyleProps } from '@/types';
+
+interface IProps extends IStyleProps {
+  content: ReactNode;
+  style?: CSSProperties;
+  cStyle?: CSSProperties;
+  onClick?(): void;
+  followTrigger?: boolean;
+}
+
+export const HoverView = ({
+  followTrigger = false,
+  content,
+  style,
+  cStyle,
+  className,
+  onClick,
+}: IProps) => {
+  const { Tooltip } = Balloon;
+  const intro = (
+    <div
+      onClick={onClick}
+      className={className}
+      style={{
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        ...cStyle,
+      }}
+    >
+      {content}
+    </div>
+  );
+
+  return (
+    <Tooltip
+      trigger={intro}
+      followTrigger={followTrigger}
+      v2
+      align='br'
+      style={style}
+    >
+      {content}
+    </Tooltip>
+  );
+};

package/src/components/icon.tsx

@@ -0,0 +1,44 @@
+import { IStyleProps } from 'src/types';
+import { createIconComponent } from './win-icon';
+
+export const CustomIcon = createIconComponent(
+  '//at.alicdn.com/t/a/font_2948873_rlsy8tmmati.js',
+);
+
+interface IProps extends IStyleProps {
+  show: boolean;
+  src: string;
+  size: number | string;
+  onClick: () => void;
+}
+
+export const IconBox = ({
+  src,
+  size = 12,
+  onClick,
+  show = true,
+  style,
+  ...args
+}: Partial<IProps>) => (
+  <img
+    alt=""
+    src={src}
+    onClick={(e) => {
+      if (onClick) {
+        e.stopPropagation();
+        onClick();
+      }
+    }}
+    {...args}
+    style={{
+      width: size,
+      height: size,
+      objectFit: 'contain',
+      display: show ? 'inline-block' : 'none',
+      ...(onClick && {
+        cursor: 'pointer',
+      }),
+      ...style,
+    }}
+  />
+);

package/src/components/indicator-remark.tsx

@@ -0,0 +1,25 @@
+import { IStyleProps } from '@/types';
+import { CnBalloon, CnIcon } from '@cainiaofe/cn-ui';
+
+interface IProps extends IStyleProps {
+  remark: string;
+}
+
+export const IndicatorRemark = ({ remark, style }: IProps) => (
+  <CnBalloon.Tooltip
+    v2
+    followTrigger
+    align='bl'
+    trigger={
+      <CnIcon
+        type='help-color'
+        style={{
+          marginLeft: 4,
+          ...style,
+        }}
+      />
+    }
+  >
+    {remark}
+  </CnBalloon.Tooltip>
+);

package/src/components/none-content.tsx

@@ -0,0 +1,93 @@
+import { Box } from '@cainiaofe/cn-ui';
+import { CSSProperties } from 'react';
+
+const noContentImg =
+  'https://img.alicdn.com/imgextra/i4/O1CN01g0QafV1rIyRHX6HA9_!!6000000005609-55-tps-190-120.svg';
+const noContentImgDark =
+  'https://img.alicdn.com/imgextra/i1/O1CN01A8j5NM26FVeLRKiQo_!!6000000007632-55-tps-160-104.svg';
+const noAccessImg =
+  'https://img.alicdn.com/imgextra/i4/O1CN01oQNWzR1rY5L7fdHcH_!!6000000005642-55-tps-160-160.svg';
+
+interface IProps {
+  direction?: 'row' | 'column' | 'row-reverse';
+  style: CSSProperties;
+  message: string;
+  className: string;
+  isDark: boolean;
+}
+
+export const NoContent = ({
+  direction = 'row',
+  message = '无内容',
+  style,
+  className,
+  isDark,
+}: Partial<IProps>) => {
+  return (
+    <Box
+      direction={direction}
+      justify='center'
+      align='center'
+      spacing={20}
+      className={className}
+      style={{
+        transform: 'translateY(20px)',
+        ...style,
+      }}
+    >
+      <img
+        alt=''
+        src={isDark ? noContentImgDark : noContentImg}
+        style={{
+          width: 120,
+          height: 120,
+          objectFit: 'contain',
+        }}
+      />
+      <span
+        style={{
+          fontSize: 14,
+          fontWeight: 500,
+          color: '#6D7A90',
+        }}
+      >
+        {message}
+      </span>
+    </Box>
+  );
+};
+
+export const NoAssess = ({
+  direction = 'row',
+  message = '暂无权限',
+  style,
+  className,
+}: Partial<IProps>) => {
+  return (
+    <Box
+      direction={direction}
+      justify='center'
+      align='center'
+      spacing={20}
+      className={className}
+      style={{
+        ...style,
+      }}
+    >
+      <img
+        alt=''
+        src={noAccessImg}
+        style={{ width: 120, height: 120, objectFit: 'contain' }}
+      />
+      <span
+        style={{
+          fontSize: 14,
+          fontWeight: 700,
+          color: '#6D7A90',
+        }}
+      >
+        {message}
+      </span>
+    </Box>
+  );
+};

package/src/components/panel-tab.tsx

@@ -0,0 +1,150 @@
+import { useSize } from 'ahooks';
+import { rgba } from 'polished';
+import { useEffect, useRef, useState } from 'react';
+import { IListItem } from 'src/types/interface';
+import { arraySum } from 'src/utils/arr';
+import { css, styled } from 'styled-components';
+
+interface IProps<T = string> {
+  dataList: IListItem<T>[];
+  value: T;
+  onChange(value: T): void;
+  style?: React.CSSProperties;
+  className?: string;
+  aroundTab?: boolean;
+}
+
+const spacing = 4;
+
+function Tab<T>({
+  dataList = [],
+  value,
+  aroundTab = false,
+  onChange,
+  ...args
+}: IProps<T>) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [tagState, setTagState] = useState({ width: 0, left: 0 });
+  const { width } = useSize(containerRef) ?? {};
+
+  useEffect(() => {
+    if (containerRef.current) {
+      // tab 容器宽度
+      const containerWidth = containerRef.current.getBoundingClientRect().width;
+      // tab 元素宽度
+      const tabWidthList = Array.from(
+        containerRef.current.querySelectorAll('[data-tab-item]'),
+      ).map((item) => item.getBoundingClientRect().width);
+      // 当前 tab 索引
+      const index = dataList.findIndex((item) => item.value === value);
+      // 当前 tab 宽度
+      const width = tabWidthList[index];
+      // 当前 tab 左侧元素宽度之和
+      const plusWith = arraySum(tabWidthList.slice(0, index));
+
+      if (aroundTab) {
+        const spacingWidth =
+          (containerWidth - arraySum(tabWidthList)) / (tabWidthList.length - 1);
+        setTagState({
+          width,
+          left: plusWith + index * spacingWidth,
+        });
+      } else {
+        setTagState({
+          width,
+          left: plusWith + index * spacing,
+        });
+      }
+    }
+  }, [value, width, aroundTab, dataList]);
+
+  return (
+    <div {...args} ref={containerRef}>
+      {dataList.map((item, index) => (
+        <div
+          data-tab-item
+          data-tab-last={index === dataList.length - 1}
+          data-checked={item.value === value}
+          key={index}
+          onClick={() => onChange(item.value)}
+        >
+          {item.label}
+        </div>
+      ))}
+      <CheckedTag style={{ ...tagState }} />
+    </div>
+  );
+}
+
+export const PanelTab = styled(Tab)<{ $darker?: boolean }>`
+  display: flex;
+  align-items: center;
+  position: relative;
+  background-color: ${(props) => props.theme.tabBackgroundColor ?? '#e2e5eb'};
+  border-radius: 500px;
+  line-height: 1;
+  color: ${(props) => props.theme.tabColor ?? '#272e3a'};
+
+  ${(props) =>
+    props.theme.type === 'dark' &&
+    props.$darker &&
+    css`
+      background-color: rgba(18, 22, 31, 0.5);
+      color: rgba(255, 255, 255, 0.7);
+    `}
+
+  [data-tab-item] {
+    padding: 6px 12px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 12px;
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.3s;
+    position: relative;
+    margin-right: ${spacing}px;
+    z-index: 1;
+    font-weight: 500;
+
+    &[data-tab-last='true'] {
+      margin-right: 0px;
+    }
+
+    &[data-checked='true'] {
+      font-weight: 700;
+
+      ${(props) =>
+        props.theme.type === 'dark' &&
+        css`
+          color: #000;
+        `}
+    }
+  }
+
+  ${(props) =>
+    props.aroundTab &&
+    css`
+      justify-content: space-between;
+
+      [data-tab-item] {
+        margin-right: 0px;
+      }
+    `}
+`;
+
+const CheckedTag = styled.div`
+  height: 100%;
+  border-radius: 500px;
+  background-color: #fff;
+  transition: all 0.3s;
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  ${(props) =>
+    props.theme.type === 'dark' &&
+    css`
+      background-color: ${rgba('#fff', 0.7)};
+    `}
+`;

package/src/components/panel-title-tab.tsx

@@ -0,0 +1,60 @@
+import { IListItem } from '@/types';
+import { styled } from 'styled-components';
+
+interface IProps<T> {
+  dataList: IListItem<T>[];
+  value: T;
+  onChange(value: T): void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+const spacing = 24;
+
+function Tab<T>({ dataList = [], value, onChange, ...args }: IProps<T>) {
+  return (
+    <div {...args}>
+      {dataList.map((item, index) => (
+        <div
+          data-tab-item
+          data-tab-last={index === dataList.length - 1}
+          data-checked={item.value === value}
+          key={index}
+          onClick={() => onChange(item.value)}
+        >
+          {item.label}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export const PanelTitleTab = styled(Tab)`
+  display: flex;
+  align-items: center;
+  position: relative;
+  border-radius: 500px;
+  line-height: 1;
+  color: #5d677a;
+  font-size: 14px;
+  margin-bottom: 16px;
+  [data-tab-item] {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.3s;
+    position: relative;
+    margin-right: ${spacing}px;
+    z-index: 1;
+    &[data-tab-last='true'] {
+      margin-right: 0px;
+    }
+
+    &[data-checked='true'] {
+      font-weight: 700;
+      color: #272f3d;
+    }
+  }
+`;