@zgfe/business-lib 1.0.0-beta.1

package/README.md

@@ -0,0 +1,12 @@
+## 规范
+
+### 样式命名规范
+
+biz-组件名或缩写-具体样式比如 layout 组件的左侧栏命名: biz-layout-left
+
+## 注意事项
+
+### 样式命名
+
+1. 命名上注意语义化，尽量减少语义不明的命名，比如 left、main、center 之类的
+2. className 的命名，统一采用 class-name，不要用驼峰命名

package/es/analysisLayout/demo/index.d.ts

@@ -0,0 +1,3 @@
+import './index.less';
+declare const _default: () => JSX.Element;
+export default _default;

package/es/analysisLayout/demo/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BizAnalysisLayout } from 'business-lib';
+import './index.less';
+
+var LeftContent = function LeftContent() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "left-content"
+  }, "left");
+};
+
+var Footer = function Footer() {
+  return /*#__PURE__*/React.createElement("div", null, "@footer");
+};
+
+var RightContent = function RightContent() {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "right"));
+};
+
+var LayoutDemo = function LayoutDemo() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "root"
+  }, /*#__PURE__*/React.createElement(BizAnalysisLayout, {
+    leftPanel: /*#__PURE__*/React.createElement(LeftContent, null),
+    leftHandle: /*#__PURE__*/React.createElement(Footer, null)
+  }, /*#__PURE__*/React.createElement(RightContent, null)));
+};
+
+export default (function () {
+  return /*#__PURE__*/React.createElement(LayoutDemo, null);
+});

package/es/analysisLayout/demo/index.less

@@ -0,0 +1,12 @@
+/*demo数据*/
+.root {
+  width: 100%;
+  height: 300px;
+  overflow: auto;
+  border: 1px solid #ecedf0;
+}
+
+.left-content {
+  width: 100%;
+  // height: 400px;
+}

package/es/analysisLayout/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.less';
+declare type AnalysisLayoutProps = {
+    children?: React.ReactNode;
+    leftPanel?: React.ReactNode;
+    leftHandle?: React.ReactNode;
+    isFixed?: boolean | false;
+    defaultLeftWidth?: number;
+    minWidthOfLeft?: number;
+    maxWidthOfLeft?: number;
+};
+declare const BizAnalysisLayout: React.FC<AnalysisLayoutProps>;
+export default BizAnalysisLayout;

package/es/analysisLayout/index.js

