npmapps 1.0.25 → 1.0.26

package/app/wujie-vue3-child/src/views/parent-to-child.vue

@@ -1,225 +0,0 @@
-<template>
-  <div class="parent-to-child">
-    <h2 class="page-title">消息接收中心</h2>
-    
-    <div class="message-container">
-      <div class="message-section">
-        <div class="section-header">
-          <h3>全局广播消息</h3>
-          <el-button type="primary" size="small" @click="clearGlobalMessages">
-            清空消息
-          </el-button>
-        </div>
-        <div class="message-list" v-if="globalMessages.length">
-          <div v-for="(msg, index) in globalMessages" 
-               :key="index" 
-               class="message-item">
-            <div class="message-header">
-              <span class="message-time">{{ msg.time }}</span>
-              <span class="message-type" :class="msg.type">{{ msg.type }}</span>
-            </div>
-            <h4 class="message-title">{{ msg.title }}</h4>
-            <p class="message-content">{{ msg.message }}</p>
-          </div>
-        </div>
-        <div v-else class="empty-message">
-          暂无消息
-        </div>
-      </div>
-
-      <div class="message-section">
-        <div class="section-header">
-          <h3>定向消息</h3>
-          <el-button type="primary" size="small" @click="clearDirectMessages">
-            清空消息
-          </el-button>
-        </div>
-        <div class="message-list" v-if="directMessages.length">
-          <div v-for="(msg, index) in directMessages" 
-               :key="index" 
-               class="message-item">
-            <div class="message-header">
-              <span class="message-time">{{ msg.time }}</span>
-              <span class="message-type" :class="msg.type">{{ msg.type }}</span>
-            </div>
-            <h4 class="message-title">{{ msg.title }}</h4>
-            <p class="message-content">{{ msg.message }}</p>
-          </div>
-        </div>
-        <div v-else class="empty-message">
-          暂无消息
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-
-const globalMessages = ref([])
-const directMessages = ref([])
-
-const formatTime = () => {
-  const now = new Date()
-  return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
-}
-
-const clearGlobalMessages = () => {
-  globalMessages.value = []
-}
-
-const clearDirectMessages = () => {
-  directMessages.value = []
-}
-
-onMounted(() => {
-  // 监听全局广播消息
-  window.$wujie?.bus.$on('global-message', (data) => {
-    globalMessages.value.unshift({
-      ...data,
-      time: formatTime()
-    })
-  })
-
-  // 监听定向消息
-  window.$wujie?.bus.$on('vue3-child-message', (data) => {
-    directMessages.value.unshift({
-      ...data,
-      time: formatTime()
-    })
-  })
-})
-</script>
-
-<style scoped>
-.parent-to-child {
-  padding: 24px;
-  background-color: #f5f7fa;
-  min-height: 100vh;
-}
-
-.page-title {
-  color: #303133;
-  margin-bottom: 24px;
-  font-size: 24px;
-}
-
-.message-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 24px;
-}
-
-.message-section {
-  background: white;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #ebeef5;
-}
-
-.section-header h3 {
-  margin: 0;
-  color: #303133;
-  font-size: 18px;
-}
-
-.message-list {
-  max-height: 500px;
-  overflow-y: auto;
-}
-
-.message-item {
-  padding: 12px;
-  border-bottom: 1px solid #ebeef5;
-  transition: background-color 0.3s;
-}
-
-.message-item:hover {
-  background-color: #f5f7fa;
-}
-
-.message-time {
-  font-size: 12px;
-  color: #909399;
-}
-
-.message-content {
-  margin: 8px 0 0;
-  color: #606266;
-  line-height: 1.5;
-}
-
-.empty-message {
-  text-align: center;
-  color: #909399;
-  padding: 30px 0;
-}
-
-/* 滚动条样式 */
-.message-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.message-list::-webkit-scrollbar-thumb {
-  background: #c0c4cc;
-  border-radius: 3px;
-}
-
-.message-list::-webkit-scrollbar-track {
-  background: #f5f7fa;
-}
-
-.message-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.message-type {
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 12px;
-}
-
-.message-type.info {
-  background-color: #ecf5ff;
-  color: #409eff;
-}
-
-.message-type.success {
-  background-color: #f0f9eb;
-  color: #67c23a;
-}
-
-.message-type.warning {
-  background-color: #fdf6ec;
-  color: #e6a23c;
-}
-
-.message-type.error {
-  background-color: #fef0f0;
-  color: #f56c6c;
-}
-
-.message-title {
-  margin: 8px 0;
-  font-size: 14px;
-  color: #303133;
-}
-
-.message-content {
-  margin: 8px 0 0;
-  color: #606266;
-  line-height: 1.5;
-}
-</style>

package/app/wujie-vue3-child/src/views/phone-code.vue

