blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-06 03:57:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ray_wuhao 2023-03-11 18:14:34 +08:00
parent 94acacf9b8
commit 875626c8d2
20 changed files with 431 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
cfg.ts
View File

@ -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',
]),
/**
*
* 版权信息

10
src/components/RayLink/index.tsx
View File

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

67
src/components/RayTable/src/components/TableAction/index.tsx
View File

@ -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,37 +87,44 @@ const TableAction = defineComponent({
},
render() {
return (
<NPopconfirm v-model:show={this.showPopoconfirm} showArrow={true}>
<NPopover>
{{
trigger: () => (
<RayIcon
name={this.icon}
size={this.iconSize}
customClassName="ray-table-icon"
/>
),
default: () => this.tooltip,
action: () => (
<NSpace>
<NButton
size="small"
ghost
onClick={this.handleEmit.bind(this, 'negative')}
>
{this.negativeText}
</NButton>
<NButton
size="small"
ghost
type="info"
onClick={this.handleEmit.bind(this, 'positive')}
>
{this.positiveText}
</NButton>
</NSpace>
<NPopconfirm v-model:show={this.showPopoconfirm} showArrow={true}>
{{
trigger: () => (
<RayIcon
name={this.icon}
size={this.iconSize}
customClassName="ray-table-icon"
/>
),
default: () => this.tooltip,
action: () => (
<NSpace>
<NButton
size="small"
ghost
onClick={this.handleEmit.bind(this, 'negative')}
>
{this.negativeText}
</NButton>
<NButton
size="small"
ghost
type="info"
onClick={this.handleEmit.bind(this, 'positive')}
>
{this.positiveText}
</NButton>
</NSpace>
),
}}
</NPopconfirm>
),
default: () => this.popoverContent,
}}
</NPopconfirm>
</NPopover>
)
},
})

65
src/components/RayTable/src/components/TableScreenfull/index.tsx Normal file
View File

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

8
src/components/RayTable/src/components/TableSetting/index.scss
View File

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

3
src/components/RayTable/src/components/TableSetting/index.tsx
View File

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

45
src/components/RayTable/src/components/TableSize/index.scss Normal file
View File

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

125
src/components/RayTable/src/components/TableSize/index.tsx Normal file
View File

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

36
src/components/RayTable/src/index.tsx
View File

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

2
src/components/RayTable/src/type.ts
View File

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

6
src/icons/adjustment.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 1018 B

30
src/layout/index.tsx
View File

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

1
src/router/index.ts
View File

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

2
src/spin/index.tsx
View File

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

11
src/styles/theme.scss Normal file
View File

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

1
src/types/cfg.ts
View File

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

24
src/utils/element.ts
View File

@ -87,16 +87,26 @@ 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) {
const classes = className.trim().split(' ')
if (className === 'removeAllClass') {
const classList = element.classList
classes.forEach((item) => {
if (item) {
element.classList.remove(item)
}
})
classList.forEach((curr) => classList.remove(curr))
} else {
const classes = className.trim().split(' ')
classes.forEach((item) => {
if (item) {
element.classList.remove(item)
}
})
}
}
}

14
src/views/table/index.tsx
View File

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

23
vite-plugin/index.ts
View File

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

6
vite.config.ts
View File

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