Workspace Docs

Các style card

Chọn `style` ở cấp section. Mỗi section có thể có số cột riêng bằng trường `columns`.

Style	Khi nào dùng	Dữ liệu chính
`icon-vertical`	Ứng dụng, tools, tài liệu. Icon ở trên, chữ ở dưới.	`icon`, `iconBg`, `title`, `description`
`icon-horizontal`	Tiện ích hoặc link nhanh. Icon bên trái, chữ bên phải.	`icon`, `iconBg`, `title`, `description`
`thumbnail-card`	Kênh social, portfolio, nội dung cần ảnh đại diện.	`thumbnail`, `title`, `description`
`compact-list`	Danh sách link gọn, nhiều mục.	`icon`, `iconBg`, `title`
`folder-card`	Nhóm thư mục hoặc tài liệu.	`icon`, `iconBg`, `title`, `description`

Preview: icon-vertical

Kiểu này hợp với Apps, Tools và Tài liệu. Mỗi card dùng icon nền màu solid.

CRM

Quản lý khách hàng và dữ liệu.

Dashboard

Báo cáo và thống kê tổng quan.

{
  "id": "apps",
  "title": "Apps",
  "style": "icon-vertical",
  "columns": 4,
  "items": [
    {
      "id": "crm",
      "title": "CRM",
      "description": "Quản lý khách hàng và dữ liệu.",
      "icon": "assets/icons/default-app.svg",
      "iconBg": "#2f6df6",
      "url": "#",
      "order": 1
    }
  ]
}

Preview: thumbnail-card

Kiểu này hợp với Mạng xã hội. Section `social` hiện đang dùng ảnh tỉ lệ `5 / 4`.

{
  "id": "social",
  "title": "Mạng xã hội",
  "style": "thumbnail-card",
  "columns": 4,
  "items": [
    {
      "id": "fanpage-cong-ty",
      "title": "Fanpage Công ty",
      "description": "@congty",
      "thumbnail": "assets/images/social-placeholder.svg",
      "url": "https://facebook.com/",
      "external": true,
      "order": 1
    }
  ]
}

Preview: icon-horizontal

Kiểu này hợp với Tiện ích vì card thấp, đọc nhanh, không bị trống đáy nhiều.

Tính thuế TNCN

Hỗ trợ tính thuế.

Rút gọn link

Tạo link ngắn.

{
  "id": "utilities",
  "title": "Tiện ích",
  "style": "icon-horizontal",
  "columns": 4,
  "items": [
    {
      "id": "rut-gon-link",
      "title": "Rút gọn link",
      "description": "Tạo link ngắn.",
      "icon": "assets/icons/link.svg",
      "iconBg": "#2f6df6",
      "url": "#",
      "order": 1
    }
  ]
}

Cách thêm một section

Thêm object mới vào mảng `sections` trong `data/hub.json`. Nếu muốn hiện trên menu, thêm link vào `index.html`.

{
  "id": "reports",
  "title": "Báo cáo",
  "description": "Các báo cáo dùng thường xuyên",
  "style": "icon-vertical",
  "columns": 4,
  "order": 6,
  "visible": true,
  "items": []
}

Link menu tương ứng: <a href="#reports">Báo cáo</a>

Cách thêm một card con trong grid

Thêm object vào `items` của section. `order` quyết định thứ tự card; `columns` của section quyết định số cột.

{
  "id": "card-moi",
  "title": "Card mới",
  "description": "Mô tả ngắn.",
  "icon": "assets/icons/default-app.svg",
  "iconBg": "#0969da",
  "url": "#",
  "external": false,
  "keywords": ["tu khoa", "tim kiem"],
  "order": 1
}

Workflow build

Header, footer, SEO meta và một số danh sách được sinh ra lúc build để trang chạy mượt như HTML tĩnh hoàn chỉnh.

Muốn sửa	File cần sửa	Lệnh sau khi sửa
Menu / brand	`partials/header.html`	`node tools/build-layout.js`
Footer links	`partials/footer.html`	`node tools/build-layout.js`
Project / server / Jerry data	`data/projects.json`, `data/server.json`, `data/jerry.json`	`node tools/build-layout.js`
Hub card/section	`data/hub.json`	Chạy local server để Hub fetch JSON

Hướng dẫn trực quan Company Hub