smartai2dian0/src/views/Xiaoshu.vue

<template>
  <!-- <LayoutExperience> -->
  <ContentContainer :containerStyle="containerStyle">
    <template v-if="!is_mounted"></template>

    <WujieVue
      v-if="is_mounted"
      width="100%"
      height="100%"
      name="xiaoshu"
      :url="xiaoshu_server_url"
      :sync="false"
      :props="props"
      :plugins="plugins"
    ></WujieVue>
  </ContentContainer>
  <!-- </LayoutExperience> -->
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import WujieVue from 'wujie-vue3';
import LayoutExperience from './layout/LayoutExperience.vue';
import ContentContainer from './layout/ContentContainer.vue';

import { useCurrentUserStore } from '../base/store/use-current-user';

import { getConfigField } from '../config/index';

const router = useRouter();

const { bus } = WujieVue;

const props = defineProps({});

const is_mounted = ref(false);

const plugins = ref([]);

const xiaoshu_server_url = getConfigField('XIAOSHU_URL');
const xiaoshu_websocket_url = getConfigField('WEBSOCKET_BASE_URL');
const xiaoshu_assets_url = getConfigField('ASSETS_BASE_URL');

const containerStyle = {
  padding: 0
};

onMounted(() => {
  const currentUser = useCurrentUserStore();

  const token = currentUser.token;
  const user_name = currentUser.username;

  const info_val = { userName: user_name, token: token };
  const info_str = JSON.stringify(info_val);

  /**
   * 插入到小数项目中的脚本
   */
  const insert_script_before_str = `
    window.WEBSOCKET_BASE_URL = '${xiaoshu_websocket_url}';
    window.ASSETS_BASE_URL = '${xiaoshu_assets_url}';

    localStorage.setItem('xintongxiaoshu', '${info_str}');
  `;

  const insert_script_after_str = `
    const box = document.querySelector('.xiaoshu-aside-left-menus-container');

    if(box){
      const btn = document.createElement('div');
      box.appendChild(btn);

      btn.innerHTML = '<span class="xiaoshu-aside-left-back-btn">返回</span>';

      btn.addEventListener('click', () => {
        window.$wujie?.bus.$emit("xiaoshuAsideBack");
      });
    }
  `;

  const insert_style_str = `
    .xiaoshu-aside-left-back-btn{
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #165dff;
      color: #fff;
      display: inline-block;
      cursor: pointer;
    }

    .xiaoshu-aside-left-menus-pop-container {}
    .xiaoshu-aside-left-menus-actions-container{
      display: none;
    }
    .user-popover.xiaoshu-aside-left-menus-pop-container>div.item{
      display: none;
    }
    .user-popover.xiaoshu-aside-left-menus-pop-container>header{
      padding-bottom: 0;
      border-bottom: none;
    }
  `;

  /**
   * 监听子系统的事件
   */
  bus.$on('xiaoshuAsideBack', function () {
    router.back();
  });

  plugins.value = [
    {
      /**
       * 在子应用所有的js之前
       * @see https://wujie-micro.github.io/doc/guide/plugin.html#js-before-loaders
       */
      jsBeforeLoaders: [{ content: insert_script_before_str }]
    },

    {
      /**
       * 在子应用所有的js之后
       * @see https://wujie-micro.github.io/doc/guide/plugin.html#js-after-loader
       */
      jsAfterLoaders: [{ content: insert_script_after_str }]
    },
    {
      cssAfterLoaders: [
        //在加载html所有样式之后添加一个内联样式
        { content: insert_style_str }
      ]
    }
  ];

  is_mounted.value = true;
});
</script>