课程分类添加和删除 和刷新表格

src/constants/business.ts

@@ -33,13 +33,9 @@ export const genderOptions: Common.OptionWithKey<UserManagement.GenderKey>[] = [
 export const userStatusLabels: Record<UserManagement.UserStatusKey, string> = {
   1: '启用',
   2: '禁用',
-  3: '冻结',
-  4: '软删除'
 };
 
 export const userStatusOptions: Common.OptionWithKey<UserManagement.UserStatusKey>[] = [
-  { value: '1', label: userStatusLabels['1'] },
-  { value: '2', label: userStatusLabels['2'] },
-  { value: '3', label: userStatusLabels['3'] },
-  { value: '4', label: userStatusLabels['4'] }
+  { value: 'N', label: userStatusLabels['1'] },
+  { value: 'Y', label: userStatusLabels['2'] },
 ];

src/hooks/business/use-table.ts

@@ -32,6 +32,7 @@ type ApiFn<Params = ApiParams, TableData = Record<string, unknown>> = (
  */
 type TransformedTableData<TableData = Record<string, unknown>> = {
   data: TableData[];
+	status:boolean;
   pageNum: number;
   pageSize: number;
   total: number;

src/locales/lang/zh-cn.ts

@@ -1,4 +1,4 @@
-import type { LocaleMessages } from 'vue-i18n';
+ import type { LocaleMessages } from 'vue-i18n';
 
 const locale: LocaleMessages<I18nType.Schema> = {
   message: {

src/service/api/user.ts

@@ -137,13 +137,13 @@ export function selectAll_1() {
 
 // 参数接口
 export interface AddEasEduCategoryParams {
-  id?: number;
-  name?: string;
-  description?: string;
+  id?: number|null;
+  name?: string|null;
+  description?: string|null;
   createTime?: Record<string, unknown>;
   modifyTime?: Record<string, unknown>;
-  createUid?: number;
-  disabled?: string;
+  createUid?: number|null;
+  disabled?: string|null;
 }
 
 // 响应接口
@@ -168,3 +168,21 @@ export interface AddEasEduCategoryRes {
 export function addEasEduCategory(params: AddEasEduCategoryParams){
   return request.post(`/addEasEduCategory`, params);
 }
+
+
+// 根据id删除课程
+// 响应接口
+export interface DeleteByIdRes {
+  status: boolean;
+  msg: string;
+  data: string;
+}
+
+/**
+ * 根据Id删除课程类别
+ * @param {string} id
+  * @returns
+ */
+export function deleteById(id: number){
+  return request.delete(`/deleteById/${id}`);
+}

src/typings/api.d.ts

@@ -25,28 +25,21 @@ declare namespace ApiRoute {
 declare namespace ApiUserManagement {
   interface User {
     /** 用户id */
-    id: string;
+    id: number|null;
     /** 用户名 */
-    userName: string | null;
+    name: string | null;
     /** 用户年龄 */
-    age: number | null;
-    /**
-     * 用户性别
-     * - 0: 女
-     * - 1: 男
-     */
-    gender: '0' | '1' | null;
+    description: string | null;
+    createTime: string | null;
     /** 用户手机号码 */
-    phone: string;
+    modifyTime: string|null;
     /** 用户邮箱 */
-    email: string | null;
+    createUid: number | null;
     /**
      * 用户状态
-     * - 1: 启用
-     * - 2: 禁用
-     * - 3: 冻结
-     * - 4: 软删除
+     * - Y: 启用
+     * - N: 禁用
      */
-    userStatus: '1' | '2' | '3' | '4' | null;
+    disabled: 'N' | 'Y'|null ;
   }
 }

src/typings/business.d.ts

@@ -32,14 +32,11 @@ declare namespace UserManagement {
    * - 0: 女
    * - 1: 男
    */
-  type GenderKey = NonNullable<User['gender']>;
+  // type GenderKey = NonNullable<User['gender']>;
 
   /**
    * 用户状态
-   * - 1: 启用
-   * - 2: 禁用
-   * - 3: 冻结
-   * - 4: 软删除
+
    */
-  type UserStatusKey = NonNullable<User['userStatus']>;
+  type UserStatusKey = NonNullable<User['disabled']>;
 }

src/typings/sort.ts

@@ -17,8 +17,6 @@ declare namespace CourseSort {
    * 用户状态
    * - 1: 启用
    * - 2: 禁用
-   * - 3: 冻结
-   * - 4: 软删除
    */
   type UserStatusKey = NonNullable<User['disabled']>;
 }

src/utils/form/rule.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue';
 import type { FormItemRule } from 'naive-ui';
-import { REGEXP_CODE_SIX, REGEXP_EMAIL, REGEXP_PHONE, REGEXP_PWD } from '@/config';
+import { REGEXP_CODE_SIX, REGEXP_PHONE } from '@/config';
 
 /** 创建自定义错误信息的必填表单规则 */
 export const createRequiredFormRule = (message = '不能为空'): FormItemRule => ({ required: true, message });
@@ -10,30 +10,16 @@ export const requiredFormRule = createRequiredFormRule();
 /** 表单规则 */
 interface CustomFormRules {
   /** 手机号码 */
-  phone: FormItemRule[];
-  /** 密码 */
-  pwd: FormItemRule[];
-  /** 验证码 */
-  code: FormItemRule[];
-  /** 邮箱 */
-  email: FormItemRule[];
+  createTime: FormItemRule[];
 }
 
 /** 表单规则 */
 export const formRules: CustomFormRules = {
-  phone: [
-    createRequiredFormRule('请输入手机号码'),
-    { pattern: REGEXP_PHONE, message: '手机号码格式错误', trigger: 'input' }
+  createTime: [
+    createRequiredFormRule('请输入创建时间'),
+    { pattern: '', message: '', trigger: 'input' }
   ],
-  pwd: [
-    createRequiredFormRule('请输入密码'),
-    { pattern: REGEXP_PWD, message: '密码为6-18位数字/字符/符号，至少2种组合', trigger: 'input' }
-  ],
-  code: [
-    createRequiredFormRule('请输入验证码'),
-    { pattern: REGEXP_CODE_SIX, message: '验证码格式错误', trigger: 'input' }
-  ],
-  email: [{ pattern: REGEXP_EMAIL, message: '邮箱格式错误', trigger: 'blur' }]
+  // email: [{ pattern: REGEXP_EMAIL, message: '邮箱格式错误', trigger: 'blur' }]
 };
 
 /** 是否为空字符串 */

src/views/management/sort/components/table-action-add.vue

@@ -1,152 +1,186 @@
 <template>
-  <n-modal v-model:show="modalVisible" preset="card" :title="title" class="w-700px">
-    <n-form ref="formRef" label-placement="left" :label-width="80" :model="formModel" :rules="rules">
-      <n-grid :cols="24" :x-gap="18">
-        <n-form-item-grid-item :span="12" label="ID" path="userName">
-          <n-input v-model:value="formModel.userName" />
-        </n-form-item-grid-item>
-        <n-form-item-grid-item :span="12" label="学科名称" path="age">
-          <n-input-number v-model:value="formModel.age" clearable />
-        </n-form-item-grid-item>
-        <n-form-item-grid-item :span="12" label="学科描述" path="gender">
-          <n-radio-group v-model:value="formModel.gender">
-            <n-radio v-for="item in genderOptions" :key="item.value" :value="item.value">{{ item.label }}</n-radio>
-          </n-radio-group>
-        </n-form-item-grid-item>
-        <n-form-item-grid-item :span="12" label="创建时间" path="phone">
-          <n-input v-model:value="formModel.phone" />
-        </n-form-item-grid-item>
-        <n-form-item-grid-item :span="12" label="修改时间" path="email">
-          <n-input v-model:value="formModel.email" />
-        </n-form-item-grid-item>
-				<n-form-item-grid-item :span="12" label="创建用户ID" path="email">
-          <n-input v-model:value="formModel.email" />
-        </n-form-item-grid-item>
-        <n-form-item-grid-item :span="12" label="状态" path="userStatus">
-          <n-select v-model:value="formModel.userStatus" :options="userStatusOptions" />
-        </n-form-item-grid-item>
-      </n-grid>
-      <n-space class="w-full pt-16px" :size="24" justify="end">
-        <n-button class="w-72px" @click="closeModal">取消</n-button>
-        <n-button class="w-72px" type="primary" @click="handleSubmit">确定</n-button>
-      </n-space>
-    </n-form>
-  </n-modal>
+	<n-modal v-model:show="modalVisible" preset="card" :title="title" class="w-700px">
+		<n-form ref="formRef" label-placement="left" :label-width="100" :model="formModel" :rules="rules">
+			<n-grid :cols="24" :x-gap="18">
+				<!-- <n-form-item-grid-item :span="12" label="ID" path="id">
+					<n-input-number v-model:value="formModel.id" />
+				</n-form-item-grid-item> -->
+				<n-form-item-grid-item :span="12" label="学科名称" path="name">
+					<n-input v-model:value="formModel.name" clearable />
+				</n-form-item-grid-item>
+				<!-- <n-form-item-grid-item :span="12" label="创建时间" path="createTime">
+					  <n-date-picker v-model:value="timestamp" type="datetime" clearable />
+					<n-input v-model:value="formModel.createTime" />
+				</n-form-item-grid-item> -->
+				<n-form-item-grid-item :span="12" label="学科描述" path="description">
+					<n-input v-model:value="formModel.description" clearable />
+					<!-- <n-radio-group v-model:value="formModel.description">
+						<n-radio v-for="item in genderOptions" :key="item.value" :value="item.value">{{ item.label }}</n-radio>
+					</n-radio-group> -->
+				</n-form-item-grid-item>
+
+				<!-- <n-form-item-grid-item :span="12" label="修改时间" path="email">
+					<n-input />
+				</n-form-item-grid-item> -->
+				<n-form-item-grid-item :span="12" label="创建用户ID" path="createUid">
+					<n-input-number v-model:value="formModel.createUid" />
+				</n-form-item-grid-item>
+				<n-form-item-grid-item :span="12" label="状态" path="disabled">
+					<n-select v-model:value="formModel.disabled" :options="userStatusOptions" />
+				</n-form-item-grid-item>
+			</n-grid>
+			<n-space class="w-full pt-16px" :size="24" justify="end">
+				<n-button class="w-72px" @click="closeModal">取消</n-button>
+				<n-button class="w-72px" type="primary" @click="handleSubmit">确定</n-button>
+			</n-space>
+		</n-form>
+	</n-modal>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, reactive, watch } from 'vue';
 import type { FormInst, FormItemRule } from 'naive-ui';
-import { genderOptions, userStatusOptions } from '@/constants';
-import { formRules, createRequiredFormRule } from '@/utils';
+import { userStatusOptions } from '@/constants';
+import {createRequiredFormRule } from '@/utils';
+import { addEasEduCategory, AddEasEduCategoryParams } from '~/src/service/api/user';
+import {getTableData} from '../index.vue'
+// const timestamp = ref(1483135260000)
+
 
 export interface Props {
-  /** 弹窗可见性 */
-  visible: boolean;
-  /**
-   * 弹窗类型
-   * add: 新增
-   * edit: 编辑
-   */
-  type?: 'add' | 'edit' | 'delete';
-  /** 编辑的表格行数据 */
-  editData?: UserManagement.User | null;
+	/** 弹窗可见性 */
+	visible: boolean;
+	/**
+	 * 弹窗类型
+	 * add: 新增
+	 * edit: 编辑
+	 * delete : 删除
+	 */
+	type?: 'add' | 'edit' ;
+	/** 编辑的表格行数据 */
+	editData?: UserManagement.User | null;
 }
 
 export type ModalType = NonNullable<Props['type']>;
 
-defineOptions({ name: 'TableActionModal' });
+defineOptions({ name: 'TableActionAdd' });
 
 const props = withDefaults(defineProps<Props>(), {
-  type: 'add',
-  editData: null
+	type: 'add',
+	editData: null,
 });
 
 interface Emits {
-  (e: 'update:visible', visible: boolean): void;
+	(e: 'update:visible', visible: boolean): void;
 }
 
 const emit = defineEmits<Emits>();
 
 const modalVisible = computed({
-  get() {
-    return props.visible;
-  },
-  set(visible) {
-    emit('update:visible', visible);
-  }
+	get() {
+		return props.visible;
+	},
+	set(visible) {
+		emit('update:visible', visible);
+	}
 });
 const closeModal = () => {
-  modalVisible.value = false;
+	modalVisible.value = false;
 };
 
 const title = computed(() => {
-  const titles: Record<ModalType, string> = {
-    add: '添加用户',
-    edit: '编辑用户'
-  };
-  return titles[props.type];
+	const titles: Record<ModalType, string> = {
+		add: '添加用户',
+		edit: '编辑用户',
+	};
+	return titles[props.type];
 });
 
 const formRef = ref<HTMLElement & FormInst>();
 
-type FormModel = Pick<UserManagement.User, 'userName' | 'age' | 'gender' | 'phone' | 'email' | 'userStatus'>;
+type FormModel = Pick<UserManagement.User,  | 'name' | 'description' |  'createUid' | 'disabled'>;
 
 const formModel = reactive<FormModel>(createDefaultFormModel());
 
 const rules: Record<keyof FormModel, FormItemRule | FormItemRule[]> = {
-  userName: createRequiredFormRule('请输入用户名'),
-  age: createRequiredFormRule('请输入年龄'),
-  gender: createRequiredFormRule('请选择性别'),
-  phone: formRules.phone,
-  email: formRules.email,
-  userStatus: createRequiredFormRule('请选择用户状态')
+	// id: createRequiredFormRule('请输入用户名'),
+	name: createRequiredFormRule('请输入学科名称'),
+	description: createRequiredFormRule('请进行部门描述'),
+	// createTime:formRules.createTime,
+	createUid: createRequiredFormRule('请输入创建用户ID'),
+	disabled: createRequiredFormRule('请选择用户状态')
+
 };
 
 function createDefaultFormModel(): FormModel {
-  return {
-    userName: '',
-    age: null,
-    gender: null,
-    phone: '',
-    email: null,
-    userStatus: null
-  };
+	return {
+		// id: null,
+		name: '',
+		description: '',
+		// createTime: '',
+		createUid:null,
+		disabled: null,
+	};
 }
 
+
 function handleUpdateFormModel(model: Partial<FormModel>) {
-  Object.assign(formModel, model);
+	Object.assign(formModel, model);
 }
 
 function handleUpdateFormModelByModalType() {
-  const handlers: Record<ModalType, () => void> = {
-    add: () => {
-      const defaultFormModel = createDefaultFormModel();
-      handleUpdateFormModel(defaultFormModel);
-    },
-    edit: () => {
-      if (props.editData) {
-        handleUpdateFormModel(props.editData);
-      }
-    }
-  };
-
-  handlers[props.type]();
+	const handlers: Record<ModalType, () => void> = {
+		add: () => {
+			const defaultFormModel = createDefaultFormModel();
+			handleUpdateFormModel(defaultFormModel);
+		},
+		edit: () => {
+			if (props.editData) {
+				handleUpdateFormModel(props.editData);
+			}
+		},
+	};
+
+	handlers[props.type]();
 }
 
+// async function handleSubmit() {
+// 	await formRef.value?.validate();
+// 	window.$message?.success('新增成功!');
+// 	closeModal();
+// }
+
+
 async function handleSubmit() {
   await formRef.value?.validate();
-  window.$message?.success('新增成功!');
-  closeModal();
+  const params: AddEasEduCategoryParams = {
+    // id: formModel.id,
+    name: formModel.name,
+    description: formModel.description,
+    // createTime: formModel.createTime,
+    createUid: formModel.createUid,
+    disabled: formModel.disabled
+  };
+  addEasEduCategory(params)
+    .then(res => {
+      window.$message?.success('新增成功!');
+      closeModal();
+			getTableData();
+    })
+    .catch(error => {
+      console.error(error);
+      window.$message?.error('新增失败!');
+    });
+
 }
 
 watch(
-  () => props.visible,
-  newValue => {
-    if (newValue) {
-      handleUpdateFormModelByModalType();
-    }
-  }
+	() => props.visible,
+	newValue => {
+		if (newValue) {
+			handleUpdateFormModelByModalType();
+		}
+	}
 );
 </script>
 

src/views/management/sort/index.vue

@@ -3,56 +3,58 @@
 		<n-card title="课程分类" :bordered="false" class="rounded-16px shadow-sm">
 			<n-space class="pb-12px" justify="space-between">
 				<n-space>
-					<n-button type="primary" @click="addTableData">
+					<n-button type="primary" :data="addData" @click="addTableData">
 						<icon-ic-round-plus class="mr-4px text-20px" />
 						新增
 					</n-button>
-					<!-- <n-button type="error">
-            <icon-ic-round-delete class="mr-4px text-20px" />
-            删除
-          </n-button>
-          <n-button type="success">
+					<n-button type="error" @click="deleteTableData" 	@update:checked-row-keys="handleCheck">
+						<icon-ic-round-delete class="mr-4px text-20px" />
+						删除
+					</n-button>
+					<!-- <n-button type="success">
             <icon-uil:export class="mr-4px text-20px" />
             导出Excel
           </n-button> -->
 				</n-space>
 				<n-space align="center" :size="18">
 					<n-button size="small" type="primary" @click="getTableData">
-						<icon-mdi-refresh class="mr-4px text-16px" />
+						<icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
 						刷新表格
 					</n-button>
 					<column-setting v-model:columns="columns" />
 				</n-space>
 			</n-space>
-			<n-data-table :columns="columns" :data="tableData" :pagination="pagination" :row-key="rowKey"
+			<n-data-table :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" :row-key="rowKey"
 				@update:checked-row-keys="handleCheck" />
 
-			<table-action-add v-model:visible="visible" :type="modalType"  />
+			<table-action-add v-model:visible="visible" :type="modalType" />
 		</n-card>
 	</div>
 </template>
 
-<script lang="ts">
+<script lang="ts" >
 import { defineComponent } from 'vue'
 import type { DataTableRowKey } from 'naive-ui'
 import { ref } from 'vue';
-import { useBoolean } from '@/hooks';
+import { useBoolean, useLoading } from '@/hooks';
 import TableActionAdd from './components/table-action-add.vue'
 import type { ModalType } from './components/table-action-add.vue';
+import { NButton, NSpace } from 'naive-ui';
 import type { DataTableColumns, PaginationProps } from 'naive-ui';
-import { selectAll_1, addEasEduCategory } from '~/src/service/api/user';
-import type {AddEasEduCategoryParams} from '~/src/service/api/user';
+// import { userStatusLabels } from '@/constants';
+import { selectAll_1,deleteById } from '~/src/service/api/user';
+import type { AddEasEduCategoryParams } from '~/src/service/api/user';
 type RowData = {
 	key: number
+	id: number
 	name: string
-	age: string
-	address: string
 	description: string
 	createTime: string
 	modifyTime: string
 	createUid: number
 	disabled: string
 }
+const { loading, startLoading, endLoading } = useLoading(false);
 const { bool: visible, setTrue: openModal } = useBoolean();
 
 const tableData = ref<any[]>([]);
@@ -62,44 +64,80 @@ const pagination: PaginationProps = ref({
 	page: 1,
 	pageSize: 10,
 	showSizePicker: true,
-	pageSizes: [10, 20, 50]
-	// onChange: (page: number) => {
-	//   // 处理页码变化
-	// },
-	// onUpdatePageSize: (pageSize: number) => {
-	//   // 处理每页显示数量变化
-	// }
+	pageSizes: [10, 20, 50],
+	onChange: (page: number) => {
+		// 处理页码变化
+		pagination.page = page;
+	},
+	onUpdatePageSize: (pageSize: number) => {
+		// 处理每页显示数量变化
+		pagination.pageSize = pageSize;
+		pagination.page = 1;
+	}
 }).value;
 
-async function getTableData() {
-	// const pageNum = pagination.page as number;
-	// const pageSize = pagination.pageSize as number;
-	// const params: any = {};
-
+export async function getTableData() {
+	startLoading();
 	selectAll_1().then(res => {
-		// console.log(res);
-		tableData.value = res.data as [];
+		setTimeout(() => {
+			// console.log(res);
+			tableData.value = res.data as [];
+			endLoading();
+		}, 1000);
 	});
 }
+
+
+const checkedRowKeysRef = ref<DataTableRowKey[]>([])
+
+async function deleteTableData() {
+  const ids = checkedRowKeysRef.value;
+	// console.log(ids);
+  if (ids.length !== 0) {
+		console.log(ids);
+    for (let id of ids) {
+      // 调用删除接口
+			console.log(id);
+      await deleteById(id as number)
+        .then((res) => {
+          const deleteRes = res.data;
+					if(!deleteRes)
+            console.log(`成功删除课程，ID: ${id}`);
+            window.$message?.success('删除成功!');
+        })
+        .catch((error) => {
+          // 错误处理
+          console.error(`删除课程发生错误，ID: ${id}`, error);
+          window.$message?.error('删除失败!');
+        });
+    }
+    getTableData(); // 删除完成后刷新表格数据
+  } else {
+    // 没有选择任何行时的操作
+    console.warn('未选择要删除的行');
+  }
+}
+
+
+
+
 const modalType = ref<ModalType>('add');
 
 function setModalType(type: ModalType) {
-  modalType.value = type;
+	modalType.value = type;
 }
 
 const addData = ref<AddEasEduCategoryParams[]>([]);
-async function addTableData() {
-	// const pageNum = pagination.page as number;
-	// const pageSize = pagination.pageSize as number;
-	// const params: any = {};
-  openModal();
-  setModalType('add');
-	const params: AddEasEduCategoryParams = {};
-
-	addEasEduCategory(params).then(res => {
-		// console.log(res);
-		addData.value = res.data as [];
-	});
+function addTableData() {
+	openModal();
+	getTableData(); // 删除完成后刷新表格数据
+	setModalType('add');
+	// const params: AddEasEduCategoryParams = {};
+	// addEasEduCategory(params).then(res => {
+	// 	console.log(res);
+	// 	addData.value = res.data as [];
+	// });
+
 }
 
 
@@ -110,7 +148,7 @@ function init() {
 // 初始化
 init();
 
-const createColumns = (): DataTableColumns<RowData> => [
+const createColumns = (): DataTableColumns<UserManagement.User> => [
 	{
 		type: 'selection',
 		align: 'center',
@@ -148,31 +186,47 @@ const createColumns = (): DataTableColumns<RowData> => [
 	{
 		key: 'disabled',
 		title: '状态',
-		align: 'center'
-	}
+		align: 'center',
+		// render: row => {
+		// 	if (row.disabled) {
+		// 		const tagTypes: Record<UserManagement.UserStatusKey, NaiveUI.ThemeColor> = {
+		// 			'Y': 'success',
+		// 			'N': 'error',
+		// 		};
+		// 		return <NTag type={tagTypes[row.disabled]}>{userStatusLabels[row.disabled]}</NTag>;
+    //   }
+		// 	return
+		// }
+	},
+
 ]
 
 
 export default defineComponent({
-	components:{
+	components: {
 		TableActionAdd,
 	},
 	setup() {
-		const checkedRowKeysRef = ref<DataTableRowKey[]>([])
+		// const checkedRowKeysRef = ref<DataTableRowKey[]>([])
 
 		return {
 			tableData,
+			id:1,
+			addData,
+			loading,
 			modalType,
 			getTableData,
 			addTableData,
 			setModalType,
+			deleteTableData,
 			visible,
 			columns: createColumns(),
 			checkedRowKeys: checkedRowKeysRef,
 			pagination,
-			rowKey: (row: RowData) => row.name,
+			rowKey: (row: RowData) => row.id,
 			handleCheck(rowKeys: DataTableRowKey[]) {
 				checkedRowKeysRef.value = rowKeys
+				console.log(checkedRowKeysRef.value);
 			}
 		}
 	}

src/views/management/usdt/index.vue

@@ -1,9 +0,0 @@
-<template>
-  <div>路由管理</div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped></style>

src/views/management/user/index.vue

@@ -1,33 +1,33 @@
 <template>
-  <div class="h-full overflow-hidden">
-    <n-card title="用户管理" :bordered="false" class="rounded-16px shadow-sm">
-      <n-space class="pb-12px" justify="space-between">
-        <n-space>
-          <n-button type="primary" @click="handleAddTable">
-            <icon-ic-round-plus class="mr-4px text-20px" />
-            新增
-          </n-button>
-          <n-button type="error">
-            <icon-ic-round-delete class="mr-4px text-20px" />
-            删除
-          </n-button>
-          <n-button type="success">
-            <icon-uil:export class="mr-4px text-20px" />
-            导出Excel
-          </n-button>
-        </n-space>
-        <n-space align="center" :size="18">
-          <n-button size="small" type="primary" @click="getTableData">
-            <icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
-            刷新表格
-          </n-button>
-          <column-setting v-model:columns="columns" />
-        </n-space>
-      </n-space>
-      <n-data-table :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" />
-      <table-action-modal v-model:visible="visible" :type="modalType" :edit-data="editData" />
-    </n-card>
-  </div>
+	<div class="h-full overflow-hidden">
+		<n-card title="用户管理" :bordered="false" class="rounded-16px shadow-sm">
+			<n-space class="pb-12px" justify="space-between">
+				<n-space>
+					<n-button type="primary" @click="handleAddTable">
+						<icon-ic-round-plus class="mr-4px text-20px" />
+						新增
+					</n-button>
+					<n-button type="error">
+						<icon-ic-round-delete class="mr-4px text-20px" />
+						删除
+					</n-button>
+					<n-button type="success">
+						<icon-uil:export class="mr-4px text-20px" />
+						导出Excel
+					</n-button>
+				</n-space>
+				<n-space align="center" :size="18">
+					<n-button size="small" type="primary" @click="getTableData">
+						<icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
+						刷新表格
+					</n-button>
+					<column-setting v-model:columns="columns" />
+				</n-space>
+			</n-space>
+			<n-data-table :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" />
+			<table-action-modal v-model:visible="visible" :type="modalType" :edit-data="editData" />
+		</n-card>
+	</div>
 </template>
 
 <script setup lang="tsx">
@@ -47,153 +47,139 @@ const { bool: visible, setTrue: openModal } = useBoolean();
 
 const tableData = ref<UserManagement.User[]>([]);
 function setTableData(data: UserManagement.User[]) {
-  tableData.value = data;
+	tableData.value = data;
 }
 
 async function getTableData() {
-  startLoading();
-  const { data } = await fetchUserList();
-  if (data) {
-    setTimeout(() => {
-      setTableData(data);
-      endLoading();
-    }, 1000);
-  }
+	startLoading();
+	const { data } = await fetchUserList();
+	if (data) {
+		setTimeout(() => {
+			setTableData(data);
+			endLoading();
+		}, 1000);
+	}
 }
 
 const columns: Ref<DataTableColumns<UserManagement.User>> = ref([
-  {
-    type: 'selection',
-    align: 'center'
-  },
-  {
-    key: 'index',
-    title: '序号',
-    align: 'center'
-  },
-  {
-    key: 'userName',
-    title: '用户名',
-    align: 'center'
-  },
-  {
-    key: 'age',
-    title: '用户年龄',
-    align: 'center'
-  },
-  {
-    key: 'gender',
-    title: '性别',
-    align: 'center',
-    render: row => {
-      if (row.gender) {
-        const tagTypes: Record<UserManagement.GenderKey, NaiveUI.ThemeColor> = {
-          '0': 'success',
-          '1': 'warning'
-        };
-
-        return <NTag type={tagTypes[row.gender]}>{genderLabels[row.gender]}</NTag>;
-      }
-
-      return <span></span>;
-    }
-  },
-  {
-    key: 'phone',
-    title: '手机号码',
-    align: 'center'
-  },
-  {
-    key: 'email',
-    title: '邮箱',
-    align: 'center'
-  },
-  {
-    key: 'userStatus',
-    title: '状态',
-    align: 'center',
-    render: row => {
-      if (row.userStatus) {
-        const tagTypes: Record<UserManagement.UserStatusKey, NaiveUI.ThemeColor> = {
-          '1': 'success',
-          '2': 'error',
-          '3': 'warning',
-          '4': 'default'
-        };
-
-        return <NTag type={tagTypes[row.userStatus]}>{userStatusLabels[row.userStatus]}</NTag>;
-      }
-      return <span></span>;
-    }
-  },
-  {
-    key: 'actions',
-    title: '操作',
-    align: 'center',
-    render: row => {
-      return (
-        <NSpace justify={'center'}>
-          <NButton size={'small'} onClick={() => handleEditTable(row.id)}>
-            编辑
-          </NButton>
-          <NPopconfirm onPositiveClick={() => handleDeleteTable(row.id)}>
-            {{
-              default: () => '确认删除',
-              trigger: () => <NButton size={'small'}>删除</NButton>
-            }}
-          </NPopconfirm>
-        </NSpace>
-      );
-    }
-  }
+	{
+		type: 'selection',
+		align: 'center',
+	},
+	{
+		key: 'id',
+		title: "ID",
+		align: 'center'
+	},
+	{
+		key: 'name',
+		title: '学科名称',
+		align: 'center'
+	},
+	{
+		key: 'description',
+		title: '学科描述',
+		align: 'center'
+	},
+	{
+		key: 'createTime',
+		title: '创建时间',
+		align: 'center'
+	},
+	{
+		key: 'modifyTime',
+		title: '修改时间',
+		align: 'center'
+	},
+	{
+		key: 'createUid',
+		title: '创建用户ID',
+		align: 'center'
+	},
+	{
+		key: 'disabled',
+		title: '状态',
+		align: 'center',
+		render: row => {
+			if (row.disabled) {
+				const tagTypes: Record<UserManagement.UserStatusKey, NaiveUI.ThemeColor> = {
+					'Y': 'success',
+					'N': 'error',
+				};
+
+				return <NTag type={tagTypes[row.disabled]}>{userStatusLabels[row.disabled]}</NTag>;
+			}
+			return <span></span>;
+		}
+	},
+	{
+		key: 'actions',
+		title: '操作',
+		align: 'center',
+		render: row => {
+			return (
+				<NSpace justify={'center'}>
+					<NButton size={'small'} onClick={() => handleEditTable(row.id)}>
+						编辑
+					</NButton>
+					<NPopconfirm onPositiveClick={() => handleDeleteTable(row.id)}>
+						{{
+							default: () => '确认删除',
+							trigger: () => <NButton size={'small'}>删除</NButton>
+						}}
+					</NPopconfirm>
+				</NSpace>
+			);
+		}
+	}
 ]) as Ref<DataTableColumns<UserManagement.User>>;
 
 const modalType = ref<ModalType>('add');
 
 function setModalType(type: ModalType) {
-  modalType.value = type;
+	modalType.value = type;
 }
 
 const editData = ref<UserManagement.User | null>(null);
 
 function setEditData(data: UserManagement.User | null) {
-  editData.value = data;
+	editData.value = data;
 }
 
 function handleAddTable() {
-  openModal();
-  setModalType('add');
+	openModal();
+	setModalType('add');
 }
 
 function handleEditTable(rowId: string) {
-  const findItem = tableData.value.find(item => item.id === rowId);
-  if (findItem) {
-    setEditData(findItem);
-  }
-  setModalType('edit');
-  openModal();
+	const findItem = tableData.value.find(item => item.id === rowId);
+	if (findItem) {
+		setEditData(findItem);
+	}
+	setModalType('edit');
+	openModal();
 }
 
 function handleDeleteTable(rowId: string) {
-  window.$message?.info(`点击了删除，rowId为${rowId}`);
+	window.$message?.info(`点击了删除，rowId为${rowId}`);
 }
 
 const pagination: PaginationProps = reactive({
-  page: 1,
-  pageSize: 10,
-  showSizePicker: true,
-  pageSizes: [10, 15, 20, 25, 30],
-  onChange: (page: number) => {
-    pagination.page = page;
-  },
-  onUpdatePageSize: (pageSize: number) => {
-    pagination.pageSize = pageSize;
-    pagination.page = 1;
-  }
+	page: 1,
+	pageSize: 10,
+	showSizePicker: true,
+	pageSizes: [10, 15, 20, 25, 30],
+	onChange: (page: number) => {
+		pagination.page = page;
+	},
+	onUpdatePageSize: (pageSize: number) => {
+		pagination.pageSize = pageSize;
+		pagination.page = 1;
+	}
 });
 
 function init() {
-  getTableData();
+	getTableData();
 }
 
 // 初始化