@veltra/desktop 1.0.0

package/src/components/dropdown/dropdown.vue

@@ -0,0 +1,186 @@
+<template>
+  <UNodeRender :content="renderTriggerNode()" ref="trigger" />
+
+  <Teleport :to="`#${popperContainerId}`">
+    <component
+      v-if="dropdownVisible"
+      ref="contentRef"
+      :is="contentTag"
+      :class="dropdownContentClass"
+      :style="[{ zIndex: zIndex() }, contentStyle]"
+      @mouseenter="eventsHandlers.onMouseenter"
+      @mouseleave="eventsHandlers.onMouseleave"
+      @keydown="emit('keydown', $event)"
+      v-click-outside="trigger === 'click' ? handleClickOutside : undefined"
+    >
+      <slot name="content" />
+    </component>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useModel, usePop, useTransition } from '@veltra/compositions'
+import { vClickOutside } from '@veltra/directives'
+import { bem, extractNormalVNodes, setStyles, zIndex } from '@veltra/utils'
+import { shallowRef, computed, createVNode, cloneVNode, useTemplateRef, useAttrs } from 'vue'
+
+import type { DropdownProps, DropdownExposed, DropdownEmits } from '../../types'
+import { UNodeRender } from '../node-render'
+import { useNest } from '../tip/use-nest'
+
+defineOptions({ name: 'Dropdown', inheritAttrs: false })
+
+const props = withDefaults(defineProps<DropdownProps>(), { trigger: 'hover', contentTag: 'div' })
+
+const emit = defineEmits<DropdownEmits>()
+
+const slots = defineSlots<{
+  /** 内容 */
+  content?: () => any
+  /** 触发器 */
+  trigger?: () => any
+}>()
+
+const cls = bem('dropdown')
+
+const dropdownContentClass = computed(() => {
+  let fixed = [cls.e('content')]
+  const className = props.contentClass
+  if (!className) return fixed
+  if (!Array.isArray(className)) {
+    return [...fixed, className]
+  }
+  return [...fixed, ...className]
+})
+
+const triggerRef = useTemplateRef('trigger')
+const customTriggerRef = shallowRef<HTMLElement>()
+const contentRef = shallowRef<HTMLElement>()
+
+const triggerDom = computed(() => {
+  return customTriggerRef.value || triggerRef.value?.$el
+})
+
+/**显示隐藏 */
+const visible = useModel({ defaultValue: false, propName: 'visible', props, emit })
+
+const dropdownVisible = useNest(visible)
+
+let closeTimer: number | undefined
+
+const attrs = useAttrs()
+function renderTriggerNode() {
+  const slotsNode = slots.trigger?.()
+  if (!slotsNode) return null
+  const nodes = extractNormalVNodes(slotsNode)
+  const props = { class: cls.b, ...attrs, ...eventsHandlers.value }
+  if (nodes.length === 1) return cloneVNode(nodes[0]!, props)
+
+  return createVNode('div', props, nodes)
+}
+
+function stopClose() {
+  closeTimer !== undefined && clearTimeout(closeTimer)
+}
+
+/** 打开下拉框 */
+function open(config?: { trigger?: HTMLElement }) {
+  stopClose()
+  const { trigger } = config || {}
+  if (trigger && trigger instanceof HTMLElement) {
+    customTriggerRef.value = trigger
+  }
+
+  visible.value = true
+}
+
+function close() {
+  if (props.trigger === 'hover') {
+    // 给200毫秒重新浮动的缓冲时间
+    closeTimer = setTimeout(() => {
+      transition.leave()
+    }, 200)
+  } else {
+    transition.leave()
+  }
+}
+
+/** 点击外部 */
+function handleClickOutside(e: MouseEvent) {
+  const { trigger } = props
+  // 当下拉框为点击时触发时，点击触发元素时不关闭
+  // 其他任何时候点击外部都关闭下拉器
+  if (trigger === 'click' && triggerDom.value.contains(e.target as Node)) {
+    return
+  }
+  close()
+}
+
+const transitionName = shallowRef('slide-down')
+
+const { update, popperContainerId } = usePop({
+  triggerRef: triggerDom,
+  contentRef,
+  direction: 'bottom',
+  alignment: 'start',
+  onPop(position) {
+    transitionName.value = position.placement.includes('top') ? 'slide-up' : 'slide-down'
+
+    transition.enter()
+  },
+
+  onTriggerPositionChange() {
+    close()
+  },
+
+  onBeforeUpdate(triggerEl, contentEl) {
+    setStyles(contentEl, {
+      width: props.width ?? `${triggerEl.offsetWidth}px`,
+      minWidth: props.minWidth
+    })
+  }
+})
+
+const transition = useTransition('css', {
+  name: transitionName,
+  target: contentRef,
+  afterLeave() {
+    visible.value = false
+  },
+
+  leaveCanceled() {
+    visible.value = false
+  }
+})
+
+function triggerClick() {
+  if (visible.value) {
+    close()
+  } else {
+    open()
+  }
+}
+
+const eventsHandlers = computed(() => {
+  const { trigger, disabled } = props
+
+  const handlers: Record<string, Function> = {}
+  if (disabled || trigger === 'custom') return handlers
+
+  if (trigger === 'click') {
+    handlers.onClick = triggerClick
+  } else if (trigger === 'hover') {
+    handlers.onMouseenter = open
+    handlers.onMouseleave = close
+  }
+
+  return handlers
+})
+
+defineExpose<DropdownExposed>({
+  open,
+  close,
+  /**暴露出更新dropdown内容位置方法 适用与级联选择器组件 */
+  updateDropdown: update
+})
+</script>

