From fe6fcdaf6739e9edb68e81b50d6a06118e1e4735 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Tue, 24 Jun 2025 16:23:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20doc-alert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/doc-alert/doc-alert.vue    | 40 +++++++++++++------
 .../common-ui/src/components/page/page.vue    |  2 +-
 2 files changed, 29 insertions(+), 13 deletions(-)

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
index ee3fc55ef..f62b7b54f 100644
--- a/packages/effects/common-ui/src/components/doc-alert/doc-alert.vue
+++ b/packages/effects/common-ui/src/components/doc-alert/doc-alert.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import type { DocAlertProps } from './types';
 
+import { ref } from 'vue';
+
 import { isDocAlertEnable } from '@vben/hooks';
 
 import { VbenIcon } from '@vben-core/shadcn-ui';
-import { cn, openWindow } from '@vben-core/shared/utils';
+import { openWindow } from '@vben-core/shared/utils';
 
 defineOptions({
   name: 'DocAlert',
@@ -12,28 +14,42 @@ defineOptions({
 
 const props = defineProps<DocAlertProps>();
 
+/** 控制组件显示状态 */
+const isVisible = ref(true);
+
 function goToUrl() {
   openWindow(props.url);
 }
+
+function close() {
+  isVisible.value = false;
+}
 </script>
 <template>
-  <!-- Alert Component -->
-  <!-- TODO @xingyu：是不是左右边距 + 下，和搜索的对齐，会好看一丢丢的 -->
   <div
     role="alert"
-    v-if="isDocAlertEnable()"
-    :class="
-      cn(
-        'border-primary bg-primary/10 relative m-1 flex w-full items-center gap-5 rounded-md border p-1',
-      )
-    "
+    v-if="isDocAlertEnable() && isVisible"
+    class="border-primary bg-primary/10 relative my-2 flex h-8 w-full items-center gap-2 rounded-md border p-2"
   >
     <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 class="text-primary min-w-0 flex-1 font-sans text-sm leading-none">
+      <span class="inline-block w-40">【{{ title }}】</span>
+      <a
+        class="hover:text-success cursor-pointer break-all"
+        @click="goToUrl"
+        :title="url"
+      >
+        文档地址：{{ url }}
+      </a>
     </div>
+    <span class="grid shrink-0 cursor-pointer place-items-center">
+      <VbenIcon
+        icon="mdi:close"
+        class="text-primary size-5 hover:text-red-500"
+        @click="close"
+      />
+    </span>
   </div>
 </template>
diff --git a/packages/effects/common-ui/src/components/page/page.vue b/packages/effects/common-ui/src/components/page/page.vue
index 31c944ba9..6c70eee45 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-start rounded-md border-b p-1',
+          'bg-card border-border relative mx-4 flex items-start rounded-md border-b',
         )
       "
     >