vome-core 0.0.1

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

@@ -0,0 +1,42 @@
+<template>
+  <div class="vm-crud-row">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-row' })
+</script>
+
+<style lang="scss" scoped>
+.vm-crud-row {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+
+  /* 筛选项为空时 vm-search 不渲染，避免占位行撑出顶部空白 */
+  &:empty {
+    display: none;
+  }
+
+  /* 包住表格的行：占满剩余高度，让表内滚动 */
+  &:has(.vm-crud-table) {
+    flex: 1;
+    min-height: 0;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    overflow: hidden;
+  }
+}
+
+/* 中窄屏工具行：刷新与操作按钮顶对齐、统一换行 */
+@media (max-width: 1280px) {
+  .vm-crud-row:has(.vm-crud-toolbar) {
+    align-items: flex-start;
+    gap: 8px;
+  }
+}
+</style>

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

@@ -0,0 +1,76 @@
+<template>
+  <div class="vm-crud-search-key">
+    <Input
+      class="vm-crud-search-key__input"
+      :model-value="keyword"
+      :placeholder="placeholder || crud.dict.label.searchKey"
+      @update:model-value="onInput"
+      @keydown.enter.prevent="search"
+    />
+    <button type="button" class="vm-crud-search-key__btn" @click="search">
+      {{ crud.dict.label.search }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCrud } from './useCrud'
+
+defineOptions({ name: 'vm-search-key' })
+
+const props = defineProps<{
+  placeholder?: string
+  prop?: string
+}>()
+
+const crud = useCrud()
+const keyword = ref('')
+const field = props.prop || crud.dict.search.keyWord
+
+function onInput(v: string | number) {
+  keyword.value = String(v)
+}
+
+function search() {
+  crud.setParams({ [field]: keyword.value || undefined }, true)
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-crud-search-key {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+:deep(.vm-crud-search-key__input) {
+  height: var(--vm-control-height) !important;
+  width: 200px;
+  border: 1px solid transparent !important;
+  border-radius: 12px !important;
+  background: var(--muted) !important;
+  box-shadow: none !important;
+
+  &:focus,
+  &:focus-visible {
+    border-color: var(--focus-border) !important;
+    box-shadow: none !important;
+  }
+}
+
+.vm-crud-search-key__btn {
+  height: var(--vm-control-height);
+  padding: 0 14px;
+  border: none;
+  border-radius: 12px;
+  background: var(--brand);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--brand-deep);
+  }
+}
+</style>

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