package/src/components/dropdown/index.ts

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

package/src/components/dropdown/style.scss

@@ -0,0 +1,18 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: dropdown;
+
+@include m.b($root-name) {
+  @include m.e(content) {
+    position: absolute;
+    background-color: fn.use-var(bg-color, top);
+    border: fn.use-var(border);
+    border-radius: fn.use-var(radius, default);
+    box-shadow: fn.use-var(shadow);
+    top: 0;
+    left: 0;
+  }
+}

package/src/components/dropdown/style.ts

@@ -0,0 +1,2 @@
+import '@veltra/styles/anime/slide.scss'
+import './style.scss'

package/src/components/empty/empty.vue

@@ -0,0 +1,25 @@
+<template>
+  <span :class="cls.b">
+    <u-icon :size="size"> <Empty /> </u-icon>
+    <div>{{ text }}</div>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { Empty } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+
+import type { EmptyProps } from '../../types'
+import { UIcon } from '../icon'
+
+defineOptions({
+  name: 'Empty'
+})
+
+withDefaults(defineProps<EmptyProps>(), {
+  size: 48,
+  text: '暂无数据'
+})
+
+const cls = bem('empty')
+</script>

package/src/components/empty/index.ts

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

package/src/components/empty/style.scss

@@ -0,0 +1,13 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: empty;
+
+@include m.b($root-name) {
+  color: fn.use-var(text-color, assist);
+  text-align: center;
+  display: inline-block;
+  user-select: none;
+}

package/src/components/empty/style.ts

@@ -0,0 +1,2 @@
+import '../icon/style'
+import './style.scss'

package/src/components/expression-editor/__test__/architecture-boundaries.test.ts

