safety-eval-service-frontend/.cursor/skills/specs/02-应用配置与开发环境/02-路径别名与资源管理/SKILL.md

name	description
jjb-path-alias-resources	定义 JJB 项目路径别名与资源管理规范。在配置导入路径、使用 ~ 别名或管理图片/音频/视频/字体等静态资源时使用。统一使用 ~ 作为 src 目录别名。

应用配置与开发环境

路径别名与资源管理

文件别名与路径规范

• 路径别名：统一使用 ~ 作为 src 目录的别名

  • 示例：import { NS_GLOBAL } from '~/enumerate/namespace';

  • 说明：~ 指向 src 目录，所有导入路径应使用此别名以保持一致性

图片和文件资源

• 导入方式：使用 ESM 方式导入图片和文件资源

• 资源导入示例：

  // 图片
  import logo from '~/assets/image/logo.png';
  
  // 音频
  import audio from '~/assets/media/audio.mp3';
  
  // 视频
  import video from '~/assets/media/video.mp4';
  
  // 字体 ttf
  import font1 from '~/assets/file/font.ttf';
  
  // 字体 woff
  import font2 from '~/assets/file/font.woff';
  
  // 字体 eot
  import font3 from '~/assets/file/font.eot';
  

• 使用导入的资源：

  // 使用图片
  function App1() {
    return <img src={logo} alt="Logo" />;
  }
  
  // 使用视频
  function App2() {
    return <video src={video} controls />;
  }
  

• 资源类型支持：

  • 图片资源：支持 .png、.jpg、.jpeg、.gif、.svg、.webp 等常见图片格式

  • 媒体资源：支持 .mp3、.mp4、.wav、.ogg 等音频和视频格式

  • 字体资源：支持 .ttf、.woff、.woff2、.eot 等字体文件格式

  • 其他文件：支持其他静态资源文件，如 .pdf、.txt 等

• 路径规范：

  • 所有资源文件应放在 src/assets/ 目录下，按类型分类存放

  • 推荐目录结构：

    src/
    └── assets/
        ├── images/      # 图片资源
        ├── media/      # 音频、视频资源
        └── fonts/       # 字体及其他文件资源
    

  • 导入时统一使用路径别名 ~ 指向 src 目录

• 注意事项：

  • 资源文件导入后，构建工具会自动处理文件路径和文件名（包含 hash），确保资源正确加载

  • 导入的资源变量可以直接在 JSX 中使用，无需额外处理

  • 建议为图片添加 alt 属性，提升可访问性

  • 视频和音频资源建议添加相应的控制属性（如 controls、autoplay 等）