v3.0.3，新增了表格组件一些功能，新增页底配置

cfg.ts

@@ -3,6 +3,7 @@ import path from 'node:path'
 import { HTMLTitlePlugin, buildOptions } from './vite-plugin/index'
 
 import type { ServerOptions, BuildOptions, AliasOptions } from 'vite'
+import type { VNodeChild } from 'vue'
 
 export interface HTMLTitle {
   name: string
@@ -14,9 +15,17 @@ export interface Config {
   buildOptions: (mode: string) => BuildOptions
   alias: AliasOptions
   title: HTMLTitle
+  copyright?: string | number | VNodeChild
 }
 
 const config: Config = {
+  /**
+   *
+   * 版权信息
+   *
+   * 也可以当作页底设置, 看实际业务需求
+   */
+  copyright: 'Copyright © 2022-present Ray',
   /**
    *
    * 浏览器标题

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

@@ -96,7 +96,7 @@ const TableSetting = defineComponent({
 
     /**
      *
-     * @param idx 索隐
+     * @param idx 索引
      *
      * @remark 动态设置列宽度
      */

src/components/RayTable/src/index.scss

@@ -1,6 +1,12 @@
-.ray-table__setting,
-.ray-table-icon {
-  cursor: pointer;
-  outline: none;
-  border: none;
+.ray-table {
+  & .ray-table__setting,
+  & .ray-table-icon {
+    cursor: pointer;
+    outline: none;
+    border: none;
+  }
+
+  & .n-card-header .n-card-header__main {
+    padding-right: var(--ray-table-header-space);
+  }
 }

src/components/RayTable/src/index.tsx

@@ -44,6 +44,13 @@ const RayTable = defineComponent({
       showMenu: false,
     })
     let prevRightClickIndex = -1
+    const cssVars = computed(() => {
+      const cssVar = {
+        '--ray-table-header-space': props.tableHeaderSpace,
+      }
+
+      return cssVar
+    })
 
     /**
      *
@@ -179,11 +186,12 @@ const RayTable = defineComponent({
       handleRightMenuSelect,
       handleExportPositive,
       handlePrintPositive,
+      cssVars,
     }
   },
   render() {
     return (
-      <NCard bordered={false}>
+      <NCard class="ray-table" bordered={this.bordered} style={[this.cssVars]}>
         {{
           default: () => (
             <>
@@ -220,7 +228,7 @@ const RayTable = defineComponent({
               <NSpace align="center">
                 {/* 打印输出操作 */}
                 <TableAction
-                  icon="print"
+                  icon={this.printIcon}
                   tooltip={this.printTooltip}
                   positiveText={this.printPositiveText}
                   negativeText={this.printNegativeText}
@@ -228,7 +236,7 @@ const RayTable = defineComponent({
                 />
                 {/* 输出为Excel表格 */}
                 <TableAction
-                  icon="export_excel"
+                  icon={this.exportExcelIcon}
                   tooltip={this.exportTooltip}
                   positiveText={this.exportPositiveText}
                   negativeText={this.exportNegativeText}
@@ -242,6 +250,7 @@ const RayTable = defineComponent({
             ) : (
               ''
             ),
+          footer: () => this.$slots.tableFooter?.(),
         }}
       </NCard>
     )

src/components/RayTable/src/props.ts

@@ -11,7 +11,7 @@
 
 import { dataTableProps } from 'naive-ui'
 
-import type { PropType, VNode } from 'vue'
+import type { PropType, VNode, VNodeChild } from 'vue'
 import type { DropdownMixedOption } from './type'
 import type PrintConfiguration from 'print-js'
 
@@ -36,7 +36,7 @@ const rayTableProps = {
      *
      * 可以自定义渲染
      */
-    type: String,
+    type: [String, Object] as PropType<string | VNodeChild>,
     default: '',
   },
   action: {
@@ -167,6 +167,46 @@ const rayTableProps = {
     >,
     default: () => ({}),
   },
+  printIcon: {
+    /**
+     *
+     * 打印按钮自定义图标名称
+     *
+     * 需要结合 `RayIcon` 组件使用
+     *
+     * 如果需要自定义图标, 则需要在 `src/icons` 中添加后使用
+     */
+    type: String,
+    default: 'print',
+  },
+  exportExcelIcon: {
+    /**
+     *
+     * 导出为表格按钮自定义图标名称
+     *
+     * 需要结合 `RayIcon` 组件使用
+     *
+     * 如果需要自定义图标, 则需要在 `src/icons` 中添加后使用
+     */
+    type: String,
+    default: 'export_excel',
+  },
+  tableHeaderSpace: {
+    /**
+     *
+     * 表格头部操作栏, 主要操作栏与额外操作栏之间间隔
+     */
+    type: String,
+    default: '10px',
+  },
+  bordered: {
+    /**
+     *
+     * 表格边框
+     */
+    type: Boolean,
+    default: true,
+  },
 } as const
 
 export default rayTableProps

src/layout/index.scss

@@ -9,4 +9,9 @@
     height: var(--layout-content-height);
     padding: calc($layoutRouterViewContainer / 2);
   }
+
+  & .layout-footer {
+    padding: 24px;
+    text-align: center;
+  }
 }

