更新前端静态网页获取方式，放弃使用后端获取api

frontend/node_modules/react-hot-toast/src/components/checkmark.tsx

@@ -0,0 +1,61 @@
+import { styled, keyframes } from 'goober';
+
+const circleAnimation = keyframes`
+from {
+  transform: scale(0) rotate(45deg);
+	opacity: 0;
+}
+to {
+  transform: scale(1) rotate(45deg);
+	opacity: 1;
+}`;
+
+const checkmarkAnimation = keyframes`
+0% {
+	height: 0;
+	width: 0;
+	opacity: 0;
+}
+40% {
+  height: 0;
+	width: 6px;
+	opacity: 1;
+}
+100% {
+  opacity: 1;
+  height: 10px;
+}`;
+
+export interface CheckmarkTheme {
+  primary?: string;
+  secondary?: string;
+}
+
+export const CheckmarkIcon = styled('div')<CheckmarkTheme>`
+  width: 20px;
+  opacity: 0;
+  height: 20px;
+  border-radius: 10px;
+  background: ${(p) => p.primary || '#61d345'};
+  position: relative;
+  transform: rotate(45deg);
+
+  animation: ${circleAnimation} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+    forwards;
+  animation-delay: 100ms;
+  &:after {
+    content: '';
+    box-sizing: border-box;
+    animation: ${checkmarkAnimation} 0.2s ease-out forwards;
+    opacity: 0;
+    animation-delay: 200ms;
+    position: absolute;
+    border-right: 2px solid;
+    border-bottom: 2px solid;
+    border-color: ${(p) => p.secondary || '#fff'};
+    bottom: 6px;
+    left: 6px;
+    height: 10px;
+    width: 6px;
+  }
+`;

frontend/node_modules/react-hot-toast/src/components/error.tsx

@@ -0,0 +1,71 @@
+import { styled, keyframes } from 'goober';
+
+const circleAnimation = keyframes`
+from {
+  transform: scale(0) rotate(45deg);
+	opacity: 0;
+}
+to {
+ transform: scale(1) rotate(45deg);
+  opacity: 1;
+}`;
+
+const firstLineAnimation = keyframes`
+from {
+  transform: scale(0);
+  opacity: 0;
+}
+to {
+  transform: scale(1);
+  opacity: 1;
+}`;
+
+const secondLineAnimation = keyframes`
+from {
+  transform: scale(0) rotate(90deg);
+	opacity: 0;
+}
+to {
+  transform: scale(1) rotate(90deg);
+	opacity: 1;
+}`;
+
+export interface ErrorTheme {
+  primary?: string;
+  secondary?: string;
+}
+
+export const ErrorIcon = styled('div')<ErrorTheme>`
+  width: 20px;
+  opacity: 0;
+  height: 20px;
+  border-radius: 10px;
+  background: ${(p) => p.primary || '#ff4b4b'};
+  position: relative;
+  transform: rotate(45deg);
+
+  animation: ${circleAnimation} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+    forwards;
+  animation-delay: 100ms;
+
+  &:after,
+  &:before {
+    content: '';
+    animation: ${firstLineAnimation} 0.15s ease-out forwards;
+    animation-delay: 150ms;
+    position: absolute;
+    border-radius: 3px;
+    opacity: 0;
+    background: ${(p) => p.secondary || '#fff'};
+    bottom: 9px;
+    left: 4px;
+    height: 2px;
+    width: 12px;
+  }
+
+  &:before {
+    animation: ${secondLineAnimation} 0.15s ease-out forwards;
+    animation-delay: 180ms;
+    transform: rotate(90deg);
+  }
+`;

frontend/node_modules/react-hot-toast/src/components/loader.tsx

@@ -0,0 +1,26 @@
+import { styled, keyframes } from 'goober';
+
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+export interface LoaderTheme {
+  primary?: string;
+  secondary?: string;
+}
+
+export const LoaderIcon = styled('div')<LoaderTheme>`
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
+  border: 2px solid;
+  border-radius: 100%;
+  border-color: ${(p) => p.secondary || '#e0e0e0'};
+  border-right-color: ${(p) => p.primary || '#616161'};
+  animation: ${rotate} 1s linear infinite;
+`;

