create-windy 0.6.21 → 0.7.0

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { onMounted, shallowRef, watch } from "vue";
+import { computed, onMounted, shallowRef, useTemplateRef, watch } from "vue";
+import { RouterLink } from "vue-router";
 import { PlusIcon } from "@lucide/vue";
 import {
   PASSWORD_POLICY,
@@ -15,9 +16,21 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { listSystemResource, type SystemRecord } from "@/services/system-api";
+import { type SystemRecord } from "@/services/system-api";
 import { loadPasswordPolicy } from "@/services/auth-api";
+import PagedSelectionList from "../PagedSelectionList.vue";
+import { departmentOptions, loadSelectionRecords } from "../selection-options";
+import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
+import { evaluateWebAccess } from "@/layout/navigation";
+import CreateRoleDialog from "./CreateRoleDialog.vue";
 import CreateDepartmentDialog from "./CreateDepartmentDialog.vue";
+import {
+  normalizeUserForm,
+  isMaskedField,
+  readString,
+  readError,
+  accountFields,
+} from "./user-account-draft";
 import UserRoleSelector from "./UserRoleSelector.vue";
 
 interface DepartmentOption {
@@ -39,10 +52,49 @@ const emit = defineEmits<{
 }>();
 
 const form = shallowRef<Record<string, unknown>>({});
-const departments = shallowRef<DepartmentOption[]>([]);
+const baseline = shallowRef("");
+const dirty = computed(() => JSON.stringify(form.value) !== baseline.value);
+const access = useAccessSnapshot();
+const canManageRoles = computed(
+  () =>
+    access.snapshot.value &&
+    evaluateWebAccess(access.snapshot.value, {
+      permissionKey: "system.role.manage",
+      featureKey: "system.role",
+    }).allowed,
+);
+const departmentChoices = computed(() => departmentOptions(departments.value));
+function markSaved() {
+  form.value = { ...form.value, temporaryPassword: "" };
+  baseline.value = JSON.stringify(form.value);
+}
+const departments = shallowRef<SystemRecord[]>([]);
 const loading = shallowRef(false);
 const error = shallowRef("");
 const departmentDialogOpen = shallowRef(false);
+const roleDialogOpen = shallowRef(false);
+interface NestedDialogHandle {
+  beforeClose(): boolean | Promise<boolean>;
+}
+const departmentDialog = useTemplateRef<NestedDialogHandle>("departmentDialog");
+const roleDialog = useTemplateRef<NestedDialogHandle>("roleDialog");
+async function beforeClose(): Promise<boolean> {
+  if (
+    departmentDialogOpen.value &&
+    !(await departmentDialog.value?.beforeClose())
+  )
+    return false;
+  if (roleDialogOpen.value && !(await roleDialog.value?.beforeClose()))
+    return false;
+  return true;
+}
+const roleSelector = useTemplateRef<{ reload(): Promise<void> }>(
+  "roleSelector",
+);
+async function selectCreatedRole(role: SystemRecord) {
+  update("roleIds", [...new Set([...selectedRoleIds(), role.id])]);
+  await roleSelector.value?.reload();
+}
 const governedTouched = shallowRef<Record<string, boolean>>({});
 const passwordPolicy = shallowRef<PasswordPolicy>(PASSWORD_POLICY);
 
@@ -51,6 +103,7 @@ watch(
   () => {
     governedTouched.value = {};
     form.value = normalizeUserForm(props.defaults, props.item);
+    baseline.value = JSON.stringify(form.value);
   },
   { immediate: true },
 );
@@ -71,31 +124,18 @@ function update(key: string, value: unknown) {
   if (key === "email" || key === "phone") {
     governedTouched.value = { ...governedTouched.value, [key]: true };
   }
-  form.value = { ...form.value, [key]: value };
+  form.value = {
+    ...form.value,
+    [key]:
+      key === "roleIds" && Array.isArray(value) ? [...value].sort() : value,
+  };
 }
 
 async function loadDepartments() {
   loading.value = true;
   error.value = "";
   try {
-    const result = await listSystemResource("departments", {
-      page: 1,
-      pageSize: 100,
-      status: "active",
-      sort: "order,name",
-    });
-    departments.value = result.items.flatMap((item) =>
-      typeof item.code === "string" && typeof item.name === "string"
-        ? [
-            {
-              id: item.id,
-              code: item.code,
-              name: item.name,
-              parentId: readString(item.parentId),
-            },
-          ]
-        : [],
-    );
+    departments.value = await loadSelectionRecords("departments", false);
   } catch (currentError) {
     error.value = readError(currentError);
   } finally {
@@ -112,12 +152,39 @@ function selectedRoleIds(): string[] {
 }
 
 async function selectCreatedDepartment(department: DepartmentOption) {
-  await loadDepartments();
+  departments.value = [
+    ...departments.value.filter(({ id }) => id !== department.id),
+    { ...department, status: "active" },
+  ];
   update("departmentId", department.id);
+  await loadDepartments();
 }
 
 function submit() {
-  const payload = { ...form.value };
+  error.value = "";
+  if (
+    !String(form.value.username || "").trim() ||
+    !String(form.value.displayName || "").trim() ||
+    !form.value.departmentId ||
+    !selectedRoleIds().length
+  ) {
+    error.value = "请填写用户名、姓名，选择所属部门和至少一个角色。";
+    return;
+  }
+  const password = String(form.value.temporaryPassword || "");
+  if (
+    (!props.item || password) &&
+    (password.length < passwordPolicy.value.minLength ||
+      password.length > passwordPolicy.value.maxLength)
+  ) {
+    error.value = `密码须为 ${passwordPolicy.value.minLength}-${passwordPolicy.value.maxLength} 个字符。`;
+    return;
+  }
+  const payload: Record<string, unknown> = {
+    ...form.value,
+    username: String(form.value.username).trim(),
+    displayName: String(form.value.displayName).trim(),
+  };
   for (const key of ["email", "phone"]) {
     if (isMaskedField(props.item?.[key]) && !governedTouched.value[key]) {
       delete payload[key];
@@ -126,61 +193,31 @@ function submit() {
   emit("submit", payload);
 }
 
-function normalizeUserForm(
-  defaults: Record<string, unknown>,
-  item?: SystemRecord,
-): Record<string, unknown> {
-  const result = { ...defaults, ...(item || {}) };
-  for (const key of ["email", "phone"]) {
-    const value = item?.[key];
-    result[key] =
-      value && typeof value === "object" && "value" in value
-        ? (value as Record<string, unknown>).value
-        : typeof value === "string"
-          ? value
-          : "";
-  }
-  return result;
-}
-
-function isMaskedField(value: unknown): boolean {
-  return Boolean(
-    value &&
-    typeof value === "object" &&
-    ((value as Record<string, unknown>).kind === "masked" ||
-      (value as Record<string, unknown>).kind === "hidden"),
-  );
-}
-
-function readString(value: unknown): string | undefined {
-  return typeof value === "string" ? value : undefined;
-}
-
-function readError(value: unknown): string {
-  return value instanceof Error ? value.message : String(value);
-}
-
-defineExpose({ submit });
+defineExpose({
+  submit,
+  beforeClose,
+  markSaved,
+  get dirty() {
+    return dirty.value;
+  },
+});
 </script>
 
 <template>
   <div class="space-y-4">
     <div class="grid gap-4 sm:grid-cols-2">
       <label
-        v-for="field in [
-          ['username', '用户名', '例如 zhangsan'],
-          ['displayName', '姓名', '例如 张三'],
-          ['phone', '手机号', '可选'],
-          ['email', '邮箱', '可选'],
-        ]"
-        :key="field[0]"
+        v-for="field in accountFields"
+        :key="field.key"
         class="grid gap-2 text-sm font-medium"
       >
-        <span>{{ field[1] }}</span>
+        <span>{{ field.label }}</span>
         <Input
-          :model-value="String(form[field[0]!] || '')"
-          :placeholder="field[2]"
-          @update:model-value="update(field[0]!, String($event))"
+          :model-value="String(form[field.key] || '')"
+          :placeholder="field.placeholder"
+          :type="field.type"
+          :maxlength="field.maxLength"
+          @update:model-value="update(field.key, String($event))"
         />
       </label>
     </div>
@@ -197,28 +234,35 @@ defineExpose({ submit });
           <PlusIcon data-icon="inline-start" />新建部门
         </Button>
       </div>
-      <Select
-        :model-value="readString(form.departmentId)"
+      <PagedSelectionList
+        :items="departmentChoices"
+        :model-value="
+          readString(form.departmentId) ? [String(form.departmentId)] : []
+        "
+        label="所属部门"
         :disabled="loading"
-        @update:model-value="update('departmentId', String($event))"
-      >
-        <SelectTrigger class="w-full" aria-label="所属部门">
-          <SelectValue
-            :placeholder="loading ? '正在加载部门…' : '请选择部门'"
-          />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem
-            v-for="department in departments"
-            :key="department.id"
-            :value="department.id"
-          >
-            {{ department.name }}（{{ department.code }}）
-          </SelectItem>
-        </SelectContent>
-      </Select>
+        @update:model-value="update('departmentId', $event[0])"
+      />
     </div>
+    <p class="text-xs text-muted-foreground">
+      账号通过角色获得功能权限与数据范围；下方展示每个角色的权限摘要。修改角色会影响所有使用该角色的账号。
+      <RouterLink
+        v-if="canManageRoles"
+        to="/admin/system/roles"
+        class="text-primary underline"
+        >前往权限策略管理</RouterLink
+      >
+    </p>
+    <Button
+      v-if="canManageRoles"
+      type="button"
+      variant="outline"
+      @click="roleDialogOpen = true"
+    >
+      <PlusIcon data-icon="inline-start" />新建角色并选择权限
+    </Button>
     <UserRoleSelector
+      ref="roleSelector"
       :model-value="selectedRoleIds()"
       :permissions="permissions"
       @update:model-value="update('roleIds', $event)"
@@ -236,7 +280,7 @@ defineExpose({ submit });
           @update:model-value="update('temporaryPassword', String($event))"
         />
         <span class="text-xs font-normal text-muted-foreground">
-          保存时仅传给密码重置接口，不进入用户资料和审计内容。
+          首次登录须修改初始密码。
         </span>
       </label>
       <label class="grid gap-2 text-sm font-medium">
@@ -259,7 +303,17 @@ defineExpose({ submit });
       </label>
     </div>
     <p v-if="error" class="text-sm text-destructive">{{ error }}</p>
+    <CreateRoleDialog
+      ref="roleDialog"
+      managed-navigation
+      v-if="canManageRoles"
+      v-model:open="roleDialogOpen"
+      :permissions="permissions"
+      @created="selectCreatedRole"
+    />
     <CreateDepartmentDialog
+      ref="departmentDialog"
+      managed-navigation
       v-if="departmentCreateMode"
       v-model:open="departmentDialogOpen"
       :mode="departmentCreateMode"

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

@@ -1,6 +1,7 @@
 import { defineComponent } from "vue";
 import { afterEach, describe, expect, test, vi } from "vitest";
 import { flushPromises, mount } from "@vue/test-utils";
+import CreateRoleDialog from "./CreateRoleDialog.vue";
 import UserAccountForm from "./UserAccountForm.vue";
 
 const api = vi.hoisted(() => ({
@@ -19,6 +20,17 @@ vi.mock("@/services/auth-api", () => ({
   loadPasswordPolicy: api.loadPasswordPolicy,
 }));
 
+vi.mock("@/composables/useAccessSnapshot", () => ({
+  useAccessSnapshot: () => ({
+    snapshot: {
+      value: {
+        actor: { permissionKeys: ["system.role.manage"] },
+        features: [{ key: "system.role", enabled: true, allowed: true }],
+      },
+    },
+  }),
+}));
+
 afterEach(() => vi.clearAllMocks());
 
 describe("UserAccountForm", () => {
@@ -51,6 +63,7 @@ describe("UserAccountForm", () => {
       },
       global: {
         stubs: {
+          RouterLink: { template: "<a><slot /></a>" },
           CreateDepartmentDialog: dialogStub,
           UserRoleSelector: { template: "<div />" },
         },
@@ -60,6 +73,10 @@ describe("UserAccountForm", () => {
 
     const dialog = wrapper.getComponent(dialogStub);
     expect(dialog.props("open")).toBe(false);
+    expect(wrapper.get('input[type="email"]').attributes("maxlength")).toBe(
+      "160",
+    );
+    expect(wrapper.get('input[type="tel"]').attributes("maxlength")).toBe("32");
     const openButton = wrapper
       .findAll("button")
       .find((button) => button.text() === "新建部门");
@@ -68,4 +85,82 @@ describe("UserAccountForm", () => {
     expect(dialog.props("open")).toBe(true);
     expect(wrapper.text()).not.toContain("新建并选中部门");
   });
+  test("新角色创建后保留账户草稿并追加选择，重新加载角色选项", async () => {
+    api.list.mockResolvedValue({
+      items: [
+        { id: "dept_root", name: "总部", code: "root", status: "active" },
+      ],
+      total: 1,
+      page: 1,
+      pageSize: 10,
+    });
+    api.loadPasswordPolicy.mockResolvedValue({ minLength: 12, maxLength: 128 });
+    const reload = vi.fn(async () => {});
+    const beforeClose = vi.fn(async () => false);
+    const wrapper = mount(UserAccountForm, {
+      props: {
+        defaults: {},
+        item: {
+          id: "account",
+          username: "original",
+          displayName: "原姓名",
+          departmentId: "dept_root",
+          roleIds: ["role_old"],
+          status: "active",
+        },
+        permissions: [],
+      },
+      global: {
+        stubs: {
+          CreateRoleDialog: defineComponent({
+            name: "CreateRoleDialog",
+            setup(_props, { expose }) {
+              expose({ beforeClose });
+              return {};
+            },
+            props: { open: Boolean },
+            emits: ["created", "update:open"],
+            template: "<div />",
+          }),
+          UserRoleSelector: defineComponent({
+            setup(_props, { expose }) {
+              expose({ reload });
+              return {};
+            },
+            template: "<div />",
+          }),
+          RouterLink: { template: "<a><slot /></a>" },
+        },
+      },
+    });
+    await flushPromises();
+    await wrapper
+      .get('input[placeholder="例如 张三"]')
+      .setValue("尚未保存的姓名");
+    await wrapper
+      .findAll("button")
+      .find((button) => button.text() === "新建角色并选择权限")!
+      .trigger("click");
+    const dialog = wrapper.getComponent(CreateRoleDialog);
+    expect(dialog.props("open")).toBe(true);
+    await expect(
+      (
+        wrapper.vm as unknown as { beforeClose(): Promise<boolean> }
+      ).beforeClose(),
+    ).resolves.toBe(false);
+    expect(beforeClose).toHaveBeenCalledOnce();
+    dialog.vm.$emit("created", {
+      id: "role_new",
+      name: "新角色",
+      status: "active",
+    });
+    await flushPromises();
+    (wrapper.vm as unknown as { submit(): void }).submit();
+    expect(reload).toHaveBeenCalledOnce();
+    expect(wrapper.emitted("submit")?.at(-1)?.[0]).toMatchObject({
+      displayName: "尚未保存的姓名",
+      roleIds: ["role_new", "role_old"],
+    });
+    wrapper.unmount();
+  });
 });

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

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { computed, shallowRef, watch } from "vue";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
+import { evaluateWebAccess } from "@/layout/navigation";
+import PagedSelectionList from "../PagedSelectionList.vue";
+import { loadSelectionRecords } from "../selection-options";
+import type { SystemRecord } from "@/services/system-api";
+const emit = defineEmits<{
+  change: [
+    filters: { departmentId?: string; roleId?: string; status?: string },
+  ];
+}>();
+const access = useAccessSnapshot();
+const departmentId = shallowRef("");
+const roleId = shallowRef("");
+const status = shallowRef("all");
+const departments = shallowRef<SystemRecord[]>([]);
+const roles = shallowRef<SystemRecord[]>([]);
+const error = shallowRef("");
+const departmentAllowed = computed(() => allowed("system.department"));
+const roleAllowed = computed(() => allowed("system.role"));
+function allowed(key: "system.department" | "system.role") {
+  const snapshot = access.snapshot.value;
+  return Boolean(
+    snapshot &&
+    evaluateWebAccess(snapshot, {
+      featureKey: key,
+      permissionKey: `${key}.read`,
+    }).allowed,
+  );
+}
+function choices(items: SystemRecord[]) {
+  return items.map((item) => ({
+    id: item.id,
+    label: String(item.name || item.code || item.id),
+    description: `${String(item.code || "")}${item.status === "disabled" ? " · 已停用" : ""}`,
+  }));
+}
+const departmentChoices = computed(() => choices(departments.value));
+const roleChoices = computed(() => choices(roles.value));
+const departmentLabel = computed(
+  () =>
+    departmentChoices.value.find((item) => item.id === departmentId.value)
+      ?.label || "全部部门",
+);
+const roleLabel = computed(
+  () =>
+    roleChoices.value.find((item) => item.id === roleId.value)?.label ||
+    "全部角色",
+);
+watch(
+  [departmentAllowed, roleAllowed],
+  async ([canReadDepartments, canReadRoles], _, onCleanup) => {
+    let active = true;
+    onCleanup(() => {
+      active = false;
+    });
+    error.value = "";
+    const results = await Promise.allSettled([
+      canReadDepartments
+        ? loadSelectionRecords("departments", false)
+        : Promise.resolve([]),
+      canReadRoles ? loadSelectionRecords("roles", false) : Promise.resolve([]),
+    ]);
+    if (!active) return;
+    departments.value =
+      results[0].status === "fulfilled" ? results[0].value : [];
+    roles.value = results[1].status === "fulfilled" ? results[1].value : [];
+    if (results.some((result) => result.status === "rejected"))
+      error.value = "部分筛选选项加载失败，请刷新重试。";
+  },
+  { immediate: true },
+);
+watch([departmentId, roleId, status], () =>
+  emit("change", {
+    departmentId: departmentId.value || undefined,
+    roleId: roleId.value || undefined,
+    status: status.value === "all" ? undefined : status.value,
+  }),
+);
+function reset() {
+  departmentId.value = "";
+  roleId.value = "";
+  status.value = "all";
+}
+</script>
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <Dialog v-if="departmentAllowed">
+      <DialogTrigger as-child
+        ><Button variant="outline" aria-label="按部门筛选">{{
+          departmentLabel
+        }}</Button></DialogTrigger
+      >
+      <DialogContent class="sm:max-w-lg">
+        <DialogHeader
+          ><DialogTitle>筛选部门</DialogTitle
+          ><DialogDescription
+            >选择部门后立即筛选账户列表。</DialogDescription
+          ></DialogHeader
+        >
+        <PagedSelectionList
+          :items="departmentChoices"
+          :model-value="departmentId ? [departmentId] : []"
+          label="筛选部门"
+          clearable
+          @update:model-value="departmentId = $event[0] || ''"
+        />
+      </DialogContent>
+    </Dialog>
+    <Dialog v-if="roleAllowed">
+      <DialogTrigger as-child
+        ><Button variant="outline" aria-label="按角色筛选">{{
+          roleLabel
+        }}</Button></DialogTrigger
+      >
+      <DialogContent class="sm:max-w-lg">
+        <DialogHeader
+          ><DialogTitle>筛选角色</DialogTitle
+          ><DialogDescription
+            >选择角色后立即筛选账户列表。</DialogDescription
+          ></DialogHeader
+        >
+        <PagedSelectionList
+          :items="roleChoices"
+          :model-value="roleId ? [roleId] : []"
+          label="筛选角色"
+          clearable
+          @update:model-value="roleId = $event[0] || ''"
+        />
+      </DialogContent>
+    </Dialog>
+    <Select v-model="status"
+      ><SelectTrigger class="w-32" aria-label="按账户状态筛选"
+        ><SelectValue /></SelectTrigger
+      ><SelectContent
+        ><SelectItem value="all">全部状态</SelectItem
+        ><SelectItem value="active">启用</SelectItem
+        ><SelectItem value="disabled">停用</SelectItem></SelectContent
+      ></Select
+    >
+    <Button
+      v-if="departmentId || roleId || status !== 'all'"
+      variant="ghost"
+      @click="reset"
+      >清空筛选</Button
+    >
+    <p v-if="error" class="w-full text-sm text-destructive" role="alert">
+      {{ error }}
+    </p>
+  </div>
+</template>