x-star-design 0.0.29 → 0.0.32

package/dist/ali-player/index.d.ts

@@ -12,6 +12,7 @@ export interface AliplayerConfig {
  * Aliplayer 实例
  */
 export interface AliplayerInstance {
+    pause: () => void;
     seek: (time: number) => void;
     getCurrentTime: () => number;
     setPlayerSize: (width: string, height: string) => void;

package/dist/code-detail-modal/index.js

@@ -131,7 +131,8 @@ var CodeDetailModal = function CodeDetailModal(_ref) {
     },
     lang: codeData === null || codeData === void 0 ? void 0 : codeData.language,
     theme: Theme.LIGHT,
-    value: codeData === null || codeData === void 0 ? void 0 : codeData.source
+    value: codeData === null || codeData === void 0 ? void 0 : codeData.source,
+    readOnly: true
   }) : /*#__PURE__*/React.createElement("pre", {
     className: "".concat(prefix, "codeCompileResult")
   }, /*#__PURE__*/React.createElement("code", null, codeData.detail))));

package/dist/error-boundary/error-page/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    onReset?: () => void;
+    homeLink?: string;
+}
+declare const ErrorPage: ({ onReset, homeLink }: Props) => React.JSX.Element;
+export default ErrorPage;

package/dist/error-boundary/error-page/index.js

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import React from 'react';
+import { useLocale } from "../../locales";
+import { prefix } from "../../utils/global";
+var ErrorPage = function ErrorPage(_ref) {
+  var onReset = _ref.onReset,
+    homeLink = _ref.homeLink;
+  var _useLocale = useLocale('ErrorPage'),
+    t = _useLocale.format;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "errorPage"))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("hello")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames("ip")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames("planets")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames("content")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("alert")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("alertContent")
+  }, /*#__PURE__*/React.createElement("h2", {
+    style: {
+      fontWeight: 'bold'
+    }
+  }, t('ERROR')), /*#__PURE__*/React.createElement("div", {
+    className: classNames("description")
+  }, /*#__PURE__*/React.createElement("div", null, t('ERROR_BOUNDARY_TIP_1')), /*#__PURE__*/React.createElement("div", null, t('ERROR_BOUNDARY_TIP_2')), /*#__PURE__*/React.createElement("div", {
+    className: classNames("actions")
+  }, /*#__PURE__*/React.createElement("a", {
+    href: homeLink || '/'
+  }, ">> ".concat(t('RETURN_TO_HOME'))), /*#__PURE__*/React.createElement("a", {
+    onClick: onReset
+  }, ">> ".concat(t('RETRY')))), /*#__PURE__*/React.createElement("div", null, t('TECHNICAL_DEPARTMENT_CONTACT_EMAIL'), /*#__PURE__*/React.createElement("a", {
+    href: "mailto:tech@xinyoudui.com"
+  }, 'tech@xinyoudui.com')))))));
+};
+export default ErrorPage;

package/dist/error-boundary/index.js

@@ -5,7 +5,9 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 // 本组件代码参考自 https://juejin.cn/post/6937474904375689224
+import { message } from 'antd';
 import React from 'react';
+import ErrorPage from "./error-page";
 
 // 出错后显示的元素类型
 
@@ -52,9 +54,11 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
     });
     // 执行自定义重置逻辑，并重置组件状态
     _defineProperty(_assertThisInitialized(_this), "resetErrorBoundary", function () {
-      if (_this.props.onReset) {
-        _this.props.onReset();
-      }
+      var _this$props$onReset = _this.props.onReset,
+        onReset = _this$props$onReset === void 0 ? function () {
+          message.info('开发人员正在解救陷入黑洞的代码，请耐心等待和尝试。Developers are rescuing code trapped in a black hole. Please be patient and try again');
+        } : _this$props$onReset;
+      onReset();
       _this.reset();
     });
     return _this;
