@luck-design-biz/luckda 0.0.22-3 → 0.0.22-5

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

@@ -0,0 +1,238 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import React, { useRef, useReducer, useEffect } from 'react';
+import { Radio, Icon, Tooltip, Input } from 'luck-design/antd';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { Segmented } from '@luck-helper/ui-design';
+import styles from "../style/tabitems.less";
+import generateShortUuid from "../../engine/tools/lcid";
+import { SortBox, SortItem } from "../components/SortBox";
+import { TabEditor, TabEditorItem } from "../components/TabEditor";
+import PopConfirm from "../components/PopConfirm";
+import { PopForm, PopFormItem, PopFormItemLeft, PopFormItemRight } from "../components/PopForm";
+function itemsReducer(state, action) {
+  switch (action.type) {
+    case 'add':
+      return [].concat(_toConsumableArray(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 ? _objectSpread(_objectSpread({}, item), action.payload.data) : item;
+      });
+    case 'active':
+      return state.map(function (item) {
+        item.active = false;
+        return item.id === action.payload.id ? _objectSpread(_objectSpread({}, item), action.payload.data) : item;
+      });
+    case 'new':
+      return _toConsumableArray(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 _toConsumableArray(newItems);
+    default:
+      throw new Error();
+  }
+}
+var TabItems = function TabItems(_ref) {
+  var options = _ref.options,
+    onChange = _ref.onChange;
+  var _useReducer = useReducer(itemsReducer, options),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    items = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var isFirstRender = useRef(true);
+  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(generateShortUuid()),
+        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.createElement(SortBox, {
+    datas: items.map(function (item) {
+      return item.id;
+    }),
+    onChange: handleSortChange
+  }, /*#__PURE__*/React.createElement(TabEditor, {
+    handleAdd: handleAdd
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(SortItem, {
+      id: item.id
+    }, /*#__PURE__*/React.createElement(TabEditorItem, {
+      left: /*#__PURE__*/React.createElement(TabItemLeft, {
+        item: item,
+        dispatch: dispatch
+      }),
+      right: /*#__PURE__*/React.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: _objectSpread(_objectSpread({}, item), {}, {
+          active: true
+        })
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Radio, {
+    checked: item.active,
+    onClick: handleActiveChange
+  })), /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+    title: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.tabsitems.edit',
+      label: '添加'
+    })
+  }, /*#__PURE__*/React.createElement(PopConfirm, {
+    placement: "bottomLeft",
+    title: /*#__PURE__*/React.createElement(TabItemEditor, {
+      item: item,
+      dispatch: dispatch
+    })
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: styles['tabitem-action'],
+    type: "edit"
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    title: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.tabsitems.delete',
+      label: '删除'
+    })
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: styles['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: _objectSpread(_objectSpread({}, item), {}, {
+          name: e.target.value
+        })
+      }
+    });
+  };
+  var handleEffectChange = function handleEffectChange(value) {
+    console.log('value', value);
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: item.id,
+        data: _objectSpread(_objectSpread({}, item), {}, {
+          effect: value.option.value
+        })
+      }
+    });
+  };
+  var handleResChange = function handleResChange(e) {
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: item.id,
+        data: _objectSpread(_objectSpread({}, item), {}, {
+          resid: e.target.value
+        })
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(PopForm, null, /*#__PURE__*/React.createElement(PopFormItem, null, /*#__PURE__*/React.createElement(PopFormItemLeft, null, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.tabname',
+    label: '名称'
+  })), /*#__PURE__*/React.createElement(PopFormItemRight, null, /*#__PURE__*/React.createElement(Input, {
+    size: "small",
+    value: item.name,
+    onChange: handleNameChange,
+    placeholder: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.tabname.placeholder',
+      label: '请输入标签名称'
+    })
+  }))), /*#__PURE__*/React.createElement(PopFormItem, null, /*#__PURE__*/React.createElement(PopFormItemLeft, null, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.id',
+    label: '编号'
+  })), /*#__PURE__*/React.createElement(PopFormItemRight, null, /*#__PURE__*/React.createElement(Input, {
+    size: "small",
+    value: item.id,
+    disabled: true
+  }))), /*#__PURE__*/React.createElement(PopFormItem, null, /*#__PURE__*/React.createElement(PopFormItemLeft, null, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.reskey',
+    label: '资源串'
+  })), /*#__PURE__*/React.createElement(PopFormItemRight, null, /*#__PURE__*/React.createElement(Input, {
+    size: "small",
+    value: item.resid,
+    onChange: handleResChange,
+    placeholder: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.reskey.placeholder',
+      label: '请输入资源串'
+    })
+  }))), /*#__PURE__*/React.createElement(PopFormItem, null, /*#__PURE__*/React.createElement(PopFormItemLeft, null, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.reskey',
+    label: '控制效果'
+  })), /*#__PURE__*/React.createElement(PopFormItemRight, null, /*#__PURE__*/React.createElement(Segmented, {
+    field: "effect",
+    options: options,
+    onChange: handleEffectChange,
+    value: item.effect
+  }))));
+};
+export default TabItems;

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

