修改登录界面

src/components/items/LoginDialog.vue

@@ -1,73 +1,9 @@
 <script setup lang="ts">
-import InputBox from "./InputBox.vue";
-import SubmitButton from "./SubmitButton.vue";
-
-const username = defineModel<string>('username')
-const password = defineModel<string>('password')
 </script>
 
 <template>
-  <div class="loginpage-container">
+
-    <div class="loginpage-dialog">
-      <div class="loginpage-dialog-header"> 登录 </div>
-      <div class="loginpage-dialog-body">
-        <InputBox prefix="用户名" type="text" placeholder="用户名" v-model:val="username"/>
-        <InputBox prefix="密码" type="password" placeholder="密码" v-model:val="password"/>
-        <SubmitButton class="loginpage-submit-button"/>
-      </div>
-      <div class="loginpage-dialog-footer"> powered by @surl</div>
-    </div>
-  </div>
 </template>
 
 <style scoped>
-.loginpage-container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-}
-
-.loginpage-dialog {
-  height: 500px;
-  width: 700px;
-  border: 1px solid var(--color-border-base);
-}
-
-.loginpage-dialog-header {
-  display: flex;
-  height: 40px;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--font-size-large);
-  color: var(--color-font-base);
-}
-
-.loginpage-dialog-body {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-  height: calc(100% - 60px);
-  padding: 0 80px;
-  border-top: 1px solid var(--color-border-base);
-  border-bottom: 1px solid var(--color-border-base);
-}
-
-.loginpage-dialog-footer {
-  height: 20px;
-  text-align: right;
-  padding-right: 5px;
-  font-size: var(--font-size-small);
-  color: var(--color-font-base);
-}
-
-.loginpage-submit-button {
-  margin-top: 40px !important;
-  padding-right: 30px;
-}
 </style>

src/components/views/HomeView.vue

@@ -1,4 +1,11 @@
 <script setup lang="ts">
+import {ref} from "vue";
+
+const showLoginDialog = ref(false)
+const username = ref('')
+const password = ref('')
+const passwordVisibleState = ref(false)
+
 </script>
 
 <template>
@@ -6,15 +13,15 @@
     <v-app>
       <v-app-bar>
         <v-container class="mx-auto d-flex align-center justify-start">
-          <v-btn text="HOME" to="/" :active="false"></v-btn>
+          <v-btn text="HOME" to="/" :active="false" prepend-icon="mdi-home"></v-btn>
-          <v-btn text="INPUT" to="/input" :active="false"></v-btn>
+          <v-btn text="SERVICES" to="/services" :active="false"></v-btn>
           <v-spacer></v-spacer>
           <v-text-field class="home-search-box" density="compact" label="search" rounded="lg" variant="solo-filled"
-                        flat hide-details single-line></v-text-field>
+                        flat hide-details single-line append-inner-icon="mdi-magnify"></v-text-field>
-          <v-avatar class="ml-10" color="grey-darken-1" size="32" id="avatar"></v-avatar>
+          <v-avatar class="ml-10" icon="mdi-account" size="32" id="avatar"></v-avatar>
-          <v-menu open-on-hover activator="#avatar" open-delay="0" close-delay="500" location="bottom">
+          <v-menu open-on-hover activator="#avatar" open-delay="0" close-delay="500" location="bottom" width="150">
             <v-list>
-              <v-list-item value="1" to="/login" :active="false">
+              <v-list-item value="1" @click="showLoginDialog = true">
                 <v-list-item-title>LOGIN</v-list-item-title>
               </v-list-item>
               <v-list-item value="2" to="/input" :active="false">
@@ -29,11 +36,29 @@
       </v-main>
     </v-app>
   </v-responsive>
+  <v-dialog v-model="showLoginDialog" persistent width="500">
+    <v-card prepend-icon="mdi-login" title="LOGIN" class="px-10">
+      <v-text-field class="login-dialong-input" flat prepend-icon="mdi-account" label="USERNAME" density="compact"
+                    hide-details single-line rounded="lg" variant="solo-filled" v-model="username"></v-text-field>
+      <v-text-field class="login-dialong-input" flat prepend-icon="mdi-lock" label="PASSWORD" density="compact"
+                    hide-details single-line v-model="password" rounded="lg" variant="solo-filled"
+                    :type="passwordVisibleState ? 'text' :'password'" title="password"
+                    :append-inner-icon="passwordVisibleState ? 'mdi-eye-off' : 'mdi-eye'"
+                    @click:append-inner="passwordVisibleState = !passwordVisibleState"></v-text-field>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text="CANCEL" @click="showLoginDialog = false"></v-btn>
+        <v-btn color="primary" text="OK" @click="console.log(username, password)"></v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
-
 <style scoped>
 .home-search-box {
   max-width: 500px;
   min-width: 200px;
 }
+.login-dialong-input {
+  margin-bottom: 10px;
+}
 </style>

