[UI] Feature: Change account name and ID#2871
Conversation
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces significant UI enhancements to the user profile management system. It enables users to update their account name, ID, and avatar through an intuitive interface. The changes include displaying the user ID on the main profile page and providing a comprehensive modal flow for editing personal information, complete with warnings for ID changes and an integrated avatar cropping tool. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| {activeModal === 'id-input' && ( | ||
| <div className="bg-white w-full max-w-[560px] rounded-[12px] shadow-2xl overflow-hidden border border-[#eaeff3]"> | ||
| <ModalHeader title="修改账号 ID" onClose={() => setActiveModal('profile-edit')} /> | ||
| <div className="px-6 pt-6 pb-8 space-y-3"> | ||
| <input | ||
| type="text" | ||
| defaultValue={editState.id} | ||
| id="new-id-input" | ||
| className="w-full h-8 bg-[#f6f8fa] border border-[#eaeff3] rounded-[12px] px-3 text-[14px] focus:outline-none focus:border-[#0bc0cf] transition-colors" | ||
| /> | ||
| <p className="text-[13px] text-[#6e7781] px-1">项目 ID 只能包含数字</p> | ||
| </div> | ||
| <div className="px-6 pt-5 pb-6 flex justify-end gap-3 border-t border-[#eaeff3]"> | ||
| <button | ||
| onClick={() => setActiveModal('profile-edit')} | ||
| className="bg-[#eaeff3] text-[#57606a] px-6 py-1.5 rounded-[12px] font-medium text-[14px] hover:bg-[#e1e7ec] transition-colors" | ||
| >取消</button> | ||
| <button | ||
| onClick={() => handleIdConfirm(document.getElementById('new-id-input').value)} | ||
| className="bg-[#0bc0cf] text-white px-6 py-1.5 rounded-[12px] font-medium text-[14px] shadow-[0_2px_0_#0B8893] active:translate-y-[2px] active:shadow-none transition-all" | ||
| >确认</button> | ||
| </div> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
在 React 中使用 document.getElementById 来获取表单值是一种反模式，因为它脱离了 React 的声明式特性，并且可能导致 bug。更好的方式是使用受控组件和 state。
我建议为临时 ID 引入一个新的 state，并将输入框改为受控组件。这将使您的代码更健壮，并符合 React 的最佳实践。
-
在
App组件中添加一个新的 state：const [tempId, setTempId] = useState('');
-
当从“ID 警告”弹窗打开此弹窗时，用当前 ID 初始化
tempId。您需要更新该弹窗中按钮的onClick(在 304 行附近):onClick={() => { setTempId(editState.id); setActiveModal('id-input'); }}
-
然后，您可以用建议中的代码替换此“ID 输入”弹窗的实现，它使用了新的
tempIdstate。
{activeModal === 'id-input' && (
<div className="bg-white w-full max-w-[560px] rounded-[12px] shadow-2xl overflow-hidden border border-[#eaeff3]">
<ModalHeader title="修改账号 ID" onClose={() => setActiveModal('profile-edit')} />
<div className="px-6 pt-6 pb-8 space-y-3">
<input
type="text"
value={tempId}
onChange={(e) => setTempId(e.target.value)}
className="w-full h-8 bg-[#f6f8fa] border border-[#eaeff3] rounded-[12px] px-3 text-[14px] focus:outline-none focus:border-[#0bc0cf] transition-colors"
/>
<p className="text-[13px] text-[#6e7781] px-1">项目 ID 只能包含数字</p>
</div>
<div className="px-6 pt-5 pb-6 flex justify-end gap-3 border-t border-[#eaeff3]">
<button
onClick={() => setActiveModal('profile-edit')}
className="bg-[#eaeff3] text-[#57606a] px-6 py-1.5 rounded-[12px] font-medium text-[14px] hover:bg-[#e1e7ec] transition-colors"
>取消</button>
<button
onClick={() => handleIdConfirm(tempId)}
className="bg-[#0bc0cf] text-white px-6 py-1.5 rounded-[12px] font-medium text-[14px] shadow-[0_2px_0_#0B8893] active:translate-y-[2px] active:shadow-none transition-all"
>确认</button>
</div>
</div>
)}
|
update #2889 |
|
update #2840 |
2 participants
Background
-The builder now supports modifying account name, ID, and avatar.
Modifications
User ID is now displayed on the profile page.
The personal information editing pop-up now supports modifying the account name, ID, and avatar.
A new ID modification reminder pop-up has been added.
-A new avatar upload pop-up has been added.
Scope of Impact
Does it affect the design system?