init: UserBaseFront (frontend)

src/views/role-authz/AddRoleContainer.vue

@@ -0,0 +1,50 @@
+<template>
+    <RoleForm v-model="visible" :initForm="initForm" :isEdit="false" :loading="submitting"
+        @submit="handleSubmit" @cancel="visible = false" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import RoleForm from "./RoleForm.vue";
+
+const visible = ref(false);
+const initForm = ref<Record<string, any>>({});
+let onSuccessCallback: (() => void) | null = null;
+
+// useForm 托管提交（角色新增：data 形态与后端 SysAppRoleRequest 一致）
+const { form, loading: submitting, send: sendForm, onSuccess, onError } = useForm(
+    (dto) => Apis.AppRole.roleAdd({ data: dto }),
+    {
+        initialForm: { name: "", appId: undefined, allAppFlag: false, remark: "", disabled: false },
+        resetAfterSubmiting: true,
+    }
+);
+
+onSuccess(() => {
+    Message.success("新增角色成功！");
+    visible.value = false;
+    onSuccessCallback?.();
+});
+onError((event: any) => {
+    Message.error(event?.error?.message || "新增失败");
+});
+
+function open(onSuccess?: () => void) {
+    initForm.value = {};
+    onSuccessCallback = onSuccess || null;
+    visible.value = true;
+}
+
+async function handleSubmit(formData: Record<string, any>) {
+    form.value = {
+        name: formData.name,
+        appId: formData.appId,
+        allAppFlag: formData.allAppFlag,
+        remark: formData.remark,
+        disabled: formData.disabled,
+    };
+    await sendForm();
+}
+
+defineExpose({ open, visible });
+</script>