vome-core 0.0.1

package/src/admin/crud/vm-add-btn.vue

@@ -0,0 +1,68 @@
+<template>
+  <button
+    v-if="visible"
+    type="button"
+    class="vm-crud-toolbar__btn is-primary"
+    @click="onClick"
+  >
+    <i class="ri-add-line" />
+    {{ crud.dict.label.add }}
+  </button>
+</template>
+
+<script setup lang="ts">
+import { useCrud } from './useCrud'
+
+defineOptions({ name: 'vm-add-btn' })
+
+const props = withDefaults(
+  defineProps<{
+    /** 打开新增表单时写入的默认值 */
+    data?: Record<string, unknown> | (() => Record<string, unknown>)
+    /** 回收站中隐藏（默认 true） */
+    hideInTrash?: boolean
+  }>(),
+  {
+    hideInTrash: true,
+  },
+)
+
+const crud = useCrud()
+
+/** 权限来自 service._permission / useCrud.permission */
+const visible = computed(() => {
+  if (!crud.getPermission('add')) return false
+  if (props.hideInTrash && crud.trashMode.value === 'onlyTrashed') return false
+  return true
+})
+
+function onClick() {
+  const raw = props.data
+  const defaults = typeof raw === 'function' ? raw() : raw
+  crud.rowAdd(defaults && Object.keys(defaults).length ? defaults : {})
+}
+</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;
+
+  &.is-primary {
+    background: var(--brand);
+    color: #fff;
+
+    &:hover {
+      background: var(--brand-deep);
+    }
+  }
+}
+</style>

