@riil-frontend/component-topology 6.0.0-alpha.3 → 6.0.0-alpha.31

package/es/core/editor/components/Toolbar/widgets/IconSelect/index.js

@@ -0,0 +1,101 @@
+import React, { useState, useEffect, useImperativeHandle } from 'react';
+import styles from "./index.module.scss";
+import PopUpContent from "./popUpContent";
+
+var TopoIconSelect = function TopoIconSelect(props, ref) {
+  // 传入参数
+  var value = props.value,
+      iconList = props.iconList,
+      onChange = props.onChange;
+
+  var _useState = useState(value),
+      valueData = _useState[0],
+      setValue = _useState[1];
+
+  var _useState2 = useState(),
+      selectItem = _useState2[0],
+      setSelect = _useState2[1];
+
+  var _useState3 = useState(false),
+      visible = _useState3[0],
+      setVisible = _useState3[1];
+
+  useEffect(function () {
+    if (value) {
+      for (var i = 0; i < iconList.length; i++) {
+        var icons = iconList[i].icons;
+        var flag = false;
+
+        for (var m = 0; m < icons.length; m++) {
+          if (value === icons[m].id) {
+            flag = true;
+            setSelect(icons[m]);
+            break;
+          }
+        }
+
+        if (flag) {
+          break;
+        }
+      }
+    }
+  }, [value]);
+  useImperativeHandle(ref, function () {
+    return {
+      getSelectData: getSelectData
+    };
+  });
+
+  var handleChange = function handleChange(v) {
+    console.log('handleChange: ', v);
+
+    if (typeof onChange === 'function') {
+      onChange(v.id);
+    }
+
+    setSelect(v);
+    setValue(v.id);
+    setVisible(false);
+  };
+
+  var getSelectData = function getSelectData() {
+    return valueData;
+  };
+
+  var valueRender = function valueRender(v) {
+    return selectItem ? /*#__PURE__*/React.createElement("span", {
+      className: styles.selected
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.iconImgWrapper
+    }, /*#__PURE__*/React.createElement("img", {
+      className: styles.iconImg,
+      alt: "",
+      src: selectItem === null || selectItem === void 0 ? void 0 : selectItem.url
+    })), /*#__PURE__*/React.createElement("span", {
+      className: styles.icontitle
+    }, selectItem === null || selectItem === void 0 ? void 0 : selectItem.name)) : null;
+  };
+
+  var onVisibleChange = function onVisibleChange(v) {
+    setVisible(v);
+  };
+
+  var popupContent = /*#__PURE__*/React.createElement(PopUpContent, {
+    iconList: iconList,
+    selectedId: selectItem === null || selectItem === void 0 ? void 0 : selectItem.id,
+    onChange: handleChange
+  });
+  var popupProps = {
+    triggerClickKeycode: [13, 32, 40] // space, enter, down-arrow
+
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.TopoIconSelect
+  }, /*#__PURE__*/React.createElement(PopUpContent, {
+    iconList: iconList,
+    selectedId: selectItem === null || selectItem === void 0 ? void 0 : selectItem.id,
+    onChange: handleChange
+  }));
+};
+
+export default /*#__PURE__*/React.forwardRef(TopoIconSelect);

package/es/core/editor/components/Toolbar/widgets/IconSelect/index.module.scss

