x-star-design 0.0.16 → 0.0.18

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

@@ -0,0 +1,26 @@
+import React from 'react';
+/**
+ * Aliplayer 配置
+ */
+export interface AliplayerConfig {
+    vid: string;
+    playauth: string;
+    autoplay: boolean;
+    language: string;
+}
+/**
+ * Aliplayer 实例
+ */
+export interface AliplayerInstance {
+    seek: (time: number) => void;
+    getCurrentTime: () => number;
+    setPlayerSize: (width: string, height: string) => void;
+    dispose: () => void;
+    on: (event: string, handler: () => void) => void;
+}
+interface AliplayerProps {
+    config: AliplayerConfig;
+    onCreate?: (player: AliplayerInstance) => void;
+}
+declare const Aliplayer: ({ config, onCreate }: AliplayerProps) => React.JSX.Element;
+export default Aliplayer;

package/dist/ali-player/index.js

@@ -0,0 +1,86 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { useMemoizedFn, useSize, useUnmount } from 'ahooks';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { randomString } from 'x-star-utils';
+
+/**
+ * Aliplayer 配置
+ */
+
+/**
+ * Aliplayer 实例
+ */
+
+var Aliplayer = function Aliplayer(_ref) {
+  var config = _ref.config,
+    onCreate = _ref.onCreate;
+  var id = useMemo(function () {
+    return "aliplayer-".concat(randomString(8));
+  }, []);
+  var wrapper = useRef(null);
+  var player = useRef();
+  var size = useSize(wrapper);
+  var importAliPlayer = function importAliPlayer() {
+    var link = window.document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = 'https://g.alicdn.com/de/prismplayer/2.11.0/skins/default/aliplayer-min.css';
+    var scirpt = window.document.createElement('script');
+    scirpt.type = 'text/javascript';
+    scirpt.src = 'https://g.alicdn.com/de/prismplayer/2.11.0/aliplayer-h5-min.js';
+    var head = window.document.querySelector('head');
+    head === null || head === void 0 ? void 0 : head.append(link);
+    head === null || head === void 0 ? void 0 : head.append(scirpt);
+  };
+  if (!window.Aliplayer) {
+    importAliPlayer();
+  }
+  /**
+   * 根据宽度调整高度，比例为 16:9
+   */
+  var resize = useMemoizedFn(function () {
+    return player.current && size && player.current.setPlayerSize("".concat(size.width, "px"), "".concat(size.width / 16 * 9, "px"));
+  });
+  useEffect(resize, [size, resize]);
+  useEffect(function () {
+    if (!(config !== null && config !== void 0 && config.playauth && config !== null && config !== void 0 && config.vid)) {
+      return;
+    }
+    if (player.current) player.current.dispose();
+    var create = function create() {
+      var run = function run(retry) {
+        var Aliplayer = window.Aliplayer;
+        if (Aliplayer) {
+          // 创建 Aliplayer 实例
+          player.current = new Aliplayer(_objectSpread(_objectSpread({}, config), {}, {
+            id: id
+          }), function (player) {
+            return onCreate === null || onCreate === void 0 ? void 0 : onCreate(player);
+          });
+          resize();
+        } else if (retry > 0) {
+          // 轮询获取 Aliplayer 类
+          window.setTimeout(function () {
+            return run(retry - 1);
+          }, 100);
+        }
+      };
+      window.setTimeout(function () {
+        return run(100);
+      });
+    };
+    create();
+  }, [config === null || config === void 0 ? void 0 : config.vid, config === null || config === void 0 ? void 0 : config.playauth, id, resize, onCreate]);
+
+  /**
+   * 组件卸载时销毁 Aliplayer
+   */
+  useUnmount(function () {
+    return player.current && player.current.dispose();
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: wrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id
+  }));
+};
+export default Aliplayer;

package/dist/code-detail-modal/define.d.ts

