chore: 全屏引导+样式优化

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

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>
 

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"