blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-05 19:42:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
XiaoDaiGua-Ray 2023-10-11 17:17:14 +08:00
parent fac9f9413d
commit 0c7adb9584
15 changed files with 214 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -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` 插件实现。

3
package.json
View File

@ -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",

72
src/components/RTable/src/Table.tsx
View File

@ -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} />
<Size
{...this.$props}
onChangeSize={this.changeTableSize.bind(this)}
/>
<Screenfull />
<C
{...this.$props}
onUpdateColumn={this.updateTableColumn.bind(this)}
/>
{tool(this.$props as any)}
</NSpace>
),
footer: () => this.$slots.tableFooter?.(),
action: () => this.$slots.tableAction?.(),
}}
</NCard>
)

80
src/components/RTable/src/components/C.tsx
View File

@ -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) => {
const {
key,
title,
children,
fixed,
resizable: $resizable,
...args
} = curr
const isLeftFixedActivated = fixed && fixed === 'left'
const isRightFixedActivated = fixed && fixed === 'right'
const isResizable = !!$resizable
return props.columns.map((curr, idx) => {
const { key, title, children, fixed, isResizable, ...args } =
curr as C
const isLeftFixedActivated = fixed === 'left'
const isRightFixedActivated = fixed === 'right'
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 resizableClick = (option: C, index: number) => {
console.log('🚀 ~ resizableClick ~ option:', option.isResizable)
option['isResizable'] = !option['isResizable']
option['resizable'] = option['isResizable']
treeDataSource.value[index] = option
event(treeDataSource.value)
}
const fixedClick: FixedClick = (type, option, index) => {
const key = `${type}FixedActivated`
const otherKey = `${type === 'left' ? 'right' : 'left'}FixedActivated`
if (key === 'leftFixedActivated') {
option['rightFixedActivated'] = false
} else if (key === 'rightFixedActivated') {
option['leftFixedActivated'] = false
}
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)}
/>

51
src/components/RTable/src/components/Fullscreen.tsx Normal file
View File

@ -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>
)
},
})

4
src/components/RTable/src/components/Print.tsx
View File

@ -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

64
src/components/RTable/src/components/Screenfull.tsx
View File

@ -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>
)
},
})

2
src/components/RTable/src/components/Size.tsx
View File

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

1
src/components/RTable/src/config.ts
View File

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

14
src/components/RTable/src/index.scss
View File

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

7
src/components/RTable/src/props.ts
View File

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

11
src/components/RTable/src/type.ts
View File

@ -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'>
}

20
src/layout/components/SiderBar/index.tsx
View File

@ -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) {
return (() => {
window.$message.warning('您的浏览器不支持全屏~')
})()
} else {
return (() => {
screenfull.toggle()
isScreenfull.value = !screenfull.isFullscreen
})()
}
toggleFullscreen()
},
search: () => {
globalSearchShown.value = true

86
src/views/demo/table/index.tsx
View File

@ -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>
<NH2>RayTable 组件使用</NH2>
<NUl alignText>
<NLi>
该组件基于 Naive UI DataTable
组件封装。实现右键菜单、表格标题、导出为 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>
<NSpace wrapItem={false} vertical>
<NCard title="RTable">
基于 NDataTable 封装，继承该组件所有 props 属性。查看 RTable props
文件即可查看该组件拓展项
</NCard>
<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>
{/* <RayTable
style="margin-top: 18px"
ref="tableRef"
scrollX={2000}
title={
<NSpace align="center">
<span>标题插槽:</span>
<NSwitch
onUpdateValue={(value: boolean) => (this.tableLoading = value)}
></NSwitch>
</NSpace>
}
data={this.tableData}
v-model:columns={this.actionColumns}
pagination={{
pageSize: 10,
}}
loading={this.tableLoading}
rightClickOptions={this.tableMenuOptions}
onRightMenuClick={this.handleMenuSelect.bind(this)}
toolOptions={[
<NPopover>
{{
trigger: () => (
<RIcon
name="search"
size="18"
cursor="pointer"
onClick={() => {
window.$message.info('点击了搜索按钮')
}}
/>
),
default: () => '我是自定义工具栏示例',
}}
</NPopover>,
]}
>
{{
tableFooter: () => '表格的底部内容区域插槽，有时候你可能会用上',
tableAction: () => '表格的操作区域内容插槽，有时候可能会用上',
}}
</RayTable> */}
</div>
</RTable>
</NSpace>
)
},
})

1
vite.pliugin.config.ts
View File

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