fix: 登录注册首页调整

src/views/index.vue

@@ -6,108 +6,17 @@ import useUserStore from '@/store/modules/user';
 const userStore = useUserStore();
 const { appName, appVersion } = useAppStore();
 
-/**跳转 */
+ 
-function goTarget(type: string) {
-  let url = '';
-  if (type === 'code') {
-    url = 'https://gitee.com/TsMask/';
-  }
-  if (type === 'issues') {
-    url = 'https://gitee.com/TsMask/mask_antd_vue3/issues';
-  }
-  window.open(url, '__blank');
-}
 </script>
 
 <template>
-  <PageContainer :breadcrumb="false" :title="appName" sub-title="by TsMask">
+  <PageContainer :breadcrumb="false"  >
-    <template #tags>
+ 
-      <a-tag>当前版本：{{ appVersion }}</a-tag>
-      <a-tag color="magenta"><PayCircleOutlined /> 免费开源</a-tag>
-    </template>
-    <template #extra>
-      <a-button type="primary" @click="goTarget('code')">开源仓库</a-button>
-      <a-button type="default" @click="goTarget('issues')">提些建议</a-button>
-    </template>
     <template #content>
-      <a-space :size="16" align="center">
+   展示统计数据
-        <a-avatar
+    </template> 
-          shape="circle"
-          :size="72"
-          :src="userStore.getAvatar"
-          :alt="userStore.userName"
-        ></a-avatar>
-        <span class="nickname">
-          {{ userStore.nickName }} ，想必你那里一切安好吧。
-        </span>
-      </a-space>
-    </template>
-    <template #extraContent>
-      <a-space :size="16">
-        <a-statistic title="在线用户" :value="545486" />
-      </a-space>
-    </template>
-
     <a-row :gutter="16">
-      <a-col :lg="16" :md="16" :xs="24">
+ 
-        <a-card title="项目简介" style="margin-bottom: 16px">
-          <a-typography>
-            <a-typography-paragraph>
-              <a-typography-text mark> Vue3 </a-typography-text>
-              技术组合，支持按钮及数据权限，可自定义部门数据权限。
-            </a-typography-paragraph>
-            <a-typography-paragraph>
-              内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理等，支持在线定时任务配置。
-            </a-typography-paragraph>
-            <a-typography-paragraph>
-              使用 <a-typography-text mark> Ant-Design-Vue </a-typography-text>
-              组件库，搭建的前后端分离极速后台管理系统。
-            </a-typography-paragraph>
-          </a-typography>
-        </a-card>
-      </a-col>
-      <a-col :lg="8" :md="8" :xs="24">
-        <a-card title="快速开始" style="margin-bottom: 16px">
-          <a-row :gutter="16">
-            <a-col :lg="6" :md="12" :xs="24">
-              <a-button
-                type="link"
-                target="_blank"
-                title="开发手册"
-                href="https://juejin.cn/column/7188761626017792056"
-              >
-                开发手册
-              </a-button>
-            </a-col>
-            <a-col :lg="6" :md="12" :xs="24">
-              <a-button
-                type="link"
-                target="_blank"
-                title="来自Apifox的接口文档"
-                href="https://mask-api-midwayjs.apifox.cn/"
-              >
-                接口文档
-              </a-button>
-            </a-col>
-            <a-col :lg="6" :md="12" :xs="24">
-              <a-button
-                type="link"
-                target="_blank"
-                title="Middwayjs版本服务端"
-                href="https://gitee.com/TsMask/mask_api_midwayjs"
-              >
-                Node后端
-              </a-button>
-            </a-col>
-            <a-col :lg="6" :md="12" :xs="24">
-              <a-button type="text"> 相关待定 </a-button>
-            </a-col>
-          </a-row>
-        </a-card>
-        <a-card title="捐赠鼓励" style="margin-top: 16px">
-          <a-image width="100%" :src="donate" />
-        </a-card>
-      </a-col>
     </a-row>
   </PageContainer>
 </template>

