create-windy 0.1.0

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

@@ -0,0 +1,133 @@
+import { describe, expect, test } from "vitest";
+import {
+  asMenuRecords,
+  buildMenuTree,
+  filterMenuTree,
+  menuDraftSignature,
+  moveMenuDraft,
+  validParentCatalogs,
+} from "./menu-model";
+
+describe("menu management model", () => {
+  test("过滤按钮型与空行，并禁止把目录移动到自身后代", () => {
+    const menus = asMenuRecords([
+      {
+        id: "root",
+        key: "root",
+        title: "根目录",
+        type: "catalog",
+        order: 10,
+        visible: true,
+      },
+      {
+        id: "child",
+        key: "child",
+        title: "子目录",
+        type: "catalog",
+        order: 10,
+        visible: true,
+        parentKey: "root",
+      },
+      {
+        id: "profile",
+        key: "profile",
+        title: "个人设置",
+        type: "button",
+        order: 10,
+        visible: true,
+      },
+    ]);
+
+    expect(menus.map((item) => item.key)).toEqual(["root", "child"]);
+    expect(validParentCatalogs(menus[0]!, menus)).toEqual([]);
+  });
+
+  test("生成可见树结构并在搜索时保留命中节点的祖先", () => {
+    const menus = fixtureMenus();
+    const tree = buildMenuTree(menus);
+
+    expect(tree.map(({ key }) => key)).toEqual(["root", "other"]);
+    expect(tree[0]?.children.map(({ key }) => key)).toEqual([
+      "child-a",
+      "child-b",
+    ]);
+    expect(filterMenuTree(tree, "乙页面")[0]?.children).toEqual([
+      expect.objectContaining({ key: "child-b" }),
+    ]);
+  });
+
+  test("拖拽可调整同级顺序并移动到其他目录，原快照保持不变", () => {
+    const menus = fixtureMenus();
+    const reordered = moveMenuDraft(menus, {
+      sourceKey: "child-b",
+      targetKey: "child-a",
+      position: "before",
+    });
+    const moved = moveMenuDraft(reordered, {
+      sourceKey: "child-a",
+      targetKey: "other",
+      position: "inside",
+    });
+
+    expect(buildMenuTree(reordered)[0]?.children.map(({ key }) => key)).toEqual(
+      ["child-b", "child-a"],
+    );
+    expect(
+      buildMenuTree(moved)
+        .find(({ key }) => key === "other")
+        ?.children.map(({ key }) => key),
+    ).toEqual(["child-a"]);
+    expect(menus.find(({ key }) => key === "child-a")?.parentKey).toBe("root");
+    expect(menuDraftSignature(moved)).not.toBe(menuDraftSignature(menus));
+  });
+
+  test("拒绝把目录拖入自己的后代", () => {
+    const menus = fixtureMenus();
+    const moved = moveMenuDraft(menus, {
+      sourceKey: "root",
+      targetKey: "child-a",
+      position: "before",
+    });
+
+    expect(menuDraftSignature(moved)).toBe(menuDraftSignature(menus));
+  });
+});
+
+function fixtureMenus() {
+  return asMenuRecords([
+    {
+      id: "root",
+      key: "root",
+      title: "根目录",
+      type: "catalog",
+      order: 10,
+      visible: true,
+    },
+    {
+      id: "other",
+      key: "other",
+      title: "其他目录",
+      type: "catalog",
+      order: 20,
+      visible: true,
+    },
+    {
+      id: "child-a",
+      key: "child-a",
+      title: "甲页面",
+      type: "menu",
+      order: 10,
+      visible: true,
+      parentKey: "root",
+    },
+    {
+      id: "child-b",
+      key: "child-b",
+      title: "乙页面",
+      type: "menu",
+      order: 20,
+      visible: true,
+      parentKey: "root",
+    },
+  ]);
+}

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

