feat: add help

apps/web-antd/src/layouts/basic.vue

@@ -3,7 +3,7 @@ import type { NotificationItem } from '@vben/layouts';
 
 import { computed, onMounted, ref, watch } from 'vue';
 
-import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
+import { AuthenticationLoginExpiredModal, useVbenModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
 import { useWatermark } from '@vben/hooks';
 import {
@@ -33,6 +33,8 @@ import { router } from '#/router';
 import { useAuthStore } from '#/store';
 import LoginForm from '#/views/_core/authentication/login.vue';
 
+import Help from './components/help.vue';
+
 const userStore = useUserStore();
 const authStore = useAuthStore();
 const accessStore = useAccessStore();
@@ -42,6 +44,10 @@ const notifications = ref<NotificationItem[]>([]);
 const unreadCount = ref(0);
 const showDot = computed(() => unreadCount.value > 0);
 
+const [HelpModal, helpModalApi] = useVbenModal({
+  connectedComponent: Help,
+});
+
 const menus = computed(() => [
   {
     handler: () => {
@@ -70,9 +76,7 @@ const menus = computed(() => [
   },
   {
     handler: () => {
-      openWindow(`${VBEN_GITHUB_URL}/issues`, {
+      helpModalApi.open();
-        target: '_blank',
-      });
     },
     icon: CircleHelp,
     text: $t('ui.widgets.qa'),
@@ -210,4 +214,5 @@ watch(
       <LockScreen :avatar @to-login="handleLogout" />
     </template>
   </BasicLayout>
+  <HelpModal />
 </template>

apps/web-antd/src/layouts/components/help.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import { useVbenModal, VbenButton, VbenButtonGroup } from '@vben/common-ui';
+
+import { Image, Tag } from 'ant-design-vue';
+
+import { $t } from '#/locales';
+
+const [Modal, modalApi] = useVbenModal({
+  draggable: true,
+  overlayBlur: 5,
+  footer: false,
+  onCancel() {
+    modalApi.close();
+  },
+});
+
+function openWindow(url: string) {
+  window.open(url, '_blank');
+}
+</script>
+<template>
+  <Modal class="w-[40%]" :title="$t('ui.widgets.qa')">
+    <div class="mt-2 flex flex-col">
+      <div class="mt-2 flex flex-row">
+        <VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
+          <p class="p-2">项目地址:</p>
+          <VbenButton
+            variant="link"
+            @click="
+              openWindow('https://gitee.com/yudaocode/yudao-ui-admin-vben')
+            "
+          >
+            Gitee
+          </VbenButton>
+          <VbenButton
+            variant="link"
+            @click="
+              openWindow('https://github.com/yudaocode/yudao-ui-admin-vben')
+            "
+          >
+            Github
+          </VbenButton>
+        </VbenButtonGroup>
+
+        <VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
+          <p class="p-2">issues:</p>
+          <VbenButton
+            variant="link"
+            @click="
+              openWindow(
+                'https://gitee.com/yudaocode/yudao-ui-admin-vben/issues',
+              )
+            "
+          >
+            Gitee
+          </VbenButton>
+          <VbenButton
+            variant="link"
+            @click="
+              openWindow(
+                'https://github.com/yudaocode/yudao-ui-admin-vben/issues',
+              )
+            "
+          >
+            Github
+          </VbenButton>
+        </VbenButtonGroup>
+
+        <VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
+          <p class="p-2">开发文档:</p>
+          <VbenButton
+            variant="link"
+            @click="openWindow('https://doc.iocoder.cn/quick-start/')"
+          >
+            项目文档
+          </VbenButton>
+          <VbenButton variant="link" @click="openWindow('https://antdv.com/')">
+            antdv 文档
+          </VbenButton>
+        </VbenButtonGroup>
+      </div>
+      <p class="mt-2 flex justify-center">
+        <span>
+          <Image src="../../../public/wx-xingyu.png" alt="数舵科技" />
+        </span>
+      </p>
+      <p class="mt-2 flex justify-center pt-4 text-sm italic">
+        本项目采用<Tag color="blue">MIT</Tag>开源协议，个人与企业可100%
+        免费使用。
+      </p>
+    </div>
+  </Modal>
+</template>