vome-core 0.0.1

package/src/admin/crud/components/vm-dict-tag.vue

@@ -0,0 +1,47 @@
+<template>
+  <span v-if="hit" class="vm-dict-tag" :style="tagStyle">{{ hit.label }}</span>
+  <span v-else class="vm-dict-tag is-empty">—</span>
+</template>
+
+<script setup lang="ts">
+import { getCrudStyle } from '../style'
+
+defineOptions({ name: 'vm-dict-tag' })
+
+const props = defineProps<{
+  modelValue?: string | number | boolean | null
+  options?: Array<{ label: string; value: string | number; type?: string; color?: string }>
+}>()
+
+const hit = computed(() =>
+  props.options?.find(
+    (d) => d.value === props.modelValue || String(d.value) === String(props.modelValue),
+  ),
+)
+
+const tagStyle = computed(() => {
+  if (!hit.value) return {}
+  if (hit.value.color) {
+    return { background: `${hit.value.color}22`, color: hit.value.color }
+  }
+  const colors = getCrudStyle().colors
+  const idx = props.options?.findIndex((d) => d === hit.value) ?? 0
+  const c = colors[idx % colors.length] || 'var(--brand)'
+  return { background: `${c}22`, color: c }
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-dict-tag {
+  display: inline-flex;
+  padding: 2px 8px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+
+  &.is-empty {
+    color: var(--muted-foreground);
+    background: transparent;
+  }
+}
+</style>

package/src/admin/crud/components/vm-file-icon.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { extname } from '../../lib/upload'
+
+defineOptions({ name: 'vm-file-icon' })
+
+const props = withDefaults(
+  defineProps<{
+    /** 扩展名、文件名或 iconfont 类名 */
+    name: string
+    size?: number | string
+  }>(),
+  { size: 24 },
+)
+
+let loaded = false
+
+onMounted(async () => {
+  if (loaded) return
+  loaded = true
+  await import('../../static/fileicon/iconfont.js')
+})
+
+const symbolId = computed(() => {
+  const raw = props.name.replace(/^\./, '')
+  if (raw.startsWith('icon-')) return `#${raw}`
+  const ext = extname(raw) || raw
+  const key = ext.toUpperCase()
+  if (key === '3GP') return '#icon-a-3GP'
+  return `#icon-${key}`
+})
+
+const px = computed(() =>
+  typeof props.size === 'number' ? `${props.size}px` : props.size,
+)
+</script>
+
+<template>
+  <svg
+    class="vm-file-icon"
+    aria-hidden="true"
+    :style="{ width: px, height: px }"
+  >
+    <use :xlink:href="symbolId" />
+  </svg>
+</template>
+
+<style lang="scss" scoped>
+.vm-file-icon {
+  display: inline-block;
+  vertical-align: middle;
+  fill: currentColor;
+  flex-shrink: 0;
+}
+</style>

package/src/admin/crud/components/vm-multi-select.vue

@@ -0,0 +1,181 @@
+<template>
+  <div ref="root" class="vm-multi-select" :class="{ 'is-open': open, 'is-disabled': disabled }">
+    <button
+      type="button"
+      class="vm-multi-select__trigger"
+      :disabled="disabled"
+      @click="open = !open"
+    >
+      <span class="vm-multi-select__label" :class="{ 'is-placeholder': !selected.length }">
+        {{ triggerText }}
+      </span>
+      <i class="ri-arrow-down-s-line vm-multi-select__caret" />
+    </button>
+    <div v-if="open" class="vm-multi-select__panel">
+      <label
+        v-for="opt in options"
+        :key="String(opt.value)"
+        class="vm-multi-select__option"
+      >
+        <input
+          type="checkbox"
+          :checked="isChecked(opt.value)"
+          @change="toggle(opt.value)"
+        />
+        <span>{{ opt.label }}</span>
+      </label>
+      <div v-if="!options.length" class="vm-multi-select__empty">暂无选项</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-multi-select' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: Array<string | number | boolean>
+    options?: Array<{ label: string; value: string | number | boolean }>
+    placeholder?: string
+    disabled?: boolean
+  }>(),
+  {
+    modelValue: () => [],
+    options: () => [],
+    placeholder: '请选择',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: Array<string | number | boolean>]
+  change: [v: Array<string | number | boolean>]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const open = ref(false)
+
+const selected = computed(() => props.modelValue || [])
+
+const triggerText = computed(() => {
+  if (!selected.value.length) return props.placeholder
+  const labels = selected.value.map((v) => {
+    const hit = props.options.find((o) => String(o.value) === String(v))
+    return hit?.label ?? String(v)
+  })
+  if (labels.length <= 2) return labels.join('、')
+  return `已选 ${labels.length} 项`
+})
+
+function isChecked(v: string | number | boolean) {
+  return selected.value.some((x) => String(x) === String(v))
+}
+
+function toggle(v: string | number | boolean) {
+  const next = [...selected.value]
+  const i = next.findIndex((x) => String(x) === String(v))
+  if (i >= 0) next.splice(i, 1)
+  else next.push(v)
+  emit('update:modelValue', next)
+  emit('change', next)
+}
+
+function onDoc(e: MouseEvent) {
+  if (!root.value?.contains(e.target as Node)) open.value = false
+}
+
+onMounted(() => document.addEventListener('mousedown', onDoc))
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDoc))
+</script>
+
+<style lang="scss" scoped>
+.vm-multi-select {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+
+  &.is-disabled {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+}
+
+.vm-multi-select__trigger {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--vm-control-height);
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background: var(--muted);
+  color: var(--foreground);
+  font-size: 13px;
+  cursor: pointer;
+
+  .is-open & {
+    border-color: var(--focus-border);
+  }
+}
+
+.vm-multi-select__label {
+  overflow: hidden;
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.is-placeholder {
+    color: var(--muted-foreground);
+  }
+}
+
+.vm-multi-select__caret {
+  flex: 0 0 auto;
+  color: var(--muted-foreground);
+  font-size: 14px;
+}
+
+.vm-multi-select__panel {
+  position: absolute;
+  z-index: 50;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  max-height: 220px;
+  overflow: auto;
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--card);
+  box-shadow: var(--shadow-card);
+}
+
+.vm-multi-select__option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  font-size: 13px;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--muted);
+  }
+
+  input {
+    accent-color: var(--brand);
+  }
+}
+
+.vm-multi-select__empty {
+  padding: 10px;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  text-align: center;
+}
+</style>

