From 057ea74e0e455488c3b63100e5a6a7605774ebc6 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Tue, 10 Jun 2025 16:21:40 +0800
Subject: [PATCH] feat: add doc alert common ui

---
 .../src/components/doc-alert/doc-alert.vue    | 38 +++++++++++++++++++
 .../src/components/doc-alert/index.ts         |  2 +
 .../src/components/doc-alert/types.ts         |  4 ++
 .../effects/common-ui/src/components/index.ts |  1 +
 .../common-ui/src/components/page/page.vue    |  2 +-
 5 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 packages/effects/common-ui/src/components/doc-alert/doc-alert.vue
 create mode 100644 packages/effects/common-ui/src/components/doc-alert/index.ts
 create mode 100644 packages/effects/common-ui/src/components/doc-alert/types.ts

diff --git a/packages/effects/common-ui/src/components/doc-alert/doc-alert.vue b/packages/effects/common-ui/src/components/doc-alert/doc-alert.vue
new file mode 100644
index 000000000..4f2436d6e
--- /dev/null
+++ b/packages/effects/common-ui/src/components/doc-alert/doc-alert.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import type { DocAlertProps } from './types';
+
+import { isDocAlertEnable } from '@vben/hooks';
+
+import { VbenIcon } from '@vben-core/shadcn-ui';
+import { cn, openWindow } from '@vben-core/shared/utils';
+
+defineOptions({
+  name: 'DocAlert',
+});
+
+const props = defineProps<DocAlertProps>();
+
+function goToUrl() {
+  openWindow(props.url);
+}
+</script>
+<template>
+  <!-- Alert Component -->
+  <div
+    role="alert"
+    v-if="isDocAlertEnable()"
+    :class="
+      cn(
+        'border-primary bg-primary/10 relative m-1 flex w-full items-center rounded-md border p-1',
+      )
+    "
+  >
+    <span class="grid shrink-0 place-items-center">
+      <VbenIcon icon="mdi:information-outline" class="text-primary size-5" />
+    </span>
+    <div class="text-primary w-full font-sans text-sm leading-none">
+      【{{ title }}】文档地址：
+      <a class="hover:text-primary" @click="goToUrl">{{ url }}</a>
+    </div>
+  </div>
+</template>
diff --git a/packages/effects/common-ui/src/components/doc-alert/index.ts b/packages/effects/common-ui/src/components/doc-alert/index.ts
new file mode 100644
index 000000000..9f90d3d49
--- /dev/null
+++ b/packages/effects/common-ui/src/components/doc-alert/index.ts
@@ -0,0 +1,2 @@
+export { default as DocAlert } from './doc-alert.vue';
+export * from './types';
diff --git a/packages/effects/common-ui/src/components/doc-alert/types.ts b/packages/effects/common-ui/src/components/doc-alert/types.ts
new file mode 100644
index 000000000..8ac5dfaa7
--- /dev/null
+++ b/packages/effects/common-ui/src/components/doc-alert/types.ts
@@ -0,0 +1,4 @@
+export interface DocAlertProps {
+  title: string;
+  url: string;
+}
diff --git a/packages/effects/common-ui/src/components/index.ts b/packages/effects/common-ui/src/components/index.ts
index fc50391ed..f1609b1c8 100644
--- a/packages/effects/common-ui/src/components/index.ts
+++ b/packages/effects/common-ui/src/components/index.ts
@@ -2,6 +2,7 @@ export * from './api-component';
 export * from './captcha';
 export * from './col-page';
 export * from './count-to';
+export * from './doc-alert';
 export * from './ellipsis-text';
 export * from './icon-picker';
 export * from './json-viewer';
diff --git a/packages/effects/common-ui/src/components/page/page.vue b/packages/effects/common-ui/src/components/page/page.vue
index 1a6ca913b..31c944ba9 100644
--- a/packages/effects/common-ui/src/components/page/page.vue
+++ b/packages/effects/common-ui/src/components/page/page.vue
@@ -63,7 +63,7 @@ onMounted(() => {
       ref="docRef"
       :class="
         cn(
-          'bg-card border-border relative flex items-end rounded-md border-b p-4',
+          'bg-card border-border relative flex items-start rounded-md border-b p-1',
         )
       "
     >