@veltra/desktop 1.0.0

package/src/components/expression-editor/components/variable-picker.vue

@@ -0,0 +1,301 @@
+<template>
+  <u-tip
+    hide-arrow
+    alignment="start"
+    direction="bottom"
+    :trigger-dom="triggerDom"
+    :visible="visible"
+    @update:visible="updateVisible($event)"
+  >
+    <template #content>
+      <!-- 搜索框 -->
+      <div v-if="filterable" :class="cls.e('filter')">
+        <u-input
+          placeholder="输入关键字进行过滤"
+          v-model="searchQuery"
+          :size="'small'"
+          clearable
+          @input="handleSearch"
+        >
+          <template #suffix>
+            <u-icon><Search /></u-icon>
+          </template>
+        </u-input>
+      </div>
+
+      <!-- 面包屑导航 -->
+      <div v-if="breadcrumbs.length > 1 && !searchQuery" :class="cls.e('breadcrumbs')">
+        <span v-for="(crumb, index) in breadcrumbs" :key="index" :class="cls.e('breadcrumb-item')">
+          <span
+            :class="[
+              cls.e('breadcrumb-link'),
+              { [cls.e('breadcrumb-link--active')]: index === breadcrumbs.length - 1 }
+            ]"
+            @click="navigateToBreadcrumb(index)"
+          >
+            {{ crumb.label }}
+          </span>
+          <u-icon v-if="index < breadcrumbs.length - 1" :class="cls.e('breadcrumb-separator')">
+            <ArrowRight />
+          </u-icon>
+        </span>
+      </div>
+
+      <!-- 单面板 -->
+      <div :class="cls.e('panel')" v-if="currentList.length">
+        <u-scroll tag="ul" :class="cls.e('panel-list')" :content-class="cls.e('panel-content')">
+          <li
+            v-for="(item, idx) in currentList"
+            :key="item.value ?? idx"
+            :class="getItemCls(item, idx)"
+            @click="handleItemClick(item)"
+            @mouseenter="activeIndex = idx"
+          >
+            <span :class="cls.e('item-label')">
+              {{ item.label }}
+            </span>
+            <u-icon v-if="item.children?.length" :class="cls.e('item-expand')">
+              <ArrowRight />
+            </u-icon>
+          </li>
+        </u-scroll>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-else :class="cls.e('empty')">
+        <UEmpty description="暂无可用变量" />
+      </div>
+    </template>
+  </u-tip>
+</template>
+
+<script lang="ts" setup>
+import { ArrowRight, Search } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { inject, ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+
+import type { VariableItem } from '../../../types'
+import { UEmpty } from '../../empty'
+import { UIcon } from '../../icon'
+import { UInput } from '../../input'
+import { UScroll } from '../../scroll'
+import { UTip } from '../../tip'
+import { ExpressionEditorDIKey } from '../di'
+
+defineOptions({
+  name: 'VariablePicker'
+})
+
+const props = defineProps<{
+  visible: boolean
+  triggerDom?: HTMLElement
+  filterable?: boolean
+  registerPickerKeyHandler?: (handler: ((e: KeyboardEvent) => void) | null) => void
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', variable: VariableItem): void
+  (e: 'update:visible', visible: boolean): void
+}>()
+
+const { cls, editorProps, variableMap } = inject(ExpressionEditorDIKey)!
+
+const searchQuery = ref('')
+const activeIndex = ref<number>(-1)
+const navigationPath = ref<VariableItem[]>([]) // 当前导航路径
+
+// 扁平化变量树，用于搜索
+function flattenVariables(
+  items: VariableItem[] | undefined,
+  parentPath: VariableItem[] = []
+): VariableItem[] {
+  if (!items) return []
+  const result: VariableItem[] = []
+
+  for (const item of items) {
+    const currentPath = [...parentPath, item]
+    // 如果是叶子节点，添加到结果中
+    if (!item.children || item.children.length === 0) {
+      result.push({
+        ...item,
+        label: currentPath.map((p) => p.label).join(' / ')
+      })
+    } else {
+      // 递归处理子节点
+      result.push(...flattenVariables(item.children, currentPath))
+    }
+  }
+
+  return result
+}
+
+// 过滤后的变量列表
+const filteredVariables = computed(() => {
+  const { variables } = editorProps
+  if (!variables || variables.length === 0) return []
+
+  if (!searchQuery.value.trim()) {
+    return variables
+  }
+
+  // 搜索模式：扁平化并过滤
+  const flat = flattenVariables(variables)
+  const query = searchQuery.value.toLowerCase()
+  return flat.filter((item) => item.label.toLowerCase().includes(query))
+})
+
+// 当前显示的列表（单面板）
+const currentList = computed(() => {
+  if (searchQuery.value.trim()) {
+    // 搜索模式：显示过滤后的扁平列表
+    return filteredVariables.value
+  } else {
+    // 正常模式：根据导航路径显示当前层级
+    let current: VariableItem[] = filteredVariables.value
+    for (const pathItem of navigationPath.value) {
+      const found = current.find((item) => item.value === pathItem.value)
+      if (found?.children) {
+        current = found.children
+      } else {
+        break
+      }
+    }
+    return current
+  }
+})
+
+// 面包屑导航
+const breadcrumbs = computed(() => {
+  return [{ label: '全部变量', value: '' }, ...navigationPath.value]
+})
+
+function getItemCls(item: VariableItem, index: number): string[] {
+  const isActive = activeIndex.value === index
+  const isLeaf = !item.children || item.children.length === 0
+
+  return [cls.e('item'), bem.is('active', isActive), bem.is('leaf', isLeaf)]
+}
+
+function handleItemClick(item: VariableItem) {
+  // 如果有子节点，导航到下一级
+  if (item.children && item.children.length > 0) {
+    navigationPath.value.push(item)
+    activeIndex.value = -1
+    return
+  }
+
+  // 叶子节点：选择并关闭
+  const fullItem = variableMap.value.get(item.value)
+  if (fullItem) {
+    emit('select', fullItem)
+  } else {
+    emit('select', item)
+  }
+  updateVisible(false)
+}
+
+// 面包屑导航
+function navigateToBreadcrumb(index: number) {
+  if (index === 0) {
+    // 点击"全部变量"，返回根级
+    navigationPath.value = []
+  } else {
+    // 导航到指定层级
+    navigationPath.value = navigationPath.value.slice(0, index)
+  }
+  activeIndex.value = -1
+}
+
+function handleSearch() {
+  // 搜索时重置导航路径
+  navigationPath.value = []
+  activeIndex.value = -1
+}
+
+function updateVisible(visible: boolean) {
+  emit('update:visible', visible)
+  if (!visible) {
+    // 关闭时重置状态
+    navigationPath.value = []
+    searchQuery.value = ''
+    activeIndex.value = -1
+  }
+}
+
+// 处理键盘事件
+function handleKeydown(e: KeyboardEvent) {
+  if (!props.visible) return
+
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    updateVisible(false)
+    return
+  }
+
+  if (currentList.value.length === 0) return
+
+  // 初始化 activeIndex
+  if (activeIndex.value === -1 && currentList.value.length > 0) {
+    activeIndex.value = 0
+  }
+
+  const currentItem = currentList.value[activeIndex.value]
+
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    activeIndex.value = Math.min(currentList.value.length - 1, activeIndex.value + 1)
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    activeIndex.value = Math.max(0, activeIndex.value - 1)
+  } else if (e.key === ' ' || e.key === 'Spacebar') {
+    // 空格键：导航到下一级（仅对有子项的项有效）
+    e.preventDefault()
+    if (currentItem?.children && currentItem.children.length > 0) {
+      handleItemClick(currentItem)
+    }
+  } else if (e.key === 'ArrowRight') {
+    // 右箭头：导航到下一级（仅对有子项的项有效）
+    e.preventDefault()
+    if (currentItem?.children && currentItem.children.length > 0) {
+      handleItemClick(currentItem)
+    }
+  } else if (e.key === 'ArrowLeft' || e.key === 'Backspace') {
+    // 左箭头/退格：返回上一级
+    e.preventDefault()
+    if (navigationPath.value.length > 0) {
+      navigationPath.value.pop()
+      activeIndex.value = 0
+    }
+  } else if (e.key === 'Enter') {
+    // 回车键：确定选择（仅对最末级项有效）
+    e.preventDefault()
+    if (currentItem) {
+      if (!currentItem.children || currentItem.children.length === 0) {
+        // 只有叶子节点才能选择
+        handleItemClick(currentItem)
+      }
+    }
+  }
+}
+
+// 监听键盘事件
+watch(
+  () => props.visible,
+  (v) => {
+    if (v) {
+      document.addEventListener('keydown', handleKeydown)
+    } else {
+      document.removeEventListener('keydown', handleKeydown)
+    }
+  }
+)
+
+onMounted(() => {
+  props.registerPickerKeyHandler?.(handleKeydown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handleKeydown)
+  props.registerPickerKeyHandler?.(null)
+})
+</script>

