Câu chữ

Câu chữ là một phần của giao diện: cùng một hành động mà mỗi màn hình gọi một tên thì người dùng phải đoán. Trang này chốt giọng văn, nhãn chuẩn và định dạng dữ liệu cho mọi app Tasco. Nhãn trong bảng dưới trùng với nhãn component của core đang dùng — màn hình mới giữ đúng các nhãn này.

Giọng văn

• Tiếng Việt có dấu, câu ngắn, chủ động. "Không lưu được đơn hàng." thay vì "Việc lưu đơn hàng đã không thành công."
• Gọi người dùng là "bạn" khi cần nói trực tiếp: "Bạn không có quyền truy cập trang này."
• Từ Việt thông dụng trước tiếng Anh: Lọc (không Filter), Xuất (không Export), Đặt lại (không Reset). Giữ từ đã quen và không có từ thay thế gọn: OTP, Email, Excel, PDF.
• Chỉ viết hoa chữ đầu: "Tạo đơn hàng", không "Tạo Đơn Hàng". Sidebar hiển thị chữ hoa là do CSS — nhãn trong cấu hình vẫn viết thường.
• Dấu thanh đặt thống nhất theo cách core đang dùng: Xoá, Huỷ, Tuỳ chọn, Hoà.
• Không chấm câu ở nhãn nút, tiêu đề, mục menu, nhãn ô nhập. Có chấm câu ở thông báo và mô tả là câu đầy đủ.

Nhãn nút

Động từ đứng đầu; thêm đối tượng khi trên màn hình có nhiều đối tượng: "Lưu", "Tạo đơn", "Xoá đơn hàng".

Hành động	Nhãn	Tránh
Tạo bản ghi (toolbar bảng)	Thêm mới	Add, Tạo mới Đơn Hàng
Tạo bản ghi (đầu trang)	Tạo + tên đối tượng, vd "Tạo đơn"	Thêm
Lưu form	Lưu	Save, Submit
Bỏ thao tác đang làm	Huỷ	Cancel, Thoát
Đóng cửa sổ chỉ để xem	Đóng	Huỷ
Xác nhận hộp thoại	Động từ của hành động, vd "Xoá đơn"; mặc định "Đồng ý"	OK, Có
Lọc	Lọc	Filter
Áp dụng bộ lọc trong drawer	Áp dụng	OK
Đưa bản nháp về ban đầu	Đặt lại	Reset, Làm lại
Bỏ mọi điều kiện lọc	Xoá tất cả	Clear
Lưu thiết lập bảng	Lưu lại
Tải dữ liệu mới	Tải lại	Refresh, Làm mới
Xuất dữ liệu	Xuất dữ liệu, Xuất Excel	Export
Nhập từ file	Nhập từ file	Import
Chạy lại sau lỗi	Thử lại
Về trang chủ	Về trang chủ	Home
Đăng nhập, đăng xuất	Đăng nhập, Đăng xuất	Login, Logout

Hộp thoại xác nhận

Chỉ hỏi lại với hành động không hoàn tác được hoặc tốn kém (xoá, huỷ đơn, gửi duyệt). Hành động đổi lại được thì làm luôn và báo kết quả.

Phần	Quy tắc	Ví dụ
Tiêu đề	Câu hỏi nêu hành động và đối tượng	Xoá đơn hàng DH-0001?
Nội dung	Hệ quả người dùng cần biết trước khi quyết định	Đơn sẽ bị xoá vĩnh viễn và không khôi phục được.
Nút xác nhận	Lặp lại động từ; kiểu danger nếu phá huỷ	Xoá đơn
Nút huỷ	Huỷ	Huỷ

const ok = await confirm({
  title: 'Xoá đơn hàng DH-0001?',
  content: 'Đơn sẽ bị xoá vĩnh viễn và không khôi phục được.',
  okText: 'Xoá đơn',
  danger: true,
})

Xem useConfirm.

Thông báo thành công

Thì hoàn thành, nêu đúng đối tượng, một câu: "Đã lưu đơn hàng.", "Đã xoá DH-0001.", "Đã gửi duyệt 3 đơn." Không viết "Thành công!" hay "Thao tác thành công" — người dùng không biết cái gì đã xong.

Thao tác thấy ngay kết quả trên màn hình (bảng đã có dòng mới) vẫn nên báo một câu ngắn, vì thay đổi có thể nằm ngoài vùng đang nhìn.

Thông báo lỗi

• Nói chuyện gì xảy ra và làm gì tiếp: "Không lưu được đơn hàng. Kiểm tra kết nối mạng rồi thử lại."
• Không đổ lỗi cho người dùng ("Bạn đã nhập sai") và không hiện mã kỹ thuật trần ("Error 500", undefined).
• Thông báo của backend hiện nguyên văn cho người dùng, nên route BFF và backend viết thông báo tiếng Việt dành cho người dùng cuối, không phải cho lập trình viên.
• Lỗi ô nhập là câu mệnh lệnh ngắn, nói cách sửa: "Nhập tên khách hàng", "Số điện thoại gồm 10 chữ số".
• Không có quyền không phải lỗi: "Bạn không có quyền xem công nợ của khách hàng."

Trạng thái rỗng

Một câu giải thích vì sao rỗng, kèm lời mời phù hợp — xem Rỗng, đang tải, lỗi, không có quyền.