@@ -0,0 +1,13 @@
+import { LangId } from '../code-mirror-wrapper/define';
+export interface CodeDetail {
+    problemNameZh: string;
+    problemNameEn: string;
+    detail: string;
+    language: LangId;
+    status: string;
+    source: string;
+    score: number;
+    memory: number;
+    submissionTime: number;
+    link?: string;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/code-detail-modal/index.d.ts

@@ -0,0 +1,10 @@
+import { ModalProps } from 'antd';
+import React from 'react';
+import { CodeDetail } from './define';
+interface CodeDetailModalProps extends ModalProps {
+    codeData: CodeDetail;
+    open: boolean;
+    onCancel: () => void;
+}
+declare const CodeDetailModal: React.FC<CodeDetailModalProps>;
+export default CodeDetailModal;

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

@@ -0,0 +1,126 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["codeData", "open", "onCancel"];
+import { DownloadOutlined } from '@ant-design/icons';
+import { Button, Modal, Table } from 'antd';
+import dayjs from 'dayjs';
+import React, { useState } from 'react';
+import { getTransResult } from 'x-star-utils';
+import CodeMirrorWrapper from "../code-mirror-wrapper";
+import { Theme } from "../code-mirror-wrapper/define";
+import ConfigProviderWrapper from "../config-provider-wrapper";
+import { useLocale } from "../locales";
+import SubmissionStatus from "../submission-status";
+import { prefix } from "../utils/global";
+var CodeDetailModal = function CodeDetailModal(_ref) {
+  var codeData = _ref.codeData,
+    open = _ref.open,
+    onCancel = _ref.onCancel,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useLocale = useLocale('CodeDetailModal'),
+    t = _useLocale.format,
+    locale = _useLocale.locale;
+  var lang = locale === 'zh_CN' ? 'zh' : 'en';
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showCode = _useState2[0],
+    setShowCode = _useState2[1];
+  var columns = [{
+    key: 'problemNameZh',
+    align: 'center',
+    title: t('Problem'),
+    dataIndex: 'problemNameZh',
+    render: function render(_, record) {
+      return getTransResult(lang, record === null || record === void 0 ? void 0 : record.problemNameZh, record === null || record === void 0 ? void 0 : record.problemNameEn);
+    }
+  }, {
+    key: 'language',
+    align: 'center',
+    title: t('Language'),
+    dataIndex: 'language'
+  }, {
+    key: 'status',
+    align: 'center',
+    title: t('Status'),
+    dataIndex: 'status',
+    render: function render(status) {
+      return /*#__PURE__*/React.createElement(SubmissionStatus, {
+        status: status
+      });
+    }
+  }, {
+    key: 'score',
+    align: 'center',
+    title: t('Score'),
+    dataIndex: 'score',
+    render: function render(score) {
+      return score ? /*#__PURE__*/React.createElement("span", null, score) : '-';
+    }
+  }, {
+    key: 'memory',
+    align: 'center',
+    title: t('Memory'),
+    dataIndex: 'memory',
+    render: function render(memory) {
+      return "".concat(memory, "KB");
+    }
+  }, (codeData === null || codeData === void 0 ? void 0 : codeData.language) === 'plain' // 'plain' language
+  ? {
+    key: 'download',
+    align: 'center',
+    title: t('File'),
+    dataIndex: 'link',
+    render: function render(v) {
+      return /*#__PURE__*/React.createElement("a", {
+        href: v
+      }, /*#__PURE__*/React.createElement(DownloadOutlined, null));
+    }
+  } : {
+    key: 'code',
+    align: 'center',
+    title: t('Code'),
+    render: function render() {
+      return /*#__PURE__*/React.createElement("a", {
+        rel: "noreferrer",
+        onClick: function onClick() {
+          return setShowCode(!showCode);
+        }
+      }, showCode ? t('Show') : t('Hide'));
+    }
+  }, {
+    key: 'submissionTime',
+    align: 'center',
+    title: t('Submission_Time'),
+    dataIndex: 'submissionTime',
+    render: function render(v) {
+      return v ? /*#__PURE__*/React.createElement("span", null, dayjs.unix(v).format('YYYY-MM-DD HH:mm:ss (UTCZ)')) : '-';
+    }
+  }];
+  return /*#__PURE__*/React.createElement(ConfigProviderWrapper, null, /*#__PURE__*/React.createElement(Modal, _extends({
+    title: t('Code_Detail'),
+    afterClose: function afterClose() {
+      return setShowCode(false);
+    },
+    open: open,
+    onCancel: onCancel,
+    width: '60%',
+    footer: null
+  }, props), /*#__PURE__*/React.createElement(Table, {
+    pagination: false,
+    columns: columns,
+    dataSource: [codeData],
+    rowKey: 'problemNameZh'
+  }), showCode ? (codeData === null || codeData === void 0 ? void 0 : codeData.language) === 'plain' ? /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    icon: /*#__PURE__*/React.createElement(DownloadOutlined, null),
+    href: codeData === null || codeData === void 0 ? void 0 : codeData.link
+  }, t('Download_File')) : /*#__PURE__*/React.createElement(CodeMirrorWrapper, {
+    lang: codeData === null || codeData === void 0 ? void 0 : codeData.language,
+    theme: Theme.LIGHT,
+    value: codeData === null || codeData === void 0 ? void 0 : codeData.source
+  }) : /*#__PURE__*/React.createElement("pre", {
+    className: "".concat(prefix, "codeCompileResult")
+  }, /*#__PURE__*/React.createElement("code", null, codeData.detail))));
+};
+export default CodeDetailModal;

