From 1bf53c9d1ca236862c10ffd3336dd7fd39722bbd Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Tue, 11 Aug 2026 17:06:47 +0800
Subject: [PATCH] update RoleEdit style

---
 src/components/BottomPopup.vue                | 136 +++++++++++
 src/components/CardTitle.vue                  |   9 +-
 src/pages/permission/PermissionList.vue       | 137 +----------
 src/pages/permission/RoleEdit.vue             | 220 +++++-------------
 .../permission/component/PermissionCell.vue   |  97 ++++++++
 .../permission/component/PermissionLegend.vue |  49 ++++
 6 files changed, 351 insertions(+), 297 deletions(-)
 create mode 100644 src/components/BottomPopup.vue
 create mode 100644 src/pages/permission/component/PermissionCell.vue
 create mode 100644 src/pages/permission/component/PermissionLegend.vue

diff --git a/src/components/BottomPopup.vue b/src/components/BottomPopup.vue
new file mode 100644
index 0000000..2cd3cd5
--- /dev/null
+++ b/src/components/BottomPopup.vue
@@ -0,0 +1,136 @@
+<template>
+	<t-popup v-model="visible" placement="bottom">
+		<div class="bottom-popup" :style="{height: props.height}">
+			<div v-if="hasHeader" class="header">
+				<div class="button left">
+					<slot name="leftButton">
+						<t-button v-if="leftButtonText" variant="text" size="small" @click="emitLeftButtonClick">
+							<span v-text="leftButtonText" />
+						</t-button>
+					</slot>
+				</div>
+				<div class="title">
+					<slot name="title">
+						<span v-text="title" />
+					</slot>
+				</div>
+				<div class="button right">
+					<slot name="rightButton">
+						<t-button v-if="rightButtonText" theme="primary" variant="text" size="small" @click="emitRightButtonClick">
+							<span v-text="rightButtonText" />
+						</t-button>
+					</slot>
+				</div>
+			</div>
+			<div class="body">
+				<slot />
+			</div>
+		</div>
+	</t-popup>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+	name: "BottomPopup"
+});
+
+interface Props {
+	modelValue?: boolean;
+	leftButtonText?: string;
+	rightButtonText?: string;
+	height?: string | number;
+	title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: false,
+	leftButtonText: "",
+	rightButtonText: "",
+	height: "50vh",
+	title: ""
+});
+
+const emit = defineEmits<{
+	"update:modelValue": [value: boolean];
+	leftButtonClick: [];
+	rightButtonClick: [];
+}>();
+
+const slots = useSlots();
+const visible = computed({
+	get: () => props.modelValue,
+	set: value => emit("update:modelValue", value)
+});
+const hasHeader = computed(() => Boolean(
+	props.title
+	|| props.leftButtonText
+	|| props.rightButtonText
+	|| slots.title
+	|| slots.leftButton
+	|| slots.rightButton
+));
+
+function emitLeftButtonClick(): void {
+	emit("leftButtonClick");
+}
+
+function emitRightButtonClick(): void {
+	emit("rightButtonClick");
+}
+
+defineSlots<{
+	default?: () => unknown;
+	title?: () => unknown;
+	leftButton?: () => unknown;
+	rightButton?: () => unknown;
+}>();
+</script>
+
+<style scoped lang="less">
+.bottom-popup {
+	display: flex;
+	padding-top: 1rem;
+	background: var(--td-bg-color-container, #fff);
+	border-radius: 1.25rem 1.25rem 0 0;
+	flex-direction: column;
+	overflow: hidden;
+
+	.header {
+		padding: 0 1rem;
+		display: grid;
+		grid-template-columns: 4rem 1fr 4rem;
+		align-items: center;
+		flex: none;
+	}
+
+	.button {
+		min-width: 0;
+		display: flex;
+
+		&.right {
+			justify-content: flex-end;
+		}
+	}
+
+	.title {
+		margin: 0;
+		overflow: hidden;
+		text-align: center;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.body {
+		flex: 1;
+		min-height: 0;
+		padding: .75rem 1rem env(safe-area-inset-bottom, 0);
+		overflow: auto;
+	}
+}
+
+:global(html.theme-dark) {
+	.bottom-popup {
+		background: #0f172a;
+	}
+}
+</style>
diff --git a/src/components/CardTitle.vue b/src/components/CardTitle.vue
index 3fd334b..9277118 100644
--- a/src/components/CardTitle.vue
+++ b/src/components/CardTitle.vue
@@ -5,9 +5,11 @@
 				<span v-text="title" />
 			</slot>
 		</h3>
-		<p v-if="description || $slots.description" class="description gray">
-			<slot name="description">
-				<span v-text="description" />
+		<p v-if="description || $slots.default || $slots.description" class="description gray">
+			<slot>
+				<slot name="description">
+					<span v-text="description" />
+				</slot>
 			</slot>
 		</p>
 	</div>
@@ -22,6 +24,7 @@ interface Props {
 defineProps<Props>();
 
 defineSlots<{
+	default?: () => unknown;
 	title?: () => unknown;
 	description?: () => unknown;
 }>();
diff --git a/src/pages/permission/PermissionList.vue b/src/pages/permission/PermissionList.vue
index 534d214..7027705 100644
--- a/src/pages/permission/PermissionList.vue
+++ b/src/pages/permission/PermissionList.vue
@@ -10,19 +10,8 @@
 				<t-cell-group class="header" theme="card">
 					<t-cell title="当前账号角色聚合权限 P">
 						<template #description>
-							<div class="description">
-								<div>你拥有以下权限，可执行权限对应的功能，这些权限来自上级角色直接授权或子角色继承。</div>
-								<div class="legends">
-									<div class="legend">
-										<span class="block direct"></span>
-										<span>上级角色直接授权</span>
-									</div>
-									<div class="legend">
-										<span class="block inherited"></span>
-										<span>子角色继承授权</span>
-									</div>
-								</div>
-							</div>
+							<div>你拥有以下权限，可执行权限对应的功能，这些权限来自上级角色直接授权或子角色继承。</div>
+							<permission-legend />
 						</template>
 					</t-cell>
 				</t-cell-group>
@@ -32,14 +21,7 @@
 						:key="item.id"
 						class="item"
 					>
-						<t-cell :title="item.name">
-							<template #leftIcon>
-								<span class="source" :class="`source-${item.source}`"/>
-							</template>
-							<template #note>
-								<span class="code" v-text="formatPermissionCode(item)" />
-							</template>
-						</t-cell>
+						<permission-cell :permission="item" :source="item.source" />
 					</t-swipe-cell>
 				</t-cell-group>
 				<t-empty v-else-if="!permissionStore.loading && !isSourceLoading" description="暂无权限" />
@@ -53,6 +35,8 @@ import { type Role as UserRole, RoleAPI, useUserStore } from "timi-web";
 import type { Permission } from "@/store/permissionSettingsStore";
 import { moduleCode, usePermissionSettingsStore } from "@/store/permissionSettingsStore";
 import { corePermissionCodes } from "@/utils/permission";
+import PermissionCell from "@/pages/permission/component/PermissionCell.vue";
+import PermissionLegend from "@/pages/permission/component/PermissionLegend.vue";
 
 defineOptions({
 	name: "PermissionList"
@@ -157,10 +141,6 @@ async function loadSourceRoles(): Promise<void> {
 
 <style scoped lang="less">
 .permission-list {
-	--source-direct-color: #2563EB;
-	--source-inherited-color: #14B8A6;
-	--source-unknown-color: #94A3B8;
-
 	padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
 
 	.list-wrapper {
@@ -176,32 +156,6 @@ async function loadSourceRoles(): Promise<void> {
 					gap: .5rem;
 					display: flex;
 					flex-direction: column;
-
-					.legends {
-						gap: 1.5rem;
-						display: flex;
-
-						.legend {
-							gap: .25rem;
-							display: flex;
-							align-items: center;
-
-							.block {
-								width: 1rem;
-								height: 1rem;
-								display: block;
-								border-radius: .25rem;
-
-								&.direct {
-									background: var(--source-direct-color);
-								}
-
-								&.inherited {
-									background: var(--source-inherited-color);
-								}
-							}
-						}
-					}
 				}
 			}
 
@@ -213,90 +167,9 @@ async function loadSourceRoles(): Promise<void> {
 						display: none;
 					}
 				}
-
-				:deep(.t-cell) {
-
-					&__left {
-						display: flex;
-						align-items: center;
-					}
-
-					&__title {
-						flex: 1 1 0;
-						min-width: 0;
-					}
-
-					&__title-text {
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-					}
-
-					&__note {
-						flex: 0 1 auto;
-						min-width: 0;
-						max-width: 56%;
-						text-align: right;
-						justify-content: flex-end;
-					}
-
-					.source {
-						width: 1rem;
-						height: 1rem;
-						display: block;
-						border-radius: .25rem;
-
-						&-direct {
-							background: var(--source-direct-color);
-						}
-
-						&-inherited {
-							background: var(--source-inherited-color);
-						}
-
-						&-unknown {
-							background: var(--source-unknown-color);
-						}
-					}
-
-					.code {
-						width: 100%;
-						display: block;
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-					}
-				}
-			}
-		}
-	}
-}
-
-:global(html.theme-dark) {
-	.permission-list {
-		.list-wrapper {
-			.content {
-				.item {
-					:deep(.t-cell) {
-						.source {
-							&-direct {
-								background: #60a5fa;
-							}
-
-							&-inherited {
-								background: #2dd4bf;
-							}
-
-							&-unknown {
-								background: #64748b;
-							}
-						}
-					}
-				}
 			}
 		}
 	}
 }
 
 </style>
-
diff --git a/src/pages/permission/RoleEdit.vue b/src/pages/permission/RoleEdit.vue
index e35e547..3397f23 100644
--- a/src/pages/permission/RoleEdit.vue
+++ b/src/pages/permission/RoleEdit.vue
@@ -4,20 +4,27 @@
 			<t-form-item label="名称">
 				<t-input v-model.trim="formModel.name" placeholder="角色名称" borderless :disabled="!canEditRoleInfo" />
 			</t-form-item>
-			<t-form-item label="代码">
+			<t-form-item label="代码" :help="isBuiltinRole ? '内建角色代码不可修改' : ''">
 				<t-input v-model.trim="formModel.code" placeholder="如 front-desk" borderless :disabled="!canEditRoleCode" />
-				<div v-if="isBuiltinRole" class="hint" v-text="'内建角色代码不可修改'" />
 			</t-form-item>
 			<t-form-item label="模块">
 				<t-input v-model.trim="formModel.moduleCode" placeholder="模块代码" borderless disabled />
 			</t-form-item>
-			<t-form-item label="上级" :arrow="canEditParentRole" @click="openParentRolePicker">
+			<t-form-item
+				label="上级"
+				:arrow="canEditParentRole"
+				@click.stop="openParentRolePicker"
+			>
 				<div class="picker-text" v-text="selectedParentRoleName" />
 			</t-form-item>
 			<t-form-item label="说明">
 				<t-textarea v-model.trim="formModel.description" class="textarea" placeholder="角色说明" autosize borderless :disabled="!canEditRoleInfo" />
 			</t-form-item>
-			<t-form-item label="继承角色" :arrow="canEditRoleRelation" @click="openChildRolePicker">
+			<t-form-item
+				label="继承角色"
+				:arrow="canEditRoleRelation"
+				@click.stop="openChildRolePicker"
+			>
 				<div class="picker-text" v-text="selectedChildRoleName" />
 			</t-form-item>
 		</t-form>
@@ -45,20 +52,17 @@
 		</t-cell-group>
 		<template v-if="aggregatePermissionList.length">
 			<section>
-				<card-title title="聚合权限 P" description="该角色拥有以下权限，可执行权限对应的功能，这些权限来自上级角色直接授权或子角色继承。" />
+				<card-title title="聚合权限 P">
+					<div>该角色拥有以下权限，可执行权限对应的功能，这些权限来自上级角色直接授权或子角色继承。</div>
+					<permission-legend />
+				</card-title>
 				<t-cell-group class="permission-list" theme="card">
-					<t-cell
+					<permission-cell
 						v-for="item in aggregatePermissionList"
 						:key="item.id"
-						:title="item.name"
-					>
-						<template #leftIcon>
-							<span class="source" :class="`source-${item.source}`" />
-						</template>
-						<template #note>
-							<span class="code" v-text="formatPermissionCode(item)" />
-						</template>
-					</t-cell>
+						:permission="item"
+						:source="item.source"
+					/>
 				</t-cell-group>
 			</section>
 		</template>
@@ -73,29 +77,27 @@
 			@confirm="confirmParentRolePicker"
 		/>
 	</t-popup>
-	<t-popup v-model="childRolePickerVisible" placement="bottom">
-		<div class="role-picker bg-white">
-			<div class="picker-header">
-				<t-button variant="text" size="small" @click="cancelChildRolePicker">取消</t-button>
-				<span class="title" v-text="'继承角色'" />
-				<t-button theme="primary" variant="text" size="small" :loading="savingTarget === 'inherit'" @click="saveRoleInherit">保存</t-button>
-			</div>
-			<div class="picker-body">
-				<t-checkbox-group v-if="childOptions.length" v-model="childRolePickerDraft" class="group">
-					<t-checkbox
-						v-for="item in childOptions"
-						:key="item.id"
-						class="item"
-						:value="item.id"
-						:label="item.name || item.code"
-						icon="line"
-						borderless
-					/>
-				</t-checkbox-group>
-				<t-empty v-else description="暂无可继承角色" />
-			</div>
-		</div>
-	</t-popup>
+	<bottom-popup
+		v-model="childRolePickerVisible"
+		title="继承角色"
+		left-button-text="取消"
+		right-button-text="保存"
+		@leftButtonClick="cancelChildRolePicker"
+		@rightButtonClick="saveRoleInherit"
+	>
+		<t-checkbox-group v-if="childOptions.length" v-model="childRolePickerDraft" class="role-options">
+			<t-checkbox
+				v-for="item in childOptions"
+				:key="item.id"
+				class="item"
+				:value="item.id"
+				:label="item.name || item.code"
+				icon="line"
+				borderless
+			/>
+		</t-checkbox-group>
+		<t-empty v-else description="暂无可继承角色" />
+	</bottom-popup>
 </template>
 
 <script setup lang="ts">
@@ -111,6 +113,8 @@ import {
 	usePermissionSettingsStore
 } from "@/store/permissionSettingsStore";
 import { corePermissionCodes, coreRoleCodes } from "@/utils/permission";
+import PermissionCell from "@/pages/permission/component/PermissionCell.vue";
+import PermissionLegend from "@/pages/permission/component/PermissionLegend.vue";
 
 defineOptions({
 	name: "RoleEdit"
@@ -198,9 +202,6 @@ const aggregatePermissionList = computed<PermissionWithSource[]>(() => {
 		source: directPermissionIdSet.has(permission.id) ? "direct" : "inherited"
 	}));
 });
-function formatPermissionCode(permission: Permission): string {
-	return `${permission.moduleCode}:${permission.code}`;
-}
 
 // ---------- 选择器 ----------
 type PickerValue = string | number;
@@ -257,7 +258,6 @@ function openChildRolePicker(): void {
 	if (!canEditRoleRelation.value) {
 		return;
 	}
-
 	childRolePickerDraft.value = [...formModel.childRoleIdList];
 	childRolePickerVisible.value = true;
 }
@@ -492,114 +492,29 @@ onUnmounted(() => navBarStore.clearRight());
 		width: 100%;
 	}
 
