重构错误处理逻辑,更新组件导入路径,新增多个模态框组件以支持用户、部门、角色和权限管理功能,优化分页和排序逻辑,更新类型定义以提高代码可读性和维护性

This commit is contained in:
Chuck1sn
2025-06-16 18:00:15 +08:00
parent 772ad547bf
commit 87d288c58e
54 changed files with 308 additions and 221 deletions

View File

@@ -71,19 +71,19 @@
</div>
</form>
</div>
<UserUpsertModal :id="'user-upsert-modal'" :onSubmit="handleUpsertUserSubmit" :closeModal="() => {
<UserFormDialog :id="'user-upsert-modal'" :onSubmit="handleUpsertUserSubmit" :closeModal="() => {
userUpsertModal!.hide();
}">
</UserUpsertModal>
</UserFormDialog>
<UserDeleteModal :id="'user-delete-modal'" :closeModal="() => {
currentDeleteUsername = undefined
userDeleteModal!.hide();
}" :onSubmit="handleDeleteUserSubmit" title="确定删除该用户吗" content="删除用户"></UserDeleteModal>
<DepartmentUpsertModal :id="'department-upsert-modal'" :onSubmit="handleUpsertDepartmentSubmit" :closeModal="() => {
<DepartmentFormDialog :id="'department-upsert-modal'" :onSubmit="handleUpsertDepartmentSubmit" :closeModal="() => {
availableDepartments = undefined
departmentUpsertModal!.hide();
}" :availableDepartments="availableDepartments">
</DepartmentUpsertModal>
</DepartmentFormDialog>
<DepartmentDeleteModal :id="'department-delete-modal'" :closeModal="() => {
currentDeleteDepartmentName = undefined
departmentDeleteModal!.hide();
@@ -92,10 +92,9 @@
<script setup lang="ts">
import { LoadingIcon } from "@/components/icons";
import DepartmentUpsertModal from "@/components/modals/DepartmentUpsertModal.vue";
import UserDeleteModal from "@/components/modals/PopupModal.vue";
import DepartmentDeleteModal from "@/components/modals/PopupModal.vue";
import UserUpsertModal from "@/components/modals/UserUpsertModal.vue";
import UserDeleteModal from "@/components/modals/ConfirmationDialog.vue";
import DepartmentDeleteModal from "@/components/modals/ConfirmationDialog.vue";
import DepartmentFormDialog from "@/components/modals/DepartmentFormDialog.vue";
import TableButton from "@/components/tables/TableButton.vue";
import Avatar from "@/components/ui/Avatar.vue";
import InputButton from "@/components/ui/InputButton.vue";
@@ -107,8 +106,8 @@ import { useActionExcStore } from "@/composables/store/useActionExcStore";
import useAlertStore from "@/composables/store/useAlertStore";
import useUserStore from "@/composables/store/useUserStore";
import { useUserUpsert } from "@/composables/user/useUserUpsert";
import type { DepartmentUpsertModel } from "@/types/department";
import type { UserUpsertSubmitModel } from "@/types/user";
import type { DepartmentUpsertModel } from "@/types/DepartmentTypes";
import type { UserUpsertSubmitModel } from "@/types/UserTypes";
import DOMPurify from "dompurify";
import { Modal, type ModalInterface, initFlowbite } from "flowbite";
import { marked } from "marked";

View File

@@ -26,19 +26,19 @@
</template>
<script setup lang="ts">
import { Modal, initFlowbite } from "flowbite";
import { computed, onMounted } from "vue";
import { initFlowbite, Modal } from "flowbite";
export type ModalSize = "xs" | "sm" | "md" | "lg" | "xl";
const props = defineProps<{
/** 模态框标题 */
/** 对话框标题 */
title?: string;
/** 模态框大小 */
/** 对话框大小 */
size?: ModalSize;
/** 关闭模态框的回调函数 */
/** 关闭对话框的回调函数 */
closeModal: () => void;
/** 模态框ID用于DOM选择 */
/** 对话框ID用于DOM选择 */
id?: string;
}>();

View File