@@ -0,0 +1,153 @@
+@import "@alifd/next/variables";
+
+.TopoIconSelect {
+
+
+  .iconSelect {}
+
+
+
+}
+
+.iconCollapse {
+  width: 240px;
+  max-height: 218px;
+  overflow-y: auto;
+  border: none;
+
+  :global {
+    .#{$css-prefix}collapse-panel-expanded {
+      .#{$css-prefix}collapse-panel-content {
+        padding: 0px 0px 5px 0px;
+      }
+    }
+
+    .#{$css-prefix}collapse-panel {
+      border-top: none;
+      background-color: #FFF;
+    }
+
+    .#{$css-prefix}collapse-panel-title {
+      background: none;
+      font-size: 12px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #4D6277;
+      line-height: 17px;
+    }
+
+    .#{$css-prefix}collapse-panel:not(:first-child) {
+      border-top: none;
+    }
+
+    .#{$css-prefix}collapse-panel-content {
+      padding: 0px 0px 5px 0px;
+    }
+  }
+}
+
+.iconSelect {
+  width: 100%;
+
+  .selected {
+    height: 26px;
+    display: block;
+
+    .iconImgWrapper {
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      text-align: center;
+      // vertical-align: middle;
+    }
+
+    .iconImg {
+      display: inline-block;
+      width: auto;
+      height: auto;
+      max-width: 18px;
+      max-height: 18px;
+      vertical-align: middle;
+    }
+
+    .icontitle {
+      text-align: left;
+      vertical-align: top;
+      display: inline-block;
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #4D6277;
+      //margin-top: 2px;
+      line-height: 26px;
+      margin-left: 7px;
+    }
+
+    :global {
+      .#{$css-prefix}tag {
+        background: none;
+      }
+    }
+  }
+}
+
+
+
+.collPanel {
+  padding: 5px;
+}
+
+
+
+
+.iconli {
+  width: 52px;
+  height: 68px;
+  text-align: center;
+  //border: 2px solid #FFF;
+  overflow: hidden;
+  cursor: pointer;
+
+  .iconImgWrapper {
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    margin: 5px 8px 5px 8px;
+  }
+
+  .iconImg {
+    display: inline-block;
+    width: auto;
+    height: auto;
+    max-width: 32px;
+    max-height: 32px;
+    vertical-align: middle;
+  }
+
+  .icontitle {
+    width: 48px;
+    max-width: 50px;
+    text-align: center;
+    font-size: 12px;
+    -webkit-text-size-adjust: none;
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #4D6277;
+    line-height: 11px;
+  }
+
+
+  // float: left;
+}
+
+.selectedTag {
+  border-radius: 4px;
+  // border: 2px solid #4C89FF;
+  background-color: #F2F7FD;
+}

package/es/core/editor/components/Toolbar/widgets/IconSelect/popUpContent.js

@@ -0,0 +1,49 @@
+import _Box from "@alifd/next/es/box";
+import _Collapse from "@alifd/next/es/collapse";
+import React from 'react';
+import styles from "./index.module.scss";
+var Panel = _Collapse.Panel;
+
+function PopUpContent(props) {
+  var iconList = props.iconList,
+      onChange = props.onChange,
+      selectedId = props.selectedId;
+
+  var itemOnClick = function itemOnClick(e) {
+    onChange(e);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Collapse, {
+    className: styles.iconCollapse
+  }, iconList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Panel, {
+      title: item.name,
+      key: index,
+      className: styles.collPanel
+    }, /*#__PURE__*/React.createElement(_Box, {
+      spacing: 4,
+      direction: "row",
+      wrap: true
+    }, item.icons.map(function (icon, idx) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: idx,
+        className: styles.iconli + " " + (selectedId === icon.id ? styles.selectedTag : ''),
+        onClick: function onClick() {
+          itemOnClick(icon);
+        },
+        title: icon.name
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.iconImgWrapper
+      }, /*#__PURE__*/React.createElement("img", {
+        className: styles.iconImg,
+        alt: "",
+        src: icon.url,
+        size: "xxl"
+      })), /*#__PURE__*/React.createElement("span", {
+        className: styles.icontitle
+      }, icon.name));
+    })));
+  })));
+}
+
+export default PopUpContent;

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutSettings.js

