wcx/surl-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改登录界面

Browse Source
This commit is contained in:
05412 2024-07-30 17:38:02 +08:00
parent b8ecd09a22
commit 408994e4f0
11 changed files with 128 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/items/LoginDialog.vue
View File

@ -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>
</style>

39
src/components/views/HomeView.vue
View File

@ -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="INPUT" to="/input" :active="false"></v-btn>
<v-btn text="HOME" to="/" :active="false" prepend-icon="mdi-home"></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>
<v-avatar class="ml-10" color="grey-darken-1" size="32" id="avatar"></v-avatar>
<v-menu open-on-hover activator="#avatar" open-delay="0" close-delay="500" location="bottom">
flat hide-details single-line append-inner-icon="mdi-magnify"></v-text-field>
<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" 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>

5
src/components/views/LoginView.vue
View File

@ -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>

11
src/components/views/ServiceView.vue Normal file
View File

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

32
src/components/views/TestView.vue Normal file
View File

@ -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>

16
src/main.ts
View File

@ -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 {createPinia, Pinia} from "pinia";
import {vuetify} from "./plugins/vuetify.ts";
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)

3
src/plugins/pinia.ts Normal file
View File

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

17
src/plugins/vuetify.ts Normal file
View File

@ -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
}
}
})

8
src/router.ts
View File

@ -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({

17
src/stores/userinfo-store.ts
View File

@ -1,8 +1,19 @@
import {defineStore} from "pinia";
import {ref} from "vue";
import {computed, ref} from "vue";
export const useUserinfoStore = defineStore('userinfo', ()=>{
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}
})

3
src/style.css
View File

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