@arcblock/ux 0.78.25 → 1.6.59

package/src/Util/index.js

@@ -0,0 +1,281 @@
+/* eslint-disable no-bitwise */
+import padStart from 'lodash/padStart';
+
+let dateTool = null;
+
+export function parseQuery(str) {
+  return str
+    .replace(/^\?/, '')
+    .split('&')
+    .map(x => x.split('='))
+    .filter(([key]) => !!key)
+    .reduce((memo, x) => {
+      const key = x[0];
+      const value = decodeURIComponent(x[1]) || true;
+      memo[key] = value;
+      return memo;
+    }, {});
+}
+
+/**
+ * @param {number} opts.expireInDays
+ * @param {string} opts.path
+ * @param {domain} opts.domain
+ * @param {boolean} opts.returnDomain if === false, opts.domain will be skipped
+ */
+export function getCookieOptions(expireInDays = 1) {
+  let opts = { expireInDays };
+  if (typeof expireInDays === 'object') {
+    opts = expireInDays;
+  }
+
+  if (opts.path === undefined) {
+    opts.path = '/';
+  }
+
+  if (!opts.expireInDays) {
+    opts.expireInDays = 1;
+  }
+
+  const options = {
+    expires: opts.expireInDays,
+    path: opts.path,
+    domain: opts.domain || '',
+    sameSite: opts.sameSite || 'lax',
+  };
+  if (typeof window === 'undefined' || opts.domain || opts.returnDomain === false) {
+    if (opts.returnDomain === false) {
+      delete options.domain;
+    }
+    return options;
+  }
+
+  const { host } = window.location;
+  if (/^[.:0-9]+$/.test(host)) {
+    options.domain = '';
+  } else {
+    const parts = host.split('.');
+    if (parts.length === 1) {
+      options.domain = '';
+    } else {
+      // Remember the cookie on all sub domains.
+      while (parts.length > 2) {
+        parts.shift();
+      }
+      options.domain = `.${parts.join('.')}`;
+    }
+  }
+
+  return options;
+}
+
+export const getColor = props => {
+  if (props.color) {
+    return props.color;
+  }
+
+  if (props.dark) {
+    return props.theme.palette.common.white;
+  }
+
+  return props.theme.palette.text.primary;
+};
+
+export const getBackground = props => {
+  if (props.background) {
+    return props.background;
+  }
+
+  if (props.dark) {
+    return props.theme.palette.common.black;
+  }
+
+  return props.theme.palette.common.white;
+};
+
+export function mergeProps(props, component, jsonAttrs = []) {
+  const newProps = Object.assign({}, props);
+  Object.keys(component.defaultProps || {}).forEach(x => {
+    if (typeof newProps[x] === 'string' && newProps[x].indexOf('::prop::') === 0) {
+      newProps[x] = component.defaultProps[x];
+    }
+  });
+
+  if (Array.isArray(jsonAttrs)) {
+    jsonAttrs.forEach(x => {
+      if (typeof newProps[x] === 'string') {
+        try {
+          newProps[x] = JSON.parse(newProps[x]);
+        } catch (err) {
+          // Do nothing
+        }
+      }
+    });
+  }
+
+  Object.keys(newProps).forEach(x => {
+    if (typeof newProps[x] === 'string' && newProps[x].indexOf('::prop::') === 0) {
+      newProps[x] = '';
+    }
+  });
+
+  return newProps;
+}
+
+export function getCopyright(startYear = 2017) {
+  const currentYear = new Date().getFullYear();
+  return `${currentYear}` === `${startYear}`
+    ? `© ArcBlock ${currentYear}`
+    : `© ArcBlock ${startYear} - ${currentYear}`;
+}
+
+export const getTimezone = () => {
+  if (
+    typeof Intl === 'object' &&
+    typeof Intl.DateTimeFormat === 'function' &&
+    typeof Intl.DateTimeFormat().resolvedOptions === 'function'
+  ) {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+  }
+
+  return '';
+};
+
+export const str2color = str => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  let colour = '#';
+  for (let j = 0; j < 3; j++) {
+    const value = (hash >> (j * 8)) & 0xff;
+    colour += `00${value.toString(16)}`.substr(-2);
+  }
+  return colour;
+};
+
+export const formatUptime = uptime => {
+  const total = Math.round(uptime / 1000);
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor((total - hours * 3600) / 60);
+  const seconds = total % 60;
+  return `${padStart(hours, 2, '0')}:${padStart(minutes, 2, '0')}:${padStart(seconds, 2, '0')}`;
+};
+
+/**
+ * Set the date tool library which support for format() and locale() functions,
+ *  moment and dayjs are recommended.
+ * @param {object} the date tool library
+ */
+export function setDateTool(tool) {
+  dateTool = tool;
+}
+
+export function getDateTool() {
+  return dateTool;
+}
+
+const createDateFormater =
+  format =>
+  (date, { locale, tz }) => {
+    if (dateTool === null) {
+      throw new Error('call setDateTool to set the date tool library, such as: setDateTool(dayjs)');
+    }
+
+    if (!date) {
+      return '-';
+    }
+
+    let instance = dateTool(date);
+
+    if (typeof tz !== 'undefined') {
+      instance = instance.tz(tz);
+    }
+
+    if (typeof locale !== 'undefined') {
+      instance = instance.locale(locale);
+    }
+
+    return instance.format(format);
+  };
+
+/**
+ * Format the time string as `ll` format: MMM D, YYYY
+ * Ensure that the setDateTool() function is called first to set the time tool library.
+ * @param {string} date date string
+ * @param {object} option
+ * @param {string} option.locale, default: en
+ * @param {string} option.tz, default: timzone
+ * @returns formated date string
+ */
+export function formatToDate(date, { locale, tz } = {}) {
+  return createDateFormater('ll')(date, { locale, tz });
+}
+
+/**
+ * Format the time string as `lll` format: MMM D, YYYY h:mm A
+ * Ensure that the setDateTool() function is called first to set the time tool library.
+ * @param {string} date date string
+ * @param {object} option
+ * @param {string} option.locale, default: en
+ * @param {string} option.tz, default: timzone
+ * @returns formated date string
+ */
+export function formatToDatetime(date, { locale, tz } = {}) {
+  return createDateFormater('lll')(date, { locale, tz });
+}
+
+export function openWebWallet({
+  webWalletUrl,
+  action = 'login',
+  locale = 'en',
+  url,
+  windowFeatures,
+}) {
+  // web wallet extension
+  const webWalletExtension = window?.ABT_DEV || window.ABT;
+  if (webWalletExtension && typeof webWalletExtension.open === 'function') {
+    webWalletExtension.open({
+      action,
+      locale,
+      url: encodeURIComponent(url),
+    });
+
+    return;
+  }
+
+  const defaultWindowFeatures = {
+    toolbar: 'no',
+    location: 'no',
+    status: 'no',
+    menubar: 'no',
+    scrollbars: 'yes',
+    resizable: 'yes',
+    // iphone 8plus size
+    width: 414,
+    height: 736,
+  };
+  const windowUrl = `${webWalletUrl}?action=${action}&locale=${locale}&url=${encodeURIComponent(
+    url
+  )}`;
+  const mergedWindowFeatures = Object.assign({}, defaultWindowFeatures, windowFeatures);
+  const getWindowWidth = win => {
+    return (
+      win.innerWidth || win.document.documentElement.clientWidth || win.document.body.clientWidth
+    );
+  };
+  // 默认在浏览器右上角弹出窗口
+  if (!('left' in mergedWindowFeatures)) {
+    const winWidth = getWindowWidth(window.top || window);
+    const winLeft = window.screenLeft || window.screenX;
+    mergedWindowFeatures.left = winWidth + winLeft - mergedWindowFeatures.width;
+  }
+  if (!('top' in mergedWindowFeatures)) {
+    const winTop = window.screenTop || window.screenY;
+    mergedWindowFeatures.top = winTop;
+  }
+  const strWindowFeatures = Object.keys(mergedWindowFeatures)
+    .map(key => `${key}=${mergedWindowFeatures[key]}`)
+    .join(',');
+  window.open(windowUrl, 'targetWindow', strWindowFeatures);
+}

