vome-core 0.0.1

package/src/admin/components/vm-dept-tree.vue

@@ -0,0 +1,549 @@
+<template>
+  <vm-aside
+    :title="onlyTrashed ? '部门回收站' : '组织架构'"
+    :empty="emptyText"
+    :loading="loading"
+    :add="canAdd && !onlyTrashed"
+    add-title="新增顶级部门"
+    @refresh="load"
+    @add="openAdd(null)"
+  >
+    <button
+      type="button"
+      class="vm-dept-tree__node is-root"
+      :class="{ 'is-active': modelValue == null }"
+      @click="select(null)"
+    >
+      <i class="ri-building-2-line" />
+      <span>{{ rootLabel }}</span>
+    </button>
+
+    <div
+      v-for="row in visibleRows"
+      :key="String(row.id)"
+      class="vm-dept-tree__node"
+      :class="{ 'is-active': modelValue === row.id, 'is-hidden': !row.visible }"
+      :style="{ paddingLeft: `${12 + row.depth * 16}px` }"
+      @click="select(row.id)"
+    >
+      <button
+        v-if="row.hasChildren"
+        type="button"
+        class="vm-dept-tree__expand"
+        :class="{ 'is-open': expanded.has(row.id) }"
+        @click.stop="toggleExpand(row.id)"
+      >
+        <i class="ri-arrow-right-s-line" />
+      </button>
+      <span v-else class="vm-dept-tree__expand is-spacer" />
+      <span class="vm-dept-tree__label">{{ row.label }}</span>
+      <div v-if="onlyTrashed && canTrashOps" class="vm-dept-tree__ops" @click.stop>
+        <button
+          type="button"
+          title="恢复"
+          :disabled="trashBusyId === row.id"
+          @click="restoreDept(row)"
+        >
+          <i class="ri-arrow-go-back-line" />
+        </button>
+        <button
+          type="button"
+          title="彻底删除"
+          :disabled="trashBusyId === row.id"
+          @click="forceDeleteDept(row)"
+        >
+          <i class="ri-delete-bin-2-line" />
+        </button>
+      </div>
+      <div v-else-if="!onlyTrashed && canManage" class="vm-dept-tree__ops" @click.stop>
+        <button type="button" title="新增子部门" @click="openAdd(row.id)">
+          <i class="ri-add-line" />
+        </button>
+        <button type="button" title="编辑" @click="openEdit(row)">
+          <i class="ri-edit-line" />
+        </button>
+        <button type="button" title="删除" @click="remove(row)">
+          <i class="ri-delete-bin-line" />
+        </button>
+      </div>
+    </div>
+  </vm-aside>
+
+  <Dialog v-model:open="formOpen">
+    <DialogContent class="vm-dept-tree__dialog">
+      <DialogHeader>
+        <DialogTitle>{{ formMode === 'add' ? '新增部门' : '编辑部门' }}</DialogTitle>
+      </DialogHeader>
+      <div class="vm-dept-tree__form">
+        <div class="vm-dept-tree__field">
+          <Label>上级部门</Label>
+          <Input :model-value="parentName" disabled />
+        </div>
+        <div class="vm-dept-tree__field">
+          <Label>名称 <span class="vm-dept-tree__req">*</span></Label>
+          <Input v-model="form.name" placeholder="部门名称" />
+        </div>
+        <div class="vm-dept-tree__field">
+          <Label>排序</Label>
+          <Input v-model="form.orderNum" type="number" placeholder="0" />
+        </div>
+      </div>
+      <DialogFooter>
+        <Button variant="outline" :disabled="submitting" @click="formOpen = false">
+          取消
+        </Button>
+        <Button :disabled="submitting" @click="submitForm">
+          {{ submitting ? '保存中…' : '确定' }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { deepTree } from '@vome-core/admin/crud'
+import { vmConfirm } from '@vome-core/admin/crud/confirm'
+
+defineOptions({ name: 'vm-dept-tree' })
+
+type DeptRow = {
+  id: number
+  parentId: number | null
+  orderNum: number
+  name: string
+  children?: DeptRow[]
+}
+
+type FlatRow = {
+  id: number
+  label: string
+  depth: number
+  hasChildren: boolean
+  visible: boolean
+  parentId: number | null
+  orderNum: number
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number | null
+    rootLabel?: string
+    /** 回收站：只加载已软删部门 */
+    onlyTrashed?: boolean
+  }>(),
+  {
+    modelValue: null,
+    rootLabel: '全部',
+    onlyTrashed: false,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: number | null]
+  change: [v: number | null, meta: { name: string; ids: number[] }]
+  updated: []
+}>()
+
+const { service } = useVome()
+
+const loading = ref(false)
+const submitting = ref(false)
+const rows = ref<DeptRow[]>([])
+const expanded = ref(new Set<number>())
+const formOpen = ref(false)
+const formMode = ref<'add' | 'edit'>('add')
+const form = ref({ id: 0, name: '', orderNum: '0', parentId: null as number | null })
+const parentName = ref('顶级')
+
+const canAdd = computed(() => Boolean(service.base.department?._permission?.add))
+const canManage = computed(
+  () =>
+    Boolean(service.base.department?._permission?.update) ||
+    Boolean(service.base.department?._permission?.delete) ||
+    canAdd.value,
+)
+const canTrashOps = computed(
+  () =>
+    Boolean(service.base.department?._permission?.restore) ||
+    Boolean(service.base.department?._permission?.delete),
+)
+const trashBusyId = ref<number | null>(null)
+
+const idNameMap = computed(() => {
+  const map = new Map<number, string>()
+  const walk = (list: DeptRow[]) => {
+    for (const n of list) {
+      map.set(n.id, n.name)
+      if (n.children?.length) walk(n.children)
+    }
+  }
+  walk(rows.value)
+  return map
+})
+
+const descendantMap = computed(() => {
+  const map = new Map<number, number[]>()
+  const walk = (node: DeptRow): number[] => {
+    let ids: number[] = []
+    for (const c of node.children || []) {
+      ids.push(c.id)
+      ids = ids.concat(walk(c))
+    }
+    map.set(node.id, ids)
+    return ids
+  }
+  for (const n of rows.value) walk(n)
+  return map
+})
+
+function collectExpandable(list: DeptRow[], into: Set<number>) {
+  for (const n of list) {
+    if (n.children?.length) {
+      into.add(n.id)
+      collectExpandable(n.children, into)
+    }
+  }
+}
+
+function toTree(list: Array<Record<string, unknown>>) {
+  const flat = list
+    .filter((d) => d.id != null)
+    .map((d) => ({
+      id: Number(d.id),
+      parentId: d.parentId == null ? null : Number(d.parentId),
+      orderNum: Number(d.orderNum ?? 0),
+      name: String(d.name ?? ''),
+    }))
+  return deepTree(flat) as DeptRow[]
+}
+
+function flatten(nodes: DeptRow[], depth = 0, out: FlatRow[] = []) {
+  for (const n of nodes) {
+    const kids = n.children || []
+    out.push({
+      id: n.id,
+      label: n.name,
+      depth,
+      hasChildren: kids.length > 0,
+      visible: true,
+      parentId: n.parentId,
+      orderNum: n.orderNum,
+    })
+    if (kids.length && expanded.value.has(n.id)) flatten(kids, depth + 1, out)
+  }
+  return out
+}
+
+const visibleRows = computed(() => flatten(rows.value))
+
+const emptyText = computed(() => {
+  if (loading.value || visibleRows.value.length) return ''
+  return props.onlyTrashed ? '回收站为空' : '暂无部门'
+})
+
+function resolveFilterIds(id: number | null) {
+  if (id == null) return []
+  return [id, ...(descendantMap.value.get(id) || [])]
+}
+
+function select(id: number | null) {
+  emit('update:modelValue', id)
+  const name = id == null ? props.rootLabel : idNameMap.value.get(id) || ''
+  emit('change', id, { name, ids: resolveFilterIds(id) })
+}
+
+function toggleExpand(id: number) {
+  const next = new Set(expanded.value)
+  if (next.has(id)) next.delete(id)
+  else next.add(id)
+  expanded.value = next
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const list = (await service.base.department.tree({
+      onlyTrashed: props.onlyTrashed || undefined,
+    })) as Array<Record<string, unknown>>
+    rows.value = toTree(Array.isArray(list) ? list : [])
+    const next = new Set<number>()
+    collectExpandable(rows.value, next)
+    expanded.value = next
+    if (props.modelValue != null && !idNameMap.value.has(props.modelValue)) {
+      select(null)
+    }
+  } catch (e) {
+    console.error('[dept-tree] load failed', e)
+    rows.value = []
+    toast.error('加载部门失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function restoreDept(row: FlatRow) {
+  if (trashBusyId.value === row.id) return
+  const ok = await vmConfirm({
+    title: '恢复部门',
+    message: `确定恢复「${row.label}」？`,
+    confirmText: '恢复',
+    cancelText: '取消',
+  })
+  if (!ok) return
+  trashBusyId.value = row.id
+  try {
+    await service.base.department.restore({ ids: [row.id] })
+    toast.success('已恢复')
+    if (props.modelValue === row.id) select(null)
+    await load()
+    emit('updated')
+  } catch (e) {
+    console.error(e)
+    const err = e as Error & { toasted?: boolean }
+    if (!err.toasted) toast.error(e instanceof Error ? e.message : '恢复失败')
+  } finally {
+    trashBusyId.value = null
+  }
+}
+
+async function forceDeleteDept(row: FlatRow) {
+  if (trashBusyId.value === row.id) return
+  const ok = await vmConfirm({
+    title: '彻底删除',
+    message: `确定彻底删除「${row.label}」？此操作不可恢复。`,
+    confirmText: '彻底删除',
+    cancelText: '取消',
+  })
+  if (!ok) return
+  trashBusyId.value = row.id
+  try {
+    await service.base.department.delete({ ids: [row.id], force: true })
+    toast.success('已彻底删除')
+    if (props.modelValue === row.id) select(null)
+    await load()
+    emit('updated')
+  } catch (e) {
+    console.error(e)
+    const err = e as Error & { toasted?: boolean }
+    if (!err.toasted) toast.error(e instanceof Error ? e.message : '删除失败')
+  } finally {
+    trashBusyId.value = null
+  }
+}
+
+watch(
+  () => props.onlyTrashed,
+  () => {
+    select(null)
+    void load()
+  },
+)
+
+function openAdd(parentId: number | null) {
+  formMode.value = 'add'
+  form.value = { id: 0, name: '', orderNum: '0', parentId }
+  parentName.value =
+    parentId == null ? '顶级' : idNameMap.value.get(parentId) || String(parentId)
+  formOpen.value = true
+}
+
+function openEdit(row: FlatRow) {
+  formMode.value = 'edit'
+  form.value = {
+    id: row.id,
+    name: row.label,
+    orderNum: String(row.orderNum ?? 0),
+    parentId: row.parentId,
+  }
+  parentName.value =
+    row.parentId == null ? '顶级' : idNameMap.value.get(row.parentId) || String(row.parentId)
+  formOpen.value = true
+}
+
+async function submitForm() {
+  const name = form.value.name.trim()
+  if (!name) {
+    toast.error('请填写部门名称')
+    return
+  }
+  submitting.value = true
+  try {
+    const payload = {
+      name,
+      orderNum: Number(form.value.orderNum || 0),
+      parentId: form.value.parentId,
+    }
+    if (formMode.value === 'add') {
+      await service.base.department.add(payload)
+      toast.success('已新增部门')
+    } else {
+      await service.base.department.update({ ...payload, id: form.value.id })
+      toast.success('已保存部门')
+    }
+    formOpen.value = false
+    await load()
+    emit('updated')
+  } catch (e) {
+    console.error(e)
+    const err = e as Error & { toasted?: boolean }
+    if (!err.toasted) toast.error(e instanceof Error ? e.message : '保存失败')
+  } finally {
+    submitting.value = false
+  }
+}
+
+async function remove(row: FlatRow) {
+  const ok = await vmConfirm({
+    title: '删除部门',
+    message: `确定删除「${row.label}」？`,
+    confirmText: '删除',
+    cancelText: '取消',
+  })
+  if (!ok) return
+  submitting.value = true
+  try {
+    await service.base.department.delete({ ids: [row.id] })
+    toast.success('已删除')
+    if (props.modelValue === row.id) select(null)
+    await load()
+    emit('updated')
+  } catch (e) {
+    console.error(e)
+    const err = e as Error & { toasted?: boolean }
+    if (!err.toasted) toast.error(e instanceof Error ? e.message : '删除失败')
+  } finally {
+    submitting.value = false
+  }
+}
+
+onMounted(() => {
+  void load()
+})
+
+defineExpose({ load, idNameMap })
+</script>
+
+<style lang="scss" scoped>
+.vm-dept-tree__node {
+  display: flex;
+  min-width: 0;
+  min-height: 32px;
+  align-items: center;
+  gap: 4px;
+  padding-right: 6px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--foreground);
+  cursor: pointer;
+  text-align: left;
+
+  &.is-hidden {
+    display: none;
+  }
+
+  &:hover {
+    background: var(--muted);
+
+    .vm-dept-tree__ops {
+      opacity: 1;
+    }
+  }
+
+  &.is-active {
+    background: var(--brand-soft);
+    color: var(--brand-deep);
+  }
+
+  &.is-root {
+    width: 100%;
+    padding-left: 10px;
+    margin-bottom: 4px;
+    font-weight: 600;
+
+    i {
+      font-size: 15px;
+      color: var(--brand);
+    }
+  }
+}
+
+.vm-dept-tree__expand {
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+
+  i {
+    font-size: 14px;
+    transition: transform 0.15s ease;
+  }
+
+  &.is-open i {
+    transform: rotate(90deg);
+  }
+
+  &.is-spacer {
+    visibility: hidden;
+  }
+}
+
+.vm-dept-tree__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+}
+
+.vm-dept-tree__ops {
+  display: inline-flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+
+  button {
+    display: inline-flex;
+    width: 22px;
+    height: 22px;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--muted-foreground);
+    cursor: pointer;
+
+    &:hover {
+      background: var(--card);
+      color: var(--brand);
+    }
+  }
+}
+
+.vm-dept-tree__dialog {
+  width: min(420px, calc(100vw - 32px));
+}
+
+.vm-dept-tree__form {
+  display: grid;
+  gap: 12px;
+}
+
+.vm-dept-tree__field {
+  display: grid;
+  gap: 6px;
+}
+
+.vm-dept-tree__req {
+  color: var(--destructive);
+}
+</style>

