63 lines
4.6 KiB
XML
63 lines
4.6 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
||
<!--
|
||
FIGMA_<US-id>_v1.0/SCR-xx.desktop.svg — khung màn hình để KÉO THẢ VÀO FIGMA (Figma nhập SVG thành layer vector + text sửa được).
|
||
QUY TẮC:
|
||
· Một file cho mỗi SCR × khung nhìn: SCR-xx.desktop.svg (1440×900) · SCR-xx.tablet.svg (834×1112) · SCR-xx.mobile.svg (390×844). Trạng thái ≠ default ⇒ thêm hậu tố: SCR-xx.mobile.empty-none.svg.
|
||
· Figma KHÔNG hiểu biến CSS ⇒ dùng mã màu NGUYÊN VĂN từ tokens.json và ghi tên token trong data-token để design-check.mjs đối chiếu (mã màu không có trong tokens.json = lỗi).
|
||
· Cấu trúc layer = bảng vùng WF §3.x.1: <g id="Zn" data-name="…"> chứa <g id="Cnn"> cho mỗi thành phần. Tên id chính là tên layer trong Figma.
|
||
· Font: font-family lấy từ font.family.base; Figma sẽ thay bằng font gần nhất nếu máy không có — ghi rõ ở README-import.md.
|
||
· Text NGUYÊN VĂN theo SRS §4.2. Không vẽ hành vi; hành vi ở SRS.
|
||
-->
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="900" viewBox="0 0 1440 900" font-family="Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" font-size="14" data-scr="SCR-xx" data-view="desktop" data-state="default" data-source="HIFI_US-xxx_v1.0.html#SCR-xx">
|
||
<title>SCR-xx · [Tên màn hình] · desktop · default</title>
|
||
<!-- Nền trang -->
|
||
<rect id="canvas" width="1440" height="900" fill="#F6F7F9" data-token="color.bg.canvas"/>
|
||
|
||
<g id="Z0" data-name="Header toàn site">
|
||
<rect width="1440" height="56" fill="#FFFFFF" data-token="color.bg.surface"/>
|
||
<line x1="0" y1="56.5" x2="1440" y2="56.5" stroke="#D5DAE1" data-token="color.border.default"/>
|
||
<text x="24" y="34" font-weight="600" fill="#1B1F24" data-token="color.text.primary">Tên hệ thống</text>
|
||
</g>
|
||
|
||
<g id="Z1" data-name="Header màn hình" transform="translate(120 80)">
|
||
<g id="C01"><text x="0" y="28" font-size="24" font-weight="600" fill="#1B1F24" data-token="color.text.primary" data-key="scr01.title">Danh sách cửa hàng</text></g>
|
||
<g id="C02" data-name="Nút chính">
|
||
<rect x="1096" y="0" width="104" height="36" rx="4" fill="#2456A6" data-token="color.brand.primary"/>
|
||
<text x="1148" y="23" text-anchor="middle" font-weight="600" fill="#FFFFFF" data-token="color.text.inverse" data-key="btn.create">Tạo mới</text>
|
||
</g>
|
||
</g>
|
||
|
||
<g id="Z2" data-name="Thanh lọc" transform="translate(120 140)">
|
||
<g id="C03" data-name="Ô nhập có icon tìm">
|
||
<rect width="320" height="36" rx="4" fill="#FFFFFF" stroke="#767F8C" data-token="color.border.strong"/>
|
||
<text x="40" y="23" fill="#5B6472" data-token="color.text.secondary" data-key="scr01.search.ph">Nhập mã hoặc tên…</text>
|
||
</g>
|
||
<g id="C04" data-name="Chọn 1" transform="translate(328 0)">
|
||
<rect width="200" height="36" rx="4" fill="#FFFFFF" stroke="#767F8C" data-token="color.border.strong"/>
|
||
<text x="12" y="23" fill="#1B1F24" data-token="color.text.primary" data-key="scr01.filter.status">Trạng thái: Tất cả</text>
|
||
</g>
|
||
</g>
|
||
|
||
<g id="Z3" data-name="Dữ liệu" transform="translate(120 200)">
|
||
<g id="C05" data-name="Bảng">
|
||
<rect width="1200" height="180" rx="8" fill="#FFFFFF" stroke="#D5DAE1" data-token="color.border.default"/>
|
||
<rect x="1" y="1" width="1198" height="40" rx="8" fill="#EEF1F5" data-token="color.bg.subtle"/>
|
||
<text x="16" y="26" font-size="12" font-weight="600" fill="#5B6472" data-token="color.text.secondary">MÃ</text>
|
||
<text x="216" y="26" font-size="12" font-weight="600" fill="#5B6472">TÊN</text>
|
||
<text x="616" y="26" font-size="12" font-weight="600" fill="#5B6472">TRẠNG THÁI</text>
|
||
<text x="816" y="26" font-size="12" font-weight="600" fill="#5B6472">NGÀY TẠO</text>
|
||
<line x1="0" y1="88" x2="1200" y2="88" stroke="#D5DAE1"/>
|
||
<text x="16" y="70" fill="#1B1F24">STR-001</text><text x="216" y="70" fill="#1B1F24">Cửa hàng A</text>
|
||
<rect x="616" y="54" width="52" height="22" rx="11" fill="#EEF1F5" data-token="color.bg.subtle"/><text x="642" y="69" text-anchor="middle" font-size="12" font-weight="600" fill="#1B1F24">Nháp</text>
|
||
<text x="816" y="70" fill="#1B1F24">30/08/2026</text>
|
||
<text x="1120" y="70" fill="#2456A6" text-decoration="underline" data-token="color.brand.primary" data-key="btn.detail">Chi tiết</text>
|
||
</g>
|
||
</g>
|
||
|
||
<g id="Z4" data-name="Phân trang" transform="translate(120 400)">
|
||
<g id="C06" data-name="Phân trang">
|
||
<text x="1140" y="22" text-anchor="end" font-size="12" fill="#5B6472" data-token="color.text.secondary">1 / 7</text>
|
||
</g>
|
||
</g>
|
||
</svg>
|
