vome-core 0.0.19 → 0.0.21

package/dist/admin/crud/vm-export-btn.vue

@@ -0,0 +1,169 @@
+<template>
+  <button
+    v-if="visible"
+    type="button"
+    class="vm-crud-toolbar__btn is-ghost"
+    :disabled="disabled || submitting"
+    @click="onExport"
+  >
+    <i class="ri-download-2-line" />
+    {{ buttonText }}
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue'
+import { toast } from 'vue-sonner'
+import {
+  exportCrudExcel,
+  flattenExportRows,
+  pickExportColumns,
+} from '../lib/export-excel'
+import {
+  injectTableOptions,
+  TABLE_API_KEY,
+  type TableApi,
+} from './key'
+import { useCrud } from './useCrud'
+
+defineOptions({ name: 'vm-export-btn' })
+
+const props = withDefaults(
+  defineProps<{
+    /** 列配置；默认取 Table.getColumns() 或 useTable columns */
+    columns?: CrudColumn[]
+    /** 自定义数据源；默认按当前筛选 POST page 拉全量 */
+    data?:
+      | Record<string, unknown>[]
+      | ((params: Record<string, unknown>) => Promise<Record<string, unknown>[]>)
+    filename?: string | (() => string)
+    maxExportLimit?: number
+    disabled?: boolean
+    text?: string
+    /** 权限键，默认 page */
+    permission?: keyof CrudPermission
+  }>(),
+  {
+    filename: '导出',
+    maxExportLimit: 5000,
+    disabled: false,
+    permission: 'page',
+  },
+)
+
+const crud = useCrud()
+const tableOpts = injectTableOptions()
+const tableApi = inject(TABLE_API_KEY, null as TableApi | null)
+const submitting = ref(false)
+
+const visible = computed(() => Boolean(crud.getPermission(props.permission)))
+
+const buttonText = computed(
+  () => props.text || crud.dict.label.export || '导出',
+)
+
+const exportColumns = computed(() => {
+  const raw =
+    props.columns?.length
+      ? props.columns
+      : tableApi?.getColumns() || tableOpts?.columns || []
+  return pickExportColumns(raw)
+})
+
+function resolveFilename() {
+  const raw = props.filename
+  const name = typeof raw === 'function' ? raw() : raw
+  return name || '导出'
+}
+
+async function fetchRows(): Promise<Record<string, unknown>[]> {
+  if (props.data) {
+    if (typeof props.data === 'function') {
+      return props.data({ ...crud.getParams() })
+    }
+    return props.data
+  }
+
+  const svc = crud.service
+  const limit =
+    props.maxExportLimit && props.maxExportLimit > 0
+      ? props.maxExportLimit
+      : Math.max(crud.pagination.value.total, 1)
+
+  if (svc.page) {
+    const body: Record<string, unknown> = {
+      ...crud.getParams(),
+      [crud.dict.pagination.page]: 1,
+      [crud.dict.pagination.size]: limit,
+    }
+    if (crud.trashMode.value === 'onlyTrashed') body.onlyTrashed = true
+    if (crud.trashMode.value === 'withTrashed') body.withTrashed = true
+    const res = await svc.page(body)
+    return res.list || []
+  }
+
+  if (svc.list) {
+    const body: Record<string, unknown> = { ...crud.getParams() }
+    if (crud.trashMode.value === 'onlyTrashed') body.onlyTrashed = true
+    if (crud.trashMode.value === 'withTrashed') body.withTrashed = true
+    const list = await svc.list(body)
+    return Array.isArray(list) ? list : []
+  }
+
+  return flattenExportRows(crud.list.value, tableOpts?.tree)
+}
+
+async function onExport() {
+  if (submitting.value || props.disabled) return
+  if (!exportColumns.value.length) {
+    toast.error('没有可导出的列')
+    return
+  }
+
+  submitting.value = true
+  try {
+    const rows = await fetchRows()
+    if (!rows.length) {
+      toast.warning('暂无数据可导出')
+      return
+    }
+    const flat = flattenExportRows(rows, tableOpts?.tree)
+    exportCrudExcel(exportColumns.value, flat, resolveFilename())
+    toast.success('导出成功')
+  } catch (e) {
+    toast.error(e instanceof Error ? e.message : '导出失败')
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-crud-toolbar__btn {
+  display: inline-flex;
+  height: 36px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+
+  &.is-ghost {
+    background: var(--muted);
+    color: var(--foreground);
+
+    &:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--muted) 70%, var(--foreground) 8%);
+    }
+  }
+}
+</style>

