eoss 0.1.0-alpha.20 → 0.1.0-alpha.21

package/packages/lowcode/src/render.vue

@@ -0,0 +1,247 @@
+<template>
+  <div :style="newNode.style" :data-id="newNode.id" @click.stop="handleClick">
+    <component
+      :is="newNode.name"
+      v-bind="newNode.props"
+      v-on="newNode.events"
+      :key="newNode.id"
+    >
+      <template v-if="newNode.children && newNode.children.length > 0">
+        <Render
+          v-for="child in newNode.children"
+          :key="child.id"
+          :node="child"
+        />
+      </template>
+      <template v-else>
+        {{ newNode.description }}
+      </template>
+    </component>
+    <template v-if="newNode.id === active">
+      <div class="es-lowcode__handles">
+        <es-button
+          type="text"
+          size="mini"
+          icon="es-icon-shanchu"
+          @click="handleRemove"
+        ></es-button>
+      </div>
+      <div
+        class="es-lowcode__resize-handle is-top es-icon-lashen"
+        @pointerdown="handleResizeStart($event, newNode, 'top')"
+        @dragstart="$event.preventDefault()"
+      >
+				<span class="es-lowcode__resize-size" v-show="direction === 'top'">{{ height }}</span>
+      </div>
+      <div
+        class="es-lowcode__resize-handle is-bottom es-icon-lashen"
+        @pointerdown="handleResizeStart($event, newNode, 'bottom')"
+        @dragstart="$event.preventDefault()"
+      >
+				<span class="es-lowcode__resize-size" v-show="direction === 'bottom'">{{ height }}</span>
+      </div>
+      <div
+        class="es-lowcode__resize-handle is-left es-icon-stretch"
+        @pointerdown="handleResizeStart($event, newNode, 'left')"
+        @dragstart="$event.preventDefault()"
+      >
+				<span class="es-lowcode__resize-size" v-show="direction === 'left'">{{ width }}</span>
+      </div>
+      <div
+        class="es-lowcode__resize-handle is-right es-icon-stretch"
+        @pointerdown="handleResizeStart($event, newNode, 'right')"
+        @dragstart="$event.preventDefault()"
+      >
+				<span class="es-lowcode__resize-size" v-show="direction === 'right'">{{ width }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Render',
+  components: {},
+  props: {
+    node: {
+      type: Object,
+      default: null
+    },
+    active: {
+      type: String,
+      default: ''
+    },
+    span: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      newNode: JSON.parse(JSON.stringify(this.node)),
+      resizingComponent: null,
+      initialMouseX: 0,
+      initialMouseY: 0,
+      initialWidth: 0,
+      initialHeight: 0,
+      resizeObserver: null,
+      isResizing: false,
+      direction: '',
+      width: 0,
+      height: 0
+    };
+  },
+  watch: {
+    node: {
+      handler(newVal) {
+        this.newNode = JSON.parse(JSON.stringify(newVal));
+      },
+      deep: true
+    }
+  },
+  mounted() {},
+  beforeDestroy() {},
+  methods: {
+    /**
+     * 处理组件大小调整开始事件
+     * @param event 指针事件对象
+     * @param node 组件数据
+     * @param direction 调整方向
+     */
+    handleResizeStart(event, node, direction) {
+      event.preventDefault();
+      event.stopPropagation(); // 阻止事件冒泡，防止触发父级点击事件
+      this.direction = direction;
+      // 只响应鼠标左键或触摸
+      if (event.pointerType === 'mouse' && event.button !== 0) return;
+      if (!node.style || !node.style.width || !node.style.height) {
+        // 从组件DOM元素获取实际宽高
+        const componentElement = document.querySelector(
+          `[data-id="${node.id}"]`
+        );
+        if (componentElement) {
+          // 获取计算后的样式
+          const computedStyle = window.getComputedStyle(componentElement);
+          const width =
+            parseInt(computedStyle.width) || componentElement.offsetWidth;
+          const height =
+            parseInt(computedStyle.height) || componentElement.offsetHeight;
+          // 使用Vue.set确保style对象是响应式的
+          this.$set(this.newNode, 'style', {
+            width: `${width}px`,
+            height: `${height}px`
+          });
+        }
+      }
+
+      // 初始化调整大小的状态
+      this.resizingComponent = { ...this.newNode, direction };
+      this.initialMouseX = event.clientX;
+      this.initialMouseY = event.clientY;
+      // 记录初始宽高
+      this.initialWidth = parseInt(this.newNode.style.width) || 200;
+      this.initialHeight = parseInt(this.newNode.style.height) || 100;
+      this.$emit('change', this.newNode, true);
+
+      document.addEventListener('pointermove', this.handleResizeMove);
+      document.addEventListener('pointerup', this.handleResizeEnd);
+    },
+    /**
+     * 处理组件大小调整移动事件
+     * @param event 指针事件对象
+     */
+    handleResizeMove(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.isResizing = true;
+      const pointerEvent = event;
+      if (this.resizingComponent) {
+        const deltaX = pointerEvent.clientX - this.initialMouseX;
+        const deltaY = pointerEvent.clientY - this.initialMouseY;
+        const direction = this.resizingComponent.direction;
+        const canvasElement = document.querySelector(
+          '.es-lowcode__canvas--content'
+        );
+        const canvasWidth = (canvasElement && canvasElement.offsetWidth) || 0;
+
+        // 使用初始宽高进行计算
+        let newWidth = this.initialWidth;
+        let newHeight = this.initialHeight;
+
+        switch (direction) {
+          case 'top':
+            newHeight = this.initialHeight - deltaY;
+            break;
+          case 'bottom':
+            newHeight = this.initialHeight + deltaY;
+            break;
+          case 'left':
+            newWidth = this.initialWidth - deltaX;
+            break;
+          case 'right':
+            newWidth = this.initialWidth + deltaX;
+            break;
+          case 'top-left':
+            newWidth = this.initialWidth - deltaX;
+            newHeight = this.initialHeight - deltaY;
+            break;
+          case 'top-right':
+            newWidth = this.initialWidth + deltaX;
+            newHeight = this.initialHeight - deltaY;
+            break;
+          case 'bottom-left':
+            newWidth = this.initialWidth - deltaX;
+            newHeight = this.initialHeight + deltaY;
+            break;
+          case 'bottom-right':
+            newWidth = this.initialWidth + deltaX;
+            newHeight = this.initialHeight + deltaY;
+            break;
+        }
+
+        // 限制最大宽度不超过画布宽度
+        newWidth = Math.min(canvasWidth, newWidth);
+        this.width = parseInt(newWidth);
+        this.height = parseInt(newHeight);
+        if (this.newNode) {
+          // 使用Vue.set确保样式变化能触发响应式更新
+          this.$set(this.newNode.style, 'width', `${newWidth}px`);
+          this.$set(this.newNode.style, 'height', `${newHeight}px`);
+        }
+      }
+    },
+    /**
+     * 处理组件大小调整结束事件
+     * @param event 鼠标事件对象
+     */
+    handleResizeEnd(event) {
+      event.preventDefault();
+      event.stopPropagation(); // 阻止事件冒泡，防止触发父级点击事件
+      this.$emit('change', this.newNode, this.resizingComponent.direction);
+      this.resizingComponent = null;
+      document.removeEventListener('pointermove', this.handleResizeMove);
+      document.removeEventListener('pointerup', this.handleResizeEnd);
+      // 延迟重置调整状态，避免触发点击事件
+      setTimeout(() => {
+        this.isResizing = false;
+      }, 200);
+    },
+    /**
+     * 处理组件点击事件
+     */
+    handleClick() {
+      // 如果正在调整大小，则不处理点击事件
+      if (this.isResizing) {
+        return;
+      }
+      this.$emit('click');
+    },
+    /**
+     * 处理组件删除事件
+     */
+    handleRemove() {
+      this.$emit('remove');
+    }
+  }
+};
+</script>

