refactor(leave-source): 重构留资弹窗插件

- 修改 package.json 中的模块入口路径
- 更新导入路径和资源路径，使用相对路径替代绝对路径
- 重构部分组件和样式文件
- 调整钩子函数和工具函数的导入方式

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

plugins/leave-source/package.json

@@ -4,7 +4,7 @@
   "private": false,
   "description": "留资弹窗插件",
   "main": "./dist/leave-source-vue.umd.js",
-  "module": "./dist/leave-source-vue.mjs",
+  "module": "./src/entry.js",
   "files": [
     "dist"
   ],

plugins/leave-source/src/api/interceptors.js

@@ -1,5 +1,5 @@
+import { showToast } from '../utils'
 import service from './service'
-import { showToast } from '@/utils'
 
 service.interceptors.request.use(
   (config) => {

plugins/leave-source/src/assets/style/_mixin.scss

@@ -14,7 +14,7 @@
 
 @mixin diy-icon($name, $width: 24, $height: 24) {
   ::v-deep .el-icon-jy-#{$name} {
-    background: url('~@/assets/images/icon/#{$name}.png') no-repeat;
+    background: url('../images/icon/#{$name}.png') no-repeat;
     background-size: cover;
     display: inline-block;
     width: #{$width}px;

plugins/leave-source/src/assets/style/common.scss

@@ -1,5 +1,5 @@
-@import './mixin';
-@import './variables.scss';
+@import './_mixin';
+@import './_variables.scss';
 @import './layout.scss';
 @import './pic-icon.scss';
 
@@ -164,12 +164,12 @@ input[type='number'] {
 
   &.checked {
     border: 0;
-    background: url('~@/assets/images/icon/icon-checked.png') no-repeat center
+    background: url('../images/icon/icon-checked.png') no-repeat center
       center;
     background-size: 16px;
 
     &[disabled] {
-      background: url('~@/assets/images/icon/icon-checked.png') no-repeat;
+      background: url('../images/icon/icon-checked.png') no-repeat;
       background-size: 18px;
     }
   }

plugins/leave-source/src/assets/style/pic-icon.scss

@@ -15,39 +15,39 @@
 
 // 选择器前的 checkbox，需要添加 j-icon 基类
 .icon-fast {
-  background-image: url(@/assets/images/icon-fast.png);
+  background-image: url(../images/icon-fast.png);
   background-size: contain;
 }
 .icon-unique {
-  background-image: url(@/assets/images/icon-unique.png);
+  background-image: url(../images/icon-unique.png);
   background-size: contain;
 }
 .icon-advantage {
-  background-image: url(@/assets/images/icon-advantage.png);
+  background-image: url(../images/icon-advantage.png);
   background-size: contain;
 }
 .icon-customer {
-  background-image: url(@/assets/images/icon-customer.png);
+  background-image: url(../images/icon-customer.png);
   background-size: contain;
 }
 .icon-precise {
-  background-image: url(@/assets/images/icon-precise.png);
+  background-image: url(../images/icon-precise.png);
   background-size: contain;
 }
 .icon-support {
-  background-image: url(@/assets/images/icon-support.png);
+  background-image: url(../images/icon-support.png);
   background-size: contain;
 }
 
 .icon-pc-close {
-  background-image: url(@/assets/images/icon-close.png);
+  background-image: url(../images/icon-close.png);
   background-size: contain;
 }
 .icon-mobile-close {
-  background-image: url(@/assets/images/icon-mobile-close.png);
+  background-image: url(../images/icon-mobile-close.png);
   background-size: contain;
 }
 .icon-mobile-phone {
-  background-image: url(@/assets/images/icon-mobile-phone.png);
+  background-image: url(../images/icon-mobile-phone.png);
   background-size: contain;
 }

plugins/leave-source/src/entry.js

@@ -8,7 +8,7 @@ import MobileLeavePopup from './lib/mobile/content-popup.vue'
 import registryToast from './components/toast/index'
 import PCContentStatic from './lib/pc/content-static.vue'
 import { doLeave, renderComponent } from './utils/leave'
-import sourceMap from './data'
+import { sourceMap } from './data'
 
 function install(Vue) {
   // 注册全局组件

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

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import { showToast } from '@/utils/toast'
+import { showToast } from '../../../utils/toast.js'
 
 export default {
   name: 'QrCode',
@@ -95,7 +95,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/assets/style/_variables.scss";
+@import "../../../assets/style/_variables.scss";
 .qr-code {
   width: 112px;
   height: 112px;

plugins/leave-source/src/lib/mobile/components/confirm-dialog.vue

@@ -1,5 +1,5 @@
 <script setup>
-import AnimatedOverlay from '@/components/dialog/AnimatedOverlay.vue'
+import AnimatedOverlay from '../../../components/dialog/AnimatedOverlay.vue'
 
 defineProps({
   visible: {

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

@@ -44,9 +44,9 @@
 </template>
 
 <script>
+import { mobileCustomPage } from '../../../utils/utils'
 import QrCode from './QrCode.vue'
 import InputPhone from './InputPhone.vue'
-import { mobileCustomPage } from '@/utils/utils'
 
 export default {
   name: 'ContentInfo',

plugins/leave-source/src/lib/mobile/components/footer.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import dataList from '@/components/common/index.js'
+import dataList from '../../../components/common/index.js'
 
 export default {
   name: 'LeaveCommonFooter',
@@ -45,7 +45,7 @@ export default {
 
 <style lang="scss" scoped>
 .leave-common-footer {
-  background: url(@/assets/images/BG.png) no-repeat;
+  background: url(../../../assets/images/BG.png) no-repeat;
   background-size: contain;
   .leave-common-title {
     font-size: 18px;

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

@@ -1,6 +1,11 @@
 <script setup>
 import { computed } from 'vue'
 import AnimatedOverlay from '../../components/dialog/AnimatedOverlay.vue'
+import {
+  useContactMeLogic,
+  usePhoneCheck,
+  usePreLeaveInfo
+} from '../../utils/hooks'
 import PopupLayout from './components/PopupLayout.vue'
 import CenterLayout from './components/CenterLayout.vue'
 import MobileContentCard from './components/content-card.vue'
@@ -8,12 +13,6 @@ import MobileCenterCard from './components/center-card.vue'
 import phoneConfirmDialog from './components/confirm-dialog.vue'
 import ChangePhoneDialog from './components/change-phone-dialog.vue'
 
-import {
-  useContactMeLogic,
-  usePhoneCheck,
-  usePreLeaveInfo
-} from '@/utils/hooks'
-
 const props = defineProps({
   source: {
     type: String,

plugins/leave-source/src/lib/mobile/style/confirm-dialog-layout.scss

@@ -1,4 +1,4 @@
-@import '@/assets/style/_variables.scss';
+@import '../../../assets/style/_variables.scss';
 @import './dialog-layout.scss';
 
 $button_border: rgba(0, 0, 0, 0.1);

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

@@ -5,12 +5,12 @@
         2. 添加企业微信:
       </div>
       <div class="qr-code">
-        <img src="@/assets/images/商务合作.png" alt="">
+        <img src="../../../assets/images/商务合作.png" alt="">
       </div>
     </div>
     <div v-if="type === '2'" class="qr-code-content">
       <div class="qr-code">
-        <img src="@/assets/images/商务合作.png" alt="">
+        <img src="../../../assets/images/商务合作.png" alt="">
         <div class="qr-code-title qr-code-title-small">
           <span>添加企业微信</span>
         </div>

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

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import dataList from '@/components/common/index.js'
+import dataList from '../../../components/common/index.js'
 
 export default {
   name: 'LeaveCommonFooter',
@@ -43,7 +43,7 @@ export default {
   align-items: center;
   width: 100%;
   height: 196px;
-  background: url(@/assets/images/BG.png) no-repeat;
+  background: url(../../../assets/images/BG.png) no-repeat;
   background-size: 100% 100%;
   .leave-common-title {
     text-align: center;

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

@@ -1,11 +1,11 @@
 <script setup>
 import { watch, watchEffect } from 'vue'
 import AnimatedOverlay from '../../components/dialog/AnimatedOverlay.vue'
+import { usePhoneCheck, usePreLeaveInfo } from '../../utils/hooks.js'
 import ContentCard from './components/content-card.vue'
 import PhoneConfirmDialog from './components/PhoneConfirmDialog.vue'
 import PhoneEditDialog from './components/PhoneEditDialog.vue'
 import SubMitSuccess from './components/SubMitSuccess.vue'
-import { usePhoneCheck, usePreLeaveInfo } from '@/utils/hooks'
 
 const props = defineProps({
   source: {

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

@@ -1,6 +1,6 @@
 <script setup>
+import { useStaticCustomInfo } from '../../utils/hooks'
 import StaticCard from './components/static-card'
-import { useStaticCustomInfo } from '@/utils/hooks'
 
 const props = defineProps({
   source: {

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

@@ -1,12 +1,12 @@
 import { computed, nextTick, reactive, ref, watch } from 'vue'
-import { doLeave } from './leave'
 import {
   requestBehaviorClues,
   requestGetStaticInfo,
   requestRetainedCapital,
   requestSubmitLeaveInfo
-} from '@/api/api'
-import { getSourceInfo, showToast } from '@/utils'
+} from '../api/api'
+import { getSourceInfo } from './utils'
+import { showToast } from './toast'
 
 // pc静态弹窗卡片信息获取
 export function useStaticCustomInfo() {

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

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import phoneConfirmDialog from '../lib/pc/components/phoneConfirmDialog.vue'
-import PCLeaveDialog from '@/lib/pc/content-dialog.vue'
-import MobileLeavePopup from '@/lib/mobile/content-popup.vue'
-import { isDOMElement } from '@/utils/utils'
+import PCLeaveDialog from '../lib/pc/content-dialog.vue'
+import MobileLeavePopup from '../lib/mobile/content-popup.vue'
+import { isDOMElement } from '../utils/utils'
 
 const instanceMap = {
   'wx': null,

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

@@ -1 +1 @@
-export * from '@/components/toast'
+export * from '../components/toast'

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

@@ -1,4 +1,4 @@
-import { sourceMap } from '@/data'
+import { sourceMap } from '../data'
 
 export function isDOMElement(obj) {
   return obj && typeof obj === 'object' && obj.nodeType === 1