@@ -0,0 +1,117 @@
+import { computed, readonly, shallowReadonly, shallowRef } from "vue";
+import {
+  listSystemResource,
+  updateMenuPlacements,
+} from "@/services/system-api";
+import {
+  asMenuRecords,
+  buildMenuTree,
+  filterMenuTree,
+  menuDraftSignature,
+  moveMenuDraft,
+  toMenuPlacements,
+  type MenuDropIntent,
+} from "./menu-model";
+
+const MENU_PAGE_SIZE = 100;
+const MENU_SORT = "parentKey,order,key";
+
+export function useMenuManagement() {
+  const records = shallowRef<ReturnType<typeof asMenuRecords>>([]);
+  const draft = shallowRef<ReturnType<typeof asMenuRecords>>([]);
+  const loading = shallowRef(false);
+  const saving = shallowRef(false);
+  const error = shallowRef("");
+  const keyword = shallowRef("");
+  const dirty = computed(
+    () => menuDraftSignature(records.value) !== menuDraftSignature(draft.value),
+  );
+  const tree = computed(() =>
+    filterMenuTree(buildMenuTree(draft.value), keyword.value),
+  );
+
+  async function reload() {
+    loading.value = true;
+    error.value = "";
+    try {
+      const next = asMenuRecords(await loadAllMenus());
+      records.value = next;
+      draft.value = next.map((item) => ({ ...item }));
+    } catch (currentError) {
+      error.value = readError(currentError);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function move(intent: MenuDropIntent) {
+    draft.value = moveMenuDraft(draft.value, intent);
+  }
+
+  function toggleVisibility(key: string) {
+    draft.value = draft.value.map((item) =>
+      item.key === key ? { ...item, visible: !item.visible } : item,
+    );
+  }
+
+  async function save(): Promise<boolean> {
+    if (saving.value || !dirty.value) return !dirty.value;
+    saving.value = true;
+    error.value = "";
+    try {
+      const result = await updateMenuPlacements(toMenuPlacements(draft.value));
+      const next = asMenuRecords(result.items);
+      records.value = next;
+      draft.value = next.map((item) => ({ ...item }));
+      return true;
+    } catch (currentError) {
+      error.value = readError(currentError);
+      return false;
+    } finally {
+      saving.value = false;
+    }
+  }
+
+  return {
+    records: shallowReadonly(records),
+    draft: shallowReadonly(draft),
+    tree,
+    dirty,
+    loading: readonly(loading),
+    saving: readonly(saving),
+    error: readonly(error),
+    keyword,
+    reload,
+    move,
+    toggleVisibility,
+    save,
+  };
+}
+
+async function loadAllMenus() {
+  const first = await listMenuPage(1);
+  const pageCount = Math.ceil(first.total / MENU_PAGE_SIZE);
+  const remaining = await Promise.all(
+    Array.from({ length: Math.max(0, pageCount - 1) }, (_, index) =>
+      listMenuPage(index + 2),
+    ),
+  );
+  const items = [first, ...remaining].flatMap((page) => page.items);
+  const uniqueItems = new Map(items.map((item) => [item.id, item]));
+  if (uniqueItems.size !== first.total) {
+    throw new Error("菜单结构加载不完整，请刷新后重试");
+  }
+  return [...uniqueItems.values()];
+}
+
+function listMenuPage(page: number) {
+  return listSystemResource("menus", {
+    page,
+    pageSize: MENU_PAGE_SIZE,
+    sort: MENU_SORT,
+  });
+}
+
+function readError(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}

package/template/apps/web/src/pages/system/components/role-policy/RolePermissionTree.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { PermissionDefinition } from "@windy/shared";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  groupPermissions,
+  normalizePermissionKeys,
+  unknownPermissionKeys,
+} from "./permission-tree";
+
+const props = defineProps<{
+  permissions: PermissionDefinition[];
+  modelValue: string[];
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string[]];
+}>();
+
+const groups = computed(() => groupPermissions(props.permissions));
+const unknownKeys = computed(() =>
+  unknownPermissionKeys(props.modelValue, props.permissions),
+);
+
+function groupKeys(resources: { permissions: PermissionDefinition[] }[]) {
+  return resources.flatMap(({ permissions }) =>
+    permissions.map(({ key }) => key),
+  );
+}
+
+function checkedState(keys: string[]): boolean | "indeterminate" {
+  const count = keys.filter((key) => props.modelValue.includes(key)).length;
+  if (count === 0) return false;
+  return count === keys.length ? true : "indeterminate";
+}
+
+function toggleKeys(keys: string[], checked: boolean) {
+  const selected = new Set(props.modelValue);
+  for (const key of keys) {
+    if (checked) selected.add(key);
+    else selected.delete(key);
+  }
+  emit("update:modelValue", normalizePermissionKeys([...selected]));
+}
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <div class="space-y-4 rounded-lg border bg-muted/20 p-4">
+    <section v-for="group in groups" :key="group.key" class="space-y-3">
+      <label class="flex items-center gap-2 text-sm font-semibold">
+        <Checkbox
+          :data-testid="`permission-module-${group.key}`"
+          :model-value="checkedState(groupKeys(group.resources))"
+          @update:model-value="
+            toggleKeys(groupKeys(group.resources), $event === true)
+          "
+        />
+        {{ group.label }}
+      </label>
+      <div class="grid gap-3 pl-6 lg:grid-cols-2">
+        <div
+          v-for="resource in group.resources"
+          :key="resource.key"
+          class="rounded-md border bg-background p-3"
+        >
+          <label class="flex items-center gap-2 text-sm font-medium">
+            <Checkbox
+              :data-testid="`permission-resource-${resource.key}`"
+              :model-value="
+                checkedState(resource.permissions.map(({ key }) => key))
+              "
+              @update:model-value="
+                toggleKeys(
+                  resource.permissions.map(({ key }) => key),
+                  $event === true,
+                )
+              "
+            />
+            {{ resource.label }}
+          </label>
+          <div class="mt-3 flex flex-wrap gap-x-5 gap-y-3 pl-6">
+            <label
+              v-for="permission in resource.permissions"
+              :key="permission.key"
+              class="flex items-center gap-2 text-sm text-muted-foreground"
+            >
+              <Checkbox
+                :data-testid="`permission-${permission.key}`"
+                :model-value="modelValue.includes(permission.key)"
+                @update:model-value="
+                  toggleKeys([permission.key], $event === true)
+                "
+              />
+              <Tooltip>
+                <TooltipTrigger as-child>
+                  <span
+                    class="cursor-help underline decoration-dotted underline-offset-4"
+                  >
+                    {{ permission.label }}
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent class="max-w-xs space-y-1">
+                  <p class="font-mono text-xs">{{ permission.key }}</p>
+                  <p v-if="permission.description">
+                    {{ permission.description }}
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </label>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section
+      v-if="unknownKeys.length"
+      class="space-y-3 rounded-md border border-amber-500/30 bg-amber-500/5 p-3"
+    >
+      <p class="text-sm font-medium">未注册的历史权限</p>
+      <p class="text-xs text-muted-foreground">
+        这些权限不在当前 Manifest 中。取消勾选会从角色策略中移除。
+      </p>
+      <label
+        v-for="key in unknownKeys"
+        :key="key"
+        class="flex items-center gap-2 text-sm"
+      >
+        <Checkbox
+          :model-value="true"
+          @update:model-value="toggleKeys([key], $event === true)"
+        />
+        <code>{{ key }}</code>
+      </label>
+    </section>
+    </div>
+  </TooltipProvider>
+</template>