src/components/views/LoginView.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import {ref} from "vue";
-import LoginPage from "../items/LoginDialog.vue";
+import LoginDialog from "../items/LoginDialog.vue";
 
 const username = ref('')
 const password = ref('')
+const isDialogOpen = defineProps<{open: boolean}>()
 </script>
 
 <template>
-  <LoginPage v-model:username="username" v-model:password="password"/>
+  <LoginDialog v-model:username="username" v-model:password="password" :open="isDialogOpen"/>
 </template>
 
 <style scoped>

src/components/views/ServiceView.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<v-window></v-window>
+</template>
+
+<style scoped>
+
+</style>

src/components/views/TestView.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import {ref} from "vue";
+
+const showDialog = ref(true)
+const passwordVisibleState = ref(false)
+</script>
+
+<template>
+  <v-dialog v-model="showDialog" persistent width="500">
+    <v-card prepend-icon="mdi-login" title="LOGIN" class="px-10">
+      <v-text-field class="login-dialong-input" flat prepend-icon="mdi-account" label="USERNAME" density="compact"
+                    hide-details single-line
+                    rounded="lg" variant="solo-filled"></v-text-field>
+      <v-text-field class="login-dialong-input" flat prepend-icon="mdi-lock" label="PASSWORD" density="compact"
+                    hide-details single-line
+                    rounded="lg" variant="solo-filled" :type="passwordVisibleState ? 'text' :'password'"
+                    :append-inner-icon="passwordVisibleState ? 'mdi-eye-off' : 'mdi-eye'"
+                    @click:append-inner="passwordVisibleState = !passwordVisibleState"></v-text-field>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text="CANCEL" @click="showDialog = false"></v-btn>
+        <v-btn color="primary" text="OK" @click="showDialog = false"></v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+.login-dialong-input {
+  margin-bottom: 20px;
+}
+</style>

src/main.ts

@@ -1,22 +1,12 @@
 import {createApp} from 'vue'
 import './style.css'
 import 'vuetify/styles'
+import '@mdi/font/css/materialdesignicons.css'
 import {router} from "./router.ts";
 import App from "./App.vue";
-import {createVuetify} from "vuetify";
+import {vuetify} from "./plugins/vuetify.ts";
-import {createPinia, Pinia} from "pinia";
+import {pinia} from "./plugins/pinia.ts";
 
-const vuetify = createVuetify({
-    icons: {
-        defaultSet: 'mdi'
-    },
-    defaults: {
-        global: {
-            ripple: true
-        }
-    }
-})
-const pinia: Pinia = createPinia()
 createApp(App)
     .use(router)
     .use(vuetify)

src/plugins/pinia.ts

@@ -0,0 +1,3 @@
+import {createPinia} from "pinia";
+
+export const pinia = createPinia()

src/plugins/vuetify.ts

@@ -0,0 +1,17 @@
+import {createVuetify} from "vuetify";
+import {aliases, mdi} from "vuetify/iconsets/mdi";
+
+export const vuetify = createVuetify({
+    icons: {
+        defaultSet: 'mdi',
+        aliases,
+        sets: {
+            mdi
+        }
+    },
+    defaults: {
+        global: {
+            ripple: true
+        }
+    }
+})

src/router.ts

@@ -2,6 +2,8 @@ import {createRouter, createWebHistory} from "vue-router";
 import Login from "./components/views/LoginView.vue";
 import InputBox from "./components/items/InputBox.vue";
 import IntroView from "./components/views/IntroView.vue";
+import TestView from "./components/views/TestView.vue";
+import ServiceView from "./components/views/ServiceView.vue";
 
 const routes = [
     {
@@ -13,6 +15,12 @@ const routes = [
     }, {
         path: '/input',
         component: InputBox
+    }, {
+        path: '/test',
+        component: TestView
+    }, {
+        path: '/services',
+        component: ServiceView
     }
 ]
 export const router = createRouter({

src/stores/userinfo-store.ts

@@ -1,8 +1,19 @@
 import {defineStore} from "pinia";
-import {ref} from "vue";
+import {computed, ref} from "vue";
 
 export const useUserinfoStore = defineStore('userinfo', () => {
     const token = ref('')
     const username = ref('')
-    return { token, username }
+    const isLogin = computed(() => token.value.length == 0)
+    const setToken = (t: string): void => {
+        token.value = t
+        localStorage.setItem('token', t)
+    }
+    const getToken = (): string => {
+        if (token.value.length == 0) {
+            token.value = localStorage.getItem('token') ?? ''
+        }
+        return token.value
+    }
+    return {token, username, isLogin, setToken, getToken}
 })

src/style.css

@@ -9,3 +9,6 @@
   --color-primary-deeper: #1B8EF2;
   --color-primary-lighter: #38BDF2;
 }
+.v-overlay.v-dialog{
+  backdrop-filter: blur(3px);
+}