@gemboss/ui 0.8.1 → 0.12.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/CHANGELOG.md +122 -0
- package/README.md +212 -3
- package/catalog/index.html +140 -7
- package/gemboss-ui.css +199 -69
- package/package.json +12 -3
- package/src/app-shell.css +89 -0
- package/src/editor.css +1099 -0
- package/src/gemboss-tokens.css +1 -1
- package/src/index.ts +2 -0
- package/src/kit-plain.css +39 -12
- package/src/kit-plain.js +118 -1
- package/src/nav-dwell.ts +6 -0
- package/src/next/index.ts +4 -0
- package/src/next/nav.tsx +142 -0
- package/src/route-holding.tsx +65 -0
- package/src/shell.tsx +12 -7
- package/src/theme-dark.css +1 -0
- package/src/ui.css +67 -54
package/catalog/index.html
CHANGED
|
@@ -6,7 +6,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
6
6
|
.cat-nav a{padding:8px 12px;border-radius:var(--gemboss-radius-md);color:var(--gemboss-text);text-decoration:none;min-height:24px}
|
|
7
7
|
.cat-nav a:hover{background:var(--gemboss-hover)}
|
|
8
8
|
.cat-head h1{margin:0 0 4px;font-size:28px}.cat-head p{margin:0 0 24px;color:var(--gemboss-text-muted)}
|
|
9
|
-
.cat section{margin:0 0 48px}.cat h2{margin:0 0 6px;font-size:20px}.cat section>p{margin:0 0 16px;color:var(--gemboss-text-muted)}
|
|
9
|
+
.cat section{margin:0 0 48px}.cat section>h2{margin:0 0 6px;font-size:20px;font-weight:650}.cat section>p{margin:0 0 16px;color:var(--gemboss-text-muted)}
|
|
10
10
|
.cat-demo{margin:0 0 16px;background:var(--gemboss-surface);border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden}
|
|
11
11
|
.cat-demo figcaption{padding:10px 16px;font-size:13px;font-weight:600;border-bottom:1px solid var(--gemboss-divider)}
|
|
12
12
|
.cat-demo figcaption span{font-weight:400;color:var(--gemboss-text-muted)}
|
|
@@ -26,10 +26,10 @@ 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="#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="#page">Bề rộng nội dung</a><a href="#portal">Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</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.
|
|
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="#nav">Chờ điều hướng</a><a href="#page">Bề rộng nội dung</a><a href="#portal">Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</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.12.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>e4c3bf3203ec</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
|
-
<section id="buttons"><h2>Nút</h2><p>Một lớp <code>ui-btn</code>, ba biến thể, tông đỏ, một cỡ nhỏ. Cao
|
|
32
|
+
<section id="buttons"><h2>Nút</h2><p>Một lớp <code>ui-btn</code>, ba biến thể, tông đỏ, một cỡ nhỏ. Cao 28px dưới chuột như Button của Polaris (ô nhập và ô chọn 32, như TextField), 44px dưới ngón tay và ở khổ điện thoại, cỡ nhỏ cũng vậy. 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>
|
|
34
34
|
<button type="button" class="ui-btn ui-btn--primary">Xuất bản</button>
|
|
35
35
|
<button type="button" class="ui-btn ui-btn--ghost">Huỷ</button>
|
|
@@ -158,6 +158,10 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
158
158
|
<a class="ui-tag ui-tag--chip" href="#">Judge.me Product Reviews</a>
|
|
159
159
|
<a class="ui-tag ui-tag--chip" href="#">Klaviyo</a>
|
|
160
160
|
<a class="ui-tag ui-tag--chip" href="#">Instafeed</a>
|
|
161
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Chip lọc (<code>ui-chip</code>: hình FilterPill của Polaris, cao như nút 28px, nét đứt khi chưa áp; <code>aria-pressed</code> lọc tại chỗ, <code>aria-current</code> lọc bằng URL)</figcaption><div class="cat-live"><div class="ui-chips"><button type="button" class="ui-chip" aria-pressed="true">Shopify Plus</button><button type="button" class="ui-chip" aria-pressed="false">Có review app</button><a class="ui-chip" href="#">Hoa Kỳ</a></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-chips">
|
|
162
|
+
<button type="button" class="ui-chip" aria-pressed="true">Shopify Plus</button>
|
|
163
|
+
<button type="button" class="ui-chip" aria-pressed="false">Có review app</button>
|
|
164
|
+
<a class="ui-chip" href="#">Hoa Kỳ</a>
|
|
161
165
|
</div></code></pre></details></figure></section>
|
|
162
166
|
<section id="surfaces"><h2>Thẻ, số liệu, bảng, trạng thái trống</h2><figure class="cat-demo"><figcaption>Tiêu đề trang (<code>ui-page-head</code>) · chữ phụ (<code>ui-muted</code>)</figcaption><div class="cat-live"><div class="ui-page-head"><h1>Đối thủ</h1><p>Page builder nào đang tích hợp với ai.</p></div><p class="ui-muted">Cập nhật 01/10, 300 trang app đã đọc.</p></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-page-head">
|
|
163
167
|
<h1>Đối thủ</h1>
|
|
@@ -302,7 +306,16 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
302
306
|
<span>2 giờ trước</span>
|
|
303
307
|
</div>
|
|
304
308
|
</article>
|
|
305
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Card</figcaption><div class="cat-live"><div class="ui-card"
|
|
309
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Card</figcaption><div class="cat-live"><div class="ui-card">Một khối nội dung. Nền, một viền 1px <code>--ui-border</code>, bóng shadow-100 của Polaris, bo góc 12 và đệm 16 lấy từ gói.</div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-card">Một khối nội dung. Nền, một viền 1px <code>--ui-border</code>, bóng shadow-100 của Polaris, bo góc 12 và đệm 16 lấy từ gói.</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Xếp card (<code>ui-stack</code>: khe 16px giữa các khối, như BlockStack gap 400 của Polaris)</figcaption><div class="cat-live"><div class="ui-stack"><div class="ui-card"><h2 class="ui-card__title">Kênh</h2><p class="ui-muted">Lượt đọc theo nguồn.</p></div><div class="ui-card"><h2 class="ui-card__title">Ngôn ngữ</h2><p class="ui-muted">vi · en · zh.</p></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-stack">
|
|
310
|
+
<div class="ui-card">
|
|
311
|
+
<h2 class="ui-card__title">Kênh</h2>
|
|
312
|
+
<p class="ui-muted">Lượt đọc theo nguồn.</p>
|
|
313
|
+
</div>
|
|
314
|
+
<div class="ui-card">
|
|
315
|
+
<h2 class="ui-card__title">Ngôn ngữ</h2>
|
|
316
|
+
<p class="ui-muted">vi · en · zh.</p>
|
|
317
|
+
</div>
|
|
318
|
+
</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">
|
|
306
319
|
<div class="ui-card__head">
|
|
307
320
|
<h3 class="ui-card__title">Hạng đối tác</h3>
|
|
308
321
|
<div>
|
|
@@ -752,6 +765,126 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
752
765
|
</div>
|
|
753
766
|
</main>
|
|
754
767
|
</div></code></pre></details></figure></section>
|
|
768
|
+
<section id="nav"><h2>Chờ điều hướng</h2><p>Bấm một mục rail là có phản hồi ở khung hình đầu tiên: icon thành spinner trong đúng ô 20px (chữ không xê dịch), mục con có spinner 12px ở phần thụt lề ngay trước chữ, con trỏ chờ. Một trạng thái, ba cách đặt: <code>RailItem pending</code> / <code>RailSubItem pending</code> (React, thành <code>aria-busy="true"</code>); <code>RailItem as={NavLink}</code> của <code>@gemboss/ui/next</code> (đọc <code>useLinkStatus</code> của Next, tải trước khi chuột hoặc focus bàn phím dừng 120 ms, hoặc khi chạm); trang HTML thuần nạp <code>kit-plain.js</code> là tự có, kể cả tải trước (speculation rules ở Chromium, không có thì <code><link rel="prefetch"></code>). Link trong nội dung trang thêm <code>data-gb-pending</code> ("inline" hoặc "corner").</p><figure class="cat-demo cat-screen"><figcaption>RailItem pending + RailSubItem pending</figcaption><iframe title="RailItem pending + RailSubItem pending" style="height:300px" 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="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" 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"></div></header><nav class="icon-nav" aria-label="Main navigation" id=":R0:"><div class="gnav-scroll"><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" 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" aria-busy="true" 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 (đang mở)</span></a></div><div class="gnav-group active has-active-child"><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"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg></span><span class="gnav-label">Báo cáo</span></a><ul class="gnav-sub"><li><a class="gnav-subitem active" aria-current="page" href="#">Tổng quan</a></li><li><a class="gnav-subitem" aria-busy="true" href="#">Theo kênh (đang mở)</a></li></ul></div></div></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Close menu" tabindex="-1"></button><main class="gemboss-platform-main"><div style="padding:24px"><h1 style="margin:0">Tổng quan</h1></div></main></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
769
|
+
<header class="gemboss-platform-topbar">
|
|
770
|
+
<div class="gemboss-topbar-start">
|
|
771
|
+
<button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:">
|
|
772
|
+
<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
|
|
773
|
+
<path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round">
|
|
774
|
+
</path>
|
|
775
|
+
</svg>
|
|
776
|
+
</button>
|
|
777
|
+
<a class="gb-brand" href="#" aria-label="GemFactory home">
|
|
778
|
+
<svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false">
|
|
779
|
+
<g transform="translate(0,0.8) scale(0.31)">
|
|
780
|
+
<polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92">
|
|
781
|
+
</polygon>
|
|
782
|
+
<path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round">
|
|
783
|
+
</path>
|
|
784
|
+
<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">
|
|
785
|
+
</path>
|
|
786
|
+
</g>
|
|
787
|
+
</svg>
|
|
788
|
+
<span class="gb-brand-name">GemFactory</span>
|
|
789
|
+
</a>
|
|
790
|
+
</div>
|
|
791
|
+
<div class="gemboss-topbar-center">
|
|
792
|
+
</div>
|
|
793
|
+
<div class="gemboss-topbar-end">
|
|
794
|
+
</div>
|
|
795
|
+
</header>
|
|
796
|
+
<nav class="icon-nav" aria-label="Main navigation" id=":R0:">
|
|
797
|
+
<div class="gnav-scroll">
|
|
798
|
+
<div class="gnav-group">
|
|
799
|
+
<a class="gnav-item" href="#">
|
|
800
|
+
<span class="gnav-ico">
|
|
801
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
802
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
803
|
+
<rect x="3" y="3.5" width="4" height="13" rx="1.2">
|
|
804
|
+
</rect>
|
|
805
|
+
<rect x="8" y="3.5" width="4" height="9" rx="1.2">
|
|
806
|
+
</rect>
|
|
807
|
+
<rect x="13" y="3.5" width="4" height="6" rx="1.2">
|
|
808
|
+
</rect>
|
|
809
|
+
</g>
|
|
810
|
+
</svg>
|
|
811
|
+
</span>
|
|
812
|
+
<span class="gnav-label">Board</span>
|
|
813
|
+
</a>
|
|
814
|
+
</div>
|
|
815
|
+
<div class="gnav-group">
|
|
816
|
+
<a class="gnav-item" aria-busy="true" href="#">
|
|
817
|
+
<span class="gnav-ico">
|
|
818
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
819
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
820
|
+
<rect x="3.5" y="3" width="13" height="3.5" rx="1">
|
|
821
|
+
</rect>
|
|
822
|
+
<rect x="3.5" y="8.25" width="13" height="3.5" rx="1">
|
|
823
|
+
</rect>
|
|
824
|
+
<rect x="3.5" y="13.5" width="13" height="3.5" rx="1">
|
|
825
|
+
</rect>
|
|
826
|
+
</g>
|
|
827
|
+
</svg>
|
|
828
|
+
</span>
|
|
829
|
+
<span class="gnav-label">Ghép trang (đang mở)</span>
|
|
830
|
+
</a>
|
|
831
|
+
</div>
|
|
832
|
+
<div class="gnav-group active has-active-child">
|
|
833
|
+
<a class="gnav-item active" aria-current="page" href="#">
|
|
834
|
+
<span class="gnav-ico">
|
|
835
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
836
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
837
|
+
<path d="M3 16.5h14">
|
|
838
|
+
</path>
|
|
839
|
+
<rect x="4.5" y="9" width="2.8" height="5.5" rx=".7">
|
|
840
|
+
</rect>
|
|
841
|
+
<rect x="8.6" y="5" width="2.8" height="9.5" rx=".7">
|
|
842
|
+
</rect>
|
|
843
|
+
<rect x="12.7" y="11" width="2.8" height="3.5" rx=".7">
|
|
844
|
+
</rect>
|
|
845
|
+
</g>
|
|
846
|
+
</svg>
|
|
847
|
+
</span>
|
|
848
|
+
<span class="gnav-label">Báo cáo</span>
|
|
849
|
+
</a>
|
|
850
|
+
<ul class="gnav-sub">
|
|
851
|
+
<li>
|
|
852
|
+
<a class="gnav-subitem active" aria-current="page" href="#">Tổng quan</a>
|
|
853
|
+
</li>
|
|
854
|
+
<li>
|
|
855
|
+
<a class="gnav-subitem" aria-busy="true" href="#">Theo kênh (đang mở)</a>
|
|
856
|
+
</li>
|
|
857
|
+
</ul>
|
|
858
|
+
</div>
|
|
859
|
+
</div>
|
|
860
|
+
</nav>
|
|
861
|
+
<button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Close menu" tabindex="-1">
|
|
862
|
+
</button>
|
|
863
|
+
<main class="gemboss-platform-main">
|
|
864
|
+
<div style="padding:24px">
|
|
865
|
+
<h1 style="margin:0">Tổng quan</h1>
|
|
866
|
+
</div>
|
|
867
|
+
</main>
|
|
868
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Link trong trang đang mở (<code>data-gb-pending</code>) <span>PendingLink hoặc kit-plain.js chèn spinner vào trong link</span></figcaption><div class="cat-live"><div class="cat-row"><a href="#" data-gb-pending="inline" aria-busy="true">Bài 412: Hero split<span class="gb-pending-mark" role="status"><span class="ui-sr-only">Loading</span></span></a></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="cat-row">
|
|
869
|
+
<a href="#" data-gb-pending="inline" aria-busy="true">Bài 412: Hero split<span class="gb-pending-mark" role="status">
|
|
870
|
+
<span class="ui-sr-only">Loading</span>
|
|
871
|
+
</span>
|
|
872
|
+
</a>
|
|
873
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Ranh giới tải của một nhóm route (<code>RouteHolding</code> trong <code>loading.jsx</code>) <span>BẮT BUỘC khi dùng NavLink: không có nó thì tải trước không lấy được gì</span></figcaption><div class="cat-live"><div class="gb-route-holding" role="status" aria-busy="true"><span class="ui-sr-only">Loading</span><div class="ui-skeleton" aria-hidden="true"><span class="ui-skeleton__line gb-route-holding__title"></span><span class="ui-skeleton__line"></span><span class="ui-skeleton__line"></span><span class="ui-skeleton__line"></span><span class="ui-skeleton__line"></span></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="gb-route-holding" role="status" aria-busy="true">
|
|
874
|
+
<span class="ui-sr-only">Loading</span>
|
|
875
|
+
<div class="ui-skeleton" aria-hidden="true">
|
|
876
|
+
<span class="ui-skeleton__line gb-route-holding__title">
|
|
877
|
+
</span>
|
|
878
|
+
<span class="ui-skeleton__line">
|
|
879
|
+
</span>
|
|
880
|
+
<span class="ui-skeleton__line">
|
|
881
|
+
</span>
|
|
882
|
+
<span class="ui-skeleton__line">
|
|
883
|
+
</span>
|
|
884
|
+
<span class="ui-skeleton__line">
|
|
885
|
+
</span>
|
|
886
|
+
</div>
|
|
887
|
+
</div></code></pre></details></figure></section>
|
|
755
888
|
<section id="page"><h2>Bề rộng nội dung</h2><p>Rail bên trái, bên phải là một cột có bề rộng tối đa theo bậc của admin: <code>ui-page</code> 900px (<code>--ui-content-max</code>: danh sách, bảng, lưới card, dashboard), <code>--feed</code> 720, <code>--form</code> 662, <code>--canvas</code> 1440 (chỉ khi nội dung đo được là rộng hơn một cột chữ), <code>--full</code> không giới hạn (board, editor; ghi lý do). React: một <code>PageContainer width="form"</code> ngay trong <code>AppShell</code>. Một cap chỉ có tác dụng khi nó NHỎ HƠN chỗ trống thật: ở 1280 chỗ trống là 992. Hai khung dưới vẽ ở 1440, kéo ngang để xem hết.</p><figure class="cat-demo cat-screen"><figcaption>PageContainer width="default" ở 1440: cột 900</figcaption><div class="cat-wide"><iframe title="PageContainer width="default" ở 1440: cột 900" style="height:300px;width:1440px" 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="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" 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"></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></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Close menu" tabindex="-1"></button><main class="gemboss-platform-main"><div class="ui-page"><h1 style="margin:0 0 16px">Board</h1><div class="ui-card"><div class="ui-card__title">#412 Hero split</div><p class="ui-muted">Cột 900px, căn giữa trong chỗ trống bên phải rail.</p></div></div></main></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
756
889
|
<header class="gemboss-platform-topbar">
|
|
757
890
|
<div class="gemboss-topbar-start">
|
|
@@ -1457,7 +1590,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1457
1590
|
<button type="submit" aria-label="Gửi">↑</button>
|
|
1458
1591
|
</form>
|
|
1459
1592
|
</div></code></pre></details></figure></section>
|
|
1460
|
-
<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">
|
|
1593
|
+
<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">27/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">
|
|
1461
1594
|
<aside class="gemboss-assistant-rail">
|
|
1462
1595
|
<div class="gemboss-assistant-rail-top">
|
|
1463
1596
|
<button type="button" class="gemboss-assistant-newchat" title="Phiên mới">
|
|
@@ -1506,7 +1639,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1506
1639
|
</svg>
|
|
1507
1640
|
<span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span>
|
|
1508
1641
|
</span>
|
|
1509
|
-
<span class="gemboss-assistant-thread-meta">
|
|
1642
|
+
<span class="gemboss-assistant-thread-meta">27/8/2026</span>
|
|
1510
1643
|
</button>
|
|
1511
1644
|
<div class="gemboss-assistant-thread-actions">
|
|
1512
1645
|
<button type="button" class="gemboss-assistant-thread-act" aria-label="Options">
|