@@ -0,0 +1,153 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useEffect, useState } from 'react';
+import { createFromIconfontCN } from '@ant-design/icons';
+import './index.less';
+import { Tooltip } from 'antd';
+var IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_422162_1fpms355rmq.js'
+});
+
+var BizAnalysisLayout = function BizAnalysisLayout(props) {
+  var children = props.children,
+      leftPanel = props.leftPanel,
+      leftHandle = props.leftHandle,
+      _props$isFixed = props.isFixed,
+      isFixed = _props$isFixed === void 0 ? false : _props$isFixed,
+      _props$defaultLeftWid = props.defaultLeftWidth,
+      defaultLeftWidth = _props$defaultLeftWid === void 0 ? 580 : _props$defaultLeftWid,
+      _props$minWidthOfLeft = props.minWidthOfLeft,
+      minWidthOfLeft = _props$minWidthOfLeft === void 0 ? 320 : _props$minWidthOfLeft,
+      _props$maxWidthOfLeft = props.maxWidthOfLeft,
+      maxWidthOfLeft = _props$maxWidthOfLeft === void 0 ? 580 : _props$maxWidthOfLeft;
+
+  var _useState = useState(defaultLeftWidth),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showLeft = _useState4[0],
+      setShowLeft = _useState4[1];
+
+  var initX = 0;
+  var isDrag = false;
+
+  var handleMouseDown = function handleMouseDown(e) {
+    var target = e.target || e.srcElement; // clientX: 相对文档的水平坐标
+    // 对象相对于版面或由 offsetParent 左侧位置
+
+    initX = e.clientX - target.offsetLeft;
+    isDrag = !isDrag;
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
+  var handleMouseMove = function handleMouseMove(e) {
+    if (isDrag) {
+      var x = e.clientX - initX;
+
+      if (x < minWidthOfLeft) {
+        // 小于最小宽度，等于最小宽度
+        // 小于250时，收起
+        if (x < 250) {
+          setShowLeft(false);
+          x = 56;
+          isDrag = false;
+        } else {
+          x = minWidthOfLeft;
+        }
+      }
+
+      if (x > maxWidthOfLeft) x = maxWidthOfLeft;
+      setWidth(x);
+    }
+  };
+
+  var handleMouseUp = function handleMouseUp() {
+    isDrag = false;
+    document.removeEventListener('mousemove', handleMouseMove);
+  };
+
+  useEffect(function () {
+    return function () {
+      // 相当于destroy，移除mouseup监听
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, []); // 展开左侧内容
+
+  var toOpen = function toOpen() {
+    setShowLeft(true);
+    setWidth(maxWidthOfLeft);
+  };
+
+  var toPickup = function toPickup() {
+    setShowLeft(false);
+    setWidth(56);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "biz-layout-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "biz-layout-left",
+    style: {
+      width: "".concat(width, "px")
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "biz-layout-content",
+    style: {
+      display: showLeft ? 'block' : 'none'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "biz-layout-panel"
+  }, leftPanel), /*#__PURE__*/React.createElement("div", {
+    className: "biz-layout-bottom"
+  }, leftHandle)), showLeft ? /*#__PURE__*/React.createElement(Tooltip, {
+    title: function title() {
+      return '折叠筛选面板';
+    },
+    color: "#242541",
+    key: 'pickup'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "biz-layout-pickup",
+    onClick: toPickup
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    className: "biz-layout-pickup-icon",
+    type: 'icon-zhedie'
+  }))) : /*#__PURE__*/React.createElement(Tooltip, {
+    title: function title() {
+      return '展开筛选面板';
+    },
+    placement: "right",
+    color: "#242541",
+    key: 'open'
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    className: "biz-layout-open",
+    onClick: toOpen,
+    type: 'icon-zhankai'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "biz-layout-handler",
+    style: {
+      pointerEvents: !isFixed && showLeft ? 'auto' : 'none'
+    },
+    onMouseDown: handleMouseDown
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "biz-layout-right",
+    style: {
+      width: "calc(100% - ".concat(width, "px)")
+    }
+  }, children));
+};
+
+export default BizAnalysisLayout;

package/es/analysisLayout/index.less

@@ -0,0 +1,115 @@
+@import '../commonStyle/index.less';
+
+.biz-layout-container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 1440px;
+  height: 100%;
+  min-height: 900px;
+
+  .biz-layout-left {
+    position: relative;
+    display: flex;
+    background-color: #fff;
+
+    .biz-layout-content {
+      width: 100%;
+      height: 100%;
+    }
+
+    .biz-layout-handler {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 1px;
+      height: 100%;
+      background: #ecedf0;
+      transform: matrix(-1, 0, 0, 1, 0, 0);
+      cursor: ew-resize;
+    }
+
+    .biz-layout-panel {
+      box-sizing: border-box;
+      width: 100%;
+      height: calc(100% - 30px);
+      padding: @searchPadding;
+      overflow: auto;
+    }
+
+    .biz-layout-bottom {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 30px;
+      font-size: 12px;
+      line-height: 30px;
+      text-align: center;
+      background-color: #fff;
+      border-top: @boxBorder;
+
+      .biz-layout-expand {
+        color: @fontColor;
+        font-size: 16px;
+        cursor: pointer;
+
+        &:hover {
+          color: rgb(22, 93, 255, 0.1);
+        }
+      }
+    }
+  }
+
+  .biz-layout-right {
+    box-sizing: border-box;
+    min-width: 600px;
+    padding: @contentPadding;
+    overflow: auto;
+    background-color: #fff;
+  }
+}
+
+.biz-layout-pickup {
+  position: absolute;
+  right: -40px;
+  bottom: 20px;
+  z-index: 10;
+  box-sizing: border-box;
+  width: 40px;
+  height: 40px;
+  padding-right: 2px;
+  padding-bottom: 6px;
+  font-size: 24px;
+  text-align: center;
+  background: #ffffff;
+  border: @boxBorder;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+  cursor: pointer;
+
+  .biz-layout-pickup-icon {
+    color: @layoutIconColor;
+  }
+
+  &:hover {
+    color: @hoverColor;
+    background-color: @hoverBgColor;
+
+    .biz-layout-pickup-icon {
+      color: @hoverColor;
+    }
+  }
+}
+
+.biz-layout-open {
+  position: absolute;
+  bottom: 20px;
+  left: 16px;
+  color: @layoutIconColor;
+  font-size: 24px;
+
+  &:hover {
+    color: @hoverColor;
+  }
+}

