smartai2dian0/src/modules/dify/MessageBody.vue

<template>
  <div class="body-container">
    <!-- <WujieVue
      width="100%"
      height="100%"
      name="sub-app"
      :url="defaultUrl"
      :sandbox="['allow-scripts', 'allow-same-origin', 'allow-forms', 'allow-popups']"
      :debug="true"
      :mode="'iframe'"
      :onError="handleError"
      :onBeforeLoad="beforeLoad"
      :onAfterLoad="afterLoad"
      sync
    ></WujieVue> -->
    <iframe id="dify" :src="defaultURL" width="100%" height="100%" frameborder="0"></iframe>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { tokenExchange } from '../../apis/login';
import { kuky_Authorization } from '../../base/storage';
const props = defineProps({
  id: {
    type: String,
    required: true
  }
});
const DIFY_TOKEN = ref('');
const BASE_URL = 'http://192.168.20.119:28003/app';
const getToken = async () => {
  const res = await tokenExchange();
  if (res.code == 200) {
    DIFY_TOKEN.value = res.data.dify_token;
  }
};
const defaultURL = ref('');

onMounted(async () => {
  await getToken();
  defaultURL.value = BASE_URL + '/' + props.id + `/workflow?token=${DIFY_TOKEN.value}`;
  const element = document.getElementById('dify');
  element.onload = function () {
    if (element && element.contentWindow) {
      console.log('iframe loaded', element.contentWindow);
      element.contentWindow.postMessage(
        JSON.stringify({
          type: 'insertStyle',
          value: `
            .sticky{display:none;}`
        }),
        defaultURL.value
      );
    }
  };
});
</script>
<style scoped lang="css">
.body-container {
  margin-top: 15px;
  height: calc(100% - 55px);
}
</style>