@goplusvn/core 0.1.74 → 0.1.75

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@goplusvn/core",
   "description": "GoPlusVN Platform Kit - ERP kernel: layout, RBAC, CRUD, multi-tenant, system pages",
-  "version": "0.1.74",
+  "version": "0.1.75",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

package/src/ui/auth/auth-layout.tsx

@@ -53,11 +53,11 @@ export function Auth({
     >
       <div className="flex flex-col relative bg-background">
         <div className="absolute top-0 inset-x-0 flex justify-between items-center gap-2 px-4 py-2.5 z-50">
-          {/* Logo chỉ đứng đây khi KHÔNG có nửa phải (màn hẹp) — trên md tấm
-              ảnh đã mang logo + tên công ty rồi, lặp lại là thừa. */}
+          {/* Logo + tên công ty chỉ đứng ĐÚNG một chỗ: góc trên trái. Nửa phải
+              là hoa văn thuần, không mang chữ — nhồi logo lên đó là lặp. */}
           <Link
             href={ensureLocalizedPathname("/", locale)}
-            className="flex md:hidden items-center gap-2 text-foreground font-black"
+            className="flex items-center gap-2 text-foreground font-black"
           >
             {branding?.logo ? (
               <Image
@@ -96,6 +96,65 @@ export function Auth({
   );
 }
 
+/*
+ * Hoa văn khối lập phương đẳng cự (isometric) — hình học của tấm nền đăng nhập.
+ *
+ * Cạnh `a`; mỗi khối là một lục giác đều cộng ba nan từ tâm ra ba đỉnh, xếp kiểu
+ * tổ ong thì thành một mặt phẳng toàn khối hộp. Chọn hoa văn này vì nó CÓ NGHĨA
+ * với phần mềm quản trị: kiện hàng xếp kho, mô-đun ghép lại thành hệ thống —
+ * không phải mảng loang trang trí cho có.
+ *
+ * Toạ độ tính sẵn ở mức mô-đun (không phụ thuộc render) để khỏi tính lại mỗi lần
+ * vẽ và để sai số làm rời mạch hoa văn thì thấy ngay ở đây.
+ */
+const CUBE_A = 60;
+const CUBE_DX = 51.96; // a·√3/2 — nửa bề ngang lục giác
+const CUBE_DY = 30; // a/2
+const CUBE_TILE_W = 103.92; // a·√3
+const CUBE_TILE_H = 180; // 3a — hai hàng tổ ong
+
+function cubeAt(cx: number, cy: number) {
+  const { round } = Math;
+  const r = (n: number) => round(n * 100) / 100;
+  const [t, b] = [r(cy - CUBE_A), r(cy + CUBE_A)];
+  const [l, rt] = [r(cx - CUBE_DX), r(cx + CUBE_DX)];
+  const [up, dn] = [r(cy - CUBE_DY), r(cy + CUBE_DY)];
+  const x = r(cx);
+  return (
+    // Viền lục giác + ba nan tâm → ảo giác khối hộp.
+    `M${x} ${t}L${rt} ${up}L${rt} ${dn}L${x} ${b}L${l} ${dn}L${l} ${up}Z` +
+    `M${x} ${t}L${x} ${r(cy)}M${x} ${r(cy)}L${l} ${dn}M${x} ${r(cy)}L${rt} ${dn}`
+  );
+}
+
+function cubeTopFaceAt(cx: number, cy: number) {
+  return `M${cx} ${cy - CUBE_A}L${cx + CUBE_DX} ${cy - CUBE_DY}L${cx} ${cy}L${cx - CUBE_DX} ${cy - CUBE_DY}Z`;
+}
+
+// Ô lặp chứa hai hàng tổ ong; vẽ thêm tâm tràn ra ngoài mép để phần bị cắt được
+// ô kế bên nối lại — thiếu chúng là hoa văn đứt thành từng mảng vuông.
+const CUBE_TILE_CENTERS: Array<[number, number]> = [
+  [0, 0],
+  [CUBE_TILE_W, 0],
+  [0, CUBE_TILE_H],
+  [CUBE_TILE_W, CUBE_TILE_H],
+  [CUBE_TILE_W / 2, CUBE_TILE_H / 2],
+  [CUBE_TILE_W / 2, -CUBE_TILE_H / 2],
+  [CUBE_TILE_W / 2, CUBE_TILE_H * 1.5],
+];
+
+// Vài mặt trên được tô đậm hơn, xếp thành hai vệt chéo song song — chỗ sáng chỗ
+// tối làm hoa văn có nhịp, thay vì trải đều một mức xám chết.
+const CUBE_HIGHLIGHTS: Array<[number, number, number]> = [
+  [311.77, 180, 0.1],
+  [363.73, 270, 0.16],
+  [415.69, 360, 0.12],
+  [467.65, 450, 0.07],
+  [155.88, 630, 0.09],
+  [207.85, 720, 0.14],
+  [259.8, 810, 0.08],
+];
+
 /**
  * Nền vector mặc định cho nửa phải khi app chưa có ảnh chụp thật.
  *
@@ -103,13 +162,8 @@ export function Auth({
  * thương hiệu là nền đổi theo, không app nào phải ship thêm ảnh, và không có
  * bitmap nào để phóng to bị vỡ.
  *
- * Hình khối cố ý ở mức kỹ thuật — lưới như giấy kẻ ô và mấy cung tròn quét từ
- * góc trên phải (tâm nằm NGOÀI khung nên thấy nét quét chứ không thành cái bia
- * bắn) — thay vì mấy vệt gradient loang: loang là thứ nhìn phát biết đồ máy
- * sinh, còn lưới + cung tròn là ngôn ngữ của bản vẽ kỹ thuật, hợp phần mềm quản
- * trị và không lỗi mốt.
- *
- * Mọi độ mờ đều dưới 20%: đây là nền, phần đọc được phải là logo + tên công ty.
+ * KHÔNG có chữ hay logo ở đây — logo đã đứng ở góc trên trái, đặt thêm một cái
+ * nữa lên hoa văn là lặp. Tấm này thuần hình.
  */
 export function AuthBrandPattern({ className }: { className?: string }) {
   return (
@@ -122,31 +176,45 @@ export function AuthBrandPattern({ className }: { className?: string }) {
     >
       <defs>
         <pattern
-          id="goerp-auth-grid"
-          width="44"
-          height="44"
+          id="goerp-auth-cubes"
+          width={CUBE_TILE_W}
+          height={CUBE_TILE_H}
           patternUnits="userSpaceOnUse"
         >
-          <path
-            d="M44 0H0V44"
-            stroke="currentColor"
-            strokeOpacity="0.08"
-            strokeWidth="1"
-          />
+          {CUBE_TILE_CENTERS.map(([cx, cy]) => (
+            <path
+              key={`${cx}-${cy}`}
+              d={cubeAt(cx, cy)}
+              stroke="currentColor"
+              strokeOpacity="0.14"
+              strokeWidth="1.25"
+            />
+          ))}
         </pattern>
-        <radialGradient id="goerp-auth-glow" cx="0.82" cy="0.1" r="0.8">
-          <stop offset="0" stopColor="currentColor" stopOpacity="0.16" />
+        {/* Ánh sáng chếch từ trên phải: hoa văn phẳng đều thì nhìn như giấy dán
+            tường, có vệt sáng mới ra chiều sâu. */}
+        <radialGradient id="goerp-auth-glow" cx="0.78" cy="0.12" r="0.85">
+          <stop offset="0" stopColor="currentColor" stopOpacity="0.14" />
           <stop offset="1" stopColor="currentColor" stopOpacity="0" />
         </radialGradient>
+        {/* Đáy tối dần để khối chân trang không bị hoa văn cắn vào. */}
+        <linearGradient id="goerp-auth-foot" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0.55" stopColor="#000" stopOpacity="0" />
+          <stop offset="1" stopColor="#000" stopOpacity="0.22" />
+        </linearGradient>
       </defs>
-      <rect width="600" height="900" fill="url(#goerp-auth-grid)" />
-      <rect width="600" height="900" fill="url(#goerp-auth-glow)" />
-      <g stroke="currentColor" fill="none">
-        <circle cx="640" cy="-60" r="280" strokeOpacity="0.16" />
-        <circle cx="640" cy="-60" r="430" strokeOpacity="0.12" />
-        <circle cx="640" cy="-60" r="600" strokeOpacity="0.08" />
-        <circle cx="640" cy="-60" r="790" strokeOpacity="0.05" />
+      <rect width="600" height="900" fill="url(#goerp-auth-cubes)" />
+      <g fill="currentColor">
+        {CUBE_HIGHLIGHTS.map(([cx, cy, opacity]) => (
+          <path
+            key={`${cx}-${cy}`}
+            d={cubeTopFaceAt(cx, cy)}
+            fillOpacity={opacity}
+          />
+        ))}
       </g>
+      <rect width="600" height="900" fill="url(#goerp-auth-glow)" />
+      <rect width="600" height="900" fill="url(#goerp-auth-foot)" />
     </svg>
   );
 }
@@ -158,12 +226,13 @@ interface AuthImageProps extends ComponentProps<"div"> {
 }
 
 /**
- * Nửa phải trang đăng nhập.
+ * Nửa phải trang đăng nhập. THUẦN HÌNH — không logo, không tên công ty, không
+ * khẩu hiệu: thương hiệu đã đứng ở góc trên trái, in lại lần nữa ở đây là lặp và
+ * làm màn đăng nhập trông như trang quảng cáo.
  *
- * Hai trạng thái, cùng một khối logo + tên công ty ở dưới:
- *  - CÓ ảnh: ảnh phủ kín, một lớp tối chuyển dần từ đáy lên để chữ đè lên còn
- *    đọc được (nền ảnh không kiểm soát được ⇒ không có lớp này thì chữ trắng
- *    rơi vào vùng sáng là mất hút).
+ * Hai trạng thái:
+ *  - CÓ ảnh: ảnh chụp thật phủ kín, một lớp tối rất nhẹ để mép ảnh không chọi
+ *    với cột nhập liệu bên trái.
  *  - KHÔNG ảnh: nền `--primary` của tenant + `AuthBrandPattern`. Đây là mặc
  *    định, KHÔNG phải trạng thái lỗi — thà một tấm màu thương hiệu sạch còn hơn
  *    ảnh stock/AI dùng chung cho mọi khách.
@@ -177,7 +246,6 @@ export function AuthImage({
   imgSrc,
   ...props
 }: AuthImageProps) {
-  const branding = useOptionalTenant()?.branding;
   const [imageBroken, setImageBroken] = useState(false);
   const hasPhoto = Boolean(imgSrc) && !imageBroken;
 
@@ -210,9 +278,11 @@ export function AuthImage({
             onError={() => setImageBroken(true)}
             className={cn("object-cover", imageClassName)}
           />
+          {/* Lớp tối nhẹ thôi: không còn chữ nào đè lên ảnh, nó chỉ để ảnh khỏi
+              chói hơn hẳn cột nhập liệu bên trái. */}
           <div
             aria-hidden
-            className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/35 to-black/10"
+            className="absolute inset-0 bg-gradient-to-t from-black/45 via-black/10 to-transparent"
           />
         </>
       ) : (
@@ -226,55 +296,9 @@ export function AuthImage({
             aria-hidden
             className="absolute inset-0 hidden bg-black/55 dark:block"
           />
-          <AuthBrandPattern className="text-primary-foreground dark:text-white" />
+          <AuthBrandPattern className="motion-safe:animate-status-in text-primary-foreground dark:text-white" />
         </>
       )}
-
-      <div
-        className={cn(
-          "absolute inset-0 flex flex-col p-10",
-          hasPhoto ? "justify-end" : "justify-center",
-        )}
-      >
-        <div
-          className={cn(
-            "motion-safe:animate-status-in flex flex-col items-start gap-4",
-            hasPhoto ? "text-white" : "text-primary-foreground dark:text-white",
-          )}
-        >
-          {branding?.logo ? (
-            // Logo khách phần lớn là nét sẫm trên nền trong suốt ⇒ đặt trên tấm
-            // trắng đục để nó không tan vào ảnh tối hay nền màu.
-            <span className="inline-flex rounded-xl bg-white p-3 shadow-sm">
-              <Image
-                src={branding.logo}
-                alt={branding.companyName || "Logo"}
-                height={40}
-                width={160}
-                className="h-10 w-auto object-contain"
-                unoptimized
-              />
-            </span>
-          ) : null}
-          <div className="space-y-1.5">
-            <p className="text-3xl font-semibold leading-tight tracking-tight text-balance">
-              {branding?.companyName || "GoERP"}
-            </p>
-            {branding?.tagline ? (
-              <p
-                className={cn(
-                  "max-w-sm text-balance text-sm leading-relaxed",
-                  hasPhoto
-                    ? "text-white/80"
-                    : "text-primary-foreground/80 dark:text-white/80",
-                )}
-              >
-                {branding.tagline}
-              </p>
-            ) : null}
-          </div>
-        </div>
-      </div>
     </div>
   );
 }