mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
perf(theme): 优化 加密组件结构
This commit is contained in:
pengzhanbo
parent
ab4ee5d6f2
commit
471084ff23
108
theme/src/client/components/EncryptForm.vue
Normal file
108
theme/src/client/components/EncryptForm.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useThemeLocaleData } from '../composables/index.js'
|
||||
import IconLock from './icons/IconLock.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
compare: (password: string) => boolean
|
||||
info?: string
|
||||
}>()
|
||||
|
||||
const theme = useThemeLocaleData()
|
||||
|
||||
const password = ref('')
|
||||
const errorCode = ref(0) // 0: no error, 1: wrong password
|
||||
|
||||
function onSubmit() {
|
||||
const result = props.compare(password.value)
|
||||
|
||||
if (!result) {
|
||||
errorCode.value = 1
|
||||
}
|
||||
else {
|
||||
errorCode.value = 0
|
||||
password.value = ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="encrypt-form">
|
||||
<p class="encrypt-text" v-html="info ?? 'Only Password can access this site'" />
|
||||
<p class="encrypt-input-wrapper">
|
||||
<IconLock class="icon icon-lock" />
|
||||
<input
|
||||
v-model="password"
|
||||
class="encrypt-input"
|
||||
:class="{ error: errorCode === 1 }"
|
||||
type="password"
|
||||
:placeholder="theme.encryptPlaceholder ?? 'Enter Password'"
|
||||
@keyup.enter="onSubmit"
|
||||
@input="password && (errorCode = 0)"
|
||||
>
|
||||
</p>
|
||||
<button class="encrypt-button" @click="onSubmit">
|
||||
{{ theme.encryptButtonText ?? 'Confirm' }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.encrypt-form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.encrypt-text {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 30px;
|
||||
color: var(--vp-c-text-1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.encrypt-input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-lock {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: var(--vp-c-border);
|
||||
}
|
||||
|
||||
.encrypt-input {
|
||||
width: 100%;
|
||||
padding: 8px 12px 8px 32px;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--vp-c-border);
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
transition: border-color var(--t-color), background-color var(--t-color);
|
||||
}
|
||||
|
||||
.encrypt-input:focus {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.encrypt-input.error {
|
||||
border-color: var(--vp-c-danger-3);
|
||||
}
|
||||
|
||||
.encrypt-button {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
margin-top: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-white);
|
||||
cursor: pointer;
|
||||
background-color: var(--vp-c-brand-1);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
transition: background-color var(--t-color);
|
||||
}
|
||||
|
||||
.encrypt-button:hover {
|
||||
background-color: var(--vp-c-brand-2);
|
||||
}
|
||||
</style>
|
||||
@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { useSiteLocaleData } from 'vuepress/client'
|
||||
import { useThemeLocaleData } from '../composables/index.js'
|
||||
import { useGlobalEncrypt } from '../composables/encrypt.js'
|
||||
import IconLock from './icons/IconLock.vue'
|
||||
import VFooter from './VFooter.vue'
|
||||
import EncryptForm from './EncryptForm.vue'
|
||||
|
||||
const theme = useThemeLocaleData()
|
||||
const siteData = useSiteLocaleData()
|
||||
@ -12,21 +12,6 @@ const { compareGlobal } = useGlobalEncrypt()
|
||||
|
||||
const avatar = computed(() => theme.value.avatar)
|
||||
const title = computed(() => avatar.value?.name || siteData.value.title)
|
||||
|
||||
const password = ref('')
|
||||
const errorCode = ref(0) // 0: no error, 1: wrong password
|
||||
|
||||
function compare() {
|
||||
const result = compareGlobal(password.value)
|
||||
|
||||
if (!result) {
|
||||
errorCode.value = 1
|
||||
}
|
||||
else {
|
||||
errorCode.value = 0
|
||||
password.value = ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -40,24 +25,7 @@ function compare() {
|
||||
{{ title }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="encrypt">
|
||||
<p class="encrypt-text" v-html="theme.encryptGlobalText ?? 'Only Password can access this site'" />
|
||||
<p class="encrypt-input-wrapper">
|
||||
<IconLock class="icon icon-lock" />
|
||||
<input
|
||||
v-model="password"
|
||||
class="encrypt-input"
|
||||
:class="{ error: errorCode === 1 }"
|
||||
type="password"
|
||||
:placeholder="theme.encryptPlaceholder ?? 'Enter Password'"
|
||||
@keyup.enter="compare"
|
||||
@input="password && (errorCode = 0)"
|
||||
>
|
||||
</p>
|
||||
<button class="encrypt-button" @click="compare">
|
||||
{{ theme.encryptButtonText ?? 'Confirm' }}
|
||||
</button>
|
||||
</div>
|
||||
<EncryptForm :compare="compareGlobal" :info="theme.encryptGlobalText" />
|
||||
</div>
|
||||
</div>
|
||||
<VFooter />
|
||||
@ -131,62 +99,4 @@ function compare() {
|
||||
text-align: center;
|
||||
transition: color var(--t-color);
|
||||
}
|
||||
|
||||
.encrypt {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.encrypt-text {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 30px;
|
||||
color: var(--vp-c-text-1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.encrypt-input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-lock {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: var(--vp-c-border);
|
||||
}
|
||||
|
||||
.encrypt-input {
|
||||
width: 100%;
|
||||
padding: 8px 12px 8px 32px;
|
||||
background-color: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-border);
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
transition: border-color var(--t-color), background-color var(--t-color);
|
||||
}
|
||||
|
||||
.encrypt-input:focus {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.encrypt-input.error {
|
||||
border-color: var(--vp-c-danger-3);
|
||||
}
|
||||
|
||||
.encrypt-button {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
margin-top: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-white);
|
||||
cursor: pointer;
|
||||
background-color: var(--vp-c-brand-1);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
transition: background-color var(--t-color);
|
||||
}
|
||||
|
||||
.encrypt-button:hover {
|
||||
background-color: var(--vp-c-brand-2);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,26 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { usePageEncrypt } from '../composables/encrypt.js'
|
||||
import { useThemeLocaleData } from '../composables/index.js'
|
||||
import IconLock from './icons/IconLock.vue'
|
||||
import EncryptForm from './EncryptForm.vue'
|
||||
|
||||
const theme = useThemeLocaleData()
|
||||
const { comparePage } = usePageEncrypt()
|
||||
|
||||
const password = ref('')
|
||||
const errorCode = ref(0) // 0: no error, 1: wrong password
|
||||
|
||||
function compare() {
|
||||
const result = comparePage(password.value)
|
||||
|
||||
if (!result) {
|
||||
errorCode.value = 1
|
||||
}
|
||||
else {
|
||||
errorCode.value = 0
|
||||
password.value = ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -28,24 +13,7 @@ function compare() {
|
||||
<div class="logo">
|
||||
<IconLock class="icon icon-lock-head" />
|
||||
</div>
|
||||
<div class="encrypt">
|
||||
<p class="encrypt-text" v-html="theme.encryptPageText ?? 'Only Password can access this page'" />
|
||||
<p class="encrypt-input-wrapper">
|
||||
<IconLock class="icon icon-lock" />
|
||||
<input
|
||||
v-model="password"
|
||||
class="encrypt-input"
|
||||
:class="{ error: errorCode === 1 }"
|
||||
type="password"
|
||||
:placeholder="theme.encryptPlaceholder ?? 'Enter Password'"
|
||||
@keyup.enter="compare"
|
||||
@input="password && (errorCode = 0)"
|
||||
>
|
||||
</p>
|
||||
<button class="encrypt-button" @click="compare">
|
||||
{{ theme.encryptButtonText ?? 'Confirm' }}
|
||||
</button>
|
||||
</div>
|
||||
<EncryptForm :compare="comparePage" :info="theme.encryptPageText" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -68,64 +36,4 @@ function compare() {
|
||||
transition-property: box-shadow, background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.encrypt {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.encrypt-text {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
color: var(--vp-c-text-1);
|
||||
text-align: center;
|
||||
transition: color var(--t-color);
|
||||
}
|
||||
|
||||
.encrypt-input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-lock {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: var(--vp-c-border);
|
||||
transition: color var(--t-color);
|
||||
}
|
||||
|
||||
.encrypt-input {
|
||||
width: 100%;
|
||||
padding: 8px 12px 8px 32px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-border);
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
transition: border-color var(--t-color), background-color var(--t-color);
|
||||
}
|
||||
|
||||
.encrypt-input:focus {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.encrypt-input.error {
|
||||
border-color: var(--vp-c-danger-3);
|
||||
}
|
||||
|
||||
.encrypt-button {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
margin-top: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-white);
|
||||
cursor: pointer;
|
||||
background-color: var(--vp-c-brand-1);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
transition: background-color var(--t-color);
|
||||
}
|
||||
|
||||
.encrypt-button:hover {
|
||||
background-color: var(--vp-c-brand-2);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user