create-windy 0.6.20 → 0.7.0

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

@@ -0,0 +1,108 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { Select } from "@/components/ui/select";
+import RolePolicyForm from "./RolePolicyForm.vue";
+import RolePermissionTree from "./RolePermissionTree.vue";
+import PagedSelectionList from "../PagedSelectionList.vue";
+
+const api = vi.hoisted(() => ({ listSystemResource: vi.fn() }));
+vi.mock("@/services/system-api", () => api);
+afterEach(() => vi.clearAllMocks());
+
+interface FormHandle {
+  dirty: boolean;
+  submit(): void;
+  markSaved(): void;
+}
+
+describe("角色授权表单", () => {
+  test("新增 Manifest 权限可选择，自定义范围携带部门并保留菜单字段", async () => {
+    api.listSystemResource.mockResolvedValue({
+      items: [{ id: "dept-root", name: "总部", status: "active" }],
+      total: 1,
+      page: 1,
+      pageSize: 10,
+    });
+    const wrapper = mount(RolePolicyForm, {
+      props: {
+        defaults: {},
+        item: {
+          id: "role-one",
+          code: "reviewer",
+          name: "审核员",
+          dataScope: "custom",
+          permissionKeys: [],
+          departmentIds: ["dept-root"],
+          menuKeys: ["business.report"],
+          createdAt: "2026-09-10",
+        },
+        permissions: [
+          {
+            key: "business.report.export",
+            label: "导出报表",
+            module: "business",
+            moduleLabel: "业务",
+            resource: "report",
+            resourceLabel: "报表",
+            action: "export",
+          },
+        ],
+      },
+    });
+    await flushPromises();
+    const handle = wrapper.vm as unknown as FormHandle;
+    expect(handle.dirty).toBe(false);
+    await wrapper
+      .get('[data-testid="permission-business.report.export"]')
+      .trigger("click");
+    expect(handle.dirty).toBe(true);
+    expect(
+      wrapper.getComponent(PagedSelectionList).props("modelValue"),
+    ).toEqual(["dept-root"]);
+    handle.submit();
+    expect(wrapper.emitted("submit")?.at(-1)?.[0]).toEqual({
+      code: "reviewer",
+      name: "审核员",
+      status: "active",
+      dataScope: "custom",
+      departmentIds: ["dept-root"],
+      permissionKeys: ["business.report.export"],
+      menuKeys: ["business.report"],
+    });
+    wrapper.getComponent(RolePermissionTree).vm.$emit("update:modelValue", []);
+    await wrapper.vm.$nextTick();
+    expect(handle.dirty).toBe(false);
+    wrapper
+      .getComponent(RolePermissionTree)
+      .vm.$emit("update:modelValue", ["business.report.export"]);
+    await wrapper.vm.$nextTick();
+    handle.markSaved();
+    expect(handle.dirty).toBe(false);
+    wrapper.getComponent(Select).vm.$emit("update:modelValue", "disabled");
+    await wrapper.vm.$nextTick();
+    handle.submit();
+    expect(wrapper.emitted("submit")?.at(-1)?.[0]).toMatchObject({
+      status: "disabled",
+    });
+  });
+
+  test("自定义数据范围未选部门时保持编辑状态且不提交", async () => {
+    api.listSystemResource.mockResolvedValue({
+      items: [],
+      total: 0,
+      page: 1,
+      pageSize: 10,
+    });
+    const wrapper = mount(RolePolicyForm, {
+      props: {
+        defaults: { code: "role", name: "角色", dataScope: "custom" },
+        permissions: [],
+      },
+    });
+    await flushPromises();
+    (wrapper.vm as unknown as FormHandle).submit();
+    expect(wrapper.emitted("submit")).toBeUndefined();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.text()).toContain("自定义数据范围须选择至少一个部门");
+  });
+});

package/template/apps/web/src/pages/system/components/selection-options.ts