package/src/Video/index.js

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Player from 'react-player';
+import styled from 'styled-components';
+
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+import { mergeProps } from '../Util';
+
+const { string, number, array, oneOfType, object } = PropTypes;
+
+export default function Video(props) {
+  const newProps = mergeProps(props, Video, ['style']);
+  const { url, width, height, style } = newProps;
+  const [loaded, setLoaded] = useState(false);
+
+  const styles = Object.assign({ border: 'none' }, style, {
+    width,
+    height,
+    visibility: loaded ? 'visible' : 'hidden',
+  });
+
+  if (url.indexOf('v.qq.com') > 0) {
+    return (
+      <Placeholder style={{ width, height }}>
+        <iframe
+          title={url}
+          style={styles}
+          src={url}
+          onLoad={() => setLoaded(true)}
+          allowFullScreen="true"
+        />
+        {!loaded && <CircularProgress className="loading-indicator" color="primary" />}
+      </Placeholder>
+    );
+  }
+
+  return (
+    <Placeholder style={{ width, height }}>
+      <Player style={styles} {...newProps} onReady={() => setLoaded(true)} />
+      {!loaded && <CircularProgress className="loading-indicator" color="primary" />}
+    </Placeholder>
+  );
+}
+
+Video.propTypes = {
+  url: oneOfType([string, array, object]).isRequired,
+  width: oneOfType([string, number]),
+  height: oneOfType([string, number]),
+  style: oneOfType([string, object]),
+};
+
+Video.defaultProps = {
+  width: 640,
+  height: 400,
+  style: {},
+};
+
+const Placeholder = styled.div`
+  background-color: #222222;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+
+  .loading-indicator {
+    position: absolute;
+    top: 45%;
+    left: 47%;
+    z-index: 2;
+  }
+`;

