Bố cục trang chuẩn

Mọi màn hình nằm trong cùng một khung app và bắt đầu bằng cùng một phần đầu trang. Thiết kế chỉ quyết định phần nội dung — khung do layer dựng sẵn, dự án không vẽ lại.

Khung app

┌────────────┬──────────────────────────────────────────────────────┐
│ Logo  Tên  │ Menu module (topNav)          Sáng/tối  🔔  Tài khoản │  header
├────────────┼──────────────────────────────────────────────────────┤
│            │ ┌──────────────────────────────────────────────────┐ │
│  Sidebar   │ │ Đầu trang: breadcrumb · tiêu đề · hành động       │ │
│  (nav)     │ └──────────────────────────────────────────────────┘ │
│            │ ┌──────────────────────────────────────────────────┐ │
│  248px     │ │ Khối nội dung                                     │ │  nền page,
│  thu gọn:  │ └──────────────────────────────────────────────────┘ │  lề 8px
│  64px      │ ┌──────────────────────────────────────────────────┐ │
│            │ │ Khối nội dung                                     │ │
│            │ └──────────────────────────────────────────────────┘ │
├────────────┴──────────────────────────────────────────────────────┤
│                         Chân trang (footerText)                   │
└───────────────────────────────────────────────────────────────────┘

Vùng	Quy ước	Cấu hình
Dải logo	Nền navy, rộng bằng sidebar	Tên app: tasco.appTitle
Sidebar	Rộng 248px; bấm nút cạnh logo thu gọn còn 64px chỉ hiện icon; nền gradient navy	Menu: tasco.nav
Header	Nền trắng; menu module bên trái, nút chế độ sáng/tối, thông báo, tài khoản bên phải	Menu: tasco.topNav
Nội dung	Nền page, lề 8px, cuộn dọc độc lập với khung	—
Chân trang	Nền trắng, chữ text-muted canh giữa	tasco.footerText

Cấu hình menu và tiêu đề: Khung giao diện. Trang không cần khung (đăng nhập, màn hình trình chiếu) đặt layout: false.

Cấu trúc một trang

<script setup lang="ts">
import { IconPencil } from '@tabler/icons-vue'
import { CDescriptions, CDescriptionsItem, message } from '@tasco/ui'

// Giải phẫu một trang: tiêu đề trang (breadcrumb, tiêu đề, mô tả, hành động) rồi tới các khối nội dung, cách nhau 8px
// trên nền trang — đúng khoảng cách khung app dùng quanh nội dung.
const breadcrumb = [{ title: 'Đơn hàng', to: '/orders' }, { title: 'DH-0001' }]

