npmapps 1.1.6 → 1.2.0

package/app/wujie-wk/wujie-vue3-main/src/App.vue

@@ -1,879 +0,0 @@
-<script setup>
-// 移除不需要的导入
-import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
-import { ElNotification, ElDialog } from 'element-plus'
-import { useRouter } from 'vue-router'
-import WujieVue from 'wujie-vue3'
-import { useMicroAppStore } from './store/useMicroAppStore'
-
-const {bus} = WujieVue
-const microAppStore = useMicroAppStore()
-
-bus.$on('child-event', (data,from) => {
-  // 先存储消息到 pinia
-  microAppStore.receiveMessage({
-    ...data,
-    from: from || 'child-app' // 添加消息来源标识
-  })
-  
-  // 然后显示通知
-  ElNotification({
-    message: data.message,
-    type: data.type,
-    duration: data.duration,
-    title:'主应用接受：' +  data.title
-  })
-})
-
-const router = useRouter()
-
-
-
-const isMenuOpen = ref(false)
-const position = ref({ 
-  x: window.innerWidth - 56, // 窗口宽度减去按钮宽度(36px)和右边距(20px)
-  y: window.innerHeight - 56 // 窗口高度减去按钮高度(36px)和底部距离(20px)
-})
-const isDragging = ref(false)
-const startPosition = ref({ x: 0, y: 0 })
-// 添加一个变量来追踪是否发生了拖动
-const hasMoved = ref(false)
-
-// 计算菜单位置
-const menuPosition = ref({ direction: 'top', align: 'right' })
-
-const updateMenuPosition = () => {
-  const buttonRect = document.querySelector('.menu-button').getBoundingClientRect()
-  const menuEl = document.querySelector('.menu-content')
-  if (!menuEl) return
-
-  const menuRect = menuEl.getBoundingClientRect()
-  const windowHeight = window.innerHeight
-  const windowWidth = window.innerWidth
-
-  // 计算垂直方向
-  if (buttonRect.top < menuRect.height + 10) {
-    menuPosition.value.direction = 'bottom'
-  } else {
-    menuPosition.value.direction = 'top'
-  }
-
-  // 计算水平方向
-  if (buttonRect.right < menuRect.width) {
-    menuPosition.value.align = 'right'
-  } else if (windowWidth - buttonRect.left < menuRect.width) {
-    menuPosition.value.align = 'left'
-  } else {
-    menuPosition.value.align = 'center'
-  }
-}
-
-// 监听菜单打开状态
-watch(isMenuOpen, (newValue) => {
-  if (newValue) {
-    nextTick(() => {
-      updateMenuPosition()
-    })
-  }
-})
-
-// 监听位置变化
-watch(position, () => {
-  if (isMenuOpen.value) {
-    updateMenuPosition()
-  }
-  checkStickToEdge()
-})
-
-// 监听窗口大小变化
-onMounted(() => {
-  // 获取保存的位置
-  const savedPosition = localStorage.getItem('menuPosition')
-  if (savedPosition) {
-    position.value = JSON.parse(savedPosition)
-  } else {
-    // 如果没有保存的位置，设置默认位置在右下角
-    position.value = {
-      x: window.innerWidth - 56,
-      y: window.innerHeight - 56
-    }
-  }
-  
-  document.addEventListener('click', handleClickOutside)
-  window.addEventListener('resize', () => {
-    if (isMenuOpen.value) {
-      updateMenuPosition()
-    }
-  })
-  document.addEventListener('mousemove', onDialogDrag)
-  document.addEventListener('mouseup', stopDialogDrag)
-})
-
-// 在组件卸载时移除事件监听
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  document.removeEventListener('mousemove', onDialogDrag)
-  document.removeEventListener('mouseup', stopDialogDrag)
-})
-
-const isStickToEdge = ref(false)
-const stickDirection = ref(null) // 'left' or 'right'
-const STICK_THRESHOLD = 10 // 距离边缘多少像素时触发吸附
-
-// 获取滚动条宽度
-const getScrollbarWidth = () => {
-  const outer = document.createElement('div')
-  outer.style.visibility = 'hidden'
-  outer.style.overflow = 'scroll'
-  document.body.appendChild(outer)
-
-  const inner = document.createElement('div')
-  outer.appendChild(inner)
-
-  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
-  outer.parentNode.removeChild(outer)
-
-  return scrollbarWidth
-}
-
-// 检查是否应该吸附到边缘
-const checkStickToEdge = () => {
-  const windowWidth = window.innerWidth
-  const buttonWidth = 36 // 按钮的正常宽度
-  
-  if (position.value.x < STICK_THRESHOLD) {
-    stickDirection.value = 'left'
-    isStickToEdge.value = true
-    isMenuOpen.value = false
-    position.value.x = 0 // 直接设置位置为0，完全贴边
-  } else if (windowWidth - position.value.x - buttonWidth < STICK_THRESHOLD) {
-    stickDirection.value = 'right'
-    isStickToEdge.value = true
-    isMenuOpen.value = false
-    position.value.x = windowWidth - buttonWidth // 直接设置位置到右边缘
-  } else {
-    isStickToEdge.value = false
-  }
-}
-
-// 修改 onDrag 函数
-const onDrag = (e) => {
-  if (isDragging.value) {
-    const buttonWidth = 36 // 按钮的正常宽度
-    const maxX = window.innerWidth - buttonWidth // 修改最大 X 坐标
-    const maxY = window.innerHeight - 40
-    
-    const newX = e.clientX - startPosition.value.x
-    const newY = e.clientY - startPosition.value.y
-    
-    if (newX !== position.value.x || newY !== position.value.y) {
-      hasMoved.value = true
-      isStickToEdge.value = false
-    }
-    
-    position.value = {
-      x: Math.min(Math.max(0, newX), maxX),
-      y: Math.min(Math.max(0, newY), maxY)
-    }
-  }
-}
-
-// 添加全局鼠标事件监听，优化拖拽体验
-const setupGlobalEvents = () => {
-  window.addEventListener('mousemove', onDrag)
-  window.addEventListener('mouseup', stopDrag)
-}
-
-const startDrag = (e) => {
-  if (e.target.closest('.menu-button')) {
-    isDragging.value = true
-    hasMoved.value = false
-    startPosition.value = {
-      x: e.clientX - position.value.x,
-      y: e.clientY - position.value.y
-    }
-    document.body.style.userSelect = 'none'
-    document.body.style.cursor = 'move'
-    setupGlobalEvents()
-  }
-}
-
-const stopDrag = () => {
-  isDragging.value = false
-  document.body.style.userSelect = ''
-  document.body.style.cursor = ''
-  window.removeEventListener('mousemove', onDrag)
-  window.removeEventListener('mouseup', stopDrag)
-  localStorage.setItem('menuPosition', JSON.stringify(position.value))
-  checkStickToEdge() // 停止拖动时检查是否需要吸附
-}
-
-// 添加点击外部关闭菜单的处理
-const handleClickOutside = (e) => {
-  const floatingMenu = document.querySelector('.floating-menu')
-  if (isMenuOpen.value && floatingMenu && !floatingMenu.contains(e.target)) {
-    isMenuOpen.value = false
-    checkStickToEdge()
-  }
-}
-
-// 鼠标移入时展开
-const handleMouseEnter = () => {
-  if (isStickToEdge.value) {
-    isStickToEdge.value = false
-  }
-}
-
-// 鼠标移出时检查是否需要吸附
-const handleMouseLeave = (e) => {
-  // 检查鼠标是否移动到菜单内容区域
-  const menuContent = document.querySelector('.menu-content')
-  if (menuContent && menuContent.contains(e.relatedTarget)) {
-    return
-  }
-  
-  if (isMenuOpen.value) {
-    isMenuOpen.value = false
-  }
-  
-  // 立即检查吸附
-  if (!isDragging.value) {
-    checkStickToEdge()
-  }
-}
-
-// 添加菜单内容区域的标移出处理
-const handleMenuContentLeave = (e) => {
-  // 检查鼠标是否移动到按钮区域
-  const button = document.querySelector('.menu-button')
-  if (button && button.contains(e.relatedTarget)) {
-    return
-  }
-  
-  isMenuOpen.value = false
-  // 重置状态并检查吸附
-  isDragging.value = false
-  hasMoved.value = false
-  checkStickToEdge()
-}
-
-// 修改点击处理函数，阻止事件冒泡
-const handleClick = (e) => {
-  e.stopPropagation() // 阻止事件冒泡
-  if (!hasMoved.value) {
-    isMenuOpen.value = !isMenuOpen.value
-  }
-}
-
-// 添加对 isStickToEdge 的监听
-watch(isStickToEdge, (newValue) => {
-  if (!newValue) {
-    // 当取消吸附时，启动一个短暂延时，然后重新检查吸附
-    setTimeout(() => {
-      if (!isDragging.value && !isMenuOpen.value) {
-        checkStickToEdge()
-      }
-    }, 300) // 300ms 延时，与 CSS 过渡时间匹配
-  }
-})
-
-// 添加新的响应式变量
-const dialogVisible = ref(false)
-const messageText = ref('')
-const selectedTarget = ref('')
-const targets = ref([
-  { label: 'vue3子应用', value: 'vue3-child-message' },
-  { label: 'vue2子应用', value: 'vue2-child-message' },
-  { label: 'react子应用', value: 'react-child-message' }
-])
-
-// 修改 menuItems 数组
-const menuItems = [
-  { name: '主应用首页', path: '/' },
-  { name: 'Vue3Child', path: '/vue3-child' },
-  { name: 'Vue3ChildCopy(保活)', path: '/vue3-child-copy' },
-  { name: 'Vue2Child', path: '/vue2-child' },
-  { name: 'ReactChild', path: '/react-child' },
-  { name: '发送消息', action: 'openMessageDialog' }  // 新增菜单项
-]
-
-// 修改菜单点击处理函数
-const handleMenuItemClick = (path, action) => {
-  if (action === 'openMessageDialog') {
-    dialogVisible.value = true
-    // 设置弹窗初始位置为居中
-    nextTick(() => {
-      const dialog = document.querySelector('.custom-dialog')
-      if (dialog) {
-        const windowWidth = window.innerWidth
-        const windowHeight = window.innerHeight
-        const dialogWidth = dialog.offsetWidth
-        const dialogHeight = dialog.offsetHeight
-        
-        dialogPosition.value = {
-          x: (windowWidth - dialogWidth) / 2,
-          y: (windowHeight - dialogHeight) / 2
-        }
-      }
-    })
-  } else {
-    router.push(path)
-  }
-  isMenuOpen.value = false
-}
-
-// 添加消息类型选项
-const messageTypes = ref([
-  { label: '成功', value: 'success' },
-  { label: '警告', value: 'warning' },
-  { label: '信息', value: 'info' },
-  { label: '错误', value: 'error' }
-])
-
-// 添加选中的消息类型
-const selectedType = ref('success')
-
-// 修改发送消息的函数
-const sendGlobalMessage = () => {
-  if (!messageText.value) return
-  bus.$emit('global-message', {
-    message: messageText.value,
-    type: selectedType.value,  // 使用选中的类型
-    duration: 3000,
-    title: '全局消息'
-  })
-  dialogVisible.value = false
-  messageText.value = ''
-}
-
-const sendTargetMessage = () => {
-  if (!messageText.value || !selectedTarget.value) return
-  bus.$emit(selectedTarget.value, {
-    message: messageText.value,
-    type: selectedType.value,  // 使用选中的类型
-    duration: 3000,
-    title: '定向消息'
-  })
-  dialogVisible.value = false
-  messageText.value = ''
-}
-
-// 添加拖拽相关的变量
-const dialogDragging = ref(false)
-const dialogPosition = ref({ x: 0, y: 0 })
-const dialogStartPosition = ref({ x: 0, y: 0 })
-
-// 添加拖拽相关的方法
-const startDialogDrag = (e) => {
-  if (e.target.classList.contains('dialog-header')) {
-    dialogDragging.value = true
-    const dialog = document.querySelector('.custom-dialog')
-    const rect = dialog.getBoundingClientRect()
-    dialogStartPosition.value = {
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top
-    }
-    document.body.style.userSelect = 'none'
-  }
-}
-
-const onDialogDrag = (e) => {
-  if (dialogDragging.value) {
-    dialogPosition.value = {
-      x: e.clientX - dialogStartPosition.value.x,
-      y: e.clientY - dialogStartPosition.value.y
-    }
-  }
-}
-
-const stopDialogDrag = () => {
-  dialogDragging.value = false
-  document.body.style.userSelect = ''
-}
-bus.$on('router-jump-to-main', (data) => {
-  if(data.app === 'main'){
-    router.push({
-      path: data.path,
-      query: data.query
-    })
-  }else{
-    router.push({
-      path: `/${data.app}${data.path}`
-    })
-    jumpToChild(data)
-  }
-})
-const isAlive = {
-  'vue3-child':false,
-  'vue3-child-copy':true
-}
-
-const jumpToChild = (data) => {
-  router.push(data.app);
-  // 判断子应用是否存在
-  if ( isAlive[data.app] && window.document.querySelector(`iframe[name=${data.app}]`)) {
-    bus.$emit("router-jump", {
-      app: data.app,
-      path: data.path,
-      query: data.query,
-    });
-  } else {
-    console.log("子应用不存在");
-    // 监听子应用加载完成
-    bus.$on("loaded", (app) => handleLoaded(app,data));
-  }
-};
-
-// 定义一个具体的函数
-const handleLoaded = (app,data) => {
-  if (app === data.app) {
-    bus.$emit("router-jump", {
-      app: data.app,
-      path: data.path,
-      query: data.query,
-    });
-    // 使用相同的函数引用来移除监听器
-    bus.$off("loaded", handleLoaded);
-  }
-};
-</script>
-
-<template>
-  <div class="container">
-    <router-view></router-view>
-    <div class="floating-menu" 
-         :style="{ 
-           left: `${position.x}px`,
-           top: `${position.y}px`
-         }"
-         :class="{ 
-           'menu-expanded': isMenuOpen,
-           'stick-to-edge': isStickToEdge,
-           'stick-left': stickDirection === 'left',
-           'stick-right': stickDirection === 'right'
-         }"
-         @mouseenter="handleMouseEnter">
-      <button class="menu-button" 
-              @mousedown="startDrag"
-              @click="handleClick">
-        <div class="menu-icon" @mousedown.stop>
-          <span class="icon-line"></span>
-          <span class="icon-line"></span>
-          <span class="icon-line"></span>
-        </div>
-      </button>
-      <div class="menu-content"
-           :class="[
-             `menu-${menuPosition.direction}`,
-             `menu-align-${menuPosition.align}`
-           ]">
-        <ul>
-          <li v-for="(item, index) in menuItems" 
-              :key="index"
-              :style="{ '--i': index }"
-              @click.stop="handleMenuItemClick(item.path, item.action)">
-            {{ item.name }}
-          </li>
-        </ul>
-      </div>
-    </div>
-
-   
-    <!-- 自定义弹窗 -->
-    <div v-if="dialogVisible" 
-         class="custom-dialog"
-         :style="{
-           left: `${dialogPosition.x}px`,
-           top: `${dialogPosition.y}px`
-         }">
-      <div class="dialog-header" @mousedown="startDialogDrag">
-        <span>发送消息</span>
-        <button class="close-btn" @click="dialogVisible = false">×</button>
-      </div>
-      <div class="dialog-body">
-        <div class="form-item">
-          <label>消息内容</label>
-          <textarea 
-            v-model="messageText"
-            placeholder="请输入消息内容"
-            rows="3"
-          ></textarea>
-        </div>
-        <div class="form-item">
-          <label>消息类型</label>
-          <select v-model="selectedType">
-            <option 
-              v-for="type in messageTypes"
-              :key="type.value"
-              :value="type.value"
-            >
-              {{ type.label }}
-            </option>
-          </select>
-        </div>
-        <div class="form-item">
-          <label>接收方</label>
-          <select v-model="selectedTarget">
-            <option value="">请选择接收方</option>
-            <option 
-              v-for="item in targets"
-              :key="item.value"
-              :value="item.value"
-            >
-              {{ item.label }}
-            </option>
-          </select>
-        </div>
-      </div>
-      <div class="dialog-footer">
-        <button class="btn btn-cancel" @click="dialogVisible = false">取消</button>
-        <button class="btn btn-primary" @click="sendGlobalMessage">全局发送</button>
-        <button class="btn btn-success" @click="sendTargetMessage">定向发送</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.container {
-  min-height: 100vh;
-  position: relative;
-}
-
-.floating-menu {
-  position: fixed;
-  z-index: 1000;
-  cursor: move;
-  user-select: none;
-}
-
-.menu-button {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: linear-gradient(145deg, #4cc592, #42b883);
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 3px 8px rgba(66, 184, 131, 0.2);
-  transition: all 0.2s ease;
-  outline: none;
-  padding: 0;
-  min-width: 36px;
-  position: relative;
-  z-index: 2;
-}
-
-/* 修改吸附状态下的按钮样式 */
-.stick-to-edge .menu-button {
-  width: 10px !important; /* 强制置宽度为10px */
-  min-width: 10px !important; /* 确保最小宽度也是10px */
-  border-radius: 3px;
-  height: 40px;
-  background: #42b883;
-  transform: none; /* 移除任何可能的transform */
-}
-
-/* 隐藏吸附状态下的图标 */
-.stick-to-edge .menu-icon {
-  opacity: 0;
-}
-
-.menu-icon {
-  width: 18px;
-  height: 18px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  transform: translateY(0);
-  pointer-events: none;
-}
-
-.icon-line {
-  width: 100%;
-  height: 2px;
-  background-color: white;
-  border-radius: 1px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  transform-origin: center;
-}
-
-/* 间线的特殊处理 */
-.icon-line:nth-child(2) {
-  transform-origin: center;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* 菜单展开时图标动画 */
-.menu-expanded .icon-line:first-child {
-  transform: translateY(8px) rotate(45deg);
-}
-
-.menu-expanded .icon-line:nth-child(2) {
-  opacity: 0;
-  transform: scaleX(0);
-}
-
-.menu-expanded .icon-line:last-child {
-  transform: translateY(-8px) rotate(-45deg);
-}
-
-.menu-button:hover {
-  transform: scale(1.05);
-  background: linear-gradient(145deg, #42b883, #3aa876);
-  box-shadow: 0 4px 12px rgba(66, 184, 131, 0.3);
-}
-
-.menu-button:active {
-  transform: scale(0.95);
-}
-
-.menu-content {
-  position: absolute;
-  background-color: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  padding: 8px 0;
-  min-width: 120px;
-  opacity: 0;
-  visibility: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* 垂直方向定位 */
-.menu-top {
-  bottom: 45px;
-  transform-origin: bottom;
-  transform: scale(0.95) translateY(-10px);
-}
-
-.menu-bottom {
-  top: 45px;
-  transform-origin: top;
-  transform: scale(0.95) translateY(10px);
-}
-
-/* 水平方向定位 */
-.menu-align-left {
-  right: 0;
-  transform-origin: bottom right;
-}
-
-.menu-align-right {
-  left: 0;
-  transform-origin: bottom left;
-}
-
-.menu-align-center {
-  left: 50%;
-  transform: translateX(-50%) scale(0.95) translateY(-10px);
-  transform-origin: bottom center;
-}
-
-/* 展开状态 */
-.menu-expanded .menu-content {
-  opacity: 1;
-  visibility: visible;
-  transform: scale(1) translateY(0);
-}
-
-.menu-expanded .menu-align-center {
-  transform: translateX(-50%) scale(1) translateY(0);
-}
-
-.menu-content ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.menu-content li {
-  padding: 8px 16px;
-  cursor: pointer;
-  transition: all 0.2s;
-  color: #333;
-  font-size: 14px;
-  opacity: 0;
-  transform: translateX(-10px);
-}
-
-/* 菜单项动画 */
-.menu-expanded .menu-content li {
-  opacity: 1;
-  transform: translateX(0);
-  transition-delay: calc(0.05s * var(--i));
-}
-
-.menu-content li:hover {
-  background-color: rgba(66, 184, 131, 0.1);
-  color: #42b883;
-  padding-left: 20px;
-}
-
-/* 修改吸附样式 */
-.stick-to-edge {
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.stick-to-edge.stick-left {
-  transform: translateX(-3px);
-}
-
-.stick-to-edge.stick-right {
-  transform: translateX(26px);
-}
-
-/* 确保悬停时恢复原样 */
-.stick-to-edge:hover .menu-button {
-  width: 36px !important;
-  min-width: 36px !important;
-  height: 36px;
-  border-radius: 50%;
-  background: linear-gradient(145deg, #4cc592, #42b883);
-}
-
-.stick-to-edge:hover .menu-icon {
-  opacity: 1;
-}
-
-.stick-to-edge:hover {
-  transform: translateX(0);
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
-/* 添加自定义弹窗样式 */
-.custom-dialog {
-  position: fixed;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
-  width: 400px;
-  z-index: 2000;
-}
-
-.dialog-header {
-  padding: 16px 20px;
-  border-bottom: 1px solid #eee;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: move;
-  background: #f8f9fa;
-  border-radius: 8px 8px 0 0;
-}
-
-.dialog-header span {
-  font-size: 16px;
-  font-weight: 500;
-  color: #333;
-}
-
-.close-btn {
-  border: none;
-  background: none;
-  font-size: 20px;
-  color: #999;
-  cursor: pointer;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.close-btn:hover {
-  background: #eee;
-  color: #666;
-}
-
-.dialog-body {
-  padding: 20px;
-}
-
-.form-item {
-  margin-bottom: 16px;
-}
-
-.form-item label {
-  display: block;
-  margin-bottom: 8px;
-  color: #333;
-  font-size: 14px;
-}
-
-.form-item textarea,
-.form-item select {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  font-size: 14px;
-  transition: border-color 0.2s;
-  outline: none;
-  box-sizing: border-box;
-}
-
-.form-item textarea:focus,
-.form-item select:focus {
-  border-color: #409eff;
-}
-
-.dialog-footer {
-  padding: 10px 20px 20px;
-  text-align: right;
-}
-
-.btn {
-  padding: 8px 16px;
-  border-radius: 4px;
-  border: none;
-  font-size: 14px;
-  cursor: pointer;
-  margin-left: 8px;
-  transition: all 0.2s;
-}
-
-.btn-cancel {
-  background: #f4f4f5;
-  color: #606266;
-}
-
-.btn-cancel:hover {
-  background: #e9e9eb;
-}
-
-.btn-primary {
-  background: #409eff;
-  color: white;
-}
-
-.btn-primary:hover {
-  background: #66b1ff;
-}
-
-.btn-success {
-  background: #67c23a;
-  color: white;
-}
-
-.btn-success:hover {
-  background: #85ce61;
-}
-</style>
-
-<script>
-// 添加响应式数据
-export default {
-  data() {
-    return {
-      isMenuOpen: false
-    }
-  }
-}
-</script>