@veltra/desktop 1.0.0

package/src/components/tree/use-check.ts

@@ -0,0 +1,149 @@
+import { dfs, o } from '@cat-kit/core'
+import { nextTick, watch, type ComputedRef } from 'vue'
+
+import type { TreeEmit, TreeProps } from '../../types'
+import type { TreeNode } from './tree-node'
+
+interface Options {
+  emit: TreeEmit
+  props: TreeProps
+  nodeDict: ComputedRef<Map<any, TreeNode>>
+  getFlattedNodes: () => void
+}
+
+interface UseCheckReturned {
+  checkedData: Set<Record<string, any>>
+  toggleCheck: (node: TreeNode, check: boolean, ctrlKey?: boolean) => void
+}
+
+export function useCheck(options: Options): UseCheckReturned {
+  const { emit, props, nodeDict, getFlattedNodes } = options
+
+  const checkedData = new Set<Record<string, any>>()
+
+  function checkNode(node: TreeNode) {
+    node.checked = true
+    if (node.parent) {
+      node.parent.childrenCheckCount++
+    }
+    checkedData.add(node.data)
+  }
+
+  function uncheckNode(node: TreeNode) {
+    node.checked = false
+    if (node.parent) {
+      node.parent.childrenCheckCount--
+    }
+    checkedData.delete(node.data)
+  }
+
+  /**
+   * 模型值是否由事件触发
+   */
+  let checkedByEvent = false
+
+  // 回显
+  watch(
+    [() => props.checked, nodeDict],
+    ([c, nodeDict]) => {
+      // 事件已经触发模型变更了，所以不再进行下面的计算
+      if (checkedByEvent || !props.checkable) return
+
+      if (!nodeDict.size) return
+      checkedData.clear()
+
+      c?.forEach((v) => {
+        const node = nodeDict.get(v)
+        if (node) {
+          checkNode(node)
+          node.bubbleSet((node) => {
+            if (node.parent) {
+              if (node.parent.expanded) return false
+              node.parent.expanded = true
+            }
+          })
+        }
+      })
+
+      getFlattedNodes()
+    },
+    { immediate: true }
+  )
+
+  function handleCheck(node: TreeNode, ctrlKey?: boolean) {
+    const { checkStrictly } = props
+
+    if (ctrlKey) {
+      checkNode(node)
+    } else {
+      dfs(
+        node as unknown as Record<string, unknown>,
+        (n) => {
+          const tn = n as unknown as TreeNode
+          !tn.disabled && checkNode(tn)
+        },
+        props.childrenKey ?? 'children'
+      )
+    }
+
+    // 非严格选择时还需要更新祖先节点，
+    // 一旦子节点全部选中，父节点也要设置为选中状态
+    if (!checkStrictly) {
+      node.bubbleSet((node) => {
+        const { parent } = node
+
+        if (parent) {
+          const parentChecked = parent.childrenCheckCount === parent.children!.length
+
+          parentChecked ? checkNode(parent) : uncheckNode(parent)
+        }
+      })
+    }
+  }
+
+  function handleUncheck(node: TreeNode, ctrlKey?: boolean) {
+    const { checkStrictly } = props
+    if (ctrlKey) {
+      uncheckNode(node)
+    } else {
+      dfs(
+        node as unknown as Record<string, unknown>,
+        (n) => {
+          const tn = n as unknown as TreeNode
+          !tn.disabled && uncheckNode(tn)
+        },
+        props.childrenKey ?? 'children'
+      )
+    }
+
+    // 非严格模式下，取消选中时，需要更新父节点
+    if (!checkStrictly) {
+      node.bubbleSet((node) => {
+        const { parent } = node
+        if (parent) {
+          uncheckNode(parent)
+        }
+      })
+    }
+  }
+
+  function toggleCheck(node: TreeNode, check: boolean, ctrlKey?: boolean) {
+    checkedByEvent = true
+
+    check ? handleCheck(node, ctrlKey) : handleUncheck(node, ctrlKey)
+
+    const checkedArr = Array.from(checkedData)
+
+    emit(
+      'update:checked',
+      checkedArr.map((item) => o(item).get(props.valueKey!)),
+      checkedArr
+    )
+
+    nextTick(() => {
+      checkedByEvent = false
+    })
+  }
+
+  return { checkedData, toggleCheck }
+}

