n20-common-lib 3.1.1 → 3.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/_qiankun/communicator.js

@@ -0,0 +1,152 @@
+import bus from './eventBus'
+
+// 事件名常量
+const MAIN_STATE_CHANGE = 'MAIN_STATE_CHANGE'
+const CHILD_MESSAGE = 'CHILD_MESSAGE'
+
+// 子应用间通讯的通道标记
+const CHILD_CHANNEL = 'child-to-child'
+
+// 模块级状态
+let qiankunProps = null
+let unsubscribe = null
+let latestMainState = null
+
+/**
+ * 初始化 qiankun 通讯，应在 mount() 中调用
+ * @param {Object} props qiankun mount 阶段传入的 props
+ */
+export function initCommunication(props) {
+  // 防止重复初始化累积监听器
+  destroyCommunication()
+
+  qiankunProps = props || null
+
+  if (props && typeof props.onGlobalStateChange === 'function') {
+    unsubscribe = props.onGlobalStateChange((state, prev) => {
+      if (state && state._channel === CHILD_CHANNEL) {
+        // 子应用间消息，走独立通道
+        bus.$emit(CHILD_MESSAGE, {
+          type: state._type,
+          data: state._data,
+          from: state._from,
+          target: state._target
+        })
+        return
+      }
+      latestMainState = state
+      bus.$emit(MAIN_STATE_CHANGE, state, prev)
+    }, true)
+  }
+}
+
+/**
+ * 销毁通讯，清理监听器和缓存引用，应在 unmount() 中调用
+ */
+export function destroyCommunication() {
+  if (typeof unsubscribe === 'function') {
+    unsubscribe()
+  }
+  unsubscribe = null
+  qiankunProps = null
+  latestMainState = null
+}
+
+/**
+ * 通过 qiankun GlobalState 向主应用发送状态
+ * @param {Object} state 要发送的状态对象
+ * @returns {boolean} 是否发送成功
+ */
+export function setGlobalState(state) {
+  if (qiankunProps && typeof qiankunProps.setGlobalState === 'function') {
+    qiankunProps.setGlobalState(state)
+    return true
+  }
+  return false
+}
+
+/**
+ * 监听主应用全局状态变化
+ * @param {Function} callback 回调函数 (state) => void
+ */
+export function onMainStateChange(callback) {
+  bus.$on(MAIN_STATE_CHANGE, callback)
+  // 已有缓存状态时立即同步回调
+  if (latestMainState !== null) {
+    callback(latestMainState)
+  }
+}
+
+/**
+ * 注销主应用状态变化监听
+ * @param {Function} callback 要注销的回调
+ */
+export function offMainStateChange(callback) {
+  bus.$off(MAIN_STATE_CHANGE, callback)
+}
+
+/**
+ * 获取缓存的主应用最新状态
+ * @returns {Object|null}
+ */
+export function getMainState() {
+  return latestMainState
+}
+
+/**
+ * 通过 window.postMessage 向主应用发送结构化消息
+ * 格式兼容现有 handleTab.js 的 postMessage 协议
+ * @param {string} type 消息类型
+ * @param {*} data 消息数据
+ */
+export function postToMain(type, data) {
+  const originName = process.env.VUE_APP_NAME
+  window.postMessage({
+    [type]: data,
+    targetName: 'main',
+    originName
+  })
+}
+
+/**
+ * 通过主应用中转向另一个子应用发送消息
+ * @param {string} childAppName 目标子应用名称
+ * @param {string} type 消息类型
+ * @param {*} data 消息数据
+ * @returns {boolean} 是否发送成功
+ */
+export function sendToChild(childAppName, type, data) {
+  if (qiankunProps && typeof qiankunProps.setGlobalState === 'function') {
+    qiankunProps.setGlobalState({
+      _channel: CHILD_CHANNEL,
+      _target: childAppName,
+      _from: process.env.VUE_APP_NAME,
+      _type: type,
+      _data: data
+    })
+    return true
+  }
+  return false
+}
+
+/**
+ * 监听其他子应用发来的消息
+ * @param {Function} callback 回调函数 ({ type, data, from, target }) => void
+ */
+export function onChildMessage(callback) {
+  bus.$on(CHILD_MESSAGE, callback)
+}
+
+/**
+ * 检测当前是否在 qiankun 环境中运行
+ * @returns {boolean}
+ */
+export function isQiankunEnvironment() {
+  return !!window.__POWERED_BY_QIANKUN__
+}
+
+// 透传 EventBus 方法
+export const $on = bus.$on.bind(bus)
+export const $off = bus.$off.bind(bus)
+export const $emit = bus.$emit.bind(bus)
+export const $once = bus.$once.bind(bus)

