feat(alert): 添加 FaAlert 组件

hooray · hooray · commit 40cab5efa3a7 · 2026-05-14T13:55:57.000+08:00
diff --git a/apps/core-ant-design-vue/src/types/components.d.ts b/apps/core-ant-design-vue/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']
diff --git a/apps/core-antdv-next/src/types/components.d.ts b/apps/core-antdv-next/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']
diff --git a/apps/core-arco-design-vue/src/types/components.d.ts b/apps/core-arco-design-vue/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']
diff --git a/apps/core-naive-ui/src/types/components.d.ts b/apps/core-naive-ui/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']
diff --git a/apps/core-tdesign/src/types/components.d.ts b/apps/core-tdesign/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']
diff --git a/apps/core-vexip-ui/src/types/components.d.ts b/apps/core-vexip-ui/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']
diff --git a/apps/core/src/types/components.d.ts b/apps/core/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']
diff --git a/apps/example/src/router/modules/component.example.ts b/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',
diff --git a/apps/example/src/types/components.d.ts b/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']
diff --git a/apps/example/src/views/component_example/alert/_demo1.vue b/apps/example/src/views/component_example/alert/_demo1.vue
@@ -0,0 +1,7 @@
+<template>
+  <FaAlert
+    icon="i-lucide:info"
+    title="提示信息"
+    description="这是一条普通提示，用于展示页面说明或操作反馈。"
+  />
+</template>
diff --git a/apps/example/src/views/component_example/alert/_demo2.vue b/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>
diff --git a/apps/example/src/views/component_example/alert/_demo3.vue b/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>
diff --git a/apps/example/src/views/component_example/alert/index.vue b/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>
diff --git a/packages/components/global.d.ts b/packages/components/global.d.ts
@@ -1,5 +1,6 @@
 declare module 'vue' {
   export interface GlobalComponents {
+    FaAlert: typeof import('./index')['FaAlert']
     FaAvatar: typeof import('./index')['FaAvatar']
     FaButton: typeof import('./index')['FaButton']
     FaButtonGroup: typeof import('./index')['FaButtonGroup']
diff --git a/packages/components/index.ts b/packages/components/index.ts
@@ -1,3 +1,4 @@
+export { default as FaAlert } from './src/alert/index.vue'
 export { default as FaAvatar } from './src/avatar/index.vue'
 export { default as FaButtonGroup } from './src/button-group/index.vue'
 export { default as FaButton } from './src/button/index.vue'
diff --git a/packages/components/resolver.ts b/packages/components/resolver.ts
@@ -5,6 +5,7 @@ const COMPONENT_PREFIX = 'Fa'
 const PACKAGE_NAME = '@fantastic-admin/components'
 
 const COMPONENT_NAMES = [
+  'FaAlert',
   'FaAvatar',
   'FaButton',
   'FaButtonGroup',
diff --git a/packages/components/src/alert/README.md b/packages/components/src/alert/README.md
@@ -0,0 +1,85 @@
+# FaAlert 提示
+
+提示组件，用于展示重要信息、状态反馈和警告内容。
+
+## 使用场景
+
+- 表单校验提示
+- 操作结果反馈
+- 页面公告说明
+- 风险或错误警告
+- 功能状态提示
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `icon` | `string` | - | 图标名称，传入 Iconify 图标名 |
+| `title` | `string` | - | 提示标题 |
+| `description` | `string` | - | 提示描述 |
+| `variant` | `'default' \| 'destructive'` | `'default'` | 提示样式变体 |
+| `class` | `HTMLAttributes['class']` | - | 自定义 CSS 类 |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| `description` | 自定义描述内容，会覆盖 `description` prop 的显示 |
+
+## 示例
+
+### 基础用法
+
+```vue
+<template>
+  <FaAlert
+    icon="i-lucide:info"
+    title="提示信息"
+    description="这是一条普通提示，用于展示页面说明或操作反馈。"
+  />
+</template>
+```
+
+### 不同样式
+
+```vue
+<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>
+```
+
+### 自定义描述内容
+
+```vue
+<template>
+  <FaAlert icon="i-lucide:terminal" title="命令执行完成">
+    <template #description>
+      <div>
+        已成功生成文件，可继续进行下一步操作。
+        <FaButton variant="link" class="h-auto px-0">
+          查看详情
+        </FaButton>
+      </div>
+    </template>
+  </FaAlert>
+</template>
+```
+
+## 注意事项
+
+1. **图标设置**：`icon` 使用 Iconify 图标名称，留空则不显示图标
+2. **描述内容**：同时传入 `description` prop 和 `description` slot 时，优先显示 slot 内容
+3. **样式变体**：`destructive` 适合错误、风险、危险操作等提示
+4. **底层实现**：组件基于 shadcn-vue Alert 实现，保留其基础结构和样式
diff --git a/packages/components/src/alert/alert/Alert.vue b/packages/components/src/alert/alert/Alert.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { AlertVariants } from '.'
+import { alertVariants } from '.'
+import { cn } from '../../../utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert"
+    :class="cn(alertVariants({ variant }), props.class)"
+    role="alert"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/components/src/alert/alert/AlertDescription.vue b/packages/components/src/alert/alert/AlertDescription.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-description"
+    :class="cn('text-muted-foreground col-start-2 text-sm [&_p]:leading-relaxed', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/components/src/alert/alert/AlertTitle.vue b/packages/components/src/alert/alert/AlertTitle.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-title"
+    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/components/src/alert/alert/index.ts b/packages/components/src/alert/alert/index.ts
@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/packages/components/src/alert/index.vue b/packages/components/src/alert/index.vue
