sh-view 1.5.2

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

@@ -0,0 +1,122 @@
+<template>
+	<Card class="sh-card" :size="size" :bordered="border" :dis-hover="disHover" :shadow="shadow" :padding="padding" :to="to" :replace="replace" :target="target" :append="append">
+		<template #title>
+			<div v-if="title || $slots.title" class="sh-card-head-title">
+				<sh-icon v-if="icon" :type="icon" :size="iconSize" :color="color" class="mr-2"></sh-icon>
+				<slot name="title">{{ title }}</slot>
+			</div>
+		</template>
+		<template #extra>
+			<div v-if="$slots.extra" class="sh-card-head-extra"><slot name="extra"></slot></div>
+		</template>
+		<slot></slot>
+	</Card>
+</template>
+
+<script>
+export default {
+	name: 'ShCard',
+	components: {},
+	props: {
+		border: {
+			type: Boolean,
+			default: true
+		},
+		disHover: {
+			type: Boolean,
+			default: true
+		},
+		shadow: {
+			type: Boolean,
+			default: false
+		},
+		padding: {
+			type: Number,
+			default: 10
+		},
+		title: {
+			type: String
+		},
+		color: {
+			type: String,
+			default: '#2d8cf0'
+		},
+		icon: {
+			type: String,
+			default: ''
+		},
+		iconSize: {
+			type: Number,
+			default: 20
+		},
+		to: {
+			type: [String, Object]
+		},
+		replace: {
+			type: Boolean
+		},
+		target: {
+			type: String
+		},
+		append: {
+			type: Boolean
+		},
+		size: {
+			type: String,
+			default: 'default'
+		}
+	},
+	computed: {}
+}
+</script>
+
+<style lang="scss">
+.sh-card {
+	&[size='default'] {
+	}
+	&[size='large'] {
+		.sh-card-head-title {
+			font-size: 20px;
+			line-height: 1.5;
+		}
+		.ivu-card-head {
+			padding: 14px 16px;
+		}
+		.ivu-card-body {
+			font-size: 1.1em;
+		}
+	}
+	&[size='small'] {
+		.sh-card-head-title {
+			font-size: 15px;
+			line-height: 1.2;
+		}
+		.ivu-card-head {
+			padding: 10px 12px;
+		}
+		.ivu-card-body {
+			font-size: 0.9em;
+		}
+	}
+	&[size='mini'] {
+		.sh-card-head-title {
+			font-size: 13px;
+			line-height: 1.1;
+		}
+		.ivu-card-head {
+			padding: 8px 10px;
+		}
+		.ivu-card-body {
+			font-size: 0.9em;
+		}
+	}
+	.sh-card-head-title {
+		font-size: 17px;
+		line-height: 1.3;
+	}
+	.sh-card-head-extra {
+		cursor: pointer;
+		display: inline-block;
+	}
+}
+</style>

package/packages/components/global-components/sh-code-editor/index.vue

