zant-admin 1.0.1 → 2.0.0

package/src/views/login.vue

@@ -1,144 +1,131 @@
 <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-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-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-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,6 +135,7 @@ 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',
@@ -173,7 +161,7 @@ const onFinish = values => {
       user.token = res.data.token
       user.userInfo = res.data
       message.success('登录成功')
-         // 重置路由状态并重新加载动态路由
+      // 重置路由状态并重新加载动态路由
       try {
         await refreshRoutes()
         router.push('/console')
@@ -220,39 +208,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 +365,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/logQuartz.vue

@@ -50,7 +50,6 @@ const columns = ref([
   {
     title: '异常',
     dataIndex: 'error',
-
   },
 ])
 </script>

package/src/views/operations/quartz.vue

@@ -3,7 +3,7 @@
     :formState="formState"
     :columns="columns"
     modulePath="quartz"
-   :permissionModulePath="permissionModulePath"
+    :permissionModulePath="permissionModulePath"
     @edit="edit"
     ftableDeleteAction="deleteTask"
     ref="childRef"
@@ -19,30 +19,29 @@
     </template>
     <template #custom-operation="{ record }">
       <a-divider type="vertical" />
-      <a-dropdown class="" >
-        <a @click.prevent > 更多 <DownOutlined /></a>
+      <a-dropdown class="">
+        <a @click.prevent> 更多 <DownOutlined /></a>
         <template #overlay>
-
-          <a-menu @click="e => moreClick(e, record.id)" >
-            <span  v-permission="permissionModulePath+':resumeTask'">
-                   <a-menu-item key="1">
-               <a @click="empower(record)" >恢复任务</a>
-             </a-menu-item>
+          <a-menu @click="e => moreClick(e, record.id)">
+            <span v-permission="permissionModulePath + ':resumeTask'">
+              <a-menu-item key="1">
+                <a @click="empower(record)">恢复任务</a>
+              </a-menu-item>
             </span>
-            <span  v-permission="permissionModulePath+':pauseTask'">
-                  <a-menu-item key="2">
-                  <a @click="empower(record)" >暂停任务</a>
-                </a-menu-item>
+            <span v-permission="permissionModulePath + ':pauseTask'">
+              <a-menu-item key="2">
+                <a @click="empower(record)">暂停任务</a>
+              </a-menu-item>
             </span>
-                 <span  v-permission="permissionModulePath+':executeTask'">
-                  <a-menu-item key="3">
-                  <a @click="empower(record)" >立即执行</a>
-                </a-menu-item>
+            <span v-permission="permissionModulePath + ':executeTask'">
+              <a-menu-item key="3">
+                <a @click="empower(record)">立即执行</a>
+              </a-menu-item>
             </span>
-                 <span  v-permission="permissionModulePath+':viewLog'">
-                  <a-menu-item key="4">
-                  <a @click="empower(record)" >执行记录</a>
-                </a-menu-item>
+            <span v-permission="permissionModulePath + ':viewLog'">
+              <a-menu-item key="4">
+                <a @click="empower(record)">执行记录</a>
+              </a-menu-item>
             </span>
           </a-menu>
         </template>
@@ -66,7 +65,7 @@
     :footer="null"
     :destroyOnClose="true"
   >
-     <logQuartz :recordwhere="recordwhere"> </logQuartz>
+    <logQuartz :recordwhere="recordwhere"> </logQuartz>
   </a-modal>
 </template>
 <script setup>
@@ -75,7 +74,7 @@ import FormTable from '@/components/FormTable.vue'
 import QuartzEdit from '@/components/edit/QuartzEdit.vue'
 import logQuartz from '@/views/operations/log/logQuartz.vue'
 import quartz from '@/api/methods/quartz'
-import {  message } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 // 权限模块路径
 const permissionModulePath = ref('operations:quartz')
 
@@ -175,7 +174,6 @@ const childRef = ref(null)
 const refreshData = () => {
   childRef.value.tableLoad()
 }
-
 </script>
 
 <style></style>

package/src/views/system/sysAccount.vue

@@ -3,7 +3,7 @@
     :formState="formState"
     :columns="columns"
     modulePath="sysAccount"
-   :permissionModulePath="permissionModulePath"
+    :permissionModulePath="permissionModulePath"
     @edit="edit"
     ref="childRef"
   >
@@ -35,16 +35,21 @@ import sysRole from '@/api/methods/sysRole'
 // 权限模块路径
 const permissionModulePath = ref('system:sysAccount')
 const formState = ref({
-  name: { label: '账号名称', value: '',defaultvalue:'', type: 'text' },
-  mobile: { label: '手机号', value: '',defaultvalue:'', type: 'text' },
+  name: { label: '账号名称', value: '', defaultvalue: '', type: 'text' },
+  mobile: { label: '手机号', value: '', defaultvalue: '', type: 'text' },
   roleId: {
     label: '角色',
     value: null,
-    defaultvalue:null,
+    defaultvalue: null,
     type: 'select',
     data: [],
   },
-  createTime: { label: '日期范围', value: null, defaultvalue:null, type: 'time' },
+  createTime: {
+    label: '日期范围',
+    value: null,
+    defaultvalue: null,
+    type: 'time',
+  },
 })
 
 const fetchRoleData = async () => {
@@ -63,32 +68,32 @@ const columns = ref([
   {
     title: '账号名称',
     dataIndex: 'name',
-     resizable: true,
+    resizable: true,
   },
   {
     title: '手机号',
     dataIndex: 'mobile',
-     resizable: true,
+    resizable: true,
   },
   {
     title: '角色',
     dataIndex: 'roleName',
-     resizable: true,
+    resizable: true,
   },
   {
     title: '备注',
     dataIndex: 'remark',
-     resizable: true,
+    resizable: true,
   },
   {
     title: '是否启用',
     key: 'isEnable',
-     resizable: true,
+    resizable: true,
   },
   {
     title: '创建时间',
     dataIndex: 'createTime',
-     resizable: true,
+    resizable: true,
   },
   {
     title: '操作',

package/src/views/system/sysDict.vue

@@ -2,9 +2,9 @@
   <form-table
     :formState="formState"
     :columns="columns"
-     modulePath="sysDict"
+    modulePath="sysDict"
     :permissionModulePath="permissionModulePath"
-     @edit="edit"
+    @edit="edit"
     ref="childRef"
   >
     <template #table-toolbar="{ record }">
@@ -21,9 +21,13 @@
         @change="handleSwitchChange(record)"
       />
     </template>
-      <template #custom-operation="{ record }">
+    <template #custom-operation="{ record }">
       <a-divider type="vertical" />
-      <a @click="configuration(record)"  v-permission="permissionModulePath+':configuration'">配置字典项</a>
+      <a
+        @click="configuration(record)"
+        v-permission="permissionModulePath + ':configuration'"
+        >配置字典项</a
+      >
     </template>
   </form-table>
   <!-- 编辑 -->
@@ -44,8 +48,7 @@
     wrap-class-name="full-modal"
     :destroyOnClose="true"
   >
-    <SysDictItem :recordwhere="recordwhere" ref="childPageRef">
-    </SysDictItem>
+    <SysDictItem :recordwhere="recordwhere" ref="childPageRef"> </SysDictItem>
   </a-modal>
 </template>
 <script setup>