ibsp-fg-page 4.0.2

package/src/views/builtins/my/mobile/switch-account/index.vue

@@ -0,0 +1,107 @@
+<script setup lang='ts'>
+import { getAccount, udpateAccount } from '@/views/builtins/util/userAccout';
+import { type UserInfo } from '@/views/builtins/util/userAccout';
+import { useRouter } from 'vue-router'
+import UserAvatar from './component/UserAvatar.vue';
+import CryptoJS from 'crypto-js'
+import { loginApi } from '@/api/ibsp-bg-auth'
+import { encryptMessage } from '@/views/builtins/login/useLogin';
+import { ElMessage } from 'element-plus'
+import { emitGlobalEvent } from '@models/useGlobalEvents';
+import { ref } from 'vue';
+const router = useRouter()
+const userAccount = getAccount();
+const loading = ref(false)
+const currentUser = userAccount[0]
+const switchAccount = async (account: UserInfo) => {
+  loading.value = true
+  const res:any = await loginApi({
+    account: account.account,
+    password: CryptoJS.MD5(account.password).toString()
+  }, {
+    headers: {
+      'Ibsp-Error-Catch': false
+    }
+  })
+  switch (res.code) {
+  case 20000:
+  {
+    localStorage.setItem('ibsp_token', res.data);
+    localStorage.setItem('ibsp-token', res.data);
+    localStorage.setItem('ibsp_info', encryptMessage(JSON.stringify(account)))
+    await udpateAccount({account: account.account, password: account.password}, res.data)
+    router.go(0)
+    break;
+  }
+  default:
+    ElMessage.error(res.message);
+    emitGlobalEvent('loginExpired');
+    break;
+  }
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="ibsp-app-switch-account">
+    <div v-for="account in userAccount"
+         :key="account.account"
+         class="user-item">
+      <div class="user-info">
+        <UserAvatar :name="account.username" :src="account.personImage"/>
+      </div>
+      <div class="current-user" v-if="account.account === currentUser.account">当前登录</div>
+      <div v-else
+           class="operate"
+           @click="switchAccount(account)"
+           v-loading="loading" >切换</div>
+    </div>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.ibsp-app-switch-account {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  gap:12px;
+  .user-item {
+    display: flex;
+    padding: 12px 16px;
+    background-color: #fff;
+    border-radius: 8px;
+    justify-content: space-between;
+    align-items: center;
+    .user-info {
+      display: flex;
+      align-items: center;
+    }
+    .current-user {
+      display: flex;
+      align-items: center;
+      justify-items: center;
+      width: 70px;
+      font-size: 15px;
+      color:  rgb(255, 128, 0);
+    }
+    .operate {
+      font-size: 15px;
+      background-color: rgb(255, 128, 0);
+      color: #fff;
+      width: 84px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 8px;
+      height: 40px;
+    }
+        /* 按钮被点击时的样式 */
+    .operate:active {
+      background-color: rgb(250, 145, 39);
+    }
+  }
+}
+</style>

package/src/views/builtins/util/userAccout.ts

@@ -0,0 +1,33 @@
+import { getUserInfo } from '@/api/ibsp-bg-user';
+export interface UserInfo {
+    username?: string;
+    password: string;
+    account: string;
+    personImage?: string;
+  }
+
+// 提取和解析用户信息的通用函数
+const getUserAccounts = (): UserInfo[] => {
+  const userAccountJson = localStorage.getItem('userAccount');
+  return userAccountJson ? JSON.parse(userAccountJson) : [];
+};
+
+export const udpateAccount = async (userInfo: UserInfo, token: string) => {
+  const res = await getUserInfo(token)
+  const userInfoTemp = res.data
+  userInfoTemp.password = userInfo.password
+  try {
+    const userAccount = getUserAccounts();
+    const existingIndex = userAccount.findIndex(u => u.account === userInfo.account);
+    if (existingIndex !== -1) {
+      userAccount.splice(existingIndex, 1);
+    }
+    userAccount.unshift(userInfoTemp);
+    localStorage.setItem('userAccount', JSON.stringify(userAccount));
+  } catch (error) {
+    console.error('更新账号信息失败', error);
+  }
+};
+
+// 获取账号信息的函数
+export const getAccount = () => getUserAccounts();

package/src/views/designer/components/BindValueConfig/components/Component.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { ref } from 'vue';
+const props = defineProps({
+  page: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const selectComponentId = ref('')
+const dynamicValueOptions = props.page.dynamicValueOptions
+
+</script>
+
+<template>
+  <div class="ibsp-bind-component-config">
+    <div class="bind-option-item">
+      <span class="label">选择变量</span>
+      <el-cascader
+        v-model="selectComponentId"
+        :options="dynamicValueOptions.componentValueOptions"
+        :props="{
+          children: 'data'
+        }"
+        placeholder="请选择数据模型"
+      />
+    </div>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.ibsp-bind-component-config{
+    :deep(.el-cascader){
+        width: 100%;
+    }
+}
+
+</style>

package/src/views/designer/components/BindValueConfig/components/Const.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { ref } from 'vue';
+const props = defineProps({
+  page: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const selectConstId = ref('')
+const dynamicValueOptions = props.page.dynamicValueOptions
+
+</script>
+
+<template>
+  <div class="ibsp-bind-const-config">
+    <div class="bind-option-item">
+      <span class="label">选择常量</span>
+      <el-cascader
+        v-model="selectConstId"
+        :options="dynamicValueOptions.constValueOptions"
+        :props="{
+          children: 'data'
+        }"
+        placeholder="请选择常量"
+      />
+    </div>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.ibsp-bind-var-config{
+
+}
+
+</style>

package/src/views/designer/components/BindValueConfig/components/Var.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { ref } from 'vue';
+const props = defineProps({
+  page: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const selectVarId = ref('var')
+const dynamicValueOptions = props.page.dynamicValueOptions
+
+</script>
+
+<template>
+  <div class="ibsp-bind-var-config">
+    <div class="bind-option-item">
+      <span class="label">选择变量</span>
+      <el-cascader
+        v-model="selectVarId"
+        :options="dynamicValueOptions.varValueOptions"
+        :props="{
+          children: 'data'
+        }"
+        placeholder="请选择数据模型"
+      />
+    </div>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.ibsp-bind-var-config{
+    :deep(.el-cascader){
+        width: 100%;
+    }
+}
+
+</style>

package/src/views/designer/components/BindValueConfig/index.vue

@@ -0,0 +1,115 @@
+<script setup>
+import { ref, defineAsyncComponent, computed, reactive } from 'vue';
+
+import { getUuid } from '@/utils';
+const props = defineProps({
+  page: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const bindValues = reactive({
+  id: '',
+  type: 'var',
+  value: '',
+})
+
+
+const dynamicValueOptions = props.page.dynamicValueOptions
+
+const data = computed(() => {
+  return [
+    ...dynamicValueOptions.queryDynamicValueOptions(['var', 'const', 'component', 'componentProps', 'page', 'system', 'form']),
+    {
+      label: '表达式',
+      value: 'ibspExpression',
+      data: []
+    }
+  ]
+})
+
+const currentType = computed(()=>data.value.find(item=>item.value === bindValues.type))
+
+defineExpose({
+  addDynamicValue: ()=>{
+    if (!bindValues.id) {
+      bindValues.id = `#d_${getUuid()}`
+    }
+    const result = [bindValues.type, ...bindValues.value]
+    props.page.bindDynamicData[bindValues.id] = result
+    return bindValues.id
+  },
+  setBindValues: (id)=>{
+    const value = props.page.bindDynamicData[id]
+    if (value) {
+      const [type, ...rest] = value
+      bindValues.value = rest
+      bindValues.id = id
+      bindValues.type = type
+    } else {
+      bindValues.value = ''
+      bindValues.id = ''
+      bindValues.type = 'var'
+    }
+  }
+
+})
+
+</script>
+
+<template>
+  <div class="ibsp-bind-value-config">
+    <div class="bind-option-item">
+      <span class="label">绑定类型</span>
+      <el-radio-group v-model="bindValues.type" size="large">
+        <el-radio-button v-for="item in data"
+                         :value="item.value"
+                         :label="item.value"
+                         :key="item.value">{{item.label}}</el-radio-button>
+      </el-radio-group>
+    </div>
+    <div class="bind-option-item">
+      <span class="label">选择{{ currentType.label }}</span>
+      <el-cascader
+        v-model="bindValues.value"
+        :options="currentType.data"
+        :props="{
+          children: 'data'
+        }"
+        placeholder="请选择"
+      />
+    </div>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.ibsp-bind-value-config{
+width: 100%;
+height: 100%;
+padding: 15px;
+padding-top: 0;
+:deep(.el-input){
+  --el-input-focus-border-color: var(--theme-gl-bg);
+}
+:deep(.el-select){
+  --el-select-border-color-hover:var(--theme-gl-bg);
+  --el-select-input-focus-border-color: var(--theme-gl-bg);
+}
+
+:deep(.bind-option-item),.bind-option-item{
+      display: flex;
+      padding-top: 15px;
+      .label{
+        width: 120px;
+        padding-left: 10px;
+        line-height: 32px;
+        flex-shrink: 0;
+      }
+      .el-cascader{
+        width: 100%;
+    }
+    }
+}
+
+</style>

package/src/views/designer/components/DragMenu.vue

@@ -0,0 +1,135 @@
+<script setup>
+import { VueDraggable } from 'vue-draggable-plus'
+import { computed, ref } from 'vue';
+import { v4 } from 'uuid';
+
+import SvgIcon from '@/components/globals/SvgIcon.vue';
+const props = defineProps({
+  id: {
+    type: String,
+    default: ()=> {
+      return v4()
+    }
+  },
+  mode: {
+    type: String,
+    default: 'horizontal' //  horizontal vertical
+  },
+  width: {
+    type: [Number, String],
+    default: ()=>{
+      // return props.mode === 'horizontal' ? '100%' : 40
+      return '100%'
+    }
+  },
+  height: {
+    type: [Number, String],
+    default: ()=>{
+      // return props.mode === 'horizontal' ? 40 : '100%'
+      return 40
+    }
+  },
+  defaultSelectMenuIndex: {
+    type: Number,
+    default: 0
+  },
+})
+
+const emit = defineEmits(['onClickItemMenu', 'onChangeItemMenu', 'onDblclickItemMenu', 'onStartDrag'])
+const state = defineModel()
+if (!state.value.currentSelectMenu) {
+  state.value.currentSelectMenu = state.value.data[props.defaultSelectMenuIndex]
+}
+
+const handlePxUnit = (val)=> typeof val === 'number' ? `${val}px` : val
+
+const onClickItemMenu = (item)=> {
+  state.value.currentSelectMenu = item
+  emit('onClickItemMenu', item?.id, item)
+}
+
+const onChangeItemMenu = (data)=> {
+  emit('onChangeItemMenu', data)
+}
+
+const getIsShowItem = (item)=> {
+  if (item.show === undefined || item.show === null) return true
+  if (typeof item.show === 'function') return item.show(item)
+  return item.show
+}
+
+const onDblclickItemMenu = (e, data, index, state)=> {
+  emit('onDblclickItemMenu', e, data, index, state)
+}
+
+</script>
+
+<template>
+  <div class="drag-menu"
+       :style="{
+         width: handlePxUnit(width),
+         height: handlePxUnit(height)
+       }">
+    <VueDraggable
+      v-model="state.data"
+      :group="id"
+      :animation="400"
+      :class="['drag-menu-container', `drag-menu-${mode}`]"
+      @change="onChangeItemMenu"
+    >
+      <div v-for="(item,index) in state.data"
+           :key="item.id"
+           :id="item.id"
+           v-show="getIsShowItem(item)"
+           @mousedown.stop="onClickItemMenu(item)"
+           @dblclick="(e)=>onDblclickItemMenu(e,item,index, state)"
+           :class="['drag-menu-item',state.currentSelectMenu?.id === item?.id?'active-drag-item':'']">
+        <SvgIcon v-if="item.icon"
+                 style="margin-right: 3px;"
+                 :icon="item.icon" />
+        <span >{{ item.label }}</span>
+      </div>
+    </VueDraggable>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.drag-menu {
+  width: 100%;
+  height: 100%;
+
+  :deep(.drag-menu-container){
+    display: flex;
+    user-select: none;
+
+    .drag-menu-item{
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      cursor: pointer;
+      height: 100%;
+      font-size: 14px;
+    }
+    .active-drag-item{
+      background-color: var(--theme-btn-bg);
+      color: var(--theme-font-color);
+      border-top: 2px solid var(--theme-gl-bg);
+    }
+  }
+  :deep(.drag-menu-horizontal){
+    flex-direction: row;
+    justify-content: space-between;
+    height: 100%;
+    width: inherit;
+  }
+  :deep(.drag-menu-vertical){
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    height: inherit;
+  }
+}
+
+</style>

package/src/views/designer/components/DrawerLodding.vue

@@ -0,0 +1,69 @@
+<script setup >
+import { SuccessFilled, CircleCloseFilled } from '@element-plus/icons-vue'
+defineProps({
+  loadingText: {
+    type: String,
+    default: '正在切换页面, 请稍候...'
+  },
+  loadingCompletText: {
+    type: String,
+    default: '加载完成 !'
+  },
+  stateType: {
+    type: String,
+    default: 'success'
+  },
+  isLoadingComplet: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <div class="loading-container" v-if="$attrs?.modelValue">
+    <el-drawer
+      direction="ttb"
+      class="lodding-drawer"
+      :with-header="false"
+      v-bind="$attrs"
+    >
+      <el-alert
+        :type="stateType"
+        :closable="false"
+      >
+        <template #title>
+          <div class="page-loading">
+            <span v-show="!isLoadingComplet"
+                  v-loading="true"
+                  class="loading-text"
+            >{{ loadingText }}.</span>
+            <span v-show="isLoadingComplet"><el-icon>
+              <SuccessFilled v-if="stateType === 'success'" />
+              <CircleCloseFilled v-else />
+            </el-icon>{{ loadingCompletText }}</span>
+          </div>
+        </template>
+
+      </el-alert>
+    </el-drawer>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.loading-container{
+  height: 100%;
+  width: 100%;
+  background-color: var(--theme-bg);
+    :deep(.lodding-drawer){
+      height: 72px !important;
+    width: 300px;
+    margin: auto;
+    top: 30px;
+    background-color: transparent;
+    box-shadow: none;
+    }
+
+}
+</style>

package/src/views/designer/components/FloatModuleCard.vue

@@ -0,0 +1,136 @@
+<script setup>
+import { ref } from 'vue';
+import { Close } from '@element-plus/icons-vue'
+
+import Drag from './drag/index.vue'
+
+import SvgIcon from '@/components/globals/SvgIcon.vue';
+
+const props = defineProps({
+  item: {
+    type: Object,
+    default: null
+  }
+})
+
+const current = ref({
+  ...props.item,
+  _position: {
+    x: 0,
+    y: 0,
+    w: 260,
+    h: 600,
+    ...(props.item?.position || [])
+  }
+})
+
+const emit = defineEmits(['onClick', 'onDragging', 'onClickRemove'])
+
+const onClickRemove = () => {
+  emit('onClickRemove', props.item)
+}
+</script>
+
+<template>
+  <Drag
+    ref="dragRef"
+    :draggable="true"
+    :is-Ctrl="false"
+    :min-height="300"
+    :min-width="150"
+    :parent="false"
+    :resizable="true"
+    :snap="false"
+    :style="{
+
+    }"
+    :w="current?._position?.w"
+    :h="current?._position?.h"
+    :x="current?._position?.x"
+    :y="current?._position?.y"
+    :z="199"
+    class="float-module-card"
+  >
+    <header>
+      <div class="title">
+        <SvgIcon v-if="item.icon"
+                 style="margin-right: 3px;"
+                 :icon="item.icon" />
+        <span>{{ item.label }}</span>
+      </div>
+      <div class="function">
+        <el-icon @click="onClickRemove"><Close /></el-icon>
+      </div>
+    </header>
+    <main @mousedown.stop="()=>{}">
+      <slot></slot>
+    </main>
+  </Drag>
+
+</template>
+
+<style lang="less">
+.float-module-card{
+    position: absolute;
+    top: 0;
+    background-color: var(--theme-bg);
+    backdrop-filter: blur(15px);
+    border: 1px solid var(--theme-border-color);
+    border-radius: 6px;
+    &:hover{
+      z-index: 200 !important;
+    }
+    >header{
+        height: 40px;
+        border-bottom: 1px solid var(--theme-border-color);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 10px;
+        cursor: grab;
+        .title{
+            display: flex;
+            align-items: center;
+        }
+        >.function{
+            display: flex;
+            align-items: center;
+            >.el-icon{
+                cursor: pointer;
+                font-size: 16px;
+                &:hover{
+                    color: var(--theme-gl-bg);
+                }
+            }
+        }
+    }
+    >main{
+        height: calc(100% - 40px);
+        overflow: auto;
+    }
+    >.handle{
+        display: none !important;
+    }
+    >.handle-bm,>.handle-mr{
+        display: block !important;
+        background-color: var(--theme-border-color) !important;
+        border-radius: 5px;
+        opacity: 0;
+        transition: opacity 0.2s;
+        border: none !important;
+        &:hover{
+            opacity: 1;
+        }
+    }
+    >.handle-mr{
+        height: 100% !important;
+    top: 0 !important;
+    }
+    >.handle-bm{
+        width: 100% !important;
+        left: 0 !important;
+    }
+
+}
+
+</style>