@meethive/components 0.0.1

package/lib/VirtualTable/VirtualTable.js

@@ -0,0 +1,271 @@
+ function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+import { defineComponent, computed, ref, watch, onMounted, nextTick, h } from 'vue'
+import { Table, Checkbox } from 'ant-design-vue'
+import { isNumber, map, omit } from 'lodash-es'
+import AIcon from '../Icon'
+import useVirtualTableStyle from './style'
+import { useLocaleReceiver } from '../LocaleReciver'
+import { findAllChildren, flattenTree } from './data'
+
+const buffer = 5
+
+export default defineComponent({
+  name: 'JVirtualTable',
+  components: {
+    Table,
+    Checkbox,
+    AIcon
+  },
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    expandedRowKeys: {
+      type: Array,
+      default: () => []
+    },
+    rowSelection: {
+      type: Object
+    },
+    rowKey: {
+      type: [String, Function],
+      default: 'id'
+    },
+    height: {
+      type: Number,
+      default: 500
+    }
+  } ,
+  emits: ['update:expandedRowKeys'],
+  setup(props, { emit }) {
+    const prefixCls = computed(() => 'virtual-table')
+    const [wrapSSR, hashId] = useVirtualTableStyle(prefixCls)
+    const [contextLocale] = useLocaleReceiver('ProTable')
+
+    const container = ref(null)
+    const rowHeights = ref([])
+    const prefixSum = ref([])
+    const start = ref(0)
+    const end = ref(15)
+    const offsetY = ref(0)
+
+    const selectedAll = ref(false)
+    // 被展开的所有数据
+    const visibleNodes = ref([])
+    const flattenData = ref([])
+
+    const firstColumn = computed(() => props.columns[0])
+    const totalHeight = computed(() =>
+      prefixSum.value.length ? prefixSum.value[prefixSum.value.length - 1] : 0
+    )
+    const visibleRows = computed(() => visibleNodes.value.slice(start.value, end.value))
+    const _indeterminate = computed(
+      () => !selectedAll.value && (_nullishCoalesce(_optionalChain([props, 'access', _ => _.rowSelection, 'optionalAccess', _2 => _2.selectedRowKeys, 'optionalAccess', _3 => _3.length]), () => ( 0))) > 0
+    )
+    const viewportHeight = computed(() => props.height || 500)
+
+    const _columns = computed(() => {
+      const arr = []
+      if (props.rowSelection) {
+        const _width = props.rowSelection.columnWidth || 32
+        arr.push({
+          key: '__selection__',
+          title: contextLocale.value.select.all,
+          dataIndex: '__selection__',
+          width: isNumber(_width) ? `${_width}px` : _width,
+          customHeaderCell: (props) => {
+            return {
+              class: 'ant-table-selection-column'
+            }
+          }
+        })
+      }
+      arr.push(...props.columns)
+      return arr
+    })
+
+    const _rowSelection = computed(() => {
+      return props.rowSelection
+        ? {
+            ...props.rowSelection,
+            onSelect: (record, selected, selectedRows, nativeEvent) => {
+              const _selectedRowKeys = props.rowSelection.selectedRowKeys || []
+              const _set = new Set([..._selectedRowKeys])
+              if (props.rowSelection.type === 'radio') {
+                _set.clear()
+                _set.add(record[props.rowKey ])
+              } else {
+                const _checkStrictly =
+                  props.rowSelection.checkStrictly !== undefined
+                    ? props.rowSelection.checkStrictly
+                    : true
+                let __arr = []
+                if (_checkStrictly) {
+                  // 需要获取子
+                  __arr = [record[props.rowKey ]]
+                } else {
+                  __arr = map(
+                    findAllChildren(flattenData.value, record[props.rowKey ]),
+                    props.rowKey 
+                  )
+                  __arr.push(record[props.rowKey ])
+                }
+                if (selected) {
+                  __arr.forEach((i) => _set.add(i))
+                } else {
+                  __arr.forEach((i) => _set.delete(i))
+                }
+              }
+              const _selectedRows = flattenData.value
+                .filter((i) => _set.has(i[props.rowKey ]))
+                .map((item) => omit(item, ['expanded', 'hasChildren', 'visible']))
+              if (props.rowSelection.onSelect) {
+                props.rowSelection.onSelect(record, selected, _selectedRows, nativeEvent)
+              }
+              if (props.rowSelection.onChange) {
+                props.rowSelection.onChange([..._set], _selectedRows)
+              }
+            },
+            onChange: () => {},
+            onSelectAll: () => {},
+            onSelectNone: () => {
+              if (props.rowSelection.onSelectNone) {
+                props.rowSelection.onSelectNone()
+              }
+            }
+          }
+        : undefined
+    })
+
+    const onSelectedAllChange = (e) => {
+      const selected = e.target.checked
+      const arr = flattenData.value.map((i) => omit(i, ['expanded', 'hasChildren', 'visible']))
+      const _checked = selected
+      const _selectedRowKeys = _checked ? map(arr, props.rowKey ) : []
+      if (props.rowSelection.onSelectAll) {
+        props.rowSelection.onSelectAll(_checked, _checked ? arr : [])
+      }
+      if (props.rowSelection.onChange) {
+        props.rowSelection.onChange(_selectedRowKeys, _checked ? arr : [])
+      }
+    }
+
+    const onScroll = (e) => {
+      const scrollTop = e.target.scrollTop
+      const vh = viewportHeight.value || 500
+      const total = totalHeight.value
+      // 防止 scrollTop 超出范围
+      const clampedScrollTop = Math.min(scrollTop, total - vh)
+      // 二分查找
+      let low = 0,
+        high = prefixSum.value.length - 1
+      while (low < high) {
+        const mid = Math.floor((low + high) / 2)
+        if (prefixSum.value[mid] <= clampedScrollTop) low = mid + 1
+        else high = mid
+      }
+      const newStart = Math.max(0, low - 1)
+      // 如果 start 没变化，直接跳过，避免重复计算导致闪动
+      if (newStart === start.value) return
+      start.value = newStart
+      // 计算 end
+      let y = prefixSum.value[start.value] || 0
+      let i = start.value
+      while (i < visibleNodes.value.length && y < clampedScrollTop + vh) {
+        y += rowHeights.value[i] || 40
+        i++
+      }
+      end.value = Math.min(i + buffer, visibleNodes.value.length)
+      // 防止 offsetY 波动
+      offsetY.value = prefixSum.value[start.value - 1] || 0
+    }
+
+    const toggleExpand = (row) => {
+      row.expanded = !row.expanded
+      const stack = [...flattenData.value.filter((n) => n.parentId === row[props.rowKey ])]
+      while (stack.length) {
+        const child = stack.pop()
+        child.visible = row.expanded
+        if (!child.visible) {
+          child.expanded = false
+        }
+        if (!row.expanded && child.hasChildren) {
+          stack.push(...flattenData.value.filter((n) => n.parentId === child[props.rowKey ]))
+        }
+      }
+      updateVisibleNodes()
+    }
+
+    const updatePrefixSum = () => {
+      rowHeights.value = visibleNodes.value.map(() => 40) // 默认行高
+      prefixSum.value = []
+      let sum = 0
+      for (let h of rowHeights.value) {
+        sum += h
+        prefixSum.value.push(sum)
+      }
+    }
+
+    const updateVisibleNodes = () => {
+      visibleNodes.value = flattenData.value.filter((i) => i.visible)
+      updatePrefixSum()
+      console.log('123')
+      nextTick(() => onScroll({ target: container.value }))
+    }
+
+    watch(
+      () => [JSON.stringify(props.dataSource), JSON.stringify(props.expandedRowKeys)],
+      () => {
+        flattenData.value = flattenTree(props.dataSource , 0, null)
+        flattenData.value.forEach((i) => {
+          if ((props.expandedRowKeys ).includes(i[props.rowKey ])) {
+            toggleExpand(i)
+          }
+        })
+        updateVisibleNodes()
+      },
+      {
+        immediate: true
+      }
+    )
+
+    watch(
+      () => _optionalChain([props, 'access', _4 => _4.rowSelection, 'optionalAccess', _5 => _5.selectedRowKeys]),
+      (val) => {
+        if (val) {
+          selectedAll.value = val.length > 0 && flattenData.value.length === val.length
+        }
+      },
+      {
+        immediate: true
+      }
+    )
+
+    onMounted(() => {
+      updateVisibleNodes()
+    })
+
+    return {
+      h,
+      hashId,
+      container,
+      selectedAll,
+      visibleRows,
+      _indeterminate,
+      viewportHeight,
+      _columns,
+      _rowSelection,
+      totalHeight,
+      offsetY,
+      firstColumn,
+      onSelectedAllChange,
+      onScroll,
+      toggleExpand
+    }
+  }
+})