@@ -0,0 +1,367 @@
+<template>
+  <div v-if="items.length" class="vm-crud-search">
+    <div class="vm-crud-search__filters">
+      <template v-for="(item, idx) in items" :key="`${item.prop}-${idx}`">
+        <component
+          :is="resolveField(item)"
+          v-if="resolveField(item)"
+          class="vm-crud-search__control"
+          :class="{ 'is-range': isRange(item) }"
+          v-bind="fieldProps(item)"
+          :model-value="form[item.prop]"
+          @update:model-value="(v: unknown) => (form[item.prop] = v)"
+        />
+        <Select
+          v-else-if="item.type === 'select' && !item.multiple"
+          :model-value="String(form[item.prop] ?? '')"
+          @update:model-value="(v) => (form[item.prop] = coerceSelect(item, v))"
+        >
+          <SelectTrigger class="vm-crud-search__control">
+            <SelectValue :placeholder="item.placeholder || item.label" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem
+              v-for="opt in item.options || []"
+              :key="String(opt.value)"
+              :value="String(opt.value)"
+            >
+              {{ opt.label }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+        <Input
+          v-else
+          class="vm-crud-search__control"
+          :model-value="String(form[item.prop] ?? '')"
+          :placeholder="item.placeholder || item.label"
+          @update:model-value="(v) => (form[item.prop] = v)"
+          @keydown.enter.prevent="search"
+        />
+      </template>
+    </div>
+    <div v-if="inlineActions" class="vm-crud-search__actions">
+      <button type="button" class="vm-crud-search__btn is-primary" @click="search">搜索</button>
+      <button type="button" class="vm-crud-search__btn is-ghost" @click="reset">重置</button>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount } from 'vue'
+import { useCrud } from './useCrud'
+import { injectSearchOptions } from './key'
+import { buildAutoSearchItems } from './plugins'
+import { getCrudStyle } from './style'
+import { resolveCrudComponent } from './registry'
+import { service } from '../service'
+defineOptions({ name: 'vm-search' })
+
+const props = withDefaults(
+  defineProps<{
+    items?: CrudSearchItem[]
+    /** 为 true 时在筛选器同行显示搜索/重置（默认由 vm-toolbar 展示） */
+    inlineActions?: boolean
+  }>(),
+  { inlineActions: false },
+)
+
+const crud = useCrud()
+const searchOpts = injectSearchOptions()
+const autoItems = ref<CrudSearchItem[]>([])
+
+const manualItems = computed(
+  () => props.items?.length ? props.items : searchOpts?.items?.length ? searchOpts.items : [],
+)
+
+/** 自动项在前；手写项同 prop 覆盖自动项，避免多控件共绑 form[prop] */
+function mergeSearchItems(auto: CrudSearchItem[], manual: CrudSearchItem[]) {
+  const manualProps = new Set(manual.map((i) => i.prop).filter(Boolean))
+  const merged = [
+    ...auto.filter((i) => i.prop && !manualProps.has(i.prop)),
+    ...manual.filter((i) => i.prop),
+  ]
+  return merged
+}
+
+const items = computed(() => mergeSearchItems(autoItems.value, manualItems.value))
+
+const form = reactive<Record<string, unknown>>({})
+
+function isRange(item: CrudSearchItem) {
+  return item.type === 'number-range' || item.type === 'daterange' || Boolean(item.range)
+}
+
+function emptyValue(item: CrudSearchItem) {
+  if (isRange(item)) return [null, null]
+  if (item.multiple) return []
+  return ''
+}
+
+function coerceSelect(item: CrudSearchItem, v: unknown) {
+  const s = v == null ? '' : String(v)
+  if (!s) return ''
+  const hit = item.options?.find((o) => String(o.value) === s)
+  return hit ? hit.value : s
+}
+
+async function loadDictOptions(list: CrudSearchItem[]) {
+  const keys = [
+    ...new Set(list.map((i) => i.dict).filter((d): d is string => Boolean(d))),
+  ]
+  if (!keys.length) return
+  const dictApi = (service as { base?: { dictInfo?: { data?: (b: { types: string[] }) => Promise<unknown> } } })
+    .base?.dictInfo?.data
+  if (!dictApi) return
+  try {
+    const res = (await dictApi({ types: keys })) as Record<
+      string,
+      Array<{ name?: string; value?: unknown }>
+    >
+    for (const it of list) {
+      if (!it.dict || !res?.[it.dict]) continue
+      it.options = res[it.dict]!.map((row) => {
+        let value: string | number | boolean = row.value as string | number | boolean
+        if (typeof row.value === 'string' && /^-?\d+(\.\d+)?$/.test(row.value)) {
+          value = Number(row.value)
+        }
+        return { label: String(row.name ?? row.value ?? ''), value }
+      })
+    }
+  } catch {
+    /* 字典拉取失败时保留空 options */
+  }
+}
+
+onMounted(async () => {
+  const plugins = getCrudStyle().search.plugins as TablePlugin[]
+  const auto = plugins?.find((p) => p?.__plugin === 'setAuto')
+  if (auto) {
+    const svc = crud.service as { namespace?: string; search?: Record<string, unknown> }
+    autoItems.value = buildAutoSearchItems(svc, {
+      hideLabel: auto.hideLabel !== false,
+      ignoreFields: auto.ignoreFields as string[] | undefined,
+    })
+  }
+  await loadDictOptions(items.value)
+})
+
+watch(
+  items,
+  (list) => {
+    for (const it of list) {
+      if (!(it.prop in form)) form[it.prop] = emptyValue(it)
+    }
+    const active = list.length > 0
+    crud.hasSearchFilters.value = active
+    crud.searchActions.value = active ? { search, reset } : null
+  },
+  { immediate: true, deep: true },
+)
+
+function resolveField(item: CrudSearchItem) {
+  const name = item.component?.name
+  if (typeof name === 'string') {
+    const comp = resolveCrudComponent(name)
+    if (comp) return comp
+  } else if (name) {
+    return name
+  }
+  if (item.type === 'select' && item.multiple) {
+    return resolveCrudComponent('vm-multi-select')
+  }
+  if (item.type === 'daterange') {
+    return resolveCrudComponent('vm-date-range')
+  }
+  if (item.type === 'date') {
+    return resolveCrudComponent('vm-date-picker')
+  }
+  if (item.type === 'number-range') {
+    return resolveCrudComponent('vm-number-range')
+  }
+  if (item.type === 'select') return undefined
+  return undefined
+}
+
+function fieldProps(item: CrudSearchItem) {
+  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,
+    ...(item.component?.props || {}),
+  }
+}
+
+function search() {
+  const payload: Record<string, unknown> = {}
+  for (const it of items.value) {
+    const v = form[it.prop]
+    if (it.range) {
+      const pair = Array.isArray(v) ? v : [null, null]
+      if (pair[0] != null && pair[0] !== '') payload[it.range.min] = pair[0]
+      if (pair[1] != null && pair[1] !== '') payload[it.range.max] = pair[1]
+      continue
+    }
+    if (it.multiple) {
+      if (Array.isArray(v) && v.length) payload[it.prop] = v
+      continue
+    }
+    if (v !== '' && v != null) payload[it.prop] = v
+  }
+  crud.setParams(payload, true)
+}
+
+function reset() {
+  for (const it of items.value) {
+    form[it.prop] = emptyValue(it)
+  }
+  crud.resetParams()
+}
+
+onBeforeUnmount(() => {
+  crud.hasSearchFilters.value = false
+  if (crud.searchActions.value?.search === search) {
+    crud.searchActions.value = null
+  }
+})
+
+defineExpose({ form, search, reset })
+</script>
+
+<style lang="scss" scoped>
+.vm-crud-search {
+  --vm-search-gap: 12px;
+  container-type: inline-size;
+  container-name: vm-crud-search;
+
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--vm-search-gap);
+  margin-bottom: 6px;
+}
+
+.vm-crud-search__filters {
+  display: grid;
+  flex: 1 1 auto;
+  /* 默认 2 列；随容器变宽升到 8 列，单列始终 ≥140 */
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--vm-search-gap);
+  min-width: 0;
+  align-items: center;
+}
+
+/* n * 140 + (n-1) * 12 = 152n - 12 */
+@container vm-crud-search (min-width: 444px) {
+  .vm-crud-search__filters {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@container vm-crud-search (min-width: 596px) {
+  .vm-crud-search__filters {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@container vm-crud-search (min-width: 748px) {
+  .vm-crud-search__filters {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+
+@container vm-crud-search (min-width: 900px) {
+  .vm-crud-search__filters {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+
+@container vm-crud-search (min-width: 1052px) {
+  .vm-crud-search__filters {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+}
+
+@container vm-crud-search (min-width: 1204px) {
+  .vm-crud-search__filters {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+}
+
+.vm-crud-search__actions {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--vm-search-gap);
+}
+
+:deep(.vm-crud-search__control) {
+  box-sizing: border-box;
+  width: 100% !important;
+  min-width: 0 !important;
+  max-width: none !important;
+  height: var(--vm-control-height) !important;
+  border-radius: 12px !important;
+  box-shadow: none !important;
+
+  &:not(.is-range) {
+    border: 1px solid transparent !important;
+    background: var(--muted) !important;
+
+    &:focus,
+    &:focus-visible {
+      border-color: var(--focus-border) !important;
+      box-shadow: none !important;
+    }
+  }
+
+  /* 区间占两列：2 * 列宽 + 12px */
+  &.is-range {
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    height: var(--vm-control-height) !important;
+    grid-column: span 2;
+    padding: 0 10px !important;
+    border: 1px solid transparent !important;
+    border-radius: 12px !important;
+    background: var(--muted) !important;
+  }
+}
+
+.vm-crud-search__btn {
+  height: var(--vm-control-height);
+  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;
+
+  &.is-primary {
+    background: var(--brand);
+    color: #fff;
+
+    &:hover {
+      background: var(--brand-deep);
+    }
+  }
+
+  &.is-ghost {
+    background: var(--muted);
+    color: var(--foreground);
+
+    &:hover {
+      background: color-mix(in srgb, var(--muted) 70%, var(--foreground) 8%);
+    }
+  }
+}
+</style>