refactor: 升级框架补充

packages/effects/common-ui/src/components/doc-alert/doc-alert.vue

@@ -0,0 +1,55 @@
+<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 { openWindow } from '@vben-core/shared/utils';
+
+defineOptions({
+  name: 'DocAlert',
+});
+
+const props = defineProps<DocAlertProps>();
+
+/** 控制组件显示状态 */
+const isVisible = ref(true);
+
+function goToUrl() {
+  openWindow(props.url);
+}
+
+function close() {
+  isVisible.value = false;
+}
+</script>
+<template>
+  <div
+    role="alert"
+    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 min-w-0 flex-1 font-sans text-sm leading-none">
+      <span class="inline-block">【{{ 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>

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;
+}