package/dist/contact-button/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ContactButton: React.FC;
+export default ContactButton;

package/dist/contact-button/index.js

@@ -0,0 +1,39 @@
+import { QrcodeOutlined } from '@ant-design/icons';
+import { Card, Popover, Space } from 'antd';
+import React from 'react';
+import { getTransResult } from 'x-star-utils';
+import wechatCode from "../assets/contact-button/wechatCode.jpg";
+import xcQrCode from "../assets/contact-button/xcQrCode.png";
+import ConfigProviderWrapper from "../config-provider-wrapper";
+import { useLocale } from "../locales";
+import { prefix } from "../utils/global";
+var ContactButton = function ContactButton() {
+  var _useLocale = useLocale('ContactButton'),
+    t = _useLocale.format,
+    locale = _useLocale.locale;
+  var lang = locale === 'zh_CN' ? 'zh' : 'en';
+  return /*#__PURE__*/React.createElement(ConfigProviderWrapper, null, /*#__PURE__*/React.createElement(Popover, {
+    placement: "topLeft",
+    content: /*#__PURE__*/React.createElement(Space, {
+      direction: "vertical",
+      align: "center"
+    }, /*#__PURE__*/React.createElement("img", {
+      alt: "",
+      style: {
+        height: 100
+      },
+      src: getTransResult(lang, wechatCode, xcQrCode)
+    }), t('CONTACT_TIP'), t('CONTACT_TELEPHONE'))
+  }, /*#__PURE__*/React.createElement(Card, {
+    className: "".concat(prefix, "contactButtonCard")
+  }, /*#__PURE__*/React.createElement(Space, {
+    direction: "vertical",
+    align: "center"
+  }, /*#__PURE__*/React.createElement(QrcodeOutlined, {
+    style: {
+      fontSize: 30,
+      color: '#1677ff'
+    }
+  }), t('CONTACT_US')))));
+};
+export default ContactButton;

package/dist/index.d.ts

@@ -1,9 +1,14 @@
 export { default as AcAnimation } from './ac-animation';
+export { default as Aliplayer } from './ali-player';
+export type { AliplayerConfig, AliplayerInstance } from './ali-player';
+export { default as CodeDetailModal } from './code-detail-modal';
 export { default as CodeMirrorWrapper } from './code-mirror-wrapper';
 export { LangId, Language, Theme } from './code-mirror-wrapper/define';
+export { default as ContactButton } from './contact-button';
 export { default as DraggableLayout } from './draggable-layout';
 export { default as ErrorBoundary } from './error-boundary';
 export type { FallbackProps } from './error-boundary';
+export { default as InputNumbers } from './input-numbers';
 export { default as LoadingMask } from './loading-mask';
 export { LocaleProvider } from './locales';
 export { default as PaneTitle } from './pane-title';

package/dist/index.js

@@ -1,8 +1,12 @@
 export { default as AcAnimation } from "./ac-animation";
+export { default as Aliplayer } from "./ali-player";
+export { default as CodeDetailModal } from "./code-detail-modal";
 export { default as CodeMirrorWrapper } from "./code-mirror-wrapper";
 export { LangId, Language, Theme } from "./code-mirror-wrapper/define";
+export { default as ContactButton } from "./contact-button";
 export { default as DraggableLayout } from "./draggable-layout";
 export { default as ErrorBoundary } from "./error-boundary";
+export { default as InputNumbers } from "./input-numbers";
 export { default as LoadingMask } from "./loading-mask";
 export { LocaleProvider } from "./locales";
 export { default as PaneTitle } from "./pane-title";

package/dist/locales/en_US.d.ts

@@ -32,5 +32,24 @@ declare const _default: {
         readonly SCORE: "Score";
         readonly BATCH_ADD: "Batch Add";
     };
+    readonly CodeDetailModal: {
+        readonly Problem: "Problem";
+        readonly Language: "Language";
+        readonly Status: "Status";
+        readonly Score: "Score";
+        readonly Memory: "Memory";
+        readonly Code: "Code";
+        readonly Show: "Show";
+        readonly Hide: "Hide";
+        readonly Submission_Time: "Submission Time";
+        readonly Code_Detail: "Code Detail";
+        readonly Download_File: "Download File";
+        readonly File: "File";
+    };
+    readonly ContactButton: {
+        readonly CONTACT_TELEPHONE: "Telephone: +1-510-760-1098";
+        readonly CONTACT_TIP: "Please Scan The QR Code";
+        readonly CONTACT_US: "Contact Us";
+    };
 };
 export default _default;