-	.permission-list {
-		--source-direct-color: #2563EB;
-		--source-inherited-color: #14B8A6;
-
-		:deep(.t-cell) {
-
-			&__left {
-				display: flex;
-				align-items: center;
-			}
-
-			&__title {
-				flex: 1 1 0;
-				min-width: 0;
-			}
-
-			&__title-text {
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
-
-			&__note {
-				flex: 0 1 auto;
-				min-width: 0;
-				max-width: 56%;
-				text-align: right;
-				justify-content: flex-end;
-			}
-		}
-
-			.code {
-			width: 100%;
-			display: block;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-
-		.source {
-			width: 1rem;
-			height: 1rem;
-			display: block;
-			border-radius: .25rem;
-
-			&-direct {
-				background: var(--source-direct-color);
-			}
-
-			&-inherited {
-				background: var(--source-inherited-color);
-			}
-		}
-	}
-
 	.picker-text {
 		color: var(--td-text-color-primary);
 		line-height: 1.5rem;
-	}
-
-	.group {
-		--td-checkbox-vertical-padding: 10px;
-
-		background: #fff;
-		border-radius: .75rem;
-
-		.item:not(:last-child)::after {
-			left: 16px;
-			right: 0;
-			bottom: 0;
-			content: ' ';
-			position: absolute;
-			box-sizing: border-box;
-			pointer-events: none;
-			border-bottom: 1px solid var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7));
-			-webkit-box-sizing: border-box;
-		}
+		cursor: pointer;
 	}
 }
 