package/src/components/tree/use-filter.ts

@@ -0,0 +1,73 @@
+import type { Forest } from '@cat-kit/core'
+import type { ShallowRef } from 'vue'
+
+import type { TreeNode } from './tree-node'
+
+interface Options {
+  forest: ShallowRef<Forest<Record<string, unknown>, any>>
+  getFlattedNodes: () => void
+}
+
+interface UseFilterReturned {
+  filter: (filterMethod: string | ((node: TreeNode) => boolean)) => void
+}
+
+export function useFilter(options: Options): UseFilterReturned {
+  const { forest, getFlattedNodes } = options
+
+  /**
+   * 追踪缓存
+   * @description
+   * 在每一次过滤时，对每个节点的所有祖先节点进行展开，
+   * 但这样的代价是巨大的，时间成本为O(nlog(n)). 因此使用一个追踪缓存来减少追踪的次数,
+   * 该缓存堆入节点的父节点，如果该父节点已经被堆入则不再进行堆入
+   */
+  const traceCache = new Set<TreeNode>()
+
+  function defaultFilter(node: TreeNode, qs: string) {
+    if (!qs) return true
+    return node.label.includes(qs)
+  }
+
+  /**
+   * 显示回溯
+   * @param node 节点
+   */
+  function trace(node: TreeNode) {
+    node.visible = true
+    let parent = node.parent
+
+    while (parent && !traceCache.has(parent)) {
+      traceCache.add(parent)
+      parent.expanded = true
+      parent.visible = true
+      parent = parent.parent
+    }
+
+    // 非叶子节点将自身堆入
+    if (!node.isLeaf) {
+      traceCache.add(node)
+    }
+  }
+
+  function filter(filterMethod: string | ((node: TreeNode) => boolean)) {
+    traceCache.clear()
+
+    const filterFn =
+      typeof filterMethod === 'string'
+        ? (node: TreeNode) => defaultFilter(node, filterMethod)
+        : filterMethod
+
+    forest.value.dfs((node) => {
+      if (filterFn(node)) {
+        trace(node)
+      } else {
+        node.visible = false
+      }
+    })
+
+    getFlattedNodes()
+  }
+
+  return { filter }
+}

package/src/components/tree/use-select.ts

@@ -0,0 +1,66 @@
+import { nextTick, shallowRef, watch, type ComputedRef, type ShallowRef } from 'vue'
+
+import type { TreeEmit, TreeProps } from '../../types'
+import type { TreeNode } from './tree-node'
+
+interface Options {
+  emit: TreeEmit
+  props: TreeProps
+  nodeDict: ComputedRef<Map<any, TreeNode>>
+  getFlattedNodes: () => void
+}
+
+interface UseSelectReturned {
+  selectedData: ShallowRef<Record<string, any> | undefined>
+  handleSelect: (node: TreeNode) => void
+}
+
+/**
+ * 单选
+ */
+export function useSelect(options: Options): UseSelectReturned {
+  const { emit, props, nodeDict, getFlattedNodes } = options
+  let selectedData = shallowRef<Record<string, any>>()
+
+  let selectByEvent = false
+  watch(
+    [() => props.selected, nodeDict],
+    ([s, nodeDict]) => {
+      if (selectByEvent || !props.selectable) return
+
+      if (s) {
+        const node = nodeDict.get(s)
+        if (node) {
+          selectedData.value = node.data
+          node.bubbleSet((node) => {
+            if (node.parent) {
+              if (node.parent.expanded) return false
+              node.parent.expanded = true
+            }
+          })
+        }
+      } else {
+        selectedData.value = undefined
+      }
+
+      getFlattedNodes()
+
+      emit('selected-synced', selectedData.value)
+    },
+    { immediate: true }
+  )
+
+  const handleSelect = (node: TreeNode) => {
+    selectByEvent = true
+    if (node.disabled) return
+    selectedData.value = node.data === selectedData.value ? undefined : node.data
+
+    emit('update:selected', selectedData.value?.[props.valueKey!], selectedData.value, node)
+
+    nextTick(() => {
+      selectByEvent = false
+    })
+  }
+
+  return { selectedData, handleSelect }
+}

