feat(authentication): 二维码登录和验证码登录组件增加返回按钮显隐配置 #6713
Conversation
- 在 CodeLogin 和 QrcodeLogin 组件中添加 showBack 属性 - 根据 showBack 属性决定是否显示返回按钮 - 默认值为 true，即默认显示返回按钮
ymind
requested review from
anncwb,
vince292007,
mynetfan and
jinmao88
as code owners
|
WalkthroughAdds an optional showBack boolean prop (default true) to two authentication UI components. The back button is now conditionally rendered based on this prop; previously it was always shown. No other logic changes. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Consumer
participant CodeLogin as CodeLogin component
participant QRLogin as QrCodeLogin component
Consumer->>CodeLogin: mount(showBack = true/false)
Note over CodeLogin: If showBack === true, render Back button<br/>Else, hide Back button
Consumer->>QRLogin: mount(showBack = true/false)
Note over QRLogin: If showBack === true, render Back button<br/>Else, hide Back button
Consumer->>CodeLogin: click Back (if visible)
CodeLogin-->>Consumer: trigger existing go-to-login flow
Consumer->>QRLogin: click Back (if visible)
QRLogin-->>Consumer: trigger existing go-to-login flow
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
packages/effects/common-ui/src/ui/authentication/code-login.vue (2)
38-41: Prop addition and default value are solid; preserves backward compatibility.Adding showBack with a default of true mirrors previous behavior (back button always visible). Consider documenting the default in the JSDoc for consistency with other props.
Apply:
/** * @zh_CN 是否显示返回按钮 + * @default true */ showBack?: boolean;Also applies to: 50-50
118-121: Let parents intercept “back” and avoid accidental form submissions.
- Emit a back event before routing so hosts can override or track navigation.
- Set the button type="button" to avoid unintended form submits if rendered inside a form.
-const emit = defineEmits<{ - submit: [Recordable<any>]; -}>(); +const emit = defineEmits<{ + submit: [Recordable<any>]; + back: []; +}>(); -function goToLogin() { - router.push(props.loginPath); -} +function goToLogin() { + emit('back'); + if (props.loginPath) router.push(props.loginPath); +}- <VbenButton v-if="showBack" class="mt-4 w-full" variant="outline" @click="goToLogin()"> + <VbenButton + v-if="showBack" + class="mt-4 w-full" + variant="outline" + type="button" + @click="goToLogin" + >packages/effects/common-ui/src/ui/authentication/qrcode-login.vue (2)
38-41: Consistent API: showBack prop with a default of true looks good.Matches code-login.vue and keeps existing UX by default. Consider documenting the default in the JSDoc.
/** * @zh_CN 是否显示返回按钮 + * @default true */ showBack?: boolean;Also applies to: 51-51
67-69: Expose a cancellable “back” hook and harden the button behavior.
- Emit a back event before routing to allow parent interception.
- Add type="button" and prefer @click="goToLogin" (no parens) for consistency.
+const emit = defineEmits<{ + back: []; +}>();-function goToLogin() { - router.push(props.loginPath); -} +function goToLogin() { + emit('back'); + if (props.loginPath) router.push(props.loginPath); +}- <VbenButton v-if="showBack" class="mt-4 w-full" variant="outline" @click="goToLogin()"> + <VbenButton + v-if="showBack" + class="mt-4 w-full" + variant="outline" + type="button" + @click="goToLogin" + >Also applies to: 96-99
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
packages/effects/common-ui/src/ui/authentication/code-login.vue(3 hunks)packages/effects/common-ui/src/ui/authentication/qrcode-login.vue(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: post-update (windows-latest)
- GitHub Check: post-update (ubuntu-latest)
当 CodeLogin 和 QrcodeLogin 组件单独使用的时候会非常有用，比如有的场景下只需要短信登录。
具体修改如下：
Description
Type of change
Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit