@gct-paas/design 0.1.4-dev.7 → 0.1.4-dev.8

package/es/utils/field-attrs/index.d.ts

@@ -0,0 +1,8 @@
+import { basicAttrsUtils, FieldComponentConfig } from './basicAttrs';
+export { basicAttrsUtils };
+/**
+ * 设计器 字段 映射
+ * @param fieldType
+ * @returns
+ */
+export declare const transformField2Component: (fieldType: string) => FieldComponentConfig | undefined;

package/es/utils/field-attrs/index.mjs

@@ -0,0 +1,8 @@
+import { FieldTypeComponentMap } from './basicAttrs.mjs';
+export { basicAttrsUtils } from './basicAttrs.mjs';
+
+const transformField2Component = (fieldType) => {
+  return FieldTypeComponentMap[fieldType];
+};
+
+export { transformField2Component };

package/es/utils/find-deep-types/find-deep-types.d.ts

@@ -0,0 +1,9 @@
+import { LowCodeWidget } from '@gct-paas/schema';
+/**
+ * 返回包含自身以及子的所有组件类型集合
+ *
+ * @export
+ * @param {LowCodeWidget.BasicSchema} item
+ * @returns {*}  {string[]}
+ */
+export declare function findAllChildrenTypes(item: LowCodeWidget.BasicSchema): string[];

package/es/utils/find-deep-types/find-deep-types.mjs

@@ -0,0 +1,30 @@
+import { FormComponents } from '@gct-paas/core';
+
+const containerTypes = [
+  FormComponents.Collapse,
+  FormComponents.ButtonContainer,
+  FormComponents.LayoutContainer,
+  FormComponents.Grid,
+  FormComponents.GridCol,
+  FormComponents.LeftRightColumns,
+  FormComponents.Tabs,
+  FormComponents.TabPane
+];
+function deepFindTypes(item, types = []) {
+  if (item.type) {
+    types.push(item.type);
+  }
+  if ((!item.type || containerTypes.includes(item.type)) && item.children && item.children.length > 0) {
+    item.children.forEach((child) => {
+      deepFindTypes(child, types);
+    });
+  }
+  return types;
+}
+function findAllChildrenTypes(item) {
+  const types = deepFindTypes(item);
+  const set = new Set(types);
+  return Array.from(set);
+}
+
+export { findAllChildrenTypes };

package/es/utils/index.d.ts

@@ -1 +1,5 @@
-export { MessageUtil } from './message/message';
+export { isCanCrop } from './can-drop/can-drop';
+export { widthDesignEditorInstall } from './design-install/design-install';
+export { findAllChildrenTypes } from './find-deep-types/find-deep-types';
+export * from './plugin-pkg-util/plugin-pkg-util';
+export { basicAttrsUtils, transformField2Component } from './field-attrs';

package/es/utils/plugin-pkg-util/plugin-pkg-util.d.ts

@@ -0,0 +1,97 @@
+import { App } from 'vue';
+import { Platform } from '@gct-paas/core';
+export type IModuleMap = Record<string, System.Module>;
+export type LoadPluginResult = [IObject, IModuleMap];
+/**
+ * 插件包处理工具类
+ *
+ * @export
+ * @class PluginPgkUtil
+ */
+export declare class PluginPgkUtil {
+    /**
+     * 插件配置缓存
+     *
+     * @private
+     * @type {Map<string, IObject[]>}
+     */
+    private static cache;
+    /**
+     * 模块缓存
+     *
+     * @private
+     * @static
+     */
+    private static cacheModules;
+    /**
+     * 已经加载的插件与模块的映射
+     *
+     * @static
+     */
+    static readonly module: Map<string, System.Module>;
+    private static joinPaths;
+    /**
+     * 加载插件包配置
+     *
+     * @static
+     * @param {PluginModeEnum} mode 插件模式
+     * @param {Platform} platform
+     * @param {string[]} [kit]
+     * @returns {*}  {Promise<IStyleIMportMap[]>}
+     */
+    private static loadPluginConfig;
+    /**
+     * 批量加载平台界面 system js 插件包
+     *
+     * @static
+     * @param {IStyleIMportMap[]} plugins
+     * @returns {*}  {Promise<System.Module[]>}
+     */
+    private static loadPlugins;
+    /**
+     * 加载插件包
+     *
+     * @private
+     * @static
+     * @param {PluginModeEnum} mode
+     * @param {Platform} platform
+     * @returns {*}
+     */
+    private static loadPlugin;
+    /**
+     * 加载设计态插件包
+     *
+     * @static
+     * @param {App} app
+     * @param {Platform} platform
+     * @returns {*}  {Promise<LoadPluginResult>}
+     */
+    static loadDesignPlugin(_app: App, platform: Platform, kit?: string[]): Promise<LoadPluginResult>;
+    /**
+     * 加载设计态中，已经被从配置中移除的插件
+     *
+     * @static
+     * @param {Platform} platform
+     * @param {IObject[]} configs
+     * @returns {*}  {Promise<void>}
+     */
+    static loadDesignDeletedPlugins(platform: Platform, configs?: IObject[]): Promise<void>;
+    /**
+     * 加载设计态移动端插件包
+     *
+     * @static
+     * @param {App} app
+     * @param {IObject[]} configs 界面用到的插件集合
+     * @returns {*}  {Promise<void>}
+     */
+    static loadMobilePlugin(configs?: IObject[]): Promise<void>;
+    /**
+     * 加载设计态网页端插件包
+     *
+     * @static
+     * @param {App} app
+     * @param {IObject[]} configs 界面用到的插件集合
+     * @returns {*}  {Promise<void>}
+     */
+    static loadWebPlugin(configs?: IObject[]): Promise<void>;
+}

