create-windy 0.6.21 → 0.7.0

package/template/apps/web/src/pages/system/components/department/DepartmentTransitionDialog.vue

@@ -2,13 +2,11 @@
 import { computed, shallowRef, watch } from "vue";
 import FormDialog from "@/components/common/FormDialog.vue";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { listSystemResource, type SystemRecord } from "@/services/system-api";
+  previewDepartmentTransition,
+  type SystemRecord,
+} from "@/services/system-api";
+import PagedSelectionList from "../PagedSelectionList.vue";
+import { departmentOptions, loadSelectionRecords } from "../selection-options";
 
 const open = defineModel<boolean>("open", { default: false });
 const props = defineProps<{
@@ -16,17 +14,29 @@ const props = defineProps<{
   loading?: boolean;
 }>();
 const emit = defineEmits<{
-  confirm: [targetDepartmentId: string];
+  confirm: [targetDepartmentId: string | undefined];
 }>();
 
 const targetDepartmentId = shallowRef<string>();
 const departments = shallowRef<SystemRecord[]>([]);
 const error = shallowRef("");
 const targets = computed(() =>
-  departments.value.filter(
-    (department) =>
-      department.id !== props.department?.id &&
-      !isDescendant(department.id, props.department?.id),
+  departmentOptions(departments.value, props.department?.id),
+);
+const fetching = shallowRef(false);
+const preview = shallowRef<{
+  childDepartmentCount: number;
+  userCount: number;
+  roleCount: number;
+}>();
+
+const requiresTarget = computed(() =>
+  Boolean(
+    preview.value &&
+    preview.value.childDepartmentCount +
+      preview.value.userCount +
+      preview.value.roleCount >
+      0,
   ),
 );
 
@@ -38,39 +48,34 @@ watch(open, (value) => {
 
 async function loadDepartments() {
   error.value = "";
+  fetching.value = true;
+  preview.value = undefined;
   try {
-    const result = await listSystemResource("departments", {
-      page: 1,
-      pageSize: 100,
-      status: "active",
-      sort: "order,name",
-    });
-    departments.value = result.items;
+    if (!props.department?.parentId) return;
+    const [records, impact] = await Promise.all([
+      loadSelectionRecords("departments", false),
+      previewDepartmentTransition(props.department.id),
+    ]);
+    departments.value = records;
+    preview.value = impact;
   } catch (currentError) {
     error.value =
       currentError instanceof Error
         ? currentError.message
         : String(currentError);
+  } finally {
+    fetching.value = false;
   }
 }
 
 function submit() {
-  if (targetDepartmentId.value) emit("confirm", targetDepartmentId.value);
-}
-
-function isDescendant(candidateId: string, ancestorId: unknown): boolean {
-  if (typeof ancestorId !== "string") return false;
-  const byId = new Map(
-    departments.value.map((department) => [department.id, department]),
-  );
-  const visited = new Set<string>();
-  let current = byId.get(candidateId);
-  while (typeof current?.parentId === "string" && !visited.has(current.id)) {
-    visited.add(current.id);
-    if (current.parentId === ancestorId) return true;
-    current = byId.get(current.parentId);
-  }
-  return false;
+  if (
+    (!requiresTarget.value || targetDepartmentId.value) &&
+    preview.value &&
+    !fetching.value &&
+    !props.loading
+  )
+    emit("confirm", targetDepartmentId.value);
 }
 </script>
 
@@ -81,7 +86,13 @@ function isDescendant(candidateId: string, ancestorId: unknown): boolean {
     description="删除前会把下级部门、用户归属和角色自定义部门范围迁移到指定部门。"
     submit-text="迁移并删除"
     :loading="loading"
-    :submit-disabled="!department?.parentId || !targetDepartmentId"
+    :before-close="() => !loading"
+    :submit-disabled="
+      !department?.parentId ||
+      (requiresTarget && !targetDepartmentId) ||
+      fetching ||
+      !preview
+    "
     @submit="submit"
   >
     <p
@@ -90,23 +101,32 @@ function isDescendant(candidateId: string, ancestorId: unknown): boolean {
     >
       平台唯一根组织不能删除。
     </p>
-    <label v-else class="grid gap-2 text-sm font-medium">
+    <div v-else class="grid gap-2 text-sm font-medium">
       <span>迁移目标</span>
-      <Select v-model="targetDepartmentId">
-        <SelectTrigger class="w-full" aria-label="删除部门迁移目标">
-          <SelectValue placeholder="请选择启用部门" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem
-            v-for="department in targets"
-            :key="department.id"
-            :value="department.id"
-          >
-            {{ String(department.name || department.code) }}
-          </SelectItem>
-        </SelectContent>
-      </Select>
-    </label>
+      <p v-if="fetching" class="text-sm text-muted-foreground">
+        正在读取迁移影响…
+      </p>
+      <p v-else-if="preview" class="text-sm">
+        将迁移 {{ preview.childDepartmentCount }} 个直属下级部门、{{
+          preview.userCount
+        }}
+        个账号归属、{{ preview.roleCount }} 个角色数据范围。
+      </p>
+      <p
+        v-if="preview && !requiresTarget"
+        class="text-sm text-muted-foreground"
+      >
+        没有关联数据，可直接删除。
+      </p>
+      <PagedSelectionList
+        :items="targets"
+        :model-value="targetDepartmentId ? [targetDepartmentId] : []"
+        label="迁移目标"
+        clearable
+        :disabled="fetching || loading || !preview"
+        @update:model-value="targetDepartmentId = $event[0]"
+      />
+    </div>
     <p v-if="error" class="text-sm text-destructive">{{ error }}</p>
   </FormDialog>
 </template>

package/template/apps/web/src/pages/system/components/role-policy/RolePermissionTree.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, shallowRef, watch } from "vue";
 import type { PermissionDefinition } from "@southwind-ai/shared";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
   Tooltip,
@@ -23,7 +25,36 @@ const emit = defineEmits<{
   "update:modelValue": [value: string[]];
 }>();
 
-const groups = computed(() => groupPermissions(props.permissions));
+const keyword = shallowRef("");
+const page = shallowRef(1);
+const filtered = computed(() =>
+  props.permissions.filter((permission) =>
+    [
+      permission.key,
+      permission.label,
+      permission.moduleLabel,
+      permission.resourceLabel,
+      permission.description,
+    ]
+      .join(" ")
+      .toLocaleLowerCase()
+      .includes(keyword.value.trim().toLocaleLowerCase()),
+  ),
+);
+const pageCount = computed(() =>
+  Math.max(1, Math.ceil(filtered.value.length / 10)),
+);
+const groups = computed(() =>
+  groupPermissions(
+    filtered.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 unknownKeys = computed(() =>
   unknownPermissionKeys(props.modelValue, props.permissions),
 );
@@ -53,92 +84,132 @@ function toggleKeys(keys: string[], checked: boolean) {
 <template>
   <TooltipProvider :delay-duration="0">
     <div class="space-y-4 rounded-lg border bg-muted/20 p-4">
-    <section v-for="group in groups" :key="group.key" class="space-y-3">
-      <label class="flex items-center gap-2 text-sm font-semibold">
-        <Checkbox
-          :data-testid="`permission-module-${group.key}`"
-          :model-value="checkedState(groupKeys(group.resources))"
-          @update:model-value="
-            toggleKeys(groupKeys(group.resources), $event === true)
-          "
-        />
-        {{ group.label }}
-      </label>
-      <div class="grid gap-3 pl-6 lg:grid-cols-2">
-        <div
-          v-for="resource in group.resources"
-          :key="resource.key"
-          class="rounded-md border bg-background p-3"
-        >
-          <label class="flex items-center gap-2 text-sm font-medium">
-            <Checkbox
-              :data-testid="`permission-resource-${resource.key}`"
-              :model-value="
-                checkedState(resource.permissions.map(({ key }) => key))
-              "
-              @update:model-value="
-                toggleKeys(
-                  resource.permissions.map(({ key }) => key),
-                  $event === true,
-                )
-              "
-            />
-            {{ resource.label }}
-          </label>
-          <div class="mt-3 flex flex-wrap gap-x-5 gap-y-3 pl-6">
-            <label
-              v-for="permission in resource.permissions"
-              :key="permission.key"
-              class="flex items-center gap-2 text-sm text-muted-foreground"
-            >
+      <Input
+        v-model="keyword"
+        @keydown.enter.prevent
+        aria-label="搜索功能权限"
+        placeholder="搜索权限名称、模块或权限 Key"
+      />
+      <p class="text-xs text-muted-foreground">
+        已选择
+        {{ modelValue.length }}
+        项；模块与资源勾选仅作用于本页，翻页保留已有选择。
+      </p>
+      <p v-if="!filtered.length" class="text-sm text-muted-foreground">
+        暂无匹配权限。
+      </p>
+      <section v-for="group in groups" :key="group.key" class="space-y-3">
+        <label class="flex items-center gap-2 text-sm font-semibold">
+          <Checkbox
+            :data-testid="`permission-module-${group.key}`"
+            :model-value="checkedState(groupKeys(group.resources))"
+            @update:model-value="
+              toggleKeys(groupKeys(group.resources), $event === true)
+            "
+          />
+          {{ group.label }}
+        </label>
+        <div class="grid gap-3 pl-6 lg:grid-cols-2">
+          <div
+            v-for="resource in group.resources"
+            :key="resource.key"
+            class="rounded-md border bg-background p-3"
+          >
+            <label class="flex items-center gap-2 text-sm font-medium">
               <Checkbox
-                :data-testid="`permission-${permission.key}`"
-                :model-value="modelValue.includes(permission.key)"
+                :data-testid="`permission-resource-${resource.key}`"
+                :model-value="
+                  checkedState(resource.permissions.map(({ key }) => key))
+                "
                 @update:model-value="
-                  toggleKeys([permission.key], $event === true)
+                  toggleKeys(
+                    resource.permissions.map(({ key }) => key),
+                    $event === true,
+                  )
                 "
               />
-              <Tooltip>
-                <TooltipTrigger as-child>
-                  <span
-                    class="cursor-help underline decoration-dotted underline-offset-4"
-                  >
-                    {{ permission.label }}
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent class="max-w-xs space-y-1">
-                  <p class="font-mono text-xs">{{ permission.key }}</p>
-                  <p v-if="permission.description">
-                    {{ permission.description }}
-                  </p>
-                </TooltipContent>
-              </Tooltip>
+              {{ resource.label }}
             </label>
+            <div class="mt-3 flex flex-wrap gap-x-5 gap-y-3 pl-6">
+              <label
+                v-for="permission in resource.permissions"
+                :key="permission.key"
+                class="flex items-center gap-2 text-sm text-muted-foreground"
+              >
+                <Checkbox
+                  :data-testid="`permission-${permission.key}`"
+                  :model-value="modelValue.includes(permission.key)"
+                  @update:model-value="
+                    toggleKeys([permission.key], $event === true)
+                  "
+                />
+                <Tooltip>
+                  <TooltipTrigger as-child>
+                    <span
+                      class="cursor-help underline decoration-dotted underline-offset-4"
+                    >
+                      {{ permission.label }}
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent class="max-w-xs space-y-1">
+                    <p class="font-mono text-xs">{{ permission.key }}</p>
+                    <p v-if="permission.description">
+                      {{ permission.description }}
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </label>
+            </div>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
 
-    <section
-      v-if="unknownKeys.length"
-      class="space-y-3 rounded-md border border-amber-500/30 bg-amber-500/5 p-3"
-    >
-      <p class="text-sm font-medium">未注册的历史权限</p>
-      <p class="text-xs text-muted-foreground">
-        这些权限不在当前 Manifest 中。取消勾选会从角色策略中移除。
-      </p>
-      <label
-        v-for="key in unknownKeys"
-        :key="key"
-        class="flex items-center gap-2 text-sm"
+      <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="page <= 1"
+            @click="page--"
+            >上一页</Button
+          >
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            :disabled="page >= pageCount"
+            @click="page++"
+            >下一页</Button
+          >
+        </div>
+      </div>
+      <section
+        v-if="unknownKeys.length"
+        class="space-y-3 rounded-md border border-amber-500/30 bg-amber-500/5 p-3"
       >
-        <Checkbox
-          :model-value="true"
-          @update:model-value="toggleKeys([key], $event === true)"
-        />
-        <code>{{ key }}</code>
-      </label>
-    </section>
+        <p class="text-sm font-medium">未注册的历史权限</p>
+        <p class="text-xs text-muted-foreground">
+          这些权限不在当前 Manifest 中。取消勾选会从角色策略中移除。
+        </p>
+        <label
+          v-for="key in unknownKeys"
+          :key="key"
+          class="flex items-center gap-2 text-sm"
+        >
+          <Checkbox
+            :model-value="true"
+            @update:model-value="toggleKeys([key], $event === true)"
+          />
+          <code>{{ key }}</code>
+        </label>
+      </section>
     </div>
   </TooltipProvider>
 </template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { shallowRef, watch } from "vue";
+import { computed, onMounted, shallowRef, watch } from "vue";
 import type { DataScope, PermissionDefinition } from "@southwind-ai/shared";
 import { Input } from "@/components/ui/input";
 import {
@@ -11,6 +11,8 @@ import {
 } from "@/components/ui/select";
 import type { SystemRecord } from "@/services/system-api";
 import { normalizePermissionKeys } from "./permission-tree";
+import PagedSelectionList from "../PagedSelectionList.vue";
+import { loadSelectionRecords, departmentOptions } from "../selection-options";
 import RolePermissionTree from "./RolePermissionTree.vue";
 
 interface RolePolicyDraft extends Record<string, unknown> {
@@ -18,6 +20,8 @@ interface RolePolicyDraft extends Record<string, unknown> {
   name: string;
   dataScope: DataScope;
   permissionKeys: string[];
+  departmentIds: string[];
+  menuKeys: string[];
 }
 
 const props = defineProps<{
@@ -31,25 +35,62 @@ const emit = defineEmits<{
 }>();
 
 const form = shallowRef<RolePolicyDraft>(createDraft());
+const baseline = shallowRef("");
+const dirty = computed(() => JSON.stringify(form.value) !== baseline.value);
+const error = shallowRef("");
+const departmentError = shallowRef("");
+const departments = shallowRef<SystemRecord[]>([]);
+const choices = computed(() => departmentOptions(departments.value));
+function markSaved() {
+  baseline.value = JSON.stringify(form.value);
+}
+async function loadDepartments() {
+  try {
+    departments.value = await loadSelectionRecords("departments", false);
+  } catch (cause) {
+    departmentError.value =
+      cause instanceof Error ? cause.message : String(cause);
+  }
+}
+onMounted(() => {
+  if (form.value.dataScope === "custom") void loadDepartments();
+});
+watch(
+  () => form.value.dataScope,
+  (scope) => {
+    if (scope === "custom" && !departments.value.length) void loadDepartments();
+  },
+);
 
 watch(
   () => [props.item, props.defaults] as const,
   () => {
     form.value = createDraft({ ...props.defaults, ...(props.item || {}) });
+    markSaved();
   },
   { immediate: true },
 );
 
 function createDraft(source: Record<string, unknown> = {}): RolePolicyDraft {
   return {
-    ...source,
+    menuKeys: Array.isArray(source.menuKeys)
+      ? source.menuKeys
+          .filter((key): key is string => typeof key === "string")
+          .sort()
+      : [],
+    status: typeof source.status === "string" ? source.status : "active",
+    departmentIds: Array.isArray(source.departmentIds)
+      ? source.departmentIds
+          .filter((id): id is string => typeof id === "string")
+          .sort()
+      : [],
     code: String(source.code || ""),
     name: String(source.name || ""),
     dataScope: readDataScope(source.dataScope),
     permissionKeys: Array.isArray(source.permissionKeys)
-      ? source.permissionKeys.filter(
-          (key): key is string => typeof key === "string",
-        )
+      ? source.permissionKeys
+          .filter((key): key is string => typeof key === "string")
+          .sort()
       : [],
   };
 }
@@ -67,17 +108,37 @@ function readDataScope(value: unknown): DataScope {
 }
 
 function update(key: keyof RolePolicyDraft, value: unknown) {
-  form.value = { ...form.value, [key]: value };
+  form.value = {
+    ...form.value,
+    [key]: Array.isArray(value) ? [...value].sort() : value,
+  };
 }
 
 function submit() {
+  error.value = "";
+  if (!form.value.code.trim() || !form.value.name.trim()) {
+    error.value = "请填写角色编码和名称。";
+    return;
+  }
+  if (form.value.dataScope === "custom" && !form.value.departmentIds.length) {
+    error.value = "自定义数据范围须选择至少一个部门。";
+    return;
+  }
   emit("submit", {
     ...form.value,
     permissionKeys: normalizePermissionKeys(form.value.permissionKeys),
+    departmentIds:
+      form.value.dataScope === "custom" ? form.value.departmentIds : [],
   });
 }
 
-defineExpose({ submit });
+defineExpose({
+  submit,
+  markSaved,
+  get dirty() {
+    return dirty.value;
+  },
+});
 </script>
 
 <template>
@@ -100,6 +161,21 @@ defineExpose({ submit });
         />
       </label>
     </div>
+    <label class="grid gap-2 text-sm font-medium">
+      <span>角色状态</span>
+      <Select
+        :model-value="String(form.status)"
+        @update:model-value="update('status', $event)"
+      >
+        <SelectTrigger class="w-full" aria-label="角色状态"
+          ><SelectValue
+        /></SelectTrigger>
+        <SelectContent
+          ><SelectItem value="active">启用</SelectItem
+          ><SelectItem value="disabled">停用</SelectItem></SelectContent
+        >
+      </Select>
+    </label>
     <label class="grid gap-2 text-sm font-medium">
       <span>数据范围</span>
       <Select
@@ -117,11 +193,25 @@ defineExpose({ submit });
         </SelectContent>
       </Select>
     </label>
+    <div v-if="form.dataScope === 'custom'" class="grid gap-2">
+      <p v-if="departmentError" class="text-sm text-destructive">
+        {{ departmentError }}
+      </p>
+      <PagedSelectionList
+        :items="choices"
+        :model-value="form.departmentIds"
+        label="数据范围部门"
+        multiple
+        @update:model-value="update('departmentIds', $event)"
+      />
+    </div>
+    <p v-if="error" class="text-sm text-destructive">{{ error }}</p>
     <div class="grid gap-2">
       <div>
         <p class="text-sm font-medium">功能权限</p>
         <p class="text-xs text-muted-foreground">
-          按模块、资源或单个操作级联选择。
+          从当前 Manifest 注册的全部功能权限中手动选择；每页 10
+          条，搜索或翻页保留勾选。
         </p>
       </div>
       <RolePermissionTree