Feat: add clock card

frontend/components.d.ts

@@ -42,7 +42,6 @@ declare module 'vue' {
     BetweenMenus: typeof import('./src/components/BetweenMenus.vue')['default']
     CardOperator: typeof import('./src/components/CardOperator.vue')['default']
     CardPanel: typeof import('./src/components/CardPanel.vue')['default']
-    copy: typeof import('./src/components/ActionButton copy.vue')['default']
     CopyButton: typeof import('./src/components/CopyButton.vue')['default']
     DataStatistic: typeof import('./src/components/DataStatistic.vue')['default']
     IconBtn: typeof import('./src/components/IconBtn.vue')['default']

frontend/src/assets/tools.scss

@@ -97,6 +97,34 @@
   user-select: none;
 }
 
+.font-bolder {
+  font-weight: bolder;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.mb-auto {
+  margin-bottom: auto;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
 .float-right {
   float: right;
 }

frontend/src/config/index.ts

@@ -28,6 +28,7 @@ import TextCard from "@/widgets/others/TextCard.vue";
 import LinkCard from "@/widgets/others/LinkCard.vue";
 import QuickStartFlow from "@/widgets/setupApp/QuickStartFlow.vue";
 import IframeCard from "@/widgets/others/IframeCard.vue";
+import ClockCard from "@/widgets/others/ClockCard.vue";
 
 import { NEW_CARD_TYPE } from "../types/index";
 
@@ -58,7 +59,8 @@ export const LAYOUT_CARD_TYPES: { [key: string]: any } = {
   QuickStartFlow,
   IframeCard,
   TextCard,
-  LinkCard
+  LinkCard,
+  ClockCard
 };
 
 export interface NewCardItem extends LayoutCard {
@@ -215,6 +217,18 @@ export function getLayoutCardPool() {
       description: t("显示一组自定义超链接按钮"),
       height: LayoutCardHeight.SMALL,
       category: NEW_CARD_TYPE.OTHER
+    },
+
+    // 时钟卡片
+    {
+      id: getRandomId(),
+      meta: {},
+      type: "ClockCard",
+      title: t("时钟"),
+      width: 4,
+      description: t("显示当前时间"),
+      height: LayoutCardHeight.SMALL,
+      category: NEW_CARD_TYPE.OTHER
     }
   ];
   return LAYOUT_CARD_POOL;

frontend/src/widgets/others/ClockCard.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import CardPanel from "@/components/CardPanel.vue";
+import type { LayoutCard } from "@/types";
+import { onMounted, onUnmounted, ref } from "vue";
+
+// eslint-disable-next-line no-unused-vars
+const props = defineProps<{
+  card: LayoutCard;
+}>();
+
+const time = ref(new Date().toTimeString().substring(0, 8));
+
+let timer: NodeJS.Timer | null;
+
+onMounted(() => {
+  timer = setInterval(() => {
+    time.value = new Date().toTimeString().substring(0, 8);
+  }, 1000);
+});
+
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
+});
+
+</script>
+
+<template>
+  <div class="h-100">
+    <CardPanel>
+      <template #title>{{ card.title }}</template>
+      <template #body>
+        <div class="h-100 items-center flex">
+          <div
+            class="value ml-auto mr-auto mb-8"
+          >
+            {{ time }}
+          </div>
+        </div>
+      </template>
+    </CardPanel>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.value {
+  font-weight: bolder;
+  font-size: 36px;
+}
+</style>

frontend/tsconfig.app.json

@@ -15,6 +15,9 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-     "moduleResolution": "node"
+    "moduleResolution": "node",
+    "types": [
+      "node"
+    ]
   }
 }