create-windy 0.1.0

package/template/apps/web/src/pages/system/components/menu-management/MenuManagementPage.webtest.ts

@@ -0,0 +1,228 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import { defineComponent, h } from "vue";
+import { createMemoryHistory, createRouter, RouterView } from "vue-router";
+import MenuManagementPage from "./MenuManagementPage.vue";
+
+const api = vi.hoisted(() => ({
+  list: vi.fn(),
+  save: vi.fn(),
+}));
+
+vi.mock("@/services/system-api", async () => {
+  const actual = await vi.importActual<typeof import("@/services/system-api")>(
+    "@/services/system-api",
+  );
+  return {
+    ...actual,
+    listSystemResource: api.list,
+    updateMenuPlacements: api.save,
+  };
+});
+
+describe("菜单管理草稿", () => {
+  beforeEach(() => {
+    api.list.mockReset();
+    api.save.mockReset();
+    api.list.mockResolvedValue({
+      items: menuFixture(),
+      total: 3,
+      page: 1,
+      pageSize: 100,
+    });
+    api.save.mockImplementation(async (placements) => ({
+      items: menuFixture().map((item) => ({
+        ...item,
+        ...placements.find(({ id }: { id: string }) => id === item.id),
+      })),
+      total: 3,
+    }));
+  });
+
+  test("树形编辑只修改草稿，右上角保存后一次提交完整结构", async () => {
+    const { wrapper } = await mountPage();
+
+    expect(wrapper.text()).toContain("系统管理");
+    expect(wrapper.text()).toContain("审计日志");
+    expect(wrapper.text()).not.toContain("结构有未保存的修改");
+    const visibility = wrapper
+      .findAll("tr")
+      .find((row) => row.text().includes("审计日志"))
+      ?.findAll("button")
+      .find((button) => button.text() === "显示");
+    await visibility?.trigger("click");
+
+    expect(wrapper.text()).toContain("结构有未保存的修改");
+    expect(api.save).not.toHaveBeenCalled();
+    const save = wrapper
+      .findAll("button")
+      .find((button) => button.text() === "保存");
+    await save?.trigger("click");
+    await flushPromises();
+
+    expect(api.save).toHaveBeenCalledWith(
+      expect.arrayContaining([
+        expect.objectContaining({ id: "system", parentKey: undefined }),
+        expect.objectContaining({ id: "system.audit", visible: false }),
+        expect.objectContaining({ id: "system.users" }),
+      ]),
+    );
+    expect(wrapper.text()).not.toContain("结构有未保存的修改");
+  });
+
+  test("有草稿时取消离开会留页，保存成功后继续导航", async () => {
+    const { wrapper, router } = await mountPage();
+    const visibility = wrapper
+      .findAll("tr")
+      .find((row) => row.text().includes("审计日志"))
+      ?.findAll("button")
+      .find((button) => button.text() === "显示");
+    await visibility?.trigger("click");
+
+    const cancelledNavigation = router.push("/");
+    await flushPromises();
+    expect(wrapper.text()).toContain("菜单结构尚未保存");
+    await dialogButton(wrapper, "取消").trigger("click");
+    await cancelledNavigation;
+    expect(router.currentRoute.value.path).toBe("/system/menus");
+
+    const savedNavigation = router.push("/");
+    await flushPromises();
+    await dialogButton(wrapper, "保存").trigger("click");
+    await savedNavigation;
+    expect(router.currentRoute.value.path).toBe("/");
+  });
+
+  test("浏览器刷新时用 dirty 状态触发原生提醒", async () => {
+    const { wrapper } = await mountPage();
+    const visibility = wrapper
+      .findAll("tr")
+      .find((row) => row.text().includes("审计日志"))
+      ?.findAll("button")
+      .find((button) => button.text() === "显示");
+    await visibility?.trigger("click");
+    const event = new Event("beforeunload", { cancelable: true });
+
+    window.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  test("菜单超过单页上限时加载完整结构", async () => {
+    const menus = Array.from({ length: 101 }, (_, index) => ({
+      id: `menu-${index + 1}`,
+      key: `menu-${index + 1}`,
+      title: `菜单 ${index + 1}`,
+      type: "menu",
+      order: (index + 1) * 10,
+      visible: true,
+      path: `/menu-${index + 1}`,
+    }));
+    api.list.mockImplementation(async (_resource, query) => ({
+      items: menus.slice(
+        (query.page - 1) * query.pageSize,
+        query.page * query.pageSize,
+      ),
+      total: menus.length,
+      page: query.page,
+      pageSize: query.pageSize,
+    }));
+
+    const { wrapper } = await mountPage();
+
+    expect(api.list).toHaveBeenCalledTimes(2);
+    expect(api.list).toHaveBeenNthCalledWith(
+      2,
+      "menus",
+      expect.objectContaining({ page: 2, pageSize: 100 }),
+    );
+    expect(wrapper.text()).toContain("菜单 101");
+  });
+});
+
+async function mountPage() {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      {
+        path: "/system/menus",
+        component: MenuManagementPage,
+        props: { canManage: true },
+      },
+      { path: "/", component: { template: "<main>工作台</main>" } },
+    ],
+  });
+  await router.push("/system/menus");
+  await router.isReady();
+  const wrapper = mount(
+    defineComponent({
+      components: { RouterView },
+      template: "<RouterView />",
+    }),
+    {
+      global: {
+        plugins: [router],
+        stubs: { UnsavedChangesDialog: UnsavedDialogStub },
+      },
+    },
+  );
+  await flushPromises();
+  return { wrapper, router };
+}
+
+const UnsavedDialogStub = defineComponent({
+  props: { open: Boolean, saving: Boolean, description: String },
+  emits: ["cancel", "save"],
+  setup(props, { emit }) {
+    return () =>
+      props.open
+        ? h("section", { "data-testid": "unsaved-dialog" }, [
+            h("p", props.description),
+            h("button", { onClick: () => emit("cancel") }, "取消"),
+            h("button", { onClick: () => emit("save") }, "保存"),
+          ])
+        : null;
+  },
+});
+
+function dialogButton(wrapper: ReturnType<typeof mount>, label: string) {
+  const button = wrapper
+    .get('[data-testid="unsaved-dialog"]')
+    .findAll("button")
+    .find((candidate) => candidate.text() === label);
+  if (!button) throw new Error(`找不到 Dialog 按钮：${label}`);
+  return button;
+}
+
+function menuFixture() {
+  return [
+    {
+      id: "system",
+      key: "system",
+      title: "系统管理",
+      type: "catalog",
+      order: 10,
+      visible: true,
+    },
+    {
+      id: "system.audit",
+      key: "system.audit",
+      title: "审计日志",
+      type: "menu",
+      order: 10,
+      visible: true,
+      parentKey: "system",
+      path: "/system/audit-logs",
+    },
+    {
+      id: "system.users",
+      key: "system.users",
+      title: "用户管理",
+      type: "menu",
+      order: 20,
+      visible: true,
+      parentKey: "system",
+      path: "/system/users",
+    },
+  ];
+}