package/template/apps/web/src/pages/system/components/role-policy/RolePermissionTree.webtest.ts

@@ -0,0 +1,55 @@
+import { describe, expect, test } from "vitest";
+import { mount } from "@vue/test-utils";
+import type { PermissionDefinition } from "@windy/shared";
+import RolePermissionTree from "./RolePermissionTree.vue";
+
+const permissions: PermissionDefinition[] = [
+  {
+    key: "system.user.read",
+    label: "查看",
+    module: "system",
+    moduleLabel: "系统基础设施",
+    resource: "user",
+    resourceLabel: "用户管理",
+    action: "read",
+  },
+  {
+    key: "system.user.manage",
+    label: "管理",
+    module: "system",
+    moduleLabel: "系统基础设施",
+    resource: "user",
+    resourceLabel: "用户管理",
+    action: "manage",
+  },
+];
+
+describe("角色权限级联选择", () => {
+  test("勾选模块会一次选中模块下的全部权限", async () => {
+    const wrapper = mount(RolePermissionTree, {
+      props: { permissions, modelValue: [] },
+    });
+
+    await wrapper
+      .get('[data-testid="permission-module-system"]')
+      .trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([
+      ["system.user.manage", "system.user.read"],
+    ]);
+    wrapper.unmount();
+  });
+
+  test("历史权限保持可见且可以取消", () => {
+    const wrapper = mount(RolePermissionTree, {
+      props: {
+        permissions,
+        modelValue: ["legacy.report.read", "system.user.read"],
+      },
+    });
+
+    expect(wrapper.text()).toContain("未注册的历史权限");
+    expect(wrapper.text()).toContain("legacy.report.read");
+    wrapper.unmount();
+  });
+});

