- # 前端页面设计规则
- ## 页面复杂度
- 不同复杂度的页面，代码行数差异极大，核心是避免 “单文件过度臃肿”（导致后期维护困难），以下是常见场景的参考范围：
- | 页面类型 | 核心特征 | 单文件代码行数（HTML/CSS/JS 合并） | 关键说明 |
- | ------------------------ | --------------------------------------- | ---------------------------------- | ---------------------------------------------------- |
- | 静态展示页（如官网） | 以内容呈现为主，交互少（仅按钮 / 链接） | 300-800 行 | 若包含多个模块（如头部、Banner、列表），建议拆分组件 |
- | 中等交互页（如表单页） | 含表单验证、弹窗、简单数据请求 | 500-1200 行 | 表单逻辑 / 验证规则可抽离为独立 JS 文件（如 utils） |
- | 复杂交互页（如数据看板） | 含图表渲染、实时数据更新、多状态切换 | 800-2000 行 | 必须拆分（图表组件、筛选组件、数据服务单独抽离） |
- | 单组件页面（如弹窗页） | 独立小页面（如登录弹窗、详情弹窗） | 200-500 行 | 通常作为 “子页面” 嵌入主页面，需控制体积 |
|
