zant-admin 1.0.4 → 2.0.1

package/src/views/login.vue

@@ -1,144 +1,141 @@
 <template>
   <div class="app">
-    <div class="demo-login">
-      <div class="tel flex-row">
-        <img src="@/assets/imgs/logo.png" alt="" width="50px" />ZAntAdmin
+    <div class="app-flex-row">
+      <div class="app-flex-row-left">
+        <div class="logo-wrapper">
+          <img src="@/assets/imgs/logo.png" alt="Logo" class="logo-img" />
+          <span class="logo-text">Zant Admin</span>
+        </div>
+        <div class="description">
+          <h2>
+            <span class="text-white">构建现代化的</span><br />
+            <span class="text-gradient">全栈管理系统</span>
+          </h2>
+          <p>基于 Vue 3.5 + Ant Design Vue 的现代化前端开发框架</p>
+          <p>提供开箱即用的高质量组件，助您快速构建专业应用</p>
+        </div>
       </div>
-      <a-tabs v-model:activeKey="activeKey" centered tabBarGutter="10">
-        <a-tab-pane key="1" tab="密码登录">
-          <a-form
-            :model="formState"
-            name="normal_login"
-            class="login-form"
-            @finish="onFinish"
-            @finishFailed="onFinishFailed"
-          >
-            <a-form-item
-              name="mobile"
-              :rules="[{ required: true, message: '手机号码不能为空!' }]"
-            >
-              <a-input
-                v-model:value="formState.mobile"
-                placeholder="请输入手机号码"
-                size="large"
-              >
-                <template #prefix>
-                  <MobileOutlined class="site-form-item-icon" />
-                </template>
-              </a-input>
-            </a-form-item>
-            <a-form-item
-              name="password"
-              :rules="[{ required: true, message: '密码不能为空!' }]"
-            >
-              <a-input-password
-                v-model:value="formState.password"
-                placeholder="请输入密码"
-                size="large"
-              >
-                <template #prefix>
-                  <LockOutlined class="site-form-item-icon" />
-                </template>
-              </a-input-password>
-            </a-form-item>
-            <a-form-item>
-              <a-form-item name="remember" no-style>
-                <a-checkbox v-model:checked="formState.remember"
-                  >自动登录</a-checkbox
-                >
-              </a-form-item>
-              <a class="login-form-forgot" href="">忘记密码</a>
-            </a-form-item>
-
-            <a-form-item>
-              <a-button
-                :disabled="disabled"
-                type="primary"
-                :loading="loading"
-                html-type="submit"
-                size="large"
-                class="login-form-button"
-              >
-                登录
-              </a-button>
-            </a-form-item>
-          </a-form>
-        </a-tab-pane>
-        <a-tab-pane key="2" tab="验证码登录" force-render>
-          <a-form
-            :model="formState"
-            name="normal_login"
-            class="login-form"
-            @finish="onFinish"
-            @finishFailed="onFinishFailed"
-          >
-            <a-form-item
-              name="mobile"
-              :rules="[{ required: true, message: '手机号码不能为空!' }]"
-            >
-              <a-input
-                v-model:value="formState.mobile"
-                placeholder="请输入手机号码"
-                size="large"
-              >
-                <template #prefix>
-                  <MobileOutlined class="site-form-item-icon" />
-                </template>
-              </a-input>
-            </a-form-item>
-            <a-row :gutter="16">
-              <a-col :span="16">
-                <a-form-item
-                  name="mobile"
-                  :rules="[{ required: true, message: '验证码不能为空!' }]"
-                >
-                  <a-input
-                    v-model:value="formState.vercode"
-                    placeholder="请输入验证码"
-                    size="large"
-                  >
+      <div class="app-flex-row-right">
+        <div class="demo-login">
+          <div class="tel">
+            欢迎使用
+          </div>
+          <a-tabs v-model:activeKey="activeKey" tabBarGutter="10">
+            <a-tab-pane key="1" tab="账号密码登录">
+              <a-form :model="formState" name="normal_login" class="login-form" @finish="onFinish"
+                @finishFailed="onFinishFailed">
+                <a-form-item name="mobile" :rules="[{ required: true, message: '手机号码不能为空!' }]">
+                  <a-input v-model:value="formState.mobile" placeholder="请输入手机号码" size="large">
+                    <template #prefix>
+                      <MobileOutlined class="site-form-item-icon" />
+                    </template>
+                  </a-input>
+                </a-form-item>
+                <a-form-item name="password" :rules="[{ required: true, message: '密码不能为空!' }]">
+                  <a-input-password v-model:value="formState.password" placeholder="请输入密码" size="large">
                     <template #prefix>
                       <LockOutlined class="site-form-item-icon" />
                     </template>
