create-windy 0.6.20 → 0.7.0

package/template/apps/web/src/pages/system/SystemResourceRoutePage.vue

@@ -17,15 +17,21 @@ const access = useAccessSnapshot();
 const canToggleFeatures = computed(() =>
   access.snapshot.value ? canToggleFeatureFlags(access.snapshot.value) : false,
 );
+function canAccess(featureKey: string, permissionKey: string): boolean {
+  const snapshot = access.snapshot.value;
+  return Boolean(
+    snapshot &&
+    evaluateWebAccess(snapshot, { featureKey, permissionKey }).allowed,
+  );
+}
 const canManageMenus = computed(() =>
-  Boolean(
-    access.snapshot.value?.actor.permissionKeys.includes("system.menu.manage"),
-  ),
+  canAccess("system.menu", "system.menu.manage"),
 );
 const departmentCreateMode = computed<"create" | "manage" | undefined>(() => {
-  const permissions = access.snapshot.value?.actor.permissionKeys || [];
-  if (permissions.includes("system.department.create")) return "create";
-  if (permissions.includes("system.department.manage")) return "manage";
+  if (canAccess("system.department", "system.department.create"))
+    return "create";
+  if (canAccess("system.department", "system.department.manage"))
+    return "manage";
   return undefined;
 });
 // @windy-module system.bulk-data begin
@@ -46,17 +52,25 @@ const optionalResourceProps = computed(() => ({
 }));
 const config = computed(() => {
   const base = systemResourceConfigs[props.resourceKey];
-  const permissionKeys = access.snapshot.value?.actor.permissionKeys || [];
-  return props.resourceKey === "features" && !canToggleFeatures.value
+  if (props.resourceKey === "features" && !canToggleFeatures.value)
+    return { ...base, readonly: true };
+  const capabilities: Partial<Record<SystemResourceKey, string>> = {
+    users: "system.user",
+    roles: "system.role",
+    departments: "system.department",
+  };
+  const capability = capabilities[props.resourceKey];
+  return capability && !canAccess(capability, `${capability}.manage`)
     ? { ...base, readonly: true }
-    : props.resourceKey === "users" &&
-        !permissionKeys.includes("system.user.manage")
-      ? { ...base, readonly: true }
-      : base;
+    : base;
 });
 
 function handleMutation() {
-  if (props.resourceKey === "features" || props.resourceKey === "menus") {
+  if (
+    ["features", "menus", "users", "roles", "departments"].includes(
+      props.resourceKey,
+    )
+  ) {
     void access.refresh();
   }
 }

package/template/apps/web/src/pages/system/SystemResourceRoutePage.webtest.ts

@@ -4,6 +4,7 @@ import { shallowRef } from "vue";
 import type { WebAccessSnapshot } from "@/layout/navigation";
 import MenuManagementPage from "./components/menu-management/MenuManagementPage.vue";
 import SystemResourceRoutePage from "./SystemResourceRoutePage.vue";
+import SystemResourcePage from "./components/SystemResourcePage.vue";
 
 const api = vi.hoisted(() => ({ list: vi.fn(), refreshAccess: vi.fn() }));
 
@@ -97,4 +98,71 @@ describe("SystemResourceRoutePage", () => {
     expect(api.refreshAccess).toHaveBeenCalledOnce();
     wrapper.unmount();
   });
+  test("部门管理同时遵守权限和Feature决定编辑入口", async () => {
+    const previous = snapshot.value;
+    snapshot.value = {
+      ...previous,
+      actor: {
+        ...previous.actor,
+        permissionKeys: [
+          "system.department.read",
+          "system.department.manage",
+          "system.department.create",
+        ],
+      },
+      features: [
+        {
+          key: "system.department",
+          enabled: false,
+          visible: "visible",
+          allowed: false,
+          reason: "feature-disabled",
+        },
+      ],
+    };
+    const wrapper = mount(SystemResourceRoutePage, {
+      props: { resourceKey: "departments" },
+      global: { stubs: { SystemResourcePage: true } },
+    });
+    expect(
+      wrapper.getComponent(SystemResourcePage).props("config").readonly,
+    ).toBe(true);
+    expect(
+      wrapper.getComponent(SystemResourcePage).props("departmentCreateMode"),
+    ).toBeUndefined();
+    snapshot.value = {
+      ...snapshot.value,
+      features: [
+        {
+          key: "system.department",
+          enabled: true,
+          visible: "visible",
+          allowed: true,
+          reason: "allowed",
+        },
+      ],
+    };
+    await flushPromises();
+    expect(
+      wrapper.getComponent(SystemResourcePage).props("config").readonly,
+    ).not.toBe(true);
+    expect(
+      wrapper.getComponent(SystemResourcePage).props("departmentCreateMode"),
+    ).toBe("create");
+    wrapper.unmount();
+    snapshot.value = previous;
+  });
+
+  test.each(["users", "roles", "departments"] as const)(
+    "%s 保存后刷新当前访问快照",
+    (resourceKey) => {
+      const wrapper = mount(SystemResourceRoutePage, {
+        props: { resourceKey },
+        global: { stubs: { SystemResourcePage: true } },
+      });
+      wrapper.getComponent(SystemResourcePage).vm.$emit("mutated");
+      expect(api.refreshAccess).toHaveBeenCalledOnce();
+      wrapper.unmount();
+    },
+  );
 });

