npmapps 1.1.4 → 1.1.6

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

@@ -0,0 +1,225 @@
+<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-wk/wujie-vue3-child/src/views/phone-code.vue

@@ -0,0 +1,318 @@
+<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-wk/wujie-vue3-child/src/views/router-jump.vue

@@ -0,0 +1,123 @@
+<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>