package/src/_qiankun/eventBus.js

@@ -0,0 +1,55 @@
+/**
+ * 轻量级发布/订阅事件总线，供 qiankun 通信模块内部使用，同时对外暴露
+ */
+class EventBus {
+  constructor() {
+    this._events = Object.create(null)
+  }
+
+  $on(event, fn) {
+    if (Array.isArray(event)) {
+      event.forEach((e) => this.$on(e, fn))
+      return
+    }
+    ;(this._events[event] || (this._events[event] = [])).push(fn)
+  }
+
+  $off(event, fn) {
+    if (!event) {
+      this._events = Object.create(null)
+      return
+    }
+    const cbs = this._events[event]
+    if (!cbs) return
+    if (!fn) {
+      this._events[event] = null
+      return
+    }
+    for (let i = cbs.length - 1; i >= 0; i--) {
+      if (cbs[i] === fn || cbs[i].__onceFn__ === fn) {
+        cbs.splice(i, 1)
+      }
+    }
+  }
+
+  $emit(event, ...args) {
+    const cbs = this._events[event]
+    if (!cbs || !cbs.length) return
+    // 快照避免边触发边注销导致的遍历问题
+    const snapshot = cbs.slice()
+    for (let i = 0; i < snapshot.length; i++) {
+      snapshot[i](...args)
+    }
+  }
+
+  $once(event, fn) {
+    const wrapper = (...args) => {
+      this.$off(event, wrapper)
+      fn(...args)
+    }
+    wrapper.__onceFn__ = fn
+    this.$on(event, wrapper)
+  }
+}
+
+export default new EventBus()