+                  </a-input-password>
+                </a-form-item>
+                <a-form-item>
+                  <a-form-item name="remember" no-style>
+                    <a-checkbox v-model:checked="formState.remember">自动登录</a-checkbox>
+                  </a-form-item>
+                  <a class="login-form-forgot" href="">忘记密码</a>
+                </a-form-item>
+
+                <a-form-item>
+                  <a-button :disabled="disabled" type="primary" :loading="loading" html-type="submit" size="large"
+                    class="login-form-button">
+                    登录
+                  </a-button>
+                </a-form-item>
+              </a-form>
+            </a-tab-pane>
+            <a-tab-pane key="2" tab="手机号登录" force-render>
+              <a-form :model="formState" name="normal_login" class="login-form" @finish="onFinish"
+                @finishFailed="onFinishFailed">
+                <a-form-item name="mobile" :rules="[{ required: true, message: '手机号码不能为空!' }]">
+                  <a-input v-model:value="formState.mobile" placeholder="请输入手机号码" size="large">
+                    <template #prefix>
+                      <MobileOutlined class="site-form-item-icon" />
+                    </template>
                   </a-input>
                 </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-button
-                  size="large"
-                  class="login-form-button"
-                  @click="sendSmsCode"
-                  :disabled="smsdisabled"
-                >
-                  {{ smstext }}
-                </a-button>
-              </a-col>
-            </a-row>
-            <a-form-item>
-              <a-form-item name="remember" no-style>
-                <a-checkbox v-model:checked="formState.remember"
-                  >自动登录</a-checkbox
+                <a-row :gutter="16">
+                  <a-col :span="16">
+                    <a-form-item name="mobile" :rules="[{ required: true, message: '验证码不能为空!' }]">
+                      <a-input v-model:value="formState.vercode" placeholder="请输入验证码" size="large">
+                        <template #prefix>
+                          <LockOutlined class="site-form-item-icon" />
+                        </template>
+                      </a-input>
+                    </a-form-item>
+                  </a-col>
+                  <a-col :span="8">
+                    <a-button size="large" class="login-form-button" @click="sendSmsCode" :disabled="smsdisabled">
+                      {{ smstext }}
+                    </a-button>
+                  </a-col>
+                </a-row>
+                <a-form-item>
+                  <a-form-item name="remember" no-style>
+                    <a-checkbox v-model:checked="formState.remember">自动登录</a-checkbox>
+                  </a-form-item>
+                  <a class="login-form-forgot" href="">忘记密码</a>
+                </a-form-item>
+
+                <a-form-item>
+                  <a-button :disabled="disabled" type="primary" :loading="loading" html-type="submit" size="large"
+                    class="login-form-button">
+                    登录
+                  </a-button>
+                </a-form-item>
+              </a-form>
+
+            </a-tab-pane>
+          </a-tabs>
+           <a-alert
+                  type="info"
+                  show-icon
+                  style="margin-bottom: 16px"
                 >
-              </a-form-item>
-              <a class="login-form-forgot" href="">忘记密码</a>
-            </a-form-item>
-            <a-form-item>
-              <a-button
-                :disabled="disabled"
-                type="primary"
-                :loading="loading"
-                html-type="submit"
-                size="large"
-                class="login-form-button"
-              >
-                登录
-              </a-button>
-            </a-form-item>
-          </a-form>
-        </a-tab-pane>
-      </a-tabs>
+                  <template #message>
+                    测试账号：<b>admin</b> &nbsp;&nbsp;密码：<b>123456</b>
+                  </template>
+                </a-alert>
+          <a-divider>其他登录方式</a-divider>
+          <div class="text-align-center">
+            <a-space size="large">
+              <a href="" target="_blank">
+                <WechatOutlined style="font-size: 24px; color: #4dbf00;" />
+              </a>
+
+              <a href="" target="_blank">
+                <QqOutlined style="font-size: 24px; color: #0099ff;" />
+              </a>
+
+              <a href="" target="_blank">
+                <AlipayCircleOutlined style="font-size: 24px; color:#0099ff;" />
+              </a>
+
+              <a href="" target="_blank">
+                <TaobaoCircleOutlined style="font-size: 24px; color: #ff6600;" />
+              </a>
+              <a href="" target="_blank">
+                <GithubOutlined style="font-size: 24px; color: #000;" />
+              </a>
+            </a-space>
+
+          </div>
+
+        </div>
+         <div class="footer">Copyright © 2025 ZantAdmin</div>
+      </div>
+
     </div>