package/src/components/tree/use-tree-nodes.ts

@@ -0,0 +1,88 @@
+import { Forest } from '@cat-kit/core'
+import { computed, shallowRef, type ShallowRef, type ComputedRef } from 'vue'
+
+import type { TreeProps } from '../../types'
+import { TreeNode } from './tree-node'
+
+interface Options {
+  props: TreeProps
+}
+
+interface UseTreeNodesReturned {
+  nodes: ShallowRef<TreeNode[]>
+  forest: ComputedRef<Forest<Record<string, unknown>, any>>
+  getFlattedNodes: () => void
+  nodeDict: ComputedRef<Map<string | number, TreeNode>>
+}
+export function useTreeNodes(options: Options): UseTreeNodesReturned {
+  const { props } = options
+
+  /** 森林 */
+  const forest = computed(() => {
+    const { disabledNode, expandAll = false, valueKey, labelKey } = props
+    const childrenKey = props.childrenKey ?? 'children'
+
+    function createNode(
+      data: Record<string, any>,
+      index: number,
+      depth: number,
+      _f: Forest<Record<string, unknown>, any>,
+      parent?: TreeNode
+    ) {
+      const node = new TreeNode({
+        data,
+        index,
+        depth,
+        parent,
+        valueKey: valueKey!,
+        labelKey: labelKey!
+      })
+      node.expanded = expandAll
+      return node
+    }
+
+    return new Forest<Record<string, unknown>, any>({
+      data: props.data! as Record<string, unknown>[],
+      childrenKey,
+      createNode: disabledNode
+        ? (data, index, depth, f, parent) => {
+            const node = createNode(
+              data as Record<string, any>,
+              index,
+              depth,
+              f,
+              parent as TreeNode
+            )
+            if (data) {
+              node.disabled = disabledNode(data, node) ?? false
+            }
+            return node
+          }
+        : (data, index, depth, f, parent) =>
+            createNode(data as Record<string, any>, index, depth, f, parent as TreeNode)
+    })
+  })
+
+  /** 碾平后的节点 */
+  const nodes = shallowRef<TreeNode[]>([])
+
+  /**
+   * 节点的字典，key为指定的valueKey的值
+   */
+  const nodeDict = computed(() => {
+    const dict = new Map<string | number, TreeNode>()
+
+    forest.value.dfs((node) => {
+      dict.set(node.key, node)
+    })
+
+    return dict
+  })
+
+  /** 获取碾平后的节点 */
+  function getFlattedNodes() {
+    nodes.value = forest.value.flattenVisible((n) => n.expanded).filter((n) => n.visible)
+  }
+
+  return { nodes, forest, getFlattedNodes, nodeDict }
+}

package/src/components/tree-select/index.ts

@@ -0,0 +1 @@
+export { default as UTreeSelect } from './tree-select.vue'

package/src/components/tree-select/style.scss

