腾讯 DeepSeek-R1 × Vue3 集成开发体验报告

// AuthForm.tsx
import { defineComponent, reactive, ref } from 'vue'

interface FormData {
  email: string
  password: string
  confirmPassword?: string
}

export default defineComponent({
  setup() {
    const isLoginMode = ref(true)
    const isLoading = ref(false)
    const errorMessage = ref('')
    const formData = reactive({
      email: '',
      password: '',
      confirmPassword: ''
    })
    const errors = reactive({
      email: '',
      password: '',
      confirmPassword: ''
    })

    const validateEmail = (email: string) => {
      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!email) return '电子邮件是必填项'
      if (!regex.test(email)) return '电子邮件格式不正确'
      return ''
    }

    const validatePassword = (password: string) => {
      if (!password) return '密码是必填项'
      if (password.length < 6) return '密码长度必须至少为6个字符'
      return ''
    }

    const validateForm = () => {
      let isValid = true

      errors.email = validateEmail(formData.email)
      errors.password = validatePassword(formData.password)
      if (!isLoginMode.value) {
        errors.confirmPassword = formData.password === formData.confirmPassword
          ? ''
          : '密码不匹配'
      }

      if (Object.values(errors).some(msg => msg)) isValid = false
      return isValid
    }

    const handleSubmit = async (e: Event) => {
      e.preventDefault()
      if (!validateForm()) return
      isLoading.value = true
      errorMessage.value = ''

      try {
        // 模拟 API 调用
        await new Promise(resolve => setTimeout(resolve, 1000))

        if (isLoginMode.value) {
          console.log('登录数据:', formData)
          // 实际调用登录 API
        } else {
          console.log('注册数据:', formData)
          // 实际调用注册 API
        }
      } catch (err) {
        errorMessage.value = '发生错误，请重试。'
      } finally {
        isLoading.value = false
      }
    }

    const switchMode = () => {
      isLoginMode.value = !isLoginMode.value
      // 重置表单
      Object.assign(formData, {
        email: '',
        password: '',
        confirmPassword: ''
      })
      Object.assign(errors, {
        email: '',
        password: '',
        confirmPassword: ''
      })
    }

    return () => (
      <form onSubmit={handleSubmit}>
        <h2>{isLoginMode.value ? '登录' : '注册'}</h2>
        {errorMessage.value && (
          <p>{errorMessage.value}</p>
        )}
        <div>
          <label>电子邮件</label>
          <input
            type="email"
            value={formData.email}
            onInput={(e: Event) => formData.email = (e.target as HTMLInputElement).value}
          />
          {errors.email && <p>{errors.email}</p>}
        </div>
        <div>
          <label>密码</label>
          <input
            type="password"
            value={formData.password}
            onInput={(e: Event) => formData.password = (e.target as HTMLInputElement).value}
          />
          {errors.password && <p>{errors.password}</p>}
        </div>
        {!isLoginMode.value && (
          <div>
            <label>确认密码</label>
            <input
              type="password"
              value={formData.confirmPassword}
              onInput={(e: Event) => formData.confirmPassword = (e.target as HTMLInputElement).value}
            />
            {errors.confirmPassword && (
              <p>{errors.confirmPassword}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
            )}
          </div>
        )}
        <button type="submit">
          {isLoading.value ? '处理中...' : isLoginMode.value ? '登录' : '注册'}
        </button>
        <p>
          {isLoginMode.value ? '需要账号？ ' : '已有账号？ '}
          <a onClick={switchMode}>{isLoginMode.value ? '注册' : '登录'}</a>
        </p>
      </form>
    )
  }
})