ibsp-fg-page 4.0.2

package/src/views/designer/layout/FrameworkLayout.vue

@@ -0,0 +1,542 @@
+<script setup lang='ts'>
+import { getPagePlatformSysParamApi } from '@/api/ibsp-bg-app';
+import { onBeforeMount, ref, reactive, useAttrs, onMounted } from 'vue';
+import type { PlatformConfig } from '@/types'
+import SvgIcon from '@/components/globals/SvgIcon.vue'
+import type { PageVersion } from '../hooks/useInitPage'
+import { useRouter, useRoute} from 'vue-router'
+import {platformLibrary} from '../modules/index'
+import { Modal } from '@nextui';
+import NewScriptIndex from '@ibsp-script/src/index.vue'
+import { savePageVersionApi, copyPageVersion, startPageVersion, deletePageVersion } from '@/api/ibsp-bg-page'
+import { useComponentStore } from '@/stores';
+import { registerCommand } from '@/models/command'
+import {
+  FolderChecked,
+  FullScreen,
+  Moon,
+  RefreshRight,
+  Setting,
+  Sunny,
+  View,
+  HelpFilled,
+  Plus,
+  Close
+} from '@element-plus/icons-vue';
+import { toggleFull } from 'be-full';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { useKeyboard } from '@/hooks/useKeyboard';
+import IbspMonacoCode from '@/components/ibsp/IbspMonacoCode.vue'
+import { saveTable } from '@/api/ibsp-bg-form';
+const props = defineProps<{
+  page: IBSP.IPage.Page,
+  versions: PageVersion[],
+  updateVersionList: Function,
+}>()
+const attrs = useAttrs()
+const router = useRouter()
+const route = useRoute()
+const componentStore = useComponentStore()
+const platformConfig = ref<Partial<PlatformConfig>>({})
+const theme = ref(localStorage.getItem('ibsp-theme') || 'dark')
+const platformLibs = platformLibrary()
+const platformState = reactive({
+  var: {
+    show: false,
+    name: '变量',
+    padding: '0 15px'
+  },
+  const: {
+    show: false,
+    name: '常量',
+    padding: '0 15px'
+  },
+  script: {
+    show: false,
+    name: '脚本',
+    padding: '0 15px'
+  },
+  material: {
+    show: false,
+    name: '素材',
+    padding: '0 15px'
+  },
+  method: {
+    show: false,
+    name: '方法',
+    padding: '0 15px'
+  },
+  icon: {
+    show: false,
+    name: '图标',
+    padding: '0 15px'
+  },
+  dataModel: {
+    show: false,
+    name: '数据模型'
+  }
+})
+
+const themeOptions = [
+  {
+    label: '亮色',
+    value: 'light',
+    icon: Sunny
+  },
+  {
+    label: '暗色',
+    value: 'dark',
+    icon: Moon
+  }
+]
+const scriptVisible = ref(false)
+const jumpTagRef = ref<HTMLAnchorElement | null>(null)
+onBeforeMount(async () => {
+  const res = await getPagePlatformSysParamApi()
+  platformConfig.value = res.data
+})
+
+const onChangeTheme = (theme: string) => {
+  localStorage.setItem('ibsp-theme', theme);
+  if (theme === 'light') {
+    document.documentElement.classList.remove('dark');
+    document.documentElement.classList.remove('ibsp-next-ui-dark');
+    document.documentElement.classList.add('theme-light');
+    document.documentElement.classList.add('ibsp-next-ui-light');
+    return
+  }
+  document.documentElement.classList.remove('theme-light');
+  document.documentElement.classList.remove('ibsp-next-ui-light');
+  document.documentElement.classList.add('dark');
+  document.documentElement.classList.add('ibsp-next-ui-dark');
+
+};
+onChangeTheme(theme.value)
+
+const onClickOpenPlatform = (type: keyof typeof platformState) => {
+  platformState[type].show = true
+}
+
+const savePage = () => {
+
+  // 暂时保存到localStorage, 后续调用接口保存
+  const data = props.page.generatePreviewData()
+  const id = props.page.id;
+  if (!id || id === 'designer') {
+    ElMessage.warning('保存失败, 请前往数字中台创建页面, 已保存到本地');
+  } else {
+    const _formModelJson = props.page.generateFormModel();
+    if (_formModelJson && _formModelJson.length) {
+      saveTable(_formModelJson[0]).then(
+        res => {
+          savePageVersionApi({
+            id,
+            viewJson: JSON.stringify(data) || '{}'
+          })
+            .then(res => {
+              ElMessage.success(res.success ? '保存成功' : '保存失败');
+            })
+        }
+      )
+    } else {
+      savePageVersionApi({
+        id,
+        viewJson: JSON.stringify(data) || '{}'
+      })
+        .then(res => {
+          ElMessage.success(res.success ? '保存成功' : '保存失败');
+        })
+    }
+  }
+  localStorage.setItem('ibsp-page', JSON.stringify(data));
+}
+
+const previewPage = () => {
+  if (jumpTagRef.value) {
+    jumpTagRef.value.href = '/preview/' + route.params?.id
+    jumpTagRef.value.click()
+  }
+}
+
+const visibleFormModel = ref(false);
+const formModelJson = ref();
+const jsonRef = ref(null)
+
+const viewFormModel = () => {
+  const _formModelJson = props.page.generateFormModel();
+  formModelJson.value = JSON.stringify(_formModelJson, null, 2);
+  visibleFormModel.value = true;
+}
+
+
+const onClickToolButtons = (type: string) => {
+  switch (type) {
+  case 'refresh':
+    router.go(0);
+    break;
+  case 'fullScreen':
+    toggleFull();
+    break;
+  case 'script':
+    scriptVisible.value = true;
+    break;
+  case 'setting':
+    {
+      const component = componentStore.componentData.find((item:IBSP.IComponent.DesignComponent)=>item.active) as IBSP.IComponent.DesignComponent
+      if (component) {
+        component.active = false
+      }
+    }
+    break;
+  case 'save':
+    savePage();
+    break;
+  case 'preview':
+    previewPage();
+    break;
+  case 'viewFormModel':
+    viewFormModel();
+    break;
+  default:
+    break;
+  }
+}
+
+const onChangeVersion = (val:string) => {
+  attrs.loadPage(val)
+  startPageVersion(val)
+}
+
+const onClickAddVersion = () => {
+  const id = props.versions.find(item => item.value === props.page.id)?.id
+  if (!id) {
+    return
+  }
+  copyPageVersion(id).then(res => {
+    if (res.success) {
+      ElMessage.success('添加成功')
+      props.updateVersionList()
+    } else {
+      ElMessage.error('添加失败')
+    }
+  })
+}
+const onClickDelVersion = (item:PageVersion) => {
+  if (props.versions.length === 1) {
+    return ElMessage.error('至少保留一个版本')
+  }
+  ElMessageBox.confirm(`确定删除 V${item.versionIndex} 版本吗?`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    deletePageVersion(item.id).then(res => {
+      if (res.success) {
+        props.updateVersionList()
+        ElMessage.success('删除成功')
+      } else {
+        ElMessage.error('删除失败')
+      }
+    })
+  })
+    .catch(() => {
+      ElMessage.info('已取消删除')
+    })
+}
+onMounted(() => {
+  useKeyboard()
+    .onKey('Command_S')
+    .onKey('Ctrl_S')
+    .selector('#app-designer-container')
+    .subscribe(() => {
+      savePage()
+    })
+  useKeyboard()
+    .onKey('Command_D')
+    .onKey('Ctrl_D')
+    .selector('#app-designer-container')
+    .subscribe(() => {
+      previewPage()
+    })
+
+  registerCommand('dataSource.open', () => {
+    onClickOpenPlatform('dataModel')
+  })
+});
+</script>
+
+<template>
+  <div class="ibsp-layout">
+    <header>
+
+      <!-- logo -->
+      <div class="app-logo">
+        <div class="logo-container">
+          <img :src="platformConfig.sysLog" alt="">
+        </div>
+        <!-- <h1>{{ platformConfig.sysName ? `${platformConfig.sysName}-页面设计器` : '综合业务平台-页面设计器' }}</h1> -->
+        <h1>页面设计器</h1>
+      </div>
+
+      <!-- title -->
+      <div class="title-version">
+        <span class="title">{{ page.name }}</span>
+        <IbspSelect v-model="page.id"
+                    @change="onChangeVersion"
+                    style="width: 100px;margin-left: 5px;"
+                    popper-class="page-version-select"
+                    :options="versions">
+          <template #footer>
+            <div class="app-project-version-add" @click="onClickAddVersion">
+              <el-icon>
+                <Plus></Plus>
+              </el-icon>
+            </div>
+          </template>
+          <template #option="{ item }">
+            <div class="app-project-title-label">
+              <span>{{ item.label }}</span>
+              <el-icon @click.stop="onClickDelVersion(item)">
+                <Close></Close>
+              </el-icon>
+            </div>
+          </template>
+
+        </IbspSelect>
+      </div>
+
+      <!-- buttons -->
+      <div class="operation-list">
+        <el-button :icon="RefreshRight" @click="onClickToolButtons('refresh')" />
+        <el-button :icon="FullScreen" @click="onClickToolButtons('fullScreen')" />
+        <el-button @click="onClickToolButtons('script')">
+          <SvgIcon :icon="{ type: 'svg', value: '脚本2' }" />
+        </el-button>
+        <el-segmented v-model="theme"
+                      :options="themeOptions"
+                      @change="onChangeTheme">
+          <template #default="{ item }">
+            <el-icon size="16">
+              <component :is="item.icon" />
+            </el-icon>
+          </template>
+        </el-segmented>
+        <el-dropdown trigger="click">
+          <el-button :icon="HelpFilled">平台库</el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="onClickOpenPlatform('var')">变量</el-dropdown-item>
+              <el-dropdown-item @click="onClickOpenPlatform('script')">脚本</el-dropdown-item>
+              <el-dropdown-item @click="onClickOpenPlatform('const')">常量</el-dropdown-item>
+              <el-dropdown-item @click="onClickOpenPlatform('material')">素材</el-dropdown-item>
+              <el-dropdown-item @click="onClickOpenPlatform('method')">函数</el-dropdown-item>
+              <el-dropdown-item @click="onClickOpenPlatform('icon')">图标</el-dropdown-item>
+              <el-dropdown-item @click="onClickOpenPlatform('dataModel')">数据模型</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-button :icon="Setting" @click="onClickToolButtons('setting')">页面配置</el-button>
+        <el-button :icon="FolderChecked" @click="onClickToolButtons('save')">保存</el-button>
+        <el-button :icon="View" @click="onClickToolButtons('viewFormModel')">预览表单JSON</el-button>
+        <el-button :icon="View" @click="onClickToolButtons('preview')">预览</el-button>
+      </div>
+
+    </header>
+
+    <section>
+      <slot></slot>
+    </section>
+
+    <template v-for="(item,key) in platformState" :key="key">
+      <Modal v-model="item.show"
+             :title="item.name + '配置'"
+             :style="{
+               width: item.width || '65%',
+               height: item.height || '60%'
+             }"
+             :contentPadding="item.padding"
+             :clickMaskClose="false"
+             closeDestroyContent
+             :hideFooter="true">
+        <component v-if="item.show"
+                   :is="platformLibs[key]"
+                   :page="page"></component>
+      </Modal>
+    </template>
+
+
+    <NewScriptIndex
+      :page="page"
+      v-model:visible="scriptVisible"
+    />
+
+    <a ref="jumpTagRef" :target="page.id"></a>
+  </div>
+  <Modal v-model="visibleFormModel"
+         :style="{
+           width: '80vw',
+           height: '80vh'
+         }"
+         title="表单JSON Schema预览"
+         closeDestroyContent
+  >
+    <IbspMonacoCode language="json"
+                    ref="jsonRef"
+                    v-show="visibleFormModel"
+                    v-model="formModelJson" />
+  </Modal>
+</template>
+
+<style lang="less" scoped>
+.ibsp-layout {
+  width: 100%;
+  height: 100%;
+  header {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    padding: 10px;
+    border-bottom: 1px solid var(--theme-border-color);
+
+    .app-logo {
+      display: flex;
+      align-items: center;
+      color: var(--theme-gl-bg);
+      -webkit-text-fill-color: transparent;
+      background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, #ffffff, rgba(255, 255, 255, 0) 60%) -100% / 50% no-repeat currentColor;
+      -webkit-background-clip: text;
+      animation: shark-txt 3s infinite;
+
+
+      .logo-container {
+        width: 40px;
+        height: 40px;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+
+      h1 {
+        margin-left: 10px;
+        font-size: 20px;
+        font-weight: bold;
+        font-family: "Microsoft YaHei", pinia, "Helvetica Neue", Helvetica, Arial, sans-serif;
+      }
+    }
+
+    .title-version {
+      flex: 1;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .title {
+        line-height: 32px;
+      }
+
+      :deep(.el-select__wrapper) {
+        --el-border-radius-base: 6px;
+      }
+    }
+
+    .operation-list {
+      display: flex;
+
+      .el-button {
+        margin: 0;
+
+        padding: 8px 10px;
+      }
+
+      .el-button {
+        --el-border-radius-base: 6px;
+        &:hover {
+          color: var(--ibsp-theme-color);
+
+          background-color: var(--theme-btn-bg);
+          border: 1px solid var(--theme-gl-bg);
+        }
+      }
+
+      .el-segmented {
+        border: 1px solid var(--el-border-color);
+        --el-border-radius-base: 6px;
+        --el-segmented-item-selected-bg-color: var(--theme-gl-bg);
+      }
+
+      >*:not(:last-child) {
+        margin-right: 10px !important;
+
+      }
+
+      :deep(.el-segmented__item-label) {
+        height: 100%;
+        display: flex;
+        align-items: center;
+      }
+
+    }
+  }
+
+  section {
+    height: calc(100% - 50px);
+
+  }
+}
+</style>
+
+<style>
+@keyframes shark-txt {
+  from {
+    background-position: -100%;
+  }
+
+  to {
+    background-position: 200%;
+  }
+}
+
+.page-version-select {
+  .el-select-dropdown__item {
+    padding: 0 10px;
+
+  }
+
+  .app-project-title-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    .el-icon {
+      opacity: 0;
+
+      &:hover {
+        color: var(--theme-gl-bg);
+      }
+    }
+
+    &:hover {
+      .el-icon {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.app-project-version-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--theme-gl-bg);
+  }
+}
+</style>