贴吧移动端设计规范

贴吧 App 移动端设计系统，包含组件规范、图标库、页面框架。

安装

npm install @your-org/tieba-design-system

使用

1. 图标

<!-- 引入 sprite -->
<link rel="preload" href="./node_modules/@your-org/tieba-design-system/icons.svg" as="image" type="image/svg+xml">

<!-- 使用图标 -->
<svg class="icon">
  <use href="@your-org/tieba-design-system/icons.svg#icon-home"/>
</svg>

2. 组件预览

# 浏览器打开预览页
open ./node_modules/@your-org/tieba-design-system/dist/component-gallery.html

3. 规范文档

# 查看规范文档
cat ./node_modules/@your-org/tieba-design-system/design.md

开发

# 构建
npm run build

# 发布（自动执行 build）
npm publish

目录结构

├── icons.svg              # 图标 Sprite
├── design.md              # 规范文档
├── index.js               # Node.js 入口
├── dist/
│   ├── component-gallery.html  # 组件预览页
│   └── assets/                 # 静态资源
└── src/
    └── assets/icons/           # 源 SVG 图标

可用图标

| 图标名 | 用途 | |---|---| | icon-home | 首页 Tab | | icon-tab-ba | 吧 Tab | | icon-tab-store | 商店 Tab | | icon-tab-msg | 消息 Tab | | icon-tab-my | 我的 Tab | | icon-arrow-back | 返回 | | icon-search | 搜索 | | icon-share | 分享 | | icon-more | 更多 | | icon-comment | 评论 | | icon-like | 点赞 | | icon-collect | 收藏 | | icon-repost | 转发 |

发布到私有仓库

修改 package.json:

{
  "publishConfig": {
    "registry": "https://npm.your-company.com/"
  }
}

License

MIT