update RoleEdit style

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>

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>