package/lib/VirtualTable/data.js

@@ -0,0 +1,60 @@
+ function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// 扁平化数据
+import { omit } from 'lodash-es'
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export const flattenTree = (
+  tree,
+  level = 0,
+  parentId = null
+) => {
+  return tree.flatMap((item) => {
+    const _children = (item.children || []).map((i) => {
+      return { ...omit(i, 'children') }
+    })
+    const flatNode = {
+      ...omit(item, 'children'),
+      _children,
+      level,
+      parentId,
+      expanded: false,
+      hasChildren: (_nullishCoalesce(_optionalChain([item, 'access', _ => _.children, 'optionalAccess', _2 => _2.length]), () => ( 0))) > 0,
+      visible: level === 0
+    }
+    const children = item.children ? flattenTree(item.children, level + 1, item.id) : []
+    return [flatNode, ...children]
+  })
+}
+
+export const findAllChildren = (
+  data = [],
+  parentId = null
+) => {
+  const result = []
+
+  function recursive(pid) {
+    data.forEach((item) => {
+      if (item.parentId === pid) {
+        result.push(item)
+        recursive(item.id) // 递归查找这个子节点的孩子
+      }
+    })
+  }
+
+  recursive(parentId)
+  return result
+}

package/lib/VirtualTable/index.js

