sh-view 1.7.5 → 2.0.0

package/packages/assets/css/theme.scss

@@ -4,53 +4,92 @@
  * @Description：自定义主题系列
  */
 :root{
-	--theme-color: #1890ff;
-	--theme-weak-color: #e7f1ff;
-	--font-size-base: 14px;
-	//暗色主题侧边栏
-	--theme-text-color          : hsla(0,0%,100%,.85);
-	--theme-active-color        : rgba(50,50,50,0.2);
-	--primary-color             : #1890ff;                         // 全局主色
-	--danger-color              : #ff3552;                          // 危险色
 	--link-color                : #1890ff;                            // 链接色
-	--success-color             : #25ad4a;                         // 成功色
-	--warning-color             : #faad14;                         // 警告色
-	--error-color               : #f5222d;                           // 错误色
-	--info-color                : #2db7f5;                            // 信息色
-	--body-background           : #ffffff;
 	--main-background           : #f5f7f9;
-	--header-color				: #f8f8f9;
-	--stripe-color				: #fafafa;
-	--hover-color				: #f5f7fa;
-	--title-color               : #17233d;
-	--text-color                : #515a6e;
-	--border-color              : #e0e0e0;
-	--disabled-color            : #f1f1f1;
-	--disabled-background       : #f3f3f3;
-	--font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
-	--border-radius: 0px;
+	--box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);
+	--primary-weak-color: #e7f1ff;
 }
 