@@ -0,0 +1,65 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+@use 'sass:map';
+
+// 方便拼接
+$root-name: tree-select;
+
+@include m.b($root-name) {
+  width: 100%;
+
+  @include m.is(disabled) {
+    cursor: not-allowed;
+
+    &:hover {
+      box-shadow: none;
+    }
+
+    .u-icon {
+      color: fn.use-var(text-color, disabled);
+    }
+  }
+
+  @include m.is(readonly) {
+    pointer-events: none;
+    cursor: default;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    background: none;
+  }
+
+  @include m.e(filter) {
+    margin-bottom: 4px;
+  }
+
+  @include m.e(content-header) {
+    padding: 4px 12px;
+    border-bottom: fn.use-var(border);
+    border-radius: 0;
+    @include m.flex($justify: space-between);
+  }
+
+  @include m.e(content-tree) {
+    max-height: 200px;
+  }
+
+  @include m.e(panel) {
+    @include m.size using ($size) {
+      @include m.bem($root-name, content-filter) {
+        padding: calc(fn.use-var(gap, $size) / 2) fn.use-var(gap, $size);
+      }
+
+      @include m.bem($root-name, content-tree) {
+        padding: calc(fn.use-var(gap, $size) / 2) fn.use-var(gap, $size);
+      }
+
+      @include m.bem($root-name, empty) {
+        height: fn.use-var(form-component-height, $size);
+        line-height: fn.use-var(form-component-height, $size);
+        padding: 0 fn.use-var(gap, $size);
+      }
+    }
+  }
+}

package/src/components/tree-select/style.ts

@@ -0,0 +1,5 @@
+import '../dropdown/style'
+import '../tree/style'
+import '../icon/style'
+import '../input/style'
+import './style.scss'

package/src/components/tree-select/tree-select.vue