@@ -0,0 +1,71 @@
+import { listSystemResource, type SystemRecord } from "@/services/system-api";
+
+/** 完整读取组织关系，分页展示不能改变后代判断或已选集合。 */
+export async function loadSelectionRecords(
+  resource: "departments" | "roles",
+  activeOnly = true,
+): Promise<SystemRecord[]> {
+  const records = new Map<string, SystemRecord>();
+  let page = 1;
+  while (true) {
+    const result = await listSystemResource(resource, {
+      page,
+      pageSize: 10,
+      status: activeOnly ? "active" : undefined,
+      sort: resource === "departments" ? "order,name,id" : "name,id",
+    });
+    for (const item of result.items) records.set(item.id, item);
+    if (result.page * result.pageSize >= result.total) break;
+    if (!result.items.length || result.page < page)
+      throw new Error("选项分页数据不完整，请刷新后重试。");
+    page = result.page + 1;
+  }
+  return [...records.values()];
+}
+
+export function departmentOptions(
+  records: SystemRecord[],
+  excludedId?: string,
+) {
+  const byId = new Map(records.map((record) => [record.id, record]));
+  return records
+    .filter((record) => {
+      if (
+        (record.status && record.status !== "active") ||
+        record.id === excludedId
+      )
+        return false;
+      const visited = new Set<string>();
+      let current: SystemRecord | undefined = record;
+      while (current && typeof current.parentId === "string") {
+        if (current.parentId === excludedId || visited.has(current.id))
+          return false;
+        visited.add(current.id);
+        current = byId.get(current.parentId);
+      }
+      return true;
+    })
+    .map((record) => ({
+      id: record.id,
+      label: String(record.name || record.code),
+      description: `${departmentPath(record, byId)} · ${String(record.code || "")}`,
+    }));
+}
+
+function departmentPath(
+  record: SystemRecord,
+  byId: Map<string, SystemRecord>,
+): string {
+  const names: string[] = [];
+  const visited = new Set<string>();
+  let current: SystemRecord | undefined = record;
+  while (current && !visited.has(current.id)) {
+    visited.add(current.id);
+    names.unshift(String(current.name || current.code || current.id));
+    current =
+      typeof current.parentId === "string"
+        ? byId.get(current.parentId)
+        : undefined;
+  }
+  return names.join(" / ");
+}

package/template/apps/web/src/pages/system/components/selection-options.webtest.ts

@@ -0,0 +1,49 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { departmentOptions, loadSelectionRecords } from "./selection-options";
+
+const api = vi.hoisted(() => ({ listSystemResource: vi.fn() }));
+vi.mock("@/services/system-api", () => api);
+afterEach(() => vi.clearAllMocks());
+
+describe("组织与角色选项", () => {
+  test("完整读取超过一百条记录，每个请求十条", async () => {
+    const items = Array.from({ length: 105 }, (_, index) => ({
+      id: `dept-${index}`,
+      name: `部门 ${index}`,
+      status: "active",
+    }));
+    api.listSystemResource.mockImplementation(
+      (_resource: string, query: { page: number; pageSize: number }) =>
+        Promise.resolve({
+          items: items.slice((query.page - 1) * 10, query.page * 10),
+          total: items.length,
+          ...query,
+        }),
+    );
+    expect(await loadSelectionRecords("departments")).toHaveLength(105);
+    expect(api.listSystemResource).toHaveBeenCalledTimes(11);
+    expect(api.listSystemResource).toHaveBeenLastCalledWith(
+      "departments",
+      expect.objectContaining({ page: 11, pageSize: 10 }),
+    );
+  });
+  test("利用完整组织链排除自身、后代和停用部门", () => {
+    const records = [
+      { id: "root", name: "总部", status: "active" },
+      { id: "source", parentId: "root", status: "active" },
+      { id: "child", parentId: "source", status: "disabled" },
+      { id: "grandchild", parentId: "child", status: "active" },
+      {
+        id: "target",
+        name: "销售部",
+        code: "sales",
+        parentId: "root",
+        status: "active",
+      },
+    ];
+    expect(departmentOptions(records, "source").map(({ id }) => id)).toEqual([
+      "root",
+      "target",
+    ]);
+  });
+});

package/template/apps/web/src/pages/system/components/user-account/CreateDepartmentDialog.vue

@@ -11,13 +11,8 @@ import { routerKey } from "vue-router";
 import FormDialog from "@/components/common/FormDialog.vue";
 import UnsavedChangesDialog from "@/components/common/UnsavedChangesDialog.vue";
 import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { departmentOptions } from "../selection-options";
