✨ feat: 🌐 优化了加载页面的HTML结构和样式，并引入了bootstrap和bootstrap-icons库

vnobo · Jun 5, 2024 · 69b02e6 · 69b02e6
1 parent 2598254
commit 69b02e6
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 19 deletions.
diff --git a/ui-work/angular.json b/ui-work/angular.json
@@ -62,12 +62,33 @@
               {
                 "glob": "**/*",
                 "input": "projects/web/public"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+                "output": "/assets/"
               }
             ],
             "styles": [
-              "projects/web/src/styles.scss"
+              {
+                "input": "bootstrap/dist/css/bootstrap.css",
+                "bundleName": "bootstrap-module"
+              },
+              {
+                "input": "bootstrap-icons/font/bootstrap-icons.css",
+                "bundleName": "icons-module"
+              },
+              {
+                "input": "projects/web/src/styles.scss",
+                "bundleName": "main-module"
+              }
+            ],
+            "scripts": [
+              {
+                "input": "bootstrap/dist/js/bootstrap.js",
+                "bundleName": "bootstrap-module"
+              }
             ],
-            "scripts": [],
             "server": "projects/web/src/main.server.ts",
             "prerender": true,
             "ssr": {
@@ -79,13 +100,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumWarning": "1024kB",
+                  "maximumError": "2MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kB",
-                  "maximumError": "4kB"
+                  "maximumWarning": "32kB",
+                  "maximumError": "64kB"
                 }
               ],
               "outputHashing": "all"
@@ -105,7 +126,8 @@
               "buildTarget": "web:build:production"
             },
             "development": {
-              "buildTarget": "web:build:development"
+              "buildTarget": "web:build:development",
+              "proxyConfig": "proxy.conf.json"
             }
           },
           "defaultConfiguration": "development"

diff --git a/ui-work/package-lock.json b/ui-work/package-lock.json
diff --git a/ui-work/package.json b/ui-work/package.json
@@ -24,7 +24,9 @@
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.14.3",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^18.0.2",
@@ -42,4 +44,4 @@
     "ng-packagr": "^18.0.0",
     "typescript": "~5.4.2"
   }
-}
+}
diff --git a/ui-work/projects/web/src/index.html b/ui-work/projects/web/src/index.html
@@ -1,13 +1,24 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh">
 <head>
   <meta charset="utf-8">
-  <title>Web</title>
+  <meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport"/>
+  <meta content="ie=edge" http-equiv="X-UA-Compatible"/>
+  <title>Loading page ....</title>
   <base href="/">
   <meta content="width=device-width, initial-scale=1" name="viewport">
   <link href="favicon.ico" rel="icon" type="image/x-icon">
 </head>
 <body>
-<app-root></app-root>
+<app-root>
+  <div class="d-flex justify-content-center align-items-center h-100 bg-success">
+    <div class="d-block text-center">
+      <div class="spinner-border text-warning" role="status" style="width: 5rem; height: 5rem;">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+      <span class="d-flex align-self-center" role="status" style="font-size: 3rem;">Loading...</span>
+    </div>
+  </div>
+</app-root>
 </body>
 </html>
diff --git a/ui-work/proxy.conf.json b/ui-work/proxy.conf.json
@@ -0,0 +1,11 @@
+{
+  "/api": {
+    "target": "http://localhost:8080",
+    "secure": false,
+    "pathRewrite": {
+      "^/api": ""
+    },
+    "changeOrigin": true,
+    "logLevel": "debug"
+  }
+}
diff --git a/ui/projects/web/src/index.html b/ui/projects/web/src/index.html
@@ -1,22 +1,23 @@
 <!DOCTYPE html>
 <html lang="zh">
-
 <head>
   <meta charset="utf-8">
-  <meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport" />
-  <meta content="ie=edge" http-equiv="X-UA-Compatible" />
+    <meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport"/>
+    <meta content="ie=edge" http-equiv="X-UA-Compatible"/>
   <title>Loading page ....</title>
   <base href="/">
-  <link href="favicon.ico" rel="icon" type="image/x-icon" />
+    <link href="favicon.ico" rel="icon" type="image/x-icon"/>
 </head>
 <body>
-  <app-root><div class="d-flex justify-content-center align-items-center h-100 bg-success">
+<app-root>
+    <div class="d-flex justify-content-center align-items-center h-100 bg-success">
     <div class="d-block text-center">
       <div class="spinner-border text-warning" role="status" style="width: 5rem; height: 5rem;">
         <span class="visually-hidden">Loading...</span>
       </div>
       <span class="d-flex align-self-center" role="status" style="font-size: 3rem;">Loading...</span>
     </div>
-  </div></app-root>
+    </div>
+</app-root>
 </body>
-</html>
+</html>