@@ -0,0 +1,198 @@
+<template>
+  <u-dropdown
+    v-if="!readonly"
+    :class="[cls.b, bem.is('disabled', disabled)]"
+    trigger="click"
+    :content-class="[cls.e('panel'), cls.em('panel', size), contentClass]"
+    :content-style="contentStyle"
+    ref="dropdownRef"
+    :min-width="minWidth"
+    :width="width"
+    :disabled="disabled"
+    @update:visible="handleDropdownVisible"
+  >
+    <template #trigger>
+      <u-input
+        :size="size"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :clearable="clearable"
+        :model-value="text ?? (model ? label : undefined)"
+        @clear="handleClear"
+        native-readonly
+      >
+        <template #prefix v-if="$slots.prefix">
+          <slot name="prefix" />
+        </template>
+        <template #suffix>
+          <u-icon :class="cls.e('arrow')"><ArrowDown /></u-icon>
+        </template>
+      </u-input>
+    </template>
+    <template #content>
+      <!-- 过滤器 -->
+      <div v-if="filterable" :class="[cls.e('content-filter'), cls.m(size)]">
+        <u-input placeholder="输入关键字进行过滤" v-model="qs">
+          <template #suffix>
+            <u-icon><Search /></u-icon>
+          </template>
+        </u-input>
+      </div>
+      <!-- 菜单列表 -->
+
+      <u-tree
+        v-bind="treeProps"
+        :selected="model"
+        @update:selected="handleSelect"
+        ref="treeRef"
+        selectable
+        :class="cls.e('content-tree')"
+        :slots="slots"
+        scroll-to-view
+      />
+    </template>
+  </u-dropdown>
+
+  <template v-else>
+    {{ text || label || FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { dfs, o } from '@cat-kit/core'
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { ArrowDown, Search } from '@veltra/icons/normal'
+import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { computed, nextTick, shallowRef, watch } from 'vue'
+
+import type { TreeSelectProps, TreeSelectEmits, TreeExposed } from '../../types'
+import { UDropdown } from '../dropdown'
+import { UIcon } from '../icon'
+import { UInput } from '../input'
+import { UTree } from '../tree'
+import type { TreeSlotsScope } from '../tree/di'
+
+defineOptions({ name: 'TreeSelect' })
+
+const props = withDefaults(defineProps<TreeSelectProps>(), {
+  labelKey: 'label',
+  valueKey: 'value',
+  placeholder: '请选择',
+  expandAll: false,
+  clearable: true,
+  disabled: undefined,
+  readonly: undefined,
+  filterable: false,
+  minWidth: '280px'
+})
+
+const emit = defineEmits<TreeSelectEmits>()
+
+const slots = defineSlots<{
+  /** 默认插槽 */
+  default?: (props: TreeSlotsScope) => any
+  /** 前缀插槽 */
+  prefix?: () => any
+}>()
+
+const treeProps = computed(() => {
+  return o(props as Record<string, any>).omit([
+    'tips',
+    'field',
+    'placeholder',
+    'disabled',
+    'label',
+    'readonly',
+    'contentClass',
+    'contentStyle',
+    'minWidth',
+    'width'
+  ])
+})
+
+const cls = bem('tree-select')
+
+/**过滤 */
+const qs = shallowRef('')
+watch(qs, (qs) => {
+  treeRef.value?.filter(qs)
+})
+
+const model = defineModel<string | number>()
+
+const label = shallowRef<string>()
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
+
+const treeRef = shallowRef<TreeExposed>()
+
+const dropdownRef = shallowRef<InstanceType<typeof UDropdown>>()
+
+/**清空 */
+const handleClear = () => {
+  model.value = ''
+  label.value = undefined
+  emit('clear')
+  emit('change', '', undefined)
+  emit('update:text', '')
+}
+
+let changedByEvent = false
+watch(
+  [() => props.data, model],
+  ([data, model]) => {
+    if (changedByEvent) return
+    if (!data?.length || model === undefined) {
+      label.value = undefined
+      model = undefined
+      return
+    }
+
+    let founded = false
+    const childrenKey = props.childrenKey ?? 'children'
+    data.some((item) => {
+      dfs(
+        item,
+        (v) => {
+          if (v[props.valueKey] === model) {
+            label.value = v[props.labelKey]
+            founded = true
+            return true
+          }
+        },
+        childrenKey
+      )
+
+      return founded
+    })
+  },
+  { immediate: true }
+)
+
+const handleSelect = (selected?: string | number, selectedData?: Record<string, any>) => {
+  changedByEvent = true
+  nextTick(() => {
+    changedByEvent = false
+  })
+
+  model.value = selected ?? ''
+
+  if (selectedData) {
+    label.value = o(selectedData).get(props.labelKey)
+  } else {
+    label.value = ''
+  }
+
+  emit('change', selected, selectedData)
+  emit('update:text', label.value)
+  dropdownRef.value?.close()
+}
+
+const handleDropdownVisible = (visible: boolean) => {
+  if (!visible) {
+    qs.value = ''
+  }
+}
+</script>

package/src/components/watermark/base64.ts

@@ -0,0 +1,40 @@
+function isImageUrl(url: string): boolean {
+  // 使用正则表达式检查URL格式
+  const urlRegex = /^https?:\/\//
+  return urlRegex.test(url)
+}
+
+async function fetchImageAsBase64(url: string): Promise<string> {
+  const response = await fetch(url)
+  const blob = await response.blob()
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onloadend = () => resolve(reader.result as string)
+    reader.onerror = reject
+    reader.readAsDataURL(blob)
+  })
+}
+
+async function readFileAsBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onloadend = () => resolve(reader.result as string)
+    reader.onerror = reject
+    reader.readAsDataURL(file)
+  })
+}
+
+export async function downloadFileByBase64(urlOrFile: string | File): Promise<string> {
+  let base64Data: string
+  if (isImageUrl(urlOrFile as string)) {
+    // 网络图片转base64
+    base64Data = await fetchImageAsBase64(urlOrFile as string)
+  } else if (urlOrFile instanceof File) {
+    // 本地文件转base64
+    base64Data = await readFileAsBase64(urlOrFile)
+  } else {
+    throw new Error('Invalid input. Expected either a URL or a File object.')
+  }
+
+  return base64Data
+}

package/src/components/watermark/index.ts

@@ -0,0 +1 @@
+export { default as UWatermark } from './watermark.vue'

package/src/components/watermark/style.scss

@@ -0,0 +1,15 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: watermark;
+
+@include m.b($root-name) {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+}