feat: v4.2.2一些细节补充与优化

CHANGELOG.md

@@ -16,6 +16,7 @@
 - 实现了新的文件下载函数 `downloadAnyFile`，支持 `blod, file, base64, arrayBuffer`
 - 更新 `naive-ui` 版本至 `2.35.0`
 - 新增了一些工具类型与工具方法
+- 移除 screenfull 插件，使用 vueuse useFullscreen hook 替代。
 - 新增规则 `no-undefined`，[点击查看](https://eslint.org/docs/latest/rules/no-undefined#rule-details) 具体规则
 
 ```ts
@@ -27,6 +28,10 @@ const demo = void 0
 const demo2 = null
 ```
 
+### Fixes
+
+- 修复全屏不能正确提示状态问题
+
 ## 4.2.1
 
 经过综合考虑，还是给模板增加 `cdn` 的配置。基于 `vite-plugin-cdn2` 插件实现。

package.json

@@ -24,7 +24,7 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^9.1.0",
+    "@vueuse/core": "^9.13.0",
     "awesome-qr": "2.1.5-rc.0",
     "axios": "^1.2.0",
     "clipboard": "^2.0.11",
@@ -38,7 +38,6 @@
     "pinia": "^2.1.4",
     "pinia-plugin-persistedstate": "^3.1.0",
     "print-js": "^1.6.0",
-    "screenfull": "^6.0.2",
     "vue": "^3.3.4",
     "vue-hooks-plus": "1.8.2",
     "vue-i18n": "^9.2.2",

src/components/RTable/src/Table.tsx

@@ -13,13 +13,14 @@ import './index.scss'
 
 import { NCard, NDataTable, NDropdown, NSpace } from 'naive-ui'
 import Size from './components/Size'
-import Screenfull from './components/Screenfull'
+import Screenfull from './components/Fullscreen'
 import C from './components/C'
 import Print from './components/Print'
 
 import props from './props'
 import { call } from '@/utils/vue/index'
 import { uuid } from '@use-utils/hook'
+import config from './config'
 
 import type { DropdownOption, DataTableInst } from 'naive-ui'
 import type { ComponentSize } from '@/types/modules/component'
@@ -31,7 +32,8 @@ export default defineComponent({
   setup(props, ctx) {
     const { expose } = ctx
 
-    const rTableInstance = ref<DataTableInst | null>(null)
+    const rTableInst = ref<DataTableInst | null>(null)
+    const wrapperRef = ref<HTMLElement | null>(null)
 
     const uuidWrapper = uuid(16)
     const uuidTable = uuid(16)
@@ -103,30 +105,70 @@ export default defineComponent({
       }
     }
 
-    provide('tableProvider', {
+    const renderToolOptions = () => {
+      const { toolOptions } = props
+
+      return toolOptions?.map((curr) =>
+        typeof curr === 'function' ? curr() : curr,
+      )
+    }
+
+    const tool = (p: typeof props) => {
+      const renderDefaultToolOptions = () => (
+        <>
+          <Print {...p} />
+          <Size {...p} onChangeSize={changeTableSize.bind(this)} />
+          <Screenfull />
+          <C {...p} onUpdateColumn={updateTableColumn.bind(this)} />
+        </>
+      )
+
+      if (!props.toolOptions) {
+        return renderDefaultToolOptions
+      } else {
+        if (props.coverTool) {
+          return renderToolOptions
+        } else {
+          return () => (
+            <>
+              {renderDefaultToolOptions()}
+              {renderToolOptions()}
+            </>
+          )
+        }
+      }
+    }
+
+    provide(config.tableKey, {
       uuidTable,
       uuidWrapper,
+      wrapperRef,
     })
     expose({
-      rTableInstance,
+      rTableInst,
+      uuidTable,
+      uuidWrapper,
     })
 
     return {
       uuidWrapper,
       uuidTable,
       contextMenuReactive,
-      rTableInstance,
+      rTableInst,
       combineRowProps,
       contextMenuSelect,
-      changeTableSize,
       privateReactive,
-      updateTableColumn,
+      tool,
+      wrapperRef,
     }
   },
   render() {
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    const { tool } = this
+
     return (
       <NCard
-        class="ray-table"
+        ref="wrapperRef"
         bordered={this.wrapperBordered}
         {...{ id: this.uuidWrapper }}
       >
@@ -134,7 +176,7 @@ export default defineComponent({
           default: () => (
             <>
               <NDataTable
-                ref="rTableInstance"
+                ref="rTableInst"
                 {...{ id: this.uuidTable }}
                 {...this.$props}
                 {...this.$attrs}
@@ -164,19 +206,11 @@ export default defineComponent({
           header: () => this.title || <div style="display: none;"></div>,
           'header-extra': () => (
             <NSpace wrapItem={false} align="center">
-              <Print {...this.$props} />
+              {tool(this.$props as any)}
-              <Size
-                {...this.$props}
-                onChangeSize={this.changeTableSize.bind(this)}
-              />
-              <Screenfull />
-              <C
-                {...this.$props}
-                onUpdateColumn={this.updateTableColumn.bind(this)}
-              />
             </NSpace>
           ),
           footer: () => this.$slots.tableFooter?.(),
+          action: () => this.$slots.tableAction?.(),
         }}
       </NCard>
     )

src/components/RTable/src/components/C.tsx

@@ -9,15 +9,6 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-/**
- *
- * TODO:
- * - 使用 computed 获取数据时，将数据转换为 NTree 格式，并且补充固定列操作栏按钮与初始化样式
- * - 使用 computed 收集固定列、拖拽列后的数据
- * - 点击固定列按钮后，激活样式
- * - Table 父组件通知更新 columns，使用 v-model:columns 方式绑定时，即可实现拖拽、动态展示列、固定列操作
- */
-
 import { NPopover, NSpace, NTree } from 'naive-ui'
 import RIcon from '@/components/RIcon/index'
 
@@ -51,7 +42,7 @@ const RowIconRender = ({
   customClassName?: string
 }) => {
   return (
-    <NPopover>
+    <NPopover showArrow={false}>
       {{
         trigger: () => (
           <RIcon
@@ -103,22 +94,15 @@ export default defineComponent({
     },
   },
   setup(props) {
-    /** 深拷贝 columns 避免修改源数据 */
+    // 深拷贝 columns 避免修改源数据
     const treeDataSource = computed({
       get: () => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return props.columns.map((curr: any, idx) => {
+        return props.columns.map((curr, idx) => {
-          const {
+          const { key, title, children, fixed, isResizable, ...args } =
-            key,
+            curr as C
-            title,
+          const isLeftFixedActivated = fixed === 'left'
-            children,
+          const isRightFixedActivated = fixed === 'right'
-            fixed,
-            resizable: $resizable,
-            ...args
-          } = curr
-          const isLeftFixedActivated = fixed && fixed === 'left'
-          const isRightFixedActivated = fixed && fixed === 'right'
-          const isResizable = !!$resizable
           const attr = {
             ...args,
             title,
@@ -126,32 +110,49 @@ export default defineComponent({
             fixed,
             isLeftFixedActivated,
             isRightFixedActivated,
+            isResizable,
           }
 
           return {
             ...attr,
             suffix: () => (
-              <NSpace wrapItem={false} style="padding-left: 24px;">
+              <NSpace wrapItem={false} style="padding-left: 32px;">
                 <RowIconRender
                   icon="row_head"
                   title="固定在列首"
                   customClassName={
-                    isLeftFixedActivated ? 'r-table__c-fixed--active' : ''
+                    isLeftFixedActivated ? 'r-table__c-tool-icon--active' : ''
                   }
                   onClick={fixedClick.bind(this, 'left', attr, idx)}
                 />
+                <NPopover showArrow={false}>
+                  {{
+                    trigger: () => (
+                      <RIcon
+                        name="resize_h"
+                        size={config.tableIconSize}
+                        cursor="pointer"
+                        customClassName={
+                          isResizable ? 'r-table__c-tool-icon--active' : ''
+                        }
+                        onClick={resizableClick.bind(this, attr, idx)}
+                      />
+                    ),
+                    default: () => '修改列宽',
+                  }}
+                </NPopover>
                 <RowIconRender
                   icon="row_end"
                   title="固定在列尾"
                   customClassName={
-                    isRightFixedActivated ? 'r-table__c-fixed--active' : ''
+                    isRightFixedActivated ? 'r-table__c-tool-icon--active' : ''
                   }
                   onClick={fixedClick.bind(this, 'right', attr, idx)}
                 />
               </NSpace>
             ),
           }
-        })
+        }) as C[]
       },
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       set: () => {},
@@ -165,15 +166,20 @@ export default defineComponent({
       }
     }
 
-    const fixedClick: FixedClick = (type, option, index) => {
+    const resizableClick = (option: C, index: number) => {
-      const key = `${type}FixedActivated`
+      console.log('🚀 ~ resizableClick ~ option:', option.isResizable)
+      option['isResizable'] = !option['isResizable']
+      option['resizable'] = option['isResizable']
+      treeDataSource.value[index] = option
 
-      if (key === 'leftFixedActivated') {
+      event(treeDataSource.value)
-        option['rightFixedActivated'] = false
-      } else if (key === 'rightFixedActivated') {
-        option['leftFixedActivated'] = false
     }
 
+    const fixedClick: FixedClick = (type, option, index) => {
+      const key = `${type}FixedActivated`
+      const otherKey = `${type === 'left' ? 'right' : 'left'}FixedActivated`
+
+      option[otherKey] = false
       option[key] = !option[key]
       option[key] ? (option['fixed'] = type) : (option['fixed'] = void 0)
       treeDataSource.value[index] = option
@@ -184,7 +190,7 @@ export default defineComponent({
     const treeDrop = ({ node, dragNode, dropPosition }: TreeDropInfo) => {
       const [dragNodeSiblings, dragNodeIndex] = findSiblingsAndIndex(
         dragNode,
-        treeDataSource.value,
+        treeDataSource.value as TreeOption[],
       )
 
       if (dragNodeSiblings === null || dragNodeIndex === null) {
@@ -195,7 +201,7 @@ export default defineComponent({
 
       const [nodeSiblings, nodeIndex] = findSiblingsAndIndex(
         node,
-        treeDataSource.value,
+        treeDataSource.value as TreeOption[],
       )
 
       if (nodeSiblings === null || nodeIndex === null) {
@@ -216,7 +222,7 @@ export default defineComponent({
   },
   render() {
     return (
-      <NPopover displayDirective="show" trigger="click">
+      <NPopover displayDirective="show" trigger="click" showArrow={false}>
         {{
           trigger: () => (
             <RIcon
@@ -232,7 +238,9 @@ export default defineComponent({
               data={this.treeDataSource as TreeOption[]}
               blockLine
               draggable
+              keyboard={false}
               labelField="title"
+              selectable={false}
               renderSwitcherIcon={renderSwitcherIcon.bind(this)}
               onDrop={this.treeDrop.bind(this)}
             />

src/components/RTable/src/components/Fullscreen.tsx

@@ -0,0 +1,51 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-10-04
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { NPopover } from 'naive-ui'
+import RIcon from '@/components/RIcon/index'
+
+import config from '../config'
+import { useFullscreen } from 'vue-hooks-plus'
+
+import type { TableProvider } from '../type'
+
+export default defineComponent({
+  name: 'TableFullscreen',
+  setup() {
+    const { wrapperRef } = inject<TableProvider>(
+      config.tableKey,
+      {} as TableProvider,
+    )
+    const [isFullscreen, { toggleFullscreen }] = useFullscreen(wrapperRef)
+
+    return {
+      toggleFullscreen,
+      isFullscreen,
+    }
+  },
+  render() {
+    return (
+      <NPopover showArrow={false}>
+        {{
+          trigger: () => (
+            <RIcon
+              name="fullscreen"
+              size={config.tableIconSize}
+              cursor="pointer"
+              onClick={this.toggleFullscreen.bind(this)}
+            />
+          ),
+          default: () => (this.isFullscreen ? '取消全屏' : '全屏表格'),
+        }}
+      </NPopover>
+    )
+  },
+})

src/components/RTable/src/components/Print.tsx

@@ -23,7 +23,7 @@ export default defineComponent({
   props,
   setup(props) {
     const { uuidTable } = inject<TableProvider>(
-      'tableProvider',
+      config.tableKey,
       {} as TableProvider,
     )
 
@@ -48,7 +48,7 @@ export default defineComponent({
   },
   render() {
     return (
-      <NPopover>
+      <NPopover showArrow={false}>
         {{
           trigger: () => (
             <RIcon

src/components/RTable/src/components/Screenfull.tsx

@@ -1,64 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-04
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import { NPopover } from 'naive-ui'
-import RIcon from '@/components/RIcon/index'
-
-import screenfull from 'screenfull'
-import config from '../config'
-
-import type { TableProvider } from '../type'
-
-export default defineComponent({
-  name: 'TableScreenfull',
-  setup() {
-    const { uuidWrapper } = inject<TableProvider>(
-      'tableProvider',
-      {} as TableProvider,
-    )
-    const currentTableIsFullscreen = ref(screenfull.isFullscreen) // 缓存当前是否处于全屏状态
-
-    const fullscreenTableClick = () => {
-      const el = document.getElementById(uuidWrapper)
-
-      currentTableIsFullscreen.value = !currentTableIsFullscreen.value
-
-      if (el && screenfull.isEnabled && currentTableIsFullscreen.value) {
-        screenfull.request(el)
-      } else {
-        screenfull.exit()
-      }
-    }
-
-    return {
-      fullscreenTableClick,
-      currentTableIsFullscreen,
-    }
-  },
-  render() {
-    return (
-      <NPopover>
-        {{
-          trigger: () => (
-            <RIcon
-              name="fullscreen"
-              size={config.tableIconSize}
-              cursor="pointer"
-              onClick={this.fullscreenTableClick.bind(this)}
-            />
-          ),
-          default: () =>
-            this.currentTableIsFullscreen ? '取消全屏' : '全屏表格',
-        }}
-      </NPopover>
-    )
-  },
-})

src/components/RTable/src/components/Size.tsx

@@ -71,7 +71,7 @@ export default defineComponent({
         trigger="click"
         onUpdateValue={this.updatePopselectValue.bind(this)}
       >
-        <NPopover>
+        <NPopover showArrow={false}>
           {{
             trigger: () => (
               <RIcon

src/components/RTable/src/config.ts

@@ -11,4 +11,5 @@
 
 export default {
   tableIconSize: '18',
+  tableKey: Symbol('r-table'),
 }

src/components/RTable/src/index.scss

@@ -1,11 +1,13 @@
-.r-table__c-tree.n-tree .n-tree-node-switcher.n-tree-node-switcher--hide {
+.r-table__c-tree {
+  & .n-tree-node-switcher.n-tree-node-switcher--hide {
     visibility: visible;
-}
+  }
 
-.r-table__c-tree.n-tree .ray-icon {
+  & .ray-icon {
-  &.r-table__c-fixed--active {
+    &.r-table__c-tool-icon--active {
       color: var(--ray-theme-primary-color);
     }
+  }
 }
 
 .r-table__setting:hover {

src/components/RTable/src/props.ts

@@ -28,9 +28,14 @@ const props = {
     default: null,
   },
   toolOptions: {
-    /** 自定义传递工具栏拓展 */
+    /** 自定义拓展工具栏 */
     type: Array as PropType<(VNode | (() => VNode))[]>,
   },
+  coverTool: {
+    /** 当 toolOptions 配置时，是否覆盖原工具栏 */
+    type: Boolean,
+    default: false,
+  },
   contextMenuOptions: {
     /**
      *

src/components/RTable/src/type.ts

@@ -21,11 +21,9 @@ export type DropdownMixedOption =
 
 export interface DownloadTableOptions {
   fileName?: string
-  // icon?: TableActionIcon
 }
 
 export interface PrintTableOptions {
-  // icon?: TableActionIcon
   printOptions?: Omit<PrintConfiguration.Configuration, 'printable' | 'type'>
   type?: PrintConfiguration.PrintTypes
 }
@@ -33,14 +31,21 @@ export interface PrintTableOptions {
 export interface TableProvider {
   uuidWrapper: string
   uuidTable: string
+  wrapperRef: Ref<HTMLElement | null>
 }
 
 export interface C extends DataTableBaseColumn {
   leftFixedActivated?: boolean
   rightFixedActivated?: boolean
   resizable?: boolean
+  isResizable?: boolean
+  isLeftFixedActivated?: boolean
+  isRightFixedActivated?: boolean
+  children?: C[]
 }
 
 export type OverridesTableColumn<T = Recordable> = C | DataTableColumn<T>
 
-export interface TableInst extends Omit<DataTableInst, 'clearFilter'> {}
+export interface TableInst extends TableProvider {
+  rTableInst: Omit<DataTableInst, 'clearFilter'>
+}

src/layout/components/SiderBar/index.tsx

@@ -30,8 +30,8 @@ import AppAvatar from '@/app-components/app/AppAvatar/index'
 import { useSetting } from '@/store'
 import { LOCAL_OPTIONS } from '@/app-config/localConfig'
 import { useAvatarOptions, avatarDropdownClick } from './hook'
-import screenfull from 'screenfull'
 import { useI18n } from '@/hooks/web/index'
+import { useFullscreen } from 'vue-hooks-plus'
 
 import type { IconEventMapOptions, IconEventMap } from './type'
 
@@ -43,6 +43,9 @@ const SiderBar = defineComponent({
     const { t } = useI18n()
     const { updateLocale, changeSwitcher } = settingStore
 
+    const [isFullscreen, { toggleFullscreen }] = useFullscreen(
+      document.getElementsByTagName('html')[0],
+    )
     const { drawerPlacement, breadcrumbSwitch, reloadRouteSwitch } =
       storeToRefs(settingStore)
     const showSettings = ref(false)
@@ -50,7 +53,6 @@ const SiderBar = defineComponent({
       display: 'flex',
     }
     const globalSearchShown = ref(false)
-    const isScreenfull = ref(screenfull.isFullscreen)
 
     /**
      *
@@ -81,7 +83,7 @@ const SiderBar = defineComponent({
         name: 'fullscreen',
         size: 18,
         tooltip: computed(() =>
-          isScreenfull.value
+          isFullscreen.value
             ? t('headerTooltip.CancelFullScreen')
             : t('headerTooltip.FullScreen'),
         ),
@@ -114,17 +116,7 @@ const SiderBar = defineComponent({
         window.open('https://github.com/XiaoDaiGua-Ray/ray-template')
       },
       fullscreen: () => {
-        if (!screenfull.isEnabled) {
+        toggleFullscreen()
-          return (() => {
-            window.$message.warning('您的浏览器不支持全屏~')
-          })()
-        } else {
-          return (() => {
-            screenfull.toggle()
-
-            isScreenfull.value = !screenfull.isFullscreen
-          })()
-        }
       },
       search: () => {
         globalSearchShown.value = true

src/views/demo/table/index.tsx

@@ -10,7 +10,6 @@
  */
 
 import {
-  NLayout,
   NTag,
   NButton,
   NGridItem,
@@ -18,14 +17,13 @@ import {
   NInput,
   NDatePicker,
   NSwitch,
-  NP,
-  NH2,
-  NUl,
-  NLi,
   NSpace,
+  NPopover,
+  NCard,
 } from 'naive-ui'
 import RCollapseGrid from '@/components/RCollapseGrid/index'
 import RTable from '@/components/RTable/index'
+import RIcon from '@/components/RIcon/index'
 
 import type { DataTableColumns } from 'naive-ui'
 import type { TableInst } from '@/components/RTable/index'
@@ -41,8 +39,6 @@ type RowData = {
 const TableView = defineComponent({
   name: 'TableView',
   setup() {
-    const tableRef = ref<TableInst>()
-
     const baseColumns = [
       {
         title: 'Name',
@@ -153,37 +149,15 @@ const TableView = defineComponent({
       baseColumns,
       tableMenuOptions,
       handleMenuSelect,
-      tableRef,
     }
   },
   render() {
     return (
-      <div>
+      <NSpace wrapItem={false} vertical>
-        <NH2>RayTable 组件使用</NH2>
+        <NCard title="RTable">
-        <NUl alignText>
+          基于 NDataTable 封装，继承该组件所有 props 属性。查看 RTable props
-          <NLi>
+          文件即可查看该组件拓展项
-            该组件基于 Naive UI DataTable
+        </NCard>
-            组件封装。实现右键菜单、表格标题、导出为 excel 操作栏等功能
-          </NLi>
-          <NLi>RayTable 完全继承 DataTable 的所有属性与方法</NLi>
-          <NLi>
-            相关拓展 props 属性，可以在源码位置
-            src/components/RayTable/src/props.ts 中查看相关代码与注释
-          </NLi>
-          <NLi>该组件可以配合 RayCollapseGird 组件使用实现可折叠搜索栏</NLi>
-        </NUl>
-        <NH2>配合 RayCollapseGird 组件使用与 RayTable 拓展功能</NH2>
-        <NP>
-          使用响应式方法代理 columns 并且打开 action
-          则可以启用操作栏(v-model:columns)
-        </NP>
-        <NP>拖拽操作栏动态切换表格列</NP>
-        <NP>点击左右固定按钮，即可动态固定列</NP>
-        <NP>点击修改列宽度，即可拖动列修改宽度</NP>
-        <NP>点击导出按钮即可导出 excel 表格，默认以列为表头输出</NP>
-        <NP>点击打印按钮即可打印该表格</NP>
-        <NP>右键菜单</NP>
-        <NP>全屏表格</NP>
         <RCollapseGrid
           bordered={false}
           collapsedRows={this.gridCollapsedRows}
@@ -224,7 +198,6 @@ const TableView = defineComponent({
         </RCollapseGrid>
         <RTable
           style="margin-top: 18px"
-          ref="tableRef"
           scrollX={2000}
           title={
             <NSpace align="center">
@@ -242,33 +215,30 @@ const TableView = defineComponent({
           contextMenuOptions={this.tableMenuOptions}
           loading={this.tableLoading}
           onContextMenuClick={this.handleMenuSelect.bind(this)}
-        ></RTable>
+          toolOptions={[
-        {/* <RayTable
+            <NPopover>
-          style="margin-top: 18px"
+              {{
-          ref="tableRef"
+                trigger: () => (
-          scrollX={2000}
+                  <RIcon
-          title={
+                    name="search"
-            <NSpace align="center">
+                    size="18"
-              <span>标题插槽:</span>
+                    cursor="pointer"
-              <NSwitch
+                    onClick={() => {
-                onUpdateValue={(value: boolean) => (this.tableLoading = value)}
+                      window.$message.info('点击了搜索按钮')
-              ></NSwitch>
-            </NSpace>
-          }
-          data={this.tableData}
-          v-model:columns={this.actionColumns}
-          pagination={{
-            pageSize: 10,
                     }}
-          loading={this.tableLoading}
+                  />
-          rightClickOptions={this.tableMenuOptions}
+                ),
-          onRightMenuClick={this.handleMenuSelect.bind(this)}
+                default: () => '我是自定义工具栏示例',
+              }}
+            </NPopover>,
+          ]}
         >
           {{
             tableFooter: () => '表格的底部内容区域插槽，有时候你可能会用上',
+            tableAction: () => '表格的操作区域内容插槽，有时候可能会用上',
           }}
-        </RayTable> */}
+        </RTable>
-      </div>
+      </NSpace>
     )
   },
 })

vite.pliugin.config.ts

@@ -175,7 +175,6 @@ export default function (mode: string): PluginOption[] {
         'vuedraggable',
         'xlsx',
         'axios',
-        'screenfull',
         'print-js',
         'clipboard',
         'lodash-es',