package/es/attributeSelector/data/env.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    dimension_sub: string;
+    value_dict: boolean;
+    name: string;
+    id: number;
+    text: string;
+    category: string;
+    type: number;
+    alias_name: null;
+}[];
+export default _default;

package/es/attributeSelector/data/env.js

@@ -0,0 +1,181 @@
+export default [{
+  dimension_sub: 'browser_brand',
+  value_dict: false,
+  name: 'browser_brand',
+  id: 0,
+  text: '浏览器品牌',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}, {
+  dimension_sub: 'browser_version',
+  value_dict: false,
+  name: 'browser_version',
+  id: 0,
+  text: '浏览器版本',
+  category: 'fixed',
+  type: 2,
+  alias_name: null
+}, {
+  dimension_sub: 'website',
+  value_dict: false,
+  name: 'website',
+  id: 0,
+  text: '来源域名',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}, {
+  dimension_sub: 'platform',
+  value_dict: false,
+  name: 'platform',
+  id: 0,
+  text: '平台',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}, {
+  dimension_sub: 'referer_url',
+  value_dict: false,
+  name: 'referer_url',
+  id: 0,
+  text: '来源URL',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}, {
+  dimension_sub: 'current_url',
+  value_dict: false,
+  name: 'current_url',
+  id: 0,
+  text: '当前URL',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}, {
+  dimension_sub: 'country',
+  value_dict: false,
+  name: 'country',
+  id: 0,
+  text: '国家',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}, {
+  dimension_sub: 'area',
+  value_dict: false,
+  name: 'area',
+  id: 0,
+  text: '省份',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}, {
+  dimension_sub: 'city',
+  value_dict: false,
+  name: 'city',
+  id: 0,
+  text: '城市',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}, {
+  dimension_sub: 'os',
+  value_dict: false,
+  name: 'os',
+  id: 0,
+  text: '操作系统',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}, {
+  dimension_sub: 'ov',
+  value_dict: false,
+  name: 'ov',
+  id: 0,
+  text: '系统版本',
+  category: 'fixed',
+  type: 2,
+  alias_name: null
+}, {
+  dimension_sub: 'resolution_h',
+  value_dict: false,
+  name: 'resolution_h',
+  id: 0,
+  text: '屏幕高度',
+  category: 'fixed',
+  type: 2,
+  alias_name: null
+}, {
+  dimension_sub: 'resolution_l',
+  value_dict: false,
+  name: 'resolution_l',
+  id: 0,
+  text: '屏幕宽度',
+  category: 'fixed',
+  type: 2,
+  alias_name: null
+}, {
+  dimension_sub: 'first_referer_url',
+  value_dict: false,
+  name: 'first_referer_url',
+  id: 0,
+  text: '初始来源URL',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}, {
+  dimension_sub: 'ip',
+  value_dict: false,
+  name: 'ip',
+  id: 0,
+  text: 'IP',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}, {
+  dimension_sub: 'utm_source',
+  value_dict: false,
+  name: 'utm_source',
+  id: 0,
+  text: 'utm_source',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}, {
+  dimension_sub: 'utm_medium',
+  value_dict: false,
+  name: 'utm_medium',
+  id: 0,
+  text: 'utm_medium',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}, {
+  dimension_sub: 'utm_campaign',
+  value_dict: false,
+  name: 'utm_campaign',
+  id: 0,
+  text: 'utm_campaign',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}, {
+  dimension_sub: 'utm_content',
+  value_dict: false,
+  name: 'utm_content',
+  id: 0,
+  text: 'utm_content',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}, {
+  dimension_sub: 'utm_term',
+  value_dict: false,
+  name: 'utm_term',
+  id: 0,
+  text: 'utm_term',
+  category: 'fixed',
+  type: 1,
+  alias_name: null
+}];