soybean-admin/src/plugins/loading.ts

// @unocss-include
import { getColorPalette, getRgb } from '@sa/color';
import { DARK_CLASS } from '@/constants/app';
import { localStg } from '@/utils/storage';
import { toggleHtmlClass } from '@/utils/common';
import { $t } from '@/locales';

export function setupLoading() {
  const themeColor = localStg.get('themeColor') || '#646cff';
  const darkMode = localStg.get('darkMode') || false;
  const palette = getColorPalette(themeColor);

  const { r, g, b } = getRgb(themeColor);

  const primaryColor = `--primary-color: ${r} ${g} ${b}`;

  const svgCssVars = Array.from(palette.entries())
    .map(([key, value]) => `--logo-color-${key}: ${value}`)
    .join(';');

  const cssVars = `${primaryColor}; ${svgCssVars}`;

  if (darkMode) {
    toggleHtmlClass(DARK_CLASS).add();
  }

  const loadingClasses = [
    'left-0 top-0',
    'left-0 bottom-0 animate-delay-500',
    'right-0 top-0 animate-delay-1000',
    'right-0 bottom-0 animate-delay-1500'
  ];

  const dot = loadingClasses
    .map(item => {
      return `<div class="absolute w-16px h-16px bg-primary rounded-8px animate-pulse ${item}"></div>`;
    })
    .join('\n');

  const loading = `
<div class="fixed-center flex-col bg-layout" style="${cssVars}">
  <div class="w-128px h-128px">
    ${getLogoSvg()}
  </div>
  <div class="w-56px h-56px my-36px">
    <div class="relative h-full animate-spin">
      ${dot}
    </div>
  </div>
  <h2 class="text-28px font-500 text-primary">${$t('system.title')}</h2>
</div>`;

  const app = document.getElementById('app');

  if (app) {
    app.innerHTML = loading;
  }
}

function getLogoSvg() {
  const logoSvg = `<svg
        width="100%"
        height="100%"
        version="1.1"
        viewBox="0 0 1000 1000"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <g>
          <path
            d="M 200,866 C 100,866 50,779.4 100,692.8 L 200,519.6 C 220,485 240,490 265,499.6 S 360,542.68 360,542.68 C 480.5,601 498,642.5 500,720 C 498,811 462,856 420,866"
            fill="url(#LinearGradient)"
            fill-rule="nonzero"
            opacity="1"
            stroke="none"
          />
          <path
            d="M 420,866 C 455,861 478,846 500,827 C 614,696 615,597 500,517 C 394,444 333,374 380,207.82 L 260,415.67 C 240.22,450 254.37,465.1 275.28,481.79 S 360,542.68 360,542.68 C 480.5,601 498,642.5 500,720 C 498,811 462,856 420,866"
            fill="url(#LinearGradient_2)"
            fill-rule="nonzero"
            opacity="1"
            stroke="none"
          />
          <path
            d="M 500,517 C 394,444 333,374 380,207.82 L 400,173.2 C 367,295 421,350 603,428 C 572,440 524,474 500,517"
            fill="url(#LinearGradient_3)"
            fill-rule="nonzero"
            opacity="1"
            stroke="none"
          />
          <path
            d="M 500,827 L 660,660 C 738,589 710,482 603,428 C 572,440 524,474 500,517 C 615,597 614,696 500,827"
            fill="url(#LinearGradient_4)"
            fill-rule="nonzero"
            opacity="1"
            stroke="none"
          />
          <path
            d="M 400,173.2 C 367,295 421,350 603,428 C 690,389, 750,445 788,500 L 600,173.2 C 550,86.6 450,86.6 400,173.2"
            fill="url(#LinearGradient_5)"
            fill-rule="nonzero"
            opacity="1"
            stroke="none"
          />
          <path
            d="M 500,827 L 660,660 C 738,589 710,482 603,428 C 690,389, 750,445 788,500 C 816,554 797,606 750,640 L 500,827"
            fill="url(#LinearGradient_6)"
            fill-rule="nonzero"
            opacity="1"
            stroke="none"
          />
          <path
            d="M 788,500 C 816,554 797,606 750,640 L 500,827 C 497,851 513,862 540,866 L 800,866 C 900,866 950,779.4 900,692.8 L 788,500"
            fill="url(#LinearGradient_7)"
            fill-rule="nonzero"
            opacity="1"
            stroke="none"
          />
        </g>
        <defs>
          <linearGradient
            id="LinearGradient"
            gradientTransform="matrix(104.391 -73.3432 73.3432 104.391 277.441 710.122)"
            gradientUnits="userSpaceOnUse"
            x1="0"
            x2="1"
            y1="0"
            y2="0"
          >
            <stop offset="0" stop-color="var(--logo-color-700)" />
            <stop offset="1" stop-color="var(--logo-color-600)" />
          </linearGradient>
          <linearGradient
            id="LinearGradient_2"
            gradientTransform="matrix(-173.747 557.324 -557.324 -173.747 508.829 258.172)"
            gradientUnits="userSpaceOnUse"
            x1="0"
            x2="1"
            y1="0"
            y2="0"
          >
            <stop offset="0" stop-color="var(--logo-color-300)" />
            <stop offset="1" stop-color="var(--logo-color-500)" />
          </linearGradient>
          <linearGradient
            id="LinearGradient_3"
            gradientTransform="matrix(157.951 295.666 -295.666 157.951 382.944 193.642)"
            gradientUnits="userSpaceOnUse"
            x1="0"
            x2="1"
            y1="0"
            y2="0"
          >
            <stop offset="0" stop-color="var(--logo-color-600)" />
            <stop offset="1" stop-color="var(--logo-color-700)" />
          </linearGradient>
          <linearGradient
            id="LinearGradient_4"
            gradientTransform="matrix(-44.3023 219.578 -219.578 -44.3023 619.69 469.652)"
            gradientUnits="userSpaceOnUse"
            x1="0"
            x2="1"
            y1="0"
            y2="0"
          >
            <stop offset="0" stop-color="var(--logo-color-400)" />
            <stop offset="1" stop-color="var(--logo-color-600)" />
          </linearGradient>
          <linearGradient
            id="LinearGradient_5"
            gradientTransform="matrix(125.52 334.256 -334.256 125.52 539.723 235.139)"
            gradientUnits="userSpaceOnUse"
            x1="0"
            x2="1"
            y1="0"
            y2="0"
          >
            <stop offset="0" stop-color="var(--logo-color-500)" />
            <stop offset="1" stop-color="var(--logo-color-300)" />
          </linearGradient>
          <linearGradient
            id="LinearGradient_6"
            gradientTransform="matrix(-241.23 357.206 -357.206 -241.23 754.054 449.312)"
            gradientUnits="userSpaceOnUse"
            x1="0"
            x2="1"
            y1="0"
            y2="0"
          >
            <stop offset="0" stop-color="var(--logo-color-300)" />
            <stop offset="1" stop-color="var(--logo-color-500)" />
          </linearGradient>
          <linearGradient
            id="LinearGradient_7"
            gradientTransform="matrix(125.978 210.065 -210.065 125.978 596.433 613.665)"
            gradientUnits="userSpaceOnUse"
            x1="0"
            x2="1"
            y1="0"
            y2="0"
          >
            <stop offset="0" stop-color="var(--logo-color-700)" />
            <stop offset="1" stop-color="var(--logo-color-600)" />
          </linearGradient>
        </defs>
      </svg>
  `;

  return logoSvg;
}