-.sh-theme-black{ --theme-color: #191a23; --theme-weak-color: #f0f0f0; }
-.sh-theme-blue{ --theme-color: #1890ff; --theme-weak-color: #e7f1ff; }               	// 海蓝
-.sh-theme-dusk{ --theme-color: #e62340; --theme-weak-color: #ffe5e5; }               	// 薄暮
-.sh-theme-volcano{ --theme-color: #fa541c; --theme-weak-color: #ffe3da; }            	// 火山
-.sh-theme-sunset{ --theme-color: #FAAD14; --theme-weak-color: #fff2db; }             	// 日暮
-.sh-theme-mqing{ --theme-color: #13C2C2; --theme-weak-color: #dbffff; }              	// 明青
-.sh-theme-aurora-green{ --theme-color: #00b791; --theme-weak-color: #d8fff7; }       	// 极光绿
-.sh-theme-aurora-blue{ --theme-color: #003366; --theme-weak-color: #e2f1ff; }        	// 极客蓝
-.sh-theme-purple{  --theme-color: #722ED1; --theme-weak-color: #e6cdff; }            	// 酱紫
-.sh-theme-pink{  --theme-color: #ff5d7a; --theme-weak-color: #ffccd6; }            		// 少女
-
+.sh-theme-black{
+	--vxe-primary-color: #191a23;
+	--vxe-primary-lighten-color: #cbcbcb;
+	--vxe-primary-darken-color: #0d0e10;
+	--primary-weak-color: #f0f0f0;
+}
+// 薄暮
+.sh-theme-dusk{
+	--vxe-primary-color: #e62340;
+	--vxe-primary-lighten-color: #ff93a3;
+	--vxe-primary-darken-color: #e50023;
+	--primary-weak-color: #ffe5e5;
+}
+// 火山
+.sh-theme-volcano{
+	--vxe-primary-color: #fa541c;
+	--vxe-primary-lighten-color: #ffae93;
+	--vxe-primary-darken-color: #e83e00;
+	--primary-weak-color: #ffe3da;
+}
+// 日暮
+.sh-theme-sunset{
+	--vxe-primary-color: #FAAD14;
+	--vxe-primary-lighten-color: #ffda91;
+	--vxe-primary-darken-color: #e79a00;
+	--primary-weak-color: #fff2db;
+}
+// 明青
+.sh-theme-mqing{
+	--vxe-primary-color: #13C2C2;
+	--vxe-primary-lighten-color: #8effff;
+	--vxe-primary-darken-color: #00bdbd;
+	--primary-weak-color: #dbffff;
+}
+// 极光绿
+.sh-theme-aurora-green{
+	--vxe-primary-color: #00b791;
+	--vxe-primary-lighten-color: #5efdcd;
+	--vxe-primary-darken-color: #009475;
+	--primary-weak-color: #d8fff7;
+}
+// 极客蓝
+.sh-theme-aurora-blue{
+	--vxe-primary-color: #003366;
+	--vxe-primary-lighten-color: #80c1ff;
+	--vxe-primary-darken-color: #00264f;
+	--primary-weak-color: #e2f1ff;
+}
+// 酱紫
+.sh-theme-purple{
+	--vxe-primary-color: #722ED1;
+	--vxe-primary-lighten-color: #bc8eff;
+	--vxe-primary-darken-color: #5b13be;
+	--primary-weak-color: #e6cdff;
+}
+// 少女
+.sh-theme-pink{
+	--vxe-primary-color: #ff5d7a;
+	--vxe-primary-lighten-color: #ff90a3;
+	--vxe-primary-darken-color: #e03554;
+	--primary-weak-color: #ffccd6;
+}
+// 暗黑
 .sh-dark-mode{
-	--body-background: 		#141414;
-	--main-background: 		#0a0a0a;
-	--theme-weak-color: 	#222222;
-	--header-color: 		#222222;
-	--stripe-color: 		#040404;
-	--hover-color: 			#555555;
-	--border-color: 		#454545;
-	--disabled-color: 		#212121;
-	--disabled-background: 	#232323;
-	--text-color: 			#999999;
+	--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-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;
 }

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

@@ -0,0 +1,173 @@
+<template>
+	<transition :name="fade ? 'fade' : ''">
+		<div v-if="!closed" class="sh-alert" :class="classes">
+			<div v-if="showIcon" class="sh-alert-icon">
+				<slot name="icon">
+					<sh-icon :type="iconType"></sh-icon>
+				</slot>
+			</div>
+			<div class="sh-alert-content">
+				<slot>{{ title }}</slot>
+				<div class="sh-alert-desc">
+					<slot name="content">{{ content }}</slot>
+				</div>
+			</div>
+			<a v-if="closable" class="sh-alert-close" @click="close">
+				<slot name="close"><sh-icon type="ios-close"></sh-icon></slot>
+			</a>
+		</div>
+	</transition>
+</template>
+
+<script>
+export default {
+	name: 'ShAlert',
+	props: {
+		type: {
+			type: String,
+			default: 'info' // 'success', 'info', 'warning', 'error'
+		},
+		title: {
+			type: String
+		},
+		content: {
+			type: String
+		},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		showIcon: {
+			type: Boolean,
+			default: false
+		},
+		fade: {
+			type: Boolean,
+			default: true
+		},
+		block: {
+			type: Boolean
+		}
+	},
+	emits: ['close'],
+	data() {
+		return {
+			closed: false
+		}
+	},
+	computed: {
+		isDesc() {
+			return this.$slots.content
+		},
+		iconType() {
+			let type = ''
+			switch (this.type) {
+				case 'success':
+					type = 'ios-checkmark-circle'
+					break
+				case 'info':
+					type = 'ios-information-circle'
+					break
+				case 'warning':
+					type = 'ios-alert'
+					break
+				case 'error':
+					type = 'ios-close-circle'
+					break
+			}
+			if (this.isDesc) type += '-outline'
+			return type
+		},
+		classes() {
+			return {
+				[`${this.type}`]: true,
+				block: this.block,
+				desc: this.isDesc
+			}
+		}
+	},
+	methods: {
+		close(e) {
+			this.closed = true
+			this.$emit('close', e)
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+$base-font-size: 14px;
+$medium-font-size: 16px;
+$large-font-size: 18px;
+
+@mixin iconBase {
+	padding: 0 5px;
+	font-size: $medium-font-size;
+	line-height: 1;
+}
+
+.sh-alert {
+	position: relative;
+	border-radius: var(--vxe-border-radius);
+	color: var(--vxe-font-color);
+	display: inline-flex;
+	align-items: center;
+	padding: 5px;
+	margin-bottom: 10px;
+	&.block {
+		display: flex;
+	}
+	&.desc {
+		font-size: $large-font-size;
+		.sh-alert-icon,
+		.sh-alert-close {
+			font-size: 24px;
+			padding: 0 10px;
+		}
+		.sh-alert-content {
+			padding: 0 10px;
+		}
+	}
+	&-icon {
+		@include iconBase;
+	}
+	&-content {
+		flex: 1;
+		.sh-alert-desc {
+			font-size: $base-font-size;
+		}
+	}
+	&-close {
+		@include iconBase;
+		cursor: pointer;
+	}
+	&.success {
+		border: 1px solid var(--vxe-success-color);
+		background-color: #edfff3;
+		.sh-alert-icon {
+			color: var(--vxe-success-color);
+		}
+	}
+	&.info {
+		border: 1px solid var(--vxe-info-color);
+		background-color: #f0faff;
+		.sh-alert-icon {
+			color: var(--vxe-info-color);
+		}
+	}
+	&.warning {
+		border: 1px solid var(--vxe-warning-color);
+		background-color: #fff9e6;
+		.sh-alert-icon {
+			color: var(--vxe-warning-color);
+		}
+	}
+	&.error {
+		border: 1px solid var(--vxe-danger-color);
+		background-color: #ffefe6;
+		.sh-alert-icon {
+			color: var(--vxe-danger-color);
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,227 @@
+<template>
+	<span v-if="dot" ref="badge" class="sh-badge">
+		<slot></slot>
+		<sup v-show="badge" class="sh-badge-dot" :style="styles"></sup>
+	</span>
+	<span v-else-if="status || color" ref="badge" class="sh-badge sh-badge-status">
+		<span :class="statusClasses" :style="statusStyles"></span>
+		<span class="sh-badge-status-text">
+			<slot name="text">{{ text }}</slot>
+		</span>
+	</span>
+	<span v-else ref="badge" class="sh-badge">
+		<slot></slot>
+		<sup v-if="$slots.count" :style="styles" class="sh-badge-count sh-badge-count-custom" :class="className"><slot name="count"></slot></sup>
+		<sup v-else-if="hasCount" v-show="badge" class="sh-badge-count" :style="styles" :class="countClasses">
+			<slot name="text">{{ finalCount }}</slot>
+		</sup>
+	</span>
+</template>
+
+<script>
+export default {
+	name: 'ShBadge',
+	props: {
+		count: Number,
+		dot: Boolean,
+		overflowCount: {
+			type: [Number, String],
+			default: 99
+		},
+		className: String,
+		showZero: Boolean,
+		text: String,
+		status: String, // 'success', 'processing', 'default', 'error', 'warning'
+		type: String, //'success', 'primary', 'normal', 'error', 'warning', 'info'
+		offset: Array,
+		color: String
+	},
+	computed: {
+		countClasses() {
+			return {
+				[`${this.className}`]: !!this.className,
+				[`sh-badge-count-alone`]: this.alone,
+				[`sh-badge-count-${this.type}`]: !!this.type
+			}
+		},
+		statusClasses() {
+			return {
+				[`sh-badge-status-dot`]: true,
+				[`sh-badge-status-${this.status}`]: !!this.status
+			}
+		},
+		statusStyles() {
+			return { backgroundColor: this.color }
+		},
+		styles() {
+			const style = {}
+			if (this.offset && this.offset.length === 2) {
+				style['margin-top'] = `${this.offset[0]}px`
+				style['margin-right'] = `${this.offset[1]}px`
+			}
+			return style
+		},
+		finalCount() {
+			if (this.text) return this.text
+			return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count
+		},
+		badge() {
+			let status = false
+			if (this.count) {
+				status = !(parseInt(this.count) === 0)
+			}
+			if (this.dot) {
+				status = true
+				if (this.count !== null) {
+					if (parseInt(this.count) === 0) {
+						status = false
+					}
+				}
+			}
+			if (this.text !== '') status = true
+			return status || this.showZero
+		},
+		hasCount() {
+			if (this.count || this.text !== '') return true
+			if (this.showZero && parseInt(this.count) === 0) return true
+			else return false
+		},
+		alone() {
+			return this.$slots.default === undefined
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-badge {
+	position: relative;
+	display: inline-block;
+	&-count {
+		vertical-align: middle;
+		position: absolute;
+		transform: translateX(50%);
+		top: -10px;
+		right: 0;
+		height: 20px;
+		border-radius: 10px;
+		min-width: 20px;
+		background: var(--vxe-danger-color);
+		border: 1px solid transparent;
+		color: #fff;
+		line-height: 18px;
+		text-align: center;
+		padding: 0 6px;
+		font-size: 12px;
+		white-space: nowrap;
+		transform-origin: -10% center;
+		z-index: 10;
+		box-shadow: 0 0 0 1px #fff;
+		&-custom {
+			background: transparent;
+			color: inherit;
+			border-color: transparent;
+			box-shadow: none;
+		}
+		a,
+		a:hover {
+			color: #fff;
+		}
+		&-alone {
+			top: auto;
+			display: block;
+			position: relative;
+			transform: translateX(0);
+		}
+		&-primary {
+			background: var(--vxe-primary-color);
+		}
+		&-success {
+			background: var(--vxe-success-color);
+		}
+		&-error {
+			background: var(--vxe-danger-color);
+		}
+		&-warning {
+			background: var(--vxe-warning-color);
+		}
+		&-info {
+			background: var(--vxe-info-color);
+		}
+		&-normal {
+			background: #e6ebf1;
+			color: #808695;
+		}
+	}
+	&-dot {
+		position: absolute;
+		transform: translateX(-50%);
+		transform-origin: 0 center;
+		top: -4px;
+		right: -8px;
+		height: 8px;
+		width: 8px;
+		border-radius: 100%;
+		background: var(--vxe-danger-color);
+		z-index: 10;
+		box-shadow: 0 0 0 1px #fff;
+	}
+	&-status {
+		line-height: inherit;
+		vertical-align: baseline;
+		&-dot {
+			width: 6px;
+			height: 6px;
+			display: inline-block;
+			border-radius: 50%;
+			vertical-align: middle;
+			position: relative;
+			top: -1px;
+		}
+		&-success {
+			background-color: var(--vxe-success-color);
+		}
+		&-processing {
+			background-color: var(--vxe-primary-color);
+			position: relative;
+			&:after {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				border-radius: 50%;
+				border: 1px solid var(--vxe-primary-color);
+				box-sizing: border-box;
+				content: '';
+				animation: aniStatusProcessing 1.2s infinite ease-in-out;
+			}
+		}
+		&-default {
+			background-color: #e6ebf1;
+		}
+		&-error {
+			background-color: var(--vxe-danger-color);
+		}
+		&-warning {
+			background-color: var(--vxe-warning-color);
+		}
+		&-text {
+			display: inline-block;
+			color: var(--vxe-font-color);
+			font-size: var(--vxe-font-size);
+			margin-left: 6px;
+		}
+	}
+}
+@keyframes aniStatusProcessing {
+	0% {
+		transform: scale(0.8);
+		opacity: 0.5;
+	}
+	100% {
+		transform: scale(2.4);
+		opacity: 0;
+	}
+}
+</style>