@veltra/desktop 1.2.27 → 1.2.29

package/dist/types/code-editor.d.ts

@@ -1,12 +1,13 @@
 import { DeconstructValue, FormComponentProps } from "@veltra/utils";
 
 //#region src/types/code-editor.d.ts
-type CodeEditorLang = 'js' | 'sql' | 'java' | 'json';
+type CodeEditorLang = 'js' | 'sql' | 'java' | 'json' | 'spel';
 /** 代码编辑器组件属性（不支持 `size`） */
 interface CodeEditorProps extends Omit<FormComponentProps, 'size'> {
   modelValue?: string;
   /**
-   * 可选语言列表。长度大于 1 时在编辑器右上角显示内置语言选择器
+   * 可选语言列表。长度大于 1 时在编辑器右上角显示内置语言选择器；
+   * 仅一种语言时显示语言名称标签
    */
   langs?: CodeEditorLang[];
   /** 当前语言，配合 `v-model:lang` 使用 */

package/dist/types/grid-input.d.ts

@@ -1,23 +1,30 @@
 import { DeconstructValue } from "@veltra/utils";
 
 //#region src/types/grid-input.d.ts
-/** 密码输入框组件组件属性 */
+/** 网格输入框组件属性 */
 interface GridInputProps {
   modelValue?: string;
+  /** 格子数量 */
   length?: number;
-  zero?: false;
+  /**
+   * 是否允许输入 0
+   * @description 验证码场景通常开启；组织编码结构等场景关闭（如 3-3-2）
+   * @default false
+   */
+  zero?: boolean;
+  /** 格子之间的分隔符 */
   separator?: string;
 }
-/** 密码输入框组件组件定义的事件 */
+/** 网格输入框组件定义的事件 */
 interface GridInputEmits {
   (e: 'update:modelValue', value: string): void;
   (e: 'input', value: string): void;
 }
-/** 密码输入框组件组件暴露的属性和方法(组件内部使用) */
+/** 网格输入框组件暴露的属性和方法(组件内部使用) */
 interface _GridInputExposed {
   clear: () => void;
 }
-/** 密码输入框组件组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+/** 网格输入框组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
 type GridInputExposed = DeconstructValue<_GridInputExposed>;
 //#endregion
 export { GridInputEmits, GridInputExposed, GridInputProps, _GridInputExposed };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.2.27",
+  "version": "1.2.29",
   "files": [
     "dist",
     "src"
@@ -57,11 +57,11 @@
     "@cat-kit/core": ">=1.1.8",
     "@cat-kit/excel": ">=1.0.0",
     "@cat-kit/fe": "^1.1.8",
-    "@veltra/compositions": "1.2.27",
-    "@veltra/directives": "1.2.27",
-    "@veltra/icons": "1.2.27",
-    "@veltra/styles": "1.2.27",
-    "@veltra/utils": "1.2.27",
+    "@veltra/compositions": "1.2.29",
+    "@veltra/directives": "1.2.29",
+    "@veltra/icons": "1.2.29",
+    "@veltra/styles": "1.2.29",
+    "@veltra/utils": "1.2.29",
     "vue": ">=3.5.39"
   },
   "devDependencies": {

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

@@ -11,6 +11,7 @@
       :clearable="false"
       :disabled="disabled"
     />
+    <span v-else-if="langLabel" :class="cls.e('lang-label')">{{ langLabel }}</span>
   </u-scroll>
 </template>
 
@@ -89,6 +90,11 @@ const langOptions = computed(() =>
 /** 实际生效的语言：优先 lang model，否则回落 langs[0] */
 const activeLang = computed<CodeEditorLang | undefined>(() => lang.value ?? langs.value[0])
 
+/** 仅一种语言时，在选择器位置展示名称 */
+const langLabel = computed(() =>
+  langs.value.length === 1 && activeLang.value ? activeLang.value.toUpperCase() : undefined
+)
+
 const shellConfig = computed<ShellConfig>(() => ({
   prefix: props.prefix ?? '',
   suffix: props.suffix ?? ''

package/src/components/code-editor/lang-loaders.ts

@@ -7,7 +7,8 @@ const LANG_LOADERS: Record<CodeEditorLang, () => Promise<Extension>> = {
   js: () => import('@codemirror/lang-javascript').then((m) => m.javascript({ typescript: true })),
   sql: () => import('@codemirror/lang-sql').then((m) => m.sql()),
   java: () => import('@codemirror/lang-java').then((m) => m.java()),
-  json: () => import('@codemirror/lang-json').then((m) => m.json())
+  json: () => import('@codemirror/lang-json').then((m) => m.json()),
+  spel: () => import('./langs/spel').then((m) => m.spel())
 }
 
 /** 按需加载语言扩展；模块缓存由运行时保证，重复切换同一语言不会重复下载 */

package/src/components/code-editor/langs/spel/completion.ts

@@ -0,0 +1,30 @@
+import { completeFromList, type Completion } from '@codemirror/autocomplete'
+
+/** SpEL 关键字与常用内置标识补全 */
+const SPEL_COMPLETIONS: Completion[] = [
+  // 字面量
+  { label: 'true', type: 'constant' },
+  { label: 'false', type: 'constant' },
+  { label: 'null', type: 'constant' },
+  // 关键字 / 运算符词
+  { label: 'and', type: 'keyword' },
+  { label: 'or', type: 'keyword' },
+  { label: 'not', type: 'keyword' },
+  { label: 'eq', type: 'keyword' },
+  { label: 'ne', type: 'keyword' },
+  { label: 'lt', type: 'keyword' },
+  { label: 'le', type: 'keyword' },
+  { label: 'gt', type: 'keyword' },
+  { label: 'ge', type: 'keyword' },
+  { label: 'matches', type: 'keyword' },
+  { label: 'between', type: 'keyword' },
+  { label: 'instanceof', type: 'keyword' },
+  { label: 'new', type: 'keyword' },
+  // 类型引用与上下文变量
+  { label: 'T', type: 'type', detail: 'T(Type)', info: '类型引用' },
+  { label: '#this', type: 'variable', detail: '当前上下文' },
+  { label: '#root', type: 'variable', detail: '根对象' }
+]
+
+/** 基于关键字列表的补全源 */
+export const spelCompletion = completeFromList(SPEL_COMPLETIONS)

package/src/components/code-editor/langs/spel/index.ts

@@ -0,0 +1,12 @@
+import { LanguageSupport } from '@codemirror/language'
+
+import { spelCompletion } from './completion'
+import { spelLanguage } from './language'
+
+/** SpEL（Spring Expression Language）语言支持：语法高亮 + 基础补全 */
+export function spel(): LanguageSupport {
+  return new LanguageSupport(spelLanguage, [spelLanguage.data.of({ autocomplete: spelCompletion })])
+}
+
+export { spelLanguage } from './language'
+export { spelCompletion } from './completion'

package/src/components/code-editor/langs/spel/language.ts

@@ -0,0 +1,198 @@
+import { StreamLanguage, type StringStream } from '@codemirror/language'
+
+/** 词法状态：跟踪 T(...) 类型引用与属性访问 */
+interface SpelState {
+  /** T(...) 内括号深度，>0 表示处于类型名上下文 */
+  typeDepth: number
+  /** 刚消费完 `.`，下一标识符按属性名着色 */
+  afterDot: boolean
+  /** 刚消费完类型引用关键字 `T`，下一 `(` 进入类型上下文 */
+  afterT: boolean
+}
+
+const KEYWORDS = new Set([
+  'new',
+  'instanceof',
+  'matches',
+  'between',
+  'and',
+  'or',
+  'not',
+  'eq',
+  'ne',
+  'lt',
+  'le',
+  'gt',
+  'ge'
+])
+
+const BOOL_LITERALS = new Set(['true', 'false'])
+
+/** 多字符运算符，按长度优先匹配 */
+const OPERATORS = ['?.', '?:', '?[', '![', '==', '!=', '<=', '>=', '&&', '||', '++', '--']
+
+function isIdentStart(ch: string): boolean {
+  return /[A-Za-z_]/.test(ch)
+}
+
+function isIdentChar(ch: string): boolean {
+  return /[A-Za-z0-9_]/.test(ch)
+}
+
+function tokenString(stream: StringStream, quote: string): string {
+  let escaped = false
+  while (!stream.eol()) {
+    const next = stream.next()
+    if (next === quote && !escaped) break
+    escaped = !escaped && next === '\\'
+  }
+  return 'string'
+}
+
+function tokenNumber(stream: StringStream): string {
+  stream.match(/^\d+(\.\d+)?([eE][+-]?\d+)?/)
+  return 'number'
+}
+
+function tokenIdentifier(stream: StringStream, state: SpelState): string {
+  stream.eatWhile(isIdentChar)
+  const word = stream.current()
+  state.afterT = false
+
+  if (state.typeDepth > 0) {
+    state.afterDot = false
+    return 'typeName'
+  }
+
+  if (state.afterDot) {
+    state.afterDot = false
+    return 'propertyName'
+  }
+
+  if (BOOL_LITERALS.has(word)) return 'bool'
+  if (word === 'null') return 'null'
+  if (KEYWORDS.has(word)) return 'keyword'
+
+  // T(...) 类型引用
+  if (word === 'T' && stream.peek() === '(') {
+    state.afterT = true
+    return 'typeName'
+  }
+
+  return 'name'
+}
+
+function tokenSpel(stream: StringStream, state: SpelState): string | null {
+  if (stream.eatSpace()) return null
+
+  const ch = stream.peek()
+  if (!ch) return null
+
+  // 字符串
+  if (ch === "'" || ch === '"') {
+    stream.next()
+    state.afterDot = false
+    state.afterT = false
+    return tokenString(stream, ch)
+  }
+
+  // 数字
+  if (/\d/.test(ch)) {
+    state.afterDot = false
+    state.afterT = false
+    return tokenNumber(stream)
+  }
+
+  // #变量 / #this / #root
+  if (ch === '#') {
+    stream.next()
+    state.afterDot = false
+    state.afterT = false
+    const peek = stream.peek()
+    if (peek && isIdentStart(peek)) {
+      stream.eatWhile(isIdentChar)
+      return 'variableName'
+    }
+    return 'operator'
+  }
+
+  // 多字符运算符
+  for (const op of OPERATORS) {
+    if (stream.match(op)) {
+      state.afterDot = false
+      state.afterT = false
+      return 'operator'
+    }
+  }
+
+  // 单字符运算符
+  if ('+-*/%^!=<>&|?:'.includes(ch)) {
+    stream.next()
+    state.afterDot = false
+    state.afterT = false
+    return 'operator'
+  }
+
+  if (ch === '(') {
+    stream.next()
+    state.afterDot = false
+    if (state.afterT || state.typeDepth > 0) {
+      state.typeDepth++
+      state.afterT = false
+    }
+    return 'paren'
+  }
+
+  if (ch === ')') {
+    stream.next()
+    state.afterDot = false
+    state.afterT = false
+    if (state.typeDepth > 0) state.typeDepth--
+    return 'paren'
+  }
+
+  if (ch === '[' || ch === ']') {
+    stream.next()
+    state.afterDot = false
+    state.afterT = false
+    return 'paren'
+  }
+
+  if (ch === '{' || ch === '}') {
+    stream.next()
+    state.afterDot = false
+    state.afterT = false
+    return 'brace'
+  }
+
+  if (ch === ',') {
+    stream.next()
+    state.afterDot = false
+    state.afterT = false
+    return 'punctuation'
+  }
+
+  if (ch === '.') {
+    stream.next()
+    state.afterDot = true
+    state.afterT = false
+    return 'punctuation'
+  }
+
+  if (isIdentStart(ch)) {
+    return tokenIdentifier(stream, state)
+  }
+
+  stream.next()
+  state.afterDot = false
+  state.afterT = false
+  return 'punctuation'
+}
+
+/** SpEL StreamLanguage */
+export const spelLanguage = StreamLanguage.define<SpelState>({
+  name: 'spel',
+  startState: () => ({ typeDepth: 0, afterDot: false, afterT: false }),
+  token: tokenSpel,
+  languageData: { closeBrackets: { brackets: ['(', '[', '{', "'", '"'] } }
+})

package/src/components/code-editor/style.scss

@@ -45,6 +45,18 @@ $root-name: code-editor;
     }
   }
 
+  @include m.e(lang-label) {
+    position: absolute;
+    top: 2px;
+    right: 8px;
+    z-index: 2;
+    font-size: 12px;
+    line-height: 24px;
+    color: var(--u-code-editor-gutter-fg);
+    pointer-events: none;
+    user-select: none;
+  }
+
   .cm-editor {
     background: transparent;
     color: var(--u-code-editor-fg);

package/src/components/grid-input/grid-input.vue

@@ -10,7 +10,7 @@
       ref="items"
       :class="[cls.e('item'), bem.is('focus', index === position && !blur)]"
     >
-      <span :class="cls.em('item', 'text')" v-if="valueArray[index]">
+      <span :class="cls.em('item', 'text')" v-if="index < valueArray.length">
         {{ valueArray[index] }}
       </span>
 
@@ -40,7 +40,7 @@ const { size } = useFallbackProps([props], { size: 'default' })
 
 const cls = bem('grid-input')
 
-const _numberReg = computed(() => (props.zero ? /^[0-9]$/ : /^[1-9]$/))
+const numberReg = computed(() => (props.zero ? /^[0-9]$/ : /^[1-9]$/))
 
 const valueArray = ref<string[]>([])
 
@@ -50,6 +50,12 @@ const blur = ref<boolean>(false)
 
 const instance = getCurrentInstance()
 
+const emitValue = () => {
+  const value = valueArray.value.join(props.separator)
+  emit('input', value)
+  emit('update:modelValue', value)
+}
+
 const focus = async (index?: number) => {
   if (index === undefined) {
     focus(position.value)
@@ -67,9 +73,8 @@ const focus = async (index?: number) => {
 
 const changeValue = (value: string, index: number) => {
   if (position.value === props.length) return
-  const currentValue = valueArray.value[index]
 
-  if (currentValue) {
+  if (index < valueArray.value.length) {
     valueArray.value.splice(index, 1, value)
   } else if (index === valueArray.value.length) {
     valueArray.value.push(value)
@@ -79,12 +84,12 @@ const changeValue = (value: string, index: number) => {
   position.value++
   focus()
 
-  emit('input', valueArray.value.filter((v) => v).join(props.separator))
+  emitValue()
 }
 
-const baseOperation = {
-  Backspace: (value: string, index: number) => {
-    if (value) {
+const baseOperation: Record<string, (value: string, index: number) => void> = {
+  Backspace: (_value: string, index: number) => {
+    if (index < valueArray.value.length) {
       valueArray.value.splice(index, 1)
     } else if (index - 1 >= 0) {
       valueArray.value.splice(index - 1, 1)
@@ -92,30 +97,29 @@ const baseOperation = {
     if (index !== 0) {
       focus(index - 1)
     }
-    emit('input', valueArray.value.filter((v) => v).join(props.separator))
+    emitValue()
   },
-  ArrowLeft: (value: string, index: number) => {
+  ArrowLeft: (_value: string, index: number) => {
     if (index === 0) return
     focus(index - 1)
   },
-  ArrowRight: (value: string, index: number) => {
+  ArrowRight: (_value: string, index: number) => {
     if (index === valueArray.value.length) return
     focus(index + 1)
   }
 }
 
-const onKeydown = (e: any, value: string, index: number) => {
-  if (_numberReg.value.test(e.key)) {
+const onKeydown = (e: KeyboardEvent, value: string, index: number) => {
+  if (numberReg.value.test(e.key)) {
     changeValue(e.key, index)
     return
   }
-  baseOperation[e.key](value, index)
+  baseOperation[e.key]?.(value, index)
 }
 
 const clear = () => {
-  while (valueArray.value.length) {
-    valueArray.value.pop()
-  }
+  valueArray.value = []
+  position.value = -1
 }
 
 defineExpose<GridInputExposed>({ clear })

package/src/types/code-editor.ts

@@ -1,12 +1,13 @@
 import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
 
-export type CodeEditorLang = 'js' | 'sql' | 'java' | 'json'
+export type CodeEditorLang = 'js' | 'sql' | 'java' | 'json' | 'spel'
 
 /** 代码编辑器组件属性（不支持 `size`） */
 export interface CodeEditorProps extends Omit<FormComponentProps, 'size'> {
   modelValue?: string
   /**
-   * 可选语言列表。长度大于 1 时在编辑器右上角显示内置语言选择器
+   * 可选语言列表。长度大于 1 时在编辑器右上角显示内置语言选择器；
+   * 仅一种语言时显示语言名称标签
    */
   langs?: CodeEditorLang[]
   /** 当前语言，配合 `v-model:lang` 使用 */

package/src/types/grid-input.ts

@@ -1,23 +1,30 @@
 import type { DeconstructValue } from '@veltra/utils'
 
-/** 密码输入框组件组件属性 */
+/** 网格输入框组件属性 */
 export interface GridInputProps {
   modelValue?: string
+  /** 格子数量 */
   length?: number
-  zero?: false
+  /**
+   * 是否允许输入 0
+   * @description 验证码场景通常开启；组织编码结构等场景关闭（如 3-3-2）
+   * @default false
+   */
+  zero?: boolean
+  /** 格子之间的分隔符 */
   separator?: string
 }
 
-/** 密码输入框组件组件定义的事件 */
+/** 网格输入框组件定义的事件 */
 export interface GridInputEmits {
   (e: 'update:modelValue', value: string): void
   (e: 'input', value: string): void
 }
 
-/** 密码输入框组件组件暴露的属性和方法(组件内部使用) */
+/** 网格输入框组件暴露的属性和方法(组件内部使用) */
 export interface _GridInputExposed {
   clear: () => void
 }
 
-/** 密码输入框组件组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+/** 网格输入框组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
 export type GridInputExposed = DeconstructValue<_GridInputExposed>