手写：用 Vue 写一个登录组件，考验组件封装能力

<script setup>
const props = defineProps({
  modelValue: { type: Object, required: true },
  rules: { type: Object, default: () => ({}) },
  submitting: Boolean,
  serverErrors: { type: Object, default: () => ({}) },
});

const emit = defineEmits(["update:modelValue", "submit", "invalid", "reset"]);
const localErrors = reactive({});

function updateField(name, value) {
  emit("update:modelValue", { ...props.modelValue, [name]: value });
}

function validate() {
  Object.keys(localErrors).forEach((key) => delete localErrors[key]);
  if (!props.modelValue.account) localErrors.account = "请输入账号";
  if (!props.modelValue.password) localErrors.password = "请输入密码";
  return Object.keys(localErrors).length === 0;
}

function handleSubmit() {
  if (props.submitting) return;
  if (!validate()) {
    emit("invalid", { ...localErrors });
    return;
  }
  emit("submit", { ...props.modelValue });
}
</script>

<template>
  <form novalidate @submit.prevent="handleSubmit">
    <label>
      账号
      <input
        :value="modelValue.account"
        autocomplete="username"
        :aria-invalid="Boolean(localErrors.account || serverErrors.account)"
        @input="updateField('account', $event.target.value)"
      />
    </label>

    <label>
      密码
      <input
        type="password"
        :value="modelValue.password"
        autocomplete="current-password"
        :aria-invalid="Boolean(localErrors.password || serverErrors.password)"
        @input="updateField('password', $event.target.value)"
      />
    </label>

    <slot name="extraFields" :model="modelValue" />
    <button type="submit" :disabled="submitting" :aria-busy="submitting">登录</button>
    <slot name="footer" />
  </form>
</template>

• 组件只输出 submit payload，不在内部调用 loginApi、写 token 或 router.push。
• button disabled 之外，handleSubmit 入口也必须 guard submitting。