fix: user email regex setting visibility

[dreamhunter2333]

Summary

• keep the email regex validation option visible after enabling it in admin user settings
• escape literal @ characters in the i18n help text to avoid vue-i18n message compilation errors

Verification

• npm run build (frontend)

Summary by CodeRabbit

发布说明

• 改进

  • 优化了邮箱检查选项的用户界面布局，改进了复选框与输入框的排列方式。
  • 增强了输入框的显示效果，使其响应式设计更加流畅。

• 样式

  • 调整了相关控件的间距和对齐方式。

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a5cc4acb-14d6-40e4-b4fa-5c614db23007

📥 Commits

Reviewing files that changed from the base of the PR and between e6cc8e2 and 471c6b7.

📒 Files selected for processing (1)

• frontend/src/views/admin/UserSettings.vue

---

📝 Walkthrough

概览

更新了用户设置页面的emailCheckRegex国际化字符串转义处理，将enableEmailCheckRegex的UI布局从input-group改为flex容器设计，同时将条件渲染改为使用v-show控制可见性的DOM始终存在模式。

更改项目

Cohort / File(s)	摘要
UI布局与国际化更新 frontend/src/views/admin/UserSettings.vue	调整emailCheckRegex的i18n消息中@符号的转义方式；将enableEmailCheckRegex的UI容器从n-input-group改为n-flex，使复选框与输入框内联排列；改变条件渲染逻辑，使用v-show替代v-if；优化flex布局中的元素宽度设置。

预估代码审查工作量

🎯 2 (Simple) | ⏱️ ~8 minutes

诗

🐰 一个复选框，妙趣横生，
布局重铺，如诗般精，
国际之符，转义妥当，
可见与隐，v-show来帮，
用户设置，焕然一新！✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题准确反映了主要变更：修复了邮箱正则表达式设置在启用后的可见性问题，这是PR的核心目标。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/user-settings-email-regex-toggle

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🔒 No security concerns identified

⚡ Recommended focus areas for review Possible UI Behavior Issue The v-show directive is used to conditionally display the n-input for emailCheckRegex. Ensure that this approach does not cause unintended UI behavior, such as layout shifts or accessibility issues, when toggling enableEmailCheckRegex. v-show="userSettings.enableEmailCheckRegex" style="flex: 1 1 auto;" :placeholder="t('emailCheckRegex')" /> Regex Escaping Accuracy The emailCheckRegex help text includes escaped @ characters using {'@'}. Verify that this syntax is correctly interpreted in all supported locales and does not cause confusion or errors in the UI. emailCheckRegex: "Email Check Regex (e.g. ^[^.]+{'@'}.+$ to disallow dots before {'@'})",

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Correct invalid regex example syntax The use of {'@'} in the regex example is incorrect and will not work as intended. Replace it with a plain @ to ensure the regex example is valid and understandable. frontend/src/views/admin/UserSettings.vue [24] -emailCheckRegex: "Email Check Regex (e.g. ^[^.]+{'@'}.+$ to disallow dots before {'@'})", +emailCheckRegex: "Email Check Regex (e.g. ^[^.]+@.+$ to disallow dots before @)", Suggestion importance[1-10]: 9 __ Why: The suggestion addresses an incorrect regex syntax in the English translation, which could lead to confusion or errors. Correcting this ensures the regex example is valid and functional, making it highly relevant and impactful.	High
	Fix invalid regex syntax in translation The {'@'} syntax in the regex example is invalid in Chinese translation as well. Replace it with a plain @ to ensure the regex example is accurate and functional. frontend/src/views/admin/UserSettings.vue [38] -emailCheckRegex: "邮箱正则校验 (例如 ^[^.]+{'@'}.+$ 禁止{'@'}前面有.)", +emailCheckRegex: "邮箱正则校验 (例如 ^[^.]+@.+$ 禁止@前面有.)", Suggestion importance[1-10]: 9 __ Why: This suggestion fixes the same regex syntax issue in the Chinese translation, ensuring consistency and correctness across languages. It is highly relevant and important for maintaining functionality and clarity.	High
General	Optimize conditional rendering for performance Consider using v-if instead of v-show for the input visibility, as v-if will completely remove the element from the DOM when not needed, improving performance and avoiding unnecessary rendering. frontend/src/views/admin/UserSettings.vue [140] -v-show="userSettings.enableEmailCheckRegex" +v-if="userSettings.enableEmailCheckRegex" Suggestion importance[1-10]: 7 __ Why: The suggestion to use v-if instead of v-show improves performance by removing unnecessary DOM elements when not needed. While beneficial, the performance gain may be marginal in this specific context, so the impact is moderate.	Medium