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

packages/effects/common-ui/src/ui/authentication/doc-link.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'DocLink',
+});
+</script>
+
+<template>
+  <div class="w-full sm:mx-auto md:max-w-md">
+    <div class="mt-4 flex items-center justify-between">
+      <span class="border-input w-[35%] border-b dark:border-gray-600"></span>
+      <span class="text-muted-foreground text-center text-xs uppercase">
+        萌新必读
+      </span>
+      <span class="border-input w-[35%] border-b dark:border-gray-600"></span>
+    </div>
+
+    <div class="mt-4 flex w-full justify-between">
+      <a
+        href="https://doc.iocoder.cn/"
+        target="_blank"
+        class="text-primary hover:text-primary/80 text-sm"
+      >
+        📚 开发指南
+      </a>
+      <a
+        href="https://doc.iocoder.cn/video/"
+        target="_blank"
+        class="text-primary hover:text-primary/80 text-sm"
+      >
+        🔥 视频教程
+      </a>
+      <a
+        href="https://www.iocoder.cn/Interview/good-collection/"
+        target="_blank"
+        class="text-primary hover:text-primary/80 text-sm"
+      >
+        ⚡ 面试手册
+      </a>
+      <a
+        href="http://static.yudao.iocoder.cn/mp/xinyu370.jpeg"
+        target="_blank"
+        class="text-primary hover:text-primary/80 text-sm"
+      >
+        🤝 外包咨询
+      </a>
+    </div>
+  </div>
+</template>