feat:框架搭建和登陆接口联调

.eslintrc-auto-import.json

+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useLink": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}

.eslintrc.cjs

+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:vue/vue3-essential",
+        "./.eslintrc-auto-import.json"
+
+    ],
+    "overrides": [
+        {
+            "env": {
+                "node": true
+            },
+            "files": [
+                ".eslintrc.{js,cjs}"
+            ],
+            "parserOptions": {
+                "sourceType": "script"
+            }
+        }
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "parser": "@typescript-eslint/parser",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint",
+        "vue"
+    ],
+    "rules": {
+    }
+}

components.d.ts

+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ElAside: typeof import('element-plus/es')['ElAside']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    ManagementStaff: typeof import('./src/components/managementStaff/managementStaff.vue')['default']
+    Package: typeof import('./src/components/package/package.vue')['default']
+    QueryFlow: typeof import('./src/components/queryFlow/queryFlow.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Sidebar: typeof import('./src/components/sidebar/index.vue')['default']
+    SidebarItem: typeof import('./src/components/sidebar/sidebarItem.vue')['default']
+    Welcome: typeof import('./src/components/welcome/welcome.vue')['default']
+  }
+}

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>Loading...</title>
   </head>
   <body>
     <div id="app"></div>

package.json

@@ -9,17 +9,30 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
     "axios": "^1.6.0",
     "element-plus": "^2.4.1",
+    "font-awesome": "^4.7.0",
     "npm": "^10.2.1",
+    "nprogress": "0.2.0",
+    "pinia": "^2.1.7",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
+    "@types/node": "^20.8.10",
+    "@types/nprogress": "0.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "@vitejs/plugin-vue": "^4.2.3",
+    "eslint": "^8.52.0",
+    "eslint-plugin-vue": "^9.18.1",
     "sass": "^1.69.5",
     "typescript": "^5.2.2",
+    "unplugin-auto-import": "^0.16.7",
+    "unplugin-icons": "^0.17.3",
+    "unplugin-vue-components": "^0.25.2",
     "vite": "^4.4.5",
     "vue-tsc": "^1.8.5"
   }

src/App.vue

-<script setup lang="ts">
-
-</script>
 
 <template>
-  <router-view></router-view>
+  <el-config-provider :locale="lang">
+        <router-view></router-view>
+    </el-config-provider>
 </template>
 
