新增文本状态显示组件

src/components.d.ts

@@ -15,10 +15,12 @@ declare module 'vue' {
     ElEmployees: typeof import('./components/form/ElEmployees.vue')['default']
     Exception: typeof import('./components/Exception.vue')['default']
     FsCheckCard: typeof import('./components/FsCheckCard/index.vue')['default']
+    FsDot: typeof import('./components/FsDot/index.vue')['default']
     FsImageUpload: typeof import('./components/FsImageUpload/index.vue')['default']
     FsPrinter: typeof import('./components/FsPrinter/index.vue')['default']
     FsSplitPanel: typeof import('./components/FsSplitPanel/index.vue')['default']
     FsTableSelect: typeof import('./components/FsTableSelect/index.vue')['default']
+    FsText: typeof import('./components/FsText/index.vue')['default']
     FsTour: typeof import('./components/FsTour/index.vue')['default']
     GlobalAside: typeof import('./components/core/GlobalAside.vue')['default']
     GlobalFooter: typeof import('./components/core/GlobalFooter.vue')['default']

src/components/FsDot/index.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { TextProps } from './props'
+
+withDefaults(defineProps<TextProps>(), {
+  type: 'primary',
+  ripple: true,
+  size: '8px'
+})
+</script>
+
+<!-- 状态点 -->
+<template>
+  <span
+    :class="[
+      'dot',
+      { 'is-success': 'success' === type },
+      { 'is-warning': 'warning' === type },
+      { 'is-danger': 'danger' === type },
+      { 'is-info': 'info' === type },
+      { 'is-ripple': ripple }
+    ]"
+  >
+    <span class="dot-status" :style="{ width: size, height: size, background: color }">
+      <span class="dot-ripple" :style="{ width: size, height: size, background: color }"></span>
+    </span>
+    <span v-if="text" class="dot-text">{{ text }}</span>
+  </span>
+</template>
+
+<style scoped lang="scss">
+.dot {
+  display: inline-flex;
+  align-items: center;
+
+  .dot-text {
+    flex-shrink: 0;
+    margin-left: 8px;
+  }
+
+  .dot-status {
+    flex-shrink: 0;
+    background: var(--el-color-primary);
+    border-radius: 50%;
+    position: relative;
+  }
+
+  .dot-ripple {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--el-color-primary);
+    animation: animDot 1.2s ease-in-out infinite;
+    transform-origin: center;
+    border-radius: 50%;
+    display: none;
+  }
+
+  &.is-ripple .dot-ripple {
+    display: block;
+  }
+
+  &.is-success .dot-status,
+  &.is-success .dot-ripple {
+    background: var(--el-color-success);
+  }
+
+  &.is-warning .dot-status,
+  &.is-warning .dot-ripple {
+    background: var(--el-color-warning);
+  }
+
+  &.is-danger .dot-status,
+  &.is-danger .dot-ripple {
+    background: var(--el-color-danger);
+  }
+
+  &.is-info .dot-status,
+  &.is-info .dot-ripple {
+    background: var(--el-color-info);
+  }
+}
+
+@keyframes animDot {
+  from {
+    transform: scale(0.8);
+    opacity: 0.6;
+  }
+
+  to {
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}
+</style>

src/components/FsDot/props.ts

@@ -0,0 +1,12 @@
+export interface TextProps {
+  //  类型
+  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+  // 自定义颜色
+  color?: string
+  // 是否显示水波动画
+  ripple?: boolean
+  // 文本
+  text?: string
+  // 尺寸
+  size?: string
+}

src/router/asyncRouter.ts

@@ -73,6 +73,15 @@ const asyncRouter: RouteRecordRaw[] = [
       icon: 'MoreFilled'
     }
   },
+  {
+    path: '/stausText',
+    name: 'stausText',
+    component: () => import('@/views/stausText/index.vue'),
+    meta: {
+      title: '文本组件',
+      icon: 'MoreFilled'
+    }
+  },
   // -- APPEND HERE --
   {
     path: 'https://jijian.sxidc.com/',

src/views/stausText/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import FsDot from '@/components/FsDot/index.vue'
+</script>
+
+<template>
+  <el-card header="文本状态" shadow="never">
+    <fs-dot type="primary" text="运行中"></fs-dot>
+    <fs-dot type="success" text="已上线" class="ml-5"></fs-dot>
+    <fs-dot type="warning" text="异常" class="ml-5"></fs-dot>
+    <fs-dot type="info" text="关闭" class="ml-5"></fs-dot>
+  </el-card>
+</template>
+
+<style scoped lang="scss"></style>