eoss 0.1.0-alpha.25 → 0.1.0-alpha.26

package/packages/theme-chalk/src/index.scss

@@ -43,6 +43,7 @@
 @import "./form.scss";
 @import "./form-item.scss";
 @import "./footer.scss";
+@import "./guide.scss";
 @import "./header.scss";
 @import "./icons.scss";
 @import "./image.scss";
@@ -100,6 +101,7 @@
 @import "./tree.scss";
 @import "./tree-group.scss";
 @import "./upload.scss";
+@import "./wujie.scss";
 @import "./process-module.scss";
 @import "./audit-trajectory.scss";
 @import "./process-rule.scss";

package/packages/theme-chalk/src/lowcode-view.scss

@@ -0,0 +1,288 @@
+@import './common/var.scss';
+@import './mixins/mixins.scss';
+@include b(lowcode-view) {
+  height: 100%;
+  .es-scrollbar__view {
+    padding: 16px;
+  }
+  @include e(edit-switch) {
+    position: fixed;
+    top: 120px;
+    right: 2px;
+    z-index: 999;
+
+    @include m(trigger) {
+      display: flex;
+      align-items: center;
+      height: 40px;
+      transform: translateX(calc(100% - 4px));
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      cursor: pointer;
+
+      &:hover {
+        transform: translateX(0);
+
+        .es-lowcode-view__edit-switch--strip {
+          opacity: 0;
+        }
+        .es-lowcode-view__edit-switch--content {
+          display: flex;
+        }
+      }
+    }
+
+    @include m(strip) {
+      width: 8px;
+      height: 100%;
+      background: $--color-primary-light-5;
+      border-radius: 2px 0 0 2px;
+      flex-shrink: 0;
+      transition: opacity 0.2s;
+    }
+
+    @include m(content) {
+      display: none;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 16px 6px 10px;
+      background: #fff;
+      border-radius: 24px 0 0 24px;
+      box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.12);
+      white-space: nowrap;
+    }
+
+    @include m(label) {
+      font-size: 14px;
+      color: #333;
+    }
+    @include when(edit) {
+      right: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      align-items: flex-end;
+
+      .es-lowcode-view__edit-switch--btn {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 16px 6px 6px;
+        background: #fff;
+        border-radius: 24px 0 0 24px;
+        box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.12);
+        cursor: pointer;
+        transition: box-shadow 0.2s;
+
+        &:hover {
+          box-shadow: -2px 4px 16px rgba(0, 0, 0, 0.18);
+        }
+
+        &.is-confirm {
+          padding-right: 20px;
+        }
+
+        .es-lowcode-view__edit-switch--label {
+          font-size: 14px;
+          color: #333;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .es-button {
+      font-size: 18px;
+    }
+  }
+  @include e(waterfall) {
+    position: relative;
+    transition: height 0.2s ease;
+    display: grid;
+  }
+
+  .es-lowcode-view-sortable-ghost {
+    opacity: 0.4;
+
+    .item-content {
+      background-color: #ccc;
+    }
+  }
+
+  .es-lowcode-view-sortable-drag {
+    cursor: grabbing;
+    opacity: 0.8;
+  }
+
+  @include e(waterfall-item) {
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.3);
+      border: 1px dashed #cccccc;
+      border-radius: 6px;
+    }
+  }
+  @include e(waterfall-add) {
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 6px;
+    height: 100px;
+    border: 1px dashed #cccccc;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    font-size: 14px;
+    color: #666666;
+    cursor: pointer;
+  }
+  @include e(resize-handle) {
+    position: absolute;
+    z-index: 100;
+    .es-lowcode__resize-size {
+      position: absolute;
+      font-size: 12px;
+    }
+    &.is-top {
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      height: 8px;
+      line-height: 8px;
+      cursor: ns-resize;
+      .es-lowcode__resize-size {
+        top: 0;
+        right: 0;
+        transform: translateX(100%);
+      }
+    }
+    &.is-bottom {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      height: 8px;
+      line-height: 8px;
+      cursor: ns-resize;
+      .es-lowcode__resize-size {
+        bottom: 0;
+        right: 0;
+        transform: translateX(100%);
+      }
+    }
+    &.is-left {
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 12px;
+      text-align: center;
+      cursor: ew-resize;
+      .es-lowcode__resize-size {
+        left: 0;
+        bottom: 0;
+        transform: translateY(100%);
+      }
+    }
+    &.is-right {
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 12px;
+      text-align: center;
+      cursor: ew-resize;
+      .es-lowcode__resize-size {
+        right: 0;
+        bottom: 0;
+        transform: translateY(100%);
+      }
+    }
+  }
+
+  @include e(modules) {
+    height: 100%;
+    overflow: hidden;
+    @include m(scrollbar) {
+      height: calc(100% - 48px);
+      &.is-full {
+        height: 100%;
+      }
+      .es-scrollbar__view {
+        padding: 16px;
+      }
+      .es-checkbox-group {
+        display: block;
+      }
+      .es-checkbox {
+        display: block;
+        margin: 0;
+        position: absolute;
+      }
+      .es-checkbox__input {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+      }
+      .es-checkbox__label {
+        display: block;
+        height: 100%;
+        padding: 0;
+      }
+    }
+    @include m(waterfall) {
+      position: relative;
+      width: 100%;
+    }
+    @include m(pagination) {
+      justify-content: center;
+    }
+  }
+  @include e(iframe) {
+    border: 0;
+    height: 100%;
+    .es-card__header {
+      border: 0;
+      padding-bottom: 0;
+      & + .es-card__body {
+        height: calc(100% - 43px);
+      }
+    }
+    .es-card__body {
+      height: 100%;
+    }
+    @include m(header) {
+      line-height: 24px;
+    }
+    @include m(header-title-icon) {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      text-align: center;
+      font-size: 12px;
+      background-color: $--color-primary-light-2;
+      border-radius: 3px;
+      color: $--color-primary-light-7;
+      position: relative;
+      top: -2px;
+    }
+    @include m(header-title) {
+      font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
+      font-size: 16px;
+      color: #121212;
+      margin-left: 10px;
+    }
+    @include m(header-right) {
+      float: right;
+      cursor: pointer;
+      color: #999999;
+      .es-icon-shezhi {
+        font-size: 16px;
+        position: relative;
+        top: 1px;
+      }
+    }
+  }
+}