@@ -0,0 +1,85 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { stringify } from 'qs';
+import { request } from '@luck-design-biz/base/utils';
+import api from "@/services/ApiConfig";
+export function readAllLang(_x, _x2) {
+  return _readAllLang.apply(this, arguments);
+}
+function _readAllLang() {
+  _readAllLang = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params, body) {
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          return _context.abrupt("return", request("".concat(api.BASE_HOST, "/lang/sysLanguageKeys/readAll?").concat(stringify(params)), {
+            method: 'POST',
+            body: body
+          }));
+        case 1:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _readAllLang.apply(this, arguments);
+}
+export function doAddLang(_x3, _x4) {
+  return _doAddLang.apply(this, arguments);
+}
+function _doAddLang() {
+  _doAddLang = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(params, body) {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          return _context2.abrupt("return", request("".concat(api.BASE_HOST, "/lang/sysLanguageKeys/add?").concat(stringify(params)), {
+            method: 'POST',
+            body: body
+          }));
+        case 1:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _doAddLang.apply(this, arguments);
+}
+export function doUpdateLang(_x5, _x6) {
+  return _doUpdateLang.apply(this, arguments);
+}
+function _doUpdateLang() {
+  _doUpdateLang = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(params, body) {
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          return _context3.abrupt("return", request("".concat(api.BASE_HOST, "/lang/sysLanguageKeys/update?").concat(stringify(params)), {
+            method: 'POST',
+            body: body
+          }));
+        case 1:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return _doUpdateLang.apply(this, arguments);
+}
+export function doDeleteLang(_x7, _x8) {
+  return _doDeleteLang.apply(this, arguments);
+}
+function _doDeleteLang() {
+  _doDeleteLang = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(params, body) {
+    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          return _context4.abrupt("return", request("".concat(api.BASE_HOST, "/lang/sysLanguageKeys/delete?").concat(stringify(params)), {
+            method: 'POST',
+            body: body
+          }));
+        case 1:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  }));
+  return _doDeleteLang.apply(this, arguments);
+}

package/es/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;
+      }
+    }
+  }
+}

package/es/lowcode/painter/style/design.less