-.role-picker {
-	display: flex;
-	height: 70vh;
-	padding-top: 1rem;
-	border-radius: 1.25rem 1.25rem 0 0;
-	flex-direction: column;
+.role-options {
+	--td-checkbox-vertical-padding: 10px;
 
-	.picker-header {
-		padding: 0 1rem;
-		display: grid;
-		grid-template-columns: 4rem 1fr 4rem;
-		align-items: center;
+	background: #fff;
+	border-radius: .75rem;
 
-		.title {
-			text-align: center;
-		}
-	}
-
-	.picker-body {
-		flex: 1;
-		overflow: auto;
-		min-height: 0;
-		padding: .75rem 1rem env(safe-area-inset-bottom, 0);
-	}
-
-	.group {
-		background: #fff;
-		border-radius: .75rem;
+	.item:not(:last-child)::after {
+		left: 16px;
+		right: 0;
+		bottom: 0;
+		content: ' ';
+		position: absolute;
+		box-sizing: border-box;
+		pointer-events: none;
+		border-bottom: 1px solid var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7));
+		-webkit-box-sizing: border-box;
 	}
 }
 
@@ -615,29 +530,10 @@ onUnmounted(() => navBarStore.clearRight());
 			}
 		}
 
-		.code {
-			color: #94a3b8;
-		}
-
-		.permission-list {
-			.source {
-				&-direct {
-					background: #60a5fa;
-				}
-
-				&-inherited {
-					background: #2dd4bf;
-				}
-			}
-		}
 	}
 