frontend/node_modules/react-hot-toast/src/components/toast-bar.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { styled, keyframes } from 'goober';
+
+import { Toast, ToastPosition, resolveValue, Renderable } from '../core/types';
+import { ToastIcon } from './toast-icon';
+import { prefersReducedMotion } from '../core/utils';
+
+const enterAnimation = (factor: number) => `
+0% {transform: translate3d(0,${factor * -200}%,0) scale(.6); opacity:.5;}
+100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
+`;
+
+const exitAnimation = (factor: number) => `
+0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}
+100% {transform: translate3d(0,${factor * -150}%,-1px) scale(.6); opacity:0;}
+`;
+
+const fadeInAnimation = `0%{opacity:0;} 100%{opacity:1;}`;
+const fadeOutAnimation = `0%{opacity:1;} 100%{opacity:0;}`;
+
+const ToastBarBase = styled('div')`
+  display: flex;
+  align-items: center;
+  background: #fff;
+  color: #363636;
+  line-height: 1.3;
+  will-change: transform;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
+  max-width: 350px;
+  pointer-events: auto;
+  padding: 8px 10px;
+  border-radius: 8px;
+`;
+
+const Message = styled('div')`
+  display: flex;
+  justify-content: center;
+  margin: 4px 10px;
+  color: inherit;
+  flex: 1 1 auto;
+  white-space: pre-line;
+`;
+
+interface ToastBarProps {
+  toast: Toast;
+  position?: ToastPosition;
+  style?: React.CSSProperties;
+  children?: (components: {
+    icon: Renderable;
+    message: Renderable;
+  }) => Renderable;
+}
+
+const getAnimationStyle = (
+  position: ToastPosition,
+  visible: boolean
+): React.CSSProperties => {
+  const top = position.includes('top');
+  const factor = top ? 1 : -1;
+
+  const [enter, exit] = prefersReducedMotion()
+    ? [fadeInAnimation, fadeOutAnimation]
+    : [enterAnimation(factor), exitAnimation(factor)];
+
+  return {
+    animation: visible
+      ? `${keyframes(enter)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`
+      : `${keyframes(exit)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`,
+  };
+};
+
+export const ToastBar: React.FC<ToastBarProps> = React.memo(
+  ({ toast, position, style, children }) => {
+    const animationStyle: React.CSSProperties = toast.height
+      ? getAnimationStyle(
+          toast.position || position || 'top-center',
+          toast.visible
+        )
+      : { opacity: 0 };
+
+    const icon = <ToastIcon toast={toast} />;
+    const message = (
+      <Message {...toast.ariaProps}>
+        {resolveValue(toast.message, toast)}
+      </Message>
+    );
+
+    return (
+      <ToastBarBase
+        className={toast.className}
+        style={{
+          ...animationStyle,
+          ...style,
+          ...toast.style,
+        }}
+      >
+        {typeof children === 'function' ? (
+          children({
+            icon,
+            message,
+          })
+        ) : (
+          <>
+            {icon}
+            {message}
+          </>
+        )}
+      </ToastBarBase>
+    );
+  }
+);

frontend/node_modules/react-hot-toast/src/components/toast-icon.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { styled, keyframes } from 'goober';
+
+import { Toast } from '../core/types';
+import { ErrorIcon, ErrorTheme } from './error';
+import { LoaderIcon, LoaderTheme } from './loader';
+import { CheckmarkIcon, CheckmarkTheme } from './checkmark';
+
+const StatusWrapper = styled('div')`
+  position: absolute;
+`;
+
+const IndicatorWrapper = styled('div')`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 20px;
+  min-height: 20px;
+`;
+
+const enter = keyframes`
+from {
+  transform: scale(0.6);
+  opacity: 0.4;
+}
+to {
+  transform: scale(1);
+  opacity: 1;
+}`;
+
+export const AnimatedIconWrapper = styled('div')`
+  position: relative;
+  transform: scale(0.6);
+  opacity: 0.4;
+  min-width: 20px;
+  animation: ${enter} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+    forwards;
+`;
+
+export type IconThemes = Partial<{
+  success: CheckmarkTheme;
+  error: ErrorTheme;
+  loading: LoaderTheme;
+}>;
+
+export const ToastIcon: React.FC<{
+  toast: Toast;
+}> = ({ toast }) => {
+  const { icon, type, iconTheme } = toast;
+  if (icon !== undefined) {
+    if (typeof icon === 'string') {
+      return <AnimatedIconWrapper>{icon}</AnimatedIconWrapper>;
+    } else {
+      return icon;
+    }
+  }
+
+  if (type === 'blank') {
+    return null;
+  }
+
+  return (
+    <IndicatorWrapper>
+      <LoaderIcon {...iconTheme} />
+      {type !== 'loading' && (
+        <StatusWrapper>
+          {type === 'error' ? (
+            <ErrorIcon {...iconTheme} />
+          ) : (
+            <CheckmarkIcon {...iconTheme} />
+          )}
+        </StatusWrapper>
+      )}
+    </IndicatorWrapper>
+  );
+};