package/src/components/expression-editor/constants.ts

@@ -0,0 +1,6 @@
+export const CONTEXT_TRIGGER_CHAR = '@'
+
+export const EXPRESSION_VARIABLE_DRAG_TYPE = 'application/x-ultra-expression-variable'
+export const EXPRESSION_VARIABLE_DRAG_MARKER_ATTR = 'data-ultra-expression-variable-node'
+export const EXPRESSION_VARIABLE_DRAG_KEY_ATTR = 'data-ultra-expression-variable-key'
+export const EXPRESSION_DROP_SCOPE_ATTR = 'data-ultra-expression-drop-scope'

package/src/components/expression-editor/di.ts

@@ -0,0 +1,43 @@
+import type { BEM } from '@veltra/utils'
+import type { LexicalEditor } from 'lexical'
+import type { InjectionKey, ComputedRef } from 'vue'
+
+import type { ExpressionEditorProps, VariableItem } from '../../types'
+
+/**
+ * 扁平化变量树，创建 value -> VariableItem 的映射
+ * @param variables 变量列表（支持树形结构）
+ * @returns value -> VariableItem 的映射表
+ */
+export function createVariableMap(variables?: VariableItem[]): Map<string, VariableItem> {
+  const map = new Map<string, VariableItem>()
+
+  function traverse(items: VariableItem[] | undefined, parentPath: string[] = []) {
+    if (!items) return
+
+    for (const item of items) {
+      const currentPath = [...parentPath, item.label]
+      map.set(item.value, item)
+
+      if (item.children) {
+        traverse(item.children, currentPath)
+      }
+    }
+  }
+
+  traverse(variables)
+  return map
+}
+
+export const ExpressionEditorDIKey: InjectionKey<{
+  /** 组件的 BEM 类名 */
+  cls: BEM<'expression-editor'>
+  /** 组件的 props */
+  editorProps: ExpressionEditorProps
+  /** 编辑器实例 */
+  editor: LexicalEditor
+  /** 更新变量节点 */
+  updateVariableNode: (oldValue: string, newValue: string, newLabel?: string) => void
+  /** 变量映射表 (value -> VariableItem) */
+  variableMap: ComputedRef<Map<string, VariableItem>>
+}> = Symbol('ExpressionEditorDIKey')

