@gta/assets

公共静态资源库（Greentourasia 内部使用） 提供图标、样式、图片、JSON 数据等静态资源，供各前端项目按需引用。

📁 目录结构

gta-assets/
├── src/
│   ├── icons/                      # SVG 图标文件（按文件名引用）
│   ├── images/                     # 图片资源（logo / favicon 等）
│   ├── json/                       # 公共数据（如 e164 国家区号）
│   └── style/
│       ├── index.css               # 全量样式入口（仅在需要时引入）
│       ├── base/                   # 基础样式层
│       ├── pages/                  # 页面级样式
│       └── utils/                  # 原子化组件样式模块
│           ├── btn.css             # 按钮
│           ├── hover.css           # 悬浮遮罩
│           ├── icon.css            # 图标
│           └── label.css           # 标签
├── docs/                           # 各模块使用规范文档
│   ├── GTA_BUTTON_GUIDE.md
│   ├── GTA_HOVER_MASK_GUIDE.md
│   ├── GTA_ICON_GUIDE.md
│   └── GTA_LABEL_GUIDE.md
├── package.json
└── README.md

⚙️ 基本导入方式

全局样式（按需引入）

import '@greentourasia/assets/style.css';

📚 模块文档索引

| 模块 | 说明 | 文档链接 | |------|------|-----------| | Icon 图标 | 图标类名命名规则、尺寸与颜色控制 | GTA_ICON_GUIDE.md | | Button 按钮 | 按钮尺寸、变体与语义规范 | GTA_BUTTON_GUIDE.md | | Hover Mask 悬浮遮罩 | 图片/容器悬浮高亮规范 | GTA_HOVER_MASK_GUIDE.md | | Label 标签 | 表单标签与可访问性建议 | GTA_LABEL_GUIDE.md |

🧩 设计原则

• 按需引用（无聚合入口）
• 模块化导出（子路径粒度控制）
• 统一命名规范（gta- 前缀）
• 支持主题变量与自定义扩展

✅ 使用规范

1. 按需导入：示例代码中必须使用模块化导入，而非顶层聚合入口。

   import '@greentourasia/assets/style/btn.css';

2. 全局样式引用限制：仅在确需全局主题时可导入 style.css，默认应按模块引入。
3. 图标使用约定：
   • 默认以 URL 引用 SVG 图标。
   • 若项目需以 React 组件方式使用，假定业务侧已配置 SVGR。
4. CSS 命名约定：
   • 所有类名以 gta- 前缀开头（如 .gta-btn-primary）。
   • 避免与业务层样式命名冲突。
5. 文档生成建议：
   • 自动生成文档时，应链接到 docs/ 目录下的详细指南，而非内联粘贴大段样式。

⚠️ 质量门禁（Quality Gates）

以下情况应视为违反规范：

• 出现 import { e164 } from '@greentourasia/assets' 这类聚合导入。
• 一次性导入所有图标，造成打包体积膨胀。
• 在 index.css 中使用 @import 引入其它模块（隐式全量引入）。

推荐实践：

• 在示例中展示 CSS 变量覆盖，而非硬编码颜色或尺寸。
• 为关键组件提供 可访问性（ARIA）示例。
• 在 README 中仅索引到指南文档，不重复内容。

🧱 维护者须知

• 新增样式模块时需同步更新 package.json 中的 exports。
• 新增公共 JSON 数据时，可定义短路径别名（如 ./e164）。
• docs/ 与实现必须同步维护，README 仅作索引。

🚀 发布与版本管理

发布前检查

git status
npm whoami --registry=https://npm.pkg.github.com

发布流程

# 1) 依赖&构建&测试
npm ci
npm run build

# 2) 打包清单自检（不生成文件，仅列出将被包含的内容）
npm pack --dry-run

# 3) 试发布（不上传），验证元数据/脚本/访问级别
npm publish --dry-run --registry=https://npm.pkg.github.com

# 4) 确认版本号，再更新
npm version patch

# 5) 正式发布
npm publish --registry=https://npm.pkg.github.com

© Greentourasia Frontend Engineering Team 内部静态资源包 · 面向所有前端项目的统一规范基石