vome-core 0.0.1

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

@@ -0,0 +1,234 @@
+<template>
+  <div class="vm-user-select" @click="open = true">
+    <template v-if="selected.length">
+      <span
+        v-for="u in selected"
+        :key="String(u.id)"
+        class="vm-user-select__tag"
+      >
+        {{ u[labelKey] }}
+      </span>
+      <button type="button" class="vm-user-select__clear" @click.stop="clear">
+        <i class="ri-close-circle-line" />
+      </button>
+    </template>
+    <span v-else class="vm-user-select__ph">{{ placeholder }}</span>
+  </div>
+
+  <vm-dialog v-model:open="open" :title="title" width="520px">
+    <Input
+      v-model="keyWord"
+      class="vm-user-select__search"
+      placeholder="搜索用户名 / 昵称"
+      @keydown.enter.prevent="load"
+    />
+    <div class="vm-user-select__list">
+      <button
+        v-for="u in list"
+        :key="String(u.id)"
+        type="button"
+        class="vm-user-select__item"
+        :class="{ 'is-on': isSelected(u.id) }"
+        @click="toggle(u)"
+      >
+        <span>{{ u[labelKey] || u.username }}</span>
+        <span class="vm-user-select__meta">{{ u.username }}</span>
+      </button>
+      <p v-if="!list.length" class="vm-user-select__empty">暂无用户</p>
+    </div>
+    <template #footer>
+      <button type="button" class="vm-user-select__btn is-ghost" @click="open = false">
+        取消
+      </button>
+      <button type="button" class="vm-user-select__btn is-primary" @click="confirm">
+        确定
+      </button>
+    </template>
+  </vm-dialog>
+</template>
+
+<script setup lang="ts">
+import { service } from '../../service'
+
+defineOptions({ name: 'vm-user-select' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number | Array<string | number> | null
+    multiple?: boolean
+    title?: string
+    placeholder?: string
+    labelKey?: string
+    immediate?: boolean
+  }>(),
+  {
+    multiple: false,
+    title: '选择成员',
+    placeholder: '请选择',
+    labelKey: 'nickName',
+    immediate: false,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: string | number | Array<string | number> | null]
+}>()
+
+const open = ref(false)
+const keyWord = ref('')
+const list = ref<Record<string, unknown>[]>([])
+const picked = ref<Record<string, unknown>[]>([])
+
+const selected = computed(() => picked.value)
+
+watch(
+  () => props.immediate,
+  (v) => {
+    if (v) void load()
+  },
+  { immediate: true },
+)
+
+watch(open, (v) => {
+  if (v) void load()
+})
+
+async function load() {
+  try {
+    const res = await service.base.user.page({
+      page: 1,
+      size: 50,
+      keyWord: keyWord.value || undefined,
+    })
+    list.value = res.list || []
+  } catch {
+    list.value = []
+  }
+}
+
+function isSelected(id: unknown) {
+  return picked.value.some((u) => String(u.id) === String(id))
+}
+
+function toggle(u: Record<string, unknown>) {
+  if (props.multiple) {
+    if (isSelected(u.id)) {
+      picked.value = picked.value.filter((x) => String(x.id) !== String(u.id))
+    } else {
+      picked.value = [...picked.value, u]
+    }
+  } else {
+    picked.value = [u]
+  }
+}
+
+function clear() {
+  picked.value = []
+  emit('update:modelValue', props.multiple ? [] : null)
+}
+
+function confirm() {
+  if (props.multiple) {
+    emit(
+      'update:modelValue',
+      picked.value.map((u) => u.id as string | number),
+    )
+  } else {
+    emit('update:modelValue', (picked.value[0]?.id as string | number) ?? null)
+  }
+  open.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-user-select {
+  display: flex;
+  min-height: var(--vm-control-height);
+  align-items: center;
+  gap: 6px;
+  padding: 0 var(--vm-control-padding-x);
+  border: 1px solid var(--border);
+  border-radius: var(--vm-control-radius);
+  background: var(--card);
+  cursor: pointer;
+}
+
+.vm-user-select__ph {
+  color: var(--muted-foreground);
+  font-size: 13px;
+}
+
+.vm-user-select__tag {
+  padding: 2px 8px;
+  border-radius: 8px;
+  background: var(--brand-soft);
+  color: var(--brand);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.vm-user-select__clear {
+  margin-left: auto;
+  border: none;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+}
+
+.vm-user-select__search {
+  margin-bottom: 10px;
+}
+
+.vm-user-select__list {
+  max-height: 360px;
+  overflow: auto;
+}
+
+.vm-user-select__item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover,
+  &.is-on {
+    background: var(--brand-soft);
+  }
+}
+
+.vm-user-select__meta {
+  color: var(--muted-foreground);
+  font-size: 12px;
+}
+
+.vm-user-select__empty {
+  padding: 24px;
+  color: var(--muted-foreground);
+  text-align: center;
+}
+
+.vm-user-select__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/config.ts

@@ -0,0 +1,38 @@
+import { getCrudConfig } from './style'
+import { CRUD_LABELS, DEFAULT_CRUD_DICT } from './dict'
+
+export { CRUD_LABELS, DEFAULT_CRUD_DICT }
+
+export const DEFAULT_CRUD_PERMISSION: CrudPermission = {
+  page: true,
+  list: true,
+  info: true,
+  add: true,
+  delete: true,
+  update: true,
+}
+
+export function mergeDict(partial?: Partial<CrudDict>): CrudDict {
+  const base = getCrudConfig().dict
+  if (!partial) return { ...base, label: { ...base.label } }
+  return {
+    ...base,
+    ...partial,
+    api: { ...base.api, ...partial.api },
+    pagination: { ...base.pagination, ...partial.pagination },
+    search: { ...base.search, ...partial.search },
+    sort: { ...base.sort, ...partial.sort },
+    label: { ...base.label, ...partial.label },
+  }
+}
+
+export function mergePermission(
+  partial?: Partial<CrudPermission>,
+  fromService?: Partial<CrudPermission>,
+): CrudPermission {
+  return {
+    ...DEFAULT_CRUD_PERMISSION,
+    ...fromService,
+    ...partial,
+  }
+}

package/src/admin/crud/confirm.ts

@@ -0,0 +1,135 @@
+import { createApp, h, ref } from 'vue'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '#vome-host/components/ui/dialog'
+
+type ConfirmOptions = {
+  title?: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+}
+
+/**
+ * 确认对话框
+ */
+export function vmConfirm(options: ConfirmOptions | string): Promise<boolean> {
+  const opts: ConfirmOptions =
+    typeof options === 'string' ? { message: options } : options
+
+  return new Promise((resolve) => {
+    const open = ref(true)
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const app = createApp({
+      setup() {
+        function finish(ok: boolean) {
+          open.value = false
+          resolve(ok)
+          setTimeout(() => {
+            app.unmount()
+            host.remove()
+          }, 200)
+        }
+
+        return () =>
+          h(
+            Dialog,
+            {
+              open: open.value,
+              'onUpdate:open': (v: boolean) => {
+                if (!v) finish(false)
+              },
+            },
+            {
+              default: () =>
+                h(
+                  DialogContent,
+                  { class: 'vm-confirm', showCloseButton: false },
+                  {
+                    default: () => [
+                      h(DialogHeader, { class: 'vm-confirm__head' }, () =>
+                        h(DialogTitle, { class: 'vm-confirm__title' }, () =>
+                          opts.title || '提示',
+                        ),
+                      ),
+                      h('div', { class: 'vm-confirm__body' }, opts.message),
+                      h(DialogFooter, { class: 'vm-confirm__foot' }, () => [
+                        h(
+                          'button',
+                          {
+                            type: 'button',
+                            class: 'vm-confirm__btn is-ghost',
+                            onClick: () => finish(false),
+                          },
+                          opts.cancelText || '取消',
+                        ),
+                        h(
+                          'button',
+                          {
+                            type: 'button',
+                            class: 'vm-confirm__btn is-primary',
+                            onClick: () => finish(true),
+                          },
+                          opts.confirmText || '确定',
+                        ),
+                      ]),
+                    ],
+                  },
+                ),
+            },
+          )
+      },
+    })
+
+    app.mount(host)
+  })
+}
+
+if (typeof document !== 'undefined' && !document.getElementById('vm-confirm-style')) {
+  const style = document.createElement('style')
+  style.id = 'vm-confirm-style'
+  style.textContent = `
+.vm-confirm[data-slot='dialog-content'] {
+  width: min(400px, calc(100vw - 32px)) !important;
+  max-width: min(400px, calc(100vw - 32px)) !important;
+  gap: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 24px !important;
+  box-shadow: var(--shadow-soft) !important;
+}
+.vm-confirm__head { padding: 18px 22px 0; border-bottom: none; }
+.vm-confirm__title { font-size: 16px; font-weight: 650; }
+.vm-confirm__body {
+  padding: 12px 22px 8px;
+  color: var(--foreground);
+  font-size: 14px;
+  line-height: 1.6;
+}
+.vm-confirm__foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 14px 22px;
+}
+.vm-confirm__btn {
+  height: 36px;
+  padding: 0 16px;
+  border: none;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.vm-confirm__btn.is-primary { background: var(--brand); color: #fff; }
+.vm-confirm__btn.is-primary:hover { background: var(--brand-deep); }
+.vm-confirm__btn.is-ghost { background: var(--muted); color: var(--foreground); }
+`
+  document.head.appendChild(style)
+}

package/src/admin/crud/dict.ts

@@ -0,0 +1,49 @@
+/** 表格/表单默认文案（zh-cn） */
+export const CRUD_LABELS: CrudDict['label'] = {
+  op: '操作',
+  add: '新增',
+  delete: '删除',
+  multiDelete: '删除',
+  update: '编辑',
+  refresh: '刷新',
+  info: '详情',
+  search: '搜索',
+  reset: '重置',
+  clear: '清空',
+  save: '保存',
+  close: '取消',
+  confirm: '确定',
+  advSearch: '高级搜索',
+  searchKey: '搜索关键字',
+  placeholder: '请输入',
+  tips: '提示',
+  saveSuccess: '保存成功',
+  deleteSuccess: '删除成功',
+  deleteConfirm: '此操作将数据标记为已删除，是否继续？',
+  forceDeleteConfirm: '此操作将永久删除选中数据，是否继续？',
+  empty: '暂无数据',
+  desc: '降序',
+  asc: '升序',
+  select: '选择',
+  deselect: '取消选择',
+  seeMore: '查看更多',
+  hideContent: '隐藏内容',
+  nonEmpty: '不能为空',
+}
+
+export const DEFAULT_CRUD_DICT: CrudDict = {
+  primaryId: 'id',
+  api: {
+    list: 'list',
+    add: 'add',
+    update: 'update',
+    delete: 'delete',
+    info: 'info',
+    page: 'page',
+  },
+  pagination: { page: 'page', size: 'size' },
+  search: { keyWord: 'keyWord', query: 'query' },
+  // QueryOp：order=字段名，sort=asc|desc（键名为 order/sort）
+  sort: { prop: 'order', order: 'sort' },
+  label: CRUD_LABELS,
+}

package/src/admin/crud/index.ts

@@ -0,0 +1,79 @@
+export { default as VmCrud } from './vm-crud.vue'
+export { default as VmSearch } from './vm-search.vue'
+export { default as VmSearchKey } from './vm-search-key.vue'
+export { default as VmTable } from './vm-table.vue'
+export { default as VmPagination } from './vm-pagination.vue'
+export { default as VmUpsert } from './vm-upsert.vue'
+export { default as VmToolbar } from './vm-toolbar.vue'
+export { default as VmRow } from './vm-row.vue'
+export { default as VmFlex1 } from './vm-flex1.vue'
+export { default as VmAddBtn } from './vm-add-btn.vue'
+export { default as VmRefreshBtn } from './vm-refresh-btn.vue'
+export { default as VmMultiDeleteBtn } from './vm-multi-delete-btn.vue'
+export { default as VmDialog } from './vm-dialog.vue'
+export { default as VmForm } from './vm-form.vue'
+export { default as VmAdvSearch } from './vm-adv-search.vue'
+
+export { default as VmSwitch } from './components/vm-switch.vue'
+export { default as VmSelect } from './components/vm-select.vue'
+export { default as VmTreeSelect } from './components/vm-tree-select.vue'
+export { default as VmRadio } from './components/vm-radio.vue'
+export { default as VmDateText } from './components/vm-date-text.vue'
+export { default as VmDatePicker } from './components/vm-date-picker.vue'
+export { default as VmDateRange } from './components/vm-date-range.vue'
+export { default as VmNumberRange } from './components/vm-number-range.vue'
+export { default as VmMultiSelect } from './components/vm-multi-select.vue'
+export { default as VmDictTag } from './components/vm-dict-tag.vue'
+export { default as VmUserSelect } from './components/vm-user-select.vue'
+export { default as VmColumnCustom } from './components/vm-column-custom.vue'
+export { default as VmContextMenu } from './components/vm-context-menu.vue'
+export { default as VmUpload } from './components/vm-upload.vue'
+export { default as VmUploadItem } from './components/vm-upload-item.vue'
+export { default as VmFileIcon } from './components/vm-file-icon.vue'
+
+export { vmConfirm } from './confirm'
+export {
+  useCrud,
+  useTable,
+  useUpsert,
+  useSearch,
+  useCore,
+  CRUD_KEY,
+} from './useCrud'
+
+export { Plugins, toTree, setFocus, setRules, setAuto, buildAutoSearchItems } from './plugins'
+export { deepTree, flattenTree } from '../lib/tree'
+export { resolveCrudComponent, registerCrudComponent } from './registry'
+export {
+  setCrudConfig,
+  getCrudConfig,
+  getCrudStyle,
+  DEFAULT_CRUD_STYLE,
+} from './style'
+
+export {
+  FORM_COLS_DESKTOP,
+  FORM_COLS_MOBILE,
+  FORM_SPAN_FULL,
+  FORM_MQ_MOBILE,
+  getFormCols,
+  resolveFormSpan,
+  useFormCols,
+} from './span'
+
+export { mergeDict, mergePermission, DEFAULT_CRUD_DICT, CRUD_LABELS } from './config'
+
+export type {
+  CrudService,
+  CrudColumn,
+  CrudSearchItem,
+  CrudFormItem,
+  CrudContext,
+  CrudTrashMode,
+  CrudOptions,
+  CrudTableOptions,
+  CrudUpsertOptions,
+  CrudSearchOptions,
+  CrudPermission,
+  CrudDict,
+} from '../../../typings/admin/comm/crud'

package/src/admin/crud/key.ts

@@ -0,0 +1,47 @@
+import { inject, type InjectionKey } from 'vue'
+import type {
+  CrudColumn,
+  CrudContext,
+  CrudOptions,
+  CrudSearchOptions,
+  CrudTableOptions,
+  CrudUpsertOptions,
+} from '../../../typings/admin/comm/crud'
+import type { Mitt } from './mitt'
+
+export const CRUD_KEY: InjectionKey<CrudContext> = Symbol('vm-crud')
+export const CRUD_MITT_KEY: InjectionKey<Mitt> = Symbol('vm-crud-mitt')
+export const CRUD_OPTIONS_KEY: InjectionKey<CrudOptions> = Symbol('useCrud__options')
+export const TABLE_OPTIONS_KEY: InjectionKey<CrudTableOptions> =
+  Symbol('useTable__options')
+export const UPSERT_OPTIONS_KEY: InjectionKey<CrudUpsertOptions> =
+  Symbol('useUpsert__options')
+export const SEARCH_OPTIONS_KEY: InjectionKey<CrudSearchOptions> =
+  Symbol('useSearch__options')
+
+/** Table 实例 API（ColumnCustom / showColumn 等） */
+export type TableApi = {
+  setColumns: (cols: CrudColumn[]) => void
+  showColumn: (prop: string) => void
+  hideColumn: (prop: string) => void
+  getColumns: () => CrudColumn[]
+}
+
+export const TABLE_API_KEY: InjectionKey<TableApi> = Symbol('vm-table-api')
+
+/** inject(KEY, undefined) 在严格模式下会推断为 never，统一走 helper */
+export function injectCrudOptions(): CrudOptions | undefined {
+  return inject(CRUD_OPTIONS_KEY, undefined as CrudOptions | undefined)
+}
+
+export function injectTableOptions(): CrudTableOptions | undefined {
+  return inject(TABLE_OPTIONS_KEY, undefined as CrudTableOptions | undefined)
+}
+
+export function injectUpsertOptions(): CrudUpsertOptions | undefined {
+  return inject(UPSERT_OPTIONS_KEY, undefined as CrudUpsertOptions | undefined)
+}
+
+export function injectSearchOptions(): CrudSearchOptions | undefined {
+  return inject(SEARCH_OPTIONS_KEY, undefined as CrudSearchOptions | undefined)
+}

package/src/admin/crud/mitt.ts

@@ -0,0 +1,27 @@
+type Handler = (...args: unknown[]) => void
+
+/** 轻量 mitt，crud 事件总线 */
+export class Mitt {
+  private map = new Map<string, Set<Handler>>()
+
+  on(type: string, handler: Handler) {
+    if (!this.map.has(type)) this.map.set(type, new Set())
+    this.map.get(type)!.add(handler)
+  }
+
+  off(type: string, handler?: Handler) {
+    if (!handler) {
+      this.map.delete(type)
+      return
+    }
+    this.map.get(type)?.delete(handler)
+  }
+
+  emit(type: string, ...args: unknown[]) {
+    this.map.get(type)?.forEach((fn) => fn(...args))
+  }
+}
+
+export function createMitt() {
+  return new Mitt()
+}