@@ -1,5 +1,5 @@
<template>
<BaseModal :id="id" :closeModal="closeModal" size="sm">
<BaseDialog :id="id" :closeModal="closeModal" size="sm">
<div class="p-5 md:p-6 text-center">
<svg class="w-14 h-14 sm:w-16 sm:h-16 mx-auto text-red-600 mb-4" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -18,11 +18,11 @@
class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 min-w-[80px]"></button>
</div>
</div>
</BaseModal>
</BaseDialog>
</template>
<script setup lang="ts">
import BaseModal from "./BaseModal.vue";
import BaseDialog from "./BaseDialog.vue";
const { title, id, closeModal, onSubmit } = defineProps<{
title: string;

View File

@@ -1,5 +1,5 @@
<template>
<BaseModal :id="id" title="部门管理" size="md" :closeModal="closeModal">
<BaseDialog :id="id" title="部门管理" size="md" :closeModal="closeModal">
<!-- Modal body -->
<div class="p-4 md:p-5">
<div class="grid gap-4 mb-4 grid-cols-1">
@@ -24,17 +24,17 @@
保存
</button>
</div>
</BaseModal>
</BaseDialog>
</template>
<script setup lang="ts">
import type { components } from "@/api/types/schema";
import useAlertStore from "@/composables/store/useAlertStore";
import type { DepartmentUpsertModel } from "@/types/department";
import type { DepartmentUpsertModel } from "@/types/DepartmentTypes";
import { initFlowbite } from "flowbite";
import { onMounted, ref, watch } from "vue";
import { z } from "zod";
import BaseModal from "./BaseModal.vue";
import BaseDialog from "./BaseDialog.vue";
const { department, availableDepartments, onSubmit, closeModal, id } =
defineProps<{

View File

@@ -1,5 +1,5 @@
<template>
<BaseModal :id="id" title="大模型配置" size="md" :closeModal="closeModal">
<BaseDialog :id="id" title="大模型配置" size="md" :closeModal="closeModal">
<!-- Modal body -->
<div class="p-4 md:p-5">
<div class="grid gap-4 mb-4 grid-cols-1">
@@ -53,7 +53,7 @@
保存
</button>
</div>
</BaseModal>
</BaseDialog>
</template>
<script setup lang="ts">
@@ -61,7 +61,7 @@ import type { components } from "@/api/types/schema";
import { initFlowbite } from "flowbite";
import { onMounted, ref, watch } from "vue";
import { z } from "zod";
import BaseModal from "./BaseModal.vue";
import BaseDialog from "./BaseDialog.vue";
const { llm, onSubmit, id } = defineProps<{
llm?: components["schemas"]["LlmVm"];

View File

@@ -1,5 +1,5 @@
<template>
<BaseModal :id="id" title="权限管理" size="md" :closeModal="closeModal">
<BaseDialog :id="id" title="权限管理" size="md" :closeModal="closeModal">
<!-- Modal body -->
<div class="p-4 md:p-5">
<div class="grid gap-4 mb-4 grid-cols-1">
@@ -21,16 +21,16 @@
保存
</button>
</div>
</BaseModal>
</BaseDialog>
</template>
<script setup lang="ts">
import type { components } from "@/api/types/schema";
import useAlertStore from "@/composables/store/useAlertStore";
import type { PermissionUpsertModel } from "@/types/permission";
import type { PermissionUpsertModel } from "@/types/PermissionTypes";
import { ref, watch } from "vue";
import { z } from "zod";
import BaseModal from "./BaseModal.vue";
import BaseDialog from "./BaseDialog.vue";
const alertStore = useAlertStore();
const { permission, onSubmit, closeModal, id } = defineProps<{

View File

@@ -1,5 +1,5 @@
<template>
<BaseModal :id="id" title="岗位管理" size="md" :closeModal="closeModal">
<BaseDialog :id="id" title="岗位管理" size="md" :closeModal="closeModal">
<!-- Modal body -->
<div class="p-4 md:p-5">
<div class="grid gap-4 mb-4 grid-cols-1">
@@ -15,16 +15,16 @@
保存
</button>
</div>
</BaseModal>
</BaseDialog>
</template>
<script setup lang="ts">
import type { components } from "@/api/types/schema";
import useAlertStore from "@/composables/store/useAlertStore";
import type { PositionUpsertModel } from "@/types/position";
import type { PositionUpsertModel } from "@/types/PositionTypes";
import { ref, watch } from "vue";
import { z } from "zod";
import BaseModal from "./BaseModal.vue";
import BaseDialog from "./BaseDialog.vue";
const alertStore = useAlertStore();
const { position, closeModal, onSubmit, id } = defineProps<{

View File

@@ -1,5 +1,5 @@
<template>
<BaseModal :id="id" title="角色管理" size="md" :closeModal="closeModal">
<BaseDialog :id="id" title="角色管理" size="md" :closeModal="closeModal">
<!-- Modal body -->
<div class="p-4 md:p-5">
<div class="grid gap-4 mb-4 grid-cols-1">
@@ -21,16 +21,16 @@
保存
</button>
</div>
</BaseModal>
</BaseDialog>
</template>
<script setup lang="ts">
import type { components } from "@/api/types/schema";
import useAlertStore from "@/composables/store/useAlertStore";
import type { RoleUpsertModel } from "@/types/role";
import type { RoleUpsertModel } from "@/types/RoleTypes";
import { ref, watch } from "vue";
import { z } from "zod";
import BaseModal from "./BaseModal.vue";
import BaseDialog from "./BaseDialog.vue";
const alertStore = useAlertStore();
const { role, closeModal, onSubmit, id } = defineProps<{

View File

@@ -1,5 +1,5 @@
<template>
<BaseModal :id="id" title="定时任务配置" size="md" :closeModal="closeModal">
<BaseDialog :id="id" title="定时任务配置" size="md" :closeModal="closeModal">
<!-- Modal body -->
<div class="p-4 md:p-5">
<div class="grid gap-4 mb-4 grid-cols-1">
@@ -15,14 +15,14 @@
保存
</button>
</div>
</BaseModal>
</BaseDialog>
</template>
<script setup lang="ts">
import type { components } from "@/api/types/schema";
import { ref, watch } from "vue";
import { z } from "zod";
import BaseModal from "./BaseModal.vue";
import BaseDialog from "./BaseDialog.vue";
const { job, closeModal, onSubmit, id } = defineProps<{
job?: components["schemas"]["JobTriggerDto"];

View File

@@ -1,5 +1,5 @@
<template>
<BaseModal :id="id" title="用户管理" size="md" :closeModal="closeModal">
<BaseDialog :id="id" title="用户管理" size="md" :closeModal="closeModal">
<!-- Modal body -->
<form class="p-4 md:p-5">
<div class="space-y-4">
@@ -39,19 +39,19 @@
保存
</button>
</form>
</BaseModal>
</BaseDialog>
</template>
<script setup lang="ts">
import type { components } from "@/api/types/schema";
import useAlertStore from "@/composables/store/useAlertStore";
import { useUserUpsert } from "@/composables/user/useUserUpsert";
import { ValidationError } from "@/types/error";
import type { UserUpsertSubmitModel } from "@/types/user";
import { ValidationError } from "@/types/ErrorTypes";
import type { UserUpsertSubmitModel } from "@/types/UserTypes";
import Compressor from "compressorjs";
import { onMounted, ref, watch } from "vue";
import { ref, watch } from "vue";
import { z } from "zod";
import BaseModal from "./BaseModal.vue";
import BaseDialog from "./BaseDialog.vue";
const { user, onSubmit, id } = defineProps<{
user?: components["schemas"]["UserRolePermissionDto"];

View File

@@ -36,7 +36,7 @@
</template>
<script setup lang="ts">
import { usePagination } from "@/composables/page";
import { usePagination } from "@/composables/common/usePagination";
import { watch } from "vue";
const { pageChange, total } = defineProps<{

View File

@@ -35,8 +35,8 @@
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import useAlertStore from "@/composables/store/useAlertStore";
import type { AlertLevel } from "@/types/alert";
import type { AlertLevel } from "@/types/AlertTypes";
import { onMounted, onUnmounted, ref } from "vue";
const alertStore = useAlertStore();
</script>