feat(alert): 添加 FaAlert 组件

apps/example/src/router/modules/component.example.ts

@@ -13,6 +13,14 @@ const routes: RouteRecordRaw = {
     icon: 'i-bx:bxs-component',
   },
   children: [
+    {
+      path: 'alert',
+      name: 'componentExampleAlert',
+      component: () => import('@/views/component_example/alert/index.vue'),
+      meta: {
+        title: '提示',
+      },
+    },
     {
       path: 'avatar',
       name: 'componentExampleAvatar',

apps/example/src/types/components.d.ts

@@ -19,6 +19,7 @@ declare module 'vue' {
     AppNotAllowed: typeof import('./../components/AppNotAllowed/index.vue')['default']
     AppNotSupportedMobile: typeof import('./../components/AppNotSupportedMobile/index.vue')['default']
     AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
+    FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
     FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
     FaButton: typeof import('@fantastic-admin/components')['FaButton']
     FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
@@ -72,6 +73,7 @@ declare global {
   const AppNotAllowed: typeof import('./../components/AppNotAllowed/index.vue')['default']
   const AppNotSupportedMobile: typeof import('./../components/AppNotSupportedMobile/index.vue')['default']
   const AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
+  const FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
   const FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
   const FaButton: typeof import('@fantastic-admin/components')['FaButton']
   const FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']

apps/example/src/views/component_example/alert/_demo1.vue

@@ -0,0 +1,7 @@
+<template>
+  <FaAlert
+    icon="i-lucide:info"
+    title="提示信息"
+    description="这是一条普通提示，用于展示页面说明或操作反馈。"
+  />
+</template>

apps/example/src/views/component_example/alert/_demo2.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="space-y-4">
+    <FaAlert
+      icon="i-lucide:info"
+      title="普通提示"
+      description="数据已同步完成，可以继续后续操作。"
+    />
+    <FaAlert
+      icon="i-lucide:circle-alert"
+      title="危险提示"
+      description="删除后数据将无法恢复，请谨慎操作。"
+      variant="destructive"
+    />
+  </div>
+</template>

apps/example/src/views/component_example/alert/_demo3.vue

@@ -0,0 +1,12 @@
+<template>
+  <FaAlert icon="i-lucide:terminal" title="命令执行完成">
+    <template #description>
+      <div>
+        已成功生成文件，可继续进行下一步操作。
+        <FaButton variant="link" class="px-0 h-auto">
+          查看详情
+        </FaButton>
+      </div>
+    </template>
+  </FaAlert>
+</template>

apps/example/src/views/component_example/alert/index.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Demo1 from './_demo1.vue'
+import Demo2 from './_demo2.vue'
+import Demo3 from './_demo3.vue'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="提示" description="FaAlert" />
+    <FaPageMain>
+      <Demo1 />
+    </FaPageMain>
+    <FaPageMain title="不同样式">
+      <Demo2 />
+    </FaPageMain>
+    <FaPageMain title="自定义描述">
+      <Demo3 />
+    </FaPageMain>
+  </div>
+</template>