feat(projects): add alova examples (#647)

* feat: optimistic subpackage `@sa/alova`

* feat: add alova examples

src/views/alova/request/index.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import { fetchCustomBackendError } from '@/serviceAlova/api';
+
+async function logout() {
+  await fetchCustomBackendError('8888', $t('request.logoutMsg'));
+}
+
+async function logoutWithModal() {
+  await fetchCustomBackendError('7777', $t('request.logoutWithModalMsg'));
+}
+
+async function refreshToken() {
+  await fetchCustomBackendError('9999', $t('request.tokenExpired'));
+}
+
+async function handleRepeatedMessageError() {
+  await Promise.all([
+    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
+    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
+    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
+    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2')),
+    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2')),
+    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2'))
+  ]);
+}
+
+async function handleRepeatedModalError() {
+  await Promise.all([
+    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg')),
+    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg')),
+    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg'))
+  ]);
+}
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <NCard :title="$t('request.logout')" :bordered="false" size="small" segmented class="card-wrapper">
+      <NButton @click="logout">{{ $t('common.trigger') }}</NButton>
+    </NCard>
+    <NCard :title="$t('request.logoutWithModal')" :bordered="false" size="small" segmented class="card-wrapper">
+      <NButton @click="logoutWithModal">{{ $t('common.trigger') }}</NButton>
+    </NCard>
+    <NCard :title="$t('request.refreshToken')" :bordered="false" size="small" segmented class="card-wrapper">
+      <NButton @click="refreshToken">{{ $t('common.trigger') }}</NButton>
+    </NCard>
+    <NCard
+      :title="$t('page.function.request.repeatedErrorOccurOnce')"
+      :bordered="false"
+      size="small"
+      segmented
+      class="card-wrapper"
+    >
+      <NButton @click="handleRepeatedMessageError">{{ $t('page.function.request.repeatedError') }}(Message)</NButton>
+      <NButton class="ml-12px" @click="handleRepeatedModalError">
+        {{ $t('page.function.request.repeatedError') }}(Modal)
+      </NButton>
+    </NCard>
+  </NSpace>
+</template>
+
+<style scoped></style>

src/views/alova/scenes/index.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import CaptchaVerification from './modules/captcha-verification.vue';
+import BrowserVisibilityRequest from './modules/browser-visibility-request.vue';
+import PollingRequest from './modules/polling-request.vue';
+import NetworkToggleRequest from './modules/network-toggle-request.vue';
+import CrossComponentRequest from './modules/cross-component-request.vue';
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <NCard :title="$t('page.alova.scenes.captchaSend')" :bordered="false" size="small" segmented class="card-wrapper">
+      <CaptchaVerification class="w-1/3" />
+    </NCard>
+    <NCard :title="$t('page.alova.scenes.autoRequest')" :bordered="false" size="small" segmented class="card-wrapper">
+      <NSpace :wrap="false">
+        <BrowserVisibilityRequest />
+        <PollingRequest />
+        <NetworkToggleRequest />
+      </NSpace>
+    </NCard>
+    <NCard
+      :title="$t('page.alova.scenes.requestCrossComponent')"
+      :bordered="false"
+      size="small"
+      segmented
+      class="card-wrapper"
+    >
+      <CrossComponentRequest />
+    </NCard>
+  </NSpace>
+</template>
+
+<style scoped></style>

src/views/alova/scenes/modules/browser-visibility-request.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { actionDelegationMiddleware, useAutoRequest } from '@sa/alova/client';
+import { ref } from 'vue';
+import { alova } from '@/serviceAlova/request';
+
+const getLastTime = alova.Get<{ time: string }>('/mock/getLastTime', { cacheFor: null });
+const isStop = ref(false);
+const { loading, data } = useAutoRequest(getLastTime, {
+  enableVisibility: true,
+  enableNetwork: false,
+  enableFocus: false,
+  initialData: {
+    time: ''
+  },
+  async middleware(_, next) {
+    await actionDelegationMiddleware('autoRequest:1')(_, () => Promise.resolve());
+    if (!isStop.value) {
+      next();
+    }
+  }
+});
+
+const toggleStop = () => {
+  isStop.value = !isStop.value;
+};
+</script>
+
+<template>
+  <NSpace vertical>
+    <NAlert type="info">
+      {{ $t('page.alova.scenes.visibilityRequestTips') }}
+    </NAlert>
+    <NButton type="primary" @click="toggleStop">
+      <icon-carbon-play v-if="isStop" class="mr-2" />
+      <icon-carbon-stop v-else class="mr-2" />
+      {{ isStop ? $t('page.alova.scenes.startRequest') : $t('page.alova.scenes.stopRequest') }}
+    </NButton>
+    <NSpace align="center">
+      <span>{{ $t('page.alova.scenes.refreshTime') }}: {{ data.time || '--' }}</span>
+      <NSpin v-if="loading" :size="12" />
+    </NSpace>
+  </NSpace>
+</template>

src/views/alova/scenes/modules/captcha-verification.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { actionDelegationMiddleware, useCaptcha, useForm } from '@sa/alova/client';
+import { $t } from '@/locales';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { sendCaptcha, verifyCaptcha } from '@/serviceAlova/api';
+
+defineOptions({
+  name: 'CaptchaVerification'
+});
+
+const { loading, send, countdown } = useCaptcha(sendCaptcha, {
+  middleware: actionDelegationMiddleware('captcha:send')
+});
+const label = computed(() => {
+  return countdown.value > 0
+    ? $t('page.login.codeLogin.reGetCode', { time: countdown.value })
+    : $t('page.login.codeLogin.getCode');
+});
+const {
+  form,
+  loading: submiting,
+  send: submit
+} = useForm(formData => verifyCaptcha(formData.phone, formData.code), {
+  initialForm: {
+    phone: '',
+    code: ''
+  }
+});
+
+const { formRef, validate } = useNaiveForm();
+
+const rules = computed<Record<keyof typeof form.value, App.Global.FormRule[]>>(() => {
+  const { formRules } = useFormRules();
+
+  return {
+    phone: formRules.phone,
+    code: formRules.code
+  };
+});
+
+async function handleSubmit() {
+  await validate();
+  await submit();
+  // request
+  window.$message?.success($t('page.login.common.validateSuccess'));
+}
+</script>
+
+<template>
+  <NForm ref="formRef" :model="form" :rules="rules" size="large" :show-label="false" @keyup.enter="handleSubmit">
+    <NFormItem path="phone">
+      <NInput v-model:value="form.phone" :placeholder="$t('page.login.common.phonePlaceholder')" :maxlength="11" />
+    </NFormItem>
+    <NFormItem path="code">
+      <div class="w-full flex-y-center gap-16px">
+        <NInput v-model:value="form.code" :placeholder="$t('page.login.common.codePlaceholder')" />
+        <NButton size="large" :disabled="countdown > 0" :loading="loading" @click="send(form.phone)">
+          {{ label }}
+        </NButton>
+      </div>
+    </NFormItem>
+    <NSpace vertical :size="18" class="w-full">
+      <NButton type="primary" size="large" round block :loading="submiting" @click="handleSubmit">
+        {{ $t('common.confirm') }}
+      </NButton>
+    </NSpace>
+  </NForm>
+</template>
+
+<style scoped></style>

src/views/alova/scenes/modules/cross-component-request.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { accessAction } from '@sa/alova/client';
+
+const handleAutoRequestSend = async () => {
+  accessAction(/^autoRequest/, async ({ send }) => {
+    await send();
+  });
+};
+</script>
+
+<template>
+  <NButton @click="handleAutoRequestSend">{{ $t('page.alova.scenes.triggerAllRequest') }}</NButton>
+</template>

src/views/alova/scenes/modules/network-toggle-request.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { actionDelegationMiddleware, useAutoRequest } from '@sa/alova/client';
+import { ref } from 'vue';
+import { alova } from '@/serviceAlova/request';
+
+const getLastTime = alova.Get<{ time: string }>('/mock/getLastTime', { cacheFor: null });
+const isStop = ref(false);
+const { loading, data } = useAutoRequest(getLastTime, {
+  enableVisibility: false,
+  enableNetwork: true,
+  enableFocus: false,
+  initialData: {
+    time: ''
+  },
+  async middleware(_, next) {
+    await actionDelegationMiddleware('autoRequest:2')(_, () => Promise.resolve());
+    if (!isStop.value) {
+      next();
+    }
+  }
+});
+
+const toggleStop = () => {
+  isStop.value = !isStop.value;
+};
+</script>
+
+<template>
+  <NSpace vertical>
+    <NAlert type="info">
+      {{ $t('page.alova.scenes.networkRequestTips') }}
+    </NAlert>
+    <NButton type="primary" @click="toggleStop">
+      <icon-carbon-play v-if="isStop" class="mr-2" />
+      <icon-carbon-stop v-else class="mr-2" />
+      {{ isStop ? $t('page.alova.scenes.startRequest') : $t('page.alova.scenes.stopRequest') }}
+    </NButton>
+    <NSpace align="center">
+      <span>{{ $t('page.alova.scenes.refreshTime') }}: {{ data.time || '--' }}</span>
+      <NSpin v-if="loading" :size="12" />
+    </NSpace>
+  </NSpace>
+</template>

src/views/alova/scenes/modules/polling-request.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { actionDelegationMiddleware, useAutoRequest } from '@sa/alova/client';
+import { ref } from 'vue';
+import { alova } from '@/serviceAlova/request';
+
+const getLastTime = alova.Get<{ time: string }>('/mock/getLastTime', { cacheFor: null });
+const isStop = ref(false);
+const { loading, data } = useAutoRequest(getLastTime, {
+  pollingTime: 3000,
+  initialData: {
+    time: ''
+  },
+  async middleware(_, next) {
+    await actionDelegationMiddleware('autoRequest:3')(_, () => Promise.resolve());
+    if (!isStop.value) {
+      next();
+    }
+  }
+});
+
+const toggleStop = () => {
+  isStop.value = !isStop.value;
+};
+</script>
+
+<template>
+  <NSpace vertical>
+    <NAlert type="info">
+      {{ $t('page.alova.scenes.pollingRequestTips') }}
+    </NAlert>
+    <NButton type="primary" @click="toggleStop">
+      <icon-carbon-play v-if="isStop" class="mr-2" />
+      <icon-carbon-stop v-else class="mr-2" />
+      {{ isStop ? $t('page.alova.scenes.startRequest') : $t('page.alova.scenes.stopRequest') }}
+    </NButton>
+    <NSpace align="center">
+      <span>{{ $t('page.alova.scenes.refreshTime') }}: {{ data.time || '--' }}</span>
+      <NSpin v-if="loading" :size="12" />
+    </NSpace>
+  </NSpace>
+</template>

src/views/alova/user/hooks/use-checked-columns.ts

@@ -0,0 +1,78 @@
+import type { TableColumnCheck } from '@sa/hooks';
+import { computed, ref } from 'vue';
+import type { DataTableBaseColumn, DataTableColumn } from 'naive-ui';
+import { $t } from '@/locales';
+import type { AlovaGenerics, Method } from '~/packages/alova/src';
+
+function isTableColumnHasKey<T>(column: DataTableColumn<T>): column is DataTableBaseColumn<T> {
+  return Boolean((column as NaiveUI.TableColumnWithKey<T>).key);
+}
+
+type TableAlovaApiFn<T = any, R = Api.Common.CommonSearchParams> = (
+  params: R
+) => Method<AlovaGenerics<Api.Common.PaginatingQueryRecord<T>>>;
+
+// this hook is used to manage table columns
+// if you choose alova, you can move this hook to the `src/hooks` to handle all list page in your project
+export default function useCheckedColumns<A extends TableAlovaApiFn, T = Awaited<ReturnType<A>>['records'][number]>(
+  getColumns: () => DataTableColumn<T>[]
+) {
+  const SELECTION_KEY = '__selection__';
+
+  const EXPAND_KEY = '__expand__';
+
+  const getColumnChecks = (cols: DataTableColumn<T>[]) => {
+    const checks: NaiveUI.TableColumnCheck[] = [];
+    cols.forEach(column => {
+      if (isTableColumnHasKey(column)) {
+        checks.push({
+          key: column.key as string,
+          title: column.title as string,
+          checked: true
+        });
+      } else if (column.type === 'selection') {
+        checks.push({
+          key: SELECTION_KEY,
+          title: $t('common.check'),
+          checked: true
+        });
+      } else if (column.type === 'expand') {
+        checks.push({
+          key: EXPAND_KEY,
+          title: $t('common.expandColumn'),
+          checked: true
+        });
+      }
+    });
+
+    return checks;
+  };
+
+  const columnChecks = ref<TableColumnCheck[]>(getColumnChecks(getColumns()));
+
+  const columns = computed(() => {
+    const cols = getColumns();
+    const columnMap = new Map<string, DataTableColumn<T>>();
+
+    cols.forEach(column => {
+      if (isTableColumnHasKey(column)) {
+        columnMap.set(column.key as string, column);
+      } else if (column.type === 'selection') {
+        columnMap.set(SELECTION_KEY, column);
+      } else if (column.type === 'expand') {
+        columnMap.set(EXPAND_KEY, column);
+      }
+    });
+
+    const filteredColumns = columnChecks.value
+      .filter(item => item.checked)
+      .map(check => columnMap.get(check.key) as NaiveUI.TableColumn<T>);
+
+    return filteredColumns;
+  });
+
+  return {
+    columnChecks,
+    columns
+  };
+}

src/views/alova/user/hooks/use-table-operate.ts

@@ -0,0 +1,83 @@
+import { useBoolean } from '@sa/hooks';
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+import { jsonClone } from '@sa/utils';
+import { $t } from '@/locales';
+
+type TableData = NaiveUI.TableData;
+interface Operations<T> {
+  delete?: (row: T) => Promise<void>;
+  batchDelete?: (rows: T[]) => Promise<void>;
+}
+
+// this hook is used to handle the table operations
+// if you choose alova, you can move this hook to the `src/hooks` to handle all list page in your project
+export default function useTableOperate<T extends TableData = TableData>(data: Ref<T[]>, operations: Operations<T>) {
+  const { bool: drawerVisible, setTrue: openDrawer, setFalse: closeDrawer } = useBoolean();
+  const { bool: deleting, setTrue: deletify, setFalse: antiDelete } = useBoolean();
+  const { bool: batchDeleting, setTrue: batchDeletify, setFalse: antiBatchDelete } = useBoolean();
+
+  const operateType = ref<NaiveUI.TableOperateType>('add');
+
+  const getRowByDataId = (id: T['id']) => data.value.find(item => item.id === id) || null;
+
+  function handleAdd() {
+    operateType.value = 'add';
+    openDrawer();
+  }
+
+  /** the editing row data */
+  const editingData: Ref<T | null> = ref(null);
+
+  function handleEdit(id: T['id']) {
+    operateType.value = 'edit';
+    editingData.value = jsonClone(getRowByDataId(id));
+
+    openDrawer();
+  }
+
+  /** the checked row keys of table */
+  const checkedRowKeys = ref<T['id'][]>([]);
+
+  /** handler to batch delete rows */
+  async function handleBatchDelete() {
+    batchDeletify();
+    try {
+      const rows = checkedRowKeys.value.map(id => getRowByDataId(id)).filter(Boolean);
+      await operations.batchDelete?.(rows as T[]);
+      window.$message?.success($t('common.deleteSuccess'));
+      checkedRowKeys.value = [];
+    } finally {
+      antiBatchDelete();
+    }
+  }
+
+  /** handler to delete row */
+  async function handleDelete(id: T['id']) {
+    deletify();
+    const row = getRowByDataId(id);
+    if (!row) return;
+    try {
+      await operations.delete?.(row);
+      window.$message?.success($t('common.deleteSuccess'));
+      checkedRowKeys.value = [];
+    } finally {
+      antiDelete();
+    }
+  }
+
+  return {
+    drawerVisible,
+    openDrawer,
+    closeDrawer,
+    operateType,
+    handleAdd,
+    editingData,
+    handleEdit,
+    checkedRowKeys,
+    deleting,
+    handleDelete,
+    batchDeleting,
+    handleBatchDelete
+  };
+}

src/views/alova/user/index.vue

@@ -0,0 +1,226 @@
+<script setup lang="tsx">
+import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import { usePagination } from '@sa/alova/client';
+import { reactive } from 'vue';
+import { batchDeleteUser, deleteUser, fetchGetUserList } from '@/serviceAlova/api';
+import { $t } from '@/locales';
+import { useAppStore } from '@/store/modules/app';
+import { enableStatusRecord, userGenderRecord } from '@/constants/business';
+import useCheckedColumns from './hooks/use-checked-columns';
+import useTableOperate from './hooks/use-table-operate';
+import UserOperateDrawer from './modules/user-operate-drawer.vue';
+import UserSearch from './modules/user-search.vue';
+
+const appStore = useAppStore();
+
+const searchParams = reactive({
+  // 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
+  status: null,
+  userName: null,
+  userGender: null,
+  nickName: null,
+  userPhone: null,
+  userEmail: null
+});
+const { loading, data, refresh, reload, page, pageSize, pageCount, send, remove } = usePagination(
+  (pageNum, size) =>
+    fetchGetUserList({
+      ...searchParams,
+      current: pageNum,
+      size
+    }),
+  {
+    data: ({ records }) => records,
+    total: ({ total }) => total,
+
+    // trigger reload when states in `searchParams` changed
+    watchingStates: [searchParams],
+
+    // debounce of `searchParams`
+    debounce: [1000]
+  }
+);
+const getDataByPage = (newPage = 1) => {
+  page.value = newPage;
+  send();
+};
+
+const {
+  drawerVisible,
+  operateType,
+  editingData,
+  handleAdd,
+  handleEdit,
+  handleDelete,
+  handleBatchDelete,
+  checkedRowKeys,
+  deleting
+  // batchDeleting
+  // closeDrawer
+} = useTableOperate(data, {
+  async delete(row) {
+    await deleteUser(row.id);
+    remove(row);
+  },
+  async batchDelete(rows) {
+    await batchDeleteUser(rows.map(({ id }) => id));
+    remove(...rows);
+  }
+});
+
+function edit(id: number) {
+  handleEdit(id);
+}
+
+const { columnChecks, columns } = useCheckedColumns<typeof fetchGetUserList>(() => [
+  {
+    type: 'selection',
+    align: 'center',
+    width: 48
+  },
+  {
+    key: 'userName',
+    title: $t('page.manage.user.userName'),
+    align: 'center',
+    minWidth: 100
+  },
+  {
+    key: 'userGender',
+    title: $t('page.manage.user.userGender'),
+    align: 'center',
+    width: 100,
+    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'),
+    align: 'center',
+    minWidth: 100
+  },
+  {
+    key: 'userPhone',
+    title: $t('page.manage.user.userPhone'),
+    align: 'center',
+    width: 120
+  },
+  {
+    key: 'userEmail',
+    title: $t('page.manage.user.userEmail'),
+    align: 'center',
+    minWidth: 200
+  },
+  {
+    key: 'status',
+    title: $t('page.manage.user.userStatus'),
+    align: 'center',
+    width: 100,
+    render: row => {
+      if (row.status === null) {
+        return null;
+      }
+
+      const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
+        1: 'success',
+        2: 'warning'
+      };
+
+      const label = $t(enableStatusRecord[row.status]);
+
+      return <NTag type={tagMap[row.status]}>{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={() => edit(row.id)}>
+          {$t('common.edit')}
+        </NButton>
+        <NPopconfirm
+          onPositiveClick={() => handleDelete(row.id)}
+          positiveButtonProps={{
+            loading: deleting.value
+          }}
+        >
+          {{
+            default: () => $t('common.confirmDelete'),
+            trigger: () => (
+              <NButton type="error" ghost size="small">
+                {$t('common.delete')}
+              </NButton>
+            )
+          }}
+        </NPopconfirm>
+      </div>
+    )
+  }
+]);
+</script>
+
+<template>
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+    <UserSearch v-model:model="searchParams" @search="getDataByPage" />
+    <NCard :title="$t('page.manage.user.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+      <template #header-extra>
+        <TableHeaderOperation
+          v-model:columns="columnChecks"
+          :disabled-delete="checkedRowKeys.length === 0"
+          :loading="loading"
+          @add="handleAdd"
+          @delete="handleBatchDelete"
+          @refresh="refresh"
+        />
+      </template>
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys"
+        :columns="columns"
+        :data="data"
+        size="small"
+        :flex-height="!appStore.isMobile"
+        :scroll-x="962"
+        :loading="loading"
+        remote
+        :row-key="row => row.id"
+        :pagination="{
+          page,
+          pageSize,
+          showSizePicker: true,
+          pageCount,
+          pageSizes: [10, 15, 20, 25, 30],
+          onUpdatePage(value) {
+            page = value;
+          },
+          onUpdatePageSize(value) {
+            pageSize = value;
+          }
+        }"
+        class="sm:h-full"
+      />
+      <UserOperateDrawer
+        v-model:visible="drawerVisible"
+        :operate-type="operateType"
+        :row-data="editingData"
+        @submitted="reload"
+      />
+    </NCard>
+  </div>
+</template>
+
+<style scoped></style>