src/views/login.vue

@@ -1,78 +1,45 @@
 <script lang="ts" setup>
 import { message } from 'ant-design-vue/lib';
-import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
+import { reactive } from 'vue';
 import useUserStore from '@/store/modules/user';
-import { getCaptchaImage } from '@/api/login';
 import useI18n from '@/hooks/useI18n';
-import { regExpMobile, validMobile } from '@/utils/regular-utils';
+import { regExpMobile } from '@/utils/regular-utils';
 import { useRouter, useRoute } from 'vue-router';
 const { t, changeLocale } = useI18n();
 const router = useRouter();
 const route = useRoute();
-const codeImgFall =
-  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 
 /**登录后重定向页面 */
 const redirectPath =
   (route.query && (route.query.redirect as string)) || '/index';
 
-/**Tab默认激活 */
-let activeKey = ref<'username' | 'phonenumber'>('username');
-
 let state = reactive({
   /**表单属性 */
   from: {
     /**账号 */
-    username: 'maskAdmin',
+    username: 'admin',
     /**密码 */
-    password: 'Admin@1234',
+    password: 'rootaa',
-    /**手机号 */
-    phonenumber: '',
-    /**验证码 */
-    code: '',
-    /**验证码uuid */
-    uuid: '',
   },
   /**表单提交点击状态 */
   fromClick: false,
-  /**验证码状态 */
-  captcha: {
-    /**验证码开关 */
-    enabled: false,
-    /**验证码图片地址 */
-    codeImg: '',
-    codeImgFall: codeImgFall,
-  },
-  /**验证码点击状态 */
-  captchaClick: false,
 });
 
 /**表单验证通过 */
 function fnFinish() {
   state.fromClick = true;
-  let form = {};
   // 账号密码登录
-  if (activeKey.value === 'username') {
+  let form = {
-    form = {
+    userName: state.from.username,
-      username: state.from.username,
+    value: state.from.password,
-      password: state.from.password,
+    grantType: 'password',
-      code: state.from.code,
+  };
-      uuid: state.from.uuid,
+
-    };
-  }
-  // 手机号登录
-  if (activeKey.value === 'phonenumber') {
-    form = {
-      phonenumber: state.from.phonenumber,
-      code: state.from.code,
-      uuid: state.from.uuid,
-    };
-  }
   // 发送请求
   useUserStore()
     .fnLogin(form)
     .then(res => {
-      if (res.code === 200) {
+      if (res.code === 1) {
         message.success(t('views.login.loginSuccess'), 3);
         router.push({ path: redirectPath });
       } else {
@@ -81,85 +48,13 @@ function fnFinish() {
     })
     .finally(() => {
       state.fromClick = false;
-      // 刷新验证码
-      if (state.captcha.enabled) {
-        state.from.code = '';
-        fnGetCaptcha();
-      }
     });
 }
 
-/**
- * 获取验证码
- */
-function fnGetCaptcha() {
-  if (state.captchaClick) return;
-  state.captchaClick = true;
-  getCaptchaImage().then(res => {
-    state.captchaClick = false;
-    if (res.code != 200) {
-      message.warning(`${res.msg}`, 3);
-      return;
-    }
-    state.captcha.enabled = Boolean(res.captchaEnabled);
-    if (state.captcha.enabled) {
-      state.captcha.codeImg = res.img;
-      state.from.uuid = res.uuid;
-    }
-  });
-}
-
-/**短信验证码定时器 */
-let smsInterval: any = undefined;
-
-/**短信验证码信息状态 */
-let smsState = reactive({
-  /**点击状态 */
-  click: false,
-  /**发送倒计时 */
-  time: 120,
-});
-
-/**获取短信验证码 */
-function fnGetSmsCaptcha() {
-  if (smsState.click) return;
-  if (!validMobile(state.from.phonenumber)) {
-    message.warning(t('valid.phoneReg'), 3);
-    return;
-  }
-  smsState.click = true;
-
-  setTimeout(() => {
-    // start 得到发送结果启动定时
-    message.success(t('valid.codeSmsSend'), 3);
-    state.from.uuid = '短信校验id';
-    smsInterval = setInterval(() => {
-      if (smsState.time <= 0) {
-        smsState.time = 120;
-        smsState.click = false;
-        clearTimeout(smsInterval);
-      } else {
-        smsState.time--;
-      }
-    }, 1000);
-    // end
-  }, 1000);
-}
-
 /**改变多语言 */
 function fnChangeLocale(e: any) {
   changeLocale(e.key);
 }
-
-onMounted(() => {
-  fnGetCaptcha();
-});
-
-onBeforeUnmount(() => {
-  smsState.time = 120;
-  smsState.click = false;
-  clearTimeout(smsInterval);
-});
 </script>
 
 <template>
@@ -176,176 +71,69 @@ onBeforeUnmount(() => {
 
     <div class="main">
       <a-form :model="state.from" name="stateFrom" @finish="fnFinish">
-        <a-tabs
+        <a-form-item
-          v-model:activeKey="activeKey"
+          name="username"
-          tabPosition="top"
+          :rules="[
-          type="line"
+            {
-          :centered="true"
+              required: true,
-          :destroy-inactive-tab-pane="true"
+              min: 2,
+              max: 30,
+              message: t('valid.userNamePlease'),
+            },
+          ]"
         >
-          <a-tab-pane key="username" :tab="t('views.login.tabPane1')">
+          <a-input
-            <a-form-item
+            v-model:value="state.from.username"
-              name="username"
+            size="large"
-              :rules="[
+            :placeholder="t('valid.userNameHit')"
-                {
+            :maxlength="30"
-                  required: true,
+          >
-                  min: 2,
+            <template #prefix>
-                  max: 30,
+              <UserOutlined class="prefix-icon" />
-                  message: t('valid.userNamePlease'),
+            </template>
-                },
+          </a-input>
-              ]"
+        </a-form-item>
-            >
-              <a-input
-                v-model:value="state.from.username"
-                size="large"
-                :placeholder="t('valid.userNameHit')"
-                :maxlength="30"
-              >
-                <template #prefix>
-                  <UserOutlined class="prefix-icon" />
-                </template>
-              </a-input>
-            </a-form-item>
 
-            <a-form-item
+        <a-form-item
-              name="password"
+          name="password"
-              :rules="[
+          :rules="[
-                {
+            {
-                  required: true,
+              required: true,
-                  min: 6,
+              min: 6,
-                  max: 26,
+              max: 26,
-                  message: t('valid.passwordPlease'),
+              message: t('valid.passwordPlease'),
-                },
+            },
-              ]"
+          ]"
-            >
+        >
-              <a-input-password
+          <a-input-password
-                v-model:value="state.from.password"
+            v-model:value="state.from.password"
-                size="large"
+            size="large"
-                :placeholder="t('valid.passwordHit')"
+            :placeholder="t('valid.passwordHit')"
-                :maxlength="26"
+            :maxlength="26"
-              >
+          >
-                <template #prefix>
+            <template #prefix>
-                  <LockOutlined class="prefix-icon" />
+              <LockOutlined class="prefix-icon" />
-                </template>
+            </template>
-              </a-input-password>
+          </a-input-password>
-            </a-form-item>
+        </a-form-item>
 
-            <a-row :gutter="8" v-if="state.captcha.enabled">
+        <a-row
-              <a-col :span="16">
+          :gutter="8"
-                <a-form-item
+          justify="space-between"
-                  name="code"
+          align="middle"
-                  :rules="[
+          style="margin-bottom: 16px"
-                    {
+        >
-                      required: true,
+          <a-col :span="12">
-                      min: 1,
+            <a-button
-                      message: t('valid.codePlease'),
+              type="link"
-                    },
+              target="_self"
-                  ]"
+              :title="t('views.login.registerBtn')"
-                >
+              @click="() => router.push({ name: 'Register' })"
-                  <a-input
-                    v-model:value="state.from.code"
-                    size="large"
-                    :placeholder="t('valid.codeHit')"
-                    :maxlength="6"
-                  >
-                    <template #prefix>
-                      <RobotOutlined class="prefix-icon" />
-                    </template>
-                  </a-input>
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-image
-                  :alt="t('valid.codeHit')"
-                  style="cursor: pointer; border-radius: 2px"
-                  width="120px"
-                  height="40px"
-                  :preview="false"
-                  :src="state.captcha.codeImg"
-                  :fallback="state.captcha.codeImgFall"
-                  @click="fnGetCaptcha"
-                />
-              </a-col>
-            </a-row>
-
-            <a-row
-              :gutter="8"
-              justify="space-between"
-              align="middle"
-              style="margin-bottom: 16px"
             >
