vome-core 0.0.1

package/src/admin/components/vm-auto-perm-dialog.vue

@@ -0,0 +1,361 @@
+<template>
+  <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
+    <DialogContent
+      shell="crud"
+      class="vm-auto-perm"
+      @pointer-down-outside="onOutside"
+      @focus-outside="onOutside"
+      @interact-outside="onOutside"
+    >
+      <DialogHeader class="vm-auto-perm__head">
+        <DialogTitle>自动添加权限</DialogTitle>
+      </DialogHeader>
+
+      <div class="vm-auto-perm__body">
+        <label class="vm-auto-perm__label">路由控制器</label>
+        <vm-group-cascader
+          :model-value="selectedPrefix"
+          :tree="entityTree"
+          placeholder="请选择实体"
+          :editable="false"
+          :clearable="true"
+          @update:model-value="onEntityPick"
+        />
+
+        <div v-if="rows.length" class="vm-auto-perm__list">
+          <div v-for="(row, idx) in rows" :key="row.perm" class="vm-auto-perm__row">
+            <button
+              type="button"
+              class="vm-auto-perm__switch"
+              :class="{ 'is-on': row.enabled }"
+              role="switch"
+              :aria-checked="row.enabled"
+              @click="row.enabled = !row.enabled"
+            >
+              <span class="vm-auto-perm__switch-knob" />
+            </button>
+            <input
+              v-model="row.name"
+              class="vm-auto-perm__name"
+              placeholder="路由备注"
+            />
+            <span class="vm-auto-perm__code">{{ row.perm }}</span>
+            <button
+              type="button"
+              class="vm-auto-perm__remove"
+              title="移除"
+              @click="rows.splice(idx, 1)"
+            >
+              <i class="ri-close-line" />
+            </button>
+          </div>
+        </div>
+        <p v-else class="vm-auto-perm__hint">选择控制器后，将带入该文件全部权限码</p>
+      </div>
+
+      <DialogFooter class="vm-auto-perm__foot">
+        <button type="button" class="vm-auto-perm__btn is-ghost" @click="emit('update:open', false)">
+          取消
+        </button>
+        <button
+          type="button"
+          class="vm-auto-perm__btn is-primary"
+          :disabled="!enabledRows.length || submitting"
+          @click="submit"
+        >
+          一键添加
+        </button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { isDialogFloatTarget } from '@vome-core/admin/lib/dialog-float'
+
+defineOptions({ name: 'vm-auto-perm-dialog' })
+
+const props = defineProps<{
+  open: boolean
+  /** 上级菜单 id；顶级为 null */
+  parentId: number | null
+  add: (
+    data: Record<string, unknown> | Record<string, unknown>[],
+  ) => Promise<unknown>
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  done: []
+}>()
+
+const eps = ref<EpsModuleMap>({})
+const selectedEntity = ref<EpsEntity | null>(null)
+const rows = ref<AutoPermRow[]>([])
+const submitting = ref(false)
+
+const selectedPrefix = computed(() => selectedEntity.value?.prefix ?? '')
+
+const entityTree = computed<GroupCascaderNode[]>(() => {
+  return Object.keys(eps.value)
+    .sort()
+    .map((mod) => ({
+      label: mod,
+      value: `mod:${mod}`,
+      isLeaf: false,
+      children: (eps.value[mod] || []).map((ent) => ({
+        label: entLabel(ent),
+        value: ent.prefix,
+        isLeaf: true,
+      })),
+    }))
+})
+
+const enabledRows = computed(() => rows.value.filter((r) => r.enabled && r.name.trim()))
+
+function entLabel(ent: EpsEntity) {
+  return (
+    ent.info?.type?.name ||
+    ent.prefix.split('/').filter(Boolean).pop() ||
+    ent.prefix
+  )
+}
+
+function permOf(api: { perms?: string[]; method: string; path: string }) {
+  return api.perms?.[0] || `${api.method}:${api.path}`
+}
+
+function pickEntity(ent: EpsEntity) {
+  selectedEntity.value = ent
+  rows.value = (ent.api || [])
+    .map((api) => ({
+      enabled: true,
+      name: api.summary || api.path,
+      perm: permOf(api),
+    }))
+    .filter((r) => r.perm)
+}
+
+function onEntityPick(prefix: string) {
+  if (!prefix || prefix.startsWith('mod:')) {
+    if (!prefix) {
+      selectedEntity.value = null
+      rows.value = []
+    }
+    return
+  }
+  for (const list of Object.values(eps.value)) {
+    const ent = (list || []).find((e) => e.prefix === prefix)
+    if (ent) {
+      pickEntity(ent)
+      return
+    }
+  }
+}
+
+function onOutside(event: Event) {
+  if (isDialogFloatTarget(event)) event.preventDefault()
+}
+
+async function submit() {
+  const list = enabledRows.value
+  if (!list.length) {
+    toast.warning('请至少启用一条权限')
+    return
+  }
+  submitting.value = true
+  try {
+    const rows = list.map((row) => ({
+      type: 2,
+      name: row.name.trim(),
+      perms: row.perm,
+      parentId: props.parentId,
+      orderNum: 0,
+      router: null,
+      viewPath: null,
+      icon: null,
+      isShow: true,
+      keepAlive: true,
+    }))
+    await props.add(rows)
+    toast.success(`已添加 ${rows.length} 条权限`)
+    emit('update:open', false)
+    emit('done')
+  } catch (e) {
+    console.error(e)
+    toast.error('添加失败')
+  } finally {
+    submitting.value = false
+  }
+}
+
+watch(
+  () => props.open,
+  async (v) => {
+    if (!v) return
+    selectedEntity.value = null
+    rows.value = []
+    try {
+      eps.value = (await loadEps()) || {}
+    } catch {
+      eps.value = {}
+    }
+  },
+)
+</script>
+
+<style lang="scss" scoped>
+.vm-auto-perm__head {
+  padding: 12px 22px;
+  border-bottom: 1px solid var(--border);
+}
+
+.vm-auto-perm__body {
+  display: flex;
+  max-height: min(60vh, 480px);
+  flex-direction: column;
+  gap: 12px;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 18px 22px;
+
+  @media (max-width: 768px) {
+    flex: 1;
+    max-height: none;
+  }
+}
+
+.vm-auto-perm__label {
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+
+.vm-auto-perm__list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vm-auto-perm__row {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr) minmax(140px, 0.9fr) 28px;
+  align-items: center;
+  gap: 8px;
+}
+
+.vm-auto-perm__switch {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 999px;
+  background: var(--muted);
+  cursor: pointer;
+
+  &.is-on {
+    background: var(--brand);
+  }
+}
+
+.vm-auto-perm__switch-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  transition: transform 0.15s ease;
+
+  .is-on & {
+    transform: translateX(20px);
+  }
+}
+
+.vm-auto-perm__name {
+  height: 36px;
+  padding: 0 10px;
+  border: 1px solid var(--input);
+  border-radius: 10px;
+  background: var(--background);
+  color: var(--foreground);
+  font-size: 13px;
+}
+
+.vm-auto-perm__code {
+  display: inline-flex;
+  height: 36px;
+  align-items: center;
+  overflow: hidden;
+  padding: 0 10px;
+  border-radius: 8px;
+  background: var(--brand-soft);
+  color: var(--brand);
+  font-size: 13px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vm-auto-perm__remove {
+  display: inline-flex;
+  width: 28px;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--muted);
+    color: var(--foreground);
+  }
+}
+
+.vm-auto-perm__hint {
+  color: var(--muted-foreground);
+  font-size: 12px;
+}
+
+.vm-auto-perm__foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 22px;
+  border-top: 1px solid var(--border);
+}
+
+.vm-auto-perm__btn {
+  height: 36px;
+  padding: 0 16px;
+  border: none;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+
+  &.is-primary {
+    background: var(--brand);
+    color: #fff;
+
+    &:hover:not(:disabled) {
+      background: var(--brand-deep);
+    }
+  }
+
+  &.is-ghost {
+    background: var(--muted);
+    color: var(--foreground);
+  }
+}
+</style>

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