@@ -0,0 +1,103 @@
+/**
+ * ARCH-01: Capability boundary and key wiring regression gate.
+ * Verifies sync/insertion/drag-drop/rendering have independent entry points
+ * and runtime -> command packs -> mutation services wiring is intact.
+ * Failure maps to roadmap acceptance criteria.
+ */
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../tag', () => ({ UTag: () => null }))
+import { createEditor } from 'lexical'
+import { ref, shallowRef } from 'vue'
+
+import type { ExpressionEditorRuntime } from '../internal/contracts/editor-runtime'
+import { createExpressionEditorRuntime } from '../internal/editor-runtime'
+import { registerCommandPacks } from '../internal/features/commands/register-command-packs'
+import {
+  moveVariableByDirection,
+  reorderVariable
+} from '../internal/features/drag-drop/drag-drop-service'
+import { insertVariableAtTrigger } from '../internal/features/insertion/insertion-service'
+import { VariableNode } from '../nodes/variable-node'
+
+describe('ARCH-01: sync boundary', () => {
+  it('createExpressionEditorRuntime returns runtime with editor, mutations, syncFromModelValue', () => {
+    const container = shallowRef<HTMLElement | null>(null)
+    const props = { modelValue: '', variables: [] }
+    const emit = () => {}
+    const cls = { b: 'expression-editor', e: (s: string) => `expression-editor__${s}` } as const
+
+    const runtime = createExpressionEditorRuntime({
+      disabled: ref(false),
+      readonly: ref(false),
+      props,
+      cls,
+      emit,
+      container
+    })
+
+    expect(runtime).toHaveProperty('editor')
+    expect(runtime).toHaveProperty('mutations')
+    expect(runtime).toHaveProperty('syncFromModelValue')
+    expect(typeof runtime.syncFromModelValue).toBe('function')
+    expect(runtime.mutations).toHaveProperty('runUpdate')
+    expect(typeof runtime.mutations.runUpdate).toBe('function')
+  })
+
+  it('EditorMutationGateway.runUpdate executes updater inside editor.update', () => {
+    const container = shallowRef<HTMLElement | null>(null)
+    const props = { modelValue: '', variables: [] }
+    const emit = () => {}
+    const cls = { b: 'expression-editor', e: (s: string) => `expression-editor__${s}` } as const
+
+    const runtime = createExpressionEditorRuntime({
+      disabled: ref(false),
+      readonly: ref(false),
+      props,
+      cls,
+      emit,
+      container
+    }) as ExpressionEditorRuntime
+
+    let executed = false
+    runtime.mutations.runUpdate(() => {
+      executed = true
+    })
+    expect(executed).toBe(true)
+  })
+})
+
+describe('ARCH-01: insertion boundary', () => {
+  it('insertVariableAtTrigger is callable and returns boolean', () => {
+    const editor = createEditor({ namespace: 'Test', nodes: [VariableNode], onError: () => {} })
+    const result = insertVariableAtTrigger(editor, {
+      nodeKey: 'nonexistent',
+      charPosition: 0,
+      variable: { value: 'x', label: 'X' }
+    })
+    expect(typeof result).toBe('boolean')
+  })
+})
+
+describe('ARCH-01: drag-drop boundary', () => {
+  it('reorderVariable is callable and returns boolean', () => {
+    const editor = createEditor({ namespace: 'Test', nodes: [VariableNode], onError: () => {} })
+    const result = reorderVariable(editor, { payloadText: null, scopeId: 'test', targetSlot: 0 })
+    expect(typeof result).toBe('boolean')
+  })
+
+  it('moveVariableByDirection is callable and returns boolean', () => {
+    const editor = createEditor({ namespace: 'Test', nodes: [VariableNode], onError: () => {} })
+    const result = moveVariableByDirection(editor, 'nonexistent-key', -1, false)
+    expect(typeof result).toBe('boolean')
+  })
+})
+
+describe('ARCH-01: command packs boundary', () => {
+  it('registerCommandPacks returns cleanup function', () => {
+    const editor = createEditor({ namespace: 'Test', nodes: [VariableNode], onError: () => {} })
+    const cleanup = registerCommandPacks(editor)
+    expect(typeof cleanup).toBe('function')
+    cleanup()
+  })
+})

package/src/components/expression-editor/__test__/architecture-compatibility.test.ts

@@ -0,0 +1,52 @@
+/**
+ * ARCH-02: Public API compatibility gate.
+ * Locks export surface, props, and emits so future changes cannot break consumers.
+ * Failure here maps directly to roadmap acceptance criteria.
+ */
+import { describe, expect, it, vi } from 'vitest'
+
+import type { ExpressionEditorEmits, ExpressionEditorProps, VariableItem } from '../../../types'
+
+vi.mock('../expression-editor.vue', () => ({ default: { name: 'ExpressionEditor' } }))
+
+import { UExpressionEditor } from '../index'
+
+describe('ARCH-02: UExpressionEditor public API compatibility', () => {
+  it('UExpressionEditor is importable and is a Vue component', () => {
+    expect(UExpressionEditor).toBeDefined()
+    expect(typeof UExpressionEditor).toBe('object')
+    expect(UExpressionEditor).toHaveProperty('name', 'ExpressionEditor')
+  })
+
+  it('ExpressionEditorProps has required keys: modelValue, placeholder, variables', () => {
+    const requiredKeys: (keyof ExpressionEditorProps)[] = ['modelValue', 'placeholder', 'variables']
+    const props: ExpressionEditorProps = { modelValue: '', placeholder: 'test', variables: [] }
+    for (const key of requiredKeys) {
+      expect(key in props || typeof (props as Record<string, unknown>)[key] !== 'undefined').toBe(
+        true
+      )
+    }
+  })
+
+  it('ExpressionEditorProps modelValue accepts string', () => {
+    const props: ExpressionEditorProps = { modelValue: 'hello{foo}' }
+    expect(props.modelValue).toBe('hello{foo}')
+  })
+
+  it('ExpressionEditorProps variables accepts VariableItem[]', () => {
+    const items: VariableItem[] = [
+      { label: 'Foo', value: 'foo' },
+      { label: 'Bar', value: 'bar', type: 'string' }
+    ]
+    const props: ExpressionEditorProps = { variables: items }
+    expect(props.variables).toEqual(items)
+  })
+
+  it('update:modelValue emit signature: (e, value: string) => void', () => {
+    const emit: ExpressionEditorEmits = (e: 'update:modelValue', value: string) => {
+      expect(e).toBe('update:modelValue')
+      expect(typeof value).toBe('string')
+    }
+    emit('update:modelValue', 'new value')
+  })
+})