function onNavigate(to: string) {
  message.info(`Trang tự điều hướng tới ${to}`)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px; padding: 8px; background: var(--tasco-color-page)">
    <CPageHeader
      title="Đơn hàng DH-0001"
      sub-title="Tạo ngày 16/09/2026"
      :breadcrumb="breadcrumb"
      @navigate="onNavigate"
    >
      <template #extra>
        <CButton
          variant="danger"
          size="sm"
        >
          Huỷ đơn
        </CButton>
        <CButton
          variant="primary"
          size="sm"
        >
          <template #icon>
            <IconPencil :size="16" />
          </template>
          Sửa
        </CButton>
      </template>
    </CPageHeader>

    <CCard title="Thông tin chung">
      <CDescriptions
        :column="{ xs: 1, md: 2 }"
        size="small"
      >
        <CDescriptionsItem label="Khách hàng">
          Công ty An Bình
        </CDescriptionsItem>
        <CDescriptionsItem label="Giá trị">
          12.500.000 ₫
        </CDescriptionsItem>
        <CDescriptionsItem label="Trạng thái">
          <CTag
            color="warning"
            dot
          >
            Chờ duyệt
          </CTag>
        </CDescriptionsItem>
        <CDescriptionsItem label="Ngày giao dự kiến">
          20/09/2026
        </CDescriptionsItem>
      </CDescriptions>
    </CCard>

    <CCard
      title="Ghi chú nội bộ"
      type="outline"
    >
      Giao trong giờ hành chính, gọi trước 30 phút.
    </CCard>
  </div>
</template>

1. Đầu trang — CPageHeader: breadcrumb, tiêu đề, một dòng mô tả, nhóm hành động của cả trang ở bên phải.
2. Các khối nội dung — mỗi khối một việc, xếp dọc, cách nhau 8px. Khối có tiêu đề dùng CCard; danh sách dùng CTable (đã có sẵn khung card riêng).

Đầu trang

• Tiêu đề là tên đối tượng hoặc tên màn hình: "Đơn hàng", "Đơn hàng DH-0001", "Tạo đơn hàng". Không đặt câu mệnh lệnh hay mô tả chức năng vào tiêu đề.
• Breadcrumb đi theo cấu trúc nghiệp vụ, mục cuối là trang hiện tại và không bấm được. Trang cấp một không cần breadcrumb.
• Hành động của cả trang đặt ở #extra: hành động chính ở ngoài cùng bên phải; hành động phá huỷ đứng đầu nhóm. Hành động của riêng một khối thì đặt trong khối đó.

Khối nội dung

• Khối có tiêu đề ngắn là danh từ: "Thông tin chung", "Lịch sử xử lý".
• Không lồng card trong card, không bọc CTable trong CCard — thành hai lớp viền.
• Khối phụ, ít quan trọng thì cho thu gọn (CCard collapsible); khối chính luôn mở.

Bốn mẫu trang

Mẫu	Cấu trúc	Hướng dẫn
Danh sách	Đầu trang → CTable có toolbar (tìm, lọc, thêm mới), phân trang ở chân bảng	Trang danh sách
Form thêm/sửa	Đầu trang → các CCard theo nhóm trường → hàng nút cuối form: Huỷ bên trái, Lưu (primary) bên phải	Trang form
Chi tiết	Đầu trang có hành động trên bản ghi → khối thông tin (CDescriptions) → bảng con hoặc tab	Trang chi tiết
Tổng quan	Đầu trang có bộ lọc thời gian → hàng CStatistic → các khối biểu đồ, bảng rút gọn	Trang tổng quan

Lưới và màn hình hẹp

Chia cột bằng Row + Col của @tasco/ui (lưới 24 cột), khoảng cách cột :gutter="16". Luôn khai cách xếp ở màn hình nhỏ nhất trước.

Điểm ngắt	Từ	Cách xếp khuyến nghị
xs	0	Một cột (:xs="24")
sm	576px	Số liệu: 2 cột
md	768px	Form, thông tin chi tiết: 2 cột
lg	992px	Số liệu: 3–4 cột
xl	1200px	Form dài: 3 cột nếu các trường ngắn
xxl	1600px	Giữ như xl; không kéo dòng chữ quá dài

• Sidebar không tự thu gọn theo độ rộng màn hình — người dùng bấm nút cạnh logo; màn hình hẹp vẫn phải dùng được khi sidebar đang mở rộng.
• Bảng nhiều cột cuộn ngang (:scroll="{ x: 1200 }") thay vì ép chữ xuống dòng hay ẩn cột.
• Form một cột trên màn hình hẹp; nhãn đặt phía trên ô nhập.

Khoảng cách

Giữa	Khoảng
Khung app và nội dung	8px
Hai khối liên tiếp	8px
Các nút trong một nhóm	8px
Các ô form trên một hàng	16px (gutter)
Các ô form theo chiều dọc	16px (mặc định của form)

Giá trị theo đơn vị 8px — xem Chữ, khoảng cách & mật độ.

Không nên

• Thêm tiêu đề trang thứ hai bên trong nội dung.
• Đặt hành động chính ở giữa hoặc bên trái trang.
• Kéo form hay đoạn văn dài hết chiều ngang màn hình rộng — giới hạn cột để dòng chữ dễ đọc.
• Dựng khung riêng (sidebar, header) cho một màn hình.

Liên quan

• Khung giao diện — cấu hình menu, thu gọn sidebar, thay khung.
• Rỗng, đang tải, lỗi, không có quyền — vùng nội dung khi chưa có dữ liệu.
• CAppLayout — component dựng khung.