mirror of
https://github.com/MCSManager/MCSManager.git
synced 2024-12-09 07:30:04 +08:00
Merge pull request #1001 from Bluemangoo/clock-card
Feat: Add clock card
This commit is contained in:
commit
e5a04cc759
3
.gitignore
vendored
3
.gitignore
vendored
@ -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/*
|
1
frontend/components.d.ts
vendored
1
frontend/components.d.ts
vendored
@ -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']
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
51
frontend/src/widgets/others/ClockCard.vue
Normal file
51
frontend/src/widgets/others/ClockCard.vue
Normal 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>
|
@ -14,6 +14,10 @@
|
|||||||
"baseUrl": ".",
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["./src/*"]
|
"@/*": ["./src/*"]
|
||||||
}
|
},
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"types": [
|
||||||
|
"node"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"composite": true,
|
"composite": true,
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"moduleResolution": "Bundler",
|
"moduleResolution": "node",
|
||||||
"types": ["node"]
|
"types": ["node"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user