@lark-apaas/coding-template-nestjs-react-fullstack 0.1.0-alpha.1

package/template/client/src/components/business-ui/user-profile/error-image.tsx

@@ -0,0 +1,302 @@
+export function ErrorImage() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="120"
+      height="120"
+      viewBox="0 0 120 120"
+      fill="none"
+    >
+      <path
+        d="M60 110C87.6142 110 110 87.6142 110 60C110 32.3858 87.6142 10 60 10C32.3858 10 10 32.3858 10 60C10 87.6142 32.3858 110 60 110Z"
+        fill="url(#paint0_linear_27256_157)"
+        fillOpacity="0.15"
+      />
+      <path
+        d="M27.5024 98H92.4976C103.211 88.8296 110 75.2077 110 60C110 45.8619 104.132 33.0944 94.6988 24H25.3012C23.4743 25.7613 21.781 27.6604 20.2383 29.6806V90.3194C22.3837 93.1287 24.8201 95.7039 27.5024 98Z"
+        fill="url(#paint1_linear_27256_157)"
+      />
+      <path
+        d="M94.6988 24H25.2383C22.4769 24 20.2383 26.2386 20.2383 29V37.3336H104.579C102.039 32.3483 98.6878 27.8458 94.6988 24Z"
+        fill="url(#paint2_linear_27256_157)"
+      />
+      <foreignObject x="9.22852" y="45.2422" width="49.614" height="56.7302">
+        <div
+          style={{
+            backdropFilter: 'blur(3px)',
+            clipPath: 'url(#bgblur_0_27256_157_clip_path)',
+            height: '100%',
+            width: '100%',
+          }}
+        />
+      </foreignObject>
+      <g filter="url(#filter0_d_27256_157)" data-figma-bg-blur-radius="6">
+        <path
+          d="M52.8426 95.9724L15.2285 95.703L27.7349 55.8064C28.1529 54.4807 28.9866 53.3247 30.1125 52.5094C31.2488 51.6857 32.6163 51.2422 34.0197 51.2422C35.4231 51.2422 36.7907 51.6857 37.9269 52.5094C39.0558 53.3251 39.8901 54.4847 40.3046 55.8143L52.8426 95.9724Z"
+          fill="url(#paint3_linear_27256_157)"
+          fillOpacity="0.9"
+          shapeRendering="crispEdges"
+        />
+      </g>
+      <foreignObject x="15.9766" y="73.7109" width="36.05" height="13.0391">
+        <div
+          style={{
+            backdropFilter: 'blur(1.5px)',
+            clipPath: 'url(#bgblur_1_27256_157_clip_path)',
+            height: '100%',
+            width: '100%',
+          }}
+        />
+      </foreignObject>
+      <g filter="url(#filter1_i_27256_157)" data-figma-bg-blur-radius="3">
+        <path
+          d="M49.0266 83.75H18.9766V83.7463L21.1819 76.7109H46.8289L49.0266 83.75Z"
+          fill="url(#paint4_linear_27256_157)"
+          fillOpacity="0.8"
+        />
+      </g>
+      <foreignObject x="21.0864" y="57.4062" width="25.8496" height="13.0391">
+        <div
+          style={{
+            backdropFilter: 'blur(1.5px)',
+            clipPath: 'url(#bgblur_2_27256_157_clip_path)',
+            height: '100%',
+            width: '100%',
+          }}
+        />
+      </foreignObject>
+      <g filter="url(#filter2_i_27256_157)" data-figma-bg-blur-radius="3">
+        <path
+          d="M43.936 67.4453H24.0864L26.293 60.4062H41.7383L43.936 67.4453Z"
+          fill="url(#paint5_linear_27256_157)"
+          fillOpacity="0.8"
+        />
+      </g>
+      <path
+        d="M9.19531 97.0234C9.19531 95.7463 10.2307 94.7109 11.5078 94.7109H56.1504C57.4275 94.7109 58.4629 95.7463 58.4629 97.0234C58.4629 98.3006 57.4275 99.3359 56.1504 99.3359H11.5078C10.2307 99.3359 9.19531 98.3006 9.19531 97.0234Z"
+        fill="url(#paint6_linear_27256_157)"
+      />
+      <path
+        d="M73.2383 83C63.2974 83 55.2383 74.9409 55.2383 65C55.2383 55.0591 63.2974 47 73.2383 47C83.1792 47 91.2383 55.0591 91.2383 65C91.2383 74.9409 83.1792 83 73.2383 83Z"
+        fill="url(#paint7_linear_27256_157)"
+      />
+      <path
+        d="M65.8172 59.895L70.9248 65.0026L65.8172 70.1102C65.1781 70.7493 65.1781 71.7854 65.8172 72.4244C66.4562 73.0634 67.4923 73.0634 68.1313 72.4244L73.239 67.3168L78.3466 72.4244C78.9856 73.0634 80.0217 73.0634 80.6607 72.4244C81.2998 71.7854 81.2998 70.7493 80.6607 70.1102L75.5531 65.0026L80.6607 59.895C81.2998 59.256 81.2998 58.2199 80.6607 57.5808C80.0217 56.9418 78.9856 56.9418 78.3466 57.5808L73.239 62.6885L68.1313 57.5808C67.4923 56.9418 66.4562 56.9418 65.8172 57.5808C65.1781 58.2199 65.1781 59.256 65.8172 59.895Z"
+        fill="#F5F6F7"
+      />
+      <defs>
+        <filter
+          id="filter0_d_27256_157"
+          x="9.22852"
+          y="45.2422"
+          width="49.614"
+          height="56.7302"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="2" />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_27256_157"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_27256_157"
+            result="shape"
+          />
+        </filter>
+        <clipPath
+          id="bgblur_0_27256_157_clip_path"
+          transform="translate(-9.22852 -45.2422)"
+        >
+          <path d="M52.8426 95.9724L15.2285 95.703L27.7349 55.8064C28.1529 54.4807 28.9866 53.3247 30.1125 52.5094C31.2488 51.6857 32.6163 51.2422 34.0197 51.2422C35.4231 51.2422 36.7907 51.6857 37.9269 52.5094C39.0558 53.3251 39.8901 54.4847 40.3046 55.8143L52.8426 95.9724Z" />
+        </clipPath>
+        <filter
+          id="filter1_i_27256_157"
+          x="15.9766"
+          y="73.7109"
+          width="36.05"
+          height="13.0391"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="1" dy="1" />
+          <feGaussianBlur stdDeviation="2.5" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_27256_157"
+          />
+        </filter>
+        <clipPath
+          id="bgblur_1_27256_157_clip_path"
+          transform="translate(-15.9766 -73.7109)"
+        >
+          <path d="M49.0266 83.75H18.9766V83.7463L21.1819 76.7109H46.8289L49.0266 83.75Z" />
+        </clipPath>
+        <filter
+          id="filter2_i_27256_157"
+          x="21.0864"
+          y="57.4062"
+          width="25.8496"
+          height="13.0391"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="1" dy="1" />
+          <feGaussianBlur stdDeviation="2.5" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_27256_157"
+          />
+        </filter>
+        <clipPath
+          id="bgblur_2_27256_157_clip_path"
+          transform="translate(-21.0864 -57.4062)"
+        >
+          <path d="M43.936 67.4453H24.0864L26.293 60.4062H41.7383L43.936 67.4453Z" />
+        </clipPath>
+        <linearGradient
+          id="paint0_linear_27256_157"
+          x1="34.5399"
+          y1="10"
+          x2="104.021"
+          y2="36.7684"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D0D3D6" />
+          <stop offset="1" stopColor="#8F959E" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_27256_157"
+          x1="42.2657"
+          y1="24"
+          x2="101.052"
+          y2="51.472"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#EFF0F1" />
+          <stop offset="1" stopColor="#D0D3D6" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_27256_157"
+          x1="40.9355"
+          y1="24"
+          x2="50.6346"
+          y2="47.6361"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D0D3D6" />
+          <stop offset="1" stopColor="#BBBFC4" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_27256_157"
+          x1="28.5527"
+          y1="62.2286"
+          x2="43.9116"
+          y2="64.8991"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D0D3D6" />
+          <stop offset="1" stopColor="#8F959E" />
+        </linearGradient>
+        <linearGradient
+          id="paint4_linear_27256_157"
+          x1="30.8635"
+          y1="76.7109"
+          x2="37.6562"
+          y2="83.75"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="white" />
+          <stop offset="1" stopColor="#EFF0F1" />
+        </linearGradient>
+        <linearGradient
+          id="paint5_linear_27256_157"
+          x1="29.8238"
+          y1="60.4062"
+          x2="38.0615"
+          y2="67.4453"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="white" />
+          <stop offset="1" stopColor="#EFF0F1" />
+        </linearGradient>
+        <linearGradient
+          id="paint6_linear_27256_157"
+          x1="9.19531"
+          y1="97.0239"
+          x2="19.1019"
+          y2="116.771"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D0D3D6" />
+          <stop offset="1" stopColor="#8F959E" />
+        </linearGradient>
+        <linearGradient
+          id="paint7_linear_27256_157"
+          x1="64.0727"
+          y1="47"
+          x2="89.0859"
+          y2="56.6366"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#BBBFC4" />
+          <stop offset="1" stopColor="#8F959E" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

