feat(plugin-leave-source): 新增 PC 端内容卡片组件并优化相关功能

- 在 dashboard 页面添加 PCContentStatic 组件
- 在 CustomServiceCorner 组件中集成 PCContentCard 组件
- 更新 QrCode 组件，增加 showText 属性控制二维码标题显示
- 在 ContentCard 组件中使用新属性，提升组件灵活性
- 优化 hooks 中的 updateVisible 方法，支持弹窗可见性变化回调

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

apps/bigmember_pc/src/views/workspace/dashboard.vue

@@ -24,6 +24,7 @@
     </el-main>
     <el-aside width="369px">
       <AccountInfo ref="accountInfoRef" @showGiftDialog="showGiftDialog" />
+      <PCContentStatic />
       <ChatList />
       <MessageTips class="aside-module" />
       <AsideOthers class="aside-module" />
@@ -62,6 +63,7 @@ import { mapGetters } from 'vuex'
 import { chunk } from 'lodash'
 import { Aside, Container, Main } from 'element-ui'
 import { tryCallHooks } from '@jianyu/easy-inject-qiankun'
+import LeaveInfo from '@jy/plugin-leave-source'
 import MessageTips from './components/MessageTips.vue'
 import CommonUse from './components/CommonUse.vue'
 import SubscribeList from './components/SubscribeList.vue'
@@ -99,6 +101,7 @@ export default {
     // GiftSubmitDialog,
     MessageTips,
     CommonUse,
+    PCContentStatic: LeaveInfo.PCContentStatic,
     BusinessProfile,
     // MyCustomer,
     // CustomerWatcher,

apps/bigmember_pc/vite.config.js

@@ -147,7 +147,7 @@ export default defineConfig({
   },
   server: {
     port: 8081,
-    proxy: useServerProxy('web3'),
+    proxy: useServerProxy('web'),
     host: '0.0.0.0'
   }
 })

apps/work-bench/package.json

@@ -24,6 +24,7 @@
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@jy/plugin-leave-source": "workspace:^",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",

apps/work-bench/src/components/CustomServiceCorner.vue

@@ -42,8 +42,9 @@
             <p class="text">微信扫一扫</p>
           </div>
           <div class="self-row">
-            <img src="@/assets/img/icon/qiwei.png" alt="" />
-            <span>客服企微</span>
+            <!-- <img src="@/assets/img/icon/qiwei.png" alt="" />
+            <span>客服企微</span> -->
+            <PCContentCard></PCContentCard>
           </div>
         </el-tooltip>
         <div class="self-row" v-else>
@@ -65,9 +66,11 @@
 /* eslint-disable */
 import { Popover } from 'element-ui'
 import { mapGetters, mapActions } from 'vuex'
