@veltra/desktop 1.0.13 → 1.0.15

package/src/components/batch-edit/use-edit.ts

@@ -50,6 +50,8 @@ export interface EditReturned {
   handleSave: () => Promise<void>
   handleClose: () => void
   handleCreate: () => void
+  handleEdit: (row: TableRow) => void
+  handleCopy: (row: TableRow) => void
   handleDelete: (row: TableRow) => Promise<void>
   handleInsertToNext: (row: TableRow) => void
   handleInsertToPrev: (row: TableRow) => void
@@ -79,8 +81,17 @@ export function useEdit(options: Options): EditReturned {
     }
   )
 
-  /** 是否是用户输入产生的值变更 */
-  let changedByUserInput = true
+  /**
+   * 「打开行 / 切换 type」时记录的基线快照
+   * @description
+   * 用于 changeCb 内部比对 — 若新值与基线相等（深比较）视为无改动，避免某些组件在 mount
+   * 阶段把规范化后的值再写回模型时被误判为「用户已修改」
+   */
+  let baselineSnapshot: Record<string, any> | undefined
+
+  function snapshotModelData() {
+    return safeRun(() => JSON.parse(JSON.stringify(props.model?.data ?? {})), {})
+  }
 
   watch(
     () => state.row,
@@ -89,22 +100,40 @@ export function useEdit(options: Options): EditReturned {
       if (row) {
         state.type = 'update'
         state.visible = true
-        changedByUserInput = false
         props.model?.setData(row.data)
-        nextTick(() => {
-          changedByUserInput = true
-        })
       } else {
         state.visible = false
       }
-    }
+      baselineSnapshot = snapshotModelData()
+      state.dataUpdated = false
+    },
+    // sync 保证 setData 完成后立刻取快照，避免 mount 期间组件回写值时丢基线
+    { flush: 'sync' }
   )
 