@@ -64,6 +68,8 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
     value: function componentDidCatch(error, errorInfo) {
       if (this.props.onError) {
         this.props.onError(error, errorInfo.componentStack);
+      } else {
+        console.error('Page Crash! Have been captured by error boundary.');
       }
       this.setState({
         error: error
@@ -97,7 +103,13 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
         fallback = _this$props2.fallback,
         FallbackComponent = _this$props2.FallbackComponent,
-        fallbackRender = _this$props2.fallbackRender;
+        _this$props2$fallback = _this$props2.fallbackRender,
+        fallbackRender = _this$props2$fallback === void 0 ? function (props) {
+          // fallback 组件的渲染函数 ErrorPage需要自己定义该组件
+          return /*#__PURE__*/React.createElement(ErrorPage, {
+            onReset: props.resetErrorBoundary
+          });
+        } : _this$props2$fallback;
       var error = this.state.error;
       if (error !== null) {
         var fallbackProps = {

package/dist/locales/en_US.d.ts

@@ -54,5 +54,13 @@ declare const _default: {
         readonly CONTACT_TIP: "Please Scan The QR Code";
         readonly CONTACT_US: "Contact Us";
     };
+    readonly ErrorPage: {
+        readonly ERROR: "☹ Error";
+        readonly ERROR_BOUNDARY_TIP_1: "Sorry, the code accidentally got caught in a black hole and the page crashed.";
+        readonly ERROR_BOUNDARY_TIP_2: "You can try accessing the page again, or you can visit another page first.";
+        readonly RETURN_TO_HOME: "Return to home";
+        readonly RETRY: "Retry";
+        readonly TECHNICAL_DEPARTMENT_CONTACT_EMAIL: "Technical department contact email: ";
+    };
 };
 export default _default;

package/dist/locales/en_US.js

@@ -53,5 +53,13 @@ export default {
     CONTACT_TELEPHONE: 'Telephone: +1-510-760-1098',
     CONTACT_TIP: 'Please Scan The QR Code',
     CONTACT_US: 'Contact Us'
+  },
+  ErrorPage: {
+    ERROR: '☹ Error',
+    ERROR_BOUNDARY_TIP_1: 'Sorry, the code accidentally got caught in a black hole and the page crashed.',
+    ERROR_BOUNDARY_TIP_2: 'You can try accessing the page again, or you can visit another page first.',
+    RETURN_TO_HOME: 'Return to home',
+    RETRY: 'Retry',
+    TECHNICAL_DEPARTMENT_CONTACT_EMAIL: 'Technical department contact email: '
   }
 };

package/dist/locales/index.d.ts

@@ -7,7 +7,7 @@ interface LocaleProviderProps {
 }
 export declare const LocaleProvider: ({ children, locale, }: LocaleProviderProps) => React.JSX.Element;
 type MessageMap = typeof zh_CN | typeof en_US;
-export declare const useLocale: <T extends "VisualDataConfig" | "TranslateButton" | "CodeDetailModal" | "ContactButton">(slice: T) => {
+export declare const useLocale: <T extends "VisualDataConfig" | "TranslateButton" | "CodeDetailModal" | "ContactButton" | "ErrorPage">(slice: T) => {
     locale: string;
     format: <U extends keyof MessageMap[T]>(key: U) => ({
         readonly VisualDataConfig: {
@@ -65,6 +65,14 @@ export declare const useLocale: <T extends "VisualDataConfig" | "TranslateButton
             readonly CONTACT_TIP: "微信扫码，直接咨询";
             readonly CONTACT_US: "联系我们";
         };
+        readonly ErrorPage: {
+            readonly ERROR: "☹ 出错啦";
+            readonly ERROR_BOUNDARY_TIP_1: "不好意思，代码意外卷入了黑洞，页面发生了崩溃。";
+            readonly ERROR_BOUNDARY_TIP_2: "您可以重试访问该页面，或可以先访问其他页面。";
+            readonly RETURN_TO_HOME: "回到首页";
+            readonly RETRY: "重试";
+            readonly TECHNICAL_DEPARTMENT_CONTACT_EMAIL: "技术部联系邮箱：";
+        };
     } | {
         readonly VisualDataConfig: {
             readonly Time_MS: "Time Limit(MS)";
@@ -121,9 +129,17 @@ export declare const useLocale: <T extends "VisualDataConfig" | "TranslateButton
             readonly CONTACT_TIP: "Please Scan The QR Code";
             readonly CONTACT_US: "Contact Us";
         };
+        readonly ErrorPage: {
+            readonly ERROR: "☹ Error";
+            readonly ERROR_BOUNDARY_TIP_1: "Sorry, the code accidentally got caught in a black hole and the page crashed.";
+            readonly ERROR_BOUNDARY_TIP_2: "You can try accessing the page again, or you can visit another page first.";
+            readonly RETURN_TO_HOME: "Return to home";
+            readonly RETRY: "Retry";
+            readonly TECHNICAL_DEPARTMENT_CONTACT_EMAIL: "Technical department contact email: ";
+        };
     })[T][U];
 };
-export declare const getFormat: <T extends "VisualDataConfig" | "TranslateButton" | "CodeDetailModal" | "ContactButton">(locale: string | undefined, slice: T) => <U extends keyof MessageMap[T]>(key: U) => ({
+export declare const getFormat: <T extends "VisualDataConfig" | "TranslateButton" | "CodeDetailModal" | "ContactButton" | "ErrorPage">(locale: string | undefined, slice: T) => <U extends keyof MessageMap[T]>(key: U) => ({
     readonly VisualDataConfig: {
         readonly Time_MS: "时间限制（MS）";
         readonly Space_MS: "空间限制（KB）";
@@ -179,6 +195,14 @@ export declare const getFormat: <T extends "VisualDataConfig" | "TranslateButton
         readonly CONTACT_TIP: "微信扫码，直接咨询";
         readonly CONTACT_US: "联系我们";
     };
+    readonly ErrorPage: {
+        readonly ERROR: "☹ 出错啦";
+        readonly ERROR_BOUNDARY_TIP_1: "不好意思，代码意外卷入了黑洞，页面发生了崩溃。";
+        readonly ERROR_BOUNDARY_TIP_2: "您可以重试访问该页面，或可以先访问其他页面。";
+        readonly RETURN_TO_HOME: "回到首页";
+        readonly RETRY: "重试";
+        readonly TECHNICAL_DEPARTMENT_CONTACT_EMAIL: "技术部联系邮箱：";
+    };
 } | {
     readonly VisualDataConfig: {
         readonly Time_MS: "Time Limit(MS)";
@@ -235,5 +259,13 @@ export declare const getFormat: <T extends "VisualDataConfig" | "TranslateButton
         readonly CONTACT_TIP: "Please Scan The QR Code";
         readonly CONTACT_US: "Contact Us";
     };
+    readonly ErrorPage: {
+        readonly ERROR: "☹ Error";
+        readonly ERROR_BOUNDARY_TIP_1: "Sorry, the code accidentally got caught in a black hole and the page crashed.";
+        readonly ERROR_BOUNDARY_TIP_2: "You can try accessing the page again, or you can visit another page first.";
+        readonly RETURN_TO_HOME: "Return to home";
+        readonly RETRY: "Retry";
+        readonly TECHNICAL_DEPARTMENT_CONTACT_EMAIL: "Technical department contact email: ";
+    };
 })[T][U];
 export {};

package/dist/locales/zh_CN.d.ts

@@ -54,5 +54,13 @@ declare const _default: {
         readonly CONTACT_TIP: "微信扫码，直接咨询";
         readonly CONTACT_US: "联系我们";
     };
+    readonly ErrorPage: {
+        readonly ERROR: "☹ 出错啦";
+        readonly ERROR_BOUNDARY_TIP_1: "不好意思，代码意外卷入了黑洞，页面发生了崩溃。";
+        readonly ERROR_BOUNDARY_TIP_2: "您可以重试访问该页面，或可以先访问其他页面。";
+        readonly RETURN_TO_HOME: "回到首页";
+        readonly RETRY: "重试";
+        readonly TECHNICAL_DEPARTMENT_CONTACT_EMAIL: "技术部联系邮箱：";
+    };
 };
 export default _default;

package/dist/locales/zh_CN.js

@@ -53,5 +53,13 @@ export default {
     CONTACT_TELEPHONE: '电话：17367064678',
     CONTACT_TIP: '微信扫码，直接咨询',
     CONTACT_US: '联系我们'
+  },
+  ErrorPage: {
+    ERROR: '☹ 出错啦',
+    ERROR_BOUNDARY_TIP_1: '不好意思，代码意外卷入了黑洞，页面发生了崩溃。',
+    ERROR_BOUNDARY_TIP_2: '您可以重试访问该页面，或可以先访问其他页面。',
+    RETURN_TO_HOME: '回到首页',
+    RETRY: '重试',
+    TECHNICAL_DEPARTMENT_CONTACT_EMAIL: '技术部联系邮箱：'
   }
 };

package/dist/styles/index.css

@@ -428,3 +428,74 @@
 .x-star-design-contactButtonCard .x-star-design-card-body {
   padding: 5px;
 }
+
+.x-star-design-errorPage {
+  position: relative;
+  width: 100vw;
+  height: calc(87vh - 64px);
+}
+.x-star-design-errorPage .hello {
+  position: absolute;
+  bottom: 240px;
+  left: 100px;
+  width: 204px;
+  height: 96px;
+  background: url("https://media.strapi.turingstar.com.cn/production/2023/3/hello_0dd8b00bbf.png") 100% no-repeat;
+  background-size: 100% 100%;
+}
+.x-star-design-errorPage .ip {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 240px;
+  height: 280px;
+  background: url("https://media.strapi.turingstar.com.cn/production/2023/3/_31e3aca7f2.png") 100% no-repeat;
+  background-size: 100% 100%;
+}
+.x-star-design-errorPage .planets {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 240px;
+  height: 280px;
+  background: url("https://media.strapi.turingstar.com.cn/production/2023/3/background_right_6ff67955bc.png") 100% no-repeat;
+  background-size: 100% 100%;
+}
+.x-star-design-errorPage .content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.88);
+  transform: translate(-50%, -50%);
+  flex-direction: column;
+}
+.x-star-design-errorPage .content .alert {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  margin: 0;
+  padding: 8px 12px;
+  border: 1px solid #ffccc7;
+  border-radius: 8px;
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.88);
+  background-color: #fff2f0;
+  padding-inline: 24px;
+  padding-block: 20px;
+  box-sizing: border-box;
+}
+.x-star-design-errorPage .content .alert .description {
+  display: flex;
+  flex-direction: column;
+}
+.x-star-design-errorPage .content .alert .description div {
+  line-height: 2.5rem;
+}
+.x-star-design-errorPage .content .alert .description .actions {
+  display: flex;
+  justify-content: space-between;
+  width: 50%;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-star-design",
-  "version": "0.0.29",
+  "version": "0.0.32",
   "description": "A react component library developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",