Initial commit

electron-vue-template/src/renderer/components/auth/RegisterDialog.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import { User } from '@element-plus/icons-vue'
+import { authApi } from '../../api/auth'
+
+interface Props {
+  modelValue: boolean
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'registerSuccess'): void
+  (e: 'backToLogin'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const registerForm = ref({ username: '', password: '', confirmPassword: '' })
+const registerLoading = ref(false)
+const usernameCheckResult = ref<boolean | null>(null)
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+const canRegister = computed(() => {
+  const { username, password, confirmPassword } = registerForm.value
+  return username &&
+         password.length >= 6 &&
+         password === confirmPassword &&
+         usernameCheckResult.value === true
+})
+
+async function checkUsernameAvailability() {
+  if (!registerForm.value.username) {
+    usernameCheckResult.value = null
+    return
+  }
+
+  try {
+    const data = await authApi.checkUsername(registerForm.value.username)
+    usernameCheckResult.value = data.available
+  } catch {
+    usernameCheckResult.value = null
+  }
+}
+
+async function handleRegister() {
+  if (!canRegister.value) return
+
+  registerLoading.value = true
+  try {
+    const result = await authApi.register({
+      username: registerForm.value.username,
+      password: registerForm.value.password
+    })
+    ElMessage.success(result.message || '注册成功，请登录')
+    emit('registerSuccess')
+    resetForm()
+  } catch (err) {
+    ElMessage.error((err as Error).message)
+  } finally {
+    registerLoading.value = false
+  }
+}
+
+function cancelRegister() {
+  visible.value = false
+  resetForm()
+}
+
+function resetForm() {
+  registerForm.value = { username: '', password: '', confirmPassword: '' }
+  usernameCheckResult.value = null
+}
+
+function backToLogin() {
+  emit('backToLogin')
+  resetForm()
+}
+</script>
+
+<template>
+  <el-dialog
+    title="账号注册"
+    v-model="visible"
+    :close-on-click-modal="false"
+    width="450px"
+    center>
+    <div style="text-align: center; padding: 20px 0;">
+      <div style="margin-bottom: 20px; color: #666;">
+        <el-icon size="48" color="#67C23A"><User /></el-icon>
+        <p style="margin-top: 15px; font-size: 16px;">创建新账号</p>
+      </div>
+
+      <el-input
+        v-model="registerForm.username"
+        placeholder="请输入用户名"
+        prefix-icon="User"
+        size="large"
+        style="margin-bottom: 15px;"
+        :disabled="registerLoading"
+        @blur="checkUsernameAvailability">
+      </el-input>
+
+      <div v-if="usernameCheckResult !== null" style="margin-bottom: 15px; text-align: left;">
+        <span v-if="usernameCheckResult" style="color: #67C23A; font-size: 12px;">
+          ✓ 用户名可用
+        </span>
+        <span v-else style="color: #F56C6C; font-size: 12px;">
+          ✗ 用户名已存在
+        </span>
+      </div>
+
+      <el-input
+        v-model="registerForm.password"
+        placeholder="请输入密码（至少6位）"
+        type="password"
+        size="large"
+        style="margin-bottom: 15px;"
+        :disabled="registerLoading">
+      </el-input>
+
+      <el-input
+        v-model="registerForm.confirmPassword"
+        placeholder="请再次输入密码"
+        type="password"
+        size="large"
+        style="margin-bottom: 20px;"
+        :disabled="registerLoading">
+      </el-input>
+
+      <div>
+        <el-button
+          type="success"
+          size="large"
+          :loading="registerLoading"
+          :disabled="!canRegister || registerLoading"
+          @click="handleRegister"
+          style="width: 120px; margin-right: 10px;">
+          注册
+        </el-button>
+        <el-button
+          size="large"
+          :disabled="registerLoading"
+          @click="cancelRegister"
+          style="width: 120px;">
+          取消
+        </el-button>
+      </div>
+
+      <div style="margin-top: 20px; text-align: center;">
+        <el-button type="text" @click="backToLogin" :disabled="registerLoading">
+          已有账号？返回登录
+        </el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>