npmapps 1.0.25 → 1.0.26

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

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

@@ -1,131 +0,0 @@
-<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/directives/aiLoading.js

@@ -1,182 +0,0 @@
-/**
- * v-aiLoading 全局自定义指令
- *
- * 支持两种使用方式：
- * 1) 基础用法（布尔或变量）：
- *    v-aiLoading="loading"
- *    - loading 为 true 时显示遮罩
- *    - loading 为 false 时移除遮罩
- *
- * 2) 对象用法（可配置文案和自定义样式类）：
- *    v-aiLoading="{ loading: loading, text: 'AI生成中...', class: 'custom-class' }"
- *    - loading：必填，布尔值，控制显示/隐藏
- *    - text：选填，提示文案，默认 'AI生成中'
- *    - class：选填，附加到遮罩元素上的 class 名，用于自定义样式
- */
-
-export const createAiLoadingOptions = (binding) => {
-  const value = binding.value
-  if (value && typeof value === 'object') {
-    return {
-      loading: !!value.loading,
-      text: value.text || 'AI生成中',
-      className: value.class || '',
-      loaderType: value.loaderType || 'bars',
-      gradient: value.gradient ?? true,
-      borderColor: value.borderColor || '#409eff'
-    }
-  }
-  return {
-    loading: !!value,
-    text: 'AI生成中',
-    className: '',
-    loaderType: 'bars',
-    gradient: true,
-    borderColor: '#409eff'
-  }
-}
-
-/**
- * 根据配置在元素上挂载 / 更新 / 移除遮罩层
- * @param {HTMLElement} el 指令绑定的 DOM 元素
- * @param {import('vue').DirectiveBinding} binding 指令绑定对象
- */
-export const toggleAiLoading = (el, binding) => {
-  const options = createAiLoadingOptions(binding)
-  let mask = el.__aiLoadingMask__
-
-  // loading 为 false 时移除遮罩
-  if (!options.loading) {
-    if (mask && mask.parentNode) {
-      mask.parentNode.removeChild(mask)
-    }
-    el.__aiLoadingMask__ = null
-    el.classList.remove('ai-loading-parent')
-    return
-  }
-
-  if (!mask) {
-    mask = document.createElement('div')
-    mask.className = 'ai-loading-mask'
-    if (options.className) {
-      mask.classList.add(options.className)
-    }
-
-    const content = document.createElement('div')
-    content.className = 'ai-loading-content'
-
-    const spinner = document.createElement('div')
-    spinner.className = options.loaderType === 'ring' ? 'ai-loading-spinner' : 'ai-loading-bars'
-
-    const textNode = document.createElement('div')
-    textNode.className = 'ai-loading-text'
-    textNode.textContent = options.text
-
-    content.appendChild(spinner)
-    content.appendChild(textNode)
-    mask.appendChild(content)
-
-    el.__aiLoadingMask__ = mask
-  } else {
-    const textNode = mask.querySelector('.ai-loading-text')
-    if (textNode) {
-      textNode.textContent = options.text
-    }
-    mask.className = 'ai-loading-mask'
-    if (options.className) {
-      mask.classList.add(options.className)
-    }
-  }
-
-  const spinnerEl = el.__aiLoadingMask__ && el.__aiLoadingMask__.querySelector('.ai-loading-spinner, .ai-loading-bars')
-  if (spinnerEl) {
-    if (options.loaderType === 'ring') {
-      spinnerEl.className = 'ai-loading-spinner'
-      spinnerEl.style.borderTopColor = options.borderColor || '#409eff'
-    } else {
-      spinnerEl.className = 'ai-loading-bars'
-      spinnerEl.style.borderTopColor = ''
-    }
-  }
-
-  if (options.gradient === true) {
-    mask.classList.add('ai-loading-mask-gradient')
-    mask.style.background = ''
-  } else if (typeof options.gradient === 'string') {
-    mask.classList.remove('ai-loading-mask-gradient')
-    mask.style.background = options.gradient
-  } else {
-    mask.classList.remove('ai-loading-mask-gradient')
-    mask.style.background = 'rgba(255, 255, 255, 0.7)'
-  }
-
-  // 保证宿主元素为定位容器
-  const computedStyle = window.getComputedStyle(el)
-  if (computedStyle.position === 'static' || !computedStyle.position) {
-    el.style.position = 'relative'
-  }
-
-  // 挂载遮罩
-  if (!mask.parentNode) {
-    el.appendChild(mask)
-  }
-  el.classList.add('ai-loading-parent')
-}
-
-const resolveAiLoadingTargetElement = (target) => {
-  if (!target) return null
-  if (typeof target === 'string') {
-    return document.querySelector(target)
-  }
-  if (target instanceof HTMLElement) {
-    return target
-  }
-  if (typeof target === 'object') {
-    if (target.value instanceof HTMLElement) {
-      return target.value
-    }
-    if (target.$el instanceof HTMLElement) {
-      return target.$el
-    }
-  }
-  return null
-}
-
-export const aiLoading = (target, options = {}) => {
-  const el = resolveAiLoadingTargetElement(target)
-  if (!el) {
-    return {
-      stop() {}
-    }
-  }
-  const binding = { value: { ...options, loading: true } }
-  toggleAiLoading(el, binding)
-  return {
-    stop() {
-      const stopBinding = { value: { ...options, loading: false } }
-      toggleAiLoading(el, stopBinding)
-    }
-  }
-}
-
-/**
- * v-aiLoading 指令实现
- * - 在组件全局注册后即可在任意模板中直接使用
- */
-export const aiLoadingDirective = {
-  mounted(el, binding) {
-    toggleAiLoading(el, binding)
-  },
-  updated(el, binding) {
-    toggleAiLoading(el, binding)
-  },
-  unmounted(el) {
-    const mask = el.__aiLoadingMask__
-    if (mask && mask.parentNode) {
-      mask.parentNode.removeChild(mask)
-    }
-    el.__aiLoadingMask__ = null
-    el.classList.remove('ai-loading-parent')
-  }
-}
-

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

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

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

@@ -1,18 +0,0 @@
-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'
-import { aiLoadingDirective } from './directives/aiLoading'
-
-const app = createApp(App)
-const pinia = createPinia()
-
-app.directive('aiLoading', aiLoadingDirective)
-
-app.use(ElementPlus)
-app.use(router)
-app.use(pinia)
-app.mount('#app')

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

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

package/app/wujie-vue3-child/src/store/tagsViewStroe.js

@@ -1,34 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useTagsViewStore = defineStore('tagsView', {
-  state: () => ({
-    tagsViewList: [],
-  }),
-  actions: {
-    addTagsView(tag) {
-
-        // 判断是否已经存在
-        const isExist = this.tagsViewList.some(item => item.path === tag.path)
-        if(isExist){
-            return
-        }
-
-      this.tagsViewList.push(tag)
-    },
-    removeTagsView(tag) {
-        this.tagsViewList = this.tagsViewList.filter(item => item.path !== tag.path)
-    },
-    removeOtherTagsView(tag) {
-        this.tagsViewList = this.tagsViewList.filter(item => item.path === tag.path)
-    },
-    clearTagsView() {
-        this.tagsViewList = []
-    },
-    getTagsViewList() {
-        return this.tagsViewList
-    },
-    setTagsViewList(tagsList) {
-        this.tagsViewList = tagsList
-    }
-  }
-})