package/src/components/expression-editor/__test__/drag-drop.test.ts

@@ -0,0 +1,171 @@
+import { $createParagraphNode, $getRoot, createEditor, type LexicalEditor } from 'lexical'
+import { vi } from 'vitest'
+
+import { VariableNode } from '../nodes/variable-node'
+
+vi.mock('../../tag', () => ({ UTag: () => null }))
+
+import { parseContent } from '../parser'
+import {
+  applyDropReorder,
+  collectVariableNodeDescriptors,
+  createInternalDragPayload,
+  moveVariableByDirection,
+  reorderVariableNode
+} from '../use-expression-drag-drop'
+
+function createTestEditor(content: string): LexicalEditor {
+  const editor = createEditor({
+    namespace: 'ExpressionEditorDragDropTest',
+    nodes: [VariableNode],
+    onError: () => {}
+  })
+
+  editor.update(
+    () => {
+      const root = $getRoot()
+      root.clear()
+      const paragraph = $createParagraphNode()
+      paragraph.append(...parseContent(content))
+      root.append(paragraph)
+    },
+    { discrete: true }
+  )
+
+  return editor
+}
+
+function getEditorText(editor: LexicalEditor): string {
+  let text = ''
+  editor.getEditorState().read(() => {
+    text = $getRoot().getTextContent()
+  })
+  return text
+}
+
+function stripVariableTokens(content: string): string {
+  return content.replace(/\{[^}]+\}/g, '')
+}
+
+function getVariableOrder(editor: LexicalEditor): string[] {
+  return collectVariableNodeDescriptors(editor).map((item) => item.variable)
+}
+
+function getVariableKey(editor: LexicalEditor, variable: string): string {
+  const descriptor = collectVariableNodeDescriptors(editor).find(
+    (item) => item.variable === variable
+  )
+  if (!descriptor) {
+    throw new Error(`Cannot find variable: ${variable}`)
+  }
+  return descriptor.key
+}
+
+describe('expression drag drop (ARCH-01 drag-drop boundary)', () => {
+  it('reorders variable sequence correctly', () => {
+    const editor = createTestEditor('A {first} + {second} + {third}')
+    const secondKey = getVariableKey(editor, 'second')
+
+    let moved = false
+    editor.update(
+      () => {
+        moved = reorderVariableNode(secondKey, 0, false)
+      },
+      { discrete: true }
+    )
+
+    expect(moved).toBe(true)
+    expect(getVariableOrder(editor)).toEqual(['second', 'first', 'third'])
+  })
+
+  it('keeps plain text and whitespace unchanged while reordering variables', () => {
+    const editor = createTestEditor('left  {alpha}\t+\n{beta} right')
+    const before = getEditorText(editor)
+    const betaKey = getVariableKey(editor, 'beta')
+
+    editor.update(
+      () => {
+        reorderVariableNode(betaKey, 0, false)
+      },
+      { discrete: true }
+    )
+
+    const after = getEditorText(editor)
+    expect(stripVariableTokens(after)).toBe(stripVariableTokens(before))
+    expect(getVariableOrder(editor)).toEqual(['beta', 'alpha'])
+  })
+
+  it('ignores invalid or external payload without changing content', () => {
+    const editor = createTestEditor('x {foo} y {bar}')
+    const initial = getEditorText(editor)
+
+    let moved = true
+    editor.update(
+      () => {
+        moved = applyDropReorder({
+          payloadText: '{"action":"move-variable","scopeId":"scope-a"}',
+          scopeId: 'scope-a',
+          targetSlot: 0,
+          focusMovedNode: false
+        })
+      },
+      { discrete: true }
+    )
+
+    expect(moved).toBe(false)
+    expect(getEditorText(editor)).toBe(initial)
+  })
+
+  it('returns false when moveVariableByDirection is called with non-existent key (refactor behavior)', () => {
+    const editor = createTestEditor('{a} {b}')
+    let moved = false
+    editor.update(
+      () => {
+        moved = moveVariableByDirection('non-existent-key', -1, false)
+      },
+      { discrete: true }
+    )
+    expect(moved).toBe(false)
+    expect(getVariableOrder(editor)).toEqual(['a', 'b'])
+  })
+
+  it('uses the same reorder behavior for fallback move and drop payload', () => {
+    const input = 'start {a} middle {b} end {c}'
+    const fallbackEditor = createTestEditor(input)
+    const dropEditor = createTestEditor(input)
+
+    const fallbackKey = getVariableKey(fallbackEditor, 'b')
+    const dropKey = getVariableKey(dropEditor, 'b')
+
+    let fallbackMoved = false
+    fallbackEditor.update(
+      () => {
+        fallbackMoved = moveVariableByDirection(fallbackKey, -1, false)
+      },
+      { discrete: true }
+    )
+
+    let dropMoved = false
+    dropEditor.update(
+      () => {
+        const payload = createInternalDragPayload({
+          action: 'move-variable',
+          sourceKey: dropKey,
+          scopeId: 'scope-04-test'
+        })
+        dropMoved = applyDropReorder({
+          payloadText: payload,
+          scopeId: 'scope-04-test',
+          targetSlot: 0,
+          focusMovedNode: false
+        })
+      },
+      { discrete: true }
+    )
+
+    expect(fallbackMoved).toBe(true)
+    expect(dropMoved).toBe(true)
+    expect(getEditorText(dropEditor)).toBe(getEditorText(fallbackEditor))
+    expect(getVariableOrder(dropEditor)).toEqual(getVariableOrder(fallbackEditor))
+  })
+})

