update RoleEdit style

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>
-