sh-view 2.9.18 → 2.9.20

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sh-view",
-	"version": "2.9.18",
+	"version": "2.9.20",
 	"description": "基于vxe-table二次封装,更包含Alert,Badge,Card,CodeEditor,Col,Corner,CountTo,Drawer,Empty,Form,Header,Icon,List,Loading,Modal,Noticebar,Poptip,Progress,PullRefresh,Query,Result,Row,Split,Grid,Table,Tabs,Tag,Toolbar,Tree,Upload,WaterFall,WaterMark等丰富组件库",
 	"main": "packages/index.js",
 	"typings": "types/index.d.ts",

package/packages/components/index.js

@@ -23,6 +23,7 @@ import ShPullRefresh from './sh-pull-refresh/index.vue'
 import ShQuery from './sh-form/query.vue'
 import ShResult from './sh-result/index.vue'
 import ShRow from './sh-row/index.vue'
+import ShSignature from './sh-signature/index.vue'
 import ShSplit from './sh-split/index.vue'
 import ShGrid from './sh-table/grid.vue'
 import ShTable from './sh-table/table.vue'
@@ -59,6 +60,7 @@ const components = {
 	ShQuery,
 	ShResult,
 	ShRow,
+	ShSignature,
 	ShSplit,
 	ShGrid,
 	ShTable,

package/packages/components/sh-card/index.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, getCurrentInstance } from 'vue'
 export default defineComponent({
 	name: 'ShCard',
 	props: {
@@ -32,8 +32,7 @@ export default defineComponent({
 			default: false
 		},
 		padding: {
-			type: Number,
-			default: 10
+			type: Number
 		},
 		title: {
 			type: String
@@ -51,22 +50,33 @@ export default defineComponent({
 		},
 		size: {
 			type: String,
-			default: 'default' //  large / medium / small / mini
+			default: '' //  large / medium / small / mini
 		}
 	},
 	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils, $vUiSetup } = proxy
 		const { slots } = context
 
+		const vmSize = computed(() => props.size || $vUiSetup.size)
 		const classes = computed(() => {
 			return {
 				border: props.border,
 				shadow: props.shadow,
-				[props.size]: props.size
+				[vmSize.value]: vmSize.value
 			}
 		})
 		const styles = computed(() => {
+			let paddingValue = 10
+			if (props.padding) {
+				paddingValue = props.padding
+			} else if (vmSize.value === 'small') {
+				paddingValue = 7
+			} else if (vmSize.value === 'mini') {
+				paddingValue = 5
+			}
 			return {
-				padding: `${props.padding}px`
+				padding: `${paddingValue}px`
 			}
 		})
 
@@ -115,6 +125,7 @@ export default defineComponent({
 	}
 	.sh-card-body {
 		display: block;
+		overflow: auto;
 		border-top: 1px solid var(--border-color);
 	}
 	.sh-card-foot {

package/packages/components/sh-date/index.vue

@@ -104,31 +104,37 @@ export default defineComponent({
 	],
 	setup(props, context) {
 		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
+		const { $vUtils, $vUiSetup } = proxy
 		const { emit, slots } = context
 
 		const pulldownValue = ref(false)
 		const inputValue = ref(props.modelValue)
 		const rangeValue = ref(Array.isArray(props.modelValue) ? props.modelValue : [])
 
-		const vmConfig = computed(() => ({ size: props.size }))
+		const vmConfig = computed(() => ({ size: props.size || $vUiSetup.size }))
 		const inputConfig = computed(() => {
 			let defaultProps = {}
 			let vxeProps = $vUtils.omit(props, (val, key) => {
 				return omitProps.includes(key) || $vUtils.isNone(val)
 			})
 			let shProps = {}
-			return Object.assign(defaultProps, vxeProps, shProps, vmConfig)
+			return Object.assign(defaultProps, vxeProps, shProps, vmConfig.value)
 		})
 		const pulldownConfig = computed(() => {
-			return Object.assign({ transfer: true }, props.pulldown, vmConfig)
+			return Object.assign({ transfer: true }, props.pulldown, vmConfig.value)
 		})
 		const calendarFormat = computed(() => {
 			if (props.type === 'month') return 'yyyy-MM'
 			else if (props.type === 'year') return 'yyyy'
 			return props.format || 'yyyy-MM-dd'
 		})
-		const rangeInputConfig = computed(() => ({ type: 'text', readonly: true, ...vmConfig }))
+		const rangeInputConfig = computed(() => {
+			let returnConfig = { type: 'text', readonly: true }
+			if (vmConfig.value.size) {
+				returnConfig.class = [`size--${vmConfig.value.size}`]
+			}
+			return returnConfig
+		})
 		const startInputConfig = computed(() => {
 			let startValue = rangeValue.value[0] || ''
 			let startLabel = $vUtils.toDateString(startValue, calendarFormat.value)

package/packages/components/sh-form/form.vue

@@ -17,10 +17,10 @@
 				</div>
 				<div class="sh-common-footer-right">
 					<slot name="formRight"></slot>
-					<vxe-button v-ripple type="submit" status="primary" :size="size" :disabled="disabled || loading">
+					<vxe-button type="submit" status="primary" :size="size" :disabled="disabled || loading">
 						{{ globalConfig?.submitBtnText || '确认' }}
 					</vxe-button>
-					<vxe-button v-ripple type="reset" :size="size">{{ globalConfig?.resetBtnText || '重置' }}</vxe-button>
+					<vxe-button type="reset" :size="size">{{ globalConfig?.resetBtnText || '重置' }}</vxe-button>
 				</div>
 			</div>
 			<template v-for="slot in Object.keys(slots)" #[slot]="scope">

package/packages/components/sh-form/query.vue

@@ -16,9 +16,9 @@
 			<div class="sh-query-buttons-left"><slot name="footLeft"></slot></div>
 			<div class="sh-query-buttons-right">
 				<slot name="footRight"></slot>
-				<vxe-button v-ripple type="submit" status="primary" :size="size" icon="vxe-icon-search">{{ globalConfig?.submitBtnText || '查询' }}</vxe-button>
-				<vxe-button v-ripple type="reset" :size="size" icon="vxe-icon-repeat">{{ globalConfig?.resetBtnText || '重置' }}</vxe-button>
-				<vxe-button v-if="formToggleBtnShow" v-ripple :size="size" :icon="formCollapsed ? 'vxe-icon-caret-up' : 'vxe-icon-caret-down'" @click="formBtnCollapsed(!formCollapsed, true)">
+				<vxe-button type="submit" status="primary" :size="size" icon="vxe-icon-search">{{ globalConfig?.submitBtnText || '查询' }}</vxe-button>
+				<vxe-button type="reset" :size="size" icon="vxe-icon-repeat">{{ globalConfig?.resetBtnText || '重置' }}</vxe-button>
+				<vxe-button v-if="formToggleBtnShow" :size="size" :icon="formCollapsed ? 'vxe-icon-caret-up' : 'vxe-icon-caret-down'" @click="formBtnCollapsed(!formCollapsed, true)">
 					{{ formCollapsed ? '收起' : '展开全部' }}
 				</vxe-button>
 			</div>

package/packages/components/sh-header/index.vue

@@ -24,13 +24,13 @@
 </template>
 
 <script>
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, getCurrentInstance } from 'vue'
 export default defineComponent({
 	name: 'ShHeader',
 	props: {
 		size: {
 			type: String,
-			default: 'default'
+			default: ''
 		},
 		color: {
 			type: String,
@@ -83,6 +83,8 @@ export default defineComponent({
 	},
 	emits: ['back'],
 	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils, $vUiSetup } = proxy
 		const { emit, slots } = context
 
 		let sizeMap = {
@@ -93,6 +95,7 @@ export default defineComponent({
 			mini: '12px'
 		}
 
+		const vmSize = computed(() => props.size || $vUiSetup.size)
 		const styles = computed(() => {
 			return {
 				backgroundColor: props.color
@@ -106,7 +109,7 @@ export default defineComponent({
 				[`sh-pageheader-theme-${props.theme}`]: props.theme,
 				'has-footer': slots.footer,
 				[`sh-pageheader-type-${props.type}`]: props.type,
-				[`${props.size}`]: props.size
+				[`${vmSize.value}`]: vmSize.value
 			}
 		})
 		const titleStyle = computed(() => {

package/packages/components/sh-modal/index.vue

@@ -9,8 +9,8 @@
 				<div class="sh-modal-footer-left"><slot name="footerLeft"></slot></div>
 				<div class="sh-modal-footer-right">
 					<slot name="footerRightLeft"></slot>
-					<vxe-button v-ripple :content="cancelButtonText" @click="onModalClose"></vxe-button>
-					<vxe-button v-if="!readonly" v-ripple status="primary" :content="confirmButtonText" @click="onModalConfirm"></vxe-button>
+					<vxe-button :content="cancelButtonText" @click="onModalClose"></vxe-button>
+					<vxe-button v-if="!readonly" status="primary" :content="confirmButtonText" @click="onModalConfirm"></vxe-button>
 					<slot name="footerRight"></slot>
 				</div>
 			</div>

package/packages/components/sh-signature/index.vue

@@ -0,0 +1,168 @@
+<template>
+	<div ref="wrapRef" class="sh-signature" :class="wrapClass" :style="wrapStyle">
+		<canvas ref="canvasRef" v-bind="canvasConfig"></canvas>
+	</div>
+</template>
+
+<script>
+import { ref, reactive, defineComponent, computed, getCurrentInstance, onMounted } from 'vue'
+export default defineComponent({
+	name: 'ShSignature',
+	props: {
+		border: {
+			type: Boolean,
+			default: true
+		},
+		width: {
+			type: String,
+			default: ''
+		},
+		height: {
+			type: String,
+			default: '200px'
+		},
+		line: {
+			type: Number,
+			default: 3
+		},
+		color: {
+			type: String,
+			default: '#000'
+		},
+		type: {
+			type: String,
+			default: 'png'
+		}
+	},
+	emits: ['start', 'signing', 'end', 'confirm', 'clear'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils, $vUiSetup } = proxy
+		const { slots, emit } = context
+
+		const wrapRef = ref(null)
+		const canvasRef = ref(null)
+		let canvasCtx = null
+		const isTouch = 'ontouchstart' in window
+		const canvasEvents = isTouch ? ['touchstart', 'touchmove', 'touchend', 'touchleave'] : ['mousedown', 'mousemove', 'mouseup', 'mouseleave']
+
+		const wrapClass = computed(() => {
+			return {
+				border: props.border
+			}
+		})
+		const wrapStyle = computed(() => {
+			return {
+				width: props.width || '100%',
+				height: props.height
+			}
+		})
+		const canvasConfig = reactive({ width: 0, height: 0 })
+
+		const initCanvas = () => {
+			if (!isCanvasSupported()) {
+				return
+			}
+			canvasCtx = canvasRef.value.getContext('2d')
+			canvasConfig.width = wrapRef.value.offsetWidth
+			canvasConfig.height = wrapRef.value.offsetHeight
+			addEvent()
+		}
+		const isCanvasSupported = () => {
+			let elem = document.createElement('canvas')
+			return !!(elem.getContext && elem.getContext('2d'))
+		}
+		const addEvent = () => {
+			canvasRef.value.addEventListener(canvasEvents[0], startEventHandler, false)
+		}
+		const startEventHandler = event => {
+			event.preventDefault()
+			canvasCtx.beginPath()
+			canvasCtx.lineWidth = props.line
+			canvasCtx.strokeStyle = props.color
+			emit('start')
+			canvasRef.value.addEventListener(canvasEvents[1], moveEventHandler, false)
+			canvasRef.value.addEventListener(canvasEvents[2], endEventHandler, false)
+			canvasRef.value.addEventListener(canvasEvents[3], leaveEventHandler, false)
+		}
+		const moveEventHandler = event => {
+			event.preventDefault()
+			let evt = isTouch ? event.touches[0] : event
+			let coverPos = canvasRef.value.getBoundingClientRect()
+			let mouseX = evt.clientX - coverPos.left
+			let mouseY = evt.clientY - coverPos.top
+			canvasCtx.lineTo(mouseX, mouseY)
+			canvasCtx.stroke()
+			emit('signing', evt)
+		}
+		const endEventHandler = event => {
+			event.preventDefault()
+			emit('end')
+			canvasRef.value.removeEventListener(canvasEvents[1], moveEventHandler, false)
+			canvasRef.value.removeEventListener(canvasEvents[2], endEventHandler, false)
+		}
+		const leaveEventHandler = event => {
+			event.preventDefault()
+			canvasRef.value.removeEventListener(canvasEvents[1], moveEventHandler, false)
+			canvasRef.value.removeEventListener(canvasEvents[2], endEventHandler, false)
+		}
+		const clear = () => {
+			canvasRef.value.addEventListener(canvasEvents[2], endEventHandler, false)
+			canvasCtx.clearRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
+			canvasCtx.closePath()
+			emit('clear')
+		}
+		const isCanvasBlank = canvas2 => {
+			if (!canvas2) {
+				return true
+			}
+			var blank = document.createElement('canvas')
+			blank.width = canvas2.width
+			blank.height = canvas2.height
+			return (canvas2 == null ? void 0 : canvas2.toDataURL()) == blank.toDataURL()
+		}
+		const confirm = () => {
+			let dataurl
+			let canvasIn = canvasRef.value
+			switch (props.type) {
+				case 'png':
+					dataurl = canvasIn.toDataURL('image/png')
+					break
+				case 'jpg':
+					dataurl = canvasIn.toDataURL('image/jpeg', 0.8)
+					break
+			}
+			const _canvas = isCanvasBlank(canvasIn) ? '请绘制' : canvasIn
+			const _filePath = isCanvasBlank(canvasIn) ? '' : dataurl
+			emit('confirm', _canvas, _filePath)
+		}
+		onMounted(() => {
+			initCanvas()
+		})
+
+		return {
+			slots,
+			wrapRef,
+			canvasRef,
+			wrapClass,
+			wrapStyle,
+			canvasConfig,
+			confirm,
+			clear
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.sh-signature {
+	display: block;
+	text-align: center;
+	&.border {
+		border: 1px solid var(--border-color);
+	}
+	canvas {
+		display: block;
+	}
+}
+</style>

package/packages/components/sh-table/css/index.scss

@@ -30,6 +30,15 @@
             background-color: transparent;
         }
     }
+    &.is--maximize {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0.5em 1em;
+        background-color: var(--bg-layout-color);
+    }
     .sh-table-footer{
         height: 40px;
         padding: 5px;

package/packages/components/sh-table/grid.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="sh-vxe-table" :class="{ 'sh-table-ghost': tableGlobalConfig.ghost }" :style="{ height: wrapHeight }">
+	<div class="sh-vxe-table" v-bind="wrapBind">
 		<vxe-grid
 			ref="tableRef"
 			:class="{ 'is--hasfooter': showFooter }"
@@ -56,10 +56,10 @@
 							<div v-if="slots.toolbarRight" class="sh-table-toolbar-item">
 								<slot name="toolbarRight"></slot>
 							</div>
+							<div v-if="tableMoneyConfig.enabled" @click.stop class="sh-table-toolbar-item">单位：<vxe-select v-model="tableMoneyUnit" v-bind="tableMoneyConfig" /></div>
 							<div class="sh-table-toolbar-item" v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
-								<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
+								<vxe-button :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
 							</div>
-							<div v-if="tableMoneyConfig.enabled" @click.stop class="sh-table-toolbar-item">单位：<vxe-select v-model="tableMoneyUnit" v-bind="tableMoneyConfig" /></div>
 						</template>
 					</vxe-toolbar>
 				</div>

package/packages/components/sh-table/js/props.js

@@ -47,7 +47,7 @@ export default {
 	},
 	size: {
 		type: String,
-		default: 'small' //  medium / small / mini
+		default: '' //  medium / small / mini
 	},
 	loading: {
 		type: Boolean,
@@ -133,6 +133,24 @@ export default {
 			return {}
 		}
 	},
+	cellConfig: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
+	headerCellConfig: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
+	footerCellConfig: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
 	seqConfig: {
 		type: Object,
 		default() {

package/packages/components/sh-table/js/useTable.js

@@ -1,5 +1,6 @@
 import { computed, onMounted, reactive, ref, watch, nextTick } from 'vue'
 import { seqMethod, columnDefaultFilterMethod, tableFooterCompute, getTransfarFields, formulaReplaceAll } from './tableMethods'
+import domZindex from 'dom-zindex'
 
 // 记录自定义参数，传给vxe要过滤掉
 let omitProps = [
@@ -80,7 +81,7 @@ const columnsMapDefault = {
 }
 
 export default function (props, context, proxy, isGrid) {
-	const { $vUtils, $vTableSetup, $vxePluginNames, $route } = proxy
+	const { $vUtils, $vUiSetup, $vTableSetup, $vxePluginNames, $route } = proxy
 	const { emit, slots } = context
 
 	const tableRef = ref()
@@ -95,10 +96,28 @@ export default function (props, context, proxy, isGrid) {
 	const tableEditRules = ref({}) // 表格根据表头自动生成验证规则
 	const tableFilterText = ref('') // 全局过滤关键字
 	const tableCurrentRowData = ref(null) // 表格当前高亮行
+	const tZindex = ref(0)
+	const zoomStatus = ref(false)
 
 	const wrapHeight = computed(() => ([100, '100%', 'auto'].includes(props.height) ? '100%' : 'auto'))
+	const wrapBind = computed(() => {
+		const { ghost, loading } = tableGlobalConfig.value
+		let warpClass = { 'sh-table-ghost': ghost }
+		let warpStyle = { height: wrapHeight.value }
+		if (!isGrid) {
+			if (zoomStatus.value) {
+				warpStyle.zIndex = tZindex.value
+			}
+			warpClass['is--loading'] = loading
+			warpClass['is--maximize'] = zoomStatus.value
+		}
+		return {
+			class: warpClass,
+			style: warpStyle
+		}
+	})
 	const hasTree = computed(() => props.columns.some(_ => _.treeNode))
-	const tableVmConfig = computed(() => ({ size: props.size }))
+	const tableVmConfig = computed(() => ({ size: props.size || $vUiSetup.size }))
 	const tableGlobalConfig = computed(() => Object.assign({}, globalConfigDefault, props.globalConfig))
 	const tableTools = computed(() => {
 		let tools = props.globalConfig?.tools || []
@@ -118,7 +137,7 @@ export default function (props, context, proxy, isGrid) {
 	const tableColumnObjConfig = computed(() => Object.assign({}, columnObjDefault, props.columnObj))
 	const tableColumnConfig = computed(() => Object.assign({ isHover: true, resizable: true }, props.columnConfig))
 	const tablePagerConfig = computed(() =>
-		Object.assign({ enabled: Boolean(props.pagerConfig), total: 0, className: 'sh-table-footer', slots: { left: 'pagerLeft', right: 'pagerRight' } }, props.pagerConfig)
+		Object.assign({ enabled: Boolean(props.pagerConfig), total: 0, className: 'sh-table-footer', slots: { left: 'pagerLeft', right: 'pagerRight' } }, props.pagerConfig, tableVmConfig.value)
 	)
 	const tableCheckboxConfig = computed(() => {
 		return Object.assign({ range: !hasTree.value }, props.checkboxConfig)
@@ -220,7 +239,7 @@ export default function (props, context, proxy, isGrid) {
 		const toolbarFg = tableToolbarConfig.value
 		const toolsFg = tableTools.value
 		const globalTool = globalFg.title || globalFg.globalFilter
-		const toolbarTool = toolbarFg.import || toolbarFg.export || toolbarFg.print || toolbarFg.refresh || toolbarFg.custom
+		const toolbarTool = toolbarFg.import || toolbarFg.export || toolbarFg.print || toolbarFg.refresh || toolbarFg.zoom || toolbarFg.custom
 		const slotsTool = slots.toolbar || slots.toolbarLeft || slots.toolbarRight
 		return globalTool || toolbarTool || slotsTool || toolsFg.length > 0 || tableMoneyConfig.value.enabled
 	})
@@ -517,6 +536,9 @@ export default function (props, context, proxy, isGrid) {
 			case 'print':
 				handleTablePrintBtn()
 				break
+			case 'zoom':
+				handleTableZoomBtn()
+				break
 		}
 		emit('toolbar-btn-click', code)
 	}
@@ -538,6 +560,13 @@ export default function (props, context, proxy, isGrid) {
 		}
 		return tableRef.value.openPrint(options)
 	}
+	// 缩放按钮事件
+	const handleTableZoomBtn = () => {
+		zoomStatus.value = !zoomStatus.value
+		if (tZindex.value < domZindex.getCurrent()) {
+			tZindex.value = domZindex.getNext()
+		}
+	}
 	// 关联toolbar
 	const connectToolbar = () => {
 		nextTick(() => {
@@ -633,7 +662,9 @@ export default function (props, context, proxy, isGrid) {
 		slots,
 		tableRef,
 		toolbarRef,
+		zoomStatus,
 		wrapHeight,
+		wrapBind,
 		tableGlobalConfig,
 		tablePrevColumns,
 		tableColumns,

package/packages/components/sh-table/table.vue

@@ -1,5 +1,5 @@
 <template>
-	<div ref="tableWrapRef" v-resize="handleResize" class="sh-vxe-table" :class="{ 'sh-table-ghost': tableGlobalConfig.ghost, 'is--loading': tableBindConfig.loading }" :style="{ height: wrapHeight }">
+	<div ref="tableWrapRef" v-resize="handleResize" class="sh-vxe-table" v-bind="wrapBind">
 		<div v-if="isTopSlot" ref="topSlotRef" v-resize="handleResize" class="sh-table-top"><slot name="top"></slot></div>
 		<div v-if="isFormSlot" ref="formSlotRef" v-resize="handleResize" class="sh-table-form">
 			<slot name="form">
@@ -31,10 +31,13 @@
 						<div v-if="slots.toolbarRight" class="sh-table-toolbar-item">
 							<slot name="toolbarRight"></slot>
 						</div>
+						<div v-if="tableMoneyConfig.enabled" @click.stop class="sh-table-toolbar-item">单位：<vxe-select v-model="tableMoneyUnit" v-bind="tableMoneyConfig" /></div>
 						<div class="sh-table-toolbar-item" v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
-							<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
+							<vxe-button :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
+						</div>
+						<div class="sh-table-toolbar-item" v-if="tableToolbarConfig.zoom">
+							<vxe-button :size="size" circle :icon="zoomStatus ? 'vxe-table-icon-minimize' : 'vxe-table-icon-fullscreen'" @click="handleTableTool({ code: 'zoom' })"></vxe-button>
 						</div>
-						<div v-if="tableMoneyConfig.enabled" @click.stop class="sh-table-toolbar-item">单位：<vxe-select v-model="tableMoneyUnit" v-bind="tableMoneyConfig" /></div>
 					</template>
 				</vxe-toolbar>
 			</slot>

package/packages/components/sh-tabs/index.vue

@@ -67,7 +67,7 @@ export default defineComponent({
 		},
 		size: {
 			type: String,
-			default: 'default' //  medium / small / mini
+			default: '' //  medium / small / mini
 		},
 		animated: {
 			type: Boolean,
@@ -93,7 +93,7 @@ export default defineComponent({
 	emits: ['update:modelValue', 'close', 'change'],
 	setup(props, context) {
 		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
+		const { $vUtils, $vUiSetup } = proxy
 		const { emit, slots } = context
 
 		const navRef = ref()
@@ -107,12 +107,13 @@ export default defineComponent({
 
 		const isHorizontal = computed(() => ['left', 'right'].includes(props.placement))
 		const hasContent = computed(() => props.isContent && activeKey.value && props.options.map(item => item[props.labelKey]).includes(activeKey.value))
+		const vmSize = computed(() => props.size || $vUiSetup.size)
 		const tabClass = computed(() => {
 			return {
 				'sh-tabs-card': props.type === 'card',
 				'sh-tabs-tab': props.type === 'tab',
 				'sh-tabs-reverse': ['bottom', 'right'].includes(props.placement),
-				[`sh-tabs-size-${props.size}`]: true,
+				[`sh-tabs-size-${vmSize.value}`]: true,
 				[isHorizontal.value ? 'sh-tabs-horizontal' : 'sh-tabs-vertical']: true
 			}
 		})

package/packages/components/sh-tag/index.vue

@@ -50,7 +50,7 @@ export default defineComponent({
 		},
 		size: {
 			type: String,
-			default: 'default' //  medium / small / mini
+			default: '' //  medium / small / mini
 		},
 		opacity: {
 			type: Number,
@@ -60,10 +60,12 @@ export default defineComponent({
 	emits: ['change', 'close'],
 	setup(props, context) {
 		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
+		const { $vUtils, $vUiSetup } = proxy
 		const { emit, slots } = context
 
 		const isChecked = ref(props.checked)
+
+		const vmSize = computed(() => props.size || $vUiSetup.size)
 		const colorIn = computed(() => props.color || 'default')
 		const colorRgb = computed(() => colorMap[colorIn.value] || $vUtils.lighten(colorIn.value))
 		const isCustom = computed(() => !!colorMap[colorIn.value])
@@ -79,7 +81,7 @@ export default defineComponent({
 		})
 		const classes = computed(() => {
 			return {
-				[`${props.size}`]: !!props.size,
+				[`${vmSize.value}`]: !!vmSize.value,
 				[`${props.type}`]: !!props.type,
 				[`closable`]: props.closable,
 				[`checked`]: isChecked.value,

package/packages/components/sh-toolbar/index.vue

@@ -4,12 +4,12 @@
 			<slot name="left"></slot>
 			<template v-if="isTool">
 				<template v-for="(toolBtn, toolBtnIndex) in toolBtns" :key="toolBtnIndex">
-					<vxe-button v-ripple v-bind="toolBtn" @click="handleToolBtn(toolBtn)"></vxe-button>
+					<vxe-button :size="vmSize" v-bind="toolBtn" @click="handleToolBtn(toolBtn)"></vxe-button>
 				</template>
 			</template>
 			<vxe-radio-group v-else v-model="leftActive" @change="handleLeftBtn">
 				<template v-for="(leftBtn, leftBtnIndex) in leftBtns" :key="leftBtnIndex">
-					<vxe-radio-button v-ripple v-bind="leftBtn" :label="leftBtn.value"></vxe-radio-button>
+					<vxe-radio-button :size="vmSize" v-bind="leftBtn" :label="leftBtn.value"></vxe-radio-button>
 				</template>
 			</vxe-radio-group>
 			<slot name="leftr"></slot>
@@ -17,7 +17,7 @@
 		<div class="toolbar-right">
 			<slot name="rightl"></slot>
 			<template v-for="(rightBtn, rightBtnIndex) in rightBtns" :key="rightBtnIndex">
-				<vxe-button v-ripple v-bind="rightBtn" @click="handleRightBtn(rightBtn)"></vxe-button>
+				<vxe-button :size="vmSize" v-bind="rightBtn" @click="handleRightBtn(rightBtn)"></vxe-button>
 			</template>
 			<slot name="right"></slot>
 		</div>
@@ -87,16 +87,21 @@ export default defineComponent({
 					{ code: 'batch-detail', content: '查看', status: '', icon: 'vxe-icon-information' }
 				]
 			}
+		},
+		size: {
+			type: String,
+			default: '' //  medium / small / mini
 		}
 	},
-	emits: ['update:modelValue', 'left', 'right', 'tool'],
+	emits: ['update:modelValue', 'input', 'left', 'right', 'tool'],
 	setup(props, context) {
 		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
+		const { $vUtils, $vUiSetup } = proxy
 		const { emit, slots } = context
 
 		const leftActive = ref(props.modelValue)
 
+		const vmSize = computed(() => props.size || $vUiSetup.size)
 		const leftBtns = computed(() => {
 			let lBtns = []
 			if (props.leftContain && Array.isArray(props.leftContain)) {
@@ -125,7 +130,7 @@ export default defineComponent({
 
 		const handleLeftBtn = ({ label }) => {
 			let btnObj = props.leftConfig.find(item => item.value === label)
-			emitValue()
+			emitValue(btnObj)
 			emit('left', label, btnObj)
 		}
 		const handleRightBtn = btn => {
@@ -134,7 +139,8 @@ export default defineComponent({
 		const handleToolBtn = btn => {
 			emit('tool', btn)
 		}
-		const emitValue = () => {
+		const emitValue = btnObj => {
+			emit('input', leftActive.value, btnObj)
 			emit('update:modelValue', leftActive.value)
 		}
 

package/packages/components/sh-tree/components/table-tree.vue

@@ -37,6 +37,7 @@ const tableConfigDefault = {
 	showFooter: false,
 	showOverflow: true,
 	resizeConfig: { refreshDelay: 100 },
+	cellConfig: { padding: false, height: 32, verticalAlign: 'center' },
 	columnConfig: { width: 120 },
 	virtualXConfig: { enabled: true, gt: 20 },
 	virtualYConfig: { enabled: true, gt: 20 }

package/packages/css/animated.scss

@@ -1,33 +1,4 @@
 /* 设置持续时间和动画函数 */
-.sh-pop-in-enter-active,
-.sh-pop-in-leave-active,
-.sh-pop-out-enter-active,
-.sh-pop-out-leave-active,{
-	will-change: transform;
-	transform-origin: center;
-	transition: all 0.1s;
-	backface-visibility: hidden;
-	perspective: 1000px;
-	width: 100%;
-	height: 100%;
-	position: absolute;
-}
-.sh-pop-in-enter-from, .sh-pop-out-leave-to {
-	transform: translateX(50%);
-	opacity: 0;
-}
-.sh-pop-in-enter-to {
-	transform: translateX(0);
-	opacity: 1;
-}
-.sh-pop-out-enter-from, .sh-pop-in-leave-to {
-	transform: translateX(-50%);
-	opacity: 0;
-}
-.sh-pop-out-enter-to {
-	transform: translateX(0);
-	opacity: 1;
-}
 $animation-time: .3s;
 $animation-time-quick: .15s;
 $transition-time: .2s;

package/packages/utils/resize.js

@@ -15,7 +15,7 @@ function eventHandle() {
 				const rHeight = clientHeight && heighe !== clientHeight
 				if (rWidth || rHeight) {
 					observer.width = clientWidth
-					observer.heighe = clientHeight
+					observer.height = clientHeight
 					setTimeout(item.callback)
 				}
 			})
@@ -42,7 +42,7 @@ export class XEResizeObserver {
 				tarList.push({
 					target,
 					width: target.clientWidth,
-					heighe: target.clientHeight
+					height: target.clientHeight
 				})
 			}
 			if (!eventStore.length) {

package/packages/vxeTable/css/index.scss

@@ -153,9 +153,13 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
         font-family: inherit;
         color: inherit;
         .vxe-table--render-wrapper{
-            .vxe-cell{
-                padding-left: 2px;
-                padding-right: 2px;
+            .vxe-body--column{
+                &.is--padding{
+                    .vxe-cell{
+                        padding-left: 2px;
+                        padding-right: 2px;
+                    }
+                }
             }
             .vxe-header--column{
                 .vxe-cell{

package/packages/vxeTable/index.js

@@ -20,6 +20,7 @@ import { utils } from 'sh-tools'
 import { publicRenders, extraRenders, filterRenders, publicRendersNames } from './render/globalRenders.jsx'
 
 let uiOptions = {
+	size: 'small',
 	input: {
 		controls: false,
 		clearable: true
@@ -46,7 +47,7 @@ let uiOptions = {
 			{ label: '500条', value: 500 },
 			{ label: '1000条', value: 1000 },
 			{ label: '10000条', value: 10000 },
-			{ label: '10万条', value: 100000 }
+			{ label: '全部', value: 999999999 }
 		],
 		align: 'right',
 		border: true,
@@ -93,6 +94,19 @@ let tableOptions = {
 			drag: false,
 			resizable: false
 		},
+		headerCellConfig: {
+			padding: false,
+			height: 40
+		},
+		cellConfig: {
+			padding: true,
+			height: 40,
+			verticalAlign: 'center'
+		},
+		footerCellConfig: {
+			padding: true,
+			height: 40
+		},
 		columnConfig: {
 			useKey: true,
 			isHover: true,
@@ -257,6 +271,7 @@ const index = {
 		Vue.config.globalProperties.$vModal = VXEUI.modal
 		Vue.config.globalProperties.$vUi = VXEUI
 		Vue.config.globalProperties.$vTable = VXETable
+		Vue.config.globalProperties.$vUiSetup = vuiOption
 		Vue.config.globalProperties.$vTableSetup = vtableOption
 		Vue.config.globalProperties.$vxePluginNames = publicRendersNames
 	}

package/packages/vxeTable/render/filters/vxe-filter-complex.vue

@@ -3,7 +3,7 @@
 		<div class="vxe-filter--top">
 			<vxe-radio-group v-model="renderOption.data.type">
 				<template v-for="filterType in filterTypes" :key="filterType.value">
-					<vxe-radio-button v-ripple :label="filterType.value" size="mini">{{ filterType.label }}</vxe-radio-button>
+					<vxe-radio-button :label="filterType.value" size="mini">{{ filterType.label }}</vxe-radio-button>
 				</template>
 			</vxe-radio-group>
 		</div>