feat: message style and warning type (#144)

SwanHubX · Jan 5, 2024 · 2f3428d · 2f3428d
1 parent b6e0d96
commit 2f3428d
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 5 deletions.
diff --git a/vue/src/components/message/SLMessage.vue b/vue/src/components/message/SLMessage.vue
@@ -1,8 +1,69 @@
 <template>
-  <div class="px-3 h-10 border border-gray bg-default rounded">
-    <div class="flex items-center h-full">
-      <p>{{ message.text }}</p>
-    </div>
+  <div class="px-3 h-10 border rounded flex items-center gap-2" :class="message.type">
+    <!-- 成功图标 -->
+    <svg
+      t="1704430639499"
+      class="icon"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="3306"
+      width="16"
+      height="16"
+      v-if="message.type === 'success'"
+    >
+      <path
+        d="M512 992C246.912 992 32 777.088 32 512 32 246.912 246.912 32 512 32c265.088 0 480 214.912 480 480 0 265.088-214.912 480-480 480z m0-64c229.76 0 416-186.24 416-416S741.76 96 512 96 96 282.24 96 512s186.24 416 416 416z"
+        fill="#fff"
+        p-id="3307"
+      ></path>
+      <path
+        d="M741.216 344a32 32 0 0 1 46.816 43.616l-315.296 338.208a32 32 0 0 1-43.968 2.688l-193.344-162.368a32 32 0 1 1 41.152-48.992l170.08 142.816 294.56-316z"
+        fill="#fff"
+        p-id="3308"
+      ></path>
+    </svg>
+    <!-- 错误图标 -->
+    <svg
+      t="1704430752948"
+      class="icon"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="4287"
+      width="16"
+      height="16"
+      v-if="message.type === 'error'"
+    >
+      <path
+        d="M512 1017.279c-279.061 0-505.282-226.223-505.282-505.282s226.221-505.279 505.282-505.279c279.059 0 505.282 226.223 505.282 505.282s-226.223 505.279-505.282 505.279zM512 69.878c-244.169 0-442.122 197.949-442.122 442.122s197.952 442.119 442.122 442.119c244.169 0 442.119-197.949 442.119-442.119s-197.949-442.122-442.119-442.122zM556.841 512.164l133.803 133.827c12.337 12.316 12.337 32.32 0 44.653-12.333 12.337-32.337 12.337-44.653 0l-133.827-133.803-134.708 134.708c-12.439 12.437-32.587 12.437-45.005 0-12.439-12.437-12.439-32.587 0-45.007l134.708-134.727-133.806-133.806c-12.335-12.335-12.335-32.32 0-44.657 12.337-12.333 32.32-12.333 44.657 0l133.806 133.806 135.716-135.716c12.437-12.419 32.587-12.419 45.007 0 12.437 12.437 12.437 32.587 0 45.026l-135.7 135.698z"
+        fill="#fff"
+        p-id="4288"
+      ></path>
+    </svg>
+    <!-- 警告图标 -->
+    <svg
+      t="1704430898912"
+      class="icon"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="5271"
+      width="20"
+      height="20"
+      v-if="message.type === 'warning'"
+    >
+      <path
+        d="M918.795922 356.854687c-21.798121-51.476314-52.909055-97.631021-92.514092-137.236058-39.605037-39.605037-85.862083-70.818309-137.236058-92.514092C635.727364 104.590046 579.236458 93.128123 520.903458 93.128123s-114.823906 11.461923-168.142315 33.976414c-51.476314 21.798121-97.631021 52.909055-137.236058 92.514092s-70.818309 85.862083-92.514092 137.236058C100.496502 410.173096 89.034579 466.664002 89.034579 524.997002s11.461923 114.823906 33.976414 168.142315c21.798121 51.476314 52.909055 97.631021 92.514092 137.236058 39.605037 39.605037 85.862083 70.818309 137.236058 92.514092 53.21607 22.514491 109.809314 33.976414 168.142315 33.976414s114.823906-11.461923 168.142315-33.976414c51.476314-21.798121 97.631021-52.909055 137.236058-92.514092 39.605037-39.605037 70.818309-85.862083 92.514092-137.236058 22.514491-53.21607 33.976414-109.809314 33.976414-168.142315S941.310414 410.173096 918.795922 356.854687zM520.903458 911.836898c-213.273636 0-386.839896-173.56626-386.839896-386.839896s173.56626-386.839896 386.839896-386.839896 386.839896 173.56626 386.839896 386.839896S734.177094 911.836898 520.903458 911.836898z"
+        p-id="5272"
+      ></path>
+      <path
+        d="M520.903458 637.364781c12.38297 0 22.514491-10.131521 22.514491-22.514491L543.417949 344.574056c0-12.38297-10.131521-22.514491-22.514491-22.514491s-22.514491 10.131521-22.514491 22.514491l0 270.378573C498.388967 627.23326 508.520488 637.364781 520.903458 637.364781z"
+        p-id="5273"
+      ></path>
+      <path d="M520.903458 705.931641m-30.701579 0a30 30 0 1 0 61.403158 0 30 30 0 1 0-61.403158 0Z" p-id="5274"></path>
+    </svg>
+    <p>{{ message.text }}</p>
   </div>
 </template>
 
@@ -35,4 +96,16 @@ onUnmounted(() => {
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.success {
+  @apply bg-positive-default text-white-default;
+}
+
+.error {
+  @apply bg-negative-default text-white-default;
+}
+
+.warning {
+  @apply bg-warning-dimmer text-white-default;
+}
+</style>
diff --git a/vue/src/components/message/index.js b/vue/src/components/message/index.js
@@ -26,6 +26,15 @@ export const message = {
   success: (text, delay, onClose) => {
     message._ref.add(text, 'success', delay, onClose)
   },
+  /**
+   * @description 显示警告消息
+   * @param {String} text 消息文本
+   * @param {Number} delay 延迟关闭时间
+   * @param {Function} onClose 关闭时的回调函数
+   */
+  warning: (text, delay, onClose) => {
+    message._ref.add(text, 'warning', delay, onClose)
+  },
   /**
    * 清空所有消息
    */