v3.1.3，补充RayTable全屏、尺寸修改功能

cfg.ts

@@ -1,6 +1,10 @@
 import path from 'node:path'
 
-import { HTMLTitlePlugin, buildOptions } from './vite-plugin/index'
+import {
+  HTMLTitlePlugin,
+  buildOptions,
+  mixinCSSPlugin,
+} from './vite-plugin/index'
 
 import type { AppConfigExport } from './src/types/cfg'
 
@@ -20,6 +24,22 @@ const config: AppConfigExport = {
     url: '/dashboard',
     jumpType: 'station',
   },
+  /**
+   *
+   * 预处理全局需要注入的 css 文件
+   *
+   * 预设:
+   *   - ./src/styles/mixins.scss
+   *   - ./src/styles/setting.scss
+   *   - ./src/styles/theme.scss
+   *
+   * 如果需要删除或者修改, 需要同步修改目录下的 css 文件
+   */
+  mixinCSS: mixinCSSPlugin([
+    './src/styles/mixins.scss',
+    './src/styles/setting.scss',
+    './src/styles/theme.scss',
+  ]),
   /**
    *
    * 版权信息

src/components/RayLink/index.tsx

@@ -21,31 +21,31 @@ const RayLink = defineComponent({
         key: 'yun-cloud-images',
         src: 'https://yunkuangao.com/',
         tooltip: '云图床',
-        icon: 'https://yunkuangao.com/images/20170801_005902048_iOS.md.jpg',
+        icon: 'https://yunkuangao.me/wp-content/uploads/2022/05/cropped-cropped-QQ%E5%9B%BE%E7%89%8720220511113928.jpg',
       },
       {
         key: 'ray-js-note',
         src: 'https://note.youdao.com/s/ObWEe2BB',
         tooltip: 'Ray的前端学习笔记',
-        icon: 'https://yunkuangao.com/images/longmao.jpeg',
+        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
       },
       {
         key: 'ray-js-cover',
         src: 'https://note.youdao.com/s/IC8xKPdB',
         tooltip: 'Ray的面试题总结',
-        icon: 'https://yunkuangao.com/images/longmao.jpeg',
+        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
       },
       {
         key: 'ray-template-doc',
         src: 'https://xiaodaigua-ray.github.io/ray-template-doc/',
         tooltip: 'Ray Template Doc',
-        icon: 'https://yunkuangao.com/images/longmao.jpeg',
+        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
       },
       {
         key: 'ray-template-doc-out',
         src: 'https://ray-template.yunkuangao.com/',
         tooltip: 'Ray Template Doc (国内地址)',
-        icon: 'https://yunkuangao.com/images/longmao.jpeg',
+        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
       },
     ]
 

src/components/RayTable/src/components/TableAction/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NPopconfirm, NSpace, NButton } from 'naive-ui'
+import { NPopconfirm, NSpace, NButton, NPopover } from 'naive-ui'
 import RayIcon from '@/components/RayIcon/index'
 
 export type EmitterType = 'positive' | 'negative'
@@ -65,6 +65,10 @@ const TableAction = defineComponent({
       type: Number,
       default: 18,
     },
+    popoverContent: {
+      type: String,
+      required: true,
+    },
   },
   emits: ['positive', 'negative'],
   setup(_, { emit }) {
@@ -83,6 +87,9 @@ const TableAction = defineComponent({
   },
   render() {
     return (
+      <NPopover>
+        {{
+          trigger: () => (
             <NPopconfirm v-model:show={this.showPopoconfirm} showArrow={true}>
               {{
                 trigger: () => (
@@ -114,6 +121,10 @@ const TableAction = defineComponent({
                 ),
               }}
             </NPopconfirm>
+          ),
+          default: () => this.popoverContent,
+        }}
+      </NPopover>
     )
   },
 })

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

@@ -0,0 +1,65 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-03-11
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { NPopover } from 'naive-ui'
+import RayIcon from '@/components/RayIcon/index'
+
+import screenfull from 'screenfull'
+
+import type { TableSettingProvider } from '@/components/RayTable/src/type'
+
+const TableScreenfull = defineComponent({
+  name: 'TableScreenfull',
+  setup() {
+    const tableSettingProvider = inject(
+      'tableSettingProvider',
+      {} as TableSettingProvider,
+    )
+
+    const rayTableUUID = computed(() => tableSettingProvider.rayTableUUID)
+    let currentTableIsFullscreen = screenfull.isFullscreen // 缓存当前是否处于全屏状态
+
+    const handleScreenfull = () => {
+      const el = document.getElementById(rayTableUUID.value)
+
+      currentTableIsFullscreen = !currentTableIsFullscreen
+
+      if (el && screenfull.isEnabled && currentTableIsFullscreen) {
+        screenfull.request(el)
+      } else {
+        screenfull.exit()
+      }
+    }
+
+    return {
+      handleScreenfull,
+    }
+  },
+  render() {
+    return (
+      <NPopover>
+        {{
+          trigger: () => (
+            <RayIcon
+              name="fullscreen"
+              size="18"
+              customClassName="ray-table-icon"
+              onClick={this.handleScreenfull.bind(this)}
+            />
+          ),
+          default: () => '全屏表格',
+        }}
+      </NPopover>
+    )
+  },
+})
+
+export default TableScreenfull

src/components/RayTable/src/components/TableSetting/index.scss

@@ -1,7 +1,3 @@
-$iconSpace: 5px;
-$width: 140px;
-$activedColor: #2080f0;
-
 .ray-table__setting:hover {
   transform: rotate(180deg);
   transition: transform 0.3s var(--r-bezier);
@@ -32,12 +28,12 @@ $activedColor: #2080f0;
 
     &.draggable-item--dark {
       &:hover {
-        background-color: rgba(255, 255, 255, 0.08);
+        background-color: $hoverDarkBackgroundColor;
       }
     }
 
     &:hover {
-      background-color: #e8f2fd;
+      background-color: $hoverLightBackgroundColor;
 
       & .draggable-item__d--icon {
         opacity: 1;

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

@@ -10,7 +10,8 @@
  */
 
 import './index.scss'
