npmapps 1.0.21 → 1.0.23

package/app/wujie-vue3-child/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "wujie-vue3-child",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.13",
+    "echarts": "^6.0.0",
+    "element-plus": "^2.9.1",
+    "lodash": "^4.17.21",
+    "pinia": "^2.3.0",
+    "pinia-plugin-persistedstate": "^4.2.0",
+    "sass": "^1.83.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vuedraggable": "^4.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.2.0",
+    "vite": "^6.0.5"
+  }
+}

package/app/wujie-vue3-child/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/app/wujie-vue3-child/src/App.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import TagsView from './components/tags-view.vue'
+const router = useRouter()
+const route = useRoute()
+
+// 从路由配置生成菜单项
+const menuItems = computed(() => 
+  router.options.routes.map((route, index) => ({
+    index: String(index + 1),
+    path: route.path,
+    label: route.meta?.title || route.name,
+    children: route.children?.map((child, childIndex) => ({
+      index: `${index + 1}-${childIndex + 1}`,
+      path: child.path,
+      label: child.meta?.title || child.name
+    }))
+  }))
+)
+
+// 根据当前路由路径获取激活的菜单项
+const activeIndex = computed(() => {
+  const currentPath = route.path
+  for (const item of menuItems.value) {
+    if (item.path === currentPath) return item.index
+    const child = item.children?.find(child => child.path === currentPath)
+    if (child) return child.index
+  }
+  return '1'
+})
+
+const handleSelect = (key) => {
+  // 先查找主菜单项
+  const mainItem = menuItems.value.find(item => item.index === key)
+  if (mainItem && !mainItem.children) {
+    router.push(mainItem.path)
+    return
+  }
+
+  // 查找子菜单项
+  for (const item of menuItems.value) {
+    const childItem = item.children?.find(child => child.index === key)
+    if (childItem) {
+      router.push(childItem.path)
+      return
+    }
+  }
+}
+
+window.$wujie?.bus.$on('router-jump', (data) => {
+    console.log(data);
+    if(data.app === 'vue3-child'){
+      router.push({
+        path: data.path,
+        query: data.query
+      })
+    }
+  })
+  window.$wujie?.bus.$emit('loaded', 'vue3-child')
+  console.log('app.vue');
+  
+
+</script>
+
+<template>
+  <div class="app-container">
+    <el-menu
+      :default-active="activeIndex"
+      class="el-menu-demo"
+      mode="horizontal"
+      @select="handleSelect"
+    >
+      <template v-for="item in menuItems" :key="item.index">
+        <!-- 有子菜单的情况 -->
+        <el-sub-menu v-if="item.children?.length" :index="item.index">
+          <template #title>{{ item.label }}</template>
+          <el-menu-item 
+            v-for="child in item.children" 
+            :key="child.index" 
+            :index="child.index"
+          >
+            {{ child.label }}
+          </el-menu-item>
+        </el-sub-menu>
+        <!-- 没有子菜单的情况 -->
+        <el-menu-item v-else :index="item.index">
+          {{ item.label }}
+        </el-menu-item>
+      </template>
+    </el-menu>
+    
+    <tags-view></tags-view>
+
+    <div class="content-container">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  min-height: 100vh;
+}
+
+.el-menu-demo {
+  padding-left: 20px;
+  height: 40px;  /* 减小菜单高度 */
+  line-height: 40px;  /* 确保文字垂直居中 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);  /* 添加阴影效果 */
+}
+
+:deep(.el-menu-item) {
+  height: 40px;  /* 减小菜单项高度 */
+  line-height: 40px;  /* 确保文字垂直居中 */
+  padding: 0 20px;  /* 调整内边距 */
+  font-size: 14px;  /* 调整字体大小 */
+}
+
+.content-container {
+  padding: 20px;  /* 给内容区域添加内边距 */
+}
+
+/* 自定义菜单项悬停和激活状态的样式 */
+:deep(.el-menu-item:hover),
+:deep(.el-menu-item.is-active) {
+  background-color: #f5f7fa;  /* 更柔和的背景色 */
+  color: #409eff;  /* Element Plus 的主题蓝色 */
+}
+</style>

