ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/formContainer/sub-form/index.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import { ref, inject, computed, provide } from 'vue';
+import { DesignComponent } from '@models/useComponentModel';
+import { useComponentStore } from '@/stores';
+import {MiddlewareComponentDes as ComponentMiddleware} from '@ibsp-component-lib';
+
+const props = defineProps<{
+  page: IBSP.IPage.Page,
+  component: IBSP.IComponent.DesignComponent,
+  app: IbspApp,
+  propsValues: {
+    [key: string]: any
+  },
+}>();
+
+provide('subFormContainer', true);
+const subFormType = computed(() => {
+  return props.component.formConfig?.subFormType ?? 'table';
+})
+provide('subFormType', subFormType);
+
+const componentStore = useComponentStore();
+const dragEnterActive = ref(false);
+const updateDirectionTooltip: Function = inject('updateDirectionTooltip') || window.updateDirectionTooltip;
+
+const onDrop = (e: DragEvent) => {
+  dragEnterActive.value = false
+  let layoutID = e.dataTransfer?.getData('layoutID');
+  const componentSource = e.dataTransfer?.getData('componentSource');
+  const exchangeComponentId = e.dataTransfer?.getData('exchangeComponentId')
+  if (!layoutID && !exchangeComponentId && !componentSource) {
+    return
+  }
+
+  if (!componentSource) return;
+  const source = JSON.parse(componentSource);
+  let configComponent = props.page.localComponents[source.lib]?.[source.id];
+  const formItemComponent = new DesignComponent(configComponent, {
+    parentId: props.component.id,
+    inForm: true,
+    page: props.page,
+    // showInPrecis: false,
+    mountedCallbackFn: () => {
+      updateDirectionTooltip()
+    }
+  });
+  if (configComponent.id === 'formContainer') {
+    formItemComponent.name = '子表单'
+  }
+}
+
+const layoutChildren = computed<IBSP.IComponent.DesignComponent[]>(() => {
+  return componentStore.queryComponentChildrenData(props.component.id)
+})
+
+
+/**
+ * 拖拽进入容器
+ */
+const onDragEnter = () => {
+  dragEnterActive.value = true
+}
+
+/**
+ * 拖拽离开容器
+ */
+const onDragleave = () => {
+  dragEnterActive.value = false
+}
+
+</script>
+<template>
+  <div
+    class="sub-form-container"
+    @drop.stop="onDrop"
+    @dragenter.stop="onDragEnter"
+    @dragleave.stop="onDragleave"
+  >
+    <div class="sub-form-container-table" v-if="subFormType === 'table'">
+      <div class="sub-form-item" style="width: 50px;">
+        <div class="sub-form-item__label">
+          #
+        </div>
+        <div class="sub-form-item__content">
+          1
+        </div>
+      </div>
+      <div class="sub-form-container-table-content">
+        <template v-for="item of layoutChildren" :key="item?.key || item?.id">
+          <ComponentMiddleware
+            v-on="item?.eventInstance?.events"
+            :component="item"
+            :page="page"
+            :app="app"
+            :class="{
+              'component-container': false,
+            }"
+          />
+        </template>
+      </div>
+      <div v-if="dragEnterActive" class="target-drop"></div>
+    </div>
+    <div class="sub-form-container-section" v-else>
+      <template v-for="item of layoutChildren" :key="item?.key || item?.id">
+        <ComponentMiddleware
+          v-on="item?.eventInstance?.events"
+          :component="item"
+          :page="page"
+          :app="app"
+          :class="{
+            'component-container': false,
+          }"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.sub-form-container{
+  padding: var(--container-padding) !important;
+  outline-style: dashed;
+  outline-width: var(--container-border-width);
+  gap: var(--container-padding);
+  outline-color: #848282;
+  padding-right: 200px;
+  .sub-form-container-table{
+    overflow: hidden;
+    background: #fff;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding-right: 30px;
+    align-items: stretch;
+    .sub-form-container-table-content{
+      flex: 1;
+      overflow: auto;
+      display: flex;
+    }
+  }
+  &:not(:has(:hover)):hover {
+    outline-color: #F77234;
+    outline-width: 2px;
+    outline-style: solid;
+    z-index: 11;
+  }
+
+  &.is-hover {
+    outline-color: #F77234;
+    outline-width: 1px;
+    outline-style: solid;
+    z-index: 11;
+  }
+  .sub-form-item{
+    // width: 200px;
+    border: 1px solid #ebeef5;
+    .sub-form-item__label{
+      border-bottom: 1px solid #ebeef5;
+      line-height: 22px;
+      padding: 12px 10px;
+      background: #F5F7FA;
+    }
+    .sub-form-item__content{
+      padding: 12px 10px;
+      overflow: auto;
+    }
+  }
+}
+.component-container {
+  // gap: var(--container-padding);
+  outline-style: dashed;
+  outline-width: 1px;
+  outline-color: var(--theme-font-color);
+
+
+  &::after {
+    position: absolute;
+    left: var(--targetLeft);
+    top: var(--targetTop);
+    bottom: var(--targetBottom);
+    right: var(--targetRight);
+    // padding: var(--container-padding) !important;
+    width: var(--targetWidth);
+    height: var(--targetHeight);
+    z-index: 8;
+    content: "";
+  }
+
+  &.is-hover {
+    outline-color: #1784FC;
+    outline-width: 1px;
+    outline-style: solid;
+  }
+}
+
+.component-active {
+  // border-color: var(--theme-gl-bg) !important;
+  outline-color: #1784FC;
+  outline-width: 2px;
+  outline-style: solid;
+
+  &.is-hover {
+    outline-width: 2px;
+  }
+}
+.target-drop{
+  height: 5px;
+  width: 100%;
+  background: red;
+}
+.sub-form-container-table{
+  .target-drop{
+    width: 5px;
+    height: auto;
+    background: red;
+  }
+}
+</style>

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/mobileNavFrame/components/MobileMenu.vue