@@ -0,0 +1,99 @@
+import _Form from "@alifd/next/es/form";
+import _Radio from "@alifd/next/es/radio";
+import React, { useState, useEffect } from 'react';
+import TemplateGroup from "./LayoutTagImageSelect";
+import styles from "./LayoutSettings.module.scss";
+var LAYOUTS = {
+  circular: '星型布局',
+  hierarchical: '均衡布局',
+  toward: '树形布局',
+  rectangle: '分层排布'
+};
+var TREE_LAYOUT_OPTIONS = [{
+  value: 'east',
+  label: '横向'
+}, {
+  value: 'south',
+  label: '纵向'
+}];
+
+var LayoutSettings = function LayoutSettings(props) {
+  var _props$layout = props.layout,
+      layout = _props$layout === void 0 ? {} : _props$layout,
+      onChange = props.onChange,
+      regionId = props.regionId,
+      size = props.size,
+      disabled = props.disabled;
+  var layoutId = layout.id,
+      layoutOptions = layout.options; // const [value, setValue] = useState();
+
+  var handleChange = function handleChange(data) {
+    onChange && onChange(data);
+  };
+
+  var onLayoutSelect = function onLayoutSelect(id) {
+    // console.log("onLayoutSelect", id, layout, value);
+    var options;
+
+    if (id === 'toward') {
+      options = {
+        subId: TREE_LAYOUT_OPTIONS[0].value
+      };
+    } // setValue(id);
+
+
+    handleChange({
+      id: id,
+      options: options
+    });
+  };
+
+  var layoutGroup = Object.keys(LAYOUTS).map(function (id) {
+    return {
+      id: id,
+      name: LAYOUTS[id],
+      icon: "layout_" + id,
+      selected: layoutId === id
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['layout-setting-template-group']
+  }, /*#__PURE__*/React.createElement(TemplateGroup, {
+    dataSource: layoutGroup,
+    value: layoutId,
+    size: size,
+    disabled: disabled,
+    onChange: onLayoutSelect,
+    boxProps: {
+      spacing: 12,
+      className: styles.tagBox
+    },
+    tagProps: {
+      className: styles.tag,
+      style: {
+        background: '#FFF'
+      },
+      type: 'primary'
+    },
+    itemProps: {
+      className: styles.card,
+      iconClassName: styles.icon,
+      textClassName: styles.text
+    }
+  }), layoutId === 'toward' ? /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u5E03\u5C40\u65B9\u5411"
+  }, /*#__PURE__*/React.createElement(_Radio.Group, {
+    dataSource: TREE_LAYOUT_OPTIONS,
+    defaultValue: layoutOptions.subId || TREE_LAYOUT_OPTIONS[0].value,
+    onChange: function onChange(subId) {
+      return handleChange({
+        id: layoutId,
+        options: {
+          subId: subId
+        }
+      });
+    }
+  })) : null);
+};
+
+export default LayoutSettings;

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutSettings.module.scss

@@ -0,0 +1,70 @@
+@import "@alifd/next/variables";
+@import '@alifd/next/reset.scss';
+
+.label {
+  margin: 0 10px;
+}
+
+.tagBox {
+  color: #4D6277;
+
+
+  :global {
+    .checked {
+      // border: 2px solid $color-brand1-5 !important;
+      color: #4D6277 !important;
+      border-color: #fff !important;
+      background:#F2F7FD !important;
+    }
+  }
+}
+
+.tag {
+  // border: 2px solid $color-gitfill1-1 !important;
+  border-color: #fff !important;
+  color: #4D6277;
+
+  &:hover {
+    background-color: $color-brand1-1 !important;
+    border-color: #fff !important;
+    // border: 2px solid #FFFFFF;
+  }
+
+  &:active {
+    background-color: rgba(76, 137, 255, 0.1) !important;
+    border-color: #fff !important;
+    // border: 2px solid $color-brand1-5 !important;
+    color: $color-fill1-1;
+  }
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  width: 64px;
+  height: 76px;
+  border: none;
+  padding-top: 12px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $color-brand1-1;
+  }
+
+  &:active {
+    background-color: rgba(76, 137, 255, 0.1);
+  }
+}
+
+.icon {
+  width: 30px;
+}
+
+.text {
+  height: 12px;
+  line-height: 12px;
+  font-size: 12px;
+  margin-top: 8px;
+  color: $color-text1-3;
+  outline: none;
+}

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTagImageSelect/index.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataSource", "onChange", "size", "boxProps", "tagProps", "itemProps", "ItemComponent", "disabled", "value"];
+import React from 'react';
+import TemplateButton from "../LayoutTemplateButton";
+import TagSelect from "../LayoutTagSelect";
+import styles from "./index.module.scss";
+
+var TagImageSelect = function TagImageSelect(props) {
+  var dataSource = props.dataSource,
+      onChange = props.onChange,
+      size = props.size,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps,
+      itemProps = props.itemProps,
+      ItemComponent = props.ItemComponent,
+      disabled = props.disabled,
+      value = props.value,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var Item = ItemComponent || TemplateButton;
+  return /*#__PURE__*/React.createElement(TagSelect, _extends({}, otherProps, {
+    onChange: onChange,
+    className: styles.tagSelect,
+    value: value,
+    disabled: disabled,
+    dataSource: dataSource.map(function (item) {
+      return {
+        key: item.id,
+        content: /*#__PURE__*/React.createElement(Item, _extends({
+          key: item.id
+        }, item, {
+          size: size
+        }, itemProps), item.name)
+      };
+    }),
+    boxProps: boxProps,
+    tagProps: tagProps
+  }));
+};
+
+export default TagImageSelect;

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTagImageSelect/index.module.scss