src/views/alova/user/modules/user-operate-drawer.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+import { useForm, useWatcher } from '@sa/alova/client';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import type { UserModel } from '@/serviceAlova/api';
+import { addUser, fetchGetAllRoles, updateUser } from '@/serviceAlova/api';
+import { $t } from '@/locales';
+import { enableStatusOptions, userGenderOptions } from '@/constants/business';
+
+defineOptions({
+  name: 'UserOperateDrawer'
+});
+
+interface Props {
+  /** the type of operation */
+  operateType: NaiveUI.TableOperateType;
+  /** 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<NaiveUI.TableOperateType, string> = {
+    add: $t('page.manage.user.addUser'),
+    edit: $t('page.manage.user.editUser')
+  };
+  return titles[props.operateType];
+});
+
+const {
+  loading: submiting,
+  reset,
+  send: submit,
+  form,
+  updateForm
+} = useForm(formData => (props.operateType === 'add' ? addUser(formData) : updateUser(formData)), {
+  initialForm: {
+    userName: '',
+    userGender: null,
+    nickName: '',
+    userPhone: '',
+    userEmail: '',
+    userRoles: [],
+    status: null
+  } as UserModel,
+  resetAfterSubmiting: true
+});
+
+type RuleKey = Extract<keyof UserModel, 'userName' | 'status'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  userName: defaultRequiredRule,
+  status: defaultRequiredRule
+};
+
+/** the enabled role options */
+const { data: roleOptionsRaw, loading } = useWatcher(fetchGetAllRoles, [visible], {
+  initialData: [],
+  middleware(_, next) {
+    return visible.value ? next() : undefined;
+  }
+});
+const roleOptions = computed<CommonType.Option<string>[]>(() => {
+  const options = roleOptionsRaw.value.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 = form.value.userRoles.map(item => ({
+    label: item,
+    value: item
+  }));
+  // end
+
+  return [...userRoleOptions, ...options];
+});
+
+function handleInitModel() {
+  if (props.operateType === 'edit' && props.rowData) {
+    updateForm(props.rowData);
+  } else if (props.operateType === 'add') {
+    reset();
+  }
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+  // request
+  await submit();
+  window.$message?.success($t('common.updateSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    restoreValidation();
+    handleInitModel();
+  }
+});
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" display-directive="show" :width="360">
+    <NDrawerContent :title="title" :native-scrollbar="false" closable>
+      <NForm ref="formRef" :model="form" :rules="rules">
+        <NFormItem :label="$t('page.manage.user.userName')" path="userName">
+          <NInput v-model:value="form.userName" :placeholder="$t('page.manage.user.form.userName')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.userGender')" path="userGender">
+          <NRadioGroup v-model:value="form.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="form.nickName" :placeholder="$t('page.manage.user.form.nickName')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.userPhone')" path="userPhone">
+          <NInput v-model:value="form.userPhone" :placeholder="$t('page.manage.user.form.userPhone')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.userEmail')" path="email">
+          <NInput v-model:value="form.userEmail" :placeholder="$t('page.manage.user.form.userEmail')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.userStatus')" path="status">
+          <NRadioGroup v-model:value="form.status">
+            <NRadio v-for="item in enableStatusOptions" :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="form.userRoles"
+            multiple
+            :loading="loading"
+            :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" :loading="submiting" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped></style>

src/views/alova/user/modules/user-search.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { $t } from '@/locales';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { enableStatusOptions, userGenderOptions } from '@/constants/business';
+import { translateOptions } from '@/utils/common';
+
+defineOptions({
+  name: 'UserSearch'
+});
+
+interface Emits {
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+
+const model = defineModel<Api.SystemManage.UserSearchParams>('model', { required: true });
+
+const initialParams = { ...model.value };
+
+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();
+  Object.assign(model.value, initialParams);
+}
+
+async function search() {
+  await validate();
+  emit('search');
+}
+</script>
+
+<template>
+  <NCard :bordered="false" size="small" class="card-wrapper">
+    <NCollapse :default-expanded-names="['user-search']">
+      <NCollapseItem :title="$t('common.search')" name="user-search">
+        <NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="80">
+          <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.status"
+                :placeholder="$t('page.manage.user.form.userStatus')"
+                :options="translateOptions(enableStatusOptions)"
+                clearable
+              />
+            </NFormItemGi>
+            <NFormItemGi span="24 m: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>
+      </NCollapseItem>
+    </NCollapse>
+  </NCard>
+</template>
+
+<style scoped></style>