@@ -1,318 +0,0 @@
-<template>
-  <div>
-    <button class="open-dialog-btn" @click="showDialog = true">获取验证码</button>
-    
-    <el-dialog
-      v-model="showDialog"
-      title="验证码"
-      width="400px"
-      :show-close="true"
-      :close-on-click-modal="false"
-      @opened="handleDialogOpened"
-    >
-      <div class="code-container">
-        <div class="code-title">输入短信验证码</div>
-        <div class="code-tip">短信验证码发送至 182 **** 1234</div>
-        
-        <div class="code-input-box">
-          <el-input
-            v-for="(item, index) in 6"
-            :key="index"
-            v-model="codeArray[index]"
-            maxlength="1"
-            :input-style="{ textAlign: 'center' }"
-            @input="(value) => handleInput(value, index)"
-            @keyup.delete="handleDelete(index)"
-            ref="inputRefs"
-          />
-        </div>
-        
-        <div class="resend" @click="resendCode">
-          {{ counting ? `${counter}s后重新获取` : '重新获取' }}
-        </div>
-        
-        <el-button 
-          type="primary" 
-          :loading="loading"
-          @click="handleSubmit"
-        >
-          确认
-        </el-button>
-      </div>
-    </el-dialog>
-
-    <div v-if="submittedCode" class="submitted-code">
-      您输入的验证码是: {{ submittedCode }}
-    </div>
-
-    <el-dialog
-      v-model="dialogVisible"
-      title="提示"
-      width="30%"
-      :before-close="handleClose"
-      @opened="handleDialogOpened"
-    >
-      <span>{{ dialogMessage }}</span>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button ref="cancelBtn" @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" ref="confirmBtn" @click="confirmDialog">
-            确定
-          </el-button>
-        </span>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-import { ref, onUnmounted, nextTick } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const showDialog = ref(false)
-const codeArray = ref(['', '', '', '', '', ''])
-const inputRefs = ref([])
-const counter = ref(60)
-const counting = ref(false)
-let timer = null
-
-const handleInput = (value, index) => {
-  // 确保输入为数字
-  if (!/^\d*$/.test(value)) {
-    codeArray.value[index] = ''
-    return
-  }
-  
-  // 更新值
-  codeArray.value[index] = value.slice(0, 1)
-  
-  // 自动跳转到下一个输入框
-  if (value && index < 5) {
-    inputRefs.value[index + 1]?.focus()
-  }
-}
-
-const handleDelete = (index) => {
-  if (codeArray.value[index] === '' && index > 0) {
-    inputRefs.value[index - 1]?.focus()
-  }
-}
-
-// 重新发送验证码
-const resendCode = () => {
-  if (counting.value) return
-  counting.value = true
-  counter.value = 60
-  timer = setInterval(() => {
-    if (counter.value > 0) {
-      counter.value--
-    } else {
-      counting.value = false
-      clearInterval(timer)
-    }
-  }, 1000)
-}
-
-// 替换原来的 alert 为 ElMessage
-const showMessage = (message, type = 'warning') => {
-  ElMessage({
-    message,
-    type,
-  })
-}
-
-// 弹窗相关状态
-const dialogVisible = ref(false)
-const dialogMessage = ref('')
-const submittedCode = ref('') // 用于存储提交的验证码
-const confirmBtn = ref(null)
-
-const handleClose = () => {
-  dialogVisible.value = false
-}
-
-// 处理弹窗打开时自动聚焦确认按钮
-const handleDialogOpened = () => {
-  nextTick(() => {
-    if (inputRefs.value && inputRefs.value[0]) {
-      inputRefs.value[0].focus()
-    }
-  })
-}
-
-const confirmDialog = () => {
-  dialogVisible.value = false
-  // 保存验证码到显示区域
-  submittedCode.value = codeArray.value.join('')
-}
-
-// 确认提交
-const handleSubmit = async () => {
-  if (codeArray.value.some(code => !code)) {
-    ElMessage.warning('验证码不能为空')
-    return
-  }
-  try {
-    // 这里是你的验证逻辑
-    // await verifyCode()
-    
-    // 保存并显示验证码
-    submittedCode.value = codeArray.value.join('')
-    // 关闭弹窗
-    showDialog.value = false
-    ElMessage.success('验证成功')
-  } catch (error) {
-    ElMessage.error('验证失败')
-  } finally {
-  }
-}
-
-// 组件销毁时清除定时器
-onUnmounted(() => {
-  if (timer) {
-    clearInterval(timer)
-  }
-})
-</script>
-
-<style scoped>
-.phone-code-dialog {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-}
-
-.dialog-mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.dialog-content {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 90%;
-  max-width: 320px;
-  background: #fff;
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.close-icon {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  font-size: 24px;
-  color: #999;
-  cursor: pointer;
-  z-index: 1;
-}
-
-.code-container {
-  width: 100%;
-  padding: 20px;
-  box-sizing: border-box;
-}
-
-.code-title {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 8px;
-}
-
-.code-tip {
-  color: #666;
-  font-size: 14px;
-  margin-bottom: 20px;
-}
-
-.code-input-box {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-  gap: 8px;
-}
-
-.code-input-box input {
-  width: 40px;
-  height: 40px;
-  border: 1.5px solid #ddd;
-  border-radius: 8px;
-  text-align: center;
-  font-size: 18px;
-  transition: all 0.3s;
-  background-color: #f8f9fa;
-}
-
-.code-input-box input:focus {
-  border-color: #ff4d4f;
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
-  background-color: #fff;
-}
-
-/* 修改input类型为tel，但仍然保留number的样式控制 */
-.code-input-box input[type="tel"] {
-  -moz-appearance: textfield;
-}
-
-.code-input-box input::-webkit-outer-spin-button,
-.code-input-box input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.resend {
-  text-align: right;
-  color: #1890ff;
-  font-size: 14px;
-  cursor: pointer;
-  margin-bottom: 20px;
-}
-
-.confirm-btn {
-  width: 100%;
-  height: 44px;
-  background: #ff4d4f;
-  color: #fff;
-  border: none;
-  border-radius: 22px;
-  font-size: 16px;
-  cursor: pointer;
-}
-
-.confirm-btn:active {
-  opacity: 0.8;
-}
-
-.open-dialog-btn {
-  padding: 8px 20px;
-  background: #ff4d4f;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.open-dialog-btn:active {
-  opacity: 0.8;
-}
-
-.submitted-code {
-  margin-top: 20px;
-  padding: 10px;
-  background-color: #f0f9eb;
-  border-radius: 4px;
-  color: #67c23a;
-  font-size: 14px;
-}
-</style>

package/app/wujie-vue3-child/src/views/router-jump.vue

@@ -1,123 +0,0 @@
-<template>
-    <div class="flex-container">
-        <div class="container">
-            <h1>子应用路由跳转</h1>
-            <el-input v-model="url" placeholder="请输入地址"></el-input>
-            <el-input v-model="name" placeholder="请输入姓名"></el-input>
-            <el-input v-model="age" placeholder="请输入年龄" type="number"></el-input>
-            <el-select v-model="selectedApp" placeholder="请选择应用">
-                <el-option label="main" value="main"></el-option>
-                <el-option label="vue3-child-copy" value="vue3-child-copy"></el-option>
-                <el-option label="vue2-child" value="vue2-child"></el-option>
-            </el-select>
-            <el-button type="primary" @click="jumpToMain">跳转到主应用</el-button>
-        </div>
-        <div class="route-params">
-            <h1>接收到的路由参数：</h1>
-            <p>路径: {{ $route.path }}</p>
-            <p v-for="(item,key) in $route.query" :key="item">{{ key }}:{{ item }}</p>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { ElInput, ElButton, ElSelect, ElOption } from 'element-plus'
-const url = ref('/router-jump')
-const name = ref('name')
-const age = ref('age')
-const selectedApp = ref('main')
-const jumpToMain = () => {
-   window.$wujie?.bus.$emit('router-jump-to-main', {
-    app: selectedApp.value,
-    path: url.value,
-    query: {
-      name: name.value,
-      age: age.value
-    }
-  })
-}
-
-
-    
-</script>
-
-<style scoped>
-.container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 20px;
-    padding: 20px;
-    background-color: #f8f8f8;
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-    width: 45%;
-    margin: 0;
-    transition: box-shadow 0.3s ease-in-out;
-}
-
-h1 {
-    color: #333;
-    margin-bottom: 20px;
-    font-family: 'Helvetica Neue', Arial, sans-serif;
-}
-
-el-input, el-select {
-    width: 100%;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 10px;
-    transition: border-color 0.3s ease-in-out;
-}
-
-el-input:focus, el-select:focus {
-    border-color: #007BFF;
-}
-
-el-button {
-    width: 100%;
-    height: 40px;
-    background-color: #007BFF;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    transition: background-color 0.3s ease-in-out;
-}
-
-el-button:hover {
-    background-color: #0056b3;
-}
-
-.route-params {
-    padding: 20px;
-    background-color: #eef2f7;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    width: 45%;
-    margin: 0;
-}
-
-.route-params h1 {
-    color: #007BFF;
-    font-size: 24px;
-}
-
-.route-params p {
-    font-size: 16px;
-    color: #333;
-    margin-bottom: 10px;
-    background-color: #fff;
-    padding: 10px;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-}
-
-.flex-container {
-    display: flex;
-    justify-content: space-around;
-    align-items: flex-start;
-    padding: 20px;
-    gap: 20px;
-}
-</style>