✨ 原子组件 状态指示器 趋势标记

src/api/model/system.js

@@ -4,7 +4,7 @@ import http from "@/utils/request"
 export default {
 	menu: {
 		myMenus: {
-			url: `${config.API_URL}/system/menu/my/1.3.2`,
+			url: `${config.API_URL}/system/menu/my/1.3.3`,
 			name: "获取我的菜单",
 			get: async function(){
 				return await http.get(this.url);

src/components/scMini/scStatusIndicator.vue

@@ -0,0 +1,47 @@
+<!--
+ * @Descripttion: 状态指示器
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年11月11日09:30:12
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<span class="sc-state" :class="[{'sc-status-processing':pulse}, 'sc-state-bg--'+type]"></span>
+</template>
+
+<script>
+	export default {
+		props: {
+			type: { type: String, default: "primary" },
+			pulse: { type: Boolean, default: false }
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-state {display: inline-block;background: #000;width: 10px;height: 10px;border-radius: 50%;vertical-align: middle;}
+	.sc-status-processing {position: relative;}
+	.sc-status-processing:after {position: absolute;top:0px;left:0px;width: 100%;height: 100%;border-radius: 50%;background: inherit;content: '';animation: warn 1.2s ease-in-out infinite;}
+
+	.sc-state-bg--primary {background: var(--el-color-primary);}
+	.sc-state-bg--success {background: var(--el-color-success);}
+	.sc-state-bg--warning {background: var(--el-color-warning);}
+	.sc-state-bg--danger {background: var(--el-color-danger);}
+	.sc-state-bg--info {background: var(--el-color-info);}
+
+	@keyframes warn {
+		0% {
+			transform: scale(0.5);
+			opacity: 1;
+		}
+		30% {
+			opacity: 0.7;
+		}
+		100% {
+			transform: scale(2.5);
+			opacity: 0;
+		}
+	}
+</style>

src/components/scMini/scTrend.vue

@@ -0,0 +1,56 @@
+<!--
+ * @Descripttion: 趋势标记
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年11月11日11:07:10
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<span class="sc-trend" :class="'sc-trend--'+type">
+		<i v-if="type=='P'" class="sc-trend-icon el-icon-top"></i>
+		<i v-if="type=='N'" class="sc-trend-icon el-icon-bottom"></i>
+		<i v-if="type=='Z'" class="sc-trend-icon el-icon-right"></i>
+		<em class="sc-trend-prefix">{{prefix}}</em>
+		<em class="sc-trend-value">{{absValue}}</em>
+		<em class="sc-trend-suffix">{{suffix}}</em>
+	</span>
+</template>
+
+<script>
+	export default {
+		props: {
+			modelValue: { type: Number, default: 0 },
+			prefix: { type: String, default: "" },
+			suffix: { type: String, default: "" },
+			reverse: { type: Boolean, default: false }
+		},
+		computed: {
+			absValue(){
+				return Math.abs(this.modelValue);
+			},
+			type(v){
+				if(this.modelValue == 0){
+					v = 'Z'
+				}else if(this.modelValue < 0){
+					v =  this.reverse?'N':'P'
+				}else if(this.modelValue > 0){
+					v =   this.reverse?'P':'N'
+				}
+				return v
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-trend {}
+	.sc-trend-icon {margin-right: 2px;}
+	.sc-trend em {font-style: normal;}
+	.sc-trend-prefix {margin-right: 2px;}
+	.sc-trend-suffix {margin-left: 2px;}
+	.sc-trend--P {color: #f56c6c;}
+	.sc-trend--N {color: #67c23a;}
+	.sc-trend--Z {color: #555;}
+</style>

src/scui.js

@@ -14,6 +14,8 @@ import scSelect from './components/scSelect'
 import scDialog from './components/scDialog'
 import scForm from './components/scForm'
 import scTitle from './components/scTitle'
+import scStatusIndicator from './components/scMini/scStatusIndicator'
+import scTrend from './components/scMini/scTrend'
 import auth from './directives/auth'
 import role from './directives/role'
 import time from './directives/time'
@@ -42,6 +44,8 @@ export default {
 		app.component('scDialog', scDialog);
 		app.component('scForm', scForm);
 		app.component('scTitle', scTitle);
+		app.component('scStatusIndicator', scStatusIndicator);
+		app.component('scTrend', scTrend);
 
 		//注册全局指令
 		app.directive('auth', auth)

src/views/vab/mini.vue

@@ -0,0 +1,65 @@
+
+<template>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :lg="8">
+				<el-card shadow="never" header="脉冲圆点">
+					<el-space wrap :size="15">
+						<sc-status-indicator pulse type="primary"></sc-status-indicator>
+						<sc-status-indicator pulse type="success"></sc-status-indicator>
+						<sc-status-indicator pulse type="warning"></sc-status-indicator>
+						<sc-status-indicator pulse type="danger"></sc-status-indicator>
+						<sc-status-indicator type="info"></sc-status-indicator>
+					</el-space>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never" header="趋势">
+					<el-space wrap :size="15">
+						<sc-trend v-model="trendValue" prefix="¥"></sc-trend>
+						<sc-trend v-model="trendValue2"></sc-trend>
+						<sc-trend v-model="trendValue3" suffix="%"></sc-trend>
+					</el-space>
+
+					<p style="margin-top: 15px;color: #999;">金融行业可设置reverse反转颜色。</p>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never">
+					<div class="up">
+						<h2>持续更新中...</h2>
+						<p>非常欢迎提交Issue/PR完善和补充更多好玩的原子组件</p>
+						<p>原子组件库位置：@/components/scMini/*</p>
+						<el-button type="text">提交想法</el-button>
+					</div>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'minivab',
+		data() {
+			return {
+				trendValue: 4.6,
+				trendValue2: 0,
+				trendValue3: -32
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped>
+	.up {text-align: center;}
+	.up h2 {margin-bottom: 10px;}
+	.up p {color: #999;line-height: 1.5;}
+	.el-card {height:150px;}
+</style>