package/template/apps/web/src/pages/system/components/menu-management/MenuStructureTable.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { computed, shallowRef } from "vue";
+import {
+  EyeIcon,
+  EyeOffIcon,
+  FolderTreeIcon,
+  GripVerticalIcon,
+} from "@lucide/vue";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  validParentCatalogs,
+  type MenuDropIntent,
+  type MenuDropPosition,
+  type MenuRecord,
+  type MenuTreeNode,
+} from "./menu-model";
+
+interface TreeRow {
+  item: MenuTreeNode;
+  depth: number;
+}
+
+const props = defineProps<{
+  tree: readonly MenuTreeNode[];
+  allItems: readonly MenuRecord[];
+  canManage: boolean;
+}>();
+
+const emit = defineEmits<{
+  move: [intent: MenuDropIntent];
+  toggleVisibility: [key: string];
+}>();
+const draggingKey = shallowRef("");
+const dropMarker = shallowRef("");
+const rows = computed(() => flattenTree(props.tree));
+
+function startDrag(event: DragEvent, key: string) {
+  if (!props.canManage) return;
+  draggingKey.value = key;
+  event.dataTransfer?.setData("text/plain", key);
+  if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+}
+
+function updateDropMarker(event: DragEvent, target: MenuTreeNode) {
+  if (!draggingKey.value || draggingKey.value === target.key) return;
+  event.preventDefault();
+  const position = readDropPosition(event, target);
+  dropMarker.value = `${target.key}:${position}`;
+  if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+}
+
+function drop(event: DragEvent, target: MenuTreeNode) {
+  event.preventDefault();
+  const sourceKey =
+    draggingKey.value || event.dataTransfer?.getData("text/plain");
+  if (sourceKey && sourceKey !== target.key) {
+    emit("move", {
+      sourceKey,
+      targetKey: target.key,
+      position: readDropPosition(event, target),
+    });
+  }
+  finishDrag();
+}
+
+function dropAtRoot(event: DragEvent) {
+  event.preventDefault();
+  const sourceKey =
+    draggingKey.value || event.dataTransfer?.getData("text/plain");
+  if (sourceKey) emit("move", { sourceKey, position: "root" });
+  finishDrag();
+}
+
+function finishDrag() {
+  draggingKey.value = "";
+  dropMarker.value = "";
+}
+
+function changeParent(item: MenuTreeNode, value: unknown) {
+  const parentKey = value === "__root__" ? undefined : String(value);
+  emit("move", {
+    sourceKey: item.key,
+    targetKey: parentKey,
+    position: parentKey ? "inside" : "root",
+  });
+}
+
+function readDropPosition(
+  event: DragEvent,
+  target: MenuTreeNode,
+): MenuDropPosition {
+  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+  const ratio = (event.clientY - rect.top) / Math.max(1, rect.height);
+  if (ratio < 0.25) return "before";
+  if (ratio > 0.75 || target.type !== "catalog") return "after";
+  return "inside";
+}
+
+function marker(key: string, position: MenuDropPosition): boolean {
+  return dropMarker.value === `${key}:${position}`;
+}
+
+function flattenTree(tree: readonly MenuTreeNode[], depth = 0): TreeRow[] {
+  return tree.flatMap((item) => [
+    { item, depth },
+    ...flattenTree(item.children, depth + 1),
+  ]);
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="overflow-x-auto rounded-lg border">
+      <table class="w-full min-w-[880px] text-sm">
+        <thead class="bg-muted/40 text-left">
+          <tr>
+            <th class="px-4 py-3 font-medium">菜单树</th>
+            <th class="px-4 py-3 font-medium">路由</th>
+            <th class="px-4 py-3 font-medium">上级目录</th>
+            <th class="px-4 py-3 font-medium">Sidebar 显隐</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="{ item, depth } in rows"
+            :key="item.id"
+            class="relative border-t transition-colors"
+            :class="{
+              'bg-primary/5': marker(item.key, 'inside'),
+              'border-t-2 border-t-primary': marker(item.key, 'before'),
+              'border-b-2 border-b-primary': marker(item.key, 'after'),
+              'opacity-50': draggingKey === item.key,
+            }"
+            :draggable="canManage"
+            @dragstart="startDrag($event, item.key)"
+            @dragover="updateDropMarker($event, item)"
+            @drop="drop($event, item)"
+            @dragend="finishDrag"
+          >
+            <td class="px-4 py-3">
+              <div
+                class="relative flex min-h-9 items-center gap-2"
+                :style="{ paddingLeft: `${depth * 28}px` }"
+              >
+                <span
+                  v-if="depth > 0"
+                  class="absolute bottom-[-13px] top-[-13px] border-l border-border"
+                  :style="{ left: `${depth * 28 - 14}px` }"
+                />
+                <GripVerticalIcon
+                  class="size-4 shrink-0 text-muted-foreground"
+                  :class="canManage ? 'cursor-grab' : 'opacity-40'"
+                />
+                <FolderTreeIcon
+                  v-if="item.type === 'catalog'"
+                  class="size-4 shrink-0 text-primary"
+                />
+                <div class="min-w-0">
+                  <p class="truncate font-medium">{{ item.title }}</p>
+                  <p class="truncate text-xs text-muted-foreground">
+                    {{ item.key }} ·
+                    {{ item.type === "catalog" ? "目录" : "菜单" }}
+                  </p>
+                </div>
+              </div>
+            </td>
+            <td class="px-4 py-3 text-muted-foreground">
+              {{ item.path || "—" }}
+            </td>
+            <td class="px-4 py-3">
+              <Select
+                :model-value="item.parentKey || '__root__'"
+                :disabled="!canManage"
+                @update:model-value="changeParent(item, $event)"
+              >
+                <SelectTrigger
+                  class="w-48"
+                  :aria-label="`${item.title}上级目录`"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__root__">根级</SelectItem>
+                  <SelectItem
+                    v-for="catalog in validParentCatalogs(item, allItems)"
+                    :key="catalog.key"
+                    :value="catalog.key"
+                  >
+                    {{ catalog.title }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </td>
+            <td class="px-4 py-3">
+              <Button
+                size="sm"
+                variant="ghost"
+                :disabled="!canManage"
+                @click="emit('toggleVisibility', item.key)"
+              >
+                <EyeIcon v-if="item.visible" data-icon="inline-start" />
+                <EyeOffIcon v-else data-icon="inline-start" />
+                {{ item.visible ? "显示" : "隐藏" }}
+              </Button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <button
+      v-if="canManage"
+      type="button"
+      class="w-full rounded-lg border border-dashed px-4 py-3 text-sm text-muted-foreground transition-colors hover:border-primary/50 hover:text-foreground"
+      @dragover.prevent
+      @drop="dropAtRoot"
+    >
+      拖到这里移至根级末尾
+    </button>
+    <p v-if="rows.length === 0" class="py-8 text-center text-muted-foreground">
+      没有符合条件的菜单。
+    </p>
+  </div>
+</template>

package/template/apps/web/src/pages/system/components/menu-management/menu-model.ts

@@ -0,0 +1,161 @@
+import type { MenuPlacementDraft, SystemRecord } from "@/services/system-api";
+
+export interface MenuRecord extends SystemRecord {
+  key: string;
+  title: string;
+  type: "catalog" | "menu";
+  order: number;
+  visible: boolean;
+  parentKey?: string;
+  path?: string;
+}
+
+export interface MenuTreeNode extends MenuRecord {
+  children: MenuTreeNode[];
+}
+
+export type MenuDropPosition = "before" | "inside" | "after" | "root";
+
+export interface MenuDropIntent {
+  sourceKey: string;
+  targetKey?: string;
+  position: MenuDropPosition;
+}
+
+export function asMenuRecords(items: SystemRecord[]): MenuRecord[] {
+  return items
+    .filter(
+      (item): item is MenuRecord =>
+        typeof item.key === "string" &&
+        typeof item.title === "string" &&
+        (item.type === "catalog" || item.type === "menu"),
+    )
+    .map((item) => ({ ...item }))
+    .sort(compareMenus);
+}
+
+export function buildMenuTree(menus: readonly MenuRecord[]): MenuTreeNode[] {
+  const byParent = new Map<string, MenuRecord[]>();
+  for (const menu of menus) {
+    const key = menu.parentKey || "";
+    byParent.set(key, [...(byParent.get(key) || []), menu]);
+  }
+  const build = (parentKey = ""): MenuTreeNode[] =>
+    (byParent.get(parentKey) || [])
+      .sort(compareMenus)
+      .map((menu) => ({ ...menu, children: build(menu.key) }));
+  return build();
+}
+
+export function filterMenuTree(
+  tree: readonly MenuTreeNode[],
+  keyword: string,
+): MenuTreeNode[] {
+  const query = keyword.trim().toLowerCase();
+  if (!query) return tree.map(cloneTreeNode);
+  return tree.flatMap((node) => {
+    const children = filterMenuTree(node.children, query);
+    const matches = [node.key, node.title, node.path]
+      .filter(Boolean)
+      .some((value) => String(value).toLowerCase().includes(query));
+    return matches || children.length ? [{ ...node, children }] : [];
+  });
+}
+
+export function moveMenuDraft(
+  menus: readonly MenuRecord[],
+  intent: MenuDropIntent,
+): MenuRecord[] {
+  const draft = menus.map((menu) => ({ ...menu }));
+  const source = draft.find((menu) => menu.key === intent.sourceKey);
+  const target = draft.find((menu) => menu.key === intent.targetKey);
+  if (!source || (intent.position !== "root" && !target)) return draft;
+  if (target?.key === source.key) return draft;
+
+  const parentKey =
+    intent.position === "root"
+      ? undefined
+      : intent.position === "inside"
+        ? target!.key
+        : target!.parentKey;
+  const allowedParents = new Set(
+    validParentCatalogs(source, draft).map((menu) => menu.key),
+  );
+  if (parentKey && !allowedParents.has(parentKey)) return draft;
+  if (intent.position === "inside" && target?.type !== "catalog") return draft;
+
+  source.parentKey = parentKey;
+  const siblings = draft
+    .filter((menu) => menu.key !== source.key && menu.parentKey === parentKey)
+    .sort(compareMenus);
+  if (intent.position === "root" || intent.position === "inside") {
+    siblings.push(source);
+  } else {
+    const targetIndex = siblings.findIndex((menu) => menu.key === target!.key);
+    const insertAt =
+      intent.position === "after" ? targetIndex + 1 : targetIndex;
+    siblings.splice(Math.max(0, insertAt), 0, source);
+  }
+  siblings.forEach((menu, index) => (menu.order = (index + 1) * 10));
+  return draft.sort(compareMenus);
+}
+
+export function validParentCatalogs(
+  item: MenuRecord,
+  menus: readonly MenuRecord[],
+): MenuRecord[] {
+  const excluded = collectDescendantKeys(item.key, menus);
+  excluded.add(item.key);
+  return menus.filter(
+    (menu) => menu.type === "catalog" && !excluded.has(menu.key),
+  );
+}
+
+export function toMenuPlacements(
+  menus: readonly MenuRecord[],
+): MenuPlacementDraft[] {
+  return menus.map(({ id, parentKey, order, visible }) => ({
+    id,
+    parentKey,
+    order,
+    visible,
+  }));
+}
+
+export function menuDraftSignature(menus: readonly MenuRecord[]): string {
+  return JSON.stringify(
+    toMenuPlacements(menus).sort((left, right) =>
+      left.id.localeCompare(right.id),
+    ),
+  );
+}
+
+function collectDescendantKeys(
+  parentKey: string,
+  menus: readonly MenuRecord[],
+): Set<string> {
+  const descendants = new Set<string>();
+  const pending = [parentKey];
+  while (pending.length) {
+    const parent = pending.shift();
+    for (const menu of menus) {
+      if (menu.parentKey === parent && !descendants.has(menu.key)) {
+        descendants.add(menu.key);
+        pending.push(menu.key);
+      }
+    }
+  }
+  return descendants;
+}
+
+function compareMenus(left: MenuRecord, right: MenuRecord): number {
+  return (
+    String(left.parentKey || "").localeCompare(right.parentKey || "") ||
+    left.order - right.order ||
+    left.key.localeCompare(right.key)
+  );
+}
+
+function cloneTreeNode(node: MenuTreeNode): MenuTreeNode {
+  return { ...node, children: node.children.map(cloneTreeNode) };
+}