+import PagedSelectionList from "../PagedSelectionList.vue";
 import { useUnsavedChangesConfirmation } from "@/composables/useUnsavedChangesConfirmation";
 import {
   createSystemResource,
@@ -35,12 +30,14 @@ interface DepartmentOption {
 const open = defineModel<boolean>("open", { default: false });
 const props = defineProps<{
   mode: "create" | "manage";
-  departments: DepartmentOption[];
+  managedNavigation?: boolean;
+  departments: SystemRecord[];
 }>();
 const emit = defineEmits<{
   created: [department: DepartmentOption];
 }>();
 
+const choices = computed(() => departmentOptions(props.departments));
 const name = shallowRef("");
 const code = shallowRef("");
 const parentId = shallowRef<string>();
@@ -63,9 +60,10 @@ watch(open, (value) => {
 
 onMounted(() => {
   window.addEventListener("beforeunload", preventDirtyUnload);
-  removeRouteGuard = router?.beforeEach(() =>
-    dirty.value ? confirmation.request(create) : true,
-  );
+  if (!props.managedNavigation)
+    removeRouteGuard = router?.beforeEach(() =>
+      dirty.value ? confirmation.request(create) : true,
+    );
 });
 
 onBeforeUnmount(() => {
@@ -103,6 +101,7 @@ async function create(): Promise<boolean> {
 }
 
 function beforeClose() {
+  if (saving.value) return false;
   return dirty.value ? confirmation.request(create) : true;
 }
 
@@ -128,6 +127,7 @@ function readDepartment(record: SystemRecord): DepartmentOption {
       typeof record.parentId === "string" ? record.parentId : parentId.value,
   };
 }
+defineExpose({ beforeClose });
 </script>
 
 <template>
@@ -153,23 +153,15 @@ function readDepartment(record: SystemRecord): DepartmentOption {
         <Input v-model="code" placeholder="例如 sales" />
       </label>
     </div>
-    <label class="grid gap-2 text-sm font-medium">
+    <div class="grid gap-2 text-sm font-medium">
       <span>上级部门</span>
-      <Select v-model="parentId">
-        <SelectTrigger class="w-full" aria-label="上级部门">
-          <SelectValue placeholder="请选择上级部门" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem
-            v-for="department in departments"
-            :key="department.id"
-            :value="department.id"
-          >
-            {{ department.name }}（{{ department.code }}）
-          </SelectItem>
-        </SelectContent>
-      </Select>
-    </label>
+      <PagedSelectionList
+        :items="choices"
+        :model-value="parentId ? [parentId] : []"
+        label="上级部门"
+        @update:model-value="parentId = $event[0]"
+      />
+    </div>
   </FormDialog>
 
   <UnsavedChangesDialog

package/template/apps/web/src/pages/system/components/user-account/CreateDepartmentDialog.webtest.ts

@@ -52,15 +52,11 @@ describe("CreateDepartmentDialog", () => {
             template:
               '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
           }),
-          Select: defineComponent({
+          PagedSelectionList: defineComponent({
             emits: ["update:modelValue"],
             template:
-              "<button data-testid=\"choose-parent\" @click=\"$emit('update:modelValue', 'dept_root')\"><slot /></button>",
+              "<button data-testid=\"choose-parent\" @click=\"$emit('update:modelValue', ['dept_root'])\">选择总部</button>",
           }),
-          SelectTrigger: { template: "<span><slot /></span>" },
-          SelectValue: { template: "<span />" },
-          SelectContent: { template: "<span><slot /></span>" },
-          SelectItem: { template: "<span><slot /></span>" },
           UnsavedChangesDialog: { template: "<div />" },
         },
       },

package/template/apps/web/src/pages/system/components/user-account/CreateRoleDialog.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  shallowRef,
+  useTemplateRef,
+} from "vue";
+import { routerKey } from "vue-router";
+import type { PermissionDefinition } from "@southwind-ai/shared";
+import FormDialog from "@/components/common/FormDialog.vue";
+import UnsavedChangesDialog from "@/components/common/UnsavedChangesDialog.vue";
+import { useUnsavedChangesConfirmation } from "@/composables/useUnsavedChangesConfirmation";
+import { createSystemResource, type SystemRecord } from "@/services/system-api";
+import RolePolicyForm from "../role-policy/RolePolicyForm.vue";
+
+const open = defineModel<boolean>("open", { default: false });
+const props = defineProps<{
+  permissions: PermissionDefinition[];
+  managedNavigation?: boolean;
+}>();
+const emit = defineEmits<{ created: [role: SystemRecord] }>();
+interface RoleFormHandle {
+  dirty: boolean;
+  submit(): void;
+  markSaved(): void;
+}
+const roleForm = useTemplateRef<RoleFormHandle>("roleForm");
+const defaults = {
+  dataScope: "self",
+  permissionKeys: [],
+  departmentIds: [],
+  menuKeys: [],
+  status: "active",
+};
+const saving = shallowRef(false);
+const error = shallowRef("");
+const dirty = computed(() => open.value && Boolean(roleForm.value?.dirty));
+const confirmation = useUnsavedChangesConfirmation();
+const router = inject(routerKey, null);
+let removeRouteGuard: (() => void) | undefined;
+let submittedSave: Promise<boolean> | undefined;
+
+async function create(payload: Record<string, unknown>): Promise<boolean> {
+  if (saving.value) return false;
+  if (payload.status !== "active") {
+    error.value = "新建并分配给账号的角色须为启用状态。";
+    return false;
+  }
+  saving.value = true;
+  error.value = "";
+  try {
+    const role = await createSystemResource("roles", payload);
+    roleForm.value?.markSaved();
+    emit("created", role);
+    open.value = false;
+    return true;
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : String(cause);
+    return false;
+  } finally {
+    saving.value = false;
+  }
+}
+function handleSubmit(payload: Record<string, unknown>) {
+  submittedSave = create(payload);
+}
+async function saveForm(): Promise<boolean> {
+  submittedSave = undefined;
+  roleForm.value?.submit();
+  return submittedSave ? await submittedSave : false;
+}
+function beforeClose() {
+  if (saving.value) return false;
+  return dirty.value ? confirmation.request(saveForm) : true;
+}
+function preventDirtyUnload(event: BeforeUnloadEvent) {
+  if (!dirty.value && !saving.value) return;
+  event.preventDefault();
+  event.returnValue = "";
+}
+onMounted(() => {
+  window.addEventListener("beforeunload", preventDirtyUnload);
+  if (!props.managedNavigation)
+    removeRouteGuard = router?.beforeEach(() =>
+      open.value ? beforeClose() : true,
+    );
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("beforeunload", preventDirtyUnload);
+  removeRouteGuard?.();
+});
+defineExpose({ beforeClose });
+</script>
+
+<template>
+  <FormDialog
+    v-model:open="open"
+    title="新建角色并选择权限"
+    description="选择角色功能权限和数据范围，创建后会自动加入当前账号，账号草稿保持不变。"
+    submit-text="创建并选中"
+    content-class="sm:max-w-4xl"
+    :loading="saving"
+    :before-close="beforeClose"
+    @submit="saveForm"
+  >
+    <p v-if="error" class="text-sm text-destructive" role="alert">
+      {{ error }}
+    </p>
+    <fieldset class="contents" :disabled="saving">
+      <RolePolicyForm
+        v-if="open"
+        ref="roleForm"
+        :defaults="defaults"
+        :permissions="permissions"
+        @submit="handleSubmit"
+      />
+    </fieldset>
+  </FormDialog>
+  <UnsavedChangesDialog
+    :open="confirmation.open.value"
+    :saving="confirmation.saving.value"
+    description="角色信息尚未保存。取消会保留当前表单；保存成功后才会继续关闭或离开。"
+    @cancel="confirmation.cancel"
+    @save="confirmation.save"
+  />
+</template>

package/template/apps/web/src/pages/system/components/user-account/CreateRoleDialog.webtest.ts

@@ -0,0 +1,76 @@
+import { defineComponent } from "vue";
+import { flushPromises, mount } from "@vue/test-utils";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import CreateRoleDialog from "./CreateRoleDialog.vue";
+import FormDialog from "@/components/common/FormDialog.vue";
+
+const api = vi.hoisted(() => ({
+  createSystemResource: vi.fn(),
+  listSystemResource: vi.fn(),
+}));
+vi.mock("@/services/system-api", () => api);
+afterEach(() => vi.clearAllMocks());
+
+describe("账号内新建授权角色", () => {
+  test("在独立对话框选择新功能权限，创建后回传完整角色且保存前保持脏状态", async () => {
+    const role = {
+      id: "role_report",
+      code: "report",
+      name: "报表审核员",
+      status: "active",
+      permissionKeys: ["business.report.export"],
+    };
+    api.createSystemResource.mockResolvedValue(role);
+    const wrapper = mount(CreateRoleDialog, {
+      props: {
+        open: true,
+        permissions: [
+          {
+            key: "business.report.export",
+            label: "导出报表",
+            module: "business",
+            moduleLabel: "业务",
+            resource: "report",
+            resourceLabel: "报表",
+            action: "export",
+          },
+        ],
+      },
+      global: {
+        stubs: {
+          FormDialog: defineComponent({
+            props: { open: Boolean, loading: Boolean, beforeClose: Function },
+            emits: ["submit", "update:open"],
+            template:
+              '<div><slot /><button data-testid="create-role" :disabled="loading" @click="$emit(\'submit\')">创建</button></div>',
+          }),
+          UnsavedChangesDialog: { template: "<div />" },
+        },
+      },
+    });
+    const inputs = wrapper.findAll("input");
+    await inputs[0]!.setValue("report");
+    await inputs[1]!.setValue("报表审核员");
+    await wrapper
+      .get('[data-testid="permission-business.report.export"]')
+      .trigger("click");
+    const unload = new Event("beforeunload", { cancelable: true });
+    window.dispatchEvent(unload);
+    expect(unload.defaultPrevented).toBe(true);
+    await wrapper.get('[data-testid="create-role"]').trigger("click");
+    await flushPromises();
+    expect(api.createSystemResource).toHaveBeenCalledWith("roles", {
+      code: "report",
+      name: "报表审核员",
+      status: "active",
+      dataScope: "self",
+      permissionKeys: ["business.report.export"],
+      departmentIds: [],
+      menuKeys: [],
+    });
+    expect(wrapper.emitted("created")?.at(-1)).toEqual([role]);
+    expect(wrapper.emitted("update:open")?.at(-1)).toEqual([false]);
+    expect(wrapper.getComponent(FormDialog).props("loading")).toBe(false);
+    wrapper.unmount();
+  });
+});

package/template/apps/web/src/pages/system/components/user-account/RolePermissionSummary.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, shallowRef, watch } from "vue";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 import type { PermissionDefinition } from "@southwind-ai/shared";
 import {
   groupPermissions,
@@ -11,13 +13,37 @@ const props = defineProps<{
   permissions: PermissionDefinition[];
 }>();
 
+const keyword = shallowRef("");
+const page = shallowRef(1);
+const filteredKeys = computed(() =>
+  props.permissionKeys.filter((key) => {
+    const definition = props.permissions.find(
+      (permission) => permission.key === key,
+    );
+    return `${key} ${definition?.label || ""} ${definition?.resourceLabel || ""} ${definition?.moduleLabel || ""}`
+      .toLocaleLowerCase()
+      .includes(keyword.value.trim().toLocaleLowerCase());
+  }),
+);
+const pageCount = computed(() =>
+  Math.max(1, Math.ceil(filteredKeys.value.length / 10)),
+);
+const pageKeys = computed(() =>
+  filteredKeys.value.slice((page.value - 1) * 10, page.value * 10),
+);
+watch(keyword, () => {
+  page.value = 1;
+});
+watch(pageCount, (count) => {
+  page.value = Math.min(page.value, count);
+});
 const knownPermissions = computed(() => {
-  const selected = new Set(props.permissionKeys);
+  const selected = new Set(pageKeys.value);
   return props.permissions.filter(({ key }) => selected.has(key));
 });
 const groups = computed(() => groupPermissions(knownPermissions.value));
 const unknownKeys = computed(() =>
-  unknownPermissionKeys(props.permissionKeys, props.permissions),
+  unknownPermissionKeys(pageKeys.value, props.permissions),
 );
 </script>
 
@@ -35,6 +61,12 @@ const unknownKeys = computed(() =>
       查看 {{ permissionKeys.length }} 项功能权限
     </summary>
     <div class="mt-3 grid gap-3">
+      <Input
+        v-model="keyword"
+        @keydown.enter.prevent
+        aria-label="搜索角色权限摘要"
+        placeholder="搜索功能权限"
+      />
       <section v-for="group in groups" :key="group.key" class="grid gap-2">
         <p class="font-medium text-foreground">{{ group.label }}</p>
         <div
@@ -54,6 +86,32 @@ const unknownKeys = computed(() =>
         </p>
         <code class="break-all leading-5">{{ unknownKeys.join("、") }}</code>
       </section>
+      <div
+        class="flex flex-wrap items-center justify-between gap-2 text-muted-foreground"
+      >
+        <span
+          >共 {{ filteredKeys.length }} 条，每页 10 条，第 {{ page }} /
+          {{ pageCount }} 页</span
+        >
+        <div class="flex gap-2">
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            :disabled="page <= 1"
+            @click="page--"
+            >上一页</Button
+          >
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            :disabled="page >= pageCount"
+            @click="page++"
+            >下一页</Button
+          >
+        </div>
+      </div>
     </div>
   </details>
 </template>