Bộ component `C*`

@tasco/ui là lớp bọc Ant Design Vue của framework: 17 component thương hiệu có style riêng bám design token, cộng danh sách primitive antdv được re-export có kiểm soát.

Không import trực tiếp ant-design-vue — ESLint chặn. Mọi thứ đi qua @tasco/ui.

Các component trên là bản chạy thật của @tasco/ui trong trang tài liệu — cùng theme, mật độ và locale với app sản phẩm.

Hai cách dùng

Nhóm	Cách dùng
17 component thương hiệu (`CTable`, `CButton`, `CForm`…)	Đăng ký toàn cục qua layer — dùng thẳng trong template, không import
Primitive antdv re-export (`CSelect`, `CFormItem`, `CModal`…)	`import { CSelect } from '@tasco/ui'`

vue

<script setup lang="ts">
// Primitive phải import; component thương hiệu thì không.
import { CFormItem, CSelect } from '@tasco/ui'
</script>

<template>
  <CPageHeader title="Đơn hàng" />
  <CTable row-key="id" :columns="columns" :data-source="dataSource" />
</template>

Component thương hiệu

Component	Việc	Trang
`CButton`	Nút hành động, 7 biến thể	Xem
`CCard`	Khung nội dung có tiêu đề, thu gọn được	Xem
`CPageHeader`	Tiêu đề trang + breadcrumb + hành động	Xem
`CTable`	Bảng trang danh sách: toolbar, lọc, thiết lập cột	Xem
`CTag`	Nhãn trạng thái nhiều giá trị	Xem
`CStatus`	Chỉ báo hai trạng thái	Xem
`CEmpty`	Trạng thái rỗng	Xem
`CForm`	Form, mặc định layout dọc	Xem
`CFilterBar`	Thanh lọc ngang trên bảng	Xem
`CInputCurrency`	Ô nhập tiền	Xem
`CInputPercent`	Ô nhập phần trăm	Xem
`CStatistic`	Thẻ chỉ số KPI	Xem
`CAppLayout`	Khung shell: logo, header, sider, content	Xem
`CSideNav`	Menu sidebar	Xem
`CTopNav`	Menu module ngang	Xem
`CChat`	Khung chat AI	Xem
`CChatMessage`	Bong bóng tin nhắn	Xem

Mỗi trang gồm: khi nào dùng và khi nào không, ví dụ chạy thật, bảng API sinh từ source, token giao diện, ghi chú khả năng tiếp cận.

Đăng nhập, quyền và composable UI

Thành phần	Việc	Trang
`TascoLoginForm`	Form đăng nhập first-party (từ layer, auto-import)	Xem
`<Can>` và `v-can`	Ẩn hoặc khoá phần tử theo quyền	Xem
`useConfirm`	Hộp thoại xác nhận dạng promise	Xem
`useErrorHandler`	Quy tắc hiển thị lỗi tập trung	Xem

Primitive antdv re-export

Đặt bí danh C* để có một điểm import duy nhất và thoả ESLint. Hành vi giữ nguyên của antdv.

// Bố cục (giữ nguyên tên gốc, không có tiền tố C)
import { Row, Col, Space, Flex, Divider, Typography, Layout } from '@tasco/ui'
// Nhập liệu
import {
  CInput, CTextarea, CInputNumber, CInputSearch, CSelect, CSelectOption, CCheckbox,
  CCheckboxGroup, CRadio, CRadioGroup, CSwitch, CDatePicker, CRangePicker, CTimePicker,
  CFormItem, CUpload,
} from '@tasco/ui'
// Hiển thị dữ liệu
import {
  CDescriptions, CDescriptionsItem, CBadge, CAvatar, CTabs, CTabPane, CCollapse,
  CCollapsePanel, CTooltip, CPopover, CPagination, CSteps, CStep, CTree,
} from '@tasco/ui'
// Phản hồi
import { CModal, CDrawer, CPopconfirm, CResult, CSpin, CSkeleton, CAlert, CProgress } from '@tasco/ui'
// Điều hướng
import { CDropdown, CMenu, CMenuItem, CBreadcrumb, CBreadcrumbItem } from '@tasco/ui'
// Gọi theo kiểu lệnh
import { message, notification } from '@tasco/ui'
// Composable UI (phụ thuộc antd nên không auto-import)
import { useConfirm, useErrorHandler } from '@tasco/ui'

Sáu trang theo nhóm: nhập liệu, hiển thị dữ liệu, bố cục, phản hồi, điều hướng, gọi theo kiểu lệnh — xem tổng quan.

Khung app

Layout shell (logo, sidebar, header, footer) do layer dựng sẵn — dự án chỉ khai báo menu trong app.config.ts. Xem Khung giao diện.

Theme và style

Màu, mật độ, bo góc bám biến --tasco-* sinh từ @tasco/theme.
Layer nạp sẵn @tasco/theme/base.css và @tasco/ui/style.css; app không import thủ công.
Quy tắc viết CSS trong dự án: Viết CSS trong dự án.
Locale vi_VN của antdv được layer truyền qua <a-config-provider>. Tên tháng/thứ của DatePicker theo dayjs — dự án nạp dayjs/locale/vi nếu cần.

Bộ component C* ​

Hai cách dùng ​

Component thương hiệu ​

Đăng nhập, quyền và composable UI ​

Primitive antdv re-export ​

Khung app ​

Theme và style ​