qiankun

litian

2024-05-11 bdc230636170b264c3ece04a1b222cfbf7b9968a

qiankun

 src/main.ts

@@ -37,17 +37,6 @@
  }
})

const app = createApp(App)
app.provide('toolClass', toolClass)
app.provide('request', request)
app.use(router)
app.use(ElementPlus)
app.use(pinia)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.mount('#parentApp')

// qiankun主应用与微应用通讯
import { initGlobalState, type MicroAppStateActions } from 'qiankun'
@@ -71,3 +60,17 @@

// 移除当前应用的状态监听，微应用 umount 时会默认调用
// actions.offGlobalStateChange()

const app = createApp(App)
app.provide('qiankunActions', actions)
app.provide('toolClass', toolClass)
app.provide('request', request)
app.use(router)
app.use(ElementPlus)
app.use(pinia)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.mount('#parentApp')


 src/views/components/dictionary.vue

@@ -1,5 +1,5 @@
<template>
  <div>
  <div class="page">
    <div class="searchBox">
      <el-input class="custom-input" placeholder="请输入内容" v-model="searchContent">
        <template #suffix>
@@ -10,8 +10,47 @@
    <div class="resultBox">
      <div v-for="result in searchResult" :key="result.id">
        <div class="phone_con">
        <div class="per-phone">英/<span>{{result.ukPhone}}</span>/</div>
        <div class="per-phone">美/<span>{{result.usPhone}}</span>/</div>
          <div class="per-phone">英 /<span>{{result.ukPhone}}</span>/</div>
          <div class="per-phone">美 /<span>{{result.usPhone}}</span>/</div>
        </div>
        <div class="trans">
          <div v-for="item in result.trans" :key="item">
            <div class="itemList">
              <div class="pos">{{item.pos}}.</div>
              <div class="tranCn">{{item.tranCn}}</div>
            </div>
          </div>
        </div>
        <div class="trans">
          <div class="title">词组短语</div>
          <div v-for="(item,index) in result.phrase" :key="item">
            <div class="itemList">
              <div class="index">{{index + 1}}</div>
              <div class="pos">{{item.pContent}}</div>
              <div class="tranCn">{{item.pCn}}</div>
            </div>
          </div>
        </div>
        <div class="trans">
          <div class="title">近义词</div>
          <div v-for="item in result.syno" :key="item">
            <div class="itemList">
              <div class="pos">{{item.pos}}</div>
              <div class="tranCn">{{item.tran}}</div>
            </div>
            <div class="hwds">
              <div v-for="hw in item.hwds" :key="hw" class="">{{hw.w}}</div>
            </div>
          </div>
        </div>
        <div class="trans">
          <div class="title">例句</div>
          <div v-for="(item,index) in result.sentence" :key="item">
            <div class="itemList1">
              <div class="pos"><span class="index">{{index +1}}</span>{{item.sContent}}</div>
              <div class="tranCn">{{item.sCn}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
@@ -45,6 +84,13 @@
      console.log(JSON.parse(res[0].sentence)[0].sCn)
      // encodeURIComponent(res[0].syno[0].tran)
      if (res.length > 0) {
        res.map((item) => {
          item.phrase = JSON.parse(item.phrase)
          item.relWord = JSON.parse(item.relWord)
          item.sentence = JSON.parse(item.sentence)
          item.syno = JSON.parse(item.syno)
          item.trans = JSON.parse(item.trans)
        })
        searchResult.value = res
      }
    })
@@ -53,6 +99,10 @@
</script>

<style lang="less">
.page{
  height:100%;
  overflow-y:auto
}
.searchBox {
  width: 400px;
  margin: 0 auto;
@@ -74,6 +124,7 @@
  }
}
.resultBox{
  padding:20px;
  .phone_con{
    .per-phone{
      width:150px;
@@ -88,6 +139,42 @@
      margin-top: 10px;
      // max-width: 100%;
      padding: 8px 10px;
      span{
        margin:0 10px;
      }
    }
  }
  .trans{
    padding:20px 0;
    border-bottom:1px solid #eeeff0;
    .title{
      padding:10px 0;
    }
    .itemList{
      display:flex;
      padding: 10px 0;
      .index{
        margin-right:15px;
      }
      .pos{
        margin-right:30px;
      }
    }
    .hwds{
      display:flex;
      div{
        padding:0 10px;
      }
    }
    .itemList1{
      padding:10px 0;
      .index{
        margin-right:15px;
      }
      .tranCn{
        margin-left:20px;
        margin-top:5px;
      }
    }
  }
}

 src/views/home.vue

@@ -139,7 +139,7 @@
              ></div>
            </div>
          </div>
          <div class="list-box" v-loading="scribeData.loading">
          <div class="list-box">
            <div v-if="scribeData.noteList.length > 0 && !scribeData.loading">
              <div v-for="(item, index) in scribeData.noteList" :key="item.key" class="listItem">
                <div class="textBox">
@@ -687,6 +687,7 @@
import useClipboard from 'vue-clipboard3'
const { toClipboard } = useClipboard()
const request = inject('request')
const qiankunActions = inject('qiankunActions')
//获取路由器
let router = useRouter()
//获取当前路由的信息
@@ -788,6 +789,8 @@
  window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
)
onMounted(() => {
  console.log(1111);
  
  // canvasWith.value = window.innerWidth - 540
  // canvasheight.value = window.innerHeight - 110
  getNotesList() // 获取高亮
@@ -810,6 +813,14 @@
        window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    })()
  }

  console.log(qiankunActions,"qiankunActions");
  
  qiankunActions.setGlobalState({
    cc: (data) => {
      console.log(data);
    }
  })
})

watch(
@@ -1754,7 +1765,6 @@
    }
  }).then((res) => {
    if (res && res.length > 0 && res[0].value) {
      scribeData.loading = false
      dialogToolData.notesList = JSON.parse(res[0].value)
      let list = JSON.parse(res[0].value)
      let textDom1 = document.getElementById('container')
@@ -1793,7 +1803,7 @@
        })
      }
    }
    
    scribeData.loading = false
  })
}
//划线