@@ -0,0 +1,82 @@
+.box {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 0;
+  display: none;
+  pointer-events: none;
+  cursor: pointer;
+  overflow: visible;
+  z-index: 9999;
+}
+
+.lc-painter-design {
+  position: relative;
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+
+  &-toolbar {
+    width: 100%;
+    height: 40px;
+    padding: 8px 16px;
+    border-bottom: 1px solid #e3e3e3;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    .i18n-selecter {
+      width: 125px;
+      padding: 0 8px;
+    }
+    .toolbar-item {
+      display: inline-block;
+      width: 32px;
+      height: 32px;
+      border-radius: 3px;
+      padding: 6px;
+      margin: 0 4px;
+      cursor: pointer;
+      text-align: center;
+      color: #8c8c8c;
+    }
+    .toolbar-item:hover {
+      color: #262626;
+    }
+    .toolbar-item.actived {
+      color: #8c8c8c;
+      background: #f1f2f3;
+    }
+  }
+
+  &-workspace {
+    width: calc(100% - 16px);
+    height: calc(100% - 48px);
+    position: relative;
+    margin: 8px 8px 0 8px;
+    background-color: #fff;
+    overflow: hidden;
+  }
+  &-simulator {
+    overflow-x: hidden;
+    overflow-y: auto;
+    :global {
+      .ant-form-item {
+        pointer-events: none;
+      }
+    }
+  }
+
+  &-detector {
+    border: 1px dashed var(--ant-primary-color);
+    background-color: color-mix(in sRGB, var(--ant-primary-color), transparent 95%);
+    .box();
+  }
+
+  &-selector {
+    border: 2px solid var(--ant-primary-6);
+    .box();
+  }
+}

package/es/lowcode/painter/style/icon-selector.less

@@ -0,0 +1,22 @@
+.lc-painter-panel-section-iconselector {
+  
+  .components-search {
+    padding: 0 20px;
+  }
+
+  .icon-warp {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    .icon-box {
+      cursor: pointer;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .icon-item {
+        font-size: 20px;
+      }
+    }
+  }
+}

package/es/lowcode/painter/style/icon.less

@@ -0,0 +1,11 @@
+.lc-painter-panel-section-icon {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  .selecor{
+    font-size: 12px;
+    margin-left: 6px;
+  }
+}

package/es/lowcode/painter/style/index.less

@@ -0,0 +1,6 @@
+.lc-painter {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+}

package/es/lowcode/painter/style/layout-ratio.less

@@ -0,0 +1,51 @@
+.lc-painter-panel-section-layoutratio {
+  @gridbox-width: 58px; // 定义变量
+  @grid-gap: 10px; // 间隔变量
+  @grid-items-per-row: 4; // 每行的gridbox数量
+
+  margin: 0;
+  align-items: center;
+
+  .ratio-view {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+
+    .gridbox-container {
+      width: calc(@grid-items-per-row * @gridbox-width + (@grid-items-per-row - 1) * @grid-gap);
+      margin: 0 auto; // 保持这个居中
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: @grid-gap;
+    }
+
+    .gridbox {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: 2px;
+      width: @gridbox-width;
+      height: 34px;
+      border-radius: 5px;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      padding: 3px;
+
+      &:hover {
+        cursor: pointer;
+        border-color: #3478ff;
+      }
+
+      &.current {
+        border-color: #3478ff;
+      }
+
+      .girditem {
+        background-color: rgb(192, 194, 196);
+      }
+    }
+  }
+
+  .ratio-input {
+    margin-top: 20px;
+  }
+}

package/es/lowcode/painter/style/outline.less

@@ -0,0 +1,28 @@
+.lc-painter-outline {
+  background-color: #fff;
+
+  .page-node {
+    cursor: pointer;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    height: 32px;
+    box-sizing: border-box;
+    position: relative;
+    transform: translateZ(0);
+    padding: 0 5px;
+  }
+  .page-node:hover,
+  .page-node.page-node-active {
+    background-color: #f6f7f8;
+  }
+
+  :global {
+    .ant-tree.ant-tree-show-line li:not(:last-child)::before {
+      height: calc(100% - 34px);
+    }
+    .ant-tree-switcher-noop svg {
+      display: none;
+    }
+  }
+}

package/es/lowcode/painter/style/panel-item.less

@@ -0,0 +1,22 @@
+.lc-painter-components-panelitem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 28px;
+  margin-bottom: 4px;
+
+  .item-label {
+    font-size: 12px;
+    width: 80px;
+  }
+
+  .item-component {
+    display: flex;
+    flex: 1;
+  }
+
+  /* 使.item-component-box的直接子元素铺满 */
+  .item-component > * {
+    flex-grow: 1;
+  }
+}