-  const changeCb = (_field: string, _val: any) => {
-    // 检测到为用户变更时，为数据添加一个已更改状态从而显示修改按钮
-    if (changedByUserInput) {
-      state.dataUpdated = true
+  const changeCb = (field: string, val: any) => {
+    // 与基线比较 — 同值（如组件 mount 时把当前值再写一次）不算"用户修改"
+    if (baselineSnapshot) {
+      const baseVal = o(baselineSnapshot).get(field)
+      if (isSameValue(baseVal, val)) {
+        return
+      }
+    }
+    state.dataUpdated = true
+  }
+
+  function isSameValue(a: any, b: any) {
+    if (a === b) return true
+    if (a == null && b == null) return true
+    if (typeof a !== typeof b) return false
+    if (typeof a === 'object') {
+      try {
+        return JSON.stringify(a) === JSON.stringify(b)
+      } catch {
+        return false
+      }
     }
+    return false
   }
 
   watch(
@@ -216,6 +245,22 @@ export function useEdit(options: Options): EditReturned {
     })
   }
 
+  /** 编辑指定行（等同于点击行） */
+  function handleEdit(row: TableRow) {
+    state.row = row
+    state.depth = row.depth
+  }
+
+  /** 复制指定行：在其下方以 create 模式打开表单，并预填副本数据 */
+  function handleCopy(row: TableRow) {
+    runCreate(() => {
+      state.depth = row.depth
+      insertIndexes.value = [...row.indexes.slice(0, -1), row.index + 1]
+      const cloned = safeRun(() => JSON.parse(JSON.stringify(row.data ?? {})), {})
+      props.model?.setData(cloned)
+    })
+  }
+
   function runWithLoading<Arg extends any[]>(fn: (...args: Arg) => Promise<void> | void) {
     return async (...args: Arg) => {
       state.loading = true
@@ -321,6 +366,8 @@ export function useEdit(options: Options): EditReturned {
     handleInsertToNext,
     handleInsertToPrev,
     handleCreate,
+    handleEdit,
+    handleCopy,
     handleClose,
     handleSave
   }

package/src/components/cascade/cascade.vue

@@ -255,7 +255,9 @@ const qs = shallowRef<string>('')
 watch([qs, forest], ([qs, forest]) => {
   const { filterable } = props
   if (!filterable || !qs) {
-    forest.dfs((node) => (node.visible = true))
+    forest.dfs((node) => {
+      node.visible = true
+    })
     getPanelItemList(forest.roots)
     return
   }

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

@@ -1,24 +1,35 @@
 <template>
-  <u-scroll :class="className" @keyup.enter.stop>
+  <u-scroll :class="className" :style="rootStyle" @keyup.enter.stop>
     <div ref="container"></div>
   </u-scroll>
 </template>
 
 <script lang="ts" setup>
-import { EditorState } from '@codemirror/state'
+import { Compartment, EditorState, type Extension } from '@codemirror/state'
 import { oneDark } from '@codemirror/theme-one-dark'
-import { tooltips } from '@codemirror/view'
+import { ViewPlugin, tooltips, type ViewUpdate } from '@codemirror/view'
 import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
 import { bem, zIndex } from '@veltra/utils'
 import { EditorView, basicSetup } from 'codemirror'
-import { computed, onBeforeUnmount, shallowRef, useTemplateRef, watch } from 'vue'
+import {
+  computed,
+  onBeforeUnmount,
+  shallowRef,
+  useTemplateRef,
+  watch,
+  type CSSProperties
+} from 'vue'
 
 import type { CodeEditorLang, CodeEditorProps } from '../../types'
 import { UScroll } from '../scroll'
 
+defineOptions({ name: 'CodeEditor' })
+
 const props = withDefaults(defineProps<CodeEditorProps>(), {
   disabled: undefined,
-  readonly: undefined
+  readonly: undefined,
+  dark: false,
+  defaultLines: 8
 })
 
 const model = defineModel<string>()
@@ -27,101 +38,225 @@ const cls = bem('code-editor')
 
 const { formProps } = useFormComponent()
 
-const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
-
-const className = computed<string[]>(() => {
-  return [
-    cls.b,
-    cls.m(size.value),
-    bem.is('disabled', disabled.value),
-    bem.is('readonly', readonly.value)
-  ]
+const { disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  disabled: false,
+  readonly: false
 })
 
-const containerRef = useTemplateRef('container')
+const className = computed<string[]>(() => [
+  cls.b,
+  bem.is('disabled', disabled.value),
+  bem.is('readonly', readonly.value),
+  bem.is('dark', props.dark)
+])
 
+const rootStyle = computed<CSSProperties>(() => ({
+  '--u-code-editor-default-lines': Math.max(1, props.defaultLines)
+}))
+
+const containerRef = useTemplateRef('container')
 const editor = shallowRef<EditorView | null>(null)
 
-const langLoaders: Record<CodeEditorLang, () => Promise<any>> = {
+const langLoaders: 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())
 }
 
-async function renderEditor() {
-  if (!containerRef.value) return
-  editor.value?.destroy()
+const themeCompartment = new Compartment()
+const editableCompartment = new Compartment()
+const readOnlyCompartment = new Compartment()
+const langCompartment = new Compartment()
 
-  const { language } = props
+let phantomGutter: HTMLElement | null = null
+let phantomContainer: HTMLElement | null = null
+let lastPhantomKey = ''
 
-  const extensions = [
-    basicSetup,
-    oneDark,
-    tooltips({
-      parent: document.body
-    }),
-    EditorView.theme({
-      '.cm-tooltip': {
-        zIndex: zIndex()
-      }
-    })
-  ]
+function resetPhantomCache() {
+  phantomGutter = null
+  phantomContainer = null
+  lastPhantomKey = ''
+}
+
+/**
+ * 在 .cm-lineNumbers 末尾追加占位行号 DOM，使可视行号数量补齐到 defaultLines。
+ * CodeMirror 的 lineNumbers() 仅为真实文档行渲染行号，超出部分由本逻辑补全。
+ */
+function syncPhantomLineNumbers() {
+  const view = editor.value
+  if (!view) return
 
-  if (disabled.value) {
-    extensions.push(EditorView.editable.of(false))
+  if (!phantomGutter || !phantomGutter.isConnected) {
+    phantomGutter = view.dom.querySelector<HTMLElement>('.cm-gutter.cm-lineNumbers')
   }
-  if (readonly.value) {
-    extensions.push(EditorState.readOnly.of(true))
+  if (!phantomGutter) return
+
+  if (!phantomContainer) {
+    phantomContainer = document.createElement('div')
+    phantomContainer.className = 'cm-phantom-lines'
+  }
+  if (
+    phantomContainer.parentElement !== phantomGutter ||
+    phantomContainer !== phantomGutter.lastElementChild
+  ) {
+    phantomGutter.appendChild(phantomContainer)
   }
-  if (language) {
-    const lang = await langLoaders[language]()
 
-    extensions.push(lang)
+  const realLines = view.state.doc.lines
+  const target = Math.max(0, Math.max(1, props.defaultLines) - realLines)
+  const lineHeight = view.defaultLineHeight
+
+  const key = `${realLines}|${target}|${lineHeight}`
+  if (key === lastPhantomKey) return
+  lastPhantomKey = key
+
+  while (phantomContainer.children.length > target) {
+    phantomContainer.lastElementChild!.remove()
+  }
+  while (phantomContainer.children.length < target) {
+    const el = document.createElement('div')
+    el.className = 'cm-gutterElement cm-gutterElement-phantom'
+    phantomContainer.appendChild(el)
   }
+  for (let i = 0; i < target; i++) {
+    const el = phantomContainer.children[i] as HTMLElement
+    const num = String(realLines + i + 1)
+    if (el.textContent !== num) el.textContent = num
+    if (lineHeight && el.style.height !== `${lineHeight}px`) {
+      el.style.height = `${lineHeight}px`
+    }
+  }
+}
 
-  editor.value = new EditorView({
-    doc: model.value,
-    extensions,
-    parent: containerRef.value,
+const phantomLineNumbersPlugin = ViewPlugin.fromClass(
+  class {
+    update(update: ViewUpdate) {
+      if (update.docChanged || update.geometryChanged) {
+        syncPhantomLineNumbers()
+      }
+    }
+  }
+)
+
+function buildExtensions(): Extension[] {
+  return [
+    basicSetup,
+    tooltips({ parent: document.body }),
+    EditorView.theme({
+      '.cm-tooltip': { zIndex: zIndex() }
+    }),
+    themeCompartment.of(props.dark ? oneDark : []),
+    editableCompartment.of(EditorView.editable.of(!disabled.value)),
+    readOnlyCompartment.of(EditorState.readOnly.of(readonly.value)),
+    langCompartment.of([]),
+    phantomLineNumbersPlugin
+  ]
+}
 
+let editorToken = 0
+let langToken = 0
+
+async function applyLanguage() {
+  const view = editor.value
+  if (!view) return
+  const myToken = ++langToken
+  const { language } = props
+  const ext = language ? await langLoaders[language]() : []
+  if (myToken !== langToken || editor.value !== view) return
+  view.dispatch({ effects: langCompartment.reconfigure(ext) })
+}
+
+function destroyEditor() {
+  ++editorToken
+  ++langToken
+  editor.value?.destroy()
+  editor.value = null
+  resetPhantomCache()
+}
+
+function createEditor() {
+  destroyEditor()
+  const myToken = ++editorToken
+  const parent = containerRef.value
+  if (!parent) return
+
+  const view = new EditorView({
+    doc: model.value,
+    extensions: buildExtensions(),
+    parent,
     dispatch(tr) {
-      editor.value?.update([tr])
-      if (tr.changes.empty || !tr.docChanged) {
-        return
+      view.update([tr])
+      if (tr.docChanged) {
+        model.value = tr.state.doc.toString()
       }
-      model.value = tr.state.doc.toString()
     }
   })
+
+  if (myToken !== editorToken) {
+    view.destroy()
+    return
+  }
+
+  editor.value = view
+  syncPhantomLineNumbers()
+  applyLanguage()
 }
 
-watch([containerRef, () => props.language, disabled, readonly], renderEditor)
+watch(
+  containerRef,
+  (el) => {
+    if (el) createEditor()
+    else destroyEditor()
+  },
+  { immediate: true, flush: 'post' }
+)
+
+watch(() => props.language, applyLanguage)
+
+watch(
+  () => props.dark,
+  (dark) => {
+    editor.value?.dispatch({
+      effects: themeCompartment.reconfigure(dark ? oneDark : [])
+    })
+  }
+)
+
+watch(disabled, (v) => {
+  editor.value?.dispatch({
+    effects: editableCompartment.reconfigure(EditorView.editable.of(!v))
+  })
+})
+
+watch(readonly, (v) => {
+  editor.value?.dispatch({
+    effects: readOnlyCompartment.reconfigure(EditorState.readOnly.of(v))
+  })
+})
+
+watch(() => props.defaultLines, syncPhantomLineNumbers)
 
 watch(
   [() => props.modelValue, editor],
   ([v, e]) => {
     if (!e) return
+    if (e.composing) return
+    const next = v ?? ''
+    if (e.state.doc.toString() === next) return
 
-    if (e.composing || e.state.doc.toJSON().join('\n') === v) {
-      return
-    }
-    const isSelectionOutOfRange = !e?.state.selection.ranges.every(
-      (range) => range.anchor < (v?.length ?? 0) && range.head < (v?.length ?? 0)
+    const valueLength = next.length
+    const inRange = e.state.selection.ranges.every(
+      (range) => range.anchor <= valueLength && range.head <= valueLength
     )
-    e?.dispatch({
-      changes: {
-        from: 0,
-        to: e?.state.doc.length,
-        insert: v
-      },
-      selection: isSelectionOutOfRange ? { anchor: 0, head: 0 } : e?.state.selection,
+    e.dispatch({
+      changes: { from: 0, to: e.state.doc.length, insert: next },
+      selection: inRange ? e.state.selection : { anchor: 0, head: 0 },
       scrollIntoView: true
     })
   },
   { immediate: true }
 )
 
-onBeforeUnmount(() => {
-  editor.value?.destroy()
-})
+onBeforeUnmount(destroyEditor)
 </script>

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

@@ -2,32 +2,130 @@
 @use 'pkg:@veltra/styles/functions' as fn;
 @use 'pkg:@veltra/styles/vars';
 
-// 方便拼接
 $root-name: code-editor;
 
 @include m.b($root-name) {
-  max-height: 300px;
+  --u-code-editor-default-lines: 8;
+  --u-code-editor-line-height: 1.6;
+  --u-code-editor-font-size: 13px;
+  --u-code-editor-padding-block: 6px;
+  --u-code-editor-bg: #{fn.use-var(bg, color, top)};
+  --u-code-editor-fg: #{fn.use-var(text-color, main)};
+  --u-code-editor-border: #{fn.use-var(border, color)};
+  --u-code-editor-gutter-fg: #{fn.use-var(text-color, placeholder)};
+  --u-code-editor-active-bg: rgba(30, 136, 229, 0.06);
+  --u-code-editor-selection-bg: rgba(30, 136, 229, 0.18);
+
+  position: relative;
   width: 100%;
-  box-shadow: inset 0 0 1px 1px fn.use-var(border-color);
-  transition: box-shadow 0.25s ease;
+  max-height: 480px;
+  border-radius: fn.use-var(radius, default);
+  background-color: var(--u-code-editor-bg);
+  box-shadow: inset 0 0 0 1px var(--u-code-editor-border);
+  overflow: hidden;
+  transition: box-shadow 0.2s ease;
 
-  &:hover {
-    box-shadow: inset 0 0 1px 1px fn.use-var(color, primary);
+  &:hover,
+  &:focus-within {
+    box-shadow: inset 0 0 0 1px fn.use-var(color, primary);
   }
 
-  @include m.size using ($size) {
-    min-height: fn.use-var(form-component-height, $size);
-    border-radius: fn.use-var(radius, $size);
-    padding: 2px calc(fn.use-var(gap, $size) / 2);
+  .cm-editor {
+    background: transparent;
+    color: var(--u-code-editor-fg);
+    font-size: var(--u-code-editor-font-size);
+    line-height: var(--u-code-editor-line-height);
+    font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Menlo, Consolas,
+      'Liberation Mono', monospace;
+    outline: none;
+
+    &.cm-focused {
+      outline: none;
+    }
+
+    .cm-scroller {
+      font-family: inherit;
+      line-height: inherit;
+      overflow: visible;
+    }
+
+    .cm-content {
+      padding: var(--u-code-editor-padding-block) 0;
+      min-height: calc(
+        var(--u-code-editor-default-lines) * var(--u-code-editor-line-height) *
+          var(--u-code-editor-font-size) + var(--u-code-editor-padding-block) * 2
+      );
+      caret-color: fn.use-var(color, primary);
+    }
+
+    .cm-line {
+      padding: 0 8px;
+    }
+
+    .cm-gutters {
+      background-color: transparent;
+      color: var(--u-code-editor-gutter-fg);
+      border-right: 1px solid var(--u-code-editor-border);
+      user-select: none;
+    }
+
+    .cm-gutterElement-phantom {
+      color: var(--u-code-editor-gutter-fg);
+      opacity: 0.45;
+      padding: 0 3px 0 5px;
+      text-align: right;
+      white-space: nowrap;
+      min-width: 1ch;
+      box-sizing: border-box;
+      pointer-events: none;
+    }
+
+    .cm-activeLineGutter,
+    .cm-activeLine {
+      background-color: var(--u-code-editor-active-bg);
+    }
+
+    .cm-selectionBackground,
+    ::selection {
+      background-color: var(--u-code-editor-selection-bg);
+    }
+
+    .cm-cursor {
+      border-left-color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.is(dark) {
+    --u-code-editor-bg: #282c34;
+    --u-code-editor-fg: #abb2bf;
+    --u-code-editor-border: rgba(255, 255, 255, 0.08);
+    --u-code-editor-gutter-fg: #5c6370;
+    --u-code-editor-active-bg: rgba(255, 255, 255, 0.04);
+    --u-code-editor-selection-bg: rgba(99, 162, 255, 0.25);
   }
 
   @include m.is(disabled) {
     background-color: fn.use-var(color, disabled);
-    box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+    box-shadow: inset 0 0 0 1px var(--u-code-editor-border);
     cursor: not-allowed;
+
+    &:hover,
+    &:focus-within {
+      box-shadow: inset 0 0 0 1px var(--u-code-editor-border);
+    }
+
+    .cm-editor,
+    .cm-content {
+      cursor: not-allowed;
+    }
   }
 
   @include m.is(readonly) {
-    box-shadow: none;
+    box-shadow: inset 0 0 0 1px var(--u-code-editor-border);
+
+    &:hover,
+    &:focus-within {
+      box-shadow: inset 0 0 0 1px var(--u-code-editor-border);
+    }
   }
 }

package/src/components/dialog/dialog.vue

@@ -193,12 +193,16 @@ const translated = {
   y: 0
 }
 
-/** 更新弹框位置 */
+/**
+ * 更新弹框位置
+ * 使用独立 `translate` 而非整体 `transform`, 与 spring 动画的 `scale` 解耦,
+ * 避免动画期间整体 transform 被关键帧覆盖、动画结束后又"啪"地跳回内联位置
+ */
 const updateDialogTransform = (x: number, y: number) => {
   const dom = dialogRef.value
   if (!dom) return
   setStyles(dom, {
-    transform: `scale3d(1, 1, 1) translate3d(${x}px, ${y}px, 0)`
+    translate: `${x}px ${y}px`
   })
 }
 

package/src/components/dialog/style.scss

@@ -23,7 +23,6 @@ $root-name: dialog;
 @include m.b($root-name) {
   pointer-events: auto;
   border-radius: fn.use-var(radius, large);
-  will-change: transform, opacity;
   display: flex;
   flex-direction: column;
   max-height: 90vh;
@@ -119,12 +118,13 @@ $root-name: dialog;
   }
 }
 
-// // 弹框最大化动画进入后的类
+// 弹框最大化动画进入后的类
 .#{$root-name}-maximize-enter-to {
   width: 100vw !important;
   height: 100vh !important;
   max-height: 100vh;
-  transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
+  // 重置拖拽偏移; 不动 scale 以免与 spring leave 的 scale: 0 冲突
+  translate: 0 0 !important;
   @include m.bem($root-name, header) {
     &:active {
       cursor: default;
@@ -135,7 +135,7 @@ $root-name: dialog;
 // 弹框最大化动画激活时的类
 .#{$root-name}-maximize-enter-active,
 .#{$root-name}-maximize-leave-active {
-  transition-property: width, height, transform;
+  transition-property: width, height, translate;
   transition-duration: 0.25s;
 }