From 8a170eeebd8c3f624316e8fb51cdd77ab45b6439 Mon Sep 17 00:00:00 2001
From: Soybean <soybeanjs@outlook.com>
Date: Sun, 28 Jan 2024 16:24:43 +0800
Subject: [PATCH] feat(projects): page manage_user

---
 src/constants/business.ts                     |  14 ++
 src/hooks/common/form.ts                      |  78 +++----
 src/locales/langs/en-us.ts                    |  29 +++
 src/locales/langs/zh-cn.ts                    |  29 +++
 src/service/api/system-manage.ts              |  21 ++
 src/typings/api.d.ts                          |  51 ++++-
 src/typings/app.d.ts                          |  29 +++
 .../_builtin/login/modules/pwd-login.vue      |  15 +-
 src/views/manage/user/index.vue               | 214 +++++++++++++++++-
 .../user/modules/user-operate-drawer.vue      | 177 +++++++++++++++
 src/views/manage/user/modules/user-search.vue |  98 ++++++++
 11 files changed, 703 insertions(+), 52 deletions(-)
 create mode 100644 src/views/manage/user/modules/user-operate-drawer.vue
 create mode 100644 src/views/manage/user/modules/user-search.vue

diff --git a/src/constants/business.ts b/src/constants/business.ts
index e14aa1f5..63b7a96f 100644
--- a/src/constants/business.ts
+++ b/src/constants/business.ts
@@ -6,3 +6,17 @@ export const roleStatusRecord: Record<Api.SystemManage.RoleStatus, App.I18n.I18n
 };
 
 export const roleStatusOptions = transformRecordToOption(roleStatusRecord);
+
+export const userGenderRecord: Record<Api.SystemManage.UserGender, App.I18n.I18nKey> = {
+  '1': 'page.manage.user.gender.male',
+  '2': 'page.manage.user.gender.female'
+};
+
+export const userGenderOptions = transformRecordToOption(userGenderRecord);
+
+export const userStatusRecord: Record<Api.SystemManage.UserStatus, App.I18n.I18nKey> = {
+  '1': 'page.manage.user.status.enable',
+  '2': 'page.manage.user.status.disable'
+};
+
+export const userStatusOptions = transformRecordToOption(userStatusRecord);
diff --git a/src/hooks/common/form.ts b/src/hooks/common/form.ts
index eeac4847..68d40cc0 100644
--- a/src/hooks/common/form.ts
+++ b/src/hooks/common/form.ts
@@ -4,47 +4,40 @@ import { REG_CODE_SIX, REG_EMAIL, REG_PHONE, REG_PWD, REG_USER_NAME } from '@/co
 import { $t } from '@/locales';
 
 export function useFormRules() {
-  const constantRules = {
-    userName: [
-      createRequiredRule($t('form.userName.required')),
-      {
-        pattern: REG_USER_NAME,
-        message: $t('form.userName.invalid'),
-        trigger: 'change'
-      }
-    ],
-    phone: [
-      createRequiredRule($t('form.phone.required')),
-      {
-        pattern: REG_PHONE,
-        message: $t('form.phone.invalid'),
-        trigger: 'change'
-      }
-    ],
-    pwd: [
-      createRequiredRule($t('form.pwd.required')),
-      {
-        pattern: REG_PWD,
-        message: $t('form.pwd.invalid'),
-        trigger: 'change'
-      }
-    ],
-    code: [
-      createRequiredRule($t('form.code.required')),
-      {
-        pattern: REG_CODE_SIX,
-        message: $t('form.code.invalid'),
-        trigger: 'change'
-      }
-    ],
-    email: [
-      createRequiredRule($t('form.email.required')),
-      {
-        pattern: REG_EMAIL,
-        message: $t('form.email.invalid'),
-        trigger: 'change'
-      }
-    ]
+  const patternRules = {
+    userName: {
+      pattern: REG_USER_NAME,
+      message: $t('form.userName.invalid'),
+      trigger: 'change'
+    },
+    phone: {
+      pattern: REG_PHONE,
+      message: $t('form.phone.invalid'),
+      trigger: 'change'
+    },
+    pwd: {
+      pattern: REG_PWD,
+      message: $t('form.pwd.invalid'),
+      trigger: 'change'
+    },
+    code: {
+      pattern: REG_CODE_SIX,
+      message: $t('form.code.invalid'),
+      trigger: 'change'
+    },
+    email: {
+      pattern: REG_EMAIL,
+      message: $t('form.email.invalid'),
+      trigger: 'change'
+    }
+  } satisfies Record<string, App.Global.FormRule>;
+
+  const formRules = {
+    userName: [createRequiredRule($t('form.userName.required')), patternRules.userName],
+    phone: [createRequiredRule($t('form.phone.required')), patternRules.phone],
+    pwd: [createRequiredRule($t('form.pwd.required')), patternRules.pwd],
+    code: [createRequiredRule($t('form.code.required')), patternRules.code],
+    email: [createRequiredRule($t('form.email.required')), patternRules.email]
   } satisfies Record<string, App.Global.FormRule[]>;
 
   /** the default required rule */
@@ -58,7 +51,8 @@ export function useFormRules() {
   }
 
   return {
-    constantRules,
+    patternRules,
+    formRules,
     defaultRequiredRule,
     createRequiredRule
   };
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 0474c8b9..fa06df8e 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -271,6 +271,35 @@ const local: App.I18n.Schema = {
           enable: 'Enable',
           disable: 'Disable'
         }
+      },
+      user: {
+        title: 'User List',
+        form: {
+          userName: 'Please enter user name',
+          userGender: 'Please select gender',
+          nickName: 'Please enter nick name',
+          userPhone: 'Please enter phone number',
+          userEmail: 'Please enter email',
+          userStatus: 'Please select user status',
+          userRole: 'Please select user role'
+        },
+        userName: 'User Name',
+        userGender: 'Gender',
+        nickName: 'Nick Name',
+        userPhone: 'Phone Number',
+        userEmail: 'Email',
+        userStatus: 'User Status',
+        userRole: 'User Role',
+        addUser: 'Add User',
+        editUser: 'Edit User',
+        gender: {
+          male: 'Male',
+          female: 'Female'
+        },
+        status: {
+          enable: 'Enable',
+          disable: 'Disable'
+        }
       }
     }
   },
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 44381587..611f229d 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -271,6 +271,35 @@ const local: App.I18n.Schema = {
           enable: '启用',
           disable: '禁用'
         }
