create-windy 0.6.21 → 0.7.0

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

@@ -0,0 +1,180 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { flushPromises, mount, type VueWrapper } from "@vue/test-utils";
+import { defineComponent, h, ref } from "vue";
+import { createMemoryHistory, createRouter, RouterView } from "vue-router";
+import FormDialog from "@/components/common/FormDialog.vue";
+import UnsavedChangesDialog from "@/components/common/UnsavedChangesDialog.vue";
+import SystemResourceEditor from "./SystemResourceEditor.vue";
+import SystemResourceForm from "./SystemResourceForm.vue";
+import { systemResourceConfigs } from "../resource-config";
+const mounted: VueWrapper[] = [];
+afterEach(() => {
+  for (const wrapper of mounted.splice(0)) wrapper.unmount();
+});
+async function setup(
+  save = vi
+    .fn<(_payload: Record<string, unknown>) => Promise<boolean>>()
+    .mockResolvedValue(true),
+) {
+  const EditorPage = defineComponent({
+    setup() {
+      const open = ref(true);
+      return () =>
+        h(SystemResourceEditor, {
+          open: open.value,
+          "onUpdate:open": (value: boolean) => {
+            open.value = value;
+          },
+          config: systemResourceConfigs.dictionaries,
+          defaults: { code: "original", name: "原名称" },
+          save,
+        });
+    },
+  });
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: "/edit/:tab?", component: EditorPage },
+      { path: "/other", component: { template: "<div>另一页面</div>" } },
+    ],
+  });
+  await router.push("/edit/one");
+  await router.isReady();
+  const wrapper = mount(
+    defineComponent(() => () => h(RouterView)),
+    { global: { plugins: [router] } },
+  );
+  mounted.push(wrapper);
+  await flushPromises();
+  const editor = wrapper.getComponent(SystemResourceEditor);
+  const input = editor
+    .getComponent(SystemResourceForm)
+    .get('input[placeholder="例如 invoice_status"]');
+  return { wrapper, editor, input, router, save };
+}
+
+describe("编辑容器未保存保护", () => {
+  test("关闭时取消保留输入，保存失败保留对话框和草稿", async () => {
+    const { editor, input, save } = await setup(
+      vi.fn().mockResolvedValue(false),
+    );
+    await input.setValue("draft");
+    const closing = editor.getComponent(FormDialog).props("beforeClose")!();
+    await flushPromises();
+    const confirmation = editor.getComponent(UnsavedChangesDialog);
+    expect(confirmation.props("open")).toBe(true);
+    confirmation.vm.$emit("save");
+    await flushPromises();
+    expect(save).toHaveBeenCalledWith(
+      expect.objectContaining({ code: "draft" }),
+    );
+    expect(confirmation.props("open")).toBe(true);
+    expect(editor.props("open")).toBe(true);
+    expect((input.element as HTMLInputElement).value).toBe("draft");
+    confirmation.vm.$emit("cancel");
+    expect(await closing).toBe(false);
+    expect(editor.props("open")).toBe(true);
+  });
+
+  test("恢复加载基线后不再拦截关闭和刷新", async () => {
+    const { editor, input } = await setup();
+    await input.setValue("draft");
+    const dirtyUnload = new Event("beforeunload", { cancelable: true });
+    window.dispatchEvent(dirtyUnload);
+    expect(dirtyUnload.defaultPrevented).toBe(true);
+    await input.setValue("original");
+    const cleanUnload = new Event("beforeunload", { cancelable: true });
+    window.dispatchEvent(cleanUnload);
+    expect(cleanUnload.defaultPrevented).toBe(false);
+    expect(await editor.getComponent(FormDialog).props("beforeClose")!()).toBe(
+      true,
+    );
+  });
+
+  test("路由更新或离开都先确认；保存成功才继续导航", async () => {
+    const { editor, input, router } = await setup();
+    await input.setValue("draft");
+    const switching = router.push("/edit/two");
+    await flushPromises();
+    editor.getComponent(UnsavedChangesDialog).vm.$emit("cancel");
+    await switching;
+    expect(router.currentRoute.value.path).toBe("/edit/one");
+    const leaving = router.push("/other");
+    await flushPromises();
+    editor.getComponent(UnsavedChangesDialog).vm.$emit("save");
+    await leaving;
+    expect(router.currentRoute.value.path).toBe("/other");
+  });
+
+  test("异步保存期间显示loading并阻止重复提交及关闭", async () => {
+    let finish: ((value: boolean) => void) | undefined;
+    const save = vi.fn(
+      () =>
+        new Promise<boolean>((resolve) => {
+          finish = resolve;
+        }),
+    );
+    const { editor, input } = await setup(save);
+    await input.setValue("draft");
+    const form = editor.getComponent(FormDialog);
+    form.vm.$emit("submit");
+    await flushPromises();
+    expect(form.props("loading")).toBe(true);
+    form.vm.$emit("submit");
+    expect(await form.props("beforeClose")!()).toBe(false);
+    expect(save).toHaveBeenCalledTimes(1);
+    finish?.(true);
+    await flushPromises();
+    expect(editor.props("open")).toBe(false);
+  });
+  test("先完成嵌套弹窗确认，再确认和保存包含新选择的账户草稿", async () => {
+    let finishChild: ((value: boolean) => void) | undefined;
+    const childBeforeClose = vi
+      .fn<() => Promise<boolean>>()
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            finishChild = resolve;
+          }),
+      )
+      .mockResolvedValue(true);
+    const payload: Record<string, unknown> = { departmentId: "old_department" };
+    const NestedForm = defineComponent({
+      emits: ["submit"],
+      setup(_, { expose, emit }) {
+        expose({
+          dirty: true,
+          beforeClose: childBeforeClose,
+          markSaved: vi.fn(),
+          submit: () => emit("submit", { ...payload }),
+        });
+        return () => h("div", "嵌套新建部门草稿");
+      },
+    });
+    const save = vi.fn().mockResolvedValue(true);
+    const wrapper = mount(SystemResourceEditor, {
+      props: {
+        open: true,
+        config: systemResourceConfigs.dictionaries,
+        defaults: {},
+        save,
+      },
+      global: { stubs: { SystemResourceForm: NestedForm } },
+    });
+    mounted.push(wrapper);
+    await flushPromises();
+    const closing = wrapper.getComponent(FormDialog).props("beforeClose")!();
+    await flushPromises();
+    expect(wrapper.getComponent(UnsavedChangesDialog).props("open")).toBe(
+      false,
+    );
+    expect(save).not.toHaveBeenCalled();
+    payload.departmentId = "created_department";
+    finishChild?.(true);
+    await flushPromises();
+    expect(wrapper.getComponent(UnsavedChangesDialog).props("open")).toBe(true);
+    wrapper.getComponent(UnsavedChangesDialog).vm.$emit("save");
+    expect(await closing).toBe(true);
+    expect(save).toHaveBeenCalledWith({ departmentId: "created_department" });
+  });
+});

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