package/template/apps/web/src/pages/system/components/PagedSelectionList.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed, shallowRef, useId, watch } from "vue";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+const props = defineProps<{
+  items: { id: string; label: string; description?: string }[];
+  modelValue: string[];
+  label: string;
+  multiple?: boolean;
+  disabled?: boolean;
+  clearable?: boolean;
+}>();
+const emit = defineEmits<{ "update:modelValue": [value: string[]] }>();
+const selectionName = useId();
+const keyword = shallowRef("");
+const page = shallowRef(1);
+const filtered = computed(() => {
+  const query = keyword.value.trim().toLocaleLowerCase();
+  return props.items.filter((item) =>
+    `${item.label} ${item.description || ""}`
+      .toLocaleLowerCase()
+      .includes(query),
+  );
+});
+const pageCount = computed(() =>
+  Math.max(1, Math.ceil(filtered.value.length / 10)),
+);
+const visible = computed(() =>
+  filtered.value.slice((page.value - 1) * 10, page.value * 10),
+);
+const selectedNames = computed(() =>
+  props.modelValue
+    .map(
+      (id) =>
+        props.items.find((item) => item.id === id)?.label ||
+        `当前选项（${id}）`,
+    )
+    .join("、"),
+);
+watch(keyword, () => {
+  page.value = 1;
+});
+watch(pageCount, (count) => {
+  page.value = Math.min(page.value, count);
+});
+function select(id: string, checked: boolean) {
+  if (props.disabled) return;
+  const selected = new Set(props.multiple ? props.modelValue : []);
+  if (checked) selected.add(id);
+  else selected.delete(id);
+  emit("update:modelValue", [...selected]);
+}
+</script>
+
+<template>
+  <section class="grid gap-3 rounded-lg border p-3" :aria-label="label">
+    <Input
+      v-model="keyword"
+      @keydown.enter.prevent
+      :aria-label="`搜索${label}`"
+      :placeholder="`搜索${label}`"
+      :disabled="disabled"
+    />
+    <Button
+      v-if="clearable && modelValue.length"
+      type="button"
+      size="sm"
+      variant="ghost"
+      :disabled="disabled"
+      @click="emit('update:modelValue', [])"
+      >清空选择</Button
+    >
+    <p class="text-xs text-muted-foreground">
+      已选 {{ modelValue.length }} 项<span v-if="selectedNames"
+        >：{{ selectedNames }}</span
+      >
+    </p>
+    <div v-for="item in visible" :key="item.id" class="rounded-md border p-3">
+      <label class="flex cursor-pointer items-start gap-3 text-sm">
+        <input
+          :type="multiple ? 'checkbox' : 'radio'"
+          :name="multiple ? undefined : selectionName"
+          :checked="modelValue.includes(item.id)"
+          :disabled="disabled"
+          :aria-label="item.label"
+          class="mt-1 accent-primary"
+          @change="select(item.id, ($event.target as HTMLInputElement).checked)"
+        />
+        <span class="grid gap-1"
+          ><span class="font-medium">{{ item.label }}</span
+          ><span
+            v-if="item.description"
+            class="break-all text-xs text-muted-foreground"
+            >{{ item.description }}</span
+          ></span
+        >
+      </label>
+      <slot name="detail" :id="item.id" />
+    </div>
+    <p v-if="!visible.length" class="text-sm text-muted-foreground">
+      暂无匹配选项。
+    </p>
+    <div
+      class="flex flex-wrap items-center justify-between gap-2 text-xs text-muted-foreground"
+    >
+      <span
+        >共 {{ filtered.length }} 条，每页 10 条，第 {{ page }} /
+        {{ pageCount }} 页</span
+      >
+      <div class="flex gap-2">
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          :disabled="disabled || page <= 1"
+          @click="page--"
+          >上一页</Button
+        >
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          :disabled="disabled || page >= pageCount"
+          @click="page++"
+          >下一页</Button
+        >
+      </div>
+    </div>
+  </section>
+</template>

package/template/apps/web/src/pages/system/components/PagedSelectionList.webtest.ts