package/dist/admin/crud/{vm-flex1.vue → vm-flex.vue}

@@ -1,13 +1,13 @@
 <template>
-  <div class="vm-crud-flex1" />
+  <div class="vm-crud-flex" />
 </template>
 
 <script setup lang="ts">
-defineOptions({ name: 'vm-flex1' })
+defineOptions({ name: 'vm-flex' })
 </script>
 
 <style lang="scss" scoped>
-.vm-crud-flex1 {
+.vm-crud-flex {
   flex: 1;
   min-width: 0;
 }

package/dist/admin/crud/vm-search.vue

@@ -186,14 +186,29 @@ function resolveField(item: CrudSearchItem) {
 }
 
 function fieldProps(item: CrudSearchItem) {
+  const name = String(item.placeholder || item.label || '').trim()
+  const rangePlaceholders =
+    item.type === 'number-range' && name
+      ? {
+          startPlaceholder: `${name}最小值`,
+          endPlaceholder: `${name}最大值`,
+        }
+      : item.type === 'daterange' && name
+        ? {
+            startPlaceholder: `${name}开始`,
+            endPlaceholder: `${name}结束`,
+          }
+        : {}
   return {
     options: item.options,
     placeholder: item.placeholder || item.label,
     refreshOnChange: false,
     precision: item.range?.rangeType,
-    mode: item.range?.rangeType === 'float' || item.range?.rangeType === 'int'
-      ? item.range.rangeType
-      : undefined,
+    mode:
+      item.range?.rangeType === 'float' || item.range?.rangeType === 'int'
+        ? item.range.rangeType
+        : undefined,
+    ...rangePlaceholders,
     ...(item.component?.props || {}),
   }
 }

package/dist/admin/crud/vm-toolbar.vue

@@ -20,6 +20,14 @@
         <i class="ri-delete-bin-line" />
         {{ deleteText || crud.dict.label.multiDelete }}
       </button>
+      <vm-export-btn
+        v-if="showExport"
+        :text="exportText || crud.dict.label.export"
+        :filename="exportFilename"
+        :max-export-limit="maxExportLimit"
+        :columns="exportColumns"
+        :data="exportData"
+      />
       <slot />
     </div>
     <div class="vm-crud-toolbar__right">
@@ -57,6 +65,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useCrud } from './useCrud'
+import VmExportBtn from './vm-export-btn.vue'
 defineOptions({ name: 'vm-toolbar' })
 
 const props = withDefaults(
@@ -66,21 +75,32 @@ const props = withDefaults(
     search?: boolean
     showAdd?: boolean
     showDelete?: boolean
+    /** 显示导出（默认开；需 page/list 权限） */
+    showExport?: boolean
     /** 打开新增表单时的默认值 */
     addData?: Record<string, unknown> | (() => Record<string, unknown>)
     /** 回收站中是否隐藏新增（默认 true） */
     hideAddInTrash?: boolean
     addText?: string
     deleteText?: string
+    exportText?: string
+    exportFilename?: string | (() => string)
+    maxExportLimit?: number
+    exportColumns?: CrudColumn[]
+    exportData?:
+      | Record<string, unknown>[]
+      | ((params: Record<string, unknown>) => Promise<Record<string, unknown>[]>)
   }>(),
   {
     trash: true,
     search: true,
     showAdd: true,
     showDelete: true,
+    showExport: true,
     hideAddInTrash: true,
     addText: '新增',
     deleteText: '删除',
+    maxExportLimit: 5000,
   },
 )
 

package/dist/admin/crud/vm-upsert.vue

@@ -1,20 +1,27 @@
 <template>
   <Dialog
     :open="crud.upsertVisible.value"
-    @update:open="(v) => (!v ? crud.upsertClose() : undefined)"
+    @update:open="(v) => (!v ? onCloseClick() : undefined)"
   >
     <DialogContent
       shell="crud"
       class="vm-crud-upsert"
-      :class="{ 'is-empty': isBodyEmpty }"
-      @pointer-down-outside="onPointerDownOutside"
-      @focus-outside="onFocusOutside"
-      @interact-outside="onInteractOutside"
+      :class="{
+        'is-empty': isBodyEmpty,
+        'is-height': !!heightCss,
+      }"
+      :style="heightCss ? { '--vm-dialog-height': heightCss } : undefined"
+      @pointer-down-outside="preventDialogOutsideClose"
+      @focus-outside="preventDialogOutsideClose"
+      @interact-outside="preventDialogOutsideClose"
     >
