Hydro项目中插件前端页面开发指南

插件前端页面开发常见问题解析

在Hydro项目中进行插件开发时，前端页面的实现方式与常规开发有所不同。许多开发者会遇到页面内容未生效的情况，这通常是由于对Hydro特有的前端架构理解不足导致的。

正确的目录结构与文件命名

Hydro项目采用特定的前端架构设计，插件中的前端页面应当放置在frontend/目录下，而非常见的pages/目录。这种设计选择是为了保持项目结构的一致性，并便于系统自动识别和加载插件资源。

对于文件命名，Hydro推荐使用.page.ts作为页面组件的后缀。这种命名方式不仅符合项目规范，还能获得更好的类型推导支持，提高开发效率。

引用UI组件库的正确方式

在开发插件页面时，经常需要引用Hydro提供的UI组件。需要注意的是：

1. 不应该直接引用vj/路径，这是内部实现细节
2. 正确的做法是通过@hydrooj/ui-default包来引用组件
3. 所有UI组件都应从主入口导入，如：import { ComponentName } from '@hydrooj/ui-default'

开发建议

1. 遵循Hydro的项目结构规范，将前端代码放在frontend/目录
2. 使用.page.ts后缀命名页面组件文件
3. 通过官方提供的UI库入口引用组件
4. 注意检查构建配置，确保插件资源被正确打包和加载

通过遵循这些规范，开发者可以避免常见的页面加载问题，提高插件开发效率。Hydro的这种设计虽然初期需要适应，但长期来看能保持项目结构的清晰和一致性。