更新 RayTable 组件部分细节

src/components/RayTable/src/components/TableScreenfull/index.scss

@@ -0,0 +1,20 @@
+@keyframes scaleScreenfull {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.3);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.tay-table-icon__screenfull {
+  transition: transform 0.3s var(--r-bezier);
+
+  &:hover {
+    animation: scaleScreenfull 0.3s linear;
+    animation-direction: alternate;
+  }
+}

src/components/RayTable/src/components/TableScreenfull/index.tsx

@@ -9,6 +9,8 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
+import './index.scss'
+
 import { NPopover } from 'naive-ui'
 import RayIcon from '@/components/RayIcon/index'
 
@@ -51,7 +53,7 @@ const TableScreenfull = defineComponent({
             <RayIcon
               name="fullscreen"
               size="18"
-              customClassName="ray-table-icon"
+              customClassName="ray-table-icon tay-table-icon__screenfull"
               onClick={this.handleScreenfull.bind(this)}
             />
           ),

src/components/RayTable/src/components/TableSetting/index.tsx

@@ -9,11 +9,19 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
+/**
+ *
+ * 依赖 table columns 属性操作
+ *
+ * 支持拖拽修改列顺序、动态修改列宽度、固定(锁列)
+ */
+
 import './index.scss'
 
 import { NCard, NPopover, NEllipsis } from 'naive-ui'
 import RayIcon from '@/components/RayIcon/index'
 import VueDraggable from 'vuedraggable'
+
 import { setupSettingOptions } from './hook'
 import { useSetting } from '@/store'
 
@@ -28,17 +36,19 @@ const TableSetting = defineComponent({
   name: 'TableSetting',
   emits: ['columnsUpdate'],
   setup(_, { emit }) {
-    const settingStore = useSetting()
     const tableSettingProvider = inject(
       'tableSettingProvider',
       {} as TableSettingProvider,
     )
+    const settingStore = useSetting()
+
     const settingOptions = ref(
       setupSettingOptions(tableSettingProvider.modelColumns.value),
     ) // 表格表头
     const disableDraggable = ref(true) // 拖拽开关(暂时弃用)
     const { themeValue } = storeToRefs(settingStore)
 
+    /** 拖拽结束后 */
     const handleDraggableEnd = () => {
       emit('columnsUpdate', settingOptions.value)
     }
@@ -99,7 +109,7 @@ const TableSetting = defineComponent({
      *
      * @param idx 索引
      *
-     * @remark 动态设置列宽度
+     * @remark 动态设置列宽度, 如果表格并未出现横向滚动条则不会启用拖拽修改列按钮
      */
     const handleResizeColumnClick = (idx: number) => {
       const value = settingOptions.value[idx]

src/components/RayTable/src/index.scss

@@ -12,7 +12,7 @@
 
   & .ray-table-header-extra__space {
     display: flex;
-    gap: 0 1px;
+    gap: 0 12px;
     align-items: center;
   }
 }

src/components/RayTable/src/index.tsx

@@ -26,6 +26,14 @@
  * 基于 `xlsx.js` 实现输出 `excel`
  */
 
+/**
+ *
+ * 为什么有些拓展功能是写在该组件内, 有些则是完全抽离出去呢...
+ * 好问题, 因为我一开始没想到而且我又想偷懒
+ *
+ * 凑合凑合看吧, 等我啥时候有空再抽离出去
+ */
+
 import './index.scss'
 
 import { NDataTable, NCard, NDropdown, NDivider } from 'naive-ui'
@@ -49,8 +57,8 @@ const RayTable = defineComponent({
   props: props,
   emits: ['update:columns', 'menuSelect', 'exportSuccess', 'exportError'],
   setup(props, { emit }) {
-    const tableUUID = uuid()
-    const rayTableUUID = uuid()
+    const tableUUID = uuid() // 表格 id, 用于打印表格
+    const rayTableUUID = uuid() // RayTable id, 用于全屏表格
     const modelRightClickMenu = computed(() => props.rightClickMenu)
     const modelColumns = computed({
       get: () => props.columns,
@@ -73,10 +81,7 @@ const RayTable = defineComponent({
     })
     const tableSize = ref(props.size)
 
-    /**
-     *
-     * 右键菜单注入
-     */
+    /** 注入相关属性 */
     provide('tableSettingProvider', {
       modelRightClickMenu,
       modelColumns,
@@ -84,6 +89,7 @@ const RayTable = defineComponent({
       rayTableUUID,
     })
 
+    /** 拖拽更新后的表格列 */
     const handleColumnsUpdate = (arr: ActionOptions[]) => {
       modelColumns.value = arr
     }
@@ -182,6 +188,7 @@ const RayTable = defineComponent({
       print(options)
     }
 
+    /** 更新后的表格尺寸 */
     const handleChangeTableSize = (size: ComponentSize) => {
       tableSize.value = size
     }
@@ -252,7 +259,6 @@ const RayTable = defineComponent({
                   negativeText={this.printNegativeText}
                   onPositive={this.handlePrintPositive.bind(this)}
                 />
-                <NDivider vertical />
                 {/* 输出为Excel表格 */}
                 <TableAction
                   icon={this.exportExcelIcon}
@@ -262,15 +268,12 @@ const RayTable = defineComponent({
                   negativeText={this.exportNegativeText}
                   onPositive={this.handleExportPositive.bind(this)}
                 />
-                <NDivider vertical />
                 {/* 表格尺寸调整 */}
                 <TableSize
                   onChangeSize={this.handleChangeTableSize.bind(this)}
                 />
-                <NDivider vertical />
                 {/* 全屏表格 */}
                 <TableScreenfull />
-                <NDivider vertical />
                 {/* 表格列操作 */}
                 <TableSetting
                   onColumnsUpdate={this.handleColumnsUpdate.bind(this)}