@@ -0,0 +1,7 @@
+import VirtualTable from './VirtualTable.js'
+
+VirtualTable.install = function (app) {
+  app.component(VirtualTable.name, VirtualTable)
+}
+
+export default VirtualTable

package/lib/VirtualTable/style/index.js

@@ -0,0 +1,34 @@
+import genComponentStyle from '../../style/styleRegister'
+
+const genVirtualTableStyle = () => {
+  return {
+    '.virtual-table-wrapper': {
+      display: 'flex',
+      'flex-direction': 'column',
+      '.virtual-table-header': {
+        '.ant-table': {
+          '.ant-table-container': {
+            '.ant-table-content': {
+              '.ant-table-tbody': {
+                display: 'none'
+              }
+            }
+          }
+        }
+      },
+      '.virtual-table-body': {
+        'overflow-y': 'auto',
+        position: 'relative',
+        'min-height': '100px'
+      },
+      '.virtual-table-row-expand-icon': {
+        'margin-right': '8px',
+        'font-size': 'relative',
+        width: '16px',
+        display: 'inline-block'
+      }
+    }
+  }
+}
+
+export default genComponentStyle([genVirtualTableStyle])

package/lib/components.js

@@ -0,0 +1,21 @@
+export { default as BadgeStatus } from './BadgeStatus'
+export { default as CardSelect } from './CardSelect'
+export { default as CheckButton } from './CheckButton'
+export { default as ConfigProvider } from './ConfigProvider'
+export { default as Ellipsis } from './Ellipsis'
+export { default as Empty } from './Empty'
+export { default as FullPage } from './FullPage'
+export { default as AIcon } from './Icon'
+export { default as PermissionButton } from './PermissionButton'
+export { default as ProLayout, PageContainer } from './ProLayout'
+export { default as ProTable } from './ProTable'
+export { default as Scrollbar } from './Scrollbar'
+export { default as Search } from './Search'
+export { default as ValueItem } from './ValueItem'
+export { default as TimeFormat } from './TimeFormat'
+export { default as DragModal } from './DragModal'
+export { default as EditTable } from './EditTable'
+export { default as Markdown } from './Markdown'
+export { default as AutoComplete } from './AutoComplete'
+export { default as Title } from './Title'
+export { default as VirtualTable } from './VirtualTable'