package/es/utils/plugin-pkg-util/plugin-pkg-util.mjs

@@ -0,0 +1,266 @@
+import { Platform, PLUGIN_BASE_URL, PluginModeEnum } from '@gct-paas/core';
+
+class PluginPgkUtil {
+  /**
+   * 插件配置缓存
+   *
+   * @private
+   * @type {Map<string, IObject[]>}
+   */
+  static cache = /* @__PURE__ */ new Map();
+  /**
+   * 模块缓存
+   *
+   * @private
+   * @static
+   */
+  static cacheModules = /* @__PURE__ */ new Map();
+  /**
+   * 已经加载的插件与模块的映射
+   *
+   * @static
+   */
+  static module = /* @__PURE__ */ new Map();
+  static joinPaths(...paths) {
+    return paths.filter((p) => p && p.length > 0).map((p, index) => {
+      let normalized = p;
+      if (normalized.startsWith("./")) {
+        normalized = normalized.slice(2);
+      }
+      if (normalized.endsWith("/") && index < paths.length - 1) {
+        normalized = normalized.slice(0, -1);
+      }
+      return normalized;
+    }).join("/");
+  }
+  /**
+   * 加载插件包配置
+   *
+   * @static
+   * @param {PluginModeEnum} mode 插件模式
+   * @param {Platform} platform
+   * @param {string[]} [kit]
+   * @returns {*}  {Promise<IStyleIMportMap[]>}
+   */
+  static async loadPluginConfig(mode, platform, kit = []) {
+    const tag = `${mode}-${platform}-${kit.join("_")}`;
+    if (this.cache.has(tag)) {
+      return this.cache.get(tag);
+    }
+    const cfg = {
+      client: platform === Platform.WEB ? "WEB" : "MOBILE"
+    };
+    if (kit.length > 0) {
+      cfg.tag = kit.join(",");
+    }
+    const data = await _api.platform.plugin.postGetTenantCompList(cfg);
+    if (data.length > 0) {
+      this.cache.set(tag, data);
+    }
+    return data;
+  }
+  /**
+   * 批量加载平台界面 system js 插件包
+   *
+   * @static
+   * @param {IStyleIMportMap[]} plugins
+   * @returns {*}  {Promise<System.Module[]>}
+   */
+  static async loadPlugins(mode, configs = []) {
+    const moduleMap = {};
+    if (configs.length > 0) {
+      const plugins = configs.map((plugin) => {
+        const baseUrl = this.joinPaths(PLUGIN_BASE_URL, plugin.url, "dist");
+        return {
+          imports: {
+            [plugin.key]: `${baseUrl}/${mode}.system.min.js?version=${plugin.version}`
+          },
+          styles: {
+            [plugin.key]: `${baseUrl}/${mode}.min.css?version=${plugin.version}`
+          }
+        };
+      });
+      const all = [];
+      plugins.forEach((plugin) => {
+        System.addImportMap(plugin);
+        if (plugin.imports) {
+          Object.keys(plugin.imports).forEach((key) => {
+            const load = async () => {
+              try {
+                const module = await System.import(key);
+                moduleMap[key] = module;
+                this.module.set(key, module);
+              } catch (error) {
+                console.error(error);
+              }
+            };
+            all.push(load());
+          });
+        }
+      });
+      await Promise.all(all);
+    }
+    return moduleMap;
+  }
+  /**
+   * 加载插件包
+   *
+   * @private
+   * @static
+   * @param {PluginModeEnum} mode
+   * @param {Platform} platform
+   * @returns {*}
+   */
+  static async loadPlugin(mode, platform, kit) {
+    kit = ["common", ...kit];
+    const tag = `${mode}-${platform}-${kit.join("_")}`;
+    try {
+      const configs = await this.loadPluginConfig(mode, platform, kit);
+      if (!this.cacheModules.has(tag)) {
+        const plugins = [];
+        configs.forEach((cfg) => {
+          if (cfg.plugins) {
+            plugins.push(...cfg.plugins);
+          }
+        });
+        const moduleMap = await this.loadPlugins(mode, plugins);
+        this.cacheModules.set(tag, moduleMap);
+      }
+      return [configs, this.cacheModules.get(tag)];
+    } catch (error) {
+      console.error(error);
+    }
+    return [[], {}];
+  }
+  /**
+   * 加载设计态插件包
+   *
+   * @static
+   * @param {App} app
+   * @param {Platform} platform
+   * @returns {*}  {Promise<LoadPluginResult>}
+   */
+  static async loadDesignPlugin(_app, platform, kit = []) {
+    try {
+      const result = await this.loadPlugin(
+        PluginModeEnum.DESIGN,
+        platform,
+        kit
+      );
+      const [configs, moduleMap] = result;
+      configs.forEach((config) => {
+        const plugins = config.plugins;
+        plugins.forEach((plugin) => {
+          const module = moduleMap[plugin.key];
+          if (!module) {
+            console.error(`${plugin.key} 插件加载失败，请检查插件配置是否正确`);
+            return;
+          }
+          if (platform === Platform.WEB) {
+            const cls = module.web ?? module.default;
+            if (cls) {
+              _gct.register.designer.web.register(plugin.key, () => new cls());
+            }
+          } else {
+            const cls = module.mobile ?? module.default;
+            if (cls) {
+              _gct.register.designer.mobile.register(
+                plugin.key,
+                () => new cls()
+              );
+            }
+          }
+        });
+      });
+      return result;
+    } catch (error) {
+      console.error(error);
+    }
+    return [[], {}];
+  }
+  /**
+   * 加载设计态中，已经被从配置中移除的插件
+   *
+   * @static
+   * @param {Platform} platform
+   * @param {IObject[]} configs
+   * @returns {*}  {Promise<void>}
+   */
+  static async loadDesignDeletedPlugins(platform, configs = []) {
+    try {
+      const moduleMap = await this.loadPlugins(PluginModeEnum.DESIGN, configs);
+      configs.forEach((plugin) => {
+        const module = moduleMap[plugin.key];
+        if (!module) {
+          console.error(`${plugin.key} 插件加载失败，请检查插件配置是否正确`);
+          return;
+        }
+        if (platform === Platform.WEB) {
+          const cls = module.web ?? module.default;
+          if (cls) {
+            _gct.register.designer.web.register(plugin.key, () => new cls());
+          }
+        } else {
+          const cls = module.mobile ?? module.default;
+          if (cls) {
+            _gct.register.designer.mobile.register(plugin.key, () => new cls());
+          }
+        }
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  /**
+   * 加载设计态移动端插件包
+   *
+   * @static
+   * @param {App} app
+   * @param {IObject[]} configs 界面用到的插件集合
+   * @returns {*}  {Promise<void>}
+   */
+  static async loadMobilePlugin(configs = []) {
+    try {
+      const moduleMap = await this.loadPlugins(PluginModeEnum.MOBILE, configs);
+      configs.forEach((plugin) => {
+        if (!moduleMap[plugin.key]) {
+          console.error(`${plugin.key} 插件加载失败，请检查插件配置是否正确`);
+          return;
+        }
+        _gct.register.render.mobile.register(
+          plugin.key,
+          moduleMap[plugin.key].default
+        );
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  /**
+   * 加载设计态网页端插件包
+   *
+   * @static
+   * @param {App} app
+   * @param {IObject[]} configs 界面用到的插件集合
+   * @returns {*}  {Promise<void>}
+   */
+  static async loadWebPlugin(configs = []) {
+    try {
+      const moduleMap = await this.loadPlugins(PluginModeEnum.WEB, configs);
+      configs.forEach((plugin) => {
+        if (!moduleMap[plugin.key]) {
+          console.error(`${plugin.key} 插件加载失败，请检查插件配置是否正确`);
+          return;
+        }
+        _gct.register.render.web.register(
+          plugin.key,
+          moduleMap[plugin.key].default
+        );
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+
+export { PluginPgkUtil };

package/es/views/design-view.css

@@ -0,0 +1,218 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-design-view {
+  overflow: hidden;
+}
+.gct-design-view__edit-title {
+  display: flex;
+}
+.gct-design-view__edit-title span {
+  max-width: 160px;
+  text-wrap: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gct-design-view-confirm {
+  top: 0;
+  margin: 0;
+}
+.gct-design-view-confirm .ant-modal-content {
+  top: 62px;
+  left: 18px;
+}
+
+.gct-design-view-continue-edit {
+  position: absolute;
+  left: 64px;
+  bottom: 17px;
+}
+.gct-design-view-continue-edit button {
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  color: var(--ant-primary-color);
+  font-size: 14px;
+}
+
+.gct-design-view-header {
+  height: 54px;
+  color: #fff;
+  background-color: #1a1d23;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.gct-design-view-header__left {
+  display: flex;
+  height: 22px;
+}
+
+.gct-design-view-header__right {
+  display: flex;
+}
+
+.gct-design-view-header__back {
+  cursor: pointer;
+  margin-left: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.gct-design-view-header__title {
+  margin-left: 6px;
+  color: #C0C0C0;
+}
+
+.gct-design-view-header__view-title-edit {
+  display: flex;
+  cursor: pointer;
+}
+.gct-design-view-header__view-title-edit--error-info {
+  position: absolute;
+  top: 45px;
+  height: 22px;
+  background-color: #feecec;
+  border-radius: 4px;
+  color: #F54547;
+  padding: 0 10px;
+}
+
+.gct-design-view-header__view-title-edit .ant-input-affix-wrapper {
+  padding: 0 8px 0 0;
+}
+.gct-design-view-header__view-title-edit span {
+  padding-right: 8px;
+}
+.gct-design-view-header__view-title-edit .ant-input {
+  width: auto;
+  flex-grow: 1;
+  height: 22px;
+  color: #fff;
+  padding-left: 0;
+  min-width: 0;
+  border-radius: 0;
+}
+.gct-design-view-header__view-title-edit .iconfont {
+  flex-shrink: 0;
+  color: #666;
+}
+
+.gct-design-view-header__design-actions .ant-btn:not(:last-child) {
+  margin-right: 16px;
+}
+.gct-design-view-header__design-actions .ant-btn {
+  padding: 0;
+  color: #fff;
+  border-color: transparent !important;
+}
+.gct-design-view-header__design-actions .ant-btn .iconfont {
+  margin-right: 6px;
+  line-height: 1;
+}
+.gct-design-view-header__design-actions .ant-btn:disabled {
+  color: #797A7D;
+  border-color: transparent !important;
+}
+
+.gct-design-view-header__view-actions {
+  display: flex;
+  margin-right: 12px;
+}
+.gct-design-view-header__view-actions .ant-btn {
+  background-color: #444;
+  border: 0;
+  color: #fff;
+  margin-left: 16px;
+  display: flex;
+  align-items: center;
+  justify-self: center;
+  padding: 4px 12px;
+}
+.gct-design-view-header__view-actions .ant-btn .iconfont {
+  margin-right: 6px;
+}
+
+.gct-design-view-content {
+  height: calc(100vh - 54px);
+  display: flex;
+}
+.gct-design-view-content__left {
+  flex-shrink: 0;
+  width: 297px;
+  height: 100%;
+}
+
+.gct-design-view-content__center {
+  flex-grow: 1;
+  height: 100%;
+}
+
+.gct-design-view-content__right {
+  flex-shrink: 0;
+  width: 250px;
+  height: 100%;
+}