@luck-design-biz/luckda 0.0.22 → 0.0.24-1

package/lib/lowcode/painter/panel-section/StylePanel/StyleContext.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyleProvider = StyleProvider;
+exports.styleToCSS = void 0;
+exports.useEditor = useEditor;
+exports.useStyle = useStyle;
+exports.useStyleDispatch = useStyleDispatch;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = require("react");
+var _postcss = _interopRequireDefault(require("postcss"));
+var StyleContext = /*#__PURE__*/(0, _react.createContext)(null);
+var StyleDispatchContext = /*#__PURE__*/(0, _react.createContext)(null);
+var EditorContext = /*#__PURE__*/(0, _react.createContext)(null);
+function StyleProvider(_ref) {
+  var onChange = _ref.onChange,
+    children = _ref.children,
+    value = _ref.value;
+  var editorRef = (0, _react.useRef)(null);
+  var styleReducer = function styleReducer(state, action) {
+    switch (action.type) {
+      case 'edit':
+        var newState = (0, _objectSpread2.default)({}, state);
+        newState[action.payload.id] = action.payload.value;
+        if (editorRef.current) {
+          editorRef.current.editor.setValue(styleToCSS(newState));
+        }
+        return newState;
+      case 'code':
+        return parseCSS(action.payload);
+      default:
+        throw new Error();
+    }
+  };
+  var _useReducer = (0, _react.useReducer)(styleReducer, parseCSS(value)),
+    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+    style = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  (0, _react.useEffect)(function () {
+    if (style) {
+      var css = styleToCSS(style);
+      if (onChange) onChange(style, css);
+    }
+  }, [style]);
+  return /*#__PURE__*/React.createElement(StyleContext.Provider, {
+    value: style
+  }, /*#__PURE__*/React.createElement(EditorContext.Provider, {
+    value: editorRef
+  }, /*#__PURE__*/React.createElement(StyleDispatchContext.Provider, {
+    value: dispatch
+  }, children)));
+}
+function useStyle() {
+  return (0, _react.useContext)(StyleContext);
+}
+function useStyleDispatch() {
+  return (0, _react.useContext)(StyleDispatchContext);
+}
+function useEditor() {
+  return (0, _react.useContext)(EditorContext);
+}
+var parseCSS = function parseCSS(cssString) {
+  // 创建一个空对象来存储解析后的样式
+  var parsedStyles = {};
+  if (cssString) {
+    try {
+      // 解析CSS字符串
+      var ast = _postcss.default.parse(cssString);
+
+      // 遍历AST中的每个规则
+      ast.walkDecls(function (decl) {
+        // 将每个声明的属性和值存储在对象中
+        parsedStyles[decl.prop] = decl.value;
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  // 返回包含所有样式的对象
+  return parsedStyles;
+};
+var styleToCSS = exports.styleToCSS = function styleToCSS(styleObject) {
+  // Create a PostCSS root node
+  var root = _postcss.default.root();
+
+  // Create a new rule for the :root selector
+  var rule = _postcss.default.rule({
+    selector: ':root'
+  });
+
+  // Iterate over the style object and add declarations to the rule
+  Object.keys(styleObject).forEach(function (property) {
+    var value = styleObject[property];
+    var decl = _postcss.default.decl({
+      prop: property.replace(/([A-Z])/g, '-$1').toLowerCase(),
+      // Convert camelCase to kebab-case
+      value: value
+    });
+    rule.append(decl);
+  });
+
+  // Append the rule to the root
+  root.append(rule);
+
+  // Convert the root to a CSS string
+  return root.toString();
+};

package/lib/lowcode/painter/panel-section/StylePanel/Width.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _PanelItem = _interopRequireDefault(require("../../components/PanelItem"));
+var _NumberInput = _interopRequireDefault(require("../../components/NumberInput"));
+var _utils = require("@luck-design-biz/base/utils");
+var _StyleContext = require("./StyleContext");
+var _excluded = ["field"];
+var options = [{
+  label: 'px',
+  value: 'px'
+}, {
+  label: '%',
+  value: '%'
+}, {
+  label: 'A',
+  value: 'auto'
+}];
+function _default(_ref) {
+  var field = _ref.field,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var style = (0, _StyleContext.useStyle)();
+  var dispatch = (0, _StyleContext.useStyleDispatch)();
+  return /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.height',
+      label: '高'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_NumberInput.default, (0, _extends2.default)({
+    options: options,
+    value: style[field],
+    min: 0,
+    max: 10000,
+    onChange: function onChange(value) {
+      dispatch({
+        type: 'edit',
+        payload: {
+          id: field,
+          value: value
+        }
+      });
+    },
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.height.ph',
+      label: '请输入高度'
+    })
+  }, rest)));
+}

