agilelabs-fx-docs main framework-standards/checks/frontend-project.md

前端项目检查

本页用于检查 Web 前端、管理后台和 ClientApp 前端入口是否遵循默认技术栈、主题模式与项目级依赖源约定。

检查目标

  • 判断新前端项目是否建立在统一默认样式栈和图标库之上。
  • 判断主题模式是否真正做到 light / dark 双模式可用,而不是停留在口头约定。
  • 判断页面和组件是否建立在共享设计令牌与统一设计基线上,而不是散落大量页面级硬编码视觉规则。
  • 判断项目级包源是否明确可复现,而不是依赖个人机器环境。

必查项

  • 新前端项目默认样式层是否使用 tailwindcss v4
  • 新前端项目默认图标库是否使用 Font Awesome Free v6
  • 设计系统是否通过共享设计令牌或主题变量统一颜色、字号、间距、圆角、阴影和状态色语义。
  • 页面与组件是否优先复用统一的排版、间距、按钮、表单、卡片和状态表达方式。
  • 图标是否通过统一导入约定或封装层接入,而不是页面随意各自引入。
  • 项目是否同时提供 lightdark 两种主题模式。
  • 双主题是否同时覆盖共享设计令牌,而不是仅能切换 class 但视觉基线仍不一致。
  • 首屏是否默认跟随 prefers-color-scheme,并提供手动切换入口。
  • 用户手动切换后的主题偏好是否会被持久化。
  • 前端项目级包源是否显式配置为 https://npm.feinian.net
  • 与该项目配套的后端包源文档或配置是否显式指向 https://nuget.feinian.net,或在工具配置中明确使用其 v3 源入口。
  • 偏离默认技术栈的存量项目是否写清楚偏差范围和兼容期。

判定标准

  • 新项目同时满足默认技术栈、双主题和项目级包源要求,判定为合规。
  • 若共享设计令牌、统一组件基线或图标入口缺失,即使样式工具栈一致,也不能判定为完全合规。
  • 存量项目仍使用旧方案,但已明确标注兼容边界且未继续向新模块扩散,判定为已知偏差。
  • 若主题只实现一套视觉模式,或切换入口、持久化策略缺失,判定为不合规。
  • 若双主题仅切换根节点状态,但颜色、字号、间距或状态表达仍由页面各自硬编码,判定为设计基线不完整。
  • 若包源只存在于个人机器全局配置而未在项目配置或文档中体现,判定为前置条件不完整。
  • 若新页面继续混用多套样式体系或图标库作为默认方案,判定为不合规。

常见不合规信号

  • 新页面同时依赖 tailwindcss 之外的另一套默认样式体系,且没有清晰边界。
  • 同一前端项目里长期混用 Font Awesome、另一套图标库和本地 SVG 散装导入,页面层没有统一约束。
  • 颜色、字号、间距、圆角和阴影主要靠页面内散落的硬编码值维持,没有共享设计令牌或主题变量承接。
  • 按钮、表单、卡片、提示状态等基础视觉元素在不同页面各自定义,缺少稳定复用基线。
  • 提供了主题切换按钮,但刷新后主题偏好丢失,或首屏总是闪回默认浅色。
  • 前端安装依赖必须先手工改开发者本机 registry,仓库里没有任何项目级说明或配置。
  • 文档声称使用统一包源,但脚手架、README 或命令示例没有体现。

规则依据

示例项目对照