-import { NCard, NPopover, NEllipsis, NButton } from 'naive-ui'
+
+import { NCard, NPopover, NEllipsis } from 'naive-ui'
 import RayIcon from '@/components/RayIcon/index'
 import VueDraggable from 'vuedraggable'
 import { setupSettingOptions } from './hook'

src/components/RayTable/src/components/TableSize/index.scss

@@ -0,0 +1,45 @@
+.ray-table__table-size {
+  padding: 0 !important;
+
+  & .n-card__content {
+    padding: 0 !important;
+    margin: 0 !important;
+
+    & .table-size__dropdown {
+      box-sizing: border-box;
+      padding: 4px 0;
+      background-color: transparent;
+
+      & .table-size__dropdown-wrapper {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+
+        & .dropdown-item {
+          height: 34px;
+          line-height: 34px;
+          text-align: center;
+          cursor: pointer;
+          padding: 0 16px;
+          transition: background-color 0.3s var(--r-bezier), color 0.3s var(--r-bezier);
+
+          &.dropdown-item--active,
+          &:hover {
+            background-color: $hoverLightBackgroundColor;
+            color: $activedColor;
+          }
+        }
+      }
+    }
+  }
+}
+
+.ray-template--dark {
+  & .table-size__dropdown-wrapper {
+    & .dropdown-item:hover {
+      background-color: $hoverDarkBackgroundColor;
+      color: $activedColor;
+    }
+  }
+}

src/components/RayTable/src/components/TableSize/index.tsx

