diff --git a/cfg.ts b/cfg.ts
index 64682f8d..166c330c 100644
--- a/cfg.ts
+++ b/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',
/**
*
* 浏览器标题
diff --git a/src/components/RayTable/src/components/TableSetting/index.tsx b/src/components/RayTable/src/components/TableSetting/index.tsx
index 0857c5fa..63be1169 100644
--- a/src/components/RayTable/src/components/TableSetting/index.tsx
+++ b/src/components/RayTable/src/components/TableSetting/index.tsx
@@ -96,7 +96,7 @@ const TableSetting = defineComponent({
/**
*
- * @param idx 索隐
+ * @param idx 索引
*
* @remark 动态设置列宽度
*/
diff --git a/src/components/RayTable/src/index.scss b/src/components/RayTable/src/index.scss
index f91b17f6..69caa227 100644
--- a/src/components/RayTable/src/index.scss
+++ b/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);
+ }
}
diff --git a/src/components/RayTable/src/index.tsx b/src/components/RayTable/src/index.tsx
index 1fbd77e3..3e5e9fe5 100644
--- a/src/components/RayTable/src/index.tsx
+++ b/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 (
-
+
{{
default: () => (
<>
@@ -220,7 +228,7 @@ const RayTable = defineComponent({
{/* 打印输出操作 */}
{/* 输出为Excel表格 */}
this.$slots.tableFooter?.(),
}}
)
diff --git a/src/components/RayTable/src/props.ts b/src/components/RayTable/src/props.ts
index 8c0aa8b7..bf66df04 100644
--- a/src/components/RayTable/src/props.ts
+++ b/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,
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
diff --git a/src/layout/index.scss b/src/layout/index.scss
index 1813e08a..bf483a2b 100644
--- a/src/layout/index.scss
+++ b/src/layout/index.scss
@@ -9,4 +9,9 @@
height: var(--layout-content-height);
padding: calc($layoutRouterViewContainer / 2);
}
+
+ & .layout-footer {
+ padding: 24px;
+ text-align: center;
+ }
}
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index 4d0e3697..49379717 100644
--- a/src/layout/index.tsx
+++ b/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 ? : ''}
+ {this.copyright ? (
+
+ ) : (
+ ''
+ )}
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index b71a325e..fa681899 100644
--- a/src/types/index.d.ts
+++ b/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 = Record
- declare const __APP_INFO__: {
+ declare const __APP_CFG__: {
pkg: {
name: string
version: string
dependencies: Recordable
devDependencies: Recordable
}
+ layout: {
+ copyright: string | number | VNodeChild
+ }
}
declare type NaiveMenuOptions =
diff --git a/src/views/rely/views/rely-about/index.tsx b/src/views/rely/views/rely-about/index.tsx
index c31c2f80..73edc5cd 100644
--- a/src/views/rely/views/rely-about/index.tsx
+++ b/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 = [
diff --git a/src/views/table/index.tsx b/src/views/table/index.tsx
index 18868192..3a601cf3 100644
--- a/src/views/table/index.tsx
+++ b/src/views/table/index.tsx
@@ -218,11 +218,18 @@ const TableView = defineComponent({
+ pagination={{
+ pageSize: 10,
+ }}
+ >
+ {{
+ tableFooter: () => '表格的底部内容区域,有时候你可能会用上',
+ }}
+
{{
@@ -241,7 +248,10 @@ const TableView = defineComponent({
),
default: () => (
diff --git a/vite.config.ts b/vite.config.ts
index 9628b7e4..5903b657 100644
--- a/vite.config.ts
+++ b/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,