134 lines
2.3 KiB
Vue
134 lines
2.3 KiB
Vue
<script lang="ts" setup>
|
|
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
|
|
import {type cardItem, cards} from "~/config/cards";
|
|
|
|
const mainLayoutStore = useMainLayoutStore()
|
|
const props = defineProps({
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
cardId: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
})
|
|
const items = [{
|
|
label: '刷新',
|
|
command: () => {
|
|
}
|
|
}, {
|
|
label: '弹出',
|
|
command: () => {
|
|
}
|
|
}, {
|
|
label: '删除',
|
|
command: () => {
|
|
mainLayoutStore.deleteLayout(props.id)
|
|
}
|
|
}
|
|
];
|
|
let card: cardItem | undefined = undefined
|
|
onBeforeMount(() => {
|
|
card = cards.find(x => x.id === props.cardId)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div :id="`card_${id}`" class="card-layout">
|
|
<SplitButton :model="items" class="SplitButton"/>
|
|
<div :id="'item' + id" class="card-title vue-draggable-handle">
|
|
<div></div>
|
|
<h3 v-if="card && card.name">{{ card?.name ?? "默认标题" }}</h3>
|
|
</div>
|
|
<div class="card-content">
|
|
<component :is="card?.component" v-if="card && card.component"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "base";
|
|
|
|
.card-layout {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: $light-bg-color;
|
|
border-radius: $radius;
|
|
padding-bottom: $padding;
|
|
box-shadow: 0 10px 30px 0 rgba(17, 38, 146, 0.05);
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $gap*1.5;
|
|
will-change: scroll-position, contents;
|
|
border: $border;
|
|
.dark-mode & {
|
|
background: $dark-bg-color;
|
|
}
|
|
}
|
|
|
|
.SplitButton {
|
|
position: absolute;
|
|
right: $padding*.5;
|
|
top: $padding*.5;
|
|
|
|
:deep(.p-button) {
|
|
background: unset;
|
|
border: unset;
|
|
padding: unset;
|
|
|
|
> svg {
|
|
stroke: $light-unfocused-color;
|
|
|
|
.dark-mode & {
|
|
stroke: $dark-unfocused-color;
|
|
}
|
|
|
|
&:hover {
|
|
stroke: $light-text-color;
|
|
|
|
.dark-mode & {
|
|
stroke: $dark-text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-content {
|
|
padding: 0 $padding*1.5;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0
|
|
}
|
|
}
|
|
|
|
.card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $gap;
|
|
color: $light-text-color;
|
|
padding: $padding*1.5;
|
|
padding-bottom: 0;
|
|
|
|
&,
|
|
h3:hover {
|
|
cursor: move;
|
|
}
|
|
|
|
.dark-mode & {
|
|
color: $dark-text-color;
|
|
}
|
|
|
|
div {
|
|
width: 6px;
|
|
height: 20px;
|
|
border-radius: $radius;
|
|
background: $primary-color;
|
|
}
|
|
}
|
|
</style>
|