vome-core 0.0.1

package/src/admin/crud/plugins.ts

@@ -0,0 +1,298 @@
+import { findEpsEntity } from '../lib/eps'
+import { getCrudStyle } from './style'
+import type {
+  CrudSearchItem,
+  CrudTableOptions,
+  TablePlugin,
+} from '../../../typings/admin/comm/crud'
+
+export type { TablePlugin }
+
+/** 表格树形展示 */
+export function toTree(options: { lazy?: boolean } = {}): TablePlugin {
+  return {
+    __plugin: 'toTree',
+    tree: true,
+    lazy: options.lazy ?? false,
+  }
+}
+
+/** 表单自动聚焦 */
+export function setFocus(prop?: string) {
+  return {
+    __plugin: 'setFocus',
+    prop: prop ?? '',
+  }
+}
+
+/** required → rules */
+export function setRules() {
+  return {
+    __plugin: 'setRules',
+  }
+}
+
+/** 搜索项自动生成 */
+export function setAuto(
+  options: {
+    hideLabel?: boolean
+    ignoreFields?: string[]
+  } = { hideLabel: true },
+) {
+  return {
+    __plugin: 'setAuto',
+    ...options,
+  }
+}
+
+export const Plugins = {
+  Table: { toTree },
+  Form: { setFocus, setRules },
+  Search: { setAuto },
+}
+
+/** 把 plugins 合并进 table options + 全局 style */
+export function applyTablePlugins(
+  options?: CrudTableOptions & { plugins?: TablePlugin[] },
+): CrudTableOptions {
+  const style = getCrudStyle().table
+  const base: CrudTableOptions = {
+    border: style.border,
+    autoHeight: style.autoHeight,
+    contextMenu: style.contextMenu,
+    ...options,
+  }
+  const plugins = [
+    ...(style.plugins as TablePlugin[]),
+    ...((options?.plugins as TablePlugin[]) || []),
+  ]
+  const next: CrudTableOptions = { ...base }
+  delete (next as { plugins?: unknown }).plugins
+  for (const p of plugins) {
+    if (!p || typeof p !== 'object') continue
+    if (p.__plugin === 'toTree') {
+      next.tree = true
+      next.treeLazy = Boolean(p.lazy)
+    }
+  }
+  return next
+}
+
+type ColMeta = {
+  propertyName?: string
+  comment?: string
+  dict?: string | string[]
+  type?: string
+}
+
+type FieldRefObj = {
+  column: string
+  requestParam?: string
+  label?: string
+  dict?: string
+  multiple?: boolean
+  none?: boolean
+}
+
+type FieldRangeOp = {
+  column: string
+  min: string
+  max: string
+  type: NonNullable<CrudSearchItem['range']>['rangeType']
+  none?: boolean
+  label?: string
+}
+
+function stripAlias(name: string) {
+  return name.includes('.') ? name.split('.').pop()! : name
+}
+
+function parseRef(ref: unknown): {
+  column: string
+  param: string
+  label?: string
+  dict?: string
+  multiple: boolean
+  none: boolean
+} | null {
+  if (typeof ref === 'string') {
+    const column = stripAlias(ref)
+    return { column, param: column, multiple: true, none: false }
+  }
+  if (!ref || typeof ref !== 'object') return null
+  const o = ref as FieldRefObj
+  if (!o.column) return null
+  const column = stripAlias(o.column)
+  return {
+    column,
+    param: o.requestParam || column,
+    label: o.label,
+    dict: o.dict,
+    multiple: o.multiple !== false,
+    none: Boolean(o.none),
+  }
+}
+
+function displayName(
+  ref: { column: string; label?: string },
+  meta?: ColMeta,
+) {
+  return ref.label || meta?.comment || ref.column
+}
+
+/** 从 EPS / service.search 生成搜索项（跳过 none:true） */
+export function buildAutoSearchItems(
+  service: { namespace?: string; search?: Record<string, unknown> },
+  options: { hideLabel?: boolean; ignoreFields?: string[] } = {},
+): CrudSearchItem[] {
+  const ignore = new Set(options.ignoreFields || [])
+  const search = (service.search || {}) as {
+    fieldEq?: unknown[]
+    fieldLike?: unknown[]
+    fieldArray?: unknown[]
+    fieldRange?: FieldRangeOp[]
+    keyWordLikeFields?: unknown[]
+  }
+
+  let fieldEq = search.fieldEq || []
+  let fieldLike = search.fieldLike || []
+  let fieldArray = search.fieldArray || []
+  let fieldRange = search.fieldRange || []
+  let keyWordLikeFields = search.keyWordLikeFields || []
+  let cols: ColMeta[] = []
+
+  const entity = service.namespace
+    ? findEpsEntity(`/${service.namespace}`)
+    : undefined
+  if (entity) {
+    cols = [
+      ...((entity as { columns?: ColMeta[] }).columns || []),
+      ...((entity as { pageColumns?: ColMeta[] }).pageColumns || []),
+    ]
+    // service.search 未挂载时回退读 EPS.pageQueryOp
+    if (!service.search) {
+      const op = (entity as { pageQueryOp?: Record<string, unknown> }).pageQueryOp
+      if (op) {
+        fieldEq = (op.fieldEq as unknown[]) || []
+        fieldLike = (op.fieldLike as unknown[]) || []
+        fieldArray = (op.fieldArray as unknown[]) || []
+        fieldRange = (op.fieldRange as FieldRangeOp[]) || []
+        keyWordLikeFields = (op.keyWordLikeFields as unknown[]) || []
+      }
+    }
+  }
+
+  const colOf = (name: string) => cols.find((c) => c.propertyName === name)
+
+  const items: CrudSearchItem[] = []
+  const usedProps = new Set<string>()
+
+  const pushItem = (item: CrudSearchItem) => {
+    if (!item.prop || usedProps.has(item.prop)) return
+    usedProps.add(item.prop)
+    items.push(item)
+  }
+
+  for (const raw of fieldLike) {
+    const ref = parseRef(raw)
+    if (!ref || ref.none || ignore.has(ref.param)) continue
+    const meta = colOf(ref.column)
+    const name = displayName(ref, meta)
+    pushItem({
+      prop: ref.param,
+      label: options.hideLabel ? '' : name,
+      placeholder: `搜索${name}`,
+      type: 'input',
+    })
+  }
+
+  for (const raw of fieldArray) {
+    const ref = parseRef(raw)
+    if (!ref || ref.none || ignore.has(ref.param)) continue
+    const meta = colOf(ref.column)
+    const name = displayName(ref, meta)
+    pushItem({
+      prop: ref.param,
+      label: options.hideLabel ? '' : name,
+      placeholder: `搜索${name}`,
+      type: 'input',
+    })
+  }
+
+  for (const raw of fieldEq) {
+    const ref = parseRef(raw)
+    if (!ref || ref.none || ignore.has(ref.param)) continue
+    const meta = colOf(ref.column)
+    const dictKey =
+      ref.dict ||
+      (typeof meta?.dict === 'string'
+        ? meta.dict
+        : Array.isArray(meta?.dict)
+          ? meta.dict[0]
+          : undefined)
+    const name = displayName(ref, meta)
+    const label = options.hideLabel ? '' : name
+    if (dictKey) {
+      pushItem({
+        prop: ref.param,
+        label,
+        placeholder: `选择${name}`,
+        type: 'select',
+        dict: dictKey,
+        multiple: ref.multiple,
+      })
+    } else {
+      pushItem({
+        prop: ref.param,
+        label,
+        placeholder: `搜索${name}`,
+        type: 'input',
+      })
+    }
+  }
+
+  for (const r of fieldRange) {
+    if (!r?.column || r.none) continue
+    if (ignore.has(r.min) || ignore.has(r.max)) continue
+    const col = stripAlias(r.column)
+    const meta = colOf(col)
+    const name = r.label || meta?.comment || col
+    const label = options.hideLabel ? '' : name
+    const isNum = r.type === 'int' || r.type === 'float'
+    pushItem({
+      prop: `__range_${r.min}_${r.max}`,
+      label,
+      placeholder: name || '区间',
+      type: isNum ? 'number-range' : 'daterange',
+      range: { min: r.min, max: r.max, rangeType: r.type },
+      component: {
+        name: isNum ? 'vm-number-range' : 'vm-date-range',
+        props: isNum
+          ? { mode: r.type, startPlaceholder: '最小值', endPlaceholder: '最大值' }
+          : {
+              precision: r.type,
+              startPlaceholder: '开始时间',
+              endPlaceholder: '结束时间',
+            },
+      },
+    })
+  }
+
+  if (keyWordLikeFields.length) {
+    const names = keyWordLikeFields
+      .map((raw) => {
+        const ref = parseRef(raw)
+        if (!ref) return typeof raw === 'string' ? stripAlias(raw) : ''
+        return displayName(ref, colOf(ref.column))
+      })
+      .filter(Boolean)
+    pushItem({
+      prop: 'keyWord',
+      label: options.hideLabel ? '' : '关键字',
+      placeholder: `搜索${names.join('、') || '关键字'}`,
+      type: 'input',
+    })
+  }
+
+  return items
+}