Định dạng dữ liệu

<script setup lang="ts">
import { ref } from 'vue'
import { CDatePicker, CFormItem } from '@tasco/ui'

// Định dạng hiển thị chuẩn dựng bằng Intl có sẵn của trình duyệt, không cần thư viện. Ngày giờ ghép tay vì Intl
// vi-VN đặt giờ trước ngày ("14:05 16/09/2026").
const money = new Intl.NumberFormat('vi-VN', { style: 'currency', currency: 'VND' })
const number = new Intl.NumberFormat('vi-VN')
const percent = new Intl.NumberFormat('vi-VN', { style: 'percent', maximumFractionDigits: 1 })
const compact = new Intl.NumberFormat('vi-VN', { notation: 'compact', compactDisplay: 'long' })
const date = new Intl.DateTimeFormat('vi-VN', { day: '2-digit', month: '2-digit', year: 'numeric' })
const time = new Intl.DateTimeFormat('vi-VN', { hour: '2-digit', minute: '2-digit', hour12: false })

const sample = new Date(2026, 8, 16, 14, 5)
const rows = [
  { label: 'Tiền', value: money.format(12_500_000) },
  { label: 'Số', value: number.format(1234.5) },
  { label: 'Phần trăm', value: percent.format(0.125) },
  { label: 'Số lớn rút gọn', value: `${compact.format(1_250_000_000)} ₫` },
  { label: 'Ngày', value: date.format(sample) },
  { label: 'Ngày giờ', value: `${date.format(sample)} ${time.format(sample)}` },
]

const amount = ref<number | null>(12_500_000)
const deliveryDate = ref<string>('2026-09-20')
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 420px">
    <table style="margin: 0">
      <tbody>
        <tr
          v-for="row in rows"
          :key="row.label"
        >
          <td>{{ row.label }}</td>
          <td style="text-align: right; font-variant-numeric: tabular-nums">
            {{ row.value }}
          </td>
        </tr>
      </tbody>
    </table>

    <CForm layout="vertical">
      <CFormItem label="Giá trị đơn hàng (₫)">
        <CInputCurrency v-model:value="amount" />
      </CFormItem>
      <CFormItem label="Ngày giao">
        <CDatePicker
          v-model:value="deliveryDate"
          format="DD/MM/YYYY"
          value-format="YYYY-MM-DD"
          style="width: 100%"
        />
      </CFormItem>
    </CForm>
  </div>
</template>

Loại	Định dạng	Ví dụ
Ngày	DD/MM/YYYY	16/09/2026
Ngày giờ	DD/MM/YYYY HH:mm, 24 giờ	16/09/2026 14:05
Khoảng ngày	DD/MM/YYYY – DD/MM/YYYY; thiếu một đầu thì "Từ …", "Đến …"	01/09/2026 – 30/09/2026
Tiền	Dấu chấm ngăn nghìn, ký hiệu ₫ sau số	12.500.000 ₫
Số	Dấu chấm ngăn nghìn, dấu phẩy thập phân	1.234,5
Phần trăm	Dấu phẩy thập phân, % liền số	12,5%
Số lớn rút gọn	Viết đủ đơn vị	1,3 tỷ ₫
Mã chứng từ	Giữ nguyên như hệ thống nguồn	DH-0001
Tổng số dòng của bảng	Tổng số dòng N	Tổng số dòng 128

Cách tạo:

• Tiền, số, phần trăm: Intl.NumberFormat('vi-VN', …) có sẵn trong trình duyệt. Số rút gọn dùng compactDisplay: 'long' — bản ngắn ra "1,3 Tr", dễ đọc nhầm.
• Ngày: Intl.DateTimeFormat('vi-VN', { day: '2-digit', month: '2-digit', year: 'numeric' }). Ngày giờ ghép ngày rồi giờ, vì định dạng ngày giờ mặc định của vi-VN đặt giờ trước.
• Ô chọn ngày: CDatePicker format="DD/MM/YYYY" kèm value-format="YYYY-MM-DD" để giá trị gửi backend vẫn là chuẩn ISO — giống bộ lọc ngày của CTable.
• Ô nhập tiền: CInputCurrency tự định dạng 1.234.567,89 khi gõ, trả về số.
• Ô nhập phần trăm: CInputPercent nhận dấu phẩy hoặc dấu chấm khi gõ, hiển thị 12,5, model là chuỗi "12.5". Ô có sẵn dấu % nên nhãn không ghi thêm "(%)".
• Căn lề: cột tiền, số, phần trăm trong bảng canh phải; cột ngày canh trái.

Nhãn ô nhập và placeholder

• Nhãn là danh từ, không chấm câu: "Khách hàng", "Ngày giao".
• Placeholder chỉ để gợi ý định dạng hoặc ví dụ ("vd 0912 345 678"), không lặp lại nhãn và không thay cho nhãn — placeholder biến mất khi người dùng bắt đầu gõ.
• Trường bắt buộc đánh dấu bằng required của form (dấu *), không viết "(bắt buộc)" vào nhãn.

Liên quan

• Rỗng, đang tải, lỗi, không có quyền — câu chữ theo từng trạng thái.
• Hiển thị lỗi — thông báo lỗi hiển thị tự động thế nào.
• Khả năng tiếp cận — nhãn cho trình đọc màn hình.