@veltra/desktop 1.2.28 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.2.28",
+  "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.28",
-    "@veltra/directives": "1.2.28",
-    "@veltra/icons": "1.2.28",
-    "@veltra/styles": "1.2.28",
-    "@veltra/utils": "1.2.28",
+    "@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/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` 使用 */