package/src/admin/crud/registry.ts

@@ -0,0 +1,45 @@
+import type { Component } from 'vue'
+
+type Mod = { default: Component }
+
+/** 文件名即注册名：vm-switch.vue → vm-switch（新建放入目录即生效） */
+function registerGlob(
+  modules: Record<string, Mod>,
+  into: Record<string, Component>,
+) {
+  for (const [file, mod] of Object.entries(modules)) {
+    const base = file.split('/').pop()?.replace(/\.vue$/, '')
+    if (!base?.startsWith('vm-') || !mod?.default) continue
+    into[base] = mod.default
+  }
+}
+
+const map: Record<string, Component> = {}
+
+registerGlob(
+  import.meta.glob<Mod>('./components/vm-*.vue', { eager: true }),
+  map,
+)
+registerGlob(
+  import.meta.glob<Mod>('../components/vm-*.vue', { eager: true }),
+  map,
+)
+
+/** 组件别名 */
+if (map['vm-view-path-picker']) {
+  map['vm-view-path'] = map['vm-view-path-picker']
+}
+
+export function registerCrudComponent(name: string, comp: Component) {
+  map[name] = comp
+}
+
+export function resolveCrudComponent(
+  name?: string | Component,
+): Component | undefined {
+  if (!name) return undefined
+  if (typeof name !== 'string') return name
+  return map[name]
+}
+
+export { map as crudComponentMap }

