diff --git a/apps/web-naive/src/components/doc-alert/doc-alert.vue b/apps/web-naive/src/components/doc-alert/doc-alert.vue
new file mode 100644
index 00000000..7aba339e
--- /dev/null
+++ b/apps/web-naive/src/components/doc-alert/doc-alert.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { isDocAlertEnable } from '@vben/hooks';
+import { openWindow } from '@vben/utils';
+
+import { NAlert, NText } from 'naive-ui';
+
+export interface DocAlertProps {
+  /**
+   * 文档标题
+   */
+  title: string;
+  /**
+   * 文档 URL 地址
+   */
+  url: string;
+}
+
+const props = defineProps<DocAlertProps>();
+
+/** 跳转 URL 链接 */
+const goToUrl = () => {
+  openWindow(props.url);
+};
+</script>
+
+<template>
+  <NAlert v-if="isDocAlertEnable()" type="info" show-icon class="mb-2 rounded">
+    <template #message>
+      <NText @click="goToUrl"> 【{{ title }}】文档地址：{{ url }} </NText>
+    </template>
+  </NAlert>
+</template>
diff --git a/apps/web-naive/src/components/doc-alert/index.ts b/apps/web-naive/src/components/doc-alert/index.ts
new file mode 100644
index 00000000..21335153
--- /dev/null
+++ b/apps/web-naive/src/components/doc-alert/index.ts
@@ -0,0 +1 @@
+export { default as DocAlert } from './doc-alert.vue';