fix login

src/api/WarningList/index.ts

@@ -5,7 +5,7 @@ import { DemoQuery } from './types';
  * 设备告警分页列表
  * @param query id、deviceId、分页、时间范围等
  */
-export const listDemo = (query?: DemoQuery) => {
+export const listDemo = (query?: any) => {
   return request({
     url: '/device/deviceAlarm/list',
     method: 'get',

src/views/WarningList/list.vue

@@ -13,7 +13,22 @@
               </el-select>
             </el-form-item>
             <el-form-item label="报警时间" prop="alarmTime">
-              <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
+              <el-date-picker
+                v-model="queryParams.endTime"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+              />
+              <el-date-picker
+                v-model="queryParams.endTime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+              />
             </el-form-item>
             <el-form-item label="报警区域" prop="monitoringArea">
               <el-input v-model="queryParams.monitoringArea" placeholder="请输入监控区域" clearable @keyup.enter="handleQuery" />
@@ -63,7 +78,7 @@
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
           <template #default="scope">
-            <el-button v-hasPermi="['demo:demo:edit']" type="primary" link @click="handleUpdate(scope.row)">处理</el-button>
+            <el-button type="primary" @click="handleUpdate(scope.row)">处理</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -91,7 +106,7 @@
           <span v-else>{{ form.status ?? '-' }}</span>
         </el-form-item>
         <el-form-item label="处理人">
-          <el-input :model-value="form.userName ?? '-'" disabled />
+          <el-input :model-value="form.userId ?? '-'" disabled />
         </el-form-item>
         <el-form-item label="处理时间">
           <el-input :model-value="form.processingTime ?? '-'" disabled />
@@ -160,7 +175,7 @@ const getList = async () => {
   loading.value = true;
   try {
     const res = await listDemo(queryParams.value);
-    demoList.value = res.rows;
+    demoList.value = res.data.rows;
     total.value = res.total;
   } finally {
     loading.value = false;

src/views/login.vue

@@ -1,64 +1,74 @@
 <template>
   <div class="login">
-    <div>1111</div>
+    <div class="login-cards">
-    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+      <div class="login-brand">
-      <div class="title-box">
+        <div class="login-brand__inner">
-        <h3 class="title">欢迎登录</h3>
+          <div class="login-brand__logo-wrap">
-        <p>请输入您的账号和密码访问系统</p>
+            <img class="login-brand__logo" :src="logoUrl" alt="" />
-        <!-- <lang-select /> -->
+          </div>
+          <h1 class="login-brand__title">可视化电子围栏管理系统</h1>
+          <p class="login-brand__subtitle">智能安防 · 实时监控 · 高效管理</p>
+        </div>
       </div>
-      <!-- <el-form-item v-if="tenantEnabled" prop="tenantId">
+      <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+        <div class="title-box">
+          <h3 class="title">欢迎登录</h3>
+          <p>请输入您的账号和密码访问系统</p>
+          <!-- <lang-select /> -->
+        </div>
+        <!-- <el-form-item v-if="tenantEnabled" prop="tenantId">
         <el-select v-model="loginForm.tenantId" filterable :placeholder="proxy.$t('login.selectPlaceholder')" style="width: 100%">
           <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></el-option>
           <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
         </el-select>
       </el-form-item> -->
-      <el-form-item label="账号" prop="username">
+        <el-form-item label="账号" prop="username">
-        <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" :placeholder="proxy.$t('login.username')">
+          <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" :placeholder="proxy.$t('login.username')">
-          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+            <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
-        </el-input>
+          </el-input>
-      </el-form-item>
+        </el-form-item>
-      <el-form-item label="密码" prop="password">
+        <el-form-item label="密码" prop="password">
-        <el-input
+          <el-input
-          v-model="loginForm.password"
+            v-model="loginForm.password"
-          type="password"
+            type="password"
-          size="large"
+            size="large"
-          auto-complete="off"
+            auto-complete="off"
-          :placeholder="proxy.$t('login.password')"
+            :placeholder="proxy.$t('login.password')"
-          @keyup.enter="handleLogin"
+            @keyup.enter="handleLogin"
-        >
+          >
-          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+            <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
-        </el-input>
+          </el-input>
-      </el-form-item>
+        </el-form-item>
-      <el-form-item v-if="captchaEnabled" prop="code">
+        <el-form-item v-if="captchaEnabled" prop="code">
-        <el-input
+          <el-input
-          v-model="loginForm.code"
+            v-model="loginForm.code"
-          size="large"
+            size="large"
-          auto-complete="off"
+            auto-complete="off"
-          :placeholder="proxy.$t('login.code')"
+            :placeholder="proxy.$t('login.code')"
-          style="width: 63%"
+            style="width: 63%"
-          @keyup.enter="handleLogin"
+            @keyup.enter="handleLogin"
-        >
+          >
-          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+            <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
-        </el-input>
+          </el-input>
-        <div class="login-code">
+          <div class="login-code">
-          <img :src="codeUrl" class="login-code-img" @click="getCode" />
+            <img :src="codeUrl" class="login-code-img" @click="getCode" />
+          </div>
+        </el-form-item>
+        <div class="login-form__extras">
+          <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
+          <el-button link type="primary" @click="doSocialLogin('github')">忘记密码</el-button>
         </div>
-      </el-form-item>
+        <el-form-item style="width: 100%">
-      <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">记住密码</el-checkbox>
+          <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
-      <el-form-item style="float: right">
+            <span v-if="!loading">{{ proxy.$t('login.login') }}</span>
-        <el-button link type="primary" @click="doSocialLogin('github')"> 忘记密码 </el-button>
+            <span v-else>{{ proxy.$t('login.logging') }}</span>
-      </el-form-item>
+          </el-button>
-      <el-form-item style="width: 100%">
+          <div v-if="register" style="float: right">
-        <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
+            <router-link class="link-type" :to="'/register'">{{ proxy.$t('login.switchRegisterPage') }}</router-link>
-          <span v-if="!loading">{{ proxy.$t('login.login') }}</span>
+          </div>
-          <span v-else>{{ proxy.$t('login.logging') }}</span>
+        </el-form-item>
-        </el-button>
+      </el-form>
-        <div v-if="register" style="float: right">
+    </div>
-          <router-link class="link-type" :to="'/register'">{{ proxy.$t('login.switchRegisterPage') }}</router-link>
-        </div>
-      </el-form-item>
-    </el-form>
   </div>
 </template>
 
@@ -70,10 +80,10 @@ import { LoginData, TenantVO } from '@/api/types';
 import { to } from 'await-to-js';
 import { HttpStatus } from '@/enums/RespEnum';
 import { useI18n } from 'vue-i18n';
+import logoUrl from '@/assets/logo/logo.png';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
-const title = import.meta.env.VITE_APP_TITLE;
 const userStore = useUserStore();
 const router = useRouter();
 const { t } = useI18n();
@@ -221,23 +231,126 @@ onMounted(() => {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
+  box-sizing: border-box;
+  min-height: 100vh;
+  width: 100%;
+  padding: 24px;
   background-image: url('../assets/images/logbg.jpg');
   background-size: cover;
   background-position: center;
 }
 
+.login-cards {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: stretch;
+  gap: 0;
+  max-width: 100%;
+}
+
+.login-brand {
+  flex: 0 0 auto;
+  width: min(420px, 90vw);
+  max-width: 420px;
+  height: 450px;
+  max-height: 450px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--app-radius-lg);
+  background: linear-gradient(165deg, #2d60e3 0%, #1a4bb8 55%, #153d9a 100%);
+  box-shadow: 0 24px 48px rgba(30, 64, 175, 0.35);
+  z-index: 0;
+}
+
+.login-brand__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 36px 28px;
+  gap: 16px;
+  box-sizing: border-box;
+}
+
+.login-brand__logo-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 88px;
+  height: 88px;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.login-brand__logo {
+  width: 56px;
+  height: 56px;
+  object-fit: contain;
+}
+
+.login-brand__title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.35;
+  color: #fff;
+  letter-spacing: 0.5px;
+}
+
+.login-brand__subtitle {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.92);
+  letter-spacing: 0.3px;
+}
+
+@media (max-width: 900px) {
+  .login-cards {
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .login-brand {
+    width: min(420px, 100%);
+    max-width: 420px;
+    height: 450px;
+    max-height: 450px;
+    border-radius: var(--app-radius-lg);
+  }
+
+  .login-form {
+    border-radius: 10px;
+  }
+}
+
 .title-box {
-  //display: flex;
+  flex-shrink: 0;
-  //align-items: center;
   gap: 8px;
 
   .title {
-    margin: 0px auto 26px auto;
+    margin: 0 0 10px 0;
-    //text-align: center;
+    font-size: 22px;
-    color: var(--el-text-color-primary);
+    font-weight: 700;
-    font-weight: 600;
+    line-height: 1.3;
-    letter-spacing: 0.5px;
+    color: #111827;
+    letter-spacing: 0;
+  }
+
+  > p {
+    margin: 0 0 28px 0;
+    font-size: 13px;
+    line-height: 1.5;
+    color: #9ca3af;
+    font-weight: 400;
   }
 
   :deep(.lang-select--style) {
@@ -247,15 +360,89 @@ onMounted(() => {
 }
 
 .login-form {
-  border-radius: var(--app-radius-lg);
+  flex: 0 0 auto;
-  background: rgba(255, 255, 255, 0.94);
+  display: flex;
-  border: 1px solid rgba(255, 255, 255, 0.5);
+  flex-direction: column;
+  box-sizing: border-box;
+  min-height: 0;
   width: min(420px, 90vw);
-  padding: 32px 30px 12px 30px;
+  height: 450px;
+  max-height: 450px;
+  padding: 44px 48px 36px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-radius: 10px;
+  background: #ffffff;
+  border: 1px solid #ebebeb;
   z-index: 1;
-  box-shadow: var(--app-shadow-lg);
+  box-shadow:
-  backdrop-filter: blur(6px);
+    0 12px 40px rgba(15, 23, 42, 0.08),
-  -webkit-backdrop-filter: blur(6px);
+    0 2px 10px rgba(15, 23, 42, 0.04);
+
+  :deep(.el-form-item__label) {
+    color: #1f2937;
+    font-weight: 500;
+  }
+
+  :deep(.el-form-item) {
+    margin-bottom: 14px;
+  }
+
+  :deep(.el-form-item:last-child) {
+    margin-bottom: 0;
+    margin-top: auto;
+  }
+
+  :deep(.el-input__wrapper) {
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 0 0 1px #e5e7eb inset;
+  }
+
+  :deep(.el-input__wrapper:hover) {
+    box-shadow: 0 0 0 1px #d1d5db inset;
+  }
+
+  :deep(.el-input__wrapper.is-focus) {
+    box-shadow:
+      0 0 0 1px #2d60e3 inset,
+      0 0 0 3px rgba(45, 96, 227, 0.12);
+  }
+
+  :deep(.el-button--primary) {
+    border-radius: 8px;
+    font-weight: 600;
+    border: none;
+    box-shadow: none;
+  }
+
+  .login-form__extras {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    flex-shrink: 0;
+    margin-bottom: 14px;
+  }
+
+  :deep(.login-form__extras .el-checkbox) {
+    margin-right: 0;
+    height: auto;
+  }
+
+  :deep(.login-form__extras .el-checkbox__label) {
+    color: #374151;
+    font-size: 14px;
+  }
+
+  :deep(.login-form__extras .el-button.is-link) {
+    padding: 0;
+    height: auto;
+    font-size: 14px;
+    vertical-align: baseline;
+  }
+
   .el-input {
     height: 40px;
     input {
@@ -276,19 +463,6 @@ onMounted(() => {
   color: #bfbfbf;
 }
 
-.login-form :deep(.el-input__wrapper) {
-  background-color: rgba(255, 255, 255, 0.9);
-}
-
-.login-form :deep(.el-input__wrapper.is-focus) {
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
-}
-
-//.login-form :deep(.el-button--primary) {
-//  border-radius: var(--app-radius-md);
-//  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
-//}
-
 .login-form :deep(.el-button.is-circle) {
   background: rgba(15, 23, 42, 0.04);
   border: 1px solid rgba(15, 23, 42, 0.08);
@@ -340,6 +514,11 @@ onMounted(() => {
 }
 
 :global(html.dark) {
+  .login-brand {
+    background: linear-gradient(165deg, #2563eb 0%, #1d4ed8 55%, #1e3a8a 100%);
+    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.45);
+  }
+
   .login-form {
     background: rgba(17, 24, 39, 0.9);
     border-color: rgba(148, 163, 184, 0.2);