@@ -2,6 +2,7 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { SearchIcon } from "@lucide/vue";
+import UserListFilters from "./user-account/UserListFilters.vue";
 import type { SystemResourceConfig } from "../resource-config";
 // @windy-module system.audit begin
 import AuditLogFilters from "./AuditLogFilters.vue";
@@ -23,6 +24,9 @@ defineProps<{ config: SystemResourceConfig }>();
 const keyword = defineModel<string>("keyword", { required: true });
 const emit = defineEmits<{
   search: [];
+  identityChange: [
+    filters: { departmentId?: string; roleId?: string; status?: string },
+  ];
   preset: [value: string];
   auditChange: [filters: AuditLogFilterValue];
   auditExportOptions: [options: AuditExportOptions];
@@ -30,6 +34,10 @@ const emit = defineEmits<{
 </script>
 
 <template>
+  <UserListFilters
+    v-if="config.key === 'users'"
+    @change="emit('identityChange', $event)"
+  />
   <!-- @windy-module system.audit begin -->
   <AuditLogFilters
     v-if="config.usesCustomFilters"

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, shallowRef } from "vue";
+import { computed, watch, shallowRef } from "vue";
 import { Input } from "@/components/ui/input";
 import type { ResourceField } from "../resource-config";
 import type { SystemRecord } from "@/services/system-api";
@@ -15,11 +15,17 @@ const emit = defineEmits<{
 }>();
 
 const form = shallowRef<Record<string, unknown>>({});
+const baseline = shallowRef("");
+const dirty = computed(() => JSON.stringify(form.value) !== baseline.value);
+function markSaved() {
+  baseline.value = JSON.stringify(form.value);
+}
 
 watch(
   () => [props.item, props.defaults] as const,
   () => {
     form.value = { ...props.defaults, ...(props.item || {}) };
+    markSaved();
   },
   { immediate: true },
 );
@@ -42,7 +48,7 @@ function submit() {
   emit("submit", form.value);
 }
 
-defineExpose({ submit });
+defineExpose({ submit, dirty, markSaved });
 </script>
 
 <template>

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

@@ -0,0 +1,89 @@
+import { afterEach, expect, test, vi } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import { systemResourceConfigs } from "../resource-config";
+import SystemResourcePage from "./SystemResourcePage.vue";
+import DepartmentOrganizationTable from "./department/DepartmentOrganizationTable.vue";
+import DepartmentOrganizationForm from "./department/DepartmentOrganizationForm.vue";
+import DepartmentTransitionDialog from "./department/DepartmentTransitionDialog.vue";
+const api = vi.hoisted(() => ({
+  list: vi.fn(),
+  organization: vi.fn(),
+  preview: vi.fn(),
+  transitionDepartment: vi.fn(),
+}));
+vi.mock("@/services/system-api", async () => ({
+  ...(await vi.importActual<typeof import("@/services/system-api")>(
+    "@/services/system-api",
+  )),
+  listSystemResource: api.list,
+  listDepartmentOrganization: api.organization,
+  previewDepartmentTransition: api.preview,
+  transitionDepartment: api.transitionDepartment,
+}));
+afterEach(() => vi.clearAllMocks());
+test("部门停用和删除使用显式迁移目标", async () => {
+  const department = {
+    id: "dept_sales",
+    code: "sales",
+    name: "销售部",
+    parentId: "dept_platform",
+    status: "active",
+  };
+  api.organization.mockResolvedValue({
+    items: [department],
+    total: 1,
+    page: 1,
+    pageSize: 10,
+  });
+  api.list.mockResolvedValue({
+    items: [department],
+    total: 1,
+    page: 1,
+    pageSize: 10,
+  });
+  api.preview.mockResolvedValue({
+    childDepartmentCount: 0,
+    userCount: 1,
+    roleCount: 0,
+  });
+  api.transitionDepartment.mockResolvedValue({
+    department: { ...department, status: "disabled" },
+    movedChildren: 0,
+    movedUsers: 1,
+    updatedRoles: 0,
+  });
+  const wrapper = mount(SystemResourcePage, {
+    props: { config: systemResourceConfigs.departments },
+  });
+  await flushPromises();
+
+  wrapper
+    .getComponent(DepartmentOrganizationTable)
+    .vm.$emit("edit", department);
+  await flushPromises();
+  wrapper.getComponent(DepartmentOrganizationForm).vm.$emit("submit", {
+    ...department,
+    status: "disabled",
+    _transitionTargetDepartmentId: "dept_platform",
+  });
+  await flushPromises();
+  expect(api.transitionDepartment).toHaveBeenCalledWith("dept_sales", {
+    action: "disable",
+    targetDepartmentId: "dept_platform",
+    updates: { name: "销售部", code: "sales", parentId: "dept_platform" },
+  });
+
+  wrapper
+    .getComponent(DepartmentOrganizationTable)
+    .vm.$emit("remove", department);
+  await flushPromises();
+  wrapper
+    .getComponent(DepartmentTransitionDialog)
+    .vm.$emit("confirm", "dept_platform");
+  await flushPromises();
+  expect(api.transitionDepartment).toHaveBeenLastCalledWith("dept_sales", {
+    action: "delete",
+    targetDepartmentId: "dept_platform",
+  });
+  wrapper.unmount();
+});

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

@@ -15,7 +15,9 @@ import DictionaryBulkPanel from "./dictionary-bulk/DictionaryBulkPanel.vue";
 import FeatureLicensePolicyDialog from "./FeatureLicensePolicyDialog.vue";
 import SystemResourceFilters from "./SystemResourceFilters.vue";
 import { useFeatureLicenseEditor } from "../composables/useFeatureLicenseEditor";
-import { saveUserAccount } from "./user-account/save-user-account";
+import { useResourceEditor } from "../composables/useResourceEditor";
+import DepartmentOrganizationTable from "./department/DepartmentOrganizationTable.vue";
+import SystemRecordDetailDialog from "./SystemRecordDetailDialog.vue";
 import DepartmentTransitionDialog from "./department/DepartmentTransitionDialog.vue";
 import { useDepartmentTransitions } from "../composables/useDepartmentTransitions";
 import SystemResourceActions from "./SystemResourceActions.vue";
@@ -57,9 +59,7 @@ const resource = useSystemResource({
 });
 const toast = useAppToast();
 
-const editorOpen = shallowRef(false);
 const confirmOpen = shallowRef(false);
-const editingItem = shallowRef<SystemRecord | undefined>();
 const viewingItem = shallowRef<SystemRecord | undefined>();
 const detailOpen = shallowRef(false);
 const pendingDelete = shallowRef<SystemRecord | undefined>();
@@ -70,6 +70,13 @@ const departmentTransitions = useDepartmentTransitions({
   reload: resource.reload,
   mutated: () => emit("mutated"),
 });
+const editor = useResourceEditor({
+  key: props.config.key,
+  save: resource.save,
+  disable: departmentTransitions.disable,
+  mutated: () => emit("mutated"),
+});
+const { open: editorOpen, item: editingItem } = editor;
 const {
   open: licenseEditorOpen,
   item: licenseEditorItem,
@@ -85,7 +92,7 @@ const {
   onFailed: (description) =>
     toast.error("License 范围更新失败", { description }),
 });
-const formDefaults = computed(() => props.config.createDefaults());
+const formDefaults = shallowRef(props.config.createDefaults());
 const displayedItems = computed(() =>
   resource.items.value.map((item) => {
     const inlineToggle = props.config.inlineToggle;
@@ -100,13 +107,11 @@ onMounted(() => {
 });
 
 function openCreate() {
-  editingItem.value = undefined;
-  editorOpen.value = true;
+  formDefaults.value = props.config.createDefaults();
+  editor.edit();
 }
-
 function openEdit(item: SystemRecord) {
-  editingItem.value = item;
-  editorOpen.value = true;
+  editor.edit(item);
 }
 
 function openDelete(item: SystemRecord) {
@@ -119,41 +124,6 @@ function openDetail(item: SystemRecord) {
   detailOpen.value = true;
 }
 
-async function submit(payload: Record<string, unknown>) {
-  if (
-    props.config.key === "departments" &&
-    editingItem.value &&
-    editingItem.value.status === "active" &&
-    payload.status === "disabled"
-  ) {
-    const targetDepartmentId =
-      typeof payload._transitionTargetDepartmentId === "string"
-        ? payload._transitionTargetDepartmentId
-        : undefined;
-    const disabled = await departmentTransitions.disable(
-      editingItem.value,
-      targetDepartmentId,
-    );
-    if (disabled) editorOpen.value = false;
-    return;
-  }
-  const normalizedPayload = { ...payload };
-  delete normalizedPayload._transitionTargetDepartmentId;
-  const saved =
-    props.config.key === "users"
-      ? await saveUserAccount(
-          normalizedPayload,
-          editingItem.value?.id,
-          resource.save,
-          toast,
-        )
-      : await resource.save(normalizedPayload, editingItem.value?.id);
-  if (saved) {
-    editorOpen.value = false;
-    emit("mutated");
-  }
-}
-
 async function toggleInline(item: SystemRecord, checked: boolean) {
   const inlineToggle = props.config.inlineToggle;
   if (!inlineToggle || pendingToggleId.value) return;
@@ -245,6 +215,7 @@ async function importData(file: File) {
           @preset="applySearchPreset"
           @audit-change="resource.setAuditFilters"
           @audit-export-options="resource.setExportOptions"
+          @identity-change="resource.setIdentityFilters"
         />
       </CardHeader>
       <CardContent class="space-y-4">
@@ -253,6 +224,17 @@ async function importData(file: File) {
           :error="resource.error.value"
           @retry="resource.reload"
         />
+        <DepartmentOrganizationTable
+          v-else-if="config.key === 'departments'"
+          :items="displayedItems"
+          :keyword="resource.q.value"
+          :loading="resource.loading.value"
+          :editable="resource.canUpdate.value"
+          :deletable="resource.canDelete.value"
+          @edit="openEdit"
+          @remove="openDelete"
+          @view="openDetail"
+        />
         <SystemResourceTable
           v-else
           :columns="config.columns"
@@ -262,7 +244,9 @@ async function importData(file: File) {
           :inline-toggle="config.inlineToggle"
           :toggle-pending-id="pendingToggleId"
           :loading="resource.loading.value"
-          :viewable="auditViewable"
+          :viewable="
+            auditViewable || config.key === 'users' || config.key === 'roles'
+          "
           :page="resource.page.value"
           :page-size="resource.pageSize.value"
           @edit="openEdit"
@@ -272,6 +256,7 @@ async function importData(file: File) {
           @view="openDetail"
         />
         <DataPagination
+          v-if="config.key !== 'departments'"
           :page="resource.page.value"
           :page-size="resource.pageSize.value"
           :total="resource.total.value"
@@ -308,7 +293,8 @@ async function importData(file: File) {
       :permissions="permissions"
       :department-create-mode="departmentCreateMode"
       :loading="resource.saving.value || departmentTransitions.loading.value"
-      @submit="submit"
+      :save="editor.submit"
+      :error="resource.error.value"
     />
 
     <DepartmentTransitionDialog
@@ -337,6 +323,16 @@ async function importData(file: File) {
       @save="saveLicensePolicy"
     />
 
+    <SystemRecordDetailDialog
+      v-if="
+        config.key === 'users' ||
+        config.key === 'departments' ||
+        config.key === 'roles'
+      "
+      v-model:open="detailOpen"
+      :config="config"
+      :item="viewingItem"
+    />
     <!-- @windy-module system.audit begin -->
     <AuditLogDetailDialog
       v-if="config.key === 'auditLogs'"

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

@@ -4,14 +4,14 @@ import { systemResourceConfigs } from "../resource-config";
 import SystemResourcePage from "./SystemResourcePage.vue";
 import FeatureLicensePolicyDialog from "./FeatureLicensePolicyDialog.vue";
 import SystemResourceTable from "./SystemResourceTable.vue";
-import DepartmentOrganizationForm from "./department/DepartmentOrganizationForm.vue";
-import DepartmentTransitionDialog from "./department/DepartmentTransitionDialog.vue";
 
 const api = vi.hoisted(() => ({
   list: vi.fn(),
   update: vi.fn(),
   quickCreateDepartment: vi.fn(),
   transitionDepartment: vi.fn(),
+  organization: vi.fn(),
+  preview: vi.fn(),
   loadPasswordPolicy: vi.fn(),
 }));
 
@@ -25,6 +25,8 @@ vi.mock("@/services/system-api", async () => {
     updateSystemResource: api.update,
     quickCreateDepartment: api.quickCreateDepartment,
     transitionDepartment: api.transitionDepartment,
+    listDepartmentOrganization: api.organization,
+    previewDepartmentTransition: api.preview,
   };
 });
 
@@ -255,7 +257,7 @@ describe("SystemResourcePage", () => {
   });
   // @windy-module system.audit end
 
-  test("用户新增和编辑使用部门下拉，有创建权限时显示快捷新建", async () => {
+  test("用户编辑完整加载组织并分页选择部门，有创建权限时显示快捷新建", async () => {
     api.list.mockImplementation((resource: string) =>
       Promise.resolve(
         resource === "departments"
@@ -284,61 +286,16 @@ describe("SystemResourcePage", () => {
 
     expect(document.body.textContent).toContain("所属部门");
     expect(document.body.textContent).toContain("新建部门");
+    expect(document.body.textContent).toContain("每页 10 条");
+    expect(document.body.textContent).toContain("销售部 · sales");
     expect(api.list).toHaveBeenCalledWith(
       "departments",
-      expect.objectContaining({ status: "active", sort: "order,name" }),
+      expect.objectContaining({
+        pageSize: 10,
+        status: undefined,
+        sort: "order,name,id",
+      }),
     );
     wrapper.unmount();
   });
-
-  test("部门停用和删除使用显式迁移目标", async () => {
-    const department = {
-      id: "dept_sales",
-      code: "sales",
-      name: "销售部",
-      parentId: "dept_platform",
-      status: "active",
-    };
-    api.list.mockResolvedValue({
-      items: [department],
-      total: 1,
-      page: 1,
-      pageSize: 10,
-    });
-    api.transitionDepartment.mockResolvedValue({
-      department: { ...department, status: "disabled" },
-      movedChildren: 0,
-      movedUsers: 1,
-      updatedRoles: 0,
-    });
-    const wrapper = mount(SystemResourcePage, {
-      props: { config: systemResourceConfigs.departments },
-    });
-    await flushPromises();
-
-    wrapper.getComponent(SystemResourceTable).vm.$emit("edit", department);
-    await flushPromises();
-    wrapper.getComponent(DepartmentOrganizationForm).vm.$emit("submit", {
-      ...department,
-      status: "disabled",
-      _transitionTargetDepartmentId: "dept_platform",
-    });
-    await flushPromises();
-    expect(api.transitionDepartment).toHaveBeenCalledWith("dept_sales", {
-      action: "disable",
-      targetDepartmentId: "dept_platform",
-    });
-
-    wrapper.getComponent(SystemResourceTable).vm.$emit("remove", department);
-    await flushPromises();
-    wrapper
-      .getComponent(DepartmentTransitionDialog)
-      .vm.$emit("confirm", "dept_platform");
-    await flushPromises();
-    expect(api.transitionDepartment).toHaveBeenLastCalledWith("dept_sales", {
-      action: "delete",
-      targetDepartmentId: "dept_platform",
-    });
-    wrapper.unmount();
-  });
 });

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

@@ -69,6 +69,12 @@ function formatValue(item: SystemRecord, column: ResourceColumn): string {
     return auditAction(value)?.label || String(value || "-");
   if (column.format === "date-time") return formatDateTime(value);
   if (column.format === "governed-value") return formatGovernedValue(value);
+  if (column.key === "status")
+    return value === "active"
+      ? "启用"
+      : value === "disabled"
+        ? "停用"
+        : String(value || "—");
   if (typeof value === "boolean") return value ? "是" : "否";
   if (Array.isArray(value)) return value.join(", ");
   if (value && typeof value === "object") {
@@ -80,7 +86,9 @@ function formatValue(item: SystemRecord, column: ResourceColumn): string {
         JSON.stringify(value),
     );
   }
-  return value ? String(value) : "-";
+  return value === undefined || value === null || value === ""
+    ? "-"
+    : String(value);
 }
 
 function formatGovernedValue(value: unknown): string {
@@ -232,7 +240,11 @@ function licenseVersionLabel(version: string): string {
                   v-if="viewable"
                   variant="outline"
                   size="sm"
-                  :aria-label="`查看审计日志 ${String(item.id)} 详情`"
+                  :aria-label="
+                    columns.some((column) => column.format === 'audit-action')
+                      ? `查看审计日志 ${item.id} 详情`
+                      : `查看 ${String(item.displayName || item.name || item.id)} 详情`
+                  "
                   @click="emit('view', item)"
                 >
                   查看详情