+import LeaveInfo from '@jy/plugin-leave-source'
 export default {
   components: {
-    [Popover.name]: Popover
+    [Popover.name]: Popover,
+    PCContentCard: LeaveInfo.PCContentCard
   },
   data() {
     return {

plugins/leave-source/src/lib/mobile/content-popup.vue

@@ -23,6 +23,7 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  onPopupVisibleChange: Function,
   popupTitle: {
     type: String,
     default: '联系专属客服，申请免费体验'

plugins/leave-source/src/lib/pc/components/QrCode.vue

@@ -11,7 +11,7 @@
     <div v-if="type === '2'" class="qr-code-content">
       <div class="qr-code">
         <img src="../../../assets/images/商务合作.png" alt="">
-        <div class="qr-code-title qr-code-title-small">
+        <div v-if="showText" class="qr-code-title qr-code-title-small">
           <span>添加企业微信</span>
         </div>
       </div>
@@ -26,6 +26,12 @@ export default {
     type: String,
     default() {
       return '1'
+    },
+    showText: {
+      type: Boolean,
+      default() {
+        return true
+      }
     }
   },
 }

plugins/leave-source/src/lib/pc/components/content-card.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="content-card">
     <span class="j-icon icon-pc-close" @click="closeIconClick" />
-    <ContractCard v-if="config.props.type === '1'" @contactMeEvent="contactMeEvent" />
-    <ContractCardQrcode v-else class="qrcode-module" />
-    <LeaveCommon :class="{ 'samll-footer': config.props.type === '2' }" />
+    <ContractCard v-if="type === '1'" @contactMeEvent="contactMeEvent" />
+    <ContractCardQrcode v-else :show-text="showText" class="qrcode-module" />
+    <LeaveCommon :class="{ 'samll-footer': type === '2' }" />
   </div>
 </template>
 
@@ -14,6 +14,7 @@ import ContractCardQrcode from './contract-card-qrcode.vue'
 import LeaveCommon from './footer'
 
 export default {
+  el: '.pc-content-card',
   name: 'ContentCard',
   components: {
     ContractCard,
@@ -25,10 +26,14 @@ export default {
       type: Object,
       default: () => ({})
     },
-    // type: {
-    //   type: String,
-    //   default: '2'
-    // },
+    type: {
+      type: String,
+      default: '2'
+    },
+    showText: {
+      type: Boolean,
+      default: true
+    },
     // source: {
     //   type: String,
     //   default: ''
@@ -42,12 +47,6 @@ export default {
     //   default: '联系专属客服，申请免费体验'
     // }
   },
-
-  data() {
-    return {
-      confirmPhoneDialog: {}
-    }
-  },
   methods: {
     contactMeEvent(phone) {
       this.$emit('contactMeEvent', phone)

plugins/leave-source/src/lib/pc/content-dialog.vue

@@ -18,6 +18,11 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  onPopupVisibleChange: Function,
+  showText: {
+    type: Boolean,
+    default: true,
+  },
   popupTitle: {
     type: String,
     default: '联系专属客服，申请免费体验'
@@ -87,7 +92,8 @@ export default {
     @update:visible="updateVisible"
   >
     <ContentCard
-      :config="config"
+      :type="config.props.type"
+      :show-text="config.props.showText"
       @contactMeEvent="contactMeEvent"
       @close="updateVisible(false)"
     />

plugins/leave-source/src/utils/hooks.js

@@ -48,6 +48,9 @@ export function usePreLeaveInfo(options = {}) {
   const staticInfo = computed(() => props.staticInfo)
   function updateVisible(e) {
     visible.value = e
+    if (props.onPopupVisibleChange && typeof props.onPopupVisibleChange === 'function') {
+      props.onPopupVisibleChange(e)
+    }
     if (e) {
       createClueWhenOpen()
     }

plugins/leave-source/src/utils/leave.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import phoneConfirmDialog from '../lib/pc/components/phoneConfirmDialog.vue'
 import PCLeaveDialog from '../lib/pc/content-dialog.vue'
+import PCContentCard from '../lib/pc/components/content-card.vue'
 import MobileLeavePopup from '../lib/mobile/content-popup.vue'
 import { isDOMElement } from '../utils/utils'
 
@@ -9,6 +10,7 @@ const instanceMap = {
   'app': null,
   'h5': null,
   'pc': null,
+  'pc-leave-content-card': null,
   'phone-confirm': null,
 }
 
@@ -24,6 +26,7 @@ export function createInstance(platform, options = {}) {
     'app': MobileLeavePopup,
     'pc': PCLeaveDialog,
     'h5': MobileLeavePopup,
+    'pc-leave-content-card': PCContentCard,
     'phone-confirm': phoneConfirmDialog,
   }
   const MyComponent = componentMap[platform]

pnpm-lock.yaml

@@ -505,6 +505,9 @@ importers:
       '@babel/plugin-proposal-optional-chaining':
         specifier: ^7.21.0
         version: 7.21.0(@babel/core@7.28.0)
+      '@jy/plugin-leave-source':
+        specifier: workspace:^
+        version: link:../../plugins/leave-source
       '@vue/cli-plugin-babel':
         specifier: ~5.0.0
         version: 5.0.8(@vue/cli-service@5.0.8)(core-js@3.44.0)(vue@2.7.16)