Merge pull request #1001 from Bluemangoo/clock-card

Feat: Add clock card
This commit is contained in:
unitwk 2023-09-01 11:51:27 +08:00 committed by GitHub
commit e5a04cc759
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 102 additions and 5 deletions

3
.gitignore vendored
View File

@ -118,4 +118,5 @@ workspace.code-workspace
src/public/1.png src/public/1.png
# IntelliJ Idea project files # IntelliJ Idea project files
/.idea/* /.idea/*
*/.idea/*

View File

@ -42,7 +42,6 @@ declare module 'vue' {
BetweenMenus: typeof import('./src/components/BetweenMenus.vue')['default'] BetweenMenus: typeof import('./src/components/BetweenMenus.vue')['default']
CardOperator: typeof import('./src/components/CardOperator.vue')['default'] CardOperator: typeof import('./src/components/CardOperator.vue')['default']
CardPanel: typeof import('./src/components/CardPanel.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'] CopyButton: typeof import('./src/components/CopyButton.vue')['default']
DataStatistic: typeof import('./src/components/DataStatistic.vue')['default'] DataStatistic: typeof import('./src/components/DataStatistic.vue')['default']
IconBtn: typeof import('./src/components/IconBtn.vue')['default'] IconBtn: typeof import('./src/components/IconBtn.vue')['default']

View File

@ -97,6 +97,34 @@
user-select: none; 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 {
float: right; float: right;
} }

View File

@ -28,6 +28,7 @@ import TextCard from "@/widgets/others/TextCard.vue";
import LinkCard from "@/widgets/others/LinkCard.vue"; import LinkCard from "@/widgets/others/LinkCard.vue";
import QuickStartFlow from "@/widgets/setupApp/QuickStartFlow.vue"; import QuickStartFlow from "@/widgets/setupApp/QuickStartFlow.vue";
import IframeCard from "@/widgets/others/IframeCard.vue"; import IframeCard from "@/widgets/others/IframeCard.vue";
import ClockCard from "@/widgets/others/ClockCard.vue";
import { NEW_CARD_TYPE } from "../types/index"; import { NEW_CARD_TYPE } from "../types/index";
@ -58,7 +59,8 @@ export const LAYOUT_CARD_TYPES: { [key: string]: any } = {
QuickStartFlow, QuickStartFlow,
IframeCard, IframeCard,
TextCard, TextCard,
LinkCard LinkCard,
ClockCard
}; };
export interface NewCardItem extends LayoutCard { export interface NewCardItem extends LayoutCard {
@ -215,6 +217,18 @@ export function getLayoutCardPool() {
description: t("显示一组自定义超链接按钮"), description: t("显示一组自定义超链接按钮"),
height: LayoutCardHeight.SMALL, height: LayoutCardHeight.SMALL,
category: NEW_CARD_TYPE.OTHER 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; return LAYOUT_CARD_POOL;

View File

@ -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>

View File

@ -14,6 +14,10 @@
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["./src/*"] "@/*": ["./src/*"]
} },
"moduleResolution": "node",
"types": [
"node"
]
} }
} }

View File

@ -10,7 +10,7 @@
"compilerOptions": { "compilerOptions": {
"composite": true, "composite": true,
"module": "ESNext", "module": "ESNext",
"moduleResolution": "Bundler", "moduleResolution": "node",
"types": ["node"] "types": ["node"]
} }
} }