feat: add doc alert common ui

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>

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';

packages/effects/common-ui/src/components/doc-alert/types.ts

@@ -0,0 +1,4 @@
+export interface DocAlertProps {
+  title: string;
+  url: string;
+}

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';

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',
         )
       "
     >