package/lib/lowcode/painter/panel-section/StylePanel/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StyleContext = require("./StyleContext");
+var _MainPanel = _interopRequireDefault(require("./MainPanel"));
+var StylePanel = function StylePanel(_ref) {
+  var onChange = _ref.onChange,
+    value = _ref.value;
+  return /*#__PURE__*/_react.default.createElement(_StyleContext.StyleProvider, {
+    onChange: onChange,
+    value: value
+  }, /*#__PURE__*/_react.default.createElement(_MainPanel.default, null));
+};
+var _default = exports.default = StylePanel;

package/lib/lowcode/painter/panel-section/TabItems.js

@@ -0,0 +1,245 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _uiDesign = require("@luck-helper/ui-design");
+var _tabitems = _interopRequireDefault(require("../style/tabitems.less"));
+var _SortBox = require("../components/SortBox");
+var _TabEditor = require("../components/TabEditor");
+var _PopConfirm = _interopRequireDefault(require("../components/PopConfirm"));
+var _PopForm = require("../components/PopForm");
+function itemsReducer(state, action) {
+  switch (action.type) {
+    case 'add':
+      return [].concat((0, _toConsumableArray2.default)(state), [action.payload]);
+    case 'delete':
+      return state.filter(function (item) {
+        return item.id !== action.payload;
+      });
+    case 'edit':
+      return state.map(function (item) {
+        return item.id === action.payload.id ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), action.payload.data) : item;
+      });
+    case 'active':
+      return state.map(function (item) {
+        item.active = false;
+        return item.id === action.payload.id ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), action.payload.data) : item;
+      });
+    case 'new':
+      return (0, _toConsumableArray2.default)(action.payload);
+    case 'sort':
+      var sortItems = action.payload;
+      var newItems = state.sort(function (a, b) {
+        var indexA = sortItems.indexOf(a.id);
+        var indexB = sortItems.indexOf(b.id);
+        return indexA - indexB;
+      });
+      return (0, _toConsumableArray2.default)(newItems);
+    default:
+      throw new Error();
+  }
+}
+var TabItems = function TabItems(_ref) {
+  var options = _ref.options,
+    onChange = _ref.onChange;
+  var _useReducer = (0, _react.useReducer)(itemsReducer, options),
+    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+    items = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var isFirstRender = (0, _react.useRef)(true);
+  (0, _react.useEffect)(function () {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    if (onChange) onChange(items);
+  }, [items, onChange]);
+  var handleAdd = function handleAdd() {
+    dispatch({
+      type: 'add',
+      payload: {
+        id: "tab_".concat((0, _utils.suid)()),
+        name: "\u9009\u9879".concat(items.length + 1),
+        active: false,
+        resid: null,
+        effect: 'disable'
+      }
+    });
+  };
+  var handleSortChange = function handleSortChange(sortItems) {
+    dispatch({
+      type: 'sort',
+      payload: sortItems
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_SortBox.SortBox, {
+    datas: items.map(function (item) {
+      return item.id;
+    }),
+    onChange: handleSortChange
+  }, /*#__PURE__*/_react.default.createElement(_TabEditor.TabEditor, {
+    handleAdd: handleAdd
+  }, items.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_SortBox.SortItem, {
+      id: item.id
+    }, /*#__PURE__*/_react.default.createElement(_TabEditor.TabEditorItem, {
+      left: /*#__PURE__*/_react.default.createElement(TabItemLeft, {
+        item: item,
+        dispatch: dispatch
+      }),
+      right: /*#__PURE__*/_react.default.createElement(TabItemRight, {
+        item: item,
+        dispatch: dispatch
+      }),
+      item: item,
+      dispatch: dispatch
+    }));
+  })));
+};
+var TabItemLeft = function TabItemLeft(_ref2) {
+  var item = _ref2.item,
+    dispatch = _ref2.dispatch;
+  var handleActiveChange = function handleActiveChange() {
+    dispatch({
+      type: 'active',
+      payload: {
+        id: item.id,
+        data: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          active: true
+        })
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    checked: item.active,
+    onClick: handleActiveChange
+  })), /*#__PURE__*/_react.default.createElement("div", null, item.name));
+};
+var TabItemRight = function TabItemRight(_ref3) {
+  var item = _ref3.item,
+    dispatch = _ref3.dispatch;
+  var handleDelete = function handleDelete() {
+    dispatch({
+      type: 'delete',
+      payload: item.id
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.tabsitems.edit',
+      label: '添加'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_PopConfirm.default, {
+    placement: "bottomLeft",
+    title: /*#__PURE__*/_react.default.createElement(TabItemEditor, {
+      item: item,
+      dispatch: dispatch
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    className: _tabitems.default['tabitem-action'],
+    type: "edit"
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.tabsitems.delete',
+      label: '删除'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    className: _tabitems.default['tabitem-action'],
+    type: "delete",
+    onClick: handleDelete
+  })));
+};
+var TabItemEditor = function TabItemEditor(_ref4) {
+  var item = _ref4.item,
+    dispatch = _ref4.dispatch;
+  var options = [{
+    label: '禁用',
+    value: 'disable'
+  }, {
+    label: '隐藏',
+    value: 'middle'
+  }];
+  var handleNameChange = function handleNameChange(e) {
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: item.id,
+        data: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          name: e.target.value
+        })
+      }
+    });
+  };
+  var handleEffectChange = function handleEffectChange(value) {
+    console.log('value', value);
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: item.id,
+        data: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          effect: value.option.value
+        })
+      }
+    });
+  };
+  var handleResChange = function handleResChange(e) {
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: item.id,
+        data: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          resid: e.target.value
+        })
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_PopForm.PopForm, null, /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItem, null, /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemLeft, null, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.tabname',
+    label: '名称'
+  })), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemRight, null, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "small",
+    value: item.name,
+    onChange: handleNameChange,
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.tabname.placeholder',
+      label: '请输入标签名称'
+    })
+  }))), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItem, null, /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemLeft, null, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.id',
+    label: '编号'
+  })), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemRight, null, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "small",
+    value: item.id,
+    disabled: true
+  }))), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItem, null, /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemLeft, null, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.reskey',
+    label: '资源串'
+  })), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemRight, null, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "small",
+    value: item.resid,
+    onChange: handleResChange,
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.reskey.placeholder',
+      label: '请输入资源串'
+    })
+  }))), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItem, null, /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemLeft, null, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.reskey',
+    label: '控制效果'
+  })), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemRight, null, /*#__PURE__*/_react.default.createElement(_uiDesign.Segmented, {
+    field: "effect",
+    options: options,
+    onChange: handleEffectChange,
+    value: item.effect
+  }))));
+};
+var _default = exports.default = TabItems;

