feat: 完成情绪博物馆项目重构和功能增强 - 新增日记评论和帖子功能 - 重构前端架构，优化用户体验 - 完善WebSocket通信机制 - 更新项目文档和部署配置

web/src/composables/useAuth.ts

@@ -0,0 +1,261 @@
+/**
+ * 认证相关组合式函数
+ */
+
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { useAuthStore } from '@/stores/auth'
+import AuthService from '@/services/auth'
+import type { LoginRequest, RegisterRequest, CaptchaResponse } from '@/types/auth'
+
+/**
+ * 使用认证功能
+ */
+export const useAuth = () => {
+  const router = useRouter()
+  const authStore = useAuthStore()
+
+  // 加载状态
+  const loading = ref(false)
+
+  // 验证码相关
+  const captchaData = ref<CaptchaResponse | null>(null)
+  const captchaImage = computed(() => 
+    captchaData.value ? `data:image/png;base64,${captchaData.value.captchaImage}` : ''
+  )
+
+  /**
+   * 获取验证码
+   */
+  const getCaptcha = async () => {
+    try {
+      const response = await AuthService.getCaptcha()
+      captchaData.value = response
+      return response
+    } catch (error) {
+      console.error('获取验证码失败:', error)
+      ElMessage.error('获取验证码失败')
+      throw error
+    }
+  }
+
+  /**
+   * 刷新验证码
+   */
+  const refreshCaptcha = async () => {
+    return getCaptcha()
+  }
+
+  /**
+   * 登录
+   */
+  const login = async (loginData: LoginRequest) => {
+    try {
+      loading.value = true
+      const success = await authStore.login(loginData)
+      
+      if (success) {
+        ElMessage.success('登录成功')
+        return true
+      }
+      return false
+    } catch (error: any) {
+      console.error('登录失败:', error)
+      ElMessage.error(error.message || '登录失败')
+      return false
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /**
+   * 注册
+   */
+  const register = async (registerData: RegisterRequest) => {
+    try {
+      loading.value = true
+      const success = await authStore.register(registerData)
+      
+      if (success) {
+        ElMessage.success('注册成功')
+        return true
+      }
+      return false
+    } catch (error: any) {
+      console.error('注册失败:', error)
+      ElMessage.error(error.message || '注册失败')
+      return false
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /**
+   * 登出
+   */
+  const logout = async () => {
+    try {
+      await authStore.logout()
+      router.push('/login')
+    } catch (error) {
+      console.error('登出失败:', error)
+    }
+  }
+
+  /**
+   * 检查账号是否存在
+   */
+  const checkAccountExists = async (account: string) => {
+    if (!account || !/^[a-zA-Z0-9_]{4,20}$/.test(account)) {
+      return false
+    }
+    
+    try {
+      return await AuthService.checkAccountExists(account)
+    } catch (error) {
+      console.error('检查账号失败:', error)
+      return false
+    }
+  }
+
+  /**
+   * 检查邮箱是否存在
+   */
+  const checkEmailExists = async (email: string) => {
+    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      return false
+    }
+    
+    try {
+      return await AuthService.checkEmailExists(email)
+    } catch (error) {
+      console.error('检查邮箱失败:', error)
+      return false
+    }
+  }
+
+  /**
+   * 检查手机号是否存在
+   */
+  const checkPhoneExists = async (phone: string) => {
+    if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
+      return false
+    }
+    
+    try {
+      return await AuthService.checkPhoneExists(phone)
+    } catch (error) {
+      console.error('检查手机号失败:', error)
+      return false
+    }
+  }
+
+  return {
+    // 状态
+    loading,
+    captchaData,
+    captchaImage,
+    
+    // 计算属性
+    isLoggedIn: authStore.isLoggedIn,
+    userInfo: authStore.userInfo,
+    
+    // 方法
+    getCaptcha,
+    refreshCaptcha,
+    login,
+    register,
+    logout,
+    checkAccountExists,
+    checkEmailExists,
+    checkPhoneExists
+  }
+}
+
+/**
+ * 使用表单验证
+ */
+export const useFormValidation = () => {
+  /**
+   * 账号验证规则
+   */
+  const validateAccount = (rule: any, value: string, callback: any) => {
+    if (!value) {
+      callback(new Error('请输入账号'))
+      return
+    }
+    if (!/^[a-zA-Z0-9_]{4,20}$/.test(value)) {
+      callback(new Error('账号只能包含字母、数字和下划线，长度4-20位'))
+      return
+    }
+    callback()
+  }
+
+  /**
+   * 密码验证规则
+   */
+  const validatePassword = (rule: any, value: string, callback: any) => {
+    if (!value) {
+      callback(new Error('请输入密码'))
+      return
+    }
+    if (value.length < 6 || value.length > 20) {
+      callback(new Error('密码长度必须在6-20位之间'))
+      return
+    }
+    callback()
+  }
+
+  /**
+   * 确认密码验证规则
+   */
+  const validateConfirmPassword = (password: string) => {
+    return (rule: any, value: string, callback: any) => {
+      if (!value) {
+        callback(new Error('请再次输入密码'))
+        return
+      }
+      if (value !== password) {
+        callback(new Error('两次输入的密码不一致'))
+        return
+      }
+      callback()
+    }
+  }
+
+  /**
+   * 邮箱验证规则
+   */
+  const validateEmail = (rule: any, value: string, callback: any) => {
+    if (!value) {
+      callback(new Error('请输入邮箱地址'))
+      return
+    }
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    if (!emailRegex.test(value)) {
+      callback(new Error('请输入正确的邮箱格式'))
+      return
+    }
+    callback()
+  }
+
+  /**
+   * 手机号验证规则
+   */
+  const validatePhone = (rule: any, value: string, callback: any) => {
+    if (value && !/^1[3-9]\d{9}$/.test(value)) {
+      callback(new Error('请输入正确的手机号格式'))
+      return
+    }
+    callback()
+  }
+
+  return {
+    validateAccount,
+    validatePassword,
+    validateConfirmPassword,
+    validateEmail,
+    validatePhone
+  }
+}