@@ -0,0 +1,32 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import PagedSelectionList from "./PagedSelectionList.vue";
+
+describe("分页选择", () => {
+  test("每页十项，搜索与翻页均保留已选项", async () => {
+    const items = Array.from({ length: 21 }, (_, index) => ({
+      id: `item-${index}`,
+      label: `部门 ${index}`,
+    }));
+    const wrapper = mount(PagedSelectionList, {
+      props: { items, modelValue: ["item-0"], label: "部门", multiple: true },
+    });
+    expect(wrapper.findAll('input[type="checkbox"]')).toHaveLength(10);
+    await wrapper
+      .findAll("button")
+      .find((button) => button.text() === "下一页")!
+      .trigger("click");
+    await wrapper.get('input[aria-label="部门 10"]').setValue(true);
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([
+      ["item-0", "item-10"],
+    ]);
+    await wrapper.setProps({ modelValue: ["item-0", "item-10"] });
+    await wrapper.get('input[aria-label="搜索部门"]').setValue("部门 20");
+    expect(wrapper.findAll('input[type="checkbox"]')).toHaveLength(1);
+    expect(wrapper.text()).toContain("已选 2 项：部门 0、部门 10");
+    await wrapper.get('input[aria-label="部门 20"]').setValue(true);
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([
+      ["item-0", "item-10", "item-20"],
+    ]);
+  });
+});

package/template/apps/web/src/pages/system/components/SystemRecordDetailDialog.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import type { SystemRecord } from "@/services/system-api";
+import type { SystemResourceConfig } from "../resource-config";
+const open = defineModel<boolean>("open", { default: false });
+const props = defineProps<{
+  item?: SystemRecord;
+  config: SystemResourceConfig;
+}>();
+const fields = computed(() => {
+  const fields = [...props.config.columns];
+  const extras =
+    props.config.key === "users"
+      ? [{ key: "email", label: "邮箱" }]
+      : props.config.key === "departments"
+        ? [
+            { key: "departmentPath", label: "部门路径" },
+            { key: "childDepartmentCount", label: "直属下级部门" },
+            { key: "userCount", label: "直属成员" },
+          ]
+        : [
+            { key: "permissionKeys", label: "权限点" },
+            { key: "menuKeys", label: "菜单" },
+          ];
+  return [...fields, ...extras];
+});
+function display(key: string): string {
+  const value = props.item?.[key];
+  if (key === "status")
+    return value === "active" ? "启用" : value === "disabled" ? "停用" : "—";
+  if (value === null || value === undefined || value === "") return "—";
+  if (Array.isArray(value)) return value.length ? value.join("、") : "—";
+  if (typeof value === "object") {
+    const field = value as Record<string, unknown>;
+    return String(field.display || field.value || "—");
+  }
+  return String(value);
+}
+</script>
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent class="sm:max-w-2xl">
+      <DialogHeader
+        ><DialogTitle
+          >{{
+            item?.displayName || item?.name || config.title
+          }}详情</DialogTitle
+        ><DialogDescription
+          >查看当前记录及组织归属信息。</DialogDescription
+        ></DialogHeader
+      >
+      <dl class="grid max-h-[65vh] gap-4 overflow-y-auto sm:grid-cols-2">
+        <div v-for="field in fields" :key="field.key" class="space-y-1">
+          <dt class="text-sm text-muted-foreground">{{ field.label }}</dt>
+          <dd class="break-words text-sm">{{ display(field.key) }}</dd>
+        </div>
+      </dl>
+    </DialogContent>
+  </Dialog>
+</template>

package/template/apps/web/src/pages/system/components/SystemResourceEditor.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { computed, useTemplateRef } from "vue";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  shallowRef,
+  useTemplateRef,
+} from "vue";
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
+import UnsavedChangesDialog from "@/components/common/UnsavedChangesDialog.vue";
+import { useUnsavedChangesConfirmation } from "@/composables/useUnsavedChangesConfirmation";
 import type { PermissionDefinition } from "@southwind-ai/shared";
 import FormDialog from "@/components/common/FormDialog.vue";
 import type { SystemRecord } from "@/services/system-api";
@@ -17,16 +26,71 @@ const props = defineProps<{
   permissions?: PermissionDefinition[];
   departmentCreateMode?: "create" | "manage";
   loading?: boolean;
-}>();
-const emit = defineEmits<{
-  submit: [payload: Record<string, unknown>];
+  error?: string;
+  save: (payload: Record<string, unknown>) => Promise<boolean>;
 }>();
 
 interface ResourceFormHandle {
   submit(): void;
+  dirty?: boolean;
+  markSaved?(): void;
+  beforeClose?(): boolean | Promise<boolean>;
 }
 
 const resourceForm = useTemplateRef<ResourceFormHandle>("resourceForm");