package/src/admin/crud/components/vm-number-range.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="vm-number-range" :class="{ 'is-disabled': disabled }">
+    <div class="vm-number-range__side">
+      <input
+        class="vm-number-range__input"
+        :type="mode === 'float' ? 'text' : 'number'"
+        inputmode="decimal"
+        :placeholder="startPlaceholder"
+        :disabled="disabled"
+        :value="display(0)"
+        @input="(e) => onInput(0, e)"
+        @blur="(e) => onBlur(0, e)"
+      />
+      <i class="ri-hashtag vm-number-range__icon" aria-hidden="true" />
+    </div>
+    <span class="vm-number-range__sep">-</span>
+    <div class="vm-number-range__side">
+      <input
+        class="vm-number-range__input"
+        :type="mode === 'float' ? 'text' : 'number'"
+        inputmode="decimal"
+        :placeholder="endPlaceholder"
+        :disabled="disabled"
+        :value="display(1)"
+        @input="(e) => onInput(1, e)"
+        @blur="(e) => onBlur(1, e)"
+      />
+      <i class="ri-hashtag vm-number-range__icon" aria-hidden="true" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-number-range' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: Array<number | string | null>
+    /** int = 整数；float = 最多两位小数 */
+    mode?: 'int' | 'float'
+    startPlaceholder?: string
+    endPlaceholder?: string
+    disabled?: boolean
+  }>(),
+  {
+    mode: 'int',
+    startPlaceholder: '最小值',
+    endPlaceholder: '最大值',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: Array<number | null>]
+  change: [v: Array<number | null>]
+}>()
+
+function display(idx: 0 | 1) {
+  const v = props.modelValue?.[idx]
+  return v == null || v === '' ? '' : String(v)
+}
+
+function parse(raw: string): number | null {
+  const t = raw.trim()
+  if (!t || t === '-' || t === '.' || t === '-.') return null
+  if (props.mode === 'int') {
+    if (!/^-?\d+$/.test(t)) return null
+    const n = Number(t)
+    return Number.isFinite(n) ? n : null
+  }
+  if (!/^-?\d+(\.\d{0,2})?$/.test(t)) return null
+  const n = Number(t)
+  if (!Number.isFinite(n)) return null
+  return Math.round(n * 100) / 100
+}
+
+function emitPair(next: Array<number | null>) {
+  emit('update:modelValue', next)
+  emit('change', next)
+}
+
+function onInput(idx: 0 | 1, e: Event) {
+  const el = e.target as HTMLInputElement
+  let raw = el.value
+  if (props.mode === 'int') {
+    raw = raw.replace(/[^\d-]/g, '').replace(/(?!^)-/g, '')
+  } else {
+    raw = raw
+      .replace(/[^\d.-]/g, '')
+      .replace(/(?!^)-/g, '')
+      .replace(/(\..*)\./g, '$1')
+    const m = raw.match(/^(-?\d*)(\.?\d{0,2})/)
+    raw = m ? `${m[1] || ''}${m[2] || ''}` : ''
+  }
+  el.value = raw
+  const next: Array<number | null> = [
+    props.modelValue?.[0] != null && props.modelValue[0] !== ''
+      ? Number(props.modelValue[0])
+      : null,
+    props.modelValue?.[1] != null && props.modelValue[1] !== ''
+      ? Number(props.modelValue[1])
+      : null,
+  ]
+  next[idx] = parse(raw)
+  emitPair(next)
+}
+
+function onBlur(idx: 0 | 1, e: Event) {
+  const raw = (e.target as HTMLInputElement).value
+  const next: Array<number | null> = [
+    props.modelValue?.[0] != null && props.modelValue[0] !== ''
+      ? Number(props.modelValue[0])
+      : null,
+    props.modelValue?.[1] != null && props.modelValue[1] !== ''
+      ? Number(props.modelValue[1])
+      : null,
+  ]
+  next[idx] = parse(raw)
+  emitPair(next)
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-number-range {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--vm-control-height);
+  align-items: center;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background: var(--muted);
+  gap: 0;
+
+  &.is-disabled {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+
+  &:focus-within {
+    border-color: var(--focus-border);
+  }
+}
+
+.vm-number-range__side {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 0;
+  height: 100%;
+  align-items: center;
+  gap: 6px;
+}
+
+.vm-number-range__input {
+  min-width: 0;
+  flex: 1 1 0;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--foreground);
+  font-size: 13px;
+  text-align: center;
+  outline: none;
+  appearance: textfield;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    margin: 0;
+    appearance: none;
+  }
+
+  &::placeholder {
+    color: var(--muted-foreground);
+  }
+}
+
+.vm-number-range__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  width: 14px;
+  height: 14px;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted-foreground);
+  font-size: 14px;
+  line-height: 1;
+  pointer-events: none;
+}
+
+.vm-number-range__sep {
+  flex: 0 0 auto;
+  padding: 0 8px;
+  color: var(--muted-foreground);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  user-select: none;
+}
+</style>

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