package/src/components/expression-editor/expression-editor.vue

@@ -0,0 +1,211 @@
+<template>
+  <div :class="className">
+    <!-- 编辑容器 -->
+    <div
+      :class="cls.e('container')"
+      ref="container"
+      :contenteditable="!readonly && !disabled"
+    ></div>
+
+    <div v-if="showFallbackControls" :class="cls.e('fallback')">
+      <div
+        v-for="(item, index) in fallbackVariables"
+        :key="item.key"
+        :class="cls.e('fallback-item')"
+      >
+        <span :class="cls.e('fallback-label')">
+          {{ item.label || item.variable }}
+        </span>
+        <div :class="cls.e('fallback-actions')">
+          <button
+            type="button"
+            :class="cls.e('fallback-button')"
+            :disabled="disabled || readonly || index === 0"
+            @click="moveVariable(item.key, -1)"
+          >
+            上移
+          </button>
+          <button
+            type="button"
+            :class="cls.e('fallback-button')"
+            :disabled="disabled || readonly || index === fallbackVariables.length - 1"
+            @click="moveVariable(item.key, 1)"
+          >
+            下移
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div :class="cls.e('placeholder')" v-if="showPlaceholder">
+      {{ placeholder }}
+    </div>
+
+    <!-- 渲染装饰器节点，内部通过Vue的Teleport组件渲染至节点中 -->
+    <Decorators :decorators="decorators" />
+
+    <!-- 变量选择器 -->
+    <VariablePicker
+      v-model:visible="contextVisible"
+      :trigger-dom="contextTriggerDom"
+      :filterable="true"
+      :register-picker-key-handler="registerPickerKeyHandler"
+      @select="handleVariableSelect"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { $getRoot } from 'lexical'
+import { useTemplateRef, provide, computed, onBeforeUnmount, shallowRef, type VNode } from 'vue'
+
+import type { ExpressionEditorProps, VariableItem } from '../../types'
+import VariablePicker from './components/variable-picker.vue'
+import { ExpressionEditorDIKey, createVariableMap } from './di'
+import { createExpressionEditorRuntime } from './internal/editor-runtime'
+import { moveVariableByDirection } from './internal/features/drag-drop/drag-drop-service'
+import { insertVariableAtTrigger } from './internal/features/insertion/insertion-service'
+import { $isVariableNode } from './nodes/variable-node'
+import { registerPlainText } from './plain-text'
+import { useContext } from './use-context'
+import { useDecorators } from './use-decorators'
+import { collectVariableNodeDescriptors, supportsNativeDnD } from './use-expression-drag-drop'
+
+defineOptions({
+  name: 'ExpressionEditor'
+})
+
+const props = withDefaults(defineProps<ExpressionEditorProps>(), {
+  placeholder: '请输入表达式，输入 @ 可插入变量'
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const showPlaceholder = computed(() => !props.modelValue || props.modelValue.trim() === '')
+
+const cls = bem('expression-editor')
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
+
+const className = computed(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('disabled', disabled.value),
+    bem.is('readonly', readonly.value)
+  ]
+})
+
+const containerRef = useTemplateRef('container')
+
+const { editor } = createExpressionEditorRuntime({
+  disabled,
+  readonly,
+  cls,
+  container: containerRef,
+  props,
+  emit
+})
+
+const {
+  contextVisible,
+  contextTriggerDom,
+  textNode,
+  charPosition,
+  registerPickerKeyHandler,
+  registerContextCommands
+} = useContext(editor)
+
+registerPlainText(editor, {
+  getContextCommands: registerContextCommands
+})
+
+const decorators = useDecorators(editor)
+const nativeDnDSupported = supportsNativeDnD()
+const fallbackVariables = shallowRef(collectVariableNodeDescriptors(editor))
+const showFallbackControls = computed(
+  () => !nativeDnDSupported && fallbackVariables.value.length > 1
+)
+
+const removeFallbackSync = editor.registerUpdateListener(() => {
+  fallbackVariables.value = collectVariableNodeDescriptors(editor)
+})
+
+onBeforeUnmount(() => {
+  removeFallbackSync()
+})
+
+// 创建变量映射表
+const variableMap = computed(() => createVariableMap(props.variables))
+
+function Decorators(props: { decorators: VNode[] }) {
+  return props.decorators
+}
+
+function moveVariable(variableKey: string, direction: -1 | 1) {
+  if (disabled.value || readonly.value) return
+
+  moveVariableByDirection(editor, variableKey, direction, true)
+}
+
+// 处理变量选择
+function handleVariableSelect(variable: VariableItem) {
+  if (disabled.value || readonly.value) return
+
+  const nodeKey = textNode.value?.getKey()
+  if (!nodeKey) return
+
+  insertVariableAtTrigger(editor, {
+    nodeKey,
+    charPosition: charPosition.value,
+    variable: {
+      value: variable.value,
+      label: variable.label,
+      type: variable.type
+    }
+  })
+}
+
+// 更新变量节点的函数
+function updateVariableNode(oldValue: string, newValue: string, newLabel?: string) {
+  editor.update(() => {
+    const root = $getRoot()
+
+    // 如果没有提供 label 或 type，从映射表中查找
+    const variable = variableMap.value.get(newValue)
+    const label = newLabel ?? variable?.label ?? newValue
+    const type = variable?.type
+
+    // 递归遍历所有节点
+    function traverse(node: any) {
+      if ($isVariableNode(node)) {
+        if (node.getVariable() === oldValue) {
+          node.updateVariable(newValue, label, type)
+        }
+      }
+
+      // 如果节点有 getChildren 方法，继续遍历
+      if (typeof node.getChildren === 'function') {
+        const children = node.getChildren()
+        children.forEach((child: any) => traverse(child))
+      }
+    }
+
+    traverse(root)
+  })
+}
+
+provide(ExpressionEditorDIKey, {
+  cls,
+  editorProps: props,
+  editor,
+  updateVariableNode,
+  variableMap
+})
+</script>

