From d198f7f8670384e43f4e80360323b16b60e389ca Mon Sep 17 00:00:00 2001
From: Childish-Ghost <thestarlake.lukemackin@gmail.com>
Date: Thu, 24 Jul 2025 17:52:24 +0800
Subject: [PATCH] =?UTF-8?q?V0.2.2.20250724=20=E2=80=94=E2=80=94=E2=80=94?=
 =?UTF-8?q?=E2=80=94=E2=80=94=E2=80=94=E2=80=94=E2=80=94=E2=80=94=E2=80=94?=
 =?UTF-8?q?=E2=80=94=E2=80=94=E2=80=94=E2=80=94=E2=80=94=201.=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E7=99=BB=E5=BD=95=E9=A1=B5=20=E2=80=94=E2=80=94?=
 =?UTF-8?q?=E2=80=94=E2=80=94=E2=80=94=E2=80=94=E2=80=94=E2=80=94=E2=80=94?=
 =?UTF-8?q?=E2=80=94=E2=80=94=E2=80=94=E2=80=94=E2=80=94=E2=80=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/account/sign-in.vue | 87 +++++++++++++++++++++++++++++-
 1 file changed, 86 insertions(+), 1 deletion(-)

diff --git a/src/components/account/sign-in.vue b/src/components/account/sign-in.vue
index e300aef..287a633 100644
--- a/src/components/account/sign-in.vue
+++ b/src/components/account/sign-in.vue
@@ -1,9 +1,94 @@
 <script setup lang="ts">
 import "@/components/account/sign-in.css"
+import {reactive, ref} from 'vue'
+
+const emit = defineEmits(['option'])
+const handleBack = () => {
+  emit('option')
+}
+
+import type {FormInstance, FormRules} from 'element-plus'
+import {Back} from "@element-plus/icons-vue";
+
+const ruleFormRef = ref<FormInstance>()
+const validateEmail = (rule: any, value: string, callback: any) => {
+  if (!value) {
+    callback(new Error('请输入邮箱地址'))
+  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+    callback(new Error('请输入有效的邮箱地址'))
+  } else {
+    callback()
+  }
+}
+
+const validatePass = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('请输入密码'))
+  } else {
+    if (ruleForm.checkPass !== '') {
+      if (!ruleFormRef.value) return
+      ruleFormRef.value.validateField('checkPass')
+    }
+    callback()
+  }
+}
+
+const ruleForm = reactive({
+  email: '',
+  pass: '',
+})
+
+const rules = reactive<FormRules<typeof ruleForm>>({
+  email: [{validator:validateEmail,trigger:'blur'}],
+  pass: [{validator: validatePass, trigger: 'blur'}],
+})
+
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!')
+    }
+  })
+}
 </script>
 
 <template>
-  in
+  <el-form
+      ref="ruleFormRef"
+      style="max-width: 600px"
+      :model="ruleForm"
+      status-icon
+      :rules="rules"
+      label-width="auto"
+      class="demo-ruleForm"
+  >
+    <el-form-item style="width:100%;">
+      <!--      返回-->
+      <el-button :shouldAddSpace="true" class="ButtonState-left ButtonState" round @click="handleBack">
+        <el-icon>
+          <Back/>
+        </el-icon>
+        返回
+      </el-button>
+      <el-text>登录</el-text>
+    </el-form-item>
+    <el-form-item label="电子邮箱（Email）" prop="email">
+      <el-input v-model="ruleForm.email" type="email" autocomplete="off"/>
+    </el-form-item>
+    <el-form-item label="密码（Password）" prop="pass">
+      <el-input v-model="ruleForm.pass" type="password" autocomplete="off"/>
+    </el-form-item>
+    <el-form-item style="width:100%;">
+      <!--      忘记密码-->
+      <el-button key="ResetPassword" type="info" text style="height: 20px; margin: 0;padding: 0;">忘记密码？</el-button>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="submitForm(ruleFormRef)" style="height: 70px;">提交</el-button>
+    </el-form-item>
+  </el-form>
 </template>
 
 <style scoped>