package/src/admin/crud/span.ts

@@ -0,0 +1,48 @@
+import { onMounted, onUnmounted, ref, type Ref } from 'vue'
+import { getCrudStyle } from './style'
+
+/** 桌面表单栅格列数（全宽 span = 24） */
+export const FORM_COLS_DESKTOP = 24
+/** 移动端表单栅格列数（全宽 span = 12） */
+export const FORM_COLS_MOBILE = 12
+/** 配置侧全宽默认值（一律按 24 栅格书写） */
+export const FORM_SPAN_FULL = 24
+
+export const FORM_MQ_MOBILE = '(max-width: 768px)'
+
+/** 当前断点下列数：桌面 24 / 移动端 12 */
+export function getFormCols(): number {
+  if (typeof window !== 'undefined' && window.matchMedia(FORM_MQ_MOBILE).matches) {
+    return FORM_COLS_MOBILE
+  }
+  return FORM_COLS_DESKTOP
+}
+
+/**
+ * 将 items.span（按 24 栅格配置）换算为当前网格列数下的 span。
+ * 移动端：24 → 12（全宽），12 → 6（半宽）。
+ */
+export function resolveFormSpan(span?: number, cols = getFormCols()): number {
+  const raw = span ?? getCrudStyle().form.span ?? FORM_SPAN_FULL
+  const normalized = Math.min(FORM_SPAN_FULL, Math.max(1, raw))
+  if (cols === FORM_COLS_DESKTOP) return normalized
+  return Math.max(1, Math.round((normalized / FORM_COLS_DESKTOP) * FORM_COLS_MOBILE))
+}
+
+/** 响应式列数，断点变化时触发重渲染 */
+export function useFormCols(): Ref<number> {
+  const cols = ref(getFormCols())
+  let mql: MediaQueryList | null = null
+  const sync = () => {
+    cols.value = getFormCols()
+  }
+  onMounted(() => {
+    mql = window.matchMedia(FORM_MQ_MOBILE)
+    mql.addEventListener('change', sync)
+    sync()
+  })
+  onUnmounted(() => {
+    mql?.removeEventListener('change', sync)
+  })
+  return cols
+}

package/src/admin/crud/style.ts

