💄 Change ui for tips

package.json

@@ -14,7 +14,9 @@
     "@babel/core": "^7.23.6",
     "@babel/preset-env": "^7.23.6",
     "babel-loader": "^9.1.3",
+    "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.4",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",

src/less/constant.less

@@ -1 +1 @@
-@border-radius: 6px;
+@border-radius: 3px;

src/less/render.less

@@ -12,3 +12,10 @@
  background-color: lightpink;
  border-radius: @border-radius;
 }
+
+@font-face {
+ font-family: 'iconfont';
+ src: url('../fonts/iconfont.woff2?t=1703484934750') format('woff2'),
+ url('../fonts/iconfont.woff?t=1703484934750') format('woff'),
+ url('../fonts/iconfont.ttf?t=1703484934750') format('truetype');
+}

src/less/tips.less

@@ -15,34 +15,75 @@
 @info-bg: lightblue;
 
 .tips {
-  padding: 5px 10px;
+  position: relative;
+  margin: 20px;
+  padding: 15px 15px;
   border-left-style: @border-type;
   border-left-width: @border-width;
   border-radius: @border-radius;
   border-left-color: #666666;
   background-color: #eeeeee;
 
+  &&:after {
+    font-family: "iconfont", serif !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    padding: 4px;
+    border-radius: 50%;
+    color: #eeeeee;
+    background-color: #666666;
+    display: block;
+    position: absolute;
+    left: calc(-12px - @border-width / 2);
+    top: 6px;
+    content: "\e77e";
+  }
+
   &&-warn {
     background-color: @warn-bg-color;
     color: @warn-color;
     border-left-color: @warn-color;
+
+    &&:after {
+      color: @warn-bg-color;
+      background-color: @warn-color;
+      content: "\e671";
+    }
   }
 
   &&-danger {
     background-color: @danger-bg-color;
     color: @danger-color;
     border-left-color: @danger-color;
+
+    &&:after {
+      background-color: @danger-color;
+      color: @danger-bg-color;
+      content: "\e671";
+    }
   }
 
   &&-success {
     background-color: @success-bg;
     color: @success-color;
     border-left-color: @success-color;
+
+    &&:after {
+      background-color: @success-color;
+      color: @success-bg;
+    }
   }
 
   &&-info {
     background-color: @info-bg;
     color: @info-color;
     border-left-color: @info-color;
+
+    &&:after {
+      color: @info-bg;
+      background-color: @info-color;
+    }
   }
 }

webpack.config.js

@@ -16,6 +16,11 @@ module.exports = {
     },
     module: {
         rules: [
+            {
+                test: /.(woff2?|eot|ttf|otf)(.*)?$/,
+                exclude: "/node-modules/",
+                loader: "file-loader"
+            },
             {
                 test: /\.js$/,
                 exclude: '/node_modules/',

webpack.dev.js

@@ -1,6 +1,7 @@
 const path = require("path")
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
 
 module.exports = {
     watch: true,
@@ -16,6 +17,11 @@ module.exports = {
     },
     module: {
         rules: [
+            {
+                test: /.(woff2?|eot|ttf|otf)(.*)?$/,
+                exclude: "/node-modules/",
+                loader: "file-loader"
+            },
             {
                 test: /\.tsx?$/,
                 use: "ts-loader",
@@ -45,6 +51,11 @@ module.exports = {
         }),
         new MiniCssExtractPlugin({
             filename: "index.css"
+        }),
+        new CopyPlugin({
+            patterns: [
+                {from: "src/fonts", to: "fonts"}
+            ]
         })
     ],
     devServer: {