-	.role-picker {
+	.role-options {
 		background: #0f172a;
-
-		.group {
-			background: #0f172a;
-		}
 	}
 }
 </style>
diff --git a/src/pages/permission/component/PermissionCell.vue b/src/pages/permission/component/PermissionCell.vue
new file mode 100644
index 0000000..c2cf39d
--- /dev/null
+++ b/src/pages/permission/component/PermissionCell.vue
@@ -0,0 +1,97 @@
+<template>
+	<t-cell class="permission-cell" :title="permission.name || permission.code">
+		<template #leftIcon>
+			<span class="source" :class="`source-${source}`" />
+		</template>
+		<template #note>
+			<span class="code" v-text="permissionCode" />
+		</template>
+	</t-cell>
+</template>
+<script setup lang="ts">
+import type { Permission } from "@/store/permissionSettingsStore";
+
+export type PermissionCellSource = "direct" | "inherited" | "unknown";
+
+const props = withDefaults(defineProps<{
+	permission: Permission;
+	source?: PermissionCellSource;
+}>(), {
+	source: "unknown"
+});
+
+const permissionCode = computed(() => `${props.permission.moduleCode}:${props.permission.code}`);
+</script>
+
+<style scoped lang="less">
+.permission-cell {
+	--source-direct-color: #2563EB;
+	--source-inherited-color: #14B8A6;
+	--source-unknown-color: #94A3B8;
+
+	align-items: center;
+
+	:deep(.t-cell__left) {
+		display: flex;
+		align-items: center;
+	}
+
+	:deep(.t-cell__title) {
+		flex: 1 1 0;
+		min-width: 0;
+	}
+
+	:deep(.t-cell__title-text) {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	:deep(.t-cell__note) {
+		flex: 0 1 auto;
+		min-width: 0;
+		max-width: 56%;
+		text-align: right;
+		justify-content: flex-end;
+	}
+
+	.source {
+		width: 1rem;
+		height: 1rem;
+		display: block;
+		border-radius: .25rem;
+
+		&-direct {
+			background: var(--source-direct-color);
+		}
+
+		&-inherited {
+			background: var(--source-inherited-color);
+		}
+
+		&-unknown {
+			background: var(--source-unknown-color);
+		}
+	}
+
+	.code {
+		width: 100%;
+		display: block;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+}
+
+:global(html.theme-dark) {
+	.permission-cell {
+		--source-direct-color: #60A5FA;
+		--source-inherited-color: #2DD4BF;
+		--source-unknown-color: #64748B;
+
+		.code {
+			color: #94A3B8;
+		}
+	}
+}
+</style>
diff --git a/src/pages/permission/component/PermissionLegend.vue b/src/pages/permission/component/PermissionLegend.vue
new file mode 100644
index 0000000..312e5f3
--- /dev/null
+++ b/src/pages/permission/component/PermissionLegend.vue
@@ -0,0 +1,49 @@
+<template>
+	<div class="permission-legend">
+		<div class="legend">
+			<span class="block direct"></span>
+			<span>上级角色直接授权</span>
+		</div>
+		<div class="legend">
+			<span class="block inherited"></span>
+			<span>子角色继承授权</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="less">
+.permission-legend {
+	--source-direct-color: #2563EB;
+	--source-inherited-color: #14B8A6;
+	--source-unknown-color: #94A3B8;
+
+	gap: 1.5rem;
+	display: flex;
+	margin-top: .5rem;
+
+	.legend {
+		gap: .25rem;
+		display: flex;
+		align-items: center;
+
+		.block {
+			width: 1rem;
+			height: 1rem;
+			display: block;
+			border-radius: .25rem;
+
+			&.direct {
+				background: var(--source-direct-color);
+			}
+
+			&.inherited {
+				background: var(--source-inherited-color);
+			}
+		}
+	}
+}
+</style>