index on main: f96885b perf: 同步代码

src/views/login.vue

@@ -1,20 +1,180 @@
 <script setup lang="ts">
-import { reactive } from "vue";
-import info, { ContextProps } from "../components/ReInfo/index.vue";
+import { ref, computed } from "vue";
+import { useRouter } from "vue-router";
+import { initRouter } from "/@/router";
+import { storageSession } from "/@/utils/storage";
+import { addClass, removeClass } from "/@/utils/operate";
+import bg from "/@/assets/login/bg.png";
+import avatar from "/@/assets/login/avatar.svg";
+import illustration0 from "/@/assets/login/illustration0.svg";
+import illustration1 from "/@/assets/login/illustration1.svg";
+import illustration2 from "/@/assets/login/illustration2.svg";
+import illustration3 from "/@/assets/login/illustration3.svg";
+import illustration4 from "/@/assets/login/illustration4.svg";
+import illustration5 from "/@/assets/login/illustration5.svg";
+import illustration6 from "/@/assets/login/illustration6.svg";
 
-const contextInfo: ContextProps = reactive({
-  userName: "",
-  passWord: "",
-  verify: null,
-  svg: null
+const router = useRouter();
+
+// eslint-disable-next-line vue/return-in-computed-property
+const currentWeek = computed(() => {
+  switch (String(new Date().getDay())) {
+    case "0":
+      return illustration0;
+    case "1":
+      return illustration1;
+    case "2":
+      return illustration2;
+    case "3":
+      return illustration3;
+    case "4":
+      return illustration4;
+    case "5":
+      return illustration5;
+    case "6":
+      return illustration6;
+    default:
+      return illustration4;
+  }
 });
 
-// 登录
-const onLogin = () => {};
+let user = ref("admin");
+let pwd = ref("123456");
+
+const onLogin = (): void => {
+  storageSession.setItem("info", {
+    username: "admin",
+    accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
+  });
+  initRouter("admin").then(() => {});
+  router.push("/");
+};
+
+function onUserFocus() {
+  addClass(document.querySelector(".user"), "focus");
+}
+
+function onUserBlur() {
+  if (user.value.length === 0)
+    removeClass(document.querySelector(".user"), "focus");
+}
+
+function onPwdFocus() {
+  addClass(document.querySelector(".pwd"), "focus");
+}
+
+function onPwdBlur() {
+  if (pwd.value.length === 0)
+    removeClass(document.querySelector(".pwd"), "focus");
+}
 </script>
 
 <template>
-  <div class="login">
-    <info :ruleForm="contextInfo" @on-behavior="onLogin" />
+  <img :src="bg" class="wave" />
+  <div class="container">
+    <div class="img">
+      <component :is="currentWeek"></component>
+    </div>
+    <div class="login-box">
+      <div class="login-form">
+        <avatar class="avatar" />
+        <h2
+          v-motion
+          :initial="{
+            opacity: 0,
+            y: 100
+          }"
+          :enter="{
+            opacity: 1,
+            y: 0,
+            transition: {
+              delay: 100
+            }
+          }"
+        >
+          Pure Admin
+        </h2>
+        <div
+          class="input-group user focus"
+          v-motion
+          :initial="{
+            opacity: 0,
+            y: 100
+          }"
+          :enter="{
+            opacity: 1,
+            y: 0,
+            transition: {
+              delay: 200
+            }
+          }"
+        >
+          <div class="icon">
+            <i class="fa fa-user"></i>
+          </div>
+          <div>
+            <h5>用户名</h5>
+            <input
+              type="text"
+              class="input"
+              v-model="user"
+              @focus="onUserFocus"
+              @blur="onUserBlur"
+            />
+          </div>
+        </div>
+        <div
+          class="input-group pwd focus"
+          v-motion
+          :initial="{
+            opacity: 0,
+            y: 100
+          }"
+          :enter="{
+            opacity: 1,
+            y: 0,
+            transition: {
+              delay: 300
+            }
+          }"
+        >
+          <div class="icon">
+            <i class="fa fa-lock"></i>
+          </div>
+          <div>
+            <h5>密码</h5>
+            <input
+              type="password"
+              class="input"
+              v-model="pwd"
+              @focus="onPwdFocus"
+              @blur="onPwdBlur"
+            />
+          </div>
+        </div>
+        <button
+          class="btn"
+          v-motion
+          :initial="{
+            opacity: 0,
+            y: 10
+          }"
+          :enter="{
+            opacity: 1,
+            y: 0,
+            transition: {
+              delay: 400
+            }
+          }"
+          @click="onLogin"
+        >
+          登录
+        </button>
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped>
+@import url("/@/style/login.css");
+</style>

src/views/permission/button/index.vue

@@ -14,7 +14,7 @@ function changRole(value) {
 </script>
 
 <template>
-  <div class="app-container">
+  <div>
     <el-radio-group v-model="auth" @change="changRole">
       <el-radio-button label="admin"></el-radio-button>
       <el-radio-button label="test"></el-radio-button>

src/views/permission/page/index.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref, unref } from "vue";
 import { storageSession } from "/@/utils/storage";
+
 let purview = ref<string>(storageSession.getItem("info").username);
+
 function changRole() {
   if (unref(purview) === "admin") {
     storageSession.setItem("info", {
@@ -20,7 +22,7 @@ function changRole() {
 </script>
 
 <template>
-  <div class="app-container">
+  <div>
     <h4>
       当前角色：
       <span style="font-size: 26px">{{ purview }}</span>

src/views/register.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { reactive } from "vue";
-import info, { ContextProps } from "../components/ReInfo/index.vue";
-
-const contextInfo: ContextProps = reactive({
-  userName: "",
-  passWord: "",
-  verify: null,
-  svg: null
-});
-</script>
-
-<template>
-  <div class="register">
-    <info :ruleForm="contextInfo" />
-  </div>
-</template>