feat: refactoring API

src/views/Components/Descriptions.vue

@@ -4,9 +4,11 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { reactive, unref } from 'vue'
 import { Form } from '@/components/Form'
 import { ElFormItem, ElInput, ElButton } from 'element-plus'
-import { required } from '@/utils/formRules'
+import { useValidator } from '@/hooks/web/useValidator'
 import { useForm } from '@/hooks/web/useForm'
 
+const { required } = useValidator()
+
 const { t } = useI18n()
 
 const data = reactive({
@@ -53,11 +55,11 @@ const form = reactive({
 })
 
 const rules = reactive({
-  username: [required],
-  nickName: [required],
-  phone: [required],
-  email: [required],
-  addr: [required]
+  username: [required()],
+  nickName: [required()],
+  phone: [required()],
+  email: [required()],
+  addr: [required()]
 })
 
 const { register, elFormRef } = useForm()

src/views/Components/Form/RefForm.vue

@@ -4,7 +4,9 @@ import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
 import { reactive, unref, ref } from 'vue'
 import { ElButton } from 'element-plus'
-import { required } from '@/utils/formRules'
+import { useValidator } from '@/hooks/web/useValidator'
+
+const { required } = useValidator()
 
 const { t } = useI18n()
 
@@ -14,7 +16,7 @@ const schema = reactive<FormSchema[]>([
     label: t('formDemo.input'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {

src/views/Components/Form/UseFormDemo.vue

@@ -5,7 +5,9 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { useForm } from '@/hooks/web/useForm'
 import { reactive, unref, ref } from 'vue'
 import { ElButton } from 'element-plus'
-import { required } from '@/utils/formRules'
+import { useValidator } from '@/hooks/web/useValidator'
+
+const { required } = useValidator()
 
 const { t } = useI18n()
 
@@ -15,7 +17,7 @@ const schema = reactive<FormSchema[]>([
     label: t('formDemo.input'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {

src/views/Components/Search.vue

@@ -3,9 +3,11 @@ import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
 import { Search } from '@/components/Search'
 import { reactive, ref, unref } from 'vue'
-import { required } from '@/utils/formRules'
+import { useValidator } from '@/hooks/web/useValidator'
 import { ElButton } from 'element-plus'
 
+const { required } = useValidator()
+
 const { t } = useI18n()
 
 const schema = reactive<FormSchema[]>([
@@ -14,7 +16,7 @@ const schema = reactive<FormSchema[]>([
     label: t('formDemo.input'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {
@@ -69,7 +71,7 @@ const schema = reactive<FormSchema[]>([
     label: t('formDemo.input'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {
@@ -77,7 +79,7 @@ const schema = reactive<FormSchema[]>([
     label: t('formDemo.input'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {
@@ -85,7 +87,7 @@ const schema = reactive<FormSchema[]>([
     label: t('formDemo.input'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {
@@ -93,7 +95,7 @@ const schema = reactive<FormSchema[]>([
     label: t('formDemo.input'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {
@@ -101,7 +103,7 @@ const schema = reactive<FormSchema[]>([
     label: t('formDemo.input'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {
@@ -109,7 +111,7 @@ const schema = reactive<FormSchema[]>([
     label: t('formDemo.input'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {
@@ -117,7 +119,7 @@ const schema = reactive<FormSchema[]>([
     label: t('formDemo.input'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {
@@ -125,7 +127,7 @@ const schema = reactive<FormSchema[]>([
     label: t('formDemo.input'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {
@@ -133,7 +135,7 @@ const schema = reactive<FormSchema[]>([
     label: t('formDemo.input'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {
@@ -141,7 +143,7 @@ const schema = reactive<FormSchema[]>([
     label: t('formDemo.input'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {
@@ -149,7 +151,7 @@ const schema = reactive<FormSchema[]>([
     label: t('formDemo.input'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   }
 ])

src/views/Components/Table/DefaultTable.vue

@@ -65,12 +65,12 @@ const loading = ref(true)
 let tableDataList = ref<TableData[]>([])
 
 const getTableList = async (params?: Params) => {
-  const res = await getTableListApi({
-    params: params || {
+  const res = await getTableListApi(
+    params || {
       pageIndex: 1,
       pageSize: 10
     }
-  })
+  )
     .catch(() => {})
     .finally(() => {
       loading.value = false

src/views/Components/Table/RefTable.vue

@@ -62,13 +62,7 @@ const columns = reactive<TableColumn[]>([
   }
 ])
 
-const { register, tableObject, methods } = useTable<
-  {
-    total: number
-    list: TableData[]
-  },
-  TableData
->({
+const { register, tableObject, methods } = useTable<TableData>({
   getListApi: getTableListApi,
   response: {
     list: 'list',

src/views/Components/Table/UseTableDemo.vue

@@ -8,13 +8,7 @@ import { ref, h, reactive, unref } from 'vue'
 import { ElTag, ElButton } from 'element-plus'
 import { useTable } from '@/hooks/web/useTable'
 
-const { register, tableObject, methods } = useTable<
-  {
-    total: number
-    list: TableData[]
-  },
-  TableData
->({
+const { register, tableObject, methods } = useTable<TableData>({
   getListApi: getTableListApi,
   response: {
     list: 'list',

src/views/Example/Dialog/ExampleDialog.vue

@@ -13,13 +13,7 @@ import Write from './components/Write.vue'
 import Detail from './components/Detail.vue'
 import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
 
-const { register, tableObject, methods } = useTable<
-  {
-    total: number
-    list: TableData[]
-  },
-  TableData
->({
+const { register, tableObject, methods } = useTable<TableData>({
   getListApi: getTableListApi,
   delListApi: delTableListApi,
   response: {
@@ -196,9 +190,7 @@ const save = async () => {
     if (isValid) {
       loading.value = true
       const data = (await write?.getFormData()) as TableData
-      const res = await saveTableApi({
-        data
-      })
+      const res = await saveTableApi(data)
         .catch(() => {})
         .finally(() => {
           loading.value = false

src/views/Example/Dialog/components/Write.vue

@@ -3,7 +3,9 @@ import { Form } from '@/components/Form'
 import { useForm } from '@/hooks/web/useForm'
 import { PropType, reactive, watch } from 'vue'
 import { TableData } from '@/api/table/types'
-import { required } from '@/utils/formRules'
+import { useValidator } from '@/hooks/web/useValidator'
+
+const { required } = useValidator()
 
 const props = defineProps({
   currentRow: {
@@ -17,12 +19,12 @@ const props = defineProps({
 })
 
 const rules = reactive({
-  title: [required],
-  author: [required],
-  importance: [required],
-  pageviews: [required],
-  display_time: [required],
-  content: [required]
+  title: [required()],
+  author: [required()],
+  importance: [required()],
+  pageviews: [required()],
+  display_time: [required()],
+  content: [required()]
 })
 
 const { register, methods, elFormRef } = useForm({

src/views/Example/Page/ExampleAdd.vue

@@ -25,9 +25,7 @@ const save = async () => {
     if (isValid) {
       loading.value = true
       const data = (await write?.getFormData()) as TableData
-      const res = await saveTableApi({
-        data
-      })
+      const res = await saveTableApi(data)
         .catch(() => {})
         .finally(() => {
           loading.value = false

src/views/Example/Page/ExampleDetail.vue

@@ -16,11 +16,7 @@ const { t } = useI18n()
 const currentRow = ref<Nullable<TableData>>(null)
 
 const getTableDet = async () => {
-  const res = await getTableDetApi({
-    params: {
-      id: query.id as string
-    }
-  })
+  const res = await getTableDetApi(query.id as string)
   if (res) {
     currentRow.value = res.data
   }

src/views/Example/Page/ExampleEdit.vue

@@ -20,11 +20,7 @@ const { t } = useI18n()
 const currentRow = ref<Nullable<TableData>>(null)
 
 const getTableDet = async () => {
-  const res = await getTableDetApi({
-    params: {
-      id: query.id as string
-    }
-  })
+  const res = await getTableDetApi(query.id as string)
   if (res) {
     currentRow.value = res.data
   }
@@ -42,9 +38,7 @@ const save = async () => {
   if (validate) {
     loading.value = true
     const data = (await write?.getFormData()) as TableData
-    const res = await saveTableApi({
-      data
-    })
+    const res = await saveTableApi(data)
       .catch(() => {})
       .finally(() => {
         loading.value = false

src/views/Example/Page/ExamplePage.vue

@@ -18,13 +18,7 @@ defineOptions({
 
 const { push } = useRouter()
 
-const { register, tableObject, methods } = useTable<
-  {
-    total: number
-    list: TableData[]
-  },
-  TableData
->({
+const { register, tableObject, methods } = useTable<TableData>({
   getListApi: getTableListApi,
   delListApi: delTableListApi,
   response: {

src/views/Example/Page/components/Write.vue

@@ -4,9 +4,11 @@ import { useForm } from '@/hooks/web/useForm'
 import { PropType, reactive, watch } from 'vue'
 import { TableData } from '@/api/table/types'
 import { useI18n } from '@/hooks/web/useI18n'
-import { required } from '@/utils/formRules'
+import { useValidator } from '@/hooks/web/useValidator'
 import { IDomEditor } from '@wangeditor/editor'
 
+const { required } = useValidator()
+
 const props = defineProps({
   currentRow: {
     type: Object as PropType<Nullable<TableData>>,
@@ -22,7 +24,7 @@ const schema = reactive<FormSchema[]>([
     label: t('exampleDemo.title'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     },
     colProps: {
       span: 24
@@ -33,7 +35,7 @@ const schema = reactive<FormSchema[]>([
     label: t('exampleDemo.author'),
     component: 'Input',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {
@@ -45,7 +47,7 @@ const schema = reactive<FormSchema[]>([
       valueFormat: 'YYYY-MM-DD HH:mm:ss'
     },
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {
@@ -53,7 +55,7 @@ const schema = reactive<FormSchema[]>([
     label: t('exampleDemo.importance'),
     component: 'Select',
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     },
     componentProps: {
       options: [
@@ -78,7 +80,7 @@ const schema = reactive<FormSchema[]>([
     component: 'InputNumber',
     value: 0,
     formItemProps: {
-      rules: [required]
+      rules: [required()]
     }
   },
   {
@@ -101,12 +103,12 @@ const schema = reactive<FormSchema[]>([
 ])
 
 const rules = reactive({
-  title: [required],
-  author: [required],
-  importance: [required],
-  pageviews: [required],
-  display_time: [required],
-  content: [required]
+  title: [required()],
+  author: [required()],
+  importance: [required()],
+  pageviews: [required()],
+  display_time: [required()],
+  content: [required()]
 })
 
 const { register, methods, elFormRef } = useForm({

src/views/Login/components/LoginForm.vue

@@ -3,7 +3,6 @@ import { reactive, ref, unref, watch } from 'vue'
 import { Form } from '@/components/Form'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElButton, ElCheckbox, ElLink } from 'element-plus'
-import { required } from '@/utils/formRules'
 import { useForm } from '@/hooks/web/useForm'
 import { loginApi, getTestRoleApi, getAdminRoleApi } from '@/api/login'
 import { useCache } from '@/hooks/web/useCache'
@@ -11,9 +10,10 @@ import { useAppStore } from '@/store/modules/app'
 import { usePermissionStore } from '@/store/modules/permission'
 import { useRouter } from 'vue-router'
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
-import { IUserModel } from '@/api-types/user'
-import md5 from 'js-md5'
-import { cloneDeep } from 'lodash-es'
+import { UserType } from '@/api/login/types'
+import { useValidator } from '@/hooks/web/useValidator'
+
+const { required } = useValidator()
 
 const emit = defineEmits(['to-register'])
 
@@ -28,8 +28,8 @@ const { wsCache } = useCache()
 const { t } = useI18n()
 
 const rules = {
-  user_name: [required],
-  password: [required]
+  username: [required()],
+  password: [required()]
 }
 
 const schema = reactive<FormSchema[]>([
@@ -40,7 +40,7 @@ const schema = reactive<FormSchema[]>([
     }
   },
   {
-    field: 'user_name',
+    field: 'username',
     label: t('login.username'),
     value: 'admin',
     component: 'Input',
@@ -123,17 +123,13 @@ const signIn = async () => {
     if (isValid) {
       loading.value = true
       const { getFormData } = methods
-      const formData = await getFormData<IUserModel>()
+      const formData = await getFormData<UserType>()
 
       try {
-        const { result } = await loginApi(
-          Object.assign(cloneDeep(formData), {
-            password: md5(formData.password)
-          })
-        )
+        const res = await loginApi(formData)
 
-        if (result) {
-          wsCache.set(appStore.getUserInfo, result)
+        if (res) {
+          wsCache.set(appStore.getUserInfo, res.data)
           getRole()
         }
       } finally {
@@ -146,22 +142,20 @@ const signIn = async () => {
 // 获取角色信息
 const getRole = async () => {
   const { getFormData } = methods
-  const formData = await getFormData<IUserModel>()
+  const formData = await getFormData<UserType>()
   const params = {
-    roleName: formData.user_name
+    roleName: formData.username
   }
   // admin - 模拟后端过滤菜单
   // test - 模拟前端过滤菜单
   const res =
-    formData.user_name === 'admin'
-      ? await getAdminRoleApi({ params })
-      : await getTestRoleApi({ params })
+    formData.username === 'admin' ? await getAdminRoleApi(params) : await getTestRoleApi(params)
   if (res) {
     const { wsCache } = useCache()
-    const routers = res.data.list || []
+    const routers = res.data || []
     wsCache.set('roleRouters', routers)
 
-    formData.user_name === 'admin'
+    formData.username === 'admin'
       ? await permissionStore.generateRoutes('admin', routers).catch(() => {})
       : await permissionStore.generateRoutes('test', routers).catch(() => {})
 

src/views/Login/components/RegisterForm.vue

@@ -3,22 +3,16 @@ import { Form } from '@/components/Form'
 import { reactive, ref, unref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useForm } from '@/hooks/web/useForm'
-import { ElButton, ElInput, FormRules, ElMessage } from 'element-plus'
-import { getCodeApi, registerApi } from '@/api/register'
+import { ElButton, ElInput, FormRules } from 'element-plus'
 import { useValidator } from '@/hooks/web/useValidator'
-import { IUserModel } from '@/api-types/user'
-import md5 from 'js-md5'
-import { cloneDeep } from 'lodash-es'
 
 const emit = defineEmits(['to-login'])
 
-const { register, methods, elFormRef } = useForm()
-
-const { getFormData } = methods
+const { register, elFormRef } = useForm()
 
 const { t } = useI18n()
 
-const { required, lengthRange, notSpace, notSpecialCharacters, isEqual } = useValidator()
+const { required } = useValidator()
 
 const schema = reactive<FormSchema[]>([
   {
@@ -28,7 +22,7 @@ const schema = reactive<FormSchema[]>([
     }
   },
   {
-    field: 'user_name',
+    field: 'username',
     label: t('login.username'),
     value: '',
     component: 'Input',
@@ -87,62 +81,16 @@ const schema = reactive<FormSchema[]>([
 ])
 
 const rules: FormRules = {
-  user_name: [
-    required('用户名不能为空'),
-    {
-      validator: (_, value, callback) =>
-        lengthRange(value, callback, { min: 2, max: 10, message: '用户名长度必须在2-10之间' })
-    },
-    {
-      validator: (_, value, callback) => notSpace(value, callback, '用户名不能有空格')
-    }
-  ],
-  password: [
-    required('密码不能为空'),
-    {
-      validator: (_, value, callback) =>
-        lengthRange(value, callback, { min: 5, max: 20, message: '密码长度必须在5-20之间' })
-    },
-    {
-      validator: (_, value, callback) => notSpecialCharacters(value, callback, '密码不能是特殊字符')
-    }
-  ],
-  check_password: [
-    required('确认密码不能为空'),
-    {
-      validator: (_, value, callback) =>
-        lengthRange(value, callback, { min: 5, max: 20, message: '确认密码长度必须在5-20之间' })
-    },
-    {
-      validator: (_, value, callback) =>
-        notSpecialCharacters(value, callback, '确认密码不能是特殊字符')
-    },
-    {
-      validator: async (_, value, callback) => {
-        const formData = await getFormData<Omit<IUserModel, 'is_admin'>>()
-        return isEqual(value, formData.password, callback, '两次密码不一致')
-      }
-    }
-  ],
-  code: [required('验证码不能为空')]
+  username: [required()],
+  password: [required()],
+  check_password: [required()],
+  code: [required()]
 }
 
 const toLogin = () => {
   emit('to-login')
 }
 
-const codeUrl = ref('')
-const codeUuid = ref('')
-const getCode = async () => {
-  const { result } = await getCodeApi()
-  if (result) {
-    const { url, uuid } = result
-    codeUrl.value = url
-    codeUuid.value = uuid
-  }
-}
-getCode()
-
 const loading = ref(false)
 
 const loginRegister = async () => {
@@ -151,18 +99,7 @@ const loginRegister = async () => {
     if (valid) {
       try {
         loading.value = true
-        const formData = await getFormData<Omit<IUserModel, 'is_admin'>>()
-        const { result } = await registerApi(
-          Object.assign(cloneDeep(formData), {
-            uuid: codeUuid.value,
-            password: md5(formData.password),
-            check_password: md5(formData.check_password)
-          })
-        )
-        if (result) {
-          ElMessage.success('注册成功')
-          toLogin()
-        }
+        toLogin()
       } finally {
         loading.value = false
       }
@@ -187,12 +124,7 @@ const loginRegister = async () => {
 
     <template #code="form">
       <div class="w-[100%] flex">
-        <ElInput
-          v-model="form['code']"
-          :placeholder="t('login.codePlaceholder')"
-          class="!w-[calc(100%-150px)]"
-        />
-        <div v-html="codeUrl" class="h-38px cursor-pointer w-150px" @click="getCode"></div>
+        <ElInput v-model="form['code']" :placeholder="t('login.codePlaceholder')" />
       </div>
     </template>