Fixed: frontend could not correctly detect changes when the backend port was modified (#37)#38
Fixed: frontend could not correctly detect changes when the backend port was modified (#37)#38r404r wants to merge 13 commits intoAnionex:mainfrom
Conversation
# Conflicts: # assets/logo_aihubmix.png
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
# Conflicts: # .env.example # backend/config.py
The issue has been fixed! `vite.config.ts` can correctly read the `PORT` environment variable from the `.env` file. **Root cause**: Using `process.env.PORT` could not obtain variables from the `.env` file, because when the Vite config file runs, it does not automatically load `.env` into `process.env`. **Fixes made**: 1. Used Vite’s `loadEnv` function to manually load environment variables. 2. Added the `@types/node` dependency to support Node.js module types. 3. Added `"types": ["node"]` in `tsconfig.node.json`. Verification shows that `PORT=5080` has been correctly read, and the frontend proxy now correctly points to `http://localhost:5080`.
Summary of ChangesHello @r404r, 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 primarily resolves a critical issue where the frontend failed to correctly read the backend port from Highlights
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}
There was a problem hiding this comment.
Code Review
This pull request successfully addresses the issue where the frontend failed to detect backend port changes by correctly implementing loadEnv in the Vite configuration. The changes to vite.config.ts and tsconfig.node.json are appropriate and follow best practices for an ES module environment.
In addition to the bug fix, this PR introduces a new site status banner and a sponsorship modal. This is a nice enhancement for communicating the application's operational status to users.
I've identified a few areas for improvement, primarily related to the new status feature. There are potential crash scenarios on the frontend if the backend provides an unexpected status value. I've added comments with suggestions to add validation on both the backend and frontend to make the feature more robust. I also found some minor issues with hardcoded values and incorrect CSS classes in the new components. Please see the detailed comments for suggestions.
| 获取站点状态 | ||
| 可选值: sufficient (余额充足), insufficient (欠费), maintenance (维护) | ||
| """ | ||
| status = os.getenv('SITE_STATUS', 'sufficient') |
There was a problem hiding this comment.
The site_status endpoint reads the SITE_STATUS environment variable but doesn't validate its value. If an unexpected value (e.g., a typo like 'maintenence') is set in the environment, it will be passed to the frontend. This could cause the SiteStatusBanner component to crash, as it only expects 'sufficient', 'insufficient', or 'maintenance'. To make the API more robust, you should validate the status and default to a safe value if it's invalid.
| status = os.getenv('SITE_STATUS', 'sufficient') | |
| ALLOWED_STATUSES = {'sufficient', 'insufficient', 'maintenance'} | |
| status = os.getenv('SITE_STATUS', 'sufficient') | |
| if status not in ALLOWED_STATUSES: | |
| status = 'sufficient' |
| }, | ||
| }; | ||
|
|
||
| const config = statusConfig[status]; |
There was a problem hiding this comment.
The component will crash if it receives an unexpected status from the API (e.g., a typo or a new status not yet handled). The expression statusConfig[status] would be undefined, leading to a TypeError when trying to access properties like bgColor. To make the component more resilient, you should handle unknown statuses by providing a safe fallback, such as the 'sufficient' state configuration.
| const config = statusConfig[status]; | |
| const config = statusConfig[status] || statusConfig.sufficient; |
| const statusConfig = { | ||
| sufficient: { | ||
| icon: <CheckCircle className="w-5 h-5 flex-shrink-0" />, | ||
| bgColor: 'bg-green-50', | ||
| borderColor: 'border-green-200', | ||
| textColor: 'text-green-900', | ||
| iconColor: 'text-green-500', | ||
| title: '✅ 站点运行正常', | ||
| message: ( | ||
| <> | ||
| 本站点由作者完全自费支持运营，当前运行正常。 | ||
| <br /> | ||
| 如有疑问或合作意向，欢迎联系： | ||
| <a | ||
| href="mailto:1005128408@qq.com" | ||
| className="font-semibold underline hover:text-green-700 transition-colors ml-1" | ||
| > | ||
| 1005128408@qq.com | ||
| </a> | ||
| </> | ||
| ), | ||
| }, | ||
| insufficient: { | ||
| icon: <AlertCircle className="w-5 h-5 flex-shrink-0" />, | ||
| bgColor: 'bg-orange-50', | ||
| borderColor: 'border-orange-200', | ||
| textColor: 'text-orange-900', | ||
| iconColor: 'text-orange-500', | ||
| title: '⚠️ 站点余额不足，可能影响功能使用', | ||
| message: ( | ||
| <> | ||
| 本站点由作者完全自费支持运营，余额可能会间歇性见底，会尽快补充余额。 | ||
| <br /> | ||
| 也欢迎 | ||
| <button | ||
| onClick={() => setIsSponsorModalOpen(true)} | ||
| className="font-semibold underline hover:text-orange-700 transition-colors mx-1" | ||
| > | ||
| 打赏作者 | ||
| </button> | ||
| ，我会将其全部用于站点维护🚀 | ||
| <br /> | ||
| 如有疑问或合作意向，欢迎联系： | ||
| <a | ||
| href="mailto:1005128408@qq.com" | ||
| className="font-semibold underline hover:text-orange-700 transition-colors ml-1" | ||
| > | ||
| 1005128408@qq.com | ||
| </a> | ||
| </> | ||
| ), | ||
| }, | ||
| maintenance: { | ||
| icon: <Wrench className="w-5 h-5 flex-shrink-0" />, | ||
| bgColor: 'bg-blue-50', | ||
| borderColor: 'border-blue-200', | ||
| textColor: 'text-blue-900', | ||
| iconColor: 'text-blue-500', | ||
| title: '🔧 系统维护中', | ||
| message: ( | ||
| <> | ||
| 站点正在进行系统维护，部分功能可能暂时不可用。感谢您的理解与支持！ | ||
| <br /> | ||
| 如有疑问，请联系： | ||
| <a | ||
| href="mailto:1005128408@qq.com" | ||
| className="font-semibold underline hover:text-blue-700 transition-colors ml-1" | ||
| > | ||
| 1005128408@qq.com | ||
| </a> | ||
| </> | ||
| ), | ||
| }, | ||
| }; |
There was a problem hiding this comment.
The contact email address 1005128408@qq.com is hardcoded in three separate places within the statusConfig object. This makes it difficult to update and increases the risk of inconsistency. It would be better to define this email as a constant at the top of the file and reference it within the component. This improves maintainability.
For example:
const CONTACT_EMAIL = "1005128408@qq.com";
export const SiteStatusBanner: React.FC<SiteStatusBannerProps> = ({ className = '' }) => {
// ...
const statusConfig = {
sufficient: {
// ...
message: (
<>
{/* ... */}
<a
href={`mailto:${CONTACT_EMAIL}`}
className="..."
>
{CONTACT_EMAIL}
</a>
</>
),
},
// ...etc
};
// ...
};| <p className="text-sm md:text-base text-black-600 leading-relaxed"> | ||
| 项目目前完全由作者自费, <br /> | ||
| 如果这个项目对您有帮助，<br /> | ||
| 欢迎请开发者喝杯咖啡 ☕ | ||
| </p> |
There was a problem hiding this comment.
The Tailwind CSS class text-black-600 is likely incorrect. By default, Tailwind CSS does not provide shades for the color black (e.g., black-600). This style will probably not be applied. For consistency with other components in the app, you should use a shade of gray, such as text-gray-600.
| <p className="text-sm md:text-base text-black-600 leading-relaxed"> | |
| 项目目前完全由作者自费, <br /> | |
| 如果这个项目对您有帮助，<br /> | |
| 欢迎请开发者喝杯咖啡 ☕ | |
| </p> | |
| <p className="text-sm md:text-base text-gray-600 leading-relaxed"> | |
| 项目目前完全由作者自费, <br /> | |
| 如果这个项目对您有帮助，<br /> | |
| 欢迎请开发者喝杯咖啡 ☕ | |
| </p> |
| <p className="text-l text-black-500 pt-2"> | ||
| 扫码赞赏任意金额，感谢您的支持 ❤️ | ||
| </p> |
There was a problem hiding this comment.
There are two issues with the CSS classes on this line:
text-lis not a valid Tailwind CSS class for font size. The correct class for 'large' istext-lg.text-black-500is also likely incorrect, as Tailwind doesn't provide shades forblackby default. It should probably betext-gray-500to maintain consistency with the rest of the application's styling.
| <p className="text-l text-black-500 pt-2"> | |
| 扫码赞赏任意金额，感谢您的支持 ❤️ | |
| </p> | |
| <p className="text-lg text-gray-500 pt-2"> | |
| 扫码赞赏任意金额，感谢您的支持 ❤️ | |
| </p> |
2 participants
Try to fixit.
Now
vite.config.tscan correctly read thePORTenvironment variable from the.envfile.Root cause: Using
process.env.PORTcould not obtain variables from the.envfile, because when the Vite config file runs, it does not automatically load.envintoprocess.env.Fixes made:
loadEnvfunction to manually load environment variables.@types/nodedependency to support Node.js module types."types": ["node"]intsconfig.node.json.Verification shows that
PORT=5080has been correctly read, and the frontend proxy now correctly points tohttp://localhost:5080.