ds-web-all 1.0.0

package/lib/components/RichText/index.js

@@ -0,0 +1,446 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("antd/es/spin/style");
+var _spin = _interopRequireDefault(require("antd/es/spin"));
+require("antd/es/message/style");
+var _message2 = _interopRequireDefault(require("antd/es/message"));
+var _react = _interopRequireWildcard(require("react"));
+var _wangeditor = _interopRequireDefault(require("wangeditor"));
+var _fileRequest = _interopRequireDefault(require("../../common/fileRequest"));
+require("./index.less");
+require("./lib.less");
+var _lib3 = require("./lib");
+var _excluded = ["key", "click"];
+var _this = void 0;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var RICHTEXT_KEY = 'SSHL_RICHTEXT_KEY';
+var COMON_LEN = 10;
+var EMOJI_LEN = 50;
+var editor = null;
+var RichText = function RichText(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    appCode = _ref.appCode,
+    requestUrl = _ref.requestUrl,
+    ossUrl = _ref.ossUrl,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 300 : _ref$minHeight,
+    _ref$showQuickMenu = _ref.showQuickMenu,
+    showQuickMenu = _ref$showQuickMenu === void 0 ? true : _ref$showQuickMenu,
+    _ref$menus = _ref.menus,
+    menus = _ref$menus === void 0 ? ['head',
+    // 标题
+    'bold',
+    // 粗体
+    'fontSize',
+    // 字号
+    // 'fontName', // 字体
+    'italic',
+    // 斜体
+    'underline',
+    // 下划线
+    'strikeThrough',
+    // 删除线
+    'foreColor',
+    // 文字颜色
+    'backColor',
+    // 背景颜色
+    'link',
+    // 插入链接
+    'list',
+    // 列表
+    'justify',
+    // 对齐方式
+    'quote',
+    // 引用
+    // 'emoticon', // 表情
+    'image',
+    // 插入图片
+    'table',
+    // 表格
+    'video',
+    // 插入视频
+    // 'code', // 插入代码
+    'undo',
+    // 撤销
+    'redo' // 重复
+    ] : _ref$menus;
+  // console.log('ossUrl',ossUrl)
+
+  var initData = function initData(list) {
+    var _hisC = [],
+      _hisE = [];
+    list.map(function (m, i) {
+      m.map(function (o, j) {
+        o.map(function (p, k) {
+          list[i][j][k] = _objectSpread(_objectSpread({}, p), {}, {
+            click: 0
+          });
+          if (i < 5) {
+            _hisC.push(list[i][j][k]);
+          } else {
+            _hisE.push(list[i][j][k]);
+          }
+        });
+      });
+    });
+    return [list, _hisC, _hisE];
+  };
+  var initLib = function initLib(_main, _hisC, _hisE) {
+    _hisC = _hisC.sort(function (a, b) {
+      return a.click - b.click;
+    }).slice(0, 10);
+    _hisE = _hisE.sort(function (a, b) {
+      return a.click - b.click;
+    }).slice(0, 30);
+    return [[_hisC, _hisE]].concat(_toConsumableArray(_main));
+  };
+  var decodeHis = function decodeHis() {
+    var ret = [];
+    main.map(function (m, i) {
+      m.map(function (o, j) {
+        o.map(function (p, k) {
+          var key = p.key,
+            click = p.click,
+            d = _objectWithoutProperties(p, _excluded);
+          ret.push("".concat(i, "|").concat(j, "|").concat(k, "|").concat(key, "|").concat(click));
+        });
+      });
+    });
+    window.localStorage.setItem(RICHTEXT_KEY, JSON.stringify(ret));
+  };
+  var encodeHis = function encodeHis() {
+    // 还原历史记录
+    var list = JSON.parse(window.localStorage.getItem(RICHTEXT_KEY));
+    list === null || list === void 0 ? void 0 : list.map(function (item, i) {
+      var d = item.split('|');
+      var o = main[d[0]][d[1]][d[2]];
+      var key = d[3];
+      if (o.key === key) {
+        o.click = d[4];
+      }
+    });
+
+    // 重新计算使用频率
+    var _hisC = [],
+      _hisE = [];
+    main.map(function (m, i) {
+      m.map(function (o, j) {
+        o.map(function (p, k) {
+          if (i < 5) {
+            _hisC.push(main[i][j][k]);
+          } else {
+            _hisE.push(main[i][j][k]);
+          }
+        });
+      });
+    });
+    _hisC = _hisC.sort(function (a, b) {
+      return b.click - a.click;
+    }).slice(0, COMON_LEN);
+    _hisE = _hisE.sort(function (a, b) {
+      return b.click - a.click;
+    }).slice(0, EMOJI_LEN);
+    var _lib = [[_hisC, _hisE]].concat(_toConsumableArray(main));
+    return _lib;
+  };
+  var _initData = initData((0, _lib3.MATLIB)(ossUrl)),
+    _initData2 = _slicedToArray(_initData, 3),
+    main = _initData2[0],
+    hisC = _initData2[1],
+    hisE = _initData2[2];
+  var LIB = initLib(main, hisC, hisE);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isInput = _useState2[0],
+    setIsInput = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    sel = _useState6[0],
+    setSel = _useState6[1];
+  var _useState7 = (0, _react.useState)(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selSub = _useState8[0],
+    setSelsub = _useState8[1];
+  var _useState9 = (0, _react.useState)(LIB),
+    _useState10 = _slicedToArray(_useState9, 2),
+    lib = _useState10[0],
+    setLib = _useState10[1];
+  var selMenu = function selMenu(e, p) {
+    p.stopPropagation();
+    setSel(e);
+    setSelsub(0);
+  };
+  var selSubMenu = function selSubMenu(i, j, p) {
+    p.stopPropagation();
+    setSel(i);
+    setSelsub(j);
+  };
+  (0, _react.useEffect)(function () {
+    // 初始化历史点击率
+    // setLib(encodeHis());
+
+    editor = new _wangeditor.default('#rich-text');
+    editor.config.focus = true;
+    editor.config.showLinkImg = false;
+    editor.config.showLinkVideo = false;
+    editor.config.uploadImgShowBase64 = true; // base 64 存储图片
+    editor.config.uploadImgMaxSize = 50 * 1024 * 1024; // 上传图片大小2M
+    editor.config.uploadVideoMaxSize = 200 * 1024 * 1024;
+    editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif'];
+    editor.config.uploadVideoAccept = ['mp4', 'MP4'];
+    editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
+    editor.config.lineHeights = ['1', '1.15', '1.6', '2', '2.5', '3'];
+    editor.config.onchangeTimeout = 1000; // 修改为 500ms
+    editor.config.uploadImgServer = "".concat(requestUrl, "/web/file/uploadReturnUrl");
+    // 限制一次最多上传 1 张图片
+    editor.config.uploadImgMaxLength = 1;
+    editor.config.uploadVideoServer = "".concat(requestUrl, "/web/file/uploadReturnUrl");
+    editor.config.customAlert = function (s, t) {
+      switch (t) {
+        case 'success':
+          _message2.default.success(s);
+          break;
+        case 'info':
+          _message2.default.info(s);
+          break;
+        case 'warning':
+          if (s.includes('视频')) {
+            _message2.default.warning('错误类型，视频支持格式为mp4');
+            return;
+          }
+          if (s.includes('图片')) {
+            _message2.default.warning('错误类型，图片支持格式为：jpg、jpeg、png、gif');
+            return;
+          }
+          _message2.default.warning(s);
+          break;
+        case 'error':
+          _message2.default.error(s);
+          break;
+        default:
+          _message2.default.info(s);
+          break;
+      }
+    };
+    editor.config.customUploadImg = function (files, insert) {
+      setLoading(true);
+      // files 是 input 中选中的文件列表
+      if (files[0]) {
+        var formData = new FormData();
+        var name = files[0].name;
+        formData.append('file', files[0], name);
+        formData.append('success_action_status', '200');
+        (0, _fileRequest.default)("".concat(requestUrl, "/web/file/uploadReturnUrl?appCode=").concat(appCode), {
+          method: 'POST',
+          data: formData
+        }).then(function (data) {
+          if (data) {
+            // 上传代码返回结果之后，将图片插入到编辑器中
+            insert(data);
+            setLoading(false);
+          }
+        }).catch(function () {
+          setLoading(false);
+          _message2.default.error('上传失败');
+        });
+      } else {
+        setLoading(false);
+        // message.info('请选择要上传的图片');
+      }
+    };
+    editor.config.customUploadVideo = function (files, insert) {
+      setLoading(true);
+      // files 是 input 中选中的文件列表
+      if (files[0]) {
+        var formData = new FormData();
+        var name = files[0].name;
+        formData.append('file', files[0], name);
+        formData.append('success_action_status', '200');
+        (0, _fileRequest.default)("".concat(requestUrl, "/web/file/uploadReturnUrl?appCode=").concat(appCode), {
+          method: 'POST',
+          data: formData
+        }).then(function (data) {
+          if (data) {
+            // 上传代码返回结果之后，将图片插入到编辑器中
+            insert(data);
+            setLoading(false);
+          }
+        }).catch(function () {
+          setLoading(false);
+          _message2.default.error('上传失败');
+        });
+      } else {
+        setLoading(false);
+        // message.info('请选择要上传的图片');
+      }
+    };
+    editor.config.menus = menus;
+
+    // editor.config.fontNames = [
+    //   '黑体',
+    //   '楷体',
+    //   '仿宋',
+    //   'Arial',
+    //   'Tahoma',
+    //   'Verdana',
+    // ];
+    editor.config.lang = {
+      设置标题: 'Title',
+      字号: 'Size',
+      文字颜色: 'Color',
+      设置列表: 'List',
+      有序列表: '',
+      无序列表: '',
+      对齐方式: 'Align',
+      靠左: '',
+      居中: '',
+      靠右: '',
+      正文: 'p',
+      链接文字: 'link text',
+      链接: 'link',
+      上传图片: 'Upload',
+      网络图片: 'Web',
+      图片link: 'image url',
+      插入视频: 'Video',
+      格式如: 'format',
+      上传: 'Upload',
+      创建: 'init'
+    };
+    // 配置 onchange 回调函数
+    editor.config.onchange = function (newHtml) {
+      setIsInput(true);
+      onChange(newHtml);
+      // console.log('newHtml', newHtml);
+    };
+
+    // 一定要创建
+    editor.create();
+    return function () {
+      // 组件销毁时销毁编辑器  注：class写法需要在componentWillUnmount中调用
+      editor.destroy();
+
+      // 保存历史点击率
+      // decodeHis();
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (editor && value && !isInput) {
+      setTimeout(function () {
+        editor.txt.html(value);
+      }, 0);
+    }
+  }, [value]);
+  var insert = function insert(id, key) {
+    // console.log(`${sel} ${selSub} ${id}`)
+
+    var _hisC = [],
+      _hisE = [];
+    main.map(function (m, i) {
+      m.map(function (o, j) {
+        o.map(function (p, k) {
+          // 判断是否是选择样式
+          if (key === p.key) {
+            var html = lib[sel][selSub][id].data;
+
+            // console.log(html)
+            editor.cmd.do('insertHTML', html);
+            if (sel < 6) {
+              editor.txt.append('<br>');
+            }
+
+            // 点击计数器
+            main[i][j][k].click++;
+          }
+          if (i < 5) {
+            _hisC.push(main[i][j][k]);
+          } else {
+            _hisE.push(main[i][j][k]);
+          }
+        });
+      });
+    });
+    _hisC = _hisC.sort(function (a, b) {
+      return b.click - a.click;
+    }).slice(0, COMON_LEN);
+    _hisE = _hisE.sort(function (a, b) {
+      return b.click - a.click;
+    }).slice(0, EMOJI_LEN);
+    var _lib = [[_hisC, _hisE]].concat(_toConsumableArray(main));
+    setLib(_lib);
+  };
+
+  // console.log('lib', lib);
+
+  return /*#__PURE__*/_react.default.createElement(_spin.default, {
+    tip: "Loading...",
+    spinning: loading
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "g-rt",
+    style: {
+      minHeight: showQuickMenu ? minHeight : undefined
+    }
+  }, showQuickMenu && /*#__PURE__*/_react.default.createElement("div", {
+    className: "m-bar"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "m-menu"
+  }, _lib3.MENU_MAIN.map(function (item, i) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: i,
+      className: i == sel ? 'm-item sel' : 'm-item',
+      onClick: selMenu.bind(_this, i)
+    }, item.name, /*#__PURE__*/_react.default.createElement("div", {
+      className: "m-sub_menu"
+    }, item.list.map(function (o, j) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: j,
+        className: "m-sub",
+        onClick: selSubMenu.bind(_this, i, j)
+      }, o.name);
+    })));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "m-wrap",
+    id: "rich-wrap"
+  }, lib[sel][selSub].map(function (item, i) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: sel < 6 && sel > 0 || sel == 0 && selSub == 0 ? 'm-sect' : "m-sect m-emo",
+      key: i,
+      dangerouslySetInnerHTML: {
+        __html: item.data
+      },
+      onClick: insert.bind(_this, i, item.key)
+    });
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "m-richtext",
+    id: "rich-text"
+  })));
+};
+var _default = exports.default = RichText;

