remove CardTitle

src/components/CardContainer.vue

@@ -1,13 +1,17 @@
 <template>
 	<div class="card-container">
-		<card-title :title="title" :description="description">
+		<div class="card-title">
-			<template v-if="$slots.title" #title>
+			<h3 v-if="title || $slots.title" class="title">
-				<slot name="title" />
+				<slot name="title">
-			</template>
+					<span v-text="title" />
-			<template v-if="$slots.description" #description>
+				</slot>
-				<slot name="description" />
+			</h3>
-			</template>
+			<p v-if="description || $slots.description" class="description gray">
-		</card-title>
+				<slot name="description">
+					<span v-text="description" />
+				</slot>
+			</p>
+		</div>
 		<div v-if="$slots.default" class="content bg-white">
 			<slot />
 		</div>
@@ -44,6 +48,18 @@ defineOptions({
 	.card-container {
 	margin: 0 1rem;
 
+	.card-title {
+
+		.title {
+			margin: 0 .875rem;
+		}
+
+		.description {
+			margin: .5rem .875rem;
+			font-size: .875rem;
+		}
+	}
+
 	.content {
 		overflow: hidden;
 		box-shadow: var(--td-shadow-1);

src/components/CardTitle.vue

@@ -1,48 +0,0 @@
-<template>
-	<div class="card-title">
-		<h3 v-if="title || $slots.title" class="title">
-			<slot name="title">
-				<span v-text="title" />
-			</slot>
-		</h3>
-		<p v-if="description || $slots.default || $slots.description" class="description gray">
-			<slot>
-				<slot name="description">
-					<span v-text="description" />
-				</slot>
-			</slot>
-		</p>
-	</div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-	title?: string;
-	description?: string;
-}
-
-defineProps<Props>();
-
-defineSlots<{
-	default?: () => unknown;
-	title?: () => unknown;
-	description?: () => unknown;
-}>();
-
-defineOptions({
-	name: "CardTitle"
-});
-</script>
-<style lang="less" scoped>
-.card-title {
-
-	.title {
-		margin: 0;
-	}
-
-	.description {
-		margin: .5rem 0 0 0;
-		font-size: .875rem;
-	}
-}
-</style>

src/pages/permission/RoleEdit.vue

@@ -51,11 +51,11 @@
 			</t-cell>
 		</t-cell-group>
 		<template v-if="aggregatePermissionList.length">
-			<section>
+			<card-container title="聚合权限 P">
-				<card-title title="聚合权限 P">
+				<template #description>
 					<div>该角色拥有以下权限，可执行权限对应的功能，这些权限来自上级角色直接授权或子角色继承。</div>
 					<permission-legend />
-				</card-title>
+				</template>
 				<t-cell-group class="permission-list" theme="card">
 					<permission-cell
 						v-for="item in aggregatePermissionList"
@@ -64,7 +64,7 @@
 						:source="item.source"
 					/>
 				</t-cell-group>
-			</section>
+			</card-container>
 		</template>
 	</div>
 

src/pages/store/StoreBusinessDayCalendar.vue

@@ -14,8 +14,11 @@
 				<span v-text="store.address" />
 			</div>
 		</header>
-		<div class="calendar-card">
+		<card-container
-			<card-title description="设置门店休息日，该日无任何登记记录不视为中断连续登记事件" />
+			class="calendar-card"
+			description="设置门店休息日，该日无任何登记记录不视为中断连续登记事件"
+			tips="点击日期即可新增营休日"
+		>
 			<t-calendar
 				:key="calendarRenderKey"
 				class="calendar"
@@ -29,8 +32,7 @@
 				@select="selectCalendarDate"
 			/>
 			<div v-if="isCalendarLoading" class="loading" v-text="'正在加载当月营业日'" />
-			<div v-else-if="!businessDayList.length" class="empty" v-text="'当月暂无营业日配置，点击日期即可新增'" />
+		</card-container>
-		</div>
 	</div>
 	<t-popup v-model="editorVisible" placement="bottom">
 		<div class="editor">
@@ -352,7 +354,6 @@ onMounted(async () => {
 		}
 
 		:deep(.t-calendar) {
-			margin: 0 1rem;
 			z-index: 1;
 			overflow: hidden;
 			border-radius: .75rem;

src/styles/global.less

@@ -1,3 +1,7 @@
+:root {
+	--td-cell-group-title-padding-left: 32px;
+}
+
 html,
 body,
 #root {