水墨风格的输入框

Build_God_Game/src/components/InkButton/InkButton.vue

@@ -38,7 +38,7 @@ defineEmits<{
   content: '';
   position: absolute;
   inset: 0;
-  background: url(@/assets/brushbutton.png) no-repeat center;
+  background: url(@/assets/brush.png) no-repeat center;
   background-size: contain;
   transition: transform 0.3s ease;
   z-index: -1;

Build_God_Game/src/components/InkInput/InkInput.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: string
+  placeholder?: string
+  type?: string
+  autocomplete?: string
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+</script>
+
+<template>
+  <div class="ink-input-wrapper">
+    <input class="ink-input" :type="type || 'text'" :placeholder="placeholder" :value="modelValue"
+      :autocomplete="autocomplete" @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)" />
+  </div>
+</template>
+
+<style scoped>
+.ink-input-wrapper {
+  width: 100%;
+}
+
+.ink-input {
+  width: 100%;
+  height: 60px;
+  padding: 14px 24px 14px 36px;
+  background: url(@/assets/brush.png) no-repeat left center;
+  background-size: 100% 100%;
+  border: none;
+  border-radius: 12px;
+  font-family: "STKaiti", "KaiTi", "华文楷体", "Microsoft YaHei", cursive;
+  font-size: 16px;
+  color: #ffffff;
+  letter-spacing: 3px;
+  outline: none;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+.ink-input::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+  letter-spacing: 3px;
+}
+
+.ink-input:focus {
+  outline: none;
+}
+</style>

Build_God_Game/src/views/LoginView.vue

@@ -5,6 +5,7 @@ import { useAuthStore } from '@/stores/auth'
 import Particles from '@/components/Particles/Particles.vue'
 import BlurText from '@/components/BlurText/BlurText.vue'
 import InkButton from '@/components/InkButton/InkButton.vue'
+import InkInput from '@/components/InkInput/InkInput.vue'
 
 const router = useRouter()
 const authStore = useAuthStore()
@@ -22,7 +23,7 @@ const handleLogin = async () => {
   errorMsg.value = ''
 
   if (!username.value || !password.value) {
-    errorMsg.value = '请输入用户名和密码'
+    errorMsg.value = '？你输入完了吗，就登录'
     return
   }
 
@@ -61,14 +62,12 @@ const handleLogin = async () => {
 
         <form class="login-form" @submit.prevent="handleLogin">
           <div class="form-group">
-            <label class="form-label">用户名</label>
+            <InkInput v-model="username" placeholder="请输入用户名" type="text" autocomplete="username"
-            <input v-model="username" type="text" class="form-input" autocomplete="username"
               @keyup.enter="handleLogin" />
           </div>
 
           <div class="form-group">
-            <label class="form-label">密码</label>
+            <InkInput v-model="password" placeholder="请输入密码" type="password" autocomplete="current-password"
-            <input v-model="password" type="password" class="form-input" autocomplete="current-password"
               @keyup.enter="handleLogin" />
           </div>
 
@@ -123,13 +122,13 @@ const handleLogin = async () => {
   backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 20px;
-  padding: 36px;
+  padding: 28px;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
 }
 
 .login-header {
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 14px;
 }
 
 .blur-title {
@@ -167,21 +166,17 @@ const handleLogin = async () => {
 .login-form {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 14px;
 }
 
 .form-group {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
 }
 
 .form-label {
-  color: #888888;
+  display: none;
-  font-size: 0.75rem;
-  font-weight: 400;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
 }
 
 .form-input {
@@ -207,16 +202,18 @@ const handleLogin = async () => {
 }
 
 .error-message {
-  color: #888888;
+  color: rgba(255, 255, 255, 0.8);
-  font-size: 0.8rem;
+  font-size: 14px;
+  font-weight: 400;
   text-align: center;
-  padding: 10px;
+  padding: 8px 0;
-  background: rgba(255, 255, 255, 0.03);
+  background: transparent;
-  border-radius: 8px;
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
+  letter-spacing: 2px;
 }
 
 .login-footer {
-  margin-top: 28px;
+  margin-top: 20px;
   text-align: center;
   display: flex;
   justify-content: center;

Build_God_Game/src/views/RegisterView.vue

@@ -5,6 +5,7 @@ import { useAuthStore } from '@/stores/auth'
 import Particles from '@/components/Particles/Particles.vue'
 import Shuffle from '@/components/Shuffle/Shuffle.vue'
 import InkButton from '@/components/InkButton/InkButton.vue'
+import InkInput from '@/components/InkInput/InkInput.vue'
 
 const router = useRouter()
 const authStore = useAuthStore()
@@ -94,25 +95,22 @@ const handleRegister = async () => {
         <form class="register-form" @submit.prevent="handleRegister">
           <div class="form-group">
             <label class="form-label">用户名</label>
-            <input v-model="username" type="text" class="form-input" placeholder="3-30个字符，仅限字母数字下划线"
+            <InkInput v-model="username" placeholder="3-30个字符，仅限字母数字下划线" type="text" autocomplete="username" />
-              autocomplete="username" />
           </div>
 
           <div class="form-group">
             <label class="form-label">邮箱</label>
-            <input v-model="email" type="email" class="form-input" placeholder="请输入邮箱地址" autocomplete="email" />
+            <InkInput v-model="email" placeholder="请输入邮箱地址" type="email" autocomplete="email" />
           </div>
 
           <div class="form-group">
             <label class="form-label">密码</label>
-            <input v-model="password" type="password" class="form-input" placeholder="至少4个字符"
+            <InkInput v-model="password" placeholder="至少4个字符" type="password" autocomplete="new-password" />
-              autocomplete="new-password" />
           </div>
 
           <div class="form-group">
             <label class="form-label">确认密码</label>
-            <input v-model="confirmPassword" type="password" class="form-input" placeholder="请再次输入密码"
+            <InkInput v-model="confirmPassword" placeholder="请再次输入密码" type="password" autocomplete="new-password" />
-              autocomplete="new-password" />
           </div>
 
           <div v-if="errorMsg" class="error-message">
@@ -240,12 +238,14 @@ const handleRegister = async () => {
 }
 
 .error-message {
-  color: #888888;
+  color: rgba(255, 255, 255, 0.8);
-  font-size: 0.8rem;
+  font-size: 14px;
+  font-weight: 400;
   text-align: center;
-  padding: 10px;
+  padding: 8px 0;
-  background: rgba(255, 255, 255, 0.03);
+  background: transparent;
-  border-radius: 8px;
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
+  letter-spacing: 2px;
 }
 
 .register-footer {