@@ -0,0 +1,237 @@
+<template>
+	<div class="sh-code-editor" :style="shStyles">
+		<div ref="codeMirror" class="sh-code-content" />
+		<div v-if="error" class="sh-code-error" v-html="error"></div>
+	</div>
+</template>
+
+<script>
+import { basicSetup } from 'codemirror'
+import { keymap, placeholder, drawSelection, lineNumbers, EditorView } from '@codemirror/view'
+import { Compartment, EditorState, StateEffect } from '@codemirror/state'
+import { defaultKeymap, indentWithTab, historyKeymap, history } from '@codemirror/commands'
+import { javascript } from '@codemirror/lang-javascript'
+import { sql } from '@codemirror/lang-sql'
+import { json } from '@codemirror/lang-json'
+const language = new Compartment()
+const tabSize = new Compartment()
+export default {
+	name: 'ShCodeEditor',
+	props: {
+		modelValue: {
+			type: [String, Object],
+			default: ''
+		},
+		option: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		mode: {
+			type: String,
+			default: 'javascript'
+		},
+		theme: {
+			type: String,
+			default: 'default'
+		},
+		placeholder: {
+			type: String,
+			default: ''
+		},
+		readonly: {
+			type: Boolean
+		},
+		border: {
+			type: Boolean
+		},
+		indent: {
+			type: Number,
+			default: 4
+		},
+		wrap: {
+			type: Boolean,
+			default: true
+		},
+		tab: {
+			type: Boolean
+		},
+		multipleSelection: {
+			type: Boolean,
+			default: true
+		},
+		extensions: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		width: {
+			type: [String, Number],
+			default: '100%'
+		},
+		height: {
+			type: [String, Number],
+			default: 'auto'
+		}
+	},
+	emits: ['update:modelValue', 'change', 'loaded', 'focus', 'destroy'],
+	data() {
+		return {
+			codeEditor: null,
+			codeLength: 0,
+			result: '',
+			error: null
+		}
+	},
+	computed: {
+		shStyles() {
+			return {
+				width: this.width,
+				height: this.height,
+				border: this.border ? '1px solid var(--border-color)' : 'none'
+			}
+		},
+		codeFocus() {
+			return this.codeEditor && this.codeEditor?.hasFocus
+		},
+		codeExtensions() {
+			let defaultExtensions = [basicSetup, history(), drawSelection(), lineNumbers(), placeholder(this.placeholder), keymap.of([...defaultKeymap, ...historyKeymap])]
+			if (['javascript', 'js'].includes(this.mode.toLowerCase())) {
+				defaultExtensions.push(javascript())
+			} else if (['mysql', 'sql'].includes(this.mode.toLowerCase())) {
+				defaultExtensions.push(sql())
+			} else if (['json'].includes(this.mode.toLowerCase())) {
+				defaultExtensions.push(json())
+			}
+			return [
+				...defaultExtensions,
+				EditorView.updateListener.of(this.updateListener),
+				EditorView.theme(null, { dark: this.theme === 'dark' }),
+				EditorView.editable.of(!this.disabled),
+				EditorState.allowMultipleSelections.of(this.multipleSelection),
+				tabSize.of(EditorState.tabSize.of(this.indent)),
+				this.tab ? keymap.of([indentWithTab]) : undefined,
+				this.wrap ? EditorView.lineWrapping : undefined,
+				...this.extensions
+			].filter(item => !!item)
+		}
+	},
+	watch: {
+		modelValue: {
+			handler(value) {
+				if (this.codeEditor) {
+					if (this.codeEditor.composing) return
+					// this.codeEditor.dispatch({
+					// 	changes: { from: 0, to: this.codeEditor.state.doc.length, insert: value },
+					// 	selection: this.codeEditor.state.selection,
+					// 	scrollIntoView: true
+					// })
+					this.codeLength = this.codeEditor.state.doc.length
+				}
+			},
+			immediate: true
+		},
+		codeFocus(value) {
+			this.emitFocus(value)
+		},
+		codeExtensions: {
+			handler(exts) {
+				this.codeEditor?.dispatch({
+					effects: StateEffect.reconfigure.of(exts)
+				})
+			},
+			immediate: true
+		}
+	},
+	mounted() {
+		this.codeRender()
+	},
+	unmounted() {
+		if (this.codeEditor) this.codeEditor.destroy()
+		this.emitDestroy()
+	},
+	methods: {
+		codeRef() {
+			return this.$refs.codeMirror
+		},
+		async codeRender() {
+			const { codeRef, codeExtensions, modelValue, emitLoaded } = this
+			let docText = typeof modelValue === 'object' ? JSON.stringify(modelValue) : modelValue
+			let codeState = EditorState.create({
+				doc: docText,
+				extensions: codeExtensions
+			})
+			this.codeEditor = new EditorView({
+				parent: codeRef(),
+				state: codeState
+			})
+			await this.$nextTick()
+			emitLoaded()
+		},
+		async updateListener({ state, changes, docChanged }) {
+			if (changes.empty || !docChanged) {
+				return
+			}
+			let valueStr = state.doc.toString()
+			// if (props.linter) {
+			// 	// Linter process
+			// 	if (props.forceLinting) {
+			// 		// If forceLinting enabled, first liting.
+			// 		forceLinting(view.value);
+			// 	}
+			// 	// Count diagnostics.
+			// 	diagnosticCount.value = (
+			// 		props.linter(view.value) as readonly Diagnostic[]
+			// ).length;
+			// }
+			this.emitValue(valueStr)
+			this.emitChange(valueStr)
+		},
+		focus() {
+			this.codeEditor && this.codeEditor.focus()
+		},
+		emitValue(value) {
+			let emitValue = typeof this.modelValue === 'object' ? JSON.parse(value) : value
+			this.$emit('update:modelValue', emitValue)
+		},
+		emitChange(value) {
+			this.$emit('change', { value, $event: this.codeEditor })
+			this.emitValue(value)
+		},
+		emitFocus(value) {
+			this.$emit('focus', value)
+		},
+		emitLoaded() {
+			this.$emit('loaded', { value: this.modelValue, $event: this.codeEditor })
+		},
+		emitDestroy() {
+			this.$emit('destroy', { value: this.modelValue, $event: this.codeEditor })
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-code-editor {
+	display: flex;
+	position: relative;
+	overflow: auto;
+	border-radius: var(--border-radius);
+	.sh-code-content {
+		flex: 1;
+		display: block;
+	}
+	.sh-code-error {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: var(--error-color);
+		color: #fff;
+		padding: 0 5px;
+		font-size: 12px;
+	}
+}
+</style>

package/packages/components/global-components/sh-corner/index.vue

@@ -0,0 +1,236 @@
+<template>
+	<a class="sh-corner" :style="styles" :type="type" :size="size" :class="classes">
+		<div class="sh-corner-content">
+			<div v-if="title || $slots.title">{{ title }}</div>
+			<span v-if="$slots.default"><slot></slot></span>
+		</div>
+		<span class="sh-corner-bg" :style="cornerStyles"></span>
+	</a>
+</template>
+
+<script>
+export default {
+	name: 'ShCorner',
+	components: {},
+	props: {
+		type: {
+			type: String,
+			default: ''
+		},
+		size: {
+			type: String,
+			default: 'default'
+		},
+		color: {
+			type: String,
+			default: '#e8e8e8'
+		},
+		title: {
+			type: [String, Number],
+			default: ''
+		},
+		width: {
+			type: [String, Number],
+			default: '60'
+		},
+		height: {
+			type: [String, Number],
+			default: '60'
+		},
+		font: {
+			type: [String, Number],
+			default: '10'
+		},
+		placement: {
+			type: String,
+			default: 'top-right'
+		},
+		rotate: [Boolean],
+		dark: [Boolean]
+	},
+	data() {
+		return {}
+	},
+	computed: {
+		styles() {
+			return {
+				borderColor: this.color,
+				width: `${this.width}px`,
+				height: `${this.height}px`,
+				fontSize: `${this.font}px`,
+				color: this.dark ? '#fff' : ''
+			}
+		},
+		cornerStyles() {
+			return {
+				borderWidth: `${this.width}px`
+			}
+		},
+		placeClass() {
+			return this.placement.toLowerCase().split('-')
+		},
+		classes() {
+			return [
+				...this.placeClass,
+				{
+					'sh-rotate': this.rotate
+				}
+			]
+		}
+	},
+	watch: {},
+	created() {},
+	methods: {}
+}
+</script>
+
+<style lang="scss">
+$corner-size: 4em;
+.sh-corner {
+	display: inline-block;
+	position: absolute;
+	top: 0;
+	right: 0;
+	margin: 0;
+	padding: 0 !important;
+	text-align: center;
+	border-color: #e8e8e8;
+	line-height: 1;
+	vertical-align: baseline;
+	overflow: hidden;
+	width: $corner-size;
+	height: $corner-size;
+	z-index: 1;
+	color: inherit;
+	background-color: transparent;
+	&:hover {
+		color: inherit;
+	}
+	> .sh-corner-content {
+		position: absolute;
+		margin: 0;
+		padding: 15% 5px;
+		width: 100%;
+		height: 100%;
+		right: 0;
+		top: 0;
+		display: inline-flex;
+		justify-content: flex-end;
+		align-items: flex-start;
+		flex-wrap: wrap;
+	}
+	&.sh-rotate {
+		> .sh-corner-content {
+			transform-origin: center;
+			justify-content: center !important;
+		}
+		&.top.left {
+			> .sh-corner-content {
+				right: auto;
+				left: 0;
+				top: 0;
+				transform: rotateZ(-45deg);
+			}
+		}
+		&.top.right {
+			> .sh-corner-content {
+				right: 0;
+				left: auto;
+				top: 0;
+				transform: rotateZ(45deg);
+			}
+		}
+		&.bottom.left {
+			> .sh-corner-content {
+				right: auto;
+				left: 0;
+				bottom: 0;
+				top: auto;
+				transform: rotateZ(45deg);
+				align-items: flex-end;
+			}
+		}
+		&.bottom.right {
+			> .sh-corner-content {
+				right: 0;
+				left: auto;
+				bottom: 0;
+				top: auto;
+				transform: rotateZ(-45deg);
+				align-items: flex-end;
+			}
+		}
+	}
+	& .sh-corner-bg {
+		position: absolute;
+		content: '';
+		right: 0;
+		top: 0;
+		z-index: -1;
+		width: 0;
+		height: 0;
+		background-color: transparent;
+		border-style: solid;
+		border-color: inherit;
+	}
+	&.top.left {
+		right: auto;
+		left: 0;
+		top: 0;
+		& .sh-corner-bg {
+			right: auto;
+			left: 0;
+			top: 0;
+			border-bottom-color: transparent !important;
+			border-right-color: transparent !important;
+			border-top-width: 0 !important;
+		}
+		> .sh-corner-content {
+			justify-content: flex-start;
+		}
+	}
+	&.top.right {
+		right: 0;
+		left: auto;
+		top: 0;
+		& .sh-corner-bg {
+			border-bottom-color: transparent !important;
+			border-left-color: transparent !important;
+			border-top-width: 0 !important;
+		}
+	}
+	&.bottom.left {
+		right: auto;
+		left: 0;
+		bottom: 0;
+		top: auto;
+		& .sh-corner-bg {
+			right: auto;
+			left: 0;
+			bottom: 0;
+			top: auto;
+			border-top-color: transparent !important;
+			border-right-color: transparent !important;
+			border-bottom-width: 0 !important;
+		}
+		> .sh-corner-content {
+			justify-content: flex-start;
+		}
+	}
+	&.bottom.right {
+		right: 0;
+		left: auto;
+		bottom: 0;
+		top: auto;
+		& .sh-corner-bg {
+			right: 0;
+			left: auto;
+			bottom: 0;
+			top: auto;
+			border-top-color: transparent !important;
+			border-left-color: transparent !important;
+			border-bottom-width: 0 !important;
+		}
+	}
+}
+</style>

package/packages/components/global-components/sh-count-to/index.vue

@@ -0,0 +1,46 @@
+<template>
+	<div class="sh-count-to">
+		<slot name="left"></slot>
+		<CountUp ref="count" :class="countClass" :start="start" :end="end" :decimals="decimals" :duration="duration" :options="options" :callback="callback" />
+		<slot name="right"></slot>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShCountTo',
+	props: {
+		start: {
+			type: Number,
+			default: 0
+		},
+		end: {
+			type: Number
+		},
+		decimals: {
+			type: Number
+		},
+		duration: {
+			type: Number,
+			default: 2
+		},
+		options: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		callback: {
+			type: Function
+		},
+		countClass: {
+			type: String
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-count-to {
+}
+</style>

package/packages/components/global-components/sh-empty/index.vue

@@ -0,0 +1,43 @@
+<template>
+	<div class="sh-empty-info">
+		<div v-if="noDataIcon" class="sh-empty-icon"><sh-icon :type="noDataIcon" size="24" /></div>
+		<div v-if="noDataText" v-line-clamp="clamp" class="sh-empty-text">{{ noDataText }}</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShEmpty',
+	components: {},
+	props: {
+		noDataIcon: {
+			type: String,
+			default: 'ios-cube-outline'
+		},
+		noDataText: {
+			type: String,
+			default: '暂无数据'
+		},
+		clamp: {
+			type: Number,
+			default: 2
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-empty-info {
+	width: 100%;
+	display: block;
+	text-align: center;
+	padding: 10px 0;
+	.sh-empty-icon {
+		padding: 3px;
+		box-sizing: border-box;
+		color: var(--theme-color);
+	}
+	.sh-empty-text {
+	}
+}
+</style>