package/packages/lowcode/src/source.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="es-lowcode__source">
+    <pre>{{ page }}</pre>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Source',
+
+  components: {},
+
+  props: {},
+
+  data () {
+    return {
+    };
+  },
+
+  computed: {},
+
+  watch: {},
+
+  created() {},
+
+  mounted() {},
+
+  methods: {}
+}
+
+</script>
+<style lang="scss" scoped></style>

package/packages/lowcode/src/toolbar.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="es-lowcode__toolbar">
+    <es-button-group>
+      <es-button
+        :type="activeTool === 'web' ? 'primary' : 'default'"
+        size="small"
+        @click="handleClick('web')"
+      >
+        <i class="es-icon-diannao"></i>
+      </es-button>
+      <es-button
+        :type="activeTool === 'app' ? 'primary' : 'default'"
+        size="small"
+        @click="handleClick('app')"
+      >
+        <i class="es-icon-shouji"></i>
+      </es-button>
+      <es-button
+        :type="activeTool === 'custom' ? 'primary' : 'default'"
+        size="small"
+        @click="handleClick('custom')"
+      >
+        <i class="es-icon-xiugai"></i>
+      </es-button>
+    </es-button-group>
+    <div class="es-lowcode__toolbar--size" v-show="activeTool === 'custom'">
+      <es-input v-model="width" size="small" placeholder="请输入宽度" @change="handleChangeSize" />
+      <span class="es-lowcode__toolbar--size-split">x</span>
+      <es-input v-model="height" size="small" placeholder="请输入高度" @change="handleChangeSize" />
+    </div>
+    <es-button-group>
+      <es-button
+        size="small"
+        :disabled="isUndoDisabled"
+        @click="handleClick('repeal')"
+      >
+        <i class="es-icon-chehui"></i>
+      </es-button>
+      <es-button
+        size="small"
+        :disabled="isRedoDisabled"
+        @click="handleClick('advance')"
+      >
+        <i class="es-icon-qianjin"></i>
+      </es-button>
+    </es-button-group>
+    <div class="es-lowcode__toolbar--right">
+      <es-button-group>
+        <es-button
+          :type="activeTab === 'design' ? 'primary' : 'default'"
+          size="small"
+        >
+          设计
+        </es-button>
+        <es-button
+          :type="activeTab === 'json' ? 'primary' : 'default'"
+          size="small"
+          @click="handleOpen('json')"
+        >
+          JSON
+        </es-button>
+        <es-button
+          :type="activeTab === 'source' ? 'primary' : 'default'"
+          size="small"
+          @click="handleOpen('source')"
+        >
+          源码
+        </es-button>
+      </es-button-group>
+      <es-button-group separate>
+        <es-button type="primary" size="small" @click="handleSave">
+          保存
+        </es-button>
+        <es-button
+          type="primary"
+          class="es-margin-left-none"
+          size="small"
+          @click="handlePreview"
+        >
+          预览
+        </es-button>
+      </es-button-group>
+      <es-dropdown type="primary" @command="handlePublish" size="small">
+        <es-button type="primary" size="small">
+          发布<i class="es-icon-xia"></i>
+        </es-button>
+
+        <template #dropdown>
+          <es-dropdown-menu>
+            <es-dropdown-item command="page">发布页面</es-dropdown-item>
+            <es-dropdown-item command="component">发布组件</es-dropdown-item>
+          </es-dropdown-menu>
+        </template>
+      </es-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import bus from 'eoss/src/utils/bus.js'
+import Button from 'eoss/packages/button';
+import ButtonGroup from 'eoss/packages/button-group';
+import Dropdown from 'eoss/packages/dropdown';
+import DropdownMenu from 'eoss/packages/dropdown-menu';
+import DropdownItem from 'eoss/packages/dropdown-item';
+import Icon from 'eoss/packages/icon';
+export default {
+  name: 'Toolbar',
+
+  components: {
+    ButtonGroup,
+    Button,
+    Dropdown,
+    DropdownMenu,
+    DropdownItem,
+    Icon
+  },
+
+  props: {},
+
+  data() {
+    return {
+      activeTool: 'web',
+      activeTab: 'design',
+      width: 300,
+      height: 200,
+      isUndoDisabled: true,
+      isRedoDisabled: true
+    };
+  },
+
+  computed: {},
+
+  watch: {},
+
+  created() {},
+
+  mounted() {},
+
+  methods: {
+    handleClick(tool) {
+      this.activeTool = tool;
+      bus.$emit('changeSize', tool, {width: `${this.width}px`, height: `${this.height}px` });
+    },
+    handleChangeSize() {
+      bus.$emit('changeSize', this.activeTool, {width: `${this.width}px`, height: `${this.height}px` });
+    },
+    handleOpen(type) {
+      bus.$emit('open', type);
+    },
+    handleSave() {
+      bus.$emit('save');
+    },
+    handlePreview() {
+      bus.$emit('preview');
+    },
+    handlePublish(command) {
+      bus.$emit('publish', command);
+    }
+  }
+};
+</script>

