create-windy 0.6.18 → 0.6.19

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

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  shallowRef,
+  watch,
+} from "vue";
+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 { useUnsavedChangesConfirmation } from "@/composables/useUnsavedChangesConfirmation";
+import {
+  createSystemResource,
+  quickCreateDepartment,
+  type SystemRecord,
+} from "@/services/system-api";
+
+interface DepartmentOption {
+  id: string;
+  code: string;
+  name: string;
+  parentId?: string;
+}
+
+const open = defineModel<boolean>("open", { default: false });
+const props = defineProps<{
+  mode: "create" | "manage";
+  departments: DepartmentOption[];
+}>();
+const emit = defineEmits<{
+  created: [department: DepartmentOption];
+}>();
+
+const name = shallowRef("");
+const code = shallowRef("");
+const parentId = shallowRef<string>();
+const saving = shallowRef(false);
+const error = shallowRef("");
+const confirmation = useUnsavedChangesConfirmation();
+const router = inject(routerKey, null);
+let removeRouteGuard: (() => void) | undefined;
+
+const dirty = computed(
+  () => open.value && Boolean(name.value || code.value || parentId.value),
+);
+const valid = computed(() =>
+  Boolean(name.value.trim() && code.value.trim() && parentId.value),
+);
+
+watch(open, (value) => {
+  if (!value) reset();
+});
+
+onMounted(() => {
+  window.addEventListener("beforeunload", preventDirtyUnload);
+  removeRouteGuard = router?.beforeEach(() =>
+    dirty.value ? confirmation.request(create) : true,
+  );
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("beforeunload", preventDirtyUnload);
+  removeRouteGuard?.();
+});
+
+async function create(): Promise<boolean> {
+  if (saving.value || !valid.value) return false;
+  saving.value = true;
+  error.value = "";
+  try {
+    const payload = {
+      code: code.value.trim(),
+      name: name.value.trim(),
+      parentId: parentId.value,
+      order: 100,
+    };
+    const created =
+      props.mode === "create"
+        ? await quickCreateDepartment(payload)
+        : await createSystemResource("departments", payload);
+    emit("created", readDepartment(created));
+    open.value = false;
+    return true;
+  } catch (currentError) {
+    error.value =
+      currentError instanceof Error
+        ? currentError.message
+        : String(currentError);
+    return false;
+  } finally {
+    saving.value = false;
+  }
+}
+
+function beforeClose() {
+  return dirty.value ? confirmation.request(create) : true;
+}
+
+function preventDirtyUnload(event: BeforeUnloadEvent) {
+  if (!dirty.value) return;
+  event.preventDefault();
+  event.returnValue = "";
+}
+
+function reset() {
+  name.value = "";
+  code.value = "";
+  parentId.value = undefined;
+  error.value = "";
+}
+
+function readDepartment(record: SystemRecord): DepartmentOption {
+  return {
+    id: record.id,
+    code: typeof record.code === "string" ? record.code : code.value.trim(),
+    name: typeof record.name === "string" ? record.name : name.value.trim(),
+    parentId:
+      typeof record.parentId === "string" ? record.parentId : parentId.value,
+  };
+}
+</script>
+
+<template>
+  <FormDialog
+    v-model:open="open"
+    title="新建部门"
+    description="创建成功后会自动选为该用户的所属部门。"
+    submit-text="创建并选中"
+    :loading="saving"
+    :submit-disabled="!valid"
+    :before-close="beforeClose"
+    content-class="sm:max-w-xl"
+    @submit="create"
+  >
+    <p v-if="error" class="text-sm text-destructive">{{ error }}</p>
+    <div class="grid gap-4 sm:grid-cols-2">
+      <label class="grid gap-2 text-sm font-medium">
+        <span>部门名称</span>
+        <Input v-model="name" placeholder="例如 销售部" />
+      </label>
+      <label class="grid gap-2 text-sm font-medium">
+        <span>部门编码</span>
+        <Input v-model="code" placeholder="例如 sales" />
+      </label>
+    </div>
+    <label 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>
+  </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/CreateDepartmentDialog.webtest.ts

