@titaui/pc 1.9.27 → 1.9.31

package/lib/pages/home/components/data-list/table/utils-function.js

@@ -13,6 +13,8 @@ var _drawerManager = _interopRequireDefault(require("../../../../../components/d
 
 var _columns = require("./columns");
 
+var _periodSelector = _interopRequireDefault(require("../../../../../components/period-selector"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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; } } }; }
@@ -25,17 +27,17 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 var cycleFilterModels = function cycleFilterModels(cycleTime) {
   var res = [{
     "CptFilterName": "cycle_type",
-    "CptFilterValue": cycleTime.cycleType === '-1' ? '0,1,2,3,4,5' : cycleTime.cycleType
+    "CptFilterValue": cycleTime.cycleType === "-1" ? "0,1,2,3,4,5" : cycleTime.cycleType
   }];
 
-  if (cycleTime.cycleType !== '-1') {
+  if (cycleTime.cycleType !== "-1") {
     res.push({
       "CptFilterName": "annual_num",
       "CptFilterValue": cycleTime.yearNum
     });
   }
 
-  if (cycleTime.cycleType === '2' || cycleTime.cycleType === '3' || cycleTime.cycleType === '4' || cycleTime.cycleType === '5') {
+  if (cycleTime.cycleType === "2" || cycleTime.cycleType === "3" || cycleTime.cycleType === "4" || cycleTime.cycleType === "5") {
     res.push({
       "CptFilterName": "yqm_num",
       "CptFilterValue": cycleTime.yqmNum
@@ -47,50 +49,30 @@ var cycleFilterModels = function cycleFilterModels(cycleTime) {
 
 
 var getComponentDataProp = {
-  'all': 'allOkr',
-  'hadAlign': 'MyParentOkrCount',
-  'hadNotAlign': 'MyNoParentOkrCount',
-  'hadUpdate': 'allMyProgressCount',
-  'hadNotUpdate': 'allMyNoProgressCount',
-  'normalOkr': 'MyNormalOkrCount',
-  'riskOkr': 'MyRiskOkrCount',
-  'dalyOkr': 'MyDlayOkrCount',
-  'endOkr': 'MyFinishOkrCount'
+  "all": "allOkr",
+  "hadAlign": "MyParentOkrCount",
+  "hadNotAlign": "MyNoParentOkrCount",
+  "hadUpdate": "allMyProgressCount",
+  "hadNotUpdate": "allMyNoProgressCount",
+  "normalOkr": "MyNormalOkrCount",
+  "riskOkr": "MyRiskOkrCount",
+  "dalyOkr": "MyDlayOkrCount",
+  "endOkr": "MyFinishOkrCount"
 }; // 周期转换
 
 var cycleTimeDisplay = function cycleTimeDisplay(cycleType, annualNum, yqmNum) {
-  switch (cycleType) {
-    case 1:
-      return "".concat(annualNum, "\u5E74");
-
-    case 2:
-      return "".concat(annualNum, "\u5E74 \u7B2C").concat(numberToWord(yqmNum), "\u5B63\u5EA6");
-
-    case 3:
-      return "".concat(annualNum, "\u5E74 ").concat(yqmNum, "\u6708");
-
-    case 4:
-      return "".concat(annualNum, "\u5E74 ").concat(yqmNum, "-").concat((yqmNum + 1) % 12 || 12, "\u6708");
-
-    case 5:
-      return "".concat(annualNum, "\u5E74 ").concat(yqmNum == 1 ? '上' : '下', "\u534A\u5E74");
-
-    default:
-      return '-';
-  }
-}; //数字大小写转换
-
-
-var numberToWord = function numberToWord(num) {
-  var arr = ['一', '二', '三', '四'];
-  return arr[num - 1];
+  return _periodSelector["default"].formatPeriod({
+    annualNum: annualNum,
+    cycleType: cycleType,
+    yqmNum: yqmNum
+  });
 }; //ComponentId转换
 
 
 var ComponentIdMap = {
-  align: 'Align-OKR-Target',
-  update: 'OKR-Progress-Display',
-  target: 'OKR-Target-Display'
+  align: "Align-OKR-Target",
+  update: "OKR-Progress-Display",
+  target: "OKR-Target-Display"
 };
 
 var _default = function _default(source, params) {
@@ -120,7 +102,7 @@ var _default = function _default(source, params) {
               var item = _step.value;
               listData.push({
                 columnId: item.workId,
-                okrType: 'O',
+                okrType: "O",
                 okrName: item.workName,
                 cycleTime: cycleTimeDisplay(item.cycleType, item.annualNum, item.yqmnum),
                 userInfo: {
@@ -131,18 +113,18 @@ var _default = function _default(source, params) {
                 },
                 riskLevel: item.manualRiskLevel,
                 progress: item.progress,
-                typeName: item.parentId > 0 || item.parentKrId > 0 ? (0, _getLocale.getLocale)('OKR_Db_Aligned') : (0, _getLocale.getLocale)('OKR_Db_Unaligned'),
+                typeName: item.parentId > 0 || item.parentKrId > 0 ? (0, _getLocale.getLocale)("OKR_Db_Aligned") : (0, _getLocale.getLocale)("OKR_Db_Unaligned"),
                 updateTime: item.lastUpdatedDate,
                 status: item.status,
                 createDate: item.CreateDate,
                 behave: function behave() {
-                  return _drawerManager["default"].open('okrDetail', {
+                  return _drawerManager["default"].open("okrDetail", {
                     okrId: item.workId
                   });
                 }
               });
 
-              if (item.Krs.length && source !== 'align') {
+              if (item.Krs.length && source !== "align") {
                 var _iterator2 = _createForOfIteratorHelper(item.Krs),
                     _step2;
 
@@ -151,7 +133,7 @@ var _default = function _default(source, params) {
                     var item1 = _step2.value;
                     listData.push({
                       columnId: item1.mileStoneId,
-                      okrType: 'KR',
+                      okrType: "KR",
                       okrName: item1.mileStoneName,
                       cycleTime: "".concat(item1.startDate.slice(-5), "~").concat(item1.endDate.slice(-5)),
                       userInfo: {
@@ -166,7 +148,7 @@ var _default = function _default(source, params) {
                       updateTime: item1.progressDescriptionDate,
                       createDate: item1.CreateDate,
                       behave: function behave() {
-                        return _drawerManager["default"].open('krDetail', {
+                        return _drawerManager["default"].open("krDetail", {
                           krId: item1.mileStoneId
                         });
                       }
@@ -201,7 +183,7 @@ var _default = function _default(source, params) {
           dataTotal: dataTotal
         });
       } else {
-        reject('请求失败');
+        reject("请求失败");
       }
     });
   });
@@ -211,15 +193,15 @@ exports["default"] = _default;
 
 var getColumsBySource = function getColumsBySource(source) {
   switch (source) {
-    case 'align':
+    case "align":
       return _columns.okrAlignColumns;
       break;
 
-    case 'update':
+    case "update":
       return _columns.okrUpdateColumns;
       break;
 
-    case 'target':
+    case "target":
       return _columns.myOkrColumns;
       break;
   }
@@ -229,30 +211,30 @@ exports.getColumsBySource = getColumsBySource;
 
 var getEmptyBySource = function getEmptyBySource(source) {
   switch (source) {
-    case 'align':
+    case "align":
       return {
         imageSrc: require("../../../image/align-list-empty.png"),
-        link: 'https://club.tita.com/18150.html',
-        emptyText: '暂无对齐',
-        linkText: '如何对齐'
+        link: "https://club.tita.com/18150.html",
+        emptyText: "暂无对齐",
+        linkText: "如何对齐"
       };
       break;
 
-    case 'update':
+    case "update":
       return {
         imageSrc: require("../../../image/update-list-empty.png"),
-        link: 'https://club.tita.com/18179.html',
-        emptyText: '暂无更新',
-        linkText: '如何更新'
+        link: "https://club.tita.com/18179.html",
+        emptyText: "暂无更新",
+        linkText: "如何更新"
       };
       break;
 
-    case 'target':
+    case "target":
       return {
         imageSrc: require("../../../image/myokr-list-empty.png"),
-        link: '#okr%2Fmanage',
-        emptyText: '「暂无 OKR 数据」',
-        linkText: '去查看'
+        link: "#okr%2Fmanage",
+        emptyText: "\u300C".concat((0, _getLocale.getLocale)("Tasks_Tab_MyS_NoOKRilable"), "\u300D"),
+        linkText: (0, _getLocale.getLocale)('OKR_MyO_Gotoview')
       };
       break;
   }

package/lib/pages/home-page-data-list/index.js

@@ -53,7 +53,7 @@ var HomePageDataList = function HomePageDataList() {
 
 
   var _useState5 = (0, _react.useState)({
-    name: (0, _getLocale.getLocale)('OKR_MyO_Butt_AllStates'),
+    name: (0, _getLocale.getLocale)('OKR_MyO_Butt_AllStatee'),
     yearNum: '2021',
     cycleType: '-1',
     yqmNum: '0'
@@ -114,7 +114,7 @@ var HomePageDataList = function HomePageDataList() {
     className: "".concat(preCls, "__header--back")
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "tu-icon-fanhui"
-  }), (0, _getLocale.getLocale)('Mod_Back')), /*#__PURE__*/_react["default"].createElement("b", null), source === 'align' && 'OKR 对齐', source === 'update' && 'OKR 更新', source === 'target' && '我的OKR'), /*#__PURE__*/_react["default"].createElement("div", {
+  }), (0, _getLocale.getLocale)('Mod_Back')), /*#__PURE__*/_react["default"].createElement("b", null), source === 'align' && (0, _getLocale.getLocale)('HP_OKRAlignment'), source === 'update' && (0, _getLocale.getLocale)('OKR_MyO_OKRUpdate'), source === 'target' && (0, _getLocale.getLocale)('OKR_Menu_Title_MyOKRs')), /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(preCls, "__main")
   }, /*#__PURE__*/_react["default"].createElement(_navSelector["default"], {
     source: source,

package/lib/utils/bs-global.js

@@ -56,7 +56,7 @@ var getUploadMaxSize = function getUploadMaxSize() {
 exports.getUploadMaxSize = getUploadMaxSize;
 
 function isWx() {
-  return getTenantInfo().Source == 860;
+  return (getTenantInfo().Source == 860 || getTenantInfo().Source == 964) && getTenantInfo().corpCreateType != 2;
 }
 /*
  *通过AppId,来查询是否开通这个产品

package/lib/utils/date-test-change.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testDayChange = exports.testDateDiff = void 0;
+exports.testDateDiff = exports.judgeTimeSpaceFromNow = void 0;
+
+var _constant = require("./constant");
 
 var _getLocale = require("./getLocale");
 
@@ -14,56 +16,14 @@ var testDateDiff = function testDateDiff(date) {
   var now = Date.now();
   var diffDay = Math.floor((now - testTime) / (1000 * 60 * 60 * 24));
   return diffDay;
-}; // //精确到分的检测
-// export const testMinChange = (date) => {
-//   if (!date)
-//     return '暂未'
-//   const now = new Date()
-//   //兼容传进来 月份/日期
-//   const date1 = date.length == 5 ? now.getFullYear() + '/' + date : date
-//   const testTime = new Date(date1)
-//   if (testTime.getFullYear() === now.getFullYear()) {
-//     if (now.getMonth() === testTime.getMonth()) {
-//       const dateDiff = now.getDate() - testTime.getDate()
-//       switch (dateDiff) {
-//         case 2:
-//           return `前天${testTime.getHours()}:${testTime.getMinutes()}`
-//           break;
-//         case 1:
-//           return `昨天${testTime.getHours()}:${testTime.getMinutes()}`
-//           break;
-//         case 0:
-//           const tTime = Date.parse(date)
-//           const nTime = Date.now()
-//           const hourDiff = Math.floor((nTime - tTime) / (1000 * 60 * 60))
-//           if (hourDiff < 1) {
-//             const minDiff = Math.floor((nTime - tTime) / (1000 * 60))
-//             if (minDiff < 1) {
-//               return getLocale('Pro_page_Int_Justnow')
-//             } else {
-//               return `${minDiff}分钟前`
-//             }
-//           } else {
-//             return `${hourDiff}小时前`
-//           }
-//           break
-//         default:
-//           return `${testTime.getMonth() + 1}/${testTime.getDate()} ${testTime.getHours()}:${testTime.getMinutes()}`
-//       }
-//     } else {
-//       return `${testTime.getMonth() + 1}/${testTime.getDate()} ${testTime.getHours()}:${testTime.getMinutes()}`
-//     }
-//   } else {
-//     return `${testTime.getFullYear()}/${testTime.getMonth() + 1}/${testTime.getDate()} ${testTime.getHours()}:${testTime.getMinutes()}`
-//   }
-// }
-//精确到天的检测
+}; //精确到天的检测
 
 
 exports.testDateDiff = testDateDiff;
 
-var testDayChange = function testDayChange(date) {
-  if (!date) return '暂未'; // 兼容safari，safari不支持yy-mm-dd格式，支持yy/mm/dd格式
+var judgeTimeSpaceFromNow = function judgeTimeSpaceFromNow(date) {
+  if (!date) return (0, _getLocale.getLocale)('OKR_MyO_KRP_Notupdated');
+  var months = (0, _constant.getMonth)(); // 兼容safari，safari不支持yy-mm-dd格式，支持yy/mm/dd格式
 
   var handleDate = date.length === 5 ? new Date().getFullYear() + '/' + date : date.replace(/-/g, '/').split('T').join(' ').split('.')[0];
   var timeDateObj = new Date(handleDate);
@@ -84,30 +44,33 @@ var testDayChange = function testDayChange(date) {
   }
 
   if (secondDiff < 60) {
-    return "".concat(secondDiff, "\u79D2\u524D");
+    return "".concat(secondDiff).concat((0, _getLocale.getLocale)('Mood_secago'));
   }
 
   if (secondDiff < 60 * 60) {
-    return "".concat(Math.floor(secondDiff / 60), "\u5206\u949F\u524D");
+    return "".concat(Math.floor(secondDiff / 60)).concat((0, _getLocale.getLocale)('Tasks_Tab_MyS_minuteago'));
   }
 
   if (secondDiff < 60 * 60 * 24) {
-    return "".concat(Math.floor(secondDiff / (60 * 60)), "\u5C0F\u65F6\u524D");
+    return "".concat(Math.floor(secondDiff / (60 * 60))).concat((0, _getLocale.getLocale)('Mood_hoursago'));
   }
 
   if (secondDiff < 60 * 60 * 24 * 2 && nowDate - 1 === timeDate) {
-    return (0, _getLocale.getLocale)('OKR_MyO_Pr_Text_Yesterday');
+    return "".concat((0, _getLocale.getLocale)('OKR_MyO_Pr_Text_Yesterday'), " ").concat(timeHours + ":" + timeMinutes);
   }
 
   if (secondDiff < 60 * 60 * 24 * 3 && nowDate - 2 === timeDate) {
-    return "\u524D\u5929";
+    return "".concat((0, _getLocale.getLocale)('Mood_2daysago'), " ").concat(timeHours + ":" + timeMinutes);
   }
 
   if (timeYear === nowYear) {
-    return "".concat(timeMonth, "\u6708").concat(timeDate, "\u65E5");
+    var _dateStr = months[timeMonth - 1] + (_getLocale.isEn ? " ".concat(timeDate, " ") : "".concat(timeDate, "\u65E5"));
+
+    return "".concat(_dateStr, " ").concat(timeHours < 10 ? "0" + timeHours : timeHours, ":").concat(timeMinutes < 10 ? "0" + timeMinutes : timeMinutes);
   }
 
-  return "".concat(timeYear, "\u5E74").concat(timeMonth, "\u6708").concat(timeDate, "\u65E5");
+  var dateStr = (_getLocale.isEn ? '' : "".concat(timeYear, "\u5E74")) + months[timeMonth - 1] + (_getLocale.isEn ? " ".concat(timeDate, " ") : "".concat(timeDate, "\u65E5")) + (_getLocale.isEn ? ",".concat(timeYear) : '');
+  return "".concat(dateStr, " ").concat(timeHours < 10 ? "0" + timeHours : timeHours, ":").concat(timeMinutes < 10 ? "0" + timeMinutes : timeMinutes);
 };
 
-exports.testDayChange = testDayChange;
+exports.judgeTimeSpaceFromNow = judgeTimeSpaceFromNow;

package/lib/utils/i18n-front-translate.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.i18nLimitCharacters = void 0;
+exports.inputWordTrans = exports.i18nLimitCharacters = void 0;
 
 var _getLocale = require("./getLocale");
 
@@ -15,4 +15,14 @@ var i18nLimitCharacters = function i18nLimitCharacters(length) {
   }
 };
 
-exports.i18nLimitCharacters = i18nLimitCharacters;
+exports.i18nLimitCharacters = i18nLimitCharacters;
+
+var inputWordTrans = function inputWordTrans(inputValueLength, maxLength) {
+  if (_getLocale.isEn) {
+    return "Already entered ".concat(inputValueLength, " characters,max ").concat(maxLength, " characters");
+  } else {
+    return "\u5DF2\u8F93\u5165".concat(inputValueLength, "\u4E2A\u5B57\uFF0C\u6700\u591A\u53EF\u8F93\u5165").concat(maxLength, "\u5B57");
+  }
+};
+
+exports.inputWordTrans = inputWordTrans;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titaui/pc",
-  "version": "1.9.27",
+  "version": "1.9.31",
   "nameCN": "",
   "description": "",
   "main": "src/index.js",

package/src/components/common-share/index.scss

@@ -166,9 +166,9 @@
 .okr-share-mblog {
   &__container {
     width: 480px;
-    height: 420px;
+    min-height: 420px;
     background-color: #fff;
-    border-radius: 6px;
+    border-radius: 12px;
   }
   &__header {
     height: 58px;

package/src/components/confidence/index.scss

@@ -7,7 +7,6 @@ $text-color: #89919f;
   justify-content: center;
   font-size: 12px;
   line-height: 18px;
-  width: 53px;
   &--editable {
     cursor: pointer;
     position: relative;
@@ -27,7 +26,7 @@ $text-color: #89919f;
 
   &-icon {
     display: inline-block;
-    width: 16px;
+    min-width: 16px;
     height: 16px;
     background: url("./heart.svg") no-repeat;
     margin-right: 6px;

package/src/components/confidence/index.tsx

@@ -46,7 +46,7 @@ const Confidence = (props: IConfidenceProps) => {
             <span className={classNames(`${popPrecls}-heart`)}>
               <Heart i={i} confidence={value} />
             </span>
-            <span className={`${popPrecls}-score`}>{i}分</span>
+            <span className={`${popPrecls}-score`}>{i} {getLocale('Per_Set_Form_Quantifier_Points')}</span>
           </li>
         ))}
       </ul>
@@ -60,7 +60,7 @@ const Confidence = (props: IConfidenceProps) => {
         })}
       >
         <span className="titaui-kr-heart-icon" />
-        <span className="titaui-kr-heart-text">{value} 分</span>
+        <span className="titaui-kr-heart-text">{value} {getLocale('Per_Set_Form_Quantifier_Points')}</span>
       </div>
     );
   }
@@ -73,7 +73,7 @@ const Confidence = (props: IConfidenceProps) => {
           })}
         >
           <span className="titaui-kr-heart-icon" />
-          <span className="titaui-kr-heart-text">{value} 分</span>
+          <span className="titaui-kr-heart-text">{value} {getLocale('Per_Set_Form_Quantifier_Points')}</span>
         </div>
       </Popup>
     </Tooltip>

package/src/components/create-okr-modal/fields/index.scss

@@ -135,6 +135,7 @@ $FontFamily: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-seri
     text-overflow: ellipsis;
     margin-right: 10px;
     word-break: keep-all;
+    white-space: nowrap;
   }
   .user__name--hidden {
     font-size: 12px;

package/src/components/create-okr-modal/fields/input-with-err-popup.tsx

@@ -1,4 +1,5 @@
 import React, { FC, Fragment } from "react";
+import { inputWordTrans } from "../../../utils/i18n-front-translate";
 import Popup from "../../popup";
 import "./index.scss";
 
@@ -21,7 +22,7 @@ const StrLengthOverflowError: FC<IErrorPopContentProps> = ({
     <Fragment>
       {strLength > maxLength ? (
         <span className={"error-popup-text-wrapper"}>
-          {`已输入 ${strLength} 个字，最多可输入 ${maxLength} 个字`}
+          {inputWordTrans(strLength, maxLength)}
         </span>
       ) : null}
     </Fragment>

package/src/components/dialog/index.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import Dialog from 'rc-dialog';
+import loading from './loading.png';
 import { getLocale } from '../../utils/getLocale'
 
 import 'rc-dialog/assets/index.css';
@@ -20,25 +21,38 @@ export default props => {
     noCloseIcon,
     noFooterLine,
     visible,
-    extraClass=[],
+    extraClass = [],
     extendFooterBtn,
     disabled = false,
+    confirmLoading = false,
     ...restProps
   } = props;
 
+  const handleOK = () => {
+    if (confirmLoading) return
+    onOk && onOk()
+  }
+
   const baseFooter = [
     extendFooterBtn,
     <span key="cancel" className={classNames(`${preCls}__btn`, `${preCls}__btn-cancel`)} onClick={onCancel}>
       <span className={classNames(`${preCls}__btn-cancel-text`)}>{cancelText}</span>
     </span>,
-    <span key="ok" className={classNames(`${preCls}__btn`, `${preCls}__btn-ok`, {[`${preCls}__btn-ok-not-allowed`]:disabled})} onClick={onOk}>
-      <span className={classNames(`${preCls}__btn-ok-text`)}>{okText}</span>
+    <span key="ok" className={classNames(`${preCls}__btn`, `${preCls}__btn-ok`, { [`${preCls}__btn-ok-not-allowed`]: disabled || confirmLoading })} onClick={handleOK}>
+      {confirmLoading ?
+        <span className={classNames(`${preCls}__btn-ok-loading`)}>
+          <img className={classNames(`${preCls}__btn-ok-loading-icon`)} src={loading} />
+          {getLocale('Mod_loading')}
+        </span>
+        :
+        <span className={classNames(`${preCls}__btn-ok-text`)}>{okText}</span>
+      }
     </span>
   ];
 
   return <Dialog
     visible={visible}
-    className={classNames(preCls,[...extraClass], { 
+    className={classNames(preCls, [...extraClass], {
       [`${preCls}-no-head-line`]: noHeadLine,
       [`${preCls}-no-footer-line`]: noFooterLine,
       [`${preCls}-no-close`]: noCloseIcon,

package/src/components/dialog/index.scss

@@ -1,13 +1,23 @@
-$font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+$font-family: -apple-system,
+Arial,
+Verdana,
+Helvetica Neue,
+Helvetica,
+sans-serif,
+PingFang SC,
+Microsoft YaHei;
+
 .rc-dialog-close {
   z-index: 100;
 }
+
 .rc-dialog-wrap {
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1299 !important;
 }
+
 .rc-dialog-mask {
   z-index: 1299 !important;
   background: rgba(20, 28, 40, 0.7) !important;
@@ -16,6 +26,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
 .titaui-dialog {
   border-radius: 24px;
   overflow: hidden;
+
   &.rc-dialog {
     display: inline-block;
     margin: 0;
@@ -49,10 +60,12 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
   .rc-dialog-header {
     padding: 18px 32px;
   }
+
   .rc-dialog-body {
     // padding: 0 32px 0 32px;
     padding: 0;
   }
+
   .rc-dialog-footer {
     padding: 20px 32px;
     display: flex;
@@ -72,7 +85,8 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
     justify-content: center;
     cursor: pointer;
     box-sizing: border-box;
-    & > span {
+
+    &>span {
       font-size: 14px;
       font-family: $font-family;
       font-weight: 400;
@@ -88,20 +102,36 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
     border: 1px solid #2879ff;
     color: #ffffff;
     transition: 0.2s all;
+    user-select: none;
+
     &:hover {
       border: 1px solid #5c8eff;
       background: #5c8eff;
       color: #ffffff;
     }
+
     &-not-allowed {
+      background-color: #5C8EFF;
       cursor: not-allowed;
     }
+
+    &-loading {
+      &-icon {
+        width: 14px;
+        margin-right: 6px;
+        animation-name: spin;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+        animation-duration: 1s;
+      }
+    }
   }
 
   &__btn-cancel {
     border: 1px solid #DFE3EA;
     color: #6f7886;
     transition: 0.2s all;
+
     &:hover {
       border: 1px solid #2879ff;
       color: #2879ff;
@@ -114,11 +144,13 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
     border-bottom: none;
   }
 }
+
 .titaui-dialog.titaui-dialog-no-footer-line {
   .rc-dialog-footer {
     border-top: none;
   }
 }
+
 .titaui-dialog.titaui-dialog-no-close {
   .rc-dialog-close {
     display: none;
@@ -130,3 +162,13 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
     display: none;
   }
 }
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/dynamic/dynamic-item/dynamic-create-o/index.scss

@@ -36,6 +36,7 @@
       line-height: 18px;
       margin-right: 4px;
       margin-top: 1px;
+      word-break: keep-all;
     }
     &-name {
       font-size: 14px;