package/dist/locales/en_US.js

@@ -31,5 +31,24 @@ export default {
     TIME: 'Time',
     SCORE: 'Score',
     BATCH_ADD: 'Batch Add'
+  },
+  CodeDetailModal: {
+    Problem: 'Problem',
+    Language: 'Language',
+    Status: 'Status',
+    Score: 'Score',
+    Memory: 'Memory',
+    Code: 'Code',
+    Show: 'Show',
+    Hide: 'Hide',
+    Submission_Time: 'Submission Time',
+    Code_Detail: 'Code Detail',
+    Download_File: 'Download File',
+    File: 'File'
+  },
+  ContactButton: {
+    CONTACT_TELEPHONE: 'Telephone: +1-510-760-1098',
+    CONTACT_TIP: 'Please Scan The QR Code',
+    CONTACT_US: 'Contact Us'
   }
 };

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">(slice: T) => {
+export declare const useLocale: <T extends "VisualDataConfig" | "CodeDetailModal" | "ContactButton">(slice: T) => {
     locale: string;
     format: <U extends keyof MessageMap[T]>(key: U) => ({
         readonly VisualDataConfig: {
@@ -43,6 +43,25 @@ export declare const useLocale: <T extends "VisualDataConfig">(slice: T) => {
             readonly SCORE: "得分";
             readonly BATCH_ADD: "批量添加";
         };
+        readonly CodeDetailModal: {
+            readonly Problem: "题目";
+            readonly Language: "语言";
+            readonly Status: "状态";
+            readonly Score: "得分";
+            readonly Memory: "大小";
+            readonly Code: "代码";
+            readonly Show: "显示";
+            readonly Hide: "隐藏";
+            readonly Submission_Time: "提交时间";
+            readonly Code_Detail: "代码详情";
+            readonly Download_File: "下载文件";
+            readonly File: "文件";
+        };
+        readonly ContactButton: {
+            readonly CONTACT_TELEPHONE: "电话：17367064678";
+            readonly CONTACT_TIP: "微信扫码，直接咨询";
+            readonly CONTACT_US: "联系我们";
+        };
     } | {
         readonly VisualDataConfig: {
             readonly Time_MS: "Time Limit(MS)";
@@ -77,9 +96,28 @@ export declare const useLocale: <T extends "VisualDataConfig">(slice: T) => {
             readonly SCORE: "Score";
             readonly BATCH_ADD: "Batch Add";
         };
+        readonly CodeDetailModal: {
+            readonly Problem: "Problem";
+            readonly Language: "Language";
+            readonly Status: "Status";
+            readonly Score: "Score";
+            readonly Memory: "Memory";
+            readonly Code: "Code";
+            readonly Show: "Show";
+            readonly Hide: "Hide";
+            readonly Submission_Time: "Submission Time";
+            readonly Code_Detail: "Code Detail";
+            readonly Download_File: "Download File";
+            readonly File: "File";
+        };
+        readonly ContactButton: {
+            readonly CONTACT_TELEPHONE: "Telephone: +1-510-760-1098";
+            readonly CONTACT_TIP: "Please Scan The QR Code";
+            readonly CONTACT_US: "Contact Us";
+        };
     })[T][U];
 };
-export declare const getFormat: <T extends "VisualDataConfig">(locale: string | undefined, slice: T) => <U extends keyof MessageMap[T]>(key: U) => ({
+export declare const getFormat: <T extends "VisualDataConfig" | "CodeDetailModal" | "ContactButton">(locale: string | undefined, slice: T) => <U extends keyof MessageMap[T]>(key: U) => ({
     readonly VisualDataConfig: {
         readonly Time_MS: "时间限制（MS）";
         readonly Space_MS: "空间限制（KB）";
@@ -113,6 +151,25 @@ export declare const getFormat: <T extends "VisualDataConfig">(locale: string |
         readonly SCORE: "得分";
         readonly BATCH_ADD: "批量添加";
     };
+    readonly CodeDetailModal: {
+        readonly Problem: "题目";
+        readonly Language: "语言";
+        readonly Status: "状态";
+        readonly Score: "得分";
+        readonly Memory: "大小";
+        readonly Code: "代码";
+        readonly Show: "显示";
+        readonly Hide: "隐藏";
+        readonly Submission_Time: "提交时间";
+        readonly Code_Detail: "代码详情";
+        readonly Download_File: "下载文件";
+        readonly File: "文件";
+    };
+    readonly ContactButton: {
+        readonly CONTACT_TELEPHONE: "电话：17367064678";
+        readonly CONTACT_TIP: "微信扫码，直接咨询";
+        readonly CONTACT_US: "联系我们";
+    };
 } | {
     readonly VisualDataConfig: {
         readonly Time_MS: "Time Limit(MS)";
@@ -147,5 +204,24 @@ export declare const getFormat: <T extends "VisualDataConfig">(locale: string |
         readonly SCORE: "Score";
         readonly BATCH_ADD: "Batch Add";
     };
+    readonly CodeDetailModal: {
+        readonly Problem: "Problem";
+        readonly Language: "Language";
+        readonly Status: "Status";
+        readonly Score: "Score";
+        readonly Memory: "Memory";
+        readonly Code: "Code";
+        readonly Show: "Show";
+        readonly Hide: "Hide";
+        readonly Submission_Time: "Submission Time";
+        readonly Code_Detail: "Code Detail";
+        readonly Download_File: "Download File";
+        readonly File: "File";
+    };
+    readonly ContactButton: {
+        readonly CONTACT_TELEPHONE: "Telephone: +1-510-760-1098";
+        readonly CONTACT_TIP: "Please Scan The QR Code";
+        readonly CONTACT_US: "Contact Us";
+    };
 })[T][U];
 export {};

package/dist/locales/zh_CN.d.ts

@@ -32,5 +32,24 @@ declare const _default: {
         readonly SCORE: "得分";
         readonly BATCH_ADD: "批量添加";
     };
+    readonly CodeDetailModal: {
+        readonly Problem: "题目";
+        readonly Language: "语言";
+        readonly Status: "状态";
+        readonly Score: "得分";
+        readonly Memory: "大小";
+        readonly Code: "代码";
+        readonly Show: "显示";
+        readonly Hide: "隐藏";
+        readonly Submission_Time: "提交时间";
+        readonly Code_Detail: "代码详情";
+        readonly Download_File: "下载文件";
+        readonly File: "文件";
+    };
+    readonly ContactButton: {
+        readonly CONTACT_TELEPHONE: "电话：17367064678";
+        readonly CONTACT_TIP: "微信扫码，直接咨询";
+        readonly CONTACT_US: "联系我们";
+    };
 };
 export default _default;

package/dist/locales/zh_CN.js

@@ -31,5 +31,24 @@ export default {
     TIME: '时间',
     SCORE: '得分',
     BATCH_ADD: '批量添加'
+  },
+  CodeDetailModal: {
+    Problem: '题目',
+    Language: '语言',
+    Status: '状态',
+    Score: '得分',
+    Memory: '大小',
+    Code: '代码',
+    Show: '显示',
+    Hide: '隐藏',
+    Submission_Time: '提交时间',
+    Code_Detail: '代码详情',
+    Download_File: '下载文件',
+    File: '文件'
+  },
+  ContactButton: {
+    CONTACT_TELEPHONE: '电话：17367064678',
+    CONTACT_TIP: '微信扫码，直接咨询',
+    CONTACT_US: '联系我们'
   }
 };

package/dist/styles/index.css

@@ -409,3 +409,29 @@
 .x-star-design-form .x-star-design-formList {
   width: 100%;
 }
+
+.x-star-design-codeCompileResult {
+  padding: 10px 20px;
+  background-color: #fafafa;
+  border: 1px solid #e3e3e3;
+  border-radius: 3px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+  min-height: 100%;
+  overflow: auto;
+  margin-top: 1%;
+}
+
+.x-star-design-contactButtonCard {
+  position: fixed !important;
+  right: 3rem;
+  top: 70%;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer !important;
+  z-index: 999;
+  border: 3px dashed orange !important;
+}
+.x-star-design-contactButtonCard .ant-card-body,
+.x-star-design-contactButtonCard .x-star-design-card-body {
+  padding: 5px;
+}

package/dist/types/svg.d.ts

@@ -1,4 +1,10 @@
 declare module '*.svg' {
   export default string;
 }
+declare module '*.png' {
+  export default string;
+}
+declare module '*.jpg' {
+  export default string;
+}
 declare module 'randomcolor';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-star-design",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "A react component library developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",
@@ -58,6 +58,7 @@
     "@uiw/react-codemirror": "^4.21.9",
     "ahooks": "^3.7.8",
     "classnames": "^2.3.2",
+    "dayjs": "^1.11.10",
     "randomcolor": "^0.6.2",
     "rc-resize-observer": "^1.3.1",
     "react-sortable-hoc": "^2.0.0",