feat: add data generater for base64

Author: xiejay97

.gitignore

@@ -5,6 +5,7 @@
 /tmp
 /out-tsc
 /tools-dist
+base64.out.ts
 
 # dependencies
 /node_modules

package.json

@@ -17,6 +17,7 @@
     "publish:vscode-extension": "yarn build:vscode-extension && cd dist/packages/vscode-extension && vsce publish --yarn",
     "serve:site": "nx serve site",
     "test:affected": "nx affected --target=test --parallel=7",
+    "util:base64-data": "ts-node -P ./tools/tsconfig.json ./tools/base64-data.ts",
     "util:check-update": "yarn upgrade-interactive --latest",
     "util:sort-package-json": "sort-package-json 'package.json' 'packages/*/package.json'",
     "util:update-dependencies": "ts-node -P ./tools/tsconfig.json ./tools/update-dependencies.ts",

packages/platform/project.json

@@ -4,6 +4,12 @@
   "projectType": "application",
   "tags": ["scope:platform"],
   "targets": {
+    "build-dependencies": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["yarn util:base64-data"]
+      }
+    },
     "build": {
       "executor": "@nrwl/webpack:webpack",
       "outputs": ["{options.outputPath}"],
@@ -35,15 +41,27 @@
           "extractLicenses": true,
           "vendorChunk": false
         }
-      }
+      },
+      "dependsOn": [
+        {
+          "target": "build-dependencies",
+          "projects": "self"
+        }
+      ]
     },
     "serve": {
       "executor": "@nrwl/webpack:dev-server",
       "options": {
         "buildTarget": "platform:build",
         "port": 4310,
         "open": true
-      }
+      },
+      "dependsOn": [
+        {
+          "target": "build-dependencies",
+          "projects": "self"
+        }
+      ]
     },
     "lint": {
       "executor": "@nrwl/linter:eslint",

packages/platform/src/assets/403.svg renamed to packages/platform/src/app/routes/exception/403.svg

@@ -27,6 +27,7 @@
   }
 
   @include e(bg) {
+    flex-shrink: 0;
     width: calc(100% - 40px);
     max-width: 320px;
   }

packages/platform/src/assets/404.svg renamed to packages/platform/src/app/routes/exception/404.svg

@@ -1,10 +1,14 @@
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import { DButton } from '@react-devui/ui';
 import { getClassName } from '@react-devui/utils';
 
 import { useDeviceQuery } from '../../hooks';
+import { ReactComponent as S403 } from './403.svg';
+import { ReactComponent as S404 } from './404.svg';
+import { ReactComponent as S500 } from './500.svg';
 import styles from './Exception.module.scss';
 
 export default function Exception(props: { status: number }): JSX.Element | null {
@@ -19,7 +23,7 @@ export default function Exception(props: { status: number }): JSX.Element | null
         [styles['app-exception--phone']]: deviceMatched === 'phone',
       })}
     >
-      <img className={styles['app-exception__bg']} src={`/assets/${status}.svg`} alt="bg" />
+      {React.createElement(status === 403 ? S403 : status === 404 ? S404 : S500, { className: styles['app-exception__bg'] })}
       <div className={styles['app-exception__info']}>
         <div className={styles['app-exception__status']}>{status}</div>
         <div className={styles['app-exception__description']}>{t(`routes.exception.${status}`)}</div>

packages/platform/src/assets/500.svg renamed to packages/platform/src/app/routes/exception/500.svg

@@ -45,7 +45,7 @@ export function AppNotification(props: React.ButtonHTMLAttributes<HTMLButtonElem
                 panel: (
                   <AppList
                     aList={notify.list.map((item) => ({
-                      avatar: <DAvatar dImg={{ src: '/assets/avatar.png', alt: 'avatar' }}></DAvatar>,
+                      avatar: <DAvatar dImg={{ src: '/assets/imgs/avatar.png', alt: 'avatar' }}></DAvatar>,
                       title: 'name',
                       description: item.message,
                       props: {

packages/platform/src/app/routes/exception/Exception.module.scss

@@ -15,6 +15,7 @@ import { useHttp, useInit } from '../../../core';
 import { AppLanguage } from '../../components';
 import { useDeviceQuery } from '../../hooks';
 import styles from './Login.module.scss';
+import { BASE64_DATA } from './base64.out';
 
 export default function Login(): JSX.Element | null {
   const { t } = useTranslation();
@@ -101,7 +102,9 @@ export default function Login(): JSX.Element | null {
     <div className={styles['app-login']}>
       <AppLanguage className={styles['app-login__lang']} />
       <div>
-        {deviceMatched === 'desktop' && <img className={styles['app-login__bg']} src="/assets/login-bg.png" alt="bg" />}
+        {deviceMatched === 'desktop' && (
+          <img className={styles['app-login__bg']} src={`data:image/png;base64,${BASE64_DATA.bg}`} alt="bg" />
+        )}
         <div className={styles['app-login__login-container']}>
           <div className={styles['app-login__title-container']}>
             <img className={styles['app-login__logo']} src="/assets/logo.svg" alt="Logo" />