package/src/components/expression-editor/__test__/parser.test.ts

@@ -0,0 +1,62 @@
+import { createEditor } from 'lexical'
+import type { LexicalNode } from 'lexical'
+import { vi } from 'vitest'
+
+import { VariableNode } from '../nodes/variable-node'
+
+vi.mock('../../tag', () => ({ UTag: () => null }))
+
+import { parseContent } from '../parser'
+
+function serializeNodes(nodes: LexicalNode[]): string {
+  return nodes.map((n) => n.getTextContent()).join('')
+}
+
+function parseAndSerialize(content: string): string {
+  const editor = createEditor({ namespace: 'Test', nodes: [VariableNode], onError: () => {} })
+  let serialized = ''
+  editor.update(
+    () => {
+      const nodes = parseContent(content)
+      serialized = serializeNodes(nodes)
+    },
+    { discrete: true }
+  )
+  return serialized
+}
+
+describe('parseContent (ARCH-01 parse boundary)', () => {
+  it('round-trips hello{foo}world (trailing text preserved)', () => {
+    const input = 'hello{foo}world'
+    expect(parseAndSerialize(input)).toBe(input)
+  })
+
+  it('round-trips {a} (single variable)', () => {
+    const input = '{a}'
+    expect(parseAndSerialize(input)).toBe(input)
+  })
+
+  it('round-trips hello (no variables)', () => {
+    const input = 'hello'
+    expect(parseAndSerialize(input)).toBe(input)
+  })
+
+  it('round-trips {a}{b} (adjacent variables)', () => {
+    const input = '{a}{b}'
+    expect(parseAndSerialize(input)).toBe(input)
+  })
+
+  it('round-trips prefix{a}suffix', () => {
+    const input = 'prefix{a}suffix'
+    expect(parseAndSerialize(input)).toBe(input)
+  })
+
+  it('round-trips empty string (refactor behavior consistency)', () => {
+    expect(parseAndSerialize('')).toBe('')
+  })
+
+  it('preserves text with unclosed brace as plain text (no variable match)', () => {
+    const input = 'hello{unclosed'
+    expect(parseAndSerialize(input)).toBe(input)
+  })
+})