-    <div class="footer">Copyright © 2025 *********</div>
+
   </div>
 </template>
 <script setup>
@@ -148,9 +145,10 @@ import router, { refreshRoutes } from '@/router'
 import { useUserStore } from '@/stores/user'
 import { reactive, computed, ref } from 'vue'
 import { message } from 'ant-design-vue'
+import { MessageOutlined, QqOutlined } from '@ant-design/icons-vue'
 const formState = reactive({
-  mobile: '123456',
-  password: '123456',
+  mobile: '',
+  password: '',
   remember: true,
   vercode: '',
 })
@@ -220,39 +218,154 @@ const sendSmsCode = () => {
     }, 1000)
   })
 }
+
+// 微信登录
+const loginWithWechat = () => {
+  message.info('微信登录功能开发中，敬请期待')
+  // 这里可以添加实际的微信登录逻辑
+  // 例如：跳转到微信授权页面或打开微信扫码登录
+}
+
+// QQ登录
+const loginWithQQ = () => {
+  message.info('QQ登录功能开发中，敬请期待')
+  // 这里可以添加实际的QQ登录逻辑
+  // 例如：跳转到QQ授权页面或打开QQ扫码登录
+}
 </script>
 <style scoped>
 .app {
   height: 100vh !important;
+  width: 100vw !important;
   display: flex !important;
   align-items: center !important;
-  background-image: url(../assets/imgs/loginbackground.svg);
   background-size: 100% 100%;
 }
 
-.demo-login {
-  width: 400px !important;
+.app-flex-row {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.app-flex-row-left {
+  width: 65%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #0f172a; /* Dark background to match the image */
+  position: relative;
+  overflow: hidden;
+  color: #fff;
+}
+
+.app-flex-row-left::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+}
+
+.logo-wrapper {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  display: flex;
+  align-items: center;
+  z-index: 10;
+}
+
+.logo-img {
+  width: 25px;
+  height: 25px;
+  margin-right: 16px;
+}
+
+.logo-text {
+  font-size: 20px;
+  font-weight: bold;
+  letter-spacing: 1px;
+}
+
+.illustration-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80%;
+  max-width: 600px;
+  z-index: 10;
+}
+
+.illustration-img {
+  width: 100%;
   height: auto;
-  margin: 0 auto;
-  background-color: rgba(255, 255, 255, 1);
-  padding: 30px;
-  border-radius: 20px;
+  object-fit: contain;
 }
 
