Merge branch 'ft' into 'main_dev'

perf(src/packages): 优化自定义网页全屏图标展示

See merge request yunteng/thingskit-view!75

@@ -5,7 +5,8 @@ enum Api {
   GET_DICT = '/dict_item',
   UPLOAD = '/oss/upload',
   DOWNLOAD = '/oss/download_file/',
-  AREALIST = '/area/list'
+  AREALIST = '/area/list',
+  PLATFORM = '/platform/get'
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -28,9 +29,13 @@ export const downloadFile = (fileName: string) => {
   return defHttp.get({ url: `${Api.DOWNLOAD}${fileName}` })
 }
 
+//获取区域
 export const getAreaList = (data: object) => {
   return defHttp.post<any>({
     url: Api.AREALIST,
     data
   })
 }
+
+//获取企业定制
+export const getPlatformInfo = () => defHttp.get({ url: Api.PLATFORM })

 <template>
   <n-dropdown trigger="hover" @select="handleSelect" :show-arrow="true" :options="options">
     <div class="user-info-box">
-      <person-icon v-if="fallback"></person-icon>
+      <person-icon v-if="!avatarLogo"></person-icon>
       <n-avatar
-        v-if="!fallback"
+        v-else
         round
         object-fit="cover"
         size="medium"
@@ -20,24 +20,30 @@
 </template>
 
 <script lang="ts" setup>
-import { h, ref, computed } from 'vue'
+import { h, ref, onMounted } from 'vue'
 import { NAvatar, NText } from 'naive-ui'
 import { renderIcon } from '@/utils'
-import { logout, renderLang } from '@/utils'
+import { renderLang } from '@/utils'
 import { GoSystemSet } from '@/components/GoSystemSet/index'
 import { GoSystemInfo } from '@/components/GoSystemInfo/index'
-import Person from './person.png'
 import { icon } from '@/plugins'
 import { useUserStore } from '@/store/external/modules/user'
 import { useSyncRemote } from '@/views/chart/hooks/external/useRemote.hook'
-const { ChatboxEllipsesIcon, PersonIcon, LogOutOutlineIcon, SettingsSharpIcon } = icon.ionicons5
+import Person from './person.png'
+import { useSetWebsiteIcon } from '@/hooks/external/useSetWebsiteIcon.hook'
+
+const { getPlatform } = useSetWebsiteIcon()
+
+const { PersonIcon, LogOutOutlineIcon, SettingsSharpIcon } = icon.ionicons5
 
 const t = window['$t']
 
 const { dataSyncUpdate } = useSyncRemote()
 
 const modelShowInfo = ref(false)
+
 const modelShow = ref(false)
+
 const avatarLogo = ref('')
 
 // 是否失败
@@ -69,6 +75,17 @@ const renderUserInfo = () => {
     ]
   )
 }
