Fix: Card h-100

This commit is contained in:
unitwk 2024-01-05 16:32:49 +08:00
parent 55ad4b2b3c
commit 12f6b7a8d0
9 changed files with 44 additions and 25 deletions

View File

@ -1,5 +1,14 @@
// Global tool style class
.full-card-body-wrapper {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
overflow-y: auto;
}
.flex-between {
display: flex;
justify-content: space-between;

View File

@ -258,12 +258,6 @@ const openPhoneMenu = (b = false) => {
>
<span>{{ item.name }}</span>
</div>
<span>|</span>
<div class="nav-button">
<span>开发版本</span>
</div>
</nav>
<div class="btns">
<div v-for="(item, index) in appMenus" :key="index">

View File

@ -63,6 +63,7 @@ const props = defineProps({
.card-panel-content {
flex-grow: 1;
color: var(--text-color);
position: relative;
}
}

View File

@ -268,9 +268,9 @@ router.beforeEach((to, from, next) => {
const toRoutePath = to.path.trim();
console.info(
"Router Changed:",
from.path,
fromRoutePath,
"->",
to.path,
toRoutePath,
"\nMyPermission:",
userPermission,
"toPagePermission:",
@ -289,10 +289,8 @@ router.beforeEach((to, from, next) => {
if (!state.userInfo?.token) return next("/login");
if (["", "/"].includes(fromRoutePath) && toRoutePath !== "/customer") {
if (userPermission === ROLE.USER) {
return next("/customer");
}
if (toPagePermission > userPermission && userPermission !== ROLE.ADMIN) {
return next("/customer");
}
if (toPagePermission <= userPermission) {

View File

@ -14,7 +14,6 @@ export function useLayoutCardTools(card: LayoutCard) {
};
const getMetaOrRouteValue = (key: string, require = true): string | undefined => {
console.debug("route.queryroute.query:", route.query, key, route.query[key]);
if (card.meta[key] != null) {
return card.meta[key];
}

View File

@ -123,7 +123,7 @@ onMounted(async () => {
<template #body>
<LeftMenusPanel :menus="menus">
<template #baseInfo>
<div style="max-height: 500px; overflow-y: auto">
<div :style="{ maxHeight: card.height, overflowY: 'auto' }">
<a-typography-title :level="4" class="mb-24">
{{ t("TXT_CODE_5206cf41") }}
</a-typography-title>
@ -209,7 +209,7 @@ onMounted(async () => {
</template>
<template #api>
<div style="max-height: 500px; overflow-y: auto">
<div :style="{ maxHeight: card.height, overflowY: 'auto' }">
<a-typography-title :level="4" class="mb-24">
{{ t("TXT_CODE_9c3ca8f") }}
</a-typography-title>
@ -300,7 +300,7 @@ onMounted(async () => {
</template>
<template #password>
<div style="max-height: 500px; overflow-y: auto">
<div :style="{ maxHeight: card.height, overflowY: 'auto' }">
<a-typography-title :level="4" class="mb-24">
{{ t("TXT_CODE_3b4b656d") }}
</a-typography-title>

View File

@ -5,6 +5,8 @@ import type { LayoutCard } from "@/types";
import { userInfoApi } from "@/services/apis/index";
import { useRouter } from "vue-router";
import { INSTANCE_STATUS, INSTANCE_STATUS_CODE } from "@/types/const";
import { parseTimestamp } from "../tools/time";
import { text } from "stream/consumers";
defineProps<{
card: LayoutCard;
@ -32,13 +34,19 @@ const columns = [
title: t("TXT_CODE_662ad338"),
dataIndex: "ie",
customRender: (e: { text: string; record: { oe: string; ie: string } }) => {
if (!e.record.oe && !e.record.ie) {
return "--";
}
return `Output:${e.record.oe} Input:${e.record.ie}`;
}
},
{
title: t("TXT_CODE_5ab2062d"),
dataIndex: "lastDatetime",
key: "lastDatetime"
key: "lastDatetime",
customRender: (e: { text: number }) => {
return parseTimestamp(e.text);
}
},
{
title: t("TXT_CODE_fa920c0"),

View File

@ -124,7 +124,7 @@ const save = async () => {
<template>
<div style="width: 100%; height: 100%; position: relative">
<a-carousel v-if="imgList.length !== 0" arrows autoplay>
<a-carousel v-if="imgList.length !== 0" class="h-100" arrows autoplay :adaptive-height="false">
<template #prevArrow>
<div class="custom-slick-arrow" style="left: 10px; z-index: 1">
<left-circle-outlined />
@ -135,8 +135,8 @@ const save = async () => {
<right-circle-outlined />
</div>
</template>
<div v-for="item in displayImgList" :key="item.url">
<img :src="item.url" />
<div v-for="item in displayImgList" :key="item.url" class="h-100">
<img :src="item.url" :style="{ height: '100%' }" />
</div>
</a-carousel>
<div v-if="imgList.length !== 0 && containerState.isDesignMode" class="mask">
@ -298,3 +298,13 @@ img {
color: #fff;
}
</style>
<style lang="scss">
// For antdv carousel
.ant-carousel {
height: 100% !important;
div {
height: 100% !important;
}
}
</style>

View File

@ -36,9 +36,7 @@ const editTextContent = () => {
<template>
<CardPanel>
<template #title>
<div class="flex">
{{ card.title }}
</div>
<div class="flex">{{ card.title }} card.height:{{ card.height }}</div>
</template>
<template #operator>
<div v-if="containerState.isDesignMode" class="ml-10">
@ -68,8 +66,10 @@ const editTextContent = () => {
</template>
<template v-else #body>
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="previews global-markdown-html h-100" v-html="markdownToHTML(textContent)"></div>
<div class="full-card-body-wrapper">
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="previews global-markdown-html h-100" v-html="markdownToHTML(textContent)"></div>
</div>
</template>
</CardPanel>
</template>