@@ -0,0 +1,93 @@
+import { defineComponent } from "vue";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import CreateDepartmentDialog from "./CreateDepartmentDialog.vue";
+
+const api = vi.hoisted(() => ({
+  quickCreateDepartment: vi.fn(),
+  createSystemResource: vi.fn(),
+}));
+
+vi.mock("@/services/system-api", async () => {
+  const actual = await vi.importActual<typeof import("@/services/system-api")>(
+    "@/services/system-api",
+  );
+  return { ...actual, ...api };
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+  document.body.innerHTML = "";
+});
+
+describe("CreateDepartmentDialog", () => {
+  test("在独立 Modal 中创建部门并回传新部门", async () => {
+    api.quickCreateDepartment.mockResolvedValue({
+      id: "dept_sales",
+      code: "sales",
+      name: "销售部",
+      parentId: "dept_root",
+    });
+    const wrapper = mount(CreateDepartmentDialog, {
+      attachTo: document.body,
+      props: {
+        open: true,
+        mode: "create",
+        departments: [{ id: "dept_root", code: "root", name: "总部" }],
+      },
+      global: {
+        stubs: {
+          FormDialog: defineComponent({
+            props: {
+              open: Boolean,
+              submitDisabled: Boolean,
+            },
+            emits: ["submit", "update:open"],
+            template:
+              '<div role="dialog"><slot /><button data-testid="submit" :disabled="submitDisabled" @click="$emit(\'submit\')">提交</button></div>',
+          }),
+          Input: defineComponent({
+            props: { modelValue: String },
+            emits: ["update:modelValue"],
+            template:
+              '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+          }),
+          Select: defineComponent({
+            emits: ["update:modelValue"],
+            template:
+              "<button data-testid=\"choose-parent\" @click=\"$emit('update:modelValue', 'dept_root')\"><slot /></button>",
+          }),
+          SelectTrigger: { template: "<span><slot /></span>" },
+          SelectValue: { template: "<span />" },
+          SelectContent: { template: "<span><slot /></span>" },
+          SelectItem: { template: "<span><slot /></span>" },
+          UnsavedChangesDialog: { template: "<div />" },
+        },
+      },
+    });
+    await flushPromises();
+
+    const inputs = wrapper.findAll("input");
+    await inputs[0]!.setValue("销售部");
+    await inputs[1]!.setValue("sales");
+    await wrapper.get('[data-testid="choose-parent"]').trigger("click");
+    await wrapper.get('[data-testid="submit"]').trigger("click");
+    await flushPromises();
+
+    expect(api.quickCreateDepartment).toHaveBeenCalledWith({
+      code: "sales",
+      name: "销售部",
+      parentId: "dept_root",
+      order: 100,
+    });
+    expect(wrapper.emitted("created")?.at(-1)).toEqual([
+      {
+        id: "dept_sales",
+        code: "sales",
+        name: "销售部",
+        parentId: "dept_root",
+      },
+    ]);
+    wrapper.unmount();
+  });
+});

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { PermissionDefinition } from "@southwind-ai/shared";
+import {
+  groupPermissions,
+  unknownPermissionKeys,
+} from "../role-policy/permission-tree";
+
+const props = defineProps<{
+  permissionKeys: string[];
+  permissions: PermissionDefinition[];
+}>();
+
+const knownPermissions = computed(() => {
+  const selected = new Set(props.permissionKeys);
+  return props.permissions.filter(({ key }) => selected.has(key));
+});
+const groups = computed(() => groupPermissions(knownPermissions.value));
+const unknownKeys = computed(() =>
+  unknownPermissionKeys(props.permissionKeys, props.permissions),
+);
+</script>
+
+<template>
+  <p
+    v-if="!permissionKeys.length"
+    class="mt-3 border-t pt-3 text-xs text-muted-foreground"
+  >
+    未分配功能权限
+  </p>
+  <details v-else class="mt-3 border-t pt-3 text-xs">
+    <summary
+      class="cursor-pointer select-none font-medium text-muted-foreground hover:text-foreground"
+    >
+      查看 {{ permissionKeys.length }} 项功能权限
+    </summary>
+    <div class="mt-3 grid gap-3">
+      <section v-for="group in groups" :key="group.key" class="grid gap-2">
+        <p class="font-medium text-foreground">{{ group.label }}</p>
+        <div
+          v-for="resource in group.resources"
+          :key="resource.key"
+          class="grid gap-1 sm:grid-cols-[8rem_1fr]"
+        >
+          <span class="text-muted-foreground">{{ resource.label }}</span>
+          <span class="leading-5">
+            {{ resource.permissions.map(({ label }) => label).join("、") }}
+          </span>
+        </div>
+      </section>
+      <section v-if="unknownKeys.length" class="grid gap-1">
+        <p class="font-medium text-amber-700 dark:text-amber-400">
+          未注册的历史权限
+        </p>
+        <code class="break-all leading-5">{{ unknownKeys.join("、") }}</code>
+      </section>
+    </div>
+  </details>
+</template>

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

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { onMounted, shallowRef, watch } from "vue";
 import { PlusIcon } from "@lucide/vue";
-import { PASSWORD_POLICY, type PasswordPolicy } from "@southwind-ai/shared";
+import {
+  PASSWORD_POLICY,
+  type PasswordPolicy,
+  type PermissionDefinition,
+} from "@southwind-ai/shared";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -11,13 +15,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  createSystemResource,
-  listSystemResource,
-  quickCreateDepartment,
-  type SystemRecord,
-} from "@/services/system-api";
+import { listSystemResource, type SystemRecord } from "@/services/system-api";
 import { loadPasswordPolicy } from "@/services/auth-api";
+import CreateDepartmentDialog from "./CreateDepartmentDialog.vue";
 import UserRoleSelector from "./UserRoleSelector.vue";
 
 interface DepartmentOption {
@@ -30,6 +30,7 @@ interface DepartmentOption {
 const props = defineProps<{
   item?: SystemRecord;
   defaults: Record<string, unknown>;
+  permissions: PermissionDefinition[];
   departmentCreateMode?: "create" | "manage";
 }>();
 
@@ -40,12 +41,8 @@ const emit = defineEmits<{
 const form = shallowRef<Record<string, unknown>>({});
 const departments = shallowRef<DepartmentOption[]>([]);
 const loading = shallowRef(false);
-const creating = shallowRef(false);
 const error = shallowRef("");
-const quickOpen = shallowRef(false);
-const quickName = shallowRef("");
-const quickCode = shallowRef("");
-const quickParentId = shallowRef<string | undefined>();
+const departmentDialogOpen = shallowRef(false);
 const governedTouched = shallowRef<Record<string, boolean>>({});
 const passwordPolicy = shallowRef<PasswordPolicy>(PASSWORD_POLICY);
 
@@ -114,32 +111,9 @@ function selectedRoleIds(): string[] {
     : [];
 }
 
-async function createDepartment() {
-  if (!props.departmentCreateMode || creating.value) return;
-  creating.value = true;
-  error.value = "";
-  try {
-    const payload = {
-      code: quickCode.value,
-      name: quickName.value,
-      parentId: quickParentId.value,
-      order: 100,
-    };
-    const created =
-      props.departmentCreateMode === "create"
-        ? await quickCreateDepartment(payload)
-        : await createSystemResource("departments", payload);
-    await loadDepartments();
-    update("departmentId", created.id);
-    quickOpen.value = false;
-    quickName.value = "";
-    quickCode.value = "";
-    quickParentId.value = undefined;
-  } catch (currentError) {
-    error.value = readError(currentError);
-  } finally {
-    creating.value = false;
-  }
+async function selectCreatedDepartment(department: DepartmentOption) {
+  await loadDepartments();
+  update("departmentId", department.id);
 }
 
 function submit() {
@@ -218,7 +192,7 @@ defineExpose({ submit });
           type="button"
           size="sm"
           variant="ghost"
-          @click="quickOpen = !quickOpen"
+          @click="departmentDialogOpen = true"
         >
           <PlusIcon data-icon="inline-start" />新建部门
         </Button>
@@ -246,6 +220,7 @@ defineExpose({ submit });
     </div>
     <UserRoleSelector
       :model-value="selectedRoleIds()"
+      :permissions="permissions"
       @update:model-value="update('roleIds', $event)"
     />
     <div class="grid gap-4 sm:grid-cols-2">
@@ -283,38 +258,13 @@ defineExpose({ submit });
         </span>
       </label>
     </div>
-    <section
-      v-if="quickOpen"
-      class="space-y-3 rounded-lg border bg-muted/20 p-4"
-    >
-      <p class="text-sm font-medium">新建并选中部门</p>
-      <div class="grid gap-3 sm:grid-cols-2">
-        <Input v-model="quickName" placeholder="部门名称" />
-        <Input v-model="quickCode" placeholder="部门编码，例如 sales" />
-      </div>
-      <Select v-model="quickParentId">
-        <SelectTrigger class="w-full" aria-label="上级部门">
-          <SelectValue placeholder="请选择上级部门" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem
-            v-for="department in departments"
-            :key="department.id"
-            :value="department.id"
-          >
-            {{ department.name }}
-          </SelectItem>
-        </SelectContent>
-      </Select>
-      <Button
-        type="button"
-        size="sm"
-        :disabled="creating || !quickParentId"
-        @click="createDepartment"
-      >
-        {{ creating ? "创建中…" : "创建并选中" }}
-      </Button>
-    </section>
     <p v-if="error" class="text-sm text-destructive">{{ error }}</p>
+    <CreateDepartmentDialog
+      v-if="departmentCreateMode"
+      v-model:open="departmentDialogOpen"
+      :mode="departmentCreateMode"
+      :departments="departments"
+      @created="selectCreatedDepartment"
+    />
   </div>
 </template>

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

@@ -0,0 +1,71 @@
+import { defineComponent } from "vue";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import UserAccountForm from "./UserAccountForm.vue";
+
+const api = vi.hoisted(() => ({
+  list: vi.fn(),
+  loadPasswordPolicy: 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 };
+});
+
+vi.mock("@/services/auth-api", () => ({
+  loadPasswordPolicy: api.loadPasswordPolicy,
+}));
+
+afterEach(() => vi.clearAllMocks());
+
+describe("UserAccountForm", () => {
+  test("新建部门使用独立 Modal，不在用户表单底部追加内容", async () => {
+    api.list.mockResolvedValue({
+      items: [{ id: "dept_root", code: "root", name: "总部" }],
+      total: 1,
+      page: 1,
+      pageSize: 100,
+    });
+    api.loadPasswordPolicy.mockResolvedValue({
+      minLength: 12,
+      maxLength: 128,
+      requireUppercase: true,
+      requireLowercase: true,
+      requireNumber: true,
+      requireSpecial: false,
+    });
+    const dialogStub = defineComponent({
+      name: "CreateDepartmentDialog",
+      props: { open: Boolean },
+      emits: ["update:open", "created"],
+      template: '<div data-testid="department-dialog" />',
+    });
+    const wrapper = mount(UserAccountForm, {
+      props: {
+        defaults: { roleIds: [], status: "active" },
+        permissions: [],
+        departmentCreateMode: "create",
+      },
+      global: {
+        stubs: {
+          CreateDepartmentDialog: dialogStub,
+          UserRoleSelector: { template: "<div />" },
+        },
+      },
+    });
+    await flushPromises();
+
+    const dialog = wrapper.getComponent(dialogStub);
+    expect(dialog.props("open")).toBe(false);
+    const openButton = wrapper
+      .findAll("button")
+      .find((button) => button.text() === "新建部门");
+    await openButton?.trigger("click");
+
+    expect(dialog.props("open")).toBe(true);
+    expect(wrapper.text()).not.toContain("新建并选中部门");
+  });
+});

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

@@ -1,16 +1,22 @@
 <script setup lang="ts">
+import type { PermissionDefinition } from "@southwind-ai/shared";
 import { onMounted, shallowRef } from "vue";
 import { Checkbox } from "@/components/ui/checkbox";
 import { listSystemResource } from "@/services/system-api";
+import RolePermissionSummary from "./RolePermissionSummary.vue";
 
 interface RoleOption {
   id: string;
   code: string;
   name: string;
   dataScope: string;
+  permissionKeys: string[];
 }
 
-const props = defineProps<{ modelValue: string[] }>();
+const props = defineProps<{
+  modelValue: string[];
+  permissions: PermissionDefinition[];
+}>();
 const emit = defineEmits<{ "update:modelValue": [value: string[]] }>();
 const roles = shallowRef<RoleOption[]>([]);
 const loading = shallowRef(false);
@@ -37,6 +43,11 @@ async function loadRoles() {
               name: item.name,
               dataScope:
                 typeof item.dataScope === "string" ? item.dataScope : "self",
+              permissionKeys: Array.isArray(item.permissionKeys)
+                ? item.permissionKeys.filter(
+                    (key): key is string => typeof key === "string",
+                  )
+                : [],
             },
           ]
         : [],
@@ -78,34 +89,44 @@ function dataScopeLabel(scope: string): string {
       <label class="text-sm font-medium">账号角色</label>
       <span class="text-xs text-muted-foreground">至少选择一个</span>
     </div>
-    <div
-      class="grid gap-2 rounded-lg border p-3 sm:grid-cols-2"
-      aria-label="账号角色"
-    >
-      <p v-if="loading" class="text-sm text-muted-foreground sm:col-span-2">
-        正在加载角色…
-      </p>
-      <p v-else-if="error" class="text-sm text-destructive sm:col-span-2">
+    <div class="grid gap-3 rounded-lg border p-3" aria-label="账号角色">
+      <p v-if="loading" class="text-sm text-muted-foreground">正在加载角色…</p>
+      <p v-else-if="error" class="text-sm text-destructive">
         {{ error }}
       </p>
-      <label
-        v-for="role in roles"
-        v-else
-        :key="role.id"
-        class="flex cursor-pointer items-start gap-3 rounded-md p-2 hover:bg-muted/60"
-      >
-        <Checkbox
-          :model-value="modelValue.includes(role.id)"
-          :aria-label="role.name"
-          @update:model-value="toggle(role.id, $event)"
-        />
-        <span class="grid gap-0.5 text-sm">
-          <span class="font-medium">{{ role.name }}</span>
-          <span class="text-xs text-muted-foreground">
-            {{ role.code }} · {{ dataScopeLabel(role.dataScope) }}
-          </span>
-        </span>
-      </label>
+      <template v-else>
+        <article
+          v-for="role in roles"
+          :key="role.id"
+          class="rounded-lg border p-3 transition-colors"
+          :class="
+            modelValue.includes(role.id)
+              ? 'border-primary/50 bg-primary/5'
+              : 'hover:bg-muted/40'
+          "
+        >
+          <label class="flex cursor-pointer items-start gap-3">
+            <Checkbox
+              :model-value="modelValue.includes(role.id)"
+              :aria-label="role.name"
+              @update:model-value="toggle(role.id, $event)"
+            />
+            <span class="grid gap-0.5 text-sm">
+              <span class="font-medium">{{ role.name }}</span>
+              <span class="text-xs text-muted-foreground">
+                {{ role.code }} · {{ dataScopeLabel(role.dataScope) }}
+              </span>
+            </span>
+          </label>
+          <RolePermissionSummary
+            :permission-keys="role.permissionKeys"
+            :permissions="permissions"
+          />
+        </article>
+        <p v-if="!roles.length" class="text-sm text-muted-foreground">
+          暂无可选角色。
+        </p>
+      </template>
     </div>
   </div>
 </template>