-      <DialogHeader class="vm-crud-upsert__head">
-        <DialogTitle class="vm-crud-upsert__title">{{ titleText }}</DialogTitle>
+      <DialogHeader class="vm-crud-shell__head">
+        <DialogTitle class="vm-crud-shell__title">{{ titleText }}</DialogTitle>
       </DialogHeader>
-      <div class="vm-crud-upsert__body">
+      <div
+        class="vm-crud-upsert__body"
+        :class="{ 'is-fill': layout === 'fill' }"
+      >
         <template v-if="!isBodyEmpty">
           <div
             v-for="item in formItemsBeforeSlot"
@@ -33,7 +40,7 @@
               :name="`upsert-${item.prop}`"
               :options="resolveOptions(item.options)"
               :model-value="String(crud.upsertForm.value[item.prop] ?? '')"
-              :disabled="isInfo"
+              :disabled="isInfo || item.disabled"
               @update:model-value="(v) => setField(item.prop, v)"
             />
 
@@ -43,7 +50,7 @@
               :class="fieldClass(item)"
               v-bind="fieldProps(item)"
               :model-value="crud.upsertForm.value[item.prop]"
-              :disabled="isInfo"
+              :disabled="isInfo || item.disabled"
               @update:model-value="(v: unknown) => setField(item.prop, v)"
             />
 
@@ -51,7 +58,7 @@
               v-else
               class="vm-crud-upsert__control"
               :placeholder="item.placeholder"
-              :disabled="isInfo"
+              :disabled="isInfo || item.disabled"
               :aria-invalid="fieldErrors[item.prop] ? true : undefined"
               :model-value="String(crud.upsertForm.value[item.prop] ?? '')"
               @update:model-value="(v) => setField(item.prop, v)"
@@ -76,7 +83,7 @@
             <textarea
               class="vm-crud-upsert__textarea"
               :placeholder="item.placeholder"
-              :disabled="isInfo"
+              :disabled="isInfo || item.disabled"
               :value="String(crud.upsertForm.value[item.prop] ?? '')"
               @input="setField(item.prop, ($event.target as HTMLTextAreaElement).value)"
             />
@@ -89,24 +96,34 @@
           <vm-empty kind="暂无内容" />
         </div>
       </div>
-      <DialogFooter class="vm-crud-upsert__foot">
-        <button
-          type="button"
-          class="vm-crud-upsert__btn is-ghost"
-          :disabled="submitting"
-          @click="crud.upsertClose()"
-        >
-          {{ crud.dict.label.close }}
-        </button>
-        <button
-          v-if="showConfirm"
-          type="button"
-          class="vm-crud-upsert__btn is-primary"
-          :disabled="submitting"
-          @click="onSubmit"
-        >
-          {{ submitting ? '提交中…' : crud.dict.label.confirm }}
-        </button>
+      <DialogFooter v-if="showFooter" class="vm-crud-shell__foot">
+        <slot
+          v-if="slots.footer"
+          name="footer"
+          v-bind="footerSlotProps"
+        />
+        <template v-else>
+          <slot name="footer-prepend" v-bind="footerSlotProps" />
+          <button
+            v-if="showClose"
+            type="button"
+            class="vm-crud-shell__btn is-ghost"
+            :disabled="submitting"
+            @click="onCloseClick"
+          >
+            {{ closeLabel }}
+          </button>
+          <button
+            v-if="showConfirm"
+            type="button"
+            class="vm-crud-shell__btn is-primary"
+            :disabled="submitting"
+            @click="onConfirmClick"
+          >
+            {{ submitting ? '提交中…' : confirmLabel }}
+          </button>
+          <slot name="footer-append" v-bind="footerSlotProps" />
+        </template>
       </DialogFooter>
     </DialogContent>
   </Dialog>
@@ -121,17 +138,39 @@ import { getCrudStyle } from './style'
 import { resolveCrudComponent } from './registry'
 import { applySetRules, validateFormFields } from './validate'
 import { resolveFormSpan, useFormCols } from './span'