+
+onMounted(() => {
+  try {
+    renderUserInfo()
+    //获取企业定制
+    getPlatform()
+  } finally {
+    console.log()
+  }
+})
+
 const options = ref([
   {
     label: '我的信息',
@@ -124,6 +141,7 @@ const sysInfoHandle = () => {
 
 // THINGS_KIT 修改退出登录
 const userStore = useUserStore()
+
 const handleSelect = (key: string) => {
   switch (key) {
     case 'contact':

-import { toRefs, ref } from 'vue'
+import { toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
@@ -14,6 +14,8 @@ export const useChartInteract = (
 ) => {
   const chartEditStore = useChartEditStore()
   const { interactEvents } = chartConfig.events
+  const { selectCurrentItems } = chartConfig.option
+  const { selectTargetItems } = chartConfig.option
   const fnOnEvent = interactEvents.filter(item => {
     return item.interactOn === interactEventOn
   })
@@ -30,26 +32,21 @@ export const useChartInteract = (
         Header.value[key] = param[item.interactFn[key]]
       }
     })
-    setJump(chartConfig)
+    setJump(selectCurrentItems, selectTargetItems)
   })
-  function setJump(chart: CreateComponentType) {
-    /**
-     * 通过页面显示隐藏来模拟页面跳转
-     * 当前点击对象和绑定的联动组件（分组或单个）内容隐藏，目标对象和绑定的联动组件（分组或单个）内容显示
-     */
+  function setJump(selectCurrentItems: string[], selectTargetItems: string[]) {
     try {
-      const targetId = chart.option.dataset[0].target
-      const currentId = chart.option.dataset[0].current
-      const targetButtonId = chart.option.dataset[0].targetButton
-      const currentButtonId = chart.option.dataset[0].currentButton
-      const targetIndex = chartEditStore.fetchTargetIndex(targetId)
-      const currentIndex = chartEditStore.fetchTargetIndex(currentId)
-      const targetButtonIndex = chartEditStore.fetchTargetIndex(targetButtonId)
-      const currentButtonIndex = chartEditStore.fetchTargetIndex(currentButtonId)
-      chartEditStore.componentList[targetIndex].status.hide = false
-      chartEditStore.componentList[currentIndex].status.hide = true
-      chartEditStore.componentList[targetButtonIndex].status.hide = false
-      chartEditStore.componentList[currentButtonIndex].status.hide = true
+      //优化循环性能
+      for (let i = 0, len = chartEditStore.componentList.length; i < len; i++) {
+        const compId = chartEditStore.componentList[i].id
+        const compItem = chartEditStore.componentList[i]
+        if (selectCurrentItems.includes(compId)) {
+          compItem.status.hide = true
+        }
+        if (selectTargetItems.includes(compId)) {
+          compItem.status.hide = false
+        }
+      }
     } finally {
       console.log()
     }

+import DefaultWebsiteIcon from '../../../public/favicon.ico'
+import { getPlatformInfo } from '@/api/external/common'
+
+export const useSetWebsiteIcon = () => {
+  const getPlatform = async () => {
+    //防止接口报错阻塞页面
+    try {
+      const rest = await getPlatformInfo()
+      replaceWebsiteIcon(rest?.icon || DefaultWebsiteIcon)
+    } finally {
+      console.log()
+    }
+  }
+
+  const replaceWebsiteIcon = (icon: string) => {
+    const linkEl = document.querySelectorAll('link[rel*="icon"]')
+    linkEl.forEach(item => {
+      item.setAttribute('href', icon)
+    })
+  }
+  return {
+    getPlatform
+  }
+}

@@ -16,11 +16,18 @@ import 'vue3-sketch-ruler/lib/style.css'
 
 // THINGS_KIT 内容安全协议hook
 import { useWebSecurityPolicy } from './hooks/external/useWebSecurityPolicy'
+// THINGS_KIT web站点icon设置hook
+import { useSetWebsiteIcon } from '@/hooks/external/useSetWebsiteIcon.hook'
+
 
 async function appInit() {
   // THINGS_KIT 内容安全协议hook
   useWebSecurityPolicy()
 
+  // THINGS_KIT web站点icon设置hook
+  const { getPlatform } = useSetWebsiteIcon()
+  getPlatform()
+
   const goAppProvider = createApp(GoAppProvider)
 
   const app = createApp(App)

@@ -6,25 +6,20 @@ import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
 import { interactActions, ComponentInteractEventEnum } from './interact'
 import { ButtonConfig } from './index'
 
+
 export const option = {
   // 时间组件展示类型，必须和 interactActions 中定义的数据一致
   [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
   // 暴露配置内容给用户
-  dataset: [
-    {
-      label: '',
-      current: '',
-      target: '',
-      currentButton: '',
-      targetButton: ''
-    }
-  ],
+  dataset: '第1页',
   buttonType: 'primary',
   buttonGhost: false,
   buttonDashed: false,
   buttonColor: '',
   buttonTextColor: 'white',
   buttonTextSize: '16',
+  selectCurrentItems: [],
+  selectTargetItems: []
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -40,27 +40,41 @@
           <span class="help-span">{{ threeFileHelpMessgae }}</span>
         </n-tooltip>
       </template>
-      <setting-item v-for="(item, index) in optionData.dataset" :key="index">
-        <n-input v-model:value="item.label" size="small" placeholder="按钮文字"></n-input>
-        <div style="height: 5px"></div>
-        <n-input v-model:value="item.currentButton" size="small" placeholder="填写当前按钮id（事件里面）"></n-input>
-        <div style="height: 5px"></div>
-        <n-input v-model:value="item.targetButton" size="small" placeholder="填写目标按钮id（事件里面）"></n-input>
-        <div style="height: 5px"></div>
-        <n-input v-model:value="item.current" size="small" placeholder="填写当前页面id（事件里面）"></n-input>
-        <div style="height: 5px"></div>
-        <n-input v-model:value="item.target" size="small" placeholder="填写目标页面id（事件里面）"></n-input>
-        <div style="height: 5px"></div>
+      <setting-item name="按钮文字" :alone="true">
+        <n-input v-model:value="optionData.dataset" size="small" placeholder="按钮文字"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="当前项">
+      <setting-item name="当前项" :alone="true">
+        <n-select
+          placeholder="请选择当前项"
+          multiple
+          size="small"
+          v-model:value="optionData.selectCurrentItems"
+          :options="selectCurrentItemOptions"
+        />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="目标项">
+      <setting-item name="目标项" :alone="true">
+        <n-select
+          placeholder="请选择目标项"
+          multiple
+          size="small"
+          v-model:value="optionData.selectTargetItems"
+          :options="selectTargetItemOptions"
+        />
       </setting-item>
     </setting-item-box>
   </collapse-item>
 </template>
 
 <script lang="ts" setup>
-import { PropType, ref } from 'vue'
+import { PropType, ref, onMounted } from 'vue'
 import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
 import { icon } from '@/plugins'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 defineProps({
   optionData: {
@@ -69,11 +83,11 @@ defineProps({
   }
 })
 
+const chartEditStore = useChartEditStore()
+
 const { HelpOutlineIcon } = icon.ionicons5
 
-const threeFileHelpMessgae = ref(`
-在事件里面复制对应组件id，填写你要跳转的目标，相当于一个按钮就绑定了一个页面（分组），然后跳转到另一个页面，其实就是点击当前页隐藏，目标页显示
-`)
+const threeFileHelpMessgae = ref(`勾选当前项和跳转的目标项`)
 
 const buttonTypeOptions = [
   {
@@ -105,6 +119,19 @@ const buttonTypeOptions = [
     value: 'error'
   }
 ]
+
+const selectCurrentItemOptions = ref<{ label: string; value: string }[]>([])
+
+const selectTargetItemOptions = ref<{ label: string; value: string }[]>([])
+
+onMounted(() => {
+  const componentList = chartEditStore.componentList.map(item => ({
+    label: item.chartConfig?.title,
+    value: item.id
+  }))
+  selectCurrentItemOptions.value = componentList
+  selectTargetItemOptions.value = componentList
+})
 </script>
 <style lang="scss" scoped>
 .help-span {

@@ -5,9 +5,9 @@
     :dashed="buttonDashed"
     :ghost="buttonGhost"
     :color="buttonColor"
-    @click="onClick(option.value.dataset[0])"
+    @click="onClick(option.value.dataset)"
   >
-    <span class="button-text-color">{{ option.value.dataset[0].label }}</span>
+    <span class="button-text-color">{{ dataset }}</span>
   </n-button>
 </template>
 
@@ -28,7 +28,7 @@ const props = defineProps({
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize } = toRefs(
+const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize, dataset } = toRefs(
   props.chartConfig.option
 )
 const option = shallowReactive({
@@ -39,13 +39,13 @@ const onClick = (v: any) => {
   useChartInteract(
     props.chartConfig,
     useChartEditStore,
-    { [ComponentInteractParamsEnum.DATA]: v?.current },
-    InteractEventOn.CHANGE,
+    { [ComponentInteractParamsEnum.DATA]: v },
+    InteractEventOn.CHANGE
   )
 }
 
 onMounted(() => {
-  onClick(option.value.dataset[0])
+  onClick(option.value.dataset)
 })
 
 // 手动更新

 <template>
   <div class="iframe-content" :style="getStyle(borderRadius)">
-    <div v-show="isShowSvg" @click="handleFullScreen" class="fullscreen-button">
+    <div v-show="isShowSvg" @click="handleFullScreen" id="fullscreenButton">
       <svg
         focusable="false"
         class=""
         data-icon="fullscreen"
-        width="2.1vw"
-        height="2.1vh"
+        width="4vw"
+        height="4vh"
         fill="currentColor"
         aria-hidden="true"
         viewBox="64 64 896 896"
@@ -23,6 +23,7 @@
       :src="option.dataset"
       :width="w"
       :height="h"
+      :allowfullscreen="allowfullscreen"
       style="border-width: 0"
     ></iframe>
   </div>
@@ -44,6 +45,8 @@ const props = defineProps({
 
 const isShowSvg = ref(false)
 
+const allowfullscreen = ref(false)
+
 const { w, h } = toRefs(props.chartConfig.attr)
 const { borderRadius } = toRefs(props.chartConfig.option)
 
@@ -80,18 +83,22 @@ const handleFullScreen = () => {
   useFullScreen(domName, htmlName)
 }
 
-const handleMouseenter = () => (isShowSvg.value = true)
+const handleMouseenter = () => {
+  isShowSvg.value = true
+  allowfullscreen.value = true
+}
+
 const handleMouseleave = () => (isShowSvg.value = false)
 </script>
-
 <style lang="scss" scoped>
 .iframe-content {
-  position: relative;
-  .fullscreen-button {
+  #fullscreenButton {
+    color: white;
     cursor: pointer;
     position: absolute;
-    right: 0;
-    top: 0;
+    z-index: 999999;
+    top: 3%;
+    right: 0.1vw;
   }
 }
 </style>