+<script setup lang="ts">
+
+</script>
+
 <style scoped>
 .logo {
   height: 6em;

src/api/login.ts

@@ -2,9 +2,12 @@ import request from './request'; // 请替换成你实际使用的请求库
 
 // 定义一个登录请求的函数
 export const login = async (email:string, password:string) => {
+    const data = {'login':email,'password':password}
+    
     const result = await request({
       method: 'POST',
-      url: `/auth/login?login=${email}&password=${password}`,
+      url: `/auth/login`,
+      data: data,
     });
-    return result.data; // 返回请求成功时的数据
+    return result; // 返回请求成功时的数据
 };

src/api/request.ts

@@ -32,8 +32,20 @@ const requestConfig: InternalAxiosRequestConfig = {
 // 响应拦截器
 instance.interceptors.response.use(
   (response: AxiosResponse) => {
-    if (response.status === 200) {
-      return response.data;
+  console.log(response,'Response interceptor executed')
+ 
+    const res = response
+    if (res.status === 200) {
+
+      const data = res.data
+      if(data.code !== 200){
+        console.log('shipai')
+        ElMessage.error(res.data.msg);
+        return
+      }else{
+        console.log('成功')
+        return data;
+      }
     } else {
       // 处理非 200 状态码
       return Promise.reject(new Error(`HTTP error: ${response.status}`));
@@ -59,12 +71,13 @@ instance.interceptors.response.use(
 );
 
 // 封装请求函数
-const request = async <T>(config: InternalAxiosRequestConfig): Promise<InternalAxiosRequestConfig> => {
+const request = async <T>(config: InternalAxiosRequestConfig): Promise<T> => {
   try {
     const response = await instance.request(config);
     return response;
   } catch (error) {
     // 在这里处理错误
+    ElMessage.error("接口错误，请联系");
     console.error('Request error:', error);
     return Promise.reject(error);
   }

src/api/staff.ts

 import request from './request'; // 请替换成你实际使用的请求库
 
 // 定义一个登录请求的函数
-export const login = async (email:string, password:string) => {
+export const accountList = async (page:string, password:string) => {
     const result = await request({
       method: 'POST',
-      url: `/auth/login?login=${email}&password=${password}`,
+      url: `account/accountList`,
     });
     return result.data; // 返回请求成功时的数据
 };

src/assets/style.css

-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  outline: none!important
-}
-
-html,body,#app {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-  font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
-  font-weight: 400;
-  -webkit-font-smoothing: antialiased;
-  -webkit-tap-highlight-color: transparent;
-  background-color: var(--ba-bg-color);
-  font-size: 14px;
-  overflow: hidden;
-  position: relative
-}
\ No newline at end of file

src/auto-import.d.ts

+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+}

src/login/index.vue

-<template>
-  <div class="login-container" :style="`transform:scale(`+ scaleNum +`)`">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
-      <div class="title-container" style="color: #36a3f7;font-size: 32px;letter-spacing: 2px;margin-bottom: 40px;font-weight: 700;">
-        欧畅云技术支持后台
-      </div>
-      <el-form-item prop="username">
-        <span class="svg-container" style="margin-left: 5px;">
-          <svg-icon icon-class="user" />
-        </span>
-        <el-input
-          ref="username"
-          v-model="loginForm.username"
-          placeholder="请输入用户名"
-          name="username"
-          type="text"
-          tabindex="1"
-          auto-complete="on"
-          size="large"
-        />
-      </el-form-item>
-      <el-form-item prop="password">
-        <span class="svg-container" style="margin-left: 5px;">
-          <svg-icon icon-class="password" />
-        </span>
-        <el-input
-          :key="passwordType"
-          ref="password"
-          v-model="loginForm.password"
-          :type="passwordType"
-          placeholder="请输入密码"
-          name="password"
-          tabindex="2"
-          auto-complete="on"
-          @keyup.enter.native="handleLogin"
-          size="large"
-        />
-        <span class="show-pwd" @click="showPwd">
-          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-        </span>
-      </el-form-item>
-      <el-button :loading="loading" type="primary" style="width: 100%;margin-bottom: 20px;margin-top: 60px;height: 55px;font-size: 22px;" @click.native.prevent="handleLogin">登&nbsp;&nbsp;录</el-button>
-    </el-form>
-  </div>
-</template>
-<script>
-// import { validUsername } from '@/utils/validate'
-import api from '../api/index.js'
-
-export default {
-  name: 'Login',
-  data() {
-    const validateUsername = (rule, value, callback) => {
-      if (!value.trim()) {
-        callback(new Error('请输入正确的用户名'))
-      } else {
-        callback()
-      }
-    }
-    const validatePassword = (rule, value, callback) => {
-      if (value.length < 4) {
-        callback(new Error('密码不能少于4位'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      loginForm: {
-        username: '',
-        subDomain: '',
-        password: ''
-      },
-      loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
-      },
-      loading: false,
-      passwordType: 'password',
-      redirect: undefined,
-      screenWidth: 0,
-      scaleNum: 1
-    }
-  },
-//   watch: {
-//     $route: {
-//       handler: function(route) {
-//         this.redirect = route.query && route.query.redirect
-//       },
-//       immediate: true
-//     }
-//   },
-//   mounted() {
-//     this.screenWidth = document.body.clientWidth
-//     console.log(this.screenWidth)
-//     this.scaleNum = (this.screenWidth / 1920)
-//     console.log(this.scaleNum)
-//   },
-  methods: {
-    showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = ''
-      } else {
-        this.passwordType = 'password'
-      }
-      this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
-    },
-    handleLogin() {
-      var loginfrom = {
-        login:"shi.jiuyan@163.com",
-        password:'654321'
-      }
-      api.login(loginfrom).then(res=>{
-        console.log(res);
-      })
-    },
-    handleRegister() {
-      this.$router.push({ path: '/register' })
-    }
-    /* async register() {
-      await this.$store.dispatch('user/logout')
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-    }*/
-  }
-}
-</script>
-<style lang="scss">
-  $bg: #2d3a4b;
-  $dark_gray:#889aa4;
-  $light_gray:#eee;
-
-  .login-container {
-    width: 100%;
-    height: 100%;
-    background: url("../assets/images/bgImg.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    transform-origin: 0 0;
-    position: relative;
-  }
-  .login-form {
-    width: 440px;
-    height: 470px;
-    position: absolute;
-    top: 35%;
-    right: 20%;
-    overflow: hidden;
-  }
-  .show-pwd {
-    position: absolute;
-    margin-left: 2px;
-    right: 10px;
-    top: 7px;
-    font-size: 16px;
-    color: $dark_gray;
-    cursor: pointer;
-    user-select: none;
-  }
-</style>

src/main.ts

 import { createApp } from 'vue'
-import ElementPlus from 'element-plus'
+import { createPinia } from 'pinia'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import 'element-plus/dist/index.css'
 import App from './App.vue'
 import router from './router'
-import './assets/style.css'
+
+import './styles/index.scss'
+
 // import store from './store'
 
 const app = createApp(App)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
 // app.use(store)
+// 使用 Pinia 插件
+const pinia = createPinia();
+app.use(pinia);
 app.use(router)
-app.use(ElementPlus)
 app.mount('#app')
 

src/router/index.ts

-import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
-import axios from 'axios'
-
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/',
-    name: 'home',
-    component: HomeView
-  },
-  {
-    path: '/login',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../login/index.vue')
-  }
-]
+import { createRouter, createWebHashHistory } from 'vue-router'
+import staticRoutes from './static'
+//加载动画
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+import { loading } from '../utils/loading'
 
 const router = createRouter({
   history: createWebHashHistory(),
-  routes
+  routes: staticRoutes,
 })
+router.beforeEach((to, from, next) => {
+  NProgress.configure({ showSpinner: false })
+  NProgress.start()
+  if (!window.existLoading) {
+      loading.show()
+      window.existLoading = true
+  }
+  next()
+})
+
+// 路由守卫
 // router.beforeEach((to, from, next) => {
-  // if (sessionStorage.getItem('u_token')) {
-  //   next()
-  // } else {
-  //   if (to.name == 'login') {
-  //     next()
-  //   }
-  //   else {
-  //     var alink = to.path.slice(1, 9999).split('/')
-  //     var isHaveKey = /[0-9A-Z]/.test(alink[0])
-  //     var key = alink[0]
-  //     var token = alink[1]
-  //     if (isHaveKey && token) {
-  //       axios({
-  //         headers: {
-  //           "Token": token
-  //         },
-  //         method: 'GET',
-  //         url: process.env.VUE_APP_BASE_URL + '/assistive/getPermission',
-  //         params: { key, token }
-  //       }).then(res => {
-  //         if (res.data.code == 200) {
-  //           sessionStorage.setItem('u_token', res.data.data.token)
-  //           sessionStorage.setItem('u_name', res.data.data.nickname)
-  //           sessionStorage.setItem('u_headUrl', res.data.data.headUrl)
-            
-  //         } else {
-  //           next({ path: `/login/${key}` })
-  //         }
-  //       })
-  //     }else if(isHaveKey && !token){
-  //       next({ path: `/login/${key}` })
-  //     }else{
-  //       next({ name:'login' })
-  //     }
-  //   }
-  // }
-// })
+//   // 假设有一个需要登录的路由 meta 字段为 requiresAuth
+//   const requiresAuth = to.meta.requiresAuth;
+
+//   if (requiresAuth && !isUserLoggedIn()) {
+//     ElMessage.error('请先登录');
+//     next('/login'); // 跳转到登录页面
+//   } else {
+//     next(); // 继续路由导航
+//   }
+// });
+
+// 路由加载后
+router.afterEach(() => {
+  if (window.existLoading) {
+      loading.hide()
+  }
+  NProgress.done()
+})
 
-export default router
+export default router
\ No newline at end of file

src/router/static.ts

+import type { RouteRecordRaw } from 'vue-router'
+
+/*
+ * 静态路由
+ * 自动加载 ./static 目录的所有文件，并 push 到以下数组
+ */
+const staticRoutes: Array<RouteRecordRaw> = [
+    {
+        path:'/login',
+        name: 'login',
+        component: () => import('../views/login.vue'),
+        meta: {
+            isShow: false, // 控制当前项是否在菜单栏中渲染出来，比如你写了 login 页面的路由，但是并不希望 login在menu菜单中渲染出来，即可设为false
+            title: '登陆', // menu菜单项的名称，没啥好说的
+        }
+    },
+    {
+        path:'/dashboard',
+        name: 'dashboard',
+        component: () => import('../views/dashboard.vue'),
+        meta: {
+            isShow: true, 
+            title: '首页', 
+        }
+    },
+]
+
+
+export default staticRoutes

src/stores/counter.ts

+// src/store/counter.ts
+import { defineStore } from "pinia";
+
+export const useCounterStore = defineStore("counter", () => {
+  // ref变量 → state 属性
+  const count = ref(0);
+  // computed计算属性 → getters
+  const double = computed(() => {
+    return count.value * 2;
+  });
+  // function函数 → actions
+  function increment() {
+    count.value++;
+  }
+
+  return { count, double, increment };
+});
\ No newline at end of file

src/styles/app.scss

+/* 基本样式 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    outline: none !important;
+}
+
+html,
+body,
+#app {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: transparent;
+    background-color: var(--ba-bg-color);
+    font-size: 14px;
+    overflow: hidden;
+    position: relative;
+}
+
+// 阿里 iconfont Symbol引用css
+.iconfont-icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+}
+
+.w100 {
+    width: 100% !important;
+}
+.h100 {
+    height: 100% !important;
+}
+.ba-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.default-main {
+    margin: var(--ba-main-space) var(--ba-main-space) 60px var(--ba-main-space);
+}
+.zoom-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    bottom: -10px;
+    right: -10px;
+    cursor: se-resize;
+}
+.block-help {
+    display: block;
+    width: 100%;
+    color: #909399;
+    font-size: 13px;
+    line-height: 16px;
+    padding-top: 5px;
+}
+
+/* 表格顶部菜单-s */
+.table-header {
+    .table-header-operate .icon {
+        font-size: 14px !important;
+        color: var(--el-color-white) !important;
+    }
+    .el-button.is-disabled .icon {
+        color: var(--el-button-disabled-text-color) !important;
+    }
+}
+/* 表格顶部菜单-e */
+
+/* 鼠标置入浮动效果-s */
+.suspension {
+    transition: all 0.3s ease;
+}
+.suspension:hover {
+    -webkit-transform: translateY(-4px) scale(1.02);
+    -moz-transform: translateY(-4px) scale(1.02);
+    -ms-transform: translateY(-4px) scale(1.02);
+    -o-transform: translateY(-4px) scale(1.02);
+    transform: translateY(-4px) scale(1.02);
+    -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
+    z-index: 999;
+    border-radius: 6px;
+}
+/* 鼠标置入浮动效果-e */
+
+/* 表格-s */
+.ba-table-box {
+    border-radius: var(--el-border-radius-round);
+}
+.ba-table-alert {
+    background-color: var(--el-fill-color-darker) !important;
+    border: 1px solid var(--ba-boder-color);
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+/* 表格-e */
+
+/* 新增/编辑表单-s */
+.ba-operate-dialog {
+    overflow: hidden;
+    border-radius: var(--el-border-radius-base);
+}
+.ba-operate-dialog .el-dialog__header {
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--ba-bg-color);
+}
+.ba-operate-dialog .el-dialog__body {
+    height: 60vh;
+    padding-top: 0;
+    padding-bottom: 52px;
+}
+.ba-operate-dialog .el-dialog__footer {
+    padding: 10px var(--el-dialog-padding-primary);
+    box-shadow: var(--el-box-shadow);
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+}
+.ba-operate-form {
+    padding-top: 20px;
+}
+/* 新增/编辑表单-e */
+
+/* 全局遮罩-s */
+.ba-layout-shade {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 9999990;
+}
+/* 全局遮罩-e */
+
+/* 图片上传预览-s */
+.img-preview-dialog .el-dialog__body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+        max-width: 100%;
+    }
+}
+/* 图片上传预览-e */
+
+/* 页面切换动画-s */
+.slide-right-enter-active,
+.slide-right-leave-active,
+.slide-left-enter-active,
+.slide-left-leave-active {
+    will-change: transform;
+    transition: all 0.3s ease;
+}
+// slide-right
+.slide-right-enter-from {
+    opacity: 0;
+    transform: translateX(-20px);
+}
+.slide-right-leave-to {
+    opacity: 0;
+    transform: translateX(20px);
+}
+// slide-left
+.slide-left-enter-from {
+    @extend .slide-right-leave-to;
+}
+.slide-left-leave-to {
+    @extend .slide-right-enter-from;
+}
+/* 页面切换动画-e */
+
+/* 布局相关-s */
+.frontend-footer-brother {
+    min-height: calc(100vh - 120px);
+}
+.user-views {
+    padding-left: 15px;
+    .user-views-card {
+        margin-bottom: 15px;
+    }
+}
+.ba-aside-drawer {
+    .el-drawer__body {
+        padding: 0;
+    }
+}
+/* 布局相关-e */
+
+/* 暗黑模式公共样式-s */
+.ba-icon-dark {
+    color: var(--el-text-color-primary) !important;
+}
+/* 暗黑模式公共样式-e */
+
+/* NProgress-s */
+#nprogress {
+    .bar,
+    .spinner {
+        z-index: 999999;
+    }
+}
+/* NProgress-e */
+
+/* 自适应-s */
+@media screen and (max-width: 768px) {
+    .xs-hidden {
+        display: none;
+    }
+}
+@media screen and (max-width: 1024px) {
+    .ba-operate-dialog {
+        width: 96%;
+    }
+}
+@media screen and (max-width: 991px) {
+    .user-views {
+        padding: 0;
+    }
+}
+/* 自适应-e */

src/styles/dark.scss

+@use 'sass:map';
+@use 'mixins.scss' as *;
+@use 'element-plus/theme-chalk/src/dark/css-vars.scss';
+
+// Background
+$bg-color: () !default;
+$bg-color: map.merge(
+    (
+        '': #141414,
+        'overlay': #1d1e1f,
+    ),
+    $bg-color
+);
+
+// Border
+$border-color: () !default;
+$border-color: map.merge(
+    (
+        '': #58585b,
+    ),
+    $border-color
+);
+
+html.dark {
+    @include set-component-css-var('bg-color', $bg-color);
+    @include set-component-css-var('border-color', $border-color);
+}

src/styles/element.scss

+/* 修复 Chrome 浏览器输入框内选中字符行高异常的bug-s */
+.el-input .el-input__inner {
+    line-height: calc(var(--el-input-height, 40px) - 4px);
+}
+/* 修复 Chrome 浏览器输入框内选中字符行高异常的bug-e */
+
+.datetime-picker {
+    height: 32px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+.el-divider__text.is-center {
+    transform: translateX(-50%) translateY(-62%);
+}
+
+.el-menu {
+    user-select: none;
+    .el-sub-menu__title:hover {
+        background-color: var(--el-color-primary-light-9) !important;
+    }
+}
+
+.el-table {
+    --el-table-border-color: var(--ba-border-color);
+}
+
+.el-card {
+    border: none;
+}
+.el-card__header {
+    border-bottom: 1px solid var(--el-border-color-extra-light);
+}
+.el-textarea__inner {
+    padding: 5px 11px;
+}
+
+/* dialog滚动条-s */
+.el-overlay-dialog,
+.ba-scroll-style {
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+        width: 5px;
+        height: 5px;
+    }
+    &::-webkit-scrollbar-thumb {
+        background: #eaeaea;
+        border-radius: var(--el-border-radius-base);
+        box-shadow: none;
+        -webkit-box-shadow: none;
+    }
+    &:hover {
+        &::-webkit-scrollbar-thumb:hover {
+            background: #c8c9cc;
+        }
+    }
+}
+/* dialog滚动条-e */
+
+/* 小屏设备 el-radio-group 样式优化-s */
+.ba-input-item-radio {
+    margin-bottom: 10px;
+    .el-radio-group {
+        .el-radio {
+            margin-bottom: 8px;
+        }
+    }
+}
+/* 小屏设备 el-radio-group 样式调整-e */

src/styles/index.scss

+@use './app';
+@use './element';
+@use './var';
+@use './dark';
+@use './markdown';

src/styles/loading.scss

+.block-loading {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 9990;
+    background-color: var(--ba-bg-color);
+}
+.block-loading .block-loading-box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.block-loading .block-loading-box-warp {
+    width: 80px;
+    height: 80px;
+}
+.block-loading .block-loading-box-warp .block-loading-box-item {
+    width: 33.333333%;
+    height: 33.333333%;
+    background: #409eff;
+    float: left;
+    animation: block-loading-animation 1.2s infinite ease;
+    border-radius: 1px;
+}
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(7) {
+    animation-delay: 0s;
+}
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(4),
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(8) {
+    animation-delay: 0.1s;
+}
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(1),
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(5),
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(9) {
+    animation-delay: 0.2s;
+}
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(2),
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(6) {
+    animation-delay: 0.3s;
+}
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(3) {
+    animation-delay: 0.4s;
+}
+@keyframes block-loading-animation {
+    0%,
+    70%,
+    100% {
+        transform: scale3D(1, 1, 1);
+    }
+    35% {
+        transform: scale3D(0, 0, 1);
+    }
+}

src/styles/mixins.scss

+@mixin set-css-var-value($name, $value) {
+    #{joinVarName($name)}: #{$value};
+}
+
+@function joinVarName($list) {
+    $name: '--ba';
+    @each $item in $list {
+        @if $item != '' {
+            $name: $name + '-' + $item;
+        }
+    }
+    @return $name;
+}
+
+@function getCssVarName($args...) {
+    @return joinVarName($args);
+}
+
+/*
+ * 通过映射设置所有的CSS变量
+ */
+@mixin set-component-css-var($name, $variables) {
+    @each $attribute, $value in $variables {
+        @if $attribute == 'default' {
+            #{getCssVarName($name)}: #{$value};
+        } @else {
+            #{getCssVarName($name, $attribute)}: #{$value};
+        }
+    }
+}

src/styles/var.scss

+@use 'sass:map';
+@use 'mixins' as *;
+
+// 后台主体窗口左右间距
+$main-space: 16px;
+$primary-light: #3f6ad8;
+
+// --ba-background
+$bg-color: () !default;
+$bg-color: map.merge(
+    (
+        '': #f5f5f5,
+        'overlay': #ffffff,
+    ),
+    $bg-color
+);
+
+// --ba-border-color
+$border-color: () !default;
+$border-color: map.merge(
+    (
+        '': #f6f6f6,
+    ),
+    $border-color
+);
+
+:root {
+    @include set-css-var-value('main-space', $main-space);
+    @include set-css-var-value('color-primary-light', $primary-light);
+    @include set-component-css-var('bg-color', $bg-color);
+    @include set-component-css-var('border-color', $border-color);
+}

src/utils/loading.ts

+import { nextTick } from 'vue'
+import '../styles/loading.scss'
+
+export const loading = {
+    show: () => {
+        const bodys: Element = document.body
+        const div = document.createElement('div')
+        div.className = 'block-loading'
+        div.innerHTML = `
+            <div class="block-loading-box">
+                <div class="block-loading-box-warp">
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                </div>
+            </div>
+        `
+        bodys.insertBefore(div, bodys.childNodes[0])
+    },
+    hide: () => {
+        nextTick(() => {
+            setTimeout(() => {
+                const el = document.querySelector('.block-loading')
+                el && el.parentNode?.removeChild(el)
+            }, 1000)
+        })
+    },
+}

src/utils/pageBubble.ts

+// 页面气泡效果
+
+const bubble: {
+    width: number
+    height: number
+    bubbleEl: any
+    canvas: any
+    ctx: any
+    circles: any[]
+    animate: boolean
+    requestId: any
+} = {
+    width: 0,
+    height: 0,
+    bubbleEl: null,
+    canvas: null,
+    ctx: {},
+    circles: [],
+    animate: true,
+    requestId: null,
+}
+
+export const init = function (): void {
+    bubble.width = window.innerWidth
+    bubble.height = window.innerHeight
+
+    bubble.bubbleEl = document.getElementById('bubble')
+    bubble.bubbleEl.style.height = bubble.height + 'px'
+
+    bubble.canvas = document.getElementById('bubble-canvas')
+    bubble.canvas.width = bubble.width
+    bubble.canvas.height = bubble.height
+    bubble.ctx = bubble.canvas.getContext('2d')
+
+    // create particles
+    bubble.circles = []
+    for (let x = 0; x < bubble.width * 0.5; x++) {
+        const c = new Circle()
+        bubble.circles.push(c)
+    }
+    animate()
+    addListeners()
+}
+
+function scrollCheck() {
+    bubble.animate = document.body.scrollTop > bubble.height ? false : true
+}
+
+function resize() {
+    bubble.width = window.innerWidth
+    bubble.height = window.innerHeight
+    bubble.bubbleEl.style.height = bubble.height + 'px'
+    bubble.canvas.width = bubble.width
+    bubble.canvas.height = bubble.height
+}
+
+function animate() {
+    if (bubble.animate) {
+        bubble.ctx.clearRect(0, 0, bubble.width, bubble.height)
+        for (const i in bubble.circles) {
+            bubble.circles[i].draw()
+        }
+    }
+    bubble.requestId = requestAnimationFrame(animate)
+}
+
+class Circle {
+    pos: {
+        x: number
+        y: number
+    }
+    alpha: number
+    scale: number
+    velocity: number
+    draw: () => void
+    constructor() {
+        this.pos = {
+            x: Math.random() * bubble.width,
+            y: bubble.height + Math.random() * 100,
+        }
+        this.alpha = 0.1 + Math.random() * 0.3
+        this.scale = 0.1 + Math.random() * 0.3
+        this.velocity = Math.random()
+        this.draw = function () {
+            this.pos.y -= this.velocity
+            this.alpha -= 0.0005
+            bubble.ctx.beginPath()
+            bubble.ctx.arc(this.pos.x, this.pos.y, this.scale * 10, 0, 2 * Math.PI, false)
+            bubble.ctx.fillStyle = 'rgba(255,255,255,' + this.alpha + ')'
+            bubble.ctx.fill()
+        }
+    }
+}
+
+function addListeners() {
+    window.addEventListener('scroll', scrollCheck)
+    window.addEventListener('resize', resize)
+}
+
+export function removeListeners() {
+    window.removeEventListener('scroll', scrollCheck)
+    window.removeEventListener('resize', resize)
+    cancelAnimationFrame(bubble.requestId)
+}

src/utils/validate.ts

+import type { RuleType } from 'async-validator'
+import type { FormItemRule } from 'element-plus'
+
+
+export interface buildValidatorParams {
+    // 规则名:required=必填,mobile=手机号,idNumber=身份证号,account=账户,password=密码,varName=变量名,editorRequired=富文本必填,number、integer、float、date、url、email
+    name:
+        | 'required'
+        | 'mobile'
+        | 'idNumber'
+        | 'account'
+        | 'password'
+        | 'varName'
+        | 'editorRequired'
+        | 'number'
+        | 'integer'
+        | 'float'
+        | 'date'
+        | 'url'
+        | 'email'
+    // 自定义验证错误消息
+    message?: string
+    // 验证项的标题，这些验证方式不支持:mobile、account、password、varName、editorRequired
+    title?: string
+    // 验证触发方式
+    trigger?: 'change' | 'blur'
+}
+/**
+ * 构建表单验证规则
+ * @param {buildValidatorParams} paramsObj 参数对象
+ */
+export function buildValidatorData({ name, message, title, trigger = 'blur' }: buildValidatorParams): FormItemRule {
+    // 必填
+    if (name == 'required') {
+        return {
+            required: true,
+            message: message,
+            trigger: trigger,
+        }
+    }
+
+    // 常见类型
+    const validatorType = ['number', 'integer', 'float', 'date', 'url', 'email']
+    if (validatorType.includes(name)) {
+        return {
+            type: name as RuleType,
+            message: message ,
+            trigger: trigger,
+        }
+    }
+
+ 
+}

src/views/dashboard.vue

+<template>
+    <el-container class="layout-container-demo">
+      <el-aside width="200px">
+        <el-scrollbar>
+          <el-menu :default-openeds="['1', '3']">
+            <el-sub-menu index="1">
+              <template #title>
+                <el-icon><message /></el-icon>Navigator One
+              </template>
+              <el-menu-item-group>
+                <template #title>Group 1</template>
+                <el-menu-item index="1-1">Option 1</el-menu-item>
+                <el-menu-item index="1-2">Option 2</el-menu-item>
+              </el-menu-item-group>
+              <el-menu-item-group title="Group 2">
+                <el-menu-item index="1-3">Option 3</el-menu-item>
+              </el-menu-item-group>
+              <el-sub-menu index="1-4">
+                <template #title>Option4</template>
+                <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
+              </el-sub-menu>
+            </el-sub-menu>
+            <el-sub-menu index="2">
+              <template #title>
+                <el-icon><icon-menu /></el-icon>Navigator Two
+              </template>
+              <el-menu-item-group>
+                <template #title>Group 1</template>
+                <el-menu-item index="2-1">Option 1</el-menu-item>
+                <el-menu-item index="2-2">Option 2</el-menu-item>
+              </el-menu-item-group>
+              <el-menu-item-group title="Group 2">
+                <el-menu-item index="2-3">Option 3</el-menu-item>
+              </el-menu-item-group>
+              <el-sub-menu index="2-4">
+                <template #title>Option 4</template>
+                <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
+              </el-sub-menu>
+            </el-sub-menu>
+            <el-sub-menu index="3">
+              <template #title>
+                <el-icon><setting /></el-icon>Navigator Three
+              </template>
+              <el-menu-item-group>
+                <template #title>Group 1</template>
+                <el-menu-item index="3-1">Option 1</el-menu-item>
+                <el-menu-item index="3-2">Option 2</el-menu-item>
+              </el-menu-item-group>
+              <el-menu-item-group title="Group 2">
+                <el-menu-item index="3-3">Option 3</el-menu-item>
+              </el-menu-item-group>
+              <el-sub-menu index="3-4">
+                <template #title>Option 4</template>
+                <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
+              </el-sub-menu>
+            </el-sub-menu>
+          </el-menu>
+        </el-scrollbar>
+      </el-aside>
+  
+      <el-container>
+        <el-header style="text-align: right; font-size: 12px">
+          <div class="toolbar">
+            <el-dropdown>
+              <el-icon style="margin-right: 8px; margin-top: 1px"
+                ><setting
+              /></el-icon>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item>View</el-dropdown-item>
+                  <el-dropdown-item>Add</el-dropdown-item>
+                  <el-dropdown-item>Delete</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <span>Tom</span>
+          </div>
+        </el-header>
+  
+        <el-main>
+          <el-scrollbar>
+            <el-table :data="tableData">
+              <el-table-column prop="date" label="Date" width="140" />
+              <el-table-column prop="name" label="Name" width="120" />
+              <el-table-column prop="address" label="Address" />
+            </el-table>
+          </el-scrollbar>
+        </el-main>
+      </el-container>
+    </el-container>
+  </template>
+  
+  <script lang="ts" setup>
+  
+  const item = {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  }
+  const tableData = ref(Array.from({ length: 20 }).fill(item))
+  </script>
+  
+  <style scoped>
+  .layout-container-demo .el-header {
+    position: relative;
+    background-color: var(--el-color-primary-light-7);
+    color: var(--el-text-color-primary);
+  }
+  .layout-container-demo .el-aside {
+    color: var(--el-text-color-primary);
+    background: var(--el-color-primary-light-8);
+  }
+  .layout-container-demo .el-menu {
+    border-right: none;
+  }
+  .layout-container-demo .el-main {
+    padding: 0;
+  }
+  .layout-container-demo .toolbar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    right: 20px;
+  }
+  </style>
\ No newline at end of file

src/views/login.vue

+<template>
+  <div>
+      
+      <div @contextmenu.stop="" id="bubble" class="bubble">
+          <canvas id="bubble-canvas" class="bubble-canvas"></canvas>
+      </div>
+      <div class="login">
+          <div class="login-box">
+              <div class="head">
+                  <img src="../assets/login-header.png" alt="" />
+              </div>
+              <div class="form">
+                  <img class="profile-avatar" src="https://demo.buildadmin.com/static/images/avatar.png" alt="" />
+                  <div class="content">
+                      <el-form @keyup.enter="onSubmitPre()" ref="formRef" :rules="rules" size="large" :model="form">
+                          <el-form-item prop="username">
+                              <el-input
+                                  ref="usernameRef"
+                                  type="text"
+                                  clearable
+                                  v-model="form.username"
+                                  placeholder="请输入用户名"
+                              >
+                                  <template #prefix>
+                                    <el-icon><User /></el-icon>
+                                  </template>
+                              </el-input>
+                          </el-form-item>
+                          <el-form-item prop="password">
+                              <el-input
+                                  ref="passwordRef"
+                                  v-model="form.password"
+                                  type="password"
+                                  placeholder="请输入密码"
+                                  show-password
+                              >
+                                  <template #prefix>
+                                    <el-icon><Lock /></el-icon>
+                                  </template>
+                              </el-input>
+                          </el-form-item>
+                          <!-- <el-checkbox/icons-vueox v-model="form.keep" label="记住密码" size="default"></el-checkbox> -->
+                          <el-form-item>
+                              <el-button
+                                  :loading="state.submitLoading"
+                                  class="submit-button"
+                                  round
+                                  type="primary"
+                                  size="large"
+                                  @click="onSubmitPre()"
+                              >
+                                  {{ "登陆" }}
+                              </el-button>
+                          </el-form-item>
+                      </el-form>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as pageBubble from '@/utils/pageBubble'
+import { buildValidatorData } from '@/utils/validate'
+import { login } from '@/api/login'
+// import { FormInstance, InputInstance, FormItemRule } from 'element-plus';
+
+
+let timer: number
+
+const formRef = ref<FormInstance>()
+const usernameRef = ref<InputInstance>()
+const passwordRef = ref<InputInstance>()
+// 获取路由实例
+const router = useRouter();
+
+
+
+const state = reactive({
+  showCaptcha: false,
+  submitLoading: false,
+})
+const form = reactive({
+  username: '',
+  password: '',
+  keep: false,
+})
+
+
+
+// 表单验证规则
+const rules: Partial<Record<string, FormItemRule[]>> = reactive({
+  username: [buildValidatorData({ name: 'required', message:"请输入用户名"})],
+  password: [buildValidatorData({ name: 'required', message:"请输入密码" })],
+})
+
+
+onMounted(() => {
+  timer = window.setTimeout(() => {
+      pageBubble.init()
+  }, 1000)
+  
+})
+
+onBeforeUnmount(() => {
+  clearTimeout(timer)
+  pageBubble.removeListeners()
+})
+
+const onSubmitPre = () => {
+  formRef.value?.validate((valid) => {
+      if (valid) {
+          if (state.showCaptcha) {
+          } else {
+              onSubmit()
+          }
+      }
+  })
+}
+
+const onSubmit = async() => {
+  state.submitLoading = true
+  try {
+    const result = await login(form.username, form.password)
+    console.log(result,'resultresult')
+    if(result){
+      router.push('/dashboard');
+      // 将 token 存储在 sessionStorage 中
+      sessionStorage.setItem('token', result.data.token);
+    }
+    state.submitLoading = false
+    // 处理登录成功的逻辑，可以根据 result 进行页面跳转或其他操作
+  } catch (error) {
+    state.submitLoading = false
+    console.error('Error in login:', error);
+    // 处理登录失败的逻辑
+  }
+  // 处理请求成功的逻辑
+} 
+</script>
+
+<style scoped lang="scss">
+
+.bubble {
+  overflow: hidden;
+  background:#5784b8 url("../assets/bg.jpeg") repeat;
+}
+.form-item-icon {
+  height: auto;
+}
+.login {
+  position: absolute;
+  top: 0;
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+  .login-box {
+      overflow: hidden;
+      width: 430px;
+      padding: 0;
+      background: var(--ba-bg-color-overlay);
+      margin-bottom: 80px;
+  }
+  .head {
+      background: #ccccff;
+      img {
+          display: block;
+          width: 430px;
+          margin: 0 auto;
+          user-select: none;
+      }
+  }
+  .form {
+      position: relative;
+      .profile-avatar {
+          display: block;
+          position: absolute;
+          height: 100px;
+          width: 100px;
+          border-radius: 50%;
+          border: 4px solid var(--ba-bg-color-overlay);
+          top: -50px;
+          right: calc(50% - 50px);
+          z-index: 2;
+          user-select: none;
+      }
+      .content {
+          padding: 100px 40px 40px 40px;
+      }
+      .submit-button {
+          width: 100%;
+          letter-spacing: 2px;
+          font-weight: 500;
+          margin-top: 15px;
+          --el-button-bg-color: var(--el-color-primary);
+      }
+  }
+}
+
+@media screen and (max-width: 720px) {
+  .login {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .login-box {
+          width: 340px;
+          margin-top: 0;
+      }
+  }
+}
+.chang-lang :deep(.el-dropdown-menu__item) {
+  justify-content: center;
+}
+.content :deep(.el-input__prefix) {
+  display: flex;
+  align-items: center;
+}
+
+// 暗黑样式
+@at-root .dark {
+ 
+  .login {
+      .login-box {
+          background: #161b22;
+      }
+      .head {
+          img {
+              filter: brightness(61%);
+          }
+      }
+      .form {
+          .submit-button {
+              --el-button-bg-color: var(--el-color-primary-light-5);
+              --el-button-border-color: rgba(240, 252, 241, 0.1);
+          }
+      }
+  }
+}
+@media screen and (max-height: 800px) {
+  .login .login-box {
+      margin-bottom: 0;
+  }
+}
+</style>

tsconfig.json

@@ -12,7 +12,14 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-
+    
+    /* @路径配置 */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,

vite.config.ts

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+//自动引入element组件
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import Icons from "unplugin-icons/vite";
+import IconsResolver from "unplugin-icons/resolver";
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    AutoImport({
+      // 可以自定义文件生成的位置，默认是根目录下，使用ts的建议放src目录下
+      resolvers: [ElementPlusResolver()],
+      eslintrc: {
+        enabled: false,
+        filepath: "./.eslintrc-auto-import.json",
+        globalsPropValue: true
+      },
+      dts: 'src/auto-import.d.ts',
+      imports: ['vue', 'vue-router'],
+    }),
+    Components({
+      resolvers: [
+        // 自动导入 Element Plus 组件
+        ElementPlusResolver(),
+        // 自动注册图标组件
+        IconsResolver({
+          enabledCollections: ["ep"] // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
+        }),
+      ],
+      dirs: 'src/components.d.ts', // 配置需要默认导入的自定义组件文件夹，该文件夹下的所有组件都会自动 import
+    }),
+    Icons({
+      // 自动安装图标库
+      autoInstall: true,
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "./src"),
+    }
+  }
 })