sh-view 2.0.8 → 2.2.0

package/packages/components/other-components/sh-preview/index.vue

@@ -1,85 +1,86 @@
-<template>
-	<div class="sh-preview">
-		<component :is="componentName" v-bind="componentProps" :style="componentStyles" @rendered="onRendered" @error="onError" />
-	</div>
-</template>
-
-<script>
-import * as ShWord from '@vue-office/docx'
-import '@vue-office/docx/lib/index.css'
-import * as ShExcel from '@vue-office/excel'
-import '@vue-office/excel/lib/index.css'
-import * as ShPdf from '@vue-office/pdf'
-export default {
-	name: 'ShPreview',
-	components: {
-		ShWord,
-		ShExcel,
-		ShPdf
-	},
-	props: {
-		type: {
-			type: String
-		},
-		base: {
-			type: String
-		},
-		url: {
-			type: String
-		},
-		width: {
-			type: String,
-			default: '100%'
-		},
-		height: {
-			type: String,
-			default: '600px'
-		}
-	},
-	emits: ['ready', 'error'],
-	computed: {
-		previewType() {
-			return (this.type && this.type.toLowerCase()) || (this.url && this.url.substr(this.url.lastIndexOf('.') + 1).toLowerCase())
-		},
-		componentName() {
-			if (['word', 'doc', 'docx'].includes(this.previewType)) {
-				return 'sh-word'
-			} else if (['excel', 'xlsx'].includes(this.previewType)) {
-				return 'sh-excel'
-			} else if (['pdf'].includes(this.previewType)) {
-				return 'sh-pdf'
-			}
-			return 'iframe'
-		},
-		componentProps() {
-			let srcPrefix = this.base || ''
-			let srcSuffix = this.componentName === 'iframe' ? '#scrollbars=0&toolbar=0&statusbar=0' : ''
-			return {
-				src: srcPrefix + this.url + srcSuffix,
-				frameborder: 0
-			}
-		},
-		componentStyles() {
-			return {
-				width: this.width,
-				height: this.height
-			}
-		}
-	},
-	methods: {
-		onRendered(data) {
-			this.$emit('ready', data)
-		},
-		onError(data) {
-			this.$emit('error', data)
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.sh-preview {
-	position: relative;
-	overflow: auto;
-}
-</style>
+<template>
+	<div class="sh-preview">
+		<component :is="componentName" v-bind="componentProps" :style="componentStyles" @rendered="onRendered" @error="onError" />
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue'
+import ShWord from './components/sh-word.vue'
+import ShExcel from './components/sh-excel.vue'
+export default defineComponent({
+	name: 'ShPreview',
+	components: {
+		ShWord,
+		ShExcel
+	},
+	props: {
+		type: {
+			type: String
+		},
+		base: {
+			type: String
+		},
+		url: {
+			type: String
+		},
+		width: {
+			type: String,
+			default: '100%'
+		},
+		height: {
+			type: String,
+			default: '600px'
+		}
+	},
+	emits: ['ready', 'error'],
+	setup(props, context) {
+		const { emit, slots } = context
+		const previewType = computed(() => (props.type && props.type.toLowerCase()) || (props.url && props.url.substr(props.url.lastIndexOf('.') + 1).toLowerCase()))
+		const componentName = computed(() => {
+			if (['word', 'doc', 'docx'].includes(previewType.value)) {
+				return 'sh-word'
+			} else if (['excel', 'xlsx'].includes(previewType.value)) {
+				return 'sh-excel'
+			}
+			return 'iframe'
+		})
+		const componentProps = computed(() => {
+			let srcPrefix = props.base || ''
+			let srcSuffix = componentName.value === 'iframe' ? '#scrollbars=0&toolbar=0&statusbar=0' : ''
+			return {
+				src: srcPrefix + props.url + srcSuffix,
+				frameborder: 0
+			}
+		})
+		const componentStyles = computed(() => {
+			return {
+				width: props.width,
+				height: props.height
+			}
+		})
+
+		const onRendered = data => {
+			emit('ready', data)
+		}
+		const onError = data => {
+			emit('error', data)
+		}
+
+		return {
+			componentName,
+			componentProps,
+			componentStyles,
+			onRendered,
+			onError
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.sh-preview {
+	position: relative;
+	overflow: auto;
+}
+</style>

package/packages/components/other-components/sh-preview/js/data-hook.js

@@ -0,0 +1,37 @@
+import { onMounted, ref, watch } from 'vue'
+
+export default function (props, context, state) {
+	const rootRef = ref(null)
+	const { emit } = context
+
+	const initData = async () => {
+		if (!props.src) return
+		let container = rootRef.value
+		try {
+			let fileRes = src
+			if (typeof src === 'string') {
+				fileRes = fetch(src, props.serverConfig)
+			}
+			await state.domRender(fileRes, container)
+			emit('rendered')
+		} catch (e) {
+			await state.domRender('', container)
+			emit('error', e)
+		}
+	}
+
+	onMounted(() => {
+		initData()
+	})
+
+	watch(
+		() => props.src,
+		() => {
+			initData()
+		}
+	)
+
+	return {
+		rootRef
+	}
+}

package/packages/components/other-components/sh-preview/js/data-props.js

@@ -0,0 +1,11 @@
+export default {
+	src: [String, ArrayBuffer, Blob],
+	options: {
+		type: Object,
+		default: () => ({})
+	},
+	serverConfig: {
+		type: Object,
+		default: () => ({})
+	}
+}

package/packages/components/other-components/sh-system-tip/index.vue

@@ -1,113 +1,115 @@
-<template>
-	<sh-header size="large">
-		<template #title>
-			<div v-html="headerTitle.title"></div>
-		</template>
-		<div>{{ headerTitle.desc }}</div>
-	</sh-header>
-</template>
-
-<script>
-export default {
-	name: 'SystemTip',
-	props: {
-		name: {
-			type: String,
-			default: ''
-		}
-	},
-	data() {
-		return {
-			nowdate: new Date()
-		}
-	},
-	computed: {
-		headerDate() {
-			let hours = this.nowdate.getHours()
-			let month = this.nowdate.getMonth() + 1
-			let day = this.nowdate.getDate()
-			let week = this.nowdate.getDay()
-			return { date: this.nowdate, hours, month, day, week }
-		},
-		headerWeek() {
-			let { week } = this.headerDate
-			let tw = ''
-			switch (week) {
-				case 0:
-					tw = '星期天'
-					break
-				case 1:
-					tw = '星期一'
-					break
-				case 2:
-					tw = '星期二'
-					break
-				case 3:
-					tw = '星期三'
-					break
-				case 4:
-					tw = '星期四'
-					break
-				case 5:
-					tw = '星期五'
-					break
-				case 6:
-					tw = '星期六'
-					break
-			}
-			return tw
-		},
-		headerTitle() {
-			let { hours } = this.headerDate
-			let title = ''
-			let desc = ''
-			switch (true) {
-				case hours === 0 || (hours >= 23 && hours <= 24):
-					title = '午夜啦,早点休息喔'
-					desc = '思念不因劳累而改变,问候不因疲惫而变懒,祝福不因休息而变缓,关怀随星星眨眼,牵挂在深夜依然,轻轻道声:祝你晚安!'
-					break
-				case hours >= 1 && hours <= 4:
-					title = '凌晨啦,注意身体喔'
-					desc = '时间不早啦,记得早点休息,保证睡眠质量!'
-					break
-				case hours >= 5 && hours <= 6:
-					title = '清晨啦,准备迎接新的一天吧'
-					desc = '睁开眼,缓一缓,快起床,伸懒腰;笑一笑,美好的一天又开始了.早安,祝你今天好心情,工作顺利,生活甜美!'
-					break
-				case hours >= 7 && hours <= 8:
-					title = '早上好,记得吃早餐喔'
-					desc = '一日之计在于晨,愿我这阳光初露时的小小问候能将快乐带给你,愿你用快乐开启,用微笑结束这美好的一天.'
-					break
-				case hours >= 9 && hours <= 10:
-					title = '上午好,时刻保持好心情呀'
-					desc = '上午好,一束阳光照在身,祝你天天都开心,财神家中去,梦想变成真,今天中大奖,明天去上任.'
-					break
-				case hours >= 11 && hours <= 12:
-					title = '中午好,午餐时间到啦'
-					desc = '中午好,到了吃午餐的时间了,吃完午餐记得午睡一小会,保证下午可以有良好的精神状态.'
-					break
-				case hours >= 13 && hours <= 16:
-					title = '下午好,别太辛苦了'
-					desc = '送各位一杯下午茶:已祝福为叶,叮咛做花,热情为水,包容当杯,喝出你一天好心情和一生的幸福,下午愉快!'
-					break
-				case hours >= 17 && hours <= 18:
-					title = '傍晚啦,看看窗外的风景吧'
-					desc = '工作是做不完的,身体可是累的垮的!看看外面的天空吧!'
-					break
-				case hours >= 19 && hours <= 22:
-					title = '晚上好,准备好进入梦乡啦'
-					desc = '睡前请把窗户打开,让"幸福"进来,睡前请把"心情"打开,让"快乐"入驻,睡前请把"思想"放飞,让甜蜜入梦!今晚祝你好梦成真,幸福一生!晚安!'
-					break
-			}
-			return { title: `Hi! <span class="primary">${this.name}</span>  ${title}`, desc }
-		}
-	},
-	watch: {},
-	created() {},
-	mounted() {},
-	beforeUnmount() {},
-	methods: {}
-}
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+	<sh-header size="large">
+		<template #title>
+			<div v-html="headerTitle.title"></div>
+		</template>
+		<div>{{ headerTitle.desc }}</div>
+	</sh-header>
+</template>
+
+<script>
+import { defineComponent, computed, onActivated } from 'vue'
+export default defineComponent({
+	name: 'SystemTip',
+	props: {
+		name: {
+			type: String,
+			default: ''
+		}
+	},
+	setup(props, context) {
+		let nowdate = new Date()
+
+		const headerDate = computed(() => {
+			let hours = nowdate.getHours()
+			let month = nowdate.getMonth() + 1
+			let day = nowdate.getDate()
+			let week = nowdate.getDay()
+			return { date: nowdate, hours, month, day, week }
+		})
+		const headerWeek = computed(() => {
+			let { week } = headerDate.value
+			let tw = ''
+			switch (week) {
+				case 0:
+					tw = '星期天'
+					break
+				case 1:
+					tw = '星期一'
+					break
+				case 2:
+					tw = '星期二'
+					break
+				case 3:
+					tw = '星期三'
+					break
+				case 4:
+					tw = '星期四'
+					break
+				case 5:
+					tw = '星期五'
+					break
+				case 6:
+					tw = '星期六'
+					break
+			}
+			return tw
+		})
+		const headerTitle = computed(() => {
+			let { hours } = headerDate.value
+			let title = ''
+			let desc = ''
+			switch (true) {
+				case hours === 0 || (hours >= 23 && hours <= 24):
+					title = '午夜啦,早点休息喔'
+					desc = '思念不因劳累而改变,问候不因疲惫而变懒,祝福不因休息而变缓,关怀随星星眨眼,牵挂在深夜依然,轻轻道声:祝你晚安!'
+					break
+				case hours >= 1 && hours <= 4:
+					title = '凌晨啦,注意身体喔'
+					desc = '时间不早啦,记得早点休息,保证睡眠质量!'
+					break
+				case hours >= 5 && hours <= 6:
+					title = '清晨啦,准备迎接新的一天吧'
+					desc = '睁开眼,缓一缓,快起床,伸懒腰;笑一笑,美好的一天又开始了.早安,祝你今天好心情,工作顺利,生活甜美!'
+					break
+				case hours >= 7 && hours <= 8:
+					title = '早上好,记得吃早餐喔'
+					desc = '一日之计在于晨,愿我这阳光初露时的小小问候能将快乐带给你,愿你用快乐开启,用微笑结束这美好的一天.'
+					break
+				case hours >= 9 && hours <= 10:
+					title = '上午好,时刻保持好心情呀'
+					desc = '上午好,一束阳光照在身,祝你天天都开心,财神家中去,梦想变成真,今天中大奖,明天去上任.'
+					break
+				case hours >= 11 && hours <= 12:
+					title = '中午好,午餐时间到啦'
+					desc = '中午好,到了吃午餐的时间了,吃完午餐记得午睡一小会,保证下午可以有良好的精神状态.'
+					break
+				case hours >= 13 && hours <= 16:
+					title = '下午好,别太辛苦了'
+					desc = '送各位一杯下午茶:已祝福为叶,叮咛做花,热情为水,包容当杯,喝出你一天好心情和一生的幸福,下午愉快!'
+					break
+				case hours >= 17 && hours <= 18:
+					title = '傍晚啦,看看窗外的风景吧'
+					desc = '工作是做不完的,身体可是累的垮的!看看外面的天空吧!'
+					break
+				case hours >= 19 && hours <= 22:
+					title = '晚上好,准备好进入梦乡啦'
+					desc = '睡前请把窗户打开,让"幸福"进来,睡前请把"心情"打开,让"快乐"入驻,睡前请把"思想"放飞,让甜蜜入梦!今晚祝你好梦成真,幸福一生!晚安!'
+					break
+			}
+			return { title: `Hi! <span class="primary">${props.name}</span>  ${title}`, desc }
+		})
+
+		onActivated(() => {
+			nowdate = new Date()
+		})
+
+		return {
+			headerWeek,
+			headerTitle
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped></style>

package/packages/css/index.js

@@ -1,4 +1,4 @@
-import '../assets/css/theme.scss'
-import '../assets/css/loader.scss'
-import '../assets/css/main.scss'
-import '../assets/css/animated.scss'
+import './theme.scss'
+import './loader.scss'
+import './main.scss'
+import './animated.scss'

package/packages/{assets/css → css}/main.scss

@@ -158,11 +158,6 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {  -webkit-ap
 input[type="number"]{  -moz-appearance: textfield; }
 .disabled-gray{ filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
 
-
-// iview 样式调整
-.ivu-layout{ background: transparent }
-.ivu-drawer-content{ background-color: var(--vxe-table-body-background-color) }
-
 .sh-prevent--disabled{
     background-color: #ddd !important;
     border-color: #ddd !important;
@@ -188,39 +183,6 @@ input[type="number"]{  -moz-appearance: textfield; }
     margin-right: 5px;
 }
 
-// 布局样式
-.sh-layout-wrap {
-    background-color: var(--main-background);
-    .header-item{
-        padding: 0 8px;
-        cursor: pointer;
-        &:hover{
-            background-color: rgba(0, 0, 0, .1);
-        }
-    }
-    .sh-layout-layout-sider{
-        height: 100%;
-        flex-direction: row;
-    }
-    .sh-layout-layout-content{
-        overflow-x: hidden;
-        position: relative;
-        margin: 9px;
-    }
-    .sh-layout-layout-content-inner{
-        width: 100%;
-        height: 100%;
-        overflow-x: hidden;
-        overflow-y: auto;
-        position: absolute;
-    }
-}
-.sh-layout-drawer-sider{
-    .sh-sys-logo{
-        height: auto;
-        max-height: 100px;
-    }
-}
 
 //sh空数据风格
 .sh-empty{
@@ -229,10 +191,6 @@ input[type="number"]{  -moz-appearance: textfield; }
     padding: 10px;
 }
 
-//sh列表list风格
-.sh-list{
-}
-
 // sh-vxeform无底部提交按钮，做公共样式
 .sh-common-footer{
     padding: 10px;
@@ -240,16 +198,10 @@ input[type="number"]{  -moz-appearance: textfield; }
     display: flex;
     align-items: center;
     justify-content: space-between;
-    .vxe-button + .vxe-button,
-    .vxe-button + .vxe-button--dropdown,
-    .vxe-input + .vxe-button,
-    .vxe-input + .vxe-button--dropdown{
-        margin-left: 5px;
-    }
-    .sh-table-form-buttons-left{
+    &-left{
         flex: 1;
     }
-    .sh-table-form-buttons-right{
+    &-right{
     }
 }
 

package/packages/{assets/css → css}/theme.scss

@@ -72,24 +72,43 @@
 	--vxe-primary-darken-color: #e03554;
 	--primary-weak-color: #ffccd6;
 }
+
 // 暗黑
 .sh-dark-mode{
-	--vxe-font-color: 						#999999;
-	--vxe-icon-background-color: 			#999999;
-	--vxe-table-font-color: 				#999999;
-	--vxe-table-header-background-color: 	#222222;
-	--vxe-table-body-background-color: 		#141414;
-	--vxe-table-footer-background-color:	#141414;
-	--vxe-input-background-color: 			#0a0a0a;
-	--vxe-textarea-background-color:		#0a0a0a;
-	--vxe-textarea-count-background-color:	#0a0a0a;
-	--vxe-table-border-color: 				#454545;
-	--vxe-input-border-color:				#454545;
-	--vxe-pager-background-color:			#141414;
+	--vxe-font-color: 								#dddddd;
+	--vxe-icon-background-color: 					#dddddd;
+	--vxe-table-font-color: 						#dddddd;
+	--vxe-table-header-font-color:					#dddddd;
+	--vxe-table-header-background-color: 			#444444;
+	--vxe-table-body-background-color: 				#141414;
+	--vxe-table-footer-background-color:			#141414;
+	--vxe-table-row-hover-background-color: 		#454545;
+	--vxe-table-row-striped-background-color: 		#111111;
+	--vxe-table-row-hover-striped-background-color: #555555;
+	--vxe-table-row-radio-checked-background-color: 			#090909;
+	--vxe-table-row-hover-radio-checked-background-color: 		#000000;
+	--vxe-table-row-checkbox-checked-background-color: 			#090909;
+	--vxe-table-row-hover-checkbox-checked-background-color: 	#000000;
+	--vxe-table-row-current-background-color: 		#090909;
+	--vxe-table-row-hover-current-background-color: #000000;
+	--vxe-table-column-hover-background-color: 		#454545;
+	--vxe-table-column-current-background-color: 	#090909;
+	--vxe-input-date-picker-hover-background-color:	#666666;
+	--vxe-input-background-color: 					#0a0a0a;
+	--vxe-input-panel-background-color: 			#0a0a0a;
+	--vxe-textarea-background-color:				#0a0a0a;
+	--vxe-textarea-count-background-color:			#0a0a0a;
+	--vxe-pulldown-panel-background-color: 			#141414;
+	--vxe-pager-background-color:					#141414;
 	--vxe-pager-perfect-background-color:			#141414;
 	--vxe-pager-perfect-button-background-color:	#454545;
-	--vxe-button-default-background-color:	#454545;
-	--vxe-switch-close-background-color:	#454545;
-	--main-background: 						#0a0a0a;
-	--primary-weak-color: 					#222222;
+	--vxe-button-default-background-color:			#454545;
+	--vxe-switch-close-background-color:			#454545;
+	--vxe-select-panel-background-color:			#141414;
+	--vxe-select-option-hover-background-color: 	#454545;
+	--vxe-table-border-color: 						#666666;
+	--vxe-input-border-color:						#666666;
+	--vxe-table-popup-border-color:					#666666;
+	--primary-weak-color: 							#222222;
+	--main-background: 								#0a0a0a;
 }

package/packages/directive/module/prevent-click.js

@@ -3,7 +3,7 @@ import { utils } from 'sh-tools'
 let preventClass = 'sh-prevent--disabled'
 
 export default {
-	inserted(el, binding) {
+	mounted(el, binding) {
 		el.addEventListener('click', () => {
 			if (!el.disabled) {
 				el.disabled = true