+      },
+      user: {
+        title: '用户列表',
+        form: {
+          userName: '请输入用户名',
+          userGender: '请选择性别',
+          nickName: '请输入昵称',
+          userPhone: '请输入手机号',
+          userEmail: '请输入邮箱',
+          userStatus: '请选择用户状态',
+          userRole: '请选择用户角色'
+        },
+        userName: '用户名',
+        userGender: '性别',
+        nickName: '昵称',
+        userPhone: '手机号',
+        userEmail: '邮箱',
+        userStatus: '用户状态',
+        userRole: '用户角色',
+        addUser: '新增用户',
+        editUser: '编辑用户',
+        gender: {
+          male: '男',
+          female: '女'
+        },
+        status: {
+          enable: '启用',
+          disable: '禁用'
+        }
       }
     }
   },
diff --git a/src/service/api/system-manage.ts b/src/service/api/system-manage.ts
index daab6ab8..50fa3243 100644
--- a/src/service/api/system-manage.ts
+++ b/src/service/api/system-manage.ts
@@ -8,3 +8,24 @@ export function fetchGetRoleList(params?: Api.SystemManage.RoleSearchParams) {
     params
   });
 }
+
+/**
+ * get all roles
+ *
+ * these roles are all enabled
+ */
+export function fetchGetAllRoles() {
+  return request<Api.SystemManage.AllRole[]>({
+    url: '/systemManage/getAllRoles',
+    method: 'get'
+  });
+}
+
+/** get user list */
+export function fetchGetUserList(params?: Api.SystemManage.UserSearchParams) {
+  return request<Api.SystemManage.UserList>({
+    url: '/systemManage/getUserList',
+    method: 'get',
+    params
+  });
+}
diff --git a/src/typings/api.d.ts b/src/typings/api.d.ts
index 965374c3..9e6c8c7a 100644
--- a/src/typings/api.d.ts
+++ b/src/typings/api.d.ts
@@ -77,6 +77,8 @@ declare namespace Api {
    * backend api module: "systemManage"
    */
   namespace SystemManage {
+    type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'current' | 'size'>;
+
     /**
      * role status
      *
@@ -99,11 +101,56 @@ declare namespace Api {
 
     /** role search params */
     type RoleSearchParams = CommonType.RecordNullable<
-      Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'roleStatus'> &
-        Pick<Common.PaginatingCommonParams, 'current' | 'size'>
+      Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'roleStatus'> & CommonSearchParams
     >;
 
     /** role list */
     type RoleList = Common.PaginatingQueryRecord<Role>;
+
+    /** all role */
+    type AllRole = Pick<Role, 'id' | 'roleName' | 'roleCode'>;
+
+    /**
+     * user gender
+     *
+     * - "1": "male"
+     * - "2": "female"
+     */
+    type UserGender = '1' | '2';
+
+    /**
+     * user status
+     *
+     * - "1": enabled
+     * - "2": disabled
+     */
+    type UserStatus = '1' | '2';
+
+    /** user */
+    type User = Common.CommonRecord<{
+      /** user name */
+      userName: string;
+      /** user gender */
+      userGender: UserGender | null;
+      /** user nick name */
+      nickName: string;
+      /** user phone */
+      userPhone: string;
+      /** user email */
+      userEmail: string;
+      /** user role code collection */
+      userRoles: string[];
+      /** user status */
+      userStatus: UserStatus | null;
+    }>;
+
+    /** user search params */
+    type UserSearchParams = CommonType.RecordNullable<
+      Pick<Api.SystemManage.User, 'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userStatus'> &
+        CommonSearchParams
+    >;
+
+    /** user list */
+    type UserList = Common.PaginatingQueryRecord<User>;
   }
 }
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
index 03a3b2c0..95bc1516 100644
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -459,6 +459,35 @@ declare namespace App {
               disable: string;
             };
           };