package/template/apps/web/src/pages/system/components/role-policy/RolePolicyForm.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { shallowRef, watch } from "vue";
+import type { DataScope, PermissionDefinition } from "@windy/shared";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { SystemRecord } from "@/services/system-api";
+import { normalizePermissionKeys } from "./permission-tree";
+import RolePermissionTree from "./RolePermissionTree.vue";
+
+interface RolePolicyDraft extends Record<string, unknown> {
+  code: string;
+  name: string;
+  dataScope: DataScope;
+  permissionKeys: string[];
+}
+
+const props = defineProps<{
+  item?: SystemRecord;
+  defaults: Record<string, unknown>;
+  permissions: PermissionDefinition[];
+}>();
+
+const emit = defineEmits<{
+  submit: [payload: Record<string, unknown>];
+}>();
+
+const form = shallowRef<RolePolicyDraft>(createDraft());
+
+watch(
+  () => [props.item, props.defaults] as const,
+  () => {
+    form.value = createDraft({ ...props.defaults, ...(props.item || {}) });
+  },
+  { immediate: true },
+);
+
+function createDraft(source: Record<string, unknown> = {}): RolePolicyDraft {
+  return {
+    ...source,
+    code: String(source.code || ""),
+    name: String(source.name || ""),
+    dataScope: readDataScope(source.dataScope),
+    permissionKeys: Array.isArray(source.permissionKeys)
+      ? source.permissionKeys.filter(
+          (key): key is string => typeof key === "string",
+        )
+      : [],
+  };
+}
+
+function readDataScope(value: unknown): DataScope {
+  const scopes: DataScope[] = [
+    "all",
+    "tenant",
+    "department",
+    "department-and-children",
+    "self",
+    "custom",
+  ];
+  return scopes.includes(value as DataScope) ? (value as DataScope) : "all";
+}
+
+function update(key: keyof RolePolicyDraft, value: unknown) {
+  form.value = { ...form.value, [key]: value };
+}
+
+function submit() {
+  emit("submit", {
+    ...form.value,
+    permissionKeys: normalizePermissionKeys(form.value.permissionKeys),
+  });
+}
+
+defineExpose({ submit });
+</script>
+
+<template>
+  <div class="space-y-5">
+    <div class="grid gap-4 md:grid-cols-2">
+      <label class="grid gap-2 text-sm font-medium">
+        <span>角色编码</span>
+        <Input
+          :model-value="form.code"
+          placeholder="例如 finance_admin"
+          @update:model-value="update('code', String($event))"
+        />
+      </label>
+      <label class="grid gap-2 text-sm font-medium">
+        <span>角色名称</span>
+        <Input
+          :model-value="form.name"
+          placeholder="例如 财务管理员"
+          @update:model-value="update('name', String($event))"
+        />
+      </label>
+    </div>
+    <label class="grid gap-2 text-sm font-medium">
+      <span>数据范围</span>
+      <Select
+        :model-value="form.dataScope"
+        @update:model-value="update('dataScope', $event)"
+      >
+        <SelectTrigger class="w-full"><SelectValue /></SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">全部数据</SelectItem>
+          <SelectItem value="tenant">当前租户</SelectItem>
+          <SelectItem value="department">当前部门</SelectItem>
+          <SelectItem value="department-and-children">部门及下级</SelectItem>
+          <SelectItem value="self">仅本人</SelectItem>
+          <SelectItem value="custom">自定义部门</SelectItem>
+        </SelectContent>
+      </Select>
+    </label>
+    <div class="grid gap-2">
+      <div>
+        <p class="text-sm font-medium">功能权限</p>
+        <p class="text-xs text-muted-foreground">
+          按模块、资源或单个操作级联选择。
+        </p>
+      </div>
+      <RolePermissionTree
+        :model-value="form.permissionKeys"
+        :permissions="permissions"
+        @update:model-value="update('permissionKeys', $event)"
+      />
+    </div>
+  </div>
+</template>

package/template/apps/web/src/pages/system/components/role-policy/permission-tree.ts

@@ -0,0 +1,58 @@
+import type { PermissionDefinition } from "@windy/shared";
+
+export interface PermissionResourceGroup {
+  key: string;
+  label: string;
+  permissions: PermissionDefinition[];
+}
+
+export interface PermissionModuleGroup {
+  key: string;
+  label: string;
+  resources: PermissionResourceGroup[];
+}
+
+export function groupPermissions(
+  permissions: PermissionDefinition[],
+): PermissionModuleGroup[] {
+  const modules = new Map<string, Map<string, PermissionDefinition[]>>();
+  for (const permission of permissions) {
+    const resources = modules.get(permission.module) || new Map();
+    const items = resources.get(permission.resource) || [];
+    resources.set(permission.resource, [...items, permission]);
+    modules.set(permission.module, resources);
+  }
+  return [...modules.entries()]
+    .sort(([left], [right]) => left.localeCompare(right))
+    .map(([module, resources]) => ({
+      key: module,
+      label: firstPermission(resources)?.moduleLabel || "其他模块",
+      resources: [...resources.entries()]
+        .sort(([left], [right]) => left.localeCompare(right))
+        .map(([resource, items]) => ({
+          key: `${module}.${resource}`,
+          label: items[0]?.resourceLabel || "其他能力",
+          permissions: [...items].sort((left, right) =>
+            left.key.localeCompare(right.key),
+          ),
+        })),
+    }));
+}
+
+function firstPermission(
+  resources: Map<string, PermissionDefinition[]>,
+): PermissionDefinition | undefined {
+  return resources.values().next().value?.[0];
+}
+
+export function unknownPermissionKeys(
+  selected: string[],
+  permissions: PermissionDefinition[],
+): string[] {
+  const known = new Set(permissions.map(({ key }) => key));
+  return [...new Set(selected.filter((key) => !known.has(key)))].sort();
+}
+
+export function normalizePermissionKeys(keys: string[]): string[] {
+  return [...new Set(keys.filter(Boolean))].sort();
+}