V0.2.2.20250724

———————————————
1.创建登录页
———————————————

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>

src/components/account/sign-up.vue

@@ -85,7 +85,7 @@ const submitForm = (formEl: FormInstance | undefined) => {
         </el-icon>
         返回
       </el-button>
-      <el-text>登录</el-text>
+      <el-text>注册</el-text>
     </el-form-item>
     <el-form-item label="用户名（UserID）" prop="userid">
       <el-input v-model="ruleForm.text" type="text" autocomplete="off"/>
@@ -99,10 +99,6 @@ const submitForm = (formEl: FormInstance | undefined) => {
     <el-form-item label="二次确认密码（CheckPass）" prop="checkPass">
       <el-input v-model="ruleForm.checkPass" 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>