@gemboss/ui 0.2.1 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +89 -6
- package/catalog/index.html +338 -10
- package/gemboss-ui.css +794 -3
- package/package.json +5 -1
- package/src/assistant/dock.ts +83 -5
- package/src/assistant/host.tsx +113 -17
- package/src/assistant/index.ts +1 -1
- package/src/assistant/provider.tsx +75 -8
- package/src/assistant.css +90 -1
- package/src/chat-composer.css +110 -0
- package/src/chat.css +427 -0
- package/src/kit-plain.css +161 -0
- package/src/kit-plain.js +179 -0
package/catalog/index.html
CHANGED
|
@@ -26,8 +26,8 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
26
26
|
|
|
27
27
|
@media (max-width:760px){.cat{grid-template-columns:1fr;padding:16px}.cat-nav{position:static;flex-direction:row;flex-wrap:wrap}}
|
|
28
28
|
</style></head><body>
|
|
29
|
-
<div class="cat"><nav class="cat-nav" aria-label="Mục"><a href="#tokens">Token</a><a href="#buttons">Nút</a><a href="#fields">Ô nhập</a><a href="#choice">Tab, nhóm nút, thẻ</a><a href="#surfaces">Thẻ, số liệu, bảng, trạng thái trống</a><a href="#resizer">Thanh kéo giữa hai cột</a><a href="#modal">Hộp thoại</a><a href="#shell">Khung app</a><a href="#auth">Đăng nhập</a><a href="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a></nav>
|
|
30
|
-
<main><header class="cat-head"><h1>@gemboss/ui 0.
|
|
29
|
+
<div class="cat"><nav class="cat-nav" aria-label="Mục"><a href="#tokens">Token</a><a href="#buttons">Nút</a><a href="#fields">Ô nhập</a><a href="#choice">Tab, nhóm nút, thẻ</a><a href="#surfaces">Thẻ, số liệu, bảng, trạng thái trống</a><a href="#report">Báo cáo</a><a href="#resizer">Thanh kéo giữa hai cột</a><a href="#modal">Hộp thoại, toast, menu (JS thuần)</a><a href="#shell">Khung app</a><a href="#auth">Đăng nhập</a><a href="#chat">Thân chat</a><a href="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a></nav>
|
|
30
|
+
<main><header class="cat-head"><h1>@gemboss/ui 0.4.0</h1><p>Ngôn ngữ thiết kế chung của các công cụ GemBoss. Markup dưới mỗi ví dụ là đúng thứ package render ra; bề mặt không dùng React (HTML tĩnh, Python) chép markup này và nạp <code>gemboss-ui.css</code>. Dựng từ gemboss <code>e86d83befc81</code>.</p></header>
|
|
31
31
|
<section id="tokens"><h2>Token</h2><p>Đổi giao diện một bề mặt bằng cách đặt lại token, không viết đè class. Tên và giá trị đọc thẳng từ gemboss-ui.css.</p><div class="cat-swatches"><div class="cat-swatch"><i style="background:var(--gemboss-primary)"></i><code>--gemboss-primary</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-dark)"></i><code>--gemboss-primary-dark</code><span>#000000</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-soft)"></i><code>--gemboss-primary-soft</code><span>#f2f3f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent)"></i><code>--gemboss-accent</code><span>#5661f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-strong)"></i><code>--gemboss-accent-strong</code><span>#3a44de</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-soft)"></i><code>--gemboss-accent-soft</code><span>#eef0fe</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-strong)"></i><code>--gemboss-text-strong</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text)"></i><code>--gemboss-text</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-muted)"></i><code>--gemboss-text-muted</code><span>#686b71</span></div><div class="cat-swatch"><i style="background:var(--gemboss-surface)"></i><code>--gemboss-surface</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-canvas)"></i><code>--gemboss-canvas</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-preview-canvas)"></i><code>--gemboss-preview-canvas</code><span>#eceef1</span></div><div class="cat-swatch"><i style="background:var(--gemboss-rail-bg)"></i><code>--gemboss-rail-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-panel-bg)"></i><code>--gemboss-panel-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider)"></i><code>--gemboss-divider</code><span>#e5e7ea</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider-soft)"></i><code>--gemboss-divider-soft</code><span>#edeff2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-hover)"></i><code>--gemboss-hover</code><span>#eceef2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-bg)"></i><code>--gemboss-active-bg</code><span>#f0f1f4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-fg)"></i><code>--gemboss-active-fg</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger)"></i><code>--gemboss-danger</code><span>#d72c0d</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-strong)"></i><code>--gemboss-danger-strong</code><span>#b42318</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-soft)"></i><code>--gemboss-danger-soft</code><span>#fff0e9</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-border)"></i><code>--gemboss-danger-border</code><span>#f5c9bc</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success)"></i><code>--gemboss-success</code><span>#007f5f</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-strong)"></i><code>--gemboss-success-strong</code><span>#0a6a4c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-soft)"></i><code>--gemboss-success-soft</code><span>#e3f1df</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-border)"></i><code>--gemboss-success-border</code><span>#b7dfcd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning)"></i><code>--gemboss-warning</code><span>#9a6700</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-soft)"></i><code>--gemboss-warning-soft</code><span>#fff8e0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-border)"></i><code>--gemboss-warning-border</code><span>#f5d569</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-bg)"></i><code>--gemboss-dark-bg</code><span>#0a0a0c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-rail)"></i><code>--gemboss-dark-rail</code><span>#0e0e11</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface)"></i><code>--gemboss-dark-surface</code><span>#16161a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface-2)"></i><code>--gemboss-dark-surface-2</code><span>#1e1e24</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-divider)"></i><code>--gemboss-dark-divider</code><span>#2a2a31</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-text)"></i><code>--gemboss-dark-text</code><span>#ededf0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-muted)"></i><code>--gemboss-dark-muted</code><span>#9a9aa4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg)"></i><code>--gemboss-field-bg</code><span>#fdfdfd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg-hover)"></i><code>--gemboss-field-bg-hover</code><span>#fafafa</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-ink)"></i><code>--gemboss-field-ink</code><span>#303030</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-placeholder)"></i><code>--gemboss-field-placeholder</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line)"></i><code>--gemboss-field-line</code><span>#8a8a8a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-hover)"></i><code>--gemboss-field-line-hover</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-active)"></i><code>--gemboss-field-line-active</code><span>#1a1a1a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-ink)"></i><code>--gemboss-chip-ink</code><span>#303633</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line)"></i><code>--gemboss-chip-line</code><span>#cfd6ce</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line-hover)"></i><code>--gemboss-chip-line-hover</code><span>#aab4ad</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-bg-hover)"></i><code>--gemboss-chip-bg-hover</code><span>#f6f7f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-on-primary)"></i><code>--gemboss-on-primary</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-app-bg)"></i><code>--gemboss-app-bg</code><span>#ffffff</span></div></div><table class="ui-table cat-scale"><thead><tr><th>Token</th><th>Giá trị</th><th>Mẫu</th></tr></thead><tbody><tr><td><code>--gemboss-fs-micro</code></td><td>11px</td><td style="font-size:var(--gemboss-fs-micro)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-caption</code></td><td>12px</td><td style="font-size:var(--gemboss-fs-caption)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body</code></td><td>14px</td><td style="font-size:var(--gemboss-fs-body)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body-lg</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-body-lg)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h3</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-h3)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h2</code></td><td>20px</td><td style="font-size:var(--gemboss-fs-h2)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h1</code></td><td>24px</td><td style="font-size:var(--gemboss-fs-h1)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-display</code></td><td>30px</td><td style="font-size:var(--gemboss-fs-display)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-radius-xs</code></td><td>4px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xs)"></i></td></tr><tr><td><code>--gemboss-radius-sm</code></td><td>6px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-sm)"></i></td></tr><tr><td><code>--gemboss-radius-md</code></td><td>8px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-md)"></i></td></tr><tr><td><code>--gemboss-radius-lg</code></td><td>12px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-lg)"></i></td></tr><tr><td><code>--gemboss-radius-xl</code></td><td>16px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xl)"></i></td></tr><tr><td><code>--gemboss-radius-2xl</code></td><td>20px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-2xl)"></i></td></tr><tr><td><code>--gemboss-radius-full</code></td><td>999px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-full)"></i></td></tr><tr><td><code>--gemboss-shadow-resting</code></td><td class="cat-small">0 1px 2px rgba(31, 30, 29, 0.04), 0 2px 6px rgba(31, 30, 29, 0.06)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-resting);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-raised</code></td><td class="cat-small">0 4px 16px rgba(31, 30, 29, 0.10)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-raised);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-overlay</code></td><td class="cat-small">0 16px 48px rgba(31, 30, 29, 0.18)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-overlay);border:0"></i></td></tr></tbody></table></section>
|
|
32
32
|
<section id="buttons"><h2>Nút</h2><p>Một lớp <code>ui-btn</code>, ba biến thể, một cỡ nhỏ. Dùng được trên <code><button></code> lẫn <code><a></code> (căn giữa sẵn).</p><figure class="cat-demo"><figcaption>Mặc định · chính · ghost · nhỏ · tắt</figcaption><div class="cat-live"><div class="cat-row"><button type="button" class="ui-btn">Lưu nháp</button><button type="button" class="ui-btn ui-btn--primary">Xuất bản</button><button type="button" class="ui-btn ui-btn--ghost">Huỷ</button><button type="button" class="ui-btn ui-btn--sm">Nhỏ</button><button type="button" class="ui-btn ui-btn--primary" disabled>Đang lưu…</button><a class="ui-btn" href="#buttons">Link dạng nút</a></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="cat-row">
|
|
33
33
|
<button type="button" class="ui-btn">Lưu nháp</button>
|
|
@@ -185,7 +185,24 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
185
185
|
<span aria-current="page">2 / 9</span>
|
|
186
186
|
<a href="#" rel="next">Sau <span aria-hidden="true">›</span>
|
|
187
187
|
</a>
|
|
188
|
-
</nav></code></pre></details></figure><figure class="cat-demo"><figcaption>
|
|
188
|
+
</nav></code></pre></details></figure><figure class="cat-demo"><figcaption>Link (<code>ui-link</code>) · HTML sinh ra (<code>ui-prose</code>: mọi <code><a></code> không class bên trong)</figcaption><div class="cat-live"><p>Xem <a class="ui-link" href="#">báo cáo đối thủ</a> trước khi gửi.</p><div class="ui-prose"><p>Đoạn markdown: nguồn ở <a href="#">trang tích hợp của Replo</a>.</p></div></div><details class="cat-code"><summary>Markup</summary><pre><code><p>Xem <a class="ui-link" href="#">báo cáo đối thủ</a> trước khi gửi.</p>
|
|
189
|
+
<div class="ui-prose">
|
|
190
|
+
<p>Đoạn markdown: nguồn ở <a href="#">trang tích hợp của Replo</a>.</p>
|
|
191
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Thẻ có ảnh (<code>ui-card--media</code>: <code>__media</code> 16:10 · <code>__body</code> · <code>__foot</code>)</figcaption><div class="cat-live"><div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px"><article class="ui-card ui-card--media"><button type="button" class="ui-card__media" aria-label="Xem lớn"><img alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Crect width='16' height='10' fill='%23e9e7f7'/%3E%3Crect x='2' y='2' width='7' height='1.2' rx='.4' fill='%235661f5'/%3E%3Crect x='2' y='4.2' width='10' height='.8' rx='.3' fill='%23b9bdf0'/%3E%3C/svg%3E"></button><div class="ui-card__body"><h3 class="ui-card__title" style="margin:0">#392 Thẻ sản phẩm so sánh</h3><span class="ui-tag">comparison-table</span></div><div class="ui-card__foot"><span>Minh Anh · v5</span><span>2 giờ trước</span></div></article></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px">
|
|
192
|
+
<article class="ui-card ui-card--media">
|
|
193
|
+
<button type="button" class="ui-card__media" aria-label="Xem lớn">
|
|
194
|
+
<img alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Crect width='16' height='10' fill='%23e9e7f7'/%3E%3Crect x='2' y='2' width='7' height='1.2' rx='.4' fill='%235661f5'/%3E%3Crect x='2' y='4.2' width='10' height='.8' rx='.3' fill='%23b9bdf0'/%3E%3C/svg%3E">
|
|
195
|
+
</button>
|
|
196
|
+
<div class="ui-card__body">
|
|
197
|
+
<h3 class="ui-card__title" style="margin:0">#392 Thẻ sản phẩm so sánh</h3>
|
|
198
|
+
<span class="ui-tag">comparison-table</span>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="ui-card__foot">
|
|
201
|
+
<span>Minh Anh · v5</span>
|
|
202
|
+
<span>2 giờ trước</span>
|
|
203
|
+
</div>
|
|
204
|
+
</article>
|
|
205
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Card</figcaption><div class="cat-live"><div class="ui-card" style="padding:16px">Một khối nội dung. Nền, viền, bo góc và bóng lấy từ token.</div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-card" style="padding:16px">Một khối nội dung. Nền, viền, bo góc và bóng lấy từ token.</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Đầu thẻ có nút (<code>ui-card__head</code>)</figcaption><div class="cat-live"><div class="ui-card"><div class="ui-card__head"><h3 class="ui-card__title">Hạng đối tác</h3><div><button type="button" class="ui-btn ui-btn--primary">Đổi hạng</button><button type="button" class="ui-btn">Kết thúc</button></div></div><p class="ui-muted" style="margin:0">Partner từ 01/08/2026.</p></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-card">
|
|
189
206
|
<div class="ui-card__head">
|
|
190
207
|
<h3 class="ui-card__title">Hạng đối tác</h3>
|
|
191
208
|
<div>
|
|
@@ -227,13 +244,264 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
227
244
|
</table>
|
|
228
245
|
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Trống</figcaption><div class="cat-live"><div class="ui-empty">Chưa có gì ở đây.<button type="button" class="ui-btn ui-btn--primary">Tạo mục đầu tiên</button></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-empty">Chưa có gì ở đây.<button type="button" class="ui-btn ui-btn--primary">Tạo mục đầu tiên</button>
|
|
229
246
|
</div></code></pre></details></figure></section>
|
|
247
|
+
<section id="report"><h2>Báo cáo</h2><p>Trang số liệu viết tay (gemnews /admin, 03/10/2026): KPI có so kỳ trước, thanh ngang, biểu đồ cột chồng, chú thích, phễu, lưới card và tiêu đề mục. Chỉ CSS (<code>kit-plain.css</code>): bề mặt tính số và tỉ lệ rồi đặt vào <code>--v</code> (0..1); màu chuỗi lấy từ <code>--ui-series-1..5</code> qua <code>--c</code>. Tốt / xấu của delta là bề mặt quyết, không phải hướng mũi tên.</p><figure class="cat-demo"><figcaption>KPI lớn trong lưới đều (<code>ui-metrics--grid</code> + <code>ui-metric--lg</code>, <code>ui-delta--good|--bad</code>)</figcaption><div class="cat-live"><div class="ui-metrics ui-metrics--grid"><div class="ui-metric ui-metric--lg"><span class="ui-metric__lbl">Lượt đọc bài</span><span class="ui-metric__val">1.284</span><span class="ui-metric__foot"><span class="ui-delta ui-delta--good"><span aria-hidden="true">↑</span> 18%</span>so với 28 ngày trước</span></div><div class="ui-metric ui-metric--lg"><span class="ui-metric__lbl">Tỉ lệ đọc hết</span><span class="ui-metric__val">29,1%</span><span class="ui-metric__foot"><span class="ui-delta ui-delta--bad"><span aria-hidden="true">↓</span> 3,2 điểm</span>so với 28 ngày trước</span></div><div class="ui-metric ui-metric--lg"><span class="ui-metric__lbl">Người đọc</span><span class="ui-metric__val">412</span><span class="ui-metric__foot"><span class="ui-delta">Chưa có kỳ trước</span></span></div><div class="ui-metric ui-metric--lg"><span class="ui-metric__lbl">Lượt mở website</span><span class="ui-metric__val">640</span><span class="ui-metric__foot"><span class="ui-delta"><span aria-hidden="true">→</span> 0%</span>so với 28 ngày trước</span></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-metrics ui-metrics--grid">
|
|
248
|
+
<div class="ui-metric ui-metric--lg">
|
|
249
|
+
<span class="ui-metric__lbl">Lượt đọc bài</span>
|
|
250
|
+
<span class="ui-metric__val">1.284</span>
|
|
251
|
+
<span class="ui-metric__foot">
|
|
252
|
+
<span class="ui-delta ui-delta--good">
|
|
253
|
+
<span aria-hidden="true">↑</span> 18%</span>so với 28 ngày trước</span>
|
|
254
|
+
</div>
|
|
255
|
+
<div class="ui-metric ui-metric--lg">
|
|
256
|
+
<span class="ui-metric__lbl">Tỉ lệ đọc hết</span>
|
|
257
|
+
<span class="ui-metric__val">29,1%</span>
|
|
258
|
+
<span class="ui-metric__foot">
|
|
259
|
+
<span class="ui-delta ui-delta--bad">
|
|
260
|
+
<span aria-hidden="true">↓</span> 3,2 điểm</span>so với 28 ngày trước</span>
|
|
261
|
+
</div>
|
|
262
|
+
<div class="ui-metric ui-metric--lg">
|
|
263
|
+
<span class="ui-metric__lbl">Người đọc</span>
|
|
264
|
+
<span class="ui-metric__val">412</span>
|
|
265
|
+
<span class="ui-metric__foot">
|
|
266
|
+
<span class="ui-delta">Chưa có kỳ trước</span>
|
|
267
|
+
</span>
|
|
268
|
+
</div>
|
|
269
|
+
<div class="ui-metric ui-metric--lg">
|
|
270
|
+
<span class="ui-metric__lbl">Lượt mở website</span>
|
|
271
|
+
<span class="ui-metric__val">640</span>
|
|
272
|
+
<span class="ui-metric__foot">
|
|
273
|
+
<span class="ui-delta">
|
|
274
|
+
<span aria-hidden="true">→</span> 0%</span>so với 28 ngày trước</span>
|
|
275
|
+
</div>
|
|
276
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Biểu đồ cột chồng + chuỗi chấm (<code>ui-chart</code>, <code>data-max</code> là mốc trục) · chú thích (<code>ui-legend</code>)</figcaption><div class="cat-live"><figure class="ui-chart"><div class="ui-chart__plot" data-max="60" aria-hidden="true"><div class="ui-chart__col" title="20/09 · Tiện ích 0 · Website 0 · Lượt mở 0"><span class="ui-chart__seg" style="--v:0.000;--c:var(--ui-series-1)"></span><span class="ui-chart__seg" style="--v:0.000;--c:var(--ui-series-2)"></span><span class="ui-chart__dot" style="--v:0.000"></span></div><div class="ui-chart__col" title="21/09 · Tiện ích 0 · Website 0 · Lượt mở 0"><span class="ui-chart__seg" style="--v:0.000;--c:var(--ui-series-1)"></span><span class="ui-chart__seg" style="--v:0.000;--c:var(--ui-series-2)"></span><span class="ui-chart__dot" style="--v:0.000"></span></div><div class="ui-chart__col" title="22/09 · Tiện ích 0 · Website 0 · Lượt mở 0"><span class="ui-chart__seg" style="--v:0.000;--c:var(--ui-series-1)"></span><span class="ui-chart__seg" style="--v:0.000;--c:var(--ui-series-2)"></span><span class="ui-chart__dot" style="--v:0.000"></span></div><div class="ui-chart__col" title="23/09 · Tiện ích 2 · Website 1 · Lượt mở 0"><span class="ui-chart__seg" style="--v:0.033;--c:var(--ui-series-1)"></span><span class="ui-chart__seg" style="--v:0.017;--c:var(--ui-series-2)"></span><span class="ui-chart__dot" style="--v:0.000"></span></div><div class="ui-chart__col" title="24/09 · Tiện ích 46 · Website 11 · Lượt mở 24"><span class="ui-chart__seg" style="--v:0.767;--c:var(--ui-series-1)"></span><span class="ui-chart__seg" style="--v:0.183;--c:var(--ui-series-2)"></span><span class="ui-chart__dot" style="--v:0.400"></span></div><div class="ui-chart__col" title="25/09 · Tiện ích 15 · Website 4 · Lượt mở 40"><span class="ui-chart__seg" style="--v:0.250;--c:var(--ui-series-1)"></span><span class="ui-chart__seg" style="--v:0.067;--c:var(--ui-series-2)"></span><span class="ui-chart__dot" style="--v:0.667"></span></div><div class="ui-chart__col" title="26/09 · Tiện ích 10 · Website 2 · Lượt mở 18"><span class="ui-chart__seg" style="--v:0.167;--c:var(--ui-series-1)"></span><span class="ui-chart__seg" style="--v:0.033;--c:var(--ui-series-2)"></span><span class="ui-chart__dot" style="--v:0.300"></span></div><div class="ui-chart__col" title="27/09 · Tiện ích 19 · Website 5 · Lượt mở 15"><span class="ui-chart__seg" style="--v:0.317;--c:var(--ui-series-1)"></span><span class="ui-chart__seg" style="--v:0.083;--c:var(--ui-series-2)"></span><span class="ui-chart__dot" style="--v:0.250"></span></div><div class="ui-chart__col" title="28/09 · Tiện ích 25 · Website 6 · Lượt mở 22"><span class="ui-chart__seg" style="--v:0.417;--c:var(--ui-series-1)"></span><span class="ui-chart__seg" style="--v:0.100;--c:var(--ui-series-2)"></span><span class="ui-chart__dot" style="--v:0.367"></span></div><div class="ui-chart__col" title="29/09 · Tiện ích 14 · Website 4 · Lượt mở 30"><span class="ui-chart__seg" style="--v:0.233;--c:var(--ui-series-1)"></span><span class="ui-chart__seg" style="--v:0.067;--c:var(--ui-series-2)"></span><span class="ui-chart__dot" style="--v:0.500"></span></div><div class="ui-chart__col" title="30/09 · Tiện ích 7 · Website 2 · Lượt mở 12"><span class="ui-chart__seg" style="--v:0.117;--c:var(--ui-series-1)"></span><span class="ui-chart__seg" style="--v:0.033;--c:var(--ui-series-2)"></span><span class="ui-chart__dot" style="--v:0.200"></span></div><div class="ui-chart__col" title="31/09 · Tiện ích 22 · Website 5 · Lượt mở 25"><span class="ui-chart__seg" style="--v:0.367;--c:var(--ui-series-1)"></span><span class="ui-chart__seg" style="--v:0.083;--c:var(--ui-series-2)"></span><span class="ui-chart__dot" style="--v:0.417"></span></div><div class="ui-chart__col" title="32/09 · Tiện ích 18 · Website 4 · Lượt mở 20"><span class="ui-chart__seg" style="--v:0.300;--c:var(--ui-series-1)"></span><span class="ui-chart__seg" style="--v:0.067;--c:var(--ui-series-2)"></span><span class="ui-chart__dot" style="--v:0.333"></span></div><div class="ui-chart__col" title="33/09 · Tiện ích 24 · Website 6 · Lượt mở 28"><span class="ui-chart__seg" style="--v:0.400;--c:var(--ui-series-1)"></span><span class="ui-chart__seg" style="--v:0.100;--c:var(--ui-series-2)"></span><span class="ui-chart__dot" style="--v:0.467"></span></div></div><div class="ui-chart__axis" aria-hidden="true"><span>20/09</span><span>03/10</span></div><figcaption class="ui-legend"><span class="ui-legend__item"><i style="--c:var(--ui-series-1)"></i>Tiện ích</span><span class="ui-legend__item"><i style="--c:var(--ui-series-2)"></i>Website</span><span class="ui-legend__item ui-legend__item--dot"><i></i>Lượt mở website</span></figcaption></figure></div><details class="cat-code"><summary>Markup</summary><pre><code><figure class="ui-chart">
|
|
277
|
+
<div class="ui-chart__plot" data-max="60" aria-hidden="true">
|
|
278
|
+
<div class="ui-chart__col" title="20/09 · Tiện ích 0 · Website 0 · Lượt mở 0">
|
|
279
|
+
<span class="ui-chart__seg" style="--v:0.000;--c:var(--ui-series-1)">
|
|
280
|
+
</span>
|
|
281
|
+
<span class="ui-chart__seg" style="--v:0.000;--c:var(--ui-series-2)">
|
|
282
|
+
</span>
|
|
283
|
+
<span class="ui-chart__dot" style="--v:0.000">
|
|
284
|
+
</span>
|
|
285
|
+
</div>
|
|
286
|
+
<div class="ui-chart__col" title="21/09 · Tiện ích 0 · Website 0 · Lượt mở 0">
|
|
287
|
+
<span class="ui-chart__seg" style="--v:0.000;--c:var(--ui-series-1)">
|
|
288
|
+
</span>
|
|
289
|
+
<span class="ui-chart__seg" style="--v:0.000;--c:var(--ui-series-2)">
|
|
290
|
+
</span>
|
|
291
|
+
<span class="ui-chart__dot" style="--v:0.000">
|
|
292
|
+
</span>
|
|
293
|
+
</div>
|
|
294
|
+
<div class="ui-chart__col" title="22/09 · Tiện ích 0 · Website 0 · Lượt mở 0">
|
|
295
|
+
<span class="ui-chart__seg" style="--v:0.000;--c:var(--ui-series-1)">
|
|
296
|
+
</span>
|
|
297
|
+
<span class="ui-chart__seg" style="--v:0.000;--c:var(--ui-series-2)">
|
|
298
|
+
</span>
|
|
299
|
+
<span class="ui-chart__dot" style="--v:0.000">
|
|
300
|
+
</span>
|
|
301
|
+
</div>
|
|
302
|
+
<div class="ui-chart__col" title="23/09 · Tiện ích 2 · Website 1 · Lượt mở 0">
|
|
303
|
+
<span class="ui-chart__seg" style="--v:0.033;--c:var(--ui-series-1)">
|
|
304
|
+
</span>
|
|
305
|
+
<span class="ui-chart__seg" style="--v:0.017;--c:var(--ui-series-2)">
|
|
306
|
+
</span>
|
|
307
|
+
<span class="ui-chart__dot" style="--v:0.000">
|
|
308
|
+
</span>
|
|
309
|
+
</div>
|
|
310
|
+
<div class="ui-chart__col" title="24/09 · Tiện ích 46 · Website 11 · Lượt mở 24">
|
|
311
|
+
<span class="ui-chart__seg" style="--v:0.767;--c:var(--ui-series-1)">
|
|
312
|
+
</span>
|
|
313
|
+
<span class="ui-chart__seg" style="--v:0.183;--c:var(--ui-series-2)">
|
|
314
|
+
</span>
|
|
315
|
+
<span class="ui-chart__dot" style="--v:0.400">
|
|
316
|
+
</span>
|
|
317
|
+
</div>
|
|
318
|
+
<div class="ui-chart__col" title="25/09 · Tiện ích 15 · Website 4 · Lượt mở 40">
|
|
319
|
+
<span class="ui-chart__seg" style="--v:0.250;--c:var(--ui-series-1)">
|
|
320
|
+
</span>
|
|
321
|
+
<span class="ui-chart__seg" style="--v:0.067;--c:var(--ui-series-2)">
|
|
322
|
+
</span>
|
|
323
|
+
<span class="ui-chart__dot" style="--v:0.667">
|
|
324
|
+
</span>
|
|
325
|
+
</div>
|
|
326
|
+
<div class="ui-chart__col" title="26/09 · Tiện ích 10 · Website 2 · Lượt mở 18">
|
|
327
|
+
<span class="ui-chart__seg" style="--v:0.167;--c:var(--ui-series-1)">
|
|
328
|
+
</span>
|
|
329
|
+
<span class="ui-chart__seg" style="--v:0.033;--c:var(--ui-series-2)">
|
|
330
|
+
</span>
|
|
331
|
+
<span class="ui-chart__dot" style="--v:0.300">
|
|
332
|
+
</span>
|
|
333
|
+
</div>
|
|
334
|
+
<div class="ui-chart__col" title="27/09 · Tiện ích 19 · Website 5 · Lượt mở 15">
|
|
335
|
+
<span class="ui-chart__seg" style="--v:0.317;--c:var(--ui-series-1)">
|
|
336
|
+
</span>
|
|
337
|
+
<span class="ui-chart__seg" style="--v:0.083;--c:var(--ui-series-2)">
|
|
338
|
+
</span>
|
|
339
|
+
<span class="ui-chart__dot" style="--v:0.250">
|
|
340
|
+
</span>
|
|
341
|
+
</div>
|
|
342
|
+
<div class="ui-chart__col" title="28/09 · Tiện ích 25 · Website 6 · Lượt mở 22">
|
|
343
|
+
<span class="ui-chart__seg" style="--v:0.417;--c:var(--ui-series-1)">
|
|
344
|
+
</span>
|
|
345
|
+
<span class="ui-chart__seg" style="--v:0.100;--c:var(--ui-series-2)">
|
|
346
|
+
</span>
|
|
347
|
+
<span class="ui-chart__dot" style="--v:0.367">
|
|
348
|
+
</span>
|
|
349
|
+
</div>
|
|
350
|
+
<div class="ui-chart__col" title="29/09 · Tiện ích 14 · Website 4 · Lượt mở 30">
|
|
351
|
+
<span class="ui-chart__seg" style="--v:0.233;--c:var(--ui-series-1)">
|
|
352
|
+
</span>
|
|
353
|
+
<span class="ui-chart__seg" style="--v:0.067;--c:var(--ui-series-2)">
|
|
354
|
+
</span>
|
|
355
|
+
<span class="ui-chart__dot" style="--v:0.500">
|
|
356
|
+
</span>
|
|
357
|
+
</div>
|
|
358
|
+
<div class="ui-chart__col" title="30/09 · Tiện ích 7 · Website 2 · Lượt mở 12">
|
|
359
|
+
<span class="ui-chart__seg" style="--v:0.117;--c:var(--ui-series-1)">
|
|
360
|
+
</span>
|
|
361
|
+
<span class="ui-chart__seg" style="--v:0.033;--c:var(--ui-series-2)">
|
|
362
|
+
</span>
|
|
363
|
+
<span class="ui-chart__dot" style="--v:0.200">
|
|
364
|
+
</span>
|
|
365
|
+
</div>
|
|
366
|
+
<div class="ui-chart__col" title="31/09 · Tiện ích 22 · Website 5 · Lượt mở 25">
|
|
367
|
+
<span class="ui-chart__seg" style="--v:0.367;--c:var(--ui-series-1)">
|
|
368
|
+
</span>
|
|
369
|
+
<span class="ui-chart__seg" style="--v:0.083;--c:var(--ui-series-2)">
|
|
370
|
+
</span>
|
|
371
|
+
<span class="ui-chart__dot" style="--v:0.417">
|
|
372
|
+
</span>
|
|
373
|
+
</div>
|
|
374
|
+
<div class="ui-chart__col" title="32/09 · Tiện ích 18 · Website 4 · Lượt mở 20">
|
|
375
|
+
<span class="ui-chart__seg" style="--v:0.300;--c:var(--ui-series-1)">
|
|
376
|
+
</span>
|
|
377
|
+
<span class="ui-chart__seg" style="--v:0.067;--c:var(--ui-series-2)">
|
|
378
|
+
</span>
|
|
379
|
+
<span class="ui-chart__dot" style="--v:0.333">
|
|
380
|
+
</span>
|
|
381
|
+
</div>
|
|
382
|
+
<div class="ui-chart__col" title="33/09 · Tiện ích 24 · Website 6 · Lượt mở 28">
|
|
383
|
+
<span class="ui-chart__seg" style="--v:0.400;--c:var(--ui-series-1)">
|
|
384
|
+
</span>
|
|
385
|
+
<span class="ui-chart__seg" style="--v:0.100;--c:var(--ui-series-2)">
|
|
386
|
+
</span>
|
|
387
|
+
<span class="ui-chart__dot" style="--v:0.467">
|
|
388
|
+
</span>
|
|
389
|
+
</div>
|
|
390
|
+
</div>
|
|
391
|
+
<div class="ui-chart__axis" aria-hidden="true">
|
|
392
|
+
<span>20/09</span>
|
|
393
|
+
<span>03/10</span>
|
|
394
|
+
</div>
|
|
395
|
+
<figcaption class="ui-legend">
|
|
396
|
+
<span class="ui-legend__item">
|
|
397
|
+
<i style="--c:var(--ui-series-1)">
|
|
398
|
+
</i>Tiện ích</span>
|
|
399
|
+
<span class="ui-legend__item">
|
|
400
|
+
<i style="--c:var(--ui-series-2)">
|
|
401
|
+
</i>Website</span>
|
|
402
|
+
<span class="ui-legend__item ui-legend__item--dot">
|
|
403
|
+
<i>
|
|
404
|
+
</i>Lượt mở website</span>
|
|
405
|
+
</figcaption>
|
|
406
|
+
</figure></code></pre></details></figure><figure class="cat-demo"><figcaption>Thanh ngang (<code>ui-barlist</code>, <code>--v</code> = n / n lớn nhất, <code>__note</code> dòng phụ)</figcaption><div class="cat-live"><ol class="ui-barlist"><li><span class="ui-barlist__label">Tiếng Việt</span><span class="ui-barlist__val">512<span class="ui-barlist__share">49,8%</span></span><span class="ui-barlist__bar" style="--v:1"></span><span class="ui-barlist__note">Đọc hết 31%</span></li><li><span class="ui-barlist__label">English</span><span class="ui-barlist__val">390<span class="ui-barlist__share">37,9%</span></span><span class="ui-barlist__bar" style="--v:.762;--c:var(--ui-series-2)"></span><span class="ui-barlist__note">Đọc hết 27%</span></li><li><span class="ui-barlist__label">中文</span><span class="ui-barlist__val">126<span class="ui-barlist__share">12,3%</span></span><span class="ui-barlist__bar" style="--v:.246;--c:var(--ui-series-3)"></span><span class="ui-barlist__note">Đọc hết 35%</span></li></ol></div><details class="cat-code"><summary>Markup</summary><pre><code><ol class="ui-barlist">
|
|
407
|
+
<li>
|
|
408
|
+
<span class="ui-barlist__label">Tiếng Việt</span>
|
|
409
|
+
<span class="ui-barlist__val">512<span class="ui-barlist__share">49,8%</span>
|
|
410
|
+
</span>
|
|
411
|
+
<span class="ui-barlist__bar" style="--v:1">
|
|
412
|
+
</span>
|
|
413
|
+
<span class="ui-barlist__note">Đọc hết 31%</span>
|
|
414
|
+
</li>
|
|
415
|
+
<li>
|
|
416
|
+
<span class="ui-barlist__label">English</span>
|
|
417
|
+
<span class="ui-barlist__val">390<span class="ui-barlist__share">37,9%</span>
|
|
418
|
+
</span>
|
|
419
|
+
<span class="ui-barlist__bar" style="--v:.762;--c:var(--ui-series-2)">
|
|
420
|
+
</span>
|
|
421
|
+
<span class="ui-barlist__note">Đọc hết 27%</span>
|
|
422
|
+
</li>
|
|
423
|
+
<li>
|
|
424
|
+
<span class="ui-barlist__label">中文</span>
|
|
425
|
+
<span class="ui-barlist__val">126<span class="ui-barlist__share">12,3%</span>
|
|
426
|
+
</span>
|
|
427
|
+
<span class="ui-barlist__bar" style="--v:.246;--c:var(--ui-series-3)">
|
|
428
|
+
</span>
|
|
429
|
+
<span class="ui-barlist__note">Đọc hết 35%</span>
|
|
430
|
+
</li>
|
|
431
|
+
</ol></code></pre></details></figure><figure class="cat-demo"><figcaption>Phễu (<code>ui-funnel</code>, <code>__rate</code> = đi tiếp từ bước ngay trước)</figcaption><div class="cat-live"><ol class="ui-funnel"><li><span class="ui-funnel__val">1.050</span><span class="ui-funnel__lbl">Lời mời cài hiện ra</span></li><li><span class="ui-funnel__rate">4,8%</span><span class="ui-funnel__val">50</span><span class="ui-funnel__lbl">Bấm Thêm vào Chrome</span></li><li><span class="ui-funnel__rate">38%</span><span class="ui-funnel__val">19</span><span class="ui-funnel__lbl">Trình duyệt có tiện ích</span></li></ol></div><details class="cat-code"><summary>Markup</summary><pre><code><ol class="ui-funnel">
|
|
432
|
+
<li>
|
|
433
|
+
<span class="ui-funnel__val">1.050</span>
|
|
434
|
+
<span class="ui-funnel__lbl">Lời mời cài hiện ra</span>
|
|
435
|
+
</li>
|
|
436
|
+
<li>
|
|
437
|
+
<span class="ui-funnel__rate">4,8%</span>
|
|
438
|
+
<span class="ui-funnel__val">50</span>
|
|
439
|
+
<span class="ui-funnel__lbl">Bấm Thêm vào Chrome</span>
|
|
440
|
+
</li>
|
|
441
|
+
<li>
|
|
442
|
+
<span class="ui-funnel__rate">38%</span>
|
|
443
|
+
<span class="ui-funnel__val">19</span>
|
|
444
|
+
<span class="ui-funnel__lbl">Trình duyệt có tiện ích</span>
|
|
445
|
+
</li>
|
|
446
|
+
</ol></code></pre></details></figure><figure class="cat-demo"><figcaption>Lưới card (<code>ui-grid--2</code>) · tiêu đề mục (<code>ui-section-head</code>)</figcaption><div class="cat-live"><div class="ui-section-head"><h2>Người đọc</h2><p>Đọc ở đâu, bằng ngôn ngữ nào.</p></div><div class="ui-grid ui-grid--2" style="margin-top:12px"><div class="ui-card"><div class="ui-card__head"><h3 class="ui-card__title">Theo nơi đọc</h3></div><ol class="ui-barlist"><li><span class="ui-barlist__label">Tiện ích</span><span class="ui-barlist__val">70<span class="ui-barlist__share">88,6%</span></span><span class="ui-barlist__bar" style="--v:1"></span></li><li><span class="ui-barlist__label">Website</span><span class="ui-barlist__val">9<span class="ui-barlist__share">11,4%</span></span><span class="ui-barlist__bar" style="--v:.129;--c:var(--ui-series-2)"></span></li></ol></div><div class="ui-card"><div class="ui-card__head"><h3 class="ui-card__title">Theo thiết bị</h3></div><ol class="ui-barlist"><li><span class="ui-barlist__label">Máy tính</span><span class="ui-barlist__val">50<span class="ui-barlist__share">78,1%</span></span><span class="ui-barlist__bar" style="--v:1"></span></li><li><span class="ui-barlist__label">Điện thoại</span><span class="ui-barlist__val">14<span class="ui-barlist__share">21,9%</span></span><span class="ui-barlist__bar" style="--v:.28"></span></li></ol></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-section-head">
|
|
447
|
+
<h2>Người đọc</h2>
|
|
448
|
+
<p>Đọc ở đâu, bằng ngôn ngữ nào.</p>
|
|
449
|
+
</div>
|
|
450
|
+
<div class="ui-grid ui-grid--2" style="margin-top:12px">
|
|
451
|
+
<div class="ui-card">
|
|
452
|
+
<div class="ui-card__head">
|
|
453
|
+
<h3 class="ui-card__title">Theo nơi đọc</h3>
|
|
454
|
+
</div>
|
|
455
|
+
<ol class="ui-barlist">
|
|
456
|
+
<li>
|
|
457
|
+
<span class="ui-barlist__label">Tiện ích</span>
|
|
458
|
+
<span class="ui-barlist__val">70<span class="ui-barlist__share">88,6%</span>
|
|
459
|
+
</span>
|
|
460
|
+
<span class="ui-barlist__bar" style="--v:1">
|
|
461
|
+
</span>
|
|
462
|
+
</li>
|
|
463
|
+
<li>
|
|
464
|
+
<span class="ui-barlist__label">Website</span>
|
|
465
|
+
<span class="ui-barlist__val">9<span class="ui-barlist__share">11,4%</span>
|
|
466
|
+
</span>
|
|
467
|
+
<span class="ui-barlist__bar" style="--v:.129;--c:var(--ui-series-2)">
|
|
468
|
+
</span>
|
|
469
|
+
</li>
|
|
470
|
+
</ol>
|
|
471
|
+
</div>
|
|
472
|
+
<div class="ui-card">
|
|
473
|
+
<div class="ui-card__head">
|
|
474
|
+
<h3 class="ui-card__title">Theo thiết bị</h3>
|
|
475
|
+
</div>
|
|
476
|
+
<ol class="ui-barlist">
|
|
477
|
+
<li>
|
|
478
|
+
<span class="ui-barlist__label">Máy tính</span>
|
|
479
|
+
<span class="ui-barlist__val">50<span class="ui-barlist__share">78,1%</span>
|
|
480
|
+
</span>
|
|
481
|
+
<span class="ui-barlist__bar" style="--v:1">
|
|
482
|
+
</span>
|
|
483
|
+
</li>
|
|
484
|
+
<li>
|
|
485
|
+
<span class="ui-barlist__label">Điện thoại</span>
|
|
486
|
+
<span class="ui-barlist__val">14<span class="ui-barlist__share">21,9%</span>
|
|
487
|
+
</span>
|
|
488
|
+
<span class="ui-barlist__bar" style="--v:.28">
|
|
489
|
+
</span>
|
|
490
|
+
</li>
|
|
491
|
+
</ol>
|
|
492
|
+
</div>
|
|
493
|
+
</div></code></pre></details></figure></section>
|
|
230
494
|
<section id="resizer"><h2>Thanh kéo giữa hai cột</h2><p>Thanh <code>ui-resizer</code> đứng giữa hai cột, người dùng kéo để đổi độ rộng. Phần NHÌN (vạch nắm hiện khi rê chuột hoặc focus bàn phím, vùng chạm 24px cho ngón tay, lớp che khi đang kéo) là của gemboss-ui.css; vị trí và hành vi là của bề mặt: dùng <b>pointer event</b> (chạm là một pointer), gắn <code>ui-resizing</code> lên <code><body></code> trong lúc kéo, phím mũi tên / Home / End di chuyển nó, kẹp theo bề rộng THẬT của khung (không theo một con số), và nhớ độ rộng theo trình duyệt. Admin: <code>useResizableChatPanel</code>; gemcare: viết tay theo đúng markup này.</p><figure class="cat-demo"><figcaption>Rê chuột hoặc Tab vào khe giữa để thấy vạch nắm</figcaption><div class="cat-live"><div style="display:grid;grid-template-columns:200px 5px minmax(0,1fr);height:140px;border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-md);overflow:hidden"><div style="padding:12px;background:var(--gemboss-surface)">Danh sách</div><div class="ui-resizer" role="separator" aria-orientation="vertical" aria-label="Độ rộng danh sách" tabindex="0" aria-valuenow="200" aria-valuemin="160" aria-valuemax="420"></div><div style="padding:12px;background:var(--gemboss-surface)">Nội dung</div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="display:grid;grid-template-columns:200px 5px minmax(0,1fr);height:140px;border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-md);overflow:hidden">
|
|
231
495
|
<div style="padding:12px;background:var(--gemboss-surface)">Danh sách</div>
|
|
232
496
|
<div class="ui-resizer" role="separator" aria-orientation="vertical" aria-label="Độ rộng danh sách" tabindex="0" aria-valuenow="200" aria-valuemin="160" aria-valuemax="420">
|
|
233
497
|
</div>
|
|
234
498
|
<div style="padding:12px;background:var(--gemboss-surface)">Nội dung</div>
|
|
235
499
|
</div></code></pre></details></figure></section>
|
|
236
|
-
<section id="modal"><h2>Hộp thoại</h2><p>Lớp phủ <code>ui-overlay</code> + hộp <code>ui-modal</code>
|
|
500
|
+
<section id="modal"><h2>Hộp thoại, toast, menu (JS thuần)</h2><p>Lớp phủ <code>ui-overlay</code> + hộp <code>ui-modal</code>, thân <code>ui-modal__body</code>, chân <code>ui-modal__foot</code>. Bề mặt không dùng React nạp <code>@gemboss/ui/kit-plain.js</code> (script thường, chèn thẳng vào trang được) và gọi <code>gembossUI.openModal</code> / <code>toast</code> / <code>initMenus</code>: Escape, chạm nền, giữ Tab trong hộp, hộp chồng nhau, hỏi trước khi đóng. Bấm thử các nút dưới đây.</p><figure class="cat-demo"><figcaption>Bấm thử (<code>gembossUI</code>) <span>chạy kit-plain.js thật của gói</span></figcaption><div class="cat-live"><div class="cat-row"><button type="button" class="ui-btn ui-btn--primary" data-cat-js="modal">Mở hộp thoại</button><button type="button" class="ui-btn" data-cat-js="toast">Toast</button><button type="button" class="ui-btn" data-cat-js="toast-error">Toast lỗi</button></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="cat-row">
|
|
501
|
+
<button type="button" class="ui-btn ui-btn--primary" data-cat-js="modal">Mở hộp thoại</button>
|
|
502
|
+
<button type="button" class="ui-btn" data-cat-js="toast">Toast</button>
|
|
503
|
+
<button type="button" class="ui-btn" data-cat-js="toast-error">Toast lỗi</button>
|
|
504
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Hộp thoại (<code>ui-modal__head</code> có nút đóng 44px)</figcaption><div class="cat-live"><div class="ui-modal" role="dialog" aria-modal="true" aria-labelledby="cat-m"><div class="ui-modal__head"><div class="ui-modal__title" id="cat-m">Xoá phiên này?</div><button type="button" class="ui-modal__close" aria-label="Đóng"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg></button></div><div class="ui-modal__body">Lịch sử vẫn còn trong sổ; phiên chỉ ẩn khỏi danh sách.</div><div class="ui-modal__foot"><button type="button" class="ui-btn ui-btn--ghost">Huỷ</button><button type="button" class="ui-btn ui-btn--primary">Xoá</button></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-modal" role="dialog" aria-modal="true" aria-labelledby="cat-m">
|
|
237
505
|
<div class="ui-modal__head">
|
|
238
506
|
<div class="ui-modal__title" id="cat-m">Xoá phiên này?</div>
|
|
239
507
|
<button type="button" class="ui-modal__close" aria-label="Đóng">
|
|
@@ -245,10 +513,10 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
245
513
|
</svg>
|
|
246
514
|
</button>
|
|
247
515
|
</div>
|
|
248
|
-
<div
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
</
|
|
516
|
+
<div class="ui-modal__body">Lịch sử vẫn còn trong sổ; phiên chỉ ẩn khỏi danh sách.</div>
|
|
517
|
+
<div class="ui-modal__foot">
|
|
518
|
+
<button type="button" class="ui-btn ui-btn--ghost">Huỷ</button>
|
|
519
|
+
<button type="button" class="ui-btn ui-btn--primary">Xoá</button>
|
|
252
520
|
</div>
|
|
253
521
|
</div></code></pre></details></figure></section>
|
|
254
522
|
<section id="shell"><h2>Khung app</h2><p>Topbar 56px, rail 240px, ≤760px thành ngăn kéo. Logo <code>BrandLockup</code>, tài khoản <code>AccountMenu</code> (bấm chữ viết tắt), mục Trợ lý ở chân rail có class <code>gnav-assistant</code>.</p><figure class="cat-demo cat-screen"><figcaption>AppShell + BrandLockup + AccountMenu + Icon</figcaption><iframe title="AppShell + BrandLockup + AccountMenu + Icon" style="height:460px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><button type="button" class="gemboss-mobile-menu-btn" aria-label="Mở menu" aria-expanded="false" aria-controls=":R0:"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg></button><a class="gb-brand" href="#" aria-label="GemFactory home"><svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false"><g transform="translate(0,0.8) scale(0.31)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.45" stroke-linejoin="round"></path></g></svg><span class="gb-brand-name">GemFactory</span></a></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"><details class="gb-account"><summary class="gemboss-account-chip" aria-label="Account · Minh Anh" title="Minh Anh">MA</summary><div role="menu" class="gemboss-popover-surface gemboss-account-menu"><div class="gb-account-head"><div class="gb-account-name">Minh Anh</div><div class="gb-account-email">ma@gemboss.ai</div><div class="gb-account-role">Designer</div></div><a role="menuitem" class="gemboss-account-menu-item" href="#">Cài đặt</a><form method="post" action="#" class="gb-account-form"><button role="menuitem" type="submit" class="gemboss-account-menu-item danger">Đăng xuất</button></form></div></details></div></header><nav class="icon-nav" aria-label="Main navigation" id=":R0:"><div class="gnav-scroll"><div class="gnav-heading">Kho</div><div class="gnav-group active"><a class="gnav-item active" aria-current="page" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></span><span class="gnav-label">Board</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg></span><span class="gnav-label">Ghép trang</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg></span><span class="gnav-label">Framework thiếu</span><span class="gnav-count" aria-label="3 mục đang mở">3</span></a></div></div><div class="gnav-bottom"><div class="gnav-sep"></div><a class="gnav-item gnav-assistant" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg></span><span class="gnav-label">Trợ lý</span></a></div></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Đóng menu" tabindex="-1"></button><main class="gemboss-platform-main"><div style="padding:24px"><h1 style="margin:0">Nội dung màn</h1></div></main></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
@@ -421,7 +689,55 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
421
689
|
</aside>
|
|
422
690
|
</div>
|
|
423
691
|
</main></code></pre></details></figure></section>
|
|
424
|
-
<section id="
|
|
692
|
+
<section id="chat"><h2>Thân chat</h2><p>Một câu trả lời trông thế nào, ở bất kỳ bề mặt nào đặt một ô chat: tin người dùng / trợ lý, markdown, các bước đang làm (narration), chỉ báo "đang làm", câu hỏi gợi ý, chip lựa chọn, ô soạn. CSS là <code>chat.css</code> của gói (admin <code>@import</code> nó). Khung bao ngoài (cột, ngăn, popup) và hành vi (stream, Dừng, phím) là của bề mặt.</p><figure class="cat-demo"><figcaption>Hội thoại: người dùng, trợ lý (markdown), các bước, đang làm</figcaption><div class="cat-live"><div style="display:flex;flex-direction:column;max-width:520px;border:1px solid var(--gemboss-divider);border-radius:12px;background:var(--gemboss-panel-bg)"><div class="gemboss-ec-head"><div class="gemboss-ec-title">Trợ lý</div><div class="gemboss-ec-sub">Hội thoại #1042</div></div><div class="gemboss-ec-scroll" style="max-height:none"><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Khách nói trang checkout trắng sau khi publish.</div></div><div class="gemboss-ec-msg assistant"><ul class="gemboss-narr"><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot">✓</span><span class="gemboss-narr-text">Đọc hội thoại</span></li><li class="gemboss-narr-row running"><span class="gemboss-narr-dot"><span class="gemboss-narr-spin"></span></span><span class="gemboss-narr-text">Tìm bài help liên quan</span></li></ul><div class="gemboss-ec-bubble"><p class="gemboss-md-p">Gợi ý trả lời: vào <a class="gemboss-ec-md-link" href="#chat">Settings › Checkout</a>, tắt <code class="gemboss-md-code">legacy script</code> rồi publish lại.</p><ul class="gemboss-md-list"><li>Nếu vẫn trắng: xoá cache trình duyệt.</li></ul><span class="gemboss-ec-cursor"></span></div></div><div class="gemboss-ec-pending"><span class="gemboss-ec-pending-star">✳</span><span class="gemboss-ec-pending-verb">Đang nghĩ</span><span class="gemboss-ec-pending-meta">4s</span></div><div class="gemboss-ec-starters"><button type="button" class="gemboss-ec-starter">Nên trả lời thế nào?</button><button type="button" class="gemboss-ec-starter">Trước đây giải quyết sao?</button></div></div><form class="gemboss-ec-input" onsubmit="return false"><textarea rows="1" aria-label="Hỏi trợ lý" placeholder="Hỏi về hội thoại này…"></textarea><button type="submit" aria-label="Gửi">↑</button></form></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="display:flex;flex-direction:column;max-width:520px;border:1px solid var(--gemboss-divider);border-radius:12px;background:var(--gemboss-panel-bg)">
|
|
693
|
+
<div class="gemboss-ec-head">
|
|
694
|
+
<div class="gemboss-ec-title">Trợ lý</div>
|
|
695
|
+
<div class="gemboss-ec-sub">Hội thoại #1042</div>
|
|
696
|
+
</div>
|
|
697
|
+
<div class="gemboss-ec-scroll" style="max-height:none">
|
|
698
|
+
<div class="gemboss-ec-msg user">
|
|
699
|
+
<div class="gemboss-ec-bubble">Khách nói trang checkout trắng sau khi publish.</div>
|
|
700
|
+
</div>
|
|
701
|
+
<div class="gemboss-ec-msg assistant">
|
|
702
|
+
<ul class="gemboss-narr">
|
|
703
|
+
<li class="gemboss-narr-row ok">
|
|
704
|
+
<span class="gemboss-narr-dot">✓</span>
|
|
705
|
+
<span class="gemboss-narr-text">Đọc hội thoại</span>
|
|
706
|
+
</li>
|
|
707
|
+
<li class="gemboss-narr-row running">
|
|
708
|
+
<span class="gemboss-narr-dot">
|
|
709
|
+
<span class="gemboss-narr-spin">
|
|
710
|
+
</span>
|
|
711
|
+
</span>
|
|
712
|
+
<span class="gemboss-narr-text">Tìm bài help liên quan</span>
|
|
713
|
+
</li>
|
|
714
|
+
</ul>
|
|
715
|
+
<div class="gemboss-ec-bubble">
|
|
716
|
+
<p class="gemboss-md-p">Gợi ý trả lời: vào <a class="gemboss-ec-md-link" href="#chat">Settings › Checkout</a>, tắt <code class="gemboss-md-code">legacy script</code> rồi publish lại.</p>
|
|
717
|
+
<ul class="gemboss-md-list">
|
|
718
|
+
<li>Nếu vẫn trắng: xoá cache trình duyệt.</li>
|
|
719
|
+
</ul>
|
|
720
|
+
<span class="gemboss-ec-cursor">
|
|
721
|
+
</span>
|
|
722
|
+
</div>
|
|
723
|
+
</div>
|
|
724
|
+
<div class="gemboss-ec-pending">
|
|
725
|
+
<span class="gemboss-ec-pending-star">✳</span>
|
|
726
|
+
<span class="gemboss-ec-pending-verb">Đang nghĩ</span>
|
|
727
|
+
<span class="gemboss-ec-pending-meta">4s</span>
|
|
728
|
+
</div>
|
|
729
|
+
<div class="gemboss-ec-starters">
|
|
730
|
+
<button type="button" class="gemboss-ec-starter">Nên trả lời thế nào?</button>
|
|
731
|
+
<button type="button" class="gemboss-ec-starter">Trước đây giải quyết sao?</button>
|
|
732
|
+
</div>
|
|
733
|
+
</div>
|
|
734
|
+
<form class="gemboss-ec-input" onsubmit="return false">
|
|
735
|
+
<textarea rows="1" aria-label="Hỏi trợ lý" placeholder="Hỏi về hội thoại này…">
|
|
736
|
+
</textarea>
|
|
737
|
+
<button type="submit" aria-label="Gửi">↑</button>
|
|
738
|
+
</form>
|
|
739
|
+
</div></code></pre></details></figure></section>
|
|
740
|
+
<section id="assistant"><h2>Trợ lý: cột phiên</h2><p><code>SessionRail</code> (React). Khung toàn màn hình / cửa sổ nổi / cột phải cao hết màn (<code>allowSide</code>) / thanh là <code>AssistantHost</code>, cần React vì có trạng thái.</p><figure class="cat-demo"><figcaption>SessionRail</figcaption><div class="cat-live"><div style="height:360px;display:flex"><aside class="gemboss-assistant-rail"><div class="gemboss-assistant-rail-top"><button type="button" class="gemboss-assistant-newchat" title="Phiên mới"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H5.5A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16h9a1.5 1.5 0 0 0 1.5-1.5V9"></path><path d="M14.5 3.5l2 2L10 12H8v-2z"></path></g></svg><span>Phiên mới</span></button><button type="button" class="gemboss-assistant-collapse" aria-label="Collapse sidebar" title="Collapse"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5l-5 5 5 5"></path></g></svg></button></div><div class="gemboss-assistant-search gemboss-field gemboss-field--group"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="5"></circle><path d="M13 13l3.5 3.5"></path></g></svg><input class="gemboss-field__bare" placeholder="Tìm phiên…" aria-label="Search history" value=""/><kbd class="gemboss-assistant-kbd">/</kbd></div><div class="gemboss-assistant-threads"><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Đã ghim</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="So sánh advertorial với listicle"><span class="gemboss-assistant-thread-titlerow"><svg viewBox="0 0 20 20" class="gemboss-assistant-pin-dot" aria-hidden="true" focusable="false"><path d="M8 3.5h4l-.5 5 2.5 2.5H6l2.5-2.5z" fill="currentColor"></path><path d="M10 11v5.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg><span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span></span><span class="gemboss-assistant-thread-meta">23/8/2026</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm nay</div><div class="gemboss-assistant-thread active"><button type="button" class="gemboss-assistant-thread-main" title="Store nào đang dựng loạt landing?"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Store nào đang dựng loạt landing?</span></span><span class="gemboss-assistant-thread-meta">3 giờ trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm qua</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="Landing điểm cao nhất của corpus"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Landing điểm cao nhất của corpus</span></span><span class="gemboss-assistant-thread-meta">1 ngày trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div></div></aside></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="height:360px;display:flex">
|
|
425
741
|
<aside class="gemboss-assistant-rail">
|
|
426
742
|
<div class="gemboss-assistant-rail-top">
|
|
427
743
|
<button type="button" class="gemboss-assistant-newchat" title="Phiên mới">
|
|
@@ -551,4 +867,16 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
551
867
|
</rect>
|
|
552
868
|
</g>
|
|
553
869
|
</svg></code></pre></details></figure></section>
|
|
554
|
-
</main></div></
|
|
870
|
+
</main></div><script src="../src/kit-plain.js"></script><script>gembossUI.initMenus();
|
|
871
|
+
document.addEventListener("click", function (e) {
|
|
872
|
+
var b = e.target.closest("[data-cat-js]"); if (!b) return;
|
|
873
|
+
var k = b.dataset.catJs;
|
|
874
|
+
if (k === "toast") gembossUI.toast("Đã lưu");
|
|
875
|
+
else if (k === "toast-error") gembossUI.toast("Không lưu được: mất mạng", { error: true });
|
|
876
|
+
else {
|
|
877
|
+
var m = gembossUI.openModal({ title: "Xoá phiên này?", closeLabel: "Đóng", body: '<div class="ui-modal__body">Lịch sử vẫn còn trong sổ; phiên chỉ ẩn khỏi danh sách.</div>',
|
|
878
|
+
foot: '<button type="button" class="ui-btn ui-btn--ghost" data-v="0">Huỷ</button><button type="button" class="ui-btn ui-btn--primary" data-v="1" autofocus>Xoá</button>',
|
|
879
|
+
onClose: function (v) { if (v) gembossUI.toast("Đã xoá (thử)"); } });
|
|
880
|
+
m.panel.querySelectorAll("[data-v]").forEach(function (x) { x.onclick = function () { m.close(x.dataset.v === "1"); }; });
|
|
881
|
+
}
|
|
882
|
+
});</script></body></html>
|