package/packages/main/src/components/pages.vue

@@ -11,7 +11,7 @@
         <div
           class="es-main-pages__handle--item"
           :class="{ 'is-disabled': refresh }"
-          @click="refresh ? '' : handleRefresh"
+          @click="handleRefresh"
         >
           刷新
         </div>
@@ -114,7 +114,7 @@
             :id="activeName == item.id ? iframeId : item.id || item.appCode"
             :name="activeName == item.id ? iframeId : item.id || item.appCode"
             :onload="handleLoadIframe(item)"
-            :src="item.url"
+            :src="renderUrl(item.url)"
           ></iframe>
         </div>
       </es-tab-pane>
@@ -225,6 +225,19 @@ export default {
   },
 
   methods: {
+    /**
+     * @desc:渲染url
+     * @author huangbo
+     * @date 2024年9月7日
+     **/
+    renderUrl(url) {
+      const userInfo = this.$main.userInfo || this.$main.userModel || {};
+      for (let key in userInfo) {
+        url = url.replace(new RegExp(`{{${key}}}`, 'g'), userInfo[key]);
+      }
+      return url;
+    },
+    
     handleSelect(res, index) {
       const { node } = res;
       if (node.urlopenmode === 1 || node.openModel === 1) {
@@ -331,6 +344,9 @@ export default {
      * @date 2024年9月7日
      **/
     handleRefresh() {
+      if (this.refresh) {
+        return;
+      }
       let tab = this.tabs[this.index];
       if (tab.method == 'iframe') {
         this.tabs[this.index].url = timestampUrl(tab.url);
@@ -338,6 +354,8 @@ export default {
       if (tab.method === 'router') {
         this.$set(this.tabs[this.index], 'keys', uuid());
       }
+      this.operate = false;
+      window.removeEventListener('click', this.closeTabsEvents);
     },
     /**
      * @desc:关闭标签
@@ -356,6 +374,8 @@ export default {
         }
       }
       this.tabs.splice(i, 1);
+      this.operate = false;
+      window.removeEventListener('click', this.closeTabsEvents);
     },
     /**
      * @desc:关闭其他标签
@@ -366,6 +386,8 @@ export default {
       let tab = this.tabs[this.index];
       this.tabs = [tab];
       this.activeName = tab.id;
+      this.operate = false;
+      window.removeEventListener('click', this.closeTabsEvents);
     },
     /**
      * @desc:关闭左侧标签
@@ -378,6 +400,8 @@ export default {
         this.activeName = this.tabs[i].id;
       }
       this.tabs.splice(0, i);
+      this.operate = false;
+      window.removeEventListener('click', this.closeTabsEvents);
     },
     /**
      * @desc:关闭右侧标签
@@ -390,6 +414,8 @@ export default {
         this.activeName = this.tabs[i].id;
       }
       this.tabs.splice(i + 1, this.tabs.length - 1);
+      this.operate = false;
+      window.removeEventListener('click', this.closeTabsEvents);
     }
   }
 };

package/packages/main/src/components/set-menus.vue

@@ -43,7 +43,7 @@
               color="#fff"
             ></es-icon>
           </div>
-          <div class="es-set-menus__apps--text">
+          <div class="es-set-menus__apps--text" :title="item.text || item.name">
             {{ item.text || item.name }}
           </div>
         </li>
@@ -166,8 +166,8 @@ export default {
     },
     checkList: {
       handler(newVal) {
-        if (this.esMain && this.esMain.changeData) {
-          this.esMain.changeData('customMenus', newVal);
+        if (this.$main && this.$main.changeData) {
+          this.$main.changeData('customMenus', newVal);
         }
       },
       deep: true

package/packages/main/src/components/user.vue

@@ -77,7 +77,7 @@
 import userInfo from './userinfo.vue';
 import { ajax } from 'eoss/src/utils/ajax';
 import { removeStorage, setStorage } from 'eoss/src/utils/storage';
-import { debounce } from 'throttle-debounce';
+//import { debounce } from 'throttle-debounce';
 import { initUserSet, switchUserTo } from 'eoss/src/config/api.js';
 export default {
   name: 'User',
@@ -139,6 +139,11 @@ export default {
             this.checkPasswordMsg = results.checkPasswordMsg;
             this.headImgCode = results.headImgCode || undefined;
             this.$main.userInfo = results.simpleUserInfo;
+            setStorage({
+                type: this.storage,
+                key: 'userInfo',
+                value: results.simpleUserInfo
+              });
             this.$emit('success', results);
           } else {
             let msg = res.msg || '系统错误，请联系管理员！';

package/packages/main/src/early.vue

@@ -27,14 +27,14 @@
       >
         <div
           class="es-public-drawer-main"
-          v-if="drawer.ai && drawer.ai.url"
+          v-if="showAi"
           v-show="drawer.active == 'ai'"
         >
           <iframe
             frameborder="0"
             width="100%"
             height="100%"
-            :src="drawer.ai.url"
+            :src="aiConfig.url"
           ></iframe>
         </div>
         <div