package/src/admin/crud/vm-adv-search.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="vm-adv-search">
+    <Button size="sm" variant="outline" class="h-8" @click="open = true">
+      <i class="ri-filter-3-line" />
+      {{ crud.dict.label.advSearch }}
+    </Button>
+    <vm-dialog v-model:open="open" :title="crud.dict.label.advSearch" width="640px">
+      <vm-form v-model="form" :items="items" />
+      <template #footer>
+        <button type="button" class="vm-adv-search__btn is-ghost" @click="reset">
+          {{ crud.dict.label.reset }}
+        </button>
+        <button type="button" class="vm-adv-search__btn is-primary" @click="search">
+          {{ crud.dict.label.search }}
+        </button>
+      </template>
+    </vm-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCrud } from './useCrud'
+defineOptions({ name: 'vm-adv-search' })
+
+const props = withDefaults(
+  defineProps<{
+    items?: CrudFormItem[]
+  }>(),
+  { items: () => [] },
+)
+
+const crud = useCrud()
+const open = ref(false)
+const form = ref<Record<string, unknown>>({})
+
+function search() {
+  const payload: Record<string, unknown> = {}
+  for (const it of props.items) {
+    const v = form.value[it.prop]
+    if (v !== '' && v != null) payload[it.prop] = v
+  }
+  crud.setParams(payload, true)
+  open.value = false
+}
+
+function reset() {
+  const next: Record<string, unknown> = {}
+  for (const it of props.items) next[it.prop] = ''
+  form.value = next
+  crud.resetParams()
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-adv-search__btn {
+  height: 36px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &.is-ghost {
+    background: var(--muted);
+  }
+
+  &.is-primary {
+    background: var(--brand);
+    color: #fff;
+  }
+}
+</style>

package/src/admin/crud/vm-crud.vue

@@ -0,0 +1,517 @@
+<template>
+  <div class="vm-crud">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+import { resolveService } from '../service'
+import { deepTree } from '../lib/tree'
+import { mergeDict, mergePermission } from './config'
+import { vmConfirm } from './confirm'
+import { CRUD_KEY, CRUD_MITT_KEY, injectCrudOptions, injectTableOptions, injectUpsertOptions } from './key'
+import { createMitt } from './mitt'
+defineOptions({ name: 'vm-crud' })
+
+const props = withDefaults(
+  defineProps<{
+    /** 直接传入 service；字符串如 'base.user'；也可 useCrud({ service }) */
+    service?: CrudService | string
+    params?: Record<string, unknown>
+    immediate?: boolean
+  }>(),
+  {
+    params: () => ({}),
+    immediate: false,
+  },
+)
+
+const hookOptions = injectCrudOptions()
+const tableOpts = injectTableOptions()
+const upsertOpts = injectUpsertOptions()
+const mitt = createMitt()
+const searchActions = shallowRef<{ search: () => void; reset: () => void } | null>(null)
+const hasSearchFilters = ref(false)
+
+function pickService(): CrudService {
+  const s = props.service ?? hookOptions?.service
+  if (!s) return {} as CrudService
+  if (typeof s === 'string') {
+    return (resolveService(s) || {}) as CrudService
+  }
+  return s
+}
+
+function permFromService(s: CrudService): Partial<CrudPermission> | undefined {
+  if (s._permission && typeof s._permission === 'object') {
+    return s._permission as Partial<CrudPermission>
+  }
+  return undefined
+}
+
+const service = computed<CrudService>(() => pickService())
+
+const dict = mergeDict(hookOptions?.dict)
+const permission = ref(
+  mergePermission(hookOptions?.permission, permFromService(service.value)),
+)
+
+const loading = ref(false)
+const list = ref<Record<string, unknown>[]>([])
+const selection = ref<Record<string, unknown>[]>([])
+const pagination = ref({ page: 1, size: 20, total: 0 })
+const params = ref<Record<string, unknown>>({ ...props.params })
+const trashMode = ref<CrudTrashMode>('default')
+
+const upsertVisible = ref(false)
+const upsertMode = ref<'add' | 'update' | 'info'>('add')
+const upsertForm = ref<Record<string, unknown>>({})
+
+function getPermission(key?: keyof typeof permission.value) {
+  if (!key) return { ...permission.value }
+  return Boolean(permission.value[key])
+}
+
+function getParams() {
+  return { ...params.value }
+}
+
+async function refresh(extra: Record<string, unknown> = {}) {
+  const svc = service.value
+  if (!svc.page && !svc.list) {
+    toast.error('CRUD service 缺少 page/list')
+    return
+  }
+
+  const body: Record<string, unknown> = {
+    ...params.value,
+    ...extra,
+    [dict.pagination.page]: pagination.value.page,
+    [dict.pagination.size]: pagination.value.size,
+  }
+  // defaultSort → 未带排序参数时注入（dict.sort → order/sort）
+  const ds = tableOpts?.defaultSort
+  if (ds?.prop && body[dict.sort.prop] == null) {
+    body[dict.sort.prop] = ds.prop
+    const o = ds.order
+    body[dict.sort.order] =
+      o === 'asc' || o === 'ascending' ? 'asc' : 'desc'
+  }
+  if (trashMode.value === 'onlyTrashed') body.onlyTrashed = true
+  if (trashMode.value === 'withTrashed') body.withTrashed = true
+
+  loading.value = true
+
+  const done = () => {
+    loading.value = false
+  }
+
+  const render = (
+    data:
+      | Record<string, unknown>[]
+      | { list: Record<string, unknown>[]; pagination?: unknown },
+    pag?: { page?: number; size?: number; total?: number },
+  ) => {
+    let rows: Record<string, unknown>[]
+    if (Array.isArray(data)) {
+      rows = data
+      if (pag) {
+        pagination.value = {
+          page: pag.page ?? pagination.value.page,
+          size: pag.size ?? pagination.value.size,
+          total: pag.total ?? data.length,
+        }
+      } else {
+        pagination.value = { ...pagination.value, total: data.length }
+      }
+    } else {
+      rows = data.list || []
+      const p = (pag || data.pagination || {}) as {
+        page?: number
+        size?: number
+        total?: number
+      }
+      pagination.value = {
+        page: p.page ?? pagination.value.page,
+        size: p.size ?? pagination.value.size,
+        total: p.total ?? 0,
+      }
+    }
+
+    // toTree：扁平 parentId → 树
+    if (tableOpts?.tree) {
+      const nested = rows.some((r) => Array.isArray(r.children) && r.children.length)
+      list.value = nested ? rows : (deepTree(rows as never) as Record<string, unknown>[])
+    } else {
+      list.value = rows
+    }
+
+    selection.value = []
+    done()
+    mitt.emit('crud.refresh', { list: list.value, pagination: pagination.value })
+  }
+
+  const next = async (req: Record<string, unknown>) => {
+    try {
+      if (svc.page) {
+        const data = await svc.page(req)
+        render(data)
+        return data
+      }
+      const rows = (await svc.list!(req)) || []
+      render(rows)
+      return { list: rows, pagination: pagination.value }
+    } catch (e) {
+      console.error(e)
+      done()
+      throw e
+    }
+  }
+
+  try {
+    if (hookOptions?.onRefresh) {
+      await hookOptions.onRefresh(body, { next, done, render })
+    } else {
+      await next(body)
+    }
+  } catch {
+    done()
+  }
+}
+
+function setParams(p: Record<string, unknown>, doRefresh = true) {
+  params.value = { ...params.value, ...p }
+  if (doRefresh) {
+    pagination.value = { ...pagination.value, page: 1 }
+    void refresh()
+  }
+}
+
+function resetParams() {
+  params.value = { ...props.params }
+  pagination.value = { ...pagination.value, page: 1 }
+  void refresh()
+}
+
+function setSelection(rows: Record<string, unknown>[]) {
+  selection.value = rows
+}
+
+function rowAdd(defaults: Record<string, unknown> = {}) {
+  if (!permission.value.add) return
+  upsertMode.value = 'add'
+  upsertForm.value = { ...defaults }
+  upsertVisible.value = true
+  mitt.emit('crud.proxy', { name: 'add', data: [defaults] })
+}
+
+function rowAppend(data: Record<string, unknown> = {}) {
+  rowAdd(data)
+}
+
+async function loadRowForm(row: Record<string, unknown>, mode: 'update' | 'info') {
+  upsertMode.value = mode
+  const svc = service.value
+
+  const next = async (data?: Record<string, unknown>) => {
+    if (svc.info && row[dict.primaryId] != null) {
+      return await svc.info({
+        id: row[dict.primaryId] as string | number,
+        ...data,
+      })
+    }
+    return { ...row, ...data }
+  }
+
+  const done = (data: Record<string, unknown>) => {
+    upsertForm.value = data
+    upsertVisible.value = true
+  }
+
+  const close = () => upsertClose()
+
+  // 自定义拉详情
+  if (upsertOpts?.onInfo) {
+    await upsertOpts.onInfo({ ...row }, { next, done, close })
+    return
+  }
+
+  // sync：直接用行数据打开，不调 info
+  if (upsertOpts?.sync) {
+    done({ ...row })
+    return
+  }
+
+  try {
+    done(await next())
+  } catch {
+    done({ ...row })
+  }
+}
+
+async function rowEdit(row: Record<string, unknown>) {
+  if (!permission.value.update) return
+  await loadRowForm(row, 'update')
+  mitt.emit('crud.proxy', { name: 'edit', data: [row] })
+}
+
+async function rowInfo(row: Record<string, unknown>) {
+  if (!permission.value.info) return
+  await loadRowForm(row, 'info')
+  mitt.emit('crud.proxy', { name: 'info', data: [row] })
+}
+
+function rowClose() {
+  upsertClose()
+  mitt.emit('crud.proxy', { name: 'close' })
+}
+
+/** 打开 upsert（不校验 add 权限；供转移部门等自定义场景） */
+function openUpsert(
+  form: Record<string, unknown> = {},
+  mode: 'add' | 'update' | 'info' = 'add',
+) {
+  upsertMode.value = mode
+  upsertForm.value = { ...form }
+  upsertVisible.value = true
+}
+
+async function doDelete(targets: Record<string, unknown>[], force = false) {
+  const svc = service.value
+  if (!svc.delete) {
+    toast.error('未配置 delete')
+    return
+  }
+  const ids = targets
+    .map((r) => r[dict.primaryId] as string | number)
+    .filter((id) => id != null)
+  await svc.delete({ ids, force })
+  toast.success(force ? '已彻底删除' : dict.label.deleteSuccess || '已删除')
+  await refresh()
+}
+
+async function rowDelete(rows?: Record<string, unknown>[], force = false) {
+  // 回收站内删除一律硬删（避免操作列/批量删漏传 force 仍走软删文案）
+  const hard = force || trashMode.value === 'onlyTrashed'
+  if (!permission.value.delete && !hard) return
+  const targets = rows?.length ? rows : selection.value
+  if (!targets.length) {
+    toast.warning('请先选择数据')
+    return
+  }
+
+  const next = async (payload?: Record<string, unknown>) => {
+    if (payload?.ids) {
+      const svc = service.value
+      if (!svc.delete) throw new Error('未配置 delete')
+      await svc.delete({
+        ...(payload as { ids: Array<string | number> }),
+        force: hard,
+      })
+      toast.success(hard ? '已彻底删除' : dict.label.deleteSuccess || '已删除')
+      await refresh()
+      return
+    }
+    await doDelete(targets, hard)
+  }
+
+  if (hookOptions?.onDelete && !hard) {
+    await hookOptions.onDelete(targets, { next })
+    return
+  }
+
+  const tip = hard
+    ? dict.label.forceDeleteConfirm || '此操作将永久删除选中数据，是否继续？'
+    : dict.label.deleteConfirm || '确定删除？'
+  const ok = await vmConfirm({
+    title: hard ? '彻底删除' : '删除确认',
+    message: tip,
+    confirmText: '确定',
+    cancelText: '取消',
+  })
+  if (!ok) return
+  await next()
+}
+
+async function rowRestore(rows?: Record<string, unknown>[]) {
+  const targets = rows?.length ? rows : selection.value
+  if (!targets.length) {
+    toast.warning('请先选择数据')
+    return
+  }
+  const svc = service.value
+  if (!svc.restore) {
+    toast.error('未配置 restore')
+    return
+  }
+  if (!(await vmConfirm({ title: '恢复确认', message: '确定恢复？' }))) return
+  const ids = targets
+    .map((r) => r[dict.primaryId] as string | number)
+    .filter((id) => id != null)
+  await svc.restore({ ids })
+  toast.success('已恢复')
+  await refresh()
+}
+
+async function upsertSubmit() {
+  if (upsertMode.value === 'info') {
+    upsertClose()
+    return
+  }
+  // 系统时间字段由 BaseService.request 统一剥离，后端 Repository 再兜底
+  const data = { ...upsertForm.value }
+  const svc = service.value
+  try {
+    if (upsertMode.value === 'add') {
+      if (!svc.add) throw new Error('未配置 add')
+      await svc.add(data)
+      toast.success(dict.label.saveSuccess || '已新增')
+    } else {
+      if (!svc.update) throw new Error('未配置 update')
+      await svc.update(data)
+      toast.success(dict.label.saveSuccess || '已更新')
+    }
+    const after = async () => {
+      upsertVisible.value = false
+      await refresh()
+    }
+    if (upsertOpts?.onClose) {
+      upsertOpts.onClose('submit', () => {
+        void after()
+      })
+    } else {
+      await after()
+    }
+  } catch (e) {
+    console.error(e)
+    const err = e as Error & { toasted?: boolean }
+    const msg =
+      e instanceof Error && e.message ? e.message : '保存失败'
+    // request 已 toast 过则不再重复；本地校验/配置错误仍要提示
+    if (!err.toasted) toast.error(msg.slice(0, 200))
+  }
+}
+
+function upsertClose() {
+  const finish = () => {
+    upsertVisible.value = false
+  }
+  if (upsertOpts?.onClose) {
+    upsertOpts.onClose('close', finish)
+    return
+  }
+  finish()
+}
+
+/** 供页面可靠改表单（避免 template ref 解包 upsertForm 后误写） */
+function patchUpsertForm(patch: Record<string, unknown>) {
+  upsertForm.value = { ...upsertForm.value, ...patch }
+}
+
+function getUpsertForm() {
+  return upsertForm.value
+}
+
+const ctx: CrudContext = {
+  service: service.value,
+  loading,
+  list,
+  selection,
+  pagination,
+  params,
+  trashMode,
+  permission,
+  dict,
+  refresh,
+  setParams,
+  resetParams,
+  setSelection,
+  getPermission: getPermission as CrudContext['getPermission'],
+  getParams,
+  rowAdd,
+  rowAppend,
+  rowEdit,
+  rowInfo,
+  rowClose,
+  openUpsert,
+  rowDelete,
+  rowRestore,
+  upsertVisible,
+  upsertMode,
+  upsertForm,
+  upsertSubmit,
+  upsertClose,
+  patchUpsertForm,
+  getUpsertForm,
+  searchActions,
+  hasSearchFilters,
+}
+
+provide(CRUD_KEY, ctx)
+provide(CRUD_MITT_KEY, mitt)
+
+watch(
+  () => props.params,
+  (v) => {
+    params.value = { ...v }
+  },
+)
+
+watch(
+  service,
+  (s) => {
+    ctx.service = s
+    permission.value = mergePermission(
+      hookOptions?.permission,
+      permFromService(s),
+    )
+  },
+  { immediate: true },
+)
+
+if (props.immediate) void refresh()
+
+defineExpose({
+  ...ctx,
+  refresh,
+  setParams,
+  resetParams,
+  rowAdd,
+  rowAppend,
+  rowEdit,
+  rowInfo,
+  rowClose,
+  openUpsert,
+  rowDelete,
+  rowRestore,
+  upsertForm,
+  upsertClose,
+  patchUpsertForm,
+  getUpsertForm,
+  selection,
+  list,
+  pagination,
+  trashMode,
+  permission,
+  getPermission,
+  getParams,
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-crud {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 16px;
+  overflow: hidden;
+  border-radius: 24px;
+  background: var(--card);
+  box-shadow: var(--shadow-soft);
+}
+</style>