@@ -0,0 +1,7 @@
+.name {
+  margin: 20px 0 0 10px;
+}
+
+.tagSelect {
+  border: none;
+}

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTagSelect/index.js

@@ -0,0 +1,75 @@
+import _Box from "@alifd/next/es/box";
+import _extends from "@babel/runtime/helpers/extends";
+import _Tag from "@alifd/next/es/tag";
+
+/* eslint-disable eqeqeq */
+import React, { useState, useEffect, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import "./index.scss";
+import classNames from 'classnames';
+var SelectableTag = _Tag.Selectable;
+
+var TagSelect = function TagSelect(props) {
+  var _onChange = props.onChange,
+      value = props.value,
+      defaultValue = props.defaultValue,
+      dataSource = props.dataSource,
+      size = props.size,
+      disabled = props.disabled,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps;
+
+  var _useState = useState(value || defaultValue),
+      current = _useState[0],
+      setCurrent = _useState[1];
+
+  useEffect(function () {
+    // if (value) {
+    // }
+    setCurrent(value);
+  }, [value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "tag-select-wrap"
+  }, /*#__PURE__*/React.createElement(_Box, _extends({
+    spacing: 12,
+    wrap: true,
+    direction: "row"
+  }, boxProps), dataSource.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "tag-select-item",
+      key: "wrap-" + item.key
+    }, /*#__PURE__*/React.createElement(SelectableTag, _extends({
+      key: item.key,
+      checked: current === item.key // eslint-disable-next-line eqeqeq
+      ,
+      disabled: disabled(item.key),
+      onChange: function onChange(checked) {
+        _onChange && _onChange(item.key);
+
+        if (!('value' in props)) {
+          setCurrent(item.key);
+        }
+      }
+    }, tagProps), /*#__PURE__*/React.createElement("span", {
+      className: classNames({
+        'tag-select-texts': disabled(item.key)
+      })
+    }, item.content)));
+  })));
+};
+
+TagSelect.propTypes = {
+  // eslint-disable-next-line react/require-default-props
+  onChange: PropTypes.func,
+  // eslint-disable-next-line react/require-default-props
+  value: PropTypes.string,
+  // eslint-disable-next-line react/require-default-props
+  defaultValue: PropTypes.string,
+  // eslint-disable-next-line react/require-default-props
+  dataSource: PropTypes.array,
+  boxProps: PropTypes.any
+};
+TagSelect.defaultProps = {
+  boxProps: {}
+};
+export default TagSelect;

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTagSelect/index.scss

