commit code.

src/views/ChangePassword/components/ChangePasswordByPassword.vue

@@ -0,0 +1,159 @@
+<template>
+    <div class="login-form-container">
+        <div class="title">
+            <span style="color: #6777ef">Plusone&nbsp;</span>
+            <span style="font-weight: 300">Admin</span>
+        </div>
+
+        <n-form
+            ref="formRef"
+            :model="model"
+            :rules="rules"
+            :show-feedback="false"
+            :show-label="false"
+            size="large"
+        >
+            <n-form-item path="principal">
+                <n-input
+                    placeholder="用户名 / 邮箱地址 / 手机号"
+                    v-model:value="model.principal"
+                    @keydown.enter.prevent
+                />
+            </n-form-item>
+            <n-form-item path="password">
+                <n-input
+                    placeholder="密码"
+                    v-model:value="model.password"
+                    type="password"
+                    @input="handlePasswordInput"
+                    @keydown.enter.prevent
+                />
+            </n-form-item>
+
+            <n-grid y-gap="24" :cols="2">
+                <n-gi>
+                    <n-form-item path="rememberMe">
+                        <n-checkbox v-model:checked="model.rememberMe" size="large">
+                            <span style="color: #808080">保持登录状态</span>
+                        </n-checkbox>
+                    </n-form-item>
+                </n-gi>
+                <n-gi>
+                    <div style="display: flex; justify-content: flex-end">
+                        <n-button class="txt-btn" text @click="$emit('toLoginByOTP')"> 验证码登录 </n-button>
+                    </div>
+                </n-gi>
+            </n-grid>
+
+            <n-button
+                type="primary"
+                size="large"
+                style="width: 100%; margin-top: 8px"
+                @click="handleBtnLoginClick"
+            >
+                登录
+            </n-button>
+
+            <div style="display: flex; justify-content: flex-end; margin-top: 8px">
+                <n-button class="txt-btn" text style="margin-left: 16px"> 忘记密码 </n-button>
+                <n-button class="txt-btn" text style="margin-left: 16px"> 免费注册 </n-button>
+            </div>
+        </n-form>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import type { FormInst, FormItemInst, FormItemRule, FormRules } from "naive-ui";
+import type { PrincipalType } from "@/type/PrincipalType";
+
+interface LoginByPasswordCommand {
+    principal: string;
+    password: string;
+    rememberMe: boolean;
+    principalType?: PrincipalType;
+}
+
+const formRef = ref<FormInst | null>(null);
+const rPasswordFormItemRef = ref<FormItemInst | null>(null);
+const model = ref<LoginByPasswordCommand>({
+    principal: "",
+    password: "",
+    rememberMe: false,
+});
+
+const rules: FormRules = {
+    principal: [
+        {
+            required: true,
+            validator(rule: FormItemRule, value: string) {
+                if (!value) {
+                    return new Error("需要年龄");
+                } else if (!/^\d*$/.test(value)) {
+                    return new Error("年龄应该为整数");
+                } else if (Number(value) < 18) {
+                    return new Error("年龄应该超过十八岁");
+                }
+                return true;
+            },
+            trigger: ["input", "blur"],
+        },
+    ],
+    password: [
+        {
+            required: true,
+            message: "请输入密码",
+        },
+    ],
+};
+
+function handlePasswordInput() {
+    if (model.value.rememberMe) {
+        rPasswordFormItemRef.value?.validate({ trigger: "password-input" });
+    }
+}
+
+function handleBtnLoginClick(e: MouseEvent) {
+    e.preventDefault();
+    formRef.value?.validate((errors) => {
+        if (!errors) {
+            window.$message.success("验证成功");
+        } else {
+            console.log(errors);
+            window.$message.error("验证失败");
+        }
+    });
+}
+</script>
+
+<style scoped>
+.login-form-container {
+    width: 320px;
+    background-color: #f3f3f3;
+    padding: 32px 40px;
+    border-radius: 6px;
+    border: solid 1px #e4e4e4;
+    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.2);
+    border-top: solid 4px #6777ef;
+}
+
+.title {
+    font-size: 30px;
+    text-align: center;
+    margin-bottom: 16px;
+}
+
+.n-form-item {
+    margin-bottom: 8px;
+}
+
+.txt-btn {
+    line-height: 40px;
+    font-size: 15px;
+    color: #6777ef;
+}
+
+.txt-btn:hover {
+    color: rgba(103, 119, 239, 0.8);
+}
+</style>