package/packages/theme-chalk/src/lowcode.scss

@@ -259,6 +259,14 @@
     @include m(component) {
       position: relative;
       transition: transform 0.2s ease;
+      @include when(child) {
+        z-index: 2;
+      }
+      @include when(drop-target) {
+        outline: 2px dashed #409eff;
+        outline-offset: -2px;
+        background-color: rgba(64, 158, 255, 0.05);
+      }
       &::after {
         content: '';
         position: absolute;
@@ -269,6 +277,7 @@
         cursor: move;
         border: 1px dashed #999;
         border-radius: 4px;
+        z-index: 1;
       }
       &:hover {
         background-color: #fdf5eb;
@@ -408,7 +417,7 @@
   @include e(handles) {
     position: absolute;
     top: 0;
-    right: 0;
+    right: 4px;
     padding: 0 4px;
     z-index: 100;
     .es-button {
@@ -418,6 +427,7 @@
   @include e(resize-size) {
     position: absolute;
     font-size: 16px;
+    white-space: nowrap;
   }
   @include e(resize-handle) {
     position: absolute;

package/packages/theme-chalk/src/select-dropdown.scss

@@ -25,7 +25,7 @@
       &::after {
         position: absolute;
         right: 20px;
-        font-family: 'es-icon';
+        font-family: $--font-icon-family;
         content: '\e758';
         font-size: 12px;
         font-weight: bold;

package/packages/theme-chalk/src/wujie.scss

@@ -0,0 +1,5 @@
+@import 'mixins/mixins.scss';
+@include b(wujie) {
+  width: 100%;
+  height: 100%;
+}

package/packages/wujie/index.js

@@ -0,0 +1,10 @@
+import Wujie from './src/wujie';
+
+export { bus, setupApp, preloadApp, destroyApp, refreshApp } from './src/wujie';
+
+/* istanbul ignore next */
+Wujie.install = function(Vue) {
+  Vue.component(Wujie.name, Wujie);
+};
+
+export default Wujie;

package/packages/wujie/src/wujie.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="es-wujie" v-loading="loading">
+    <WujieVue
+      width="100%"
+      height="100%"
+      :name="name"
+      :url="appUrl"
+      :sync="sync"
+      :alive="alive"
+      :degrade="degrade"
+      :fiber="fiber"
+      :fetch="fetch"
+      :props="mergedProps"
+      :plugins="plugins"
+      :beforeLoad="handleBeforeLoad"
+      :beforeMount="handleBeforeMount"
+      :afterMount="handleAfterMount"
+      :beforeUnmount="handleBeforeUnmount"
+      :afterUnmount="handleAfterUnmount"
+      :activated="handleActivated"
+      :deactivated="handleDeactivated"
+      :loadError="handleLoadError"
+      ref="wujie"
+    ></WujieVue>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import WujieVue from 'wujie-vue2';
+
+// 注册全局组件，供子应用或外部直接使用
+Vue.use(WujieVue);
+
+const { bus, setupApp, preloadApp, destroyApp, refreshApp } = WujieVue;
+import { startWith } from 'eoss/src/utils/util';
+export default {
+  name: 'EsWujie',
+
+  components: {
+    WujieVue
+  },
+
+  inject: {
+    $main: {
+      default: () => ({})
+    }
+  },
+
+  props: {
+    // 子应用名称，
+    name: String,
+    // 子应用 host
+    host: String,
+    // 子应用地址
+    url: String,
+    // 是否同步路由
+    sync: Boolean,
+    // 保活模式
+    alive: {
+      type: Boolean,
+      default: undefined
+    },
+    // 降级为 iframe
+    degrade: {
+      type: Boolean,
+      default: undefined
+    },
+    // 开启 fiber 分片渲染
+    fiber: {
+      type: Boolean,
+      default: undefined
+    },
+    // 自定义 fetch
+    fetch: Function,
+    // 传递给子应用的数据
+    props: {
+      type: Object,
+      default: () => ({})
+    },
+    // 插件
+    plugins: {
+      type: Array,
+      default: null
+    },
+    // 刷新标识：pages.vue 刷新时修改 keys，触发子应用重建
+    keys: String
+  },
+
+  data() {
+    return {
+      loading: true
+    };
+  },
+
+  computed: {
+    appUrl() {
+      if (this.host && this.url) {
+        return startWith(this.url, ['http://', 'https://'])
+          ? this.url
+          : `${this.host}${this.url}`;
+      }
+      return this.url;
+    },
+    /**
+     * 合并框架上下文与用户自定义 props，注入子应用
+     */
+    mergedProps() {
+      return {
+        // 主应用实例，子应用可通过 $wujie.props.main 访问
+        main: this.$main,
+        bus,
+        ...this.props
+      };
+    }
+  },
+
+  watch: {
+    /**
+     * 监听 keys 变化，重建子应用实现刷新
+     */
+    keys() {
+      this.refresh();
+    }
+  },
+
+  beforeDestroy() {
+    // 组件销毁时清理总线监听，避免内存泄漏
+    if (this.name) {
+      bus.$off(this.name);
+    }
+  },
+
+  methods: {
+    /** 加载前 */
+    handleBeforeLoad(app) {
+      this.loading = true;
+      this.$emit('before-load', app);
+    },
+    /** 挂载前 */
+    handleBeforeMount(app) {
+      this.$emit('before-mount', app);
+    },
+    /** 挂载后 */
+    handleAfterMount(app) {
+      this.loading = false;
+      this.$emit('after-mount', app);
+    },
+    /** 卸载前 */
+    handleBeforeUnmount(app) {
+      this.$emit('before-unmount', app);
+    },
+    /** 卸载后 */
+    handleAfterUnmount(app) {
+      this.$emit('after-unmount', app);
+    },
+    /** 激活（保活模式） */
+    handleActivated(app) {
+      this.$emit('activated', app);
+    },
+    /** 失活（保活模式） */
+    handleDeactivated(app) {
+      this.$emit('deactivated', app);
+    },
+    /** 加载失败 */
+    handleLoadError(url) {
+      this.loading = false;
+      this.$emit('load-error', url);
+    },
+
+    /**
+     * 刷新子应用
+     */
+    refresh() {
+      if (this.$refs.wujie) {
+        return this.$refs.wujie.refresh();
+      }
+      return refreshApp(this.name);
+    },
+
+    /**
+     * 销毁子应用
+     */
+    destroy() {
+      destroyApp(this.name);
+    },
+
+    /**
+     * 向子应用发送事件
+     */
+    emitToApp(event, ...args) {
+      bus.$emit(event, ...args);
+    },
+
+    /**
+     * 监听子应用事件
+     */
+    onAppEvent(event, handler) {
+      bus.$on(event, handler);
+    }
+  }
+};
+
+export { bus, setupApp, preloadApp, destroyApp, refreshApp };
+</script>

package/src/config/api.js

@@ -325,6 +325,9 @@ export const pageLists = '/main2/pageComponentConfig/listJson';
 export const publishedLists = '/main2/pageComponentConfig/listPublished';
 // 获取自定义配置详情
 export const pageInfo = '/main2/pageComponentConfig/info';
+// 获取自定义配置授权列表
+export const pageGroup = 'main2/pageComponentTarget/listByConfigIdAndTypeGroup';
+
 // 保存自定义配置,发布也调这个接口但要加上字段status=1
 export const pageSave = '/main2/pageComponentConfig/save';
 // 更新自定义配置