@@ -0,0 +1,112 @@
+import { CRUD_LABELS, DEFAULT_CRUD_DICT } from './dict'
+
+/** CRUD 默认样式配置 */
+export type CrudStyleConfig = {
+  form: {
+    labelPosition: 'top' | 'left' | 'right'
+    labelWidth: string
+    span: number
+    plugins: unknown[]
+  }
+  table: {
+    border: boolean
+    highlightCurrentRow: boolean
+    autoHeight: boolean
+    contextMenu: boolean | string[]
+    column: {
+      align: 'left' | 'center' | 'right'
+      opWidth: number
+    }
+    plugins: unknown[]
+  }
+  search: {
+    plugins: unknown[]
+  }
+  colors: string[]
+}
+
+export type CrudGlobalConfig = {
+  dict: CrudDict
+  style: CrudStyleConfig
+}
+
+export const DEFAULT_CRUD_STYLE: CrudStyleConfig = {
+  form: {
+    labelPosition: 'top',
+    labelWidth: '100px',
+    span: 24,
+    plugins: [],
+  },
+  table: {
+    border: false,
+    highlightCurrentRow: true,
+    autoHeight: true,
+    contextMenu: ['refresh', 'check', 'edit', 'delete', 'order-asc', 'order-desc'],
+    column: {
+      align: 'left',
+      opWidth: 180,
+    },
+    plugins: [],
+  },
+  search: {
+    plugins: [],
+  },
+  colors: [
+    '#4E5DFF',
+    '#06b31c',
+    '#e93f4d',
+    '#d57121',
+    '#6d17c3',
+    '#04c273',
+    '#aa7a24',
+    '#1c109d',
+  ],
+}
+
+let globalConfig: CrudGlobalConfig = {
+  dict: { ...DEFAULT_CRUD_DICT, label: { ...CRUD_LABELS } },
+  style: structuredClone(DEFAULT_CRUD_STYLE),
+}
+
+/** 安装/覆盖全局 CRUD 配置 */
+export function setCrudConfig(partial?: {
+  dict?: Partial<CrudDict>
+  style?: Partial<CrudStyleConfig>
+}) {
+  if (!partial) return globalConfig
+  globalConfig = {
+    dict: {
+      ...globalConfig.dict,
+      ...partial.dict,
+      api: { ...globalConfig.dict.api, ...partial.dict?.api },
+      pagination: { ...globalConfig.dict.pagination, ...partial.dict?.pagination },
+      search: { ...globalConfig.dict.search, ...partial.dict?.search },
+      sort: { ...globalConfig.dict.sort, ...partial.dict?.sort },
+      label: { ...globalConfig.dict.label, ...partial.dict?.label },
+    },
+    style: {
+      ...globalConfig.style,
+      ...partial.style,
+      form: { ...globalConfig.style.form, ...partial.style?.form },
+      table: {
+        ...globalConfig.style.table,
+        ...partial.style?.table,
+        column: {
+          ...globalConfig.style.table.column,
+          ...partial.style?.table?.column,
+        },
+      },
+      search: { ...globalConfig.style.search, ...partial.style?.search },
+      colors: partial.style?.colors || globalConfig.style.colors,
+    },
+  }
+  return globalConfig
+}
+
+export function getCrudConfig() {
+  return globalConfig
+}
+
+export function getCrudStyle() {
+  return globalConfig.style
+}

package/src/admin/crud/useCrud.ts

@@ -0,0 +1,81 @@
+import {
+  inject,
+  provide,
+  ref,
+  watch,
+  type Ref,
+} from 'vue'
+import {
+  CRUD_KEY,
+  CRUD_OPTIONS_KEY,
+  SEARCH_OPTIONS_KEY,
+  TABLE_OPTIONS_KEY,
+  UPSERT_OPTIONS_KEY,
+} from './key'
+import { applyTablePlugins } from './plugins'
+
+/**
+ * useCrud：
+ * - useCrud(options, cb) provide 配置；模板 ref="Crud" 拿到实例后 cb
+ * - useCrud() 在子组件 inject
+ */
+export function useCrud(): CrudContext
+export function useCrud(
+  options: CrudOptions,
+  cb?: (app: CrudContext) => void,
+): Ref<CrudContext | undefined>
+export function useCrud(
+  options?: CrudOptions,
+  cb?: (app: CrudContext) => void,
+) {
+  if (!options) {
+    const ctx = inject(CRUD_KEY)
+    if (!ctx) throw new Error('[useCrud] 必须在 VmCrud 内使用')
+    return ctx
+  }
+
+  provide(CRUD_OPTIONS_KEY, options)
+  const Crud = ref<CrudContext>()
+
+  watch(
+    Crud,
+    (val) => {
+      if (val && cb) cb(val)
+    },
+    { immediate: true },
+  )
+
+  return Crud
+}
+
+export function useTable(
+  options?: CrudTableOptions & { plugins?: TablePlugin[] },
+  cb?: (table: unknown) => void,
+) {
+  const Table = ref()
+  if (options) provide(TABLE_OPTIONS_KEY, applyTablePlugins(options))
+  watch(Table, (val) => {
+    if (val && cb) cb(val)
+  })
+  return Table
+}
+
+export function useUpsert(options?: CrudUpsertOptions) {
+  const Upsert = ref()
+  if (options) provide(UPSERT_OPTIONS_KEY, options)
+  return Upsert
+}
+
+export function useSearch(options?: CrudSearchOptions) {
+  const Search = ref()
+  if (options) provide(SEARCH_OPTIONS_KEY, options)
+  return Search
+}
+
+export function useCore() {
+  const crud = inject(CRUD_KEY)
+  if (!crud) throw new Error('[useCore] 必须在 VmCrud 内使用')
+  return { crud }
+}
+
+export { CRUD_KEY }