frontend/node_modules/react-hot-toast/src/components/toaster.tsx

@@ -0,0 +1,143 @@
+import { css, setup } from 'goober';
+import * as React from 'react';
+import {
+  resolveValue,
+  ToasterProps,
+  ToastPosition,
+  ToastWrapperProps,
+} from '../core/types';
+import { useToaster } from '../core/use-toaster';
+import { prefersReducedMotion } from '../core/utils';
+import { ToastBar } from './toast-bar';
+
+setup(React.createElement);
+
+const ToastWrapper = ({
+  id,
+  className,
+  style,
+  onHeightUpdate,
+  children,
+}: ToastWrapperProps) => {
+  const ref = React.useCallback(
+    (el: HTMLElement | null) => {
+      if (el) {
+        const updateHeight = () => {
+          const height = el.getBoundingClientRect().height;
+          onHeightUpdate(id, height);
+        };
+        updateHeight();
+        new MutationObserver(updateHeight).observe(el, {
+          subtree: true,
+          childList: true,
+          characterData: true,
+        });
+      }
+    },
+    [id, onHeightUpdate]
+  );
+
+  return (
+    <div ref={ref} className={className} style={style}>
+      {children}
+    </div>
+  );
+};
+
+const getPositionStyle = (
+  position: ToastPosition,
+  offset: number
+): React.CSSProperties => {
+  const top = position.includes('top');
+  const verticalStyle: React.CSSProperties = top ? { top: 0 } : { bottom: 0 };
+  const horizontalStyle: React.CSSProperties = position.includes('center')
+    ? {
+        justifyContent: 'center',
+      }
+    : position.includes('right')
+    ? {
+        justifyContent: 'flex-end',
+      }
+    : {};
+  return {
+    left: 0,
+    right: 0,
+    display: 'flex',
+    position: 'absolute',
+    transition: prefersReducedMotion()
+      ? undefined
+      : `all 230ms cubic-bezier(.21,1.02,.73,1)`,
+    transform: `translateY(${offset * (top ? 1 : -1)}px)`,
+    ...verticalStyle,
+    ...horizontalStyle,
+  };
+};
+
+const activeClass = css`
+  z-index: 9999;
+  > * {
+    pointer-events: auto;
+  }
+`;
+
+const DEFAULT_OFFSET = 16;
+
+export const Toaster: React.FC<ToasterProps> = ({
+  reverseOrder,
+  position = 'top-center',
+  toastOptions,
+  gutter,
+  children,
+  toasterId,
+  containerStyle,
+  containerClassName,
+}) => {
+  const { toasts, handlers } = useToaster(toastOptions, toasterId);
+
+  return (
+    <div
+      data-rht-toaster={toasterId || ''}
+      style={{
+        position: 'fixed',
+        zIndex: 9999,
+        top: DEFAULT_OFFSET,
+        left: DEFAULT_OFFSET,
+        right: DEFAULT_OFFSET,
+        bottom: DEFAULT_OFFSET,
+        pointerEvents: 'none',
+        ...containerStyle,
+      }}
+      className={containerClassName}
+      onMouseEnter={handlers.startPause}
+      onMouseLeave={handlers.endPause}
+    >
+      {toasts.map((t) => {
+        const toastPosition = t.position || position;
+        const offset = handlers.calculateOffset(t, {
+          reverseOrder,
+          gutter,
+          defaultPosition: position,
+        });
+        const positionStyle = getPositionStyle(toastPosition, offset);
+
+        return (
+          <ToastWrapper
+            id={t.id}
+            key={t.id}
+            onHeightUpdate={handlers.updateHeight}
+            className={t.visible ? activeClass : ''}
+            style={positionStyle}
+          >
+            {t.type === 'custom' ? (
+              resolveValue(t.message, t)
+            ) : children ? (
+              children(t)
+            ) : (
+              <ToastBar toast={t} position={toastPosition} />
+            )}
+          </ToastWrapper>
+        );
+      })}
+    </div>
+  );
+};