From d1ef1192b2b84d8d125131272909f8ca621f6e2e Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Mon, 6 Jan 2025 12:36:57 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E5=85=A8=E5=B1=8F=E5=BC=95=E5=AF=BC+?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web-antd/src/components/tree/src/hook.tsx | 57 +++++++++++++++++++
 .../components/tree/src/menu-select-table.vue | 11 +++-
 .../views/system/role-beta/role-drawer.vue    | 12 ++--
 3 files changed, 72 insertions(+), 8 deletions(-)
 create mode 100644 apps/web-antd/src/components/tree/src/hook.tsx

diff --git a/apps/web-antd/src/components/tree/src/hook.tsx b/apps/web-antd/src/components/tree/src/hook.tsx
new file mode 100644
index 00000000..31b52bdd
--- /dev/null
+++ b/apps/web-antd/src/components/tree/src/hook.tsx
@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { TourProps } from 'ant-design-vue';
+
+import { defineComponent, ref } from 'vue';
+
+import { useLocalStorage } from '@vueuse/core';
+import { Tour } from 'ant-design-vue';
+
+/**
+ * 全屏引导
+ * @returns value
+ */
+export function useFullScreenGuide() {
+  const open = ref(false);
+  /**
+   * 是否已读 只显示一次
+   */
+  const read = useLocalStorage('menu_select_fullscreen_read', false);
+
+  function openGuide() {
+    if (!read.value) {
+      open.value = true;
+    }
+  }
+
+  function closeGuide() {
+    open.value = false;
+    read.value = true;
+  }
+
+  const steps: TourProps['steps'] = [
+    {
+      title: '提示',
+      description: '点击这里可以全屏',
+      target: () =>
+        document.querySelector(
+          'div#menu-select-table .vxe-tools--operate > button[title="全屏"]',
+        )!,
+    },
+  ];
+
+  const FullScreenGuide = defineComponent({
+    name: 'FullScreenGuide',
+    inheritAttrs: false,
+    setup() {
+      return () => (
+        <Tour onClose={closeGuide} open={open.value} steps={steps} />
+      );
+    },
+  });
+
+  return {
+    FullScreenGuide,
+    openGuide,
+    closeGuide,
+  };
+}
diff --git a/apps/web-antd/src/components/tree/src/menu-select-table.vue b/apps/web-antd/src/components/tree/src/menu-select-table.vue
index 43643fbf..e4d14a12 100644
--- a/apps/web-antd/src/components/tree/src/menu-select-table.vue
+++ b/apps/web-antd/src/components/tree/src/menu-select-table.vue
@@ -15,6 +15,7 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
 import { columns, nodeOptions } from './data';
 import { menusWithPermissions, rowAndChildrenChecked } from './helper';
+import { useFullScreenGuide } from './hook';
 
 defineOptions({
   name: 'MenuSelectTable',
@@ -169,6 +170,7 @@ function setCheckedByKeys(
   });
 }
 
+const { FullScreenGuide, openGuide } = useFullScreenGuide();
 onMounted(() => {
   /**
    * 加载表格数据 转为指定结构
@@ -212,6 +214,9 @@ onMounted(() => {
       const records = tableApi.grid.getData();
       setCheckedByKeys(records, allCheckedKeys, association.value);
       updateCheckedNumber();
+
+      // 全屏引导
+      setTimeout(() => openGuide, 1000);
     },
   );
 });
@@ -329,8 +334,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="flex h-full flex-col">
-    <Alert class="mx-2 mb-2" message="beta功能" type="warning" show-icon />
+  <div class="flex h-full flex-col" id="menu-select-table">
     <BasicTable>
       <template #toolbar-actions>
         <RadioGroup
@@ -354,7 +358,6 @@ defineExpose({
       </template>
       <template #toolbar-tools>
         <Space>
-          <a-button @click="getCheckedKeys">打印选中的节点</a-button>
           <a-button @click="setExpandOrCollapse(false)">
             {{ $t('pages.common.collapse') }}
           </a-button>
@@ -376,6 +379,8 @@ defineExpose({
         </div>
       </template>
     </BasicTable>
+    <!-- 全屏引导 -->
+    <FullScreenGuide />
   </div>
 </template>
 
diff --git a/apps/web-antd/src/views/system/role-beta/role-drawer.vue b/apps/web-antd/src/views/system/role-beta/role-drawer.vue
index 2282c8f1..707d6bb7 100644
--- a/apps/web-antd/src/views/system/role-beta/role-drawer.vue
+++ b/apps/web-antd/src/views/system/role-beta/role-drawer.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep, eachTree } from '@vben/utils';
+
 import { useVbenForm } from '#/adapter/form';
 import { menuTreeSelect, roleMenuTreeSelect } from '#/api/system/menu';
 import { roleAdd, roleInfo, roleUpdate } from '#/api/system/role';
 import { MenuSelectTable } from '#/components/tree';
-import { useVbenDrawer } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-import { cloneDeep, eachTree } from '@vben/utils';
-import { computed, nextTick, ref } from 'vue';
 
 import { drawerSchema } from './data';
 
@@ -126,7 +128,7 @@ function handleMenuCheckStrictlyChange(value: boolean) {
   <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[800px]">
     <BasicForm>
       <template #menuIds="slotProps">
-        <div class="h-[400px] w-full">
+        <div class="h-[600px] w-full">
           <!-- check-strictly为readonly 不能通过v-model绑定 -->
           <MenuSelectTable
             ref="menuSelectRef"