package/app/wujie-vue3-child/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/app/wujie-vue3-child/src/components/HelloWorld.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

package/app/wujie-vue3-child/src/components/tags-view.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="tags-container">
+    <draggable
+      :list="tagsViewList.list"
+      ghost-class="ghost"
+      chosen-class="chosenClass"
+      animation="300"
+      @start="onStart"
+      @end="onEnd"
+    >
+      <template #item="{ element }">
+        <div
+          :key="element.path"
+          class="tag"
+          @contextmenu.prevent="openContextMenu($event, element)" 
+          @drag="dragging($event,element)"
+        >
+          {{ element.meta.title }}
+          <span class="close-btn" @click="closeTag(element)">✖</span>
+        </div>
+      </template>
+    </draggable>
+    <div
+      v-if="contextMenuVisible"
+      class="context-menu"
+      :style="{ top: contextMenuPosition.y + 'px', left: contextMenuPosition.x + 'px' }"
+    >
+      <ul>
+        <li @click="closeTag(contextMenuItem)">关闭标签</li>
+        <li @click="closeOtherTag(contextMenuItem)">关闭其他标签</li>
+        <li @click="closeAllTag()">关闭所有标签</li>
+      </ul>
+    </div>
+    <div class="dragging-info" v-if="isDragging" :style="{top: clientY + 'px', left: clientX + 'px'}" >
+        <p>screenX: {{ clientX }}</p>
+        <p>screenY: {{ clientY }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useTagsViewStore } from "../store/tagsViewStroe";
+import { useRouter } from "vue-router";
+import { ref, watch, reactive ,onMounted} from "vue";
+import draggable from "vuedraggable";
+import { throttle } from 'lodash';
+const tagsViewStore = useTagsViewStore();
+const router = useRouter();
+
+const isDragging = ref(false);
+
+const tagsViewList = reactive({
+  list: tagsViewStore.tagsViewList,
+});
+
+watch(tagsViewList, (newVal) => {
+  console.log(newVal);
+});
+
+// 监听路由变化
+router.afterEach((to, from) => {
+  tagsViewStore.addTagsView(to);
+});
+
+const closeTag = (tag) => {
+  tagsViewStore.removeTagsView(tag);
+};
+
+const closeOtherTag = (tag) => {
+  tagsViewStore.removeOtherTagsView(tag);
+};
+
+const closeAllTag = () => {
+  tagsViewStore.clearTagsView();
+};
+
+const contextMenuVisible = ref(false);
+const contextMenuPosition = ref({ x: 0, y: 0 });
+const contextMenuItem = ref(null);
+
+const openContextMenu = (event, item) => {
+  contextMenuPosition.value = { x: event.clientX, y: event.clientY };
+  contextMenuItem.value = item;
+  contextMenuVisible.value = true;
+};
+
+// 添加点击页面其他位置隐藏菜单的逻辑
+window.addEventListener("click", () => {
+  contextMenuVisible.value = false;
+});
+
+const onStart = () => {
+  console.log("onStart");
+};
+
+onMounted(() => {
+    // window.addEventListener("mousemove", dragging);
+})
+
+const clientX = ref(0);
+const clientY = ref(0);
+
+const dragging = throttle((e) => {
+
+    // 鼠标往下移动100px再显示
+    if(e.clientY > 120){
+        isDragging.value = true;
+        console.log("dragging", e);
+        clientX.value = e.clientX;
+        clientY.value = e.clientY;
+    }
+
+       
+}, 1); // 更新频率设置为每100毫秒触发一次
+
+const onEnd = () => {
+  console.log("onEnd");
+  isDragging.value = false;
+};
+
+</script>
+
+<style scoped lang="scss">
+.dragging-info{
+    position: absolute;
+    z-index: 1000;
+    background-color: #fff;
+    padding: 10px;
+    border: 1px solid #000;
+}
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
+  background-color: #f5f5f5;
+}
+
+.tag {
+  margin: 5px;
+  padding: 5px 10px;
+  background-color: #e0e0e0;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  user-select: none;
+  display: inline-block;
+}
+
+.tag:hover {
+  background-color: #d0d0d0;
+  .close-btn {
+    display: inline-block;
+  }
+}
+
+.close-btn {
+  margin-left: 5px;
+  cursor: pointer;
+  display: none;
+}
+
+.context-menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  z-index: 1000;
+}
+
+.context-menu ul {
+  list-style: none;
+  padding: 10px;
+  margin: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.context-menu li {
+  padding: 8px 12px;
+  cursor: pointer;
+  &:hover {
+    background-color: #f0f0f0;
+  }
+}
+
+.ghost {
+  opacity: 0;
+}
+
+.chosenClass {
+  background-color: #3FB37F !important;
+  border: 1px solid #3FB37F !important;
+}
+</style>

package/app/wujie-vue3-child/src/components/tags-view1.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="tags-container">
+        <span v-for="item in tagsViewStore.getTagsViewList()" :key="item.path" draggable="true" 
+        @dragstart="onDragStart($event,item)" 
+        @dragend="onDragEnd($event,item)" 
+ 
+        @drag="onDrop($event,item)"
+        class="tag" @contextmenu.prevent="openContextMenu($event, item)">
+            {{ item.meta.title }}
+            <span class="close-btn" @click="closeTag(item)">✖</span>
+        </span>
+        <div v-if="contextMenuVisible" class="context-menu" :style="{top: contextMenuPosition.y + 'px', left: contextMenuPosition.x + 'px'}">
+            <ul>
+                <li @click="closeTag(contextMenuItem)">关闭标签</li>
+                <li @click="closeOtherTag(contextMenuItem)">关闭其他标签</li>
+                <li @click="closeAllTag()">关闭所有标签</li>
+            </ul>
+        </div>
+    </div>
+    
+</template>
+
+<script setup>
+import { useTagsViewStore } from '../store/tagsViewStroe'
+import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+
+const tagsViewStore = useTagsViewStore()
+const router = useRouter()
+
+// 监听路由变化
+router.afterEach((to, from) => {
+    tagsViewStore.addTagsView(to)
+})
+
+const closeTag = (tag) => {
+    tagsViewStore.removeTagsView(tag)
+}
+
+const closeOtherTag = (tag) => {
+    tagsViewStore.removeOtherTagsView(tag)
+}
+
+const closeAllTag = () => {
+    tagsViewStore.clearTagsView()
+}
+
+const contextMenuVisible = ref(false)
+const contextMenuPosition = ref({ x: 0, y: 0 })
+const contextMenuItem = ref(null)
+
+const openContextMenu = (event, item) => {
+    contextMenuPosition.value = { x: event.clientX, y: event.clientY }
+    contextMenuItem.value = item
+    contextMenuVisible.value = true
+}
+
+// 添加点击页面其他位置隐藏菜单的逻辑
+window.addEventListener('click', () => {
+    contextMenuVisible.value = false
+})
+
+const onDragStart = (event,item) => {
+    console.log('onDragStart', event,item)
+}
+
+const onDragEnd = (event,item) => {
+        console.log('onDragEnd', event,item)
+}
+
+const onDrop = (event,item) => {
+        console.log('onDrop', event,item)
+}
+
+</script>
+
+<style scoped lang="scss">
+.tags-container {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px;
+    background-color: #f5f5f5;
+}
+
+.tag {
+    margin: 5px;
+    padding: 5px 10px;
+    background-color: #e0e0e0;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    user-select: none;
+}
+
+.tag:hover {
+    background-color: #d0d0d0;
+    .close-btn {
+        display: inline-block;
+    }
+}
+
+.close-btn {
+    margin-left: 5px;
+    cursor: pointer;
+    display: none;
+}
+
+.context-menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: #fff;
+    z-index: 1000;
+}
+
+.context-menu ul {
+    list-style: none;
+    padding: 10px;
+    margin: 0;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.context-menu li {
+    padding: 8px 12px;
+    cursor: pointer;
+    &:hover {
+        background-color: #f0f0f0;
+    }
+}
+
+</style>

package/app/wujie-vue3-child/src/hooks/useClickOutside.js

@@ -0,0 +1,11 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+export function useClickOutside(elRef, handler) {
+  const listener = (e) => {
+    if (!elRef.value || elRef.value.contains(e.target)) return
+    handler(e)
+  }
+
+  onMounted (() => document.addEventListener('click', listener))
+  onBeforeUnmount(() => document.removeEventListener('click', listener))
+}

package/app/wujie-vue3-child/src/hooks/useTableDragSort.js

@@ -0,0 +1,28 @@
+// hooks/useTableDragSort.js
+import Sortable from 'sortablejs'
+import { nextTick, watch, onUnmounted } from 'vue'
+
+export function useTableDragSort(tableRef, list, options = {}) {
+  let sortable = null
+
+  const init = async () => {
+    await nextTick()
+    const tbody = tableRef.value?.$el.querySelector('.el-table__body-wrapper tbody')
+    if (!tbody) return
+    sortable?.destroy()
+    sortable = Sortable.create(tbody, {
+      animation: 150,
+      handle: '.drag-cell',          // 只有手柄能拖
+      onEnd: evt => {
+        const { oldIndex, newIndex } = evt
+        if (oldIndex === undefined || newIndex === undefined) return
+        const [removed] = list.value.splice(oldIndex, 1)
+        list.value.splice(newIndex, 0, removed)
+      },
+      ...options
+    })
+  }
+
+  watch(list, init, { deep: true, immediate: true })
+  onUnmounted(() => sortable?.destroy())
+}

package/app/wujie-vue3-child/src/main.js

@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+import router from './router' // 更新导入路径
+import './style.css'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import { createPinia } from 'pinia'  // 引入 Pinia
+
+const app = createApp(App)
+const pinia = createPinia()  // 创建 Pinia 实例
+
+app.use(ElementPlus)
+app.use(router)
+app.use(pinia)  // 使用 Pinia
+app.mount('#app') 

package/app/wujie-vue3-child/src/router/index.js

@@ -0,0 +1,104 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/home.vue'
+import Test from '../views/test.vue'
+import PhoneCode from '../views/phone-code.vue'
+import ChildToParent from '../views/child-to-parent.vue'
+import ParentToChild from '../views/parent-to-child.vue'
+import RouterJump from '../views/router-jump.vue'
+// 定义路由配置
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home,
+      meta: {
+        title: '首页'
+      }
+    },
+
+
+    // 通讯
+    {
+      path: '/contact',
+      name: 'contact',
+      meta: {
+        title: '通讯'
+      },
+      children: [
+        // 子通知父
+        {
+          path: '/contact/child-to-parent',
+          name: 'child-to-parent',
+          component: ChildToParent,
+          meta: {
+            title: '子通知父'
+          }
+        },
+        // 父通知子
+        {
+          path: '/contact/parent-to-child',
+          name: 'parent-to-child',
+          component: ParentToChild,
+          meta: {
+            title: '父通知子'
+          }
+        }
+      ]
+    },
+
+    // 手机验证码
+    {
+      path: '/phone-code',
+      name: 'phone-code',
+      component: PhoneCode,
+      meta: {
+        title: '手机验证码'
+      }
+    },
+
+
+    // 路由跳转
+    {
+      path: '/router-jump',
+      name: 'router-jump',
+      component: RouterJump,
+      meta: {
+        title: '路由跳转'
+      }
+    },
+    // jsx
+    {
+      path: '/jsx',
+      name: 'jsx',
+      component: () => import('../views/jsx/index.vue'),
+      meta: {
+        title: 'jsx'
+      }
+    },
+  
+
+    // 智能教练
+    {
+      path: '/ai-coach',
+      name: 'ai-coach',
+      component: () => import('../views/aiCoach/index.jsx'),
+      meta: {
+        title: '智能教练'
+      }
+    },
+
+    // 测试
+    {
+      path: '/test',
+      name: 'test',
+      component: Test,
+      meta: {
+        title: '测试'
+      }
+    }
+  ]
+})
+
+export default router