src/layout/index.tsx

@@ -1,14 +1,15 @@
 import './index.scss'
-import { NLayout, NLayoutContent } from 'naive-ui'
+
+import { NLayout, NLayoutContent, NLayoutFooter } 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'
 
 const Layout = defineComponent({
   name: 'Layout',
-  props: {},
   setup() {
     const menuStore = useSetting()
     const { height: windowHeight } = useWindowSize()
@@ -29,12 +30,16 @@ const Layout = defineComponent({
 
       return cssVar
     })
+    const {
+      layout: { copyright },
+    } = __APP_CFG__
 
     return {
       windowHeight,
       modelReloadRoute,
       modelMenuTagSwitch,
       cssVarsRef,
+      copyright,
     }
   },
   render() {
@@ -53,6 +58,11 @@ const Layout = defineComponent({
               nativeScrollbar={false}
             >
               {this.modelReloadRoute ? <RayTransitionComponent /> : ''}
+              {this.copyright ? (
+                <div class="layout-footer">{this.copyright}</div>
+              ) : (
+                ''
+              )}
             </NLayoutContent>
           </NLayout>
         </NLayout>

src/types/index.d.ts

@@ -11,17 +11,21 @@ import type {
   MenuGroupOption,
 } from 'naive-ui'
 import type { ECharts } from 'echarts/core'
+import type { VNodeChild } from 'vue'
 
 export global {
   declare type Recordable<T = unknown> = Record<string, T>
 
-  declare const __APP_INFO__: {
+  declare const __APP_CFG__: {
     pkg: {
       name: string
       version: string
       dependencies: Recordable<string>
       devDependencies: Recordable<string>
     }
+    layout: {
+      copyright: string | number | VNodeChild
+    }
   }
 
   declare type NaiveMenuOptions =

src/views/rely/views/rely-about/index.tsx

@@ -16,7 +16,7 @@ interface TemplateOptions {
 const RelyAbout = defineComponent({
   name: 'RelyAbout',
   setup() {
-    const { pkg } = __APP_INFO__
+    const { pkg } = __APP_CFG__
     const { dependencies, devDependencies, name, version } = pkg
 
     const columns = [

src/views/table/index.tsx

@@ -218,11 +218,18 @@ const TableView = defineComponent({
         </NCard>
         <NCard title="基础使用" style={['margin-top: 18px']}>
           <RayTable
-            title="基础表格"
+            title="基础使用"
             data={this.tableData}
             columns={this.baseColumns}
             action={false}
-          />
+            pagination={{
+              pageSize: 10,
+            }}
+          >
+            {{
+              tableFooter: () => '表格的底部内容区域，有时候你可能会用上',
+            }}
+          </RayTable>
         </NCard>
         <NCard style={['margin-top: 18px']}>
           {{
@@ -241,7 +248,10 @@ const TableView = defineComponent({
             ),
             default: () => (
               <RayTable
-                title="带有拓展功能的表格"
+                title={h(NInput, {
+                  placeholder: '请输入检索条件',
+                  style: ['width: 200px'],
+                })}
                 data={this.tableData}
                 v-model:columns={this.actionColumns}
               />

vite.config.ts

@@ -4,9 +4,13 @@ import config from './cfg'
 const pkg = require('./package.json')
 
 const { dependencies, devDependencies, name, version } = pkg
+const { server, buildOptions, alias, title, copyright } = config
 
-const __APP_INFO__ = {
+const __APP_CFG__ = {
   pkg: { dependencies, devDependencies, name, version },
+  layout: {
+    copyright,
+  },
 }
 
 import {
@@ -28,11 +32,9 @@ import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vitejs.dev/config/
 export default defineConfig(async ({ mode }) => {
-  const { server, buildOptions, alias, title } = config
-
   return {
     define: {
-      __APP_INFO__: JSON.stringify(__APP_INFO__),
+      __APP_CFG__: JSON.stringify(__APP_CFG__),
     },
     resolve: {
       alias: alias,