✨ Add tips render

doc/tips.md

@@ -0,0 +1,27 @@
+# Tips组件
+
+使用`tips:[type]`来启用，type支持`info`, `success`, `danger`, `warn`四种类型
+
+```
+tips:info
+
+Here is success
+
+---
+
+tips:success
+
+Here is success
+
+---
+
+tips:danger
+
+Here is danger
+
+---
+
+tips:warn
+
+Here is Warning
+```

src/constant.ts

@@ -0,0 +1 @@
+export const RENDER_CLASS = "halo-render"

src/index.ts

@@ -1,3 +1,20 @@
+import "./less/tips.less"
+import "./less/render.less"
+import {RENDER_CLASS} from "./constant";
+
 export const haloRender = (src: string): string => {
-    return `<h2>${src.trim()}</h2>`
+    src = src.trim()
+    const lines = src.split("\n");
+    let html: string = ""
+    const type = lines[0]
+    if (type.startsWith("tips")) {
+        html = `<div class="${RENDER_CLASS} tips ${type.replace(":", "-")}">`
+        lines.forEach((line: string, index: number) => {
+            if (index === 0) return
+            if (line) html += `<div>${line}</div>`
+        })
+        html += "</div>"
+        return html
+    }
+    return "<p>Working</p>"
 }

src/less/render.less

@@ -0,0 +1,3 @@
+.halo-render {
+ margin: 5px;
+}

src/less/tips.less

@@ -0,0 +1,44 @@
+@border-width: 4px;
+@border-type: solid;
+// Warning
+@warn-color: darkorange;
+@warn-bg-color: lightyellow;
+// DANGER
+@danger-color: darkred;
+@danger-bg-color: lightpink;
+// Success
+@success-color: darkgreen;
+@success-bg: lightgreen;
+// Info
+@info-color: #0052d9;
+@info-bg: lightblue;
+
+.tips {
+  padding: 5px 10px;
+  border-left-style: @border-type;
+  border-left-width: @border-width;
+
+  &&-warn {
+    background-color: @warn-bg-color;
+    color: @warn-color;
+    border-left-color: @warn-color;
+  }
+
+  &&-danger {
+    background-color: @danger-bg-color;
+    color: @danger-color;
+    border-left-color: @danger-color;
+  }
+
+  &&-success {
+    background-color: @success-bg;
+    color: @success-color;
+    border-left-color: @success-color;
+  }
+
+  &&-info {
+    background-color: @info-bg;
+    color: @info-color;
+    border-left-color: @info-color;
+  }
+}