package/src/admin/components/vm-empty.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+defineOptions({ name: 'vm-empty' })
+
+const scarceModules = import.meta.glob('../static/scarce/*.svg', {
+  eager: true,
+  query: '?url',
+  import: 'default',
+}) as Record<string, string>
+
+const props = withDefaults(
+  defineProps<{
+    /** 对应 scarce 文件名（不含 .svg），如「暂无数据」 */
+    kind?: string
+    description?: string
+    class?: string
+  }>(),
+  {
+    kind: '暂无数据',
+    description: '',
+  },
+)
+
+const src = computed(() => {
+  const key = Object.keys(scarceModules).find((k) =>
+    k.endsWith(`/${props.kind}.svg`),
+  )
+  return key ? scarceModules[key] : undefined
+})
+</script>
+
+<template>
+  <div class="vm-empty" :class="props.class">
+    <img v-if="src" :src="src" :alt="kind" class="vm-empty__img" />
+    <p class="vm-empty__text">{{ description || kind }}</p>
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.vm-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px 0;
+  text-align: center;
+}
+
+.vm-empty__img {
+  width: 112px;
+  height: 112px;
+  object-fit: contain;
+  opacity: 0.9;
+}
+
+.vm-empty__text {
+  margin: 0;
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+</style>

package/src/admin/components/vm-eps-perm-picker.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="vm-eps-perm">
+    <div class="vm-eps-perm__top">
+      <vm-group-cascader
+        class="vm-eps-perm__cascader"
+        :model-value="modelValue ?? ''"
+        :tree="epsTree"
+        multiple
+        :placeholder="placeholder"
+        :clearable="true"
+        :editable="false"
+        @update:model-value="(v) => emit('update:modelValue', v)"
+      />
+      <div v-if="$slots.suffix" class="vm-eps-perm__suffix">
+        <slot name="suffix" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { EpsSide } from '../lib/eps'
+
+defineOptions({ name: 'vm-eps-perm-picker' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    placeholder?: string
+    /** EPS 来源：admin 后台 / app 前端 */
+    side?: EpsSide
+  }>(),
+  {
+    placeholder: '请选择权限',
+    side: 'admin',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: string]
+}>()
+
+const eps = ref<EpsModuleMap>({})
+
+function controllerLabel(ent: EpsEntity) {
+  return (
+    ent.info?.type?.name ||
+    ent.prefix.split('/').filter(Boolean).pop() ||
+    ent.prefix
+  )
+}
+
+function permOf(api: EpsApiItem) {
+  return api.perms?.[0] || `${api.method}:${api.path}`
+}
+
+const epsTree = computed<GroupCascaderNode[]>(() => {
+  return Object.keys(eps.value)
+    .sort()
+    .map((mod) => ({
+      label: mod,
+      value: `mod:${mod}`,
+      isLeaf: false,
+      children: (eps.value[mod] || []).map((ent) => ({
+        label: controllerLabel(ent),
+        value: `ent:${ent.prefix}`,
+        isLeaf: false,
+        children: (ent.api || []).map((api) => {
+          const perm = permOf(api)
+          return {
+            label: api.summary || api.path || perm,
+            value: perm,
+            isLeaf: true,
+          }
+        }),
+      })),
+    }))
+})
+
+async function loadSideEps() {
+  try {
+    eps.value = (await loadEps(false, props.side)) || {}
+  } catch {
+    eps.value = {}
+  }
+}
+
+onMounted(() => void loadSideEps())
+watch(() => props.side, () => void loadSideEps())
+</script>
+
+<style lang="scss" scoped>
+.vm-eps-perm {
+  width: 100%;
+}
+
+.vm-eps-perm__top {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.vm-eps-perm__cascader {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.vm-eps-perm__suffix {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+}
+</style>