@@ -0,0 +1,32 @@
+/* write style here */
+@import '@alifd/next/variables.scss';
+
+.tag-select-wrap {
+  .tag-select-item {
+    text-align: -webkit-center;
+
+    .#{$css-prefix}tag {
+      height: auto;
+      line-height: 0;
+
+      &::before {
+        z-index: 1;
+      }
+
+      &::after {
+        z-index: 1;
+      }
+
+      .#{$css-prefix}tag-body {
+        width: 100%;
+        padding: 0;
+
+        .tag-select-img {}
+      }
+      .tag-select-texts{
+        color: #C9CED2;
+        opacity: 0.6;
+      }
+    }
+  }
+}

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTemplateButton/Icon.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Icons from "./assets";
+
+var Icon = function Icon(props) {
+  var _props$alt = props.alt,
+      alt = _props$alt === void 0 ? '' : _props$alt,
+      img = props.img,
+      type = props.type,
+      className = props.className,
+      rotate = props.rotate;
+  var style = rotate ? {
+    transform: "rotate(" + rotate + "deg)"
+  } : null;
+  var src = img || Icons[type];
+  return /*#__PURE__*/React.createElement("img", {
+    className: className,
+    style: style,
+    src: src,
+    alt: alt
+  });
+};
+
+export default Icon;

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTemplateButton/assets/index.js