@@ -0,0 +1,87 @@
+<template>
+  <div class="vm-radio-group" role="radiogroup">
+    <label
+      v-for="opt in options"
+      :key="String(opt.value)"
+      class="vm-radio"
+    >
+      <input
+        type="radio"
+        :name="name"
+        :value="String(opt.value)"
+        :disabled="disabled"
+        :checked="String(modelValue ?? '') === String(opt.value)"
+        @change="onChange(opt.value)"
+      />
+      <span class="vm-radio__text">{{ opt.label }}</span>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-radio' })
+
+withDefaults(
+  defineProps<{
+    modelValue?: string | number | boolean | null
+    options?: Array<{ label: string; value: string | number | boolean }>
+    name?: string
+    disabled?: boolean
+  }>(),
+  {
+    options: () => [],
+    name: 'vm-radio',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: string | number | boolean]
+  change: [v: string | number | boolean]
+}>()
+
+function onChange(value: string | number | boolean) {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+</script>
+
+<style lang="scss">
+.vm-radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  min-height: var(--vm-control-height);
+  align-items: center;
+}
+
+.vm-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.5;
+  color: var(--foreground);
+  cursor: pointer;
+  user-select: none;
+
+  input {
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    accent-color: var(--brand);
+    cursor: pointer;
+  }
+
+  &:has(input:disabled) {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+}
+
+.vm-radio__text {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,131 @@
+<template>
+  <Select
+    :model-value="inner"
+    :disabled="disabled"
+    @update:model-value="onChange"
+  >
+    <SelectTrigger
+      class="vm-crud-select"
+      :class="{ 'is-full': isFullWidth }"
+      :style="triggerStyle"
+    >
+      <SelectValue :placeholder="placeholder || '请选择'" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem
+        v-for="opt in normalized"
+        :key="String(opt[valueKey])"
+        :value="String(opt[valueKey])"
+      >
+        {{ opt[labelKey] }}
+      </SelectItem>
+    </SelectContent>
+  </Select>
+</template>
+
+<script setup lang="ts">
+import { useCrud } from '../useCrud'
+
+defineOptions({ name: 'vm-select' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number | boolean | null
+    options?: Array<Record<string, unknown>>
+    prop?: string
+    labelKey?: string
+    valueKey?: string
+    placeholder?: string
+    /** 默认 100% 铺满；搜索栏可传 150px / 180px */
+    width?: string
+    disabled?: boolean
+    refreshOnChange?: boolean
+    api?: string | (() => Promise<unknown>)
+  }>(),
+  {
+    labelKey: 'label',
+    valueKey: 'value',
+    refreshOnChange: true,
+    width: '100%',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: string | number | boolean]
+  change: [v: string | number | boolean]
+}>()
+
+const crud = useCrud()
+const remote = ref<Array<Record<string, unknown>>>([])
+const inner = computed(() =>
+  props.modelValue == null || props.modelValue === ''
+    ? ''
+    : String(props.modelValue),
+)
+
+const isFullWidth = computed(
+  () => !props.width || props.width === '100%' || props.width === '100',
+)
+
+const triggerStyle = computed(() =>
+  isFullWidth.value ? undefined : { width: props.width },
+)
+
+const normalized = computed(() => {
+  const list = (props.options?.length ? props.options : remote.value) || []
+  return list as Array<Record<string, unknown>>
+})
+
+watch(
+  () => props.api,
+  async (api) => {
+    if (!api) return
+    try {
+      const req =
+        typeof api === 'function'
+          ? api()
+          : (crud.service[api] as (() => Promise<unknown>) | undefined)?.()
+      const res = await req
+      remote.value = Array.isArray(res) ? res : []
+    } catch {
+      remote.value = []
+    }
+  },
+  { immediate: true },
+)
+
+/** Radix Select 只认 string，提交时还原 options 里的原始类型 */
+function resolveOptionValue(v: unknown): string | number | boolean {
+  const s = v == null ? '' : String(v)
+  if (!s) return ''
+  const hit = normalized.value.find(
+    (o) => String(o[props.valueKey]) === s,
+  )
+  if (!hit) return s
+  const raw = hit[props.valueKey]
+  if (typeof raw === 'number' || typeof raw === 'boolean') return raw
+  return s
+}
+
+function onChange(v: unknown) {
+  const val = resolveOptionValue(v)
+  emit('update:modelValue', val)
+  emit('change', val)
+  if (props.prop && props.refreshOnChange) {
+    crud.refresh({ page: 1, [props.prop]: val === '' ? undefined : val })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-crud-select {
+  height: var(--vm-control-height);
+  border-radius: var(--vm-control-radius);
+  font-size: var(--vm-control-font-size);
+
+  &.is-full {
+    width: 100% !important;
+    max-width: 100%;
+  }
+}
+</style>