-              <a-col :span="12">
+              {{ t('views.login.registerBtn') }}
-                <a-button
+            </a-button>
-                  type="link"
+          </a-col>
-                  target="_self"
+        </a-row>
-                  :title="t('views.login.registerBtn')"
-                  @click="() => router.push({ name: 'Register' })"
-                >
-                  {{ t('views.login.registerBtn') }}
-                </a-button>
-              </a-col>
-            </a-row>
-          </a-tab-pane>
-
-          <a-tab-pane key="phonenumber" :tab="t('views.login.tabPane2')">
-            <a-form-item
-              name="phonenumber"
-              :rules="[
-                {
-                  required: true,
-                  pattern: regExpMobile,
-                  message: t('valid.phonePlease'),
-                },
-              ]"
-            >
-              <a-input
-                v-model:value="state.from.phonenumber"
-                size="large"
-                :placeholder="t('valid.phoneHit')"
-                :maxlength="11"
-              >
-                <template #prefix>
-                  <MobileOutlined class="prefix-icon" />
-                </template>
-              </a-input>
-            </a-form-item>
-            <a-form-item
-              name="code"
-              :rules="[
-                {
-                  required: true,
-                  min: 4,
-                  message: t('valid.codePlease'),
-                },
-              ]"
-            >
-              <a-input
-                v-model:value="state.from.code"
-                size="large"
-                :placeholder="t('valid.codeHit')"
-                :maxlength="6"
-              >
-                <template #prefix>
-                  <RobotOutlined class="prefix-icon" />
-                </template>
-                <template #suffix>
-                  <a-button
-                    size="small"
-                    type="link"
-                    :disabled="smsState.click"
-                    @click="fnGetSmsCaptcha"
-                  >
-                    {{
-                      smsState.click
-                        ? `${smsState.time} s`
-                        : t('valid.codeText')
-                    }}
-                  </a-button>
-                </template>
-              </a-input>
-            </a-form-item>
-          </a-tab-pane>
-        </a-tabs>
 
         <a-button
           block
