@veltra/desktop 1.2.4 → 1.2.5

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

@@ -1,7 +1,7 @@
 import { last, o, safeRun } from '@cat-kit/core'
 import { computed, nextTick, shallowReactive, shallowRef, watch, type ShallowRef } from 'vue'
 
-import type { TableRow, BatchEditEmits, BatchEditProps, TableExposed } from '../../types'
+import type { TableRow, BatchEditEmits, BatchEditProps } from '../../types'
 import type { FormExposed } from '../../types/form'
 
 /** 按索引路径在原始数据树中定位节点（等价于历史 Forest.visit 路径访问） */
@@ -29,7 +29,6 @@ function visitDataByIndexPath<T extends Record<string, unknown>>(
 interface Options {
   props: BatchEditProps
   emit: BatchEditEmits
-  tableRef: ShallowRef<TableExposed | undefined>
   formRef: ShallowRef<FormExposed | undefined>
 }
 
@@ -42,8 +41,6 @@ export interface BatchEditStates {
   row?: TableRow
   /** 父级，只在添加子级时会有值 */
   parentRow?: TableRow
-  /** 数据是否已更新 */
-  dataUpdated: boolean
 }
 
 export interface EditReturned {
@@ -51,13 +48,13 @@ export interface EditReturned {
   insertIndexes: ShallowRef<number[]>
   handleSave: () => Promise<void>
   handleClose: () => void
-  handleCreate: () => void
+  handleCreate: () => Promise<void>
   handleEdit: (row: TableRow) => void
-  handleCopy: (row: TableRow) => void
+  handleCopy: (row: TableRow) => Promise<void>
   handleDelete: (row: TableRow) => Promise<void>
-  handleInsertToNext: (row: TableRow) => void
-  handleInsertToPrev: (row: TableRow) => void
-  handleInsertChild: (row: TableRow) => void
+  handleInsertToNext: (row: TableRow) => Promise<void>
+  handleInsertToPrev: (row: TableRow) => Promise<void>
+  handleInsertChild: (row: TableRow) => Promise<void>
 }
 
 function snapshotData(data?: Record<string, any>) {
@@ -72,101 +69,49 @@ function replaceModelData(model: Record<string, any>, data: Record<string, any>)
 }
 
 export function useEdit(options: Options): EditReturned {
-  const { props, emit, tableRef, formRef } = options
+  const { props, emit, formRef } = options
 
   /** 组件状态 */
   const state = shallowReactive<BatchEditStates>({
     depth: undefined,
     visible: false,
     type: 'create',
-    loading: false,
-    dataUpdated: false
+    loading: false
   })
 
   const insertIndexes = shallowRef<number[]>([])
 
-  watch(
-    () => state.visible,
-    (v) => {
-      if (!v) {
-        state.dataUpdated = false
-      }
-    }
-  )
-
-  /**
-   * 「打开行 / 切换 type」时记录的基线快照
-   * @description
-   * 用于 changeCb 内部比对 — 若新值与基线相等（深比较）视为无改动，避免某些组件在 mount
-   * 阶段把规范化后的值再写回模型时被误判为「用户已修改」
-   */
-  let baselineSnapshot: Record<string, any> | undefined
-  let emptySnapshot: Record<string, any> | undefined
-
   function snapshotModelData() {
     return snapshotData(props.model)
   }
 
-  function resetFormData(data?: Record<string, any>) {
-    if (!props.model) return
-    replaceModelData(props.model, snapshotData(data ?? emptySnapshot))
-    formRef.value?.clearValidate()
-  }
-
-  function setFormData(formData: Record<string, any>) {
+  function setFormData(formData?: Record<string, any>) {
     if (!props.model) return
     replaceModelData(props.model, snapshotData(formData))
   }
 
-  watch(
-    () => props.model,
-    (model) => {
-      emptySnapshot = snapshotData(model)
-    },
-    { immediate: true }
-  )
+  const isQuickMode = () => props.mode === 'quick'
+
+  async function runBeforeCreate(data: Record<string, any>) {
+    await props.beforeCreate?.(data, state.parentRow?.data)
+  }
 
   watch(
     () => state.row,
     (row) => {
-      resetFormData()
       if (row) {
         state.type = 'update'
         state.visible = true
-        setFormData(row.data)
+        if (!isQuickMode()) {
+          setFormData(row.data)
+        }
       } else {
         state.visible = false
       }
-      baselineSnapshot = snapshotModelData()
-      state.dataUpdated = false
     },
-    // sync 保证 setData 完成后立刻取快照，避免 mount 期间组件回写值时丢基线
     { flush: 'sync' }
   )
 
-  watch(
-    () => props.model,
-    () => {
-      if (!baselineSnapshot || !state.visible) return
-      state.dataUpdated = !isSameValue(baselineSnapshot, snapshotModelData())
-    },
-    { deep: 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
-  }
-
   const childrenKey = computed(() => {
     return typeof props.tree === 'string' ? props.tree : 'children'
   })
@@ -204,59 +149,53 @@ export function useEdit(options: Options): EditReturned {
     return snapshotModelData()
   }
 
-  async function runCreate(cb: () => void) {
+  async function runCreate(cb: () => void, initialData?: Record<string, any>) {
     state.parentRow = undefined
     if (state.row) {
       state.row.isCurrent = false
     }
     state.row = undefined
     state.type = 'create'
-    resetFormData()
     cb()
 
-    let item: Record<string, any> | undefined = undefined
-
     await nextTick()
 
-    state.visible = true
-    baselineSnapshot = snapshotModelData()
-    state.dataUpdated = false
+    setFormData(initialData)
 
-    if (item) {
-      const row = tableRef.value?.getRowByData(item)
-      if (row) {
-        state.row = row
-      }
+    if (isQuickMode() && props.model) {
+      await runBeforeCreate(props.model)
     }
+
+    state.visible = true
   }
 
   /**
    * 点击新增按钮
    */
-  function handleCreate() {
+  async function handleCreate() {
     const { data } = props
-    runCreate(() => {
+    await runCreate(() => {
       state.depth = 1
       insertIndexes.value = [data?.length ?? 0]
     })
   }
 
-  function handleInsertToPrev(row: TableRow) {
-    runCreate(() => {
+  async function handleInsertToPrev(row: TableRow) {
+    await runCreate(() => {
       state.depth = row.depth
       insertIndexes.value = [...row.indexes]
     })
   }
 
-  function handleInsertToNext(row: TableRow) {
-    runCreate(() => {
+  async function handleInsertToNext(row: TableRow) {
+    await runCreate(() => {
       state.depth = row.depth
       insertIndexes.value = [...row.indexes.slice(0, -1), row.index + 1]
     })
   }
 
-  function handleInsertChild(row: TableRow) {
-    runCreate(() => {
+  async function handleInsertChild(row: TableRow) {
+    await runCreate(() => {
       state.parentRow = row
       state.depth = row.depth + 1
       row.expanded = true
@@ -267,19 +206,17 @@ export function useEdit(options: Options): EditReturned {
 
   /** 编辑指定行（等同于点击行） */
   function handleEdit(row: TableRow) {
+    state.type = 'update'
     state.row = row
     state.depth = row.depth
   }
 
   /** 复制指定行：在其下方以 create 模式打开表单，并预填副本数据 */
-  function handleCopy(row: TableRow) {
-    runCreate(() => {
+  async function handleCopy(row: TableRow) {
+    await runCreate(() => {
       state.depth = row.depth
       insertIndexes.value = [...row.indexes.slice(0, -1), row.index + 1]
-      setFormData(row.data)
-      baselineSnapshot = snapshotModelData()
-      state.dataUpdated = false
-    })
+    }, row.data)
   }
 
   function runWithLoading<Arg extends any[]>(fn: (...args: Arg) => Promise<void> | void) {
@@ -306,36 +243,47 @@ export function useEdit(options: Options): EditReturned {
 
     if (!model) return
 
+    if (isQuickMode() && state.type === 'update') return
+
     formRef.value?.clearValidate()
     const valid = await formRef.value?.validate()
 
     if (!valid) return
 
-    let item = getInsertData()
-    if (saveMethod) {
-      const result = await saveMethod(item, state.type, state.parentRow)
-      if (result) {
-        item = result
-      }
+    // quick + create：仅校验 + insert
+    if (isQuickMode() && state.type === 'create') {
+      insert(getInsertData())
+      return
     }
 
-    state.dataUpdated = false
+    let item = getInsertData()
 
-    // 新增
+    // normal + create：beforeCreate → saveMethod → insert
     if (state.type === 'create') {
+      await runBeforeCreate(item)
+      if (saveMethod) {
+        const result = await saveMethod(item, state.type, state.parentRow?.data)
+        if (result) {
+          item = result
+        }
+      }
       insert(item)
-
-      resetFormData()
       return
     }
-    // 更新
-    if (state.type === 'update') {
-      const { row } = state
-      row &&
-        Object.keys(item).forEach((key) => {
-          o(row.data).set(key, o(item).get(key))
-        })
+
+    // normal + update
+    if (saveMethod) {
+      const result = await saveMethod(item, state.type, state.parentRow?.data)
+      if (result) {
+        item = result
+      }
     }
+
+    const { row } = state
+    row &&
+      Object.keys(item).forEach((key) => {
+        o(row.data).set(key, o(item).get(key))
+      })
   })
 
   const handleDelete = runWithLoading(async (row: TableRow) => {
@@ -376,7 +324,6 @@ export function useEdit(options: Options): EditReturned {
     state.row = undefined
     state.parentRow = undefined
     state.depth = undefined
-    resetFormData()
     insertIndexes.value = []
   }
 

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

@@ -0,0 +1,58 @@
+import { computed } from 'vue'
+
+import type { BatchEditFeature, BatchEditProps, TableRow } from '../../types'
+
+interface Options {
+  props: BatchEditProps
+}
+export function useFeatures(options: Options) {
+  const { props } = options
+  const staticFeatures = computed(() => {
+    const { features } = props
+
+    if (Array.isArray(features)) {
+      return new Set(features)
+    }
+
+    const defaultFeatures = new Set<BatchEditFeature>(['create', 'delete', 'update', 'createChild'])
+
+    if (!features) {
+      return defaultFeatures
+    }
+
+    // 函数与 false 的特性视为关闭；显式 true 视为开启（即便不在默认集合内）
+    Object.entries(features).forEach(([key, value]) => {
+      const k = key as BatchEditFeature
+      if (typeof value === 'function' || value === false) {
+        defaultFeatures.delete(k)
+      } else if (value === true) {
+        defaultFeatures.add(k)
+      }
+    })
+    return defaultFeatures
+  })
+
+  const dynamicFeatures = computed<
+    Record<BatchEditFeature, ((row?: TableRow) => boolean) | undefined>
+  >(() => {
+    const { features } = props
+    if (!Array.isArray(features) && typeof features === 'object') {
+      const ret = Object.entries(features)
+        .filter(([_, value]) => {
+          return typeof value === 'function'
+        })
+        .reduce(
+          (acc, [key, value]) => {
+            acc[key] = value
+            return acc
+          },
+          {} as Record<BatchEditFeature, (row?: TableRow) => boolean>
+        )
+      return ret
+    }
+
+    return {} as Record<BatchEditFeature, ((row?: TableRow) => boolean) | undefined>
+  })
+
+  return { staticFeatures, dynamicFeatures }
+}

package/src/components/contextmenu/style.scss

@@ -78,15 +78,15 @@ $arrow-size: 12px;
 
     #{$b}__item:not(.is-disabled):not(.is-loading) > & {
       &:hover {
-        background-color: var(--u-menu-hover-bg);
-        color: var(--u-menu-hover-color);
+        background-color: var(--u-nav-hover-bg);
+        color: var(--u-nav-hover-color);
       }
     }
   }
 
   #{$b}__item.is-open:not(.is-disabled) > #{$b}__item-content {
-    background-color: var(--u-menu-hover-bg);
-    color: var(--u-menu-hover-color);
+    background-color: var(--u-nav-hover-bg);
+    color: var(--u-nav-hover-color);
   }
 
   @include m.e(icon-place) {
@@ -128,7 +128,7 @@ $arrow-size: 12px;
 
     @include m.e(item-content) {
       padding: 0 fn.use-var(gap, $size);
-      min-height: calc(var(--u-menu-height-#{$size}) - 8px);
+      min-height: calc(var(--u-nav-height-#{$size}) - 8px);
       border-radius: calc(fn.use-var(radius, $size) + 1px);
     }
   }

package/src/components/dual-nav/dual-nav-app.vue

@@ -0,0 +1,33 @@
+<template>
+  <u-tip direction="right" hide-arrow>
+    <button
+      type="button"
+      :class="[cls.e('app'), bem.is('active', active), bem.is('disabled', app.disabled ?? false)]"
+      :disabled="app.disabled"
+      @click="emit('click')"
+    >
+      <UNavIcon v-if="app.icon" :icon="app.icon" :class="cls.e('app-icon')" />
+      <span v-else :class="cls.e('app-fallback')">{{ app.title[0] }}</span>
+    </button>
+
+    <template #content>
+      {{ app.title }}
+    </template>
+  </u-tip>
+</template>
+
+<script setup lang="ts">
+import { bem } from '@veltra/utils'
+
+import type { NavItem } from '../../types'
+import UNavIcon from '../nav/nav-icon.vue'
+import { UTip } from '../tip'
+
+defineOptions({ name: 'DualNavApp' })
+
+const cls = bem('dual-nav')
+
+defineProps<{ app: NavItem; active: boolean }>()
+
+const emit = defineEmits<{ click: [] }>()
+</script>

package/src/components/dual-nav/dual-nav.vue

@@ -0,0 +1,150 @@
+<template>
+  <div :class="cls.b">
+    <div :class="cls.e('rail')">
+      <DualNavApp
+        v-for="app in menus"
+        :key="app.path"
+        :app="app"
+        :active="isAppActive(app)"
+        @click="handleAppClick(app)"
+      />
+    </div>
+
+    <div :class="cls.e('divider')" aria-hidden="true" />
+
+    <div :class="cls.e('panel')">
+      <template v-if="panelApp">
+        <div :class="cls.e('panel-header')">
+          <div :class="cls.e('panel-header-main')">
+            <h3 :class="cls.e('panel-title')">{{ panelApp.title }}</h3>
+            <p v-if="panelApp.description" :class="cls.e('description')">
+              {{ panelApp.description }}
+            </p>
+          </div>
+
+          <u-tip
+            v-if="hasExpandableMenus"
+            :content="allExpanded ? '折叠全部' : '展开全部'"
+            hide-arrow
+          >
+            <button
+              type="button"
+              :class="cls.e('toggle-expand')"
+              :aria-label="allExpanded ? '折叠全部' : '展开全部'"
+              @click="handleToggleExpandAll"
+            >
+              <u-icon>
+                <FolderOpened v-if="!allExpanded" />
+                <Folder v-else />
+              </u-icon>
+            </button>
+          </u-tip>
+        </div>
+
+        <div :class="cls.e('panel-body')">
+          <UNav
+            ref="navRef"
+            :menus="panelMenus"
+            :current-path="currentPath"
+            :collapsed="false"
+            @item-click="emit('item-click', $event)"
+          />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Folder, FolderOpened } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, ref, useTemplateRef, watch } from 'vue'
+
+import type { DualNavEmits, DualNavProps, DualNavRootItem } from '../../types/dual-nav'
+import type { NavExposed, NavItem } from '../../types/nav'
+import { UIcon } from '../icon'
+import { UNav } from '../nav'
+import { collectNavBranchPaths } from '../nav/helper'
+import { UTip } from '../tip'
+import DualNavApp from './dual-nav-app.vue'
+import { findRootApp } from './helper'
+
+defineOptions({ name: 'DualNav' })
+
+const props = defineProps<DualNavProps>()
+const emit = defineEmits<DualNavEmits>()
+
+const cls = bem('dual-nav')
+const navRef = useTemplateRef<NavExposed>('navRef')
+
+/** 右栏当前展示的应用（点击左轨或 currentPath 同步） */
+const panelAppPath = ref<string>()
+const allExpanded = ref(false)
+
+function syncPanelAppFromCurrentPath(currentPath?: string) {
+  const rootApp = findRootApp(props.menus, currentPath)
+  if (rootApp) {
+    panelAppPath.value = rootApp.path
+    return
+  }
+
+  if (!panelAppPath.value && props.menus?.length) {
+    panelAppPath.value = props.menus[0]!.path
+  }
+}
+
+watch(
+  () => [props.currentPath, props.menus] as const,
+  ([currentPath]) => {
+    syncPanelAppFromCurrentPath(currentPath)
+  },
+  { immediate: true }
+)
+
+const panelApp = computed<DualNavRootItem | undefined>(() => {
+  if (!panelAppPath.value || !props.menus?.length) return undefined
+  return props.menus.find((app) => app.path === panelAppPath.value)
+})
+
+/** 右栏菜单：有子级时展示子级，单层时展示根项自身 */
+const panelMenus = computed<NavItem[] | undefined>(() => {
+  const app = panelApp.value
+  if (!app) return undefined
+  if (app.children?.length) return app.children
+  return [app]
+})
+
+const hasExpandableMenus = computed(() => {
+  return collectNavBranchPaths(panelMenus.value).length > 0
+})
+
+watch(panelAppPath, () => {
+  allExpanded.value = false
+})
+
+/** 左轨高亮：仅当 currentPath 落在该应用下时激活 */
+function isAppActive(app: NavItem): boolean {
+  return findRootApp(props.menus, props.currentPath)?.path === app.path
+}
+
+function handleAppClick(app: NavItem) {
+  if (app.disabled) return
+
+  panelAppPath.value = app.path
+
+  if (!app.children?.length) {
+    emit('item-click', app)
+  }
+}
+
+function handleToggleExpandAll() {
+  if (allExpanded.value) {
+    navRef.value?.collapseAll()
+    allExpanded.value = false
+    return
+  }
+
+  navRef.value?.expandAll()
+  allExpanded.value = true
+}
+</script>

package/src/components/dual-nav/helper.ts

@@ -0,0 +1,25 @@
+import type { DualNavRootItem } from '../../types'
+import { walkNavWithPath } from '../nav/walk-nav-path'
+
+/** 根据当前路径反查所属顶层应用 */
+export function findRootApp(
+  menus: DualNavRootItem[] | undefined,
+  currentPath?: string
+): DualNavRootItem | undefined {
+  if (!currentPath || !menus?.length) return undefined
+
+  for (const app of menus) {
+    if (app.path === currentPath) return app
+
+    let matched = false
+    walkNavWithPath(app, (node) => {
+      if (node.path === currentPath) {
+        matched = true
+        return false
+      }
+    })
+    if (matched) return app
+  }
+
+  return undefined
+}

package/src/components/dual-nav/index.ts

@@ -0,0 +1 @@
+export { default as UDualNav } from './dual-nav.vue'