@zcrkey/js-utils 0.0.4 → 0.0.5

package/dist/treeUtil.js

@@ -0,0 +1,185 @@
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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); }
+import { cloneDeep as _cloneDeep, find as _find, get as _get, keyBy as _keyBy } from 'lodash';
+var CrTreeUtil = /*#__PURE__*/function () {
+  function CrTreeUtil() {
+    _classCallCheck(this, CrTreeUtil);
+  }
+  _createClass(CrTreeUtil, null, [{
+    key: "listToTree",
+    value:
+    /**
+     * 列表数据转树形数据
+     * @param list
+     * @param options
+     * @param options.idField 默认值 id
+     * @param options.parentIdField 默认值 parentId
+     * @param options.childrenField 默认值 children
+     * @param options.isCloneDeep 是否需要深拷贝, 默认值为 true
+     * @param options.getData 处理数据
+     * @returns
+     */
+    function listToTree(list, options) {
+      var _ref = options || {},
+        _ref$idField = _ref.idField,
+        idField = _ref$idField === void 0 ? 'id' : _ref$idField,
+        _ref$parentIdField = _ref.parentIdField,
+        parentIdField = _ref$parentIdField === void 0 ? 'parentId' : _ref$parentIdField,
+        _ref$childrenField = _ref.childrenField,
+        childrenField = _ref$childrenField === void 0 ? 'children' : _ref$childrenField,
+        _ref$isCloneDeep = _ref.isCloneDeep,
+        isCloneDeep = _ref$isCloneDeep === void 0 ? true : _ref$isCloneDeep,
+        _ref$getData = _ref.getData,
+        getData = _ref$getData === void 0 ? function (item) {
+          return item;
+        } : _ref$getData;
+      var listData = isCloneDeep ? _cloneDeep(list) : list;
+      var treeData = [];
+      var nodeMap = new Map();
+      var _iterator = _createForOfIteratorHelper(listData),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _item = _step.value;
+          var id = _item[idField];
+          var node = _objectSpread(_objectSpread({}, getData(_item)), {}, {
+            __origin_id: id,
+            __origin_pid: _item[parentIdField]
+          });
+          nodeMap.set(id, node);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      var _iterator2 = _createForOfIteratorHelper(nodeMap.values()),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _node = _step2.value;
+          var parentId = _node.__origin_pid;
+          if (parentId === undefined || parentId === null || parentId === 0 || !nodeMap.has(parentId)) {
+            treeData.push(_node);
+          } else {
+            var parentNode = nodeMap.get(parentId);
+            if (!parentNode[childrenField]) {
+              parentNode[childrenField] = [];
+            }
+            parentNode[childrenField].push(_node);
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      var clean = function clean(nodes) {
+        var _iterator3 = _createForOfIteratorHelper(nodes),
+          _step3;
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            var node = _step3.value;
+            delete node.__origin_id;
+            delete node.__origin_pid;
+            if (node[childrenField]) {
+              clean(node[childrenField]);
+            }
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
+      };
+      clean(treeData);
+      return treeData;
+    }
+
+    /**
+     * 树形数据转列表数据
+     * @param tree
+     * @param options
+     * @param options.childrenField 默认值 children
+     * @param options.isCloneDeep 是否需要深拷贝, 默认值为 true
+     * @returns
+     */
+  }, {
+    key: "treeToList",
+    value: function treeToList(tree, options) {
+      var _ref2 = options || {},
+        _ref2$childrenField = _ref2.childrenField,
+        childrenField = _ref2$childrenField === void 0 ? 'children' : _ref2$childrenField,
+        _ref2$isCloneDeep = _ref2.isCloneDeep,
+        isCloneDeep = _ref2$isCloneDeep === void 0 ? true : _ref2$isCloneDeep;
+      var result = [];
+      var queue = _toConsumableArray(tree);
+      while (queue.length) {
+        var node = queue.shift();
+        var children = node[childrenField];
+        var _ = node[childrenField],
+          rest = _objectWithoutProperties(node, [childrenField].map(_toPropertyKey));
+        result.push(rest);
+        if (children && children.length) {
+          queue.push.apply(queue, _toConsumableArray(children));
+        }
+      }
+      return isCloneDeep ? _cloneDeep(result) : result;
+    }
+
+    /**
+     * 获取扁平化父数据(包含自身)
+     * @param listData
+     * @param value
+     * @param settings
+     * @param settings.valueField 默认值 value
+     * @param settings.idField 默认值 id
+     * @param settings.parentIdField 默认值 parentId
+     * @param settings.getData 过滤数据
+     */
+  }, {
+    key: "getFlatParentDatas",
+    value: function getFlatParentDatas(listData, value, settings) {
+      if (!Array.isArray(listData) || listData.length === 0 || value == null) {
+        return [];
+      }
+      var options = Object.assign({
+        valueField: 'value',
+        idField: 'id',
+        parentIdField: 'parentId',
+        getData: function getData(item) {
+          return item;
+        }
+      }, settings);
+      var nodeMap = _keyBy(listData, options.valueField);
+      var result = [];
+      var visited = new Set();
+      var current = nodeMap[value];
+      while (current && !visited.has(_get(current, options.idField))) {
+        visited.add(_get(current, options.idField));
+        result.unshift(options.getData(current));
+        var parentId = _get(current, options.parentIdField);
+        current = _find(listData, [options.valueField, parentId]);
+      }
+      return result;
+    }
+  }]);
+  return CrTreeUtil;
+}();
+export { CrTreeUtil as default };

package/dist/util.d.ts

@@ -10,7 +10,7 @@ export default class CrUtil {
      * @param value
      * @returns boolean
      */
-    static isObject<T = any>(value: T): value is T extends Array<any> ? never : T;
+    static isObject<T = any>(value: T): value is T extends object ? (T extends any[] ? never : T) : never;
     /**
      * 判断是否为空对象
      * @param value
@@ -28,31 +28,37 @@ export default class CrUtil {
      * @param value
      * @returns boolean
      */
-    static isDate(value: any): boolean;
+    static isDate(value: unknown): boolean;
     /**
      * 判断是否为字符串
      * @param value
      * @returns boolean
      */
-    static isString(value: any): value is string;
+    static isString(value: unknown): value is string;
     /**
      * 判断是否为数字
      * @param value
      * @returns boolean
      */
-    static isNumber(value: any): value is number;
+    static isNumber(value: unknown): value is number;
     /**
      * 判断是否为文件 File
      * @param value
      * @returns boolean
      */
-    static isFile(value: any): value is File;
+    static isFile(value: unknown): value is File;
     /**
      * 判断是否为 Boolean
      * @param value
      * @returns boolean
      */
-    static isBoolean(value: any): value is boolean;
+    static isBoolean(value: unknown): value is boolean;
+    /**
+     * 判断是否为 Function
+     * @param value
+     * @returns boolean
+     */
+    static isFunction(value: unknown): value is (...args: any[]) => any;
     /**
      * 去掉字符串前后所有空格
      * @param str
@@ -65,9 +71,16 @@ export default class CrUtil {
      * @returns number
      */
     static getArrayDimension(arr: any[]): number;
+    /**
+     * 深拷贝
+     * @param value
+     * @returns
+     */
+    static cloneDeep<T>(value: T): T;
     /**
      * 深拷贝
      * @param target
+     * @deprecated 即将移除，使用 {@link CrUtil.cloneDeep} 替代
      * @returns
      */
     static deepCopy<T = any>(target: T): T;
@@ -78,6 +91,7 @@ export default class CrUtil {
      * @param settings.idField 默认值 id
      * @param settings.pidField 默认值 parentId
      * @param settings.childrenField 默认值 children
+     * @deprecated 即将移除，使用 {@link CrObjUtil.listToTree} 替代
      * @returns
      */
     static listToTreeData(listData: any[], settings?: {
@@ -94,6 +108,7 @@ export default class CrUtil {
      * @param settings.idField 默认值 id
      * @param settings.pidField 默认值 parentId
      * @param settings.childrenField 默认值 children
+     * @deprecated 即将移除，使用 {@link CrObjUtil.treeToList} 替代
      * @returns
      */
     static treeDataToListData(treeData: any[], pid?: string | number, settings?: {
@@ -110,6 +125,7 @@ export default class CrUtil {
      * @param settings.valueField 默认值 value
      * @param settings.idField 默认值 id
      * @param settings.pidField 默认值 parentId
+     * @deprecated 即将移除，使用 {@link CrObjUtil.getFlatParentDatas} 替代
      * @returns
      */
     static getParentNodes<T, R extends Record<string, any>>(listData: R[], value: number | string, settings?: {
@@ -135,6 +151,19 @@ export default class CrUtil {
     static paramsParse(str: string, settings?: {
         ignoreQueryPrefix: boolean;
     }): {};
+    /**
+     * 获取 URL 参数
+     * @param {*} url
+     * @returns
+     * @example
+     * "https://example.com?foo=bar&baz=qux" => {"query":{"foo":"bar","baz":"qux"},"hash":{},"all":{"foo":"bar","baz":"qux"}}
+     * "https://example.com/page?foo=1#/?a=1&b=2" => {"query":{"foo":"1"},"hash":{"/":"","a":"1","b":"2"},"all":{"foo":"1","/":"","a":"1","b":"2"}},
+     */
+    static getQueryParams(url: string): {
+        query: Record<string, any>;
+        hash: Record<string, any>;
+        all: Record<string, any>;
+    };
     /**
      * 版本号比较
      * @param v1
@@ -171,4 +200,10 @@ export default class CrUtil {
      * @returns
      */
     static compareDataDiff(data1: any, data2: any): Record<string, "added" | "removed" | "modified">;
+    /**
+     * 格式化为千分位
+     * @param value
+     * @returns 12345.6789 => 12,345.6789
+     */
+    static fmtThousands(value: number | string | undefined): string;
 }

package/dist/util.js

@@ -18,6 +18,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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); }
+import { cloneDeep as _cloneDeep } from 'lodash';
 import Qs from 'qs';
 var CrUtil = /*#__PURE__*/function () {
   function CrUtil() {
@@ -126,6 +127,17 @@ var CrUtil = /*#__PURE__*/function () {
       return Object.prototype.toString.call(value) === '[object Boolean]';
     }
 
+    /**
+     * 判断是否为 Function
+     * @param value
+     * @returns boolean
+     */
+  }, {
+    key: "isFunction",
+    value: function isFunction(value) {
+      return typeof value === 'function';
+    }
+
     /**
      * 去掉字符串前后所有空格
      * @param str
@@ -158,9 +170,21 @@ var CrUtil = /*#__PURE__*/function () {
       return maxDimension + 1;
     }
 
+    /**
+     * 深拷贝
+     * @param value
+     * @returns
+     */
+  }, {
+    key: "cloneDeep",
+    value: function cloneDeep(value) {
+      return _cloneDeep(value);
+    }
+
     /**
      * 深拷贝
      * @param target
+     * @deprecated 即将移除，使用 {@link CrUtil.cloneDeep} 替代
      * @returns
      */
   }, {
@@ -198,6 +222,7 @@ var CrUtil = /*#__PURE__*/function () {
      * @param settings.idField 默认值 id
      * @param settings.pidField 默认值 parentId
      * @param settings.childrenField 默认值 children
+     * @deprecated 即将移除，使用 {@link CrObjUtil.listToTree} 替代
      * @returns
      */
   }, {
@@ -307,6 +332,7 @@ var CrUtil = /*#__PURE__*/function () {
      * @param settings.idField 默认值 id
      * @param settings.pidField 默认值 parentId
      * @param settings.childrenField 默认值 children
+     * @deprecated 即将移除，使用 {@link CrObjUtil.treeToList} 替代
      * @returns
      */
   }, {
@@ -347,6 +373,7 @@ var CrUtil = /*#__PURE__*/function () {
      * @param settings.valueField 默认值 value
      * @param settings.idField 默认值 id
      * @param settings.pidField 默认值 parentId
+     * @deprecated 即将移除，使用 {@link CrObjUtil.getFlatParentDatas} 替代
      * @returns
      */
   }, {
@@ -400,12 +427,11 @@ var CrUtil = /*#__PURE__*/function () {
         isFilterNonNull: false
       }, settings);
       if (options.isFilterNonNull) {
-        params = Object.fromEntries(Object.entries(params).filter(function (_ref) {
-          var _ref2 = _slicedToArray(_ref, 2),
-            k = _ref2[0],
-            v = _ref2[1];
-          return !(v === null || v === undefined || v === '');
-        }));
+        Object.keys(params).forEach(function (key) {
+          if (params[key] === null || params[key] === undefined || params[key] === '') {
+            delete params[key];
+          }
+        });
       }
       return Qs.stringify(params);
     }
@@ -429,6 +455,72 @@ var CrUtil = /*#__PURE__*/function () {
       return obj;
     }
 
+    /**
+     * 获取 URL 参数
+     * @param {*} url
+     * @returns
+     * @example
+     * "https://example.com?foo=bar&baz=qux" => {"query":{"foo":"bar","baz":"qux"},"hash":{},"all":{"foo":"bar","baz":"qux"}}
+     * "https://example.com/page?foo=1#/?a=1&b=2" => {"query":{"foo":"1"},"hash":{"/":"","a":"1","b":"2"},"all":{"foo":"1","/":"","a":"1","b":"2"}},
+     */
+  }, {
+    key: "getQueryParams",
+    value: function getQueryParams(url) {
+      var query = {};
+      var hash = {};
+      var all = {};
+      var parse = function parse(queryString) {
+        if (!queryString) {
+          return {};
+        }
+        try {
+          return Qs.parse(queryString);
+        } catch (_unused) {
+          var result = {};
+          if (!queryString) return result;
+          queryString.split('&').forEach(function (pair) {
+            if (!pair) return;
+            var _pair$split = pair.split('='),
+              _pair$split2 = _slicedToArray(_pair$split, 2),
+              key = _pair$split2[0],
+              val = _pair$split2[1];
+            if (key) result[decodeURIComponent(key)] = decodeURIComponent(val || '');
+          });
+          return result;
+        }
+      };
+      try {
+        var _url$split = url.split('#'),
+          _url$split2 = _slicedToArray(_url$split, 2),
+          base = _url$split2[0],
+          hashPart = _url$split2[1];
+        var queryPart = base.split('?')[1];
+        Object.assign(query, parse(queryPart));
+        if (hashPart) {
+          var _iterator4 = _createForOfIteratorHelper(hashPart.split('?')),
+            _step4;
+          try {
+            for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+              var part = _step4.value;
+              Object.assign(hash, parse(part));
+            }
+          } catch (err) {
+            _iterator4.e(err);
+          } finally {
+            _iterator4.f();
+          }
+        }
+        Object.assign(all, query, hash);
+      } catch (error) {
+        console.error('getQueryParams:', error);
+      }
+      return {
+        query: query,
+        hash: hash,
+        all: all
+      };
+    }
+
     /**
      * 版本号比较
      * @param v1
@@ -578,6 +670,25 @@ var CrUtil = /*#__PURE__*/function () {
       compare('', data1, data2);
       return diffFieldSet;
     }
+
+    /**
+     * 格式化为千分位
+     * @param value
+     * @returns 12345.6789 => 12,345.6789
+     */
+  }, {
+    key: "fmtThousands",
+    value: function fmtThousands(value) {
+      if (value == undefined || value == null || isNaN(Number(value))) {
+        return String(value);
+      }
+      var _String$split = String(value).split('.'),
+        _String$split2 = _slicedToArray(_String$split, 2),
+        intPart = _String$split2[0],
+        decimalPart = _String$split2[1];
+      var formattedInt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+      return decimalPart ? "".concat(formattedInt, ".").concat(decimalPart) : formattedInt;
+    }
   }]);
   return CrUtil;
 }();

package/docs/api/eventCenter/index.md

@@ -0,0 +1,34 @@
+# CrEventCenter 事件发布订阅
+
+事件发布订阅
+
+- 推荐仅在原生 javascript 中使用
+- 不推荐中在三大框架中使用，而是使用各家框架的状态管理库（存在问题，闭包函数未能及时更新 useState 中的值）
+
+原生写法
+
+```
+import { CrEventCenter } from '@zcrkey/js-utils';
+import type { TSubscription } from '@zcrkey/js-utils';
+
+// 订阅事件
+const subscription: TSubscription = CrEventCenter.on('xxx_xxx', (params) => {
+  console.log('params',params)
+});
+
+// 发布事件
+CrEventCenter.emit('xxx_xxx',{a:1,b:2})
+
+// 移除订阅事件
+subscription.remove()
+// 或者
+CrEventCenter.off(subscription);
+
+// 查找订阅事件
+const item = CrEventCenter.find('xxx_xxx')
+
+// 清除所有订阅事件
+CrEventCenter.clear()
+
+
+```

package/docs/api/index.md

@@ -0,0 +1,5 @@
+---
+order: -1
+---
+
+# API 总览

package/docs/api/storage/index.md

@@ -0,0 +1,9 @@
+# CrStorage 浏览器存储
+
+浏览器存储
+
+- localStorage：大小(10mb)、访问(任何窗口)
+- sessionStorage 大小(5mb)、访问(同一窗口)
+
+<code src="./local.tsx"></code>
+<code src="./session.tsx"></code>

package/docs/api/storage/local.tsx

@@ -0,0 +1,91 @@
+/**
+ * title: localStorage
+ */
+
+import { CrStorage } from '@zcrkey/js-utils';
+import React, { useState } from 'react';
+
+const LOGIN_USER = 'loginUser';
+
+export default () => {
+  const [data, setData] = useState<any>();
+
+  const onSet = () => {
+    // CrStorage.setLocalItem(LOGIN_USER, null);
+    // CrStorage.setLocalItem(LOGIN_USER, -1);
+    // CrStorage.setLocalItem(LOGIN_USER, undefined);
+    // CrStorage.setLocalItem(LOGIN_USER, {});
+    // CrStorage.setLocalItem(LOGIN_USER, []);
+    CrStorage.setLocalItem(LOGIN_USER, {
+      name: 'zcr',
+      sex: '男',
+      age: 18,
+    });
+  };
+
+  const onGet = () => {
+    const data = CrStorage.getLocalItem(LOGIN_USER);
+    setData(data);
+  };
+
+  const onClear = () => {
+    CrStorage.removeLocalItem(LOGIN_USER);
+    setData('');
+  };
+
+  const onAllClear = () => {
+    CrStorage.clearLocal();
+    setData('');
+  };
+
+  return (
+    <>
+      <div className="flex flex-direction">
+        <div className="text-lg">CrUtil.setLocalItem</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={onSet}
+          >
+            设置用户数据
+          </button>
+        </div>
+        <div className="text-lg">CrUtil.getLocalItem</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={onGet}
+          >
+            获取用户数据
+          </button>
+        </div>
+        <div className="text-lg">CrUtil.removeLocalItem</div>
+        <div>
+          <button
+            type="button"
+            className="cr-btn line-blue radius"
+            onClick={onClear}
+          >
+            清除用户数据
+          </button>
+        </div>
+      </div>
+      <div className="text-lg">CrUtil.clearLocal</div>
+      <div>
+        <button
+          type="button"
+          className="cr-btn line-blue radius"
+          onClick={onAllClear}
+        >
+          清除全部
+        </button>
+      </div>
+
+      <div className="divider"></div>
+
+      <p>用户数据：{JSON.stringify(data)}</p>
+    </>
+  );
+};