package/lib/index.js

@@ -0,0 +1,17 @@
+/*eslint import/namespace: ['error', { allowComputed: true }]*/
+import * as components from './components'
+export * from './components'
+
+export const install = function (app, options = {}) {
+  Object.keys(components).forEach(function (key) {
+    const component = (components )[key]
+    if (component.install) {
+      app.use(component)
+    }
+  })
+  return app
+}
+
+export default {
+  install,
+}

package/lib/locale/en-US.js

@@ -0,0 +1,120 @@
+export default {
+  DragModal: {
+    cancel: 'Cancel',
+    confirm: 'Confirm'
+  },
+  Search: {
+    search: {
+      reset: 'Reset',
+      search: 'Search'
+    },
+    advanced: {
+      search: 'Search',
+      reset: 'Reset',
+      more: 'More',
+      saveHistory: {
+        searchName: 'Search name',
+        placeholder: 'Please enter a name',
+        ruleName: 'Up to 64 characters',
+        save: 'Save',
+        success: 'Operation successful',
+        fail: 'Operation fail'
+      },
+      history: {
+        confirmDelete: 'Confirm Delete?',
+        search: 'Search'
+      }
+    },
+    item: {
+      firstGroup: 'Group One',
+      secondGroup: 'Group Two',
+      placeholder: 'Please select'
+    },
+    setting: {
+      or: 'Or',
+      and: 'And',
+      include: 'Include',
+      exclude: 'Exclude',
+      in: 'In',
+      notIn: 'Not in',
+      between: 'Between',
+      notBetween: 'Not Between'
+    }
+  },
+  Empty: {
+    description: 'No Data'
+  },
+  ProTable: {
+    pagination: {
+      page: 'Articles {0} - {1}/Total of',
+      total: '',
+      lastPage: 'It is already the last page'
+    },
+    alert: {
+      cancelChoose: 'Cancel selection',
+      selectItem: 'Select {0} items'
+    },
+    select: {
+      all: 'Select all'
+    }
+  },
+  ProLayout: {
+    pageContainer: {
+      back: 'Back'
+    }
+  },
+  EditTable: {
+    serial: 'Serial',
+    columns: {
+      sign: 'Sign',
+      name: 'Name',
+      count: 'count'
+    },
+    contextMenu: {
+      add: 'Add',
+      copy: 'Copy',
+      paste: 'Paste',
+      detail: 'View details',
+      delete: 'Delete'
+    },
+    Search: {
+      find: 'Find',
+      placeholder: 'Please enter the search content',
+      all: 'Find all',
+      prev: 'Previous',
+      next: 'Next',
+      close: 'Close',
+      rows: 'Rows',
+      row: 'Line',
+      rd: '',
+      found: 'Found',
+      related: 'Related'
+    },
+    Sort: {
+      sort: 'Sort',
+      clean: 'Clear conditions',
+      up: 'Ascending order',
+      down: 'Descending order'
+    },
+    Group: {
+      one: 'Grouping_',
+      edit: 'Edit',
+      delete: 'Delete',
+      validate: 'Verify non-compliance',
+      editGroup: 'Edit Group',
+      addGroup: 'Add Group',
+      placeholder: 'Please enter the group name',
+      max: 'Up to 16 characters can be entered',
+      deleteMessage: 'Will the data within the group be synchronously deleted? Are you sure about deletion?'
+    }
+  },
+  ValueItem: {
+    placeholder: 'Please enter the link',
+    cancel: 'Cancel',
+    confirm: 'Confirm',
+    title: 'Edit'
+  },
+  PermissionButton: {
+    hasPermission: 'No permission, please contact the administrator'
+  }
+}

package/lib/locale/zh-CN.js

