sh-tools 1.2.7 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-tools",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "description": "基于xe-ajax和xe-utils二次封装",
   "main": "packages/index.js",
   "scripts": {
@@ -13,7 +13,6 @@
   "license": "ISC",
   "dependencies": {
     "hot-formula-parser": "^4.0.0",
-    "view-ui-plus": "^1.3.14",
     "xe-ajax": "^4.0.5",
     "xe-utils": "^3.5.11"
   },

package/packages/api/index.js

@@ -1,5 +1,5 @@
 import XEAjax from 'xe-ajax'
-import { Notice } from 'view-ui-plus'
+import Notice from '../components/sh-notification'
 
 class HttpRequest {
 	constructor(options = {}) {
@@ -53,7 +53,6 @@ class HttpRequest {
 	// 错误处理
 	async responseNext(response, next) {
 		const { status, statusText, headers } = response
-		const duration = 5
 		let resBody = null
 		try {
 			resBody = await response.json()
@@ -63,18 +62,18 @@ class HttpRequest {
 		let errorMsg = resBody.error || resBody.msg || resBody.message || resBody.result || statusText || '系统错误'
 		switch (status) {
 			case 0:
-				Notice.error({ title: '请求错误', desc: errorMsg, duration: duration })
+				Notice.error({ title: '请求错误', content: errorMsg })
 				break
 			case 200:
 				break
 			case 401:
-				Notice.error({ title: '系统提示 401', desc: '未授权，请重新登录', duration: duration })
+				Notice.error({ title: '系统提示 401', content: '未授权，请重新登录' })
 				return
 			case 504:
-				Notice.error({ title: '系统提示 网络超时', desc: errorMsg, duration: duration })
+				Notice.error({ title: '系统提示 网络超时', content: errorMsg })
 				break
 			default:
-				Notice.error({ title: `系统提示 ${status}`, desc: errorMsg, duration: duration })
+				Notice.error({ title: `系统提示 ${status}`, content: errorMsg })
 				break
 		}
 		this.setResponse(resBody)

package/packages/components/sh-notification/index.js

@@ -0,0 +1,58 @@
+import { createApp } from 'vue'
+import Notification from './notification.vue'
+
+let instances = []
+let seed = 0
+const now = Date.now()
+function getUuid() {
+	return 'ShNotification_' + now + '_' + seed++
+}
+
+function notice(type, options) {
+	const placement = options?.placement || 'right-top',
+		offset = 10,
+		nid = options?.id || getUuid()
+	const onClose = nid => {
+		const inss = instances.filter(n => n.placement.startsWith(placement)),
+			idx = inss.findIndex(n => n.nid === nid),
+			ins = inss[idx],
+			ykey = placement.split('-')[1]
+		if (idx > -1 && ins) {
+			for (let i = idx + 1; i < inss.length; i++) {
+				const cmpcss = getComputedStyle(inss[i].$el)
+				const y = parseInt(cmpcss[ykey]) || 0
+				inss[i].show(y - ins.$el.offsetHeight - offset + 'px')
+			}
+			instances = instances.filter(n => n.nid !== nid)
+		}
+	}
+	const option = Object.assign({ title: '提示', nid, type, placement }, options, { onClose }),
+		notification = createApp(Notification, option),
+		dom = document.createElement('div'),
+		ins = notification.mount(dom),
+		inss = instances.filter(n => n.placement.startsWith(option.placement))
+	document.body.appendChild(ins.$el)
+	let y = offset
+	inss.forEach(n => (y += n.$el.offsetHeight + offset))
+	ins.show(y + 'px')
+	instances.push(ins)
+	return { option, ins }
+}
+
+export default {
+	open(options) {
+		return notice('', options)
+	},
+	info(options) {
+		return notice('info', options)
+	},
+	success(options) {
+		return notice('success', options)
+	},
+	warning(options) {
+		return notice('warning', options)
+	},
+	error(options) {
+		return notice('error', options)
+	}
+}

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

@@ -0,0 +1,212 @@
+<template>
+	<transition :name="transtionName">
+		<div v-if="visible" class="sh-notification" :class="classes" :style="styles">
+			<svg v-if="['info', 'success', 'warning', 'error'].includes(type)" class="sh-notification-icon" :fill="colorStyle[type]" viewBox="64 64 896 896">
+				<template v-if="type === 'info'">
+					<path
+						d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+					<path d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path>
+				</template>
+				<template v-else-if="type === 'success'">
+					<path
+						d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path>
+					<path
+						d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+				</template>
+				<template v-else-if="type === 'warning'">
+					<path
+						d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+					<path d="M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"></path>
+				</template>
+				<template v-else-if="type === 'error'">
+					<path
+						d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 0 0-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path>
+					<path
+						d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+				</template>
+			</svg>
+			<div class="sh-notification-content">
+				<div class="sh-notification-title">
+					<u v-html="title"></u>
+					<a class="sh-notification-close" @click="close()">&times;</a>
+				</div>
+				<div v-if="content" class="sh-notification-description" v-html="content"></div>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script>
+export default {
+	name: 'ShNotification',
+	props: {
+		nid: String,
+		type: String,
+		duration: {
+			type: Number,
+			default: 3000
+		},
+		placement: {
+			type: String,
+			default: 'right-top' // left-top,right-top,left-bottom,right-bottom
+		},
+		title: String,
+		content: String,
+		className: String,
+		beforeClose: Function,
+		onClose: Function
+	},
+	data() {
+		return {
+			colorStyle: {
+				info: '#1890FF',
+				success: '#25ad4a',
+				error: '#ff3552',
+				warning: '#faad14'
+			},
+			visible: false,
+			vmOffset: 0,
+			timer: null
+		}
+	},
+	computed: {
+		transtionName() {
+			return 'notice-fade-' + this.placement.split('-')[0]
+		},
+		classes() {
+			return {
+				right: this.placement.startsWith('right'),
+				left: this.placement.startsWith('left'),
+				simple: !this.content
+			}
+		},
+		styles() {
+			let result = {}
+			const Y = this.placement.split('-')[1]
+			if (Y) result[Y] = this.vmOffset
+			return result
+		}
+	},
+	mounted() {
+		this.createTimer()
+	},
+	unmounted() {
+		this.clearTimer()
+	},
+	methods: {
+		createTimer() {
+			if (this.duration) {
+				this.timer = setTimeout(() => {
+					this.close()
+				}, this.duration)
+			}
+		},
+		clearTimer() {
+			if (this.timer) {
+				clearTimeout(this.timer)
+			}
+		},
+		show(top) {
+			this.visible = true
+			this.vmOffset = top
+		},
+		close() {
+			if (this.visible && this.onClose) {
+				this.beforeClose && this.beforeClose(this)
+				this.onClose(this.nid, this)
+				this.visible = false
+			}
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-notification {
+	border-radius: 5px;
+	color: #333;
+	display: inline-flex;
+	align-items: flex-start;
+	padding: 15px;
+	margin-bottom: 10px;
+	width: 400px;
+	max-width: 90%;
+	position: fixed;
+	z-index: 3000;
+	box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
+	background: #fff;
+	overflow: hidden;
+	vertical-align: top;
+	right: 15px;
+	transition: opacity 0.2s, transform 0.2s, left 0.2s, right 0.2s, top 0.3s, bottom 0.2s;
+	&.right {
+		right: 15px;
+		left: auto;
+	}
+	&.left {
+		left: 15px;
+		right: auto;
+	}
+	&.simple {
+		.sh-notification-icon {
+			width: 22px;
+		}
+	}
+	&-icon {
+		line-height: 1;
+		display: inline-block;
+		width: 33px;
+		margin: 2px 15px 0 5px;
+	}
+	&-content {
+		flex: 1;
+		.sh-notification-title {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			font-size: 18px;
+			line-height: 24px;
+			& > u {
+				flex: 1;
+				display: block;
+				text-decoration: none;
+				font-weight: normal;
+
+				padding-right: 5px;
+			}
+			.sh-notification-close {
+				display: inline-block;
+				cursor: pointer;
+				padding: 0 5px;
+				color: inherit;
+				vertical-align: top;
+			}
+		}
+		.sh-notification-description {
+			display: block;
+			width: 100%;
+			margin-top: 8px;
+			color: #666;
+		}
+	}
+}
+.notice-fade-left,
+.notice-fade-right {
+	&-enter-active,
+	&-leave-active {
+		transition: transform 150ms ease-in-out;
+	}
+}
+.notice-fade-left {
+	&-enter-from,
+	&-leave-to {
+		transform: translateX(-100%);
+	}
+}
+.notice-fade-right {
+	&-enter-from,
+	&-leave-to {
+		transform: translateX(100%);
+	}
+}
+</style>

package/packages/index.js

@@ -2,4 +2,6 @@ import http from './api/index'
 
 import utils from './utils/index'
 
-export { http, utils }
+import notice from './components/sh-notification'
+
+export { http, utils, notice }

package/packages/utils/color.js

@@ -6,14 +6,14 @@ const colorKeywords = new Map([
 	['white', '#FFFFFF'],
 	['maroon', '#800000'],
 	['red', '#FF0000'],
-	['purple', '#800080'],
+	['purple', '#722ed1'],
 	['fuchsia', '#FF00FF'],
-	['green', '#008000'],
-	['lime', '#00FF00'],
+	['green', '#52c41a'],
+	['lime', '#a0d911'],
 	['olive', '#808000'],
-	['yellow', '#FFFF00'],
+	['yellow', '#fadb14'],
 	['navy', '#000080'],
-	['blue', '#0000FF'],
+	['blue', '#1890ff'],
 	['teal', '#008080'],
 	['aqua', '#00FFFF'],
 	['aliceblue', '#f0f8ff'],
@@ -33,7 +33,7 @@ const colorKeywords = new Map([
 	['cornflowerblue', '#6495ed'],
 	['cornsilk', '#fff8dc'],
 	['crimson', '#dc143c'],
-	['cyan', '#00ffff'],
+	['cyan', '#13c2c2'],
 	['darkblue', '#00008b'],
 	['darkcyan', '#008b8b'],
 	['darkgoldenrod', '#b8860b'],
@@ -62,8 +62,9 @@ const colorKeywords = new Map([
 	['floralwhite', '#fffaf0'],
 	['forestgreen', '#228b22'],
 	['gainsboro', '#dcdcdc'],
+	['geekblue', '#2f54eb'],
 	['ghostwhite', '#f8f8ff'],
-	['gold', '#ffd700'],
+	['gold', '#faad14'],
 	['goldenrod', '#daa520'],
 	['greenyellow', '#adff2f'],
 	['grey', '#808080'],
@@ -94,7 +95,7 @@ const colorKeywords = new Map([
 	['lightyellow', '#ffffe0'],
 	['limegreen', '#32cd32'],
 	['linen', '#faf0e6'],
-	['magenta', '#ff00ff'],
+	['magenta', '#eb2f96'],
 	['mediumaquamarine', '#66cdaa'],
 	['mediumblue', '#0000cd'],
 	['mediumorchid', '#ba55d3'],
@@ -111,7 +112,7 @@ const colorKeywords = new Map([
 	['navajowhite', '#ffdead'],
 	['oldlace', '#fdf5e6'],
 	['olivedrab', '#6b8e23'],
-	['orange', '#ffa500'],
+	['orange', '#fa8c16'],
 	['orangered', '#ff4500'],
 	['orchid', '#da70d6'],
 	['palegoldenrod', '#eee8aa'],
@@ -144,6 +145,7 @@ const colorKeywords = new Map([
 	['tomato', '#ff6347'],
 	['turquoise', '#40e0d0'],
 	['violet', '#ee82ee'],
+	['volcano', '#fa541c'],
 	['wheat', '#f5deb3'],
 	['whitesmoke', '#f5f5f5'],
 	['yellowgreen', '#9acd32']