@@ -0,0 +1,10 @@
+import IconLayoutCircular from "./topo_layout_circular.svg";
+import IconLayoutHierarchical from "./topo_layout_hierarchical.svg";
+import IconLayoutToward from "./topo_layout_toward.svg";
+import IconLayoutRectangle from "./topo_layout_rectangle.svg";
+export default {
+  'layout_rectangle': IconLayoutRectangle,
+  'layout_circular': IconLayoutCircular,
+  'layout_hierarchical': IconLayoutHierarchical,
+  'layout_toward': IconLayoutToward
+};

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTemplateButton/assets/topo_layout_circular.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="46px" height="46px" viewBox="0 0 46 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>星形布局</title>
+    <desc>Created with Sketch.</desc>
+    <g id="星形布局" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M24,35 C26.7614237,35 29,37.2385763 29,40 C29,42.7614237 26.7614237,45 24,45 C21.2385763,45 19,42.7614237 19,40 C19,37.2385763 21.2385763,35 24,35 Z M5.7,20.75 C8.46142375,20.75 10.7,22.9885763 10.7,25.75 C10.7,28.5114237 8.46142375,30.75 5.7,30.75 C2.93857625,30.75 0.7,28.5114237 0.7,25.75 C0.7,22.9885763 2.93857625,20.75 5.7,20.75 Z M39.7,20.75 C42.4614237,20.75 44.7,22.9885763 44.7,25.75 C44.7,28.5114237 42.4614237,30.75 39.7,30.75 C36.9385763,30.75 34.7,28.5114237 34.7,25.75 C34.7,22.9885763 36.9385763,20.75 39.7,20.75 Z M12.7,1.75 C15.4614237,1.75 17.7,3.98857625 17.7,6.75 C17.7,9.51142375 15.4614237,11.75 12.7,11.75 C9.93857625,11.75 7.7,9.51142375 7.7,6.75 C7.7,3.98857625 9.93857625,1.75 12.7,1.75 Z M33.7,1.75 C36.4614237,1.75 38.7,3.98857625 38.7,6.75 C38.7,9.51142375 36.4614237,11.75 33.7,11.75 C30.9385763,11.75 28.7,9.51142375 28.7,6.75 C28.7,3.98857625 30.9385763,1.75 33.7,1.75 Z" id="形状" fill="#DAE4F0"></path>
+        <path d="M16.7357263,10.8944619 L21.3748996,16.8328361 C21.7316803,16.7635612 22.1002387,16.7272727 22.4772727,16.7272727 C23.3881144,16.7272727 24.2494913,16.939057 25.0148465,17.3160689 L29.9194782,11.0383855 C28.7414934,9.98544349 28,8.45431428 28,6.75 C28,3.57436269 30.5743627,1 33.75,1 C36.9256373,1 39.5,3.57436269 39.5,6.75 C39.5,9.92563731 36.9256373,12.5 33.75,12.5 C33.0015307,12.5 32.2864624,12.3569935 31.6306281,12.0968134 L26.6283721,18.498458 C27.5114744,19.4195559 28.0909999,20.6339958 28.2061533,21.9809823 L34.5845072,23.2211517 C35.5202467,21.3133843 37.4817447,20 39.75,20 C42.9256373,20 45.5,22.5743627 45.5,25.75 C45.5,28.9256373 42.9256373,31.5 39.75,31.5 C36.5743627,31.5 34,28.9256373 34,25.75 C34,25.5475907 34.0104585,25.3476242 34.0308645,25.1506112 L28.0278628,23.9839192 C27.5340506,25.8075306 26.1655187,27.2715341 24.4003971,27.8978 L24.4002399,34.0363596 C27.2697409,34.3593234 29.5,36.7942092 29.5,39.75 C29.5,42.9256373 26.9256373,45.5 23.75,45.5 C20.5743627,45.5 18,42.9256373 18,39.75 C18,37.0393437 19.8756718,34.766774 22.3999234,34.159383 L22.3996823,28.2252901 L22.256717,28.2231206 C19.7716464,28.129399 17.690226,26.4586024 16.9843891,24.1826643 L11.4788805,25.2537095 C11.4928642,25.4172811 11.5,25.5828072 11.5,25.75 C11.5,28.9256373 8.92563731,31.5 5.75,31.5 C2.57436269,31.5 3.55271368e-15,28.9256373 3.55271368e-15,25.75 C3.55271368e-15,22.5743627 2.57436269,20 5.75,20 C8.05582451,20 10.0446459,21.3572518 10.9611414,23.3164329 L16.734097,22.1946516 C16.828014,20.2542218 17.8837931,18.566218 19.4349009,17.5971737 L15.071367,12.0121621 C14.3614134,12.3258116 13.5760486,12.5 12.75,12.5 C9.57436269,12.5 7,9.92563731 7,6.75 C7,3.57436269 9.57436269,1 12.75,1 C15.9256373,1 18.5,3.57436269 18.5,6.75 C18.5,8.3781911 17.8232649,9.84832225 16.7357263,10.8944619 Z M23.75,35.75 C21.540861,35.75 19.75,37.540861 19.75,39.75 C19.75,41.959139 21.540861,43.75 23.75,43.75 C25.959139,43.75 27.75,41.959139 27.75,39.75 C27.75,37.540861 25.959139,35.75 23.75,35.75 Z M5.75,21.75 C3.540861,21.75 1.75,23.540861 1.75,25.75 C1.75,27.959139 3.540861,29.75 5.75,29.75 C7.959139,29.75 9.75,27.959139 9.75,25.75 C9.75,23.540861 7.959139,21.75 5.75,21.75 Z M39.75,21.75 C37.540861,21.75 35.75,23.540861 35.75,25.75 C35.75,27.959139 37.540861,29.75 39.75,29.75 C41.959139,29.75 43.75,27.959139 43.75,25.75 C43.75,23.540861 41.959139,21.75 39.75,21.75 Z M22.4772727,18.4772727 C20.2681337,18.4772727 18.4772727,20.2681337 18.4772727,22.4772727 C18.4772727,24.6864117 20.2681337,26.4772727 22.4772727,26.4772727 C24.6864117,26.4772727 26.4772727,24.6864117 26.4772727,22.4772727 C26.4772727,20.2681337 24.6864117,18.4772727 22.4772727,18.4772727 Z M12.75,2.75 C10.540861,2.75 8.75,4.540861 8.75,6.75 C8.75,8.959139 10.540861,10.75 12.75,10.75 C14.959139,10.75 16.75,8.959139 16.75,6.75 C16.75,4.540861 14.959139,2.75 12.75,2.75 Z M33.75,2.75 C31.540861,2.75 29.75,4.540861 29.75,6.75 C29.75,8.959139 31.540861,10.75 33.75,10.75 C35.959139,10.75 37.75,8.959139 37.75,6.75 C37.75,4.540861 35.959139,2.75 33.75,2.75 Z" id="形状" fill="#BACCE7"></path>
+    </g>
+</svg>