-import { isDialogFloatTarget } from '../lib/dialog-float'
+import { preventDialogOutsideClose } from '../lib/dialog-float'
 defineOptions({ name: 'vm-upsert' })
 
 const props = withDefaults(
   defineProps<{
     items?: CrudFormItem[]
     title?: string
+    /** 弹窗高度，如 800 / '800px'；最高受壳层 800px 约束 */
+    height?: string | number
+    /** 是否显示确定；未设时 info 模式自动隐藏 */
+    confirm?: boolean
+    /** 是否显示关闭，默认 true */
+    close?: boolean
+    /** false 时隐藏整个底栏 */
+    footer?: boolean
+    confirmText?: string
+    closeText?: string
+    /** form=栅格表单；fill=纵向铺满（只读列表/文档） */
+    layout?: 'form' | 'fill'
   }>(),
-  {},
+  {
+    close: undefined,
+    confirm: undefined,
+    footer: true,
+    layout: 'form',
+  },
 )
 
+const emit = defineEmits<{
+  close: []
+  confirm: []
+}>()
+
 const slots = useSlots()
 const crud = useCrud()
 const upsertOpts = injectUpsertOptions()
@@ -139,6 +178,16 @@ const formCols = useFormCols()
 const submitting = ref(false)
 const fieldErrors = ref<Record<string, string>>({})
 