package/src/components/expression-editor/index.ts

@@ -0,0 +1 @@
+export { default as UExpressionEditor } from './expression-editor.vue'

package/src/components/expression-editor/internal/contracts/editor-runtime.ts

@@ -0,0 +1,11 @@
+import type { LexicalEditor } from 'lexical'
+
+export interface EditorMutationGateway {
+  runUpdate(updater: () => void): void
+}
+
+export interface ExpressionEditorRuntime {
+  editor: LexicalEditor
+  mutations: EditorMutationGateway
+  syncFromModelValue(): void
+}

package/src/components/expression-editor/internal/editor-runtime/create-runtime.ts

@@ -0,0 +1,64 @@
+import type { BEM } from '@veltra/utils'
+import { createEditor } from 'lexical'
+import { watchEffect, computed, type Ref, type ShallowRef } from 'vue'
+
+import type { ExpressionEditorEmits, ExpressionEditorProps } from '../../../../types'
+import { createVariableMap } from '../../di'
+import { VariableNode } from '../../nodes/variable-node'
+import type { EditorMutationGateway, ExpressionEditorRuntime } from '../contracts/editor-runtime'
+import { createModelSync } from './model-sync'
+
+export interface CreateExpressionEditorRuntimeOptions {
+  disabled: Ref<boolean>
+  readonly: Ref<boolean>
+  props: ExpressionEditorProps
+  cls: BEM<'expression-editor'>
+  emit: ExpressionEditorEmits
+  container: ShallowRef<HTMLElement | null>
+}
+
+function createDefaultMutationGateway(
+  editor: ExpressionEditorRuntime['editor']
+): EditorMutationGateway {
+  return {
+    runUpdate(updater) {
+      editor.update(() => {
+        updater()
+      })
+    }
+  }
+}
+
+function resolveEditable(disabled: Ref<boolean>, readonly: Ref<boolean>) {
+  return !disabled.value && !readonly.value
+}
+
+export function createExpressionEditorRuntime(
+  options: CreateExpressionEditorRuntimeOptions
+): ExpressionEditorRuntime {
+  const { disabled, readonly, container, props, emit, cls } = options
+  const editor = createEditor({
+    namespace: 'ExpressionEditor',
+    nodes: [VariableNode],
+    onError: console.error,
+    editable: resolveEditable(disabled, readonly),
+    theme: { paragraph: cls.e('paragraph') }
+  })
+
+  watchEffect(() => {
+    editor.setEditable(resolveEditable(disabled, readonly))
+  })
+
+  watchEffect(() => {
+    container.value && editor.setRootElement(container.value)
+  })
+
+  const variableMap = computed(() => createVariableMap(props.variables))
+  const sync = createModelSync({ editor, props, emit, variableMap })
+
+  return {
+    editor,
+    mutations: createDefaultMutationGateway(editor),
+    syncFromModelValue: sync.syncFromModelValue
+  }
+}

package/src/components/expression-editor/internal/editor-runtime/index.ts

@@ -0,0 +1 @@
+export { createExpressionEditorRuntime } from './create-runtime'