+          user: {
+            title: string;
+            form: {
+              userName: string;
+              userGender: string;
+              nickName: string;
+              userPhone: string;
+              userEmail: string;
+              userStatus: string;
+              userRole: string;
+            };
+            userName: string;
+            userGender: string;
+            nickName: string;
+            userPhone: string;
+            userEmail: string;
+            userStatus: string;
+            userRole: string;
+            addUser: string;
+            editUser: string;
+            gender: {
+              male: string;
+              female: string;
+            };
+            status: {
+              enable: string;
+              disable: string;
+            };
+          };
         };
       };
       form: {
diff --git a/src/views/_builtin/login/modules/pwd-login.vue b/src/views/_builtin/login/modules/pwd-login.vue
index a5a0f90f..9bd498e2 100644
--- a/src/views/_builtin/login/modules/pwd-login.vue
+++ b/src/views/_builtin/login/modules/pwd-login.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { computed, reactive } from 'vue';
 import { $t } from '@/locales';
 import { loginModuleRecord } from '@/constants/app';
 import { useRouterPush } from '@/hooks/common/router';
@@ -13,7 +13,6 @@ defineOptions({
 const authStore = useAuthStore();
 const { toggleLoginModule } = useRouterPush();
 const { formRef, validate } = useNaiveForm();
-const { constantRules } = useFormRules();
 
 interface FormModel {
   userName: string;
@@ -25,10 +24,14 @@ const model: FormModel = reactive({
   password: '123456'
 });
 
-const rules: Record<keyof FormModel, App.Global.FormRule[]> = {
-  userName: constantRules.userName,
-  password: constantRules.pwd
-};
+const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
+  const { formRules } = useFormRules(); // inside computed to make locale reactive
+
+  return {
+    userName: formRules.userName,
+    password: formRules.pwd
+  };
+});
 
 async function handleSubmit() {
   await validate();
diff --git a/src/views/manage/user/index.vue b/src/views/manage/user/index.vue
index 2a654c50..48d124c9 100644
--- a/src/views/manage/user/index.vue
+++ b/src/views/manage/user/index.vue
@@ -1,7 +1,217 @@
-<script setup lang="ts"></script>
+<script setup lang="tsx">
+import { ref } from 'vue';
+import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import { useBoolean } from '@sa/hooks';
+import { fetchGetUserList } from '@/service/api';
+import { useAppStore } from '@/store/modules/app';
+import { useTable } from '@/hooks/common/table';
+import { $t } from '@/locales';
+import { userGenderRecord, userStatusRecord } from '@/constants/business';
+import UserOperateDrawer, { type OperateType } from './modules/user-operate-drawer.vue';
+import UserSearch from './modules/user-search.vue';
+
+const appStore = useAppStore();
+const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
+
+const { columns, filteredColumns, data, loading, pagination, getData, searchParams, resetSearchParams } = useTable<
+  Api.SystemManage.User,
+  typeof fetchGetUserList,
+  'index' | 'operate'
+>({
+  apiFn: fetchGetUserList,
+  apiParams: {
+    current: 1,
+    size: 10,
+    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
+    // the value can not be undefined, otherwise the property in Form will not be reactive
+    userName: null,
+    userGender: null,
+    nickName: null,
+    userPhone: null,
+    userEmail: null,
+    userStatus: null
+  },
+  transformer: res => {
+    const { records = [], current = 1, size = 10, total = 0 } = res.data || {};
+
+    return {
+      data: records,
+      pageNum: current,
+      pageSize: size,
+      total
+    };
+  },
+  columns: () => [
+    {
+      type: 'selection',
+      align: 'center',
+      width: 48
+    },
+    {
+      key: 'index',
+      title: $t('common.index'),
+      render: (_, index): string => getIndex(index),
+      width: 64,
+      align: 'center'
+    },
+    {
+      key: 'userName',
+      title: $t('page.manage.user.userName'),
+      align: 'center'
+    },
+    {
+      key: 'userGender',
+      title: $t('page.manage.user.userGender'),
+      align: 'center',
+      render: row => {
+        if (row.userGender === null) {
+          return null;
+        }
+
+        const tagMap: Record<Api.SystemManage.UserGender, NaiveUI.ThemeColor> = {
+          1: 'primary',
+          2: 'error'
+        };
+
+        const label = $t(userGenderRecord[row.userGender]);
+
+        return <NTag type={tagMap[row.userGender]}>{label}</NTag>;
+      }
+    },
+    {
+      key: 'nickName',
+      title: $t('page.manage.user.nickName')
+    },
+    {
+      key: 'userPhone',
+      title: $t('page.manage.user.userPhone')
+    },
+    {
+      key: 'userEmail',
+      title: $t('page.manage.user.userEmail')
+    },
+    {
+      key: 'userStatus',
+      title: $t('page.manage.user.userStatus'),
+      align: 'center',
+      render: row => {
+        if (row.userStatus === null) {
+          return null;
+        }
+
+        const tagMap: Record<Api.SystemManage.UserStatus, NaiveUI.ThemeColor> = {
+          1: 'success',
+          2: 'warning'
+        };
+
+        const label = $t(userStatusRecord[row.userStatus]);
+
+        return <NTag type={tagMap[row.userStatus]}>{label}</NTag>;
+      }
+    },
+    {
+      key: 'operate',
+      title: $t('common.operate'),
+      align: 'center',
+      width: 130,
+      render: row => (
+        <div class="flex-center gap-8px">
+          <NButton type="primary" ghost size="small" onClick={() => handleEdit(row.id)}>
+            {$t('common.edit')}
+          </NButton>
+          <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
+            {{
+              default: () => $t('common.confirmDelete'),
+              trigger: () => (
+                <NButton type="error" ghost size="small">
+                  {$t('common.delete')}
+                </NButton>
+              )
+            }}
+          </NPopconfirm>
+        </div>
+      )
+    }
+  ]
+});
+
+const operateType = ref<OperateType>('add');
+
+function handleAdd() {
+  operateType.value = 'add';
+  openDrawer();
+}
+
+const checkedRowKeys = ref<string[]>([]);
+
+async function handleBatchDelete() {
+  // request
+  console.log(checkedRowKeys.value);
+  window.$message?.success($t('common.deleteSuccess'));
+
+  checkedRowKeys.value = [];
+
+  getData();
+}
+
+/** the editing row data */
+const editingData = ref<Api.SystemManage.User | null>(null);
+
+function handleEdit(id: number) {
+  operateType.value = 'edit';
+  editingData.value = data.value.find(item => item.id === id) || null;
+  openDrawer();
+}
+
+async function handleDelete(id: number) {
+  // request
+  console.log(id);
+  window.$message?.success($t('common.deleteSuccess'));
+
+  getData();
+}
+
+function getIndex(index: number) {
+  const { page = 0, pageSize = 10 } = pagination;
+
+  return String((page - 1) * pageSize + index + 1);
+}
+</script>
 
 <template>
-  <LookForward />
+  <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
+    <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
+    <NCard :title="$t('page.manage.role.title')" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
+      <template #header-extra>
+        <TableHeaderOperation
+          v-model:columns="filteredColumns"
+          :disabled-delete="checkedRowKeys.length === 0"
+          :loading="loading"
+          @add="handleAdd"
+          @delete="handleBatchDelete"
+          @refresh="getData"
+        />
+      </template>
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys"
+        :columns="columns"
+        :data="data"
+        size="small"
+        :flex-height="!appStore.isMobile"
+        :scroll-x="640"
+        :loading="loading"
+        :pagination="pagination"
+        :row-key="item => item.id"
+        class="sm:h-full"
+      />
+      <UserOperateDrawer
+        v-model:visible="drawerVisible"
+        :operate-type="operateType"
+        :row-data="editingData"
+        @submitted="getData"
+      />
+    </NCard>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/views/manage/user/modules/user-operate-drawer.vue b/src/views/manage/user/modules/user-operate-drawer.vue
new file mode 100644
index 00000000..2fb2de97
--- /dev/null
+++ b/src/views/manage/user/modules/user-operate-drawer.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { fetchGetAllRoles } from '@/service/api';
+import { $t } from '@/locales';
+import { userGenderOptions, userStatusOptions } from '@/constants/business';
+
+defineOptions({
+  name: 'UserOperateDrawer'
+});
+
+/**
+ * the type of operation
+ *
+ * - add: add user
+ * - edit: edit user
+ */
+export type OperateType = 'add' | 'edit';
+
+interface Props {
+  /** the type of operation */
+  operateType: OperateType;
+  /** the edit row data */
+  rowData?: Api.SystemManage.User | null;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { defaultRequiredRule } = useFormRules();
+
+const title = computed(() => {
+  const titles: Record<OperateType, string> = {
+    add: $t('page.manage.user.addUser'),
+    edit: $t('page.manage.user.editUser')
+  };
+  return titles[props.operateType];
+});
+
+type Model = Pick<
+  Api.SystemManage.User,
+  'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userRoles' | 'userStatus'
+>;
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    userName: '',
+    userGender: null,
+    nickName: '',
+    userPhone: '',
+    userEmail: '',
+    userRoles: [],
+    userStatus: null
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'userName' | 'userStatus'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  userName: defaultRequiredRule,
+  userStatus: defaultRequiredRule
+};
+
+/** the enabled role options */
+const roleOptions = ref<CommonType.Option<string>[]>([]);
+
+async function getRoleOptions() {
+  const { error, data } = await fetchGetAllRoles();
+
+  if (!error) {
+    const options = data.map(item => ({
+      label: item.roleName,
+      value: item.roleCode
+    }));
+
+    // the mock data does not have the roleCode, so fill it
+    // if the real request, remove the following code
+    const userRoleOptions = model.userRoles.map(item => ({
+      label: item,
+      value: item
+    }));
+    // end
+
+    roleOptions.value = [...userRoleOptions, ...options];
+  }
+}
+
+function handleUpdateModelWhenEdit() {
+  if (props.operateType === 'add') {
+    Object.assign(model, createDefaultModel());
+    return;
+  }
+
+  if (props.operateType === 'edit' && props.rowData) {
+    Object.assign(model, props.rowData);
+  }
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+  // request
+  window.$message?.success($t('common.updateSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModelWhenEdit();
+    restoreValidation();
+    getRoleOptions();
+  }
+});
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="360">
+    <NDrawerContent :title="title" :native-scrollbar="false" closable>
+      <NForm ref="formRef" :model="model" :rules="rules">
+        <NFormItem :label="$t('page.manage.user.userName')" path="userName">
+          <NInput v-model:value="model.userName" :placeholder="$t('page.manage.user.form.userName')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.userGender')" path="userGender">
+          <NRadioGroup v-model:value="model.userGender">
+            <NRadio v-for="item in userGenderOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.nickName')" path="nickName">
+          <NInput v-model:value="model.nickName" :placeholder="$t('page.manage.user.form.nickName')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.userPhone')" path="userPhone">
+          <NInput v-model:value="model.userPhone" :placeholder="$t('page.manage.user.form.userPhone')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.userEmail')" path="email">
+          <NInput v-model:value="model.userEmail" :placeholder="$t('page.manage.user.form.userEmail')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.userStatus')" path="userStatus">
+          <NRadioGroup v-model:value="model.userStatus">
+            <NRadio v-for="item in userStatusOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.userRole')" path="roles">
+          <NSelect
+            v-model:value="model.userRoles"
+            multiple
+            :options="roleOptions"
+            :placeholder="$t('page.manage.user.form.userRole')"
+          />
+        </NFormItem>
+      </NForm>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped></style>
diff --git a/src/views/manage/user/modules/user-search.vue b/src/views/manage/user/modules/user-search.vue
new file mode 100644
index 00000000..58061d96
--- /dev/null
+++ b/src/views/manage/user/modules/user-search.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { $t } from '@/locales';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { userGenderOptions, userStatusOptions } from '@/constants/business';
+import { translateOptions } from '@/utils/common';
+
+defineOptions({
+  name: 'UserSearch'
+});
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+
+const model = defineModel<Api.SystemManage.UserSearchParams>('model', { required: true });
+
+type RuleKey = Extract<keyof Api.SystemManage.UserSearchParams, 'userEmail' | 'userPhone'>;
+
+const rules = computed<Record<RuleKey, App.Global.FormRule>>(() => {
+  const { patternRules } = useFormRules(); // inside computed to make locale reactive
+
+  return {
+    userEmail: patternRules.email,
+    userPhone: patternRules.phone
+  };
+});
+
+async function reset() {
+  await restoreValidation();
+  emit('reset');
+}
+
+async function search() {
+  await validate();
+  emit('search');
+}
+</script>
+
+<template>
+  <NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper">
+    <NForm ref="formRef" :model="model" :rules="rules" label-placement="left">
+      <NGrid responsive="screen" item-responsive>
+        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userName')" path="userName" class="pr-24px">
+          <NInput v-model:value="model.userName" :placeholder="$t('page.manage.user.form.userName')" />
+        </NFormItemGi>
+        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userGender')" path="userGender" class="pr-24px">
+          <NSelect
+            v-model:value="model.userGender"
+            :placeholder="$t('page.manage.user.form.userGender')"
+            :options="translateOptions(userGenderOptions)"
+            clearable
+          />
+        </NFormItemGi>
+        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.nickName')" path="nickName" class="pr-24px">
+          <NInput v-model:value="model.nickName" :placeholder="$t('page.manage.user.form.nickName')" />
+        </NFormItemGi>
+        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userPhone')" path="userPhone" class="pr-24px">
+          <NInput v-model:value="model.userPhone" :placeholder="$t('page.manage.user.form.userPhone')" />
+        </NFormItemGi>
+        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userEmail')" path="userEmail" class="pr-24px">
+          <NInput v-model:value="model.userEmail" :placeholder="$t('page.manage.user.form.userEmail')" />
+        </NFormItemGi>
+        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userStatus')" path="userStatus" class="pr-24px">
+          <NSelect
+            v-model:value="model.userStatus"
+            :placeholder="$t('page.manage.user.form.userStatus')"
+            :options="translateOptions(userStatusOptions)"
+            clearable
+          />
+        </NFormItemGi>
+        <NFormItemGi span="24 s:12" class="pr-24px">
+          <NSpace class="w-full" justify="end">
+            <NButton @click="reset">
+              <template #icon>
+                <icon-ic-round-refresh class="text-icon" />
+              </template>
+              {{ $t('common.reset') }}
+            </NButton>
+            <NButton type="primary" ghost @click="search">
+              <template #icon>
+                <icon-ic-round-search class="text-icon" />
+              </template>
+              {{ $t('common.search') }}
+            </NButton>
+          </NSpace>
+        </NFormItemGi>
+      </NGrid>
+    </NForm>
+  </NCard>
+</template>
+
+<style scoped></style>