+function normalizeHeight(h?: string | number) {
+  if (h == null || h === '') return ''
+  if (typeof h === 'number') return `${h}px`
+  return String(h)
+}
+
+const heightCss = computed(() =>
+  normalizeHeight(props.height ?? upsertOpts?.dialog?.height),
+)
+
 const mergedItems = computed(() => {
   const raw = props.items?.length ? props.items : upsertOpts?.items || []
   const useRules = getCrudStyle().form.plugins.some(
@@ -171,27 +220,45 @@ const formItemsAfterSlot = computed(() =>
 )
 
 const isInfo = computed(() => crud.upsertMode.value === 'info')
-/** dialog.confirm 显式控制；未设时 info 模式自动隐藏确定 */
+/** prop > dialog.confirm > info 自动隐藏 */
 const showConfirm = computed(() => {
+  if (typeof props.confirm === 'boolean') return props.confirm
   const flag = upsertOpts?.dialog?.confirm
   if (typeof flag === 'boolean') return flag
   return !isInfo.value
 })
+const showClose = computed(() => {
+  if (typeof props.close === 'boolean') return props.close
+  const flag = upsertOpts?.dialog?.close
+  if (typeof flag === 'boolean') return flag
+  return true
+})
+const showFooter = computed(() => props.footer !== false)
+const confirmLabel = computed(
+  () =>
+    props.confirmText ||
+    upsertOpts?.dialog?.confirmText ||
+    crud.dict.label.confirm,
+)
+const closeLabel = computed(
+  () =>
+    props.closeText ||
+    upsertOpts?.dialog?.closeText ||
+    crud.dict.label.close,
+)
 const isBodyEmpty = computed(
   () => !visibleItems.value.length && !slots.default,
 )
 
-function onPointerDownOutside(event: Event) {
-  if (isDialogFloatTarget(event)) event.preventDefault()
-}
-
-function onFocusOutside(event: Event) {
-  if (isDialogFloatTarget(event)) event.preventDefault()
-}
-
-function onInteractOutside(event: Event) {
-  if (isDialogFloatTarget(event)) event.preventDefault()
-}
+const footerSlotProps = computed(() => ({
+  close: onCloseClick,
+  submit: onSubmit,
+  confirm: onConfirmClick,
+  submitting: submitting.value,
+  showConfirm: showConfirm.value,
+  showClose: showClose.value,
+  form: crud.upsertForm.value,
+}))
 
 function setField(prop: string, value: unknown) {
   if (isInfo.value) return
@@ -263,9 +330,25 @@ function itemSpan(item: CrudFormItem) {
   return resolveFormSpan(item.span, formCols.value)
 }
 
+function onCloseClick() {
+  const done = () => crud.upsertClose()
+  if (upsertOpts?.onClose) {
+    upsertOpts.onClose('close', done)
+    emit('close')
+    return
+  }
+  done()
+  emit('close')
+}
+
+function onConfirmClick() {
+  emit('confirm')
+  void onSubmit()
+}
+
 async function onSubmit() {
   if (isInfo.value) {
-    crud.upsertClose()
+    onCloseClick()
     return
   }
   if (submitting.value) return
@@ -345,7 +428,7 @@ defineExpose({
   form: crud.upsertForm,
   mode: crud.upsertMode,
   submit: onSubmit,
-  close: () => crud.upsertClose(),
+  close: onCloseClick,
   add: () => crud.rowAdd(),
   append: (data?: Record<string, unknown>) => crud.rowAppend(data),
   edit: (data: Record<string, unknown>) => crud.rowEdit(data),
@@ -354,23 +437,6 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.vm-crud-upsert__head {
-  flex-shrink: 0;
-  padding: 12px 22px;
-  border-bottom: 1px solid var(--border);
-
-  @media (max-width: 768px) {
-    padding: 8px 12px;
-  }
-}
-
-.vm-crud-upsert__title {
-  font-size: 15px;
-  font-weight: 650;
-  letter-spacing: -0.01em;
-  line-height: 1.3;
-}
-
 .vm-crud-upsert__body {
   display: grid;
   flex: 1 1 auto;
@@ -382,6 +448,19 @@ defineExpose({
   padding: 18px 22px;
   align-content: start;
 
+  &.is-fill {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    padding: 0;
+
+    > * {
+      width: 100%;
+      min-width: 0;
+    }
+  }
+
   /* slot 内容在宿主 SFC，须 :deep 才能命中 label / control 样式 */
   :deep(.vm-crud-upsert__field) {
     display: grid;
@@ -408,6 +487,25 @@ defineExpose({
     line-height: 1.4 !important;
   }
 
+  /* 单行 input：白底；select / tree-select 等：淡蓝底 */
+  :deep(input.vm-crud-upsert__control),
+  :deep(.vm-crud-upsert__control[data-slot='input']) {
+    background: var(--card) !important;
+  }
+
+  :deep(.vm-crud-select.vm-crud-upsert__control),
+  :deep(.vm-group-cascader.vm-crud-upsert__control),
+  :deep(.vm-multi-select.vm-crud-upsert__control),
+  :deep(.vm-user-select.vm-crud-upsert__control),
+  :deep(.vm-date-picker.vm-crud-upsert__control),
+  :deep(.vm-icon-picker.vm-crud-upsert__control) {
+    background: var(--muted) !important;
+  }
+
+  :deep(.vm-tree-select.vm-crud-upsert__control .vm-tree-select__trigger) {
+    background: var(--muted) !important;
+  }
+
   @media (max-width: 768px) {
     grid-template-columns: repeat(12, minmax(0, 1fr));
     flex: 1 1 auto;
@@ -443,11 +541,12 @@ defineExpose({
   min-height: var(--vm-control-height);
 }
 
-/* 上传：按 size 撑开，勿套用单行输入框高度 */
+/* 上传：按 size 撑开，勿套用单行输入框高度；淡蓝底 */
 :deep(.vm-upload.vm-crud-upsert__upload-field) {
   width: 100%;
   height: auto !important;
   min-height: 0;
+  background: var(--muted) !important;
 }
 
 :deep(.vm-crud-upsert__switch-field.vm-switch) {
@@ -456,13 +555,14 @@ defineExpose({
   margin-top: 8px;
 }
 
-.vm-crud-upsert__textarea {
+.vm-crud-upsert__textarea,
+:deep(.vm-crud-upsert__textarea) {
   width: 100%;
   min-height: 72px;
   padding: 8px var(--vm-control-padding-x);
   border: 1px solid var(--input);
   border-radius: var(--vm-control-radius);
-  background: var(--background);
+  background: var(--muted);
   color: var(--foreground);
   font-size: 14px;
   line-height: 1.5;
@@ -476,57 +576,4 @@ defineExpose({
     box-shadow: none;
   }
 }
-
-.vm-crud-upsert__foot {
-  display: flex;
-  flex-shrink: 0;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 10px 22px;
-  border-top: 1px solid var(--border);
-
-  @media (max-width: 768px) {
-    flex-direction: column-reverse;
-    gap: 8px;
-    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
-
-    .vm-crud-upsert__btn {
-      width: 100%;
-    }
-  }
-}
-
-.vm-crud-upsert__btn {
-  height: 36px;
-  padding: 0 16px;
-  border: none;
-  border-radius: 12px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease;
-
-  &.is-primary {
-    background: var(--brand);
-    color: #fff;
-
-    &:hover:not(:disabled) {
-      background: var(--brand-deep);
-    }
-  }
-
-  &.is-ghost {
-    background: var(--muted);
-    color: var(--foreground);
-
-    &:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--muted) 70%, var(--foreground) 8%);
-    }
-  }
-
-  &:disabled {
-    cursor: wait;
-    opacity: 0.65;
-  }
-}
 </style>