package/lib/lowcode/painter/services/I18n.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.doAddLang = doAddLang;
+exports.doDeleteLang = doDeleteLang;
+exports.doUpdateLang = doUpdateLang;
+exports.readAllLang = readAllLang;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _qs = require("qs");
+var _utils = require("@luck-design-biz/base/utils");
+var _ApiConfig = _interopRequireDefault(require("@/services/ApiConfig"));
+function readAllLang(_x, _x2) {
+  return _readAllLang.apply(this, arguments);
+}
+function _readAllLang() {
+  _readAllLang = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(params, body) {
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          return _context.abrupt("return", (0, _utils.request)("".concat(_ApiConfig.default.BASE_HOST, "/lang/sysLanguageKeys/readAll?").concat((0, _qs.stringify)(params)), {
+            method: 'POST',
+            body: body
+          }));
+        case 1:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _readAllLang.apply(this, arguments);
+}
+function doAddLang(_x3, _x4) {
+  return _doAddLang.apply(this, arguments);
+}
+function _doAddLang() {
+  _doAddLang = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(params, body) {
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          return _context2.abrupt("return", (0, _utils.request)("".concat(_ApiConfig.default.BASE_HOST, "/lang/sysLanguageKeys/add?").concat((0, _qs.stringify)(params)), {
+            method: 'POST',
+            body: body
+          }));
+        case 1:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _doAddLang.apply(this, arguments);
+}
+function doUpdateLang(_x5, _x6) {
+  return _doUpdateLang.apply(this, arguments);
+}
+function _doUpdateLang() {
+  _doUpdateLang = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3(params, body) {
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          return _context3.abrupt("return", (0, _utils.request)("".concat(_ApiConfig.default.BASE_HOST, "/lang/sysLanguageKeys/update?").concat((0, _qs.stringify)(params)), {
+            method: 'POST',
+            body: body
+          }));
+        case 1:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return _doUpdateLang.apply(this, arguments);
+}
+function doDeleteLang(_x7, _x8) {
+  return _doDeleteLang.apply(this, arguments);
+}
+function _doDeleteLang() {
+  _doDeleteLang = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee4(params, body) {
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          return _context4.abrupt("return", (0, _utils.request)("".concat(_ApiConfig.default.BASE_HOST, "/lang/sysLanguageKeys/delete?").concat((0, _qs.stringify)(params)), {
+            method: 'POST',
+            body: body
+          }));
+        case 1:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  }));
+  return _doDeleteLang.apply(this, arguments);
+}

package/lib/lowcode/painter/style/button-type.less

@@ -0,0 +1,5 @@
+.lc-painter-panel-section-components-buttontype {
+  &-option {
+    width: 100%;
+  }
+}

package/lib/lowcode/painter/style/collapse.less

@@ -0,0 +1,21 @@
+.lc-painter-components-collapse {
+  .head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: hsla(210, 8%, 95%, 0.4);
+    border-bottom: 1px solid rgba(31, 56, 88, 0.1);
+    height: 32px;
+    padding: 0 12px;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .body {
+    padding: 12px;
+  }
+
+  .action {
+    font-size: 12px;
+  }
+}

package/lib/lowcode/painter/style/components.less

@@ -0,0 +1,90 @@
+.lc-painter-components {
+  .components-search {
+    padding: 0 20px;
+  }
+
+  .components-content {
+    border-top: 1px solid #e3e3e3;
+    margin-top: 20px;
+    padding-top: 10px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    .components-wrapper {
+      padding: 0 20px;
+      flex-basis: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-bottom: 20px;
+
+      h3 {
+        width: 100%; // 使标题占满整行
+        margin-left: 0;
+        margin-bottom: 10px;
+      }
+    }
+
+    .components-item {
+      display: flex;
+      width: 121px;
+      height: 37px;
+      align-items: center;
+      justify-content: center; // 水平居中对齐
+      padding: 10px;
+      border: 1px solid #ddd;
+      margin-right: 10px; // 添加右边距来分隔项
+      margin-bottom: 10px; // 添加底边距来分隔行
+      border-radius: 4px;
+      transition: border-color 0.3s;
+      box-sizing: border-box; // 确保边框和填充不会增加元素的宽度
+
+      &:hover {
+        cursor: pointer;
+        border-color: #3478ff;
+        color: #3478ff; // 文本颜色
+        .icon-wrapper {
+          color: #3478ff; // Icon颜色（如果Icon组件接受color属性）
+        }
+      }
+
+      .icon-wrapper {
+        display: flex;
+        font-size: 12px;
+        align-items: center;
+        margin-right: 10px;
+      }
+
+      .text-content {
+        flex-grow: 1;
+        text-align: left;
+
+        span {
+          font-size: 12px;
+          color: #333;
+          white-space: nowrap; // 防止文字换行
+          overflow: hidden; // 隐藏溢出的文字
+          text-overflow: ellipsis; // 使用省略号表示溢出
+        }
+
+        p {
+          display: none; // 隐藏描述，因为在这个组件尺寸中无法显示
+        }
+      }
+    }
+  }
+
+  :global{
+    .ant-tabs-nav-scroll{
+      display: flex;
+      justify-content: center;
+      .ant-tabs-tab{
+        font-size: 14px!important;
+      }
+    }
+  }
+}