perf: adjustment of form spelling errors, type adjustment, closer to actual development (#4694)

apps/web-antd/src/locales/langs/zh-CN/page.json

@@ -1,9 +1,9 @@
 {
   "auth": {
-    "login": "登陆",
+    "login": "登录",
     "register": "注册",
-    "codeLogin": "验证码登陆",
+    "codeLogin": "验证码登录",
-    "qrcodeLogin": "二维码登陆",
+    "qrcodeLogin": "二维码登录",
     "forgetPassword": "忘记密码"
   },
   "dashboard": {

apps/web-antd/src/store/auth.ts

@@ -1,5 +1,4 @@
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { Recordable, UserInfo } from '@vben/types';
-import type { UserInfo } from '@vben/types';
 
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -26,7 +25,7 @@ export const useAuthStore = defineStore('auth', () => {
    * @param params 登录表单数据
    */
   async function authLogin(
-    params: LoginAndRegisterParams,
+    params: Recordable<any>,
     onSuccess?: () => Promise<void> | void,
   ) {
     // 异步处理用户登录操作并获取 accessToken
@@ -84,7 +83,7 @@ export const useAuthStore = defineStore('auth', () => {
     resetAllStores();
     accessStore.setLoginExpired(false);
 
-    // 回登陆页带上当前路由地址
+    // 回登录页带上当前路由地址
     await router.replace({
       path: LOGIN_PATH,
       query: redirect

apps/web-antd/src/views/_core/authentication/code-login.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
 import { computed, ref } from 'vue';
 
@@ -49,7 +50,7 @@ const formSchema = computed((): VbenFormSchema[] => {
  * Asynchronously handle the login process
  * @param values 登录表单数据
  */
-async function handleLogin(values: LoginCodeParams) {
+async function handleLogin(values: Recordable<any>) {
   // eslint-disable-next-line no-console
   console.log(values);
 }

apps/web-antd/src/views/_core/authentication/forget-password.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
 import { computed, ref } from 'vue';
 
@@ -27,7 +28,7 @@ const formSchema = computed((): VbenFormSchema[] => {
   ];
 });
 
-function handleSubmit(value: string) {
+function handleSubmit(value: Recordable<any>) {
   // eslint-disable-next-line no-console
   console.log('reset email:', value);
 }

apps/web-antd/src/views/_core/authentication/register.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
 import { computed, h, ref } from 'vue';
 
@@ -86,7 +87,7 @@ const formSchema = computed((): VbenFormSchema[] => {
   ];
 });
 
-function handleSubmit(value: LoginAndRegisterParams) {
+function handleSubmit(value: Recordable<any>) {
   // eslint-disable-next-line no-console
   console.log('register submit:', value);
 }

apps/web-ele/src/locales/langs/zh-CN/page.json

@@ -1,9 +1,9 @@
 {
   "auth": {
-    "login": "登陆",
+    "login": "登录",
     "register": "注册",
-    "codeLogin": "验证码登陆",
+    "codeLogin": "验证码登录",
-    "qrcodeLogin": "二维码登陆",
+    "qrcodeLogin": "二维码登录",
     "forgetPassword": "忘记密码"
   },
   "dashboard": {

apps/web-ele/src/store/auth.ts

@@ -1,5 +1,4 @@
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { Recordable, UserInfo } from '@vben/types';
-import type { UserInfo } from '@vben/types';
 
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -26,7 +25,7 @@ export const useAuthStore = defineStore('auth', () => {
    * @param params 登录表单数据
    */
   async function authLogin(
-    params: LoginAndRegisterParams,
+    params: Recordable<any>,
     onSuccess?: () => Promise<void> | void,
   ) {
     // 异步处理用户登录操作并获取 accessToken
@@ -85,7 +84,7 @@ export const useAuthStore = defineStore('auth', () => {
     resetAllStores();
     accessStore.setLoginExpired(false);
 
-    // 回登陆页带上当前路由地址
+    // 回登录页带上当前路由地址
     await router.replace({
       path: LOGIN_PATH,
       query: redirect

apps/web-ele/src/views/_core/authentication/code-login.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
 import { computed, ref } from 'vue';
 
@@ -49,7 +50,7 @@ const formSchema = computed((): VbenFormSchema[] => {
  * Asynchronously handle the login process
  * @param values 登录表单数据
  */
-async function handleLogin(values: LoginCodeParams) {
+async function handleLogin(values: Recordable<any>) {
   // eslint-disable-next-line no-console
   console.log(values);
 }

apps/web-ele/src/views/_core/authentication/forget-password.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
 import { computed, ref } from 'vue';
 
@@ -27,7 +28,7 @@ const formSchema = computed((): VbenFormSchema[] => {
   ];
 });
 
-function handleSubmit(value: string) {
+function handleSubmit(value: Recordable<any>) {
   // eslint-disable-next-line no-console
   console.log('reset email:', value);
 }

apps/web-ele/src/views/_core/authentication/register.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
 import { computed, h, ref } from 'vue';
 
@@ -86,7 +87,7 @@ const formSchema = computed((): VbenFormSchema[] => {
   ];
 });
 
-function handleSubmit(value: LoginAndRegisterParams) {
+function handleSubmit(value: Recordable<any>) {
   // eslint-disable-next-line no-console
   console.log('register submit:', value);
 }

apps/web-naive/src/locales/langs/zh-CN/page.json

@@ -1,9 +1,9 @@
 {
   "auth": {
-    "login": "登陆",
+    "login": "登录",
     "register": "注册",
-    "codeLogin": "验证码登陆",
+    "codeLogin": "验证码登录",
-    "qrcodeLogin": "二维码登陆",
+    "qrcodeLogin": "二维码登录",
     "forgetPassword": "忘记密码"
   },
   "dashboard": {

apps/web-naive/src/store/auth.ts

@@ -1,5 +1,4 @@
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { Recordable, UserInfo } from '@vben/types';
-import type { UserInfo } from '@vben/types';
 
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -26,7 +25,7 @@ export const useAuthStore = defineStore('auth', () => {
    * @param params 登录表单数据
    */
   async function authLogin(
-    params: LoginAndRegisterParams,
+    params: Recordable<any>,
     onSuccess?: () => Promise<void> | void,
   ) {
     // 异步处理用户登录操作并获取 accessToken
@@ -85,7 +84,7 @@ export const useAuthStore = defineStore('auth', () => {
     resetAllStores();
     accessStore.setLoginExpired(false);
 
-    // 回登陆页带上当前路由地址
+    // 回登录页带上当前路由地址
     await router.replace({
       path: LOGIN_PATH,
       query: redirect

apps/web-naive/src/views/_core/authentication/code-login.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
 import { computed, ref } from 'vue';
 
@@ -49,7 +50,7 @@ const formSchema = computed((): VbenFormSchema[] => {
  * Asynchronously handle the login process
  * @param values 登录表单数据
  */
-async function handleLogin(values: LoginCodeParams) {
+async function handleLogin(values: Recordable<any>) {
   // eslint-disable-next-line no-console
   console.log(values);
 }

apps/web-naive/src/views/_core/authentication/forget-password.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
 import { computed, ref } from 'vue';
 
@@ -27,7 +28,7 @@ const formSchema = computed((): VbenFormSchema[] => {
   ];
 });
 
-function handleSubmit(value: string) {
+function handleSubmit(value: Recordable<any>) {
   // eslint-disable-next-line no-console
   console.log('reset email:', value);
 }

apps/web-naive/src/views/_core/authentication/register.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
 import { computed, h, ref } from 'vue';
 
@@ -86,7 +87,7 @@ const formSchema = computed((): VbenFormSchema[] => {
   ];
 });
 
-function handleSubmit(value: LoginAndRegisterParams) {
+function handleSubmit(value: Recordable<any>) {
   // eslint-disable-next-line no-console
   console.log('register submit:', value);
 }

docs/src/guide/in-depth/access.md

@@ -11,7 +11,7 @@ outline: deep
 
 ## 前端访问控制
 
-**实现原理**: 在前端固定写死路由的权限，指定路由有哪些权限可以查看。只初始化通用的路由，需要权限才能访问的路由没有被加入路由表内。在登陆后或者其他方式获取用户角色后，通过角色去遍历路由表，获取该角色可以访问的路由表，生成路由表，再通过 `router.addRoute` 添加到路由实例，实现权限的过滤。
+**实现原理**: 在前端固定写死路由的权限，指定路由有哪些权限可以查看。只初始化通用的路由，需要权限才能访问的路由没有被加入路由表内。在登录后或者其他方式获取用户角色后，通过角色去遍历路由表，获取该角色可以访问的路由表，生成路由表，再通过 `router.addRoute` 添加到路由实例，实现权限的过滤。
 
 **缺点**: 权限相对不自由，如果后台改动角色，前台也需要跟着改动。适合角色较固定的系统
 

packages/constants/src/core.ts

@@ -1,5 +1,5 @@
 /**
- * @zh_CN 登陆页面 url 地址
+ * @zh_CN 登录页面 url 地址
  */
 export const LOGIN_PATH = '/auth/login';
 

packages/effects/common-ui/src/ui/authentication/code-login.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import type { Recordable } from '@vben/types';
 import type { VbenFormSchema } from '@vben-core/form-ui';
 
-import type { LoginCodeEmits } from './types';
-
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -19,7 +18,7 @@ interface Props {
    */
   loading?: boolean;
   /**
-   * @zh_CN 登陆路径
+   * @zh_CN 登录路径
    */
   loginPath?: string;
   /**
@@ -49,12 +48,12 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  submit: LoginCodeEmits['submit'];
+  submit: [Recordable<any>];
 }>();
 
 const router = useRouter();
 
-const [Form, { validate }] = useVbenForm(
+const [Form, { validate, getValues }] = useVbenForm(
   reactive({
     commonConfig: {
       hideLabel: true,
@@ -66,8 +65,8 @@ const [Form, { validate }] = useVbenForm(
 );
 
 async function handleSubmit() {
-  const { valid, values } = await validate();
+  const { valid } = await validate();
-
+  const values = await getValues();
   if (valid) {
     emit('submit', {
       code: values?.code,

packages/effects/common-ui/src/ui/authentication/forget-password.vue

@@ -17,7 +17,7 @@ interface Props {
    */
   loading?: boolean;
   /**
-   * @zh_CN 登陆路径
+   * @zh_CN 登录路径
    */
   loginPath?: string;
   /**
@@ -47,10 +47,10 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  submit: [string];
+  submit: [Record<string, any>];
 }>();
 
-const [Form, { validate }] = useVbenForm(
+const [Form, { validate, getValues }] = useVbenForm(
   reactive({
     commonConfig: {
       hideLabel: true,
@@ -64,10 +64,10 @@ const [Form, { validate }] = useVbenForm(
 const router = useRouter();
 
 async function handleSubmit() {
-  const { valid, values } = await validate();
+  const { valid } = await validate();
-
+  const values = await getValues();
   if (valid) {
-    emit('submit', values?.email);
+    emit('submit', values);
   }
 }
 

packages/effects/common-ui/src/ui/authentication/index.ts

@@ -4,8 +4,4 @@ export { default as AuthenticationLogin } from './login.vue';
 export { default as AuthenticationLoginExpiredModal } from './login-expired-modal.vue';
 export { default as AuthenticationQrCodeLogin } from './qrcode-login.vue';
 export { default as AuthenticationRegister } from './register.vue';
-export type {
+export type { AuthenticationProps } from './types';
-  AuthenticationProps,
-  LoginAndRegisterParams,
-  LoginCodeParams,
-} from './types';

packages/effects/common-ui/src/ui/authentication/login.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { Recordable } from '@vben/types';
 import type { VbenFormSchema } from '@vben-core/form-ui';
 
-import type { AuthenticationProps, LoginEmits } from './types';
+import type { AuthenticationProps } from './types';
 
 import { computed, onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -40,10 +41,10 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  submit: LoginEmits['submit'];
+  submit: [Recordable<any>];
 }>();
 
-const [Form, { setFieldValue, validate }] = useVbenForm(
+const [Form, { setFieldValue, validate, getValues }] = useVbenForm(
   reactive({
     commonConfig: {
       hideLabel: true,
@@ -62,13 +63,14 @@ const localUsername = localStorage.getItem(REMEMBER_ME_KEY) || '';
 const rememberMe = ref(!!localUsername);
 
 async function handleSubmit() {
-  const { valid, values } = await validate();
+  const { valid } = await validate();
+  const values = await getValues();
   if (valid) {
     localStorage.setItem(
       REMEMBER_ME_KEY,
       rememberMe.value ? values?.username : '',
     );
-    emit('submit', values as { password: string; username: string });
+    emit('submit', values);
   }
 }
 

packages/effects/common-ui/src/ui/authentication/qrcode-login.vue

@@ -15,7 +15,7 @@ interface Props {
    */
   loading?: boolean;
   /**
-   * @zh_CN 登陆路径
+   * @zh_CN 登录路径
    */
   loginPath?: string;
   /**

packages/effects/common-ui/src/ui/authentication/register.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import type { Recordable } from '@vben/types';
 import type { VbenFormSchema } from '@vben-core/form-ui';
 
-import type { RegisterEmits } from './types';
-
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -19,7 +18,7 @@ interface Props {
    */
   loading?: boolean;
   /**
-   * @zh_CN 登陆路径
+   * @zh_CN 登录路径
    */
   loginPath?: string;
   /**
@@ -50,10 +49,10 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  submit: RegisterEmits['submit'];
+  submit: [Recordable<any>];
 }>();
 
-const [Form, { validate }] = useVbenForm(
+const [Form, { validate, getValues }] = useVbenForm(
   reactive({
     commonConfig: {
       hideLabel: true,
@@ -67,7 +66,8 @@ const [Form, { validate }] = useVbenForm(
 const router = useRouter();
 
 async function handleSubmit() {
-  const { valid, values } = await validate();
+  const { valid } = await validate();
+  const values = await getValues();
   if (valid) {
     emit('submit', values as { password: string; username: string });
   }

packages/effects/common-ui/src/ui/authentication/types.ts

@@ -67,30 +67,4 @@ interface AuthenticationProps {
   submitButtonText?: string;
 }
 
-type LoginAndRegisterParams = Record<string, any>;
+export type { AuthenticationProps };
-
-interface LoginCodeParams {
-  code: string;
-  phoneNumber: string;
-}
-
-interface LoginEmits {
-  submit: [LoginAndRegisterParams];
-}
-
-interface LoginCodeEmits {
-  submit: [LoginCodeParams];
-}
-
-interface RegisterEmits {
-  submit: [LoginAndRegisterParams];
-}
-
-export type {
-  AuthenticationProps,
-  LoginAndRegisterParams,
-  LoginCodeEmits,
-  LoginCodeParams,
-  LoginEmits,
-  RegisterEmits,
-};

packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
 import { computed, reactive } from 'vue';
 
 import { $t } from '@vben/locales';
@@ -11,14 +13,6 @@ interface Props {
   text?: string;
 }
 
-interface LockAndRegisterParams {
-  lockScreenPassword: string;
-}
-
-interface RegisterEmits {
-  submit: [LockAndRegisterParams];
-}
-
 defineOptions({
   name: 'LockScreenModal',
 });
@@ -29,10 +23,10 @@ withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  submit: RegisterEmits['submit'];
+  submit: [Recordable<any>];
 }>();
 
-const [Form, { resetForm, validate }] = useVbenForm(
+const [Form, { resetForm, validate, getValues }] = useVbenForm(
   reactive({
     commonConfig: {
       hideLabel: true,
@@ -68,7 +62,8 @@ const [Modal] = useVbenModal({
 });
 
 async function handleSubmit() {
-  const { valid, values } = await validate();
+  const { valid } = await validate();
+  const values = await getValues();
   if (valid) {
     emit('submit', values?.lockScreenPassword);
   }

playground/src/locales/langs/zh-CN/page.json

@@ -1,9 +1,9 @@
 {
   "auth": {
-    "login": "登陆",
+    "login": "登录",
     "register": "注册",
-    "codeLogin": "验证码登陆",
+    "codeLogin": "验证码登录",
-    "qrcodeLogin": "二维码登陆",
+    "qrcodeLogin": "二维码登录",
     "forgetPassword": "忘记密码"
   },
   "dashboard": {

playground/src/store/auth.ts

@@ -1,5 +1,4 @@
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { Recordable, UserInfo } from '@vben/types';
-import type { UserInfo } from '@vben/types';
 
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -27,7 +26,7 @@ export const useAuthStore = defineStore('auth', () => {
    * @param onSuccess 成功之后的回调函数
    */
   async function authLogin(
-    params: LoginAndRegisterParams,
+    params: Recordable<any>,
     onSuccess?: () => Promise<void> | void,
   ) {
     // 异步处理用户登录操作并获取 accessToken
@@ -86,7 +85,7 @@ export const useAuthStore = defineStore('auth', () => {
     resetAllStores();
     accessStore.setLoginExpired(false);
 
-    // 回登陆页带上当前路由地址
+    // 回登录页带上当前路由地址
     await router.replace({
       path: LOGIN_PATH,
       query: redirect

playground/src/views/_core/authentication/code-login.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
 import { computed, ref } from 'vue';
 
@@ -49,7 +50,7 @@ const formSchema = computed((): VbenFormSchema[] => {
  * Asynchronously handle the login process
  * @param values 登录表单数据
  */
-async function handleLogin(values: LoginCodeParams) {
+async function handleLogin(values: Recordable<any>) {
   // eslint-disable-next-line no-console
   console.log(values);
 }

playground/src/views/_core/authentication/forget-password.vue

@@ -27,7 +27,7 @@ const formSchema = computed((): VbenFormSchema[] => {
   ];
 });
 
-function handleSubmit(value: string) {
+function handleSubmit(value: Record<string, any>) {
   // eslint-disable-next-line no-console
   console.log('reset email:', value);
 }

playground/src/views/_core/authentication/register.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
 import { computed, h, ref } from 'vue';
 
@@ -86,7 +87,7 @@ const formSchema = computed((): VbenFormSchema[] => {
   ];
 });
 
-function handleSubmit(value: LoginAndRegisterParams) {
+function handleSubmit(value: Recordable<any>) {
   // eslint-disable-next-line no-console
   console.log('register submit:', value);
 }

playground/src/views/demos/access/button-control.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
 import { useRouter } from 'vue-router';
 
@@ -11,7 +11,7 @@ import { Button, Card } from 'ant-design-vue';
 
 import { useAuthStore } from '#/store';
 
-const accounts: Record<string, LoginAndRegisterParams> = {
+const accounts: Record<string, Recordable<any>> = {
   admin: {
     password: '123456',
     username: 'admin',

playground/src/views/demos/access/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
 import { useRouter } from 'vue-router';
 
@@ -11,7 +11,7 @@ import { Button, Card } from 'ant-design-vue';
 
 import { useAuthStore } from '#/store';
 
-const accounts: Record<string, LoginAndRegisterParams> = {
+const accounts: Record<string, Recordable<any>> = {
   admin: {
     password: '123456',
     username: 'admin',