@@ -363,26 +151,7 @@ onBeforeUnmount(() => {
           align="middle"
           style="margin-top: 18px"
         >
-          <a-col :span="18">
+          <a-col :offset="18" :span="6">
-            <span>{{ t('views.login.loginMethod') }}</span>
-            <a-tooltip :title="t('views.login.loginMethodWX')">
-              <a-button shape="circle" size="middle" type="link">
-                <template #icon>
-                  <WechatOutlined
-                    :style="{ color: '#52c41a', fontSize: '18px' }"
-                  />
-                </template>
-              </a-button>
-            </a-tooltip>
-            <a-tooltip :title="t('views.login.loginMethodQQ')">
-              <a-button shape="circle" size="middle" type="link">
-                <template #icon>
-                  <QqOutlined :style="{ color: '#40a9ff', fontSize: '18px' }" />
-                </template>
-              </a-button>
-            </a-tooltip>
-          </a-col>
-          <a-col :span="6">
             <a-dropdown :trigger="['click', 'hover']">
               <a-button size="small" type="default">
                 {{ t('i18n') }}

src/views/register.vue

@@ -1,14 +1,12 @@
 <script lang="ts" setup>
 import { Modal, message } from 'ant-design-vue/lib';
-import { reactive, onMounted, toRaw } from 'vue';
+import { reactive, toRaw } from 'vue';
-import { getCaptchaImage, register } from '@/api/login';
+import { register } from '@/api/login';
 import { regExpPasswd, regExpUserName } from '@/utils/regular-utils';
 import { useRouter } from 'vue-router';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
 const router = useRouter();
-const codeImgFall =
-  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 
 let state = reactive({
   /**表单属性 */
@@ -19,23 +17,9 @@ let state = reactive({
     password: '',
     /**确认密码 */
     confirmPassword: '',
-    /**验证码 */
-    code: '',
-    /**验证码uuid */
-    uuid: '',
   },
   /**表单提交点击状态 */
   formClick: false,
-  /**验证码状态 */
-  captcha: {
-    /**验证码开关 */
-    enabled: false,
-    /**验证码图片地址 */
-    codeImg: '',
-    codeImgFall: codeImgFall,
-  },
-  /**验证码点击状态 */
-  captchaClick: false,
 });
 
 /**表单验证确认密码是否一致 */
@@ -60,7 +44,7 @@ function fnFinish() {
   const hide = message.loading(t('common.loading'), 0);
   register(toRaw(state.form))
     .then(res => {
-      if (res.code === 200) {
+      if (res.code === 1) {
         Modal.success({
           title: t('common.tipTitle'),
           content: t('views.register.tipContent', {
@@ -78,37 +62,8 @@ function fnFinish() {
     .finally(() => {
       hide();
       state.formClick = false;
-      // 刷新验证码
-      if (state.captcha.enabled) {
-        state.form.code = '';
-        fnGetCaptcha();
-      }
     });
 }
-
-/**
- * 获取验证码
- */
-function fnGetCaptcha() {
-  if (state.captchaClick) return;
-  state.captchaClick = true;
-  getCaptchaImage().then(res => {
-    state.captchaClick = false;
-    if (res.code != 200) {
-      message.warning(`${res.msg}`, 3);
-      return;
-    }
-    state.captcha.enabled = Boolean(res.captchaEnabled);
-    if (state.captcha.enabled) {
-      state.captcha.codeImg = res.img;
-      state.form.uuid = res.uuid;
-    }
-  });
-}
-
-onMounted(() => {
-  fnGetCaptcha();
-});
 </script>
 
 <template>
@@ -190,40 +145,6 @@ onMounted(() => {
           </a-input-password>
         </a-form-item>
 
-        <a-row :gutter="8" v-if="state.captcha.enabled">
-          <a-col :span="16">
-            <a-form-item
-              name="code"
-              :rules="[
-                { required: true, min: 1, message: t('valid.codePlease') },
-              ]"
-            >
-              <a-input
-                v-model:value="state.form.code"
-                size="large"
-                :placeholder="t('valid.codeHit')"
-                :maxlength="6"
-              >
-                <template #prefix>
-                  <RobotOutlined class="prefix-icon" />
-                </template>
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :span="8">
-            <a-image
-              :alt="t('valid.codeHit')"
-              style="cursor: pointer; border-radius: 2px"
-              width="120px"
-              height="40px"
-              :preview="false"
-              :src="state.captcha.codeImg"
-              :fallback="state.captcha.codeImgFall"
-              @click="fnGetCaptcha"
-            />
-          </a-col>
-        </a-row>
-
         <a-button
           block
           type="primary"