package/src/_qiankun/index.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { initCommunication, onMainStateChange, destroyCommunication } from './communicator'
 
 const vuePar = {
   render: undefined,
@@ -112,16 +113,17 @@ export async function bootstrap() {
   // console.log('[vue] vue app bootstraped')
 }
 export async function mount(props) {
-  // console.log('[vue] props from main framework', props)
-  props?.onGlobalStateChange((state) => {
-    // state: 变更后的状态; prev 变更前的状态
-    // console.log('onGlobalStateChange111', state, prev)
+  // 监听主应用状态变化 -> 提交到 Vuex（在 initCommunication 前注册，避免初始状态丢失）
+  onMainStateChange((state) => {
     vuePar?.store?.commit('MP/setGlobalState', state)
-  }, true)
+  })
+  // 初始化统一通信层
+  initCommunication(props)
   /* 从其他子运用再切回这个运用,是否保持之前的状态 */
   KEEP_ALIVE && !props.router ? _mountKeep(props) : _mount(props)
 }
 export async function unmount(props) {
+  destroyCommunication()
   /* 从其他子运用再切回这个运用,是否保持之前的状态 */
   KEEP_ALIVE && !props.router ? _unmountKeep() : _unmount()
 }

package/src/assets/css/element-variables.scss

@@ -190,7 +190,7 @@ $--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
 $--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
 
 /// color||Color|0
-$--checkbox-checked-font-color: #e5e6eb;
+$--checkbox-checked-font-color: #1d2129;
 $--checkbox-checked-input-border-color: $--color-primary !default;
 /// color||Color|0
 $--checkbox-checked-background-color: $--color-primary !default;

package/src/components/ProFilterView/index.vue

@@ -143,7 +143,7 @@
         </div>
         <cl-advanced-filter
           v-if="form.viewType === VIEW_TYPE.ADVANCED"
-          ref="filter"
+          ref="filter_box"
           :key="dialogFilterKey"
           class="filter"
           :visible="visible"
@@ -362,6 +362,13 @@ export default {
     this.searchValue = { ...this.getInitialSearchValue, ...this.initialValue }
   },
   methods: {
+    /**
+     * 供外部调用更新 GroupData
+     * @param {Array} data - 筛选条件数据
+     */
+    setGroupData(data) {
+      this.$refs.filter.mackData(data || [])
+    },
     // 处理 slot 类型字段的输入事件，同时更新 searchValue 和 initialValue
     handleSlotInput(fieldName, val) {
       // 防御性检查：如果 fieldName 无效，不执行任何操作

package/src/components/TablePro/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="v2-table-pro-wrapper" style="height: 100%; position: relative">
+  <div class="v2-table-pro-wrapper" style="height: 100%; position: relative; overflow: hidden">
     <vxe-table
       ref="vxeTable"
       :key="colsKey"

package/src/components/TableProOperateColumn/OperateBtns.vue

@@ -1,9 +1,16 @@
 <template>
   <div class="flex-box flex-v flex-c table-operate-btns__wrapper">
     <childrenOperateBtn :btn-list="dfBtns" :row="row" @command="(c) => $emit('command', c)" />
-    <el-dropdown v-if="moreBtns.length" class="m-l-b" @command="(c) => $emit('command', c)">
+    <!-- 更多操作下拉菜单：静态 moreBtns + 异步动态按钮 -->
+    <el-dropdown
+      v-if="showMoreBtn"
+      class="m-l-b"
+      @command="(c) => $emit('command', c)"
+      @visible-change="handleDropdownVisibleChange"
+    >
       <el-button class="n20-icon-moren" size="mini" type="text" />
       <el-dropdown-menu slot="dropdown" class="text-c">
+        <!-- 静态更多按钮 -->
         <template v-for="(item, i) in moreBtns">
           <el-dropdown-item v-if="item.children && item.children.length" :key="i">
             <template>{{ item.label }}</template>
@@ -39,12 +46,39 @@
             </template>
           </el-dropdown-item>
         </template>
+        <!-- 动态按钮加载中 -->
+        <el-dropdown-item v-if="dynamicLoading" disabled class="table-operate-loading">
+          <i class="el-icon-loading" /> {{ $lc('加载中') }}
+        </el-dropdown-item>
+        <!-- 动态按钮加载失败 -->
+        <el-dropdown-item v-else-if="dynamicError" disabled class="table-operate-error">
+          <i class="el-icon-warning" /> {{ $lc('加载失败') }}
+        </el-dropdown-item>
+        <!-- 动态按钮列表 -->
+        <template v-else>
+          <el-dropdown-item
+            v-for="(item, i) in dynamicBtns"
+            :key="'dynamic-' + i"
+            :command="item.command"
+            :disabled="item.disabled | dbdBtn(row)"
+          >
+            <el-badge v-if="resolveBadge(item)" :value="resolveBadge(item)" :max="item.badgeMax || 99">
+              <el-link v-if="item.type" :type="item.type" :underline="false">{{ item.label }}</el-link>
+              <template v-else>{{ item.label }}</template>
+            </el-badge>
+            <template v-else>
+              <el-link v-if="item.type" :type="item.type" :underline="false">{{ item.label }}</el-link>
+              <template v-else>{{ item.label }}</template>
+            </template>
+          </el-dropdown-item>
+        </template>
       </el-dropdown-menu>
     </el-dropdown>
   </div>
 </template>
 <script>
 import childrenOperateBtn from './childrenOperateBtn.vue'
+import { $lc } from '../../utils/i18n/index.js'
 
 export default {
   name: 'TableOperate',
@@ -70,10 +104,19 @@ export default {
     row: {
       type: Object,
       default: () => ({})
+    },
+    // 异步获取操作按钮函数，(row) => Promise<Array<BtnItem>>
+    getOperateBtns: {
+      type: Function,
+      default: null
     }
   },
   data() {
-    return {}
+    return {
+      dynamicBtns: [], // 异步加载的按钮列表
+      dynamicLoading: false, // 加载中状态
+      dynamicError: false // 加载失败状态
+    }
   },
   computed: {
     hasBtns() {
@@ -92,9 +135,14 @@ export default {
       } else {
         return []
       }
+    },
+    // 是否显示"更多"下拉按钮（静态 moreBtns 或异步 getOperateBtns 存在时）
+    showMoreBtn() {
+      return this.moreBtns.length > 0 || !!this.getOperateBtns
     }
   },
   methods: {
+    $lc,
     resolveBadge(item) {
       if (!item.badge) return null
       if (typeof item.badge === 'function') {
@@ -113,6 +161,24 @@ export default {
       } else if (typeof isHas === 'function') {
         return isHas(row)
       }
+    },
+    // 下拉菜单展开/收起时触发异步加载
+    async handleDropdownVisibleChange(visible) {
+      if (!visible || !this.getOperateBtns) return
+      this.dynamicBtns = []
+      this.dynamicError = false
+      this.dynamicLoading = true
+      try {
+        const btns = await this.getOperateBtns(this.row)
+        // 按 isHas 过滤动态按钮
+        this.dynamicBtns = Array.isArray(btns) ? btns.filter((btn) => this.hasBtn(btn.isHas, this.row)) : []
+      } catch (e) {
+        console.warn('[TablePro] getOperateBtns failed:', e)
+        this.dynamicError = true
+        this.dynamicBtns = []
+      } finally {
+        this.dynamicLoading = false
+      }
     }
   }
 }

package/src/components/ViewToggle/index.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="n20-view-toggle" :class="{ disabled }">
-    <div class="n20-toggle-container">
+    <div class="n20-toggle-container" ref="container">
       <div
         v-for="(item, index) in options"
         :key="item.value"
+        ref="items"
         class="n20-toggle-item"
         :class="{ active: value === item.value, 'is-disabled': item.disabled }"
         :style="itemStyle"
@@ -33,7 +34,7 @@ export default {
     },
     itemWidth: {
       type: [Number, String],
-      default: 80
+      default: ''
     },
     itemHeight: {
       type: [Number, String],
@@ -44,31 +45,90 @@ export default {
       default: false
     }
   },
+  data() {
+    return {
+      // 自适应模式下指示器的测量数据
+      measuredIndicator: { width: 0, height: 0, translateX: 0 }
+    }
+  },
   computed: {
+    // 是否为固定宽度模式
+    isFixedWidth() {
+      return this.itemWidth !== '' && this.itemWidth !== undefined && this.itemWidth !== null
+    },
     itemStyle() {
-      const width = typeof this.itemWidth === 'number' ? `${this.itemWidth}px` : (isNaN(this.itemWidth) ? this.itemWidth : `${this.itemWidth}px`)
-      const height = typeof this.itemHeight === 'number' ? `${this.itemHeight}px` : (isNaN(this.itemHeight) ? this.itemHeight : `${this.itemHeight}px`)
-      return {
-        width,
-        height
+      const style = {}
+      if (this.isFixedWidth) {
+        style.width = this.normalizeSize(this.itemWidth)
+      } else {
+        // 自适应模式：用 padding 撑开宽度
+        style.padding = '0 12px'
       }
+      style.height = this.normalizeSize(this.itemHeight)
+      return style
     },
     indicatorStyle() {
-      const itemW = typeof this.itemWidth === 'number' ? this.itemWidth : parseInt(this.itemWidth)
-      const itemH = typeof this.itemHeight === 'number' ? this.itemHeight : parseInt(this.itemHeight)
       const gap = 2
-      const activeIndex = this.options.findIndex((item) => item.value === this.value)
-      const translateX = activeIndex >= 0 ? activeIndex * itemW : 0
+      const itemH = typeof this.itemHeight === 'number' ? this.itemHeight : parseInt(this.itemHeight) || 30
+      if (this.isFixedWidth) {
+        const itemW = typeof this.itemWidth === 'number' ? this.itemWidth : parseInt(this.itemWidth) || 80
+        const activeIndex = this.options.findIndex((item) => item.value === this.value)
+        const translateX = activeIndex >= 0 ? activeIndex * itemW : 0
+        return {
+          width: `${itemW - 2 * gap}px`,
+          height: `${itemH - 2 * gap}px`,
+          top: `${gap}px`,
+          left: `${gap}px`,
+          transform: `translateX(${translateX}px)`
+        }
+      }
+      // 自适应模式：基于 DOM 测量定位
+      const { width, height, translateX } = this.measuredIndicator
       return {
-        width: `${itemW - 2 * gap}px`,
-        height: `${itemH - 2 * gap}px`,
+        width: `${width - 2 * gap}px`,
+        height: `${height - 2 * gap}px`,
         top: `${gap}px`,
         left: `${gap}px`,
         transform: `translateX(${translateX}px)`
       }
     }
   },
+  watch: {
+    value() {
+      if (!this.isFixedWidth) this.$nextTick(this.updateIndicator)
+    },
+    options: {
+      deep: true,
+      handler() {
+        if (!this.isFixedWidth) this.$nextTick(this.updateIndicator)
+      }
+    }
+  },
+  mounted() {
+    if (!this.isFixedWidth) this.updateIndicator()
+  },
   methods: {
+    // 统一尺寸格式化
+    normalizeSize(val) {
+      if (typeof val === 'number') return `${val}px`
+      return isNaN(val) ? val : `${val}px`
+    },
+    // 自适应模式下测量激活项的位置
+    updateIndicator() {
+      const items = this.$refs.items
+      if (!items || !items.length) return
+      const activeIndex = this.options.findIndex((item) => item.value === this.value)
+      if (activeIndex < 0) {
+        this.measuredIndicator = { width: 0, height: 0, translateX: 0 }
+        return
+      }
+      const activeEl = items[activeIndex]
+      this.measuredIndicator = {
+        width: activeEl.offsetWidth,
+        height: activeEl.offsetHeight,
+        translateX: activeEl.offsetLeft
+      }
+    },
     handleChange(val) {
       if (this.disabled) return
       const item = this.options.find((item) => item.value === val)

package/src/components/v3/TablePro/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="v3-table-pro-wrapper" style="height: 100%; position: relative">
+  <div class="v3-table-pro-wrapper" style="height: 100%; position: relative; overflow: hidden">
     <!-- 骨架屏 - 仅覆盖内容区域，不覆盖表头 -->
     <div v-if="loading" class="table-pro-skeleton">
       <div v-for="n in skeletonRows" :key="'skeleton-' + n" class="skeleton-row">
@@ -35,7 +35,7 @@
         ...$attrs.columnConfig,
         ...$attrs['column-config']
       }"
-      :scroll-y="scrollY"
+      :virtual-y-config="scrollY"
       :sort-config="{
         multiple: false,
         remote: true,
@@ -281,7 +281,7 @@
           </div>
         </template>
         <template #default="{ row, $rowIndex }">
-          <OperateBtns :btn-list="btnList" :row="row" @command="(c) => handleOperateCommand(c, row, $rowIndex)" />
+          <OperateBtns :btn-list="btnList" :row="row" :get-operate-btns="getOperateBtns" @command="(c) => handleOperateCommand(c, row, $rowIndex)" />
         </template>
       </vxe-column>
       <template #empty>
@@ -420,7 +420,7 @@ export default {
     scrollY: {
       type: Object,
       default: () => {
-        return { enabled: true, oSize: 20, gt: 30 }
+        return { enabled: true, gt: 0, model: 'wheel' }
       }
     },
     data: {
@@ -567,6 +567,11 @@ export default {
     operateColumnWidth: {
       type: Number,
       default: 180
+    },
+    // 异步获取操作按钮函数，(row) => Promise<Array<BtnItem>>
+    getOperateBtns: {
+      type: Function,
+      default: null
     }
   },
   data() {
@@ -728,6 +733,8 @@ export default {
           this.checkColumns = columns
           // 将 remote: true 的远程列同步写入 this.columns，保持位置一致
           this.syncRemoteColumns(columns)
+          // 强制 vxe-table 重建，确保固定列图标、颜色等表头状态正确回显
+          this.colsKey++
         } else {
           this.checkColumns = this.filterDefaultHidden(this.columns)
         }
@@ -740,8 +747,6 @@ export default {
     async refreshColumns() {
       if (this.showColumn && this.pageId) {
         await this.getColumns()
-        // 强制重建 vxe-table，确保列变更后视图正确刷新
-        this.colsKey++
       }
     },
     // 将 API 返回中标记 remote: true 的列同步到 this.columns，保持对应位置一致

package/src/index.js

@@ -160,6 +160,26 @@ import fitlers from './fitlers'
 /** 修正ElementUI的问题 */
 import monitor from './utils/monitor.js'
 import repairEl from './utils/repairElementUI'
+
+/** qiankun 微前端通讯 */
+import {
+  initCommunication,
+  destroyCommunication,
+  setGlobalState,
+  postToMain,
+  onMainStateChange,
+  offMainStateChange,
+  getMainState,
+  sendToChild,
+  onChildMessage,
+  isQiankunEnvironment,
+  $on,
+  $off,
+  $emit,
+  $once
+} from './_qiankun/communicator'
+import PM from './_qiankun/postMessage.js'
+
 const components = [
   ProFilterView,
   DynamicFieldTable,
@@ -440,5 +460,23 @@ export {
   type,
   version,
   watermark,
-  accountFormat
+  accountFormat,
+  // qiankun Vuex module
+  PM,
+  // qiankun 通讯函数
+  initCommunication,
+  destroyCommunication,
+  setGlobalState,
+  postToMain,
+  onMainStateChange,
+  offMainStateChange,
+  getMainState,
+  sendToChild,
+  onChildMessage,
+  isQiankunEnvironment,
+  // 事件总线
+  $on,
+  $off,
+  $emit,
+  $once
 }