-.demo-auto-login {
-  margin-bottom: 60px;
-  text-align: left;
+.description {
+  margin-bottom: 20px;
+  text-align: center;
+  z-index: 10;
 }
 
-.demo-auto-login a {
-  float: right;
+.description h2 {
+  font-size: 64px;
+  font-weight: 900;
+  margin-bottom: 24px;
+  line-height: 1.1;
+  letter-spacing: 2px;
+}
+
+.text-white {
+  color: #ffffff;
+}
+
+.text-gradient {
+  background: linear-gradient(90deg, #a855f7 0%, #3b82f6 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.description p {
+  font-size: 16px;
+  opacity: 0.9;
+  margin-bottom: 8px;
+  color: #e0e7ff;
+}
+
+.app-flex-row-right {
+  width: 35%;
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  position: relative;
+}
+
+.demo-login {
+  width: 400px !important;
+  height: auto;
+  margin: 0 auto;
+  padding: 30px;
 }
 
 .tel {
-  font-size: 30px;
-  text-align: center;
-  padding: 20px;
+  font-size: 24px;
+  font-weight: 600;
   color: rgb(0, 0, 0);
+  text-align: left;
+  margin-bottom: 30px;
 }
 
 .login-form-forgot {
@@ -262,11 +375,13 @@ const sendSmsCode = () => {
 .login-form-button {
   width: 100%;
 }
+
 .footer {
-  position: fixed;
+  position: absolute;
   bottom: 20px;
   left: 0;
   right: 0;
   text-align: center;
+  color: rgb(100, 100, 100);
 }
 </style>

package/src/views/operations/log/logError.vue

@@ -1,78 +1,78 @@
-<template>
-  <form-table
-    :formState="formState"
-    :columns="columns"
-    modulePath="LogError"
-    :rowSelect="false"
-    :permissionModulePath="permissionModulePath"
-    @details="details"
-  >
-  </form-table>
-  <!-- 详情 -->
-  <LogErrorDetails
-    :open="detailsopen"
-    :info="info"
-    @close="detailsopen = false"
-  >
-  </LogErrorDetails>
-</template>
-<script setup>
-import { ref } from 'vue'
-import FormTable from '@/components/FormTable.vue'
-import logError from '@/api/methods/logError'
-import LogErrorDetails from '@/components/details/logErrorDetails.vue'
-// 权限模块路径
-const permissionModulePath = ref('operations:log:logError')
-const formState = ref({
-  actionName: { label: '方法', value: '', type: 'text' },
-  code: { label: '异常码', value: '', type: 'text' },
-  createTime: { label: '日期范围', value: '', type: 'time' },
-})
-const columns = ref([
-  {
-    title: '序号',
-    key: 'num',
-    width: 80,
-  },
-  {
-    title: '方法',
-    dataIndex: 'actionName',
-    ellipsis: true,
-  },
-  {
-    title: '异常码',
-    dataIndex: 'code',
-    width: 100,
-  },
-  {
-    title: '异常内容',
-    dataIndex: 'message',
-    ellipsis: true,
-  },
-
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    width: 200,
-  },
-  {
-    title: '操作',
-    key: 'operation',
-    fixed: 'right',
-    width: 100,
-  },
-])
-//详情
-const detailsopen = ref(false)
-const info = ref({})
-const details = record => {
-  logError.detail({ id: record.id }).then(res => {
-    info.value = res.data
-    detailsopen.value = true
-  })
-}
-const detailsHandleCancel = () => {
-  detailsopen.value = false
-}
-</script>
-<style></style>
+<template>
+  <form-table
+    :formState="formState"
+    :columns="columns"
+    modulePath="LogError"
+    :rowSelect="false"
+    :permissionModulePath="permissionModulePath"
+    @details="details"
+  >
+  </form-table>
+  <!-- 详情 -->
+  <LogErrorDetails
+    :open="detailsopen"
+    :info="info"
+    @close="detailsopen = false"
+  >
+  </LogErrorDetails>
+</template>
+<script setup>
+import { ref } from 'vue'
+import FormTable from '@/components/FormTable.vue'
+import logError from '@/api/methods/logError'
+import LogErrorDetails from '@/components/details/logErrorDetails.vue'
+// 权限模块路径
+const permissionModulePath = ref('operations:log:logError')
+const formState = ref({
+  actionName: { label: '方法', value: '', type: 'text' },
+  code: { label: '异常码', value: '', type: 'text' },
+  createTime: { label: '日期范围', value: '', type: 'time' },
+})
+const columns = ref([
+  {
+    title: '序号',
+    key: 'num',
+    width: 80,
+  },
+  {
+    title: '方法',
+    dataIndex: 'actionName',
+    ellipsis: true,
+  },
+  {
+    title: '异常码',
+    dataIndex: 'code',
+    width: 100,
+  },
+  {
+    title: '异常内容',
+    dataIndex: 'message',
+    ellipsis: true,
+  },
+
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 200,
+  },
+  {
+    title: '操作',
+    key: 'operation',
+    fixed: 'right',
+    width: 100,
+  },
+])
+//详情
+const detailsopen = ref(false)
+const info = ref({})
+const details = record => {
+  logError.detail({ id: record.id }).then(res => {
+    info.value = res.data
+    detailsopen.value = true
+  })
+}
+const detailsHandleCancel = () => {
+  detailsopen.value = false
+}
+</script>
+<style></style>