态势感知平台-账号密码登录及验证码接口对接治理平台登录接口

src/components/Header/index.vue

@@ -40,7 +40,8 @@
 <!--          <li><router-link to="/intro" class="LNK">关于我们</router-link></li>-->
 <!--        </ul>-->
 
-        <a class="login-btn" @click="handleLogin('login')">登录</a>
+        <a v-if="!isLogin" class="login-btn" @click="handleLogin('login')">登录</a>
+        <UserAvatar v-else/>
       </div>
     </div>
   </div>
@@ -48,7 +49,12 @@
 
 <script setup lang="ts">
 import {ref, reactive} from 'vue';
+import UserAvatar from './UserAvatar.vue';
 import {emitEvent} from "@/utils/eventBus";
+import { useAccountStore } from '@/stores/user';
+import { storeToRefs } from 'pinia';
+const userInfo = useAccountStore();
+const { isLogin } = storeToRefs(userInfo);
 
 const dataSubMenus = [
   {

src/components/LoginModal/index.vue

@@ -34,17 +34,22 @@
         </div>
       </div>
 
-      <form class="login-form" @submit.prevent="handleLogin">
+      <d-form
-
+        ref="loginFormRef"
+        :data="loginForm"
+        :rules="loginRules"
+        layout="vertical"
+        class="login-form-container"
+      >
         <template v-if="loginType === 'account'">
-          <div class="form-item">
+          <d-form-item field="username"  label="账号">
             <d-input
-              v-model="loginForm.account"
+              v-model="loginForm.username"
               placeholder="账户（邮箱或手机号）"
               size="lg"
             />
-          </div>
+          </d-form-item>
-          <div class="form-item">
+          <d-form-item field="password"  label="密码">
             <d-input
               v-model="loginForm.password"
               type="password"
@@ -52,45 +57,49 @@
               show-password
               size="lg"
             />
-          </div>
+          </d-form-item>
-          <div class="form-item verify-row">
+          <d-form-item field="code" label="验证码">
-            <d-input
+            <div class="verify-row">
-              v-model="loginForm.verifyCode"
+              <d-input
-              placeholder="请输入验证码"
+                v-model="loginForm.code"
-              size="lg"
+                placeholder="请输入验证码"
-              class="verify-input"
+                size="lg"
-            />
+                class="verify-input"
-            <div class="captcha-box">
+              />
-              <span>x j 7 2</span>
+              <div class="captcha-box" @click="getCaptchaUrl">
-<!--              <img class="code" :src="codeDir" alt="验证码图片" @click="getCaptchaUrl" />-->
+                <img v-if="codeDir" :src="codeDir" alt="验证码" class="captcha-img" />
+                <span v-else class="loading-text">加载中</span>
+              </div>
             </div>
-          </div>
+          </d-form-item>
         </template>
 
         <template v-else>
-          <div class="form-item">
+          <d-form-item field="mobile">
             <d-input
               v-model="loginForm.mobile"
               placeholder="请输入手机号"
               size="lg"
             />
-          </div>
+          </d-form-item>
-          <div class="form-item verify-row">
+          <d-form-item field="smsCode">
-            <d-input
+            <div class="verify-row">
-              v-model="loginForm.smsCode"
+              <d-input
-              placeholder="请输入验证码"
+                v-model="loginForm.smsCode"
-              size="lg"
+                placeholder="请输入验证码"
-              class="verify-input"
+                size="lg"
-            />
+                class="verify-input"
-            <d-button
+              />
-              variant="text"
+              <d-button
-              class="get-code-btn"
+                variant="text"
-              :disabled="isCounting"
+                class="get-code-btn"
-              @click="getSmsCode"
+                :disabled="isCounting"
-            >
+                @click="getSmsCode"
-              {{ isCounting ? `${count}s后重试` : '获取验证码' }}
+              >
-            </d-button>
+                {{ isCounting ? `${count}s后重试` : '获取验证码' }}
-          </div>
+              </d-button>
+            </div>
+          </d-form-item>
         </template>
 
         <div class="extra-row">
@@ -112,8 +121,7 @@
         >
           登录
         </d-button>
-
+      </d-form>
-      </form>
 
       <div class="footer-links">
         <a href="#">隐私政策</a>
@@ -124,18 +132,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive,onMounted } from 'vue';
+import { ref, reactive, onMounted,defineProps } from 'vue';
 import { useModel } from '@/utils/hooks/useModel';
-// 引入 DevUI 组件 (确保已安装)
+import {
-import { Modal as DModal } from 'vue-devui/modal';
+  Modal as DModal,
-import { Input as DInput } from 'vue-devui/input';
+  Input as DInput,
-import { Button as DButton } from 'vue-devui/button';
+  Button as DButton,
-import { Checkbox as DCheckbox } from 'vue-devui/checkbox';
+  Checkbox as DCheckbox,
-import { Message } from 'vue-devui/message';
+  Form as DForm,
-import {useRouter} from "vue-router";
+  FormItem as DFormItem,
-import {getCaptcha} from "@/api/jyh/auth";
+  Message
+} from 'vue-devui';
+import { useRouter } from "vue-router";
+// 引入页面2风格的接口逻辑
+import { getCaptcha, login } from "@/api/jyh/auth";
 
-// 定义 Props 和 Emits
 const props = withDefaults(defineProps<{
   modelValue: boolean;
   showClose?: boolean;
@@ -154,35 +165,48 @@ const { vModels } = useModel(props, emits);
 const router = useRouter();
 
 // --- 状态管理 ---
-const loginType = ref<'account' | 'mobile'>('account'); // 当前登录方式
+const loginType = ref<'account' | 'mobile'>('account');
 const loading = ref(false);
 const rememberMe = ref(false);
+const loginFormRef = ref();
+const codeDir = ref(''); // 验证码图片路径
 
-// 表单数据
 const loginForm = reactive({
-  account: '',
+  username: '',
   password: '',
-  verifyCode: '', // 图形验证码
+  code: '',
+  uuid: '',
   mobile: '',
-  smsCode: ''     // 短信验证码
+  smsCode: ''
 });
 
+const loginRules = {
+  username: [{ required: true, message: '请输入账户', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
+  mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+  smsCode: [{ required: true, message: '请输入短信验证码', trigger: 'blur' }]
+};
+
 // 短信倒计时
 const count = ref(60);
 const isCounting = ref(false);
 let timer: any = null;
 
-const codeDir = ref('');
-
-
 const getCaptchaUrl = () => {
-  getCaptcha().then((res) => {
+  getCaptcha().then((res: any) => {
-    const imageUrl = URL.createObjectURL(res.data);
+    // 页面2通常返回的是包含 img (base64) 和 uuid 的对象
-    codeDir.value = imageUrl;
+    if (res.data && res.data.img) {
+      codeDir.value = res.data.img;
+      loginForm.uuid = res.data.uuid;
+    } else {
+      // 兼容页面1原本的 Blob 模式
+      const imageUrl = URL.createObjectURL(res.data);
+      codeDir.value = imageUrl;
+    }
   });
 };
 
-
 const handleClose = (close: Function) => {
   emits('close');
   close();
@@ -193,10 +217,7 @@ const getSmsCode = async () => {
     Message.warning('请输入手机号');
     return;
   }
-  // TODO: 调用发送短信接口
   Message.success('验证码已发送');
-
-  // 开始倒计时
   isCounting.value = true;
   count.value = 60;
   timer = setInterval(() => {
@@ -209,245 +230,125 @@ const getSmsCode = async () => {
 };
 
 const handleLogin = async () => {
-  // 简单校验
+  const validate = await loginFormRef.value.validate();
-  if (loginType.value === 'account') {
+  if (!validate) return;
-    if (!loginForm.account || !loginForm.password) {
-      Message.warning('请输入账户和密码');
-      return;
-    }
-  } else {
-    if (!loginForm.mobile || !loginForm.smsCode) {
-      Message.warning('请输入手机号和验证码');
-      return;
-    }
-  }
 
   loading.value = true;
   try {
-    // TODO: 调用实际登录接口
+    const loginParams = loginType.value === 'account'
-    // const res = await api.login(...)
+      ? { username: loginForm.username, password: loginForm.password, code: loginForm.code, uuid: loginForm.uuid }
+      : { mobile: loginForm.mobile, smsCode: loginForm.smsCode };
 
-    // 模拟登录延迟
+    // const res = await login(loginParams);
-    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    login(loginParams.username, loginParams.code, getRsaCode(loginParams.password))
+      .then(async (res) => {
+        if (res.data.code === 200) {
+          Message.success('登录成功');
+          const { access_token } = res.data.data;
+          const account = useAccountStore();
+          await account.checkIsLogin(access_token, res.data.data);
+          emits('close');
+          return;
+        }
+        Message.error(res.data.msg);
+        formModel.code = '';
+        getCaptchaUrl();
+      })
+      .catch((err) => {
+        console.log(err);
+        formModel.code = '';
+        getCaptchaUrl();
+      });
 
     Message.success('登录成功');
-    // router.push({ name: `Pricing` });
     window.open(`${import.meta.env.VITE_BASE_URL}Dashboard`, '_blank');
-    emits('close', true); // 关闭弹窗
+    emits('close', true);
     emits('login-success', { user: 'test' });
   } catch (error) {
     console.error(error);
+    getCaptchaUrl(); // 失败刷新验证码
   } finally {
     loading.value = false;
   }
 };
 
 const switchToRegister = () => {
-  // 切换到注册模式或跳转
   emits('go-register');
 };
 
-
 onMounted(() => {
   getCaptchaUrl();
 });
 </script>
 
-<style lang="scss">
-
-/* 使用全局样式或穿透样式覆盖 DevUI 默认 Modal 样式 */
-.tcode-login-modal {
-  :deep(.devui-modal) {
-    width: 600px !important;
-  }
-  .devui-modal__header {
-    border-bottom: none;
-    padding: 0;
-  }
-  .devui-modal__body {
-    padding: 0; /* 移除默认内边距，由内部控制 */
-  }
-  .btn-close {
-    z-index: 10; /* 确保关闭按钮在最上层 */
-  }
-}
-</style>
-
 <style lang="scss" scoped>
-/* --- 布局样式 --- */
 .login-header {
   text-align: center;
   padding: 40px 0 20px;
-
+  .logo-img { height: 48px; width: auto; display: inline-block; }
-  .logo-img {
-    height: 48px; /* 根据实际 Logo 调整 */
-    width: auto;
-    display: inline-block;
-  }
 }
 
-.login-body {
+.login-body { padding: 0 50px 40px; }
-  padding: 0 50px 40px; /* 两侧留白 */
-}
 
-/* --- Tabs 样式 --- */
 .login-tabs {
   display: flex;
   justify-content: center;
   margin-bottom: 30px;
   border-bottom: 1px solid #eee;
-
   .tab-item {
-    font-size: 16px;
+    font-size: 16px; color: #666; padding: 10px 30px; cursor: pointer; position: relative;
-    color: #666;
-    padding: 10px 30px;
-    cursor: pointer;
-    position: relative;
-    transition: color 0.3s;
-
     &.active {
-      color: #d12323; /* 红色高亮 */
+      color: #d12323; font-weight: 500;
-      font-weight: 500;
+      &::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: #d12323; }
-
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: -1px; /* 盖住底边框 */
-        left: 0;
-        width: 100%;
-        height: 2px;
-        background-color: #d12323;
-      }
-    }
-
-    &:hover {
-      color: #d12323;
     }
   }
 }
 
-/* --- 表单样式 --- */
-.login-form {
-  .form-item {
-    margin-bottom: 20px;
-  }
-
-  /* 覆盖 DevUI Input 样式以匹配设计 */
-  :deep(.devui-input__wrapper) {
-    border-radius: 4px;
-    border-color: #ddd;
-    box-shadow: none;
-
-    //&:hover, &.is-focus {
-    //  border-color: #d12323; /* 聚焦时红色边框 */
-    //}
-  }
-
-  :deep(.devui-input__inner) {
-    height: 44px; /* 增加输入框高度 */
-    font-size: 14px;
-  }
-}
-
-/* 验证码行 */
 .verify-row {
-  display: flex;
+  display: flex; gap: 10px; align-items: center;
-  gap: 10px;
+  .verify-input { flex: 1; }
-  align-items: center;
-
-  .verify-input {
-    flex: 1;
-  }
-
-  /* 图形验证码 */
   .captcha-box {
-    width: 100px;
+    width: 100px; height: 44px; border: 1px solid #ddd; border-radius: 4px;
-    height: 44px;
+    display: flex; align-items: center; justify-content: center;
-    border: 1px solid #ddd;
+    cursor: pointer; background-color: #f9f9f9; overflow: hidden;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    background-color: #f9f9f9;
-    font-size: 18px;
-    letter-spacing: 4px;
-    color: #333;
-    /* 实际使用 img 标签 */
-  }
 
-  /* 获取验证码按钮 */
+    .captcha-img { width: 100%; height: 30px; object-fit: cover; }
-  .get-code-btn {
+    .loading-text { font-size: 12px; color: #999; }
-    //color: #d12323 !important;
-    font-size: 14px;
-    padding: 0 10px;
-
-    &:disabled {
-      color: #999 !important;
-    }
   }
 }
 
-/* --- 辅助功能行 --- */
 .extra-row {
-  display: flex;
+  display: flex; justify-content: space-between; align-items: center;
-  justify-content: space-between;
+  margin-top: 10px; margin-bottom: 30px; font-size: 14px;    color: #666;
-  align-items: center;
-  margin-bottom: 30px;
-  font-size: 14px;
-  color: #666;
-
-  :deep(.devui-checkbox-label) {
-    color: #666;
-  }
-
-  .right-links {
-    .link-btn {
-      //color: #d12323;
-      text-decoration: none;
-      cursor: pointer;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    .divider {
-      margin: 0 8px;
-      color: #ddd;
-    }
-  }
 }
 
-///* --- 登录按钮 --- */
-//.submit-btn {
-//  background-color: #d12323 !important; /* 强制红色背景 */
-//  border-color: #d12323 !important;
-//  color: #fff !important;
-//  font-size: 16px;
-//  height: 48px;
-//  border-radius: 4px;
-//
-//  &:hover {
-//    background-color: #b01d1d !important;
-//    border-color: #b01d1d !important;
-//  }
-//}
-
-/* --- 底部链接 --- */
 .footer-links {
   text-align: center;
   margin-top: 40px;
 
+
   a {
     color: #999;
     font-size: 14px;
     text-decoration: none;
     margin: 0 10px;
-
-    &:hover {
-      color: #666;
-    }
   }
 }
+
+.right-links {
+  .link-btn {
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .divider {
+    margin: 0 8px;
+    color: #ddd;
+  }
+}
+
+/* 覆盖 DevUI FormItem 间距 */
+:deep(.devui-form-item) {
+  margin-bottom: 20px;
+}
 </style>

src/utils/jsencrypt.ts

@@ -0,0 +1,11 @@
+import JSEncrypt from 'jsencrypt';
+
+const PUBLIC_KEY =
+  'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCcXz5g5hNGAOgFOVhiYY8pYlrH3gXmHkYRBqqEHsVaKqjdY9PQbkfSb9VkD78VYwFyTSzMZn5e1A5XXXDTUL3PezflMc/GjvseB87OQ3a6XDHw5tVXiJruc72oN9GKEvh5TjQUzi2S1sTHXg8vdD/niXw+K/icrQFdzSpy1PWc6QIDAQAB';
+const pubKey = `-----BEGIN PUBLIC KEY-----${PUBLIC_KEY}-----END PUBLIC KEY-----`;
+
+export default (str: string) => {
+  const encryptStr = new JSEncrypt();
+  encryptStr.setPublicKey(pubKey);
+  return encryptStr.encrypt(str.toString());
+};

vite.config.ts

@@ -38,12 +38,12 @@ export default (config: any) => {
       },
       proxy: {
         // 配置跨域代理
-        '/gateway/official/u-auth/index/getCaptcha': {
+        // '/gateway/official/u-auth/index/getCaptcha': {
-          // target: 'http://223.76.236.155:20011', // 目标服务器地址
+        //   // target: 'http://223.76.236.155:20011', // 目标服务器地址
-          target: 'http://222.20.126.217:9700', // 目标服务器地址
+        //   target: 'http://222.20.126.217:9700', // 目标服务器地址
-          changeOrigin: true, // 允许跨域
+        //   changeOrigin: true, // 允许跨域
-          rewrite: (path) => path.replace('/gateway/official/u-auth', '/gateway/u-auth') // 重写路径
+        //   rewrite: (path) => path.replace('/gateway/official/u-auth', '/gateway/u-auth') // 重写路径
-        },
+        // },
         '/gateway': {
           // target: 'http://223.76.236.155:20011', // 目标服务器地址
           target: 'http://222.20.126.217:10010', // 目标服务器地址