@@ -0,0 +1,120 @@
+export default {
+  DragModal: {
+    cancel: '取消',
+    confirm: '确定'
+  },
+  Search: {
+    search: {
+      reset: '重置',
+      search: '搜索'
+    },
+    advanced: {
+      search: '搜索',
+      reset: '重置',
+      more: '更多筛选',
+      saveHistory: {
+        searchName: '搜索名称',
+        placeholder: '请输入名称',
+        ruleName: '最多64个字符',
+        save: '保存',
+        success: '操作成功',
+        fail: '操作失败'
+      },
+      history: {
+        confirmDelete: '确认删除吗？',
+        search: '搜索'
+      }
+    },
+    item: {
+      firstGroup: '第一组',
+      secondGroup: '第二组',
+      placeholder: '请选择'
+    },
+    setting: {
+      or: '或者',
+      and: '并且',
+      include: '包含',
+      exclude: '不包含',
+      in: '在...之中',
+      notIn: '不在...之中',
+      between: '在...之间',
+      notBetween: '不在...之间'
+    }
+  },
+  Empty: {
+    description: '暂无数据'
+  },
+  ProTable: {
+    pagination: {
+      page: '第 {0} - {1} 条/总共',
+      total: '条',
+      lastPage: '已是最后一页'
+    },
+    alert: {
+      cancelChoose: '取消选择',
+      selectItem: '已选择 {0} 项'
+    },
+    select: {
+      all: '全选'
+    }
+  },
+  ProLayout: {
+    pageContainer: {
+      back: '返回'
+    }
+  },
+  EditTable: {
+    serial: '序号',
+    columns: {
+      sign: '标识',
+      name: '名称',
+      count: '计数'
+    },
+    contextMenu: {
+      add: '新增行',
+      copy: '复制行',
+      paste: '粘贴行',
+      detail: '查看详情',
+      delete: '删除'
+    },
+    Search: {
+      find: '查找',
+      placeholder: '请输入查找内容',
+      all: '查找全部',
+      prev: '上一个',
+      next: '下一个',
+      close: '关闭',
+      rows: '行数',
+      row: '行',
+      rd: '第',
+      found: '查找到',
+      related: '条相关属性'
+    },
+    Sort: {
+      sort: '排序',
+      clean: '清空条件',
+      up: '升序',
+      down: '降序'
+    },
+    Group: {
+      one: '分组_',
+      edit: '编辑',
+      delete: '删除',
+      validate: '校验不合规',
+      editGroup: '编辑分组',
+      addGroup: '新增分组',
+      placeholder: '请输入分组名称',
+      max: '最多可输入16个字符',
+      deleteMessage: '将会同步删除分组内的数据，确认删除？'
+    }
+  },
+  ValueItem: {
+    placeholder: '请输入链接',
+    cancel: '取消',
+    confirm: '确定',
+    title: '编辑'
+  },
+  PermissionButton: {
+    hasPermission: '暂无权限，请联系管理员'
+  }
+}

package/lib/style/styleRegister.js

@@ -0,0 +1,19 @@
+import { genComponentStyleHook } from 'ant-design-vue/es/theme/internal'
+import { theme } from 'ant-design-vue'
+import variableToken from './variable'
+
+
+
+const genComponentStyle = (styleFn) => {
+  return genComponentStyleHook('jetlinks-components', (_token) => {
+    const { token, hashId } = theme.useToken()
+    const componentToken = {
+      token: { ..._token, ...variableToken },
+      hashId: hashId.value,
+      componentCls: `.${_token.prefixCls}`
+    }
+    return [...styleFn.map((item) => item(componentToken))]
+  })
+}
+
+export default genComponentStyle

package/lib/style/variable.js

@@ -0,0 +1,4 @@
+export default {
+  textColorTitle: '#000',
+  textColorSubtitle: '#263237'
+}

package/lib/style.js

@@ -0,0 +1 @@
+// Style entry - import component styles here if needed

package/lib/utils/constants.js

@@ -0,0 +1,10 @@
+export const ComponentsEnum = {
+  Icon: Symbol('jetlinks-icon'),
+  Permission: Symbol('permission')
+}
+
+export const MAPConfig = Symbol('map_key')
+export const SearchConfig = Symbol('search-config')
+export const PermissionButtonConfig = Symbol('permission-button')
+export const FullPageConfig = Symbol('full-page')
+export const TableConfig = Symbol('table-config')