package/lib/components/RichText/index.less

@@ -0,0 +1,171 @@
+.__dumi-default-layout {
+  padding-right: 0 !important;
+}
+.__dumi-default-layout-toc {
+  display: none;
+}
+
+.g-rt {
+  display: flex;
+  min-height: 300px;
+  max-height: 100vh;
+  width: 100%;
+  & > div {
+    flex: 1;
+  }
+
+  .m-bar {
+    display: flex;
+    max-width: 350px;
+    flex-direction: column;
+    margin-right: 5px;
+    overflow-y: scroll;
+    max-height: 100vh;
+    z-index: 99;
+    overflow: visible;
+
+    .m-menu {
+      display: flex;
+      height: 32px;
+      .m-item {
+        flex: 1;
+        position: relative;
+        background: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px 0;
+        border-bottom: 2px solid #fff;
+        font-size: 14px;
+        cursor: pointer;
+        transition: 0.3s;
+        min-width: 30px;
+        color: #333;
+        box-sizing: border-box;
+
+        &.sel {
+          border-bottom: 2px solid #ff6600;
+        }
+
+        &:hover > .m-sub_menu {
+          display: block;
+        }
+
+        .m-sub_menu {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          transform: translate(0, 100%);
+          background: rgba(0, 0, 0, 0.7);
+          box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+          color: #fff;
+          transition: 0.2s;
+          z-index: 99999;
+          // width: 150%;
+          width: 100px;
+          display: none;
+          border-radius: 5px;
+
+          &:before {
+            position: absolute;
+            top: -10px;
+            left: calc(25% + 10px);
+            content: '';
+            display: block;
+            height: 0;
+            width: 0;
+            background: transparent;
+            border: 5px solid transparent;
+            border-bottom: 5px solid rgba(0, 0, 0, 0.7);
+          }
+
+          .m-sub {
+            display: flex;
+            padding: 5px 15px;
+            box-sizing: border-box;
+            justify-content: center;
+            align-items: center;
+
+            transition: 0.2s;
+            &:hover {
+              background: #fff;
+              color: #333;
+            }
+          }
+        }
+      }
+    }
+
+    .m-wrap {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      justify-content: center;
+      padding: 10px;
+      background: #eee;
+      margin-top: 5px;
+      overflow-y: scroll;
+
+      .m-sect {
+        width: 100%;
+        background: #fff;
+        // padding: 0 10px;
+        transition: 0.5s;
+        display: flex;
+        flex-direction: column;
+
+        & > div {
+          margin: 10px !important;
+        }
+
+        &.m-emo {
+          width: 32px;
+          height: 32px;
+          margin: unset !important;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: 2px !important;
+          padding: 0 !important;
+        }
+
+        &:hover {
+          box-shadow: 0 0 8px #ff6600;
+        }
+
+        & + .m-sect {
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+
+  .m-richtext {
+    flex: 1;
+    // min-width: 500px;
+    display: flex;
+    flex-direction: column;
+
+    .fn-emoji {
+      vertical-align: text-bottom !important;
+    }
+
+    & > .w-e-text-container {
+      flex: 1;
+    }
+
+    > div:first-child {
+      z-index: 2 !important;
+    }
+
+    > div:nth-child(2) {
+      z-index: 1 !important;
+    }
+  }
+}
+
+.fn-emoji {
+  width: 24px !important;
+  height: 24px !important;
+}