feat: 添加Message路由

Author: coderyjw

src/lib/message/index.ts

@@ -27,6 +27,7 @@ import SwitchDoc from "@/views/doc/switch/index.vue";
 
 import AlertDoc from "@/views/doc/alert/index.vue";
 import DialogDoc from "@/views/doc/dialog/index.vue";
+import MessageDoc from "@/views/doc/message/index.vue";
 
 import AffixDoc from "@/views/doc/affix/index.vue";
 import BacktopDoc from "@/views/doc/backtop/index.vue";
@@ -64,6 +65,7 @@ const docMenus = {
  反馈组件: [
  { path: "alert", component: AlertDoc, name: "提示 Alert" },
  { path: "dialog", component: DialogDoc, name: "对话框 Dialog" },
+ { path: "message", component: MessageDoc, name: "信息 Message" },
  ],
  导航组件: [
  { path: "affix", component: AffixDoc, name: "固钉 Affix" },

src/lib/message/index.vue

@@ -1,16 +1,40 @@
 <preview>可以关闭</preview>
 <template>
- <jw-alert title="Default 类型" closeable>
+ <jw-alert title="Default 类型" closeable description="这是一段描述">
  <template #icon>
  <jw-icon class="jw-alert-icon" :size="22">
  <IosAirplane />
  </jw-icon>
  </template>
  </jw-alert>
- <jw-alert title="Info 类型" type="info" show-icon closeable />
- <jw-alert title="Success 类型" type="success" show-icon closeable />
- <jw-alert title="Warning 类型" type="warning" show-icon closeable />
- <jw-alert title="Error 类型" type="error" show-icon closeable />
+ <jw-alert
+ title="Info 类型"
+ type="info"
+ show-icon
+ closeable
+ description="这是一段描述"
+ />
+ <jw-alert
+ title="Success 类型"
+ type="success"
+ show-icon
+ closeable
+ description="这是一段描述"
+ />
+ <jw-alert
+ title="Warning 类型"
+ type="warning"
+ show-icon
+ closeable
+ description="这是一段描述"
+ />
+ <jw-alert
+ title="Error 类型"
+ type="error"
+ show-icon
+ closeable
+ description="这是一段描述"
+ />
 </template>
 <script setup lang="ts">
 import { IosAirplane } from "@vicons/ionicons4";

src/router/doc-routes.ts

@@ -0,0 +1,6 @@
+<preview>基础使用</preview>
+<template>message</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/doc/alert/AlertPreview5.preview.vue

@@ -0,0 +1,16 @@
+<template>
+ <div class="message-doc-wrapper">
+ <h1>消息提示</h1>
+ <p>（一般是）从浏览器顶部降下来的神谕。</p>
+ <div class="preview-wrapper">
+ <Preview :component="MessagePreview1" />
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import Preview from "@/components/Preview";
+import MessagePreview1 from "./MessagePreview1.preview.vue";
+</script>
+
+<style scoped></style>