1111

src/layout/index.vue

@@ -26,7 +26,7 @@
 import { onMounted, ref } from 'vue'
 import { useAppStore } from '~src/store'
 import { useRouter } from 'vue-router'
-import { initButtons } from '~sto/app'
+import { initButtons } from '~store/app'
 
 //初始组合式
 const router = useRouter()

src/layout/modules/Refresh.vue

@@ -8,8 +8,8 @@
 
 <script setup>
 import { nextTick, ref } from 'vue'
-import { setRouterData } from '~sto/user'
-import { initButtons } from '~sto/app'
+import { setRouterData } from '~store/user'
+import { initButtons } from '~store/app'
 import { delStore } from 'hc-vue3-ui'
 
 //被点击

src/layout/modules/UserInfoBar.vue

@@ -24,7 +24,7 @@ import { useRouter } from 'vue-router'
 import { useAppStore } from '~src/store'
 import website from '~src/config/index'
 import avatarPng from '~src/assets/images/avatar.png'
-import { LogOut, RefreshToken } from '~sto/user'
+//import { LogOut, RefreshToken } from '~src/store/user'
 import { calcDate, isNullES } from 'js-fast-way'
 import { getStore } from 'hc-vue3-ui'
 
@@ -50,7 +50,7 @@ onMounted(() => {
 
 //刷新token
 const getRefreshToken = () => {
-    setInterval(() => {
+    /*setInterval(() => {
         const token = getStore('token', true) || {}
         const date = calcDate(token.datetime, new Date().getTime())
         if (isNullES(date)) return
@@ -64,7 +64,7 @@ const getRefreshToken = () => {
                 router.push({ name: 'login' })
             })
         }
-    }, 10000)
+    }, 10000)*/
 }
 
 const options = [
@@ -84,7 +84,7 @@ const handleSelect = (key) => {
     if (key === 'my') {
         router.push({ name: 'user-info' })
     } else if (key === 'logout') {
-        LogOut().then()
+        //LogOut().then()
         window.$message?.info('退出成功')
         router.push({ name: 'login' })
     }

src/main.js

@@ -6,8 +6,8 @@ import router, { setupRouter } from './router'
 import App from './App.vue'
 
 //挂载全局
-import { setupComponents } from '~com'
-import { setupInstall } from '~com/install'
+import { setupComponents } from './components'
+import { setupInstall } from './components/install'
 
 //创建实例
 async function bootstrap() {

src/styles/view/login.scss

@@ -1,3 +1,28 @@
-.login-body {
+.hc-login-body {
+    position: relative;
+    background-color: #13161F;
+    overflow: hidden;
+    .hc-login-bg {
+        position: absolute;
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+    }
+    .hc-login-img {
+        position: absolute;
+        object-fit: cover;
+        height: 800px;
+        right: 0;
+        top: calc(50% - 240px);
+    }
+    .hc-login-main {
+        justify-content: end;
+        .hc-login-main-content .hc-login-form-card {
+            border-radius: 8px;
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
+            .login-title {
 
+            }
+        }
+    }
 }

src/views/login/index.vue

@@ -1,19 +1,33 @@
 <template>
-    <div class="login-body">
-        <el-form ref="formRef" :model="formValue" :rules="formRules" label-position="left" label-width="0px" size="large">
-            <el-form-item prop="username">
-                <el-input v-model="formValue.username" clearable placeholder="账号" />
-            </el-form-item>
-            <el-form-item class="mt-8" prop="password">
-                <el-input v-model="formValue.password" clearable placeholder="密码" show-password type="password" @keyup="passwordKeyUp" />
-            </el-form-item>
-            <el-form-item>
-                <el-checkbox v-model="checkbox" label="记住密码" />
-            </el-form-item>
-            <el-form-item class="mt-8">
-                <el-button :loading="loading" block type="primary" @click="formValidateClick">登 录</el-button>
-            </el-form-item>
-        </el-form>
+    <div class="hc-login-body hc-full">
+        <img class="hc-login-bg" :src="bg1Png" :data-src="bgPng" loading="lazy" alt="bg">
+        <img class="hc-login-img" :src="imgPng" :data-src="imgPng" loading="lazy" alt="bg">
+        <div class="hc-login-main hc-h-full hc-flex-center w-[50%]">
+            <div class="hc-login-main-content relative mt-30 w-[400px]">
+                <div class="app-title mb-6 text-center text-[28px] text-white font-bold">
+                    <span>欢迎使用</span>
+                    <span class="name text-red-5">数据分析</span>
+                    <span>系统</span>
+                </div>
+                <div class="hc-login-form-card bg-white p-6">
+                    <div class="login-title mb-6 text-[28px] font-bold">登录</div>
+                    <el-form ref="formRef" :model="formValue" :rules="formRules" label-position="left" label-width="0px" size="large">
+                        <el-form-item prop="username">
+                            <el-input v-model="formValue.username" clearable placeholder="请输入账号" />
+                        </el-form-item>
+                        <el-form-item class="mt-8" prop="password">
+                            <el-input v-model="formValue.password" clearable placeholder="请输入密码" show-password type="password" @keyup="passwordKeyUp" />
+                        </el-form-item>
+                        <el-form-item>
+                            <el-checkbox v-model="checkbox" label="记住密码" />
+                        </el-form-item>
+                        <el-form-item class="mb-0 mt-6">
+                            <el-button class="text-[16px] text-white" :loading="loading" block color="#20C88B" @click="formValidateClick">登 录</el-button>
+                        </el-form-item>
+                    </el-form>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -22,6 +36,9 @@ import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAppStore } from '~src/store'
 import { formValidate } from 'js-fast-way'
+import bg1Png from '~src/assets/login/bg1.png'
+import bgPng from '~src/assets/login/bg.png'
+import imgPng from '~src/assets/login/img.png'
 
 //初始化
 const router = useRouter()
@@ -29,6 +46,10 @@ const store = useAppStore()
 
 onMounted(() => {
     store.clearStoreData() //先清理下缓存
+    // 兼容性脚本，如果loading属性不被支持
+    document.querySelectorAll('img[loading="lazy"]').forEach((img) => {
+        img.src = img.dataset.src
+    })
 })
 
 //表单

vite.config.js

@@ -12,11 +12,8 @@ export default defineConfig({
     resolve: {
         alias: {
             '~src': `${resolve(__dirname, './src')}`,
-            '~ass': resolve(__dirname, './src/assets'),
-            '~com': `${resolve(__dirname, './src/components')}`,
             '~api': resolve(__dirname, './src/api/modules'),
-            '~sto': resolve(__dirname, './src/store/modules'),
-            '~uti': resolve(__dirname, './src/utils'),
+            '~store': resolve(__dirname, './src/store/modules'),
         },
     },
     plugins: [
@@ -30,7 +27,7 @@ export default defineConfig({
                 manualChunks(id) {
                     let libStr = `
                     @vue,vue-router,pinia,hc-vue3-ui,js-fast-way,element-plus,
-                    echarts,vuedraggable,split.js,nprogress,avue-plugin-ueditor,@smallwei/avue`;
+                    echarts,vuedraggable,split.js,nprogress,avue-plugin-ueditor,@smallwei/avue`
                     const libs = libStr.split(',')
                     if (id.includes('node_modules')) {
                         const arr = id.toString().split('node_modules/')[1].split('/')