@@ -0,0 +1,107 @@
+<script lang='ts' setup>
+import { IbspIcon } from '@/components/production';
+export type MenuItem = {
+  id: string;
+  title: string;
+  children?: MenuItem[];
+  icon: {
+    type: 'svg' | 'element' | 'icon';
+    content: string;
+  },
+  activeIcon: {
+    type: 'svg' | 'element' | 'icon';
+    content: string;
+  }
+}
+const props = defineProps<{
+  menu: MenuItem[];
+  currentActionId: MenuItem['id'];
+}>();
+const emit = defineEmits(['onSelect']);
+
+
+const findItem = (menu: MenuItem[], idPath: string[], index = 0): MenuItem | undefined => {
+  const id = idPath[index];
+  const item = menu.find(item => item.id === id);
+  if (!item) {
+    return undefined;
+  }
+  if (index === idPath.length - 1) {
+    return item;
+  }
+  return findItem(item.children || [], idPath, index + 1);
+}
+
+const onSelectMenu = (id: string, path: string[]) => {
+  emit('onSelect', id, findItem(props.menu, path));
+}
+</script>
+
+<template>
+  <div class="ibsp-mobile-menu">
+    <div class="mobile-container">
+      <ul class="mobile-menu-list">
+        <li class="menu-item"
+            v-for="(item, index) in menu"
+            :key="index"
+            :class="{ active: item.id === currentActionId }"
+            @click="onSelectMenu(item.id, [item.id])">
+          <IbspIcon v-if="item.icon.content"
+                    :width="22"
+                    :height="22"
+                    :type="item.id === currentActionId ? item.activeIcon.type :item.icon.type"
+                    :content =" item.id === currentActionId? item.activeIcon.content:item.icon.content" />
+          <span class="menu-item-title">
+            {{ item.title }}
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.ibsp-mobile-menu {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+
+  .mobile-container {
+    height: 100%;
+
+    .mobile-menu-list {
+      height: 100%;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      align-items: center;
+
+      .menu-item {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        height: 100%;
+        flex: 1;
+        padding-bottom: 4px;
+
+        color: #1D2129;;
+        cursor: pointer;
+
+        .menu-item-title {
+          font-size: 10px;
+
+
+        }
+
+        &.active {
+          color: #1890ff;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/mobileNavFrame/config.js

@@ -0,0 +1,151 @@
+import { defineAsyncComponent, markRaw } from 'vue'
+export default {
+  id: 'mobile-nav-frame',
+  label: '移动导航',
+  icon: {
+    type: 'svg',
+    value: '移动端导航框架'
+  },
+  type: 'container',
+  isContainer: true,
+  sort: 2,
+  setup: ()=>({
+    config: {
+      props: [
+        {
+          label: '导航配置',
+          key: 'navConfig',
+          componentType: 'Collapse',
+          children: [
+            {
+              label: '显示头部',
+              key: 'showHeader',
+              value: true,
+              componentType: 'Switch'
+            },
+            {
+              label: '头部高度',
+              key: 'headerHeight',
+              value: 50,
+              componentType: 'InputNumber',
+              componentProps: {
+                min: 0,
+                step: 1
+              }
+            },
+            {
+              label: '头部背景颜色',
+              key: 'headerBackgroundColor',
+              value: '#fff',
+              componentType: 'Color'
+            },
+            {
+              label: '头部标题',
+              key: 'headerTitle',
+              value: '导航框架',
+              componentType: 'Input'
+            },
+            {
+              label: '标题颜色',
+              key: 'headerColor',
+              value: '#333',
+              componentType: 'Color'
+            },
+            {
+              label: '页面加载loading',
+              key: 'loading',
+              value: true,
+              componentType: 'Switch'
+            },
+            {
+              label: '加载方式',
+              key: 'loadingType',
+              value: 'loading',
+              componentType: 'Select',
+              componentProps: {
+                options: [
+                  { label: 'loading', value: 'loading' },
+                  { label: '骨架屏', value: 'skeleton' }
+                ]
+              },
+              /**  */
+              show: (values)=> {
+                return values.loading
+              }
+            },
+            {
+              label: '加载文字',
+              key: 'loadingText',
+              value: '页面加载中...',
+              componentType: 'Input',
+              /**  */
+              show: (values)=>{
+                return values.loadingType === 'loading'
+              }
+            },
+            {
+              label: '框架背景颜色', // 左侧配置项名称
+              key: 'backgroundColor', // 配置项的key, 用于后面的数据绑定
+              value: '#fff', // 配置项的默认值
+              componentType: 'Color' // 配置项的类型, 用于后面的组件配置项渲
+            },
+            {
+              label: '配置菜单',
+              key: 'navMenus',
+              componentType: 'Modal',
+              componentProps: {
+                type: 'dialog',
+                slot: markRaw(defineAsyncComponent(() => import('../navigationFrame/components/AddMenuConfig.vue'))),
+                slotProps: ({ activeComponent })=>{
+                  return {
+                    navMenus: activeComponent.data.navMenus
+                  }
+                },
+                title: '配置菜单',
+                width: '70%'
+              }
+            },
+            {
+              label: '指定默认选中菜单',
+              key: 'defaultTopActive',
+              value: '',
+              componentType: 'TreeSelectPlus',
+              componentProps: {
+                options: ({ configValue })=>{
+                  return Array.isArray(configValue.navMenus) ? configValue.navMenus : []
+                },
+                props: {
+                  label: 'title',
+                  value: 'id'
+                }
+              },
+              show: ({ mode })=>mode !== 'vertical'
+            },
+            {
+              label: '内部跳转页面id',
+              key: 'innerPageId',
+              value: '',
+              componentType: 'Input',
+              dynamicDataSource: {}
+            },
+            {
+              label: '内部跳转页面名称',
+              key: 'innerPageName',
+              value: '',
+              componentType: 'Input',
+              dynamicDataSource: {}
+            }
+          ]
+        }
+      ],
+      event: [
+        {
+          label: '扫一扫事件',
+          key: 'scan'
+        }
+      ]
+    }
+
+  }),
+  render: ()=>import('./index.vue')
+}