package/template/client/src/components/business-ui/user-profile/user-external-script.ts

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+
+export type ExternalScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
+
+export interface UseExternalScriptOptions {
+  removeOnUnmount?: boolean;
+  attributes?: Record<string, string>;
+  nonce?: string;
+  onloadCallback?: () => void;
+}
+
+/**
+ * 在组件生命周期内按需注入外链脚本（追加到 <body> 末尾），并返回加载状态。
+ * - 避免重复注入：如果页面已存在同 src 的脚本，直接标记为 ready。
+ * - 支持 CSP：可通过 nonce 传入。
+ * - 可选清理：removeOnUnmount=true 时卸载时移除脚本。
+ */
+export function useExternalScript(
+  src: string,
+  options: UseExternalScriptOptions = {},
+): ExternalScriptStatus {
+  const [status, setStatus] = useState<ExternalScriptStatus>('idle');
+
+  useEffect(() => {
+    if (!src) return;
+
+    // 如果已经存在同 src 的脚本，直接认为已就绪
+    const existing = document.querySelector<HTMLScriptElement>(
+      `script[src="${src}"]`,
+    );
+    if (existing) {
+      queueMicrotask(() => {
+        setStatus('ready');
+      });
+      return;
+    }
+    // 在 effect 中避免同步 setState，使用微任务调度，防止级联渲染警告
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (!cancelled) setStatus('loading');
+    });
+    const script = document.createElement('script');
+    script.src = src;
+    script.async = true;
+    script.defer = true;
+    script.crossOrigin = 'anonymous';
+    if (options.nonce) script.nonce = options.nonce;
+    Object.entries(options.attributes ?? {}).forEach(([k, v]) => {
+      script.setAttribute(k, v);
+    });
+
+    script.onload = () => {
+      if (!cancelled) setStatus('ready');
+      if (options.onloadCallback) {
+        options.onloadCallback();
+      }
+    };
+
+    script.onerror = () => {
+      if (!cancelled) setStatus('error');
+    };
+
+    document.body.append(script);
+    return () => {
+      cancelled = true;
+      if (options.removeOnUnmount) {
+        script.remove();
+      }
+    };
+  }, [options, src]);
+
+  return status;
+}