feat: add timeline

src/components/ReFlicker/index.css

@@ -0,0 +1,39 @@
+.point {
+  width: var(--point-width);
+  height: var(--point-height);
+  background: var(--point-background);
+  position: relative;
+  border-radius: var(--point-border-radius);
+}
+
+.point-flicker:after {
+  background: var(--point-background);
+}
+
+.point-flicker:before,
+.point-flicker:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  border-radius: var(--point-border-radius);
+  animation: flicker 1.2s ease-out infinite;
+}
+
+@keyframes flicker {
+  0% {
+    transform: scale(0.5);
+    opacity: 1;
+  }
+
+  30% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(var(--point-scale));
+    opacity: 0;
+  }
+}

src/components/ReFlicker/index.ts

@@ -0,0 +1,44 @@
+import "./index.css";
+import { h, defineComponent, Component } from "vue";
+
+export interface attrsType {
+  width?: string;
+  height?: string;
+  borderRadius?: number | string;
+  background?: string;
+  scale?: number | string;
+}
+
+/**
+ * 圆点、方形闪烁动画组件
+ * @param width 可选 string 宽
+ * @param height 可选 string 高
+ * @param borderRadius 可选 number | string 传0为方形、传50%或者不传为圆形
+ * @param background 可选 string 闪烁颜色
+ * @param scale 可选 number | string 闪烁范围，默认2，值越大闪烁范围越大
+ * @returns Component
+ */
+export function useRenderFlicker(attrs?: attrsType): Component {
+  return defineComponent({
+    name: "Flicker",
+    render() {
+      return h(
+        "div",
+        {
+          class: "point point-flicker",
+          style: {
+            "--point-width": attrs?.width ?? "12px",
+            "--point-height": attrs?.height ?? "12px",
+            "--point-background":
+              attrs?.background ?? "var(--el-color-primary)",
+            "--point-border-radius": attrs?.borderRadius ?? "50%",
+            "--point-scale": attrs?.scale ?? "2"
+          }
+        },
+        {
+          default: () => []
+        }
+      );
+    }
+  });
+}

src/plugins/element-plus/index.ts

@@ -50,6 +50,8 @@ import {
   ElColorPicker,
   ElSelect,
   ElOption,
+  ElTimeline,
+  ElTimelineItem,
   // 指令
   ElLoading,
   ElInfiniteScroll
@@ -108,7 +110,9 @@ const components = [
   ElLink,
   ElColorPicker,
   ElSelect,
-  ElOption
+  ElOption,
+  ElTimeline,
+  ElTimelineItem
 ];
 
 export function useElementPlus(app: App) {

src/plugins/i18n/en/menus.ts

@@ -46,5 +46,6 @@ export default {
   hsResult: "Result Page",
   hsSuccess: "Success Page",
   hsFail: "Fail Page",
-  hsIconSelect: "Icon Select"
+  hsIconSelect: "Icon Select",
+  hsTimeline: "Time Line"
 };

src/plugins/i18n/zh-CN/menus.ts

@@ -46,5 +46,6 @@ export default {
   hsResult: "结果页面",
   hsSuccess: "成功页面",
   hsFail: "失败页面",
-  hsIconSelect: "图标选择器"
+  hsIconSelect: "图标选择器",
+  hsTimeline: "时间线"
 };

src/router/modules/able.ts

@@ -48,6 +48,15 @@ const ableRouter = {
         title: $t("menus.hsIconSelect"),
         i18n: true
       }
+    },
+    {
+      path: "/able/timeline",
+      name: "reTimeline",
+      component: () => import("/@/views/able/timeline.vue"),
+      meta: {
+        title: $t("menus.hsTimeline"),
+        i18n: true
+      }
     }
   ]
 };

src/views/able/timeline.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+import { useRenderFlicker } from "/@/components/ReFlicker";
+// eslint-disable-next-line no-undef
+const { lastBuildTime } = __APP_INFO__;
+const activities = [
+  {
+    content: "支持圆点闪动",
+    timestamp: lastBuildTime,
+    icon: useRenderFlicker()
+  },
+  {
+    content: "支持方形闪动",
+    timestamp: lastBuildTime,
+    icon: useRenderFlicker({ borderRadius: 0, background: "#67C23A" })
+  },
+  {
+    content: "支持默认颜色",
+    timestamp: lastBuildTime
+  },
+  {
+    content: "支持自定义颜色",
+    timestamp: lastBuildTime,
+    color: "#F56C6C"
+  },
+  {
+    content: "支持自定义图标",
+    timestamp: lastBuildTime,
+    icon: useRenderIcon("iphone", {
+      color: "#0bbd87"
+    })
+  }
+];
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">时间线</span>
+      </div>
+    </template>
+    <el-timeline>
+      <el-timeline-item
+        v-for="(activity, index) in activities"
+        :key="index"
+        :icon="activity.icon"
+        :color="activity.color"
+        :timestamp="activity.timestamp"
+      >
+        {{ activity.content }}
+      </el-timeline-item>
+    </el-timeline>
+  </el-card>
+</template>