init

src/views/home/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    home
+  </div>
+</template>
+
+<script setup>
+// import { useCacheStore } from '@/store/cache.js'
+// const cacheStore = useCacheStore()
+// cacheStore.setCacheKey(['normal_disable','show_hide'])
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/login/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="login-box">
+    <el-form
+        :model="loginForm"
+        ref="formInstance"
+        :rules="rules"
+        label-width="65px"
+    >
+      <h3>Rib-Account-ADMIN</h3>
+      <el-form-item prop="username" label="账号">
+        <el-input v-model="loginForm.username" :prefix-icon="User"></el-input>
+      </el-form-item>
+      <el-form-item prop="password" label="密码">
+        <el-input v-model="loginForm.password" type="password" :prefix-icon="Lock"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleLogin(formInstance)" type="primary">登录</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import {onBeforeUnmount, reactive,} from 'vue'
+// import {useAuthStore} from '@/store/userstore'
+import {ElLoading} from 'element-plus'
+import {User, Lock, Key} from '@element-plus/icons-vue'
+
+const router = useRouter()
+// const authStore = useAuthStore()
+const loginForm = reactive({
+  username: 'admin',
+  password: '123456',
+  uuid: ''
+})
+const formInstance = ref()
+const rules = reactive({
+  username: [
+    {required: true, message: '请输入账户名', trigger: 'blur'},
+  ],
+  password: [
+    {required: true, message: '请输入密码', trigger: 'blur'},
+  ]
+})
+
+const handleLogin = (instance) => {
+  if (!instance) return
+  instance.validate(async (valid) => {
+    if (!valid) return
+    // 发送请求
+    // await authStore.userLogin(loginForm).then(res=>{
+    //   if(res) {
+    ElLoading.service({text: '正在加载系统资源', background: '#409eff', lock: true})
+    await router.push('/')
+    // }
+    // })
+  })
+}
+
+onBeforeUnmount(() => {
+  ElLoading.service({text: '正在加载系统资源', background: '#409eff', lock: true}).close()
+})
+</script>
+
+<style lang="scss" scoped>
+.login-box {
+  height: 100%;
+  background-color: #4158D0;
+  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .el-form {
+    padding: 12px 15px;
+    border-radius: 12px;
+    width: 25%;
+    background-color: #fff;
+
+    h3 {
+      width: 100%;
+      text-align: center;
+      margin-bottom: 15px;
+    }
+
+    .el-button {
+      width: 100%;
+    }
+  }
+}
+
+</style>