package/src/admin/crud/validate.ts

@@ -0,0 +1,109 @@
+export type CrudRule = {
+  required?: boolean
+  message?: string
+  min?: number
+  max?: number
+  pattern?: RegExp
+  validator?: (
+    value: unknown,
+    form: Record<string, unknown>,
+  ) => true | string | Promise<true | string>
+}
+
+function isEmpty(v: unknown) {
+  if (v == null || v === '') return true
+  if (typeof v === 'string' && v.trim() === '') return true
+  if (Array.isArray(v) && v.length === 0) return true
+  return false
+}
+
+function normalizeRules(item: CrudFormItem): CrudRule[] {
+  const rules: CrudRule[] = []
+  if (item.required) {
+    rules.push({
+      required: true,
+      message: `${item.label}不能为空`,
+    })
+  }
+  const raw = item.rules
+  if (!raw) return rules
+  if (Array.isArray(raw)) {
+    for (const r of raw) {
+      if (r && typeof r === 'object') rules.push(r as CrudRule)
+    }
+  } else if (typeof raw === 'object') {
+    rules.push(raw as CrudRule)
+  }
+  return rules
+}
+
+function isItemHidden(item: CrudFormItem, form: Record<string, unknown>) {
+  if (typeof item.hidden === 'function') return item.hidden(form)
+  return Boolean(item.hidden)
+}
+
+async function validateItem(
+  item: CrudFormItem,
+  form: Record<string, unknown>,
+): Promise<string | null> {
+  const value = form[item.prop]
+  for (const rule of normalizeRules(item)) {
+    if (rule.required && isEmpty(value)) {
+      return rule.message || `${item.label}不能为空`
+    }
+    if (isEmpty(value)) continue
+    const str = String(value)
+    if (rule.min != null && str.length < rule.min) {
+      return rule.message || `${item.label}至少 ${rule.min} 个字符`
+    }
+    if (rule.max != null && str.length > rule.max) {
+      return rule.message || `${item.label}最多 ${rule.max} 个字符`
+    }
+    if (rule.pattern && !rule.pattern.test(str)) {
+      return rule.message || `${item.label}格式不正确`
+    }
+    if (rule.validator) {
+      const r = await rule.validator(value, form)
+      if (r !== true) return r || `${item.label}校验失败`
+    }
+  }
+  return null
+}
+
+/** 校验表单项；失败返回错误文案，成功返回 null */
+export async function validateFormItems(
+  items: CrudFormItem[],
+  form: Record<string, unknown>,
+): Promise<string | null> {
+  for (const item of items) {
+    if (isItemHidden(item, form)) continue
+    const err = await validateItem(item, form)
+    if (err) return err
+  }
+  return null
+}
+
+/** 按字段返回校验错误（字段下红字） */
+export async function validateFormFields(
+  items: CrudFormItem[],
+  form: Record<string, unknown>,
+): Promise<Record<string, string>> {
+  const errors: Record<string, string> = {}
+  for (const item of items) {
+    if (isItemHidden(item, form)) continue
+    const err = await validateItem(item, form)
+    if (err) errors[item.prop] = err
+  }
+  return errors
+}
+
+/** setRules：required 自动补全 rules（若尚未配置） */
+export function applySetRules(items: CrudFormItem[]): CrudFormItem[] {
+  return items.map((it) => {
+    if (!it.required || it.rules) return it
+    return {
+      ...it,
+      rules: [{ required: true, message: `${it.label}不能为空` }],
+    }
+  })
+}