@@ -0,0 +1,125 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-03-10
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+import { NPopover, NCard } from 'naive-ui'
+import RayIcon from '@/components/RayIcon/index'
+
+import type { TableSettingProvider } from '@/components/RayTable/src/type'
+
+const TableSize = defineComponent({
+  name: 'TableSize',
+  emits: ['changeSize'],
+  setup(_, { emit }) {
+    const tableSettingProvider = inject(
+      'tableSettingProvider',
+      {} as TableSettingProvider,
+    )
+
+    const popoverShow = ref(false)
+    const currentSize = ref(tableSettingProvider.size)
+    const size = computed({
+      get: () => tableSettingProvider.size,
+      set: (val) => {
+        currentSize.value = val
+      },
+    })
+    const sizeOptions = ref([
+      {
+        label: '默认',
+        key: 'medium',
+      },
+      {
+        label: '紧凑',
+        key: 'small',
+      },
+      {
+        label: '宽松',
+        key: 'large',
+      },
+    ])
+
+    const handleDropdownClick = (key: ComponentSize) => {
+      sizeOptions.value.forEach((curr) => {
+        if (curr.key === key) {
+          size.value = key
+
+          popoverShow.value = false
+
+          emit('changeSize', key)
+        }
+      })
+    }
+
+    return {
+      sizeOptions,
+      currentSize,
+      handleDropdownClick,
+      popoverShow,
+    }
+  },
+  render() {
+    return (
+      <NPopover
+        v-model:show={this.popoverShow}
+        trigger="click"
+        placement="bottom"
+        showArrow={false}
+        raw
+      >
+        {{
+          trigger: () => (
+            <NPopover>
+              {{
+                trigger: () => (
+                  <RayIcon
+                    name="adjustment"
+                    size="18"
+                    customClassName="ray-table-icon"
+                  />
+                ),
+                default: () => '表格密度',
+              }}
+            </NPopover>
+          ),
+          default: () => (
+            <NCard bordered={false} class="ray-table__table-size">
+              <div class="table-size__dropdown">
+                <div class="table-size__dropdown-wrapper">
+                  {this.sizeOptions.map((curr) => (
+                    <div
+                      class={[
+                        'dropdown-item',
+                        curr.key === this.currentSize
+                          ? 'dropdown-item--active'
+                          : '',
+                      ]}
+                      key={curr.key}
+                      onClick={this.handleDropdownClick.bind(
+                        this,
+                        curr.key as ComponentSize,
+                      )}
+                    >
+                      <div class="drop-item__label">{curr.label}</div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </NCard>
+          ),
+        }}
+      </NPopover>
+    )
+  },
+})
+
+export default TableSize

src/components/RayTable/src/index.tsx

@@ -15,7 +15,7 @@
  *
  * 完全继承 `NDataTable`, 该组件继承 `NDataTable Props` 属性和方法
  *
- * 实现: 抬头, 操作栏, 右键菜单功能拓展, 输出 `excel`
+ * 实现: 抬头, 操作栏, 右键菜单功能拓展, 输出 `excel`, 表格尺寸调整
  *
  * 右键菜单功能, 需要同时启用 `showMenu` 与配置菜单选项才能正常使用
  *
@@ -27,9 +27,12 @@
  */
 
 import './index.scss'
+
 import { NDataTable, NCard, NDropdown, NDivider } from 'naive-ui'
 import TableSetting from './components/TableSetting/index'
 import TableAction from './components/TableAction/index'
+import TableSize from './components/TableSize/index'
+import TableScreenfull from './components/TableScreenfull/index'
 
 import props from './props'
 import print from 'print-js'
@@ -47,6 +50,7 @@ const RayTable = defineComponent({
   emits: ['update:columns', 'menuSelect', 'exportSuccess', 'exportError'],
   setup(props, { emit }) {
     const tableUUID = uuid()
+    const rayTableUUID = uuid()
     const modelRightClickMenu = computed(() => props.rightClickMenu)
     const modelColumns = computed({
       get: () => props.columns,
@@ -59,7 +63,7 @@ const RayTable = defineComponent({
       y: 0,
       showMenu: false,
     })
-    let prevRightClickIndex = -1
+    let prevRightClickIndex = -1 // 缓存上次点击索引位置
     const cssVars = computed(() => {
       const cssVar = {
         '--ray-table-header-space': props.tableHeaderSpace,
@@ -67,6 +71,7 @@ const RayTable = defineComponent({
 
       return cssVar
     })
+    const tableSize = ref(props.size)
 
     /**
      *
@@ -75,6 +80,8 @@ const RayTable = defineComponent({
     provide('tableSettingProvider', {
       modelRightClickMenu,
       modelColumns,
+      size: props.size,
+      rayTableUUID,
     })
 
     const handleColumnsUpdate = (arr: ActionOptions[]) => {
@@ -175,8 +182,13 @@ const RayTable = defineComponent({
       print(options)
     }
 
+    const handleChangeTableSize = (size: ComponentSize) => {
+      tableSize.value = size
+    }
+
     return {
       tableUUID,
+      rayTableUUID,
       handleColumnsUpdate,
       ...toRefs(menuConfig),
       handleRowProps,
@@ -184,11 +196,18 @@ const RayTable = defineComponent({
       handleExportPositive,
       handlePrintPositive,
       cssVars,
+      handleChangeTableSize,
+      tableSize,
     }
   },
   render() {
     return (
-      <NCard class="ray-table" bordered={this.bordered} style={[this.cssVars]}>
+      <NCard
+        class="ray-table"
+        bordered={this.bordered}
+        style={[this.cssVars]}
+        id={this.rayTableUUID}
+      >
         {{
           default: () => (
             <>
@@ -196,6 +215,7 @@ const RayTable = defineComponent({
                 id={this.tableUUID}
                 {...this.$props}
                 rowProps={this.handleRowProps.bind(this)}
+                size={this.tableSize}
               >
                 {{
                   empty: () => this.$slots?.empty?.(),
@@ -227,6 +247,7 @@ const RayTable = defineComponent({
                 <TableAction
                   icon={this.printIcon}
                   tooltip={this.printTooltip}
+                  popoverContent="打印表格"
                   positiveText={this.printPositiveText}
                   negativeText={this.printNegativeText}
                   onPositive={this.handlePrintPositive.bind(this)}
@@ -236,11 +257,20 @@ const RayTable = defineComponent({
                 <TableAction
                   icon={this.exportExcelIcon}
                   tooltip={this.exportTooltip}
+                  popoverContent="导出表格"
                   positiveText={this.exportPositiveText}
                   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)}

src/components/RayTable/src/type.ts

@@ -38,6 +38,8 @@ export type RightClickMenu = ComputedRef<DropdownMixedOption[]>
 export interface TableSettingProvider {
   modelRightClickMenu: RightClickMenu
   modelColumns: SettingOptions
+  size: ComponentSize
+  rayTableUUID: string
 }
 
 export interface ExportExcelProvider {

src/icons/adjustment.svg

@@ -0,0 +1,6 @@
+<svg t="1678440512111" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="11168" width="64" height="64">
+  <path
+    d="M116.363636 82.013091c0 19.595636 15.872 35.467636 35.467637 35.467636h720.337454a35.467636 35.467636 0 0 0 0-70.935272H151.831273C132.235636 46.545455 116.363636 62.417455 116.363636 82.013091z m0 859.973818C116.363636 961.582545 132.235636 977.454545 151.831273 977.454545h720.337454a35.467636 35.467636 0 1 0 0-70.935272H151.831273c-19.595636 0-35.467636 15.872-35.467637 35.467636z m511.976728-590.359273a8.587636 8.587636 0 0 0 6.702545-13.847272l-118.690909-150.877091a8.378182 8.378182 0 0 0-13.312 0l-118.690909 150.877091a8.564364 8.564364 0 0 0 6.725818 13.847272h78.545455v316.881455H395.636364a8.587636 8.587636 0 0 0-6.702546 13.847273l118.690909 150.760727a8.378182 8.378182 0 0 0 13.312 0l118.690909-150.760727a8.564364 8.564364 0 0 0-6.725818-13.847273h-78.545454V351.650909H628.363636z"
+    fill="currentColor" p-id="11169"></path>
+</svg>

src/layout/index.tsx

@@ -1,12 +1,13 @@
 import './index.scss'
 
-import { NLayout, NLayoutContent } from 'naive-ui'
+import { NLayout, NLayoutContent, NSpin } from 'naive-ui'
 import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
 import LayoutMenu from './components/Menu/index'
 import SiderBar from './components/SiderBar/index'
 import MenuTag from './components/MenuTag/index'
 
 import { useSetting } from '@/store'
+import { addClass, removeClass } from '@/utils/element'
 
 const Layout = defineComponent({
   name: 'Layout',
@@ -38,19 +39,42 @@ const Layout = defineComponent({
       layout: { copyright },
     } = __APP_CFG__
 
+    watch(
+      () => themeValue.value,
+      (newData) => {
+        /**
+         *
+         * 初始化时根据当前主题色进行初始化 body 的 class 属性
+         *
+         * 根据 themeValue 进行初始化
+         */
+        const body = document.body
+        const darkClassName = 'ray-template--dark'
+        const lightClassName = 'ray-template--light'
+
+        newData
+          ? removeClass(body, lightClassName)
+          : removeClass(body, darkClassName)
+
+        addClass(body, newData ? darkClassName : lightClassName)
+      },
+      {
+        immediate: true,
+      },
+    )
+
     return {
       windowHeight,
       modelReloadRoute,
       modelMenuTagSwitch,
       cssVarsRef,
       copyright,
-      themeValue,
     }
   },
   render() {
     return (
       <div
-        class={['layout', this.themeValue ? 'layout--dark' : '']}
+        class={['layout']}
         style={[`height: ${this.windowHeight}px`, this.cssVarsRef]}
       >
         <NLayout class="layout-full" hasSider>

src/router/index.ts

@@ -22,6 +22,7 @@ export const setupRouter = (app: App<Element>) => {
 /**
  *
  * @remark 路由切换启用顶部加载条
+ * @remark 路由切换启用加载动画
  */
 export const setupRouterLoadingBar = () => {
   router.beforeEach(() => {

src/spin/index.tsx

@@ -40,7 +40,7 @@ const GlobalSpin = defineComponent({
       >
         {{
           default: () => this.$slots.default?.(),
-          description: () => this.$slots.description?.(),
+          description: () => 'loading...',
         }}
       </NSpin>
     )

src/styles/theme.scss

@@ -0,0 +1,11 @@
+/**
+ * 明暗主题变量
+ *
+ * 全局自定义组件使用变量
+ */
+
+$iconSpace: 5px;
+$width: 140px;
+$activedColor: #2d8cf0;
+$hoverLightBackgroundColor: rgba(45, 140, 240, 0.1);
+$hoverDarkBackgroundColor: rgba(45, 140, 240, 0.15);

src/types/cfg.ts

@@ -27,6 +27,7 @@ export interface Config {
   title: HTMLTitle
   copyright?: LayoutCopyright
   sideBarLogo?: LayoutSideBarLogo
+  mixinCSS?: string
 }
 
 export type Recordable<T = unknown> = Record<string, T>

src/utils/element.ts

@@ -87,9 +87,18 @@ export const addClass = (element: HTMLElement, className: string) => {
  * @param className 所需删除className，可: 'xxx xxx' | 'xxx'格式删除
  *
  * @remark 删除元素className(可: 'xxx xxx' | 'xxx'格式删除)
+ * @remark 如果输入值为 removeAllClass 则会删除该元素所有 class name
  */
-export const removeClass = (element: HTMLElement, className: string) => {
+export const removeClass = (
+  element: HTMLElement,
+  className: string | 'removeAllClass',
+) => {
   if (element) {
+    if (className === 'removeAllClass') {
+      const classList = element.classList
+
+      classList.forEach((curr) => classList.remove(curr))
+    } else {
       const classes = className.trim().split(' ')
 
       classes.forEach((item) => {
@@ -98,6 +107,7 @@ export const removeClass = (element: HTMLElement, className: string) => {
         }
       })
     }
+  }
 }
 
 /**

src/views/table/index.tsx

@@ -180,6 +180,7 @@ const TableView = defineComponent({
         <NP>点击导出按钮即可导出 excel 表格，默认以列为表头输出</NP>
         <NP>点击打印按钮即可打印该表格</NP>
         <NP>右键菜单</NP>
+        <NP>全屏表格</NP>
         <RayCollapseGrid
           bordered={false}
           collapsedRows={this.gridCollapsedRows}
@@ -193,7 +194,7 @@ const TableView = defineComponent({
           {{
             action: () => (
               <>
-                <NButton>搜索</NButton>
+                <NButton type="primary">搜索</NButton>
                 <NButton>重置</NButton>
               </>
             ),
@@ -240,17 +241,6 @@ const TableView = defineComponent({
             tableFooter: () => '表格的底部内容区域，有时候你可能会用上',
           }}
         </RayTable>
-        <RayTable
-          title={h(NInput, {
-            placeholder: '请输入检索条件',
-            style: ['width: 200px'],
-          })}
-          data={this.tableData}
-          v-model:columns={this.actionColumns}
-          bordered={false}
-          rightClickMenu={this.tableMenuOptions}
-          onMenuSelect={this.handleMenuSelect.bind(this)}
-        />
       </NLayout>
     )
   },

vite-plugin/index.ts

@@ -156,3 +156,26 @@ export const useViteBuildPlugin = (options?: BuildOptions) => {
 
   return Object.assign({}, defaultPlugin, options)
 }
+
+/**
+ *
+ * @param options 预处理 css 文件
+ * @returns additionalData string
+ *
+ * @remark 辅助处理需要全局注入的 css 样式文件, 会在构建期间完成注入
+ */
+export const mixinCSSPlugin = (options?: string[]) => {
+  const defaultOptions = []
+
+  if (Array.isArray(options)) {
+    defaultOptions.push(...options)
+  }
+
+  const mixisString = defaultOptions.reduce((pre, curr) => {
+    const temp = `@import "${curr}";`
+
+    return (pre += temp)
+  }, '')
+
+  return mixisString as string
+}

vite.config.ts

@@ -23,7 +23,8 @@ import config from './cfg'
 import pkg from './package.json'
 
 const { dependencies, devDependencies, name, version } = pkg
-const { server, buildOptions, alias, title, copyright, sideBarLogo } = config
+const { server, buildOptions, alias, title, copyright, sideBarLogo, mixinCSS } =
+  config
 
 /**
  *
@@ -140,8 +141,7 @@ export default defineConfig(async ({ mode }) => {
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData:
-            '@import "./src/styles/mixins.scss"; @import "./src/styles/setting.scss";', // 全局 `mixin`
+          additionalData: mixinCSS,
         },
       },
       modules: {