• ✅ API 层封装（fetch-based）
• ✅ Pinia 状态管理（auth & config stores）
• ✅ Vue Router 路由配置（hash 模式）
• ✅ postMessage 通信系统
• ✅ 工具函数和验证器

• ✅ OIDCAuthPage - 主入口页面（iframe 容器）
• ✅ LoginFormPage - 登录表单页面
• ✅ LoginForm - 登录表单组件
• ✅ SocialLoginButtons - 社交登录按钮组件
• 功能：用户名/密码登录、记住账号、社交登录

• ✅ RegisterFormPage - 注册页面
• ✅ RegisterForm - 注册表单组件
• ✅ PasswordStrengthBar - 密码强度指示器
• ✅ VerificationCodeInput - 验证码输入组件
• 功能：动态字段配置、邮箱/手机验证码、密码强度提示

• ✅ ConsentPage - 授权确认页面
• ✅ ConsentForm - 授权确认组件
• 功能：展示应用信息、用户信息、权限列表、授权/拒绝

• ✅ ProfileCompletionPage - 完善信息页面
• ✅ ProfileForm - 完善信息组件
• 功能：补充缺失的邮箱/手机信息

• ✅ SocialBindingPage - 社交绑定页面（已创建占位符）
• ✅ CallbackPage - OAuth 回调处理页面

• ✅ Vue 3.5 + TypeScript
• ✅ Pinia 状态管理
• ✅ Vue Router 4
• ✅ shadcn-vue (new-york style)
• ✅ Tailwind CSS v4
• ✅ vee-validate + zod
• ✅ vue-sonner (Toast 通知)
• ✅ lucide-vue-next (图标)

• ✅ useMessage - postMessage 通信
• ✅ usePasswordStrength - 密码强度计算
• ✅ useCountdown - 倒计时

• ✅ auth store - 认证状态
• ✅ config store - 配置管理（支持从后端动态加载客户端配置）

已实现的 API 调用：

• ✅ oidcLogin - 用户登录
• ✅ registerUser - 用户注册
• ✅ oidcConsent - 授权确认
• ✅ getOIDCAuthInfo - 获取授权信息
• ✅ sendVerificationCode - 发送验证码
• ✅ sendRegisterVerificationCode - 发送注册验证码
• ✅ completeProfile - 完善信息
• ✅ getRegisterSettings - 获取注册配置
• ✅ getClientConfig - 获取客户端配置（待后端实现）
• ✅ getEnabledProviders - 获取社交登录提供商
• ✅ bindWithLogin - 绑定已有账户（待实现 UI）
• ✅ registerWithSocial - 社交注册（待实现 UI）

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建生产版本
pnpm build

# 预览生产版本
pnpm preview

1. 社交绑定页面 - SocialBindingPage 需要完整实现（目前是占位符）
2. 后端接口 - 需要实现 GET /api/oidc/client-config 接口
3. 多语言支持 - i18n 配置和语言包
4. 主题定制 - 动态应用主题色和自定义 CSS
5. 样式隔离 - Shadow DOM 封装（如需要）
6. 忘记密码 - 密码重置流程
7. 单元测试 - 组件和函数测试
8. E2E 测试 - 完整流程测试

创建 .env 文件：

VITE_API_URL=http://localhost:8080

当前使用 hash 模式 (createWebHashHistory)，适合 iframe 嵌入。

在 src/api/request.ts 中配置，默认从环境变量 VITE_API_URL 读取。

<!-- 父页面 -->
<div id="auth-container"></div>

<script>
  // 打开认证页面
  const authUrl = 'http://localhost:5173/#/oidc/login?session_id=xxx'
  const iframe = document.createElement('iframe')
  iframe.src = authUrl
  iframe.style.width = '100%'
  iframe.style.height = '700px'
  document.getElementById('auth-container').appendChild(iframe)

  // 监听认证结果
  window.addEventListener('message', (event) => {
    if (event.data.type === 'success') {
      console.log('登录成功', event.data.user)
    }
  })
</script>

所有 UI 组件都使用 shadcn-vue，已安装的组件包括：

• Button, Input, Label, Form, Checkbox
• Alert, Badge, Card, Separator
• Tooltip, Tabs
• 等等...

1. 所有表单都使用 vee-validate + zod 进行验证
2. Toast 通知使用 vue-sonner
3. 支持暗色模式（通过 Tailwind CSS）
4. 响应式设计，适配各种屏幕尺寸
5. 使用 Pinia 管理全局状态
6. postMessage 用于 iframe 和父页面通信

• CSRF 防护：使用 session_id 验证
• XSS 防护：所有用户输入都经过验证
• postMessage 安全：需要验证 origin（生产环境）
• 密码强度检查：前端和后端双重验证

src/
├── api/           # API 接口
├── components/    # Vue 组件
│   ├── oidc/     # OIDC 认证组件
│   └── ui/       # shadcn-vue 组件
├── composables/   # 组合式函数
├── router/        # 路由配置
├── stores/        # Pinia stores
├── types/         # TypeScript 类型
├── utils/         # 工具函数
├── views/         # 页面组件
├── App.vue        # 根组件
└── main.ts        # 入口文件

1. 完成社交绑定 UI
2. 实现后端 /api/oidc/client-config 接口
3. 添加多语言支持
4. 添加单元测试和 E2E 测试
5. 性能优化和代码分割
6. 生产环境配置和部署

---

版本: 1.0.0
最后更新: 2025-01-12
作者: AI Assistant