@@ -0,0 +1,338 @@
+<template>
+  <div class="vm-check-tree">
+    <Input
+      v-if="filterable"
+      v-model="keyword"
+      class="vm-check-tree__filter"
+      placeholder="输入关键字进行过滤"
+    />
+    <div class="vm-check-tree__box vm-scroll" :style="boxStyle">
+      <div
+        v-for="row in visibleRows"
+        :key="String(row.id)"
+        class="vm-check-tree__row"
+        :class="{ 'is-hidden': !row.visible }"
+      >
+        <div
+          class="vm-check-tree__main"
+          :style="{ paddingLeft: `${8 + row.depth * 16}px` }"
+        >
+          <button
+            v-if="row.hasChildren"
+            type="button"
+            class="vm-check-tree__expand"
+            :class="{ 'is-open': expanded.has(row.id) }"
+            @click="toggleExpand(row.id)"
+          >
+            <i class="ri-arrow-right-s-line" />
+          </button>
+          <span v-else class="vm-check-tree__expand is-spacer" />
+          <Checkbox
+            :model-value="checked.has(row.id)"
+            :disabled="disabled"
+            @update:model-value="(v) => onToggle(row.id, Boolean(v))"
+          />
+          <span class="vm-check-tree__label">{{ row.label }}</span>
+        </div>
+        <span v-if="row.meta" class="vm-check-tree__meta">{{ row.meta }}</span>
+      </div>
+      <p v-if="!visibleRows.length" class="vm-check-tree__empty">暂无数据</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CheckTreeNode } from '../../../typings/admin/comm/check-tree'
+
+defineOptions({ name: 'vm-check-tree' })
+
+type FlatRow = CheckTreeNode & {
+  depth: number
+  hasChildren: boolean
+  visible: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    nodes?: CheckTreeNode[]
+    modelValue?: Array<number | string>
+    filterable?: boolean
+    /** 父子联动（关联上下级） */
+    cascade?: boolean
+    disabled?: boolean
+    /** 树区域最大高度 */
+    maxHeight?: number | string
+    /** 树区域固定高度（与 maxHeight 同时生效时优先固定高度） */
+    height?: number | string
+    /** 默认全部展开（为 true 时忽略 defaultExpandLevel） */
+    defaultExpandAll?: boolean
+    /** 默认展开到第几级（1=仅根节点，2=展开根的下级） */
+    defaultExpandLevel?: number
+  }>(),
+  {
+    nodes: () => [],
+    modelValue: () => [],
+    filterable: true,
+    cascade: true,
+    disabled: false,
+    maxHeight: 320,
+    defaultExpandAll: false,
+    defaultExpandLevel: 2,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: Array<number | string>]
+}>()
+
+const keyword = ref('')
+const expanded = ref(new Set<string | number>())
+
+const boxStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.height != null) {
+    const h = typeof props.height === 'number' ? `${props.height}px` : props.height
+    style.height = h
+    style.maxHeight = h
+  } else {
+    const h = props.maxHeight
+    style.maxHeight = typeof h === 'number' ? `${h}px` : h
+  }
+  return style
+})
+
+const checked = computed(() => new Set(props.modelValue))
+
+const descendantMap = computed(() => {
+  const map = new Map<string | number, Array<number | string>>()
+  const walk = (node: CheckTreeNode): Array<number | string> => {
+    const kids = node.children || []
+    let ids: Array<number | string> = []
+    for (const c of kids) {
+      ids.push(c.id)
+      ids = ids.concat(walk(c))
+    }
+    map.set(node.id, ids)
+    return ids
+  }
+  for (const n of props.nodes) walk(n)
+  return map
+})
+
+function collectExpandable(nodes: CheckTreeNode[], into: Set<string | number>) {
+  for (const n of nodes) {
+    if (n.children?.length) {
+      into.add(n.id)
+      collectExpandable(n.children, into)
+    }
+  }
+}
+
+/** 展开到指定层级：level=1 仅根可见；level=2 根展开、二级可见 */
+function collectExpandToLevel(
+  nodes: CheckTreeNode[],
+  depth: number,
+  maxLevel: number,
+  into: Set<string | number>,
+) {
+  if (depth >= maxLevel - 1) return
+  for (const n of nodes) {
+    if (!n.children?.length) continue
+    into.add(n.id)
+    collectExpandToLevel(n.children, depth + 1, maxLevel, into)
+  }
+}
+
+function syncExpanded() {
+  const next = new Set<string | number>()
+  const nodes = props.nodes || []
+  if (props.defaultExpandAll) {
+    collectExpandable(nodes, next)
+  } else {
+    const level = Math.max(1, props.defaultExpandLevel ?? 2)
+    collectExpandToLevel(nodes, 0, level, next)
+  }
+  expanded.value = next
+}
+
+watch(
+  () => [props.nodes, props.defaultExpandAll, props.defaultExpandLevel],
+  () => syncExpanded(),
+  { immediate: true, deep: true },
+)
+
+function flatten(
+  nodes: CheckTreeNode[],
+  depth = 0,
+  out: FlatRow[] = [],
+): FlatRow[] {
+  for (const n of nodes) {
+    const kids = n.children || []
+    const hasChildren = kids.length > 0
+    out.push({
+      ...n,
+      depth,
+      hasChildren,
+      visible: true,
+    })
+    if (hasChildren && expanded.value.has(n.id)) {
+      flatten(kids, depth + 1, out)
+    }
+  }
+  return out
+}
+
+function matchFilter(node: CheckTreeNode, q: string): boolean {
+  if (!q) return true
+  const hay = `${node.label} ${node.meta || ''}`.toLowerCase()
+  if (hay.includes(q)) return true
+  return (node.children || []).some((c) => matchFilter(c, q))
+}
+
+const visibleRows = computed(() => {
+  const q = keyword.value.trim().toLowerCase()
+  const rows = flatten(props.nodes || [])
+  if (!q) return rows
+  return rows.map((r) => ({
+    ...r,
+    visible: matchFilter(r, q),
+  }))
+})
+
+function toggleExpand(id: string | number) {
+  const next = new Set(expanded.value)
+  if (next.has(id)) next.delete(id)
+  else next.add(id)
+  expanded.value = next
+}
+
+function emitChecked(next: Set<string | number>) {
+  emit('update:modelValue', [...next])
+}
+
+function onToggle(id: string | number, on: boolean) {
+  if (props.disabled) return
+  const next = new Set(checked.value)
+  if (on) next.add(id)
+  else next.delete(id)
+
+  if (props.cascade) {
+    const desc = descendantMap.value.get(id) || []
+    if (on) {
+      for (const d of desc) next.add(d)
+    } else {
+      for (const d of desc) next.delete(d)
+    }
+  }
+
+  emitChecked(next)
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-check-tree {
+  display: grid;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.vm-check-tree__filter {
+  width: 100%;
+  height: var(--vm-control-height);
+  border-radius: var(--vm-control-radius);
+  background: var(--muted);
+  border-color: transparent;
+}
+
+.vm-check-tree__box {
+  min-height: 0;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--vm-control-radius);
+  background: var(--card);
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.vm-check-tree__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: 28px;
+  border-radius: 8px;
+
+  &.is-hidden {
+    display: none;
+  }
+
+  &:hover {
+    background: var(--muted);
+  }
+}
+
+.vm-check-tree__main {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 6px;
+}
+
+.vm-check-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;
+    cursor: default;
+  }
+}
+
+.vm-check-tree__label {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  color: var(--foreground);
+}
+
+.vm-check-tree__meta {
+  justify-self: start;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  text-align: left;
+  color: var(--muted-foreground);
+}
+
+.vm-check-tree__empty {
+  margin: 12px 0;
+  text-align: center;
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+</style>