package/src/Wallet/Action.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import Typography from '@material-ui/core/Typography';
+
+import logo from './images/abtwallet.png';
+import { mergeProps } from '../Util';
+import colors from '../Colors';
+import Button from '../Button';
+
+export default function WalletAction(props) {
+  const newProps = mergeProps(props, WalletAction, ['style']);
+  const { action, size, textLayout, style = {}, ...rest } = newProps;
+  const styles = Object.assign({}, style, { border: 'none', padding: 0 });
+
+  return (
+    <Button style={styles} {...rest} variant="outlined">
+      <Content size={size} color={styles.color}>
+        <img src={logo} className="wallet-action__logo" alt="DID Wallet" />
+        {textLayout === 'vertical' && (
+          <Typography className="wallet-action__text" component="div">
+            <span className="wallet-action__action">{action} with</span>
+            <span className="wallet-action__title">DID Wallet</span>
+          </Typography>
+        )}
+        {textLayout === 'horizontal' && (
+          <span className="wallet-action__title" style={{ padding: 8 }}>
+            {action} with DID Wallet
+          </span>
+        )}
+      </Content>
+    </Button>
+  );
+}
+
+WalletAction.propTypes = {
+  action: PropTypes.string,
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  textLayout: PropTypes.oneOf(['vertical', 'horizontal']),
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+};
+
+WalletAction.defaultProps = {
+  action: 'Login',
+  textLayout: 'vertical',
+  size: 'medium',
+  style: {},
+};
+
+const sizes = {
+  logo: {
+    small: 32,
+    medium: 44,
+    large: 56,
+    xlarge: 88,
+  },
+  font: {
+    small: 9,
+    medium: 11,
+    large: 13,
+    xlarge: 18,
+  },
+};
+
+const Content = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    opacity: 0.9;
+  }
+
+  .wallet-action__logo {
+    width: auto;
+    height: auto;
+    max-width: ${props => sizes.logo[props.size]}px;
+    margin-left: 5px;
+  }
+
+  .wallet-action__text {
+    padding: 8px;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
+  .wallet-action__action {
+    font-size: ${props => sizes.font[props.size]}px;
+    text-transform: capitalize;
+    margin-bottom: 1px;
+    color: ${props => props.color || colors.primary.main};
+    letter-spacing: 1px;
+  }
+
+  .wallet-action__title {
+    font-size: ${props => sizes.font[props.size] * 1.5}px;
+    text-transform: capitalize;
+    color: ${props => props.color || colors.primary.main};
+    letter-spacing: 1px;
+  }
+`;

package/src/Wallet/Download.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import Typography from '@material-ui/core/Typography';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
+
+import { ReactComponent as AppStoreIcon } from './images/app-store.svg';
+import { ReactComponent as GooglePlayIcon } from './images/google-play.svg';
+import { ReactComponent as AndroidDownloadIcon } from './images/android_download.svg';
+
+import Button from '../Button';
+import { mergeProps } from '../Util';
+
+export default function WalletDownload(props) {
+  const browser = useBrowser();
+  const newProps = mergeProps(props, WalletDownload, ['style']);
+  const { title, children, iosLink, androidLink, androidDownLoadUrl, locale, ...rest } = newProps;
+
+  const isAndroid = browser.mobile.android.phone || browser.mobile.android.tablet;
+  const isIOS = browser.mobile.apple.phone || browser.mobile.apple.tablet;
+
+  return (
+    <Container {...rest}>
+      <div className="download-text">
+        {!!title && (
+          <Typography className="download-title" component="div">
+            {title}
+          </Typography>
+        )}
+        {children && (
+          <Typography className="download-extra" component="div">
+            {children}
+          </Typography>
+        )}
+      </div>
+      {!browser.mobile.any && (
+        <div className="download-store-list">
+          <Button className="download-link" component="a" href={iosLink}>
+            <AppStoreIcon />
+          </Button>
+          {locale === 'zh' && (
+            <Button component="a" className="download-link" href={androidDownLoadUrl}>
+              <AndroidDownloadIcon />
+            </Button>
+          )}
+          {locale === 'en' && (
+            <Button component="a" className="download-link" href={androidLink}>
+              <GooglePlayIcon />
+            </Button>
+          )}
+        </div>
+      )}
+      {isAndroid && (
+        <div className="download-store-list">
+          {locale === 'zh' && (
+            <Button component="a" href={androidDownLoadUrl} variant="outlined" color="primary">
+              本地下载
+            </Button>
+          )}
+          {locale === 'en' && (
+            <Button component="a" href={androidLink} variant="outlined" color="primary">
+              Download
+            </Button>
+          )}
+        </div>
+      )}
+      {isIOS && (
+        <div className="download-store-list">
+          <Button component="a" href={iosLink} variant="outlined" color="primary">
+            Download
+          </Button>
+        </div>
+      )}
+    </Container>
+  );
+}
+
+WalletDownload.propTypes = {
+  title: PropTypes.string,
+  layout: PropTypes.oneOf(['vertical', 'horizontal']),
+  storeLayout: PropTypes.oneOf(['vertical', 'horizontal']),
+  style: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  iosLink: PropTypes.string,
+  androidLink: PropTypes.string,
+  androidDownLoadUrl: PropTypes.string,
+  locale: PropTypes.oneOf(['en', 'zh']),
+};
+
+WalletDownload.defaultProps = {
+  title: 'Download DID Wallet',
+  layout: 'vertical',
+  storeLayout: 'horizontal',
+  iosLink: 'https://itunes.apple.com/app/id1460083542',
+  androidLink: 'https://play.google.com/store/apps/details?id=com.arcblock.wallet.app.product',
+  androidDownLoadUrl: 'https://releases.arcblockio.cn/arcwallet_android/latest/abtwallet.apk',
+  style: {},
+  locale: 'zh',
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: ${props => (props.layout === 'vertical' ? 'column' : 'row')};
+  align-items: center;
+
+  .download-title {
+    margin-right: ${props => (props.layout === 'vertical' ? '0' : '16px')};
+    margin-bottom: ${props => (props.layout === 'vertical' ? '16px' : '0')};
+  }
+
+  .download-store-list {
+    display: flex;
+    flex-direction: ${props => (props.storeLayout === 'vertical' ? 'column' : 'row')};
+    justify-content: space-between;
+    align-items: center;
+
+    .download-link {
+      padding: 0;
+      margin: 0;
+
+      margin-right: ${props => (props.storeLayout === 'vertical' ? '0' : '16px')};
+      margin-bottom: ${props => (props.storeLayout === 'vertical' ? '16px' : '0')};
+
+      &:last-of-type {
+        margin-right: 0;
+        margin-bottom: 0;
+      }
+    }
+  }
+`;

package/src/Wallet/Open.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
+import Fab from '@material-ui/core/Fab';
+
+export default function OpenInWallet({ locale, link }) {
+  const buttonText = locale === 'zh' ? '在 ABT 钱包打开' : 'Open in DID Wallet';
+  const browser = useBrowser();
+
+  if (browser.mobile.any && !browser.wallet && !browser.wechat) {
+    const deepLink = `abt://abtwallet.io/i?action=requestOpenUrl&url=${encodeURIComponent(link)}`;
+
+    return (
+      <Button
+        size="small"
+        href={deepLink}
+        variant="extended"
+        color="primary"
+        rounded
+        target="_blank"
+        className="open-in-wallet-button">
+        {buttonText}
+      </Button>
+    );
+  }
+  return null;
+}
+
+OpenInWallet.propTypes = {
+  locale: PropTypes.oneOf(['en', 'zh']),
+  link: PropTypes.string.isRequired,
+};
+
+OpenInWallet.defaultProps = {
+  locale: 'zh',
+};
+
+const Button = styled(Fab)`
+  && {
+    font-size: 12px;
+    position: fixed;
+    bottom: 24px;
+    left: 50%;
+    transform-origin: 50% 50%;
+    transform: translateX(-50%);
+    min-width: 120px;
+    z-index: ${props => props.theme.zIndex.tooltip};
+  }
+`;

package/src/Wallet/images/android_download.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="172px" height="50px" viewBox="0 0 172 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>android</title>
+    <desc>Created with Sketch.</desc>
+    <g id="android" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M172,44.3280578 C172,47.460585 169.20589,50 165.759181,50 L6.24081931,50 C4.58565112,50 2.99827431,49.4024221 1.82789366,48.3387266 C0.657513004,47.2750311 0,45.8323504 0,44.3280578 L0,5.67194218 C0,2.53941501 2.79410998,0 6.24081931,0 L165.759181,0 C169.20589,0 172,2.53941501 172,5.67194218 L172,44.3280578" id="bg" fill="#100F0D" fill-rule="nonzero"></path>
+        <text id="Android" fill="#FFFFFF" font-family="Arial-BoldMT, Arial" font-size="23.4412266" font-weight="bold">
+            <tspan x="63.6237138" y="42.1351959">Android</tspan>
+        </text>
+        <text id="Download-for" fill="#FFFFFF" fill-rule="nonzero" font-family="ArialMT, Arial" font-size="11.7206133" font-weight="normal">
+            <tspan x="64" y="19">Download for</tspan>
+        </text>
+        <g id="Android" transform="translate(13.478705, 3.102215)" fill="#9FC732" fill-rule="nonzero">
+            <g id="shapeB" transform="translate(14.000000, 28.229131) scale(-1, 1) rotate(-180.000000) translate(-14.000000, -28.229131) translate(0.000000, 14.729131)">
+                <path d="M27.0021559,26.7999654 L6.67361202,26.7999654 C6.22172319,26.7999654 5.85537086,26.4342314 5.85537086,25.9833492 L5.85537086,8.97407348 C5.85537086,8.52300474 6.22153629,8.15719149 6.67361202,8.15686385 L10.2979028,8.15686385 L10.2979028,2.42512051 C10.2979028,1.09475625 11.3786473,0.0164193655 12.711387,0.0164193655 C14.0445233,0.0164193655 15.1250695,1.09475625 15.1250695,2.42512051 L15.1250695,8.15686385 L18.5009338,8.15686385 L18.5009338,2.42512051 C18.5009338,1.09475625 19.5816783,0.0164193655 20.914418,0.0164193655 C22.2475543,0.0164193655 23.3279023,1.09475625 23.3279023,2.42512051 L23.3279023,8.15686385 L27.0021559,8.15686385 C27.2193934,8.15681136 27.4277485,8.24289313 27.5813587,8.39616104 C27.7349688,8.54942896 27.8211902,8.75731992 27.8211902,8.97407348 L27.8211902,25.9833492 C27.8211902,26.4344951 27.4543091,26.7999654 27.0021559,26.7999654 M2.41368249,26.8043175 C1.08094274,26.8043175 0,25.7257828 0,24.396012 L0,14.6142245 C0,13.2846515 1.08054621,12.2065124 2.41368249,12.2065124 C3.74622398,12.2065124 4.82696846,13.2846515 4.82696846,14.6142245 L4.82696846,24.396012 C4.82696846,25.7259806 3.74642224,26.8043175 2.41368249,26.8043175" id="形状"></path>
+            </g>
+            <g id="shapeA" transform="translate(20.153322, 14.922487) scale(-1, 1) rotate(-180.000000) translate(-20.153322, -14.922487) translate(6.153322, 0.422487)">
+                <path d="M25.2453809,14.8645837 C23.9142872,14.8645837 22.835755,13.7735501 22.835755,12.428369 L22.835755,2.53322312 C22.835755,1.18824212 23.9142872,0.0976088161 25.2453809,0.0976088161 C26.5758807,0.0976088161 27.6548088,1.18824212 27.6548088,2.53322312 L27.6548088,12.428369 C27.6548088,13.7737503 26.5758807,14.8645837 25.2453809,14.8645837 M5.80349633,21.6325137 C6.13763097,21.6374522 6.44849574,21.460055 6.61698905,21.1682882 C6.78548236,20.8765215 6.78548236,20.5156183 6.61698905,20.2238515 C6.44849574,19.9320848 6.13763097,19.7546876 5.80349633,19.7596261 C5.29723671,19.7671087 4.89071419,20.1841693 4.89071419,20.6960699 C4.89071419,21.2079705 5.29723671,21.6250311 5.80349633,21.6325137 L5.80349633,21.6325137 Z M16.7639886,20.6959698 C16.7750405,20.3542555 16.6010357,20.033606 16.3100354,19.8594415 C16.0190351,19.6852771 15.657287,19.6852771 15.3662867,19.8594415 C15.0752864,20.033606 14.9012817,20.3542555 14.9123335,20.6959698 C14.928668,21.2010236 15.3383524,21.6019059 15.8381611,21.6019059 C16.3379697,21.6019059 16.7476541,21.2010236 16.7639886,20.6959698 Z M0.862120431,16.0672821 L20.7800318,16.0672821 C21.2992078,16.0672821 21.6869569,16.5509629 21.5798756,17.0654617 C20.9213553,20.239905 18.9224386,22.9154586 16.2093828,24.4611562 L17.9119951,27.5667596 C17.9674152,27.6677193 17.9808653,27.7868122 17.9493827,27.8978044 C17.9179001,28.0087966 17.8440674,28.1025826 17.7441486,28.1585032 C17.6443377,28.2146597 17.5265257,28.2283484 17.4167169,28.1965478 C17.306908,28.1647472 17.2141307,28.0900719 17.1588633,27.9890047 L15.4433854,24.8597877 C13.9950906,25.5385247 12.4175937,25.8891002 10.821274,25.8869841 C9.22481328,25.8892295 7.6471602,25.5386493 6.19876682,24.8597877 L4.48289309,27.989405 C4.36428298,28.1925314 4.10726669,28.2632426 3.9032069,28.1488902 C3.69914712,28.0345378 3.62224629,27.7767039 3.72976129,27.5673599 L5.43237357,24.4611562 C2.71991151,22.9154586 0.720203086,20.239905 0.0616828527,17.0654617 C-0.0452005035,16.551163 0.342548561,16.0672821 0.862120431,16.0672821" id="形状"></path>
+            </g>
+        </g>
+    </g>
+</svg>