+const confirmation = useUnsavedChangesConfirmation();
+const saving = shallowRef(false);
+let submittedSave: Promise<boolean> | undefined;
+const dirty = computed(() => open.value && Boolean(resourceForm.value?.dirty));
+async function persist(payload: Record<string, unknown>): Promise<boolean> {
+  if (saving.value || props.loading) return false;
+  saving.value = true;
+  try {
+    const saved = await props.save(payload);
+    if (saved) {
+      resourceForm.value?.markSaved?.();
+      open.value = false;
+    }
+    return saved;
+  } finally {
+    saving.value = false;
+  }
+}
+function handleSubmit(payload: Record<string, unknown>) {
+  submittedSave = persist(payload);
+}
+async function saveForm(): Promise<boolean> {
+  if (saving.value || props.loading) return false;
+  if (
+    resourceForm.value?.beforeClose &&
+    !(await resourceForm.value.beforeClose())
+  )
+    return false;
+  submittedSave = undefined;
+  resourceForm.value?.submit();
+  return submittedSave ? await submittedSave : false;
+}
+async function beforeClose(): Promise<boolean> {
+  if (saving.value || props.loading) return false;
+  if (!open.value) return true;
+  if (
+    resourceForm.value?.beforeClose &&
+    !(await resourceForm.value.beforeClose())
+  )
+    return false;
+  return !dirty.value || (await confirmation.request(saveForm));
+}
+function preventDirtyUnload(event: BeforeUnloadEvent) {
+  if (!dirty.value && !saving.value && !props.loading) return;
+  event.preventDefault();
+  event.returnValue = "";
+}
+onBeforeRouteLeave(beforeClose);
+onBeforeRouteUpdate(beforeClose);
+onMounted(() => window.addEventListener("beforeunload", preventDirtyUnload));
+onBeforeUnmount(() =>
+  window.removeEventListener("beforeunload", preventDirtyUnload),
+);
 const title = computed(() => (props.item ? "编辑记录" : "新增记录"));
 </script>
 
@@ -35,41 +99,53 @@ const title = computed(() => (props.item ? "编辑记录" : "新增记录"));
     v-model:open="open"
     :title="title"
     :description="config.description"
-    :loading="loading"
+    :loading="loading || saving"
+    :before-close="beforeClose"
     :content-class="config.key === 'roles' ? 'sm:max-w-4xl' : undefined"
-    @submit="resourceForm?.submit()"
+    @submit="saveForm"
   >
-    <RolePolicyForm
-      v-if="config.key === 'roles'"
-      ref="resourceForm"
-      :item="item"
-      :defaults="defaults"
-      :permissions="permissions || []"
-      @submit="emit('submit', $event)"
-    />
-    <UserAccountForm
-      v-else-if="config.key === 'users'"
-      ref="resourceForm"
-      :item="item"
-      :defaults="defaults"
-      :permissions="permissions || []"
-      :department-create-mode="departmentCreateMode"
-      @submit="emit('submit', $event)"
-    />
-    <DepartmentOrganizationForm
-      v-else-if="config.key === 'departments'"
-      ref="resourceForm"
-      :item="item"
-      :defaults="defaults"
-      @submit="emit('submit', $event)"
-    />
-    <SystemResourceForm
-      v-else
-      ref="resourceForm"
-      :fields="config.fields"
-      :item="item"
-      :defaults="defaults"
-      @submit="emit('submit', $event)"
-    />
+    <p v-if="error" class="text-sm text-destructive" role="alert">
+      {{ error }}
+    </p>
+    <fieldset class="contents" :disabled="loading || saving">
+      <RolePolicyForm
+        v-if="config.key === 'roles'"
+        ref="resourceForm"
+        :item="item"
+        :defaults="defaults"
+        :permissions="permissions || []"
+        @submit="handleSubmit"
+      />
+      <UserAccountForm
+        v-else-if="config.key === 'users'"
+        ref="resourceForm"
+        :item="item"
+        :defaults="defaults"
+        :permissions="permissions || []"
+        :department-create-mode="departmentCreateMode"
+        @submit="handleSubmit"
+      />
+      <DepartmentOrganizationForm
+        v-else-if="config.key === 'departments'"
+        ref="resourceForm"
+        :item="item"
+        :defaults="defaults"
+        @submit="handleSubmit"
+      />
+      <SystemResourceForm
+        v-else
+        ref="resourceForm"
+        :fields="config.fields"
+        :item="item"
+        :defaults="defaults"
+        @submit="handleSubmit"
+      />
+    </fieldset>
   </FormDialog>
+  <UnsavedChangesDialog
+    :open="confirmation.open.value"
+    :saving="confirmation.saving.value"
+    @cancel="confirmation.cancel"
+    @save="confirmation.save"
+  />
 </template>