npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/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-wk/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-wk/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-wk/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-wk/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-wk/wujie-vue3-child/src/components/SmartAnchorTabs/index.jsx

@@ -0,0 +1,224 @@
+import { defineComponent, ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue'
+import './style.css'
+
+export default defineComponent({
+  name: 'SmartAnchorTabs',
+  props: {
+    // 数据源：[{ label, key, content?, component? }]
+    tabs: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    // 布局位置：'left' | 'right' | 'top'
+    position: {
+      type: String,
+      default: 'left'
+    },
+    // 模式：'anchor' (滚动锚点) | 'switch' (组件切换)
+    mode: {
+      type: String,
+      default: 'anchor'
+    },
+    // 容器高度，如果是 anchor 模式需要指定高度以支持滚动
+    height: {
+      type: String,
+      default: '100%'
+    },
+    // 默认激活的 key
+    defaultActive: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['update:active', 'change'],
+  setup(props, { slots, emit }) {
+    const activeKey = ref(props.defaultActive || (props.tabs[0] && props.tabs[0].key) || '')
+    const contentRef = ref(null)
+    const isClicking = ref(false) // 防止点击滚动时触发 scroll 监听导致的跳动
+    const sectionRefs = ref({})
+
+    // 设置 section ref
+    const setSectionRef = (el, key) => {
+      if (el) {
+        sectionRefs.value[key] = el
+      }
+    }
+
+    // 切换 Tab
+    const handleTabClick = (tab) => {
+      activeKey.value = tab.key
+      emit('update:active', tab.key)
+      emit('change', tab.key)
+
+      if (props.mode === 'anchor') {
+        scrollToSection(tab.key)
+      }
+    }
+
+    // 滚动到指定 Section
+    const scrollToSection = (key) => {
+      const sectionEl = sectionRefs.value[key]
+      const containerEl = contentRef.value
+      
+      if (sectionEl && containerEl) {
+        isClicking.value = true
+        
+        // 计算目标位置：section.offsetTop - container.offsetTop
+        // 这里假设 content 是 relative 定位，直接用 section.offsetTop 即可（如果 section 是 content 的直接子元素）
+        const top = sectionEl.offsetTop
+
+        containerEl.scrollTo({
+          top: top,
+          behavior: 'smooth'
+        })
+
+        // 简单的防抖，等待滚动结束
+        setTimeout(() => {
+          isClicking.value = false
+        }, 500)
+      }
+    }
+
+    // 监听滚动，更新 Active Tab
+    const handleScroll = (e) => {
+      if (props.mode !== 'anchor' || isClicking.value) return
+
+      const container = e.target
+      const scrollTop = container.scrollTop
+      const containerHeight = container.clientHeight
+      
+      // 遍历所有 sections，找到当前最符合可视区域的一个
+      // 策略：找到第一个 top > scrollTop 的 section，那么它的前一个就是当前 active
+      // 或者：找到距离 scrollTop 最近的一个 section
+
+      let currentKey = ''
+      
+      // 加上一定的偏移量，比如滚动到 section 顶部往下 50px 才算进入
+      const offset = 20 
+
+      for (const tab of props.tabs) {
+        const sectionEl = sectionRefs.value[tab.key]
+        if (!sectionEl) continue
+
+        // section 距离容器顶部的距离
+        const sectionTop = sectionEl.offsetTop
+        const sectionHeight = sectionEl.offsetHeight
+
+        // 如果 scrollTop 在 section 范围内
+        if (scrollTop >= sectionTop - offset && scrollTop < sectionTop + sectionHeight - offset) {
+            currentKey = tab.key
+            break
+        }
+      }
+
+      // 如果没有匹配到（比如上面的循环逻辑有漏洞），兜底策略：
+      // 找最近的一个
+      if (!currentKey) {
+          let minDiff = Infinity
+          for (const tab of props.tabs) {
+              const sectionEl = sectionRefs.value[tab.key]
+              if (!sectionEl) continue
+              const diff = Math.abs(sectionEl.offsetTop - scrollTop)
+              if (diff < minDiff) {
+                  minDiff = diff
+                  currentKey = tab.key
+              }
+          }
+      }
+
+      if (currentKey && currentKey !== activeKey.value) {
+        activeKey.value = currentKey
+        emit('update:active', currentKey)
+      }
+    }
+
+    // 监听 defaultActive 变化
+    watch(() => props.defaultActive, (val) => {
+      if (val && val !== activeKey.value) {
+        activeKey.value = val
+        if (props.mode === 'anchor') {
+          // nextTick 确保 DOM 更新后滚动
+          nextTick(() => scrollToSection(val))
+        }
+      }
+    })
+
+    return () => {
+      const { tabs, position, mode, height } = props
+      
+      // 类名生成
+      const containerClasses = [
+        'smart-anchor-tabs',
+        `smart-anchor-tabs--${position}`
+      ]
+
+      // 渲染导航
+      const renderNav = () => (
+        <div class="smart-anchor-nav">
+          {tabs.map(tab => (
+            <div
+              key={tab.key}
+              class={['smart-anchor-nav-item', activeKey.value === tab.key ? 'is-active' : '']}
+              onClick={() => handleTabClick(tab)}
+            >
+              {slots[`nav-${tab.key}`] ? slots[`nav-${tab.key}`](tab) : tab.label}
+            </div>
+          ))}
+        </div>
+      )
+
+      // 渲染内容
+      const renderContent = () => {
+        if (mode === 'switch') {
+          // 切换模式：只渲染当前 active 的内容
+          const currentTab = tabs.find(t => t.key === activeKey.value)
+          if (!currentTab) return null
+          
+          return (
+            <div class="smart-anchor-content" style={{ height: '100%', overflowY: 'auto' }}>
+               {/* 优先渲染插槽，其次 component，最后 content 文本 */}
+               {slots[currentTab.key] ? slots[currentTab.key](currentTab) : 
+                (currentTab.component ? <currentTab.component /> : 
+                (slots.default ? slots.default({ tab: currentTab }) : currentTab.content))}
+            </div>
+          )
+        } else {
+          // 锚点模式：渲染所有内容
+          return (
+            <div 
+              class="smart-anchor-content" 
+              ref={contentRef}
+              onScroll={handleScroll}
+            >
+              {tabs.map(tab => (
+                <div
+                  key={tab.key}
+                  ref={(el) => setSectionRef(el, tab.key)}
+                  class="smart-anchor-section"
+                >
+                  <div class="smart-anchor-section-title">
+                    {tab.label}
+                  </div>
+                  <div class="smart-anchor-section-body">
+                    {/* 优先渲染插槽，其次 component，最后 content 文本 */}
+                    {slots[tab.key] ? slots[tab.key](tab) : 
+                     (tab.component ? <tab.component /> : 
+                     (slots.default ? slots.default({ tab: tab }) : tab.content))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )
+        }
+      }
+
+      return (
+        <div class={containerClasses} style={{ height }}>
+          {renderNav()}
+          {renderContent()}
+        </div>
+      )
+    }
+  }
+})

package/app/wujie-wk/wujie-vue3-child/src/components/SmartAnchorTabs/style.css

@@ -0,0 +1,154 @@
+/* SmartAnchorTabs 样式 */
+
+.smart-anchor-tabs {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #fff;
+  overflow: hidden; /* 防止外层滚动 */
+}
+
+/* 布局方向 */
+.smart-anchor-tabs--left {
+  flex-direction: row;
+}
+
+.smart-anchor-tabs--right {
+  flex-direction: row-reverse;
+}
+
+.smart-anchor-tabs--top {
+  flex-direction: column;
+}
+
+/* 导航栏容器 */
+.smart-anchor-nav {
+  position: relative;
+  /* background: #f9fafb; */
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+
+.smart-anchor-tabs--left .smart-anchor-nav,
+.smart-anchor-tabs--right .smart-anchor-nav {
+  width: 200px;
+  /* border-right: 1px solid #e4e7ed; */
+  padding: 16px 0;
+}
+
+.smart-anchor-tabs--right .smart-anchor-nav {
+  border-right: none;
+  border-left: 1px solid #e4e7ed;
+}
+
+.smart-anchor-tabs--top .smart-anchor-nav {
+  width: 100%;
+  height: 48px;
+  border-bottom: 1px solid #e4e7ed;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+/* 导航项 */
+.smart-anchor-nav-item {
+  position: relative;
+  cursor: pointer;
+  color: #606266;
+  font-size: 14px;
+  transition: all 0.3s;
+  user-select: none;
+}
+
+.smart-anchor-tabs--left .smart-anchor-nav-item,
+.smart-anchor-tabs--right .smart-anchor-nav-item {
+  padding: 12px 24px;
+  display: flex;
+  align-items: center;
+}
+
+.smart-anchor-tabs--top .smart-anchor-nav-item {
+  padding: 0 20px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+}
+
+.smart-anchor-nav-item:hover {
+  color: #FDC099;
+}
+
+.smart-anchor-nav-item.is-active {
+  color: #FDC099;
+  font-weight: 500;
+  /* background-color: #ecf5ff; */
+}
+
+/* 指示条 */
+.smart-anchor-nav-item::before {
+  content: '';
+  position: absolute;
+  background-color: #FDC099;
+  transition: all 0.3s;
+  opacity: 0;
+}
+
+/* 左侧布局指示条 */
+.smart-anchor-tabs--left .smart-anchor-nav-item::before {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+}
+
+/* 右侧布局指示条 */
+.smart-anchor-tabs--right .smart-anchor-nav-item::before {
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+}
+
+/* 顶部布局指示条 */
+.smart-anchor-tabs--top .smart-anchor-nav-item::before {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+}
+
+.smart-anchor-nav-item.is-active::before {
+  opacity: 1;
+}
+
+/* 内容区域 */
+.smart-anchor-content {
+  flex: 1;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  position: relative;
+  padding: 24px;
+}
+
+/* 锚点模式下的 Section */
+.smart-anchor-section {
+  margin-bottom: 40px;
+}
+
+.smart-anchor-section:last-child {
+  margin-bottom: 200px; /* 底部留白，确保最后一项能滚到顶部 */
+}
+
+.smart-anchor-section-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #ebeef5;
+}